@ntmats/hc-ui 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,8 +1,9 @@
 // src/index.tsx
-import { forwardRef, useId, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-function Surface({ tone = "content", className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { ...props, className: ["hc-ui-surface", className].filter(Boolean).join(" "), "data-tone": tone });
+import { cloneElement, createContext, forwardRef, Fragment, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+function Surface({ tone = "content", radius, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { ...props, className: ["hc-ui-surface", className].filter(Boolean).join(" "), "data-tone": tone, "data-radius": radius });
 }
 function SegmentedControl({
   label,
@@ -12,12 +13,24 @@ function SegmentedControl({
   density = "comfortable",
   orientation = "horizontal",
   hideLabels = false,
+  indicator = "static",
+  equalWidth = false,
+  optionWidth,
   className,
+  style,
   ...props
 }) {
   const buttons = useRef([]);
   const selectedIndex = options.findIndex((option) => option.value === value && !option.disabled);
   const tabStop = selectedIndex >= 0 ? selectedIndex : options.findIndex((option) => !option.disabled);
+  const slide = indicator === "slide";
+  const equal = slide || equalWidth || optionWidth !== void 0;
+  const knobIndex = options.findIndex((option) => option.value === value);
+  const layout = {
+    ...equal ? { "--hc-segmented-count": options.length } : {},
+    ...slide ? { "--hc-segmented-index": Math.max(knobIndex, 0) } : {},
+    ...optionWidth !== void 0 ? { "--hc-segmented-option-width": `${optionWidth}px` } : {}
+  };
   const move = (index, key) => {
     if (!["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp", "Home", "End"].includes(key)) return false;
     const direction = key === "ArrowRight" || key === "ArrowDown" ? 1 : -1;
@@ -36,7 +49,7 @@ function SegmentedControl({
     buttons.current[next]?.focus();
     return true;
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       ...props,
@@ -47,35 +60,41 @@ function SegmentedControl({
       "data-density": density,
       "data-orientation": orientation,
       "data-labels": hideLabels ? "hidden" : void 0,
-      children: options.map((option, index) => {
-        const selected = option.value === value;
-        return /* @__PURE__ */ jsxs(
-          "button",
-          {
-            ref: (element) => {
-              buttons.current[index] = element;
-            },
-            type: "button",
-            role: "radio",
-            "aria-checked": selected,
-            "aria-label": option.label,
-            title: hideLabels ? option.label : void 0,
-            disabled: option.disabled,
-            tabIndex: !option.disabled && index === tabStop ? 0 : -1,
-            className: "hc-ui-segmented__option",
-            "data-selected": selected || void 0,
-            onClick: () => !option.disabled && onChange(option.value),
-            onKeyDown: (event) => {
-              if (move(index, event.key)) event.preventDefault();
+      "data-indicator": slide ? "slide" : void 0,
+      "data-equal-width": equal || void 0,
+      style: { ...layout, ...style },
+      children: [
+        slide && knobIndex >= 0 && /* @__PURE__ */ jsx("span", { className: "hc-ui-segmented__indicator", "aria-hidden": "true" }),
+        options.map((option, index) => {
+          const selected = option.value === value;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ref: (element) => {
+                buttons.current[index] = element;
+              },
+              type: "button",
+              role: "radio",
+              "aria-checked": selected,
+              "aria-label": option.label,
+              title: hideLabels ? option.label : void 0,
+              disabled: option.disabled,
+              tabIndex: !option.disabled && index === tabStop ? 0 : -1,
+              className: "hc-ui-segmented__option",
+              "data-selected": selected || void 0,
+              onClick: () => !option.disabled && onChange(option.value),
+              onKeyDown: (event) => {
+                if (move(index, event.key)) event.preventDefault();
+              },
+              children: [
+                option.icon && /* @__PURE__ */ jsx("span", { className: "hc-ui-segmented__icon", "aria-hidden": "true", children: option.icon }),
+                !hideLabels && /* @__PURE__ */ jsx("span", { className: "hc-ui-segmented__label", children: option.label })
+              ]
             },
-            children: [
-              option.icon && /* @__PURE__ */ jsx("span", { className: "hc-ui-segmented__icon", "aria-hidden": "true", children: option.icon }),
-              !hideLabels && /* @__PURE__ */ jsx("span", { className: "hc-ui-segmented__label", children: option.label })
-            ]
-          },
-          option.value
-        );
-      })
+            option.value
+          );
+        })
+      ]
     }
   );
 }
@@ -106,7 +125,7 @@ var Button = forwardRef(function Button2({ variant = "secondary", size = "md", i
     }
   );
 });
-var IconButton = forwardRef(function IconButton2({ label, icon, size = "md", tone = "primary", selected, type = "button", title, className, ...props }, ref) {
+var IconButton = forwardRef(function IconButton2({ label, icon, size = "md", tone = "primary", variant = "muted", shape = "circle", selected, iconKey, type = "button", title, className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -119,16 +138,63 @@ var IconButton = forwardRef(function IconButton2({ label, icon, size = "md", ton
       className: classes("hc-ui-icon-button", className),
       "data-size": size,
       "data-tone": tone,
-      children: /* @__PURE__ */ jsx("span", { className: "hc-ui-icon-button__icon", "aria-hidden": "true", children: icon })
+      "data-variant": variant === "muted" ? void 0 : variant,
+      "data-shape": shape === "circle" ? void 0 : shape,
+      children: /* @__PURE__ */ jsx("span", { className: "hc-ui-icon-button__icon", "aria-hidden": "true", "data-swap": iconKey === void 0 ? void 0 : "", children: icon }, iconKey)
     }
   );
 });
-var Chip = forwardRef(function Chip2({ selected, icon, type = "button", className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxs("button", { ...props, ref, type, "aria-pressed": selected, className: classes("hc-ui-chip", className), children: [
+var glyph = (size, d) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", strokeWidth: 1.8, "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var CHEVRON_DOWN = "M6 9L12 15L18 9";
+var XMARK = "M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426";
+var visible = (node) => node !== void 0 && node !== null && node !== false && node !== "";
+var Chip = forwardRef(function Chip2({ selected, icon, size = "md", variant = "outline", applied = false, count, badge, chevron, onClear, clearLabel, type = "button", className, children, ...props }, ref) {
+  const popup = props["aria-haspopup"];
+  const withChevron = chevron ?? (popup !== void 0 && popup !== false && popup !== "false");
+  const look = {
+    "data-size": size === "md" ? void 0 : size,
+    "data-variant": variant === "outline" ? void 0 : variant,
+    "data-applied": applied || void 0
+  };
+  const content = /* @__PURE__ */ jsxs(Fragment2, { children: [
     icon && /* @__PURE__ */ jsx("span", { className: "hc-ui-chip__icon", "aria-hidden": "true", children: icon }),
-    children
+    children,
+    visible(count) && /* @__PURE__ */ jsx("span", { className: "hc-ui-chip__count", children: count }),
+    visible(badge) && /* @__PURE__ */ jsx("span", { className: "hc-ui-chip__badge", children: badge }),
+    withChevron && /* @__PURE__ */ jsx("span", { className: "hc-ui-chip__chevron", "aria-hidden": "true", children: glyph(size === "xs" ? 12 : 14, CHEVRON_DOWN) })
+  ] });
+  if (!onClear) {
+    return /* @__PURE__ */ jsx("button", { ...props, ref, type, "aria-pressed": selected, className: classes("hc-ui-chip", className), ...look, children: content });
+  }
+  const { style, id, onClick, disabled, ...rest } = props;
+  return /* @__PURE__ */ jsxs("span", { className: classes("hc-ui-chip", className), style, ...look, "data-clearable": "", "data-selected": selected || void 0, "data-disabled": disabled || void 0, children: [
+    onClick ? /* @__PURE__ */ jsx("button", { ...rest, id, ref, type, disabled, "aria-pressed": selected, className: "hc-ui-chip__main", onClick, children: content }) : /* @__PURE__ */ jsx("span", { id, className: "hc-ui-chip__main", children: content }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: "hc-ui-chip__clear", "aria-label": clearLabel, title: clearLabel, disabled, onClick: onClear, children: glyph(12, XMARK) })
   ] });
 });
+var FilterBar = forwardRef(function FilterBar2({ label, start, end, footer, layout = "auto", density = "comfortable", sticky = false, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      ref,
+      role: "group",
+      "aria-label": label,
+      className: classes("hc-ui-filter-bar", className),
+      "data-layout": layout,
+      "data-density": density === "comfortable" ? void 0 : density,
+      "data-sticky": sticky || void 0,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "hc-ui-filter-bar__line", children: [
+          start && /* @__PURE__ */ jsx("div", { className: "hc-ui-filter-bar__start", children: start }),
+          /* @__PURE__ */ jsx("div", { className: "hc-ui-filter-bar__row", children }),
+          end && /* @__PURE__ */ jsx("div", { className: "hc-ui-filter-bar__end", children: end })
+        ] }),
+        footer && /* @__PURE__ */ jsx("div", { className: "hc-ui-filter-bar__footer", children: footer })
+      ]
+    }
+  );
+});
 var Field = forwardRef(function Field2({ label, hideLabel = false, density = "comfortable", icon, end, hint, error, id, className, disabled, "aria-describedby": describedBy, ...props }, ref) {
   const generated = useId();
   const inputId = id ?? generated;
@@ -169,12 +235,1233 @@ function Skeleton({ width, height, circle = false, className, style, ...props })
     }
   );
 }
+var finite = (number) => Number.isFinite(number) ? number : 0;
+var Meter = forwardRef(function Meter2({ value, max, label, valueText, decorative = false, thickness = 4, track = "muted", cap = "round", overflow = "clamp", tone = "auto", animated = false, className, ...props }, ref) {
+  const amount = Math.max(0, finite(value));
+  const limit = Math.max(0, finite(max));
+  const over = tone === "over" || tone === "auto" && amount > limit;
+  const scale = overflow === "mark" ? Math.max(limit, amount, 1) : limit;
+  const share = scale > 0 ? Math.min(100, amount / scale * 100) : amount > 0 ? 100 : 0;
+  const marker = overflow === "mark" && amount > limit ? limit / scale * 100 : null;
+  const semantics = decorative ? { "aria-hidden": true } : {
+    role: "meter",
+    "aria-label": label,
+    "aria-valuemin": 0,
+    "aria-valuemax": limit,
+    // ARIA keeps aria-valuenow inside the range; the text carries the real amount.
+    "aria-valuenow": Math.min(amount, limit),
+    "aria-valuetext": valueText ?? `${finite(value)} / ${finite(max)}`
+  };
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...props,
+      ...semantics,
+      ref,
+      className: classes("hc-ui-meter", className),
+      "data-thickness": thickness,
+      "data-track": track,
+      "data-cap": cap,
+      "data-tone": over ? "over" : void 0,
+      "data-animated": animated || void 0,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "hc-ui-meter__fill", style: { width: `${share}%` } }),
+        marker !== null && /* @__PURE__ */ jsx("span", { className: "hc-ui-meter__limit", style: { left: `${marker}%` } })
+      ]
+    }
+  );
+});
+var checkboxIcon = (className, d) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", strokeWidth: 2.4, "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var Checkbox = forwardRef(function Checkbox2({ size = "md", indeterminate = false, className, ...props }, ref) {
+  const inputRef = useRef(null);
+  useImperativeHandle(ref, () => inputRef.current);
+  useEffect(() => {
+    if (inputRef.current) inputRef.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  return /* @__PURE__ */ jsxs("span", { className: classes("hc-ui-checkbox", className), "data-size": size, children: [
+    /* @__PURE__ */ jsx("input", { ...props, ref: inputRef, type: "checkbox", className: "hc-ui-checkbox__input" }),
+    /* @__PURE__ */ jsxs("span", { className: "hc-ui-checkbox__box", "aria-hidden": "true", children: [
+      checkboxIcon("hc-ui-checkbox__mark", "M5 13L9 17L19 7"),
+      checkboxIcon("hc-ui-checkbox__mixed", "M6 12H18")
+    ] })
+  ] });
+});
+var useIsomorphicLayoutEffect = typeof document === "undefined" ? useEffect : useLayoutEffect;
+var scrollLocks = 0;
+var restoreScroll = () => {
+};
+function lockScroll() {
+  if (scrollLocks++ === 0) {
+    const root = document.documentElement;
+    const { overflow, scrollbarGutter } = root.style;
+    const hasScrollbar = window.innerWidth > root.clientWidth;
+    root.style.overflow = "hidden";
+    if (hasScrollbar) root.style.scrollbarGutter = "stable";
+    restoreScroll = () => {
+      root.style.overflow = overflow;
+      root.style.scrollbarGutter = scrollbarGutter;
+    };
+  }
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    if (--scrollLocks === 0) restoreScroll();
+  };
+}
+function DialogMount({ onMount }) {
+  useIsomorphicLayoutEffect(onMount, []);
+  return null;
+}
+var closeGlyph = /* @__PURE__ */ jsx("svg", { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", strokeWidth: 1.8, "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var outside = (element, x, y) => {
+  const box = element.getBoundingClientRect();
+  return x < box.left || x > box.right || y < box.top || y > box.bottom;
+};
+var Dialog = forwardRef(function Dialog2({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+  actions,
+  closeLabel,
+  closeIcon,
+  size = "md",
+  dismissible = true,
+  className,
+  onClick,
+  onPointerDown,
+  "aria-describedby": describedBy,
+  ...props
+}, ref) {
+  const dialogRef = useRef(null);
+  const setRef = useCallback((node) => {
+    dialogRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }, [ref]);
+  const id = useId();
+  const titleId = `${id}-title`;
+  const descriptionId = description ? `${id}-description` : void 0;
+  const [mounted, setMounted] = useState(open);
+  const [closing, setClosing] = useState(false);
+  if (open && (!mounted || closing)) {
+    setMounted(true);
+    setClosing(false);
+  }
+  if (!open && mounted && !closing) setClosing(true);
+  const latest = useRef({ open, onClose, dismissible, closing });
+  useIsomorphicLayoutEffect(() => {
+    latest.current = { open, onClose, dismissible, closing };
+  });
+  const keepFocus = useRef(null);
+  const handleMount = useCallback(() => {
+    const dialog = document.getElementById(titleId)?.closest("dialog");
+    if (!dialog) return () => {
+    };
+    const trigger = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    if (!dialog.open) dialog.showModal();
+    const kept = keepFocus.current;
+    keepFocus.current = null;
+    if (kept instanceof HTMLElement && dialog.contains(kept)) kept.focus();
+    const unlock = lockScroll();
+    return () => {
+      unlock();
+      keepFocus.current = dialog.contains(document.activeElement) ? document.activeElement : null;
+      if (dialog.open) dialog.close();
+      queueMicrotask(() => {
+        const active = document.activeElement;
+        const lost = !active || active === document.body || dialog.contains(active);
+        if (lost && !dialog.open && trigger?.isConnected) trigger.focus({ preventScroll: true });
+      });
+    };
+  }, [titleId]);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!closing || !dialog) return;
+    let done = false;
+    const finish = () => {
+      if (done) return;
+      done = true;
+      setMounted(false);
+      setClosing(false);
+    };
+    const animations = typeof dialog.getAnimations === "function" ? dialog.getAnimations({ subtree: true }).filter((animation) => {
+      const effect = animation.effect;
+      return effect?.target === dialog && effect.getComputedTiming().endTime !== Infinity;
+    }) : [];
+    if (animations.length) Promise.all(animations.map((animation) => animation.finished)).then(finish, finish);
+    else finish();
+    return () => {
+      done = true;
+    };
+  }, [closing]);
+  const ownEvent = (event) => event.target === event.currentTarget;
+  const handleCancel = (event) => {
+    if (!ownEvent(event)) return;
+    event.preventDefault();
+    if (latest.current.dismissible && !latest.current.closing) latest.current.onClose();
+  };
+  const handleNativeClose = (event) => {
+    const dialog = event.currentTarget;
+    if (!ownEvent(event) || dialog.open || !latest.current.open || latest.current.closing) return;
+    if (latest.current.dismissible) latest.current.onClose();
+    window.setTimeout(() => {
+      if (latest.current.open && !latest.current.closing && dialog.isConnected && !dialog.open) dialog.showModal();
+    }, 0);
+  };
+  const pressedBackdrop = useRef(false);
+  const handlePointerDown = (event) => {
+    onPointerDown?.(event);
+    pressedBackdrop.current = ownEvent(event) && outside(event.currentTarget, event.clientX, event.clientY);
+  };
+  const handleClick = (event) => {
+    onClick?.(event);
+    const fromBackdrop = pressedBackdrop.current && ownEvent(event) && outside(event.currentTarget, event.clientX, event.clientY);
+    pressedBackdrop.current = false;
+    if (fromBackdrop && latest.current.dismissible && !latest.current.closing) latest.current.onClose();
+  };
+  if (!mounted) return null;
+  const hasBody = Boolean(description) || children !== void 0 && children !== null && children !== false;
+  return /* @__PURE__ */ jsxs(
+    "dialog",
+    {
+      ...props,
+      ref: setRef,
+      className: classes("hc-ui-dialog", className),
+      "data-size": size,
+      "data-closing": closing || void 0,
+      "aria-labelledby": titleId,
+      "aria-describedby": classes(descriptionId, describedBy) || void 0,
+      onCancel: handleCancel,
+      onClose: handleNativeClose,
+      onPointerDown: handlePointerDown,
+      onClick: handleClick,
+      children: [
+        /* @__PURE__ */ jsx(DialogMount, { onMount: handleMount }),
+        /* @__PURE__ */ jsxs("div", { className: "hc-ui-dialog__header", children: [
+          /* @__PURE__ */ jsx("h2", { className: "hc-ui-dialog__title", id: titleId, children: title }),
+          closeLabel && /* @__PURE__ */ jsx(IconButton, { className: "hc-ui-dialog__close", label: closeLabel, icon: closeIcon ?? closeGlyph, size: "sm", tone: "secondary", onClick: () => latest.current.onClose() })
+        ] }),
+        hasBody && /* @__PURE__ */ jsxs("div", { className: "hc-ui-dialog__body", children: [
+          description && /* @__PURE__ */ jsx("p", { className: "hc-ui-dialog__description", id: descriptionId, children: description }),
+          children
+        ] }),
+        actions && /* @__PURE__ */ jsx("div", { className: "hc-ui-dialog__actions", children: actions })
+      ]
+    }
+  );
+});
+var SHEET_EASE = "cubic-bezier(0.32, 0.72, 0, 1)";
+var NO_DRAG = 'input, textarea, select, [contenteditable="true"], [data-hc-sheet-nodrag]';
+function useSheetDrag(sheet, latest) {
+  useEffect(() => {
+    const el = sheet;
+    if (!el) return;
+    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)");
+    let startX = 0;
+    let startY = 0;
+    let lastY = 0;
+    let lastT = 0;
+    let velocity = 0;
+    let tracking = false;
+    let dragging = false;
+    let inHandle = false;
+    let scroller = null;
+    const timers = /* @__PURE__ */ new Set();
+    const later = (run, ms) => {
+      const id = window.setTimeout(() => {
+        timers.delete(id);
+        run();
+      }, ms);
+      timers.add(id);
+    };
+    const expanded = () => el.hasAttribute("data-expanded");
+    const findScroller = (node) => {
+      while (node && node !== el.parentElement) {
+        const overflowY = getComputedStyle(node).overflowY;
+        if ((overflowY === "auto" || overflowY === "scroll") && node.scrollHeight > node.clientHeight + 1) return node;
+        if (node === el) break;
+        node = node.parentElement;
+      }
+      return null;
+    };
+    const settle = () => {
+      el.style.transition = reduce.matches ? "none" : `translate 320ms ${SHEET_EASE}`;
+      el.style.translate = "";
+      later(() => {
+        el.style.transition = "";
+      }, 340);
+    };
+    const onStart = (event) => {
+      if (event.touches.length !== 1 || getComputedStyle(el).getPropertyValue("--hc-sheet-drag").trim() !== "on") return;
+      const touch = event.touches[0];
+      const target = event.target;
+      if (target === el && outside(el, touch.clientX, touch.clientY)) return;
+      if (target.closest?.("dialog") !== el || target.closest(NO_DRAG)) return;
+      startX = touch.clientX;
+      startY = lastY = touch.clientY;
+      lastT = performance.now();
+      velocity = 0;
+      dragging = false;
+      tracking = true;
+      inHandle = Boolean(target.closest?.("[data-hc-sheet-handle]")) || touch.clientY - el.getBoundingClientRect().top < 64;
+      scroller = inHandle ? null : findScroller(target);
+    };
+    const onMove = (event) => {
+      if (!tracking) return;
+      const touch = event.touches[0];
+      const dy = touch.clientY - startY;
+      const dx = touch.clientX - startX;
+      if (!dragging) {
+        if (Math.abs(dx) > 8 && Math.abs(dx) > Math.abs(dy)) {
+          tracking = false;
+          return;
+        }
+        if (dy < -4 && !(inHandle && !expanded())) {
+          tracking = false;
+          return;
+        }
+        if (Math.abs(dy) < 8) return;
+        if (scroller && scroller.scrollTop > 0) {
+          tracking = false;
+          return;
+        }
+        dragging = true;
+        startY = touch.clientY;
+        el.style.transition = "none";
+      }
+      if (event.cancelable) event.preventDefault();
+      const now = performance.now();
+      velocity = (touch.clientY - lastY) / Math.max(1, now - lastT);
+      lastY = touch.clientY;
+      lastT = now;
+      const offset = touch.clientY - startY;
+      el.style.translate = `0 ${offset > 0 ? offset : offset / 6}px`;
+    };
+    const onEnd = () => {
+      if (!tracking) return;
+      tracking = false;
+      if (!dragging) return;
+      dragging = false;
+      const dy = lastY - startY;
+      const height = el.getBoundingClientRect().height || 1;
+      if (dy < -40 || velocity < -0.5) {
+        el.setAttribute("data-expanded", "");
+        settle();
+        return;
+      }
+      const goingDown = dy > height * 0.2 || velocity > 0.5 && dy > 20;
+      if (goingDown && expanded()) {
+        el.removeAttribute("data-expanded");
+        settle();
+        return;
+      }
+      if (!goingDown || !latest.current.dismissible) {
+        settle();
+        return;
+      }
+      el.style.transition = reduce.matches ? "none" : `translate 220ms ${SHEET_EASE}`;
+      el.style.translate = "0 105%";
+      el.setAttribute("data-dismissing", "");
+      later(() => latest.current.onClose(), reduce.matches ? 0 : 200);
+      later(() => {
+        if (!el.isConnected || el.hasAttribute("data-closing")) return;
+        el.removeAttribute("data-dismissing");
+        el.style.transition = reduce.matches ? "none" : `translate 320ms ${SHEET_EASE}`;
+        el.style.translate = "";
+      }, 900);
+    };
+    el.addEventListener("touchstart", onStart, { passive: true });
+    el.addEventListener("touchmove", onMove, { passive: false });
+    el.addEventListener("touchend", onEnd);
+    el.addEventListener("touchcancel", onEnd);
+    return () => {
+      el.removeEventListener("touchstart", onStart);
+      el.removeEventListener("touchmove", onMove);
+      el.removeEventListener("touchend", onEnd);
+      el.removeEventListener("touchcancel", onEnd);
+      timers.forEach((id) => window.clearTimeout(id));
+    };
+  }, [sheet, latest]);
+}
+var Sheet = forwardRef(function Sheet2({ presentation = "auto", width = 440, footer, dismissible = true, onClose, className, style, ...props }, ref) {
+  const [node, setNode] = useState(null);
+  const setRef = useCallback((element) => {
+    setNode(element);
+    setRefs(element, ref);
+  }, [ref]);
+  const latest = useRef({ onClose, dismissible });
+  useIsomorphicLayoutEffect(() => {
+    latest.current = { onClose, dismissible };
+  });
+  useSheetDrag(node, latest);
+  const sized = width === 440 ? style : { ...style, "--hc-sheet-width": `${width}px` };
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      ...props,
+      ref: setRef,
+      size: "md",
+      actions: footer,
+      dismissible,
+      onClose,
+      className: classes("hc-ui-sheet", className),
+      style: sized,
+      "data-presentation": presentation
+    }
+  );
+});
+function useRovingRadios(options, value) {
+  const buttons = useRef([]);
+  const [focusIndex, setFocusIndex] = useState(null);
+  const chosen = options.findIndex((option) => option.value === value && !option.disabled);
+  const fallback = chosen >= 0 ? chosen : options.findIndex((option) => !option.disabled);
+  const tabStop = focusIndex !== null && options[focusIndex] && !options[focusIndex].disabled ? focusIndex : fallback;
+  const onKeyDown = (index) => (event) => {
+    const enabled = options.map((option, at) => option.disabled ? -1 : at).filter((at) => at >= 0);
+    if (!enabled.length) return;
+    const position = enabled.indexOf(index);
+    let next;
+    if (event.key === "ArrowDown" || event.key === "ArrowRight") next = enabled[(position + 1) % enabled.length];
+    else if (event.key === "ArrowUp" || event.key === "ArrowLeft") next = enabled[(position - 1 + enabled.length) % enabled.length];
+    else if (event.key === "Home") next = enabled[0];
+    else if (event.key === "End") next = enabled[enabled.length - 1];
+    else return;
+    event.preventDefault();
+    setFocusIndex(next);
+    buttons.current[next]?.focus();
+  };
+  const item = (index) => ({
+    ref: (element) => {
+      buttons.current[index] = element;
+    },
+    tabIndex: index === tabStop ? 0 : -1,
+    onKeyDown: onKeyDown(index),
+    onFocus: () => setFocusIndex(index)
+  });
+  return item;
+}
+function SheetOptions({ label, options, value, onChange, variant = "card", className, ...props }) {
+  const item = useRovingRadios(options, value);
+  const list = variant === "list";
+  return /* @__PURE__ */ jsx("div", { ...props, className: classes("hc-ui-sheet-options", className), role: "radiogroup", "aria-label": label, "data-variant": list ? "list" : void 0, children: options.map((option, index) => {
+    const on = option.value === value;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ...item(index),
+        type: "button",
+        role: "radio",
+        "aria-checked": on,
+        disabled: option.disabled,
+        className: "hc-ui-sheet-options__row",
+        "data-selected": on || void 0,
+        onClick: () => onChange(option.value),
+        children: [
+          option.icon && /* @__PURE__ */ jsx("span", { className: "hc-ui-sheet-options__icon", "aria-hidden": "true", children: option.icon }),
+          /* @__PURE__ */ jsxs("span", { className: "hc-ui-sheet-options__text", children: [
+            /* @__PURE__ */ jsx("span", { className: "hc-ui-sheet-options__label", children: option.label }),
+            option.hint && /* @__PURE__ */ jsx("span", { className: "hc-ui-sheet-options__hint", children: option.hint })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "hc-ui-sheet-options__check", "aria-hidden": "true", children: on && /* @__PURE__ */ jsx("svg", { width: list ? 20 : 18, height: list ? 20 : 18, viewBox: "0 0 24 24", fill: "none", strokeWidth: list ? 1.8 : 2.4, "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M5 13L9 17L19 7", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+        ]
+      },
+      option.value
+    );
+  }) });
+}
+function SheetChips({ label, options, value, onChange, className, ...props }) {
+  const item = useRovingRadios(options, value);
+  return /* @__PURE__ */ jsx("div", { ...props, className: classes("hc-ui-sheet-chips", className), role: "radiogroup", "aria-label": label, children: options.map((option, index) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...item(index),
+      type: "button",
+      role: "radio",
+      "aria-checked": option.value === value,
+      disabled: option.disabled,
+      className: "hc-ui-chip",
+      onClick: () => onChange(option.value),
+      children: option.label
+    },
+    option.value
+  )) });
+}
+var GAP = 4;
+function boundaryOf(anchor, clip) {
+  const box = { top: 0, left: 0, right: window.innerWidth, bottom: window.innerHeight };
+  if (!clip) return box;
+  for (let node = anchor.parentElement; node && node !== document.documentElement; node = node.parentElement) {
+    const style = getComputedStyle(node);
+    if (style.overflowX === "visible" && style.overflowY === "visible") continue;
+    const rect = node.getBoundingClientRect();
+    box.top = Math.max(box.top, rect.top);
+    box.left = Math.max(box.left, rect.left);
+    box.right = Math.min(box.right, rect.right);
+    box.bottom = Math.min(box.bottom, rect.bottom);
+  }
+  return box;
+}
+function placePopup(trigger, size, boundary, side, align) {
+  const room = { bottom: boundary.bottom - trigger.bottom - GAP, top: trigger.top - boundary.top - GAP };
+  const other = side === "bottom" ? "top" : "bottom";
+  const finalSide = size.height > room[side] && room[other] > room[side] ? other : side;
+  const fits = (edge) => edge === "end" ? trigger.right - size.width >= boundary.left : trigger.left + size.width <= boundary.right;
+  const finalAlign = !fits(align) && fits(align === "end" ? "start" : "end") ? align === "end" ? "start" : "end" : align;
+  return { side: finalSide, align: finalAlign };
+}
+var layers = [];
+function themeOf(element) {
+  const scoped = element?.closest("[data-theme]")?.getAttribute("data-theme");
+  if (scoped === "light" || scoped === "dark") return scoped;
+  const classed = element?.closest(".dark, .light");
+  return classed ? classed.classList.contains("dark") ? "dark" : "light" : void 0;
+}
+var setRefs = (node, ...refs) => {
+  for (const ref of refs) {
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }
+};
+function usePopup({ kind, trigger, open: openProp, defaultOpen = false, onOpenChange, side = "bottom", align = "end", portal = false, theme, contentId, onShown }) {
+  const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+  const open = openProp ?? uncontrolled;
+  const generated = useId();
+  const id = contentId ?? `${generated}-popup`;
+  const triggerRef = useRef(null);
+  const anchorRef = useRef(null);
+  const contentRef = useRef(null);
+  const focusAfter = useRef("none");
+  const reason = useRef("first");
+  const [placement, setPlacement] = useState({ side, align });
+  const [container, setContainer] = useState(null);
+  const latest = useRef({ open, onOpenChange, onShown });
+  useIsomorphicLayoutEffect(() => {
+    latest.current = { open, onOpenChange, onShown };
+  });
+  const setOpen = useCallback((next, after = "none") => {
+    if (next === latest.current.open) return;
+    if (!next) focusAfter.current = after;
+    if (openProp === void 0) setUncontrolled(next);
+    latest.current.onOpenChange?.(next);
+  }, [openProp]);
+  const close = useCallback((after = "trigger") => setOpen(false, after), [setOpen]);
+  const show = (why) => {
+    reason.current = why;
+    setOpen(true);
+  };
+  useIsomorphicLayoutEffect(() => {
+    if (!open || !portal) {
+      setContainer(null);
+      return;
+    }
+    const element = portal instanceof HTMLElement ? portal : triggerRef.current?.closest("dialog[open]") ?? document.body;
+    setContainer({ element, theme: theme ?? themeOf(triggerRef.current) });
+  }, [open, portal, theme]);
+  const place = useCallback(() => {
+    const content = contentRef.current;
+    const anchor = anchorRef.current;
+    if (!content || !anchor) return;
+    const triggerBox = (triggerRef.current ?? anchor).getBoundingClientRect();
+    const size = { width: content.offsetWidth, height: content.offsetHeight };
+    if (!portal) {
+      setPlacement(placePopup(anchor.getBoundingClientRect(), size, boundaryOf(anchor, true), side, align));
+      return;
+    }
+    const next = placePopup(triggerBox, size, boundaryOf(anchor, false), side, align);
+    const style = content.style;
+    style.top = "0px";
+    style.left = "0px";
+    const origin = content.getBoundingClientRect();
+    const top = next.side === "bottom" ? triggerBox.bottom + GAP : triggerBox.top - GAP - size.height;
+    const left = next.align === "end" ? triggerBox.right - size.width : triggerBox.left;
+    style.top = `${top - origin.top}px`;
+    style.left = `${left - origin.left}px`;
+    setPlacement({ ...next, top: top - origin.top, left: left - origin.left });
+  }, [portal, side, align]);
+  const ready = open && (!portal || container !== null);
+  useIsomorphicLayoutEffect(() => {
+    if (!ready) return;
+    place();
+    const content = contentRef.current;
+    if (content) latest.current.onShown?.(content, reason.current);
+  }, [ready]);
+  useIsomorphicLayoutEffect(() => {
+    if (!ready) setPlacement({ side, align });
+  }, [ready, side, align]);
+  const handlers = useRef({ close, place });
+  useIsomorphicLayoutEffect(() => {
+    handlers.current = { close, place };
+  });
+  useEffect(() => {
+    if (!ready) return;
+    const layer = { content: () => contentRef.current };
+    layers.push(layer);
+    const isTop = () => layers[layers.length - 1] === layer;
+    const onKey = (event) => {
+      if (event.key !== "Escape" || !isTop() || event.defaultPrevented) return;
+      event.preventDefault();
+      event.stopPropagation();
+      handlers.current.close("trigger");
+    };
+    const onPointer = (event) => {
+      const target = event.target;
+      if (anchorRef.current?.contains(target) || contentRef.current?.contains(target)) return;
+      const index = layers.indexOf(layer);
+      if (layers.slice(index + 1).some((other) => other.content()?.contains(target))) return;
+      handlers.current.close("none");
+    };
+    const onMove = () => handlers.current.place();
+    document.addEventListener("keydown", onKey, true);
+    document.addEventListener("pointerdown", onPointer, true);
+    window.addEventListener("resize", onMove);
+    if (portal) window.addEventListener("scroll", onMove, true);
+    return () => {
+      layers.splice(layers.indexOf(layer), 1);
+      document.removeEventListener("keydown", onKey, true);
+      document.removeEventListener("pointerdown", onPointer, true);
+      window.removeEventListener("resize", onMove);
+      window.removeEventListener("scroll", onMove, true);
+    };
+  }, [ready, portal]);
+  useIsomorphicLayoutEffect(() => {
+    if (open) return;
+    const after = focusAfter.current;
+    focusAfter.current = "none";
+    const active = document.activeElement;
+    const lost = !active || active === document.body;
+    if (after === "trigger" || after === "if-lost" && lost) triggerRef.current?.focus({ preventScroll: true });
+  }, [open]);
+  const triggerProps = {
+    ref: (node) => {
+      triggerRef.current = node;
+    },
+    "aria-haspopup": kind,
+    "aria-expanded": open,
+    "aria-controls": open ? id : void 0,
+    onClick: (event) => {
+      if (event.defaultPrevented) return;
+      if (open) close("none");
+      else show(event.detail === 0 ? "first" : "pointer");
+    },
+    onKeyDown: (event) => {
+      if (event.defaultPrevented || kind !== "menu") return;
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        show(event.key === "ArrowUp" ? "last" : "first");
+      }
+    }
+  };
+  let triggerNode;
+  if (typeof trigger === "function") triggerNode = trigger(triggerProps, { open });
+  else {
+    const own = trigger.props;
+    const elementRef = trigger.ref;
+    triggerNode = cloneElement(trigger, {
+      ...triggerProps,
+      ref: (node) => setRefs(node, triggerProps.ref, elementRef),
+      onClick: (event) => {
+        own.onClick?.(event);
+        triggerProps.onClick(event);
+      },
+      onKeyDown: (event) => {
+        own.onKeyDown?.(event);
+        triggerProps.onKeyDown(event);
+      }
+    });
+  }
+  const contentAttributes = {
+    id,
+    "data-side": placement.side,
+    "data-align": placement.align,
+    "data-portal": portal ? "" : void 0,
+    style: portal ? { top: placement.top ?? 0, left: placement.left ?? 0, right: "auto", bottom: "auto" } : void 0
+  };
+  const wrap = (content) => {
+    if (!open) return null;
+    if (!portal) return content;
+    if (!container) return null;
+    return createPortal(/* @__PURE__ */ jsx("div", { className: "hc-ui-portal", "data-hc-ds": "", "data-theme": container.theme, children: content }), container.element);
+  };
+  return { open, close, triggerNode, anchorRef, contentRef, contentAttributes, wrap, triggerRef };
+}
+var mergeStyle = (base, own) => base || own ? { ...own, ...base } : void 0;
+var MenuContext = createContext(null);
+var RadioContext = createContext(null);
+var ITEM_SELECTOR = '[role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"]';
+var itemsOf = (menu) => [...menu.querySelectorAll(ITEM_SELECTOR)].filter((item) => !item.disabled && item.closest('[role="menu"]') === menu);
+var itemText = (item) => (item.querySelector(".hc-ui-menu__text")?.firstChild?.textContent ?? item.textContent ?? "").trim().toLocaleLowerCase();
+var Menu = forwardRef(function Menu2({ label, trigger, children, open, defaultOpen, onOpenChange, side, align, portal, theme, anchorClassName, className, style, id, onKeyDown, ...props }, ref) {
+  const typed = useRef({ text: "", at: 0 });
+  const popup = usePopup({
+    kind: "menu",
+    trigger,
+    open,
+    defaultOpen,
+    onOpenChange,
+    side,
+    align,
+    portal,
+    theme,
+    contentId: id,
+    onShown: (menu, why) => {
+      typed.current = { text: "", at: 0 };
+      const items = itemsOf(menu);
+      const selected = items.find((item) => item.getAttribute("role") === "menuitemradio" && item.getAttribute("aria-checked") === "true");
+      (why === "last" ? items[items.length - 1] : selected ?? items[0])?.focus({ preventScroll: true });
+    }
+  });
+  const { close } = popup;
+  const context = useMemo(() => ({ close }), [close]);
+  useIsomorphicLayoutEffect(() => {
+    const menu = popup.contentRef.current;
+    const active = document.activeElement;
+    const lost = !active || active === document.body || menu?.contains(active) && active.disabled;
+    if (popup.open && menu && lost) itemsOf(menu)[0]?.focus({ preventScroll: true });
+  });
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    const menu = event.currentTarget;
+    const items = itemsOf(menu);
+    const current = items.indexOf(document.activeElement);
+    const focus = (index) => items[(index + items.length) % items.length]?.focus();
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        focus(current + 1);
+        return;
+      case "ArrowUp":
+        event.preventDefault();
+        focus(current < 0 ? -1 : current - 1);
+        return;
+      case "Home":
+        event.preventDefault();
+        focus(0);
+        return;
+      case "End":
+        event.preventDefault();
+        focus(-1);
+        return;
+      case "Tab":
+        popup.triggerRef.current?.focus({ preventScroll: true });
+        close("none");
+        return;
+    }
+    if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey || !items.length) return;
+    const now = Date.now();
+    const typing = typed.current.text !== "" && now - typed.current.at <= 500;
+    if (event.key === " " && !typing) return;
+    event.preventDefault();
+    const key = event.key.toLocaleLowerCase();
+    typed.current.text = typing ? typed.current.text + key : key;
+    typed.current.at = now;
+    const query = [...typed.current.text].every((letter) => letter === key) ? key : typed.current.text;
+    const start = query.length === 1 ? current + 1 : Math.max(current, 0);
+    for (let step = 0; step < items.length; step += 1) {
+      const item = items[(start + step) % items.length];
+      if (itemText(item).startsWith(query)) {
+        item.focus();
+        break;
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: classes("hc-ui-popup-anchor", anchorClassName), ref: popup.anchorRef, children: [
+    popup.triggerNode,
+    popup.wrap(
+      /* @__PURE__ */ jsx(MenuContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...props,
+          ...popup.contentAttributes,
+          style: mergeStyle(popup.contentAttributes.style, style),
+          ref: (node) => setRefs(node, popup.contentRef, ref),
+          role: "menu",
+          "aria-label": label,
+          tabIndex: -1,
+          className: classes("hc-ui-menu", className),
+          onKeyDown: handleKeyDown,
+          children
+        }
+      ) })
+    )
+  ] });
+});
+function useMenu(name) {
+  const menu = useContext(MenuContext);
+  if (!menu) throw new Error(`${name} must be inside a Menu`);
+  return menu;
+}
+var checkGlyph = /* @__PURE__ */ jsx("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", strokeWidth: 1.8, "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M5 13L9 17L19 7", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var MenuRow = forwardRef(function MenuRow2({ icon, hint, danger, end, role, onChoose, className, children, type = "button", onClick, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...props,
+      ref,
+      type,
+      role,
+      tabIndex: -1,
+      className: classes("hc-ui-menu__item", className),
+      "data-danger": danger || void 0,
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) onChoose(event);
+      },
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "hc-ui-menu__text", children: [
+          children,
+          hint && /* @__PURE__ */ jsx("small", { className: "hc-ui-menu__hint", children: hint })
+        ] }),
+        end,
+        icon && /* @__PURE__ */ jsx("span", { className: "hc-ui-menu__icon", "aria-hidden": "true", children: icon })
+      ]
+    }
+  );
+});
+var MenuItem = forwardRef(function MenuItem2({ onSelect, ...props }, ref) {
+  const menu = useMenu("MenuItem");
+  return /* @__PURE__ */ jsx(MenuRow, { ...props, ref, role: "menuitem", onChoose: (event) => {
+    onSelect?.(event);
+    if (!event.defaultPrevented) menu.close("if-lost");
+  } });
+});
+function MenuRadioGroup({ value, onValueChange, label, className, children, ...props }) {
+  const context = useMemo(() => ({ value, onValueChange }), [value, onValueChange]);
+  return /* @__PURE__ */ jsx(RadioContext.Provider, { value: context, children: /* @__PURE__ */ jsx("div", { ...props, role: "group", "aria-label": label, className: classes("hc-ui-menu__group", className), children }) });
+}
+var MenuItemRadio = forwardRef(function MenuItemRadio2({ value, ...props }, ref) {
+  const menu = useMenu("MenuItemRadio");
+  const group = useContext(RadioContext);
+  if (!group) throw new Error("MenuItemRadio must be inside a MenuRadioGroup");
+  const checked = group.value === value;
+  return /* @__PURE__ */ jsx(
+    MenuRow,
+    {
+      ...props,
+      ref,
+      role: "menuitemradio",
+      "aria-checked": checked,
+      end: checked ? /* @__PURE__ */ jsx("span", { className: "hc-ui-menu__check", children: checkGlyph }) : void 0,
+      onChoose: () => {
+        group.onValueChange(value);
+        menu.close("trigger");
+      }
+    }
+  );
+});
+var MenuItemCheckbox = forwardRef(function MenuItemCheckbox2({ checked, onCheckedChange, closeOnSelect = false, ...props }, ref) {
+  const menu = useMenu("MenuItemCheckbox");
+  return /* @__PURE__ */ jsx(
+    MenuRow,
+    {
+      ...props,
+      ref,
+      role: "menuitemcheckbox",
+      "aria-checked": checked,
+      end: checked ? /* @__PURE__ */ jsx("span", { className: "hc-ui-menu__check", children: checkGlyph }) : void 0,
+      onChoose: () => {
+        onCheckedChange(!checked);
+        if (closeOnSelect) menu.close("trigger");
+      }
+    }
+  );
+});
+function MenuSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { ...props, role: "separator", className: classes("hc-ui-menu__separator", className) });
+}
+function MenuLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { ...props, className: classes("hc-ui-menu__label", className) });
+}
+function SortMenu({ label, value, options, onChange, applied = false, size = "sm", triggerClassName, ...props }) {
+  const current = options.find((option) => option.value === value)?.label;
+  return /* @__PURE__ */ jsx(
+    Menu,
+    {
+      ...props,
+      label,
+      trigger: /* @__PURE__ */ jsx(Chip, { size, applied, className: triggerClassName, "aria-label": current === void 0 ? label : `${label}: ${current}`, children: current }),
+      children: /* @__PURE__ */ jsx(MenuRadioGroup, { value, onValueChange: onChange, children: options.map((option) => /* @__PURE__ */ jsx(MenuItemRadio, { value: option.value, hint: option.hint, disabled: option.disabled, children: option.label }, option.value)) })
+    }
+  );
+}
+var Popover = forwardRef(function Popover2({ label, trigger, children, autoFocus = false, open, defaultOpen, onOpenChange, side, align, portal, theme, anchorClassName, className, style, id, ...props }, ref) {
+  const popup = usePopup({
+    kind: "dialog",
+    trigger,
+    open,
+    defaultOpen,
+    onOpenChange,
+    side,
+    align,
+    portal,
+    theme,
+    contentId: id,
+    onShown: (content) => {
+      if (!autoFocus) return;
+      content.querySelector('button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])')?.focus({ preventScroll: true });
+    }
+  });
+  const close = useCallback(() => popup.close("trigger"), [popup.close]);
+  return /* @__PURE__ */ jsxs("div", { className: classes("hc-ui-popup-anchor", anchorClassName), ref: popup.anchorRef, children: [
+    popup.triggerNode,
+    popup.wrap(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...props,
+          ...popup.contentAttributes,
+          style: mergeStyle(popup.contentAttributes.style, style),
+          ref: (node) => setRefs(node, popup.contentRef, ref),
+          role: "dialog",
+          "aria-label": label,
+          tabIndex: -1,
+          className: classes("hc-ui-popover", className),
+          children: typeof children === "function" ? children({ close }) : children
+        }
+      )
+    )
+  ] });
+});
+var arrowGlyph = (up) => glyph(12, up ? "M12 21L12 3M12 3L20.5 11.5M12 3L3.5 11.5" : "M12 3L12 21M12 21L20.5 12.5M12 21L3.5 12.5");
+function TableInner({ columns, rows, rowKey, sort, onSort, stickyHeader = false, onRowClick, selectedKey, className, ...props }, ref) {
+  const alignOf = (column) => column.align ?? (column.numeric ? "end" : "start");
+  const cellLook = (column) => ({
+    className: column.className,
+    "data-align": alignOf(column),
+    "data-numeric": column.numeric || void 0,
+    "data-tone": column.tone
+  });
+  const rowHeaderKey = columns.find((column) => column.rowHeader)?.key;
+  return /* @__PURE__ */ jsxs("table", { ...props, ref, className: classes("hc-ui-table", className), "data-sticky-header": stickyHeader || void 0, "data-clickable": onRowClick ? "" : void 0, children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => {
+      const direction = column.sortable ? sort && sort.key === column.key ? sort.direction : "none" : void 0;
+      return /* @__PURE__ */ jsx(
+        "th",
+        {
+          scope: "col",
+          ...cellLook(column),
+          "aria-sort": direction,
+          style: column.width === void 0 ? void 0 : { width: column.width },
+          children: column.sortable ? /* @__PURE__ */ jsxs("button", { type: "button", className: "hc-ui-table__sort", onClick: () => onSort?.(column.key), children: [
+            column.header,
+            direction !== "none" && arrowGlyph(direction === "ascending")
+          ] }) : column.header
+        },
+        column.key
+      );
+    }) }) }),
+    /* @__PURE__ */ jsx("tbody", { children: rows.map((row, index) => {
+      const key = rowKey(row, index);
+      const selected = selectedKey !== void 0 && selectedKey !== null && key === selectedKey;
+      const press = onRowClick && (() => onRowClick(row, index));
+      return /* @__PURE__ */ jsx("tr", { onClick: press, "data-selected": selected || void 0, children: columns.map((column) => {
+        const content = column.cell(row, index);
+        if (!column.rowHeader) return /* @__PURE__ */ jsx("td", { ...cellLook(column), children: content }, column.key);
+        return /* @__PURE__ */ jsx("th", { scope: "row", ...cellLook(column), children: press && column.key === rowHeaderKey ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "hc-ui-table__row-button",
+            "aria-current": selected || void 0,
+            onClick: (event) => {
+              event.stopPropagation();
+              press();
+            },
+            children: content
+          }
+        ) : content }, column.key);
+      }) }, key);
+    }) })
+  ] });
+}
+var Table = forwardRef(TableInner);
+var Heading = ({ level, ...props }) => {
+  const Tag = `h${level}`;
+  return /* @__PURE__ */ jsx(Tag, { ...props });
+};
+var PageHeader = forwardRef(function PageHeader2({ title, level = 1, count, actions, visuallyHidden = false, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("header", { ...props, ref, className: classes("hc-ui-page-header", className), "data-visually-hidden": visuallyHidden || void 0, children: [
+    /* @__PURE__ */ jsxs(Heading, { level, className: "hc-ui-page-header__title", children: [
+      title,
+      visible(count) && count !== 0 && /* @__PURE__ */ jsxs(Fragment2, { children: [
+        " ",
+        /* @__PURE__ */ jsx("small", { className: "hc-ui-page-header__count", children: count })
+      ] })
+    ] }),
+    actions && /* @__PURE__ */ jsx("div", { className: "hc-ui-page-header__actions", children: actions })
+  ] });
+});
+var navArrow = glyph(14, "M9 6L15 12L9 18");
+var PanelHeader = forwardRef(function PanelHeader2({ title, level = 2, variant = "bar", eyebrow, subtitle, subtitleInline = false, icon, trail, trailLabel, actions, onClose, closeLabel, closeTitle, closeIcon, className, ...props }, ref) {
+  const steps = trail && trail.length > 0 ? trail : null;
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      ...props,
+      ref,
+      className: classes("hc-ui-panel-header", className),
+      "data-variant": variant,
+      "data-subtitle": subtitle && subtitleInline ? "inline" : void 0,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "hc-ui-panel-header__icon", "aria-hidden": "true", children: icon }),
+        steps ? /* @__PURE__ */ jsx("nav", { className: "hc-ui-panel-header__trail", "aria-label": trailLabel, children: steps.map((step, index) => {
+          const last = index === steps.length - 1;
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            index > 0 && navArrow,
+            last ? /* @__PURE__ */ jsx(Heading, { level, className: "hc-ui-panel-header__title", "aria-current": "location", children: step.label }) : step.onSelect ? /* @__PURE__ */ jsx("button", { type: "button", className: "hc-ui-panel-header__step", onClick: step.onSelect, children: step.label }) : /* @__PURE__ */ jsx("strong", { className: "hc-ui-panel-header__title", children: step.label })
+          ] }, `${index}:${step.label}`);
+        }) }) : /* @__PURE__ */ jsxs("div", { className: "hc-ui-panel-header__text", children: [
+          eyebrow && /* @__PURE__ */ jsx("p", { className: "hc-ui-panel-header__eyebrow", children: eyebrow }),
+          /* @__PURE__ */ jsx(Heading, { level, className: "hc-ui-panel-header__title", children: title }),
+          subtitle && /* @__PURE__ */ jsx("p", { className: "hc-ui-panel-header__subtitle", children: subtitle })
+        ] }),
+        actions && /* @__PURE__ */ jsx("div", { className: "hc-ui-panel-header__actions", children: actions }),
+        onClose && /* @__PURE__ */ jsx("button", { type: "button", className: "hc-ui-panel-header__close", onClick: onClose, "aria-label": closeLabel, title: closeTitle ?? closeLabel, children: closeIcon ?? glyph(18, XMARK) })
+      ]
+    }
+  );
+});
+var ListRow = forwardRef(function ListRow2({ type = "button", className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("button", { ...props, ref, type, className: classes("hc-ui-list-row", className) });
+});
+var searchGlyph = /* @__PURE__ */ jsxs("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", strokeWidth: 1.8, "aria-hidden": "true", focusable: "false", children: [
+  /* @__PURE__ */ jsx("path", { d: "M17 17L21 21", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 11C3 15.4183 6.58172 19 11 19C13.213 19 15.2161 18.1015 16.6644 16.6493C18.1077 15.2022 19 13.2053 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var CommandPalette = forwardRef(function CommandPalette2({
+  open,
+  onClose,
+  label,
+  inputLabel,
+  placeholder,
+  query,
+  onQueryChange,
+  groups,
+  searchIcon,
+  loading,
+  empty,
+  selectHint,
+  altHint,
+  hints,
+  listClassName,
+  className,
+  onClick,
+  onPointerDown,
+  ...props
+}, ref) {
+  const dialogRef = useRef(null);
+  const inputRef = useRef(null);
+  const listRef = useRef(null);
+  const setRef = useCallback((node) => setRefs(node, dialogRef, ref), [ref]);
+  const id = useId();
+  const listId = `${id}-list`;
+  const optionId = (index2) => `${id}-option-${index2}`;
+  const items = useMemo(() => groups.flatMap((group) => group.items), [groups]);
+  const [active, setActive] = useState(0);
+  const [seen, setSeen] = useState({ query, open });
+  if (seen.query !== query || seen.open !== open) {
+    setSeen({ query, open });
+    if (active !== 0) setActive(0);
+  }
+  const current = items.length ? Math.min(active, items.length - 1) : -1;
+  const latest = useRef({ open, onClose });
+  useIsomorphicLayoutEffect(() => {
+    latest.current = { open, onClose };
+  });
+  useIsomorphicLayoutEffect(() => {
+    const dialog = dialogRef.current;
+    if (!open || !dialog) return;
+    const trigger = document.activeElement instanceof HTMLElement && !dialog.contains(document.activeElement) ? document.activeElement : null;
+    if (!dialog.open) dialog.showModal();
+    inputRef.current?.focus();
+    const unlock = lockScroll();
+    return () => {
+      unlock();
+      if (dialog.open) dialog.close();
+      queueMicrotask(() => {
+        const focused = document.activeElement;
+        const lost = !focused || focused === document.body || dialog.contains(focused);
+        if (lost && !dialog.open && trigger?.isConnected) trigger.focus({ preventScroll: true });
+      });
+    };
+  }, [open]);
+  useEffect(() => {
+    if (open && current >= 0) listRef.current?.querySelector('[aria-selected="true"]')?.scrollIntoView({ block: "nearest" });
+  }, [open, current]);
+  const ownEvent = (event) => event.target === event.currentTarget;
+  const handleCancel = (event) => {
+    if (!ownEvent(event)) return;
+    event.preventDefault();
+    latest.current.onClose();
+  };
+  const handleNativeClose = (event) => {
+    const dialog = event.currentTarget;
+    if (!ownEvent(event) || dialog.open || !latest.current.open) return;
+    latest.current.onClose();
+    window.setTimeout(() => {
+      if (latest.current.open && dialog.isConnected && !dialog.open) {
+        dialog.showModal();
+        inputRef.current?.focus();
+      }
+    }, 0);
+  };
+  const pressedBackdrop = useRef(false);
+  const handlePointerDown = (event) => {
+    onPointerDown?.(event);
+    pressedBackdrop.current = ownEvent(event) && outside(event.currentTarget, event.clientX, event.clientY);
+  };
+  const handleClick = (event) => {
+    onClick?.(event);
+    const fromBackdrop = pressedBackdrop.current && ownEvent(event) && outside(event.currentTarget, event.clientX, event.clientY);
+    pressedBackdrop.current = false;
+    if (fromBackdrop) latest.current.onClose();
+  };
+  const handleKeyDown = (event) => {
+    const count = items.length;
+    if (!count || event.nativeEvent.isComposing || event.altKey) return;
+    let next = null;
+    if (event.key === "ArrowDown") next = (current + 1) % count;
+    else if (event.key === "ArrowUp") next = (current - 1 + count) % count;
+    else if (event.key === "Home" && !event.shiftKey) next = 0;
+    else if (event.key === "End" && !event.shiftKey) next = count - 1;
+    else if (event.key === "Enter") {
+      const item = items[current];
+      event.preventDefault();
+      if ((event.metaKey || event.ctrlKey) && item.onAltSelect) item.onAltSelect();
+      else item.onSelect();
+      return;
+    }
+    if (next === null) return;
+    event.preventDefault();
+    setActive(next);
+  };
+  if (!open) return null;
+  let index = 0;
+  return /* @__PURE__ */ jsx(
+    "dialog",
+    {
+      ...props,
+      ref: setRef,
+      className: classes("hc-ui-command-palette", className),
+      "aria-label": label,
+      onCancel: handleCancel,
+      onClose: handleNativeClose,
+      onPointerDown: handlePointerDown,
+      onClick: handleClick,
+      children: /* @__PURE__ */ jsxs("div", { className: "hc-ui-command-palette__box", onKeyDown: handleKeyDown, children: [
+        /* @__PURE__ */ jsxs("label", { className: "hc-ui-command-palette__field", children: [
+          searchIcon ?? searchGlyph,
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              className: "hc-ui-command-palette__input",
+              value: query,
+              placeholder,
+              onChange: (event) => onQueryChange(event.target.value),
+              autoComplete: "off",
+              "aria-label": inputLabel ?? label,
+              role: "combobox",
+              "aria-expanded": "true",
+              "aria-controls": listId,
+              "aria-autocomplete": "list",
+              "aria-activedescendant": current >= 0 ? optionId(current) : void 0
+            }
+          ),
+          visible(loading) && /* @__PURE__ */ jsx("span", { className: "hc-ui-command-palette__status", children: loading })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: listRef,
+            className: classes("hc-ui-command-palette__list", listClassName),
+            id: listId,
+            role: "listbox",
+            "aria-label": label,
+            "aria-busy": visible(loading) || void 0,
+            children: [
+              visible(empty) && /* @__PURE__ */ jsx("p", { className: "hc-ui-command-palette__empty", children: empty }),
+              groups.map((group, groupIndex) => {
+                if (!group.items.length) return null;
+                const headingId = visible(group.heading) ? `${id}-group-${groupIndex}` : void 0;
+                return /* @__PURE__ */ jsxs("div", { className: "hc-ui-command-palette__group", role: headingId ? "group" : "presentation", "aria-labelledby": headingId, children: [
+                  headingId && /* @__PURE__ */ jsx("p", { className: "hc-ui-command-palette__heading", id: headingId, "aria-hidden": "true", children: group.heading }),
+                  group.items.map((item) => {
+                    const itemIndex = index++;
+                    const isActive = itemIndex === current;
+                    const itemAltHint = item.onAltSelect ? item.altHint ?? altHint : void 0;
+                    return /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        tabIndex: -1,
+                        id: optionId(itemIndex),
+                        role: "option",
+                        "aria-selected": isActive,
+                        className: "hc-ui-command-palette__item",
+                        onMouseDown: (event) => event.preventDefault(),
+                        onMouseMove: () => {
+                          if (!isActive) setActive(itemIndex);
+                        },
+                        onClick: () => item.onSelect(),
+                        children: [
+                          item.icon !== void 0 && /* @__PURE__ */ jsx("span", { className: "hc-ui-command-palette__icon", "aria-hidden": "true", children: item.icon }),
+                          /* @__PURE__ */ jsxs("span", { className: "hc-ui-command-palette__text", children: [
+                            /* @__PURE__ */ jsx("span", { className: "hc-ui-command-palette__label", children: item.label }),
+                            visible(item.detail) && /* @__PURE__ */ jsx("small", { className: "hc-ui-command-palette__detail", children: item.detail })
+                          ] }),
+                          isActive && visible(itemAltHint) && /* @__PURE__ */ jsx("kbd", { className: "hc-ui-command-palette__kbd", "aria-hidden": "true", children: itemAltHint }),
+                          isActive && visible(selectHint) && /* @__PURE__ */ jsx("kbd", { className: "hc-ui-command-palette__kbd", "aria-hidden": "true", children: selectHint })
+                        ]
+                      },
+                      item.key
+                    );
+                  })
+                ] }, group.key);
+              })
+            ]
+          }
+        ),
+        hints && hints.length > 0 && /* @__PURE__ */ jsx("footer", { className: "hc-ui-command-palette__footer", children: hints.map((hint, hintIndex) => /* @__PURE__ */ jsxs("span", { children: [
+          hint.keys.map((key, keyIndex) => /* @__PURE__ */ jsx("kbd", { className: "hc-ui-command-palette__kbd", children: key }, keyIndex)),
+          " ",
+          hint.label
+        ] }, hintIndex)) })
+      ] })
+    }
+  );
+});
 export {
   Button,
+  Checkbox,
   Chip,
+  CommandPalette,
+  Dialog,
   Field,
+  FilterBar,
   IconButton,
+  ListRow,
+  Menu,
+  MenuItem,
+  MenuItemCheckbox,
+  MenuItemRadio,
+  MenuLabel,
+  MenuRadioGroup,
+  MenuSeparator,
+  Meter,
+  PageHeader,
+  PanelHeader,
+  Popover,
   SegmentedControl,
+  Sheet,
+  SheetChips,
+  SheetOptions,
   Skeleton,
-  Surface
+  SortMenu,
+  Surface,
+  Table,
+  placePopup
 };