@nexub/react 1.2.0 → 1.4.0

package/dist/{chunk-CVBAWKNG.js → chunk-IK23Q2OF.js}

@@ -1,7 +1,13 @@
 'use client';
+import {
+  field,
+  fieldDisabledWithin,
+  fieldFocusWithin,
+  fieldInvalid
+} from "./chunk-7SXR4PGO.js";
 import {
   cn
-} from "./chunk-AT6RPKU3.js";
+} from "./chunk-Q7G5WGYV.js";
 
 // src/components/Input/Input.tsx
 import * as React from "react";
@@ -16,15 +22,16 @@ var inputVariants = cva(
     "outline-none focus:outline-none focus-visible:outline-none",
     "ring-0 focus:ring-0 focus-visible:ring-0",
     "placeholder:text-[var(--color-text-placeholder)]",
-    "text-[var(--color-text-primary)]",
-    "disabled:opacity-50 disabled:cursor-not-allowed"
+    "text-[var(--color-on-surface)]",
+    "disabled:cursor-not-allowed disabled:text-[var(--color-text-disabled)]"
   ],
   {
     variants: {
+      // 16px from md up: readable, and iOS doesn't zoom on focus.
       size: {
-        sm: "text-sm",
-        md: "text-sm",
-        lg: "text-base"
+        sm: "text-body-sm",
+        md: "text-body-md",
+        lg: "text-body-md"
       }
     },
     defaultVariants: {
@@ -34,23 +41,21 @@ var inputVariants = cva(
 );
 var inputWrapperVariants = cva(
   [
-    "flex items-center w-full rounded-md border bg-[var(--color-bg-default)] transition-colors",
-    "border-[var(--color-border-input)]",
-    // On focus: the border shifts to the ring color and the ring is a
-    // semi-transparent halo. One hard 1 px border + one soft 2 px glow =
-    // a single clean focus indicator. No double ring.
-    "focus-within:outline-none focus-within:border-[var(--color-ring-default)] focus-within:ring-2 focus-within:ring-[color-mix(in_srgb,var(--color-ring-default)_25%,transparent)]",
-    "has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed"
+    // The wrapper is the field: one border that thickens to 2px primary on focus.
+    "flex items-center w-full",
+    field,
+    fieldFocusWithin,
+    fieldDisabledWithin
   ],
   {
     variants: {
       size: {
-        sm: "h-8 px-3 gap-1.5",
-        md: "h-9 px-3 gap-2",
-        lg: "h-10 px-4 gap-2"
+        sm: "h-control-sm px-3 gap-1.5",
+        md: "h-control-md px-3.5 gap-2",
+        lg: "h-control-lg px-4 gap-2"
       },
       invalid: {
-        true: "border-[var(--color-danger-500)] focus-within:border-[var(--color-danger-500)] focus-within:ring-[color-mix(in_srgb,var(--color-danger-500)_25%,transparent)]"
+        true: fieldInvalid
       }
     },
     defaultVariants: {
@@ -60,14 +65,14 @@ var inputWrapperVariants = cva(
 );
 var addonVariants = cva(
   [
-    "flex items-center self-stretch px-3 text-[var(--color-text-muted)] bg-[var(--color-bg-subtle)]",
-    "border-[var(--color-border-default)] shrink-0"
+    "flex items-center self-stretch px-3 text-[var(--color-on-surface-variant)] bg-[var(--color-surface-container-high)]",
+    "border-[var(--color-outline-variant)] shrink-0"
   ],
   {
     variants: {
       side: {
-        leading: "border-r rounded-l-md",
-        trailing: "border-l rounded-r-md"
+        leading: "border-r",
+        trailing: "border-l"
       }
     }
   }
@@ -97,20 +102,20 @@ var Input = React.forwardRef(
       }
     );
     if (hasAddon) {
-      return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full rounded-md overflow-hidden border border-[var(--color-border-input)]", invalid && "border-[var(--color-danger-500)]"), children: [
+      return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full overflow-hidden", field, fieldFocusWithin, invalid && fieldInvalid), children: [
         leadingAddon && /* @__PURE__ */ jsx("span", { className: cn(addonVariants({ side: "leading" })), children: leadingAddon }),
-        /* @__PURE__ */ jsxs("div", { className: cn(inputWrapperVariants({ size, invalid }), "rounded-none border-0 ring-offset-0", wrapperClassName), children: [
-          leadingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-text-muted)]", children: leadingIcon }),
+        /* @__PURE__ */ jsxs("div", { className: cn(inputWrapperVariants({ size, invalid }), "rounded-none border-0 shadow-none focus-within:shadow-none", wrapperClassName), children: [
+          leadingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-on-surface-variant)]", children: leadingIcon }),
           inputEl,
-          trailingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-text-muted)]", children: trailingIcon })
+          trailingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-on-surface-variant)]", children: trailingIcon })
         ] }),
         trailingAddon && /* @__PURE__ */ jsx("span", { className: cn(addonVariants({ side: "trailing" })), children: trailingAddon })
       ] });
     }
     return /* @__PURE__ */ jsxs("div", { className: cn(inputWrapperVariants({ size, invalid }), wrapperClassName), children: [
-      leadingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-text-muted)]", children: leadingIcon }),
+      leadingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-on-surface-variant)]", children: leadingIcon }),
       inputEl,
-      trailingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-text-muted)]", children: trailingIcon })
+      trailingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-on-surface-variant)]", children: trailingIcon })
     ] });
   }
 );

package/dist/{chunk-4OCXGNP3.js → chunk-J2T4GFFS.js}

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

package/dist/{chunk-BJKW3G2L.js → chunk-J6TU45KP.js}

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

package/dist/{chunk-ELC2NBGH.js → chunk-JSD3H7WV.js}

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

package/dist/{chunk-46CFSBEO.js → chunk-KA2J5OBA.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   cn
-} from "./chunk-AT6RPKU3.js";
+} from "./chunk-Q7G5WGYV.js";
 
 // src/components/Tooltip/Tooltip.tsx
 import * as React from "react";
@@ -18,7 +18,8 @@ var Content2 = React.forwardRef(
         ref,
         sideOffset,
         className: cn(
-          "z-[1500] rounded bg-[var(--color-neutral-900)] px-2 py-1 text-xs text-white",
+          "z-[var(--z-tooltip,1800)] rounded-shape-tooltip bg-[var(--color-inverse-surface)] px-2.5 py-1.5 text-label-md text-[var(--color-inverse-on-surface)] shadow-elevation-1",
+          "duration-effects-fast ease-effects-fast",
           "data-[state=delayed-open]:animate-in data-[state=closed]:animate-out",
           "data-[state=delayed-open]:fade-in-0 data-[state=closed]:fade-out-0",
           "data-[state=delayed-open]:zoom-in-95 data-[state=closed]:zoom-out-95",

package/dist/{chunk-OUBBOOZE.js → chunk-KM6Z3VTI.js}

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

package/dist/chunk-KQPLFVFR.js

@@ -0,0 +1,27 @@
+'use client';
+
+// src/utils/surface.ts
+var overlaySurface = "rounded-shape-overlay bg-[var(--color-surface-elevated)] text-[var(--color-on-surface)] shadow-elevation-3";
+var floatingSurface = "rounded-shape-container bg-[var(--color-surface-elevated)] text-[var(--color-on-surface)] shadow-elevation-2";
+var menuContent = "p-1.5";
+var menuItem = [
+  "relative flex cursor-default select-none items-center gap-2 rounded-[10px] px-2.5 py-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-[highlighted]:bg-[color-mix(in_srgb,var(--color-on-surface)_8%,transparent)]",
+  "data-[disabled]:pointer-events-none data-[disabled]:text-[var(--color-text-disabled)]"
+].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 {
+  overlaySurface,
+  floatingSurface,
+  menuContent,
+  menuItem,
+  menuSeparator,
+  menuLabel,
+  enterExit,
+  scrim
+};

package/dist/{chunk-DGJE5MX5.js → chunk-LDYD7WL3.js}

@@ -1,14 +1,14 @@
 'use client';
 import {
   cn
-} from "./chunk-AT6RPKU3.js";
+} from "./chunk-Q7G5WGYV.js";
 
 // src/components/Logo/Logo.tsx
 import * as React from "react";
 import { NexubMark } from "@nexub/icons";
 import { cva } from "class-variance-authority";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var logoVariants = cva("inline-flex items-center gap-2", {
+var logoVariants = cva("inline-flex min-w-0 max-w-full items-center gap-2", {
   variants: {
     size: {
       sm: "h-6",
@@ -70,7 +70,7 @@ var Logo = React.forwardRef(
             {
               className: cn(
                 wordmarkSizeMap[resolvedSize],
-                "font-semibold tracking-tight leading-none"
+                "shrink-0 font-semibold tracking-tight leading-none"
               ),
               children: "nexub"
             }
@@ -82,7 +82,8 @@ var Logo = React.forwardRef(
               {
                 className: cn(
                   wordmarkSizeMap[resolvedSize],
-                  "font-medium tracking-tight leading-none whitespace-nowrap",
+                  // leading-normal so the clip box doesn't cut descenders.
+                  "min-w-0 truncate font-medium tracking-tight leading-normal",
                   resolvedTone === "inverse" ? "opacity-70" : "text-[var(--color-text-muted)]"
                 ),
                 children: product

package/dist/{chunk-DOHXBNOP.js → chunk-LH3BSAIS.js}

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

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-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-QURKXXNS.js → chunk-NDCNVQ47.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   cn
-} from "./chunk-AT6RPKU3.js";
+} from "./chunk-Q7G5WGYV.js";
 
 // src/components/ButtonGroup/ButtonGroup.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
+};