@lotte-innovate/ui-component-test 0.0.7 → 0.0.9

package/dist/stories/checkbox/CheckboxGroup.stories.js

@@ -0,0 +1,72 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { commonArgTypes, appearanceOptions, sizeOptions } from '../../../src/constants';
+import { CheckboxGroupItem, CheckboxGroup } from 'components/CheckboxGroup';
+var meta = {
+    title: 'Component/CheckboxGroup',
+    component: CheckboxGroupItem,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: '여러 체크박스를 그룹화하여 관련된 옵션을 함께 관리할 수 있는 컴포넌트',
+            },
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        size: __assign(__assign({}, commonArgTypes.size), { table: {
+                category: 'Props',
+                type: {
+                    summary: sizeOptions
+                        .filter(function (option) { return option !== 'x-small' && option !== 'x-large'; })
+                        .join(' | '),
+                },
+            }, options: sizeOptions.filter(function (option) { return option !== 'x-small' && option !== 'x-large'; }), description: '체크박스 크기' }),
+        radius: __assign(__assign({}, commonArgTypes.radius), { description: '체크박스 둥글기' }),
+        color: __assign(__assign({}, commonArgTypes.color), { description: '체크박스 메인 색' }),
+        appearance: __assign(__assign({}, commonArgTypes.appearance), { description: '체크박스 스타일', table: {
+                category: 'Props',
+                type: {
+                    summary: appearanceOptions
+                        .filter(function (option) { return option !== 'ghost' && option !== 'outline' && option !== 'solid'; })
+                        .join(' | '),
+                },
+            }, options: appearanceOptions.filter(function (option) { return option !== 'ghost' && option !== 'outline' && option !== 'solid'; }) }),
+    },
+    args: {},
+};
+export default meta;
+export var Default = function (_a) {
+    var args = __rest(_a, []);
+    return (_jsxs(CheckboxGroup, { defaultValue: ['apple'], children: [_jsx(CheckboxGroupItem, __assign({ id: 'apple' }, args, { children: "\uC0AC\uACFC\uD83C\uDF4E" })), _jsx(CheckboxGroupItem, __assign({ id: 'orange' }, args, { children: "\uC624\uB80C\uC9C0\uD83C\uDF4A" })), _jsx(CheckboxGroupItem, __assign({ id: 'banana' }, args, { children: "\uBC14\uB098\uB098\uD83C\uDF4C" }))] }));
+};
+export var Size = function (_a) {
+    var args = __rest(_a, []);
+    return (_jsxs("div", { className: "flex flex-col space-y-6", children: [_jsxs(CheckboxGroup, { size: 'small', defaultValue: ['size-s1'], children: [_jsx(CheckboxGroupItem, __assign({ id: "size-s1" }, args, { children: "Agree to Terms and Conditions" })), _jsx(CheckboxGroupItem, __assign({ id: "size-s2" }, args, { children: "Agree to Privacy Policy" }))] }), _jsxs(CheckboxGroup, { size: 'medium', defaultValue: ['size-m1'], children: [_jsx(CheckboxGroupItem, __assign({ id: "size-m1" }, args, { children: "Agree to Terms and Conditions" })), _jsx(CheckboxGroupItem, __assign({ id: "size-m2" }, args, { children: "Agree to Privacy Policy" }))] }), _jsxs(CheckboxGroup, { size: 'large', defaultValue: ['size-l1'], children: [_jsx(CheckboxGroupItem, __assign({ id: "size-l1" }, args, { children: "Agree to Terms and Conditions" })), _jsx(CheckboxGroupItem, __assign({ id: "size-l2" }, args, { children: "Agree to Privacy Policy" }))] })] }));
+};
+export var Radius = function (_a) {
+    var args = __rest(_a, []);
+    return (_jsxs("div", { className: "flex flex-col space-y-6", children: [_jsxs(CheckboxGroup, { defaultValue: ['radius-none-1'], radius: 'none', children: [_jsx(CheckboxGroupItem, __assign({ id: "radius-none-1" }, args, { children: "\uCCB4\uD06C\uBC15\uC2A41" })), _jsx(CheckboxGroupItem, __assign({ id: "radius-none-2" }, args, { children: "\uCCB4\uD06C\uBC15\uC2A42" }))] }), _jsxs(CheckboxGroup, { defaultValue: ['radius-small-1'], radius: 'small', children: [_jsx(CheckboxGroupItem, __assign({ id: "radius-small-1" }, args, { children: "\uCCB4\uD06C\uBC15\uC2A41" })), _jsx(CheckboxGroupItem, __assign({ id: "radius-small-2" }, args, { children: "\uCCB4\uD06C\uBC15\uC2A42" }))] }), _jsxs(CheckboxGroup, { defaultValue: ['radius-medium-1'], radius: 'medium', children: [_jsx(CheckboxGroupItem, __assign({ id: "radius-medium-1" }, args, { children: "\uCCB4\uD06C\uBC15\uC2A41" })), _jsx(CheckboxGroupItem, __assign({ id: "radius-medium-2" }, args, { children: "\uCCB4\uD06C\uBC15\uC2A42" }))] }), _jsxs(CheckboxGroup, { defaultValue: ['radius-large-1'], radius: 'large', children: [_jsx(CheckboxGroupItem, __assign({ id: "radius-large-1" }, args, { children: "\uCCB4\uD06C\uBC15\uC2A41" })), _jsx(CheckboxGroupItem, __assign({ id: "radius-large-2" }, args, { children: "\uCCB4\uD06C\uBC15\uC2A42" }))] })] }));
+};

package/dist/stories/context-menu/ContextMenu.stories.d.ts

@@ -0,0 +1,113 @@
+/// <reference types="react" />
+import { IRadius } from 'types';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("@radix-ui/react-context-menu").ContextMenuProps & import("components/ContextMenu").ContextMenuProps & import("react").RefAttributes<never>>;
+    parameters: {
+        layout: string;
+        themes: {
+            themeOverride: string;
+        };
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        radius: {
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
+            options: IRadius[];
+            control: {
+                type: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+        scaling: {
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+            options: import("types").IScaling[];
+            defaultValue: {
+                summary: string;
+            };
+        };
+        size: {
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
+            options: import("types").ISize[];
+            description: string;
+            control: {
+                type: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+        color: {
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
+            options: import("types").IColor[];
+            control: {
+                type: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+        appearance: {
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
+            options: import("types").IAppearance[];
+            control: {
+                type: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
+};
+export default meta;
+export declare const Default: ({ ...args }: {
+    [x: string]: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Radius: ({ ...args }: {
+    [x: string]: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Size: ({ ...args }: {
+    [x: string]: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Appearance: ({ ...args }: {
+    [x: string]: any;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/context-menu/ContextMenu.stories.js

@@ -0,0 +1,86 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { radiusOptions, commonArgTypes, sizeOptions, appearanceOptions } from '../../constants';
+import { ContextMenuContent, ContextMenu, ContextMenuTrigger, ContextMenuLabel, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuGroup, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSubTrigger, ContextMenuSubContent, } from 'components/ContextMenu';
+import { Text } from 'Typography/Text';
+var meta = {
+    title: 'Component/ContextMenu',
+    component: ContextMenu,
+    parameters: {
+        layout: 'centered',
+        themes: {
+            themeOverride: 'dark',
+        },
+        docs: {
+            description: {
+                component: '우클릭 또는 특정 인터랙션 시 나타나는 컨텍스트 메뉴 컴포넌트',
+            },
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        radius: __assign(__assign({}, commonArgTypes.radius), { description: 'ContextMenu 둥굴기' }),
+        scaling: __assign(__assign({}, commonArgTypes.scaling), { description: 'ContextMenu 비율' }),
+        size: __assign(__assign({}, commonArgTypes.size), { table: {
+                category: 'Props',
+                type: {
+                    summary: sizeOptions
+                        .filter(function (option) { return option === 'small' || option === 'medium'; })
+                        .join(' | '),
+                },
+            }, options: sizeOptions.filter(function (option) { return option === 'small' || option === 'medium'; }), description: 'Menubar 크기' }),
+        color: __assign(__assign({}, commonArgTypes.color), { description: 'Menubar 메인 색' }),
+        appearance: {
+            description: 'MenubarItem 스타일',
+            table: {
+                category: 'Props',
+                type: {
+                    summary: appearanceOptions
+                        .filter(function (option) { return option === 'solid' || option === 'soft'; })
+                        .join(' | '),
+                },
+            },
+            options: appearanceOptions.filter(function (option) { return option === 'solid' || option === 'soft'; }),
+            control: { type: 'select' },
+            defaultValue: { summary: 'solid' },
+        },
+    },
+};
+export default meta;
+export var Default = function (_a) {
+    var args = __rest(_a, []);
+    return (_jsxs(ContextMenu, __assign({}, args, { children: [_jsx(ContextMenuTrigger, { children: _jsx(Text, { children: "Right-click here." }) }), _jsxs(ContextMenuContent, { children: [_jsx(ContextMenuLabel, { children: "\uB77C\uBCA8" }), _jsx(ContextMenuItem, { shortcut: "\u2318 T", children: "\uAE30\uBCF8 \uC544\uC774\uD15C" }), _jsx(ContextMenuItem, { disabled: true, children: "\uC0AC\uC6A9\uBD88\uAC00 \uC544\uC774\uD15C" }), _jsx(ContextMenuSeparator, {}), _jsxs(ContextMenuGroup, { children: [_jsx(ContextMenuItem, { children: "\uADF8\uB8F9 \uC544\uC774\uD15C1" }), _jsx(ContextMenuItem, { children: "\uADF8\uB8F9 \uC544\uC774\uD15C2" })] }), _jsx(ContextMenuSeparator, {}), _jsx(ContextMenuCheckboxItem, { checked: true, children: "checked \uC544\uC774\uD15C" }), _jsx(ContextMenuCheckboxItem, { checked: false, children: "unchecked \uC544\uC774\uD15C" }), _jsx(ContextMenuSeparator, {}), _jsxs(ContextMenuRadioGroup, { value: 'apple', children: [_jsx(ContextMenuRadioItem, { value: 'apple', children: "\uB77C\uB514\uC624 \uC544\uC774\uD15C1" }), _jsx(ContextMenuRadioItem, { value: 'banana', children: "\uB77C\uB514\uC624 \uC544\uC774\uD15C2" })] }), _jsx(ContextMenuSeparator, {}), _jsxs(ContextMenuSubTrigger, { children: ["More Menu", ' ', _jsxs(ContextMenuSubContent, { children: [_jsx(ContextMenuItem, { children: "\uC11C\uBE0C \uC544\uC774\uD15C1" }), _jsx(ContextMenuItem, { children: "\uC11C\uBE0C \uC544\uC774\uD15C2" })] })] })] })] })));
+};
+export var Radius = function (_a) {
+    var args = __rest(_a, []);
+    return (_jsx("div", { className: "flex space-x-2", children: radiusOptions.map(function (radius) { return (_jsxs(ContextMenu, __assign({ radius: radius }, args, { children: [_jsx(ContextMenuTrigger, { className: "w-[100px]", children: radius }), _jsxs(ContextMenuContent, { children: [_jsx(ContextMenuItem, { children: "\uBA54\uB2741" }), _jsx(ContextMenuItem, { children: "\uBA54\uB2742" })] })] }), radius)); }) }));
+};
+export var Size = function (_a) {
+    var args = __rest(_a, []);
+    return (_jsxs("div", { className: "flex space-x-2", children: [_jsxs(ContextMenu, __assign({ size: 'small' }, args, { children: [_jsx(ContextMenuTrigger, { className: "w-[100px]", children: "small" }), _jsxs(ContextMenuContent, { children: [_jsx(ContextMenuItem, { children: "\uBA54\uB2741" }), _jsx(ContextMenuItem, { children: "\uBA54\uB2742" })] })] })), _jsxs(ContextMenu, __assign({ size: 'medium' }, args, { children: [_jsx(ContextMenuTrigger, { className: "w-[100px]", children: "medium" }), _jsxs(ContextMenuContent, { children: [_jsx(ContextMenuItem, { children: "\uBA54\uB2741" }), _jsx(ContextMenuItem, { children: "\uBA54\uB2742" })] })] }))] }));
+};
+export var Appearance = function (_a) {
+    var args = __rest(_a, []);
+    return (_jsxs("div", { className: "flex space-x-2", children: [_jsxs(ContextMenu, __assign({ appearance: 'solid' }, args, { children: [_jsx(ContextMenuTrigger, { className: "w-[100px]", children: "solid" }), _jsxs(ContextMenuContent, { children: [_jsx(ContextMenuItem, { children: "\uBA54\uB2741" }), _jsx(ContextMenuItem, { children: "\uBA54\uB2742" })] })] })), _jsxs(ContextMenu, __assign({ appearance: 'soft' }, args, { children: [_jsx(ContextMenuTrigger, { className: "w-[100px]", children: "soft" }), _jsxs(ContextMenuContent, { children: [_jsx(ContextMenuItem, { children: "\uBA54\uB2741" }), _jsx(ContextMenuItem, { children: "\uBA54\uB2742" })] })] }))] }));
+};

package/dist/stories/data-list/DataList.stories.d.ts

@@ -0,0 +1,97 @@
+/// <reference types="react" />
+import { IScaling } from 'types';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/themes/dist/cjs/components/data-list").RootProps & import("react").RefAttributes<HTMLDListElement>, "ref"> & import("components/DataList").DataListProps & import("react").RefAttributes<HTMLDListElement>>;
+    parameters: {
+        layout: string;
+        themes: {
+            themeOverride: string;
+        };
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        scaling: {
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+            options: IScaling[];
+            defaultValue: {
+                summary: string;
+            };
+        };
+        size: {
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
+            options: import("types").ISize[];
+            description: string;
+            control: {
+                type: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+        color: {
+            description: string;
+            defaultValue: {
+                summary: string;
+            };
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
+            options: import("types").IColor[];
+            control: {
+                type: string;
+            };
+        };
+        orientation: {
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
+            options: string[];
+            control: {
+                type: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+            description: string;
+        };
+    };
+};
+export default meta;
+export declare const Default: ({ ...args }: {
+    [x: string]: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Orientation: ({ ...args }: {
+    [x: string]: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Scaling: ({ ...args }: {
+    [x: string]: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Size: ({ ...args }: {
+    [x: string]: any;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/data-list/DataList.stories.js

@@ -0,0 +1,87 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DataList, DataListItem, DataListLabel, DataListValue } from 'components/DataList';
+import Badge from 'components/Badge';
+import { scalingOptions, commonArgTypes, sizeOptions } from '../../constants';
+import Button from 'components/Button';
+var meta = {
+    title: 'Component/DataList',
+    component: DataList,
+    parameters: {
+        layout: 'centered',
+        themes: {
+            themeOverride: 'dark',
+        },
+        docs: {
+            description: {
+                component: '목록 형태로 메타 데이터 표시하는 컴포넌트',
+            },
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        scaling: __assign(__assign({}, commonArgTypes.scaling), { description: 'DataList 비율' }),
+        size: __assign(__assign({}, commonArgTypes.size), { table: {
+                category: 'Props',
+                type: {
+                    summary: sizeOptions
+                        .filter(function (option) { return option !== 'x-small' && option !== 'x-large'; })
+                        .join(' | '),
+                },
+            }, options: sizeOptions.filter(function (option) { return option !== 'x-small' && option !== 'x-large'; }), description: 'DataList 크기' }),
+        color: __assign(__assign({}, commonArgTypes.color), { description: 'DataList 값 매인색', defaultValue: { summary: 'black' } }),
+        orientation: {
+            table: {
+                category: 'Props',
+                type: {
+                    summary: ['horizontal', 'vertical'].join(' | '),
+                },
+            },
+            options: ['horizontal', 'vertical'],
+            control: { type: 'select' },
+            defaultValue: { summary: 'horizontal' },
+            description: 'DataList 방향',
+        },
+    },
+};
+export default meta;
+export var Default = function (_a) {
+    var args = __rest(_a, []);
+    return (_jsxs(DataList, __assign({}, args, { children: [_jsxs(DataListItem, __assign({}, args, { children: [_jsx(DataListLabel, __assign({}, args, { children: "\uC0C1\uD0DC" })), _jsx(DataListValue, __assign({}, args, { children: _jsx(Badge, __assign({ appearance: "soft" }, args, { children: "\uBC30\uC9C0" })) }))] })), _jsxs(DataListItem, __assign({}, args, { children: [_jsx(DataListLabel, __assign({}, args, { children: "\uB77C\uBCA8" })), _jsx(DataListValue, __assign({}, args, { children: "\uD14D\uC2A4\uD2B8\uAC00 \uAE38\uC5B4\uC9C8 \uACBD\uC6B0 \uC904\uBC14\uAFC8\uC73C\uB85C \uCC98\uB9AC\uB429\uB2C8\uB2E4.\uD14D\uC2A4\uD2B8\uAC00 \uAE38\uC5B4\uC9C8 \uACBD\uC6B0 \uC904\uBC14\uAFC8\uC73C\uB85C \uCC98\uB9AC\uB429\uB2C8\uB2E4." }))] })), _jsxs(DataListItem, __assign({}, args, { children: [_jsx(DataListLabel, __assign({}, args, { children: "\uB77C\uBCA8" })), _jsx(DataListValue, __assign({}, args, { children: _jsx(Button, __assign({}, args, { children: "\uBC84\uD2BC" })) }))] }))] })));
+};
+export var Orientation = function (_a) {
+    var args = __rest(_a, []);
+    return (_jsxs(DataList, __assign({}, args, { orientation: 'vertical', children: [_jsxs(DataListItem, __assign({}, args, { children: [_jsx(DataListLabel, __assign({}, args, { children: "\uC0C1\uD0DC" })), _jsx(DataListValue, __assign({}, args, { children: _jsx(Badge, __assign({ appearance: "soft" }, args, { children: "\uBC30\uC9C0" })) }))] })), _jsxs(DataListItem, __assign({}, args, { children: [_jsx(DataListLabel, __assign({}, args, { children: "\uB77C\uBCA8" })), _jsx(DataListValue, __assign({}, args, { children: "\uD14D\uC2A4\uD2B8\uAC00 \uAE38\uC5B4\uC9C8 \uACBD\uC6B0 \uC904\uBC14\uAFC8\uC73C\uB85C \uCC98\uB9AC\uB429\uB2C8\uB2E4.\uD14D\uC2A4\uD2B8\uAC00 \uAE38\uC5B4\uC9C8 \uACBD\uC6B0 \uC904\uBC14\uAFC8\uC73C\uB85C \uCC98\uB9AC\uB429\uB2C8\uB2E4." }))] })), _jsxs(DataListItem, __assign({}, args, { children: [_jsx(DataListLabel, __assign({}, args, { children: "\uB77C\uBCA8" })), _jsx(DataListValue, __assign({}, args, { children: _jsx(Button, __assign({}, args, { children: "\uBC84\uD2BC" })) }))] }))] })));
+};
+export var Scaling = function (_a) {
+    var args = __rest(_a, []);
+    return (_jsx("div", { className: "flex flex-col space-y-7", children: scalingOptions.map(function (scaling) { return (_createElement(DataList, __assign({}, args, { key: scaling, scaling: scaling }),
+            _jsxs(DataListItem, __assign({}, args, { children: [_jsx(DataListLabel, __assign({}, args, { children: scaling })), _jsx(DataListValue, __assign({}, args, { children: "\uD14D\uC2A4\uD2B8\uAC00 \uAE38\uC5B4\uC9C8 \uACBD\uC6B0 \uC904\uBC14\uAFC8\uC73C\uB85C \uCC98\uB9AC\uB429\uB2C8\uB2E4.\uD14D\uC2A4\uD2B8\uAC00 \uAE38\uC5B4\uC9C8 \uACBD\uC6B0 \uC904\uBC14\uAFC8\uC73C\uB85C \uCC98\uB9AC\uB429\uB2C8\uB2E4." }))] })),
+            _jsxs(DataListItem, __assign({}, args, { children: [_jsx(DataListLabel, __assign({}, args, { children: scaling })), _jsx(DataListValue, __assign({}, args, { children: "\uD14D\uC2A4\uD2B8\uAC00 \uAE38\uC5B4\uC9C8 \uACBD\uC6B0 \uC904\uBC14\uAFC8\uC73C\uB85C \uCC98\uB9AC\uB429\uB2C8\uB2E4.\uD14D\uC2A4\uD2B8\uAC00 \uAE38\uC5B4\uC9C8 \uACBD\uC6B0 \uC904\uBC14\uAFC8\uC73C\uB85C \uCC98\uB9AC\uB429\uB2C8\uB2E4." }))] })))); }) }));
+};
+export var Size = function (_a) {
+    var args = __rest(_a, []);
+    return (_jsxs("div", { className: "flex flex-col space-y-7", children: [_jsxs(DataList, { size: 'small', children: [_jsxs(DataListItem, __assign({}, args, { children: [_jsx(DataListLabel, __assign({}, args, { children: "small" })), _jsx(DataListValue, __assign({}, args, { children: "\uD14D\uC2A4\uD2B8\uAC00 \uAE38\uC5B4\uC9C8 \uACBD\uC6B0 \uC904\uBC14\uAFC8\uC73C\uB85C \uCC98\uB9AC\uB429\uB2C8\uB2E4.\uD14D\uC2A4\uD2B8\uAC00 \uAE38\uC5B4\uC9C8 \uACBD\uC6B0 \uC904\uBC14\uAFC8\uC73C\uB85C \uCC98\uB9AC\uB429\uB2C8\uB2E4." }))] })), _jsxs(DataListItem, __assign({}, args, { children: [_jsx(DataListLabel, __assign({}, args, { children: "small" })), _jsx(DataListValue, __assign({}, args, { children: "\uD14D\uC2A4\uD2B8\uAC00 \uAE38\uC5B4\uC9C8 \uACBD\uC6B0 \uC904\uBC14\uAFC8\uC73C\uB85C \uCC98\uB9AC\uB429\uB2C8\uB2E4.\uD14D\uC2A4\uD2B8\uAC00 \uAE38\uC5B4\uC9C8 \uACBD\uC6B0 \uC904\uBC14\uAFC8\uC73C\uB85C \uCC98\uB9AC\uB429\uB2C8\uB2E4." }))] }))] }), _jsxs(DataList, { size: 'medium', children: [_jsxs(DataListItem, __assign({}, args, { children: [_jsx(DataListLabel, __assign({}, args, { children: "medium" })), _jsx(DataListValue, __assign({}, args, { children: "\uD14D\uC2A4\uD2B8\uAC00 \uAE38\uC5B4\uC9C8 \uACBD\uC6B0 \uC904\uBC14\uAFC8\uC73C\uB85C \uCC98\uB9AC\uB429\uB2C8\uB2E4.\uD14D\uC2A4\uD2B8\uAC00 \uAE38\uC5B4\uC9C8 \uACBD\uC6B0 \uC904\uBC14\uAFC8\uC73C\uB85C \uCC98\uB9AC\uB429\uB2C8\uB2E4." }))] })), _jsxs(DataListItem, __assign({}, args, { children: [_jsx(DataListLabel, __assign({}, args, { children: "medium" })), _jsx(DataListValue, __assign({}, args, { children: "\uD14D\uC2A4\uD2B8\uAC00 \uAE38\uC5B4\uC9C8 \uACBD\uC6B0 \uC904\uBC14\uAFC8\uC73C\uB85C \uCC98\uB9AC\uB429\uB2C8\uB2E4.\uD14D\uC2A4\uD2B8\uAC00 \uAE38\uC5B4\uC9C8 \uACBD\uC6B0 \uC904\uBC14\uAFC8\uC73C\uB85C \uCC98\uB9AC\uB429\uB2C8\uB2E4." }))] }))] }), _jsxs(DataList, { size: 'large', children: [_jsxs(DataListItem, __assign({}, args, { children: [_jsx(DataListLabel, __assign({}, args, { children: "large" })), _jsx(DataListValue, __assign({}, args, { children: "\uD14D\uC2A4\uD2B8\uAC00 \uAE38\uC5B4\uC9C8 \uACBD\uC6B0 \uC904\uBC14\uAFC8\uC73C\uB85C \uCC98\uB9AC\uB429\uB2C8\uB2E4.\uD14D\uC2A4\uD2B8\uAC00 \uAE38\uC5B4\uC9C8 \uACBD\uC6B0 \uC904\uBC14\uAFC8\uC73C\uB85C \uCC98\uB9AC\uB429\uB2C8\uB2E4." }))] })), _jsxs(DataListItem, __assign({}, args, { children: [_jsx(DataListLabel, __assign({}, args, { children: "large" })), _jsx(DataListValue, __assign({}, args, { children: "\uD14D\uC2A4\uD2B8\uAC00 \uAE38\uC5B4\uC9C8 \uACBD\uC6B0 \uC904\uBC14\uAFC8\uC73C\uB85C \uCC98\uB9AC\uB429\uB2C8\uB2E4.\uD14D\uC2A4\uD2B8\uAC00 \uAE38\uC5B4\uC9C8 \uACBD\uC6B0 \uC904\uBC14\uAFC8\uC73C\uB85C \uCC98\uB9AC\uB429\uB2C8\uB2E4." }))] }))] })] }));
+};

package/dist/{components/Input/Input.stories.d.ts → stories/dialog/Dialog.stories.d.ts}

@@ -1,17 +1,14 @@
 /// <reference types="react" />
-import type { StoryObj } from '@storybook/react';
-import { InputProps } from './index';
-import { IRadius, IScaling, IWeight } from '../../types';
+import { ISize } from '../../types';
 declare const meta: {
     title: string;
-    component: ({ radius, scaling, weight, color, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
+    component: import("react").ForwardRefExoticComponent<import("@radix-ui/themes/dist/cjs/components/dialog").RootProps & import("../../components/Dialog/index").DialogProps & import("react").RefAttributes<never>>;
     parameters: {
         layout: string;
         themes: {
             themeOverride: string;
         };
         docs: {
-            page: null;
             description: {
                 component: string;
             };
@@ -20,58 +17,72 @@ declare const meta: {
     tags: string[];
     argTypes: {
         radius: {
-            options: IRadius[];
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
+            options: import("../../types").IRadius[];
             control: {
                 type: string;
             };
-            description: string;
             defaultValue: {
                 summary: string;
             };
         };
-        scaling: {
-            options: IScaling[];
+        size: {
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
+            options: ISize[];
+            description: string;
             control: {
                 type: string;
             };
-            description: string;
             defaultValue: {
                 summary: string;
             };
         };
-        weight: {
-            options: IWeight[];
+        scaling: {
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
             control: {
                 type: string;
             };
-            description: string;
+            options: import("../../types").IScaling[];
             defaultValue: {
                 summary: string;
             };
         };
-        onChange: {
+        color: {
+            description: string;
             table: {
                 category: string;
+                type: {
+                    summary: string;
+                };
             };
-        };
-        color: {
             options: import("../../types").IColor[];
-            description: string;
-            defaultValue: {
-                summary: string;
-            };
             control: {
                 type: string;
             };
+            defaultValue: {
+                summary: string;
+            };
         };
     };
-    args: {
-        onClick: import("@vitest/spy").Mock<[event: import("react").MouseEvent<HTMLInputElement, MouseEvent>], void>;
-    };
 };
 export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-export declare const Radius: (args: InputProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Scaling: (args: InputProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Weight: (args: InputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Default: ({ ...args }: {
+    [x: string]: any;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/dialog/Dialog.stories.js

@@ -0,0 +1,59 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { commonArgTypes, sizeOptions } from '../../constants';
+import { Dialog, DialogTrigger, DialogContent, DialogCancel, DialogTitle, DialogDescription, DialogSlot, DialogAction, } from '../../components/Dialog/index';
+import Button from 'components/Button';
+import { TextField } from 'components/TextField';
+var meta = {
+    title: 'Component/Dialog',
+    component: Dialog,
+    parameters: {
+        layout: 'centered',
+        themes: {
+            themeOverride: 'dark',
+        },
+        docs: {
+            description: {
+                component: '사용자에게 결정을 내리거나 추가 정보를 입력하라는 프롬프트를 보내는 작은 창',
+            },
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        radius: __assign(__assign({}, commonArgTypes.radius), { description: 'dialog 둥글기' }),
+        size: __assign(__assign({}, commonArgTypes.size), { table: {
+                category: 'Props',
+                type: {
+                    summary: sizeOptions.filter(function (size) { return !['x-small'].includes(size); }).join(' | '),
+                },
+            }, options: sizeOptions.filter(function (size) { return !['x-small'].includes(size); }), description: 'dialog 크기' }),
+        scaling: __assign(__assign({}, commonArgTypes.scaling), { description: 'dialog scaling' }),
+        color: __assign(__assign({}, commonArgTypes.color), { description: 'dialog color' }),
+    },
+};
+export default meta;
+export var Default = function (_a) {
+    var args = __rest(_a, []);
+    return (_jsxs(Dialog, __assign({}, args, { children: [_jsx(DialogTrigger, { children: _jsx(Button, { children: "Edit profile" }) }), _jsxs(DialogContent, __assign({}, args, { children: [_jsx(DialogTitle, __assign({}, args, { children: "Edit profile" })), _jsx(DialogDescription, __assign({}, args, { children: "Make changes to your profile." })), _jsxs(DialogSlot, __assign({}, args, { children: [_jsx("span", { children: "Name" }), _jsx(TextField, __assign({}, args, { placeholder: "Enter your full name" })), _jsx("span", { children: "Email" }), _jsx(TextField, __assign({}, args, { placeholder: "Enter your email" }))] })), _jsxs("div", { className: "flex justify-end", children: [_jsx(DialogCancel, __assign({}, args, { children: _jsx("span", { children: "Cancel" }) })), _jsx(DialogAction, __assign({}, args, { children: _jsx("span", { children: "Save" }) }))] })] }))] })));
+};