@smicolon/fasla-ui 0.6.0 → 0.8.0

package/registry/blocks/contact-us-support-channels/ContactUsSupportChannels.tsx

@@ -0,0 +1,267 @@
+"use client"
+
+import * as React from "react"
+import { Badge } from "../../ui/badge/badge"
+import { Button, buttonVariants } from "../../ui/button/button"
+import {
+  ContactUsHeader,
+  ContactUsSection,
+  prefersReducedMotion,
+  splitCopy,
+  useReveal,
+  type ContactUsLocale,
+} from "../contact-us/contact-us"
+
+/*
+ * Figma: `Contact Us` (42334:293941), Type=Support Channels.
+ *
+ * A warning-tinted section (`soft-warning-5`), a centred heading in regular
+ * weight, and a 760px column of three cards, 16px apart. The chat card is
+ * framed in `chart-1` (2px) on the same tint: a title and a line, then two
+ * options side by side with a 1px `chart-1` divider between them: "Already a
+ * customer?" with a "Get customer support" button and "Not a customer yet?"
+ * with "Start live chat". Both buttons are the Button atom, Outline Primary,
+ * Rounded, as the instance is drawn. The "FASTEST RESPONSE TIME" Badge (Solid
+ * Primary, md) sits centred on the card's top border. Under it, "Send an
+ * email" and "Leave a voicemail" are `soft-warning` cards with a
+ * `soft-warning-30` stroke: a title, a line and a muted note. The email and
+ * the phone number are links (`mailto:`, `tel:`), set left to right in both
+ * languages.
+ *
+ * Desktop: cards 32px inside, the options side by side, headings 48px and
+ * card titles 30px. Tablet: the heading is 30px. Mobile: cards are 24px
+ * inside, the options stack with a horizontal divider between them, the
+ * heading is 30px and the card titles 24px. In Arabic the options keep their
+ * order in the markup, so the existing-customer option leads at the start
+ * side (the right).
+ *
+ * Real: the links and buttons (`customerSupportHref`, `chatHref`, or
+ * `onStartChat` for a chat widget), `email` and `phone`. There is no form,
+ * so no required field. The cards as a whole are not clickable.
+ *
+ * Motion: the three cards rise 12px and fade, 80ms apart, once, when the
+ * block is in view; the badge then scales from 0.9 to 1 and fades in, once
+ * (a Web Animations transition, 260ms, after the cards). Reduced motion: only
+ * fades.
+ *
+ * Content limits: the heading up to 28 characters, a card title up to 24, an
+ * option's text up to 110, a card's line up to 70.
+ */
+
+export interface ContactUsSupportChannelsCopy {
+  /** The heading, an `h2`. */
+  heading: string
+  /** The chat card's title. */
+  chatTitle: string
+  /** The chat card's line. */
+  chatText: string
+  /** The badge on the chat card's top border. */
+  badge: string
+  /** The first option's title. */
+  customerTitle: string
+  /** The first option's text. */
+  customerText: string
+  /** The first option's button. */
+  customerCta: string
+  /** The second option's title. */
+  prospectTitle: string
+  /** The second option's text. */
+  prospectText: string
+  /** The second option's button. */
+  prospectCta: string
+  /** The email card's title. */
+  emailTitle: string
+  /** The email card's line. */
+  emailText: string
+  /** The words before the address in the email card's note. */
+  emailNote: string
+  /** The voicemail card's title. */
+  voicemailTitle: string
+  /** The words before the number in the voicemail card's line. */
+  voicemailBefore: string
+  /** The words after the number in the voicemail card's line. */
+  voicemailAfter: string
+  /** The voicemail card's note. */
+  voicemailNote: string
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<ContactUsLocale, ContactUsSupportChannelsCopy> = {
+  en: {
+    heading: "We are here to help",
+    chatTitle: "Chat with us",
+    chatText: "The best option for quick questions, plan details, or support.",
+    badge: "FASTEST RESPONSE TIME",
+    customerTitle: "Already a customer?",
+    customerText: "Log in to your account and open Support from the menu for the most personal and secure help.",
+    customerCta: "Get customer support",
+    prospectTitle: "Not a customer yet?",
+    prospectText: "Use our live chat to get quick answers to all your questions. No account needed.",
+    prospectCta: "Start live chat",
+    emailTitle: "Send an email",
+    emailText: "The best option for documents, formal requests, or follow-ups.",
+    emailNote: "General inquiries:",
+    voicemailTitle: "Leave a voicemail",
+    voicemailBefore: "Call us at",
+    voicemailAfter: "if you prefer a callback from our team.",
+    voicemailNote: "Note: for the fastest response, please use chat or email.",
+  },
+  ar: {
+    heading: "نحن هنا لمساعدتك",
+    chatTitle: "تحدّث معنا",
+    chatText: "الخيار الأفضل للأسئلة السريعة أو تفاصيل الخطة أو الدعم.",
+    badge: "أسرع وقت للرد",
+    customerTitle: "هل أنت عميل بالفعل؟",
+    customerText: "سجّل الدخول إلى حسابك وافتح الدعم من القائمة للحصول على مساعدة شخصية وآمنة.",
+    customerCta: "احصل على دعم العملاء",
+    prospectTitle: "لست عميلًا بعد؟",
+    prospectText: "استخدم الدردشة المباشرة للحصول على إجابات سريعة عن كل أسئلتك. لا حاجة إلى حساب.",
+    prospectCta: "ابدأ الدردشة المباشرة",
+    emailTitle: "أرسل بريدًا إلكترونيًا",
+    emailText: "الخيار الأفضل للمستندات والطلبات الرسمية والمتابعات.",
+    emailNote: "الاستفسارات العامة:",
+    voicemailTitle: "اترك رسالة صوتية",
+    voicemailBefore: "اتصل بنا على",
+    voicemailAfter: "إن فضّلت أن يتصل بك فريقنا.",
+    voicemailNote: "ملاحظة: للحصول على أسرع رد، يُرجى استخدام الدردشة أو البريد الإلكتروني.",
+  },
+}
+
+export interface ContactUsSupportChannelsProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<ContactUsSupportChannelsCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: ContactUsLocale
+  /** Where "Get customer support" goes. */
+  customerSupportHref?: string
+  /** Where "Start live chat" goes. Without it, and with `onStartChat`, the button is a button. */
+  chatHref?: string
+  /** Opens a chat widget: makes "Start live chat" a button, when `chatHref` is not given. */
+  onStartChat?: () => void
+  /** The address in the email card's note. */
+  email?: string
+  /** The number in the voicemail card's line, as it is dialled. */
+  phone?: string
+}
+
+const STANDARD = "cubic-bezier(0.2, 0, 0, 1)"
+
+const CARD_TITLE = `text-2xl font-normal leading-8 rtl:leading-10 text-foreground [@container(min-width:40rem)]:text-3xl [@container(min-width:40rem)]:leading-10 [@container(min-width:40rem)]:rtl:leading-[3.125rem]`
+const CARD_TEXT = "text-base leading-6 rtl:leading-7 text-foreground"
+const CARD_NOTE = "text-sm leading-5 rtl:leading-6 text-muted-foreground"
+const OPTION_TITLE = "text-base font-semibold leading-6 rtl:leading-7 text-foreground"
+const LINK = "rounded-sm underline underline-offset-4 hover:text-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
+
+/** The badge scales 0.9 to 1 and fades in once, after the cards have risen. */
+function useBadgePop() {
+  const ref = React.useRef<HTMLSpanElement>(null)
+  React.useEffect(() => {
+    const node = ref.current
+    if (!node || typeof IntersectionObserver === "undefined" || typeof node.animate !== "function") return
+    let animation: Animation | undefined
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (!entries.some((entry) => entry.isIntersecting)) return
+        observer.disconnect()
+        const reduced = prefersReducedMotion()
+        animation = node.animate(reduced ? [{ opacity: 0 }, { opacity: 1 }] : [{ opacity: 0, transform: "scale(0.9)" }, { opacity: 1, transform: "none" }], {
+          duration: reduced ? 120 : 260,
+          delay: reduced ? 0 : 240,
+          easing: STANDARD,
+          fill: "backwards",
+        })
+      },
+      { threshold: 0.2 }
+    )
+    observer.observe(node)
+    return () => {
+      observer.disconnect()
+      animation?.cancel()
+    }
+  }, [])
+  return ref
+}
+
+export function ContactUsSupportChannels({ locale = "en", ...given }: ContactUsSupportChannelsProps) {
+  const { copy, rest } = splitCopy(COPY[locale], given)
+  const { customerSupportHref = "/support", chatHref, onStartChat, email = "hello@fasla.com", phone = "+971 4 512 8800", className, ...html } = rest
+  const headingId = React.useId()
+  const reveal = useReveal<HTMLDivElement>()
+  const badge = useBadgePop()
+  // Figma sets the heading's last word in chart-1.
+  const cut = copy.heading.lastIndexOf(" ") + 1
+  const [head, tail] = [copy.heading.slice(0, cut), copy.heading.slice(cut)]
+
+  return (
+    <ContactUsSection labelledBy={headingId} className={`bg-soft-warning-5 ${className ?? ""}`} {...html}>
+      <ContactUsHeader
+        headingId={headingId}
+        heading={<>{head}<span className="text-chart-1">{tail}</span></>}
+        align="center"
+        headingClassName={`text-3xl font-normal leading-10 rtl:leading-[3.125rem] [@container(min-width:40rem)]:leading-[2.75rem] [@container(min-width:40rem)]:rtl:leading-[3.75rem] [@container(min-width:64rem)]:text-5xl [@container(min-width:64rem)]:leading-[3.625rem] [@container(min-width:64rem)]:rtl:leading-[4.5rem]`}
+      />
+
+      <div ref={reveal} className="mx-auto flex w-full max-w-[47.5rem] flex-col gap-4">
+        <div data-reveal="rise" data-reveal-delay={0} className={`relative flex flex-col gap-4 rounded-[14px] border-2 border-chart-1 bg-soft-warning-5 p-6 [@container(min-width:40rem)]:p-8`}>
+          <span ref={badge} className="absolute start-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rtl:translate-x-1/2">
+            <Badge variant="solid" tone="primary" size="md" radius="standard" className="whitespace-nowrap">
+              {copy.badge}
+            </Badge>
+          </span>
+          <h3 className={CARD_TITLE}>{copy.chatTitle}</h3>
+          <p className={CARD_TEXT}>{copy.chatText}</p>
+          <div className={`flex flex-col gap-8 [@container(min-width:40rem)]:flex-row`}>
+            <div className="flex min-w-0 flex-1 flex-col items-start gap-3">
+              <h4 className={OPTION_TITLE}>{copy.customerTitle}</h4>
+              <p className={CARD_NOTE}>{copy.customerText}</p>
+              <a href={customerSupportHref} className={buttonVariants({ variant: "outline", tone: "primary", size: "md", radius: "rounded" })}>
+                {copy.customerCta}
+              </a>
+            </div>
+            <div aria-hidden className={`h-px w-full shrink-0 bg-chart-1 [@container(min-width:40rem)]:h-auto [@container(min-width:40rem)]:w-px`} />
+            <div className="flex min-w-0 flex-1 flex-col items-start gap-3">
+              <h4 className={OPTION_TITLE}>{copy.prospectTitle}</h4>
+              <p className={CARD_NOTE}>{copy.prospectText}</p>
+              {chatHref === undefined && onStartChat ? (
+                <Button type="button" variant="outline" tone="primary" size="md" radius="rounded" onClick={onStartChat}>
+                  {copy.prospectCta}
+                </Button>
+              ) : (
+                <a href={chatHref ?? "#chat"} className={buttonVariants({ variant: "outline", tone: "primary", size: "md", radius: "rounded" })}>
+                  {copy.prospectCta}
+                </a>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div data-reveal="rise" data-reveal-delay={80} className="flex flex-col gap-3 rounded-[14px] border border-soft-warning-30 bg-soft-warning p-6 [@container(min-width:40rem)]:p-8">
+          <h3 className={CARD_TITLE}>{copy.emailTitle}</h3>
+          <p className={CARD_TEXT}>{copy.emailText}</p>
+          <p className={CARD_NOTE}>
+            {copy.emailNote}{" "}
+            <a href={`mailto:${email}`} className={LINK}>
+              <bdi dir="ltr">{email}</bdi>
+            </a>
+          </p>
+        </div>
+
+        <div data-reveal="rise" data-reveal-delay={160} className="flex flex-col gap-3 rounded-[14px] border border-soft-warning-30 bg-soft-warning p-6 [@container(min-width:40rem)]:p-8">
+          <h3 className={CARD_TITLE}>{copy.voicemailTitle}</h3>
+          <p className={CARD_TEXT}>
+            {copy.voicemailBefore}{" "}
+            <a href={`tel:${phone.replace(/\s+/g, "")}`} className={LINK}>
+              <bdi dir="ltr">{phone}</bdi>
+            </a>{" "}
+            {copy.voicemailAfter}
+          </p>
+          <p className={CARD_NOTE}>{copy.voicemailNote}</p>
+        </div>
+      </div>
+    </ContactUsSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const contactUsSupportChannelsCopy = COPY

package/registry/blocks/contact-us-support-channels/index.ts

@@ -0,0 +1,5 @@
+export {
+  ContactUsSupportChannels,
+  contactUsSupportChannelsCopy,
+  type ContactUsSupportChannelsProps,
+} from "./ContactUsSupportChannels"

package/registry/blocks/contact-us-support-channels.test.tsx

@@ -0,0 +1,81 @@
+import { describe, expect, it, vi } from "vitest"
+import { fireEvent, render, screen } from "@testing-library/react"
+import { ContactUsSupportChannels, contactUsSupportChannelsCopy } from "./contact-us-support-channels"
+
+const strings = (value: unknown): string[] => (typeof value === "string" ? [value] : value && typeof value === "object" ? Object.values(value).flatMap(strings) : [])
+
+describe("Support Channels", () => {
+  it.each(["en", "ar"] as const)("is a labelled section with an h2, in %s", (locale) => {
+    const { container } = render(<ContactUsSupportChannels locale={locale} />)
+    const section = container.querySelector("section")!
+    const label = document.getElementById(section.getAttribute("aria-labelledby")!)
+    expect(label?.tagName).toBe("H2")
+    expect(label?.textContent).toBe(contactUsSupportChannelsCopy[locale].heading)
+  })
+
+  it("has the same copy keys in English and Arabic", () => {
+    expect(Object.keys(contactUsSupportChannelsCopy.ar).sort()).toEqual(Object.keys(contactUsSupportChannelsCopy.en).sort())
+  })
+
+  it("keeps the Arabic copy to the rules", () => {
+    for (const text of strings(contactUsSupportChannelsCopy.ar)) {
+      expect(text).not.toMatch(/·|•/)
+      expect(text).not.toMatch(/[—–]/)
+      expect(text).not.toMatch(/[٠-٩۰-۹]/)
+      expect(text).not.toMatch(/[%٪]/)
+    }
+  })
+
+  it("has no form, no required field and no asterisk", () => {
+    const { container } = render(<ContactUsSupportChannels />)
+    expect(container.querySelector("form")).toBeNull()
+    expect(container.querySelector("[aria-required]")).toBeNull()
+    expect(container.textContent).not.toContain("*")
+  })
+
+  it("shows three cards: chat, email and voicemail, with the badge on the chat card", () => {
+    render(<ContactUsSupportChannels />)
+    expect(screen.getByText("FASTEST RESPONSE TIME").closest("div")?.textContent).toContain("Chat with us")
+    expect(screen.getByRole("heading", { name: "Send an email" })).toBeTruthy()
+    expect(screen.getByRole("heading", { name: "Leave a voicemail" })).toBeTruthy()
+  })
+
+  it("makes the buttons links by default, and the email and phone links", () => {
+    render(<ContactUsSupportChannels customerSupportHref="/help" chatHref="/chat" email="a@b.co" phone="+971 4 000 0000" />)
+    expect(screen.getByRole("link", { name: "Get customer support" }).getAttribute("href")).toBe("/help")
+    expect(screen.getByRole("link", { name: "Start live chat" }).getAttribute("href")).toBe("/chat")
+    expect(screen.getByRole("link", { name: "a@b.co" }).getAttribute("href")).toBe("mailto:a@b.co")
+    const tel = screen.getByRole("link", { name: "+971 4 000 0000" })
+    expect(tel.getAttribute("href")).toBe("tel:+97140000000")
+    expect(tel.querySelector("bdi")?.getAttribute("dir")).toBe("ltr")
+  })
+
+  it("turns live chat into a button for onStartChat", () => {
+    const onStartChat = vi.fn()
+    render(<ContactUsSupportChannels onStartChat={onStartChat} />)
+    fireEvent.click(screen.getByRole("button", { name: "Start live chat" }))
+    expect(onStartChat).toHaveBeenCalledTimes(1)
+  })
+
+  it("uses the Button and Badge atoms with no colour class of ours", () => {
+    const { container } = render(<ContactUsSupportChannels />)
+    const buttons = [...container.querySelectorAll("a")].filter((a) => /customer support|live chat/.test(a.textContent ?? ""))
+    expect(buttons).toHaveLength(2)
+    for (const node of buttons) expect(node.className).not.toMatch(/chart-1/)
+    expect(screen.getByText("FASTEST RESPONSE TIME").closest("span[class*=bg-primary]")!.className).not.toMatch(/chart-1/)
+  })
+
+  it("rises the three cards 80ms apart, and leaves them unclickable as a whole", () => {
+    const { container } = render(<ContactUsSupportChannels />)
+    const cards = [...container.querySelectorAll("[data-reveal=rise]")]
+    expect(cards.map((node) => node.getAttribute("data-reveal-delay"))).toEqual(["0", "80", "160"])
+    for (const card of cards) expect(card.closest("a")).toBeNull()
+  })
+
+  it("keeps the existing-customer option first in the markup, so Arabic leads with it at the start side", () => {
+    render(<ContactUsSupportChannels locale="ar" />)
+    const first = screen.getByText("هل أنت عميل بالفعل؟")
+    const second = screen.getByText("لست عميلًا بعد؟")
+    expect(first.compareDocumentPosition(second) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+  })
+})

package/registry/blocks/data-table/DataTable.test.tsx

@@ -1,39 +1,6 @@
 import { describe, it, expect } from "vitest"
 import { render, screen } from "@testing-library/react"
-import { DataTable, Pagination } from "./DataTable"
-
-describe("Pagination text", () => {
-  it("keeps its English defaults", () => {
-    render(<Pagination page={2} totalPages={5} onPageChange={() => {}} />)
-    expect(screen.getByRole("navigation", { name: "Pagination" })).toBeTruthy()
-    expect(screen.getByText("Page 2 of 5")).toBeTruthy()
-    expect(screen.getByRole("button", { name: "Go to previous page" })).toBeTruthy()
-    expect(screen.getByRole("button", { name: "Go to page 3" })).toBeTruthy()
-  })
-
-  it("uses the text it is given", () => {
-    render(
-      <Pagination
-        page={2}
-        totalPages={5}
-        onPageChange={() => {}}
-        labels={{
-          pagination: "التنقّل بين الصفحات",
-          status: (page, total) => `الصفحة ${page} من ${total}`,
-          previous: "السابق",
-          next: "التالي",
-          goToPrevious: "الانتقال إلى الصفحة السابقة",
-          goToNext: "الانتقال إلى الصفحة التالية",
-          goToPage: (page) => `الانتقال إلى الصفحة ${page}`,
-        }}
-      />
-    )
-    expect(screen.getByRole("navigation", { name: "التنقّل بين الصفحات" })).toBeTruthy()
-    expect(screen.getByText("الصفحة 2 من 5")).toBeTruthy()
-    expect(screen.getByRole("button", { name: "الانتقال إلى الصفحة السابقة" }).textContent).toBe("السابق")
-    expect(screen.getByRole("button", { name: "الانتقال إلى الصفحة 3" })).toBeTruthy()
-  })
-})
+import { DataTable } from "./DataTable"
 
 describe("DataTable column align", () => {
   const cellClass = (align?: "start" | "center" | "end" | "left" | "right") => {

package/registry/blocks/data-table/DataTable.tsx

@@ -188,142 +188,3 @@ export function DataTable<T>({
     </div>
   )
 }
-
-export interface PaginationProps {
-  /** Current page (1-indexed) */
-  page: number
-  /** Total number of pages */
-  totalPages: number
-  /** Called when page changes */
-  onPageChange: (page: number) => void
-  /** Show page numbers */
-  showPageNumbers?: boolean
-  className?: string
-  /** Text and accessible names; each defaults to English */
-  labels?: Partial<PaginationLabels>
-}
-
-export interface PaginationLabels {
-  /** Accessible name of the pagination landmark */
-  pagination: string
-  /** Visible status, given the page and the total */
-  status: (page: number, totalPages: number) => string
-  previous: string
-  next: string
-  goToPrevious: string
-  goToNext: string
-  goToPage: (page: number) => string
-}
-
-/** The entries of a partial object whose values are not undefined. */
-function definedOnly<T extends object>(value: Partial<T> | undefined): Partial<T> {
-  if (!value) return {}
-  return Object.fromEntries(
-    Object.entries(value).filter(([, entry]) => entry !== undefined)
-  ) as Partial<T>
-}
-
-const DEFAULT_PAGINATION_LABELS: PaginationLabels = {
-  pagination: "Pagination",
-  status: (page, totalPages) => `Page ${page} of ${totalPages}`,
-  previous: "Previous",
-  next: "Next",
-  goToPrevious: "Go to previous page",
-  goToNext: "Go to next page",
-  goToPage: (page) => `Go to page ${page}`,
-}
-
-/**
- * Pagination component for data tables.
- */
-export function Pagination({
-  page,
-  totalPages,
-  onPageChange,
-  showPageNumbers = true,
-  className,
-  labels,
-}: PaginationProps) {
-  // A label passed as undefined (a missed translation key, say) keeps its
-  // English default instead of replacing it: a plain spread would leave
-  // status or goToPage undefined, and calling them would crash the render.
-  const text = { ...DEFAULT_PAGINATION_LABELS, ...definedOnly(labels) }
-  const canGoPrevious = page > 1
-  const canGoNext = page < totalPages
-
-  // Generate page numbers to show
-  const getPageNumbers = () => {
-    const pages: (number | "ellipsis")[] = []
-    const showEllipsisAfter = page < totalPages - 2
-    const showEllipsisBefore = page > 3
-
-    if (totalPages <= 7) {
-      return Array.from({ length: totalPages }, (_, i) => i + 1)
-    }
-
-    pages.push(1)
-    if (showEllipsisBefore) pages.push("ellipsis")
-
-    const start = Math.max(2, page - 1)
-    const end = Math.min(totalPages - 1, page + 1)
-
-    for (let i = start; i <= end; i++) {
-      if (!pages.includes(i)) pages.push(i)
-    }
-
-    if (showEllipsisAfter) pages.push("ellipsis")
-    if (!pages.includes(totalPages)) pages.push(totalPages)
-
-    return pages
-  }
-
-  return (
-    <nav
-      className={cn("flex items-center justify-between px-2 py-3", className)}
-      aria-label={text.pagination}
-    >
-      <p className="text-sm text-muted-foreground">{text.status(page, totalPages)}</p>
-      <div className="flex items-center gap-1">
-        <button
-          onClick={() => onPageChange(page - 1)}
-          disabled={!canGoPrevious}
-          className="inline-flex h-8 items-center justify-center rounded-md px-3 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
-          aria-label={text.goToPrevious}
-        >
-          {text.previous}
-        </button>
-        {showPageNumbers &&
-          getPageNumbers().map((pageNum, i) =>
-            pageNum === "ellipsis" ? (
-              <span key={`ellipsis-${i}`} className="px-2 text-muted-foreground">
-                ...
-              </span>
-            ) : (
-              <button
-                key={pageNum}
-                onClick={() => onPageChange(pageNum)}
-                className={cn(
-                  "inline-flex h-8 w-8 items-center justify-center rounded-md text-sm font-medium transition-colors",
-                  pageNum === page
-                    ? "bg-primary text-primary-foreground"
-                    : "hover:bg-accent hover:text-accent-foreground"
-                )}
-                aria-label={text.goToPage(pageNum)}
-                aria-current={pageNum === page ? "page" : undefined}
-              >
-                {pageNum}
-              </button>
-            )
-          )}
-        <button
-          onClick={() => onPageChange(page + 1)}
-          disabled={!canGoNext}
-          className="inline-flex h-8 items-center justify-center rounded-md px-3 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
-          aria-label={text.goToNext}
-        >
-          {text.next}
-        </button>
-      </div>
-    </nav>
-  )
-}

package/registry/blocks/data-table/index.ts

@@ -1,8 +1 @@
-export {
-  DataTable,
-  Pagination,
-  type Column,
-  type DataTableProps,
-  type PaginationProps,
-  type PaginationLabels,
-} from "./DataTable"
+export { DataTable, type Column, type DataTableProps } from "./DataTable"