reusify-ui 1.0.7 → 2.0.0

package/dist/reusify-ui.js

@@ -0,0 +1,1506 @@
+"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 { createPortal } from "react-dom";
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+const Button = forwardRef(function Button2({
+  variant = "primary",
+  size = "md",
+  loading = false,
+  fullWidth = false,
+  leftIcon,
+  rightIcon,
+  disabled,
+  type = "button",
+  className,
+  children,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ jsxs(
+    "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),
+      ...rest,
+      children: [
+        loading ? /* @__PURE__ */ jsx("span", { className: "ru-spinner", "aria-hidden": "true" }) : leftIcon,
+        children,
+        !loading && rightIcon
+      ]
+    }
+  );
+});
+const base = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  "aria-hidden": true,
+  focusable: "false"
+};
+const CloseIcon = (p) => /* @__PURE__ */ jsx("svg", { ...base, ...p, children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) });
+const InfoIcon = (p) => /* @__PURE__ */ jsxs("svg", { ...base, ...p, children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 16v-4M12 8h.01" })
+] });
+const SuccessIcon = (p) => /* @__PURE__ */ jsxs("svg", { ...base, ...p, children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsx("path", { d: "m9 12 2 2 4-4" })
+] });
+const WarningIcon = (p) => /* @__PURE__ */ jsxs("svg", { ...base, ...p, children: [
+  /* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 9v4M12 17h.01" })
+] });
+const DangerIcon = (p) => /* @__PURE__ */ jsxs("svg", { ...base, ...p, children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsx("path", { d: "m15 9-6 6M9 9l6 6" })
+] });
+const ChevronDownIcon = (p) => /* @__PURE__ */ jsx("svg", { ...base, ...p, children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) });
+const ChevronLeftIcon = (p) => /* @__PURE__ */ jsx("svg", { ...base, ...p, children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) });
+const ChevronRightIcon = (p) => /* @__PURE__ */ jsx("svg", { ...base, ...p, children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) });
+const CheckIcon = (p) => /* @__PURE__ */ jsx("svg", { ...base, ...p, children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
+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 statusIcons = {
+  info: InfoIcon,
+  success: SuccessIcon,
+  warning: WarningIcon,
+  danger: DangerIcon
+};
+function CloseButton({ onClick, label = "Close" }) {
+  return /* @__PURE__ */ jsx("button", { type: "button", className: "ru-close", "aria-label": label, onClick, children: /* @__PURE__ */ jsx(CloseIcon, {}) });
+}
+function Spinner({ size = "md", color = "primary", label = "Loading", className, ...rest }) {
+  return /* @__PURE__ */ jsxs("span", { role: "status", className: cn("ru-spinner-wrap", className), ...rest, children: [
+    /* @__PURE__ */ jsx("span", { className: cn("ru-spinner", `ru-spinner--${size}`, `ru-c-${color}`), "aria-hidden": "true" }),
+    label && /* @__PURE__ */ jsx("span", { className: "ru-sr-only", children: label })
+  ] });
+}
+function Progress({
+  value,
+  max = 100,
+  size = "md",
+  color = "primary",
+  label,
+  showValue = false,
+  className,
+  ...rest
+}) {
+  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: [
+    (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: [
+        Math.round(percent),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "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}`),
+        children: /* @__PURE__ */ jsx("div", { className: "ru-progress__bar", style: indeterminate ? void 0 : { width: `${percent}%` } })
+      }
+    )
+  ] });
+}
+function Skeleton({ variant = "text", width, height, lines = 1, className, style, ...rest }) {
+  const block = (key, lineWidth) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn("ru-skeleton", `ru-skeleton--${variant}`, className),
+      style: { width: lineWidth ?? width, height: variant === "circle" ? height ?? width : height, ...style },
+      ...rest
+    },
+    key
+  );
+  if (variant !== "text" || lines <= 1) return block();
+  return /* @__PURE__ */ jsx("span", { className: "ru-skeleton-group", children: Array.from({ length: lines }, (_, i) => block(i, i === lines - 1 ? "60%" : width)) });
+}
+function Alert({ variant = "info", title, icon, onClose, className, children, ...rest }) {
+  const Icon = statusIcons[variant];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: variant === "danger" || variant === "warning" ? "alert" : "status",
+      className: cn("ru-alert", `ru-c-${variant}`, className),
+      ...rest,
+      children: [
+        icon !== false && /* @__PURE__ */ jsx("span", { className: "ru-alert__icon", children: icon ?? /* @__PURE__ */ jsx(Icon, {}) }),
+        /* @__PURE__ */ jsxs("div", { className: "ru-alert__content", children: [
+          title && /* @__PURE__ */ jsx("p", { className: "ru-alert__title", children: title }),
+          children && /* @__PURE__ */ jsx("div", { className: "ru-alert__desc", children })
+        ] }),
+        onClose && /* @__PURE__ */ jsx(CloseButton, { onClick: onClose, label: "Dismiss" })
+      ]
+    }
+  );
+}
+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;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const setValue = useCallback(
+    (next) => {
+      var _a;
+      if (!isControlled) setInternal(next);
+      (_a = onChangeRef.current) == null ? void 0 : _a.call(onChangeRef, next);
+    },
+    [isControlled]
+  );
+  return [isControlled ? value : internal, setValue];
+}
+function useDisclosure(initialOpen = false) {
+  const [isOpen, setIsOpen] = useState(initialOpen);
+  const open = useCallback(() => setIsOpen(true), []);
+  const close = useCallback(() => setIsOpen(false), []);
+  const toggle = useCallback(() => setIsOpen((v) => !v), []);
+  return { isOpen, open, close, toggle, setIsOpen };
+}
+function useClickOutside(ref, handler, enabled = true) {
+  const handlerRef = useRef(handler);
+  handlerRef.current = handler;
+  useEffect(() => {
+    if (!enabled) return;
+    const listener = (event) => {
+      const el = ref.current;
+      if (!el || el.contains(event.target)) return;
+      handlerRef.current();
+    };
+    document.addEventListener("pointerdown", listener);
+    return () => document.removeEventListener("pointerdown", listener);
+  }, [ref, enabled]);
+}
+function useMounted() {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  return mounted;
+}
+const FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function useOverlay(open, panelRef, onClose, closeOnEsc) {
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  const closeOnEscRef = useRef(closeOnEsc);
+  closeOnEscRef.current = closeOnEsc;
+  useEffect(() => {
+    var _a;
+    if (!open) return;
+    const panel = panelRef.current;
+    const previouslyFocused = document.activeElement;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    (_a = (panel == null ? void 0 : panel.querySelector("[data-autofocus]")) ?? panel) == null ? void 0 : _a.focus();
+    const onKeyDown = (event) => {
+      var _a2;
+      if (event.key === "Escape" && closeOnEscRef.current) {
+        (_a2 = onCloseRef.current) == null ? void 0 : _a2.call(onCloseRef);
+        return;
+      }
+      if (event.key !== "Tab" || !panel) return;
+      const items = Array.from(panel.querySelectorAll(FOCUSABLE));
+      if (items.length === 0) {
+        event.preventDefault();
+        return;
+      }
+      const first = items[0];
+      const last = items[items.length - 1];
+      const active = document.activeElement;
+      if (event.shiftKey && (active === first || active === panel)) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      var _a2;
+      document.removeEventListener("keydown", onKeyDown);
+      document.body.style.overflow = previousOverflow;
+      (_a2 = previouslyFocused == null ? void 0 : previouslyFocused.focus) == null ? void 0 : _a2.call(previouslyFocused);
+    };
+  }, [open, panelRef]);
+}
+function Field({
+  id,
+  helpId,
+  label,
+  helperText,
+  error,
+  size = "md",
+  fullWidth,
+  required,
+  disabled,
+  className,
+  wrapClassName,
+  children
+}) {
+  const message = typeof error === "string" ? error : helperText;
+  return /* @__PURE__ */ jsxs("div", { className: cn("ru-field", fullWidth && "ru-field--full", className), children: [
+    label && /* @__PURE__ */ jsxs("label", { className: "ru-label", htmlFor: id, children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: "ru-label__req", "aria-hidden": "true", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "ru-input-wrap",
+          `ru-input-wrap--${size}`,
+          error && "ru-input-wrap--error",
+          disabled && "ru-input-wrap--disabled",
+          wrapClassName
+        ),
+        children
+      }
+    ),
+    message && /* @__PURE__ */ jsx("p", { id: helpId, className: cn("ru-help", error && "ru-help--error"), children: message })
+  ] });
+}
+function useFieldIds(id, error, helperText) {
+  const autoId = useId();
+  const fieldId = id ?? autoId;
+  const helpId = `${fieldId}-help`;
+  const hasMessage = typeof error === "string" || Boolean(helperText);
+  return { fieldId, helpId, describedBy: hasMessage ? helpId : void 0 };
+}
+const Input = forwardRef(function Input2({ label, helperText, error, size, fullWidth, leftIcon, rightIcon, containerClassName, className, id, ...rest }, ref) {
+  const { fieldId, helpId, describedBy } = useFieldIds(id, error, helperText);
+  return /* @__PURE__ */ jsxs(
+    Field,
+    {
+      id: fieldId,
+      helpId,
+      label,
+      helperText,
+      error,
+      size,
+      fullWidth,
+      required: rest.required,
+      disabled: rest.disabled,
+      className: containerClassName,
+      children: [
+        leftIcon && /* @__PURE__ */ jsx("span", { className: "ru-input-icon", children: leftIcon }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            id: fieldId,
+            "aria-invalid": error ? true : void 0,
+            "aria-describedby": describedBy,
+            className: cn("ru-input", className),
+            ...rest
+          }
+        ),
+        rightIcon && /* @__PURE__ */ jsx("span", { className: "ru-input-icon", children: rightIcon })
+      ]
+    }
+  );
+});
+const Textarea = forwardRef(function Textarea2({ label, helperText, error, fullWidth, containerClassName, className, id, rows = 4, ...rest }, ref) {
+  const { fieldId, helpId, describedBy } = useFieldIds(id, error, helperText);
+  return /* @__PURE__ */ jsx(
+    Field,
+    {
+      id: fieldId,
+      helpId,
+      label,
+      helperText,
+      error,
+      fullWidth,
+      required: rest.required,
+      disabled: rest.disabled,
+      className: containerClassName,
+      wrapClassName: "ru-input-wrap--textarea",
+      children: /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref,
+          id: fieldId,
+          rows,
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": describedBy,
+          className: cn("ru-input", className),
+          ...rest
+        }
+      )
+    }
+  );
+});
+const NativeSelect = forwardRef(function NativeSelect2({
+  label,
+  helperText,
+  error,
+  size,
+  fullWidth,
+  options,
+  placeholder,
+  containerClassName,
+  className,
+  id,
+  children,
+  value,
+  defaultValue,
+  ...rest
+}, ref) {
+  const { fieldId, helpId, describedBy } = useFieldIds(id, error, helperText);
+  const valueProps = value !== void 0 ? { value } : { defaultValue: defaultValue ?? (placeholder ? "" : void 0) };
+  return /* @__PURE__ */ jsxs(
+    Field,
+    {
+      id: fieldId,
+      helpId,
+      label,
+      helperText,
+      error,
+      size,
+      fullWidth,
+      required: rest.required,
+      disabled: rest.disabled,
+      className: containerClassName,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            ref,
+            id: fieldId,
+            "aria-invalid": error ? true : void 0,
+            "aria-describedby": describedBy,
+            className: cn("ru-input", "ru-native-select", className),
+            ...valueProps,
+            ...rest,
+            children: [
+              placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
+              options == null ? void 0 : options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value)),
+              children
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(ChevronDownIcon, { className: "ru-native-select__chevron" })
+      ]
+    }
+  );
+});
+function childrenToOptions(children) {
+  const result = [];
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    if (child.type === "option") {
+      const { value, children: label, disabled } = child.props;
+      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) {
+      result.push(...childrenToOptions(child.props.children));
+    }
+  });
+  return result;
+}
+function flattenOptions(options) {
+  const items = [];
+  let index = 0;
+  for (const opt of options) {
+    if (opt.options) {
+      items.push({ type: "group", label: opt.label, key: `group-${items.length}` });
+      for (const child of opt.options) items.push({ ...child, type: "option", index: index++ });
+    } else {
+      items.push({ ...opt, type: "option", index: index++ });
+    }
+  }
+  return items;
+}
+const LIST_MAX_HEIGHT = 288;
+const Select = forwardRef(function Select2({
+  label,
+  helperText,
+  error,
+  size = "md",
+  fullWidth,
+  options = [],
+  placeholder = "Select…",
+  value,
+  defaultValue,
+  onChange,
+  disabled,
+  required,
+  name,
+  id,
+  emptyText = "No options",
+  containerClassName,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const { fieldId, helpId, describedBy } = useFieldIds(id, error, helperText);
+  const [selected, setSelected] = useControllableState(value, defaultValue ?? null, onChange);
+  const [open, setOpen] = useState(false);
+  const [active, setActive] = useState(-1);
+  const [position, setPosition] = useState(null);
+  const triggerRef = useRef(null);
+  const listRef = useRef(null);
+  const typeahead = useRef({ text: "", timer: void 0 });
+  const listId = useId();
+  const mounted = useMounted();
+  useImperativeHandle(ref, () => triggerRef.current);
+  const items = useMemo(() => flattenOptions([...options, ...childrenToOptions(children)]), [options, children]);
+  const selectable = useMemo(() => items.filter((item) => item.type === "option"), [items]);
+  const selectedItem = selectable.find((opt) => opt.value === selected);
+  const step = (from, dir) => {
+    let i = from;
+    for (let n = 0; n < selectable.length; n++) {
+      i = (i + dir + selectable.length) % selectable.length;
+      if (!selectable[i].disabled) return i;
+    }
+    return from;
+  };
+  const firstEnabled = () => step(-1, 1);
+  const lastEnabled = () => step(0, -1);
+  const openList = () => {
+    if (disabled) return;
+    const current = selectable.findIndex((opt) => opt.value === selected);
+    setActive(current >= 0 ? current : firstEnabled());
+    setOpen(true);
+  };
+  const choose = (opt) => {
+    var _a;
+    if (!opt || opt.disabled) return;
+    setSelected(opt.value);
+    setOpen(false);
+    (_a = triggerRef.current) == null ? void 0 : _a.focus();
+  };
+  const runTypeahead = (char) => {
+    const state = typeahead.current;
+    clearTimeout(state.timer);
+    state.text += char.toLowerCase();
+    state.timer = setTimeout(() => state.text = "", 500);
+    const start = open ? active : selectable.findIndex((opt) => opt.value === selected);
+    for (let n = 1; n <= selectable.length; n++) {
+      const i = (start + n + selectable.length) % selectable.length;
+      const opt = selectable[i];
+      if (!opt.disabled && String(opt.label).toLowerCase().startsWith(state.text)) {
+        setActive(i);
+        if (!open) setOpen(true);
+        return;
+      }
+    }
+  };
+  const onKeyDown = (e) => {
+    if (disabled) return;
+    const { key } = e;
+    if (!open) {
+      if (key === "ArrowDown" || key === "ArrowUp" || key === "Enter" || key === " ") {
+        e.preventDefault();
+        openList();
+      } else if (key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
+        runTypeahead(key);
+      }
+      return;
+    }
+    switch (key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setActive((i) => step(i, 1));
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setActive((i) => step(i, -1));
+        break;
+      case "Home":
+        e.preventDefault();
+        setActive(firstEnabled());
+        break;
+      case "End":
+        e.preventDefault();
+        setActive(lastEnabled());
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (key === " " && typeahead.current.text) runTypeahead(" ");
+        else choose(selectable[active]);
+        break;
+      case "Escape":
+        e.preventDefault();
+        e.stopPropagation();
+        setOpen(false);
+        break;
+      case "Tab":
+        setOpen(false);
+        break;
+      default:
+        if (key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) runTypeahead(key);
+    }
+  };
+  useEffect(() => {
+    if (!open) {
+      setPosition(null);
+      return;
+    }
+    const update = () => {
+      var _a;
+      const anchor = (_a = triggerRef.current) == null ? void 0 : _a.parentElement;
+      if (!anchor) return;
+      const rect = anchor.getBoundingClientRect();
+      const below = window.innerHeight - rect.bottom;
+      const above = rect.top;
+      const top = below < 240 && above > below;
+      setPosition({
+        left: rect.left,
+        width: rect.width,
+        top: top ? void 0 : rect.bottom + 6,
+        bottom: top ? window.innerHeight - rect.top + 6 : void 0,
+        maxHeight: Math.max(120, Math.min(LIST_MAX_HEIGHT, (top ? above : below) - 16)),
+        placement: top ? "top" : "bottom"
+      });
+    };
+    update();
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+    };
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (e) => {
+      var _a, _b;
+      if (((_a = triggerRef.current) == null ? void 0 : _a.contains(e.target)) || ((_b = listRef.current) == null ? void 0 : _b.contains(e.target))) return;
+      setOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [open]);
+  useEffect(() => {
+    var _a;
+    if (open && position && active >= 0) {
+      (_a = document.getElementById(`${listId}-${active}`)) == null ? void 0 : _a.scrollIntoView({ block: "nearest" });
+    }
+  }, [open, position, active, listId]);
+  useEffect(() => () => clearTimeout(typeahead.current.timer), []);
+  return /* @__PURE__ */ jsxs(
+    Field,
+    {
+      id: fieldId,
+      helpId,
+      label,
+      helperText,
+      error,
+      size,
+      fullWidth,
+      required,
+      disabled,
+      className: containerClassName,
+      wrapClassName: cn("ru-select-wrap", open && "ru-select-wrap--open"),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: triggerRef,
+            id: fieldId,
+            type: "button",
+            role: "combobox",
+            "aria-haspopup": "listbox",
+            "aria-expanded": open,
+            "aria-controls": open ? listId : void 0,
+            "aria-activedescendant": open && active >= 0 ? `${listId}-${active}` : void 0,
+            "aria-invalid": error ? true : void 0,
+            "aria-required": required || void 0,
+            "aria-describedby": describedBy,
+            disabled,
+            className: cn("ru-select-trigger", className),
+            onClick: () => open ? setOpen(false) : openList(),
+            onKeyDown,
+            ...rest,
+            children: [
+              (selectedItem == null ? void 0 : selectedItem.icon) && /* @__PURE__ */ jsx("span", { className: "ru-select__icon", children: selectedItem.icon }),
+              /* @__PURE__ */ jsx("span", { className: cn("ru-select__value", !selectedItem && "ru-select__placeholder"), children: selectedItem ? selectedItem.label : placeholder }),
+              /* @__PURE__ */ jsx(ChevronDownIcon, { className: "ru-select__chevron" })
+            ]
+          }
+        ),
+        (name || required) && /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "ru-select__native",
+            tabIndex: -1,
+            "aria-hidden": "true",
+            name,
+            required,
+            value: selected ?? "",
+            onChange: () => {
+            },
+            onFocus: () => {
+              var _a;
+              return (_a = triggerRef.current) == null ? void 0 : _a.focus();
+            }
+          }
+        ),
+        open && position && mounted && createPortal(
+          /* @__PURE__ */ jsxs(
+            "ul",
+            {
+              ref: listRef,
+              id: listId,
+              role: "listbox",
+              "aria-labelledby": fieldId,
+              className: cn("ru-select__list", position.placement === "top" && "ru-select__list--top"),
+              style: {
+                left: position.left,
+                width: position.width,
+                top: position.top,
+                bottom: position.bottom,
+                maxHeight: position.maxHeight
+              },
+              onMouseDown: (e) => e.preventDefault(),
+              children: [
+                selectable.length === 0 && /* @__PURE__ */ jsx("li", { className: "ru-select__empty", children: emptyText }),
+                items.map(
+                  (item) => item.type === "group" ? /* @__PURE__ */ jsx("li", { role: "presentation", className: "ru-select__group", children: item.label }, item.key) : /* @__PURE__ */ jsxs(
+                    "li",
+                    {
+                      id: `${listId}-${item.index}`,
+                      role: "option",
+                      "aria-selected": item.value === selected,
+                      "aria-disabled": item.disabled || void 0,
+                      className: cn(
+                        "ru-select__option",
+                        item.index === active && "ru-select__option--active",
+                        item.value === selected && "ru-select__option--selected",
+                        item.disabled && "ru-select__option--disabled"
+                      ),
+                      onMouseMove: () => !item.disabled && item.index !== active && setActive(item.index),
+                      onClick: () => choose(item),
+                      children: [
+                        item.icon && /* @__PURE__ */ jsx("span", { className: "ru-select__icon", children: item.icon }),
+                        /* @__PURE__ */ jsxs("span", { className: "ru-select__text", children: [
+                          /* @__PURE__ */ jsx("span", { className: "ru-select__label", children: item.label }),
+                          item.description && /* @__PURE__ */ jsx("span", { className: "ru-select__desc", children: item.description })
+                        ] }),
+                        item.value === selected && /* @__PURE__ */ jsx(CheckIcon, { className: "ru-select__check" })
+                      ]
+                    },
+                    item.value
+                  )
+                )
+              ]
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+});
+const Checkbox = forwardRef(function Checkbox2({ label, description, indeterminate = false, color = "primary", className, disabled, ...rest }, ref) {
+  const innerRef = useRef(null);
+  useImperativeHandle(ref, () => innerRef.current);
+  useEffect(() => {
+    if (innerRef.current) innerRef.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  return /* @__PURE__ */ jsxs("label", { className: cn("ru-check", `ru-c-${color}`, disabled && "ru-check--disabled", className), children: [
+    /* @__PURE__ */ jsx("input", { ref: innerRef, type: "checkbox", className: "ru-check__input", disabled, ...rest }),
+    (label || description) && /* @__PURE__ */ jsxs("span", { className: "ru-check__text", children: [
+      label,
+      description && /* @__PURE__ */ jsx("span", { className: "ru-check__desc", children: description })
+    ] })
+  ] });
+});
+const Radio = forwardRef(function Radio2({ label, description, color = "primary", className, disabled, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs("label", { className: cn("ru-check", `ru-c-${color}`, disabled && "ru-check--disabled", className), children: [
+    /* @__PURE__ */ jsx("input", { ref, type: "radio", className: "ru-check__input ru-check__input--radio", disabled, ...rest }),
+    (label || description) && /* @__PURE__ */ jsxs("span", { className: "ru-check__text", children: [
+      label,
+      description && /* @__PURE__ */ jsx("span", { className: "ru-check__desc", children: description })
+    ] })
+  ] });
+});
+function RadioGroup({
+  options,
+  name,
+  value,
+  defaultValue,
+  onChange,
+  label,
+  orientation = "vertical",
+  color = "primary",
+  disabled,
+  className
+}) {
+  const autoName = useId();
+  const [selected, setSelected] = useControllableState(value, defaultValue ?? "", onChange);
+  return /* @__PURE__ */ jsxs("fieldset", { className: cn("ru-radio-group", className), disabled, children: [
+    label && /* @__PURE__ */ jsx("legend", { className: "ru-label", children: label }),
+    /* @__PURE__ */ jsx("div", { className: cn("ru-radio-group__items", orientation === "horizontal" && "ru-radio-group__items--horizontal"), children: options.map((opt) => /* @__PURE__ */ jsx(
+      Radio,
+      {
+        name: name ?? autoName,
+        value: opt.value,
+        label: opt.label,
+        description: opt.description,
+        color,
+        disabled: disabled || opt.disabled,
+        checked: selected === opt.value,
+        onChange: () => setSelected(opt.value)
+      },
+      opt.value
+    )) })
+  ] });
+}
+const Switch = forwardRef(function Switch2({ checked, defaultChecked = false, onChange, label, size = "md", color = "primary", disabled, name, id, className }, ref) {
+  const [on, setOn] = useControllableState(checked, defaultChecked, onChange);
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: cn("ru-switch", `ru-switch--${size}`, `ru-c-${color}`, disabled && "ru-switch--disabled", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref,
+            id,
+            type: "button",
+            role: "switch",
+            "aria-checked": on,
+            disabled,
+            className: "ru-switch__track",
+            onClick: () => setOn(!on),
+            children: /* @__PURE__ */ jsx("span", { className: "ru-switch__thumb" })
+          }
+        ),
+        label && /* @__PURE__ */ jsx("span", { children: label }),
+        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: on ? "on" : "off" })
+      ]
+    }
+  );
+});
+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();
+  };
+  return createPortal(
+    /* @__PURE__ */ jsx("div", { className: "ru-overlay", 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}`, 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",
+  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();
+  const [openValues, setOpenValues] = useControllableState(value, defaultValue ?? [], onChange);
+  const toggle = (key) => {
+    const isOpen = openValues.includes(key);
+    if (isOpen) setOpenValues(openValues.filter((v) => v !== key));
+    else setOpenValues(multiple ? [...openValues, key] : [key]);
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("ru-accordion", className), children: items.map((item, i) => {
+    const key = item.value ?? String(i);
+    const isOpen = openValues.includes(key);
+    const triggerId = `${baseId}-trigger-${i}`;
+    const panelId = `${baseId}-panel-${i}`;
+    return /* @__PURE__ */ jsxs("div", { className: "ru-accordion__item", children: [
+      /* @__PURE__ */ jsx("h3", { className: "ru-accordion__heading", children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          id: triggerId,
+          "aria-expanded": isOpen,
+          "aria-controls": panelId,
+          disabled: item.disabled,
+          className: "ru-accordion__trigger",
+          onClick: () => toggle(key),
+          children: [
+            /* @__PURE__ */ jsx("span", { children: item.title }),
+            /* @__PURE__ */ jsx(ChevronDownIcon, { className: "ru-accordion__chevron" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: panelId,
+          role: "region",
+          "aria-labelledby": triggerId,
+          className: cn("ru-accordion__panel", isOpen && "ru-accordion__panel--open"),
+          children: /* @__PURE__ */ jsx("div", { className: "ru-accordion__inner", children: /* @__PURE__ */ jsx("div", { className: "ru-accordion__content", children: item.content }) })
+        }
+      )
+    ] }, key);
+  }) });
+}
+function range(start, end) {
+  return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+}
+function getPageTokens(page, totalPages, siblings) {
+  const slots = siblings * 2 + 5;
+  if (totalPages <= slots) return range(1, totalPages);
+  const left = Math.max(page - siblings, 1);
+  const right = Math.min(page + siblings, totalPages);
+  const showLeftEllipsis = left > 2;
+  const showRightEllipsis = right < totalPages - 1;
+  const edgeCount = 3 + siblings * 2;
+  if (!showLeftEllipsis) return [...range(1, edgeCount), "end-ellipsis", totalPages];
+  if (!showRightEllipsis) return [1, "start-ellipsis", ...range(totalPages - edgeCount + 1, totalPages)];
+  return [1, "start-ellipsis", ...range(left, right), "end-ellipsis", totalPages];
+}
+function Pagination({ page, totalPages, onChange, siblingCount = 1, size = "md", className }) {
+  if (totalPages < 1) return null;
+  const go = (p) => {
+    if (p >= 1 && p <= totalPages && p !== page) onChange(p);
+  };
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Pagination", className: cn("ru-pagination", `ru-pagination--${size}`, className), children: /* @__PURE__ */ jsxs("ul", { className: "ru-pagination__list", children: [
+    /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "ru-pagination__btn",
+        "aria-label": "Previous page",
+        disabled: page <= 1,
+        onClick: () => go(page - 1),
+        children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+      }
+    ) }),
+    getPageTokens(page, totalPages, siblingCount).map(
+      (token) => typeof token === "number" ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "ru-pagination__btn",
+          "aria-label": `Page ${token}`,
+          "aria-current": token === page ? "page" : void 0,
+          onClick: () => go(token),
+          children: token
+        }
+      ) }, token) : /* @__PURE__ */ jsx("li", { className: "ru-pagination__ellipsis", "aria-hidden": "true", children: "…" }, token)
+    ),
+    /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "ru-pagination__btn",
+        "aria-label": "Next page",
+        disabled: page >= totalPages,
+        onClick: () => go(page + 1),
+        children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+      }
+    ) })
+  ] }) });
+}
+function Breadcrumbs({ items, separator, className }) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: cn("ru-breadcrumbs", className), children: /* @__PURE__ */ jsx("ol", { children: items.map((item, i) => {
+    const isLast = i === items.length - 1;
+    let node = item.label;
+    if (isLast) {
+      node = /* @__PURE__ */ jsx("span", { className: "ru-breadcrumbs__current", "aria-current": "page", children: item.label });
+    } else if (item.href) {
+      node = /* @__PURE__ */ jsx("a", { className: "ru-breadcrumbs__link", href: item.href, onClick: item.onClick, children: item.label });
+    } 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: [
+      /* @__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(
+      /* @__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
+    )
+  ] });
+}
+function ToastView({ toast, duration, onDismiss }) {
+  const [paused, setPaused] = useState(false);
+  const { id, variant = "default", title, description, action } = toast;
+  useEffect(() => {
+    if (paused || !Number.isFinite(duration) || duration <= 0) return;
+    const timer = setTimeout(() => onDismiss(id), duration);
+    return () => clearTimeout(timer);
+  }, [id, duration, paused, onDismiss]);
+  const Icon = variant === "default" ? null : statusIcons[variant];
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      role: "status",
+      className: cn("ru-toast", variant !== "default" && `ru-c-${variant}`),
+      onMouseEnter: () => setPaused(true),
+      onMouseLeave: () => setPaused(false),
+      children: [
+        Icon && /* @__PURE__ */ jsx("span", { className: "ru-toast__icon", children: /* @__PURE__ */ jsx(Icon, {}) }),
+        /* @__PURE__ */ jsxs("div", { className: "ru-toast__content", children: [
+          title && /* @__PURE__ */ jsx("div", { className: "ru-toast__title", children: title }),
+          description && /* @__PURE__ */ jsx("div", { className: "ru-toast__desc", children: description }),
+          action && /* @__PURE__ */ jsx("div", { className: "ru-toast__action", children: action })
+        ] }),
+        /* @__PURE__ */ jsx(CloseButton, { onClick: () => onDismiss(id), label: "Dismiss notification" })
+      ]
+    }
+  );
+}
+function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within a <ToastProvider>.");
+  return ctx;
+}
+function Kbd({ className, ...rest }) {
+  return /* @__PURE__ */ jsx("kbd", { className: cn("ru-kbd", className), ...rest });
+}
+function Pattern({ variant = "grid", size = 24, fade = true, className, style, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn("ru-pattern", `ru-pattern--${variant}`, fade && "ru-pattern--fade", className),
+      style: { "--ru-pattern-size": `${size}px`, ...style },
+      ...rest
+    }
+  );
+}
+function SpotlightCard({ color, className, style, onMouseMove, children, ...rest }) {
+  const ref = useRef(null);
+  const handleMouseMove = (e) => {
+    const el = ref.current;
+    if (el) {
+      const rect = el.getBoundingClientRect();
+      el.style.setProperty("--ru-spot-x", `${e.clientX - rect.left}px`);
+      el.style.setProperty("--ru-spot-y", `${e.clientY - rect.top}px`);
+    }
+    onMouseMove == null ? void 0 : onMouseMove(e);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("ru-card", "ru-spotlight", className),
+      style: color ? { "--ru-spot-color": color, ...style } : style,
+      onMouseMove: handleMouseMove,
+      ...rest,
+      children
+    }
+  );
+}
+export {
+  Accordion,
+  Alert,
+  Avatar,
+  AvatarGroup,
+  Badge,
+  Breadcrumbs,
+  Button,
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  Checkbox,
+  Divider,
+  Drawer,
+  Dropdown,
+  Input,
+  Kbd,
+  Modal,
+  NativeSelect,
+  Pagination,
+  Pattern,
+  Progress,
+  Radio,
+  RadioGroup,
+  Select,
+  Skeleton,
+  Spinner,
+  SpotlightCard,
+  Switch,
+  Table,
+  Tabs,
+  Textarea,
+  ToastProvider,
+  Tooltip,
+  cn,
+  useClickOutside,
+  useControllableState,
+  useDisclosure,
+  useToast
+};