# EditableTextField

## 2026-07-28 — New atom: inline-editable value with text / select / date editors

**Prompted by:** Hellen Tran (PO) — frontend Account cluster (Sprint A atoms)

### What changed
- New atom `EditableTextField` (`packages/shadcn/src/components/ui/editable-text-field.tsx`).
- Display mode shows the formatted value + a pencil affordance (revealed on hover / focus);
  activating switches to an editor. Commit calls `onSave`; Escape cancels.
- Three `variant` editors: `text` (Input, commit on blur/Enter), `select` (Select with `items`,
  commit on choose), `date` (DatePicker, commit on pick). Supports `inputType` (email/tel),
  `formatDisplay`, `emptyLabel`/`placeholder`, and `disabled`.
- Pure & controlled — no auto-save timers, no API; parent owns value + persistence.

### Why
- The app's per-field inline edit (Profile/Contact rows: firstName, lastName, DOB→date, gender→
  select, postal→text) had no design-system equivalent. `EditableMoneyItem` is money-specific
  (swatch + currency + slider), so a general text/select/date inline field was needed for the
  Account Personal-details cards.

### Affected tokens / files
- `packages/shadcn/src/components/ui/editable-text-field.tsx` (new)
- `packages/shadcn/src/components/index.tsx`, `tsup.config.ts`, `package.json` (registration)
- `apps/docs/stories/shadcn/atoms/editable-text-field.stories.tsx` (new story)