@juspay/blend-design-system 0.0.30 → 0.0.31-beta

package/dist/components/Button/button.tokens.d.ts

@@ -18,6 +18,9 @@ import { BreakpointType } from '../../breakpoints/breakPoints';
  */
 export type ButtonTokensType = {
     gap: CSSObject['gap'];
+    slotMaxHeight: {
+        [key in ButtonSize]: CSSObject['maxHeight'];
+    };
     backgroundColor: {
         [key in ButtonType]: {
             [key in ButtonSubType]: {

package/dist/components/Card/card.tokens.d.ts

@@ -26,10 +26,15 @@ export type CardTokenType = {
     boxShadow: CSSObject['boxShadow'];
     backgroundColor: CSSObject['backgroundColor'];
     padding: {
-        [key in CardVariant]: {
+        [CardVariant.DEFAULT]: {
             x: CSSObject['padding'];
             y: CSSObject['padding'];
         };
+        [CardVariant.ALIGNED]: {
+            x: CSSObject['padding'];
+            y: CSSObject['padding'];
+        };
+        [CardVariant.CUSTOM]: undefined;
     };
     header: {
         [CardVariant.DEFAULT]: {

package/dist/components/Charts/chart.tokens.d.ts

@@ -21,6 +21,9 @@ export type ChartTokensType = {
     content: {
         legend: {
             gap: CSSObject['gap'];
+            dropdown: {
+                maxHeight: CSSObject['maxHeight'];
+            };
             item: {
                 gap: CSSObject['gap'];
                 color: {

package/dist/components/CodeEditor/CodeEditorHeader.d.ts

@@ -4,10 +4,11 @@ type CodeEditorHeaderProps = {
     header: string;
     headerLeftSlot?: ReactNode;
     headerRightSlot?: ReactNode;
+    showLeftIcon: boolean;
     showCopyButton: boolean;
     isCopied: boolean;
     onCopy: () => void;
     tokens: CodeBlockTokenType;
 };
-export declare const CodeEditorHeader: ({ header, headerLeftSlot, headerRightSlot, showCopyButton, isCopied, onCopy, tokens, }: CodeEditorHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CodeEditorHeader: ({ header, headerLeftSlot, headerRightSlot, showLeftIcon, showCopyButton, isCopied, onCopy, tokens, }: CodeEditorHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/CodeEditor/MonacoEditorWrapper.d.ts

@@ -13,6 +13,12 @@ type MonacoEditorWrapperProps = {
     tokens: CodeBlockTokenType;
     onFocus?: () => void;
     onBlur?: () => void;
+    /**
+     * When true, automatically focuses the editor when it mounts.
+     * When false or undefined, the editor will not auto-focus.
+     * Defaults to false.
+     */
+    autoFocus?: boolean;
 };
-export declare const MonacoEditorWrapper: ({ value, language, onChange, readOnly, disabled, placeholder, showLineNumbers, minHeight, maxHeight, height, tokens, onFocus, onBlur, }: MonacoEditorWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MonacoEditorWrapper: ({ value, language, onChange, readOnly, disabled, placeholder, showLineNumbers, minHeight, maxHeight, height, tokens, onFocus, onBlur, autoFocus, }: MonacoEditorWrapperProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -11,8 +11,22 @@ export type CodeEditorProps = {
     showLineNumbers?: boolean;
     showHeader?: boolean;
     header?: string;
+    /**
+     * Custom content to display on the left side of the header, before the header text.
+     * If provided, replaces the default FileCode icon.
+     */
     headerLeftSlot?: ReactNode;
+    /**
+     * Custom content to display on the right side of the header, after the header text.
+     * Uses the same gap as the left icon.
+     */
     headerRightSlot?: ReactNode;
+    /**
+     * When false, hides the default left FileCode icon.
+     * Has no effect if headerLeftSlot is provided.
+     * Defaults to true.
+     */
+    showLeftIcon?: boolean;
     showCopyButton?: boolean;
     language?: SupportedLanguage;
     placeholder?: string;
@@ -24,4 +38,10 @@ export type CodeEditorProps = {
     className?: string;
     onBlur?: () => void;
     onFocus?: () => void;
+    /**
+     * When true, automatically focuses the editor when it mounts.
+     * When false or undefined, the editor will not auto-focus.
+     * Defaults to false.
+     */
+    autoFocus?: boolean;
 };

package/dist/components/DataTable/DataTableHeader/types.d.ts

@@ -1,4 +1,5 @@
 import { ColumnDefinition, SearchConfig, AdvancedFilterProps } from '../types';
+import { TooltipSide, TooltipAlign, TooltipSize } from '../../Tooltip/types';
 export type DataTableHeaderProps<T extends Record<string, unknown>> = {
     title?: string;
     description?: string;
@@ -18,4 +19,12 @@ export type DataTableHeaderProps<T extends Record<string, unknown>> = {
     headerSlot1?: React.ReactNode;
     headerSlot2?: React.ReactNode;
     headerSlot3?: React.ReactNode;
+    descriptionTooltipProps?: {
+        side?: TooltipSide;
+        align?: TooltipAlign;
+        size?: TooltipSize;
+        showArrow?: boolean;
+        delayDuration?: number;
+        offset?: number;
+    };
 };

package/dist/components/DataTable/TableBody/BulkActionBar.d.ts

@@ -3,6 +3,7 @@ export type BulkActionBarProps = {
     onExport: () => void;
     onDeselectAll: () => void;
     customActions?: React.ReactNode;
+    showExport?: boolean;
 };
 declare const BulkActionBar: import('react').ForwardRefExoticComponent<BulkActionBarProps & import('react').RefAttributes<HTMLDivElement>>;
 export default BulkActionBar;

package/dist/components/DataTable/TableHeader/utils.d.ts

@@ -26,4 +26,8 @@ export declare const getFrozenColumnStyles: (index: number, columnFreeze: number
     zIndex: number;
     backgroundColor: string;
     padding: string;
+    width: string;
+    minWidth: string;
+    maxWidth: string;
+    boxSizing: "border-box";
 };

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

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { ButtonType, ButtonSize, ButtonSubType } from '../Button/types';
 import { SkeletonVariant } from '../Skeleton/skeleton.tokens';
+import { TooltipSide, TooltipAlign, TooltipSize } from '../Tooltip/types';
 export declare enum SortDirection {
     NONE = "none",
     ASCENDING = "asc",
@@ -198,6 +199,7 @@ export type BulkActionsConfig = {
     onSelectAll?: () => void;
     onDeselectAll?: () => void;
     customActions?: ReactNode;
+    showExport?: boolean;
 };
 export type RowActionConfig<T extends Record<string, unknown>> = {
     id: string;
@@ -222,6 +224,14 @@ export type DataTableProps<T extends Record<string, unknown>> = {
     idField: keyof T;
     title?: string;
     description?: string;
+    descriptionTooltipProps?: {
+        side?: TooltipSide;
+        align?: TooltipAlign;
+        size?: TooltipSize;
+        showArrow?: boolean;
+        delayDuration?: number;
+        offset?: number;
+    };
     className?: string;
     isHoverable?: boolean;
     defaultSort?: SortConfig;

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

@@ -271,6 +271,16 @@ export type DateRangePickerProps = {
     triggerConfig?: TriggerConfig;
     maxMenuHeight?: number;
     showPreset?: boolean;
+    /**
+     * IANA timezone string (e.g., "America/New_York", "Europe/London", "Asia/Tokyo")
+     * When provided, all date/time operations use this timezone.
+     * Presets like "yesterday" or "today" are calculated in this timezone.
+     * Defaults to system timezone if not provided.
+     * @example timezone="America/New_York"
+     * @example timezone="Asia/Tokyo"
+     * @see https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
+     */
+    timezone?: string;
 };
 export type PresetItemProps = {
     preset: DateRangePreset;

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

@@ -1,12 +1,54 @@
 import { DateRange, DateRangePreset, DateFormatConfig, CustomFormatFunction, HapticFeedbackType, CustomPresetConfig, CustomPresetDefinition, PresetsConfig, CustomRangeConfig } from './types';
 import { CalendarTokenType } from './dateRangePicker.tokens';
+/**
+ * Gets the date components (year, month, day, etc.) for a given Date in a specific timezone
+ * @param date The date to get components for
+ * @param timezone IANA timezone string (e.g., "America/New_York")
+ * @returns Object with date components in the target timezone
+ */
+export declare const getDatePartsInTimezone: (date: Date, timezone: string) => {
+    year: number;
+    month: number;
+    day: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+};
+/**
+ * Creates a Date object representing a specific moment in a timezone
+ * This interprets the given date/time as being in the target timezone and returns
+ * the equivalent JavaScript Date object (which is always in UTC internally)
+ *
+ * @param timezone IANA timezone string (e.g., "America/New_York")
+ * @param year Year
+ * @param month Month (0-11)
+ * @param day Day of month (1-31)
+ * @param hours Hours (0-23)
+ * @param minutes Minutes (0-59)
+ * @param seconds Seconds (0-59)
+ * @returns Date object
+ */
+export declare const createDateInTimezone: (timezone: string | undefined, year: number, month: number, day: number, hours?: number, minutes?: number, seconds?: number) => Date;
+/**
+ * Gets the current date/time
+ * @param _timezone Timezone parameter (not used - now is the same moment everywhere)
+ * @returns Current Date object
+ */
+export declare const getNowInTimezone: (_timezone: string | undefined) => Date;
+/**
+ * Gets today's date (at midnight) in the specified timezone
+ * @param timezone IANA timezone string
+ * @returns Date object representing today at 00:00:00 in the specified timezone
+ */
+export declare const getTodayInTimezone: (timezone: string | undefined) => Date;
 /**
  * Formats a date according to the specified format
  * @param date The date to format
  * @param format The format string (e.g., "dd/MM/yyyy")
+ * @param timezone Optional IANA timezone string
  * @returns The formatted date string or empty string if date is invalid
  */
-export declare const formatDate: (date: Date, format: string) => string;
+export declare const formatDate: (date: Date, format: string, timezone?: string) => string;
 /**
  * Parses a date string according to the specified format
  * @param dateString The date string to parse
@@ -36,9 +78,10 @@ export declare const formatDateRange: (range: DateRange, showTime?: boolean) =>
 /**
  * Gets a date range based on a preset
  * @param preset The preset to get the range for
+ * @param timezone Optional IANA timezone string for timezone-aware calculations
  * @returns The date range for the preset
  */
-export declare const getPresetDateRange: (preset: DateRangePreset) => DateRange;
+export declare const getPresetDateRange: (preset: DateRangePreset, timezone?: string) => DateRange;
 /**
  * Gets a label for a preset
  * @param preset The preset to get the label for
@@ -134,7 +177,7 @@ export declare const isDateToday: (date: Date, today: Date) => boolean;
  * @param date The date to create a range for
  * @returns DateRange spanning the entire day (same date, different times)
  */
-export declare const createSingleDateRange: (date: Date) => DateRange;
+export declare const createSingleDateRange: (date: Date, timezone?: string) => DateRange;
 /**
  * Handles date click logic for calendar with clean first click = start, second click = end pattern
  * @param clickedDate The date that was clicked
@@ -358,7 +401,7 @@ export declare const isDateInputComplete: (value: string, format: string) => boo
  * @param allowSingleDateSelection Whether single date selection is allowed
  * @returns Formatted display string
  */
-export declare const formatDateDisplay: (selectedRange: DateRange, allowSingleDateSelection?: boolean) => string;
+export declare const formatDateDisplay: (selectedRange: DateRange, allowSingleDateSelection?: boolean, timezone?: string) => string;
 /**
  * Handles date input change with formatting and validation
  * @param value Input value
@@ -391,7 +434,7 @@ export declare const handleTimeChange: (time: string, currentRange: DateRange, i
  * @param dateFormat Date format string
  * @returns Object with updated range and formatted date strings
  */
-export declare const handleCalendarDateSelect: (range: DateRange, startTime: string, endTime: string, dateFormat: string) => {
+export declare const handleCalendarDateSelect: (range: DateRange, startTime: string, endTime: string, dateFormat: string, timezone?: string) => {
     updatedRange: DateRange;
     formattedStartDate: string;
     formattedEndDate: string;
@@ -402,7 +445,7 @@ export declare const handleCalendarDateSelect: (range: DateRange, startTime: str
  * @param dateFormat Date format string
  * @returns Object with updated range, formatted dates, and times
  */
-export declare const handlePresetSelection: (preset: DateRangePreset, dateFormat: string) => {
+export declare const handlePresetSelection: (preset: DateRangePreset, dateFormat: string, timezone?: string) => {
     updatedRange: DateRange;
     formattedStartDate: string;
     formattedEndDate: string;
@@ -535,7 +578,7 @@ export declare const getPresetDisplayLabel: (preset: DateRangePreset) => string;
  * @param config Format configuration
  * @returns Formatted date range string
  */
-export declare const formatDateRangeWithConfig: (range: DateRange, config?: DateFormatConfig) => string;
+export declare const formatDateRangeWithConfig: (range: DateRange, config?: DateFormatConfig, timezone?: string) => string;
 /**
  * Creates a custom trigger element with enhanced formatting
  * @param range Current selected date range
@@ -543,7 +586,7 @@ export declare const formatDateRangeWithConfig: (range: DateRange, config?: Date
  * @param placeholder Placeholder text when no range is selected
  * @returns Formatted display string for trigger
  */
-export declare const formatTriggerDisplay: (range: DateRange | undefined, config?: DateFormatConfig, placeholder?: string) => string;
+export declare const formatTriggerDisplay: (range: DateRange | undefined, config?: DateFormatConfig, placeholder?: string, timezone?: string) => string;
 /**
  * Predefined format configurations for common use cases
  */

package/dist/components/Inputs/NumberInput/NumberInput.d.ts

@@ -1,3 +1,3 @@
 import { NumberInputProps } from './types';
-declare const NumberInput: ({ value, onChange, min, max, step, error, errorMessage, required, disabled, size, placeholder, sublabel, helpIconHintText, label, hintText, name, onBlur, onFocus, ...rest }: NumberInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const NumberInput: ({ value, onChange, min, max, step, error, errorMessage, required, disabled, size, placeholder, sublabel, helpIconHintText, label, hintText, name, preventNegative, onBlur, onFocus, ...rest }: NumberInputProps) => import("react/jsx-runtime").JSX.Element;
 export default NumberInput;

package/dist/components/Inputs/NumberInput/types.d.ts

@@ -13,6 +13,7 @@ export type NumberInputProps = {
     sublabel?: string;
     helpIconHintText?: string;
     hintText?: string;
+    preventNegative?: boolean;
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
     onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'value' | 'onBlur' | 'onFocus'>;

package/dist/components/Inputs/NumberInput/utils.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Sanitizes a number input string to ensure it's a valid number format
+ * Similar to Chakra UI's number input sanitization behavior
+ *
+ * @param inputValue - The raw input string value
+ * @param allowNegative - Whether negative numbers are allowed
+ * @returns Sanitized string value
+ */
+export declare const sanitizeNumberInput: (inputValue: string, allowNegative?: boolean) => string;
+/**
+ * Clamps and sanitizes the value on blur
+ * Similar to Chakra UI's clampValueOnBlur behavior
+ *
+ * @param inputValue - The input string value
+ * @param allowNegative - Whether negative numbers are allowed
+ * @param min - Minimum allowed value
+ * @param max - Maximum allowed value
+ * @returns Clamped and sanitized number value or empty string
+ */
+export declare const clampValueOnBlur: (inputValue: string, allowNegative?: boolean, min?: number, max?: number) => string;
+/**
+ * Validates if a string represents a valid number
+ *
+ * @param value - The string value to validate
+ * @returns True if valid number, false otherwise
+ */
+export declare const isValidNumber: (value: string) => boolean;

package/dist/components/Inputs/SearchInput/SearchInput.d.ts

@@ -4,5 +4,8 @@ declare const SearchInput: import('react').ForwardRefExoticComponent<{
     error?: boolean;
     value?: string;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    allowClear?: boolean;
+    onClear?: () => void;
+    clearIcon?: React.ReactNode;
 } & Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "size" | "style" | "className"> & import('react').RefAttributes<HTMLInputElement>>;
 export default SearchInput;

package/dist/components/Inputs/SearchInput/types.d.ts

@@ -4,4 +4,7 @@ export type SearchInputProps = {
     error?: boolean;
     value?: string;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    allowClear?: boolean;
+    onClear?: () => void;
+    clearIcon?: React.ReactNode;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className'>;

package/dist/components/Inputs/TextInput/textInput.tokens.d.ts

@@ -3,6 +3,10 @@ import { FoundationTokenType } from '../../../tokens/theme.token';
 import { TextInputSize, TextInputState } from './types';
 import { BreakpointType } from '../../../breakpoints/breakPoints';
 export type TextInputTokensType = {
+    placeholder: {
+        color: CSSObject['color'];
+        fontWeight: CSSObject['fontWeight'];
+    };
     gap: CSSObject['gap'];
     label: {
         fontSize: CSSObject['fontSize'];

package/dist/components/Inputs/utils/InputFooter/InputFooter.d.ts

@@ -17,12 +17,11 @@ type InputFooterProps = {
     error?: boolean;
     errorMessage?: string;
     hintText?: string;
-    disabled?: boolean;
     errorId?: string;
     hintId?: string;
     tokens?: InputFooterTokens;
     hintTextId?: string;
     errorMessageId?: string;
 };
-declare const InputFooter: ({ error, errorMessage, hintText, disabled, errorId, hintId, tokens, hintTextId, errorMessageId, }: InputFooterProps) => "" | import("react/jsx-runtime").JSX.Element | undefined;
+declare const InputFooter: ({ error, errorMessage, hintText, errorId, hintId, tokens, hintTextId, errorMessageId, }: InputFooterProps) => "" | import("react/jsx-runtime").JSX.Element | undefined;
 export default InputFooter;

package/dist/components/Inputs/utils/InputLabels/InputLabels.d.ts

@@ -29,7 +29,6 @@ type InputLabelTokens = {
 type InputLabelsProps<TTokens extends InputLabelTokens = InputLabelTokens> = {
     label?: string;
     sublabel?: string;
-    disabled?: boolean;
     helpIconHintText?: string;
     name?: string;
     inputId?: string;
@@ -46,5 +45,5 @@ type InputLabelsProps<TTokens extends InputLabelTokens = InputLabelTokens> = {
  * @param {string} inputId - Unique ID for proper label association (WCAG 3.3.2).
  * @param {boolean} required - Whether the input field is required.
  */
-declare const InputLabels: <TTokens extends InputLabelTokens>({ label, sublabel, disabled, helpIconHintText, name, inputId, required, tokens, labelId, }: InputLabelsProps<TTokens>) => "" | import("react/jsx-runtime").JSX.Element | undefined;
+declare const InputLabels: <TTokens extends InputLabelTokens>({ label, sublabel, helpIconHintText, name, inputId, required, tokens, labelId, }: InputLabelsProps<TTokens>) => "" | import("react/jsx-runtime").JSX.Element | undefined;
 export default InputLabels;

package/dist/components/Modal/modal.animations.d.ts

@@ -1,3 +1,3 @@
 export declare const modalBackdropAnimations: (isAnimatingIn: boolean) => import('styled-components').RuleSet<object>;
 export declare const modalContentAnimations: (isAnimatingIn: boolean) => import('styled-components').RuleSet<object>;
-export declare const ANIMATION_DURATION = 500;
+export declare const ANIMATION_DURATION = 300;

package/dist/components/MultiSelect/multiSelect.tokens.d.ts

@@ -81,6 +81,11 @@ export type MultiSelectTokensType = {
             fontSize: CSSObject['fontSize'];
             fontWeight: CSSObject['fontWeight'];
         };
+        selectedValue: {
+            color: CSSObject['color'];
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+        };
     };
     menu: {
         backgroundColor: CSSObject['backgroundColor'];

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

@@ -90,6 +90,13 @@ export type SidebarProps = {
      * Only applies when leftPanel is provided
      */
     panelOnlyMode?: boolean;
+    /**
+     * When true, disables the intermediate state that appears on hover
+     * When false or undefined, hovering over the collapsed sidebar will temporarily show it in an intermediate/expanded state
+     * The intermediate state allows users to see the sidebar content without fully expanding it
+     * Defaults to false (intermediate state enabled)
+     */
+    disableIntermediateState?: boolean;
     /**
      * Show primary action button in mobile navigation
      */

package/dist/components/StatCard/utils.d.ts

@@ -0,0 +1,29 @@
+import { StatCardChange, ChartDataPoint } from './types';
+/**
+ * Calculates whether the chart data is trending down (first value > last value)
+ * @param chartData - Array of chart data points
+ * @returns true if trending down, false otherwise
+ */
+export declare const calculateTrend: (chartData?: ChartDataPoint[]) => boolean;
+/**
+ * Calculates delta change from chart data (first vs last value)
+ * @param chartData - Array of chart data points
+ * @returns Calculated change object with value and valueType, or null if calculation is not possible
+ */
+export declare const calculateChangeFromChartData: (chartData?: ChartDataPoint[]) => Pick<StatCardChange, "value" | "valueType"> | null;
+/**
+ * Gets the effective change to use for display
+ * Uses provided change prop if available, otherwise calculates from chartData
+ * @param change - Optional change prop from component
+ * @param chartData - Array of chart data points
+ * @returns Effective change object or null
+ */
+export declare const getEffectiveChange: (change?: StatCardChange, chartData?: ChartDataPoint[]) => StatCardChange | Pick<StatCardChange, "value" | "valueType"> | null;
+/**
+ * Determines if decrease color should be shown
+ * Uses effectiveChange valueType if available, otherwise falls back to trend calculation
+ * @param effectiveChange - The effective change object (from prop or calculated)
+ * @param isTrendingDown - Whether chart data is trending down
+ * @returns true if decrease color should be shown, false for increase
+ */
+export declare const shouldShowDecreaseColor: (effectiveChange: StatCardChange | Pick<StatCardChange, "value" | "valueType"> | null, isTrendingDown: boolean) => boolean;

package/dist/components/Switch/switch.token.d.ts

@@ -86,6 +86,14 @@ export type SwitchTokensType = {
     required: {
         color: CSSObject['color'];
     };
+    slot: {
+        width: {
+            [key in SwitchSize]: CSSObject['width'];
+        };
+        height: {
+            [key in SwitchSize]: CSSObject['height'];
+        };
+    };
 };
 export type ResponsiveSwitchTokens = {
     [key in keyof BreakpointType]: SwitchTokensType;

package/dist/components/Switch/utils.d.ts

@@ -6,14 +6,6 @@ export declare const getSpacingBySize: (size: SwitchSize) => {
     marginLeft: string;
     marginTop: string;
 };
-/**
- * Determines if the switch component is controlled based on the checked prop
- */
-export declare const isControlledSwitch: (checked: boolean | undefined) => boolean;
-/**
- * Creates a toggle handler for switch components
- */
-export declare const createSwitchToggleHandler: (currentChecked: boolean, disabled: boolean, isControlled: boolean, setInternalChecked?: React.Dispatch<React.SetStateAction<boolean>>, onChange?: (checked: boolean) => void) => () => void;
 /**
  * Gets the text color based on switch state
  */

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

@@ -64,4 +64,5 @@ export type UploadProps = {
     isDragAccept?: boolean;
     isDragReject?: boolean;
     validator?: (file: File) => FileRejection['errors'][0] | null;
+    actionSlot?: React.ReactNode;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, 'onDrop' | 'onDragOver' | 'onDragLeave' | 'onChange'>;