#Checkbox 复选框

import { Checkbox, Space } from '@ifhover/leaf-ui';

export function CheckboxBasic() {
  return (
    <Space wrap>
      <Checkbox defaultChecked>接收项目动态</Checkbox>
      <Checkbox>接收每周摘要</Checkbox>
      <Checkbox disabled>暂不可用</Checkbox>
      <Checkbox disabled defaultChecked>
        已锁定
      </Checkbox>
    </Space>
  );
}

import { Checkbox, Flex, Space, Text } from '@ifhover/leaf-ui';

import { useState } from 'react';

const options = ['设计更新', '产品动态', '每周摘要'];

export function CheckboxCheckAll() {
  const [selected, setSelected] = useState<string[]>(['设计更新']);
  const allChecked = selected.length === options.length;
  return (
    <Space direction="vertical" align="stretch">
      <Checkbox
        checked={allChecked}
        indeterminate={selected.length > 0 && !allChecked}
        onChange={(event) => setSelected(event.target.checked ? [...options] : [])}
      >
        订阅全部
      </Checkbox>
      <Flex gap="md" align="center" wrap justify="center">
        {options.map((option) => (
          <Checkbox
            key={option}
            checked={selected.includes(option)}
            onChange={(event) =>
              setSelected(
                event.target.checked
                  ? [...selected, option]
                  : selected.filter((item) => item !== option),
              )
            }
          >
            {option}
          </Checkbox>
        ))}
      </Flex>
      <Text tone="muted">已选择 {selected.length} 项</Text>
    </Space>
  );
}

import { CheckboxGroup } from '@ifhover/leaf-ui';

export function ExtensionDemo() {
  return (
    <CheckboxGroup
      legend="选择 1–2 个兴趣"
      options={['设计', '开发', '摄影']}
      defaultValue={['设计']}
      minCount={1}
      maxCount={2}
    />
  );
}

import { Checkbox, CheckboxGroup, Space } from '@ifhover/leaf-ui';

import { HardDrive, Mail, MessageSquare } from 'lucide-react';

export function CheckboxCards() {
  
  return (
    <Space direction="vertical" align="stretch">
      <CheckboxGroup
        variant="card"
        legend={'连接服务'}
        defaultValue={['mail']}
        options={[
          {
            value: 'mail',
            label: '邮件',
            description: '读取与整理邮件',
            icon: <Mail />,
          },
          {
            value: 'drive',
            label: '云端文件',
            description: '查找与整理文件',
            icon: <HardDrive />,
          },
          {
            value: 'chat',
            label: '团队沟通',
            description: '当前不可用',
            icon: <MessageSquare />,
            disabled: true,
          },
        ]}
      />
      <Checkbox
        variant="card"
        indeterminate
        description={'部分服务已启用'}
      >
        {'全部服务'}
      </Checkbox>
    </Space>
  );
}

import { CheckboxGroup, Tag } from '@ifhover/leaf-ui';

export function CheckboxList() {
  
  return (
    <CheckboxGroup
      variant="list"
      legend={'邮件权限'}
      defaultValue={['read']}
      options={[
        { value: 'read', label: '读取邮件', description: 'mail.readonly' },
        {
          value: 'send',
          label: '发送邮件',
          description: 'mail.send',
          extra: (
            <Tag color="warning" size="sm">
              {'需要审批'}
            </Tag>
          ),
        },
        {
          value: 'delete',
          label: '删除邮件',
          description: 'mail.modify',
          extra: <Tag size="sm">{'策略限制'}</Tag>,
          disabled: true,
        },
      ]}
    />
  );
}