@ssa-ui-kit/core 2.33.0 → 3.1.0

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

@@ -1,18 +1,119 @@
-import { MutableRefObject, ReactNode } from 'react';
+import { RefObject, ReactNode } from 'react';
 import { Control, FieldPath, FieldValues, UseFormReturn } from 'react-hook-form';
+/**
+ * Props for the Checkbox component
+ *
+ * A form control that allows users to select one or more options from a set.
+ * Supports checked, unchecked, indeterminate, and disabled states. Can be used
+ * standalone or integrated with React Hook Form for form validation.
+ *
+ * @example
+ * ```tsx
+ * // Basic checkbox
+ * <Checkbox
+ *   id="terms"
+ *   text="I agree to the terms"
+ *   onChange={(checked) => console.log(checked)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Checkbox with React Hook Form
+ * const { register } = useForm();
+ * <Checkbox
+ *   name="newsletter"
+ *   text="Subscribe to newsletter"
+ *   register={register}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Controlled checkbox
+ * const [checked, setChecked] = useState(false);
+ * <Checkbox
+ *   text="Controlled checkbox"
+ *   externalState={checked}
+ *   onChange={setChecked}
+ * />
+ * ```
+ */
 export interface CheckboxProps extends Partial<Pick<UseFormReturn, 'register'>> {
+    /**
+     * Label text or custom React node to display next to the checkbox
+     * Can be a string, number, or any React node
+     */
     text?: ReactNode;
+    /**
+     * Unique identifier for the checkbox input element
+     * If not provided, a unique ID will be auto-generated
+     */
     id?: string;
+    /**
+     * Callback function called when checkbox state changes
+     * Receives the new checked state (boolean) as parameter
+     */
     onChange?: (newState: boolean) => void;
+    /**
+     * External state control - allows parent component to control checkbox state
+     * When provided, the checkbox becomes controlled
+     */
     externalState?: boolean;
+    /**
+     * Whether the checkbox is disabled
+     * Disabled checkboxes cannot be interacted with and appear visually muted
+     * @default false
+     */
     isDisabled?: boolean;
+    /**
+     * Initial checked state when component mounts
+     * Only used for uncontrolled checkboxes
+     * @default false
+     */
     initialState?: boolean;
+    /**
+     * Indeterminate state - represents a partially selected state
+     * Commonly used in tree structures or "select all" scenarios
+     * Visual indicator: shows a minus (-) icon instead of checkmark
+     * @default false
+     */
     isIndeterminate?: boolean;
+    /**
+     * Name attribute for form submission and React Hook Form integration
+     * Required when using with React Hook Form
+     * @default ''
+     */
     name?: string;
+    /**
+     * Whether the checkbox is required for form validation
+     * @default false
+     */
     isRequired?: boolean;
-    ref?: MutableRefObject<HTMLInputElement>;
-    color?: 'green' | 'blue' | 'custom';
+    /**
+     * Ref object to access the underlying input element
+     */
+    ref?: RefObject<HTMLInputElement>;
+    /**
+     * Color variant of the checkbox — controls the checked and focus-state colors.
+     * Sourced from `theme.palette`:
+     * - `primary` — blue (uses `palette.primary`); resting border is `palette.primary.light`,
+     *   checked fill is `palette.primary.main`, hover fill is `palette.primary.dark`,
+     *   disabled box background is `greyFocused40`
+     * - `success` — green (uses `palette.success`); resting border is `palette.success.main`,
+     *   checked fill is `palette.success.main`, hover fill is `palette.success.dark`,
+     *   disabled box background is `greyFocused40`
+     * - `custom` — no built-in color; apply styles via `className` or the `css` prop
+     * @default 'primary'
+     */
+    color?: 'primary' | 'success' | 'custom';
+    /**
+     * Custom element type to render as (for composition)
+     */
     as?: React.ElementType;
+    /**
+     * Custom CSS class name
+     */
     className?: string;
 }
 export type IFormCheckboxProps<T extends FieldValues> = Omit<CheckboxProps, 'onChange' | 'name'> & {

package/dist/components/Chip/Chip.d.ts

@@ -1,2 +1,72 @@
 import { ChipProps } from './types';
+/**
+ * Chip - Compact component for tags, labels, and removable items.
+ *
+ * Colors are driven by `theme.palette` for semantic values, allowing palette
+ * overrides in a custom theme to flow through automatically.
+ *
+ * ### Color / Palette mapping
+ * - `default`   — neutral: white bg (outlined) / greyLighter bg (filled), uses `theme.colors`
+ * - `primary`   — blue, uses `theme.palette.primary`
+ * - `secondary` — grey, uses `theme.palette.secondary` (dark text)
+ * - `success`   — green, uses `theme.palette.success`
+ * - `error`     — red, uses `theme.palette.error`
+ * - `warning`   — orange, uses `theme.palette.warning`
+ *
+ * ### Variant / Palette token mapping
+ * - `filled`   — `palette.main` background, white text (dark for `secondary`)
+ * - `outlined` — `palette.light` background, `palette.main` border, `palette.dark` text
+ *
+ * @category Components
+ * @subcategory Display
+ *
+ * @example
+ * ```tsx
+ * // Basic chip — default color, filled
+ * <Chip label="React" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Removable palette-colored tag
+ * <Chip
+ *   label="TypeScript"
+ *   onDelete={(e) => removeTag('typescript')}
+ *   color="primary"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Outlined chip using palette light/main/dark
+ * <Chip
+ *   label="Filter: Active"
+ *   icon="filter"
+ *   onClick={() => openFilterDialog()}
+ *   variant="outlined"
+ *   color="secondary"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Chip with avatar
+ * <Chip
+ *   label="John Doe"
+ *   avatar={<Avatar size={20} image="/avatar.jpg" />}
+ *   onDelete={() => removeUser()}
+ * />
+ * ```
+ *
+ * @see {@link Avatar} - For user avatar integration
+ * @see {@link Icon} - For chip icons
+ * @see {@link Tag} - Alternative component for simpler use cases
+ *
+ * @accessibility
+ * - Keyboard navigable (Tab to focus)
+ * - Delete with Backspace/Delete keys
+ * - Escape to blur
+ * - Proper ARIA roles and attributes
+ * - Screen reader announcements for actions
+ */
 export declare const Chip: import("react").ForwardRefExoticComponent<ChipProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Chip/constants.d.ts

@@ -5,9 +5,9 @@ export declare const VARIANTS: {
 export declare const COLORS: {
     readonly DEFAULT: "default";
     readonly PRIMARY: "primary";
+    readonly SECONDARY: "secondary";
     readonly SUCCESS: "success";
     readonly ERROR: "error";
-    readonly INFO: "info";
     readonly WARNING: "warning";
 };
 export declare const mapSizes: {

package/dist/components/Chip/helpers.d.ts

@@ -2,8 +2,14 @@ import { Theme } from '@emotion/react';
 import { ChipProps } from './types';
 type SemanticColor = Exclude<ChipProps['color'], 'default' | undefined>;
 type ColorConfig = {
+    /** Solid background for filled variant / border + text for outlined */
     main: string;
+    /** Light background for outlined variant */
     bg: string;
+    /** Darkest shade — used as text color in outlined variant */
+    dark: string;
+    /** When true, filled variant uses dark text instead of white (e.g. light grey bg) */
+    darkText?: boolean;
 };
 export declare const colorMap: (theme: Theme) => Record<SemanticColor, ColorConfig>;
 export declare const getVariantColors: (theme: Theme, variant: ChipProps["variant"], color: ChipProps["color"], disabled: boolean) => {

package/dist/components/Chip/types.d.ts

@@ -2,22 +2,150 @@ import { CommonProps } from '../../types/emotion';
 import { Interpolation, Theme } from '@emotion/react';
 import { ReactNode, MouseEventHandler } from 'react';
 import { IconProps } from '../Icon/types';
+/**
+ * Visual style variant for Chip component
+ * - `filled`: Solid background with text (default)
+ * - `outlined`: Transparent background with border
+ */
 export type ChipVariant = 'filled' | 'outlined';
-export type ChipColor = 'default' | 'primary' | 'success' | 'error' | 'info' | 'warning';
+/**
+ * Color theme for Chip component — aligns with `theme.palette`.
+ * - `default`:    Neutral: white bg (outlined) / greyLighter bg (filled)
+ * - `primary`:    Blue — uses `theme.palette.primary`
+ * - `secondary`:  Grey — uses `theme.palette.secondary`
+ * - `success`:    Green — uses `theme.palette.success`
+ * - `error`:      Red — uses `theme.palette.error`
+ * - `warning`:    Orange — uses `theme.palette.warning`
+ */
+export type ChipColor = 'default' | 'primary' | 'secondary' | 'success' | 'error' | 'warning';
+/**
+ * Size variant for Chip component
+ * - `small`: Compact chip for dense UIs
+ * - `medium`: Standard chip size (default)
+ * - `large`: Larger chip for emphasis
+ */
 export type ChipSize = 'small' | 'medium' | 'large';
+/**
+ * Props for the Chip component
+ *
+ * A versatile chip component for displaying compact pieces of information, tags,
+ * or removable items. Supports icons, avatars, click handlers, and delete actions.
+ * Fully accessible with keyboard support and ARIA attributes.
+ *
+ * @example
+ * ```tsx
+ * // Basic chip
+ * <Chip label="React" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Chip with icon and delete
+ * <Chip
+ *   label="TypeScript"
+ *   icon="check"
+ *   onDelete={(e) => handleRemove(e)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Clickable chip with avatar
+ * <Chip
+ *   label="John Doe"
+ *   avatar={<Avatar size={20} image="/avatar.jpg" />}
+ *   onClick={() => navigateToProfile()}
+ *   color="primary"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Outlined variant with custom color
+ * <Chip
+ *   label="New"
+ *   variant="outlined"
+ *   color="success"
+ *   size="small"
+ * />
+ * ```
+ */
 export interface ChipProps extends CommonProps {
+    /**
+     * Main text content of the chip
+     * Can be a string, number, or React node
+     */
     label: ReactNode;
+    /**
+     * Optional title/heading text displayed before the label
+     * Useful for chips with additional context
+     */
     title?: ReactNode;
+    /**
+     * Visual style variant
+     * - `filled`: Solid background (default)
+     * - `outlined`: Transparent with border
+     * @default 'filled'
+     */
     variant?: ChipVariant;
+    /**
+     * Color theme for the chip. Semantic colors read from `theme.palette`,
+     * so palette overrides in a custom theme apply automatically.
+     * @default 'default'
+     */
     color?: ChipColor;
+    /**
+     * Size of the chip
+     * @default 'medium'
+     */
     size?: ChipSize;
+    /**
+     * Whether the chip is disabled
+     * Disabled chips cannot be clicked or deleted
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * Icon name to display before the label
+     * Uses the Icon component internally
+     * Defaults to 'plus' if showIcon is true and no icon provided
+     */
     icon?: IconProps['name'];
+    /**
+     * Avatar component or image to display before the label
+     * Takes precedence over icon if both are provided
+     */
     avatar?: ReactNode;
+    /**
+     * Delete button click handler
+     * When provided, a delete icon button appears on the chip
+     * Keyboard: Delete or Backspace keys trigger deletion
+     */
     onDelete?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Custom icon name for the delete button
+     * @default 'cross'
+     */
     deleteIcon?: IconProps['name'];
+    /**
+     * Whether to show the leading icon
+     * If false, no icon will be displayed even if icon prop is provided
+     * @default true
+     */
     showIcon?: boolean;
+    /**
+     * Click handler for the chip
+     * Makes the chip clickable/interactive
+     */
     onClick?: MouseEventHandler<HTMLDivElement>;
+    /**
+     * Explicitly mark chip as clickable
+     * Used to enable pointer cursor and keyboard interaction
+     * Automatically true if onClick is provided
+     */
     clickable?: boolean;
+    /**
+     * Custom Emotion CSS styles
+     */
     css?: Interpolation<Theme>;
 }

package/dist/components/CollapsibleNavBar/CollapsibleNavBar.d.ts

@@ -2,4 +2,4 @@ import { CollapsibleNavBarExtendedProps } from './types';
 /**
  * UI Component that shows the collapsible navigation bar
  */
-export declare const CollapsibleNavBar: ({ items, renderLogo, theme, subMenuMaxWidth, showIconTooltip, className, useMatchPattern, onChange, }: CollapsibleNavBarExtendedProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CollapsibleNavBar: ({ items, renderLogo, theme, subMenuMaxWidth, showIconTooltip, className, useMatchPattern, onChange, exactMatch, }: CollapsibleNavBarExtendedProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/CollapsibleNavBar/CollapsibleNavBarContext.d.ts

@@ -1,7 +1,7 @@
 import { CollapsibleNavBarExtendedProps } from './types';
-type ContextType = Pick<CollapsibleNavBarExtendedProps, 'theme' | 'subMenuMaxWidth' | 'showIconTooltip'>;
+type ContextType = Pick<CollapsibleNavBarExtendedProps, 'theme' | 'subMenuMaxWidth' | 'showIconTooltip' | 'exactMatch'>;
 export declare const CollapsibleNavBarContext: import("react").Context<ContextType>;
-export declare const CollapsibleNavBarProvider: ({ children, theme, subMenuMaxWidth, showIconTooltip, }: {
+export declare const CollapsibleNavBarProvider: ({ children, theme, subMenuMaxWidth, showIconTooltip, exactMatch, }: {
     children: React.ReactNode;
 } & ContextType) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const useCollapsibleNavBarContext: () => ContextType;

package/dist/components/CollapsibleNavBar/components/TriggerIcon.d.ts

@@ -1,9 +1,11 @@
+import { CSSObject } from '@emotion/react';
 import type { MapIconsType, SVGProps } from '../../Icon/types';
-export declare const TriggerIcon: ({ iconName, iconSize, className, CustomIcon, }: {
+export declare const TriggerIcon: ({ iconName, iconSize, className, CustomIcon, css: cssProp, }: {
     iconName: keyof MapIconsType;
     iconSize?: number;
     className?: string;
     CustomIcon?: (props: Omit<SVGProps, "fill"> & {
         showIconTooltip?: boolean;
-    }) => JSX.Element;
+    }) => React.JSX.Element;
+    css?: CSSObject;
 }) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/CollapsibleNavBar/types.d.ts

@@ -1,13 +1,14 @@
 import { CSSProperties } from 'react';
 import { PathPattern } from 'react-router-dom';
+import { CSSObject } from '@emotion/react';
 import { NavBarExtendedGroup, NavBarExtendedItem, NavBarExtendedSubItem } from '../..';
 export interface CollapsibleNavBarItem extends NavBarExtendedItem {
     iconSize: number;
-    css?: React.CSSProperties;
+    css?: CSSObject;
 }
 export interface CollapsibleNavBarGroup<T extends NavBarExtendedSubItem = NavBarExtendedSubItem> extends NavBarExtendedGroup<T> {
     iconSize: number;
-    css?: React.CSSProperties;
+    css?: CSSObject;
     prefix: string;
 }
 export interface CollapsibleNavBarExtendedProps<T extends NavBarExtendedSubItem = NavBarExtendedSubItem> {
@@ -19,4 +20,10 @@ export interface CollapsibleNavBarExtendedProps<T extends NavBarExtendedSubItem
     showIconTooltip?: boolean;
     useMatchPattern?: (prefix: string) => string | PathPattern<string>;
     onChange?: (isChecked: boolean) => void;
+    /**
+     * If true, only exact path matches will be considered active.
+     * If false, sub-routes will also be considered active.
+     * @default false
+     */
+    exactMatch?: boolean;
 }

package/dist/components/ColorPicker/components/CopyButton.d.ts

@@ -1,3 +1,3 @@
-export declare const CopyButton: import("@emotion/styled").StyledComponent<import("../../Button/types").ButtonProps & import("react").RefAttributes<HTMLButtonElement> & {
+export declare const CopyButton: import("@emotion/styled").StyledComponent<import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

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

@@ -1,7 +1,29 @@
 export declare const DEFAULT_MASK_FORMAT = "mm/dd/yyyy";
+export declare const DEFAULT_MONTH_MASK_FORMAT = "mm/yyyy";
+export declare const DEFAULT_YEAR_MASK_FORMAT = "yyyy";
 export declare const DEFAULT_MASK = "__/__/____";
+export declare const DEFAULT_MONTH_MASK = "__/____";
+export declare const DEFAULT_YEAR_MASK = "____";
 export declare const MONTHS: string[];
+export declare const VALID_DATE_FORMATS: readonly ["mm/dd/yyyy", "dd/mm/yyyy", "mm/yyyy", "yyyy"];
 export declare const DATE_MIN = "01/01/1900";
 export declare const DATE_MAX = "01/01/2150";
+export declare const MONTH_DATE_MIN = "01/1900";
+export declare const MONTH_DATE_MAX = "01/2150";
+export declare const YEAR_DATE_MIN = "1900";
+export declare const YEAR_DATE_MAX = "2150";
 export declare const OUT_OF_RANGE = "The date is out of the defined range";
 export declare const INVALID_DATE = "Invalid date";
+export declare const FULL_DATE_LENGTH = 10;
+export declare const FULL_MONTH_DATE_LENGTH = 7;
+export declare const FULL_YEAR_DATE_LENGTH = 4;
+export declare const PICKER_TYPE: {
+    readonly DAYS: "days";
+    readonly MONTHS: "months";
+    readonly YEARS: "years";
+};
+export declare const CALENDAR_TYPE: {
+    readonly DAYS: "days";
+    readonly MONTHS: "months";
+    readonly YEARS: "years";
+};

package/dist/components/DatePicker/hooks/useDatePicker.d.ts

@@ -1,6 +1,7 @@
 import { DateTime } from 'luxon';
-import { CalendarType, DatePickerProps } from '../types';
-export declare const useDatePicker: ({ dateMin, dateMax, name, defaultValue, format, maskOptions, onOpen, onClose, onError, onChange, ...rest }: DatePickerProps) => {
+import { DatePickerProps } from '../types';
+export declare const useDatePicker: ({ dateMin, dateMax, name, defaultValue, format: propFormat, maskOptions, pickerType, onOpen, onClose, onError, onChange, value: externalValue, }: DatePickerProps) => {
+    format: import("../../JsonSchemaForm/utils").DateFormat;
     formatIndexes: {
         day: number;
         month: number;
@@ -15,13 +16,14 @@ export declare const useDatePicker: ({ dateMin, dateMax, name, defaultValue, for
     inputValue: any;
     calendarViewDateTime: DateTime<boolean> | undefined;
     maskInputRef: import("react").MutableRefObject<HTMLInputElement>;
-    calendarType: CalendarType;
+    calendarType: import("../../JsonSchemaForm/utils").PickerCalendarType;
     lastChangedDate: Date | undefined;
     luxonFormat: string;
-    safeOnChange: (newDateTime?: DateTime) => void;
-    setCalendarType: import("react").Dispatch<import("react").SetStateAction<CalendarType>>;
+    safeOnChange: (newDT?: DateTime) => void;
+    setCalendarType: import("react").Dispatch<import("react").SetStateAction<import("../../JsonSchemaForm/utils").PickerCalendarType>>;
     setCalendarViewDateTime: import("react").Dispatch<import("react").SetStateAction<DateTime<boolean> | undefined>>;
     setDateTime: import("react").Dispatch<import("react").SetStateAction<DateTime<boolean> | undefined>>;
     setIsOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     handleBlur: import("react").FocusEventHandler<HTMLInputElement>;
+    pickerType: import("../types").PickerType;
 };

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

@@ -1 +1,2 @@
 export * from './DatePicker';
+export * from './types';

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

@@ -2,8 +2,9 @@ export declare const DaysViewCell: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
-    direction?: string;
-    alignItems?: string;
+    direction?: import("../Wrapper").WrapperDirection;
+    alignItems?: import("../Wrapper").WrapperAlignItems;
+    justifyContent?: import("../Wrapper").WrapperJustifyContent;
     fade?: boolean;
     fadeDelay?: number;
     isVisible?: boolean;

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

@@ -2,12 +2,18 @@ import { Dispatch, SetStateAction } from 'react';
 import { useMask } from '@react-input/mask';
 import { DateTime } from 'luxon';
 import { InputProps } from '../Input/types';
+import { PICKER_TYPE } from './constants';
+import { RegisterOptions } from 'react-hook-form';
+import type { PickerCalendarType, DateFormat } from '../JsonSchemaForm/utils/dateFormats';
+export type PickerType = (typeof PICKER_TYPE)[keyof typeof PICKER_TYPE];
+export type DatePickerFormat = DateFormat;
 export type DatePickerProps = {
     name: string;
     label?: string;
-    format?: 'mm/dd/yyyy' | 'dd/mm/yyyy';
+    format?: DatePickerFormat;
     maskOptions?: Parameters<typeof useMask>[0];
     openCalendarMode?: 'icon' | 'input' | 'both';
+    pickerType?: PickerType;
     inputProps?: Partial<InputProps>;
     value?: string;
     defaultValue?: string;
@@ -43,6 +49,7 @@ export type DatePickerProps = {
     onMonthChange?: (date: Date) => void;
     onYearChange?: (date: Date) => void;
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    validationSchema?: RegisterOptions;
 };
 export type DatePickerContextProps = Omit<DatePickerProps, 'dateMin' | 'dateMax'> & {
     inputRef?: React.ForwardedRef<HTMLInputElement | null>;
@@ -60,10 +67,11 @@ export type DatePickerContextProps = Omit<DatePickerProps, 'dateMin' | 'dateMax'
         month: number;
         year: number;
     };
+    pickerType: PickerType;
     safeOnChange?: (date?: DateTime) => void;
     setCalendarViewDateTime: Dispatch<SetStateAction<DateTime | undefined>>;
     setDateTime: Dispatch<SetStateAction<DateTime<boolean> | undefined>>;
     setIsOpen: Dispatch<SetStateAction<boolean>>;
     setCalendarType: Dispatch<SetStateAction<CalendarType>>;
 };
-export type CalendarType = 'days' | 'months' | 'years';
+export type CalendarType = PickerCalendarType;

package/dist/components/DatePicker/utils/dates.d.ts

@@ -5,7 +5,7 @@ export declare const getYearsList: (props?: {
     yearsCount?: number;
 }) => number[];
 export declare const processDate: (dateParts: {
-    month: string;
-    day: string;
+    month?: string;
+    day?: string;
     year: string;
 }, yearMin: number, yearMax: number) => boolean;

package/dist/components/DateRangePicker/DateRangePicker.d.ts

@@ -1,2 +1,2 @@
 import { DateRangePickerProps } from './types';
-export declare const DateRangePicker: ({ format, showCalendarIcon, showStatusArea, rangePickerType, ...rest }: DateRangePickerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DateRangePicker: ({ format, showCalendarIcon, showStatusArea, rangePickerType, showPresentOption, ...rest }: DateRangePickerProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/DateRangePicker/DateRangePickerFormBridge.d.ts

@@ -0,0 +1,46 @@
+import type { DateRangePickerProps } from './types';
+import { type DateFormat } from '../JsonSchemaForm/utils/dateFormats';
+/**
+ * Special value to represent "Present" (ongoing/no end date) in form data and UI display.
+ *
+ * WHY THIS EXISTS:
+ * - DateRangePicker (standalone) uses `null` for "Present" (semantic, clean API)
+ * - Form schemas with type: "string" reject `null` (validation error: "must be string")
+ * - This magic string allows validation to pass while preserving the "Present" meaning
+ *
+ * DATA FLOW:
+ * - Form → Bridge: end can be PRESENT_VALUE
+ * - Bridge → Picker: PRESENT_VALUE becomes null
+ * - Picker → Bridge: null (user clicked "Present") comes back
+ * - Bridge → Form: null becomes PRESENT_VALUE for storage
+ *
+ * USAGE:
+ * - Form storage: Used in form data to represent "Present" end date
+ * - UI display: Used as display text shown to users when "Present" is selected
+ */
+export declare const PRESENT_VALUE = "Present";
+export type DateRangePickerFormBridgeValue = {
+    start?: string;
+    end?: string | typeof PRESENT_VALUE;
+};
+/**
+ * DateRangePickerFormBridge - adapter between form builders and DateRangePicker
+ *
+ * PURPOSE:
+ * - Keeps DateRangePicker "pure": it only ever sees inputFormat and null for "Present"
+ * - Converts form value (outputFormat + PRESENT_VALUE string) ↔ picker value (inputFormat + null)
+ * - Used by DateRangeField (RJSF); can be used by other form builders
+ */
+export type DateRangePickerFormBridgeProps = Omit<DateRangePickerProps, 'defaultValue' | 'value' | 'onChange'> & {
+    /** Form value: dates in outputFormat, end can be PRESENT_VALUE for "Present" */
+    value?: DateRangePickerFormBridgeValue;
+    /** Fallback when value is empty (e.g. from ui:options.defaultValue) */
+    defaultValue?: DateRangePickerFormBridgeValue;
+    /** Called with form shape: dates in outputFormat, end is PRESENT_VALUE when "Present" */
+    onChange?: (value: DateRangePickerFormBridgeValue) => void;
+    /** Format used to parse value (form storage), e.g. 'yyyy-MM-dd' */
+    outputFormat: string;
+    /** Format used for display in the picker, e.g. 'dd/mm/yyyy' */
+    inputFormat: DateFormat;
+};
+export declare const DateRangePickerFormBridge: ({ value, defaultValue: defaultValueProp, onChange, outputFormat, inputFormat: inputFormatProp, ...pickerProps }: DateRangePickerFormBridgeProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/DateRangePicker/components/DatesListWrapper.d.ts

@@ -2,8 +2,9 @@ export declare const DatesListWrapper: import("@emotion/styled").StyledComponent
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
-    direction?: string;
-    alignItems?: string;
+    direction?: import("../../Wrapper").WrapperDirection;
+    alignItems?: import("../../Wrapper").WrapperAlignItems;
+    justifyContent?: import("../../Wrapper").WrapperJustifyContent;
     fade?: boolean;
     fadeDelay?: number;
     isVisible?: boolean;

package/dist/components/DateRangePicker/constants.d.ts

@@ -1,4 +1,5 @@
 export declare const DEFAULT_MASK_FORMAT = "mm/dd/yyyy";
+export declare const DEFAULT_EUROPEAN_MASK_FORMAT = "dd/mm/yyyy";
 export declare const DEFAULT_MONTH_MASK_FORMAT = "mm/yyyy";
 export declare const DEFAULT_YEAR_MASK_FORMAT = "yyyy";
 export declare const DEFAULT_MASK = "__/__/____";