reusify-ui 2.1.0 → 2.3.0

package/dist/reusify-ui.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { forwardRef, useRef, useEffect, useState, useCallback, useImperativeHandle, useId, useMemo, Children, isValidElement, Fragment as Fragment$1, cloneElement, useContext, createContext } from "react";
+import { forwardRef, useState, useRef, useEffect, useLayoutEffect, useCallback, useImperativeHandle, useId, useMemo, Children, isValidElement, Fragment as Fragment$1, cloneElement, useContext, createContext } from "react";
 import { createPortal } from "react-dom";
 function cn(...classes) {
   return classes.filter(Boolean).join(" ");
@@ -10,7 +10,7 @@ const legacyVariants = {
   danger: ["solid", "danger"],
   success: ["solid", "success"]
 };
-const semanticColors$2 = /* @__PURE__ */ new Set(["primary", "secondary", "success", "danger", "warning", "info"]);
+const semanticColors$5 = /* @__PURE__ */ new Set(["primary", "secondary", "success", "danger", "warning", "info"]);
 const radii = { none: "0", sm: "6px", md: "10px", lg: "14px", xl: "18px", "2xl": "24px", full: "9999px" };
 function resolveRadius(radius) {
   if (radius === void 0) return void 0;
@@ -48,7 +48,7 @@ const Button = forwardRef(function Button2({
     onPointerMove == null ? void 0 : onPointerMove(e);
   } : onPointerMove;
   const resolvedColor = color ?? legacyColor ?? "primary";
-  const customColor = !semanticColors$2.has(resolvedColor);
+  const customColor = !semanticColors$5.has(resolvedColor);
   const classes = cn(
     "ru-btn",
     `ru-btn--${kind}`,
@@ -143,6 +143,16 @@ const UserIcon = (p) => /* @__PURE__ */ jsxs("svg", { ...base, ...p, children: [
   /* @__PURE__ */ jsx("circle", { cx: "12", cy: "8", r: "4" }),
   /* @__PURE__ */ jsx("path", { d: "M4 21a8 8 0 0 1 16 0" })
 ] });
+const UploadCloudIcon = (p) => /* @__PURE__ */ jsxs("svg", { ...base, ...p, children: [
+  /* @__PURE__ */ jsx("path", { d: "M4 14.9A7 7 0 1 1 15.7 8h1.8a4.5 4.5 0 0 1 2.5 8.2" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 12v9M16 16l-4-4-4 4" })
+] });
+const FileIcon = (p) => /* @__PURE__ */ jsxs("svg", { ...base, ...p, children: [
+  /* @__PURE__ */ jsx("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+  /* @__PURE__ */ jsx("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })
+] });
+const TrendUpIcon = (p) => /* @__PURE__ */ jsx("svg", { ...base, ...p, children: /* @__PURE__ */ jsx("path", { d: "M12 19V5M5 12l7-7 7 7" }) });
+const TrendDownIcon = (p) => /* @__PURE__ */ jsx("svg", { ...base, ...p, children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M19 12l-7 7-7-7" }) });
 const statusIcons = {
   info: InfoIcon,
   success: SuccessIcon,
@@ -158,11 +168,17 @@ function Spinner({ size = "md", color = "primary", label = "Loading", className,
     label && /* @__PURE__ */ jsx("span", { className: "ru-sr-only", children: label })
   ] });
 }
+const progressColors = /* @__PURE__ */ new Set(["primary", "secondary", "success", "danger", "warning", "info"]);
 function Progress({
   value,
   max = 100,
   size = "md",
   color = "primary",
+  variant = "bar",
+  ticks = 24,
+  glow = false,
+  icon,
+  endLabel,
   label,
   showValue = false,
   className,
@@ -170,7 +186,86 @@ function Progress({
 }) {
   const indeterminate = value === void 0;
   const percent = indeterminate ? 0 : Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ jsxs("div", { className: cn("ru-progress", indeterminate && "ru-progress--indeterminate", className), ...rest, children: [
+  const semantic = progressColors.has(color);
+  const glowColor = glow === true ? semantic ? `var(--ru-${color})` : color : glow || void 0;
+  const meterStyle = { ...!semantic && { "--_c": color }, ...glowColor && { "--_glow": glowColor } };
+  if (variant === "capsule") {
+    return /* @__PURE__ */ jsxs("div", { className: cn("ru-progress", "ru-progress--capsule", `ru-progress--${size}`, glowColor && "ru-progress--glow", className), ...rest, children: [
+      label && /* @__PURE__ */ jsx("div", { className: "ru-progress__label", children: /* @__PURE__ */ jsx("span", { children: label }) }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "progressbar",
+          "aria-valuemin": 0,
+          "aria-valuemax": max,
+          "aria-valuenow": value ?? 0,
+          "aria-label": typeof label === "string" ? label : void 0,
+          className: cn("ru-progress__capsule", semantic && `ru-c-${color}`),
+          style: meterStyle,
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "ru-progress__capsule-fill", style: { width: `max(var(--_h), ${percent}%)` }, children: icon ?? (showValue && /* @__PURE__ */ jsxs("span", { className: "ru-progress__capsule-value", children: [
+              Math.round(percent),
+              "%"
+            ] })) }),
+            endLabel && /* @__PURE__ */ jsx("span", { className: "ru-progress__capsule-end", children: endLabel })
+          ]
+        }
+      )
+    ] });
+  }
+  if (variant === "bars") {
+    const total = Math.max(2, ticks);
+    const lit = Math.round(percent / 100 * total);
+    return /* @__PURE__ */ jsxs("div", { className: cn("ru-progress", "ru-progress--bars", `ru-progress--${size}`, glowColor && "ru-progress--glow", className), ...rest, children: [
+      (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "ru-progress__label", children: [
+        /* @__PURE__ */ jsx("span", { children: label }),
+        showValue && /* @__PURE__ */ jsxs("span", { className: "ru-progress__value ru-progress__value--accent", children: [
+          Math.round(percent),
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "progressbar",
+          "aria-valuemin": 0,
+          "aria-valuemax": max,
+          "aria-valuenow": value ?? 0,
+          "aria-label": typeof label === "string" ? label : void 0,
+          className: cn("ru-progress__bars", semantic && `ru-c-${color}`),
+          style: meterStyle,
+          children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ jsx("span", { className: cn(i < lit && "is-on", i === lit - 1 && percent > 0 && percent < 100 && "is-marker") }, i))
+        }
+      )
+    ] });
+  }
+  if (variant === "ticks") {
+    const remaining = percent >= 100 ? 0 : Math.max(1, Math.round(ticks * (1 - percent / 100)));
+    return /* @__PURE__ */ jsxs("div", { className: cn("ru-progress", "ru-progress--ticks", `ru-progress--${size}`, glowColor && "ru-progress--glow", className), ...rest, children: [
+      label && /* @__PURE__ */ jsx("div", { className: "ru-progress__label", children: /* @__PURE__ */ jsx("span", { children: label }) }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "progressbar",
+          "aria-valuemin": 0,
+          "aria-valuemax": max,
+          "aria-valuenow": value ?? 0,
+          "aria-label": typeof label === "string" ? label : void 0,
+          className: cn("ru-progress__meter", semantic && `ru-c-${color}`),
+          style: meterStyle,
+          children: [
+            percent > 0 && /* @__PURE__ */ jsx("div", { className: "ru-progress__fill", style: { width: `${percent}%` }, children: showValue && /* @__PURE__ */ jsxs("span", { className: "ru-progress__fill-value", children: [
+              Math.round(percent),
+              "%"
+            ] }) }),
+            percent > 0 && percent < 100 && /* @__PURE__ */ jsx("span", { className: "ru-progress__marker", "aria-hidden": "true" }),
+            remaining > 0 && /* @__PURE__ */ jsx("div", { className: "ru-progress__ticks", "aria-hidden": "true", children: Array.from({ length: remaining }, (_, i) => /* @__PURE__ */ jsx("span", {}, i)) })
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("ru-progress", indeterminate && "ru-progress--indeterminate", glowColor && "ru-progress--glow", className), ...rest, children: [
     (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "ru-progress__label", children: [
       /* @__PURE__ */ jsx("span", { children: label }),
       showValue && !indeterminate && /* @__PURE__ */ jsxs("span", { className: "ru-progress__value", children: [
@@ -186,7 +281,8 @@ function Progress({
         "aria-valuemax": max,
         "aria-valuenow": indeterminate ? void 0 : value,
         "aria-label": typeof label === "string" ? label : void 0,
-        className: cn("ru-progress__track", `ru-progress__track--${size}`, `ru-c-${color}`),
+        className: cn("ru-progress__track", `ru-progress__track--${size}`, semantic && `ru-c-${color}`),
+        style: meterStyle,
         children: /* @__PURE__ */ jsx("div", { className: "ru-progress__bar", style: indeterminate ? void 0 : { width: `${percent}%` } })
       }
     )
@@ -225,6 +321,98 @@ function Alert({ variant = "info", title, icon, onClose, className, children, ..
     }
   );
 }
+const useBrowserLayoutEffect = typeof document === "undefined" ? useEffect : useLayoutEffect;
+const TOOLTIP_EDGE = 8;
+const TOOLTIP_COMFORT = 16;
+const ARROW_INSET = 14;
+const oppositeSide = { top: "bottom", bottom: "top", left: "right", right: "left" };
+const AUTO_ORDER = ["top", "bottom", "right", "left"];
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+function visibleArea(el) {
+  const area = {
+    top: TOOLTIP_EDGE,
+    left: TOOLTIP_EDGE,
+    right: document.documentElement.clientWidth - TOOLTIP_EDGE,
+    bottom: window.innerHeight - TOOLTIP_EDGE
+  };
+  for (let node = el; node && node !== document.body; node = node.parentElement) {
+    const { overflowX, overflowY, position } = getComputedStyle(node);
+    if (node !== el) {
+      const rect = node.getBoundingClientRect();
+      if (overflowX !== "visible") {
+        area.left = Math.max(area.left, rect.left + TOOLTIP_EDGE);
+        area.right = Math.min(area.right, rect.right - TOOLTIP_EDGE);
+      }
+      if (overflowY !== "visible") {
+        area.top = Math.max(area.top, rect.top + TOOLTIP_EDGE);
+        area.bottom = Math.min(area.bottom, rect.bottom - TOOLTIP_EDGE);
+      }
+    }
+    if (position === "fixed") break;
+  }
+  return area;
+}
+function slideAlong(start, size, low, high, triggerLow, triggerHigh) {
+  const nearLow = start < low + TOOLTIP_COMFORT;
+  const nearHigh = start + size > high - TOOLTIP_COMFORT;
+  if (!nearLow && !nearHigh) return 0;
+  const clamped = clamp(start, low, high - size);
+  if (nearLow && nearHigh) return clamped - start;
+  const snapped = nearHigh ? triggerHigh - size : triggerLow;
+  const canSnap = snapped >= low - TOOLTIP_EDGE && snapped + size <= high + TOOLTIP_EDGE;
+  return (canSnap ? snapped : clamped) - start;
+}
+const samePosition = (a, b) => a && Object.keys(b).every((key) => a[key] === b[key]);
+function placeTooltip(trigger, bubble, placement) {
+  const t = trigger.getBoundingClientRect();
+  const w = bubble.offsetWidth;
+  const h = bubble.offsetHeight;
+  const gap = parseFloat(getComputedStyle(bubble).getPropertyValue("--_gap")) || 10;
+  const area = visibleArea(trigger);
+  const room = { top: t.top - area.top, bottom: area.bottom - t.bottom, left: t.left - area.left, right: area.right - t.right };
+  const needs = (side2) => (side2 === "top" || side2 === "bottom" ? h : w) + gap;
+  const fits = (s) => room[s] >= needs(s);
+  const aligned = (s) => s === "top" || s === "bottom" ? slideAlong(t.left + t.width / 2 - w / 2, w, area.left, area.right, t.left, t.right) === 0 : slideAlong(t.top + t.height / 2 - h / 2, h, area.top, area.bottom, t.top, t.bottom) === 0;
+  const roomiest = AUTO_ORDER.reduce((best, s) => room[s] > room[best] ? s : best);
+  let side = placement === "auto" ? AUTO_ORDER.find((s) => fits(s) && aligned(s)) ?? AUTO_ORDER.find(fits) ?? roomiest : placement;
+  if (room[side] < needs(side) && room[oppositeSide[side]] > room[side]) side = oppositeSide[side];
+  if (room[side] < needs(side) && (side === "left" || side === "right")) {
+    const vertical = room.bottom >= room.top ? "bottom" : "top";
+    if (room[vertical] >= needs(vertical)) side = vertical;
+  }
+  if (side === "top" || side === "bottom") {
+    const start2 = t.left + t.width / 2 - w / 2;
+    const shift2 = slideAlong(start2, w, area.left, area.right, t.left, t.right);
+    return { side, shiftX: shift2, shiftY: 0, arrowX: clamp(-shift2, ARROW_INSET - w / 2, w / 2 - ARROW_INSET), arrowY: 0 };
+  }
+  const start = t.top + t.height / 2 - h / 2;
+  const shift = slideAlong(start, h, area.top, area.bottom, t.top, t.bottom);
+  return { side, shiftX: 0, shiftY: shift, arrowX: 0, arrowY: clamp(-shift, ARROW_INSET - h / 2, h / 2 - ARROW_INSET) };
+}
+function usePlacement(open, triggerRef, bubbleRef, placement = "top") {
+  const [position, setPosition] = useState(null);
+  const update = () => {
+    if (!triggerRef.current || !bubbleRef.current) return;
+    const next = placeTooltip(triggerRef.current, bubbleRef.current, placement);
+    setPosition((prev) => samePosition(prev, next) ? prev : next);
+  };
+  const updateRef = useRef(update);
+  updateRef.current = update;
+  useBrowserLayoutEffect(() => {
+    if (open) updateRef.current();
+  });
+  useEffect(() => {
+    if (!open) return void 0;
+    const onChange = () => updateRef.current();
+    window.addEventListener("scroll", onChange, true);
+    window.addEventListener("resize", onChange);
+    return () => {
+      window.removeEventListener("scroll", onChange, true);
+      window.removeEventListener("resize", onChange);
+    };
+  }, [open]);
+  return position;
+}
 function useControllableState(value, defaultValue, onChange) {
   const [internal, setInternal] = useState(defaultValue);
   const isControlled = value !== void 0;
@@ -1084,18 +1272,22 @@ function resolveAvatarColor(color, seed) {
 }
 function AvatarTooltip({ content, description, accent, children }) {
   const [open, setOpen] = useState(false);
+  const rootRef = useRef(null);
   const bubbleRef = useRef(null);
+  const position = usePlacement(open, rootRef, bubbleRef, "top");
+  const sliding = Boolean(position == null ? void 0 : position.shiftX);
   const tiltToward = (e) => {
     const bubble = bubbleRef.current;
     if (!bubble) return;
     const rect = e.currentTarget.getBoundingClientRect();
     const ratio = Math.max(-1, Math.min(1, (e.clientX - (rect.left + rect.width / 2)) / (rect.width / 2)));
-    bubble.style.setProperty("--_shift", `${ratio * 10}px`);
+    bubble.style.setProperty("--_shift", sliding ? "0px" : `${ratio * 10}px`);
     bubble.style.setProperty("--_tilt", `${ratio * 12}deg`);
   };
   return /* @__PURE__ */ jsxs(
     "span",
     {
+      ref: rootRef,
       className: "ru-avatar-tip",
       onMouseEnter: () => setOpen(true),
       onMouseLeave: () => setOpen(false),
@@ -1105,10 +1297,23 @@ function AvatarTooltip({ content, description, accent, children }) {
       children: [
         children,
         open && // The avatar's accessible name already includes this text, so the bubble is visual only.
-        /* @__PURE__ */ jsx("span", { ref: bubbleRef, className: "ru-avatar-tip__bubble", "aria-hidden": "true", style: accent ? { "--_accent": accent } : void 0, children: /* @__PURE__ */ jsxs("span", { className: "ru-avatar-tip__inner", children: [
-          /* @__PURE__ */ jsx("span", { className: "ru-avatar-tip__name", children: content }),
-          description && /* @__PURE__ */ jsx("span", { className: "ru-avatar-tip__desc", children: description })
-        ] }) })
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            ref: bubbleRef,
+            className: cn("ru-avatar-tip__bubble", (position == null ? void 0 : position.side) === "bottom" && "ru-avatar-tip__bubble--bottom"),
+            "aria-hidden": "true",
+            style: {
+              ...accent && { "--_accent": accent },
+              ...position && { "--_sx": `${position.shiftX}px`, "--_ax": `${position.arrowX}px` }
+            },
+            children: /* @__PURE__ */ jsxs("span", { className: "ru-avatar-tip__inner", children: [
+              /* @__PURE__ */ jsx("span", { className: "ru-avatar-tip__dots" }),
+              /* @__PURE__ */ jsx("span", { className: "ru-avatar-tip__name", children: content }),
+              description && /* @__PURE__ */ jsx("span", { className: "ru-avatar-tip__desc", children: description })
+            ] })
+          }
+        )
       ]
     }
   );
@@ -1268,6 +1473,7 @@ function Divider({
     "ru-divider",
     variant !== "solid" && `ru-divider--${variant}`,
     vertical && "ru-divider--vertical",
+    vertical && length !== void 0 && "ru-divider--sized",
     labelled && "ru-divider--label",
     labelled && labelPosition !== "center" && `ru-divider--label-${labelPosition}`,
     !vertical && align !== "center" && `ru-divider--align-${align}`,
@@ -1398,7 +1604,7 @@ function Table({
     ] })
   ] });
 }
-const EXIT_MS = 200;
+const EXIT_MS$1 = 200;
 function usePresence(open) {
   const [render, setRender] = useState(open);
   const [closing, setClosing] = useState(false);
@@ -1413,7 +1619,7 @@ function usePresence(open) {
     const timer = setTimeout(() => {
       setRender(false);
       setClosing(false);
-    }, EXIT_MS);
+    }, EXIT_MS$1);
     return () => clearTimeout(timer);
   }, [open]);
   return { render, closing };
@@ -1446,7 +1652,7 @@ function Modal({
   const titleId = useId();
   const descId = useId();
   const { render, closing } = usePresence(open);
-  useOverlay(open && mounted, panelRef, onClose, closeOnEsc);
+  useOverlay(open && mounted && render, panelRef, onClose, closeOnEsc);
   if (!render || !mounted) return null;
   const onOverlayMouseDown = (e) => {
     if (!closing && closeOnOverlayClick && e.target === e.currentTarget) onClose();
@@ -1495,7 +1701,7 @@ function Drawer({
   const titleId = useId();
   const descId = useId();
   const { render, closing } = usePresence(open);
-  useOverlay(open && mounted, panelRef, onClose, closeOnEsc);
+  useOverlay(open && mounted && render, panelRef, onClose, closeOnEsc);
   if (!render || !mounted) return null;
   const resolvedSize = typeof size === "number" ? `${size}px` : drawerSizes[size] ?? size;
   return createPortal(
@@ -1551,13 +1757,24 @@ function Tooltip({
   textColor,
   open: openProp,
   disabled,
+  onPlacementChange,
   className
 }) {
   const [open, setOpen] = useState(false);
   const timer = useRef(void 0);
+  const rootRef = useRef(null);
+  const bubbleRef = useRef(null);
   const id = useId();
   const visible = (openProp ?? open) && !disabled && content != null && content !== "";
   useEffect(() => () => clearTimeout(timer.current), []);
+  const position = usePlacement(visible, rootRef, bubbleRef, placement);
+  const side = position == null ? void 0 : position.side;
+  const onPlacementChangeRef = useRef(onPlacementChange);
+  onPlacementChangeRef.current = onPlacementChange;
+  useEffect(() => {
+    var _a;
+    if (side) (_a = onPlacementChangeRef.current) == null ? void 0 : _a.call(onPlacementChangeRef, side);
+  }, [side]);
   const show = () => {
     clearTimeout(timer.current);
     timer.current = setTimeout(() => setOpen(true), delay);
@@ -1572,6 +1789,7 @@ function Tooltip({
   return /* @__PURE__ */ jsxs(
     "span",
     {
+      ref: rootRef,
       className: cn("ru-tooltip", className),
       onMouseEnter: show,
       onMouseLeave: hide,
@@ -1583,15 +1801,25 @@ function Tooltip({
         visible && /* @__PURE__ */ jsx(
           "span",
           {
+            ref: bubbleRef,
             role: "tooltip",
             id,
             className: cn(
               "ru-tooltip__bubble",
-              `ru-tooltip__bubble--${placement}`,
+              `ru-tooltip__bubble--${side ?? (placement === "auto" ? "top" : placement)}`,
               size !== "md" && `ru-tooltip__bubble--${size}`,
               !arrow && "ru-tooltip__bubble--no-arrow"
             ),
-            style: color || textColor ? { "--ru-tooltip-bg": color, "--ru-tooltip-text": textColor } : void 0,
+            style: {
+              ...color && { "--ru-tooltip-bg": color },
+              ...textColor && { "--ru-tooltip-text": textColor },
+              ...position && {
+                "--_sx": `${position.shiftX}px`,
+                "--_sy": `${position.shiftY}px`,
+                "--_ax": `${position.arrowX}px`,
+                "--_ay": `${position.arrowY}px`
+              }
+            },
             children: content
           }
         )
@@ -1706,12 +1934,23 @@ function Dropdown({ trigger, items, align = "start", closeOnSelect = true, class
   ] });
 }
 const ToastContext = createContext(null);
-function ToastProvider({ children, position = "bottom-right", duration = 4e3, max = 5 }) {
+const EXIT_MS = 200;
+function ToastProvider({
+  children,
+  position = "bottom-right",
+  duration = 4e3,
+  max = 5,
+  appearance = "default",
+  animation = "slide",
+  progress = false
+}) {
   const [toasts, setToasts] = useState([]);
   const mounted = useMounted();
   const counter = useRef(0);
   const dismiss = useCallback((id) => {
-    setToasts((list) => id ? list.filter((t) => t.id !== id) : []);
+    const matches = (t) => !id || t.id === id;
+    setToasts((list) => list.map((t) => matches(t) ? { ...t, closing: true } : t));
+    setTimeout(() => setToasts((list) => list.filter((t) => !(matches(t) && t.closing))), EXIT_MS);
   }, []);
   const api = useMemo(() => {
     const show = (options) => {
@@ -1731,25 +1970,61 @@ function ToastProvider({ children, position = "bottom-right", duration = 4e3, ma
   return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: api, children: [
     children,
     mounted && createPortal(
-      /* @__PURE__ */ jsx("ol", { className: cn("ru-toaster", `ru-toaster--${position}`), "aria-live": "polite", "aria-label": "Notifications", children: toasts.map((t) => /* @__PURE__ */ jsx(ToastView, { toast: t, duration: t.duration ?? duration, onDismiss: dismiss }, t.id)) }),
+      // One stack per position in use, so toasts can override the provider's position.
+      [.../* @__PURE__ */ new Set([position, ...toasts.map((t) => t.position ?? position)])].map((spot) => /* @__PURE__ */ jsx("ol", { className: cn("ru-toaster", `ru-toaster--${spot}`), "aria-live": "polite", "aria-label": "Notifications", children: toasts.filter((t) => (t.position ?? position) === spot).map((t) => /* @__PURE__ */ jsx(
+        ToastView,
+        {
+          toast: t,
+          duration: t.duration ?? duration,
+          appearance: t.appearance ?? appearance,
+          animation: t.animation ?? animation,
+          progress: t.progress ?? progress,
+          onDismiss: dismiss
+        },
+        t.id
+      )) }, spot)),
       document.body
     )
   ] });
 }
-function ToastView({ toast, duration, onDismiss }) {
+function ToastView({ toast, duration, appearance, animation, progress, onDismiss }) {
   const [paused, setPaused] = useState(false);
-  const { id, variant = "default", title, description, action } = toast;
+  const { id, variant = "default", title, description, action, closing } = toast;
+  const ref = useRef(null);
+  const remaining = useRef(duration);
+  const timed = Number.isFinite(duration) && duration > 0;
   useEffect(() => {
-    if (paused || !Number.isFinite(duration) || duration <= 0) return;
-    const timer = setTimeout(() => onDismiss(id), duration);
-    return () => clearTimeout(timer);
-  }, [id, duration, paused, onDismiss]);
+    remaining.current = duration;
+  }, [id, duration]);
+  useEffect(() => {
+    if (paused || closing || !timed) return void 0;
+    const startedAt = Date.now();
+    const timer = setTimeout(() => onDismiss(id), remaining.current);
+    return () => {
+      clearTimeout(timer);
+      remaining.current -= Date.now() - startedAt;
+    };
+  }, [id, duration, paused, closing, timed, onDismiss]);
+  useLayoutEffect(() => {
+    if (closing && ref.current) ref.current.style.setProperty("--_h", `${ref.current.offsetHeight}px`);
+  }, [closing]);
   const Icon = variant === "default" ? null : statusIcons[variant];
+  const countdown = progress && timed;
+  const traced = countdown && appearance === "accent";
+  const countdownStyle = { animationDuration: `${duration}ms`, animationPlayState: paused ? "paused" : "running" };
   return /* @__PURE__ */ jsxs(
     "li",
     {
+      ref,
       role: "status",
-      className: cn("ru-toast", variant !== "default" && `ru-c-${variant}`),
+      className: cn(
+        "ru-toast",
+        `ru-toast--${appearance}`,
+        `ru-toast--in-${animation}`,
+        traced && "ru-toast--traced",
+        closing && "ru-toast--closing",
+        variant !== "default" && `ru-c-${variant}`
+      ),
       onMouseEnter: () => setPaused(true),
       onMouseLeave: () => setPaused(false),
       children: [
@@ -1759,7 +2034,9 @@ function ToastView({ toast, duration, onDismiss }) {
           description && /* @__PURE__ */ jsx("div", { className: "ru-toast__desc", children: description }),
           action && /* @__PURE__ */ jsx("div", { className: "ru-toast__action", children: action })
         ] }),
-        /* @__PURE__ */ jsx(CloseButton, { onClick: () => onDismiss(id), label: "Dismiss notification" })
+        /* @__PURE__ */ jsx(CloseButton, { onClick: () => onDismiss(id), label: "Dismiss notification" }),
+        traced && /* @__PURE__ */ jsx("svg", { className: "ru-toast__trace", "aria-hidden": "true", children: /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", rx: "13", pathLength: "1", style: countdownStyle }) }),
+        countdown && !traced && /* @__PURE__ */ jsx("span", { className: "ru-toast__progress", "aria-hidden": "true", style: countdownStyle })
       ]
     }
   );
@@ -1860,7 +2137,18 @@ function SpotlightCard({ color, className, style, onMouseMove, children, ...rest
     }
   );
 }
-const semanticColors$1 = /* @__PURE__ */ new Set(["primary", "secondary", "success", "danger", "warning", "info"]);
+function DotText({ as: Tag = "span", dot = 4, color, glow = false, className, style, children, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      className: cn("ru-dot-text", glow && "ru-dot-text--glow", className),
+      style: { "--_d": `${dot}px`, ...color && { color }, ...style },
+      ...rest,
+      children
+    }
+  );
+}
+const semanticColors$4 = /* @__PURE__ */ new Set(["primary", "secondary", "success", "danger", "warning", "info"]);
 function Pager({ onPrev, onNext, prevLabel, nextLabel }) {
   if (!onPrev && !onNext) return null;
   return /* @__PURE__ */ jsxs("div", { className: "ru-frame-card__pager", children: [
@@ -1898,7 +2186,7 @@ function FrameCard({
     {
       className: cn("ru-frame-card", onFrame && "ru-frame-card--title-frame", className),
       style: {
-        "--_fc": semanticColors$1.has(color) ? `var(--ru-${color})` : color,
+        "--_fc": semanticColors$4.has(color) ? `var(--ru-${color})` : color,
         ...textColor && { "--_fc-on": textColor, "--_fc-ink": textColor },
         ...style
       },
@@ -1937,7 +2225,7 @@ function FrameCard({
 }
 const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 const WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-const semanticColors = /* @__PURE__ */ new Set(["primary", "secondary", "success", "danger", "warning", "info"]);
+const semanticColors$3 = /* @__PURE__ */ new Set(["primary", "secondary", "success", "danger", "warning", "info"]);
 const dayKey = (d) => d.getFullYear() * 1e4 + d.getMonth() * 100 + d.getDate();
 const sameDay = (a, b) => Boolean(a && b) && dayKey(a) === dayKey(b);
 function Calendar({
@@ -1997,7 +2285,7 @@ function Calendar({
       next.focus();
     }
   };
-  const ink = color ? semanticColors.has(color) ? `var(--ru-${color})` : color : void 0;
+  const ink = color ? semanticColors$3.has(color) ? `var(--ru-${color})` : color : void 0;
   return /* @__PURE__ */ jsxs("div", { className: cn("ru-calendar", className), style: ink ? { "--_cc": ink, ...style } : style, ...rest, children: [
     /* @__PURE__ */ jsxs("div", { className: "ru-calendar__head", children: [
       /* @__PURE__ */ jsx("button", { type: "button", className: "ru-calendar__nav", "aria-label": "Previous month", onClick: () => shift(-1), children: /* @__PURE__ */ jsx(ChevronLeftIcon, {}) }),
@@ -2052,6 +2340,638 @@ function Calendar({
     }) })
   ] });
 }
+const normalize = (options) => options.map((o) => typeof o === "object" ? o : { label: String(o), value: o });
+function SegmentedControl({
+  options,
+  value,
+  defaultValue,
+  onChange,
+  size = "md",
+  fullWidth = false,
+  pill = false,
+  disabled = false,
+  className,
+  style,
+  ...rest
+}) {
+  var _a;
+  const items = normalize(options);
+  const firstEnabled = (_a = items.find((i) => !i.disabled)) == null ? void 0 : _a.value;
+  const [active, setActive] = useControllableState(value, defaultValue ?? firstEnabled, onChange);
+  const rootRef = useRef(null);
+  const [thumb, setThumb] = useState(null);
+  const activeIndex = items.findIndex((i) => i.value === active);
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return void 0;
+    const measure = () => {
+      const el = root.querySelectorAll('[role="radio"]')[activeIndex];
+      setThumb(el ? { x: el.offsetLeft, w: el.offsetWidth } : null);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const ro = new ResizeObserver(measure);
+    ro.observe(root);
+    return () => ro.disconnect();
+  }, [activeIndex, items.length]);
+  const move = (from, step) => {
+    var _a2;
+    const buttons = rootRef.current.querySelectorAll('[role="radio"]');
+    for (let n = 1; n <= items.length; n++) {
+      const i = (from + step * n + items.length) % items.length;
+      if (!items[i].disabled) {
+        setActive(items[i].value);
+        (_a2 = buttons[i]) == null ? void 0 : _a2.focus();
+        return;
+      }
+    }
+  };
+  const onKeyDown = (e, index) => {
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") move(index, 1);
+    else if (e.key === "ArrowLeft" || e.key === "ArrowUp") move(index, -1);
+    else return;
+    e.preventDefault();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      role: "radiogroup",
+      "aria-disabled": disabled || void 0,
+      className: cn(
+        "ru-segmented",
+        `ru-segmented--${size}`,
+        fullWidth && "ru-segmented--full",
+        pill && "ru-segmented--pill",
+        thumb && "ru-segmented--ready",
+        className
+      ),
+      style: thumb ? { "--_x": `${thumb.x}px`, "--_w": `${thumb.w}px`, ...style } : style,
+      ...rest,
+      children: [
+        thumb && activeIndex >= 0 && /* @__PURE__ */ jsx("span", { className: "ru-segmented__thumb", "aria-hidden": "true" }),
+        items.map((item, i) => {
+          const selected = i === activeIndex;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": selected,
+              tabIndex: selected || activeIndex < 0 && i === 0 ? 0 : -1,
+              disabled: disabled || item.disabled,
+              className: "ru-segmented__item",
+              onClick: () => setActive(item.value),
+              onKeyDown: (e) => onKeyDown(e, i),
+              children: [
+                item.icon,
+                item.label
+              ]
+            },
+            String(item.value)
+          );
+        })
+      ]
+    }
+  );
+}
+const semanticColors$2 = /* @__PURE__ */ new Set(["primary", "secondary", "success", "danger", "warning", "info"]);
+function ProgressRing({
+  value = 0,
+  max = 100,
+  size = 48,
+  thickness = 4,
+  color = "primary",
+  trackColor,
+  showValue = false,
+  label,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const percent = Math.min(100, Math.max(0, value / max * 100));
+  const r = (size - thickness) / 2;
+  const circumference = 2 * Math.PI * r;
+  const ink = semanticColors$2.has(color) ? `var(--ru-${color})` : color;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      "aria-valuenow": value,
+      "aria-label": label,
+      className: cn("ru-ring", className),
+      style: { width: size, height: size, "--_c": ink, ...trackColor && { "--_track": trackColor }, ...style },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("circle", { className: "ru-ring__track", cx: size / 2, cy: size / 2, r, strokeWidth: thickness }),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: "ru-ring__bar",
+              cx: size / 2,
+              cy: size / 2,
+              r,
+              strokeWidth: thickness,
+              strokeDasharray: circumference,
+              strokeDashoffset: circumference * (1 - percent / 100)
+            }
+          )
+        ] }),
+        (children !== void 0 || showValue) && /* @__PURE__ */ jsx("span", { className: "ru-ring__label", style: { fontSize: Math.max(10, Math.round(size * 0.24)) }, children: children ?? `${Math.round(percent)}%` })
+      ]
+    }
+  );
+}
+const semanticColors$1 = /* @__PURE__ */ new Set(["primary", "secondary", "success", "danger", "warning", "info"]);
+function Stat({
+  label,
+  value,
+  trend,
+  trendLabel,
+  invertTrend = false,
+  helpText,
+  size = "md",
+  align = "start",
+  className,
+  ...rest
+}) {
+  const hasTrend = typeof trend === "number";
+  const up = hasTrend && trend >= 0;
+  const good = up !== invertTrend;
+  const TrendIcon = up ? TrendUpIcon : TrendDownIcon;
+  return /* @__PURE__ */ jsxs("div", { className: cn("ru-stat", `ru-stat--${size}`, align === "end" && "ru-stat--end", className), ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { className: "ru-stat__top", children: [
+      label && /* @__PURE__ */ jsx("span", { className: "ru-stat__label", children: label }),
+      hasTrend && /* @__PURE__ */ jsxs("span", { className: cn("ru-stat__trend", good ? "ru-stat__trend--good" : "ru-stat__trend--bad"), children: [
+        /* @__PURE__ */ jsx("span", { className: "ru-stat__trend-icon", children: /* @__PURE__ */ jsx(TrendIcon, {}) }),
+        trendLabel ?? `${Math.abs(trend).toLocaleString()}%`,
+        /* @__PURE__ */ jsx("span", { className: "ru-sr-only", children: up ? " increase" : " decrease" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ru-stat__value", children: value }),
+    helpText && /* @__PURE__ */ jsx("div", { className: "ru-stat__help", children: helpText })
+  ] });
+}
+function DateTile({ date, color = "primary", size = "md", className, style, ...rest }) {
+  const d = date instanceof Date ? date : new Date(date);
+  const ink = semanticColors$1.has(color) ? `var(--ru-${color})` : color;
+  return /* @__PURE__ */ jsxs(
+    "time",
+    {
+      dateTime: d.toISOString().slice(0, 10),
+      "aria-label": d.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric", year: "numeric" }),
+      className: cn("ru-date-tile", `ru-date-tile--${size}`, className),
+      style: { "--_c": ink, ...style },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "ru-date-tile__month", "aria-hidden": "true", children: d.toLocaleDateString("en-US", { month: "short" }) }),
+        /* @__PURE__ */ jsx("span", { className: "ru-date-tile__day", "aria-hidden": "true", children: d.getDate() })
+      ]
+    }
+  );
+}
+function matchesAccept(file, accept) {
+  if (!accept) return true;
+  return accept.split(",").some((rule) => {
+    const r = rule.trim().toLowerCase();
+    if (!r) return false;
+    if (r.startsWith(".")) return file.name.toLowerCase().endsWith(r);
+    if (r.endsWith("/*")) return file.type.toLowerCase().startsWith(r.slice(0, -1));
+    return file.type.toLowerCase() === r;
+  });
+}
+function formatBytes(bytes) {
+  if (typeof bytes !== "number") return bytes;
+  if (bytes < 1024) return `${bytes} B`;
+  const units = ["KB", "MB", "GB"];
+  let n = bytes / 1024;
+  let i = 0;
+  while (n >= 1024 && i < units.length - 1) {
+    n /= 1024;
+    i++;
+  }
+  return `${Number(n.toFixed(1))}${units[i]}`;
+}
+function Dropzone({
+  onFiles,
+  onReject,
+  accept,
+  multiple = true,
+  maxSize,
+  disabled = false,
+  icon,
+  title = "Drag & drop files here",
+  description,
+  className,
+  children,
+  ...rest
+}) {
+  const inputRef = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  const handle = (list) => {
+    const files = Array.from(list ?? []);
+    const accepted = [];
+    const rejected = [];
+    for (const file of multiple ? files : files.slice(0, 1)) {
+      if (!matchesAccept(file, accept)) rejected.push({ file, reason: "type" });
+      else if (maxSize && file.size > maxSize) rejected.push({ file, reason: "size" });
+      else accepted.push(file);
+    }
+    if (accepted.length) onFiles == null ? void 0 : onFiles(accepted);
+    if (rejected.length) onReject == null ? void 0 : onReject(rejected);
+  };
+  const open = () => {
+    var _a;
+    return !disabled && ((_a = inputRef.current) == null ? void 0 : _a.click());
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      "aria-disabled": disabled || void 0,
+      className: cn("ru-dropzone", dragging && "ru-dropzone--active", disabled && "ru-dropzone--disabled", className),
+      onClick: open,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          open();
+        }
+      },
+      onDragEnter: (e) => {
+        e.preventDefault();
+        if (!disabled) setDragging(true);
+      },
+      onDragOver: (e) => e.preventDefault(),
+      onDragLeave: (e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) setDragging(false);
+      },
+      onDrop: (e) => {
+        e.preventDefault();
+        setDragging(false);
+        if (!disabled) handle(e.dataTransfer.files);
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            hidden: true,
+            accept,
+            multiple,
+            disabled,
+            onChange: (e) => {
+              handle(e.target.files);
+              e.target.value = "";
+            }
+          }
+        ),
+        children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "ru-dropzone__icon", children: icon ?? /* @__PURE__ */ jsx(UploadCloudIcon, {}) }),
+          /* @__PURE__ */ jsx("span", { className: "ru-dropzone__title", children: title }),
+          /* @__PURE__ */ jsx("span", { className: "ru-dropzone__desc", children: description ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+            "or ",
+            /* @__PURE__ */ jsx("span", { className: "ru-dropzone__browse", children: "browse" }),
+            " to choose files",
+            maxSize ? ` (max ${formatBytes(maxSize)})` : ""
+          ] }) })
+        ] })
+      ]
+    }
+  );
+}
+const statusText = { uploading: "Uploading…", complete: "Completed", error: "Failed" };
+function FileItem({
+  name,
+  size,
+  status = "complete",
+  progress = 0,
+  icon,
+  error,
+  onRemove,
+  action,
+  removeLabel,
+  className,
+  ...rest
+}) {
+  const uploading = status === "uploading";
+  return /* @__PURE__ */ jsxs("div", { className: cn("ru-file-item", `ru-file-item--${status}`, className), ...rest, children: [
+    /* @__PURE__ */ jsx("span", { className: "ru-file-item__icon", children: icon ?? /* @__PURE__ */ jsx(FileIcon, {}) }),
+    /* @__PURE__ */ jsxs("div", { className: "ru-file-item__body", children: [
+      /* @__PURE__ */ jsx("div", { className: "ru-file-item__name", title: name, children: name }),
+      /* @__PURE__ */ jsxs("div", { className: "ru-file-item__meta", children: [
+        size !== void 0 && /* @__PURE__ */ jsx("span", { children: formatBytes(size) }),
+        size !== void 0 && /* @__PURE__ */ jsx("span", { className: "ru-file-item__dot", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "ru-file-item__status", children: status === "error" && error ? error : statusText[status] })
+      ] }),
+      uploading && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "ru-file-item__bar",
+          role: "progressbar",
+          "aria-valuemin": 0,
+          "aria-valuemax": 100,
+          "aria-valuenow": progress,
+          "aria-label": `Uploading ${name}`,
+          children: /* @__PURE__ */ jsx("span", { style: { width: `${progress}%` } })
+        }
+      )
+    ] }),
+    uploading && /* @__PURE__ */ jsxs("span", { className: "ru-file-item__percent", children: [
+      Math.round(progress),
+      "%"
+    ] }),
+    action,
+    onRemove && /* @__PURE__ */ jsx("button", { type: "button", className: "ru-file-item__remove", "aria-label": removeLabel ?? `Remove ${name}`, onClick: onRemove, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+  ] });
+}
+const UndoIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("path", { d: "M9 14 4 9l5-5" }),
+  /* @__PURE__ */ jsx("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 0 11H11" })
+] });
+const EraserIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("path", { d: "m7 21-4.3-4.3a1 1 0 0 1 0-1.4l10-10a1 1 0 0 1 1.4 0l5.6 5.6a1 1 0 0 1 0 1.4L11 21" }),
+  /* @__PURE__ */ jsx("path", { d: "M22 21H7M5 11l9 9" })
+] });
+const SignaturePad = forwardRef(function SignaturePad2({
+  onChange,
+  strokeColor,
+  strokeWidth = 2.5,
+  height = 180,
+  placeholder = "Sign here",
+  showControls = true,
+  undoLabel = "Undo",
+  clearLabel = "Clear",
+  actions,
+  disabled = false,
+  className,
+  style,
+  ...rest
+}, ref) {
+  const canvasRef = useRef(null);
+  const strokes = useRef([]);
+  const drawing = useRef(null);
+  const [count, setCount] = useState(0);
+  const ink = useCallback(() => strokeColor ?? getComputedStyle(canvasRef.current).color, [strokeColor]);
+  const drawStroke = useCallback(
+    (ctx, points) => {
+      ctx.strokeStyle = ink();
+      ctx.fillStyle = ctx.strokeStyle;
+      if (points.length === 1) {
+        ctx.beginPath();
+        ctx.arc(points[0].x, points[0].y, strokeWidth / 2, 0, Math.PI * 2);
+        ctx.fill();
+        return;
+      }
+      for (let i = 1; i < points.length; i++) {
+        const a = points[i - 1];
+        const b = points[i];
+        const mid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+        ctx.lineWidth = b.w;
+        ctx.beginPath();
+        ctx.moveTo(a.mx ?? a.x, a.my ?? a.y);
+        ctx.quadraticCurveTo(a.x, a.y, mid.x, mid.y);
+        ctx.stroke();
+        b.mx = mid.x;
+        b.my = mid.y;
+      }
+    },
+    [ink, strokeWidth]
+  );
+  const redraw = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    strokes.current.forEach((s) => drawStroke(ctx, s.map(({ x, y, w }) => ({ x, y, w }))));
+  }, [drawStroke]);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return void 0;
+    const fit = () => {
+      var _a;
+      const dpr = window.devicePixelRatio || 1;
+      const { width, height: h } = canvas.getBoundingClientRect();
+      canvas.width = Math.max(1, Math.round(width * dpr));
+      canvas.height = Math.max(1, Math.round(h * dpr));
+      (_a = canvas.getContext("2d")) == null ? void 0 : _a.setTransform(dpr, 0, 0, dpr, 0, 0);
+      redraw();
+    };
+    fit();
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const ro = new ResizeObserver(fit);
+    ro.observe(canvas);
+    return () => ro.disconnect();
+  }, [redraw]);
+  const emit = () => onChange == null ? void 0 : onChange(strokes.current.length ? canvasRef.current.toDataURL("image/png") : null);
+  const point = (e) => {
+    const rect = canvasRef.current.getBoundingClientRect();
+    return { x: e.clientX - rect.left, y: e.clientY - rect.top, t: e.timeStamp };
+  };
+  const onPointerDown = (e) => {
+    if (disabled || e.pointerType === "mouse" && e.button !== 0) return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    const p = { ...point(e), w: strokeWidth };
+    drawing.current = [p];
+    const ctx = canvasRef.current.getContext("2d");
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    drawStroke(ctx, [p]);
+  };
+  const onPointerMove = (e) => {
+    const stroke = drawing.current;
+    if (!stroke) return;
+    const prev = stroke[stroke.length - 1];
+    const p = point(e);
+    const dist = Math.hypot(p.x - prev.x, p.y - prev.y);
+    if (dist < 1.5) return;
+    const speed = dist / Math.max(1, p.t - prev.t);
+    const target = strokeWidth * Math.max(0.45, Math.min(1.35, 1.4 - speed * 0.45));
+    p.w = prev.w * 0.6 + target * 0.4;
+    stroke.push(p);
+    drawStroke(canvasRef.current.getContext("2d"), stroke.slice(-3));
+  };
+  const onPointerUp = () => {
+    if (!drawing.current) return;
+    strokes.current = [...strokes.current, drawing.current];
+    drawing.current = null;
+    setCount(strokes.current.length);
+    emit();
+  };
+  const undo = () => {
+    strokes.current = strokes.current.slice(0, -1);
+    setCount(strokes.current.length);
+    redraw();
+    emit();
+  };
+  const clear = () => {
+    strokes.current = [];
+    setCount(0);
+    redraw();
+    emit();
+  };
+  useImperativeHandle(ref, () => ({
+    clear,
+    undo,
+    isEmpty: () => strokes.current.length === 0,
+    toDataURL: (type = "image/png") => canvasRef.current.toDataURL(type)
+  }));
+  return /* @__PURE__ */ jsxs("div", { className: cn("ru-signature", disabled && "ru-signature--disabled", className), style, ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { className: "ru-signature__canvas-wrap", style: { height }, children: [
+      count === 0 && placeholder && /* @__PURE__ */ jsx("span", { className: "ru-signature__placeholder", "aria-hidden": "true", children: placeholder }),
+      /* @__PURE__ */ jsx(
+        "canvas",
+        {
+          ref: canvasRef,
+          className: "ru-signature__canvas",
+          role: "img",
+          "aria-label": count ? "Signature drawn" : "Signature pad, empty",
+          onPointerDown,
+          onPointerMove,
+          onPointerUp,
+          onPointerCancel: onPointerUp
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "ru-signature__baseline", "aria-hidden": "true" })
+    ] }),
+    (showControls || actions) && /* @__PURE__ */ jsxs("div", { className: "ru-signature__bar", children: [
+      showControls && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("button", { type: "button", className: "ru-signature__btn", onClick: undo, disabled: disabled || count === 0, children: [
+          /* @__PURE__ */ jsx(UndoIcon, {}),
+          undoLabel
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "ru-signature__sep", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs("button", { type: "button", className: "ru-signature__btn", onClick: clear, disabled: disabled || count === 0, children: [
+          /* @__PURE__ */ jsx(EraserIcon, {}),
+          clearLabel
+        ] })
+      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: "ru-signature__actions", children: actions })
+    ] })
+  ] });
+});
+const statusLabels = {
+  running: "In progress",
+  queued: "Queued",
+  pending: "Not started",
+  partial: "Partly done",
+  complete: "Complete",
+  error: "Failed"
+};
+function StatusIcon({ status = "pending", progress = 50, size = 20, label, className, style, ...rest }) {
+  const r = 8;
+  const c = 2 * Math.PI * r;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "img",
+      "aria-label": label ?? statusLabels[status] ?? status,
+      className: cn("ru-status-icon", `ru-status-icon--${status}`, className),
+      style: { width: size, height: size, ...style },
+      ...rest,
+      children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", width: size, height: size, "aria-hidden": "true", children: status === "complete" || status === "error" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "10", className: "ru-status-icon__fill" }),
+        status === "complete" ? /* @__PURE__ */ jsx("path", { d: "m6 10.2 2.6 2.6L14 7.4", className: "ru-status-icon__glyph" }) : /* @__PURE__ */ jsx("path", { d: "m7 7 6 6M13 7l-6 6", className: "ru-status-icon__glyph" })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "10",
+            cy: "10",
+            r,
+            className: "ru-status-icon__ring",
+            strokeDasharray: status === "running" || status === "queued" ? "2.6 2.4" : void 0
+          }
+        ),
+        status === "partial" && /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "10",
+            cy: "10",
+            r,
+            className: "ru-status-icon__arc",
+            strokeDasharray: c,
+            strokeDashoffset: c * (1 - Math.min(100, Math.max(0, progress)) / 100)
+          }
+        )
+      ] }) })
+    }
+  );
+}
+function StepList({ items, connector = true, dividers = true, className, ...rest }) {
+  return /* @__PURE__ */ jsx("ol", { className: cn("ru-step-list", !dividers && "ru-step-list--plain", className), ...rest, children: items.map((item, i) => /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: cn("ru-step-list__item", `ru-step-list__item--${item.status ?? "pending"}`),
+      "aria-current": item.status === "running" ? "step" : void 0,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "ru-step-list__rail", children: [
+          /* @__PURE__ */ jsx("span", { className: "ru-step-list__icon", children: /* @__PURE__ */ jsx(StatusIcon, { status: item.status, progress: item.progress, size: 22 }) }),
+          connector && i < items.length - 1 && /* @__PURE__ */ jsx("span", { className: "ru-step-list__line", "aria-hidden": "true" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "ru-step-list__body", children: [
+          /* @__PURE__ */ jsx("div", { className: "ru-step-list__title", children: item.title }),
+          item.description && /* @__PURE__ */ jsx("div", { className: "ru-step-list__desc", children: item.description })
+        ] }),
+        item.meta && /* @__PURE__ */ jsx("div", { className: "ru-step-list__meta", children: item.meta })
+      ]
+    },
+    item.key ?? i
+  )) });
+}
+function StackedProgress({ segments, max, size = "md", showLegend = true, gap = 4, label, className, ...rest }) {
+  const total = max ?? segments.reduce((sum, s) => sum + s.value, 0);
+  const summary = segments.map((s) => `${s.label} ${Math.round(s.value / total * 100)}%`).join(", ");
+  return /* @__PURE__ */ jsxs("div", { className: cn("ru-stacked", `ru-stacked--${size}`, className), ...rest, children: [
+    (label || showLegend) && /* @__PURE__ */ jsxs("div", { className: "ru-stacked__head", children: [
+      label && /* @__PURE__ */ jsx("span", { className: "ru-stacked__label", children: label }),
+      showLegend && /* @__PURE__ */ jsx("ul", { className: "ru-stacked__legend", children: segments.map((s) => /* @__PURE__ */ jsxs("li", { children: [
+        /* @__PURE__ */ jsx("span", { className: "ru-stacked__dot", style: { background: s.color } }),
+        s.label
+      ] }, s.label)) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ru-stacked__bar", role: "img", "aria-label": summary, style: { gap }, children: [
+      segments.map((s) => /* @__PURE__ */ jsx("span", { className: "ru-stacked__seg", title: `${s.label}: ${s.value}`, style: { flexGrow: s.value, background: s.color } }, s.label)),
+      max !== void 0 && total > segments.reduce((sum, s) => sum + s.value, 0) && /* @__PURE__ */ jsx("span", { className: "ru-stacked__rest", style: { flexGrow: total - segments.reduce((sum, s) => sum + s.value, 0) } })
+    ] })
+  ] });
+}
+const semanticColors = /* @__PURE__ */ new Set(["primary", "secondary", "success", "danger", "warning", "info"]);
+function IconTile({
+  color = "primary",
+  size = 48,
+  radius,
+  badge,
+  glow = true,
+  label,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const ink = semanticColors.has(color) ? `var(--ru-${color})` : color;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn("ru-icon-tile", glow && "ru-icon-tile--glow", className),
+      style: { "--_c": ink, "--_s": `${size}px`, ...radius !== void 0 && { "--_r": typeof radius === "number" ? `${radius}px` : radius }, ...style },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "ru-icon-tile__face", role: label ? "img" : void 0, "aria-label": label, "aria-hidden": label ? void 0 : true, children }),
+        badge && /* @__PURE__ */ jsx("span", { className: "ru-icon-tile__badge", "aria-hidden": "true", children: badge })
+      ]
+    }
+  );
+}
 export {
   Accordion,
   Alert,
@@ -2067,10 +2987,15 @@ export {
   CardFooter,
   CardHeader,
   Checkbox,
+  DateTile,
   Divider,
+  DotText,
   Drawer,
   Dropdown,
+  Dropzone,
+  FileItem,
   FrameCard,
+  IconTile,
   Input,
   Kbd,
   Modal,
@@ -2078,12 +3003,19 @@ export {
   Pagination,
   Pattern,
   Progress,
+  ProgressRing,
   Radio,
   RadioGroup,
+  SegmentedControl,
   Select,
+  SignaturePad,
   Skeleton,
   Spinner,
   SpotlightCard,
+  StackedProgress,
+  Stat,
+  StatusIcon,
+  StepList,
   Switch,
   Table,
   Tabs,
@@ -2091,6 +3023,7 @@ export {
   ToastProvider,
   Tooltip,
   cn,
+  formatBytes,
   useClickOutside,
   useControllableState,
   useDisclosure,