@nexub/react 1.4.0 → 1.5.0

package/dist/{chunk-T5BS4OIV.js → chunk-2ZBJOUJ7.js}

@@ -1,4 +1,7 @@
 'use client';
+import {
+  glassSurfaceClass
+} from "./chunk-DEIBF3P7.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -8,12 +11,15 @@ import * as React from "react";
 import * as RadixToolbar from "@radix-ui/react-toolbar";
 import { jsx } from "react/jsx-runtime";
 var Root2 = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ({ className, floating = false, placement, ...props }, ref) => /* @__PURE__ */ jsx(
     RadixToolbar.Root,
     {
       ref,
+      "data-material": floating ? "glass" : void 0,
       className: cn(
-        "flex items-center gap-1 rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-default)] p-1",
+        "flex items-center gap-1 p-1",
+        floating ? ["rounded-shape-control p-1.5", glassSurfaceClass] : "rounded-shape-container bg-[var(--color-surface-container-low)]",
+        floating && placement === "bottom" && "fixed bottom-6 left-1/2 z-[var(--z-sticky,1100)] -translate-x-1/2",
         className
       ),
       ...props
@@ -21,20 +27,12 @@ var Root2 = React.forwardRef(
   )
 );
 Root2.displayName = "Toolbar.Root";
+var item = [
+  "nx-state-layer nx-press relative inline-flex h-control-sm items-center justify-center gap-1.5 rounded-shape-control text-label-lg text-[var(--color-on-surface)] select-none",
+  "disabled:pointer-events-none disabled:text-[var(--color-text-disabled)]"
+].join(" ");
 var ToolbarButton = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    RadixToolbar.Button,
-    {
-      ref,
-      className: cn(
-        "inline-flex h-8 items-center justify-center rounded-md px-3 text-sm font-medium transition-colors",
-        "hover:bg-[var(--color-bg-subtle)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)]",
-        "disabled:pointer-events-none disabled:opacity-50",
-        className
-      ),
-      ...props
-    }
-  )
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixToolbar.Button, { ref, className: cn(item, "px-3", className), ...props })
 );
 ToolbarButton.displayName = "Toolbar.Button";
 var Separator2 = React.forwardRef(
@@ -42,7 +40,7 @@ var Separator2 = React.forwardRef(
     RadixToolbar.Separator,
     {
       ref,
-      className: cn("mx-1 w-px self-stretch bg-[var(--color-border-default)]", className),
+      className: cn("mx-1 h-5 w-px bg-[var(--color-outline-variant)]", className),
       ...props
     }
   )
@@ -65,9 +63,8 @@ var ToggleItem2 = React.forwardRef(
     {
       ref,
       className: cn(
-        "inline-flex h-8 w-8 items-center justify-center rounded-md text-sm transition-colors",
-        "hover:bg-[var(--color-bg-subtle)] data-[state=on]:bg-[var(--color-bg-subtle)]",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)]",
+        item,
+        "w-control-sm data-[state=on]:bg-[var(--color-secondary-container)] data-[state=on]:text-[var(--color-on-secondary-container)]",
         className
       ),
       ...props

package/dist/chunk-5O34ZNC3.js

@@ -0,0 +1,70 @@
+'use client';
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/NavigationRail/NavigationRail.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Root = React.forwardRef(
+  ({ className, header, children, "aria-label": ariaLabel = "Main", ...props }, ref) => /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      ref,
+      "aria-label": ariaLabel,
+      className: cn("flex h-full w-20 shrink-0 flex-col items-center gap-3 py-4", className),
+      ...props,
+      children: [
+        header && /* @__PURE__ */ jsx("div", { className: "mb-3 flex flex-col items-center", children: header }),
+        /* @__PURE__ */ jsx("ul", { className: "flex w-full flex-col items-center gap-1", role: "list", children })
+      ]
+    }
+  )
+);
+Root.displayName = "NavigationRail.Root";
+var Item = React.forwardRef(
+  ({ className, icon, label, active, asChild, children, ...props }, ref) => {
+    const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "relative grid h-8 w-14 place-items-center rounded-full [&>svg]:h-5 [&>svg]:w-5",
+            "before:absolute before:inset-0 before:rounded-full before:bg-current before:opacity-0",
+            "before:transition-opacity before:duration-effects-fast before:ease-effects-fast",
+            "group-hover:before:opacity-[var(--state-hover)] group-active:before:opacity-[var(--state-pressed)]",
+            active ? "bg-[var(--color-secondary-container)] text-[var(--color-on-secondary-container)]" : "text-[var(--color-on-surface-variant)]"
+          ),
+          children: icon
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "text-label-md",
+            active ? "text-[var(--color-on-surface)]" : "text-[var(--color-on-surface-variant)]"
+          ),
+          children: label
+        }
+      )
+    ] });
+    const shared = {
+      ref,
+      "aria-current": active ? "page" : void 0,
+      className: cn(
+        "group flex w-full flex-col items-center gap-1 rounded-shape-container py-1 no-underline select-none outline-offset-0",
+        className
+      ),
+      ...props
+    };
+    return /* @__PURE__ */ jsx("li", { className: "w-full px-1", children: asChild && React.isValidElement(children) ? /* @__PURE__ */ jsx(Slot, { ...shared, children: React.cloneElement(children, void 0, inner) }) : /* @__PURE__ */ jsx("a", { ...shared, children: inner }) });
+  }
+);
+Item.displayName = "NavigationRail.Item";
+var NavigationRail = { Root, Item };
+
+export {
+  NavigationRail
+};

package/dist/chunk-64JDZWCV.js

@@ -0,0 +1,47 @@
+'use client';
+import {
+  DropdownMenu
+} from "./chunk-7L3CGIRA.js";
+import {
+  ButtonGroup
+} from "./chunk-LGQ737BP.js";
+import {
+  Button
+} from "./chunk-LMPGHWUA.js";
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/SplitButton/SplitButton.tsx
+import * as React from "react";
+import { ChevronDown } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SplitButton = React.forwardRef(
+  ({ menuLabel, menu, align = "end", variant, size, tone, disabled, loading, className, ...props }, ref) => {
+    const shared = { variant, size, tone, disabled: disabled || loading };
+    return /* @__PURE__ */ jsxs(ButtonGroup, { attached: true, className, children: [
+      /* @__PURE__ */ jsx(Button, { ref, ...shared, loading, ...props }),
+      /* @__PURE__ */ jsxs(DropdownMenu.Root, { modal: false, children: [
+        /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            ...shared,
+            "aria-label": menuLabel,
+            className: cn(
+              "px-3",
+              // The chevron flips while the menu is open.
+              "[&[data-state=open]>svg]:rotate-180 [&>svg]:transition-transform [&>svg]:duration-spatial-fast [&>svg]:ease-spatial-fast"
+            ),
+            children: /* @__PURE__ */ jsx(ChevronDown, { size: "sm", "aria-hidden": "true" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(DropdownMenu.Content, { align, children: menu })
+      ] })
+    ] });
+  }
+);
+SplitButton.displayName = "SplitButton";
+
+export {
+  SplitButton
+};

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

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

package/dist/{chunk-UVWCZHLD.js → chunk-I4BHRVRL.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
-  useIsomorphicLayoutEffect
-} from "./chunk-NHUQLIHL.js";
+  useControllableState
+} from "./chunk-JLUCMNVS.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -9,32 +9,6 @@ import {
 // src/components/Rating/Rating.tsx
 import * as React from "react";
 import { cva } from "class-variance-authority";
-
-// src/hooks/useControllableState.ts
-import { useState, useCallback, useRef } from "react";
-function useControllableState({
-  value: controlledValue,
-  defaultValue,
-  onChange
-}) {
-  const [uncontrolled, setUncontrolled] = useState(defaultValue);
-  const isControlled = controlledValue !== void 0;
-  const value = isControlled ? controlledValue : uncontrolled;
-  const onChangeRef = useRef(onChange);
-  useIsomorphicLayoutEffect(() => {
-    onChangeRef.current = onChange;
-  });
-  const setValue = useCallback(
-    (next) => {
-      if (!isControlled) setUncontrolled(next);
-      onChangeRef.current?.(next);
-    },
-    [isControlled]
-  );
-  return [value, setValue];
-}
-
-// src/components/Rating/Rating.tsx
 import { jsx } from "react/jsx-runtime";
 var ratingVariants = cva("inline-flex items-center gap-0.5", {
   variants: {
@@ -147,7 +121,6 @@ function StarIcon({ filled, ...props }) {
 }
 
 export {
-  useControllableState,
   ratingVariants,
   Rating
 };

package/dist/chunk-JLUCMNVS.js

@@ -0,0 +1,32 @@
+'use client';
+import {
+  useIsomorphicLayoutEffect
+} from "./chunk-NHUQLIHL.js";
+
+// src/hooks/useControllableState.ts
+import { useState, useCallback, useRef } from "react";
+function useControllableState({
+  value: controlledValue,
+  defaultValue,
+  onChange
+}) {
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : uncontrolled;
+  const onChangeRef = useRef(onChange);
+  useIsomorphicLayoutEffect(() => {
+    onChangeRef.current = onChange;
+  });
+  const setValue = useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolled(next);
+      onChangeRef.current?.(next);
+    },
+    [isControlled]
+  );
+  return [value, setValue];
+}
+
+export {
+  useControllableState
+};

package/dist/{chunk-NDCNVQ47.js → chunk-LGQ737BP.js}

@@ -18,18 +18,12 @@ var ButtonGroup = React.forwardRef(
         className: cn(
           "flex",
           orientation === "vertical" ? "flex-col" : "flex-row",
+          // Connected (M3 Expressive): capsule outer ends, small inner corners, a 2px
+          // seam between segments so each keeps its own state layer and focus ring.
           attached ? [
-            "gap-0",
-            "[&>*:not(:first-child):not(:last-child)]:rounded-none",
-            orientation === "horizontal" ? [
-              "[&>*:first-child]:rounded-r-none",
-              "[&>*:last-child]:rounded-l-none",
-              "[&>*:not(:first-child)]:border-l-0"
-            ] : [
-              "[&>*:first-child]:rounded-b-none",
-              "[&>*:last-child]:rounded-t-none",
-              "[&>*:not(:first-child)]:border-t-0"
-            ]
+            "gap-0.5",
+            "[&>*:not(:first-child):not(:last-child)]:rounded-[6px]",
+            orientation === "horizontal" ? ["[&>*:first-child]:rounded-r-[6px]", "[&>*:last-child]:rounded-l-[6px]"] : ["[&>*:first-child]:rounded-b-[6px]", "[&>*:last-child]:rounded-t-[6px]"]
           ] : "gap-2",
           className
         ),

package/dist/chunk-LVPU7455.js

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

package/dist/chunk-YPHNHQYQ.js

@@ -0,0 +1,61 @@
+'use client';
+import {
+  useControllableState
+} from "./chunk-JLUCMNVS.js";
+import {
+  Input
+} from "./chunk-IK23Q2OF.js";
+import {
+  currencySymbol,
+  formatForDisplay,
+  formatForEditing,
+  parseMoney
+} from "./chunk-CIQHFMF6.js";
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/MoneyInput/MoneyInput.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var MoneyInput = React.forwardRef(
+  ({ value: valueProp, defaultValue = null, onValueChange, currency, locale, onFocus, onBlur, className, ...props }, ref) => {
+    const [value, setValue] = useControllableState({
+      value: valueProp,
+      defaultValue,
+      onChange: onValueChange
+    });
+    const [draft, setDraft] = React.useState(null);
+    const shown = draft ?? (value == null ? "" : formatForDisplay(value, currency, locale));
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref,
+        inputMode: "decimal",
+        autoComplete: "off",
+        leadingIcon: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-body-md", children: currencySymbol(currency, locale) }),
+        className: cn("tabular-nums", className),
+        value: shown,
+        onFocus: (e) => {
+          setDraft(value == null ? "" : formatForEditing(value, currency, locale));
+          onFocus?.(e);
+        },
+        onChange: (e) => {
+          setDraft(e.target.value);
+          const next = parseMoney(e.target.value, currency, locale);
+          if (next !== value) setValue(next);
+        },
+        onBlur: (e) => {
+          setDraft(null);
+          onBlur?.(e);
+        },
+        ...props
+      }
+    );
+  }
+);
+MoneyInput.displayName = "MoneyInput";
+
+export {
+  MoneyInput
+};

package/dist/components/Amount/index.js

@@ -0,0 +1,9 @@
+'use client';
+import {
+  Amount
+} from "../../chunk-AXOKFS4K.js";
+import "../../chunk-CIQHFMF6.js";
+import "../../chunk-Q7G5WGYV.js";
+export {
+  Amount
+};

package/dist/components/ButtonGroup/index.js

@@ -1,7 +1,8 @@
 'use client';
+import "../../chunk-LVPU7455.js";
 import {
   ButtonGroup
-} from "../../chunk-NDCNVQ47.js";
+} from "../../chunk-LGQ737BP.js";
 import "../../chunk-Q7G5WGYV.js";
 export {
   ButtonGroup

package/dist/components/DropdownMenu/index.js

@@ -1,7 +1,8 @@
 'use client';
+import "../../chunk-HI7GBSW2.js";
 import {
   DropdownMenu
-} from "../../chunk-VTL3GJJG.js";
+} from "../../chunk-7L3CGIRA.js";
 import "../../chunk-KQPLFVFR.js";
 import "../../chunk-Q7G5WGYV.js";
 export {

package/dist/components/MoneyInput/index.js

@@ -0,0 +1,13 @@
+'use client';
+import {
+  MoneyInput
+} from "../../chunk-YPHNHQYQ.js";
+import "../../chunk-JLUCMNVS.js";
+import "../../chunk-NHUQLIHL.js";
+import "../../chunk-IK23Q2OF.js";
+import "../../chunk-7SXR4PGO.js";
+import "../../chunk-CIQHFMF6.js";
+import "../../chunk-Q7G5WGYV.js";
+export {
+  MoneyInput
+};

package/dist/components/NavigationRail/index.js

@@ -0,0 +1,8 @@
+'use client';
+import {
+  NavigationRail
+} from "../../chunk-5O34ZNC3.js";
+import "../../chunk-Q7G5WGYV.js";
+export {
+  NavigationRail
+};

package/dist/components/Rating/index.js

@@ -2,7 +2,8 @@
 import {
   Rating,
   ratingVariants
-} from "../../chunk-UVWCZHLD.js";
+} from "../../chunk-I4BHRVRL.js";
+import "../../chunk-JLUCMNVS.js";
 import "../../chunk-NHUQLIHL.js";
 import "../../chunk-Q7G5WGYV.js";
 export {

package/dist/components/SplitButton/index.js

@@ -0,0 +1,14 @@
+'use client';
+import {
+  SplitButton
+} from "../../chunk-64JDZWCV.js";
+import "../../chunk-7L3CGIRA.js";
+import "../../chunk-LGQ737BP.js";
+import "../../chunk-KQPLFVFR.js";
+import "../../chunk-LMPGHWUA.js";
+import "../../chunk-7SXR4PGO.js";
+import "../../chunk-DEIBF3P7.js";
+import "../../chunk-Q7G5WGYV.js";
+export {
+  SplitButton
+};

package/dist/components/Toolbar/index.js

@@ -1,7 +1,8 @@
 'use client';
 import {
   Toolbar
-} from "../../chunk-T5BS4OIV.js";
+} from "../../chunk-2ZBJOUJ7.js";
+import "../../chunk-DEIBF3P7.js";
 import "../../chunk-Q7G5WGYV.js";
 export {
   Toolbar

package/dist/index.d.ts

@@ -74,6 +74,20 @@ interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
 
+interface SplitButtonProps extends Omit<ButtonProps, 'asChild' | 'trailingIcon' | 'fullWidth'> {
+    /** Accessible name of the menu toggle, e.g. "More save options". */
+    menuLabel: string;
+    /** `DropdownMenu.Item`s for the secondary actions. */
+    menu: React.ReactNode;
+    /** Menu alignment against the toggle. @default 'end' */
+    align?: 'start' | 'end';
+}
+/**
+ * A primary action with related secondary actions behind a chevron, as one
+ * connected control (M3 Expressive split button). The ref goes to the primary button.
+ */
+declare const SplitButton: React.ForwardRefExoticComponent<SplitButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
 declare const iconButtonVariants: (props?: ({
     variant?: "solid" | "subtle" | "outline" | "ghost" | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
@@ -130,6 +144,43 @@ interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputEleme
 }
 declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
 
+interface MoneyInputProps extends Omit<InputProps, 'value' | 'defaultValue' | 'onChange' | 'type' | 'inputMode' | 'leadingIcon' | 'leadingAddon'> {
+    /** The amount, or null when empty. */
+    value?: number | null;
+    defaultValue?: number | null;
+    /** Called with the parsed amount (rounded to the currency's minor unit) as the person types. */
+    onValueChange?: (value: number | null) => void;
+    /** ISO 4217 code, e.g. 'USD'. */
+    currency: string;
+    /** BCP 47 locale for separators. Defaults to the user's. */
+    locale?: string;
+}
+/**
+ * An amount field: the currency symbol leads, digits are tabular, the locale's
+ * separators parse correctly, and the value is grouped on blur
+ * (e.g. 1234.5 → "1,234.50"). Raw while editing so the caret never jumps.
+ */
+declare const MoneyInput: React.ForwardRefExoticComponent<MoneyInputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface AmountProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
+    value: number;
+    /** ISO 4217 code, e.g. 'USD', 'EUR', 'INR'. */
+    currency: string;
+    /** BCP 47 locale. Defaults to the user's. */
+    locale?: string;
+    /** `display`: a hero figure in the brand face with a quieter symbol and minor units. */
+    size?: 'sm' | 'md' | 'lg' | 'display';
+    /** `auto` colours gains success and losses error (use with signDisplay). */
+    tone?: 'neutral' | 'auto';
+    /** e.g. 'exceptZero' to show "+" on gains. */
+    signDisplay?: Intl.NumberFormatOptions['signDisplay'];
+}
+/**
+ * A money figure, honest by default (Calm Depth §3.5): tabular numerals, the
+ * currency's own minor unit, a true minus sign. Formatting is Intl.NumberFormat.
+ */
+declare const Amount: React.ForwardRefExoticComponent<AmountProps & React.RefAttributes<HTMLSpanElement>>;
+
 interface SearchInputProps extends Omit<InputProps, 'leadingIcon' | 'trailingIcon'> {
     onClear?: () => void;
 }
@@ -480,7 +531,7 @@ interface AspectRatioProps extends React.HTMLAttributes<HTMLDivElement> {
 declare const AspectRatio: React.ForwardRefExoticComponent<AspectRatioProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const headingVariants: (props?: ({
-    size?: "display" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | null | undefined;
+    size?: "display" | "h2" | "h3" | "h1" | "h4" | "h5" | "h6" | null | undefined;
     weight?: "bold" | "regular" | "medium" | "semibold" | "extrabold" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type HeadingSize = 'display' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
@@ -645,6 +696,25 @@ declare const NavigationMenu: {
     Indicator: React.ForwardRefExoticComponent<RadixNav.NavigationMenuIndicatorProps & React.RefAttributes<HTMLDivElement>>;
 };
 
+interface NavigationRailRootProps extends React.HTMLAttributes<HTMLElement> {
+    /** Accessible name for the landmark. @default 'Main' */
+    'aria-label'?: string;
+    /** Optional slot above the items, e.g. a primary action or logo. */
+    header?: React.ReactNode;
+}
+interface NavigationRailItemProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> {
+    icon: React.ReactNode;
+    label: React.ReactNode;
+    active?: boolean;
+    /** Render your link (e.g. a router `<Link>`) as the item: pass it as the only child. */
+    asChild?: boolean;
+    children?: React.ReactElement;
+}
+declare const NavigationRail: {
+    Root: React.ForwardRefExoticComponent<NavigationRailRootProps & React.RefAttributes<HTMLElement>>;
+    Item: React.ForwardRefExoticComponent<NavigationRailItemProps & React.RefAttributes<HTMLAnchorElement>>;
+};
+
 interface DrawerRootProps {
     children?: React.ReactNode;
     open?: boolean;
@@ -922,8 +992,17 @@ interface ScrollAreaProps extends RadixScrollArea.ScrollAreaProps {
 }
 declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
 
+interface ToolbarRootProps extends RadixToolbar.ToolbarProps {
+    /**
+     * Floating toolbar (Apple / M3 Expressive): a glass capsule for the control
+     * layer above content, e.g. editor or selection actions.
+     */
+    floating?: boolean;
+    /** With `floating`: pin it to the bottom centre of the viewport. */
+    placement?: 'bottom';
+}
 declare const Toolbar: {
-    Root: React.ForwardRefExoticComponent<RadixToolbar.ToolbarProps & React.RefAttributes<HTMLDivElement>>;
+    Root: React.ForwardRefExoticComponent<ToolbarRootProps & React.RefAttributes<HTMLDivElement>>;
     Button: React.ForwardRefExoticComponent<RadixToolbar.ToolbarButtonProps & React.RefAttributes<HTMLButtonElement>>;
     Separator: React.ForwardRefExoticComponent<RadixToolbar.ToolbarSeparatorProps & React.RefAttributes<HTMLDivElement>>;
     ToggleGroup: React.ForwardRefExoticComponent<(RadixToolbar.ToolbarToggleGroupSingleProps | RadixToolbar.ToolbarToggleGroupMultipleProps) & React.RefAttributes<HTMLDivElement>>;
@@ -1369,4 +1448,4 @@ interface CollapseProps extends Omit<MotionBaseProps, 'easing'>, React.HTMLAttri
  */
 declare const Collapse: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<HTMLDivElement>>;
 
-export { Accordion, Alert, AlertDialog, type AlertProps, AppShell, AspectRatio, type AspectRatioProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, Banner, type BannerProps, Box, type BoxProps, Breadcrumb, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Callout, type CalloutProps, Card, type CardProps, CheckList, CheckListItem, type CheckListItemProps, type CheckListProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Code, type CodeProps, Collapse, type CollapseProps, Collapsible, Combobox, CommandPalette, type CommandPaletteRootProps, Container, type ContainerProps, ContextMenu, CountryBadge, type CountryBadgeProps, DataTable, type DataTableProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, Drawer, type DrawerRootProps, DropdownMenu, EmptyState, ErrorState, type ErrorStateProps, EyebrowChip, type EyebrowChipProps, Fade, type FadeProps, FileUpload, type FileUploadRootProps, FilterChip, type FilterChipProps, Flag, type FlagProps, Flex, type FlexProps, FormError, type FormErrorProps, FormField, type FormFieldContextValue, type FormFieldRootProps, type GlassMode, GradientDivider, type GradientDividerProps, Grid, type GridProps, Heading, type HeadingProps, HelperText, type HelperTextProps, HoverCard, IconButton, type IconButtonProps, Input, type InputProps, Kbd, type KbdProps, KeyboardShortcut, type KeyboardShortcutProps, Label, type LabelProps, Link, type LinkProps, Logo, type LogoProps, Menubar, type MotionBaseProps, type MotionDuration, type MotionEasing, NavigationMenu, NumberInput, type NumberInputProps, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, Popover, Progress, type ProgressProps, RadioGroup, Rating, type RatingProps, Scale, type ScaleProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, Section, type SectionProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, Select, Separator, type SeparatorProps, Sheet, Sidebar, type SidebarGroupProps, type SidebarHeaderProps, type SidebarItemProps, type SidebarRootProps, Skeleton, type SkeletonProps, Slide, type SlideDirection, type SlideProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stack, type StackProps, StatusPill, type StatusPillProps, Switch, type SwitchProps, Table, Tabs, Tag, type TagProps, Text, TextGradient, type TextGradientProps, type TextProps, Textarea, type TextareaProps, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeScript, type ThemeScriptProps, Toast, type ToastItem, Toaster, Toggle, ToggleGroup, type ToggleProps, type ToneValue, Toolbar, Tooltip, Provider as TooltipProvider, TopNav, type TopNavItemProps, type TopNavRootProps, addonVariants, alertVariants, avatarGroupVariants, avatarVariants, badgeVariants, bannerVariants, buttonVariants, calloutVariants, cardVariants, chipVariants, cn, containerVariants, headingVariants, iconButtonVariants, inputVariants, inputWrapperVariants, labelVariants, linkVariants, logoVariants, progressFillVariants, progressTrackVariants, ratingVariants, sectionVariants, separatorVariants, skeletonVariants, spinnerVariants, statusPillVariants, tagVariants, textVariants, textareaVariants, toast, toggleVariants, useControllableState, useDisclosure, useIsomorphicLayoutEffect, useMediaQuery, useMergedRefs, useTheme, useToastStore };
+export { Accordion, Alert, AlertDialog, type AlertProps, Amount, type AmountProps, AppShell, AspectRatio, type AspectRatioProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, Banner, type BannerProps, Box, type BoxProps, Breadcrumb, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Callout, type CalloutProps, Card, type CardProps, CheckList, CheckListItem, type CheckListItemProps, type CheckListProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Code, type CodeProps, Collapse, type CollapseProps, Collapsible, Combobox, CommandPalette, type CommandPaletteRootProps, Container, type ContainerProps, ContextMenu, CountryBadge, type CountryBadgeProps, DataTable, type DataTableProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, Drawer, type DrawerRootProps, DropdownMenu, EmptyState, ErrorState, type ErrorStateProps, EyebrowChip, type EyebrowChipProps, Fade, type FadeProps, FileUpload, type FileUploadRootProps, FilterChip, type FilterChipProps, Flag, type FlagProps, Flex, type FlexProps, FormError, type FormErrorProps, FormField, type FormFieldContextValue, type FormFieldRootProps, type GlassMode, GradientDivider, type GradientDividerProps, Grid, type GridProps, Heading, type HeadingProps, HelperText, type HelperTextProps, HoverCard, IconButton, type IconButtonProps, Input, type InputProps, Kbd, type KbdProps, KeyboardShortcut, type KeyboardShortcutProps, Label, type LabelProps, Link, type LinkProps, Logo, type LogoProps, Menubar, MoneyInput, type MoneyInputProps, type MotionBaseProps, type MotionDuration, type MotionEasing, NavigationMenu, NavigationRail, type NavigationRailItemProps, type NavigationRailRootProps, NumberInput, type NumberInputProps, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, Popover, Progress, type ProgressProps, RadioGroup, Rating, type RatingProps, Scale, type ScaleProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, Section, type SectionProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, Select, Separator, type SeparatorProps, Sheet, Sidebar, type SidebarGroupProps, type SidebarHeaderProps, type SidebarItemProps, type SidebarRootProps, Skeleton, type SkeletonProps, Slide, type SlideDirection, type SlideProps, Slider, type SliderProps, Spinner, type SpinnerProps, SplitButton, type SplitButtonProps, Stack, type StackProps, StatusPill, type StatusPillProps, Switch, type SwitchProps, Table, Tabs, Tag, type TagProps, Text, TextGradient, type TextGradientProps, type TextProps, Textarea, type TextareaProps, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeScript, type ThemeScriptProps, Toast, type ToastItem, Toaster, Toggle, ToggleGroup, type ToggleProps, type ToneValue, Toolbar, type ToolbarRootProps, Tooltip, Provider as TooltipProvider, TopNav, type TopNavItemProps, type TopNavRootProps, addonVariants, alertVariants, avatarGroupVariants, avatarVariants, badgeVariants, bannerVariants, buttonVariants, calloutVariants, cardVariants, chipVariants, cn, containerVariants, headingVariants, iconButtonVariants, inputVariants, inputWrapperVariants, labelVariants, linkVariants, logoVariants, progressFillVariants, progressTrackVariants, ratingVariants, sectionVariants, separatorVariants, skeletonVariants, spinnerVariants, statusPillVariants, tagVariants, textVariants, textareaVariants, toast, toggleVariants, useControllableState, useDisclosure, useIsomorphicLayoutEffect, useMediaQuery, useMergedRefs, useTheme, useToastStore };

package/dist/index.js

@@ -1,4 +1,10 @@
 'use client';
+import {
+  ToggleGroup
+} from "./chunk-DYWJ7BIK.js";
+import {
+  Toolbar
+} from "./chunk-2ZBJOUJ7.js";
 import {
   Provider,
   Tooltip
@@ -9,9 +15,21 @@ import {
 import {
   Root
 } from "./chunk-ZXLACKEB.js";
+import "./chunk-IZ6ZPEZ2.js";
 import {
-  ButtonGroup
-} from "./chunk-NDCNVQ47.js";
+  Container,
+  containerVariants
+} from "./chunk-E4JM3HUM.js";
+import {
+  ContextMenu
+} from "./chunk-6QLLH6ID.js";
+import {
+  Tabs
+} from "./chunk-OJ2TLWYD.js";
+import {
+  Tag,
+  tagVariants
+} from "./chunk-P44EROBX.js";
 import {
   Text,
   textVariants
@@ -35,16 +53,14 @@ import {
   useToastStore
 } from "./chunk-TYTW4F3B.js";
 import "./chunk-YJU4ZRQZ.js";
-import {
-  ToggleGroup
-} from "./chunk-DYWJ7BIK.js";
 import {
   Toggle,
   toggleVariants
 } from "./chunk-3TMIZQPR.js";
 import {
-  Toolbar
-} from "./chunk-T5BS4OIV.js";
+  Skeleton,
+  skeletonVariants
+} from "./chunk-63DPMUMR.js";
 import {
   Slider
 } from "./chunk-TNBBQ7IP.js";
@@ -52,6 +68,9 @@ import {
   Spinner,
   spinnerVariants
 } from "./chunk-RLE5RN3T.js";
+import {
+  SplitButton
+} from "./chunk-64JDZWCV.js";
 import {
   Stack
 } from "./chunk-BTRTORKU.js";
@@ -66,12 +85,9 @@ import {
   Table
 } from "./chunk-JSD3H7WV.js";
 import {
-  Tabs
-} from "./chunk-OJ2TLWYD.js";
-import {
-  Tag,
-  tagVariants
-} from "./chunk-P44EROBX.js";
+  Rating,
+  ratingVariants
+} from "./chunk-I4BHRVRL.js";
 import {
   ScrollArea
 } from "./chunk-EZ23IA3H.js";
@@ -99,9 +115,8 @@ import {
   Sidebar
 } from "./chunk-BFRX6X4O.js";
 import {
-  Skeleton,
-  skeletonVariants
-} from "./chunk-63DPMUMR.js";
+  NavigationRail
+} from "./chunk-5O34ZNC3.js";
 import {
   NumberInput
 } from "./chunk-PQ6GU7SG.js";
@@ -125,21 +140,9 @@ import {
 import {
   RadioGroup
 } from "./chunk-6SJPVQQW.js";
-import {
-  Rating,
-  ratingVariants,
-  useControllableState
-} from "./chunk-UVWCZHLD.js";
-import {
-  useIsomorphicLayoutEffect
-} from "./chunk-NHUQLIHL.js";
-import "./chunk-KLTQJZOX.js";
 import {
   KeyboardShortcut
 } from "./chunk-HG6HTUWU.js";
-import {
-  Kbd
-} from "./chunk-A4IMFAZX.js";
 import "./chunk-EV43I5J6.js";
 import {
   Link,
@@ -152,6 +155,15 @@ import {
 import {
   Menubar
 } from "./chunk-OJRSPDNJ.js";
+import {
+  MoneyInput
+} from "./chunk-YPHNHQYQ.js";
+import {
+  useControllableState
+} from "./chunk-JLUCMNVS.js";
+import {
+  useIsomorphicLayoutEffect
+} from "./chunk-NHUQLIHL.js";
 import {
   Collapse,
   Fade,
@@ -161,13 +173,6 @@ import {
 import {
   NavigationMenu
 } from "./chunk-QD7H3WV3.js";
-import {
-  FormField
-} from "./chunk-OASFXI27.js";
-import {
-  Label,
-  labelVariants
-} from "./chunk-NIX4SEKM.js";
 import {
   GradientDivider
 } from "./chunk-I4URNMI7.js";
@@ -179,9 +184,6 @@ import {
   headingVariants
 } from "./chunk-SVQCINRE.js";
 import "./chunk-PICMOOAZ.js";
-import {
-  HelperText
-} from "./chunk-UMC64NCT.js";
 import {
   HoverCard
 } from "./chunk-5URGARPH.js";
@@ -196,9 +198,10 @@ import {
   inputVariants,
   inputWrapperVariants
 } from "./chunk-IK23Q2OF.js";
+import "./chunk-KLTQJZOX.js";
 import {
-  EmptyState
-} from "./chunk-2FCSWBSM.js";
+  Kbd
+} from "./chunk-A4IMFAZX.js";
 import {
   ErrorState
 } from "./chunk-72I7EVOL.js";
@@ -216,12 +219,19 @@ import {
   Flex
 } from "./chunk-NCRFKPA4.js";
 import "./chunk-ADO2DB6Q.js";
+import {
+  FormField
+} from "./chunk-OASFXI27.js";
+import {
+  Label,
+  labelVariants
+} from "./chunk-NIX4SEKM.js";
+import {
+  HelperText
+} from "./chunk-UMC64NCT.js";
 import {
   FormError
 } from "./chunk-KM6Z3VTI.js";
-import {
-  ContextMenu
-} from "./chunk-6QLLH6ID.js";
 import {
   CountryBadge
 } from "./chunk-PWBPHGM3.js";
@@ -244,9 +254,17 @@ import {
   Drawer,
   Sheet
 } from "./chunk-SY6V3HAK.js";
+import "./chunk-HI7GBSW2.js";
 import {
   DropdownMenu
-} from "./chunk-VTL3GJJG.js";
+} from "./chunk-7L3CGIRA.js";
+import {
+  EmptyState
+} from "./chunk-2FCSWBSM.js";
+import {
+  Card,
+  cardVariants
+} from "./chunk-NMH5WSZG.js";
 import {
   CheckList,
   CheckListItem
@@ -269,14 +287,14 @@ import {
   CommandPalette
 } from "./chunk-V3TETH4J.js";
 import "./chunk-47UGX37F.js";
-import {
-  Container,
-  containerVariants
-} from "./chunk-E4JM3HUM.js";
 import {
   AvatarGroup,
   avatarGroupVariants
 } from "./chunk-QCNLE27O.js";
+import {
+  Avatar,
+  avatarVariants
+} from "./chunk-FHFVBOF3.js";
 import {
   Badge,
   badgeVariants
@@ -292,21 +310,17 @@ import {
   Breadcrumb
 } from "./chunk-4SSUM4CL.js";
 import "./chunk-P26VJEIW.js";
+import "./chunk-LVPU7455.js";
+import {
+  ButtonGroup
+} from "./chunk-LGQ737BP.js";
 import {
   Callout,
   calloutVariants
 } from "./chunk-XR4NBY54.js";
-import {
-  Card,
-  cardVariants
-} from "./chunk-NMH5WSZG.js";
 import {
   Accordion
 } from "./chunk-W2NEXOTG.js";
-import {
-  Alert,
-  alertVariants
-} from "./chunk-IIPYF6ZQ.js";
 import {
   AlertDialog
 } from "./chunk-RHOYF7MO.js";
@@ -317,6 +331,14 @@ import {
 } from "./chunk-LMPGHWUA.js";
 import "./chunk-7SXR4PGO.js";
 import "./chunk-DEIBF3P7.js";
+import {
+  Alert,
+  alertVariants
+} from "./chunk-IIPYF6ZQ.js";
+import {
+  Amount
+} from "./chunk-AXOKFS4K.js";
+import "./chunk-CIQHFMF6.js";
 import {
   AppShell
 } from "./chunk-56FERRWW.js";
@@ -329,11 +351,6 @@ import {
 import {
   Combobox
 } from "./chunk-Z3IG5WRA.js";
-import "./chunk-IZ6ZPEZ2.js";
-import {
-  Avatar,
-  avatarVariants
-} from "./chunk-FHFVBOF3.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -366,6 +383,7 @@ export {
   Accordion,
   Alert,
   AlertDialog,
+  Amount,
   AppShell,
   AspectRatio,
   Autocomplete,
@@ -420,7 +438,9 @@ export {
   Link,
   Logo,
   Menubar,
+  MoneyInput,
   NavigationMenu,
+  NavigationRail,
   NumberInput,
   PageHeader,
   Pagination,
@@ -442,6 +462,7 @@ export {
   Slide,
   Slider,
   Spinner,
+  SplitButton,
   Stack,
   StatusPill,
   Switch,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/react",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "React component library for Nexub Design System — 90+ accessible, themeable UI components built on Radix UI primitives.",
   "type": "module",
   "license": "MIT",
@@ -67,12 +67,12 @@
     "date-fns": "^4.1.0",
     "react-day-picker": "^9.14.0",
     "tailwind-merge": "^2.5.4",
-    "@nexub/icons": "1.4.0"
+    "@nexub/icons": "1.5.0"
   },
   "peerDependencies": {
     "react": ">=18 <20",
     "react-dom": ">=18 <20",
-    "@nexub/tokens": "^1.4.0"
+    "@nexub/tokens": "^1.5.0"
   },
   "devDependencies": {
     "@playwright/test": "1.64.0",
@@ -96,8 +96,8 @@
     "typescript": "^5.6.3",
     "vaul": "1.1.2",
     "vitest": "^2.1.8",
-    "@nexub/themes": "1.4.0",
-    "@nexub/tokens": "1.4.0"
+    "@nexub/themes": "1.5.0",
+    "@nexub/tokens": "1.5.0"
   },
   "scripts": {
     "build": "tsup && node scripts/check-dts.mjs",