Checkbox

'use client'

import { Checkbox } from '@saas-ui/react'

export const CheckboxBasic = () => {
  return <Checkbox>Accept terms and conditions</Checkbox>
}

'use client'

import { For, HStack, Stack, Text } from '@chakra-ui/react'
import { Checkbox } from '@saas-ui/react'

export const CheckboxWithVariants = () => {
  return (
    <HStack align="flex-start">
      <For each={['outline', 'subtle', 'solid']}>
        {(variant) => (
          <Stack align="flex-start" flex="1" key={variant}>
            <Text>{variant}</Text>
            <Checkbox defaultChecked variant={variant}>
              Checkbox
            </Checkbox>
          </Stack>
        )}
      </For>
    </HStack>
  )
}

'use client'

import { useState } from 'react'

import { Checkbox } from '@saas-ui/react'

export const CheckboxControlled = () => {
  const [checked, setChecked] = useState(false)
  return (
    <Checkbox
      checked={checked}
      onCheckedChange={(e) => setChecked(!!e.checked)}
    >
      Accept terms and conditions
    </Checkbox>
  )
}

'use client'

import { For, Stack, Text } from '@chakra-ui/react'
import { Checkbox } from '@saas-ui/react'

import { colorPalettes } from '../lib/color-palettes'

export const CheckboxWithColors = () => {
  return (
    <Stack gap="2" align="flex-start">
      {colorPalettes.map((colorPalette) => (
        <Stack
          align="center"
          key={colorPalette}
          direction="row"
          gap="10"
          width="full"
        >
          <Text minW="8ch">{colorPalette}</Text>
          <For each={['outline', 'subtle', 'solid']}>
            {(variant) => (
              <Stack key={variant} mb="4">
                <Checkbox variant={variant} colorPalette={colorPalette}>
                  Checkbox
                </Checkbox>
                <Checkbox
                  defaultChecked
                  variant={variant}
                  colorPalette={colorPalette}
                >
                  Checkbox
                </Checkbox>
              </Stack>
            )}
          </For>
        </Stack>
      ))}
    </Stack>
  )
}

'use client'

import { For, Stack } from '@chakra-ui/react'
import { Checkbox } from '@saas-ui/react'

export const CheckboxWithSizes = () => {
  return (
    <Stack align="flex-start" flex="1" gap="4">
      <For each={['sm', 'md', 'lg']}>
        {(size) => (
          <Checkbox defaultChecked size={size} key={size}>
            Checkbox
          </Checkbox>
        )}
      </For>
    </Stack>
  )
}

'use client'

import { Stack } from '@chakra-ui/react'
import { Checkbox } from '@saas-ui/react'

export const CheckboxWithStates = () => {
  return (
    <Stack>
      <Checkbox disabled>Disabled</Checkbox>
      <Checkbox defaultChecked disabled>
        Disabled
      </Checkbox>
      <Checkbox readOnly>Readonly</Checkbox>
      <Checkbox invalid>Invalid</Checkbox>
    </Stack>
  )
}

'use client'

import { CheckboxGroup, Fieldset } from '@chakra-ui/react'
import { Checkbox } from '@saas-ui/react'

export const CheckboxWithGroup = () => {
  return (
    <Fieldset.Root>
      <CheckboxGroup defaultValue={['react']} name="framework">
        <Fieldset.Legend fontSize="sm" mb="2">
          Select framework
        </Fieldset.Legend>
        <Fieldset.Content>
          <Checkbox value="react">React</Checkbox>
          <Checkbox value="svelte">Svelte</Checkbox>
          <Checkbox value="vue">Vue</Checkbox>
          <Checkbox value="angular">Angular</Checkbox>
        </Fieldset.Content>
      </CheckboxGroup>
    </Fieldset.Root>
  )
}

'use client'

import { Checkbox } from '@saas-ui/react'
import { HiOutlinePlus } from 'react-icons/hi'

export const CheckboxWithCustomIcon = () => {
  return (
    <Checkbox defaultChecked icon={<HiOutlinePlus />}>
      With Custom Icon
    </Checkbox>
  )
}

'use client'

import { useState } from 'react'

import { Stack } from '@chakra-ui/react'
import { Checkbox } from '@saas-ui/react'

const initialValues = [
  { label: 'Monday', checked: false, value: 'monday' },
  { label: 'Tuesday', checked: false, value: 'tuesday' },
  { label: 'Wednesday', checked: false, value: 'wednesday' },
  { label: 'Thursday', checked: false, value: 'thursday' },
]

export const CheckboxIndeterminate = () => {
  const [values, setValues] = useState(initialValues)

  const allChecked = values.every((value) => value.checked)
  const indeterminate = values.some((value) => value.checked) && !allChecked

  const items = values.map((item, index) => (
    <Checkbox
      ms="6"
      key={item.value}
      checked={item.checked}
      onCheckedChange={(e) => {
        setValues((current) => {
          const newValues = [...current]
          newValues[index] = { ...newValues[index], checked: !!e.checked }
          return newValues
        })
      }}
    >
      {item.label}
    </Checkbox>
  ))

  return (
    <Stack align="flex-start">
      <Checkbox
        checked={indeterminate ? 'indeterminate' : allChecked}
        onCheckedChange={(e) => {
          setValues((current) =>
            current.map((value) => ({ ...value, checked: !!e.checked })),
          )
        }}
      >
        Weekdays
      </Checkbox>
      {items}
    </Stack>
  )
}

'use client'

import { Box } from '@chakra-ui/react'
import { Checkbox } from '@saas-ui/react'

export const CheckboxWithDescription = () => {
  return (
    <Checkbox gap="4" alignItems="flex-start">
      <Box lineHeight="1">I agree to the terms and conditions</Box>
      <Box fontWeight="normal" color="fg.muted" mt="1">
        By clicking this, you agree to our Terms and Privacy Policy.
      </Box>
    </Checkbox>
  )
}

'use client'

import { Link } from '@chakra-ui/react'
import { Checkbox } from '@saas-ui/react'

export const CheckboxWithLink = () => {
  return (
    <Checkbox>
      I agree to the{' '}
      <Link colorPalette="teal" href="https://google.com">
        terms and conditions
      </Link>
    </Checkbox>
  )
}