@aurora-ds/components 0.24.9 → 0.25.1

package/README.md

@@ -208,13 +208,41 @@ The `defaultTheme` includes these token categories:
 
 ## 🧩 Available Components
 
-**Buttons:** Button, IconButton  
-**Layout:** Box, Card, Stack, Grid, Page, PageSection, Separator  
-**Typography:** Text  
-**Forms:** Input, TextArea, Select, DatePicker, Form, FilePicker, ImagePicker  
-**Data Display:** Status, Avatar, AvatarGroup, Icon  
-**Navigation:** Breadcrumb, Tabs, DrawerItem, Menu, Pagination  
-**Feedback:** Alert, Accordion
+| Category | Components |
+|----------|-----------|
+| **Actions** | Button, IconButton, ButtonToggle, ButtonToggleGroup |
+| **Layout** | Box, Card, Stack, Grid, Page, PageSection, Separator |
+| **Foundation** | Text, Icon |
+| **Forms** | Input, TextArea, Select, DatePicker, Form, FilePicker, ImagePicker |
+| **Data Display** | Status, Avatar, AvatarGroup, Skeleton |
+| **Navigation** | Breadcrumb, Tabs, DrawerItem, Pagination |
+| **Overlay** | Alert, Accordion, Menu, Modal |
+
+## ♿ Accessibility
+
+All components are built with accessibility in mind:
+
+- **Button / IconButton** — `aria-label`, `aria-pressed` (toggle), `aria-busy` (loading), `aria-expanded`, `aria-controls`
+- **Input / TextArea / Select** — `aria-required`, `aria-invalid`, `aria-errormessage` (auto-linked error messages), `id` for label associations
+- **Avatar** — `role="button"` + keyboard support (Enter/Space) when `onClick` is provided
+- **Alert** — `role="alert"`, dynamic `aria-live` (`assertive` for errors, `polite` for others), `aria-atomic`
+- **Modal** — `role="dialog"`, `aria-modal`, `aria-labelledby` (linked to title), full focus trap, focus restoration on close
+- **Breadcrumb** — `role="navigation"`, `aria-label="breadcrumb"`
+- **Text** — `id` prop for `aria-labelledby` / `aria-describedby` references
+
+## 📁 Component Self-Contained Structure
+
+Each component folder contains all its utils locally, making copy-paste to another project straightforward:
+
+```
+src/components/<category>/<component>/
+├── utils/                  # Component-specific utilities (co-located)
+│   └── myUtil.utils.ts
+├── Component.tsx
+├── Component.props.ts
+├── Component.styles.ts
+└── index.ts
+```
 
 ## License
 

package/dist/cjs/components/actions/button/Button.d.ts

@@ -7,6 +7,14 @@ import { ButtonProps } from '@components/actions/button/Button.props.ts';
  * - `contained`: Solid background button (default)
  * - `outlined`: Border only button
  * - `text`: Text only button without background
+ * - `destructive`: Danger/delete action button
+ *
+ * **Accessibility:**
+ * - Use `ariaLabel` when the button has no visible text or the label is unclear
+ * - Use `ariaPressed` for toggle buttons to indicate their state
+ * - Use `ariaBusy` when the button triggers an async action
+ * - Use `ariaExpanded` when the button controls a collapsible section
+ * - Use `ariaControls` to reference the controlled element
  */
 declare const Button: FC<ButtonProps>;
 export default Button;

package/dist/cjs/components/actions/button/Button.props.d.ts

@@ -38,6 +38,16 @@ export type ButtonProps = {
     role?: string;
     /** Tab index for keyboard navigation */
     tabIndex?: number;
+    /** Whether the button is in a pressed/active state (for toggle buttons) */
+    ariaPressed?: boolean;
+    /** Whether the button is in a loading/busy state */
+    ariaBusy?: boolean;
+    /** Whether the button controls an expandable section */
+    ariaExpanded?: boolean;
+    /** Whether the button has a popup (menu, dialog, etc.) */
+    ariaHasPopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+    /** ID of the element controlled by this button */
+    ariaControls?: string;
 };
 export type ButtonStyleParams = {
     variant?: ButtonVariants;

package/dist/cjs/components/actions/button/utils/getButtonSizeStyles.utils.d.ts

@@ -0,0 +1,12 @@
+import { ThemeContract } from '@/interfaces';
+import { IconButtonSizes } from '@interfaces/button.types.ts';
+type ButtonSizeConfig = {
+    height: number;
+    padding: {
+        vertical: keyof ThemeContract['spacing'];
+        horizontal: keyof ThemeContract['spacing'];
+    };
+    fontSize: keyof ThemeContract['fontSize'];
+};
+export declare const getButtonSizeStyles: () => Record<IconButtonSizes, ButtonSizeConfig>;
+export {};

package/dist/cjs/components/actions/button/utils/getButtonVariantStyles.utils.d.ts

@@ -0,0 +1,7 @@
+import { Theme } from '@aurora-ds/theme';
+import { ButtonVariants, ButtonVariantStyle } from '@interfaces/button.types.ts';
+/**
+ * Get button variant styles based on the theme
+ * @param theme
+ */
+export declare const getButtonVariantStyles: (theme: Theme) => Record<ButtonVariants, ButtonVariantStyle>;

package/dist/cjs/components/actions/icon-button/IconButton.d.ts

@@ -1,4 +1,17 @@
 import { FC } from 'react';
 import { IconButtonProps } from '@components/actions/icon-button/IconButton.props.ts';
+/**
+ * IconButton component
+ *
+ * A button that displays only an icon without text.
+ *
+ * **⚠️ Accessibility:** Always provide an `ariaLabel` for icon-only buttons
+ * so screen readers can describe the action.
+ *
+ * @example
+ * ```tsx
+ * <IconButton icon={<CloseIcon />} ariaLabel="Close dialog" onClick={onClose} />
+ * ```
+ */
 declare const IconButton: FC<IconButtonProps>;
 export default IconButton;

package/dist/cjs/components/actions/icon-button/IconButton.props.d.ts

@@ -23,7 +23,7 @@ export type IconButtonProps = {
     activeBackgroundColor?: keyof ThemeContract['colors'];
     /** Size of the icon button */
     size?: IconButtonSizes;
-    /** Accessibility label for screen readers */
+    /** Accessibility label for screen readers (strongly recommended for icon-only buttons) */
     ariaLabel?: string;
     /** ID of element that labels this button */
     ariaLabelledBy?: string;
@@ -33,6 +33,16 @@ export type IconButtonProps = {
     role?: string;
     /** Tab index for keyboard navigation */
     tabIndex?: number;
+    /** Whether the button is in a pressed/active state (for toggle buttons) */
+    ariaPressed?: boolean;
+    /** Whether the button is in a loading/busy state */
+    ariaBusy?: boolean;
+    /** Whether the button controls an expandable section */
+    ariaExpanded?: boolean;
+    /** Whether the button has a popup (menu, dialog, etc.) */
+    ariaHasPopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+    /** ID of the element controlled by this button */
+    ariaControls?: string;
 };
 export type IconButtonStyleParams = {
     variant?: IconButtonVariants;

package/dist/cjs/components/actions/icon-button/utils/getIconButtonSizeStyles.utils.d.ts

@@ -0,0 +1,9 @@
+import { ThemeContract } from '@/interfaces';
+import { IconButtonSizes } from '@interfaces/button.types.ts';
+type IconButtonSizeConfig = {
+    size: number;
+    padding: keyof ThemeContract['spacing'];
+    iconSize: keyof ThemeContract['fontSize'];
+};
+export declare const getIconButtonSizeStyles: () => Record<IconButtonSizes, IconButtonSizeConfig>;
+export {};

package/dist/cjs/components/data-display/avatar/Avatar.d.ts

@@ -3,7 +3,22 @@ import { AvatarProps } from '@components/data-display/avatar/Avatar.props.ts';
 /**
  * Avatar component
  *
- * Displays a user's avatar with optional image or fallback text.
+ * Displays a user's avatar with an optional image or fallback initials.
+ *
+ * **Accessibility:**
+ * - When `onClick` is provided, the avatar becomes a focusable button
+ *   with keyboard support (Enter/Space activates the click)
+ * - Provide `label` or `ariaLabel` for screen readers
+ * - For decorative avatars, both can be omitted
+ *
+ * @example
+ * ```tsx
+ * // Static avatar with image
+ * <Avatar image="/user.jpg" label="Jane Doe" />
+ *
+ * // Interactive avatar (clickable)
+ * <Avatar label="JD" onClick={() => openProfile()} ariaLabel="Open Jane's profile" />
+ * ```
  */
 declare const Avatar: FC<AvatarProps>;
 export default Avatar;

package/dist/cjs/components/data-display/avatar/Avatar.props.d.ts

@@ -1,12 +1,18 @@
-import { MouseEvent } from 'react';
+import { KeyboardEvent, MouseEvent } from 'react';
 import { AvatarSize } from '@interfaces/avatar.types.ts';
 export type AvatarProps = {
     /** Image source URL */
     image?: string;
-    /** Fallback text to display when no image */
+    /**
+     * Fallback text to display when no image (initials, name, etc.)
+     * Also used as the image `alt` text for accessibility.
+     */
     label?: string;
-    /** Click handler */
-    onClick?: (e: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Click handler. When provided, the avatar becomes interactive
+     * with `role="button"` and keyboard support (Enter/Space).
+     */
+    onClick?: (e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>) => void;
     /** Size of the avatar */
     size?: AvatarSize;
     /** Text color for the label */
@@ -15,6 +21,13 @@ export type AvatarProps = {
     borderColor?: string;
     /** Background color */
     backgroundColor?: string;
+    /**
+     * Accessibility label for screen readers.
+     * Defaults to `label` prop when not provided.
+     */
+    ariaLabel?: string;
+    /** Tab index for keyboard navigation (auto-set when onClick is provided) */
+    tabIndex?: number;
 };
 export type AvatarStyleParams = {
     hasImage?: boolean;
@@ -22,4 +35,5 @@ export type AvatarStyleParams = {
     color?: string;
     borderColor?: string;
     backgroundColor?: string;
+    clickable?: boolean;
 };

package/dist/cjs/components/data-display/avatar/utils/getAvatarSizes.utils.d.ts

@@ -0,0 +1,11 @@
+import { ThemeContract } from '@/interfaces';
+import { AvatarSize } from '@interfaces/avatar.types.ts';
+/**
+ * Get avatar sizes configuration based on the theme
+ * @param theme
+ */
+export declare const getAvatarSizes: (theme: Theme) => Record<AvatarSize, {
+    size: number;
+    fontSize: keyof ThemeContract["fontSize"];
+    overlap: string;
+}>;

package/dist/cjs/components/data-display/chip/utils/getChipColorStyles.utils.d.ts

@@ -0,0 +1,12 @@
+import { Theme } from '@theme/theme.types.ts';
+export type ChipColor = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+export type ChipVariant = 'filled' | 'outlined';
+export type ChipColorResult = {
+    backgroundColor: string;
+    color: string;
+    borderColor: string;
+};
+/**
+ * Returns background/text/border colors for a Chip based on its color, variant, and disabled state.
+ */
+export declare const getChipColorStyles: (theme: Theme, color: ChipColor, variant: ChipVariant, disabled: boolean) => ChipColorResult;

package/dist/cjs/components/data-display/chip/utils/getChipContentSize.utils.d.ts

@@ -0,0 +1,6 @@
+import { ChipSize } from '@components/data-display/chip/utils/getChipSizeStyles.utils';
+/**
+ * Returns the icon/font size key for a Chip based on its size.
+ * Maps: xs → 'xs', sm → 'sm', md → 'sm', lg → 'md'
+ */
+export declare const getChipContentSize: (size: ChipSize) => "xs" | "sm" | "md";

package/dist/cjs/components/data-display/chip/utils/getChipSizeStyles.utils.d.ts

@@ -0,0 +1,10 @@
+import { Theme } from '@theme/theme.types.ts';
+export type ChipSize = 'xs' | 'sm' | 'md' | 'lg';
+export type ChipSizeResult = {
+    padding: string;
+    fontSize: string;
+};
+/**
+ * Returns padding and fontSize styles for a Chip based on its size and whether it is icon-only.
+ */
+export declare const getChipSizeStyles: (theme: Theme, size: ChipSize, isIconOnly: boolean) => ChipSizeResult;

package/dist/cjs/components/data-display/status/utils/getStatusColorStyles.utils.d.ts

@@ -0,0 +1,7 @@
+import { StatusColor, ThemeContract } from '@/interfaces';
+import { StatusStyleParams } from '@components/data-display/status/Status.props.ts';
+export declare const getStatusColorStyles: (theme: ThemeContract, color: StatusStyleParams["color"], variant: StatusStyleParams["variant"], disabled: StatusStyleParams["disabled"]) => {
+    backgroundColor: string;
+    borderColor: string;
+};
+export declare const getStatusTextColor: (color: StatusColor, disabled: boolean) => keyof ThemeContract["colors"];

package/dist/cjs/components/data-display/status/utils/getStatusContentSize.utils.d.ts

@@ -0,0 +1,8 @@
+import { StatusStyleParams } from '@components/data-display/status/Status.props.ts';
+import { ThemeFontSizeContract } from '@interfaces/theme.contracts';
+/**
+ * Get status content size based on the status size
+ * @param size
+ * @constructor
+ */
+export declare const getStatusContentSize: (size: StatusStyleParams["size"]) => keyof ThemeFontSizeContract;

package/dist/cjs/components/data-display/status/utils/getStatusSizeStyles.utils.d.ts

@@ -0,0 +1,12 @@
+import { ThemeContract } from '@/interfaces';
+import { StatusStyleParams } from '@components/data-display/status/Status.props.ts';
+/**
+ * Get status size styles based on the theme, size and icon-only state
+ * @param theme - Theme object
+ * @param size - Status size
+ * @param isIconOnly - Whether the status has only an icon (no label)
+ */
+export declare const getStatusSizeStyles: (theme: ThemeContract, size: StatusStyleParams["size"], isIconOnly: StatusStyleParams["isIconOnly"]) => {
+    padding: string;
+    fontSize: string;
+};

package/dist/cjs/components/forms/date-picker/calendar/calendar-grid/CalendarGrid.props.d.ts

@@ -1,4 +1,4 @@
-import { CalendarDay } from '@utils/ui/components/date-picker/datePicker.utils.ts';
+import { CalendarDay } from '@components/forms/date-picker/utils/datePicker.utils';
 export type CalendarView = 'days' | 'months' | 'years';
 export type CalendarGridProps = {
     /** Current view mode */

package/dist/cjs/components/forms/date-picker/utils/datePicker.utils.d.ts

@@ -0,0 +1,13 @@
+import { DateFormat } from '@components/forms/date-picker/DatePicker.props';
+export declare const formatDate: (date: Date | null, format?: DateFormat) => string;
+export declare const parseDate: (value: string, format?: DateFormat) => Date | null;
+export declare const getDateSeparator: (format: DateFormat) => string;
+export declare const formatInputValue: (value: string, format: DateFormat) => string;
+export interface CalendarDay {
+    date: Date;
+    isCurrentMonth: boolean;
+    isSelected: boolean;
+    isToday: boolean;
+    isDisabled: boolean;
+}
+export declare const getCalendarDays: (year: number, month: number, selectedDate?: Date | null, minDate?: Date, maxDate?: Date) => CalendarDay[];

package/dist/cjs/components/forms/input/Input.props.d.ts

@@ -20,7 +20,7 @@ export type InputProps = {
     disabled?: boolean;
     /** Input type */
     type?: 'text' | 'password' | 'email' | 'number';
-    /** Accessibility label */
+    /** Accessibility label (defaults to `label` if not provided) */
     ariaLabel?: string;
     /** Icon to display before the input */
     startIcon?: ReactNode;
@@ -28,6 +28,13 @@ export type InputProps = {
     endIcon?: ReactNode;
     /** Custom width for the input */
     width?: CSSProperties['width'];
+    /**
+     * Error message to display below the input.
+     * When provided, `aria-invalid="true"` and `aria-errormessage` are set automatically.
+     */
+    error?: string;
+    /** Unique HTML id for the input element (required when using `error`) */
+    id?: string;
 };
 export type InputStyleParams = {
     disabled?: boolean;
@@ -35,4 +42,5 @@ export type InputStyleParams = {
     hasEndIcon?: boolean;
     hasPasswordToggle?: boolean;
     width?: CSSProperties['width'];
+    hasError?: boolean;
 };

package/dist/cjs/components/forms/select/Select.d.ts

@@ -2,6 +2,24 @@ import { FC } from 'react';
 import { SelectProps } from '@components/forms/select/Select.props';
 /**
  * Select component that uses Menu for dropdown
+ *
+ * **Accessibility:**
+ * - Uses `role="combobox"` with `aria-expanded` and `aria-haspopup="listbox"`
+ * - Keyboard support: Enter/Space opens, Escape closes
+ * - When `error` is provided, `aria-invalid="true"` and `aria-errormessage` are set
+ * - `mandatory` adds `aria-required="true"`
+ *
+ * @example
+ * ```tsx
+ * <Select
+ *   options={[{ value: 'fr', label: 'France' }]}
+ *   value={country}
+ *   onChange={setCountry}
+ *   label="Country"
+ *   mandatory
+ *   error={countryError}
+ * />
+ * ```
  */
 declare const Select: FC<SelectProps>;
 export { Select };

package/dist/cjs/components/forms/select/Select.props.d.ts

@@ -32,9 +32,23 @@ export type SelectProps = {
      * Width of the select
      */
     width?: string | number;
+    /**
+     * Error message to display below the select.
+     * When provided, `aria-invalid="true"` and `aria-errormessage` are set automatically.
+     */
+    error?: string;
+    /**
+     * Unique HTML id for the select trigger (required when using `error`)
+     */
+    id?: string;
+    /**
+     * Accessibility label for screen readers (defaults to `label`)
+     */
+    ariaLabel?: string;
 };
 export type SelectStyleParams = {
     disabled?: boolean;
     width?: string | number;
     isOpen?: boolean;
+    hasError?: boolean;
 };

package/dist/cjs/components/forms/textarea/TextArea.props.d.ts

@@ -16,7 +16,7 @@ export type TextAreaProps = {
     placeholder?: string;
     /** Whether the textarea is disabled */
     disabled?: boolean;
-    /** Accessibility label */
+    /** Accessibility label (defaults to `label` if not provided) */
     ariaLabel?: string;
     /** Custom width for the textarea */
     width?: CSSProperties['width'];
@@ -24,8 +24,16 @@ export type TextAreaProps = {
     minRows?: number;
     /** Maximum number of visible text lines (adds scroll when exceeded) */
     maxRows?: number;
+    /**
+     * Error message to display below the textarea.
+     * When provided, `aria-invalid="true"` and `aria-errormessage` are set automatically.
+     */
+    error?: string;
+    /** Unique HTML id for the textarea element (required when using `error`) */
+    id?: string;
 };
 export type TextAreaStyleParams = {
     disabled?: boolean;
     width?: CSSProperties['width'];
+    hasError?: boolean;
 };

package/dist/cjs/components/foundation/text/Text.props.d.ts

@@ -26,6 +26,8 @@ export type TextProps = PropsWithChildren<{
     role?: string;
     /** Tab index for keyboard navigation */
     tabIndex?: number;
+    /** HTML id attribute (used for aria-labelledby / aria-describedby references) */
+    id?: string;
 }>;
 export type TextStyleParams = {
     variant?: TextVariants;

package/dist/cjs/components/foundation/text/utils/getTextVariantStyles.utils.d.ts

@@ -0,0 +1,7 @@
+import { ThemeContract } from '@/interfaces';
+import { TextVariants, TextVariantStyle } from '@interfaces/text.types.ts';
+/**
+ * Get text variant styles based on the theme
+ * @param theme
+ */
+export declare const getTextVariantStyles: (theme: ThemeContract) => Record<TextVariants, TextVariantStyle>;

package/dist/cjs/components/foundation/text/utils/getTruncateTextStyles.utils.d.ts

@@ -0,0 +1,21 @@
+export declare const getTruncateTextStyles: (maxLines: number) => {
+    whiteSpace: "nowrap";
+    overflow: string;
+    textOverflow: string;
+    display?: undefined;
+    WebkitLineClamp?: undefined;
+    WebkitBoxOrient?: undefined;
+    overflowWrap?: undefined;
+    wordBreak?: undefined;
+    lineClamp?: undefined;
+} | {
+    overflow: string;
+    textOverflow: string;
+    display: string;
+    WebkitLineClamp: number;
+    WebkitBoxOrient: "vertical";
+    whiteSpace: "normal";
+    overflowWrap: "break-word";
+    wordBreak: "break-word";
+    lineClamp: number;
+};

package/dist/cjs/components/foundation/text/utils/parseTextWithBold.utils.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+/**
+ * Parses text content and converts **bold** syntax to <strong> elements
+ * @param children - The content to parse (string or ReactNode)
+ * @returns Parsed content with bold text wrapped in <strong> elements
+ */
+export declare const parseTextWithBold: (children: ReactNode) => ReactNode;

package/dist/cjs/components/navigation/breadcrumb/utils/buildBreadcrumbChildren.utils.d.ts

@@ -0,0 +1,5 @@
+import { ComponentType, ReactNode } from 'react';
+/**
+ * Builds the breadcrumb children with ellipsis logic
+ */
+export declare const buildBreadcrumbChildren: (items: ReactNode[], maxItems: number | undefined, EllipsisComponent: ComponentType, SeparatorComponent: ComponentType) => ReactNode[];

package/dist/cjs/components/navigation/breadcrumb/utils/flattenChildren.utils.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+/**
+ * Flattens children, extracting children from Fragments
+ */
+export declare const flattenChildren: (children: ReactNode) => ReactNode[];

package/dist/cjs/components/navigation/breadcrumb/utils/insertSeparators.utils.d.ts

@@ -0,0 +1,5 @@
+import { ComponentType, ReactNode } from 'react';
+/**
+ * Inserts separators between breadcrumb items automatically
+ */
+export declare const insertSeparators: (items: ReactNode[], SeparatorComponent: ComponentType) => ReactNode[];

package/dist/cjs/components/navigation/breadcrumb/utils/isSeparator.utils.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+/**
+ * Checks if a React element is a BreadcrumbSeparator
+ */
+export declare const isSeparator: (child: ReactNode) => boolean;

package/dist/cjs/components/overlay/alert/Alert.d.ts

@@ -18,6 +18,11 @@ import { AlertProps } from '@components/overlay/alert/Alert.props';
  * - Smooth animations
  * - Dynamic height calculation for proper stacking
  *
+ * **Accessibility:**
+ * - Uses `role="alert"` for screen reader announcements
+ * - Error alerts use `aria-live="assertive"` for urgent announcements
+ * - Other variants use `aria-live="polite"` to avoid interrupting users
+ *
  * @example
  * ```tsx
  * <Alert

package/dist/cjs/components/overlay/alert/utils/getAlertIcon.utils.d.ts

@@ -0,0 +1,8 @@
+import { JSX } from 'react';
+import { AlertVariant } from '@interfaces/alert.types';
+/**
+ * Get icon component for alert variant
+ * @param variant - Alert variant
+ * @returns JSX Element for the icon
+ */
+export declare const getAlertIcon: (variant: AlertVariant) => JSX.Element;

package/dist/cjs/components/overlay/alert/utils/getAlertPositionStyles.utils.d.ts

@@ -0,0 +1,8 @@
+import { AlertPosition } from '@interfaces/alert.types';
+/**
+ * Get position styles for alert
+ * @param position - Alert position
+ * @param offsetY - Vertical offset for stacking (in pixels)
+ * @returns Object with CSS position styles (top/bottom + left/right)
+ */
+export declare const getAlertPositionStyles: (position: AlertPosition, offsetY: number) => Record<string, string>;

package/dist/cjs/components/overlay/alert/utils/getAlertVariantColors.utils.d.ts

@@ -0,0 +1,14 @@
+import { ThemeContract } from '@/interfaces';
+import { AlertVariant } from '@interfaces/alert.types';
+export interface AlertVariantColors {
+    background: string;
+    border: string;
+    iconColor: 'info' | 'warning' | 'error' | 'success' | 'text';
+}
+/**
+ * Get colors for alert variants
+ * @param theme - Aurora theme
+ * @param variant - Alert variant
+ * @returns Colors for the variant
+ */
+export declare const getAlertVariantColors: (theme: ThemeContract, variant: AlertVariant) => AlertVariantColors;

package/dist/cjs/components/overlay/modal/Modal.d.ts

@@ -1,4 +1,28 @@
 import { FC } from 'react';
 import { ModalProps } from '@components/overlay/modal/Modal.props';
+/**
+ * Modal component
+ *
+ * An overlay dialog for focused interactions.
+ *
+ * **Accessibility:**
+ * - Uses `role="dialog"` and `aria-modal="true"` for screen readers
+ * - `aria-labelledby` links to the modal title
+ * - Focus is trapped inside the modal while it is open
+ * - Focus returns to the triggering element when closed
+ * - Escape key closes the modal
+ *
+ * @example
+ * ```tsx
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   label="Confirm deletion"
+ *   action={{ label: 'Delete', onClick: handleDelete }}
+ * >
+ *   <Text>Are you sure you want to delete this item?</Text>
+ * </Modal>
+ * ```
+ */
 declare const Modal: FC<ModalProps>;
 export default Modal;