reusify-ui 2.1.0 → 2.2.0

package/dist/reusify-ui.js

@@ -10,7 +10,7 @@ const legacyVariants = {
   danger: ["solid", "danger"],
   success: ["solid", "success"]
 };
-const semanticColors$2 = /* @__PURE__ */ new Set(["primary", "secondary", "success", "danger", "warning", "info"]);
+const semanticColors$5 = /* @__PURE__ */ new Set(["primary", "secondary", "success", "danger", "warning", "info"]);
 const radii = { none: "0", sm: "6px", md: "10px", lg: "14px", xl: "18px", "2xl": "24px", full: "9999px" };
 function resolveRadius(radius) {
   if (radius === void 0) return void 0;
@@ -48,7 +48,7 @@ const Button = forwardRef(function Button2({
     onPointerMove == null ? void 0 : onPointerMove(e);
   } : onPointerMove;
   const resolvedColor = color ?? legacyColor ?? "primary";
-  const customColor = !semanticColors$2.has(resolvedColor);
+  const customColor = !semanticColors$5.has(resolvedColor);
   const classes = cn(
     "ru-btn",
     `ru-btn--${kind}`,
@@ -143,6 +143,16 @@ const UserIcon = (p) => /* @__PURE__ */ jsxs("svg", { ...base, ...p, children: [
   /* @__PURE__ */ jsx("circle", { cx: "12", cy: "8", r: "4" }),
   /* @__PURE__ */ jsx("path", { d: "M4 21a8 8 0 0 1 16 0" })
 ] });
+const UploadCloudIcon = (p) => /* @__PURE__ */ jsxs("svg", { ...base, ...p, children: [
+  /* @__PURE__ */ jsx("path", { d: "M4 14.9A7 7 0 1 1 15.7 8h1.8a4.5 4.5 0 0 1 2.5 8.2" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 12v9M16 16l-4-4-4 4" })
+] });
+const FileIcon = (p) => /* @__PURE__ */ jsxs("svg", { ...base, ...p, children: [
+  /* @__PURE__ */ jsx("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+  /* @__PURE__ */ jsx("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })
+] });
+const TrendUpIcon = (p) => /* @__PURE__ */ jsx("svg", { ...base, ...p, children: /* @__PURE__ */ jsx("path", { d: "M12 19V5M5 12l7-7 7 7" }) });
+const TrendDownIcon = (p) => /* @__PURE__ */ jsx("svg", { ...base, ...p, children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M19 12l-7 7-7-7" }) });
 const statusIcons = {
   info: InfoIcon,
   success: SuccessIcon,
@@ -158,11 +168,17 @@ function Spinner({ size = "md", color = "primary", label = "Loading", className,
     label && /* @__PURE__ */ jsx("span", { className: "ru-sr-only", children: label })
   ] });
 }
+const progressColors = /* @__PURE__ */ new Set(["primary", "secondary", "success", "danger", "warning", "info"]);
 function Progress({
   value,
   max = 100,
   size = "md",
   color = "primary",
+  variant = "bar",
+  ticks = 24,
+  glow = false,
+  icon,
+  endLabel,
   label,
   showValue = false,
   className,
@@ -170,7 +186,86 @@ function Progress({
 }) {
   const indeterminate = value === void 0;
   const percent = indeterminate ? 0 : Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ jsxs("div", { className: cn("ru-progress", indeterminate && "ru-progress--indeterminate", className), ...rest, children: [
+  const semantic = progressColors.has(color);
+  const glowColor = glow === true ? semantic ? `var(--ru-${color})` : color : glow || void 0;
+  const meterStyle = { ...!semantic && { "--_c": color }, ...glowColor && { "--_glow": glowColor } };
+  if (variant === "capsule") {
+    return /* @__PURE__ */ jsxs("div", { className: cn("ru-progress", "ru-progress--capsule", `ru-progress--${size}`, glowColor && "ru-progress--glow", className), ...rest, children: [
+      label && /* @__PURE__ */ jsx("div", { className: "ru-progress__label", children: /* @__PURE__ */ jsx("span", { children: label }) }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "progressbar",
+          "aria-valuemin": 0,
+          "aria-valuemax": max,
+          "aria-valuenow": value ?? 0,
+          "aria-label": typeof label === "string" ? label : void 0,
+          className: cn("ru-progress__capsule", semantic && `ru-c-${color}`),
+          style: meterStyle,
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "ru-progress__capsule-fill", style: { width: `max(var(--_h), ${percent}%)` }, children: icon ?? (showValue && /* @__PURE__ */ jsxs("span", { className: "ru-progress__capsule-value", children: [
+              Math.round(percent),
+              "%"
+            ] })) }),
+            endLabel && /* @__PURE__ */ jsx("span", { className: "ru-progress__capsule-end", children: endLabel })
+          ]
+        }
+      )
+    ] });
+  }
+  if (variant === "bars") {
+    const total = Math.max(2, ticks);
+    const lit = Math.round(percent / 100 * total);
+    return /* @__PURE__ */ jsxs("div", { className: cn("ru-progress", "ru-progress--bars", `ru-progress--${size}`, glowColor && "ru-progress--glow", className), ...rest, children: [
+      (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "ru-progress__label", children: [
+        /* @__PURE__ */ jsx("span", { children: label }),
+        showValue && /* @__PURE__ */ jsxs("span", { className: "ru-progress__value ru-progress__value--accent", children: [
+          Math.round(percent),
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "progressbar",
+          "aria-valuemin": 0,
+          "aria-valuemax": max,
+          "aria-valuenow": value ?? 0,
+          "aria-label": typeof label === "string" ? label : void 0,
+          className: cn("ru-progress__bars", semantic && `ru-c-${color}`),
+          style: meterStyle,
+          children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ jsx("span", { className: cn(i < lit && "is-on", i === lit - 1 && percent > 0 && percent < 100 && "is-marker") }, i))
+        }
+      )
+    ] });
+  }
+  if (variant === "ticks") {
+    const remaining = percent >= 100 ? 0 : Math.max(1, Math.round(ticks * (1 - percent / 100)));
+    return /* @__PURE__ */ jsxs("div", { className: cn("ru-progress", "ru-progress--ticks", `ru-progress--${size}`, glowColor && "ru-progress--glow", className), ...rest, children: [
+      label && /* @__PURE__ */ jsx("div", { className: "ru-progress__label", children: /* @__PURE__ */ jsx("span", { children: label }) }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "progressbar",
+          "aria-valuemin": 0,
+          "aria-valuemax": max,
+          "aria-valuenow": value ?? 0,
+          "aria-label": typeof label === "string" ? label : void 0,
+          className: cn("ru-progress__meter", semantic && `ru-c-${color}`),
+          style: meterStyle,
+          children: [
+            percent > 0 && /* @__PURE__ */ jsx("div", { className: "ru-progress__fill", style: { width: `${percent}%` }, children: showValue && /* @__PURE__ */ jsxs("span", { className: "ru-progress__fill-value", children: [
+              Math.round(percent),
+              "%"
+            ] }) }),
+            percent > 0 && percent < 100 && /* @__PURE__ */ jsx("span", { className: "ru-progress__marker", "aria-hidden": "true" }),
+            remaining > 0 && /* @__PURE__ */ jsx("div", { className: "ru-progress__ticks", "aria-hidden": "true", children: Array.from({ length: remaining }, (_, i) => /* @__PURE__ */ jsx("span", {}, i)) })
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("ru-progress", indeterminate && "ru-progress--indeterminate", glowColor && "ru-progress--glow", className), ...rest, children: [
     (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "ru-progress__label", children: [
       /* @__PURE__ */ jsx("span", { children: label }),
       showValue && !indeterminate && /* @__PURE__ */ jsxs("span", { className: "ru-progress__value", children: [
@@ -186,7 +281,8 @@ function Progress({
         "aria-valuemax": max,
         "aria-valuenow": indeterminate ? void 0 : value,
         "aria-label": typeof label === "string" ? label : void 0,
-        className: cn("ru-progress__track", `ru-progress__track--${size}`, `ru-c-${color}`),
+        className: cn("ru-progress__track", `ru-progress__track--${size}`, semantic && `ru-c-${color}`),
+        style: meterStyle,
         children: /* @__PURE__ */ jsx("div", { className: "ru-progress__bar", style: indeterminate ? void 0 : { width: `${percent}%` } })
       }
     )
@@ -1860,7 +1956,18 @@ function SpotlightCard({ color, className, style, onMouseMove, children, ...rest
     }
   );
 }
-const semanticColors$1 = /* @__PURE__ */ new Set(["primary", "secondary", "success", "danger", "warning", "info"]);
+function DotText({ as: Tag = "span", dot = 4, color, glow = false, className, style, children, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      className: cn("ru-dot-text", glow && "ru-dot-text--glow", className),
+      style: { "--_d": `${dot}px`, ...color && { color }, ...style },
+      ...rest,
+      children
+    }
+  );
+}
+const semanticColors$4 = /* @__PURE__ */ new Set(["primary", "secondary", "success", "danger", "warning", "info"]);
 function Pager({ onPrev, onNext, prevLabel, nextLabel }) {
   if (!onPrev && !onNext) return null;
   return /* @__PURE__ */ jsxs("div", { className: "ru-frame-card__pager", children: [
@@ -1898,7 +2005,7 @@ function FrameCard({
     {
       className: cn("ru-frame-card", onFrame && "ru-frame-card--title-frame", className),
       style: {
-        "--_fc": semanticColors$1.has(color) ? `var(--ru-${color})` : color,
+        "--_fc": semanticColors$4.has(color) ? `var(--ru-${color})` : color,
         ...textColor && { "--_fc-on": textColor, "--_fc-ink": textColor },
         ...style
       },
@@ -1937,7 +2044,7 @@ function FrameCard({
 }
 const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 const WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-const semanticColors = /* @__PURE__ */ new Set(["primary", "secondary", "success", "danger", "warning", "info"]);
+const semanticColors$3 = /* @__PURE__ */ new Set(["primary", "secondary", "success", "danger", "warning", "info"]);
 const dayKey = (d) => d.getFullYear() * 1e4 + d.getMonth() * 100 + d.getDate();
 const sameDay = (a, b) => Boolean(a && b) && dayKey(a) === dayKey(b);
 function Calendar({
@@ -1997,7 +2104,7 @@ function Calendar({
       next.focus();
     }
   };
-  const ink = color ? semanticColors.has(color) ? `var(--ru-${color})` : color : void 0;
+  const ink = color ? semanticColors$3.has(color) ? `var(--ru-${color})` : color : void 0;
   return /* @__PURE__ */ jsxs("div", { className: cn("ru-calendar", className), style: ink ? { "--_cc": ink, ...style } : style, ...rest, children: [
     /* @__PURE__ */ jsxs("div", { className: "ru-calendar__head", children: [
       /* @__PURE__ */ jsx("button", { type: "button", className: "ru-calendar__nav", "aria-label": "Previous month", onClick: () => shift(-1), children: /* @__PURE__ */ jsx(ChevronLeftIcon, {}) }),
@@ -2052,6 +2159,638 @@ function Calendar({
     }) })
   ] });
 }
+const normalize = (options) => options.map((o) => typeof o === "object" ? o : { label: String(o), value: o });
+function SegmentedControl({
+  options,
+  value,
+  defaultValue,
+  onChange,
+  size = "md",
+  fullWidth = false,
+  pill = false,
+  disabled = false,
+  className,
+  style,
+  ...rest
+}) {
+  var _a;
+  const items = normalize(options);
+  const firstEnabled = (_a = items.find((i) => !i.disabled)) == null ? void 0 : _a.value;
+  const [active, setActive] = useControllableState(value, defaultValue ?? firstEnabled, onChange);
+  const rootRef = useRef(null);
+  const [thumb, setThumb] = useState(null);
+  const activeIndex = items.findIndex((i) => i.value === active);
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return void 0;
+    const measure = () => {
+      const el = root.querySelectorAll('[role="radio"]')[activeIndex];
+      setThumb(el ? { x: el.offsetLeft, w: el.offsetWidth } : null);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const ro = new ResizeObserver(measure);
+    ro.observe(root);
+    return () => ro.disconnect();
+  }, [activeIndex, items.length]);
+  const move = (from, step) => {
+    var _a2;
+    const buttons = rootRef.current.querySelectorAll('[role="radio"]');
+    for (let n = 1; n <= items.length; n++) {
+      const i = (from + step * n + items.length) % items.length;
+      if (!items[i].disabled) {
+        setActive(items[i].value);
+        (_a2 = buttons[i]) == null ? void 0 : _a2.focus();
+        return;
+      }
+    }
+  };
+  const onKeyDown = (e, index) => {
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") move(index, 1);
+    else if (e.key === "ArrowLeft" || e.key === "ArrowUp") move(index, -1);
+    else return;
+    e.preventDefault();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      role: "radiogroup",
+      "aria-disabled": disabled || void 0,
+      className: cn(
+        "ru-segmented",
+        `ru-segmented--${size}`,
+        fullWidth && "ru-segmented--full",
+        pill && "ru-segmented--pill",
+        thumb && "ru-segmented--ready",
+        className
+      ),
+      style: thumb ? { "--_x": `${thumb.x}px`, "--_w": `${thumb.w}px`, ...style } : style,
+      ...rest,
+      children: [
+        thumb && activeIndex >= 0 && /* @__PURE__ */ jsx("span", { className: "ru-segmented__thumb", "aria-hidden": "true" }),
+        items.map((item, i) => {
+          const selected = i === activeIndex;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": selected,
+              tabIndex: selected || activeIndex < 0 && i === 0 ? 0 : -1,
+              disabled: disabled || item.disabled,
+              className: "ru-segmented__item",
+              onClick: () => setActive(item.value),
+              onKeyDown: (e) => onKeyDown(e, i),
+              children: [
+                item.icon,
+                item.label
+              ]
+            },
+            String(item.value)
+          );
+        })
+      ]
+    }
+  );
+}
+const semanticColors$2 = /* @__PURE__ */ new Set(["primary", "secondary", "success", "danger", "warning", "info"]);
+function ProgressRing({
+  value = 0,
+  max = 100,
+  size = 48,
+  thickness = 4,
+  color = "primary",
+  trackColor,
+  showValue = false,
+  label,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const percent = Math.min(100, Math.max(0, value / max * 100));
+  const r = (size - thickness) / 2;
+  const circumference = 2 * Math.PI * r;
+  const ink = semanticColors$2.has(color) ? `var(--ru-${color})` : color;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      "aria-valuenow": value,
+      "aria-label": label,
+      className: cn("ru-ring", className),
+      style: { width: size, height: size, "--_c": ink, ...trackColor && { "--_track": trackColor }, ...style },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("circle", { className: "ru-ring__track", cx: size / 2, cy: size / 2, r, strokeWidth: thickness }),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: "ru-ring__bar",
+              cx: size / 2,
+              cy: size / 2,
+              r,
+              strokeWidth: thickness,
+              strokeDasharray: circumference,
+              strokeDashoffset: circumference * (1 - percent / 100)
+            }
+          )
+        ] }),
+        (children !== void 0 || showValue) && /* @__PURE__ */ jsx("span", { className: "ru-ring__label", style: { fontSize: Math.max(10, Math.round(size * 0.24)) }, children: children ?? `${Math.round(percent)}%` })
+      ]
+    }
+  );
+}
+const semanticColors$1 = /* @__PURE__ */ new Set(["primary", "secondary", "success", "danger", "warning", "info"]);
+function Stat({
+  label,
+  value,
+  trend,
+  trendLabel,
+  invertTrend = false,
+  helpText,
+  size = "md",
+  align = "start",
+  className,
+  ...rest
+}) {
+  const hasTrend = typeof trend === "number";
+  const up = hasTrend && trend >= 0;
+  const good = up !== invertTrend;
+  const TrendIcon = up ? TrendUpIcon : TrendDownIcon;
+  return /* @__PURE__ */ jsxs("div", { className: cn("ru-stat", `ru-stat--${size}`, align === "end" && "ru-stat--end", className), ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { className: "ru-stat__top", children: [
+      label && /* @__PURE__ */ jsx("span", { className: "ru-stat__label", children: label }),
+      hasTrend && /* @__PURE__ */ jsxs("span", { className: cn("ru-stat__trend", good ? "ru-stat__trend--good" : "ru-stat__trend--bad"), children: [
+        /* @__PURE__ */ jsx("span", { className: "ru-stat__trend-icon", children: /* @__PURE__ */ jsx(TrendIcon, {}) }),
+        trendLabel ?? `${Math.abs(trend).toLocaleString()}%`,
+        /* @__PURE__ */ jsx("span", { className: "ru-sr-only", children: up ? " increase" : " decrease" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ru-stat__value", children: value }),
+    helpText && /* @__PURE__ */ jsx("div", { className: "ru-stat__help", children: helpText })
+  ] });
+}
+function DateTile({ date, color = "primary", size = "md", className, style, ...rest }) {
+  const d = date instanceof Date ? date : new Date(date);
+  const ink = semanticColors$1.has(color) ? `var(--ru-${color})` : color;
+  return /* @__PURE__ */ jsxs(
+    "time",
+    {
+      dateTime: d.toISOString().slice(0, 10),
+      "aria-label": d.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric", year: "numeric" }),
+      className: cn("ru-date-tile", `ru-date-tile--${size}`, className),
+      style: { "--_c": ink, ...style },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "ru-date-tile__month", "aria-hidden": "true", children: d.toLocaleDateString("en-US", { month: "short" }) }),
+        /* @__PURE__ */ jsx("span", { className: "ru-date-tile__day", "aria-hidden": "true", children: d.getDate() })
+      ]
+    }
+  );
+}
+function matchesAccept(file, accept) {
+  if (!accept) return true;
+  return accept.split(",").some((rule) => {
+    const r = rule.trim().toLowerCase();
+    if (!r) return false;
+    if (r.startsWith(".")) return file.name.toLowerCase().endsWith(r);
+    if (r.endsWith("/*")) return file.type.toLowerCase().startsWith(r.slice(0, -1));
+    return file.type.toLowerCase() === r;
+  });
+}
+function formatBytes(bytes) {
+  if (typeof bytes !== "number") return bytes;
+  if (bytes < 1024) return `${bytes} B`;
+  const units = ["KB", "MB", "GB"];
+  let n = bytes / 1024;
+  let i = 0;
+  while (n >= 1024 && i < units.length - 1) {
+    n /= 1024;
+    i++;
+  }
+  return `${Number(n.toFixed(1))}${units[i]}`;
+}
+function Dropzone({
+  onFiles,
+  onReject,
+  accept,
+  multiple = true,
+  maxSize,
+  disabled = false,
+  icon,
+  title = "Drag & drop files here",
+  description,
+  className,
+  children,
+  ...rest
+}) {
+  const inputRef = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  const handle = (list) => {
+    const files = Array.from(list ?? []);
+    const accepted = [];
+    const rejected = [];
+    for (const file of multiple ? files : files.slice(0, 1)) {
+      if (!matchesAccept(file, accept)) rejected.push({ file, reason: "type" });
+      else if (maxSize && file.size > maxSize) rejected.push({ file, reason: "size" });
+      else accepted.push(file);
+    }
+    if (accepted.length) onFiles == null ? void 0 : onFiles(accepted);
+    if (rejected.length) onReject == null ? void 0 : onReject(rejected);
+  };
+  const open = () => {
+    var _a;
+    return !disabled && ((_a = inputRef.current) == null ? void 0 : _a.click());
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      "aria-disabled": disabled || void 0,
+      className: cn("ru-dropzone", dragging && "ru-dropzone--active", disabled && "ru-dropzone--disabled", className),
+      onClick: open,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          open();
+        }
+      },
+      onDragEnter: (e) => {
+        e.preventDefault();
+        if (!disabled) setDragging(true);
+      },
+      onDragOver: (e) => e.preventDefault(),
+      onDragLeave: (e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) setDragging(false);
+      },
+      onDrop: (e) => {
+        e.preventDefault();
+        setDragging(false);
+        if (!disabled) handle(e.dataTransfer.files);
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            hidden: true,
+            accept,
+            multiple,
+            disabled,
+            onChange: (e) => {
+              handle(e.target.files);
+              e.target.value = "";
+            }
+          }
+        ),
+        children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "ru-dropzone__icon", children: icon ?? /* @__PURE__ */ jsx(UploadCloudIcon, {}) }),
+          /* @__PURE__ */ jsx("span", { className: "ru-dropzone__title", children: title }),
+          /* @__PURE__ */ jsx("span", { className: "ru-dropzone__desc", children: description ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+            "or ",
+            /* @__PURE__ */ jsx("span", { className: "ru-dropzone__browse", children: "browse" }),
+            " to choose files",
+            maxSize ? ` (max ${formatBytes(maxSize)})` : ""
+          ] }) })
+        ] })
+      ]
+    }
+  );
+}
+const statusText = { uploading: "Uploading…", complete: "Completed", error: "Failed" };
+function FileItem({
+  name,
+  size,
+  status = "complete",
+  progress = 0,
+  icon,
+  error,
+  onRemove,
+  action,
+  removeLabel,
+  className,
+  ...rest
+}) {
+  const uploading = status === "uploading";
+  return /* @__PURE__ */ jsxs("div", { className: cn("ru-file-item", `ru-file-item--${status}`, className), ...rest, children: [
+    /* @__PURE__ */ jsx("span", { className: "ru-file-item__icon", children: icon ?? /* @__PURE__ */ jsx(FileIcon, {}) }),
+    /* @__PURE__ */ jsxs("div", { className: "ru-file-item__body", children: [
+      /* @__PURE__ */ jsx("div", { className: "ru-file-item__name", title: name, children: name }),
+      /* @__PURE__ */ jsxs("div", { className: "ru-file-item__meta", children: [
+        size !== void 0 && /* @__PURE__ */ jsx("span", { children: formatBytes(size) }),
+        size !== void 0 && /* @__PURE__ */ jsx("span", { className: "ru-file-item__dot", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "ru-file-item__status", children: status === "error" && error ? error : statusText[status] })
+      ] }),
+      uploading && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "ru-file-item__bar",
+          role: "progressbar",
+          "aria-valuemin": 0,
+          "aria-valuemax": 100,
+          "aria-valuenow": progress,
+          "aria-label": `Uploading ${name}`,
+          children: /* @__PURE__ */ jsx("span", { style: { width: `${progress}%` } })
+        }
+      )
+    ] }),
+    uploading && /* @__PURE__ */ jsxs("span", { className: "ru-file-item__percent", children: [
+      Math.round(progress),
+      "%"
+    ] }),
+    action,
+    onRemove && /* @__PURE__ */ jsx("button", { type: "button", className: "ru-file-item__remove", "aria-label": removeLabel ?? `Remove ${name}`, onClick: onRemove, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+  ] });
+}
+const UndoIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("path", { d: "M9 14 4 9l5-5" }),
+  /* @__PURE__ */ jsx("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 0 11H11" })
+] });
+const EraserIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("path", { d: "m7 21-4.3-4.3a1 1 0 0 1 0-1.4l10-10a1 1 0 0 1 1.4 0l5.6 5.6a1 1 0 0 1 0 1.4L11 21" }),
+  /* @__PURE__ */ jsx("path", { d: "M22 21H7M5 11l9 9" })
+] });
+const SignaturePad = forwardRef(function SignaturePad2({
+  onChange,
+  strokeColor,
+  strokeWidth = 2.5,
+  height = 180,
+  placeholder = "Sign here",
+  showControls = true,
+  undoLabel = "Undo",
+  clearLabel = "Clear",
+  actions,
+  disabled = false,
+  className,
+  style,
+  ...rest
+}, ref) {
+  const canvasRef = useRef(null);
+  const strokes = useRef([]);
+  const drawing = useRef(null);
+  const [count, setCount] = useState(0);
+  const ink = useCallback(() => strokeColor ?? getComputedStyle(canvasRef.current).color, [strokeColor]);
+  const drawStroke = useCallback(
+    (ctx, points) => {
+      ctx.strokeStyle = ink();
+      ctx.fillStyle = ctx.strokeStyle;
+      if (points.length === 1) {
+        ctx.beginPath();
+        ctx.arc(points[0].x, points[0].y, strokeWidth / 2, 0, Math.PI * 2);
+        ctx.fill();
+        return;
+      }
+      for (let i = 1; i < points.length; i++) {
+        const a = points[i - 1];
+        const b = points[i];
+        const mid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+        ctx.lineWidth = b.w;
+        ctx.beginPath();
+        ctx.moveTo(a.mx ?? a.x, a.my ?? a.y);
+        ctx.quadraticCurveTo(a.x, a.y, mid.x, mid.y);
+        ctx.stroke();
+        b.mx = mid.x;
+        b.my = mid.y;
+      }
+    },
+    [ink, strokeWidth]
+  );
+  const redraw = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    strokes.current.forEach((s) => drawStroke(ctx, s.map(({ x, y, w }) => ({ x, y, w }))));
+  }, [drawStroke]);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return void 0;
+    const fit = () => {
+      var _a;
+      const dpr = window.devicePixelRatio || 1;
+      const { width, height: h } = canvas.getBoundingClientRect();
+      canvas.width = Math.max(1, Math.round(width * dpr));
+      canvas.height = Math.max(1, Math.round(h * dpr));
+      (_a = canvas.getContext("2d")) == null ? void 0 : _a.setTransform(dpr, 0, 0, dpr, 0, 0);
+      redraw();
+    };
+    fit();
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const ro = new ResizeObserver(fit);
+    ro.observe(canvas);
+    return () => ro.disconnect();
+  }, [redraw]);
+  const emit = () => onChange == null ? void 0 : onChange(strokes.current.length ? canvasRef.current.toDataURL("image/png") : null);
+  const point = (e) => {
+    const rect = canvasRef.current.getBoundingClientRect();
+    return { x: e.clientX - rect.left, y: e.clientY - rect.top, t: e.timeStamp };
+  };
+  const onPointerDown = (e) => {
+    if (disabled || e.pointerType === "mouse" && e.button !== 0) return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    const p = { ...point(e), w: strokeWidth };
+    drawing.current = [p];
+    const ctx = canvasRef.current.getContext("2d");
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    drawStroke(ctx, [p]);
+  };
+  const onPointerMove = (e) => {
+    const stroke = drawing.current;
+    if (!stroke) return;
+    const prev = stroke[stroke.length - 1];
+    const p = point(e);
+    const dist = Math.hypot(p.x - prev.x, p.y - prev.y);
+    if (dist < 1.5) return;
+    const speed = dist / Math.max(1, p.t - prev.t);
+    const target = strokeWidth * Math.max(0.45, Math.min(1.35, 1.4 - speed * 0.45));
+    p.w = prev.w * 0.6 + target * 0.4;
+    stroke.push(p);
+    drawStroke(canvasRef.current.getContext("2d"), stroke.slice(-3));
+  };
+  const onPointerUp = () => {
+    if (!drawing.current) return;
+    strokes.current = [...strokes.current, drawing.current];
+    drawing.current = null;
+    setCount(strokes.current.length);
+    emit();
+  };
+  const undo = () => {
+    strokes.current = strokes.current.slice(0, -1);
+    setCount(strokes.current.length);
+    redraw();
+    emit();
+  };
+  const clear = () => {
+    strokes.current = [];
+    setCount(0);
+    redraw();
+    emit();
+  };
+  useImperativeHandle(ref, () => ({
+    clear,
+    undo,
+    isEmpty: () => strokes.current.length === 0,
+    toDataURL: (type = "image/png") => canvasRef.current.toDataURL(type)
+  }));
+  return /* @__PURE__ */ jsxs("div", { className: cn("ru-signature", disabled && "ru-signature--disabled", className), style, ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { className: "ru-signature__canvas-wrap", style: { height }, children: [
+      count === 0 && placeholder && /* @__PURE__ */ jsx("span", { className: "ru-signature__placeholder", "aria-hidden": "true", children: placeholder }),
+      /* @__PURE__ */ jsx(
+        "canvas",
+        {
+          ref: canvasRef,
+          className: "ru-signature__canvas",
+          role: "img",
+          "aria-label": count ? "Signature drawn" : "Signature pad, empty",
+          onPointerDown,
+          onPointerMove,
+          onPointerUp,
+          onPointerCancel: onPointerUp
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "ru-signature__baseline", "aria-hidden": "true" })
+    ] }),
+    (showControls || actions) && /* @__PURE__ */ jsxs("div", { className: "ru-signature__bar", children: [
+      showControls && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("button", { type: "button", className: "ru-signature__btn", onClick: undo, disabled: disabled || count === 0, children: [
+          /* @__PURE__ */ jsx(UndoIcon, {}),
+          undoLabel
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "ru-signature__sep", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs("button", { type: "button", className: "ru-signature__btn", onClick: clear, disabled: disabled || count === 0, children: [
+          /* @__PURE__ */ jsx(EraserIcon, {}),
+          clearLabel
+        ] })
+      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: "ru-signature__actions", children: actions })
+    ] })
+  ] });
+});
+const statusLabels = {
+  running: "In progress",
+  queued: "Queued",
+  pending: "Not started",
+  partial: "Partly done",
+  complete: "Complete",
+  error: "Failed"
+};
+function StatusIcon({ status = "pending", progress = 50, size = 20, label, className, style, ...rest }) {
+  const r = 8;
+  const c = 2 * Math.PI * r;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "img",
+      "aria-label": label ?? statusLabels[status] ?? status,
+      className: cn("ru-status-icon", `ru-status-icon--${status}`, className),
+      style: { width: size, height: size, ...style },
+      ...rest,
+      children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", width: size, height: size, "aria-hidden": "true", children: status === "complete" || status === "error" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "10", className: "ru-status-icon__fill" }),
+        status === "complete" ? /* @__PURE__ */ jsx("path", { d: "m6 10.2 2.6 2.6L14 7.4", className: "ru-status-icon__glyph" }) : /* @__PURE__ */ jsx("path", { d: "m7 7 6 6M13 7l-6 6", className: "ru-status-icon__glyph" })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "10",
+            cy: "10",
+            r,
+            className: "ru-status-icon__ring",
+            strokeDasharray: status === "running" || status === "queued" ? "2.6 2.4" : void 0
+          }
+        ),
+        status === "partial" && /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "10",
+            cy: "10",
+            r,
+            className: "ru-status-icon__arc",
+            strokeDasharray: c,
+            strokeDashoffset: c * (1 - Math.min(100, Math.max(0, progress)) / 100)
+          }
+        )
+      ] }) })
+    }
+  );
+}
+function StepList({ items, connector = true, dividers = true, className, ...rest }) {
+  return /* @__PURE__ */ jsx("ol", { className: cn("ru-step-list", !dividers && "ru-step-list--plain", className), ...rest, children: items.map((item, i) => /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: cn("ru-step-list__item", `ru-step-list__item--${item.status ?? "pending"}`),
+      "aria-current": item.status === "running" ? "step" : void 0,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "ru-step-list__rail", children: [
+          /* @__PURE__ */ jsx("span", { className: "ru-step-list__icon", children: /* @__PURE__ */ jsx(StatusIcon, { status: item.status, progress: item.progress, size: 22 }) }),
+          connector && i < items.length - 1 && /* @__PURE__ */ jsx("span", { className: "ru-step-list__line", "aria-hidden": "true" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "ru-step-list__body", children: [
+          /* @__PURE__ */ jsx("div", { className: "ru-step-list__title", children: item.title }),
+          item.description && /* @__PURE__ */ jsx("div", { className: "ru-step-list__desc", children: item.description })
+        ] }),
+        item.meta && /* @__PURE__ */ jsx("div", { className: "ru-step-list__meta", children: item.meta })
+      ]
+    },
+    item.key ?? i
+  )) });
+}
+function StackedProgress({ segments, max, size = "md", showLegend = true, gap = 4, label, className, ...rest }) {
+  const total = max ?? segments.reduce((sum, s) => sum + s.value, 0);
+  const summary = segments.map((s) => `${s.label} ${Math.round(s.value / total * 100)}%`).join(", ");
+  return /* @__PURE__ */ jsxs("div", { className: cn("ru-stacked", `ru-stacked--${size}`, className), ...rest, children: [
+    (label || showLegend) && /* @__PURE__ */ jsxs("div", { className: "ru-stacked__head", children: [
+      label && /* @__PURE__ */ jsx("span", { className: "ru-stacked__label", children: label }),
+      showLegend && /* @__PURE__ */ jsx("ul", { className: "ru-stacked__legend", children: segments.map((s) => /* @__PURE__ */ jsxs("li", { children: [
+        /* @__PURE__ */ jsx("span", { className: "ru-stacked__dot", style: { background: s.color } }),
+        s.label
+      ] }, s.label)) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ru-stacked__bar", role: "img", "aria-label": summary, style: { gap }, children: [
+      segments.map((s) => /* @__PURE__ */ jsx("span", { className: "ru-stacked__seg", title: `${s.label}: ${s.value}`, style: { flexGrow: s.value, background: s.color } }, s.label)),
+      max !== void 0 && total > segments.reduce((sum, s) => sum + s.value, 0) && /* @__PURE__ */ jsx("span", { className: "ru-stacked__rest", style: { flexGrow: total - segments.reduce((sum, s) => sum + s.value, 0) } })
+    ] })
+  ] });
+}
+const semanticColors = /* @__PURE__ */ new Set(["primary", "secondary", "success", "danger", "warning", "info"]);
+function IconTile({
+  color = "primary",
+  size = 48,
+  radius,
+  badge,
+  glow = true,
+  label,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const ink = semanticColors.has(color) ? `var(--ru-${color})` : color;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn("ru-icon-tile", glow && "ru-icon-tile--glow", className),
+      style: { "--_c": ink, "--_s": `${size}px`, ...radius !== void 0 && { "--_r": typeof radius === "number" ? `${radius}px` : radius }, ...style },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "ru-icon-tile__face", role: label ? "img" : void 0, "aria-label": label, "aria-hidden": label ? void 0 : true, children }),
+        badge && /* @__PURE__ */ jsx("span", { className: "ru-icon-tile__badge", "aria-hidden": "true", children: badge })
+      ]
+    }
+  );
+}
 export {
   Accordion,
   Alert,
@@ -2067,10 +2806,15 @@ export {
   CardFooter,
   CardHeader,
   Checkbox,
+  DateTile,
   Divider,
+  DotText,
   Drawer,
   Dropdown,
+  Dropzone,
+  FileItem,
   FrameCard,
+  IconTile,
   Input,
   Kbd,
   Modal,
@@ -2078,12 +2822,19 @@ export {
   Pagination,
   Pattern,
   Progress,
+  ProgressRing,
   Radio,
   RadioGroup,
+  SegmentedControl,
   Select,
+  SignaturePad,
   Skeleton,
   Spinner,
   SpotlightCard,
+  StackedProgress,
+  Stat,
+  StatusIcon,
+  StepList,
   Switch,
   Table,
   Tabs,
@@ -2091,6 +2842,7 @@ export {
   ToastProvider,
   Tooltip,
   cn,
+  formatBytes,
   useClickOutside,
   useControllableState,
   useDisclosure,