@reitwagen/design-components 0.3.1 → 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

@@ -0,0 +1,34 @@
+import { ComponentPropsWithRef } from "react";
+import { VariantProps } from "class-variance-authority";
+import { ChildrenProps } from "../../types/props";
+import { radioVariants } from "./Radio.styles";
+export type RadioProps = ComponentPropsWithRef<"input"> & ChildrenProps & VariantProps<typeof radioVariants> & {
+    /**
+     * 라디오의 선택 상태가 변경될 때 호출되는 이벤트 핸들러
+     */
+    onCheckedChange?: (checked: boolean) => void;
+};
+/**
+ * `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 [checked, setChecked] = useState(false)
+ *
+ * // Controlled
+ * <Radio
+ *   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, value, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Radio {
+    var displayName: string;
+}
+//# sourceMappingURL=Radio.d.ts.map

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

@@ -0,0 +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;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

@@ -0,0 +1,63 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Radio = Radio;
+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`: 그룹 내 단일 선택만 가능한 요소로, 상호 배타적 옵션을 나타냅니다. 그룹과 함께 사용하려면, `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 [checked, setChecked] = useState(false)
+ *
+ * // Controlled
+ * <Radio
+ *   checked={checked}
+ *   onCheckedChange={() => setChecked(!checked)}
+ * >
+ *   Option
+ * </Radio>
+ * // Uncontrolled
+ * <Radio defaultChecked>Option</Radio>
+ * ```
+ */
+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 isInGroup = !!group;
+    const isDisabled = group?.disabled || disabled;
+    const isChecked = isInGroup
+        ? group.value === value
+        : (controlledChecked ?? uncontrolledChecked);
+    const handleChange = () => {
+        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", 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 }))] }));
+}
+Radio.displayName = "Radio";

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

@@ -0,0 +1,34 @@
+import type { StoryObj } from "@storybook/react";
+import { Radio } from "./Radio";
+declare const meta: {
+    title: string;
+    component: typeof Radio;
+    tags: string[];
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        checked: {
+            control: {
+                type: "boolean";
+            };
+        };
+        disabled: {
+            control: {
+                type: "boolean";
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Controlled: Story;
+export declare const ControlledWithLabel: Story;
+export declare const UnControlled: Story;
+export declare const UnControlledWithLabel: Story;
+//# sourceMappingURL=Radio.stories.d.ts.map

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

@@ -0,0 +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,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

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UnControlledWithLabel = exports.UnControlled = exports.ControlledWithLabel = exports.Controlled = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Radio_1 = require("./Radio");
+const meta = {
+    title: "Components/Radio",
+    component: Radio_1.Radio,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: `
+그룹 내 단일 선택만 가능한 요소로, 상호 배타적 옵션을 나타냅니다. 라벨과 함께 사용하거나 단독으로 사용할 수 있습니다. 둘 이상의 Radio를 활용할 때는, \`<RadioGroup>\` 컴포넌트를 활용하는 것을 권장합니다.
+`,
+            },
+        },
+    },
+    argTypes: {
+        checked: {
+            control: { type: "boolean" },
+        },
+        disabled: {
+            control: { type: "boolean" },
+        },
+    },
+};
+exports.default = meta;
+exports.Controlled = {
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                story: `
+### 상태를 외부에서 관리하는 방식
+
+Radio의 상태를 외부에서 관리하려면 \`checked\`와 \`onCheckedChange\` 속성을 함께 사용하세요.
+`,
+            },
+            source: {
+                code: `
+function Controlled() {
+  const [checked, setChecked] = useState(true);
+
+  return (
+    <Radio
+      checked={checked}
+      onCheckedChange={() => setChecked(!checked)}
+    />
+  );
+}
+        `.trim(),
+            },
+        },
+    },
+    render: (props) => (0, jsx_runtime_1.jsx)(Radio_1.Radio, { ...props }),
+    args: {
+        checked: true,
+        disabled: false,
+    },
+};
+exports.ControlledWithLabel = {
+    parameters: {
+        layout: "centered",
+        docs: {
+            source: {
+                code: `
+function ControlledWithLabel() {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <Radio
+      checked={checked}
+      onCheckedChange={() => setChecked(!checked)}
+    >
+      Action Text
+    </Radio>
+  );
+}
+        `.trim(),
+            },
+        },
+    },
+    render: (props) => (0, jsx_runtime_1.jsx)(Radio_1.Radio, { ...props }),
+    args: {
+        children: "Action Text",
+        checked: false,
+        disabled: false,
+    },
+};
+exports.UnControlled = {
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                story: `
+### 상태를 내부에서 관리하는 방식
+
+Radio의 상태를 내부에서 자동으로 관리하려면 <code>defaultChecked</code> 속성을 사용하세요. 이 속성은 Checkbox이 처음 화면에 표시될 때 선택 상태를 정해주고, 그 후에는 컴포넌트가 스스로 상태를 관리해요. 상태 변화를 추적하지 않아도 될 때 유용해요.
+`,
+            },
+        },
+    },
+    render: (props) => (0, jsx_runtime_1.jsx)(Radio_1.Radio, { ...props }),
+    args: {
+        defaultChecked: true,
+    },
+    argTypes: {
+        defaultChecked: { control: "boolean" },
+    },
+};
+exports.UnControlledWithLabel = {
+    render: (props) => (0, jsx_runtime_1.jsx)(Radio_1.Radio, { ...props, children: props.children }),
+    args: {
+        children: "Action Text",
+        defaultChecked: true,
+    },
+    argTypes: {
+        defaultChecked: { control: "boolean" },
+    },
+};

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

@@ -0,0 +1,9 @@
+export declare const radioVariants: (props?: ({
+    checked?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const radioDotVariants: (props?: ({
+    checked?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=Radio.styles.d.ts.map

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

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

package/dist/components/Radio/Radio.styles.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.radioDotVariants = exports.radioVariants = void 0;
+const class_variance_authority_1 = require("class-variance-authority");
+exports.radioVariants = (0, class_variance_authority_1.cva)("ui:w-[22px] ui:h-[22px] ui:flex ui:items-center ui:justify-center ui:rounded-full ui:border-[1.5px] ui:duration-100 ui:transition-colors", {
+    variants: {
+        checked: {
+            true: "",
+            false: "",
+        },
+        disabled: {
+            true: "",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            checked: true,
+            disabled: false,
+            className: "ui:bg-white ui:border-blue-700 ui:active:border-blue-800",
+        },
+        {
+            checked: false,
+            disabled: false,
+            className: "ui:bg-white ui:border-gray-200 ui:active:bg-gray-100 ui:active:border-gray-300",
+        },
+        {
+            checked: true,
+            disabled: true,
+            className: "ui:bg-white ui:border-blue-300",
+        },
+        {
+            checked: false,
+            disabled: true,
+            className: "ui:bg-white ui:border-gray-100",
+        },
+    ],
+    defaultVariants: {
+        checked: false,
+        disabled: false,
+    },
+});
+exports.radioDotVariants = (0, class_variance_authority_1.cva)("ui:w-3 ui:h-3 ui:rounded-full ui:transition-colors ui:duration-300", {
+    variants: {
+        checked: {
+            true: "ui:opacity-100",
+            false: "ui:opacity-0",
+        },
+        disabled: {
+            true: "",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            checked: true,
+            disabled: false,
+            className: "ui:bg-blue-700 ui:active:bg-blue-800",
+        },
+        {
+            checked: true,
+            disabled: true,
+            className: "ui:bg-blue-300",
+        },
+    ],
+    defaultVariants: {
+        checked: false,
+        disabled: false,
+    },
+});

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

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

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

@@ -0,0 +1 @@
+{"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/Radio/index.js

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

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"}