bonkers-ui 2.0.3 → 2.0.4

package/components/UiTable/UiTable.js

@@ -1,21 +1,22 @@
-import { jsxs as l, jsx as d } from "react/jsx-runtime";
+import { jsxs as s, jsx as d } from "react/jsx-runtime";
 import "react";
 import { ETableKind as t } from "./_types.js";
-import s from "classnames";
-const i = {
+import i from "classnames";
+const a = {
   [t.DEFAULT]: "",
   [t.SECONDARY]: "[&>tr:nth-child(odd)>td]:bg-secondary-alt-200",
   [t.SECONDARY_INVERTED]: "[&>tr:nth-child(even)>td]:bg-secondary-alt-200"
-}, b = ({
+}, h = ({
   kind: o = t.SECONDARY_INVERTED,
   header: r,
-  children: e,
-  ...n
-}) => /* @__PURE__ */ l("table", { ...n, children: [
+  className: e,
+  children: n,
+  ...l
+}) => /* @__PURE__ */ s("table", { ...l, className: e, children: [
   r && /* @__PURE__ */ d("thead", { children: r }),
-  /* @__PURE__ */ d("tbody", { className: s("rounded-xl", i[o]), children: e })
+  /* @__PURE__ */ d("tbody", { className: i("rounded-xl", a[o]), children: n })
 ] });
 export {
-  b as UiTable
+  h as UiTable
 };
 //# sourceMappingURL=UiTable.js.map

package/components/UiTable/UiTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiTable.js","sources":["../../../src/components/UiTable/UiTable.tsx"],"sourcesContent":["import React from \"react\";\nimport { ETableKind } from \"./_types\";\nimport cn from \"classnames\";\n\ntype TTableProps = {\n\tkind?: ETableKind;\n\theader?: React.ReactNode;\n} & React.HTMLAttributes<HTMLTableElement>;\n\nconst kindClasses = {\n\t[ETableKind.DEFAULT]: \"\",\n\t[ETableKind.SECONDARY]: \"[&>tr:nth-child(odd)>td]:bg-secondary-alt-200\",\n\t[ETableKind.SECONDARY_INVERTED]: \"[&>tr:nth-child(even)>td]:bg-secondary-alt-200\",\n};\n\nexport const UiTable: React.FC<TTableProps> = ({\n\tkind = ETableKind.SECONDARY_INVERTED,\n\theader,\n\tchildren,\n\t...rest\n}) => {\n\treturn (\n\t\t<table { ...rest }>\n\t\t\t{ header && (<thead>{ header }</thead>) }\n\t\t\t<tbody className={ cn(\"rounded-xl\", kindClasses[kind]) }>\n\t\t\t\t{ children }\n\t\t\t</tbody>\n\t\t</table>\n\t);\n};\n"],"names":["kindClasses","ETableKind","UiTable","kind","header","children","rest","jsxs","jsx","cn"],"mappings":";;;;AASA,MAAMA,IAAc;AAAA,EACnB,CAACC,EAAW,OAAO,GAAG;AAAA,EACtB,CAACA,EAAW,SAAS,GAAG;AAAA,EACxB,CAACA,EAAW,kBAAkB,GAAG;AAClC,GAEaC,IAAiC,CAAC;AAAA,EAC9C,MAAAC,IAAOF,EAAW;AAAA,EAClB,QAAAG;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC,EAAC,SAAQ,EAAA,GAAGD,GACT,UAAA;AAAA,EAAWF,KAAA,gBAAAI,EAAC,WAAQ,UAAQJ,EAAA,CAAA;AAAA,EAC9B,gBAAAI,EAAC,WAAM,WAAYC,EAAG,cAAcT,EAAYG,CAAI,CAAC,GAClD,UAAAE,EACH,CAAA;AAAA,GACD;"}
+{"version":3,"file":"UiTable.js","sources":["../../../src/components/UiTable/UiTable.tsx"],"sourcesContent":["import React from \"react\";\nimport { ETableKind } from \"./_types\";\nimport cn from \"classnames\";\n\ntype TTableProps = {\n\tkind?: ETableKind;\n\theader?: React.ReactNode;\n} & React.HTMLAttributes<HTMLTableElement>;\n\nconst kindClasses = {\n\t[ETableKind.DEFAULT]: \"\",\n\t[ETableKind.SECONDARY]: \"[&>tr:nth-child(odd)>td]:bg-secondary-alt-200\",\n\t[ETableKind.SECONDARY_INVERTED]: \"[&>tr:nth-child(even)>td]:bg-secondary-alt-200\",\n};\n\nexport const UiTable: React.FC<TTableProps> = ({\n\tkind = ETableKind.SECONDARY_INVERTED,\n\theader,\n\tclassName,\n\tchildren,\n\t...rest\n}) => {\n\treturn (\n\t\t<table { ...rest } className={ className }>\n\t\t\t{ header && (<thead>{ header }</thead>) }\n\t\t\t<tbody className={ cn(\"rounded-xl\", kindClasses[kind]) }>\n\t\t\t\t{ children }\n\t\t\t</tbody>\n\t\t</table>\n\t);\n};\n"],"names":["kindClasses","ETableKind","UiTable","kind","header","className","children","rest","jsxs","jsx","cn"],"mappings":";;;;AASA,MAAMA,IAAc;AAAA,EACnB,CAACC,EAAW,OAAO,GAAG;AAAA,EACtB,CAACA,EAAW,SAAS,GAAG;AAAA,EACxB,CAACA,EAAW,kBAAkB,GAAG;AAClC,GAEaC,IAAiC,CAAC;AAAA,EAC9C,MAAAC,IAAOF,EAAW;AAAA,EAClB,QAAAG;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACJ,MAEG,gBAAAC,EAAA,SAAA,EAAQ,GAAGD,GAAO,WAAAF,GAChB,UAAA;AAAA,EAAWD,KAAA,gBAAAK,EAAC,WAAQ,UAAQL,EAAA,CAAA;AAAA,EAC9B,gBAAAK,EAAC,WAAM,WAAYC,EAAG,cAAcV,EAAYG,CAAI,CAAC,GAClD,UAAAG,EACH,CAAA;AAAA,GACD;"}

package/components/UiTable/UiTableCell.js

@@ -1,25 +1,26 @@
-import { jsx as i, jsxs as p } from "react/jsx-runtime";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import "react";
 import { UiTypography as e } from "../UiTypography/UiTypography.js";
-import { ETypographySizes as l, ETextWeight as a } from "../UiTypography/_types.js";
-import { EColors as x } from "../../_types/colors.js";
-const n = ({ align: s, subText: o, weight: t, children: r, ...m }) => /* @__PURE__ */ i("td", { ...m, children: /* @__PURE__ */ p(
+import { ETypographySizes as m, ETextWeight as x } from "../UiTypography/_types.js";
+import { EColors as c } from "../../_types/colors.js";
+import f from "classnames";
+const S = ({ align: t, subText: o, weight: l, children: r, className: p, ...s }) => /* @__PURE__ */ i("td", { ...s, children: /* @__PURE__ */ a(
   e,
   {
     tag: "div",
-    size: l.SM,
-    align: s,
-    weight: t,
-    className: "p-sm",
+    size: m.SM,
+    align: t,
+    weight: l,
+    className: f("p-sm", p),
     children: [
       r,
       o ? /* @__PURE__ */ i(
         e,
         {
           tag: "div",
-          size: l.XXS,
-          weight: a.SEMI_BOLD,
-          color: x.PRIMARY_ALT_700,
+          size: m.XXS,
+          weight: x.SEMI_BOLD,
+          color: c.PRIMARY_ALT_700,
           className: `flex flex-col gap-xxxs ${r ? "pt-sm" : ""}`,
           children: o
         }
@@ -28,6 +29,6 @@ const n = ({ align: s, subText: o, weight: t, children: r, ...m }) => /* @__PURE
   }
 ) });
 export {
-  n as UiTableCell
+  S as UiTableCell
 };
 //# sourceMappingURL=UiTableCell.js.map

package/components/UiTable/UiTableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiTableCell.js","sources":["../../../src/components/UiTable/UiTableCell.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n\tUiTypography, ETextAlign, ETypographySizes, ETextWeight, EColors\n} from \"../UiTypography\";\n\ntype TCellProps = {\n\talign?: ETextAlign;\n\tsubText?: React.ReactNode;\n\tweight?: ETextWeight;\n} & React.HTMLAttributes<HTMLTableCellElement>;\n\nexport const UiTableCell: React.FC<TCellProps> = ({ align, subText, weight, children, ...rest }) => {\n\treturn (\n\t\t<td { ...rest }>\n\t\t\t<UiTypography\n\t\t\t\ttag=\"div\"\n\t\t\t\tsize={ ETypographySizes.SM }\n\t\t\t\talign={ align }\n\t\t\t\tweight={ weight }\n\t\t\t\tclassName='p-sm'\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t\t{\n\t\t\t\t\tsubText\n\t\t\t\t\t\t? (\n\t\t\t\t\t\t\t<UiTypography\n\t\t\t\t\t\t\t\ttag=\"div\"\n\t\t\t\t\t\t\t\tsize={ ETypographySizes.XXS }\n\t\t\t\t\t\t\t\tweight={ ETextWeight.SEMI_BOLD }\n\t\t\t\t\t\t\t\tcolor={ EColors.PRIMARY_ALT_700 }\n\t\t\t\t\t\t\t\tclassName={ `flex flex-col gap-xxxs ${children ? \"pt-sm\" : \"\"}` }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ subText }\n\t\t\t\t\t\t\t</UiTypography>\n\t\t\t\t\t\t)\n\t\t\t\t\t\t: null\n\t\t\t\t}\n\t\t\t</UiTypography>\n\t\t</td>\n\t);\n};\n"],"names":["UiTableCell","align","subText","weight","children","rest","jsx","jsxs","UiTypography","ETypographySizes","ETextWeight","EColors"],"mappings":";;;;;AAWa,MAAAA,IAAoC,CAAC,EAAE,OAAAC,GAAO,SAAAC,GAAS,QAAAC,GAAQ,UAAAC,GAAU,GAAGC,QAEvF,gBAAAC,EAAC,MAAK,EAAA,GAAGD,GACR,UAAA,gBAAAE;AAAA,EAACC;AAAA,EAAA;AAAA,IACA,KAAI;AAAA,IACJ,MAAOC,EAAiB;AAAA,IACxB,OAAAR;AAAA,IACA,QAAAE;AAAA,IACA,WAAU;AAAA,IAER,UAAA;AAAA,MAAAC;AAAA,MAEDF,IAEE,gBAAAI;AAAA,QAACE;AAAA,QAAA;AAAA,UACA,KAAI;AAAA,UACJ,MAAOC,EAAiB;AAAA,UACxB,QAASC,EAAY;AAAA,UACrB,OAAQC,EAAQ;AAAA,UAChB,WAAY,0BAA0BP,IAAW,UAAU,EAAE;AAAA,UAE3D,UAAAF;AAAA,QAAA;AAAA,MAAA,IAGF;AAAA,IAAA;AAAA,EAAA;AAAA,GAGN;"}
+{"version":3,"file":"UiTableCell.js","sources":["../../../src/components/UiTable/UiTableCell.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n\tUiTypography, ETextAlign, ETypographySizes, ETextWeight, EColors\n} from \"../UiTypography\";\nimport cx from \"classnames\";\n\ntype TCellProps = {\n\talign?: ETextAlign;\n\tsubText?: React.ReactNode;\n\tweight?: ETextWeight;\n} & React.HTMLAttributes<HTMLTableCellElement>;\n\nexport const UiTableCell: React.FC<TCellProps> = ({ align, subText, weight, children, className, ...rest }) => {\n\treturn (\n\t\t<td { ...rest }>\n\t\t\t<UiTypography\n\t\t\t\ttag=\"div\"\n\t\t\t\tsize={ ETypographySizes.SM }\n\t\t\t\talign={ align }\n\t\t\t\tweight={ weight }\n\t\t\t\tclassName={ cx(\"p-sm\", className) }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t\t{\n\t\t\t\t\tsubText\n\t\t\t\t\t\t? (\n\t\t\t\t\t\t\t<UiTypography\n\t\t\t\t\t\t\t\ttag=\"div\"\n\t\t\t\t\t\t\t\tsize={ ETypographySizes.XXS }\n\t\t\t\t\t\t\t\tweight={ ETextWeight.SEMI_BOLD }\n\t\t\t\t\t\t\t\tcolor={ EColors.PRIMARY_ALT_700 }\n\t\t\t\t\t\t\t\tclassName={ `flex flex-col gap-xxxs ${children ? \"pt-sm\" : \"\"}` }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ subText }\n\t\t\t\t\t\t\t</UiTypography>\n\t\t\t\t\t\t)\n\t\t\t\t\t\t: null\n\t\t\t\t}\n\t\t\t</UiTypography>\n\t\t</td>\n\t);\n};\n"],"names":["UiTableCell","align","subText","weight","children","className","rest","jsx","jsxs","UiTypography","ETypographySizes","cx","ETextWeight","EColors"],"mappings":";;;;;;AAYa,MAAAA,IAAoC,CAAC,EAAE,OAAAC,GAAO,SAAAC,GAAS,QAAAC,GAAQ,UAAAC,GAAU,WAAAC,GAAW,GAAGC,QAElG,gBAAAC,EAAC,MAAK,EAAA,GAAGD,GACR,UAAA,gBAAAE;AAAA,EAACC;AAAA,EAAA;AAAA,IACA,KAAI;AAAA,IACJ,MAAOC,EAAiB;AAAA,IACxB,OAAAT;AAAA,IACA,QAAAE;AAAA,IACA,WAAYQ,EAAG,QAAQN,CAAS;AAAA,IAE9B,UAAA;AAAA,MAAAD;AAAA,MAEDF,IAEE,gBAAAK;AAAA,QAACE;AAAA,QAAA;AAAA,UACA,KAAI;AAAA,UACJ,MAAOC,EAAiB;AAAA,UACxB,QAASE,EAAY;AAAA,UACrB,OAAQC,EAAQ;AAAA,UAChB,WAAY,0BAA0BT,IAAW,UAAU,EAAE;AAAA,UAE3D,UAAAF;AAAA,QAAA;AAAA,MAAA,IAGF;AAAA,IAAA;AAAA,EAAA;AAAA,GAGN;"}

package/components/UiTabs/UiTabs.d.ts

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 type UiTabsProps = {
     tabs: string[];
     tabsModel: string;
+    className: string;
     onTabChange: (val: string) => void;
 };
 export declare const UiTabs: React.FC<UiTabsProps>;

package/components/UiTabs/UiTabs.js

@@ -1,10 +1,11 @@
-import { jsx as o, jsxs as c } from "react/jsx-runtime";
+import { jsx as o, jsxs as n } from "react/jsx-runtime";
 import "react";
 import r from "classnames";
-const i = ({
+const p = ({
   tabs: s,
   tabsModel: l,
-  onTabChange: a
+  onTabChange: a,
+  className: c
 }) => /* @__PURE__ */ o("ul", { className: r(
   "ui-tabs",
   "grid",
@@ -12,7 +13,8 @@ const i = ({
   "rounded-full",
   "bg-secondary-alt-200",
   "p-[2px]",
-  "text-secondary-400"
+  "text-secondary-400",
+  c
 ), children: s.map((e) => /* @__PURE__ */ o(
   "li",
   {
@@ -21,7 +23,7 @@ const i = ({
       "text-center",
       l === e && "bg-white border border-secondary-alt-600 text-secondary-500"
     ),
-    children: /* @__PURE__ */ c("label", { className: r(
+    children: /* @__PURE__ */ n("label", { className: r(
       "block",
       "cursor-pointer",
       "px-md",
@@ -49,6 +51,6 @@ const i = ({
   e
 )) });
 export {
-  i as UiTabs
+  p as UiTabs
 };
 //# sourceMappingURL=UiTabs.js.map

package/components/UiTabs/UiTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiTabs.js","sources":["../../../src/components/UiTabs/UiTabs.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\n\ntype UiTabsProps ={\n\ttabs: string[]\n\ttabsModel  : string,\n\tonTabChange: (val: string) => void\n}\n\nexport const UiTabs: React.FC<UiTabsProps> = ({\n\ttabs,\n\ttabsModel,\n\tonTabChange\n}) => {\n\n\treturn (\n\t\t<ul className={ cx(\n\t\t\t\"ui-tabs\",\n\t\t\t\"grid\",\n\t\t\t\"grid-flow-col\",\n\t\t\t\"rounded-full\",\n\t\t\t\"bg-secondary-alt-200\",\n\t\t\t\"p-[2px]\",\n\t\t\t\"text-secondary-400\"\n\n\t\t) }>\n\t\t\t{ tabs.map((tab) => (\n\t\t\t\t<li\n\t\t\t\t\tkey={ tab }\n\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\t\"text-center\",\n\t\t\t\t\t\ttabsModel === tab && \"bg-white border border-secondary-alt-600 text-secondary-500\",\n\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<label className={ cx(\n\t\t\t\t\t\t\"block\",\n\t\t\t\t\t\t\"cursor-pointer\",\n\t\t\t\t\t\t\"px-md\",\n\t\t\t\t\t\t\"py-xxs\"\n\t\t\t\t\t) }>\n\t\t\t\t\t\t<input className={ cx(\n\t\t\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\t\t\"appearance-none\"\n\t\t\t\t\t\t) }\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue={ tab }\n\t\t\t\t\t\tchecked={ tabsModel === tab }\n\t\t\t\t\t\tonChange={ ()=> onTabChange(tab) }>\n\t\t\t\t\t\t</input>\n\n\t\t\t\t\t\t<span className={ cx(\n\t\t\t\t\t\t\t\"font-bold\",\n\t\t\t\t\t\t\t\"text-xs\"\n\t\t\t\t\t\t) }>\n\t\t\t\t\t\t\t{ tab }\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t</label>\n\n\t\t\t\t</li>\n\t\t\t)) }\n\t\t</ul>\n\t);\n};\n"],"names":["UiTabs","tabs","tabsModel","onTabChange","jsx","cx","tab","jsxs"],"mappings":";;;AASO,MAAMA,IAAgC,CAAC;AAAA,EAC7C,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AACD,MAGE,gBAAAC,EAAC,QAAG,WAAYC;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAGE,GAAA,UAAAJ,EAAK,IAAI,CAACK,MACX,gBAAAF;AAAA,EAAC;AAAA,EAAA;AAAA,IAEA,WAAYC;AAAA,MACX;AAAA,MACA;AAAA,MACAH,MAAcI,KAAO;AAAA,IAEtB;AAAA,IAEA,UAAA,gBAAAC,EAAC,WAAM,WAAYF;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAEA,GAAA,UAAA;AAAA,MAAA,gBAAAD;AAAA,QAAC;AAAA,QAAA;AAAA,UAAM,WAAYC;AAAA,YAClB;AAAA,YACA;AAAA,UACD;AAAA,UACA,MAAK;AAAA,UACL,OAAQC;AAAA,UACR,SAAUJ,MAAcI;AAAA,UACxB,UAAW,MAAKH,EAAYG,CAAG;AAAA,QAAA;AAAA,MAC/B;AAAA,MAEA,gBAAAF,EAAC,UAAK,WAAYC;AAAA,QACjB;AAAA,QACA;AAAA,MAAA,GAEE,UACHC,EAAA,CAAA;AAAA,IAAA,EAED,CAAA;AAAA,EAAA;AAAA,EA/BMA;AAkCP,CAAA,GACF;"}
+{"version":3,"file":"UiTabs.js","sources":["../../../src/components/UiTabs/UiTabs.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\n\ntype UiTabsProps ={\n\ttabs: string[]\n\ttabsModel: string,\n\tclassName: string\n\tonTabChange: (val: string) => void\n}\n\nexport const UiTabs: React.FC<UiTabsProps> = ({\n\ttabs,\n\ttabsModel,\n\tonTabChange,\n\tclassName\n}) => {\n\n\treturn (\n\t\t<ul className={ cx(\n\t\t\t\"ui-tabs\",\n\t\t\t\"grid\",\n\t\t\t\"grid-flow-col\",\n\t\t\t\"rounded-full\",\n\t\t\t\"bg-secondary-alt-200\",\n\t\t\t\"p-[2px]\",\n\t\t\t\"text-secondary-400\",\n\t\t\tclassName\n\t\t) }>\n\t\t\t{ tabs.map((tab) => (\n\t\t\t\t<li\n\t\t\t\t\tkey={ tab }\n\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\t\"text-center\",\n\t\t\t\t\t\ttabsModel === tab && \"bg-white border border-secondary-alt-600 text-secondary-500\",\n\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<label className={ cx(\n\t\t\t\t\t\t\"block\",\n\t\t\t\t\t\t\"cursor-pointer\",\n\t\t\t\t\t\t\"px-md\",\n\t\t\t\t\t\t\"py-xxs\"\n\t\t\t\t\t) }>\n\t\t\t\t\t\t<input className={ cx(\n\t\t\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\t\t\"appearance-none\"\n\t\t\t\t\t\t) }\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue={ tab }\n\t\t\t\t\t\tchecked={ tabsModel === tab }\n\t\t\t\t\t\tonChange={ ()=> onTabChange(tab) }>\n\t\t\t\t\t\t</input>\n\n\t\t\t\t\t\t<span className={ cx(\n\t\t\t\t\t\t\t\"font-bold\",\n\t\t\t\t\t\t\t\"text-xs\"\n\t\t\t\t\t\t) }>\n\t\t\t\t\t\t\t{ tab }\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t</label>\n\n\t\t\t\t</li>\n\t\t\t)) }\n\t\t</ul>\n\t);\n};\n"],"names":["UiTabs","tabs","tabsModel","onTabChange","className","jsx","cx","tab","jsxs"],"mappings":";;;AAUO,MAAMA,IAAgC,CAAC;AAAA,EAC7C,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AACD,MAGE,gBAAAC,EAAC,QAAG,WAAYC;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACAF;AAEE,GAAA,UAAAH,EAAK,IAAI,CAACM,MACX,gBAAAF;AAAA,EAAC;AAAA,EAAA;AAAA,IAEA,WAAYC;AAAA,MACX;AAAA,MACA;AAAA,MACAJ,MAAcK,KAAO;AAAA,IAEtB;AAAA,IAEA,UAAA,gBAAAC,EAAC,WAAM,WAAYF;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAEA,GAAA,UAAA;AAAA,MAAA,gBAAAD;AAAA,QAAC;AAAA,QAAA;AAAA,UAAM,WAAYC;AAAA,YAClB;AAAA,YACA;AAAA,UACD;AAAA,UACA,MAAK;AAAA,UACL,OAAQC;AAAA,UACR,SAAUL,MAAcK;AAAA,UACxB,UAAW,MAAKJ,EAAYI,CAAG;AAAA,QAAA;AAAA,MAC/B;AAAA,MAEA,gBAAAF,EAAC,UAAK,WAAYC;AAAA,QACjB;AAAA,QACA;AAAA,MAAA,GAEE,UACHC,EAAA,CAAA;AAAA,IAAA,EAED,CAAA;AAAA,EAAA;AAAA,EA/BMA;AAkCP,CAAA,GACF;"}

package/components/UiToggle/UiToggle.js

@@ -1,28 +1,35 @@
-import { jsx as a, jsxs as i } from "react/jsx-runtime";
-import { useState as u, useEffect as g } from "react";
-import o from "classnames";
-const v = ({
-  children: m,
-  disabled: r = !1,
-  invertOrder: p = !1,
-  checked: s,
-  value: t,
-  defaultChecked: d,
-  onChange: l,
-  ...f
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import { useState as T, useEffect as f } from "react";
+import t from "classnames";
+import '../../assets/UiToggle.css';const U = "_UiToggle__dot_1uov6_1", v = "_UiToggle__dot_checked_1uov6_13", k = "_UiToggle__icon_1uov6_17", w = "_UiToggle__icon_checked_1uov6_26", l = {
+  UiToggle__dot: U,
+  UiToggle__dot_checked: v,
+  UiToggle__icon: k,
+  UiToggle__icon_checked: w
+}, N = ({
+  children: a,
+  disabled: e = !1,
+  invertOrder: d = !1,
+  checked: c,
+  value: i,
+  className: m,
+  defaultChecked: h,
+  onChange: s,
+  ...p
 }) => {
-  const [n, c] = u(d ?? !1), e = t ?? s ?? n, x = () => {
-    t === void 0 && s === void 0 && c(!n), l == null || l(!e);
+  const [_, g] = T(h ?? !1), o = i ?? c ?? _, u = () => {
+    i === void 0 && c === void 0 && g(!_), s == null || s(!o);
   };
-  return g(() => {
-    s !== void 0 && c(s);
-  }, [s]), /* @__PURE__ */ a(
+  return f(() => {
+    c !== void 0 && g(c);
+  }, [c]), /* @__PURE__ */ r(
     "div",
     {
-      className: o(
-        "ui-toggle"
+      className: t(
+        "ui-toggle",
+        m
       ),
-      children: /* @__PURE__ */ i("label", { className: o(
+      children: /* @__PURE__ */ n("label", { className: t(
         "flex",
         "cursor-pointer",
         "gap-sm",
@@ -33,71 +40,90 @@ const v = ({
         "leading-normal",
         "text-md",
         {
-          "flex-row-reverse": p,
-          "pointer-events-none opacity-50": r
+          "flex-row-reverse": d,
+          "pointer-events-none opacity-50": e
         }
       ), children: [
-        /* @__PURE__ */ i("span", { className: o(
+        /* @__PURE__ */ n("span", { className: t(
           "relative",
           "block",
           "h-md"
         ), children: [
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ r(
             "input",
             {
-              className: o(
+              className: t(
                 "absolute",
                 "size-0",
                 "appearance-none",
                 "border-0"
               ),
               type: "checkbox",
-              checked: e,
-              onChange: x,
-              disabled: r,
-              value: t,
-              ...f
+              checked: o,
+              onChange: u,
+              disabled: e,
+              value: i,
+              ...p
             }
           ),
-          /* @__PURE__ */ a("span", { className: o(
+          /* @__PURE__ */ r("span", { className: t(
             "block",
             "h-md",
             "w-xl",
             "rounded-full",
             {
-              "bg-primary-500": e && !r,
-              "bg-secondary-alt-300": !e && r,
-              "bg-secondary-alt-600": !e && !r,
-              "bg-primary-300": e && r
+              "bg-primary-600": o && !e,
+              "bg-secondary-alt-300": !o && e,
+              "bg-secondary-alt-600": !o && !e,
+              "bg-primary-300": o && e
             }
           ) }),
-          /* @__PURE__ */ a("span", { className: o(
+          /* @__PURE__ */ r("span", { className: t(
             "absolute",
             "top-[50%]",
             "block",
             "rounded-full",
             "bg-white",
-            "w-[22px]",
-            "h-[22px]",
-            "translate-x-[1px]",
-            "translate-y-[-50%]",
-            "ease-in-out",
-            "transition-transform",
-            "active:shadow-border-secondary",
-            "focus:shadow-border-secondary",
+            l.UiToggle__dot,
+            {
+              "hover:shadow-border-secondary": !o && !e,
+              "hover:shadow-border-primary": o && !e,
+              [l.UiToggle__dot_checked]: o
+            }
+          ), children: /* @__PURE__ */ r(
+            "svg",
             {
-              "hover:shadow-border-secondary": !e && !r,
-              "hover:shadow-border-primary": e && !r,
-              "translate-x-[calc(var(--xl)_-_100%_-_1px)] translate-y-[-50%]": e
+              className: t(
+                l.UiToggle__icon,
+                "absolute",
+                e ? "text-primary-300" : "text-primary-600",
+                {
+                  [l.UiToggle__icon_checked]: o
+                }
+              ),
+              width: "16",
+              height: "16",
+              viewBox: "0 0 16 16",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: /* @__PURE__ */ r(
+                "path",
+                {
+                  d: "M1 4.40106L6.60071 10.1135L15.1694 1.71245",
+                  stroke: "currentColor",
+                  "stroke-width": "1.6",
+                  "stroke-linecap": "round"
+                }
+              )
             }
           ) })
         ] }),
-        m
+        a
       ] })
     }
   );
 };
 export {
-  v as UiToggle
+  N as UiToggle
 };
 //# sourceMappingURL=UiToggle.js.map

package/components/UiToggle/UiToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiToggle.js","sources":["../../../src/components/UiToggle/UiToggle.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport cx from \"classnames\";\n\ntype TUiToggleProps = {\n\tchildren?: React.ReactNode\n\tdisabled?: boolean\n\tinvertOrder?: boolean\n\tdefaultChecked?: boolean\n\tchecked?: boolean\n\tvalue?: boolean\n\tonChange?: (checked: boolean) => void\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, \"onChange\">;\n\nexport const UiToggle: React.FC<TUiToggleProps> = ({\n\tchildren,\n\tdisabled = false,\n\tinvertOrder = false,\n\tchecked,\n\tvalue,\n\tdefaultChecked,\n\tonChange,\n\t...rest\n}) => {\n\n\tconst [toggled, setIsToggled] = useState<boolean>(defaultChecked ??  false);\n\n\tconst isChecked = value ?? checked ?? toggled;\n\n\tconst handleChange = () => {\n\t\tif (value === undefined && checked === undefined) {\n\t\t\tsetIsToggled(!toggled);\n\t\t}\n\n\t\tonChange?.(!isChecked);\n\t};\n\n\tuseEffect(()=>{\n\t\tif ( checked !== undefined) {\n\t\t\tsetIsToggled(checked);\n\t\t}\n\t}, [checked]);\n\n\treturn (\n\t\t<div className={ cx(\n\t\t\t\"ui-toggle\"\n\t\t) }\n\t\t>\n\n\t\t\t<label className={ cx(\n\t\t\t\t\"flex\",\n\t\t\t\t\"cursor-pointer\",\n\t\t\t\t\"gap-sm\",\n\t\t\t\t\"rounded-full\",\n\t\t\t\t\"mt-sm\",\n\t\t\t\t\"items-center\",\n\t\t\t\t\"w-full\",\n\t\t\t\t\"leading-normal\",\n\t\t\t\t\"text-md\",\n\t\t\t\t{\n\t\t\t\t\t\"flex-row-reverse\": invertOrder,\n\t\t\t\t\t\"pointer-events-none opacity-50\": disabled\n\t\t\t\t}\n\n\t\t\t) }>\n\t\t\t\t<span className={ cx(\n\t\t\t\t\t\"relative\",\n\t\t\t\t\t\"block\",\n\t\t\t\t\t\"h-md\"\n\t\t\t\t) }>\n\n\t\t\t\t\t<input className={ cx(\n\t\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\t\"size-0\",\n\t\t\t\t\t\t\"appearance-none\",\n\t\t\t\t\t\t\"border-0\"\n\t\t\t\t\t) }\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tchecked={ isChecked }\n\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\t{ ...rest }\n\t\t\t\t\t>\n\t\t\t\t\t</input>\n\n\t\t\t\t\t<span className={ cx(\n\t\t\t\t\t\t\"block\",\n\t\t\t\t\t\t\"h-md\",\n\t\t\t\t\t\t\"w-xl\",\n\t\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"bg-primary-500\": isChecked && !disabled,\n\t\t\t\t\t\t\t\"bg-secondary-alt-300\": !isChecked && disabled,\n\t\t\t\t\t\t\t\"bg-secondary-alt-600\": !isChecked && !disabled,\n\t\t\t\t\t\t\t\"bg-primary-300\": isChecked && disabled\n\n\t\t\t\t\t\t}\n\t\t\t\t\t) }>\n\n\t\t\t\t\t</span>\n\t\t\t\t\t<span className={ cx(\n\t\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\t\"top-[50%]\",\n\t\t\t\t\t\t\"block\",\n\t\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\t\"bg-white\",\n\t\t\t\t\t\t\"w-[22px]\",\n\t\t\t\t\t\t\"h-[22px]\",\n\t\t\t\t\t\t\"translate-x-[1px]\",\n\t\t\t\t\t\t\"translate-y-[-50%]\",\n\t\t\t\t\t\t\"ease-in-out\",\n\t\t\t\t\t\t\"transition-transform\",\n\t\t\t\t\t\t\"active:shadow-border-secondary\",\n\t\t\t\t\t\t\"focus:shadow-border-secondary\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"hover:shadow-border-secondary\": !isChecked && !disabled,\n\t\t\t\t\t\t\t\"hover:shadow-border-primary\": isChecked && !disabled,\n\t\t\t\t\t\t\t\"translate-x-[calc(var(--xl)_-_100%_-_1px)] translate-y-[-50%]\": isChecked\n\t\t\t\t\t\t},\n\n\t\t\t\t\t) }>\n\t\t\t\t\t</span>\n\t\t\t\t</span>\n\n\t\t\t\t{ children }\n\n\t\t\t</label>\n\n\t\t</div>\n\t);\n};\n"],"names":["UiToggle","children","disabled","invertOrder","checked","value","defaultChecked","onChange","rest","toggled","setIsToggled","useState","isChecked","handleChange","useEffect","jsx","cx","jsxs"],"mappings":";;;AAaO,MAAMA,IAAqC,CAAC;AAAA,EAClD,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,aAAAC,IAAc;AAAA,EACd,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AAEL,QAAM,CAACC,GAASC,CAAY,IAAIC,EAAkBL,KAAmB,EAAK,GAEpEM,IAAYP,KAASD,KAAWK,GAEhCI,IAAe,MAAM;AACtB,IAAAR,MAAU,UAAaD,MAAY,UACtCM,EAAa,CAACD,CAAO,GAGtBF,KAAA,QAAAA,EAAW,CAACK;AAAA,EACb;AAEA,SAAAE,EAAU,MAAI;AACb,IAAKV,MAAY,UAChBM,EAAaN,CAAO;AAAA,EACrB,GACE,CAACA,CAAO,CAAC,GAGX,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MAAI,WAAYC;AAAA,QAChB;AAAA,MACD;AAAA,MAGC,UAAA,gBAAAC,EAAC,WAAM,WAAYD;AAAA,QAClB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,UACC,oBAAoBb;AAAA,UACpB,kCAAkCD;AAAA,QAAA;AAAA,MAInC,GAAA,UAAA;AAAA,QAAA,gBAAAe,EAAC,UAAK,WAAYD;AAAA,UACjB;AAAA,UACA;AAAA,UACA;AAAA,QAGA,GAAA,UAAA;AAAA,UAAA,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cAAM,WAAYC;AAAA,gBAClB;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cACD;AAAA,cACA,MAAK;AAAA,cACL,SAAUJ;AAAA,cACV,UAAWC;AAAA,cACX,UAAAX;AAAA,cACA,OAAAG;AAAA,cACE,GAAGG;AAAA,YAAA;AAAA,UAEL;AAAA,UAEA,gBAAAO,EAAC,UAAK,WAAYC;AAAA,YACjB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,cACC,kBAAkBJ,KAAa,CAACV;AAAA,cAChC,wBAAwB,CAACU,KAAaV;AAAA,cACtC,wBAAwB,CAACU,KAAa,CAACV;AAAA,cACvC,kBAAkBU,KAAaV;AAAA,YAAA;AAAA,UAEhC,GAGD;AAAA,UACA,gBAAAa,EAAC,UAAK,WAAYC;AAAA,YACjB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,cACC,iCAAiC,CAACJ,KAAa,CAACV;AAAA,cAChD,+BAA+BU,KAAa,CAACV;AAAA,cAC7C,iEAAiEU;AAAA,YAAA;AAAA,UAClE,EAGD,CAAA;AAAA,QAAA,GACD;AAAA,QAEEX;AAAA,MAAA,EAEH,CAAA;AAAA,IAAA;AAAA,EAED;AAEF;"}
+{"version":3,"file":"UiToggle.js","sources":["../../../src/components/UiToggle/UiToggle.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./UiToggle.module.css\";\n\ntype TUiToggleProps = {\n\tchildren?: React.ReactNode\n\tdisabled?: boolean\n\tinvertOrder?: boolean\n\tdefaultChecked?: boolean\n\tchecked?: boolean\n\tvalue?: boolean\n\tonChange?: (checked: boolean) => void\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, \"onChange\">;\n\nexport const UiToggle: React.FC<TUiToggleProps> = ({\n\tchildren,\n\tdisabled = false,\n\tinvertOrder = false,\n\tchecked,\n\tvalue,\n\tclassName,\n\tdefaultChecked,\n\tonChange,\n\t...rest\n}) => {\n\n\tconst [toggled, setIsToggled] = useState<boolean>(defaultChecked ??  false);\n\n\tconst isChecked = value ?? checked ?? toggled;\n\n\tconst handleChange = () => {\n\t\tif (value === undefined && checked === undefined) {\n\t\t\tsetIsToggled(!toggled);\n\t\t}\n\n\t\tonChange?.(!isChecked);\n\t};\n\n\tuseEffect(()=>{\n\t\tif ( checked !== undefined) {\n\t\t\tsetIsToggled(checked);\n\t\t}\n\t}, [checked]);\n\n\treturn (\n\t\t<div className={ cx(\n\t\t\t\"ui-toggle\",\n\t\t\tclassName\n\t\t) }\n\t\t>\n\n\t\t\t<label className={ cx(\n\t\t\t\t\"flex\",\n\t\t\t\t\"cursor-pointer\",\n\t\t\t\t\"gap-sm\",\n\t\t\t\t\"rounded-full\",\n\t\t\t\t\"mt-sm\",\n\t\t\t\t\"items-center\",\n\t\t\t\t\"w-full\",\n\t\t\t\t\"leading-normal\",\n\t\t\t\t\"text-md\",\n\t\t\t\t{\n\t\t\t\t\t\"flex-row-reverse\": invertOrder,\n\t\t\t\t\t\"pointer-events-none opacity-50\": disabled\n\t\t\t\t}\n\n\t\t\t) }>\n\t\t\t\t<span className={ cx(\n\t\t\t\t\t\"relative\",\n\t\t\t\t\t\"block\",\n\t\t\t\t\t\"h-md\"\n\t\t\t\t) }>\n\n\t\t\t\t\t<input className={ cx(\n\t\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\t\"size-0\",\n\t\t\t\t\t\t\"appearance-none\",\n\t\t\t\t\t\t\"border-0\"\n\t\t\t\t\t) }\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tchecked={ isChecked }\n\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\t{ ...rest }\n\t\t\t\t\t>\n\t\t\t\t\t</input>\n\n\t\t\t\t\t<span className={ cx(\n\t\t\t\t\t\t\"block\",\n\t\t\t\t\t\t\"h-md\",\n\t\t\t\t\t\t\"w-xl\",\n\t\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"bg-primary-600\": isChecked && !disabled,\n\t\t\t\t\t\t\t\"bg-secondary-alt-300\": !isChecked && disabled,\n\t\t\t\t\t\t\t\"bg-secondary-alt-600\": !isChecked && !disabled,\n\t\t\t\t\t\t\t\"bg-primary-300\": isChecked && disabled\n\n\t\t\t\t\t\t}\n\t\t\t\t\t) }/>\n\n\t\t\t\t\t<span className={ cx(\n\t\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\t\"top-[50%]\",\n\t\t\t\t\t\t\"block\",\n\t\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\t\"bg-white\",\n\t\t\t\t\t\tstyles.UiToggle__dot,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"hover:shadow-border-secondary\": !isChecked && !disabled,\n\t\t\t\t\t\t\t\"hover:shadow-border-primary\": isChecked && !disabled,\n\t\t\t\t\t\t\t[styles.UiToggle__dot_checked]: isChecked\n\t\t\t\t\t\t},\n\n\t\t\t\t\t) }>\n\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\tstyles.UiToggle__icon,\n\t\t\t\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\t\t\tdisabled ? \"text-primary-300\" : \"text-primary-600\",\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t[styles.UiToggle__icon_checked]: isChecked ,\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M1 4.40106L6.60071 10.1135L15.1694 1.71245\"\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\tstroke-width=\"1.6\"\n\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\n\t\t\t\t\t</span>\n\t\t\t\t</span>\n\n\t\t\t\t{ children }\n\n\t\t\t</label>\n\n\t\t</div>\n\t);\n};\n"],"names":["UiToggle","children","disabled","invertOrder","checked","value","className","defaultChecked","onChange","rest","toggled","setIsToggled","useState","isChecked","handleChange","useEffect","jsx","cx","jsxs","styles"],"mappings":"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"}

package/index.d.ts

@@ -4,6 +4,7 @@ export * from './components/UiBerRank';
 export * from './components/UiButton';
 export * from './components/UiCheckbox';
 export * from './components/UiIcon';
+export * from './components/UiIconBadge';
 export * from './components/UiInput';
 export * from './components/UiInputRange';
 export * from './components/UiList';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bonkers-ui",
-    "version": "v2.0.3",
+    "version": "v2.0.4",
     "type": "module",
     "description": "Bonkers ui library",
     "author": "cc6.magister@gmail.com",
@@ -18,45 +18,45 @@
         "prepare": "husky"
     },
     "dependencies": {
-        "@tailwindcss/vite": "^4.0.9",
+        "@tailwindcss/vite": "^4.0.14",
         "ajv": "^8.17.1",
         "classnames": "^2.5.1",
         "postcss": "^8.5.3",
-        "prettier": "^3.5.2",
+        "prettier": "^3.5.3",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
-        "tailwindcss": "^4.0.9",
+        "tailwindcss": "^4.0.14",
         "vite-tsconfig-paths": "^5.1.4"
     },
     "devDependencies": {
-        "@chromatic-com/storybook": "^3.2.4",
-        "@storybook/addon-essentials": "^8.6.0",
-        "@storybook/addon-interactions": "^8.6.0",
-        "@storybook/addon-onboarding": "^8.6.0",
-        "@storybook/blocks": "^8.6.0",
-        "@storybook/manager-api": "^8.6.0",
-        "@storybook/preview-api": "^8.6.0",
-        "@storybook/react": "^8.6.0",
-        "@storybook/react-vite": "^8.6.0",
-        "@storybook/test": "^8.6.0",
-        "@stylistic/eslint-plugin": "^4.1.0",
+        "@chromatic-com/storybook": "^3.2.6",
+        "@storybook/addon-essentials": "^8.6.7",
+        "@storybook/addon-interactions": "^8.6.7",
+        "@storybook/addon-onboarding": "^8.6.7",
+        "@storybook/blocks": "^8.6.7",
+        "@storybook/manager-api": "^8.6.7",
+        "@storybook/preview-api": "^8.6.7",
+        "@storybook/react": "^8.6.7",
+        "@storybook/react-vite": "^8.6.7",
+        "@storybook/test": "^8.6.7",
+        "@stylistic/eslint-plugin": "^4.2.0",
         "@types/bun": "latest",
-        "@types/react": "^19.0.10",
+        "@types/react": "^19.0.12",
         "@types/react-dom": "^19.0.4",
         "@vitejs/plugin-react": "^4.3.4",
-        "eslint": "^9.21.0",
+        "eslint": "^9.22.0",
         "eslint-plugin-react": "^7.37.4",
-        "eslint-plugin-storybook": "^0.11.3",
+        "eslint-plugin-storybook": "^0.11.6",
         "eslint-plugin-tailwindcss": "^3.18.0",
         "gh-pages": "^6.3.0",
         "husky": "^9.1.7",
-        "lint-staged": "^15.4.3",
-        "storybook": "^8.6.0",
+        "lint-staged": "^15.5.0",
+        "storybook": "^8.6.7",
         "storybook-dark-mode": "^4.0.2",
-        "typescript": "^5.7.3",
-        "typescript-eslint": "^8.25.0",
-        "vite": "^6.2.0",
-        "vite-plugin-dts": "^4.5.0",
+        "typescript": "^5.8.2",
+        "typescript-eslint": "^8.26.1",
+        "vite": "^6.2.2",
+        "vite-plugin-dts": "^4.5.3",
         "vite-plugin-lib-inject-css": "^2.2.1"
     },
     "peerDependencies": {