eidotter 0.37.3 → 0.37.4

package/dist/components/Select/components/Select.d.ts

@@ -1,31 +1,83 @@
 import React from 'react';
 export interface SelectOption {
+    /** Stable value submitted / reported on change. */
     value: string;
+    /** Visible label. */
     label: string;
+    /** Disable this single option. */
+    disabled?: boolean;
 }
-export interface SelectProps {
-    /** Currently selected value (controlled). */
-    value: string;
+type SelectSize = 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large';
+interface SelectBaseProps {
     /** Options to render. */
     options: SelectOption[];
-    /** Fired with the new value on change. */
-    onChange: (value: string) => void;
-    /** Optional id for label association. */
-    id?: string;
-    /** Accessible label when there is no visible `<label>`. */
+    /** Visible field label (rendered above the control). */
+    label?: string;
+    /** Accessible label when there is no visible `label`. */
     'aria-label'?: string;
-    /** Disable the control. */
+    /** Text shown when nothing is selected. */
+    placeholder?: string;
+    /** Helper text below the control. */
+    description?: string;
+    /** Error message — shown (and marks the field invalid) when `variant="error"`. */
+    errorMessage?: string;
+    /** Visual / validation variant. */
+    variant?: 'default' | 'error';
+    /** Control size. small/medium/large are @deprecated aliases for sm/md/lg. */
+    size?: SelectSize;
+    /** Disable the whole control. */
     disabled?: boolean;
-    /** Additional CSS class name. */
+    /** Mark the field required (React Aria). */
+    isRequired?: boolean;
+    /** Enable type-to-filter (ComboBox for single-select; filter input for multi-select). */
+    searchable?: boolean;
+    /** Placeholder for the search/filter input (searchable variants). */
+    searchPlaceholder?: string;
+    /** Message shown when filtering matches nothing. */
+    emptyMessage?: React.ReactNode;
+    /** Form field name (a hidden native input is emitted for form submission). */
+    name?: string;
+    /** Id applied to the focusable control (for external `<label htmlFor>`). */
+    id?: string;
+    /** Additional CSS class merged onto the root. */
     className?: string;
 }
+interface SingleSelectProps extends SelectBaseProps {
+    /** Single-selection mode (default). */
+    multiple?: false;
+    /** Selected value (controlled). Empty string means nothing selected. */
+    value?: string;
+    /** Initial value (uncontrolled). */
+    defaultValue?: string;
+    /** Fired with the new value on change. */
+    onChange?: (value: string) => void;
+}
+interface MultiSelectProps extends SelectBaseProps {
+    /** Multi-selection mode — `value`/`onChange` operate on string arrays. */
+    multiple: true;
+    /** Selected values (controlled). */
+    value?: string[];
+    /** Initial values (uncontrolled). */
+    defaultValue?: string[];
+    /** Fired with the new array of values on change. */
+    onChange?: (value: string[]) => void;
+}
+export type SelectProps = SingleSelectProps | MultiSelectProps;
 /**
- * DOS-styled select — MVP wrapper around a native `<select>` (DMNC-860).
- * Ported from Steuerdash.
+ * DOS-styled Select / Dropdown built on React Aria primitives (DMNC-593).
+ *
+ * Three modes via props:
+ * - **default** — single-select `Select` (button + popover + listbox)
+ * - **`searchable`** — single-select `ComboBox` with type-to-filter
+ * - **`multiple`** — multi-select listbox; `value`/`onChange` use string arrays
+ *   (combine with `searchable` for a filterable multi-select)
  *
- * Font-size is set via inline style, not a `text-dos-*` class: Tailwind v4's
- * Preflight form reset (`select { font-size: 100% }`) outranks utility classes
- * on a native `<select>`, so the inline style is the reliable escape hatch
- * (token-driven). Upstream component fix tracked at eidotter#349.
+ * React Aria handles keyboard nav, focus management, and ARIA; phosphor glow on
+ * focus/open lives in `Select.css`. The single-value API (`value` / `options` /
+ * `onChange`) is backward-compatible with the previous native-`<select>` MVP.
  */
-export declare const Select: React.FC<SelectProps>;
+export declare const Select: {
+    (props: SelectProps): React.ReactElement;
+    displayName: string;
+};
+export {};

package/dist/components/Select/components/Select.js

@@ -1,14 +1,101 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useMemo, useRef, useState } from 'react';
+import { Select as AriaSelect, SelectValue as AriaSelectValue, ComboBox as AriaComboBox, ListBox as AriaListBox, ListBoxItem as AriaListBoxItem, Popover as AriaPopover, Button as AriaButton, Input as AriaInput, Label as AriaLabel, Text as AriaText, } from 'react-aria-components';
 import { cn } from '../../../utils/cn.js';
+// ---------------------------------------------------------------------------
+// Shared style fragments — layout in Tailwind, phosphor in Select.css
+// ---------------------------------------------------------------------------
+const sizeTrigger = {
+    sm: 'text-dos-text-sm px-2.5 py-1 min-h-7 gap-2',
+    md: 'text-dos-text-md px-3 py-2 min-h-8 gap-2',
+    lg: 'text-dos-text-lg px-4 py-2.5 min-h-10 gap-2',
+};
+const normalizeSize = (size = 'md') => ({ small: 'sm', medium: 'md', large: 'lg' }[size] ?? size);
+const labelClass = 'eidotter-select__label text-dos-text-brand font-dos text-dos-text-xs uppercase tracking-wider';
+const descClass = 'eidotter-select__description text-dos-text-muted font-dos text-dos-text-xs';
+const errClass = 'eidotter-select__error text-dos-text-error font-dos text-dos-text-xs';
+const triggerBase = 'eidotter-select__trigger flex items-center w-full bg-transparent text-dos-text-brand font-dos ' +
+    'border-2 border-dos-border-default outline-none box-border';
+const optionClass = 'eidotter-select__option font-dos';
+const DEFAULT_EMPTY = 'NO MATCHES';
+/** Map the empty `''` sentinel / nullish to React Aria's `null` (placeholder). */
+const toKey = (value) => (value == null || value === '' ? null : value);
+// ---------------------------------------------------------------------------
+// Single-select — React Aria Select (button + popover + listbox)
+// ---------------------------------------------------------------------------
+const SingleSelect = ({ options, label, placeholder, description, errorMessage, variant = 'default', size, value, defaultValue, onChange, disabled, isRequired, name, id, className, 'aria-label': ariaLabel, }) => {
+    const isInvalid = variant === 'error';
+    const isControlled = value !== undefined;
+    const sz = normalizeSize(size);
+    return (_jsxs(AriaSelect, { "aria-label": !label ? ariaLabel : undefined, selectedKey: isControlled ? toKey(value) : undefined, defaultSelectedKey: !isControlled ? defaultValue : undefined, onSelectionChange: (key) => onChange?.(key == null ? '' : String(key)), isDisabled: disabled, isInvalid: isInvalid, isRequired: isRequired, name: name, placeholder: placeholder, className: cn('eidotter-select flex flex-col gap-1', className), children: [label && _jsx(AriaLabel, { className: labelClass, children: label }), _jsxs(AriaButton, { id: id, className: cn(triggerBase, sizeTrigger[sz]), children: [_jsx(AriaSelectValue, { className: "eidotter-select__value flex-1 text-left truncate" }), _jsx("span", { "aria-hidden": "true", className: "eidotter-select__arrow", children: "\u25BC" })] }), description && !isInvalid && (_jsx(AriaText, { slot: "description", className: descClass, children: description })), errorMessage && isInvalid && (_jsx(AriaText, { slot: "errorMessage", className: errClass, children: errorMessage })), _jsx(AriaPopover, { className: "eidotter-select__popover", children: _jsx(AriaListBox, { className: "eidotter-select__listbox", items: options, children: (item) => (_jsx(AriaListBoxItem, { id: item.value, textValue: item.label, isDisabled: item.disabled, className: optionClass, children: item.label })) }) })] }));
+};
+// ---------------------------------------------------------------------------
+// Searchable single-select — React Aria ComboBox (input + popover + listbox)
+// ---------------------------------------------------------------------------
+const SearchableSelect = ({ options, label, placeholder, description, errorMessage, variant = 'default', size, value, defaultValue, onChange, disabled, isRequired, name, id, className, emptyMessage = DEFAULT_EMPTY, 'aria-label': ariaLabel, }) => {
+    const isInvalid = variant === 'error';
+    const isControlled = value !== undefined;
+    const sz = normalizeSize(size);
+    return (_jsxs(AriaComboBox, { "aria-label": !label ? ariaLabel : undefined, defaultItems: options, selectedKey: isControlled ? toKey(value) : undefined, defaultSelectedKey: !isControlled ? defaultValue : undefined, onSelectionChange: (key) => onChange?.(key == null ? '' : String(key)), isDisabled: disabled, isInvalid: isInvalid, isRequired: isRequired, name: name, menuTrigger: "focus", allowsEmptyCollection: true, className: cn('eidotter-select eidotter-select--searchable flex flex-col gap-1', className), children: [label && _jsx(AriaLabel, { className: labelClass, children: label }), _jsxs("div", { className: cn(triggerBase, sizeTrigger[sz]), children: [_jsx(AriaInput, { id: id, placeholder: placeholder, className: "eidotter-select__input flex-1 min-w-0 bg-transparent text-inherit outline-none" }), _jsx(AriaButton, { className: "eidotter-select__arrow-btn", "aria-label": "Show options", children: _jsx("span", { "aria-hidden": "true", className: "eidotter-select__arrow", children: "\u25BC" }) })] }), description && !isInvalid && (_jsx(AriaText, { slot: "description", className: descClass, children: description })), errorMessage && isInvalid && (_jsx(AriaText, { slot: "errorMessage", className: errClass, children: errorMessage })), _jsx(AriaPopover, { className: "eidotter-select__popover", children: _jsx(AriaListBox, { className: "eidotter-select__listbox", renderEmptyState: () => _jsx("div", { className: "eidotter-select__empty", children: emptyMessage }), children: (item) => (_jsx(AriaListBoxItem, { id: item.value, textValue: item.label, isDisabled: item.disabled, className: optionClass, children: item.label })) }) })] }));
+};
+// ---------------------------------------------------------------------------
+// Multi-select — Button trigger + standalone Popover + multi ListBox
+// (React Aria has no high-level multi-select; this composes the primitives.)
+// ---------------------------------------------------------------------------
+const MultiSelect = ({ options, label, placeholder = 'Select…', description, errorMessage, variant = 'default', size, value, defaultValue, onChange, disabled, name, id, className, searchable, searchPlaceholder = 'FILTER…', emptyMessage = DEFAULT_EMPTY, 'aria-label': ariaLabel, }) => {
+    const isInvalid = variant === 'error';
+    const isControlled = value !== undefined;
+    const sz = normalizeSize(size);
+    const triggerRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const [internal, setInternal] = useState(defaultValue ?? []);
+    const selected = isControlled ? value ?? [] : internal;
+    const baseId = useId();
+    const labelId = `${baseId}-label`;
+    const selectedSet = useMemo(() => new Set(isControlled ? value ?? [] : internal), [isControlled, value, internal]);
+    const labelMap = useMemo(() => new Map(options.map((o) => [o.value, o.label])), [options]);
+    const filtered = useMemo(() => {
+        if (!searchable || !query.trim())
+            return options;
+        const q = query.trim().toLowerCase();
+        return options.filter((o) => o.label.toLowerCase().includes(q));
+    }, [options, searchable, query]);
+    const handleChange = (selection) => {
+        const next = selection === 'all' ? options.map((o) => o.value) : Array.from(selection, String);
+        if (!isControlled)
+            setInternal(next);
+        onChange?.(next);
+    };
+    // Reset the filter each time the popover opens so stale queries don't hide
+    // options on the next open.
+    const handleOpenChange = (next) => {
+        setOpen(next);
+        if (next)
+            setQuery('');
+    };
+    const triggerText = selected.length === 0 ? placeholder : selected.map((v) => labelMap.get(v) ?? v).join(', ');
+    return (_jsxs("div", { className: cn('eidotter-select eidotter-select--multi flex flex-col gap-1', className), children: [label && (_jsx("span", { id: labelId, className: labelClass, children: label })), _jsxs(AriaButton, { ref: triggerRef, id: id, isDisabled: disabled, "aria-label": !label ? ariaLabel : undefined, "aria-labelledby": label ? labelId : undefined, "aria-haspopup": "listbox", "aria-expanded": open, onPress: () => handleOpenChange(!open), className: cn(triggerBase, sizeTrigger[sz], isInvalid && 'eidotter-select__trigger--error'), children: [_jsx("span", { className: cn('eidotter-select__value flex-1 text-left truncate', selected.length === 0 && 'eidotter-select__value--placeholder text-dos-text-muted'), children: triggerText }), _jsx("span", { "aria-hidden": "true", className: "eidotter-select__arrow", children: "\u25BC" })] }), description && !isInvalid && _jsx("span", { className: descClass, children: description }), errorMessage && isInvalid && _jsx("span", { className: errClass, children: errorMessage }), name && selected.map((v) => _jsx("input", { type: "hidden", name: name, value: v }, v)), _jsxs(AriaPopover, { triggerRef: triggerRef, isOpen: open, onOpenChange: handleOpenChange, className: "eidotter-select__popover", children: [searchable && (_jsx("input", { autoFocus: true, type: "text", className: "eidotter-select__search font-dos", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": "Filter options" })), _jsx(AriaListBox, { "aria-label": ariaLabel || label || 'Options', selectionMode: "multiple", selectedKeys: selectedSet, onSelectionChange: handleChange, items: filtered, autoFocus: searchable ? undefined : 'first', renderEmptyState: () => _jsx("div", { className: "eidotter-select__empty", children: emptyMessage }), className: "eidotter-select__listbox", children: (item) => (_jsx(AriaListBoxItem, { id: item.value, textValue: item.label, isDisabled: item.disabled, className: cn(optionClass, 'eidotter-select__option--multi'), children: ({ isSelected }) => (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "eidotter-select__check", children: isSelected ? '[x]' : '[ ]' }), _jsx("span", { className: "flex-1", children: item.label })] })) })) })] })] }));
+};
 /**
- * DOS-styled select — MVP wrapper around a native `<select>` (DMNC-860).
- * Ported from Steuerdash.
+ * DOS-styled Select / Dropdown built on React Aria primitives (DMNC-593).
  *
- * Font-size is set via inline style, not a `text-dos-*` class: Tailwind v4's
- * Preflight form reset (`select { font-size: 100% }`) outranks utility classes
- * on a native `<select>`, so the inline style is the reliable escape hatch
- * (token-driven). Upstream component fix tracked at eidotter#349.
+ * Three modes via props:
+ * - **default** — single-select `Select` (button + popover + listbox)
+ * - **`searchable`** — single-select `ComboBox` with type-to-filter
+ * - **`multiple`** — multi-select listbox; `value`/`onChange` use string arrays
+ *   (combine with `searchable` for a filterable multi-select)
+ *
+ * React Aria handles keyboard nav, focus management, and ARIA; phosphor glow on
+ * focus/open lives in `Select.css`. The single-value API (`value` / `options` /
+ * `onChange`) is backward-compatible with the previous native-`<select>` MVP.
  */
-export const Select = ({ value, options, onChange, id, disabled, className, 'aria-label': ariaLabel, }) => (_jsx("select", { id: id, "aria-label": ariaLabel, value: value, disabled: disabled, onChange: (e) => onChange(e.target.value), style: { fontSize: 'var(--typography-font-size-text-xs)' }, className: cn('eidotter-select', 'min-w-[5rem] cursor-pointer font-dos px-2 py-1', 'bg-dos-bg-secondary text-dos-text-primary border border-dos-border-default', 'hover:border-dos-text-accent focus:border-dos-text-accent focus:outline-none', 'disabled:cursor-not-allowed disabled:opacity-50', className), children: options.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value))) }));
+export const Select = (props) => {
+    if (props.multiple)
+        return _jsx(MultiSelect, { ...props });
+    if (props.searchable)
+        return _jsx(SearchableSelect, { ...props });
+    return _jsx(SingleSelect, { ...props });
+};
 Select.displayName = 'Select';

package/dist/components/registry.js

@@ -308,6 +308,29 @@ export const componentRegistry = {
             { version: '0.3.0', type: 'added', description: 'Initial RetroEffects — scanlines, glow, flicker, bloom, intensity, powered' },
         ],
     },
+    Select: {
+        origin: 'steuerdash',
+        consumers: ['steuerdash'],
+        since: '0.36.0',
+        originNote: 'DOS-styled dropdown. MVP was a native <select> ported from Steuerdash; rebuilt on React Aria Select/ComboBox in DMNC-593 with default/searchable/multi modes',
+        variants: {
+            'mode:default': { description: 'Single-select — React Aria Select (button + popover + listbox)', since: '0.38.0', usedBy: ['steuerdash'] },
+            'searchable:true': { description: 'Type-to-filter ComboBox single-select', since: '0.38.0' },
+            'multiple:true': { description: 'Multi-select listbox; value/onChange use string arrays', since: '0.38.0' },
+            'variant:error': { description: 'Invalid state — red border + errorMessage slot', since: '0.38.0' },
+            'size:sm': { description: 'Compact trigger (28px min-height)', since: '0.38.0' },
+            'size:md': { description: 'Standard trigger (32px min-height)', since: '0.38.0', usedBy: ['steuerdash'] },
+            'size:lg': { description: 'Tall trigger (40px min-height)', since: '0.38.0' },
+        },
+        platforms: {
+            react: { path: 'src/components/Select', status: 'canonical' },
+            swiftui: { status: 'planned' },
+        },
+        changelog: [
+            { version: '0.38.0', type: 'changed', description: 'Rebuild on React Aria (Select/ComboBox/ListBox) with phosphor glow; add searchable + multiple modes, label/description/error chrome, sizes. Backward-compatible value/options/onChange API (DMNC-593)' },
+            { version: '0.36.0', type: 'added', description: 'Initial Select — native <select> MVP ported from Steuerdash (DMNC-860)' },
+        ],
+    },
     Skeleton: { origin: 'eidotter', consumers: ['dmnctech'], originNote: 'DOS/CGA loading placeholder — shade-character rows (\u2591\u2592\u2593) with CRT hum-bar band rolling top\u2192bottom (DMNC-1018)' },
     Stat: {
         origin: 'steuerdash',