create-wakii-stack 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,67 @@
+// Password — Input password + toggle hiện/ẩn + strength meter.
+import { useState } from 'react';
+import { Input } from '../input/index';
+import { Icon } from '../icons/index.js';
+
+export interface PasswordProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  showStrength?: boolean;
+  disabled?: boolean;
+  ariaLabel?: string;
+  className?: string;
+}
+
+function strength(v: string): 0 | 1 | 2 | 3 {
+  if (!v) return 0;
+  let s = 0;
+  if (v.length >= 8) s++;
+  if (/[A-Z]/.test(v)) s++;
+  if (/[0-9!@#$%^&*()]/.test(v)) s++;
+  return Math.min(3, s) as 0 | 1 | 2 | 3;
+}
+
+const STRENGTH_LABEL = ['', 'Yếu', 'Trung bình', 'Mạnh'];
+const STRENGTH_COLOR = ['', 'bg-st-fail', 'bg-st-doing', 'bg-st-done'];
+
+export function Password({ value: valueProp, onChange, placeholder, showStrength, disabled, ariaLabel = 'Mật khẩu', className }: PasswordProps) {
+  const [visible, setVisible] = useState(false);
+  const [internal, setInternal] = useState('');
+  const value = valueProp ?? internal;
+  const level = strength(value);
+
+  return (
+    <div className={className}>
+      <div className="relative">
+        <Input
+          type={visible ? 'text' : 'password'}
+          value={value}
+          disabled={disabled}
+          aria-label={ariaLabel}
+          placeholder={placeholder}
+          onChange={(e) => {
+            setInternal(e.target.value);
+            onChange?.(e.target.value);
+          }}
+        />
+        <button
+          type="button"
+          aria-label={visible ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}
+          onClick={() => setVisible((v) => !v)}
+          className="absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer rounded-1 border-none bg-transparent text-label text-ink3 transition-colors duration-200 ease-[var(--ease-smooth)] hover:text-ink2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
+        >
+          <Icon name={visible ? 'eye-slash' : 'eye'} size={16} />
+        </button>
+      </div>
+      {showStrength && value && (
+        <div className="mt-1 flex items-center gap-1">
+          {[1, 2, 3].map((i) => (
+            <span key={i} className={`h-1 flex-1 rounded-pill transition-colors duration-300 ease-[var(--ease-smooth)] ${i <= level ? STRENGTH_COLOR[level] : 'bg-line2'}`} />
+          ))}
+          <span className="ml-1 text-meta text-ink3">{STRENGTH_LABEL[level]}</span>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { Password } from './index';
+
+const meta = { title: 'Forms/Password', component: Password, tags: ['autodocs'] } satisfies Meta<typeof Password>;
+export default meta;
+type S = StoryObj<typeof meta>;
+
+/** Basic — password field with show/hide toggle. */
+export const Basic: S = { args: { ariaLabel: 'Password', placeholder: 'Enter password' } };
+
+/** WithStrength — strength meter on (weak/medium/strong via --st-* colors). */
+export const WithStrength: S = {
+  name: 'With strength meter',
+  args: { ariaLabel: 'Password strength', placeholder: 'Type to see strength', showStrength: true, value: 'Strong1!' },
+};
+
+/** Disabled — locked field. */
+export const Disabled: S = { args: { ariaLabel: 'Locked password', value: 'secret', disabled: true } };
+
+/** Controlled — useState demo: toggle + type updates value. */
+export const Controlled: S = {
+  render: () => <PasswordControlledDemo />,
+};
+
+/** DarkTheme — field + meter on dark canvas. */
+export const DarkTheme: S = {
+  render: () => (
+    <div data-bp-theme="dark" className="w-[320px] rounded-xl bg-canvas p-4">
+      <Password ariaLabel="Password" placeholder="Enter password" showStrength value="Strong1!" />
+    </div>
+  ),
+};
+
+function PasswordControlledDemo() {
+  const [v, setV] = useState('');
+  return (
+    <div className="grid max-w-[320px] gap-3">
+      <Password value={v} onChange={setV} ariaLabel="Password" placeholder="Enter password" showStrength />
+      <p className="m-0 font-mono text-meta text-ink3">length: <strong className="text-ink">{v.length}</strong></p>
+    </div>
+  );
+}

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

@@ -0,0 +1,45 @@
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { Password } from './index.js';
+afterEach(cleanup);
+describe('Password', () => {
+  it('type password mặc định; toggle → text', () => {
+    const { rerender } = render(<Password ariaLabel="pw" value="secret" />);
+    expect(screen.getByLabelText('pw')).toHaveAttribute('type', 'password');
+    fireEvent.click(screen.getByLabelText('Hiện mật khẩu'));
+    rerender(<Password ariaLabel="pw" value="secret" />);
+    expect(screen.getByLabelText('pw')).toHaveAttribute('type', 'text');
+  });
+  it('showStrength → strength bars', () => {
+    render(<Password ariaLabel="pw" value="Strong1!" showStrength />);
+    expect(screen.getByText('Mạnh')).toBeInTheDocument();
+  });
+});
+
+describe('Password — matrix (uncontrolled/strength/disabled/a11y)', () => {
+  it('uncontrolled — gõ qua state nội bộ + onChange', () => {
+    const onChange = vi.fn();
+    render(<Password ariaLabel="pw" onChange={onChange} />);
+    fireEvent.change(screen.getByLabelText('pw'), { target: { value: 'abc' } });
+    expect(onChange).toHaveBeenLastCalledWith('abc');
+  });
+
+  it('strength label theo độ mạnh: yếu/trung bình', () => {
+    const { rerender } = render(<Password ariaLabel="pw" value="Abcde" showStrength />);
+    expect(screen.getByText('Yếu')).toBeInTheDocument(); // 1 điểm: có chữ hoa, <8 ký tự
+    rerender(<Password ariaLabel="pw" value="Abcdefgh" showStrength />);
+    expect(screen.getByText('Trung bình')).toBeInTheDocument();
+    // queryByText (KHÔNG getByText) — getByText throw khi không thấy, không bao giờ null
+    expect(screen.queryByText('Yếu')).toBeNull();
+  });
+
+  it('disabled → input khoá + toggle ẩn/hiện vẫn bấm được nhưng type đổi', () => {
+    render(<Password ariaLabel="pw" value="secret" disabled />);
+    expect(screen.getByLabelText('pw')).toBeDisabled();
+  });
+
+  it('placeholder passthrough', () => {
+    render(<Password ariaLabel="pw" placeholder="Nhập mật khẩu" />);
+    expect(screen.getByLabelText('pw')).toHaveAttribute('placeholder', 'Nhập mật khẩu');
+  });
+});

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

@@ -0,0 +1,103 @@
+// PickList — 2 cột chuyển item qua lại (antd Transfer lite).
+// Audit fix 2026-10-18: hex → bg-accent/10; ›/‹ → Icon + aria-label; role
+// listbox/option + aria-selected; keyboard ↑↓ + Enter/Space pick từng listbox.
+// Panel hoist ra module-level (định nghĩa trong component = function identity
+// đổi mỗi render → React remount panel, mất state keyboard + stale DOM node).
+import { useState, type KeyboardEvent } from 'react';
+import { Button } from '../button/index';
+import { Icon } from '../icons/index.js';
+
+export interface PickListItem { label: string; value: string }
+
+export interface PickListProps {
+  source: PickListItem[];
+  target: PickListItem[];
+  onChange?: (source: PickListItem[], target: PickListItem[]) => void;
+  className?: string;
+}
+
+interface PanelProps {
+  title: string;
+  items: PickListItem[];
+  picked: Set<string>;
+  onPick: (v: string) => void;
+}
+
+function Panel({ title, items, picked, onPick }: PanelProps) {
+  // Keyboard a11y listbox: ↑↓ di chuyển active, Enter/Space toggle pick.
+  // active khởi đầu = 0 (Enter ngay khi focus = pick item đầu — pattern listbox).
+  const [activeIdx, setActiveIdx] = useState(0);
+  function onKeyDown(e: KeyboardEvent<HTMLUListElement>) {
+    if (items.length === 0) return;
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      e.preventDefault();
+      const dir = e.key === 'ArrowDown' ? 1 : -1;
+      setActiveIdx((i) => (i + dir + items.length) % items.length);
+    } else if ((e.key === 'Enter' || e.key === ' ') && items[activeIdx]) {
+      e.preventDefault();
+      onPick(items[activeIdx].value);
+    }
+  }
+  return (
+    <div className="flex-1">
+      <div className="mb-1 text-label font-semibold text-ink2">{title}</div>
+      <ul
+        role="listbox" aria-label={title} aria-multiselectable="true" tabIndex={0}
+        onKeyDown={onKeyDown}
+        className="m-0 min-h-[200px] list-none rounded-xl border border-line bg-s2 p-2 focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:outline-none"
+      >
+        {items.map((item, i) => (
+          <li key={item.value} role="option" aria-selected={picked.has(item.value)}
+            onClick={() => { onPick(item.value); setActiveIdx(i); }}
+            className={`cursor-pointer rounded-lg px-3 py-1.5 text-body transition-colors ${picked.has(item.value) ? 'bg-accent/10 text-accent' : 'text-ink'} ${i === activeIdx && !picked.has(item.value) ? 'bg-s3' : ''} hover:bg-s3`}>
+            {item.label}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export function PickList({ source: sourceProp, target: targetProp, onChange, className }: PickListProps) {
+  const [source, setSource] = useState(sourceProp);
+  const [target, setTarget] = useState(targetProp);
+  const [picked, setPicked] = useState<Set<string>>(new Set());
+
+  function moveToTarget() {
+    const moving = source.filter((s) => picked.has(s.value));
+    const nextSource = source.filter((s) => !picked.has(s.value));
+    setSource(nextSource);
+    setTarget([...target, ...moving]);
+    onChange?.(nextSource, [...target, ...moving]);
+    setPicked(new Set());
+  }
+  function moveToSource() {
+    const moving = target.filter((t) => picked.has(t.value));
+    const nextTarget = target.filter((t) => !picked.has(t.value));
+    setTarget(nextTarget);
+    setSource([...source, ...moving]);
+    onChange?.([...source, ...moving], nextTarget);
+    setPicked(new Set());
+  }
+
+  // Chọn/bỏ chọn 1 item (click toggle) — trước đây onPick là no-op → không
+  // thể pick gì cả, nút chuyển luôn disabled.
+  function togglePick(v: string) {
+    setPicked((prev) => {
+      const next = new Set(prev);
+      if (next.has(v)) next.delete(v); else next.add(v);
+      return next;
+    });
+  }
+
+  return (
+    <div className={`flex items-center gap-3${className ? ` ${className}` : ''}`}>
+      <Panel title="Nguồn" items={source} picked={picked} onPick={togglePick} />
+      <div className="flex flex-col gap-1">
+        <Button size="small" aria-label="Chuyển sang đích" onClick={moveToTarget} disabled={picked.size === 0} icon={<Icon name="chevron-right" size={12} />} />
+        <Button size="small" aria-label="Chuyển về nguồn" onClick={moveToSource} disabled={picked.size === 0} icon={<Icon name="chevron-left" size={12} />} />
+      </div>
+      <Panel title="Đích" items={target} picked={picked} onPick={togglePick} />
+    </div>
+  );
+}

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

@@ -0,0 +1,59 @@
+// PickList stories — two-column transfer (Transfer lite): pick in a column, then
+// move with the chevron buttons; listboxes are keyboard-navigable (↑↓ + Enter/Space).
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { PickList } from './index';
+
+const meta = {
+  title: 'Forms/PickList',
+  component: PickList,
+  tags: ['autodocs'],
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+const STACKS = [
+  { label: 'React', value: 'react' },
+  { label: 'Vue', value: 'vue' },
+  { label: 'Svelte', value: 'svelte' },
+  { label: 'Angular', value: 'angular' },
+];
+
+/** Basic — controlled: pick items → move ›/‹; picked list shown below. */
+function BasicDemo() {
+  const [source, setSource] = useState(STACKS);
+  const [target, setTarget] = useState<typeof STACKS>([]);
+  return (
+      <div className="max-w-[560px]">
+        <PickList source={source} target={target} onChange={(s, t) => { setSource(s); setTarget(t); }} />
+        <p className="mt-2 font-mono text-meta text-ink3">
+          picked: <strong className="text-ink">{target.map((t) => t.label).join(', ') || '—'}</strong>
+        </p>
+      </div>
+  );
+}
+
+export const Basic: Story = {
+  render: () => <BasicDemo />,
+};
+
+/** WithInitialTarget — start with items already moved. */
+export const WithInitialTarget: Story = {
+  name: 'With initial target',
+  args: { source: [STACKS[0], STACKS[1]], target: [STACKS[2]] },
+};
+
+/** DarkTheme — panels on dark canvas. */
+export const DarkTheme: Story = {
+  render: () => (
+    <div data-bp-theme="dark" className="max-w-[560px] rounded-xl bg-canvas p-4">
+      <PickList source={STACKS.slice(0, 2)} target={[]} onChange={() => {}} />
+    </div>
+  ),
+};
+
+/** Empty — empty source column (min-height keeps the panel shape). */
+export const Empty: Story = {
+  args: { source: [], target: STACKS },
+};

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

@@ -0,0 +1,94 @@
+// PickList tests — 2 panel render, click pick highlight, › chuyển Nguồn→Đích,
+// ‹ chuyển ngược, toggle bỏ pick, picked reset sau move.
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { PickList } from './index.js';
+
+const SOURCE = [
+  { label: 'React', value: 'react' },
+  { label: 'Vue', value: 'vue' },
+  { label: 'Angular', value: 'ng' },
+];
+const TARGET = [{ label: 'Svelte', value: 'svelte' }];
+
+afterEach(cleanup);
+
+describe('PickList', () => {
+  it('render 2 panel Nguồn/Đích với đủ items', () => {
+    render(<PickList source={SOURCE} target={TARGET} />);
+    expect(screen.getByText('Nguồn')).toBeInTheDocument();
+    expect(screen.getByText('Đích')).toBeInTheDocument();
+    expect(screen.getByText('React')).toBeInTheDocument();
+    expect(screen.getByText('Svelte')).toBeInTheDocument();
+  });
+
+  it('click item → picked highlight; nút › disabled → enabled', async () => {
+    const user = userEvent.setup();
+    render(<PickList source={SOURCE} target={[]} />);
+    const right = screen.getByRole('button', { name: 'Chuyển sang đích' });
+    expect(right).toBeDisabled();
+    await user.click(screen.getByText('React'));
+    expect(screen.getByText('React')).toHaveClass('text-accent'); // highlight picked
+    expect(right).toBeEnabled();
+  });
+
+  it('click lần 2 → bỏ pick, nút › disabled lại', async () => {
+    const user = userEvent.setup();
+    render(<PickList source={SOURCE} target={[]} />);
+    await user.click(screen.getByText('React'));
+    expect(screen.getByRole('button', { name: 'Chuyển sang đích' })).toBeEnabled();
+    await user.click(screen.getByText('React'));
+    expect(screen.getByText('React')).not.toHaveClass('text-accent');
+    expect(screen.getByRole('button', { name: 'Chuyển sang đích' })).toBeDisabled();
+  });
+
+  it('› → items đã pick chuyển Nguồn→Đích + onChange(source còn lại, target mới) + reset pick', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<PickList source={SOURCE} target={TARGET} onChange={onChange} />);
+    await user.click(screen.getByText('Vue'));
+    await user.click(screen.getByRole('button', { name: 'Chuyển sang đích' }));
+    expect(onChange).toHaveBeenCalledWith(
+      [SOURCE[0], SOURCE[2]],
+      [...TARGET, SOURCE[1]],
+    );
+    expect(screen.getByRole('button', { name: 'Chuyển sang đích' })).toBeDisabled(); // picked reset
+    expect(screen.getByText('Vue')).toBeInTheDocument(); // vẫn trong DOM — giờ ở panel Đích
+  });
+
+  it('‹ → item trong Đích chuyển ngược về Nguồn', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<PickList source={SOURCE} target={TARGET} onChange={onChange} />);
+    await user.click(screen.getByText('Svelte'));
+    await user.click(screen.getByRole('button', { name: 'Chuyển về nguồn' }));
+    expect(onChange).toHaveBeenCalledWith([...SOURCE, TARGET[0]], []);
+    expect(screen.getByRole('button', { name: 'Chuyển về nguồn' })).toBeDisabled();
+  });
+});
+
+describe('PickList — keyboard nav (audit fix)', () => {
+  it('Enter trong listbox → pick item active mặc định (React); nút chuyển enabled', async () => {
+    // userEvent.keyboard — event pipeline thật (fireEvent keyDown đầu tiên bị
+    // nuốt bởi delegation warm-up của React 19 trong jsdom)
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<PickList source={SOURCE} target={[]} onChange={onChange} />);
+    const list = screen.getByRole('listbox', { name: 'Nguồn' });
+    await user.click(list); // focus listbox
+    await user.keyboard('{Enter}');
+    expect(list.querySelector('[aria-selected="true"]')).toHaveTextContent('React');
+    await user.click(screen.getByRole('button', { name: 'Chuyển sang đích' }));
+    expect(onChange).toHaveBeenCalledWith([SOURCE[1], SOURCE[2]], [SOURCE[0]]);
+  });
+
+  it('ArrowDown di chuyển active → Enter pick item theo activeIdx (Vue)', async () => {
+    const user = userEvent.setup();
+    render(<PickList source={SOURCE} target={[]} onChange={vi.fn()} />);
+    const list = screen.getByRole('listbox', { name: 'Nguồn' });
+    await user.click(list);
+    await user.keyboard('{ArrowDown}{Enter}');
+    expect(list.querySelector('[aria-selected="true"]')).toHaveTextContent('Vue');
+  });
+});

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

@@ -0,0 +1,102 @@
+// Popconfirm — bubble confirm nhỏ bám trigger (style matrix 2026-10-18: bubble
+// rounded-xl, shadow var(--shadow-pop); icon warning tròn, nút small Huỷ/default + OK primary).
+// Controlled (open) — TaskItem xoá dùng; ESC = cancel.
+import { cloneElement, isValidElement, useEffect, useId, type ReactElement, type ReactNode } from 'react';
+import { Button } from '../button/index';
+
+export interface PopconfirmProps {
+  /** Controlled mở/đóng bubble. */
+  open: boolean;
+  /** Nội dung câu hỏi (antd title). */
+  title: ReactNode;
+  /** Mô tả phụ (antd description). */
+  description?: ReactNode;
+  /** Nhãn nút xác nhận (mặc định 'OK'). */
+  okText?: string;
+  /** Nhãn nút huỷ (mặc định 'Huỷ'). */
+  cancelText?: string;
+  /** Nút OK đỏ (confirm xoá). */
+  danger?: boolean;
+  /** Xác nhận = click OK (ESC không gọi). */
+  onConfirm?: () => void;
+  /** Huỷ = click Huỷ / ESC. */
+  onCancel?: () => void;
+  /** Trigger element — bọc trong span relative (bubble absolute bên dưới). */
+  children: ReactNode;
+}
+
+export function Popconfirm({
+  open,
+  title,
+  description,
+  okText = 'OK',
+  cancelText = 'Huỷ',
+  danger = false,
+  onConfirm,
+  onCancel,
+  children,
+}: PopconfirmProps) {
+  // A11y: bubble name qua labelledby — ăn cả title ReactNode, không chỉ string.
+  const titleId = useId();
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onCancel?.();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [open, onCancel]);
+
+  // Trigger được wire aria-haspopup/aria-expanded (cloneElement) — SR biết bubble đang mở
+  const trigger = isValidElement(children)
+    ? cloneElement(children as ReactElement<Record<string, unknown>>, {
+        'aria-haspopup': 'dialog',
+        'aria-expanded': open,
+      })
+    : children;
+
+  return (
+    <span className="relative inline-flex">
+      {trigger}
+      {open && (
+        <span className="absolute bottom-[calc(100%+10px)] left-0 z-[var(--z-popover)] w-max max-w-xs">
+          <span
+            role="dialog"
+            aria-labelledby={titleId}
+            className="block origin-bottom-left rounded-xl border border-line bg-s2 p-3 shadow-[var(--shadow-pop)] animate-[bp-bounce-in_var(--motion-base)_var(--ease-enter)]"
+          >
+            <span className="flex items-start gap-2">
+              {/* Contrast: chữ ĐEN trên gold --st-doing (antd gold-pattern — trắng chỉ ~1.6:1);
+                  trắng giữ nguyên trên --st-fail/--st-done (đỏ/xanh đậm đủ tương phản) */}
+              <span
+                aria-hidden="true"
+                className={`grid size-4 shrink-0 place-items-center rounded-pill text-[10px] font-bold ${danger ? 'bg-st-fail text-white' : 'bg-st-doing text-ink'}`}
+              >
+                !
+              </span>
+              <span>
+                <span id={titleId} className="block text-body font-medium text-ink">{title}</span>
+                {description && <span className="mt-1 block text-label text-ink2">{description}</span>}
+                <span className="mt-2 flex items-center justify-end gap-2">
+                  <Button
+                    size="small"
+                    onClick={() => onCancel?.()}
+                  >
+                    {cancelText}
+                  </Button>
+                  <Button size="small" type="primary" danger={danger} onClick={() => onConfirm?.()}>
+                    {okText}
+                  </Button>
+                </span>
+              </span>
+            </span>
+            <span
+              aria-hidden="true"
+              className="absolute bottom-[-5px] left-4 size-2 rotate-45 border-b border-r border-line bg-s2"
+            />
+          </span>
+        </span>
+      )}
+    </span>
+  );
+}

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

@@ -0,0 +1,73 @@
+// Popconfirm stories — confirm (danger) + cancel/ESC.
+// 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 { Popconfirm } from './index';
+
+/** Confirm bubble anchored to a trigger — ESC = cancel. */
+const meta = {
+  title: 'Feedback/Popconfirm',
+  component: Popconfirm,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Popconfirm>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+type R = StoryObj;
+
+function DeleteDemo({ danger }: { danger?: boolean }) {
+  const [open, setOpen] = useState(true);
+  return (
+    <Popconfirm
+      open={open}
+      title="Delete this task?"
+      description="This action cannot be undone."
+      danger={danger}
+      okText="Delete"
+      onConfirm={() => setOpen(false)}
+      onCancel={() => setOpen(false)}
+    >
+      <Button type="primary" danger={danger} onClick={() => setOpen((o) => !o)}>
+        Delete task
+      </Button>
+    </Popconfirm>
+  );
+}
+
+function SendDemo() {
+  const [open, setOpen] = useState(true);
+  return (
+    <Popconfirm open={open} title="Send report?" okText="Send" onConfirm={() => setOpen(false)} onCancel={() => setOpen(false)}>
+      <Button onClick={() => setOpen((o) => !o)}>Send report</Button>
+    </Popconfirm>
+  );
+}
+
+export const Basic: Story = {
+  name: 'Basic — controlled open + description',
+  args: { open: true, title: 'Delete this task?', children: 'x' },
+  render: () => <DeleteDemo />,
+};
+
+export const Danger: Story = {
+  name: 'Danger — red icon + red OK button',
+  args: { open: true, title: 'Delete this task?', children: 'x', danger: true },
+  render: () => <DeleteDemo danger />,
+};
+
+export const NoDescription: R = {
+  name: 'No description — question only',
+  render: () => <SendDemo />,
+};
+
+export const DarkTheme: R = {
+  name: 'DarkTheme — bubble bg-s2 + shadow-pop dark',
+  render: () => (
+    <div data-bp-theme="dark" className="p-4">
+      <Popconfirm open title="Delete this task?" description="This action cannot be undone (dark scope)." danger okText="Delete">
+        <Button type="primary" danger>Delete task</Button>
+      </Popconfirm>
+    </div>
+  ),
+};