pixel-react 1.0.0

package/lib/index.d.ts

@@ -0,0 +1,1286 @@
+import * as LazyLoad from 'react-window';
+export { LazyLoad };
+import * as React$1 from 'react';
+import React__default, { ReactNode, RefObject } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FieldValues, UseFormProps, SubmitHandler, FieldPath, FieldErrors } from 'react-hook-form';
+
+interface ButtonProps$1 {
+    /**
+     * Variant of the button
+     */
+    variant: 'primary' | 'secondary' | 'tertiary' | 'delete';
+    /**
+     * What background color to use
+     */
+    backgroundColor?: string;
+    /**
+     * How large should the button be?
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Button contents
+     */
+    label?: string;
+    /**
+     * Type of the button
+     */
+    type?: 'button' | 'submit';
+    disabled?: boolean;
+    /**
+     * Optional click handler
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /**
+     * Button content
+     */
+    children?: ReactNode;
+    /**
+     * Button id
+     */
+    id?: string;
+    /**
+     * onSubmit function handler
+     */
+    onSubmit?: (event: React.MouseEvent<HTMLButtonElement, 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;
+}
+
+declare const Button: React$1.ForwardRefExoticComponent<Omit<ButtonProps$1, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface BtnPropsCommon {
+    /**
+     * Label for the button
+     */
+    label?: string;
+    /**
+     * Boolean value to disable the button
+     */
+    disabled?: boolean;
+    /**
+     * Onclick function for button
+     */
+    onClick?: () => void;
+}
+interface DrawerProps {
+    /**
+     * To Open the Drawer
+     */
+    isOpen: boolean;
+    /**
+     * To Expand the Drawer
+     */
+    _isExpanded?: boolean;
+    /**
+   * To show and  hide the back button of the Drawer
+   */
+    isBackButtonVisible?: boolean;
+    /**
+ * To show and  hide the close button of the Drawer
+ */
+    _isCloseModalButtonVisible?: boolean;
+    /**
+     * Function to close the drawer
+     */
+    onClose?: () => void;
+    /**
+     * Size of the drawer medium = 550px large = 850px
+     */
+    size?: 'small' | 'medium' | 'large' | 'x-large';
+    /**
+     * Body Content of the drawer
+     */
+    children: ReactNode;
+    /**
+     * Header title for the drawer
+     */
+    title: string | ReactNode;
+    /**
+     * To show the edit button on the header
+     */
+    showEditButton?: boolean;
+    /**
+     * Primary | Success button props
+     */
+    primaryButtonProps?: BtnPropsCommon;
+    /**
+     * Secondary | Cancel button props
+     */
+    secondaryButtonProps?: BtnPropsCommon;
+    /**
+     * Left side Primary Button | Cancel button props
+     */
+    leftPrimaryButtonProps?: BtnPropsCommon;
+    /**
+     * Left side Secondary | Cancel button props
+     */
+    leftSecondaryButtonProps?: BtnPropsCommon;
+    /**
+     * Onclick function for edit button
+     */
+    onEdit?: () => void;
+    /**
+     * Background overlay for the drawer
+     */
+    overlay?: boolean;
+    /**
+     * displays footer if its true, default true
+     */
+    isFooterRequired?: boolean;
+    /**
+     * footer Content
+     */
+    footerContent?: ReactNode;
+}
+
+declare const Drawer: ({ isOpen, children, onClose, title, primaryButtonProps, secondaryButtonProps, leftPrimaryButtonProps, leftSecondaryButtonProps, showEditButton, onEdit, overlay, isFooterRequired, footerContent, size, _isExpanded, isBackButtonVisible, _isCloseModalButtonVisible, }: DrawerProps) => React$1.ReactPortal;
+
+interface IconProps {
+    name: string;
+    className?: string;
+    height?: number;
+    width?: number;
+    color?: string;
+    onClick?: (data?: any) => void;
+    hoverEffect?: boolean;
+    disabled?: boolean;
+}
+
+declare const Icon: ({ name, height, width, onClick, color, hoverEffect, className, disabled, ...props }: IconProps) => react_jsx_runtime.JSX.Element | null;
+
+interface AccordionProps {
+    /**
+     * 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;
+}
+
+/**
+ * Accordion UI component
+ */
+declare const Accordion: ({ headerTitle, color, minHeight, accordionContent, disable, disableInfoMessage, }: AccordionProps) => react_jsx_runtime.JSX.Element;
+
+interface Option$2 {
+    label?: string;
+    value?: string;
+    accessor?: string;
+    isChecked?: boolean;
+}
+interface MultiSelectProps {
+    options: Option$2[];
+    label: string;
+    selectedOptions?: Option$2[];
+    disabled?: boolean;
+    onSearch?: (searchedKeyword: string) => void;
+    onChange?: (selectedOptions: Option$2[]) => void;
+    zIndex?: number;
+    required?: boolean;
+    errorMessage?: string;
+}
+
+declare const MultiSelect: ({ options, selectedOptions, onChange, zIndex, label, onSearch, required, disabled, errorMessage, }: 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';
+    /**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;
+}
+
+declare const Toaster: React__default.FC<ToasterProps>;
+
+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;
+}
+interface RowProps {
+    /**
+     * The content to be displayed inside the row, usually consisting of columns (`<Col />`).
+     *
+     * @type {ReactNode}
+     */
+    children: ReactNode;
+    /**
+     * The gap (spacing) between columns within the row.
+     * Accepts any valid CSS size value.
+     *
+     * @default '0px'
+     * @type {string}
+     */
+    gap?: 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;
+}
+
+declare const Container: React__default.FC<ContainerProps>;
+declare const Row: React__default.FC<RowProps>;
+declare const Col: React__default.FC<ColProps>;
+
+interface ToggleProps {
+    /**
+     * Optional onChange handler
+     */
+    onChange?: (event: React.MouseEvent<HTMLInputElement, 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<ToggleProps>;
+
+interface ChipsProps {
+    /**
+     * The text to be displayed on the Chip.
+     */
+    label: string;
+    /**
+     * The text to be displayed on hover.
+     */
+    fullText?: string;
+    /**
+     * The variant of the Chip.
+     */
+    variant?: 'primary' | 'success' | 'error' | 'warning' | 'custom';
+    /**
+     * The callback function to be executed when the Chip is clicked.
+     */
+    onClick?: () => void;
+}
+
+declare const Chip: ({ label, fullText, variant, onClick, }: ChipsProps) => react_jsx_runtime.JSX.Element;
+
+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;
+}
+
+declare const Tooltip: React__default.FC<TooltipProps>;
+
+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';
+    /**
+     * 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;
+    /**
+     * noBorder prop 'true' removes border of input
+     */
+    noBorder?: boolean;
+    /**
+     * onChange, onKeyDown, onBlur, onFocus actions
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => 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 and their functions
+     */
+    minValue?: number;
+    maxValue?: number;
+    /**
+     * background of the input field prop
+     */
+    transparentBackground?: boolean;
+}
+
+declare const Input: ({ type, variant, name, label, disabled, required, placeholder, value, helperText, error, noBorder, className, onChange, onBlur, onFocus, autoComplete, minValue, maxValue, transparentBackground, ...props }: InputProps) => react_jsx_runtime.JSX.Element;
+
+type Status$1 = {
+    status: 'Passed' | 'Failed' | 'Warning' | 'Skipped' | 'passed' | 'failed' | 'warning' | 'skipped';
+    value: number;
+};
+interface RadialChartProps {
+    radius: number;
+    lineWidth: number;
+    statusValues: Status$1[];
+    onClick?: (status: Status$1) => void;
+    fontSize: number;
+}
+
+declare const RadialChart: React__default.FC<RadialChartProps>;
+
+interface ExpandableMenuProps {
+    /**
+     * mandatory | label for the expandable menu
+     */
+    label: string;
+    /**
+     * optional | Icon to describe direction of expansion
+     */
+    icon?: React.ReactNode;
+    /**
+     * optional | variant of the menu
+     */
+    variant?: 'primary';
+    /**
+     * optional | size of the expandable menu
+     */
+    size?: 'medium';
+    /**
+     * optional | disable to disable the menu and prevent click events but not hover event
+     */
+    disable?: boolean;
+    /**
+     * Mandatory |  sub menus to be shown inside  expandable menu
+     */
+    subMenus: string[];
+    /**
+     * optional | selected sub menu of the expandable menu
+     */
+    selectedMenu?: string;
+    /**
+     * optional | onSubMenuClick event to perform action on click of sub menu
+     */
+    onSubMenuClick?: (subChip: any) => void;
+}
+
+declare const ExpandableMenu: React.FC<ExpandableMenuProps>;
+
+interface SelectProps {
+    label?: string;
+    showLabel?: boolean;
+    optionsList: Option$1[];
+    selectedOption?: Option$1;
+    onChange: (option: Option$1) => void;
+    errorMsg?: string;
+    className?: string;
+    optionZIndex?: number;
+    disabled?: boolean;
+    borderRadius?: boolean;
+    showBorder?: boolean;
+    required?: boolean;
+}
+interface Option$1 {
+    label: string | ReactNode;
+    value: string;
+    disabled?: boolean;
+}
+
+declare const Select: ({ label, showLabel, optionsList, selectedOption, onChange, errorMsg, className, optionZIndex, disabled, borderRadius, showBorder, required, }: SelectProps) => react_jsx_runtime.JSX.Element;
+
+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';
+    /**
+     * 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<HTMLTextAreaElement>) => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => 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;
+}
+
+declare const Textarea: ({ capacity, name, label, value, variant, error, helperText, disabled, required, placeholder, className, onChange, onBlur, onFocus, rows, cols, resize, ...props }: TextareaProps) => react_jsx_runtime.JSX.Element;
+
+interface OptionClick {
+    /**
+     * The label displayed for the option.
+     * @type {string}
+     * @required
+     */
+    label: string;
+    /**
+     * The value(s) associated with the option, which can be a single string or an array of strings.
+     * @type {Array<string> | string}
+     * @required
+     */
+    value: Array<string> | string;
+}
+interface OptionType extends OptionClick {
+    /**
+     * The name of the icon associated with the option.
+     * @type {string}
+     * @required
+     */
+    icon: string;
+    /**
+     * Indicates whether the option is disabled.
+     * @type {boolean}
+     * @optional
+     */
+    disable?: boolean;
+}
+interface MenuOptionProps {
+    /**
+     * The name of the label displayed next to the icon.
+     * @type {string}
+     * @optional
+     */
+    labelName?: string;
+    /**
+     * The name of the icon to be displayed.
+     * @type {string}
+     * @required
+     */
+    iconName: string;
+    /**
+     * The list of options available in the dropdown.
+     * @type {Array<OptionType>}
+     * @required
+     */
+    options: Array<OptionType>;
+    /**
+     * The title displayed in the tooltip when hovering over the icon.
+     * @type {string}
+     * @optional
+     */
+    tooltipTitle?: string;
+    /**
+     * The placement of the tooltip relative to the icon.
+     * @type {'bottom' | 'left' | 'right' | 'top' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'}
+     * @optional
+     */
+    tooltipPlacement?: 'bottom' | 'left' | 'right' | 'top' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+    /**
+     * The placement of the dropdown menu relative to the icon.
+     * @type {'top' | 'left' | 'right' | 'bottom'}
+     * @optional
+     */
+    dropdownPlacement?: 'top' | 'left' | 'right' | 'down';
+    /**
+     * Callback function triggered when the icon is clicked.
+     * @type {function}
+     * @optional
+     */
+    onClick?: () => void;
+    /**
+     * Callback function triggered when an option is clicked.
+     * @param {OptionClick} option - The option that was clicked.
+     * @type {function}
+     * @optional
+     */
+    onOptionClick?: (option: OptionClick) => void;
+    /**
+     * The size of the icon button.
+     * @type {number}
+     * @default 20
+     */
+    iconButtonSize?: number;
+    /**
+     * The size of the icon.
+     * @type {number}
+     * @default 16
+     */
+    iconSize?: number;
+    /**
+     * The border radius of the icon.
+     * @type {number}
+     * @default 7
+     */
+    iconButtonBorderRadius?: number;
+}
+
+declare const MenuOption: ({ labelName, iconName, tooltipTitle, tooltipPlacement, options, dropdownPlacement, onClick, onOptionClick, iconButtonSize, iconButtonBorderRadius, iconSize, }: MenuOptionProps) => 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<number | string | DataProps>;
+    /**
+     * Column details for table
+     */
+    columns: Array<any>;
+    /**
+     * Header type to have different background color
+     */
+    headerType: 'default' | 'primary' | 'secondary';
+    /**
+     * 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;
+}
+
+declare const Table: ({ data, columns, headerType, withFixedHeader, borderWithRadius, height, className, }: TableProps) => react_jsx_runtime.JSX.Element | null;
+
+/**a
+ * Props for the Add Resource Button component.
+ *
+ * @property {string} [id] - An optional unique identifier for the Add Resource Button.
+ * @property {('primary' | 'secondary')} [variant] - Optional button style variant.
+ * @property {DirectionalArrow[]} directionalArrow - An array of directional arrows, each specifying the direction and associated menu options. Default values will be provided if not passed.
+ * @property {number} [zIndex] - An optional z-index value for positioning, defaults to 99.
+ */
+interface AddResourceButtonProps {
+    id?: string;
+    variant?: 'primary' | 'secondary';
+    directionalArrow: {
+        direction: 'top' | 'right' | 'down';
+        menuOptions: ({
+            label: string;
+            value: string | string[];
+            icon: string;
+            disable?: boolean;
+        })[];
+    }[];
+    zIndex?: number;
+}
+
+declare const AddButton: ({ id, variant, directionalArrow, zIndex, }: AddResourceButtonProps) => react_jsx_runtime.JSX.Element;
+
+type Status = 'passed' | 'failed' | 'warning' | 'skipped' | 'Passed' | 'Failed' | 'Skipped' | 'Warning';
+type StatusValue = {
+    status: Status;
+    value: number;
+};
+type DonutChartProps = {
+    radius: number;
+    lineWidth: number;
+    statusValues: StatusValue[];
+    legendDetailsType: string;
+    isLegendDetails: boolean;
+    gapAngle?: number;
+};
+
+declare const DonutChart: React__default.FC<DonutChartProps>;
+
+interface FileDropzoneProps {
+    /**
+     *  Icon to be displayed in the dropzone.
+     **/
+    icon?: ReactNode;
+    /**
+     *  Primary label to be shown in dropzone area
+     **/
+    primaryLabel?: string;
+    /**
+     *  Secondary label to be shown
+     **/
+    secondaryLabel?: string;
+    /**
+     *  Label to be shown in choose file/input button.
+     **/
+    buttonLabel?: string;
+    /**
+     *  . extension needs to be passed to allow the type of file to add or MIME type to be validate MIME type
+     **/
+    accept: string[];
+    /**
+     *  To allow multiple selection or drop of files.
+     **/
+    multiple?: boolean;
+    /**
+     *  Maximum files to be dropped or selected at once.
+     **/
+    maxFiles?: number;
+    /**
+     *  Maximum size of the file in numbers.
+     **/
+    maxSize?: number;
+    /**
+     *  Function with state to get the boolean value when the maxFiles is less than dropped files.
+     **/
+    onMaxFilesError?: () => void;
+    /**
+     *  To show error message if file size exceeds the max size
+     **/
+    maxSizeErrorMessage?: string;
+    /**
+     *  To show error message if file is not of accepted file type
+     **/
+    invalidFileMessage?: string;
+    /**
+     *  To show error message if file already exist with same name and type
+     **/
+    fileExistMessage?: string;
+    /**
+     *  To validate file type based on MIME type but mandatorily need to pass MIME type in accept props
+     **/
+    validateMIMEType?: boolean;
+}
+
+declare const FileDropzone: React.FC<FileDropzoneProps>;
+
+type Theme = 'ff-light-theme' | 'ff-dark-theme' | 'ff-grey-theme';
+interface ThemeContextType {
+    currentTheme: Theme;
+    setCurrentTheme: React.Dispatch<React.SetStateAction<Theme>>;
+    applyTheme: (newTheme: Theme) => void;
+}
+interface ThemeProviderProps {
+    children?: ReactNode;
+    theme?: Theme;
+}
+
+declare const ThemeProvider: React__default.FC<ThemeProviderProps>;
+
+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;
+}
+
+declare const Typography: React__default.FC<TypographyProps>;
+
+declare const useTheme: () => ThemeContextType;
+
+interface FormProps<T extends FieldValues> extends UseFormProps<T> {
+    onSubmit: SubmitHandler<T>;
+    children: (props: {
+        register: (name: FieldPath<T>, options?: any) => any;
+        errors: FieldErrors<T>;
+        handleBlur: (field: FieldPath<T>) => void;
+        getValues: () => T;
+        watch: (field?: FieldPath<T>) => any;
+        setValue: (field: FieldPath<T>, value: any, options?: object) => void;
+    }) => React__default.ReactNode;
+}
+declare const Form: <T extends FieldValues>({ onSubmit, children, ...rest }: FormProps<T>) => react_jsx_runtime.JSX.Element;
+
+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;
+    /**
+     * variants to set color/style of the input field
+     */
+    variant?: 'default' | 'primary';
+    /**
+     * type to set the input field type
+     */
+    type: 'text' | 'password' | 'number' | '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;
+    /**
+     * Options for the select dropdown
+     */
+    optionsList: Option[];
+    /**
+     * Selected option for the select dropdown
+     */
+    selectedOption?: Option;
+    /**
+     * onChange handler for input changes
+     */
+    onInputChangeHandler?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * onChange handler for dropdown changes
+     */
+    onDropdownChangeHandler?: (option: Option) => void;
+    /**
+     * onFocus action for input field
+     */
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => 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;
+}
+
+declare const InputWithDropdown: ({ name, label, value, type, disabled, required, placeholder, error, helperText, optionsList, selectedOption, onDropdownChangeHandler, onInputChangeHandler, }: InputWithDropdownProps) => react_jsx_runtime.JSX.Element;
+
+declare const RadioButton: React__default.FC<RadioButtonProps>;
+
+declare const RadioGroup: React__default.FC<RadioGroupProps>;
+
+interface ButtonProps {
+    text: string;
+    onClick: () => void;
+}
+interface ModalDimensions {
+    width?: number;
+    height?: number;
+}
+interface MiniEditModalProps {
+    /**
+     * A reference to the button element that triggers the modal.
+     */
+    anchorRef: RefObject<HTMLButtonElement>;
+    /**
+     * Optional properties for configuring the modal header.
+     */
+    headerProps?: ReactNode;
+    /**
+     * The main content to be displayed inside the modal
+     */
+    childContent: ReactNode;
+    /**
+     * Props for the cancel button inside the modal
+     */
+    cancelButtonProps: ButtonProps;
+    /**
+     * Props for the proceed button inside the modal.
+     */
+    proceedButtonProps: ButtonProps;
+    /**
+     * Optional content for the footer of the modal.
+     */
+    footerContent?: ReactNode;
+    /**
+     * Determines if the modal should be wrapped inside a container element.
+     */
+    isWrapped?: boolean;
+    /**
+     * Determines if the modal should have an animation when displayed.
+     */
+    isAnimated?: boolean;
+    /**
+     * Specifies if the modal should behave as a popover with an arrow.
+     */
+    isPopOver?: boolean;
+    /**
+     * Sets the position of the modal relative to its anchor.
+     * bottom: The modal appears below the anchor.
+     * right: The modal appears to the right of the anchor.
+     */
+    modalPosition?: 'bottom' | 'right' | 'top' | 'left';
+    /**
+     * Adds a top-left aligned arrow to the modal when its position is set to `'right'`.
+     */
+    leftTopArrow?: boolean;
+    /**
+     * A reference to an additional anchor element for positioning the modal.
+     */
+    firstAnchorRef?: RefObject<HTMLButtonElement>;
+    /**
+     * A numeric value representing the left position of the anchor element, used to calculate the modal's left position.
+     */
+    anchorRefLeftNum?: number;
+    /**
+     * Optional properties for configuring the modal's dimensions.
+     * width: The width of the modal.
+     * height: The height of the modal.
+     */
+    modalProperties?: ModalDimensions;
+    /**distance for the wrapper model from align alignments */
+    anchorLeftDistanceForWrapper?: number;
+    /**extra top space added from anchor */
+    extraTopSpace?: {
+        wrappedModal?: number;
+        normalModal?: number;
+    };
+    /**extra right space added from anchor */
+    extraRightSpace?: {
+        leftTopArrow?: number;
+        middleLeftArrow?: number;
+    };
+    /**extra left space added from anchor */
+    extraLeftSpace?: {
+        normal?: number;
+        rightAlignModal?: number;
+    };
+}
+
+declare const MiniModal: React$1.ForwardRefExoticComponent<MiniEditModalProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface ColumnDataProps {
+    name: string;
+    accessor: string;
+    width: string;
+    isClickable?: boolean;
+    minWidth?: string;
+    cell?: (e: any) => JSX.Element | string | ReactNode;
+}
+interface ObjectProps {
+    [key: string]: any;
+}
+interface TableTreeProps {
+    withCheckBox: boolean;
+    columnsData: Array<ColumnDataProps>;
+    treeData: Array<ObjectProps>;
+    onClick?: (event: React__default.MouseEvent<HTMLDivElement, MouseEvent>, data: any) => void;
+}
+declare const TableTree: ({ columnsData, treeData, onClick, }: TableTreeProps) => react_jsx_runtime.JSX.Element;
+
+interface TabsProps {
+    /**
+     * An array of tab objects containing label, component, and optional disabled status.
+     */
+    tabsData: {
+        label: string;
+        component: JSX.Element;
+        disabled?: boolean;
+    }[];
+    /**
+     * Defines the styling variant of the tabs.
+     */
+    variant?: 'default' | 'capsule';
+    /**
+     * 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;
+}
+
+declare const Tabs: ({ variant, tabsData, activeTabId, onTabClick, }: TabsProps) => react_jsx_runtime.JSX.Element;
+
+interface HighlightTextProps {
+    text?: string;
+    highlight?: String;
+}
+
+declare const HighlightText: React.FC<HighlightTextProps>;
+
+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<HTMLInputElement>) => void;
+    /**
+     * For partially checked checkbox
+     */
+    partial?: boolean;
+}
+
+declare const Checkbox: React__default.FC<CheckboxProps>;
+
+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;
+}
+
+declare const Search: ({ placeholder, onSearch, disabled, width, }: SearchProps) => react_jsx_runtime.JSX.Element;
+
+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;
+
+export { Accordion, AddButton as AddResourceButton, Button, Checkbox, Chip, Col, Container, DonutChart, Drawer, ExpandableMenu, FileDropzone, Form, HighlightText, Icon, Input, InputWithDropdown, MenuOption, MiniModal, MultiSelect, RadialChart, RadioButton, RadioGroup, Row, Search, Select, Table, TableTree, Tabs, Textarea as TextArea, ThemeProvider, Toaster, Toggle, Tooltip, Typography, checkEmpty, getExtension, getExtensionWithPeriod, useTheme };