@verdify/ui 0.1.0

package/dist/components/menu/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/menu/menu.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  menuTriggerClass,\n  menuPopupClass,\n  menuItemVariants,\n  menuItemIconClass,\n  menuItemShortcutClass,\n  menuSubChevronClass,\n  menuLabelClass,\n  menuSeparatorClass,\n  type MenuItemVariantProps,\n} from \"./menu.variants\";\n\nexport interface MenuProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root> {}\n\n/**\n * Menu is a popup list of ACTIONS that a trigger opens — the row of commands behind a button, an\n * avatar, or a row's overflow control (spec §1). Reach for it when you want to fire an action (open,\n * rename, sign out, revoke a key), not pick a value: use Select to choose one option from a list, and\n * use the Sidebar for page-level navigation. Each item runs a command and then the menu closes.\n *\n * It is a NEUTRAL surface (spec §3): the popup, items, and separators are neutral, and the brand\n * violet never marks an item as \"the special one.\" The one colored item is the destructive item,\n * which takes the destructive ACTION treatment because the command it runs is irreversible — a risk\n * signal, not a status result; a verified result is never reported by a menu item (brand != state).\n *\n * Wraps the Radix DropdownMenu primitive (WAI-ARIA APG menu-button + menu pattern), which provides\n * the portal, roving tabindex, type-ahead, submenu, and Escape/arrow keyboard model — a stateful\n * primitive, so this file is `'use client'`.\n */\nexport function Menu(props: MenuProps) {\n  return <DropdownMenuPrimitive.Root {...props} />;\n}\n\nexport interface MenuTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger> {}\n\n/**\n * The control that opens the menu (spec §2 trigger): the one stop in the page tab order for this\n * control, carrying the focus ring. Radix sets `aria-haspopup=\"menu\"`, `aria-expanded`, and\n * `aria-controls` (pointing at the popup) for you. Pass `asChild` to wrap your own Button so the\n * trigger inherits its role, keyboard, and focus ring rather than nesting a second button; the bare\n * (non-`asChild`) form renders the default neutral-ghost trigger.\n */\nexport const MenuTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,\n  MenuTriggerProps\n>(function MenuTrigger({ className, asChild, ...props }, ref) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      ref={ref}\n      asChild={asChild}\n      className={asChild ? className : cn(menuTriggerClass, className)}\n      {...props}\n    />\n  );\n});\n\nexport interface MenuContentProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {}\n\n/**\n * Renders the portal and the popup (spec §2 popup): the floating `role=\"menu\"` surface that opens on\n * activation, raised above the page and anchored to the trigger. On open, focus moves into the popup\n * (first item, or last on Up) and roving tabindex tracks the active item; on close — by Escape,\n * activation, or click-away — focus returns to the trigger (Radix, spec §6/§7). The menu is NOT a\n * modal dialog: focus is not trapped, and Tab leaves the menu rather than stepping through items.\n * A neutral raised surface; brand violet and Verified Green never appear here (spec §3/§5/§8).\n */\nexport const MenuContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n  MenuContentProps\n>(function MenuContent({ className, sideOffset = 4, loop = true, ...props }, ref) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        ref={ref}\n        sideOffset={sideOffset}\n        // `loop` wraps arrow movement at the ends (spec §6: \"wrapping at the ends\") — Radix leaves\n        // it OFF by default, so we default it ON to honor the frozen keyboard model. Disabled items\n        // are skipped by the roving handler for free (Radix, spec §4/§6).\n        loop={loop}\n        className={cn(menuPopupClass, className)}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n});\n\nexport interface MenuItemProps\n  extends Omit<\n      React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>,\n      \"color\"\n    >,\n    MenuItemVariantProps {\n  /** The leading icon (spec §2): decorative, sized by `--size-icon-md`; the item names itself by its label text. */\n  icon?: React.ReactNode;\n  /** A trailing shortcut hint (spec §2): text such as \"⌘K\", in the muted label role; never a focus stop. */\n  shortcut?: React.ReactNode;\n}\n\n/**\n * One command row (spec §2 item, §4 states): a `role=\"menuitem\"` whose activation runs its command\n * and closes the menu, returning focus to the trigger (Radix). It holds an optional leading icon, a\n * label, and an optional trailing shortcut hint. Pointer hover and keyboard arrow movement share ONE\n * highlight (Radix `data-highlighted`), so the active item is the same for both (spec §4 Hover).\n *\n * `destructive` (spec §3 `item=destructive`) marks the ONE colored item — a command that is\n * irreversible (revoke a key, delete a profile). It takes the destructive ACTION treatment and must\n * name the consequence in its TEXT, never by color alone (spec §7/§8). A `disabled` item stays in the\n * menu and readable to assistive technology (`aria-disabled`), is skipped by arrow movement, and does\n * not fire on activation (spec §4 Disabled / §7).\n */\nexport const MenuItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n  MenuItemProps\n>(function MenuItem({ className, destructive, icon, shortcut, children, ...props }, ref) {\n  return (\n    <DropdownMenuPrimitive.Item\n      ref={ref}\n      className={cn(menuItemVariants({ destructive }), className)}\n      {...props}\n    >\n      {icon ? (\n        <span aria-hidden=\"true\" className={menuItemIconClass}>\n          {icon}\n        </span>\n      ) : null}\n      <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n      {shortcut ? <span className={menuItemShortcutClass}>{shortcut}</span> : null}\n    </DropdownMenuPrimitive.Item>\n  );\n});\n\nexport interface MenuGroupProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group> {\n  /**\n   * The non-interactive heading that partitions the popup (spec §2 group / group-label). It names the\n   * group for assistive technology via `aria-labelledby` (Radix `Label`) and is NEVER a focus stop.\n   */\n  label?: React.ReactNode;\n}\n\n/**\n * A set of related items under a non-interactive `group-label` that partitions the popup (spec §2\n * group). The items read as a related set (`role=\"group\"` named by the label); the label is never a\n * menuitem and never a focus stop.\n */\nexport const MenuGroup = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Group>,\n  MenuGroupProps\n>(function MenuGroup({ label, children, ...props }, ref) {\n  // Radix Group + Label do NOT auto-wire aria-labelledby (the Label renders a bare div with no id),\n  // so the group would read as an unnamed role=group. We hand-wire it the same way Separator\n  // hand-rolls a named anatomy when the primitive can't carry it (skill: compose the role by hand\n  // when Radix can't express the spec's anatomy): generate a stable id on the Label and point the\n  // Group's aria-labelledby at it, so the items read as a related set named by the label (spec §2\n  // group / §7 group named by its label).\n  const labelId = React.useId();\n  return (\n    <DropdownMenuPrimitive.Group\n      ref={ref}\n      aria-labelledby={label ? labelId : undefined}\n      {...props}\n    >\n      {label ? (\n        <DropdownMenuPrimitive.Label id={labelId} className={menuLabelClass}>\n          {label}\n        </DropdownMenuPrimitive.Label>\n      ) : null}\n      {children}\n    </DropdownMenuPrimitive.Group>\n  );\n});\n\nexport interface MenuLabelProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> {}\n\n/**\n * A standalone non-interactive section label (spec §2 group-label) for a label that is not wrapped in\n * a `MenuGroup`. Like the group label it is the muted label-role heading and is never a focus stop.\n */\nexport const MenuLabel = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n  MenuLabelProps\n>(function MenuLabel({ className, ...props }, ref) {\n  return (\n    <DropdownMenuPrimitive.Label ref={ref} className={cn(menuLabelClass, className)} {...props} />\n  );\n});\n\nexport interface MenuSeparatorProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> {}\n\n/**\n * A thin neutral divider between groups (spec §2 separator): decorative (`role=\"separator\"`), never a\n * focus stop.\n */\nexport const MenuSeparator = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n  MenuSeparatorProps\n>(function MenuSeparator({ className, ...props }, ref) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      ref={ref}\n      className={cn(menuSeparatorClass, className)}\n      {...props}\n    />\n  );\n});\n\nexport interface MenuSubProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Sub> {}\n\n/**\n * A submenu: an item that opens a nested popup of its own items (spec §2 submenu). Keep nesting\n * shallow — deep trees are hard to operate by keyboard (spec §2). Wraps `MenuSubTrigger` +\n * `MenuSubContent`.\n */\nexport function MenuSub(props: MenuSubProps) {\n  return <DropdownMenuPrimitive.Sub {...props} />;\n}\n\nexport interface MenuSubTriggerProps\n  extends Omit<\n      React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger>,\n      \"color\"\n    >,\n    MenuItemVariantProps {\n  /** The leading icon (spec §2): decorative, sized by `--size-icon-md`. */\n  icon?: React.ReactNode;\n}\n\n/**\n * The item that opens a submenu (spec §2/§6): a `role=\"menuitem\"` with `aria-haspopup=\"menu\"` and its\n * own `aria-expanded` (Radix). Right opens the submenu and focuses its first item; Left closes it and\n * returns focus here. It carries the same row treatment as a `MenuItem`, plus a trailing chevron\n * pointing to the inline-end.\n */\nexport const MenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n  MenuSubTriggerProps\n>(function MenuSubTrigger({ className, destructive, icon, children, ...props }, ref) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      ref={ref}\n      className={cn(menuItemVariants({ destructive }), className)}\n      {...props}\n    >\n      {icon ? (\n        <span aria-hidden=\"true\" className={menuItemIconClass}>\n          {icon}\n        </span>\n      ) : null}\n      <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n      <ChevronGlyph />\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n});\n\nexport interface MenuSubContentProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> {}\n\n/**\n * The nested popup of a submenu (spec §2 submenu): the same neutral raised `role=\"menu\"` surface as\n * `MenuContent`, anchored to its `MenuSubTrigger`.\n */\nexport const MenuSubContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n  MenuSubContentProps\n>(function MenuSubContent({ className, sideOffset = 2, loop = true, ...props }, ref) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.SubContent\n        ref={ref}\n        sideOffset={sideOffset}\n        // `loop` wraps arrow movement at the ends inside the submenu too (spec §6), matching the\n        // parent popup; Radix leaves it OFF by default.\n        loop={loop}\n        className={cn(menuPopupClass, className)}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n});\n\n// The submenu chevron — inline SVG (no icon dep), --size-icon-md, pointing to the inline-end to\n// signal the nested popup. Decorative (aria-hidden); aria-haspopup/aria-expanded carry the state, not\n// the glyph (spec §2/§7). Drawn with currentColor so it inherits the row's color.\nfunction ChevronGlyph() {\n  return (\n    <span data-testid=\"menu-sub-chevron\" aria-hidden=\"true\" className={menuSubChevronClass}>\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" focusable=\"false\">\n        <path d=\"M6 4l4 4-4 4\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n    </span>\n  );\n}\n"],"mappings":"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","names":["MenuTrigger","MenuContent","MenuItem","MenuGroup","MenuLabel","MenuSeparator","MenuSubTrigger","MenuSubContent"]}

package/dist/components/menu/menu.variants.d.ts

@@ -0,0 +1,13 @@
+import { type VariantProps } from "class-variance-authority";
+export declare const menuTriggerClass: string;
+export declare const menuPopupClass: string;
+export declare const menuItemVariants: (props?: ({
+    destructive?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type MenuItemVariantProps = VariantProps<typeof menuItemVariants>;
+export declare const menuItemIconClass = "inline-flex h-(--size-icon-md) w-(--size-icon-md) shrink-0 items-center justify-center";
+export declare const menuItemShortcutClass = "ms-auto ps-(--space-4) text-label text-text-muted";
+export declare const menuSubChevronClass = "ms-auto inline-flex h-(--size-icon-md) w-(--size-icon-md) shrink-0 items-center justify-center";
+export declare const menuLabelClass = "px-(--space-2) py-(--space-1) text-label text-text-muted select-none";
+export declare const menuSeparatorClass = "-mx-(--space-1) my-(--space-1) h-px bg-border-default";
+//# sourceMappingURL=menu.variants.d.ts.map

package/dist/components/menu/menu.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.variants.d.ts","sourceRoot":"","sources":["../../../src/components/menu/menu.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAmBlE,eAAO,MAAM,gBAAgB,QAQ+B,CAAC;AAU7D,eAAO,MAAM,cAAc,QAKoC,CAAC;AAyBhE,eAAO,MAAM,gBAAgB;;8EAoC5B,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAMzE,eAAO,MAAM,iBAAiB,2FAC4D,CAAC;AAK3F,eAAO,MAAM,qBAAqB,sDACmB,CAAC;AAItD,eAAO,MAAM,mBAAmB,mGACkE,CAAC;AAKnG,eAAO,MAAM,cAAc,yEAC6C,CAAC;AAMzE,eAAO,MAAM,kBAAkB,0DAC0B,CAAC"}

package/dist/components/menu/menu.variants.js

@@ -0,0 +1,56 @@
+import { cva } from "class-variance-authority";
+const menuTriggerClass = "inline-flex items-center justify-center gap-(--space-2) rounded-(--radius-md) px-(--space-3) text-label text-action-ghost-fg cursor-pointer select-none hover:bg-action-ghost-bg-hover transition-[color,background-color] duration-(--motion-duration-fast) ease-(--motion-easing-verdify) motion-reduce:duration-(--motion-duration-instant) min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop) outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 disabled:pointer-events-none disabled:text-text-disabled";
+const menuPopupClass = "z-(--z-index-popover) min-w-(--container-sm) overflow-hidden p-(--space-1) bg-surface-raised border border-surface-border rounded-(--radius-md) shadow-(--shadow-md) transition-opacity duration-(--motion-duration-fast) ease-(--motion-easing-verdify) motion-reduce:duration-(--motion-duration-instant) data-[state=open]:opacity-100 data-[state=closed]:opacity-0";
+const menuItemVariants = cva(
+  [
+    // shape + the icon-to-label gap + logical inline padding so it mirrors under RTL (G-U6)
+    "relative flex items-center gap-(--space-2) rounded-(--radius-md) px-(--space-2)",
+    // type ROLE + the resting (neutral) label color, no fill, pointer cursor
+    "text-body text-text-primary no-underline cursor-pointer select-none",
+    // the shared pointer+keyboard highlight: the restrained ghost-action fill (spec §4 Hover/Active)
+    "data-[highlighted]:bg-action-ghost-bg-hover",
+    // motion: fast + verdify easing, instant under reduced motion (NEVER the check theatre, G-U3)
+    "transition-[color,background-color] duration-(--motion-duration-fast) ease-(--motion-easing-verdify)",
+    "motion-reduce:duration-(--motion-duration-instant)",
+    // target-size floor — 44px touch / 40px pointer, on every row (spec §7, 2.5.8), never a fixed
+    // height below the floor
+    "min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)",
+    // the open popup tracks the active item by ROVING focus + the active fill, not a second ring
+    // (spec §4 Focus) — no per-item focus-visible ring inside the menu
+    "outline-none",
+    // disabled (non-operable) row — DEC-C: dim via the disabled TOKEN, never opacity. Radix drives
+    // it via data-disabled and keeps the label readable to AT (aria-disabled), skipping arrow focus.
+    "data-[disabled]:pointer-events-none data-[disabled]:text-text-disabled"
+  ],
+  {
+    variants: {
+      // the spec §3 `item=destructive` axis — the ONE colored item: the destructive ACTION
+      // treatment, a RISK signal (not the brand, NEVER status-verified — G-U2). At rest the label +
+      // icon take the destructive fg; the shared highlight fill is the destructive bg.
+      destructive: {
+        true: [
+          "text-action-destructive-fg",
+          "data-[highlighted]:bg-action-destructive-bg"
+        ],
+        false: ""
+      }
+    },
+    defaultVariants: { destructive: false }
+  }
+);
+const menuItemIconClass = "inline-flex h-(--size-icon-md) w-(--size-icon-md) shrink-0 items-center justify-center";
+const menuItemShortcutClass = "ms-auto ps-(--space-4) text-label text-text-muted";
+const menuSubChevronClass = "ms-auto inline-flex h-(--size-icon-md) w-(--size-icon-md) shrink-0 items-center justify-center";
+const menuLabelClass = "px-(--space-2) py-(--space-1) text-label text-text-muted select-none";
+const menuSeparatorClass = "-mx-(--space-1) my-(--space-1) h-px bg-border-default";
+export {
+  menuItemIconClass,
+  menuItemShortcutClass,
+  menuItemVariants,
+  menuLabelClass,
+  menuPopupClass,
+  menuSeparatorClass,
+  menuSubChevronClass,
+  menuTriggerClass
+};
+//# sourceMappingURL=menu.variants.js.map

package/dist/components/menu/menu.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/menu/menu.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// Menu is a popup list of ACTIONS a trigger opens (spec §1). It is a NEUTRAL surface (spec §3): its\n// items, popup, and separators are neutral, and the brand violet NEVER marks an item as \"the\n// special one.\" The ONE colored item is the DESTRUCTIVE item, which takes the destructive ACTION\n// treatment because the command it runs is irreversible — a RISK signal, not a status result. A\n// verified meaning is never reported by a menu item (that is VerifiedBadge's job), so NOTHING here\n// binds a --color-status-* token and the brand action-primary tier never appears (brand != state,\n// G-U2). This is the ONLY token-binding site (skill §5 hard rule). All open/close motion is the\n// FAST token transition on the verdify easing, instant under reduced motion — never the 350ms\n// VerifiedBadge-only theatre duration (G-U3).\n\n// The trigger: the one stop in the page tab order for this control (spec §2 trigger). A NEUTRAL\n// ghost surface — the label/glyph in the ghost action fg at rest, the restrained ghost hover fill,\n// the md radius, the persistent 2px focus ring (never removed, spec §4 Focus), and the target-size\n// floor (44px touch / 40px pointer, spec §7 2.5.8 / DEC-B) with the height EMERGING from the floor.\n// A disabled trigger dims via the disabled TOKEN (DEC-C), never a blanket opacity. fast functional\n// hover motion + verdify easing, instant under reduced motion (G-U3). This styles the DEFAULT\n// (non-asChild) trigger; when a Button is passed via `asChild` it carries its own treatment.\nexport const menuTriggerClass =\n  \"inline-flex items-center justify-center gap-(--space-2) rounded-(--radius-md) px-(--space-3) \" +\n  \"text-label text-action-ghost-fg cursor-pointer select-none \" +\n  \"hover:bg-action-ghost-bg-hover \" +\n  \"transition-[color,background-color] duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant) \" +\n  \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop) \" +\n  \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 \" +\n  \"disabled:pointer-events-none disabled:text-text-disabled\";\n\n// The popup (spec §2 popup, §5): the floating surface that opens on activation, raised above the\n// page and anchored to the trigger. A NEUTRAL raised surface (--color-surface-raised) with the\n// outer surface border, the md corner radius, and the md elevation shadow above the page, on the\n// POPOVER z-layer (a menu is a non-modal popover layer, not the modal layer). It NEVER wears a brand\n// or status fill (spec §3/§8). The open/close fade is a PLAIN fast transition + verdify easing,\n// instant under reduced motion — never the 350ms VerifiedBadge-only theatre (G-U3). Enter/exit ride\n// Radix's data-state on the content (attribute-selector variants, not arbitrary values). Inset\n// padding from --space-*; a SubContent shares the same surface treatment.\nexport const menuPopupClass =\n  \"z-(--z-index-popover) min-w-(--container-sm) overflow-hidden p-(--space-1) \" +\n  \"bg-surface-raised border border-surface-border rounded-(--radius-md) shadow-(--shadow-md) \" +\n  \"transition-opacity duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant) \" +\n  \"data-[state=open]:opacity-100 data-[state=closed]:opacity-0\";\n\n// One command row (spec §2 item, §4 states). A neutral row at rest; the active/hovered item shares\n// ONE highlight (pointer and keyboard both drive Radix's data-highlighted, spec §4 Hover) painted\n// with the ghost hover fill.\n//\n// RESTING (default): the LABEL in the PRIMARY text color (spec §5 --color-text-primary) at the BODY\n// type role (spec §5 --text-body), on the popup surface with NO fill (spec §4 Default).\n// HIGHLIGHTED (data-highlighted): the restrained ghost-action hover fill (spec §5\n// --color-action-ghost-bg-hover) — pointer hover AND keyboard arrow movement set the same\n// data-highlighted, so the two share one highlight (spec §4 Hover/Active). No motion beyond the\n// token transition.\n// DISABLED (data-disabled): dims via the disabled TOKEN (DEC-C), never a blanket opacity; Radix\n// keeps it readable to AT (aria-disabled) and skips it in arrow movement (spec §4 Disabled / §7).\n// FOCUS: the open popup tracks the active item by ROVING FOCUS and shows the active fill, not a\n// second ring (spec §4 Focus) — so an item does NOT paint its own focus-visible ring; the active\n// fill is the focus affordance inside the menu.\n// Motion: fast token transition + verdify easing, instant under reduced motion (NEVER the check\n// theatre, G-U3). Target-size floor on every row (44px touch / 40px pointer, spec §7 2.5.8), never a\n// fixed height below the floor.\n//\n// `destructive` is the spec §3 `item=destructive` axis — the ONE colored item: the destructive\n// ACTION treatment (label/icon in the destructive fg; the highlight fill is the destructive bg). It\n// is a RISK signal, not the brand and NEVER status-verified (G-U2); the risk is also named in the\n// item's text + icon, never carried by color alone (spec §7/§8, 1.4.1).\nexport const menuItemVariants = cva(\n  [\n    // shape + the icon-to-label gap + logical inline padding so it mirrors under RTL (G-U6)\n    \"relative flex items-center gap-(--space-2) rounded-(--radius-md) px-(--space-2)\",\n    // type ROLE + the resting (neutral) label color, no fill, pointer cursor\n    \"text-body text-text-primary no-underline cursor-pointer select-none\",\n    // the shared pointer+keyboard highlight: the restrained ghost-action fill (spec §4 Hover/Active)\n    \"data-[highlighted]:bg-action-ghost-bg-hover\",\n    // motion: fast + verdify easing, instant under reduced motion (NEVER the check theatre, G-U3)\n    \"transition-[color,background-color] duration-(--motion-duration-fast) ease-(--motion-easing-verdify)\",\n    \"motion-reduce:duration-(--motion-duration-instant)\",\n    // target-size floor — 44px touch / 40px pointer, on every row (spec §7, 2.5.8), never a fixed\n    // height below the floor\n    \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)\",\n    // the open popup tracks the active item by ROVING focus + the active fill, not a second ring\n    // (spec §4 Focus) — no per-item focus-visible ring inside the menu\n    \"outline-none\",\n    // disabled (non-operable) row — DEC-C: dim via the disabled TOKEN, never opacity. Radix drives\n    // it via data-disabled and keeps the label readable to AT (aria-disabled), skipping arrow focus.\n    \"data-[disabled]:pointer-events-none data-[disabled]:text-text-disabled\",\n  ],\n  {\n    variants: {\n      // the spec §3 `item=destructive` axis — the ONE colored item: the destructive ACTION\n      // treatment, a RISK signal (not the brand, NEVER status-verified — G-U2). At rest the label +\n      // icon take the destructive fg; the shared highlight fill is the destructive bg.\n      destructive: {\n        true: [\n          \"text-action-destructive-fg\",\n          \"data-[highlighted]:bg-action-destructive-bg\",\n        ],\n        false: \"\",\n      },\n    },\n    defaultVariants: { destructive: false },\n  },\n);\n\nexport type MenuItemVariantProps = VariantProps<typeof menuItemVariants>;\n\n// The leading item icon (spec §2/§5): the md icon role, decorative (the item names itself by its\n// label text, not the glyph). It inherits the row's color via currentColor, so a destructive row's\n// icon is the destructive fg and a disabled row's icon dims with the disabled token. shrink-0 so it\n// never collapses.\nexport const menuItemIconClass =\n  \"inline-flex h-(--size-icon-md) w-(--size-icon-md) shrink-0 items-center justify-center\";\n\n// The trailing shortcut hint on an item (spec §2/§5): the keyboard hint pushed to the inline-end, in\n// the MUTED text color at the LABEL type role (spec §5 --color-text-muted / --text-label).\n// Decorative wayfinding, never a focus stop; logical inline-end placement (G-U6).\nexport const menuItemShortcutClass =\n  \"ms-auto ps-(--space-4) text-label text-text-muted\";\n\n// The submenu chevron on a SubTrigger (spec §2 submenu, §5): the md icon role, decorative; it\n// points to the inline-end to signal the nested popup. Inherits the row color via currentColor.\nexport const menuSubChevronClass =\n  \"ms-auto inline-flex h-(--size-icon-md) w-(--size-icon-md) shrink-0 items-center justify-center\";\n\n// The group label (spec §2 group-label, §5): the non-interactive heading that partitions the popup;\n// it is NEVER a focus stop. The MUTED text color at the LABEL type role (spec §5 --color-text-muted\n// / --text-label). Logical inline padding so it mirrors under RTL (G-U6).\nexport const menuLabelClass =\n  \"px-(--space-2) py-(--space-1) text-label text-text-muted select-none\";\n\n// The separator (spec §2 separator, §5): a thin neutral divider between groups. It is decorative and\n// never takes focus. A neutral hairline in the default border color (spec §5 --color-border-default),\n// with a little vertical breathing room. Negated logical inline margins keep the rule flush to the\n// popup's inner padding edge (it spans the popup inset, mirrors under RTL — G-U6).\nexport const menuSeparatorClass =\n  \"-mx-(--space-1) my-(--space-1) h-px bg-border-default\";\n"],"mappings":"AAAA,SAAS,WAA8B;AAmBhC,MAAM,mBACX;AAiBK,MAAM,iBACX;AA6BK,MAAM,mBAAmB;AAAA,EAC9B;AAAA;AAAA,IAEE;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA;AAAA,IAGA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA;AAAA;AAAA;AAAA,MAIR,aAAa;AAAA,QACX,MAAM;AAAA,UACJ;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,aAAa,MAAM;AAAA,EACxC;AACF;AAQO,MAAM,oBACX;AAKK,MAAM,wBACX;AAIK,MAAM,sBACX;AAKK,MAAM,iBACX;AAMK,MAAM,qBACX;","names":[]}

package/dist/components/pagination/index.d.ts

@@ -0,0 +1,3 @@
+export { Pagination, PaginationList, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationStatus, PaginationEllipsis, type PaginationProps, type PaginationListProps, type PaginationItemProps, type PaginationLinkProps, type PaginationPreviousProps, type PaginationNextProps, type PaginationStatusProps, type PaginationEllipsisProps, } from "./pagination";
+export { paginationNavClass, paginationListClass, paginationItemClass, paginationControlVariants, paginationIconClass, paginationStatusClass, paginationEllipsisClass, type PaginationControlVariantProps, } from "./pagination.variants";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/pagination/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EAChB,kBAAkB,EAClB,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,uBAAuB,EAC5B,KAAK,mBAAmB,EACxB,KAAK,qBAAqB,EAC1B,KAAK,uBAAuB,GAC7B,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,yBAAyB,EACzB,mBAAmB,EACnB,qBAAqB,EACrB,uBAAuB,EACvB,KAAK,6BAA6B,GACnC,MAAM,uBAAuB,CAAC"}

package/dist/components/pagination/index.js

@@ -0,0 +1,37 @@
+import {
+  Pagination,
+  PaginationList,
+  PaginationItem,
+  PaginationLink,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationStatus,
+  PaginationEllipsis
+} from "./pagination";
+import {
+  paginationNavClass,
+  paginationListClass,
+  paginationItemClass,
+  paginationControlVariants,
+  paginationIconClass,
+  paginationStatusClass,
+  paginationEllipsisClass
+} from "./pagination.variants";
+export {
+  Pagination,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationList,
+  PaginationNext,
+  PaginationPrevious,
+  PaginationStatus,
+  paginationControlVariants,
+  paginationEllipsisClass,
+  paginationIconClass,
+  paginationItemClass,
+  paginationListClass,
+  paginationNavClass,
+  paginationStatusClass
+};
+//# sourceMappingURL=index.js.map

package/dist/components/pagination/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/pagination/index.ts"],"sourcesContent":["export {\n  Pagination,\n  PaginationList,\n  PaginationItem,\n  PaginationLink,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationStatus,\n  PaginationEllipsis,\n  type PaginationProps,\n  type PaginationListProps,\n  type PaginationItemProps,\n  type PaginationLinkProps,\n  type PaginationPreviousProps,\n  type PaginationNextProps,\n  type PaginationStatusProps,\n  type PaginationEllipsisProps,\n} from \"./pagination\";\nexport {\n  paginationNavClass,\n  paginationListClass,\n  paginationItemClass,\n  paginationControlVariants,\n  paginationIconClass,\n  paginationStatusClass,\n  paginationEllipsisClass,\n  type PaginationControlVariantProps,\n} from \"./pagination.variants\";\n"],"mappings":"AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OASK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;","names":[]}

package/dist/components/pagination/pagination.d.ts

@@ -0,0 +1,118 @@
+import * as React from "react";
+import { type PaginationControlVariantProps } from "./pagination.variants";
+export interface PaginationProps extends React.ComponentPropsWithoutRef<"nav"> {
+    /**
+     * The landmark's accessible name (spec §7). Defaults to `"Pagination"` so the control set is
+     * distinguishable from other `navigation` landmarks on the page. Override it (or point
+     * `aria-labelledby` at a visible label) when the app names its pagers differently.
+     */
+    "aria-label"?: string;
+    /**
+     * The next page is resolving (spec §4 Loading). Marks the region `aria-busy="true"` so a screen
+     * reader announces the wait; the control set stays operable so you can change your mind. A wait
+     * is a plain wait — the deliberate motion duration is reserved for the verified check, never for
+     * a page turning. The destination list shows its own loading affordance, not this control.
+     */
+    loading?: boolean;
+}
+/**
+ * Pagination splits a long list into numbered pages and lets you move between them one page at a
+ * time or jump to a specific page (spec §1). It is the `navigation` landmark wrapping a set of
+ * standard links or buttons — there is no APG "pagination" widget. Reach for it when the choice
+ * changes which records you see; reach for Tabs when the choice switches between peer panels.
+ *
+ * The set is neutral wayfinding (spec §3): the only accent is the CURRENT page, which takes the
+ * primary ACTION (brand) alias — where you are in the set — never a status color. A current page
+ * does not report a verified result, so coloring it with the verified green would break
+ * brand != state; a verified meaning belongs to VerifiedBadge.
+ *
+ * It is render-only (no hook / no stateful Radix primitive), so it needs no `'use client'`.
+ */
+export declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;
+export type PaginationListProps = React.ComponentPropsWithoutRef<"ul">;
+/**
+ * The control list (spec §2): a row of items, each holding one control. Unordered — the controls
+ * are peers (prev, pages, next), not a ranked sequence — so it is a `<ul>`.
+ */
+export declare const PaginationList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+export type PaginationItemProps = React.ComponentPropsWithoutRef<"li">;
+/**
+ * One item in the control set (spec §2): a `<li>` holding a `PaginationLink`, `PaginationPrevious`,
+ * `PaginationNext`, `PaginationEllipsis`, or `PaginationStatus`.
+ */
+export declare const PaginationItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export interface PaginationLinkProps extends Omit<React.ComponentPropsWithoutRef<"a">, "color">, Pick<PaginationControlVariantProps, "size"> {
+    /**
+     * The page this control goes to (spec §7). When set, the control is a native link
+     * (`role="link"`) that navigates by URL; omit it for a native `button` that changes the list in
+     * place. Pick one model per pager and keep it consistent (spec §7).
+     */
+    href?: string;
+    /**
+     * This is the page you are on (spec §4 Current). The control lifts to the primary action accent,
+     * is marked `aria-current="page"`, does NOT navigate, and is rendered non-interactive so Tab does
+     * not stop on a control that does nothing. Exactly one control in a set is current.
+     */
+    isCurrent?: boolean;
+    /**
+     * Project the page styling onto a caller-supplied anchor (a framework router `<Link>` rendered as
+     * an `<a>`) via Radix Slot, instead of the default element (spec §2/§7). Slot runs
+     * `React.Children.only` — pass exactly one anchor child whose `aria-label` names its destination.
+     */
+    asChild?: boolean;
+}
+/**
+ * One page control (spec §2/§4). A native `<a>` when `href` is set (navigates by URL) or a native
+ * `<button>` when it is not (changes the list in place) — so it exposes the link/button role and
+ * is operable without extra wiring; it gets the visible focus ring, the restrained ghost hover
+ * fill, and the target-size floor. The current page is non-navigating plain text marked
+ * `aria-current="page"`.
+ *
+ * A page control's accessible name states the page it goes to, not just its number (spec §7); pass
+ * an explicit `aria-label` to override the default `"Go to page {children}"`.
+ */
+export declare const PaginationLink: React.ForwardRefExoticComponent<PaginationLinkProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+interface PaginationDirectionProps extends Omit<React.ComponentPropsWithoutRef<"a">, "color">, Pick<PaginationControlVariantProps, "size"> {
+    href?: string;
+    /**
+     * The control is non-operable on the edge page — Prev on the first page, Next on the last (spec
+     * §4 Disabled). A button-form control (no `href`) uses the native `disabled`; a link-form control
+     * (`href` set) uses `aria-disabled`, drops its `href`, and leaves the tab order, while its
+     * direction stays readable to assistive technology so the control's meaning stays clear.
+     */
+    disabled?: boolean;
+    asChild?: boolean;
+}
+export type PaginationPreviousProps = PaginationDirectionProps;
+/**
+ * The control that moves to the previous page (spec §2). Holds a decorative direction glyph and
+ * names its direction (`"Previous page"` by default); non-operable on the first page (spec §4).
+ */
+export declare const PaginationPrevious: React.ForwardRefExoticComponent<PaginationDirectionProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export type PaginationNextProps = PaginationDirectionProps;
+/**
+ * The control that moves to the next page (spec §2). Holds a decorative direction glyph and names
+ * its direction (`"Next page"` by default); non-operable on the last page (spec §4).
+ */
+export declare const PaginationNext: React.ForwardRefExoticComponent<PaginationDirectionProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export interface PaginationStatusProps extends React.ComponentPropsWithoutRef<"span"> {
+    /** The current page number. */
+    current: number;
+    /** The total page count. */
+    total: number;
+}
+/**
+ * The "Page m of n" readout for the `prev-next` variant (spec §3): a non-interactive position
+ * indicator between Prev and Next, used in dense rails or compact surfaces where a full number run
+ * does not fit. Plain text in the secondary color at the label type role.
+ */
+export declare const PaginationStatus: React.ForwardRefExoticComponent<PaginationStatusProps & React.RefAttributes<HTMLSpanElement>>;
+export type PaginationEllipsisProps = React.ComponentPropsWithoutRef<"span">;
+/**
+ * A non-interactive gap standing in for a run of hidden page controls when the range is long (spec
+ * §2/§7). It is presentational: `aria-hidden`, out of the tab order, never a stop. The page
+ * controls it hides are still reachable through the visible page links around it.
+ */
+export declare const PaginationEllipsis: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export {};
+//# sourceMappingURL=pagination.d.ts.map

package/dist/components/pagination/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAQL,KAAK,6BAA6B,EACnC,MAAM,uBAAuB,CAAC;AAE/B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IAC5E;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,UAAU,qFAerB,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,CAAC;AAEvE;;;GAGG;AACH,eAAO,MAAM,cAAc,yKAI1B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,CAAC;AAEvE;;;GAGG;AACH,eAAO,MAAM,cAAc,kKAI1B,CAAC;AAEF,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,EACxD,IAAI,CAAC,6BAA6B,EAAE,MAAM,CAAC;IAC7C;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,cAAc,mHAoD1B,CAAC;AAEF,UAAU,wBACR,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,EACxD,IAAI,CAAC,6BAA6B,EAAE,MAAM,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA4GD,MAAM,MAAM,uBAAuB,GAAG,wBAAwB,CAAC;AAE/D;;;GAGG;AACH,eAAO,MAAM,kBAAkB,wHAAoD,CAAC;AAEpF,MAAM,MAAM,mBAAmB,GAAG,wBAAwB,CAAC;AAE3D;;;GAGG;AACH,eAAO,MAAM,cAAc,wHAAgD,CAAC;AAE5E,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC;IACnF,+BAA+B;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,+FAQ5B,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,CAAC;AAE7E;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,sKAc9B,CAAC"}

package/dist/components/pagination/pagination.js

@@ -0,0 +1,204 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "radix-ui";
+import { cn } from "../../lib/cn";
+import {
+  paginationNavClass,
+  paginationListClass,
+  paginationItemClass,
+  paginationControlVariants,
+  paginationIconClass,
+  paginationStatusClass,
+  paginationEllipsisClass
+} from "./pagination.variants";
+const Pagination = React.forwardRef(function Pagination2({ className, "aria-label": ariaLabel = "Pagination", loading = false, ...props }, ref) {
+  return (
+    // the navigation landmark, named so a screen reader can find and skip the control set; while a
+    // page resolves the region is aria-busy (spec §7) but stays operable (spec §4)
+    /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref,
+        "aria-label": ariaLabel,
+        "aria-busy": loading || void 0,
+        className: cn(paginationNavClass, className),
+        ...props
+      }
+    )
+  );
+});
+const PaginationList = React.forwardRef(
+  function PaginationList2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("ul", { ref, className: cn(paginationListClass, className), ...props });
+  }
+);
+const PaginationItem = React.forwardRef(
+  function PaginationItem2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("li", { ref, className: cn(paginationItemClass, className), ...props });
+  }
+);
+const PaginationLink = React.forwardRef(
+  function PaginationLink2({ className, children, href, isCurrent = false, asChild = false, size, "aria-label": ariaLabel, ...props }, ref) {
+    const classes = cn(paginationControlVariants({ current: isCurrent, size }), className);
+    if (isCurrent) {
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref,
+          "aria-current": "page",
+          className: classes,
+          ...props,
+          children
+        }
+      );
+    }
+    const label = ariaLabel ?? (typeof children === "string" || typeof children === "number" ? `Go to page ${children}` : void 0);
+    if (asChild) {
+      return /* @__PURE__ */ jsx(Slot.Root, { ref, "aria-label": label, className: classes, ...props, children });
+    }
+    if (href !== void 0) {
+      return /* @__PURE__ */ jsx("a", { ref, href, "aria-label": label, className: classes, ...props, children });
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-label": label,
+        className: classes,
+        ...props,
+        children
+      }
+    );
+  }
+);
+function makeDirection(defaultLabel, glyphSide, Glyph) {
+  return React.forwardRef(
+    function PaginationDirection({ className, children, href, disabled = false, asChild = false, size, "aria-label": ariaLabel, ...props }, ref) {
+      const label = ariaLabel ?? defaultLabel;
+      const classes = cn(paginationControlVariants({ size }), className);
+      const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+        glyphSide === "prev" ? /* @__PURE__ */ jsx(Glyph, {}) : null,
+        children,
+        glyphSide === "next" ? /* @__PURE__ */ jsx(Glyph, {}) : null
+      ] });
+      if (asChild) {
+        return /* @__PURE__ */ jsx(Slot.Root, { ref, "aria-label": label, className: classes, ...props, children });
+      }
+      if (href !== void 0) {
+        return /* @__PURE__ */ jsx(
+          "a",
+          {
+            ref,
+            href: disabled ? void 0 : href,
+            "aria-label": label,
+            "aria-disabled": disabled || void 0,
+            tabIndex: disabled ? -1 : void 0,
+            className: classes,
+            ...props,
+            children: content
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref,
+          type: "button",
+          "aria-label": label,
+          disabled,
+          className: classes,
+          ...props,
+          children: content
+        }
+      );
+    }
+  );
+}
+function PrevGlyph() {
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-testid": "pagination-prev-icon", className: paginationIconClass, children: /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx("path", { d: "M10 4L6 8l4 4" })
+    }
+  ) });
+}
+function NextGlyph() {
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-testid": "pagination-next-icon", className: paginationIconClass, children: /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx("path", { d: "M6 4l4 4-4 4" })
+    }
+  ) });
+}
+const PaginationPrevious = makeDirection("Previous page", "prev", PrevGlyph);
+const PaginationNext = makeDirection("Next page", "next", NextGlyph);
+const PaginationStatus = React.forwardRef(
+  function PaginationStatus2({ className, current, total, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx("span", { ref, className: cn(paginationStatusClass, className), ...props, children: children ?? `Page ${current} of ${total}` });
+  }
+);
+const PaginationEllipsis = React.forwardRef(
+  function PaginationEllipsis2({ className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "aria-hidden": "true",
+        "data-testid": "pagination-ellipsis",
+        className: cn(paginationEllipsisClass, className),
+        ...props,
+        children: children ?? /* @__PURE__ */ jsx(EllipsisGlyph, {})
+      }
+    );
+  }
+);
+function EllipsisGlyph() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "3", cy: "8", r: "1.25" }),
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "1.25" }),
+        /* @__PURE__ */ jsx("circle", { cx: "13", cy: "8", r: "1.25" })
+      ]
+    }
+  );
+}
+export {
+  Pagination,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationList,
+  PaginationNext,
+  PaginationPrevious,
+  PaginationStatus
+};
+//# sourceMappingURL=pagination.js.map

package/dist/components/pagination/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/pagination/pagination.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Slot } from \"radix-ui\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  paginationNavClass,\n  paginationListClass,\n  paginationItemClass,\n  paginationControlVariants,\n  paginationIconClass,\n  paginationStatusClass,\n  paginationEllipsisClass,\n  type PaginationControlVariantProps,\n} from \"./pagination.variants\";\n\nexport interface PaginationProps extends React.ComponentPropsWithoutRef<\"nav\"> {\n  /**\n   * The landmark's accessible name (spec §7). Defaults to `\"Pagination\"` so the control set is\n   * distinguishable from other `navigation` landmarks on the page. Override it (or point\n   * `aria-labelledby` at a visible label) when the app names its pagers differently.\n   */\n  \"aria-label\"?: string;\n  /**\n   * The next page is resolving (spec §4 Loading). Marks the region `aria-busy=\"true\"` so a screen\n   * reader announces the wait; the control set stays operable so you can change your mind. A wait\n   * is a plain wait — the deliberate motion duration is reserved for the verified check, never for\n   * a page turning. The destination list shows its own loading affordance, not this control.\n   */\n  loading?: boolean;\n}\n\n/**\n * Pagination splits a long list into numbered pages and lets you move between them one page at a\n * time or jump to a specific page (spec §1). It is the `navigation` landmark wrapping a set of\n * standard links or buttons — there is no APG \"pagination\" widget. Reach for it when the choice\n * changes which records you see; reach for Tabs when the choice switches between peer panels.\n *\n * The set is neutral wayfinding (spec §3): the only accent is the CURRENT page, which takes the\n * primary ACTION (brand) alias — where you are in the set — never a status color. A current page\n * does not report a verified result, so coloring it with the verified green would break\n * brand != state; a verified meaning belongs to VerifiedBadge.\n *\n * It is render-only (no hook / no stateful Radix primitive), so it needs no `'use client'`.\n */\nexport const Pagination = React.forwardRef<HTMLElement, PaginationProps>(function Pagination(\n  { className, \"aria-label\": ariaLabel = \"Pagination\", loading = false, ...props },\n  ref,\n) {\n  return (\n    // the navigation landmark, named so a screen reader can find and skip the control set; while a\n    // page resolves the region is aria-busy (spec §7) but stays operable (spec §4)\n    <nav\n      ref={ref}\n      aria-label={ariaLabel}\n      aria-busy={loading || undefined}\n      className={cn(paginationNavClass, className)}\n      {...props}\n    />\n  );\n});\n\nexport type PaginationListProps = React.ComponentPropsWithoutRef<\"ul\">;\n\n/**\n * The control list (spec §2): a row of items, each holding one control. Unordered — the controls\n * are peers (prev, pages, next), not a ranked sequence — so it is a `<ul>`.\n */\nexport const PaginationList = React.forwardRef<HTMLUListElement, PaginationListProps>(\n  function PaginationList({ className, ...props }, ref) {\n    return <ul ref={ref} className={cn(paginationListClass, className)} {...props} />;\n  },\n);\n\nexport type PaginationItemProps = React.ComponentPropsWithoutRef<\"li\">;\n\n/**\n * One item in the control set (spec §2): a `<li>` holding a `PaginationLink`, `PaginationPrevious`,\n * `PaginationNext`, `PaginationEllipsis`, or `PaginationStatus`.\n */\nexport const PaginationItem = React.forwardRef<HTMLLIElement, PaginationItemProps>(\n  function PaginationItem({ className, ...props }, ref) {\n    return <li ref={ref} className={cn(paginationItemClass, className)} {...props} />;\n  },\n);\n\nexport interface PaginationLinkProps\n  extends Omit<React.ComponentPropsWithoutRef<\"a\">, \"color\">,\n    Pick<PaginationControlVariantProps, \"size\"> {\n  /**\n   * The page this control goes to (spec §7). When set, the control is a native link\n   * (`role=\"link\"`) that navigates by URL; omit it for a native `button` that changes the list in\n   * place. Pick one model per pager and keep it consistent (spec §7).\n   */\n  href?: string;\n  /**\n   * This is the page you are on (spec §4 Current). The control lifts to the primary action accent,\n   * is marked `aria-current=\"page\"`, does NOT navigate, and is rendered non-interactive so Tab does\n   * not stop on a control that does nothing. Exactly one control in a set is current.\n   */\n  isCurrent?: boolean;\n  /**\n   * Project the page styling onto a caller-supplied anchor (a framework router `<Link>` rendered as\n   * an `<a>`) via Radix Slot, instead of the default element (spec §2/§7). Slot runs\n   * `React.Children.only` — pass exactly one anchor child whose `aria-label` names its destination.\n   */\n  asChild?: boolean;\n}\n\n/**\n * One page control (spec §2/§4). A native `<a>` when `href` is set (navigates by URL) or a native\n * `<button>` when it is not (changes the list in place) — so it exposes the link/button role and\n * is operable without extra wiring; it gets the visible focus ring, the restrained ghost hover\n * fill, and the target-size floor. The current page is non-navigating plain text marked\n * `aria-current=\"page\"`.\n *\n * A page control's accessible name states the page it goes to, not just its number (spec §7); pass\n * an explicit `aria-label` to override the default `\"Go to page {children}\"`.\n */\nexport const PaginationLink = React.forwardRef<HTMLAnchorElement | HTMLButtonElement, PaginationLinkProps>(\n  function PaginationLink(\n    { className, children, href, isCurrent = false, asChild = false, size, \"aria-label\": ariaLabel, ...props },\n    ref,\n  ) {\n    const classes = cn(paginationControlVariants({ current: isCurrent, size }), className);\n    // the current page is NON-INTERACTIVE: plain text marked aria-current, not a link/button, so a\n    // keyboard user never tabs to a control that does nothing and a screen reader is never told the\n    // page they are on is somewhere to go (spec §4/§7).\n    if (isCurrent) {\n      return (\n        <span\n          ref={ref as React.Ref<HTMLSpanElement>}\n          aria-current=\"page\"\n          className={classes}\n          {...(props as React.ComponentPropsWithoutRef<\"span\">)}\n        >\n          {children}\n        </span>\n      );\n    }\n    // the accessible name states the destination page, not just its number (spec §7)\n    const label = ariaLabel ?? (typeof children === \"string\" || typeof children === \"number\"\n      ? `Go to page ${children}`\n      : undefined);\n    if (asChild) {\n      return (\n        <Slot.Root ref={ref} aria-label={label} className={classes} {...props}>\n          {children as React.ReactElement}\n        </Slot.Root>\n      );\n    }\n    // link when it navigates by URL (spec §7); button when it changes the list in place\n    if (href !== undefined) {\n      return (\n        <a ref={ref as React.Ref<HTMLAnchorElement>} href={href} aria-label={label} className={classes} {...props}>\n          {children}\n        </a>\n      );\n    }\n    return (\n      <button\n        ref={ref as React.Ref<HTMLButtonElement>}\n        type=\"button\"\n        aria-label={label}\n        className={classes}\n        {...(props as React.ComponentPropsWithoutRef<\"button\">)}\n      >\n        {children}\n      </button>\n    );\n  },\n);\n\ninterface PaginationDirectionProps\n  extends Omit<React.ComponentPropsWithoutRef<\"a\">, \"color\">,\n    Pick<PaginationControlVariantProps, \"size\"> {\n  href?: string;\n  /**\n   * The control is non-operable on the edge page — Prev on the first page, Next on the last (spec\n   * §4 Disabled). A button-form control (no `href`) uses the native `disabled`; a link-form control\n   * (`href` set) uses `aria-disabled`, drops its `href`, and leaves the tab order, while its\n   * direction stays readable to assistive technology so the control's meaning stays clear.\n   */\n  disabled?: boolean;\n  asChild?: boolean;\n}\n\n/** Shared body for the two direction controls — Prev and Next differ only by label + glyph. */\nfunction makeDirection(\n  defaultLabel: string,\n  glyphSide: \"prev\" | \"next\",\n  Glyph: () => React.ReactElement,\n) {\n  return React.forwardRef<HTMLAnchorElement | HTMLButtonElement, PaginationDirectionProps>(\n    function PaginationDirection(\n      { className, children, href, disabled = false, asChild = false, size, \"aria-label\": ariaLabel, ...props },\n      ref,\n    ) {\n      // the direction name is the accessible name — the icon is decorative, never a visible label\n      const label = ariaLabel ?? defaultLabel;\n      const classes = cn(paginationControlVariants({ size }), className);\n      const content = (\n        <>\n          {glyphSide === \"prev\" ? <Glyph /> : null}\n          {children}\n          {glyphSide === \"next\" ? <Glyph /> : null}\n        </>\n      );\n      if (asChild) {\n        return (\n          <Slot.Root ref={ref} aria-label={label} className={classes} {...props}>\n            {children as React.ReactElement}\n          </Slot.Root>\n        );\n      }\n      // link-form (href set): aria-disabled drives the disabled state because an <a> has no native\n      // disabled; the component strips href + tabindex so it cannot navigate or be tabbed to (spec §4)\n      if (href !== undefined) {\n        return (\n          <a\n            ref={ref as React.Ref<HTMLAnchorElement>}\n            href={disabled ? undefined : href}\n            aria-label={label}\n            aria-disabled={disabled || undefined}\n            tabIndex={disabled ? -1 : undefined}\n            className={classes}\n            {...props}\n          >\n            {content}\n          </a>\n        );\n      }\n      // button-form: native disabled is non-operable and skipped by Tab for free (spec §4)\n      return (\n        <button\n          ref={ref as React.Ref<HTMLButtonElement>}\n          type=\"button\"\n          aria-label={label}\n          disabled={disabled}\n          className={classes}\n          {...(props as React.ComponentPropsWithoutRef<\"button\">)}\n        >\n          {content}\n        </button>\n      );\n    },\n  );\n}\n\n/** The default prev glyph — a chevron pointing against the reading direction. Decorative. */\nfunction PrevGlyph() {\n  return (\n    <span aria-hidden=\"true\" data-testid=\"pagination-prev-icon\" className={paginationIconClass}>\n      <svg\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        <path d=\"M10 4L6 8l4 4\" />\n      </svg>\n    </span>\n  );\n}\n\n/** The default next glyph — a chevron pointing in the reading direction. Decorative. */\nfunction NextGlyph() {\n  return (\n    <span aria-hidden=\"true\" data-testid=\"pagination-next-icon\" className={paginationIconClass}>\n      <svg\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        <path d=\"M6 4l4 4-4 4\" />\n      </svg>\n    </span>\n  );\n}\n\nexport type PaginationPreviousProps = PaginationDirectionProps;\n\n/**\n * The control that moves to the previous page (spec §2). Holds a decorative direction glyph and\n * names its direction (`\"Previous page\"` by default); non-operable on the first page (spec §4).\n */\nexport const PaginationPrevious = makeDirection(\"Previous page\", \"prev\", PrevGlyph);\n\nexport type PaginationNextProps = PaginationDirectionProps;\n\n/**\n * The control that moves to the next page (spec §2). Holds a decorative direction glyph and names\n * its direction (`\"Next page\"` by default); non-operable on the last page (spec §4).\n */\nexport const PaginationNext = makeDirection(\"Next page\", \"next\", NextGlyph);\n\nexport interface PaginationStatusProps extends React.ComponentPropsWithoutRef<\"span\"> {\n  /** The current page number. */\n  current: number;\n  /** The total page count. */\n  total: number;\n}\n\n/**\n * The \"Page m of n\" readout for the `prev-next` variant (spec §3): a non-interactive position\n * indicator between Prev and Next, used in dense rails or compact surfaces where a full number run\n * does not fit. Plain text in the secondary color at the label type role.\n */\nexport const PaginationStatus = React.forwardRef<HTMLSpanElement, PaginationStatusProps>(\n  function PaginationStatus({ className, current, total, children, ...props }, ref) {\n    return (\n      <span ref={ref} className={cn(paginationStatusClass, className)} {...props}>\n        {children ?? `Page ${current} of ${total}`}\n      </span>\n    );\n  },\n);\n\nexport type PaginationEllipsisProps = React.ComponentPropsWithoutRef<\"span\">;\n\n/**\n * A non-interactive gap standing in for a run of hidden page controls when the range is long (spec\n * §2/§7). It is presentational: `aria-hidden`, out of the tab order, never a stop. The page\n * controls it hides are still reachable through the visible page links around it.\n */\nexport const PaginationEllipsis = React.forwardRef<HTMLSpanElement, PaginationEllipsisProps>(\n  function PaginationEllipsis({ className, children, ...props }, ref) {\n    return (\n      <span\n        ref={ref}\n        aria-hidden=\"true\"\n        data-testid=\"pagination-ellipsis\"\n        className={cn(paginationEllipsisClass, className)}\n        {...props}\n      >\n        {children ?? <EllipsisGlyph />}\n      </span>\n    );\n  },\n);\n\n/** The default overflow glyph — three dots. Decorative. */\nfunction EllipsisGlyph() {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      <circle cx=\"3\" cy=\"8\" r=\"1.25\" />\n      <circle cx=\"8\" cy=\"8\" r=\"1.25\" />\n      <circle cx=\"13\" cy=\"8\" r=\"1.25\" />\n    </svg>\n  );\n}\n"],"mappings":"AAkDI,SAsJI,UAtJJ,KAsJI,YAtJJ;AAlDJ,YAAY,WAAW;AACvB,SAAS,YAAY;AACrB,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AA+BA,MAAM,aAAa,MAAM,WAAyC,SAASA,YAChF,EAAE,WAAW,cAAc,YAAY,cAAc,UAAU,OAAO,GAAG,MAAM,GAC/E,KACA;AACA;AAAA;AAAA;AAAA,IAGE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,aAAW,WAAW;AAAA,QACtB,WAAW,GAAG,oBAAoB,SAAS;AAAA,QAC1C,GAAG;AAAA;AAAA,IACN;AAAA;AAEJ,CAAC;AAQM,MAAM,iBAAiB,MAAM;AAAA,EAClC,SAASC,gBAAe,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACpD,WAAO,oBAAC,QAAG,KAAU,WAAW,GAAG,qBAAqB,SAAS,GAAI,GAAG,OAAO;AAAA,EACjF;AACF;AAQO,MAAM,iBAAiB,MAAM;AAAA,EAClC,SAASC,gBAAe,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACpD,WAAO,oBAAC,QAAG,KAAU,WAAW,GAAG,qBAAqB,SAAS,GAAI,GAAG,OAAO;AAAA,EACjF;AACF;AAmCO,MAAM,iBAAiB,MAAM;AAAA,EAClC,SAASC,gBACP,EAAE,WAAW,UAAU,MAAM,YAAY,OAAO,UAAU,OAAO,MAAM,cAAc,WAAW,GAAG,MAAM,GACzG,KACA;AACA,UAAM,UAAU,GAAG,0BAA0B,EAAE,SAAS,WAAW,KAAK,CAAC,GAAG,SAAS;AAIrF,QAAI,WAAW;AACb,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,gBAAa;AAAA,UACb,WAAW;AAAA,UACV,GAAI;AAAA,UAEJ;AAAA;AAAA,MACH;AAAA,IAEJ;AAEA,UAAM,QAAQ,cAAc,OAAO,aAAa,YAAY,OAAO,aAAa,WAC5E,cAAc,QAAQ,KACtB;AACJ,QAAI,SAAS;AACX,aACE,oBAAC,KAAK,MAAL,EAAU,KAAU,cAAY,OAAO,WAAW,SAAU,GAAG,OAC7D,UACH;AAAA,IAEJ;AAEA,QAAI,SAAS,QAAW;AACtB,aACE,oBAAC,OAAE,KAA0C,MAAY,cAAY,OAAO,WAAW,SAAU,GAAG,OACjG,UACH;AAAA,IAEJ;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,WAAW;AAAA,QACV,GAAI;AAAA,QAEJ;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAiBA,SAAS,cACP,cACA,WACA,OACA;AACA,SAAO,MAAM;AAAA,IACX,SAAS,oBACP,EAAE,WAAW,UAAU,MAAM,WAAW,OAAO,UAAU,OAAO,MAAM,cAAc,WAAW,GAAG,MAAM,GACxG,KACA;AAEA,YAAM,QAAQ,aAAa;AAC3B,YAAM,UAAU,GAAG,0BAA0B,EAAE,KAAK,CAAC,GAAG,SAAS;AACjE,YAAM,UACJ,iCACG;AAAA,sBAAc,SAAS,oBAAC,SAAM,IAAK;AAAA,QACnC;AAAA,QACA,cAAc,SAAS,oBAAC,SAAM,IAAK;AAAA,SACtC;AAEF,UAAI,SAAS;AACX,eACE,oBAAC,KAAK,MAAL,EAAU,KAAU,cAAY,OAAO,WAAW,SAAU,GAAG,OAC7D,UACH;AAAA,MAEJ;AAGA,UAAI,SAAS,QAAW;AACtB,eACE;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,MAAM,WAAW,SAAY;AAAA,YAC7B,cAAY;AAAA,YACZ,iBAAe,YAAY;AAAA,YAC3B,UAAU,WAAW,KAAK;AAAA,YAC1B,WAAW;AAAA,YACV,GAAG;AAAA,YAEH;AAAA;AAAA,QACH;AAAA,MAEJ;AAEA,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,MAAK;AAAA,UACL,cAAY;AAAA,UACZ;AAAA,UACA,WAAW;AAAA,UACV,GAAI;AAAA,UAEJ;AAAA;AAAA,MACH;AAAA,IAEJ;AAAA,EACF;AACF;AAGA,SAAS,YAAY;AACnB,SACE,oBAAC,UAAK,eAAY,QAAO,eAAY,wBAAuB,WAAW,qBACrE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,eAAY;AAAA,MACZ,WAAU;AAAA,MAEV,8BAAC,UAAK,GAAE,iBAAgB;AAAA;AAAA,EAC1B,GACF;AAEJ;AAGA,SAAS,YAAY;AACnB,SACE,oBAAC,UAAK,eAAY,QAAO,eAAY,wBAAuB,WAAW,qBACrE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,eAAY;AAAA,MACZ,WAAU;AAAA,MAEV,8BAAC,UAAK,GAAE,gBAAe;AAAA;AAAA,EACzB,GACF;AAEJ;AAQO,MAAM,qBAAqB,cAAc,iBAAiB,QAAQ,SAAS;AAQ3E,MAAM,iBAAiB,cAAc,aAAa,QAAQ,SAAS;AAcnE,MAAM,mBAAmB,MAAM;AAAA,EACpC,SAASC,kBAAiB,EAAE,WAAW,SAAS,OAAO,UAAU,GAAG,MAAM,GAAG,KAAK;AAChF,WACE,oBAAC,UAAK,KAAU,WAAW,GAAG,uBAAuB,SAAS,GAAI,GAAG,OAClE,sBAAY,QAAQ,OAAO,OAAO,KAAK,IAC1C;AAAA,EAEJ;AACF;AASO,MAAM,qBAAqB,MAAM;AAAA,EACtC,SAASC,oBAAmB,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,KAAK;AAClE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,eAAY;AAAA,QACZ,WAAW,GAAG,yBAAyB,SAAS;AAAA,QAC/C,GAAG;AAAA,QAEH,sBAAY,oBAAC,iBAAc;AAAA;AAAA,IAC9B;AAAA,EAEJ;AACF;AAGA,SAAS,gBAAgB;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAU;AAAA,MAEV;AAAA,4BAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,QAAO;AAAA,QAC/B,oBAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,QAAO;AAAA,QAC/B,oBAAC,YAAO,IAAG,MAAK,IAAG,KAAI,GAAE,QAAO;AAAA;AAAA;AAAA,EAClC;AAEJ;","names":["Pagination","PaginationList","PaginationItem","PaginationLink","PaginationStatus","PaginationEllipsis"]}

package/dist/components/pagination/pagination.variants.d.ts

@@ -0,0 +1,13 @@
+import { type VariantProps } from "class-variance-authority";
+export declare const paginationNavClass = "bg-surface-canvas py-(--space-2)";
+export declare const paginationListClass = "flex flex-wrap items-center gap-(--space-4)";
+export declare const paginationItemClass = "inline-flex items-center";
+export declare const paginationControlVariants: (props?: ({
+    current?: boolean | null | undefined;
+    size?: "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type PaginationControlVariantProps = VariantProps<typeof paginationControlVariants>;
+export declare const paginationIconClass = "inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0 items-center justify-center";
+export declare const paginationStatusClass = "inline-flex items-center px-(--space-2) text-label text-text-secondary select-none";
+export declare const paginationEllipsisClass = "inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0 items-center justify-center text-text-muted";
+//# sourceMappingURL=pagination.variants.d.ts.map

package/dist/components/pagination/pagination.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.variants.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAalE,eAAO,MAAM,kBAAkB,qCAAqC,CAAC;AAIrE,eAAO,MAAM,mBAAmB,gDACe,CAAC;AAGhD,eAAO,MAAM,mBAAmB,6BAA6B,CAAC;AAY9D,eAAO,MAAM,yBAAyB;;;8EA6CrC,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG,YAAY,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAI3F,eAAO,MAAM,mBAAmB,2FAC0D,CAAC;AAI3F,eAAO,MAAM,qBAAqB,uFACoD,CAAC;AAKvF,eAAO,MAAM,uBAAuB,2GACsE,CAAC"}