reusify-ui 2.0.1 → 2.1.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$2 = /* @__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$2.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",
@@ -153,132 +225,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 +481,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 +838,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 +856,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 +866,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,38 +1051,686 @@ 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([]);
-  const mounted = useMounted();
-  const counter = useRef(0);
-  const dismiss = useCallback((id) => {
-    setToasts((list) => id ? list.filter((t) => t.id !== id) : []);
-  }, []);
-  const api = useMemo(() => {
-    const show = (options) => {
-      const opts = typeof options === "string" ? { title: options } : options;
-      const id = opts.id ?? `ru-toast-${++counter.current}`;
-      setToasts((list) => [...list.filter((t) => t.id !== id), { ...opts, id }].slice(-max));
-      return id;
-    };
-    const fn = show;
-    fn.success = (title, o) => show({ ...o, title, variant: "success" });
-    fn.error = (title, o) => show({ ...o, title, variant: "danger" });
-    fn.warning = (title, o) => show({ ...o, title, variant: "warning" });
-    fn.info = (title, o) => show({ ...o, title, variant: "info" });
-    fn.dismiss = dismiss;
-    return fn;
-  }, [dismiss, max]);
-  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: api, children: [
-    children,
-    mounted && createPortal(
+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) => {
+    setToasts((list) => id ? list.filter((t) => t.id !== id) : []);
+  }, []);
+  const api = useMemo(() => {
+    const show = (options) => {
+      const opts = typeof options === "string" ? { title: options } : options;
+      const id = opts.id ?? `ru-toast-${++counter.current}`;
+      setToasts((list) => [...list.filter((t) => t.id !== id), { ...opts, id }].slice(-max));
+      return id;
+    };
+    const fn = show;
+    fn.success = (title, o) => show({ ...o, title, variant: "success" });
+    fn.error = (title, o) => show({ ...o, title, variant: "danger" });
+    fn.warning = (title, o) => show({ ...o, title, variant: "warning" });
+    fn.info = (title, o) => show({ ...o, title, variant: "info" });
+    fn.dismiss = dismiss;
+    return fn;
+  }, [dismiss, max]);
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: api, children: [
+    children,
+    mounted && createPortal(
       /* @__PURE__ */ jsx("ol", { className: cn("ru-toaster", `ru-toaster--${position}`), "aria-live": "polite", "aria-label": "Notifications", children: toasts.map((t) => /* @__PURE__ */ jsx(ToastView, { toast: t, duration: t.duration ?? duration, onDismiss: dismiss }, t.id)) }),
       document.body
     )
@@ -1429,14 +1772,68 @@ function useToast() {
 function Kbd({ className, ...rest }) {
   return /* @__PURE__ */ jsx("kbd", { className: cn("ru-kbd", className), ...rest });
 }
-function Pattern({ variant = "grid", size = 24, fade = true, className, style, ...rest }) {
-  return /* @__PURE__ */ jsx(
+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", `ru-pattern--${variant}`, fade && "ru-pattern--fade", className),
-      style: { "--ru-pattern-size": `${size}px`, ...style },
-      ...rest
+      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 }) })
+      ]
     }
   );
 }
@@ -1463,6 +1860,198 @@ function SpotlightCard({ color, className, style, onMouseMove, children, ...rest
     }
   );
 }
+const semanticColors$1 = /* @__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$1.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 = /* @__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.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)
+      );
+    }) })
+  ] });
+}
 export {
   Accordion,
   Alert,
@@ -1471,6 +2060,8 @@ export {
   Badge,
   Breadcrumbs,
   Button,
+  ButtonGroup,
+  Calendar,
   Card,
   CardBody,
   CardFooter,
@@ -1479,6 +2070,7 @@ export {
   Divider,
   Drawer,
   Dropdown,
+  FrameCard,
   Input,
   Kbd,
   Modal,