gridsmith-ui 0.30.1 → 0.31.0

package/dist/chunk-V2ARGHJN.js

@@ -0,0 +1,755 @@
+"use client";
+import { useShellPreferences, PREFERENCE_HOUSE_DEFAULTS } from './chunk-QOMP4D6V.js';
+import { Dropdown } from './chunk-BKYWKMUN.js';
+import { useInputModality } from './chunk-7RKC5C7G.js';
+import { useReportedChange, FormChangeCtx } from './chunk-72SDAX54.js';
+import { RowsCtx } from './chunk-V73LHNRL.js';
+import { ControlSizeContext, triggerType, Button } from './chunk-2Q4HOGEI.js';
+import { Slot, AutoTooltip } from './chunk-XSQD3UGY.js';
+import { warnOnce, Icon } from './chunk-53F7GVBQ.js';
+import { useLatest, cn, FOCUS_RING, ERROR_FOCUS_WITHIN_RING, FIELD_FOCUS_WITHIN_RING, usePosition, usePressMarks, usePopupFocus, focusInitial, GLASS_DROPDOWN, focusAfterSelfRemoval, tabStops, isTabStop } from './chunk-OWQ7M6R7.js';
+import { useContext, useRef, useState, useCallback, useEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+
+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,
+  "aria-label": ariaLabel
+}) {
+  const onChange = useReportedChange(onChangeProp, value);
+  useInputModality();
+  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();
+      }
+      const plain = !e.shiftKey && !e.ctrlKey && !e.metaKey && !e.altKey;
+      if (e.key === "Home" && plain && Number.isFinite(min)) {
+        e.preventDefault();
+        commitValue(min);
+      }
+      if (e.key === "End" && plain && Number.isFinite(max)) {
+        e.preventDefault();
+        commitValue(max);
+      }
+    },
+    [increment, decrement, commitValue, min, max]
+  );
+  const s = sizes[size];
+  const atMin = value <= min;
+  const atMax = value >= max;
+  const shown = focused ? draft : String(value);
+  const holdsNumber = Number.isFinite(parseFloat(shown)) && Number.isFinite(value);
+  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 : FIELD_FOCUS_WITHIN_RING,
+        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)]",
+              // kept out of the Tab order (the field's arrows step it) and never focused by a press: the outline all the same
+              // if anything focuses it (Sprint 30)
+              FOCUS_RING,
+              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",
+              role: "spinbutton",
+              "aria-label": ariaLabel,
+              "aria-valuenow": holdsNumber ? value : void 0,
+              "aria-valuemin": Number.isFinite(min) ? min : void 0,
+              "aria-valuemax": Number.isFinite(max) ? max : void 0,
+              inputMode: decimals ? "decimal" : "numeric",
+              "aria-invalid": error || void 0,
+              value: shown,
+              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)]",
+              FOCUS_RING,
+              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: /* @__PURE__ */ jsx(RowsCtx, { value: false, children })
+        }
+      ),
+      container ?? document.body
+    )
+  ] });
+}
+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 button = useRef(null);
+  const pager = useRef(null);
+  const watching = useRef(null);
+  const endWatch = () => {
+    watching.current?.();
+    watching.current = null;
+  };
+  const [held, setHeld] = useState(false);
+  const press = () => {
+    const b = button.current, root = pager.current;
+    if (b && root && document.activeElement === b) {
+      const byKey = scroll ? held : byKeyboard(b);
+      const place = placeOf(root);
+      const had = before(place);
+      const hadRows = had.flatMap(rowsOf);
+      const hadStops = had.flatMap(stopsIn);
+      endWatch();
+      const handOn = focusAfterSelfRemoval(b, {
+        item: root,
+        group: null,
+        to: () => {
+          const content = before(place);
+          const fresh = appended(content.flatMap(rowsOf), hadRows);
+          if (fresh) return tabStops(fresh)[0] ?? fresh;
+          const stops = content.flatMap(stopsIn);
+          return appended(stops, hadStops) ?? stops.at(-1);
+        }
+      });
+      const backInView = byKey ? whenRowsCome(place, hadRows, hadStops, b, () => {
+        if (document.activeElement === b) b.scrollIntoView?.({ block: "nearest" });
+      }) : () => {
+      };
+      watching.current = () => {
+        handOn();
+        backInView();
+      };
+    }
+    onLoadMore();
+  };
+  const load = useLatest(onLoadMore);
+  const loadedAt = useRef(null);
+  if (held && !hasMore) setHeld(false);
+  useEffect(() => {
+    const el = marker.current;
+    if (!scroll || !hasMore || !el || held || 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;
+      watching.current?.();
+      watching.current = null;
+      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, held]);
+  if (!hasMore) return null;
+  return /* @__PURE__ */ jsxs("div", { ref: pager, "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,
+      {
+        ref: button,
+        type: "button",
+        variant: "secondary",
+        onClick: press,
+        onFocus: (e) => setHeld(scroll && byKeyboard(e.currentTarget)),
+        onBlur: () => setHeld(false),
+        children: loadMoreLabel ?? "Load more"
+      }
+    )
+  ] });
+}
+function placeOf(el) {
+  for (let n = el; n && n !== document.body; n = n.parentElement) {
+    if (n.previousElementSibling && n.parentElement) return { at: n, parent: n.parentElement, next: n.nextElementSibling };
+  }
+  return null;
+}
+function before(place) {
+  if (!place) return [];
+  const { at, parent, next } = place;
+  const kids = Array.from(parent.children);
+  const end = at.parentElement === parent ? kids.indexOf(at) : next?.parentElement === parent ? kids.indexOf(next) : kids.length;
+  return kids.slice(0, end);
+}
+var withSelf = (el, selector) => [...el.matches(selector) ? [el] : [], ...el.querySelectorAll(selector)];
+function rowsOf(list) {
+  const marked = withSelf(list, "[data-row-key], [data-row-index]");
+  return marked.length ? marked : withSelf(list, 'tbody > tr, li, [role="row"], [data-card]');
+}
+var stopsIn = (el) => [...isTabStop(el) ? [el] : [], ...tabStops(el)];
+function appended(now, had) {
+  const seen = new Set(had);
+  const fresh = now.filter((el) => !seen.has(el));
+  const last = had.at(-1);
+  return (last?.isConnected ? fresh.find((el) => last.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING) : void 0) ?? fresh[0];
+}
+function whenRowsCome(place, hadRows, hadStops, button, then) {
+  if (!place || typeof MutationObserver === "undefined") return () => {
+  };
+  const rows = new Set(hadRows), stops = new Set(hadStops);
+  const observer = new MutationObserver((records) => {
+    if (!button.isConnected) return stop();
+    const content = before(place);
+    const fresh = hadRows.length ? content.flatMap(rowsOf).some((r) => !rows.has(r)) || content.flatMap(stopsIn).some((s) => !stops.has(s)) : records.some((r) => Array.from(r.addedNodes).some((n) => n instanceof Element && content.some((c) => c === n || c.contains(n))));
+    if (!fresh) return;
+    stop();
+    then();
+  });
+  const timer = setTimeout(stop, 1e4);
+  function stop() {
+    observer.disconnect();
+    clearTimeout(timer);
+  }
+  observer.observe(place.parent, { childList: true, subtree: true });
+  return stop;
+}
+function byKeyboard(el) {
+  try {
+    return el.matches(":focus-visible");
+  } catch {
+    return true;
+  }
+}
+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;
+  const sizes2 = pageSizeOptions && pageSize != null ? withSize(pageSizeOptions, pageSize) : pageSizeOptions;
+  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",
+          options: (sizes2 ?? 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(AutoTooltip, { content: "Previous page", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: (e) => {
+            focusAfterSelfRemoval(e.currentTarget);
+            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",
+            FOCUS_RING
+          ),
+          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)]",
+              FOCUS_RING,
+              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(AutoTooltip, { content: "Next page", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: (e) => {
+            focusAfterSelfRemoval(e.currentTarget);
+            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",
+            FOCUS_RING
+          ),
+          children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 16 })
+        }
+      ) })
+    ] })
+  ] });
+}
+function withSize(options, size) {
+  if (options.includes(size)) return options;
+  const descending = options.length > 1 && options.every((n, i) => i === 0 || options[i - 1] >= n);
+  const at = options.findIndex((n) => descending ? n < size : n > size);
+  return at < 0 ? [...options, size] : [...options.slice(0, at), size, ...options.slice(at)];
+}
+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)]",
+            FOCUS_RING
+          ),
+          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",
+                FOCUS_RING
+              ),
+              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 { NumberInput, Pagination, Popover, pagerPart, usePagination, useWholeListCheck };
+//# sourceMappingURL=chunk-V2ARGHJN.js.map
+//# sourceMappingURL=chunk-V2ARGHJN.js.map