Checkbox

import { Checkbox, CheckboxGroup, For } from '@cerberus/react'

export function CheckboxPreview() {
  const items = [
    {
      id: 'terms',
      label: 'I agree to the terms and conditions',

      required: true,
    },
    {
      id: 'legal',
      label: 'I would like to receive marketing emails',
    },
  ]

  return (
    <CheckboxGroup name="user_acceptance">
      <For each={items}>
        {(item) => (
          <Checkbox
            key={item.id}
            ids={{ control: item.id }}
            required={Boolean(item.required)}
          >
            {item.label}
          </Checkbox>
        )}
      </For>

      <Checkbox ids={{ control: 'mixed' }} checked="indeterminate">
        The indeterminate state
      </Checkbox>
    </CheckboxGroup>
  )
}

'use client'

import { Checkbox, CheckboxGroup } from '@cerberus/react'
import { Box } from 'styled-system/jsx'
import { useState } from '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 function IndeterminatePreview() {
  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
      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 (
    <Box w="1/2">
      <CheckboxGroup name="days">
        <Checkbox
          checked={indeterminate ? 'indeterminate' : allChecked}
          onCheckedChange={(e) => {
            setValues((current) =>
              current.map((value) => ({ ...value, checked: !!e.checked })),
            )
          }}
        >
          Weekdays
        </Checkbox>

        {items}
      </CheckboxGroup>
    </Box>
  )
}

import { Checkbox, CheckboxGroup } from '@cerberus/react'

function SizeDemo() {
  return (
    <CheckboxGroup name="size">
      <Checkbox ids={{ control: 'small' }} size="sm">
        Small
      </Checkbox>
      <Checkbox ids={{ control: 'medium' }} size="md">
        Medium
      </Checkbox>
    </CheckboxGroup>
  )
}

import { CheckboxParts } from '@cerberus/react'

function CustomCheckbox() {
  return (
    <Box w="1/2">
      <CheckboxParts.Root>
        <CheckboxParts.Label>Custom Checkbox</CheckboxParts.Label>
        <CheckboxParts.Control
          css={{
            bgColor: 'black',
            border: '4px solid',
            borderColor: 'danger.border.initial',
            h: 8,
            rounded: 'none',
            transform: 'skewX(-10deg)',
            w: 8,
            _checked: {
              bgColor: 'info.bg.initial',
            },
          }}
        >
          <CheckboxParts.Indicator>
            <ArrowDownRight />
          </CheckboxParts.Indicator>
        </CheckboxParts.Control>
        <CheckboxParts.HiddenInput />
      </CheckboxParts.Root>
    </Box>
  )
}