@reitwagen/design-components 0.4.0 → 0.6.0

package/dist/components/Input/Input.stories.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Error = exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Input_1 = require("./Input");
+const meta = {
+    title: "Components/Input",
+    component: Input_1.Input,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: `
+Input은 한 줄의 텍스트 값을 설정하는데 사용됩니다.
+
+## <b>Input guide</b>
+
+입력 필드는 텍스트의 길이를 고려하여 적절한 크기로 제공하며, 플레이스홀더를 레이블이나 도움말의 대체 수단으로 사용하지 않도록 합니다.
+`,
+            },
+        },
+    },
+    argTypes: {
+        variant: {
+            control: { type: "radio" },
+            options: ["default"],
+        },
+        disabled: {
+            control: { type: "boolean" },
+            options: ["true", "false"],
+        },
+    },
+};
+exports.default = meta;
+exports.Default = {
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                story: `
+
+`,
+            },
+        },
+    },
+    render: (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:flex ui:gap-2", children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { ...props }), props.children] })),
+    args: {
+        placeholder: "placeholder",
+        variant: "default",
+    },
+    argTypes: {
+        disabled: {
+            control: { type: "boolean" },
+            options: ["true", "false"],
+        },
+    },
+};
+exports.Error = {
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                story: `
+
+`,
+            },
+        },
+    },
+    render: (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:flex ui:gap-2", children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { ...props, variant: "error" }), props.children] })),
+    args: {
+        placeholder: "placeholder",
+        variant: "error",
+    },
+    argTypes: {
+        disabled: {
+            control: { type: "boolean" },
+            options: ["true", "false"],
+        },
+    },
+};

package/dist/components/Input/Input.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const inputVariants: (props?: ({
+    variant?: "default" | "error" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=Input.styles.d.ts.map

package/dist/components/Input/Input.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa;;;8EAmBzB,CAAC"}

package/dist/components/Input/Input.styles.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inputVariants = void 0;
+const class_variance_authority_1 = require("class-variance-authority");
+exports.inputVariants = (0, class_variance_authority_1.cva)("ui:h-[50px] ui:bg-white ui:px-4 ui:rounded-[16px] ui:w-full ui:border ui:text-body4 ui:transition-colors ui:outline-none", {
+    variants: {
+        variant: {
+            default: "ui:border-gray-100 ui:text-gray-800 ui:placeholder:text-body4 ui:placeholder:text-gray-500 ui:focus:bg-gray-50 ui:focus:border-gray-200",
+            error: "ui:border-red-200 ui:bg-red-50",
+        },
+        disabled: {
+            true: "ui:cursor-not-allowed ui:bg-gray-50 ui:border-gray-100 ui:text-gray-500 ui:placeholder:text-300",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        disabled: false,
+    },
+});

package/dist/components/Input/index.d.ts

@@ -0,0 +1,2 @@
+export { Input } from "./Input";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/Input/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+var Input_1 = require("./Input");
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });

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

@@ -9,25 +9,25 @@ export type RadioProps = ComponentPropsWithRef<"input"> & ChildrenProps & Varian
     onCheckedChange?: (checked: boolean) => void;
 };
 /**
- * `Radio`: 그룹 내 단일 선택만 가능한 요소로, 상호 배타적 옵션을 나타냅니다.
+ * `Radio`: 그룹 내 단일 선택만 가능한 요소로, 상호 배타적 옵션을 나타냅니다. 그룹과 함께 사용하려면, `RadioGroup`을 사용하세요.
  * @see [RDS Storybook: Radio](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-radio--docs)
+ * @see [RDS Storybook: RadioGroup](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-radiogroup--docs)
  * @example
  * ```tsx
- * const [selected, setSelected] = useState(false)
+ * const [checked, setChecked] = useState(false)
  *
  * // Controlled
  * <Radio
- *   checked={selected}
- *   onCheckedChange={setSelected}
+ *   checked={checked}
+ *   onCheckedChange={() => setChecked(!checked)}
  * >
  *   Option
  * </Radio>
- *
  * // Uncontrolled
  * <Radio defaultChecked>Option</Radio>
  * ```
  */
-export declare function Radio({ id: idProp, checked: controlledChecked, defaultChecked, disabled, className, onCheckedChange, children, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;
+export declare function Radio({ id: idProp, checked: controlledChecked, defaultChecked, disabled, className, onCheckedChange, children, value, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Radio {
     var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAmB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAoB,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEjE,MAAM,MAAM,UAAU,GAAG,qBAAqB,CAAC,OAAO,CAAC,GACrD,aAAa,GACb,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IACnC;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEJ;;;;;;;;;;;;;;;;;;GAkBG;AAEH,wBAAgB,KAAK,CAAC,EACpB,EAAE,EAAE,MAAM,EACV,OAAO,EAAE,iBAAiB,EAC1B,cAAc,EACd,QAAQ,EACR,SAAS,EACT,eAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,UAAU,2CAwDZ;yBAjEe,KAAK"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAmB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAoB,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAGjE,MAAM,MAAM,UAAU,GAAG,qBAAqB,CAAC,OAAO,CAAC,GACrD,aAAa,GACb,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IACnC;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEJ;;;;;;;;;;;;;;;;;;GAkBG;AAEH,wBAAgB,KAAK,CAAC,EACpB,EAAE,EAAE,MAAM,EACV,OAAO,EAAE,iBAAiB,EAC1B,cAAc,EACd,QAAQ,EACR,SAAS,EACT,eAAe,EACf,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,UAAU,2CA8EZ;yBAxFe,KAAK"}

package/dist/components/Radio/Radio.js

@@ -6,39 +6,57 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const style_1 = require("../../utils/style");
 const Radio_styles_1 = require("./Radio.styles");
+const RadioGroup_1 = require("../RadioGroup/RadioGroup");
 /**
- * `Radio`: 그룹 내 단일 선택만 가능한 요소로, 상호 배타적 옵션을 나타냅니다.
+ * `Radio`: 그룹 내 단일 선택만 가능한 요소로, 상호 배타적 옵션을 나타냅니다. 그룹과 함께 사용하려면, `RadioGroup`을 사용하세요.
  * @see [RDS Storybook: Radio](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-radio--docs)
+ * @see [RDS Storybook: RadioGroup](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-radiogroup--docs)
  * @example
  * ```tsx
- * const [selected, setSelected] = useState(false)
+ * const [checked, setChecked] = useState(false)
  *
  * // Controlled
  * <Radio
- *   checked={selected}
- *   onCheckedChange={setSelected}
+ *   checked={checked}
+ *   onCheckedChange={() => setChecked(!checked)}
  * >
  *   Option
  * </Radio>
- *
  * // Uncontrolled
  * <Radio defaultChecked>Option</Radio>
  * ```
  */
-function Radio({ id: idProp, checked: controlledChecked, defaultChecked, disabled, className, onCheckedChange, children, ...props }) {
+function Radio({ id: idProp, checked: controlledChecked, defaultChecked, disabled, className, onCheckedChange, children, value, ...props }) {
     const [uncontrolledChecked, setUncontrolledChecked] = (0, react_1.useState)(defaultChecked);
+    const group = (0, RadioGroup_1.useRadioGroup)();
     const uniqId = (0, react_1.useId)();
     const id = idProp || uniqId;
-    const isChecked = controlledChecked ?? uncontrolledChecked;
+    const isInGroup = !!group;
+    const isDisabled = group?.disabled || disabled;
+    const isChecked = isInGroup
+        ? group.value === value
+        : (controlledChecked ?? uncontrolledChecked);
     const handleChange = () => {
-        if (disabled)
+        if (disabled) {
+            return;
+        }
+        if (isInGroup) {
+            group.setValue(value);
             return;
+        }
         if (controlledChecked === undefined) {
             setUncontrolledChecked(true);
         }
         onCheckedChange?.(true);
     };
-    return ((0, jsx_runtime_1.jsxs)("label", { htmlFor: id, className: (0, style_1.cn)("ui:flex ui:items-center ui:gap-2 ui:cursor-pointer ui:select-none", disabled && "ui:cursor-default ui:pointer-events-none"), children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "radio", checked: isChecked, defaultChecked: defaultChecked, disabled: disabled || undefined, onChange: handleChange, className: "ui:sr-only", ...props }), (0, jsx_runtime_1.jsx)("div", { className: (0, Radio_styles_1.radioVariants)({ checked: isChecked, disabled, className }), children: (0, jsx_runtime_1.jsx)("div", { className: (0, Radio_styles_1.radioDotVariants)({ checked: isChecked, disabled }) }) }), children && ((0, jsx_runtime_1.jsx)("span", { className: (0, style_1.cn)("ui:text-body5", disabled
+    return ((0, jsx_runtime_1.jsxs)("label", { htmlFor: id, className: (0, style_1.cn)("ui:flex ui:items-center ui:gap-2 ui:cursor-pointer", isDisabled && "ui:cursor-default ui:pointer-events-none"), children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "radio", name: group?.name, value: value, checked: isChecked, defaultChecked: defaultChecked, disabled: isDisabled, onChange: handleChange, className: "ui:sr-only", ...props }), (0, jsx_runtime_1.jsx)("div", { className: (0, Radio_styles_1.radioVariants)({
+                    checked: isChecked,
+                    disabled: isDisabled,
+                    className,
+                }), children: (0, jsx_runtime_1.jsx)("div", { className: (0, Radio_styles_1.radioDotVariants)({
+                        checked: isChecked,
+                        disabled: isDisabled,
+                    }) }) }), children && ((0, jsx_runtime_1.jsx)("span", { className: (0, style_1.cn)("ui:text-body5", isDisabled
                     ? "ui:text-gray-400 ui:pointer-events-none"
                     : "ui:cursor-pointer"), children: children }))] }));
 }

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

@@ -5,6 +5,7 @@ declare const meta: {
     component: typeof Radio;
     tags: string[];
     parameters: {
+        layout: string;
         docs: {
             description: {
                 component: string;

package/dist/components/Radio/Radio.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/Radio.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,KAAK,EAAc,MAAM,SAAS,CAAC;AAG5C,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;CAqBoB,CAAC;AAE/B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,UAAU,EAAE,KA+BxB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KA2BjC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAmB1B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KASnC,CAAC"}
+{"version":3,"file":"Radio.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/Radio.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;CAsBoB,CAAC;AAE/B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,UAAU,EAAE,KAgCxB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KA4BjC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAoB1B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KASnC,CAAC"}

package/dist/components/Radio/Radio.stories.js

@@ -8,10 +8,11 @@ const meta = {
     component: Radio_1.Radio,
     tags: ["autodocs"],
     parameters: {
+        layout: "centered",
         docs: {
             description: {
                 component: `
-그룹 내 단일 선택만 가능한 요소로, 상호 배타적 옵션을 나타냅니다. 라벨과 함께 사용하거나 단독으로 사용할 수 있습니다.
+그룹 내 단일 선택만 가능한 요소로, 상호 배타적 옵션을 나타냅니다. 라벨과 함께 사용하거나 단독으로 사용할 수 있습니다. 둘 이상의 Radio를 활용할 때는, \`<RadioGroup>\` 컴포넌트를 활용하는 것을 권장합니다.
 `,
             },
         },
@@ -28,6 +29,7 @@ const meta = {
 exports.default = meta;
 exports.Controlled = {
     parameters: {
+        layout: "centered",
         docs: {
             description: {
                 story: `
@@ -60,6 +62,7 @@ function Controlled() {
 };
 exports.ControlledWithLabel = {
     parameters: {
+        layout: "centered",
         docs: {
             source: {
                 code: `
@@ -88,12 +91,13 @@ function ControlledWithLabel() {
 };
 exports.UnControlled = {
     parameters: {
+        layout: "centered",
         docs: {
             description: {
                 story: `
 ### 상태를 내부에서 관리하는 방식
 
-Radio상태를 내부에서 자동으로 관리하려면 <code>defaultChecked</code> 속성을 사용하세요. 이 속성은 Checkbox이 처음 화면에 표시될 때 선택 상태를 정해주고, 그 후에는 컴포넌트가 스스로 상태를 관리해요. 상태 변화를 추적하지 않아도 될 때 유용해요.
+Radio의 상태를 내부에서 자동으로 관리하려면 <code>defaultChecked</code> 속성을 사용하세요. 이 속성은 Checkbox이 처음 화면에 표시될 때 선택 상태를 정해주고, 그 후에는 컴포넌트가 스스로 상태를 관리해요. 상태 변화를 추적하지 않아도 될 때 유용해요.
 `,
             },
         },

package/dist/components/Radio/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,55 @@
+import { ComponentPropsWithoutRef } from "react";
+interface RadioGroupContextValue {
+    name: string;
+    disabled?: boolean;
+    value?: string;
+    setValue: (value: string) => void;
+}
+export declare const useRadioGroup: () => RadioGroupContextValue | null;
+export interface RadioGroupProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * `Radio` 컴포넌트 목록
+     */
+    children: React.ReactNode;
+    /**
+     * 선택된 value (Controlled)
+     */
+    value?: string;
+    /**
+     * 초기 선택 값 (Uncontrolled)
+     */
+    defaultValue?: string;
+    /**
+     * 선택 값이 변경될 때 호출되는 이벤트 핸들러
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * 그룹 전체 비활성화 여부
+     */
+    disabled?: boolean;
+}
+/**
+ * `RadioGroup`: 하나의 값을 선택할 수 있는 라디오 옵션 그룹입니다.
+ * 내부의 `Radio` 컴포넌트는 자동으로 그룹 상태를 공유하며, 그룹 단위로 value 제어 및 disabled 상태를 관리할 수 있습니다.
+ *
+ * @see [RDS Storybook: RadioGroup](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-radiogroup--docs)
+ * @example
+ * ```tsx
+ * // Controlled
+ * const [value, setValue] = useState("a");
+ *
+ * <RadioGroup value={value} onValueChange={setValue}>
+ *   <Radio value="a">Option A</Radio>
+ *   <Radio value="b">Option B</Radio>
+ * </RadioGroup>
+ *
+ * // Uncontrolled
+ * <RadioGroup defaultValue="b">
+ *   <Radio value="a">Option A</Radio>
+ *   <Radio value="b">Option B</Radio>
+ * </RadioGroup>
+ * ```
+ */
+export declare function RadioGroup({ children, value: controlledValue, defaultValue, onValueChange, disabled, className, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=RadioGroup.d.ts.map

package/dist/components/RadioGroup/RadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,wBAAwB,EAKzB,MAAM,OAAO,CAAC;AAGf,UAAU,sBAAsB;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAID,eAAO,MAAM,aAAa,qCAA+B,CAAC;AAE1D,MAAM,WAAW,eAAgB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACtE;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,KAAK,EAAE,eAAe,EACtB,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,2CAwBjB"}

package/dist/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRadioGroup = void 0;
+exports.RadioGroup = RadioGroup;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const style_1 = require("../../utils/style");
+const RadioGroupContext = (0, react_1.createContext)(null);
+const useRadioGroup = () => (0, react_1.use)(RadioGroupContext);
+exports.useRadioGroup = useRadioGroup;
+/**
+ * `RadioGroup`: 하나의 값을 선택할 수 있는 라디오 옵션 그룹입니다.
+ * 내부의 `Radio` 컴포넌트는 자동으로 그룹 상태를 공유하며, 그룹 단위로 value 제어 및 disabled 상태를 관리할 수 있습니다.
+ *
+ * @see [RDS Storybook: RadioGroup](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-radiogroup--docs)
+ * @example
+ * ```tsx
+ * // Controlled
+ * const [value, setValue] = useState("a");
+ *
+ * <RadioGroup value={value} onValueChange={setValue}>
+ *   <Radio value="a">Option A</Radio>
+ *   <Radio value="b">Option B</Radio>
+ * </RadioGroup>
+ *
+ * // Uncontrolled
+ * <RadioGroup defaultValue="b">
+ *   <Radio value="a">Option A</Radio>
+ *   <Radio value="b">Option B</Radio>
+ * </RadioGroup>
+ * ```
+ */
+function RadioGroup({ children, value: controlledValue, defaultValue, onValueChange, disabled, className, ...props }) {
+    const [uncontrolledValue, setUncontrolledValue] = (0, react_1.useState)(defaultValue);
+    const name = (0, react_1.useId)();
+    const isControlled = controlledValue !== undefined;
+    const currentValue = isControlled ? controlledValue : uncontrolledValue;
+    const setValue = (newValue) => {
+        if (!isControlled) {
+            setUncontrolledValue(newValue);
+        }
+        onValueChange?.(newValue);
+    };
+    return ((0, jsx_runtime_1.jsx)(RadioGroupContext, { value: { name, value: currentValue, disabled, setValue }, children: (0, jsx_runtime_1.jsx)("div", { className: (0, style_1.cn)("ui:flex ui:flex-col", className), ...props, children: children }) }));
+}

package/dist/components/RadioGroup/RadioGroup.stories.d.ts

@@ -0,0 +1,40 @@
+import type { StoryObj } from "@storybook/react";
+import { RadioGroup } from "./RadioGroup";
+declare const meta: {
+    title: string;
+    component: typeof RadioGroup;
+    tags: string[];
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        value: {
+            control: "text";
+        };
+        defaultValue: {
+            control: "text";
+        };
+        disabled: {
+            control: "boolean";
+        };
+        className: {
+            control: "text";
+            description: string;
+        };
+        children: {
+            table: {
+                disable: true;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Controlled: Story;
+export declare const Uncontrolled: Story;
+//# sourceMappingURL=RadioGroup.stories.d.ts.map

package/dist/components/RadioGroup/RadioGroup.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAC;AAG3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAcnC,eAAO,MAAM,UAAU,EAAE,KAmCxB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA0B1B,CAAC"}

package/dist/components/RadioGroup/RadioGroup.stories.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Uncontrolled = exports.Controlled = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const RadioGroup_1 = require("./RadioGroup");
+const Radio_1 = require("../Radio/Radio");
+const meta = {
+    title: "Components/RadioGroup",
+    component: RadioGroup_1.RadioGroup,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: `
+여러 개의 Radio를 묶어 단일 선택을 강제하는 컴포넌트입니다.  
+\`value\`를 넘기면 제어 모드로, \`defaultValue\`만 넘기면 비제어 모드로 동작합니다.
+        `,
+            },
+        },
+    },
+    argTypes: {
+        value: {
+            control: "text",
+        },
+        defaultValue: {
+            control: "text",
+        },
+        disabled: { control: "boolean" },
+        className: {
+            control: "text",
+            description: "ui:gap-3",
+        },
+        children: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+};
+exports.default = meta;
+function ControlledRadioGroup(props) {
+    const [value, setValue] = (0, react_1.useState)("b");
+    return ((0, jsx_runtime_1.jsxs)(RadioGroup_1.RadioGroup, { ...props, value: value, onValueChange: setValue, children: [(0, jsx_runtime_1.jsx)(Radio_1.Radio, { value: "a", children: "A" }), (0, jsx_runtime_1.jsx)(Radio_1.Radio, { value: "b", children: "B" }), (0, jsx_runtime_1.jsx)(Radio_1.Radio, { value: "c", children: "C" })] }));
+}
+exports.Controlled = {
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                story: `
+### 상태를 외부에서 관리하는 방식
+  
+RadioGroup의 상태를 외부에서 관리하려면 \`value\`와 \`onValueChange\` 속성을 함께 사용하세요.
+          `,
+            },
+            source: {
+                code: `
+  function Controlled() {
+    const [value, setValue] = useState("b");
+  
+    return (
+      <RadioGroup value={value} onValueChange={setValue} className="gap-3">
+        <Radio value="a">A</Radio>
+        <Radio value="b">B</Radio>
+        <Radio value="c">C</Radio>
+      </RadioGroup>
+    );
+  }
+          `.trim(),
+            },
+        },
+    },
+    render: (props) => (0, jsx_runtime_1.jsx)(ControlledRadioGroup, { ...props }),
+    args: {
+        value: "b",
+        children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
+        disabled: false,
+        className: "ui:gap-3",
+    },
+};
+exports.Uncontrolled = {
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                story: `
+### 상태를 내부에서 관리하는 방식
+  
+RadioGroup의 상태를 내부에서 자동으로 관리하려면 \`defaultValue\` 속성을 사용하세요.
+          `,
+            },
+        },
+    },
+    render: (props) => ((0, jsx_runtime_1.jsxs)(RadioGroup_1.RadioGroup, { ...props, defaultValue: "b", children: [(0, jsx_runtime_1.jsx)(Radio_1.Radio, { value: "a", children: "A" }), (0, jsx_runtime_1.jsx)(Radio_1.Radio, { value: "b", children: "B" }), (0, jsx_runtime_1.jsx)(Radio_1.Radio, { value: "c", children: "C" })] })),
+    args: {
+        defaultValue: "b",
+        children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
+        disabled: false,
+        className: "ui:gap-3",
+    },
+};

package/dist/components/RadioGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { RadioGroup } from "./RadioGroup";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/RadioGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/RadioGroup/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroup = void 0;
+var RadioGroup_1 = require("./RadioGroup");
+Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return RadioGroup_1.RadioGroup; } });

package/dist/components/Toggle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}