Checkbox

import { Checkbox } from '@workspace/ui/components/Checkbox'

export function CheckboxDemo() {
    return <Checkbox>Accept terms and conditions</Checkbox>
}

import { Checkbox } from '@workspace/ui/components/Checkbox'

export function CheckboxDemo() {
    return <Checkbox>Accept terms and conditions</Checkbox>
}

import { Checkbox } from '@workspace/ui/components/Checkbox'

export function CheckboxDisabled() {
    return <Checkbox isDisabled>Accept terms and conditions</Checkbox>
}

'use client'

import { Checkbox } from '@workspace/ui/components/Checkbox'
import React from 'react'

export function CheckboxIndeterminate() {
    const [checkedItems, setCheckedItems] = React.useState([false, false, false])

    const allChecked = checkedItems.every(Boolean)
    const isIndeterminate = checkedItems.some(Boolean) && !allChecked

    const handleAllChange = (checked: boolean) => {
        setCheckedItems(checkedItems.map(() => checked))
    }

    const handleItemChange = (index: number, checked: boolean) => {
        const newCheckedItems = [...checkedItems]
        newCheckedItems[index] = checked
        setCheckedItems(newCheckedItems)
    }

    return (
        <div className="grid gap-2">
            <Checkbox isSelected={allChecked} isIndeterminate={isIndeterminate} onChange={handleAllChange}>
                Select all
            </Checkbox>
            <div className="ml-4 grid gap-2">
                <Checkbox isSelected={checkedItems[0]} onChange={checked => handleItemChange(0, checked)}>
                    Item 1
                </Checkbox>
                <Checkbox isSelected={checkedItems[1]} onChange={checked => handleItemChange(1, checked)}>
                    Item 2
                </Checkbox>
                <Checkbox isSelected={checkedItems[2]} onChange={checked => handleItemChange(2, checked)}>
                    Item 3
                </Checkbox>
            </div>
        </div>
    )
}

import { CheckboxGroup, Checkbox } from '@workspace/ui/components/Checkbox'
import { Label } from '@workspace/ui/components/Field'

export function CheckboxGroupDemo() {
    return (
        <CheckboxGroup>
            <Label>Choose your favorite fruits</Label>
            <div className="grid grid-cols-3 gap-4">
                <Checkbox value="apple">Apple</Checkbox>
                <Checkbox value="banana">Banana</Checkbox>
                <Checkbox value="orange">Orange</Checkbox>
            </div>
        </CheckboxGroup>
    )
}

'use client'

import { toast } from '@workspace/ui/components/Sonner'
import { useForm } from 'react-hook-form'
import { Button } from '@workspace/ui/components/Button'
import { BsCheckboxGroup, Checkbox } from '@workspace/ui/components/Checkbox'
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@workspace/ui/components/Form'
import { TextArea } from '@workspace/ui/components/Textfield'

interface FormValues {
    interest: Array<string>
    bio: string
    acceptTerm: boolean
}

export function CheckboxForm() {
    const form = useForm<FormValues>({
        defaultValues: {
            interest: [],
            bio: '',
            acceptTerm: false,
        },
    })

    function onSubmit(data: FormValues) {
        toast.neutral({
            title: 'You submitted the following values',
            description: (
                <pre>
                    <code>{JSON.stringify(data, null, 2)}</code>
                </pre>
            ),
        })
    }

    return (
        <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-5">
                <FormField
                    control={form.control}
                    name="interest"
                    render={({ field }) => (
                        <FormItem>
                            <FormLabel>Select your interests</FormLabel>
                            <FormControl>
                                <BsCheckboxGroup
                                    {...field}
                                    options={[
                                        { id: 'reading', name: 'Reading' },
                                        { id: 'writing', name: 'Writing' },
                                        { id: 'coding', name: 'Coding' },
                                    ]}
                                />
                            </FormControl>
                            <FormMessage />
                        </FormItem>
                    )}
                />
                <FormField
                    control={form.control}
                    name="bio"
                    render={({ field }) => (
                        <FormItem>
                            <FormLabel>Bio</FormLabel>
                            <FormControl>
                                <TextArea {...field} placeholder="Type your bio here..." />
                            </FormControl>
                            <FormMessage />
                        </FormItem>
                    )}
                />
                <FormField
                    control={form.control}
                    name="acceptTerm"
                    rules={{
                        validate: value => value || 'Please accept the terms and conditions',
                    }}
                    render={({ field }) => (
                        <FormItem>
                            <FormControl>
                                <Checkbox isSelected={field.value} onChange={field.onChange}>
                                    I accept the terms and conditions
                                </Checkbox>
                            </FormControl>
                            <FormMessage />
                        </FormItem>
                    )}
                />
                <Button type="submit">Submit</Button>
            </form>
        </Form>
    )
}