create-wakii-stack 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ColorPicker } from './index';
+
+const meta = { title: 'Forms/ColorPicker', component: ColorPicker, tags: ['autodocs'] } satisfies Meta<typeof ColorPicker>;
+export default meta;
+type S = StoryObj<typeof meta>;
+
+/** Basic — default value + preset grid. */
+export const Basic: S = { args: { value: '#1677ff' } };
+
+/** CustomPresets — custom color list via presets prop. */
+export const CustomPresets: S = {
+  name: 'Custom presets',
+  args: { value: '#00b96b', presets: ['#00b96b', '#8adaa3', '#ffd666', '#ff9c6e'] },
+};
+
+/** Controlled — useState demo: pick a preset / native / hex → swatch follows value. */
+export const Controlled: S = {
+  render: () => <ColorPickerControlledDemo />,
+};
+
+/** Empty — presets=[]: palette falls back to native color + hex input only. */
+export const Empty: S = {
+  args: { value: '#722ed1', presets: [] },
+};
+
+/** DarkTheme — swatch + palette on dark canvas. */
+export const DarkTheme: S = {
+  render: () => (
+    <div data-bp-theme="dark" className="rounded-xl bg-canvas p-4">
+      <div className="grid max-w-[220px] gap-3">
+        <ColorPicker value="#828fff" onChange={() => {}} />
+        <p className="m-0 text-meta text-ink3">Open the palette to see swatches and borders on dark.</p>
+      </div>
+    </div>
+  ),
+};
+
+function ColorPickerControlledDemo() {
+  const [v, setV] = useState('#1677ff');
+  return (
+    <div className="grid max-w-[220px] gap-3">
+      <ColorPicker value={v} onChange={setV} />
+      <p className="m-0 font-mono text-meta text-ink3">value: <strong className="text-ink">{v}</strong></p>
+    </div>
+  );
+}

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

@@ -0,0 +1,68 @@
+import { cleanup, render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { ColorPicker } from './index.js';
+afterEach(cleanup);
+
+describe('ColorPicker', () => {
+  it('swatch button mở palette; preset click → onChange', async () => {
+    const onChange = vi.fn();
+    render(<ColorPicker value="#1677ff" onChange={onChange} />);
+    await userEvent.setup().click(screen.getByLabelText('Chọn màu'));
+    await userEvent.setup().click(screen.getByLabelText('#f5222d'));
+    expect(onChange).toHaveBeenCalledWith('#f5222d');
+  });
+  it('native color input + hex display (mở palette)', async () => {
+    const user = userEvent.setup();
+    render(<ColorPicker value="#1677ff" onChange={vi.fn()} />);
+    await user.click(screen.getByLabelText('Chọn màu'));
+    const colorInput = document.querySelector('input[type="color"]');
+    expect(colorInput).not.toBeNull();
+  });
+});
+
+describe('ColorPicker — matrix (props thật: value/onChange/presets/className)', () => {
+  it('uncontrolled — không value → default #1677ff hiển thị trên swatch', () => {
+    render(<ColorPicker onChange={vi.fn()} />);
+    expect(screen.getByLabelText('Chọn màu')).toHaveStyle({ background: '#1677ff' });
+  });
+
+  it('native input[type=color] đổi → onChange nhận giá trị', async () => {
+    const onChange = vi.fn();
+    render(<ColorPicker value="#1677ff" onChange={onChange} />);
+    await userEvent.setup().click(screen.getByLabelText('Chọn màu'));
+    fireEvent.change(document.querySelector('input[type="color"]')!, { target: { value: '#123456' } });
+    expect(onChange).toHaveBeenCalledWith('#123456');
+  });
+
+  it('hex text input đổi → onChange nhận chuỗi gõ', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<ColorPicker value="#1677ff" onChange={onChange} />);
+    await user.click(screen.getByLabelText('Chọn màu'));
+    // controlled input (value từ prop, không setState trong test) → fireEvent.change 1 phát
+    fireEvent.change(screen.getByLabelText('Custom color').parentElement!.querySelector('input[type="text"]')!, { target: { value: '#abc' } });
+    expect(onChange).toHaveBeenLastCalledWith('#abc');
+  });
+
+  it('presets custom render đúng danh sách; empty → không preset nào', async () => {
+    const user = userEvent.setup();
+    const { rerender } = render(<ColorPicker value="#1677ff" presets={['#111111', '#222222']} />);
+    await user.click(screen.getByLabelText('Chọn màu'));
+    expect(screen.getByLabelText('#111111')).toBeInTheDocument();
+    expect(screen.getByLabelText('#222222')).toBeInTheDocument();
+    rerender(<ColorPicker value="#1677ff" presets={[]} />);
+    expect(screen.queryByLabelText('#111111')).toBeNull();
+  });
+
+  it('bấm trigger lần nữa → palette đóng (toggle); className passthrough', async () => {
+    const user = userEvent.setup();
+    const { container } = render(<ColorPicker value="#1677ff" className="marker" />);
+    expect(container.firstElementChild).toHaveClass('marker');
+    const trigger = screen.getByLabelText('Chọn màu');
+    await user.click(trigger);
+    expect(document.querySelector('input[type="color"]')).not.toBeNull();
+    await user.click(trigger);
+    expect(document.querySelector('input[type="color"]')).toBeNull();
+  });
+});

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

@@ -0,0 +1,38 @@
+// ColorPicker — swatch grid + native input[type=color] fallback + hex display.
+import { useState } from 'react';
+
+const PRESETS = ['#1677ff', '#722ed1', '#13c2c2', '#52c41a', '#fa8c16', '#f5222d', '#eb2f96', '#faad14'];
+
+export interface ColorPickerProps {
+  value?: string;
+  onChange?: (hex: string) => void;
+  presets?: string[];
+  className?: string;
+}
+
+export function ColorPicker({ value = '#1677ff', onChange, presets = PRESETS, className }: ColorPickerProps) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className={`inline-flex flex-col gap-2${className ? ` ${className}` : ''}`}>
+      <button type="button" aria-label="Chọn màu" onClick={() => setOpen((o) => !o)}
+        className="size-8 cursor-pointer rounded-lg border border-line shadow-[var(--ele-1)] transition-[box-shadow,border-color] duration-200 ease-[var(--ease-smooth)] hover:shadow-[var(--ele-2)] focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:outline-none" style={{ background: value }} />
+      {open && (
+        <div className="relative z-[var(--z-popover)] inline-flex flex-col gap-2 rounded-xl border border-line bg-s2 bg-[image:var(--wash)] p-3 shadow-[var(--shadow-pop),var(--ele-3)]">
+          <div className="grid grid-cols-4 gap-1">
+            {presets.map((c, i) => (
+              <button key={c} type="button" aria-label={c} onClick={() => onChange?.(c)}
+                style={{ background: c, animationDelay: `${Math.min(i, 12) * 24}ms` }}
+                className={`size-7 cursor-pointer rounded-lg border transition-[border-color,box-shadow,transform] duration-200 ease-[var(--ease-smooth)] animate-[bp-slide-up-in_240ms_var(--ease-smooth)_backwards] hover:-translate-y-px hover:shadow-[var(--ele-2)] focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:outline-none ${value === c ? 'border-accent border-2' : 'border-line'}`} />
+            ))}
+          </div>
+          <div className="flex items-center gap-2">
+            <input type="color" value={value} onChange={(e) => onChange?.(e.target.value)}
+              className="size-7 cursor-pointer rounded-1 border border-line" aria-label="Custom color" />
+            <input type="text" value={value} onChange={(e) => onChange?.(e.target.value)}
+              className="h-7 flex-1 rounded-1 border border-line bg-s3 px-2 text-meta text-ink tabular-nums transition-[background-color,border-color,box-shadow] duration-200 ease-[var(--ease-smooth)] focus:border-accent-hi focus:bg-s1 focus:outline-none" />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,73 @@
+// ContextMenu stories — right-click menu (items + separator '---' + danger/disabled).
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ContextMenu, type ContextMenuItem } from './index';
+
+/** Right-click menu positioned at the pointer, full keyboard nav. */
+const meta = { title: 'Navigation/ContextMenu', tags: ['autodocs'] } satisfies Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const items: ContextMenuItem[] = [
+  { key: 'open', label: 'Open task' },
+  { key: 'rename', label: 'Rename' },
+  { key: '---', label: '' },
+  { key: 'copy', label: 'Copy link' },
+  { key: 'archive', label: 'Archive', disabled: true },
+  { key: 'delete', label: 'Delete', danger: true },
+];
+
+export const Basic: Story = {
+  name: 'Basic — right-click the frame',
+  render: () => (
+    <ContextMenu items={items} className="grid h-40 place-items-center rounded-xl border border-dashed border-line bg-s3 text-ink3">
+      Right-click here to open the menu
+    </ContextMenu>
+  ),
+};
+
+function WithActionsDemo() {
+  const [last, setLast] = useState<string | null>(null);
+  return (
+    <div className="flex flex-col gap-3">
+      <span className="text-meta text-ink2">Last action: {last ?? '—'}</span>
+      <ContextMenu items={items} onItemClick={setLast} className="grid h-40 place-items-center rounded-xl border border-dashed border-line bg-s3 text-ink3">
+        Right-click → pick an item (ESC/outside click closes)
+      </ContextMenu>
+    </div>
+  );
+}
+
+export const WithActions: Story = {
+  name: 'With actions — onItemClick shows the choice',
+  render: () => <WithActionsDemo />,
+};
+
+export const WithKeyboardNav: Story = {
+  name: 'WithKeyboardNav — ArrowUp/Down cycles, Home/End jumps',
+  render: () => (
+    <ContextMenu items={items} className="grid h-40 place-items-center rounded-xl border border-dashed border-line bg-s3 text-ink3">
+      Right-click to open → ArrowDown/Up moves between items (skips disabled), Home/End first/last
+    </ContextMenu>
+  ),
+};
+
+export const Empty: Story = {
+  name: 'Empty — items=[] still opens an empty menu',
+  render: () => (
+    <ContextMenu items={[]} className="grid h-40 place-items-center rounded-xl border border-dashed border-line bg-s3 text-ink3">
+      Right-click → empty menu
+    </ContextMenu>
+  ),
+};
+
+export const DarkTheme: Story = {
+  name: 'DarkTheme — menu bg-s2 + dark border-line',
+  render: () => (
+    <div data-bp-theme="dark" className="p-4">
+      <ContextMenu items={items} className="grid h-40 place-items-center rounded-xl border border-dashed border-line bg-s3 text-ink3">
+        Right-click inside the dark scope
+      </ContextMenu>
+    </div>
+  ),
+};

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

@@ -0,0 +1,93 @@
+// ContextMenu tests — mở/đóng, item click, divider, danger/disabled, keyboard nav, edge items rỗng.
+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 { ContextMenu, type ContextMenuItem } from './index.js';
+afterEach(cleanup);
+const ITEMS: ContextMenuItem[] = [
+  { key: 'edit', label: 'Sửa' },
+  { key: '---', label: '' },
+  { key: 'del', label: 'Xoá', danger: true },
+  { key: 'lock', label: 'Khoá', disabled: true },
+];
+
+const openMenu = (onItemClick?: (k: string) => void) => {
+  render(<ContextMenu items={ITEMS} onItemClick={onItemClick}><div>T</div></ContextMenu>);
+  fireEvent.contextMenu(screen.getByText('T'));
+  return screen.getByRole('menu');
+};
+
+describe('ContextMenu', () => {
+  it('right-click → menu; item click → callback + đóng; ESC đóng', async () => {
+    const onItemClick = vi.fn();
+    const user = userEvent.setup();
+    render(<ContextMenu items={ITEMS} onItemClick={onItemClick}><div>T</div></ContextMenu>);
+    fireEvent.contextMenu(screen.getByText('T'));
+    expect(screen.getByRole('menu')).toBeInTheDocument();
+    await user.click(screen.getByText('Sửa'));
+    expect(onItemClick).toHaveBeenCalledWith('edit');
+    expect(screen.queryByRole('menu')).toBeNull();
+    fireEvent.contextMenu(screen.getByText('T'));
+    await user.keyboard('{Escape}');
+    expect(screen.queryByRole('menu')).toBeNull();
+  });
+
+  it('a11y: role=menu + role=menuitem; disabled có aria-disabled', () => {
+    openMenu();
+    expect(screen.getByRole('menuitem', { name: 'Sửa' })).toBeInTheDocument();
+    expect(screen.getByRole('menuitem', { name: 'Khoá' })).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('divider key --- → li phân tách, không phải menuitem', () => {
+    openMenu();
+    const menu = screen.getByRole('menu');
+    expect(menu.querySelectorAll('li')).toHaveLength(4);
+    expect(screen.queryByRole('menuitem', { name: '' })).toBeNull();
+  });
+
+  it('danger item → class text-st-fail', () => {
+    openMenu();
+    expect(screen.getByRole('menuitem', { name: 'Xoá' }).className).toContain('text-st-fail');
+  });
+
+  it('disabled item → không gọi callback + đóng giữ menu', async () => {
+    const onItemClick = vi.fn();
+    const user = userEvent.setup();
+    openMenu(onItemClick);
+    const lock = screen.getByRole('menuitem', { name: 'Khoá' }) as HTMLButtonElement;
+    expect(lock.disabled).toBe(true);
+    await user.click(lock);
+    expect(onItemClick).not.toHaveBeenCalled();
+  });
+
+  it('click ngoài menu → đóng', () => {
+    openMenu();
+    fireEvent.click(document.body);
+    expect(screen.queryByRole('menu')).toBeNull();
+  });
+
+  it('ArrowDown/ArrowUp đi vòng (bỏ disabled); từ chưa focus ArrowDown → item đầu', () => {
+    openMenu();
+    const menu = screen.getByRole('menu');
+    fireEvent.keyDown(menu, { key: 'ArrowDown' });
+    expect(screen.getByRole('menuitem', { name: 'Sửa' })).toHaveFocus();
+    fireEvent.keyDown(menu, { key: 'ArrowDown' });
+    expect(screen.getByRole('menuitem', { name: 'Xoá' })).toHaveFocus(); // bỏ Khoá disabled
+    fireEvent.keyDown(menu, { key: 'ArrowUp' });
+    expect(screen.getByRole('menuitem', { name: 'Sửa' })).toHaveFocus();
+    fireEvent.keyDown(menu, { key: 'ArrowUp' });
+    expect(screen.getByRole('menuitem', { name: 'Xoá' })).toHaveFocus(); // vòng cuối
+    fireEvent.keyDown(menu, { key: 'Home' });
+    expect(screen.getByRole('menuitem', { name: 'Sửa' })).toHaveFocus();
+    fireEvent.keyDown(menu, { key: 'End' });
+    expect(screen.getByRole('menuitem', { name: 'Xoá' })).toHaveFocus();
+  });
+
+  it('items rỗng → menu vẫn mở (ul trống), keyboard không lỗi', () => {
+    render(<ContextMenu items={[]}><div>T</div></ContextMenu>);
+    fireEvent.contextMenu(screen.getByText('T'));
+    const menu = screen.getByRole('menu');
+    expect(menu.querySelectorAll('button')).toHaveLength(0);
+    expect(() => fireEvent.keyDown(menu, { key: 'ArrowDown' })).not.toThrow();
+  });
+});

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

@@ -0,0 +1,79 @@
+// ContextMenu — right-click menu (position theo mouse).
+// A11y: role=menu/menuitem, ArrowUp/Down/Home/End đi giữa item (pattern dropdown),
+// ESC/click ngoài đóng.
+import { useEffect, useRef, useState, type KeyboardEvent as ReactKeyboardEvent, type ReactNode } from 'react';
+
+export interface ContextMenuItem {
+  /** Khóa định danh — '---' render divider. */
+  key: string;
+  label: ReactNode;
+  /** Item đỏ (hành động phá hủy). */
+  danger?: boolean;
+  disabled?: boolean;
+}
+
+export interface ContextMenuProps {
+  /** Item menu — key '---' render divider. */
+  items: ContextMenuItem[];
+  /** Vùng bắt right-click. */
+  children: ReactNode;
+  /** Callback khi chọn item. */
+  onItemClick?: (key: string) => void;
+  className?: string;
+}
+
+export function ContextMenu({ items, children, onItemClick, className }: ContextMenuProps) {
+  const [pos, setPos] = useState<{ x: number; y: number } | null>(null);
+  const ref = useRef<HTMLDivElement>(null);
+  const menuRef = useRef<HTMLUListElement>(null);
+
+  // Menu keyboard: ArrowUp/Down vòng tròn, Home/End đầu/cuối (bỏ item disabled)
+  const onMenuKey = (e: ReactKeyboardEvent<HTMLUListElement>) => {
+    const buttons = Array.from(
+      menuRef.current?.querySelectorAll<HTMLButtonElement>('button[role="menuitem"]:not([disabled])') ?? [],
+    );
+    if (buttons.length === 0) return;
+    const idx = buttons.indexOf(document.activeElement as HTMLButtonElement);
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      buttons[(idx + 1) % buttons.length].focus();
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      buttons[(idx - 1 + buttons.length) % buttons.length].focus();
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      buttons[0].focus();
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      buttons[buttons.length - 1].focus();
+    }
+  };
+  useEffect(() => {
+    if (!pos) return;
+    const close = () => setPos(null);
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setPos(null); };
+    document.addEventListener('click', close);
+    document.addEventListener('contextmenu', close);
+    document.addEventListener('keydown', onKey);
+    return () => { document.removeEventListener('click', close); document.removeEventListener('contextmenu', close); document.removeEventListener('keydown', onKey); };
+  }, [pos]);
+  return (
+    <div ref={ref} className={className} onContextMenu={(e) => { e.preventDefault(); setPos({ x: e.clientX, y: e.clientY }); }}>
+      {children}
+      {pos && (
+        <ul ref={menuRef} role="menu" onKeyDown={onMenuKey} className="fixed z-[var(--z-dropdown)] m-0 w-max min-w-[180px] max-w-[calc(100vw-16px)] origin-top-left list-none rounded-xl border border-line bg-s2 p-1 shadow-[var(--shadow-pop)] animate-[bp-zoom-in_var(--motion-fast)_var(--ease-enter)]" style={{ left: pos.x, top: pos.y }}>
+          {items.map((item) => item.key === '---' ? (
+            <li key={item.key} className="my-1 border-t border-line2" />
+          ) : (
+            <li key={item.key}>
+              <button type="button" role="menuitem" aria-disabled={item.disabled || undefined} disabled={item.disabled} onClick={() => { onItemClick?.(item.key); setPos(null); }}
+                className={`w-full cursor-pointer rounded-lg border-none bg-transparent px-3 py-1.5 text-left text-body transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ${item.danger ? 'text-st-fail hover:bg-st-fail/12 active:bg-st-fail/12' : 'text-ink hover:bg-s3 active:bg-s3'} ${item.disabled ? 'cursor-not-allowed text-ink3' : ''}`}>
+                {item.label}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,80 @@
+// CountUp stories — rAF ease-out counters. Reload the story (or press the
+// live-update buttons) to replay the animation.
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '../button/index.js';
+import { Statistic } from '../statistic/index.js';
+import { CountUp } from './index';
+
+// Meta WITHOUT `component` — value is a required prop, CSF would force args on
+// render-only stories (image.stories pattern).
+const meta = { title: 'Theming & Motion/CountUp', tags: ['autodocs'] } satisfies Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Basic — integer count over 1.2s (default duration). */
+export const Basic: Story = {
+  name: 'Basic — 0 → 482 over 1.2s',
+  render: () => (
+    <p className="m-0 text-3xl font-semibold text-ink">
+      <CountUp value={482} />
+    </p>
+  ),
+};
+
+/** Decimals — fractional value rendered with fixed precision. */
+export const Decimals: Story = {
+  name: 'Decimals — 3.14159 at 2 decimals',
+  render: () => (
+    <p className="m-0 text-3xl font-semibold text-ink">
+      <CountUp value={3.14159} decimals={2} duration={0.8} />
+      <span className="ml-2 text-base font-normal text-ink3">km</span>
+    </p>
+  ),
+};
+
+/** Format — custom formatter (vi-VN grouping) around the rounded number. */
+export const Format: Story = {
+  name: 'Format — vi-VN thousand grouping',
+  render: () => (
+    <p className="m-0 text-3xl font-semibold text-ink">
+      <CountUp value={1284000} duration={1.5} format={(n) => n.toLocaleString('vi-VN')} />
+      <span className="ml-2 text-base font-normal text-ink3">₫</span>
+    </p>
+  ),
+};
+
+/** InStatistic — CountUp as the value of a Statistic (dashboard pairing). */
+export const InStatistic: Story = {
+  name: 'In Statistic — dashboard pairing',
+  render: () => (
+    <div className="grid max-w-md grid-cols-2 gap-4">
+      <Statistic title="Tasks completed" value={<CountUp value={1284} />} suffix="tasks" />
+      <Statistic title="On-time rate" value={<CountUp value={96.4} decimals={1} />} suffix="%" prefix="↑" />
+    </div>
+  ),
+};
+
+/** LiveUpdate — changing value animates from the currently shown number. */
+export const LiveUpdate: Story = {
+  name: 'Live update — value changes re-animate from current',
+  render: () => <LiveUpdateDemo />,
+};
+
+function LiveUpdateDemo() {
+  const [value, setValue] = useState(500);
+  return (
+    <div className="flex max-w-sm flex-col gap-3">
+      <p className="m-0 text-3xl font-semibold text-ink">
+        <CountUp value={value} duration={0.6} />
+      </p>
+      <div className="flex gap-2">
+        <Button onClick={() => setValue((v) => Math.max(0, v - 250))}>− 250</Button>
+        <Button type="primary" onClick={() => setValue((v) => v + 250)}>
+          + 250
+        </Button>
+      </div>
+      <p className="m-0 text-meta text-ink3">Each press counts from the number currently on screen — no jump cut.</p>
+    </div>
+  );
+}

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

@@ -0,0 +1,121 @@
+// CountUp tests — rAF stub chạy frame thủ công: giá trị cuối đúng, ease-out
+// (giữa đường > nửa), duration respect, decimals/format, onDone đúng 1 lần,
+// value đổi giữa chừng animate tiếp từ số cũ, unmount huỷ frame.
+import { act, cleanup, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { CountUp } from './index.js';
+
+/** rAF thủ công — frame(now) chạy toàn bộ callback pending (id mới chạy frame sau).
+ * Bọc `act` để setState từ callback flush vào DOM ngay (rAF ngoài act không flush). */
+function stubRaf() {
+  const pending = new Map<number, FrameRequestCallback>();
+  let nextId = 1;
+  vi.stubGlobal('requestAnimationFrame', vi.fn((cb: FrameRequestCallback) => {
+    const id = nextId++;
+    pending.set(id, cb);
+    return id;
+  }));
+  vi.stubGlobal('cancelAnimationFrame', vi.fn((id: number) => {
+    pending.delete(id);
+  }));
+  return {
+    frame(now: number) {
+      act(() => {
+        const cbs = [...pending.values()];
+        pending.clear();
+        cbs.forEach((cb) => cb(now));
+      });
+    },
+    pendingCount: () => pending.size,
+  };
+}
+
+beforeEach(() => {
+  vi.unstubAllGlobals();
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+describe('CountUp', () => {
+  it('khởi động từ 0, còn frame pending', () => {
+    const raf = stubRaf();
+    render(<CountUp value={1000} duration={1} />);
+    expect(screen.getByText('0')).toBeInTheDocument();
+    expect(raf.pendingCount()).toBe(1);
+  });
+
+  it('ease-out: giữa đường (t=0.5) đã đạt 875 > nửa quãng đường', () => {
+    const raf = stubRaf();
+    render(<CountUp value={1000} duration={1} />);
+    raf.frame(0); // đặt mốc start, t = 0 → '0'
+    expect(screen.getByText('0')).toBeInTheDocument();
+    raf.frame(500); // t = 0.5 → eased = 1 − 0.5³ = 0.875 → '875'
+    expect(screen.getByText('875')).toBeInTheDocument();
+  });
+
+  it('duration respect: t<1 chưa chạm đích; t>=1 chạm + onDone đúng 1 lần', () => {
+    const raf = stubRaf();
+    const onDone = vi.fn();
+    render(<CountUp value={1000} duration={1} onDone={onDone} />);
+    raf.frame(0); // start = 0, t = 0 → '0'
+    expect(screen.getByText('0')).toBeInTheDocument();
+    raf.frame(200); // t = 0.2 → eased ≈ 0.488 → chưa đích
+    expect(screen.getByText('488')).toBeInTheDocument();
+    raf.frame(1000); // t = 1 → '1000' + onDone
+    expect(screen.getByText('1000')).toBeInTheDocument();
+    expect(onDone).toHaveBeenCalledTimes(1);
+    expect(raf.pendingCount()).toBe(0); // xong → không còn frame
+    raf.frame(2000); // frame thừa — không setState thêm
+    expect(onDone).toHaveBeenCalledTimes(1);
+  });
+
+  it('decimals=2 → hiển thị 2 chữ số thập phân', () => {
+    const raf = stubRaf();
+    render(<CountUp value={3.14159} duration={1} decimals={2} />);
+    raf.frame(0);
+    raf.frame(1000);
+    expect(screen.getByText('3.14')).toBeInTheDocument();
+  });
+
+  it('format callback → chuỗi tuỳ ý (đơn vị)', () => {
+    const raf = stubRaf();
+    render(<CountUp value={1000} duration={1} format={(n) => `${n} tasks`} />);
+    raf.frame(0);
+    raf.frame(1000);
+    expect(screen.getByText('1000 tasks')).toBeInTheDocument();
+  });
+
+  it('value đổi giữa chừng → animate tiếp từ số đang hiển thị', () => {
+    const raf = stubRaf();
+    const { rerender } = render(<CountUp value={1000} duration={1} />);
+    raf.frame(0);
+    raf.frame(1000); // xong vòng 1 → '1000'
+    expect(screen.getByText('1000')).toBeInTheDocument();
+    rerender(<CountUp value={2000} duration={1} />);
+    raf.frame(1000); // frame mới, start lại — t = 0 → vẫn '1000'
+    expect(screen.getByText('1000')).toBeInTheDocument();
+    raf.frame(1500); // t = 0.5 → 1000 + 1000×0.875 = 1875
+    expect(screen.getByText('1875')).toBeInTheDocument();
+    raf.frame(2000);
+    expect(screen.getByText('2000')).toBeInTheDocument();
+  });
+
+  it('unmount → huỷ frame pending (không chạy sau unmount)', () => {
+    const raf = stubRaf();
+    const { unmount } = render(<CountUp value={1000} duration={1} />);
+    expect(raf.pendingCount()).toBe(1);
+    unmount();
+    expect(raf.pendingCount()).toBe(0);
+    expect(() => raf.frame(0)).not.toThrow();
+  });
+
+  it('duration=0 → chạm đích ngay frame đầu', () => {
+    const raf = stubRaf();
+    render(<CountUp value={42} duration={0} />);
+    raf.frame(0);
+    expect(screen.getByText('42')).toBeInTheDocument();
+  });
+});