@ballistix.digital/react-components 7.3.0 → 7.3.1-rc-74.0

package/dist/index.d.ts

@@ -167,8 +167,8 @@ declare const _base1: {
 };
 type TAlertElementStyles = DeepPartialType<typeof _base1>;
 type TAlertElementProps = {
-    title: string;
-    message?: string;
+    title?: ReactNode;
+    message?: ReactNode;
     iconAccessor?: IconName;
     type?: 'error' | 'warn' | 'info' | 'success' | 'generic';
     isCollapsible?: boolean;
@@ -186,7 +186,7 @@ declare const _base2: {
 type TBadgeElementStyles = DeepPartialType<typeof _base2>;
 type TBadgeElementColor = 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink';
 type TBadgeElementProps = {
-    children: string | ReactNode;
+    children: ReactNode;
     color?: TBadgeElementColor;
     type?: 'normal' | 'indicator' | 'close';
     size?: 'sm' | 'lg';
@@ -227,7 +227,7 @@ declare const _base4: {
 };
 type TButtonElementStyles = DeepPartialType<typeof _base4>;
 export type TButtonElementProps = {
-    children: string | ReactNode;
+    children: ReactNode;
     innerRef?: RefObject<HTMLButtonElement | null>;
     htmlType?: 'button' | 'submit';
     type?: 'primary' | 'secondary' | 'outline';
@@ -262,7 +262,7 @@ declare const _base6: {
 type TDropdownElementStyles = DeepPartialType<typeof _base6>;
 type _TProps3 = {
     children: ReactElement | ReactElement[];
-    label?: string | ReactElement;
+    label?: ReactNode;
     trigger?: ReactNode;
     dataCy?: string;
     type?: 'button' | 'compact';
@@ -320,31 +320,51 @@ type TProgressTrackProps = {
 };
 export const ProgressTrackElement: FC<TProgressTrackProps>;
 declare const _base8: {
+    hint: string;
+    error: string;
+};
+type TInputFooterStyles = DeepPartialType<typeof _base8>;
+type TInputFooterSharedProps = {
+    hint?: ReactNode;
+    error?: ReactNode;
+    isTouched?: boolean;
+};
+declare const _base9: {
+    header: {
+        container: string;
+        labelWrapper: string;
+        label: string;
+        required: string;
+        optional: string;
+        description: string;
+    };
+};
+type TInputHeaderStyles = DeepPartialType<typeof _base9>;
+type TInputHeaderSharedProps = {
+    label?: ReactNode;
+    description?: ReactNode;
+    required?: ({ isRequired }: {
+        isRequired: boolean;
+    }) => ReactNode;
+    isRequired?: boolean;
+    isOptionalLabelHidden?: boolean;
+};
+declare const _base10: {
     container: string;
-    head: string;
     body: string;
     foot: string;
-    label: string;
-    hint: string;
     leading: string;
     input: string;
     trailing: string;
-    description: string;
     error: string;
 };
-export type TInputGroupStyles = DeepPartialType<typeof _base8>;
-export type TInputGroupFormProps = {
+export type TInputGroupStyles = DeepPartialType<typeof _base10 & TInputHeaderStyles & TInputFooterStyles>;
+export type TInputGroupFormProps = TInputHeaderSharedProps & TInputFooterSharedProps & {
     name: string;
-    label?: string | ReactNode;
-    description?: string;
     placeholder?: string;
-    leading?: string | ReactNode;
-    trailing?: string | ReactNode;
-    required?: ({ isRequired }: {
-        isRequired: boolean;
-    }) => string | ReactNode;
+    leading?: ReactNode;
+    trailing?: ReactNode;
     value: string;
-    error?: string;
     mask?: {
         mask: string;
         replacementCharacter?: string;
@@ -354,10 +374,7 @@ export type TInputGroupFormProps = {
     maxLength?: number;
     rows?: number;
     type: 'normal' | 'inset' | 'overlapping' | 'pill' | 'floored';
-    isValid?: boolean;
     isDisabled?: boolean;
-    isRequired?: boolean;
-    isTouched?: boolean;
     isSolo?: boolean;
     setRefOnLoad?: (ref: RefObject<HTMLInputElement | null>) => void;
     styles?: TInputGroupStyles;
@@ -368,7 +385,7 @@ export type TInputGroupFormProps = {
     onClick?: MouseEventHandler<HTMLTextAreaElement>;
     onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
     onClear?: never;
-    trailing?: string | ReactNode;
+    trailing?: ReactNode;
 } | {
     htmlType: 'text' | 'date';
     onChange: ChangeEventHandler<HTMLInputElement>;
@@ -384,54 +401,54 @@ export type TInputGroupFormProps = {
     onClick?: MouseEventHandler<HTMLInputElement>;
     onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
     onClear?: never;
-    trailing?: string | ReactNode;
+    trailing?: ReactNode;
 });
 export const InputGroupForm: FC<TInputGroupFormProps>;
-declare const _base9: {
+declare const _base11: {
     container: string;
     content: string;
 };
-type TContainerLayoutStyles = DeepPartialType<typeof _base9>;
+type TContainerLayoutStyles = DeepPartialType<typeof _base11>;
 type _TProps5 = {
     children: ReactNode;
     type?: 'break' | 'center' | 'fill';
     styles?: TContainerLayoutStyles;
 };
 export const ContainerLayout: FC<_TProps5>;
-declare const _base10: {
+declare const _base12: {
     container: string;
     head: string;
     line: string;
     body: string;
     content: string;
 };
-type TDividerLayoutStyles = DeepPartialType<typeof _base10>;
+type TDividerLayoutStyles = DeepPartialType<typeof _base12>;
 type _TProps6 = {
     children?: ReactNode;
     type?: 'left' | 'center' | 'right';
     styles?: TDividerLayoutStyles;
 };
 export const DividerLayout: FC<_TProps6>;
-declare const _base11: {
+declare const _base13: {
     container: string;
     list: string;
     item: string;
 };
-type TListContainerLayoutStyles = DeepPartialType<typeof _base11>;
+type TListContainerLayoutStyles = DeepPartialType<typeof _base13>;
 type _TProps7 = {
     children: ReactElement | ReactElement[];
     type?: 'fill' | 'fill-sticky' | 'center' | 'center-sticky' | 'card' | 'card-sticky';
     styles?: TListContainerLayoutStyles;
 };
 export const ListContainerLayout: FC<_TProps7>;
-declare const _base12: {
+declare const _base14: {
     container: string;
     figure: string;
     svg: string;
     title: string;
     paragraph: string;
 };
-type TMediaObjectLayoutStyles = DeepPartialType<typeof _base12>;
+type TMediaObjectLayoutStyles = DeepPartialType<typeof _base14>;
 type _TProps8 = {
     title: string;
     paragraph: string;
@@ -440,11 +457,11 @@ type _TProps8 = {
     styles?: TMediaObjectLayoutStyles;
 };
 export const MediaObjectLayout: FC<_TProps8>;
-declare const _base13: {
+declare const _base15: {
     container: string;
     section: string;
 };
-type TPanelLayoutStyles = DeepPartialType<typeof _base13>;
+type TPanelLayoutStyles = DeepPartialType<typeof _base15>;
 type TContainerProps = {
     children: ReactNode;
     type?: 'normal' | 'sticky';
@@ -460,7 +477,7 @@ export const PanelLayout: {
     Container: React.FC<TContainerProps>;
     Section: React.FC<TSectionProps>;
 };
-declare const _base14: {
+declare const _base16: {
     container: string;
     left: {
         container: string;
@@ -482,7 +499,7 @@ declare const _base14: {
     };
     divider: string;
 };
-type TPagePaginationNavigationStyles = DeepPartialType<typeof _base14>;
+type TPagePaginationNavigationStyles = DeepPartialType<typeof _base16>;
 type _TProps9 = {
     min?: number;
     max: number;
@@ -490,7 +507,7 @@ type _TProps9 = {
     onChange?: (current: number) => void;
 };
 export const PagePaginationNavigation: React.FC<_TProps9>;
-declare const _base15: {
+declare const _base17: {
     container: string;
     mobile: {
         container: string;
@@ -513,14 +530,11 @@ declare const _base15: {
     icon: string;
     pageSizeList: string;
 };
-type TPanelPaginationNavigationStyles = DeepPartialType<typeof _base15>;
-declare const _base16: {
+type TPanelPaginationNavigationStyles = DeepPartialType<typeof _base17>;
+declare const _base18: {
     container: string;
-    head: string;
     body: string;
     foot: string;
-    label: string;
-    hint: string;
     leading: string;
     input: string;
     menuButton: string;
@@ -542,10 +556,10 @@ declare const _base16: {
     description: string;
     error: string;
 };
-export type TSelectMenuFormStyles = DeepPartialType<typeof _base16>;
-export type TSelectMenuFormProps = {
+export type TSelectMenuFormStyles = DeepPartialType<typeof _base18 & TInputHeaderStyles>;
+export type TSelectMenuFormProps = TInputHeaderSharedProps & {
     name: string;
-    label?: string;
+    iconAccessor?: IconName;
     description?: string;
     placeholder?: {
         select?: string;
@@ -556,9 +570,6 @@ export type TSelectMenuFormProps = {
         value: string;
         label: string;
     }[];
-    required?: ({ isRequired }: {
-        isRequired: boolean;
-    }) => string | ReactNode;
     value: {
         label: string;
         value: string;
@@ -566,7 +577,6 @@ export type TSelectMenuFormProps = {
     };
     error?: string | Option | Option[];
     isLoading?: boolean;
-    isRequired?: boolean;
     isTouched?: boolean;
     isDisabled?: boolean;
     isClearable?: boolean;
@@ -619,7 +629,7 @@ type TReturn<TData> = {
     write: (sheets: TExcelSheet[], options: TOptions) => void;
 };
 export const useExcel: <TData extends object>() => TReturn<TData>;
-declare const _base17: {
+declare const _base19: {
     container: string;
     head: {
         container: string;
@@ -673,7 +683,7 @@ declare const _base17: {
         };
     };
 };
-export type TTableListStyles = DeepPartialType<typeof _base17>;
+export type TTableListStyles = DeepPartialType<typeof _base19>;
 type TData = any;
 type VisibilityState = Record<string, boolean>;
 export type TTableListProps<TData> = {
@@ -714,7 +724,7 @@ export type TTableListProps<TData> = {
     onPaginate?: (current: number) => void;
 };
 export const TableList: FC<TTableListProps<TData>>;
-declare const _base18: {
+declare const _base20: {
     container: string;
     head: string;
     body: {
@@ -779,7 +789,7 @@ declare const _base18: {
     foot: string;
     leftSide: string;
 };
-type _TTableListStyles1 = DeepPartialType<typeof _base18>;
+type _TTableListStyles1 = DeepPartialType<typeof _base20>;
 type _TData1 = any;
 type _VisibilityState1 = Record<string, boolean>;
 type Params = {
@@ -848,7 +858,7 @@ export type TTableList2Props<_TData1> = {
 };
 export const TableList2: FC<TTableList2Props<_TData1>>;
 export const createColumnHelper: <TData>() => ColumnHelper<TData>;
-declare const _base19: {
+declare const _base21: {
     container: string;
     list: string;
     separator: string;
@@ -865,7 +875,7 @@ declare const _base19: {
         link: string;
     };
 };
-type TBreadcrumbsNavigationStyles = DeepPartialType<typeof _base19>;
+type TBreadcrumbsNavigationStyles = DeepPartialType<typeof _base21>;
 type _TProps11 = {
     href: string;
     pages: {
@@ -970,7 +980,7 @@ export const VerticalNavigation: {
     Item: React.FC<_TNavigationItemProps1>;
     View: React.FC<_TViewProps1>;
 };
-declare const _base20: {
+declare const _base22: {
     container: string;
     background: {
         container: string;
@@ -999,7 +1009,7 @@ declare const _base20: {
         };
     };
 };
-type TModalOverlayStyles = DeepPartialType<typeof _base20>;
+type TModalOverlayStyles = DeepPartialType<typeof _base22>;
 export type TModalOverlayProps = {
     trigger?: ({ handleOpen, handleClose }: {
         handleOpen: () => void;
@@ -1016,7 +1026,7 @@ export type TModalOverlayProps = {
     onClose?: () => void;
 };
 export const ModalOverlay: FC<TModalOverlayProps>;
-declare const _base21: {
+declare const _base23: {
     container: {
         outer: string;
         inner: string;
@@ -1041,7 +1051,7 @@ declare const _base21: {
         };
     };
 };
-type TNotificationOverlayStyles = DeepPartialType<typeof _base21>;
+type TNotificationOverlayStyles = DeepPartialType<typeof _base23>;
 type _TProps12 = {
     trigger?: ({ onOpen, onClose }: {
         onOpen: () => void;
@@ -1061,7 +1071,7 @@ export const NotificationOverlay: {
     }) => JSX.Element;
     Item: React.FC<_TProps12>;
 };
-declare const _base22: {
+declare const _base24: {
     container: string;
     background: {
         container: string;
@@ -1091,7 +1101,7 @@ declare const _base22: {
         };
     };
 };
-type TSlideOverOverlayStyles = DeepPartialType<typeof _base22>;
+type TSlideOverOverlayStyles = DeepPartialType<typeof _base24>;
 type _TProps13 = {
     trigger?: ({ handleOpen, handleClose }: {
         handleOpen: () => void;
@@ -1197,7 +1207,7 @@ type _TReturn1 = {
      * @returns The cell object containing the string representation of the option.
      */
     toOptionCell: (cell: {
-        label: string | ReactNode;
+        label: ReactNode;
         value: string;
         export?: string;
     }) => TStringCell;
@@ -1336,7 +1346,7 @@ export const toTimeValue: TTimeFormatFunction;
  *  latestDateString(["2025-01-06", undefined, "2025-01-07"]); // => "2025-01-07"
  */
 export const latestDateString: (dates?: Array<string | undefined>) => string;
-declare const _base23: {
+declare const _base25: {
     container: string;
     head: string;
     body: string;
@@ -1344,17 +1354,18 @@ declare const _base23: {
     label: string;
     hint: string;
     leading: string;
+    inputWrapper: string;
     input: string;
     trailing: string;
     description: string;
     error: string;
 };
-export type TDateMenuFormStyles = DeepPartialType<typeof _base23>;
+export type TDateMenuFormStyles = DeepPartialType<typeof _base25>;
 export type TDateRangeMenuFormProps = {
     name: string;
     type?: 'normal' | 'inset' | 'overlapping' | 'pill' | 'floored';
     size?: 'compact' | 'expanded';
-    label?: string;
+    label?: ReactNode;
     i18n?: string;
     description?: string;
     placeholder?: string;
@@ -1368,7 +1379,7 @@ export type TDateRangeMenuFormProps = {
     icon?: (isOpen: boolean) => ReactNode;
     required?: ({ isRequired }: {
         isRequired: boolean;
-    }) => string | ReactNode;
+    }) => ReactNode;
     value: {
         startDate: DateType;
         endDate: DateType;
@@ -1394,7 +1405,7 @@ export type TDateMenuFormProps = Omit<TDateRangeMenuFormProps, 'value' | 'isRang
     onChange?: (value: DateType) => void;
 };
 export const DateMenuForm: FC<TDateMenuFormProps>;
-declare const _base24: {
+declare const _base26: {
     container: string;
     sr: string;
     list: string;
@@ -1407,7 +1418,7 @@ declare const _base24: {
         description: string;
     };
 };
-export type TCheckboxInputGroupFormStyles = DeepPartialType<typeof _base24>;
+export type TCheckboxInputGroupFormStyles = DeepPartialType<typeof _base26>;
 export type TCheckboxInputGroupFormProps = {
     name: string;
     form: FormikProps<FormikValues>;
@@ -1422,7 +1433,7 @@ export type TCheckboxInputGroupFormProps = {
     styles?: TCheckboxInputGroupFormStyles;
 };
 export const __DEPRECATED__CheckboxInputGroupForm: FC<TCheckboxInputGroupFormProps>;
-declare const _base25: {
+declare const _base27: {
     container: string;
     head: string;
     body: string;
@@ -1432,7 +1443,7 @@ declare const _base25: {
     label: string;
     description: string;
 };
-export type TCheckboxInputFormStyles = DeepPartialType<typeof _base25>;
+export type TCheckboxInputFormStyles = DeepPartialType<typeof _base27>;
 export type TCheckboxInputFormProps = {
     name: string;
     title?: string;
@@ -1455,79 +1466,42 @@ export type TCheckboxInputFormProps = {
     isIndeterminable?: true;
 });
 export const CheckboxInput: FC<TCheckboxInputFormProps>;
-declare const _styles2: {
-    base: {
-        label: string;
+declare const _base28: {
+    container: string;
+    foot: string;
+    switch: {
         container: string;
-        head: string;
-        hint: string;
-        foot: string;
-        description: string;
-        switch: {
-            container: string;
-            base: string;
-            screenreader: string;
-            checked: string;
-            unchecked: string;
-            disabled: string;
-        };
-        toggle: {
-            base: string;
-            checked: string;
-            unchecked: string;
-        };
-        icon: {
-            base: string;
-            hidden: string;
-            shown: string;
-            icon: string;
-        };
-        error: string;
+        _base28: string;
+        screenreader: string;
+        checked: string;
+        unchecked: string;
+        disabled: string;
     };
-    md: {
-        switch: {
-            base: string;
-        };
-        toggle: {
-            base: string;
-        };
+    toggle: {
+        _base28: string;
+        checked: string;
+        unchecked: string;
     };
-    sm: {
-        switch: {
-            base: string;
-        };
-        toggle: {
-            base: string;
-            checked: string;
-        };
+    icon: {
+        _base28: string;
+        hidden: string;
+        shown: string;
+        icon: string;
     };
 };
-export type TSwitchStylesForm = DeepPartialType<typeof _styles2>;
-export type TSwitchFormProps = {
+export type TSwitchStylesForm = DeepPartialType<typeof _base28> & TInputFooterStyles & TInputHeaderStyles;
+export type TSwitchFormProps = TInputHeaderSharedProps & TInputFooterSharedProps & {
     name: string;
-    label?: ReactNode;
-    description?: string;
-    required?: ({ isRequired }: {
-        isRequired: boolean;
-    }) => string | ReactNode;
     isDisabled?: boolean;
     value: boolean;
     onChange: (value: boolean) => void;
-    isRequired?: boolean;
-    isTouched?: boolean;
-    error?: string;
     styles?: TSwitchStylesForm;
     size?: 'sm' | 'md';
-    isOptionalLabelHidden?: boolean;
-} & ({
-    iconAccessorChecked?: undefined;
-    iconAccessorUnchecked?: undefined;
-} | {
-    iconAccessorChecked: IconName;
-    iconAccessorUnchecked: IconName;
-});
+    iconAccessorChecked?: IconName;
+    iconAccessorUnchecked?: IconName;
+};
 export const SwitchForm: (props: TSwitchFormProps) => JSX.Element;
-declare const _base26: {
+declare const _base29: {
     container: string;
     head: string;
     body: string;
@@ -1540,7 +1514,7 @@ declare const _base26: {
     description: string;
     error: string;
 };
-export type TFileInputGroupFormStyles = DeepPartialType<typeof _base26>;
+export type TFileInputGroupFormStyles = DeepPartialType<typeof _base29>;
 type TFileType = {
     name: string;
     size: number;
@@ -1550,11 +1524,11 @@ type TFileType = {
 };
 export type TFileInputGroupFormProps = {
     name: string;
-    label?: string | ReactNode;
+    label?: ReactNode;
     description?: string;
     required?: ({ isRequired }: {
         isRequired: boolean;
-    }) => string | ReactNode;
+    }) => ReactNode;
     value?: TFileType;
     max?: number;
     error?: string;
@@ -1572,7 +1546,7 @@ export type TFileInputGroupFormProps = {
     styles?: TFileInputGroupFormStyles;
 };
 export const FileInputGroupForm: FC<TFileInputGroupFormProps>;
-declare const _base27: {
+declare const _base30: {
     container: string;
     head: string;
     body: string;
@@ -1585,15 +1559,15 @@ declare const _base27: {
     description: string;
     error: string;
 };
-export type TOpeningsHourInputGroupFormStyles = DeepPartialType<typeof _base27>;
+export type TOpeningsHourInputGroupFormStyles = DeepPartialType<typeof _base30>;
 export type TOpeningsHourInputGroupFormProps = {
     form: FormikContextType<any>;
     name: string;
-    label?: string | ReactNode;
+    label?: ReactNode;
     description?: string;
     required?: ({ isRequired }: {
         isRequired: boolean;
-    }) => string | ReactNode;
+    }) => ReactNode;
     value?: any[];
     error?: string;
     lang?: 'en' | 'nl';
@@ -1607,7 +1581,7 @@ export type TOpeningsHourInputGroupFormProps = {
     handleDelete?: (id: string) => void;
 };
 export const OpeningsHourInputGroupForm: FC<TOpeningsHourInputGroupFormProps>;
-declare const _base28: {
+declare const _base31: {
     container: string;
     head: string;
     body: string;
@@ -1625,7 +1599,7 @@ declare const _base28: {
         suggestsHiddenClassName: string;
     };
 };
-export type TAddressInputGroupFormStyles = DeepPartialType<typeof _base28>;
+export type TAddressInputGroupFormStyles = DeepPartialType<typeof _base31>;
 export type TAddressInputGroupFormValue = {
     country: string;
     city: string;
@@ -1639,12 +1613,12 @@ export type TAddressInputGroupFormValue = {
 } | null;
 export type TAddressInputGroupFormProps = {
     name: string;
-    label?: string | ReactNode;
+    label?: ReactNode;
     description?: string;
     placeholder?: string;
     required?: ({ isRequired }: {
         isRequired: boolean;
-    }) => string | ReactNode;
+    }) => ReactNode;
     value?: any;
     error?: string;
     type?: 'normal' | 'inset' | 'overlapping' | 'pill' | 'floored';