@definable/ui 0.1.31 → 0.1.32

package/dist/components/image-cropper.js

@@ -1,45 +1,45 @@
-import { jsxs as t, Fragment as j, jsx as e } from "react/jsx-runtime";
-import { useState as f, useRef as S, useCallback as i } from "react";
-import { Button as h } from "./button.js";
+import { jsxs as o, Fragment as j, jsx as e } from "react/jsx-runtime";
+import { useState as h, useRef as S, useCallback as n } from "react";
+import { Button as f } from "./button.js";
 import { RotateCw as F, X as O, Upload as U } from "lucide-react";
 import { ImageCropperModal as A } from "./image-cropper-modal.js";
 import { cn as E } from "../lib/utils.js";
 function Y({
   value: c,
   onChange: a,
-  size: n = 120,
+  size: i = 120,
   className: g,
   placeholder: b = "Upload Image",
   title: v = "Crop Your Image",
   outputSize: x = 200
 }) {
-  const [C, d] = f(!1), [N, s] = f(null), l = S(null), w = i((r) => {
-    var m;
-    const o = (m = r.target.files) == null ? void 0 : m[0];
-    if (o) {
+  const [C, m] = h(!1), [N, s] = h(null), l = S(null), w = n((r) => {
+    var d;
+    const t = (d = r.target.files) == null ? void 0 : d[0];
+    if (t) {
       const p = new FileReader();
-      p.onload = (R) => {
+      p.onload = (k) => {
         var u;
-        const M = (u = R.target) == null ? void 0 : u.result;
-        s(M), d(!0);
-      }, p.readAsDataURL(o);
+        const M = (u = k.target) == null ? void 0 : u.result;
+        s(M), m(!0);
+      }, p.readAsDataURL(t);
     }
     r.target.value = "";
-  }, []), y = i((r) => {
+  }, []), y = n((r) => {
     a(r), s(null);
-  }, [a]), k = i(() => {
-    d(!1), s(null), l.current && (l.current.value = "");
-  }, []), I = i(() => {
+  }, [a]), I = n(() => {
+    m(!1), s(null), l.current && (l.current.value = "");
+  }, []), R = n(() => {
     a(null);
   }, [a]);
-  return /* @__PURE__ */ t(j, { children: [
-    /* @__PURE__ */ t("div", { className: E("space-y-3", g), children: [
-      c ? /* @__PURE__ */ t("div", { className: "flex flex-col items-center gap-3", children: [
+  return /* @__PURE__ */ o(j, { children: [
+    /* @__PURE__ */ o("div", { className: E("space-y-3", g), children: [
+      c ? /* @__PURE__ */ o("div", { className: "flex flex-col items-center gap-3", children: [
         /* @__PURE__ */ e(
           "div",
           {
-            className: "rounded-full border-2 border-border/50 overflow-hidden bg-background",
-            style: { width: n, height: n },
+            className: "rounded-full border-2 border-light overflow-hidden bg-secondary",
+            style: { width: i, height: i },
             children: /* @__PURE__ */ e(
               "img",
               {
@@ -50,15 +50,15 @@ function Y({
             )
           }
         ),
-        /* @__PURE__ */ t("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ t(
-            h,
+        /* @__PURE__ */ o("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ o(
+            f,
             {
               variant: "outline",
               size: "sm",
               onClick: (r) => {
-                var o;
-                r.stopPropagation(), (o = l.current) == null || o.click();
+                var t;
+                r.stopPropagation(), (t = l.current) == null || t.click();
               },
               children: [
                 /* @__PURE__ */ e(F, { className: "h-3 w-3 mr-1" }),
@@ -66,12 +66,12 @@ function Y({
               ]
             }
           ),
-          /* @__PURE__ */ t(
-            h,
+          /* @__PURE__ */ o(
+            f,
             {
               variant: "outline",
               size: "sm",
-              onClick: I,
+              onClick: R,
               children: [
                 /* @__PURE__ */ e(O, { className: "h-3 w-3 mr-1" }),
                 "Remove"
@@ -79,20 +79,20 @@ function Y({
             }
           )
         ] })
-      ] }) : /* @__PURE__ */ t(
+      ] }) : /* @__PURE__ */ o(
         "button",
         {
           onClick: (r) => {
-            var o;
-            r.stopPropagation(), (o = l.current) == null || o.click();
+            var t;
+            r.stopPropagation(), (t = l.current) == null || t.click();
           },
-          className: "w-full border-2 border-dashed border-border/50 rounded-lg p-6 hover:border-primary/50 hover:bg-primary/2 transition-colors group",
+          className: "w-full border-2 border-dashed border-light rounded-lg p-6 hover:border-primary/50 hover:bg-primary/2 transition-colors group",
           children: [
             /* @__PURE__ */ e(
               "div",
               {
                 className: "mx-auto rounded-full bg-primary/10 flex items-center justify-center group-hover:bg-primary/15 transition-colors mb-3",
-                style: { width: Math.min(n / 2, 60), height: Math.min(n / 2, 60) },
+                style: { width: Math.min(i / 2, 60), height: Math.min(i / 2, 60) },
                 children: /* @__PURE__ */ e(U, { className: "h-6 w-6 text-primary" })
               }
             ),
@@ -116,7 +116,7 @@ function Y({
       A,
       {
         isOpen: C,
-        onClose: k,
+        onClose: I,
         imageSrc: N,
         onCrop: y,
         title: v,

package/dist/components/input.js

@@ -7,7 +7,7 @@ const l = n.forwardRef(
     {
       type: o,
       className: a(
-        "h-10 w-full rounded-lg border-2 border-border bg-background px-4 py-2 text-sm text-foreground outline-none transition-colors placeholder:text-muted-foreground focus:border-primary disabled:cursor-not-allowed disabled:opacity-50",
+        "h-10 w-full rounded-lg border-2 border-light bg-secondary px-4 py-2 text-sm text-foreground outline-none transition-colors placeholder:text-muted-foreground focus:border-primary disabled:cursor-not-allowed disabled:opacity-50",
         r
       ),
       ref: t,

package/dist/components/loader.js

@@ -39,7 +39,7 @@ function h({
     },
     i
   )) });
-  return s ? /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-background flex items-center justify-center z-[9999]", children: /* @__PURE__ */ r(
+  return s ? /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-secondary flex items-center justify-center z-[9999]", children: /* @__PURE__ */ r(
     a.div,
     {
       className: "text-center",

package/dist/components/modal.js

@@ -30,55 +30,55 @@ function I({
   onClose: i,
   title: d,
   description: a,
-  icon: n,
-  children: h,
-  footer: s,
+  icon: s,
+  children: x,
+  footer: n,
   size: g = "md",
   showClose: w = !0,
   className: f,
-  isContentScrollable: b = !0,
-  mainClassName: v,
-  contentClassName: y,
+  isContentScrollable: v = !0,
+  mainClassName: y,
+  contentClassName: N,
   header: c,
-  headerClassName: N,
+  headerClassName: b,
   zIndexClassName: k = "z-[50]",
   mobileSheet: m
 }) {
   if (m != null && m.enable && r && window.innerWidth < 768) {
-    const { position: x } = m;
+    const { position: h } = m;
     return /* @__PURE__ */ e(
       L,
       {
         isOpen: r,
         onClose: i,
-        header: c || (d || a || n ? /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
-          n && /* @__PURE__ */ e("div", { className: "h-8 w-8 rounded-lg flex items-center justify-center", children: n }),
+        header: c || (d || a || s ? /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
+          s && /* @__PURE__ */ e("div", { className: "h-8 w-8 rounded-lg flex items-center justify-center", children: s }),
           /* @__PURE__ */ t("div", { children: [
             d && /* @__PURE__ */ e("h2", { className: "text-sm font-medium", children: d }),
             a && /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: a })
           ] })
         ] }) : void 0),
-        footer: /* @__PURE__ */ e("div", { className: "flex gap-2 justify-end", children: s }),
+        footer: /* @__PURE__ */ e("div", { className: "flex gap-2 justify-end", children: n }),
         className: l(f, "w-full max-w-full"),
-        position: x || "bottom",
-        headerClassName: l(N, "w-full max-w-full"),
+        position: h || "bottom",
+        headerClassName: l(b, "w-full max-w-full"),
         enableFullscreen: !1,
-        children: h
+        children: x
       }
     );
   }
-  const u = F((x) => {
-    x.key === "Escape" && r && i();
+  const u = F((h) => {
+    h.key === "Escape" && r && i();
   }, [r, i]);
   H(() => (document.addEventListener("keydown", u), () => document.removeEventListener("keydown", u)), [u]);
-  const o = d || a || n || c, j = /* @__PURE__ */ e(E, { children: r && /* @__PURE__ */ e("div", { className: l("fixed inset-0 z-50 overflow-hidden", k), children: /* @__PURE__ */ t("div", { className: l("min-h-full flex items-center justify-center p-4", v), children: [
+  const o = d || a || s || c, j = /* @__PURE__ */ e(E, { children: r && /* @__PURE__ */ e("div", { className: l("fixed inset-0 z-50 overflow-hidden", k), children: /* @__PURE__ */ t("div", { className: l("min-h-full flex items-center justify-center p-4", y), children: [
     /* @__PURE__ */ e(
       p.div,
       {
         initial: { opacity: 0 },
         animate: { opacity: 1 },
         exit: { opacity: 0 },
-        className: "fixed inset-0 bg-background/80 backdrop-blur-sm",
+        className: "fixed inset-0 bg-secondary/80 backdrop-blur-sm",
         onClick: i
       }
     ),
@@ -90,14 +90,14 @@ function I({
         exit: { opacity: 0, scale: 0.95 },
         transition: { duration: 0.1, ease: "easeOut" },
         className: l(
-          "relative transform rounded-lg bg-background shadow-xl border border-border/50 flex flex-col max-h-[85vh] overflow-hidden",
+          "relative transform rounded-lg bg-secondary shadow-xl border border-light flex flex-col max-h-[85vh] overflow-hidden",
           f
         ),
         style: P(g),
         children: [
-          o && /* @__PURE__ */ t("div", { className: "flex-shrink-0 rounded-t-lg bg-card flex items-center justify-between p-2 border-b border-border/50", children: [
+          o && /* @__PURE__ */ t("div", { className: "flex-shrink-0 rounded-t-lg bg-card flex items-center justify-between p-2 border-b border-light", children: [
             c || /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
-              n && /* @__PURE__ */ e("div", { className: "h-8 w-8 rounded-lg flex items-center justify-center", children: n }),
+              s && /* @__PURE__ */ e("div", { className: "h-8 w-8 rounded-lg flex items-center justify-center", children: s }),
               /* @__PURE__ */ t("div", { children: [
                 d && /* @__PURE__ */ e("h2", { className: "text-sm font-small", children: d }),
                 a && /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: a })
@@ -117,13 +117,13 @@ function I({
           ] }),
           /* @__PURE__ */ e("div", { className: l(
             "flex-1 min-h-0",
-            b ? "overflow-y-auto" : "",
-            !s && !o ? "rounded-lg" : "",
-            !s && o ? "rounded-b-lg" : "",
-            s && !o ? "rounded-t-lg" : "",
-            y
-          ), children: h }),
-          s && /* @__PURE__ */ e("div", { className: "flex-shrink-0 flex items-center justify-end gap-2 px-4 py-3 border-t border-border/50 bg-card rounded-b-lg", children: s })
+            v ? "overflow-y-auto" : "",
+            !n && !o ? "rounded-lg" : "",
+            !n && o ? "rounded-b-lg" : "",
+            n && !o ? "rounded-t-lg" : "",
+            N
+          ), children: x }),
+          n && /* @__PURE__ */ e("div", { className: "flex-shrink-0 flex items-center justify-end gap-2 px-4 py-3 border-t border-light bg-card rounded-b-lg", children: n })
         ]
       }
     )

package/dist/components/picker.js

@@ -28,7 +28,7 @@ function E({
       "div",
       {
         className: l("cursor-pointer select-none", g),
-        children: f || /* @__PURE__ */ t("div", { className: "flex items-center justify-between p-3.5 bg-muted/20 hover:bg-muted/30 active:scale-[0.98] rounded-xl border border-border/40 transition-all group", children: [
+        children: f || /* @__PURE__ */ t("div", { className: "flex items-center justify-between p-3.5 bg-muted/20 hover:bg-muted/30 active:scale-[0.98] rounded-xl border border-light transition-all group", children: [
           /* @__PURE__ */ t("div", { className: "flex flex-col gap-0.5 text-left", children: [
             /* @__PURE__ */ e("span", { className: "text-[10px] font-black uppercase tracking-[0.2em] text-muted-foreground/45", children: n }),
             /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
@@ -45,7 +45,7 @@ function E({
     ) }),
     /* @__PURE__ */ t(P, { children: [
       /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e(V, { children: n }) }),
-      /* @__PURE__ */ e("div", { className: "px-6 pt-0 space-y-5 pb-10", children: /* @__PURE__ */ t("div", { className: "relative h-[220px] bg-card/60 dark:bg-muted/10 rounded-[32px] overflow-hidden border border-border/10 shadow-sm", children: [
+      /* @__PURE__ */ e("div", { className: "px-6 pt-0 space-y-5 pb-10", children: /* @__PURE__ */ t("div", { className: "relative h-[220px] bg-card dark:bg-muted/10 rounded-[32px] overflow-hidden border border-light shadow-sm", children: [
         /* @__PURE__ */ e("div", { className: "absolute left-4 right-4 top-1/2 -translate-y-1/2 h-[56px] bg-primary/[0.04] dark:bg-primary/10 border-y border-primary/10 rounded-2xl pointer-events-none z-10" }),
         /* @__PURE__ */ e(
           i,

package/dist/components/select.js

@@ -9,7 +9,7 @@ const I = e.Root, E = e.Group, L = e.Value, R = a.forwardRef(({ className: o, ch
   {
     ref: n,
     className: i(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-secondary px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       o
     ),
     ...r,
@@ -21,7 +21,7 @@ const I = e.Root, E = e.Group, L = e.Value, R = a.forwardRef(({ className: o, ch
 ));
 R.displayName = e.Trigger.displayName;
 const g = a.forwardRef(({ className: o, children: s, position: r = "popper", searchable: n, onSearch: m, searchPlaceholder: p = "Search...", ...f }, d) => {
-  const [b, y] = a.useState(""), u = a.useRef(null);
+  const [y, b] = a.useState(""), u = a.useRef(null);
   a.useEffect(() => {
     n && u.current && setTimeout(() => {
       var l;
@@ -29,7 +29,7 @@ const g = a.forwardRef(({ className: o, children: s, position: r = "popper", sea
     }, 50);
   }, [n]);
   const w = (l) => {
-    y(l.target.value), m && m(l.target.value);
+    b(l.target.value), m && m(l.target.value);
   }, h = (l) => {
     l.stopPropagation();
   }, x = (l) => {
@@ -58,7 +58,7 @@ const g = a.forwardRef(({ className: o, children: s, position: r = "popper", sea
                 C,
                 {
                   ref: u,
-                  value: b,
+                  value: y,
                   onChange: w,
                   onClick: h,
                   onKeyDown: x,

package/dist/components/selection-bar.js

@@ -17,7 +17,7 @@ function w({
       initial: { y: 100, opacity: 0 },
       animate: { y: 0, opacity: 1 },
       exit: { y: 100, opacity: 0 },
-      className: "fixed bottom-4 left-1/2 -translate-x-1/2 w-fit bg-background rounded-lg border shadow-lg z-50",
+      className: "fixed bottom-4 left-1/2 -translate-x-1/2 w-fit bg-secondary rounded-lg border shadow-lg z-50",
       children: /* @__PURE__ */ i("div", { className: "flex items-center gap-6 px-4 py-2", children: [
         /* @__PURE__ */ i("div", { className: "flex items-center gap-2 text-sm font-medium", children: [
           /* @__PURE__ */ e("span", { className: "bg-primary text-primary-foreground w-8 h-8 rounded-lg flex items-center justify-center", children: l }),

package/dist/components/sheet.js

@@ -1,26 +1,26 @@
 import { jsxs as l, jsx as t, Fragment as R } from "react/jsx-runtime";
 import { Minimize2 as B, Maximize2 as I, X as M } from "lucide-react";
-import { Button as b } from "./button.js";
+import { Button as y } from "./button.js";
 import { useState as X, useRef as q, useEffect as m } from "react";
 import { cn as u } from "../lib/utils.js";
-import { AnimatePresence as D, motion as y } from "framer-motion";
+import { AnimatePresence as D, motion as g } from "framer-motion";
 import { createPortal as G } from "react-dom";
 let a = [];
 function W({
   isOpen: i,
   onClose: s,
-  children: g,
+  children: b,
   header: v,
   footer: f,
   className: N,
-  enableFullscreen: k = !0,
+  enableFullscreen: w = !0,
   position: c = "right",
-  headerClassName: w = "",
+  headerClassName: k = "",
   disableOutsideClose: h = !1
 }) {
-  const [n, P] = X(!1), r = q(null);
-  if (m(() => (i ? a.push(r) : a = a.filter((e) => e !== r), () => {
-    a = a.filter((e) => e !== r);
+  const [r, P] = X(!1), n = q(null);
+  if (m(() => (i ? a.push(n) : a = a.filter((e) => e !== n), () => {
+    a = a.filter((e) => e !== n);
   }), [i]), m(() => {
     const e = (o) => {
       var p;
@@ -28,14 +28,14 @@ function W({
       const A = a.some(
         (x) => x.current && x.current.contains(o.target)
       ), F = (p = o.target) == null ? void 0 : p.closest("[data-sheet-close]");
-      !A && !F && r.current && !r.current.contains(o.target) && s();
+      !A && !F && n.current && !n.current.contains(o.target) && s();
     };
-    return i && !n && document.addEventListener("mousedown", e), () => {
+    return i && !r && document.addEventListener("mousedown", e), () => {
       document.removeEventListener("mousedown", e);
     };
-  }, [i, n, h]), m(() => {
+  }, [i, r, h]), m(() => {
     const e = (o) => {
-      o.key === "Escape" && i && a[a.length - 1] === r && s();
+      o.key === "Escape" && i && a[a.length - 1] === n && s();
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
   }, [i]), !i) return null;
@@ -43,25 +43,25 @@ function W({
     e.stopPropagation(), s();
   }, z = /* @__PURE__ */ l("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ l("div", { className: u(
-      "flex items-center bg-card justify-between py-4 px-4 h-header border-b border-border/50",
-      w
+      "flex items-center bg-card justify-between py-4 px-4 h-header border-b border-light",
+      k
     ), children: [
       /* @__PURE__ */ t("div", { className: "text-sm font-medium", children: v }),
       /* @__PURE__ */ l("div", { className: "flex items-center gap-1 ml-auto", children: [
-        k && /* @__PURE__ */ t(
-          b,
+        w && /* @__PURE__ */ t(
+          y,
           {
             variant: "ghost",
             size: "icon",
             className: "h-7 w-7",
             onClick: (e) => {
-              e.stopPropagation(), P(!n);
+              e.stopPropagation(), P(!r);
             },
-            children: n ? /* @__PURE__ */ t(B, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ t(I, { className: "h-3.5 w-3.5" })
+            children: r ? /* @__PURE__ */ t(B, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ t(I, { className: "h-3.5 w-3.5" })
           }
         ),
         /* @__PURE__ */ t(
-          b,
+          y,
           {
             variant: "ghost",
             size: "icon",
@@ -73,8 +73,8 @@ function W({
         )
       ] })
     ] }),
-    /* @__PURE__ */ t("div", { className: "flex-1 overflow-auto", children: g }),
-    f && /* @__PURE__ */ t("div", { className: "border-t border-border/50 bg-card py-2 px-3", children: /* @__PURE__ */ t("div", { className: "text-sm", children: f }) })
+    /* @__PURE__ */ t("div", { className: "flex-1 overflow-auto", children: b }),
+    f && /* @__PURE__ */ t("div", { className: "border-t border-light bg-card py-2 px-3", children: /* @__PURE__ */ t("div", { className: "text-sm", children: f }) })
   ] }), C = () => c === "left" ? {
     initial: { x: -100, opacity: 0 },
     animate: { x: 0, opacity: 1 },
@@ -87,9 +87,9 @@ function W({
     initial: { x: 100, opacity: 0 },
     animate: { x: 0, opacity: 1 },
     exit: { x: 100, opacity: 0 }
-  }, L = () => n ? "inset-4 rounded-lg" : c === "left" ? "inset-y-0 left-0 border-r" : c === "bottom" ? "inset-x-0 bottom-0 border-t" : "inset-y-0 right-0 border-l", d = C(), S = L(), j = /* @__PURE__ */ t(D, { children: i && /* @__PURE__ */ l(R, { children: [
+  }, L = () => r ? "inset-4 rounded-lg" : c === "left" ? "inset-y-0 left-0 border-r" : c === "bottom" ? "inset-x-0 bottom-0 border-t" : "inset-y-0 right-0 border-l", d = C(), S = L(), j = /* @__PURE__ */ t(D, { children: i && /* @__PURE__ */ l(R, { children: [
     /* @__PURE__ */ t(
-      y.div,
+      g.div,
       {
         initial: { opacity: 0 },
         animate: { opacity: 1 },
@@ -98,15 +98,15 @@ function W({
           e.stopPropagation(), s();
         },
         className: u(
-          "fixed inset-0 z-[100] bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-          n ? "block" : "hidden"
+          "fixed inset-0 z-[100] bg-secondary/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          r ? "block" : "hidden"
         )
       }
     ),
     /* @__PURE__ */ t(
-      y.div,
+      g.div,
       {
-        ref: r,
+        ref: n,
         initial: d.initial,
         animate: d.animate,
         exit: d.exit,
@@ -115,7 +115,7 @@ function W({
           ease: [0.32, 0.72, 0, 1]
         },
         className: u(
-          "fixed z-[100] bg-background shadow-lg flex flex-col border-border/50",
+          "fixed z-[100] bg-secondary shadow-lg flex flex-col border-light",
           S,
           N
         ),

package/dist/components/slider.js

@@ -1,13 +1,13 @@
-import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
 import * as t from "react";
 import * as e from "@radix-ui/react-slider";
 import { cn as n } from "../lib/utils.js";
-const c = t.forwardRef(({ className: l, ...o }, a) => {
+const c = t.forwardRef(({ className: l, ...o }, s) => {
   var i;
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ a(
     e.Root,
     {
-      ref: a,
+      ref: s,
       className: n(
         "relative flex w-full touch-none select-none items-center",
         l
@@ -21,7 +21,7 @@ const c = t.forwardRef(({ className: l, ...o }, a) => {
             style: { width: `${(((i = o.value) == null ? void 0 : i[0]) || 0) * 100}%` }
           }
         ) }),
-        /* @__PURE__ */ r(e.Thumb, { className: "block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:scale-110 active:scale-90" })
+        /* @__PURE__ */ r(e.Thumb, { className: "block h-4 w-4 rounded-full border border-primary/50 bg-secondary shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:scale-110 active:scale-90" })
       ]
     }
   );

package/dist/components/switch.js

@@ -15,7 +15,7 @@ const c = t.forwardRef(({ className: r, ...o }, s) => /* @__PURE__ */ i(
     children: /* @__PURE__ */ i(e.Thumb, { asChild: !0, children: /* @__PURE__ */ i(
       n.div,
       {
-        className: "block h-4 w-4 rounded-full bg-background shadow-lg ring-0",
+        className: "block h-4 w-4 rounded-full bg-secondary shadow-lg ring-0",
         initial: !1,
         animate: {
           x: o.checked ? 16 : 0

package/dist/components/table-mobile.js

@@ -1,8 +1,8 @@
-import { jsx as r, jsxs as d } from "react/jsx-runtime";
-import { cn as c } from "../lib/utils.js";
-import { Checkbox as v } from "./checkbox.js";
-import { Tooltip as b } from "./tooltip.js";
-import { useState as g } from "react";
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { cn as p } from "../lib/utils.js";
+import { Checkbox as g } from "./checkbox.js";
+import { Tooltip as v } from "./tooltip.js";
+import { useState as b } from "react";
 import { ChevronRight as x } from "lucide-react";
 function V({
   data: n,
@@ -11,67 +11,67 @@ function V({
   onRowClick: t,
   selectedItems: i,
   onSelect: l,
-  isLoading: h = !1,
+  isLoading: c = !1,
   loadingRows: u = 3
 }) {
-  const [f, p] = g(null);
-  return h ? /* @__PURE__ */ r("div", { className: "space-y-4", children: Array(u).fill(0).map((a, s) => /* @__PURE__ */ d(
+  const [f, h] = b(null);
+  return c ? /* @__PURE__ */ e("div", { className: "space-y-4", children: Array(u).fill(0).map((a, s) => /* @__PURE__ */ d(
     "div",
     {
-      className: "border border-border/50 rounded-xl p-4 space-y-4 shadow-sm bg-card/30 animate-pulse",
+      className: "border border-light rounded-xl p-4 space-y-4 shadow-sm bg-card animate-pulse",
       children: [
         /* @__PURE__ */ d("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ r("div", { className: "h-5 bg-muted/70 rounded-md w-2/5" }),
-          m && /* @__PURE__ */ r("div", { className: "h-4 w-4 rounded-md bg-muted/50" })
+          /* @__PURE__ */ e("div", { className: "h-5 bg-muted/70 rounded-md w-2/5" }),
+          m && /* @__PURE__ */ e("div", { className: "h-4 w-4 rounded-md bg-muted/50" })
         ] }),
-        /* @__PURE__ */ r("div", { className: "space-y-3 pt-2", children: o.slice(0, 4).map((e, N) => /* @__PURE__ */ d("div", { className: "flex items-start gap-3", children: [
-          /* @__PURE__ */ r("div", { className: "h-4 bg-muted/40 rounded-md w-1/4" }),
-          /* @__PURE__ */ r("div", { className: "h-4 bg-muted/60 rounded-md", style: { width: Math.random() * 50 + 30 + "%" } })
-        ] }, `skeleton-col-${e.id}`)) })
+        /* @__PURE__ */ e("div", { className: "space-y-3 pt-2", children: o.slice(0, 4).map((r, N) => /* @__PURE__ */ d("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ e("div", { className: "h-4 bg-muted/40 rounded-md w-1/4" }),
+          /* @__PURE__ */ e("div", { className: "h-4 bg-muted/60 rounded-md", style: { width: Math.random() * 50 + 30 + "%" } })
+        ] }, `skeleton-col-${r.id}`)) })
       ]
     },
     `skeleton-${s}`
-  )) }) : n.length === 0 ? null : /* @__PURE__ */ r("div", { className: "space-y-4", children: n.map((a, s) => /* @__PURE__ */ d(
+  )) }) : n.length === 0 ? null : /* @__PURE__ */ e("div", { className: "space-y-4", children: n.map((a, s) => /* @__PURE__ */ d(
     "div",
     {
-      className: c(
-        "border border-border/40 rounded-xl overflow-hidden bg-card/30 shadow-sm transition-all duration-200",
-        t && "cursor-pointer hover:border-primary/30 hover:shadow-md hover:bg-card/50"
+      className: p(
+        "border border-light/40 rounded-xl overflow-hidden bg-card shadow-sm transition-all duration-200",
+        t && "cursor-pointer hover:border-primary/30 hover:shadow-md hover:bg-card"
       ),
       onClick: () => t == null ? void 0 : t(a),
       children: [
-        /* @__PURE__ */ d("div", { className: "flex items-center justify-between p-4 border-b border-border/30 bg-muted/5", children: [
-          /* @__PURE__ */ r("div", { className: "font-medium", children: o[0].cell(a) || `Item ${s + 1}` }),
+        /* @__PURE__ */ d("div", { className: "flex items-center justify-between p-4 border-b border-light bg-muted/5", children: [
+          /* @__PURE__ */ e("div", { className: "font-medium", children: o[0].cell(a) || `Item ${s + 1}` }),
           /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
-            m && /* @__PURE__ */ r(
-              v,
+            m && /* @__PURE__ */ e(
+              g,
               {
                 checked: i == null ? void 0 : i.has(a.id),
-                onClick: (e) => {
-                  e.stopPropagation(), l == null || l(a.id, !(i != null && i.has(a.id)));
+                onClick: (r) => {
+                  r.stopPropagation(), l == null || l(a.id, !(i != null && i.has(a.id)));
                 },
                 className: "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
               }
             ),
-            t && /* @__PURE__ */ r(x, { className: "h-4 w-4 text-muted-foreground/50" })
+            t && /* @__PURE__ */ e(x, { className: "h-4 w-4 text-muted-foreground/50" })
           ] })
         ] }),
-        /* @__PURE__ */ r("div", { className: "px-4 py-3 space-y-3", children: o.slice(1).map((e) => /* @__PURE__ */ d(
+        /* @__PURE__ */ e("div", { className: "px-4 py-3 space-y-3", children: o.slice(1).map((r) => /* @__PURE__ */ d(
           "div",
           {
             className: "flex items-start gap-3 text-sm group",
-            onMouseEnter: () => e.tooltipValue && p(`${s}-${e.id}`),
-            onMouseLeave: () => p(null),
+            onMouseEnter: () => r.tooltipValue && h(`${s}-${r.id}`),
+            onMouseLeave: () => h(null),
             children: [
-              /* @__PURE__ */ r("div", { className: "font-medium text-muted-foreground w-1/3 min-w-[80px] text-xs uppercase tracking-wide pt-0.5", children: e.header }),
-              /* @__PURE__ */ r("div", { className: c(
+              /* @__PURE__ */ e("div", { className: "font-medium text-muted-foreground w-1/3 min-w-[80px] text-xs uppercase tracking-wide pt-0.5", children: r.header }),
+              /* @__PURE__ */ e("div", { className: p(
                 "flex-1 min-w-0 text-foreground/90 group-hover:text-foreground transition-colors",
-                e.truncate && "truncate"
-              ), children: e.cell(a) }),
-              e.tooltipValue && f === `${s}-${e.id}` && /* @__PURE__ */ r(
-                b,
+                r.truncate && "truncate"
+              ), children: r.cell(a) }),
+              r.tooltipValue && f === `${s}-${r.id}` && /* @__PURE__ */ e(
+                v,
                 {
-                  content: e.tooltipValue(a),
+                  content: r.tooltipValue(a),
                   side: "bottom",
                   align: "start",
                   isVisible: !0
@@ -79,7 +79,7 @@ function V({
               )
             ]
           },
-          e.id
+          r.id
         )) })
       ]
     },