feat: add Pagination component and related exports

[Aunshon]

Summary by CodeRabbit

• New Features

  • Added a fully accessible pagination component for navigating between pages. Features include previous/next controls, clickable page links with active state indicators, and ellipsis elements to represent skipped page ranges.

• Documentation

  • Added comprehensive Storybook documentation with stories demonstrating pagination usage in various scenarios, including edge cases like first page, last page, and icon-only navigation modes.

[coderabbitai]

📝 Walkthrough

Walkthrough

Added a complete pagination UI component system (Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis) with accessibility features, associated Storybook stories demonstrating five different pagination states, and updated module exports. Also updated SmartMultiSelect trigger width from fixed to fluid.

Changes

Cohort / File(s)	Summary
Pagination Component System src/components/ui/pagination.tsx	Added new accessible pagination components with semantic HTML, ARIA attributes, and support for active states, directional navigation, and ellipsis indicators.
Module Exports src/components/ui/index.ts, src/index.ts	Added re-exports for all pagination components and PaginationLinkProps type to component and root-level export files.
Storybook Stories src/components/ui/Pagination.stories.tsx	Added five pagination stories (Default, ManyPages, FirstPage, LastPage, IconsOnly) demonstrating different pagination layouts and interactive states.
UI Update src/components/ui/smart-multi-select.tsx	Changed trigger wrapper width from fixed w-[250px] to w-full for responsive layout.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• feat: update SmartSelect component and add SmartMultiSelect exports #78 — Updates SmartMultiSelect trigger styling and modifies exports in src/index.ts, overlapping with width class change in this PR.

Suggested reviewers

• mrabbani

Poem

🐰 Hop along with pages new,
From First through Last, a guided view,
Ellipsis dots and chevrons bright,
Pagination flows, accessible right! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: adding a Pagination component with related exports across multiple files.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch add/pagination

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (2)

src/components/ui/pagination.tsx (1)

68-100: Consider adding disabled state support for first/last page scenarios.

The components work well for navigation, but users may want to disable PaginationPrevious on the first page and PaginationNext on the last page. Currently, this would require consumers to conditionally render or apply custom styling.

Consider adding a disabled prop that sets aria-disabled="true" and applies disabled styling. This is optional since consumers can work around it.

💡 Optional enhancement for disabled state

type PaginationPreviousProps = React.ComponentProps<typeof PaginationLink> & {
  disabled?: boolean;
};

function PaginationPrevious({
  className,
  disabled,
  ...props
}: PaginationPreviousProps) {
  return (
    <PaginationLink
      aria-label="Go to previous page"
      aria-disabled={disabled || undefined}
      size="default"
      className={cn(
        "gap-1 px-2.5 sm:pl-2.5",
        disabled && "pointer-events-none opacity-50",
        className
      )}
      {...props}
    >
      <ChevronLeftIcon />
      <span className="hidden sm:block">Previous</span>
    </PaginationLink>
  );
}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/ui/pagination.tsx` around lines 68 - 100, Add optional
disabled support to PaginationPrevious and PaginationNext: extend their props
from React.ComponentProps<typeof PaginationLink> with a disabled?: boolean, pass
aria-disabled={disabled || undefined} into PaginationLink, and conditionally
include disabled styling classes (e.g., "pointer-events-none opacity-50") in the
cn(...) call so the buttons are visually and programmatically disabled without
consumers having to special-case rendering; update both functions
(PaginationPrevious and PaginationNext) to accept the new prop and forward
...props as before.

src/components/ui/Pagination.stories.tsx (1)

142-166: The [&_span]:hidden selector is fragile.

This CSS selector relies on the internal structure of PaginationPrevious/PaginationNext components. If the component implementation changes (e.g., span becomes a different element), this story will break silently.

Consider documenting this pattern or adding a dedicated iconOnly prop to the Previous/Next components if this is a common use case.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/ui/Pagination.stories.tsx` around lines 142 - 166, The story
uses a fragile descendant selector "[&_span]:hidden" on PaginationPrevious and
PaginationNext which depends on their internal markup; update the components to
support an explicit icon-only mode and change the story to use that instead: add
an iconOnly (or hideLabel) prop to PaginationPrevious and PaginationNext (and
propagate it through PaginationItem/PaginationContent if needed), implement
conditional rendering or a dedicated class inside those components to hide the
label without depending on a span tag, and update this IconsOnly story to pass
iconOnly to PaginationPrevious and PaginationNext; also add a short comment/doc
note in the story or component docs explaining the new prop for future
maintainers.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/components/ui/Pagination.stories.tsx`:
- Around line 142-166: The story uses a fragile descendant selector
"[&_span]:hidden" on PaginationPrevious and PaginationNext which depends on
their internal markup; update the components to support an explicit icon-only
mode and change the story to use that instead: add an iconOnly (or hideLabel)
prop to PaginationPrevious and PaginationNext (and propagate it through
PaginationItem/PaginationContent if needed), implement conditional rendering or
a dedicated class inside those components to hide the label without depending on
a span tag, and update this IconsOnly story to pass iconOnly to
PaginationPrevious and PaginationNext; also add a short comment/doc note in the
story or component docs explaining the new prop for future maintainers.

In `@src/components/ui/pagination.tsx`:
- Around line 68-100: Add optional disabled support to PaginationPrevious and
PaginationNext: extend their props from React.ComponentProps<typeof
PaginationLink> with a disabled?: boolean, pass aria-disabled={disabled ||
undefined} into PaginationLink, and conditionally include disabled styling
classes (e.g., "pointer-events-none opacity-50") in the cn(...) call so the
buttons are visually and programmatically disabled without consumers having to
special-case rendering; update both functions (PaginationPrevious and
PaginationNext) to accept the new prop and forward ...props as before.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 53a28752-36d7-4910-a891-56a417b4f474

📥 Commits

Reviewing files that changed from the base of the PR and between c68df05 and 55e97c0.

📒 Files selected for processing (5)

• src/components/ui/Pagination.stories.tsx
• src/components/ui/index.ts
• src/components/ui/pagination.tsx
• src/components/ui/smart-multi-select.tsx
• src/index.ts