# shadcn/ui ↔ HaTchi-MaXchi parity

Auto-generated by `tools/shadcn_parity.py`. Do not hand-edit the tables.

Regenerate: `python packages/hatchi-maxchi/tools/shadcn_parity.py --write`

**Catalogue pin:** 2026-07-12 · source: https://ui.shadcn.com/docs/components

Goal: **parity at minimum** — every shadcn surface UX developers expect
has a Hyperpart (or an explicit refuse/n-a). The /improve loop promotes
`gap` → `partial` → `parity` via strategy `shadcn_parity` + dual-locks.

## Summary

| Status | Count |
|--------|------:|
| **parity** | 37 |
| **partial** | 26 |
| **gap** (placeholders) | 0 |
| **n/a** | 1 |
| **total shadcn** | 64 |
| HM Hyperparts (registry) | 87 |

## Mapping

| shadcn | status | HM map | notes |
|--------|--------|--------|-------|
| `accordion` | **parity** | `accordion` | Gallery Hyperpart; dual-lock optional |
| `alert` | **parity** | `alert` | Feedback surface |
| `alert-dialog` | **partial** | `confirm,confirm-panel,dialog` | HM splits native confirm vs confirm-gate vs dialog — map job, not name |
| `aspect-ratio` | **parity** | `aspect-ratio` | Gallery Hyperpart — CSS aspect-ratio + data-dz-ratio presets |
| `attachment` | **partial** | `form:file-upload,pdf` | File upload + PDF viewer exist; no dedicated attachment chip list |
| `avatar` | **parity** | `avatar` | Gallery |
| `badge` | **parity** | `badge` | Gallery + tone system |
| `breadcrumb` | **parity** | `breadcrumb` | Gallery |
| `bubble` | **parity** | `bubble` | Gallery Hyperpart — chat bubble shell; data-dz-from in|out |
| `button` | **parity** | `button` | Gallery + data-dz-variant |
| `button-group` | **partial** | `toggle-group,toolbar,controls` | Compose toggle-group / toolbar; no dedicated button-group id |
| `calendar` | **partial** | `date-range` | Date-range + CalendarGrid emit exist; no full month-picker Hyperpart |
| `card` | **parity** | `card` | Gallery + dashboard-card chrome |
| `carousel` | **parity** | `carousel` | Gallery Hyperpart — SSR strip + data-dz-active slide; controller deferred |
| `chart` | **partial** | `bar-chart,time-series,radar,sparkline,histogram,box-plot,funnel,heatmap,bullet,bar-track,chart-legend` | HM owns server-SVG chart family; shadcn is Recharts client wrapper |
| `checkbox` | **partial** | `field,form` | Native form field; not a named Hyperpart (deliberate) |
| `collapsible` | **partial** | `accordion` | Accordion covers disclosure; single collapsible root optional |
| `combobox` | **parity** | `combobox` | schema+DOM dual-lock |
| `command` | **parity** | `command` | DOM-only dual-lock |
| `context-menu` | **partial** | `menu` | menu Hyperpart; right-click affordance not dual-locked |
| `data-table` | **partial** | `grid,list-region,table` | grid + list-region + grid-edit dual-locks; not named data-table |
| `date-picker` | **partial** | `date-range` | Native date + date-range Hyperpart; flatpickr retired |
| `dialog` | **parity** | `dialog` | DOM-only dual-lock |
| `direction` | **n/a** | `—` | RTL dir helper — page/theme concern, not a part |
| `drawer` | **parity** | `drawer` | Gallery; sheet maps here |
| `dropdown-menu` | **partial** | `menu` | menu Hyperpart covers dropdown job |
| `empty` | **parity** | `empty-state` | empty-state Hyperpart |
| `field` | **parity** | `field,form-chrome` | field-triad + form chrome |
| `hover-card` | **parity** | `hover-card` | Gallery Hyperpart — CSS :hover/:focus-within panel |
| `input` | **partial** | `field,form` | Native inputs via field triad — not a decorative Input part |
| `input-group` | **partial** | `form-chrome` | Addon/prefix chrome lives in form-chrome |
| `input-otp` | **partial** | `two-factor` | two-factor Hyperpart; general OTP input not extracted |
| `item` | **parity** | `item` | Gallery Hyperpart — media + title + description + actions row |
| `kbd` | **parity** | `kbd` | Gallery Hyperpart; styles in hm-core.css (.dz-kbd) |
| `label` | **partial** | `field` | Label is part of field triad, not standalone |
| `marker` | **parity** | `marker` | Gallery Hyperpart — map pin chrome + label; host owns projection |
| `menubar` | **parity** | `menubar` | Gallery Hyperpart — horizontal File/Edit/View via native details |
| `message` | **parity** | `message` | Gallery Hyperpart — chat message row (media + meta + bubble) |
| `message-scroller` | **parity** | `message-scroller` | Gallery Hyperpart — chat transcript scroller; composes message |
| `native-select` | **partial** | `field,combobox` | Native select via forms; combobox enhances |
| `navigation-menu` | **parity** | `navigation-menu` | Gallery Hyperpart — top mega-nav via native details; distinct from app-shell |
| `pagination` | **parity** | `pagination` | Gallery Hyperpart |
| `popover` | **parity** | `popover` | Gallery |
| `progress` | **parity** | `progress,progress-region` | Bar + stage chips |
| `radio-group` | **partial** | `field,toggle-group` | Native radios / toggle-group; not named radio-group |
| `resizable` | **partial** | `master-detail,grid-resize` | master-detail + grid-resize cover split panes; no generic Resizable |
| `scroll-area` | **partial** | `layout,mobile-scroll` | Scroll containment CSS; no ScrollArea part |
| `select` | **partial** | `combobox,field` | combobox dual-lock + native select |
| `separator` | **parity** | `separator` | Gallery |
| `sheet` | **partial** | `drawer` | Drawer is the sheet/side-panel Hyperpart |
| `sidebar` | **parity** | `app-shell,sidebar-layout` | app-shell dual-lock + layout primitive |
| `skeleton` | **parity** | `skeleton` | Gallery |
| `slider` | **parity** | `slider` | DOM-only dual-lock |
| `sonner` | **partial** | `fragments` | Toast stack in fragments/htmx states — not named sonner |
| `spinner` | **partial** | `htmx-states` | dz-spinner-* in htmx-states; not a gallery Hyperpart |
| `switch` | **parity** | `switch` | Gallery Hyperpart — progressive checkbox + data-dz-switch; dual-lock later |
| `table` | **partial** | `grid,list-region,table` | grid dual-lock + list-region + CSS table |
| `tabs` | **parity** | `tabs` | DOM-only dual-lock |
| `textarea` | **partial** | `field,form` | Native textarea via field triad |
| `toast` | **parity** | `toast` | Dual-lock Hyperpart: stack host, title/actions, pause-on-hover |
| `toggle` | **parity** | `toggle` | Gallery Hyperpart — button + aria-pressed; distinct from switch/toggle-group |
| `toggle-group` | **parity** | `toggle-group` | Gallery |
| `tooltip` | **parity** | `tooltip` | Gallery |
| `typography` | **partial** | `layout` | Prose via layout/text primitives; no Typography Hyperpart |

## Gaps (improve-loop placeholders)

Each row is a candidate `HMC-NNN` scope `shadcn_parity <id>`.
Playbook: `.claude/commands/improve/strategies/shadcn_parity.md`.

| # | shadcn | suggested Hyperpart id | notes |
|--:|--------|------------------------|-------|

## Status definitions

| status | meaning |
|--------|---------|
| parity | First-class Hyperpart (or intentional equivalent name) |
| partial | Job covered by composition / forms / related part |
| gap | Missing surface — seed PENDING backlog row |
| n/a | Explicitly not a Hyperpart target |

## Improve loop

```bash
python packages/hatchi-maxchi/tools/shadcn_parity.py --gaps-only
/improve hm-convergence shadcn_parity
```

Prefer promoting **gap** rows that have a Dazzle emission path or
clear gallery partial. Dual-lock after the surface exists
(`dual_lock_expand`).