create-wakii-stack 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,107 @@
+// Accordion — nhóm panel MỞ-MỘT (PrimeReact/MUI semantics): mặc định single-open —
+// mở item mới TỰ ĐÓNG item đang mở; multiple=true → hành vi Collapse (nhiều mở).
+// Khác Collapse (multi-open mặc định, uncontrolled-only): Accordion có controlled
+// activeKey (string | string[]) + onChange payload theo mode.
+// Visual/motion KẾ THỪA Collapse: rounded-xl border-line bg-s2, header py-3 px-4
+// font-medium, chevron xoay 180, animate grid-rows 0fr↔1fr — KẶC cấu trúc 3 tầng
+// grid > min-h-0 overflow-hidden > padding-div (padding phải nằm SẠCH tầng clip —
+// bug padding-leak Collapse V2, đừng tái phạm).
+import { useState } from 'react';
+import { Icon } from '../icons/index.js';
+import type { CollapseItem } from '../collapse/index.js';
+
+/** Cùng shape Collapse (key/label/children/disabled). */
+export type AccordionItem = CollapseItem;
+
+export interface AccordionProps {
+  /** Các panel — shape trùng CollapseItem. */
+  items: AccordionItem[];
+  /** Cho nhiều panel mở cùng lúc (mặc định false = single-open chuẩn Accordion). */
+  multiple?: boolean;
+  /** Panel mở mặc định (uncontrolled) — string khi single, string[] khi multiple. */
+  defaultActiveKey?: string | string[];
+  /** Controlled: key (single) hoặc keys (multiple) đang mở. */
+  activeKey?: string | string[];
+  /** Callback đổi panel — payload string (single) hoặc string[] (multiple). */
+  onChange?: (key: string | string[]) => void;
+  className?: string;
+}
+
+/** Chuẩn hoá prop key (string | string[] | undefined) → Set. */
+function toKeySet(value: string | string[] | undefined): Set<string> {
+  if (value === undefined) return new Set();
+  return new Set(Array.isArray(value) ? value : [value]);
+}
+
+export function Accordion({
+  items,
+  multiple = false,
+  defaultActiveKey,
+  activeKey,
+  onChange,
+  className,
+}: AccordionProps) {
+  const isControlled = activeKey !== undefined;
+  const [innerKeys, setInnerKeys] = useState<Set<string>>(() => toKeySet(defaultActiveKey));
+  const openKeys = isControlled ? toKeySet(activeKey) : innerKeys;
+
+  function toggle(key: string) {
+    // Single-open: mở key → THAY toàn bộ (đóng panel kia); bấm panel đang mở → đóng.
+    const next = multiple
+      ? (() => {
+          const s = new Set(openKeys);
+          if (s.has(key)) s.delete(key);
+          else s.add(key);
+          return s;
+        })()
+      : openKeys.has(key)
+        ? new Set<string>()
+        : new Set([key]);
+    if (!isControlled) setInnerKeys(next);
+    const payload: string | string[] = multiple ? [...next] : (next.values().next().value ?? '');
+    onChange?.(payload);
+  }
+
+  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
+              id={`accordion-header-${item.key}`}
+              type="button"
+              aria-expanded={open}
+              aria-controls={`accordion-panel-${item.key}`}
+              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 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
+              id={`accordion-panel-${item.key}`}
+              role="region"
+              aria-labelledby={`accordion-header-${item.key}`}
+              className={`grid transition-[grid-template-rows] duration-200 ${open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'}`}
+            >
+              {/* 3 tầng: clip nằm SẠCH padding — px/pb xuống tầng 3, con của element
+               * bị overflow-hidden clip (bug padding-leak V2: track 0fr vẫn lộ padding). */}
+              <div className="min-h-0 overflow-hidden">
+                <div className="px-4 pb-3 text-body text-ink2">{item.children}</div>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,104 @@
+// Affix stories — antd parity (docs/parity-matrix.md Gap P0).
+// Sticky demo runs inside a real scroll container so the behavior is visible
+// without leaving the story canvas. position: sticky is pure CSS; Affix only
+// reports state changes through onChange.
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { Affix } from './index';
+
+const meta = {
+  title: 'Navigation/Affix',
+  component: Affix,
+  tags: ['autodocs'],
+  argTypes: {
+    offsetTop: { control: 'number' },
+    offsetBottom: { control: 'number' },
+  },
+  // Bare Meta như table.stories.tsx — stories render-driven (children tự compose),
+  // không khai báo args generics để tránh đòi args.children ở từng story.
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+function ScrollBox({ children, height = 240 }: { children: React.ReactNode; height?: number }) {
+  const rows = Array.from({ length: 12 }, (_, i) => i + 1);
+  return (
+    <div className="rounded-xl border border-line bg-s1" style={{ height, overflowY: 'auto' }}>
+      {children}
+      <div className="grid gap-2 p-4">
+        {rows.map((n) => (
+          <div key={n} className="rounded-lg border border-line2 bg-s2 px-3 py-2 text-label text-ink2">
+            Row {n} — scroll me
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+const toolbarCls = 'rounded-lg border border-line bg-s2 px-3 py-1.5 text-label font-medium text-ink shadow-[var(--shadow-pop)]';
+
+/** Demo component cho OnChange — hooks phải nằm trong component thật (rules-of-hooks). */
+function OnChangeDemo() {
+  const [affixed, setAffixed] = useState(false);
+  return (
+    <div className="w-96">
+      <ScrollBox height={200}>
+        <Affix offsetTop={8} onChange={setAffixed}>
+          <div className={toolbarCls}>
+            Status: <span className={affixed ? 'text-st-done' : 'text-ink3'}>{affixed ? 'affixed' : 'idle'}</span>
+          </div>
+        </Affix>
+      </ScrollBox>
+    </div>
+  );
+}
+
+/** Basic — toolbar sticks to the top edge of the scroll container (offsetTop 0). */
+export const Basic: Story = {
+  args: { children: 'Toolbar' },
+  render: () => (
+    <div className="w-96">
+      <ScrollBox>
+        <Affix>
+          <div className={toolbarCls}>Toolbar — sticks at top (offset 0)</div>
+        </Affix>
+      </ScrollBox>
+    </div>
+  ),
+};
+
+/** OffsetTop — the wrapper pins 12px below the container's top edge. */
+export const OffsetTop: Story = {
+  args: { children: 'Pinned bar' },
+  render: () => (
+    <div className="w-96">
+      <ScrollBox>
+        <Affix offsetTop={12}>
+          <div className={toolbarCls}>Pinned 12px from top</div>
+        </Affix>
+      </ScrollBox>
+    </div>
+  ),
+};
+
+/** OffsetBottom — bottom mode: a footer bar pinned above the container's bottom edge. */
+export const OffsetBottom: Story = {
+  args: { children: 'Footer bar' },
+  render: () => (
+    <div className="w-96">
+      <ScrollBox>
+        <Affix offsetBottom={12}>
+          <div className={toolbarCls}>Footer bar — pinned 12px from bottom</div>
+        </Affix>
+      </ScrollBox>
+    </div>
+  ),
+};
+
+/** OnChange — reports the affixed state; watch the badge flip while scrolling. */
+export const OnChange: Story = {
+  args: { children: 'Status bar' },
+  render: () => <OnChangeDemo />,
+};

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

@@ -0,0 +1,138 @@
+// Affix tests — position sticky CSS + onChange đo trên scroll container thật
+// (jsdom: container inline overflowY auto → được dò là scroll parent). Trạng thái
+// bám mô phỏng bằng mock getBoundingClientRect trên wrapper.
+import { cleanup, fireEvent, render } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Affix } from './index.js';
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+const RECT: DOMRect = {
+  x: 0, y: 0, width: 100, height: 40, top: 0, right: 100, bottom: 40, left: 0,
+  toJSON: () => ({}),
+} as DOMRect;
+
+/** Mock getBoundingClientRect trên wrapper — set đủ field, override từng phần. */
+function setupRect(el: HTMLElement, rect: Partial<DOMRect>) {
+  return vi.spyOn(el, 'getBoundingClientRect').mockReturnValue({ ...RECT, ...rect });
+}
+
+describe('Affix', () => {
+  it('render children trong wrapper sticky + top = offsetTop px', () => {
+    const { getByTestId } = render(
+      <Affix offsetTop={12}>
+        <div data-testid="content">Toolbar</div>
+      </Affix>,
+    );
+    expect(getByTestId('content')).toBeInTheDocument();
+    const wrapper = getByTestId('content').parentElement!;
+    expect(wrapper.style.position).toBe('sticky');
+    expect(wrapper.style.top).toBe('12px');
+  });
+
+  it('offsetBottom → bottom mode (style.bottom, không style.top)', () => {
+    const { getByTestId } = render(
+      <Affix offsetBottom={8}>
+        <div data-testid="content">Footer bar</div>
+      </Affix>,
+    );
+    const wrapper = getByTestId('content').parentElement!;
+    expect(wrapper.style.position).toBe('sticky');
+    expect(wrapper.style.bottom).toBe('8px');
+    expect(wrapper.style.top).toBe('');
+  });
+
+  it('scroll container thật: scroll qua offset → onChange(true), scroll lùi → onChange(false)', () => {
+    const onChange = vi.fn();
+    const { getByTestId } = render(
+      <div data-testid="scroller" style={{ overflowY: 'auto', height: 200 }}>
+        <Affix offsetTop={10} onChange={onChange}>
+          <div data-testid="content">Bar</div>
+        </Affix>
+      </div>,
+    );
+    const wrapper = getByTestId('content').parentElement!;
+    const scroller = getByTestId('scroller');
+
+    // chưa qua ngưỡng (rect.top 50 > 10) → false → false: không fire
+    const spy = setupRect(wrapper, { top: 50 });
+    fireEvent.scroll(scroller);
+    expect(onChange).not.toHaveBeenCalled();
+
+    // scroll qua ngưỡng → bám
+    spy.mockReturnValue({ ...RECT, top: 5 });
+    fireEvent.scroll(scroller);
+    expect(onChange).toHaveBeenCalledWith(true);
+
+    // scroll lùi → nhả bám
+    spy.mockReturnValue({ ...RECT, top: 60 });
+    fireEvent.scroll(scroller);
+    expect(onChange).toHaveBeenCalledWith(false);
+    expect(onChange).toHaveBeenCalledTimes(2);
+  });
+
+  it('trạng thái không đổi qua các lần scroll → onChange KHÔNG fire lặp', () => {
+    const onChange = vi.fn();
+    const { getByTestId } = render(
+      <div data-testid="scroller" style={{ overflowY: 'auto' }}>
+        <Affix offsetTop={10} onChange={onChange}>
+          <div data-testid="content">Bar</div>
+        </Affix>
+      </div>,
+    );
+    const wrapper = getByTestId('content').parentElement!;
+    const spy = setupRect(wrapper, { top: 5 });
+    const scroller = getByTestId('scroller');
+    fireEvent.scroll(scroller);
+    spy.mockReturnValue({ ...RECT, top: 4 }); // vẫn <= offsetTop → vẫn bám
+    fireEvent.scroll(scroller);
+    fireEvent.scroll(scroller);
+    expect(onChange).toHaveBeenCalledTimes(1); // false → true đúng 1 lần
+  });
+
+  it('không có ancestor scrollable → fallback window scroll vẫn đo được', () => {
+    const onChange = vi.fn();
+    const { getByTestId } = render(
+      <Affix offsetTop={20} onChange={onChange}>
+        <div data-testid="content">Bar</div>
+      </Affix>,
+    );
+    const wrapper = getByTestId('content').parentElement!;
+    setupRect(wrapper, { top: 3 });
+    fireEvent.scroll(window);
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it('bottom mode với window: rect.bottom chạm innerHeight − offset → onChange(true)', () => {
+    const onChange = vi.fn();
+    const { getByTestId } = render(
+      <Affix offsetBottom={10} onChange={onChange}>
+        <div data-testid="content">Bar</div>
+      </Affix>,
+    );
+    const wrapper = getByTestId('content').parentElement!;
+    setupRect(wrapper, { bottom: 759 }); // 768 (jsdom innerHeight) − 10 + 1 → đã chạm mép
+    fireEvent.scroll(window);
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it('target() chỉ đích danh container → scroll event trên đó được nghe', () => {
+    const onChange = vi.fn();
+    let scroller: HTMLElement | null = null;
+    const { getByTestId } = render(
+      // ref callback commit trước effect → target() luôn có container
+      <div ref={(el) => { scroller = el; }} style={{ overflow: 'hidden' }}>
+        <Affix offsetTop={10} onChange={onChange} target={() => scroller!}>
+          <div data-testid="content">Bar</div>
+        </Affix>
+      </div>,
+    );
+    const wrapper = getByTestId('content').parentElement!;
+    setupRect(wrapper, { top: 2 });
+    fireEvent.scroll(scroller!);
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+});

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

@@ -0,0 +1,89 @@
+// Affix — antd parity (docs/parity-matrix.md Gap P0): wrapper bám mép container
+// khi scroll qua offset. Phần "bám" là position: sticky CSS thuần (không deps,
+// không định vị tay — không layout thrash). JS chỉ làm 1 việc: đo trạng thái bám
+// trên scroll/resize của container (target, hoặc ancestor overflow auto/scroll
+// gần nhất, fallback window) để gọi onChange. onChange chỉ fire khi trạng thái
+// ĐỔI — không fire lúc mount (antd chỉ báo khi có chuyển trạng thái).
+// Top mode: bám khi rect.top <= offsetTop (sticky top giữ element tại offsetTop).
+// Bottom mode: bám khi rect.bottom >= mép đáy container − offsetBottom.
+import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react';
+
+export interface AffixProps {
+  children: ReactNode;
+  /** px từ đỉnh container khi bám (antd offsetTop) — mặc định 0. */
+  offsetTop?: number;
+  /** px từ đáy container khi bám (antd offsetBottom) — truyền thì sang bottom mode. */
+  offsetBottom?: number;
+  /** Callback khi trạng thái bám đổi (true = đang bám). */
+  onChange?: (affixed: boolean) => void;
+  /** Container scroll cụ thể (antd target) — mặc định tự dò ancestor scrollable, fallback window. */
+  target?: () => HTMLElement | Window;
+  className?: string;
+}
+
+function findScrollParent(el: HTMLElement | null): HTMLElement | Window {
+  let node = el?.parentElement ?? null;
+  while (node) {
+    // inline style trước (jsdom không parse Tailwind class), computed sau cho CSS thật
+    const oy = node.style.overflowY || getComputedStyle(node).overflowY;
+    if (oy === 'auto' || oy === 'scroll') return node;
+    node = node.parentElement;
+  }
+  return window;
+}
+
+export function Affix({
+  children,
+  offsetTop = 0,
+  offsetBottom,
+  onChange,
+  target,
+  className,
+}: AffixProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [affixed, setAffixed] = useState(false);
+  const affixedRef = useRef(false);
+  const mode: 'top' | 'bottom' = offsetBottom !== undefined ? 'bottom' : 'top';
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const container = target?.() ?? findScrollParent(el);
+
+    function measure(): boolean {
+      const rect = el!.getBoundingClientRect();
+      if (mode === 'bottom') {
+        const edge = container === window
+          ? window.innerHeight
+          : (container as HTMLElement).getBoundingClientRect().bottom;
+        return rect.bottom >= edge - (offsetBottom ?? 0);
+      }
+      return rect.top <= offsetTop;
+    }
+
+    function evaluate() {
+      const next = measure();
+      if (next === affixedRef.current) return;
+      affixedRef.current = next;
+      setAffixed(next);
+      onChange?.(next);
+    }
+
+    container.addEventListener('scroll', evaluate, { passive: true });
+    window.addEventListener('resize', evaluate);
+    return () => {
+      container.removeEventListener('scroll', evaluate);
+      window.removeEventListener('resize', evaluate);
+    };
+  }, [mode, offsetTop, offsetBottom, target, onChange]);
+
+  const style: CSSProperties = mode === 'bottom'
+    ? { position: 'sticky', bottom: offsetBottom }
+    : { position: 'sticky', top: offsetTop };
+
+  return (
+    <div ref={ref} style={style} data-affixed={affixed || undefined} className={className}>
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,149 @@
+// Parity matrix antd→tokens: docs/parity-matrix.md
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '../button/index';
+import { Alert } from './index';
+import { message } from '../message/index.js';
+
+/** Inline status banner that stays in the page flow — filled by default. */
+const meta = {
+  title: 'Feedback/Alert',
+  component: Alert,
+  tags: ['autodocs'],
+  argTypes: { type: { control: 'select', options: ['success', 'info', 'warning', 'error'] } },
+} satisfies Meta<typeof Alert>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const FourTypes: Story = {
+  name: '4 types — filled (default)',
+  args: { message: 'Alert' },
+  render: () => (
+    <div style={{ display: 'grid', gap: 12, maxWidth: 560 }}>
+      <Alert type="success" message="Changes saved." />
+      <Alert type="info" message="Auth service is starting up — try again shortly." />
+      <Alert type="warning" message="Token expires soon." />
+      <Alert type="error" message="Incorrect email or password." />
+    </div>
+  ),
+};
+
+export const WithDescriptionAndClose: Story = {
+  name: 'Description + closable — detail row + × button',
+  args: {
+    type: 'error',
+    message: 'Cannot reach the tasks service.',
+    description: 'Detail: fetch failed — node-svc (:3001) is not responding.',
+    closable: true,
+  },
+};
+
+export const Outlined: Story = {
+  name: 'Outlined — tint bg + border + colored icon',
+  args: { message: 'Alert' },
+  render: () => (
+    <div style={{ display: 'grid', gap: 12, maxWidth: 560 }}>
+      <Alert variant="outlined" type="success" message="Changes saved." />
+      <Alert variant="outlined" type="info" message="Auth service is starting up — try again shortly." />
+      <Alert variant="outlined" type="warning" message="Token expires soon." />
+      <Alert variant="outlined" type="error" message="Incorrect email or password." />
+    </div>
+  ),
+};
+
+export const CustomStyled: Story = {
+  name: 'CustomStyled — classNames slots (antd v5 style)',
+  args: { message: 'Alert' },
+  render: () => (
+    <div style={{ display: 'grid', gap: 12, maxWidth: 560 }}>
+      <Alert
+        type="info"
+        message="Custom icon size + italic description"
+        description="The description line is styled via classNames.description."
+        closable
+        classNames={{ icon: 'text-xl', description: 'italic' }}
+      />
+      <Alert
+        type="success"
+        message="Custom close button tint"
+        closable
+        classNames={{ closeButton: 'text-st-done' }}
+      />
+      <Alert
+        variant="outlined"
+        type="warning"
+        message="Custom wrapper ring"
+        classNames={{ wrapper: 'ring-1 ring-st-doing' }}
+      />
+    </div>
+  ),
+};
+
+export const DarkTheme: Story = {
+  name: 'DarkTheme — filled tokens stay (WCAG by design), outlined tints switch',
+  args: { message: 'Alert' },
+  render: () => (
+    <div data-bp-theme="dark" className="rounded-xl bg-canvas p-4">
+      <div style={{ display: 'grid', gap: 12, maxWidth: 560 }}>
+        <Alert type="success" message="Changes saved." />
+        <Alert type="info" message="Auth service is starting up — try again shortly." />
+        <Alert variant="outlined" type="warning" message="Token expires soon." />
+        <Alert variant="outlined" type="error" message="Incorrect email or password." />
+      </div>
+    </div>
+  ),
+};
+
+// ── Real-world usage (2026-10-25): save flow — inline Alert + toast Message ──
+
+/** SaveFlow — form save: idle → saving (Button loading) → saved (Alert success) or
+ * failed (Alert error + Retry). Toast `message` fires alongside each outcome — copy
+ * this pattern for every form submit. */
+export const SaveFlow: StoryObj = {
+  name: 'Save flow — idle → loading → success / failure with retry',
+  render: () => <SaveFlowDemo />,
+};
+
+function SaveFlowDemo() {
+  const [state, setState] = useState<'idle' | 'saving' | 'saved' | 'failed'>('idle');
+
+  function save() {
+    setState('saving');
+    window.setTimeout(() => {
+      // demo: 75% thành công — nhấn lại để thấy nhánh còn lại
+      if (Math.random() > 0.25) {
+        setState('saved');
+        message.success('Workspace settings saved');
+      } else {
+        setState('failed');
+        message.error('Save failed — network error');
+      }
+    }, 1200);
+  }
+
+  return (
+    <div className="flex w-full max-w-md flex-col gap-3 rounded-xl border border-line bg-s1 p-5">
+      <span className="text-body font-medium text-ink">Workspace settings</span>
+      <span className="text-meta text-ink3">Site name, timezone and notification defaults.</span>
+      {state === 'failed' && (
+        <Alert
+          type="error"
+          message="Couldn't save your changes"
+          description="The network request failed — check the connection and try again."
+        />
+      )}
+      {state === 'saved' && <Alert type="success" message="All changes saved" />}
+      <div className="flex items-center gap-2">
+        <Button type="primary" loading={state === 'saving'} onClick={save}>
+          {state === 'failed' ? 'Retry save' : 'Save changes'}
+        </Button>
+        {state === 'saved' && (
+          <Button type="text" onClick={() => setState('idle')}>
+            Reset demo
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,85 @@
+// Alert tests — filled mặc định (nền đặc token --alert-*-filled + chữ trắng) + outlined giữ look cũ + role=alert contract.
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Alert } from './index.js';
+
+afterEach(cleanup);
+
+describe('Alert', () => {
+  it('mặc định info filled — role=alert + message + nền đặc', () => {
+    render(<Alert message="Không kết nối được dịch vụ tasks." />);
+    expect(screen.getByRole('alert')).toHaveTextContent('Không kết nối được dịch vụ tasks.');
+    expect(screen.getByRole('alert').style.background).toContain('--alert-info-filled');
+  });
+
+  it.each([
+    ['error', '--alert-error-filled'],
+    ['warning', '--alert-warning-filled'],
+    ['success', '--alert-success-filled'],
+  ] as const)('type %s filled mặc định → nền đặc token, không viền, chữ + icon trắng', (type, bg) => {
+    render(<Alert type={type} message="m" />);
+    const alert = screen.getByRole('alert');
+    expect(alert.style.background).toContain(bg);
+    expect(alert).not.toHaveClass('border');
+    // icon span trắng — phần tử aria-hidden đầu
+    expect(alert.firstElementChild).toHaveClass('text-white');
+  });
+
+  it.each([
+    ['success', '--alert-success-bg', '--alert-success-border', 'text-st-done'],
+    ['info', '--alert-info-bg', '--alert-info-border', 'text-accent'],
+    ['warning', '--alert-warning-bg', '--alert-warning-border', 'text-st-doing'],
+    ['error', '--alert-error-bg', '--alert-error-border', 'text-st-fail'],
+  ] as const)('variant outlined → %s giữ look cũ: bg/border qua CSS var + icon màu riêng', (type, bgVar, borderVar, iconCls) => {
+    render(<Alert type={type} variant="outlined" message="m" />);
+    const alert = screen.getByRole('alert');
+    expect(alert.style.background).toContain(bgVar);
+    expect(alert.style.borderColor).toContain(borderVar);
+    expect(alert).toHaveClass('border');
+    expect(alert.firstElementChild).toHaveClass(iconCls);
+  });
+
+  it('closable → nút × gọi onClose', async () => {
+    const onClose = vi.fn();
+    render(<Alert message="m" closable onClose={onClose} />);
+    await userEvent.setup().click(screen.getByRole('button', { name: 'Đóng' }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('description phụ hiển thị khi truyền', () => {
+    render(<Alert type="error" message="Lỗi" description="Chi tiết kỹ thuật" />);
+    expect(screen.getByText('Chi tiết kỹ thuật')).toBeInTheDocument();
+  });
+
+  it('classNames slots (SÓNG-3) — merge sau default ở đúng element', () => {
+    render(
+      <Alert
+        type="error"
+        message="m"
+        description="d"
+        closable
+        classNames={{ wrapper: 'ring-1', icon: 'text-2xl', message: 'font-bold', description: 'italic', closeButton: 'mr-1' }}
+      />,
+    );
+    const alert = screen.getByRole('alert');
+    // wrapper: giữ default + thêm slot
+    expect(alert).toHaveClass('flex');
+    expect(alert).toHaveClass('ring-1');
+    // icon
+    expect(alert.firstElementChild).toHaveClass('text-2xl');
+    // message + description
+    expect(screen.getByText('m')).toHaveClass('font-bold');
+    expect(screen.getByText('d')).toHaveClass('italic');
+    // closeButton
+    expect(screen.getByRole('button', { name: 'Đóng' })).toHaveClass('mr-1');
+  });
+});
+
+describe('Alert — branch phụ (Tier 2)', () => {
+  it('className passthrough + description omitted branch', () => {
+    render(<Alert type="info" message="m" className="mb-2" />);
+    expect(screen.getByRole('alert')).toHaveClass('mb-2');
+    expect(screen.queryByText(/Chi tiết/)).toBeNull();
+  });
+});