@nexub/react 1.5.1 → 1.6.0

package/dist/chunk-F73DTG2V.js

@@ -0,0 +1,123 @@
+'use client';
+import {
+  glassSurfaceClass
+} from "./chunk-DEIBF3P7.js";
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/Card/Card.tsx
+import * as React2 from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+
+// src/hooks/usePointerSheen.ts
+import * as React from "react";
+function usePointerSheen(enabled, onPointerMove) {
+  const frame = React.useRef(0);
+  React.useEffect(() => () => cancelAnimationFrame(frame.current), []);
+  const handler = React.useCallback(
+    (event) => {
+      onPointerMove?.(event);
+      if (event.pointerType === "touch") return;
+      const el = event.currentTarget;
+      const { clientX, clientY } = event;
+      cancelAnimationFrame(frame.current);
+      frame.current = requestAnimationFrame(() => {
+        const r = el.getBoundingClientRect();
+        el.style.setProperty("--nx-mx", `${clientX - r.left}px`);
+        el.style.setProperty("--nx-my", `${clientY - r.top}px`);
+      });
+    },
+    [onPointerMove]
+  );
+  return enabled ? handler : onPointerMove;
+}
+
+// src/components/Card/Card.tsx
+import { jsx } from "react/jsx-runtime";
+var cardVariants = cva(
+  // In-flow content: tone + a soft alpha hairline, no shadow (shadows are for floating layers).
+  // A CardLink inside stretches over the card; the card then carries its focus ring.
+  "rounded-shape-container bg-[var(--color-surface-elevated)] border border-[color-mix(in_srgb,var(--color-outline-variant)_60%,transparent)] text-[var(--color-on-surface)] has-[[data-card-link]]:relative has-[[data-card-link]:focus-visible]:outline has-[[data-card-link]:focus-visible]:outline-[3px] has-[[data-card-link]:focus-visible]:outline-offset-2 has-[[data-card-link]:focus-visible]:outline-[var(--color-primary)]",
+  {
+    variants: {
+      variant: {
+        flat: "",
+        surface: "bg-[var(--color-surface-elevated)] shadow-elevation-1",
+        // Lift on hover (spring, elevation 1 → 2), sink on press, state layer
+        // tint; see .nx-lift in themes/base.css.
+        interactive: "nx-state-layer nx-lift cursor-pointer bg-[var(--color-surface-elevated)] shadow-elevation-1"
+      },
+      // Material. 'glass' needs data-material="glass" on the element (set in the
+      // component) for the --glass-* vars to resolve. Single box-shadow carries
+      // both the inset specular highlight and the drop shadow so neither clobbers
+      // the other. Listed after `variant` so tailwind-merge lets it win on bg/border.
+      surface: {
+        solid: "",
+        glass: glassSurfaceClass
+      }
+    },
+    defaultVariants: {
+      variant: "flat",
+      surface: "solid"
+    }
+  }
+);
+var toneBorderMap = {
+  neutral: "",
+  info: "border-s-4 border-s-[var(--color-info)]",
+  success: "border-s-4 border-s-[var(--color-success)]",
+  warning: "border-s-4 border-s-[var(--color-warning)]",
+  danger: "border-s-4 border-s-[var(--color-error)]",
+  leap: "border-s-4 border-s-[var(--color-leap)]",
+  bookub: "border-s-4 border-s-[var(--color-bookub)]",
+  payub: "border-s-4 border-s-[var(--color-payub)]",
+  founderub: "border-s-4 border-s-[var(--color-founderub)]"
+};
+var Card = React2.forwardRef(
+  ({ className, variant = "flat", surface = "solid", effect = "none", tone, asChild = false, onPointerMove, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    const toneStyle = tone ? toneBorderMap[tone] : "";
+    const sheen = effect === "sheen";
+    const handlePointerMove = usePointerSheen(sheen, onPointerMove);
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: cn(cardVariants({ variant, surface }), toneStyle, sheen && "nx-sheen", className),
+        onPointerMove: handlePointerMove,
+        "data-tone": tone,
+        "data-material": surface === "glass" ? "glass" : void 0,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+var CardLink = React2.forwardRef(
+  ({ className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        "data-card-link": "",
+        className: cn(
+          "text-inherit no-underline outline-none after:absolute after:inset-0 after:rounded-[inherit] after:content-['']",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+CardLink.displayName = "CardLink";
+
+export {
+  usePointerSheen,
+  cardVariants,
+  Card,
+  CardLink
+};

package/dist/{chunk-V3TETH4J.js → chunk-FIDUY6SS.js}

@@ -3,9 +3,12 @@ import {
   useClassScrollLock
 } from "./chunk-47UGX37F.js";
 import {
-  enterExit,
-  overlaySurface
-} from "./chunk-KQPLFVFR.js";
+  overlaySurface,
+  scrim
+} from "./chunk-FLZD7HQY.js";
+import {
+  useNexubMessages
+} from "./chunk-743Y5MY3.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -16,13 +19,15 @@ import * as RadixDialog from "@radix-ui/react-dialog";
 import { Command } from "cmdk";
 import { Search } from "@nexub/icons";
 import { jsx, jsxs } from "react/jsx-runtime";
-var overlayClasses = "fixed inset-0 z-[var(--z-modal)] bg-[color-mix(in_srgb,#000_40%,transparent)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 duration-effects-default ease-effects-default";
+var overlayClasses = cn("fixed inset-0 z-[var(--z-modal)] nx-motion", scrim);
 function ClassLockOverlay() {
   useClassScrollLock();
   return /* @__PURE__ */ jsx("div", { "data-state": "open", className: overlayClasses });
 }
 var Root2 = React.forwardRef(
-  ({ children, label = "Command palette", scrollLock = "style", shouldFilter, ...props }, ref) => {
+  ({ children, label: labelProp, scrollLock = "style", shouldFilter, ...props }, ref) => {
+    const messages = useNexubMessages();
+    const label = labelProp ?? messages.commandPalette;
     const returnFocusRef = React.useRef(null);
     return /* @__PURE__ */ jsx(RadixDialog.Root, { ...props, children: /* @__PURE__ */ jsxs(RadixDialog.Portal, { children: [
       scrollLock === "class" ? /* @__PURE__ */ jsx(ClassLockOverlay, {}) : /* @__PURE__ */ jsx(RadixDialog.Overlay, { className: overlayClasses }),
@@ -40,12 +45,8 @@ var Root2 = React.forwardRef(
           },
           className: cn(
             "fixed left-1/2 top-[20%] z-[var(--z-modal)] w-[calc(100%-2rem)] max-w-xl -translate-x-1/2",
-            "overflow-hidden",
-            overlaySurface,
-            enterExit,
-            "data-[state=open]:animate-in data-[state=closed]:animate-out",
-            "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-            "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
+            "nx-motion nx-dialog overflow-hidden",
+            overlaySurface
           ),
           children: [
             /* @__PURE__ */ jsx(RadixDialog.Title, { className: "sr-only", children: label }),
@@ -55,7 +56,7 @@ var Root2 = React.forwardRef(
                 label,
                 shouldFilter,
                 loop: true,
-                className: "flex h-full w-full flex-col overflow-hidden text-[var(--color-text-primary)]",
+                className: "flex h-full w-full flex-col overflow-hidden text-[var(--color-on-surface)]",
                 children
               }
             )
@@ -66,14 +67,14 @@ var Root2 = React.forwardRef(
   }
 );
 Root2.displayName = "CommandPalette.Root";
-var Input = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b border-[var(--color-border-default)] px-3", children: [
-  /* @__PURE__ */ jsx(Search, { size: "sm", className: "mr-2 shrink-0 opacity-50", "aria-hidden": "true" }),
+var Input = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b border-[var(--color-outline-variant)] px-3", children: [
+  /* @__PURE__ */ jsx(Search, { size: "sm", className: "me-2 shrink-0 opacity-50", "aria-hidden": "true" }),
   /* @__PURE__ */ jsx(
     Command.Input,
     {
       ref,
       className: cn(
-        "flex h-control-xl w-full bg-transparent text-body-lg outline-none placeholder:text-[var(--color-text-placeholder)] disabled:cursor-not-allowed disabled:text-[var(--color-text-disabled)]",
+        "flex h-control-xl w-full bg-transparent text-body-lg outline-none placeholder:text-[var(--color-on-surface-muted)] disabled:cursor-not-allowed disabled:text-[var(--color-text-disabled)]",
         className
       ),
       ...props
@@ -134,7 +135,7 @@ var Separator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   Command.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-[var(--color-border-default)]", className),
+    className: cn("-mx-1 my-1 h-px bg-[var(--color-outline-variant)]", className),
     ...props
   }
 ));

package/dist/{chunk-Z3IG5WRA.js → chunk-FJUVYRNT.js}

@@ -27,7 +27,7 @@ var Input = React.forwardRef(
     {
       ref,
       className: cn(
-        "flex h-control-md w-full bg-transparent text-body-md outline-none placeholder:text-[var(--color-text-placeholder)] disabled:cursor-not-allowed disabled:text-[var(--color-text-disabled)]",
+        "flex h-control-md w-full bg-transparent text-body-md outline-none placeholder:text-[var(--color-on-surface-muted)] disabled:cursor-not-allowed disabled:text-[var(--color-text-disabled)]",
         className
       ),
       ...props
@@ -63,7 +63,7 @@ var Group = React.forwardRef(
     {
       ref,
       className: cn(
-        "overflow-hidden p-1 text-[var(--color-text-primary)] [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-[var(--color-text-muted)]",
+        "overflow-hidden p-1 text-[var(--color-on-surface)] [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-[var(--color-on-surface-muted)]",
         className
       ),
       ...props
@@ -77,7 +77,7 @@ var Item = React.forwardRef(
     {
       ref,
       className: cn(
-        "relative flex cursor-default select-none items-center rounded-lg px-2.5 py-2 text-body-sm outline-none",
+        "relative flex cursor-default select-none items-center rounded-[10px] px-2.5 py-2 text-body-sm outline-none",
         // Highlight = the on-surface state layer at hover opacity.
         "aria-selected:bg-[color-mix(in_srgb,var(--color-on-surface)_8%,transparent)]",
         "data-[disabled=true]:pointer-events-none data-[disabled=true]:text-[var(--color-text-disabled)]",

package/dist/{chunk-KQPLFVFR.js → chunk-FLZD7HQY.js}

@@ -12,7 +12,6 @@ var menuItem = [
 ].join(" ");
 var menuSeparator = "-mx-1.5 my-1.5 h-px bg-[var(--color-outline-variant)]";
 var menuLabel = "px-2.5 py-1.5 text-label-sm text-[var(--color-on-surface-muted)]";
-var enterExit = "duration-spatial-default ease-spatial-default data-[state=closed]:duration-effects-fast data-[state=closed]:ease-effects-fast";
 var scrim = "bg-[color-mix(in_srgb,var(--color-scrim,#000)_40%,transparent)]";
 
 export {
@@ -22,6 +21,5 @@ export {
   menuItem,
   menuSeparator,
   menuLabel,
-  enterExit,
   scrim
 };

package/dist/{chunk-64JDZWCV.js → chunk-GRKCUQG4.js}

@@ -1,13 +1,13 @@
 'use client';
 import {
   DropdownMenu
-} from "./chunk-7L3CGIRA.js";
+} from "./chunk-NQPGELMP.js";
 import {
   ButtonGroup
-} from "./chunk-LGQ737BP.js";
+} from "./chunk-WHTLXQB6.js";
 import {
   Button
-} from "./chunk-LMPGHWUA.js";
+} from "./chunk-C6JRJ6JW.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -18,14 +18,15 @@ import { ChevronDown } from "@nexub/icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 var SplitButton = React.forwardRef(
   ({ menuLabel, menu, align = "end", variant, size, tone, disabled, loading, className, ...props }, ref) => {
-    const shared = { variant, size, tone, disabled: disabled || loading };
+    const shared = { variant, size, tone };
     return /* @__PURE__ */ jsxs(ButtonGroup, { attached: true, className, children: [
-      /* @__PURE__ */ jsx(Button, { ref, ...shared, loading, ...props }),
+      /* @__PURE__ */ jsx(Button, { ref, ...shared, disabled, ...loading ? { loading: true } : {}, ...props }),
       /* @__PURE__ */ jsxs(DropdownMenu.Root, { modal: false, children: [
         /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
           Button,
           {
             ...shared,
+            disabled: disabled || loading,
             "aria-label": menuLabel,
             className: cn(
               "px-3",

package/dist/{chunk-EZ23IA3H.js → chunk-GSG2W6DP.js}

@@ -13,9 +13,9 @@ var ScrollArea = React.forwardRef(
     (orientation === "vertical" || orientation === "both") && /* @__PURE__ */ jsx(
       RadixScrollArea.Scrollbar,
       {
-        className: "flex touch-none select-none transition-colors h-full w-2.5 border-l border-l-transparent p-[1px]",
+        className: "flex touch-none select-none transition-colors h-full w-2.5 border-s border-s-transparent p-[1px]",
         orientation: "vertical",
-        children: /* @__PURE__ */ jsx(RadixScrollArea.Thumb, { className: "relative flex-1 rounded-full bg-[var(--color-border-default)]" })
+        children: /* @__PURE__ */ jsx(RadixScrollArea.Thumb, { className: "relative flex-1 rounded-full bg-[var(--color-outline-variant)]" })
       }
     ),
     (orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ jsx(
@@ -23,7 +23,7 @@ var ScrollArea = React.forwardRef(
       {
         className: "flex touch-none select-none transition-colors flex-col h-2.5 border-t border-t-transparent p-[1px]",
         orientation: "horizontal",
-        children: /* @__PURE__ */ jsx(RadixScrollArea.Thumb, { className: "relative flex-1 rounded-full bg-[var(--color-border-default)]" })
+        children: /* @__PURE__ */ jsx(RadixScrollArea.Thumb, { className: "relative flex-1 rounded-full bg-[var(--color-outline-variant)]" })
       }
     ),
     /* @__PURE__ */ jsx(RadixScrollArea.Corner, {})

package/dist/{chunk-4I5ULCYG.js → chunk-HFTS5AN7.js}

@@ -30,13 +30,13 @@ var CheckListItem = React.forwardRef(
       "li",
       {
         ref,
-        className: cn("flex items-start gap-2 text-[var(--color-text-primary)]", className),
+        className: cn("flex items-start gap-2 text-[var(--color-on-surface)]", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx("span", { className: "shrink-0 inline-flex items-center justify-center mt-0.5 h-4 w-4 rounded-full bg-[var(--color-semantic-success-default)]/10", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 inline-flex items-center justify-center mt-0.5 h-4 w-4 rounded-full bg-[color-mix(in_srgb,var(--color-success)_10%,transparent)]", children: /* @__PURE__ */ jsx(
             Check,
             {
-              className: "h-3 w-3 text-[var(--color-semantic-success-default)]",
+              className: "h-3 w-3 text-[var(--color-success)]",
               "aria-hidden": "true"
             }
           ) }),

package/dist/{chunk-S46W2QER.js → chunk-HSPGJSFJ.js}

@@ -1,4 +1,10 @@
 'use client';
+import {
+  disabledText
+} from "./chunk-7SXR4PGO.js";
+import {
+  useNexubMessages
+} from "./chunk-743Y5MY3.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -8,12 +14,14 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var FilterChip = React.forwardRef(
   ({ className, selected = false, count, onRemove, children, ...props }, ref) => {
+    const messages = useNexubMessages();
     return /* @__PURE__ */ jsxs(
       "span",
       {
         className: cn(
-          "inline-flex items-center gap-1 rounded-full border px-3 py-1 text-sm font-medium select-none transition-colors",
-          selected ? "bg-[var(--color-fill-accent)] text-white border-[var(--color-fill-accent)]" : "bg-[var(--color-bg-subtle)] text-[var(--color-text-primary)] border-[var(--color-border-default)] hover:bg-[var(--color-bg-muted)]"
+          // Matches Chip; hover/press come from the state layer.
+          "nx-state-layer inline-flex items-center gap-1 rounded-shape-control border h-8 px-3 text-label-lg select-none",
+          selected ? "bg-[var(--color-secondary-container)] text-[var(--color-on-secondary-container)] border-transparent" : "bg-[var(--color-surface-container-low)] text-[var(--color-on-surface-variant)] border-[var(--color-outline-variant)]"
         ),
         children: [
           /* @__PURE__ */ jsxs(
@@ -22,9 +30,8 @@ var FilterChip = React.forwardRef(
               ref,
               type: "button",
               className: cn(
-                "inline-flex items-center gap-1 bg-transparent border-0 p-0 m-0 cursor-pointer",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)] focus-visible:ring-offset-2 ring-offset-[var(--color-ring-offset)] rounded-sm",
-                selected ? "text-white" : "text-[var(--color-text-primary)]",
+                "inline-flex items-center gap-1 bg-transparent border-0 p-0 m-0 cursor-pointer rounded-shape-control text-current",
+                disabledText,
                 className
               ),
               "aria-pressed": selected,
@@ -35,8 +42,8 @@ var FilterChip = React.forwardRef(
                   "span",
                   {
                     className: cn(
-                      "inline-flex items-center justify-center rounded-full text-xs font-semibold px-1.5 min-w-[1.25rem] h-5",
-                      selected ? "bg-white/20 text-white" : "bg-[var(--color-bg-muted)] text-[var(--color-text-muted)]"
+                      "inline-flex items-center justify-center rounded-full text-label-sm px-1.5 min-w-[1.25rem] h-5",
+                      selected ? "bg-[var(--color-on-secondary-container)] text-[var(--color-secondary-container)]" : "bg-[var(--color-surface-container-high)] text-[var(--color-on-surface-variant)]"
                     ),
                     children: count
                   }
@@ -48,15 +55,14 @@ var FilterChip = React.forwardRef(
             "button",
             {
               type: "button",
-              "aria-label": "Remove filter",
+              "aria-label": messages.removeFilter,
               onClick: (e) => {
                 e.stopPropagation();
                 onRemove();
               },
               className: cn(
-                "inline-flex items-center justify-center rounded-full w-4 h-4 text-xs transition-colors",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)] focus-visible:ring-offset-1",
-                selected ? "text-white hover:bg-white/20" : "text-[var(--color-text-muted)] hover:bg-[var(--color-bg-muted)] hover:text-[var(--color-text-primary)]"
+                // State layer for hover/press; focus = the global ring.
+                "nx-state-layer inline-flex items-center justify-center rounded-full w-5 h-5 -me-1 text-current"
               ),
               children: /* @__PURE__ */ jsx(
                 "svg",

package/dist/{chunk-NQVRF4RB.js → chunk-HXV5UA7K.js}

@@ -1,4 +1,7 @@
 'use client';
+import {
+  useNexubMessages
+} from "./chunk-743Y5MY3.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -9,22 +12,22 @@ import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
 var bannerVariants = cva(
   [
-    "relative flex gap-3 border-l-4 px-4 py-3",
+    "relative flex gap-3 border-s-4 px-4 py-3",
     "w-full"
     // No border-radius — full-width banner
   ],
   {
     variants: {
       tone: {
-        neutral: "bg-[var(--color-bg-subtle)] border-l-[var(--color-neutral-500)] text-[var(--color-text-primary)]",
-        info: "bg-[var(--color-semantic-info-default)]/10 border-l-[var(--color-semantic-info-default)] text-[var(--color-semantic-info-default)]",
-        success: "bg-[var(--color-semantic-success-default)]/10 border-l-[var(--color-semantic-success-default)] text-[var(--color-semantic-success-default)]",
-        warning: "bg-[var(--color-semantic-warning-default)]/10 border-l-[var(--color-semantic-warning-default)] text-[var(--color-semantic-warning-default)]",
-        danger: "bg-[var(--color-semantic-error-default)]/10 border-l-[var(--color-semantic-error-default)] text-[var(--color-semantic-error-default)]",
-        leap: "bg-[var(--color-leap-500)]/10 border-l-[var(--color-leap-500)] text-[var(--color-leap-700)]",
-        bookub: "bg-[var(--color-bookub-500)]/10 border-l-[var(--color-bookub-500)] text-[var(--color-bookub-700)]",
-        payub: "bg-[var(--color-payub-500)]/10 border-l-[var(--color-payub-500)] text-[var(--color-payub-700)]",
-        founderub: "bg-[var(--color-founderub-500)]/10 border-l-[var(--color-founderub-500)] text-[var(--color-founderub-700)]"
+        neutral: "bg-[var(--color-surface-container-low)] border-s-[var(--color-outline)] text-[var(--color-on-surface)]",
+        info: "bg-[var(--color-info-container)] border-s-[var(--color-info)] text-[var(--color-on-info-container)]",
+        success: "bg-[var(--color-success-container)] border-s-[var(--color-success)] text-[var(--color-on-success-container)]",
+        warning: "bg-[var(--color-warning-container)] border-s-[var(--color-warning)] text-[var(--color-on-warning-container)]",
+        danger: "bg-[var(--color-error-container)] border-s-[var(--color-error)] text-[var(--color-on-error-container)]",
+        leap: "bg-[var(--color-leap-container)] border-s-[var(--color-leap)] text-[var(--color-on-leap-container)]",
+        bookub: "bg-[var(--color-bookub-container)] border-s-[var(--color-bookub)] text-[var(--color-on-bookub-container)]",
+        payub: "bg-[var(--color-payub-container)] border-s-[var(--color-payub)] text-[var(--color-on-payub-container)]",
+        founderub: "bg-[var(--color-founderub-container)] border-s-[var(--color-founderub)] text-[var(--color-on-founderub-container)]"
       }
     },
     defaultVariants: {
@@ -43,6 +46,7 @@ var Banner = React.forwardRef(
     children,
     ...props
   }, ref) => {
+    const messages = useNexubMessages();
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -62,11 +66,10 @@ var Banner = React.forwardRef(
             "button",
             {
               type: "button",
-              "aria-label": "Dismiss banner",
+              "aria-label": messages.dismissBanner,
               onClick: onClose,
               className: cn(
-                "shrink-0 inline-flex items-center justify-center rounded-md w-6 h-6 opacity-60 hover:opacity-100 transition-opacity",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)] focus-visible:ring-offset-2 ring-offset-[var(--color-ring-offset)]"
+                "nx-state-layer shrink-0 inline-flex items-center justify-center rounded-full w-6 h-6"
               ),
               children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M10 2L2 10M2 2l8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
             }

package/dist/{chunk-GUB7YKG2.js → chunk-I4U36P54.js}

@@ -6,7 +6,7 @@ import {
 // src/components/Checkbox/Checkbox.tsx
 import * as React from "react";
 import * as RadixCheckbox from "@radix-ui/react-checkbox";
-import { Check, Minus } from "@nexub/icons";
+import { Minus } from "@nexub/icons";
 import { jsx } from "react/jsx-runtime";
 var Checkbox = React.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -15,7 +15,7 @@ var Checkbox = React.forwardRef(
       ref,
       className: cn(
         // 18px, 2px outline border (>= 3:1), primary when on. Focus = the global ring.
-        "peer h-[18px] w-[18px] shrink-0 rounded-[5px] border-2 border-[var(--color-outline)]",
+        "nx-hit peer h-[18px] w-[18px] shrink-0 rounded-[5px] border-2 border-[var(--color-outline)]",
         "transition-[background-color,border-color] duration-effects-fast ease-effects-fast",
         "hover:border-[var(--color-on-surface)]",
         "data-[state=checked]:bg-[var(--color-primary)] data-[state=checked]:border-[var(--color-primary)] data-[state=checked]:text-[var(--color-on-primary)]",
@@ -24,7 +24,10 @@ var Checkbox = React.forwardRef(
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx(RadixCheckbox.Indicator, { className: "flex items-center justify-center", children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { size: "xs" }) : /* @__PURE__ */ jsx(Check, { size: "xs" }) })
+      children: /* @__PURE__ */ jsx(RadixCheckbox.Indicator, { className: "flex items-center justify-center", children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { size: "xs" }) : (
+        // Drawn inline so the stroke can draw itself in (nx-check-draw).
+        /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { className: "nx-check-draw", pathLength: 1, d: "M20 6 9 17l-5-5" }) })
+      ) })
     }
   )
 );

package/dist/{chunk-BTRTORKU.js → chunk-I6CAF7C5.js}

@@ -1,4 +1,7 @@
 'use client';
+import {
+  layoutProps
+} from "./chunk-VLQGQFW7.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -34,12 +37,7 @@ var Stack = React.forwardRef(
     ...rest
   }, ref) => {
     const Comp = asChild ? Slot : "div";
-    const inlineStyle = {
-      ...gap !== void 0 ? { gap: typeof gap === "number" ? `${gap * 0.25}rem` : gap } : {},
-      ...align ? { alignItems: align } : {},
-      ...justify ? { justifyContent: justify } : {},
-      ...style
-    };
+    const layout = layoutProps({ gap, align, justify, style });
     const content = divider ? injectDividers(children, divider) : children;
     return /* @__PURE__ */ jsx(
       Comp,
@@ -47,11 +45,12 @@ var Stack = React.forwardRef(
         ref,
         className: cn(
           "flex",
+          layout.className,
           direction === "row" ? "flex-row" : "flex-col",
           wrap && "flex-wrap",
           className
         ),
-        style: inlineStyle,
+        style: layout.style,
         ...rest,
         children: content
       }