@flamingo-stack/openframe-frontend-core 0.0.213 → 0.0.214

package/src/components/ui/.brand-association-card.md

@@ -1,38 +1,41 @@
-<!-- source-hash: 081b5c3b13b2ad86e0cfa2882aaec148 -->
-A React component that renders a brand association card with an icon, title, description, and external link button. It handles both React component icons and React element icons through a flexible rendering system.
+<!-- source-hash: d0a2530b7492095645c20b724f126d0d -->
+A client-side React card component that displays a brand association item with an icon, title, description, and an external link button.
 
 ## Key Components
 
-- **BrandAssociationItem**: Interface defining the card's data structure with icon, title, description, button text, and link
-- **BrandAssociationCardProps**: Props interface accepting an item and optional className
-- **BrandAssociationCard**: Main component that renders the card with responsive styling and icon handling
-- **renderIcon()**: Helper function that safely renders both component-type and element-type icons
+### Interfaces
+
+| Interface | Description |
+|-----------|-------------|
+| `BrandAssociationItem` | Data model for a single card — accepts a React component or element as icon, plus title, description, button text, and link URL |
+| `BrandAssociationCardProps` | Props for the card component; wraps `BrandAssociationItem` with an optional `className` |
+
+### `BrandAssociationCard`
+
+The primary exported component. Renders a styled card with:
+
+- **Icon** — handles both raw `React.ReactElement` and `React.ComponentType` via an internal `renderIcon()` helper
+- **Title** — displayed as an `h3` with ODS primary text styling
+- **Description** — secondary text using DM Sans font
+- **CTA Button** — an outline `Button` with an `ExternalLink` icon that opens the provided `link` in a new tab
 
 ## Usage Example
 
 ```typescript
 import { BrandAssociationCard } from './brand-association-card';
-import { Github } from 'lucide-react';
-
-const githubItem = {
-  icon: Github,
-  title: "Open Source Projects",
-  description: "Explore our collection of open source tools and libraries",
-  buttonText: "GitHub",
-  link: "https://github.com/company"
+import { ShieldCheck } from 'lucide-react';
+
+const item = {
+  icon: ShieldCheck,
+  title: 'Security Tools',
+  description: 'Browse our curated list of security integrations.',
+  buttonText: 'Integrations',
+  link: 'https://flamingo.run/integrations',
 };
 
-// Using with a component icon
-<BrandAssociationCard item={githubItem} className="rounded-lg" />
-
-// Using with a React element icon
-const elementItem = {
-  icon: <Github size={120} className="w-20 h-20" />,
-  title: "Custom Icon",
-  description: "Example with pre-configured icon element",
-  buttonText: "Link",
-  link: "https://example.com"
-};
+export default function Page() {
+  return <BrandAssociationCard item={item} className="rounded-xl" />;
+}
+```
 
-<BrandAssociationCard item={elementItem} />
-```
+> **Note:** The `icon` prop accepts either a component type (e.g., a Lucide icon) or a pre-rendered `React.ReactElement`. When passing a component, it is rendered at `120px` size with `w-20 h-20` Tailwind classes applied automatically.

package/src/components/ui/.breadcrumb.md

@@ -1,15 +1,17 @@
-<!-- source-hash: 17eb20999b7c9f3a5688d1a511823312 -->
-A React component library that provides a complete breadcrumb navigation system with accessibility features and customizable styling. Built using Radix UI's Slot component for flexible composition patterns.
+<!-- source-hash: cb8e8ae598fa4e3046aa0545d0ea86b2 -->
+Accessible breadcrumb navigation component built on semantic HTML with full ARIA support, using Radix UI's `Slot` for flexible rendering.
 
 ## Key Components
 
-- **`Breadcrumb`** - Root navigation wrapper with semantic `nav` element and aria-label
-- **`BreadcrumbList`** - Ordered list container with responsive gap styling
-- **`BreadcrumbItem`** - Individual breadcrumb item wrapper with flex layout
-- **`BreadcrumbLink`** - Clickable breadcrumb link with hover transitions and optional `asChild` prop
-- **`BreadcrumbPage`** - Current page indicator with proper ARIA attributes (`aria-current="page"`)
-- **`BreadcrumbSeparator`** - Visual separator between items (defaults to ChevronRight icon)
-- **`BreadcrumbEllipsis`** - Truncation indicator using MoreHorizontal icon for long breadcrumb chains
+| Export | Type | Description |
+|--------|------|-------------|
+| `Breadcrumb` | `nav` wrapper | Root container with `aria-label="breadcrumb"` |
+| `BreadcrumbList` | `ol` element | Ordered list of breadcrumb items |
+| `BreadcrumbItem` | `li` element | Individual breadcrumb entry wrapper |
+| `BreadcrumbLink` | `a` element | Clickable navigation link; supports `asChild` for custom renderers |
+| `BreadcrumbPage` | `span` element | Current page indicator (`aria-current="page"`, non-interactive) |
+| `BreadcrumbSeparator` | `li` element | Visual divider, defaults to `ChevronRight`; accepts custom children |
+| `BreadcrumbEllipsis` | `span` element | Collapsed items indicator using `MoreHorizontal` icon |
 
 ## Usage Example
 
@@ -22,9 +24,9 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
   BreadcrumbEllipsis,
-} from "./breadcrumb"
+} from "@/components/ui/breadcrumb"
 
-export function NavigationBreadcrumb() {
+export function AppBreadcrumb() {
   return (
     <Breadcrumb>
       <BreadcrumbList>
@@ -33,15 +35,15 @@ export function NavigationBreadcrumb() {
         </BreadcrumbItem>
         <BreadcrumbSeparator />
         <BreadcrumbItem>
-          <BreadcrumbLink href="/products">Products</BreadcrumbLink>
+          <BreadcrumbEllipsis />
         </BreadcrumbItem>
         <BreadcrumbSeparator />
         <BreadcrumbItem>
-          <BreadcrumbEllipsis />
+          <BreadcrumbLink href="/settings">Settings</BreadcrumbLink>
         </BreadcrumbItem>
         <BreadcrumbSeparator />
         <BreadcrumbItem>
-          <BreadcrumbPage>Current Page</BreadcrumbPage>
+          <BreadcrumbPage>Profile</BreadcrumbPage>
         </BreadcrumbItem>
       </BreadcrumbList>
     </Breadcrumb>
@@ -49,4 +51,4 @@ export function NavigationBreadcrumb() {
 }
 ```
 
-The components use `forwardRef` for proper ref handling and include comprehensive accessibility attributes for screen readers.
+> **`asChild` pattern:** Pass `asChild` to `BreadcrumbLink` to delegate rendering to a child component (e.g., a router `Link`), inheriting all props via Radix UI `Slot`.

package/src/components/ui/.checkbox-block.md

@@ -1,42 +1,46 @@
-<!-- source-hash: 1c22919d53372a6c9135a3f4f1789493 -->
-A full-width checkbox component with label and optional description text, built on Radix UI primitives with dark theme styling optimized for Flamingo's design system.
+<!-- source-hash: 01a25a0740d1f4040be1a2e32f829429 -->
+A styled checkbox component that renders as a full-width interactive block with a label, optional description, and error state — built on top of Radix UI's `CheckboxPrimitive`.
 
 ## Key Components
 
-- **CheckboxBlock**: Main component that renders a full-width checkbox block with label and optional description
-- **CheckboxBlockProps**: Interface defining the component's props including `label`, `description`, `checked`, and event handlers
-- Uses `@radix-ui/react-checkbox` for accessibility and keyboard navigation
-- Integrates with Flamingo's custom `CheckIcon` and `cn` utility for conditional styling
+- **`CheckboxBlock`** — A `forwardRef` component wrapping `@radix-ui/react-checkbox` with a card-style block layout
+- **`CheckboxBlockProps`** — Interface extending standard checkbox behavior with `label`, `description`, `error`, and `className`
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `label` | `string` | Required primary text displayed next to the checkbox |
+| `description` | `React.ReactNode` | Optional secondary text below the label |
+| `error` | `string` | Error message shown below the block; also triggers a red border |
+| `checked` / `defaultChecked` | `boolean` | Controlled/uncontrolled checked state |
+| `onCheckedChange` | `(checked: boolean) => void` | Change handler |
+| `disabled` | `boolean` | Disables interaction and reduces opacity |
 
 ## Usage Example
 
 ```typescript
-import { CheckboxBlock } from "./components/ui/checkbox-block"
-
-export default function SettingsForm() {
-  const [emailNotifications, setEmailNotifications] = useState(false)
-  const [pushNotifications, setPushNotifications] = useState(true)
-
-  return (
-    <div className="space-y-4">
-      <CheckboxBlock
-        id="email-notifications"
-        label="Email Notifications"
-        description="Receive updates and alerts via email"
-        checked={emailNotifications}
-        onCheckedChange={setEmailNotifications}
-      />
-      
-      <CheckboxBlock
-        id="push-notifications"
-        label="Push Notifications"
-        checked={pushNotifications}
-        onCheckedChange={setPushNotifications}
-        disabled={!emailNotifications}
-      />
-    </div>
-  )
-}
-```
-
-The component automatically adjusts height based on whether a description is provided (64px with description, 44px/48px without) and includes hover effects, focus management, and disabled states following Flamingo's dark theme palette.
+import { CheckboxBlock } from "./checkbox-block"
+
+// Basic usage
+<CheckboxBlock
+  id="terms"
+  label="Accept Terms & Conditions"
+  description="By checking this, you agree to our terms of service."
+  onCheckedChange={(checked) => console.log(checked)}
+/>
+
+// With error state
+<CheckboxBlock
+  id="required-field"
+  label="Required option"
+  error="This field is required"
+  checked={false}
+  onCheckedChange={handleChange}
+/>
+
+// Disabled
+<CheckboxBlock
+  id="disabled-option"
+  label="Unavailable option"
+  disabled
+/>
+```

package/src/components/ui/.checkbox-with-description.md

@@ -1,34 +1,41 @@
-<!-- source-hash: 8c9ce312478e577919daf49315fc3e44 -->
-A React component that renders a checkbox with an associated title and description text, providing a rich form control with clear labeling and accessibility features.
+<!-- source-hash: c1a54005af93850cd2ca67c81ddf2ca7 -->
+A compound checkbox component that pairs a Radix UI checkbox with a title and description, styled with ODS (OpenFrame Design System) tokens.
 
 ## Key Components
 
-- **CheckboxWithDescription**: Main component that combines a Radix UI checkbox with title and description labels
-- **CheckboxWithDescriptionProps**: TypeScript interface defining the component's props including required fields and optional styling
-- Uses Radix UI's CheckboxPrimitive for accessible checkbox functionality
-- Integrates with a custom Label component and Lucide React icons
+- **`CheckboxWithDescription`** — A `forwardRef` component combining a controlled checkbox, label, and descriptive text in a card-style container
+- **`CheckboxWithDescriptionProps`** — Interface defining the component's controlled state and content props
+
+### Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `id` | `string` | ✅ | Links the label `htmlFor` to the checkbox input |
+| `checked` | `boolean` | ✅ | Controlled checked state |
+| `onCheckedChange` | `(checked: boolean) => void` | ✅ | Change handler |
+| `title` | `string` | ✅ | Primary label text |
+| `description` | `string` | ✅ | Secondary descriptive text |
+| `disabled` | `boolean` | ❌ | Disables interaction and dims the container |
+| `className` | `string` | ❌ | Additional classes for the outer wrapper |
 
 ## Usage Example
 
 ```typescript
-import { CheckboxWithDescription } from "./checkbox-with-description"
-import { useState } from "react"
+import { CheckboxWithDescription } from "@/components/ui/checkbox-with-description"
 
 function SettingsForm() {
-  const [notifications, setNotifications] = useState(false)
+  const [enabled, setEnabled] = React.useState(false)
 
   return (
     <CheckboxWithDescription
-      id="email-notifications"
-      checked={notifications}
-      onCheckedChange={setNotifications}
+      id="notifications"
+      checked={enabled}
+      onCheckedChange={setEnabled}
       title="Email Notifications"
-      description="Receive updates about new features and important announcements via email"
-      disabled={false}
-      className="max-w-md"
+      description="Receive alerts when a ticket is updated or assigned to you."
     />
   )
 }
 ```
 
-The component features a card-like design with proper spacing, hover states, and disabled styling. It uses the ODS (design system) color tokens for consistent theming and includes focus management for accessibility compliance.
+> The outer container becomes visually dimmed (`opacity-50`) and non-interactive (`cursor-not-allowed`) when `disabled` is set, applying consistently to both the checkbox and its label.

package/src/components/ui/.checkbox.md

@@ -1,37 +1,45 @@
-<!-- source-hash: 91a5d16d45866ca53bb2b4d38f02c027 -->
-A React checkbox component built on Radix UI primitives with custom ODS (Open Design System) styling and a Lucide React check icon indicator.
+<!-- source-hash: 7fc8fb652b97c38a1cb8496cc92c8f34 -->
+Accessible checkbox component built on Radix UI's `CheckboxPrimitive`, styled with ODS (OpenFrame Design System) tokens and a custom checkmark icon.
 
 ## Key Components
 
-- **Checkbox** - Main checkbox component that forwards refs and extends Radix UI CheckboxPrimitive.Root
-- **CheckboxPrimitive.Root** - Base Radix UI checkbox element with accessibility features
-- **CheckboxPrimitive.Indicator** - Container for the check icon that appears when checked
-- **Check** - Lucide React check icon used as the visual indicator
+- **`Checkbox`** — A `forwardRef` wrapper around `@radix-ui/react-checkbox` Root, with ODS-themed styles for default, checked, focused, and disabled states.
 
 ## Usage Example
 
 ```typescript
-import { Checkbox } from "./components/ui/checkbox"
-
-function MyForm() {
-  const [isChecked, setIsChecked] = React.useState(false)
+import { Checkbox } from "@/components/ui/checkbox"
 
+export function AcceptTerms() {
   return (
-    <div className="flex items-center space-x-2">
-      <Checkbox 
-        id="terms"
-        checked={isChecked}
-        onCheckedChange={setIsChecked}
-      />
-      <label 
-        htmlFor="terms" 
-        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-      >
-        Accept terms and conditions
-      </label>
+    <div className="flex items-center gap-2">
+      <Checkbox id="terms" defaultChecked={false} />
+      <label htmlFor="terms">Accept terms and conditions</label>
     </div>
   )
 }
+
+// Controlled usage
+export function ControlledCheckbox() {
+  const [checked, setChecked] = React.useState(false)
+
+  return (
+    <Checkbox
+      checked={checked}
+      onCheckedChange={(value) => setChecked(!!value)}
+      disabled={false}
+    />
+  )
+}
 ```
 
-The component uses ODS design tokens for consistent theming (`ods-border`, `ods-card`, `ods-accent`, `ods-bg`) and includes focus states, disabled states, and proper accessibility support through Radix UI's primitives.
+## States & Styling
+
+| State | Behavior |
+|-------|----------|
+| Default | `border-ods-border`, `bg-ods-card` background |
+| Checked | `bg-ods-accent`, `border-ods-accent` with `CheckboxCheckmarkIcon` (10px) |
+| Focus | `ring-2` with `ods-accent` ring and 2px offset |
+| Disabled | `opacity-50`, `cursor-not-allowed` |
+
+All props from `@radix-ui/react-checkbox` Root are forwarded, including `checked`, `defaultChecked`, `onCheckedChange`, and `disabled`.

package/src/components/ui/.circular-progress.md

@@ -1,36 +1,66 @@
-<!-- source-hash: 048e0df81b3ecac07325042985354730 -->
-A React component that renders an animated circular progress indicator using SVG with customizable styling and smooth transitions.
+<!-- source-hash: b3367d6791779cace17c9e0ea0b291bc -->
+A React SVG-based circular progress ring component with configurable variants, sizes, and overflow behavior for displaying percentage values.
 
 ## Key Components
 
-- **CircularProgress**: Main component that renders a circular progress ring
-- **CircularProgressProps**: Interface defining component properties including percentage, size, colors, and styling options
-- **SVG-based rendering**: Uses two overlapping circles to create the progress effect with stroke-dasharray animation
+### Types
+
+| Type | Values | Description |
+|------|--------|-------------|
+| `CircularProgressVariant` | `success` \| `warning` \| `error` \| `info` \| `accent` | Color theme for the progress ring |
+| `CircularProgressOverflow` | `clamp` \| `wrap` | How to handle percentages exceeding 100 |
+
+### Props (`CircularProgressProps`)
+
+| Prop | Default | Description |
+|------|---------|-------------|
+| `percentage` | — | Progress value (0–100 in clamp; unbounded in wrap) |
+| `variant` | `'success'` | Color variant using ODS design tokens |
+| `size` | `56` | Diameter in pixels |
+| `strokeWidth` | `10` | Ring stroke thickness in pixels |
+| `showLabel` | `true` | Renders percentage text in the center |
+| `labelFormat` | `'percent'` | `'percent'` → `"70%"`, `'value'` → `"70"` |
+| `overflow` | `'clamp'` | Overflow handling strategy |
+
+### `CircularProgress` (exported component)
+
+Renders a two-circle SVG (track + progress arc) rotated -90° so progress starts at the top. The progress arc is animated via `strokeDashoffset`.
 
 ## Usage Example
 
 ```typescript
-import { CircularProgress } from './components/ui/circular-progress'
+// Basic usage
+<CircularProgress percentage={72} />
 
-// Basic usage with default styling
-<CircularProgress percentage={75} />
+// Overage warning with wrap mode
+<CircularProgress
+  percentage={130}
+  variant="warning"
+  overflow="wrap"
+/>
+// Ring shows 30%, label shows 130%
 
-// Customized progress indicator
-<CircularProgress 
+// Custom size, no label, accent variant
+<CircularProgress
   percentage={45}
+  variant="accent"
   size={80}
   strokeWidth={8}
-  color="#3b82f6"
-  trackColor="#e5e7eb"
-  className="mb-4"
+  showLabel={false}
 />
 
-// Small progress indicator
-<CircularProgress 
-  percentage={90}
-  size={32}
-  strokeWidth={4}
+// Raw value label (no % suffix)
+<CircularProgress
+  percentage={88}
+  labelFormat="value"
+  variant="info"
 />
 ```
 
-The component automatically clamps percentage values between 0-100, rotates the SVG -90 degrees to start from the top, and includes smooth CSS transitions. The center displays the percentage value as text, and all visual aspects (size, colors, stroke width) are fully customizable through props.
+## Overflow Behavior
+
+```text
+clamp mode:  percentage=130 → ring=100%, label="100%"
+wrap mode:   percentage=130 → ring=30%,  label="130%"
+wrap mode:   percentage=200 → ring=100%, label="200%"  (exact lap = full ring)
+```

package/src/components/ui/.content-loader.md

@@ -1,31 +1,43 @@
-<!-- source-hash: 8e5f6a030893b139e570cdef3cee4834 -->
-A unified React loading skeleton component that provides consistent loading states across different content types using ODS design tokens. Replaces duplicate loading patterns with a single, configurable component.
+<!-- source-hash: f80d7f61d9427dcf715215adf596f271 -->
+A unified skeleton loading component that replaces duplicate loading patterns across the UI, using ODS design tokens for consistent theming.
 
 ## Key Components
 
-- **ContentLoader** - Main component with variant-based rendering (`card`, `form`, `detail`, `list`)
-- **ContentLoaderProps** - TypeScript interface for component configuration
-- **Specialized Exports** - Pre-configured variants (`CardLoader`, `FormLoader`, `DetailLoader`, `ListLoader`)
+**`ContentLoader`** — Main export. Renders an animated pulse skeleton based on the selected `variant`.
+
+**`ContentLoaderProps`**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `'card' \| 'form' \| 'detail' \| 'list'` | `'card'` | Skeleton layout type |
+| `items` | `number` | `4` | Number of repeated skeleton items |
+| `showTitle` | `boolean` | `true` | Renders a title placeholder bar |
+| `className` | `string` | — | Inner wrapper CSS classes |
+| `containerClassName` | `string` | — | Outer container CSS classes |
+
+**Convenience exports** — Pre-bound variants for direct use:
+- `CardLoader` — stat/metric card layout
+- `FormLoader` — labeled input fields layout
+- `DetailLoader` — two-column detail/sidebar layout
+- `ListLoader` — icon + text row list layout
 
 ## Usage Example
 
 ```typescript
-import { ContentLoader, CardLoader, FormLoader } from './content-loader'
+// Generic usage
+import { ContentLoader } from './content-loader';
+
+<ContentLoader variant="list" items={6} showTitle={false} />
 
-// Generic usage with variants
-<ContentLoader variant="card" items={3} showTitle={true} />
-<ContentLoader variant="list" items={5} className="custom-spacing" />
+// Convenience variants
+import { FormLoader, DetailLoader, ListLoader } from './content-loader';
 
-// Pre-configured variants
-<CardLoader items={4} showTitle={false} />
-<FormLoader items={6} containerClassName="bg-gray-50" />
+// Form skeleton with 3 fields
+<FormLoader items={3} />
 
-// Custom styling
-<ContentLoader 
-  variant="detail" 
-  className="my-custom-styles"
-  containerClassName="p-8"
-/>
-```
+// Detail page skeleton
+<DetailLoader containerClassName="max-w-4xl" />
 
-The component uses Tailwind CSS classes with ODS design tokens (`bg-bg-surface`, `border-border-primary`) and includes responsive layouts. Each variant renders appropriate skeleton structures - cards show grid layouts, forms display input fields, details use column layouts, and lists show repeated items with avatars and metadata placeholders.
+// List with custom container
+<ListLoader items={8} showTitle={false} containerClassName="px-0" />
+```

package/src/components/ui/.cursor-pagination.md

@@ -1,63 +1,52 @@
-<!-- source-hash: c39440d94420da7eb66c732ad6e6ba11 -->
-A React component library providing cursor-based pagination controls with flexible display options and navigation callbacks for GraphQL-style paginated data.
+<!-- source-hash: 0e65f8e03b416890c9d63ba33ba86a8e -->
+Cursor-based pagination UI components for navigating relay-style paginated data using start/end cursors instead of page numbers.
 
 ## Key Components
 
 ### `CursorPagination`
-Main pagination component with full feature set including:
-- **Navigation**: Previous/Next buttons with cursor-based navigation
-- **Reset functionality**: Optional first page reset with customizable icon
-- **Display options**: Item counts, totals, and responsive layouts
-- **Accessibility**: Proper ARIA labels and keyboard navigation
-- **States**: Loading, disabled, and compact mode support
+Full-featured pagination bar with optional info text, Previous/Next navigation, and a reset-to-first-page button. Supports both compact and standard layouts.
 
 ### `CursorPaginationSimple`
-Minimal icon-only pagination variant with:
-- **Compact design**: Icon-only buttons for space-constrained layouts
-- **Essential navigation**: Basic previous/next/reset functionality
-- **Consistent styling**: Ghost button variant with hover states
+Minimal icon-only variant using transparent buttons — ideal for inline or space-constrained contexts like table toolbars.
+
+### `CursorPaginationProps`
+Full interface supporting:
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `hasNextPage` | `boolean` | Required. Enables/disables Next button |
+| `hasPreviousPage` | `boolean` | Enables/disables Previous button |
+| `isFirstPage` | `boolean` | Disables reset button when already on page 1 |
+| `startCursor` / `endCursor` | `string \| null` | Relay-style cursors passed back on navigation |
+| `totalCount` / `currentCount` | `number` | Drives the info display text |
+| `onNext` / `onPrevious` / `onReset` | `(cursor) => void` | Navigation callbacks |
+| `compact` | `boolean` | Reduces padding; hides button labels on mobile |
+| `resetButtonIcon` | `'home' \| 'rotate'` | Icon shown on the first-page reset button |
 
 ## Usage Example
 
 ```typescript
-import { CursorPagination } from './cursor-pagination'
-
-// Full-featured pagination
-function DataTable() {
-  const [pageInfo, setPageInfo] = useState({
-    hasNextPage: true,
-    hasPreviousPage: false,
-    startCursor: null,
-    endCursor: 'cursor123'
-  })
-
-  return (
-    <CursorPagination
-      hasNextPage={pageInfo.hasNextPage}
-      hasPreviousPage={pageInfo.hasPreviousPage}
-      startCursor={pageInfo.startCursor}
-      endCursor={pageInfo.endCursor}
-      currentCount={10}
-      totalCount={100}
-      itemName="users"
-      onNext={(cursor) => fetchNextPage(cursor)}
-      onPrevious={(cursor) => fetchPreviousPage(cursor)}
-      onReset={() => resetToFirstPage()}
-      showInfo={true}
-      compact={false}
-    />
-  )
-}
-
-// Minimal pagination
-function CompactTable() {
-  return (
-    <CursorPaginationSimple
-      hasNextPage={true}
-      hasPreviousPage={false}
-      onNext={() => goToNext()}
-      onReset={() => resetPagination()}
-    />
-  )
-}
+import { CursorPagination, CursorPaginationSimple } from './cursor-pagination'
+
+// Full pagination bar
+<CursorPagination
+  hasNextPage={pageInfo.hasNextPage}
+  hasPreviousPage={pageInfo.hasPreviousPage}
+  startCursor={pageInfo.startCursor}
+  endCursor={pageInfo.endCursor}
+  currentCount={items.length}
+  totalCount={totalCount}
+  itemName="tickets"
+  onNext={(cursor) => fetchPage({ after: cursor })}
+  onReset={() => fetchPage({})}
+  compact
+/>
+
+// Icon-only minimal variant
+<CursorPaginationSimple
+  hasNextPage={pageInfo.hasNextPage}
+  onNext={() => fetchPage({ after: pageInfo.endCursor })}
+  onReset={() => fetchPage({})}
+  isFirstPage={isFirstPage}
+/>
 ```