@clasing/ui 2.7.5 → 2.8.0

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

@@ -28,7 +28,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 +36,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 +93,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: {

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/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-DBOcqSZb.js";
 export {
   o as Badge
 };

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

@@ -1,5 +1,5 @@
 import { j as r, c as n } from "../../index-C_XDkVGm.js";
-import { B as v } from "../../badge-DnN1HZI0.js";
+import { B as v } from "../../badge-DBOcqSZb.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";

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/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
       ),

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.js

@@ -1,4 +1,4 @@
-import { I as r } from "../input-EFdg0T-Q.js";
+import { I as r } from "../input-C0PAOim8.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-DBOcqSZb.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";

package/dist/components/phone-input.js

@@ -1,6 +1,6 @@
 import { j as e, c as p } from "../index-C_XDkVGm.js";
 import { C as k, d as A, f as F, b as L, c as D, e as N } from "../command-Cq3FhQXv.js";
-import { I as M } from "../input-EFdg0T-Q.js";
+import { I as M } from "../input-C0PAOim8.js";
 import { P as q, c as H, b as G } from "../popover-CLQxfbEi.js";
 import { S as W } from "../scroll-area-DQenuQib.js";
 import { CaretDownIcon as $, CheckIcon as B } from "@phosphor-icons/react";

package/dist/{input-EFdg0T-Q.js → input-C0PAOim8.js}

@@ -2,7 +2,7 @@ import { j as r, c as o } from "./index-C_XDkVGm.js";
 import { EyeSlashIcon as f, EyeIcon as g } from "@phosphor-icons/react";
 import { cva as b } from "class-variance-authority";
 import * as m from "react";
-import { B as x } from "./button-C8ApjC1N.js";
+import { B as x } from "./button-DSpGxL2e.js";
 const d = b(
   `
     flex w-full min-w-0 rounded-md border border-input bg-transparent

package/dist/ui.css

@@ -302,7 +302,7 @@
   --primary-foreground: var(--color-neutral-100);
   --secondary: var(--color-neutral-200);
   --secondary-foreground: var(--foreground);
-  --muted: var(--color-neutral-200);
+  --muted: var(--color-neutral-100);
   --muted-foreground: var(--color-neutral-500);
   --accent: var(--color-neutral-200);
   --accent-foreground: var(--color-neutral-900);
@@ -316,7 +316,7 @@
   --info-foreground: var(--color-blue-700);
   --border: var(--color-neutral-200);
   --input: var(--color-neutral-300);
-  --ring: var(--color-neutral-900);
+  --ring: var(--color-ring-default);
   --sidebar: var(--background);
   --sidebar-foreground: var(--foreground);
   --sidebar-primary: var(--primary);
@@ -331,9 +331,9 @@
 .dark {
   --background: var(--color-neutral-900);
   --foreground: var(--color-neutral-100);
-  --card: var(--color-neutral-800);
+  --card: var(--color-neutral-900);
   --card-foreground: var(--foreground);
-  --popover: var(--color-neutral-800);
+  --popover: var(--color-neutral-900);
   --popover-foreground: var(--foreground);
   --primary: var(--color-neutral-100);
   --primary-foreground: var(--color-neutral-900);
@@ -341,7 +341,7 @@
   --secondary-foreground: var(--color-neutral-100);
   --muted: var(--color-neutral-800);
   --muted-foreground: var(--color-neutral-400);
-  --accent: var(--color-neutral-800);
+  --accent: var(--color-neutral-700);
   --accent-foreground: var(--color-neutral-100);
   --destructive: var(--color-red-900);
   --destructive-foreground: var(--color-red-200);
@@ -353,7 +353,7 @@
   --info-foreground: var(--color-blue-200);
   --border: var(--color-neutral-700);
   --input: var(--color-neutral-700);
-  --ring: var(--color-neutral-300);
+  --ring: var(--color-ring-default);
   --sidebar: var(--color-neutral-900);
   --sidebar-foreground: var(--foreground);
   --sidebar-primary: var(--primary);
@@ -361,7 +361,7 @@
   --sidebar-accent: var(--accent);
   --sidebar-accent-foreground: var(--accent-foreground);
   --sidebar-border: var(--border);
-  --surface: var(--color-neutral-800);
+  --surface: var(--color-neutral-900);
   --surface-foreground: var(--foreground);
 }
 /*
@@ -711,3 +711,11 @@ input[type='color']::-webkit-color-swatch {
 ::-webkit-scrollbar-thumb:hover {
   background-color: var(--color-neutral-200);
 }
+
+@utility active-card {
+  @apply border-info-foreground! bg-info lg:hover:bg-info/50 dark:bg-info/50 dark:hover:bg-info/20;
+}
+
+@utility focusable-item {
+  @apply transition-[color,background-color,box-shadow] focus-visible:ring-[3px] focus-visible:ring-ring-default focus-visible:ring-offset-1 focus-visible:outline-hidden;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clasing/ui",
-  "version": "2.7.5",
+  "version": "2.8.0",
   "type": "module",
   "files": [
     "dist"