{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pagination",
  "type": "registry:block",
  "title": "Pagination",
  "description": "Page navigation for lists, counters, jumps, and progressive loading.",
  "author": "Wensity <hey@wensity.com>",
  "dependencies": [
    "@tabler/icons-react",
    "clsx",
    "framer-motion",
    "tailwind-merge"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/wensity/lib/utils.ts",
      "type": "registry:lib",
      "target": "@lib/utils.ts",
      "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"
    },
    {
      "path": "registry/wensity/pagination.tsx",
      "type": "registry:component",
      "target": "@components/wensity/pagination.tsx",
      "content": "\"use client\";\n\n/**\n * Pagination — custom (Phase 5). Reduced-motion gated page indicator.\n * Active page uses selected-surface + aria-current=\"page\".\n */\n\nimport * as React from \"react\";\nimport { motion, LayoutGroup, useReducedMotion } from \"framer-motion\";\nimport {\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronsLeft,\n  IconChevronsRight,\n} from \"@tabler/icons-react\";\nimport { cn } from \"@/lib/utils\";\n\n/* ─── Types ─────────────────────────────────────────────────── */\n\nexport type PaginationVariant =\n  | \"default\"\n  | \"compact\"\n  | \"with-first-last\"\n  | \"load-more\";\n\nexport type PaginationSize = \"sm\" | \"md\";\n\nexport interface PaginationProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, \"onChange\"> {\n  variant?: PaginationVariant;\n  size?: PaginationSize;\n  /** Current page (1-indexed). */\n  page: number;\n  /** Total number of pages. */\n  totalPages: number;\n  /** Called when the active page changes. */\n  onPageChange: (page: number) => void;\n  /** Pages shown around the current page (default 1). */\n  siblingCount?: number;\n  /** Whether a load/fetch operation is in progress (load-more). */\n  isLoading?: boolean;\n  /** Whether there are more items to load (load-more). */\n  hasMore?: boolean;\n  /** Callback to load more items (load-more). */\n  onLoadMore?: () => void;\n  /** Number of items currently loaded (load-more display). */\n  loadedCount?: number;\n  /** Total number of items (load-more display). */\n  totalCount?: number;\n}\n\n/* ─── Size maps ─────────────────────────────────────────────── */\n\nconst pageButtonSizes: Record<PaginationSize, string> = {\n  sm: \"size-8 text-xs\",\n  md: \"size-9 text-sm\",\n};\n\nconst navButtonSizes: Record<PaginationSize, string> = {\n  sm: \"h-8 px-1.5 text-xs [&_svg]:size-3.5\",\n  md: \"h-9 px-2 text-sm [&_svg]:size-4\",\n};\n\n/* ─── Shared styles ─────────────────────────────────────────── */\n\nconst navButtonBase = cn(\n  \"relative isolate inline-flex shrink-0 items-center justify-center rounded-[var(--primitive-radius-item)]\",\n  \"font-medium leading-none select-none touch-manipulation outline-none\",\n  \"transition-[color,background-color] duration-[150ms] ease-[var(--primitive-ease,cubic-bezier(0.23,1,0.32,1))]\",\n  \"motion-reduce:transition-none\",\n  \"text-[var(--muted-foreground)]\",\n  \"hover:text-[var(--foreground)] hover:bg-[var(--primitive-surface-hover)]\",\n  \"focus-visible:ring-2 focus-visible:ring-[var(--primitive-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--background)]\",\n  \"disabled:pointer-events-none disabled:opacity-35\",\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n);\n\nconst pageButtonBase = cn(navButtonBase, \"tabular-nums\");\n\nfunction LoadingSpinner() {\n  return (\n    <span\n      aria-hidden=\"true\"\n      className=\"size-3.5 shrink-0 rounded-full border-2 border-current border-r-transparent opacity-80 motion-safe:animate-spin\"\n    />\n  );\n}\n\n/* ─── Page range calculator ─────────────────────────────────── */\n\nfunction getPageRange(\n  page: number,\n  totalPages: number,\n  siblingCount: number,\n): (number | \"ellipsis-start\" | \"ellipsis-end\")[] {\n  const totalSlots = siblingCount * 2 + 5;\n\n  if (totalPages <= totalSlots) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1);\n  }\n\n  const leftSiblingIndex = Math.max(page - siblingCount, 1);\n  const rightSiblingIndex = Math.min(page + siblingCount, totalPages);\n\n  const showLeftEllipsis = leftSiblingIndex > 2;\n  const showRightEllipsis = rightSiblingIndex < totalPages - 1;\n\n  const items: (number | \"ellipsis-start\" | \"ellipsis-end\")[] = [];\n\n  items.push(1);\n\n  if (showLeftEllipsis) {\n    items.push(\"ellipsis-start\");\n  } else {\n    for (let i = 2; i < leftSiblingIndex; i++) items.push(i);\n  }\n\n  for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {\n    if (i !== 1 && i !== totalPages) items.push(i);\n  }\n\n  if (showRightEllipsis) {\n    items.push(\"ellipsis-end\");\n  } else {\n    for (let i = rightSiblingIndex + 1; i < totalPages; i++) items.push(i);\n  }\n\n  if (totalPages > 1) items.push(totalPages);\n\n  return items;\n}\n\n/* ─── <Pagination> ──────────────────────────────────────────── */\n\nexport const Pagination = React.forwardRef<HTMLElement, PaginationProps>(\n  (\n    {\n      variant = \"default\",\n      size = \"md\",\n      page,\n      totalPages,\n      onPageChange,\n      siblingCount = 1,\n      isLoading = false,\n      hasMore = true,\n      onLoadMore,\n      loadedCount,\n      totalCount,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const layoutId = React.useId();\n    const reduceMotion = useReducedMotion();\n    const indicatorTransition = reduceMotion\n      ? { duration: 0 }\n      : { type: \"spring\" as const, duration: 0.26, bounce: 0.08 };\n\n    /* ── Load More variant ─────────────────── */\n    if (variant === \"load-more\") {\n      return (\n        <nav data-wensity-primitive=\"\"\n          ref={ref}\n          aria-label=\"pagination\"\n          className={cn(\"flex flex-col items-center gap-3\", className)}\n          {...props}\n        >\n          {loadedCount != null && totalCount != null && (\n            <p className=\"text-xs font-medium text-[var(--muted-foreground)] tabular-nums\">\n              Showing {loadedCount} of {totalCount}\n            </p>\n          )}\n          {hasMore && (\n            <button\n              type=\"button\"\n              disabled={isLoading}\n              onClick={() => onLoadMore?.()}\n              className={cn(\n                \"relative h-[var(--primitive-control-height-md)] min-w-[140px] overflow-hidden rounded-[var(--primitive-radius-control)] px-4\",\n                \"text-sm font-medium leading-none\",\n                \"border border-[var(--border-strong)]\",\n                \"bg-[var(--background)] text-[var(--foreground)]\",\n                \"transition-[border-color,background-color] duration-[180ms] ease-[var(--primitive-ease,cubic-bezier(0.23,1,0.32,1))]\",\n                \"motion-reduce:transition-none\",\n                \"hover:border-[color-mix(in_srgb,var(--foreground)_20%,transparent)]\",\n                \"hover:bg-[var(--primitive-surface-hover)]\",\n                \"focus-visible:ring-2 focus-visible:ring-[var(--primitive-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--background)]\",\n                \"disabled:opacity-60 disabled:pointer-events-none\",\n                \"outline-none select-none\",\n              )}\n            >\n              <span className=\"relative inline-flex items-center gap-2\">\n                {isLoading ? <LoadingSpinner /> : null}\n                {isLoading ? \"Loading…\" : \"Load more\"}\n              </span>\n            </button>\n          )}\n        </nav>\n      );\n    }\n\n    /* ── Compact variant ───────────────────── */\n    if (variant === \"compact\") {\n      return (\n        <nav\n          data-wensity-primitive=\"\"\n          ref={ref}\n          aria-label=\"pagination\"\n          className={cn(\"flex items-center gap-2\", className)}\n          {...props}\n        >\n          <NavArrow\n            direction=\"prev\"\n            disabled={page <= 1}\n            onClick={() => onPageChange(page - 1)}\n            size={size}\n          />\n          <span className=\"text-sm font-medium tabular-nums text-[var(--muted-foreground)] select-none px-1\">\n            <span className=\"text-[var(--foreground)]\">{page}</span>\n            <span className=\"mx-1 opacity-40\">/</span>\n            {totalPages}\n          </span>\n          <NavArrow\n            direction=\"next\"\n            disabled={page >= totalPages}\n            onClick={() => onPageChange(page + 1)}\n            size={size}\n          />\n        </nav>\n      );\n    }\n\n    /* ── Default & With First/Last ─────────── */\n    const showFirstLast = variant === \"with-first-last\";\n    const pages = getPageRange(page, totalPages, siblingCount);\n\n    return (\n      <nav\n        data-wensity-primitive=\"\"\n        ref={ref}\n        aria-label=\"pagination\"\n        className={cn(\n          \"inline-flex w-full max-w-[360px] items-center justify-between gap-4\",\n          \"rounded-[var(--primitive-radius-surface)] p-1\",\n          \"border border-[var(--border)] bg-[var(--primitive-surface-hover)]\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"flex shrink-0 items-center gap-1\">\n          {showFirstLast && (\n            <NavArrow\n              direction=\"first\"\n              disabled={page <= 1}\n              onClick={() => onPageChange(1)}\n              size={size}\n            />\n          )}\n          <NavArrow\n            direction=\"prev\"\n            disabled={page <= 1}\n            onClick={() => onPageChange(page - 1)}\n            size={size}\n          />\n        </div>\n\n        <LayoutGroup id={layoutId}>\n          <div className=\"mx-1 flex min-w-0 flex-1 items-center justify-center gap-0.5\">\n            {pages.map((item) => {\n              if (item === \"ellipsis-start\" || item === \"ellipsis-end\") {\n                return (\n                  <span\n                    key={item}\n                    className={cn(\n                      \"inline-flex select-none items-center justify-center text-[var(--muted-foreground)] opacity-50\",\n                      pageButtonSizes[size],\n                    )}\n                  >\n                    ⋯\n                  </span>\n                );\n              }\n              const isActive = item === page;\n              return (\n                <button\n                  key={item}\n                  type=\"button\"\n                  aria-label={`Page ${item}`}\n                  aria-current={isActive ? \"page\" : undefined}\n                  onClick={() => onPageChange(item)}\n                  className={cn(\n                    pageButtonBase,\n                    pageButtonSizes[size],\n                    isActive\n                      ? \"text-[var(--foreground)]\"\n                      : \"text-[var(--muted-foreground)]\",\n                  )}\n                >\n                  {isActive ? (\n                    <motion.span\n                      layoutId={`page-active-${layoutId}`}\n                      className={cn(\n                        \"absolute inset-0 rounded-[var(--primitive-radius-item)]\",\n                        \"border border-[var(--border)] bg-[var(--primitive-surface-selected)]\",\n                      )}\n                      transition={indicatorTransition}\n                      style={{ zIndex: -1 }}\n                    />\n                  ) : null}\n                  <span className=\"relative z-[1]\">{item}</span>\n                </button>\n              );\n            })}\n          </div>\n        </LayoutGroup>\n\n        <div className=\"flex shrink-0 items-center gap-1\">\n          <NavArrow\n            direction=\"next\"\n            disabled={page >= totalPages}\n            onClick={() => onPageChange(page + 1)}\n            size={size}\n          />\n          {showFirstLast && (\n            <NavArrow\n              direction=\"last\"\n              disabled={page >= totalPages}\n              onClick={() => onPageChange(totalPages)}\n              size={size}\n            />\n          )}\n        </div>\n      </nav>\n    );\n  },\n);\nPagination.displayName = \"Pagination\";\n\n/* ─── Nav arrow button ──────────────────────────────────────── */\n\nfunction NavArrow({\n  direction,\n  disabled,\n  onClick,\n  size,\n}: {\n  direction: \"first\" | \"prev\" | \"next\" | \"last\";\n  disabled: boolean;\n  onClick: () => void;\n  size: PaginationSize;\n}) {\n  const labels: Record<string, string> = {\n    first: \"First page\",\n    prev: \"Previous page\",\n    next: \"Next page\",\n    last: \"Last page\",\n  };\n\n  const icons: Record<string, React.ReactNode> = {\n    first: <IconChevronsLeft />,\n    prev: <IconChevronLeft />,\n    next: <IconChevronRight />,\n    last: <IconChevronsRight />,\n  };\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={labels[direction]}\n      disabled={disabled}\n      onClick={onClick}\n      className={cn(navButtonBase, navButtonSizes[size])}\n    >\n      {icons[direction]}\n    </button>\n  );\n}\n"
    }
  ],
  "cssVars": {
    "theme": {
      "font-sans": "var(--font-satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif)",
      "font-display": "var(--font-cabinet, ui-sans-serif, system-ui, sans-serif)",
      "color-background": "var(--background)",
      "color-foreground": "var(--foreground)",
      "color-surface": "var(--surface)",
      "color-surface-muted": "var(--surface-muted)",
      "color-border": "var(--border)",
      "color-border-strong": "var(--border-strong)",
      "color-muted": "var(--muted)",
      "color-muted-foreground": "var(--muted-foreground)",
      "color-ring": "var(--ring)",
      "color-chili-50": "#fff1ee",
      "color-chili-100": "#ffe2db",
      "color-chili-200": "#ffa896",
      "color-chili-300": "#ff8a73",
      "color-chili-400": "#f15a45",
      "color-chili-500": "#cd1c18",
      "color-chili-600": "#b31614",
      "color-chili-700": "#9b1313",
      "color-chili-800": "#6a0d0e",
      "color-chili-900": "#38000a",
      "color-chili-950": "#1f0006",
      "color-primitive-surface-elevated": "var(--primitive-surface-elevated)",
      "color-primitive-surface-overlay": "var(--primitive-surface-overlay)",
      "color-primitive-surface-hover": "var(--primitive-surface-hover)",
      "color-primitive-surface-active": "var(--primitive-surface-active)",
      "color-primitive-surface-selected": "var(--primitive-surface-selected)",
      "color-primitive-border-subtle": "var(--primitive-border-subtle)",
      "color-primitive-ring": "var(--primitive-ring)",
      "color-primitive-text-secondary": "var(--primitive-text-secondary)",
      "color-primitive-text-placeholder": "var(--primitive-text-placeholder)",
      "color-primitive-text-inverse": "var(--primitive-text-inverse)",
      "color-primitive-destructive": "var(--primitive-destructive)",
      "color-primitive-destructive-hover": "var(--primitive-destructive-hover)",
      "color-primitive-destructive-active": "var(--primitive-destructive-active)",
      "color-primitive-destructive-foreground": "var(--primitive-destructive-foreground)",
      "color-primitive-destructive-surface": "var(--primitive-destructive-surface)",
      "color-primitive-destructive-border": "var(--primitive-destructive-border)",
      "color-primitive-success": "var(--primitive-success)",
      "color-primitive-warning": "var(--primitive-warning)",
      "color-primitive-info": "var(--primitive-info)",
      "color-primitive-control-solid": "var(--primitive-control-solid)",
      "color-primitive-control-solid-hover": "var(--primitive-control-solid-hover)",
      "color-primitive-control-solid-active": "var(--primitive-control-solid-active)",
      "color-primitive-control-solid-foreground": "var(--primitive-control-solid-foreground)",
      "color-primitive-chart-1": "var(--primitive-chart-1)",
      "color-primitive-chart-2": "var(--primitive-chart-2)",
      "color-primitive-chart-3": "var(--primitive-chart-3)",
      "color-primitive-chart-4": "var(--primitive-chart-4)",
      "color-primitive-chart-5": "var(--primitive-chart-5)",
      "color-primitive-chart-6": "var(--primitive-chart-6)",
      "radius-primitive": "var(--primitive-radius)",
      "radius-primitive-control": "var(--primitive-radius-control)",
      "radius-primitive-control-sm": "var(--primitive-radius-control-sm)",
      "radius-primitive-surface": "var(--primitive-radius-surface)",
      "radius-primitive-item": "var(--primitive-radius-item)",
      "font-primitive-sans": "var(--primitive-font-sans)",
      "font-primitive-display": "var(--primitive-font-display)",
      "font-primitive-mono": "var(--primitive-font-mono)",
      "spacing-primitive-control-height-sm": "var(--primitive-control-height-sm)",
      "spacing-primitive-control-height-md": "var(--primitive-control-height-md)",
      "spacing-primitive-control-height-lg": "var(--primitive-control-height-lg)"
    },
    "light": {
      "background": "#fafafa",
      "foreground": "#0a0a0a",
      "surface": "#ffffff",
      "surface-muted": "#f4f4f5",
      "border": "rgba(10, 10, 10, 0.08)",
      "border-strong": "rgba(10, 10, 10, 0.16)",
      "muted": "#f4f4f5",
      "muted-foreground": "#52525b",
      "ring": "#cd1c18",
      "pattern-fg": "rgba(10, 10, 10, 0.07)",
      "llb-primary": "#18181b",
      "llb-primary-fg": "#ffffff",
      "llb-success": "#1f883d",
      "llb-error": "#cf222e",
      "primitive-surface-elevated": "#ffffff",
      "primitive-surface-overlay": "#ffffff",
      "primitive-surface-hover": "color-mix(in srgb, var(--foreground) 4%, transparent)",
      "primitive-surface-active": "color-mix(in srgb, var(--foreground) 7%, transparent)",
      "primitive-surface-selected": "color-mix(in srgb, var(--foreground) 6%, transparent)",
      "primitive-border-subtle": "color-mix(in srgb, var(--border) 60%, transparent)",
      "primitive-ring": "color-mix(in srgb, var(--foreground) 45%, transparent)",
      "primitive-text-secondary": "color-mix(in srgb, var(--foreground) 72%, transparent)",
      "primitive-text-placeholder": "color-mix(in srgb, var(--muted-foreground) 85%, transparent)",
      "primitive-radius": "0.875rem",
      "primitive-font-sans": "var(--font-sans)",
      "primitive-font-display": "var(--font-display)",
      "primitive-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
      "primitive-control-solid": "#24292d",
      "primitive-control-solid-hover": "#2c3237",
      "primitive-control-solid-active": "#1e2326",
      "primitive-control-solid-foreground": "#ffffff",
      "primitive-chart-1": "#2a78d6",
      "primitive-chart-2": "#1baf7a",
      "primitive-chart-3": "#eda100",
      "primitive-chart-4": "#008300",
      "primitive-chart-5": "#4a3aa7",
      "primitive-chart-6": "#e34948",
      "primitive-text-inverse": "#ffffff",
      "primitive-text-hint": "0.6875rem",
      "primitive-destructive": "#dc2626",
      "primitive-destructive-hover": "#b91c1c",
      "primitive-destructive-active": "#991b1b",
      "primitive-destructive-foreground": "#ffffff",
      "primitive-destructive-surface": "rgba(220, 38, 38, 0.10)",
      "primitive-destructive-border": "rgba(220, 38, 38, 0.45)",
      "primitive-success": "#047857",
      "primitive-success-surface": "rgba(4, 120, 87, 0.10)",
      "primitive-success-border": "rgba(4, 120, 87, 0.45)",
      "primitive-warning": "#b45309",
      "primitive-warning-surface": "rgba(180, 83, 9, 0.10)",
      "primitive-warning-border": "rgba(180, 83, 9, 0.45)",
      "primitive-info": "#0369a1",
      "primitive-info-surface": "rgba(3, 105, 161, 0.10)",
      "primitive-info-border": "rgba(3, 105, 161, 0.45)",
      "primitive-radius-control": "var(--primitive-radius)",
      "primitive-radius-control-sm": "max(0px, calc(var(--primitive-radius) - 4px))",
      "primitive-radius-surface": "calc(var(--primitive-radius) + min(2px, var(--primitive-radius)))",
      "primitive-radius-item": "max(0px, calc(var(--primitive-radius-surface) - 6px))",
      "primitive-control-height-sm": "2rem",
      "primitive-control-height-md": "2.25rem",
      "primitive-control-height-lg": "2.5rem",
      "primitive-shadow-raised": "0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px -12px rgba(0, 0, 0, 0.08)",
      "primitive-shadow-overlay": "0 1px 2px rgba(0, 0, 0, 0.06), 0 18px 48px -24px rgba(0, 0, 0, 0.35)",
      "primitive-shadow-modal": "0 1px 2px rgba(0, 0, 0, 0.08), 0 24px 64px -28px rgba(0, 0, 0, 0.42)",
      "primitive-z-overlay": "100",
      "primitive-z-popover": "130",
      "primitive-z-toast": "140",
      "primitive-backdrop": "rgba(0, 0, 0, 0.6)",
      "primitive-ease": "cubic-bezier(0.23, 1, 0.32, 1)"
    },
    "dark": {
      "background": "#0a0a0b",
      "foreground": "#f5f5f6",
      "surface": "#111113",
      "surface-muted": "#18181b",
      "border": "rgba(255, 255, 255, 0.08)",
      "border-strong": "rgba(255, 255, 255, 0.14)",
      "muted": "#1c1c1f",
      "muted-foreground": "#a1a1aa",
      "ring": "#cd1c18",
      "pattern-fg": "rgba(255, 255, 255, 0.06)",
      "llb-primary": "#f5f5f6",
      "llb-primary-fg": "#0a0a0b",
      "llb-success": "#2da44e",
      "llb-error": "#f85149",
      "primitive-surface-elevated": "#0f0f10",
      "primitive-surface-overlay": "#141415",
      "primitive-surface-hover": "color-mix(in srgb, var(--foreground) 5%, transparent)",
      "primitive-surface-active": "color-mix(in srgb, var(--foreground) 10%, transparent)",
      "primitive-surface-selected": "color-mix(in srgb, var(--foreground) 8%, transparent)",
      "primitive-border-subtle": "color-mix(in srgb, var(--border) 60%, transparent)",
      "primitive-ring": "color-mix(in srgb, var(--foreground) 45%, transparent)",
      "primitive-text-secondary": "color-mix(in srgb, var(--foreground) 72%, transparent)",
      "primitive-text-placeholder": "color-mix(in srgb, var(--muted-foreground) 85%, transparent)",
      "primitive-radius": "0.875rem",
      "primitive-font-sans": "var(--font-sans)",
      "primitive-font-display": "var(--font-display)",
      "primitive-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
      "primitive-control-solid": "#f5f3ee",
      "primitive-control-solid-hover": "#ffffff",
      "primitive-control-solid-active": "#e8e4da",
      "primitive-control-solid-foreground": "#151719",
      "primitive-chart-1": "#3987e5",
      "primitive-chart-2": "#199e70",
      "primitive-chart-3": "#c98500",
      "primitive-chart-4": "#008300",
      "primitive-chart-5": "#9085e9",
      "primitive-chart-6": "#e66767",
      "primitive-text-inverse": "#151719",
      "primitive-text-hint": "0.6875rem",
      "primitive-destructive": "#e11d2e",
      "primitive-destructive-hover": "#c1121f",
      "primitive-destructive-active": "#a4161a",
      "primitive-destructive-foreground": "#ffffff",
      "primitive-destructive-surface": "rgba(225, 29, 46, 0.12)",
      "primitive-destructive-border": "rgba(225, 29, 46, 0.52)",
      "primitive-success": "#34d399",
      "primitive-success-surface": "rgba(52, 211, 153, 0.12)",
      "primitive-success-border": "rgba(52, 211, 153, 0.45)",
      "primitive-warning": "#fbbf24",
      "primitive-warning-surface": "rgba(251, 191, 36, 0.12)",
      "primitive-warning-border": "rgba(251, 191, 36, 0.45)",
      "primitive-info": "#38bdf8",
      "primitive-info-surface": "rgba(56, 189, 248, 0.12)",
      "primitive-info-border": "rgba(56, 189, 248, 0.45)",
      "primitive-radius-control": "var(--primitive-radius)",
      "primitive-radius-control-sm": "max(0px, calc(var(--primitive-radius) - 4px))",
      "primitive-radius-surface": "calc(var(--primitive-radius) + min(2px, var(--primitive-radius)))",
      "primitive-radius-item": "max(0px, calc(var(--primitive-radius-surface) - 6px))",
      "primitive-control-height-sm": "2rem",
      "primitive-control-height-md": "2.25rem",
      "primitive-control-height-lg": "2.5rem",
      "primitive-shadow-raised": "0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6)",
      "primitive-shadow-overlay": "0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 56px -28px rgba(0, 0, 0, 0.72)",
      "primitive-shadow-modal": "0 1px 2px rgba(0, 0, 0, 0.45), 0 28px 72px -32px rgba(0, 0, 0, 0.8)",
      "primitive-z-overlay": "100",
      "primitive-z-popover": "130",
      "primitive-z-toast": "140",
      "primitive-backdrop": "rgba(0, 0, 0, 0.6)",
      "primitive-ease": "cubic-bezier(0.23, 1, 0.32, 1)"
    }
  },
  "css": {
    "@layer base": {
      ":where([data-wensity-primitive])": {
        "font-family": "var(--primitive-font-sans)"
      }
    },
    "@utility scrollbar-hidden": {
      "scrollbar-width": "none",
      "-ms-overflow-style": "none",
      "&::-webkit-scrollbar": {
        "display": "none"
      }
    },
    "@keyframes wensity-marquee-x": {
      "from": {
        "transform": "translate3d(0, 0, 0)"
      },
      "to": {
        "transform": "translate3d(-50%, 0, 0)"
      }
    },
    "@keyframes wensity-marquee-x-reverse": {
      "from": {
        "transform": "translate3d(-50%, 0, 0)"
      },
      "to": {
        "transform": "translate3d(0, 0, 0)"
      }
    },
    "@keyframes wensity-morph-rot-cw": {
      "from": {
        "transform": "rotate(0deg)"
      },
      "to": {
        "transform": "rotate(360deg)"
      }
    },
    "@keyframes wensity-morph-rot-ccw": {
      "from": {
        "transform": "rotate(0deg)"
      },
      "to": {
        "transform": "rotate(-360deg)"
      }
    }
  },
  "docs": "Free Wensity component. Installs to @components/wensity/pagination.tsx. For Pro components and updates, use pnpm dlx wensity@latest add pagination.",
  "categories": [
    "UI Primitives",
    "wensity",
    "free"
  ],
  "meta": {
    "wensity": {
      "slug": "pagination",
      "access": "free",
      "category": "UI Primitives",
      "kind": "component",
      "componentUrl": "https://ui.wensity.com/primitives/pagination",
      "shadcnUrl": "https://ui.wensity.com/r/pagination",
      "cliInstall": "pnpm dlx wensity@latest add pagination"
    }
  }
}