@nexub/react 1.2.0 → 1.4.0

package/dist/chunk-B54WADL4.js

@@ -0,0 +1,103 @@
+'use client';
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/Badge/Badge.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var badgeVariants = cva(
+  [
+    "inline-flex items-center gap-1 rounded-shape-control whitespace-nowrap select-none"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-5 px-2 text-label-sm",
+        md: "h-6 px-2.5 text-label-md",
+        lg: "h-7 px-3 text-label-lg"
+      },
+      variant: {
+        solid: "",
+        soft: "",
+        outline: "bg-transparent border"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "solid"
+    }
+  }
+);
+var toneClasses = {
+  neutral: {
+    solid: "bg-[var(--color-inverse-surface)] text-[var(--color-inverse-on-surface)]",
+    soft: "bg-[var(--color-surface-container-high)] text-[var(--color-on-surface-variant)]",
+    outline: "border-[var(--color-outline-variant)] text-[var(--color-on-surface-variant)]"
+  },
+  info: {
+    solid: "bg-[var(--color-info)] text-[var(--color-on-info)]",
+    soft: "bg-[var(--color-info-container)] text-[var(--color-on-info-container)]",
+    outline: "border-[color-mix(in_srgb,var(--color-info)_50%,transparent)] text-[var(--color-info)]"
+  },
+  success: {
+    solid: "bg-[var(--color-success)] text-[var(--color-on-success)]",
+    soft: "bg-[var(--color-success-container)] text-[var(--color-on-success-container)]",
+    outline: "border-[color-mix(in_srgb,var(--color-success)_50%,transparent)] text-[var(--color-success)]"
+  },
+  warning: {
+    solid: "bg-[var(--color-warning)] text-[var(--color-on-warning)]",
+    soft: "bg-[var(--color-warning-container)] text-[var(--color-on-warning-container)]",
+    outline: "border-[color-mix(in_srgb,var(--color-warning)_50%,transparent)] text-[var(--color-warning)]"
+  },
+  danger: {
+    solid: "bg-[var(--color-error)] text-[var(--color-on-error)]",
+    soft: "bg-[var(--color-error-container)] text-[var(--color-on-error-container)]",
+    outline: "border-[color-mix(in_srgb,var(--color-error)_50%,transparent)] text-[var(--color-error)]"
+  },
+  leap: {
+    solid: "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))]",
+    soft: "bg-[color:light-dark(var(--color-palette-leap-90),var(--color-palette-leap-30))] text-[color:light-dark(var(--color-palette-leap-10),var(--color-palette-leap-90))]",
+    outline: "border-[color:light-dark(var(--color-palette-leap-80),var(--color-palette-leap-40))] text-[color:light-dark(var(--color-palette-leap-40),var(--color-palette-leap-80))]"
+  },
+  bookub: {
+    solid: "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))]",
+    soft: "bg-[color:light-dark(var(--color-palette-bookub-90),var(--color-palette-bookub-30))] text-[color:light-dark(var(--color-palette-bookub-10),var(--color-palette-bookub-90))]",
+    outline: "border-[color:light-dark(var(--color-palette-bookub-80),var(--color-palette-bookub-40))] text-[color:light-dark(var(--color-palette-bookub-40),var(--color-palette-bookub-80))]"
+  },
+  payub: {
+    solid: "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))]",
+    soft: "bg-[color:light-dark(var(--color-palette-payub-90),var(--color-palette-payub-30))] text-[color:light-dark(var(--color-palette-payub-10),var(--color-palette-payub-90))]",
+    outline: "border-[color:light-dark(var(--color-palette-payub-80),var(--color-palette-payub-40))] text-[color:light-dark(var(--color-palette-payub-40),var(--color-palette-payub-80))]"
+  },
+  founderub: {
+    solid: "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))]",
+    soft: "bg-[color:light-dark(var(--color-palette-founderub-90),var(--color-palette-founderub-30))] text-[color:light-dark(var(--color-palette-founderub-10),var(--color-palette-founderub-90))]",
+    outline: "border-[color:light-dark(var(--color-palette-founderub-80),var(--color-palette-founderub-40))] text-[color:light-dark(var(--color-palette-founderub-40),var(--color-palette-founderub-80))]"
+  }
+};
+var Badge = React.forwardRef(
+  ({ className, size, variant = "solid", tone = "neutral", leadingIcon, children, ...props }, ref) => {
+    const resolvedVariant = variant ?? "solid";
+    const toneStyle = toneClasses[tone][resolvedVariant];
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: cn(badgeVariants({ size, variant: resolvedVariant }), toneStyle, className),
+        ...props,
+        children: [
+          leadingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 inline-flex items-center", children: leadingIcon }),
+          children
+        ]
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+
+export {
+  badgeVariants,
+  Badge
+};

package/dist/{chunk-4NGB7XIM.js → chunk-BFRX6X4O.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   cn
-} from "./chunk-AT6RPKU3.js";
+} from "./chunk-Q7G5WGYV.js";
 
 // src/components/Sidebar/Sidebar.tsx
 import * as React from "react";
@@ -15,7 +15,8 @@ var Root = React.forwardRef(
       "aria-label": "Sidebar",
       "data-collapsed": collapsed,
       className: cn(
-        "group/sidebar flex flex-col gap-1 bg-[var(--color-bg-default)] border-r border-[var(--color-border-default)] transition-all duration-200",
+        // Chrome recedes: a tonal panel, no divider.
+        "group/sidebar flex flex-col gap-1 bg-[var(--color-surface-container-low)] transition-[width] duration-spatial-default ease-spatial-default",
         collapsed ? "w-[var(--size-nav-sidebar-collapsed,56px)]" : "w-[var(--size-nav-sidebar,240px)]",
         "h-full overflow-y-auto overflow-x-hidden",
         className
@@ -25,6 +26,26 @@ var Root = React.forwardRef(
   )
 );
 Root.displayName = "Sidebar.Root";
+var Header = React.forwardRef(
+  ({ className, status, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        // Wraps instead of overlapping: the status drops to its own line when
+        // the logo needs the width, and a logo wider than the sidebar truncates.
+        "flex shrink-0 flex-wrap items-center justify-between gap-x-3 gap-y-2 border-b border-[var(--color-outline-variant)] px-3 py-3 group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:px-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 max-w-full items-center", children }),
+        status && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center group-data-[collapsed=true]/sidebar:sr-only", children: status })
+      ]
+    }
+  )
+);
+Header.displayName = "Sidebar.Header";
 var Group = React.forwardRef(
   ({ className, label, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-0.5 p-2", className), ...props, children: [
     label && /* @__PURE__ */ jsx("p", { className: "px-2 py-1 text-xs font-semibold uppercase tracking-wider text-[var(--color-text-muted)]", children: label }),
@@ -46,8 +67,9 @@ var Item = React.forwardRef(
       // Native tooltip for the icon-only collapsed state.
       title: typeof label === "string" ? label : void 0,
       className: cn(
-        "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
-        active ? "bg-[var(--color-fill-primary)] text-white" : "text-[var(--color-text-primary)] hover:bg-[var(--color-bg-subtle)]",
+        // Active = the secondary-container pill (M3 nav indicator), not a solid brand fill.
+        "nx-state-layer relative flex h-control-md items-center gap-3 rounded-shape-control px-3 text-label-lg",
+        active ? "bg-[var(--color-secondary-container)] text-[var(--color-on-secondary-container)]" : "text-[var(--color-on-surface-variant)]",
         className
       ),
       ...props
@@ -61,7 +83,7 @@ var Separator = React.forwardRef(
     "hr",
     {
       ref,
-      className: cn("my-2 border-[var(--color-border-default)]", className),
+      className: cn("my-2 border-[var(--color-outline-variant)]", className),
       ...props
     }
   )
@@ -73,7 +95,7 @@ var Footer = React.forwardRef(
     {
       ref,
       className: cn(
-        "mt-auto border-t border-[var(--color-border-default)] p-4",
+        "mt-auto border-t border-[var(--color-outline-variant)] p-4",
         className
       ),
       ...props
@@ -81,7 +103,7 @@ var Footer = React.forwardRef(
   )
 );
 Footer.displayName = "Sidebar.Footer";
-var Sidebar = { Root, Group, Item, Separator, Footer };
+var Sidebar = { Root, Header, Group, Item, Separator, Footer };
 
 export {
   Sidebar

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

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

package/dist/{chunk-TCTFQYLH.js → chunk-CHGPGRML.js}

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

package/dist/{chunk-U3AEA4BZ.js → chunk-CNNJFWFA.js}

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

package/dist/chunk-CWS37T3K.js

@@ -0,0 +1,80 @@
+'use client';
+import {
+  useMergedRefs,
+  useSlidingIndicator
+} from "./chunk-YRDCY6BI.js";
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/SegmentedControl/SegmentedControl.tsx
+import * as React from "react";
+import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
+import { jsx, jsxs } from "react/jsx-runtime";
+var sizeMap = {
+  sm: "h-control-sm text-label-md",
+  md: "h-control-md text-label-lg",
+  lg: "h-control-lg text-label-lg"
+};
+var SegmentedControlContext = React.createContext({ size: "md" });
+var Root2 = React.forwardRef(
+  ({ className, size = "md", children, ...props }, forwardedRef) => {
+    const ref = React.useRef(null);
+    useSlidingIndicator(ref, '[data-state="on"]');
+    return /* @__PURE__ */ jsx(SegmentedControlContext.Provider, { value: { size }, children: /* @__PURE__ */ jsxs(
+      RadixToggleGroup.Root,
+      {
+        ref: useMergedRefs(ref, forwardedRef),
+        type: "single",
+        className: cn(
+          "relative inline-flex items-stretch rounded-shape-control bg-[var(--color-surface-container-high)] p-0.5",
+          sizeMap[size],
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "pointer-events-none absolute inset-y-0.5 left-0 rounded-shape-control",
+                "bg-[var(--color-surface-container-lowest)] shadow-elevation-1",
+                "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"
+              )
+            }
+          ),
+          children
+        ]
+      }
+    ) });
+  }
+);
+Root2.displayName = "SegmentedControl.Root";
+var Item2 = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { size } = React.useContext(SegmentedControlContext);
+    return /* @__PURE__ */ jsx(
+      RadixToggleGroup.Item,
+      {
+        ref,
+        className: cn(
+          "relative z-10 inline-flex items-center justify-center rounded-shape-control select-none",
+          size === "sm" ? "px-3" : size === "lg" ? "px-5" : "px-4",
+          "text-[var(--color-on-surface-variant)] transition-colors duration-effects-fast ease-effects-fast",
+          "hover:text-[var(--color-on-surface)] data-[state=on]:text-[var(--color-on-surface)]",
+          "disabled:pointer-events-none disabled:text-[var(--color-text-disabled)]",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Item2.displayName = "SegmentedControl.Item";
+var SegmentedControl = { Root: Root2, Item: Item2 };
+
+export {
+  SegmentedControl
+};

package/dist/chunk-DEIBF3P7.js

@@ -0,0 +1,8 @@
+'use client';
+
+// src/utils/glass.ts
+var glassSurfaceClass = "border bg-[var(--glass-bg)] border-[var(--glass-border)] [-webkit-backdrop-filter:var(--glass-filter)] [backdrop-filter:var(--glass-filter)] [box-shadow:var(--glass-shadow)]";
+
+export {
+  glassSurfaceClass
+};

package/dist/{chunk-RIDDJUPA.js → chunk-DJZZ3FIP.js}

@@ -1,10 +1,15 @@
 'use client';
+import {
+  enterExit,
+  overlaySurface,
+  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/Dialog/Dialog.tsx
 import * as React from "react";
@@ -21,7 +26,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
@@ -47,7 +54,8 @@ var Content2 = React.forwardRef(
         ref,
         className: cn(
           "fixed left-1/2 top-1/2 z-[var(--z-modal)] w-[calc(100%-2rem)] -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,
           "max-h-[90vh] overflow-y-auto 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",
@@ -59,6 +67,7 @@ var Content2 = React.forwardRef(
           className
         ),
         "data-material": surface === "glass" ? "glass" : void 0,
+        "data-glass-thickness": surface === "glass" ? "thick" : void 0,
         ...props,
         children
       }

package/dist/{chunk-K7CUCLLI.js → chunk-DYWJ7BIK.js}

@@ -1,10 +1,10 @@
 'use client';
 import {
   toggleVariants
-} from "./chunk-U3EGB3JL.js";
+} from "./chunk-3TMIZQPR.js";
 import {
   cn
-} from "./chunk-AT6RPKU3.js";
+} from "./chunk-Q7G5WGYV.js";
 
 // src/components/ToggleGroup/ToggleGroup.tsx
 import * as React from "react";

package/dist/{chunk-6Y734SXN.js → chunk-E4JM3HUM.js}

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

package/dist/{chunk-POFKKYHY.js → chunk-EQNETGTV.js}

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

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

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

package/dist/{chunk-LOP63AVE.js → chunk-FD7YU53N.js}

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

package/dist/{chunk-CPV367VS.js → chunk-FHFVBOF3.js}

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

package/dist/chunk-GHCV6UXG.js

@@ -0,0 +1,57 @@
+'use client';
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/Switch/Switch.tsx
+import * as React from "react";
+import * as RadixSwitch from "@radix-ui/react-switch";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var switchVariants = cva(
+  // Off: tonal track with a 2px outline (>= 3:1, WCAG 1.4.11). On: primary.
+  // Focus = the global ring (it follows the capsule).
+  [
+    "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2",
+    "transition-[background-color,border-color] duration-effects-fast ease-effects-fast",
+    "data-[state=unchecked]:bg-[var(--color-surface-container-highest)] data-[state=unchecked]:border-[var(--color-outline)]",
+    "data-[state=checked]:bg-[var(--color-primary)] data-[state=checked]:border-[var(--color-primary)]",
+    "disabled:cursor-not-allowed disabled:border-[var(--color-text-disabled)] disabled:bg-[color-mix(in_srgb,var(--color-on-surface)_12%,transparent)] disabled:data-[state=checked]:bg-[var(--color-text-disabled)] disabled:data-[state=checked]:border-transparent disabled:data-[state=unchecked]:border-[var(--color-outline-variant)]"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-5 w-9",
+        md: "h-7 w-12",
+        lg: "h-8 w-14"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var thumbVariants = cva(
+  // The thumb slides on the expressive spring (a toggle is a key moment).
+  [
+    "pointer-events-none block rounded-full shadow-elevation-1",
+    "transition-[transform,background-color] duration-expressive-fast ease-expressive-fast",
+    "translate-x-0.5 data-[state=unchecked]:bg-[var(--color-outline)] data-[state=checked]:bg-[var(--color-on-primary)] data-[disabled]:data-[state=unchecked]:bg-[var(--color-outline-variant)]"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-3 w-3 data-[state=checked]:translate-x-[18px]",
+        md: "h-5 w-5 data-[state=checked]:translate-x-[22px]",
+        lg: "h-6 w-6 data-[state=checked]:translate-x-[26px]"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var Switch = React.forwardRef(
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(RadixSwitch.Root, { ref, className: cn(switchVariants({ size }), className), ...props, children: /* @__PURE__ */ jsx(RadixSwitch.Thumb, { className: cn(thumbVariants({ size })) }) })
+);
+Switch.displayName = "Switch";
+
+export {
+  Switch
+};

package/dist/{chunk-UALYS4XI.js → chunk-GIGOTRXX.js}

@@ -1,10 +1,14 @@
 'use client';
+import {
+  enterExit,
+  floatingSurface
+} 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/Popover/Popover.tsx
 import * as React from "react";
@@ -22,8 +26,9 @@ var Content2 = React.forwardRef(
         ref,
         sideOffset,
         className: cn(
-          "z-[var(--z-popover)] rounded-lg border border-[var(--color-border-default)]",
-          "bg-[var(--color-bg-default)] p-4 shadow-md",
+          "z-[var(--z-popover)] p-4 outline-none",
+          floatingSurface,
+          enterExit,
           "outline-none",
           "data-[state=open]:animate-in data-[state=closed]:animate-out",
           "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",

package/dist/{chunk-BTZW34TX.js → chunk-GRB6T2TT.js}

@@ -1,26 +1,27 @@
 'use client';
 import {
   glassSurfaceClass
-} from "./chunk-ROZVVWPV.js";
+} from "./chunk-DEIBF3P7.js";
 import {
   cn
-} from "./chunk-AT6RPKU3.js";
+} from "./chunk-Q7G5WGYV.js";
 
 // src/components/TopNav/TopNav.tsx
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { jsx } from "react/jsx-runtime";
 var Root = React.forwardRef(
-  ({ className, children, surface = "solid", ...props }, ref) => /* @__PURE__ */ jsx(
+  ({ className, children, surface = "solid", scrollEdge, ...props }, ref) => /* @__PURE__ */ jsx(
     "header",
     {
       ref,
       className: cn(
-        "sticky top-0 z-[var(--z-sticky,100)] flex h-[var(--size-nav-header,64px)] items-center border-b border-[var(--color-border-default)] bg-[var(--color-bg-default)] px-4",
+        "sticky top-0 z-[var(--z-sticky,100)] flex h-[var(--size-nav-header,64px)] items-center border-b border-[var(--color-outline-variant)] bg-[var(--color-surface)] px-4",
         surface === "glass" && glassSurfaceClass,
         className
       ),
       "data-material": surface === "glass" ? "glass" : void 0,
+      "data-scroll-edge": scrollEdge,
       ...props,
       children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center gap-4", children })
     }
@@ -55,8 +56,8 @@ var Item = React.forwardRef(
         ref,
         "aria-current": active ? "page" : void 0,
         className: cn(
-          "inline-flex h-9 shrink-0 items-center rounded-md px-4 text-sm font-medium transition-colors",
-          active ? "bg-[var(--color-bg-subtle)] text-[var(--color-text-primary)]" : "text-[var(--color-text-muted)] hover:bg-[var(--color-bg-subtle)] hover:text-[var(--color-text-primary)]",
+          "nx-state-layer relative inline-flex h-control-sm shrink-0 items-center rounded-shape-control px-3.5 text-label-lg",
+          active ? "bg-[var(--color-secondary-container)] text-[var(--color-on-secondary-container)]" : "text-[var(--color-on-surface-variant)]",
           className
         ),
         ...props

package/dist/chunk-GUB7YKG2.js

@@ -0,0 +1,35 @@
+'use client';
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/Checkbox/Checkbox.tsx
+import * as React from "react";
+import * as RadixCheckbox from "@radix-ui/react-checkbox";
+import { Check, Minus } from "@nexub/icons";
+import { jsx } from "react/jsx-runtime";
+var Checkbox = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixCheckbox.Root,
+    {
+      ref,
+      className: cn(
+        // 18px, 2px outline border (>= 3:1), primary when on. Focus = the global ring.
+        "peer h-[18px] w-[18px] shrink-0 rounded-[5px] border-2 border-[var(--color-outline)]",
+        "transition-[background-color,border-color] duration-effects-fast ease-effects-fast",
+        "hover:border-[var(--color-on-surface)]",
+        "data-[state=checked]:bg-[var(--color-primary)] data-[state=checked]:border-[var(--color-primary)] data-[state=checked]:text-[var(--color-on-primary)]",
+        "data-[state=indeterminate]:bg-[var(--color-primary)] data-[state=indeterminate]:border-[var(--color-primary)] data-[state=indeterminate]:text-[var(--color-on-primary)]",
+        "disabled:cursor-not-allowed disabled:border-[var(--color-text-disabled)] disabled:data-[state=checked]:bg-[var(--color-text-disabled)] disabled:data-[state=indeterminate]:bg-[var(--color-text-disabled)] disabled:text-[var(--color-surface)]",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(RadixCheckbox.Indicator, { className: "flex items-center justify-center", children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { size: "xs" }) : /* @__PURE__ */ jsx(Check, { size: "xs" }) })
+    }
+  )
+);
+Checkbox.displayName = "Checkbox";
+
+export {
+  Checkbox
+};

package/dist/{chunk-POBSY7EZ.js → chunk-H2W7IYVY.js}

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

package/dist/{chunk-I5Z3A7N3.js → chunk-HG6HTUWU.js}

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

package/dist/{chunk-DEH2Z27F.js → chunk-HJERFB7J.js}

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

package/dist/{chunk-FUJOSPNQ.js → chunk-I4URNMI7.js}

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

package/dist/{chunk-24CZFBTG.js → chunk-IIPYF6ZQ.js}

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