@nexub/react 1.3.0 → 1.5.0

package/dist/{chunk-ZLSUVZM2.js → chunk-RHOYF7MO.js}

@@ -1,7 +1,15 @@
 'use client';
+import {
+  enterExit,
+  overlaySurface,
+  scrim
+} from "./chunk-KQPLFVFR.js";
+import {
+  buttonVariants
+} from "./chunk-LMPGHWUA.js";
 import {
   cn
-} from "./chunk-AT6RPKU3.js";
+} from "./chunk-Q7G5WGYV.js";
 
 // src/components/AlertDialog/AlertDialog.tsx
 import * as React from "react";
@@ -17,7 +25,9 @@ var Overlay2 = React.forwardRef(
       {
         ref,
         className: cn(
-          "fixed inset-0 z-[var(--z-modal)] bg-[var(--color-overlay)] backdrop-blur-sm",
+          "fixed inset-0 z-[var(--z-modal)]",
+          scrim,
+          enterExit,
           "data-[state=open]:animate-in data-[state=closed]:animate-out",
           "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
           className
@@ -36,7 +46,8 @@ var Content2 = React.forwardRef(
         ref,
         className: cn(
           "fixed left-1/2 top-1/2 z-[var(--z-modal)] w-full max-w-lg -translate-x-1/2 -translate-y-1/2",
-          "rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-default)] shadow-xl",
+          overlaySurface,
+          enterExit,
           "p-6 focus:outline-none",
           "data-[state=open]:animate-in data-[state=closed]:animate-out",
           "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
@@ -95,10 +106,8 @@ var Action2 = React.forwardRef(
       {
         ref,
         className: cn(
-          "inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium",
-          "bg-[var(--color-fill-danger)] text-white hover:bg-[var(--color-fill-danger-hover)] focus:outline-none",
-          "focus-visible:ring-2 focus-visible:ring-red-600 focus-visible:ring-offset-2 ring-offset-[var(--color-ring-offset)]",
-          "disabled:pointer-events-none disabled:opacity-50",
+          // The destructive confirm: same as <Button variant="destructive">.
+          buttonVariants({ variant: "destructive" }),
           className
         ),
         ...props
@@ -114,10 +123,7 @@ var Cancel2 = React.forwardRef(
       {
         ref,
         className: cn(
-          "inline-flex items-center justify-center rounded-md border border-[var(--color-border-default)] px-4 py-2 text-sm font-medium",
-          "bg-[var(--color-bg-default)] text-[var(--color-text-primary)] hover:bg-[var(--color-bg-subtle)]",
-          "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)] focus-visible:ring-offset-2 ring-offset-[var(--color-ring-offset)]",
-          "disabled:pointer-events-none disabled:opacity-50",
+          buttonVariants({ variant: "outlined" }),
           className
         ),
         ...props

package/dist/{chunk-QHJ43Q2T.js → chunk-RLE5RN3T.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   cn
-} from "./chunk-AT6RPKU3.js";
+} from "./chunk-Q7G5WGYV.js";
 
 // src/components/Spinner/Spinner.tsx
 import * as React from "react";

package/dist/{chunk-7B4FS7VQ.js → chunk-RTDUTWJ4.js}

@@ -1,7 +1,18 @@
 'use client';
+import {
+  enterExit,
+  floatingSurface,
+  menuLabel,
+  menuSeparator
+} from "./chunk-KQPLFVFR.js";
+import {
+  field,
+  fieldFocusVisible,
+  fieldInvalid
+} from "./chunk-7SXR4PGO.js";
 import {
   cn
-} from "./chunk-AT6RPKU3.js";
+} from "./chunk-Q7G5WGYV.js";
 
 // src/components/Select/Select.tsx
 import * as React from "react";
@@ -17,18 +28,21 @@ var Trigger2 = React.forwardRef(
     {
       ref,
       className: cn(
-        "flex h-9 w-full items-center justify-between rounded-md border border-[var(--color-border-input)] bg-[var(--color-bg-default)] px-3 py-2 text-sm",
-        // Border shifts to ring color on focus; ring is a semi-transparent halo.
-        "placeholder:text-[var(--color-text-muted)] focus:outline-none focus:border-[var(--color-ring-default)] focus:ring-2 focus:ring-[color-mix(in_srgb,var(--color-ring-default)_25%,transparent)]",
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        invalid && "border-[var(--color-semantic-error-default)] focus:border-[var(--color-semantic-error-default)] focus:ring-[color-mix(in_srgb,var(--color-semantic-error-default)_25%,transparent)]",
+        "flex h-control-md w-full items-center justify-between gap-2 px-3.5 text-body-md",
+        field,
+        fieldFocusVisible,
+        // Open reads like focus: the 2px primary border.
+        "data-[state=open]:border-[var(--color-primary)] data-[state=open]:shadow-[inset_0_0_0_1px_var(--color-primary)]",
+        "data-[placeholder]:text-[var(--color-text-placeholder)]",
+        "disabled:cursor-not-allowed disabled:border-[var(--color-outline-variant)] disabled:bg-[var(--color-surface-container-low)] disabled:text-[var(--color-text-disabled)]",
+        invalid && fieldInvalid,
         "[&>span]:line-clamp-1",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx(RadixSelect.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { size: "sm", className: "opacity-50", "aria-hidden": "true" }) })
+        /* @__PURE__ */ jsx(RadixSelect.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { size: "sm", className: "shrink-0 text-[var(--color-on-surface-variant)]", "aria-hidden": "true" }) })
       ]
     }
   )
@@ -64,7 +78,9 @@ var Content2 = React.forwardRef(
     {
       ref,
       className: cn(
-        "relative z-[var(--z-popover)] max-h-96 min-w-32 overflow-hidden rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-default)] shadow-md",
+        "relative z-[var(--z-popover)] max-h-96 min-w-32 overflow-hidden",
+        floatingSurface,
+        enterExit,
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
         "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 w-[var(--radix-select-trigger-width)]",
@@ -78,7 +94,7 @@ var Content2 = React.forwardRef(
           RadixSelect.Viewport,
           {
             className: cn(
-              "p-1",
+              "p-1.5",
               position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
             ),
             children
@@ -95,7 +111,7 @@ var Label2 = React.forwardRef(
     RadixSelect.Label,
     {
       ref,
-      className: cn("px-2 py-1.5 text-xs font-semibold text-[var(--color-text-muted)]", className),
+      className: cn(menuLabel, className),
       ...props
     }
   )
@@ -107,9 +123,10 @@ var Item2 = React.forwardRef(
     {
       ref,
       className: cn(
-        "relative flex w-full cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none",
-        "focus:bg-[var(--color-bg-subtle)] focus:text-[var(--color-text-primary)]",
-        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "relative flex w-full cursor-default select-none items-center rounded-[10px] py-2 pl-8 pr-2 text-body-sm text-[var(--color-on-surface)] outline-none",
+        // Highlight = the on-surface state layer at hover opacity.
+        "focus:bg-[color-mix(in_srgb,var(--color-on-surface)_8%,transparent)]",
+        "data-[disabled]:pointer-events-none data-[disabled]:text-[var(--color-text-disabled)]",
         className
       ),
       ...props,
@@ -126,7 +143,7 @@ var Separator2 = React.forwardRef(
     RadixSelect.Separator,
     {
       ref,
-      className: cn("-mx-1 my-1 h-px bg-[var(--color-border-default)]", className),
+      className: cn(menuSeparator, className),
       ...props
     }
   )

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

@@ -1,7 +1,7 @@
 'use client';
 import {
   cn
-} from "./chunk-AT6RPKU3.js";
+} from "./chunk-Q7G5WGYV.js";
 
 // src/components/FilterChip/FilterChip.tsx
 import * as React from "react";

package/dist/{chunk-LAWZQ6R6.js → chunk-SVQCINRE.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   cn
-} from "./chunk-AT6RPKU3.js";
+} from "./chunk-Q7G5WGYV.js";
 
 // src/components/Heading/Heading.tsx
 import * as React from "react";

package/dist/{chunk-6MYVXJPJ.js → chunk-SY6V3HAK.js}

@@ -1,10 +1,16 @@
 'use client';
+import {
+  useClassScrollLock
+} from "./chunk-47UGX37F.js";
+import {
+  scrim
+} from "./chunk-KQPLFVFR.js";
 import {
   glassSurfaceClass
-} from "./chunk-ROZVVWPV.js";
+} from "./chunk-DEIBF3P7.js";
 import {
   cn
-} from "./chunk-AT6RPKU3.js";
+} from "./chunk-Q7G5WGYV.js";
 
 // src/components/Drawer/Drawer.tsx
 import * as React2 from "react";
@@ -1521,19 +1527,6 @@ Root3.displayName = "Drawer.Root";
 var Trigger2 = Drawer.Trigger;
 var Close2 = Drawer.Close;
 var Portal3 = Drawer.Portal;
-var scrollLocks = 0;
-function useClassScrollLock() {
-  React2.useEffect(() => {
-    const html = document.documentElement;
-    if (scrollLocks++ === 0) {
-      html.classList.toggle("nexub-scroll-gutter", window.innerWidth > html.clientWidth);
-      html.classList.add("nexub-scroll-lock");
-    }
-    return () => {
-      if (--scrollLocks === 0) html.classList.remove("nexub-scroll-lock", "nexub-scroll-gutter");
-    };
-  }, []);
-}
 var ClassLockOverlay = React2.forwardRef(
   ({ asChild, forceMount: _forceMount, open, ...props }, ref) => {
     useClassScrollLock();
@@ -1553,7 +1546,7 @@ var ClassLockOverlay = React2.forwardRef(
 var Overlay3 = React2.forwardRef(
   ({ className, ...props }, ref) => {
     const { scrollLock, open, modal } = React2.useContext(DrawerContext2);
-    const classes = cn("fixed inset-0 z-[var(--z-modal)] bg-[var(--color-overlay)]", className);
+    const classes = cn("fixed inset-0 z-[var(--z-modal)]", scrim, className);
     if (scrollLock === "class") {
       if (!modal) return null;
       return /* @__PURE__ */ jsx(ClassLockOverlay, { ref, open, className: cn("pointer-events-auto", classes), ...props });
@@ -1564,22 +1557,23 @@ var Overlay3 = React2.forwardRef(
 Overlay3.displayName = "Drawer.Overlay";
 var Content3 = React2.forwardRef(({ className, children, side = "right", surface = "solid", ...props }, ref) => {
   const sideMap = {
-    right: "inset-y-0 right-0 h-full w-3/4 max-w-sm border-l overflow-x-hidden",
-    left: "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r overflow-x-hidden",
-    top: "inset-x-0 top-0 w-full border-b",
-    bottom: "inset-x-0 bottom-0 w-full border-t rounded-t-2xl"
+    right: "inset-y-0 right-0 h-full w-3/4 max-w-sm overflow-x-hidden",
+    left: "inset-y-0 left-0 h-full w-3/4 max-w-sm overflow-x-hidden",
+    top: "inset-x-0 top-0 w-full rounded-b-[var(--shape-overlay)]",
+    bottom: "inset-x-0 bottom-0 w-full rounded-t-[var(--shape-overlay)]"
   };
   return /* @__PURE__ */ jsxs(
     Drawer.Content,
     {
       ref,
       className: cn(
-        "fixed z-[var(--z-modal)] flex flex-col bg-[var(--color-bg-default)] shadow-xl focus:outline-none",
+        "fixed z-[var(--z-modal)] flex flex-col bg-[var(--color-surface-elevated)] text-[var(--color-on-surface)] shadow-elevation-3 focus:outline-none",
         sideMap[side],
         surface === "glass" && glassSurfaceClass,
         className
       ),
       "data-material": surface === "glass" ? "glass" : void 0,
+      "data-glass-thickness": surface === "glass" ? "thick" : void 0,
       ...props,
       children: [
         side === "bottom" && /* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 h-2 w-20 rounded-full bg-[var(--color-border-default)]" }),
@@ -1594,7 +1588,7 @@ var Title2 = React2.forwardRef(
     Drawer.Title,
     {
       ref,
-      className: cn("text-lg font-semibold text-[var(--color-text-primary)]", className),
+      className: cn("text-title-lg text-[var(--color-on-surface)]", className),
       ...props
     }
   )
@@ -1605,7 +1599,7 @@ var Description2 = React2.forwardRef(
     Drawer.Description,
     {
       ref,
-      className: cn("text-sm text-[var(--color-text-muted)]", className),
+      className: cn("text-body-sm text-[var(--color-on-surface-muted)]", className),
       ...props
     }
   )

package/dist/{chunk-VT7RKY46.js → chunk-TEOLG3N2.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   Combobox
-} from "./chunk-2VDP2ML4.js";
+} from "./chunk-Z3IG5WRA.js";
 
 // src/components/Autocomplete/Autocomplete.tsx
 import * as React from "react";

package/dist/{chunk-A7L75YXY.js → chunk-TJCHA3OI.js}

@@ -1,10 +1,10 @@
 'use client';
 import {
   Input
-} from "./chunk-CVBAWKNG.js";
+} from "./chunk-IK23Q2OF.js";
 import {
   cn
-} from "./chunk-AT6RPKU3.js";
+} from "./chunk-Q7G5WGYV.js";
 
 // src/components/SearchInput/SearchInput.tsx
 import * as React from "react";

package/dist/chunk-TNBBQ7IP.js

@@ -0,0 +1,43 @@
+'use client';
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/Slider/Slider.tsx
+import * as React from "react";
+import * as RadixSlider from "@radix-ui/react-slider";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Slider = React.forwardRef(
+  ({ className, thumbLabels, "aria-label": ariaLabel, ...props }, ref) => {
+    const count = (props.value ?? props.defaultValue ?? [0]).length;
+    return /* @__PURE__ */ jsxs(
+      RadixSlider.Root,
+      {
+        ref,
+        className: cn("group relative flex h-control-sm w-full touch-none select-none items-center", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(RadixSlider.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-[var(--color-surface-container-highest)]", children: /* @__PURE__ */ jsx(RadixSlider.Range, { className: "absolute h-full bg-[var(--color-primary)] group-data-[disabled]:bg-[var(--color-text-disabled)]" }) }),
+          Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx(
+            RadixSlider.Thumb,
+            {
+              "aria-label": thumbLabels?.[i] ?? ariaLabel,
+              className: cn(
+                "nx-state-layer block h-5 w-5 rounded-full border-2 border-[var(--color-surface-container-lowest)] bg-[var(--color-primary)] text-[var(--color-primary)] shadow-elevation-1",
+                "before:-inset-2.5 cursor-grab active:cursor-grabbing",
+                // Opaque disabled knob (text-disabled is translucent and would show the range through it).
+                "group-data-[disabled]:pointer-events-none group-data-[disabled]:bg-[color-mix(in_srgb,var(--color-on-surface)_38%,var(--color-surface))]"
+              )
+            },
+            i
+          ))
+        ]
+      }
+    );
+  }
+);
+Slider.displayName = "Slider";
+
+export {
+  Slider
+};

package/dist/{chunk-IHW2L532.js → chunk-TYTW4F3B.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   cn
-} from "./chunk-AT6RPKU3.js";
+} from "./chunk-Q7G5WGYV.js";
 
 // src/components/Toast/Toast.tsx
 import * as React from "react";
@@ -28,7 +28,9 @@ var Root2 = React.forwardRef(
     {
       ref,
       className: cn(
-        "group pointer-events-auto relative flex w-full items-center justify-between gap-2 overflow-hidden rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-default)] p-4 shadow-md transition-all",
+        // Snackbar: the inverse surface stands out from any page, light or dark.
+        "group pointer-events-auto relative flex w-full items-center justify-between gap-3 overflow-hidden rounded-shape-container bg-[var(--color-inverse-surface)] py-3 pl-4 pr-2 text-[var(--color-inverse-on-surface)] shadow-elevation-2",
+        "duration-spatial-default ease-spatial-default data-[state=closed]:duration-effects-fast",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full data-[state=closed]:slide-out-to-right-full",
         className
       ),
@@ -38,7 +40,7 @@ var Root2 = React.forwardRef(
 );
 Root2.displayName = "Toast.Root";
 var Title2 = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixToast.Title, { ref, className: cn("text-sm font-semibold", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixToast.Title, { ref, className: cn("text-title-sm", className), ...props })
 );
 Title2.displayName = "Toast.Title";
 var Description2 = React.forwardRef(
@@ -46,7 +48,7 @@ var Description2 = React.forwardRef(
     RadixToast.Description,
     {
       ref,
-      className: cn("text-sm text-[var(--color-text-muted)]", className),
+      className: cn("text-body-sm text-[color-mix(in_srgb,var(--color-inverse-on-surface)_80%,transparent)]", className),
       ...props
     }
   )
@@ -58,7 +60,7 @@ var Action2 = React.forwardRef(
     {
       ref,
       className: cn(
-        "inline-flex min-h-[44px] min-w-[44px] items-center justify-center rounded-md border px-3 text-xs font-medium transition-colors hover:bg-[var(--color-bg-subtle)]",
+        "nx-state-layer relative inline-flex min-h-[44px] min-w-[44px] shrink-0 items-center justify-center rounded-shape-control px-3 text-label-lg text-[var(--color-inverse-primary)]",
         className
       ),
       ...props
@@ -67,7 +69,7 @@ var Action2 = React.forwardRef(
 );
 Action2.displayName = "Toast.Action";
 var Close2 = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixToast.Close, { ref, className: cn("rounded p-1", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixToast.Close, { ref, className: cn("nx-state-layer relative grid h-8 w-8 place-items-center rounded-full", className), ...props })
 );
 Close2.displayName = "Toast.Close";
 var Toast = { Provider: Provider2, Viewport: Viewport2, Root: Root2, Title: Title2, Description: Description2, Action: Action2, Close: Close2 };
@@ -134,7 +136,8 @@ function Toaster() {
       RadixToast2.Root,
       {
         className: cn(
-          "group pointer-events-auto relative flex w-full items-center justify-between gap-2 overflow-hidden rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-default)] p-4 shadow-md transition-all",
+          "group pointer-events-auto relative flex w-full items-center justify-between gap-3 overflow-hidden rounded-shape-container bg-[var(--color-inverse-surface)] py-3 pl-4 pr-2 text-[var(--color-inverse-on-surface)] shadow-elevation-2",
+          "duration-spatial-default ease-spatial-default data-[state=closed]:duration-effects-fast",
           "data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none",
           "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full data-[state=closed]:slide-out-to-right-full",
           toneMap[t.tone ?? "neutral"]
@@ -142,8 +145,8 @@ function Toaster() {
         duration: t.duration ?? 5e3,
         children: [
           /* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
-            /* @__PURE__ */ jsx2(RadixToast2.Title, { className: "text-sm font-semibold", children: t.title }),
-            t.description && /* @__PURE__ */ jsx2(RadixToast2.Description, { className: "text-sm text-[var(--color-text-muted)]", children: t.description })
+            /* @__PURE__ */ jsx2(RadixToast2.Title, { className: "text-title-sm", children: t.title }),
+            t.description && /* @__PURE__ */ jsx2(RadixToast2.Description, { className: "text-body-sm text-[color-mix(in_srgb,var(--color-inverse-on-surface)_80%,transparent)]", children: t.description })
           ] }),
           t.action && /* @__PURE__ */ jsx2(
             RadixToast2.Action,

package/dist/{chunk-T4IVMVMQ.js → chunk-UMC64NCT.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   cn
-} from "./chunk-AT6RPKU3.js";
+} from "./chunk-Q7G5WGYV.js";
 
 // src/components/HelperText/HelperText.tsx
 import * as React from "react";

package/dist/chunk-V3TETH4J.js

@@ -0,0 +1,146 @@
+'use client';
+import {
+  useClassScrollLock
+} from "./chunk-47UGX37F.js";
+import {
+  enterExit,
+  overlaySurface
+} from "./chunk-KQPLFVFR.js";
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/CommandPalette/CommandPalette.tsx
+import * as React from "react";
+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";
+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) => {
+    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 }),
+      /* @__PURE__ */ jsxs(
+        RadixDialog.Content,
+        {
+          ref,
+          "aria-describedby": void 0,
+          onOpenAutoFocus: () => {
+            returnFocusRef.current = document.activeElement;
+          },
+          onCloseAutoFocus: (e) => {
+            e.preventDefault();
+            returnFocusRef.current?.focus();
+          },
+          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"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(RadixDialog.Title, { className: "sr-only", children: label }),
+            /* @__PURE__ */ jsx(
+              Command,
+              {
+                label,
+                shouldFilter,
+                loop: true,
+                className: "flex h-full w-full flex-col overflow-hidden text-[var(--color-text-primary)]",
+                children
+              }
+            )
+          ]
+        }
+      )
+    ] }) });
+  }
+);
+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" }),
+  /* @__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)]",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+Input.displayName = "CommandPalette.Input";
+var List = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command.List,
+  {
+    ref,
+    className: cn("max-h-[400px] overflow-y-auto overflow-x-hidden p-2", className),
+    ...props
+  }
+));
+List.displayName = "CommandPalette.List";
+var Empty = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command.Empty,
+  {
+    ref,
+    className: cn(
+      "py-8 text-center text-body-sm text-[var(--color-on-surface-muted)]",
+      className
+    ),
+    ...props
+  }
+));
+Empty.displayName = "CommandPalette.Empty";
+var Group = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command.Group,
+  {
+    ref,
+    className: cn(
+      "overflow-hidden p-2 text-[var(--color-on-surface)]",
+      "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-label-sm [&_[cmdk-group-heading]]:text-[var(--color-on-surface-muted)]",
+      className
+    ),
+    ...props
+  }
+));
+Group.displayName = "CommandPalette.Group";
+var Item = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command.Item,
+  {
+    ref,
+    className: cn(
+      // Concentric: overlay 24px − 8px padding = 16px.
+      "relative flex cursor-default select-none items-center gap-2 rounded-shape-container px-3 py-2.5 text-body-sm outline-none",
+      "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)]",
+      className
+    ),
+    ...props
+  }
+));
+Item.displayName = "CommandPalette.Item";
+var Separator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-[var(--color-border-default)]", className),
+    ...props
+  }
+));
+Separator.displayName = "CommandPalette.Separator";
+var CommandPalette = { Root: Root2, Input, List, Empty, Group, Item, Separator };
+
+export {
+  CommandPalette
+};

package/dist/{chunk-JQDLCN5D.js → chunk-W2NEXOTG.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   cn
-} from "./chunk-AT6RPKU3.js";
+} from "./chunk-Q7G5WGYV.js";
 
 // src/components/Accordion/Accordion.tsx
 import * as React from "react";

package/dist/{chunk-XNDCVVNE.js → chunk-WESZPFBZ.js}

@@ -1,10 +1,10 @@
 'use client';
 import {
   Input
-} from "./chunk-CVBAWKNG.js";
+} from "./chunk-IK23Q2OF.js";
 import {
   cn
-} from "./chunk-AT6RPKU3.js";
+} from "./chunk-Q7G5WGYV.js";
 
 // src/components/PasswordInput/PasswordInput.tsx
 import * as React from "react";

package/dist/{chunk-DD6XCW6R.js → chunk-XR4NBY54.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   cn
-} from "./chunk-AT6RPKU3.js";
+} from "./chunk-Q7G5WGYV.js";
 
 // src/components/Callout/Callout.tsx
 import * as React from "react";

package/dist/{chunk-YGOR3KT7.js → chunk-YJ3JQYAN.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   cn
-} from "./chunk-AT6RPKU3.js";
+} from "./chunk-Q7G5WGYV.js";
 
 // src/components/EyebrowChip/EyebrowChip.tsx
 import * as React from "react";