create-wakii-stack 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,92 @@
+// Stories ScrollPage — fullpage snap deck: Basic 3 sections · WithNav dots
+// (nút chấm scrollIntoView — native smooth, respect reduced-motion của browser)
+// · DarkTheme (data-bp-theme cascade). Tokens-only, EN.
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '../button/index';
+import { Tag } from '../tag/index';
+import { ScrollPage } from './index.js';
+
+const meta = {
+  title: 'Navigation/ScrollPage',
+  component: ScrollPage,
+  tags: ['autodocs'],
+} satisfies Meta<typeof ScrollPage>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function SectionBody({ kicker, title, body }: { kicker: string; title: string; body: string }) {
+  return (
+    <div className="max-w-xl text-center">
+      <Tag className="mb-3">{kicker}</Tag>
+      <h2 className="m-0 text-h1 font-bold text-ink">{title}</h2>
+      <p className="mb-0 mt-2 text-body text-ink2">{body}</p>
+    </div>
+  );
+}
+
+export const Basic: Story = {
+  name: 'Basic — 3 fullpage sections',
+  render: () => (
+    <ScrollPage aria-label="Product deck" className="rounded-xl border border-line">
+      <ScrollPage.Section id="deck-1" aria-label="Overview" className="bg-s1">
+        <SectionBody kicker="01 — Overview" title="One screen, one idea" body="Each section snaps flush — no half-states, no scroll-hijack. Pure CSS scroll-snap." />
+      </ScrollPage.Section>
+      <ScrollPage.Section id="deck-2" aria-label="Workflow" className="bg-s2">
+        <SectionBody kicker="02 — Workflow" title="Keyboard friendly" body="The deck is focusable — arrow keys scroll and snap exactly like touch or wheel." />
+      </ScrollPage.Section>
+      <ScrollPage.Section id="deck-3" aria-label="Wrap up" className="bg-s3">
+        <SectionBody kicker="03 — Wrap up" title="Composable sections" body="ScrollPage.Section is a plain landmark — bring your own id, aria-label and content." />
+      </ScrollPage.Section>
+    </ScrollPage>
+  ),
+};
+
+export const WithNavDots: Story = {
+  name: 'With nav dots — fixed rail scrolls between sections',
+  render: () => (
+    <div className="relative">
+      <div className="absolute right-3 top-1/2 z-[var(--z-dropdown)] flex -translate-y-1/2 flex-col gap-2">
+        {['Overview', 'Workflow', 'Wrap up'].map((label, i) => (
+          <Button
+            key={label}
+            size="small"
+            onClick={() => {
+              const deck = document.querySelector('[aria-label="Product deck with nav"]');
+              deck?.querySelectorAll('section')[i]?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            }}
+            aria-label={`Go to ${label}`}
+          >
+            {i + 1}
+          </Button>
+        ))}
+      </div>
+      <ScrollPage aria-label="Product deck with nav" className="rounded-xl border border-line">
+        <ScrollPage.Section id="nav-1" aria-label="Overview" className="bg-s1">
+          <SectionBody kicker="01" title="Overview" body="Dots call scrollIntoView on the section — snap does the rest." />
+        </ScrollPage.Section>
+        <ScrollPage.Section id="nav-2" aria-label="Workflow" className="bg-s2">
+          <SectionBody kicker="02" title="Workflow" body="The rail floats above the deck with the standard dropdown z-index." />
+        </ScrollPage.Section>
+        <ScrollPage.Section id="nav-3" aria-label="Wrap up" className="bg-s3">
+          <SectionBody kicker="03" title="Wrap up" body="Compose whatever nav you like — the deck only owns snapping." />
+        </ScrollPage.Section>
+      </ScrollPage>
+    </div>
+  ),
+};
+
+export const DarkTheme: Story = {
+  name: 'Dark theme — data-bp-theme cascade',
+  render: () => (
+    <div data-bp-theme="dark">
+      <ScrollPage aria-label="Dark deck" className="rounded-xl border border-line">
+        <ScrollPage.Section id="dark-1" aria-label="Dark overview" className="bg-s1">
+          <SectionBody kicker="dark" title="Same tokens, dark deck" body="No dark-specific code — the data-bp-theme attribute cascades through every token." />
+        </ScrollPage.Section>
+        <ScrollPage.Section id="dark-2" aria-label="Dark details" className="bg-s2">
+          <SectionBody kicker="dark" title="Contrast audited" body="Surfaces, ink and lines all switch together — verified by the contrast audit." />
+        </ScrollPage.Section>
+      </ScrollPage>
+    </div>
+  ),
+};

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

@@ -0,0 +1,51 @@
+// Tests ScrollPage — snap structure (container snap-y mandatory + overflow),
+// Section snap-start + min-h-full, composite .Section, a11y (id/aria-label).
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { ScrollPage } from './index.js';
+
+afterEach(cleanup);
+
+describe('ScrollPage', () => {
+  it('container: snap-y snap-mandatory + overflow-y-auto + h-screen; composite .Section render', () => {
+    render(
+      <ScrollPage aria-label="Deck">
+        <ScrollPage.Section id="s1" aria-label="Intro">
+          First
+        </ScrollPage.Section>
+        <ScrollPage.Section id="s2">Second</ScrollPage.Section>
+      </ScrollPage>,
+    );
+    const deck = screen.getByLabelText('Deck');
+    expect(deck.className).toContain('snap-y');
+    expect(deck.className).toContain('snap-mandatory');
+    expect(deck.className).toContain('overflow-y-auto');
+    expect(screen.getByText('First')).toBeInTheDocument();
+    expect(screen.getByText('Second')).toBeInTheDocument();
+  });
+
+  it('Section: snap-start + min-h-full, passthrough id/aria-label (landmark section)', () => {
+    render(
+      <ScrollPage>
+        <ScrollPage.Section id="hero" aria-label="Hero">
+          content
+        </ScrollPage.Section>
+      </ScrollPage>,
+    );
+    const section = document.getElementById('hero')!;
+    expect(section.tagName).toBe('SECTION');
+    expect(section.className).toContain('snap-start');
+    expect(section.className).toContain('min-h-full');
+    expect(section).toHaveAttribute('aria-label', 'Hero');
+  });
+
+  it('className passthrough cả container lẫn section', () => {
+    render(
+      <ScrollPage className="my-deck">
+        <ScrollPage.Section className="my-section">x</ScrollPage.Section>
+      </ScrollPage>,
+    );
+    expect(document.querySelector('.my-deck')).toBeInTheDocument();
+    expect(document.querySelector('.my-section')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,16 @@
+// ScrollPanel — custom scrollbar container (antd lite).
+import type { ReactNode } from 'react';
+
+export interface ScrollPanelProps {
+  children: ReactNode;
+  height?: string;
+  className?: string;
+}
+
+export function ScrollPanel({ children, height = '200px', className }: ScrollPanelProps) {
+  return (
+    <div className={`overflow-auto rounded-xl border border-line bg-s2 p-3 [scrollbar-width:thin] [scrollbar-color:var(--line)_transparent]${className ? ` ${className}` : ''}`} style={{ height }}>
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,37 @@
+// Stories ScrollPanel — Primitives. Container scrollbar mảnh, height tuỳ ý.
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ScrollPanel } from './index';
+
+/** Scrollable container with a slim custom scrollbar and fixed height. */
+const meta = {
+  title: 'Primitives/ScrollPanel',
+  component: ScrollPanel,
+  tags: ['autodocs'],
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+const LINES = Array.from({ length: 40 }, (_, i) => `Dòng ${i + 1} — nội dung demo cuộn`);
+
+export const CoBan: Story = {
+  name: 'Basic — 200px height, slim scrollbar',
+  render: () => (
+    <ScrollPanel className="w-80">
+      <div className="flex flex-col gap-1 text-body text-ink2">
+        {LINES.map((line) => <p key={line}>{line}</p>)}
+      </div>
+    </ScrollPanel>
+  ),
+};
+
+export const Cao: Story = {
+  name: 'Custom height — 350px',
+  render: () => (
+    <ScrollPanel height="350px" className="w-96">
+      <div className="flex flex-col gap-1 text-body text-ink2">
+        {LINES.map((line) => <p key={line}>{line}</p>)}
+      </div>
+    </ScrollPanel>
+  ),
+};

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

@@ -0,0 +1,41 @@
+// ScrollPanel tests — render children, height prop/mặc định, className merge,
+// overflow + scrollbar styling.
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { ScrollPanel } from './index.js';
+
+afterEach(cleanup);
+
+describe('ScrollPanel', () => {
+  it('render children bên trong', () => {
+    render(
+      <ScrollPanel>
+        <p>Nội dung dài</p>
+        <p>Dòng thứ hai</p>
+      </ScrollPanel>,
+    );
+    expect(screen.getByText('Nội dung dài')).toBeInTheDocument();
+    expect(screen.getByText('Dòng thứ hai')).toBeInTheDocument();
+  });
+
+  it('height prop → style height; mặc định 200px', () => {
+    const { container, rerender } = render(
+      <ScrollPanel><span /></ScrollPanel>,
+    );
+    const panel = container.firstElementChild as HTMLElement;
+    expect(panel.style.height).toBe('200px');
+    rerender(<ScrollPanel height="350px"><span /></ScrollPanel>);
+    expect(panel.style.height).toBe('350px');
+  });
+
+  it('container overflow-auto + scrollbar mảnh; className merge ngoài', () => {
+    const { container } = render(
+      <ScrollPanel height="120px" className="mt-4"><span /></ScrollPanel>,
+    );
+    const panel = container.firstElementChild as HTMLElement;
+    expect(panel).toHaveClass('overflow-auto');
+    expect(panel).toHaveClass('rounded-xl');
+    expect(panel.className).toContain('scrollbar-width:thin');
+    expect(panel).toHaveClass('mt-4');
+  });
+});

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

@@ -0,0 +1,27 @@
+// ScrollTop — nút quay đầu trang (hiện khi scrollY > threshold).
+import { useEffect, useState } from 'react';
+
+export interface ScrollTopProps {
+  threshold?: number;
+  className?: string;
+}
+
+export function ScrollTop({ threshold = 400, className }: ScrollTopProps) {
+  const [visible, setVisible] = useState(false);
+  useEffect(() => {
+    const fn = () => setVisible(window.scrollY > threshold);
+    window.addEventListener('scroll', fn, { passive: true });
+    return () => window.removeEventListener('scroll', fn);
+  }, [threshold]);
+  if (!visible) return null;
+  return (
+    <button
+      type="button"
+      aria-label="Về đầu trang"
+      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+      className={`fixed bottom-6 right-6 z-[var(--z-toast)] grid size-10 cursor-pointer place-items-center rounded-pill border-none bg-accent text-body text-white shadow-[var(--shadow-pop)] transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40${className ? ` ${className}` : ''}`}
+    >
+      ↑
+    </button>
+  );
+}

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

@@ -0,0 +1,41 @@
+// ScrollTop stories — window-scroll floating button, appears past a threshold.
+// Component listens to window.scrollY (returns null while hidden).
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '../button/index';
+import { ScrollTop } from './index';
+
+/** Floating button that appears past a scroll threshold. */
+const meta = { title: 'Navigation/ScrollTop', component: ScrollTop, tags: ['autodocs'] } satisfies Meta<typeof ScrollTop>;
+export default meta;
+type S = StoryObj<typeof meta>;
+
+function TallPage({ threshold }: { threshold?: number }) {
+  return (
+    <div>
+      <p className="text-label text-ink3">
+        Scroll the page (or click the button) — the floating pill appears after {threshold ?? 400}px.
+      </p>
+      <div className="my-3">
+        <Button onClick={() => window.scrollTo({ top: 1200, behavior: 'smooth' })}>Scroll down ↓</Button>
+      </div>
+      <div className="flex flex-col gap-2">
+        {Array.from({ length: 40 }, (_, i) => (
+          <div key={i} className="rounded-lg border border-line bg-s2 p-3 text-body text-ink2">
+            Filler block {i + 1}
+          </div>
+        ))}
+      </div>
+      <ScrollTop threshold={threshold} />
+    </div>
+  );
+}
+
+export const Default: S = {
+  name: 'Default — appears after 400px (scroll to see)',
+  render: () => <TallPage />,
+};
+
+export const CustomThreshold: S = {
+  name: 'Custom threshold — appears after 1200px',
+  render: () => <TallPage threshold={1200} />,
+};

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

@@ -0,0 +1,37 @@
+import { act, cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { ScrollTop } from './index.js';
+afterEach(cleanup);
+describe('ScrollTop', () => {
+  it('scrollY < threshold → ẩn', () => {
+    const { container } = render(<ScrollTop />);
+    expect(container.firstElementChild).toBeNull();
+  });
+});
+
+describe('ScrollTop — visibility + action', () => {
+  function setScrollY(v: number) {
+    Object.defineProperty(window, 'scrollY', { value: v, configurable: true });
+    // scroll listener setState ngoài React event — bọc act() để flush ngay
+    act(() => {
+      window.dispatchEvent(new Event('scroll'));
+    });
+  }
+
+  it('scrollY > threshold → nút hiện + aria-label; click → scrollTo top', async () => {
+    const scrollTo = vi.fn();
+    window.scrollTo = scrollTo as unknown as typeof window.scrollTo;
+    render(<ScrollTop />);
+    setScrollY(600);
+    const btn = screen.getByRole('button', { name: 'Về đầu trang' });
+    await userEvent.setup().click(btn);
+    expect(scrollTo).toHaveBeenCalledWith(expect.objectContaining({ top: 0 }));
+  });
+
+  it('custom threshold — scrollY dưới threshold → ẩn', () => {
+    render(<ScrollTop threshold={100} />);
+    setScrollY(50);
+    expect(screen.queryByRole('button', { name: 'Về đầu trang' })).toBeNull();
+  });
+});

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

@@ -0,0 +1,47 @@
+// Segmented — dãy tuỳ chọn thumb-chọn (antd: container #f5f5f5 radius 8 p-1,
+// item active = container trắng radius 6 shadow nhỏ).
+import type { ReactNode } from 'react';
+
+export interface SegmentedProps {
+  /** Các tuỳ chọn — value phải khả định duy nhất; disabled → không bấm được. */
+  options: Array<{ label: ReactNode; value: string; disabled?: boolean }>;
+  /** Tuỳ chọn đang chọn (controlled). */
+  value?: string;
+  /** Callback khi chọn tuỳ chọn khác. */
+  onChange?: (value: string) => void;
+  /** Nhãn a11y cho radiogroup (aria-label). */
+  ariaLabel?: string;
+  className?: string;
+}
+
+export function Segmented({ options, value, onChange, ariaLabel, className }: SegmentedProps) {
+  return (
+    <div
+      role="radiogroup"
+      aria-label={ariaLabel}
+      className={`inline-flex items-center gap-1 rounded-lg bg-s3 p-1${className ? ` ${className}` : ''}`}
+    >
+      {options.map((option) => {
+        const isActive = option.value === value;
+        const isDisabled = option.disabled === true;
+        return (
+          <button
+            key={option.value}
+            type="button"
+            role="radio"
+            aria-checked={isActive}
+            disabled={isDisabled}
+            onClick={() => !isDisabled && onChange?.(option.value)}
+            className={`rounded-lg border-none px-3 py-1 text-body transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ${
+              isDisabled
+                ? 'cursor-not-allowed text-ink4'
+                : `cursor-pointer active:opacity-70 ${isActive ? 'bg-s2 text-ink shadow-sm' : 'bg-transparent text-ink2 hover:text-ink'}`
+            }`}
+          >
+            {option.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,126 @@
+// Segmented stories — Default / Controlled (useState) / ManyOptions / DarkTheme.
+// Component has NO disabled/size prop (see types) — don't invent variants.
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { Icon } from '../icons/index';
+import { Segmented } from './index';
+/** Compact single-choice switcher without content panels. */
+const meta = { title: 'Navigation/Segmented', component: Segmented, tags: ['autodocs'] } satisfies Meta<typeof Segmented>;
+export default meta;
+type S = StoryObj<typeof meta>;
+
+const OPTIONS = [
+  { label: 'Day', value: 'day' },
+  { label: 'Week', value: 'week' },
+  { label: 'Month', value: 'month' },
+];
+
+export const Default: S = {
+  name: 'Default — s2 thumb on s3 track',
+  args: { options: OPTIONS, value: 'day', onChange: () => {} },
+};
+
+function ControlledDemo() {
+  const [value, setValue] = useState('day');
+  return (
+    <div className="flex items-center gap-3">
+      <Segmented options={OPTIONS} value={value} onChange={setValue} />
+      <span className="text-label text-ink3">value: {value}</span>
+    </div>
+  );
+}
+
+export const Controlled: S = {
+  args: { options: OPTIONS },
+  name: 'Controlled — useState + value readout',
+  render: () => <ControlledDemo />,
+};
+
+export const ManyOptions: S = {
+  name: 'Many options — 5 items',
+  args: {
+    options: [...OPTIONS, { label: 'Quarter', value: 'quarter' }, { label: 'Year', value: 'year' }],
+    value: 'quarter',
+    onChange: () => {},
+  },
+};
+
+export const IconOptions: S = {
+  name: 'Icon options — Icon inside ReactNode label',
+  args: {
+    options: [
+      {
+        label: (
+          <span className="flex items-center gap-1.5">
+            <Icon name="calendar" size={14} />
+            Schedule
+          </span>
+        ),
+        value: 'schedule',
+      },
+      {
+        label: (
+          <span className="flex items-center gap-1.5">
+            <Icon name="users" size={14} />
+            Team
+          </span>
+        ),
+        value: 'team',
+      },
+      {
+        label: (
+          <span className="flex items-center gap-1.5">
+            <Icon name="file" size={14} />
+            Docs
+          </span>
+        ),
+        value: 'docs',
+      },
+    ],
+    value: 'team',
+    onChange: () => {},
+  },
+};
+
+export const DarkTheme: S = {
+  args: { options: OPTIONS },
+  name: 'Dark theme — s2 thumb on s3 track',
+  render: () => (
+    <div data-bp-theme="dark" className="inline-flex rounded-xl bg-s2 p-4">
+      <Segmented options={OPTIONS} value="week" onChange={() => {}} />
+    </div>
+  ),
+};
+
+// ── Real-world usage (2026-10-25): inbox filters ──
+
+const INBOX_COUNTS: Record<string, number> = { all: 24, unread: 6, flagged: 3 };
+
+/** InboxFilters — filter bar with live count: the segmented value drives what the
+ * list below renders. */
+export const InboxFilters: StoryObj = {
+  name: 'Inbox filters — All / Unread / Flagged with live count',
+  render: () => <InboxFiltersDemo />,
+};
+
+function InboxFiltersDemo() {
+  const [filter, setFilter] = useState('all');
+  return (
+    <div className="flex w-full max-w-md flex-col gap-3 rounded-xl border border-line bg-s1 p-4">
+      <div className="flex items-center justify-between gap-3">
+        <Segmented
+          ariaLabel="Lọc hộp thư"
+          value={filter}
+          onChange={setFilter}
+          options={[
+            { label: 'Tất cả', value: 'all' },
+            { label: 'Chưa đọc', value: 'unread' },
+            { label: 'Đánh dấu', value: 'flagged' },
+          ]}
+        />
+        <span className="text-meta text-ink3">{`${INBOX_COUNTS[filter]} mục`}</span>
+      </div>
+      <p className="m-0 text-meta text-ink3">Filter value drives the list query — swap the panel for your inbox.</p>
+    </div>
+  );
+}

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

@@ -0,0 +1,77 @@
+// Segmented tests — radiogroup + active + onChange.
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Segmented } from './index.js';
+
+afterEach(cleanup);
+
+const OPTIONS = [
+  { label: 'Ngày', value: 'day' },
+  { label: 'Tuần', value: 'week' },
+];
+
+describe('Segmented', () => {
+  it('radiogroup + active = value; click → onChange', async () => {
+    const onChange = vi.fn();
+    render(<Segmented options={OPTIONS} value="day" onChange={onChange} />);
+    expect(screen.getByRole('radio', { name: 'Ngày' })).toHaveAttribute('aria-checked', 'true');
+    await userEvent.setup().click(screen.getByRole('radio', { name: 'Tuần' }));
+    expect(onChange).toHaveBeenCalledWith('week');
+  });
+});
+
+describe('Segmented — branch phụ (Tier 5 sweep)', () => {
+  it('className passthrough + item không active class thường', () => {
+    const { container } = render(
+      <Segmented options={OPTIONS} value="week" className="marker" onChange={vi.fn()} />,
+    );
+    expect(container.firstElementChild).toHaveClass('marker');
+    expect(screen.getByRole('radio', { name: 'Tuần' }).className).toContain('shadow');
+  });
+
+  it('role=radiogroup + mọi radio khác aria-checked=false', () => {
+    render(<Segmented options={OPTIONS} value="day" onChange={vi.fn()} />);
+    const group = screen.getByRole('radiogroup');
+    expect(group).toBeInTheDocument();
+    const radios = screen.getAllByRole('radio');
+    expect(radios).toHaveLength(2);
+    expect(radios[1]).toHaveAttribute('aria-checked', 'false');
+  });
+
+  it('uncontrolled (không value) → không item nào active; click vẫn onChange payload', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Segmented options={OPTIONS} onChange={onChange} />);
+    expect(screen.getByRole('radio', { name: 'Ngày' })).toHaveAttribute('aria-checked', 'false');
+    await user.click(screen.getByRole('radio', { name: 'Tuần' }));
+    expect(onChange).toHaveBeenCalledWith('week');
+  });
+
+  it('options rỗng → radiogroup trống, không radio', () => {
+    render(<Segmented options={[]} onChange={vi.fn()} />);
+    expect(screen.getByRole('radiogroup')).toBeInTheDocument();
+    expect(screen.queryByRole('radio')).toBeNull();
+  });
+
+  // ── Case-coverage audit 2026-10-18 (antd parity: disabled option) ──
+
+  it('option disabled → không bấm được, không gọi onChange (antd parity)', async () => {
+    const onChange = vi.fn();
+    render(
+      <Segmented
+        options={[
+          { label: 'Ngày', value: 'day' },
+          { label: 'Khoá', value: 'locked', disabled: true },
+        ]}
+        value="day"
+        onChange={onChange}
+      />,
+    );
+    const locked = screen.getByRole('radio', { name: 'Khoá' });
+    expect(locked).toBeDisabled();
+    expect(locked).toHaveClass('cursor-not-allowed');
+    await userEvent.click(locked);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});