@nexub/react 1.3.0 → 1.5.0

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

package/dist/chunk-AXOKFS4K.js

@@ -0,0 +1,48 @@
+'use client';
+import {
+  moneyFormatter
+} from "./chunk-CIQHFMF6.js";
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/Amount/Amount.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var sizes = {
+  sm: "text-body-sm",
+  md: "text-body-md",
+  lg: "text-title-lg",
+  display: "font-display text-display-sm"
+};
+var Amount = React.forwardRef(
+  ({ value, currency, locale, size = "md", tone = "neutral", signDisplay, className, ...props }, ref) => {
+    const parts = moneyFormatter(currency, locale, { signDisplay }).formatToParts(value);
+    const quiet = size === "display";
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "data-value": value,
+        className: cn(
+          "whitespace-nowrap tabular-nums",
+          sizes[size],
+          tone === "auto" && value > 0 && "text-[var(--color-success)]",
+          tone === "auto" && value < 0 && "text-[var(--color-error)]",
+          className
+        ),
+        ...props,
+        children: parts.map((p, i) => {
+          const text = p.type === "minusSign" ? "\u2212" : p.value;
+          const muted = quiet && (p.type === "currency" || p.type === "decimal" || p.type === "fraction");
+          return muted ? /* @__PURE__ */ jsx("span", { className: "text-[0.55em] font-semibold text-[var(--color-on-surface-variant)]", children: text }, i) : /* @__PURE__ */ jsx(React.Fragment, { children: text }, i);
+        })
+      }
+    );
+  }
+);
+Amount.displayName = "Amount";
+
+export {
+  Amount
+};

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-CMYEVLQT.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
@@ -33,7 +34,7 @@ var Header = React.forwardRef(
       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-border-default)] px-3 py-3 group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:px-2",
+        "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,
@@ -66,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
@@ -81,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
     }
   )
@@ -93,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

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-CIQHFMF6.js

@@ -0,0 +1,44 @@
+'use client';
+
+// src/utils/money.ts
+function moneyFormatter(currency, locale, options = {}) {
+  return new Intl.NumberFormat(locale, { style: "currency", currency, currencyDisplay: "narrowSymbol", ...options });
+}
+function fractionDigits(currency, locale) {
+  return moneyFormatter(currency, locale).resolvedOptions().maximumFractionDigits ?? 2;
+}
+function currencySymbol(currency, locale) {
+  return moneyFormatter(currency, locale).formatToParts(0).find((p) => p.type === "currency")?.value ?? currency;
+}
+function formatForEditing(value, currency, locale) {
+  return new Intl.NumberFormat(locale, {
+    useGrouping: false,
+    maximumFractionDigits: fractionDigits(currency, locale)
+  }).format(value);
+}
+function formatForDisplay(value, currency, locale) {
+  const digits = fractionDigits(currency, locale);
+  return new Intl.NumberFormat(locale, { minimumFractionDigits: digits, maximumFractionDigits: digits }).format(value);
+}
+function parseMoney(text, currency, locale) {
+  const decimal = new Intl.NumberFormat(locale).formatToParts(1.1).find((p) => p.type === "decimal")?.value ?? ".";
+  const group = new Intl.NumberFormat(locale).formatToParts(1e4).find((p) => p.type === "group")?.value;
+  let s = text.trim().replace(/[\s\u00a0\u202f]/g, "");
+  if (group && group !== decimal) s = s.split(group).join("");
+  s = s.replace(decimal, ".").replace(/[−–]/g, "-").replace(/[^0-9.-]/g, "");
+  const negative = s.startsWith("-");
+  s = s.replace(/-/g, "");
+  if (!/\d/.test(s) || (s.match(/\./g) ?? []).length > 1) return null;
+  const n = Number(s);
+  if (!Number.isFinite(n)) return null;
+  const f = 10 ** fractionDigits(currency, locale);
+  return (negative ? -1 : 1) * (Math.round(n * f) / f);
+}
+
+export {
+  moneyFormatter,
+  currencySymbol,
+  formatForEditing,
+  formatForDisplay,
+  parseMoney
+};

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
       }