@reitwagen/design-components 0.2.2 → 0.3.1

package/dist/components/Icons/IconVoteDefault.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconVoteDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconVoteDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAiBP;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"IconVoteDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconVoteDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAiBP;AAED,eAAe,eAAe,CAAC"}

package/dist/components/Icons/IconVoteDefault.js

@@ -1,6 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @see [RDS Storybook: Icon](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-icons--docs)
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
 function IconVoteDefault({ className, width = 24, height = 24, ...props }) {
     return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", className: className, ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M19.54 2.75a3.053 3.053 0 0 1 3.052 3.053v.92a3.05 3.05 0 0 1-1.842 2.801v6.87a5.356 5.356 0 0 1-5.355 5.356H8.947a5.356 5.356 0 0 1-5.355-5.355v-6.87A3.05 3.05 0 0 1 1.75 6.723v-.921A3.053 3.053 0 0 1 4.803 2.75zm-4.01 8.22a.75.75 0 0 0-1.06 0l-3.157 3.153-1.31-1.31a.75.75 0 1 0-1.06 1.06l1.84 1.84a.75.75 0 0 0 1.06.002l3.687-3.685a.75.75 0 0 0 0-1.06" }) }));
 }

package/dist/components/Icons/IconYoutubeDefault.d.ts

@@ -1,9 +1,18 @@
 import type { SVGProps } from "react";
 interface Props extends SVGProps<SVGSVGElement> {
-    className?: string;
+    className: string;
     width?: number;
     height?: number;
 }
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @see [RDS Storybook: Icon](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-icons--docs)
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
 declare function IconYoutubeDefault({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconYoutubeDefault;
 //# sourceMappingURL=IconYoutubeDefault.d.ts.map

package/dist/components/Icons/IconYoutubeDefault.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconYoutubeDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconYoutubeDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAmBP;AAED,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"IconYoutubeDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconYoutubeDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAmBP;AAED,eAAe,kBAAkB,CAAC"}

package/dist/components/Icons/IconYoutubeDefault.js

@@ -1,6 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @see [RDS Storybook: Icon](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-icons--docs)
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
 function IconYoutubeDefault({ className, width = 24, height = 24, ...props }) {
     return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", className: className, ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", fillRule: "evenodd", d: "M12.423 5h-.847c-1.336.01-5.44.068-6.61.416-.775.23-1.385.908-1.592 1.769-.311 1.29-.365 3.742-.374 4.55v.53c.01.806.063 3.258.374 4.549.207.86.817 1.538 1.592 1.768 1.08.322 4.66.396 6.255.413l.945.005c.943-.004 5.607-.042 6.866-.418.775-.23 1.385-.908 1.592-1.768.279-1.155.351-3.24.37-4.244L21 11.9c-.004-.556-.038-3.317-.376-4.715-.207-.861-.817-1.539-1.591-1.769-1.17-.348-5.275-.406-6.61-.416m2.109 7.464a.53.53 0 0 0 0-.928l-4.245-2.348a.53.53 0 0 0-.787.464v4.696c0 .404.434.66.787.464z", clipRule: "evenodd" }) }));
 }

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

@@ -1,15 +1,32 @@
 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;
+import { toggleVariants } from "./Toggle.styles";
 export interface ToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "disabled">, VariantProps<typeof toggleVariants> {
+    /**
+     * 토글 상태가 변경될 때 호출되는 이벤트 핸들러
+     */
     onCheckedChange?: (checked: boolean) => void;
 }
+/**
+ * `Toggle`: 즉각적인 상태 전환(켜기/끄기)을 위한 요소로, 활성화/비활성화 기능을 나타냅니다.
+ * @see [RDS Storybook: Toggle](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-toggle--docs)
+ * @example
+ * ```tsx
+ * const [checked, setChecked] = useState(false)
+ * // Controlled
+ * <Toggle
+ *   checked={checked}
+ *   onCheckedChange={setChecked}
+ * />
+ * // UnControlled
+ * <Toggle defaultChecked={true}
+ * />
+ * ```
+ *
+ *
+ */
 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

@@ -1 +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,2CAmCb;yBAzCe,MAAM"}
+{"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,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAiB,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEhE,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,EAC/D,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED;;;;;;;;;;;;;;;;;GAiBG;AAEH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EAAE,iBAAiB,EAC1B,cAAc,EACd,QAAQ,EACR,eAAe,EACf,GAAG,KAAK,EACT,EAAE,WAAW,2CAmCb;yBAzCe,MAAM"}

package/dist/components/Toggle/Toggle.js

@@ -4,64 +4,26 @@ 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,
-    },
-});
+const Toggle_styles_1 = require("./Toggle.styles");
+/**
+ * `Toggle`: 즉각적인 상태 전환(켜기/끄기)을 위한 요소로, 활성화/비활성화 기능을 나타냅니다.
+ * @see [RDS Storybook: Toggle](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-toggle--docs)
+ * @example
+ * ```tsx
+ * const [checked, setChecked] = useState(false)
+ * // Controlled
+ * <Toggle
+ *   checked={checked}
+ *   onCheckedChange={setChecked}
+ * />
+ * // UnControlled
+ * <Toggle defaultChecked={true}
+ * />
+ * ```
+ *
+ *
+ */
 function Toggle({ checked: controlledChecked, defaultChecked, disabled, onCheckedChange, ...props }) {
     const [uncontrolledChecked, setUncontrolledChecked] = (0, react_1.useState)(defaultChecked);
     const isChecked = controlledChecked ?? uncontrolledChecked;
@@ -74,9 +36,9 @@ function Toggle({ checked: controlledChecked, defaultChecked, disabled, onChecke
         }
         onCheckedChange?.(!isChecked);
     };
-    return ((0, jsx_runtime_1.jsx)("button", { role: "switch", type: "button", onClick: handleClick, "aria-checked": isChecked, className: (0, style_1.cn)(toggleVariants({
+    return ((0, jsx_runtime_1.jsx)("button", { role: "switch", type: "button", onClick: handleClick, "aria-checked": isChecked, className: (0, style_1.cn)((0, Toggle_styles_1.toggleVariants)({
             checked: isChecked,
             disabled,
-        })), disabled: disabled || undefined, ...props, children: (0, jsx_runtime_1.jsx)("span", { className: thumbVariants({ checked: isChecked, disabled }) }) }));
+        })), disabled: disabled || undefined, ...props, children: (0, jsx_runtime_1.jsx)("span", { className: (0, Toggle_styles_1.thumbVariants)({ checked: isChecked, disabled }) }) }));
 }
 Toggle.displayName = "Toggle";

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

@@ -0,0 +1,9 @@
+export declare const toggleVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+    checked?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const thumbVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+    checked?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=Toggle.styles.d.ts.map

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

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

package/dist/components/Toggle/Toggle.styles.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.thumbVariants = exports.toggleVariants = void 0;
+const class_variance_authority_1 = require("class-variance-authority");
+exports.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,
+    },
+});
+exports.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,
+    },
+});

package/dist/index.css

@@ -280,9 +280,15 @@
   .ui\:inline-flex {
     display: inline-flex;
   }
+  .ui\:h-6 {
+    height: calc(var(--ui-spacing) * 6);
+  }
   .ui\:h-\[21px\] {
     height: 21px;
   }
+  .ui\:h-\[22px\] {
+    height: 22px;
+  }
   .ui\:h-\[25px\] {
     height: 25px;
   }
@@ -310,9 +316,15 @@
   .ui\:h-px {
     height: 1px;
   }
+  .ui\:w-6 {
+    width: calc(var(--ui-spacing) * 6);
+  }
   .ui\:w-\[21px\] {
     width: 21px;
   }
+  .ui\:w-\[22px\] {
+    width: 22px;
+  }
   .ui\:w-\[25px\] {
     width: 25px;
   }
@@ -336,6 +348,9 @@
     --tw-translate-x: calc(var(--ui-spacing) * 6);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .ui\:cursor-default {
+    cursor: default;
+  }
   .ui\:cursor-pointer {
     cursor: pointer;
   }
@@ -388,6 +403,10 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .ui\:border-\[1\.5px\] {
+    border-style: var(--tw-border-style);
+    border-width: 1.5px;
+  }
   .ui\:border-blue-300 {
     border-color: var(--ui-color-blue-300);
   }
@@ -610,6 +629,9 @@
   .ui\:text-blue-800 {
     color: var(--ui-color-blue-800);
   }
+  .ui\:text-gray-100 {
+    color: var(--ui-color-gray-100);
+  }
   .ui\:text-gray-200 {
     color: var(--ui-color-gray-200);
   }
@@ -663,6 +685,16 @@
       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\:border-gray-100 {
+    &:active {
+      border-color: var(--ui-color-gray-100);
+    }
+  }
+  .ui\:active\:border-gray-300 {
+    &:active {
+      border-color: var(--ui-color-gray-300);
+    }
+  }
   .ui\:active\:bg-blue-50 {
     &:active {
       background-color: var(--ui-color-blue-50);
@@ -673,6 +705,11 @@
       background-color: var(--ui-color-blue-100);
     }
   }
+  .ui\:active\:bg-blue-300 {
+    &:active {
+      background-color: var(--ui-color-blue-300);
+    }
+  }
   .ui\:active\:bg-blue-800 {
     &:active {
       background-color: var(--ui-color-blue-800);
@@ -698,11 +735,21 @@
       color: var(--ui-color-blue-800);
     }
   }
+  .ui\:active\:text-gray-100 {
+    &:active {
+      color: var(--ui-color-gray-100);
+    }
+  }
   .ui\:active\:text-gray-200 {
     &:active {
       color: var(--ui-color-gray-200);
     }
   }
+  .ui\:active\:text-gray-300 {
+    &:active {
+      color: var(--ui-color-gray-300);
+    }
+  }
   .ui\:active\:text-gray-500 {
     &:active {
       color: var(--ui-color-gray-500);
@@ -718,6 +765,11 @@
       color: var(--ui-color-gray-800);
     }
   }
+  .ui\:active\:text-white {
+    &:active {
+      color: var(--ui-color-white);
+    }
+  }
 }
 @layer theme, base, components, utilities;
 @layer theme;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./components/Button";
 export * from "./components/Chip";
 export * from "./components/Toggle";
+export * from "./components/Checkbox";
 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;AAClC,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;AACpC,cAAc,uBAAuB,CAAC;AAGtC,cAAc,oBAAoB,CAAC"}

package/dist/index.js

@@ -18,5 +18,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./components/Button"), exports);
 __exportStar(require("./components/Chip"), exports);
 __exportStar(require("./components/Toggle"), exports);
+__exportStar(require("./components/Checkbox"), exports);
 /* --------------------------------- ICONS ---------------------------------- */
 __exportStar(require("./components/Icons"), exports);

package/dist/types/props.d.ts

@@ -1,8 +1,11 @@
-import { ComponentProps, ElementType } from "react";
+import { ComponentProps, ElementType, ReactNode } 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>>;
+export interface ChildrenProps<Children = ReactNode> {
+    children?: Children;
+}
 //# sourceMappingURL=props.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/types/props.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/D,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;AAExE,MAAM,WAAW,aAAa,CAAC,QAAQ,GAAG,SAAS;IACjD,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB"}

package/package.json

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