@konstructio/ui 0.0.12-alpha.1 → 0.0.12-alpha.3

package/dist/components/Command/components/DialogContent.js

@@ -0,0 +1,31 @@
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { a as r, C as o, b as l } from "../../../index-DyKo5ZJT.js";
+import { cn as m } from "../../../utils/index.js";
+import { DialogOverlay as p } from "./DialogOverlay.js";
+import { X as c } from "../../../x-DU-Zw-L_.js";
+const f = i(({ className: e, children: s, ...n }, d) => /* @__PURE__ */ t(r, { children: [
+  /* @__PURE__ */ a(p, {}),
+  /* @__PURE__ */ t(
+    o,
+    {
+      ref: d,
+      className: m(
+        "fixed text-white left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        e
+      ),
+      ...n,
+      children: [
+        s,
+        /* @__PURE__ */ t(l, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground text-white", children: [
+          /* @__PURE__ */ a(c, { className: "h-4 w-4" }),
+          /* @__PURE__ */ a("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+f.displayName = o.displayName;
+export {
+  f as DialogContent
+};

package/dist/components/Command/components/DialogOverlay.js

@@ -0,0 +1,19 @@
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { O as a } from "../../../index-DyKo5ZJT.js";
+import { cn as m } from "../../../utils/index.js";
+const r = i(({ className: t, ...e }, o) => /* @__PURE__ */ s(
+  a,
+  {
+    ref: o,
+    className: m(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      t
+    ),
+    ...e
+  }
+));
+r.displayName = a.displayName;
+export {
+  r as DialogOverlay
+};

package/dist/components/Command/components/index.js

@@ -0,0 +1,20 @@
+import { CommandEmpty as r } from "./CommandEmpty.js";
+import { CommandGroup as p } from "./CommandGroup.js";
+import { CommandInput as a } from "./CommandInput.js";
+import { CommandItem as f } from "./CommandItem.js";
+import { CommandList as C } from "./CommandList.js";
+import { CommandSeparator as u } from "./CommandSeparator.js";
+import { CommandShortcut as I } from "./CommandShortcut.js";
+import { DialogContent as c } from "./DialogContent.js";
+import { Command as h } from "./Command.js";
+export {
+  h as Command,
+  r as CommandEmpty,
+  p as CommandGroup,
+  a as CommandInput,
+  f as CommandItem,
+  C as CommandList,
+  u as CommandSeparator,
+  I as CommandShortcut,
+  c as DialogContent
+};

package/dist/components/Command/contexts/Command.context.js

@@ -0,0 +1,13 @@
+import { createContext as e } from "react";
+const t = {
+  isOpen: !1,
+  setOpen: () => {
+    throw new Error("onOpen is not implemented");
+  },
+  toggleOpen: () => {
+    throw new Error("toggleOpen is not implemented");
+  }
+}, o = e(t);
+export {
+  o as CommandContext
+};

package/dist/components/Command/contexts/Command.provider.js

@@ -0,0 +1,24 @@
+import { CommandContext as s } from "./Command.context.js";
+import { jsx as a } from "react/jsx-runtime";
+import { useCallback as e } from "react";
+import { useToggle as p } from "../../../hooks/useToggle.js";
+const f = ({ children: t }) => {
+  const [r, o] = p(!1), n = e(
+    (l) => o(l),
+    [o]
+  ), m = e(() => o(), [o]);
+  return /* @__PURE__ */ a(
+    s.Provider,
+    {
+      value: {
+        isOpen: r,
+        setOpen: n,
+        toggleOpen: m
+      },
+      children: t
+    }
+  );
+};
+export {
+  f as CommandProvider
+};

package/dist/components/Command/contexts/index.js

@@ -0,0 +1,6 @@
+import { CommandContext as r } from "./Command.context.js";
+import { CommandProvider as t } from "./Command.provider.js";
+export {
+  r as CommandContext,
+  t as CommandProvider
+};

package/dist/components/Divider/Divider.js

@@ -0,0 +1,10 @@
+import { jsx as e } from "react/jsx-runtime";
+import { dividerVariants as a } from "./Divider.variants.js";
+const d = ({
+  className: i,
+  ...r
+}) => /* @__PURE__ */ e("div", { className: a({ className: i }), ...r });
+d.displayName = "Divider";
+export {
+  d as Divider
+};

package/dist/components/Divider/Divider.variants.js

@@ -0,0 +1,14 @@
+import { c as a } from "../../index-BNmRGtA6.js";
+const i = a(["h-[1px]", "bg-zinc-200", "w-full"], {
+  variants: {
+    variant: {
+      default: ""
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+export {
+  i as dividerVariants
+};

package/dist/components/Loading/Loading.js

@@ -0,0 +1,109 @@
+import { jsx as f } from "react/jsx-runtime";
+import { cn as h } from "../../utils/index.js";
+import { loadingVariants as g } from "./Loading.variants.js";
+import { forwardRef as s, createElement as i } from "react";
+import { useTheme as w } from "../../contexts/theme.hook.js";
+/**
+* @license lucide-react v0.475.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const C = (r) => r.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), m = (...r) => r.filter((e, o, t) => !!e && e.trim() !== "" && t.indexOf(e) === o).join(" ").trim();
+/**
+* @license lucide-react v0.475.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var L = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+/**
+* @license lucide-react v0.475.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const k = s(
+  ({
+    color: r = "currentColor",
+    size: e = 24,
+    strokeWidth: o = 2,
+    absoluteStrokeWidth: t,
+    className: a = "",
+    children: n,
+    iconNode: c,
+    ...d
+  }, l) => i(
+    "svg",
+    {
+      ref: l,
+      ...L,
+      width: e,
+      height: e,
+      stroke: r,
+      strokeWidth: t ? Number(o) * 24 / Number(e) : o,
+      className: m("lucide", a),
+      ...d
+    },
+    [
+      ...c.map(([u, p]) => i(u, p)),
+      ...Array.isArray(n) ? n : [n]
+    ]
+  )
+);
+/**
+* @license lucide-react v0.475.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const x = (r, e) => {
+  const o = s(
+    ({ className: t, ...a }, n) => i(k, {
+      ref: n,
+      iconNode: e,
+      className: m(`lucide-${C(r)}`, t),
+      ...a
+    })
+  );
+  return o.displayName = `${r}`, o;
+};
+/**
+* @license lucide-react v0.475.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const b = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]], y = x("LoaderCircle", b), N = ({
+  className: r,
+  theme: e,
+  ...o
+}) => {
+  const { theme: t } = w();
+  return /* @__PURE__ */ f(
+    y,
+    {
+      className: h(
+        g({
+          className: r,
+          theme: e ?? t
+        })
+      ),
+      ...o
+    }
+  );
+};
+N.displayName = "Loading";
+export {
+  N as Loading
+};

package/dist/components/Loading/Loading.variants.js

@@ -0,0 +1,19 @@
+import { c as t } from "../../index-BNmRGtA6.js";
+const r = t(
+  ["h-8", "w-8", "animate-spin", "text-inherit"],
+  {
+    variants: {
+      theme: {
+        kubefirst: "text-kubefirst-primary",
+        colony: "text-colony-primary",
+        civo: "text-civo-primary"
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+);
+export {
+  r as loadingVariants
+};

package/dist/components/Modal/Modal.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
-import "../../index-1GLoikpT.js";
-import { M as d } from "../../Modal-W2GbkC_F.js";
+import "../../index-D7QNmo_D.js";
+import { M as d } from "../../Modal-ByNiP7eb.js";
 import "./components/Header/Header.js";
 import "./components/Body/Body.js";
 import "./components/Footer/Footer.js";

package/dist/components/Modal/components/Body/Body.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { S as n } from "../../../../index-DoOsnuB6.js";
+import { S as n } from "../../../../index-B_6_jmOO.js";
 import { cn as e } from "../../../../utils/index.js";
 const i = ({ children: o, asChild: t, className: m }) => /* @__PURE__ */ r(t ? n : "div", { className: e("flex-1", m), children: o });
 export {

package/dist/components/Modal/components/Footer/Footer.js

@@ -1,5 +1,5 @@
 import { jsx as m } from "react/jsx-runtime";
-import { S as n } from "../../../../index-DoOsnuB6.js";
+import { S as n } from "../../../../index-B_6_jmOO.js";
 import { cn as e } from "../../../../utils/index.js";
 const a = ({ children: o, asChild: t, className: r }) => /* @__PURE__ */ m(t ? n : "div", { className: e(r), children: o });
 export {

package/dist/components/Modal/components/Header/Header.js

@@ -1,5 +1,5 @@
 import { jsx as m } from "react/jsx-runtime";
-import { S as n } from "../../../../index-DoOsnuB6.js";
+import { S as n } from "../../../../index-B_6_jmOO.js";
 import { cn as e } from "../../../../utils/index.js";
 const i = ({ children: o, asChild: r, className: t }) => /* @__PURE__ */ m(r ? n : "div", { className: e(t), children: o });
 export {

package/dist/components/Modal/components/Wrapper/Wrapper.js

@@ -1,8 +1,8 @@
 import "react/jsx-runtime";
-import "../../../../index-KEdwcThH.js";
+import "../../../../index-CbTU3cnP.js";
 import "react";
-import { W as x } from "../../../../Modal-W2GbkC_F.js";
-import "../../../../Combination-BQYb0Gw7.js";
+import { W as x } from "../../../../Modal-ByNiP7eb.js";
+import "../../../../Combination-b348x__d.js";
 import "../../../../utils/index.js";
 import "./Wrapper.variants.js";
 import "../../hooks/useModal.js";

package/dist/components/Modal/components/index.js

@@ -1,7 +1,7 @@
 import { Body as e } from "./Body/Body.js";
 import { Footer as t } from "./Footer/Footer.js";
 import { Header as m } from "./Header/Header.js";
-import { W as a } from "../../../Modal-W2GbkC_F.js";
+import { W as a } from "../../../Modal-ByNiP7eb.js";
 export {
   e as Body,
   t as Footer,

package/dist/components/NumberInput/NumberInput.js

@@ -1,5 +1,5 @@
 import { jsxs as y, jsx as u } from "react/jsx-runtime";
-import { R as j } from "../../index-KEdwcThH.js";
+import { R as j } from "../../index-CbTU3cnP.js";
 import p, { forwardRef as d, useId as E, useState as T, useCallback as x } from "react";
 import { cn as h } from "../../utils/index.js";
 import { labelVariants as $, buttonVariants as P, numberInputVariants as L } from "./NumberInput.variants.js";

package/dist/components/ProgressBar/ProgressBar.js

@@ -1,6 +1,6 @@
 import { jsxs as r, jsx as i } from "react/jsx-runtime";
 import { cn as o } from "../../utils/index.js";
-import { progressBarVariants as l, progressBarProgress as d } from "./ProgressBar.variants.js";
+import { progressBarProgress as l, progressBarVariants as d } from "./ProgressBar.variants.js";
 import { useTheme as c } from "../../contexts/theme.hook.js";
 const p = ({
   label: e,
@@ -17,11 +17,11 @@ const p = ({
         "%"
       ] })
     ] }),
-    /* @__PURE__ */ i("div", { className: o(l({ theme: t })), children: /* @__PURE__ */ i(
+    /* @__PURE__ */ i("div", { className: o(d({ theme: t })), children: /* @__PURE__ */ i(
       "div",
       {
         className: o(
-          d({ theme: t, status: n }),
+          l({ theme: t, status: n }),
           s > 0 && s < 99 ? "transition-width duration-500" : "transition-colors duration-0"
         ),
         style: { width: `${s}%` }

package/dist/components/Radio/Radio.js

@@ -1,7 +1,7 @@
 import { jsxs as T, jsx as e } from "react/jsx-runtime";
 import { forwardRef as V, useId as j, useCallback as w } from "react";
 import { cn as r } from "../../utils/index.js";
-import { wrapperRadioVariants as F, radioVariants as $, labelRadioVariants as y } from "./Radio.variants.js";
+import { radioVariants as F, labelRadioVariants as $, wrapperRadioVariants as y } from "./Radio.variants.js";
 import { useTheme as I } from "../../contexts/theme.hook.js";
 const D = V(
   ({
@@ -28,7 +28,7 @@ const D = V(
       {
         htmlFor: l,
         className: r(
-          F({
+          y({
             className: f,
             disabled: a || !1
           })
@@ -53,7 +53,7 @@ const D = V(
             "span",
             {
               className: r(
-                $({
+                F({
                   className: c,
                   theme: x,
                   disabled: a || !1,
@@ -65,7 +65,7 @@ const D = V(
           /* @__PURE__ */ e(
             "span",
             {
-              className: r(y({ className: p })),
+              className: r($({ className: p })),
               children: d
             }
           )

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,5 +1,5 @@
 import { jsx as o, Fragment as k } from "react/jsx-runtime";
-import { S as G } from "../../index-DoOsnuB6.js";
+import { S as G } from "../../index-B_6_jmOO.js";
 import { useState as R, useCallback as T } from "react";
 import { cn as r } from "../../utils/index.js";
 import { Radio as b } from "../Radio/Radio.js";

package/dist/components/Range/Range.js

@@ -1,8 +1,8 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { R as V, T as v, b as T, a as c } from "../../index-CJsYodgi.js";
+import { R as V, T as v, a as T, b as c } from "../../index-BzaHYXkt.js";
 import { forwardRef as b, useRef as j, useState as k, useImperativeHandle as w, useEffect as y, useCallback as C } from "react";
 import { cn as t } from "../../utils/index.js";
-import { rangeVariants as S, trackVariants as $, rangeOutsideVariants as E, thumbVariants as i } from "./Range.variants.js";
+import { rangeOutsideVariants as S, trackVariants as $, thumbVariants as i, rangeVariants as E } from "./Range.variants.js";
 import { useTheme as H } from "../../contexts/theme.hook.js";
 const F = b(
   ({
@@ -45,14 +45,14 @@ const F = b(
         V,
         {
           value: s,
-          className: t(S({ theme: n })),
+          className: t(E({ theme: n })),
           onValueChange: g,
           ...d,
           children: [
             /* @__PURE__ */ e(v, { className: t($({ theme: n, size: m })), children: /* @__PURE__ */ e(
               T,
               {
-                className: t(E({ theme: n }))
+                className: t(S({ theme: n }))
               }
             ) }),
             /* @__PURE__ */ e(c, { className: t(i({ theme: n, size: m })) }),

package/dist/components/Sidebar/components/Wrapper/Wrapper.js

@@ -8,7 +8,7 @@ import "../NavigationTitle/NavigationTitle.js";
 import { jsxs as T, jsx as V } from "react/jsx-runtime";
 import { useRef as d, useCallback as l, useMemo as s, Children as i, isValidElement as v, useEffect as b } from "react";
 import { cn as E } from "../../../../utils/index.js";
-import { wrapperSiderbarVariants as j, dragVariants as z } from "../../Sidebar.variants.js";
+import { dragVariants as j, wrapperSiderbarVariants as z } from "../../Sidebar.variants.js";
 import { useTheme as k } from "../../../../contexts/theme.hook.js";
 const K = ({
   canResize: M = !0,
@@ -61,7 +61,7 @@ const K = ({
     {
       ref: u,
       className: E(
-        j({
+        z({
           className: w,
           theme: g
         })
@@ -74,7 +74,7 @@ const K = ({
           "div",
           {
             ref: r,
-            className: E(z({ theme: g })),
+            className: E(j({ theme: g })),
             onMouseDown: R
           }
         )

package/dist/components/Slider/Slider.js

@@ -1,15 +1,15 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { R as v, T, a as V } from "../../index-CJsYodgi.js";
-import { forwardRef as R, useRef as b, useState as g, useImperativeHandle as j, useEffect as k, useCallback as w } from "react";
-import { cn as r } from "../../utils/index.js";
-import { sliderVariants as y, trackVariants as C, thumbVariants as S } from "./Slider.variants.js";
+import { R as v, T, b as V } from "../../index-BzaHYXkt.js";
+import { forwardRef as b, useRef as R, useState as g, useImperativeHandle as j, useEffect as k, useCallback as w } from "react";
+import { cn as a } from "../../utils/index.js";
+import { trackVariants as y, thumbVariants as C, sliderVariants as S } from "./Slider.variants.js";
 import { useTheme as E } from "../../contexts/theme.hook.js";
-const F = R(
+const F = b(
   ({ label: s, defaultValue: c = [0], name: i, theme: o, size: m, showValue: u, ...f }, h) => {
-    const e = b(null), [a, d] = g(c), { theme: p } = E(), n = o ?? p;
+    const e = R(null), [r, d] = g(c), { theme: p } = E(), n = o ?? p;
     j(h, () => e.current, [e]), k(() => {
-      e.current && (e.current.value = a.toString());
-    }, [a]);
+      e.current && (e.current.value = r.toString());
+    }, [r]);
     const x = w(
       (N) => d(N),
       []
@@ -18,13 +18,13 @@ const F = R(
       /* @__PURE__ */ l(
         "div",
         {
-          className: r(
+          className: a(
             "flex items-center",
             s ? "justify-between" : "justify-end"
           ),
           children: [
             s ? /* @__PURE__ */ t("label", { children: s }) : null,
-            u ? /* @__PURE__ */ t("span", { className: "text-xs", children: a }) : null
+            u ? /* @__PURE__ */ t("span", { className: "text-xs", children: r }) : null
           ]
         }
       ),
@@ -32,13 +32,13 @@ const F = R(
       /* @__PURE__ */ l(
         v,
         {
-          value: a,
-          className: r(y({ theme: n })),
+          value: r,
+          className: a(S({ theme: n })),
           onValueChange: x,
           ...f,
           children: [
-            /* @__PURE__ */ t(T, { className: r(C({ theme: n, size: m })) }),
-            /* @__PURE__ */ t(V, { className: r(S({ theme: n, size: m })) })
+            /* @__PURE__ */ t(T, { className: a(y({ theme: n, size: m })) }),
+            /* @__PURE__ */ t(V, { className: a(C({ theme: n, size: m })) })
           ]
         }
       )

package/dist/components/Switch/Switch.js

@@ -1,14 +1,14 @@
 import { jsxs as P, jsx as u } from "react/jsx-runtime";
 import * as p from "react";
 import { forwardRef as _, useState as H, useRef as A, useId as M, useImperativeHandle as $, useEffect as j, useCallback as z } from "react";
-import { c as B, a as q, d as F } from "../../index-8vgf-x5i.js";
-import { u as O } from "../../index-DoOsnuB6.js";
-import { u as V, a as D } from "../../index-BxeV34ij.js";
-import { P as g } from "../../index-1GLoikpT.js";
+import { a as B, c as q, b as F } from "../../index-Cva-e5M4.js";
+import { u as O } from "../../index-B_6_jmOO.js";
+import { u as V, a as D } from "../../index-4ecjw_Aj.js";
+import { P as g } from "../../index-D7QNmo_D.js";
 import { cn as x } from "../../utils/index.js";
-import { switchVariants as L, thumbVariants as U } from "./Switch.variants.js";
+import { thumbVariants as L, switchVariants as U } from "./Switch.variants.js";
 import { useTheme as W } from "../../contexts/theme.hook.js";
-var k = "Switch", [X, ie] = B(k), [G, J] = X(k), R = p.forwardRef(
+var k = "Switch", [X, ie] = q(k), [G, J] = X(k), R = p.forwardRef(
   (e, s) => {
     const {
       __scopeSwitch: t,
@@ -20,8 +20,8 @@ var k = "Switch", [X, ie] = B(k), [G, J] = X(k), R = p.forwardRef(
       value: i = "on",
       onCheckedChange: m,
       form: r,
-      ...d
-    } = e, [l, b] = p.useState(null), v = O(s, (C) => b(C)), f = p.useRef(!1), w = l ? r || !!l.closest("form") : !0, [S = !1, T] = q({
+      ...l
+    } = e, [d, b] = p.useState(null), v = O(s, (C) => b(C)), f = p.useRef(!1), w = d ? r || !!d.closest("form") : !0, [S = !1, T] = B({
       prop: n,
       defaultProp: h,
       onChange: m
@@ -38,7 +38,7 @@ var k = "Switch", [X, ie] = B(k), [G, J] = X(k), R = p.forwardRef(
           "data-disabled": a ? "" : void 0,
           disabled: a,
           value: i,
-          ...d,
+          ...l,
           ref: v,
           onClick: F(e.onClick, (C) => {
             T((I) => !I), w && (f.current = C.isPropagationStopped(), f.current || C.stopPropagation());
@@ -48,7 +48,7 @@ var k = "Switch", [X, ie] = B(k), [G, J] = X(k), R = p.forwardRef(
       w && /* @__PURE__ */ u(
         K,
         {
-          control: l,
+          control: d,
           bubbles: !f.current,
           name: c,
           value: i,
@@ -81,10 +81,10 @@ N.displayName = y;
 var K = (e) => {
   const { control: s, checked: t, bubbles: c = !0, ...n } = e, h = p.useRef(null), o = V(t), a = D(s);
   return p.useEffect(() => {
-    const i = h.current, m = window.HTMLInputElement.prototype, d = Object.getOwnPropertyDescriptor(m, "checked").set;
-    if (o !== t && d) {
-      const l = new Event("click", { bubbles: c });
-      d.call(i, t), i.dispatchEvent(l);
+    const i = h.current, m = window.HTMLInputElement.prototype, l = Object.getOwnPropertyDescriptor(m, "checked").set;
+    if (o !== t && l) {
+      const d = new Event("click", { bubbles: c });
+      l.call(i, t), i.dispatchEvent(d);
     }
   }, [o, t, c]), /* @__PURE__ */ u(
     "input",
@@ -120,7 +120,7 @@ const ue = _(
     className: h,
     label: o
   }, a) => {
-    const [i, m] = H(s ?? !1), r = A(null), d = M(), { theme: l } = W(), b = c ?? l, v = e ? `${d}-${e}` : d;
+    const [i, m] = H(s ?? !1), r = A(null), l = M(), { theme: d } = W(), b = c ?? d, v = e ? `${l}-${e}` : l;
     $(a, () => r.current, [r]), j(() => {
       r.current && (r.current.value = `${i}`);
     }, [i]);
@@ -151,12 +151,12 @@ const ue = _(
               id: v,
               defaultChecked: s,
               onCheckedChange: f,
-              className: x(L({ theme: b, className: h })),
+              className: x(U({ theme: b, className: h })),
               "aria-label": o,
               children: /* @__PURE__ */ u(
                 Y,
                 {
-                  className: U({
+                  className: L({
                     theme: b,
                     className: n
                   })

package/dist/components/Tag/Tag.js

@@ -1,7 +1,19 @@
-import { jsx as r } from "react/jsx-runtime";
-import { cn as i } from "../../utils/index.js";
-import { tagVariants as m } from "./Tag.variants.js";
-const n = ({ label: t, color: a }) => /* @__PURE__ */ r("div", { className: i(m({ color: a })), children: /* @__PURE__ */ r("span", { className: "text-inherit", children: t }) });
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import { S as r } from "../../index-B_6_jmOO.js";
+import { cn as o } from "../../utils/index.js";
+import { tagVariants as c } from "./Tag.variants.js";
+const u = ({
+  label: i,
+  color: s,
+  rightIcon: t,
+  leftIcon: e,
+  className: l,
+  "data-value": m
+}) => /* @__PURE__ */ n("div", { className: o(c({ color: s, className: l })), "data-value": m, children: [
+  e ? /* @__PURE__ */ a(r, { className: "text-inherit", children: e }) : null,
+  /* @__PURE__ */ a("span", { className: "text-inherit", children: i }),
+  t ? /* @__PURE__ */ a(r, { className: "text-inherit", children: t }) : null
+] });
 export {
-  n as Tag
+  u as Tag
 };

package/dist/components/Tag/Tag.variants.js

@@ -1,6 +1,16 @@
 import { c as e } from "../../index-BNmRGtA6.js";
 const f = e(
-  ["px-2", "py-1", "rounded-md", "w-max", "text-xs"],
+  [
+    "px-2",
+    "py-1",
+    "rounded-md",
+    "w-max",
+    "text-xs",
+    "flex",
+    "items-center",
+    "justify-center",
+    "gap-1"
+  ],
   {
     variants: {
       color: {