@definable/ui 0.1.30 → 0.1.32

package/dist/components/slider.js

@@ -1,13 +1,13 @@
-import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
 import * as t from "react";
 import * as e from "@radix-ui/react-slider";
 import { cn as n } from "../lib/utils.js";
-const c = t.forwardRef(({ className: l, ...o }, a) => {
+const c = t.forwardRef(({ className: l, ...o }, s) => {
   var i;
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ a(
     e.Root,
     {
-      ref: a,
+      ref: s,
       className: n(
         "relative flex w-full touch-none select-none items-center",
         l
@@ -21,7 +21,7 @@ const c = t.forwardRef(({ className: l, ...o }, a) => {
             style: { width: `${(((i = o.value) == null ? void 0 : i[0]) || 0) * 100}%` }
           }
         ) }),
-        /* @__PURE__ */ r(e.Thumb, { className: "block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:scale-110 active:scale-90" })
+        /* @__PURE__ */ r(e.Thumb, { className: "block h-4 w-4 rounded-full border border-primary/50 bg-secondary shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:scale-110 active:scale-90" })
       ]
     }
   );

package/dist/components/switch.js

@@ -15,7 +15,7 @@ const c = t.forwardRef(({ className: r, ...o }, s) => /* @__PURE__ */ i(
     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-secondary shadow-lg ring-0",
         initial: !1,
         animate: {
           x: o.checked ? 16 : 0

package/dist/components/table-mobile.js

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

package/dist/components/table.js

@@ -1,39 +1,39 @@
-import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { jsx as r, jsxs as n } 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 { 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 u = ({ children: t, className: l }) => /* @__PURE__ */ r("div", { className: d("border border-light rounded-lg overflow-hidden bg-secondary shadow-sm", l), children: t });
 function q({
   data: t,
-  columns: n,
+  columns: l,
   showCheckbox: s = !0,
   onRowClick: c,
   className: v,
   selectedItems: a,
   onSelect: o,
-  emptyState: N,
-  isLoading: x = !1,
+  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 = [
+  const [j, g] = z(null), m = { height: f ? `calc(100vh - ${f})` : "calc(100vh - 8rem)" }, p = [
     s ? "40px" : null,
-    ...n.map((i) => i.width || "1fr")
+    ...l.map((i) => i.width || "1fr")
   ].filter(Boolean).join(" "), $ = () => /* @__PURE__ */ r(
     "div",
     {
       className: d("divide-y divide-border/50 overflow-y-auto"),
-      style: g,
-      children: Array(T).fill(0).map((i, h) => /* @__PURE__ */ l(
+      style: m,
+      children: Array(T).fill(0).map((i, h) => /* @__PURE__ */ n(
         "div",
         {
           className: "grid items-center px-6 py-4 text-sm",
           style: { gridTemplateColumns: p },
           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(
+            l.map((e) => /* @__PURE__ */ r(
               "div",
               {
                 className: d("px-2 relative min-w-0", e.className),
@@ -53,44 +53,44 @@ function q({
       ))
     }
   );
-  return x ? /* @__PURE__ */ r(u, { className: v, children: /* @__PURE__ */ l("div", { className: "relative bg-card", children: [
-    /* @__PURE__ */ l(
+  return b ? /* @__PURE__ */ r(u, { className: v, 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"
+          "grid items-center px-6 py-3 text-xs font-medium text-muted-foreground/80 bg-muted/30 border-b border-light sticky top-0 z-10"
         ),
         style: { gridTemplateColumns: p },
         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))
+          l.map((i) => /* @__PURE__ */ r("div", { className: d("px-2 font-medium", i.className), children: i.header }, i.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(
+  ] }) }) : t.length === 0 ? /* @__PURE__ */ r(u, { className: v, children: /* @__PURE__ */ r("div", { className: "relative bg-card", children: /* @__PURE__ */ r(V, { ...x }) }) }) : /* @__PURE__ */ r(u, { className: v, 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"
+          "grid items-center px-6 py-3 text-xs font-medium text-muted-foreground/80 bg-muted/30 border-b border-light sticky top-0 z-10"
         ),
         style: { gridTemplateColumns: p },
         children: [
           s && /* @__PURE__ */ r("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ r(
-            y,
+            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));
+                t.forEach((y) => {
+                  (a == null ? void 0 : a.has(y.id)) !== e && (o == null || o(y.id, e));
                 });
               }
             }
           ) }),
-          n.map((i) => /* @__PURE__ */ r("div", { className: d("px-2 font-medium", i.className), children: i.header }, i.id))
+          l.map((i) => /* @__PURE__ */ r("div", { className: d("px-2 font-medium", i.className), children: i.header }, i.id))
         ]
       }
     ),
@@ -98,8 +98,8 @@ function q({
       "div",
       {
         className: d("divide-y divide-border/30 overflow-y-auto"),
-        style: g,
-        children: t.map((i, h) => /* @__PURE__ */ l(
+        style: m,
+        children: t.map((i, h) => /* @__PURE__ */ n(
           "div",
           {
             className: d(
@@ -109,7 +109,7 @@ function q({
             onClick: () => c == null ? void 0 : c(i),
             children: [
               s && /* @__PURE__ */ r("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ r(
-                y,
+                N,
                 {
                   checked: a == null ? void 0 : a.has(i.id),
                   onClick: (e) => {
@@ -117,15 +117,15 @@ function q({
                   }
                 }
               ) }),
-              n.map((e) => /* @__PURE__ */ l(
+              l.map((e) => /* @__PURE__ */ n(
                 "div",
                 {
                   className: d(
                     "px-2 relative min-w-0",
                     e.className
                   ),
-                  onMouseEnter: () => e.tooltipValue && m(`${h}-${e.id}`),
-                  onMouseLeave: () => m(null),
+                  onMouseEnter: () => e.tooltipValue && g(`${h}-${e.id}`),
+                  onMouseLeave: () => g(null),
                   children: [
                     /* @__PURE__ */ r("div", { className: d(
                       "flex items-center gap-2",
@@ -135,7 +135,7 @@ function q({
                       e.truncate && "truncate"
                     ), children: e.cell(i) }) }),
                     e.tooltipValue && j === `${h}-${e.id}` && /* @__PURE__ */ r(
-                      k,
+                      w,
                       {
                         content: e.tooltipValue(i),
                         side: "bottom",

package/dist/components/tabs.js

@@ -19,7 +19,7 @@ const f = a.forwardRef(({ className: i, ...t }, s) => /* @__PURE__ */ o(
   {
     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",
+      "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-secondary data-[state=active]:text-foreground data-[state=active]:shadow",
       i
     ),
     ...t

package/dist/components/textarea.js

@@ -1,12 +1,12 @@
 import { jsx as i } from "react/jsx-runtime";
 import * as t from "react";
-import { cn as a } from "../lib/utils.js";
-const s = t.forwardRef(
+import { cn as s } from "../lib/utils.js";
+const a = t.forwardRef(
   ({ className: e, ...r }, o) => /* @__PURE__ */ i(
     "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-input bg-secondary 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",
         e
       ),
       ref: o,
@@ -14,7 +14,7 @@ const s = t.forwardRef(
     }
   )
 );
-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

@@ -33,12 +33,12 @@ const d = () => {
       s = s.filter((n) => n.id !== r), d();
     }
   };
-}, p = () => {
+}, b = () => {
   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(
     "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-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-secondary text-foreground"}`,
       children: [
         /* @__PURE__ */ c("div", { className: "flex justify-between items-start", children: [
           /* @__PURE__ */ o("div", { className: "font-medium", children: e.title }),
@@ -58,7 +58,7 @@ const d = () => {
   )) });
 };
 export {
-  p as ToastContainer,
+  b as ToastContainer,
   m as toast,
   g as useToast
 };