@clasing/ui 2.7.5 → 2.9.0

package/dist/{badge-DnN1HZI0.js → badge-CaH3b0zW.js}

@@ -1,13 +1,10 @@
-import { j as u, c as b } from "./index-C_XDkVGm.js";
+import { j as s, c as b } from "./index-C_XDkVGm.js";
 import { Slot as c } from "@radix-ui/react-slot";
 import { cva as v } from "class-variance-authority";
 const l = v(
   `
     box-border inline-flex w-fit shrink-0 items-center justify-center gap-2
-    overflow-hidden font-semibold whitespace-nowrap
-    transition-[color,box-shadow]
-    focus-visible:border-ring focus-visible:ring-[3px]
-    focus-visible:ring-ring/50
+    overflow-hidden font-semibold whitespace-nowrap focusable-item
     aria-invalid:border-destructive aria-invalid:ring-destructive/20
     dark:aria-invalid:ring-destructive/40
     [&>svg]:pointer-events-none
@@ -28,7 +25,7 @@ const l = v(
           focus-visible:ring-destructive/20
           dark:bg-destructive
           dark:focus-visible:ring-destructive
-          [a&]:hover:bg-destructive/90
+          [a&]:hover:bg-destructive/80
         `,
         outline: `
           text-foreground
@@ -36,7 +33,7 @@ const l = v(
         `,
         error: `
           bg-destructive text-destructive-foreground
-          [a&]:hover:bg-destructive/90
+          [a&]:hover:bg-destructive/80
         `,
         warning: `
           bg-warning text-warning-foreground
@@ -93,17 +90,17 @@ const l = v(
         failed: `
           border border-destructive-foreground bg-background
           text-destructive-foreground
-          [a&]:hover:bg-background/90
+          [a&]:hover:bg-background/80
         `,
         expired: `
           border border-destructive-foreground bg-background
           text-destructive-foreground
-          [a&]:hover:bg-background/90
+          [a&]:hover:bg-background/80
         `,
         cancelled: `
           border border-destructive-foreground bg-background
           text-destructive-foreground
-          [a&]:hover:bg-background/90
+          [a&]:hover:bg-background/80
         `
       },
       size: {
@@ -151,11 +148,11 @@ function h({
   iconOnly: a,
   asChild: g = !1,
   children: n,
-  ...i
+  ...u
 }) {
-  const s = g ? c : "span";
-  return /* @__PURE__ */ u.jsx(
-    s,
+  const i = g ? c : "span";
+  return /* @__PURE__ */ s.jsx(
+    i,
     {
       "data-slot": "badge",
       className: b(
@@ -163,7 +160,7 @@ function h({
         a && "px-2.5 py-2",
         e
       ),
-      ...i,
+      ...u,
       children: n
     }
   );

package/dist/{button-C8ApjC1N.js → button-DSpGxL2e.js}

@@ -1,4 +1,4 @@
-import { c as o, j as e } from "./index-C_XDkVGm.js";
+import { c as a, j as e } from "./index-C_XDkVGm.js";
 import { Slot as _ } from "@radix-ui/react-slot";
 import { cva as k } from "class-variance-authority";
 import w from "react";
@@ -6,11 +6,9 @@ import { C } from "./clasing-icon-zhfWTLFn.js";
 import { b, T as c, c as g, a as f } from "./tooltip-CC_kyHTm.js";
 const T = k(
   `
-    relative z-0 flex items-center justify-center rounded-full
-    transition-[color,background-color,box-shadow]
+    relative z-0 flex items-center justify-center rounded-full focusable-item
     before:absolute before:inset-0 before:z-[-1] before:rounded-full
     before:transition-transform before:duration-150 before:ease-in-out
-    focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-1
     not-disabled:active:before:scale-96
     [&_svg]:shrink-0
   `,
@@ -102,6 +100,7 @@ const T = k(
         true: `
           disabled:cursor-not-allowed disabled:text-muted-foreground!
           disabled:before:bg-muted!
+          disabled:dark:opacity-60!
         `
       }
     },
@@ -184,7 +183,7 @@ const T = k(
     weight: p,
     children: n,
     isLoading: r,
-    disabled: a,
+    disabled: o,
     tooltip: t,
     tooltipPlacement: l = "top",
     asChild: d,
@@ -197,13 +196,13 @@ const T = k(
       md: "w-8 px-0",
       sm: "w-7 px-0",
       xs: "w-6 px-0"
-    }[i || "xl"] : "", N = o(
+    }[i || "xl"] : "", N = a(
       T({
         variant: x,
         weight: p,
         size: i,
         isLoading: r,
-        disabled: a
+        disabled: o
       }),
       m,
       j
@@ -212,7 +211,7 @@ const T = k(
         C,
         {
           variant: "default",
-          className: o(
+          className: a(
             "pointer-events-none absolute top-1/2 left-1/2 -translate-1/2",
             {
               "visible animate-[spin_2s_linear_infinite] opacity-100": r
@@ -223,7 +222,7 @@ const T = k(
       /* @__PURE__ */ e.jsx(
         "span",
         {
-          className: o(
+          className: a(
             "flex items-center justify-center gap-2",
             r ? "invisible opacity-0" : "visible opacity-100"
           ),
@@ -234,13 +233,13 @@ const T = k(
       h,
       {
         ref: y,
-        className: o(N),
-        disabled: !!r || !!a,
+        className: a(N),
+        disabled: !!r || !!o,
         ...v,
         children: z
       }
     );
-    return t && (a || r) ? /* @__PURE__ */ e.jsx(b, { children: /* @__PURE__ */ e.jsxs(c, { children: [
+    return t && (o || r) ? /* @__PURE__ */ e.jsx(b, { children: /* @__PURE__ */ e.jsxs(c, { children: [
       /* @__PURE__ */ e.jsx(g, { asChild: !0, children: u ? /* @__PURE__ */ e.jsx("div", { className: "inline-block", "aria-disabled": "true", children: s }) : s }),
       /* @__PURE__ */ e.jsx(f, { side: l, children: t })
     ] }) }) : t ? /* @__PURE__ */ e.jsx(b, { children: /* @__PURE__ */ e.jsxs(c, { children: [

package/dist/components/accordion.js

@@ -1,17 +1,17 @@
 import { j as e, c as a } from "../index-C_XDkVGm.js";
-import * as r from "@radix-ui/react-accordion";
+import * as n from "@radix-ui/react-accordion";
 import { CaretDownIcon as s } from "@phosphor-icons/react";
 function c({
   ...t
 }) {
-  return /* @__PURE__ */ e.jsx(r.Root, { "data-slot": "accordion", ...t });
+  return /* @__PURE__ */ e.jsx(n.Root, { "data-slot": "accordion", ...t });
 }
 function l({
   className: t,
   ...o
 }) {
   return /* @__PURE__ */ e.jsx(
-    r.Item,
+    n.Item,
     {
       "data-slot": "accordion-item",
       className: a(
@@ -28,20 +28,18 @@ function l({
 function m({
   className: t,
   children: o,
-  ...n
+  ...r
 }) {
-  return /* @__PURE__ */ e.jsx(r.Header, { className: "flex", children: /* @__PURE__ */ e.jsxs(
-    r.Trigger,
+  return /* @__PURE__ */ e.jsx(n.Header, { className: "flex", children: /* @__PURE__ */ e.jsxs(
+    n.Trigger,
     {
       "data-slot": "accordion-trigger",
       className: a(
         `
             flex flex-1 items-start justify-between gap-4 rounded-md py-4
-            text-left paragraph-sm font-semibold text-foreground transition-all
-            outline-none
+            text-left paragraph-sm font-semibold text-foreground focusable-item
+            transition-all outline-none
             hover:underline
-            focus-visible:border-ring focus-visible:ring-[3px]
-            focus-visible:ring-ring/50
             disabled:pointer-events-none disabled:opacity-50
             [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:translate-y-0.5
             [&_svg]:text-muted-foreground [&_svg]:transition-transform
@@ -50,7 +48,7 @@ function m({
           `,
         t
       ),
-      ...n,
+      ...r,
       children: [
         o,
         /* @__PURE__ */ e.jsx(s, {})
@@ -58,13 +56,13 @@ function m({
     }
   ) });
 }
-function g({
+function u({
   className: t,
   children: o,
-  ...n
+  ...r
 }) {
   return /* @__PURE__ */ e.jsx(
-    r.Content,
+    n.Content,
     {
       "data-slot": "accordion-content",
       className: `\r
@@ -72,14 +70,14 @@ function g({
         data-[state=closed]:animate-accordion-up\r
         data-[state=open]:animate-accordion-down\r
       `,
-      ...n,
+      ...r,
       children: /* @__PURE__ */ e.jsx("div", { className: a("pt-0 pb-4", t), children: o })
     }
   );
 }
 export {
   c as Accordion,
-  g as AccordionContent,
+  u as AccordionContent,
   l as AccordionItem,
   m as AccordionTrigger
 };

package/dist/components/alert-dialog.js

@@ -1,6 +1,6 @@
 import { j as e, c as l } from "../index-C_XDkVGm.js";
 import * as o from "@radix-ui/react-alert-dialog";
-import { b as r } from "../button-C8ApjC1N.js";
+import { b as r } from "../button-DSpGxL2e.js";
 function c({
   ...t
 }) {

package/dist/components/alert.js

@@ -4,7 +4,7 @@ import { cva as p } from "class-variance-authority";
 const x = p(
   `
     relative grid w-full grid-cols-[0_1fr] items-start gap-y-2 rounded-2xl
-    border px-6 py-6 paragraph-sm text-foreground
+    border p-6 paragraph-sm text-foreground
     has-[>svg]:grid-cols-[calc(var(--spacing)*5)_1fr] has-[>svg]:gap-x-3
     [&>svg]:size-5 [&>svg]:translate-y-0.5 [&>svg]:text-current
   `,

package/dist/components/badge.js

@@ -1,4 +1,4 @@
-import { B as o } from "../badge-DnN1HZI0.js";
+import { B as o } from "../badge-CaH3b0zW.js";
 export {
   o as Badge
 };

package/dist/components/blocks/interactive-card.js

@@ -1,76 +1,70 @@
-import { j as r, c as n } from "../../index-C_XDkVGm.js";
-import { B as v } from "../../badge-DnN1HZI0.js";
+import { j as r, c as a } from "../../index-C_XDkVGm.js";
+import { B as b } from "../../badge-CaH3b0zW.js";
 import { C as I, e as w, b as y, d as k } from "../../card-zTCfwTcL.js";
 import { T as z, c as B, a as R } from "../../tooltip-CC_kyHTm.js";
 import { InfoIcon as E } from "@phosphor-icons/react";
 import { cva as F } from "class-variance-authority";
 import { forwardRef as H } from "react";
-const O = F(
-  `
-    transition-[color,box-shadow]
-    focus-visible:border-ring focus-visible:ring-[3px]
-    focus-visible:ring-ring/50
-  `
-), f = H(
+const O = F("focusable-item"), f = H(
   ({
-    className: u,
+    className: i,
     isActive: s,
-    title: i,
-    text: m,
-    helperText: t,
-    badgeText: a,
+    title: t,
+    text: d,
+    helperText: u,
+    badgeText: o,
     disabled: e,
-    badgeVariant: g,
-    badgeSize: x = "xs",
-    icon: l,
+    badgeVariant: x,
+    badgeSize: g = "xs",
+    icon: m,
     tooltipIcon: p,
-    tooltipText: o,
-    tooltipTitle: d,
+    tooltipText: n,
+    tooltipTitle: c,
     tooltipSide: h,
     tooltipSideOffset: j,
     tooltipAlign: C,
     children: N,
-    ...c
-  }, b) => /* @__PURE__ */ r.jsxs(
+    ...l
+  }, v) => /* @__PURE__ */ r.jsxs(
     I,
     {
-      ref: b,
-      className: n(O({ className: u }), {
-        "border-info-foreground bg-info/50": s,
+      ref: v,
+      className: a(O({ className: i }), {
+        "active-card": s,
         "border-muted-foreground bg-muted": e,
-        "cursor-pointer active:bg-info/30": c.onClick && s && !e,
-        "cursor-pointer active:bg-info/15": c.onClick && !s && !e
+        "cursor-pointer": l.onClick && s && !e,
+        "cursor-pointer hover:bg-accent/50": l.onClick && !s && !e
       }),
       role: "button",
       tabIndex: 0,
-      ...c,
+      ...l,
       children: [
-        a || l ? /* @__PURE__ */ r.jsxs(w, { className: "flex items-center justify-between gap-2", children: [
-          l ? /* @__PURE__ */ r.jsx(
+        o || m ? /* @__PURE__ */ r.jsxs(w, { className: "flex items-center justify-between gap-2", children: [
+          m ? /* @__PURE__ */ r.jsx(
             "div",
             {
-              className: n("rounded-full p-1", {
+              className: a("rounded-full p-1", {
                 "bg-muted text-muted-foreground": !s,
                 "bg-info text-info-foreground": s,
                 "bg-background text-muted-foreground": e
               }),
-              children: l
+              children: m
             }
           ) : null,
-          (a || o) && /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-2", children: [
-            a ? /* @__PURE__ */ r.jsx(
-              v,
+          (o || n) && /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-2", children: [
+            o ? /* @__PURE__ */ r.jsx(
+              b,
               {
-                variant: g,
-                size: x,
+                variant: x,
+                size: g,
                 weight: "semibold",
-                className: n({
+                className: a({
                   "opacity-50": e
                 }),
-                children: a
+                children: o
               }
             ) : null,
-            o && /* @__PURE__ */ r.jsxs(z, { children: [
+            n && /* @__PURE__ */ r.jsxs(z, { children: [
               /* @__PURE__ */ r.jsx(B, { children: p ?? /* @__PURE__ */ r.jsx(E, { size: 20, className: "z-10 min-h-5 min-w-5" }) }),
               /* @__PURE__ */ r.jsx(
                 R,
@@ -78,9 +72,9 @@ const O = F(
                   side: h,
                   sideOffset: j,
                   align: C,
-                  children: d || o && /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col gap-1", children: [
-                    d && /* @__PURE__ */ r.jsx("p", { className: "paragraph-md font-semibold", children: d }),
-                    o && /* @__PURE__ */ r.jsx("p", { className: "paragraph-md", children: o })
+                  children: c || n && /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col gap-1", children: [
+                    c && /* @__PURE__ */ r.jsx("p", { className: "paragraph-md font-semibold", children: c }),
+                    n && /* @__PURE__ */ r.jsx("p", { className: "paragraph-md", children: n })
                   ] })
                 }
               )
@@ -88,33 +82,33 @@ const O = F(
           ] })
         ] }) : null,
         /* @__PURE__ */ r.jsxs(y, { className: "flex flex-col gap-1", children: [
-          i ? /* @__PURE__ */ r.jsx(
+          t ? /* @__PURE__ */ r.jsx(
             "p",
             {
-              className: n("label-xl font-semibold text-foreground", {
+              className: a("label-xl font-semibold text-foreground", {
                 "text-muted-foreground": e
               }),
-              children: i
+              children: t
             }
           ) : null,
-          m ? /* @__PURE__ */ r.jsx(
+          d ? /* @__PURE__ */ r.jsx(
             "p",
             {
-              className: n("paragraph-md text-muted-foreground", {
+              className: a("paragraph-md text-muted-foreground", {
                 "text-muted-foreground": e
               }),
-              children: m
+              children: d
             }
           ) : null,
           N
         ] }),
-        t ? /* @__PURE__ */ r.jsx(k, { children: /* @__PURE__ */ r.jsx(
+        u ? /* @__PURE__ */ r.jsx(k, { children: /* @__PURE__ */ r.jsx(
           "p",
           {
-            className: n("paragraph-sm text-muted-foreground", {
+            className: a("paragraph-sm text-muted-foreground", {
               "text-muted-foreground": e
             }),
-            children: t
+            children: u
           }
         ) }) : null
       ]

package/dist/components/blocks/selectable-chips.js

@@ -2,46 +2,47 @@ import { j as s, c as n } from "../../index-C_XDkVGm.js";
 import { C as R } from "../../chip-DOCdEBBS.js";
 import { L as k } from "../../label-CnZHCbRc.js";
 import { CheckIcon as I } from "@phosphor-icons/react";
-import * as u from "react";
-const L = u.forwardRef(
+import * as f from "react";
+const L = f.forwardRef(
   ({
-    id: f,
+    id: h,
     label: d,
     options: i,
-    multiple: l = !1,
-    value: r,
-    defaultValue: h,
-    onChange: x,
-    onValueChange: p,
-    className: v,
-    disabled: c,
-    helperText: o,
-    ...b
-  }, j) => {
-    const [C, g] = u.useState(h || (l ? [] : "")), t = r !== void 0 ? r : C, m = (e) => {
-      r === void 0 && g(e), x?.(e), p?.(e);
-    }, y = (e) => {
-      if (!l) {
-        m(e.value);
+    multiple: t = !1,
+    value: o,
+    defaultValue: x,
+    onChange: p,
+    onValueChange: v,
+    className: b,
+    disabled: r,
+    helperText: u,
+    ...j
+  }, C) => {
+    const [g, y] = f.useState(x || (t ? [] : "")), l = o !== void 0 ? o : g, m = (e) => {
+      y(e), p?.(e), v?.(e);
+    }, S = (e) => {
+      if (!t) {
+        const c = l === e.value ? "" : e.value;
+        m(c);
         return;
       }
-      const a = Array.isArray(t) ? t : [], N = a.includes(e.value) ? a.filter((A) => A !== e.value) : [...a, e.value];
-      m(N);
-    }, S = (e) => l ? Array.isArray(t) && t.includes(e.value) : t === e.value;
+      const a = Array.isArray(l) ? l : [], A = a.includes(e.value) ? a.filter((c) => c !== e.value) : [...a, e.value];
+      m(A);
+    }, N = (e) => t ? Array.isArray(l) && l.includes(e.value) : l === e.value;
     return i.length === 0 ? null : /* @__PURE__ */ s.jsxs(
       "div",
       {
-        ref: j,
+        ref: C,
         "data-slot": "selectable-chips",
-        className: n("flex flex-col gap-3", v),
-        ...b,
+        className: n("flex flex-col gap-3", b),
+        ...j,
         children: [
           d && /* @__PURE__ */ s.jsx(
             k,
             {
               "data-slot": "selectable-chips-label",
-              htmlFor: f,
-              className: n({ "text-muted-foreground": c }),
+              htmlFor: h,
+              className: n({ "text-muted-foreground": r }),
               children: d
             }
           ),
@@ -51,15 +52,15 @@ const L = u.forwardRef(
               "data-slot": "selectable-chips-container",
               className: "flex flex-wrap gap-2",
               children: i.map((e) => {
-                const a = S(e);
+                const a = N(e);
                 return /* @__PURE__ */ s.jsxs(
                   R,
                   {
                     "data-selected": a,
                     variant: a ? "selected" : "unselected",
-                    onClick: () => y(e),
+                    onClick: () => S(e),
                     className: "py-1",
-                    disabled: c,
+                    disabled: r,
                     children: [
                       a && /* @__PURE__ */ s.jsx(I, {}),
                       e.label
@@ -70,15 +71,15 @@ const L = u.forwardRef(
               })
             }
           ),
-          o && /* @__PURE__ */ s.jsx(
+          u && /* @__PURE__ */ s.jsx(
             "p",
             {
               "data-slot": "selectable-chips-description",
               className: n(
                 "-mt-1 label-md text-muted-foreground",
-                c && "text-muted-foreground"
+                r && "text-muted-foreground"
               ),
-              children: o
+              children: u
             }
           )
         ]

package/dist/components/button.js

@@ -1,4 +1,4 @@
-import { B as s, b as a } from "../button-C8ApjC1N.js";
+import { B as s, b as a } from "../button-DSpGxL2e.js";
 export {
   s as Button,
   a as buttonStyles

package/dist/components/calendar.js

@@ -1,7 +1,7 @@
 import { j as n, c as e } from "../index-C_XDkVGm.js";
 import * as i from "react";
 import { getDefaultClassNames as p, DayPicker as x } from "react-day-picker";
-import { b as m, B as h } from "../button-C8ApjC1N.js";
+import { b as m, B as h } from "../button-DSpGxL2e.js";
 import { CaretLeftIcon as w, CaretRightIcon as _, CaretDownIcon as y } from "@phosphor-icons/react";
 function C({
   className: c,

package/dist/components/checkbox.js

@@ -1,20 +1,18 @@
-import { j as r, c as t } from "../index-C_XDkVGm.js";
-import * as e from "@radix-ui/react-checkbox";
+import { j as e, c as i } from "../index-C_XDkVGm.js";
+import * as r from "@radix-ui/react-checkbox";
 import { CheckIcon as o } from "@phosphor-icons/react";
 function n({
-  className: i,
-  ...a
+  className: a,
+  ...t
 }) {
-  return /* @__PURE__ */ r.jsx(
-    e.Root,
+  return /* @__PURE__ */ e.jsx(
+    r.Root,
     {
       "data-slot": "checkbox",
-      className: t(
+      className: i(
         `
-          peer size-4 shrink-0 rounded-[4px] border
+          peer size-4 shrink-0 rounded-[4px] border focusable-item
           transition-[color,background-color,box-shadow] outline-none
-          focus-visible:border-ring focus-visible:ring-[3px]
-          focus-visible:ring-ring/50
           disabled:cursor-not-allowed disabled:opacity-50
           aria-invalid:border-destructive aria-invalid:ring-destructive/20
           data-[state=checked]:border-primary data-[state=checked]:bg-primary
@@ -23,17 +21,17 @@ function n({
           dark:aria-invalid:ring-destructive/40
           dark:data-[state=checked]:bg-primary
         `,
-        i
+        a
       ),
-      ...a,
-      children: /* @__PURE__ */ r.jsx(
-        e.Indicator,
+      ...t,
+      children: /* @__PURE__ */ e.jsx(
+        r.Indicator,
         {
           "data-slot": "checkbox-indicator",
           className: `\r
           flex items-center justify-center text-current transition-none\r
         `,
-          children: /* @__PURE__ */ r.jsx(o, { className: "size-3.5" })
+          children: /* @__PURE__ */ e.jsx(o, { className: "size-3.5" })
         }
       )
     }

package/dist/components/context-menu.js

@@ -1,6 +1,6 @@
 import { j as e, c as s } from "../index-C_XDkVGm.js";
 import * as a from "@radix-ui/react-context-menu";
-import { CheckIcon as i, CircleIcon as d, CaretRightIcon as c } from "@phosphor-icons/react";
+import { CheckIcon as i, CircleIcon as d, CaretRightIcon as u } from "@phosphor-icons/react";
 function m({
   ...t
 }) {
@@ -63,7 +63,7 @@ function b({
       ...r,
       children: [
         o,
-        /* @__PURE__ */ e.jsx(c, { className: "ml-auto" })
+        /* @__PURE__ */ e.jsx(u, { className: "ml-auto" })
       ]
     }
   );
@@ -146,13 +146,13 @@ function C({
           focus:bg-accent focus:text-accent-foreground
           data-disabled:pointer-events-none data-disabled:opacity-50
           data-inset:pl-8
-          data-[variant=destructive]:text-destructive
-          data-[variant=destructive]:focus:bg-destructive/10
-          data-[variant=destructive]:focus:text-destructive
-          dark:data-[variant=destructive]:focus:bg-destructive/20
+          data-[variant=destructive]:text-destructive-foreground
+          data-[variant=destructive]:focus:bg-destructive
+          data-[variant=destructive]:focus:text-destructive-foreground
+          dark:data-[variant=destructive]:focus:bg-destructive/80
           [&_svg]:pointer-events-none [&_svg]:shrink-0
           [&_svg:not([class*='size-'])]:size-4
-          data-[variant=destructive]:*:[svg]:text-destructive!
+          data-[variant=destructive]:*:[svg]:text-destructive-foreground!
         `,
         t
       ),