@vibe-labs/design-components-pagination

Pagination component tokens, styles, and TypeScript types for the Vibe Design System.

Usage

@import "@vibe-labs/design-components-pagination";

import type { PaginationStyleProps, PaginationItemStyleProps } from "@vibe-labs/design-components-pagination/types";

Contents

Tokens (pagination.css)

CSS custom properties defined in @layer vibe.tokens:

Token	Default	Description
--pagination-gap	--space-1	Gap between items
--pagination-item-size	2rem	Min width and height
--pagination-item-radius	--radius-md	Border radius
--pagination-item-font-size	--text-sm	Font size
--pagination-item-font-weight	400	Default weight
--pagination-item-color	--text-secondary	Text color
--pagination-item-bg	transparent	Background
--pagination-item-hover-bg	--surface-hover-overlay	Hover background
--pagination-item-active-bg	--color-accent	Active page background
--pagination-item-active-color	--color-accent-contrast	Active page text
--pagination-item-active-font-weight	--font-semibold	Active page weight
--pagination-item-disabled-opacity	--input-disabled-opacity	Disabled opacity
--pagination-ellipsis-color	--text-muted	Ellipsis color

Generated Styles (pagination.g.css)

Component classes generated into @layer vibe.components.

Elements

• pagination — flex row container, reset list styles
• pagination-item — interactive page button with hover/active/focus/disabled states. aria-current marks the active page (accent bg, contrast text, no pointer)
• pagination-ellipsis — non-interactive "…" placeholder

TypeScript Types (types/)

interface PaginationStyleProps {}
interface PaginationItemStyleProps {
  disabled?: boolean;
}
interface PaginationEllipsisStyleProps {}

Dist Structure

File	Description
index.css	Barrel — imports tokens + generated styles
pagination.css	Token definitions
pagination.g.css	Generated component styles
index.js / index.d.ts	TypeScript types + runtime constants

Dependencies

Requires tokens from @vibe-labs/design (colors, surfaces, spacing, typography, transitions, elevation).

Build

npm run build