@nexub/react 1.5.1 → 1.7.0

package/dist/{chunk-4SSUM4CL.js → chunk-QUNH4BFR.js}

@@ -1,4 +1,7 @@
 'use client';
+import {
+  useNexubMessages
+} from "./chunk-24ZFAXB2.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -8,7 +11,7 @@ import * as React from "react";
 import { ChevronRight, MoreHorizontal } from "@nexub/icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Root = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": "breadcrumb", className: cn("", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": useNexubMessages().breadcrumb, className: cn("", className), ...props })
 );
 Root.displayName = "Breadcrumb.Root";
 var List = React.forwardRef(
@@ -17,7 +20,7 @@ var List = React.forwardRef(
     {
       ref,
       className: cn(
-        "flex flex-wrap items-center gap-1.5 text-sm text-[var(--color-text-muted)] sm:gap-2.5",
+        "flex flex-wrap items-center gap-1.5 text-sm text-[var(--color-on-surface-muted)] sm:gap-2.5",
         className
       ),
       ...props
@@ -33,7 +36,7 @@ var Link = React.forwardRef(({ className, children, ...props }, ref) => /* @__PU
   "a",
   {
     ref,
-    className: cn("transition-colors hover:text-[var(--color-text-primary)]", className),
+    className: cn("transition-colors hover:text-[var(--color-on-surface)]", className),
     ...props,
     children
   }
@@ -47,7 +50,7 @@ var Page = React.forwardRef(
       role: "link",
       "aria-current": "page",
       "aria-disabled": "true",
-      className: cn("font-normal text-[var(--color-text-primary)]", className),
+      className: cn("font-normal text-[var(--color-on-surface)]", className),
       ...props
     }
   )
@@ -62,7 +65,7 @@ var Separator = ({
     role: "presentation",
     "aria-hidden": "true",
     className: cn("[&>svg]:h-3.5 [&>svg]:w-3.5", className),
-    children: children ?? /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })
+    children: children ?? /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: "rtl:-scale-x-100" })
   }
 );
 Separator.displayName = "Breadcrumb.Separator";
@@ -75,7 +78,7 @@ var Ellipsis = ({ className, ...props }) => /* @__PURE__ */ jsxs(
     ...props,
     children: [
       /* @__PURE__ */ jsx(MoreHorizontal, { size: "sm", "aria-hidden": "true" }),
-      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More" })
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: useNexubMessages().breadcrumbMore })
     ]
   }
 );

package/dist/{chunk-FHFVBOF3.js → chunk-QUYOV2ZJ.js}

@@ -8,7 +8,7 @@ import * as React from "react";
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
 var avatarVariants = cva(
-  "relative inline-flex items-center justify-center shrink-0 rounded-full overflow-hidden bg-[var(--color-bg-muted)] text-[var(--color-text-muted)] font-medium select-none",
+  "relative inline-flex items-center justify-center shrink-0 rounded-full overflow-hidden bg-[var(--color-surface-container-high)] text-[var(--color-on-surface-muted)] font-medium select-none",
   {
     variants: {
       size: {
@@ -52,13 +52,15 @@ var Avatar = React.forwardRef(
     const [imgError, setImgError] = React.useState(false);
     const showImage = Boolean(src) && !imgError;
     const initials = name ? getInitials(name) : null;
+    const labelled = Boolean(name || props["aria-label"] || props["aria-labelledby"]);
     return /* @__PURE__ */ jsxs(
       "span",
       {
         ref,
         className: cn(avatarVariants({ size }), className),
         "aria-label": name ?? void 0,
-        role: "img",
+        role: labelled ? "img" : void 0,
+        "aria-hidden": labelled ? void 0 : true,
         ...props,
         children: [
           showImage ? /* @__PURE__ */ jsx(
@@ -86,9 +88,9 @@ var Avatar = React.forwardRef(
             "span",
             {
               className: cn(
-                "absolute bottom-0 right-0 rounded-full ring-2 ring-[var(--color-bg-default)]",
+                "absolute bottom-0 end-0 rounded-full ring-2 ring-[var(--color-surface)]",
                 badgeSizeMap[size ?? "md"],
-                badgeColor ?? "bg-[var(--color-semantic-success-default)]"
+                badgeColor ?? "bg-[var(--color-success)]"
               ),
               "aria-hidden": "true"
             }

package/dist/{chunk-KM6Z3VTI.js → chunk-QVTVDL6Y.js}

@@ -15,7 +15,7 @@ var FormError = React.forwardRef(
         ref,
         role: "alert",
         className: cn(
-          "flex items-center gap-1.5 text-sm text-[var(--color-danger-600)] leading-snug",
+          "flex items-center gap-1.5 text-sm text-[var(--color-on-error-container)] leading-snug",
           className
         ),
         ...props,

package/dist/{chunk-XI63BK3S.js → chunk-RATKKN3F.js}

@@ -1,13 +1,13 @@
 'use client';
 import {
   Label
-} from "./chunk-NIX4SEKM.js";
+} from "./chunk-PREMZMLU.js";
 import {
   FormError
-} from "./chunk-KM6Z3VTI.js";
+} from "./chunk-QVTVDL6Y.js";
 import {
   HelperText
-} from "./chunk-UMC64NCT.js";
+} from "./chunk-WVBGQCYC.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";

package/dist/chunk-RM7MTOT5.js

@@ -0,0 +1,339 @@
+'use client';
+import {
+  useIsomorphicLayoutEffect
+} from "./chunk-NHUQLIHL.js";
+import {
+  useLocale,
+  useNexubMessages
+} from "./chunk-24ZFAXB2.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";
+function Provider2({ swipeDirection, ...props }) {
+  const { dir } = useLocale();
+  return /* @__PURE__ */ jsx(RadixToast.Provider, { swipeDirection: swipeDirection ?? (dir === "rtl" ? "left" : "right"), ...props });
+}
+Provider2.displayName = "Toast.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",
+        // Follow the finger (Radix's signed swipe offsets), snap back on cancel, leave from where it was let go.
+        "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",
+        // 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 { dir } = useLocale();
+  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: dir === "rtl" ? "left" : "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-DJZZ3FIP.js → chunk-RUR57JZQ.js}

@@ -1,9 +1,8 @@
 'use client';
 import {
-  enterExit,
   overlaySurface,
   scrim
-} from "./chunk-KQPLFVFR.js";
+} from "./chunk-FLZD7HQY.js";
 import {
   glassSurfaceClass
 } from "./chunk-DEIBF3P7.js";
@@ -26,11 +25,8 @@ var Overlay2 = React.forwardRef(
       {
         ref,
         className: cn(
-          "fixed inset-0 z-[var(--z-modal)]",
+          "fixed inset-0 z-[var(--z-modal)] nx-motion",
           scrim,
-          enterExit,
-          "data-[state=open]:animate-in data-[state=closed]:animate-out",
-          "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
           className
         ),
         ...props
@@ -54,14 +50,9 @@ var Content2 = React.forwardRef(
         ref,
         className: cn(
           "fixed left-1/2 top-1/2 z-[var(--z-modal)] w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2",
+          "nx-motion nx-dialog",
           overlaySurface,
-          enterExit,
           "max-h-[90vh] overflow-y-auto p-6 focus:outline-none",
-          "data-[state=open]:animate-in data-[state=closed]:animate-out",
-          "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-          "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-          "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
-          "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
           sizeMap[size],
           surface === "glass" && glassSurfaceClass,
           className
@@ -81,7 +72,7 @@ var Title2 = React.forwardRef(
       RadixDialog.Title,
       {
         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
       }
     );
@@ -94,7 +85,7 @@ var Description2 = React.forwardRef(
       RadixDialog.Description,
       {
         ref,
-        className: cn("mt-1 text-sm text-[var(--color-text-muted)]", className),
+        className: cn("mt-1 text-sm text-[var(--color-on-surface-muted)]", className),
         ...props
       }
     );

package/dist/{chunk-ZV3AF5CL.js → chunk-S2CTBFLN.js}

@@ -6,14 +6,25 @@ import {
 // src/components/AspectRatio/AspectRatio.tsx
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
+var RATIO_CLASS = {
+  "1.0000": "aspect-square",
+  "1.7778": "aspect-video",
+  "1.3333": "aspect-[4/3]",
+  "1.5000": "aspect-[3/2]",
+  "2.3333": "aspect-[21/9]",
+  "0.5625": "aspect-[9/16]",
+  "0.7500": "aspect-[3/4]",
+  "0.6667": "aspect-[2/3]"
+};
 var AspectRatio = React.forwardRef(
   ({ ratio = 16 / 9, className, children, style, ...rest }, ref) => {
+    const ratioClass = RATIO_CLASS[ratio.toFixed(4)];
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
-        className: cn("relative w-full overflow-hidden", className),
-        style: { aspectRatio: String(ratio), ...style },
+        className: cn("relative w-full overflow-hidden", ratioClass, className),
+        style: ratioClass ? style : { aspectRatio: String(ratio), ...style },
         ...rest,
         children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 h-full w-full", children })
       }

package/dist/{chunk-72I7EVOL.js → chunk-SYZADSLI.js}

@@ -1,4 +1,7 @@
 'use client';
+import {
+  pressable
+} from "./chunk-7SXR4PGO.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -10,15 +13,15 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var toneConfig = {
   error: {
     icon: /* @__PURE__ */ jsx(AlertCircle, { size: "xl", "aria-hidden": "true" }),
-    color: "text-[var(--color-semantic-error-default)]"
+    color: "text-[var(--color-error)]"
   },
   warning: {
     icon: /* @__PURE__ */ jsx(AlertTriangle, { size: "xl", "aria-hidden": "true" }),
-    color: "text-[var(--color-semantic-warning-default)]"
+    color: "text-[var(--color-warning)]"
   },
   info: {
     icon: /* @__PURE__ */ jsx(Info, { size: "xl", "aria-hidden": "true" }),
-    color: "text-[var(--color-semantic-info-default)]"
+    color: "text-[var(--color-info)]"
   }
 };
 var ErrorState = React.forwardRef(
@@ -36,14 +39,15 @@ var ErrorState = React.forwardRef(
         children: [
           /* @__PURE__ */ jsx("span", { className: color, children: icon }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: title }),
-            description && /* @__PURE__ */ jsx("p", { className: "max-w-sm text-sm text-[var(--color-text-muted)]", children: description })
+            /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-[var(--color-on-surface)]", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "max-w-sm text-sm text-[var(--color-on-surface-muted)]", children: description })
           ] }),
           onRetry && /* @__PURE__ */ jsx(
             "button",
             {
+              type: "button",
               onClick: onRetry,
-              className: "inline-flex h-9 items-center justify-center rounded-md bg-[var(--color-fill-primary)] px-4 text-sm font-medium text-white hover:bg-[var(--color-fill-primary-hover)] transition-colors",
+              className: cn(pressable, "inline-flex h-9 items-center justify-center bg-[var(--color-primary)] px-4 text-label-lg text-[var(--color-on-primary)]"),
               children: "Try again"
             }
           )

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
       ),