Checkbox

import { Checkbox } from "seed-design/ui/checkbox";

export default function CheckboxPreview() {
  return <Checkbox label="Hello World" defaultChecked />;
}

import { HStack, VStack } from "@seed-design/react";
import { Checkbox } from "seed-design/ui/checkbox";

export default function CheckboxSize() {
  return (
    <HStack gap="x8">
      <VStack gap="x2">
        <Checkbox label="Medium (default)" size="medium" defaultChecked />
        <Checkbox label="Large" size="large" defaultChecked />
      </VStack>
      <VStack gap="x2">
        <Checkbox label="Medium (default)" size="medium" variant="ghost" defaultChecked />
        <Checkbox label="Large" size="large" variant="ghost" defaultChecked />
      </VStack>
    </HStack>
  );
}

import { VStack } from "@seed-design/react";
import { Checkbox } from "seed-design/ui/checkbox";

export default function CheckboxBrand() {
  return (
    <VStack gap="x2">
      <Checkbox label="Square (default)" variant="square" tone="brand" defaultChecked />
      <Checkbox label="Ghost" variant="ghost" tone="brand" defaultChecked />
    </VStack>
  );
}

import { VStack } from "@seed-design/react";
import { Checkbox } from "seed-design/ui/checkbox";

export default function CheckboxNeutral() {
  return (
    <VStack gap="x2">
      <Checkbox label="Square (default)" variant="square" tone="neutral" defaultChecked />
      <Checkbox label="Ghost" variant="ghost" tone="neutral" defaultChecked />
    </VStack>
  );
}

import { Checkbox } from "seed-design/ui/checkbox";

export default function CheckboxIndeterminate() {
  return <Checkbox defaultChecked label="indeterminate" indeterminate />;
}

import { VStack } from "@seed-design/react";
import { Checkbox } from "seed-design/ui/checkbox";

export default function CheckboxWeights() {
  return (
    <VStack gap="x4">
      <Checkbox label="Regular Label Text" weight="regular" />
      <Checkbox label="Bold Label Text" weight="bold" />
    </VStack>
  );
}

import { VStack } from "@seed-design/react";
import { Checkbox } from "seed-design/ui/checkbox";

export default function CheckboxLongLabel() {
  return (
    <VStack gap="x2">
      <Checkbox
        size="medium"
        label="Consequat ut veniam aliqua deserunt occaecat enim occaecat veniam et et cillum nulla officia incididunt incididunt. Sint laboris labore occaecat fugiat culpa voluptate ullamco in elit dolore exercitation nulla."
      />
      <Checkbox
        size="large"
        label="Consequat ut veniam aliqua deserunt occaecat enim occaecat veniam et et cillum nulla officia incididunt incididunt. Sint laboris labore occaecat fugiat culpa voluptate ullamco in elit dolore exercitation nulla."
      />
    </VStack>
  );
}

import { VStack } from "@seed-design/react";
import { Checkbox } from "seed-design/ui/checkbox";

export default function CheckboxDisabled() {
  return (
    <VStack gap="x2">
      <Checkbox defaultChecked label="Disabled Checked, Square" disabled />
      <Checkbox checked={false} label="Disabled without Checked, Square" disabled />
      <Checkbox variant="ghost" defaultChecked label="Disabled Checked, Ghost" disabled />
      <Checkbox variant="ghost" checked={false} label="Disabled without Checked, Ghost" disabled />
    </VStack>
  );
}

import { VStack, Text } from "@seed-design/react";
import { Checkbox } from "seed-design/ui/checkbox";
import { useState } from "react";

export default function CheckboxValueChanges() {
  const [count, setCount] = useState(0);
  const [lastValue, setLastValue] = useState<boolean | null>(null);

  return (
    <VStack gap="x4" align="center">
      <Checkbox
        label="Click me"
        onCheckedChange={(checked) => {
          setCount((prev) => prev + 1);
          setLastValue(checked);
        }}
      />
      <Text>
        onCheckedChange called: {count} times, last value: {`${lastValue ?? "-"}`}
      </Text>
    </VStack>
  );
}

import { HStack, VStack } from "@seed-design/react";
import { useCallback, type FormEvent } from "react";
import { useController, useForm, type Control } from "react-hook-form";
import { ActionButton } from "seed-design/ui/action-button";
import { Checkbox } from "seed-design/ui/checkbox";

const POSSIBLE_FRUIT_VALUES = ["apple", "melon", "mango"] as const;

type FormValues = Record<(typeof POSSIBLE_FRUIT_VALUES)[number], boolean>;

export default function CheckboxReactHookForm() {
  const { handleSubmit, reset, setValue, control } = useForm<FormValues>({
    defaultValues: {
      apple: false,
      melon: true,
      mango: false,
    },
  });

  const onValid = useCallback((data: FormValues) => {
    window.alert(JSON.stringify(data, null, 2));
  }, []);

  const onReset = useCallback(
    (event: FormEvent) => {
      event.preventDefault();
      reset();
    },
    [reset],
  );

  return (
    <VStack gap="x3" as="form" onSubmit={handleSubmit(onValid)} onReset={onReset}>
      <VStack>
        {POSSIBLE_FRUIT_VALUES.map((name) => (
          <CheckboxItem key={name} name={name} control={control} />
        ))}
      </VStack>
      <HStack gap="x2">
        <ActionButton type="reset" variant="neutralWeak">
          초기화
        </ActionButton>
        <ActionButton
          type="button"
          variant="neutralWeak"
          flexGrow={1}
          onClick={() => setValue("mango", true)}
        >
          mango 선택
        </ActionButton>
        <ActionButton type="submit" variant="neutralSolid" flexGrow={1}>
          제출
        </ActionButton>
      </HStack>
    </VStack>
  );
}

interface CheckboxItemProps {
  name: keyof FormValues;
  control: Control<FormValues>;
}

function CheckboxItem({ name, control }: CheckboxItemProps) {
  const {
    field: { value, ...restProps },
    fieldState: { invalid },
  } = useController({ name, control });

  return (
    <Checkbox key={name} label={name} checked={value} inputProps={restProps} invalid={invalid} />
  );
}

import { HStack, Text, VStack } from "@seed-design/react";
import { Checkbox } from "@seed-design/react/primitive";
import { Checkmark } from "seed-design/ui/checkbox";

function CustomCheckbox({ children, ...props }: Checkbox.RootProps) {
  return (
    <VStack asChild gap="x2" align="center">
      <Checkbox.Root {...props}>
        <Checkmark />
        <Checkbox.HiddenInput />
        {children}
      </Checkbox.Root>
    </VStack>
  );
}

export default function CheckboxCheckmark() {
  return (
    <HStack gap="x6">
      <CustomCheckbox>
        <Text textStyle="t7Regular">regular</Text>
      </CustomCheckbox>
      <CustomCheckbox defaultChecked>
        <Text textStyle="t7Medium">medium</Text>
      </CustomCheckbox>
      <CustomCheckbox>
        <Text textStyle="t7Bold">bold</Text>
      </CustomCheckbox>
    </HStack>
  );
}