@definable/ui 0.1.32 → 0.1.35

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,17 +27,17 @@ const P = (r) => {
 };
 function I({
   isOpen: r,
-  onClose: i,
-  title: d,
-  description: a,
-  icon: s,
-  children: x,
-  footer: n,
-  size: g = "md",
-  showClose: w = !0,
+  onClose: n,
+  title: a,
+  description: d,
+  icon: i,
+  children: u,
+  footer: s,
+  size: y = "md",
+  showClose: v = !0,
   className: f,
-  isContentScrollable: v = !0,
-  mainClassName: y,
+  isContentScrollable: w = !0,
+  mainClassName: g,
   contentClassName: N,
   header: c,
   headerClassName: b,
@@ -45,33 +45,33 @@ function I({
   mobileSheet: m
 }) {
   if (m != null && m.enable && r && window.innerWidth < 768) {
-    const { position: h } = m;
+    const { position: x } = m;
     return /* @__PURE__ */ e(
       L,
       {
         isOpen: r,
-        onClose: i,
-        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 }),
+        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: n }),
+        footer: /* @__PURE__ */ e("div", { className: "flex gap-2 justify-end", children: s }),
         className: l(f, "w-full max-w-full"),
-        position: h || "bottom",
+        position: x || "bottom",
         headerClassName: l(b, "w-full max-w-full"),
         enableFullscreen: !1,
-        children: x
+        children: u
       }
     );
   }
-  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 || 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: [
+  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,
       {
@@ -79,7 +79,7 @@ function I({
         animate: { opacity: 1 },
         exit: { opacity: 0 },
         className: "fixed inset-0 bg-secondary/80 backdrop-blur-sm",
-        onClick: i
+        onClick: n
       }
     ),
     /* @__PURE__ */ t(
@@ -93,37 +93,37 @@ function I({
           "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-light", children: [
             c || /* @__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 }),
+              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",
-            v ? "overflow-y-auto" : "",
-            !n && !o ? "rounded-lg" : "",
-            !n && o ? "rounded-b-lg" : "",
-            n && !o ? "rounded-t-lg" : "",
+            w ? "overflow-y-auto" : "",
+            !s && !o ? "rounded-lg" : "",
+            !s && o ? "rounded-b-lg" : "",
+            s && !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 })
+          ), 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-light 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 dark:bg-muted/10 rounded-[32px] overflow-hidden border border-light 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
 };

package/dist/components/progress.js

@@ -1,19 +1,19 @@
-import { jsx as i } from "react/jsx-runtime";
-import * as a from "react";
-import * as o from "@radix-ui/react-progress";
-import { motion as e } from "framer-motion";
+import { jsx as o } from "react/jsx-runtime";
+import * as e from "react";
+import * as i from "@radix-ui/react-progress";
+import { motion as t } from "framer-motion";
 import { cn as l } from "../lib/utils.js";
-const f = a.forwardRef(({ className: m, value: r, ...s }, t) => /* @__PURE__ */ i(
-  o.Root,
+const f = e.forwardRef(({ className: s, value: r, ...m }, a) => /* @__PURE__ */ o(
+  i.Root,
   {
-    ref: t,
+    ref: a,
     className: l(
-      "relative h-2 w-full overflow-hidden rounded-full bg-muted",
-      m
+      "relative h-2 w-full overflow-hidden rounded-full bg-hover",
+      s
     ),
-    ...s,
-    children: /* @__PURE__ */ i(
-      e.div,
+    ...m,
+    children: /* @__PURE__ */ o(
+      t.div,
       {
         className: "h-full w-full bg-primary",
         initial: { x: "-100%" },
@@ -28,7 +28,7 @@ const f = a.forwardRef(({ className: m, value: r, ...s }, t) => /* @__PURE__ */
     )
   }
 ));
-f.displayName = o.Root.displayName;
+f.displayName = i.Root.displayName;
 export {
   f as Progress
 };

package/dist/components/radio-group.js

@@ -1,47 +1,47 @@
-import { jsx as r } from "react/jsx-runtime";
-import * as s from "react";
-import * as e from "@radix-ui/react-radio-group";
+import { jsx as e } from "react/jsx-runtime";
+import * as t from "react";
+import * as r from "@radix-ui/react-radio-group";
 import { cn as l } from "../lib/utils.js";
-import { Circle as m } from "lucide-react";
-import { motion as t } from "framer-motion";
-const n = s.forwardRef(({ className: i, ...a }, o) => /* @__PURE__ */ r(
-  e.Root,
+import { Circle as c } from "lucide-react";
+import { motion as s } from "framer-motion";
+const m = t.forwardRef(({ className: i, ...a }, o) => /* @__PURE__ */ e(
+  r.Root,
   {
     className: l("grid gap-2", i),
     ...a,
     ref: o
   }
 ));
-n.displayName = e.Root.displayName;
-const c = s.forwardRef(({ className: i, ...a }, o) => /* @__PURE__ */ r(
-  t.div,
+m.displayName = r.Root.displayName;
+const n = t.forwardRef(({ className: i, ...a }, o) => /* @__PURE__ */ e(
+  s.div,
   {
     whileHover: { scale: 1.05 },
     whileTap: { scale: 0.95 },
-    children: /* @__PURE__ */ r(
-      e.Item,
+    children: /* @__PURE__ */ e(
+      r.Item,
       {
         ref: o,
         className: l(
-          "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-black/20 dark:focus-visible:ring-white/20 disabled:cursor-not-allowed disabled:opacity-50",
           i
         ),
         ...a,
-        children: /* @__PURE__ */ r(e.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ r(
-          t.div,
+        children: /* @__PURE__ */ e(r.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ e(
+          s.div,
           {
             initial: { scale: 0 },
             animate: { scale: 1 },
             transition: { type: "spring", stiffness: 300, damping: 20 },
-            children: /* @__PURE__ */ r(m, { className: "h-2.5 w-2.5 fill-current text-current" })
+            children: /* @__PURE__ */ e(c, { className: "h-2.5 w-2.5 fill-current text-current" })
           }
         ) })
       }
     )
   }
 ));
-c.displayName = e.Item.displayName;
+n.displayName = r.Item.displayName;
 export {
-  n as RadioGroup,
-  c as RadioGroupItem
+  m as RadioGroup,
+  n as RadioGroupItem
 };

package/dist/components/scroll-area.js

@@ -1,46 +1,46 @@
-import { jsxs as i, jsx as l } from "react/jsx-runtime";
-import * as c from "react";
+import { jsxs as c, jsx as l } from "react/jsx-runtime";
+import * as i from "react";
 import * as r from "@radix-ui/react-scroll-area";
-import { cn as s } from "../lib/utils.js";
-const n = c.forwardRef(({ className: o, children: e, ...a }, t) => /* @__PURE__ */ i(
+import { cn as d } from "../lib/utils.js";
+const n = i.forwardRef(({ className: e, children: a, ...o }, t) => /* @__PURE__ */ c(
   r.Root,
   {
     ref: t,
-    className: s("relative overflow-hidden", o),
-    ...a,
+    className: d("relative overflow-hidden", e),
+    ...o,
     children: [
-      /* @__PURE__ */ l(r.Viewport, { className: "h-full w-full rounded-[inherit]", children: e }),
-      /* @__PURE__ */ l(d, {}),
+      /* @__PURE__ */ l(r.Viewport, { className: "h-full w-full rounded-[inherit]", children: a }),
+      /* @__PURE__ */ l(s, {}),
       /* @__PURE__ */ l(r.Corner, {})
     ]
   }
 ));
 n.displayName = r.Root.displayName;
-const d = c.forwardRef(({ className: o, orientation: e = "vertical", ...a }, t) => /* @__PURE__ */ l(
+const s = i.forwardRef(({ className: e, orientation: a = "vertical", ...o }, t) => /* @__PURE__ */ l(
   r.ScrollAreaScrollbar,
   {
     ref: t,
-    orientation: e,
-    className: s(
+    orientation: a,
+    className: d(
       "flex touch-none select-none transition-colors",
-      e === "vertical" && "h-full w-1.5 border-l border-l-transparent p-[1px] hover:w-2",
-      e === "horizontal" && "h-1.5 flex-col border-t border-t-transparent p-[1px] hover:h-2",
-      o
+      a === "vertical" && "h-full w-1.5 border-l border-l-transparent p-[1px] hover:w-2",
+      a === "horizontal" && "h-1.5 flex-col border-t border-t-transparent p-[1px] hover:h-2",
+      e
     ),
-    ...a,
+    ...o,
     children: /* @__PURE__ */ l(
       r.ScrollAreaThumb,
       {
-        className: s(
-          "relative flex-1 rounded-full bg-border/40 hover:bg-border/70 transition-all duration-150",
-          "data-[state=dragging]:bg-border/70"
+        className: d(
+          "relative flex-1 rounded-full bg-light/40 hover:bg-light/70 dark:bg-dark/40 dark:hover:bg-dark/70 transition-all duration-150",
+          "data-[state=dragging]:bg-light/70 dark:data-[state=dragging]:bg-dark/70"
         )
       }
     )
   }
 ));
-d.displayName = r.ScrollAreaScrollbar.displayName;
+s.displayName = r.ScrollAreaScrollbar.displayName;
 export {
   n as ScrollArea,
-  d as ScrollBar
+  s as ScrollBar
 };