@reitwagen/design-components 0.2.2 → 0.3.1

package/dist/components/Checkbox/Checkbox.stories.js

@@ -0,0 +1,172 @@
+"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 test_1 = require("@storybook/test");
+const Checkbox_1 = require("./Checkbox");
+const react_1 = require("react");
+const meta = {
+    title: "Components/Checkbox",
+    component: Checkbox_1.Checkbox,
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            description: {
+                component: `
+다중 선택이 가능한 요소로, 선택/비선택 상태를 나타냅니다. 라벨과 함께 사용하거나 단독으로 사용할 수 있습니다.
+`,
+            },
+        },
+    },
+    argTypes: {
+        checked: {
+            control: { type: "boolean" },
+            options: ["true", "false"],
+        },
+        disabled: {
+            control: { type: "boolean" },
+            options: ["true", "false"],
+        },
+    },
+};
+exports.default = meta;
+function CheckboxWithControlled(props) {
+    const [checked, setChecked] = (0, react_1.useState)(props.checked);
+    return ((0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { ...props, checked: checked, onCheckedChange: () => setChecked(!checked), children: props.children }));
+}
+exports.Controlled = {
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### 상태를 외부에서 관리하는 방식
+
+Checkbox의 상태를 외부에서 관리하려면 <code>checked</code>와 <code>onCheckedChange</code> 속성을 함께 사용하세요.
+`,
+            },
+            source: {
+                code: `
+function Controlled() {
+  const [checked, setChecked] = useState(true);
+
+  return (
+    <Checkbox
+      checked={checked}
+      onCheckedChange={() => setChecked(!checked)}
+    />
+  );
+}
+        `.trim(),
+            },
+        },
+    },
+    render: (props) => (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { ...props }),
+    args: {
+        checked: true,
+        disabled: false,
+    },
+    argTypes: {
+        checked: {
+            control: { type: "boolean" },
+            options: ["true", "false"],
+        },
+        disabled: {
+            control: { type: "boolean" },
+            options: ["true", "false"],
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = (0, test_1.within)(canvasElement);
+        const checkbox = canvas.getByRole("checkbox");
+        await test_1.userEvent.click(checkbox);
+    },
+};
+exports.ControlledWithLabel = {
+    parameters: {
+        docs: {
+            source: {
+                code: `
+function Controlled() {
+  const [checked, setChecked] = useState(props.checked);
+
+  return (
+    <Checkbox
+      checked={checked}
+      onCheckedChange={() => setChecked(!checked)}
+    >
+      Action Text
+    </Checkbox>
+  );
+}
+        `.trim(),
+            },
+        },
+    },
+    render: (props) => (0, jsx_runtime_1.jsx)(CheckboxWithControlled, { ...props }),
+    args: {
+        children: "Action Text",
+        checked: false,
+        disabled: false,
+    },
+    argTypes: {
+        checked: {
+            control: { type: "boolean" },
+            options: ["true", "false"],
+        },
+        disabled: {
+            control: { type: "boolean" },
+            options: ["true", "false"],
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = (0, test_1.within)(canvasElement);
+        const checkbox = canvas.getByRole("checkbox");
+        await test_1.userEvent.click(checkbox);
+    },
+};
+exports.UnControlled = {
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### 상태를 내부에서 관리하는 방식
+    
+Checkbox의 상태를 내부에서 자동으로 관리하려면 <code>defaultChecked</code> 속성을 사용하세요. 이 속성은 Checkbox이 처음 화면에 표시될 때 선택 상태를 정해주고, 그 후에는 컴포넌트가 스스로 상태를 관리해요. 상태 변화를 추적하지 않아도 될 때 유용해요.
+`,
+            },
+        },
+    },
+    render: (props) => (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { defaultChecked: true, ...props }),
+    args: {
+        defaultChecked: true,
+    },
+    argTypes: {
+        defaultChecked: {
+            control: { type: "boolean" },
+            options: ["true", "false"],
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = (0, test_1.within)(canvasElement);
+        const checkbox = canvas.getByRole("checkbox");
+        await test_1.userEvent.click(checkbox);
+    },
+};
+exports.UnControlledWithLabel = {
+    render: (props) => ((0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { defaultChecked: true, ...props, children: props.children })),
+    args: {
+        children: "Action Text",
+        defaultChecked: true,
+    },
+    argTypes: {
+        defaultChecked: {
+            control: { type: "boolean" },
+            options: ["true", "false"],
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = (0, test_1.within)(canvasElement);
+        const checkbox = canvas.getByRole("checkbox");
+        await test_1.userEvent.click(checkbox);
+    },
+};

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

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

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

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

package/dist/components/Checkbox/Checkbox.styles.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkIconVariants = exports.checkboxVariants = void 0;
+const class_variance_authority_1 = require("class-variance-authority");
+exports.checkboxVariants = (0, class_variance_authority_1.cva)("ui:focus:ring-0 ui:ring-0 ui:w-[22px] ui:h-[22px] ui:rounded-full ui:flex ui:items-center ui:justify-center", {
+    variants: {
+        disabled: {
+            true: "ui:cursor-default",
+            false: "ui:cursor-pointer",
+        },
+        checked: {
+            true: "",
+            false: "ui:border-[1.5px]",
+        },
+    },
+    compoundVariants: [
+        {
+            checked: true,
+            disabled: false,
+            className: "ui:bg-blue-700 ui:active:bg-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-blue-300 ui:active:bg-blue-300",
+        },
+        {
+            checked: false,
+            disabled: true,
+            className: "ui:border-gray-100 ui:active:border-gray-100",
+        },
+    ],
+    defaultVariants: {
+        disabled: false,
+        checked: false,
+    },
+});
+exports.checkIconVariants = (0, class_variance_authority_1.cva)("", {
+    variants: {
+        disabled: {
+            true: "ui:text-gray-100",
+            false: "ui:text-white",
+        },
+        checked: {
+            true: "ui:text-white ui:active:text-gray-100",
+            false: "ui:text-gray-200 ui:active:text-gray-300",
+        },
+    },
+    compoundVariants: [
+        {
+            checked: true,
+            disabled: true,
+            className: "ui:active:text-white",
+        },
+        {
+            checked: false,
+            disabled: true,
+            className: "ui:active:text-gray-200",
+        },
+    ],
+    defaultVariants: {
+        disabled: false,
+        checked: false,
+    },
+});

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

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

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

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

package/dist/components/Checkbox/index.js

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

package/dist/components/Chip/Chip.d.ts

@@ -1,19 +1,22 @@
 import { ElementType, ReactNode } from "react";
-import { PolymorphicComponentProps } from "../../types/props";
 import { VariantProps } from "class-variance-authority";
-declare const chipVariants: (props?: ({
-    variant?: "fill" | "text" | "line" | null | undefined;
-    size?: "large" | "medium" | "small" | null | undefined;
-    disabled?: boolean | null | undefined;
-    isSelected?: boolean | null | undefined;
-    isActive?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type ChipOwnProps = VariantProps<typeof chipVariants> & {
-    children?: ReactNode;
+import { ChildrenProps, PolymorphicComponentProps } from "../../types/props";
+import { chipVariants } from "./Chip.styles";
+type ChipOwnProps = VariantProps<typeof chipVariants> & ChildrenProps & {
     leftContent?: ReactNode;
     rightContent?: ReactNode;
 };
 type ChipProps<C extends ElementType> = PolymorphicComponentProps<C, ChipOwnProps>;
+/**
+ * `Chip`: 정보 요약과 화면의 복잡성을 줄이는 데 사용되며, 카테고리를 분류해 특정 정보를 시각적으로 표현합니다.
+ * @see [RDS Storybook: Chip](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-chip--docs)
+ * @example
+ * ```tsx
+ * <Chip size="large" variant="fill" isSelected>Text</Chip>
+ * <Chip size="medium" variant="line" isActive leftContent={<Icon />}>Text</Chip>
+ * <Chip as={Link} href="/link">Text</Chip>
+ * ```
+ */
 export declare function Chip<C extends ElementType = "button">({ className, as, children, variant, size, disabled, isSelected, isActive, leftContent, rightContent, ...props }: ChipProps<C>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Chip {
     var displayName: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG7D,QAAA,MAAM,YAAY;;;;;;8EA4HjB,CAAC;AAEF,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,GAAG;IACtD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B,CAAC;AAEF,KAAK,SAAS,CAAC,CAAC,SAAS,WAAW,IAAI,yBAAyB,CAC/D,CAAC,EACD,YAAY,CACb,CAAC;AAEF,wBAAgB,IAAI,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,EAAE,EACrD,SAAS,EACT,EAAE,EACF,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,CAAC,CAAC,2CAuBd;yBAnCe,IAAI"}
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAE7E,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,GACnD,aAAa,GAAG;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B,CAAC;AAEJ,KAAK,SAAS,CAAC,CAAC,SAAS,WAAW,IAAI,yBAAyB,CAC/D,CAAC,EACD,YAAY,CACb,CAAC;AAEF;;;;;;;;;GASG;AAEH,wBAAgB,IAAI,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,EAAE,EACrD,SAAS,EACT,EAAE,EACF,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,CAAC,CAAC,2CAuBd;yBAnCe,IAAI"}

package/dist/components/Chip/Chip.js

@@ -2,132 +2,21 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chip = Chip;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const class_variance_authority_1 = require("class-variance-authority");
 const style_1 = require("../../utils/style");
-const chipVariants = (0, class_variance_authority_1.cva)("ui:flex ui:items-center ui:justify-center ui:gap-1 ui:select-none", {
-    variants: {
-        variant: {
-            fill: "ui:transition-colors ui:duration-300 ui:rounded-full",
-            line: "ui:transition-colors ui:duration-100 ui:rounded-full",
-            text: "ui:rounded-[8px]",
-        },
-        size: {
-            large: "ui:text-button2 ui:h-[38px] ui:px-[18px] ui:py-[9px]",
-            medium: "ui:text-button3 ui:h-[32px] ui:px-[14px] ui:py-[7px]",
-            small: "ui:text-button3 ui:h-[26px] ui:px-[10px] ui:py-[4.5px]",
-        },
-        disabled: {
-            true: "ui:pointer-events-none",
-            false: "ui:cursor-pointer",
-        },
-        isSelected: {
-            true: "",
-            false: "",
-        },
-        isActive: {
-            true: "",
-            false: "",
-        },
-    },
-    compoundVariants: [
-        {
-            variant: "fill",
-            isSelected: false,
-            isActive: false,
-            className: "ui:bg-gray-50 ui:text-gray-500",
-        },
-        {
-            variant: "fill",
-            isSelected: true,
-            isActive: false,
-            className: "ui:bg-blue-50 ui:text-blue-700",
-        },
-        {
-            variant: "fill",
-            isSelected: false,
-            isActive: true,
-            className: "ui:bg-gray-100 ui:text-gray-600",
-        },
-        {
-            variant: "fill",
-            isSelected: true,
-            isActive: true,
-            className: "ui:bg-blue-100 ui:text-blue-800",
-        },
-        {
-            variant: "fill",
-            isSelected: true,
-            isActive: false,
-            disabled: true,
-            className: "ui:bg-blue-50 ui:text-blue-300",
-        },
-        {
-            variant: "fill",
-            isSelected: false,
-            isActive: false,
-            disabled: true,
-            className: "ui:bg-gray-50 ui:text-gray-300",
-        },
-        {
-            variant: "line",
-            isSelected: false,
-            isActive: false,
-            className: "ui:border ui:border-gray-100 ui:text-gray-500 ui:bg-white",
-        },
-        {
-            variant: "line",
-            isSelected: false,
-            isActive: true,
-            className: "ui:border ui:border-gray-200 ui:text-gray-700 ui:bg-gray-100",
-        },
-        {
-            variant: "line",
-            isSelected: true,
-            isActive: false,
-            className: "ui:text-white ui:bg-gray-700",
-        },
-        {
-            variant: "line",
-            isSelected: true,
-            isActive: true,
-            className: "ui:text-gray-200 ui:bg-gray-800",
-        },
-        {
-            variant: "text",
-            isSelected: false,
-            isActive: false,
-            className: "ui:text-gray-500 ui:bg-white",
-        },
-        {
-            variant: "text",
-            isSelected: true,
-            isActive: false,
-            className: "ui:text-gray-700 ui:bg-gray-100",
-        },
-        {
-            variant: "text",
-            isSelected: false,
-            isActive: true,
-            className: "ui:text-gray-600 ui:bg-gray-50",
-        },
-        {
-            variant: "text",
-            isSelected: true,
-            isActive: true,
-            className: "ui:text-gray-800 ui:bg-gray-200",
-        },
-    ],
-    defaultVariants: {
-        variant: "fill",
-        size: "large",
-        isSelected: false,
-        isActive: false,
-        disabled: false,
-    },
-});
+const Chip_styles_1 = require("./Chip.styles");
+/**
+ * `Chip`: 정보 요약과 화면의 복잡성을 줄이는 데 사용되며, 카테고리를 분류해 특정 정보를 시각적으로 표현합니다.
+ * @see [RDS Storybook: Chip](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-chip--docs)
+ * @example
+ * ```tsx
+ * <Chip size="large" variant="fill" isSelected>Text</Chip>
+ * <Chip size="medium" variant="line" isActive leftContent={<Icon />}>Text</Chip>
+ * <Chip as={Link} href="/link">Text</Chip>
+ * ```
+ */
 function Chip({ className, as, children, variant, size, disabled, isSelected, isActive, leftContent, rightContent, ...props }) {
     const Component = as || "button";
-    return ((0, jsx_runtime_1.jsxs)(Component, { className: (0, style_1.cn)(chipVariants({
+    return ((0, jsx_runtime_1.jsxs)(Component, { className: (0, style_1.cn)((0, Chip_styles_1.chipVariants)({
             variant,
             disabled,
             isSelected,

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

@@ -0,0 +1,8 @@
+export declare const chipVariants: (props?: ({
+    variant?: "fill" | "text" | "line" | null | undefined;
+    size?: "small" | "large" | "medium" | null | undefined;
+    disabled?: boolean | null | undefined;
+    isSelected?: boolean | null | undefined;
+    isActive?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=Chip.styles.d.ts.map

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

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

package/dist/components/Chip/Chip.styles.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chipVariants = void 0;
+const class_variance_authority_1 = require("class-variance-authority");
+exports.chipVariants = (0, class_variance_authority_1.cva)("ui:flex ui:items-center ui:justify-center ui:gap-1 ui:select-none", {
+    variants: {
+        variant: {
+            fill: "ui:transition-colors ui:duration-300 ui:rounded-full",
+            line: "ui:transition-colors ui:duration-100 ui:rounded-full",
+            text: "ui:rounded-[8px]",
+        },
+        size: {
+            large: "ui:text-button2 ui:h-[38px] ui:px-[18px] ui:py-[9px]",
+            medium: "ui:text-button3 ui:h-[32px] ui:px-[14px] ui:py-[7px]",
+            small: "ui:text-button3 ui:h-[26px] ui:px-[10px] ui:py-[4.5px]",
+        },
+        disabled: {
+            true: "ui:pointer-events-none",
+            false: "ui:cursor-pointer",
+        },
+        isSelected: {
+            true: "",
+            false: "",
+        },
+        isActive: {
+            true: "",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            variant: "fill",
+            isSelected: false,
+            isActive: false,
+            className: "ui:bg-gray-50 ui:text-gray-500",
+        },
+        {
+            variant: "fill",
+            isSelected: true,
+            isActive: false,
+            className: "ui:bg-blue-50 ui:text-blue-700",
+        },
+        {
+            variant: "fill",
+            isSelected: false,
+            isActive: true,
+            className: "ui:bg-gray-100 ui:text-gray-600",
+        },
+        {
+            variant: "fill",
+            isSelected: true,
+            isActive: true,
+            className: "ui:bg-blue-100 ui:text-blue-800",
+        },
+        {
+            variant: "fill",
+            isSelected: true,
+            isActive: false,
+            disabled: true,
+            className: "ui:bg-blue-50 ui:text-blue-300",
+        },
+        {
+            variant: "fill",
+            isSelected: false,
+            isActive: false,
+            disabled: true,
+            className: "ui:bg-gray-50 ui:text-gray-300",
+        },
+        {
+            variant: "line",
+            isSelected: false,
+            isActive: false,
+            className: "ui:border ui:border-gray-100 ui:text-gray-500 ui:bg-white",
+        },
+        {
+            variant: "line",
+            isSelected: false,
+            isActive: true,
+            className: "ui:border ui:border-gray-200 ui:text-gray-700 ui:bg-gray-100",
+        },
+        {
+            variant: "line",
+            isSelected: true,
+            isActive: false,
+            className: "ui:text-white ui:bg-gray-700",
+        },
+        {
+            variant: "line",
+            isSelected: true,
+            isActive: true,
+            className: "ui:text-gray-200 ui:bg-gray-800",
+        },
+        {
+            variant: "text",
+            isSelected: false,
+            isActive: false,
+            className: "ui:text-gray-500 ui:bg-white",
+        },
+        {
+            variant: "text",
+            isSelected: true,
+            isActive: false,
+            className: "ui:text-gray-700 ui:bg-gray-100",
+        },
+        {
+            variant: "text",
+            isSelected: false,
+            isActive: true,
+            className: "ui:text-gray-600 ui:bg-gray-50",
+        },
+        {
+            variant: "text",
+            isSelected: true,
+            isActive: true,
+            className: "ui:text-gray-800 ui:bg-gray-200",
+        },
+    ],
+    defaultVariants: {
+        variant: "fill",
+        size: "large",
+        isSelected: false,
+        isActive: false,
+        disabled: false,
+    },
+});

package/dist/components/Icons/Icon.stories.d.ts

@@ -10,6 +10,14 @@ declare const meta: {
         height?: number;
         className?: string;
     }) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
     args: {
         width: number;
         height: number;

package/dist/components/Icons/Icon.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/Icon.stories.tsx"],"names":[],"mappings":"AA0KA,eAAO,MAAM,IAAI,GAAI,+BAIlB;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,4CAuBA,CAAC;AAEF,QAAA,MAAM,IAAI;;+CA7BP;QACD,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB;;;;;;;;;;;;;;;;;;;;;;;CAsC4B,CAAC;AAE9B,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Icon.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/Icon.stories.tsx"],"names":[],"mappings":"AA0KA,eAAO,MAAM,IAAI,GAAI,+BAIlB;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,4CAuBA,CAAC;AAEF,QAAA,MAAM,IAAI;;+CA7BP;QACD,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgD4B,CAAC;AAE9B,eAAe,IAAI,CAAC"}

package/dist/components/Icons/Icon.stories.js

@@ -186,6 +186,16 @@ exports.Icon = Icon;
 const meta = {
     title: "Components/Icons",
     component: exports.Icon,
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            description: {
+                component: `
+아이콘의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+`,
+            },
+        },
+    },
     args: {
         width: 24,
         height: 24,

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

@@ -1,9 +1,18 @@
 import type { SVGProps } from "react";
 interface Props extends SVGProps<SVGSVGElement> {
-    className?: string;
+    className: string;
     width?: number;
     height?: number;
 }
+/**
+ * `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" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
 declare function IconAlarmOff({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconAlarmOff;
 //# sourceMappingURL=IconAlarmOff.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconAlarmOff.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconAlarmOff.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,KAAU,EAAE,MAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CA0B5E;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"IconAlarmOff.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconAlarmOff.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;;;;;;;;GAQG;AACH,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,KAAU,EAAE,MAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CA0B5E;AAED,eAAe,YAAY,CAAC"}