@reitwagen/design-components 0.2.1 → 0.3.0

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

@@ -1,14 +1,8 @@
 import { ButtonHTMLAttributes, ReactNode } from "react";
 import { type VariantProps } from "class-variance-authority";
-declare const buttonVariants: (props?: ({
-    variant?: "text" | "solid" | "outlined" | null | undefined;
-    color?: "primary" | "black" | "gray" | "sky" | null | undefined;
-    size?: "large" | "medium" | "small" | null | undefined;
-    disabled?: boolean | null | undefined;
-    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;
+import { ChildrenProps } from "../../types/props";
+import { buttonVariants } from "./Button.styles";
+interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "color">, ChildrenProps, VariantProps<typeof buttonVariants> {
     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;;;;;;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"}
+{"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,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,UAAU,WACR,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,EACzE,aAAa,EACb,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,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

@@ -3,135 +3,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = Button;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const class_variance_authority_1 = require("class-variance-authority");
 const style_1 = require("../../utils/style");
-const buttonVariants = (0, class_variance_authority_1.cva)("ui:flex ui:items-center ui:justify-center ui:gap-1.5 ui:select-none", {
-    variants: {
-        variant: {
-            solid: "ui:transition-colors ui:duration-300",
-            outlined: "ui:transition-colors ui:duration-300",
-            text: "ui:transition-colors ui:duration-300",
-        },
-        color: {
-            primary: "",
-            black: "",
-            gray: "",
-            sky: "",
-        },
-        size: {
-            large: "ui:text-button1 ui:rounded-[14px] ui:h-[52px] ui:px-[24px] ui:py-[14px]",
-            medium: "ui:text-button2 ui:rounded-[12px] ui:h-[40px] ui:px-[20px] ui:py-[10px]",
-            small: "ui:text-button3 ui:rounded-[10px] ui:h-[34px] ui:px-[14px] ui:py-[8px]",
-        },
-        disabled: {
-            true: "ui:pointer-events-none",
-            false: "ui:cursor-pointer",
-        },
-        full: {
-            true: "ui:flex-1 ui:w-full",
-            false: "",
-        },
-    },
-    compoundVariants: [
-        {
-            variant: "solid",
-            color: "primary",
-            className: "ui:bg-blue-600 ui:text-white ui:active:bg-blue-800",
-        },
-        {
-            variant: "solid",
-            color: "primary",
-            disabled: true,
-            className: "ui:bg-blue-300",
-        },
-        {
-            variant: "solid",
-            color: "black",
-            className: "ui:bg-gray-800 ui:text-white ui:active:bg-gray-900 ui:active:text-gray-200",
-        },
-        {
-            variant: "solid",
-            color: "black",
-            disabled: true,
-            className: "ui:bg-gray-400",
-        },
-        {
-            variant: "solid",
-            color: "gray",
-            className: "ui:bg-gray-100 ui:text-gray-600 ui:active:bg-gray-200 ui:active:text-gray-800",
-        },
-        {
-            variant: "solid",
-            color: "gray",
-            disabled: true,
-            className: "ui:text-gray-300",
-        },
-        {
-            variant: "solid",
-            color: "sky",
-            className: "ui:bg-blue-50 ui:text-blue-700 ui:active:bg-blue-100 ui:active:text-blue-800",
-        },
-        {
-            variant: "solid",
-            color: "sky",
-            disabled: true,
-            className: "ui:text-blue-300",
-        },
-        {
-            variant: "outlined",
-            color: "primary",
-            className: "ui:border ui:border-blue-700 ui:text-blue-700 ui:active:bg-gray-100 ui:active:text-blue-800",
-        },
-        {
-            variant: "outlined",
-            color: "primary",
-            disabled: true,
-            className: "ui:border ui:border-blue-300 ui:text-blue-300",
-        },
-        {
-            variant: "outlined",
-            color: "black",
-            className: "ui:border ui:border-gray-200 ui:text-gray-700 ui:active:bg-gray-100 ui:active:text-gray-500",
-        },
-        {
-            variant: "outlined",
-            color: "black",
-            disabled: true,
-            className: "ui:border ui:border-gray-100 ui:text-gray-300",
-        },
-        {
-            variant: "text",
-            color: "primary",
-            className: "ui:text-blue-700 ui:active:bg-blue-50 ui:active:text-blue-800",
-        },
-        {
-            variant: "text",
-            color: "primary",
-            disabled: true,
-            className: "ui:text-blue-300",
-        },
-        {
-            variant: "text",
-            color: "black",
-            className: "ui:text-gray-600 ui:active:bg-gray-100 ui:active:text-gray-700",
-        },
-        {
-            variant: "text",
-            color: "black",
-            disabled: true,
-            className: "ui:text-gray-300",
-        },
-    ],
-    defaultVariants: {
-        color: "primary",
-        size: "large",
-        variant: "solid",
-        disabled: false,
-        full: false,
-    },
-});
+const Button_styles_1 = require("./Button.styles");
 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({
+    return ((0, jsx_runtime_1.jsxs)("button", { className: (0, style_1.cn)((0, Button_styles_1.buttonVariants)({
             variant,
             color,
             size,

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

@@ -66,7 +66,7 @@ exports.Variants = {
     },
     render: (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:flex ui:gap-2", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "primary", size: "large", ...props, children: props.children }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "outlined", color: "primary", size: "large", ...props, children: props.children }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", color: "primary", size: "large", ...props, children: props.children })] })),
     args: {
-        children: "Button text",
+        children: "Button Text",
         color: "primary",
         disabled: false,
         full: false,
@@ -84,7 +84,7 @@ exports.Colors = {
     },
     render: (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:flex ui:gap-2", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "primary", size: "large", ...props, children: props.children }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "black", size: "large", ...props, children: props.children }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "gray", size: "large", ...props, children: props.children }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "sky", size: "large", ...props, children: props.children })] })),
     args: {
-        children: "Button text",
+        children: "Button Text",
         variant: "solid",
         disabled: false,
         full: false,
@@ -103,7 +103,7 @@ exports.Sizes = {
     },
     render: (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:flex ui:gap-2", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "primary", size: "large", ...props, children: props.children }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "primary", size: "medium", ...props, children: props.children }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "primary", size: "small", ...props, children: props.children })] })),
     args: {
-        children: "Button text",
+        children: "Button Text",
         variant: "solid",
         color: "primary",
         disabled: false,
@@ -113,7 +113,7 @@ exports.Sizes = {
 exports.Solid = {
     render: (props) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "primary", size: "large", ...props, children: props.children })),
     args: {
-        children: "Button text",
+        children: "Button Text",
         variant: "solid",
         color: "primary",
         size: "large",
@@ -124,7 +124,7 @@ exports.Solid = {
 exports.Outlined = {
     render: (props) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "outlined", color: "primary", size: "large", ...props, children: props.children })),
     args: {
-        children: "Button text",
+        children: "Button Text",
         variant: "outlined",
         color: "primary",
         size: "large",
@@ -141,7 +141,7 @@ exports.Outlined = {
 exports.Text = {
     render: (props) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", color: "primary", size: "large", ...props, children: props.children })),
     args: {
-        children: "Button text",
+        children: "Button Text",
         variant: "text",
         color: "primary",
         size: "large",

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

@@ -0,0 +1,8 @@
+export declare const buttonVariants: (props?: ({
+    variant?: "text" | "solid" | "outlined" | null | undefined;
+    color?: "primary" | "black" | "gray" | "sky" | null | undefined;
+    size?: "small" | "large" | "medium" | null | undefined;
+    disabled?: boolean | null | undefined;
+    full?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=Button.styles.d.ts.map

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

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

package/dist/components/Button/Button.styles.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonVariants = void 0;
+const class_variance_authority_1 = require("class-variance-authority");
+exports.buttonVariants = (0, class_variance_authority_1.cva)("ui:flex ui:items-center ui:justify-center ui:gap-1.5 ui:select-none", {
+    variants: {
+        variant: {
+            solid: "ui:transition-colors ui:duration-300",
+            outlined: "ui:transition-colors ui:duration-300",
+            text: "ui:transition-colors ui:duration-300",
+        },
+        color: {
+            primary: "",
+            black: "",
+            gray: "",
+            sky: "",
+        },
+        size: {
+            large: "ui:text-button1 ui:rounded-[14px] ui:h-[52px] ui:px-[24px] ui:py-[14px]",
+            medium: "ui:text-button2 ui:rounded-[12px] ui:h-[40px] ui:px-[20px] ui:py-[10px]",
+            small: "ui:text-button3 ui:rounded-[10px] ui:h-[34px] ui:px-[14px] ui:py-[8px]",
+        },
+        disabled: {
+            true: "ui:pointer-events-none",
+            false: "ui:cursor-pointer",
+        },
+        full: {
+            true: "ui:flex-1 ui:w-full",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            variant: "solid",
+            color: "primary",
+            className: "ui:bg-blue-600 ui:text-white ui:active:bg-blue-800",
+        },
+        {
+            variant: "solid",
+            color: "primary",
+            disabled: true,
+            className: "ui:bg-blue-300",
+        },
+        {
+            variant: "solid",
+            color: "black",
+            className: "ui:bg-gray-800 ui:text-white ui:active:bg-gray-900 ui:active:text-gray-200",
+        },
+        {
+            variant: "solid",
+            color: "black",
+            disabled: true,
+            className: "ui:bg-gray-400",
+        },
+        {
+            variant: "solid",
+            color: "gray",
+            className: "ui:bg-gray-100 ui:text-gray-600 ui:active:bg-gray-200 ui:active:text-gray-800",
+        },
+        {
+            variant: "solid",
+            color: "gray",
+            disabled: true,
+            className: "ui:text-gray-300",
+        },
+        {
+            variant: "solid",
+            color: "sky",
+            className: "ui:bg-blue-50 ui:text-blue-700 ui:active:bg-blue-100 ui:active:text-blue-800",
+        },
+        {
+            variant: "solid",
+            color: "sky",
+            disabled: true,
+            className: "ui:text-blue-300",
+        },
+        {
+            variant: "outlined",
+            color: "primary",
+            className: "ui:border ui:border-blue-700 ui:text-blue-700 ui:active:bg-gray-100 ui:active:text-blue-800",
+        },
+        {
+            variant: "outlined",
+            color: "primary",
+            disabled: true,
+            className: "ui:border ui:border-blue-300 ui:text-blue-300",
+        },
+        {
+            variant: "outlined",
+            color: "black",
+            className: "ui:border ui:border-gray-200 ui:text-gray-700 ui:active:bg-gray-100 ui:active:text-gray-500",
+        },
+        {
+            variant: "outlined",
+            color: "black",
+            disabled: true,
+            className: "ui:border ui:border-gray-100 ui:text-gray-300",
+        },
+        {
+            variant: "text",
+            color: "primary",
+            className: "ui:text-blue-700 ui:active:bg-blue-50 ui:active:text-blue-800",
+        },
+        {
+            variant: "text",
+            color: "primary",
+            disabled: true,
+            className: "ui:text-blue-300",
+        },
+        {
+            variant: "text",
+            color: "black",
+            className: "ui:text-gray-600 ui:active:bg-gray-100 ui:active:text-gray-700",
+        },
+        {
+            variant: "text",
+            color: "black",
+            disabled: true,
+            className: "ui:text-gray-300",
+        },
+    ],
+    defaultVariants: {
+        color: "primary",
+        size: "large",
+        variant: "solid",
+        disabled: false,
+        full: false,
+    },
+});

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

@@ -0,0 +1,15 @@
+import { ButtonHTMLAttributes } from "react";
+import { VariantProps } from "class-variance-authority";
+import { ChildrenProps } from "../../types/props";
+import { checkboxVariants } from "./Checkbox.styles";
+export interface CheckboxProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "color">, ChildrenProps, VariantProps<typeof checkboxVariants> {
+    /**
+     * 체크박스의 체크 상태가 변경될 때 호출되는 이벤트 핸들러
+     */
+    onCheckedChange?: (checked: boolean) => void;
+}
+export declare function Checkbox({ id: idProp, checked: controlledChecked, defaultChecked, disabled, className, onCheckedChange, children, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Checkbox {
+    var displayName: string;
+}
+//# sourceMappingURL=Checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAmB,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGxD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAqB,MAAM,mBAAmB,CAAC;AAExE,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,EACzE,aAAa,EACb,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,QAAQ,CAAC,EACvB,EAAE,EAAE,MAAM,EACV,OAAO,EAAE,iBAAiB,EAC1B,cAAc,EACd,QAAQ,EACR,SAAS,EACT,eAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,aAAa,2CAgEf;yBAzEe,QAAQ"}

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = Checkbox;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Icons_1 = require("../Icons");
+const style_1 = require("../../utils/style");
+const Checkbox_styles_1 = require("./Checkbox.styles");
+function Checkbox({ id: idProp, checked: controlledChecked, defaultChecked, disabled, className, onCheckedChange, children, ...props }) {
+    const [uncontrolledChecked, setUncontrolledChecked] = (0, react_1.useState)(defaultChecked);
+    const uniqId = (0, react_1.useId)();
+    const id = idProp || uniqId;
+    const isChecked = controlledChecked ?? uncontrolledChecked;
+    const handleClick = () => {
+        if (disabled) {
+            return;
+        }
+        if (controlledChecked === undefined) {
+            setUncontrolledChecked(!isChecked);
+        }
+        onCheckedChange?.(!isChecked);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "ui:flex ui:items-center ui:gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "ui:cursor-pointer ui:w-6 ui:h-6 ui:flex ui:items-center ui:justify-center", children: (0, jsx_runtime_1.jsx)("button", { id: id, role: "checkbox", type: "button", onClick: handleClick, "aria-checked": isChecked, className: (0, style_1.cn)((0, Checkbox_styles_1.checkboxVariants)({
+                        checked: isChecked,
+                        disabled,
+                        className,
+                    })), disabled: disabled || undefined, ...props, children: (0, jsx_runtime_1.jsx)(Icons_1.IconCheckDefault, { width: 18, height: 18, className: (0, style_1.cn)((0, Checkbox_styles_1.checkIconVariants)({
+                            checked: isChecked,
+                            disabled,
+                            className,
+                        })) }) }) }), children && ((0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: (0, style_1.cn)("ui:text-body5", disabled ? "ui:pointer-events-none" : "ui:cursor-pointer"), children: children }))] }));
+}
+Checkbox.displayName = "Checkbox";

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AAGrD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;CAuBuB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAgBnC,eAAO,MAAM,UAAU,EAAE,KA8CxB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KA0CjC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA2B1B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAqBnC,CAAC"}

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