gridsmith-ui 0.20.0 → 0.22.0

package/dist/chunk-2RV23OBK.js

@@ -0,0 +1,1349 @@
+import { ControlSizeContext, triggerType, Button, useShellPreferences, PREFERENCE_HOUSE_DEFAULTS } from './chunk-7TOJ4G7S.js';
+import { useReportedChange, useOptionalFormContext, usePopupFocus, focusAfterRemoval, usePressMarks, focusInitial, FormChangeCtx } from './chunk-RT7RYGC3.js';
+import { useTextOverflow, Tooltip, usePosition } from './chunk-CXMV7SXJ.js';
+import { Slot } from './chunk-7Q46JXSK.js';
+import { useLatest } from './chunk-WH2FUFAC.js';
+import { Icon } from './chunk-4LDYR7QP.js';
+import { cn, ERROR_HAS_FOCUS_RING, HAS_FOCUS_RING, ERROR_FOCUS_RING, FOCUS_RING, ERROR_ACTIVE_RING, ACTIVE_RING, ERROR_FOCUS_WITHIN_RING, FOCUS_WITHIN_RING, GLASS_DROPDOWN } from './chunk-M2QRNBDQ.js';
+import { createContext, useContext, useRef, useCallback, useEffect, useId, useState, Children, isValidElement, useMemo, cloneElement, useLayoutEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+
+var UNCONTROLLED = /* @__PURE__ */ Symbol("uncontrolled");
+var valueOf = (e) => {
+  const t = e.target;
+  if (!t) return void 0;
+  return t instanceof HTMLInputElement && (t.type === "checkbox" || t.type === "radio") ? t.checked : t.value;
+};
+var INPUT_HEIGHT = {
+  sm: "h-[var(--ds-control-height-sm)]",
+  md: "h-[var(--ds-control-height-md)]",
+  lg: "h-[var(--ds-control-height-lg)]"
+};
+var INPUT_TEXT = {
+  sm: "px-ds-2 py-ds-1 text-xs",
+  md: "px-ds-3 py-ds-2 text-sm",
+  lg: "px-ds-4 py-ds-3 text-base"
+};
+function Input({ className, size: sizeProp, error = false, prefix, suffix, ...props }) {
+  const contextSize = useContext(ControlSizeContext);
+  const size = sizeProp ?? contextSize ?? "md";
+  const onChange = useReportedChange(props.onChange, props.value === void 0 ? UNCONTROLLED : props.value, valueOf);
+  const borderColor = error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]";
+  const hoverBorder = !error && !props.disabled && !props.readOnly ? "hover:border-[var(--ds-input-border-hover)]" : "";
+  if (prefix || suffix) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center w-full",
+          INPUT_HEIGHT[size],
+          "bg-[var(--ds-input-bg)]",
+          "border-[length:var(--ds-border-width)]",
+          borderColor,
+          "rounded-[var(--ds-radius-md)]",
+          "shadow-[var(--ds-input-shadow)]",
+          hoverBorder,
+          error ? ERROR_HAS_FOCUS_RING : HAS_FOCUS_RING,
+          "transition-colors duration-[var(--ds-transition-speed)]",
+          props.disabled && "cursor-not-allowed opacity-disabled",
+          props.readOnly && "bg-[var(--ds-bg-muted)] cursor-default",
+          className
+        ),
+        children: [
+          prefix && /* @__PURE__ */ jsx("span", { className: "shrink-0 pl-ds-3 text-[var(--ds-text-muted)] flex items-center", children: prefix }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              "aria-invalid": error || void 0,
+              className: cn(
+                "flex-1 min-w-0 bg-transparent outline-none",
+                INPUT_TEXT[size],
+                "text-[var(--ds-text-primary)]",
+                "placeholder:text-[var(--ds-text-muted)]",
+                "disabled:cursor-not-allowed",
+                "read-only:text-[var(--ds-text-secondary)] read-only:cursor-default"
+              ),
+              ...props,
+              onChange: props.onChange || props.value === void 0 ? onChange : void 0
+            }
+          ),
+          suffix && /* @__PURE__ */ jsx("span", { className: "shrink-0 pr-ds-3 text-[var(--ds-text-muted)] flex items-center", children: suffix })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      "aria-invalid": error || void 0,
+      className: cn(
+        "flex w-full",
+        INPUT_TEXT[size],
+        INPUT_HEIGHT[size],
+        "bg-[var(--ds-input-bg)] text-[var(--ds-text-primary)]",
+        "border-[length:var(--ds-border-width)]",
+        borderColor,
+        "rounded-[var(--ds-radius-md)]",
+        "shadow-[var(--ds-input-shadow)]",
+        "placeholder:text-[var(--ds-text-muted)]",
+        hoverBorder,
+        error ? ERROR_FOCUS_RING : FOCUS_RING,
+        "disabled:cursor-not-allowed disabled:opacity-disabled",
+        "read-only:bg-[var(--ds-bg-muted)] read-only:text-[var(--ds-text-secondary)] read-only:cursor-default",
+        "transition-colors duration-[var(--ds-transition-speed)]",
+        className
+      ),
+      ...props,
+      onChange: props.onChange || props.value === void 0 ? onChange : void 0
+    }
+  );
+}
+function Textarea({ className, autoResize, maxRows, error = false, ref, ...props }) {
+  const onChange = useReportedChange(props.onChange, props.value === void 0 ? UNCONTROLLED : props.value, valueOf);
+  const internalRef = useRef(null);
+  const textareaRef = ref ?? internalRef;
+  const resize = useCallback(() => {
+    const el = textareaRef.current;
+    if (!el || !autoResize) return;
+    el.style.height = "auto";
+    let target = el.scrollHeight;
+    if (maxRows) {
+      const lineHeight = parseFloat(getComputedStyle(el).lineHeight) || 20;
+      const maxHeight = lineHeight * maxRows + parseFloat(getComputedStyle(el).paddingTop) + parseFloat(getComputedStyle(el).paddingBottom);
+      target = Math.min(target, maxHeight);
+    }
+    el.style.height = `${target}px`;
+  }, [autoResize, maxRows, textareaRef]);
+  useEffect(() => {
+    resize();
+  }, [resize, props.value, props.defaultValue]);
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref: textareaRef,
+      "aria-invalid": error || void 0,
+      className: cn(
+        "flex min-h-[var(--ds-control-height-md)] w-full px-ds-3 py-ds-2 text-sm",
+        "bg-[var(--ds-input-bg)] text-[var(--ds-text-primary)]",
+        "border-[length:var(--ds-border-width)]",
+        error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)] hover:border-[var(--ds-input-border-hover)]",
+        "rounded-[var(--ds-radius-md)]",
+        "shadow-[var(--ds-input-shadow)]",
+        "placeholder:text-[var(--ds-text-muted)]",
+        error ? ERROR_FOCUS_RING : FOCUS_RING,
+        "disabled:cursor-not-allowed disabled:opacity-disabled disabled:hover:border-[var(--ds-input-border)]",
+        "read-only:bg-[var(--ds-bg-muted)] read-only:text-[var(--ds-text-secondary)] read-only:cursor-default read-only:hover:border-[var(--ds-input-border)]",
+        "transition-colors duration-[var(--ds-transition-speed)]",
+        autoResize && "resize-none overflow-hidden",
+        className
+      ),
+      onInput: autoResize ? resize : void 0,
+      ...props,
+      onChange: props.onChange || props.value === void 0 ? onChange : void 0
+    }
+  );
+}
+function Label({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "label",
+    {
+      className: cn(
+        "text-sm font-medium leading-none text-[var(--ds-text-secondary)]",
+        "peer-disabled:cursor-not-allowed peer-disabled:opacity-disabled",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+var TOGGLE_SIZES = {
+  sm: { w: 32, h: 18, thumb: 12 },
+  md: { w: 44, h: 24, thumb: 16 }
+};
+function Toggle({ checked, onChange, label, disabled, error = false, layout = "full", size = "md", "aria-labelledby": ariaLabelledBy, ...rest }) {
+  const change = useReportedChange(onChange, checked);
+  const dims = TOGGLE_SIZES[size];
+  const travel = dims.w - dims.thumb - 3;
+  const switchButton = /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      "aria-label": !label && !ariaLabelledBy ? "Toggle" : void 0,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-invalid": error || void 0,
+      disabled,
+      onClick: () => !disabled && change(!checked),
+      ...rest,
+      className: cn(
+        "relative inline-flex shrink-0 items-center overflow-hidden",
+        "border-[length:var(--ds-border-width)]",
+        "rounded-[var(--ds-radius-full)]",
+        "transition-colors duration-[var(--ds-transition-speed)]",
+        "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+        disabled ? "cursor-not-allowed" : "cursor-pointer",
+        checked ? "bg-[var(--ds-accent-primary)]" : "bg-[var(--ds-bg-muted)]",
+        error ? "border-[var(--ds-status-error)]" : checked ? "border-transparent" : "border-[var(--ds-border-default)]"
+      ),
+      style: { width: dims.w, height: dims.h },
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "pointer-events-none inline-block shrink-0",
+            "bg-[var(--ds-bg-surface)]",
+            "border-[length:var(--ds-border-width)] border-transparent",
+            "rounded-[var(--ds-radius-full)]",
+            "transition-transform"
+          ),
+          style: {
+            width: dims.thumb,
+            height: dims.thumb,
+            transform: checked ? `translateX(calc(${travel}px - var(--ds-border-width)))` : "translateX(calc(1px + var(--ds-border-width)))"
+          }
+        }
+      )
+    }
+  );
+  if (!label) {
+    return /* @__PURE__ */ jsx("div", { className: cn(disabled && "opacity-disabled"), children: switchButton });
+  }
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: cn(
+        layout === "full" ? "flex items-center justify-between gap-ds-4" : "inline-flex items-center gap-ds-3",
+        disabled ? "cursor-not-allowed opacity-disabled" : "cursor-pointer"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: label }),
+        switchButton
+      ]
+    }
+  );
+}
+function InlineFieldError({ message, id, className }) {
+  return /* @__PURE__ */ jsxs(
+    "p",
+    {
+      id,
+      role: "alert",
+      className: cn(
+        "flex items-center gap-ds-1.5 text-xs text-[var(--ds-status-error)]",
+        "mt-ds-1.5",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: "error", size: 14, className: "shrink-0" }),
+        /* @__PURE__ */ jsx("span", { children: message })
+      ]
+    }
+  );
+}
+var FieldContext = createContext(null);
+function useField() {
+  return useContext(FieldContext);
+}
+function useFieldControl(own, options = {}) {
+  const field = useField();
+  const id = own.id ?? field?.controlId;
+  const invalid = !!own.error || own["aria-invalid"] === true || own["aria-invalid"] === "true" || !!field?.invalid;
+  const required = !!own.required || own["aria-required"] === true || own["aria-required"] === "true" || !!field?.required;
+  const noteId = options.requiredInDescription && required && id ? `${id}-required` : void 0;
+  const ids = [own["aria-describedby"], field?.describedBy, noteId].filter(Boolean).join(" ").split(/\s+/).filter(Boolean);
+  return {
+    id,
+    labelId: own["aria-labelledby"] ?? field?.labelId,
+    describedBy: [...new Set(ids)].join(" ") || void 0,
+    invalid,
+    required,
+    requiredNote: noteId ? /* @__PURE__ */ jsx("span", { id: noteId, hidden: true, children: "Required" }) : null
+  };
+}
+var AddAnotherRowCtx = createContext(false);
+function Field({ label, children, hint, error, required, labelAction, hideLabel = false, id: idProp, validate, className }) {
+  const inGroupRow = useContext(AddAnotherRowCtx);
+  const generated = useId();
+  const id = idProp ?? `field-${generated}`;
+  const hintId = `${id}-hint`;
+  const errorId = `${id}-error`;
+  const form = useOptionalFormContext();
+  const mode = form?.validationMode ?? "onBlur";
+  const [localError, setLocalError] = useState(void 0);
+  const [left, setLeft] = useState(false);
+  const checkError = validate ? form ? form.errors[id] : localError : void 0;
+  const child = typeof children === "function" ? null : Children.only(children);
+  const childProps = child && isValidElement(child) ? child.props : null;
+  const latest = useLatest({ validate, childProps, id, mode, left, showing: !!checkError, form });
+  const check = useCallback(() => {
+    const { validate: fn, childProps: props, id: controlId } = latest.current;
+    if (!fn) return void 0;
+    const value = props && "value" in props ? props.value : props && "checked" in props ? props.checked : document.getElementById(controlId)?.value;
+    const message = fn(value);
+    return typeof message === "string" && message.length > 0 ? message : void 0;
+  }, [latest]);
+  const show = useCallback((message) => {
+    const { form: f, id: controlId } = latest.current;
+    if (f) f.setError(controlId, message);
+    else setLocalError(message);
+  }, [latest]);
+  const register = form?.register;
+  const checks = !!validate;
+  useEffect(() => register && checks ? register(id, check) : void 0, [register, checks, id, check]);
+  const leaving = useRef(null);
+  useEffect(() => () => {
+    if (leaving.current) clearTimeout(leaving.current);
+  }, []);
+  const onFocusCapture = () => {
+    if (leaving.current) {
+      clearTimeout(leaving.current);
+      leaving.current = null;
+    }
+  };
+  const onBlurCapture = () => {
+    if (!validate) return;
+    if (leaving.current) clearTimeout(leaving.current);
+    leaving.current = setTimeout(() => {
+      leaving.current = null;
+      setLeft(true);
+      if (latest.current.mode !== "onSubmit" || latest.current.showing) show(check());
+    }, 0);
+  };
+  const recheck = () => {
+    if (!validate) return;
+    setTimeout(() => {
+      const { mode: m, left: wasLeft, showing } = latest.current;
+      if (m === "onChange" && wasLeft || showing) show(check());
+    }, 0);
+  };
+  const shownError = typeof error === "string" && error.length > 0 ? error : checkError;
+  const hasError = typeof shownError === "string" && shownError.length > 0;
+  const describedBy = [hint ? hintId : null, hasError ? errorId : null].filter(Boolean).join(" ") || void 0;
+  const labelId = `${id}-label`;
+  const fieldContext = useMemo(() => ({ controlId: id, labelId, describedBy, invalid: hasError, required: !!required }), [id, labelId, describedBy, hasError, required]);
+  const controlProps = {
+    id,
+    "aria-describedby": describedBy,
+    ...hasError ? { "aria-invalid": true, error: true } : {},
+    ...required ? { "aria-required": true, required: true } : {}
+  };
+  let control;
+  if (typeof children === "function") {
+    control = children(controlProps);
+  } else {
+    if (!child || !isValidElement(child)) throw new Error("Field expects a single form control as its child");
+    const isNative = typeof child.type === "string";
+    const { error: errorFlag, ...ariaOnly } = controlProps;
+    const ownOnChange = childProps?.onChange;
+    const onChange = validate && !isNative ? { onChange: (...args) => {
+      ownOnChange?.(...args);
+      recheck();
+    } } : {};
+    control = cloneElement(child, isNative ? ariaOnly : { ...ariaOnly, ...errorFlag ? { error: true } : {}, ...onChange });
+  }
+  const labelNode = /* @__PURE__ */ jsxs(Label, { id: labelId, htmlFor: id, className: cn(hideLabel && "sr-only", hideLabel && inGroupRow && "@max-[30rem]:not-sr-only"), children: [
+    label,
+    required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-ds-0.5 text-[var(--ds-status-error)]", children: "*" })
+  ] });
+  return (
+    // In a settings panel a field keeps the narrow reading width however wide the page is (--ds-form-max, Sprint 25.9 A4)
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("flex flex-col gap-ds-1.5 max-w-[var(--ds-form-max,none)]", className),
+        ...validate ? { onFocusCapture, onBlurCapture, onInputCapture: recheck } : {},
+        children: [
+          hideLabel && !labelAction ? labelNode : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-ds-2", children: [
+            labelNode,
+            labelAction
+          ] }),
+          /* @__PURE__ */ jsx(FieldContext.Provider, { value: fieldContext, children: control }),
+          hint && /* @__PURE__ */ jsx("p", { id: hintId, className: "text-xs text-[var(--ds-text-muted)]", children: hint }),
+          hasError && /* @__PURE__ */ jsx(InlineFieldError, { id: errorId, message: shownError, className: "mt-0" })
+        ]
+      }
+    )
+  );
+}
+var DROPDOWN_HEIGHT = {
+  sm: "px-ds-2 py-ds-1 text-xs h-[var(--ds-control-height-sm)]",
+  md: "px-ds-3 py-ds-2 text-sm h-[var(--ds-control-height-md)]",
+  lg: "px-ds-4 py-ds-3 text-base h-[var(--ds-control-height-lg)]"
+};
+function Dropdown({
+  options,
+  value,
+  onChange: onChangeProp,
+  label,
+  disabled,
+  placeholder = "Select...",
+  multiple,
+  searchable,
+  size: sizeProp,
+  className,
+  ref,
+  container,
+  error = false,
+  showChips = true,
+  "aria-label": ariaLabel,
+  ...wiring
+}) {
+  const onChange = useReportedChange(onChangeProp, value);
+  const contextSize = useContext(ControlSizeContext);
+  const generatedId = useId();
+  const control = useFieldControl({ ...wiring, error: error || void 0 }, { requiredInDescription: true });
+  const triggerId = control.id ?? generatedId;
+  const labelSpanId = `${triggerId}-label`;
+  const labelledBy = control.labelId ? `${control.labelId} ${triggerId}` : label && !ariaLabel ? `${labelSpanId} ${triggerId}` : void 0;
+  const invalid = control.invalid;
+  const size = sizeProp ?? contextSize ?? "md";
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [positioned, setPositioned] = useState(false);
+  const triggerRef = useRef(null);
+  const menuRef = useRef(null);
+  const searchRef = useRef(null);
+  const [pos, setPos] = useState({ top: 0, left: 0, width: 0 });
+  const selectedValues = Array.isArray(value) ? value : [value].filter(Boolean);
+  const updatePos = useCallback(() => {
+    if (!triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    let top = rect.bottom + 4;
+    let left = rect.left;
+    const width = rect.width;
+    if (menuRef.current) {
+      const menuRect = menuRef.current.getBoundingClientRect();
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+      if (left + menuRect.width > vw) left = Math.max(0, vw - menuRect.width - 8);
+      if (top + menuRect.height > vh) {
+        const above = rect.top - 4 - menuRect.height;
+        if (above >= 0) top = above;
+        else top = Math.max(0, vh - menuRect.height - 8);
+      }
+    }
+    setPos({ top, left, width });
+  }, []);
+  const [prevOpen, setPrevOpen] = useState(open);
+  if (open !== prevOpen) {
+    setPrevOpen(open);
+    if (open) setSearch("");
+    else setPositioned(false);
+  }
+  useEffect(() => {
+    if (!open) return;
+    updatePos();
+    const raf = requestAnimationFrame(() => {
+      updatePos();
+      setPositioned(true);
+    });
+    const onScroll = () => updatePos();
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", updatePos);
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", updatePos);
+    };
+  }, [open, updatePos]);
+  const moved = useRef(false);
+  useLayoutEffect(() => {
+    if (!open || !positioned) return;
+    moved.current = false;
+    if (searchRef.current) {
+      searchRef.current.focus();
+      return;
+    }
+    const els = Array.from(menuRef.current?.querySelectorAll('[role="option"]') ?? []);
+    (els.find((el) => el.getAttribute("aria-selected") === "true") ?? els[0])?.focus();
+  }, [open, positioned]);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      const target = e.target;
+      if (triggerRef.current?.contains(target) || menuRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+  const commitMoved = () => {
+    if (multiple || !moved.current) return;
+    const el = document.activeElement;
+    const id = el instanceof HTMLElement && menuRef.current?.contains(el) ? el.getAttribute("data-option-id") : null;
+    if (id) onChange(id);
+  };
+  const { isTop: isTopLayer, returnFocus } = usePopupFocus(open, { trigger: triggerRef, panel: menuRef, close: () => setOpen(false), tabExits: "any", onTabOut: commitMoved });
+  const typeahead = useRef({ buffer: "", at: 0 });
+  useEffect(() => {
+    if (!open) return;
+    const optionButtons = () => Array.from(menuRef.current?.querySelectorAll('[role="option"]') ?? []);
+    const focusOption = (idx) => {
+      const els = optionButtons();
+      if (els.length === 0) return;
+      els[(idx % els.length + els.length) % els.length].focus();
+      moved.current = true;
+    };
+    const onKey = (e) => {
+      const inMenu = menuRef.current?.contains(document.activeElement) || triggerRef.current === document.activeElement;
+      if (!inMenu) return;
+      const els = optionButtons();
+      const current = els.findIndex((el) => el === document.activeElement);
+      if (e.key === "Escape") {
+        if (e.defaultPrevented || !isTopLayer()) return;
+        e.preventDefault();
+        returnFocus();
+        setOpen(false);
+        return;
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        focusOption(current < 0 ? 0 : current + 1);
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        focusOption(current < 0 ? els.length - 1 : current - 1);
+        return;
+      }
+      const inSearch = document.activeElement === searchRef.current;
+      if (e.key === "Home" && !inSearch) {
+        e.preventDefault();
+        focusOption(0);
+        return;
+      }
+      if (e.key === "End" && !inSearch) {
+        e.preventDefault();
+        focusOption(els.length - 1);
+        return;
+      }
+      if (!searchable && e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
+        const now = Date.now();
+        typeahead.current.buffer = now - typeahead.current.at > 700 ? e.key : typeahead.current.buffer + e.key;
+        typeahead.current.at = now;
+        const q = typeahead.current.buffer.toLowerCase();
+        const hit = els.findIndex((el) => (el.textContent ?? "").trim().toLowerCase().startsWith(q));
+        if (hit >= 0) {
+          e.preventDefault();
+          focusOption(hit);
+        }
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, searchable, isTopLayer, returnFocus]);
+  const filtered = searchable && search ? options.filter((o) => o.label.toLowerCase().includes(search.toLowerCase())) : options;
+  const groups = /* @__PURE__ */ new Map();
+  for (const opt of filtered) {
+    const g = opt.group ?? "";
+    if (!groups.has(g)) groups.set(g, []);
+    groups.get(g).push(opt);
+  }
+  const hasGroups = Array.from(groups.keys()).some((k) => k !== "");
+  const handleSelect = (id) => {
+    if (multiple) {
+      const arr = selectedValues.includes(id) ? selectedValues.filter((v) => v !== id) : [...selectedValues, id];
+      onChange(arr);
+    } else {
+      returnFocus();
+      onChange(id);
+      setOpen(false);
+    }
+  };
+  const chipsRef = useRef(null);
+  const pendingChipFocus = useRef(null);
+  useLayoutEffect(() => {
+    const pending = pendingChipFocus.current;
+    if (pending === null) return;
+    pendingChipFocus.current = null;
+    if (selectedValues.includes(pending.value)) return;
+    const chips = Array.from(chipsRef.current?.querySelectorAll("[data-chip-remove]") ?? []);
+    focusAfterRemoval(chips, pending.index, triggerRef.current);
+  });
+  const displayLabel = multiple ? selectedValues.length > 0 ? `${selectedValues.length} selected` : placeholder : options.find((o) => o.id === selectedValues[0])?.label ?? placeholder;
+  const { ref: overflowRef, isTruncated } = useTextOverflow({ lines: 1, content: displayLabel });
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("relative", className), children: [
+    label && /* @__PURE__ */ jsx("span", { id: labelSpanId, className: "block mb-ds-1.5 text-sm font-medium text-[var(--ds-text-secondary)]", children: label }),
+    control.requiredNote,
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        id: triggerId,
+        type: "button",
+        onClick: () => !disabled && setOpen(!open),
+        onKeyDown: (e) => {
+          if (disabled || open) return;
+          if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            e.preventDefault();
+            setOpen(true);
+          }
+        },
+        disabled,
+        "aria-invalid": invalid || void 0,
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-label": labelledBy ? void 0 : ariaLabel,
+        "aria-labelledby": labelledBy,
+        "aria-describedby": control.describedBy,
+        className: cn(
+          "w-full flex items-center justify-between gap-ds-2",
+          DROPDOWN_HEIGHT[size],
+          "bg-[var(--ds-input-bg)] text-[var(--ds-text-primary)]",
+          "border-[length:var(--ds-border-width)]",
+          invalid ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
+          "rounded-[var(--ds-radius-md)]",
+          "shadow-[var(--ds-input-shadow)]",
+          "transition-colors",
+          !invalid && !disabled && !open && "hover:border-[var(--ds-input-border-hover)]",
+          open && (invalid ? ERROR_ACTIVE_RING : ACTIVE_RING),
+          invalid ? ERROR_FOCUS_RING : FOCUS_RING,
+          "cursor-pointer disabled:cursor-not-allowed disabled:opacity-disabled",
+          !selectedValues.length && "text-[var(--ds-text-muted)]"
+        ),
+        children: [
+          isTruncated ? /* @__PURE__ */ jsx(Tooltip, { content: displayLabel, children: /* @__PURE__ */ jsx("span", { ref: overflowRef, className: "truncate", children: displayLabel }) }) : /* @__PURE__ */ jsx("span", { ref: overflowRef, className: "truncate", children: displayLabel }),
+          /* @__PURE__ */ jsx("span", { className: cn("transition-transform", open && "rotate-180"), children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: "rotate-90" }) })
+        ]
+      }
+    ),
+    open && createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: menuRef,
+          tabIndex: -1,
+          onClick: (e) => e.stopPropagation(),
+          className: cn(
+            "fixed z-[var(--ds-z-popover)] outline-none",
+            "bg-[var(--ds-bg-surface-elevated)]",
+            "[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)]",
+            "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+            "rounded-[var(--ds-radius-md)] overflow-hidden",
+            "shadow-[var(--ds-shadow-dropdown),var(--ds-glass-inset)]"
+          ),
+          style: { top: pos.top, left: pos.left, minWidth: pos.width, width: "max-content", maxWidth: "calc(100vw - 16px)", visibility: positioned ? "visible" : "hidden" },
+          children: [
+            searchable && /* @__PURE__ */ jsx("div", { className: "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]", style: { padding: "var(--ds-space-2)" }, children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: searchRef,
+                type: "text",
+                value: search,
+                onChange: (e) => setSearch(e.target.value),
+                placeholder: "Search\u2026",
+                className: cn("w-full bg-transparent text-[var(--ds-text-primary)] placeholder:text-[var(--ds-text-muted)] outline-none", size === "sm" ? "text-xs" : "text-sm")
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { role: "listbox", className: "overflow-y-auto", style: { padding: "var(--ds-space-1)", maxHeight: "var(--ds-dropdown-max-height)" }, children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: cn("text-[var(--ds-text-muted)] text-center py-ds-4", size === "sm" ? "text-xs" : "text-sm"), children: "No options found" }) : hasGroups ? Array.from(groups.entries()).map(([group, opts]) => /* @__PURE__ */ jsxs("div", { children: [
+              group && /* @__PURE__ */ jsx("p", { className: "text-2xs font-medium uppercase tracking-wider text-[var(--ds-text-muted)] px-ds-2 pt-ds-2 pb-ds-1", children: group }),
+              opts.map((opt) => /* @__PURE__ */ jsx(
+                OptionButton,
+                {
+                  opt,
+                  isSelected: selectedValues.includes(opt.id),
+                  multiple,
+                  onSelect: handleSelect,
+                  size
+                },
+                opt.id
+              ))
+            ] }, group)) : filtered.map((opt) => /* @__PURE__ */ jsx(
+              OptionButton,
+              {
+                opt,
+                isSelected: selectedValues.includes(opt.id),
+                multiple,
+                onSelect: handleSelect,
+                size
+              },
+              opt.id
+            )) })
+          ]
+        }
+      ),
+      container ?? document.body
+    ),
+    multiple && showChips && selectedValues.length > 0 && /* @__PURE__ */ jsx("div", { ref: chipsRef, className: "flex flex-wrap gap-ds-1 mt-ds-1.5", children: selectedValues.map((v, i) => {
+      const opt = options.find((o) => o.id === v);
+      return opt ? /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: "inline-flex items-center gap-ds-1 text-xs rounded-[var(--ds-radius-sm)] bg-[var(--ds-bg-muted)] text-[var(--ds-text-secondary)] px-ds-1.5 py-ds-0.5",
+          children: [
+            opt.label,
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "data-chip-remove": "",
+                onClick: () => {
+                  pendingChipFocus.current = { index: i, value: v };
+                  handleSelect(v);
+                },
+                className: "hover:text-[var(--ds-text-primary)] cursor-pointer",
+                "aria-label": `Remove ${opt.label}`,
+                children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 10 })
+              }
+            )
+          ]
+        },
+        v
+      ) : null;
+    }) })
+  ] });
+}
+function OptionButton({
+  opt,
+  isSelected,
+  multiple,
+  onSelect,
+  size = "md"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "option",
+      "data-option-id": opt.id,
+      "aria-selected": isSelected,
+      tabIndex: -1,
+      onClick: () => onSelect(opt.id),
+      className: cn(
+        "w-full text-left cursor-pointer rounded-[var(--ds-radius-sm)]",
+        "transition-colors flex items-center gap-ds-2",
+        "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+        size === "sm" ? "px-ds-2 py-ds-1 text-xs" : "px-ds-2 py-ds-1.5 text-sm",
+        isSelected && !multiple ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-emphasis)]"
+      ),
+      children: [
+        multiple && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "w-[var(--ds-icon-size-sm)] h-[var(--ds-icon-size-sm)] rounded-[var(--ds-radius-sm)] border-[length:var(--ds-border-width)] shrink-0 flex items-center justify-center",
+              isSelected ? "bg-[var(--ds-accent-primary)] border-[var(--ds-accent-primary)]" : "border-[var(--ds-border-default)]"
+            ),
+            children: isSelected && /* @__PURE__ */ jsx(Icon, { name: "check", size: 10, className: "text-[var(--ds-text-on-primary)]" })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children: opt.label }),
+        isSelected && !multiple && /* @__PURE__ */ jsx(Icon, { name: "check", size: size === "sm" ? 12 : 14 })
+      ]
+    }
+  );
+}
+var sizes = {
+  sm: { box: "h-[var(--ds-control-height-sm)]", input: "text-xs self-stretch", btn: "w-7 text-xs" },
+  md: { box: "h-[var(--ds-control-height-md)]", input: "text-sm self-stretch", btn: "w-9 text-sm" },
+  lg: { box: "h-[var(--ds-control-height-lg)]", input: "text-base self-stretch", btn: "w-10 text-base" }
+};
+function NumberInput({
+  value,
+  onChange: onChangeProp,
+  min = -Infinity,
+  max = Infinity,
+  step = 1,
+  disabled = false,
+  placeholder = "0",
+  prefix,
+  suffix,
+  size: sizeProp,
+  className,
+  error = false,
+  allowDecimals,
+  id
+}) {
+  const onChange = useReportedChange(onChangeProp, value);
+  const contextSize = useContext(ControlSizeContext);
+  const size = sizeProp ?? contextSize ?? "md";
+  const intervalRef = useRef(void 0);
+  const timeoutRef = useRef(void 0);
+  const inputRef = useRef(null);
+  const [focused, setFocused] = useState(false);
+  const [draft, setDraft] = useState(String(value));
+  const decimals = allowDecimals ?? step % 1 !== 0;
+  const [prevSync, setPrevSync] = useState({ value, focused });
+  if (value !== prevSync.value || focused !== prevSync.focused) {
+    setPrevSync({ value, focused });
+    if (!focused) setDraft(String(value));
+  }
+  const clamp = useCallback(
+    (v) => Math.min(max, Math.max(min, v)),
+    [min, max]
+  );
+  const valueRef = useLatest(value);
+  const commitValue = useCallback((v, own = false) => {
+    const clamped = clamp(v);
+    valueRef.current = clamped;
+    setDraft(String(clamped));
+    (own ? onChangeProp : onChange)(clamped);
+    return clamped;
+  }, [onChange, onChangeProp, clamp, valueRef]);
+  const increment = useCallback(() => commitValue(valueRef.current + step), [commitValue, step, valueRef]);
+  const decrement = useCallback(() => commitValue(valueRef.current - step), [commitValue, step, valueRef]);
+  const startRepeat = useCallback(
+    (fn) => {
+      fn();
+      timeoutRef.current = setTimeout(() => {
+        intervalRef.current = setInterval(fn, 75);
+      }, 400);
+    },
+    []
+  );
+  const stopRepeat = useCallback(() => {
+    clearTimeout(timeoutRef.current);
+    clearInterval(intervalRef.current);
+  }, []);
+  const handleInput = useCallback(
+    (e) => {
+      const raw = e.target.value;
+      if (raw === "" || raw === "-") {
+        setDraft(raw);
+        return;
+      }
+      if (!decimals && raw.includes(".")) return;
+      const validPattern = decimals ? /^-?\d*\.?\d*$/ : /^-?\d*$/;
+      if (!validPattern.test(raw)) return;
+      setDraft(raw);
+      const parsed = parseFloat(raw);
+      if (!isNaN(parsed) && isFinite(parsed)) {
+        onChange(clamp(parsed));
+      }
+    },
+    [onChange, clamp, decimals]
+  );
+  const handleBlur = useCallback(() => {
+    setFocused(false);
+    const parsed = parseFloat(draft);
+    if (!isNaN(parsed) && isFinite(parsed)) {
+      const committed = commitValue(parsed, draft === String(value));
+      setDraft(String(committed));
+    } else {
+      const fallback = isFinite(min) ? min : 0;
+      const committed = commitValue(value !== void 0 ? value : fallback, true);
+      setDraft(String(committed));
+    }
+  }, [draft, commitValue, min, value]);
+  const handleFocus = useCallback(() => {
+    setFocused(true);
+  }, []);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        increment();
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        decrement();
+      }
+    },
+    [increment, decrement]
+  );
+  const s = sizes[size];
+  const atMin = value <= min;
+  const atMax = value >= max;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center w-full",
+        s.box,
+        "border-[length:var(--ds-border-width)]",
+        error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
+        "rounded-[var(--ds-radius-md)]",
+        "shadow-[var(--ds-input-shadow)]",
+        "bg-[var(--ds-input-bg)]",
+        "transition-colors duration-[var(--ds-transition-speed)]",
+        !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
+        error ? ERROR_FOCUS_WITHIN_RING : cn(FOCUS_WITHIN_RING, "focus-within:hover:border-[var(--ds-border-focus)]"),
+        disabled && "opacity-disabled cursor-not-allowed",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            disabled: disabled || atMin,
+            onMouseDown: (e) => {
+              e.preventDefault();
+              inputRef.current?.focus();
+              if (!disabled && !atMin) startRepeat(decrement);
+            },
+            onMouseUp: stopRepeat,
+            onMouseLeave: stopRepeat,
+            className: cn(
+              "inline-flex items-center justify-center shrink-0",
+              "border-r-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+              "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]",
+              "transition-colors cursor-pointer",
+              "rounded-l-[var(--ds-radius-md)]",
+              s.btn,
+              s.input,
+              (disabled || atMin) && "opacity-disabled cursor-not-allowed hover:bg-transparent hover:text-[var(--ds-text-muted)]"
+            ),
+            "aria-label": "Decrease",
+            children: "\u2212"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: cn("flex items-center flex-1 min-w-0 px-ds-2 gap-ds-1", s.input), children: [
+          prefix && /* @__PURE__ */ jsx("span", { className: "text-[var(--ds-text-muted)] shrink-0 text-xs", children: prefix }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              id,
+              type: "text",
+              inputMode: decimals ? "decimal" : "numeric",
+              "aria-invalid": error || void 0,
+              value: focused ? draft : String(value),
+              onChange: handleInput,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              onKeyDown: handleKeyDown,
+              disabled,
+              placeholder,
+              className: cn(
+                "w-full min-w-0 bg-transparent text-center outline-none",
+                "text-[var(--ds-text-primary)]",
+                "placeholder:text-[var(--ds-text-muted)]",
+                "font-[family-name:var(--ds-font-mono)]",
+                s.input,
+                disabled && "cursor-not-allowed"
+              )
+            }
+          ),
+          suffix && /* @__PURE__ */ jsx("span", { className: "text-[var(--ds-text-muted)] shrink-0 text-xs", children: suffix })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            disabled: disabled || atMax,
+            onMouseDown: (e) => {
+              e.preventDefault();
+              inputRef.current?.focus();
+              if (!disabled && !atMax) startRepeat(increment);
+            },
+            onMouseUp: stopRepeat,
+            onMouseLeave: stopRepeat,
+            className: cn(
+              "inline-flex items-center justify-center shrink-0",
+              "border-l-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+              "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]",
+              "transition-colors cursor-pointer",
+              "rounded-r-[var(--ds-radius-md)]",
+              s.btn,
+              s.input,
+              (disabled || atMax) && "opacity-disabled cursor-not-allowed hover:bg-transparent hover:text-[var(--ds-text-muted)]"
+            ),
+            "aria-label": "Increase",
+            children: "+"
+          }
+        )
+      ]
+    }
+  );
+}
+function Popover({ open, onOpenChange, trigger, children, side = "bottom", align = "center", width, className, container }) {
+  const triggerRef = useRef(null);
+  const floatingRef = useRef(null);
+  const [triggerWidth, setTriggerWidth] = useState(void 0);
+  const setTriggerNode = useCallback((node) => {
+    triggerRef.current = node;
+    setTriggerWidth(node?.offsetWidth);
+  }, []);
+  const pos = usePosition(triggerRef, floatingRef, open, { side, align, offset: 8, flip: true });
+  const onOpenChangeRef = useLatest(onOpenChange);
+  const { props: pressMarks, marked } = usePressMarks();
+  const { isTop: isTopLayer, returnFocus } = usePopupFocus(open, { trigger: triggerRef, panel: floatingRef, close: () => onOpenChangeRef.current(false), tabExits: "edges", marked });
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e) => {
+      if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
+      const active = document.activeElement;
+      if (active && active !== document.body && !triggerRef.current?.contains(active) && !floatingRef.current?.contains(active)) return;
+      e.preventDefault();
+      returnFocus();
+      onOpenChangeRef.current(false);
+    };
+    const onPress = (e) => {
+      const target = e.target;
+      if (marked(e) || triggerRef.current?.contains(target) || floatingRef.current?.contains(target)) return;
+      onOpenChangeRef.current(false);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("mousedown", onPress);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("mousedown", onPress);
+    };
+  }, [open, onOpenChangeRef, isTopLayer, returnFocus, marked]);
+  useEffect(() => {
+    if (open) focusInitial(floatingRef.current);
+  }, [open]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Slot,
+      {
+        ...triggerType(trigger),
+        ref: setTriggerNode,
+        onClick: () => {
+          setTriggerWidth(triggerRef.current?.offsetWidth);
+          onOpenChange(!open);
+        },
+        children: trigger
+      }
+    ),
+    open && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: floatingRef,
+          "data-gs": "popover",
+          ...pressMarks,
+          onClick: (e) => e.stopPropagation(),
+          className: cn(
+            "fixed z-[var(--ds-z-popover)]",
+            "bg-[var(--ds-bg-surface-elevated)]",
+            GLASS_DROPDOWN,
+            "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+            "rounded-[var(--ds-radius-md)]",
+            className
+          ),
+          style: {
+            top: pos.top,
+            left: pos.left,
+            width: width === "trigger" ? triggerWidth : width === "auto" ? void 0 : width
+          },
+          children
+        }
+      ),
+      container ?? document.body
+    )
+  ] });
+}
+
+// ../../showcase/src/lib/dev-warn.ts
+var warned = /* @__PURE__ */ new Set();
+function warnOnce(component, message) {
+  let dev = false;
+  try {
+    dev = process.env.NODE_ENV !== "production";
+  } catch {
+    dev = false;
+  }
+  const text = `${component}: ${message}`;
+  if (!dev || warned.has(text)) return;
+  warned.add(text);
+  console.warn(text);
+}
+var controlsDrawn = /* @__PURE__ */ new WeakMap();
+function Pagination(props) {
+  const { pagerToken } = props;
+  useEffect(() => {
+    if (!pagerToken) return;
+    const count = (controlsDrawn.get(pagerToken) ?? 0) + 1;
+    controlsDrawn.set(pagerToken, count);
+    if (count > 1) warnOnce("Pagination", "this list's pager already draws its control: a list given the pager (<Table pager={pager}>) draws it beneath the rows, so remove the separate <Pagination {...pager.props} />.");
+    return () => {
+      controlsDrawn.set(pagerToken, (controlsDrawn.get(pagerToken) ?? 1) - 1);
+    };
+  }, [pagerToken]);
+  if ((props.mode === "load-more" || props.mode === "infinite-scroll") && props.onLoadMore) return /* @__PURE__ */ jsx(LoadMore, { ...props, onLoadMore: props.onLoadMore, scroll: props.mode === "infinite-scroll" });
+  return /* @__PURE__ */ jsx(PageNumbers, { ...props });
+}
+function scrollerOf(el) {
+  for (let n = el.parentElement; n && n !== document.body && n !== document.documentElement; n = n.parentElement) {
+    const { overflowY } = getComputedStyle(n);
+    if ((overflowY === "auto" || overflowY === "scroll") && n.scrollHeight > n.clientHeight) return n;
+  }
+  return null;
+}
+function contentTop(el) {
+  let top = el.getBoundingClientRect().top + window.scrollY;
+  for (let n = el.parentElement; n && n !== document.documentElement; n = n.parentElement) top += n.scrollTop;
+  return top;
+}
+function LoadMore({ hasMore, onLoadMore, loadMoreLabel, currentPage, scroll, className }) {
+  const marker = useRef(null);
+  const load = useLatest(onLoadMore);
+  const loadedAt = useRef(null);
+  useEffect(() => {
+    const el = marker.current;
+    if (!scroll || !hasMore || !el || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver((entries) => {
+      if (!entries.some((e) => e.isIntersecting)) return;
+      const at = contentTop(el);
+      if (loadedAt.current !== null && Math.abs(at - loadedAt.current) < 1) return;
+      loadedAt.current = at;
+      load.current();
+    }, { root: scrollerOf(el), rootMargin: "200px 0px" });
+    observer.observe(el);
+    const rearm = () => {
+      loadedAt.current = null;
+    };
+    window.addEventListener("scroll", rearm, { capture: true, passive: true });
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("scroll", rearm, { capture: true });
+    };
+  }, [scroll, hasMore, currentPage, load]);
+  if (!hasMore) return null;
+  return /* @__PURE__ */ jsxs("div", { "data-ds-pager": "", "data-pagination-mode": scroll ? "infinite-scroll" : "load-more", className: cn("flex flex-col items-center", className), children: [
+    scroll && /* @__PURE__ */ jsx("div", { ref: marker, "data-load-more-trigger": "", "aria-hidden": "true", className: "h-px w-full" }),
+    /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", onClick: onLoadMore, children: loadMoreLabel ?? "Load more" })
+  ] });
+}
+function PageNumbers({ currentPage, totalPages, onPageChange, pageSize: pageSizeProp, pageSizeOptions, onPageSizeChange, className }) {
+  const pages = buildPageRange(currentPage, totalPages);
+  const preferences = useShellPreferences();
+  const pageSize = pageSizeProp ?? preferences.itemsPerPage;
+  const sizeChoice = !!(pageSizeOptions && pageSize != null && onPageSizeChange);
+  if (totalPages <= 1 && !sizeChoice) return null;
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": "Pagination", "data-ds-pager": "", className: cn("flex flex-wrap items-center gap-ds-3", className), children: [
+    sizeChoice && pageSizeOptions && pageSize != null && onPageSizeChange && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--ds-text-muted)] whitespace-nowrap", children: "Rows per page" }),
+      /* @__PURE__ */ jsx(FormChangeCtx, { value: null, children: /* @__PURE__ */ jsx(
+        Dropdown,
+        {
+          "aria-label": `Rows per page, ${pageSize}`,
+          options: pageSizeOptions.map((n) => ({ id: String(n), label: String(n) })),
+          value: String(pageSize),
+          onChange: (v) => onPageSizeChange(Number(v)),
+          size: "sm",
+          className: "w-[4.5rem]"
+        }
+      ) })
+    ] }),
+    totalPages > 1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-1", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onPageChange(currentPage - 1),
+          disabled: currentPage <= 1,
+          "aria-label": "Previous page",
+          className: cn(
+            "inline-flex items-center justify-center h-[var(--ds-control-height-sm)] w-[var(--ds-control-height-sm)] text-sm cursor-pointer",
+            "rounded-[var(--ds-radius-md)]",
+            "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+            "bg-[var(--ds-bg-surface)] text-[var(--ds-text-secondary)]",
+            "transition-colors duration-[var(--ds-transition-speed)]",
+            "hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]",
+            "disabled:opacity-disabled disabled:cursor-not-allowed"
+          ),
+          children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 16, className: "rotate-180" })
+        }
+      ),
+      pages.map(
+        (p, i) => p === "..." ? /* @__PURE__ */ jsx(EllipsisJumper, { totalPages, onPageChange }, `ellipsis-${i}`) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onPageChange(p),
+            "aria-current": p === currentPage ? "page" : void 0,
+            className: cn(
+              "inline-flex items-center justify-center h-[var(--ds-control-height-sm)] w-[var(--ds-control-height-sm)] text-sm font-medium cursor-pointer",
+              "rounded-[var(--ds-radius-md)]",
+              "border-[length:var(--ds-border-width)]",
+              "transition-colors duration-[var(--ds-transition-speed)]",
+              p === currentPage ? "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] text-[var(--ds-text-on-primary)] border-[var(--ds-accent-primary)]" : "bg-[var(--ds-bg-surface)] text-[var(--ds-text-secondary)] border-[var(--ds-border-default)] hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
+            ),
+            children: p
+          },
+          p
+        )
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onPageChange(currentPage + 1),
+          disabled: currentPage >= totalPages,
+          "aria-label": "Next page",
+          className: cn(
+            "inline-flex items-center justify-center h-[var(--ds-control-height-sm)] w-[var(--ds-control-height-sm)] text-sm cursor-pointer",
+            "rounded-[var(--ds-radius-md)]",
+            "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+            "bg-[var(--ds-bg-surface)] text-[var(--ds-text-secondary)]",
+            "transition-colors duration-[var(--ds-transition-speed)]",
+            "hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]",
+            "disabled:opacity-disabled disabled:cursor-not-allowed"
+          ),
+          children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 16 })
+        }
+      )
+    ] })
+  ] });
+}
+function buildPageRange(current, total) {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+  const pages = [1];
+  if (current > 3) pages.push("...");
+  const start = Math.max(2, current - 1);
+  const end = Math.min(total - 1, current + 1);
+  for (let i = start; i <= end; i++) pages.push(i);
+  if (current < total - 2) pages.push("...");
+  pages.push(total);
+  return pages;
+}
+function EllipsisJumper({ totalPages, onPageChange }) {
+  const [open, setOpen] = useState(false);
+  const [jumpPage, setJumpPage] = useState(1);
+  const handleOpenChange = (next) => {
+    if (next) setJumpPage(1);
+    setOpen(next);
+  };
+  const handleGo = () => {
+    const clamped = Math.min(totalPages, Math.max(1, jumpPage));
+    onPageChange(clamped);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      open,
+      onOpenChange: handleOpenChange,
+      trigger: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Go to page",
+          onClick: () => handleOpenChange(true),
+          className: cn(
+            "inline-flex items-center justify-center h-[var(--ds-control-height-sm)] w-[var(--ds-control-height-sm)] text-sm cursor-pointer",
+            "rounded-[var(--ds-radius-md)]",
+            "text-[var(--ds-text-muted)]",
+            "transition-colors duration-[var(--ds-transition-speed)]",
+            "hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
+          ),
+          children: "\u2026"
+        }
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-ds-2 p-ds-3", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-[var(--ds-text-secondary)]", children: "Go to page" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
+          /* @__PURE__ */ jsx(
+            NumberInput,
+            {
+              value: jumpPage,
+              onChange: setJumpPage,
+              min: 1,
+              max: totalPages,
+              step: 1,
+              size: "sm",
+              className: "w-[5rem]"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleGo,
+              className: cn(
+                "px-ds-2.5 h-[var(--ds-control-height-sm)] text-xs font-medium cursor-pointer",
+                "rounded-[var(--ds-radius-md)]",
+                "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]",
+                "transition-colors duration-[var(--ds-transition-speed)]",
+                "hover:opacity-90"
+              ),
+              children: "Go"
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function firstKey(item) {
+  if (item !== null && typeof item === "object") return "id" in item ? item.id : void 0;
+  return item;
+}
+function resetKey(resetOn) {
+  try {
+    return JSON.stringify(resetOn ?? null);
+  } catch {
+    return String(resetOn);
+  }
+}
+function signature(list, resetOn) {
+  let first = "";
+  try {
+    first = JSON.stringify(firstKey(list[0]) ?? null);
+  } catch {
+    first = "";
+  }
+  return `${list.length}|${first}|${resetKey(resetOn)}`;
+}
+function grewAtAnEnd(seen, list, reset) {
+  if (reset !== seen.reset || list.length <= seen.length || seen.first === void 0 || seen.length === 0) return false;
+  return firstKey(list[0]) === seen.first || firstKey(list[list.length - seen.length]) === seen.first;
+}
+function usePagination(list, options = {}) {
+  const shell = useShellPreferences();
+  const style = options.style ?? shell.paginationStyle ?? PREFERENCE_HOUSE_DEFAULTS.paginationStyle;
+  const [chosenSize, setChosenSize] = useState(null);
+  const [pagerToken] = useState(() => ({}));
+  const pageSize = Math.max(1, Math.floor(chosenSize ?? options.pageSize ?? shell.itemsPerPage ?? PREFERENCE_HOUSE_DEFAULTS.itemsPerPage));
+  const [page, setPageState] = useState(1);
+  const sig = signature(list, options.resetOn);
+  const reset = resetKey(options.resetOn);
+  const [seen, setSeen] = useState(() => ({ sig, length: list.length, first: firstKey(list[0]), reset }));
+  const changed = seen.sig !== sig;
+  const startsAgain = changed && !grewAtAnEnd(seen, list, reset);
+  if (changed) {
+    setSeen({ sig, length: list.length, first: firstKey(list[0]), reset });
+    if (startsAgain && page !== 1) setPageState(1);
+  }
+  const totalItems = list.length;
+  const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
+  const current = Math.min(Math.max(1, startsAgain ? 1 : page), totalPages);
+  const grows = style !== "pagination";
+  const start = grows ? 0 : (current - 1) * pageSize;
+  const items = list.slice(start, current * pageSize);
+  const range = items.length === 0 ? [0, 0] : [start + 1, start + items.length];
+  const hasMore = current < totalPages;
+  const setPage = (next) => setPageState(Math.min(Math.max(1, Math.floor(next)), totalPages));
+  const loadMore = () => setPageState((p) => Math.min(p + 1, totalPages));
+  const setPageSize = (size) => {
+    setChosenSize(Math.max(1, Math.floor(size)));
+    setPageState(1);
+  };
+  return {
+    style,
+    items,
+    page: current,
+    pageSize,
+    totalItems,
+    totalPages,
+    range,
+    shown: items.length,
+    hasMore,
+    loadMore,
+    setPage,
+    setPageSize,
+    props: { currentPage: current, totalPages, onPageChange: setPage, pageSize, onPageSizeChange: setPageSize, mode: style, hasMore, onLoadMore: loadMore, pagerToken, ...options.pageSizeOptions ? { pageSizeOptions: options.pageSizeOptions } : {} }
+  };
+}
+function pagerPart(list, pager) {
+  if (!pager) return list;
+  return pager.range[0] === 0 ? [] : list.slice(pager.range[0] - 1, pager.range[1]);
+}
+function useWholeListCheck(component, length, pager) {
+  const total = pager?.totalItems;
+  useEffect(() => {
+    if (total !== void 0 && length !== total) warnOnce(component, `the pager counts ${total} items but the list holds ${length}: give the list and usePagination the same items, every item of the list, and the list draws the pager's part (Sprint 25.13 A3).`);
+  }, [component, length, total]);
+}
+
+export { AddAnotherRowCtx, Dropdown, Field, InlineFieldError, Input, Label, NumberInput, Pagination, Popover, Textarea, Toggle, pagerPart, useField, useFieldControl, usePagination, useWholeListCheck, warnOnce };
+//# sourceMappingURL=chunk-2RV23OBK.js.map
+//# sourceMappingURL=chunk-2RV23OBK.js.map