@viax.io/uxm 4.36.0

package/dist/ui/input/input.css

@@ -0,0 +1,273 @@
+@charset "UTF-8";
+/* ── Inputs ──
+   Each atom in the family — input-text, textarea, select-dropdown — gets
+   its own per-state rule set so saved theming on one doesn't bleed into
+   the others. Every state (default / :hover / :focus / :disabled /
+   .--error) reads its own `--uxm-{id}-{state}-*` var, falling back to a
+   sensible token. The order matters: default rule first, then state
+   pseudos (highest specificity wins for hover/focus), then disabled
+   (which uses `:disabled` so it beats hover/focus when both apply), then
+   the `--error` modifier class (which beats default but composes with
+   :focus / :hover via the var read in each state rule). */
+.uxm-input-text,
+.uxm-textarea,
+.uxm-select-dropdown {
+  /* Own the box model: each atom combines `width: 100%` with its own padding
+     and border, which only adds up under `border-box`. `ui.css` ships no
+     global reset by design — without this, the field overflows its container
+     by padding + border in a reset-less host. */
+  box-sizing: border-box;
+  width: 100%;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
+}
+
+.uxm-input-text::placeholder,
+.uxm-textarea::placeholder {
+  color: var(--color-text-muted);
+}
+
+/* Text Input
+   The `--state-*` modifier classes mirror the `:hover` / `:focus` pseudo
+   rules by sharing their selector group. The UXM preview applies one of
+   these classes to force the visual without requiring real pointer /
+   keyboard interaction, while still leaving the input fully interactive
+   (you can hover and click it, and the real pseudo rules layer on top
+   via source order — focus > hover). Disabled state engages the real
+   `disabled` attribute (since `:disabled` correctly blocks input). */
+.uxm-input-text {
+  background-color: var(--uxm-input-text-bg, var(--color-card));
+  color: var(--uxm-input-text-color, var(--color-text));
+  border: 1px solid var(--uxm-input-text-border-color, var(--color-border));
+  border-radius: var(--uxm-input-text-border-radius, 8px);
+  padding: var(--uxm-input-text-padding-y, 10px) var(--uxm-input-text-padding-x, 12px);
+  font-size: calc(var(--uxm-input-text-font-size, 14px) * var(--type-scale, 1));
+}
+
+.uxm-input-text--state-hover,
+.uxm-input-text:hover:not(:disabled):not(.uxm-input-text--error) {
+  background-color: var(--uxm-input-text-hover-bg, var(--color-card));
+  border-color: var(--uxm-input-text-hover-border, var(--color-accent));
+}
+
+.uxm-input-text--state-focus,
+.uxm-input-text:focus {
+  border-color: var(--uxm-input-text-focus-border, var(--color-accent));
+  outline: 2px solid var(--uxm-input-text-focus-ring, var(--color-accent));
+  outline-offset: 2px;
+}
+
+.uxm-input-text:disabled {
+  background-color: var(--uxm-input-text-disabled-bg, var(--color-surface-alt));
+  border-color: var(--uxm-input-text-disabled-border, var(--color-border));
+  color: var(--uxm-input-text-disabled-color, var(--color-text-muted));
+  opacity: var(--uxm-input-text-disabled-opacity, 0.6);
+  cursor: not-allowed;
+}
+
+.uxm-input-text.uxm-input-text--error {
+  background-color: var(--uxm-input-text-error-bg, var(--color-card));
+  border-color: var(--uxm-input-text-error-border, var(--color-danger-text));
+}
+
+/* Per-atom error message — sits below the field. Reads the same
+   `errorColor` / `errorMessageSize` knobs the registry already exposes
+   (kebab → `--uxm-input-text-error-color` / `-error-message-size`), so
+   the editor's "Match in N other Inputs" sync keeps every atom's message
+   styling in lockstep with one click while still allowing per-atom
+   divergence. Same pattern repeats verbatim for each input atom below. */
+.uxm-input-text__error-message {
+  display: block;
+  margin-top: 4px;
+  font-size: calc(var(--uxm-input-text-error-message-size, 12px) * var(--type-scale, 1));
+  color: var(--uxm-input-text-error-color, var(--color-danger-text));
+}
+
+/* Textarea — same forced-state modifier pattern as input-text. */
+.uxm-textarea {
+  background-color: var(--uxm-textarea-bg, var(--color-card));
+  color: var(--uxm-textarea-color, var(--color-text));
+  border: 1px solid var(--uxm-textarea-border-color, var(--color-border));
+  border-radius: var(--uxm-textarea-border-radius, 8px);
+  padding: var(--uxm-textarea-padding-y, 10px) var(--uxm-textarea-padding-x, 12px);
+  font-size: calc(var(--uxm-textarea-font-size, 14px) * var(--type-scale, 1));
+  min-height: var(--uxm-textarea-min-height, 100px);
+  resize: vertical;
+}
+
+.uxm-textarea--state-hover,
+.uxm-textarea:hover:not(:disabled):not(.uxm-textarea--error) {
+  background-color: var(--uxm-textarea-hover-bg, var(--color-card));
+  border-color: var(--uxm-textarea-hover-border, var(--color-accent));
+}
+
+.uxm-textarea--state-focus,
+.uxm-textarea:focus {
+  border-color: var(--uxm-textarea-focus-border, var(--color-accent));
+  outline: 2px solid var(--uxm-textarea-focus-ring, var(--color-accent));
+  outline-offset: 2px;
+}
+
+.uxm-textarea:disabled {
+  background-color: var(--uxm-textarea-disabled-bg, var(--color-surface-alt));
+  border-color: var(--uxm-textarea-disabled-border, var(--color-border));
+  color: var(--uxm-textarea-disabled-color, var(--color-text-muted));
+  opacity: var(--uxm-textarea-disabled-opacity, 0.6);
+  cursor: not-allowed;
+  resize: none;
+}
+
+.uxm-textarea.uxm-textarea--error {
+  background-color: var(--uxm-textarea-error-bg, var(--color-card));
+  border-color: var(--uxm-textarea-error-border, var(--color-danger-text));
+}
+
+.uxm-textarea__error-message {
+  display: block;
+  margin-top: 4px;
+  font-size: calc(var(--uxm-textarea-error-message-size, 12px) * var(--type-scale, 1));
+  color: var(--uxm-textarea-error-color, var(--color-danger-text));
+}
+
+/* Select / Dropdown — `<div role="combobox">` trigger backed by a
+   Listbox panel. The chrome rules below match what the native
+   `<select>` carried before the migration. Disabled state runs
+   through `aria-disabled` (CSS targets the attribute since `<div>`
+   doesn't support `:disabled`). The native browser chevron + the
+   `appearance: none` + bg-image SVG hack are gone — the trigger
+   renders a real `<Icon>` chevron via its own JSX. */
+.uxm-select-dropdown {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background-color: var(--uxm-select-dropdown-bg, var(--color-card));
+  color: var(--uxm-select-dropdown-color, var(--color-text));
+  border: 1px solid var(--uxm-select-dropdown-border-color, var(--color-border));
+  border-radius: var(--uxm-select-dropdown-border-radius, 8px);
+  padding: var(--uxm-select-dropdown-padding-y, 10px) var(--uxm-select-dropdown-padding-x, 12px);
+  font-size: calc(var(--uxm-select-dropdown-font-size, 14px) * var(--type-scale, 1));
+  cursor: pointer;
+  outline: none;
+  text-align: left;
+  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
+}
+
+.uxm-select-dropdown__trigger-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.uxm-select-dropdown__trigger-label--empty {
+  color: var(--color-text-muted);
+}
+
+.uxm-select-dropdown__trigger-chevron {
+  flex-shrink: 0;
+  color: var(--color-text-muted);
+  transition: transform 0.15s;
+}
+
+/* Clear ✕ inside the trigger — rendered when a value is selected AND the
+   field can be empty (it has a placeholder option). Mandatory selects (no
+   placeholder, a value is always picked) don't render it. Shared chrome
+   (22×22, 12px glyph) comes from `.uxm-field-clear` below; this per-atom
+   class is just a hook — the ✕ is a flex child of the trigger, so it needs
+   no positioning of its own. Click handlers in JSX stopPropagation so
+   clearing doesn't ALSO toggle the popover. */
+.uxm-select-dropdown--state-hover,
+.uxm-select-dropdown:hover:not([aria-disabled=true]):not(.uxm-select-dropdown--error) {
+  background-color: var(--uxm-select-dropdown-hover-bg, var(--color-card));
+  border-color: var(--uxm-select-dropdown-hover-border, var(--color-accent));
+}
+
+.uxm-select-dropdown--state-focus,
+.uxm-select-dropdown:focus-visible,
+.uxm-select-dropdown--open {
+  border-color: var(--uxm-select-dropdown-focus-border, var(--color-accent));
+  outline: 2px solid var(--uxm-select-dropdown-focus-ring, var(--color-accent));
+  outline-offset: 2px;
+}
+
+.uxm-select-dropdown[aria-disabled=true] {
+  background-color: var(--uxm-select-dropdown-disabled-bg, var(--color-surface-alt));
+  border-color: var(--uxm-select-dropdown-disabled-border, var(--color-border));
+  color: var(--uxm-select-dropdown-disabled-color, var(--color-text-muted));
+  opacity: var(--uxm-select-dropdown-disabled-opacity, 0.6);
+  cursor: not-allowed;
+}
+
+.uxm-select-dropdown.uxm-select-dropdown--error {
+  background-color: var(--uxm-select-dropdown-error-bg, var(--color-card));
+  border-color: var(--uxm-select-dropdown-error-border, var(--color-danger-text));
+}
+
+.uxm-select-dropdown__error-message {
+  display: block;
+  margin-top: 4px;
+  font-size: calc(var(--uxm-select-dropdown-error-message-size, 12px) * var(--type-scale, 1));
+  color: var(--uxm-select-dropdown-error-color, var(--color-danger-text));
+}
+
+/* ── Clearable (✕) — Text Input + Textarea ──
+   `.uxm-field-clear` shrinks the shared IconButton to a 22×22 affordance
+   (12px glyph); per-atom classes add POSITIONING only. Both fields reserve
+   trailing room so the value never slides under the ✕. The visible field
+   chrome stays on `.uxm-input-text` / `.uxm-textarea` (the input element), so
+   the wrapper is layout-only and save-emitted `--uxm-{id}-*` vars still land.
+   Number Input, Input with Icon, Phone / Currency / Date / Time Input, and
+   Select all share this same `.uxm-field-clear` IconButton chrome
+   (positioning only per atom) so every clear ✕ is identical. */
+.uxm-field-clear {
+  /* Single source for the ✕ footprint. The per-atom padding reserves reference
+     `var(--uxm-field-clear-size, 22px)` — keep the fallback in sync here. */
+  --uxm-icon-button-size: var(--uxm-field-clear-size, 22px);
+  --uxm-icon-button-icon-size: 12px;
+  --uxm-icon-button-stroke-width: 2;
+  flex-shrink: 0;
+}
+
+.uxm-input-text__wrap {
+  position: relative;
+  display: block;
+}
+
+.uxm-input-text__wrap .uxm-input-text {
+  width: 100%;
+}
+
+.uxm-input-text--clearable {
+  padding-right: calc(var(--uxm-input-text-padding-x, 12px) + 22px + 8px);
+}
+
+.uxm-input-text__clear {
+  position: absolute;
+  right: var(--uxm-input-text-padding-x, 12px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* Clearable textarea — the ✕ pins to the top-right corner, away from the
+   bottom-right resize handle. */
+.uxm-textarea__wrap {
+  position: relative;
+  display: block;
+}
+
+.uxm-textarea__wrap .uxm-textarea {
+  width: 100%;
+  display: block;
+}
+
+.uxm-textarea--clearable {
+  padding-right: calc(var(--uxm-textarea-padding-x, 12px) + 22px + 8px);
+}
+
+.uxm-textarea__clear {
+  position: absolute;
+  right: var(--uxm-textarea-padding-x, 12px);
+  top: var(--uxm-textarea-padding-y, 10px);
+}

package/dist/ui/input/input.d.ts

@@ -0,0 +1,140 @@
+import { type ChangeEvent, type InputHTMLAttributes, type ReactNode, type Ref, type SelectHTMLAttributes, type TextareaHTMLAttributes } from 'react';
+export interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * When set to a non-empty string, the field renders in its error state:
+     * red border (`.uxm-input-text--error`), `aria-invalid`, and the message
+     * rendered below the input. Omit (or pass an empty string) for the normal
+     * state. The atom owns the message so it works standalone — search bars,
+     * inline edits, custom layouts — without requiring a `FormField` wrapper.
+     */
+    error?: string;
+    /**
+     * Show a clear (✕) button at the trailing edge when the input has content.
+     * **Defaults to `true`** — a free-text field is always safe to clear (you
+     * can type/delete anyway), so the affordance is on by default; pass
+     * `clearable={false}` to opt out. The ✕ self-clears (resets the field and
+     * fires `onChange` with ""), so no `onClear` is needed — any controlled
+     * `value` + `onChange` usage gets it for free.
+     */
+    clearable?: boolean;
+    /**
+     * Optional override for the clear action. By default the field clears
+     * itself (and notifies via `onChange`); pass `onClear` only when you need
+     * custom reset logic beyond emptying the value.
+     */
+    onClear?: () => void;
+    /** Accessible name for the clear button. Default `"Clear"`. */
+    clearLabel?: string;
+    /**
+     * Handle to the underlying `<input>` element, merged with the atom's own
+     * internal ref (the self-clear keeps working). Use this to focus, select,
+     * measure, or insert text at the caret from a consumer. A plain React `ref`
+     * on `<TextInput>` does NOT reach the element — it's consumed by `{...rest}`
+     * and overridden by the managed ref — so pass `inputRef` instead.
+     */
+    inputRef?: Ref<HTMLInputElement>;
+}
+export declare function TextInput({ className, type, error, clearable, onClear, clearLabel, value, defaultValue, onChange, disabled, inputRef, ...rest }: TextInputProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TextInput {
+    var hasError: boolean;
+}
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** See `TextInputProps.error`. */
+    error?: string;
+    /** See `TextInputProps.clearable`. Defaults to `true`; ✕ sits at the top-right corner. */
+    clearable?: boolean;
+    /** See `TextInputProps.onClear` — optional override; the field self-clears otherwise. */
+    onClear?: () => void;
+    /** See `TextInputProps.clearLabel`. Default `"Clear"`. */
+    clearLabel?: string;
+    /**
+     * Handle to the underlying `<textarea>` element, merged with the atom's own
+     * internal ref (the self-clear keeps working). Use it to focus, select, or
+     * insert text at the caret (e.g. drop-a-variable-into-a-formula). A plain
+     * React `ref` on `<Textarea>` does NOT reach the element — pass
+     * `textareaRef` instead.
+     */
+    textareaRef?: Ref<HTMLTextAreaElement>;
+}
+export declare function Textarea({ className, error, clearable, onClear, clearLabel, value, defaultValue, onChange, disabled, textareaRef, ...rest }: TextareaProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Textarea {
+    var hasError: boolean;
+}
+/**
+ * Native `<select>` attributes the atom still accepts verbatim. The five
+ * omitted keys are the ones `mode` re-shapes: `value` / `defaultValue` /
+ * `onChange` differ per mode, `required` gains its own message prop, and
+ * `multiple` is replaced by `mode="multi"`. Keeping this base means existing
+ * `<Select onBlur={…} autoFocus data-testid={…}>` call sites — and any
+ * `Omit<SelectProps, …>` in consumer code — keep compiling.
+ */
+type SelectNativeProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'defaultValue' | 'onChange' | 'required' | 'multiple'>;
+/** Props shared by both single- and multi-select modes. */
+interface SelectCommonProps extends SelectNativeProps {
+    /** `<option>` children — parsed into items (and a placeholder from `<option value="" disabled>`). */
+    children?: ReactNode;
+    /**
+     * When set to a non-empty string, the trigger renders in its error
+     * state: red border (`.uxm-select-dropdown--error`), `aria-invalid` on
+     * the combobox, and the message below the trigger. Omit (or pass an
+     * empty string) for the normal state.
+     */
+    error?: string;
+    /**
+     * Whether the dropdown panel includes a search box. Forwarded to the
+     * internal Listbox: `true`/`false` force it, `"auto"` (the default)
+     * shows it only once the option count crosses the shared threshold —
+     * short lists stay a plain picker, long ones become filterable, with no
+     * change to the trigger. (For a search-first combobox with its own
+     * trigger chrome — icon glyphs, dial codes — use SearchDropdown.)
+     */
+    searchable?: boolean | 'auto';
+    /**
+     * Require a selection. Clearing to empty is still allowed (input-family,
+     * live model) but flags the error immediately. An explicit `error` prop
+     * takes precedence. Single mode is only clearable with a placeholder
+     * option; multi mode uses `clearable`.
+     */
+    required?: boolean;
+    /**
+     * Override the default required message. Defaults are per-mode:
+     * single → `"Select an option"`, multi → `"Select at least one option"`
+     * (the shared `DEFAULT_MULTI_REQUIRED_MESSAGE`).
+     */
+    requiredMessage?: string;
+    /**
+     * Accessible name for the trigger's clear button. Defaults are per-mode:
+     * single → `"Clear selection"`, multi → `"Clear all selections"`.
+     */
+    clearLabel?: string;
+}
+export interface SelectSingleProps extends SelectCommonProps {
+    /** Single-choice (default) — one value, cleared only when a placeholder option exists. */
+    mode?: 'single';
+    value?: string;
+    defaultValue?: string;
+    /** Fires a synthesized `ChangeEvent` (native-`<select>`-compatible) so `e.target.value` works. */
+    onChange?: (event: ChangeEvent<HTMLSelectElement>) => void;
+}
+export interface SelectMultiProps extends SelectCommonProps {
+    /** Multi-choice — an array value with a "N selected" trigger, live commit, checkbox rows. */
+    mode: 'multi';
+    value?: string[];
+    defaultValue?: string[];
+    /** Fires the full selected-value array on every toggle (live). */
+    onChange?: (next: string[]) => void;
+    /** Show a clear-all ✕ on the trigger AND a "Clear all" in the panel. */
+    clearable?: boolean;
+}
+export type SelectProps = SelectSingleProps | SelectMultiProps;
+/**
+ * Select dropdown atom. `mode="single"` (default) picks one value;
+ * `mode="multi"` picks an array. Both share the same trigger chrome and
+ * `<option>` children API — only the value/onChange shape differs.
+ */
+export declare function Select(props: SelectProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Select {
+    var hasError: boolean;
+}
+export {};
+//# sourceMappingURL=input.d.ts.map

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

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