Radio Group

import { Label } from '@jamie/ui/label'
import { RadioGroup, RadioGroupItem } from '@jamie/ui/radio-group'
 
export function RadioGroupDemo() {
  return (
    <RadioGroup defaultValue="summary">
      <div className="flex items-center gap-2">
        <RadioGroupItem value="summary" id="r1" />
        <Label htmlFor="r1">Summary only</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="transcript" id="r2" />
        <Label htmlFor="r2">Full transcript</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="both" id="r3" />
        <Label htmlFor="r3">Summary + transcript</Label>
      </div>
    </RadioGroup>
  )
}

import { Label } from '@jamie/ui/label'
import { RadioGroup, RadioGroupItem } from '@jamie/ui/radio-group'
 
export function RadioGroupWithDescriptionDemo() {
  return (
    <RadioGroup defaultValue="immediate" className="gap-4">
      <Label className="flex items-start gap-3 cursor-pointer">
        <RadioGroupItem value="immediate" className="mt-0.5" />
        <div className="flex flex-col gap-0.5">
          <span className="text-sm font-medium">Immediate</span>
          <span className="text-xs text-muted-foreground">
            Send the recap as soon as the meeting ends.
          </span>
        </div>
      </Label>
      <Label className="flex items-start gap-3 cursor-pointer">
        <RadioGroupItem value="delayed" className="mt-0.5" />
        <div className="flex flex-col gap-0.5">
          <span className="text-sm font-medium">After 15 minutes</span>
          <span className="text-xs text-muted-foreground">
            Wait for late corrections before sending.
          </span>
        </div>
      </Label>
      <Label className="flex items-start gap-3 cursor-pointer">
        <RadioGroupItem value="manual" className="mt-0.5" />
        <div className="flex flex-col gap-0.5">
          <span className="text-sm font-medium">Manual</span>
          <span className="text-xs text-muted-foreground">
            Only send when you explicitly approve the recap.
          </span>
        </div>
      </Label>
    </RadioGroup>
  )
}

import { Label } from '@jamie/ui/label'
import { RadioGroup, RadioGroupItem } from '@jamie/ui/radio-group'
 
export function RadioGroupSizesDemo() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-1">
        <span className="text-xs text-muted-foreground">Small</span>
        <RadioGroup defaultValue="a" className="flex-row gap-4">
          <div className="flex items-center gap-2">
            <RadioGroupItem value="a" size="sm" id="sm-a" />
            <Label htmlFor="sm-a">Option A</Label>
          </div>
          <div className="flex items-center gap-2">
            <RadioGroupItem value="b" size="sm" id="sm-b" />
            <Label htmlFor="sm-b">Option B</Label>
          </div>
        </RadioGroup>
      </div>
      <div className="flex flex-col gap-1">
        <span className="text-xs text-muted-foreground">Default</span>
        <RadioGroup defaultValue="a" className="flex-row gap-4">
          <div className="flex items-center gap-2">
            <RadioGroupItem value="a" id="def-a" />
            <Label htmlFor="def-a">Option A</Label>
          </div>
          <div className="flex items-center gap-2">
            <RadioGroupItem value="b" id="def-b" />
            <Label htmlFor="def-b">Option B</Label>
          </div>
        </RadioGroup>
      </div>
      <div className="flex flex-col gap-1">
        <span className="text-xs text-muted-foreground">Large</span>
        <RadioGroup defaultValue="a" className="flex-row gap-4">
          <div className="flex items-center gap-2">
            <RadioGroupItem value="a" size="lg" id="lg-a" />
            <Label htmlFor="lg-a">Option A</Label>
          </div>
          <div className="flex items-center gap-2">
            <RadioGroupItem value="b" size="lg" id="lg-b" />
            <Label htmlFor="lg-b">Option B</Label>
          </div>
        </RadioGroup>
      </div>
    </div>
  )
}