@reitwagen/design-components 0.0.11 → 0.2.0

package/dist/components/Button/Button.d.ts

@@ -8,8 +8,7 @@ declare const buttonVariants: (props?: ({
     full?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "color">, VariantProps<typeof buttonVariants> {
-    children: ReactNode;
-    full?: boolean;
+    children?: ReactNode;
     leftContent?: ReactNode;
     rightContent?: ReactNode;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,QAAA,MAAM,cAAc;;;;;;8EAwInB,CAAC;AAEF,UAAU,WACR,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,EACzE,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,OAAO,EACP,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,IAAY,EACZ,GAAG,KAAK,EACT,EAAE,WAAW,2CAqBb;yBAhCe,MAAM"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,QAAA,MAAM,cAAc;;;;;;8EAyInB,CAAC;AAEF,UAAU,WACR,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,EACzE,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,OAAO,EACP,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,WAAW,2CAqBb;yBAhCe,MAAM"}

package/dist/components/Button/Button.js

@@ -24,8 +24,8 @@ const buttonVariants = (0, class_variance_authority_1.cva)("ui:flex ui:items-cen
             small: "ui:text-button3 ui:rounded-[10px] ui:h-[34px] ui:px-[14px] ui:py-[8px]",
         },
         disabled: {
-            false: "ui:cursor-pointer",
             true: "ui:pointer-events-none",
+            false: "ui:cursor-pointer",
         },
         full: {
             true: "ui:flex-1 ui:w-full",
@@ -127,9 +127,10 @@ const buttonVariants = (0, class_variance_authority_1.cva)("ui:flex ui:items-cen
         size: "large",
         variant: "solid",
         disabled: false,
+        full: false,
     },
 });
-function Button({ className, variant, color, size, disabled, children, leftContent, rightContent, full = false, ...props }) {
+function Button({ className, variant, color, size, disabled, children, leftContent, rightContent, full, ...props }) {
     return ((0, jsx_runtime_1.jsxs)("button", { className: (0, style_1.cn)(buttonVariants({
             variant,
             color,

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

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KA6BtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAgCpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KA+BnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAgBnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAsBtB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAsBlB,CAAC"}
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KA6BtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAgCpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KA+BnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAcnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAoBtB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAoBlB,CAAC"}

package/dist/components/Button/Button.stories.js

@@ -111,7 +111,7 @@ exports.Sizes = {
     },
 };
 exports.Solid = {
-    render: (props) => ((0, jsx_runtime_1.jsx)("div", { className: "ui:flex ui:flex-1", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "primary", size: "large", ...props, children: props.children }) })),
+    render: (props) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "primary", size: "large", ...props, children: props.children })),
     args: {
         children: "Button text",
         variant: "solid",
@@ -122,7 +122,7 @@ exports.Solid = {
     },
 };
 exports.Outlined = {
-    render: (props) => ((0, jsx_runtime_1.jsx)("div", { className: "ui:flex ui:flex-1", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "outlined", color: "primary", size: "large", ...props, children: props.children }) })),
+    render: (props) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "outlined", color: "primary", size: "large", ...props, children: props.children })),
     args: {
         children: "Button text",
         variant: "outlined",
@@ -139,7 +139,7 @@ exports.Outlined = {
     },
 };
 exports.Text = {
-    render: (props) => ((0, jsx_runtime_1.jsx)("div", { className: "ui:flex ui:flex-1", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", color: "primary", size: "large", ...props, children: props.children }) })),
+    render: (props) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", color: "primary", size: "large", ...props, children: props.children })),
     args: {
         children: "Button text",
         variant: "text",

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

@@ -0,0 +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;
+    leftContent?: ReactNode;
+    rightContent?: ReactNode;
+};
+type ChipProps<C extends ElementType> = PolymorphicComponentProps<C, ChipOwnProps>;
+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;
+}
+export {};
+//# sourceMappingURL=Chip.d.ts.map

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

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

package/dist/components/Chip/Chip.js

@@ -0,0 +1,139 @@
+"use strict";
+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,
+    },
+});
+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({
+            variant,
+            disabled,
+            isSelected,
+            isActive,
+            size,
+            className,
+        })), disabled: disabled || undefined, ...props, children: [leftContent, (0, jsx_runtime_1.jsx)("span", { children: children }), rightContent] }));
+}
+Chip.displayName = "Chip";

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

@@ -0,0 +1,53 @@
+import type { StoryObj } from "@storybook/react";
+import { Chip } from "./Chip";
+declare const meta: {
+    title: string;
+    component: typeof Chip;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        variant: {
+            control: {
+                type: "radio";
+            };
+            options: string[];
+        };
+        disabled: {
+            control: {
+                type: "boolean";
+            };
+            options: string[];
+        };
+        isSelected: {
+            control: {
+                type: "boolean";
+            };
+            options: string[];
+        };
+        isActive: {
+            control: {
+                type: "boolean";
+            };
+            options: string[];
+        };
+        size: {
+            control: {
+                type: "radio";
+            };
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Variants: Story;
+export declare const Fill: Story;
+export declare const Line: Story;
+export declare const Text: Story;
+//# sourceMappingURL=Chip.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCmB,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KAqCtB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAmBlB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAkBlB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAmBlB,CAAC"}

package/dist/components/Chip/Chip.stories.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text = exports.Line = exports.Fill = exports.Variants = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Chip_1 = require("./Chip");
+const meta = {
+    title: "Components/Chip",
+    component: Chip_1.Chip,
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            description: {
+                component: `
+정보 요약과 화면의 복잡성을 줄이는 데 사용되며, 카테고리를 분류해 특정 정보를 시각적으로 표현합니다.
+
+## <b>Chip guide</b>
+
+카테고리를 설명하는 키워드를 통해 콘텐츠를 분류합니다. 사용자에게 직접 필터링할 수 있는 콘텐츠 구분 기능을 제공합니다.
+`,
+            },
+        },
+    },
+    argTypes: {
+        variant: {
+            control: { type: "radio" },
+            options: ["fill", "line", "text"],
+        },
+        disabled: {
+            control: { type: "boolean" },
+            options: ["true", "false"],
+        },
+        isSelected: {
+            control: { type: "boolean" },
+            options: ["true", "false"],
+        },
+        isActive: {
+            control: { type: "boolean" },
+            options: ["true", "false"],
+        },
+        size: {
+            control: { type: "radio" },
+            options: ["large", "medium", "small"],
+        },
+    },
+};
+exports.default = meta;
+exports.Variants = {
+    parameters: {
+        docs: {
+            description: {
+                story: `
+- Chip의 variant 스타일을 변경하려면 <code>variant</code> 속성을 사용하세요. 사용할 수 있는 값에는 <code>fill</code>, <code>line</code>, <code>text</code> 가 있어요. 기본값은 <code>fill</code> 입니다.
+`,
+            },
+        },
+    },
+    render: (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:flex ui:gap-2", children: [(0, jsx_runtime_1.jsx)(Chip_1.Chip, { variant: "fill", size: "large", ...props, children: props.children }), (0, jsx_runtime_1.jsx)(Chip_1.Chip, { variant: "line", size: "large", ...props, children: props.children }), (0, jsx_runtime_1.jsx)(Chip_1.Chip, { variant: "text", size: "small", ...props, children: props.children })] })),
+    args: {
+        children: "Button text",
+        disabled: false,
+    },
+    argTypes: {
+        isSelected: {
+            control: { type: "boolean" },
+            options: ["true", "false"],
+        },
+        isActive: {
+            control: { type: "boolean" },
+            options: ["true", "false"],
+        },
+    },
+};
+exports.Fill = {
+    render: (props) => ((0, jsx_runtime_1.jsx)(Chip_1.Chip, { variant: "fill", ...props, children: props.children })),
+    args: {
+        children: "Text Field",
+        variant: "fill",
+        disabled: false,
+        isSelected: false,
+        isActive: false,
+    },
+    argTypes: {
+        size: {
+            control: { type: "radio" },
+            options: ["large"],
+        },
+    },
+};
+exports.Line = {
+    render: (props) => ((0, jsx_runtime_1.jsx)(Chip_1.Chip, { variant: "line", ...props, children: props.children })),
+    args: {
+        children: "Text Field",
+        variant: "line",
+        isSelected: false,
+        isActive: false,
+    },
+    argTypes: {
+        size: {
+            control: { type: "radio" },
+            options: ["large", "medium"],
+        },
+    },
+};
+exports.Text = {
+    render: (props) => ((0, jsx_runtime_1.jsx)(Chip_1.Chip, { variant: "text", size: "small", ...props, children: props.children })),
+    args: {
+        children: "Text Field",
+        variant: "text",
+        isSelected: false,
+        isActive: false,
+        size: "small",
+    },
+    argTypes: {
+        size: {
+            control: { type: "radio" },
+            options: ["small"],
+        },
+    },
+};

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

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

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

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

package/dist/components/Chip/index.js

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

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

@@ -0,0 +1,15 @@
+import { ButtonHTMLAttributes } from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const toggleVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+    checked?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface ToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "disabled">, VariantProps<typeof toggleVariants> {
+    onCheckedChange?: (checked: boolean) => void;
+}
+export declare function Toggle({ checked, disabled, onCheckedChange, ...props }: ToggleProps): 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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,QAAA,MAAM,cAAc;;;8EAmCnB,CAAC;AA6BF,UAAU,WACR,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,EAC/D,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,QAAQ,EACR,eAAe,EACf,GAAG,KAAK,EACT,EAAE,WAAW,2CAkBb;yBAvBe,MAAM"}

package/dist/components/Toggle/Toggle.js

@@ -0,0 +1,70 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toggle = Toggle;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const class_variance_authority_1 = require("class-variance-authority");
+const style_1 = require("../../utils/style");
+const toggleVariants = (0, class_variance_authority_1.cva)("ui:ring-0 ui:h-[31px] ui:w-[51px] ui:rounded-full ui:inline-flex ui:items-center ui:rounded-full ui:transition-colors ui:duration-100", {
+    variants: {
+        disabled: {
+            true: "ui:pointer-events-none",
+            false: "ui:cursor-pointer",
+        },
+        checked: {
+            true: "ui:bg-blue-700",
+            false: "ui:bg-gray-100",
+        },
+    },
+    compoundVariants: [
+        {
+            disabled: false,
+            checked: false,
+            className: "ui:active:bg-gray-200",
+        },
+        {
+            disabled: true,
+            checked: false,
+            className: "ui:bg-gray-50",
+        },
+        {
+            disabled: true,
+            checked: true,
+            className: "ui:bg-blue-300",
+        },
+    ],
+    defaultVariants: {
+        disabled: false,
+        checked: false,
+    },
+});
+const thumbVariants = (0, class_variance_authority_1.cva)("ui:bg-white ui:rounded-full ui:transition-transform", {
+    variants: {
+        disabled: {
+            true: "",
+            false: "",
+        },
+        checked: {
+            true: "ui:w-[25px] ui:h-[25px] ui:translate-x-6",
+            false: "ui:w-[21px] ui:h-[21px] ui:translate-x-1",
+        },
+    },
+    compoundVariants: [
+        {
+            disabled: false,
+            checked: false,
+            className: "ui:active:bg-gray-100",
+        },
+    ],
+    defaultVariants: {
+        disabled: false,
+        checked: false,
+    },
+});
+function Toggle({ checked, disabled, onCheckedChange, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("button", { role: "switch", onClick: () => onCheckedChange?.(!checked), "aria-checked": Boolean(checked), className: (0, style_1.cn)(toggleVariants({
+            checked,
+            disabled,
+        })), disabled: disabled || undefined, ...props, children: (0, jsx_runtime_1.jsx)("span", { className: thumbVariants({ checked, disabled }) }) }));
+}
+Toggle.displayName = "Toggle";

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

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

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

@@ -0,0 +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;AAElC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;CAwBqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAanC,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAC"}

package/dist/components/Toggle/Toggle.stories.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Controlled = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const test_1 = require("@storybook/test");
+const Toggle_1 = require("./Toggle");
+const meta = {
+    title: "Components/Toggle",
+    component: Toggle_1.Toggle,
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            description: {
+                component: `
+즉각적인 상태 전환(켜기/끄기)을 위한 요소로, 활성화/비활성화 기능을 나타냅니다.
+
+`,
+            },
+        },
+    },
+    argTypes: {
+        disabled: {
+            control: { type: "boolean" },
+            options: ["true", "false"],
+        },
+        checked: {
+            control: { type: "boolean" },
+            options: ["true", "false"],
+        },
+    },
+};
+exports.default = meta;
+function ToggleWithControlled(props) {
+    const [checked, setChecked] = (0, react_1.useState)(props.checked);
+    return ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { ...props, checked: checked, onCheckedChange: () => setChecked(!checked) }));
+}
+exports.Controlled = {
+    render: (props) => (0, jsx_runtime_1.jsx)(ToggleWithControlled, { ...props }),
+    args: {
+        checked: false,
+        disabled: false,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = (0, test_1.within)(canvasElement);
+        const toggle = canvas.getByRole("switch");
+        await test_1.userEvent.click(toggle);
+    },
+};

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

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

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

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

package/dist/components/Toggle/index.js

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

package/dist/index.css

@@ -14,6 +14,7 @@
     --ui-color-blue-600: #4878ff;
     --ui-color-blue-700: #3052fd;
     --ui-color-blue-800: #0e2dc6;
+    --ui-color-gray-50: #f6f7fa;
     --ui-color-gray-100: #ededf0;
     --ui-color-gray-200: #dedee4;
     --ui-color-gray-300: #bcbcc4;
@@ -276,9 +277,30 @@
   .ui\:grid {
     display: grid;
   }
+  .ui\:inline-flex {
+    display: inline-flex;
+  }
+  .ui\:h-\[21px\] {
+    height: 21px;
+  }
+  .ui\:h-\[25px\] {
+    height: 25px;
+  }
+  .ui\:h-\[26px\] {
+    height: 26px;
+  }
+  .ui\:h-\[31px\] {
+    height: 31px;
+  }
+  .ui\:h-\[32px\] {
+    height: 32px;
+  }
   .ui\:h-\[34px\] {
     height: 34px;
   }
+  .ui\:h-\[38px\] {
+    height: 38px;
+  }
   .ui\:h-\[40px\] {
     height: 40px;
   }
@@ -288,6 +310,15 @@
   .ui\:h-px {
     height: 1px;
   }
+  .ui\:w-\[21px\] {
+    width: 21px;
+  }
+  .ui\:w-\[25px\] {
+    width: 25px;
+  }
+  .ui\:w-\[51px\] {
+    width: 51px;
+  }
   .ui\:w-full {
     width: 100%;
   }
@@ -297,6 +328,14 @@
   .ui\:flex-1 {
     flex: 1;
   }
+  .ui\:translate-x-1 {
+    --tw-translate-x: calc(var(--ui-spacing) * 1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .ui\:translate-x-6 {
+    --tw-translate-x: calc(var(--ui-spacing) * 6);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .ui\:cursor-pointer {
     cursor: pointer;
   }
@@ -315,6 +354,9 @@
   .ui\:justify-center {
     justify-content: center;
   }
+  .ui\:gap-1 {
+    gap: calc(var(--ui-spacing) * 1);
+  }
   .ui\:gap-1\.5 {
     gap: calc(var(--ui-spacing) * 1.5);
   }
@@ -327,6 +369,9 @@
   .ui\:gap-5 {
     gap: calc(var(--ui-spacing) * 5);
   }
+  .ui\:rounded-\[8px\] {
+    border-radius: 8px;
+  }
   .ui\:rounded-\[10px\] {
     border-radius: 10px;
   }
@@ -336,6 +381,9 @@
   .ui\:rounded-\[14px\] {
     border-radius: 14px;
   }
+  .ui\:rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
   .ui\:border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -355,24 +403,48 @@
   .ui\:bg-blue-50 {
     background-color: var(--ui-color-blue-50);
   }
+  .ui\:bg-blue-100 {
+    background-color: var(--ui-color-blue-100);
+  }
   .ui\:bg-blue-300 {
     background-color: var(--ui-color-blue-300);
   }
   .ui\:bg-blue-600 {
     background-color: var(--ui-color-blue-600);
   }
+  .ui\:bg-blue-700 {
+    background-color: var(--ui-color-blue-700);
+  }
+  .ui\:bg-gray-50 {
+    background-color: var(--ui-color-gray-50);
+  }
   .ui\:bg-gray-100 {
     background-color: var(--ui-color-gray-100);
   }
+  .ui\:bg-gray-200 {
+    background-color: var(--ui-color-gray-200);
+  }
   .ui\:bg-gray-400 {
     background-color: var(--ui-color-gray-400);
   }
+  .ui\:bg-gray-700 {
+    background-color: var(--ui-color-gray-700);
+  }
   .ui\:bg-gray-800 {
     background-color: var(--ui-color-gray-800);
   }
+  .ui\:bg-white {
+    background-color: var(--ui-color-white);
+  }
+  .ui\:px-\[10px\] {
+    padding-inline: 10px;
+  }
   .ui\:px-\[14px\] {
     padding-inline: 14px;
   }
+  .ui\:px-\[18px\] {
+    padding-inline: 18px;
+  }
   .ui\:px-\[20px\] {
     padding-inline: 20px;
   }
@@ -382,9 +454,18 @@
   .ui\:py-1 {
     padding-block: calc(var(--ui-spacing) * 1);
   }
+  .ui\:py-\[4\.5px\] {
+    padding-block: 4.5px;
+  }
+  .ui\:py-\[7px\] {
+    padding-block: 7px;
+  }
   .ui\:py-\[8px\] {
     padding-block: 8px;
   }
+  .ui\:py-\[9px\] {
+    padding-block: 9px;
+  }
   .ui\:py-\[10px\] {
     padding-block: 10px;
   }
@@ -526,6 +607,12 @@
   .ui\:text-blue-700 {
     color: var(--ui-color-blue-700);
   }
+  .ui\:text-blue-800 {
+    color: var(--ui-color-blue-800);
+  }
+  .ui\:text-gray-200 {
+    color: var(--ui-color-gray-200);
+  }
   .ui\:text-gray-300 {
     color: var(--ui-color-gray-300);
   }
@@ -538,14 +625,30 @@
   .ui\:text-gray-700 {
     color: var(--ui-color-gray-700);
   }
+  .ui\:text-gray-800 {
+    color: var(--ui-color-gray-800);
+  }
   .ui\:text-white {
     color: var(--ui-color-white);
   }
+  .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);
+  }
   .ui\:transition-colors {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
     transition-timing-function: var(--tw-ease, var(--ui-default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--ui-default-transition-duration));
   }
+  .ui\:transition-transform {
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--ui-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--ui-default-transition-duration));
+  }
+  .ui\:duration-100 {
+    --tw-duration: 100ms;
+    transition-duration: 100ms;
+  }
   .ui\:duration-300 {
     --tw-duration: 300ms;
     transition-duration: 300ms;
@@ -761,11 +864,91 @@
   }
 }
 @layer utilities;
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
   initial-value: solid;
 }
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
 @property --tw-duration {
   syntax: "*";
   inherits: false;
@@ -773,7 +956,24 @@
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
       --tw-border-style: solid;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
       --tw-duration: initial;
     }
   }

package/dist/index.d.ts

@@ -1,3 +1,5 @@
 export * from "./components/Button";
+export * from "./components/Chip";
+export * from "./components/Toggle";
 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;AAGpC,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;AAGpC,cAAc,oBAAoB,CAAC"}

package/dist/index.js

@@ -16,5 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 /* ------------------------------- COMPONENTS ------------------------------- */
 __exportStar(require("./components/Button"), exports);
+__exportStar(require("./components/Chip"), exports);
+__exportStar(require("./components/Toggle"), exports);
 /* --------------------------------- ICONS ---------------------------------- */
 __exportStar(require("./components/Icons"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reitwagen/design-components",
-  "version": "0.0.11",
+  "version": "0.2.0",
   "sideEffects": [
     "**/*.css"
   ],
@@ -32,6 +32,7 @@
   "devDependencies": {
     "@storybook/addon-docs": "^10.0.7",
     "@storybook/react": "^10.0.7",
+    "@storybook/test": "^8.6.14",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/plugin-prettier": "^8.1.0",
@@ -48,8 +49,8 @@
     "tailwindcss": "^4.1.5",
     "ts-node": "^10.9.2",
     "typescript": "5.9.2",
-    "@reitwagen/tailwind-config": "0.0.0",
     "@reitwagen/eslint-config": "0.0.0",
+    "@reitwagen/tailwind-config": "0.0.0",
     "@reitwagen/typescript-config": "0.0.0"
   },
   "dependencies": {