@smicolon/fasla-ui 0.6.0 → 0.7.0

package/registry/ui/pagination/pagination.test.tsx

@@ -0,0 +1,330 @@
+import * as React from "react"
+import { beforeAll, describe, it, expect, vi } from "vitest"
+import { fireEvent, render, screen, within } from "@testing-library/react"
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+  type PaginationProps,
+} from "./pagination"
+
+/*
+ * The default labels are two runs each, and CSS keeps the one matching the
+ * nearest `lang`. jsdom loads no Tailwind, so inject exactly the compiled
+ * rules the names depend on.
+ */
+beforeAll(() => {
+  const style = document.createElement("style")
+  style.textContent = [
+    ".hidden { display: none }",
+    ".\\[\\&\\:lang\\(ar\\)\\]\\:hidden:lang(ar) { display: none }",
+    ".\\[\\&\\:lang\\(ar\\)\\]\\:inline:lang(ar) { display: inline }",
+  ].join("\n")
+  document.head.append(style)
+})
+
+/** Figma's row — Previous, pages 1 to 4 with 2 current, Next — or the long range 1 … 5 6 7 … 20. */
+function Row({ iconOnly, long, ...props }: PaginationProps & { iconOnly?: boolean; long?: boolean }) {
+  const pages = long ? [1, null, 5, 6, 7, null, 20] : [1, 2, 3, 4]
+  const current = long ? 6 : 2
+  return (
+    <Pagination {...props}>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href="?page=1" iconOnly={iconOnly} />
+        </PaginationItem>
+        {pages.map((page, i) => (
+          <PaginationItem key={i}>
+            {page === null ? (
+              <PaginationEllipsis data-testid="ellipsis" />
+            ) : (
+              <PaginationLink href={`?page=${page}`} isActive={page === current}>
+                {page}
+              </PaginationLink>
+            )}
+          </PaginationItem>
+        ))}
+        <PaginationItem>
+          <PaginationNext href="?page=3" iconOnly={iconOnly} />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
+
+const page = (n: number) => screen.getByRole("link", { name: String(n) })
+const previous = () => screen.getByRole("link", { name: "Previous" })
+const next = () => screen.getByRole("link", { name: "Next" })
+
+describe("Pagination", () => {
+  it("is a navigation landmark named Pagination by default", () => {
+    render(<Row />)
+    const nav = screen.getByRole("navigation", { name: "Pagination" })
+    expect(nav).toHaveAttribute("data-slot", "pagination")
+    expect(nav).toHaveClass("flex", "justify-center")
+  })
+
+  it("takes its accessible name from aria-label", () => {
+    render(<Row aria-label="التنقّل بين الصفحات" />)
+    expect(screen.getByRole("navigation", { name: "التنقّل بين الصفحات" })).toBeTruthy()
+  })
+
+  it("is a list of its items, 4px apart, wrapping rather than overflowing", () => {
+    render(<Row />)
+    const list = screen.getByRole("list")
+    expect(list).toHaveClass("flex", "flex-wrap", "items-center", "gap-1")
+    expect(within(list).getAllByRole("listitem")).toHaveLength(6)
+  })
+
+  it("marks only the current page, with aria-current", () => {
+    render(<Row />)
+    expect(page(2)).toHaveAttribute("aria-current", "page")
+    expect(page(2)).toHaveAttribute("data-active", "true")
+    for (const n of [1, 3, 4]) expect(page(n)).not.toHaveAttribute("aria-current")
+  })
+
+  it("renders links with their href", () => {
+    render(<Row />)
+    expect(page(3)).toHaveAttribute("href", "?page=3")
+    expect(previous()).toHaveAttribute("href", "?page=1")
+  })
+
+  it("defaults to the default variant, square and md", () => {
+    render(<Row />)
+    const nav = screen.getByRole("navigation")
+    expect(nav).toHaveAttribute("data-variant", "default")
+    expect(nav).toHaveAttribute("data-shape", "square")
+    expect(nav).toHaveAttribute("data-size", "md")
+    expect(page(1)).toHaveClass("size-9", "rounded-[var(--radius-md)]")
+    expect(previous()).toHaveClass("h-9")
+  })
+
+  describe("each variant is Figma's choice of Button Type, all in Primary", () => {
+    it.each([
+      // variant, page, current page, Previous / Next
+      ["default", "ghost", "default", "ghost"],
+      ["solid", "soft", "default", "ghost"],
+      ["outlined", "outline", "soft", "outline"],
+    ] as const)("%s", (variant, pages, current, steps) => {
+      render(<Row variant={variant} />)
+      expect(page(1)).toHaveAttribute("data-variant", pages)
+      expect(page(2)).toHaveAttribute("data-variant", current)
+      expect(previous()).toHaveAttribute("data-variant", steps)
+      expect(next()).toHaveAttribute("data-variant", steps)
+      for (const link of [page(1), page(2), previous(), next()]) {
+        expect(link).toHaveAttribute("data-tone", "primary")
+      }
+    })
+
+    it("draws them with Button's own classes", () => {
+      render(<Row variant="outlined" />)
+      expect(page(1)).toHaveClass("ring-1", "ring-inset", "ring-primary", "text-primary")
+      expect(page(2)).toHaveClass("bg-card", "from-soft-primary")
+      render(<Row variant="default" />)
+      expect(screen.getAllByRole("link", { name: "2" })[1]).toHaveClass("bg-primary", "text-primary-foreground")
+    })
+  })
+
+  describe("sizes are Button's, the pages Icon Button's square", () => {
+    it.each([
+      ["xs", "icon-xs", "size-[1.625rem]", "h-[1.625rem]"],
+      ["sm", "icon-sm", "size-8", "h-8"],
+      ["md", "icon-md", "size-9", "h-9"],
+      ["lg", "icon-lg", "size-10", "h-10"],
+    ] as const)("%s", (size, iconSize, box, height) => {
+      render(<Row size={size} long />)
+      expect(page(1)).toHaveAttribute("data-size", iconSize)
+      expect(page(1)).toHaveClass(box)
+      expect(previous()).toHaveAttribute("data-size", size)
+      expect(previous()).toHaveClass(height)
+      for (const ellipsis of screen.getAllByTestId("ellipsis")) expect(ellipsis).toHaveClass(box)
+    })
+
+    it("sets every number at 14px, and lets a wide number widen its box", () => {
+      render(<Row size="xs" />)
+      expect(page(1)).toHaveClass("text-sm", "tabular-nums", "min-w-fit", "px-1")
+    })
+  })
+
+  it("rounded is Button's full radius on every Button in the row", () => {
+    render(<Row shape="rounded" variant="outlined" />)
+    for (const link of [page(1), page(2), previous(), next()]) expect(link).toHaveClass("rounded-full")
+  })
+
+  describe("Previous and Next", () => {
+    it("read Previous and Next, a chevron before and after the label", () => {
+      render(<Row />)
+      expect(previous().textContent).toContain("Previous")
+      expect(previous().firstElementChild?.tagName.toLowerCase()).toBe("svg")
+      expect(next().lastElementChild?.tagName.toLowerCase()).toBe("svg")
+    })
+
+    it("read السابق and التالي under an Arabic lang", () => {
+      render(
+        <div lang="ar" dir="rtl">
+          <Row aria-label="التنقّل بين الصفحات" />
+        </div>
+      )
+      expect(screen.getByRole("link", { name: "السابق" })).toBeTruthy()
+      expect(screen.getByRole("link", { name: "التالي" })).toBeTruthy()
+    })
+
+    it("take their label from text", () => {
+      render(
+        <Pagination>
+          <PaginationPrevious href="#" text="Newer" />
+          <PaginationNext href="#" text="Older" />
+        </Pagination>
+      )
+      expect(screen.getByRole("link", { name: "Newer" })).toBeTruthy()
+      expect(screen.getByRole("link", { name: "Older" })).toBeTruthy()
+    })
+
+    it("flip their chevrons by their own direction, not an ancestor's", () => {
+      render(<Row />)
+      for (const link of [previous(), next()]) {
+        const chevron = link.querySelector("svg")!
+        expect(chevron).toHaveClass("[&:dir(rtl)]:-scale-x-100")
+        expect(chevron).toHaveAttribute("aria-hidden", "true")
+      }
+    })
+
+    it("iconOnly keeps the label for screen readers, in Icon Button's square", () => {
+      render(<Row iconOnly />)
+      expect(previous()).toHaveAttribute("data-size", "icon-md")
+      expect(previous()).toHaveClass("size-9")
+      expect(previous().querySelector(".sr-only")?.textContent).toContain("Previous")
+      expect(next().querySelector(".sr-only")?.textContent).toContain("Next")
+    })
+
+    it("disabled leaves the tab order and ignores clicks", () => {
+      const onClick = vi.fn()
+      render(
+        <Pagination>
+          <PaginationPrevious href="#" disabled onClick={onClick} />
+        </Pagination>
+      )
+      expect(previous()).toHaveAttribute("aria-disabled", "true")
+      expect(previous()).toHaveAttribute("tabindex", "-1")
+      fireEvent.click(previous())
+      expect(onClick).not.toHaveBeenCalled()
+    })
+
+    it("asChild puts the label and chevron in the child element", () => {
+      render(
+        <Pagination>
+          <PaginationNext asChild>
+            <button type="button" />
+          </PaginationNext>
+        </Pagination>
+      )
+      const button = screen.getByRole("button", { name: "Next" })
+      expect(button).toHaveAttribute("data-slot", "pagination-next")
+      expect(button.querySelector("svg")).toBeTruthy()
+    })
+  })
+
+  describe("PaginationLink", () => {
+    it("asChild renders the child element, a button for onClick paging", () => {
+      const onClick = vi.fn()
+      render(
+        <Pagination>
+          <PaginationLink asChild isActive>
+            <button type="button" onClick={onClick}>
+              3
+            </button>
+          </PaginationLink>
+        </Pagination>
+      )
+      const button = screen.getByRole("button", { name: "3" })
+      expect(button).toHaveAttribute("aria-current", "page")
+      expect(button).toHaveAttribute("data-slot", "pagination-link")
+      fireEvent.click(button)
+      expect(onClick).toHaveBeenCalledOnce()
+    })
+
+    it("forwards its ref to the anchor", () => {
+      const ref = React.createRef<HTMLAnchorElement>()
+      render(
+        <Pagination>
+          <PaginationLink ref={ref} href="#">
+            1
+          </PaginationLink>
+        </Pagination>
+      )
+      expect(ref.current?.tagName).toBe("A")
+    })
+
+    it("marks the current page in Windows high contrast, where fills are dropped", () => {
+      render(<Row />)
+      expect(page(2)).toHaveClass(
+        "forced-colors:aria-[current=page]:bg-[color:Highlight]",
+        "forced-colors:aria-[current=page]:text-[color:HighlightText]"
+      )
+    })
+
+    it("warns in development when it has no href and no asChild", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {})
+      render(
+        <Pagination>
+          <PaginationLink>1</PaginationLink>
+          <PaginationLink href="?page=2">2</PaginationLink>
+          <PaginationPrevious disabled />
+        </Pagination>
+      )
+      expect(warn).toHaveBeenCalledTimes(1)
+      expect(warn.mock.calls[0]![0]).toContain("PaginationLink")
+      warn.mockRestore()
+    })
+
+    it("merges className", () => {
+      render(
+        <Pagination>
+          <PaginationLink href="#" className="extra">
+            1
+          </PaginationLink>
+        </Pagination>
+      )
+      expect(page(1)).toHaveClass("extra", "size-9")
+    })
+
+    it("works outside Pagination with the defaults", () => {
+      render(<PaginationLink href="#">1</PaginationLink>)
+      expect(page(1)).toHaveAttribute("data-variant", "ghost")
+      expect(page(1)).toHaveClass("size-9")
+    })
+  })
+
+  describe("PaginationEllipsis", () => {
+    it("is not interactive, its glyph hidden and More pages read", () => {
+      render(<Row long />)
+      const [ellipsis] = screen.getAllByTestId("ellipsis")
+      expect(ellipsis!.tagName).toBe("SPAN")
+      expect(ellipsis).not.toHaveAttribute("tabindex")
+      expect(ellipsis!.querySelector("svg")).toHaveAttribute("aria-hidden", "true")
+      expect(within(ellipsis!).getByText("More pages")).toBeTruthy()
+      expect(ellipsis).toHaveClass("text-primary")
+      // Holds its absolutely placed screen-reader text, which would otherwise
+      // escape a scrolling row and widen the page.
+      expect(ellipsis).toHaveClass("relative")
+      expect(ellipsis!.querySelector("svg")).toHaveClass("size-4")
+    })
+
+    it("reads مزيد من الصفحات under an Arabic lang", () => {
+      render(
+        <div lang="ar">
+          <Pagination>
+            <PaginationEllipsis data-testid="ellipsis" />
+          </Pagination>
+        </div>
+      )
+      const runs = Array.from(screen.getByTestId("ellipsis").querySelectorAll<HTMLElement>(".sr-only span"))
+      const spoken = runs.filter((run) => getComputedStyle(run).display !== "none").map((run) => run.textContent)
+      expect(spoken).toEqual(["مزيد من الصفحات"])
+    })
+  })
+})

package/registry/ui/pagination/pagination.tsx

@@ -0,0 +1,336 @@
+"use client"
+
+import * as React from "react"
+import { ChevronLeftIcon, ChevronRightIcon, EllipsisIcon } from "lucide-react"
+import { Button, type ButtonProps } from "../button/button"
+import { cn } from "../../../src/lib/utils"
+
+/*
+ * Figma: `Pagination` (400:6808), 48 variants: Direction × size ×
+ * Variants × Shape, plus the `Next - Pre button` and `Next - Pre icon button`
+ * booleans; and `Pagination Ellipsis` (46207:243282), one per size.
+ *
+ * Composable, with shadcn's part names. Figma axis → code:
+ *  - `Variants` Default / Solid / Outlined → `variant` on `Pagination`.
+ *  - `Shape` Square / Rounded → `shape`: Button's `standard` and `rounded` radius.
+ *  - `size` xs / sm / md / lg → `size`. Figma's default is xs, the smallest;
+ *    the code's is md, as on Button and Input.
+ *  - `Next - Pre button` → `PaginationPrevious` and `PaginationNext`, a label
+ *    and a chevron. `Next - Pre icon button` → the same parts with `iconOnly`.
+ *  - `Direction` → the page's `dir`, never a prop. The row is in DOM order,
+ *    so `dir="rtl"` mirrors it, and each chevron flips to point outward. The
+ *    flip reads the chevron's own direction (`:dir(rtl)`), not Tailwind's
+ *    `rtl:`, which matches any `dir="rtl"` ancestor.
+ *
+ * Every link, Previous and Next is Fasla's Button, so the colours, states,
+ * focus ring and radius are the Button's own; nothing is restyled here. Each
+ * `variant` is Figma's choice of Button Type, all in the Primary style:
+ *
+ *   variant    pages     current page   Previous / Next
+ *   default    Ghost     Solid          Ghost
+ *   solid      Soft      Solid          Ghost
+ *   outlined   Outline   Soft           Outline
+ *
+ * Page links are Icon Buttons with a number in place of the icon: Figma's
+ * `Tailwind En/SM/Medium`, 14px at every size. Every gap is `spacing/1`, 4px.
+ */
+
+type PaginationVariant = "default" | "solid" | "outlined"
+type PaginationShape = "square" | "rounded"
+type PaginationSize = "xs" | "sm" | "md" | "lg"
+
+type Look = { variant: NonNullable<ButtonProps["variant"]>; tone: NonNullable<ButtonProps["tone"]> }
+const GHOST: Look = { variant: "ghost", tone: "primary" }
+const SOLID: Look = { variant: "default", tone: "primary" }
+const SOFT: Look = { variant: "soft", tone: "primary" }
+const OUTLINE: Look = { variant: "outline", tone: "primary" }
+
+const LOOKS: Record<PaginationVariant, { page: Look; current: Look; step: Look }> = {
+  default: { page: GHOST, current: SOLID, step: GHOST },
+  solid: { page: SOFT, current: SOLID, step: GHOST },
+  outlined: { page: OUTLINE, current: SOFT, step: OUTLINE },
+}
+
+const RADIUS = { square: "standard", rounded: "rounded" } as const
+
+/**
+ * Windows high contrast drops every fill, so the current page would look like
+ * the others. It takes the system's selection colours instead, as a selected
+ * item does in a native list.
+ */
+const CURRENT_IN_FORCED_COLORS = [
+  "forced-colors:aria-[current=page]:[forced-color-adjust:none]",
+  "forced-colors:aria-[current=page]:bg-none",
+  "forced-colors:aria-[current=page]:bg-[color:Highlight]",
+  "forced-colors:aria-[current=page]:text-[color:HighlightText]",
+].join(" ")
+
+/** Icon Button's square at each size: 26, 32, 36 and 40px. */
+const BOX: Record<PaginationSize, string> = {
+  xs: "size-[1.625rem]",
+  sm: "size-8",
+  md: "size-9",
+  lg: "size-10",
+}
+
+type PaginationContextValue = { variant: PaginationVariant; shape: PaginationShape; size: PaginationSize }
+
+const PaginationContext = React.createContext<PaginationContextValue>({
+  variant: "default",
+  shape: "square",
+  size: "md",
+})
+
+export interface PaginationProps extends React.ComponentPropsWithoutRef<"nav"> {
+  /**
+   * Figma `Variants`. `default`: Ghost pages and a Solid current page.
+   * `solid`: Soft pages and a Solid current page. `outlined`: Outline pages
+   * and a Soft current page, with Outline Previous and Next.
+   */
+  variant?: PaginationVariant
+  /** Figma `Shape`: `square` is Button's standard radius, `rounded` its full radius. */
+  shape?: PaginationShape
+  /** Figma `size`: the Button size of every part, 26, 32, 36 or 40px tall. */
+  size?: PaginationSize
+}
+
+/**
+ * The navigation landmark, and the look every part inside it takes. Name it
+ * in the page's language with `aria-label`.
+ */
+const Pagination = React.forwardRef<HTMLElement, PaginationProps>(
+  ({ variant = "default", shape = "square", size = "md", "aria-label": ariaLabel = "Pagination", className, ...props }, ref) => {
+    const look = React.useMemo(() => ({ variant, shape, size }), [variant, shape, size])
+    return (
+      <PaginationContext.Provider value={look}>
+        <nav
+          ref={ref}
+          aria-label={ariaLabel}
+          data-slot="pagination"
+          data-variant={variant}
+          data-shape={shape}
+          data-size={size}
+          className={cn("mx-auto flex w-full justify-center", className)}
+          {...props}
+        />
+      </PaginationContext.Provider>
+    )
+  }
+)
+Pagination.displayName = "Pagination"
+
+/**
+ * The row of items, a list. It wraps onto a second row when it runs out of
+ * room, rather than overflowing its container.
+ */
+const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentPropsWithoutRef<"ul">>(
+  ({ className, ...props }, ref) => (
+    <ul
+      ref={ref}
+      data-slot="pagination-content"
+      className={cn("flex flex-row flex-wrap items-center justify-center gap-1", className)}
+      {...props}
+    />
+  )
+)
+PaginationContent.displayName = "PaginationContent"
+
+/** One entry of the row: a page link, Previous, Next or the ellipsis. */
+const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(
+  ({ className, ...props }, ref) => (
+    <li ref={ref} data-slot="pagination-item" className={cn("inline-flex", className)} {...props} />
+  )
+)
+PaginationItem.displayName = "PaginationItem"
+
+interface PaginationAnchorProps extends React.ComponentPropsWithoutRef<"a"> {
+  /**
+   * Render the child element — a router's `Link`, or a `<button>` for
+   * pagination driven by `onClick` — with these styles and props merged onto it.
+   */
+  asChild?: boolean
+  /**
+   * Dims the item and takes it out of use: it is marked `aria-disabled`,
+   * leaves the tab order, and ignores clicks.
+   */
+  disabled?: boolean
+}
+
+export interface PaginationLinkProps extends PaginationAnchorProps {
+  /** The page the reader is on. Marks it `aria-current="page"` and draws it in the current-page look. */
+  isActive?: boolean
+}
+
+/**
+ * Warns, in development only, when a link has nowhere to go: an `<a>` with no
+ * `href` is not a link, so the keyboard skips it and screen readers do not
+ * announce it as one. Checked once, after the first paint, as Button checks
+ * an icon button's name.
+ */
+function useHrefCheck(part: string, { href, asChild, disabled }: PaginationAnchorProps) {
+  React.useEffect(() => {
+    if (process.env.NODE_ENV === "production" || asChild || disabled || href !== undefined) return
+    console.warn(
+      `[fasla-ui] ${part}: give it an href, or use asChild with a <button> (or a router's Link) when paging changes state.`
+    )
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+}
+
+/**
+ * A link to one page. Its text is the page number: write Western digits
+ * (1, 2, 3) on Arabic pages too.
+ */
+const PaginationLink = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>(
+  ({ isActive = false, asChild = false, disabled, className, children, ...props }, ref) => {
+    const { variant, shape, size } = React.useContext(PaginationContext)
+    const look = LOOKS[variant][isActive ? "current" : "page"]
+    useHrefCheck("PaginationLink", { href: props.href, asChild, disabled })
+    return (
+      <Button
+        asChild
+        variant={look.variant}
+        tone={look.tone}
+        size={`icon-${size}`}
+        radius={RADIUS[shape]}
+        disabled={disabled}
+        // Button types its props for a <button>; these land on the anchor or
+        // the slotted child, which takes them.
+        {...(props as ButtonProps)}
+        ref={ref as React.Ref<HTMLButtonElement>}
+        data-slot="pagination-link"
+        data-active={isActive || undefined}
+        aria-current={isActive ? "page" : undefined}
+        // The number is 14px at every size, as in Figma. The box is Icon
+        // Button's square; a number too wide for it (100 at xs) widens it by
+        // its own width plus 4px a side, instead of touching the edges.
+        className={cn("min-w-fit px-1 text-sm tabular-nums", CURRENT_IN_FORCED_COLORS, className)}
+      >
+        {asChild ? children : <a>{children}</a>}
+      </Button>
+    )
+  }
+)
+PaginationLink.displayName = "PaginationLink"
+
+/**
+ * Text that follows the language of the page: English, or Arabic under an
+ * Arabic `lang`. Both runs are rendered and CSS keeps the one that matches the
+ * nearest `lang`, as Breadcrumb's ellipsis label does: right in the server
+ * HTML before any script runs, and it follows a live language change. The
+ * hidden run is `display: none`, so it is neither seen nor read.
+ */
+const Localised = ({ en, ar }: { en: string; ar: string }) => (
+  <>
+    <span className="[&:lang(ar)]:hidden">{en}</span>
+    <span className="hidden [&:lang(ar)]:inline">{ar}</span>
+  </>
+)
+
+export interface PaginationStepProps extends PaginationAnchorProps {
+  /**
+   * The label. Defaults to the page's language: "Previous" / "Next", or
+   * "السابق" / "التالي" under an Arabic `lang`.
+   */
+  text?: React.ReactNode
+  /**
+   * Figma `Next - Pre icon button`: the chevron alone, in Icon Button's
+   * square. The label is kept for screen readers.
+   */
+  iconOnly?: boolean
+}
+
+/** Previous and Next: the same Button, its label and chevron in reading order. */
+function useStep(
+  step: "previous" | "next",
+  { text, iconOnly = false, asChild = false, disabled, className, children, ...props }: PaginationStepProps,
+  ref: React.ForwardedRef<HTMLAnchorElement>
+) {
+  const { variant, shape, size } = React.useContext(PaginationContext)
+  const look = LOOKS[variant].step
+  useHrefCheck(step === "previous" ? "PaginationPrevious" : "PaginationNext", { href: props.href, asChild, disabled })
+  // lucide's left chevron for Previous, flipped in RTL so each points outward,
+  // the way the row reads.
+  const Chevron = step === "previous" ? ChevronLeftIcon : ChevronRightIcon
+  const chevron = <Chevron aria-hidden="true" strokeWidth={1.5} className="[&:dir(rtl)]:-scale-x-100" />
+  const label =
+    text ?? (step === "previous" ? <Localised en="Previous" ar="السابق" /> : <Localised en="Next" ar="التالي" />)
+  const content = (
+    <>
+      {step === "previous" && chevron}
+      {iconOnly ? <span className="sr-only">{label}</span> : label}
+      {step === "next" && chevron}
+    </>
+  )
+  return (
+    <Button
+      asChild
+      variant={look.variant}
+      tone={look.tone}
+      size={iconOnly ? `icon-${size}` : size}
+      radius={RADIUS[shape]}
+      disabled={disabled}
+      {...(props as ButtonProps)}
+      ref={ref as React.Ref<HTMLButtonElement>}
+      data-slot={`pagination-${step}`}
+      className={className}
+    >
+      {/* With asChild, the child supplies the element and this the content. */}
+      {asChild && React.isValidElement<{ children?: React.ReactNode }>(children) ? (
+        React.cloneElement(children, undefined, content)
+      ) : (
+        <a>{content}</a>
+      )}
+    </Button>
+  )
+}
+
+/** A link to the page before this one. */
+const PaginationPrevious = React.forwardRef<HTMLAnchorElement, PaginationStepProps>((props, ref) =>
+  useStep("previous", props, ref)
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+/** A link to the page after this one. */
+const PaginationNext = React.forwardRef<HTMLAnchorElement, PaginationStepProps>((props, ref) =>
+  useStep("next", props, ref)
+)
+PaginationNext.displayName = "PaginationNext"
+
+/**
+ * Where pages are left out. Not interactive: Icon Button's square at each
+ * size, with the 16px glyph in `primary`. The glyph is hidden; screen readers
+ * hear "More pages", or "مزيد من الصفحات" under an Arabic `lang`.
+ */
+const PaginationEllipsis = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(
+  ({ className, ...props }, ref) => {
+    const { size } = React.useContext(PaginationContext)
+    return (
+      <span
+        ref={ref}
+        data-slot="pagination-ellipsis"
+        // `relative` keeps the absolutely placed screen-reader text inside the
+        // ellipsis: without it, in a row that scrolls, the text escapes and
+        // widens the page.
+        className={cn("relative inline-flex shrink-0 items-center justify-center text-primary", BOX[size], className)}
+        {...props}
+      >
+        <EllipsisIcon aria-hidden="true" strokeWidth={1.5} className="size-4" />
+        <span className="sr-only">
+          <Localised en="More pages" ar="مزيد من الصفحات" />
+        </span>
+      </span>
+    )
+  }
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}

package/registry/ui/progress/index.ts

@@ -0,0 +1,8 @@
+export {
+  Progress,
+  progressVariants,
+  progressTrackVariants,
+  progressPercentageVariants,
+  type ProgressProps,
+  type ProgressSize,
+} from "./progress"