import * as React$1 from 'react'; import React__default, { ReactNode, FC, CSSProperties, ReactElement } from 'react'; import * as react_jsx_runtime from 'react/jsx-runtime'; type DynamicObj = { [key: string]: any; }; interface ButtonProps { /** * Variant of the button */ variant: 'primary' | 'secondary' | 'tertiary' | 'delete' | 'warning' | 'custom' | 'danger'; /** * What background color to use */ backgroundColor?: string; /** * What border color to use */ border?: string | number; /** * What border color to use */ size?: 'small' | 'medium' | 'large'; /** * Button contents */ label?: string; /** * Type of the button */ type?: 'button' | 'submit'; disabled?: boolean; /** * Optional click handler */ onClick?: (event: React.MouseEvent) => void; /** * Optional click handler for Copying the value */ onCopy?: (event: React.ClipboardEvent) => void; /** * Button content */ children?: ReactNode; /** * Button id */ id?: string; /** * onSubmit function handler */ onSubmit?: (event: React.MouseEvent) => void; /** * react ref for the button */ ref?: any; /** * Classname for the button */ className?: string; /** * Additional styles for the button */ style?: React.CSSProperties; /** * Give icon name availble in storybook that to be on left side of button */ iconName?: string; /** * Give icon name availble in storybook that to be on left side of button */ iconPosition?: 'left' | 'right'; transparentBackground?: boolean; /** * form to accept form id in string */ form?: string; /** * Is the Type ChooseFile for the button */ isChooseFile?: boolean; /** * Custom Width for the button */ buttonWidth?: string; /** * Custom Height for the button */ buttonHeight?: string; /** * selectedfile object will be send. */ selectedFile?: File | DynamicObj | null; /** * handleCloseIcon function will set to the initial state . */ handleCloseIcon?: () => void; /** * create custom button font size . */ fontSize?: number; /** * create custom button style . */ typographyStyle?: React.CSSProperties; iconColor?: string; } declare const Button: React$1.ForwardRefExoticComponent & React$1.RefAttributes>; interface IconProps { name: string; className?: string; height?: number; width?: number; color?: string; onClick?: (data?: any) => void; hoverEffect?: boolean; disabled?: boolean; variant?: "dark" | "light" | 'danger'; x?: string; y?: string; chartIcon?: boolean; } declare const Icon: React$1.ForwardRefExoticComponent>; interface AccordionProps$1 { /** * Accordion Header Title */ headerTitle: string | JSX.Element; /** * Content that to be shown while Accordion is expanded */ accordionContent: ReactNode; /** * Custom color for the Accordion header */ color?: string; /** * Minimum height for the Accordion */ minHeight?: string; /** * Property to disable accordion */ disable?: boolean; /** * Info message to user for disabling accordion */ disableInfoMessage?: string; /** * Icon name for the Accordion state like expand and collapse */ accordionStateIconName?: string; /** * Accordion collapse and expand Icon width */ AccordionStateIconWidth: number; /** * Accordion collapse and expand Icon height */ AccordionStateIconHeight: number; /** * Optional props for initial state of Accordion */ isExpand?: boolean; /** * Callback function for the accordion header click */ onClick?: () => void; /** * Providing className for Styles */ className?: string; iconColor?: string; /** * Providing header right content */ headerRightContent?: ReactNode; headerClassName?: string; } /** * Accordion UI component */ declare const Accordion: ({ headerTitle, color, minHeight, accordionContent, disable, disableInfoMessage, accordionStateIconName, AccordionStateIconWidth, AccordionStateIconHeight, isExpand, onClick, className, iconColor, headerRightContent, headerClassName, }: AccordionProps$1) => react_jsx_runtime.JSX.Element; type OptionValue$1 = any; interface Option$3 { [key: string]: OptionValue$1; } interface MultiSelectProps { options: Option$3[]; type?: 'email' | 'text'; label: string; selectedOptions?: Option$3[]; disabled?: boolean; onSearch?: (searchedKeyword: string) => void; onChange?: (selectedOptions: Option$3[]) => void; acceptNewOption?: boolean; zIndex?: number; required?: boolean; errorMessage?: string; withSelectButton?: boolean; onSelectButtonClick?: (selectedOptions: Option$3[]) => void; displayCount?: boolean; isAllSelected?: boolean; onToggleAllSelect?: (checkedState: boolean) => void; displayAllSelectedAsText?: boolean; placeholderForSearching?: string; isAllSelect?: boolean; /** Default is default. choose labels variant if you are using this component for labels dropdown or choose machines if you are using this component in parallel */ variant?: 'default' | 'labels' | 'machines'; /** Pass the function what to do upon clicking label plus icon */ onLabelPlusIconClick?: (_enteredKeyword: string) => Promise; /** classname to handle styling wrt to multiselect div and and labelplus icon */ className?: string; labelAccessor?: string; valueAccessor?: string; onEnter?: (newOption: string) => void; loadMoreOptions?: () => void; maxVisibleChips?: number; onBlur?: () => void; /** default max height is 160px, give max dropdown height while using jsx or want to control how many max options you want to show */ maxDropdownHeight?: number; /** * Pass true/false to show/hide tooltip for options */ showTooltip?: boolean; /** * Pass the number of characters after which tooltip should be displayed */ tooltipCharCount?: number; } declare const MultiSelect: ({ options, type, selectedOptions, onChange, acceptNewOption, zIndex, label, onSearch, required, disabled, errorMessage, displayCount: initialDisplayCount, isAllSelected, onToggleAllSelect, displayAllSelectedAsText, isAllSelect, placeholderForSearching, variant, onLabelPlusIconClick, className, onSelectButtonClick, labelAccessor, valueAccessor, withSelectButton, loadMoreOptions, onEnter, maxVisibleChips, onBlur, maxDropdownHeight, showTooltip, tooltipCharCount, }: MultiSelectProps) => react_jsx_runtime.JSX.Element; interface ToasterProps { /**Boolean value to handle state of toaster. */ isOpen: boolean; /**Variant for different type of toast message. */ variant: 'success' | 'warning' | 'danger' | 'info' | 'confirm' | 'alert'; /**Title of the toaster */ toastTitle: string; /**Message for the toaster. */ toastMessage?: string; /**Function to call upon clicking the close icon or cancel button. */ onCancelClick?: () => void; /**Function to call when confirmation the prompt. */ onConfirmation?: () => void; /**Duration in ms for which toaster will stay on the screen */ displayDuration?: number; /**Confirmation text for variant confirm. */ confirmationText?: string; /**z-index value */ zIndex?: number; /** To change the style of the toaster */ isWebsite?: boolean; } declare const Toaster: React__default.FC; interface ToggleProps { /** * Optional onChange handler */ onChange?: (event: React.MouseEvent) => void; /** * Optional disabled state */ disabled?: boolean; /** * Optional checked state */ checked?: boolean; /** * Optional id */ id?: string; /** * What background color to occur upon toggled */ variant?: 'primary' | 'secondary'; /** * Defines the size of the toggle */ size?: 'small' | 'medium' | 'large'; /** * Optional icon configuration for the toggle. This allows for custom icons to be used for both the checked and unchecked states. * * @property checked - Icon configuration for the checked state. * @property unchecked - Icon configuration for the unchecked state. * * @example * { * checked: { name: 'checked-icon', width: 24, height: 24 }, * unchecked: { name: 'unchecked-icon', width: 24, height: 24 } * } */ icon?: { checked?: { name: string; width: number; height: number; }; unchecked?: { name: string; width: number; height: number; }; }; } declare const Toggle: React__default.FC; interface ChipWithIconProps { iconName: string; content: string | JSX.Element; iconPlacement?: 'left' | 'right'; className?: string; } declare const ChipWithIcon: React__default.FC; interface TooltipProps { /** * The text or content to be displayed inside the tooltip. * This can be a string or any React node. */ title?: string | React.ReactNode; /** * The children over which the tooltip will be displayed. * Typically a button or any other interactive element. */ children: React.ReactNode; /** * The placement of the tooltip relative to the children. * Defines where the tooltip appears: top, bottom, left, right, etc. * * @default 'bottom' */ placement?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'; /** * Whether the tooltip is disabled. * If true, the tooltip will not be displayed. * * @default false */ disabled?: boolean; /** * Custom styles for the tooltip container. */ style?: React.CSSProperties; /**. * Z-Index is by default 99 * * @default 99 */ zIndex?: number | string; } declare const Tooltip: React__default.FC; interface InputProps { /** * Name | name of the input field */ name: string; /** * Label | field label to be displayed */ label?: string; /** * value | input field value */ value: string | number; /** * variants to set color/style of the input field */ variant?: 'default' | 'primary' | 'website'; /** * type to set color/style of the input field */ type: 'text' | 'password' | 'number' | 'email' | 'url' | 'time'; /** * error | If true, error message will be displayed */ error?: boolean; /** * helperText | error, success, warning message to be shown */ helperText?: string; /** * to disable the input field */ disabled?: boolean; /** * if true, input field will be mandatory */ required?: boolean; /** * placeholder for the input field */ placeholder?: string; /** * classnames to style the input field */ className?: string; /** * classnames to style the input field container */ containerClassName?: string; /** * noBorder prop 'true' removes border of input */ noBorder?: boolean; /** * onChange, onKeyDown, onBlur, onFocus actions */ onChange?: (event: React.ChangeEvent, item?: any) => void; onKeyDown?: (event: React.KeyboardEvent) => void; onBlur?: (event: React.FocusEvent) => void; onFocus?: (event: React.FocusEvent) => void; onClick?: (event: React.MouseEvent) => void; onKeyUp?: (event: React.KeyboardEvent) => void; /** * id to select the input field uniquely */ id?: string; /** * if on, suggestion popup will be displayed */ autoComplete?: 'on' | 'off'; /** * if true, input field is in autofocus state */ autoFocus?: boolean; /** * minimum and maximum values for the number type input field and their functions */ minValue?: string | number; maxValue?: string | number; /** * background of the input field prop */ transparentBackground?: boolean; /** * size for the input field */ size?: 'small' | 'medium'; /** * isLabelRequired for the input field without label,showing placeholder */ isLabelRequired?: boolean; /** * optional '15px' reserve helperText space prop for the input field */ reserveHelperTextSpace?: boolean; success?: boolean; setUpdatedNumberValue?: (value: number) => void; } declare const Input: React$1.ForwardRefExoticComponent>; interface SelectProps { label?: string; showLabel?: boolean; /** * Provide the boolean value if arrow icon is reuired or not */ showArrowIcon?: boolean; optionsList: Option$2[]; selectedOption: Option$2; onChange: (option: Option$2) => void; errorMsg?: string; className?: string; optionZIndex?: number; disabled?: boolean; borderRadius?: boolean; showBorder?: boolean; required?: boolean; /** * optionsRequired:false prop removes options from dropdown & shows static label only */ optionsRequired?: boolean; selectedOptionColor?: string; labelAccessor?: string; valueAccessor?: string; height?: number; width?: number | string; onBlur?: () => void; disableInput?: boolean; showIcon?: boolean; iconName?: string; /** * Provide the placehoder for the select */ placeHolder?: string; /** * Provide the boolean value if tooltip is reuired or not */ showToolTip?: boolean; /** * Provide the background color for the select label on the hover state */ labelBackgroundColor?: string; /** * To close the modal in the select dropdown */ onCancelModal?: () => void; /** * To close the modal in the select dropdown */ onSaveModal?: () => void; /** * Pass the custom Jsx for the Modal */ modalJSXProps?: ReactNode; /** * Pass the recurrence boolean for the exeception cases */ recurrence?: boolean; /** * Toggles the visibility of dropdown options, when called, toggles the dropdown visibility */ showOptions?: { open: boolean; toggle: boolean; }; /** * Tooltip for input data */ tooltip?: boolean; /** * optional '15px' reserve helperText space prop for the select field */ reserveHelperTextSpace?: boolean; /** * variants to set color/style of the Select field */ variant?: 'primary' | 'website'; /** * Provide the size for the select */ size?: 'small' | 'medium'; /** * Provide the character count for the tooltip after which the tooltip should be displayed */ tooltipCharCount?: number; } type OptionValue = any; interface Option$2 { [key: string]: OptionValue; } declare const Select: FC; interface TextareaProps { /** * Name | name of the textarea field */ name: string; /** * Label | field label to be displayed */ label: string; /** * value | textarea field value */ value: string; /** * variants to set color/style of the textarea field */ variant?: 'default' | 'primary' | 'website'; /** * error | If true, error message will be displayed */ error?: boolean; /** * helperText | error, success, warning message to be shown */ helperText?: string; /** * to disable the textarea field */ disabled?: boolean; /** * if true, textarea field will be mandatory */ required?: boolean; /** * placeholder for the textarea field */ placeholder?: string; /** * classnames to style the textarea field */ className?: string; /** * onChange, onKeyDown, onBlur, onFocus actions */ onChange?: (event: React.ChangeEvent) => void; onKeyDown?: (event: React.KeyboardEvent) => void; onBlur?: (event: React.FocusEvent) => void; onFocus?: (event: React.FocusEvent) => void; onPaste?: (event: React.ClipboardEvent) => void; /** * id to select the textarea field uniquely */ id?: string; /** * if on, suggestion popup will be displayed */ autoComplete?: 'on' | 'off'; /** * background of the textarea field prop */ /** * capacity | Maximum number of characters allowed in the textarea. */ capacity?: number; /** * rows | Number of visible text lines in the textarea. * Used to control the height of the textarea. */ rows?: number; /** * cols | Number of visible character widths in the textarea. * Used to control the width of the textarea. */ cols?: number; /** * for resizing purpose */ resize?: boolean; errorText?: string; /** * To make text are read only state */ readOnly?: boolean; } declare const Textarea: ({ capacity, name, label, value, variant, error, helperText, disabled, required, placeholder, className, onChange, onBlur, onFocus, onPaste, rows, cols, resize, errorText, readOnly, ...props }: TextareaProps) => react_jsx_runtime.JSX.Element; interface DataProps { /** * data for each row */ [key: string]: any; } interface SelectedItemProps { /** * selected row object | All selected flag */ [key: string]: string | number | boolean; } interface TableProps { /** * Data for table */ data: Array; /** * Column details for table */ columns: Array; /** * Header type to have different background color */ headerType: 'default' | 'primary' | 'secondary' | 'tertiary'; /** * withFixedHeader prop to have non-scrollable fixed table header */ withFixedHeader?: boolean; /** * borderWithRadius prop to have table with border 1px and borderRadius 5px */ borderWithRadius?: boolean; /** * Check box feature to select the row */ withCheckbox?: boolean; /** * Event for checkbox onClick */ onSelect?: (e: object, arg: SelectedItemProps) => void; /** * Check box feature to select the row */ allSelected?: boolean; /** * send true to show partial checkbox in the header */ partialSelected?: boolean; /** * send true to disable the checkbox in the header */ headerCheckboxDisabled?: boolean; /** * The content that to be displayed if no data not found */ noDataContent?: string | ReactNode; /** * Image that to be displayed if you don't have data */ noDataImage?: string; /** * Size of the image that to be displayed if you don't have data */ noDataImageSize?: 'x-large' | 'large' | 'medium' | 'small' | 'x-small'; /** * Height of the table in string */ height?: string; /** * classNames for the table container */ className?: string; /** * classNames for the table Header container */ tableHeadClass?: string; /** * classNames for the table Row container */ tableBodyRowClass?: string; /** * custom color for the column text */ headerTextColor?: 'default' | 'primary'; /** * custom color for the row text */ tableDataTextColor?: string; /** * icon for the table header, for expand or other purposes */ headerIconName?: string; /** * handle function for the table header icon */ headerIconOnClick?: () => void; /** * Drag and Drop pass true to enable */ draggable?: boolean; /** * Drag and Drop indexes */ onDragEnd?: (startIndex: number, endIndex: number) => void | undefined; loadMore?: (_direction?: string) => void; /** * get the status of the accordion which is open or close */ getAccordionStatus?: Function; /** * content for the accordion */ accordionContent?: ReactNode; /** * enable editMode by setting state row id */ editMode?: string | null; /** * The content that to be displayed if editComponent */ editComponent?: ReactNode; columnSticky?: number; withOddEvenRowColor?: boolean; oddRowColor?: string; evenRowColor?: string; oddRowHoverColor?: string; evenRowHoverColor?: string; onRowClick?: (row: any) => void; } declare const Table: ({ data, columns, headerType, withCheckbox, onSelect, allSelected, partialSelected, withFixedHeader, borderWithRadius, headerCheckboxDisabled, noDataContent, height, className, tableHeadClass, tableBodyRowClass, headerTextColor, tableDataTextColor, headerIconName, headerIconOnClick, draggable, onDragEnd, loadMore, editMode, editComponent, getAccordionStatus, accordionContent, columnSticky, withOddEvenRowColor, oddRowColor, evenRowColor, oddRowHoverColor, evenRowHoverColor, hasMore, loading, onRowClick, }: TableProps & { hasMore?: boolean; loading?: boolean; }) => react_jsx_runtime.JSX.Element; type Theme = 'app-theme' | 'website-theme' | 'editor-dark-theme' | 'editor-light-theme'; interface ThemeContextType { currentTheme: Theme; setCurrentTheme: React.Dispatch>; applyTheme: (newTheme: Theme) => void; } interface ThemeProviderProps { children?: ReactNode; theme?: Theme; } declare const ThemeProvider: React__default.FC; interface TypographyProps { /** * Font Weight */ fontWeight?: 'regular' | 'medium' | 'semi-bold' | 'bold'; /** * Font Size */ fontSize?: number | string; /** * Line height */ lineHeight?: string; /** * Color */ color?: string; /** * Text alignment */ textAlign?: 'left' | 'right' | 'center' | 'justify'; /** * For JSX elements */ as?: keyof JSX.IntrinsicElements; /** * htmlFor attribute for element=label, */ htmlFor?: string; /** * The content to display within the Typography component */ children: React__default.ReactNode; /** * To add styles in Typography */ className?: string; /** * To add letter spacing in Typography */ letterSpacing?: string; /** * To add onClick function */ onClick?: () => void; required?: boolean; style?: React__default.CSSProperties; cursor?: CSSProperties['cursor']; onDoubleClick?: () => void; } declare const Typography: React__default.FC; declare const useTheme: () => ThemeContextType; /** * Props for the RadioButton component. */ interface RadioButtonProps { /** * The display label for the radio button. * Optional. */ label?: string | ReactElement; /** * The name attribute for the radio button, used for grouping. */ name: string; /** * The unique value of the radio button. * Optional. */ value?: string; /** * Indicates whether the radio button is checked. * Optional. */ checked?: boolean; /** * Callback function that is called when the radio button's value changes. * Receives the change event as an argument. * Optional. */ onChange?: (event: React.ChangeEvent) => void; /** * Indicates whether the radio button is disabled. * Optional. */ disabled?: boolean; /** * Indicates whether the radio button show the tooltip. * Optional. */ showTooltip?: boolean; /** * The content of the tooltip. * Optional. */ tooltipChildren?: React.ReactNode; /** * The content of the tooltip. * Optional. */ tooltipTitle?: React.ReactNode; /** * Additional CSS classes to be applied to the radio button. * Optional. */ tooltipPosition?: 'top' | 'bottom' | 'left' | 'right'; onBlur?: () => void; } declare const RadioButton: React__default.FC; /** * Represents a single option in the radio group. */ interface Option$1 { /** * The unique value of the option. */ value: string; /** * The display label for the option. */ label: string; /** * Indicates whether the option is disabled. * Optional. */ disabled?: boolean; /** * Indicates whether the radio button show the tooltip. * Optional. */ showTooltip?: boolean; /** * The content of the tooltip. * Optional. */ tooltipChildren?: React.ReactNode; /** * The content of the tooltip. * Optional. */ tooltipTitle?: React.ReactNode; /** * The position of the tooltip */ tooltipPosition?: 'top' | 'bottom' | 'left' | 'right'; } /** * Props for the RadioGroup component. */ interface RadioGroupProps { /** * An array of options to be rendered in the radio group. */ options: Option$1[]; /** * The name attribute for the radio inputs, used for grouping. */ name: string; /** * The currently selected value. * Optional. */ selectedValue?: string; /** * Callback function that is called when the selected option changes. * It receives the selected option as an argument. * Optional. */ onChange?: (option: Option$1) => void; /** * Provides a label at starting position when the string is passed. * Optional. */ label?: string; /** * if isLabel is true then we can display label if not then extra space is not added. * Optional. */ isLabel?: boolean; /** * if isAsteriskRequired is true then we can display asterisk if not then extra space is not added. * Optional. */ isAsteriskRequired?: boolean; /** * Additional class names to apply to the radio group for custom styling. * Optional. */ className?: string; /** * Additional class names to apply to the radio group Label for custom styling. * Optional. */ classNameForLabel?: string; isError?: boolean; errorMessage?: string; onBlur?: () => void; disabled?: boolean; } declare const RadioGroup: React__default.FC; interface Tab { /** * Unique identifier for the tab, for handling click events. */ id: string; /** * Display label for the tab. */ label: string; /** * The content to display when this tab is active. */ component?: JSX.Element | React.ReactNode; /** * Optional property to indicate if the tab is disabled. */ disabled?: boolean; /** * Optional count to display next to the label. */ count?: number | string; /** * Status indicator for the tab. */ status?: 'success' | 'error' | 'transparent'; /** * Whether the tab is removable. */ isRemovable?: boolean; /** * Icon to display before the label. */ icon?: ReactNode; /** * Additional class name for the tab. */ className?: string; /** * Whether the tab is in error state. */ isError?: boolean; } interface TabsProps { /** * An array of tab objects containing label, component, and optional disabled status. */ tabsData: Tab[]; /** * Defines the styling variant of the tabs. */ variant?: 'default' | 'capsule' | 'website'; /** * activeTabId : The ID of the currently active tab. */ activeTabId: string; /** * onTabClick : function updates the active tab state when a user interacts with the tabs, */ onTabClick: (id: string) => void; /** * noBorder:true , removes the outer border from tabs */ noBorder?: boolean; noPadding?: boolean; /** * titleSize is to accept dynamic font size */ titleSize?: number | string; /** * Array of disabled tab IDs */ disabledTabs?: string[]; /** * Callback for when a tab is removed */ onRemoveTab?: (id: string) => void; /** * Whether to show separators between tabs */ isSeparator?: boolean; } declare const Tabs: ({ variant, tabsData, activeTabId, onTabClick, noBorder, noPadding, titleSize, disabledTabs, onRemoveTab, isSeparator, }: TabsProps) => react_jsx_runtime.JSX.Element; interface CheckboxProps { /** * Unique ID for the checkbox input */ id?: string; /** * Name attribute for the checkbox input */ name?: string; /** * Optional side label */ label?: string; /** * Optional disable attribute */ disabled?: boolean; /** * Optional checked attribute to prefill */ checked?: boolean; /** * Optional onChange function */ onChange?: (event: React.ChangeEvent) => void; /** * For partially checked checkbox */ partial?: boolean; /** * For variant color */ variant?: 'passed' | 'failed' | 'warning' | 'skipped' | 'flaky'; /** * For default hover */ isDefaultHover?: boolean; } declare const Checkbox: React__default.FC; interface SearchProps { /** * Placeholder for the input field */ placeholder?: string; /** * Callback function to be called when the search button is clicked or enter key is pressed */ onSearch: (query: string) => void; /** * Additional styles for the button */ disabled?: boolean; width?: number; value: string; isExpand: boolean; onClose: () => void; onExpand: (isExpand: boolean) => void; showClose?: boolean; helperText?: string; showToaster?: boolean; minLength?: number; isAISearch?: boolean; isAISearchClicked?: boolean; handleActiveAiSearch?: () => void; isClear?: boolean; handleIsClear?: () => void; } declare const Search: ({ placeholder, onSearch, disabled, width, value, isExpand, onClose, onExpand, showClose, helperText, showToaster, minLength, isAISearchClicked, isClear, handleIsClear, }: SearchProps) => react_jsx_runtime.JSX.Element; interface DatePickerProps { /** * The minimum selectable date. */ minDate?: DateValue; /** * The maximum selectable date. */ maxDate?: DateValue; /** * Selected date value. */ value?: DateValue; /** * Function to handle date selection. */ onChange: (value: DateValue) => void; /** * Placeholder text for the date input field. */ placeholder?: string; /** * Placeholder text for the time input field. */ timePlaceholder?: string; /** * Disables the date picker. */ disabled?: boolean; /** * Format for displaying the selected date. Default is 'EEEE, dd MMM yyyy'. */ dateFormat?: string; /** * Format for displaying the selected time. Default is 'hh:mm a'. */ timeFormat?: string; /** * Timezone for the date picker. */ timezone?: string; /** * Custom width for the calendar. This will override the default width of the calendar. */ calendarWidth?: number; /** * When true, displays the input field error. */ error?: boolean; /** * Helper text to display below the input field, used for error messages or instructions. */ helperText?: string | undefined; /** * Select only date . */ dateOnly?: boolean; className?: string; zIndex?: number; /** * Default: false, if true, displayed with border radius and color required for the filter date picker. */ isFilterDatePicker?: boolean; /** * The selected date don't want to be deselected . */ isSelectableDate?: boolean; /** * Function to handle onBlur for datepicker. */ onBlur?: (date: DateValue) => void; /** * Select only time. */ timeOnly?: boolean; /** * Set to false if you want to use date/time picker for other fields or button. */ showDateTimeFields?: boolean; /** * The variant of the date picker. * @default 'primary' */ variant?: 'primary' | 'website'; /** * Function to handle onCancle click for datepicker. */ onCancel?: () => void; /** * The size of the date picker. */ size?: 'small' | 'medium'; } type DateValue = Date | undefined; declare const DatePicker: React__default.ForwardRefExoticComponent>; interface IconButtonProps { label: string; iconName: string; onClick?: (event: React.MouseEvent) => void; disabled?: boolean; ref?: React.Ref; } declare const IconButton: React$1.ForwardRefExoticComponent & React$1.RefAttributes>; interface ModalProps { isOpen: boolean; onClose: () => void; /*** label value for aria-label */ contentLabel?: string; /*** default header will be provided with title and close icon. */ isHeaderDisplayed: boolean; /*** Title to be displayed in the header when defaultHeader is true*/ headerTitle?: string; /*** Custom class names for the modal content */ contentClassName?: string; /*** Custom class name for the overlay */ overlayClassName?: string; /*** Whether the modal should close when the 'Escape' key is pressed */ shouldCloseOnEsc?: boolean; /*** Whether to hide the app from screen readers when the modal is open */ ariaHideApp?: boolean; /*** Whether the modal should close when clicking outside of it (on the overlay) */ shouldCloseOnOverlayClick?: boolean; headerContent?: string | ReactNode; footerContent?: ReactNode; /***Content to be displayed inside the modal */ children: ReactNode; isFooterDisplayed: boolean; customWidth?: string; customHeight?: string; zIndex?: number; boxShadow?: string; border?: string; background?: string; } declare const Modal: React__default.FC; interface AccordionItem { _id: string; name: string; children?: AccordionItem[]; type: string; hasChildren?: boolean; expanded?: boolean; } interface AccordionProps { data: AccordionItem[]; onItemSelect?: (item: AccordionItem) => void; height?: string; width?: string; fontSize?: number; paddingLeft?: number; fontWeight?: "medium" | "bold" | "regular" | "semi-bold"; headerIcon?: React.ReactNode; expandedIcon?: string; collapsedIcon?: string; onExpandHandler?: (node: AccordionItem, expanded: boolean) => void; } declare const NestedAccordian: FC; interface LabelSelectInputProps { label?: string; onChange?: (values: string[]) => void; required?: boolean; defaultValue?: string[]; errorMsg?: string; disabled?: boolean; validationType?: string; enterOnSpace?: boolean; enterOnTab?: boolean; } declare const LabelSelectInput: React__default.FC; interface Option { label: string | ReactNode; value: string; } interface InputWithDropdownProps { /** * Name | name of the input field */ name: string; /** * Label | field label to be displayed */ label?: string; /** * value | input field value */ value?: string | number; type?: 'text' | 'password' | 'number' | 'email' | 'url' | 'time'; /** * variants to set color/style of the input field */ variant?: 'default' | 'primary'; /** * error | If true, error message will be displayed */ error?: boolean; /** * helperText | error, success, warning message to be shown */ helperText?: string; /** * to disable the input field */ disabled?: boolean; /** * if true, input field will be mandatory */ required?: boolean; /** * placeholder for the input field */ placeholder?: string; /** * classnames to style the input field */ className?: string; /** * Options for the select dropdown */ optionsList: Option[]; /** * Selected option for the select dropdown */ selectedOption?: Option; /** * onChange handler for input changes */ onInputChangeHandler?: (event: React.ChangeEvent) => void; /** * onChange handler for dropdown changes */ onDropdownChangeHandler?: (option: any) => void; /** * onInputBlurHandler action for input field */ onInputBlurHandler?: (event: React.FocusEvent) => void; onFocus?: (event: React.FocusEvent) => void; onClick?: (event: React.MouseEvent) => void; onKeyUp?: (event: React.KeyboardEvent) => void; /** * id to select the input field uniquely */ id?: string; /** * if on, suggestion popup will be displayed */ autoComplete?: 'on' | 'off'; /** * minimum and maximum values for the number type input field */ minValue?: number; maxValue?: number; /** * background of the input field prop */ isBackgroundTransparent?: boolean; /** * optionsRequired:false prop removes options from dropdown & shows static label only */ optionsRequired?: boolean; dropdownPosition?: 'left' | 'right'; leftDropDownPositionZindex?: number; rightDropDownPositionZindex?: number; } declare const InputWithDropdown: React$1.ForwardRefExoticComponent>; interface PopUpModalProps { isOpen: boolean; onClose: () => void; onContinue?: () => void; titleMessage: string; subTitleMessage?: string; iconName: string; modalMessage: string | React.ReactNode; secondaryMessage?: string | React.ReactNode; firstButtonLabel?: string; secondButtonLabel?: string; buttonVariant?: any; border?: string; popupWidth?: string; popupHeight?: string; colorForTitleMessage?: string; footerContent?: React.ReactNode; firstButtonDisabled?: boolean; secondButtonDisabled?: boolean; zIndex?: number; showFirstButton?: boolean; showSecondButton?: boolean; showCloseIcon?: boolean; showHeader?: boolean; shouldCloseOnOverlayClick?: boolean; shouldCloseOnEsc?: boolean; } declare const PopUpModal: FC; interface TextInputProps { label: string; value: string; onChange: (e: React__default.ChangeEvent) => void; name: string; placeholder?: string; } declare const TextInput: React__default.FC; interface StatusButtonProps { /** * Status of the button */ status: 'passed' | 'failed' | 'running' | 'skipped' | 'warning' | 'terminated' | 'partially-executed' | 'aborted' | 'not-executed'; /** * Button label (status text) */ label?: string; /** * Optional click handler */ onClick?: (event: React.MouseEvent) => void; /** * Button content */ children?: ReactNode; /** * Button id */ id?: string; /** * Disabled state */ disabled?: boolean; /** * Classname for the button */ className?: string; /** * Additional styles for the button */ style?: React.CSSProperties; } declare const StatusButton: ({ status, label, onClick, className, style, disabled, ...props }: StatusButtonProps) => react_jsx_runtime.JSX.Element; interface CountChipProps { count: number; } declare const CountChip: ({ count }: CountChipProps) => react_jsx_runtime.JSX.Element; type Status = 'passed' | 'failed' | 'warning' | 'skipped' | 'Passed' | 'Failed' | 'Skipped' | 'Warning'; type resultStats = { status: Status; percentage: number; count: number; }; type DonutChartProps = { radius: number; lineWidth: number; resultStats: resultStats[]; legendDetailsType: string; isLegendDetails: boolean; gapAngle?: number; totalCount: number; }; declare const DonutChart: React__default.FC; type AcceptedType = string | (() => void) | Record | unknown[]; declare const Toastify: () => react_jsx_runtime.JSX.Element; declare const toast: { success: (arg1: AcceptedType, arg2?: AcceptedType) => void; error: (arg1: AcceptedType, arg2?: AcceptedType) => void; warning: (arg1: AcceptedType, arg2?: AcceptedType) => void; info: (arg1: AcceptedType, arg2?: AcceptedType) => void; alert: (arg1: AcceptedType, arg2?: AcceptedType) => void; }; interface ContainerProps { /** * The content to be displayed inside the container. * Typically consists of rows and columns. * * @type {ReactNode} */ children: ReactNode; /** * Determines if the container should be fluid (expand to 100% width) or fixed width. * * @default false * @type {boolean} */ fluid?: boolean; /** * Defines the gap (spacing) between the rows and columns inside the container. * Accepts any valid CSS size value (e.g., '10px', '1rem', etc.). * * @default '0px' * @type {string} */ gap?: string; /** * Classname for Container * @default '' * @type {string} */ className?: string; } interface RowProps { /** * The content to be displayed inside the row, usually consisting of columns (``). * * @type {ReactNode} */ children: ReactNode; /** * The gap (spacing) between columns within the row. * Accepts any valid CSS size value. * * @default '0px' * @type {string} */ gap?: string; /** * @default '' * @type string */ className?: string; } interface ColProps { /** * The content to be displayed inside the column. * * @type {ReactNode} */ children: ReactNode; /** * Defines the width of the column as a fraction of 12 (for a 12-column grid system). * For example, `size={6}` would make the column take up half the width of the row. * * @default 12 * @type {number} */ size?: number; /** * @default '' * @type string * */ className?: string; } declare const Container: React__default.FC; declare const Row: React__default.FC; declare const Col: React__default.FC; interface AvatarProps { /** * This property determines the size of the avatar. It can be set to 'small', 'medium', or 'large'. */ variant?: 'small' | 'medium' | 'large'; /** * This property allows you to customize the background color of the avatar. */ backgroundColor?: string; /** * This property specifies the name of the icon to be displayed within the avatar. */ iconName?: string; /** * This property allows you to customize the color of the icon within the avatar. */ iconColor?: string; /** * This property allows you to set a custom size for the avatar, overriding the default size specified by the variant property. */ customAvatarSize?: number; /** * This property allows you to set a custom size for the icon within the avatar. */ customIconSize?: number; /** * This property specifies the label to display inside the avatar, used as an alternative to the icon. */ label?: string; /** * This property allows you to customize the font size of the label inside the avatar. */ labelFontSize?: string; } declare const Avatar: React__default.FC; interface ModuleChipProps { /** * mandatory | label for the ModuleChip component */ label: string; /** * mandatory | isActive for the ModuleChip component */ isActive: boolean; /** * mandatory | onClick for the ModuleChip component */ className?: string; onClick: () => void; isFilterChip?: boolean; } declare const ModuleChip: React.FC; interface ProgressBarProps { progressPercentage?: number; color?: string; trackColor?: string; height?: number; label?: string; showPercentage?: boolean; percentageFontSize?: number; percentageTextColor?: string; labelFontSize?: number; labelTextColor?: string; usedMemory?: string; totalMemory?: string; } declare const ProgressBar: React__default.FC; type valueType$1 = any; declare const checkEmpty: (value: valueType$1) => boolean; type valueType = File | string; declare const getExtension: (value: valueType) => string | undefined; declare const getExtensionWithPeriod: (value: valueType) => string; type AnyObject$1 = { id: number; [key: string]: any; }; declare function findAndInsert(data: T[], key: keyof T, targetId: number, newEntry: T, insertPosition: 'above' | 'below' | 'replace', childrenKey?: string): { updatedArray: T[]; } | null; declare const ffid: () => string; type Callback$1 = (...args: any[]) => void; interface DebouncedFunction extends Function { cancel: () => void; } declare const debounce: (func: Callback$1, delay: number) => DebouncedFunction; /** * Compare two arrays for equality. * This function checks if both arrays contain the same elements in the same order, * including nested structures. * * @param arr1 - The first array to compare. * @param arr2 - The second array to compare. * @returns - A boolean indicating if the arrays are equal. */ declare const compareArrays: (arr1: unknown[], arr2: unknown[]) => boolean; type AnyObject = Record; declare const compareObjects: (obj1: AnyObject | null, obj2: AnyObject | null) => boolean; declare const getEncryptedData: (data: string, publicKey: string) => string | false; type Callback = (...args: any[]) => void; interface ThrottledFunction extends Function { cancel: () => void; } declare const throttle: (func: Callback, limit: number) => ThrottledFunction; declare const truncateText: (text: string, maxLength: number) => string; declare const saveFileFromBlob: (blob: Blob, filename: string) => void; declare const capitalize: (text: string) => string; declare const useClickOutside: (ref: React.RefObject, callback: () => void, ignoreRefs?: Array | undefined>) => void; declare function formatString(input: string, removeSections?: string[]): string; declare const hasDuplicateFile: (array: any[], property: string) => boolean; type KeyboardAction = { key: string; action: () => void; }; declare const useKeyboardActions: (actions: KeyboardAction[]) => void; declare const convertFormDataToObject: (formData: FormData) => Record; declare const formatDate: (date: Date) => string; declare const isEmptyObject: (obj: any) => boolean; declare const EMAIL_REGEX: RegExp; declare const URL_REGEX: RegExp; declare const PHONE_REGEX: RegExp; declare const POSTAL_CODE_REGEX: RegExp; declare const IPV4_REGEX: RegExp; declare const IPV6_REGEX: RegExp; declare const HEX_COLOR_REGEX: RegExp; declare const PASSWORD_SIMPLE_REGEX: RegExp; declare const PASSWORD_COMPLEX_REGEX: RegExp; declare const ALPHABET_ONLY_REGEX: RegExp; declare const NUMBERS_ONLY_REGEX: RegExp; declare const ALPHANUMERIC_REGEX: RegExp; declare const ALPHANUMERIC_WITH_ROUND_BRACES_REGEX: RegExp; declare const DATE_REGEX: RegExp; declare const TIME_REGEX: RegExp; declare const FILE_EXTENSION_REGEX: RegExp; declare const MAC_ADDRESS_REGEX: RegExp; declare const CREDIT_CARD_REGEX: RegExp; declare const SSN_REGEX: RegExp; declare const UUID_REGEX: RegExp; declare const HTML_TAG_REGEX: RegExp; declare const WHITESPACE_REGEX: RegExp; declare const US_ZIP_CODE_REGEX: RegExp; declare const USERNAME_REGEX: RegExp; declare const INDIAN_PHONE_REGEX: RegExp; declare const INDIAN_PIN_CODE_REGEX: RegExp; declare const GSTIN_REGEX: RegExp; declare const PAN_CARD_REGEX: RegExp; declare const AADHAAR_REGEX: RegExp; declare const VEHICLE_REGISTRATION_REGEX: RegExp; declare const INDIAN_CURRENCY_REGEX: RegExp; declare const INTERNATIONAL_PHONE_REGEX: RegExp; declare const INDIAN_PASSPORT_REGEX: RegExp; declare const DRIVING_LICENSE_REGEX: RegExp; declare const USERNAME_SPECIAL_REGEX: RegExp; declare const DECIMAL_NUMBER_REGEX: RegExp; declare const HTML_ATTRIBUTE_REGEX: RegExp; declare const RGB_COLOR_REGEX: RegExp; declare const HSL_COLOR_REGEX: RegExp; declare const BASE64_REGEX: RegExp; declare const BINARY_NUMBER_REGEX: RegExp; declare const HEXADECIMAL_NUMBER_REGEX: RegExp; declare const ROMAN_NUMERALS_REGEX: RegExp; declare const CURRENCY_GENERIC_REGEX: RegExp; declare const LINKEDIN_PROFILE_REGEX: RegExp; declare const TWITTER_HANDLE_REGEX: RegExp; declare const NUMBER_REGEX: RegExp; declare const UNIT_REGEX: RegExp; declare const SCRIPT_REGEX: RegExp; declare const MEMORY_VALIDATION_REGEX: RegExp; declare const STEP_GROUP_NAME_REGEX: RegExp; declare const NLP_DESCRIPTION_REGEX: RegExp; declare const FILE_NAME_REGEX: RegExp; declare const ELEMENTS_TRAILING_SPACE_REGEX: RegExp; declare const ELEMENTS_WHITE_SPACE_REGEX: RegExp; declare const PARAMETER_ALPHANUMERIC_REGEX: RegExp; declare const CAMEL_CASE_REGEX: RegExp; declare const DYNAMIC_VALUE__PLACEHOLDER_REGEX: RegExp; declare const DYNAMIC_VALUE_PATTERN_REGEX: RegExp; declare const DYNAMIC_VALUE_TYPE_REGEX: RegExp; declare const DYNAMIC_VALUE_WITH_VALID_BRACKETS_REGEX: RegExp; declare const CERTIFICATES_NAME_REGEX: RegExp; export { AADHAAR_REGEX, ALPHABET_ONLY_REGEX, ALPHANUMERIC_REGEX, ALPHANUMERIC_WITH_ROUND_BRACES_REGEX, Accordion, Avatar, BASE64_REGEX, BINARY_NUMBER_REGEX, Button, CAMEL_CASE_REGEX, CERTIFICATES_NAME_REGEX, CREDIT_CARD_REGEX, CURRENCY_GENERIC_REGEX, Checkbox, ChipWithIcon as Chip, Col, Container, CountChip, DATE_REGEX, DECIMAL_NUMBER_REGEX, DRIVING_LICENSE_REGEX, DYNAMIC_VALUE_PATTERN_REGEX, DYNAMIC_VALUE_TYPE_REGEX, DYNAMIC_VALUE_WITH_VALID_BRACKETS_REGEX, DYNAMIC_VALUE__PLACEHOLDER_REGEX, DatePicker, DonutChart, ELEMENTS_TRAILING_SPACE_REGEX, ELEMENTS_WHITE_SPACE_REGEX, EMAIL_REGEX, FILE_EXTENSION_REGEX, FILE_NAME_REGEX, formatString as FormatString, GSTIN_REGEX, HEXADECIMAL_NUMBER_REGEX, HEX_COLOR_REGEX, HSL_COLOR_REGEX, HTML_ATTRIBUTE_REGEX, HTML_TAG_REGEX, INDIAN_CURRENCY_REGEX, INDIAN_PASSPORT_REGEX, INDIAN_PHONE_REGEX, INDIAN_PIN_CODE_REGEX, INTERNATIONAL_PHONE_REGEX, IPV4_REGEX, IPV6_REGEX, Icon, IconButton, Input, InputWithDropdown, LINKEDIN_PROFILE_REGEX, LabelSelectInput, MAC_ADDRESS_REGEX, MEMORY_VALIDATION_REGEX, Modal, ModuleChip, MultiSelect, NLP_DESCRIPTION_REGEX, NUMBERS_ONLY_REGEX, NUMBER_REGEX, NestedAccordian, PAN_CARD_REGEX, PARAMETER_ALPHANUMERIC_REGEX, PASSWORD_COMPLEX_REGEX, PASSWORD_SIMPLE_REGEX, PHONE_REGEX, POSTAL_CODE_REGEX, PopUpModal, ProgressBar, RGB_COLOR_REGEX, ROMAN_NUMERALS_REGEX, RadioButton, RadioGroup, Row, SCRIPT_REGEX, SSN_REGEX, STEP_GROUP_NAME_REGEX, Search, Select, StatusButton, TIME_REGEX, TWITTER_HANDLE_REGEX, Table, Tabs, Textarea as TextArea, TextInput, ThemeProvider, Toaster, Toastify, Toggle, Tooltip, Typography, UNIT_REGEX, URL_REGEX, USERNAME_REGEX, USERNAME_SPECIAL_REGEX, US_ZIP_CODE_REGEX, UUID_REGEX, VEHICLE_REGISTRATION_REGEX, WHITESPACE_REGEX, capitalize, checkEmpty, compareArrays, compareObjects, convertFormDataToObject, debounce, ffid, findAndInsert, formatDate, getEncryptedData, getExtension, getExtensionWithPeriod, hasDuplicateFile, isEmptyObject, saveFileFromBlob, throttle, toast, truncateText, useClickOutside, useKeyboardActions, useTheme };