@tpc-mare/mare-ui-components-react 1.0.2 → 1.0.3-beta.0

package/dist/index.d.ts

@@ -0,0 +1,1693 @@
+import { ButtonHTMLAttributes } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { HTMLAttributes } from 'react';
+import { InputHTMLAttributes } from 'react';
+import { JSX as JSX_2 } from 'react';
+import { MouseEvent as MouseEvent_2 } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+import { RefObject } from 'react';
+import { TextareaHTMLAttributes } from 'react';
+
+export declare function Accordion({ items, value, defaultValue, onValueChange, multiple, collapsible, }: AccordionProperties): JSX_2.Element;
+
+export declare interface AccordionItemData {
+    value: string;
+    title: string;
+    disabled?: boolean;
+    /** Divider below this item.
+     * @default true */
+    divider?: boolean;
+    /** Consumer-defined extras (subtitle, content) resolved in the adapter. */
+    [key: string]: unknown;
+}
+
+export declare interface AccordionItemProperties extends AccordionItemData {
+    subtitle?: ReactNode;
+    content: ReactNode;
+}
+
+export declare interface AccordionProperties {
+    items: AccordionItemProperties[];
+    /** Controlled expanded item values. Omit to let Ark manage it. */
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    /** Whether multiple items can be expanded at once.
+     * @default false */
+    multiple?: boolean;
+    /** Whether an expanded item can be collapsed back by clicking it again.
+     * @default true */
+    collapsible?: boolean;
+}
+
+export declare function Avatar({ image, alt, label, size, id, }: AvatarProperties): JSX_2.Element;
+
+declare const AVATAR_SIZES: readonly ["small", "medium"];
+
+export declare interface AvatarProperties {
+    /**
+     * Image URL. Falls back to the initials derived from `label` while it's
+     * loading, missing, or fails to load.
+     */
+    image?: string;
+    /**
+     * `alt` text for the image.
+     */
+    alt?: string;
+    /**
+     * Full name used to derive the fallback initials (e.g. "Tomás Palacio" → "TP").
+     */
+    label?: string;
+    /**
+     * Size variant.
+     * @default 'small'
+     */
+    size?: AvatarSize;
+    /**
+     * Unique identifier for the avatar.
+     */
+    id?: string;
+}
+
+export declare type AvatarSize = (typeof AVATAR_SIZES)[number];
+
+export declare function Badge({ severity, icon, children, }: BadgeProperties): JSX_2.Element;
+
+declare const BADGE_SEVERITIES: readonly ["accent", "danger", "warning", "highlight", "positive"];
+
+export declare interface BadgeProperties {
+    /** @default 'accent' */
+    severity?: BadgeSeverity;
+    /** Shown next to (or instead of) `children`. */
+    icon?: ReactNode;
+    /** The count/label. A bare dot renders when neither this nor `icon` is set. */
+    children?: ReactNode;
+}
+
+export declare type BadgeSeverity = (typeof BADGE_SEVERITIES)[number];
+
+export declare function Banner({ severity, title, icon, disabled, closable, onClose, children, }: BannerProperties): JSX_2.Element;
+
+declare const BANNER_SEVERITIES: readonly ["neutral", "brand", "positive", "warning", "danger"];
+
+export declare interface BannerProperties {
+    /** @default 'neutral' */
+    severity?: BannerSeverity;
+    title?: string;
+    icon?: ReactNode;
+    /** @default false */
+    disabled?: boolean;
+    /** @default false */
+    closable?: boolean;
+    onClose?: () => void;
+    children?: ReactNode;
+}
+
+export declare type BannerSeverity = (typeof BANNER_SEVERITIES)[number];
+
+export declare interface BreadcrumbItemData {
+    label: string;
+    /** Current page — not interactive, distinct visual/behavioral state from disabled. */
+    active?: boolean;
+    disabled?: boolean;
+    /** Consumer-defined extras (icon, href, onClick…) resolved in the adapter. */
+    [key: string]: unknown;
+}
+
+export declare function Breadcrumbs({ items, separator, renderItem, }: BreadcrumbsProperties): JSX_2.Element;
+
+export declare interface BreadcrumbsProperties {
+    items: BreadcrumbItemData[];
+    /** Rendered between items. Defaults to `'/'`, matching the Vue DS. */
+    separator?: ReactNode;
+    /** Custom render for an item's content (icon + label). Defaults to
+     * `item.icon` (if any) + `item.label`. */
+    renderItem?: (item: BreadcrumbItemData) => ReactNode;
+}
+
+export declare const Button: ForwardRefExoticComponent<ButtonProperties & RefAttributes<HTMLButtonElement>>;
+
+declare const BUTTON_SEVERITIES: readonly ["primary", "secondary", "ghost", "danger"];
+
+declare const BUTTON_SIZES: readonly ["xsmall", "small", "medium", "large"];
+
+export declare interface ButtonProperties extends ForwardedNativeProperties {
+    label?: string;
+    severity?: ButtonSeverity;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    iconOnly?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    link?: boolean;
+    linkAnimation?: boolean;
+    /** Elevation shadow + the taller raised sizing (what makes a FAB a FAB).
+     * @default false */
+    raised?: boolean;
+    /** Fully rounded corners — pill with a label, circle with iconOnly.
+     * @default false */
+    rounded?: boolean;
+    icon?: ReactNode;
+    iconPos?: IconPosition;
+    children?: ReactNode;
+}
+
+export declare type ButtonSeverity = (typeof BUTTON_SEVERITIES)[number];
+
+export declare type ButtonSize = (typeof BUTTON_SIZES)[number];
+
+export declare type ButtonVariant = 'solid' | 'bordered';
+
+export declare function CharacterCount({ value, max }: CharacterCountProperties): JSX_2.Element;
+
+export declare interface CharacterCountProperties {
+    value: string;
+    max: number;
+}
+
+export declare const Checkbox: ForwardRefExoticComponent<CheckboxProperties & RefAttributes<HTMLInputElement>>;
+
+declare const CHECKBOX_SIZES: readonly ["small", "medium", "large"];
+
+export declare interface CheckboxProperties {
+    /**
+     * The controlled checked state.
+     */
+    checked?: CheckedState;
+    /**
+     * Initial checked state (uncontrolled mode).
+     */
+    defaultChecked?: CheckedState;
+    /**
+     * Handler called when checked state changes.
+     * Recibe el valor directo, no un objeto `details` — mismo patrón que
+     * Switch y que los 26 callbacks del resto del paquete.
+     */
+    onCheckedChange?: (checked: CheckedState) => void;
+    /**
+     * The checkbox label (can also use children).
+     */
+    children?: ReactNode;
+    /**
+     * Size variant.
+     * @default 'small'
+     */
+    size?: CheckboxSize;
+    /**
+     * Disables interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Marks the checkbox as invalid (red border/background).
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Makes the checkbox read-only.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the checkbox as required for form validation.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * The name attribute for form submission.
+     */
+    name?: string;
+    /**
+     * The value submitted with the form when checked.
+     * @default 'on'
+     */
+    value?: string;
+    /**
+     * ID of an associated form element.
+     */
+    form?: string;
+    /**
+     * Unique identifier for the checkbox.
+     */
+    id?: string;
+}
+
+export declare type CheckboxSize = (typeof CHECKBOX_SIZES)[number];
+
+/**
+ * CheckedState can be boolean or 'indeterminate' (Ark's convention).
+ */
+export declare type CheckedState = boolean | 'indeterminate';
+
+export declare const Combobox: ForwardRefExoticComponent<ComboboxReactProperties & RefAttributes<HTMLDivElement>>;
+
+declare const COMBOBOX_SIZES: readonly ["small", "medium"];
+
+export declare interface ComboboxOptionItem {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    [key: string]: unknown;
+}
+
+export declare interface ComboboxProperties {
+    options: ComboboxOptionItem[];
+    /** Text shown in the trigger when nothing is selected. */
+    placeholder?: string;
+    /** Placeholder for the search input inside the panel. */
+    searchPlaceholder?: string;
+    size?: ComboboxSize;
+    disabled?: boolean;
+    invalid?: boolean;
+    /** Show a '×' button in the trigger to clear the selected value. */
+    clearable?: boolean;
+    label?: string;
+    emptyText?: string;
+}
+
+declare interface ComboboxReactProperties extends ComboboxProperties {
+    value?: string | null;
+    onValueChange?: (value: string | null) => void;
+    leadingIcon?: ReactNode;
+    triggerIcon?: ReactNode;
+    checkIcon?: ReactNode;
+    clearIcon?: ReactNode;
+    renderOption?: (option: ComboboxOptionItem) => ReactNode;
+}
+
+export declare type ComboboxSize = (typeof COMBOBOX_SIZES)[number];
+
+declare const CONFIRM_DIALOG_LAYOUTS: readonly ["row", "column"];
+
+declare const CONFIRM_DIALOG_SEVERITIES: readonly ["none", "warning", "positive"];
+
+export declare function ConfirmDialog({ open, onOpenChange, header, message, severity, layout, icon, acceptLabel, rejectLabel, onAccept, onReject, portalContainer, }: ConfirmDialogProperties): JSX_2.Element;
+
+export declare type ConfirmDialogLayout = (typeof CONFIRM_DIALOG_LAYOUTS)[number];
+
+export declare interface ConfirmDialogProperties {
+    open: boolean;
+    onOpenChange?: (open: boolean) => void;
+    header: string;
+    message: string;
+    /** @default 'none' — 'warning' also swaps the accept button to `danger` severity. */
+    severity?: ConfirmDialogSeverity;
+    /** @default 'row' */
+    layout?: ConfirmDialogLayout;
+    icon?: ReactNode;
+    /** @default 'Confirm' */
+    acceptLabel?: string;
+    /** @default 'Cancel' */
+    rejectLabel?: string;
+    onAccept?: () => void;
+    onReject?: () => void;
+    portalContainer?: RefObject<HTMLElement | null>;
+}
+
+export declare type ConfirmDialogSeverity = (typeof CONFIRM_DIALOG_SEVERITIES)[number];
+
+export declare function Counter({ value, onValueChange, size, variant, disabled, disabledIncrement, disabledDecrement, step, id, name, min, max, }: CounterProperties): JSX_2.Element;
+
+declare const COUNTER_SIZES: readonly ["small", "medium", "large"];
+
+export declare interface CounterProperties {
+    /** Controlled numeric value. `null` when the field is empty. */
+    value?: number | null;
+    /** Change handler — receives the next number, or `null` when cleared. */
+    onValueChange?: (value: number | null) => void;
+    size?: CounterSize;
+    variant?: CounterVariant;
+    disabled?: boolean;
+    /** Disables only the increment ("+") trigger, regardless of `max`. */
+    disabledIncrement?: boolean;
+    /** Disables only the decrement ("-") trigger, regardless of `min`. */
+    disabledDecrement?: boolean;
+    id?: string;
+    name?: string;
+    /** Minimum allowed value. */
+    min?: number;
+    /** Maximum allowed value. */
+    max?: number;
+    /** Step for the +/- triggers. @default 1 */
+    step?: number;
+}
+
+export declare type CounterSize = (typeof COUNTER_SIZES)[number];
+
+/** 'default' = square secondary buttons. 'expandable' = pill-shaped, ghost buttons. */
+export declare type CounterVariant = 'default' | 'expandable';
+
+export declare function createSnackbar(config?: SnackbarConfig): SnackbarController;
+
+declare const DATE_PICKER_SELECTION_MODES: readonly ["single", "range"];
+
+export declare const DatePicker: ForwardRefExoticComponent<DatePickerProperties & RefAttributes<HTMLDivElement>>;
+
+export declare interface DatePickerProperties {
+    value?: DatePickerValue;
+    onValueChange?: (value: DatePickerValue) => void;
+    selectionMode?: DatePickerSelectionMode;
+    size?: InputTextSize;
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    /** Inclusive bounds. Also clamps the time-of-day when `showTime`/`timeOnly`. */
+    minDate?: Date;
+    maxDate?: Date;
+    /** Show prev/next + the clickable month/year view switcher. @default true */
+    navigation?: boolean;
+    /** Two months side-by-side at/above the `sm` breakpoint. @default false */
+    doubleMonth?: boolean;
+    /** Render the calendar in normal flow — no field, no floating panel. @default false */
+    inline?: boolean;
+    /** Show the '×' clear trigger once a value is selected. @default true */
+    clearable?: boolean;
+    /** Price badge under each day — the booking-calendar use case. */
+    prices?: DatePriceData[];
+    currency?: string;
+    /** BCP 47 tag, e.g. "es-MX". @default "en-US" */
+    locale?: string;
+    /** Show a native time input under the calendar. @default false */
+    showTime?: boolean;
+    /** Time-only — the calendar view is hidden, only the time input shows. @default false */
+    timeOnly?: boolean;
+    showSeconds?: boolean;
+    /** Render prop so consumers compose their own Clear/Apply buttons (e.g. Mare's
+     * own `<Button>`) instead of Mare hardcoding a footer. */
+    footer?: (helpers: {
+        close: () => void;
+        clear: () => void;
+    }) => ReactNode;
+    leadingIcon?: ReactNode;
+    /** Passed straight through to Ark's `<Portal container>` — see the
+     * mare-migrate-component skill's Portal section for why this must be
+     * exposed (a single `data-theme` on the document root is the default,
+     * correct, common case — this is only for multi-theme layouts). */
+    portalContainer?: RefObject<HTMLElement | null>;
+    onOpenChange?: (open: boolean) => void;
+    /** Fires whenever the visible month(s) change (navigation or open). The Vue
+     * DS also had a separate `month-change` event — every real consumer just
+     * `console.log`'d both with identical payloads, so this adapter exposes
+     * the one Ark already gives us (`onVisibleRangeChange`) instead of two. */
+    onVisibleMonthsChange?: (months: Date[]) => void;
+}
+
+export declare type DatePickerSelectionMode = (typeof DATE_PICKER_SELECTION_MODES)[number];
+
+export declare type DatePickerValue = Date | [Date | null, Date | null] | null;
+
+/** A day's price badge, rendered under its cell (booking-calendar use case). */
+export declare interface DatePriceData {
+    date: Date;
+    price: number;
+    positive: boolean;
+    disabled?: boolean;
+}
+
+export declare function Dialog({ open, onOpenChange, size, fullScreen, modal, closeOnEscape, dismissableMask, maskColor, portalContainer, header, footer, children, 'aria-label': ariaLabel, }: DialogProperties): JSX_2.Element;
+
+declare const DIALOG_FOOTER_LAYOUTS: readonly ["row", "column"];
+
+declare const DIALOG_SIZES: readonly ["small", "medium", "large"];
+
+export declare function DialogFooter({ layout, border, children, }: DialogFooterProperties): JSX_2.Element;
+
+export declare type DialogFooterLayout = (typeof DIALOG_FOOTER_LAYOUTS)[number];
+
+export declare interface DialogFooterProperties {
+    /** @default 'row' */
+    layout?: DialogFooterLayout;
+    /** @default false */
+    border?: boolean;
+    children?: ReactNode;
+}
+
+export declare function DialogHeader({ title, leftIcon, rightIcon, onLeftIconClick, onRightIconClick, border, }: DialogHeaderProperties): JSX_2.Element;
+
+export declare interface DialogHeaderProperties {
+    title?: string;
+    /** Closes the dialog on click (matches the legacy DialogHeader: the LEFT
+     * icon always closes, regardless of which glyph it shows). @default a close (X) icon */
+    leftIcon?: ReactNode;
+    /** Does NOT close the dialog on click — wire that yourself if you need it. @default undefined (no button) */
+    rightIcon?: ReactNode;
+    onLeftIconClick?: () => void;
+    onRightIconClick?: () => void;
+    /** @default false */
+    border?: boolean;
+}
+
+export declare interface DialogProperties {
+    /** Controlled open state. */
+    open: boolean;
+    /** Change handler — receives the next open state. */
+    onOpenChange?: (open: boolean) => void;
+    /** Desktop width. Mobile is always full-width regardless. @default 'medium' */
+    size?: DialogSize;
+    /** Stretches to fill the screen on mobile (no top rounding); barely
+     * changes desktop (just max-height, same as the non-fullScreen case).
+     * @default false */
+    fullScreen?: boolean;
+    /** @default true */
+    modal?: boolean;
+    /** @default true */
+    closeOnEscape?: boolean;
+    /** Close when clicking the backdrop. @default true */
+    dismissableMask?: boolean;
+    /** Overrides the backdrop's background class. @default undefined (uses the token overlay color) */
+    maskColor?: string;
+    /** Where the dialog portals to. Ark defaults to `document.body` — override
+     * this if your app scopes `data-theme` (or any other CSS custom property)
+     * to a sub-tree rather than the document root, otherwise the portaled
+     * dialog renders outside that scope and loses the tokens. */
+    portalContainer?: RefObject<HTMLElement | null>;
+    /** Typically a `<DialogHeader />`. */
+    header?: ReactNode;
+    /** Typically a `<DialogFooter>` with action buttons. */
+    footer?: ReactNode;
+    /** The scrollable body, between header and footer. */
+    children?: ReactNode;
+    /** Fallback accessible label when no title is rendered in the header. */
+    'aria-label'?: string;
+}
+
+export declare type DialogSize = (typeof DIALOG_SIZES)[number];
+
+export declare function Divider({ layout, children, ...native }: DividerProperties): JSX_2.Element;
+
+declare const DIVIDER_LAYOUTS: readonly ["horizontal", "vertical"];
+
+export declare type DividerLayout = (typeof DIVIDER_LAYOUTS)[number];
+
+export declare interface DividerProperties extends ForwardedNativeProperties_7 {
+    layout?: DividerLayout;
+    children?: ReactNode;
+}
+
+export declare function Drawer({ open, onOpenChange, position, modal, closeOnEscape, dismissableMask, maskColor, shadow, portalContainer, header, footer, children, 'aria-label': ariaLabel, }: DrawerProperties): JSX_2.Element;
+
+declare const DRAWER_POSITIONS: readonly ["left", "right", "top", "bottom", "full"];
+
+export declare function DrawerFooter({ border, children, }: DrawerFooterProperties): JSX_2.Element;
+
+export declare interface DrawerFooterProperties {
+    /** @default false */
+    border?: boolean;
+    children?: ReactNode;
+}
+
+export declare function DrawerHeader({ title, leftIcon, rightIcon, onLeftIconClick, onRightIconClick, border, compact, }: DrawerHeaderProperties): JSX_2.Element;
+
+export declare interface DrawerHeaderProperties {
+    title?: string;
+    /** Closes the drawer on click (matches the legacy header: the LEFT icon
+     * always closes, regardless of which glyph it shows). @default a close (X) icon */
+    leftIcon?: ReactNode;
+    /** Does NOT close the drawer on click — wire that yourself if you need it. @default undefined (no button) */
+    rightIcon?: ReactNode;
+    onLeftIconClick?: () => void;
+    onRightIconClick?: () => void;
+    /** @default false */
+    border?: boolean;
+    /** Shorter header, smaller inline padding — legacy's "slim" variant. @default false */
+    compact?: boolean;
+}
+
+export declare type DrawerPosition = (typeof DRAWER_POSITIONS)[number];
+
+export declare interface DrawerProperties {
+    /** Controlled open state. */
+    open: boolean;
+    /** Change handler — receives the next open state. */
+    onOpenChange?: (open: boolean) => void;
+    /** Which edge the panel docks to and slides in from. @default 'left' */
+    position?: DrawerPosition;
+    /** @default true */
+    modal?: boolean;
+    /** @default true */
+    closeOnEscape?: boolean;
+    /** Close when clicking the backdrop. @default true */
+    dismissableMask?: boolean;
+    /** Overrides the backdrop's background class. @default undefined (uses the token overlay color) */
+    maskColor?: string;
+    /** @default true */
+    shadow?: boolean;
+    /** Where the drawer portals to. Ark defaults to `document.body` — override
+     * this if your app scopes `data-theme` (or any other CSS custom property)
+     * to a sub-tree rather than the document root, otherwise the portaled
+     * drawer renders outside that scope and loses the tokens. */
+    portalContainer?: RefObject<HTMLElement | null>;
+    /** Typically a `<DrawerHeader />`. */
+    header?: ReactNode;
+    /** Typically a `<DrawerFooter>` with action buttons. */
+    footer?: ReactNode;
+    /** The scrollable body, between header and footer. */
+    children?: ReactNode;
+    /** Fallback accessible label when no title is rendered in the header. */
+    'aria-label'?: string;
+}
+
+export declare function ExpandableCounter({ value, onValueChange, disabled, disabledIncrement, disabledDecrement, step, id, name, min, max, }: ExpandableCounterProperties): JSX_2.Element;
+
+export declare interface ExpandableCounterProperties {
+    /** Controlled numeric value. */
+    value?: number;
+    /** Change handler — receives the next number. */
+    onValueChange?: (value: number) => void;
+    disabled?: boolean;
+    /** Disables only the increment ("+") trigger, regardless of `max`. */
+    disabledIncrement?: boolean;
+    /** Disables only the decrement ("-") trigger, regardless of `min`. */
+    disabledDecrement?: boolean;
+    id?: string;
+    name?: string;
+    /** Minimum allowed value — also the threshold the "+" trigger collapses to. @default 0 */
+    min?: number;
+    /** Maximum allowed value. */
+    max?: number;
+    /** Step for the +/- triggers. @default 1 */
+    step?: number;
+}
+
+declare const FILTER_CHIP_DROPDOWN_SIZES: readonly ["medium", "large"];
+
+declare const FILTER_CHIP_DROPDOWN_SIZES_2: readonly ["medium", "large"];
+
+declare const FILTER_CHIP_SIZES: readonly ["medium", "large"];
+
+export declare function FilterChip({ value, size, disabled, dropdown, selected: selectedProperty, onSelectedChange, dropdownOpen, onDropdownOpenChange, onToggleDropdown, children, }: FilterChipProperties): JSX_2.Element;
+
+export declare function FilterChipDropdownMultiple({ value, onValueChange, options, placeholder, size, disabled, invalid, filter, headerLabel, hasCheckbox, showToggleAll, renderOption, }: FilterChipDropdownMultipleReactProperties): JSX_2.Element;
+
+export declare interface FilterChipDropdownMultipleOptionItem {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    /** Consumer-defined extras resolved in the option render prop. */
+    [key: string]: unknown;
+}
+
+export declare interface FilterChipDropdownMultipleProperties {
+    options: FilterChipDropdownMultipleOptionItem[];
+    /** @default 'Select…' */
+    placeholder?: string;
+    /** @default 'medium' */
+    size?: FilterChipDropdownMultipleSize;
+    disabled?: boolean;
+    invalid?: boolean;
+    /** Shows a search field inside the panel. @default false */
+    filter?: boolean;
+    /** Text shown in the panel header, above the option list. */
+    headerLabel?: string;
+    /** Shows a checkbox next to each option (and in the header, when showToggleAll is on). @default true */
+    hasCheckbox?: boolean;
+    /** Shows the "select all" header row. @default false */
+    showToggleAll?: boolean;
+}
+
+declare interface FilterChipDropdownMultipleReactProperties extends FilterChipDropdownMultipleProperties {
+    value?: string[];
+    onValueChange?: (value: string[]) => void;
+    renderOption?: (option: FilterChipDropdownMultipleOptionItem) => ReactNode;
+}
+
+export declare type FilterChipDropdownMultipleSize = (typeof FILTER_CHIP_DROPDOWN_SIZES_2)[number];
+
+export declare function FilterChipDropdownSingle({ value, onValueChange, options, placeholder, size, disabled, invalid, filter, clearable, renderOption, checkIcon, clearIcon, }: FilterChipDropdownSingleReactProperties): JSX_2.Element;
+
+export declare interface FilterChipDropdownSingleOptionItem {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    /** Consumer-defined extras resolved in the option render prop. */
+    [key: string]: unknown;
+}
+
+export declare interface FilterChipDropdownSingleProperties {
+    options: FilterChipDropdownSingleOptionItem[];
+    /** @default 'Select…' */
+    placeholder?: string;
+    /** @default 'medium' */
+    size?: FilterChipDropdownSingleSize;
+    disabled?: boolean;
+    invalid?: boolean;
+    /** Shows a search field inside the panel. @default false */
+    filter?: boolean;
+    /** Shows a '×' button in the trigger to clear the selected value. @default false */
+    clearable?: boolean;
+}
+
+declare interface FilterChipDropdownSingleReactProperties extends FilterChipDropdownSingleProperties {
+    value?: string | null;
+    onValueChange?: (value: string | null) => void;
+    renderOption?: (option: FilterChipDropdownSingleOptionItem) => ReactNode;
+    checkIcon?: ReactNode;
+    clearIcon?: ReactNode;
+}
+
+export declare type FilterChipDropdownSingleSize = (typeof FILTER_CHIP_DROPDOWN_SIZES)[number];
+
+export declare function FilterChipGroup({ multiple, value, onValueChange, children, }: FilterChipGroupProperties): JSX_2.Element;
+
+export declare interface FilterChipGroupProperties {
+    /** @default false */
+    multiple?: boolean;
+    /** String (or undefined) when multiple is false; string[] when multiple is true. */
+    value?: FilterChipGroupValue;
+    onValueChange?: (value: FilterChipGroupValue) => void;
+    /** The FilterChip children. Each needs a distinct `value` (or string children) to be identified within the group. */
+    children?: ReactNode;
+}
+
+/** String (or undefined) in single-selection mode; string[] in multiple mode. */
+export declare type FilterChipGroupValue = string | string[] | undefined;
+
+export declare interface FilterChipProperties {
+    /**
+     * Identity within a FilterChipGroup. Falls back to `children` when
+     * omitted and children is a plain string.
+     */
+    value?: string;
+    /** @default 'medium' */
+    size?: FilterChipSize;
+    /** Blocks the click entirely, not just the styling. @default false */
+    disabled?: boolean;
+    /**
+     * Switches the chip from "removable filter" mode to "dropdown trigger"
+     * mode: shows a chevron instead of a remove icon, and click toggles
+     * `dropdownOpen` (firing onToggleDropdown) instead of the selection.
+     * Takes priority over a FilterChipGroup context — a dropdown chip inside
+     * a group does not participate in that group's selection.
+     * @default false
+     */
+    dropdown?: boolean;
+    /** Standalone selected state. Ignored when inside a FilterChipGroup —
+     * there the group controls selection. */
+    selected?: boolean;
+    onSelectedChange?: (selected: boolean) => void;
+    /**
+     * Only relevant when dropdown is true: whether the chevron points up
+     * (open) or down (closed). FilterChip renders no panel of its own — this
+     * exists so the consumer can sync their own popover with the chevron.
+     * @default false
+     */
+    dropdownOpen?: boolean;
+    onDropdownOpenChange?: (open: boolean) => void;
+    /** Fires on click while dropdown is true. `target` is the chip button —
+     * useful to position a consumer-owned panel/popover; FilterChip includes
+     * none itself. */
+    onToggleDropdown?: (event: MouseEvent_2<HTMLButtonElement>, target: HTMLElement) => void;
+    children?: ReactNode;
+}
+
+export declare type FilterChipSize = (typeof FILTER_CHIP_SIZES)[number];
+
+/** A floating primary action is never destructive nor invisible: the FAB
+ * excludes Button's 'ghost' and 'danger'. Hardcoded rather than derived
+ * from ButtonSeverity via Exclude<> — that indirection made rollupTypes
+ * (vite-plugin-dts/api-extractor) leave an unresolved cross-entry import
+ * in the React package's dist. Keep in sync with BUTTON_SEVERITIES by hand. */
+declare const FLOATING_ACTION_BUTTON_SEVERITIES: readonly ["primary", "secondary"];
+
+export declare const FloatingActionButton: ForwardRefExoticComponent<FloatingActionButtonProperties & RefAttributes<HTMLButtonElement>>;
+
+export declare interface FloatingActionButtonProperties extends ForwardedNativeProperties_2 {
+    label?: string;
+    /** Visual hierarchy. Unlike Button, 'ghost' and 'danger' are excluded.
+     * @default 'primary' */
+    severity?: FloatingActionButtonSeverity;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    iconOnly?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    link?: boolean;
+    linkAnimation?: boolean;
+    icon?: ReactNode;
+    iconPos?: IconPosition;
+    children?: ReactNode;
+}
+
+export declare type FloatingActionButtonSeverity = (typeof FLOATING_ACTION_BUTTON_SEVERITIES)[number];
+
+export declare function FloatLabel({ label, children }: FloatLabelProperties): JSX_2.Element;
+
+declare interface FloatLabelProperties {
+    label: string;
+    children?: ReactNode;
+}
+
+export declare function FormField({ invalid, disabled, required, children, }: FormFieldProperties): JSX_2.Element;
+
+declare interface FormFieldProperties {
+    invalid?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    children?: ReactNode;
+}
+
+/** Native passthrough same as InputText, minus what SearchField owns/reshapes. */
+declare type ForwardedInputProperties = Omit<InputTextProperties, 'value' | 'onValueChange' | 'rounded' | 'defaultValue'>;
+
+declare type ForwardedNativeProperties = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style' | 'children' | 'color'>;
+
+declare type ForwardedNativeProperties_2 = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style' | 'children' | 'color'>;
+
+declare type ForwardedNativeProperties_3 = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'defaultValue' | 'size' | 'className' | 'style'>;
+
+declare type ForwardedNativeProperties_4 = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange' | 'className' | 'style'>;
+
+declare type ForwardedNativeProperties_5 = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'defaultValue' | 'size' | 'type' | 'className' | 'style'>;
+
+declare type ForwardedNativeProperties_6 = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children'>;
+
+declare type ForwardedNativeProperties_7 = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children'>;
+
+export declare function HelperText({ children }: {
+    children?: ReactNode;
+}): JSX_2.Element;
+
+declare const ICON_FIELD_POSITIONS: readonly ["left", "right"];
+
+declare const ICON_POSITIONS: readonly ["left", "right", "top", "bottom"];
+
+export declare function IconField({ icon, position, disabled, onIconClick, iconLabel, children, }: IconFieldProperties): JSX_2.Element;
+
+declare type IconFieldPosition = (typeof ICON_FIELD_POSITIONS)[number];
+
+declare interface IconFieldProperties {
+    icon: ReactNode;
+    position?: IconFieldPosition;
+    /** Dims the icon to match a disabled sibling input. IconField can't see
+     * that prop on its own (it lives on the input, not on IconField) — pass
+     * it through explicitly when composing (see SearchField). @default false */
+    disabled?: boolean;
+    /** Makes the icon a real click target (a `<button>`, not a decorative
+     * `<span>`). @default undefined (decorative) */
+    onIconClick?: () => void;
+    /** Accessible name for the button, when `onIconClick` is set. */
+    iconLabel?: string;
+    children?: ReactNode;
+}
+
+export declare type IconPosition = (typeof ICON_POSITIONS)[number];
+
+declare const IMAGE_ITEM_RATIOS: readonly ["4:3", "1:1", "5:4", "3:2", "free"];
+
+export declare function ImageItem({ ratio, children }: ImageItemProperties): JSX_2.Element;
+
+export declare interface ImageItemProperties {
+    ratio?: ImageItemRatio;
+    children: ReactNode;
+}
+
+export declare type ImageItemRatio = (typeof IMAGE_ITEM_RATIOS)[number];
+
+export declare function ImageSlider({ pagination, navigation, children, }: ImageSliderProperties): JSX_2.Element;
+
+export declare interface ImageSliderProperties {
+    pagination?: boolean;
+    navigation?: boolean;
+    children: ReactNode;
+}
+
+declare const INPUT_OTP_SIZES: readonly ["small", "medium", "large"];
+
+declare const INPUT_TEXT_SIZES: readonly ["small", "medium"];
+
+export declare const InputNumber: ForwardRefExoticComponent<InputNumberProperties & RefAttributes<HTMLInputElement>>;
+
+export declare interface InputNumberProperties {
+    /** Valor numérico controlado. `null` = campo vacío. Omítelo por completo
+     * para dejar el campo uncontrolled. */
+    value?: number | null;
+    /** Valor inicial cuando el campo es uncontrolled (sin `value`). */
+    defaultValue?: number | null;
+    /** Change handler — receives the next number, or `null` when cleared. */
+    onValueChange?: (value: number | null) => void;
+    size?: InputTextSize;
+    rounded?: boolean;
+    invalid?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    placeholder?: string;
+    id?: string;
+    name?: string;
+    /** Minimum allowed value. */
+    min?: number;
+    /** Maximum allowed value. */
+    max?: number;
+    /** Step for keyboard/scrub increments. @default 1 */
+    step?: number;
+    /** Intl.NumberFormat options — currency, percent, unit, decimals, grouping. */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** BCP 47 locale used for formatting/parsing. */
+    locale?: string;
+    /** Increment/decrement the value with the mouse wheel while focused. */
+    allowMouseWheel?: boolean;
+    /** Clamp the value to min/max when the field loses focus. @default true */
+    clampValueOnBlur?: boolean;
+}
+
+export declare const InputOtp: ForwardRefExoticComponent<InputOtpProperties & RefAttributes<HTMLInputElement>>;
+
+export declare interface InputOtpProperties {
+    /** Number of digit boxes to render. */
+    length?: number;
+    /** Controlled value, one character per digit. Omit to let Ark manage it. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Fired once all digits are filled with a valid value. */
+    onComplete?: (value: string) => void;
+    size?: InputOtpSize;
+    /** Masks each digit like `type="password"`. */
+    mask?: boolean;
+    /** Restricts input to digits only. Set `false` for alphanumeric codes. */
+    integerOnly?: boolean;
+    /** Placeholder shown in each empty box. Defaults to '' (blank box) — Ark's
+     * own default is '○', which the Mare design doesn't use. */
+    placeholder?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    autoFocus?: boolean;
+    name?: string;
+    id?: string;
+}
+
+export declare type InputOtpSize = (typeof INPUT_OTP_SIZES)[number];
+
+export declare const InputText: ForwardRefExoticComponent<InputTextProperties & RefAttributes<HTMLInputElement>>;
+
+export declare interface InputTextProperties extends ForwardedNativeProperties_3 {
+    /** Valor controlado. Omítelo para dejar el campo uncontrolled (el DOM
+     * guarda el valor y `defaultValue` aplica). */
+    value?: string;
+    /** Valor inicial cuando el campo es uncontrolled (sin `value`). */
+    defaultValue?: string;
+    /** Controlled change handler — receives the next string value. */
+    onValueChange?: (value: string) => void;
+    size?: InputTextSize;
+    rounded?: boolean;
+    invalid?: boolean;
+    disabled?: boolean;
+}
+
+declare type InputTextSize = (typeof INPUT_TEXT_SIZES)[number];
+export { InputTextSize as InputNumberSize }
+export { InputTextSize }
+
+export declare function Menu({ trigger, items, onSelect, renderItem, portalContainer, }: MenuProperties): JSX_2.Element;
+
+export declare type MenuEntry = MenuItemData | MenuSeparatorEntry | MenuGroupEntry;
+
+export declare interface MenuGroupEntry {
+    type: 'group';
+    label?: string;
+    items: MenuItemData[];
+}
+
+export declare interface MenuItemData {
+    type?: 'item';
+    value: string;
+    label: string;
+    disabled?: boolean;
+    /** Persistent highlight (e.g. current page) — distinct from the
+     * hover/keyboard `ark-highlighted` state. */
+    active?: boolean;
+    /** Consumer-defined extras (icon, href, target…) resolved in the adapter. */
+    [key: string]: unknown;
+}
+
+export declare interface MenuProperties {
+    /** The element that opens the menu on click — typically a `<Button>`. */
+    trigger: ReactNode;
+    items: MenuEntry[];
+    /** Called with the selected item's `value` when an item (or an item
+     * inside a group) is chosen. */
+    onSelect?: (value: string) => void;
+    /** Custom render for an item's content (icon + label). Defaults to
+     * `item.icon` (if any) + `item.label`. */
+    renderItem?: (item: MenuItemData) => ReactNode;
+    /** Where the menu portals to. Ark defaults to `document.body` — override
+     * this if your app scopes `data-theme` (or any other CSS custom property)
+     * to a sub-tree rather than the document root, otherwise the portaled
+     * menu renders outside that scope and loses the tokens. */
+    portalContainer?: RefObject<HTMLElement | null>;
+}
+
+export declare interface MenuSeparatorEntry {
+    type: 'separator';
+}
+
+export declare function Message({ severity, variant, title, icon, disabled, closable, onClose, children, }: MessageProperties): JSX_2.Element;
+
+declare const MESSAGE_SEVERITIES: readonly ["neutral", "brand", "positive", "warning", "danger"];
+
+export declare interface MessageProperties {
+    /** @default 'neutral' */
+    severity?: MessageSeverity;
+    /** @default 'simple' */
+    variant?: MessageVariant;
+    title?: string;
+    icon?: ReactNode;
+    /** @default false */
+    disabled?: boolean;
+    /** @default false */
+    closable?: boolean;
+    onClose?: () => void;
+    children?: ReactNode;
+}
+
+export declare type MessageSeverity = (typeof MESSAGE_SEVERITIES)[number];
+
+/** @default 'simple' */
+export declare type MessageVariant = 'simple' | 'filled';
+
+declare const MULTI_SELECT_SIZES: readonly ["small", "medium"];
+
+export declare const MultiSelect: ForwardRefExoticComponent<MultiSelectReactProperties & RefAttributes<HTMLDivElement>>;
+
+export declare type MultiSelectDisplay = 'chip' | 'text';
+
+export declare type MultiSelectItemSize = 'small' | 'medium';
+
+export declare interface MultiSelectOptionItem {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    /** Consumer-defined extras (icon, description…) resolved in the option slot. */
+    [key: string]: unknown;
+}
+
+export declare interface MultiSelectProperties {
+    options: MultiSelectOptionItem[];
+    placeholder?: string;
+    /** Placeholder for the search input inside the panel (shown when `filterable`). */
+    searchPlaceholder?: string;
+    size?: MultiSelectSize;
+    /** Size of each option row, independent from the control `size`. @default 'medium' */
+    itemSize?: MultiSelectItemSize;
+    disabled?: boolean;
+    invalid?: boolean;
+    /** Shows a spinner in place of the chevron. @default false */
+    loading?: boolean;
+    /** Shows a '×' button in the trigger to clear all selected values. @default false */
+    clearable?: boolean;
+    /** Shows a search input inside the panel. @default false */
+    filterable?: boolean;
+    /** Shows a checkbox next to each option (and the header toggle-all). @default true */
+    hasCheckbox?: boolean;
+    /** Shows a "select all" row at the top of the panel. @default false */
+    showToggleAll?: boolean;
+    /** Label next to the header toggle-all checkbox. */
+    headerLabel?: string;
+    /** How the selected values render in the trigger. @default 'text' */
+    display?: MultiSelectDisplay;
+    /** Max labels joined in `display: 'text'` before falling back to "N items selected". @default 3 */
+    maxSelectedLabels?: number;
+    label?: string;
+    emptyText?: string;
+}
+
+declare interface MultiSelectReactProperties extends MultiSelectProperties {
+    value?: string[];
+    onValueChange?: (value: string[]) => void;
+    indicator?: ReactNode;
+    clearIcon?: ReactNode;
+    filterIcon?: ReactNode;
+    renderOption?: (option: MultiSelectOptionItem) => ReactNode;
+}
+
+export declare type MultiSelectSize = (typeof MULTI_SELECT_SIZES)[number];
+
+export declare function OverlayBadge({ children, severity, icon, value, offsetX, offsetY, }: OverlayBadgeProperties): JSX_2.Element;
+
+export declare interface OverlayBadgeProperties {
+    /** Element the badge overlays. */
+    children: ReactNode;
+    /** @default 'accent' */
+    severity?: BadgeSeverity;
+    /** Shown inside the badge, next to (or instead of) `value`. */
+    icon?: ReactNode;
+    /** Badge content (count/label). A bare dot renders when neither this nor `icon` is set. */
+    value?: ReactNode;
+    /** Horizontal nudge (px) off the default corner position. @default 0 */
+    offsetX?: number;
+    /** Vertical nudge (px) off the default corner position. @default 0 */
+    offsetY?: number;
+}
+
+export declare function Paginator({ count, page, defaultPage, onPageChange, pageSize, defaultPageSize, onPageSizeChange, pageLinkSize, showFirstLastLinks, rowsPerPageOptions, rowsPerPageOptionsLabel, }: PaginatorProperties): JSX_2.Element;
+
+export declare interface PaginatorProperties {
+    /** Total number of data items (rows), NOT page count. */
+    count: number;
+    /** Controlled current page, 1-indexed. Omit to let Ark manage it. */
+    page?: number;
+    defaultPage?: number;
+    onPageChange?: (page: number) => void;
+    /** Items per page. */
+    pageSize?: number;
+    defaultPageSize?: number;
+    onPageSizeChange?: (pageSize: number) => void;
+    /** Numbered buttons shown at once — shrinks to fit a narrow container. */
+    pageLinkSize?: number;
+    /** Shows the jump-to-first/last-page buttons.
+     * @default true */
+    showFirstLastLinks?: boolean;
+    /** Shows the "rows per page" select when given 1+ options. */
+    rowsPerPageOptions?: number[];
+    /** @default 'Rows per page' */
+    rowsPerPageOptionsLabel?: string;
+}
+
+export declare function PanelMenu({ items, expandedValue, defaultExpandedValue, onExpandedChange, renderItem, }: PanelMenuProperties): JSX_2.Element;
+
+export declare interface PanelMenuItemData {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    /** Persistent highlight (e.g. current route) — distinct from Ark's own
+     * open/closed state on branches. Same pattern as Menu's `active` field. */
+    active?: boolean;
+    /** Nested entries — presence of this (non-empty) makes the node a branch. */
+    items?: PanelMenuItemData[];
+    /** Consumer-defined extras (icon, href, target…) resolved in the adapter. */
+    [key: string]: unknown;
+}
+
+export declare interface PanelMenuProperties {
+    items: PanelMenuItemData[];
+    /** Controlled expanded branch values. Omit to let Ark manage it (uncontrolled). */
+    expandedValue?: string[];
+    defaultExpandedValue?: string[];
+    onExpandedChange?: (value: string[]) => void;
+    /** Override the default icon + label row entirely. */
+    renderItem?: (item: PanelMenuItemData) => ReactNode;
+}
+
+export declare const Password: ForwardRefExoticComponent<PasswordProperties & RefAttributes<HTMLInputElement>>;
+
+/** A single requirement row for `footer` (e.g. "At least one uppercase"). */
+export declare function PasswordFooterItem({ children }: {
+    children?: ReactNode;
+}): JSX_2.Element;
+
+export declare interface PasswordProperties extends ForwardedNativeProperties_5 {
+    /** Valor controlado. Omítelo para dejar el campo uncontrolled. */
+    value?: string;
+    /** Valor inicial cuando el campo es uncontrolled (sin `value`). */
+    defaultValue?: string;
+    /** Controlled change handler — receives the next string value. */
+    onValueChange?: (value: string) => void;
+    size?: InputTextSize;
+    rounded?: boolean;
+    invalid?: boolean;
+    disabled?: boolean;
+    /** Shows a button that toggles the value between hidden/visible. @default true */
+    toggleMask?: boolean;
+    /** Icon shown when the value is hidden — click reveals it. @default an eye icon */
+    showIcon?: ReactNode;
+    /** Icon shown when the value is visible — click hides it. @default an eye-off icon */
+    hideIcon?: ReactNode;
+    /** Shows the strength-meter panel while the field has focus. @default true */
+    feedback?: boolean;
+    /** Custom content at the top of the feedback panel. */
+    header?: ReactNode;
+    /** Custom content at the bottom of the feedback panel, below a divider —
+     * e.g. a list of `PasswordFooterItem`s describing the requirements. */
+    footer?: ReactNode;
+    /** Label shown before there's a value. @default 'Please enter a password' */
+    promptLabel?: string;
+    /** @default 'Weak' */
+    weakLabel?: string;
+    /** @default 'Medium' */
+    mediumLabel?: string;
+    /** @default 'Strong' */
+    strongLabel?: string;
+    /** Regex (as a string) a value must match to count as at least 'medium'. */
+    mediumRegex?: string;
+    /** Regex (as a string) a value must match to count as 'strong'. */
+    strongRegex?: string;
+}
+
+export declare function ProgressBar({ value, mode, min, max, label, showValue, id, }: ProgressBarProperties): JSX_2.Element;
+
+export declare type ProgressBarMode = 'determinate' | 'indeterminate';
+
+export declare interface ProgressBarProperties {
+    /**
+     * The current value. Ignored when `mode` is `'indeterminate'`.
+     * @default 0
+     */
+    value?: number;
+    /**
+     * `'determinate'` shows a filled bar sized to `value`. `'indeterminate'`
+     * shows the looping two-bar animation (no known value/ETA).
+     * @default 'determinate'
+     */
+    mode?: ProgressBarMode;
+    /**
+     * The minimum allowed value.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * The maximum allowed value.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Label rendered above the bar.
+     */
+    label?: string;
+    /**
+     * Shows the formatted value (e.g. "40%") next to the label.
+     * Ignored when `mode` is `'indeterminate'` (there's no value to show).
+     * @default false
+     */
+    showValue?: boolean;
+    /**
+     * Unique identifier for the progress bar.
+     */
+    id?: string;
+}
+
+export declare function ProgressSpinner({ circleClass, className, }: ProgressSpinnerProperties): JSX_2.Element;
+
+/**
+ * Mare ProgressSpinner — React. Ark has no spinner (pure SVG + CSS), so it's
+ * Mare-owned. Identical markup to the Vue version. Dash keyframe in styles.css.
+ */
+export declare interface ProgressSpinnerProperties {
+    /** Extra classes for the <circle> (e.g. stroke color per Button severity). */
+    circleClass?: string;
+    className?: string;
+}
+
+declare const RADIO_GROUP_ORIENTATIONS: readonly ["horizontal", "vertical"];
+
+declare const RADIO_GROUP_SIZES: readonly ["small", "medium", "large"];
+
+export declare const RadioGroup: ForwardRefExoticComponent<RadioGroupProperties & RefAttributes<HTMLDivElement>>;
+
+export declare type RadioGroupOrientation = (typeof RADIO_GROUP_ORIENTATIONS)[number];
+
+export declare interface RadioGroupProperties {
+    /**
+     * The available options.
+     */
+    items: RadioOptionItem[];
+    /**
+     * The controlled selected value.
+     */
+    value?: string | null;
+    /**
+     * Initial selected value (uncontrolled mode).
+     */
+    defaultValue?: string;
+    /**
+     * Handler called when the selected value changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Size variant.
+     * @default 'small'
+     */
+    size?: RadioGroupSize;
+    /**
+     * Layout direction of the items.
+     * @default 'vertical'
+     */
+    orientation?: RadioGroupOrientation;
+    /**
+     * Disables the entire group.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Marks the group as invalid (red styling).
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Makes the group read-only.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the group as required for form validation.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * The name attribute for form submission.
+     */
+    name?: string;
+    /**
+     * ID of an associated form element.
+     */
+    form?: string;
+    /**
+     * Unique identifier for the group.
+     */
+    id?: string;
+}
+
+export declare type RadioGroupSize = (typeof RADIO_GROUP_SIZES)[number];
+
+export declare interface RadioOptionItem {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+
+export declare const SearchField: ForwardRefExoticComponent<SearchFieldProperties & RefAttributes<HTMLInputElement>>;
+
+export declare interface SearchFieldProperties extends ForwardedInputProperties {
+    /** Valor controlado. Omítelo para dejar el campo uncontrolled. */
+    value?: string;
+    /** Valor inicial cuando el campo es uncontrolled (sin `value`). */
+    defaultValue?: string;
+    /** Controlled change handler — receives the next string value. */
+    onValueChange?: (value: string) => void;
+    /** Shows a spinner instead of the clear icon. @default false */
+    loading?: boolean;
+    /** Shows a clear (X) button when there's a value. @default false */
+    clearable?: boolean;
+    /** Overrides the left icon. @default a search icon */
+    leftIcon?: ReactNode;
+    /** Overrides the clear button's icon. @default a close (X) icon */
+    clearIcon?: ReactNode;
+    /** Replaces the clear/spinner logic entirely with your own right-side
+     * content (matches the legacy: a custom right icon takes over from the
+     * built-in clear button). @default undefined */
+    rightIcon?: ReactNode;
+    /** Fires when the built-in clear button is clicked (clears `value` too).
+     * Does NOT fire for a custom `rightIcon` — wire that yourself. */
+    onClear?: () => void;
+}
+
+declare const SEGMENTED_CONTROL_SIZES: readonly ["small", "medium"];
+
+export declare function SegmentedControl({ items, value, defaultValue, onValueChange, size, optionWidth, disabled, renderOption, name, form, id, }: SegmentedControlProperties): JSX_2.Element;
+
+export declare interface SegmentedControlOptionItem {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+
+export declare type SegmentedControlOptionWidth = 'auto' | 'equal';
+
+export declare interface SegmentedControlProperties {
+    /**
+     * The available segments.
+     */
+    items: SegmentedControlOptionItem[];
+    /**
+     * The controlled selected value.
+     */
+    value?: string;
+    /**
+     * Initial selected value (uncontrolled mode).
+     */
+    defaultValue?: string;
+    /**
+     * Handler called when the selected segment changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Size variant.
+     * @default 'small'
+     */
+    size?: SegmentedControlSize;
+    /**
+     * With 'equal', every segment takes up the same width (flex-1). Own Mare
+     * prop, not present in PrimeVue.
+     * @default 'auto'
+     */
+    optionWidth?: SegmentedControlOptionWidth;
+    /**
+     * Disables the entire group.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Replaces a segment's default text content — e.g. to add a leading
+     * icon. Receives the raw item.
+     */
+    renderOption?: (item: SegmentedControlOptionItem) => ReactNode;
+    /**
+     * The name attribute for form submission.
+     */
+    name?: string;
+    /**
+     * ID of an associated form element.
+     */
+    form?: string;
+    /**
+     * Unique identifier for the group.
+     */
+    id?: string;
+}
+
+export declare type SegmentedControlSize = (typeof SEGMENTED_CONTROL_SIZES)[number];
+
+declare const SELECT_FIELD_SIZES: readonly ["small", "medium"];
+
+export declare const SelectField: ForwardRefExoticComponent<SelectFieldReactProperties & RefAttributes<HTMLDivElement>>;
+
+export declare interface SelectFieldProperties {
+    options: SelectOptionItem[];
+    placeholder?: string;
+    size?: SelectFieldSize;
+    disabled?: boolean;
+    invalid?: boolean;
+    clearable?: boolean;
+    label?: string;
+}
+
+declare interface SelectFieldReactProperties extends SelectFieldProperties {
+    value?: string | null;
+    onValueChange?: (value: string | null) => void;
+    leadingIcon?: ReactNode;
+    indicator?: ReactNode;
+    clearIcon?: ReactNode;
+    checkIcon?: ReactNode;
+    renderValue?: (item: SelectOptionItem) => ReactNode;
+    renderOption?: (option: SelectOptionItem) => ReactNode;
+}
+
+export declare type SelectFieldSize = (typeof SELECT_FIELD_SIZES)[number];
+
+export declare interface SelectOptionItem {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    /** Consumer-defined extras (icon, description…) resolved in the option slot. */
+    [key: string]: unknown;
+}
+
+export declare function Skeleton({ shape, width, height, size, ...native }: SkeletonProperties): JSX_2.Element;
+
+/** Shape of the placeholder — rectangle for text/blocks, circle for avatars. */
+declare const SKELETON_SHAPES: readonly ["rectangle", "circle"];
+
+export declare interface SkeletonProperties extends ForwardedNativeProperties_6 {
+    /** @default 'rectangle' */
+    shape?: SkeletonShape;
+    /**
+     * Width of the placeholder (number = px, or any CSS length string).
+     * @default '100%'
+     */
+    width?: string | number;
+    /**
+     * Height of the placeholder (number = px, or any CSS length string).
+     * @default '1rem'
+     */
+    height?: string | number;
+    /** Convenience for shape='circle': sets width and height to the same value. */
+    size?: string | number;
+}
+
+export declare type SkeletonShape = (typeof SKELETON_SHAPES)[number];
+
+export declare const Slider: ForwardRefExoticComponent<SliderProperties & RefAttributes<HTMLDivElement>>;
+
+declare const SLIDER_ORIENTATIONS: readonly ["horizontal", "vertical"];
+
+export declare type SliderOrientation = (typeof SLIDER_ORIENTATIONS)[number];
+
+export declare interface SliderProperties {
+    /**
+     * Controlled value — one number per thumb. A single slider is a
+     * 1-element array; a range is a 2-element array. `[start, end]`.
+     * @default [0]
+     */
+    value?: number[];
+    /** Change handler — receives the next value for every thumb. */
+    onValueChange?: (value: number[]) => void;
+    /** @default 0 */
+    min?: number;
+    /** @default 100 */
+    max?: number;
+    /** @default 1 */
+    step?: number;
+    /** @default 'horizontal' */
+    orientation?: SliderOrientation;
+    disabled?: boolean;
+    invalid?: boolean;
+    id?: string;
+    name?: string;
+}
+
+export declare function Snackbar({ controller, portalContainer }: SnackbarProperties): JSX_2.Element;
+
+declare const SNACKBAR_SEVERITIES: readonly ["contrast", "secondary", "error"];
+
+export declare interface SnackbarConfig {
+    /** @default 'bottom-center' */
+    placement?: SnackbarPlacement;
+}
+
+/** Returned by `createSnackbar()`. Mirrors the legacy `useToast()` service —
+ * mount ONE `<Snackbar controller={controller} />` per controller, then push
+ * messages into it from anywhere via `controller.show(...)`. */
+export declare interface SnackbarController {
+    /** Pushes a new message, returns its id. */
+    show(options: SnackbarShowOptions): string;
+    /** Dismisses one message by id, or every message in this controller if omitted. */
+    dismiss(id?: string): void;
+    update(id: string, options: Partial<SnackbarShowOptions>): void;
+}
+
+/** No 'center' — Ark's Toast placement is edge-anchored (stack management),
+ * unlike the legacy PrimeVue Toast which could float mid-viewport. Dropped:
+ * no real usage exercised it (SnackbarBasic/SnackbarImage both use
+ * corner/edge placements) and faking it would fight Ark's own --x/--y/--scale
+ * stacking math instead of using it. */
+export declare type SnackbarPlacement = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+
+export declare interface SnackbarProperties {
+    controller: SnackbarController;
+    /** Where the toast stack portals to. Override if your app scopes
+     * `data-theme` to a sub-tree rather than the document root. */
+    portalContainer?: RefObject<HTMLElement | null>;
+}
+
+export declare type SnackbarSeverity = (typeof SNACKBAR_SEVERITIES)[number];
+
+/** The payload for `controller.show()`/`.update()`. Framework-shaped on
+ * purpose (ReactNode `detail`/`leading`) — this is why it lives in the
+ * adapter, not in core alongside `SnackbarSeverity`/`SnackbarPlacement`. */
+export declare interface SnackbarShowOptions {
+    /** @default 'contrast' */
+    severity?: SnackbarSeverity;
+    detail: ReactNode;
+    /** Icon or image shown before the detail text. Mutually exclusive with
+     * nothing in particular — it's just whatever `ReactNode` you pass. */
+    leading?: ReactNode;
+    /** @default 3000, and never resolves lower than that. */
+    life?: number;
+    /** Progress bar filling over `life`, indicating time until auto-dismiss. @default false */
+    progressBar?: boolean;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+
+export declare interface StepItemData {
+    title: string;
+    description?: string;
+    /** Consumer-defined extras (icon, content…) resolved in the adapter. */
+    [key: string]: unknown;
+}
+
+export declare function Stepper({ items, step, defaultStep, onStepChange, onStepComplete, linear, orientation, indicatorVariant, isStepValid, isStepSkippable, }: StepperProperties): JSX_2.Element;
+
+declare const STEPPER_ORIENTATIONS: readonly ["horizontal", "vertical"];
+
+/** Visual weight of the current/completed indicator — mirrors the legacy
+ * Vue `completeItem` mode ('default': accent only on current; 'strong':
+ * accent on current AND completed alike). */
+export declare type StepperIndicatorVariant = 'default' | 'strong';
+
+export declare type StepperOrientation = (typeof STEPPER_ORIENTATIONS)[number];
+
+export declare interface StepperProperties {
+    items: StepItemData[];
+    /** Controlled current step index (0-based). Omit to let Ark manage it. */
+    step?: number;
+    defaultStep?: number;
+    onStepChange?: (step: number) => void;
+    onStepComplete?: () => void;
+    /** Requires steps to be completed in order — blocks jumping ahead. */
+    linear?: boolean;
+    orientation?: StepperOrientation;
+    /** 'default': completed steps stay weak-accent. 'strong': completed steps
+     * get the same full-accent treatment as the current one. */
+    indicatorVariant?: StepperIndicatorVariant;
+    isStepValid?: (index: number) => boolean;
+    isStepSkippable?: (index: number) => boolean;
+}
+
+export declare const Switch: ForwardRefExoticComponent<SwitchProperties & RefAttributes<HTMLInputElement>>;
+
+declare const SWITCH_SIZES: readonly ["small", "medium", "large"];
+
+export declare interface SwitchProperties {
+    /**
+     * The controlled checked state.
+     */
+    checked?: boolean;
+    /**
+     * Initial checked state (uncontrolled mode).
+     */
+    defaultChecked?: boolean;
+    /**
+     * Handler called when checked state changes.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * The switch label (also usable via children).
+     */
+    children?: ReactNode;
+    /**
+     * Size variant.
+     * @default 'small'
+     */
+    size?: SwitchSize;
+    /**
+     * Disables interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Marks the switch as invalid (red border).
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Makes the switch read-only.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the switch as required for form validation.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * The name attribute for form submission.
+     */
+    name?: string;
+    /**
+     * The value submitted with the form when checked.
+     * @default 'on'
+     */
+    value?: string;
+    /**
+     * Unique identifier for the switch.
+     */
+    id?: string;
+}
+
+export declare type SwitchSize = (typeof SWITCH_SIZES)[number];
+
+declare const TAB_SIZES: readonly ["small", "medium"];
+
+export declare interface TabItem {
+    /** Unique id; matches the panel. */
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+
+export declare function Tabs({ value, onValueChange, items, size, fluid, renderTab, renderPanel, }: TabsReactProperties): JSX_2.Element;
+
+export declare type TabSize = (typeof TAB_SIZES)[number];
+
+export declare interface TabsProperties {
+    items: TabItem[];
+    size?: TabSize;
+    fluid?: boolean;
+}
+
+declare interface TabsReactProperties extends TabsProperties {
+    value?: string;
+    onValueChange?: (value: string) => void;
+    renderTab?: (item: TabItem) => ReactNode;
+    renderPanel?: (item: TabItem) => ReactNode;
+}
+
+export declare function Tag({ severity, size, icon, children, }: TagProperties): JSX_2.Element;
+
+declare const TAG_CHIP_SEVERITIES: readonly ["default", "accent"];
+
+declare const TAG_CHIP_SIZES: readonly ["small", "medium"];
+
+declare const TAG_SEVERITIES: readonly ["accent", "accent-weak", "neutral", "positive", "warning", "danger"];
+
+declare const TAG_SIZES: readonly ["small", "medium", "large"];
+
+export declare function TagChip({ severity, size, disabled, icon, image, imageAlt, removable, onRemove, removeLabel, children, }: TagChipProperties): JSX_2.Element;
+
+export declare interface TagChipProperties {
+    /** @default 'default' */
+    severity?: TagChipSeverity;
+    /** @default 'small' */
+    size?: TagChipSize;
+    disabled?: boolean;
+    /** Leading content icon. */
+    icon?: ReactNode;
+    /** Avatar image URL, rendered before the label. */
+    image?: string;
+    imageAlt?: string;
+    /** Shows a remove button and fires onRemove when clicked. @default false */
+    removable?: boolean;
+    onRemove?: () => void;
+    /** Accessible label for the remove button. @default 'Remove' */
+    removeLabel?: string;
+    children?: ReactNode;
+}
+
+export declare type TagChipSeverity = (typeof TAG_CHIP_SEVERITIES)[number];
+
+export declare type TagChipSize = (typeof TAG_CHIP_SIZES)[number];
+
+export declare interface TagProperties {
+    /** @default 'accent' */
+    severity?: TagSeverity;
+    /** @default 'small' */
+    size?: TagSize;
+    icon?: ReactNode;
+    children?: ReactNode;
+}
+
+export declare type TagSeverity = (typeof TAG_SEVERITIES)[number];
+
+export declare type TagSize = (typeof TAG_SIZES)[number];
+
+export declare const Textarea: ForwardRefExoticComponent<TextareaProperties & RefAttributes<HTMLTextAreaElement>>;
+
+export declare interface TextareaProperties extends ForwardedNativeProperties_4 {
+    /** Valor controlado. Omítelo para dejar el campo uncontrolled (el DOM
+     * guarda el valor y `defaultValue` aplica). */
+    value?: string;
+    /** Controlled change handler — receives the next string value. */
+    onValueChange?: (value: string) => void;
+    size?: InputTextSize;
+    invalid?: boolean;
+    disabled?: boolean;
+    /** Grows the textarea to fit its content instead of showing a scrollbar. */
+    autoresize?: boolean;
+}
+
+export { }