@ssa-ui-kit/core 2.33.0 → 3.0.0

package/dist/components/Field/FieldRoot.d.ts

@@ -1,7 +1,97 @@
 import { type HTMLAttributes } from 'react';
 import { FieldContextValue } from './FieldProvider';
+/**
+ * Props for Field.Root component
+ *
+ * The root container component for form fields. Provides context for validation status,
+ * disabled state, and focus behavior to child Field components. Can render as a div
+ * (default) or use the asChild pattern to render without a wrapper.
+ *
+ * @example
+ * ```tsx
+ * <Field.Root status="error">
+ *   <Field.Label htmlFor="email">Email</Field.Label>
+ *   <Field.Control>
+ *     <Input id="email" name="email" />
+ *   </Field.Control>
+ *   <Field.Error>Invalid email address</Field.Error>
+ * </Field.Root>
+ * ```
+ */
 export interface FieldRootProps extends Partial<FieldContextValue>, HTMLAttributes<HTMLDivElement> {
+    /**
+     * If true, renders without a wrapper div (asChild pattern)
+     * Useful for semantic HTML (e.g., wrapping with fieldset)
+     * @default false
+     */
     asChild?: boolean;
+    /**
+     * Child components (typically Field.Label, Field.Control, Field.Description, etc.)
+     */
     children: React.ReactNode;
 }
+/**
+ * Field - Compound layout primitives for building accessible form fields.
+ *
+ * Purpose: use when you need full control over field layout or when building custom
+ * form widgets (e.g. JsonSchemaForm, custom inputs). Field does not render an input
+ * itself — you compose Field.Root, Field.Label, Field.Control, Field.Description,
+ * Field.Error, and Field.Success around Input, Textarea, or other controls. Use
+ * TextField for a ready-made text input with label and validation UI.
+ *
+ * Field.Root - Root container for form field components. Provides context and
+ * styling container for form fields. Manages validation status, disabled state,
+ * and focus forwarding behavior. Use with Field.Label, Field.Control,
+ * Field.Description, Field.Error, and Field.Success components.
+ *
+ * @category Form Controls
+ * @subcategory Layout
+ *
+ * @example
+ * ```tsx
+ * // Basic field
+ * <Field.Root>
+ *   <Field.Label htmlFor="username">Username</Field.Label>
+ *   <Field.Control>
+ *     <Input id="username" name="username" />
+ *   </Field.Control>
+ * </Field.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Field with validation
+ * <Field.Root status={hasError ? 'error' : 'basic'}>
+ *   <Field.Label htmlFor="email">Email</Field.Label>
+ *   <Field.Control>
+ *     <Input id="email" name="email" />
+ *   </Field.Control>
+ *   <Field.Error>Email is required</Field.Error>
+ * </Field.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Using asChild pattern with fieldset
+ * <Field.Root asChild status="error">
+ *   <fieldset>
+ *     <Field.Label htmlFor="age">Age</Field.Label>
+ *     <Field.Control>
+ *       <Input id="age" name="age" type="number" />
+ *     </Field.Control>
+ *   </fieldset>
+ * </Field.Root>
+ * ```
+ *
+ * @see {@link Field.Label} - For accessible labels
+ * @see {@link Field.Control} - For input wrapper
+ * @see {@link Field.Description} - For helper text
+ * @see {@link Field.Error} - For error messages
+ * @see {@link Field.Success} - For success messages
+ *
+ * @accessibility
+ * - Label/control association via htmlFor on Field.Label
+ * - Status (error/success) and disabled flow from context to child components
+ * - Optional focus forwarding from Field.Control to the inner input
+ */
 export declare const FieldRoot: ({ children, ...props }: FieldRootProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Field/FieldSuccess.d.ts

@@ -1,4 +1,38 @@
+/**
+ * Props for Field.Success component
+ *
+ * Success message component that only displays when field status is 'success'.
+ * Automatically hidden when field is in 'basic' or 'error' state.
+ */
 export interface FieldSuccessProps {
+    /**
+     * Success message text to display
+     */
     children: React.ReactNode;
 }
+/**
+ * Field.Success - Success message for form fields
+ *
+ * Displays success/validation confirmation messages below form controls.
+ * Only visible when the field status is 'success'. Automatically styled with
+ * success colors and hidden when status is 'basic' or 'error'.
+ *
+ * @category Form Controls
+ * @subcategory Layout
+ *
+ * @example
+ * ```tsx
+ * <Field.Root status={isValid ? 'success' : 'basic'}>
+ *   <Field.Label htmlFor="username">Username</Field.Label>
+ *   <Field.Control>
+ *     <Input id="username" name="username" />
+ *   </Field.Control>
+ *   <Field.Success>Username is available!</Field.Success>
+ * </Field.Root>
+ * ```
+ *
+ * @accessibility
+ * - Uses role="status" for screen reader announcements
+ * - Visible only when status is 'success'
+ */
 export declare const FieldSuccess: ({ children }: FieldSuccessProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;

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

@@ -2,4 +2,8 @@ export * as Field from './index.parts';
 export { type FieldRootProps as FieldProps } from './FieldRoot';
 export { type FieldLabelProps } from './FieldLabel';
 export { type FieldControlProps } from './FieldControl';
+export { type FieldErrorProps } from './FieldError';
+export { type FieldSuccessProps } from './FieldSuccess';
+export { type FieldDescriptionProps } from './FieldDescription';
+export { type FieldContextValue } from './FieldProvider';
 export { useFieldContext } from './FieldProvider';

package/dist/components/Filters/FilterBlockWrapper.d.ts

@@ -2,8 +2,9 @@ export declare const FilterBlockWrapper: import("@emotion/styled").StyledCompone
     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/Filters/FiltersContext.d.ts

@@ -2,8 +2,8 @@ import { UseTableDataResult } from '../TableFilters/hooks/useTableData';
 import { BaseSyntheticEvent } from 'react';
 export declare const FiltersContext: import("react").Context<{
     checkboxData: import("../TableFilters/types").TableFilterConfig;
-    wrapperRef: import("react").RefObject<HTMLElement> | undefined;
-    refsList: import("react").MutableRefObject<HTMLElement | null>[];
+    wrapperRef: import("react").RefObject<HTMLElement | null> | undefined;
+    refsList: import("react").RefObject<HTMLElement | null>[];
     setElementRef: (groupName: string, element: HTMLElement | null) => void;
     onCheckboxToggle: (groupName: string, name: string | number) => void;
     onDropdownChange: (groupName: string, name: string | number) => void;
@@ -13,8 +13,8 @@ export declare const FiltersContext: import("react").Context<{
 }>;
 export declare const useFiltersContext: () => {
     checkboxData: import("../TableFilters/types").TableFilterConfig;
-    wrapperRef: import("react").RefObject<HTMLElement> | undefined;
-    refsList: import("react").MutableRefObject<HTMLElement | null>[];
+    wrapperRef: import("react").RefObject<HTMLElement | null> | undefined;
+    refsList: import("react").RefObject<HTMLElement | null>[];
     setElementRef: (groupName: string, element: HTMLElement | null) => void;
     onCheckboxToggle: (groupName: string, name: string | number) => void;
     onDropdownChange: (groupName: string, name: string | number) => void;

package/dist/components/Filters/hooks/useVisibility.d.ts

@@ -3,8 +3,8 @@ import { ElementInfo } from '../types';
 export type RefsByKey = Record<string, ElementInfo>;
 type UseVisibilityParams = {
     checkboxData: TableFilterConfig;
-    refsList: Array<React.MutableRefObject<HTMLElement | null>>;
-    wrapperRef?: React.RefObject<HTMLElement>;
+    refsList: Array<React.RefObject<HTMLElement | null>>;
+    wrapperRef?: React.RefObject<HTMLElement | null>;
     onVisibilityProcessed?: () => void;
 };
 export declare const useVisibility: ({ checkboxData, wrapperRef, refsList, onVisibilityProcessed, }: UseVisibilityParams) => {

package/dist/components/FullscreenModeContext.d.ts

@@ -8,7 +8,4 @@ export type FullscreenModeContextType = {
 export declare const FullscreenModeContext: import("react").Context<FullscreenModeContextType>;
 export declare const FullscreenModeProvider: ({ children, }: React.PropsWithChildren) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const useFullscreenMode: () => FullscreenModeContextType;
-export declare const WithFullscreenMode: <T extends object>(Component: React.ComponentType<T>, rest?: Parameters<typeof FullscreenModeProvider>[0]) => {
-    (props: T): import("@emotion/react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const WithFullscreenMode: <T extends object>(Component: React.ComponentType<T>, rest?: Parameters<typeof FullscreenModeProvider>[0]) => React.ComponentType<T>;

package/dist/components/Icon/icons/iconsList.d.ts

@@ -1 +1 @@
-export declare const iconsList: ("visible" | "copy" | "circle" | "search" | "email" | "attention" | "archive" | "arrow-down" | "arrow-up" | "assessment" | "ban-user" | "bin" | "calendar" | "carrot-down" | "carrot-left" | "carrot-right" | "carrot-up" | "certification" | "certification-expiring" | "change" | "chart" | "check" | "check-circle" | "check-circle-inverted" | "children" | "circular" | "clock" | "cogwheel" | "company" | "confirm-email" | "cross" | "diet" | "edit" | "employee" | "employee-terminated" | "excel-download" | "filter" | "filter-funnel" | "fte" | "geography" | "home" | "import" | "information" | "invisible" | "language" | "lock" | "log-in" | "log-out" | "maximize" | "measurements" | "message" | "minus" | "minus-circle" | "minus-circle-inverted" | "more" | "more-vertical" | "notification" | "pages" | "party" | "plus" | "plus-circle" | "plus-circle-inverted" | "probation-period" | "profiles-changes" | "radio-on" | "report" | "robot" | "roles" | "seniority" | "settings" | "sleep" | "staff-growth-coefficient" | "staff-turnover-coefficient" | "stats" | "time-tracking" | "trainings" | "unarchive" | "union" | "unlock" | "user" | "warning")[];
+export declare const iconsList: ("visible" | "warning" | "archive" | "search" | "arrow-down" | "arrow-up" | "assessment" | "attention" | "ban-user" | "bin" | "calendar" | "carrot-down" | "carrot-left" | "carrot-right" | "carrot-up" | "certification" | "certification-expiring" | "change" | "chart" | "check" | "check-circle" | "check-circle-inverted" | "children" | "circle" | "circular" | "clock" | "cogwheel" | "company" | "confirm-email" | "copy" | "cross" | "diet" | "edit" | "email" | "employee" | "employee-terminated" | "excel-download" | "filter" | "filter-funnel" | "fte" | "geography" | "home" | "import" | "information" | "invisible" | "language" | "lock" | "log-in" | "log-out" | "maximize" | "measurements" | "message" | "minus" | "minus-circle" | "minus-circle-inverted" | "more" | "more-vertical" | "notification" | "pages" | "party" | "plus" | "plus-circle" | "plus-circle-inverted" | "probation-period" | "profiles-changes" | "radio-on" | "report" | "robot" | "roles" | "seniority" | "settings" | "sleep" | "staff-growth-coefficient" | "staff-turnover-coefficient" | "stats" | "time-tracking" | "trainings" | "unarchive" | "union" | "unlock" | "user")[];

package/dist/components/IconButton/IconButton.d.ts

@@ -0,0 +1,39 @@
+import type { IconButtonProps } from './types';
+/**
+ * IconButton - Square icon-only button for icon actions
+ *
+ * A compact button that displays a single icon from the kit (e.g. edit, bin, search).
+ * Uses the kit's Icon and theme. Good for row actions, toolbars, and secondary actions
+ * where a text label is not needed. Optional tooltip on hover and full style overrides
+ * via a single styles prop.
+ *
+ * Features:
+ * - Any icon from the kit via icon name
+ * - Optional tooltip (title) on hover via kit Tooltip
+ * - Optional aria-label; defaults to raw icon name for screen readers
+ * - Single styles prop: button, iconColor, icon (all overridable)
+ * - Transparent or grey background variant; disabled state
+ *
+ * @category Form Controls
+ * @subcategory Action
+ *
+ * @example
+ * ```tsx
+ * <IconButton icon="edit" onClick={onEdit} aria-label="Edit" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <IconButton icon="bin" onClick={onDelete} title="Delete" transparent />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <IconButton
+ *   icon="search"
+ *   onClick={onSearch}
+ *   styles={{ button: { marginLeft: 8 }, iconColor: theme.colors.blue }}
+ * />
+ * ```
+ */
+export declare const IconButton: ({ icon, onClick, "aria-label": ariaLabel, title, disabled, transparent, styles, }: IconButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { IconButton } from './IconButton';
+export type { IconButtonProps } from './types';

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

@@ -0,0 +1,2 @@
+import { Theme } from '@emotion/react';
+export declare const iconButton: (theme: Theme, transparent: boolean) => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,41 @@
+import type { Interpolation, Theme } from '@emotion/react';
+import type { MapIconsType } from '../Icon/types';
+export type IconButtonProps = {
+    /**
+     * Icon name from the UI kit Icon component (e.g. "edit", "bin", "search")
+     */
+    icon: keyof MapIconsType;
+    /**
+     * Click handler
+     */
+    onClick: () => void;
+    /**
+     * Accessible label for screen readers. When omitted, the raw icon name is used.
+     */
+    'aria-label'?: string;
+    /**
+     * Tooltip text; when provided, uses the kit's Tooltip on hover.
+     */
+    title?: string;
+    /**
+     * Disables the button and applies disabled styles
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Use transparent background instead of theme grey
+     * @default false
+     */
+    transparent?: boolean;
+    /**
+     * Custom styles in one prop. Each key is applied where it belongs:
+     * - `button`: Emotion styles merged with default button styles
+     * - `iconColor`: icon color (defaults to theme.colors.greyDarker)
+     * - `icon`: Emotion styles passed to the Icon
+     */
+    styles?: {
+        button?: Interpolation<Theme>;
+        iconColor?: string;
+        icon?: Interpolation<Theme>;
+    };
+};

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

@@ -1,8 +1,10 @@
 export interface IndicatorProps {
     isVisible: boolean;
-    children: React.ReactElement;
+    children: React.ReactElement<{
+        ref: React.Ref<HTMLDivElement | null>;
+    }>;
     position?: 'right' | 'left';
     background?: string;
-    text?: string | number | JSX.Element;
+    text?: string | number | React.JSX.Element;
 }
 export type ChildrenDataProps = Record<string, number>;

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

@@ -4,33 +4,190 @@ import type { Interpolation, Theme } from '@emotion/react';
 interface ExtendedInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     'data-testid'?: string;
 }
+/**
+ * Props for the Input component
+ *
+ * A flexible text input component with built-in validation, status indicators,
+ * icon support, and React Hook Form integration. Supports all standard HTML input
+ * types and provides visual feedback for validation states.
+ *
+ * @example
+ * ```tsx
+ * // Basic input with React Hook Form
+ * const { register } = useForm();
+ * <Input
+ *   name="email"
+ *   type="email"
+ *   placeholder="Enter your email"
+ *   register={register}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Input with validation
+ * <Input
+ *   name="password"
+ *   type="password"
+ *   register={register}
+ *   validationSchema={{
+ *     required: 'Password is required',
+ *     minLength: { value: 8, message: 'Must be at least 8 characters' }
+ *   }}
+ *   status={errors.password ? 'error' : 'basic'}
+ *   errors={errors.password}
+ *   showHelperText
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Input with icons and helper text
+ * <Input
+ *   name="search"
+ *   placeholder="Search products..."
+ *   startElement={<Icon name="search" />}
+ *   endElement={<Icon name="clear" onClick={handleClear} />}
+ *   helperText="Type to search"
+ *   showHelperText
+ * />
+ * ```
+ *
+ * @note React Hook Form integration is optional. If `register` is not provided,
+ * the component will still work but validation features will be unavailable.
+ */
 export interface InputProps extends Partial<Pick<UseFormReturn, 'register' | 'control' | 'setValue'>> {
+    /**
+     * Name attribute for the input, required for React Hook Form integration
+     */
     name: string;
+    /**
+     * Visual validation status of the input
+     * - `basic`: Default state, no validation feedback
+     * - `error`: Error state with red border and error icon
+     * - `success`: Success state with green border and success icon
+     * - `custom`: Custom styling (no default status styling)
+     * @default 'basic'
+     */
     status?: keyof InputStatusColors;
+    /**
+     * HTML input type attribute
+     * Supports all standard HTML input types (text, email, password, number, etc.)
+     * @default 'text'
+     */
     type?: string;
+    /**
+     * Placeholder text displayed when input is empty
+     */
     placeholder?: string;
+    /**
+     * React Hook Form validation schema
+     * Object containing validation rules (required, minLength, pattern, etc.)
+     */
     validationSchema?: Record<string, unknown>;
+    /**
+     * Whether the input is disabled
+     * Disabled inputs cannot be edited and appear visually muted
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * Custom CSS class name for the input element
+     */
     className?: string;
+    /**
+     * Custom CSS class name for the wrapper container
+     */
     wrapperClassName?: string;
+    /**
+     * Custom CSS class name for the helper text container
+     */
     helperClassName?: string;
+    /**
+     * Custom element type to render as (for composition)
+     */
     as?: React.ElementType;
+    /**
+     * React element to display before the input (e.g., icon)
+     * Commonly an Icon component
+     */
     startElement?: React.ReactElement;
+    /**
+     * React element to display after the input (e.g., icon or action button)
+     * Commonly an Icon component or clear button
+     */
     endElement?: React.ReactElement;
+    /**
+     * Custom Emotion CSS styles
+     */
     css?: Interpolation<Theme>;
+    /**
+     * Additional props to pass directly to the underlying input element
+     * Includes all standard HTML input attributes
+     */
     inputProps?: ExtendedInputProps;
+    /**
+     * Tooltip text to display when hovering over error icon
+     * Only visible when status is 'error' and showStatusIcon is true
+     */
     errorTooltip?: string;
+    /**
+     * Tooltip text to display when hovering over success icon
+     * Only visible when status is 'success' and showStatusIcon is true
+     */
     successTooltip?: string;
+    /**
+     * Whether to show helper text below the input
+     * Displays validation errors, helper text, or character count
+     * @default false
+     */
     showHelperText?: boolean;
+    /**
+     * Whether to show status icon (error/success) inside the input
+     * Hidden when endElement is provided or input is disabled
+     * @default true
+     */
     showStatusIcon?: boolean;
+    /**
+     * Whether to show borders around the input
+     * @default true
+     */
     showBorders?: boolean;
+    /**
+     * Helper text to display below the input
+     * Only shown when showHelperText is true and no errors are present
+     */
     helperText?: string;
+    /**
+     * Maximum character length for the input
+     * When provided with showHelperText, displays character count (e.g., "45 / 100")
+     */
     maxLength?: number;
+    /**
+     * React Hook Form field error object
+     * Used to display validation error messages
+     */
     errors?: FieldError;
+    /**
+     * Keyboard event handler for keyup events
+     * Also used internally for character counting when maxLength is provided
+     */
     onKeyUp?: KeyboardEventHandler<HTMLInputElement>;
+    /**
+     * Click handler for the start element
+     * Useful for making start icons interactive (e.g., toggle password visibility)
+     */
     onStartElementClick?: (event: BaseSyntheticEvent) => void;
+    /**
+     * Click handler for the end element
+     * Useful for making end icons interactive (e.g., clear button)
+     */
     onEndElementClick?: (event: BaseSyntheticEvent) => void;
 }
+/**
+ * Status color mappings for Input component
+ * Defines the visual styling for different validation states
+ */
 export interface InputStatusColors {
     basic: Interpolation<Theme>;
     error: Interpolation<Theme>;

package/dist/components/JsonSchemaForm/fields/DateRangeField.d.ts

@@ -1,2 +1,16 @@
 import { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
-export declare const DateRangeField: <T = unknown, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = Record<string, unknown>>(props: FieldProps<T, S, F>) => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * DateRangeField - RJSF adapter for DateRangePicker
+ *
+ * Uses DateRangePickerFormBridge so that:
+ * - Format conversion: formData (outputFormat) → DateRangePicker (inputFormat) happens in the bridge
+ * - "Present" handling: form stores PRESENT_VALUE string; picker only sees null (see bridge)
+ *
+ * SCHEMA REQUIREMENT: type must be "object" with properties start and end (each typically type: "string").
+ *
+ * USAGE (example schemas):
+ * - Both optional: { type: "object", properties: { start: { type: "string" }, end: { type: "string" } } }
+ * - Only start required: same + required: ["start"]
+ * - Both required (or "present" for end): same + required: ["start", "end"]  // "present" satisfies string
+ */
+export declare const DateRangeField: <T = unknown, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = Record<string, unknown>>(props: FieldProps<T, S, F>) => import("@emotion/react/jsx-runtime").JSX.Element | null;

package/dist/components/JsonSchemaForm/utils/dateFormats.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Common date format type used by both DatePicker and DateRangePicker
+ * Valid formats: 'mm/dd/yyyy', 'dd/mm/yyyy', 'mm/yyyy', 'yyyy'
+ *
+ * This type is shared between:
+ * - DatePicker (DatePickerFormat)
+ * - DateRangePicker (Format)
+ * Both are identical, so we use this common type for validation
+ */
+export type DateFormat = 'mm/dd/yyyy' | 'dd/mm/yyyy' | 'mm/yyyy' | 'yyyy';
+/**
+ * Common picker/calendar type used by both DatePicker and DateRangePicker
+ * Valid types: 'days', 'months', 'years'
+ *
+ * This type is shared between:
+ * - DateRangePicker (RangePickerType, CalendarType)
+ * - DatePicker (CalendarType)
+ * All are identical, so we use this common type
+ */
+export type PickerCalendarType = 'days' | 'months' | 'years';
+/**
+ * Validates if a value is a valid date format
+ * Used by both DatePicker (DateWidget) and DateRangePicker (DateRangeField)
+ *
+ * This replaces:
+ * - isValidFormat (DateRangeField)
+ * - isValidDatePickerFormat (DateWidget)
+ */
+export declare const isValidDateFormat: (value: unknown) => value is DateFormat;
+/**
+ * Valid output formats include:
+ * - Input formats: 'mm/dd/yyyy', 'dd/mm/yyyy', 'mm/yyyy', 'yyyy'
+ * - ISO formats: 'yyyy-MM-dd', 'yyyy-MM', 'yyyy'
+ *
+ * Used for outputFormat validation in DateRangeField and DateWidget
+ */
+export declare const isValidOutputFormat: (value: unknown) => value is string;

package/dist/components/JsonSchemaForm/utils/dateRangeField.d.ts

@@ -0,0 +1,24 @@
+import type { DateRangePickerProps } from '../../DateRangePicker/types';
+/**
+ * Props that need special handling (validation/transformation) or are RJSF-controlled
+ * These are extracted explicitly and NOT spread
+ */
+export type NonSpreadableProps = 'format' | 'rangePickerType' | 'outputFormat' | 'name' | 'onChange' | 'value' | 'defaultValue';
+/**
+ * Props that can be automatically spread from uiOptions
+ * New props added to DateRangePickerProps will automatically be included here
+ */
+export type SpreadableFromUiOptions = Omit<DateRangePickerProps, NonSpreadableProps>;
+/**
+ * Extract props that need transformation/validation from uiOptions
+ */
+export declare const extractTransformedProps: (uiOptions: Record<string, unknown>) => {
+    rangePickerType: import("./dateFormats").PickerCalendarType;
+    outputFormat: string;
+    format: import("./dateFormats").DateFormat | undefined;
+};
+/**
+ * Extract props that can be spread automatically from uiOptions
+ * Filters out props that need special handling
+ */
+export declare const extractSpreadableProps: (uiOptions: Record<string, unknown>) => Partial<SpreadableFromUiOptions>;

package/dist/components/JsonSchemaForm/utils/index.d.ts

@@ -1 +1,2 @@
 export * from './schema';
+export * from './dateFormats';

package/dist/components/JsonSchemaForm/utils/selectWidget.d.ts

@@ -0,0 +1,16 @@
+import type { TypeaheadProps } from '../../Typeahead/types';
+/**
+ * Props that need special handling (computed from RJSF state) or are RJSF-controlled
+ * These are extracted explicitly and NOT spread
+ */
+export type SelectWidgetNonSpreadableProps = 'name' | 'onChange' | 'onClearAll' | 'onRemoveSelectedClick' | 'onEmptyChange' | 'selectedItems' | 'isMultiple' | 'isDisabled' | 'placeholder' | 'renderOption' | 'children';
+/**
+ * Props that can be automatically spread from uiOptions
+ * New props added to TypeaheadProps will automatically be included here
+ */
+export type SelectWidgetSpreadableFromUiOptions = Omit<TypeaheadProps, SelectWidgetNonSpreadableProps>;
+/**
+ * Extract props that can be spread automatically from uiOptions
+ * Filters out props that need special handling or are computed from RJSF state
+ */
+export declare const extractSelectWidgetSpreadableProps: (uiOptions: Record<string, unknown>) => Partial<SelectWidgetSpreadableFromUiOptions>;