@reitwagen/design-components 0.1.0 → 0.2.1

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

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

@@ -15,5 +15,8 @@ type ChipOwnProps = VariantProps<typeof chipVariants> & {
 };
 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

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

@@ -17,16 +17,16 @@ const chipVariants = (0, class_variance_authority_1.cva)("ui:flex ui:items-cente
             small: "ui:text-button3 ui:h-[26px] ui:px-[10px] ui:py-[4.5px]",
         },
         disabled: {
-            false: "ui:cursor-pointer",
             true: "ui:pointer-events-none",
+            false: "ui:cursor-pointer",
         },
         isSelected: {
-            false: "",
             true: "",
+            false: "",
         },
         isActive: {
-            false: "",
             true: "",
+            false: "",
         },
     },
     compoundVariants: [
@@ -136,3 +136,4 @@ function Chip({ className, as, children, variant, size, disabled, isSelected, is
             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

@@ -46,6 +46,7 @@ declare const meta: {
 };
 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;

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

@@ -1 +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,IAAI,EAAE,KAmBlB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAkBlB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAmBlB,CAAC"}
+{"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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Text = exports.Line = exports.Fill = void 0;
+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 = {
@@ -44,6 +44,32 @@ const meta = {
     },
 };
 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: {

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;
+export interface ToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "disabled">, VariantProps<typeof toggleVariants> {
+    onCheckedChange?: (checked: boolean) => void;
+}
+export declare function Toggle({ checked: controlledChecked, defaultChecked, 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,EAAY,MAAM,OAAO,CAAC;AACvD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,QAAA,MAAM,cAAc;;;8EAmCnB,CAAC;AA6BF,MAAM,WAAW,WACf,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,EAAE,iBAAiB,EAC1B,cAAc,EACd,QAAQ,EACR,eAAe,EACf,GAAG,KAAK,EACT,EAAE,WAAW,2CAkCb;yBAxCe,MAAM"}

package/dist/components/Toggle/Toggle.js

@@ -0,0 +1,82 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toggle = Toggle;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const class_variance_authority_1 = require("class-variance-authority");
+const style_1 = require("../../utils/style");
+const toggleVariants = (0, class_variance_authority_1.cva)("ui:focus:ring-0 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:focus:ring-0 ui:ring-0 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: controlledChecked, defaultChecked, disabled, onCheckedChange, ...props }) {
+    const [uncontrolledChecked, setUncontrolledChecked] = (0, react_1.useState)(defaultChecked);
+    const isChecked = controlledChecked ?? uncontrolledChecked;
+    const handleClick = () => {
+        if (disabled) {
+            return;
+        }
+        if (controlledChecked === undefined) {
+            setUncontrolledChecked(!isChecked);
+        }
+        onCheckedChange?.(!isChecked);
+    };
+    return ((0, jsx_runtime_1.jsx)("button", { role: "switch", onClick: handleClick, "aria-checked": isChecked, className: (0, style_1.cn)(toggleVariants({
+            checked: isChecked,
+            disabled,
+        })), disabled: disabled || undefined, ...props, children: (0, jsx_runtime_1.jsx)("span", { className: thumbVariants({ checked: isChecked, disabled }) }) }));
+}
+Toggle.displayName = "Toggle";

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

@@ -0,0 +1,33 @@
+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;
+export declare const UnControlled: 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;AAE/C,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;CAwBqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAcnC,eAAO,MAAM,UAAU,EAAE,KA8CxB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA2B1B,CAAC"}

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

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UnControlled = 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 = {
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### 상태를 외부에서 관리하는 방식
+
+Toggle의 상태를 외부에서 관리하려면 <code>checked</code>와 <code>onCheckedChange</code> 속성을 함께 사용하세요.
+`,
+            },
+            source: {
+                code: `
+function Controlled() {
+  const [checked, setChecked] = useState(props.checked);
+
+  return (
+    <Toggle
+      checked={checked}
+      onCheckedChange={() => setChecked(!checked)}
+    />
+  );
+}
+        `.trim(),
+            },
+        },
+    },
+    render: (props) => (0, jsx_runtime_1.jsx)(ToggleWithControlled, { ...props }),
+    args: {
+        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 toggle = canvas.getByRole("switch");
+        await test_1.userEvent.click(toggle);
+    },
+};
+exports.UnControlled = {
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### 상태를 내부에서 관리하는 방식
+    
+Toggle의 상태를 내부에서 자동으로 관리하려면 <code>defaultChecked</code> 속성을 사용하세요. 이 속성은 Toggle이 처음 화면에 표시될 때 선택 상태를 정해주고, 그 후에는 컴포넌트가 스스로 상태를 관리해요. 상태 변화를 추적하지 않아도 될 때 유용해요.
+`,
+            },
+        },
+    },
+    render: (props) => (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { 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 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

@@ -277,9 +277,21 @@
   .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;
   }
@@ -298,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%;
   }
@@ -307,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;
   }
@@ -383,6 +412,9 @@
   .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);
   }
@@ -599,11 +631,20 @@
   .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;
@@ -616,6 +657,12 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .ui\:focus\:ring-0 {
+    &:focus {
+      --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\:active\:bg-blue-50 {
     &:active {
       background-color: var(--ui-color-blue-50);
@@ -823,11 +870,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;
@@ -835,7 +962,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,4 +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;AACpC,cAAc,mBAAmB,CAAC;AAGlC,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

@@ -17,5 +17,6 @@ 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.1.0",
+  "version": "0.2.1",
   "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",