asma-ui-core 3.44.0 → 3.45.0

package/dist/src/components/inputs/checkbox/base-ui/StyledCheckbox.d.ts

@@ -1,17 +1,46 @@
-import { default as React, SVGProps } from 'react';
-import { Checkbox } from '@base-ui/react/checkbox';
+import { default as React, ChangeEvent, SVGProps } from 'react';
+/**
+ * @figmaNode wXrXt5uKNNzV2DnQCgyYZH#15385-19713
+ * Figma "Checkbox" (box 20px, 40px touch). Figma **Type** (Unchecked/Indeterminate/Checked) ←
+ * `checked`/`indeterminate`; Figma **State** (Enabled/Hovered/Focused/Disabled/Read-only) ← native
+ * hover/focus + `disabled`/`readOnly`/`error`. Checked/indeterminate box = `gama-500` #168181,
+ * unchecked border = `delta-500`; Error = box border `error-500` #e10700 (node 41325-207511/207527).
+ */
 type StyledCheckboxProps = {
+    /** @figmaProp none — test hook */
     dataTest: string;
+    /** @figmaProp none — app size (Figma box is 20px) */
     size?: 'small' | 'medium';
+    /** @figmaProp Type = true→"Checked" | false→"Unchecked" */
     checked?: boolean;
+    /** @figmaProp Type = true→"Indeterminate" */
     indeterminate?: boolean;
+    /** @figmaProp State = true→"Error" (box border → error-500) */
+    error?: boolean;
     disableRipple?: boolean;
     hideWrapper?: boolean;
     className?: string;
     checkboxClassName?: string;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
-} & Omit<React.ComponentProps<typeof Checkbox.Root>, 'children'>;
+    onChange?: (event: ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+    /**
+     * Renders the identical visual box (same classes/data-attrs — no visual change) with NO real
+     * `<input>` at all, for use as a pure state indicator inside a widget that already owns
+     * selection itself (e.g. a multi-select `role="option"` row, whose own `aria-selected` is the
+     * real accessible state). A real `<input type="checkbox">` there is a genuine axe
+     * `nested-interactive` violation (a focusable, semantically-interactive element nested inside a
+     * non-focusable widget descendant) — `aria-hidden`/`tabIndex={-1}` do NOT satisfy that check, only
+     * removing the input does. Do not use this for a checkbox that is itself the control (nothing else
+     * would let a keyboard/AT user operate it).
+     */
+    decorative?: boolean;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'checked' | 'type'>;
 export declare const IndeterminateIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
 export declare const CheckIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+/**
+ * Native `<input type="checkbox">` checkbox (replaces `@base-ui/react`). A visually-hidden input
+ * carries state + a11y; the visual box, ripple, and indeterminate bar come from the SCSS module
+ * (kept: `@keyframes`/pseudo-elements aren't Tailwind-expressible — GUD-003), whose `data-*`
+ * selectors are driven from React here. Public props unchanged. TASK-201.
+ */
 export declare const StyledCheckbox: React.FC<StyledCheckboxProps>;
 export {};

package/dist/src/components/inputs/dynamic-select/StyledDynamicSelect.d.ts

@@ -3,6 +3,22 @@ import { StyledDynamicSelectComponent } from './types';
  * A smart, adaptive select input that automatically chooses the best UI representation
  * based on the number of options provided.
  *
+ * @figmaNode wXrXt5uKNNzV2DnQCgyYZH#31009-173666
+ * Figma **"Dynamic select"** has no single component — it is a *reference table* mapping the
+ * option count (columns: **≤5**, **>5 & ≤10**, **>10**) × selection mode (rows: **Single**,
+ * **Multiple**) to a representation, which this component's thresholds reproduce exactly:
+ * - **≤5 → Chips select** (`DynamicInteractiveChipGroup`): `StyledInteractiveChip` radio (single)
+ *   or checkbox (multiple) chips; long labels stack vertically; "Clear selection" link + helper row.
+ * - **>5 & ≤10 → Select (dropdown)**: outlined `StyledInputField` trigger + `Menus` list, typing
+ *   disabled (caret hidden, keyboard blocked).
+ * - **>10 → Autocomplete**: same trigger + scrollable `Menus` list with type-ahead search.
+ * Each representation is composed from components already aligned to their own Figma nodes (Chip
+ * `13248-31089`, Input field `15561-37391`, Menus `16073-19226`, Autocomplete `20474-27966`), so
+ * parity here is the mode routing + the shared title/clear/helper chrome, not a bespoke visual.
+ * Title = Body Base SemiBold 16 `text-icon/title-label` #363e4a (delta-800); dropdown option =
+ * Menus item (`text-icon/body` delta-700, hover delta-50, selected gama-50). Non-annotated props
+ * are behavioral / MUI `Autocomplete` API-parity.
+ *
  * **Rendering strategy:**
  * - `1–5 options` → renders as an interactive chip group (`DynamicInteractiveChipGroup`).
  *   Chips behave as radio buttons (single) or checkboxes (multiple).

package/dist/src/components/inputs/dynamic-select/types.d.ts

@@ -1,4 +1,4 @@
-import { AutocompleteProps } from '@mui/material';
+import { StyledSelectAutocompleteProps } from '../select-autocomplete';
 import { default as React } from 'react';
 export type DynamicSelectOptionPrimitive = string | number | boolean;
 export type DynamicSelectOptionObject = {
@@ -8,42 +8,46 @@ export type DynamicSelectOptionObject = {
 } & object;
 export type DynamicSelectOption = DynamicSelectOptionPrimitive | (DynamicSelectOptionObject & object);
 interface SingleDynamicSelectProps<TOption extends DynamicSelectOption> {
+    /** @figmaProp Selection mode = "Single select" row (radio chips / single-value field). */
     multiple?: false;
+    /** @figmaProp Filled — the single selected option (fills the field / checks the chip). */
     value: TOption | null;
     onChange: (value: TOption | null) => void;
 }
 interface MultipleDynamicSelectProps<TOption extends DynamicSelectOption> {
+    /** @figmaProp Selection mode = "Multiple select" row (checkbox chips / tag chips + `+`). */
     multiple: true;
+    /** @figmaProp Filled — selected options (tag chips in the field / checked chips). */
     value: TOption[] | null;
     onChange: (value: TOption[] | null) => void;
 }
 interface DynamicSelectCommonProps<TOption extends DynamicSelectOption> {
-    /** Unique identifier used as the root `data-test` attribute for QA selectors. */
+    /** @figmaProp none — test hook */
     dataTest: string;
-    /** The full list of selectable options. Determines which UI is rendered: 1–5 → chip group, 0 or 6+ → autocomplete. */
+    /** @figmaProp option-count column — 1–5 → Chips select, 6–10 → Select (dropdown), 11+ → Autocomplete. */
     options: TOption[];
-    /** When `true`, the component is non-interactive and only shows selected value(s) as plain chip(s). */
+    /** @figmaProp State = true→"Read-only" (non-interactive; selected value(s) shown as plain chips). */
     readOnly?: boolean;
     /** Prevents the built-in clear button from appearing even when a value is set. Applies to autocomplete only. */
     disableClearable?: boolean;
-    /** Optional label rendered above the input/chip group. */
+    /** @figmaProp Title (Body Base SemiBold 16, text-icon/title-label delta-800) above the control. */
     title?: string;
-    /** Controls the visual size of chips and buttons. Defaults to `'medium'`. */
+    /** @figmaProp none — app size (chips/buttons). Defaults to `'medium'`. */
     size?: 'small' | 'medium';
     /** Placeholder text shown in the autocomplete input when no value is selected. */
     placeholder?: string;
-    /** Disables all interactions. */
+    /** @figmaProp State = true→"Disabled" */
     disabled?: boolean;
-    /** Text shown in the autocomplete dropdown when no options match the search query. */
+    /** @figmaProp Empty-state text in the dropdown when no options match the search. */
     noOptionsText?: string;
-    /** When `true`, shows the error style and renders an error icon next to the helper text. */
+    /** @figmaProp State = true→"Error" (error border/icon + red helper row). */
     error?: boolean;
     /**
-     * When `true`, hides the "Clear selection" button in the chip group.
+     * @figmaProp Required — hides the chip-group "Clear selection" link (must keep a value).
      * Use this when the field must always have a value.
      */
     required?: boolean;
-    /** Supplementary text rendered below the input. Shown as-is, or falls back to `'Required'` when `error=true` and no text is provided. */
+    /** @figmaProp Helper text (Helper 14/lh20; falls back to "Required" when `error` and no text). */
     helperText?: React.ReactNode;
     /** Completely removes the helper text block below the autocomplete */
     disableHelperText?: boolean;
@@ -58,8 +62,8 @@ interface DynamicSelectCommonProps<TOption extends DynamicSelectOption> {
      */
     labelKey?: TOption extends object ? keyof TOption : never;
     /**
-     * Custom label renderer. When provided, its return value is used instead of the
-     * plain string resolved from `labelKey`. Useful for rich content (icons, avatars, etc.).
+     * @figmaProp Complex label — rich option content (the Figma "Complex … with long labels and
+     * helper text" rows: title + description, avatars, icons). Overrides the `labelKey` string.
      */
     renderLabel?: (option: TOption) => React.ReactNode;
     /**
@@ -69,8 +73,15 @@ interface DynamicSelectCommonProps<TOption extends DynamicSelectOption> {
     getOptionTooltip?: (option: TOption) => React.ReactNode;
     /** Node prepended inside the autocomplete text input (e.g. a search icon). */
     startAdornment?: React.ReactNode;
+    /**
+     * Forwarded to the underlying autocomplete text input (autocomplete variant only), so
+     * validation/side-effects belong on the field itself instead of a wrapper element — e.g.
+     * clear an error `onFocus`, validate `onBlur`. Merged with the field's own focus handling.
+     */
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
     /** Escape hatch to pass any MUI `Autocomplete` prop directly. Applied on top of internal defaults in the autocomplete variant. */
-    autocompleteProps?: Partial<AutocompleteProps<TOption, boolean | undefined, boolean | undefined, boolean | undefined>>;
+    autocompleteProps?: Partial<StyledSelectAutocompleteProps<TOption, boolean | undefined, boolean | undefined, boolean | undefined>>;
     /**
      * When `true`, renders loading skeletons (chip group) or disables the input (autocomplete)
      * while data is being fetched.

package/dist/src/components/inputs/field-styles.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Shared outlined-field styling so `StyledInputField`, `StyledInputLabel` (+ `StyledFormControl`)
+ * and `StyledSelect` render an identical border + floating label without MUI. TASK-401.
+ */
+export type FieldSize = 'small' | 'medium';
+interface FieldState {
+    focused?: boolean;
+    error?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+}
+/** The border overlay (an absolutely-positioned sibling so width changes never reflow the input). */
+export declare const outlineClass: ({ focused, error, disabled, readOnly }: FieldState) => string;
+/** MUI-compatible fieldset outline used by text fields with floating labels. */
+export declare const notchedOutlineClass: ({ focused, error, disabled, readOnly, notched, }: FieldState & {
+    notched?: boolean;
+}) => string;
+export declare const notchedLegendClass: (shrink: boolean) => string;
+/**
+ * The floating label. `shrink` lifts it onto the top border (outside the 40px input box).
+ * Resting state centers in the field as a placeholder surrogate.
+ */
+export declare const floatingLabelClass: ({ shrink, focused, error, disabled, readOnly, }: FieldState & {
+    shrink: boolean;
+    size?: FieldSize;
+}) => string;
+export {};

package/dist/src/components/inputs/input-field/StyledInputField.d.ts

@@ -1,14 +1,89 @@
-import { TextFieldProps } from '@mui/material';
+import { ChangeEvent, CSSProperties, FocusEvent, HTMLAttributes, InputHTMLAttributes, ReactNode, Ref } from 'react';
+import { FieldSize } from '../field-styles';
+interface InputSlot {
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    ref?: Ref<HTMLInputElement | HTMLDivElement>;
+    [key: string]: unknown;
+}
+type HtmlInputSlot = InputHTMLAttributes<HTMLInputElement> & {
+    ref?: Ref<HTMLInputElement>;
+};
 /**
- *
- * @inputRef
- * inputRef to get Node of Input Element inside
- *
- * type='mui-input' is temporary, remove it after deleting antd from all projects. Antd lib overwrites styles for type[text]
+ * @figmaNode wXrXt5uKNNzV2DnQCgyYZH#15561-37391
+ * Figma "Input field" component. The Figma **State** property (Enabled/Hovered/Active-Focused/
+ * Error/Disabled/Read only) is driven by native focus/hover + the `error`/`disabled`/`readOnly`
+ * props; **Filled** (on/off) is derived from `value`/`defaultValue`. **Unify** and **Mixed state**
+ * are Figma-authoring properties with no React counterpart. Non-annotated props are behavioral /
+ * MUI `TextField` API-parity (DEC-003).
  */
-export declare const StyledInputField: React.FC<TextFieldProps & {
+export interface StyledInputFieldProps {
+    /** @figmaProp none — test hook */
+    dataTest: string;
+    /** @figmaProp Label element (floating) */
+    label?: ReactNode;
+    /** @figmaProp Filled = (value != '')→"on" | else→"off" */
+    value?: string | number;
+    /** @figmaProp Filled = (defaultValue != '')→"on" | else→"off" */
+    defaultValue?: string | number;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    /** @figmaProp State = true→"Error" */
+    error?: boolean;
+    /** @figmaProp Helper text element */
+    helperText?: ReactNode;
+    /** @figmaProp State = true→"Disabled" */
+    disabled?: boolean;
+    /** @figmaProp State = true→"Read only" */
+    readOnly?: boolean;
+    required?: boolean;
     allowClear?: boolean;
     onClear?: () => void;
-    readOnly?: boolean;
-    dataTest: string;
-}>;
+    type?: string;
+    placeholder?: string;
+    name?: string;
+    id?: string;
+    autoComplete?: string;
+    autoFocus?: boolean;
+    multiline?: boolean;
+    rows?: number;
+    minRows?: number;
+    maxRows?: number;
+    size?: FieldSize;
+    /** Accepted for API parity; the design always renders outlined. */
+    variant?: string;
+    fullWidth?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    sx?: unknown;
+    inputRef?: Ref<HTMLInputElement | HTMLTextAreaElement>;
+    slotProps?: {
+        input?: InputSlot;
+        htmlInput?: HtmlInputSlot;
+        inputLabel?: HTMLAttributes<HTMLLabelElement> & Record<string, unknown>;
+        formHelperText?: {
+            sx?: unknown;
+            className?: string;
+            hideErrorIcon?: boolean;
+        };
+    };
+    /** Legacy MUI adornment slot (still used by ~22 call sites). */
+    InputProps?: InputSlot;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Forwarded to the field root (MUI `TextField` parity); e.g. to stop clicks bubbling to a sortable header. */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+/**
+ * Outlined text field with a floating label (replaces MUI `TextField`). Self-contained: manages its
+ * own focus/value state to drive the shared field styling ([[field-styles]]); supports multiline,
+ * start/end adornments, an optional clear button, and error/helper text. Public props preserved
+ * (DEC-003). TASK-401.
+ *
+ * ponytail: `variant` is accepted but always renders outlined, and multiline uses fixed `rows`
+ * (no auto-grow to `maxRows`) — known ceilings; Chromatic in CI is the visual gate.
+ */
+export declare const StyledInputField: ({ dataTest, label, value, defaultValue, onChange, onBlur, onFocus, error, helperText, disabled, readOnly, required, allowClear, onClear, type, placeholder, name, id, autoComplete, autoFocus, multiline, rows, minRows, maxRows, size, fullWidth, className, style, sx, inputRef, slotProps, InputProps, onKeyDown, onClick, variant: _variant, }: StyledInputFieldProps) => JSX.Element;
+export {};

package/dist/src/components/inputs/input-field/index.d.ts

@@ -1,2 +1,2 @@
 export * from './StyledInputField';
-export { type TextFieldProps } from '@mui/material';
+export type { StyledInputFieldProps as TextFieldProps } from './StyledInputField';

package/dist/src/components/inputs/label/StyledLabel.d.ts

@@ -1,9 +1,22 @@
 import { CSSProperties, FC, MouseEvent, ReactNode } from 'react';
+/**
+ * @figmaNode wXrXt5uKNNzV2DnQCgyYZH#15181-43701 (Design-System · "Label / Highlighting")
+ *
+ * Small uppercase highlighting/status pill: h16, px6, radius 3, X-small Semibold uppercase
+ * (11/12, ls 0.55px). The generic default is a gama label; highlighting variants
+ * (Good/Attention/Warning/Urgent = success/warning/orange/error -300 + black text) are applied by
+ * the consumer via `className`/`style` (Type is not a component property here).
+ */
 export interface StyledLabelProps {
+    /** @figmaProp none — the label text (auto-uppercased) */
     children: ReactNode;
+    /** @figmaProp none — behavioral */
     onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+    /** @figmaProp Type — highlighting colour (bg/text) is applied here (success/warning/orange/error -300) */
     className?: string;
+    /** @figmaProp none — test hook */
     dataTest: string;
+    /** @figmaProp none — inline colour override for highlighting variants */
     style?: CSSProperties;
 }
 export declare const StyledLabel: FC<StyledLabelProps>;

package/dist/src/components/inputs/radio-button/base-ui/RadioGroupContext.d.ts

@@ -0,0 +1,10 @@
+export type RadioValue = string | number | boolean | null;
+export interface RadioGroupContextValue {
+    name: string;
+    value?: RadioValue;
+    disabled?: boolean;
+    onSelect: (value: RadioValue) => void;
+}
+/** Shared state for the native radio group (replaces `@base-ui/react`'s RadioGroup context). */
+export declare const RadioGroupContext: import('node_modules/@types/react').Context<RadioGroupContextValue | null>;
+export declare const useRadioGroupContext: () => RadioGroupContextValue | null;

package/dist/src/components/inputs/radio-button/base-ui/StyledRadio.d.ts

@@ -1,10 +1,65 @@
-import { default as React } from 'react';
-import { Radio } from '@base-ui/react/radio';
+import { default as React, ChangeEvent, InputHTMLAttributes } from 'react';
+import { RadioValue } from './RadioGroupContext';
+/**
+ * @figmaNode wXrXt5uKNNzV2DnQCgyYZH#15385-19720
+ * Figma "Radio" / `_BASE_Radiobutton` (circle 20px, 40px touch). Figma **Selected** (on/off) ←
+ * `checked` (or the surrounding `StyledRadioGroup`); Figma **State** (Enabled/Hovered/Focused/
+ * Pressed/Error/Disabled/Read-only) ← native hover/focus + `error`/`disabled`/`readOnly`. Checked
+ * ring + dot = `gama-500` #168181, unchecked border = `delta-500`, disabled = `delta-300`,
+ * read-only = unchecked ring `delta-300` / checked ring+dot `delta-500` (node 35046-162573/162576).
+ */
 export type StyledRadioProps = {
-    value?: string | number | boolean;
+    /** @figmaProp none — the group value this radio represents */
+    value?: RadioValue;
+    /** @figmaProp none — test hook */
     dataTest?: string;
     className?: string;
+    /** @figmaProp none — app size (Figma circle is 20px) */
     size?: 'small' | 'medium';
+    /** @figmaProp State = true→"Error" */
     error?: boolean;
-} & Omit<React.ComponentProps<typeof Radio.Root>, 'value' | 'className'>;
-export declare const StyledRadio: React.ForwardRefExoticComponent<Omit<StyledRadioProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    /** @figmaProp State = true→"Read-only" (unchecked ring delta-300 / checked ring+dot delta-500) */
+    readOnly?: boolean;
+    /** @figmaProp Selected = true→"on" | false→"off" */
+    checked?: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+    /**
+     * Renders the identical visual circle/dot (same classes/data-attrs — no visual change) with NO
+     * real `<input>` at all, for use as a pure state indicator inside a widget that already owns
+     * selection itself (e.g. `StyledInteractiveChip`, whose `clickable` chip handles the click — this
+     * radio is `pointer-events-none` there already). A real `<input type="radio">` nested inside
+     * that chip's `role="button"` is a genuine axe `nested-interactive` violation; see
+     * `StyledCheckbox`'s identical `decorative` prop for the full rationale.
+     */
+    decorative?: boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'className' | 'size' | 'checked' | 'onChange' | 'type'>;
+/**
+ * Native `<input type="radio">` (replaces `@base-ui/react`). Uses the surrounding
+ * `StyledRadioGroup` context for name/selection when present, else the standalone `checked` prop.
+ * SCSS module (ripple/pseudo-elements — GUD-003) is driven via `data-*` from React. TASK-201.
+ */
+export declare const StyledRadio: React.ForwardRefExoticComponent<{
+    /** @figmaProp none — the group value this radio represents */
+    value?: RadioValue;
+    /** @figmaProp none — test hook */
+    dataTest?: string;
+    className?: string;
+    /** @figmaProp none — app size (Figma circle is 20px) */
+    size?: "small" | "medium";
+    /** @figmaProp State = true→"Error" */
+    error?: boolean;
+    /** @figmaProp State = true→"Read-only" (unchecked ring delta-300 / checked ring+dot delta-500) */
+    readOnly?: boolean;
+    /** @figmaProp Selected = true→"on" | false→"off" */
+    checked?: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+    /**
+     * Renders the identical visual circle/dot (same classes/data-attrs — no visual change) with NO
+     * real `<input>` at all, for use as a pure state indicator inside a widget that already owns
+     * selection itself (e.g. `StyledInteractiveChip`, whose `clickable` chip handles the click — this
+     * radio is `pointer-events-none` there already). A real `<input type="radio">` nested inside
+     * that chip's `role="button"` is a genuine axe `nested-interactive` violation; see
+     * `StyledCheckbox`'s identical `decorative` prop for the full rationale.
+     */
+    decorative?: boolean;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "className" | "onChange" | "size" | "type" | "checked"> & React.RefAttributes<HTMLInputElement>>;

package/dist/src/components/inputs/radio-button/base-ui/StyledRadioGroup.d.ts

@@ -1,14 +1,37 @@
-import { default as React } from 'react';
-import { RadioGroup } from '@base-ui/react/radio-group';
+import { default as React, HTMLAttributes } from 'react';
+import { RadioValue } from './RadioGroupContext';
 export type StyledRadioGroupProps = {
-    value?: string | number | boolean | null;
-    defaultValue?: string | number | boolean | null;
-    onValueChange?: (value: string | number | boolean | null) => void;
+    value?: RadioValue;
+    defaultValue?: RadioValue;
+    onValueChange?: (value: RadioValue) => void;
     disabled?: boolean;
+    /** Non-interactive but not visually disabled (e.g. a submitted/read-only questionnaire): the
+     * current selection is shown but can't change. */
+    readOnly?: boolean;
     dataTest?: string;
     error?: boolean;
     errorText?: string;
     helperText?: string;
     children: React.ReactNode;
-} & Omit<React.ComponentProps<typeof RadioGroup>, 'children' | 'defaultValue' | 'value'>;
-export declare const StyledRadioGroup: React.ForwardRefExoticComponent<Omit<StyledRadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    name?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'>;
+/**
+ * Native radio group (replaces `@base-ui/react`): a `role="radiogroup"` container that shares
+ * name/selection with its `StyledRadio` children via context, controlled or uncontrolled, plus the
+ * error/helper text row. TASK-201.
+ */
+export declare const StyledRadioGroup: React.ForwardRefExoticComponent<{
+    value?: RadioValue;
+    defaultValue?: RadioValue;
+    onValueChange?: (value: RadioValue) => void;
+    disabled?: boolean;
+    /** Non-interactive but not visually disabled (e.g. a submitted/read-only questionnaire): the
+     * current selection is shown but can't change. */
+    readOnly?: boolean;
+    dataTest?: string;
+    error?: boolean;
+    errorText?: string;
+    helperText?: string;
+    children: React.ReactNode;
+    name?: string;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/inputs/search-field/StyledSearchField.d.ts

@@ -1,6 +1,14 @@
-import { StyledInputField, TextFieldProps } from '../../../index.ts';
+import { TextFieldProps } from '../../../index.ts';
 import { FC, ComponentProps } from 'react';
+import { StyledInputField } from '../input-field/StyledInputField';
 export type StyledSearchFieldProps = ComponentProps<typeof StyledInputField> & {
     label: Required<TextFieldProps['label']>;
 };
+/**
+ * @figmaNode wXrXt5uKNNzV2DnQCgyYZH#28496-138521 (rest) · #27857-162809 (focused/filled)
+ * Figma Search field: at rest the label is an in-field placeholder (Body Base 16, placeholder
+ * delta-500) with Icon-left (8px + 24px icon + 8px) inside the 40px outlined field — no floating
+ * label. On focus/filled the icon hides, the label floats (Small 12, gama-500), and a clear icon
+ * may appear on the right.
+ */
 export declare const StyledSearchField: FC<StyledSearchFieldProps>;

package/dist/src/components/inputs/select/StyledSelect.d.ts

@@ -1,19 +1,73 @@
-import { SelectProps } from '@mui/material';
-export type StyledSelectProps = SelectProps & {
-    allowClear?: boolean;
-    errorText?: string;
+import { CSSProperties, FocusEventHandler, ReactNode } from 'react';
+import { FieldSize } from '../field-styles';
+export interface SelectChangeEvent<T = unknown> {
+    target: {
+        value: T;
+        name?: string;
+    };
+}
+/**
+ * @figmaNode wXrXt5uKNNzV2DnQCgyYZH#15561-37391
+ * The trigger is the outlined **Input field** (shared `field-styles`: 40px, focus gama-400, hover
+ * gama-300); the dropdown is **Menus** (node 16073-19226). Figma field **State** (Enabled/Hovered/
+ * Focused/Error/Disabled/Read-only) ← open/focus + `error`/`disabled`/`readOnly`; **Filled** ← `value`.
+ * Non-annotated props are behavioral / MUI `Select` API-parity (DEC-003).
+ */
+export interface StyledSelectProps {
+    /** @figmaProp none — test hook */
     dataTest: string;
-};
+    /** @figmaProp Filled + trigger display value */
+    value?: unknown;
+    /** @figmaProp Filled (initial, uncontrolled) */
+    defaultValue?: unknown;
+    onChange?: (event: SelectChangeEvent, child: ReactNode) => void;
+    /**
+     * @figmaProp none — accepted for MUI `Select` / DEC-003 drop-in parity, but **no longer affects
+     * rendering**: the trigger value is Body Base 16px and the field is 40px at every size (a smaller
+     * size only changed text before; Figma field text is 16/lh24 regardless). Kept so `size="small"`
+     * call sites still compile. Ignored on purpose (not destructured).
+     */
+    size?: FieldSize;
+    /** @figmaProp State = true→"Error" */
+    error?: boolean;
+    errorText?: string;
+    /** @figmaProp Clear (trigger clear button) */
+    allowClear?: boolean;
+    /** @figmaProp State = true→"Disabled" */
+    disabled?: boolean;
+    /** @figmaProp State = true→"Read-only" */
+    readOnly?: boolean;
+    name?: string;
+    /** @figmaProp Placeholder text (resting) */
+    placeholder?: string;
+    displayEmpty?: boolean;
+    multiple?: boolean;
+    renderValue?: (value: unknown) => ReactNode;
+    fullWidth?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    /** Accepted for API parity; `standard` renders borderless (calendar month/year dropdowns).
+     * `string & {}` keeps 'outlined'/'standard' as autocomplete hints without TS treating them as
+     * redundant against the `string` fallback (other MUI variant values are accepted and ignored). */
+    variant?: 'outlined' | 'standard' | (string & {});
+    sx?: unknown;
+    /** Sets `aria-labelledby` on the trigger — the field's real accessible-name source when a
+     * visible label sits outside the control (MUI `Select` parity; genuinely wired, unlike `size`
+     * above). Without it (and no `name`/placeholder/value text), the trigger has no accessible name
+     * at all — a common gap when a floating/external label isn't referenced. */
+    labelId?: string;
+    children?: ReactNode;
+    MenuProps?: {
+        className?: string;
+    };
+    /** Forwarded to the trigger button, merged with the internal focus tracking (e.g. validate on blur). */
+    onFocus?: FocusEventHandler<HTMLButtonElement>;
+    onBlur?: FocusEventHandler<HTMLButtonElement>;
+}
 /**
- *
- * @usage
- * use StyleSelect only inside StyledFormControl
- *
- * @size
- * control the size through StyledFormControl
- *
- * @inputRef
- * inputRef to get Node of Input Element inside
- *
+ * Single-select dropdown (replaces MUI `Select`) — a trigger styled as the outlined field plus a
+ * portalled `role="listbox"`. Reports open/filled into a surrounding `StyledFormControl` so its
+ * `StyledInputLabel` floats. Public props preserved (DEC-003). Use inside `StyledFormControl`.
+ * TASK-402.
  */
-export declare const StyledSelect: React.FC<StyledSelectProps>;
+export declare const StyledSelect: ({ dataTest, value, defaultValue, onChange, error, errorText, allowClear, disabled, readOnly, name, placeholder, displayEmpty, multiple, renderValue, fullWidth, className, style, sx, variant, children, MenuProps, onFocus, onBlur, labelId, }: StyledSelectProps) => JSX.Element;

package/dist/src/components/inputs/select/StyledSelectItem.d.ts

@@ -1,2 +1,14 @@
-import { MenuItemProps } from '@mui/material';
-export declare const StyledSelectItem: (item: MenuItemProps) => JSX.Element;
+import { MouseEvent, ReactNode } from 'react';
+export interface StyledSelectItemProps {
+    value?: unknown;
+    children?: ReactNode;
+    selected?: boolean;
+    disabled?: boolean;
+    className?: string;
+    onClick?: (event: MouseEvent<HTMLLIElement>) => void;
+}
+/**
+ * Option row for `StyledSelect` (replaces MUI `MenuItem` in the select context). `role="option"`
+ * with a leading check column for the selected state. Public props preserved (DEC-003). TASK-402.
+ */
+export declare const StyledSelectItem: ({ children, selected, disabled, className, onClick, }: StyledSelectItemProps) => JSX.Element;

package/dist/src/components/inputs/select/index.d.ts

@@ -1,3 +1,2 @@
 export * from './StyledSelect';
 export * from './StyledSelectItem';
-export { type SelectChangeEvent } from '@mui/material';