Radio

'use client'

import * as React from 'react'
import { Radio, RadioFeedback } from '@fairgarden-private/design/components/Radio'
import { RadioGroup } from '@fairgarden-private/design/components/RadioGroup'
import styles from './states.module.css'

/**
 * A preselected group with a disabled option, a disabled group, and a quiz
 * whose answers gain a glyph and a word once checked.
 */
export function RadioStates() {
  const deliveryId = React.useId()
  const lockedId = React.useId()
  const quizId = React.useId()
  const [answer, setAnswer] = React.useState<string | undefined>(undefined)

  return (
    <div className={styles.stack}>
      <div className={styles.group}>
        <p id={deliveryId} className={styles.legend}>
          Delivery
        </p>
        <RadioGroup aria-labelledby={deliveryId} defaultValue="standard">
          <Radio value="standard" description="Arrives in 5–7 days.">
            Standard Post
          </Radio>
          <Radio value="express">Express Post</Radio>
          <Radio value="pickup" disabled>
            Store Pickup (unavailable)
          </Radio>
        </RadioGroup>
      </div>
      <div className={styles.group}>
        <p id={lockedId} className={styles.legend}>
          Membership Tier
        </p>
        <RadioGroup aria-labelledby={lockedId} defaultValue="family" disabled>
          <Radio value="single">Single</Radio>
          <Radio value="family">Family</Radio>
        </RadioGroup>
      </div>
      <div className={styles.group}>
        <p id={quizId} className={styles.legend}>
          Which bird nests on the ground?
        </p>
        <RadioGroup
          aria-labelledby={quizId}
          value={answer}
          onValueChange={(value) => setAnswer(value as string)}
        >
          <Radio
            value="killdeer"
            feedback={answer ? <RadioFeedback status="success" /> : null}
          >
            Killdeer
          </Radio>
          <Radio
            value="heron"
            feedback={answer === 'heron' ? <RadioFeedback status="danger" /> : null}
          >
            Great Blue Heron
          </Radio>
          <Radio
            value="swift"
            feedback={answer === 'swift' ? <RadioFeedback status="danger" /> : null}
          >
            Chimney Swift
          </Radio>
        </RadioGroup>
      </div>
    </div>
  )
}

'use client'

import * as React from 'react'
import { Radio } from '@fairgarden-private/design/components/Radio'
import { RadioGroup } from '@fairgarden-private/design/components/RadioGroup'
import styles from './kinds.module.css'

const swatches = [
  { value: 'moss', name: 'Moss', color: 'var(--grass9)' },
  { value: 'rust', name: 'Rust', color: 'var(--orange9)' },
  { value: 'slate', name: 'Slate', color: 'var(--slate11)' },
  { value: 'oat', name: 'Oat', color: 'var(--sand4)' },
  { value: 'ink', name: 'Ink', color: 'var(--blue12)' },
]

/**
 * Option pills (stacked answers) and swatches (color discs whose name is
 * the label, echoed in the legend).
 */
export function RadioKinds() {
  const pillsId = React.useId()
  const swatchId = React.useId()
  const [color, setColor] = React.useState('moss')
  const chosen = swatches.find((swatch) => swatch.value === color)

  return (
    <div className={styles.stack}>
      <div className={styles.group}>
        <p id={pillsId} className={styles.legend}>
          How often do you hike?
        </p>
        <RadioGroup kind="pill" aria-labelledby={pillsId} defaultValue="monthly">
          <Radio value="weekly">Every Week</Radio>
          <Radio value="monthly">Every Month</Radio>
          <Radio value="yearly">A Few Times a Year</Radio>
          <Radio value="never" disabled>
            Not Yet (unavailable)
          </Radio>
        </RadioGroup>
      </div>
      <div className={styles.group}>
        <p id={swatchId} className={styles.legend}>
          Color: {chosen?.name}
        </p>
        <RadioGroup
          kind="swatch"
          aria-labelledby={swatchId}
          value={color}
          onValueChange={(value) => setColor(value as string)}
        >
          {swatches.map((swatch) => (
            <Radio key={swatch.value} value={swatch.value} swatch={swatch.color}>
              {swatch.name}
            </Radio>
          ))}
        </RadioGroup>
      </div>
    </div>
  )
}

import { Radio } from '@fairgarden-private/design/components/Radio'
import { RadioGroup } from '@fairgarden-private/design/components/RadioGroup'
import styles from './color.module.css'

/**
 * `secondary` drives the checked fill, dot and edge; `primary` drives the
 * circle edge, labels and focus ring. A group passes its scales down.
 */
export function RadioColor() {
  return (
    <div className={styles.grid}>
      <RadioGroup aria-label="Scope colors" defaultValue="a">
        <Radio value="a">Scope Colors</Radio>
        <Radio value="b">Unchecked</Radio>
      </RadioGroup>
      <RadioGroup aria-label="Secondary indigo" secondary="indigo" defaultValue="a">
        <Radio value="a">Secondary Indigo</Radio>
        <Radio value="b">Unchecked</Radio>
      </RadioGroup>
      <RadioGroup aria-label="Primary plum" primary="plum" defaultValue="a">
        <Radio value="a">Primary Plum</Radio>
        <Radio value="b">Unchecked</Radio>
      </RadioGroup>
    </div>
  )
}

import { Radio } from '@fairgarden-private/design/components/Radio'
import { RadioGroup } from '@fairgarden-private/design/components/RadioGroup'
import { PresetGround } from '@/components/PresetGround'
import styles from './grounds.module.css'

const presets = ['paper', 'forest'] as const

/** Green selection on paper; the inverse pair on forest, for circles and pills alike. */
export function RadioGrounds() {
  return (
    <div className={styles.row}>
      {presets.map((preset) => (
        <PresetGround key={preset} preset={preset} className={styles.face}>
          <span className={styles.name}>{preset}</span>
          <RadioGroup aria-label={`Trail length on ${preset}`} defaultValue="short">
            <Radio value="short">Short Loop</Radio>
            <Radio value="long">Long Loop</Radio>
            <Radio value="closed" disabled>
              Closed Loop
            </Radio>
          </RadioGroup>
          <RadioGroup kind="pill" aria-label={`Pace on ${preset}`} defaultValue="easy">
            <Radio value="easy">Easy Pace</Radio>
            <Radio value="brisk">Brisk Pace</Radio>
          </RadioGroup>
        </PresetGround>
      ))}
    </div>
  )
}