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

package/dist/index.d.ts

@@ -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: ReactNode;
+    children: string | 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: ReactNode;
+    children: string | 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?: ReactNode;
+    label?: string | ReactElement;
     trigger?: ReactNode;
     dataCy?: string;
     type?: 'button' | 'compact';
@@ -320,51 +320,31 @@ 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 _base10 & TInputHeaderStyles & TInputFooterStyles>;
-export type TInputGroupFormProps = TInputHeaderSharedProps & TInputFooterSharedProps & {
+export type TInputGroupStyles = DeepPartialType<typeof _base8>;
+export type TInputGroupFormProps = {
     name: string;
+    label?: string | ReactNode;
+    description?: string;
     placeholder?: string;
-    leading?: ReactNode;
-    trailing?: ReactNode;
+    leading?: string | ReactNode;
+    trailing?: string | ReactNode;
+    required?: ({ isRequired }: {
+        isRequired: boolean;
+    }) => string | ReactNode;
     value: string;
+    error?: string;
     mask?: {
         mask: string;
         replacementCharacter?: string;
@@ -374,7 +354,10 @@ export type TInputGroupFormProps = TInputHeaderSharedProps & TInputFooterSharedP
     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;
@@ -385,7 +368,7 @@ export type TInputGroupFormProps = TInputHeaderSharedProps & TInputFooterSharedP
     onClick?: MouseEventHandler<HTMLTextAreaElement>;
     onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
     onClear?: never;
-    trailing?: ReactNode;
+    trailing?: string | ReactNode;
 } | {
     htmlType: 'text' | 'date';
     onChange: ChangeEventHandler<HTMLInputElement>;
@@ -401,54 +384,54 @@ export type TInputGroupFormProps = TInputHeaderSharedProps & TInputFooterSharedP
     onClick?: MouseEventHandler<HTMLInputElement>;
     onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
     onClear?: never;
-    trailing?: ReactNode;
+    trailing?: string | ReactNode;
 });
 export const InputGroupForm: FC<TInputGroupFormProps>;
-declare const _base11: {
+declare const _base9: {
     container: string;
     content: string;
 };
-type TContainerLayoutStyles = DeepPartialType<typeof _base11>;
+type TContainerLayoutStyles = DeepPartialType<typeof _base9>;
 type _TProps5 = {
     children: ReactNode;
     type?: 'break' | 'center' | 'fill';
     styles?: TContainerLayoutStyles;
 };
 export const ContainerLayout: FC<_TProps5>;
-declare const _base12: {
+declare const _base10: {
     container: string;
     head: string;
     line: string;
     body: string;
     content: string;
 };
-type TDividerLayoutStyles = DeepPartialType<typeof _base12>;
+type TDividerLayoutStyles = DeepPartialType<typeof _base10>;
 type _TProps6 = {
     children?: ReactNode;
     type?: 'left' | 'center' | 'right';
     styles?: TDividerLayoutStyles;
 };
 export const DividerLayout: FC<_TProps6>;
-declare const _base13: {
+declare const _base11: {
     container: string;
     list: string;
     item: string;
 };
-type TListContainerLayoutStyles = DeepPartialType<typeof _base13>;
+type TListContainerLayoutStyles = DeepPartialType<typeof _base11>;
 type _TProps7 = {
     children: ReactElement | ReactElement[];
     type?: 'fill' | 'fill-sticky' | 'center' | 'center-sticky' | 'card' | 'card-sticky';
     styles?: TListContainerLayoutStyles;
 };
 export const ListContainerLayout: FC<_TProps7>;
-declare const _base14: {
+declare const _base12: {
     container: string;
     figure: string;
     svg: string;
     title: string;
     paragraph: string;
 };
-type TMediaObjectLayoutStyles = DeepPartialType<typeof _base14>;
+type TMediaObjectLayoutStyles = DeepPartialType<typeof _base12>;
 type _TProps8 = {
     title: string;
     paragraph: string;
@@ -457,11 +440,11 @@ type _TProps8 = {
     styles?: TMediaObjectLayoutStyles;
 };
 export const MediaObjectLayout: FC<_TProps8>;
-declare const _base15: {
+declare const _base13: {
     container: string;
     section: string;
 };
-type TPanelLayoutStyles = DeepPartialType<typeof _base15>;
+type TPanelLayoutStyles = DeepPartialType<typeof _base13>;
 type TContainerProps = {
     children: ReactNode;
     type?: 'normal' | 'sticky';
@@ -477,7 +460,7 @@ export const PanelLayout: {
     Container: React.FC<TContainerProps>;
     Section: React.FC<TSectionProps>;
 };
-declare const _base16: {
+declare const _base14: {
     container: string;
     left: {
         container: string;
@@ -499,7 +482,7 @@ declare const _base16: {
     };
     divider: string;
 };
-type TPagePaginationNavigationStyles = DeepPartialType<typeof _base16>;
+type TPagePaginationNavigationStyles = DeepPartialType<typeof _base14>;
 type _TProps9 = {
     min?: number;
     max: number;
@@ -507,7 +490,7 @@ type _TProps9 = {
     onChange?: (current: number) => void;
 };
 export const PagePaginationNavigation: React.FC<_TProps9>;
-declare const _base17: {
+declare const _base15: {
     container: string;
     mobile: {
         container: string;
@@ -530,11 +513,14 @@ declare const _base17: {
     icon: string;
     pageSizeList: string;
 };
-type TPanelPaginationNavigationStyles = DeepPartialType<typeof _base17>;
-declare const _base18: {
+type TPanelPaginationNavigationStyles = DeepPartialType<typeof _base15>;
+declare const _base16: {
     container: string;
+    head: string;
     body: string;
     foot: string;
+    label: string;
+    hint: string;
     leading: string;
     input: string;
     menuButton: string;
@@ -556,10 +542,10 @@ declare const _base18: {
     description: string;
     error: string;
 };
-export type TSelectMenuFormStyles = DeepPartialType<typeof _base18 & TInputHeaderStyles>;
-export type TSelectMenuFormProps = TInputHeaderSharedProps & {
+export type TSelectMenuFormStyles = DeepPartialType<typeof _base16>;
+export type TSelectMenuFormProps = {
     name: string;
-    iconAccessor?: IconName;
+    label?: string;
     description?: string;
     placeholder?: {
         select?: string;
@@ -570,6 +556,9 @@ export type TSelectMenuFormProps = TInputHeaderSharedProps & {
         value: string;
         label: string;
     }[];
+    required?: ({ isRequired }: {
+        isRequired: boolean;
+    }) => string | ReactNode;
     value: {
         label: string;
         value: string;
@@ -577,6 +566,7 @@ export type TSelectMenuFormProps = TInputHeaderSharedProps & {
     };
     error?: string | Option | Option[];
     isLoading?: boolean;
+    isRequired?: boolean;
     isTouched?: boolean;
     isDisabled?: boolean;
     isClearable?: boolean;
@@ -629,7 +619,7 @@ type TReturn<TData> = {
     write: (sheets: TExcelSheet[], options: TOptions) => void;
 };
 export const useExcel: <TData extends object>() => TReturn<TData>;
-declare const _base19: {
+declare const _base17: {
     container: string;
     head: {
         container: string;
@@ -683,7 +673,7 @@ declare const _base19: {
         };
     };
 };
-export type TTableListStyles = DeepPartialType<typeof _base19>;
+export type TTableListStyles = DeepPartialType<typeof _base17>;
 type TData = any;
 type VisibilityState = Record<string, boolean>;
 export type TTableListProps<TData> = {
@@ -724,7 +714,7 @@ export type TTableListProps<TData> = {
     onPaginate?: (current: number) => void;
 };
 export const TableList: FC<TTableListProps<TData>>;
-declare const _base20: {
+declare const _base18: {
     container: string;
     head: string;
     body: {
@@ -789,7 +779,7 @@ declare const _base20: {
     foot: string;
     leftSide: string;
 };
-type _TTableListStyles1 = DeepPartialType<typeof _base20>;
+type _TTableListStyles1 = DeepPartialType<typeof _base18>;
 type _TData1 = any;
 type _VisibilityState1 = Record<string, boolean>;
 type Params = {
@@ -858,7 +848,7 @@ export type TTableList2Props<_TData1> = {
 };
 export const TableList2: FC<TTableList2Props<_TData1>>;
 export const createColumnHelper: <TData>() => ColumnHelper<TData>;
-declare const _base21: {
+declare const _base19: {
     container: string;
     list: string;
     separator: string;
@@ -875,7 +865,7 @@ declare const _base21: {
         link: string;
     };
 };
-type TBreadcrumbsNavigationStyles = DeepPartialType<typeof _base21>;
+type TBreadcrumbsNavigationStyles = DeepPartialType<typeof _base19>;
 type _TProps11 = {
     href: string;
     pages: {
@@ -980,7 +970,7 @@ export const VerticalNavigation: {
     Item: React.FC<_TNavigationItemProps1>;
     View: React.FC<_TViewProps1>;
 };
-declare const _base22: {
+declare const _base20: {
     container: string;
     background: {
         container: string;
@@ -1009,7 +999,7 @@ declare const _base22: {
         };
     };
 };
-type TModalOverlayStyles = DeepPartialType<typeof _base22>;
+type TModalOverlayStyles = DeepPartialType<typeof _base20>;
 export type TModalOverlayProps = {
     trigger?: ({ handleOpen, handleClose }: {
         handleOpen: () => void;
@@ -1026,7 +1016,7 @@ export type TModalOverlayProps = {
     onClose?: () => void;
 };
 export const ModalOverlay: FC<TModalOverlayProps>;
-declare const _base23: {
+declare const _base21: {
     container: {
         outer: string;
         inner: string;
@@ -1051,7 +1041,7 @@ declare const _base23: {
         };
     };
 };
-type TNotificationOverlayStyles = DeepPartialType<typeof _base23>;
+type TNotificationOverlayStyles = DeepPartialType<typeof _base21>;
 type _TProps12 = {
     trigger?: ({ onOpen, onClose }: {
         onOpen: () => void;
@@ -1071,7 +1061,7 @@ export const NotificationOverlay: {
     }) => JSX.Element;
     Item: React.FC<_TProps12>;
 };
-declare const _base24: {
+declare const _base22: {
     container: string;
     background: {
         container: string;
@@ -1101,7 +1091,7 @@ declare const _base24: {
         };
     };
 };
-type TSlideOverOverlayStyles = DeepPartialType<typeof _base24>;
+type TSlideOverOverlayStyles = DeepPartialType<typeof _base22>;
 type _TProps13 = {
     trigger?: ({ handleOpen, handleClose }: {
         handleOpen: () => void;
@@ -1207,7 +1197,7 @@ type _TReturn1 = {
      * @returns The cell object containing the string representation of the option.
      */
     toOptionCell: (cell: {
-        label: ReactNode;
+        label: string | ReactNode;
         value: string;
         export?: string;
     }) => TStringCell;
@@ -1346,7 +1336,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 _base25: {
+declare const _base23: {
     container: string;
     head: string;
     body: string;
@@ -1360,12 +1350,12 @@ declare const _base25: {
     description: string;
     error: string;
 };
-export type TDateMenuFormStyles = DeepPartialType<typeof _base25>;
+export type TDateMenuFormStyles = DeepPartialType<typeof _base23>;
 export type TDateRangeMenuFormProps = {
     name: string;
     type?: 'normal' | 'inset' | 'overlapping' | 'pill' | 'floored';
     size?: 'compact' | 'expanded';
-    label?: ReactNode;
+    label?: string;
     i18n?: string;
     description?: string;
     placeholder?: string;
@@ -1379,7 +1369,7 @@ export type TDateRangeMenuFormProps = {
     icon?: (isOpen: boolean) => ReactNode;
     required?: ({ isRequired }: {
         isRequired: boolean;
-    }) => ReactNode;
+    }) => string | ReactNode;
     value: {
         startDate: DateType;
         endDate: DateType;
@@ -1405,7 +1395,7 @@ export type TDateMenuFormProps = Omit<TDateRangeMenuFormProps, 'value' | 'isRang
     onChange?: (value: DateType) => void;
 };
 export const DateMenuForm: FC<TDateMenuFormProps>;
-declare const _base26: {
+declare const _base24: {
     container: string;
     sr: string;
     list: string;
@@ -1418,7 +1408,7 @@ declare const _base26: {
         description: string;
     };
 };
-export type TCheckboxInputGroupFormStyles = DeepPartialType<typeof _base26>;
+export type TCheckboxInputGroupFormStyles = DeepPartialType<typeof _base24>;
 export type TCheckboxInputGroupFormProps = {
     name: string;
     form: FormikProps<FormikValues>;
@@ -1433,7 +1423,7 @@ export type TCheckboxInputGroupFormProps = {
     styles?: TCheckboxInputGroupFormStyles;
 };
 export const __DEPRECATED__CheckboxInputGroupForm: FC<TCheckboxInputGroupFormProps>;
-declare const _base27: {
+declare const _base25: {
     container: string;
     head: string;
     body: string;
@@ -1443,7 +1433,7 @@ declare const _base27: {
     label: string;
     description: string;
 };
-export type TCheckboxInputFormStyles = DeepPartialType<typeof _base27>;
+export type TCheckboxInputFormStyles = DeepPartialType<typeof _base25>;
 export type TCheckboxInputFormProps = {
     name: string;
     title?: string;
@@ -1466,42 +1456,75 @@ export type TCheckboxInputFormProps = {
     isIndeterminable?: true;
 });
 export const CheckboxInput: FC<TCheckboxInputFormProps>;
-declare const _base28: {
-    container: string;
-    foot: string;
-    switch: {
+declare const _styles2: {
+    base: {
+        label: string;
         container: string;
-        _base28: string;
-        screenreader: string;
-        checked: string;
-        unchecked: string;
-        disabled: 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;
     };
-    toggle: {
-        _base28: string;
-        checked: string;
-        unchecked: string;
+    md: {
+        switch: {
+            base: string;
+        };
+        toggle: {
+            base: string;
+        };
     };
-    icon: {
-        _base28: string;
-        hidden: string;
-        shown: string;
-        icon: string;
+    sm: {
+        switch: {
+            base: string;
+        };
+        toggle: {
+            base: string;
+            checked: string;
+        };
     };
 };
-export type TSwitchStylesForm = DeepPartialType<typeof _base28> & TInputFooterStyles & TInputHeaderStyles;
-export type TSwitchFormProps = TInputHeaderSharedProps & TInputFooterSharedProps & {
+export type TSwitchStylesForm = DeepPartialType<typeof _styles2>;
+export type TSwitchFormProps = {
     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?: IconName;
     iconAccessorUnchecked?: IconName;
 };
 export const SwitchForm: (props: TSwitchFormProps) => JSX.Element;
-declare const _base29: {
+declare const _base26: {
     container: string;
     head: string;
     body: string;
@@ -1514,7 +1537,7 @@ declare const _base29: {
     description: string;
     error: string;
 };
-export type TFileInputGroupFormStyles = DeepPartialType<typeof _base29>;
+export type TFileInputGroupFormStyles = DeepPartialType<typeof _base26>;
 type TFileType = {
     name: string;
     size: number;
@@ -1524,11 +1547,11 @@ type TFileType = {
 };
 export type TFileInputGroupFormProps = {
     name: string;
-    label?: ReactNode;
+    label?: string | ReactNode;
     description?: string;
     required?: ({ isRequired }: {
         isRequired: boolean;
-    }) => ReactNode;
+    }) => string | ReactNode;
     value?: TFileType;
     max?: number;
     error?: string;
@@ -1546,7 +1569,7 @@ export type TFileInputGroupFormProps = {
     styles?: TFileInputGroupFormStyles;
 };
 export const FileInputGroupForm: FC<TFileInputGroupFormProps>;
-declare const _base30: {
+declare const _base27: {
     container: string;
     head: string;
     body: string;
@@ -1559,15 +1582,15 @@ declare const _base30: {
     description: string;
     error: string;
 };
-export type TOpeningsHourInputGroupFormStyles = DeepPartialType<typeof _base30>;
+export type TOpeningsHourInputGroupFormStyles = DeepPartialType<typeof _base27>;
 export type TOpeningsHourInputGroupFormProps = {
     form: FormikContextType<any>;
     name: string;
-    label?: ReactNode;
+    label?: string | ReactNode;
     description?: string;
     required?: ({ isRequired }: {
         isRequired: boolean;
-    }) => ReactNode;
+    }) => string | ReactNode;
     value?: any[];
     error?: string;
     lang?: 'en' | 'nl';
@@ -1581,7 +1604,7 @@ export type TOpeningsHourInputGroupFormProps = {
     handleDelete?: (id: string) => void;
 };
 export const OpeningsHourInputGroupForm: FC<TOpeningsHourInputGroupFormProps>;
-declare const _base31: {
+declare const _base28: {
     container: string;
     head: string;
     body: string;
@@ -1599,7 +1622,7 @@ declare const _base31: {
         suggestsHiddenClassName: string;
     };
 };
-export type TAddressInputGroupFormStyles = DeepPartialType<typeof _base31>;
+export type TAddressInputGroupFormStyles = DeepPartialType<typeof _base28>;
 export type TAddressInputGroupFormValue = {
     country: string;
     city: string;
@@ -1613,12 +1636,12 @@ export type TAddressInputGroupFormValue = {
 } | null;
 export type TAddressInputGroupFormProps = {
     name: string;
-    label?: ReactNode;
+    label?: string | ReactNode;
     description?: string;
     placeholder?: string;
     required?: ({ isRequired }: {
         isRequired: boolean;
-    }) => ReactNode;
+    }) => string | ReactNode;
     value?: any;
     error?: string;
     type?: 'normal' | 'inset' | 'overlapping' | 'pill' | 'floored';