create-wakii-stack 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,137 @@
+// SplitButton stories — batch ⑱: Basic / WithIcons+separator / DangerItem / demo.
+// Unity shell 2026-10-18: adds UnityTones (4 tones side by side) + Sizes — eyeball
+// the "single solid block" (one wrapper border, inner divider, no seam).
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SplitButton } from './index';
+import { Icon } from '../icons/index';
+
+// No component set (label/items required → stories are args-driven) — render-only
+// stories, same pattern as pagination/carousel.
+const meta = { title: 'Navigation/SplitButton', tags: ['autodocs'] } satisfies Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  name: 'Basic — primary action + dropdown',
+  render: () => (
+    <SplitButton
+      label="Save task"
+      items={[
+        { key: 'save-run', label: 'Save + run' },
+        { key: 'save-draft', label: 'Save draft' },
+      ]}
+      onClick={() => {}}
+      onItemClick={() => {}}
+    />
+  ),
+};
+
+export const WithIcons: Story = {
+  name: 'WithIcons — per-item icons + separator',
+  render: () => (
+    <SplitButton
+      label="Export report"
+      items={[
+        { key: 'pdf', label: 'Export PDF', icon: <Icon name="download" size={14} /> },
+        { key: 'csv', label: 'Export CSV', icon: <Icon name="download" size={14} /> },
+        { key: 'sep', label: '', separator: true },
+        { key: 'print', label: 'Print', icon: <Icon name="copy" size={14} /> },
+      ]}
+      onItemClick={() => {}}
+    />
+  ),
+};
+
+/** UnityTones — 4 tones side by side to eyeball the continuous block: primary
+ * (border-accent + white divider), default (border-line + line divider), text
+ * ghost, danger solid (border-st-fail). Open each menu — hover overlay keeps the
+ * block unbroken. */
+export const UnityTones: Story = {
+  name: 'Unity — 4 solid tones (primary/default/text/danger)',
+  render: () => (
+    <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+      <SplitButton
+        label="Save task"
+        items={[
+          { key: 'save-run', label: 'Save + run' },
+          { key: 'save-draft', label: 'Save draft' },
+        ]}
+      />
+      <SplitButton
+        type="default"
+        label="Save task"
+        items={[
+          { key: 'save-run', label: 'Save + run' },
+          { key: 'save-draft', label: 'Save draft' },
+        ]}
+      />
+      <SplitButton
+        type="text"
+        label="Save task"
+        items={[
+          { key: 'save-run', label: 'Save + run' },
+          { key: 'save-draft', label: 'Save draft' },
+        ]}
+      />
+      <SplitButton
+        danger
+        label="Delete data"
+        items={[
+          { key: 'soft', label: 'Soft delete (archive)' },
+          { key: 'sep', label: '', separator: true },
+          { key: 'hard', label: 'Delete permanently', danger: true },
+        ]}
+      />
+    </div>
+  ),
+};
+
+/** Sizes — small h-8 / middle h-9 (default) / large h-10, synced with Button. */
+export const Sizes: Story = {
+  name: 'Sizes (h-8 / h-9 / h-10)',
+  render: () => (
+    <div style={{ display: 'grid', gap: 12 }}>
+      {(['small', 'middle', 'large'] as const).map((s) => (
+        <div key={s} style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+          <span style={{ width: 48, fontSize: 12, opacity: 0.6 }}>{s}</span>
+          <SplitButton size={s} label="Save task" items={[{ key: 'save-draft', label: 'Save draft' }]} />
+          <SplitButton
+            size={s}
+            type="default"
+            label="Export"
+            items={[{ key: 'csv', label: 'Export CSV', icon: <Icon name="download" size={14} /> }]}
+          />
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+/** Demo — shows the picked keys (useState). */
+export const Demo: Story = {
+  name: 'Demo — selected key display (useState)',
+  render: () => <SplitButtonDemo />,
+};
+
+function SplitButtonDemo() {
+  const [selected, setSelected] = useState<string[]>([]);
+  const push = (msg: string) => setSelected((prev) => [...prev.slice(-2), msg]);
+  return (
+    <div className="flex flex-col gap-3">
+      <ul className="m-0 list-none p-0 text-meta text-ink2">
+        {selected.length === 0 ? <li>No action yet.</li> : selected.map((line, i) => <li key={i}>{line}</li>)}
+      </ul>
+      <SplitButton
+        label="Save task"
+        items={[
+          { key: 'save-run', label: 'Save + run', icon: <Icon name="check-circle" size={14} /> },
+          { key: 'sep', label: '', separator: true },
+          { key: 'save-draft', label: 'Save draft', icon: <Icon name="pencil" size={14} /> },
+        ]}
+        onClick={() => push('click: Save task')}
+        onItemClick={(key) => push(`item: ${key}`)}
+      />
+    </div>
+  );
+}

package/stack-template/app/ui-kit/src/ui/split-button/split-button.test.tsx

@@ -0,0 +1,152 @@
+// SplitButton tests — kiến trúc MỘT <button> duy nhất (user directive 2026-10-18):
+// chevron = span[data-chevron] vùng-click riêng bên trong nút (stopPropagation).
+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 { SplitButton } from './index.js';
+
+afterEach(cleanup);
+
+const items = [
+  { key: 'save-run', label: 'Lưu + chạy' },
+  { key: 'save-draft', label: 'Lưu nháp' },
+];
+
+function chevronOf(container: HTMLElement): HTMLElement {
+  const el = container.querySelector('[data-chevron]');
+  if (!el) throw new Error('chevron span not found');
+  return el as HTMLElement;
+}
+
+async function openMenu(container: HTMLElement) {
+  await userEvent.click(chevronOf(container));
+  return screen.getByRole('menu');
+}
+
+describe('SplitButton — một nút duy nhất', () => {
+  it('click vùng chevron → menu hiện role=menu + aria-expanded=true; click lần nữa → đóng', async () => {
+    const { container } = render(<SplitButton label="Lưu" items={items} />);
+    const btn = screen.getByRole('button', { name: /Lưu/ });
+    expect(btn).toHaveAttribute('aria-haspopup', 'menu');
+    await openMenu(container);
+    expect(btn).toHaveAttribute('aria-expanded', 'true');
+    await userEvent.click(chevronOf(container));
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+  });
+
+  it('items render role=menuitem + item danger class text-st-fail + icon', async () => {
+    const { container } = render(
+      <SplitButton label="Lưu" items={[...items, { key: 'del', label: 'Xoá', danger: true, icon: <svg data-testid="ico-del" /> }]} />,
+    );
+    await openMenu(container);
+    expect(screen.getByRole('menuitem', { name: 'Lưu + chạy' })).toBeInTheDocument();
+    expect(screen.getByTestId('ico-del')).toBeInTheDocument();
+    expect(screen.getByRole('menuitem', { name: 'Xoá' }).className).toContain('text-st-fail');
+  });
+
+  it('separator item → đường phân cách border-t, KHÔNG phải button', async () => {
+    const { container } = render(
+      <SplitButton label="Lưu" items={[...items, { key: 'sep', label: '', separator: true }]} />,
+    );
+    await openMenu(container);
+    const sep = screen.getByRole('menu').querySelector('li.border-t');
+    expect(sep).not.toBeNull();
+    expect(sep!.querySelector('button')).toBeNull();
+  });
+
+  it('chevron icon xoay 180deg khi open (transition class)', async () => {
+    const { container } = render(<SplitButton label="Lưu" items={items} />);
+    expect(chevronOf(container).querySelector('svg')?.getAttribute('class')).not.toContain('rotate-180');
+    await openMenu(container);
+    expect(chevronOf(container).querySelector('svg')?.getAttribute('class')).toContain('rotate-180');
+  });
+
+  it('click item → onItemClick(key) + menu đóng', async () => {
+    const onItemClick = vi.fn();
+    const { container } = render(<SplitButton label="Lưu" items={items} onItemClick={onItemClick} />);
+    await openMenu(container);
+    await userEvent.click(screen.getByRole('menuitem', { name: 'Lưu nháp' }));
+    expect(onItemClick).toHaveBeenCalledWith('save-draft');
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+  });
+
+  it('click NGOÀI container → menu đóng, onItemClick không gọi', async () => {
+    const onItemClick = vi.fn();
+    const { container } = render(
+      <div>
+        <span data-outside>ngoài</span>
+        <SplitButton label="Lưu" items={items} onItemClick={onItemClick} />
+      </div>,
+    );
+    await openMenu(container);
+    fireEvent.mouseDown(document.querySelector('[data-outside]')!);
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+    expect(onItemClick).not.toHaveBeenCalled();
+  });
+
+  it('ESC → menu đóng (useKeyPress window)', async () => {
+    const { container } = render(<SplitButton label="Lưu" items={items} />);
+    await openMenu(container);
+    fireEvent.keyDown(window, { key: 'Escape' });
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+  });
+
+  it('ArrowDown trên nút → mở menu + focus item đầu (keyboard a11y)', async () => {
+    render(<SplitButton label="Lưu" items={items} />);
+    const btn = screen.getByRole('button', { name: /Lưu/ });
+    btn.focus();
+    fireEvent.keyDown(btn, { key: 'ArrowDown' });
+    await vi.waitFor(() => {
+      expect(screen.queryByRole('menu')).toBeInTheDocument();
+      expect(document.activeElement).toBe(screen.getByRole('menuitem', { name: 'Lưu + chạy' }));
+    });
+  });
+
+  it('click phần label của NÚT → onClick chạy; menu KHÔNG mở (chevron stopPropagation)', async () => {
+    const onClick = vi.fn();
+    render(<SplitButton label="Lưu" items={items} onClick={onClick} />);
+    await userEvent.click(screen.getByRole('button', { name: /Lưu/ }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+  });
+
+  it('MỘT <button> duy nhất — chevron là span TRONG nút, không nút con thứ hai', () => {
+    const { container } = render(<SplitButton label="Lưu" items={items} />);
+    const shell = container.querySelector('span.relative')!;
+    expect(shell.querySelectorAll(':scope > button')).toHaveLength(1); // ĐÚNG 1 nút duy nhất
+    const btn = screen.getByRole('button', { name: /Lưu/ });
+    expect(btn.querySelector('[data-chevron]')).not.toBeNull(); // chevron nằm trong nút
+    expect(btn.className).toContain('rounded-lg'); // một nút bo tròn duy nhất
+  });
+
+  it('tông nút theo type: primary border-accent · default border-line · text transparent', () => {
+    for (const [type, borderCls] of [
+      ['primary', 'border-accent'],
+      ['default', 'border-line'],
+      ['text', 'border-transparent'],
+    ] as const) {
+      const { unmount } = render(<SplitButton label="Lưu" type={type} items={items} />);
+      expect(screen.getByRole('button', { name: /Lưu/ }).className).toContain(borderCls);
+      unmount();
+    }
+  });
+
+  it('danger primary → nút border-st-fail solid đỏ', () => {
+    render(<SplitButton label="Xoá" items={[]} danger />);
+    const btn = screen.getByRole('button', { name: /Xoá/ });
+    expect(btn.className).toContain('border-st-fail');
+    expect(btn.className).toContain('bg-st-fail');
+  });
+
+  it('size đồng bộ Button: small h-8 / middle h-9 (mặc định) / large h-10', () => {
+    for (const [size, h] of [
+      ['small', 'h-8'],
+      ['middle', 'h-9'],
+      ['large', 'h-10'],
+    ] as const) {
+      const { unmount } = render(<SplitButton label="Lưu" size={size} items={items} />);
+      expect(screen.getByRole('button', { name: /Lưu/ }).className).toContain(h);
+      unmount();
+    }
+  });
+});

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

@@ -0,0 +1,49 @@
+// Splitter — drag resize 2 panels (hướng A custom hook, 0 deps).
+import { useCallback, useRef, useState, type ReactNode } from 'react';
+
+export interface SplitterProps {
+  /** Panel trái/trên. */
+  first: ReactNode;
+  /** Panel phải/dưới. */
+  second: ReactNode;
+  direction?: 'horizontal' | 'vertical';
+  /** % panel đầu (mặc định 50). */
+  defaultSize?: number;
+  className?: string;
+}
+
+export function Splitter({ first, second, direction = 'horizontal', defaultSize = 50, className }: SplitterProps) {
+  const [size, setSize] = useState(defaultSize);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const isH = direction === 'horizontal';
+
+  const onDrag = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    const rect = containerRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    const onMove = (me: MouseEvent) => {
+      const pct = isH
+        ? ((me.clientX - rect.left) / rect.width) * 100
+        : ((me.clientY - rect.top) / rect.height) * 100;
+      setSize(Math.min(90, Math.max(10, pct)));
+    };
+    const onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  }, [isH]);
+
+  return (
+    <div ref={containerRef} className={`flex ${isH ? 'flex-row' : 'flex-col'} ${className ?? ''}`}>
+      <div style={isH ? { width: `${size}%` } : { height: `${size}%` }} className="overflow-auto">
+        {first}
+      </div>
+      <div
+        role="separator"
+        aria-orientation={isH ? 'vertical' : 'horizontal'}
+        onMouseDown={onDrag}
+        className={isH ? 'w-1 cursor-col-resize bg-line transition-colors hover:bg-accent' : 'h-1 cursor-row-resize bg-line transition-colors hover:bg-accent'}
+      />
+      <div className="flex-1 overflow-auto">{second}</div>
+    </div>
+  );
+}

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

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Splitter } from './index';
+/** Two-pane drag resizer — horizontal/vertical, percent size. */
+const meta = { title: 'Navigation/Splitter', component: Splitter, tags: ['autodocs'] } satisfies Meta<typeof Splitter>;
+export default meta;
+type S = StoryObj<typeof meta>;
+export const Horizontal: S = {
+  args: { first: <div className="grid h-40 place-items-center bg-s3">Trái</div>, second: <div className="grid h-40 place-items-center bg-s3">Phải</div> },
+};
+
+export const Vertical: S = {
+  name: 'Vertical — direction + defaultSize 30% (drag to resize)',
+  args: {
+    direction: 'vertical',
+    defaultSize: 30,
+    first: <div className="grid h-full place-items-center bg-s3">Trên (30%)</div>,
+    second: <div className="grid h-full place-items-center bg-s3">Dưới</div>,
+  },
+  render: ({ first, second, direction, defaultSize }) => (
+    <div className="h-64 w-full">
+      <Splitter direction={direction} defaultSize={defaultSize} first={first} second={second} />
+    </div>
+  ),
+};

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

@@ -0,0 +1,21 @@
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { Splitter } from './index.js';
+afterEach(cleanup);
+
+describe('Splitter', () => {
+  it('2 panels + separator', () => {
+    render(
+      <Splitter first={<div>Panel 1</div>} second={<div>Panel 2</div>} defaultSize={60} />,
+    );
+    expect(screen.getByText('Panel 1')).toBeInTheDocument();
+    expect(screen.getByText('Panel 2')).toBeInTheDocument();
+    expect(screen.getByRole('separator')).toBeInTheDocument();
+  });
+  it('direction vertical → flex-col', () => {
+    const { container } = render(
+      <Splitter direction="vertical" first={<div>A</div>} second={<div>B</div>} />,
+    );
+    expect(container.firstElementChild).toHaveClass('flex-col');
+  });
+});

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

@@ -0,0 +1,28 @@
+// Statistic — số liệu nổi (antd): title 14 secondary, content 24 semibold tabular,
+// prefix/suffix 16px. Thay StatTile (GIỮ ariaLabel contract — wiring ở activity).
+import type { ReactNode } from 'react';
+
+export interface StatisticProps {
+  title?: ReactNode;
+  value?: ReactNode;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+  /** Node thay thế value (antd valueRender lite). */
+  valueStyle?: React.CSSProperties;
+  className?: string;
+}
+
+export function Statistic({ title, value, prefix, suffix, valueStyle, className }: StatisticProps) {
+  return (
+    <div className={className}>
+      {title && <div className="mb-1 text-body text-ink3">{title}</div>}
+      <div className="flex items-baseline gap-1 text-ink" style={{ fontVariantNumeric: 'tabular-nums' }}>
+        {prefix && <span className="text-h2 font-semibold">{prefix}</span>}
+        <span className="text-2xl font-semibold leading-[1.2]" style={valueStyle}>
+          {value}
+        </span>
+        {suffix && <span className="text-h2 font-semibold">{suffix}</span>}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,112 @@
+// Parity matrix antd→tokens: docs/parity-matrix.md
+// PARITY: antd Statistic (content 24 semibold, title 14 secondary).
+// Stories — Basic / PrefixSuffix / ValueStyle / NodeValue / DarkTheme
+// + KpiRow (dashboard header: trend badges + 1 ô loading skeleton)
+// (component has no loading/disabled prop — don't invent stories).
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Badge } from '../badge/index';
+import { Skeleton } from '../skeleton/index';
+import { Tag } from '../tag/index';
+import { Statistic } from './index';
+
+/** Big-number KPI readout — title, value, prefix/suffix. */
+const meta = {
+  title: 'Data Display/Statistic',
+  component: Statistic,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Statistic>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  name: 'Basic — title + tabular-nums value',
+  render: () => (
+    <div className="flex gap-8">
+      <Statistic title="Total tasks" value={128} />
+      <Statistic title="In progress" value={17} />
+      <Statistic title="Overdue" value={3} />
+    </div>
+  ),
+};
+
+export const PrefixSuffix: Story = {
+  name: 'Prefix + suffix',
+  render: () => (
+    <div className="flex gap-8">
+      <Statistic title="Revenue" prefix="$" value={1284} suffix="USD" />
+      <Statistic title="Progress" value={72} suffix="%" />
+    </div>
+  ),
+};
+
+export const ValueStyle: Story = {
+  name: 'valueStyle — color by status',
+  render: () => (
+    <div className="flex gap-8">
+      <Statistic title="Completed" value={92} valueStyle={{ color: 'var(--st-done)' }} />
+      <Statistic title="Blocked" value={3} valueStyle={{ color: 'var(--st-fail)' }} />
+    </div>
+  ),
+};
+
+export const NodeValue: Story = {
+  name: 'ReactNode value + no title',
+  render: () => (
+    <div className="flex gap-8">
+      <Statistic value={<span>1.2k<i> views</i></span>} />
+      <Statistic title="No prefix/suffix" value={0} />
+    </div>
+  ),
+};
+
+export const DarkTheme: Story = {
+  name: 'Dark theme — ink/suffix follow tokens',
+  render: () => (
+    <div data-bp-theme="dark" className="flex gap-8 rounded-xl bg-s2 p-4">
+      <Statistic title="Total tasks" value={128} />
+      <Statistic title="Overdue" value={3} valueStyle={{ color: 'var(--st-fail)' }} />
+      <Statistic title="Revenue" prefix="$" value={1284} suffix="USD" />
+    </div>
+  ),
+};
+
+// ── Real-world 2026-10-25 — KPI row của dashboard header: 4 Statistic với
+// trend Badge theo token (doanh thu ↑ xanh, chi phí ↓ xanh — giảm là tốt),
+// đơn hàng + completion rate; ô thứ 5 đang fetch → skeleton bones thay số
+// (Skeleton component, KHÔNG prop loading — Statistic không có loading).
+
+export const KpiRow: Story = {
+  name: 'KPI row — dashboard header with trend badges + loading cell',
+  render: () => (
+    <div className="rounded-xl border border-line bg-s2 px-6 py-5">
+      <div className="mb-4 flex items-center gap-2">
+        <span className="text-body font-semibold text-ink">Store performance</span>
+        <Tag>live</Tag>
+      </div>
+      <div className="flex flex-wrap items-start gap-x-10 gap-y-6">
+        <div className="flex flex-col gap-1.5">
+          <Statistic prefix="$" title="Revenue" value={128.4} suffix="k" />
+          <Badge variant="done">↑ 12.4% vs last month</Badge>
+        </div>
+        <div className="flex flex-col gap-1.5">
+          <Statistic prefix="$" title="Ad cost" value={18.2} suffix="k" />
+          <Badge variant="done">↓ 3.1% — under budget</Badge>
+        </div>
+        <div className="flex flex-col gap-1.5">
+          <Statistic title="Orders" value={1284} />
+          <Badge variant="doing">34 shipping now</Badge>
+        </div>
+        <div className="flex flex-col gap-1.5">
+          <Statistic title="Completion rate" value={92} suffix="%" />
+          <Badge variant="done">on track</Badge>
+        </div>
+        {/* Ô đang fetch — skeleton thay số, đúng tỉ lệ title + value */}
+        <div aria-busy="true" aria-label="Loading metric" className="flex flex-col gap-2 pt-1">
+          <Skeleton className="w-16" variant="text" />
+          <Skeleton className="w-24" variant="text" />
+        </div>
+      </div>
+    </div>
+  ),
+};

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

@@ -0,0 +1,39 @@
+// Statistic tests — value/prefix/suffix/title (antd: content 24 semibold).
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { Statistic } from './index.js';
+
+afterEach(cleanup);
+
+describe('Statistic', () => {
+  it('title + value + suffix', () => {
+    render(<Statistic title="Tổng task" value={42} suffix="việc" />);
+    expect(screen.getByText('Tổng task')).toBeInTheDocument();
+    expect(screen.getByText('42')).toHaveClass('text-2xl');
+    expect(screen.getByText('việc')).toBeInTheDocument();
+  });
+
+  it('prefix + valueStyle', () => {
+    render(<Statistic prefix="$" value={9} valueStyle={{ color: 'var(--st-done)' }} />);
+    expect(screen.getByText('$')).toBeInTheDocument();
+    expect(screen.getByText('9')).toHaveStyle({ color: 'var(--st-done)' });
+  });
+
+  it('không title → không render title div; không suffix/prefix → không span', () => {
+    render(<Statistic value={7} />);
+    expect(screen.getByText('7')).toBeInTheDocument();
+    expect(screen.queryByText(/Tổng|task/i)).toBeNull();
+  });
+
+  it('value là ReactNode → render nguyên node', () => {
+    render(<Statistic value={<b data-testid="node">1.234</b>} />);
+    expect(screen.getByTestId('node')).toBeInTheDocument();
+  });
+
+  it('className passthrough lên root; giá trị dùng tabular-nums', () => {
+    const { container } = render(<Statistic value={5} className="marker" />);
+    expect(container.firstElementChild).toHaveClass('marker');
+    const flex = container.querySelector<HTMLElement>('[style*="tabular-nums"]');
+    expect(flex).not.toBeNull();
+  });
+});

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

@@ -0,0 +1,50 @@
+// Steps — tiến trình (antd lite horizontal): done = chấm accent + tick, current =
+// viền accent + chữ accent, waiting = ink3; connector line giữa các step.
+import type { ReactNode } from 'react';
+import { Icon } from '../icons/index.js';
+
+export interface StepItem {
+  title: ReactNode;
+  description?: ReactNode;
+}
+
+export interface StepsProps {
+  items: StepItem[];
+  /** Index step hiện tại — < i là done, === i là current, > i là waiting. */
+  current: number;
+  className?: string;
+}
+
+export function Steps({ items, current, className }: StepsProps) {
+  return (
+    <ol className={`m-0 flex list-none gap-0 p-0${className ? ` ${className}` : ''}`}>
+      {items.map((step, i) => {
+        const state = i < current ? 'done' : i === current ? 'current' : 'waiting';
+        const dot =
+          state === 'done' ? (
+            <span data-testid="step-done" className="grid size-7 place-items-center rounded-pill border border-accent bg-accent text-[11px] font-bold text-white">
+              <Icon name="check" size={12} />
+            </span>
+          ) : state === 'current' ? (
+            <span className="grid size-7 place-items-center rounded-pill border-2 border-accent text-[11px] font-bold text-accent">
+              {i + 1}
+            </span>
+          ) : (
+            <span className="grid size-7 place-items-center rounded-pill border border-line text-[11px] font-bold text-ink3">
+              {i + 1}
+            </span>
+          );
+        const titleColor = state === 'waiting' ? 'text-ink3' : state === 'current' ? 'text-accent' : 'text-ink';
+        return (
+          <li key={i} aria-current={state === 'current' ? 'step' : undefined} className={`flex flex-1 items-start gap-2 ${i < items.length - 1 ? 'after:mx-3 after:mt-3.5 after:h-px after:flex-1 after:bg-line2 after:content-[""]' : ''}`}>
+            {dot}
+            <div className="flex flex-col">
+              <span className={`text-body font-medium ${titleColor}`}>{step.title}</span>
+              {step.description && <span className="text-label text-ink3">{step.description}</span>}
+            </div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}