reusify-ui 2.0.1 → 2.2.0

package/dist/reusify-ui.js

@@ -1,40 +1,112 @@
 "use client";
-import { jsxs, jsx, Fragment as Fragment$1 } from "react/jsx-runtime";
-import { forwardRef, useState, useEffect, Children, isValidElement, cloneElement, useRef, useCallback, useImperativeHandle, useId, useMemo, Fragment, useContext, createContext } from "react";
+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 { createPortal } from "react-dom";
 function cn(...classes) {
   return classes.filter(Boolean).join(" ");
 }
+const legacyVariants = {
+  primary: ["solid", void 0],
+  danger: ["solid", "danger"],
+  success: ["solid", "success"]
+};
+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;
+  if (typeof radius === "number") return `${radius}px`;
+  return radii[radius] ?? radius;
+}
 const Button = forwardRef(function Button2({
-  variant = "primary",
+  variant = "solid",
+  color,
+  textColor,
+  radius,
+  justify = "center",
   size = "md",
   loading = false,
   fullWidth = false,
+  pill = false,
+  iconOnly = false,
   leftIcon,
   rightIcon,
   disabled,
+  href,
   type = "button",
   className,
+  style,
+  onPointerMove,
   children,
   ...rest
 }, ref) {
-  return /* @__PURE__ */ jsxs(
+  const [kind, legacyColor] = legacyVariants[variant] ?? [variant, void 0];
+  const handlePointerMove = kind === "pixel" ? (e) => {
+    const el = e.currentTarget;
+    const rect = el.getBoundingClientRect();
+    el.style.setProperty("--ru-px", `${e.clientX - rect.left}px`);
+    el.style.setProperty("--ru-py", `${e.clientY - rect.top}px`);
+    onPointerMove == null ? void 0 : onPointerMove(e);
+  } : onPointerMove;
+  const resolvedColor = color ?? legacyColor ?? "primary";
+  const customColor = !semanticColors$5.has(resolvedColor);
+  const classes = cn(
+    "ru-btn",
+    `ru-btn--${kind}`,
+    `ru-btn--${size}`,
+    !customColor && `ru-c-${resolvedColor}`,
+    fullWidth && "ru-btn--full",
+    pill && "ru-btn--pill",
+    iconOnly && "ru-btn--icon",
+    justify !== "center" && `ru-btn--justify-${justify}`,
+    className
+  );
+  const inlineStyle = {
+    ...customColor && { "--_c": resolvedColor },
+    ...textColor && { "--_fg": textColor },
+    ...radius !== void 0 && { borderRadius: resolveRadius(radius) },
+    ...style
+  };
+  const styleProp = Object.keys(inlineStyle).length ? inlineStyle : void 0;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    loading ? /* @__PURE__ */ jsx("span", { className: "ru-spinner", "aria-hidden": "true" }) : leftIcon,
+    children,
+    !loading && rightIcon && /* @__PURE__ */ jsx("span", { className: "ru-btn__end", children: rightIcon })
+  ] });
+  if (href !== void 0) {
+    const inactive = disabled || loading;
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        ref,
+        href: inactive ? void 0 : href,
+        "aria-disabled": inactive || void 0,
+        "aria-busy": loading || void 0,
+        className: classes,
+        style: styleProp,
+        onPointerMove: handlePointerMove,
+        ...rest,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
     "button",
     {
       ref,
       type,
       disabled: disabled || loading,
       "aria-busy": loading || void 0,
-      className: cn("ru-btn", `ru-btn--${variant}`, `ru-btn--${size}`, fullWidth && "ru-btn--full", className),
+      className: classes,
+      style: styleProp,
+      onPointerMove: handlePointerMove,
       ...rest,
-      children: [
-        loading ? /* @__PURE__ */ jsx("span", { className: "ru-spinner", "aria-hidden": "true" }) : leftIcon,
-        children,
-        !loading && rightIcon
-      ]
+      children: content
     }
   );
 });
+function ButtonGroup({ attached = false, className, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { role: "group", className: cn("ru-btn-group", attached && "ru-btn-group--attached", className), ...rest });
+}
 const base = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
@@ -71,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,
@@ -86,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,
@@ -98,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: [
@@ -114,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}%` } })
       }
     )
@@ -153,132 +321,6 @@ function Alert({ variant = "info", title, icon, onClose, className, children, ..
     }
   );
 }
-function Badge({ variant = "soft", color = "primary", size = "md", dot = false, className, children, ...rest }) {
-  return /* @__PURE__ */ jsxs("span", { className: cn("ru-badge", `ru-badge--${variant}`, `ru-badge--${size}`, `ru-c-${color}`, className), ...rest, children: [
-    dot && /* @__PURE__ */ jsx("span", { className: "ru-badge__dot", "aria-hidden": "true" }),
-    children
-  ] });
-}
-function getInitials(name) {
-  const parts = name.trim().split(/\s+/).filter(Boolean);
-  if (parts.length === 0) return "";
-  const first = parts[0][0];
-  const last = parts.length > 1 ? parts[parts.length - 1][0] : "";
-  return (first + last).toUpperCase();
-}
-function Avatar({ src, alt, name, size = "md", shape = "circle", className, ...rest }) {
-  const [failed, setFailed] = useState(false);
-  useEffect(() => setFailed(false), [src]);
-  const showImage = src && !failed;
-  const initials = name ? getInitials(name) : "";
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn("ru-avatar", `ru-avatar--${size}`, shape === "square" && "ru-avatar--square", className),
-      role: showImage ? void 0 : "img",
-      "aria-label": showImage ? void 0 : alt ?? name ?? "Avatar",
-      ...rest,
-      children: showImage ? /* @__PURE__ */ jsx("img", { src, alt: alt ?? name ?? "", onError: () => setFailed(true) }) : initials ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: initials }) : /* @__PURE__ */ jsx(UserIcon, { className: "ru-avatar__icon" })
-    }
-  );
-}
-function AvatarGroup({ max, size = "md", className, children, ...rest }) {
-  const avatars = Children.toArray(children).filter(isValidElement);
-  const visible = max ? avatars.slice(0, max) : avatars;
-  const extra = avatars.length - visible.length;
-  return /* @__PURE__ */ jsxs("div", { className: cn("ru-avatar-group", className), ...rest, children: [
-    visible.map((child) => cloneElement(child, { size: child.props.size ?? size })),
-    extra > 0 && /* @__PURE__ */ jsxs("span", { className: cn("ru-avatar", `ru-avatar--${size}`), "aria-label": `${extra} more`, children: [
-      "+",
-      extra
-    ] })
-  ] });
-}
-function Card({ variant = "outline", hoverable = false, className, ...rest }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "ru-card",
-        variant === "elevated" && "ru-card--elevated",
-        hoverable && "ru-card--hoverable",
-        className
-      ),
-      ...rest
-    }
-  );
-}
-function CardHeader({ title, subtitle, action, className, children, ...rest }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("ru-card__header", className), ...rest, children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      title && /* @__PURE__ */ jsx("h3", { className: "ru-card__title", children: title }),
-      subtitle && /* @__PURE__ */ jsx("p", { className: "ru-card__subtitle", children: subtitle }),
-      children
-    ] }),
-    action
-  ] });
-}
-function CardBody({ className, ...rest }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("ru-card__body", className), ...rest });
-}
-function CardFooter({ className, ...rest }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("ru-card__footer", className), ...rest });
-}
-function Divider({ orientation = "horizontal", label, className, ...rest }) {
-  if (label && orientation === "horizontal") {
-    return /* @__PURE__ */ jsx("div", { role: "separator", className: cn("ru-divider", "ru-divider--label", className), ...rest, children: label });
-  }
-  return /* @__PURE__ */ jsx(
-    "hr",
-    {
-      "aria-orientation": orientation,
-      className: cn("ru-divider", orientation === "vertical" && "ru-divider--vertical", className),
-      ...rest
-    }
-  );
-}
-function Table({
-  columns,
-  data,
-  rowKey,
-  striped = false,
-  hoverable = false,
-  size = "md",
-  caption,
-  emptyText = "No data",
-  onRowClick,
-  className
-}) {
-  const getKey = (row, index) => {
-    if (typeof rowKey === "function") return rowKey(row, index);
-    if (rowKey !== void 0) return String(row[rowKey]);
-    return index;
-  };
-  return /* @__PURE__ */ jsx("div", { className: cn("ru-table-wrap", className), children: /* @__PURE__ */ jsxs(
-    "table",
-    {
-      className: cn(
-        "ru-table",
-        `ru-table--${size}`,
-        striped && "ru-table--striped",
-        (hoverable || onRowClick) && "ru-table--hover"
-      ),
-      children: [
-        caption && /* @__PURE__ */ jsx("caption", { children: caption }),
-        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsx("th", { scope: "col", style: { textAlign: col.align, width: col.width }, children: col.header }, col.key)) }) }),
-        /* @__PURE__ */ jsx("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { className: "ru-table__empty", colSpan: columns.length, children: emptyText }) }) : data.map((row, i) => /* @__PURE__ */ jsx(
-          "tr",
-          {
-            onClick: onRowClick ? () => onRowClick(row, i) : void 0,
-            style: onRowClick ? { cursor: "pointer" } : void 0,
-            children: columns.map((col) => /* @__PURE__ */ jsx("td", { style: { textAlign: col.align }, children: col.render ? col.render(row, i) : row[col.key] }, col.key))
-          },
-          getKey(row, i)
-        )) })
-      ]
-    }
-  ) });
-}
 function useControllableState(value, defaultValue, onChange) {
   const [internal, setInternal] = useState(defaultValue);
   const isControlled = value !== void 0;
@@ -535,7 +577,7 @@ function childrenToOptions(children) {
       result.push({ label, value: value ?? String(label), disabled });
     } else if (child.type === "optgroup") {
       result.push({ label: child.props.label, options: childrenToOptions(child.props.children) });
-    } else if (child.type === Fragment) {
+    } else if (child.type === Fragment$1) {
       result.push(...childrenToOptions(child.props.children));
     }
   });
@@ -892,7 +934,7 @@ function RadioGroup({
     )) })
   ] });
 }
-const Switch = forwardRef(function Switch2({ checked, defaultChecked = false, onChange, label, size = "md", color = "primary", disabled, name, id, className }, ref) {
+const Switch = forwardRef(function Switch2({ checked, defaultChecked = false, onChange, label, size = "md", color = "primary", disabled, name, id, className, ...rest }, ref) {
   const [on, setOn] = useControllableState(checked, defaultChecked, onChange);
   return /* @__PURE__ */ jsxs(
     "label",
@@ -910,6 +952,7 @@ const Switch = forwardRef(function Switch2({ checked, defaultChecked = false, on
             disabled,
             className: "ru-switch__track",
             onClick: () => setOn(!on),
+            ...rest,
             children: /* @__PURE__ */ jsx("span", { className: "ru-switch__thumb" })
           }
         ),
@@ -919,330 +962,78 @@ const Switch = forwardRef(function Switch2({ checked, defaultChecked = false, on
     }
   );
 });
-function DialogContent({ titleId, descId, title, description, showCloseButton, onClose, children, footer }) {
-  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    (title || description || showCloseButton) && /* @__PURE__ */ jsxs("div", { className: "ru-modal__header", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        title && /* @__PURE__ */ jsx("h2", { id: titleId, className: "ru-modal__title", children: title }),
-        description && /* @__PURE__ */ jsx("p", { id: descId, className: "ru-modal__desc", children: description })
-      ] }),
-      showCloseButton && /* @__PURE__ */ jsx(CloseButton, { onClick: onClose })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "ru-modal__body", children }),
-    footer && /* @__PURE__ */ jsx("div", { className: "ru-modal__footer", children: footer })
-  ] });
-}
-function Modal({
-  open,
-  onClose,
-  size = "md",
-  closeOnOverlayClick = true,
-  closeOnEsc = true,
-  showCloseButton = true,
-  className,
-  ...content
-}) {
-  const panelRef = useRef(null);
-  const mounted = useMounted();
-  const titleId = useId();
-  const descId = useId();
-  useOverlay(open && mounted, panelRef, onClose, closeOnEsc);
-  if (!open || !mounted) return null;
-  const onOverlayMouseDown = (e) => {
-    if (closeOnOverlayClick && e.target === e.currentTarget) onClose();
+function Tabs({ items, value, defaultValue, onChange, variant = "line", fullWidth = false, className }) {
+  var _a;
+  const baseId = useId();
+  const firstEnabled = ((_a = items.find((item) => !item.disabled)) == null ? void 0 : _a.value) ?? "";
+  const [active, setActive] = useControllableState(value, defaultValue ?? firstEnabled, onChange);
+  const tabRefs = useRef([]);
+  const onKeyDown = (e, index) => {
+    var _a2;
+    const enabled = items.flatMap((item, i) => item.disabled ? [] : [i]);
+    const pos = enabled.indexOf(index);
+    let next;
+    switch (e.key) {
+      case "ArrowRight":
+        next = enabled[(pos + 1) % enabled.length];
+        break;
+      case "ArrowLeft":
+        next = enabled[(pos - 1 + enabled.length) % enabled.length];
+        break;
+      case "Home":
+        next = enabled[0];
+        break;
+      case "End":
+        next = enabled[enabled.length - 1];
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    (_a2 = tabRefs.current[next]) == null ? void 0 : _a2.focus();
+    setActive(items[next].value);
   };
-  return createPortal(
-    /* @__PURE__ */ jsx("div", { className: "ru-overlay", onMouseDown: onOverlayMouseDown, children: /* @__PURE__ */ jsx(
+  const activeIndex = items.findIndex((item) => item.value === active);
+  const activeItem = items[activeIndex];
+  return /* @__PURE__ */ jsxs("div", { className: cn("ru-tabs", `ru-tabs--${variant}`, fullWidth && "ru-tabs--full", className), children: [
+    /* @__PURE__ */ jsx("div", { role: "tablist", className: "ru-tabs__list", children: items.map((item, i) => {
+      const selected = i === activeIndex;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: (el) => {
+            tabRefs.current[i] = el;
+          },
+          type: "button",
+          role: "tab",
+          id: `${baseId}-tab-${i}`,
+          "aria-selected": selected,
+          "aria-controls": `${baseId}-panel-${i}`,
+          tabIndex: selected ? 0 : -1,
+          disabled: item.disabled,
+          className: "ru-tabs__tab",
+          onClick: () => setActive(item.value),
+          onKeyDown: (e) => onKeyDown(e, i),
+          children: [
+            item.icon,
+            item.label
+          ]
+        },
+        item.value
+      );
+    }) }),
+    activeItem && activeItem.content !== void 0 && /* @__PURE__ */ jsx(
       "div",
       {
-        ref: panelRef,
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-labelledby": content.title ? titleId : void 0,
-        "aria-describedby": content.description ? descId : void 0,
-        tabIndex: -1,
-        className: cn("ru-modal", `ru-modal--${size}`, className),
-        children: /* @__PURE__ */ jsx(
-          DialogContent,
-          {
-            ...content,
-            titleId,
-            descId,
-            showCloseButton,
-            onClose
-          }
-        )
+        role: "tabpanel",
+        id: `${baseId}-panel-${activeIndex}`,
+        "aria-labelledby": `${baseId}-tab-${activeIndex}`,
+        tabIndex: 0,
+        className: "ru-tabs__panel",
+        children: activeItem.content
       }
-    ) }),
-    document.body
-  );
-}
-const drawerSizes = { sm: "20rem", md: "24rem", lg: "32rem" };
-function Drawer({
-  open,
-  onClose,
-  placement = "right",
-  size = "md",
-  closeOnOverlayClick = true,
-  closeOnEsc = true,
-  showCloseButton = true,
-  className,
-  ...content
-}) {
-  const panelRef = useRef(null);
-  const mounted = useMounted();
-  const titleId = useId();
-  const descId = useId();
-  useOverlay(open && mounted, panelRef, onClose, closeOnEsc);
-  if (!open || !mounted) return null;
-  const resolvedSize = typeof size === "number" ? `${size}px` : drawerSizes[size] ?? size;
-  return createPortal(
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "ru-overlay ru-overlay--drawer",
-        onMouseDown: (e) => {
-          if (closeOnOverlayClick && e.target === e.currentTarget) onClose();
-        },
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: panelRef,
-            role: "dialog",
-            "aria-modal": "true",
-            "aria-labelledby": content.title ? titleId : void 0,
-            "aria-describedby": content.description ? descId : void 0,
-            tabIndex: -1,
-            className: cn("ru-drawer", `ru-drawer--${placement}`, className),
-            style: { "--ru-drawer-size": resolvedSize },
-            children: /* @__PURE__ */ jsx(
-              DialogContent,
-              {
-                ...content,
-                titleId,
-                descId,
-                showCloseButton,
-                onClose
-              }
-            )
-          }
-        )
-      }
-    ),
-    document.body
-  );
-}
-function Tooltip({ content, children, placement = "top", delay = 100, disabled, className }) {
-  const [open, setOpen] = useState(false);
-  const timer = useRef(void 0);
-  const id = useId();
-  const visible = open && !disabled && content != null && content !== "";
-  useEffect(() => () => clearTimeout(timer.current), []);
-  const show = () => {
-    clearTimeout(timer.current);
-    timer.current = setTimeout(() => setOpen(true), delay);
-  };
-  const hide = () => {
-    clearTimeout(timer.current);
-    setOpen(false);
-  };
-  const trigger = isValidElement(children) ? cloneElement(children, {
-    "aria-describedby": visible ? id : void 0
-  }) : children;
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      className: cn("ru-tooltip", className),
-      onMouseEnter: show,
-      onMouseLeave: hide,
-      onFocus: show,
-      onBlur: hide,
-      onKeyDown: (e) => e.key === "Escape" && hide(),
-      children: [
-        trigger,
-        visible && /* @__PURE__ */ jsx("span", { role: "tooltip", id, className: cn("ru-tooltip__bubble", `ru-tooltip__bubble--${placement}`), children: content })
-      ]
-    }
-  );
-}
-function Dropdown({ trigger, items, align = "start", closeOnSelect = true, className }) {
-  const [open, setOpen] = useState(false);
-  const rootRef = useRef(null);
-  const menuRef = useRef(null);
-  const menuId = useId();
-  useClickOutside(rootRef, () => setOpen(false), open);
-  const getItems = () => {
-    var _a;
-    return Array.from(((_a = menuRef.current) == null ? void 0 : _a.querySelectorAll('[role="menuitem"]:not(:disabled)')) ?? []);
-  };
-  const focusItem = (index) => {
-    const els = getItems();
-    if (els.length) els[(index + els.length) % els.length].focus();
-  };
-  const closeAndFocusTrigger = () => {
-    var _a, _b;
-    setOpen(false);
-    (_b = (_a = rootRef.current) == null ? void 0 : _a.querySelector("[aria-haspopup]")) == null ? void 0 : _b.focus();
-  };
-  useEffect(() => {
-    if (open) focusItem(0);
-  }, [open]);
-  const onMenuKeyDown = (e) => {
-    const els = getItems();
-    const index = els.indexOf(document.activeElement);
-    switch (e.key) {
-      case "ArrowDown":
-        e.preventDefault();
-        focusItem(index + 1);
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        focusItem(index - 1);
-        break;
-      case "Home":
-        e.preventDefault();
-        focusItem(0);
-        break;
-      case "End":
-        e.preventDefault();
-        focusItem(-1);
-        break;
-      case "Escape":
-        e.preventDefault();
-        closeAndFocusTrigger();
-        break;
-      case "Tab":
-        setOpen(false);
-        break;
-    }
-  };
-  const triggerProps = trigger.props;
-  const triggerEl = cloneElement(trigger, {
-    "aria-haspopup": "menu",
-    "aria-expanded": open,
-    "aria-controls": open ? menuId : void 0,
-    onClick: (e) => {
-      var _a;
-      (_a = triggerProps.onClick) == null ? void 0 : _a.call(triggerProps, e);
-      setOpen((v) => !v);
-    },
-    onKeyDown: (e) => {
-      var _a;
-      (_a = triggerProps.onKeyDown) == null ? void 0 : _a.call(triggerProps, e);
-      if (e.key === "ArrowDown" && !open) {
-        e.preventDefault();
-        setOpen(true);
-      }
-    }
-  });
-  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("ru-dropdown", className), children: [
-    triggerEl,
-    open && /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: menuRef,
-        id: menuId,
-        role: "menu",
-        className: cn("ru-dropdown__menu", align === "end" && "ru-dropdown__menu--end"),
-        onKeyDown: onMenuKeyDown,
-        children: items.map(
-          (item, i) => item.divider ? /* @__PURE__ */ jsx("div", { role: "separator", className: "ru-dropdown__divider" }, item.key ?? i) : /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              role: "menuitem",
-              tabIndex: -1,
-              disabled: item.disabled,
-              className: cn("ru-dropdown__item", item.danger && "ru-dropdown__item--danger"),
-              onClick: () => {
-                var _a;
-                (_a = item.onClick) == null ? void 0 : _a.call(item);
-                if (closeOnSelect) closeAndFocusTrigger();
-              },
-              children: [
-                item.icon && /* @__PURE__ */ jsx("span", { className: "ru-dropdown__icon", children: item.icon }),
-                item.label
-              ]
-            },
-            item.key ?? i
-          )
-        )
-      }
-    )
-  ] });
-}
-function Tabs({ items, value, defaultValue, onChange, variant = "line", fullWidth = false, className }) {
-  var _a;
-  const baseId = useId();
-  const firstEnabled = ((_a = items.find((item) => !item.disabled)) == null ? void 0 : _a.value) ?? "";
-  const [active, setActive] = useControllableState(value, defaultValue ?? firstEnabled, onChange);
-  const tabRefs = useRef([]);
-  const onKeyDown = (e, index) => {
-    var _a2;
-    const enabled = items.flatMap((item, i) => item.disabled ? [] : [i]);
-    const pos = enabled.indexOf(index);
-    let next;
-    switch (e.key) {
-      case "ArrowRight":
-        next = enabled[(pos + 1) % enabled.length];
-        break;
-      case "ArrowLeft":
-        next = enabled[(pos - 1 + enabled.length) % enabled.length];
-        break;
-      case "Home":
-        next = enabled[0];
-        break;
-      case "End":
-        next = enabled[enabled.length - 1];
-        break;
-      default:
-        return;
-    }
-    e.preventDefault();
-    (_a2 = tabRefs.current[next]) == null ? void 0 : _a2.focus();
-    setActive(items[next].value);
-  };
-  const activeIndex = items.findIndex((item) => item.value === active);
-  const activeItem = items[activeIndex];
-  return /* @__PURE__ */ jsxs("div", { className: cn("ru-tabs", `ru-tabs--${variant}`, fullWidth && "ru-tabs--full", className), children: [
-    /* @__PURE__ */ jsx("div", { role: "tablist", className: "ru-tabs__list", children: items.map((item, i) => {
-      const selected = i === activeIndex;
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          ref: (el) => {
-            tabRefs.current[i] = el;
-          },
-          type: "button",
-          role: "tab",
-          id: `${baseId}-tab-${i}`,
-          "aria-selected": selected,
-          "aria-controls": `${baseId}-panel-${i}`,
-          tabIndex: selected ? 0 : -1,
-          disabled: item.disabled,
-          className: "ru-tabs__tab",
-          onClick: () => setActive(item.value),
-          onKeyDown: (e) => onKeyDown(e, i),
-          children: [
-            item.icon,
-            item.label
-          ]
-        },
-        item.value
-      );
-    }) }),
-    activeItem && activeItem.content !== void 0 && /* @__PURE__ */ jsx(
-      "div",
-      {
-        role: "tabpanel",
-        id: `${baseId}-panel-${activeIndex}`,
-        "aria-labelledby": `${baseId}-tab-${activeIndex}`,
-        tabIndex: 0,
-        className: "ru-tabs__panel",
-        children: activeItem.content
-      }
-    )
-  ] });
+    )
+  ] });
 }
 function Accordion({ items, multiple = false, value, defaultValue, onChange, className }) {
   const baseId = useId();
@@ -1356,15 +1147,663 @@ function Breadcrumbs({ items, separator, className }) {
     } else if (item.onClick) {
       node = /* @__PURE__ */ jsx("button", { type: "button", className: "ru-breadcrumbs__link", onClick: item.onClick, children: item.label });
     }
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
+    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx("li", { className: "ru-breadcrumbs__item", children: node }),
       !isLast && /* @__PURE__ */ jsx("li", { className: "ru-breadcrumbs__sep", "aria-hidden": "true", children: separator ?? /* @__PURE__ */ jsx(ChevronRightIcon, {}) })
     ] }, i);
   }) }) });
 }
-const ToastContext = createContext(null);
-function ToastProvider({ children, position = "bottom-right", duration = 4e3, max = 5 }) {
-  const [toasts, setToasts] = useState([]);
+function Badge({ variant = "soft", color = "primary", size = "md", dot = false, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs("span", { className: cn("ru-badge", `ru-badge--${variant}`, `ru-badge--${size}`, `ru-c-${color}`, className), ...rest, children: [
+    dot && /* @__PURE__ */ jsx("span", { className: "ru-badge__dot", "aria-hidden": "true" }),
+    children
+  ] });
+}
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "";
+  const first = parts[0][0];
+  const last = parts.length > 1 ? parts[parts.length - 1][0] : "";
+  return (first + last).toUpperCase();
+}
+const avatarSemanticColors = /* @__PURE__ */ new Set(["primary", "secondary", "success", "danger", "warning", "info"]);
+const avatarStatusLabels = { online: "Online", away: "Away", busy: "Busy", offline: "Offline" };
+function hueFromString(text) {
+  let hash = 0;
+  for (const ch of text) hash = (hash * 31 + ch.charCodeAt(0)) % 360;
+  return hash;
+}
+function resolveAvatarColor(color, seed) {
+  if (!color) return void 0;
+  if (color === "auto") return `hsl(${hueFromString(seed)} 70% 52%)`;
+  return avatarSemanticColors.has(color) ? `var(--ru-${color})` : color;
+}
+function AvatarTooltip({ content, description, accent, children }) {
+  const [open, setOpen] = useState(false);
+  const bubbleRef = useRef(null);
+  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("--_tilt", `${ratio * 12}deg`);
+  };
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "ru-avatar-tip",
+      onMouseEnter: () => setOpen(true),
+      onMouseLeave: () => setOpen(false),
+      onMouseMove: tiltToward,
+      onFocus: () => setOpen(true),
+      onBlur: () => setOpen(false),
+      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 })
+        ] }) })
+      ]
+    }
+  );
+}
+function Avatar({
+  src,
+  alt,
+  name,
+  size = "md",
+  shape = "circle",
+  color,
+  ring,
+  status,
+  statusPulse = false,
+  badge,
+  tooltip,
+  description,
+  tooltipAccent,
+  className,
+  style,
+  ...rest
+}) {
+  const [failed, setFailed] = useState(false);
+  useEffect(() => setFailed(false), [src]);
+  const showImage = src && !failed;
+  const initials = name ? getInitials(name) : "";
+  const numericSize = typeof size === "number";
+  const tint = resolveAvatarColor(color, name ?? alt ?? "");
+  const ringColor = typeof ring === "string" ? resolveAvatarColor(ring, name ?? "") : void 0;
+  const vars = {
+    ...numericSize && { width: size, height: size, fontSize: Math.round(size * 0.38) },
+    ...tint && { "--_avc": tint },
+    ...ringColor && { "--_ring": ringColor },
+    ...style
+  };
+  const baseLabel = alt ?? name ?? "Avatar";
+  const label = [baseLabel, description && `, ${description}`, status && ` (${avatarStatusLabels[status] ?? status})`, badge !== void 0 && badge !== null && `, ${badge} new`].filter(Boolean).join("");
+  const avatar = /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "ru-avatar",
+        !numericSize && `ru-avatar--${size}`,
+        shape !== "circle" && `ru-avatar--${shape}`,
+        tint && "ru-avatar--tinted",
+        ring && "ru-avatar--ring",
+        className
+      ),
+      role: showImage ? void 0 : "img",
+      "aria-label": showImage ? void 0 : label,
+      style: Object.keys(vars).length ? vars : void 0,
+      ...rest,
+      children: [
+        showImage ? /* @__PURE__ */ jsx("img", { src, alt: label === "Avatar" ? "" : label, onError: () => setFailed(true) }) : initials ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: initials }) : /* @__PURE__ */ jsx(UserIcon, { className: "ru-avatar__icon" }),
+        badge !== void 0 && badge !== null && /* @__PURE__ */ jsx("span", { className: "ru-avatar__badge", "aria-hidden": "true", children: badge }),
+        status && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn("ru-avatar__status", `ru-avatar__status--${status}`, statusPulse && "ru-avatar__status--pulse"),
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+  if (!tooltip) return avatar;
+  return /* @__PURE__ */ jsx(AvatarTooltip, { content: tooltip === true ? baseLabel : tooltip, description, accent: tooltipAccent, children: avatar });
+}
+const avatarOverlap = { tight: "-0.75rem", normal: "-0.5rem", loose: "-0.25rem", none: "0.25rem" };
+function AvatarGroup({ max, size = "md", spacing, tooltips = false, className, style, children, ...rest }) {
+  const avatars = Children.toArray(children).filter(isValidElement);
+  const visible = max ? avatars.slice(0, max) : avatars;
+  const extra = avatars.length - visible.length;
+  const overlap = spacing === void 0 ? void 0 : avatarOverlap[spacing] ?? `-${typeof spacing === "number" ? `${spacing}px` : spacing}`;
+  const vars = overlap ? { "--_overlap": overlap, ...style } : style;
+  return /* @__PURE__ */ jsxs("div", { className: cn("ru-avatar-group", className), style: vars, ...rest, children: [
+    visible.map(
+      (child) => cloneElement(child, {
+        size: child.props.size ?? size,
+        ...tooltips && child.props.tooltip === void 0 && { tooltip: true }
+      })
+    ),
+    extra > 0 && /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn("ru-avatar", typeof size === "number" ? void 0 : `ru-avatar--${size}`),
+        style: typeof size === "number" ? { width: size, height: size, fontSize: Math.round(size * 0.34) } : void 0,
+        role: "img",
+        "aria-label": `${extra} more`,
+        children: [
+          "+",
+          extra
+        ]
+      }
+    )
+  ] });
+}
+function Card({ variant = "outline", hoverable = false, className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "ru-card",
+        variant === "elevated" && "ru-card--elevated",
+        hoverable && "ru-card--hoverable",
+        className
+      ),
+      ...rest
+    }
+  );
+}
+function CardHeader({ title, subtitle, action, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("ru-card__header", className), ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      title && /* @__PURE__ */ jsx("h3", { className: "ru-card__title", children: title }),
+      subtitle && /* @__PURE__ */ jsx("p", { className: "ru-card__subtitle", children: subtitle }),
+      children
+    ] }),
+    action
+  ] });
+}
+function CardBody({ className, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("ru-card__body", className), ...rest });
+}
+function CardFooter({ className, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("ru-card__footer", className), ...rest });
+}
+const dividerSemanticColors = /* @__PURE__ */ new Set(["primary", "secondary", "success", "danger", "warning", "info"]);
+const dividerThickness = { sm: "1px", md: "2px", lg: "4px" };
+const dividerSpacing = { none: "0", sm: "0.5rem", md: "1rem", lg: "2rem", xl: "3rem" };
+const toLength = (v) => typeof v === "number" ? `${v}px` : v;
+function Divider({
+  orientation = "horizontal",
+  variant = "solid",
+  size,
+  color,
+  length,
+  align = "center",
+  spacing,
+  label,
+  labelPosition = "center",
+  className,
+  style,
+  ...rest
+}) {
+  const vertical = orientation === "vertical";
+  const labelled = Boolean(label) && !vertical;
+  const vars = {
+    ...size !== void 0 && { "--_t": dividerThickness[size] ?? toLength(size) },
+    ...color && { "--_line": dividerSemanticColors.has(color) ? `var(--ru-${color})` : color },
+    ...length !== void 0 && { "--_len": toLength(length) },
+    ...spacing !== void 0 && { "--_gap": dividerSpacing[spacing] ?? toLength(spacing) },
+    ...style
+  };
+  const styleProp = Object.keys(vars).length ? vars : void 0;
+  const classes = cn(
+    "ru-divider",
+    variant !== "solid" && `ru-divider--${variant}`,
+    vertical && "ru-divider--vertical",
+    labelled && "ru-divider--label",
+    labelled && labelPosition !== "center" && `ru-divider--label-${labelPosition}`,
+    !vertical && align !== "center" && `ru-divider--align-${align}`,
+    className
+  );
+  if (labelled) {
+    return /* @__PURE__ */ jsx("div", { role: "separator", "aria-orientation": "horizontal", className: classes, style: styleProp, ...rest, children: /* @__PURE__ */ jsx("span", { className: "ru-divider__label", children: label }) });
+  }
+  return /* @__PURE__ */ jsx("hr", { "aria-orientation": orientation, className: classes, style: styleProp, ...rest });
+}
+function usePagination(pagination, dataLength) {
+  const opts = pagination === true ? {} : pagination || {};
+  const enabled = Boolean(pagination);
+  const [pageSize, setPageSize] = useControllableState(
+    opts.onPageSizeChange ? opts.pageSize : void 0,
+    opts.pageSize ?? opts.defaultPageSize ?? 10,
+    opts.onPageSizeChange
+  );
+  const [page, setPage] = useControllableState(opts.page, opts.defaultPage ?? 1, opts.onPageChange);
+  const serverSide = opts.totalRows !== void 0;
+  const totalRows = serverSide ? opts.totalRows : dataLength;
+  const totalPages = Math.max(1, Math.ceil(totalRows / pageSize));
+  const current = Math.min(Math.max(1, page), totalPages);
+  const start = enabled ? (current - 1) * pageSize : 0;
+  return {
+    enabled,
+    opts,
+    serverSide,
+    page: current,
+    pageSize,
+    totalRows,
+    totalPages,
+    start,
+    setPage,
+    changePageSize: (size) => {
+      setPageSize(size);
+      setPage(1);
+    }
+  };
+}
+function Table({
+  columns,
+  data,
+  rowKey,
+  striped = false,
+  hoverable = false,
+  size = "md",
+  caption,
+  emptyText = "No data",
+  onRowClick,
+  pagination,
+  loading = false,
+  className
+}) {
+  const pager = usePagination(pagination, data.length);
+  const rows = pager.enabled && !pager.serverSide ? data.slice(pager.start, pager.start + pager.pageSize) : data;
+  const getKey = (row, index) => {
+    if (typeof rowKey === "function") return rowKey(row, index);
+    if (rowKey !== void 0) return String(row[rowKey]);
+    return index;
+  };
+  const firstRow = pager.totalRows === 0 ? 0 : pager.start + 1;
+  const lastRow = Math.min(pager.start + (pager.serverSide ? rows.length : pager.pageSize), pager.totalRows);
+  return /* @__PURE__ */ jsxs("div", { className: cn("ru-table-wrap", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "ru-table-scroll", children: /* @__PURE__ */ jsxs(
+      "table",
+      {
+        className: cn(
+          "ru-table",
+          `ru-table--${size}`,
+          striped && "ru-table--striped",
+          (hoverable || onRowClick) && "ru-table--hover",
+          loading && "ru-table--loading"
+        ),
+        "aria-busy": loading || void 0,
+        children: [
+          caption && /* @__PURE__ */ jsx("caption", { children: caption }),
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsx("th", { scope: "col", style: { textAlign: col.align, width: col.width }, children: col.header }, col.key)) }) }),
+          /* @__PURE__ */ jsx("tbody", { children: rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { className: "ru-table__empty", colSpan: columns.length, children: loading ? "Loading…" : emptyText }) }) : rows.map((row, i) => {
+            const index = pager.start + i;
+            return /* @__PURE__ */ jsx(
+              "tr",
+              {
+                onClick: onRowClick ? () => onRowClick(row, index) : void 0,
+                style: onRowClick ? { cursor: "pointer" } : void 0,
+                children: columns.map((col) => /* @__PURE__ */ jsx("td", { style: { textAlign: col.align }, children: col.render ? col.render(row, index) : row[col.key] }, col.key))
+              },
+              getKey(row, index)
+            );
+          }) })
+        ]
+      }
+    ) }),
+    pager.enabled && /* @__PURE__ */ jsxs("div", { className: "ru-table__footer", children: [
+      /* @__PURE__ */ jsx("p", { className: "ru-table__info", "aria-live": "polite", children: pager.totalRows === 0 ? "No results" : /* @__PURE__ */ jsxs(Fragment, { children: [
+        "Showing ",
+        /* @__PURE__ */ jsx("strong", { children: firstRow }),
+        "–",
+        /* @__PURE__ */ jsx("strong", { children: lastRow }),
+        " of ",
+        /* @__PURE__ */ jsx("strong", { children: pager.totalRows })
+      ] }) }),
+      pager.opts.pageSizeOptions && /* @__PURE__ */ jsxs("div", { className: "ru-table__size", children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "Rows per page" }),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            size: "sm",
+            "aria-label": "Rows per page",
+            value: pager.pageSize,
+            onChange: pager.changePageSize,
+            options: pager.opts.pageSizeOptions.map((n) => ({ label: String(n), value: n })),
+            containerClassName: "ru-table__size-select"
+          }
+        )
+      ] }),
+      pager.totalPages > 1 && /* @__PURE__ */ jsx(
+        Pagination,
+        {
+          size: "sm",
+          page: pager.page,
+          totalPages: pager.totalPages,
+          onChange: pager.setPage,
+          siblingCount: pager.opts.siblingCount,
+          className: "ru-table__pagination"
+        }
+      )
+    ] })
+  ] });
+}
+const EXIT_MS = 200;
+function usePresence(open) {
+  const [render, setRender] = useState(open);
+  const [closing, setClosing] = useState(false);
+  useEffect(() => {
+    if (open) {
+      setRender(true);
+      setClosing(false);
+      return void 0;
+    }
+    if (!render) return void 0;
+    setClosing(true);
+    const timer = setTimeout(() => {
+      setRender(false);
+      setClosing(false);
+    }, EXIT_MS);
+    return () => clearTimeout(timer);
+  }, [open]);
+  return { render, closing };
+}
+function DialogContent({ titleId, descId, title, description, showCloseButton, onClose, children, footer }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    (title || description || showCloseButton) && /* @__PURE__ */ jsxs("div", { className: "ru-modal__header", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        title && /* @__PURE__ */ jsx("h2", { id: titleId, className: "ru-modal__title", children: title }),
+        description && /* @__PURE__ */ jsx("p", { id: descId, className: "ru-modal__desc", children: description })
+      ] }),
+      showCloseButton && /* @__PURE__ */ jsx(CloseButton, { onClick: onClose })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ru-modal__body", children }),
+    footer && /* @__PURE__ */ jsx("div", { className: "ru-modal__footer", children: footer })
+  ] });
+}
+function Modal({
+  open,
+  onClose,
+  size = "md",
+  closeOnOverlayClick = true,
+  closeOnEsc = true,
+  showCloseButton = true,
+  className,
+  ...content
+}) {
+  const panelRef = useRef(null);
+  const mounted = useMounted();
+  const titleId = useId();
+  const descId = useId();
+  const { render, closing } = usePresence(open);
+  useOverlay(open && mounted, panelRef, onClose, closeOnEsc);
+  if (!render || !mounted) return null;
+  const onOverlayMouseDown = (e) => {
+    if (!closing && closeOnOverlayClick && e.target === e.currentTarget) onClose();
+  };
+  return createPortal(
+    /* @__PURE__ */ jsx("div", { className: cn("ru-overlay", closing && "ru-overlay--closing"), onMouseDown: onOverlayMouseDown, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: panelRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": content.title ? titleId : void 0,
+        "aria-describedby": content.description ? descId : void 0,
+        tabIndex: -1,
+        className: cn("ru-modal", `ru-modal--${size}`, closing && "ru-modal--closing", className),
+        children: /* @__PURE__ */ jsx(
+          DialogContent,
+          {
+            ...content,
+            titleId,
+            descId,
+            showCloseButton,
+            onClose
+          }
+        )
+      }
+    ) }),
+    document.body
+  );
+}
+const drawerSizes = { sm: "20rem", md: "24rem", lg: "32rem" };
+function Drawer({
+  open,
+  onClose,
+  placement = "right",
+  size = "md",
+  floating = false,
+  closeOnOverlayClick = true,
+  closeOnEsc = true,
+  showCloseButton = true,
+  className,
+  ...content
+}) {
+  const panelRef = useRef(null);
+  const mounted = useMounted();
+  const titleId = useId();
+  const descId = useId();
+  const { render, closing } = usePresence(open);
+  useOverlay(open && mounted, panelRef, onClose, closeOnEsc);
+  if (!render || !mounted) return null;
+  const resolvedSize = typeof size === "number" ? `${size}px` : drawerSizes[size] ?? size;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("ru-overlay", "ru-overlay--drawer", closing && "ru-overlay--closing"),
+        onMouseDown: (e) => {
+          if (!closing && closeOnOverlayClick && e.target === e.currentTarget) onClose();
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: panelRef,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": content.title ? titleId : void 0,
+            "aria-describedby": content.description ? descId : void 0,
+            tabIndex: -1,
+            className: cn(
+              "ru-drawer",
+              `ru-drawer--${placement}`,
+              floating && "ru-drawer--floating",
+              closing && "ru-drawer--closing",
+              className
+            ),
+            style: { "--ru-drawer-size": resolvedSize },
+            children: /* @__PURE__ */ jsx(
+              DialogContent,
+              {
+                ...content,
+                titleId,
+                descId,
+                showCloseButton,
+                onClose
+              }
+            )
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+function Tooltip({
+  content,
+  children,
+  placement = "top",
+  delay = 100,
+  size = "md",
+  arrow = true,
+  color,
+  textColor,
+  open: openProp,
+  disabled,
+  className
+}) {
+  const [open, setOpen] = useState(false);
+  const timer = useRef(void 0);
+  const id = useId();
+  const visible = (openProp ?? open) && !disabled && content != null && content !== "";
+  useEffect(() => () => clearTimeout(timer.current), []);
+  const show = () => {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setOpen(true), delay);
+  };
+  const hide = () => {
+    clearTimeout(timer.current);
+    setOpen(false);
+  };
+  const trigger = isValidElement(children) ? cloneElement(children, {
+    "aria-describedby": visible ? id : void 0
+  }) : children;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn("ru-tooltip", className),
+      onMouseEnter: show,
+      onMouseLeave: hide,
+      onFocus: show,
+      onBlur: hide,
+      onKeyDown: (e) => e.key === "Escape" && hide(),
+      children: [
+        trigger,
+        visible && /* @__PURE__ */ jsx(
+          "span",
+          {
+            role: "tooltip",
+            id,
+            className: cn(
+              "ru-tooltip__bubble",
+              `ru-tooltip__bubble--${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,
+            children: content
+          }
+        )
+      ]
+    }
+  );
+}
+function Dropdown({ trigger, items, align = "start", closeOnSelect = true, className }) {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef(null);
+  const menuRef = useRef(null);
+  const menuId = useId();
+  useClickOutside(rootRef, () => setOpen(false), open);
+  const getItems = () => {
+    var _a;
+    return Array.from(((_a = menuRef.current) == null ? void 0 : _a.querySelectorAll('[role="menuitem"]:not(:disabled)')) ?? []);
+  };
+  const focusItem = (index) => {
+    const els = getItems();
+    if (els.length) els[(index + els.length) % els.length].focus();
+  };
+  const closeAndFocusTrigger = () => {
+    var _a, _b;
+    setOpen(false);
+    (_b = (_a = rootRef.current) == null ? void 0 : _a.querySelector("[aria-haspopup]")) == null ? void 0 : _b.focus();
+  };
+  useEffect(() => {
+    if (open) focusItem(0);
+  }, [open]);
+  const onMenuKeyDown = (e) => {
+    const els = getItems();
+    const index = els.indexOf(document.activeElement);
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        focusItem(index + 1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        focusItem(index - 1);
+        break;
+      case "Home":
+        e.preventDefault();
+        focusItem(0);
+        break;
+      case "End":
+        e.preventDefault();
+        focusItem(-1);
+        break;
+      case "Escape":
+        e.preventDefault();
+        closeAndFocusTrigger();
+        break;
+      case "Tab":
+        setOpen(false);
+        break;
+    }
+  };
+  const triggerProps = trigger.props;
+  const triggerEl = cloneElement(trigger, {
+    "aria-haspopup": "menu",
+    "aria-expanded": open,
+    "aria-controls": open ? menuId : void 0,
+    onClick: (e) => {
+      var _a;
+      (_a = triggerProps.onClick) == null ? void 0 : _a.call(triggerProps, e);
+      setOpen((v) => !v);
+    },
+    onKeyDown: (e) => {
+      var _a;
+      (_a = triggerProps.onKeyDown) == null ? void 0 : _a.call(triggerProps, e);
+      if (e.key === "ArrowDown" && !open) {
+        e.preventDefault();
+        setOpen(true);
+      }
+    }
+  });
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("ru-dropdown", className), children: [
+    triggerEl,
+    open && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: menuRef,
+        id: menuId,
+        role: "menu",
+        className: cn("ru-dropdown__menu", align === "end" && "ru-dropdown__menu--end"),
+        onKeyDown: onMenuKeyDown,
+        children: items.map(
+          (item, i) => item.divider ? /* @__PURE__ */ jsx("div", { role: "separator", className: "ru-dropdown__divider" }, item.key ?? i) : /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              tabIndex: -1,
+              disabled: item.disabled,
+              className: cn("ru-dropdown__item", item.danger && "ru-dropdown__item--danger"),
+              onClick: () => {
+                var _a;
+                (_a = item.onClick) == null ? void 0 : _a.call(item);
+                if (closeOnSelect) closeAndFocusTrigger();
+              },
+              children: [
+                item.icon && /* @__PURE__ */ jsx("span", { className: "ru-dropdown__icon", children: item.icon }),
+                item.label
+              ]
+            },
+            item.key ?? i
+          )
+        )
+      }
+    )
+  ] });
+}
+const ToastContext = createContext(null);
+function ToastProvider({ children, position = "bottom-right", duration = 4e3, max = 5 }) {
+  const [toasts, setToasts] = useState([]);
   const mounted = useMounted();
   const counter = useRef(0);
   const dismiss = useCallback((id) => {
@@ -1393,73 +1832,962 @@ function ToastProvider({ children, position = "bottom-right", duration = 4e3, ma
     )
   ] });
 }
-function ToastView({ toast, duration, onDismiss }) {
-  const [paused, setPaused] = useState(false);
-  const { id, variant = "default", title, description, action } = toast;
+function ToastView({ toast, duration, onDismiss }) {
+  const [paused, setPaused] = useState(false);
+  const { id, variant = "default", title, description, action } = toast;
+  useEffect(() => {
+    if (paused || !Number.isFinite(duration) || duration <= 0) return;
+    const timer = setTimeout(() => onDismiss(id), duration);
+    return () => clearTimeout(timer);
+  }, [id, duration, paused, onDismiss]);
+  const Icon = variant === "default" ? null : statusIcons[variant];
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      role: "status",
+      className: cn("ru-toast", variant !== "default" && `ru-c-${variant}`),
+      onMouseEnter: () => setPaused(true),
+      onMouseLeave: () => setPaused(false),
+      children: [
+        Icon && /* @__PURE__ */ jsx("span", { className: "ru-toast__icon", children: /* @__PURE__ */ jsx(Icon, {}) }),
+        /* @__PURE__ */ jsxs("div", { className: "ru-toast__content", children: [
+          title && /* @__PURE__ */ jsx("div", { className: "ru-toast__title", children: title }),
+          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" })
+      ]
+    }
+  );
+}
+function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within a <ToastProvider>.");
+  return ctx;
+}
+function Kbd({ className, ...rest }) {
+  return /* @__PURE__ */ jsx("kbd", { className: cn("ru-kbd", className), ...rest });
+}
+const patternSemanticColors = /* @__PURE__ */ new Set(["primary", "secondary", "success", "danger", "warning", "info"]);
+const toCssColor = (c) => patternSemanticColors.has(c) ? `var(--ru-${c})` : c;
+const toPx = (v) => typeof v === "number" ? `${v}px` : v;
+function Pattern({
+  variant = "grid",
+  size = 24,
+  thickness,
+  color,
+  opacity,
+  fade = true,
+  animate,
+  speed,
+  spotlight = false,
+  spotlightColor,
+  spotlightSize,
+  className,
+  style,
+  ...rest
+}) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const el = ref.current;
+    const parent = el == null ? void 0 : el.parentElement;
+    if (!spotlight || !parent) return void 0;
+    const move = (e) => {
+      const rect = el.getBoundingClientRect();
+      el.style.setProperty("--ru-mx", `${e.clientX - rect.left}px`);
+      el.style.setProperty("--ru-my", `${e.clientY - rect.top}px`);
+      el.classList.add("ru-pattern--spot-on");
+    };
+    const leave = () => el.classList.remove("ru-pattern--spot-on");
+    parent.addEventListener("pointermove", move);
+    parent.addEventListener("pointerleave", leave);
+    return () => {
+      parent.removeEventListener("pointermove", move);
+      parent.removeEventListener("pointerleave", leave);
+    };
+  }, [spotlight]);
+  const fadeKind = fade === true ? "radial" : fade || null;
+  const vars = {
+    "--_ps": toPx(size),
+    ...thickness !== void 0 && { "--_pt": toPx(thickness) },
+    ...color && { "--_pc": toCssColor(color) },
+    ...spotlightColor && { "--_spc": toCssColor(spotlightColor) },
+    ...spotlightSize !== void 0 && { "--_sr": toPx(spotlightSize) },
+    ...speed !== void 0 && { "--_speed": typeof speed === "number" ? `${speed}s` : speed },
+    ...opacity !== void 0 && { opacity },
+    ...style
+  };
+  const layerClass = `ru-pattern__layer ru-pattern__layer--${variant}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "aria-hidden": "true",
+      className: cn("ru-pattern", fadeKind && `ru-pattern--fade-${fadeKind}`, animate && `ru-pattern--${animate}`, className),
+      style: vars,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: layerClass }),
+        spotlight && /* @__PURE__ */ jsx("div", { className: "ru-pattern__spot", children: /* @__PURE__ */ jsx("div", { className: layerClass }) })
+      ]
+    }
+  );
+}
+function SpotlightCard({ color, className, style, onMouseMove, children, ...rest }) {
+  const ref = useRef(null);
+  const handleMouseMove = (e) => {
+    const el = ref.current;
+    if (el) {
+      const rect = el.getBoundingClientRect();
+      el.style.setProperty("--ru-spot-x", `${e.clientX - rect.left}px`);
+      el.style.setProperty("--ru-spot-y", `${e.clientY - rect.top}px`);
+    }
+    onMouseMove == null ? void 0 : onMouseMove(e);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("ru-card", "ru-spotlight", className),
+      style: color ? { "--ru-spot-color": color, ...style } : style,
+      onMouseMove: handleMouseMove,
+      ...rest,
+      children
+    }
+  );
+}
+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: [
+    /* @__PURE__ */ jsx("button", { type: "button", "aria-label": prevLabel, onClick: onPrev, disabled: !onPrev, children: /* @__PURE__ */ jsx(ChevronLeftIcon, {}) }),
+    /* @__PURE__ */ jsx("button", { type: "button", "aria-label": nextLabel, onClick: onNext, disabled: !onNext, children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) })
+  ] });
+}
+function FrameCard({
+  title,
+  color = "warning",
+  textColor,
+  titlePlacement = "panel",
+  collapsible = false,
+  open,
+  defaultOpen = true,
+  onOpenChange,
+  headerAction,
+  footer,
+  onPrev,
+  onNext,
+  prevLabel = "Previous",
+  nextLabel = "Next",
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const [isOpen, setOpen] = useControllableState(open, defaultOpen, onOpenChange);
+  const bodyId = useId();
+  const onFrame = titlePlacement === "frame";
+  const pager = /* @__PURE__ */ jsx(Pager, { onPrev, onNext, prevLabel, nextLabel });
+  const hasPager = Boolean(onPrev || onNext);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn("ru-frame-card", onFrame && "ru-frame-card--title-frame", className),
+      style: {
+        "--_fc": semanticColors$4.has(color) ? `var(--ru-${color})` : color,
+        ...textColor && { "--_fc-on": textColor, "--_fc-ink": textColor },
+        ...style
+      },
+      ...rest,
+      children: [
+        onFrame && /* @__PURE__ */ jsxs("div", { className: "ru-frame-card__frame-head", children: [
+          /* @__PURE__ */ jsx("h3", { className: "ru-frame-card__title", children: title }),
+          headerAction ?? pager
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "ru-frame-card__panel", children: [
+          !onFrame && (title || headerAction || collapsible) && /* @__PURE__ */ jsxs("div", { className: "ru-frame-card__head", children: [
+            /* @__PURE__ */ jsx("h3", { className: "ru-frame-card__title", children: title }),
+            headerAction,
+            collapsible && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "ru-frame-card__toggle",
+                "aria-expanded": isOpen,
+                "aria-controls": bodyId,
+                "aria-label": isOpen ? "Collapse" : "Expand",
+                onClick: () => setOpen(!isOpen),
+                children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { id: bodyId, className: cn("ru-frame-card__collapse", !isOpen && "ru-frame-card__collapse--closed"), children: /* @__PURE__ */ jsx("div", { className: "ru-frame-card__inner", children: /* @__PURE__ */ jsx("div", { className: "ru-frame-card__body", children }) }) })
+        ] }),
+        (footer || !onFrame && hasPager) && /* @__PURE__ */ jsxs("div", { className: "ru-frame-card__foot", children: [
+          /* @__PURE__ */ jsx("div", { className: "ru-frame-card__foot-content", children: footer }),
+          !onFrame && pager
+        ] })
+      ]
+    }
+  );
+}
+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$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({
+  mode = "single",
+  value,
+  defaultValue,
+  onChange,
+  defaultMonth,
+  weekStartsOn = 1,
+  minYear,
+  maxYear,
+  color,
+  today = /* @__PURE__ */ new Date(),
+  className,
+  style,
+  ...rest
+}) {
+  const emptyValue = mode === "range" ? { start: null, end: null } : null;
+  const [selected, setSelected] = useControllableState(value, defaultValue ?? emptyValue, onChange);
+  const anchor = defaultMonth ?? (mode === "range" ? selected == null ? void 0 : selected.start : selected) ?? today;
+  const [view, setView] = useState({ y: anchor.getFullYear(), m: anchor.getMonth() });
+  const gridRef = useRef(null);
+  const shift = (delta) => setView((v) => {
+    const d = new Date(v.y, v.m + delta, 1);
+    return { y: d.getFullYear(), m: d.getMonth() };
+  });
+  const days = useMemo(() => {
+    const offset = (new Date(view.y, view.m, 1).getDay() - weekStartsOn + 7) % 7;
+    const inMonth = new Date(view.y, view.m + 1, 0).getDate();
+    const cells = Math.ceil((offset + inMonth) / 7) * 7;
+    return Array.from({ length: cells }, (_, i) => new Date(view.y, view.m, 1 - offset + i));
+  }, [view, weekStartsOn]);
+  const weekdays = Array.from({ length: 7 }, (_, i) => WEEKDAYS[(i + weekStartsOn) % 7]);
+  const firstYear = minYear ?? view.y - 10;
+  const lastYear = maxYear ?? view.y + 10;
+  const years = Array.from({ length: lastYear - firstYear + 1 }, (_, i) => firstYear + i);
+  const isSelected = (d) => {
+    if (mode !== "range") return sameDay(d, selected);
+    const { start, end } = selected ?? {};
+    if (start && end) return dayKey(d) >= dayKey(start) && dayKey(d) <= dayKey(end);
+    return sameDay(d, start);
+  };
+  const pick = (d) => {
+    if (d.getMonth() !== view.m) setView({ y: d.getFullYear(), m: d.getMonth() });
+    if (mode !== "range") return setSelected(d);
+    const { start, end } = selected ?? {};
+    if (!start || end) return setSelected({ start: d, end: null });
+    return setSelected(dayKey(d) < dayKey(start) ? { start: d, end: start } : { start, end: d });
+  };
+  const onGridKeyDown = (e) => {
+    const step = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 }[e.key];
+    if (!step) return;
+    const buttons = Array.from(gridRef.current.querySelectorAll("button"));
+    const next = buttons[buttons.indexOf(document.activeElement) + step];
+    if (next) {
+      e.preventDefault();
+      next.focus();
+    }
+  };
+  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, {}) }),
+      /* @__PURE__ */ jsxs("div", { className: "ru-calendar__pickers", children: [
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            size: "sm",
+            "aria-label": "Month",
+            value: view.m,
+            onChange: (m) => setView((v) => ({ ...v, m })),
+            options: MONTHS.map((label, i) => ({ label, value: i })),
+            containerClassName: "ru-calendar__picker"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            size: "sm",
+            "aria-label": "Year",
+            value: view.y,
+            onChange: (y) => setView((v) => ({ ...v, y })),
+            options: years.map((y) => ({ label: String(y), value: y })),
+            containerClassName: "ru-calendar__picker ru-calendar__picker--year"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "ru-calendar__nav", "aria-label": "Next month", onClick: () => shift(1), children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ru-calendar__weekdays", "aria-hidden": "true", children: weekdays.map((w) => /* @__PURE__ */ jsx("span", { children: w }, w)) }),
+    /* @__PURE__ */ jsx("div", { ref: gridRef, className: "ru-calendar__grid", onKeyDown: onGridKeyDown, children: days.map((d) => {
+      const outside = d.getMonth() !== view.m;
+      const selectedDay = isSelected(d);
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "ru-calendar__cell",
+            outside && "ru-calendar__cell--outside",
+            selectedDay && "ru-calendar__cell--selected",
+            sameDay(d, today) && "ru-calendar__cell--today"
+          ),
+          "aria-label": d.toDateString(),
+          "aria-pressed": selectedDay,
+          "aria-current": sameDay(d, today) ? "date" : void 0,
+          onClick: () => pick(d),
+          children: /* @__PURE__ */ jsx("span", { className: "ru-calendar__day", children: d.getDate() })
+        },
+        dayKey(d)
+      );
+    }) })
+  ] });
+}
+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(() => {
-    if (paused || !Number.isFinite(duration) || duration <= 0) return;
-    const timer = setTimeout(() => onDismiss(id), duration);
-    return () => clearTimeout(timer);
-  }, [id, duration, paused, onDismiss]);
-  const Icon = variant === "default" ? null : statusIcons[variant];
+    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(
-    "li",
+    "div",
     {
-      role: "status",
-      className: cn("ru-toast", variant !== "default" && `ru-c-${variant}`),
-      onMouseEnter: () => setPaused(true),
-      onMouseLeave: () => setPaused(false),
+      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: [
-        Icon && /* @__PURE__ */ jsx("span", { className: "ru-toast__icon", children: /* @__PURE__ */ jsx(Icon, {}) }),
-        /* @__PURE__ */ jsxs("div", { className: "ru-toast__content", children: [
-          title && /* @__PURE__ */ jsx("div", { className: "ru-toast__title", children: title }),
-          description && /* @__PURE__ */ jsx("div", { className: "ru-toast__desc", children: description }),
-          action && /* @__PURE__ */ jsx("div", { className: "ru-toast__action", children: action })
+        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)
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsx(CloseButton, { onClick: () => onDismiss(id), label: "Dismiss notification" })
+        (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)}%` })
       ]
     }
   );
 }
-function useToast() {
-  const ctx = useContext(ToastContext);
-  if (!ctx) throw new Error("useToast must be used within a <ToastProvider>.");
-  return ctx;
+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 Kbd({ className, ...rest }) {
-  return /* @__PURE__ */ jsx("kbd", { className: cn("ru-kbd", className), ...rest });
+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 Pattern({ variant = "grid", size = 24, fade = true, className, style, ...rest }) {
-  return /* @__PURE__ */ jsx(
+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",
     {
-      "aria-hidden": "true",
-      className: cn("ru-pattern", `ru-pattern--${variant}`, fade && "ru-pattern--fade", className),
-      style: { "--ru-pattern-size": `${size}px`, ...style },
-      ...rest
+      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)})` : ""
+          ] }) })
+        ] })
+      ]
     }
   );
 }
-function SpotlightCard({ color, className, style, onMouseMove, children, ...rest }) {
-  const ref = useRef(null);
-  const handleMouseMove = (e) => {
-    const el = ref.current;
-    if (el) {
-      const rect = el.getBoundingClientRect();
-      el.style.setProperty("--ru-spot-x", `${e.clientX - rect.left}px`);
-      el.style.setProperty("--ru-spot-y", `${e.clientY - rect.top}px`);
-    }
-    onMouseMove == null ? void 0 : onMouseMove(e);
+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(
-    "div",
+    "span",
     {
-      ref,
-      className: cn("ru-card", "ru-spotlight", className),
-      style: color ? { "--ru-spot-color": color, ...style } : style,
-      onMouseMove: handleMouseMove,
+      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
+      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 })
+      ]
     }
   );
 }
@@ -1471,14 +2799,22 @@ export {
   Badge,
   Breadcrumbs,
   Button,
+  ButtonGroup,
+  Calendar,
   Card,
   CardBody,
   CardFooter,
   CardHeader,
   Checkbox,
+  DateTile,
   Divider,
+  DotText,
   Drawer,
   Dropdown,
+  Dropzone,
+  FileItem,
+  FrameCard,
+  IconTile,
   Input,
   Kbd,
   Modal,
@@ -1486,12 +2822,19 @@ export {
   Pagination,
   Pattern,
   Progress,
+  ProgressRing,
   Radio,
   RadioGroup,
+  SegmentedControl,
   Select,
+  SignaturePad,
   Skeleton,
   Spinner,
   SpotlightCard,
+  StackedProgress,
+  Stat,
+  StatusIcon,
+  StepList,
   Switch,
   Table,
   Tabs,
@@ -1499,6 +2842,7 @@ export {
   ToastProvider,
   Tooltip,
   cn,
+  formatBytes,
   useClickOutside,
   useControllableState,
   useDisclosure,