@uisatin/ui 0.0.0-stage → 0.1.1

package/chunk-P4O6TGDR.js

@@ -0,0 +1,166 @@
+import { menuItemClass, MenuItemContent } from './chunk-3DINAQLL.js';
+import { Kbd, KbdHint, KbdArrowUp, KbdArrowDown, KbdReturn } from './chunk-BKZBWPUH.js';
+import { cn } from './chunk-H63FYCMY.js';
+import * as React from 'react';
+import { Dialog } from 'radix-ui';
+import { Search } from 'iconoir-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var hit = (item, q) => {
+  const t = q.trim().toLowerCase();
+  if (!t) return true;
+  return [item.label, item.description ?? "", ...item.keywords ?? []].some((s) => s.toLowerCase().includes(t));
+};
+function CommandMenu({
+  groups,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  hotkey = true,
+  placeholder = "Type a command or search\u2026",
+  emptyText = (q) => `No results for \u201C${q}\u201D`,
+  hints = true,
+  modal = true,
+  container,
+  onOpenAutoFocus,
+  className
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+  const open = openProp ?? uncontrolledOpen;
+  const setOpen = React.useCallback(
+    (next) => {
+      if (openProp == null) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [openProp, onOpenChange]
+  );
+  const [query, setQuery] = React.useState("");
+  const [active, setActive] = React.useState(0);
+  const listId = React.useId();
+  const listRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!hotkey) return;
+    const onKey = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+        e.preventDefault();
+        setOpen(!open);
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [hotkey, open, setOpen]);
+  React.useEffect(() => {
+    if (open) {
+      setQuery("");
+      setActive(0);
+    }
+  }, [open]);
+  const shown = groups.map((g) => ({ ...g, items: g.items.filter((i) => hit(i, query)) })).filter((g) => g.items.length);
+  const flat = shown.flatMap((g) => g.items);
+  const optionId = (i) => `${listId}-${i}`;
+  React.useEffect(() => {
+    listRef.current?.querySelector(`[id="${optionId(active)}"]`)?.scrollIntoView({ block: "nearest" });
+  }, [active]);
+  const run = (item) => {
+    if (!item || item.disabled) return;
+    setOpen(false);
+    item.onSelect?.();
+  };
+  const position = container ? "absolute" : "fixed";
+  let index = -1;
+  return /* @__PURE__ */ jsx(Dialog.Root, { open, onOpenChange: setOpen, modal, children: /* @__PURE__ */ jsxs(Dialog.Portal, { container, children: [
+    /* @__PURE__ */ jsx(Dialog.Overlay, { className: cn(position, "inset-0 z-50 bg-black-a40") }),
+    /* @__PURE__ */ jsx("div", { className: cn(position, "pointer-events-none inset-0 z-50 flex items-center justify-center p-4"), children: /* @__PURE__ */ jsxs(
+      Dialog.Content,
+      {
+        "data-slot": "command-menu",
+        "aria-describedby": void 0,
+        onOpenAutoFocus,
+        className: cn(
+          "pointer-events-auto flex h-fit max-h-[min(480px,76vh)] w-[520px] max-w-full flex-col overflow-hidden",
+          "rounded-2xl border border-border-subtle bg-bg-popover",
+          "[box-shadow:0_4px_6px_-4px_var(--effect-shadow-sm),0_10px_15px_-3px_var(--effect-shadow-sm)]",
+          "outline-none data-[state=open]:animate-[satin-enter_var(--duration-base)_var(--ease-out)]",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Dialog.Title, { className: "sr-only", children: "Command menu" }),
+          /* @__PURE__ */ jsxs("label", { className: "flex h-12 shrink-0 items-center gap-2 border-b border-border-subtle px-4 text-text-muted", children: [
+            /* @__PURE__ */ jsx(Search, { "aria-hidden": true, className: "size-4 shrink-0 [stroke-width:1.875]" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                role: "combobox",
+                "aria-expanded": true,
+                "aria-controls": listId,
+                "aria-autocomplete": "list",
+                "aria-activedescendant": flat[active] ? optionId(active) : void 0,
+                "aria-label": "Search commands",
+                value: query,
+                placeholder,
+                onChange: (e) => {
+                  setQuery(e.target.value);
+                  setActive(0);
+                },
+                onKeyDown: (e) => {
+                  if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+                    e.preventDefault();
+                    const step = e.key === "ArrowDown" ? 1 : -1;
+                    setActive((a) => flat.length ? (a + step + flat.length) % flat.length : 0);
+                  } else if (e.key === "Enter") {
+                    e.preventDefault();
+                    run(flat[active]);
+                  }
+                },
+                className: "min-w-0 flex-1 bg-transparent text-base leading-[21px] text-text-default outline-none placeholder:text-text-muted focus-visible:ring-0"
+              }
+            ),
+            /* @__PURE__ */ jsx(Kbd, { size: "md", "aria-hidden": true, children: "Esc" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { ref: listRef, id: listId, role: "listbox", "aria-label": "Commands", className: "flex min-h-0 flex-col gap-2 overflow-y-auto p-2", children: flat.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-2 py-8 text-center text-sm text-text-muted", children: emptyText(query) }) : shown.map((g, gi) => /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": `${listId}-g${gi}`, className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx("div", { id: `${listId}-g${gi}`, className: "flex h-6 items-center px-2 text-xs leading-3 font-medium tracking-normal text-text-muted", children: g.label }),
+            g.items.map((item) => {
+              index += 1;
+              const i = index;
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  id: optionId(i),
+                  role: "option",
+                  "aria-selected": i === active,
+                  "aria-disabled": item.disabled || void 0,
+                  "data-highlighted": i === active ? "" : void 0,
+                  "data-disabled": item.disabled ? "" : void 0,
+                  onPointerMove: () => setActive(i),
+                  onMouseDown: (e) => e.preventDefault(),
+                  onClick: () => run(item),
+                  className: menuItemClass,
+                  children: /* @__PURE__ */ jsx(
+                    MenuItemContent,
+                    {
+                      label: item.label,
+                      description: item.description,
+                      icon: item.icon,
+                      layout: "inline",
+                      shortcut: item.shortcut
+                    }
+                  )
+                },
+                item.id
+              );
+            })
+          ] }, gi)) }),
+          hints && /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: "flex h-10 shrink-0 items-center gap-4 border-t border-border-subtle px-4", children: [
+            /* @__PURE__ */ jsx(KbdHint, { keys: [/* @__PURE__ */ jsx(KbdArrowUp, {}, "up"), /* @__PURE__ */ jsx(KbdArrowDown, {}, "down")], label: "Navigate" }),
+            /* @__PURE__ */ jsx(KbdHint, { keys: [/* @__PURE__ */ jsx(KbdReturn, {}, "return")], label: "Open" }),
+            /* @__PURE__ */ jsx(KbdHint, { className: "ml-auto", keys: ["Esc"], label: "Close" })
+          ] })
+        ]
+      }
+    ) })
+  ] }) });
+}
+
+export { CommandMenu };
+//# sourceMappingURL=chunk-P4O6TGDR.js.map
+//# sourceMappingURL=chunk-P4O6TGDR.js.map

package/chunk-P4O6TGDR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/command-menu.tsx"],"names":["DialogPrimitive"],"mappings":"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","file":"chunk-P4O6TGDR.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Dialog as DialogPrimitive } from 'radix-ui'\nimport { Search } from 'iconoir-react'\nimport { cn } from '../lib/utils'\nimport { menuItemClass, MenuItemContent } from './dropdown'\nimport { Kbd, KbdArrowDown, KbdArrowUp, KbdHint, KbdReturn } from './kbd'\n\n/**\n * Command menu, 1:1 with the uiKit `Command menu` set (4024:3582): the ⌘K palette. A 520px\n * popover surface (radius-2xl, border/subtle, the shadcn `lg` shadow) with a 48px search row\n * (16px icon, 14px query, an Esc key, 16px in) over a border/subtle rule; titled groups 8px\n * apart in 8px of padding, each with a 24px heading (12px medium, text/muted) and inline menu\n * rows; and a 40px footer of key hints (Navigate, Open on the left, Close on the right).\n *\n * Rows are the Dropdown's: a 16px icon, the label, an optional description after it and an\n * optional `shortcut` (Kbd sm) on the right. The highlighted row takes the menu highlight,\n * bg/selected, whether the pointer or the arrow keys put it there. The first match is\n * highlighted; Enter runs it and closes the menu.\n *\n * It sits in the middle of the screen (or of its `container`).\n *\n * Built on the Radix Dialog (focus trap, Escape, focus back to where it was). With `hotkey`,\n * ⌘K or Ctrl+K anywhere on the page toggles it.\n */\nexport interface CommandItem {\n  id: string\n  label: string\n  description?: string\n  icon?: React.ReactNode\n  /** Keys that run it outside the menu, e.g. \"⌘N\". Optional. */\n  shortcut?: string\n  /** More words to match on. */\n  keywords?: string[]\n  disabled?: boolean\n  onSelect?: () => void\n}\n\nexport interface CommandGroup {\n  label: React.ReactNode\n  items: CommandItem[]\n}\n\nexport interface CommandMenuProps {\n  groups: CommandGroup[]\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  /** Toggle the menu with ⌘K / Ctrl+K. */\n  hotkey?: boolean\n  placeholder?: string\n  /** Shown when nothing matches; gets the query. */\n  emptyText?: (query: string) => React.ReactNode\n  /** Show the footer of key hints. */\n  hints?: boolean\n  /** Modal blocks the page and shows the overlay; turn it off for inline previews. */\n  modal?: boolean\n  /** Portal target. Defaults to `document.body`. */\n  container?: HTMLElement | null\n  onOpenAutoFocus?: (event: Event) => void\n  className?: string\n}\n\nconst hit = (item: CommandItem, q: string) => {\n  const t = q.trim().toLowerCase()\n  if (!t) return true\n  return [item.label, item.description ?? '', ...(item.keywords ?? [])].some((s) => s.toLowerCase().includes(t))\n}\n\nexport function CommandMenu({\n  groups,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  hotkey = true,\n  placeholder = 'Type a command or search…',\n  emptyText = (q) => `No results for “${q}”`,\n  hints = true,\n  modal = true,\n  container,\n  onOpenAutoFocus,\n  className,\n}: CommandMenuProps) {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const open = openProp ?? uncontrolledOpen\n  const setOpen = React.useCallback(\n    (next: boolean) => {\n      if (openProp == null) setUncontrolledOpen(next)\n      onOpenChange?.(next)\n    },\n    [openProp, onOpenChange],\n  )\n\n  const [query, setQuery] = React.useState('')\n  const [active, setActive] = React.useState(0)\n  const listId = React.useId()\n  const listRef = React.useRef<HTMLDivElement>(null)\n\n  React.useEffect(() => {\n    if (!hotkey) return\n    const onKey = (e: KeyboardEvent) => {\n      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {\n        e.preventDefault()\n        setOpen(!open)\n      }\n    }\n    document.addEventListener('keydown', onKey)\n    return () => document.removeEventListener('keydown', onKey)\n  }, [hotkey, open, setOpen])\n\n  // A fresh query every time it opens.\n  React.useEffect(() => {\n    if (open) {\n      setQuery('')\n      setActive(0)\n    }\n  }, [open])\n\n  const shown = groups.map((g) => ({ ...g, items: g.items.filter((i) => hit(i, query)) })).filter((g) => g.items.length)\n  const flat = shown.flatMap((g) => g.items)\n  const optionId = (i: number) => `${listId}-${i}`\n\n  // Keep the highlighted row in view as the arrows move it.\n  React.useEffect(() => {\n    listRef.current?.querySelector(`[id=\"${optionId(active)}\"]`)?.scrollIntoView({ block: 'nearest' })\n  }, [active])\n\n  const run = (item: CommandItem | undefined) => {\n    if (!item || item.disabled) return\n    setOpen(false)\n    item.onSelect?.()\n  }\n\n  const position = container ? 'absolute' : 'fixed'\n  let index = -1\n\n  return (\n    <DialogPrimitive.Root open={open} onOpenChange={setOpen} modal={modal}>\n      <DialogPrimitive.Portal container={container}>\n        <DialogPrimitive.Overlay className={cn(position, 'inset-0 z-50 bg-black-a40')} />\n        <div className={cn(position, 'pointer-events-none inset-0 z-50 flex items-center justify-center p-4')}>\n          <DialogPrimitive.Content\n            data-slot=\"command-menu\"\n            aria-describedby={undefined}\n            onOpenAutoFocus={onOpenAutoFocus}\n            className={cn(\n              'pointer-events-auto flex h-fit max-h-[min(480px,76vh)] w-[520px] max-w-full flex-col overflow-hidden',\n              'rounded-2xl border border-border-subtle bg-bg-popover',\n              '[box-shadow:0_4px_6px_-4px_var(--effect-shadow-sm),0_10px_15px_-3px_var(--effect-shadow-sm)]',\n              'outline-none data-[state=open]:animate-[satin-enter_var(--duration-base)_var(--ease-out)]',\n              className,\n            )}\n          >\n            <DialogPrimitive.Title className=\"sr-only\">Command menu</DialogPrimitive.Title>\n            <label className=\"flex h-12 shrink-0 items-center gap-2 border-b border-border-subtle px-4 text-text-muted\">\n              <Search aria-hidden className=\"size-4 shrink-0 [stroke-width:1.875]\" />\n              <input\n                role=\"combobox\"\n                aria-expanded\n                aria-controls={listId}\n                aria-autocomplete=\"list\"\n                aria-activedescendant={flat[active] ? optionId(active) : undefined}\n                aria-label=\"Search commands\"\n                value={query}\n                placeholder={placeholder}\n                onChange={(e) => {\n                  setQuery(e.target.value)\n                  setActive(0)\n                }}\n                onKeyDown={(e) => {\n                  if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n                    e.preventDefault()\n                    const step = e.key === 'ArrowDown' ? 1 : -1\n                    setActive((a) => (flat.length ? (a + step + flat.length) % flat.length : 0))\n                  } else if (e.key === 'Enter') {\n                    e.preventDefault()\n                    run(flat[active])\n                  }\n                }}\n                className=\"min-w-0 flex-1 bg-transparent text-base leading-[21px] text-text-default outline-none placeholder:text-text-muted focus-visible:ring-0\"\n              />\n              <Kbd size=\"md\" aria-hidden>\n                Esc\n              </Kbd>\n            </label>\n\n            <div ref={listRef} id={listId} role=\"listbox\" aria-label=\"Commands\" className=\"flex min-h-0 flex-col gap-2 overflow-y-auto p-2\">\n              {flat.length === 0 ? (\n                <p className=\"px-2 py-8 text-center text-sm text-text-muted\">{emptyText(query)}</p>\n              ) : (\n                shown.map((g, gi) => (\n                  <div key={gi} role=\"group\" aria-labelledby={`${listId}-g${gi}`} className=\"flex flex-col\">\n                    <div id={`${listId}-g${gi}`} className=\"flex h-6 items-center px-2 text-xs leading-3 font-medium tracking-normal text-text-muted\">\n                      {g.label}\n                    </div>\n                    {g.items.map((item) => {\n                      index += 1\n                      const i = index\n                      return (\n                        <div\n                          key={item.id}\n                          id={optionId(i)}\n                          role=\"option\"\n                          aria-selected={i === active}\n                          aria-disabled={item.disabled || undefined}\n                          data-highlighted={i === active ? '' : undefined}\n                          data-disabled={item.disabled ? '' : undefined}\n                          onPointerMove={() => setActive(i)}\n                          onMouseDown={(e) => e.preventDefault()}\n                          onClick={() => run(item)}\n                          className={menuItemClass}\n                        >\n                          <MenuItemContent\n                            label={item.label}\n                            description={item.description}\n                            icon={item.icon}\n                            layout=\"inline\"\n                            shortcut={item.shortcut}\n                          />\n                        </div>\n                      )\n                    })}\n                  </div>\n                ))\n              )}\n            </div>\n\n            {hints && (\n              <div aria-hidden className=\"flex h-10 shrink-0 items-center gap-4 border-t border-border-subtle px-4\">\n                <KbdHint keys={[<KbdArrowUp key=\"up\" />, <KbdArrowDown key=\"down\" />]} label=\"Navigate\" />\n                <KbdHint keys={[<KbdReturn key=\"return\" />]} label=\"Open\" />\n                <KbdHint className=\"ml-auto\" keys={['Esc']} label=\"Close\" />\n              </div>\n            )}\n          </DialogPrimitive.Content>\n        </div>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  )\n}\n"]}

package/chunk-PF3YBUKT.js

@@ -0,0 +1,81 @@
+import { menuSurfaceClass, MenuItemContent, menuItemClass } from './chunk-3DINAQLL.js';
+import { cn } from './chunk-H63FYCMY.js';
+import 'react';
+import { ContextMenu as ContextMenu$1 } from 'radix-ui';
+import { NavArrowRight } from 'iconoir-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var contentClass = cn(
+  "pointer-events-auto z-50 flex w-[255px] max-w-[calc(100vw-16px)] flex-col overflow-x-clip overflow-y-auto p-1",
+  menuSurfaceClass,
+  "outline-none data-[state=open]:animate-[satin-enter_var(--duration-base)_var(--ease-out)]"
+);
+function ContextMenu({
+  trigger,
+  children,
+  onOpenChange,
+  container,
+  modal = true,
+  onFocusOutside,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(ContextMenu$1.Root, { onOpenChange, modal, children: [
+    /* @__PURE__ */ jsx(ContextMenu$1.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(ContextMenu$1.Portal, { container, children: /* @__PURE__ */ jsx(
+      ContextMenu$1.Content,
+      {
+        "data-slot": "context-menu",
+        collisionPadding: 8,
+        onFocusOutside,
+        className: cn(contentClass, "origin-(--radix-context-menu-content-transform-origin)", "max-h-(--radix-context-menu-content-available-height)", className),
+        children
+      }
+    ) })
+  ] });
+}
+function ContextMenuItem({ label, icon, shortcut, description, destructive, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    ContextMenu$1.Item,
+    {
+      "data-slot": "context-menu-item",
+      textValue: label,
+      className: cn(menuItemClass, destructive && "[&_*]:text-action-destructive-fg", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(MenuItemContent, { label, icon, shortcut, description, layout: "inline" })
+    }
+  );
+}
+function ContextMenuSub({ label, icon, children, disabled }) {
+  return /* @__PURE__ */ jsxs(ContextMenu$1.Sub, { children: [
+    /* @__PURE__ */ jsxs(
+      ContextMenu$1.SubTrigger,
+      {
+        "data-slot": "context-menu-sub",
+        disabled,
+        textValue: label,
+        className: cn(menuItemClass, "data-[state=open]:bg-bg-selected"),
+        children: [
+          /* @__PURE__ */ jsx(MenuItemContent, { label, icon, layout: "inline" }),
+          /* @__PURE__ */ jsx(NavArrowRight, { "aria-hidden": true, className: "size-4 text-text-muted [stroke-width:1.875]" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(ContextMenu$1.Portal, { children: /* @__PURE__ */ jsx(
+      ContextMenu$1.SubContent,
+      {
+        sideOffset: 4,
+        alignOffset: -5,
+        collisionPadding: 8,
+        className: cn(contentClass, "w-[220px] origin-(--radix-context-menu-content-transform-origin)"),
+        children
+      }
+    ) })
+  ] });
+}
+function ContextMenuSeparator({ className }) {
+  return /* @__PURE__ */ jsx(ContextMenu$1.Separator, { className: cn("-mx-1 my-1 h-px bg-bg-muted", className) });
+}
+
+export { ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuSub };
+//# sourceMappingURL=chunk-PF3YBUKT.js.map
+//# sourceMappingURL=chunk-PF3YBUKT.js.map

package/chunk-PF3YBUKT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/context-menu.tsx"],"names":["ContextPrimitive"],"mappings":"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","file":"chunk-PF3YBUKT.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { ContextMenu as ContextPrimitive } from 'radix-ui'\nimport { NavArrowRight } from 'iconoir-react'\nimport { cn } from '../lib/utils'\nimport { MenuItemContent, menuItemClass, menuSurfaceClass, type MenuItemContentProps } from './dropdown'\n\n/**\n * ContextMenu, 1:1 with the uiKit design (🆕 context menu & hover card): DropdownMenu's surface\n * and rows, opened by right-click (or a long press) on its target, at the pointer. 255 wide, 4px\n * in, rows 0 apart, separators a 1px bg/muted rule. Shortcuts on the right as Kbd; a submenu row\n * ends in a text/muted chevron (the kit's `showSubmenu`) and opens beside it, 4px off; destructive\n * rows are action/destructive/fg (red-400 in dark), icon included, and go last.\n *\n * Built on the Radix ContextMenu: arrow keys, typeahead, Escape, Shift+F10 / the menu key on the\n * focused target.\n */\nexport interface ContextMenuProps {\n  /** What right-click opens the menu on. Rendered with `asChild`, so pass one element. */\n  trigger: React.ReactNode\n  /** `ContextMenuItem`s, `ContextMenuSub`s and `ContextMenuSeparator`s. */\n  children: React.ReactNode\n  onOpenChange?: (open: boolean) => void\n  /** Portal target. Defaults to `document.body`. */\n  container?: HTMLElement | null\n  /** Modal menus block the rest of the page while open. */\n  modal?: boolean\n  /** Focus moved outside a non-modal menu; call `preventDefault()` to keep it open. */\n  onFocusOutside?: (event: Event) => void\n  className?: string\n}\n\nconst contentClass = cn(\n  'pointer-events-auto z-50 flex w-[255px] max-w-[calc(100vw-16px)] flex-col overflow-x-clip overflow-y-auto p-1',\n  menuSurfaceClass,\n  'outline-none data-[state=open]:animate-[satin-enter_var(--duration-base)_var(--ease-out)]',\n)\n\nexport function ContextMenu({\n  trigger,\n  children,\n  onOpenChange,\n  container,\n  modal = true,\n  onFocusOutside,\n  className,\n}: ContextMenuProps) {\n  return (\n    <ContextPrimitive.Root onOpenChange={onOpenChange} modal={modal}>\n      <ContextPrimitive.Trigger asChild>{trigger}</ContextPrimitive.Trigger>\n      <ContextPrimitive.Portal container={container}>\n        <ContextPrimitive.Content\n          data-slot=\"context-menu\"\n          collisionPadding={8}\n          onFocusOutside={onFocusOutside}\n          className={cn(contentClass, 'origin-(--radix-context-menu-content-transform-origin)', 'max-h-(--radix-context-menu-content-available-height)', className)}\n        >\n          {children}\n        </ContextPrimitive.Content>\n      </ContextPrimitive.Portal>\n    </ContextPrimitive.Root>\n  )\n}\n\nexport interface ContextMenuItemProps\n  extends Omit<React.ComponentProps<typeof ContextPrimitive.Item>, 'children'>,\n    Pick<MenuItemContentProps, 'icon' | 'shortcut' | 'description'> {\n  label: string\n  /** Deletes or removes: action/destructive/fg, and best placed last. */\n  destructive?: boolean\n}\n\nexport function ContextMenuItem({ label, icon, shortcut, description, destructive, className, ...props }: ContextMenuItemProps) {\n  return (\n    <ContextPrimitive.Item\n      data-slot=\"context-menu-item\"\n      textValue={label}\n      className={cn(menuItemClass, destructive && '[&_*]:text-action-destructive-fg', className)}\n      {...props}\n    >\n      <MenuItemContent label={label} icon={icon} shortcut={shortcut} description={description} layout=\"inline\" />\n    </ContextPrimitive.Item>\n  )\n}\n\nexport interface ContextMenuSubProps extends Pick<MenuItemContentProps, 'icon'> {\n  label: string\n  /** The submenu's items. */\n  children: React.ReactNode\n  disabled?: boolean\n}\n\n/** A row that opens a submenu beside it (hover, →, or Enter). */\nexport function ContextMenuSub({ label, icon, children, disabled }: ContextMenuSubProps) {\n  return (\n    <ContextPrimitive.Sub>\n      <ContextPrimitive.SubTrigger\n        data-slot=\"context-menu-sub\"\n        disabled={disabled}\n        textValue={label}\n        className={cn(menuItemClass, 'data-[state=open]:bg-bg-selected')}\n      >\n        <MenuItemContent label={label} icon={icon} layout=\"inline\" />\n        <NavArrowRight aria-hidden className=\"size-4 text-text-muted [stroke-width:1.875]\" />\n      </ContextPrimitive.SubTrigger>\n      <ContextPrimitive.Portal>\n        <ContextPrimitive.SubContent\n          sideOffset={4}\n          alignOffset={-5}\n          collisionPadding={8}\n          className={cn(contentClass, 'w-[220px] origin-(--radix-context-menu-content-transform-origin)')}\n        >\n          {children}\n        </ContextPrimitive.SubContent>\n      </ContextPrimitive.Portal>\n    </ContextPrimitive.Sub>\n  )\n}\n\n/** A 1px bg/muted rule between groups of rows. */\nexport function ContextMenuSeparator({ className }: { className?: string }) {\n  return <ContextPrimitive.Separator className={cn('-mx-1 my-1 h-px bg-bg-muted', className)} />\n}\n"]}

package/chunk-PVOLDO4G.js

@@ -0,0 +1,47 @@
+import { Thinking } from './chunk-ESC5JCVQ.js';
+import { MessageActions } from './chunk-AN2RNJLR.js';
+import { cn } from './chunk-H63FYCMY.js';
+import 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function Message({
+  role = "assistant",
+  thinking,
+  thinkingLabel = "Thought for a moment",
+  source,
+  actions = true,
+  timestamp,
+  onFeedback,
+  onCopy,
+  onShare,
+  className,
+  children,
+  ...props
+}) {
+  if (role === "user") {
+    return /* @__PURE__ */ jsxs("div", { "data-slot": "message", "data-role": "user", className: cn("flex flex-col items-end gap-2", className), ...props, children: [
+      source && /* @__PURE__ */ jsx(SourceCard, { source }),
+      /* @__PURE__ */ jsx("div", { className: "max-w-full rounded-xl rounded-br-xs bg-action-inverse-bg px-3 py-2", children: /* @__PURE__ */ jsx("div", { className: "max-w-64 text-body break-words text-text-on-inverse", children }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "message", "data-role": "assistant", className: cn("flex flex-col items-start gap-3", className), ...props, children: [
+    thinking && thinking.length > 0 && /* @__PURE__ */ jsx(Thinking, { state: "collapsed", label: thinkingLabel, steps: thinking }),
+    /* @__PURE__ */ jsx("div", { className: "w-full text-body break-words text-text-default", children }),
+    actions && /* @__PURE__ */ jsx(MessageActions, { timestamp, onFeedback, onCopy, onShare })
+  ] });
+}
+function SourceCard({ source }) {
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    source.icon && /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center [&>*]:size-4", children: source.icon }),
+    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col overflow-clip whitespace-nowrap", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate text-sm leading-[18px] font-medium text-text-default", children: source.title }),
+      source.url != null && /* @__PURE__ */ jsx("span", { className: "truncate text-xs leading-3 tracking-normal text-text-muted", children: source.url })
+    ] })
+  ] });
+  const cls = "flex max-w-full items-center gap-2.5 overflow-clip rounded-lg border border-border-subtle bg-bg-canvas py-2 pr-3 pl-2.5";
+  return source.href ? /* @__PURE__ */ jsx("a", { href: source.href, className: cls, children: body }) : /* @__PURE__ */ jsx("div", { className: cls, children: body });
+}
+
+export { Message };
+//# sourceMappingURL=chunk-PVOLDO4G.js.map
+//# sourceMappingURL=chunk-PVOLDO4G.js.map

package/chunk-PVOLDO4G.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/message.tsx"],"names":[],"mappings":";;;;;;AA6CO,SAAS,OAAA,CAAQ;AAAA,EACtB,IAAA,GAAO,WAAA;AAAA,EACP,QAAA;AAAA,EACA,aAAA,GAAgB,sBAAA;AAAA,EAChB,MAAA;AAAA,EACA,OAAA,GAAU,IAAA;AAAA,EACV,SAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAiB;AACf,EAAA,IAAI,SAAS,MAAA,EAAQ;AACnB,IAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,SAAA,EAAU,WAAA,EAAU,MAAA,EAAO,SAAA,EAAW,EAAA,CAAG,+BAAA,EAAiC,SAAS,CAAA,EAAI,GAAG,KAAA,EACtG,QAAA,EAAA;AAAA,MAAA,MAAA,oBAAU,GAAA,CAAC,cAAW,MAAA,EAAgB,CAAA;AAAA,sBACvC,GAAA,CAAC,SAAI,SAAA,EAAU,oEAAA,EACb,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qDAAA,EAAuD,QAAA,EAAS,CAAA,EACjF;AAAA,KAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,SAAA,EAAU,WAAA,EAAU,WAAA,EAAY,SAAA,EAAW,EAAA,CAAG,iCAAA,EAAmC,SAAS,CAAA,EAAI,GAAG,KAAA,EAC7G,QAAA,EAAA;AAAA,IAAA,QAAA,IAAY,QAAA,CAAS,MAAA,GAAS,CAAA,oBAAK,GAAA,CAAC,QAAA,EAAA,EAAS,OAAM,WAAA,EAAY,KAAA,EAAO,aAAA,EAAe,KAAA,EAAO,QAAA,EAAU,CAAA;AAAA,oBACvG,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gDAAA,EAAkD,QAAA,EAAS,CAAA;AAAA,IACzE,2BAAW,GAAA,CAAC,cAAA,EAAA,EAAe,SAAA,EAAsB,UAAA,EAAwB,QAAgB,OAAA,EAAkB;AAAA,GAAA,EAC9G,CAAA;AAEJ;AAEA,SAAS,UAAA,CAAW,EAAE,MAAA,EAAO,EAA8B;AACzD,EAAA,MAAM,uBACJ,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,MAAA,CAAO,wBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,+DAAA,EAAiE,iBAAO,IAAA,EAAK,CAAA;AAAA,oBAC7G,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uDAAA,EACd,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,+DAAA,EAAiE,QAAA,EAAA,MAAA,CAAO,KAAA,EAAM,CAAA;AAAA,MAC7F,MAAA,CAAO,OAAO,IAAA,oBACb,GAAA,CAAC,UAAK,SAAA,EAAU,4DAAA,EAA8D,iBAAO,GAAA,EAAI;AAAA,KAAA,EAE7F;AAAA,GAAA,EACF,CAAA;AAEF,EAAA,MAAM,GAAA,GAAM,yHAAA;AACZ,EAAA,OAAO,MAAA,CAAO,IAAA,mBACZ,GAAA,CAAC,GAAA,EAAA,EAAE,MAAM,MAAA,CAAO,IAAA,EAAM,SAAA,EAAW,GAAA,EAC9B,gBACH,CAAA,mBAEA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,KAAM,QAAA,EAAA,IAAA,EAAK,CAAA;AAE/B","file":"chunk-PVOLDO4G.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../lib/utils'\nimport { MessageActions, type MessageFeedback } from './message-actions'\nimport { Thinking, type ThinkingStep } from './thinking'\n\n/**\n * Message, 1:1 with the uiKit Message docs view (3890:70165), composed from `_chat/userMessage`\n * (901:20155), `_chat/source` and `_chat/answerActions` (901:20164, see MessageActions).\n *\n * user: a right-aligned action/inverse bubble (12px corners, 4px bottom-right), 12 × 8\n * padding, text/on-inverse 13/19.5, wrapping at 256px of text. A source card sits 8px above\n * it: bg/canvas, border/subtle, radius 10, 16px logo, title medium 13/18, url 12/12 muted.\n *\n * assistant: no bubble, so long answers read like a document — text/default 13/19.5, with\n * the collapsed Thinking above and the actions below, 12px apart.\n */\nexport interface MessageSource {\n  /** The page or message title, \"Q3 pipeline review\". */\n  title: React.ReactNode\n  /** Shown under the title, \"docs.sature.app/q3-review\". */\n  url?: React.ReactNode\n  /** A 16px logo or favicon. */\n  icon?: React.ReactNode\n  /** Makes the card a link. */\n  href?: string\n}\n\nexport interface MessageProps extends React.ComponentProps<'div'> {\n  role?: 'user' | 'assistant'\n  /** The steps the agent ran; shows a collapsed Thinking above an assistant answer. */\n  thinking?: ThinkingStep[]\n  /** The summary on that Thinking header. */\n  thinkingLabel?: React.ReactNode\n  /** A page or message the user brought in, shown as a card above their bubble. */\n  source?: MessageSource\n  /** Feedback, copy and share under an assistant answer. Off while it streams. */\n  actions?: boolean\n  timestamp?: string\n  onFeedback?: (value: MessageFeedback) => void\n  onCopy?: () => void\n  onShare?: () => void\n}\n\nexport function Message({\n  role = 'assistant',\n  thinking,\n  thinkingLabel = 'Thought for a moment',\n  source,\n  actions = true,\n  timestamp,\n  onFeedback,\n  onCopy,\n  onShare,\n  className,\n  children,\n  ...props\n}: MessageProps) {\n  if (role === 'user') {\n    return (\n      <div data-slot=\"message\" data-role=\"user\" className={cn('flex flex-col items-end gap-2', className)} {...props}>\n        {source && <SourceCard source={source} />}\n        <div className=\"max-w-full rounded-xl rounded-br-xs bg-action-inverse-bg px-3 py-2\">\n          <div className=\"max-w-64 text-body break-words text-text-on-inverse\">{children}</div>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div data-slot=\"message\" data-role=\"assistant\" className={cn('flex flex-col items-start gap-3', className)} {...props}>\n      {thinking && thinking.length > 0 && <Thinking state=\"collapsed\" label={thinkingLabel} steps={thinking} />}\n      <div className=\"w-full text-body break-words text-text-default\">{children}</div>\n      {actions && <MessageActions timestamp={timestamp} onFeedback={onFeedback} onCopy={onCopy} onShare={onShare} />}\n    </div>\n  )\n}\n\nfunction SourceCard({ source }: { source: MessageSource }) {\n  const body = (\n    <>\n      {source.icon && <span className=\"flex size-4 shrink-0 items-center justify-center [&>*]:size-4\">{source.icon}</span>}\n      <span className=\"flex min-w-0 flex-col overflow-clip whitespace-nowrap\">\n        <span className=\"truncate text-sm leading-[18px] font-medium text-text-default\">{source.title}</span>\n        {source.url != null && (\n          <span className=\"truncate text-xs leading-3 tracking-normal text-text-muted\">{source.url}</span>\n        )}\n      </span>\n    </>\n  )\n  const cls = 'flex max-w-full items-center gap-2.5 overflow-clip rounded-lg border border-border-subtle bg-bg-canvas py-2 pr-3 pl-2.5'\n  return source.href ? (\n    <a href={source.href} className={cls}>\n      {body}\n    </a>\n  ) : (\n    <div className={cls}>{body}</div>\n  )\n}\n"]}

package/chunk-QS4N4MNP.js

@@ -0,0 +1,215 @@
+import { useSlidingIndicator, SLIDE_MS } from './chunk-J3NSDRVH.js';
+import { Button } from './chunk-HNQUX43Z.js';
+import { cn } from './chunk-H63FYCMY.js';
+import * as React from 'react';
+import { NavArrowLeft, NavArrowRight } from 'iconoir-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function paginationRange(page, pageCount, siblings = 1) {
+  const slots = siblings * 2 + 5;
+  const span = (a, b) => Array.from({ length: b - a + 1 }, (_, i) => a + i);
+  if (pageCount <= slots) return span(1, pageCount);
+  const left = Math.max(page - siblings, 1);
+  const right = Math.min(page + siblings, pageCount);
+  const showLeftGap = left > 3;
+  const showRightGap = right < pageCount - 2;
+  if (!showLeftGap) return [...span(1, slots - 2), "gap", pageCount];
+  if (!showRightGap) return [1, "gap", ...span(pageCount - (slots - 3), pageCount)];
+  return [1, "gap", ...span(left, right), "gap", pageCount];
+}
+var pageClass = cn(
+  "relative z-10 grid h-control-height min-w-control-height place-items-center overflow-hidden rounded-lg px-1.5 text-sm text-text-muted tabular-nums",
+  "transition-colors duration-(--duration-fast) ease-(--ease-out) outline-none focus-visible:shadow-border-focus",
+  "hover:bg-bg-hover hover:text-text-default",
+  "aria-[current=page]:font-medium aria-[current=page]:text-text-default aria-[current=page]:hover:bg-transparent"
+);
+var STRIP_MS = SLIDE_MS;
+var STEP_PX = 32;
+function PageText({ text, dir, motion }) {
+  const [state, setState] = React.useState({ text, old: null, dir, n: 0 });
+  if (state.text !== text) setState({ text, old: motion === "none" ? null : state.text, dir, n: state.n + 1 });
+  const animate = motion !== "none" && state.n > 0;
+  return (
+    // Clipped to the wider number, so in the compact "Page 5 of 12" a moving number never runs
+    // into the words around it.
+    /* @__PURE__ */ jsxs("span", { className: "inline-grid overflow-hidden align-bottom", children: [
+      state.old != null && /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          "data-motion": motion,
+          "data-phase": "out",
+          "data-dir": state.dir,
+          className: "satin-page-text col-start-1 row-start-1 text-center",
+          onAnimationEnd: () => setState((s) => ({ ...s, old: null })),
+          children: state.old
+        },
+        `o${state.n}`
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-motion": animate ? motion : void 0,
+          "data-phase": animate ? "in" : void 0,
+          "data-dir": state.dir,
+          className: "satin-page-text col-start-1 row-start-1 text-center",
+          children: state.text
+        },
+        `n${state.n}`
+      )
+    ] })
+  );
+}
+function Pagination({
+  pageCount,
+  page: pageProp,
+  defaultPage = 1,
+  onPageChange,
+  getHref,
+  layout = "full",
+  siblings = 1,
+  previousLabel = "Previous",
+  nextLabel = "Next",
+  motion = "scroll",
+  className,
+  "aria-label": ariaLabel = "Pagination",
+  ...props
+}) {
+  const [uncontrolled, setUncontrolled] = React.useState(defaultPage);
+  const page = Math.min(Math.max(pageProp ?? uncontrolled, 1), Math.max(pageCount, 1));
+  const go = (p) => {
+    if (p < 1 || p > pageCount || p === page) return;
+    if (motion === "scroll") snapshot();
+    if (pageProp == null) setUncontrolled(p);
+    onPageChange?.(p);
+  };
+  const prevPage = React.useRef(page);
+  const dir = page >= prevPage.current ? "next" : "prev";
+  React.useEffect(() => {
+    prevPage.current = page;
+  }, [page]);
+  const listRef = React.useRef(null);
+  const pill = useSlidingIndicator(listRef, '[aria-current="page"]', `${page}|${pageCount}|${layout}|${siblings}`, {
+    animate: motion !== "none"
+  });
+  const textMotion = motion === "slide" ? "fade" : "none";
+  const ghostRef = React.useRef(null);
+  const before = React.useRef(null);
+  function snapshot() {
+    const list = listRef.current;
+    if (!list) return;
+    const base = list.getBoundingClientRect().left;
+    const map = /* @__PURE__ */ new Map();
+    list.querySelectorAll("[data-cell]").forEach((li) => {
+      const face = li.firstElementChild;
+      if (face) map.set(li.dataset.cell, { x: li.getBoundingClientRect().left - base, node: face.cloneNode(true) });
+    });
+    before.current = map;
+  }
+  React.useLayoutEffect(() => {
+    const prev = before.current;
+    before.current = null;
+    const list = listRef.current;
+    if (!prev || !list || motion !== "scroll" || layout !== "full") return;
+    if (typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+    const sign = dir === "next" ? 1 : -1;
+    const timing = { duration: STRIP_MS, easing: "cubic-bezier(0.23, 1, 0.32, 1)" };
+    const seen = /* @__PURE__ */ new Set();
+    list.querySelectorAll("[data-cell]").forEach((li) => {
+      const key = li.dataset.cell;
+      seen.add(key);
+      li.getAnimations().forEach((a) => a.cancel());
+      const from = prev.get(key);
+      if (from) {
+        const dx = from.x - li.offsetLeft;
+        if (Math.abs(dx) > 0.5) li.animate([{ transform: `translateX(${dx}px)` }, { transform: "none" }], timing);
+      } else {
+        li.animate([{ transform: `translateX(${sign * STEP_PX}px)`, opacity: 0 }, { transform: "none", opacity: 1 }], timing);
+      }
+    });
+    const layer = ghostRef.current;
+    if (!layer) return;
+    for (const [key, { x, node }] of prev) {
+      if (seen.has(key)) continue;
+      node.removeAttribute("aria-current");
+      node.style.cssText = `position:absolute;top:0;left:${x}px;margin:0`;
+      layer.appendChild(node);
+      node.animate([{ transform: "none", opacity: 1 }, { transform: `translateX(${-sign * STEP_PX}px)`, opacity: 0 }], {
+        ...timing,
+        duration: STRIP_MS * 0.6
+      }).finished.then(
+        () => node.remove(),
+        () => node.remove()
+      );
+    }
+  }, [page, motion, layout, dir]);
+  const target = (p, className2, children, extra) => getHref ? /* @__PURE__ */ jsx("a", { href: getHref(p), className: className2, onClick: () => go(p), ...extra, children }) : /* @__PURE__ */ jsx("button", { type: "button", className: cn("cursor-pointer", className2), onClick: () => go(p), ...extra, children });
+  const step = (dir2) => {
+    const to = page + dir2;
+    const disabled = to < 1 || to > pageCount;
+    const label = dir2 < 0 ? previousLabel : nextLabel;
+    const icon = dir2 < 0 ? /* @__PURE__ */ jsx(NavArrowLeft, { "aria-hidden": true }) : /* @__PURE__ */ jsx(NavArrowRight, { "aria-hidden": true });
+    const compact = layout === "compact";
+    const content = compact ? icon : dir2 < 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon,
+      label
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      label,
+      icon
+    ] });
+    return getHref && !disabled ? /* @__PURE__ */ jsx(Button, { asChild: true, variant: "tertiary", iconOnly: compact, "aria-label": compact ? label : void 0, children: /* @__PURE__ */ jsx("a", { href: getHref(to), rel: dir2 < 0 ? "prev" : "next", onClick: () => go(to), children: content }) }) : /* @__PURE__ */ jsx(Button, { variant: "tertiary", iconOnly: compact, "aria-label": compact ? label : void 0, disabled, onClick: () => go(to), children: content });
+  };
+  return /* @__PURE__ */ jsx("nav", { "data-slot": "pagination", "data-layout": layout, "aria-label": ariaLabel, className: cn("flex items-center", className), ...props, children: layout === "compact" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    step(-1),
+    /* @__PURE__ */ jsxs("span", { className: "text-sm text-text-muted tabular-nums", "aria-live": "polite", children: [
+      "Page ",
+      /* @__PURE__ */ jsx(PageText, { text: String(page), dir, motion: motion === "scroll" ? "scroll" : textMotion }),
+      " of ",
+      pageCount
+    ] }),
+    step(1)
+  ] }) : /* @__PURE__ */ jsxs("ul", { ref: listRef, className: "relative flex items-center gap-1", children: [
+    /* @__PURE__ */ jsx(
+      "li",
+      {
+        ref: pill.ref,
+        "aria-hidden": true,
+        role: "presentation",
+        className: "pointer-events-none absolute top-0 left-0 h-control-height rounded-lg bg-bg-selected opacity-0"
+      }
+    ),
+    /* @__PURE__ */ jsx("li", { ref: ghostRef, "aria-hidden": true, role: "presentation", className: "pointer-events-none absolute inset-0 overflow-visible" }),
+    /* @__PURE__ */ jsx("li", { children: step(-1) }),
+    motion === "scroll" ? (
+      // The strip: pages keyed by their number, the two ellipses by their side.
+      paginationRange(page, pageCount, siblings).map((p, i, all) => {
+        const key = p === "gap" ? i < all.length / 2 ? "gap-start" : "gap-end" : `p${p}`;
+        return /* @__PURE__ */ jsx("li", { "data-cell": key, className: "relative", children: p === "gap" ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(pageClass, "pointer-events-none"), children: "\u2026" }) : target(p, pageClass, p, {
+          "aria-current": p === page ? "page" : void 0,
+          "aria-label": `Page ${p}`
+        }) }, key);
+      })
+    ) : (
+      // Slots keep their places (keyed by position), so paging changes numbers, not elements.
+      paginationRange(page, pageCount, siblings).map((p, i) => {
+        const gap = p === "gap";
+        const text = /* @__PURE__ */ jsx(PageText, { text: gap ? "\u2026" : String(p), dir, motion: textMotion });
+        return /* @__PURE__ */ jsx("li", { children: gap ? React.createElement(getHref ? "a" : "button", {
+          className: cn(pageClass, "pointer-events-none"),
+          "aria-hidden": true,
+          tabIndex: -1,
+          ...getHref ? {} : { type: "button", disabled: true },
+          children: text
+        }) : target(p, pageClass, text, {
+          "aria-current": p === page ? "page" : void 0,
+          "aria-label": `Page ${p}`
+        }) }, i);
+      })
+    ),
+    /* @__PURE__ */ jsx("li", { children: step(1) })
+  ] }) });
+}
+
+export { Pagination, paginationRange };
+//# sourceMappingURL=chunk-QS4N4MNP.js.map
+//# sourceMappingURL=chunk-QS4N4MNP.js.map