se-design 1.0.3 → 1.0.8-5.dev.0

package/dist/components/Banner/index.d.ts

@@ -1,11 +1,15 @@
-import { FC } from 'react';
+import { default as React } from 'react';
 export interface BannerProps {
     bannerClassName?: string | '';
     bannerBgColor?: string | '';
     title: string | '';
+    titleTag?: 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     description: string | '';
+    customContent?: React.ReactNode;
     hasImage?: boolean | false;
     imagePosition?: 'left' | 'right' | '';
+    imageWidth?: string | '30%';
+    imageAlt?: string | '';
     bannerImage: string | '';
     hasCloseIcon?: boolean | false;
     closeIconName: string | '';
@@ -14,13 +18,22 @@ export interface BannerProps {
     hasButtonCta?: boolean | false;
     hasSecondaryButtonCta?: boolean | false;
     buttonType?: 'primary' | 'secondary' | 'link';
-    secondaryButtonType?: 'primary' | 'secondary' | 'link';
+    secondaryButtonType?: 'primary' | 'secondary' | 'ghost' | 'link';
     hasLinkCta?: boolean | false;
     ctaText: string | '';
     secondaryCtaText: string | '';
     onCtaClick: () => void | (() => {});
     onSecondaryCtaClick: () => void | (() => {});
-    imageWidth?: string | '30%';
+    /**
+     * Accessible name for primary CTA button (screen reader only, if different from visible label).
+     */
+    ctaAriaLabel?: string;
+    /**
+     * Accessible name for secondary CTA button (screen reader only, if different from visible label).
+     */
+    secondaryCtaAriaLabel?: string;
     automationId?: string;
+    titleId?: string;
+    disabledPrimaryButton?: boolean;
 }
-export declare const Banner: FC<BannerProps>;
+export declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/BottomSheet/index.d.ts

@@ -0,0 +1,14 @@
+import { default as React, FC } from 'react';
+export interface BottomSheetProps {
+    isOpen: boolean;
+    title?: string;
+    onClose: () => void;
+    showCloseIcon?: boolean;
+    showBackButton?: boolean;
+    onBack?: () => void;
+    children: React.ReactNode;
+    className?: string;
+    automationId?: string;
+    minHeight?: string;
+}
+export declare const BottomSheet: FC<BottomSheetProps>;

package/dist/components/BreadCrumbs/index.d.ts

@@ -2,12 +2,17 @@ import { default as React } from 'react';
 interface Crumb {
     id: string | number;
     label: string;
+    href?: string;
     automationId?: string;
 }
 interface BreadCrumbsProps {
     crumbs: Crumb[];
     onCrumbClick?: (crumb: Crumb) => void;
     className?: any;
+    /** Accessible name for the breadcrumb navigation landmark. Defaults to "Breadcrumb".  */
+    ariaLabel?: string;
+    /** Heading level to use when only a single crumb is provided. Defaults to 1. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
 }
 export declare const BreadCrumbs: React.FC<BreadCrumbsProps>;
 export {};

package/dist/components/Button/index.d.ts

@@ -1,10 +1,17 @@
-import { FC } from 'react';
+import { default as React } from 'react';
 import { IconProps } from '../Icon';
-export interface ButtonProps {
+/**
+ * Allows native button attributes (aria-*, data-*, etc.) to be passed through,
+ * but keeps our own onClick/disabled/type typing AND aria-label/aria-labelledby/aria-describedby.
+ * Note: We omit 'type' because we use it for button variant, not HTML type attribute.
+ * The HTML type is always set to 'button' internally.
+ */
+type NativeButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled' | 'type' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-pressed'>;
+export interface ButtonProps extends NativeButtonProps {
     /**
-     * Type of the button
+     * Type of the button.
      */
-    type?: 'primary' | 'secondary' | 'ghost' | 'link';
+    type?: 'primary' | 'secondary' | 'ghost' | 'link' | 'unstyled';
     /**
      * Color pallet of the button
      */
@@ -34,9 +41,21 @@ export interface ButtonProps {
      */
     loading?: boolean;
     /**
-     * Optional click handler
+     * Custom label shown (both visually and announced to screen readers) when loading is true.
+     * When omitted, the original label remains visible and SR announcement is "${label}, loading".
      */
-    onClick?: () => void;
+    loadingLabel?: string;
+    /**
+     * Optional click handler (called for pointer/mouse activations)
+     */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Optional keyboard activation handler
+     * Called when button is activated via keyboard (Enter/Space) or assistive technology virtual activation.
+     * Use when you want to have different behavior for keyboard and pointer activations.
+     * If not provided, onClick will be called for all activations.
+     */
+    onKeyboardActivate?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * Custom class name
      */
@@ -45,5 +64,30 @@ export interface ButtonProps {
      * Automation ID for testing
      */
     automationId?: string;
+    /**
+     * If true, button will be focused on mount.
+     * For programmatic focus control, use ref with .focus() instead.
+     */
+    autoFocus?: boolean;
+    /**
+     * Accessible name for the button. Use when there's no visible label (e.g., icon-only buttons).
+     * Prefer ariaLabelledBy when a visible label exists.
+     */
+    ariaLabel?: string;
+    /**
+     * ID(s) of element(s) that label this button.
+     * Preferred over ariaLabel when a visible label exists (keeps SR and visual text in sync).
+     */
+    ariaLabelledBy?: string;
+    /**
+     * ID(s) of element(s) that describe this button.
+     * Provides additional context announced after the accessible name.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * When true, sets aria-pressed for toggle/pressed state
+     */
+    isPressed?: boolean;
 }
-export declare const Button: FC<ButtonProps>;
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/Checkbox/index.d.ts

@@ -3,12 +3,47 @@ export interface CheckboxProps {
     className?: string;
     automationId?: string;
     defaultChecked?: boolean;
+    /**
+     * Controlled checked value. When provided, the checkbox is controlled by the parent
+     * and its visual state always reflects this prop. Use `onChange` to update the parent state.
+     */
+    checked?: boolean;
     onChange?: (checked: boolean, e: React.ChangeEvent<HTMLInputElement>) => void;
     disabled?: boolean;
     checkMarkType?: 'tick' | 'minus-checkbox' | '';
     label?: string;
     disabledLabel?: string;
     containerAutomationId?: string;
+    /**
+     * Explicit accessible name for the checkbox.
+     * Used as fallback when ariaLabelledBy is not provided and no internal label exists.
+     */
     ariaLabel?: string;
+    /**
+     * ID(s) of element(s) that label this checkbox (for screen reader association).
+     * Typically used when checkbox is part of a larger labelled context.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * ID(s) of element(s) that describe this checkbox (provides additional context).
+     * Often used for help text or instructions.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * ID of the element controlled by this checkbox (e.g. an expandable region).
+     */
+    ariaControls?: string;
+    /**
+     * Override the default tabIndex. Pass -1 when the checkbox is used as a
+     * visual-only indicator inside a composite widget (e.g. listbox option).
+     */
+    tabIndex?: number;
+    /**
+     * When true, sets aria-hidden="true" on the checkbox container so the
+     * checkbox role and state are hidden from assistive technology. Use when
+     * the checkbox is purely visual (e.g. inside a role="option" that already
+     * conveys selection state via aria-selected).
+     */
+    ariaHidden?: boolean;
 }
 export declare const Checkbox: FC<CheckboxProps>;

package/dist/components/CustomAccordion/index.d.ts

@@ -6,11 +6,17 @@ export interface CustomAccordionProps {
     renderAccordionSrcElement: (props: {
         isOpen: boolean;
     }) => React.ReactNode;
+    renderControls?: () => React.ReactNode;
     defaultOpen?: boolean;
+    expanded?: boolean;
+    onChange?: (isOpen: boolean) => void;
     className?: string;
     arrowPosition?: 'left' | 'right';
     contentClassName?: string;
     disabled?: boolean;
     automationId?: string;
+    id?: string;
+    ariaLabel?: string;
+    titleTag?: string;
 }
 export declare const CustomAccordion: FC<CustomAccordionProps>;

package/dist/components/CustomModal/index.d.ts

@@ -1,12 +1,67 @@
-import { default as React, FC } from 'react';
+import { default as React, FC, MutableRefObject, RefObject } from 'react';
 export interface CustomModalProps {
     onSubmit?: () => void;
     onClose?: () => void;
+    onModalClick?: () => void;
     renderModalContent: () => React.ReactNode;
     isOpen: boolean;
     width?: string;
     className?: string;
     contentClassName?: string;
     automationId?: string;
+    /**
+     * ID of a visible heading element rendered inside `renderModalContent`.
+     * Add `id={ariaLabelledBy}` to that element to complete the association.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * aria-label for modals without a visible title heading.
+     * Ignored when `ariaLabelledBy` is provided.
+     */
+    ariaLabel?: string;
+    /**
+     * Additional container refs for elements outside the modal DOM that should
+     * remain focusable while the focus trap is active (e.g. a header bar above
+     * a full-page overlay). Forwarded to useFocusTrap's portalContainerRefs.
+     */
+    portalContainerRefs?: MutableRefObject<RefObject<HTMLElement | null>[]>;
 }
+/**
+ * Modal container with built-in focus trap, Escape dismissal, and dialog semantics.
+ *
+ * Labelling (pick one):
+ * - `ariaLabelledBy` — ID of a heading rendered inside `renderModalContent`
+ * - `ariaLabel` — for modals with no visible title
+ *
+ * Escape dismissal requires `onClose` to be passed.
+ *
+ * ---
+ * ## Header + close button pattern (zoom-safe)
+ *
+ * If your modal has a title and a close button, use a flex row — NOT absolute positioning.
+ * Absolute positioning causes the close icon to overlap the title at 200%/400% zoom.
+ *
+ * ✅ Correct:
+ * ```tsx
+ * renderModalContent={() => (
+ *   <>
+ *     <div className="modal-header">   // display:flex; align-items:flex-start; justify-content:space-between; gap:12px
+ *       <h2 className="modal-title">Title</h2>   // flex:1 so it wraps without touching the icon
+ *       <Icon name="close" onClick={onClose} ariaLabel="Close" className="shrink-0" />
+ *     </div>
+ *     <div className="modal-body">...content...</div>
+ *   </>
+ * )}
+ * ```
+ *
+ * ❌ Avoid:
+ * ```tsx
+ * renderModalContent={() => (
+ *   <div style={{ position: 'relative' }}>
+ *     <h2>Title</h2>
+ *     <Icon name="close" style={{ position: 'absolute', top: 8, right: 8 }} />
+ *   </div>
+ * )}
+ * ```
+ */
 export declare const CustomModal: FC<CustomModalProps>;

package/dist/components/DatePicker/index.d.ts

@@ -18,5 +18,12 @@ export interface DatePickerProps {
     showQuickActions?: boolean;
     className?: string;
     automationId?: string;
+    showHeader?: boolean;
+    showSingleMonth?: boolean;
+    labels?: {
+        title?: string;
+        clear?: string;
+        apply?: string;
+    };
 }
 export declare const DatePicker: React.FC<DatePickerProps>;

package/dist/components/DatePicker/useDatePickerA11y.d.ts

@@ -0,0 +1,47 @@
+import { default as React } from 'react';
+import { RovingItemProps, RovingContainerProps, AccessibleNameInput } from '../../utils/a11y/useRovingFocus';
+import { DateRange } from './index';
+export declare const getCellAriaLabel: (date: Date, isStart: boolean, isEnd: boolean, isSameStartEnd: boolean, singleDateSelection: boolean, inRange?: boolean) => string;
+export declare const formatDateId: (d: Date) => string;
+interface UseDatePickerA11yOptions {
+    leftMonth: Date;
+    rightMonth: Date;
+    showSingleMonth: boolean;
+    selectedRange: DateRange;
+    onMonthChange: (date: Date, isLeft: boolean) => void;
+}
+interface CellKeyDownOptions {
+    isLeftCalendar: boolean;
+    isDateDisabled: (date: Date) => boolean;
+    handleDateClick: (date: Date) => void;
+}
+interface GridCellItemInput {
+    cellId: string;
+    cellDate: Date;
+    disabled: boolean;
+    ariaLabel: string;
+    ariaCurrent: 'date' | undefined;
+    ariaDisabled: true | undefined;
+}
+export interface GridCellElementProps {
+    id: string;
+    ref: (el: HTMLElement | null) => void;
+    tabIndex: number;
+    onFocus: () => void;
+    'aria-label': string;
+    'aria-current': 'date' | undefined;
+    'aria-disabled': true | undefined;
+    onKeyDown: (e: React.KeyboardEvent) => void;
+    onClick: () => void;
+}
+interface UseDatePickerA11yReturn {
+    getGridCellProps: (options: CellKeyDownOptions) => (item: GridCellItemInput) => GridCellElementProps;
+    getLeftRovingItemProps: (id: string) => RovingItemProps;
+    getRightRovingItemProps: (id: string) => RovingItemProps;
+    getLeftContainerProps: (nameInput?: AccessibleNameInput) => RovingContainerProps;
+    getRightContainerProps: (nameInput?: AccessibleNameInput) => RovingContainerProps;
+    focusLeftItem: (id: string) => void;
+    focusRightItem: (id: string) => void;
+}
+export declare function useDatePickerA11y({ leftMonth, rightMonth, showSingleMonth, selectedRange, onMonthChange }: UseDatePickerA11yOptions): UseDatePickerA11yReturn;
+export {};

package/dist/components/Dropdown/index.d.ts

@@ -4,7 +4,9 @@ type DropdownValue = {
 };
 type DropdownProps = {
     label?: string;
+    firstOptionAsHeading?: boolean;
     ariaLabel?: string;
+    ariaLabelledBy?: string;
     type: 'select' | 'multi-select';
     dropDownOptions?: DropdownValue[];
     defaultText?: string;
@@ -12,6 +14,7 @@ type DropdownProps = {
     optionsUniqueBy?: string;
     displaySelected?: boolean;
     defaultSelectedValue?: DropdownValue | DropdownValue[];
+    customSelectedValue?: string;
     onOptionClick?: (selectedValue: DropdownValue) => void;
     style?: React.CSSProperties;
     renderOptionChip?: (option: DropdownValue, srcOption: boolean) => React.ReactNode;
@@ -22,14 +25,34 @@ type DropdownProps = {
     hasError?: boolean;
     errorMessage?: string;
     onApply?: (selectedValue: DropdownValue[]) => void;
+    onClear?: () => void;
     customDropdownContent?: () => React.ReactNode;
     isBorderless?: boolean;
     dropDownSrcAutomationId?: string;
     dropDownSelectAutomationId?: string;
     dropDownContentAutomationId?: string;
     shouldShowSearch?: boolean;
+    showSearchIcon?: boolean;
     searchPlaceholder?: string;
     searchResultEmptyMessage?: string;
+    /** Controlled selection — when provided, Dropdown won't manage internal selected state */
+    selectedValue?: DropdownValue | DropdownValue[];
+    /** Controlled open state — when provided, Dropdown won't manage internal open/close */
+    isOpen?: boolean;
+    /** Callback when open state changes (fires in both controlled and uncontrolled modes) */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Custom trigger element — replaces the default bordered div + chevron */
+    renderSrcElement?: (props: {
+        isOpen: boolean;
+        selectedValue: DropdownValue[];
+    }) => React.ReactNode;
+    /** Render the dropdown panel in a portal (document.body) to escape overflow:hidden containers */
+    isWithPortal?: boolean;
+    /** Optional ref that will be populated with the Popover wrapper element on mount.
+     *  Use with setFocusAnchor() to return focus to the dropdown trigger after a modal closes. */
+    popoverElementRef?: React.RefObject<HTMLElement | null>;
+    /** Inline styles forwarded to the Popover content (portal or inline). Useful for min-width overrides. */
+    popoverContentStyleProperty?: React.CSSProperties;
 };
 export declare const Dropdown: FC<DropdownProps>;
 export {};

package/dist/components/DropdownWithInputTags/index.d.ts

@@ -14,14 +14,24 @@ export interface DropdownWithInputTagsProps {
     placeholder?: string;
     className?: string;
     options?: DropdownOption[];
-    renderOption?: (option: DropdownOption, onSelect: (option: DropdownOption) => void) => React.ReactNode;
-    onSearch?: (searchTerm: string) => void;
+    renderOption?: (option: DropdownOption, props: {
+        id: string;
+        role: 'option';
+        'aria-selected': boolean;
+        onMouseEnter: () => void;
+        className: string;
+    }, onSelect: (option: DropdownOption) => void) => React.ReactNode;
     label?: string;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
     automationId?: string;
     noOptionsMessage?: string;
     allowCustomTags?: boolean;
     disabled?: boolean;
     type?: 'select' | 'multi-select' | 'multi-select-without-cta';
     showInput?: boolean;
+    displayTagBy?: 'label' | 'value';
+    isWithPortal?: boolean;
 }
 export declare const DropdownWithInputTags: React.ForwardRefExoticComponent<DropdownWithInputTagsProps & React.RefAttributes<DropdownWithInputTagsHandle>>;

package/dist/components/GuidedTour/index.d.ts

@@ -0,0 +1,27 @@
+import { FC } from 'react';
+export type TooltipArrowPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export interface GuidedTourStep {
+    targetElementSelector: string;
+    iframeSelector?: string;
+    content: string;
+    tooltipPosition?: 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center' | 'left-top' | 'left-center' | 'left-bottom' | 'right-top' | 'right-center' | 'right-bottom';
+    tooltipPositionOffset?: {
+        horizontal?: number;
+        vertical?: number;
+    };
+    isOptionalStep?: boolean;
+    automationId?: string;
+    waitForElement?: boolean;
+    zIndex?: number;
+    isDropdownStep?: boolean;
+}
+export interface GuidedTourProps {
+    steps: GuidedTourStep[];
+    screenBaseElementSelector?: string;
+    onClose: () => void;
+    tooltipBackgroundColor?: string;
+    tooltipTextColor?: string;
+    maxWidth?: number;
+    automationId?: string;
+}
+export declare const GuidedTour: FC<GuidedTourProps>;

package/dist/components/Header/index.d.ts

@@ -1,9 +1,10 @@
-import { default as React, FC } from 'react';
+import { default as React } from 'react';
 export interface HeaderProps {
     leftContainer?: React.ReactNode;
     centerContainer?: React.ReactNode;
     rightContainer?: React.ReactNode;
     type?: string;
     className?: string;
+    id?: string;
 }
-export declare const Header: FC<HeaderProps>;
+export declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;

package/dist/components/Icon/index.d.ts

@@ -1,13 +1,54 @@
-import { FC } from 'react';
+import { default as React } from 'react';
+export type RotationTypes = '0' | '45' | '90' | '135' | '180' | '225' | '270' | '315';
 export type IconProps = {
     name: string;
+    id?: string;
     className?: string;
-    onClick?: () => void;
+    onClick?: (e?: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Accessible name when Icon is interactive (onClick is provided).
+     * If omitted, we fall back to `name` and warn in development.
+     */
+    ariaLabel?: string;
+    /**
+     * ID(s) of visible element(s) that label this Icon when interactive.
+     * Preferred over ariaLabel when a visible label exists (keeps SR and visual text in sync).
+     */
+    ariaLabelledBy?: string;
+    /**
+     * ID(s) of element(s) that describe this Icon when interactive (additional context).
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Toggle state when Icon is used as a button (e.g., show/hide sidebar).
+     * Only applies when `onClick` is provided (interactive icon).
+     */
+    ariaPressed?: boolean;
+    /**
+     * Expansion state when Icon controls a collapsible region/panel.
+     * Only applies when `onClick` is provided (interactive icon).
+     */
+    ariaExpanded?: boolean;
+    /**
+     * ID of the element controlled by this Icon (for aria-controls).
+     * Only applies when `onClick` is provided (interactive icon).
+     */
+    ariaControls?: string;
     fill?: string;
     stroke?: string;
-    rotation?: '0' | '90' | '180' | '270';
+    rotation?: RotationTypes;
     size?: number;
     shouldStopPropagation?: boolean;
     automationId?: string;
+    /**
+     * Disables the icon interaction while keeping it visible to AT with aria-disabled="true".
+     * Only applies when `onClick` is provided (interactive icon).
+     */
+    disabled?: boolean;
+    /**
+     * Native HTML title attribute — renders as a browser tooltip on hover.
+     * For mouse users only; does not replace ariaLabel for screen readers.
+     */
+    htmlTitle?: string;
 };
-export declare const Icon: FC<IconProps>;
+export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/InfoTooltip/index.d.ts

@@ -3,6 +3,19 @@ export interface InfoTooltipProps {
     label: string;
     children: React.ReactNode;
     iconColor?: string;
+    /**
+     * Background color shown on hover. Defaults to var(--color-blue-200).
+     */
+    hoverBackgroundColor?: string;
     isDisabled?: boolean;
+    /**
+     * Remove padding from tooltip wrapper (useful for precise alignment)
+     */
+    noPadding?: boolean;
+    /**
+     * When true, skips wiring aria-describedby between the trigger and tooltip content.
+     * Use when the tooltip label duplicates the trigger's accessible name — avoids redundant announcements.
+     */
+    noDescribedBy?: boolean;
 }
-export declare const InfoTooltip: ({ label, children, iconColor, isDisabled }: InfoTooltipProps) => React.JSX.Element;
+export declare const InfoTooltip: ({ label, children, iconColor, hoverBackgroundColor, isDisabled, noPadding, noDescribedBy }: InfoTooltipProps) => React.JSX.Element;

package/dist/components/Input/index.d.ts

@@ -1,11 +1,15 @@
 import { default as React } from 'react';
-export interface InputProps {
+type InputTag = 'input' | 'textarea';
+type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'disabled' | 'maxLength' | 'id' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'children'>;
+type NativeTextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange' | 'disabled' | 'maxLength' | 'id' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'children'>;
+type CommonInputProps = {
     value: string;
     disabled?: boolean;
-    maxLength?: number | undefined;
+    maxLength?: number;
     onChange: (value: string) => void;
-    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
-    tag?: string;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    tag?: InputTag;
     error?: boolean;
     errorMessage?: string;
     label?: string;
@@ -13,5 +17,33 @@ export interface InputProps {
     style?: React.CSSProperties;
     inputStyle?: React.CSSProperties;
     automationId?: string;
-}
-export declare function Input({ value, onChange, onBlur, disabled, maxLength, tag, error, errorMessage, label, placeholder, style, inputStyle, automationId }: InputProps): React.JSX.Element;
+    id?: string;
+    /**
+     * Accessible name when no visible label exists (icon-only / placeholder-only inputs).
+     * Prefer ariaLabelledBy when a visible label exists.
+     */
+    ariaLabel?: string;
+    /**
+     * ID(s) of visible element(s) that label this input.
+     * Useful for external labels outside the Input component.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * ID(s) of element(s) that describe this input (hints, helper text, etc.).
+     * Will be merged with internal error/counter IDs.
+     */
+    ariaDescribedBy?: string;
+};
+/**
+ * Input component with built-in label, error, and counter support.
+ *
+ * Native HTML input/textarea attributes are passed through, including:
+ * - `required`, `readOnly`, `autoFocus`, `name`, `type`
+ * - `autoComplete`, `inputMode`, `enterKeyHint`, `pattern`
+ * - Note: accessible name/description is provided via ariaLabel/ariaLabelledBy/ariaDescribedBy props.
+ * - `min`, `max`, `step` (for number inputs)
+ * - `onKeyDown`, `onPaste`, and other event handlers
+ */
+export type InputProps = CommonInputProps & (NativeInputProps | NativeTextareaProps);
+export declare function Input({ value, onChange, onBlur, onFocus, disabled, maxLength, tag, error, errorMessage, label, placeholder, style, inputStyle, automationId, id, ariaLabel, ariaLabelledBy, ariaDescribedBy, ...nativeProps }: InputProps): React.JSX.Element;
+export {};