@nexub/react 1.5.0 → 1.6.0

package/dist/{chunk-TEOLG3N2.js → chunk-SZ2WPWXJ.js}

@@ -1,7 +1,10 @@
 'use client';
 import {
   Combobox
-} from "./chunk-Z3IG5WRA.js";
+} from "./chunk-FJUVYRNT.js";
+import {
+  useNexubMessages
+} from "./chunk-743Y5MY3.js";
 
 // src/components/Autocomplete/Autocomplete.tsx
 import * as React from "react";
@@ -10,11 +13,12 @@ function Autocomplete({
   options,
   value,
   onValueChange,
-  placeholder = "Search\u2026",
-  emptyText = "No results found.",
+  placeholder,
+  emptyText,
   loading = false,
   className
 }) {
+  const messages = useNexubMessages();
   const selectedLabel = options.find((o) => o.value === value)?.label ?? "";
   const [search, setSearch] = React.useState(selectedLabel);
   const [prevValue, setPrevValue] = React.useState(value);
@@ -23,9 +27,9 @@ function Autocomplete({
     setSearch(selectedLabel);
   }
   return /* @__PURE__ */ jsxs(Combobox.Root, { className, children: [
-    /* @__PURE__ */ jsx(Combobox.Input, { placeholder, value: search, onValueChange: setSearch }),
-    /* @__PURE__ */ jsx(Combobox.List, { children: loading ? /* @__PURE__ */ jsx("div", { className: "py-6 text-center text-sm text-[var(--color-text-muted)]", children: "Loading\u2026" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Combobox.Empty, { children: emptyText }),
+    /* @__PURE__ */ jsx(Combobox.Input, { placeholder: placeholder ?? messages.searchPlaceholder, value: search, onValueChange: setSearch }),
+    /* @__PURE__ */ jsx(Combobox.List, { children: loading ? /* @__PURE__ */ jsx("div", { className: "py-6 text-center text-sm text-[var(--color-on-surface-muted)]", children: messages.loading }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Combobox.Empty, { children: emptyText ?? messages.noResults }),
       options.map((opt) => /* @__PURE__ */ jsx(
         Combobox.Item,
         {

package/dist/{chunk-W2NEXOTG.js → chunk-T7RLPFGX.js}

@@ -13,7 +13,7 @@ var Root2 = React.forwardRef(
     RadixAccordion.Root,
     {
       ref,
-      className: cn("divide-y divide-[var(--color-border-default)]", className),
+      className: cn("divide-y divide-[var(--color-outline-variant)]", className),
       ...props
     }
   )
@@ -30,7 +30,7 @@ var Trigger2 = React.forwardRef(
       ref,
       className: cn(
         "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all",
-        "hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)]",
+        "hover:underline",
         "[&[data-state=open]>svg]:rotate-180",
         className
       ),

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

@@ -1,4 +1,11 @@
 'use client';
+import {
+  disabledText,
+  pressable
+} from "./chunk-7SXR4PGO.js";
+import {
+  useNexubMessages
+} from "./chunk-743Y5MY3.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -7,6 +14,11 @@ import {
 import * as React from "react";
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "@nexub/icons";
 import { jsx, jsxs } from "react/jsx-runtime";
+var navButton = cn(
+  pressable,
+  "inline-flex h-11 w-11 items-center justify-center bg-transparent text-[var(--color-on-surface)]",
+  disabledText
+);
 function generatePages(current, total, siblings) {
   if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
   const leftSibling = Math.max(current - siblings, 1);
@@ -32,6 +44,7 @@ var Pagination = React.forwardRef(
     onPageChange,
     ...props
   }, ref) => {
+    const messages = useNexubMessages();
     const totalPages = Math.ceil(totalItems / pageSize);
     if (totalPages <= 1) return null;
     const pages = generatePages(page, totalPages, siblingCount);
@@ -40,8 +53,8 @@ var Pagination = React.forwardRef(
       {
         ref,
         role: "navigation",
-        "aria-label": "Pagination",
-        className: cn("flex items-center gap-1", className),
+        "aria-label": messages.pagination,
+        className: cn("flex items-center gap-1 tabular-nums", className),
         ...props,
         children: [
           /* @__PURE__ */ jsx(
@@ -49,16 +62,16 @@ var Pagination = React.forwardRef(
             {
               onClick: () => onPageChange(page - 1),
               disabled: page <= 1,
-              "aria-label": "Go to previous page",
-              className: "inline-flex h-11 w-11 items-center justify-center rounded-md border border-[var(--color-border-default)] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-bg-subtle)] disabled:pointer-events-none disabled:opacity-50",
-              children: /* @__PURE__ */ jsx(ChevronLeft, { size: "sm", "aria-hidden": "true" })
+              "aria-label": messages.previousPage,
+              className: navButton,
+              children: /* @__PURE__ */ jsx(ChevronLeft, { size: "sm", "aria-hidden": "true", className: "rtl:-scale-x-100" })
             }
           ),
           pages.map(
             (p, i) => p === "..." ? /* @__PURE__ */ jsx(
               "span",
               {
-                className: "flex h-11 w-11 items-center justify-center text-[var(--color-text-muted)]",
+                className: "flex h-11 w-11 items-center justify-center text-[var(--color-on-surface-muted)]",
                 children: /* @__PURE__ */ jsx(MoreHorizontal, { size: "sm", "aria-hidden": "true" })
               },
               `ellipsis-${i}`
@@ -66,11 +79,12 @@ var Pagination = React.forwardRef(
               "button",
               {
                 onClick: () => onPageChange(p),
-                "aria-label": `Go to page ${p}`,
+                "aria-label": messages.goToPage(p),
                 "aria-current": p === page ? "page" : void 0,
                 className: cn(
-                  "inline-flex h-11 w-11 items-center justify-center rounded-md text-sm font-medium transition-colors",
-                  p === page ? "bg-[var(--color-fill-primary)] text-white" : "border border-[var(--color-border-default)] text-[var(--color-text-primary)] hover:bg-[var(--color-bg-subtle)]"
+                  pressable,
+                  "inline-flex h-11 min-w-11 px-2 items-center justify-center text-label-lg",
+                  p === page ? "bg-[var(--color-primary)] text-[var(--color-on-primary)]" : "bg-transparent text-[var(--color-on-surface)]"
                 ),
                 children: p
               },
@@ -82,9 +96,9 @@ var Pagination = React.forwardRef(
             {
               onClick: () => onPageChange(page + 1),
               disabled: page >= totalPages,
-              "aria-label": "Go to next page",
-              className: "inline-flex h-11 w-11 items-center justify-center rounded-md border border-[var(--color-border-default)] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-bg-subtle)] disabled:pointer-events-none disabled:opacity-50",
-              children: /* @__PURE__ */ jsx(ChevronRight, { size: "sm", "aria-hidden": "true" })
+              "aria-label": messages.nextPage,
+              className: navButton,
+              children: /* @__PURE__ */ jsx(ChevronRight, { size: "sm", "aria-hidden": "true", className: "rtl:-scale-x-100" })
             }
           )
         ]

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

@@ -1,4 +1,7 @@
 'use client';
+import {
+  useNexubMessages
+} from "./chunk-743Y5MY3.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -48,6 +51,7 @@ Root.displayName = "FileUpload.Root";
 var Dropzone = React.forwardRef(
   ({ className, children, ...props }, ref) => {
     const { accept, addFiles, isDragging, setIsDragging } = useFileUpload();
+    const messages = useNexubMessages();
     const inputRef = React.useRef(null);
     function handleDrop(e) {
       e.preventDefault();
@@ -61,7 +65,7 @@ var Dropzone = React.forwardRef(
         ref,
         role: "button",
         tabIndex: 0,
-        "aria-label": "Upload files",
+        "aria-label": messages.uploadFiles,
         onClick: () => inputRef.current?.click(),
         onKeyDown: (e) => {
           if (e.key === "Enter" || e.key === " ") inputRef.current?.click();
@@ -73,17 +77,18 @@ var Dropzone = React.forwardRef(
         onDragLeave: () => setIsDragging(false),
         onDrop: handleDrop,
         className: cn(
-          "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed p-8 text-center transition-colors",
-          isDragging ? "border-[var(--color-brand-primary-500)] bg-[var(--color-brand-primary-500)]/5" : "border-[var(--color-border-input)] hover:border-[var(--color-brand-primary-500)] hover:bg-[var(--color-bg-subtle)]",
+          // Hover/press = the state layer; focus = the global ring.
+          "nx-state-layer flex cursor-pointer flex-col items-center justify-center gap-2 rounded-shape-container border-2 border-dashed p-8 text-center text-[var(--color-on-surface)] transition-colors",
+          isDragging ? "border-[var(--color-primary)] bg-[color-mix(in_srgb,var(--color-primary)_8%,transparent)]" : "border-[var(--color-outline)] hover:border-[var(--color-primary)]",
           className
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx(Upload, { size: "lg", className: "text-[var(--color-text-muted)]", "aria-hidden": "true" }),
-          children ?? /* @__PURE__ */ jsxs("p", { className: "text-sm text-[var(--color-text-muted)]", children: [
-            /* @__PURE__ */ jsx("span", { className: "font-semibold text-[var(--color-brand-primary-500)]", children: "Click to upload" }),
+          /* @__PURE__ */ jsx(Upload, { size: "lg", className: "text-[var(--color-on-surface-muted)]", "aria-hidden": "true" }),
+          children ?? /* @__PURE__ */ jsxs("p", { className: "text-sm text-[var(--color-on-surface-muted)]", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-semibold text-[var(--color-primary)]", children: messages.clickToUpload }),
             " ",
-            "or drag and drop"
+            messages.orDragAndDrop
           ] }),
           /* @__PURE__ */ jsx(
             "input",
@@ -115,6 +120,7 @@ var List = React.forwardRef(
 List.displayName = "FileUpload.List";
 var Item = React.forwardRef(({ className, index, ...props }, ref) => {
   const { files, removeFile } = useFileUpload();
+  const messages = useNexubMessages();
   const file = files[index];
   if (!file) return null;
   return /* @__PURE__ */ jsxs(
@@ -122,14 +128,14 @@ var Item = React.forwardRef(({ className, index, ...props }, ref) => {
     {
       ref,
       className: cn(
-        "flex items-center justify-between gap-3 rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-default)] p-3",
+        "flex items-center justify-between gap-3 rounded-shape-container border border-[var(--color-outline-variant)] bg-[var(--color-surface)] p-3",
         className
       ),
       ...props,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-[var(--color-text-primary)]", children: file.name }),
-          /* @__PURE__ */ jsxs("p", { className: "text-xs text-[var(--color-text-muted)]", children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-[var(--color-on-surface)]", children: file.name }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-[var(--color-on-surface-muted)]", children: [
             (file.size / 1024).toFixed(1),
             " KB"
           ] })
@@ -138,8 +144,8 @@ var Item = React.forwardRef(({ className, index, ...props }, ref) => {
           "button",
           {
             onClick: () => removeFile(index),
-            "aria-label": `Remove ${file.name}`,
-            className: "shrink-0 rounded p-1 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors",
+            "aria-label": messages.removeFile(file.name),
+            className: "nx-state-layer shrink-0 rounded-full p-1 text-[var(--color-on-surface-muted)] hover:text-[var(--color-on-surface)] transition-colors",
             children: /* @__PURE__ */ jsx(X, { size: "sm", "aria-hidden": "true" })
           }
         )

package/dist/{chunk-5O34ZNC3.js → chunk-VAFBGFKY.js}

@@ -1,4 +1,7 @@
 'use client';
+import {
+  useNexubMessages
+} from "./chunk-743Y5MY3.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -8,19 +11,22 @@ 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 })
-      ]
-    }
-  )
+  ({ className, header, children, "aria-label": ariaLabel, ...props }, ref) => {
+    const messages = useNexubMessages();
+    return /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        ref,
+        "aria-label": ariaLabel ?? messages.mainNavigation,
+        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(

package/dist/{chunk-OJRSPDNJ.js → chunk-VD4RFTNV.js}

@@ -1,12 +1,11 @@
 'use client';
 import {
-  enterExit,
   floatingSurface,
   menuContent,
   menuItem,
   menuLabel,
   menuSeparator
-} from "./chunk-KQPLFVFR.js";
+} from "./chunk-FLZD7HQY.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -59,12 +58,7 @@ var contentBaseClasses = cn(
   "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",
-  "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
-  "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2"
+  "nx-motion nx-pop origin-[var(--radix-menubar-content-transform-origin)]"
 );
 var Content2 = React.forwardRef(
   function MenubarContent({ className, sideOffset = 8, ...props }, ref) {
@@ -130,11 +124,11 @@ var CheckboxItem2 = React.forwardRef(function MenubarCheckboxItem({ className, c
     RadixMenubar.CheckboxItem,
     {
       ref,
-      className: cn(itemBaseClasses, "pl-8", className),
+      className: cn(itemBaseClasses, "ps-8", className),
       checked,
       ...props,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx(RadixMenubar.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ jsx("span", { className: "absolute start-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx(RadixMenubar.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
         children
       ]
     }
@@ -146,10 +140,10 @@ var RadioItem2 = React.forwardRef(function MenubarRadioItem({ className, childre
     RadixMenubar.RadioItem,
     {
       ref,
-      className: cn(itemBaseClasses, "pl-8", className),
+      className: cn(itemBaseClasses, "ps-8", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx(RadixMenubar.ItemIndicator, { children: /* @__PURE__ */ jsx("svg", { className: "h-2 w-2 fill-current", viewBox: "0 0 8 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx("circle", { cx: "4", cy: "4", r: "4" }) }) }) }),
+        /* @__PURE__ */ jsx("span", { className: "absolute start-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx(RadixMenubar.ItemIndicator, { children: /* @__PURE__ */ jsx("svg", { className: "h-2 w-2 fill-current", viewBox: "0 0 8 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx("circle", { cx: "4", cy: "4", r: "4" }) }) }) }),
         children
       ]
     }
@@ -169,7 +163,7 @@ var SubTrigger2 = React.forwardRef(function MenubarSubTrigger({ className, child
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4" })
+        /* @__PURE__ */ jsx(ChevronRight, { className: "ms-auto h-4 w-4 rtl:-scale-x-100" })
       ]
     }
   );
@@ -192,7 +186,7 @@ var Arrow2 = React.forwardRef(
       RadixMenubar.Arrow,
       {
         ref,
-        className: cn("fill-[var(--color-border-default)]", className),
+        className: cn("fill-[var(--color-outline-variant)]", className),
         ...props
       }
     );

package/dist/chunk-VLQGQFW7.js

@@ -0,0 +1,110 @@
+'use client';
+
+// src/utils/layout.ts
+var GAP = {
+  "0": "gap-0",
+  "0.5": "gap-0.5",
+  "1": "gap-1",
+  "1.5": "gap-1.5",
+  "2": "gap-2",
+  "2.5": "gap-2.5",
+  "3": "gap-3",
+  "3.5": "gap-3.5",
+  "4": "gap-4",
+  "5": "gap-5",
+  "6": "gap-6",
+  "7": "gap-7",
+  "8": "gap-8",
+  "9": "gap-9",
+  "10": "gap-10",
+  "11": "gap-11",
+  "12": "gap-12",
+  "14": "gap-14",
+  "16": "gap-16",
+  "20": "gap-20",
+  "24": "gap-24"
+};
+var ALIGN = {
+  start: "items-start",
+  "flex-start": "items-start",
+  end: "items-end",
+  "flex-end": "items-end",
+  center: "items-center",
+  baseline: "items-baseline",
+  stretch: "items-stretch"
+};
+var JUSTIFY = {
+  start: "justify-start",
+  "flex-start": "justify-start",
+  end: "justify-end",
+  "flex-end": "justify-end",
+  center: "justify-center",
+  between: "justify-between",
+  "space-between": "justify-between",
+  around: "justify-around",
+  "space-around": "justify-around",
+  evenly: "justify-evenly",
+  "space-evenly": "justify-evenly",
+  stretch: "justify-stretch"
+};
+var COLS = {
+  "1": "grid-cols-1",
+  "2": "grid-cols-2",
+  "3": "grid-cols-3",
+  "4": "grid-cols-4",
+  "5": "grid-cols-5",
+  "6": "grid-cols-6",
+  "7": "grid-cols-7",
+  "8": "grid-cols-8",
+  "9": "grid-cols-9",
+  "10": "grid-cols-10",
+  "11": "grid-cols-11",
+  "12": "grid-cols-12"
+};
+var ROWS = {
+  "1": "grid-rows-1",
+  "2": "grid-rows-2",
+  "3": "grid-rows-3",
+  "4": "grid-rows-4",
+  "5": "grid-rows-5",
+  "6": "grid-rows-6",
+  "7": "grid-rows-7",
+  "8": "grid-rows-8",
+  "9": "grid-rows-9",
+  "10": "grid-rows-10",
+  "11": "grid-rows-11",
+  "12": "grid-rows-12"
+};
+function layoutProps({ gap, align, justify, cols, rows, style }) {
+  const className = [];
+  const s = {};
+  if (gap !== void 0) {
+    const cls = typeof gap === "number" ? GAP[String(gap)] : void 0;
+    if (cls) className.push(cls);
+    else s.gap = typeof gap === "number" ? `${gap * 0.25}rem` : gap;
+  }
+  if (align) {
+    if (ALIGN[align]) className.push(ALIGN[align]);
+    else s.alignItems = align;
+  }
+  if (justify) {
+    if (JUSTIFY[justify]) className.push(JUSTIFY[justify]);
+    else s.justifyContent = justify;
+  }
+  if (cols !== void 0) {
+    const cls = typeof cols === "number" ? COLS[String(cols)] : void 0;
+    if (cls) className.push(cls);
+    else s.gridTemplateColumns = typeof cols === "number" ? `repeat(${cols}, minmax(0, 1fr))` : cols;
+  }
+  if (rows !== void 0) {
+    const cls = typeof rows === "number" ? ROWS[String(rows)] : void 0;
+    if (cls) className.push(cls);
+    else s.gridTemplateRows = typeof rows === "number" ? `repeat(${rows}, minmax(0, 1fr))` : rows;
+  }
+  const merged = { ...s, ...style };
+  return { className, style: Object.keys(merged).length ? merged : void 0 };
+}
+
+export {
+  layoutProps
+};

package/dist/{chunk-RTDUTWJ4.js → chunk-VMT7Y3AT.js}

@@ -1,10 +1,9 @@
 'use client';
 import {
-  enterExit,
   floatingSurface,
   menuLabel,
   menuSeparator
-} from "./chunk-KQPLFVFR.js";
+} from "./chunk-FLZD7HQY.js";
 import {
   field,
   fieldFocusVisible,
@@ -33,7 +32,7 @@ var Trigger2 = React.forwardRef(
         fieldFocusVisible,
         // Open reads like focus: the 2px primary border.
         "data-[state=open]:border-[var(--color-primary)] data-[state=open]:shadow-[inset_0_0_0_1px_var(--color-primary)]",
-        "data-[placeholder]:text-[var(--color-text-placeholder)]",
+        "data-[placeholder]:text-[var(--color-on-surface-muted)]",
         "disabled:cursor-not-allowed disabled:border-[var(--color-outline-variant)] disabled:bg-[var(--color-surface-container-low)] disabled:text-[var(--color-text-disabled)]",
         invalid && fieldInvalid,
         "[&>span]:line-clamp-1",
@@ -80,9 +79,7 @@ var Content2 = React.forwardRef(
       className: cn(
         "relative z-[var(--z-popover)] max-h-96 min-w-32 overflow-hidden",
         floatingSurface,
-        enterExit,
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-        "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+        "nx-motion nx-pop origin-[var(--radix-select-content-transform-origin)]",
         position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 w-[var(--radix-select-trigger-width)]",
         className
       ),
@@ -123,7 +120,7 @@ var Item2 = React.forwardRef(
     {
       ref,
       className: cn(
-        "relative flex w-full cursor-default select-none items-center rounded-[10px] py-2 pl-8 pr-2 text-body-sm text-[var(--color-on-surface)] outline-none",
+        "relative flex w-full cursor-default select-none items-center rounded-[10px] py-2 ps-8 pe-2 text-body-sm text-[var(--color-on-surface)] outline-none",
         // Highlight = the on-surface state layer at hover opacity.
         "focus:bg-[color-mix(in_srgb,var(--color-on-surface)_8%,transparent)]",
         "data-[disabled]:pointer-events-none data-[disabled]:text-[var(--color-text-disabled)]",
@@ -131,7 +128,7 @@ var Item2 = React.forwardRef(
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(RadixSelect.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: "xs", "aria-hidden": "true" }) }) }),
+        /* @__PURE__ */ jsx("span", { className: "absolute start-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(RadixSelect.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: "xs", "aria-hidden": "true" }) }) }),
         /* @__PURE__ */ jsx(RadixSelect.ItemText, { children })
       ]
     }

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

@@ -23,7 +23,7 @@ var ButtonGroup = React.forwardRef(
           attached ? [
             "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]"]
+            orientation === "horizontal" ? ["[&>*:first-child]:rounded-e-[6px]", "[&>*:last-child]:rounded-s-[6px]"] : ["[&>*:first-child]:rounded-b-[6px]", "[&>*:last-child]:rounded-t-[6px]"]
           ] : "gap-2",
           className
         ),

package/dist/chunk-WLRRMT6W.js

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

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

@@ -25,7 +25,7 @@ var Illustration = React.forwardRef(
     "div",
     {
       ref,
-      className: cn("text-[var(--color-text-muted)]", className),
+      className: cn("text-[var(--color-on-surface-muted)]", className),
       ...props
     }
   )
@@ -36,7 +36,7 @@ var Title = React.forwardRef(
     "h3",
     {
       ref,
-      className: cn("text-lg font-semibold text-[var(--color-text-primary)]", className),
+      className: cn("text-lg font-semibold text-[var(--color-on-surface)]", className),
       ...props
     }
   )
@@ -46,7 +46,7 @@ var Description = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   "p",
   {
     ref,
-    className: cn("max-w-sm text-sm text-[var(--color-text-muted)]", className),
+    className: cn("max-w-sm text-sm text-[var(--color-on-surface-muted)]", className),
     ...props
   }
 ));

package/dist/{chunk-UMC64NCT.js → chunk-WVBGQCYC.js}

@@ -1,4 +1,7 @@
 'use client';
+import {
+  toneTextClasses
+} from "./chunk-C6JRJ6JW.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -8,15 +11,15 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 var HelperText = React.forwardRef(
   ({ className, tone, style, children, ...props }, ref) => {
-    const toneStyle = tone ? { color: `var(--color-text-${tone})` } : {};
     return /* @__PURE__ */ jsx(
       "p",
       {
         ref,
         "data-tone": tone,
-        style: { ...toneStyle, ...style },
+        style,
         className: cn(
-          "text-sm text-[var(--color-text-muted)] leading-snug",
+          "text-sm text-[var(--color-on-surface-muted)] leading-snug",
+          tone && toneTextClasses[tone],
           className
         ),
         ...props,

package/dist/{chunk-QCNLE27O.js → chunk-WXRQ42DR.js}

@@ -1,7 +1,10 @@
 'use client';
 import {
   avatarVariants
-} from "./chunk-FHFVBOF3.js";
+} from "./chunk-2Y4WLNEZ.js";
+import {
+  useNexubMessages
+} from "./chunk-743Y5MY3.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -13,9 +16,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var avatarGroupVariants = cva("flex items-center", {
   variants: {
     spacing: {
-      sm: "[&>*:not(:first-child)]:-ml-3",
-      md: "[&>*:not(:first-child)]:-ml-2",
-      lg: "[&>*:not(:first-child)]:-ml-1"
+      sm: "[&>*:not(:first-child)]:-ms-3",
+      md: "[&>*:not(:first-child)]:-ms-2",
+      lg: "[&>*:not(:first-child)]:-ms-1"
     }
   },
   defaultVariants: {
@@ -24,6 +27,7 @@ var avatarGroupVariants = cva("flex items-center", {
 });
 var AvatarGroup = React.forwardRef(
   ({ className, max, size = "md", spacing, children, ...props }, ref) => {
+    const messages = useNexubMessages();
     const items = React.Children.toArray(children);
     const visibleItems = max !== void 0 ? items.slice(0, max) : items;
     const overflowCount = max !== void 0 && items.length > max ? items.length - max : 0;
@@ -44,18 +48,18 @@ var AvatarGroup = React.forwardRef(
             return /* @__PURE__ */ jsx(
               "span",
               {
-                className: "ring-2 ring-[var(--color-bg-default)] rounded-full inline-flex",
+                className: "ring-2 ring-[var(--color-surface)] rounded-full inline-flex",
                 children: childWithSize
               },
               child.key ?? index
             );
           }),
-          overflowCount > 0 && /* @__PURE__ */ jsx("span", { className: "ring-2 ring-[var(--color-bg-default)] rounded-full inline-flex", children: /* @__PURE__ */ jsx(
+          overflowCount > 0 && /* @__PURE__ */ jsx("span", { className: "ring-2 ring-[var(--color-surface)] rounded-full inline-flex", children: /* @__PURE__ */ jsx(
             "span",
             {
               className: cn(avatarVariants({ size }), "font-medium"),
               role: "img",
-              "aria-label": `${overflowCount} more`,
+              "aria-label": messages.moreCount(overflowCount),
               children: /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
                 "+",
                 overflowCount