asma-ui-core 3.44.0 → 3.45.0

package/dist/src/components/inputs/select-autocomplete/StyledSelectAutocomplete.d.ts

@@ -1,25 +1,128 @@
-import { AutocompleteProps, ChipTypeMap } from '@mui/material';
-type StyledSelectAutocompleteBaseProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType> = Omit<AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'multiple'> & {
+import { CSSProperties, HTMLAttributes, KeyboardEvent, ReactNode, SyntheticEvent } from 'react';
+export type AutocompleteChangeReason = 'createOption' | 'selectOption' | 'removeOption' | 'clear' | 'blur';
+export type AutocompleteInputChangeReason = 'input' | 'reset' | 'clear';
+export interface AutocompleteRenderOptionState {
+    selected: boolean;
+    index: number;
+    inputValue: string;
+}
+/** Props the combobox hands to `renderInput`; spread straight onto `StyledInputField`. */
+export interface AutocompleteRenderInputParams {
+    disabled?: boolean;
+    size?: 'small' | 'medium';
+    fullWidth?: boolean;
+    value: string;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onFocus?: () => void;
+    onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+    slotProps: {
+        htmlInput: Record<string, unknown> & {
+            ref?: React.Ref<HTMLInputElement>;
+        };
+        input: {
+            ref: React.Ref<HTMLDivElement>;
+            startAdornment?: ReactNode;
+            endAdornment?: ReactNode;
+        };
+    };
+}
+type OptionLiProps = HTMLAttributes<HTMLLIElement> & {
+    key?: string;
+    ref?: React.Ref<HTMLLIElement>;
+    [dataAttr: `data-${string}`]: unknown;
+};
+type SingleValue<T> = T | null;
+type MultiValue<T> = T[];
+type AutocompleteValue<T, Multiple, DisableClearable, FreeSolo> = Multiple extends true ? MultiValue<T> : FreeSolo extends true ? T | string | null : DisableClearable extends true ? T : SingleValue<T>;
+/**
+ * @figmaNode wXrXt5uKNNzV2DnQCgyYZH#20474-29075
+ * Figma "Autocomplete". The trigger is the outlined **Input field** (shared `field-styles`: 40px,
+ * border enabled delta-500/`#7a899e`, hover gama-300, focus gama-400 `#1ca1a1`, error error-500),
+ * so the field **State** (Enabled/Hovered/Focused/Error/Read-only) ← focus/open + `error`/`readOnly`/
+ * `disabled`. **Filled** ← selected value(s): single fills the input text, multiple renders **Tag
+ * chips** (`StyledChip`: h32, radius25, label 16/delta-700 — node 20475-29954). The dropdown is the
+ * **Menus** surface (node 16073-19226): rounded-lg, border delta-300, Menus shadow. Popup indicator =
+ * `+` (`PlusIconCircle`, multiple) or chevron (single); clear = `CloseIcon`. Non-annotated props are
+ * behavioral / MUI `Autocomplete` API-parity (DEC-002/DEC-003).
+ */
+export interface StyledSelectAutocompleteProps<T, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false> {
+    /** @figmaProp none — test hook */
     dataTest: string;
-    autoHeight?: boolean;
+    /** @figmaProp options → dropdown list rows (Menus items / Recipient list items) */
+    options: readonly T[];
+    /** @figmaProp none — renders the Figma "Input field" trigger (field State/Filled live here) */
+    renderInput: (params: AutocompleteRenderInputParams) => ReactNode;
+    /** @figmaProp Filled — single: input text; multiple: Tag chips (StyledChip) */
+    value?: SingleValue<T> | MultiValue<T> | string | undefined;
+    defaultValue?: SingleValue<T> | MultiValue<T> | string | undefined;
+    onChange?: (event: SyntheticEvent, value: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>, reason: AutocompleteChangeReason, details?: {
+        option: T;
+    }) => void;
     getOptionLabel?: (option: T) => string;
-    wrapperClassName?: string;
-};
-type StyledSelectAutocompleteConditionalProps<Multiple extends boolean | undefined> = Multiple extends true ? {
-    multiple: true;
+    /** Stable React key per option, independent of the label — required when labels can collide. */
+    getOptionKey?: (option: T) => string | number;
+    isOptionEqualToValue?: (option: T, value: T) => boolean;
+    renderOption?: (props: OptionLiProps, option: T, state: AutocompleteRenderOptionState) => ReactNode;
+    renderValue?: (value: MultiValue<T>, getItemProps: (opts: {
+        index: number;
+    }) => OptionLiProps) => ReactNode;
+    filterOptions?: (options: T[], state: {
+        inputValue: string;
+    }) => T[];
+    groupBy?: (option: T) => string;
+    loading?: boolean;
+    loadingText?: ReactNode;
+    noOptionsText?: ReactNode;
+    /** @figmaProp State = true→"Disabled" */
+    disabled?: boolean;
+    /** @figmaProp State = true→"Read-only" (chips lose their delete button; no popup/clear icons) */
+    readOnly?: boolean;
+    /** @figmaProp none — FieldSize (both render the 40px field) */
+    size?: 'small' | 'medium';
+    /** @figmaProp Clear (trigger clear button) */
+    disableClearable?: boolean;
+    freeSolo?: boolean;
+    open?: boolean;
+    onOpen?: (event?: SyntheticEvent) => void;
+    onClose?: (event?: SyntheticEvent, reason?: string) => void;
+    disableCloseOnSelect?: boolean;
+    inputValue?: string;
+    onInputChange?: (event: SyntheticEvent | null, value: string, reason: AutocompleteInputChangeReason) => void;
+    /** @figmaProp popup indicator — defaults to `+` (PlusIconCircle) when multiple, else chevron */
+    popupIcon?: ReactNode;
+    autoHeight?: boolean;
+    /** @figmaProp Filled shape — true renders Tag chips + `+` indicator (Figma "multiple select") */
+    multiple?: Multiple;
     allowSelectAll?: boolean;
     selectAllLabel?: string;
-} : {
-    multiple?: Multiple;
-    allowSelectAll?: never;
-    selectAllLabel?: never;
-};
-export type StyledSelectAutocompleteProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> = StyledSelectAutocompleteBaseProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent> & StyledSelectAutocompleteConditionalProps<Multiple>;
+    fullWidth?: boolean;
+    /** Accepted for MUI parity; single-select already omits selected options via filtering. */
+    filterSelectedOptions?: boolean;
+    getOptionDisabled?: (option: T) => boolean;
+    classes?: {
+        root?: string;
+        paper?: string;
+        listbox?: string;
+    };
+    className?: string;
+    wrapperClassName?: string;
+    /** Style/class the portalled listbox (MUI `slotProps.popper` parity); e.g. raise its z-index above an overlay. */
+    slotProps?: {
+        popper?: {
+            className?: string;
+            style?: CSSProperties;
+        };
+    };
+    sx?: unknown;
+}
 /**
+ * Custom combobox (replaces MUI `Autocomplete`, DEC-002) built on `@floating-ui/react`. Supports
+ * single + multiple selection (with tag chips + optional select-all), type-ahead filtering,
+ * async `loading`, grouping, and the MUI `renderInput`/`renderOption`/`renderValue` callback
+ * contracts. Public props/generics preserved (DEC-003). TASK-401.
  *
- * @inputRef
- * inputRef to get Node of Input Element inside
- *
+ * ponytail: `freeSolo` is accepted (arbitrary input is emitted via onInputChange) but not turned
+ * into option values; exact keyboard-parity edge cases are Chromatic/axe-gated.
  */
-export declare function StyledSelectAutocomplete<T, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']>({ dataTest, autoHeight, getOptionLabel, wrapperClassName, multiple, allowSelectAll, selectAllLabel, className, defaultValue, isOptionEqualToValue, onChange, options, popupIcon, readOnly, renderOption, renderValue, sx, value, ...props }: StyledSelectAutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>): JSX.Element;
+export declare function StyledSelectAutocomplete<T, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false>({ dataTest, options, renderInput, value, onChange, getOptionLabel, getOptionKey, isOptionEqualToValue, renderOption, renderValue, filterOptions, loading, loadingText, noOptionsText, disabled, readOnly, size, disableClearable, disableCloseOnSelect, popupIcon, autoHeight, multiple, allowSelectAll, selectAllLabel, fullWidth, classes, inputValue: controlledInput, onInputChange, open: controlledOpen, onOpen, onClose, className, wrapperClassName, getOptionDisabled, slotProps, }: StyledSelectAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>): JSX.Element;
 export {};

package/dist/src/components/inputs/slider/StyledSlider.d.ts

@@ -1,8 +1,71 @@
-import { SliderProps } from '@mui/material';
-export interface StyledSliderProps extends SliderProps {
+import { ReactNode, SyntheticEvent } from 'react';
+export interface SliderMark {
+    value: number;
+    label?: ReactNode;
+}
+type SliderValue = number | number[];
+interface SliderClasses {
+    root?: string;
+    rail?: string;
+    track?: string;
+    thumb?: string;
+    mark?: string;
+    markActive?: string;
+    markLabel?: string;
+    markLabelActive?: string;
+}
+interface SliderSlotProps {
+    thumb?: {
+        className?: string;
+    };
+    rail?: {
+        className?: string;
+    };
+    markLabel?: {
+        className?: string;
+    };
+}
+/**
+ * @figmaNode wXrXt5uKNNzV2DnQCgyYZH#21289-39224 (Design-System · "Slider" / linear scale)
+ *
+ * DS slider: rail `delta-100` (4px), filled track + thumb + active dots `gama-500`, inactive dots
+ * white/`delta-300`, scale numbers Body Base SemiBold 16/24 `delta-700`. Disabled → `delta-200`.
+ */
+export interface StyledSliderProps {
     dataTest: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: SliderValue;
+    defaultValue?: SliderValue;
+    disabled?: boolean;
+    size?: 'small' | 'medium';
+    orientation?: 'horizontal' | 'vertical';
+    marks?: boolean | SliderMark[];
+    name?: string;
+    className?: string;
+    classes?: SliderClasses;
+    slotProps?: SliderSlotProps;
     error?: boolean;
     errorText?: string;
     helperText?: string;
+    /** Accessible name for the thumb input(s) — there is no visible label to derive it from
+     * (axe `label`). A function receives the thumb index (0, or 0/1 for a two-thumb range) so each
+     * thumb of a range slider can get a distinct name. */
+    ariaLabel?: string | ((thumbIndex: number) => string);
+    ariaLabelledBy?: string;
+    onChange?: (event: SyntheticEvent, value: SliderValue, activeThumb: number) => void;
+    onChangeCommitted?: (event: SyntheticEvent, value: SliderValue) => void;
 }
-export declare const StyledSlider: ({ dataTest, error, errorText, helperText, ...props }: StyledSliderProps) => JSX.Element;
+/**
+ * Native range-input slider (replaces MUI `Slider`). Single value uses one `<input type="range">`;
+ * a two-element `value` renders two stacked inputs (each thumb independently grabbable via
+ * pointer-events on the thumb only). Marks, vertical orientation, `classes`/`slotProps` slots and
+ * `onChange`/`onChangeCommitted` are preserved (DEC-003).
+ *
+ * ponytail: exact-pixel parity with MUI's thumb travel/animation is a known ceiling — Chromatic in
+ * CI is the visual gate. Upgrade path: tune the 8px thumb inset if a diff shows misalignment.
+ * TASK-204.
+ */
+export declare const StyledSlider: ({ dataTest, min, max, step, value, defaultValue, disabled, size, orientation, marks, name, className, classes, slotProps, error, errorText, helperText, ariaLabel, ariaLabelledBy, onChange, onChangeCommitted, }: StyledSliderProps) => JSX.Element;
+export {};

package/dist/src/components/inputs/switch/base-ui/StyledSwitch.d.ts

@@ -1,15 +1,55 @@
-import { default as React } from 'react';
-import { Switch } from '@base-ui/react/switch';
+import { default as React, ButtonHTMLAttributes } from 'react';
+/**
+ * @figmaNode wXrXt5uKNNzV2DnQCgyYZH#9197-92635
+ * Figma "Switch" / `_BASE_Switch` (track 38×22, knob 18, touch 54×32). Figma **Selected** (true/false)
+ * ← `checked`/`defaultChecked`; Figma **State** (Enabled/Hovered/Focused/Error/Disabled/Read-only)
+ * ← native hover/focus + `error`/`disabled`/`readOnly`. On = `gama-500` #168181, Off = `delta-400` #a2acbb.
+ */
 type StyledSwitchProps = {
+    /** @figmaProp Selected = true→"true" | false→"false" (controlled) */
     checked?: boolean;
+    /** @figmaProp Selected = initial (uncontrolled) */
     defaultChecked?: boolean;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+    /** @figmaProp State = true→"Disabled" */
     disabled?: boolean;
+    /** @figmaProp State = true→"Read-only" */
     readOnly?: boolean;
+    /** @figmaProp none — a11y */
     required?: boolean;
+    /** @figmaProp State = true→"Error" */
+    error?: boolean;
+    /** @figmaProp none — a11y id */
     id?: string;
+    /** @figmaProp none — test hook */
     dataTest?: string;
-} & Omit<React.ComponentProps<typeof Switch.Root>, 'children'>;
+    className?: string;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'type'>;
 export type SwitchProps = StyledSwitchProps;
-export declare const StyledSwitch: React.ForwardRefExoticComponent<Omit<StyledSwitchProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Native `<button role="switch">` toggle (replaces `@base-ui/react`). Drives the SCSS module's
+ * `data-checked`/`data-unchecked`/`data-disabled` selectors from React; the visual track/thumb stay
+ * in SCSS (transitions/pseudo-elements — GUD-003). Public props + `onChange(event, checked)`
+ * unchanged. TASK-201.
+ */
+export declare const StyledSwitch: React.ForwardRefExoticComponent<{
+    /** @figmaProp Selected = true→"true" | false→"false" (controlled) */
+    checked?: boolean;
+    /** @figmaProp Selected = initial (uncontrolled) */
+    defaultChecked?: boolean;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+    /** @figmaProp State = true→"Disabled" */
+    disabled?: boolean;
+    /** @figmaProp State = true→"Read-only" */
+    readOnly?: boolean;
+    /** @figmaProp none — a11y */
+    required?: boolean;
+    /** @figmaProp State = true→"Error" */
+    error?: boolean;
+    /** @figmaProp none — a11y id */
+    id?: string;
+    /** @figmaProp none — test hook */
+    dataTest?: string;
+    className?: string;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "type"> & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/src/components/inputs/textarea/StyledTextarea.d.ts

@@ -1,9 +1,12 @@
 import { default as React, ChangeEvent, MutableRefObject, ReactNode } from 'react';
 export interface TextareaCommonProps {
     id?: string;
+    /** @figmaProp Filled — the field text (Body Base 16/lh24, delta-800). */
     value?: string;
+    /** @figmaProp Title (Body Base SemiBold 16, delta-800) above the field. */
     label?: ReactNode;
     labelClassName?: string;
+    /** @figmaProp Description / helper text (Helper 14/lh20, delta-600). */
     description?: ReactNode;
     containerClassName?: string;
     className?: string;
@@ -27,9 +30,12 @@ export interface TextAreaActiveProps {
     variant?: 'active';
     minRows?: number;
     maxRows?: number;
+    /** @figmaProp State = true→"Disabled" (delta-300 border/text) */
     disabled?: boolean;
+    /** @figmaProp Placeholder text (resting, delta-500) */
     placeholder?: string;
     onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+    /** @figmaProp State = true→"Error" (border/text error-500) */
     error?: boolean;
     errorMessage?: string;
     maxLength?: number;
@@ -40,9 +46,22 @@ export interface TextAreaActiveProps {
 type TextareaConditionalProps = TextAreaActiveProps | TextAreaNotEditableProps;
 type StyledTextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & TextareaCommonProps & TextareaConditionalProps;
 /**
+ * @figmaNode wXrXt5uKNNzV2DnQCgyYZH#15561-37391
+ * Figma has no standalone "Text area" component — a multiline text control inherits the **Input
+ * field** outlined styling (shared with `StyledInputField`/`field-styles`): radius 4, field text
+ * **Body Base 16/lh24 delta-800**; border **enabled delta-500 #7a899e**, **hover gama-300 #60bdbd
+ * (2px)**, **focus gama-400 #1ca1a1 (2px)**, **error error-500 #e10700**, **disabled delta-300**.
+ * Title = **Body Base SemiBold 16 delta-800**; description/helper = **Helper 14/lh20 delta-600**.
+ * State (Enabled/Hover/Focus/Error/Disabled) ← native + `error`/`disabled`; the `not_editable`/
+ * `view_only` variants are the read-only presentations. Colours live in the textarea-only
+ * `--colors-input-*` token layer (now referencing the semantic delta/gama tokens, so all themes
+ * recolour). Non-annotated props are behavioral.
+ *
  * Developer: bularga.alexandru@carasent.com
  *
  * Custom props:
+ * @figmaProp variant — active (editable field) | view_only | not_editable (read-only presentations)
+ * @figmaProp error — State = true→"Error" (border/text error-500)
  * @param variant -  'not_editable' | 'view_only' | 'active'
  * @param error -  boolean
  * @param errorMessage -  string

package/dist/src/components/miscellaneous/FormControlContext.d.ts

@@ -0,0 +1,14 @@
+import { FieldSize } from '../inputs/field-styles';
+export interface FormControlContextValue {
+    focused: boolean;
+    filled: boolean;
+    error: boolean;
+    disabled: boolean;
+    required: boolean;
+    size: FieldSize;
+    labelId?: string;
+    setFocused: (value: boolean) => void;
+    setFilled: (value: boolean) => void;
+}
+export declare const FormControlContext: import('node_modules/@types/react').Context<FormControlContextValue | null>;
+export declare const useFormControlContext: () => FormControlContextValue | null;

package/dist/src/components/miscellaneous/StyledFormControl.d.ts

@@ -1,2 +1,27 @@
-import { FormControlProps } from '@mui/material';
-export declare const StyledFormControl: (props: FormControlProps) => JSX.Element;
+import { CSSProperties, FocusEventHandler, MouseEventHandler, ReactNode } from 'react';
+import { FieldSize } from '../inputs/field-styles';
+export interface FormControlProps {
+    children?: ReactNode;
+    error?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    size?: FieldSize;
+    fullWidth?: boolean;
+    /** Accepted for API parity; the design always renders outlined. */
+    variant?: string;
+    className?: string;
+    style?: CSSProperties;
+    sx?: unknown;
+    id?: string;
+    /** Forwarded to the container element (focus/blur bubble from inner controls) — e.g. clear a
+     * validation error on focus, validate on blur, without a separate wrapper element. */
+    onFocus?: FocusEventHandler<HTMLDivElement>;
+    onBlur?: FocusEventHandler<HTMLDivElement>;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+}
+/**
+ * Form-field context provider + positioned container (replaces MUI `FormControl`). Tracks
+ * focus/filled state so `StyledInputLabel` can float and `StyledFormHelperText` can colour itself;
+ * `StyledSelect` reports its state into this context. Public props preserved (DEC-003). TASK-401.
+ */
+export declare const StyledFormControl: ({ children, error, disabled, required, size, fullWidth, className, style, sx, id, onFocus, onBlur, onClick, }: FormControlProps) => JSX.Element;

package/dist/src/components/miscellaneous/StyledFormControlLabel.d.ts

@@ -1,2 +1,21 @@
-import { FormControlLabelProps } from '@mui/material';
-export declare const StyledFormControlLabel: ({ sx, ...props }: FormControlLabelProps) => JSX.Element;
+import { ChangeEvent, ReactElement, ReactNode } from 'react';
+export type LabelPlacement = 'end' | 'start' | 'top' | 'bottom';
+export interface FormControlLabelProps {
+    /** The control element (a checkbox, radio, or switch). Receives `checked`/`onChange`/`disabled`/`name`/`value` unless already set. */
+    control: ReactElement;
+    label?: ReactNode;
+    checked?: boolean;
+    disabled?: boolean;
+    name?: string;
+    value?: unknown;
+    labelPlacement?: LabelPlacement;
+    className?: string;
+    sx?: unknown;
+    onChange?: (event: ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+}
+/**
+ * Native replacement for MUI `FormControlLabel` — a `<label>` that pairs a form control with a
+ * text label and forwards `checked`/`onChange`/`disabled`/`name`/`value` into the control (MUI's
+ * clone behavior). Public props preserved (DEC-003). TASK-203.
+ */
+export declare const StyledFormControlLabel: ({ control, label, checked, disabled, name, value, labelPlacement, className, sx, onChange, }: FormControlLabelProps) => JSX.Element;

package/dist/src/components/miscellaneous/StyledFormGroup.d.ts

@@ -1,2 +1,11 @@
-import { FormGroupProps } from '@mui/material';
-export declare const StyledFormGroup: React.FC<FormGroupProps>;
+import { HTMLAttributes } from 'react';
+interface FormGroupProps extends HTMLAttributes<HTMLDivElement> {
+    row?: boolean;
+    sx?: unknown;
+    classes?: Record<string, string>;
+}
+/**
+ * MUI-free `FormGroup`: a flex container, column by default or `row`. TASK-101.
+ */
+export declare const StyledFormGroup: ({ row, className, sx, style, children, classes: _classes, ...rest }: FormGroupProps) => JSX.Element;
+export {};

package/dist/src/components/miscellaneous/StyledFormHelperText.d.ts

@@ -1,2 +1,12 @@
-import { FormHelperTextProps } from '@mui/material';
-export declare const StyledFormHelperText: (props: FormHelperTextProps) => JSX.Element;
+import { HTMLAttributes, ReactNode } from 'react';
+export interface FormHelperTextProps extends Omit<HTMLAttributes<HTMLParagraphElement>, 'children'> {
+    children?: ReactNode;
+    error?: boolean;
+    disabled?: boolean;
+}
+/**
+ * Helper/validation text under a field (replaces MUI `FormHelperText`). Inherits `error`/`disabled`
+ * from a surrounding `StyledFormControl` when present, else from props. Public props preserved
+ * (DEC-003). TASK-401.
+ */
+export declare const StyledFormHelperText: ({ children, error, disabled, className, ...rest }: FormHelperTextProps) => JSX.Element;

package/dist/src/components/miscellaneous/StyledInputLabel.d.ts

@@ -1,2 +1,20 @@
-import { InputLabelProps } from '@mui/material';
-export declare const StyledInputLabel: (props: InputLabelProps) => JSX.Element;
+import { ReactNode } from 'react';
+import { FieldSize } from '../inputs/field-styles';
+export interface InputLabelProps {
+    children?: ReactNode;
+    htmlFor?: string;
+    id?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    size?: FieldSize;
+    /** Force the shrunk (floated) state; otherwise derived from the surrounding FormControl. */
+    shrink?: boolean;
+    className?: string;
+}
+/**
+ * Floating field label (replaces MUI `InputLabel`). Reads focus/filled/error/size from the
+ * surrounding `StyledFormControl`; `shrink` lifts it onto the border. Public props preserved
+ * (DEC-003). TASK-401.
+ */
+export declare const StyledInputLabel: ({ children, htmlFor, id, required, disabled, error, size, shrink, className, }: InputLabelProps) => JSX.Element;

package/dist/src/components/mui-compat/Avatar.d.ts

@@ -0,0 +1,6 @@
+import { AvatarProps } from './types';
+/**
+ * MUI-free `Avatar`: 40×40 flex box showing an image (`src`) or fallback children/initials on a
+ * grey background. Reproduces MUI default metrics + `variant`. TASK-102.
+ */
+export declare const Avatar: ({ src, srcSet, alt, variant, sizes, className, sx, style, children, classes: _classes, component: _component, ...rest }: AvatarProps) => JSX.Element;

package/dist/src/components/mui-compat/ClickAwayListener.d.ts

@@ -0,0 +1,19 @@
+import { ReactElement } from 'react';
+type MouseEventName = 'onClick' | 'onMouseDown' | 'onMouseUp';
+type TouchEventName = 'onTouchStart' | 'onTouchEnd';
+export interface ClickAwayListenerProps {
+    children: ReactElement;
+    onClickAway: (event: MouseEvent | TouchEvent) => void;
+    mouseEvent?: MouseEventName | false;
+    touchEvent?: TouchEventName | false;
+    disableReactTree?: boolean;
+}
+/**
+ * MUI-free `ClickAwayListener`: fires `onClickAway` when a pointer event lands outside the single
+ * child element. Matches the MUI API subset this library uses (`onClickAway`, `mouseEvent`,
+ * `touchEvent`). The child must forward a ref to its root DOM node.
+ *
+ * @see asma-modules/_docs/frontend/plans/2026-07-10-19-12-plan-asma-ui-core-mui-removal.md — TASK-102
+ */
+export declare const ClickAwayListener: ({ children, onClickAway, mouseEvent, touchEvent, disableReactTree, }: ClickAwayListenerProps) => ReactElement;
+export {};

package/dist/src/components/mui-compat/Container.d.ts

@@ -0,0 +1,6 @@
+import { ContainerProps } from './types';
+/**
+ * MUI-free `Container`: full-width, horizontally centred, with default 16px gutters and a
+ * breakpoint `maxWidth` (default `lg`). `fixed` is not reproduced (rare). TASK-102.
+ */
+export declare const Container: ({ maxWidth, disableGutters, className, sx, style, component, children, fixed: _fixed, ...rest }: ContainerProps) => JSX.Element;

package/dist/src/components/mui-compat/Fade.d.ts

@@ -0,0 +1,21 @@
+import { CSSProperties, ReactElement } from 'react';
+type Timeout = number | {
+    enter?: number;
+    exit?: number;
+};
+export interface FadeProps {
+    in?: boolean;
+    timeout?: Timeout;
+    appear?: boolean;
+    children: ReactElement;
+    onEnter?: () => void;
+    onExited?: () => void;
+    style?: CSSProperties;
+}
+/**
+ * Opacity transition (replaces MUI `Fade`). Clones its single child and runs a CSS keyframe on
+ * enter/exit, keeping the child mounted through the exit tween before calling `onExited` (so a
+ * parent `Popper` can unmount it). Public props preserved (DEC-003). TASK-403.
+ */
+export declare const Fade: ({ in: inProp, timeout, children, onExited, style, }: FadeProps) => JSX.Element | null;
+export {};

package/dist/src/components/mui-compat/FormLabel.d.ts

@@ -0,0 +1,6 @@
+import { FormLabelProps } from './types';
+/**
+ * MUI-free `FormLabel`: a `<label>` with MUI's default form-label typography/colour. Distinct from
+ * this library's `StyledFormLabel` (data-display); this is the raw MUI passthrough. TASK-102.
+ */
+export declare const FormLabel: ({ required, className, sx, style, children, classes: _classes, component: _component, error: _error, focused: _focused, filled: _filled, color: _color, ...rest }: FormLabelProps) => JSX.Element;

package/dist/src/components/mui-compat/Paper.d.ts

@@ -0,0 +1,6 @@
+import { PaperProps } from './types';
+/**
+ * MUI-free `Paper`: white surface with border-radius and an elevation shadow (default 1) or an
+ * outlined border (`variant="outlined"`). Reproduces the MUI default-theme shadow scale (TASK-102).
+ */
+export declare const Paper: ({ elevation, square, variant, className, sx, style, component, children, classes: _classes, ...rest }: PaperProps) => JSX.Element;

package/dist/src/components/mui-compat/Popper.d.ts

@@ -0,0 +1,29 @@
+import { CSSProperties, ReactNode } from 'react';
+import { Placement } from '@floating-ui/react';
+export interface PopperTransitionProps {
+    in: boolean;
+    onExited: () => void;
+}
+type PopperChildren = ReactNode | ((props: {
+    TransitionProps: PopperTransitionProps;
+    placement: Placement;
+}) => ReactNode);
+export interface PopperProps {
+    open?: boolean;
+    anchorEl?: Element | null;
+    id?: string;
+    placement?: Placement;
+    transition?: boolean;
+    disablePortal?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children?: PopperChildren;
+}
+/**
+ * Positioning primitive (replaces MUI `Popper`) built on `@floating-ui/react`. Positions its
+ * content against `anchorEl`; with `transition`, renders children as a function receiving
+ * `TransitionProps` (`in`/`onExited`) so a child `Fade` can animate and unmount. Public props
+ * preserved (DEC-003). TASK-403.
+ */
+export declare const Popper: ({ open, anchorEl, id, placement, transition, disablePortal, className, style, children, }: PopperProps) => JSX.Element | null;
+export {};

package/dist/src/components/mui-compat/Skeleton.d.ts

@@ -0,0 +1,7 @@
+import { SkeletonProps } from './types';
+/**
+ * MUI-free `Skeleton`: grey placeholder with the pulse animation (default). Reproduces MUI's
+ * variants (`text`/`circular`/`rectangular`/`rounded`), `width`/`height`, and background. `wave`
+ * animation degrades to `pulse` (Tailwind-first). TASK-102.
+ */
+export declare const Skeleton: ({ variant, width, height, animation, className, sx, style, children, classes: _classes, component: _component, ...rest }: SkeletonProps) => JSX.Element;

package/dist/src/components/mui-compat/Stack.d.ts

@@ -0,0 +1,7 @@
+import { StackProps } from './types';
+/**
+ * MUI-free `Stack`: a flex container with `direction` and `spacing` (× 8px gap) and optional
+ * `divider` between children. Scalar direction/spacing only — responsive breakpoint objects are not
+ * reproduced (rare on this library's usage). TASK-102.
+ */
+export declare const Stack: ({ direction, spacing, divider, className, sx, style, component, children, useFlexGap: _useFlexGap, ...rest }: StackProps) => JSX.Element;

package/dist/src/components/mui-compat/index.d.ts

@@ -0,0 +1,9 @@
+export { ClickAwayListener } from './ClickAwayListener';
+export { Paper } from './Paper';
+export { Stack } from './Stack';
+export { Container } from './Container';
+export { Avatar } from './Avatar';
+export { Skeleton } from './Skeleton';
+export { FormLabel } from './FormLabel';
+export { Fade } from './Fade';
+export { Popper } from './Popper';

package/dist/src/components/mui-compat/types.d.ts

@@ -0,0 +1,46 @@
+import { ElementType, HTMLAttributes, ReactNode } from 'react';
+interface BaseShimProps extends HTMLAttributes<HTMLElement> {
+    sx?: unknown;
+    component?: ElementType;
+    classes?: Record<string, string>;
+}
+export interface PaperProps extends BaseShimProps {
+    elevation?: number;
+    square?: boolean;
+    variant?: 'elevation' | 'outlined';
+}
+export interface StackProps extends BaseShimProps {
+    direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    spacing?: number | string;
+    divider?: ReactNode;
+    useFlexGap?: boolean;
+}
+export interface AvatarProps extends BaseShimProps {
+    src?: string;
+    srcSet?: string;
+    alt?: string;
+    sizes?: string;
+    variant?: 'circular' | 'rounded' | 'square';
+}
+export interface SkeletonProps extends BaseShimProps {
+    variant?: 'text' | 'rectangular' | 'rounded' | 'circular';
+    width?: number | string;
+    height?: number | string;
+    animation?: 'pulse' | 'wave' | false;
+}
+export interface ContainerProps extends BaseShimProps {
+    maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
+    disableGutters?: boolean;
+    fixed?: boolean;
+}
+export interface FormLabelProps extends HTMLAttributes<HTMLLabelElement> {
+    sx?: unknown;
+    component?: ElementType;
+    classes?: Record<string, string>;
+    required?: boolean;
+    error?: boolean;
+    focused?: boolean;
+    filled?: boolean;
+    color?: string;
+}
+export {};