@definable/ui 0.1.31 → 0.1.35

package/dist/components/switch.js

@@ -3,22 +3,22 @@ import * as t from "react";
 import * as e from "@radix-ui/react-switch";
 import { cn as a } from "../lib/utils.js";
 import { motion as n } from "framer-motion";
-const c = t.forwardRef(({ className: r, ...o }, s) => /* @__PURE__ */ i(
+const l = t.forwardRef(({ className: o, ...r }, s) => /* @__PURE__ */ i(
   e.Root,
   {
     className: a(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      r
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/20 dark:focus-visible:ring-white/20 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-[#1F1F20] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[var(--text-primary)] data-[state=unchecked]:bg-[var(--border-input)]",
+      o
     ),
-    ...o,
+    ...r,
     ref: s,
     children: /* @__PURE__ */ i(e.Thumb, { asChild: !0, children: /* @__PURE__ */ i(
       n.div,
       {
-        className: "block h-4 w-4 rounded-full bg-background shadow-lg ring-0",
+        className: "block h-4 w-4 rounded-full bg-[var(--bg-card)] shadow-lg ring-0",
         initial: !1,
         animate: {
-          x: o.checked ? 16 : 0
+          x: r.checked ? 16 : 0
         },
         transition: {
           type: "spring",
@@ -29,7 +29,7 @@ const c = t.forwardRef(({ className: r, ...o }, s) => /* @__PURE__ */ i(
     ) })
   }
 ));
-c.displayName = e.Root.displayName;
+l.displayName = e.Root.displayName;
 export {
-  c as Switch
+  l as Switch
 };

package/dist/components/table-empty.js

@@ -1,20 +1,20 @@
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import { FolderOpen as m } from "lucide-react";
-import { Button as i } from "./button.js";
+import { FolderOpen as l } from "lucide-react";
+import { Button as m } from "./button.js";
 function x({
   title: a = "No data available",
   description: s = "Get started by creating your first record.",
   actionLabel: c = "Create New",
   onAction: t,
-  icon: l = /* @__PURE__ */ e(m, { className: "w-10 h-10 text-muted-foreground" })
+  icon: i = /* @__PURE__ */ e(l, { className: "w-10 h-10 text-tertiary" })
 }) {
   return /* @__PURE__ */ e("div", { className: "flex flex-col items-center justify-center py-12 px-4", children: /* @__PURE__ */ r("div", { className: "space-y-5 text-center", children: [
-    /* @__PURE__ */ e("div", { className: "flex justify-center", children: l }),
+    /* @__PURE__ */ e("div", { className: "flex justify-center", children: i }),
     /* @__PURE__ */ r("div", { className: "space-y-2", children: [
       /* @__PURE__ */ e("h3", { className: "text-lg font-medium", children: a }),
-      /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground max-w-sm mx-auto", children: s })
+      /* @__PURE__ */ e("p", { className: "text-sm text-tertiary max-w-sm mx-auto", children: s })
     ] }),
-    t && /* @__PURE__ */ e(i, { onClick: t, children: c })
+    t && /* @__PURE__ */ e(m, { onClick: t, children: c })
   ] }) });
 }
 export {

package/dist/components/table-mobile.js

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

package/dist/components/table.js

@@ -1,51 +1,51 @@
-import { jsx as r, jsxs as l } from "react/jsx-runtime";
-import { cn as d } from "../lib/utils.js";
-import { Checkbox as y } from "./checkbox.js";
-import { Tooltip as k } from "./tooltip.js";
-import { useState as w } from "react";
-import { TableEmpty as z } from "./table-empty.js";
-const u = ({ children: t, className: n }) => /* @__PURE__ */ r("div", { className: d("border border-border/50 rounded-lg overflow-hidden bg-background shadow-sm", n), children: t });
+import { jsx as i, jsxs as n } from "react/jsx-runtime";
+import { cn as t } from "../lib/utils.js";
+import { Checkbox as N } from "./checkbox.js";
+import { Tooltip as w } from "./tooltip.js";
+import { useState as z } from "react";
+import { TableEmpty as V } from "./table-empty.js";
+const g = ({ children: d, className: l }) => /* @__PURE__ */ i("div", { className: t("border border-light rounded-lg overflow-hidden bg-secondary shadow-sm", l), children: d });
 function q({
-  data: t,
-  columns: n,
-  showCheckbox: s = !0,
-  onRowClick: c,
-  className: v,
-  selectedItems: a,
-  onSelect: o,
-  emptyState: N,
-  isLoading: x = !1,
+  data: d,
+  columns: l,
+  showCheckbox: o = !0,
+  onRowClick: p,
+  className: c,
+  selectedItems: e,
+  onSelect: s,
+  emptyState: x,
+  isLoading: b = !1,
   loadingRows: T = 5,
   tableHeightOffset: f
 }) {
-  const [j, m] = w(null), g = { height: f ? `calc(100vh - ${f})` : "calc(100vh - 8rem)" }, p = [
-    s ? "40px" : null,
-    ...n.map((i) => i.width || "1fr")
-  ].filter(Boolean).join(" "), $ = () => /* @__PURE__ */ r(
+  const [j, y] = z(null), m = { height: f ? `calc(100vh - ${f})` : "calc(100vh - 8rem)" }, v = [
+    o ? "40px" : null,
+    ...l.map((r) => r.width || "1fr")
+  ].filter(Boolean).join(" "), $ = () => /* @__PURE__ */ i(
     "div",
     {
-      className: d("divide-y divide-border/50 overflow-y-auto"),
-      style: g,
-      children: Array(T).fill(0).map((i, h) => /* @__PURE__ */ l(
+      className: t("divide-y divide-light/50 overflow-y-auto"),
+      style: m,
+      children: Array(T).fill(0).map((r, h) => /* @__PURE__ */ n(
         "div",
         {
           className: "grid items-center px-6 py-4 text-sm",
-          style: { gridTemplateColumns: p },
+          style: { gridTemplateColumns: v },
           children: [
-            s && /* @__PURE__ */ r("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ r("div", { className: "h-4 w-4 rounded bg-muted animate-pulse" }) }),
-            n.map((e) => /* @__PURE__ */ r(
+            o && /* @__PURE__ */ i("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ i("div", { className: "h-4 w-4 rounded bg-hover animate-pulse" }) }),
+            l.map((a) => /* @__PURE__ */ i(
               "div",
               {
-                className: d("px-2 relative min-w-0", e.className),
-                children: /* @__PURE__ */ r(
+                className: t("px-2 relative min-w-0", a.className),
+                children: /* @__PURE__ */ i(
                   "div",
                   {
-                    className: "h-4 bg-muted rounded animate-pulse",
+                    className: "h-4 bg-hover rounded animate-pulse",
                     style: { width: Math.random() * 40 + 40 + "%" }
                   }
                 )
               },
-              `skeleton-col-${e.id}`
+              `skeleton-col-${a.id}`
             ))
           ]
         },
@@ -53,91 +53,91 @@ function q({
       ))
     }
   );
-  return x ? /* @__PURE__ */ r(u, { className: v, children: /* @__PURE__ */ l("div", { className: "relative bg-card", children: [
-    /* @__PURE__ */ l(
+  return b ? /* @__PURE__ */ i(g, { className: c, children: /* @__PURE__ */ n("div", { className: "relative bg-card", children: [
+    /* @__PURE__ */ n(
       "div",
       {
-        className: d(
-          "grid items-center px-6 py-3 text-xs font-medium text-muted-foreground/80 bg-muted/30 border-b border-border/50 sticky top-0 z-10"
+        className: t(
+          "grid items-center px-6 py-3 text-xs font-medium text-tertiary/80 bg-hover/30 border-b border-light sticky top-0 z-10"
         ),
-        style: { gridTemplateColumns: p },
+        style: { gridTemplateColumns: v },
         children: [
-          s && /* @__PURE__ */ r("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ r("div", { className: "h-4 w-4 rounded bg-muted animate-pulse" }) }),
-          n.map((i) => /* @__PURE__ */ r("div", { className: d("px-2 font-medium", i.className), children: i.header }, i.id))
+          o && /* @__PURE__ */ i("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ i("div", { className: "h-4 w-4 rounded bg-hover animate-pulse" }) }),
+          l.map((r) => /* @__PURE__ */ i("div", { className: t("px-2 font-medium", r.className), children: r.header }, r.id))
         ]
       }
     ),
-    /* @__PURE__ */ r($, {})
-  ] }) }) : t.length === 0 ? /* @__PURE__ */ r(u, { className: v, children: /* @__PURE__ */ r("div", { className: "relative bg-card", children: /* @__PURE__ */ r(z, { ...N }) }) }) : /* @__PURE__ */ r(u, { className: v, children: /* @__PURE__ */ l("div", { className: "relative bg-card", children: [
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ i($, {})
+  ] }) }) : d.length === 0 ? /* @__PURE__ */ i(g, { className: c, children: /* @__PURE__ */ i("div", { className: "relative bg-card", children: /* @__PURE__ */ i(V, { ...x }) }) }) : /* @__PURE__ */ i(g, { className: c, children: /* @__PURE__ */ n("div", { className: "relative bg-card", children: [
+    /* @__PURE__ */ n(
       "div",
       {
-        className: d(
-          "grid items-center px-6 py-3 text-xs font-medium text-muted-foreground/80 bg-muted/30 border-b border-border/50 sticky top-0 z-10"
+        className: t(
+          "grid items-center px-6 py-3 text-xs font-medium text-tertiary/80 bg-hover/30 border-b border-light sticky top-0 z-10"
         ),
-        style: { gridTemplateColumns: p },
+        style: { gridTemplateColumns: v },
         children: [
-          s && /* @__PURE__ */ r("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ r(
-            y,
+          o && /* @__PURE__ */ i("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ i(
+            N,
             {
-              checked: t.length > 0 && (a == null ? void 0 : a.size) === t.length,
-              onClick: (i) => {
-                i.stopPropagation();
-                const e = !((a == null ? void 0 : a.size) === t.length);
-                t.forEach((b) => {
-                  (a == null ? void 0 : a.has(b.id)) !== e && (o == null || o(b.id, e));
+              checked: d.length > 0 && (e == null ? void 0 : e.size) === d.length,
+              onClick: (r) => {
+                r.stopPropagation();
+                const a = !((e == null ? void 0 : e.size) === d.length);
+                d.forEach((u) => {
+                  (e == null ? void 0 : e.has(u.id)) !== a && (s == null || s(u.id, a));
                 });
               }
             }
           ) }),
-          n.map((i) => /* @__PURE__ */ r("div", { className: d("px-2 font-medium", i.className), children: i.header }, i.id))
+          l.map((r) => /* @__PURE__ */ i("div", { className: t("px-2 font-medium", r.className), children: r.header }, r.id))
         ]
       }
     ),
-    /* @__PURE__ */ r(
+    /* @__PURE__ */ i(
       "div",
       {
-        className: d("divide-y divide-border/30 overflow-y-auto"),
-        style: g,
-        children: t.map((i, h) => /* @__PURE__ */ l(
+        className: t("divide-y divide-light/30 overflow-y-auto"),
+        style: m,
+        children: d.map((r, h) => /* @__PURE__ */ n(
           "div",
           {
-            className: d(
-              "grid items-center px-6 py-4 text-sm text-foreground hover:bg-muted/30 transition-colors duration-150 group cursor-pointer"
+            className: t(
+              "grid items-center px-6 py-4 text-sm text-primary hover:bg-hover/30 transition-colors duration-150 group cursor-pointer"
             ),
-            style: { gridTemplateColumns: p },
-            onClick: () => c == null ? void 0 : c(i),
+            style: { gridTemplateColumns: v },
+            onClick: () => p == null ? void 0 : p(r),
             children: [
-              s && /* @__PURE__ */ r("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ r(
-                y,
+              o && /* @__PURE__ */ i("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ i(
+                N,
                 {
-                  checked: a == null ? void 0 : a.has(i.id),
-                  onClick: (e) => {
-                    e.stopPropagation(), o == null || o(i.id, !(a != null && a.has(i.id)));
+                  checked: e == null ? void 0 : e.has(r.id),
+                  onClick: (a) => {
+                    a.stopPropagation(), s == null || s(r.id, !(e != null && e.has(r.id)));
                   }
                 }
               ) }),
-              n.map((e) => /* @__PURE__ */ l(
+              l.map((a) => /* @__PURE__ */ n(
                 "div",
                 {
-                  className: d(
+                  className: t(
                     "px-2 relative min-w-0",
-                    e.className
+                    a.className
                   ),
-                  onMouseEnter: () => e.tooltipValue && m(`${h}-${e.id}`),
-                  onMouseLeave: () => m(null),
+                  onMouseEnter: () => a.tooltipValue && y(`${h}-${a.id}`),
+                  onMouseLeave: () => y(null),
                   children: [
-                    /* @__PURE__ */ r("div", { className: d(
+                    /* @__PURE__ */ i("div", { className: t(
                       "flex items-center gap-2",
-                      e.truncate && "overflow-hidden"
-                    ), children: /* @__PURE__ */ r("div", { className: d(
+                      a.truncate && "overflow-hidden"
+                    ), children: /* @__PURE__ */ i("div", { className: t(
                       "w-full",
-                      e.truncate && "truncate"
-                    ), children: e.cell(i) }) }),
-                    e.tooltipValue && j === `${h}-${e.id}` && /* @__PURE__ */ r(
-                      k,
+                      a.truncate && "truncate"
+                    ), children: a.cell(r) }) }),
+                    a.tooltipValue && j === `${h}-${a.id}` && /* @__PURE__ */ i(
+                      w,
                       {
-                        content: e.tooltipValue(i),
+                        content: a.tooltipValue(r),
                         side: "bottom",
                         align: "start",
                         isVisible: !0
@@ -145,11 +145,11 @@ function q({
                     )
                   ]
                 },
-                e.id
+                a.id
               ))
             ]
           },
-          i.id
+          r.id
         ))
       }
     )

package/dist/components/tabs.js

@@ -1,46 +1,46 @@
-import { jsx as o } from "react/jsx-runtime";
-import * as a from "react";
+import { jsx as a } from "react/jsx-runtime";
+import * as r from "react";
 import * as e from "@radix-ui/react-tabs";
-import { cn as n } from "../lib/utils.js";
-const m = e.Root, r = a.forwardRef(({ className: i, ...t }, s) => /* @__PURE__ */ o(
+import { cn as o } from "../lib/utils.js";
+const m = e.Root, n = r.forwardRef(({ className: i, ...t }, s) => /* @__PURE__ */ a(
   e.List,
   {
     ref: s,
-    className: n(
-      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+    className: o(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-hover p-1 text-tertiary",
       i
     ),
     ...t
   }
 ));
-r.displayName = e.List.displayName;
-const f = a.forwardRef(({ className: i, ...t }, s) => /* @__PURE__ */ o(
+n.displayName = e.List.displayName;
+const f = r.forwardRef(({ className: i, ...t }, s) => /* @__PURE__ */ a(
   e.Trigger,
   {
     ref: s,
-    className: n(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+    className: o(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-white dark:ring-offset-[#1F1F20] transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/20 dark:focus-visible:ring-white/20 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-secondary data-[state=active]:text-primary data-[state=active]:shadow",
       i
     ),
     ...t
   }
 ));
 f.displayName = e.Trigger.displayName;
-const d = a.forwardRef(({ className: i, ...t }, s) => /* @__PURE__ */ o(
+const l = r.forwardRef(({ className: i, ...t }, s) => /* @__PURE__ */ a(
   e.Content,
   {
     ref: s,
-    className: n(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    className: o(
+      "mt-2 ring-offset-white dark:ring-offset-[#1F1F20] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/20 dark:focus-visible:ring-white/20 focus-visible:ring-offset-2",
       i
     ),
     ...t
   }
 ));
-d.displayName = e.Content.displayName;
+l.displayName = e.Content.displayName;
 export {
   m as Tabs,
-  d as TabsContent,
-  r as TabsList,
+  l as TabsContent,
+  n as TabsList,
   f as TabsTrigger
 };

package/dist/components/textarea.js

@@ -1,20 +1,20 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import * as t from "react";
-import { cn as a } from "../lib/utils.js";
-const s = t.forwardRef(
-  ({ className: e, ...r }, o) => /* @__PURE__ */ i(
+import { cn as s } from "../lib/utils.js";
+const a = t.forwardRef(
+  ({ className: e, ...r }, i) => /* @__PURE__ */ o(
     "textarea",
     {
-      className: a(
-        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      className: s(
+        "flex min-h-[80px] w-full rounded-md border border-light bg-secondary px-3 py-2 text-sm ring-offset-white dark:ring-offset-[#1F1F20] placeholder:text-tertiary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/20 dark:focus-visible:ring-white/20 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         e
       ),
-      ref: o,
+      ref: i,
       ...r
     }
   )
 );
-s.displayName = "Textarea";
+a.displayName = "Textarea";
 export {
-  s as Textarea
+  a as Textarea
 };

package/dist/components/tooltip.js

@@ -1,9 +1,9 @@
 import { jsx as r } from "react/jsx-runtime";
-import { AnimatePresence as n, motion as c } from "framer-motion";
-import { cn as i } from "../lib/utils.js";
+import { AnimatePresence as n, motion as i } from "framer-motion";
+import { cn as c } from "../lib/utils.js";
 function b({ content: t, side: o = "right", align: e = "center", isVisible: s }) {
   return /* @__PURE__ */ r(n, { children: s && /* @__PURE__ */ r(
-    c.div,
+    i.div,
     {
       initial: {
         opacity: 0,
@@ -19,9 +19,9 @@ function b({ content: t, side: o = "right", align: e = "center", isVisible: s })
         ...a(o)
       },
       transition: { duration: 0.15, ease: "easeOut" },
-      className: i(
+      className: c(
         "absolute z-[100] px-2.5 py-1.5 rounded-md text-xs font-medium whitespace-nowrap",
-        "bg-background border border-border/50 shadow-lg",
+        "bg-secondary border border-light shadow-lg",
         l(o, e)
       ),
       children: t

package/dist/components/use-toast.js

@@ -1,5 +1,5 @@
-import { jsx as o, jsxs as c } from "react/jsx-runtime";
-import { useState as l, useCallback as u } from "react";
+import { jsx as o, jsxs as l } from "react/jsx-runtime";
+import { useState as c, useCallback as u } from "react";
 let s = [], a = [];
 const d = () => {
   a.forEach((t) => t([...s]));
@@ -18,7 +18,7 @@ const d = () => {
     }
   };
 }, g = () => {
-  const [t, i] = l(s), e = u(() => {
+  const [t, i] = c(s), e = u(() => {
     const r = (n) => {
       i(n);
     };
@@ -26,21 +26,21 @@ const d = () => {
       a = a.filter((n) => n !== r);
     };
   }, []);
-  return l(() => e()), {
+  return c(() => e()), {
     toast: m,
     toasts: t,
     dismiss: (r) => {
       s = s.filter((n) => n.id !== r), d();
     }
   };
-}, p = () => {
+}, h = () => {
   const { toasts: t, dismiss: i } = g();
-  return t.length === 0 ? null : /* @__PURE__ */ o("div", { className: "fixed top-4 right-4 z-50 flex flex-col gap-2 w-[350px]", children: t.map((e) => /* @__PURE__ */ c(
+  return t.length === 0 ? null : /* @__PURE__ */ o("div", { className: "fixed top-4 right-4 z-50 flex flex-col gap-2 w-[350px]", children: t.map((e) => /* @__PURE__ */ l(
     "div",
     {
-      className: `p-4 rounded-lg shadow-lg border border-border/50 transition-all duration-300 ease-in-out ${e.type === "error" ? "bg-destructive text-destructive-foreground" : e.type === "success" ? "bg-green-50 text-green-800 border-green-200" : e.type === "warning" ? "bg-amber-50 text-amber-800 border-amber-200" : "bg-background text-foreground"}`,
+      className: `p-4 rounded-lg shadow-lg border border-light transition-all duration-300 ease-in-out ${e.type === "error" ? "bg-red-500 text-white" : e.type === "success" ? "bg-green-50 text-green-800 border-green-200" : e.type === "warning" ? "bg-amber-50 text-amber-800 border-amber-200" : "bg-secondary text-primary"}`,
       children: [
-        /* @__PURE__ */ c("div", { className: "flex justify-between items-start", children: [
+        /* @__PURE__ */ l("div", { className: "flex justify-between items-start", children: [
           /* @__PURE__ */ o("div", { className: "font-medium", children: e.title }),
           /* @__PURE__ */ o(
             "button",
@@ -58,7 +58,7 @@ const d = () => {
   )) });
 };
 export {
-  p as ToastContainer,
+  h as ToastContainer,
   m as toast,
   g as useToast
 };

package/dist/index.js

@@ -35,7 +35,7 @@ import { Separator as V1 } from "./components/separator.js";
 import { Sheet as X1 } from "./components/sheet.js";
 import { Skeleton as q1 } from "./components/skeleton.js";
 import { Slider as K1 } from "./components/slider.js";
-import { a as W1, S as Y1, b as Z1 } from "./stepper-modal-JXpOXOV2.js";
+import { a as W1, S as Y1, b as Z1 } from "./stepper-modal-Bh6gsg8o.js";
 import { Switch as e2 } from "./components/switch.js";
 import { Table as r2 } from "./components/table.js";
 import { TableEmpty as t2 } from "./components/table-empty.js";