@nexub/react 1.2.0 → 1.4.0

package/dist/{chunk-MY6XUJ5P.js → chunk-OJRSPDNJ.js}

@@ -1,7 +1,15 @@
 'use client';
+import {
+  enterExit,
+  floatingSurface,
+  menuContent,
+  menuItem,
+  menuLabel,
+  menuSeparator
+} from "./chunk-KQPLFVFR.js";
 import {
   cn
-} from "./chunk-AT6RPKU3.js";
+} from "./chunk-Q7G5WGYV.js";
 
 // src/components/Menubar/Menubar.tsx
 import * as React from "react";
@@ -20,8 +28,7 @@ var Root2 = React.forwardRef(
       {
         ref,
         className: cn(
-          "flex h-9 items-center gap-1 rounded-md border border-[var(--color-border-default)]",
-          "bg-[var(--color-bg-default)] px-3",
+          "flex h-control-md items-center gap-0.5 rounded-shape-control bg-[var(--color-surface-container-low)] p-1",
           className
         ),
         ...props
@@ -37,9 +44,9 @@ var Trigger2 = React.forwardRef(
       {
         ref,
         className: cn(
-          "relative flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium",
-          "outline-none focus:bg-[var(--color-bg-subtle)]",
-          "data-[state=open]:bg-[var(--color-bg-subtle)]",
+          "nx-state-layer relative flex h-full cursor-default select-none items-center rounded-shape-control px-3 text-label-lg text-[var(--color-on-surface)]",
+          "outline-none",
+          "data-[state=open]:bg-[color-mix(in_srgb,var(--color-on-surface)_8%,transparent)]",
           className
         ),
         ...props
@@ -49,8 +56,10 @@ var Trigger2 = React.forwardRef(
 );
 Trigger2.displayName = "Menubar.Trigger";
 var contentBaseClasses = cn(
-  "z-[var(--z-popover)] min-w-48 rounded-lg border border-[var(--color-border-default)]",
-  "bg-[var(--color-bg-default)] p-1 shadow-md outline-none",
+  "z-[var(--z-popover)] min-w-48 outline-none",
+  floatingSurface,
+  menuContent,
+  enterExit,
   "data-[state=open]:animate-in data-[state=closed]:animate-out",
   "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
   "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
@@ -72,9 +81,7 @@ var Content2 = React.forwardRef(
 );
 Content2.displayName = "Menubar.Content";
 var itemBaseClasses = cn(
-  "relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none",
-  "transition-colors hover:bg-[var(--color-bg-subtle)] focus:bg-[var(--color-bg-subtle)]",
-  "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+  menuItem
 );
 var Item2 = React.forwardRef(
   function MenubarItem({ className, ...props }, ref) {
@@ -96,7 +103,7 @@ var Label2 = React.forwardRef(
       {
         ref,
         className: cn(
-          "px-2 py-1 text-xs font-semibold text-[var(--color-text-muted)]",
+          menuLabel,
           className
         ),
         ...props
@@ -111,7 +118,7 @@ var Separator2 = React.forwardRef(
       RadixMenubar.Separator,
       {
         ref,
-        className: cn("-mx-1 my-1 h-px bg-[var(--color-border-default)]", className),
+        className: cn(menuSeparator, className),
         ...props
       }
     );
@@ -156,7 +163,7 @@ var SubTrigger2 = React.forwardRef(function MenubarSubTrigger({ className, child
       ref,
       className: cn(
         itemBaseClasses,
-        "data-[state=open]:bg-[var(--color-bg-subtle)]",
+        "data-[state=open]:bg-[color-mix(in_srgb,var(--color-on-surface)_8%,transparent)]",
         className
       ),
       ...props,

package/dist/chunk-P26VJEIW.js

@@ -0,0 +1 @@
+'use client';

package/dist/{chunk-IBCYG6HR.js → chunk-P44EROBX.js}

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

package/dist/{chunk-52KTX5A7.js → chunk-PQ6GU7SG.js}

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

package/dist/{chunk-CZUNTABW.js → chunk-PVTACENM.js}

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

package/dist/{chunk-Y45JAJKW.js → chunk-PWBPHGM3.js}

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

package/dist/chunk-Q7G5WGYV.js

@@ -0,0 +1,33 @@
+'use client';
+
+// src/utils/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var sizes = ["xs", "sm", "md", "lg", "xl"];
+var typeRoles = ["display", "headline", "title", "body", "label"].flatMap(
+  (r) => ["lg", "md", "sm"].map((s) => `${r}-${s}`)
+);
+var springs = ["spatial", "effects", "expressive"].flatMap(
+  (k) => ["fast", "default", "slow"].map((s) => `${k}-${s}`)
+);
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      spacing: sizes.map((s) => `control-${s}`),
+      borderRadius: ["control", "field", "container", "overlay", "tooltip", "min"].map((s) => `shape-${s}`)
+    },
+    classGroups: {
+      "font-size": [{ text: typeRoles }],
+      shadow: [{ shadow: ["elevation-0", "elevation-1", "elevation-2", "elevation-3"] }],
+      duration: [{ duration: springs }],
+      ease: [{ ease: springs }]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export {
+  cn
+};

package/dist/{chunk-BYCTJHXY.js → chunk-QCNLE27O.js}

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

package/dist/{chunk-7W2YDJ5W.js → chunk-QD7H3WV3.js}

@@ -1,7 +1,10 @@
 'use client';
+import {
+  floatingSurface
+} from "./chunk-KQPLFVFR.js";
 import {
   cn
-} from "./chunk-AT6RPKU3.js";
+} from "./chunk-Q7G5WGYV.js";
 
 // src/components/NavigationMenu/NavigationMenu.tsx
 import * as React from "react";
@@ -41,10 +44,9 @@ var Trigger2 = React.forwardRef(
     {
       ref,
       className: cn(
-        "group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors",
-        "hover:bg-[var(--color-bg-subtle)] hover:text-[var(--color-text-primary)] focus:bg-[var(--color-bg-subtle)] focus:text-[var(--color-text-primary)] focus:outline-none",
-        "data-[active]:bg-[var(--color-bg-subtle)]/50 data-[state=open]:bg-[var(--color-bg-subtle)]/50",
-        "disabled:pointer-events-none disabled:opacity-50",
+        "nx-state-layer group relative inline-flex h-control-sm w-max items-center justify-center rounded-shape-control px-3.5 text-label-lg text-[var(--color-on-surface-variant)]",
+        "data-[active]:text-[var(--color-on-surface)] data-[state=open]:bg-[var(--color-secondary-container)] data-[state=open]:text-[var(--color-on-secondary-container)]",
+        "disabled:pointer-events-none disabled:text-[var(--color-text-disabled)]",
         className
       ),
       ...props,
@@ -83,7 +85,7 @@ var Link2 = React.forwardRef(
     {
       ref,
       className: cn(
-        "block select-none rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-[var(--color-bg-subtle)] hover:text-[var(--color-text-primary)] focus:bg-[var(--color-bg-subtle)] focus:text-[var(--color-text-primary)]",
+        "nx-state-layer relative block select-none rounded-[10px] p-3 leading-none text-[var(--color-on-surface)] no-underline outline-none",
         className
       ),
       ...props
@@ -97,7 +99,8 @@ var Viewport2 = React.forwardRef(
     {
       ref,
       className: cn(
-        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-default)] shadow-md",
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden",
+        floatingSurface,
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
         className
       ),

package/dist/{chunk-HW3I7I3R.js → chunk-RB4CVS22.js}

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

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-WCJNZ5ME.js → chunk-SY6V3HAK.js}

@@ -1,15 +1,22 @@
 '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";
+import { Slot } from "@radix-ui/react-slot";
 
-// ../../node_modules/.pnpm/vaul@1.1.2_@types+react-dom@19.2.3_@types+react@19.2.14__@types+react@19.2.14_react-dom@19.2._t4undv72xnojrj4azpqq7vnpvm/node_modules/vaul/dist/index.mjs
+// ../../node_modules/.pnpm/vaul@1.1.2_@types+react-dom@19.2.3_@types+react@19.2.14__@types+react@19.2.14_react-dom_d9bfd38a4ee4f41de100e4d447baf4a5/node_modules/vaul/dist/index.mjs
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import * as React from "react";
 import React__default, { useLayoutEffect, useEffect, useMemo } from "react";
@@ -1501,39 +1508,72 @@ var Drawer = {
 
 // src/components/Drawer/Drawer.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-var Root3 = Drawer.Root;
+var DrawerContext2 = React2.createContext({ scrollLock: "style", open: false, modal: true });
+function Root3({ scrollLock = "style", onOpenChange, ...props }) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React2.useState(props.defaultOpen ?? false);
+  const open = props.open ?? uncontrolledOpen;
+  return /* @__PURE__ */ jsx(DrawerContext2.Provider, { value: { scrollLock, open, modal: props.modal ?? true }, children: /* @__PURE__ */ jsx(
+    Drawer.Root,
+    {
+      ...props,
+      onOpenChange: (next) => {
+        setUncontrolledOpen(next);
+        onOpenChange?.(next);
+      }
+    }
+  ) });
+}
+Root3.displayName = "Drawer.Root";
 var Trigger2 = Drawer.Trigger;
-var Portal3 = Drawer.Portal;
 var Close2 = Drawer.Close;
+var Portal3 = Drawer.Portal;
+var ClassLockOverlay = React2.forwardRef(
+  ({ asChild, forceMount: _forceMount, open, ...props }, ref) => {
+    useClassScrollLock();
+    const Comp = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        "data-vaul-overlay": "",
+        "data-vaul-snap-points": "false",
+        "data-state": open ? "open" : "closed",
+        ...props
+      }
+    );
+  }
+);
 var Overlay3 = React2.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    Drawer.Overlay,
-    {
-      ref,
-      className: cn("fixed inset-0 z-[var(--z-modal)] bg-[var(--color-overlay)]", className),
-      ...props
-    }
-  )
+  ({ className, ...props }, ref) => {
+    const { scrollLock, open, modal } = React2.useContext(DrawerContext2);
+    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 });
+    }
+    return /* @__PURE__ */ jsx(Drawer.Overlay, { ref, className: classes, ...props });
+  }
 );
 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)]" }),
@@ -1548,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
     }
   )
@@ -1559,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-OZPPL76D.js → chunk-T5BS4OIV.js}

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

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
+};