@clasing/ui 2.8.0 → 2.9.1

package/dist/{badge-DBOcqSZb.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
@@ -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/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/badge.js

@@ -1,4 +1,4 @@
-import { B as o } from "../badge-DBOcqSZb.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-DBOcqSZb.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/calendar.js

@@ -1,23 +1,23 @@
 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-DSpGxL2e.js";
+import { getDefaultClassNames as m, DayPicker as x } from "react-day-picker";
+import { b as f, B as h } from "../button-DSpGxL2e.js";
 import { CaretLeftIcon as w, CaretRightIcon as _, CaretDownIcon as y } from "@phosphor-icons/react";
 function C({
   className: c,
   classNames: g,
-  showOutsideDays: a = !0,
+  showOutsideDays: r = !0,
   captionLayout: s = "label",
   buttonVariant: l = "ghost",
   formatters: u,
-  components: f,
-  ...b
+  components: b,
+  ...p
 }) {
-  const t = p();
+  const t = m();
   return /* @__PURE__ */ n.jsx(
     x,
     {
-      showOutsideDays: a,
+      showOutsideDays: r,
       className: e(
         `
           group/calendar bg-background p-3 [--cell-size:--spacing(8)]
@@ -30,7 +30,7 @@ function C({
       ),
       captionLayout: s,
       formatters: {
-        formatMonthDropdown: (r) => r.toLocaleString("default", { month: "short" }),
+        formatMonthDropdown: (a) => a.toLocaleString("default", { month: "short" }),
         ...u
       },
       classNames: {
@@ -51,7 +51,7 @@ function C({
           t.nav
         ),
         button_previous: e(
-          m({ size: "sm", variant: l }),
+          f({ size: "sm", variant: l }),
           `
             size-(--cell-size) p-0 select-none
             aria-disabled:opacity-50
@@ -59,7 +59,7 @@ function C({
           t.button_previous
         ),
         button_next: e(
-          m({ size: "sm", variant: l }),
+          f({ size: "sm", variant: l }),
           `
             size-(--cell-size) p-0 select-none
             aria-disabled:opacity-50
@@ -155,7 +155,7 @@ function C({
       },
       components: {
         Root: ({
-          className: r,
+          className: a,
           rootRef: d,
           ...o
         }) => /* @__PURE__ */ n.jsx(
@@ -163,73 +163,77 @@ function C({
           {
             "data-slot": "calendar",
             ref: d,
-            className: e(r),
+            className: e(a),
             ...o
           }
         ),
-        Chevron: ({ className: r, orientation: d, ...o }) => d === "left" ? /* @__PURE__ */ n.jsx(w, { className: e(r), ...o }) : d === "right" ? /* @__PURE__ */ n.jsx(_, { className: e(r), ...o }) : /* @__PURE__ */ n.jsx(y, { ...o }),
+        Chevron: ({ className: a, orientation: d, ...o }) => d === "left" ? /* @__PURE__ */ n.jsx(w, { className: e(a), ...o }) : d === "right" ? /* @__PURE__ */ n.jsx(_, { className: e(a), ...o }) : /* @__PURE__ */ n.jsx(y, { ...o }),
         DayButton: v,
-        WeekNumber: ({ children: r, ...d }) => /* @__PURE__ */ n.jsx("td", { ...d, children: /* @__PURE__ */ n.jsx(
+        WeekNumber: ({ children: a, ...d }) => /* @__PURE__ */ n.jsx("td", { ...d, children: /* @__PURE__ */ n.jsx(
           "div",
           {
             className: `\r
                   flex size-(--cell-size) items-center justify-center\r
                   text-center\r
                 `,
-            children: r
+            children: a
           }
         ) }),
-        ...f
+        ...b
       },
-      ...b
+      ...p
     }
   );
 }
 function v({
   className: c,
   day: g,
-  modifiers: a,
+  modifiers: r,
   ...s
 }) {
-  const l = p(), u = i.useRef(null);
+  const l = m(), u = i.useRef(null);
   return i.useEffect(() => {
-    a.focused && u.current?.focus();
-  }, [a.focused]), /* @__PURE__ */ n.jsx(
+    r.focused && u.current?.focus();
+  }, [r.focused]), /* @__PURE__ */ n.jsx(
     h,
     {
       ref: u,
       variant: "ghost",
       size: "xs",
       "data-day": g.date.toLocaleDateString(),
-      "data-selected-single": a.selected && !a.range_start && !a.range_end && !a.range_middle,
-      "data-range-start": a.range_start,
-      "data-range-end": a.range_end,
-      "data-range-middle": a.range_middle,
+      "data-selected-single": r.selected && !r.range_start && !r.range_end && !r.range_middle,
+      "data-range-start": r.range_start,
+      "data-range-end": r.range_end,
+      "data-range-middle": r.range_middle,
       className: e(
         `
           flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1
-          rounded-md bg-transparent p-1 leading-none font-regular
+          p-1 leading-none font-regular
           group-data-[focused=true]/day:relative
           group-data-[focused=true]/day:z-10
           group-data-[focused=true]/day:border-ring
           group-data-[focused=true]/day:ring-[3px]
           group-data-[focused=true]/day:ring-ring/50
-          data-[range-end=true]:rounded-md data-[range-end=true]:rounded-l-none
-          data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-blue-500
+          before:rounded-md before:bg-transparent
           data-[range-end=true]:text-white
-          data-[range-end=true]:hover:bg-blue-500/80
-          data-[range-middle=true]:rounded-none
-          data-[range-middle=true]:bg-blue-500/10
+          data-[range-end=true]:before:rounded-md
+          data-[range-end=true]:before:rounded-l-none
+          data-[range-end=true]:before:rounded-r-md
+          data-[range-end=true]:before:bg-blue-500
+          data-[range-end=true]:hover:before:bg-blue-500/80
           data-[range-middle=true]:text-blue-800
-          data-[range-start=true]:rounded-md
-          data-[range-start=true]:rounded-l-md
-          data-[range-start=true]:rounded-r-none
-          data-[range-start=true]:bg-blue-500 data-[range-start=true]:text-white
-          data-[range-start=true]:hover:bg-blue-500/80
-          data-[selected-single=true]:bg-blue-500
+          data-[range-middle=true]:before:rounded-none
+          data-[range-middle=true]:before:bg-blue-500/10
+          data-[range-start=true]:text-white
+          data-[range-start=true]:before:rounded-md
+          data-[range-start=true]:before:rounded-l-md
+          data-[range-start=true]:before:rounded-r-none
+          data-[range-start=true]:before:bg-blue-500
+          data-[range-start=true]:hover:before:bg-blue-500/80
           data-[selected-single=true]:text-white
-          data-[selected-single=true]:hover:bg-blue-500/80
+          data-[selected-single=true]:before:bg-blue-500
           data-[selected-single=true]:hover:text-white
+          data-[selected-single=true]:hover:before:bg-blue-500/80
           dark:hover:text-accent-foreground
           dark:data-[range-middle=true]:text-blue-050
           [&>span]:paragraph-xs [&>span]:opacity-70

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/input-otp.js

@@ -54,7 +54,7 @@ function b({
           data-[active=true]:z-10 data-[active=true]:border-ring
           data-[active=true]:ring-[3px] data-[active=true]:ring-ring
           data-[active=true]:aria-invalid:border-destructive-foreground
-          data-[active=true]:aria-invalid:ring-destructive-foreground/20
+          data-[active=true]:aria-invalid:ring-
           dark:bg-input/30
           dark:data-[active=true]:aria-invalid:ring-destructive-foreground/40
         `,

package/dist/components/input.js

@@ -1,4 +1,4 @@
-import { I as r } from "../input-C0PAOim8.js";
+import { I as r } from "../input-D9gqZjs0.js";
 export {
   r as Input
 };