@clasing/ui 2.7.5 → 2.9.0

package/dist/components/dropdown-menu.js

@@ -1,21 +1,21 @@
 import { j as t, c as r } from "../index-C_XDkVGm.js";
-import * as o from "@radix-ui/react-dropdown-menu";
+import * as n from "@radix-ui/react-dropdown-menu";
 import { CheckIcon as d, CircleIcon as i, CaretRightIcon as u } from "@phosphor-icons/react";
 function p({
   ...e
 }) {
-  return /* @__PURE__ */ t.jsx(o.Root, { "data-slot": "dropdown-menu", ...e });
+  return /* @__PURE__ */ t.jsx(n.Root, { "data-slot": "dropdown-menu", ...e });
 }
 function m({
   ...e
 }) {
-  return /* @__PURE__ */ t.jsx(o.Portal, { "data-slot": "dropdown-menu-portal", ...e });
+  return /* @__PURE__ */ t.jsx(n.Portal, { "data-slot": "dropdown-menu-portal", ...e });
 }
 function f({
   ...e
 }) {
   return /* @__PURE__ */ t.jsx(
-    o.Trigger,
+    n.Trigger,
     {
       "data-slot": "dropdown-menu-trigger",
       ...e
@@ -24,15 +24,15 @@ function f({
 }
 function g({
   className: e,
-  sideOffset: n = 4,
+  sideOffset: o = 4,
   collisionPadding: a = 24,
   ...s
 }) {
-  return /* @__PURE__ */ t.jsx(o.Portal, { children: /* @__PURE__ */ t.jsx(
-    o.Content,
+  return /* @__PURE__ */ t.jsx(n.Portal, { children: /* @__PURE__ */ t.jsx(
+    n.Content,
     {
       "data-slot": "dropdown-menu-content",
-      sideOffset: n,
+      sideOffset: o,
       className: r(
         `
             z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32
@@ -58,19 +58,19 @@ function g({
 function x({
   ...e
 }) {
-  return /* @__PURE__ */ t.jsx(o.Group, { "data-slot": "dropdown-menu-group", ...e });
+  return /* @__PURE__ */ t.jsx(n.Group, { "data-slot": "dropdown-menu-group", ...e });
 }
 function v({
   className: e,
-  inset: n,
+  inset: o,
   variant: a = "default",
   ...s
 }) {
   return /* @__PURE__ */ t.jsx(
-    o.Item,
+    n.Item,
     {
       "data-slot": "dropdown-menu-item",
-      "data-inset": n,
+      "data-inset": o,
       "data-variant": a,
       className: r(
         `
@@ -82,10 +82,10 @@ function v({
           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
+          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!
         `,
         e
       ),
@@ -95,12 +95,12 @@ function v({
 }
 function b({
   className: e,
-  children: n,
+  children: o,
   checked: a,
   ...s
 }) {
   return /* @__PURE__ */ t.jsxs(
-    o.CheckboxItem,
+    n.CheckboxItem,
     {
       "data-slot": "dropdown-menu-checkbox-item",
       className: r(
@@ -124,10 +124,10 @@ function b({
           pointer-events-none absolute left-2 flex size-3.5 items-center\r
           justify-center\r
         `,
-            children: /* @__PURE__ */ t.jsx(o.ItemIndicator, { children: /* @__PURE__ */ t.jsx(d, { className: "size-4" }) })
+            children: /* @__PURE__ */ t.jsx(n.ItemIndicator, { children: /* @__PURE__ */ t.jsx(d, { className: "size-4" }) })
           }
         ),
-        n
+        o
       ]
     }
   );
@@ -136,7 +136,7 @@ function w({
   ...e
 }) {
   return /* @__PURE__ */ t.jsx(
-    o.RadioGroup,
+    n.RadioGroup,
     {
       "data-slot": "dropdown-menu-radio-group",
       ...e
@@ -145,11 +145,11 @@ function w({
 }
 function h({
   className: e,
-  children: n,
+  children: o,
   ...a
 }) {
   return /* @__PURE__ */ t.jsxs(
-    o.RadioItem,
+    n.RadioItem,
     {
       "data-slot": "dropdown-menu-radio-item",
       className: r(
@@ -172,24 +172,24 @@ function h({
           pointer-events-none absolute left-2 flex size-3.5 items-center\r
           justify-center\r
         `,
-            children: /* @__PURE__ */ t.jsx(o.ItemIndicator, { children: /* @__PURE__ */ t.jsx(i, { weight: "fill", className: "size-2 fill-current" }) })
+            children: /* @__PURE__ */ t.jsx(n.ItemIndicator, { children: /* @__PURE__ */ t.jsx(i, { weight: "fill", className: "size-2 fill-current" }) })
           }
         ),
-        n
+        o
       ]
     }
   );
 }
 function j({
   className: e,
-  inset: n,
+  inset: o,
   ...a
 }) {
   return /* @__PURE__ */ t.jsx(
-    o.Label,
+    n.Label,
     {
       "data-slot": "dropdown-menu-label",
-      "data-inset": n,
+      "data-inset": o,
       className: r(
         `
           px-2 py-1.5 paragraph-sm font-semibold
@@ -203,20 +203,20 @@ function j({
 }
 function z({
   className: e,
-  ...n
+  ...o
 }) {
   return /* @__PURE__ */ t.jsx(
-    o.Separator,
+    n.Separator,
     {
       "data-slot": "dropdown-menu-separator",
       className: r("-mx-1 my-1 h-px bg-border", e),
-      ...n
+      ...o
     }
   );
 }
 function D({
   className: e,
-  ...n
+  ...o
 }) {
   return /* @__PURE__ */ t.jsx(
     "span",
@@ -226,26 +226,26 @@ function D({
         "ml-auto paragraph-xs tracking-widest text-muted-foreground",
         e
       ),
-      ...n
+      ...o
     }
   );
 }
 function M({
   ...e
 }) {
-  return /* @__PURE__ */ t.jsx(o.Sub, { "data-slot": "dropdown-menu-sub", ...e });
+  return /* @__PURE__ */ t.jsx(n.Sub, { "data-slot": "dropdown-menu-sub", ...e });
 }
 function N({
   className: e,
-  inset: n,
+  inset: o,
   children: a,
   ...s
 }) {
   return /* @__PURE__ */ t.jsxs(
-    o.SubTrigger,
+    n.SubTrigger,
     {
       "data-slot": "dropdown-menu-sub-trigger",
-      "data-inset": n,
+      "data-inset": o,
       className: r(
         `
           relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5
@@ -268,10 +268,10 @@ function N({
 }
 function y({
   className: e,
-  ...n
+  ...o
 }) {
   return /* @__PURE__ */ t.jsx(
-    o.SubContent,
+    n.SubContent,
     {
       "data-slot": "dropdown-menu-sub-content",
       className: r(
@@ -290,7 +290,7 @@ function y({
         `,
         e
       ),
-      ...n
+      ...o
     }
   );
 }

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-EFdg0T-Q.js";
+import { I as r } from "../input-D9gqZjs0.js";
 export {
   r as Input
 };

package/dist/components/menubar.js

@@ -116,7 +116,7 @@ function j({
           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
+          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-foreground!

package/dist/components/multi-select.js

@@ -1,5 +1,5 @@
 import { j as e, c as I } from "../index-C_XDkVGm.js";
-import { B as z } from "../badge-DnN1HZI0.js";
+import { B as z } from "../badge-CaH3b0zW.js";
 import { C as E, f as P, d as O, b as _, c as A, e as F, g as L } from "../command-Cq3FhQXv.js";
 import { P as T, b as W, c as G } from "../popover-CLQxfbEi.js";
 import { CheckIcon as B, CaretUpDownIcon as D, XIcon as U } from "@phosphor-icons/react";
@@ -12,27 +12,27 @@ function ne({
   defaultValues: o,
   onValuesChange: a,
   isLoading: c,
-  onSearchChange: l,
+  onSearchChange: i,
   loadingText: f = "Loading...",
   noResultsText: u = "No results found"
 }) {
   const [d, p] = y(!1), [b, x] = y(
     new Set(r ?? o)
-  ), [v, m] = y(/* @__PURE__ */ new Map()), [h, j] = y("");
+  ), [C, m] = y(/* @__PURE__ */ new Map()), [h, j] = y("");
   function s(n) {
     const g = (w) => {
-      const S = new Set(w);
-      return S.has(n) ? S.delete(n) : S.add(n), S;
+      const v = new Set(w);
+      return v.has(n) ? v.delete(n) : v.add(n), v;
     };
     x(g), a?.([...g(b)]);
   }
-  const i = V((n, g) => {
+  const l = V((n, g) => {
     m((w) => w.get(n) === g ? w : new Map(w).set(n, g));
-  }, []), C = V(
+  }, []), S = V(
     (n) => {
-      j(n), l?.(n);
+      j(n), i?.(n);
     },
-    [l]
+    [i]
   );
   return /* @__PURE__ */ e.jsx(
     R,
@@ -42,11 +42,11 @@ function ne({
         setOpen: p,
         selectedValues: r ? new Set(r) : b,
         toggleValue: s,
-        items: v,
-        onItemAdded: i,
+        items: C,
+        onItemAdded: l,
         isLoading: c,
         searchValue: h,
-        onSearchChange: C,
+        onSearchChange: S,
         loadingText: f,
         noResultsText: u
       },
@@ -73,9 +73,7 @@ function re({
         `
             flex w-fit items-center justify-between gap-2 overflow-hidden
             rounded-md border border-input bg-transparent whitespace-nowrap
-            transition-[color,box-shadow] outline-none
-            focus-visible:border-ring focus-visible:ring-[3px]
-            focus-visible:ring-ring/50
+            focusable-item
             disabled:cursor-not-allowed disabled:opacity-50
             aria-invalid:border-destructive-foreground
             aria-invalid:ring-destructive-foreground/20
@@ -109,22 +107,22 @@ function se({
   overflowBehavior: a = "wrap-when-open",
   ...c
 }) {
-  const { selectedValues: l, toggleValue: f, items: u, open: d } = N(), [p, b] = y(0), x = M(null), v = M(null), m = M(/* @__PURE__ */ new Set()), h = a === "wrap" || a === "wrap-when-open" && d;
+  const { selectedValues: i, toggleValue: f, items: u, open: d } = N(), [p, b] = y(0), x = M(null), C = M(null), m = M(/* @__PURE__ */ new Set()), h = a === "wrap" || a === "wrap-when-open" && d;
   k(() => {
     h && m.current.forEach((s) => s.style.removeProperty("display"));
   }, [h]);
   const j = V(() => {
     if (x.current == null) return;
-    const s = x.current, i = v.current;
-    i != null && (i.style.display = "none"), m.current.forEach((n) => n.style.removeProperty("display"));
-    let C = 0;
+    const s = x.current, l = C.current;
+    l != null && (l.style.display = "none"), m.current.forEach((n) => n.style.removeProperty("display"));
+    let S = 0;
     for (let n = m.current.size - 1; n >= 0; n--) {
       const g = [...m.current][n];
       if (s.scrollWidth <= s.clientWidth)
         break;
-      C = m.current.size - n, g.style.display = "none", i?.style.removeProperty("display");
+      S = m.current.size - n, g.style.display = "none", l?.style.removeProperty("display");
     }
-    b(C);
+    b(S);
   }, []);
   return k(() => {
     if (x.current == null) return;
@@ -132,7 +130,7 @@ function se({
     return s.observe(x.current), () => s.disconnect();
   }, [j]), q(() => {
     j();
-  }, [l, j]), l.size === 0 && t ? /* @__PURE__ */ e.jsx("span", { className: "font-regular text-muted-foreground", children: t }) : /* @__PURE__ */ e.jsxs(
+  }, [i, j]), i.size === 0 && t ? /* @__PURE__ */ e.jsx("span", { className: "font-regular text-muted-foreground", children: t }) : /* @__PURE__ */ e.jsxs(
     "div",
     {
       ...c,
@@ -143,19 +141,19 @@ function se({
         o
       ),
       children: [
-        [...l].filter((s) => u.has(s)).map((s) => /* @__PURE__ */ e.jsxs(
+        [...i].filter((s) => u.has(s)).map((s) => /* @__PURE__ */ e.jsxs(
           z,
           {
-            ref: (i) => {
-              if (i != null)
-                return m.current.add(i), () => {
-                  m.current.delete(i);
+            ref: (l) => {
+              if (l != null)
+                return m.current.add(l), () => {
+                  m.current.delete(l);
                 };
             },
             variant: "outline",
             className: "group flex items-center gap-1",
-            onClick: r ? (i) => {
-              i.stopPropagation(), f(s);
+            onClick: r ? (l) => {
+              l.stopPropagation(), f(s);
             } : void 0,
             children: [
               u.get(s),
@@ -179,7 +177,7 @@ function se({
               display: p > 0 && !h ? "block" : "none"
             },
             variant: "outline",
-            ref: v,
+            ref: C,
             children: [
               "+",
               p
@@ -195,7 +193,7 @@ function oe({
   children: r,
   ...o
 }) {
-  const { isLoading: a, onSearchChange: c, searchValue: l, noResultsText: f, loadingText: u } = N(), d = typeof t == "object" ? !0 : t;
+  const { isLoading: a, onSearchChange: c, searchValue: i, noResultsText: f, loadingText: u } = N(), d = typeof t == "object" ? !0 : t;
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("div", { style: { display: "none" }, children: /* @__PURE__ */ e.jsx(E, { children: /* @__PURE__ */ e.jsx(P, { children: r }) }) }),
     /* @__PURE__ */ e.jsx(W, { className: "min-w-(--radix-popover-trigger-width) p-0", children: /* @__PURE__ */ e.jsxs(E, { ...o, children: [
@@ -203,7 +201,7 @@ function oe({
         O,
         {
           placeholder: typeof t == "object" ? t.placeholder : void 0,
-          value: l,
+          value: i,
           onValueChange: c
         }
       ) : /* @__PURE__ */ e.jsx("button", { autoFocus: !0, "aria-hidden": "true", className: "sr-only" }),
@@ -224,7 +222,7 @@ function ae({
   onSelect: a,
   ...c
 }) {
-  const { toggleValue: l, selectedValues: f, onItemAdded: u } = N(), d = f.has(t);
+  const { toggleValue: i, selectedValues: f, onItemAdded: u } = N(), d = f.has(t);
   return k(() => {
     u(t, o ?? r);
   }, [t, r, u, o]), /* @__PURE__ */ e.jsxs(
@@ -233,7 +231,7 @@ function ae({
       ...c,
       value: t,
       onSelect: (p) => {
-        l(p), a?.(p);
+        i(p), a?.(p);
       },
       children: [
         /* @__PURE__ */ e.jsx(
@@ -247,10 +245,10 @@ function ae({
     }
   );
 }
-function ie(t) {
+function le(t) {
   return /* @__PURE__ */ e.jsx(A, { ...t });
 }
-function le(t) {
+function ie(t) {
   return /* @__PURE__ */ e.jsx(L, { ...t });
 }
 function N() {
@@ -264,9 +262,9 @@ function N() {
 export {
   ne as MultiSelect,
   oe as MultiSelectContent,
-  ie as MultiSelectGroup,
+  le as MultiSelectGroup,
   ae as MultiSelectItem,
-  le as MultiSelectSeparator,
+  ie as MultiSelectSeparator,
   re as MultiSelectTrigger,
   se as MultiSelectValue
 };

package/dist/components/navigation-menu.js

@@ -1,7 +1,7 @@
 import { j as e, c as o } from "../index-C_XDkVGm.js";
 import * as n from "@radix-ui/react-navigation-menu";
 import { cva as s } from "class-variance-authority";
-import { CaretDownIcon as u } from "@phosphor-icons/react";
+import { CaretDownIcon as d } from "@phosphor-icons/react";
 function v({
   className: t,
   children: a,
@@ -28,7 +28,7 @@ function v({
     }
   );
 }
-function f({
+function p({
   className: t,
   ...a
 }) {
@@ -44,7 +44,7 @@ function f({
     }
   );
 }
-function p({
+function f({
   className: t,
   ...a
 }) {
@@ -57,14 +57,13 @@ function p({
     }
   );
 }
-const d = s(
+const u = s(
   `
     group inline-flex h-9 w-max items-center justify-center rounded-md
-    bg-background px-4 py-2 paragraph-sm font-medium
+    bg-background px-4 py-2 paragraph-sm font-medium focusable-item
     transition-[color,box-shadow] outline-none
     hover:bg-accent hover:text-accent-foreground
     focus:bg-accent focus:text-accent-foreground
-    focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1
     disabled:pointer-events-none disabled:opacity-50
     data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground
     data-[state=open]:hover:bg-accent
@@ -80,13 +79,13 @@ function x({
     n.Trigger,
     {
       "data-slot": "navigation-menu-trigger",
-      className: o(d(), "group", t),
+      className: o(u(), "group", t),
       ...i,
       children: [
         a,
         " ",
         /* @__PURE__ */ e.jsx(
-          u,
+          d,
           {
             className: `\r
           relative top-px ml-1 size-3 transition duration-300\r
@@ -174,7 +173,7 @@ function l({
     }
   );
 }
-function b({
+function h({
   className: t,
   ...a
 }) {
@@ -184,12 +183,10 @@ function b({
       "data-slot": "navigation-menu-link",
       className: o(
         `
-          flex flex-col gap-1 rounded-sm p-2 paragraph-sm transition-all
-          outline-none
+          flex flex-col gap-1 rounded-sm p-2 paragraph-sm focusable-item
+          transition-all outline-none
           hover:bg-accent hover:text-accent-foreground
           focus:bg-accent focus:text-accent-foreground
-          focus-visible:ring-[3px] focus-visible:ring-ring/50
-          focus-visible:outline-1
           data-[active=true]:bg-accent/50
           data-[active=true]:text-accent-foreground
           data-[active=true]:hover:bg-accent
@@ -202,7 +199,7 @@ function b({
     }
   );
 }
-function h({
+function b({
   className: t,
   ...a
 }) {
@@ -233,11 +230,11 @@ function h({
 export {
   v as NavigationMenu,
   w as NavigationMenuContent,
-  h as NavigationMenuIndicator,
-  p as NavigationMenuItem,
-  b as NavigationMenuLink,
-  f as NavigationMenuList,
+  b as NavigationMenuIndicator,
+  f as NavigationMenuItem,
+  h as NavigationMenuLink,
+  p as NavigationMenuList,
   x as NavigationMenuTrigger,
   l as NavigationMenuViewport,
-  d as navigationMenuTriggerStyle
+  u as navigationMenuTriggerStyle
 };