Radio

import { Radio } from '@skyroc/native-ui';
import { View } from 'react-native';

const RadioBasic = () => {
  return (
    <View className="gap-3 bg-background p-4">
      <Radio defaultChecked>默认选中</Radio>
      <Radio>未选中</Radio>
    </View>
  );
};

export { RadioBasic };

import { Radio, RadioGroup } from '@skyroc/native-ui';
import type { ThemeColor } from '@skyroc/ui-types';
import { View } from 'react-native';

const COLORS: ThemeColor[] = ['primary', 'destructive', 'success', 'warning', 'info', 'accent', 'carbon', 'secondary'];

const RadioColor = () => {
  return (
    <View className="gap-4 bg-background p-4">
      {COLORS.map(c => (
        <RadioGroup
          color={c}
          defaultValue="a"
          direction="horizontal"
          key={c}
        >
          <Radio name="a">{c}</Radio>
          <Radio name="b">B</Radio>
        </RadioGroup>
      ))}
    </View>
  );
};

export { RadioColor };

import { Radio } from '@skyroc/native-ui';
import { View } from 'react-native';

const SIZES = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const;

const RadioSize = () => {
  return (
    <View className="gap-3 bg-background p-4">
      {SIZES.map(s => (
        <Radio
          key={s}
          defaultChecked
          size={s}
        >
          {s}
        </Radio>
      ))}
    </View>
  );
};

export { RadioSize };

import { Radio } from '@skyroc/native-ui';
import { View } from 'react-native';

const RadioShape = () => {
  return (
    <View className="gap-3 bg-background p-4">
      <Radio
        defaultChecked
        shape="round"
      >
        圆形（默认）
      </Radio>
      <Radio
        defaultChecked
        shape="square"
      >
        方形
      </Radio>
    </View>
  );
};

export { RadioShape };

import Feather from '@expo/vector-icons/Feather';
import { Radio } from '@skyroc/native-ui';
import { View } from 'react-native';

const RadioIndicator = () => {
  return (
    <View className="gap-4 bg-background p-4">
      <Radio
        defaultChecked
        iconSize={28}
      >
        iconSize=28
      </Radio>
      <Radio
        defaultChecked
        checkedIcon={
          <Feather
            color="var(--primary)"
            name="star"
            size={18}
          />
        }
        iconSize={28}
      >
        自定义 checkedIcon
      </Radio>
    </View>
  );
};

export { RadioIndicator };

import { Radio, RadioGroup } from '@skyroc/native-ui';
import { View } from 'react-native';

const RadioDisabled = () => {
  return (
    <View className="gap-3 bg-background p-4">
      <Radio disabled>Disabled</Radio>
      <Radio
        defaultChecked
        disabled
      >
        Disabled & Checked
      </Radio>
      <RadioGroup
        disabled
        defaultValue="a"
      >
        <Radio name="a">整组禁用：已选</Radio>
        <Radio name="b">整组禁用：未选</Radio>
      </RadioGroup>
    </View>
  );
};

export { RadioDisabled };

import { Radio } from '@skyroc/native-ui';
import { View } from 'react-native';

const RadioLabelPosition = () => {
  return (
    <View className="gap-3 bg-background p-4">
      <Radio labelPosition="right">标签在右侧</Radio>
      <Radio labelPosition="left">标签在左侧</Radio>
      <Radio labelDisabled>标签不可点击，仅指示器可选</Radio>
    </View>
  );
};

export { RadioLabelPosition };

import { Button, Radio } from '@skyroc/native-ui';
import { useState } from 'react';
import { View } from 'react-native';

const RadioControlled = () => {
  const [controlled, setControlled] = useState(false);

  return (
    <View className="gap-3 bg-background p-4">
      <Radio
        checked={controlled}
        onCheckedChange={setControlled}
      >
        {controlled ? '已选中' : '未选中'}
      </Radio>
      <Button
        size="sm"
        onPress={() => setControlled(v => !v)}
      >
        切换选中状态
      </Button>
    </View>
  );
};

export { RadioControlled };

import { Radio, RadioGroup, Text } from '@skyroc/native-ui';
import { useState } from 'react';
import { View } from 'react-native';

const FRUIT_ITEMS = [
  { label: '未指定（空字符串）', value: '' },
  { label: '苹果', value: 'apple' },
  { label: '橙子', value: 'orange' },
  { label: '香蕉', value: 'banana' }
];

const RadioGroupBasic = () => {
  const [groupValue, setGroupValue] = useState('apple');

  return (
    <View className="gap-3 bg-background p-4">
      <RadioGroup
        value={groupValue}
        onChange={setGroupValue}
      >
        {FRUIT_ITEMS.map(item => (
          <Radio
            key={item.value}
            name={item.value}
          >
            {item.label}
          </Radio>
        ))}
      </RadioGroup>
      <Text className="text-sm text-muted-foreground">当前值：{groupValue || "''"}</Text>
    </View>
  );
};

export { RadioGroupBasic };

import { Radio, RadioGroup } from '@skyroc/native-ui';
import { View } from 'react-native';

const RadioHorizontalGroup = () => {
  return (
    <View className="bg-background p-4">
      <RadioGroup
        defaultValue="a"
        direction="horizontal"
      >
        <Radio name="a">A</Radio>
        <Radio name="b">B</Radio>
        <Radio name="c">C</Radio>
        <Radio name="d">D</Radio>
      </RadioGroup>
    </View>
  );
};

export { RadioHorizontalGroup };

import { Radio, RadioGroup } from '@skyroc/native-ui';
import { View } from 'react-native';

const RadioSquareGroup = () => {
  return (
    <View className="bg-background p-4">
      <RadioGroup
        color="warning"
        defaultValue="x"
        shape="square"
      >
        <Radio name="x">X</Radio>
        <Radio name="y">Y</Radio>
        <Radio name="z">Z</Radio>
      </RadioGroup>
    </View>
  );
};

export { RadioSquareGroup };

import { Radio, RadioGroupCard } from '@skyroc/native-ui';
import { View } from 'react-native';

const STYLE_ITEMS = [
  { description: '使用统一的卡片 slot 样式', label: '选项 A', value: 'a' },
  { description: '单项禁用状态仍然保留', disabled: true, label: '选项 B', value: 'b' }
];

const RadioStyles = () => {
  return (
    <View className="gap-4 bg-background p-4">
      <Radio
        className="rounded-xl bg-primary-50 p-3"
        classNames={{ dot: 'bg-success', indicator: 'border-success', label: 'font-semibold text-primary' }}
        defaultChecked
      >
        自定义单选项样式
      </Radio>
      <RadioGroupCard
        defaultValue="a"
        itemClassNames={{ label: 'text-primary', root: 'border-primary-200 bg-primary-50' }}
        items={STYLE_ITEMS}
      />
    </View>
  );
};

export { RadioStyles };

import Feather from '@expo/vector-icons/Feather';
import { Radio, RadioCard, Text } from '@skyroc/native-ui';
import { View } from 'react-native';

const RadioCustomContent = () => {
  return (
    <View className="gap-4 bg-background p-4">
      <Radio defaultChecked>
        <View className="flex-row items-center gap-2">
          <Text className="font-medium text-foreground">自定义标签</Text>
          <Text className="rounded-full bg-primary/10 px-2 py-0.5 text-xs text-primary">推荐</Text>
        </View>
      </Radio>
      <RadioCard
        defaultChecked
        description={<Text className="text-xs text-success">可用状态</Text>}
        icon={
          <Feather
            color="var(--primary)"
            name="zap"
            size={20}
          />
        }
        label={<Text className="font-semibold text-primary">自定义卡片内容</Text>}
      />
    </View>
  );
};

export { RadioCustomContent };

import Feather from '@expo/vector-icons/Feather';
import { RadioCard } from '@skyroc/native-ui';
import { View } from 'react-native';

const RadioCardBasic = () => {
  return (
    <View className="gap-3 bg-background p-4">
      <RadioCard
        color="primary"
        defaultChecked
        description="稳定且速度快"
        icon={
          <Feather
            color="var(--primary)"
            name="wifi"
            size={20}
          />
        }
        label="无线网络"
      />
      <RadioCard
        color="warning"
        description="使用移动数据"
        icon={
          <Feather
            color="var(--success)"
            name="smartphone"
            size={20}
          />
        }
        label="蜂窝网络"
        radioPosition="right"
        shape="square"
      />
      <RadioCard
        color="success"
        description="设备连接不可用"
        disabled
        icon={
          <Feather
            color="var(--muted-foreground)"
            name="bluetooth"
            size={20}
          />
        }
        label="蓝牙"
      />
    </View>
  );
};

export { RadioCardBasic };

import Feather from '@expo/vector-icons/Feather';
import { RadioGroupCard, Text } from '@skyroc/native-ui';
import { useState } from 'react';
import { View } from 'react-native';

const CARD_ITEMS = [
  {
    description: '稳定且速度快',
    icon: (
      <Feather
        color="var(--primary)"
        name="wifi"
        size={20}
      />
    ),
    label: '无线网络',
    value: 'wifi'
  },
  {
    description: '使用移动数据',
    icon: (
      <Feather
        color="var(--success)"
        name="smartphone"
        size={20}
      />
    ),
    label: '蜂窝网络',
    value: 'cellular'
  },
  {
    description: '直连附近设备',
    icon: (
      <Feather
        color="var(--info)"
        name="bluetooth"
        size={20}
      />
    ),
    label: '蓝牙',
    value: 'bluetooth'
  }
];

const RadioCardGroup = () => {
  const [cardGroupValue, setCardGroupValue] = useState('wifi');

  return (
    <View className="gap-3 bg-background p-4">
      <RadioGroupCard
        color="info"
        items={CARD_ITEMS}
        radioPosition="right"
        value={cardGroupValue}
        onChange={setCardGroupValue}
      />
      <Text className="text-sm text-muted-foreground">当前值：{cardGroupValue}</Text>
    </View>
  );
};

export { RadioCardGroup };