atlas-react-kit 1.0.0 → 1.2.0

package/COMPONENTS.md

@@ -43,7 +43,7 @@ theme from `next-themes`, so toast consumers install that too.
 | `checkbox`                    | `Checkbox`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
 | `color-legend`                | `ColorLegend`; `title`, `items` as `{ color, range?, label }[]`, optional `caption`, `children`, `aria-label`, `className` (overlay chrome). No attribution.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 | `combobox`                    | `Combobox`; `options` as `{ value, label }[]`, `value`, `onValueChange`; optional placeholder, search, empty text, `creatable`, `normalizeCreateValue` (query → value or `null`), `createLabel`; trigger matches Input/SelectTrigger chrome; keyboard highlight scrolls into view; create is a listbox option selected with Enter                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `date-picker`                 | `DatePickerButton`, `toDate`, `formatLocalDate`, and the kit's own `DateRange`, `DateMatcher`, `DateLike`, and `DatePickerCalendarProps` types (no Day Picker types); `mode` `"single"` (default) or `"range"`; single `value` is `Date` or `yyyy-MM-dd`; range `value` is `{ from, to }`; trigger matches Input chrome; optional `numberOfMonths` (range default 1 below `md`, 2 at `md+`), `minDate` / `maxDate` (days outside are disabled), `side`, `aria-labelledby`, and `aria-describedby`                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| `date-picker`                 | `DatePickerButton`, `toDate`, `formatLocalDate`, and the kit's own `DateRange`, `DateMatcher`, `DateLike`, and `DatePickerCalendarProps` types (no Day Picker types); `mode` `"single"` (default) or `"range"`; single `value` is `Date` or `yyyy-MM-dd` (`clearable` adds a Clear row that emits `undefined`); range `value` is `{ from, to }`; trigger matches Input chrome; optional `numberOfMonths` (range default 1 below `md`, 2 at `md+`), `minDate` / `maxDate` (days outside are disabled), `side`, `aria-labelledby`, and `aria-describedby`                                                                                                                                                                                                                                                                                                                                                                 |
 | `date-time-picker`            | `DateTimePickerButton`, `resolveTimeStep`, `DEFAULT_TIME_STEP`; controlled `value` is `Date` or `null`; `onValueChange` emits `Date \                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | `dialog`                      | `Dialog`, trigger, portal, overlay, content, close, header, footer, title, description; `DialogContent` supports `showCloseButton`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
 | `dropdown-menu`               | `DropdownMenu` family (trigger, content, item, checkbox/radio items, label, separator, shortcut, sub menus); item `variant="destructive"` and `inset`; for commands, not values                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
@@ -52,10 +52,10 @@ theme from `next-themes`, so toast consumers install that too.
 | `field`                       | Field, label, legend, description, group, set, title, content, separator, error; `Field` supports `orientation`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 | `info-tip`                    | `InfoTip`, `InlineTip`; required `label` (aria-label); `title`, `description`, `children`, `layout` `box` \| `inline`, `side`, `align`, `badge`, `icon`, `className`. Popover, 20px glyph, 44px hit. Hover opens only on a fine pointer. Not a Tooltip.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 | `kanban`                      | `KanbanBoard<T>`, `KanbanSkeleton`, `KanbanColumn` and `KanbanDropTarget` types; `columns` (`{ id, label, color?, badge?, emptyLabel? }`), `items` (`{ id, position }`), `getColumnId`, `onMove(item, toColumnId, { beforePosition, afterPosition })` for every column change or reorder, `renderCard`; optional `onCardClick` (body becomes a button), `onComplete` / `onDelete` (Finish / Remove drop zones while dragging), `isLoading` (skeleton cards on a first load, dimmed board on a refetch), `emptyLabel`, `completeLabel`, `deleteLabel`. Layout comes from `items`, so an optimistic cache update is the only state. Keep `renderCard` and `onCardClick` stable (`useCallback`) and only the changed card re-renders. Cards drag by the grip (`Drag to move`); dnd-kit edge-scrolls while dragging, and off-screen columns get fades and scroll buttons. `KanbanSkeleton` takes `columnCount` (default 4). |
-| `input`, `textarea`, `label`  | `Input`, `Textarea`, `Label`; `Label` `required` shows a visible marker (set `required` on the control too)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| `input`, `textarea`, `label`  | `Input`, `Textarea`, `Label`; `Textarea` starts at `min-h-16` (override with `className`); `Label` `required` shows a visible marker (set `required` on the control too)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
 | `markdown`                    | `Markdown`, `MarkdownContent`; `content`, optional `className`. GFM via `react-markdown` + `remark-gfm` in this subpath only. Sanitized (no raw HTML; http/https/mailto/#/`/` URLs). Token styles, no typography plugin.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
 | `meter`                       | `Meter`; `value`, `max`, optional `min` (default 0), `fillClassName`, `markers` as `{ position, className? }[]`, required `aria-label`, `className`. `role="meter"`. Not `Progress`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| `nav-link`                    | `NavLink`, `navLinkVariants`; required `active` boolean, `asChild` for router links. Pill chrome: inactive `text-muted-foreground` + `hover:bg-accent`, active selected wash. No router.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| `nav-link`                    | `NavLink`, `navLinkVariants`, `isNavActive(pathname, href)` (true on the path or a page under it); required `active` boolean, `asChild` for router links. Pill chrome: inactive `text-muted-foreground` + `hover:bg-accent`, active selected wash. No router.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 | `page-header`                 | `PageHeader`; `title`, optional `description`, `actions`, `children` (under the description), `titleAs` (`h1` default), `titleClassName`. Stacks below `sm`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 | `pagination`                  | `Pagination`, `PaginationContent`, `PaginationItem`, `PaginationLink` (`isActive` sets `aria-current`, the selected wash, and a selected border; `disabled` drops the `href` for a page that does not exist, such as Previous on page 1), `PaginationPrevious`, `PaginationNext` (custom text becomes the link name), `PaginationEllipsis`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
 | `period-stepper`              | `PeriodStepper`; `label` (announced with `aria-live`), `stepLabel` ("month" names "Previous month"), `onPrevious`, `onNext`, optional `onToday` (no Today button without it), `labelClassName`. `PeriodStepperFrame` takes a `control(step, content)` render for another router's links. `next/period-stepper` takes `previousHref`, `todayHref`, `nextHref` instead.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
@@ -73,26 +73,27 @@ theme from `next-themes`, so toast consumers install that too.
 | `switch`                      | `Switch`; settings that apply immediately; square track and thumb                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 | `table`                       | Table, header, body, footer, row, head, cell, caption; root scroller is `min-w-0 overflow-x-auto` with a fade cue; cells are `px-2` below `sm`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
 | `table-body-skeleton`         | `TableBodySkeleton`; `columns`, optional `rows` (default 5)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| `tabs`                        | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, `TabsNav`, `tabsListVariants`, `tabsTriggerVariants`; list `variant` is `default` or `line`; style `TabsNav` links with `tabsTriggerVariants()`; `TabsNav` / `TabsList` scroll horizontally only (`overflow-y` hidden, `p-1` counted in the scroller height, edge fade, active item into view) — do not wrap them in `overflow-x-auto`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| `tabs`                        | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, `TabsNav`, `TabsNavLink`, `tabsListVariants`, `tabsTriggerVariants`; list `variant` is `default` or `line`; `TabsNavLink` is the link inside `TabsNav` (required `active`, `asChild` for a router link); `TabsNav` / `TabsList` scroll horizontally only (`overflow-y` hidden, `p-1` counted in the scroller height, edge fade, active item into view, mouse drag scrolls the row) — do not wrap them in `overflow-x-auto`                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 | `toast`                       | `Toaster`, `toast`; mount one `Toaster` (`position`, `closeButton` (default on), `expand`, `visibleToasts`, `duration`), then `toast(message, options)`. The stack expands on hover and while keyboard focus is inside it; collapsed toasts behind the front one are hidden, `.success`, `.info`, `.warning`, `.error`, `.loading`, `.dismiss(id?)`. Options: `id` (replaces that toast), `description`, `duration`, `action` / `cancel` as `{ label, onClick }`. Kit-owned API: no toast library is exposed                                                                                                                                                                                                                                                                                                                                                                                                            |
-| `toggle`                      | `Toggle`, `toggleVariants`, `selectedToggleChrome`; `variant`, `size`. Pressed state is the selected wash, text, and border via `data-state=on`, `aria-pressed`, and `aria-checked`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `toggle`                      | `Toggle`, `toggleVariants`; `variant`, `size`. `selectedToggleChrome` is deprecated: `toggleVariants()` already includes it. Pressed state is the selected wash, text, and border via `data-state=on`, `aria-pressed`, and `aria-checked`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
 | `toggle-group`                | `ToggleGroup`, `ToggleGroupItem`; `variant`, `size`. Items share `toggleVariants`, so single (radio) and multiple selections match a pressed `Toggle`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | `theme-provider`              | `ThemeProvider`, `useTheme`; optional `storageKey` (default `atlas-theme`), `enableShortcut` for the `d` toggle                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| `tooltip`                     | `Tooltip`, `TooltipTrigger`, `TooltipContent`, `TooltipProvider`; opens on hover and focus; short labels only                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `tooltip`                     | `Tooltip`, `TooltipTrigger`, `TooltipContent`, `TooltipProvider`; opens on hover and focus; short labels only; content keeps a `max-w-xs` reading width (override with `className`)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
 | `form/checkbox-field`         | `FormCheckboxField` (`checked`, `onCheckedChange(boolean)`, `label`, optional `description`, `controlPosition` `start` \| `end`, `meta`, `required`, `disabled`, `onBlur`) and `FormCheckboxGroupField<T>` (`label` as legend, `options` `{ value, label }[]`, `value: T[]`, `onValueChange` in option order, `className` lays out the options).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
 | `form/combobox-field`         | `FormComboboxField`; every `Combobox` prop plus `label`, `description`, `meta`, `required`; pass the field's `onBlur`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 | `form/control-field`          | `FormControlField`, type `FormControlProps`; `label`, optional `id`, `description`, `required`, `meta`, `submitted`, `showError`; `children` renders the control from `{ id, aria-invalid, aria-describedby, aria-required }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 | `form/markdown-field`         | `FormMarkdownField`; `field` is `TextFieldApi`; `label`, optional `id`, `placeholder`, `rows`, `showError`, `required`. Write / preview; preview uses `Markdown`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 | `form/text-field`             | `FormTextField`, type `TextFieldApi`; controlled field, label, multiline, description, input constraints; `required` also marks the label                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| `form/select-field`           | `FormSelectField`; `value`, `onValueChange`, `label`, optional `meta`, placeholder, and `required`; select item children                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `form/date-picker-field`      | `FormDatePickerField`; `value`, `onValueChange`, `label`, optional `meta`, placeholder, `required`, `minDate` / `maxDate`, and `className` (forwarded to the trigger)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| `form/date-time-picker-field` | `FormDateTimePickerField`; `value` is `Date` or `null`; `onValueChange` emits `Date` or `null`; optional `meta`, placeholder, `timeStep`, `required`, `minDate` / `maxDate`, and `className` (forwarded to the trigger)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `form/select-field`           | `FormSelectField`; `value`, `onValueChange`, `label`, optional `id` (default generated; pass the field name for `focusFirstInvalid`), `meta`, placeholder, and `required`; select item children                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| `form/date-picker-field`      | `FormDatePickerField`; `value`, `onValueChange`, `label`, optional `id` (default generated), `meta`, placeholder, `required`, `clearable` (a Clear row that emits `undefined`), `minDate` / `maxDate`, and `className` (forwarded to the trigger)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| `form/date-time-picker-field` | `FormDateTimePickerField`; `value` is `Date` or `null`; `onValueChange` emits `Date` or `null`; optional `id` (default generated), `meta`, placeholder, `timeStep`, `required`, `minDate` / `maxDate`, and `className` (forwarded to the trigger)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 | `form/field-error`            | `FieldError` (optional `id`), `getFieldErrorMessage`; types `FieldErrorMessage`, `FieldMetaState`, `ErrorTimingProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `form/focus-first-invalid`    | `focusFirstInvalid(formId)`: an `onSubmitInvalid` handler that focuses the first control in the form whose field (matched by control id, so pass `id={field.name}`) has errors; type `InvalidSubmitEvent`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
 | `form/feedback-field`         | `FormFeedbackField`; nullable `message`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 | `form/toggle-group-field`     | `FormToggleGroupField<T>`; one choice from `options` `{ value, label }[]` as a joined outline toggle group named by its label; `value` (`""` for none), `onValueChange(T)` (pressing the active item keeps it), optional `description`, `meta`, `size` (`sm` default).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| `next/nav-link`               | `NavLink`; Next Link props and required `active` boolean; same pill as `nav-link`; requires Next.js 16                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `next/nav-link`               | `NavLink`; Next Link props and required `active` boolean; the `nav-link` pill with `asChild` around a Next `Link`; requires Next.js 16                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 | `next/period-stepper`         | `PeriodStepper` with prefetched Next links: `previousHref`, `nextHref`, optional `todayHref`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `next/tabs-nav-link`          | `TabsNavLink`; Next Link props and required `active` boolean; requires Next.js 16                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| `next/tabs-nav-link`          | `TabsNavLink`; Next Link props and required `active` boolean; the `tabs` link with `asChild` around a Next `Link`; requires Next.js 16                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 | `utils`                       | `cn`, `onInputChange`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | `theme.css`                   | Tailwind 4 theme; installation in [README](./README.md)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 
@@ -100,8 +101,7 @@ theme from `next-themes`, so toast consumers install that too.
 
 Components are **stable** unless listed here. Stable components change
 through the deprecation policy in
-[CONTRIBUTING.md](https://github.com/Kerubi-5/atlas-design-system/blob/main/CONTRIBUTING.md):
-a deprecation notice first, removal in a later minor release.
+[CONTRIBUTING.md](https://github.com/Kerubi-5/atlas-design-system/blob/main/CONTRIBUTING.md#deprecations).
 
 **Beta** components may still change shape in a minor release, before and
 after 1.0; they are exempt from semver, and the changelog calls out every
@@ -121,10 +121,10 @@ each part carries a `data-slot` for parent selectors such as
 | `DialogContent`                                    | `overlayClassName`, `closeButtonClassName`                                                                                                                                                                                                                              | `dialog-close-button` (the built-in X; your own `DialogClose` keeps `dialog-close`)                                                                                                                                                                                                              |
 | `SelectTrigger`                                    | a `className` height replaces `size`                                                                                                                                                                                                                                    | `select-icon`, `select-viewport`, `select-item-indicator`                                                                                                                                                                                                                                        |
 | `TooltipContent`                                   | `arrowClassName`                                                                                                                                                                                                                                                        | `tooltip-arrow`                                                                                                                                                                                                                                                                                  |
-| `Combobox`                                         | `contentClassName` (panel, default trigger width), `listClassName`; button props go to trigger                                                                                                                                                                          | `combobox-search`, `combobox-list`, `combobox-option`                                                                                                                                                                                                                                            |
-| `SearchPicker`                                     | `listClassName`; div props go to the root                                                                                                                                                                                                                               | `search-picker-option`, `search-picker-empty`                                                                                                                                                                                                                                                    |
-| `InfoTip`                                          | `contentClassName`; button props go to the trigger                                                                                                                                                                                                                      |                                                                                                                                                                                                                                                                                                  |
-| `KanbanBoard`                                      | `scrollerClassName`, `columnClassName` (default `w-72 min-w-72` and a drop-area min height), `cardClassName` (cards and the drag overlay); div props go to the root                                                                                                     | `kanban-board`, `kanban-scroller`, `kanban-column`, `kanban-column-header`, `kanban-column-empty`, `kanban-card`, `kanban-card-handle`, `kanban-card-body`, `kanban-drag-overlay`, `kanban-action-rail`, `kanban-action-zone`, `kanban-scroll-button`, `kanban-overflow-fade`, `kanban-skeleton` |
+| `Combobox`                                         | `contentClassName` (panel, default trigger width), `listClassName` (default `max-h-60`); button props go to trigger                                                                                                                                                     | `combobox-search`, `combobox-list`, `combobox-option`                                                                                                                                                                                                                                            |
+| `SearchPicker`                                     | `listClassName` (default `max-h-60`); div props go to the root                                                                                                                                                                                                          | `search-picker-option`, `search-picker-empty`                                                                                                                                                                                                                                                    |
+| `InfoTip`                                          | `contentClassName` (default `w-72`); button props go to the trigger                                                                                                                                                                                                     |                                                                                                                                                                                                                                                                                                  |
+| `KanbanBoard`                                      | `scrollerClassName`, `columnClassName` (default `flex-1 basis-72 min-w-72` and a drop-area min height; columns grow to fill the board and keep an 18rem minimum so a long row still scrolls), `cardClassName` (cards and the drag overlay); div props go to the root    | `kanban-board`, `kanban-scroller`, `kanban-column`, `kanban-column-header`, `kanban-column-empty`, `kanban-card`, `kanban-card-handle`, `kanban-card-body`, `kanban-drag-overlay`, `kanban-action-rail`, `kanban-action-zone`, `kanban-scroll-button`, `kanban-overflow-fade`, `kanban-skeleton` |
 | `chart` pieces                                     | `ChartTooltip` and `ChartLegend` take div props; `ChartLegendKey` `className`                                                                                                                                                                                           | `chart-y-axis`, `chart-tooltip`, `chart-tooltip-row`, `chart-legend`, `chart-legend-key`                                                                                                                                                                                                         |
 | `PageHeader`, `PeriodStepper`, `SkipLink`          | `PageHeader` `titleClassName`; `PeriodStepper` `labelClassName`                                                                                                                                                                                                         | `page-header`, `page-header-heading`, `page-header-title`, `page-header-description`, `page-header-actions`, `period-stepper`, `period-stepper-label`, `skip-link`                                                                                                                               |
 | `FormCheckboxGroupField`                           | `className` (the options box), `fieldClassName` (the fieldset)                                                                                                                                                                                                          | `form-checkbox-group-options`                                                                                                                                                                                                                                                                    |
@@ -132,7 +132,7 @@ each part carries a `data-slot` for parent selectors such as
 | `DatePickerButton`, `DateTimePickerButton`         | `contentClassName`, `calendarProps` (`disabled` / `hidden` days, `startMonth`, `endMonth`, `weekStartsOn`, date-fns `locale`, `showOutsideDays`, `fixedWeeks`, `showWeekNumber`, `captionLayout`, `today`, `className`); `minDate` / `maxDate` add to its disabled days | `date-picker-value`, `date-picker-footer`, `date-time-picker-time`                                                                                                                                                                                                                               |
 | `form/*` fields                                    | `fieldClassName` (wrapper); `className` styles the control (on `FormControlField`, the wrapper); `FormSelectField` `contentClassName`; `FormMarkdownField` `previewClassName`                                                                                           | `form-field`, `form-field-header`, `form-field-description`, `form-field-error`, `form-feedback`, `form-markdown-preview`                                                                                                                                                                        |
 | `Table`                                            | `containerClassName` (the scroll box, e.g. `max-h-96 overflow-y-auto`); `className` styles the `<table>`                                                                                                                                                                |                                                                                                                                                                                                                                                                                                  |
-| `TabsList`, `TabsNav`                              | `scrollerClassName`; `TabsNav` `listClassName`; a list `className` height replaces `h-11`                                                                                                                                                                               | `tabs-scroller`                                                                                                                                                                                                                                                                                  |
+| `TabsList`, `TabsNav`                              | `scrollerClassName`; `TabsNav` `listClassName`; a list `className` height replaces `h-7`; default scroller is `h-9` (`p-1` + list `h-7`) to match `Button` `size="sm"`; `TabsNav` sizes to its links in a flex row, so add `w-full` to stretch it                       | `tabs-scroller`                                                                                                                                                                                                                                                                                  |
 | `SortableTableHead`                                | `buttonClassName`                                                                                                                                                                                                                                                       | `sortable-table-head-button`                                                                                                                                                                                                                                                                     |
 | `AccordionTrigger`, `AccordionContent`             | `headerClassName`; `AccordionContent` `className` styles the inner box                                                                                                                                                                                                  | `accordion-header`, `accordion-content-inner`                                                                                                                                                                                                                                                    |
 | `Progress`                                         | `indicatorClassName`                                                                                                                                                                                                                                                    | `progress-indicator`                                                                                                                                                                                                                                                                             |
@@ -168,7 +168,11 @@ for a Write / Preview GFM body. `FormSelectField`, `FormDatePickerField`, and
 `FormDateTimePickerField` accept the same error meta shape.
 `FormDatePickerField` takes a `Date` or `yyyy-MM-dd` string and calls
 `onValueChange` with `Date | undefined`. `FormDateTimePickerField` takes a
-`Date` or `null` and calls `onValueChange` with `Date | null`. `FieldError`
+`Date` or `null` and calls `onValueChange` with `Date | null`. Pass
+`id={field.name}` to the select and date fields (the text field defaults to
+it) so a field is addressable by name, for example by `focusFirstInvalid`
+from `form/focus-first-invalid`, which focuses the first field with errors
+when a submit fails. `FieldError`
 accepts either `message` or pre-resolved `text`, and an `id` to point the
 control's `aria-describedby` at. Every `form/*` field does that for you: the
 error text (and `FormTextField`'s `description`) is the control's accessible
@@ -178,12 +182,14 @@ part of its name.
 
 Errors wait for the person. When `meta.isTouched` is `false`, a `form/*`
 field hides its error text and invalid styling until the field is touched or
-its `submitted` prop is set (TanStack Form:
-`form.state.submissionAttempts > 0`). Pass TanStack's `field.state.meta` as
-is and this works on its own; meta without `isTouched` shows errors as soon
-as they exist, as before. `showError={false}` always hides them. Every
-`form/*` field, `FormSelectField` and both date fields included, takes
-`submitted` and `showError`.
+its `submitted` prop is set. Pass TanStack Form's `field.state.meta` as is
+and this works on its own: TanStack marks every mounted field touched when
+the form is submitted, so untouched fields show their errors then without
+`submitted`. `submitted` is for form libraries that do not touch fields on
+submit. Meta without `isTouched` shows errors as soon as they exist.
+`showError={false}` always hides them. Every `form/*` field,
+`FormSelectField` and both date fields included, takes `submitted` and
+`showError`.
 
 `FormControlField` gives a control the kit does not ship the same label,
 required marker, hint, error, ids, and error timing. `children` is a
@@ -224,7 +230,10 @@ height classes still override that default. The range popover shows one
 month below `md` and two months at `md+` unless `numberOfMonths` is set,
 clamps to the viewport with collision padding and scroll, stays `w-auto` so
 it does not collapse to the default popover width, and includes a Clear
-action. Pass `side` to prefer a placement; Radix still flips on collision.
+action. In single mode, `clearable` adds the same Clear row (emits
+`undefined`, closes the popover) and keeps the selected day on a second
+click; without it, a second click on the selected day clears it. Pass
+`side` to prefer a placement; Radix still flips on collision.
 `minDate` and `maxDate` (each `Date` or `yyyy-MM-dd`) disable the days
 outside them, on top of any `calendarProps.disabled`, and stop month paging
 there unless `calendarProps` sets `startMonth` / `endMonth`. They limit the
@@ -237,7 +246,7 @@ the trigger text's id (a `<label for>` alone names the button by the label
 only).
 `FormDatePickerField` forwards `className` to that trigger.
 
-Both pickers took `onChange` before 0.14; it still works as a deprecated
+Both pickers took `onChange` before 1.0; it still works as a deprecated
 alias until 2.0.
 
 `DateTimePickerButton` is the date-and-time control. `value` is a `Date` or
@@ -383,26 +392,21 @@ export function ViewSwitcher({ view }: { view: string }) {
 }
 ```
 
-Outside Next, compose `TabsNav` with your own links: style each one with
-`tabsTriggerVariants()` and set `data-state="active"` plus `aria-current="page"`
-on the active link.
+Outside Next, use `TabsNavLink` from `tabs`: a plain anchor with the same
+chrome, `data-state`, and `aria-current="page"`, or `asChild` around your
+router's link. `isNavActive` from `nav-link` works for the `active` check
+here too.
 
 ```tsx
-import { TabsNav, tabsTriggerVariants } from "atlas-react-kit/tabs"
+import { TabsNav, TabsNavLink } from "atlas-react-kit/tabs"
 
 export function ViewSwitcher({ view }: { view: string }) {
   return (
     <TabsNav aria-label="Items view">
       {["list", "board"].map((item) => (
-        <a
-          key={item}
-          href={`?view=${item}`}
-          data-state={view === item ? "active" : "inactive"}
-          aria-current={view === item ? "page" : undefined}
-          className={tabsTriggerVariants()}
-        >
+        <TabsNavLink key={item} href={`?view=${item}`} active={view === item}>
           {item}
-        </a>
+        </TabsNavLink>
       ))}
     </TabsNav>
   )

package/DESIGN_RULES.md

@@ -129,13 +129,10 @@ or the viewport minus gutters on small screens.
 
 Use `EmptyPanel` for empty states, `TableBodySkeleton` for loading table bodies,
 and `<Card flush>` for an edge-to-edge list or table. `Table` scrolls wide
-columns inside itself (`min-w-0 overflow-x-auto`) and tightens cell padding
-below `sm`. `CardContent className="px-0"`
-overrides body padding without `!px-0` when only the body should go flush. Cards
-keep `min-h-min shrink-0` so they do not collapse inside a bounded flex
-column, and `min-w-0` so nested tables scroll instead of widening the card.
-`Dialog` already scrolls inside the viewport on small screens; avoid
-additional height limits.
+columns inside itself, `Card` neither collapses in a bounded flex column nor
+widens around a nested table, and `Dialog` already scrolls inside the
+viewport on small screens; avoid additional height limits. The classes each
+one uses are in its COMPONENTS.md row.
 
 Apps decide how wide and tall containers and overlays are. The kit sets
 intrinsic control sizes (the button, input, tab and row heights, icons,
@@ -144,12 +141,10 @@ clamps overlays to the viewport, but no design widths or heights on
 dialogs, popovers, menus, or lists. Set them with `className`: give each
 `DialogContent` a width such as `sm:max-w-md`, and each `PopoverContent`
 one such as `w-72`. Where the sized part is not the element `className`
-reaches, a prop names it: `InfoTip` takes `contentClassName` (default
-`w-72`), and `Combobox` and `SearchPicker` take `listClassName` (default
-`max-h-60`). `TabsNav` fills a block container but sizes to its links in a
-flex row; add `w-full` to stretch it there. `Tooltip` keeps a `max-w-xs` reading width, `Textarea` a
-`min-h-16` starting height, and toasts their 356px width; override the first
-two with `className`.
+reaches, a `*ClassName` prop names it, with its default where there is one
+(COMPONENTS.md, "Styling parts"). The few parts that keep a reading width or
+a starting height (`Tooltip`, `Textarea`) take `className` to override it;
+toasts keep their width.
 
 Parents do not force sizes on their children. A vertical `Field` stretches
 its controls through the flex column, so a control's own width class (such
@@ -172,32 +167,28 @@ triggers as outline buttons in application code.
 error sits below the control. It takes no space until it shows, so a row of
 fields keeps its controls on one top edge only with `items-start`
 (`grid grid-cols-2 items-start gap-3`); the default `stretch` is fine for a
-single column. Wrap a control the kit does not ship (a combobox, a segmented
+single column. Wrap a control the kit has no form field for (a colour
 picker) in `FormControlField` instead of `Field` and `FieldLabel`, whose
-`gap-3` spacing does not match. A field shows its error once
-`meta.isTouched` is true or `submitted` is set, never on a field the person
-has not reached yet.
+`gap-3` spacing does not match. A field shows its error once the person has
+touched it (`meta.isTouched`), never on a field they have not reached yet.
+`submitted` is for form libraries that do not mark every field touched on
+submit; TanStack Form does, so its users pass `meta` only.
 
 Use `Tabs` with actual `TabsContent` panels. For URL view switches, use a labelled
-`TabsNav` with links and `aria-current="page"` on the active link. The optional
-Next adapter provides `TabsNavLink` with this behavior. App-shell destinations
+`TabsNav` of `TabsNavLink`s with `active` from the app. App-shell destinations
 (Calendar, Tasks, Settings) use `NavLink` from `nav-link`: a pill with `active`
-from the app, not tabs. Pass `asChild` for a router link, or use the optional
-Next adapter `next/nav-link`. `TabsNav` and `TabsList`
-scroll overflowing labels inside themselves (`overflow-x-auto overflow-y-hidden`,
-with padding for the active border and focus ring counted in the scroller
-height, and an edge fade like `Table`). Do not wrap them in another
-`overflow-x-auto` — that pairing forces `overflow-y: auto` and a stray
-vertical scrollbar.
-
-Use `FormTextField`, `FormSelectField`, `FormDatePickerField`,
-`FormDateTimePickerField`, `FormMarkdownField`, and `FormFeedbackField` for
-portable form controls, and `FieldError` for field messages. `Combobox` (popover)
+from the app, not tabs. Both links take `asChild` for a router link, or come
+as Next adapters (`next/tabs-nav-link`, `next/nav-link`); `isNavActive`
+compares the pathname with a link's `href`. `TabsNav` and `TabsList` scroll overflowing
+labels inside themselves, like `Table`. Do not wrap them in another
+horizontal scroller: that pairing adds a stray vertical scrollbar.
+
+Use the `form/*` fields (one row each in COMPONENTS.md) for portable form
+controls, and `FieldError` for field messages. `Combobox` (popover)
 and `SearchPicker` (always-visible list), `DatePickerButton` (including
 `mode="range"`), `DateTimePickerButton`, `Slider`, `Meter` (scale with ticks;
 `Progress` is a plain 0–100 job bar), `InfoTip` (longer than `Tooltip`),
 `Markdown`, `ColorLegend`, `StatTile`, `ThemeProvider`, `ErrorBoundary`, and
 `SortableTableHead` are first-class kit pieces. Domain data and application
 shells stay with the application: currency or timezone option lists,
-query-library error views, WYSIWYG editors, kanban boards, and dashboard
-widgets.
+query-library error views, and WYSIWYG editors.

package/README.md

@@ -8,7 +8,7 @@ React 19, Tailwind 4, and Node >=20.19 are required. Next 16 is needed only
 when using `next/nav-link`, `next/period-stepper`, or `next/tabs-nav-link`.
 
 ```sh
-npm install --save-exact atlas-react-kit@1.0.0
+npm install --save-exact atlas-react-kit@1.2.0
 ```
 
 Import components by subpath:
@@ -55,7 +55,8 @@ with the application.
 - [Design rules](./DESIGN_RULES.md): tokens, accessibility, writing, and
   composition. This guide ships in the npm package.
 - [Contributing](./CONTRIBUTING.md): component changes, checks, and releases.
-- [Roadmap to 1.0](./ROADMAP-1.0.md): decisions needed before the 1.0 release.
+- [Decisions behind 1.0 (record)](./ROADMAP-1.0.md): the closed roadmap that
+  led to 1.0.0.
 - [Changelog](./CHANGELOG.md): published and upcoming changes.
 
 ## AI coding assistants
@@ -86,51 +87,8 @@ and package entry points for search and indexing tools.
 
 ## Development and releases
 
-```sh
-npm ci
-npm run check
-npm test
-npm pack
-npm ci --prefix site
-npm run build --prefix site
-npm run preview --prefix site
-```
-
-`tsc` emits individual ESM files and TypeScript declarations. CSS is shipped
-without compilation and processed by the consuming application's Tailwind build.
-The public site is Storybook in `site/`. `npm run build --prefix site`
-typechecks the stories, builds Storybook into `site/dist`, then checks the
-static output. Vercel serves that directory; `/playground` and `/storybook`
-redirect to `/`. The site and Storybook dependencies are not part of the npm
-package. Optional feature libraries (markdown, dates, toasts, theme, Next, dnd-kit) are
-peer dependencies and are required only when those entry points are imported.
-The package does not bundle React.
-
-Run `npm run dev --prefix site` (or `npm run storybook --prefix site`) for the
-playground on port 6006. Existing examples live in `stories/` and are imported
-by CSF story files in `site/stories/`, so component tests and previews share the
-same examples. Add Storybook entries there when adding an example; the
-static-output check reports any existing demo that has no Storybook entry.
-Interactive stories use Storybook args so changing a control or interacting with
-the component updates the same value. Configuration is in `site/.storybook/`.
-
-The Storybook preview disables the kit's theme shortcut and uses the theme
-toolbar instead. The accessibility panel checks the rendered story; it does not
-replace keyboard or assistive-technology testing.
-
-Bumping the version in `package.json` and merging to `main` (path-filtered
-to package files) or running `workflow_dispatch` publishes through npm OIDC
-trusted publishing after check, test, and pack gates. Versions already on npm
-are skipped.
-
-If trusted publishing is not configured, pack and publish a validated
-artifact with the package owner's npm login:
-
-```sh
-mkdir -p release-artifacts
-npm pack --pack-destination release-artifacts
-npm publish ./release-artifacts/atlas-react-kit-1.0.0.tgz --access public
-```
+Setup, checks, the component checklist, and releases are in
+[CONTRIBUTING.md](./CONTRIBUTING.md).
 
 Pin an exact package version in consuming applications. Roll back an upgrade by
 restoring the previous version and lockfile. License: MIT; upstream notices are

package/dist/accordion.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Accordion as AccordionPrimitive } from "radix-ui";
 import { ChevronDownIcon } from "lucide-react";
-import { disabledState, focusRing } from "./internal/styles.js";
+import { disabledState, focusRing, quietTextHover } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /** Stacked sections that expand in place (FAQs, settings groups). */
 function Accordion({ ...props }) {
@@ -14,7 +14,7 @@ function AccordionItem({ className, ...props }) {
 }
 /** `headerClassName` styles the heading wrapper (`data-slot="accordion-header"`). */
 function AccordionTrigger({ className, headerClassName, children, ...props }) {
-    return (_jsx(AccordionPrimitive.Header, { "data-slot": "accordion-header", className: cn("flex", headerClassName), children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn(focusRing, disabledState, "flex flex-1 items-start justify-between gap-4 rounded-none py-4 text-left text-sm font-medium transition-colors hover:text-selected-foreground focus-visible:text-selected-foreground [&[data-state=open]>svg]:rotate-180", className), ...props, children: [children, _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" })] }) }));
+    return (_jsx(AccordionPrimitive.Header, { "data-slot": "accordion-header", className: cn("flex", headerClassName), children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn(focusRing, disabledState, "flex flex-1 items-start justify-between gap-4 rounded-none py-4 text-left text-sm font-medium transition-colors", quietTextHover, "[&[data-state=open]>svg]:rotate-180", className), ...props, children: [children, _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" })] }) }));
 }
 /**
  * `className` styles the padded inner box (`data-slot="accordion-content-inner"`);

package/dist/badge.js

@@ -2,12 +2,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
-import { focusRing, invalidState } from "./internal/styles.js";
+import { controlText, focusRing, invalidState } from "./internal/styles.js";
 import { cn } from "./utils.js";
 const badgeVariants = cva([
     focusRing,
     invalidState,
-    "group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1.5 overflow-hidden rounded-none border-0 bg-transparent px-0 py-0 text-[0.625rem] font-semibold tracking-widest whitespace-nowrap uppercase transition-colors has-data-[icon=inline-end]:pr-0 has-data-[icon=inline-start]:pl-0 [&>svg]:pointer-events-none [&>svg:not([class*='size-'])]:size-3",
+    "group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1.5 overflow-hidden rounded-none border-0 bg-transparent px-0 py-0",
+    controlText,
+    // Smaller than `controlText`'s `text-xs`; tailwind-merge keeps this one.
+    "text-[0.625rem] transition-colors has-data-[icon=inline-end]:pr-0 has-data-[icon=inline-start]:pl-0 [&>svg]:pointer-events-none [&>svg:not([class*='size-'])]:size-3",
 ], {
     variants: {
         variant: {

package/dist/breadcrumb.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Slot } from "radix-ui";
 import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
-import { focusRing } from "./internal/styles.js";
+import { focusRing, quietTextHover } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * Where the current page sits in a hierarchy. The last item is
@@ -20,7 +20,7 @@ function BreadcrumbItem({ className, ...props }) {
 /** Pass `asChild` to render a router link (e.g. Next `Link`) with these styles. */
 function BreadcrumbLink({ asChild, className, ...props }) {
     const Comp = asChild ? Slot.Root : "a";
-    return (_jsx(Comp, { "data-slot": "breadcrumb-link", className: cn(focusRing, "transition-colors hover:text-selected-foreground focus-visible:text-selected-foreground", className), ...props }));
+    return (_jsx(Comp, { "data-slot": "breadcrumb-link", className: cn(focusRing, "transition-colors", quietTextHover, className), ...props }));
 }
 function BreadcrumbPage({ className, ...props }) {
     return (_jsx("span", { "data-slot": "breadcrumb-page", "aria-current": "page", className: cn("font-medium text-foreground", className), ...props }));

package/dist/button.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
-import { controlSize, disabledState, focusRing, invalidState, selectedState, } from "./internal/styles.js";
+import { controlSize, controlText, disabledState, focusRing, inlineIcon, invalidState, selectedState, } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * Outline and ghost hover/focus: selected-foreground border, selected wash, and
@@ -19,7 +19,10 @@ const buttonVariants = cva([
     focusRing,
     invalidState,
     disabledState,
-    "group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-all select-none active:not-aria-[haspopup]:translate-y-px [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+    "group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding",
+    controlText,
+    "transition-all select-none active:not-aria-[haspopup]:translate-y-px",
+    inlineIcon.default,
 ], {
     variants: {
         variant: {
@@ -32,11 +35,11 @@ const buttonVariants = cva([
         },
         size: {
             default: `${controlSize.default} gap-1.5`,
-            xs: "h-7 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
+            xs: `h-7 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 ${inlineIcon.sm}`,
             sm: `${controlSize.sm} gap-1`,
             lg: `${controlSize.lg} gap-1.5`,
             icon: "size-10",
-            "icon-xs": "size-7 [&_svg:not([class*='size-'])]:size-3",
+            "icon-xs": `size-7 ${inlineIcon.sm}`,
             "icon-sm": "size-9",
             "icon-lg": "size-11",
         },

package/dist/combobox.js

@@ -5,9 +5,10 @@ import { ChevronDownIcon } from "lucide-react";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
 import { formControlTriggerClassName } from "./internal/form-control.js";
-import { foldSearchText, handleListboxKey, listboxOptionId, } from "./internal/listbox-navigation.js";
+import { handleListboxKey, listboxOptionId, } from "./internal/listbox-navigation.js";
 import { ListboxEmptyStatus, PickerOption } from "./internal/listbox-option.js";
-import { createSearchIndex, filterSearchIndex, normalizeSearchQuery, } from "./internal/search.js";
+import { createSearchIndex, filterSearchIndex, foldSearchText, normalizeSearchQuery, } from "./internal/search.js";
+import { listboxScroll } from "./internal/styles.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { cn, onInputChange } from "./utils.js";
 const CREATE_OPTION_KEY = "__atlas-combobox-create";
@@ -134,9 +135,7 @@ export function Combobox({ options, value, onValueChange, placeholder = "Select"
             },
         });
     };
-    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { ...props, id: triggerId, type: "button", variant: "outline", role: "combobox", "aria-expanded": open, "aria-controls": listId, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, disabled: disabled, onKeyDown: onTriggerKeyDown, className: cn(formControlTriggerClassName, "justify-between", !selected && "text-muted-foreground", className), children: [_jsx("span", { className: "truncate", children: selected?.label ?? placeholder }), _jsx(ChevronDownIcon, { "data-icon": "inline-end", className: "opacity-50" })] }) }), _jsxs(PopoverContent, { align: "start", className: cn("w-[var(--radix-popover-trigger-width)] gap-0 rounded-none p-0", contentClassName), children: [_jsx("div", { "data-slot": "combobox-search", className: "border-b p-2", children: _jsx(Input, { value: query, onChange: onQueryChange, onKeyDown: onSearchKeyDown, placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-autocomplete": "list", "aria-controls": listId, "aria-activedescendant": activeOption ? listboxOptionId(listId, highlight) : undefined }) }), _jsx("ul", { id: listId, role: "listbox", "data-slot": "combobox-list", "aria-label": ariaLabelledBy ? undefined : ariaLabel, "aria-labelledby": ariaLabelledBy ?? (ariaLabel ? undefined : triggerId), className: empty
-                            ? "sr-only"
-                            : cn("max-h-60 overflow-y-auto p-1", listClassName), children: list.map((option, index) => {
+    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { ...props, id: triggerId, type: "button", variant: "outline", role: "combobox", "aria-expanded": open, "aria-controls": listId, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, disabled: disabled, onKeyDown: onTriggerKeyDown, className: cn(formControlTriggerClassName, "justify-between", !selected && "text-muted-foreground", className), children: [_jsx("span", { className: "truncate", children: selected?.label ?? placeholder }), _jsx(ChevronDownIcon, { "data-icon": "inline-end", className: "opacity-50" })] }) }), _jsxs(PopoverContent, { align: "start", className: cn("w-[var(--radix-popover-trigger-width)] gap-0 rounded-none p-0", contentClassName), children: [_jsx("div", { "data-slot": "combobox-search", className: "border-b p-2", children: _jsx(Input, { value: query, onChange: onQueryChange, onKeyDown: onSearchKeyDown, placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-autocomplete": "list", "aria-controls": listId, "aria-activedescendant": activeOption ? listboxOptionId(listId, highlight) : undefined }) }), _jsx("ul", { id: listId, role: "listbox", "data-slot": "combobox-list", "aria-label": ariaLabelledBy ? undefined : ariaLabel, "aria-labelledby": ariaLabelledBy ?? (ariaLabel ? undefined : triggerId), className: empty ? "sr-only" : cn(listboxScroll, "p-1", listClassName), children: list.map((option, index) => {
                             const isCreate = createOption != null && option === createOption;
                             const isSelected = option.value === value && !isCreate;
                             return (_jsx(PickerOption, { "data-slot": "combobox-option", listId: listId, index: index, active: index === highlight, selected: isSelected, showCheck: true, item: option, getLabel: getOptionLabel, onHighlight: setHighlight, onSelect: selectOption }, isCreate ? CREATE_OPTION_KEY : option.value));