@definable/ui 0.1.31 → 0.1.35

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 l, Fragment as j, jsx as e } from "react/jsx-runtime";
+import { useState as h, useRef as S, useCallback as s } 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,
+  onChange: o,
+  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), [y, n] = h(null), a = S(null), N = s((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;
+        n(M), m(!0);
+      }, p.readAsDataURL(t);
     }
     r.target.value = "";
-  }, []), y = i((r) => {
-    a(r), s(null);
-  }, [a]), k = i(() => {
-    d(!1), s(null), l.current && (l.current.value = "");
-  }, []), I = i(() => {
-    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: [
+  }, []), w = s((r) => {
+    o(r), n(null);
+  }, [o]), I = s(() => {
+    m(!1), n(null), a.current && (a.current.value = "");
+  }, []), R = s(() => {
+    o(null);
+  }, [o]);
+  return /* @__PURE__ */ l(j, { children: [
+    /* @__PURE__ */ l("div", { className: E("space-y-3", g), children: [
+      c ? /* @__PURE__ */ l("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__ */ l("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ l(
+            f,
             {
               variant: "outline",
               size: "sm",
               onClick: (r) => {
-                var o;
-                r.stopPropagation(), (o = l.current) == null || o.click();
+                var t;
+                r.stopPropagation(), (t = a.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__ */ l(
+            f,
             {
               variant: "outline",
               size: "sm",
-              onClick: I,
+              onClick: R,
               children: [
                 /* @__PURE__ */ e(O, { className: "h-3 w-3 mr-1" }),
                 "Remove"
@@ -79,35 +79,35 @@ function Y({
             }
           )
         ] })
-      ] }) : /* @__PURE__ */ t(
+      ] }) : /* @__PURE__ */ l(
         "button",
         {
           onClick: (r) => {
-            var o;
-            r.stopPropagation(), (o = l.current) == null || o.click();
+            var t;
+            r.stopPropagation(), (t = a.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" })
               }
             ),
-            /* @__PURE__ */ e("p", { className: "text-sm font-medium text-foreground mb-1", children: b }),
-            /* @__PURE__ */ e("p", { className: "text-xs text-muted-foreground", children: "Click to browse" })
+            /* @__PURE__ */ e("p", { className: "text-sm font-medium text-primary mb-1", children: b }),
+            /* @__PURE__ */ e("p", { className: "text-xs text-tertiary", children: "Click to browse" })
           ]
         }
       ),
       /* @__PURE__ */ e(
         "input",
         {
-          ref: l,
+          ref: a,
           type: "file",
           accept: "image/*",
-          onChange: w,
+          onChange: N,
           className: "hidden"
         }
       )
@@ -116,9 +116,9 @@ function Y({
       A,
       {
         isOpen: C,
-        onClose: k,
-        imageSrc: N,
-        onCrop: y,
+        onClose: I,
+        imageSrc: y,
+        onCrop: w,
         title: v,
         outputSize: x
       }

package/dist/components/input.js

@@ -1,17 +1,17 @@
-import { jsx as d } from "react/jsx-runtime";
-import * as n from "react";
-import { cn as a } from "../lib/utils.js";
-const l = n.forwardRef(
-  ({ className: r, type: o, ...e }, t) => /* @__PURE__ */ d(
+import { jsx as a } from "react/jsx-runtime";
+import * as i from "react";
+import { cn as d } from "../lib/utils.js";
+const l = i.forwardRef(
+  ({ className: r, type: o, ...t }, e) => /* @__PURE__ */ a(
     "input",
     {
       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",
+      className: d(
+        "h-10 w-full rounded-lg border-2 border-light bg-secondary px-4 py-2 text-sm text-primary outline-none transition-colors placeholder:text-tertiary focus:border-primary disabled:cursor-not-allowed disabled:opacity-50",
         r
       ),
-      ref: t,
-      ...e
+      ref: e,
+      ...t
     }
   )
 );

package/dist/components/loader.js

@@ -16,7 +16,7 @@ function h({
     sm: "gap-0.5",
     md: "gap-1",
     lg: "gap-1.5"
-  }, f = {
+  }, y = {
     hidden: { opacity: 0, y: 20 },
     visible: (i) => ({
       opacity: 1,
@@ -32,14 +32,14 @@ function h({
     a.div,
     {
       custom: i,
-      variants: f,
+      variants: y,
       initial: "hidden",
       animate: "visible",
       className: `${o[n]} rounded-full ${m ? "bg-primary/80" : "bg-primary/60"}`
     },
     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",
@@ -56,7 +56,7 @@ function h({
             transition: { delay: 0.3, duration: 0.3 },
             children: [
               /* @__PURE__ */ e("h2", { className: "text-lg font-medium mb-2", children: c }),
-              /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: d })
+              /* @__PURE__ */ e("p", { className: "text-sm text-tertiary", children: d })
             ]
           }
         )

package/dist/components/loading-placeholder.js

@@ -1,16 +1,16 @@
 import { jsx as o, Fragment as a } from "react/jsx-runtime";
-import { cn as m } from "../lib/utils.js";
+import { cn as f } from "../lib/utils.js";
 function b({
   className: t,
   count: n = 1,
   animate: e = !0,
   variant: r = "shimmer"
 }) {
-  return /* @__PURE__ */ o(a, { children: Array.from({ length: n }).map((f, i) => /* @__PURE__ */ o(
+  return /* @__PURE__ */ o(a, { children: Array.from({ length: n }).map((m, i) => /* @__PURE__ */ o(
     "div",
     {
-      className: m(
-        "relative overflow-hidden bg-muted/30 rounded",
+      className: f(
+        "relative overflow-hidden bg-hover/30 rounded",
         e && r === "shimmer" && "before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent",
         e && r === "pulse" && "animate-pulse",
         t

package/dist/components/mention.js

@@ -1,8 +1,8 @@
-import { jsx as o, jsxs as d } from "react/jsx-runtime";
+import { jsx as o, jsxs as l } from "react/jsx-runtime";
 import x, { forwardRef as b } from "react";
-import { MentionsInput as v, Mention as y } from "react-mentions";
+import { MentionsInput as y, Mention as v } from "react-mentions";
 import { cn as n } from "../lib/utils.js";
-const w = (e, t, i, a, r) => /* @__PURE__ */ d(
+const w = (e, t, i, a, r) => /* @__PURE__ */ l(
   "div",
   {
     className: n(
@@ -18,9 +18,9 @@ const w = (e, t, i, a, r) => /* @__PURE__ */ d(
           className: "h-full w-full object-cover"
         }
       ) }),
-      /* @__PURE__ */ d("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ l("div", { className: "flex flex-col", children: [
         /* @__PURE__ */ o("span", { className: "font-medium", children: e.display }),
-        e.subtitle && /* @__PURE__ */ o("span", { className: "text-xs text-muted-foreground", children: e.subtitle })
+        e.subtitle && /* @__PURE__ */ o("span", { className: "text-xs text-tertiary", children: e.subtitle })
       ] })
     ]
   }
@@ -31,14 +31,14 @@ const w = (e, t, i, a, r) => /* @__PURE__ */ d(
     placeholder: i = "Type @ to mention someone",
     data: a,
     disabled: r = !1,
-    className: l,
+    className: d,
     inputClassName: s,
     suggestionItemClassName: m,
     trigger: p = "@",
-    displayTransform: u = _,
-    onKeyDown: c
-  }, g) => {
-    const h = {
+    displayTransform: c = _,
+    onKeyDown: u
+  }, h) => {
+    const g = {
       control: {
         fontSize: 14,
         fontWeight: "normal",
@@ -108,31 +108,31 @@ const w = (e, t, i, a, r) => /* @__PURE__ */ d(
     }, []), /* @__PURE__ */ o(
       "div",
       {
-        ref: g,
-        className: n("relative w-full", l),
+        ref: h,
+        className: n("relative w-full", d),
         children: /* @__PURE__ */ o(
-          v,
+          y,
           {
             value: e,
             onChange: t,
-            style: { ...h, ...f },
+            style: { ...g, ...f },
             placeholder: i,
             disabled: r,
             a11ySuggestionsListLabel: "Suggested mentions",
             className: n(
-              "w-full rounded-md bg-transparent text-sm placeholder:text-muted-foreground resize-none font-normal",
+              "w-full rounded-md bg-transparent text-sm placeholder:text-tertiary resize-none font-normal",
               s
             ),
             suggestionsPortalHost: typeof document < "u" ? document.body : void 0,
             allowSuggestionsAboveCursor: !0,
-            onKeyDown: c,
+            onKeyDown: u,
             children: /* @__PURE__ */ o(
-              y,
+              v,
               {
                 trigger: p,
                 data: a,
                 renderSuggestion: w,
-                displayTransform: u,
+                displayTransform: c,
                 appendSpaceOnAdd: !0,
                 className: n(
                   "text-primary font-medium",

package/dist/components/modal.js

@@ -27,20 +27,20 @@ const P = (r) => {
 };
 function I({
   isOpen: r,
-  onClose: i,
-  title: d,
-  description: a,
-  icon: n,
-  children: h,
+  onClose: n,
+  title: a,
+  description: d,
+  icon: i,
+  children: u,
   footer: s,
-  size: g = "md",
-  showClose: w = !0,
+  size: y = "md",
+  showClose: v = !0,
   className: f,
-  isContentScrollable: b = !0,
-  mainClassName: v,
-  contentClassName: y,
+  isContentScrollable: w = !0,
+  mainClassName: g,
+  contentClassName: N,
   header: c,
-  headerClassName: N,
+  headerClassName: b,
   zIndexClassName: k = "z-[50]",
   mobileSheet: m
 }) {
@@ -50,36 +50,36 @@ function I({
       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 }),
+        onClose: n,
+        header: c || (a || d || i ? /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
+          i && /* @__PURE__ */ e("div", { className: "h-8 w-8 rounded-lg flex items-center justify-center", children: i }),
           /* @__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 })
+            a && /* @__PURE__ */ e("h2", { className: "text-sm font-medium", children: a }),
+            d && /* @__PURE__ */ e("p", { className: "text-sm text-tertiary", children: d })
           ] })
         ] }) : void 0),
         footer: /* @__PURE__ */ e("div", { className: "flex gap-2 justify-end", children: s }),
         className: l(f, "w-full max-w-full"),
         position: x || "bottom",
-        headerClassName: l(N, "w-full max-w-full"),
+        headerClassName: l(b, "w-full max-w-full"),
         enableFullscreen: !1,
-        children: h
+        children: u
       }
     );
   }
-  const u = F((x) => {
-    x.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 h = F((x) => {
+    x.key === "Escape" && r && n();
+  }, [r, n]);
+  H(() => (document.addEventListener("keydown", h), () => document.removeEventListener("keydown", h)), [h]);
+  const o = a || d || i || 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", g), children: [
     /* @__PURE__ */ e(
       p.div,
       {
         initial: { opacity: 0 },
         animate: { opacity: 1 },
         exit: { opacity: 0 },
-        className: "fixed inset-0 bg-background/80 backdrop-blur-sm",
-        onClick: i
+        className: "fixed inset-0 bg-secondary/80 backdrop-blur-sm",
+        onClick: n
       }
     ),
     /* @__PURE__ */ t(
@@ -90,40 +90,40 @@ 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),
+        style: P(y),
         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 }),
+              i && /* @__PURE__ */ e("div", { className: "h-8 w-8 rounded-lg flex items-center justify-center", children: i }),
               /* @__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 })
+                a && /* @__PURE__ */ e("h2", { className: "text-sm font-small", children: a }),
+                d && /* @__PURE__ */ e("p", { className: "text-sm text-tertiary", children: d })
               ] })
             ] }),
-            w && /* @__PURE__ */ e(
+            v && /* @__PURE__ */ e(
               "button",
               {
-                onClick: i,
-                className: "p-1.5 rounded-md hover:bg-muted text-muted-foreground",
+                onClick: n,
+                className: "p-1.5 rounded-md hover:bg-hover text-tertiary",
                 children: /* @__PURE__ */ t("div", { className: "flex justify-center items-center", children: [
                   /* @__PURE__ */ e(z, { className: "h-4 w-4" }),
-                  /* @__PURE__ */ e("kbd", { className: "ml-2 text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded", children: "ESC" })
+                  /* @__PURE__ */ e("kbd", { className: "ml-2 text-[10px] text-tertiary bg-hover px-1.5 py-0.5 rounded", children: "ESC" })
                 ] })
               }
             )
           ] }),
           /* @__PURE__ */ e("div", { className: l(
             "flex-1 min-h-0",
-            b ? "overflow-y-auto" : "",
+            w ? "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 })
+            N
+          ), children: u }),
+          s && /* @__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: s })
         ]
       }
     )

package/dist/components/picker.js

@@ -1,66 +1,66 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { useState as u } from "react";
-import i from "react-mobile-picker";
+import { useState as p } from "react";
+import o from "react-mobile-picker";
 import { cn as l } from "../lib/utils.js";
 import { Button as D } from "./button.js";
 import { ChevronRight as j } from "lucide-react";
 import { Drawer as z, DrawerTrigger as O, DrawerContent as P, DrawerHeader as T, DrawerTitle as V, DrawerFooter as H } from "./drawer.js";
 function E({
   label: n,
-  options: d,
+  options: s,
   value: a,
-  onChange: p,
-  trigger: f,
-  className: g,
-  pickerClassName: x,
-  description: s,
-  drawerProps: b
+  onChange: f,
+  trigger: x,
+  className: u,
+  pickerClassName: g,
+  description: c,
+  drawerProps: v
 }) {
-  const [v, c] = u(!1), [m, h] = u(a), N = (r) => {
-    r && h(a), c(r);
-  }, o = d.find((r) => r.value === a), w = { column: m }, k = (r) => {
+  const [b, d] = p(!1), [m, h] = p(a), y = (r) => {
+    r && h(a), d(r);
+  }, i = s.find((r) => r.value === a), w = { column: m }, N = (r) => {
     h(r.column);
-  }, y = () => {
-    p(m), c(!1);
+  }, k = () => {
+    f(m), d(!1);
   };
-  return /* @__PURE__ */ t(z, { open: v, onOpenChange: N, ...b, children: [
+  return /* @__PURE__ */ t(z, { open: b, onOpenChange: y, ...v, children: [
     /* @__PURE__ */ e(O, { asChild: !0, children: /* @__PURE__ */ 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: [
+        className: l("cursor-pointer select-none", u),
+        children: x || /* @__PURE__ */ t("div", { className: "flex items-center justify-between p-3.5 bg-hover/20 hover:bg-hover/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__ */ e("span", { className: "text-[10px] font-black uppercase tracking-[0.2em] text-tertiary/45", children: n }),
             /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ e("span", { className: "text-sm font-bold text-foreground", children: (o == null ? void 0 : o.label) || a }),
-              s && /* @__PURE__ */ t("span", { className: "text-[10px] text-muted-foreground/50 font-medium truncate max-w-[120px]", children: [
+              /* @__PURE__ */ e("span", { className: "text-sm font-bold text-primary", children: (i == null ? void 0 : i.label) || a }),
+              c && /* @__PURE__ */ t("span", { className: "text-[10px] text-tertiary/50 font-medium truncate max-w-[120px]", children: [
                 "• ",
-                s
+                c
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ e("div", { className: "w-7 min-w-[28px] h-7 rounded-full bg-muted/30 flex items-center justify-center group-hover:bg-muted/50 transition-colors", children: /* @__PURE__ */ e(j, { className: "w-4 h-4 text-muted-foreground/60" }) })
+          /* @__PURE__ */ e("div", { className: "w-7 min-w-[28px] h-7 rounded-full bg-hover/30 flex items-center justify-center group-hover:bg-hover/50 transition-colors", children: /* @__PURE__ */ e(j, { className: "w-4 h-4 text-tertiary/60" }) })
         ] })
       }
     ) }),
     /* @__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-hover/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,
+          o,
           {
             value: w,
-            onChange: k,
+            onChange: N,
             height: 220,
             itemHeight: 56,
-            className: l(x),
-            children: /* @__PURE__ */ e(i.Column, { name: "column", children: d.map((r) => /* @__PURE__ */ e(i.Item, { value: r.value, children: ({ selected: C }) => /* @__PURE__ */ e(
+            className: l(g),
+            children: /* @__PURE__ */ e(o.Column, { name: "column", children: s.map((r) => /* @__PURE__ */ e(o.Item, { value: r.value, children: ({ selected: C }) => /* @__PURE__ */ e(
               "div",
               {
                 className: l(
                   "flex items-center justify-center h-full px-6 text-center transition-all duration-300 ease-out",
-                  C ? "text-primary text-xl font-bold tracking-tight" : "text-muted-foreground/30 text-base font-medium scale-95"
+                  C ? "text-primary text-xl font-bold tracking-tight" : "text-tertiary/30 text-base font-medium scale-95"
                 ),
                 children: r.label
               }
@@ -73,8 +73,8 @@ function E({
       /* @__PURE__ */ e(H, { children: /* @__PURE__ */ t(
         D,
         {
-          onClick: y,
-          className: "w-full h-12 rounded-2xl text-base font-bold shadow-lg shadow-primary/10 bg-primary text-primary-foreground hover:opacity-95 active:scale-[0.98] transition-all",
+          onClick: k,
+          className: "w-full h-12 rounded-2xl text-base font-bold shadow-lg shadow-primary/10 bg-primary text-white hover:opacity-95 active:scale-[0.98] transition-all",
           children: [
             "Confirm ",
             n

package/dist/components/popover.js

@@ -1,23 +1,23 @@
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import * as n from "react";
-import * as o from "@radix-ui/react-popover";
+import * as t from "@radix-ui/react-popover";
 import { cn as s } from "../lib/utils.js";
-const l = o.Root, c = o.Trigger, m = n.forwardRef(({ className: e, align: a = "center", sideOffset: r = 4, ...d }, i) => /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ t(
-  o.Content,
+const f = t.Root, c = t.Trigger, m = n.forwardRef(({ className: e, align: a = "center", sideOffset: r = 4, ...d }, i) => /* @__PURE__ */ o(t.Portal, { children: /* @__PURE__ */ o(
+  t.Content,
   {
     ref: i,
     align: a,
     sideOffset: r,
     className: s(
-      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 w-72 rounded-md border bg-card p-4 text-primary shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       e
     ),
     ...d
   }
 ) }));
-m.displayName = o.Content.displayName;
+m.displayName = t.Content.displayName;
 export {
-  l as Popover,
+  f as Popover,
   m as PopoverContent,
   c as PopoverTrigger
 };