RadioGroup

'use client';

import { Radio, RadioGroup } from '@akhatmirzo/ui';

export default function RadioGroupBasic() {
  return (
    <RadioGroup aria-label="To'lov usuli" defaultValue="click">
      <Radio value="click" label="Click" />
      <Radio value="payme" label="Payme" />
      <Radio value="cash" label="Naqd pul" />
    </RadioGroup>
  );
}

'use client';

import { Radio, RadioGroup } from '@akhatmirzo/ui';

export default function RadioGroupHorizontal() {
  return (
    <RadioGroup aria-label="Yetkazib berish" orientation="horizontal" defaultValue="express">
      <Radio value="express" label="Tezkor" />
      <Radio value="standard" label="Oddiy" />
      <Radio value="pickup" label="Olib ketish" />
    </RadioGroup>
  );
}

'use client';

import { Radio, RadioGroup } from '@akhatmirzo/ui';

export default function RadioGroupSizes() {
  return (
    <div className="flex flex-wrap items-start gap-10">
      <RadioGroup aria-label="Interfeys tili (kichik)" size="sm" defaultValue="uz">
        <Radio value="uz" label="O'zbekcha" />
        <Radio value="ru" label="Ruscha" description="Kirill yozuvida" />
      </RadioGroup>
      <RadioGroup aria-label="Interfeys tili (o'rta)" defaultValue="uz">
        <Radio value="uz" label="O'zbekcha" />
        <Radio value="ru" label="Ruscha" description="Kirill yozuvida" />
      </RadioGroup>
    </div>
  );
}

'use client';

import { Radio, RadioGroup } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function RadioGroupCard() {
  const [plan, setPlan] = useState('pro');

  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <RadioGroup aria-label="Tarif" variant="card" value={plan} onValueChange={setPlan}>
        <Radio value="free" label="Bepul" description="1 ta do'kon, asosiy imkoniyatlar" />
        <Radio
          value="pro"
          label="Pro · 149 000 so'm"
          description="Cheksiz do'konlar va hisobotlar"
        />
        <Radio value="team" label="Jamoa" description="Tez orada" disabled />
      </RadioGroup>
      <p className="text-sm text-text-muted">Tanlangan tarif: {plan}</p>
    </div>
  );
}

'use client';

import { Radio, RadioGroup } from '@akhatmirzo/ui';

export default function RadioGroupStates() {
  return (
    <div className="flex flex-wrap items-start gap-10">
      <RadioGroup aria-label="Butun guruh o'chirilgan" disabled defaultValue="a">
        <Radio value="a" label="Tanlangan" />
        <Radio value="b" label="Tanlanmagan" />
      </RadioGroup>
      <RadioGroup aria-label="Bitta variant o'chirilgan">
        <Radio value="a" label="Omborda bor" />
        <Radio value="b" label="Tugagan" disabled />
      </RadioGroup>
      <RadioGroup aria-label="Xato holati" invalid>
        <Radio value="yes" label="Ha" />
        <Radio value="no" label="Yo'q" />
      </RadioGroup>
    </div>
  );
}

'use client';

import { Field, Radio, RadioGroup } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function RadioGroupWithField() {
  const [value, setValue] = useState<string>();

  return (
    <Field label="Yetkazib berish" required error={value ? undefined : 'Usulni tanlang'}>
      <RadioGroup value={value} onValueChange={setValue}>
        <Radio value="courier" label="Kuryer" description="Ertaga, 25 000 so'm" />
        <Radio value="pickup" label="Olib ketish" description="Bugun, bepul" />
      </RadioGroup>
    </Field>
  );
}