@reitwagen/design-components 0.0.10 → 0.1.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

@@ -8,9 +8,9 @@ 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-150",
-            outlined: "ui:transition-colors ui:duration-150",
-            text: "ui:transition-colors ui:duration-150",
+            solid: "ui:transition-colors ui:duration-300",
+            outlined: "ui:transition-colors ui:duration-300",
+            text: "ui:transition-colors ui:duration-300",
         },
         color: {
             primary: "",
@@ -28,7 +28,7 @@ const buttonVariants = (0, class_variance_authority_1.cva)("ui:flex ui:items-cen
             true: "ui:pointer-events-none",
         },
         full: {
-            true: "ui:flex-1",
+            true: "ui:flex-1 ui:w-full",
             false: "",
         },
     },
@@ -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

@@ -59,7 +59,7 @@ exports.Variants = {
         docs: {
             description: {
                 story: `
-- 버튼의 variant 스타일을 변경하려면 variant 속성을 사용하세요. 사용할 수 있는 값에는 <code>solid</code>, <code>outlined</code>, <code>text</code> 가 있어요. 기본값은 <code>solid</code> 입니다.
+- Button의 variant 스타일을 변경하려면 <code>variant</code> 속성을 사용하세요. 사용할 수 있는 값에는 <code>solid</code>, <code>outlined</code>, <code>text</code> 가 있어요. 기본값은 <code>solid</code> 입니다.
 `,
             },
         },
@@ -77,7 +77,7 @@ exports.Colors = {
         docs: {
             description: {
                 story: `
-- 버튼의 color 스타일을 변경하려면 color 속성을 사용하세요. 사용할 수 있는 값에는 <code>primary</code>, <code>black</code>, <code>gray</code>, <code>sky</code> 가 있어요. 기본값은 <code>primary</code> 입니다.
+- Button의 color 스타일을 변경하려면 <code>color</code> 속성을 사용하세요. 사용할 수 있는 값에는 <code>primary</code>, <code>black</code>, <code>gray</code>, <code>sky</code> 가 있어요. 기본값은 <code>primary</code> 입니다.
 `,
             },
         },
@@ -95,8 +95,8 @@ exports.Sizes = {
         docs: {
             description: {
                 story: `
-- 버튼의 크기를 변경하려면 size 속성을 사용하세요. 사용할 수 있는 값에는 <code>large</code>, <code>medium</code>, <code>small</code> 이 있어요. 기본값은 <code>large</code> 입니다.
-- 버튼이 부모 요소의 전체 너비를 차지하게 하려면 <code>full</code> 속성을 지정하세요.
+- Button의 크기를 변경하려면 <code>size</code> 속성을 사용하세요. 사용할 수 있는 값에는 <code>large</code>, <code>medium</code>, <code>small</code> 이 있어요. 기본값은 <code>large</code> 입니다.
+- Button이 부모 요소의 전체 너비를 차지하게 하려면 <code>full</code> 속성을 지정하세요.
 `,
             },
         },
@@ -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,19 @@
+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 {};
+//# 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"}

package/dist/components/Chip/Chip.js

@@ -0,0 +1,138 @@
+"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: {
+            false: "ui:cursor-pointer",
+            true: "ui:pointer-events-none",
+        },
+        isSelected: {
+            false: "",
+            true: "",
+        },
+        isActive: {
+            false: "",
+            true: "",
+        },
+    },
+    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] }));
+}

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

@@ -0,0 +1,52 @@
+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 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,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,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text = exports.Line = exports.Fill = 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.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/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,18 @@
   .ui\:grid {
     display: grid;
   }
+  .ui\:h-\[26px\] {
+    height: 26px;
+  }
+  .ui\:h-\[32px\] {
+    height: 32px;
+  }
   .ui\:h-\[34px\] {
     height: 34px;
   }
+  .ui\:h-\[38px\] {
+    height: 38px;
+  }
   .ui\:h-\[40px\] {
     height: 40px;
   }
@@ -315,6 +325,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 +340,9 @@
   .ui\:gap-5 {
     gap: calc(var(--ui-spacing) * 5);
   }
+  .ui\:rounded-\[8px\] {
+    border-radius: 8px;
+  }
   .ui\:rounded-\[10px\] {
     border-radius: 10px;
   }
@@ -336,6 +352,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 +374,45 @@
   .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-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 +422,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 +575,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,6 +593,9 @@
   .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);
   }
@@ -546,9 +604,13 @@
     transition-timing-function: var(--tw-ease, var(--ui-default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--ui-default-transition-duration));
   }
-  .ui\:duration-150 {
-    --tw-duration: 150ms;
-    transition-duration: 150ms;
+  .ui\:duration-100 {
+    --tw-duration: 100ms;
+    transition-duration: 100ms;
+  }
+  .ui\:duration-300 {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
   }
   .ui\:select-none {
     -webkit-user-select: none;

package/dist/index.d.ts

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

package/dist/index.js

@@ -16,5 +16,6 @@ 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);
 /* --------------------------------- ICONS ---------------------------------- */
 __exportStar(require("./components/Icons"), exports);

package/dist/types/props.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps, ElementType } from "react";
+export type AsProps<C extends ElementType> = {
+    as?: C;
+};
+export type ElementTypeProps<C extends ElementType> = ComponentProps<C>;
+export type KeyWithAs<C extends ElementType, Props> = keyof (Props & AsProps<C>);
+export type PolymorphicComponentProps<C extends ElementType, Props = "object"> = Props & AsProps<C> & Omit<ElementTypeProps<C>, KeyWithAs<C, Props>>;
+//# sourceMappingURL=props.d.ts.map

package/dist/types/props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/types/props.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpD,MAAM,MAAM,OAAO,CAAC,CAAC,SAAS,WAAW,IAAI;IAC3C,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,IAAI,cAAc,CAAC,CAAC,CAAC,CAAC;AAExE,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,EAAE,KAAK,IAAI,MAAM,CAAC,KAAK,GAChE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;AAEd,MAAM,MAAM,yBAAyB,CACnC,CAAC,SAAS,WAAW,EACrB,KAAK,GAAG,QAAQ,IACd,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC"}

package/dist/types/props.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reitwagen/design-components",
-  "version": "0.0.10",
+  "version": "0.1.0",
   "sideEffects": [
     "**/*.css"
   ],
@@ -48,9 +48,9 @@
     "tailwindcss": "^4.1.5",
     "ts-node": "^10.9.2",
     "typescript": "5.9.2",
+    "@reitwagen/eslint-config": "0.0.0",
     "@reitwagen/tailwind-config": "0.0.0",
-    "@reitwagen/typescript-config": "0.0.0",
-    "@reitwagen/eslint-config": "0.0.0"
+    "@reitwagen/typescript-config": "0.0.0"
   },
   "dependencies": {
     "axios": "^1.13.2",