Toggle

'use client'

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

/**
 * Text toggles (pressed shows ✓, the inverse pair and weight 700), an icon
 * toggle that swaps ▷ for ‖, sizes, and a disabled toggle.
 */
export function ToggleStates() {
  const [playing, setPlaying] = React.useState(false)

  return (
    <div className={styles.stack}>
      <div className={styles.row}>
        <Toggle defaultPressed>Show Trails</Toggle>
        <Toggle icon="zoom_in">Magnify</Toggle>
        <Toggle size="sm">Small</Toggle>
        <Toggle disabled>Offline Maps</Toggle>
      </div>
      <div className={styles.row}>
        <Toggle
          iconOnly
          icon="play_arrow"
          pressedIcon="pause"
          pressed={playing}
          onPressedChange={setPlaying}
        >
          {playing ? 'Pause Birdsong' : 'Play Birdsong'}
        </Toggle>
        <span className={styles.status} aria-live="polite">
          {playing ? 'Playing' : 'Paused'}
        </span>
      </div>
    </div>
  )
}

'use client'

import * as React from 'react'
import { Toggle } from '@fairgarden-private/design/components/Toggle'
import { ToggleGroup } from '@fairgarden-private/design/components/ToggleGroup'
import styles from './groups.module.css'

const sizes = ['XS', 'S', 'M', 'L', 'XL']

/**
 * A segmented view switch (single: ●), filter chips (multiple: ✓) and a
 * single-choice chip group whose label echoes the value.
 */
export function ToggleGroups() {
  const [size, setSize] = React.useState<string[]>(['M'])

  return (
    <div className={styles.stack}>
      <ToggleGroup variant="segmented" label="View" defaultValue={['map']}>
        <Toggle value="map">Map</Toggle>
        <Toggle value="list">List</Toggle>
        <Toggle value="grid">Grid</Toggle>
      </ToggleGroup>
      <ToggleGroup variant="chip" label="Filter Trails" multiple defaultValue={['shaded']}>
        <Toggle value="shaded">Shaded</Toggle>
        <Toggle value="loop">Loop Trail</Toggle>
        <Toggle value="dogs">Dog Friendly</Toggle>
        <Toggle value="water">Near Water</Toggle>
        <Toggle value="access" disabled>
          Step Free
        </Toggle>
      </ToggleGroup>
      <ToggleGroup
        variant="chip"
        label={`Size: ${size[0] ?? 'None'}`}
        value={size}
        onValueChange={setSize}
      >
        {sizes.map((value) => (
          <Toggle key={value} value={value}>
            {value}
          </Toggle>
        ))}
      </ToggleGroup>
      <ToggleGroup label="Units" defaultValue={['metric']}>
        <Toggle value="metric">Metric</Toggle>
        <Toggle value="imperial">Imperial</Toggle>
      </ToggleGroup>
    </div>
  )
}

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

/**
 * Toggles and segments draw every part from `primary`; `secondary` drives
 * only the selected filter chip.
 */
export function ToggleColor() {
  return (
    <div className={styles.grid}>
      <Toggle defaultPressed primary="plum">
        Primary Plum
      </Toggle>
      <ToggleGroup variant="chip" multiple aria-label="Scope chips" defaultValue={['a']}>
        <Toggle value="a">Scope Chip</Toggle>
      </ToggleGroup>
      <ToggleGroup
        variant="chip"
        multiple
        secondary="indigo"
        aria-label="Indigo chips"
        defaultValue={['a']}
      >
        <Toggle value="a">Secondary Indigo</Toggle>
      </ToggleGroup>
    </div>
  )
}

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

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

/**
 * Segments take the inverse pair on every ground; the selected chip is
 * green on paper and the inverse pair on forest.
 */
export function ToggleGrounds() {
  return (
    <div className={styles.row}>
      {presets.map((preset) => (
        <PresetGround key={preset} preset={preset} className={styles.face}>
          <span className={styles.name}>{preset}</span>
          <ToggleGroup variant="segmented" aria-label={`View on ${preset}`} defaultValue={['day']}>
            <Toggle value="day">Day</Toggle>
            <Toggle value="week">Week</Toggle>
          </ToggleGroup>
          <ToggleGroup
            variant="chip"
            multiple
            aria-label={`Filters on ${preset}`}
            defaultValue={['birds']}
          >
            <Toggle value="birds">Birds</Toggle>
            <Toggle value="ferns">Ferns</Toggle>
          </ToggleGroup>
        </PresetGround>
      ))}
    </div>
  )
}