@nexub/react 1.5.0 → 1.6.0

package/dist/chunk-NSVXGOR3.js

@@ -0,0 +1,54 @@
+'use client';
+import {
+  useNexubMessages
+} from "./chunk-743Y5MY3.js";
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/ThinkingIndicator/ThinkingIndicator.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var fallbackMessages = { thinking: "Thinking" };
+var ThinkingIndicator = React.forwardRef(
+  ({ label, size = "md", messages: messagesProp, className, ...props }, ref) => {
+    const m = {
+      ...fallbackMessages,
+      ...useNexubMessages(),
+      ...messagesProp
+    };
+    const text = label === void 0 ? m.thinking : label;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "status",
+        "aria-live": "polite",
+        className: cn(
+          "inline-flex items-center text-[var(--color-on-surface-variant)]",
+          size === "sm" ? "gap-2 text-label-md" : "gap-2.5 text-body-md",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "nx-morph shrink-0 rounded-full bg-[var(--color-primary)]",
+                size === "sm" ? "size-4" : "size-5"
+              )
+            }
+          ),
+          text === null ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: m.thinking }) : /* @__PURE__ */ jsx("span", { className: "nx-shimmer", children: text })
+        ]
+      }
+    );
+  }
+);
+ThinkingIndicator.displayName = "ThinkingIndicator";
+
+export {
+  ThinkingIndicator
+};

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-TJCHA3OI.js → chunk-O626NJEM.js}

@@ -1,7 +1,10 @@
 'use client';
 import {
   Input
-} from "./chunk-IK23Q2OF.js";
+} from "./chunk-JHVYI5GK.js";
+import {
+  useNexubMessages
+} from "./chunk-743Y5MY3.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -22,6 +25,7 @@ var SearchInput = React.forwardRef(
       if (!controlled) setInternalValue(e.target.value);
       onChange?.(e);
     };
+    const messages = useNexubMessages();
     const handleClear = () => {
       if (!controlled) setInternalValue("");
       onClear?.();
@@ -31,10 +35,9 @@ var SearchInput = React.forwardRef(
       {
         type: "button",
         onClick: handleClear,
-        "aria-label": "Clear search",
+        "aria-label": messages.clearSearch,
         className: cn(
-          "shrink-0 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors",
-          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--color-ring-default)] rounded"
+          "shrink-0 rounded-full text-[var(--color-on-surface-muted)] hover:text-[var(--color-on-surface)] transition-colors"
         ),
         children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4", "aria-hidden": "true" })
       }

package/dist/chunk-O74XEHLA.js

@@ -0,0 +1,331 @@
+'use client';
+import {
+  useIsomorphicLayoutEffect
+} from "./chunk-NHUQLIHL.js";
+import {
+  useNexubMessages
+} from "./chunk-743Y5MY3.js";
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/Toast/Toast.tsx
+import * as React from "react";
+import * as RadixToast from "@radix-ui/react-toast";
+import { jsx } from "react/jsx-runtime";
+var Provider2 = RadixToast.Provider;
+var Viewport2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixToast.Viewport,
+    {
+      ref,
+      className: cn(
+        "fixed top-0 end-0 z-[var(--z-toast,2000)] flex max-h-screen w-full flex-col-reverse p-4 sm:max-w-sm gap-2",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Viewport2.displayName = "Toast.Viewport";
+var Root2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixToast.Root,
+    {
+      ref,
+      className: cn(
+        // Snackbar: the inverse surface stands out from any page, light or dark.
+        "group pointer-events-auto relative flex w-full items-center justify-between gap-3 overflow-hidden rounded-shape-container bg-[var(--color-inverse-surface)] py-3 ps-4 pe-2 text-[var(--color-inverse-on-surface)] shadow-elevation-2",
+        "duration-spatial-default ease-spatial-default data-[state=closed]:duration-effects-fast",
+        // Enter/exit slide from the right edge, where the viewport sits.
+        "nx-motion [--nx-x:calc(100%+1rem)] rtl:[--nx-x:calc(-100%-1rem)]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Root2.displayName = "Toast.Root";
+var Title2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixToast.Title, { ref, className: cn("text-title-sm", className), ...props })
+);
+Title2.displayName = "Toast.Title";
+var Description2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixToast.Description,
+    {
+      ref,
+      className: cn("text-body-sm text-[color-mix(in_srgb,var(--color-inverse-on-surface)_80%,transparent)]", className),
+      ...props
+    }
+  )
+);
+Description2.displayName = "Toast.Description";
+var Action2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixToast.Action,
+    {
+      ref,
+      className: cn(
+        "nx-state-layer relative inline-flex min-h-[44px] min-w-[44px] shrink-0 items-center justify-center rounded-shape-control px-3 text-label-lg text-[var(--color-inverse-primary)]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Action2.displayName = "Toast.Action";
+var Close2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixToast.Close, { ref, className: cn("nx-state-layer relative grid h-8 w-8 place-items-center rounded-full", className), ...props })
+);
+Close2.displayName = "Toast.Close";
+var Toast = { Provider: Provider2, Viewport: Viewport2, Root: Root2, Title: Title2, Description: Description2, Action: Action2, Close: Close2 };
+
+// src/components/Toast/Toaster.tsx
+import * as React2 from "react";
+import * as RadixToast2 from "@radix-ui/react-toast";
+import { X } from "@nexub/icons";
+
+// src/components/Toast/useToast.ts
+import { useState, useEffect } from "react";
+var g = typeof window !== "undefined" ? (() => {
+  const _g = globalThis;
+  _g.__nexub_toast_items ??= [];
+  _g.__nexub_toast_listeners ??= /* @__PURE__ */ new Set();
+  _g.__nexub_toast_counter ??= 0;
+  return _g;
+})() : { __nexub_toast_items: [], __nexub_toast_listeners: /* @__PURE__ */ new Set(), __nexub_toast_counter: 0 };
+function notify() {
+  g.__nexub_toast_listeners.forEach((l) => l([...g.__nexub_toast_items]));
+}
+function add(item) {
+  const id = String(++g.__nexub_toast_counter);
+  g.__nexub_toast_items = [...g.__nexub_toast_items, { ...item, id }];
+  notify();
+  return id;
+}
+function useToastStore() {
+  const [state, setState] = useState([...g.__nexub_toast_items]);
+  useEffect(() => {
+    g.__nexub_toast_listeners.add(setState);
+    return () => {
+      g.__nexub_toast_listeners.delete(setState);
+    };
+  }, []);
+  return state;
+}
+var closeFired = /* @__PURE__ */ new Set();
+function fireToastClose(item) {
+  if (closeFired.has(item.id)) return;
+  closeFired.add(item.id);
+  item.onClose?.();
+}
+function dismiss(id) {
+  const removed = id ? g.__nexub_toast_items.filter((i) => i.id === id) : g.__nexub_toast_items;
+  g.__nexub_toast_items = id ? g.__nexub_toast_items.filter((i) => i.id !== id) : [];
+  notify();
+  for (const item of removed) {
+    fireToastClose(item);
+    closeFired.delete(item.id);
+  }
+}
+function undoable(title, { onUndo, onCommit, undoLabel, description, duration }) {
+  let undone = false;
+  return add({
+    title,
+    tone: "neutral",
+    description,
+    duration,
+    undo: { label: undoLabel, onUndo: () => {
+      undone = true;
+      onUndo();
+    } },
+    onClose: () => {
+      if (!undone) onCommit?.();
+    }
+  });
+}
+var toast = {
+  success: (title, opts) => add({ title, tone: "success", ...opts }),
+  error: (title, opts) => add({ title, tone: "error", ...opts }),
+  info: (title, opts) => add({ title, tone: "info", ...opts }),
+  warning: (title, opts) => add({ title, tone: "warning", ...opts }),
+  custom: (title, opts) => add({ title, tone: "neutral", ...opts }),
+  /** A toast with an Undo action: Undo calls `onUndo`; any other close calls `onCommit`, once. */
+  undoable,
+  dismiss
+};
+
+// src/components/Toast/Toaster.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var toneMap = {
+  success: "border-s-4 border-[var(--color-success)]",
+  error: "border-s-4 border-[var(--color-error)]",
+  warning: "border-s-4 border-[var(--color-warning)]",
+  info: "border-s-4 border-[var(--color-info)]",
+  neutral: ""
+};
+var GAP = 8;
+function Toaster({ expand = false, visibleToasts = 3 }) {
+  const toasts = useToastStore();
+  const messages = useNexubMessages();
+  const [closed, setClosed] = React2.useState(() => /* @__PURE__ */ new Set());
+  const [hovered, setHovered] = React2.useState(false);
+  const [focused, setFocused] = React2.useState(false);
+  const order = toasts.filter((t) => !closed.has(t.id)).map((t) => t.id).reverse();
+  const expanded = expand || order.length > 0 && (hovered || focused);
+  const viewportRef = React2.useRef(null);
+  const heights = React2.useRef(/* @__PURE__ */ new Map());
+  const state = React2.useRef({ order, expanded, visibleToasts });
+  state.current = { order, expanded, visibleToasts };
+  const layout = React2.useCallback(() => {
+    const ol = viewportRef.current;
+    if (!ol) return;
+    const { order: order2, expanded: expanded2, visibleToasts: visibleToasts2 } = state.current;
+    let offset = 0;
+    let front = 0;
+    let stack = 0;
+    order2.forEach((id, i) => {
+      const el = ol.querySelector(`[data-toast-id="${id}"]`);
+      if (!el) return;
+      if (i === 0 || expanded2 || !heights.current.has(id)) heights.current.set(id, el.offsetHeight);
+      const h = heights.current.get(id);
+      el.style.setProperty("--nx-toast-index", String(i));
+      el.style.setProperty("--nx-toast-offset", `${offset}px`);
+      if (i === 0) front = h;
+      if (i < visibleToasts2) stack = offset + h;
+      offset += h + GAP;
+    });
+    ol.style.setProperty("--nx-front-height", `${front}px`);
+    ol.style.setProperty("--nx-stack-height", `${expanded2 ? stack : front}px`);
+  }, []);
+  useIsomorphicLayoutEffect(layout);
+  useIsomorphicLayoutEffect(() => {
+    const ol = viewportRef.current;
+    if (!ol) return;
+    const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(layout);
+    const observe = () => {
+      for (const li of Array.from(ol.children)) ro?.observe(li);
+      layout();
+    };
+    const mo = new MutationObserver(observe);
+    mo.observe(ol, { childList: true });
+    observe();
+    const region = ol.parentElement ?? ol;
+    const enter = () => setHovered(true);
+    const leave = () => setHovered(false);
+    const focusIn = () => setFocused(true);
+    const focusOut = (e) => {
+      if (!region.contains(e.relatedTarget)) setFocused(false);
+    };
+    region.addEventListener("pointermove", enter);
+    region.addEventListener("pointerleave", leave);
+    region.addEventListener("focusin", focusIn);
+    region.addEventListener("focusout", focusOut);
+    return () => {
+      mo.disconnect();
+      ro?.disconnect();
+      region.removeEventListener("pointermove", enter);
+      region.removeEventListener("pointerleave", leave);
+      region.removeEventListener("focusin", focusIn);
+      region.removeEventListener("focusout", focusOut);
+    };
+  }, [layout]);
+  React2.useEffect(() => {
+    if (order.length === 0) {
+      setHovered(false);
+      setFocused(false);
+    }
+  }, [order.length]);
+  return /* @__PURE__ */ jsxs(RadixToast2.Provider, { swipeDirection: "right", children: [
+    toasts.map((t) => {
+      const i = order.indexOf(t.id);
+      const action = t.action ?? (t.undo && { label: t.undo.label ?? messages.undo, onClick: t.undo.onUndo });
+      return /* @__PURE__ */ jsxs(
+        RadixToast2.Root,
+        {
+          "data-toast-id": t.id,
+          "data-front": i === -1 ? void 0 : i === 0,
+          "data-hidden": i === -1 ? void 0 : i >= visibleToasts,
+          onOpenChange: (open) => {
+            if (open) return;
+            fireToastClose(t);
+            setClosed((s) => new Set(s).add(t.id));
+            setTimeout(() => {
+              toast.dismiss(t.id);
+              setClosed((s) => {
+                const next = new Set(s);
+                next.delete(t.id);
+                return next;
+              });
+            }, 1e3);
+          },
+          className: cn(
+            "group pointer-events-auto absolute inset-x-4 top-4 flex items-center justify-between gap-3 overflow-hidden rounded-shape-container bg-[var(--color-inverse-surface)] py-3 ps-4 pe-2 text-[var(--color-inverse-on-surface)] shadow-elevation-2",
+            // Stack: older toasts sit behind, scaled from their bottom edge so it peeks out.
+            // Transition-only timing: duration-*/ease-* utilities would also retime nx-motion's enter/exit keyframes.
+            "origin-bottom transition-[transform,opacity] [transition-duration:var(--motion-spring-spatial-default-duration)] [transition-timing-function:var(--motion-spring-spatial-default-easing)]",
+            "translate-y-[calc(var(--nx-toast-index,0)*var(--nx-toast-step))] scale-[calc(1_-_var(--nx-toast-index,0)*var(--nx-toast-shrink))]",
+            "group-data-[expanded=true]/toaster:translate-y-[var(--nx-toast-offset,0px)] group-data-[expanded=true]/toaster:scale-100",
+            // Collapsing settles faster than expanding.
+            "group-data-[expanded=false]/toaster:[transition-duration:var(--motion-spring-effects-fast-duration)] group-data-[expanded=false]/toaster:[transition-timing-function:var(--motion-spring-effects-fast-easing)]",
+            "group-data-[expanded=false]/toaster:data-[front=false]:h-[var(--nx-front-height)]",
+            // Collapsed, older toasts show only their edge: hide their content until expanded.
+            "[&>*]:transition-opacity [&>*]:duration-effects-fast group-data-[expanded=false]/toaster:[&[data-front=false]>*]:opacity-0",
+            // Beyond visibleToasts: visually hidden, still in the DOM and its live region.
+            "data-[hidden=true]:pointer-events-none data-[hidden=true]:opacity-0",
+            // Reduced motion: no travel or scale (step/shrink are 0); collapsed shows only the front.
+            "motion-reduce:[transition-property:opacity] motion-reduce:group-data-[expanded=false]/toaster:data-[front=false]:pointer-events-none motion-reduce:group-data-[expanded=false]/toaster:data-[front=false]:opacity-0",
+            "data-[state=closed]:duration-effects-fast",
+            "data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none",
+            "nx-motion [--nx-x:calc(100%+1rem)] rtl:[--nx-x:calc(-100%-1rem)]",
+            toneMap[t.tone ?? "neutral"]
+          ),
+          duration: t.duration ?? 5e3,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
+              /* @__PURE__ */ jsx2(RadixToast2.Title, { className: "text-title-sm", children: t.title }),
+              t.description && /* @__PURE__ */ jsx2(RadixToast2.Description, { className: "text-body-sm text-[color-mix(in_srgb,var(--color-inverse-on-surface)_80%,transparent)]", children: t.description })
+            ] }),
+            action && /* @__PURE__ */ jsx2(
+              RadixToast2.Action,
+              {
+                altText: action.label,
+                onClick: action.onClick,
+                className: "nx-state-layer relative inline-flex min-h-[44px] min-w-[44px] shrink-0 items-center justify-center rounded-shape-control px-3 text-label-lg text-[var(--color-inverse-primary)]",
+                children: action.label
+              }
+            ),
+            /* @__PURE__ */ jsxs(RadixToast2.Close, { className: "nx-state-layer relative grid h-8 w-8 place-items-center rounded-full transition-opacity [@media(hover:hover)]:opacity-0 group-hover:opacity-100 focus-visible:opacity-100", children: [
+              /* @__PURE__ */ jsx2(X, { size: "sm", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx2("span", { className: "sr-only", children: messages.close })
+            ] })
+          ]
+        },
+        t.id
+      );
+    }),
+    /* @__PURE__ */ jsx2(
+      RadixToast2.Viewport,
+      {
+        ref: viewportRef,
+        label: messages.notifications,
+        "data-expanded": expanded,
+        className: cn(
+          "group/toaster fixed top-0 end-0 z-[var(--z-toast,2000)] max-h-screen w-full p-4 sm:max-w-sm",
+          // Collapsed: the front toast's height (older edges peek below); expanded: the whole list.
+          "h-[calc(var(--nx-stack-height,0px)+2rem)]",
+          "[--nx-toast-step:10px] [--nx-toast-shrink:0.05] motion-reduce:[--nx-toast-step:0px] motion-reduce:[--nx-toast-shrink:0]"
+        )
+      }
+    )
+  ] });
+}
+Toaster.displayName = "Toaster";
+
+export {
+  Toast,
+  useToastStore,
+  toast,
+  Toaster
+};

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"
           }
         )
       }