@definable/ui 0.1.32 → 0.1.36

package/dist/components/dialog.js

@@ -1,16 +1,16 @@
-import { jsx as o, jsxs as r } from "react/jsx-runtime";
-import * as l from "react";
+import { jsx as i, jsxs as l } from "react/jsx-runtime";
+import * as r from "react";
 import * as a from "@radix-ui/react-dialog";
 import { cn as s } from "../lib/utils.js";
 import { X as m } from "lucide-react";
 import { motion as n, AnimatePresence as p } from "framer-motion";
-const w = ({ ...e }) => /* @__PURE__ */ o(a.Root, { ...e }), C = a.Trigger, g = a.Portal, R = a.Close, c = l.forwardRef(({ className: e, ...i }, t) => /* @__PURE__ */ o(
+const b = ({ ...e }) => /* @__PURE__ */ i(a.Root, { ...e }), C = a.Trigger, f = a.Portal, R = a.Close, c = r.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ i(
   a.Overlay,
   {
     ref: t,
     asChild: !0,
-    ...i,
-    children: /* @__PURE__ */ o(
+    ...o,
+    children: /* @__PURE__ */ i(
       n.div,
       {
         className: s(
@@ -26,15 +26,15 @@ const w = ({ ...e }) => /* @__PURE__ */ o(a.Root, { ...e }), C = a.Trigger, g =
   }
 ));
 c.displayName = a.Overlay.displayName;
-const f = l.forwardRef(({ className: e, children: i, ...t }, d) => /* @__PURE__ */ o(g, { children: /* @__PURE__ */ r(p, { mode: "wait", children: [
-  /* @__PURE__ */ o(c, {}),
-  /* @__PURE__ */ o(
+const g = r.forwardRef(({ className: e, children: o, ...t }, d) => /* @__PURE__ */ i(f, { children: /* @__PURE__ */ l(p, { mode: "wait", children: [
+  /* @__PURE__ */ i(c, {}),
+  /* @__PURE__ */ i(
     a.Content,
     {
       ref: d,
       asChild: !0,
       ...t,
-      children: /* @__PURE__ */ r(
+      children: /* @__PURE__ */ l(
         n.div,
         {
           className: s(
@@ -46,10 +46,10 @@ const f = l.forwardRef(({ className: e, children: i, ...t }, d) => /* @__PURE__
           exit: { opacity: 0, scale: 0.95, x: "-50%", y: "-50%" },
           transition: { duration: 0.2 },
           children: [
-            i,
-            /* @__PURE__ */ r(a.Close, { 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", children: [
-              /* @__PURE__ */ o(m, { className: "h-4 w-4" }),
-              /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
+            o,
+            /* @__PURE__ */ l(a.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white dark:ring-offset-[#1F1F20] transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-black/20 dark:focus:ring-white/20 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-hover data-[state=open]:text-tertiary", children: [
+              /* @__PURE__ */ i(m, { className: "h-4 w-4" }),
+              /* @__PURE__ */ i("span", { className: "sr-only", children: "Close" })
             ] })
           ]
         }
@@ -57,36 +57,36 @@ const f = l.forwardRef(({ className: e, children: i, ...t }, d) => /* @__PURE__
     }
   )
 ] }) }));
-f.displayName = a.Content.displayName;
+g.displayName = a.Content.displayName;
 const y = ({
   className: e,
-  ...i
-}) => /* @__PURE__ */ o(
+  ...o
+}) => /* @__PURE__ */ i(
   "div",
   {
     className: s(
       "flex flex-col space-y-1.5 text-center sm:text-left",
       e
     ),
-    ...i
+    ...o
   }
 );
 y.displayName = "DialogHeader";
 const x = ({
   className: e,
-  ...i
-}) => /* @__PURE__ */ o(
+  ...o
+}) => /* @__PURE__ */ i(
   "div",
   {
     className: s(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
       e
     ),
-    ...i
+    ...o
   }
 );
 x.displayName = "DialogFooter";
-const u = l.forwardRef(({ className: e, ...i }, t) => /* @__PURE__ */ o(
+const N = r.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ i(
   a.Title,
   {
     ref: t,
@@ -94,28 +94,28 @@ const u = l.forwardRef(({ className: e, ...i }, t) => /* @__PURE__ */ o(
       "text-lg font-semibold leading-none tracking-tight",
       e
     ),
-    ...i
+    ...o
   }
 ));
-u.displayName = a.Title.displayName;
-const N = l.forwardRef(({ className: e, ...i }, t) => /* @__PURE__ */ o(
+N.displayName = a.Title.displayName;
+const h = r.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ i(
   a.Description,
   {
     ref: t,
-    className: s("text-sm text-muted-foreground", e),
-    ...i
+    className: s("text-sm text-tertiary", e),
+    ...o
   }
 ));
-N.displayName = a.Description.displayName;
+h.displayName = a.Description.displayName;
 export {
-  w as Dialog,
+  b as Dialog,
   R as DialogClose,
-  f as DialogContent,
-  N as DialogDescription,
+  g as DialogContent,
+  h as DialogDescription,
   x as DialogFooter,
   y as DialogHeader,
   c as DialogOverlay,
-  g as DialogPortal,
-  u as DialogTitle,
+  f as DialogPortal,
+  N as DialogTitle,
   C as DialogTrigger
 };

package/dist/components/drawer.js

@@ -44,7 +44,7 @@ const n = ({
   }
 );
 n.displayName = "Drawer";
-const Y = e.Trigger, d = e.Portal, Z = e.Close, s = m.forwardRef(({ className: r, ...t }, a) => /* @__PURE__ */ o(
+const Y = e.Trigger, c = e.Portal, Z = e.Close, s = m.forwardRef(({ className: r, ...t }, a) => /* @__PURE__ */ o(
   e.Overlay,
   {
     ref: a,
@@ -53,7 +53,7 @@ const Y = e.Trigger, d = e.Portal, Z = e.Close, s = m.forwardRef(({ className: r
   }
 ));
 s.displayName = e.Overlay.displayName;
-const c = m.forwardRef(({ className: r, children: t, ...a }, l) => /* @__PURE__ */ p(d, { children: [
+const d = m.forwardRef(({ className: r, children: t, ...a }, l) => /* @__PURE__ */ p(c, { children: [
   /* @__PURE__ */ o(s, {}),
   /* @__PURE__ */ p(
     e.Content,
@@ -71,7 +71,7 @@ const c = m.forwardRef(({ className: r, children: t, ...a }, l) => /* @__PURE__
     }
   )
 ] }));
-c.displayName = "DrawerContent";
+d.displayName = "DrawerContent";
 const f = ({
   className: r,
   ...t
@@ -110,7 +110,7 @@ const x = m.forwardRef(({ className: r, ...t }, a) => /* @__PURE__ */ o(
   e.Description,
   {
     ref: a,
-    className: i("text-sm text-muted-foreground", r),
+    className: i("text-sm text-tertiary", r),
     ...t
   }
 ));
@@ -118,12 +118,12 @@ x.displayName = e.Description.displayName;
 export {
   n as Drawer,
   Z as DrawerClose,
-  c as DrawerContent,
+  d as DrawerContent,
   x as DrawerDescription,
   w as DrawerFooter,
   f as DrawerHeader,
   s as DrawerOverlay,
-  d as DrawerPortal,
+  c as DrawerPortal,
   D as DrawerTitle,
   Y as DrawerTrigger
 };

package/dist/components/dropdown-menu.js

@@ -2,47 +2,47 @@ import { jsx as e } from "react/jsx-runtime";
 import * as a from "react";
 import * as o from "@radix-ui/react-dropdown-menu";
 import { cn as i } from "../lib/utils.js";
-import { motion as p } from "framer-motion";
-const w = o.Root, y = o.Trigger, g = o.Group, x = o.Separator, c = a.forwardRef(({ className: t, sideOffset: r = 4, children: n, ...d }, s) => /* @__PURE__ */ e(o.Portal, { children: /* @__PURE__ */ e(
+import { motion as m } from "framer-motion";
+const w = o.Root, y = o.Trigger, x = o.Group, D = o.Separator, p = a.forwardRef(({ className: r, sideOffset: t = 4, children: n, ...d }, s) => /* @__PURE__ */ e(o.Portal, { children: /* @__PURE__ */ e(
   o.Content,
   {
     ref: s,
-    sideOffset: r,
+    sideOffset: t,
     ...d,
     children: /* @__PURE__ */ e(
-      p.div,
+      m.div,
       {
         initial: { opacity: 0, scale: 0.95 },
         animate: { opacity: 1, scale: 1 },
         exit: { opacity: 0, scale: 0.95 },
         transition: { duration: 0.2 },
         className: i(
-          "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-          t
+          "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-card p-1 text-primary shadow-md",
+          r
         ),
         children: n
       }
     )
   }
 ) }));
-c.displayName = o.Content.displayName;
-const m = a.forwardRef(({ className: t, ...r }, n) => /* @__PURE__ */ e(
+p.displayName = o.Content.displayName;
+const c = a.forwardRef(({ className: r, ...t }, n) => /* @__PURE__ */ e(
   o.Item,
   {
     ref: n,
     className: i(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      t
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-hover focus:text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      r
     ),
-    ...r
+    ...t
   }
 ));
-m.displayName = o.Item.displayName;
+c.displayName = o.Item.displayName;
 export {
   w as DropdownMenu,
-  c as DropdownMenuContent,
-  g as DropdownMenuGroup,
-  m as DropdownMenuItem,
-  x as DropdownMenuSeparator,
+  p as DropdownMenuContent,
+  x as DropdownMenuGroup,
+  c as DropdownMenuItem,
+  D as DropdownMenuSeparator,
   y as DropdownMenuTrigger
 };

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

@@ -1,4 +1,4 @@
-import { jsx as s, jsxs as d } from "react/jsx-runtime";
+import { jsx as s, jsxs as h } from "react/jsx-runtime";
 import { useState as x, useRef as L, useCallback as m, useEffect as E } from "react";
 import { Button as P } from "./button.js";
 import { Modal as q } from "./modal.js";
@@ -6,13 +6,13 @@ import { Label as T } from "./label.js";
 import { RotateCcw as K, X as F, Check as G } from "lucide-react";
 function O({
   isOpen: g,
-  onClose: v,
+  onClose: y,
   imageSrc: f,
   onCrop: j,
   title: U = "Crop Your Image",
-  outputSize: h = 200
+  outputSize: d = 200
 }) {
-  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(() => {
+  const [t, w] = x({ x: 0, y: 0, size: 100 }), [N, v] = 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;
@@ -32,7 +32,7 @@ function O({
       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: i - t.y });
+      v(!0), X({ x: n - t.x, y: i - t.y });
   }, [t]), B = m((e) => {
     if (!N && !C) return;
     const o = e.currentTarget.getBoundingClientRect(), a = e.clientX - o.left, n = e.clientY - o.top;
@@ -52,7 +52,7 @@ function O({
       }));
     }
   }, [N, C, k, r, t]), $ = m(() => {
-    y(!1), z(!1);
+    v(!1), z(!1);
   }, []), H = m(() => {
     if (r.width && r.height) {
       const e = Math.min(r.width, r.height) * 0.6;
@@ -67,9 +67,9 @@ function O({
     const e = D.current, o = e.getContext("2d");
     if (!o) return;
     const a = p.current;
-    e.width = h, e.height = h;
+    e.width = d, e.height = d;
     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(
+    o.beginPath(), o.arc(d / 2, d / 2, d / 2, 0, Math.PI * 2), o.clip(), o.drawImage(
       a,
       l,
       u,
@@ -77,21 +77,21 @@ function O({
       c,
       0,
       0,
-      h,
-      h
+      d,
+      d
     );
     const R = e.toDataURL("image/png");
-    j(R), v();
-  }, [t, r, j, v, h]), M = m(() => {
-    y(!1), z(!1), w({ x: 0, y: 0, size: 100 }), v();
-  }, [v]), I = m((e) => {
+    j(R), y();
+  }, [t, r, j, y, d]), M = m(() => {
+    v(!1), z(!1), w({ x: 0, y: 0, size: 100 }), y();
+  }, [y]), I = m((e) => {
     e.key === "Escape" && g && (e.stopPropagation(), M());
   }, [g, M]);
   return E(() => {
     if (g)
       return document.addEventListener("keydown", I, !0), () => document.removeEventListener("keydown", I, !0);
   }, [g, I]), E(() => {
-    g && f && (y(!1), z(!1), Y({ width: 0, height: 0 }));
+    g && f && (v(!1), z(!1), Y({ width: 0, height: 0 }));
   }, [g, f]), f ? /* @__PURE__ */ s(
     q,
     {
@@ -100,8 +100,8 @@ function O({
       title: U,
       size: "2xl",
       zIndexClassName: "z-[60]",
-      footer: /* @__PURE__ */ d("div", { className: "flex items-center justify-between w-full", children: [
-        /* @__PURE__ */ d(
+      footer: /* @__PURE__ */ h("div", { className: "flex items-center justify-between w-full", children: [
+        /* @__PURE__ */ h(
           P,
           {
             variant: "ghost",
@@ -114,21 +114,21 @@ function O({
             ]
           }
         ),
-        /* @__PURE__ */ d("div", { className: "flex gap-3", children: [
-          /* @__PURE__ */ d(P, { variant: "outline", onClick: M, children: [
+        /* @__PURE__ */ h("div", { className: "flex gap-3", children: [
+          /* @__PURE__ */ h(P, { variant: "outline", onClick: M, children: [
             /* @__PURE__ */ s(F, { className: "h-4 w-4 mr-2" }),
             "Cancel"
           ] }),
-          /* @__PURE__ */ d(P, { onClick: W, children: [
+          /* @__PURE__ */ h(P, { onClick: W, children: [
             /* @__PURE__ */ s(G, { className: "h-4 w-4 mr-2" }),
             "Crop Image"
           ] })
         ] })
       ] }),
-      children: /* @__PURE__ */ d("div", { className: "p-6", children: [
-        /* @__PURE__ */ d("div", { className: "space-y-6", children: [
-          /* @__PURE__ */ s("div", { className: "text-center", children: /* @__PURE__ */ s("p", { className: "text-sm text-muted-foreground", children: "Drag the circle to move • Drag corners to resize • Click reset to center" }) }),
-          /* @__PURE__ */ s("div", { className: "flex justify-center", children: /* @__PURE__ */ d(
+      children: /* @__PURE__ */ h("div", { className: "p-6", children: [
+        /* @__PURE__ */ h("div", { className: "space-y-6", children: [
+          /* @__PURE__ */ s("div", { className: "text-center", children: /* @__PURE__ */ s("p", { className: "text-sm text-tertiary", children: "Drag the circle to move • Drag corners to resize • Click reset to center" }) }),
+          /* @__PURE__ */ s("div", { className: "flex justify-center", children: /* @__PURE__ */ h(
             "div",
             {
               className: "relative bg-gray-100 rounded-xl overflow-hidden select-none border",
@@ -149,7 +149,7 @@ function O({
                     draggable: !1
                   }
                 ),
-                /* @__PURE__ */ d(
+                /* @__PURE__ */ h(
                   "div",
                   {
                     className: "absolute border-2 border-white rounded-full shadow-lg cursor-move",
@@ -217,8 +217,8 @@ function O({
               ]
             }
           ) }),
-          /* @__PURE__ */ s("div", { className: "flex justify-center", children: /* @__PURE__ */ d("div", { className: "text-center", children: [
-            /* @__PURE__ */ s(T, { className: "text-xs font-medium text-muted-foreground mb-2 block", children: "Preview" }),
+          /* @__PURE__ */ s("div", { className: "flex justify-center", children: /* @__PURE__ */ h("div", { className: "text-center", children: [
+            /* @__PURE__ */ s(T, { className: "text-xs font-medium text-tertiary mb-2 block", children: "Preview" }),
             /* @__PURE__ */ s(
               "div",
               {

package/dist/components/image-cropper.js

@@ -1,19 +1,19 @@
-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 { 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,
+  onChange: o,
   size: i = 120,
   className: g,
   placeholder: b = "Upload Image",
   title: v = "Crop Your Image",
   outputSize: x = 200
 }) {
-  const [C, m] = h(!1), [N, s] = h(null), l = S(null), w = n((r) => {
+  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) {
@@ -21,20 +21,20 @@ function Y({
       p.onload = (k) => {
         var u;
         const M = (u = k.target) == null ? void 0 : u.result;
-        s(M), m(!0);
+        n(M), m(!0);
       }, p.readAsDataURL(t);
     }
     r.target.value = "";
-  }, []), y = n((r) => {
-    a(r), s(null);
-  }, [a]), I = n(() => {
-    m(!1), s(null), l.current && (l.current.value = "");
-  }, []), R = n(() => {
-    a(null);
-  }, [a]);
-  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: [
+  }, []), 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",
           {
@@ -50,15 +50,15 @@ function Y({
             )
           }
         ),
-        /* @__PURE__ */ o("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ o(
+        /* @__PURE__ */ l("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ l(
             f,
             {
               variant: "outline",
               size: "sm",
               onClick: (r) => {
                 var t;
-                r.stopPropagation(), (t = l.current) == null || t.click();
+                r.stopPropagation(), (t = a.current) == null || t.click();
               },
               children: [
                 /* @__PURE__ */ e(F, { className: "h-3 w-3 mr-1" }),
@@ -66,7 +66,7 @@ function Y({
               ]
             }
           ),
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ l(
             f,
             {
               variant: "outline",
@@ -79,12 +79,12 @@ function Y({
             }
           )
         ] })
-      ] }) : /* @__PURE__ */ o(
+      ] }) : /* @__PURE__ */ l(
         "button",
         {
           onClick: (r) => {
             var t;
-            r.stopPropagation(), (t = l.current) == null || t.click();
+            r.stopPropagation(), (t = a.current) == null || t.click();
           },
           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: [
@@ -96,18 +96,18 @@ function Y({
                 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"
         }
       )
@@ -117,8 +117,8 @@ function Y({
       {
         isOpen: C,
         onClose: I,
-        imageSrc: N,
-        onCrop: y,
+        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-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",
+      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,7 +32,7 @@ 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"}`
@@ -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