@nexub/react 1.3.0 → 1.5.0

package/dist/chunk-LMPGHWUA.js

@@ -0,0 +1,114 @@
+'use client';
+import {
+  disabledContainer,
+  disabledText,
+  pressable
+} from "./chunk-7SXR4PGO.js";
+import {
+  glassSurfaceClass
+} from "./chunk-DEIBF3P7.js";
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/Button/Button.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { Loader2 } from "@nexub/icons";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var toneClasses = {
+  neutral: "bg-[var(--color-surface-container-high)] text-[var(--color-on-surface)]",
+  info: "bg-[var(--color-info)] text-[var(--color-on-info)]",
+  success: "bg-[var(--color-success)] text-[var(--color-on-success)]",
+  warning: "bg-[var(--color-warning)] text-[var(--color-on-warning)]",
+  danger: "bg-[var(--color-error)] text-[var(--color-on-error)]",
+  leap: "bg-[color:light-dark(var(--color-palette-leap-40),var(--color-palette-leap-80))] text-[color:light-dark(var(--color-palette-leap-100),var(--color-palette-leap-20))]",
+  bookub: "bg-[color:light-dark(var(--color-palette-bookub-40),var(--color-palette-bookub-80))] text-[color:light-dark(var(--color-palette-bookub-100),var(--color-palette-bookub-20))]",
+  payub: "bg-[color:light-dark(var(--color-palette-payub-40),var(--color-palette-payub-80))] text-[color:light-dark(var(--color-palette-payub-100),var(--color-palette-payub-20))]",
+  founderub: "bg-[color:light-dark(var(--color-palette-founderub-40),var(--color-palette-founderub-80))] text-[color:light-dark(var(--color-palette-founderub-100),var(--color-palette-founderub-20))]"
+};
+var filled = `bg-[var(--color-primary)] text-[var(--color-on-primary)] ${disabledContainer}`;
+var tonal = `bg-[var(--color-secondary-container)] text-[var(--color-on-secondary-container)] ${disabledContainer}`;
+var outlined = `bg-transparent border border-[var(--color-outline-variant)] text-[var(--color-on-surface)] ${disabledContainer}`;
+var text = `bg-transparent text-[var(--color-on-surface)] ${disabledText}`;
+var buttonVariants = cva(
+  [pressable, "relative inline-flex items-center justify-center gap-2 whitespace-nowrap"],
+  {
+    variants: {
+      variant: {
+        filled,
+        tonal,
+        outlined,
+        text,
+        // Thin glass: for buttons floating over content/media (toolbars, media controls).
+        glass: `border ${glassSurfaceClass} text-[var(--color-on-surface)] ${disabledContainer}`,
+        // Legacy names (kept as aliases).
+        primary: filled,
+        secondary: tonal,
+        subtle: `bg-[var(--color-surface-container-high)] text-[var(--color-on-surface)] ${disabledContainer}`,
+        outline: outlined,
+        ghost: text,
+        destructive: `bg-[var(--color-error)] text-[var(--color-on-error)] ${disabledContainer}`,
+        accent: `bg-[var(--color-tertiary)] text-[var(--color-on-tertiary)] ${disabledContainer}`,
+        link: `bg-transparent text-[var(--color-primary)] underline underline-offset-[0.3em] ${disabledText}`
+      },
+      // The control ladder (density-aware: data-density="compact" shrinks it).
+      size: {
+        xs: "h-control-xs px-2.5 text-label-sm",
+        sm: "h-control-sm px-3.5 text-label-md",
+        md: "h-control-md px-5 text-label-lg",
+        lg: "h-control-lg px-6 text-title-md",
+        xl: "h-control-xl px-7 text-title-md"
+      },
+      fullWidth: {
+        true: "w-full"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    tone,
+    loading = false,
+    fullWidth,
+    leadingIcon,
+    trailingIcon,
+    asChild = false,
+    disabled,
+    children,
+    ...props
+  }, ref) => {
+    const sharedProps = {
+      className: cn(
+        buttonVariants({ variant, size, fullWidth }),
+        tone ? toneClasses[tone] : "",
+        className
+      ),
+      "data-tone": tone,
+      ...variant === "glass" && { "data-material": "glass", "data-glass-thickness": "thin" },
+      ...props
+    };
+    if (asChild) {
+      return /* @__PURE__ */ jsx(Slot, { ref, ...sharedProps, children });
+    }
+    return /* @__PURE__ */ jsxs("button", { ref, disabled: disabled ?? loading, ...sharedProps, children: [
+      loading ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }) : leadingIcon,
+      children,
+      !loading && trailingIcon
+    ] });
+  }
+);
+Button.displayName = "Button";
+
+export {
+  buttonVariants,
+  Button
+};

package/dist/chunk-LVPU7455.js

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

package/dist/chunk-LZB3KTSH.js

@@ -0,0 +1,61 @@
+'use client';
+import {
+  disabledContainer,
+  disabledText,
+  pressable
+} from "./chunk-7SXR4PGO.js";
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/IconButton/IconButton.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var iconButtonVariants = cva(
+  [pressable, "relative inline-flex items-center justify-center flex-shrink-0"],
+  {
+    variants: {
+      variant: {
+        ghost: `bg-transparent text-[var(--color-on-surface-variant)] ${disabledText}`,
+        solid: `bg-[var(--color-primary)] text-[var(--color-on-primary)] ${disabledContainer}`,
+        outline: `bg-transparent border border-[var(--color-outline-variant)] text-[var(--color-on-surface-variant)] ${disabledContainer}`,
+        subtle: `bg-[var(--color-surface-container-high)] text-[var(--color-on-surface)] ${disabledContainer}`
+      },
+      // Square on the control ladder; the capsule shape makes it a circle.
+      size: {
+        xs: "h-control-xs w-control-xs text-label-sm",
+        sm: "h-control-sm w-control-sm text-label-md",
+        md: "h-control-md w-control-md text-label-lg",
+        lg: "h-control-lg w-control-lg text-title-md",
+        xl: "h-control-xl w-control-xl text-title-md"
+      }
+    },
+    defaultVariants: {
+      variant: "ghost",
+      size: "md"
+    }
+  }
+);
+var IconButton = React.forwardRef(
+  ({ className, variant, size, label, asChild = false, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        "aria-label": label,
+        className: cn(iconButtonVariants({ variant, size }), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+
+export {
+  iconButtonVariants,
+  IconButton
+};

package/dist/{chunk-BUBYXAJK.js → chunk-M7YB3MSW.js}

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

package/dist/{chunk-V3FZHIEB.js → chunk-NCRFKPA4.js}

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

package/dist/{chunk-JKTZMWWC.js → chunk-NIX4SEKM.js}

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

package/dist/{chunk-PBLEGOLM.js → chunk-NMH5WSZG.js}

@@ -1,10 +1,10 @@
 'use client';
 import {
   glassSurfaceClass
-} from "./chunk-ROZVVWPV.js";
+} from "./chunk-DEIBF3P7.js";
 import {
   cn
-} from "./chunk-AT6RPKU3.js";
+} from "./chunk-Q7G5WGYV.js";
 
 // src/components/Card/Card.tsx
 import * as React from "react";
@@ -12,13 +12,14 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
 var cardVariants = cva(
-  "rounded-lg bg-[var(--color-bg-default)] border border-[var(--color-border-default)] text-[var(--color-text-primary)]",
+  // In-flow content: tone + a soft alpha hairline, no shadow (shadows are for floating layers).
+  "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)]",
   {
     variants: {
       variant: {
         flat: "",
-        surface: "shadow-[var(--shadow-card,0_1px_3px_0_rgb(0_0_0/0.1),0_1px_2px_-1px_rgb(0_0_0/0.1))]",
-        interactive: "cursor-pointer shadow-[var(--shadow-sm)] transition-all duration-200 hover:shadow-[var(--shadow-md)] hover:-translate-y-0.5 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)]"
+        surface: "bg-[var(--color-surface-elevated)] shadow-elevation-1",
+        interactive: "nx-state-layer cursor-pointer bg-[var(--color-surface-elevated)] shadow-elevation-1 transition-[box-shadow,transform] duration-spatial-fast ease-spatial-fast hover:-translate-y-0.5 hover:shadow-elevation-2"
       },
       // Material. 'glass' needs data-material="glass" on the element (set in the
       // component) for the --glass-* vars to resolve. Single box-shadow carries

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

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

package/dist/{chunk-IU76LV3W.js → chunk-OASFXI27.js}

@@ -1,16 +1,16 @@
 'use client';
 import {
   Label
-} from "./chunk-JKTZMWWC.js";
-import {
-  FormError
-} from "./chunk-OUBBOOZE.js";
+} from "./chunk-NIX4SEKM.js";
 import {
   HelperText
-} from "./chunk-T4IVMVMQ.js";
+} from "./chunk-UMC64NCT.js";
+import {
+  FormError
+} from "./chunk-KM6Z3VTI.js";
 import {
   cn
-} from "./chunk-AT6RPKU3.js";
+} from "./chunk-Q7G5WGYV.js";
 
 // src/components/FormField/FormField.tsx
 import * as React from "react";

package/dist/chunk-OJ2TLWYD.js

@@ -0,0 +1,89 @@
+'use client';
+import {
+  useMergedRefs,
+  useSlidingIndicator
+} from "./chunk-YRDCY6BI.js";
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/Tabs/Tabs.tsx
+import * as React from "react";
+import * as RadixTabs from "@radix-ui/react-tabs";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Root2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixTabs.Root, { ref, className: cn("flex flex-col gap-3", className), ...props })
+);
+Root2.displayName = "Tabs.Root";
+var List2 = React.forwardRef(
+  ({ className, children, ...props }, forwardedRef) => {
+    const ref = React.useRef(null);
+    useSlidingIndicator(ref, '[data-state="active"]');
+    return /* @__PURE__ */ jsxs(
+      RadixTabs.List,
+      {
+        ref: useMergedRefs(ref, forwardedRef),
+        className: cn(
+          "relative flex w-full items-stretch justify-start overflow-x-auto",
+          "border-b border-[var(--color-outline-variant)]",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "pointer-events-none absolute bottom-0 left-0 h-[3px] rounded-t-full bg-[var(--color-primary)]",
+                "w-[var(--nx-ind-w,0px)] translate-x-[var(--nx-ind-x,0px)] opacity-[var(--nx-ind-o,0)]",
+                "[[data-nx-indicator=ready]>&]:transition-[transform,width] [[data-nx-indicator=ready]>&]:duration-spatial-default [[data-nx-indicator=ready]>&]:ease-spatial-default"
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+List2.displayName = "Tabs.List";
+var Trigger2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixTabs.Trigger,
+    {
+      ref,
+      className: cn(
+        // State layer for hover/press; focus = the global ring.
+        "nx-state-layer relative inline-flex h-control-md items-center justify-center whitespace-nowrap rounded-t-lg px-4 text-label-lg select-none",
+        "text-[var(--color-on-surface-variant)] transition-colors duration-effects-fast ease-effects-fast",
+        "data-[state=active]:text-[var(--color-primary)]",
+        "disabled:pointer-events-none disabled:text-[var(--color-text-disabled)]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Trigger2.displayName = "Tabs.Trigger";
+var Content2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixTabs.Content,
+    {
+      ref,
+      className: cn(
+        className,
+        // Radix hides inactive panels with the `hidden` attribute, which any
+        // display class (`flex`, `md:grid`…) overrides. !important always wins.
+        "data-[state=inactive]:!hidden"
+      ),
+      ...props
+    }
+  )
+);
+Content2.displayName = "Tabs.Content";
+var Tabs = { Root: Root2, List: List2, Trigger: Trigger2, Content: Content2 };
+
+export {
+  Tabs
+};

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";