@viax.io/uxm 4.36.0

package/dist/ui/listbox/listbox.css

@@ -0,0 +1,213 @@
+@charset "UTF-8";
+/* ── listbox ────────────────────────────────────────────────────────────────
+   Generic dropdown surface — uses Popover as the panel positioning shell
+   and layers chrome (panel, search, list, options, footer) on top.
+   ──────────────────────────────────────────────────────────────────────── */
+.uxm-listbox {
+  position: relative;
+  width: 100%;
+}
+.uxm-listbox__panel {
+  display: flex;
+  flex-direction: column;
+  max-height: var(--uxm-listbox-panel-max-height, 320px);
+  overflow: hidden;
+  background-color: var(--uxm-listbox-panel-bg, var(--color-card));
+  border: 1px solid var(--uxm-listbox-panel-border, var(--color-border));
+  border-radius: var(--uxm-listbox-panel-radius, 8px);
+  /* Composed from the Color / Blur / Offset Y knobs (same pattern as the
+     Calendar / Menu atoms) rather than a single box-shadow string. */
+  box-shadow: 0 var(--uxm-listbox-shadow-offset-y, 6px) var(--uxm-listbox-shadow-blur, 20px) var(--uxm-listbox-shadow-color, rgba(0, 0, 0, 0.1));
+}
+.uxm-listbox__search {
+  position: relative;
+  padding: 8px;
+  border-bottom: 1px solid var(--uxm-listbox-search-border, var(--color-border));
+  flex-shrink: 0;
+}
+.uxm-listbox__search-icon {
+  position: absolute;
+  left: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--uxm-listbox-search-icon-color, var(--color-text-subtle));
+}
+.uxm-listbox__search-input {
+  width: 100%;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  font-size: calc(var(--uxm-listbox-search-font-size, 12px) * var(--type-scale, 1));
+  color: var(--uxm-listbox-search-color, var(--color-text));
+  padding: 4px 8px 4px 28px;
+  box-sizing: border-box;
+}
+.uxm-listbox__search-input::placeholder {
+  color: var(--uxm-listbox-search-placeholder-color, var(--color-text-subtle));
+}
+.uxm-listbox__list {
+  overflow-y: auto;
+  padding: 4px;
+  outline: none;
+  /* Multi-column wrap for long lists. Default var = 1 → normal block flow
+     (no visual change). At 2 the browser balances rows into two equal
+     columns, roughly halving the panel height so a long list needs far less
+     scroll.
+     `column-count` is a MAX, not a fixed count: pairing it with a
+     `column-width` floor means the panel only splits into two columns when
+     it is wide enough to give each column that minimum — a narrow panel
+     gracefully falls back to a single column instead of two cramped ones.
+     So `columns={2}` is self-sufficient: it never produces a squeezed
+     layout, and widening the panel is what actually reveals the 2nd column.
+     At `column-count: 1` the width floor is capped to one column, so the
+     single-column default is unaffected. */
+  column-count: var(--uxm-listbox-list-columns, 1);
+  column-width: var(--uxm-listbox-list-column-min-width, 150px);
+  column-gap: var(--uxm-listbox-list-column-gap, 4px);
+}
+.uxm-listbox__empty {
+  padding: 12px;
+  font-size: calc(12px * var(--type-scale, 1));
+  color: var(--uxm-listbox-empty-color, var(--color-text-muted));
+  text-align: center;
+}
+.uxm-listbox {
+  /* Group header — non-interactive label between rows. `presentation` role
+     in JSX keeps screen readers from announcing it as a list item. */
+}
+.uxm-listbox__group-header {
+  padding: 8px 10px 4px 10px;
+  font-size: calc(var(--uxm-listbox-group-header-font-size, 10px) * var(--type-scale, 1));
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--uxm-listbox-group-header-color, var(--color-text-subtle));
+  /* Span every column so a header always sits full-width ABOVE its group's
+     rows, which then wrap into the columns beneath it. `break-inside: avoid`
+     alone couldn't do this — it stops the header box from splitting but does
+     nothing to bind it to the rows that follow, so a header could still be
+     orphaned at the foot of a column. `column-span: all` moves the header out
+     of the column flow entirely, which removes that failure mode and makes
+     grouped + multi-column read cleanly. No-op in single-column mode. */
+  column-span: all;
+}
+.uxm-listbox__option {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-align: left;
+  /* Never split a single row across the column break when `column-count`
+     > 1 — a half-height option straddling two columns is unreadable. */
+  break-inside: avoid;
+  padding: var(--uxm-listbox-option-padding-y, 6px) var(--uxm-listbox-option-padding-x, 10px);
+  font-size: calc(var(--uxm-listbox-option-font-size, 13px) * var(--type-scale, 1));
+  color: var(--uxm-listbox-option-color, var(--color-text));
+  background-color: var(--uxm-listbox-option-default-bg, transparent);
+  border: none;
+  border-radius: var(--uxm-listbox-option-radius, 4px);
+  cursor: pointer;
+  transition: background-color 0.1s, color 0.1s;
+}
+.uxm-listbox__option--disabled {
+  opacity: var(--uxm-listbox-option-disabled-opacity, 0.4);
+  cursor: not-allowed;
+}
+.uxm-listbox__option--selected {
+  background-color: var(--uxm-listbox-option-selected-bg, var(--color-accent-subtle));
+  color: var(--uxm-listbox-option-selected-color, var(--color-accent-bold));
+  font-weight: 600;
+}
+.uxm-listbox {
+  /* Active = keyboard-highlighted via arrow nav OR pointer hover. The
+     atom's onMouseEnter handler applies `--active` so keyboard + pointer
+     paint the same modifier class; the `:hover` selector is a defensive
+     fallback that paints hover styling even without the JS sync (and is
+     the path the listbox preview's hand-rendered open panel relies on,
+     since the preview doesn't track active state in React). `:disabled`
+     is excluded — disabled rows don't highlight.
+     The selected row is EXCLUDED from active/hover so its `--selected`
+     styling always wins: on open the atom sets the active index to the
+     selected row, so without this exclusion the (equal-specificity, later-
+     source-order) active rule shadowed the selected colour until the pointer
+     moved the highlight away. */
+}
+.uxm-listbox__option--active:not(.uxm-listbox__option--selected), .uxm-listbox__option:hover:not(:disabled):not(.uxm-listbox__option--selected) {
+  background-color: var(--uxm-listbox-option-active-bg, var(--color-surface-alt));
+  color: var(--uxm-listbox-option-active-color, var(--color-text));
+}
+.uxm-listbox__footer {
+  border-top: 1px solid var(--uxm-listbox-footer-border, var(--color-border));
+  padding: 8px;
+  flex-shrink: 0;
+}
+.uxm-listbox {
+  /* Shared "Clear" / "Clear all" footer action — one full-width, left-aligned
+     ghost button rendered through the footer slot by every picker (Listbox,
+     MultiListbox → EditableCell, PillSelect, Select). All knobs are themable. */
+}
+.uxm-listbox__footer-clear-option {
+  /* width: 100% + own padding only add up under border-box; ui.css ships
+     no reset (same fix as the input family got in 4.17.1). */
+  box-sizing: border-box;
+  width: 100%;
+  justify-content: flex-start;
+  gap: var(--uxm-listbox-footer-clear-gap, 6px);
+  padding: var(--uxm-listbox-footer-clear-padding, 6px 8px);
+  font-size: calc(var(--uxm-listbox-footer-clear-font-size, 13px) * var(--type-scale, 1));
+  border-radius: var(--uxm-listbox-footer-clear-radius, 6px);
+}
+.uxm-listbox {
+  /* Multi-select indicator slot — fixed-width column BEFORE the row's
+     content for the checkbox marker. Reserved on every row (the
+     multi-select pattern), `aria-hidden` because aria-selected on the
+     row button already conveys state to AT. */
+}
+.uxm-listbox__option-indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  flex-shrink: 0;
+}
+.uxm-listbox {
+  /* Single-select checkmark — rendered at the RIGHT edge ONLY on the
+     selected row. `margin-left: auto` pushes it to the trailing edge
+     without affecting other content layout. Inherits the row's `color`,
+     which (because the row is `--selected`) resolves to
+     `--uxm-listbox-option-selected-color` — designers tune the ✓ colour
+     by tuning Selected → Text in the workbench. No separate knob needed. */
+}
+.uxm-listbox__option-checkmark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  flex-shrink: 0;
+  color: inherit;
+}
+.uxm-listbox {
+  /* Checkbox-style visual marker — NOT a real <input>, so it can live
+     inside the row <button> without invalid HTML nesting. The row owns
+     clicks + keys; the marker just reflects state.
+     Reads the SAME `--uxm-checkbox-*` vars the Checkbox atom writes, so
+     designers tune the look once (in the Checkbox registry) and it
+     carries here automatically. No duplicate listbox-side knobs. */
+}
+.uxm-listbox__option-checkbox {
+  width: var(--uxm-checkbox-size, 16px);
+  height: var(--uxm-checkbox-size, 16px);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1.5px solid var(--uxm-checkbox-unchecked-border, var(--color-border));
+  border-radius: var(--uxm-checkbox-border-radius, 3px);
+  background-color: var(--uxm-checkbox-unchecked-bg, transparent);
+  color: var(--uxm-checkbox-check-glyph-color, var(--color-text-inverse));
+  transition: background-color 0.1s, border-color 0.1s;
+}
+.uxm-listbox__option-checkbox--checked {
+  background-color: var(--uxm-checkbox-checked-bg, var(--color-accent));
+  border-color: var(--uxm-checkbox-checked-border, var(--color-accent));
+}

package/dist/ui/listbox/listbox.d.ts

@@ -0,0 +1,242 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type PopoverPlacement } from '../popover/index.js';
+/** Item count above which `searchable="auto"` enables the search box. */
+export declare const SEARCHABLE_AUTO_THRESHOLD = 6;
+/**
+ * Default message when a `required` multi-select is left empty. Lives here so
+ * every picker (MultiListbox itself, PillSelect's chip-removal path, …) reports
+ * the identical text — the one place that rule's wording lives.
+ */
+export declare const DEFAULT_MULTI_REQUIRED_MESSAGE = "Select at least one option";
+/**
+ * Props the consumer must spread on their trigger element. The `ref` is a
+ * callback ref so a single `{...triggerProps}` spread wires up everything
+ * (positioning anchor, toggle, ARIA state).
+ *
+ * Consumers should NOT add their own onClick / aria-expanded /
+ * aria-haspopup — they would override the listbox's wiring.
+ */
+export interface ListboxTriggerProps {
+    ref: (el: HTMLElement | null) => void;
+    onClick: () => void;
+    onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
+    'aria-haspopup': 'listbox';
+    'aria-expanded': boolean;
+    'aria-controls'?: string;
+    disabled?: boolean;
+}
+export interface ListboxRenderTriggerState<T> {
+    open: boolean;
+    selected: T | null;
+    triggerProps: ListboxTriggerProps;
+}
+export interface ListboxRenderItemState {
+    /** Keyboard-highlighted (arrow keys). */
+    active: boolean;
+    /** Currently selected value. */
+    selected: boolean;
+}
+interface ListboxCommonProps<T> {
+    items: T[];
+    /** Unique stable key per item — used for React keys + active tracking. */
+    getKey: (item: T) => string;
+    /** Plain text label per item — used for default substring filter, type-ahead, a11y. */
+    getLabel: (item: T) => string;
+    /** Render the consumer's trigger. Spread `triggerProps` on your button/field. */
+    renderTrigger: (state: ListboxRenderTriggerState<T>) => ReactNode;
+    /** Render each item's row body. Active / selected come from internal state. */
+    renderItem: (item: T, state: ListboxRenderItemState) => ReactNode;
+    /** Render a search input above the list. `true`/`false` force it; `"auto"` shows it only when the item count exceeds `SEARCHABLE_AUTO_THRESHOLD`. Default true. */
+    searchable?: boolean | 'auto';
+    searchPlaceholder?: string;
+    /**
+     * Accessible name for the search input. A `searchPlaceholder` is NOT a
+     * reliable accessible name (it vanishes once the field has a value and AT
+     * support for placeholder-as-name is inconsistent), so pickers with a
+     * domain-specific search (PhoneInput → "Search countries", CurrencyInput →
+     * "Search currencies") should pass this. Falls back to the placeholder text.
+     */
+    searchAriaLabel?: string;
+    /** Override default case-insensitive substring filter on `getLabel`. */
+    filterItems?: (items: T[], query: string) => T[];
+    /** Render section headers when items group; the function returns a group key per item. */
+    groupBy?: (item: T) => string;
+    /** Override the default group header rendering. */
+    renderGroupHeader?: (group: string) => ReactNode;
+    /** Shown in place of the list when the filter returns nothing. */
+    emptyState?: ReactNode;
+    /**
+     * Lay the option list out in up to this many balanced columns instead of
+     * one. Default `1`. Use `2` to tame a long list — the panel's height is
+     * roughly halved (20 rows become two columns of ~10), so it fits without a
+     * deep scroll. Rows keep their source order top-to-bottom down the first
+     * column, then continue in the next, so `ArrowDown` / `ArrowUp` still read
+     * naturally.
+     *
+     * This is a **maximum**, not a fixed count: each column keeps a minimum
+     * width (`--uxm-listbox-list-column-min-width`, 150px), so a panel too
+     * narrow for two readable columns gracefully falls back to one rather than
+     * cramping. Widen the panel — a wider anchor, or `matchAnchorWidth={false}`
+     * + `minPanelWidth` — to actually reveal the second column.
+     *
+     * Works with `groupBy`: each header spans the full width above its group,
+     * whose rows wrap into the columns beneath it.
+     */
+    columns?: 1 | 2;
+    /** Optional footer slot below the list (e.g. ColorPicker's "Custom hex" panel). Pass a function to receive `{ close }`. */
+    footer?: ReactNode | ((api: {
+        close: () => void;
+    }) => ReactNode);
+    /** Disable an individual item — it won't be selectable or arrow-navigable. */
+    isItemDisabled?: (item: T) => boolean;
+    placement?: PopoverPlacement;
+    /**
+     * Match panel width to the positioning anchor (the trigger by
+     * default, or `anchorRef` if provided). Default true.
+     */
+    matchAnchorWidth?: boolean;
+    /** Min panel width when not matching anchor. */
+    minPanelWidth?: number;
+    /** Maximum panel width in px. */
+    maxPanelWidth?: number;
+    /** Render panel into a portal. Default true. */
+    portal?: boolean;
+    /**
+     * Optional override for what the popover anchors against (positioning
+     * + width matching). By default the trigger element from
+     * `renderTrigger`'s `triggerProps.ref` is the anchor — that's what
+     * users click, and that's what the panel sits below. Pass `anchorRef`
+     * when the panel should size / position against a DIFFERENT element
+     * than the click target — e.g. PhoneInput's country picker, where
+     * the trigger is just the small country button but the panel should
+     * span the full field width (anchor = field wrapper).
+     */
+    anchorRef?: React.RefObject<HTMLElement | null>;
+    /**
+     * Render the right-edge ✓ on the selected row. Default true. Set to
+     * `false` for single-select pickers whose rows already have trailing
+     * meta content (dial codes in PhoneInput, currency codes in
+     * CurrencyInput) — the trailing visual + the selected row's bg/text
+     * styling are enough; the extra ✓ creates visual noise + competes
+     * with the meta for the right edge. Multi-select MultiListbox's
+     * left-edge checkbox is unaffected.
+     */
+    showCheckmark?: boolean;
+    /** Class applied to the panel root. */
+    panelClassName?: string;
+    panelStyle?: CSSProperties;
+    /** Wrapper element class — only meaningful if you visually wrap the trigger. */
+    className?: string;
+    style?: CSSProperties;
+    /** Block all interaction. */
+    disabled?: boolean;
+    /** Notified whenever the panel opens/closes. */
+    onOpenChange?: (open: boolean) => void;
+    'aria-label'?: string;
+}
+export interface ListboxProps<T> extends ListboxCommonProps<T> {
+    /** Currently selected value. `null` = nothing selected. */
+    value: T | null;
+    /**
+     * Selection callback. Called with the picked item, OR with `null`
+     * when the consumer clears the selection (e.g. a ✕ button inside
+     * their `renderTrigger`). The atom itself never invokes this with
+     * `null` — picking an already-selected row in single-select mode
+     * is a no-op visually. Clear behavior is consumer-driven so each
+     * trigger can decide whether / how to expose a clear affordance.
+     */
+    onChange: (item: T | null) => void;
+    /** Close the panel after a selection. Default true. */
+    closeOnSelect?: boolean;
+}
+export interface MultiListboxProps<T> extends Omit<ListboxCommonProps<T>, 'footer'> {
+    value: T[];
+    onChange: (items: T[]) => void;
+    /** Hide items already in `value` from the panel list. Default false. */
+    excludeSelected?: boolean;
+    /** Close the panel after each selection. Default false. */
+    closeOnSelect?: boolean;
+    /**
+     * When the working selection is pushed to `onChange`:
+     *   - `'change'` (default) — every toggle fires `onChange` immediately
+     *     (live). The historical behavior, and what chip-style pickers
+     *     (PillSelect) and a live "N selected" trigger count need.
+     *   - `'close'` — toggles stage into an internal draft; `onChange` fires
+     *     ONCE when the panel closes. Opt in for a commit-boundary editor like
+     *     EditableCell: "clear all → pick one" works on a required cell (the
+     *     transient empty set never commits), N picks are a single commit, and
+     *     any consumer `validate` runs once on the final set (so a required-field
+     *     warning shows on close only when the result is actually empty).
+     * The draft is fully internal — consumers keep passing the committed
+     * `value` and receive the final array via `onChange`; nothing else changes.
+     */
+    commitMode?: 'change' | 'close';
+    /**
+     * Mark the selection as required — an empty set is invalid. The RULE lives
+     * here so every MultiListbox consumer (EditableCell, PillSelect, …) enforces
+     * it identically; the DISPLAY can't (the panel is gone once closed), so the
+     * message is reported via `onRequiredViolation` for the consumer to render.
+     * Enforcement timing follows `commitMode`:
+     *   - `'change'` (live, default) — checked per toggle; empty → still
+     *     committed (so the user isn't trapped) + violation reported.
+     *   - `'close'` (staged) — checked on close; empty → NOT committed (the
+     *     committed value stays) + violation reported, mirroring the live
+     *     "transient empty is allowed" model.
+     */
+    required?: boolean;
+    /** Message passed to `onRequiredViolation`. Default `"Select at least one option"`. */
+    requiredMessage?: string;
+    /** Fired when a `required` selection is left/made empty — the consumer renders the message its own way (Banner, inline error, …). */
+    onRequiredViolation?: (message: string) => void;
+    /**
+     * Footer slot below the list. The function form receives the working
+     * selection (`selected` — the draft in `commitMode="close"`, else the live
+     * value) plus a mode-aware `clear` that empties it WITHOUT closing the
+     * panel — so a "Clear all" can hide itself when empty and, on a staged
+     * cell, clear-then-repick never trips validation.
+     */
+    footer?: ReactNode | ((api: {
+        close: () => void;
+        clear: () => void;
+        selected: T[];
+    }) => ReactNode);
+    /**
+     * Render a checkbox indicator at the leading edge of each row.
+     * Default true (the standard multi-select pattern). Set to `false`
+     * when the consumer ALREADY shows selection state outside the panel
+     * (e.g. PillSelect's chips below the trigger) — the checkbox would
+     * be redundant signal. Pair with `excludeSelected={true}` for the
+     * classic "items disappear when picked, return to dropdown when
+     * removed from chips" UX.
+     */
+    showCheckbox?: boolean;
+}
+/**
+ * Single-select dropdown. Owns ALL dropdown behavior — popover, search,
+ * keyboard nav, ARIA — and is generic over `T`. Consumers only supply
+ * data + a renderItem; the dropdown has no domain knowledge of what's
+ * inside (countries, icons, colors, currencies — all just `T`).
+ *
+ * For multi-select, use `MultiListbox`.
+ *
+ * Themable through `--uxm-listbox-*` custom properties (panel chrome,
+ * option states, search input). The trigger's visual is owned by the
+ * consumer's `renderTrigger` callback — the atom only wires behavior.
+ */
+export declare function Listbox<T>({ value, onChange, getKey, closeOnSelect, ...rest }: ListboxProps<T>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Multi-select dropdown. Same behavior contract as `Listbox`, but accepts
+ * an array `value` and toggles items in/out.
+ *
+ * Defaults are tuned for a standard checklist UX: every row shows a
+ * checkbox indicator (`selectionIndicator="checkbox"`), already-selected
+ * items remain visible (`excludeSelected=false`), and the panel stays
+ * open across picks (`closeOnSelect=false`).
+ *
+ * For a "selected items disappear" pattern (PillSelect-style, where
+ * selections render as chips in the trigger), pass
+ * `selectionIndicator="none"` + `excludeSelected={true}`.
+ */
+export declare function MultiListbox<T>({ value, onChange, items, getKey, excludeSelected, closeOnSelect, showCheckbox, commitMode, required, requiredMessage, onRequiredViolation, footer, onOpenChange, ...rest }: MultiListboxProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=listbox.d.ts.map

package/dist/ui/listbox/listbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.d.ts","sourceRoot":"","sources":["../../../src/ui/listbox/listbox.tsx"],"names":[],"mappings":"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"}