refactor: group component compose pattern

docs/components/example/check-select-box-preview.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { Stack } from "@seed-design/react";
+import { CheckSelectBox, CheckSelectBoxGroup } from "seed-design/ui/select-box";
+
+export default function CheckSelectBoxPreview() {
+  return (
+    <CheckSelectBoxGroup>
+      <Stack gap="s3">
+        <CheckSelectBox label="Apple" defaultChecked />
+        <CheckSelectBox
+          label="Melon"
+          description="Elit cupidatat dolore fugiat enim veniam culpa."
+        />
+        <CheckSelectBox label="Mango" />
+      </Stack>
+    </CheckSelectBoxGroup>
+  );
+}

docs/components/example/check-select-box-react-hook-form.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { Column, Columns, Stack } from "@seed-design/react";
+import { useCallback, type FormEvent } from "react";
+import { useController, useForm } from "react-hook-form";
+import { ActionButton } from "seed-design/ui/action-button";
+import { CheckSelectBox, CheckSelectBoxGroup } from "seed-design/ui/select-box";
+
+const POSSIBLE_FRUIT_VALUES = ["apple", "melon", "mango"] as const;
+
+type FormValues = Record<(typeof POSSIBLE_FRUIT_VALUES)[number], boolean>;
+
+export default function CheckSelectBoxReactHookForm() {
+  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 (
+    <form onSubmit={handleSubmit(onValid)} onReset={onReset}>
+      <Stack gap="s3" width="384px">
+        <CheckSelectBoxGroup>
+          <Stack gap="s3">
+            {POSSIBLE_FRUIT_VALUES.map((name) => {
+              const {
+                field: { value, ...restProps },
+                fieldState: { invalid },
+              } = useController({ name, control });
+
+              return (
+                <CheckSelectBox
+                  key={name}
+                  label={name}
+                  checked={value}
+                  inputProps={restProps}
+                  invalid={invalid}
+                />
+              );
+            })}
+          </Stack>
+        </CheckSelectBoxGroup>
+        <Columns gap="s2">
+          <Column>
+            <ActionButton type="submit">제출</ActionButton>
+          </Column>
+          <Column width="content">
+            <ActionButton
+              type="button"
+              variant="neutralWeak"
+              onClick={() => setValue("mango", true)}
+            >
+              mango 선택
+            </ActionButton>
+          </Column>
+          <Column width="content">
+            <ActionButton type="reset" variant="neutralWeak">
+              초기화
+            </ActionButton>
+          </Column>
+        </Columns>
+      </Stack>
+    </form>
+  );
+}

docs/components/example/radio-select-box-preview.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { Stack } from "@seed-design/react";
+import { RadioSelectBoxItem, RadioSelectBoxRoot } from "seed-design/ui/select-box";
+
+export default function RadioSelectBoxPreview() {
+  return (
+    <RadioSelectBoxRoot defaultValue="apple" aria-label="Fruit">
+      <Stack gap="s3">
+        <RadioSelectBoxItem value="apple" label="Apple" />
+        <RadioSelectBoxItem
+          value="melon"
+          label="Melon"
+          description="Elit cupidatat dolore fugiat enim veniam culpa."
+        />
+        <RadioSelectBoxItem value="mango" label="Mango" />
+      </Stack>
+    </RadioSelectBoxRoot>
+  );
+}

docs/components/example/radio-select-box-react-hook-form.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { Column, Columns, Stack } from "@seed-design/react";
+import { useCallback, type FormEvent } from "react";
+import { useController, useForm } from "react-hook-form";
+import { ActionButton } from "seed-design/ui/action-button";
+import { RadioSelectBoxItem, RadioSelectBoxRoot } from "seed-design/ui/select-box";
+
+const POSSIBLE_FRUIT_VALUES = ["apple", "melon", "mango"] as const;
+
+interface FormValues {
+  fruit: (typeof POSSIBLE_FRUIT_VALUES)[number];
+}
+
+export default function RadioSelectBoxReactHookForm() {
+  const { handleSubmit, reset, setValue, control } = useForm<FormValues>({
+    defaultValues: {
+      fruit: "melon",
+    },
+  });
+  const { field } = useController({ name: "fruit", control });
+
+  const onValid = useCallback((data: FormValues) => {
+    window.alert(JSON.stringify(data, null, 2));
+  }, []);
+
+  const onReset = useCallback(
+    (event: FormEvent) => {
+      event.preventDefault();
+      reset();
+    },
+    [reset],
+  );
+
+  return (
+    <form onSubmit={handleSubmit(onValid)} onReset={onReset}>
+      <Stack gap="s3" width="384px">
+        <RadioSelectBoxRoot aria-label="Fruit" {...field}>
+          <Stack gap="s3">
+            {POSSIBLE_FRUIT_VALUES.map((value) => (
+              <RadioSelectBoxItem key={value} value={value} label={value} />
+            ))}
+          </Stack>
+        </RadioSelectBoxRoot>
+        <Columns gap="s2">
+          <Column>
+            <ActionButton type="submit">제출</ActionButton>
+          </Column>
+          <Column width="content">
+            <ActionButton
+              type="button"
+              variant="neutralWeak"
+              onClick={() => setValue("fruit", "mango")}
+            >
+              mango 선택
+            </ActionButton>
+          </Column>
+          <Column width="content">
+            <ActionButton type="reset" variant="neutralWeak">
+              초기화
+            </ActionButton>
+          </Column>
+        </Columns>
+      </Stack>
+    </form>
+  );
+}

docs/content/docs/react/components/control-chip.mdx

@@ -8,9 +8,23 @@ title: Control Chip
 
 <Installation name="control-chip" />
 
-## Props (Toggle)
+## Props
 
-<ReactTypeTable path="./registry/ui/control-chip.tsx" name="ControlChipToggleProps" />
+### ControlChip.Button
+
+<ReactTypeTable path="./registry/ui/control-chip.tsx" name="ButtonControlChipProps" />
+
+### ControlChip.Toggle
+
+<ReactTypeTable path="./registry/ui/control-chip.tsx" name="ToggleControlChipProps" />
+
+### ControlChip.RadioRoot
+
+<ReactTypeTable path="./registry/ui/control-chip.tsx" name="RadioControlChipRootProps" />
+
+### ControlChip.RadioItem
+
+<ReactTypeTable path="./registry/ui/control-chip.tsx" name="RadioControlChipItemProps" />
 
 ## 예제
 

docs/content/docs/react/components/select-box/check-select-box.mdx

@@ -0,0 +1,24 @@
+---
+title: Check Select Box
+---
+
+<ComponentExample name="check-select-box-preview" />
+
+## 설치
+
+<Installation name="select-box" />
+
+## Props
+
+### `CheckSelectBox`
+
+<ReactTypeTable
+  path="./registry/ui/select-box.tsx"
+  name="CheckSelectBoxProps"
+/>
+
+## 예제
+
+### React Hook Form
+
+<ComponentExample name="check-select-box-react-hook-form" />