@nexub/react 1.5.1 → 1.7.0

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

@@ -18,11 +18,11 @@ var textVariants = cva("", {
       label: "text-sm leading-none font-medium"
     },
     tone: {
-      default: "text-[var(--color-text-primary)]",
-      secondary: "text-[var(--color-text-secondary)]",
-      muted: "text-[var(--color-text-muted)]",
-      subtle: "text-[var(--color-text-subtle)]",
-      inverse: "text-[var(--color-text-inverse)]"
+      default: "text-[var(--color-on-surface)]",
+      secondary: "text-[var(--color-on-surface-variant)]",
+      muted: "text-[var(--color-on-surface-muted)]",
+      subtle: "text-[var(--color-outline)]",
+      inverse: "text-[var(--color-inverse-on-surface)]"
     },
     weight: {
       regular: "font-normal",
@@ -36,6 +36,14 @@ var textVariants = cva("", {
     tone: "default"
   }
 });
+var LINE_CLAMP = {
+  1: "line-clamp-1",
+  2: "line-clamp-2",
+  3: "line-clamp-3",
+  4: "line-clamp-4",
+  5: "line-clamp-5",
+  6: "line-clamp-6"
+};
 var Text = React.forwardRef(
   ({
     size,
@@ -50,12 +58,13 @@ var Text = React.forwardRef(
     ...rest
   }, ref) => {
     const Comp = asChild ? Slot : "p";
-    const clampStyle = lineClamp !== void 0 ? {
+    const clampClass = lineClamp !== void 0 ? LINE_CLAMP[lineClamp] : void 0;
+    const clampStyle = lineClamp !== void 0 && !clampClass ? {
       display: "-webkit-box",
       WebkitLineClamp: lineClamp,
       WebkitBoxOrient: "vertical",
       overflow: "hidden"
-    } : {};
+    } : void 0;
     return /* @__PURE__ */ jsx(
       Comp,
       {
@@ -63,9 +72,10 @@ var Text = React.forwardRef(
         className: cn(
           textVariants({ size, tone, weight }),
           truncate && "truncate",
+          clampClass,
           className
         ),
-        style: { ...clampStyle, ...style },
+        style: clampStyle ? { ...clampStyle, ...style } : style,
         ...rest,
         children
       }

package/dist/{chunk-7L3CGIRA.js → chunk-NQPGELMP.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";
@@ -33,12 +32,7 @@ var Content2 = React.forwardRef(
           "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-dropdown-menu-content-transform-origin)]",
           className
         ),
         ...props
@@ -97,11 +91,11 @@ var CheckboxItem2 = React.forwardRef(function DropdownMenuCheckboxItem({ classNa
     RadixDropdownMenu.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(RadixDropdownMenu.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(RadixDropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
         children
       ]
     }
@@ -113,10 +107,10 @@ var RadioItem2 = React.forwardRef(function DropdownMenuRadioItem({ className, ch
     RadixDropdownMenu.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(RadixDropdownMenu.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(RadixDropdownMenu.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
       ]
     }
@@ -136,7 +130,7 @@ var SubTrigger2 = React.forwardRef(function DropdownMenuSubTrigger({ className,
       ...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" })
       ]
     }
   );
@@ -151,12 +145,7 @@ var SubContent2 = React.forwardRef(function DropdownMenuSubContent({ className,
         "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-dropdown-menu-content-transform-origin)]",
         className
       ),
       ...props

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

@@ -1,4 +1,7 @@
 'use client';
+import {
+  useNexubMessages
+} from "./chunk-24ZFAXB2.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-NZR4UGUZ.js

@@ -0,0 +1,143 @@
+'use client';
+import {
+  useCalendarLocale
+} from "./chunk-MYP5ZTC3.js";
+import {
+  floatingSurface
+} from "./chunk-FLZD7HQY.js";
+import {
+  field,
+  fieldFocusVisible
+} from "./chunk-7SXR4PGO.js";
+import {
+  useNexubMessages
+} from "./chunk-24ZFAXB2.js";
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/DateRangePicker/DateRangePicker.tsx
+import * as React from "react";
+import * as RadixPopover from "@radix-ui/react-popover";
+import { DayPicker } from "react-day-picker";
+import { CalendarDays } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+function formatRange(range, placeholder, formatDate) {
+  if (!range) return placeholder;
+  if (range.from && range.to) {
+    return `${formatDate(range.from)} \u2013 ${formatDate(range.to)}`;
+  }
+  if (range.from) return `${formatDate(range.from)} \u2013 \u2026`;
+  return placeholder;
+}
+var calendarClassNames = {
+  months: "flex flex-col sm:flex-row gap-4",
+  month: "flex flex-col gap-4",
+  month_caption: "flex h-8 items-center justify-center",
+  caption_label: "text-label-lg text-[var(--color-on-surface)]",
+  // v9 renders nav beside the months, not in the caption: pin it to the caption row.
+  nav: "pointer-events-none absolute inset-x-3 top-3 flex h-8 items-center justify-between",
+  button_previous: "nx-state-layer pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-full text-[var(--color-on-surface)] disabled:pointer-events-none disabled:text-[var(--color-text-disabled)]",
+  button_next: "nx-state-layer pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-full text-[var(--color-on-surface)] disabled:pointer-events-none disabled:text-[var(--color-text-disabled)]",
+  month_grid: "w-full border-collapse",
+  weekdays: "flex",
+  weekday: "text-[var(--color-on-surface-muted)] w-8 text-label-sm flex-1 text-center",
+  week: "flex w-full mt-2",
+  day: "relative flex flex-1 justify-center p-0 text-center focus-within:z-20",
+  day_button: cn(
+    // Capsule day with a state layer; focus = the global ring. The transparent
+    // border carries today's primary outline.
+    "nx-state-layer inline-flex h-8 w-8 items-center justify-center rounded-full border border-transparent text-body-sm text-[var(--color-on-surface)]",
+    "disabled:pointer-events-none disabled:text-[var(--color-text-disabled)]"
+  ),
+  // Ends (and a lone start) are filled primary capsules; the middle is a
+  // primary-container band. `nx-range-middle` is a marker so `selected`
+  // skips middle days without depending on CSS order.
+  selected: "[&:not(.nx-range-middle)>button]:bg-[var(--color-primary)] [&:not(.nx-range-middle)>button]:text-[var(--color-on-primary)]",
+  // Half bands join the end capsules to the middle band (not on a one-day range).
+  // RTL (DayPicker's dir): the bands run the other way.
+  range_start: "nx-range-start [&:not(.nx-range-end)]:bg-[linear-gradient(to_right,transparent_50%,var(--color-primary-container)_50%)] rtl:[&:not(.nx-range-end)]:bg-[linear-gradient(to_left,transparent_50%,var(--color-primary-container)_50%)]",
+  range_end: "nx-range-end [&:not(.nx-range-start)]:bg-[linear-gradient(to_left,transparent_50%,var(--color-primary-container)_50%)] rtl:[&:not(.nx-range-start)]:bg-[linear-gradient(to_right,transparent_50%,var(--color-primary-container)_50%)]",
+  range_middle: "nx-range-middle bg-[var(--color-primary-container)] [&>button]:text-[var(--color-on-primary-container)]",
+  today: "[&>button]:border-[var(--color-primary)]",
+  outside: "[&:not([data-selected]):not([data-disabled])>button]:text-[var(--color-on-surface-muted)]",
+  disabled: "",
+  hidden: "invisible"
+};
+var DateRangePicker = React.forwardRef(function DateRangePicker2({
+  value,
+  onChange,
+  placeholder: placeholderProp,
+  disabled = false,
+  minDate,
+  maxDate,
+  className,
+  id,
+  "aria-label": ariaLabel,
+  locale: localeProp
+}, ref) {
+  const [open, setOpen] = React.useState(false);
+  const messages = useNexubMessages();
+  const calendar = useCalendarLocale(localeProp);
+  const placeholder = placeholderProp ?? messages.pickDateRange;
+  const display = formatRange(value, placeholder, calendar.format);
+  const label = ariaLabel ? `${ariaLabel}: ${display}` : display;
+  return /* @__PURE__ */ jsxs(RadixPopover.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        id,
+        disabled,
+        "aria-label": label,
+        className: cn(
+          "inline-flex h-control-md w-full items-center justify-start gap-2 px-3.5 text-body-md",
+          field,
+          fieldFocusVisible,
+          // Open reads like focus: the 2px primary border (as Select).
+          "data-[state=open]:border-[var(--color-primary)] data-[state=open]:shadow-[inset_0_0_0_1px_var(--color-primary)]",
+          "disabled:cursor-not-allowed disabled:border-[var(--color-outline-variant)] disabled:bg-[var(--color-surface-container-low)] disabled:text-[var(--color-text-disabled)]",
+          !value && "text-[var(--color-on-surface-muted)]",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(CalendarDays, { size: "sm", "aria-hidden": "true" }),
+          display
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsx(
+      RadixPopover.Content,
+      {
+        align: "start",
+        className: cn(
+          "z-[var(--z-popover)] outline-none",
+          floatingSurface,
+          "nx-motion nx-pop origin-[var(--radix-popover-content-transform-origin)]"
+        ),
+        children: /* @__PURE__ */ jsx(
+          DayPicker,
+          {
+            mode: "range",
+            selected: value,
+            defaultMonth: value?.from,
+            onSelect: onChange,
+            numberOfMonths: 2,
+            startMonth: minDate,
+            endMonth: maxDate,
+            initialFocus: true,
+            showOutsideDays: false,
+            className: "relative p-3",
+            classNames: calendarClassNames,
+            ...calendar.dayPickerProps
+          }
+        )
+      }
+    ) })
+  ] });
+});
+DateRangePicker.displayName = "DateRangePicker";
+
+export {
+  DateRangePicker
+};

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

@@ -1,4 +1,8 @@
 'use client';
+import {
+  disabledContainer,
+  pressable
+} from "./chunk-7SXR4PGO.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -15,6 +19,11 @@ import {
 } from "@tanstack/react-table";
 import { ArrowUp, ArrowDown, ChevronsUpDown } from "@nexub/icons";
 import { jsx, jsxs } from "react/jsx-runtime";
+var pagerButton = cn(
+  pressable,
+  "border border-[var(--color-outline-variant)] bg-transparent px-4 py-2 min-h-[44px] text-label-lg text-[var(--color-on-surface)]",
+  disabledContainer
+);
 var TableRoot = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "w-full overflow-auto", children: /* @__PURE__ */ jsx(
   "table",
   {
@@ -28,7 +37,7 @@ var TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   "thead",
   {
     ref,
-    className: cn("[&_tr]:border-b border-[var(--color-border-default)]", className),
+    className: cn("[&_tr]:border-b border-[var(--color-outline-variant)]", className),
     ...props
   }
 ));
@@ -47,7 +56,7 @@ var TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   {
     ref,
     className: cn(
-      "border-b border-[var(--color-border-default)] transition-colors hover:bg-[var(--color-bg-subtle)] data-[state=selected]:bg-[var(--color-bg-subtle)]",
+      "border-b border-[var(--color-outline-variant)] transition-colors hover:bg-[color-mix(in_srgb,var(--color-on-surface)_8%,transparent)] data-[state=selected]:bg-[var(--color-surface-container-low)]",
       className
     ),
     ...props
@@ -59,7 +68,7 @@ var TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "h-10 px-4 text-left align-middle text-xs font-medium text-[var(--color-text-muted)] [&:has([role=checkbox])]:pr-0",
+      "h-10 px-4 text-start align-middle text-xs font-medium text-[var(--color-on-surface-muted)] [&:has([role=checkbox])]:pe-0",
       className
     ),
     ...props
@@ -71,7 +80,7 @@ var TableCell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "px-4 py-3 align-middle text-[var(--color-text-primary)] [&:has([role=checkbox])]:pr-0",
+      "px-4 py-3 align-middle text-[var(--color-on-surface)] [&:has([role=checkbox])]:pe-0",
       className
     ),
     ...props
@@ -125,7 +134,7 @@ function DataTable({
             "button",
             {
               onClick: header.column.getToggleSortingHandler(),
-              className: "inline-flex items-center gap-1 hover:text-[var(--color-text-primary)]",
+              className: "inline-flex items-center gap-1 hover:text-[var(--color-on-surface)]",
               children: [
                 flexRender(header.column.columnDef.header, header.getContext()),
                 header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { size: "xs", "aria-hidden": "true" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { size: "xs", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { size: "xs", className: "opacity-40", "aria-hidden": "true" })
@@ -146,12 +155,12 @@ function DataTable({
         TableCell,
         {
           colSpan: columns.length,
-          className: "h-24 text-center text-[var(--color-text-muted)]",
+          className: "h-24 text-center text-[var(--color-on-surface-muted)]",
           children: "No results."
         }
       ) }) })
     ] }),
-    pagination && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 text-sm text-[var(--color-text-muted)]", children: [
+    pagination && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 text-sm text-[var(--color-on-surface-muted)]", children: [
       /* @__PURE__ */ jsxs("span", { children: [
         "Page ",
         table.getState().pagination.pageIndex + 1,
@@ -164,7 +173,7 @@ function DataTable({
           {
             onClick: () => table.previousPage(),
             disabled: !table.getCanPreviousPage(),
-            className: "rounded border border-[var(--color-border-default)] px-3 py-2 min-h-[44px] disabled:opacity-50",
+            className: pagerButton,
             children: "Previous"
           }
         ),
@@ -173,7 +182,7 @@ function DataTable({
           {
             onClick: () => table.nextPage(),
             disabled: !table.getCanNextPage(),
-            className: "rounded border border-[var(--color-border-default)] px-3 py-2 min-h-[44px] disabled:opacity-50",
+            className: pagerButton,
             children: "Next"
           }
         )

package/dist/{chunk-JSD3H7WV.js → chunk-OYCK6BRG.js}

@@ -7,7 +7,7 @@ import {
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 var Root = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx("table", { ref, className: cn("w-full caption-bottom text-sm", className), ...props }) })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx("table", { ref, className: cn("w-full caption-bottom text-sm tabular-nums", className), ...props }) })
 );
 Root.displayName = "Table.Root";
 var Header = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
@@ -19,7 +19,7 @@ var TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "border-t bg-[var(--color-bg-subtle)] font-medium [&>tr]:last:border-b-0",
+      "border-t bg-[var(--color-surface-container-low)] font-medium [&>tr]:last:border-b-0",
       className
     ),
     ...props
@@ -32,7 +32,7 @@ var Row = React.forwardRef(
     {
       ref,
       className: cn(
-        "border-b border-[var(--color-border-default)] transition-colors hover:bg-[var(--color-bg-subtle)]/50 data-[state=selected]:bg-[var(--color-bg-subtle)]",
+        "border-b border-[var(--color-outline-variant)] transition-colors hover:bg-[color-mix(in_srgb,var(--color-surface-container-low)_50%,transparent)] data-[state=selected]:bg-[var(--color-surface-container-low)]",
         className
       ),
       ...props
@@ -45,7 +45,7 @@ var Head = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ js
   {
     ref,
     className: cn(
-      "h-10 px-4 text-left align-middle font-medium text-[var(--color-text-muted)] [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      "h-10 px-4 text-start align-middle font-medium text-[var(--color-on-surface-muted)] [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-[2px]",
       className
     ),
     ...props
@@ -57,7 +57,7 @@ var Cell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ js
   {
     ref,
     className: cn(
-      "p-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      "p-4 align-middle [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-[2px]",
       className
     ),
     ...props
@@ -68,7 +68,7 @@ var Caption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   "caption",
   {
     ref,
-    className: cn("mt-4 text-sm text-[var(--color-text-muted)]", className),
+    className: cn("mt-4 text-sm text-[var(--color-on-surface-muted)]", className),
     ...props
   }
 ));

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

@@ -1,4 +1,7 @@
 'use client';
+import {
+  useIsomorphicLayoutEffect
+} from "./chunk-NHUQLIHL.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -8,7 +11,7 @@ import * as React from "react";
 import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
 var progressTrackVariants = cva(
-  "relative w-full overflow-hidden rounded-full bg-[var(--color-bg-muted)]",
+  "relative w-full overflow-hidden rounded-full bg-[var(--color-surface-container-high)]",
   {
     variants: {
       size: {
@@ -27,15 +30,15 @@ var progressFillVariants = cva(
   {
     variants: {
       tone: {
-        neutral: "bg-[var(--color-neutral-500)]",
-        info: "bg-[var(--color-semantic-info-default)]",
-        success: "bg-[var(--color-semantic-success-default)]",
-        warning: "bg-[var(--color-semantic-warning-default)]",
-        danger: "bg-[var(--color-semantic-error-default)]",
-        leap: "bg-[var(--color-leap-500)]",
-        bookub: "bg-[var(--color-bookub-500)]",
-        payub: "bg-[var(--color-payub-500)]",
-        founderub: "bg-[var(--color-founderub-500)]"
+        neutral: "bg-[var(--color-outline)]",
+        info: "bg-[var(--color-info)]",
+        success: "bg-[var(--color-success)]",
+        warning: "bg-[var(--color-warning)]",
+        danger: "bg-[var(--color-error)]",
+        leap: "bg-[var(--color-leap)]",
+        bookub: "bg-[var(--color-bookub)]",
+        payub: "bg-[var(--color-payub)]",
+        founderub: "bg-[var(--color-founderub)]"
       },
       animated: {
         true: "bg-[length:200%_100%] animate-[progress-stripes_1s_linear_infinite]"
@@ -58,6 +61,10 @@ var Progress = React.forwardRef(
   }, ref) => {
     const clampedValue = Math.min(Math.max(value, 0), max);
     const percentage = clampedValue / max * 100;
+    const fillRef = React.useRef(null);
+    useIsomorphicLayoutEffect(() => {
+      fillRef.current?.style.setProperty("width", `${percentage}%`);
+    }, [percentage]);
     const isIndeterminate = value === void 0 || value === null;
     return /* @__PURE__ */ jsx(
       "div",
@@ -76,7 +83,8 @@ var Progress = React.forwardRef(
               progressFillVariants({ tone }),
               animated && "animate-pulse"
             ),
-            style: { width: `${percentage}%` }
+            ref: fillRef,
+            "data-part": "fill"
           }
         )
       }

package/dist/{chunk-QD7H3WV3.js → chunk-PGDXFBKT.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   floatingSurface
-} from "./chunk-KQPLFVFR.js";
+} from "./chunk-FLZD7HQY.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -56,7 +56,7 @@ var Trigger2 = React.forwardRef(
           ChevronDown,
           {
             size: "xs",
-            className: "relative ml-1 transition duration-300 group-data-[state=open]:rotate-180",
+            className: "relative ms-1 transition duration-300 group-data-[state=open]:rotate-180",
             "aria-hidden": "true"
           }
         )
@@ -71,7 +71,7 @@ var Content2 = React.forwardRef(
     {
       ref,
       className: cn(
-        "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
+        "nx-motion start-0 top-0 w-full md:absolute md:w-auto",
         className
       ),
       ...props
@@ -94,14 +94,14 @@ var Link2 = React.forwardRef(
 );
 Link2.displayName = "NavigationMenu.Link";
 var Viewport2 = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-full flex justify-center", children: /* @__PURE__ */ jsx(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "absolute start-0 top-full flex justify-center", children: /* @__PURE__ */ jsx(
     RadixNav.Viewport,
     {
       ref,
       className: cn(
-        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden",
+        "nx-motion nx-pop origin-top relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden",
         floatingSurface,
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        "md:w-[var(--radix-navigation-menu-viewport-width)]",
         className
       ),
       ...props
@@ -115,11 +115,11 @@ var Indicator2 = React.forwardRef(
     {
       ref,
       className: cn(
-        "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=visible]:animate-in data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+        "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden transition-opacity duration-effects-fast ease-effects-fast data-[state=hidden]:opacity-0",
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-[var(--color-border-default)] shadow-md" })
+      children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-ss-[2px] bg-[var(--color-outline-variant)] shadow-elevation-1" })
     }
   )
 );

package/dist/{chunk-NIX4SEKM.js → chunk-PREMZMLU.js}

@@ -1,4 +1,7 @@
 'use client';
+import {
+  toneTextClasses
+} from "./chunk-C6JRJ6JW.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -27,16 +30,16 @@ var labelVariants = cva(
 );
 var Label = React.forwardRef(
   ({ className, size, required, disabled, tone, style, children, ...props }, ref) => {
-    const toneStyle = tone ? { color: `var(--color-text-${tone})` } : {};
     return /* @__PURE__ */ jsxs(
       "label",
       {
         ref,
         "data-tone": tone,
-        style: { ...toneStyle, ...style },
+        style,
         className: cn(
           labelVariants({ size, disabled }),
-          "text-[var(--color-text-primary)]",
+          "text-[var(--color-on-surface)]",
+          tone && toneTextClasses[tone],
           className
         ),
         ...props,
@@ -46,7 +49,7 @@ var Label = React.forwardRef(
             "span",
             {
               "aria-hidden": "true",
-              className: "text-[var(--color-danger-500)] leading-none",
+              className: "text-[var(--color-error)] leading-none",
               children: "*"
             }
           )