@nexub/react 1.3.0 → 1.4.0

package/dist/{chunk-BYF223HT.js → chunk-2555JXCP.js}

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

package/dist/{chunk-6AZP6VBM.js → chunk-2FCSWBSM.js}

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

package/dist/{chunk-YJD66LTV.js → chunk-3AXIMXDU.js}

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

package/dist/{chunk-H4MXRAXP.js → chunk-3LP2CR7F.js}

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

package/dist/chunk-3TMIZQPR.js

@@ -0,0 +1,49 @@
+'use client';
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/Toggle/Toggle.tsx
+import * as React from "react";
+import * as RadixToggle from "@radix-ui/react-toggle";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var toggleVariants = cva(
+  [
+    // Pressable capsule; on = the secondary container (tonal selection).
+    "nx-state-layer nx-press relative inline-flex items-center justify-center gap-2 rounded-shape-control select-none",
+    "text-[var(--color-on-surface-variant)] transition-[background-color,color] duration-effects-fast ease-effects-fast",
+    "data-[state=on]:bg-[var(--color-secondary-container)] data-[state=on]:text-[var(--color-on-secondary-container)]",
+    "disabled:pointer-events-none disabled:text-[var(--color-text-disabled)]"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-[var(--color-outline-variant)] bg-transparent data-[state=on]:border-transparent"
+      },
+      size: {
+        sm: "h-control-sm px-3 text-label-md",
+        md: "h-control-md px-4 text-label-lg",
+        lg: "h-control-lg px-5 text-label-lg"
+      }
+    },
+    defaultVariants: { variant: "default", size: "md" }
+  }
+);
+var Toggle = React.forwardRef(
+  ({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixToggle.Root,
+    {
+      ref,
+      className: cn(toggleVariants({ variant, size }), className),
+      ...props
+    }
+  )
+);
+Toggle.displayName = "Toggle";
+
+export {
+  toggleVariants,
+  Toggle
+};

package/dist/chunk-47UGX37F.js

@@ -0,0 +1,21 @@
+'use client';
+
+// src/hooks/useClassScrollLock.ts
+import * as React from "react";
+var scrollLocks = 0;
+function useClassScrollLock() {
+  React.useEffect(() => {
+    const html = document.documentElement;
+    if (scrollLocks++ === 0) {
+      html.classList.toggle("nexub-scroll-gutter", window.innerWidth > html.clientWidth);
+      html.classList.add("nexub-scroll-lock");
+    }
+    return () => {
+      if (--scrollLocks === 0) html.classList.remove("nexub-scroll-lock", "nexub-scroll-gutter");
+    };
+  }, []);
+}
+
+export {
+  useClassScrollLock
+};

package/dist/{chunk-PANDAMD2.js → chunk-4I5ULCYG.js}

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

package/dist/{chunk-3U54QLYB.js → chunk-4SSUM4CL.js}

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

package/dist/{chunk-KZW37FQZ.js → chunk-56FERRWW.js}

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

package/dist/{chunk-YUNWZAAD.js → chunk-5URGARPH.js}

@@ -1,7 +1,11 @@
 'use client';
+import {
+  enterExit,
+  floatingSurface
+} from "./chunk-KQPLFVFR.js";
 import {
   cn
-} from "./chunk-AT6RPKU3.js";
+} from "./chunk-Q7G5WGYV.js";
 
 // src/components/HoverCard/HoverCard.tsx
 import * as React from "react";
@@ -17,8 +21,9 @@ var Content2 = React.forwardRef(
         ref,
         sideOffset,
         className: cn(
-          "z-[var(--z-popover)] w-64 rounded-lg border border-[var(--color-border-default)]",
-          "bg-[var(--color-bg-default)] p-4 shadow-md outline-none",
+          "z-[var(--z-popover)] w-64 p-4 outline-none",
+          floatingSurface,
+          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",

package/dist/{chunk-QF7GUDOE.js → chunk-63DPMUMR.js}

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

package/dist/{chunk-BMVAZIAJ.js → chunk-6J3QTWKC.js}

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

package/dist/{chunk-2RLSIOGB.js → chunk-6QLLH6ID.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/ContextMenu/ContextMenu.tsx
 import * as React from "react";
@@ -21,8 +29,10 @@ var Content2 = React.forwardRef(
       {
         ref,
         className: 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",
@@ -35,9 +45,7 @@ var Content2 = React.forwardRef(
 );
 Content2.displayName = "ContextMenu.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 ContextMenuItem({ className, ...props }, ref) {
@@ -59,7 +67,7 @@ var Label2 = React.forwardRef(
       {
         ref,
         className: cn(
-          "px-2 py-1 text-xs font-semibold text-[var(--color-text-muted)]",
+          menuLabel,
           className
         ),
         ...props
@@ -74,7 +82,7 @@ var Separator2 = React.forwardRef(
       RadixContextMenu.Separator,
       {
         ref,
-        className: cn("-mx-1 my-1 h-px bg-[var(--color-border-default)]", className),
+        className: cn(menuSeparator, className),
         ...props
       }
     );
@@ -119,7 +127,7 @@ var SubTrigger2 = React.forwardRef(function ContextMenuSubTrigger({ className, c
       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,
@@ -137,8 +145,10 @@ var SubContent2 = React.forwardRef(function ContextMenuSubContent({ className, .
     {
       ref,
       className: 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",

package/dist/{chunk-KWWV3CM3.js → chunk-6RBNM5RO.js}

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

package/dist/{chunk-WPPNDU2E.js → chunk-6SJPVQQW.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   cn
-} from "./chunk-AT6RPKU3.js";
+} from "./chunk-Q7G5WGYV.js";
 
 // src/components/RadioGroup/RadioGroup.tsx
 import * as React from "react";
@@ -17,14 +17,15 @@ var Item2 = React.forwardRef(
     {
       ref,
       className: cn(
-        "aspect-square h-4 w-4 rounded-full border border-[var(--color-border-input)]",
-        "text-[var(--color-brand-primary-500)]",
-        "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:cursor-not-allowed disabled:opacity-50",
+        // 18px, 2px outline border (>= 3:1), primary ring + dot when on. Focus = the global ring.
+        "aspect-square h-[18px] w-[18px] shrink-0 rounded-full border-2 border-[var(--color-outline)]",
+        "transition-[border-color] duration-effects-fast ease-effects-fast",
+        "hover:border-[var(--color-on-surface)] data-[state=checked]:border-[var(--color-primary)]",
+        "disabled:cursor-not-allowed disabled:border-[var(--color-text-disabled)]",
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx(RadixRadioGroup.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "block h-2 w-2 rounded-full bg-[var(--color-brand-primary-500)]" }) })
+      children: /* @__PURE__ */ jsx(RadixRadioGroup.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "block h-2 w-2 rounded-full bg-[var(--color-primary)] [[data-disabled]_&]:bg-[var(--color-text-disabled)]" }) })
     }
   )
 );

package/dist/{chunk-NAIZ7R2L.js → chunk-72I7EVOL.js}

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

package/dist/{chunk-UWWL5FPC.js → chunk-7Q7ZF6BY.js}

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

package/dist/chunk-7SXR4PGO.js

@@ -0,0 +1,31 @@
+'use client';
+
+// src/utils/control.ts
+var field = [
+  "rounded-shape-field border border-[var(--color-border-input)]",
+  "bg-[var(--color-surface-container-lowest)] text-[var(--color-on-surface)]",
+  "transition-[border-color,box-shadow] duration-effects-fast ease-effects-fast",
+  "hover:border-[var(--color-on-surface-variant)]"
+].join(" ");
+var fieldFocusWithin = "focus-within:border-[var(--color-primary)] focus-within:shadow-[inset_0_0_0_1px_var(--color-primary)] focus-within:hover:border-[var(--color-primary)]";
+var fieldFocusVisible = "focus-visible:outline-none focus-visible:border-[var(--color-primary)] focus-visible:shadow-[inset_0_0_0_1px_var(--color-primary)]";
+var fieldInvalid = [
+  "border-[var(--color-error)] hover:border-[var(--color-error)]",
+  "focus-within:border-[var(--color-error)] focus-within:shadow-[inset_0_0_0_1px_var(--color-error)] focus-within:hover:border-[var(--color-error)]",
+  "focus-visible:border-[var(--color-error)] focus-visible:shadow-[inset_0_0_0_1px_var(--color-error)]"
+].join(" ");
+var fieldDisabledWithin = "has-[:disabled]:cursor-not-allowed has-[:disabled]:border-[var(--color-outline-variant)] has-[:disabled]:hover:border-[var(--color-outline-variant)] has-[:disabled]:bg-[var(--color-surface-container-low)] has-[:disabled]:text-[var(--color-text-disabled)]";
+var pressable = "nx-state-layer nx-press rounded-shape-control select-none";
+var disabledContainer = "disabled:pointer-events-none disabled:border-transparent disabled:bg-[color-mix(in_srgb,var(--color-on-surface)_12%,transparent)] disabled:text-[var(--color-text-disabled)] aria-disabled:pointer-events-none";
+var disabledText = "disabled:pointer-events-none disabled:text-[var(--color-text-disabled)] aria-disabled:pointer-events-none";
+
+export {
+  field,
+  fieldFocusWithin,
+  fieldFocusVisible,
+  fieldInvalid,
+  fieldDisabledWithin,
+  pressable,
+  disabledContainer,
+  disabledText
+};

package/dist/{chunk-W4IEXUD4.js → chunk-7ZWBHHRK.js}

@@ -1,7 +1,12 @@
 'use client';
+import {
+  field,
+  fieldFocusVisible,
+  fieldInvalid
+} from "./chunk-7SXR4PGO.js";
 import {
   cn
-} from "./chunk-AT6RPKU3.js";
+} from "./chunk-Q7G5WGYV.js";
 
 // src/components/Textarea/Textarea.tsx
 import * as React from "react";
@@ -9,23 +14,21 @@ import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
 var textareaVariants = cva(
   [
-    "w-full rounded-md border bg-[var(--color-bg-default)] text-[var(--color-text-primary)]",
+    "w-full",
+    field,
     "placeholder:text-[var(--color-text-placeholder)]",
-    "border-[var(--color-border-input)] transition-colors",
-    // Border shifts to ring color on focus; ring is a semi-transparent halo.
-    // One hard 1 px border + one soft 2 px glow = single clean focus indicator.
-    "focus-visible:outline-none focus-visible:border-[var(--color-ring-default)] focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--color-ring-default)_25%,transparent)]",
-    "disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed"
+    fieldFocusVisible,
+    "disabled:cursor-not-allowed disabled:border-[var(--color-outline-variant)] disabled:bg-[var(--color-surface-container-low)] disabled:text-[var(--color-text-disabled)]"
   ],
   {
     variants: {
       size: {
-        sm: "px-3 py-1.5 text-sm min-h-[64px]",
-        md: "px-3 py-2 text-sm min-h-[80px]",
-        lg: "px-4 py-2.5 text-base min-h-[96px]"
+        sm: "px-3 py-1.5 text-body-sm min-h-[64px]",
+        md: "px-3.5 py-2 text-body-md min-h-[80px]",
+        lg: "px-4 py-2.5 text-body-md min-h-[96px]"
       },
       invalid: {
-        true: "border-[var(--color-danger-500)] focus-visible:border-[var(--color-danger-500)] focus-visible:ring-[color-mix(in_srgb,var(--color-danger-500)_25%,transparent)]"
+        true: fieldInvalid
       },
       resize: {
         none: "resize-none",

package/dist/{chunk-PER3O4FD.js → chunk-A4IMFAZX.js}

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

package/dist/{chunk-E3QPDCEV.js → chunk-AEBYQKLS.js}

@@ -6,6 +6,7 @@ import {
 // src/components/ThemeProvider/ThemeProvider.tsx
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
+var GLASS_MODES = ["clear", "balanced", "tinted", "off"];
 var ThemeContext = React.createContext(void 0);
 ThemeContext.displayName = "ThemeContext";
 var DARK_QUERY = "(prefers-color-scheme: dark)";
@@ -26,6 +27,15 @@ function readStorage(key, fallback) {
   }
   return fallback;
 }
+function readGlass(key, fallback) {
+  if (typeof window === "undefined") return fallback;
+  try {
+    const stored = window.localStorage.getItem(key);
+    if (stored && GLASS_MODES.includes(stored)) return stored;
+  } catch {
+  }
+  return fallback;
+}
 function writeStorage(key, value) {
   if (typeof window === "undefined") return;
   try {
@@ -36,10 +46,13 @@ function writeStorage(key, value) {
 function ThemeProvider({
   children,
   defaultTheme = "system",
-  storageKey = "nexub-theme"
+  storageKey = "nexub-theme",
+  defaultGlass = "balanced",
+  glassStorageKey = "nexub-glass"
 }) {
   const [theme, setThemeState] = React.useState(defaultTheme);
   const [systemTheme, setSystemTheme] = React.useState("light");
+  const [glass, setGlassState] = React.useState(defaultGlass);
   useIsomorphicLayoutEffect(() => {
     setThemeState(readStorage(storageKey, defaultTheme));
   }, [storageKey, defaultTheme]);
@@ -53,6 +66,12 @@ function ThemeProvider({
   useIsomorphicLayoutEffect(() => {
     applyTheme(theme);
   }, [theme]);
+  useIsomorphicLayoutEffect(() => {
+    setGlassState(readGlass(glassStorageKey, defaultGlass));
+  }, [glassStorageKey, defaultGlass]);
+  useIsomorphicLayoutEffect(() => {
+    document.documentElement.setAttribute("data-glass", glass);
+  }, [glass]);
   const resolvedTheme = theme === "system" ? systemTheme : theme;
   const setTheme = React.useCallback(
     (mode) => {
@@ -61,9 +80,16 @@ function ThemeProvider({
     },
     [storageKey]
   );
+  const setGlass = React.useCallback(
+    (mode) => {
+      writeStorage(glassStorageKey, mode);
+      setGlassState(mode);
+    },
+    [glassStorageKey]
+  );
   const value = React.useMemo(
-    () => ({ theme, resolvedTheme, setTheme }),
-    [theme, resolvedTheme, setTheme]
+    () => ({ theme, resolvedTheme, setTheme, glass, setGlass }),
+    [theme, resolvedTheme, setTheme, glass, setGlass]
   );
   return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
 }
@@ -75,17 +101,18 @@ function useTheme() {
   return ctx;
 }
 var jsString = (s) => JSON.stringify(s).replace(/</g, "\\u003c");
-function themeScriptSource(storageKey, productStorageKey) {
+function themeScriptSource(storageKey, productStorageKey, glassStorageKey = "nexub-glass") {
   const product = productStorageKey ? `var b=localStorage.getItem(${jsString(productStorageKey)});if(b&&b!=='base')d.setAttribute('data-product',b);` : "";
-  return `try{var d=document.documentElement,t=localStorage.getItem(${jsString(storageKey)});if(t==='light'||t==='dark')d.setAttribute('data-theme',t);${product}}catch(e){}`;
+  const glass = `var g=localStorage.getItem(${jsString(glassStorageKey)});if(${JSON.stringify(GLASS_MODES)}.indexOf(g)>-1)d.setAttribute('data-glass',g);`;
+  return `try{var d=document.documentElement,t=localStorage.getItem(${jsString(storageKey)});if(t==='light'||t==='dark')d.setAttribute('data-theme',t);${product}${glass}}catch(e){}`;
 }
-function ThemeScript({ storageKey = "nexub-theme", productStorageKey, nonce }) {
+function ThemeScript({ storageKey = "nexub-theme", productStorageKey, glassStorageKey, nonce }) {
   return /* @__PURE__ */ jsx(
     "script",
     {
       nonce,
       suppressHydrationWarning: true,
-      dangerouslySetInnerHTML: { __html: themeScriptSource(storageKey, productStorageKey) }
+      dangerouslySetInnerHTML: { __html: themeScriptSource(storageKey, productStorageKey, glassStorageKey) }
     }
   );
 }

package/dist/chunk-AHT35UWY.js

@@ -0,0 +1,92 @@
+'use client';
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/Chip/Chip.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var chipVariants = cva(
+  "inline-flex items-center gap-1 rounded-shape-control select-none",
+  {
+    variants: {
+      size: {
+        sm: "h-6 px-2.5 text-label-md",
+        md: "h-8 px-3 text-label-lg"
+      },
+      // Containers + on-container text (WCAG AA by construction).
+      tone: {
+        neutral: "bg-[var(--color-surface-container-low)] text-[var(--color-on-surface-variant)] border border-[var(--color-outline-variant)]",
+        info: "bg-[var(--color-info-container)] text-[var(--color-on-info-container)]",
+        success: "bg-[var(--color-success-container)] text-[var(--color-on-success-container)]",
+        warning: "bg-[var(--color-warning-container)] text-[var(--color-on-warning-container)]",
+        danger: "bg-[var(--color-error-container)] text-[var(--color-on-error-container)]",
+        leap: "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))]",
+        bookub: "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))]",
+        payub: "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))]",
+        founderub: "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))]"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      tone: "neutral"
+    }
+  }
+);
+var Chip = React.forwardRef(
+  ({ className, size, tone = "neutral", onRemove, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: cn(chipVariants({ size, tone }), className),
+        ...props,
+        children: [
+          children,
+          onRemove && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Remove",
+              onClick: (e) => {
+                e.stopPropagation();
+                onRemove();
+              },
+              className: cn(
+                // State layer for hover/press; focus = the global ring.
+                "nx-state-layer inline-flex items-center justify-center rounded-full text-current -mr-1",
+                size === "sm" ? "w-4 h-4" : "w-5 h-5"
+              ),
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  width: "8",
+                  height: "8",
+                  viewBox: "0 0 8 8",
+                  fill: "none",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M7 1L1 7M1 1l6 6",
+                      stroke: "currentColor",
+                      strokeWidth: "1.5",
+                      strokeLinecap: "round"
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Chip.displayName = "Chip";
+
+export {
+  chipVariants,
+  Chip
+};