create-wakii-stack 0.0.0-stage → 0.1.1

package/stack-template/app/ui-kit/src/ui/order-list/index.tsx

@@ -0,0 +1,38 @@
+// OrderList — danh sách có nút lên/xuống (antd Transfer lite + reorder).
+import { useState } from 'react';
+
+export interface OrderListItem { label: string; value: string }
+
+export interface OrderListProps {
+  items: OrderListItem[];
+  onChange?: (items: OrderListItem[]) => void;
+  className?: string;
+}
+
+export function OrderList({ items: itemsProp, onChange, className }: OrderListProps) {
+  const [items, setItems] = useState(itemsProp);
+  function move(i: number, dir: -1 | 1) {
+    const j = i + dir;
+    if (j < 0 || j >= items.length) return;
+    const next = [...items];
+    [next[i], next[j]] = [next[j], next[i]];
+    setItems(next); onChange?.(next);
+  }
+  return (
+    <div className={`inline-flex flex-col gap-2${className ? ` ${className}` : ''}`}>
+      <ul className="m-0 min-h-[200px] w-64 list-none overflow-auto rounded-xl border border-line bg-s2 p-2">
+        {items.map((item, i) => (
+          <li key={item.value} className="flex items-center justify-between rounded-lg px-3 py-1.5 text-body text-ink hover:bg-s3">
+            <span>{i + 1}. {item.label}</span>
+            <span className="flex gap-0.5">
+              <button type="button" aria-label="Lên" disabled={i === 0} onClick={() => move(i, -1)}
+                className="cursor-pointer border-none bg-transparent p-0.5 text-[10px] text-ink3 hover:text-accent disabled:opacity-30">▲</button>
+              <button type="button" aria-label="Xuống" disabled={i === items.length - 1} onClick={() => move(i, 1)}
+                className="cursor-pointer border-none bg-transparent p-0.5 text-[10px] text-ink3 hover:text-accent disabled:opacity-30">▼</button>
+            </span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/stack-template/app/ui-kit/src/ui/order-list/order-list.stories.tsx

@@ -0,0 +1,38 @@
+// Stories OrderList — Data Display. Danh sách reorder bằng ▲/▼.
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { OrderList } from './index';
+
+/** Reorderable list — move items up/down with chevrons or keyboard. */
+const meta = {
+  title: 'Data Display/OrderList',
+  component: OrderList,
+  tags: ['autodocs'],
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+const STEPS = [
+  { label: 'Boot compose', value: 'boot' },
+  { label: 'Tạo Kafka topic', value: 'topic' },
+  { label: 'Chạy e2e smoke', value: 'e2e' },
+  { label: 'Assert DLQ', value: 'dlq' },
+];
+
+function ControlledDemo() {
+  const [items, setItems] = useState(STEPS);
+  return (
+    <div>
+      <OrderList items={items} onChange={setItems} />
+      <p className="mt-2 text-meta text-ink3">
+        thứ tự: {items.map((s) => s.value).join(' → ')}
+      </p>
+    </div>
+  );
+}
+
+export const CoBan: Story = {
+  name: 'Basic — move up / down',
+  render: () => <ControlledDemo />,
+};

package/stack-template/app/ui-kit/src/ui/order-list/order-list.test.tsx

@@ -0,0 +1,54 @@
+// OrderList tests — render đánh số, ▼/▲ đổi chỗ + onChange, ranh giới disabled.
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { OrderList } from './index.js';
+
+const ITEMS = [
+  { label: 'Alpha', value: 'a' },
+  { label: 'Beta', value: 'b' },
+  { label: 'Gamma', value: 'g' },
+];
+
+afterEach(cleanup);
+
+describe('OrderList', () => {
+  it('render items đánh số thứ tự 1./2./3.', () => {
+    render(<OrderList items={ITEMS} />);
+    expect(screen.getByText('1. Alpha')).toBeInTheDocument();
+    expect(screen.getByText('2. Beta')).toBeInTheDocument();
+    expect(screen.getByText('3. Gamma')).toBeInTheDocument();
+  });
+
+  it('click ▼ item đầu → đổi chỗ với item sau + onChange thứ tự mới', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<OrderList items={ITEMS} onChange={onChange} />);
+    await user.click(screen.getAllByRole('button', { name: 'Xuống' })[0]!);
+    expect(onChange).toHaveBeenCalledWith([ITEMS[1], ITEMS[0], ITEMS[2]]);
+    expect(screen.getByText('1. Beta')).toBeInTheDocument();
+    expect(screen.getByText('2. Alpha')).toBeInTheDocument();
+  });
+
+  it('click ▲ item cuối → lên trên; ranh giới đầu/cuối disabled', async () => {
+    const user = userEvent.setup();
+    render(<OrderList items={ITEMS} />);
+    const ups = screen.getAllByRole('button', { name: 'Lên' });
+    const downs = screen.getAllByRole('button', { name: 'Xuống' });
+    expect(ups[0]).toBeDisabled(); // Alpha không lên được nữa
+    expect(downs[downs.length - 1]).toBeDisabled(); // Gamma không xuống được nữa
+    await user.click(ups[ups.length - 1]!); // Gamma lên một bậc
+    expect(screen.getByText('2. Gamma')).toBeInTheDocument();
+    expect(screen.getByText('3. Beta')).toBeInTheDocument();
+  });
+
+  it('reorder chuỗi: ▼×2 đưa item cuối lên đầu? (đổi chỗ từng cặp)', async () => {
+    const user = userEvent.setup();
+    render(<OrderList items={ITEMS} />);
+    await user.click(screen.getAllByRole('button', { name: 'Xuống' })[0]!);
+    await user.click(screen.getAllByRole('button', { name: 'Xuống' })[1]!);
+    expect(screen.getByText('1. Beta')).toBeInTheDocument();
+    expect(screen.getByText('2. Gamma')).toBeInTheDocument();
+    expect(screen.getByText('3. Alpha')).toBeInTheDocument();
+  });
+});

package/stack-template/app/ui-kit/src/ui/org-chart/index.tsx

@@ -0,0 +1,138 @@
+// OrgChart — cây tổ chức dọc (PrimeReact OrganizationChart lite): root trên, con
+// hàng dưới. Connector thuần CSS: đường dọc ngắn từ cha + đường ngang GHÉP từ
+// nửa trái/phải từng cột con (first → nửa phải, last → nửa trái, giữa → full) —
+// không JS đo đạc. Node card bo góc; type 'dept' | 'person' đổi nền + icon.
+// Collapse subtree: chevron góc card, Set keys uncontrolled (mặc định mở hết).
+// A11y: role=tree/treeitem/group, aria-expanded trên treeitem, aria-selected.
+import { useState } from 'react';
+import type { ReactNode } from 'react';
+import { Icon } from '../icons/index.js';
+
+export interface OrgChartNodeData {
+  key: string;
+  label: ReactNode;
+  /** 'dept' = nền s3 + semibold + icon menu-bars; 'person' (mặc định) = bg-s2 + icon user. */
+  type?: 'person' | 'dept';
+  children?: OrgChartNodeData[];
+}
+
+export interface OrgChartProps {
+  /** Node gốc (đơn — con render hàng dưới qua children). */
+  data: OrgChartNodeData;
+  /** Key node đang chọn (controlled) — viền accent + aria-selected. */
+  selectedKey?: string;
+  onSelect?: (key: string) => void;
+  /** Keys gập sẵn lúc mount (subtree ẩn — collapse qua chevron góc card). */
+  defaultCollapsedKeys?: string[];
+  className?: string;
+}
+
+/* Connector ngang: mỗi cột con vẽ nửa đường của mình trên mép trên (top-0) —
+ * các cột kề nhau ghép thành 1 đường liền; first chỉ nửa phải, last chỉ nửa trái. */
+const H_LINE =
+  "before:absolute before:top-0 before:h-px before:bg-line before:content-['']";
+const H_LINE_EDGE = 'first:before:left-1/2 first:before:right-0 last:before:left-0 last:before:right-1/2';
+
+function OrgNode({
+  node,
+  isChild,
+  selectedKey,
+  onSelect,
+  collapsed,
+  toggle,
+}: {
+  node: OrgChartNodeData;
+  /** con (không phải root) → connector dọc + nửa đường ngang. */
+  isChild: boolean;
+  selectedKey?: string;
+  onSelect?: (key: string) => void;
+  collapsed: Set<string>;
+  toggle: (key: string) => void;
+}) {
+  const hasChildren = !!node.children?.length;
+  const isCollapsed = collapsed.has(node.key);
+  const selected = node.key === selectedKey;
+  const typeCls =
+    node.type === 'dept'
+      ? 'bg-s3 font-semibold text-ink'
+      : 'bg-s2 text-ink';
+  const toggleLabel =
+    typeof node.label === 'string' ? `Gập/mở ${node.label}` : 'Gập/mở nhánh';
+
+  return (
+    <li
+      role="treeitem"
+      aria-expanded={hasChildren ? !isCollapsed : undefined}
+      aria-selected={selected}
+      className={`relative flex list-none flex-col items-center ${isChild ? `px-6 ${H_LINE} ${H_LINE_EDGE}` : ''}`}
+    >
+      {isChild && <span aria-hidden="true" className="h-4 w-px bg-line" />}
+      <div className="flex items-start gap-1">
+        <button
+          type="button"
+          onClick={() => onSelect?.(node.key)}
+          className={`flex cursor-pointer items-center gap-1.5 whitespace-nowrap rounded-lg border px-4 py-2 text-body shadow-[var(--shadow-pop)] transition-[background-color,box-shadow,border-color] duration-150 hover:shadow-[var(--shadow-lift)] focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:outline-none ${
+            selected ? 'border-accent ring-1 ring-accent/40' : 'border-line'
+          } ${typeCls}`}
+        >
+          <Icon name={node.type === 'dept' ? 'menu-bars' : 'user'} size={12} className="shrink-0 text-ink3" />
+          {node.label}
+        </button>
+        {hasChildren && (
+          <button
+            type="button"
+            aria-label={toggleLabel}
+            onClick={() => toggle(node.key)}
+            className="cursor-pointer rounded-pill border-none bg-transparent p-0.5 text-ink3 transition-colors hover:text-ink focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:outline-none"
+          >
+            <span
+              aria-hidden="true"
+              className={`inline-block transition-transform duration-200 ${isCollapsed ? '-rotate-90' : 'rotate-0'}`}
+            >
+              <Icon name="chevron-down" size={12} />
+            </span>
+          </button>
+        )}
+      </div>
+      {hasChildren && !isCollapsed && (
+        <>
+          <span aria-hidden="true" className="h-4 w-px bg-line" />
+          <ul role="group" className="m-0 flex list-none items-start p-0">
+            {node.children!.map((child) => (
+              <OrgNode
+                key={child.key}
+                node={child}
+                isChild
+                selectedKey={selectedKey}
+                onSelect={onSelect}
+                collapsed={collapsed}
+                toggle={toggle}
+              />
+            ))}
+          </ul>
+        </>
+      )}
+    </li>
+  );
+}
+
+export function OrgChart({ data, selectedKey, onSelect, defaultCollapsedKeys = [], className }: OrgChartProps) {
+  const [collapsed, setCollapsed] = useState<Set<string>>(new Set(defaultCollapsedKeys));
+
+  function toggle(key: string) {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }
+
+  return (
+    <div className={`overflow-x-auto${className ? ` ${className}` : ''}`}>
+      <ul role="tree" aria-label={typeof data.label === 'string' ? data.label : 'Organization chart'} className="m-0 inline-flex list-none justify-center p-0">
+        <OrgNode node={data} isChild={false} selectedKey={selectedKey} onSelect={onSelect} collapsed={collapsed} toggle={toggle} />
+      </ul>
+    </div>
+  );
+}

package/stack-template/app/ui-kit/src/ui/org-chart/org-chart.stories.tsx

@@ -0,0 +1,76 @@
+// OrgChart stories — company chart 3 cấp / collapse sẵn / selection / dark theme.
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { OrgChart, type OrgChartNodeData } from './index';
+
+/** Hierarchical org chart — nodes, connectors, collapse branches. */
+const meta = { title: 'Data Display/OrgChart', tags: ['autodocs'] } satisfies Meta;
+export default meta;
+type S = StoryObj<typeof meta>;
+
+const COMPANY: OrgChartNodeData = {
+  key: 'ceo',
+  label: 'Alice Nguyễn — CEO',
+  type: 'dept',
+  children: [
+    {
+      key: 'eng',
+      label: 'Engineering',
+      type: 'dept',
+      children: [
+        { key: 'fe', label: 'Hải — FE lead' },
+        { key: 'be', label: 'Hội — BE lead' },
+        { key: 'qa', label: 'Lan — QA' },
+      ],
+    },
+    { key: 'hr', label: 'People / HR', type: 'dept' },
+    {
+      key: 'ops',
+      label: 'Operations',
+      type: 'dept',
+      children: [{ key: 'devops', label: 'Khoa — DevOps' }],
+    },
+  ],
+};
+
+export const CompanyChart: S = {
+  name: 'Company chart — 3 levels, dept vs person nodes',
+  render: () => (
+    <div className="w-full p-6">
+      <OrgChart data={COMPANY} />
+    </div>
+  ),
+};
+
+export const CollapsedByDefault: S = {
+  name: 'Collapsed by default — only root + first level',
+  render: () => (
+    <div className="w-full p-6">
+      <OrgChart data={COMPANY} defaultCollapsedKeys={['ceo']} />
+    </div>
+  ),
+};
+
+function SelectableDemo() {
+  const [selected, setSelected] = useState<string | undefined>('eng');
+  return (
+    <div className="w-full p-6">
+      <OrgChart data={COMPANY} selectedKey={selected} onSelect={setSelected} />
+      <p className="mt-4 text-meta text-ink3">selected: {selected ?? '—'}</p>
+    </div>
+  );
+}
+
+export const Selectable: S = {
+  name: 'Selection — click node to select (accent ring + aria-selected)',
+  render: () => <SelectableDemo />,
+};
+
+export const DarkTheme: S = {
+  name: 'Dark theme — connectors + cards follow tokens',
+  render: () => (
+    <div data-bp-theme="dark" className="w-full rounded-xl bg-canvas p-6">
+      <OrgChart data={COMPANY} />
+    </div>
+  ),
+};

package/stack-template/app/ui-kit/src/ui/org-chart/org-chart.test.tsx

@@ -0,0 +1,98 @@
+// OrgChart tests — render cây, role a11y, collapse subtree, selection, type styling,
+// connector structure, nesting sâu (case-coverage 2026-10-18).
+// NOTE: truy vấn node qua getByText(label).closest('li') — accessible-name của li
+// cha tính từ toàn bộ subtree (jsdom) nên regex name sẽ match cả cha lẫn con.
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { OrgChart, type OrgChartNodeData } from './index.js';
+
+const TREE: OrgChartNodeData = {
+  key: 'ceo',
+  label: 'CEO',
+  type: 'dept',
+  children: [
+    { key: 'eng', label: 'Engineering', type: 'dept', children: [
+      { key: 'fe', label: 'Hải (FE)' },
+      { key: 'be', label: 'Hoi (BE)' },
+    ] },
+    { key: 'hr', label: 'HR', type: 'dept' },
+  ],
+};
+
+const nodeLi = (label: string) => screen.getByText(label).closest('li')!;
+
+afterEach(cleanup);
+
+describe('OrgChart', () => {
+  it('render root + role=tree/treeitem; label + type icon', () => {
+    const { container } = render(<OrgChart data={TREE} />);
+    expect(screen.getByRole('tree')).toBeInTheDocument();
+    expect(nodeLi('CEO')).toHaveAttribute('role', 'treeitem');
+    expect(container.querySelector('ul[role="group"]')).not.toBeNull();
+  });
+
+  it('children render lồng 2 cấp (group + grandchild)', () => {
+    render(<OrgChart data={TREE} />);
+    expect(screen.getByText('Engineering')).toBeInTheDocument();
+    expect(screen.getByText('Hải (FE)')).toBeInTheDocument();
+    expect(screen.getByText('Hoi (BE)')).toBeInTheDocument();
+    // 2 level group: dưới CEO và dưới Engineering
+    expect(screen.getAllByRole('group')).toHaveLength(2);
+  });
+
+  it('aria-expanded chỉ trên node có children; node lá không có', () => {
+    render(<OrgChart data={TREE} />);
+    expect(nodeLi('CEO')).toHaveAttribute('aria-expanded', 'true');
+    expect(nodeLi('Engineering')).toHaveAttribute('aria-expanded', 'true');
+    // HR là node lá (dept không con) → không aria-expanded
+    expect(nodeLi('HR')).not.toHaveAttribute('aria-expanded');
+    expect(nodeLi('Hải (FE)')).not.toHaveAttribute('aria-expanded');
+  });
+
+  it('chevron collapse → subtree remove khỏi DOM + aria-expanded false', async () => {
+    const user = userEvent.setup();
+    render(<OrgChart data={TREE} />);
+    const toggle = screen.getByRole('button', { name: 'Gập/mở Engineering' });
+    await user.click(toggle);
+    expect(screen.queryByText('Hải (FE)')).not.toBeInTheDocument();
+    expect(nodeLi('Engineering')).toHaveAttribute('aria-expanded', 'false');
+    await user.click(toggle);
+    expect(screen.getByText('Hải (FE)')).toBeInTheDocument();
+  });
+
+  it('defaultCollapsedKeys → subtree ẩn lúc mount', () => {
+    render(<OrgChart data={TREE} defaultCollapsedKeys={['eng']} />);
+    expect(screen.queryByText('Hải (FE)')).not.toBeInTheDocument();
+    expect(nodeLi('Engineering')).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('onSelect khi click card; selectedKey → aria-selected + viền accent', async () => {
+    const onSelect = vi.fn();
+    const { rerender } = render(<OrgChart data={TREE} onSelect={onSelect} />);
+    await userEvent.click(screen.getByText('HR'));
+    expect(onSelect).toHaveBeenCalledWith('hr');
+    rerender(<OrgChart data={TREE} selectedKey="hr" />);
+    expect(nodeLi('HR')).toHaveAttribute('aria-selected', 'true');
+    expect(nodeLi('CEO')).toHaveAttribute('aria-selected', 'false');
+  });
+
+  it('type dept vs person → class nền khác nhau (bg-s3 vs bg-s2)', () => {
+    render(<OrgChart data={TREE} />);
+    const ceo = screen.getByText('CEO').closest('button')!;
+    const fe = screen.getByText('Hải (FE)').closest('button')!;
+    expect(ceo).toHaveClass('bg-s3', 'font-semibold'); // dept
+    expect(fe).toHaveClass('bg-s2'); // person (không semibold)
+    expect(fe).not.toHaveClass('font-semibold');
+    // connector: node con có cột connector dọc trước card
+    expect(nodeLi('Engineering').querySelector('span.h-4')).not.toBeNull();
+  });
+
+  it('className passthrough + chevron root mở subtree', () => {
+    const { container } = render(<OrgChart data={TREE} defaultCollapsedKeys={['ceo']} className="marker" />);
+    expect(container.firstElementChild).toHaveClass('marker');
+    expect(screen.queryByText('Engineering')).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Gập/mở CEO' }));
+    expect(screen.getByText('Engineering')).toBeInTheDocument();
+  });
+});

package/stack-template/app/ui-kit/src/ui/pagination/index.tsx

@@ -0,0 +1,102 @@
+// Pagination — antd look: item ô vuông 32px (h-8 min-w-8) rounded-lg, KHÔNG chọn
+// = viền outline (border-line) để nút đọc rõ; active = nền accent đặc + chữ trắng
+// font-medium (fontWeightStrong) không viền; hover item thường/prev/next = bg-s3
+// (colorBgTextHover); prev/next SVG chevron, ellipsis ··· (jump ±5 — antd quick);
+// disabled = text-ink3 cursor-not-allowed, không hover bg, không viền.
+// Contract note: TasksPage giữ "Tải thêm"/"x/total" — component này stories-only
+// cho đến khi có page-based list.
+import { useMemo } from 'react';
+import { Icon } from '../icons/index.js';
+
+export interface PaginationProps {
+  current: number;
+  pageSize: number;
+  total: number;
+  onChange?: (page: number) => void;
+  className?: string;
+}
+
+/** Dãy trang kiểu antd: 1 … p-1 p p+1 … N (window ±1, giữ đầu/cuối). */
+// eslint-disable-next-line react-refresh/only-export-components
+export function pageList(current: number, pageCount: number): Array<number | 'ellipsis-prev' | 'ellipsis-next'> {
+  if (pageCount <= 7) return Array.from({ length: pageCount }, (_, i) => i + 1);
+  const pages: Array<number | 'ellipsis-prev' | 'ellipsis-next'> = [1];
+  const lo = Math.max(2, current - 1);
+  const hi = Math.min(pageCount - 1, current + 1);
+  if (lo > 2) pages.push('ellipsis-prev');
+  for (let p = lo; p <= hi; p++) pages.push(p);
+  if (hi < pageCount - 1) pages.push('ellipsis-next');
+  pages.push(pageCount);
+  return pages;
+}
+
+function ChevronLeftIcon() {
+  return <Icon name="chevron-left" size={14} />;
+}
+function ChevronRightIcon() {
+  return <Icon name="chevron-right" size={14} />;
+}
+
+const ITEM =
+  'inline-flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-lg border border-line bg-transparent px-2 text-body text-ink transition-all duration-150 hover:bg-s3 active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40';
+const ITEM_ACTIVE =
+  'inline-flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-lg border-none bg-accent px-2 text-body font-medium text-white transition-all duration-150 active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:ring-white/60';
+const ITEM_DISABLED =
+  'inline-flex h-8 min-w-8 items-center justify-center rounded-lg border-none bg-transparent px-2 text-body text-ink3 cursor-not-allowed';
+
+export function Pagination({ current, pageSize, total, onChange, className }: PaginationProps) {
+  const pageCount = Math.max(1, Math.ceil(total / pageSize));
+  const pages = useMemo(() => pageList(current, pageCount), [current, pageCount]);
+
+  const go = (p: number) => {
+    if (p < 1 || p > pageCount || p === current) return;
+    onChange?.(p);
+  };
+
+  return (
+    <nav aria-label="Phân trang" className={`flex items-center gap-2${className ? ` ${className}` : ''}`}>
+      <button
+        type="button"
+        aria-label="Trang trước"
+        className={current === 1 ? ITEM_DISABLED : ITEM}
+        disabled={current === 1}
+        onClick={() => go(current - 1)}
+      >
+        <ChevronLeftIcon />
+      </button>
+      {pages.map((p) =>
+        p === 'ellipsis-prev' || p === 'ellipsis-next' ? (
+          <button
+            key={p}
+            type="button"
+            aria-label={p === 'ellipsis-prev' ? 'Lùi 5 trang' : 'Tiến 5 trang'}
+            className={`${ITEM} tracking-[2px]`}
+            onClick={() => go(p === 'ellipsis-prev' ? Math.max(1, current - 5) : Math.min(pageCount, current + 5))}
+          >
+            ···
+          </button>
+        ) : (
+          <button
+            key={p}
+            type="button"
+            aria-label={`Trang ${p}`}
+            aria-current={p === current ? 'page' : undefined}
+            className={p === current ? ITEM_ACTIVE : ITEM}
+            onClick={() => go(p)}
+          >
+            {p}
+          </button>
+        ),
+      )}
+      <button
+        type="button"
+        aria-label="Trang sau"
+        className={current === pageCount ? ITEM_DISABLED : ITEM}
+        disabled={current === pageCount}
+        onClick={() => go(current + 1)}
+      >
+        <ChevronRightIcon />
+      </button>
+    </nav>
+  );
+}

package/stack-template/app/ui-kit/src/ui/pagination/pagination.stories.tsx

@@ -0,0 +1,103 @@
+// Parity matrix antd→tokens: docs/parity-matrix.md
+// PARITY: antd Pagination (item ô vuông 32 không viền, active accent fill + fontWeightStrong,
+// hover colorBgTextHover, SVG chevron, ellipsis ··· jump ±5).
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Pagination } from './index';
+import { Segmented } from '../segmented/index';
+
+/** Page controls — ellipsis jump ±5, prev/next edge states. */
+const meta = {
+  title: 'Navigation/Pagination',
+  component: Pagination,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Pagination>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+function ControlledDemo({ initial = 5, total = 100 }: { initial?: number; total?: number }) {
+  const [page, setPage] = useState(initial);
+  return <Pagination current={page} pageSize={10} total={total} onChange={setPage} />;
+}
+
+export const CoBan: Story = {
+  args: { current: 5, pageSize: 10, total: 100 },
+  render: () => <ControlledDemo />,
+};
+
+export const TrangDau: Story = {
+  name: 'First page — prev disabled',
+  args: { current: 1, pageSize: 10, total: 100 },
+  render: () => <ControlledDemo initial={1} total={100} />,
+};
+
+export const TrangCuoi: Story = {
+  name: 'Last page — next disabled',
+  args: { current: 10, pageSize: 10, total: 100 },
+  render: () => <ControlledDemo initial={10} total={100} />,
+};
+
+export const ItTrang: Story = {
+  name: 'Few pages — no ellipsis',
+  args: { current: 2, pageSize: 10, total: 40 },
+  render: () => <ControlledDemo initial={2} total={40} />,
+};
+
+export const NhieuTrang: Story = {
+  name: 'Many pages — ellipsis jump',
+  args: { current: 50, pageSize: 10, total: 1000 },
+  render: () => <ControlledDemo initial={50} total={1000} />,
+};
+
+export const DarkTheme: Story = {
+  name: 'Dark theme',
+  args: { current: 5, pageSize: 10, total: 100 },
+  render: () => (
+    <div data-bp-theme="dark" className="rounded-xl bg-canvas p-4">
+      <ControlledDemo />
+    </div>
+  ),
+};
+
+// ── Real-world usage (2026-10-25): table footer ──
+
+/** TableFooter — classic table footer: "1–10 của 87" range text, a page-size changer,
+ * controlled Pagination. In a real app, wire onChange to your query — not local state. */
+export const TableFooter: StoryObj = {
+  name: 'Table footer — range text + size changer + controlled page (87 items)',
+  render: () => <TableFooterDemo />,
+};
+
+function TableFooterDemo() {
+  const [current, setCurrent] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const total = 87;
+  const from = (current - 1) * pageSize + 1;
+  const to = Math.min(current * pageSize, total);
+
+  return (
+    <div className="flex w-full max-w-xl flex-col gap-3 rounded-xl border border-line bg-s1 p-4">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <span className="text-meta text-ink3">{`Hiển thị ${from}–${to} của ${total} mục`}</span>
+        <span className="flex items-center gap-2 text-meta text-ink3">
+          {'Số dòng:'}
+          <Segmented
+            ariaLabel="Số dòng mỗi trang"
+            value={String(pageSize)}
+            onChange={(v) => {
+              setPageSize(Number(v));
+              setCurrent(1);
+            }}
+            options={[
+              { label: '10', value: '10' },
+              { label: '20', value: '20' },
+              { label: '50', value: '50' },
+            ]}
+          />
+        </span>
+      </div>
+      <Pagination current={current} pageSize={pageSize} total={total} onChange={setCurrent} />
+    </div>
+  );
+}