@xenide-io/the-old-ui-theme 0.4.4 → 0.4.8

package/src/components/sections/SwapShowcase.tsx

@@ -1,99 +0,0 @@
-"use client";
-
-import { IconBell, IconBellOff, IconMoon, IconSun, IconVolume, IconVolumeOff } from "@/components/icons";
-import { cn } from "@/lib/cn";
-import { ShowcaseWrapper } from "@/components/ui";
-
-function IconSwapToggle({
-  offIcon: OffIcon,
-  onIcon: OnIcon,
-  offClassName,
-  onClassName,
-  label,
-}: {
-  offIcon: typeof IconBellOff;
-  onIcon: typeof IconBell;
-  offClassName?: string;
-  onClassName?: string;
-  label: string;
-}) {
-  return (
-    <label className="group relative inline-flex h-14 w-14 cursor-pointer items-center justify-center rounded-full bg-ph-surface shadow-ph focus-within:ring-2 focus-within:ring-ph-focus focus-within:ring-offset-2">
-      <input type="checkbox" className="sr-only" aria-label={label} />
-      <span className="ph-icon-swap h-7 w-7" aria-hidden>
-        <OffIcon
-          className={cn(
-            "opacity-100 transition group-has-[:checked]:pointer-events-none group-has-[:checked]:opacity-0",
-            offClassName,
-          )}
-        />
-        <OnIcon
-          className={cn(
-            "opacity-0 transition group-has-[:checked]:opacity-100",
-            onClassName,
-          )}
-        />
-      </span>
-    </label>
-  );
-}
-
-export default function SwapShowcase() {
-  const code = `import { IconBell, IconBellOff, IconMoon, IconSun, IconVolume, IconVolumeOff } from "@xenide-io/the-old-ui-theme";
-
-<div className="flex flex-wrap gap-10 rounded-xl border border-ph-border bg-ph-muted p-8">
-  <IconSwapToggle
-    label="Mute audio"
-    offIcon={IconVolume}
-    onIcon={IconVolumeOff}
-    offClassName="text-ph-brand"
-    onClassName="text-ph-mutedtext"
-  />
-
-  <IconSwapToggle
-    label="Mute notifications"
-    offIcon={IconBell}
-    onIcon={IconBellOff}
-    offClassName="rotate-[-8deg] text-ph-mutedtext"
-    onClassName="text-ph-mutedtext"
-  />
-
-  <IconSwapToggle
-    label="Use light appearance"
-    offIcon={IconMoon}
-    onIcon={IconSun}
-    offClassName="text-ph-mutedtext"
-    onClassName="text-ph-warning"
-  />
-</div>`;
-
-  return (
-    <ShowcaseWrapper title="Icon swap" code={code} filename="SwapExample.tsx">
-      <div className="flex flex-wrap gap-10 rounded-xl border border-ph-border bg-ph-muted p-8">
-        <IconSwapToggle
-          label="Mute audio"
-          offIcon={IconVolume}
-          onIcon={IconVolumeOff}
-          offClassName="text-ph-brand"
-          onClassName="text-ph-mutedtext"
-        />
-
-        <IconSwapToggle
-          label="Mute notifications"
-          offIcon={IconBell}
-          onIcon={IconBellOff}
-          offClassName="rotate-[-8deg] text-ph-mutedtext"
-          onClassName="text-ph-mutedtext"
-        />
-
-        <IconSwapToggle
-          label="Use light appearance"
-          offIcon={IconMoon}
-          onIcon={IconSun}
-          offClassName="text-ph-mutedtext"
-          onClassName="text-ph-warning"
-        />
-      </div>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/TabShowcase.tsx

@@ -1,84 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { ComponentDocs, ShowcaseWrapper, Tabs } from "@/components/ui";
-
-const pillItems = [
-  { value: "overview", label: "Overview" },
-  { value: "activity", label: "Activity" },
-  { value: "settings", label: "Settings" },
-];
-
-const insightItems = [
-  { value: "funnels", label: "Funnels" },
-  { value: "trends", label: "Trends" },
-  { value: "retention", label: "Retention" },
-];
-
-const insightCopy: Record<string, string> = {
-  funnels: "Step-through conversion diagnostics for each stage of your onboarding.",
-  trends: "Arithmetic, formulas, breakdowns — the default insight landing state.",
-  retention: "Cohort resurfacing curves with optional granularity controls.",
-};
-
-export default function TabShowcase() {
-  const [pill, setPill] = useState("overview");
-  const [insight, setInsight] = useState("funnels");
-
-  const code = `import { Tabs } from "the-old-ui";
-
-<div className="grid gap-8 lg:grid-cols-2">
-  <div className="ph-panel">
-    <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Floating pill track</h3>
-    <Tabs items={pillItems} value={pill} onChange={setPill} />
-    <p className="mt-6 text-sm text-ph-subtle">
-      Mirrors the softly inset control groups from the product chrome — muted rail + white thumb.
-    </p>
-  </div>
-
-  <div className="ph-panel space-y-4">
-    <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Underline tabs</h3>
-    <Tabs items={insightItems} value={insight} onChange={setInsight} variant="underline" />
-    <div className="rounded-lg border border-ph-border bg-ph-surface p-5 shadow-ph">
-      <p className="text-sm leading-relaxed text-ph-subtle">{insightCopy[insight]}</p>
-    </div>
-  </div>
-</div>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Tabs"
-      description="Controlled tab primitive with pill and underline variants."
-      code={code}
-      filename="TabsExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "items", type: "{ value; label }[]", description: "Tab labels and values." },
-            { name: "value", type: "string", description: "Current tab value." },
-            { name: "onChange", type: "(value: string) => void", description: "Called when a tab is selected." },
-            { name: "variant", type: "pill | underline", defaultValue: "pill", description: "Visual tab style." },
-          ]}
-        />
-      }
-    >
-      <div className="grid gap-8 lg:grid-cols-2">
-        <div className="ph-panel">
-          <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Floating pill track</h3>
-          <Tabs items={pillItems} value={pill} onChange={setPill} />
-          <p className="mt-6 text-sm text-ph-subtle">
-            Mirrors the softly inset control groups from the product chrome — muted rail + white thumb.
-          </p>
-        </div>
-
-        <div className="ph-panel space-y-4">
-          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Underline tabs</h3>
-          <Tabs items={insightItems} value={insight} onChange={setInsight} variant="underline" />
-          <div className="rounded-lg border border-ph-border bg-ph-surface p-5 shadow-ph">
-            <p className="text-sm leading-relaxed text-ph-subtle">{insightCopy[insight]}</p>
-          </div>
-        </div>
-      </div>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/TableShowcase.tsx

@@ -1,142 +0,0 @@
-"use client";
-
-import type { CSSProperties } from "react";
-import { Badge, ComponentDocs, ShowcaseWrapper, Table, type TableColumn } from "@/components/ui";
-
-const data = [
-  { id: 1, name: "Alice Johnson", role: "Developer", status: "Active", plan: "Pro" },
-  { id: 2, name: "Bob Smith", role: "Designer", status: "Offline", plan: "Basic" },
-  { id: 3, name: "Charlie Brown", role: "Manager", status: "Active", plan: "Enterprise" },
-  { id: 4, name: "Diana Prince", role: "Developer", status: "Busy", plan: "Pro" },
-  { id: 5, name: "Eve Davis", role: "QA", status: "Active", plan: "Basic" },
-];
-
-const ribbonByPlan: Record<string, string> = {
-  Pro: "var(--ph-data-1)",
-  Basic: "var(--ph-data-4)",
-  Enterprise: "var(--ph-data-6)",
-};
-
-type UserRow = (typeof data)[number];
-
-const statusVariant: Record<string, "success" | "neutral" | "warning"> = {
-  Active: "success",
-  Offline: "neutral",
-  Busy: "warning",
-};
-
-const columns: TableColumn<UserRow>[] = [
-  { key: "id", header: "#", cell: (row) => <span className="tabular-nums text-ph-mutedtext">{row.id}</span>, className: "w-12 text-center" },
-  { key: "name", header: "Name", cell: (row) => <span className="font-medium text-ph-ink">{row.name}</span> },
-  { key: "role", header: "Role", cell: (row) => row.role },
-  { key: "status", header: "Status", cell: (row) => <Badge variant={statusVariant[row.status] ?? "outline"}>{row.status}</Badge> },
-  { key: "plan", header: "Plan", cell: (row) => <span className="text-ph-subtle">{row.plan}</span> },
-];
-
-const keyValueData = [
-  { key: "distinct_id", value: "019b2eef-..." },
-  { key: "capture_api_version", value: "2024-06-06" },
-];
-
-const keyValueColumns: TableColumn<(typeof keyValueData)[number]>[] = [
-  { key: "key", header: "Key", cell: (row) => <span className="font-mono text-xs">{row.key}</span> },
-  { key: "value", header: "Value", cell: (row) => <span className="font-mono text-xs">{row.value}</span> },
-];
-
-export default function TableShowcase() {
-  const code = `import { Badge, Table, type TableColumn } from "the-old-ui";
-
-<div className="space-y-8">
-  <div>
-    <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Dashboard table</h3>
-    <p className="mb-4 max-w-2xl text-sm text-ph-subtle">
-      White canvas, tinted header strip, zebra optional — avoids DaisyUI&apos;s chunky row chrome.
-    </p>
-    <Table data={data} columns={columns} caption="Dashboard users" />
-  </div>
-
-  <div>
-    <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Ribbon column</h3>
-    <p className="mb-4 max-w-2xl text-sm text-ph-subtle">
-      Per-row accents via inherited <code className="ph-kbd">--row-ribbon</code> mimic Lemon insight list markers (
-      <code className="ph-kbd">.ph-table--ribbon</code>).
-    </p>
-    <Table
-      data={data}
-      columns={columns}
-      ribbon
-      getRowStyle={(row) => ({
-        "--row-ribbon": ribbonByPlan[row.plan] ?? "var(--ph-data-5)",
-      } as CSSProperties)}
-    />
-  </div>
-
-  <div>
-    <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Zebra rows</h3>
-    <Table data={data} columns={columns.slice(0, 4)} zebra />
-  </div>
-
-  <div>
-    <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Compact density</h3>
-    <Table data={keyValueData} columns={keyValueColumns} compact className="max-w-xl" />
-  </div>
-</div>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Tables"
-      description="Data table wrapper with typed columns, zebra rows, compact density, and component-based cell rendering."
-      code={code}
-      filename="TableExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "data", type: "T[]", description: "Rows passed to each column cell renderer." },
-            { name: "columns", type: "TableColumn<T>[]", description: "Column definitions with header and cell render function." },
-            { name: "zebra", type: "boolean", defaultValue: "false", description: "Adds alternating row backgrounds." },
-            { name: "compact", type: "boolean", defaultValue: "false", description: "Reduces density for admin tables." },
-            { name: "ribbon", type: "boolean", defaultValue: "false", description: "Adds per-row accent ribbon support." },
-            { name: "getRowStyle", type: "(row: T) => CSSProperties", description: "Optional row-level CSS variables or inline style." },
-            { name: "caption", type: "string", description: "Accessible table caption rendered visually hidden." },
-          ]}
-        />
-      }
-    >
-      <div className="space-y-8">
-        <div>
-          <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Dashboard table</h3>
-          <p className="mb-4 max-w-2xl text-sm text-ph-subtle">
-            White canvas, tinted header strip, zebra optional — avoids DaisyUI&apos;s chunky row chrome.
-          </p>
-          <Table data={data} columns={columns} caption="Dashboard users" />
-        </div>
-
-        <div>
-          <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Ribbon column</h3>
-          <p className="mb-4 max-w-2xl text-sm text-ph-subtle">
-            Per-row accents via inherited <code className="ph-kbd">--row-ribbon</code> mimic Lemon insight list markers (
-            <code className="ph-kbd">.ph-table--ribbon</code>).
-          </p>
-          <Table
-            data={data}
-            columns={columns}
-            ribbon
-            getRowStyle={(row) => ({
-              "--row-ribbon": ribbonByPlan[row.plan] ?? "var(--ph-data-5)",
-            } as CSSProperties)}
-          />
-        </div>
-
-        <div>
-          <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Zebra rows</h3>
-          <Table data={data} columns={columns.slice(0, 4)} zebra />
-        </div>
-
-        <div>
-          <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Compact density</h3>
-          <Table data={keyValueData} columns={keyValueColumns} compact className="max-w-xl" />
-        </div>
-      </div>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/TimelineShowcase.tsx

@@ -1,83 +0,0 @@
-import { IconAreaChart, IconBolt, IconGift, IconRocket } from "@/components/icons";
-import { ComponentDocs, ShowcaseWrapper, Timeline } from "@/components/ui";
-
-const events = [
-  {
-    id: "1",
-    icon: <IconRocket className="h-6 w-6" />,
-    color: "bg-ph-brand text-white",
-    title: "Project scaffolded",
-    desc: "Next.js ingestion keys issued for prod + staging.",
-    time: "2h ago",
-  },
-  {
-    id: "2",
-    icon: <IconBolt className="h-6 w-6" />,
-    color: "bg-ph-purple text-white",
-    title: "$pageview spikes",
-    desc: "CDN edge experiment rolled to 42% cohort.",
-    time: "1h ago",
-  },
-  {
-    id: "3",
-    icon: <IconAreaChart className="h-6 w-6" />,
-    color: "bg-ph-blue text-white",
-    title: "Dashboard shared",
-    desc: "Growth pack pinned to Slack #metrics.",
-    time: "45m ago",
-  },
-  {
-    id: "4",
-    icon: <IconGift className="h-6 w-6" />,
-    color: "bg-emerald-600 text-white",
-    title: "Feature flag LIVE",
-    desc: "pricing-test-v3 now default for EU traffic.",
-    time: "Just now",
-  },
-];
-
-export default function TimelineShowcase() {
-  const code = `import { Timeline } from "the-old-ui";
-
-<Timeline
-  events={[
-    {
-      id: "1",
-      title: "Project scaffolded",
-      description: "Keys issued for prod + staging.",
-      time: "2h ago",
-      icon: <IconRocket />,
-      color: "bg-ph-brand text-white",
-    },
-  ]}
-  alternate
-/>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Timeline"
-      description="Event timeline with icons, descriptions, and alternating layout."
-      code={code}
-      filename="TimelineExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "events", type: "TimelineEvent[]", description: "Timeline events to render." },
-            { name: "alternate", type: "boolean", defaultValue: "false", description: "Alternate left/right on large screens." },
-            { name: "event.id", type: "string", description: "Unique key." },
-            { name: "event.title", type: "string", description: "Event title." },
-            { name: "event.description", type: "string", description: "Event description." },
-            { name: "event.time", type: "string", description: "Timestamp." },
-            { name: "event.icon", type: "ReactNode", description: "Icon element." },
-            { name: "event.color", type: "string", description: "Tailwind colour classes." },
-          ]}
-        />
-      }
-    >
-      <div className="relative ph-panel overflow-hidden">
-        <div className="absolute bottom-8 left-[3.125rem] top-8 w-px bg-ph-border lg:left-[3.5rem]" aria-hidden />
-        <Timeline events={events} alternate />
-      </div>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/ToastShowcase.tsx

@@ -1,108 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import {
-  ComponentDocs,
-  Button,
-  ShowcaseWrapper,
-  Toast,
-  ToastStack,
-} from "@/components/ui";
-
-const toasts = [
-  {
-    id: 1,
-    status: "info" as const,
-    title: "New deploy",
-    text: "Warehouse sync node rotated without downtime.",
-  },
-  {
-    id: 2,
-    status: "success" as const,
-    title: "Exports healthy",
-    text: "Snowflake incremental finished in 41s.",
-  },
-  {
-    id: 3,
-    status: "warning" as const,
-    title: "Approaching quota",
-    text: "Session replay capture at 92% monthly allocation.",
-  },
-  {
-    id: 4,
-    status: "danger" as const,
-    title: "Batch failed",
-    text: "Stripe connector returned HTTP 524 — backing off.",
-  },
-];
-
-export default function ToastShowcase() {
-  const [visible, setVisible] = useState<number[]>(toasts.map((t) => t.id));
-
-  const code = `import { Button, Toast, ToastStack } from "the-old-ui";
-
-<div className="ph-panel">
-  <div className="mb-4 flex items-center justify-between">
-    <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Snack stack demo</h3>
-    <Button variant="ghost" size="sm" onClick={() => setVisible(toasts.map((t) => t.id))}>
-      Restore all
-    </Button>
-  </div>
-  <ToastStack className="max-w-xl">
-    {toasts.map((toast) => {
-      if (!visible.includes(toast.id)) return null;
-      return (
-        <Toast
-          key={toast.id}
-          status={toast.status}
-          title={toast.title}
-          description={toast.text}
-          onDismiss={() => setVisible((v) => v.filter((x) => x !== toast.id))}
-        />
-      );
-    })}
-  </ToastStack>
-</div>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Toasts"
-      description="Snack stack notifications with semantic colour variants and dismiss actions."
-      code={code}
-      filename="ToastExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "status", type: "info | success | warning | danger", defaultValue: "info", description: "Controls icon and colour treatment." },
-            { name: "title", type: "string", description: "Required toast heading." },
-            { name: "description", type: "string", description: "Optional supporting copy." },
-            { name: "onDismiss", type: "() => void", description: "Shows a close button when provided." },
-          ]}
-        />
-      }
-    >
-      <div className="ph-panel">
-        <div className="mb-4 flex items-center justify-between">
-          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Snack stack demo</h3>
-          <Button variant="ghost" size="sm" onClick={() => setVisible(toasts.map((t) => t.id))}>
-            Restore all
-          </Button>
-        </div>
-        <ToastStack className="max-w-xl">
-          {toasts.map((toast) => {
-            if (!visible.includes(toast.id)) return null;
-            return (
-              <Toast
-                key={toast.id}
-                status={toast.status}
-                title={toast.title}
-                description={toast.text}
-                onDismiss={() => setVisible((v) => v.filter((x) => x !== toast.id))}
-              />
-            );
-          })}
-        </ToastStack>
-      </div>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/TooltipShowcase.tsx

@@ -1,38 +0,0 @@
-import { Button, ShowcaseWrapper, Tooltip, TooltipProvider } from "@/components/ui";
-
-export default function TooltipShowcase() {
-  const code = `import { Button, Tooltip, TooltipProvider } from "the-old-ui";
-
-<TooltipProvider delayDuration={300}>
-  <div className="ph-panel flex flex-wrap items-center gap-10">
-    <Tooltip content="Run a HogQL query (Command + /)" side="top">
-      <Button variant="secondary">Hover me</Button>
-    </Tooltip>
-
-    <Tooltip content="Available on hover and keyboard focus" side="bottom">
-      <button type="button" className="ph-tip cursor-help">Dashed chrome</button>
-    </Tooltip>
-  </div>
-</TooltipProvider>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Tooltips"
-      description="Accessible supporting text on an adaptive inverse surface. Tooltips open on hover or focus, avoid viewport collisions, and dismiss with Escape."
-      code={code}
-      filename="TooltipExample.tsx"
-    >
-      <TooltipProvider delayDuration={300}>
-        <div className="ph-panel flex flex-wrap items-center gap-10">
-          <Tooltip content="Run a HogQL query (Command + /)" side="top">
-            <Button variant="secondary">Hover me</Button>
-          </Tooltip>
-
-          <Tooltip content="Available on hover and keyboard focus" side="bottom">
-            <button type="button" className="ph-tip cursor-help">Dashed chrome</button>
-          </Tooltip>
-        </div>
-      </TooltipProvider>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/UtilityShowcase.tsx

@@ -1,81 +0,0 @@
-"use client";
-
-import { Breadcrumbs, ComponentDocs, Pagination, ShowcaseWrapper } from "@/components/ui";
-
-const breadcrumbTrail = [
-  { label: "Project", href: "#" },
-  { label: "Product analytics", href: "#" },
-  { label: "Trends", current: true },
-];
-
-const longBreadcrumbTrail = [
-  { label: "Organisation", href: "#" },
-  { label: "Data pipeline", href: "#" },
-  { label: "Warehouse", href: "#" },
-  { label: "Sources", href: "#" },
-  { label: "Stripe sync", current: true },
-];
-
-export default function UtilityShowcase() {
-  const code = `import { Breadcrumbs, Pagination } from "the-old-ui";
-
-<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
-  <div className="ph-panel space-y-6">
-    <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Breadcrumbs</h3>
-
-    <Breadcrumbs items={breadcrumbTrail} />
-    <Breadcrumbs items={longBreadcrumbTrail} label="Long breadcrumb" />
-  </div>
-
-  <div className="ph-panel space-y-6">
-    <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Pagination</h3>
-
-    <Pagination page={1} totalPages={12} label="Table pagination" />
-    <Pagination page={5} totalPages={8} compact label="Compact pagination" />
-
-    <p className="text-xs text-ph-mutedtext">
-      Pair with table footers. Active page state and disabled arrows are handled by props.
-    </p>
-  </div>
-</div>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Navigation utilities"
-      description="Breadcrumb and pagination primitives with accessibility and default styling built in."
-      code={code}
-      filename="UtilityExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "Breadcrumbs.items", type: "{ label; href?; current? }[]", description: "Trail entries rendered with separators and current page state." },
-            { name: "Pagination.page", type: "number", description: "Current page." },
-            { name: "Pagination.totalPages", type: "number", description: "Total page count." },
-            { name: "Pagination.compact", type: "boolean", defaultValue: "false", description: "Uses a narrower visible page window." },
-            { name: "Pagination.onPageChange", type: "(page: number) => void", description: "Called by page and arrow buttons." },
-          ]}
-        />
-      }
-    >
-      <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
-        <div className="ph-panel space-y-6">
-          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Breadcrumbs</h3>
-
-          <Breadcrumbs items={breadcrumbTrail} />
-          <Breadcrumbs items={longBreadcrumbTrail} label="Long breadcrumb" />
-        </div>
-
-        <div className="ph-panel space-y-6">
-          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Pagination</h3>
-
-          <Pagination page={1} totalPages={12} label="Table pagination" />
-          <Pagination page={5} totalPages={8} compact label="Compact pagination" />
-
-          <p className="text-xs text-ph-mutedtext">
-            Pair with table footers. Active page state and disabled arrows are handled by props.
-          </p>
-        </div>
-      </div>
-    </ShowcaseWrapper>
-  );
-}