From 5b2d1598de2326ffe84ee05cde4cfb973fe70698 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= <emile@probo.com>
Date: Thu, 9 Jul 2026 19:15:41 -0400
Subject: [PATCH] Add Storybook stories for Pagination
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Cover the playground, the both/first/last arrow states that show the
reserved-slot positioning, the optional label, and the skeleton.

Signed-off-by: Émile Ré <emile@probo.com>
---
 .../src/v2/Pagination/Pagination.stories.tsx  | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 packages/ui/src/v2/Pagination/Pagination.stories.tsx

diff --git a/packages/ui/src/v2/Pagination/Pagination.stories.tsx b/packages/ui/src/v2/Pagination/Pagination.stories.tsx
new file mode 100644
index 000000000..a6f067249
--- /dev/null
+++ b/packages/ui/src/v2/Pagination/Pagination.stories.tsx
@@ -0,0 +1,57 @@
+// Copyright (c) 2026 Probo Inc <hello@probo.com>.
+//
+// Permission to use, copy, modify, and/or distribute this software for any
+// purpose with or without fee is hereby granted, provided that the above
+// copyright notice and this permission notice appear in all copies.
+//
+// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+// PERFORMANCE OF THIS SOFTWARE.
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Pagination } from "./Pagination";
+import { PaginationSkeleton } from "./PaginationSkeleton";
+
+const noop = () => {};
+
+export default {
+  title: "v2/Pagination",
+  component: Pagination,
+  args: {
+    hasPrevious: true,
+    hasNext: true,
+    onPrevious: noop,
+    onNext: noop,
+  },
+} satisfies Meta<typeof Pagination>;
+
+type Story = StoryObj<typeof Pagination>;
+
+export const Playground: Story = {};
+
+// Each arrow only shows when its page exists, but its slot stays reserved so a
+// lone arrow sits in the same position as when both are present.
+export const States: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <Pagination hasPrevious hasNext onPrevious={noop} onNext={noop} />
+      <Pagination hasPrevious={false} hasNext onPrevious={noop} onNext={noop} />
+      <Pagination hasPrevious hasNext={false} onPrevious={noop} onNext={noop} />
+    </div>
+  ),
+};
+
+export const WithLabel: Story = {
+  args: {
+    label: "Page 2",
+  },
+};
+
+export const Skeleton: Story = {
+  render: () => <PaginationSkeleton />,
+};