@idbrnd/design-system 1.5.4 → 1.6.0

package/README.md

@@ -301,10 +301,14 @@ function CheckBoxExample() {
 
   return (
     <>
-      <CheckBox checked={checked} onChange={(value) => setChecked(value)} />
+      <CheckBox checked={checked} onChange={(value) => setChecked(value)}>
+        알림 받기
+      </CheckBox>
 
       {/* indeterminate: checked와 함께 사용 */}
-      <CheckBox checked={true} indeterminate onChange={() => {}} />
+      <CheckBox checked={true} indeterminate onChange={() => {}}>
+        부분 선택
+      </CheckBox>
 
       {/* variant / size / density */}
       <CheckBox
@@ -313,9 +317,13 @@ function CheckBoxExample() {
         density="compact"
         checked
         onChange={() => {}}
-      />
+      >
+        소형 옵션
+      </CheckBox>
 
-      <CheckBox checked disabled />
+      <CheckBox checked disabled>
+        비활성 옵션
+      </CheckBox>
     </>
   );
 }
@@ -326,6 +334,7 @@ function CheckBoxExample() {
 | `checked`       | `boolean`                    | —           | **(필수)** 체크 상태                                |
 | `onChange`      | `(checked: boolean) => void` | —           | 변경 핸들러                                         |
 | `indeterminate` | `boolean`                    | `false`     | `checked={true}`와 함께 사용 시 대시(–) 아이콘 표시 |
+| `children`      | `ReactNode`                  | —           | 체크박스 우측에 렌더링할 라벨/콘텐츠               |
 | `variant`       | `"primary"` \| `"assistive"` | `"primary"` | 색상 변형                                           |
 | `size`          | `"medium"` \| `"small"`      | `"medium"`  | 크기                                                |
 | `density`       | `"default"` \| `"compact"`   | `"default"` | wrapper 밀도                                        |
@@ -336,6 +345,7 @@ function CheckBoxExample() {
 
 - `indeterminate={true}`는 `checked={true}`일 때만 대시 아이콘을 표시합니다.
 - `density="compact"`은 wrapper 크기만 줄이며, 아이콘은 `size` 기준으로 그대로 표시됩니다.
+- `children`을 전달하면 라벨 영역까지 함께 클릭되어 체크/해제됩니다.
 
 ### Radio
 
@@ -351,18 +361,15 @@ function RadioGroupExample() {
   return (
     <>
       {["A", "B", "C"].map((v) => (
-        <label
+        <Radio
           key={v}
-          style={{ display: "flex", alignItems: "center", gap: 6 }}
+          name="group"
+          value={v}
+          checked={selected === v}
+          onChange={(isChecked) => isChecked && setSelected(v)}
         >
-          <Radio
-            name="group"
-            value={v}
-            checked={selected === v}
-            onChange={(isChecked) => isChecked && setSelected(v)}
-          />
           Option {v}
-        </label>
+        </Radio>
       ))}
     </>
   );
@@ -375,6 +382,7 @@ function RadioGroupExample() {
 | `onChange`    | `(checked: boolean) => void` | —           | 변경 핸들러          |
 | `name`        | `string`                     | —           | input name 속성      |
 | `value`       | `string`                     | —           | input value 속성     |
+| `children`    | `ReactNode`                  | —           | 라디오 우측에 렌더링할 라벨/콘텐츠 |
 | `variant`     | `"primary"` \| `"assistive"` | `"primary"` | 색상 변형            |
 | `size`        | `"medium"` \| `"small"`      | `"medium"`  | 크기                 |
 | `density`     | `"default"` \| `"compact"`   | `"default"` | wrapper 밀도         |
@@ -385,6 +393,7 @@ function RadioGroupExample() {
 
 - `name`이 같아도 자동으로 하나만 선택되지 않습니다. `checked={selected === value}` 비교로 직접 제어해야 합니다.
 - `onChange`는 클릭 시 `true`가 전달됩니다. `isChecked && setSelected(v)` 패턴으로 true일 때만 state를 변경합니다.
+- `children`을 전달하면 라벨 영역까지 함께 클릭되어 선택/해제됩니다.
 
 ### ToggleSwitch
 

package/dist/components/Control/CheckBox/CheckBox.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties, type InputHTMLAttributes } from "react";
+import { type CSSProperties, type InputHTMLAttributes, type ReactNode } from "react";
 export type CheckBoxVariant = "primary" | "assistive";
 export type CheckBoxSize = "medium" | "small";
 export type CheckBoxDensity = "default" | "compact";
@@ -9,7 +9,8 @@ export interface CheckBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement
     customStyle?: CSSProperties;
     checked?: boolean;
     indeterminate?: boolean;
+    children?: ReactNode;
     onChange?: (checked: boolean) => void;
 }
-declare function CheckBox({ variant, size, density, disabled, customStyle, className, checked, indeterminate, onChange, ...rest }: CheckBoxProps): import("react/jsx-runtime").JSX.Element;
+declare function CheckBox({ variant, size, density, disabled, customStyle, className, checked, indeterminate, children, onChange, ...rest }: CheckBoxProps): import("react/jsx-runtime").JSX.Element;
 export default CheckBox;

package/dist/components/Control/Radio/Radio.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties, type InputHTMLAttributes } from "react";
+import { type CSSProperties, type InputHTMLAttributes, type ReactNode } from "react";
 export type RadioVariant = "primary" | "assistive";
 export type RadioSize = "medium" | "small";
 export type RadioDensity = "default" | "compact";
@@ -7,7 +7,8 @@ export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     size?: RadioSize;
     density?: RadioDensity;
     customStyle?: CSSProperties;
+    children?: ReactNode;
     onChange?: (checked: boolean) => void;
 }
-declare function Radio({ variant, size, density, disabled, checked, customStyle, className, onChange, ...rest }: RadioProps): import("react/jsx-runtime").JSX.Element;
+declare function Radio({ variant, size, density, disabled, checked, customStyle, className, children, onChange, ...rest }: RadioProps): import("react/jsx-runtime").JSX.Element;
 export default Radio;