@definable/ui 0.1.30 → 0.1.32

package/dist/components/image-cropper-modal.js

@@ -12,46 +12,46 @@ function O({
   title: U = "Crop Your Image",
   outputSize: h = 200
 }) {
-  const [t, w] = x({ x: 0, y: 0, size: 100 }), [N, y] = x(!1), [k, z] = x(!1), [C, X] = x({ x: 0, y: 0 }), [r, Y] = x({ width: 0, height: 0 }), D = L(null), b = L(null), A = m(() => {
-    if (b.current) {
-      const e = b.current, i = 400, a = e.naturalWidth / e.naturalHeight;
-      let n, o;
-      a > 1 ? (n = i, o = i / a) : (o = i, n = i * a), Y({ width: n, height: o });
-      const l = Math.min(n, o) * 0.6;
+  const [t, w] = x({ x: 0, y: 0, size: 100 }), [N, y] = x(!1), [C, z] = x(!1), [k, X] = x({ x: 0, y: 0 }), [r, Y] = x({ width: 0, height: 0 }), D = L(null), p = L(null), A = m(() => {
+    if (p.current) {
+      const e = p.current, o = 400, a = e.naturalWidth / e.naturalHeight;
+      let n, i;
+      a > 1 ? (n = o, i = o / a) : (i = o, n = o * a), Y({ width: n, height: i });
+      const l = Math.min(n, i) * 0.6;
       w({
         x: (n - l) / 2,
-        y: (o - l) / 2,
+        y: (i - l) / 2,
         size: l
       });
     }
-  }, []), p = m((e, i) => {
+  }, []), b = m((e, o) => {
     e.preventDefault();
-    const a = e.currentTarget.getBoundingClientRect(), n = e.clientX - a.left, o = e.clientY - a.top;
-    if (i === "resize") {
+    const a = e.currentTarget.getBoundingClientRect(), n = e.clientX - a.left, i = e.clientY - a.top;
+    if (o === "resize") {
       z(!0);
-      const l = t.x + t.size / 2, u = t.y + t.size / 2, c = Math.sqrt((n - l) ** 2 + (o - u) ** 2);
+      const l = t.x + t.size / 2, u = t.y + t.size / 2, c = Math.sqrt((n - l) ** 2 + (i - u) ** 2);
       X({ x: c, y: 0 });
     } else
-      y(!0), X({ x: n - t.x, y: o - t.y });
+      y(!0), X({ x: n - t.x, y: i - t.y });
   }, [t]), B = m((e) => {
-    if (!N && !k) return;
-    const i = e.currentTarget.getBoundingClientRect(), a = e.clientX - i.left, n = e.clientY - i.top;
-    if (k) {
-      const o = t.x + t.size / 2, l = t.y + t.size / 2, u = Math.sqrt((a - o) ** 2 + (n - l) ** 2), c = Math.max(50, Math.min(Math.min(r.width, r.height), u * 2));
+    if (!N && !C) return;
+    const o = e.currentTarget.getBoundingClientRect(), a = e.clientX - o.left, n = e.clientY - o.top;
+    if (C) {
+      const i = t.x + t.size / 2, l = t.y + t.size / 2, u = Math.sqrt((a - i) ** 2 + (n - l) ** 2), c = Math.max(50, Math.min(Math.min(r.width, r.height), u * 2));
       w({
-        x: Math.max(0, Math.min(r.width - c, o - c / 2)),
+        x: Math.max(0, Math.min(r.width - c, i - c / 2)),
         y: Math.max(0, Math.min(r.height - c, l - c / 2)),
         size: c
       });
     } else if (N) {
-      const o = a - C.x, l = n - C.y, u = r.width - t.size, c = r.height - t.size;
+      const i = a - k.x, l = n - k.y, u = r.width - t.size, c = r.height - t.size;
       w((R) => ({
         ...R,
-        x: Math.max(0, Math.min(u, o)),
+        x: Math.max(0, Math.min(u, i)),
         y: Math.max(0, Math.min(c, l))
       }));
     }
-  }, [N, k, C, r, t]), $ = m(() => {
+  }, [N, C, k, r, t]), $ = m(() => {
     y(!1), z(!1);
   }, []), H = m(() => {
     if (r.width && r.height) {
@@ -63,13 +63,13 @@ function O({
       });
     }
   }, [r]), W = m(() => {
-    if (!D.current || !b.current) return;
-    const e = D.current, i = e.getContext("2d");
-    if (!i) return;
-    const a = b.current;
+    if (!D.current || !p.current) return;
+    const e = D.current, o = e.getContext("2d");
+    if (!o) return;
+    const a = p.current;
     e.width = h, e.height = h;
-    const n = a.naturalWidth / r.width, o = a.naturalHeight / r.height, l = t.x * n, u = t.y * o, c = t.size * Math.min(n, o);
-    i.beginPath(), i.arc(h / 2, h / 2, h / 2, 0, Math.PI * 2), i.clip(), i.drawImage(
+    const n = a.naturalWidth / r.width, i = a.naturalHeight / r.height, l = t.x * n, u = t.y * i, c = t.size * Math.min(n, i);
+    o.beginPath(), o.arc(h / 2, h / 2, h / 2, 0, Math.PI * 2), o.clip(), o.drawImage(
       a,
       l,
       u,
@@ -140,7 +140,7 @@ function O({
                 /* @__PURE__ */ s(
                   "img",
                   {
-                    ref: b,
+                    ref: p,
                     src: f,
                     alt: "Crop preview",
                     className: "block",
@@ -159,7 +159,7 @@ function O({
                       width: t.size,
                       height: t.size
                     },
-                    onMouseDown: (e) => p(e, "move"),
+                    onMouseDown: (e) => b(e, "move"),
                     children: [
                       /* @__PURE__ */ s("div", { className: "w-full h-full rounded-full border-2 border-primary border-dashed" }),
                       /* @__PURE__ */ s(
@@ -167,7 +167,7 @@ function O({
                         {
                           className: "absolute w-5 h-5 bg-white border-2 border-primary rounded-full shadow-lg cursor-nw-resize -top-2.5 -right-2.5 hover:bg-primary hover:border-white transition-colors flex items-center justify-center",
                           onMouseDown: (e) => {
-                            e.stopPropagation(), p(e, "resize");
+                            e.stopPropagation(), b(e, "resize");
                           },
                           children: /* @__PURE__ */ s("div", { className: "w-1.5 h-1.5 bg-primary rounded-full hover:bg-white transition-colors" })
                         }
@@ -177,7 +177,7 @@ function O({
                         {
                           className: "absolute w-5 h-5 bg-white border-2 border-primary rounded-full shadow-lg cursor-ne-resize -bottom-2.5 -right-2.5 hover:bg-primary hover:border-white transition-colors flex items-center justify-center",
                           onMouseDown: (e) => {
-                            e.stopPropagation(), p(e, "resize");
+                            e.stopPropagation(), b(e, "resize");
                           },
                           children: /* @__PURE__ */ s("div", { className: "w-1.5 h-1.5 bg-primary rounded-full hover:bg-white transition-colors" })
                         }
@@ -187,7 +187,7 @@ function O({
                         {
                           className: "absolute w-5 h-5 bg-white border-2 border-primary rounded-full shadow-lg cursor-sw-resize -bottom-2.5 -left-2.5 hover:bg-primary hover:border-white transition-colors flex items-center justify-center",
                           onMouseDown: (e) => {
-                            e.stopPropagation(), p(e, "resize");
+                            e.stopPropagation(), b(e, "resize");
                           },
                           children: /* @__PURE__ */ s("div", { className: "w-1.5 h-1.5 bg-primary rounded-full hover:bg-white transition-colors" })
                         }
@@ -197,7 +197,7 @@ function O({
                         {
                           className: "absolute w-5 h-5 bg-white border-2 border-primary rounded-full shadow-lg cursor-se-resize -top-2.5 -left-2.5 hover:bg-primary hover:border-white transition-colors flex items-center justify-center",
                           onMouseDown: (e) => {
-                            e.stopPropagation(), p(e, "resize");
+                            e.stopPropagation(), b(e, "resize");
                           },
                           children: /* @__PURE__ */ s("div", { className: "w-1.5 h-1.5 bg-primary rounded-full hover:bg-white transition-colors" })
                         }
@@ -222,7 +222,7 @@ function O({
             /* @__PURE__ */ s(
               "div",
               {
-                className: "rounded-full border-2 border-border bg-background overflow-hidden mx-auto",
+                className: "rounded-full border-2 border-light bg-secondary overflow-hidden mx-auto",
                 style: { width: 80, height: 80 },
                 children: /* @__PURE__ */ s(
                   "div",

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
         ),