create-wakii-stack 0.0.0-stage → 0.1.0

package/stack-template/app/ui-kit/src/ui/input/input-search.tsx

@@ -0,0 +1,116 @@
+// Input.Search — antd parity (docs/parity-matrix.md Gap P0): input + nút search
+// dính bên phải trong cùng field. API antd: `onSearch(text)` (Enter hoặc click),
+// `enterButton` (true → nút primary icon; ReactNode → nút default kèm nội dung),
+// `loading` (Spinner thay icon + chặn search tiếp — không stack request).
+// Style cùng họ Input (h-6/8/10, border line, focus ring accent, invalid đỏ) —
+// wrapper mang viền + focus-within, input trần bên trong (pattern affix antd).
+import { useRef, useState, type InputHTMLAttributes, type ReactNode } from 'react';
+import { Icon } from '../icons/index';
+import { Spinner } from '../spinner/index';
+
+export interface InputSearchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'suffix'> {
+  /** Gọi khi search (Enter hoặc click nút) — tham số là giá trị input hiện tại. */
+  onSearch?: (value: string) => void;
+  /** true → nút primary icon search; ReactNode → nút default với nội dung đó; bỏ → icon ghost. */
+  enterButton?: boolean | ReactNode;
+  /** Đang loading — Spinner thay icon + chặn Enter/click phát thêm (antd loading). */
+  loading?: boolean;
+  /** Nút × xoá giá trị — hiện khi có text; xoá KHÔNG phát onSearch (chỉ onChange). */
+  allowClear?: boolean;
+  /** Error state — viền + ring đỏ như Input `invalid`. */
+  invalid?: boolean;
+  size?: 'small' | 'middle' | 'large';
+  className?: string;
+}
+
+const SIZE_CLS = { small: 'h-6 text-label', middle: 'h-8 text-body', large: 'h-10 text-body' } as const;
+// Depth contract: rest bg-s3 lún + ele-1 → focus bg-s1 + ring 3px accent/40 + ele-2,
+// mọi transition ease-smooth (direction-approved.md 2026-10-19).
+const SMOOTH = 'transition-[background-color,border-color,box-shadow,color,transform] duration-200 ease-[var(--ease-smooth)]';
+const RING_OK = 'focus-within:border-accent-hi focus-within:ring-[3px] focus-within:ring-accent/40';
+const RING_INVALID = 'focus-within:border-st-fail focus-within:ring-[3px] focus-within:ring-st-fail/40';
+
+export function SearchInput({
+  onSearch,
+  enterButton = false,
+  loading = false,
+  allowClear = false,
+  invalid = false,
+  size = 'middle',
+  className,
+  value,
+  onChange,
+  onKeyDown,
+  disabled = false,
+  ...rest
+}: InputSearchProps) {
+  const [inner, setInner] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+  const controlled = value !== undefined;
+  const text = String((controlled ? value : inner) ?? '');
+
+  function clearValue() {
+    if (disabled) return;
+    if (!controlled) setInner('');
+    onChange?.({ target: { value: '' } } as unknown as React.ChangeEvent<HTMLInputElement>);
+    inputRef.current?.focus();
+  }
+
+  function fire() {
+    if (loading || disabled) return;
+    onSearch?.(text);
+  }
+
+  const buttonCls = enterButton
+    ? 'bg-accent text-white hover:bg-accent-hi'
+    : 'border-l border-line bg-transparent text-ink3 hover:bg-s3 hover:text-accent';
+
+  return (
+    <span
+      className={`inline-flex w-full items-stretch overflow-hidden rounded-lg border bg-s3 shadow-[var(--ele-1)] ${SMOOTH} focus-within:bg-s1 focus-within:shadow-[var(--ele-2)] focus-within:outline-none ${SIZE_CLS[size]} ${invalid ? RING_INVALID : RING_OK}${disabled ? ' cursor-not-allowed bg-ink/5 shadow-none' : ''}${className ? ` ${className}` : ''}`}
+    >
+      <input
+        ref={inputRef}
+        value={controlled ? value : inner}
+        onChange={(e) => {
+          if (!controlled) setInner(e.target.value);
+          onChange?.(e);
+        }}
+        onKeyDown={(e) => {
+          onKeyDown?.(e);
+          if (e.key === 'Enter') fire();
+        }}
+        disabled={disabled}
+        className={`min-w-0 flex-1 border-none bg-transparent pl-3 outline-none ${SIZE_CLS[size]} text-ink placeholder:text-ink4 disabled:cursor-not-allowed disabled:text-ink4`}
+        {...rest}
+      />
+      {allowClear && text !== '' && !disabled && (
+        <button
+          type="button"
+          aria-label="Xoá nội dung tìm kiếm"
+          onClick={clearValue}
+          className={`shrink-0 cursor-pointer border-none bg-transparent pr-0.5 text-ink3 hover:text-ink2 focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:outline-none ${SMOOTH}`}
+        >
+          <Icon name="times" size={12} />
+        </button>
+      )}
+      <button
+        type="button"
+        // icon-only (default + enterButton=true) cần name; ReactNode tự có text content
+        aria-label={enterButton === true || !enterButton ? 'Search' : undefined}
+        disabled={disabled}
+        onClick={fire}
+        className={`group/search inline-flex shrink-0 cursor-pointer items-center justify-center gap-1 border-none px-3 text-label font-medium focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-[var(--bg-disabled)] disabled:text-ink4 ${SMOOTH} active:translate-y-px ${buttonCls}${loading ? ' cursor-wait' : ''}`}
+      >
+        {loading ? (
+          <Spinner size="small" label="" aria-hidden="true" />
+        ) : enterButton === true || !enterButton ? (
+          /* Icon slide 2px hover (depth contract — icon slide trong button hover) */
+          <Icon name="search" size={14} className="transition-transform duration-200 ease-[var(--ease-smooth)] group-hover/search:translate-x-[2px]" />
+        ) : (
+          enterButton
+        )}
+      </button>
+    </span>
+  );
+}

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

@@ -0,0 +1,176 @@
+// Parity matrix antd→tokens: docs/parity-matrix.md
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Input, Textarea } from './index';
+import { Button } from '../button/index';
+import { Field } from '../field/index';
+import { Icon } from '../icons/index';
+
+const meta = {
+  title: 'Forms/Input',
+  component: Input,
+  tags: ['autodocs'],
+  argTypes: {
+    invalid: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+} satisfies Meta<typeof Input>;
+export default meta;
+type S = StoryObj<typeof meta>;
+
+type Story = StoryObj<typeof meta>;
+
+export const CoBan: Story = {
+  args: { 'aria-label': 'Tiêu đề', placeholder: 'Nhập tiêu đề…' },
+};
+
+export const Invalid: Story = {
+  args: { 'aria-label': 'Email', placeholder: 'email@demo.local', invalid: true },
+};
+
+export const VungNhapNhieuDong: Story = {
+  name: 'Textarea',
+  render: () => (
+    <div style={{ display: 'grid', gap: 12, maxWidth: 480 }}>
+      <Textarea aria-label="Mô tả" placeholder="Mô tả…" />
+      <Textarea aria-label="Lỗi" placeholder="Mô tả…" invalid />
+    </div>
+  ),
+};
+
+/** Sizes — h-6 / h-8 (default) / h-10, same scale as Select/Button. */
+export const Sizes: Story = {
+  name: 'Sizes — small / middle / large',
+  render: () => (
+    <div className="grid max-w-[320px] gap-3">
+      <Input size="small" aria-label="Small size" placeholder="Small (h-6)" />
+      <Input aria-label="Middle size" placeholder="Middle (h-8, default)" />
+      <Input size="large" aria-label="Large size" placeholder="Large (h-10)" />
+    </div>
+  ),
+};
+
+/** Affix — prefix icon / suffix text inside one bordered wrapper (antd affix pattern). */
+export const Affix: Story = {
+  name: 'Affix — prefix icon + suffix text',
+  render: () => (
+    <div className="grid max-w-[320px] gap-3">
+      <Input aria-label="Search tasks" prefix={<Icon name="search" size={14} />} placeholder="Search tasks…" />
+      <Input aria-label="Weight" suffix="kg" placeholder="0" />
+    </div>
+  ),
+};
+
+/** AllowClear — shows the × button once there is a value; click clears (controlled). */
+export const AllowClear: Story = {
+  name: 'AllowClear — × clears the value (controlled)',
+  render: () => <InputAllowClearDemo />,
+};
+
+/** Disabled — locked, dimmed canvas. */
+export const Disabled: Story = {
+  args: { 'aria-label': 'Locked input', value: 'Managed by your organization', disabled: true },
+};
+
+/** TextareaCount — showCount + maxLength renders a N/M counter below. */
+export const TextareaCount: Story = {
+  name: 'Textarea — showCount + maxLength',
+  render: () => <TextareaCountDemo />,
+};
+
+function InputAllowClearDemo() {
+  const [v, setV] = useState('Type then clear…');
+  return (
+    <div className="grid max-w-[320px] gap-3">
+      <Input aria-label="Clearable input" allowClear value={v} onChange={(e) => setV(e.target.value)} placeholder="Type something…" />
+      <p className="m-0 font-mono text-meta text-ink3">value: <strong className="text-ink">{v || '—'}</strong></p>
+    </div>
+  );
+}
+
+function TextareaCountDemo() {
+  const [v, setV] = useState('');
+  return (
+    <Textarea
+      aria-label="Short bio"
+      value={v}
+      onChange={(e) => setV(e.target.value)}
+      maxLength={120}
+      showCount
+      rows={3}
+      placeholder="Tell us about yourself…"
+    />
+  );
+}
+
+/* ── Real-world cases (mission #13 — real-world stories sweep) ── */
+
+// Local wrapper — sign-up form state (email validation + password toggle).
+function SignUpFormInner() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const emailInvalid = submitted && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+  const passwordShort = submitted && password.length < 8;
+
+  return (
+    <form
+      className="flex w-80 max-w-full flex-col gap-4"
+      onSubmit={(e) => {
+        e.preventDefault();
+        setSubmitted(true);
+      }}
+    >
+      <Field label="Email" htmlFor="signup-email" required error={emailInvalid ? 'Enter a valid email address' : undefined}>
+        <Input
+          id="signup-email"
+          type="email"
+          invalid={emailInvalid}
+          placeholder="you@company.com"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          autoComplete="email"
+        />
+      </Field>
+      <Field
+        label="Password"
+        htmlFor="signup-password"
+        required
+        hint="At least 8 characters"
+        error={passwordShort ? 'Password is too short' : undefined}
+      >
+        <Input
+          id="signup-password"
+          type={showPassword ? 'text' : 'password'}
+          invalid={passwordShort}
+          placeholder="••••••••"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          autoComplete="new-password"
+          suffix={
+            <button
+              type="button"
+              aria-label={showPassword ? 'Hide password' : 'Show password'}
+              className="cursor-pointer border-none bg-transparent text-ink3 hover:text-ink"
+              onClick={() => setShowPassword((s) => !s)}
+            >
+              <Icon name={showPassword ? 'eye-slash' : 'eye'} size={14} />
+            </button>
+          }
+        />
+      </Field>
+      <Button htmlType="submit" type="primary" block>
+        Create account
+      </Button>
+      {submitted && !emailInvalid && !passwordShort && (
+        <p className="m-0 text-meta text-st-done">Looks good — account would be created (demo).</p>
+      )}
+    </form>
+  );
+}
+
+export const SignUpForm: S = {
+  name: 'SignUpForm — real sign-up: validation + password toggle',
+  render: () => <SignUpFormInner />,
+};

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

@@ -0,0 +1,106 @@
+// Input/Textarea tests — antd look: border line, focus ring accent, invalid đỏ.
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Input, Textarea } from './index.js';
+
+afterEach(cleanup);
+
+describe('Input', () => {
+  it('render input + onChange nhận giá trị gõ', async () => {
+    const onChange = vi.fn();
+    render(<Input aria-label="Tiêu đề" onChange={onChange} />);
+    await userEvent.setup().type(screen.getByLabelText('Tiêu đề'), 'abc');
+    expect(onChange).toHaveBeenCalledTimes(3);
+  });
+
+  it('invalid → class viền đỏ (error state)', () => {
+    render(<Input aria-label="Email" invalid />);
+    expect(screen.getByLabelText('Email').className).toContain('border-st-fail');
+  });
+
+  it('passthrough value + placeholder + disabled', () => {
+    render(<Input aria-label="T" value="giữ draft" placeholder="nhập…" disabled readOnly />);
+    const el = screen.getByLabelText('T') as HTMLInputElement;
+    expect(el.value).toBe('giữ draft');
+    expect(el).toHaveAttribute("placeholder", "nhập…");
+    expect(el).toBeDisabled();
+  });
+
+  it('className passthrough', () => {
+    render(<Input aria-label="W" className="flex-1" />);
+    expect(screen.getByLabelText('W')).toHaveClass('flex-1');
+  });
+});
+
+describe('Textarea', () => {
+  it('render textarea + gõ được', async () => {
+    render(<Textarea aria-label="Mô tả" />);
+    await userEvent.setup().type(screen.getByLabelText('Mô tả'), 'mô tả ngắn');
+    expect(screen.getByLabelText('Mô tả')).toHaveValue('mô tả ngắn');
+  });
+
+  it('invalid → viền đỏ', () => {
+    render(<Textarea aria-label="D" invalid />);
+    expect(screen.getByLabelText('D').className).toContain('border-st-fail');
+  });
+});
+
+describe('Input — affix + allowClear (Tier 1.5)', () => {
+  it('prefix/suffix → affix wrapper; input trần bên trong', () => {
+    render(<Input aria-label="Giá" prefix="https://" suffix=".vn" value="wakii" readOnly />);
+    const el = screen.getByLabelText('Giá');
+    expect(el.closest('span')).toHaveClass('inline-flex');
+    expect(screen.getByText('https://')).toBeInTheDocument();
+    expect(screen.getByText('.vn')).toBeInTheDocument();
+  });
+
+  it('allowClear controlled — có value → nút ×; click → onChange được gọi', async () => {
+    const onChange = vi.fn();
+    render(<Input aria-label="Tìm" allowClear value="giá trị" onChange={onChange} />);
+    await userEvent.setup().click(screen.getByRole('button', { name: 'Xoá' }));
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('size small → class h-6', () => {
+    render(<Input aria-label="S" size="small" />);
+    expect(screen.getByLabelText('S')).toHaveClass('h-6');
+  });
+});
+
+describe('Input — branch phụ (Tier 1.5)', () => {
+  it('allowClear + value rỗng → KHÔNG nút × (showClear false)', () => {
+    render(<Input aria-label="Q" allowClear value="" onChange={vi.fn()} />);
+    expect(screen.queryByRole('button', { name: 'Xoá' })).toBeNull();
+  });
+
+  it('prefix-only (không suffix/clear) → vẫn affix wrapper', () => {
+    render(<Input aria-label="P" prefix="$" value="1" readOnly />);
+    expect(screen.getByText('$')).toBeInTheDocument();
+  });
+});
+
+describe('Input — branch phụ (Tier 1.5)', () => {
+  it('size large → h-10; affix + invalid → wrapper ring đỏ', () => {
+    render(<Input aria-label="L" size="large" invalid prefix="$" value="5" readOnly />);
+    const el = screen.getByLabelText('L');
+    expect(el).toHaveClass('h-10');
+    expect(el.closest('span')).toHaveClass('border-st-fail');
+  });
+});
+
+describe('Textarea — showCount (Tier 1.5)', () => {
+  it('showCount + maxLength → đếm ký tự', () => {
+    render(<Textarea aria-label="Đếm" showCount maxLength={10} value="abc" readOnly />);
+    expect(screen.getByText('3/10')).toBeInTheDocument();
+  });
+});
+
+describe('Input — branch phụ (Tier 5 sweep)', () => {
+  it('allowClear + value rỗng → không ×; suffix-only → affix', () => {
+    const { rerender } = render(<Input aria-label="c" allowClear value="" onChange={vi.fn()} />);
+    expect(screen.queryByRole('button', { name: 'Xoá' })).toBeNull();
+    rerender(<Input aria-label="s" suffix="kg" value="5" readOnly />);
+    expect(screen.getByText('kg')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,39 @@
+// InputMask — pattern matching lite (9=số, a=chữ, *=alnum; ký tự khác = literal).
+import { useState, type InputHTMLAttributes } from 'react';
+
+export interface InputMaskProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
+  mask: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  ariaLabel?: string;
+  className?: string;
+}
+
+function applyMask(raw: string, mask: string): string {
+  let result = ''; let rawIdx = 0;
+  for (const m of mask) {
+    if (rawIdx >= raw.length) break;
+    if (m === '9') { if (/\d/.test(raw[rawIdx])) { result += raw[rawIdx]; rawIdx++; } else break; }
+    else if (m === 'a') { if (/[a-zA-Z]/.test(raw[rawIdx])) { result += raw[rawIdx]; rawIdx++; } else break; }
+    else if (m === '*') { result += raw[rawIdx]; rawIdx++; }
+    else { result += m; if (raw[rawIdx] === m) rawIdx++; }
+  }
+  return result;
+}
+
+export function InputMask({ mask, value: valueProp, onChange, ariaLabel, className, ...rest }: InputMaskProps) {
+  const [internal, setInternal] = useState('');
+  const value = valueProp ?? internal;
+  return (
+    <input
+      aria-label={ariaLabel}
+      value={value}
+      onChange={(e) => {
+        const masked = applyMask(e.target.value, mask);
+        setInternal(masked); onChange?.(masked);
+      }}
+      className={`h-8 w-full rounded-lg border border-line bg-s3 px-3 text-body text-ink placeholder:text-ink4 shadow-[var(--ele-1)] transition-[background-color,border-color,box-shadow] duration-200 ease-[var(--ease-smooth)] focus:border-accent-hi focus:bg-s1 focus:shadow-[var(--ele-2)] focus:ring-[3px] focus:ring-accent/40 focus:outline-none${className ? ` ${className}` : ''}`}
+      {...rest}
+    />
+  );
+}

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

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { InputMask } from './index';
+
+const meta = { title: 'Forms/InputMask', component: InputMask, tags: ['autodocs'] } satisfies Meta<typeof InputMask>;
+export default meta;
+type S = StoryObj<typeof meta>;
+
+/** Phone mask — digits + literal dash (9= digit). */
+export const Phone: S = { args: { mask: '9999-999-999', ariaLabel: 'Phone', placeholder: '0909-123-456' } };
+
+/** Date mask — nested literals DD/MM/YYYY. */
+export const Date: S = { args: { mask: '99/99/9999', ariaLabel: 'Date', placeholder: 'DD/MM/YYYY' } };
+
+/** Disabled — locked input (passthrough via native rest props). */
+export const Disabled: S = {
+  args: { mask: '9999-999-999', ariaLabel: 'Locked phone', value: '0909-123-456', disabled: true },
+};
+
+/** Controlled — useState demo: masked value shown next to the input. */
+export const Controlled: S = {
+  args: { mask: '99/99/9999' },
+  render: () => <InputMaskControlledDemo />,
+};
+
+/** CommonMasks — three common patterns side by side. */
+export const CommonMasks: S = {
+  args: { mask: '9999-999-999' },
+  render: () => (
+    <div className="grid max-w-[280px] gap-3">
+      <InputMask mask="9999-999-999" ariaLabel="Phone number" placeholder="0909-123-456" />
+      <InputMask mask="aa-99" ariaLabel="Stock code" placeholder="AB-12" />
+      <InputMask mask="99/99/9999" ariaLabel="Day" placeholder="DD/MM/YYYY" />
+    </div>
+  ),
+};
+
+function InputMaskControlledDemo() {
+  const [v, setV] = useState('');
+  return (
+    <div className="grid max-w-[280px] gap-3">
+      <InputMask mask="99/99/9999" ariaLabel="Date of birth" placeholder="DD/MM/YYYY" value={v} onChange={setV} />
+      <p className="m-0 font-mono text-meta text-ink3">value: <strong className="text-ink">{v || '—'}</strong></p>
+    </div>
+  );
+}

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

@@ -0,0 +1,57 @@
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { InputMask } from './index.js';
+afterEach(cleanup);
+
+describe('InputMask', () => {
+  it('mask 999-999: digits fill + dash literal', () => {
+    const onChange = vi.fn();
+    render(<InputMask mask="999-999" ariaLabel="phone" onChange={onChange} />);
+    const input = screen.getByLabelText('phone');
+    fireEvent.change(input, { target: { value: '123456' } });
+    expect(input).toHaveValue('123-456');
+    expect(onChange).toHaveBeenCalledWith('123-456');
+  });
+  it('mask aa-99: letters + digits', () => {
+    const onChange = vi.fn();
+    render(<InputMask mask="aa-99" ariaLabel="code" onChange={onChange} />);
+    fireEvent.change(screen.getByLabelText('code'), { target: { value: 'AB12' } });
+    expect(screen.getByLabelText('code')).toHaveValue('AB-12');
+  });
+});
+
+describe('InputMask — matrix (props thật: mask/value/onChange/ariaLabel + rest)', () => {
+  it('dừng ở ký tự không hợp lệ (digit mask nhận chữ → cắt tại đó)', () => {
+    const onChange = vi.fn();
+    render(<InputMask mask="999-999" ariaLabel="p" onChange={onChange} />);
+    fireEvent.change(screen.getByLabelText('p'), { target: { value: '12a456' } });
+    expect(screen.getByLabelText('p')).toHaveValue('12');
+    expect(onChange).toHaveBeenLastCalledWith('12');
+  });
+
+  it('controlled — value prop điều khiển hiển thị', () => {
+    const { rerender } = render(<InputMask mask="99-99" ariaLabel="c" value="12-34" />);
+    expect(screen.getByLabelText('c')).toHaveValue('12-34');
+    rerender(<InputMask mask="99-99" ariaLabel="c" value="56-78" />);
+    expect(screen.getByLabelText('c')).toHaveValue('56-78');
+  });
+
+  it('uncontrolled — không value → gõ qua state nội bộ', () => {
+    render(<InputMask mask="9-9" ariaLabel="u" />);
+    fireEvent.change(screen.getByLabelText('u'), { target: { value: '78' } });
+    expect(screen.getByLabelText('u')).toHaveValue('7-8');
+  });
+
+  it('rest props passthrough: placeholder + disabled', () => {
+    render(<InputMask mask="999" ariaLabel="d" placeholder="123" disabled />);
+    const input = screen.getByLabelText('d');
+    expect(input).toHaveAttribute('placeholder', '123');
+    expect(input).toBeDisabled();
+  });
+
+  it('a11y — aria-label là accessible name; className passthrough', () => {
+    const { container } = render(<InputMask mask="9" ariaLabel="Số lượng" className="marker" />);
+    expect(screen.getByLabelText('Số lượng')).toBeInTheDocument();
+    expect(container.firstElementChild).toHaveClass('marker');
+  });
+});

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

@@ -0,0 +1,125 @@
+// InputNumber — antd-fidelity (redo 2026-10-19): input + cột stepper LÒNG TRONG
+// control mép phải (2 nút full-height nửa trên/dưới, chevron Icon bộ chung 14px,
+// hairline border-t chia 2 nút, CHỈ bo góc NGOÀI theo radius control — flush tuyệt
+// đối, wrapper overflow-hidden; giữ fix e94b3e4). Hover bg-ink/5 · active bg-ink/10
+// + press-scale trên ICON (không scale nút — giữ fix "hở viền" 2026-10-18). Focus
+// ring vòng NGOÀI cả control (focus-within). Sizes h-6/8/10 ăn theo họ Input.
+// prefix/suffix affixes (pattern antd). Keyboard ↑↓, min/max/step clamp, disabled.
+import { useState, type FocusEvent, type ReactNode } from 'react';
+import { Icon } from '../icons/index.js';
+
+export interface InputNumberProps {
+  /** Giá trị khởi tạo lúc mount (đọc 1 lần — state text quản lý nội bộ, prop đổi sau
+   * không ghi đè text đang hiển thị). */
+  value?: number;
+  /** Callback giá trị mới: typing/blur commit hoặc stepper/↑↓. Text rỗng hoặc không
+   * phải số → null. Giá trị luôn đã clamp trong [min, max]. */
+  onChange?: (value: number | null) => void;
+  /** Cận dưới khi clamp (mặc định -Infinity). */
+  min?: number;
+  /** Cận trên khi clamp (mặc định Infinity). */
+  max?: number;
+  /** Bước nhảy của nút stepper và phím ↑↓ (mặc định 1). */
+  step?: number;
+  /** Kích thước theo họ Input: small h-6 · middle h-8 (mặc định) · large h-10. */
+  size?: 'small' | 'middle' | 'large';
+  /** Node hiển thị trước input (antd prefix). */
+  prefix?: ReactNode;
+  /** Node hiển thị sau input, TRƯỚC cột stepper (antd suffix). */
+  suffix?: ReactNode;
+  /** Khoá input + 2 nút stepper, cả nhóm mờ đi (bg-s3 + opacity). */
+  disabled?: boolean;
+  /** Trạng thái lỗi: viền đỏ --st-fail trên cả input lẫn cột stepper. */
+  invalid?: boolean;
+  /** Accessible name của input (ràng buộc a11y — luôn truyền). */
+  ariaLabel?: string;
+  /** Append sau structural classes — escape hatch pattern antd. */
+  className?: string;
+}
+
+function ChevronUpIcon({ className }: { className?: string }) {
+  return <Icon name="chevron-up" size={14} className={className} />;
+}
+function ChevronDownIcon({ className }: { className?: string }) {
+  return <Icon name="chevron-down" size={14} className={className} />;
+}
+
+const SIZE_CLS = { small: 'h-6 text-label', middle: 'h-8 text-body', large: 'h-10 text-body' } as const;
+
+export function InputNumber({
+  value, onChange, min = -Infinity, max = Infinity, step = 1, size = 'middle',
+  prefix, suffix, disabled = false, invalid = false, ariaLabel, className,
+}: InputNumberProps) {
+  const [text, setText] = useState(value !== undefined ? String(value) : '');
+
+  function commit(raw: string) {
+    const n = Number(raw);
+    if (raw === '' || Number.isNaN(n)) { onChange?.(null); return; }
+    onChange?.(Math.min(max, Math.max(min, n)));
+  }
+
+  /** Blur commit: NHẤT QUÁN đồng bộ text về giá trị đã clamp — nhập 99 (max 10) rồi
+   * blur thì ô input phải NHẢY về 10 thay vì kẹt số sai trên màn (onChange đã clamp
+   * từ trước nhưng text không sync → demo/UX "chưa đúng"). Gõ giữa chừng KHÔNG sync
+   * (commit per-keystroke giữ text thô — clamp chỉ ép ở blur, pattern antd). */
+  function commitOnBlur(raw: string) {
+    commit(raw);
+    const n = Number(raw);
+    if (raw !== '' && !Number.isNaN(n)) {
+      const clamped = Math.min(max, Math.max(min, n));
+      if (clamped !== n) setText(String(clamped));
+    }
+  }
+
+  function bump(delta: number) {
+    const base = Number(text) || 0;
+    const next = Math.min(max, Math.max(min, base + delta));
+    setText(String(next)); onChange?.(next);
+  }
+
+  const borderCls = invalid ? 'border-st-fail' : 'border-line focus-within:border-accent-hi';
+
+  return (
+    // Depth contract: rest bg-s3 + ele-1 → focus-within bg-s1 + ring 3px accent/40 + ele-2
+    <span
+      className={`inline-flex w-full items-stretch overflow-hidden rounded-lg border bg-s3 shadow-[var(--ele-1)] transition-[background-color,border-color,box-shadow] duration-200 ease-[var(--ease-smooth)] focus-within:bg-s1 focus-within:shadow-[var(--ele-2)] focus-within:ring-[3px] focus-within:ring-accent/40 ${borderCls}${disabled ? ' bg-s3 opacity-60 shadow-none' : ''}${className ? ` ${className}` : ''}`}
+    >
+      {prefix && <span className="inline-flex shrink-0 items-center pl-3 text-ink3">{prefix}</span>}
+      <input
+        type="number"
+        aria-label={ariaLabel}
+        value={text}
+        disabled={disabled}
+        onChange={(e) => { setText(e.target.value); commit(e.target.value); }}
+        onBlur={(e: FocusEvent<HTMLInputElement>) => commitOnBlur(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'ArrowUp') { e.preventDefault(); bump(step); }
+          if (e.key === 'ArrowDown') { e.preventDefault(); bump(-step); }
+        }}
+        className={`min-w-0 flex-1 border-none bg-transparent px-3 text-ink tabular-nums outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none ${SIZE_CLS[size]}`}
+      />
+      {suffix && <span className="inline-flex shrink-0 items-center text-ink3">{suffix}</span>}
+      {/* Stepper — 2 nút xếp dọc fill nửa control (h-1/2, tổng đúng chiều cao input,
+          không khe/overshoot). KHÔNG radius riêng: chỉ góc NGOÀI bo theo radius control
+          (up = top-right, down = bottom-right; container overflow-hidden clip theo
+          rounded-lg nên lying flush viền — góc trong = 0). Divider giữa = hairline
+          border-t border-line (border-box nên vẫn fit 100%). Press = nền sâu hơn +
+          scale trên ICON (group/up·down) — scale NÚT làm hở viền (fix 2026-10-18,
+          không hồi quy). Focus ring nằm ở wrapper (vòng NGOÀI cả control). */}
+      <span className={`flex flex-col border-l ${invalid ? 'border-st-fail' : 'border-line'} ${disabled ? 'opacity-50' : ''}`}>
+        <button
+          type="button" aria-label="Tăng" disabled={disabled} onClick={() => bump(step)}
+          className="group/up flex h-1/2 w-7 cursor-pointer items-center justify-center rounded-tr-lg rounded-br-none border-none bg-transparent text-ink2 transition-colors duration-200 ease-[var(--ease-smooth)] hover:bg-ink/5 hover:text-accent active:bg-ink/10"
+        >
+          <ChevronUpIcon className="transition-transform duration-150 ease-[var(--ease-smooth)] group-active/up:scale-90" />
+        </button>
+        <button
+          type="button" aria-label="Giảm" disabled={disabled} onClick={() => bump(-step)}
+          className="group/down flex h-1/2 w-7 cursor-pointer items-center justify-center rounded-br-lg rounded-tr-none border-t border-line bg-transparent text-ink2 transition-colors duration-200 ease-[var(--ease-smooth)] hover:bg-ink/5 hover:text-accent active:bg-ink/10"
+        >
+          <ChevronDownIcon className="transition-transform duration-150 ease-[var(--ease-smooth)] group-active/down:scale-90" />
+        </button>
+      </span>
+    </span>
+  );
+}