create-wakii-stack 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,99 @@
+// Checkbox tests — toggle/disabled/label-click.
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Checkbox } from './index.js';
+
+afterEach(cleanup);
+
+describe('Checkbox', () => {
+  it('click label → onChange(checked đảo)', async () => {
+    const onChange = vi.fn();
+    render(<Checkbox onChange={onChange}>Nhớ tôi</Checkbox>);
+    await userEvent.setup().click(screen.getByText('Nhớ tôi'));
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it('checked → input checked', () => {
+    render(<Checkbox checked onChange={vi.fn()} />);
+    expect(screen.getByRole('checkbox')).toBeChecked();
+  });
+
+  it('disabled → không đổi', async () => {
+    const onChange = vi.fn();
+    render(<Checkbox disabled onChange={onChange}>x</Checkbox>);
+    await userEvent.setup().click(screen.getByRole('checkbox'));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
+
+describe('Checkbox — branch phụ', () => {
+  it('checked ban đầu + onChange undefined → click không crash', async () => {
+    render(<Checkbox checked>ro</Checkbox>);
+    await userEvent.setup().click(screen.getByRole('checkbox'));
+    expect(screen.getByRole('checkbox')).toBeChecked();
+  });
+
+  it('className passthrough (label wrapper)', () => {
+    render(<Checkbox className="marker">x</Checkbox>);
+    expect(screen.getByText('x')).toHaveClass('marker');
+  });
+});
+
+describe('Checkbox — matrix gaps (disabled/controlled/className)', () => {
+  it('disabled → không toggle được, không gọi onChange', async () => {
+    const onChange = vi.fn();
+    render(<Checkbox disabled onChange={onChange}>Khoá</Checkbox>);
+    const box = screen.getByRole('checkbox');
+    expect(box).toBeDisabled();
+    await userEvent.setup().click(box);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('controlled — checked prop điều khiển hiển thị', () => {
+    const { rerender } = render(<Checkbox checked={false} onChange={vi.fn()}>c</Checkbox>);
+    expect(screen.getByRole('checkbox')).not.toBeChecked();
+    rerender(<Checkbox checked onChange={vi.fn()}>c</Checkbox>);
+    expect(screen.getByRole('checkbox')).toBeChecked();
+  });
+});
+
+
+describe('Checkbox — tri-state (PrimeReact parity, 2026-10-18)', () => {
+  it('checked={null} → aria-checked="mixed" + dash indeterminate, tick ẩn', () => {
+    const { container } = render(<Checkbox checked={null} onChange={vi.fn()}>Chọn một phần</Checkbox>);
+    const box = screen.getByRole('checkbox');
+    expect(box).toHaveAttribute('aria-checked', 'mixed');
+    expect(box.className).toContain('bg-accent'); // nền accent khi tri
+    const marks = Array.from(container.querySelectorAll('span[aria-hidden="true"]'));
+    // dash = span chứa thanh bar; tick = span chứa SVG Icon 'check'
+    const dash = marks.find((el) => el.querySelector('span.bg-white'));
+    const tick = marks.find((el) => el.querySelector('svg'));
+    expect(dash).toBeDefined();
+    expect(dash!).toHaveClass('grid');
+    expect(tick).toBeDefined();
+    expect(tick!).toHaveClass('hidden');
+  });
+
+  it('prop indeterminate → mixed (đè checked=false — antd compat)', () => {
+    render(<Checkbox checked={false} indeterminate onChange={vi.fn()} />);
+    expect(screen.getByRole('checkbox')).toHaveAttribute('aria-checked', 'mixed');
+  });
+
+  it('checked={true} → aria-checked="true" + tick grid; checked={false} → "false" + dash ẩn', () => {
+    const { container, rerender } = render(<Checkbox checked onChange={vi.fn()} />);
+    expect(screen.getByRole('checkbox')).toHaveAttribute('aria-checked', 'true');
+    rerender(<Checkbox checked={false} onChange={vi.fn()} />);
+    expect(screen.getByRole('checkbox')).toHaveAttribute('aria-checked', 'false');
+    const marks = Array.from(container.querySelectorAll('span[aria-hidden="true"]'));
+    const dash = marks.find((el) => el.querySelector('span.bg-white'))!;
+    expect(dash).toHaveClass('hidden');
+  });
+
+  it('click khi tri-state → onChange(true) (native uncheck→check)', async () => {
+    const onChange = vi.fn();
+    render(<Checkbox checked={null} onChange={onChange}>Tri</Checkbox>);
+    await userEvent.setup().click(screen.getByRole('checkbox'));
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+});

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

@@ -0,0 +1,52 @@
+// Checkbox — antd look: 16×16 radius 4, checked = nền accent + tick SVG (Icon
+// 'check' — user feedback 2026-10-23: ký tự ✓ text mảnh tùy font, không đẹp); label
+// children bọc <label> (click cả chữ); disabled.
+// Tri-state (PrimeReact triStateCheckbox parity): checked = boolean | null —
+// null = indeterminate (nền accent + dash —, aria-checked="mixed"); prop
+// `indeterminate` override kiểu antd. Parent điều khiển cycle true → null → false.
+import type { InputHTMLAttributes, ReactNode } from 'react';
+import { Icon } from '../icons/index.js';
+
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'onChange'> {
+  /** true / false / null (null = indeterminate — dash + aria-checked mixed). */
+  checked?: boolean | null;
+  onChange?: (checked: boolean) => void;
+  /** Override indeterminate kiểu antd (đè lên checked === null). */
+  indeterminate?: boolean;
+  disabled?: boolean;
+  children?: ReactNode;
+  className?: string;
+}
+
+export function Checkbox({ checked = false, indeterminate = false, onChange, disabled = false, children, className, ...rest }: CheckboxProps) {
+  const tri = indeterminate || checked === null;
+  const inputChecked = checked === true;
+  return (
+    <label className={`inline-flex cursor-pointer items-center gap-2 text-body text-ink${disabled ? ' cursor-not-allowed text-ink3' : ''}${className ? ` ${className}` : ''}`}>
+      <input
+        type="checkbox"
+        checked={inputChecked}
+        disabled={disabled}
+        onChange={(e) => onChange?.(e.target.checked)}
+        aria-checked={tri ? 'mixed' : inputChecked}
+        {...rest}
+        className={`peer size-4 cursor-pointer appearance-none rounded-[4px] border border-line bg-s2 shadow-[var(--ele-1)] transition-[background-color,border-color,box-shadow,transform] duration-200 ease-[var(--ease-smooth)] hover:border-ink/20 checked:border-accent checked:bg-accent checked:scale-[1.15] checked:shadow-none focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-s3 disabled:shadow-none disabled:checked:bg-ink3 disabled:checked:scale-100 ${tri ? 'border-accent bg-accent shadow-none' : ''}`}
+      />
+      {/* tick — chỉ khi checked thật (không hiện khi indeterminate) */}
+      <span
+        aria-hidden="true"
+        className={`-ml-5 hidden size-4 place-items-center text-[10px] font-bold text-white ${inputChecked && !tri ? 'grid peer-checked:grid peer-checked:animate-[bp-check-pop_160ms_cubic-bezier(0.34,1.56,0.64,1)]' : ''}`}
+      >
+        <Icon name="check" size={12} />
+      </span>
+      {/* dash indeterminate — nền accent, không animation pop */}
+      <span
+        aria-hidden="true"
+        className={`-ml-5 size-4 items-center justify-center text-[10px] font-bold leading-none text-white ${tri ? 'grid' : 'hidden'}`}
+      >
+        <span className="h-0.5 w-2 rounded-[1px] bg-white" />
+      </span>
+      {children}
+    </label>
+  );
+}

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

@@ -0,0 +1,53 @@
+// Chips stories — multi-value input with tags: Enter adds, × removes,
+// Backspace removes the last one.
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Chips } from './index';
+
+const meta = {
+  title: 'Forms/Chips',
+  component: Chips,
+  tags: ['autodocs'],
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+/** Basic — type + Enter to add, × to remove one, Backspace removes the last. */
+export const Basic: Story = {
+  args: { value: ['react', 'typescript'], placeholder: 'Add tech…' },
+};
+
+/** Disabled — input + remove buttons hidden. */
+export const Disabled: Story = {
+  args: { value: ['locked', 'tags'], disabled: true },
+};
+
+/** Controlled — useState demo: values shown as JSON. */
+export const Controlled: Story = {
+  render: () => <ChipsControlledDemo />,
+};
+
+/** Empty — no values: only the placeholder input shows. */
+export const Empty: Story = {
+  args: { value: [], placeholder: 'Add first tag…' },
+};
+
+/** DarkTheme — chips + input on dark canvas. */
+export const DarkTheme: Story = {
+  render: () => (
+    <div data-bp-theme="dark" className="w-96 rounded-xl bg-canvas p-4">
+      <Chips value={['react', 'rust', 'nginx']} onChange={() => {}} placeholder="Add tech…" />
+    </div>
+  ),
+};
+
+function ChipsControlledDemo() {
+  const [value, setValue] = useState<string[]>(['react', 'typescript']);
+  return (
+    <div className="w-96">
+      <Chips value={value} onChange={setValue} placeholder="Add tech…" />
+      <p className="mt-2 font-mono text-meta text-ink3">values: {JSON.stringify(value)}</p>
+    </div>
+  );
+}

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

@@ -0,0 +1,86 @@
+// Chips tests — Enter thêm tag, trùng/trống bỏ qua, × xoá, Backspace xoá cuối,
+// disabled ẩn input + nút xoá.
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { useState } from 'react';
+import { Chips } from './index.js';
+
+// Controlled harness — Chips là fully-controlled (value prop), mock tĩnh sẽ
+// dùng stale value ở tương tác thứ 2.
+function Harness({ onChange, initial = ['react', 'vue'] }: { onChange?: (v: string[]) => void; initial?: string[] }) {
+  const [value, setValue] = useState(initial);
+  return <Chips value={value} onChange={(v) => { setValue(v); onChange?.(v); }} />;
+}
+
+afterEach(cleanup);
+
+describe('Chips', () => {
+  it('Enter thêm tag → onChange mảng mới + input xoá trống', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Chips value={['react']} onChange={onChange} />);
+    const input = screen.getByRole('textbox');
+    await user.type(input, 'vue{Enter}');
+    expect(onChange).toHaveBeenLastCalledWith(['react', 'vue']);
+    expect(input).toHaveValue('');
+  });
+
+  it('tag trùng hoặc toàn space → không thêm (onChange không gọi)', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Chips value={['react']} onChange={onChange} />);
+    const input = screen.getByRole('textbox');
+    await user.type(input, 'react{Enter}');
+    expect(onChange).not.toHaveBeenCalled();
+    await user.type(input, '   {Enter}');
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('nút × theo tag → xoá đúng tag đó (2 lần liên tiếp qua controlled state)', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Harness onChange={onChange} />);
+    await user.click(screen.getByRole('button', { name: 'Xoá react' }));
+    expect(onChange).toHaveBeenLastCalledWith(['vue']);
+    await user.click(screen.getByRole('button', { name: 'Xoá vue' }));
+    expect(onChange).toHaveBeenLastCalledWith([]);
+    expect(screen.queryByRole('button', { name: /Xoá/ })).toBeNull();
+  });
+
+  it('Backspace khi input rỗng → xoá tag cuối', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Chips value={['react', 'vue']} onChange={onChange} />);
+    await user.type(screen.getByRole('textbox'), '{Backspace}');
+    expect(onChange).toHaveBeenLastCalledWith(['react']);
+  });
+
+  it('disabled → ẩn input + nút xoá, chỉ còn tags hiển thị', () => {
+    render(<Chips value={['react']} disabled />);
+    expect(screen.queryByRole('textbox')).toBeNull();
+    expect(screen.queryByRole('button', { name: 'Xoá react' })).toBeNull();
+    expect(screen.getByText('react')).toBeInTheDocument();
+  });
+
+  it('placeholder chỉ hiện khi chưa có tag nào', () => {
+    const { rerender } = render(<Chips value={[]} placeholder="Thêm tag…" />);
+    expect(screen.getByPlaceholderText('Thêm tag…')).toBeInTheDocument();
+    rerender(<Chips value={['react']} placeholder="Thêm tag…" />);
+    expect(screen.getByPlaceholderText('')).toBeInTheDocument();
+  });
+});
+
+describe('Chips — matrix gaps (a11y/props)', () => {
+  it('mỗi nút xoá có aria-label riêng "Xoá <tag>" (screen-reader)', () => {
+    render(<Chips value={['react', 'vue']} onChange={vi.fn()} />);
+    expect(screen.getByRole('button', { name: 'Xoá react' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Xoá vue' })).toBeInTheDocument();
+  });
+
+  it('placeholder hiển thị khi rỗng + className passthrough', () => {
+    const { container } = render(<Chips value={[]} onChange={vi.fn()} placeholder="Thêm tag…" className="marker" />);
+    expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', 'Thêm tag…');
+    expect(container.firstElementChild).toHaveClass('marker');
+  });
+});

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

@@ -0,0 +1,44 @@
+// Chips — multi-value input với tags (antd Tags Select lite).
+import { useState, type KeyboardEvent } from 'react';
+import { Icon } from '../icons/index.js';
+
+export interface ChipsProps {
+  value?: string[];
+  onChange?: (values: string[]) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function Chips({ value = [], onChange, placeholder = 'Thêm tag…', disabled, className }: ChipsProps) {
+  const [input, setInput] = useState('');
+  function addTag(tag: string) {
+    const t = tag.trim();
+    if (!t || value.includes(t)) return;
+    onChange?.([...value, t]); setInput('');
+  }
+  function removeTag(tag: string) { onChange?.(value.filter((v) => v !== tag)); }
+  function onKeyDown(e: KeyboardEvent<HTMLInputElement>) {
+    if (e.key === 'Enter') { e.preventDefault(); addTag(e.currentTarget.value); }
+    if (e.key === 'Backspace' && !input && value.length > 0) removeTag(value[value.length - 1]);
+  }
+  return (
+    // Depth contract: rest bg-s3 + ele-1 → focus-within bg-s1 + ring 3px accent/40 (như Input)
+    <span className={`inline-flex min-h-8 w-full flex-wrap items-center gap-1 rounded-lg border border-line bg-s3 px-2 py-1 shadow-[var(--ele-1)] transition-[background-color,border-color,box-shadow] duration-200 ease-[var(--ease-smooth)] focus-within:border-accent-hi focus-within:bg-s1 focus-within:shadow-[var(--ele-2)] focus-within:ring-[3px] focus-within:ring-accent/40${disabled ? ' cursor-not-allowed opacity-50 shadow-none' : ''}${className ? ` ${className}` : ''}`}>
+      {value.map((tag) => (
+        <span key={tag} className="inline-flex items-center gap-0.5 rounded-1 bg-s3 px-1.5 py-0.5 text-meta text-ink transition-colors duration-200 ease-[var(--ease-smooth)]">
+          {tag}
+          {!disabled && (
+            <button type="button" aria-label={`Xoá ${tag}`} onClick={() => removeTag(tag)}
+              className="cursor-pointer rounded-1 border-none bg-transparent p-0 text-ink3 transition-colors duration-200 ease-[var(--ease-smooth)] hover:text-st-fail focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"><Icon name="times" size={10} /></button>
+          )}
+        </span>
+      ))}
+      {!disabled && (
+        <input value={input} onChange={(e) => setInput(e.target.value)} onKeyDown={onKeyDown}
+          placeholder={value.length === 0 ? placeholder : ''} disabled={disabled}
+          className="min-w-[80px] flex-1 border-none bg-transparent text-body text-ink placeholder:text-ink4 outline-none" />
+      )}
+    </span>
+  );
+}

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

@@ -0,0 +1,93 @@
+// Parity matrix antd→tokens: docs/parity-matrix.md
+// Collapse stories — accordion (one open) / multiple open panels / rich content / dark.
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Collapse } from './index';
+
+/** Progressive disclosure panels — several can stay open at once. */
+const meta = { title: 'Data Display/Collapse', tags: ['autodocs'] } satisfies Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const items = [
+  { key: '1', label: 'Panel 1 — Overview', children: 'Panel 1 content. Click the header to expand/collapse (grid-rows animation).' },
+  { key: '2', label: 'Panel 2 — Technical details', children: 'Panel 2 content. Multiple panels can be open at once (Set keys).' },
+  { key: '3', label: 'Panel 3 — History', children: 'Panel 3 content. Chevron rotates 180° when open.' },
+];
+
+export const Accordion: Story = {
+  name: 'Accordion — one panel open by default',
+  render: () => <Collapse items={items} defaultActiveKeys={['1']} className="w-[480px]" />,
+};
+
+export const MultipleOpen: Story = {
+  name: 'Multiple panels open at once',
+  render: () => <Collapse items={items} defaultActiveKeys={['1', '3']} className="w-[480px]" />,
+};
+
+export const AllClosed: Story = {
+  name: 'All closed — no defaultActiveKeys',
+  render: () => <Collapse items={items} className="w-[480px]" />,
+};
+
+export const RichContent: Story = {
+  name: 'Rich content — label + children as complex ReactNode',
+  render: () => (
+    <Collapse
+      className="w-[480px]"
+      defaultActiveKeys={['log']}
+      items={[
+        {
+          key: 'log',
+          label: (
+            <span className="flex items-center gap-2">
+              Deployment log <span className="text-meta text-ink3">(3 events)</span>
+            </span>
+          ),
+          children: (
+            <ul className="m-0 list-none space-y-2 p-0">
+              <li className="flex justify-between"><span>Build #218 passed</span><span className="text-meta text-ink3">14:02</span></li>
+              <li className="flex justify-between"><span>Deploy staging</span><span className="text-meta text-ink3">14:05</span></li>
+              <li className="flex justify-between"><span>Smoke e2e 15/15</span><span className="text-meta text-ink3">14:11</span></li>
+            </ul>
+          ),
+        },
+        { key: 'env', label: 'Environment variables', children: <code className="font-mono text-meta">KAFKA_BROKERS=kafka:9092</code> },
+      ]}
+    />
+  ),
+};
+
+export const DarkTheme: Story = {
+  name: 'Dark theme',
+  render: () => (
+    <div data-bp-theme="dark" className="w-[480px] rounded-xl bg-canvas p-4">
+      <Collapse items={items} defaultActiveKeys={['1']} />
+    </div>
+  ),
+};
+
+// ── Case-coverage audit 2026-10-18 (antd parity: accordion + disabled) ──
+
+export const AccordionMode: Story = {
+  name: 'Accordion mode — opening a panel closes the others (accordion prop)',
+  render: () => (
+    <div className="w-[480px]">
+      <Collapse accordion items={items} />
+    </div>
+  ),
+};
+
+export const DisabledItem: Story = {
+  name: 'Disabled item — header locked, panel stays closed',
+  render: () => (
+    <div className="w-[480px]">
+      <Collapse
+        items={[
+          ...items.slice(0, 1),
+          { key: 'locked', label: 'Locked panel (no permission)', children: 'Hidden content', disabled: true },
+          ...items.slice(1),
+        ]}
+      />
+    </div>
+  ),
+};

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

@@ -0,0 +1,128 @@
+// Collapse tests — mở/đóng panel, nhiều panel cùng lúc, defaultActiveKeys.
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it } from 'vitest';
+import { Collapse } from './index.js';
+
+const ITEMS = [
+  { key: 'a', label: 'Panel A', children: <p>nội dung A</p> },
+  { key: 'b', label: 'Panel B', children: <p>nội dung B</p> },
+];
+
+afterEach(cleanup);
+
+describe('Collapse', () => {
+  it('mặc định đóng; click label → mở; click lần nữa → đóng', async () => {
+    const user = userEvent.setup();
+    render(<Collapse items={ITEMS} />);
+    await user.click(screen.getByRole('button', { name: 'Panel A' }));
+    // grid-rows animation: content vẫn trong DOM; grid 3 tầng — từ content lên 2 cấp là grid
+    const wrapper = screen.getByText('nội dung A').parentElement; // tầng 3 (padding)
+    // sau lần mở: grid tầng 1 có grid-rows-[1fr]
+    expect(wrapper?.parentElement?.parentElement?.className).toContain('grid-rows-[1fr]');
+    await user.click(screen.getByRole('button', { name: 'Panel A' }));
+    // sau lần đóng: grid tầng 1 có grid-rows-[0fr]
+    expect(wrapper?.parentElement?.parentElement?.className).toContain('grid-rows-[0fr]');
+  });
+
+  it('nhiều panel mở cùng lúc + defaultActiveKeys', () => {
+    render(<Collapse items={ITEMS} defaultActiveKeys={['a', 'b']} />);
+    expect(screen.getByText('nội dung A')).toBeInTheDocument();
+    expect(screen.getByText('nội dung B')).toBeInTheDocument();
+  });
+});
+
+describe('Collapse — branch phụ (Tier 5 sweep)', () => {
+  it('chevron xoay theo open (aria-expanded)', async () => {
+    const user = userEvent.setup();
+    render(<Collapse items={ITEMS} />);
+    const btn = screen.getByRole('button', { name: 'Panel A' });
+    expect(btn).toHaveAttribute('aria-expanded', 'false');
+    await user.click(btn);
+    expect(btn).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('keyboard: focus header → Enter mở (button native)', async () => {
+    const user = userEvent.setup();
+    render(<Collapse items={ITEMS} />);
+    const btn = screen.getByRole('button', { name: 'Panel A' });
+    btn.focus();
+    await user.keyboard('{Enter}');
+    expect(btn).toHaveAttribute('aria-expanded', 'true');
+    await user.keyboard(' ');
+    expect(btn).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('mặc định tất cả đóng (grid-rows-[0fr]); defaultActiveKeys chỉ mở đúng panel', () => {
+    const { container } = render(<Collapse items={ITEMS} defaultActiveKeys={['b']} />);
+    const wrappers = container.querySelectorAll('.grid');
+    expect(wrappers[0]).toHaveClass('grid-rows-[0fr]');
+    expect(wrappers[1]).toHaveClass('grid-rows-[1fr]');
+  });
+
+  it('items rỗng → chỉ container, không panel', () => {
+    const { container } = render(<Collapse items={[]} />);
+    expect(container.querySelector('button')).toBeNull();
+  });
+
+  it('label ReactNode + className passthrough', () => {
+    const { container } = render(
+      <Collapse
+        className="marker"
+        items={[{ key: 'a', label: <strong>Label đậm</strong>, children: 'nội dung' }]}
+      />,
+    );
+    expect(container.firstElementChild).toHaveClass('marker');
+    expect(screen.getByText('Label đậm').tagName).toBe('STRONG');
+  });
+
+  // ── Case-coverage audit 2026-10-18 (antd parity: accordion + disabled) ──
+
+  it('accordion → mở panel mới tự đóng panel cũ (1 panel mở tại 1 thời điểm)', async () => {
+    render(<Collapse accordion items={ITEMS} />);
+    const headerA = screen.getByRole('button', { name: 'Panel A' });
+    const headerB = screen.getByRole('button', { name: 'Panel B' });
+    await userEvent.click(headerA);
+    expect(headerA).toHaveAttribute('aria-expanded', 'true');
+    await userEvent.click(headerB);
+    // panel A thu về grid-rows 0fr (ẩn CSS — children vẫn trong DOM, collapse render-cả)
+    expect(headerA).toHaveAttribute('aria-expanded', 'false');
+    expect(headerB).toHaveAttribute('aria-expanded', 'true');
+    expect(headerB.closest('div')!.querySelector('.grid-rows-\\[1fr\\]')).not.toBeNull();
+    expect(headerA.closest('div')!.querySelector('.grid-rows-\\[0fr\\]')).not.toBeNull();
+  });
+
+  it('item disabled → header không bấm được, panel không mở', async () => {
+    render(
+      <Collapse
+        items={[
+          { key: 'a', label: 'Khoá', children: <p>bí mật</p>, disabled: true },
+        ]}
+      />,
+    );
+    const header = screen.getByRole('button', { name: 'Khoá' });
+    expect(header).toBeDisabled();
+    expect(header).toHaveClass('cursor-not-allowed');
+    await userEvent.click(header);
+    expect(header).toHaveAttribute('aria-expanded', 'false');
+    // panel không bao giờ mở — body vẫn grid-rows 0fr
+    expect(header.closest('div')!.querySelector('.grid-rows-\\[1fr\\]')).toBeNull();
+  });
+
+  it('panel đóng → grid-rows-[0fr] + cấu trúc 3 tầng (clip sạch padding — fix lộ 12px)', () => {
+    const { container } = render(
+      <Collapse items={[{ key: 'a', label: 'Panel A', children: <p>nội dung</p> }]} />,
+    );
+    const grid = container.querySelector('.grid-rows-\\[0fr\\]')!;
+    expect(grid).toBeInTheDocument();
+    // tầng 2: element clip — min-h-0 overflow-hidden, KHÔNG mang padding
+    const clip = grid.firstElementChild!;
+    expect(clip).toHaveClass('overflow-hidden', 'min-h-0');
+    expect(clip.className).not.toContain('px-4');
+    expect(clip.className).not.toContain('pb-3');
+    // tầng 3: padding + typography là CON của element được clip (mới bị clip đúng)
+    const content = clip.firstElementChild!;
+    expect(content).toHaveClass('px-4', 'pb-3', 'text-body', 'text-ink2');
+    expect(content).toHaveTextContent('nội dung');
+  });
+});

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

@@ -0,0 +1,75 @@
+import { useState, type ReactNode } from 'react';
+import { Icon } from '../icons/index.js';
+// Collapse — các panel gập/mở (antd lite): items key/label/children; nhiều panel
+// mở cùng lúc (Set keys); chevron xoay; border-b phân cách.
+
+export interface CollapseItem {
+  /** Key duy nhất — nhận diện panel trong openKeys. */
+  key: string;
+  /** Tiêu đề header (cũng là nút toggle). */
+  label: ReactNode;
+  /** Nội dung gập/mở (animate grid-rows). */
+  children: ReactNode;
+  /** Panel khoá — header không bấm được (antd disabled). */
+  disabled?: boolean;
+}
+
+export interface CollapseProps {
+  /** Các panel — nhiều panel có thể mở cùng lúc (Set keys). */
+  items: CollapseItem[];
+  /** Keys mở mặc định (uncontrolled). */
+  defaultActiveKeys?: string[];
+  /** Chỉ 1 panel mở tại 1 thời điểm (antd accordion). */
+  accordion?: boolean;
+  className?: string;
+}
+
+export function Collapse({ items, defaultActiveKeys = [], accordion = false, className }: CollapseProps) {
+  const [openKeys, setOpenKeys] = useState<Set<string>>(new Set(defaultActiveKeys));
+
+  function toggle(key: string) {
+    setOpenKeys((prev) => {
+      if (accordion) return prev.has(key) ? new Set<string>() : new Set([key]);
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }
+
+  return (
+    <div className={`overflow-hidden rounded-xl border border-line bg-s2${className ? ` ${className}` : ''}`}>
+      {items.map((item, i) => {
+        const open = openKeys.has(item.key);
+        return (
+          <div key={item.key} className={i > 0 ? 'border-t border-line2' : ''}>
+            <button
+              type="button"
+              aria-expanded={open}
+              disabled={item.disabled}
+              onClick={() => !item.disabled && toggle(item.key)}
+              className={`flex w-full items-center justify-between border-none bg-transparent px-4 py-3 text-left text-body font-medium text-ink transition-colors duration-200 ease-[var(--ease-smooth)] outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ${
+                item.disabled ? 'cursor-not-allowed text-ink3' : 'cursor-pointer hover:bg-s3'
+              }`}
+            >
+              {item.label}
+              <span aria-hidden="true" className={`text-ink3 transition-transform ${open ? 'rotate-180' : ''}`}>
+                <Icon name="chevron-down" size={14} />
+              </span>
+            </button>
+            <div
+              className={`grid transition-[grid-template-rows] duration-[280ms] ease-[var(--ease-smooth)] ${open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'}`}
+            >
+              {/* 3 tầng: clip nằm SẠCH padding — overflow không clip padding của chính nó,
+               * để px-4/pb-3 trên element overflow-hidden ⇒ track 0fr vẫn cao 12px (lộ nửa
+               * dòng khi đóng). Padding + typography xuống tầng 3, con của element được clip. */}
+              <div className="min-h-0 overflow-hidden">
+                <div className="px-4 pb-3 text-body text-ink2">{item.children}</div>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}