@reitwagen/design-components 0.3.0 → 0.4.0

package/dist/components/Icons/IconThumbDefault.d.ts

@@ -6,6 +6,7 @@ interface Props extends SVGProps<SVGSVGElement> {
 }
 /**
  * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @see [RDS Storybook: Icon](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-icons--docs)
  * @example
  * ```tsx
  * <Icon width={24} height={24} className="text-gray-500" />

package/dist/components/Icons/IconThumbDefault.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconThumbDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconThumbDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CA4BP;AAED,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"IconThumbDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconThumbDefault.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CA4BP;AAED,eAAe,gBAAgB,CAAC"}

package/dist/components/Icons/IconThumbDefault.js

@@ -1,8 +1,10 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @see [RDS Storybook: Icon](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-icons--docs)
  * @example
  * ```tsx
  * <Icon width={24} height={24} className="text-gray-500" />

package/dist/components/Icons/IconThunder.d.ts

@@ -6,6 +6,7 @@ interface Props extends SVGProps<SVGSVGElement> {
 }
 /**
  * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @see [RDS Storybook: Icon](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-icons--docs)
  * @example
  * ```tsx
  * <Icon width={24} height={24} className="text-gray-500" />

package/dist/components/Icons/IconThunder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconThunder.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconThunder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,KAAU,EAAE,MAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAmB3E;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"IconThunder.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconThunder.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,KAAU,EAAE,MAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAmB3E;AAED,eAAe,WAAW,CAAC"}

package/dist/components/Icons/IconThunder.js

@@ -1,8 +1,10 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @see [RDS Storybook: Icon](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-icons--docs)
  * @example
  * ```tsx
  * <Icon width={24} height={24} className="text-gray-500" />

package/dist/components/Icons/IconTimeDefault.d.ts

@@ -6,6 +6,7 @@ interface Props extends SVGProps<SVGSVGElement> {
 }
 /**
  * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @see [RDS Storybook: Icon](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-icons--docs)
  * @example
  * ```tsx
  * <Icon width={24} height={24} className="text-gray-500" />

package/dist/components/Icons/IconTimeDefault.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconTimeDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconTimeDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CA4BP;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"IconTimeDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconTimeDefault.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CA4BP;AAED,eAAe,eAAe,CAAC"}

package/dist/components/Icons/IconTimeDefault.js

@@ -1,8 +1,10 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @see [RDS Storybook: Icon](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-icons--docs)
  * @example
  * ```tsx
  * <Icon width={24} height={24} className="text-gray-500" />

package/dist/components/Icons/IconVoteDefault.d.ts

@@ -6,6 +6,7 @@ interface Props extends SVGProps<SVGSVGElement> {
 }
 /**
  * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @see [RDS Storybook: Icon](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-icons--docs)
  * @example
  * ```tsx
  * <Icon width={24} height={24} className="text-gray-500" />

package/dist/components/Icons/IconVoteDefault.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconVoteDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconVoteDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAiBP;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"IconVoteDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconVoteDefault.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAiBP;AAED,eAAe,eAAe,CAAC"}

package/dist/components/Icons/IconVoteDefault.js

@@ -1,8 +1,10 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @see [RDS Storybook: Icon](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-icons--docs)
  * @example
  * ```tsx
  * <Icon width={24} height={24} className="text-gray-500" />

package/dist/components/Icons/IconYoutubeDefault.d.ts

@@ -6,6 +6,7 @@ interface Props extends SVGProps<SVGSVGElement> {
 }
 /**
  * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @see [RDS Storybook: Icon](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-icons--docs)
  * @example
  * ```tsx
  * <Icon width={24} height={24} className="text-gray-500" />

package/dist/components/Icons/IconYoutubeDefault.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconYoutubeDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconYoutubeDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAmBP;AAED,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"IconYoutubeDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconYoutubeDefault.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAmBP;AAED,eAAe,kBAAkB,CAAC"}

package/dist/components/Icons/IconYoutubeDefault.js

@@ -1,8 +1,10 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @see [RDS Storybook: Icon](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-icons--docs)
  * @example
  * ```tsx
  * <Icon width={24} height={24} className="text-gray-500" />

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`: 그룹 내 단일 선택만 가능한 요소로, 상호 배타적 옵션을 나타냅니다.
+ * @see [RDS Storybook: Radio](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-radio--docs)
+ * @example
+ * ```tsx
+ * const [selected, setSelected] = useState(false)
+ *
+ * // Controlled
+ * <Radio
+ *   checked={selected}
+ *   onCheckedChange={setSelected}
+ * >
+ *   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 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;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"}

package/dist/components/Radio/Radio.js

@@ -0,0 +1,45 @@
+"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");
+/**
+ * `Radio`: 그룹 내 단일 선택만 가능한 요소로, 상호 배타적 옵션을 나타냅니다.
+ * @see [RDS Storybook: Radio](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-radio--docs)
+ * @example
+ * ```tsx
+ * const [selected, setSelected] = useState(false)
+ *
+ * // Controlled
+ * <Radio
+ *   checked={selected}
+ *   onCheckedChange={setSelected}
+ * >
+ *   Option
+ * </Radio>
+ *
+ * // Uncontrolled
+ * <Radio defaultChecked>Option</Radio>
+ * ```
+ */
+function Radio({ id: idProp, checked: controlledChecked, defaultChecked, disabled, className, onCheckedChange, children, ...props }) {
+    const [uncontrolledChecked, setUncontrolledChecked] = (0, react_1.useState)(defaultChecked);
+    const uniqId = (0, react_1.useId)();
+    const id = idProp || uniqId;
+    const isChecked = controlledChecked ?? uncontrolledChecked;
+    const handleChange = () => {
+        if (disabled)
+            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
+                    ? "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,33 @@
+import type { StoryObj } from "@storybook/react";
+import { Radio } from "./Radio";
+declare const meta: {
+    title: string;
+    component: typeof Radio;
+    tags: string[];
+    parameters: {
+        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,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"}

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

@@ -0,0 +1,118 @@
+"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: {
+        docs: {
+            description: {
+                component: `
+그룹 내 단일 선택만 가능한 요소로, 상호 배타적 옵션을 나타냅니다. 라벨과 함께 사용하거나 단독으로 사용할 수 있습니다.
+`,
+            },
+        },
+    },
+    argTypes: {
+        checked: {
+            control: { type: "boolean" },
+        },
+        disabled: {
+            control: { type: "boolean" },
+        },
+    },
+};
+exports.default = meta;
+exports.Controlled = {
+    parameters: {
+        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: {
+        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: {
+        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.tsx"],"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/Toggle/Toggle.d.ts

@@ -1,29 +1,32 @@
-import { ButtonHTMLAttributes } from "react";
+import { ElementType } from "react";
 import { type VariantProps } from "class-variance-authority";
 import { toggleVariants } from "./Toggle.styles";
-export interface ToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "disabled">, VariantProps<typeof toggleVariants> {
+import { PolymorphicComponentWithRef } from "../../types/props";
+type ToggleOwnProps = VariantProps<typeof toggleVariants> & {
     /**
      * 토글 상태가 변경될 때 호출되는 이벤트 핸들러
      */
     onCheckedChange?: (checked: boolean) => void;
-}
+};
+export type ToggleProps<C extends ElementType> = PolymorphicComponentWithRef<C, ToggleOwnProps>;
 /**
- * `Toggle` 컴포넌트는 즉각적인 상태 전환(켜기/끄기)을 위한 요소로, 활성화/비활성화 기능을 나타냅니다.
+ * `Toggle`: 즉각적인 상태 전환(켜기/끄기)을 위한 요소로, 활성화/비활성화 기능을 나타냅니다.
+ * @see [RDS Storybook: Toggle](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-toggle--docs)
  * @example
  * ```tsx
  * const [checked, setChecked] = useState(false)
  * // Controlled
- *  <Toggle
- *    checked={checked}
- *    onCheckedChange={setChecked}
- *  />
- *  // UnControlled
- *  <Toggle defaultChecked={true}
- *  />
+ * <Toggle
+ *   checked={checked}
+ *   onCheckedChange={setChecked}
+ * />
+ * // UnControlled
+ * <Toggle defaultChecked={true} />
  * ```
  */
-export declare function Toggle({ checked: controlledChecked, defaultChecked, disabled, onCheckedChange, ...props }: ToggleProps): import("react/jsx-runtime").JSX.Element;
+export declare function Toggle<C extends ElementType = "button">({ checked: controlledChecked, defaultChecked, disabled, onCheckedChange, ...props }: ToggleProps<C>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Toggle {
     var displayName: string;
 }
+export {};
 //# sourceMappingURL=Toggle.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAY,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAiB,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEhE,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,EAC/D,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED;;;;;;;;;;;;;;GAcG;AAEH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EAAE,iBAAiB,EAC1B,cAAc,EACd,QAAQ,EACR,eAAe,EACf,GAAG,KAAK,EACT,EAAE,WAAW,2CAmCb;yBAzCe,MAAM"}
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAY,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAiB,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,EAAE,2BAA2B,EAAE,MAAM,mBAAmB,CAAC;AAEhE,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IAC1D;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,IAAI,2BAA2B,CAC1E,CAAC,EACD,cAAc,CACf,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AAEH,wBAAgB,MAAM,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,EAAE,EACvD,OAAO,EAAE,iBAAiB,EAC1B,cAAc,EACd,QAAQ,EACR,eAAe,EACf,GAAG,KAAK,EACT,EAAE,WAAW,CAAC,CAAC,CAAC,2CAmChB;yBAzCe,MAAM"}

package/dist/components/Toggle/Toggle.js

@@ -7,18 +7,18 @@ const react_1 = require("react");
 const style_1 = require("../../utils/style");
 const Toggle_styles_1 = require("./Toggle.styles");
 /**
- * `Toggle` 컴포넌트는 즉각적인 상태 전환(켜기/끄기)을 위한 요소로, 활성화/비활성화 기능을 나타냅니다.
+ * `Toggle`: 즉각적인 상태 전환(켜기/끄기)을 위한 요소로, 활성화/비활성화 기능을 나타냅니다.
+ * @see [RDS Storybook: Toggle](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-toggle--docs)
  * @example
  * ```tsx
  * const [checked, setChecked] = useState(false)
  * // Controlled
- *  <Toggle
- *    checked={checked}
- *    onCheckedChange={setChecked}
- *  />
- *  // UnControlled
- *  <Toggle defaultChecked={true}
- *  />
+ * <Toggle
+ *   checked={checked}
+ *   onCheckedChange={setChecked}
+ * />
+ * // UnControlled
+ * <Toggle defaultChecked={true} />
  * ```
  */
 function Toggle({ checked: controlledChecked, defaultChecked, disabled, onCheckedChange, ...props }) {

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;AAE/C,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;CAwBqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAcnC,eAAO,MAAM,UAAU,EAAE,KA8CxB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA2B1B,CAAC"}
+{"version":3,"file":"Toggle.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;AAE/C,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;CAwBqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAgBnC,eAAO,MAAM,UAAU,EAAE,KA8CxB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA2B1B,CAAC"}

package/dist/index.css

@@ -268,6 +268,17 @@
   .ui\:pointer-events-none {
     pointer-events: none;
   }
+  .ui\:sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
   .ui\:my-3 {
     margin-block: calc(var(--ui-spacing) * 3);
   }
@@ -280,6 +291,9 @@
   .ui\:inline-flex {
     display: inline-flex;
   }
+  .ui\:h-3 {
+    height: calc(var(--ui-spacing) * 3);
+  }
   .ui\:h-6 {
     height: calc(var(--ui-spacing) * 6);
   }
@@ -316,6 +330,9 @@
   .ui\:h-px {
     height: 1px;
   }
+  .ui\:w-3 {
+    width: calc(var(--ui-spacing) * 3);
+  }
   .ui\:w-6 {
     width: calc(var(--ui-spacing) * 6);
   }
@@ -638,6 +655,9 @@
   .ui\:text-gray-300 {
     color: var(--ui-color-gray-300);
   }
+  .ui\:text-gray-400 {
+    color: var(--ui-color-gray-400);
+  }
   .ui\:text-gray-500 {
     color: var(--ui-color-gray-500);
   }
@@ -653,6 +673,12 @@
   .ui\:text-white {
     color: var(--ui-color-white);
   }
+  .ui\:opacity-0 {
+    opacity: 0%;
+  }
+  .ui\:opacity-100 {
+    opacity: 100%;
+  }
   .ui\:ring-0 {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -685,6 +711,11 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .ui\:active\:border-blue-800 {
+    &:active {
+      border-color: var(--ui-color-blue-800);
+    }
+  }
   .ui\:active\:border-gray-100 {
     &:active {
       border-color: var(--ui-color-gray-100);

package/dist/index.d.ts

@@ -2,5 +2,6 @@ export * from "./components/Button";
 export * from "./components/Chip";
 export * from "./components/Toggle";
 export * from "./components/Checkbox";
+export * from "./components/Radio";
 export * from "./components/Icons";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AAGtC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AAGnC,cAAc,oBAAoB,CAAC"}