@delightui/components 0.1.26 → 0.1.28

package/dist/index.d.ts

@@ -1,42 +1,9 @@
-import React$1, { HTMLAttributes, ReactNode, ImgHTMLAttributes, SyntheticEvent, MouseEvent, InputHTMLAttributes, Dispatch, SetStateAction, TextareaHTMLAttributes, CSSProperties, FormHTMLAttributes, Ref, LiHTMLAttributes, TdHTMLAttributes, TableHTMLAttributes } from 'react';
-import { LinkProps } from 'react-router-dom';
+import * as React$1 from 'react';
+import React__default, { ImgHTMLAttributes, SyntheticEvent, HTMLAttributes, ReactNode, MouseEvent, InputHTMLAttributes, TextareaHTMLAttributes, CSSProperties, FormHTMLAttributes, Ref, LiHTMLAttributes, TdHTMLAttributes, Dispatch, SetStateAction, TableHTMLAttributes } from 'react';
 import { Offset } from 'react-overlays/usePopper';
 import { Plugin } from 'flatpickr/dist/types/options';
 import FlatPickr from 'react-flatpickr';
-
-type ActionCardProps = HTMLAttributes<HTMLDivElement> & Omit<LinkProps, 'to'> & {
-    /**
-     * The content to be displayed within the action card.
-     */
-    children: ReactNode;
-    /**
-     * Specifies if the action card is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Additional class for styling.
-     */
-    className?: string;
-    /**
-     * The destination URL or path for the navigation link.
-     * If the URL starts with "https", it will be treated as an external link and rendered as an <a> tag.
-     * Otherwise, it will be treated as an internal link and rendered as a <RouterNavLink> component.
-     *
-     * @example
-     * // Internal link
-     * <NavLink to="/home">Home</NavLink>
-     *
-     * // External link
-     * <NavLink to="https://www.example.com">External</NavLink>
-     */
-    to?: string | -1;
-};
-
-/**
- * ActionCard component definition.
- */
-declare const ActionCard: (props: ActionCardProps) => React$1.JSX.Element;
+import { LinkProps } from 'react-router-dom';
 
 /**
  * Enum for different image fit options.
@@ -88,7 +55,7 @@ type ActionImageProps = ImageProps & {
 /**
  * ActionImage component definition.
  */
-declare const ActionImage: (props: ActionImageProps) => React$1.JSX.Element;
+declare const ActionImage: (props: ActionImageProps) => React__default.JSX.Element;
 
 type ButtonAppearanceEnum = 'Default' | 'Inverse';
 type ButtonTypeEnum = 'Filled' | 'Outlined' | 'Ghost';
@@ -152,23 +119,7 @@ type ButtonProps = Omit<HTMLAttributes<HTMLButtonElement>, 'style'> & {
 /**
  * Button component definition.
  */
-declare const Button: (props: ButtonProps) => React$1.JSX.Element;
-
-type CardProps = {
-    /**
-     * The content to be displayed within the card.
-     */
-    children: ReactNode;
-    /**
-     * Additional class for styling.
-     */
-    className?: string;
-};
-
-/**
- * Card component definition.
- */
-declare const Card: (props: CardProps) => React$1.JSX.Element;
+declare const Button: (props: ButtonProps) => React__default.JSX.Element;
 
 type IconStyleEnum = 'Outlined' | 'Filled' | 'Round';
 type IconSizeEnum = 'Small' | 'Medium' | 'Large';
@@ -193,7 +144,7 @@ interface IconProps {
     className?: string;
 }
 
-declare const Icon: (props: IconProps) => React$1.JSX.Element | null;
+declare const Icon: (props: IconProps) => React__default.JSX.Element | null;
 
 type IconButtonAppearanceEnum = 'Default' | 'Inverse';
 type IconButtonStyleEnum = 'Primary' | 'Secondary';
@@ -220,7 +171,7 @@ interface IconButtonProps extends Omit<ButtonProps, 'leadingIcon' | 'trailingIco
     size?: IconButtonSizeEnum;
 }
 
-declare const IconButton: (props: IconButtonProps) => React$1.JSX.Element;
+declare const IconButton: (props: IconButtonProps) => React__default.JSX.Element;
 
 /**
  * Enum for different input types.
@@ -260,102 +211,27 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value'>
     'component-variant'?: string;
 };
 
-declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type" | "value"> & {
+declare const Input: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "value" | "type"> & {
     inputType?: InputTypeEnum;
     value?: string;
     onValueChanged?: (value: string) => void;
     invalid?: boolean;
-    leadingIcon?: React$1.ReactNode;
-    trailingIcon?: React$1.ReactNode;
+    leadingIcon?: React__default.ReactNode;
+    trailingIcon?: React__default.ReactNode;
     'component-variant'?: string;
-} & React$1.RefAttributes<HTMLInputElement>>;
-
-/**
- * Enum for the alignment of the list.
- *
- * @typedef {'Horizontal' | 'Vertical'} ListAlignEnum
- */
-type ListAlignEnum = 'Horizontal' | 'Vertical';
-/**
- * Represents a generic list item.
- *
- * @property {string | number} [id] - A unique identifier for the list item. This is optional and can be auto-generated if not provided.
- */
-type ListItemType = object & {
-    id?: string | number;
-};
-/**
- * Props for the list wrapper component.
- *
- * @template T - The type of the list items.
- * @property {T[]} [data] - The data to be rendered in the list.
- * @property {React.FC<any>} component - The React functional component used to render each list item.
- * @property {(item: T, index: number) => string | number} [keyExtractor] - A function to extract unique keys for each item.
- * @property {'Horizontal' | 'Vertical'} [align='Vertical'] - The alignment of the list. Defaults to `'Vertical'`.
- * @property {boolean} [wrap] - Whether the list content should wrap.
- * @property {string} [className] - Additional class for styling the list.
- * @property {boolean} [sortable] - Whether the list items can be sorted using drag-and-drop.
- * @property {Dispatch<SetStateAction<T[]>>} [updateSortOrder] - Callback function to update the order of the list items after sorting.
- */
-type ListProps<T extends ListItemType> = HTMLAttributes<HTMLUListElement> & {
-    /**
-     * The data to be rendered in the list.
-     */
-    data?: T[];
-    /**
-     * The component used to render each item in the list.
-     */
-    component: React.FC<any>;
-    /**
-     * Function to extract keys.
-     */
-    keyExtractor?: (item: T, index: number) => string | number;
-    /**
-     * The alignment of the list.
-     * @default 'Vertical'
-     */
-    align?: ListAlignEnum;
-    /**
-     * Flag to control if the content should wrap.
-     */
-    wrap?: boolean;
-    /**
-     * Additional class for styling.
-     */
-    className?: string;
-    /**
-     * Flag to enable sorting of list items
-     */
-    sortable?: boolean;
-    /**
-     * callback function to update the current order of data
-     *
-     * @param data
-     * @returns
-     */
-    updateSortOrder?: Dispatch<SetStateAction<T[]>>;
-};
-
-/**
- * A wrapper component that manages the rendering of either a sortable or regular list based on the provided props.
- *
- * @template T - The type of the list items.
- * @param {ListProps<T>} props - The properties for the list wrapper.
- * @returns {JSX.Element} The rendered list component.
- */
-declare const List: <T extends ListItemType>(props: ListProps<T>) => React$1.JSX.Element;
+} & React__default.RefAttributes<HTMLInputElement>>;
 
 type PasswordProps = Omit<InputProps, 'inputType' | 'trailingIcon'> & {
     hideTrailingIcon?: boolean;
 };
 
-declare const Password: (props: PasswordProps) => React$1.JSX.Element;
+declare const Password: (props: PasswordProps) => React__default.JSX.Element;
 
 type SpinnerProps = {
     className?: string;
 };
 
-declare const Spinner: ({ className }: SpinnerProps) => React$1.JSX.Element;
+declare const Spinner: ({ className }: SpinnerProps) => React__default.JSX.Element;
 
 declare const types: readonly ["Heading1", "Heading2", "Heading3", "Heading4", "Heading5", "Heading6", "BodyLarge", "BodyMedium", "BodySmall"];
 declare const weights: readonly ["Thin", "ExtraLight", "Light", "Regular", "Medium", "SemiBold", "Bold", "ExtraBold", "Black", "ExtraBlack", 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
@@ -435,7 +311,7 @@ interface TextProps {
 /**
  * Text component definition.
  */
-declare const Text: (props: TextProps) => React$1.JSX.Element;
+declare const Text: (props: TextProps) => React__default.JSX.Element;
 
 type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'> & {
     /**
@@ -458,12 +334,12 @@ type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'>
     className?: string;
 };
 
-declare const TextArea: React$1.ForwardRefExoticComponent<Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, "value"> & {
+declare const TextArea: React__default.ForwardRefExoticComponent<Omit<React__default.TextareaHTMLAttributes<HTMLTextAreaElement>, "value"> & {
     value?: string;
     onValueChanged?: (value: string) => void;
     invalid?: boolean;
     className?: string;
-} & React$1.RefAttributes<HTMLTextAreaElement>>;
+} & React__default.RefAttributes<HTMLTextAreaElement>>;
 
 type ResponsiveComponentProps<T> = {
     component: React.FC<T>;
@@ -474,8 +350,8 @@ type BreakpointProps<T> = {
     children: React.ReactElement<T>;
 };
 
-declare const Breakpoint: <T>({ children }: BreakpointProps<T>) => React$1.JSX.Element;
-declare const ResponsiveComponent: <T>(props: ResponsiveComponentProps<T>) => React$1.JSX.Element;
+declare const Breakpoint: <T>({ children }: BreakpointProps<T>) => React__default.JSX.Element;
+declare const ResponsiveComponent: <T>(props: ResponsiveComponentProps<T>) => React__default.JSX.Element;
 
 type ListItemProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {
     /**
@@ -500,7 +376,7 @@ type ListItemProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {
     className?: string;
 };
 
-declare const ListItem: (props: ListItemProps) => React$1.JSX.Element;
+declare const ListItem: (props: ListItemProps) => React__default.JSX.Element;
 
 /**
  * Enum for the alignment of the button-group.
@@ -534,7 +410,7 @@ type ButtonGroupProps = {
 /**
  * ButtonGroup component definition.
  */
-declare const ButtonGroup: (props: ButtonGroupProps) => React$1.JSX.Element;
+declare const ButtonGroup: (props: ButtonGroupProps) => React__default.JSX.Element;
 
 /**
  * Enum for the action type of the Popover.
@@ -562,7 +438,7 @@ type PopoverProps = {
     /**
      * Ref or Element for the Popover component to render in.
      */
-    container?: HTMLElement | React$1.RefObject<HTMLElement> | null;
+    container?: HTMLElement | React__default.RefObject<HTMLElement> | null;
     /**
      * The content to display in the Popover.
      */
@@ -635,6 +511,11 @@ type PopoverProps = {
      * Additional class for overlay container styling.
      */
     overlayClassName?: string;
+    /**
+     * Position of the Popover.
+     * @default 'absolute'
+     */
+    contentPosition?: 'absolute' | 'fixed';
 };
 type PopoverHandle = {
     close: () => void;
@@ -648,11 +529,11 @@ type ContextMenuProps = HTMLAttributes<HTMLUListElement> & {
     /**
      * The content to be rendered inside the context menu.
      */
-    children: React$1.ReactNode;
+    children: React__default.ReactNode;
     /**
      * The element that triggers the display of the context menu.
      */
-    target: React$1.ReactNode;
+    target: React__default.ReactNode;
     /**
      * Alignment of the menu relative to its target.
      * @default 'Center'
@@ -705,7 +586,7 @@ type ContextMenuProps = HTMLAttributes<HTMLUListElement> & {
 /**
  * ContextMenu component that renders a popover menu.
  */
-declare const ContextMenu: (props: ContextMenuProps) => React$1.JSX.Element;
+declare const ContextMenu: (props: ContextMenuProps) => React__default.JSX.Element;
 
 /**
  * Props for the MenuItem component.
@@ -736,7 +617,7 @@ type MenuItemProps = HTMLAttributes<HTMLLIElement> & {
  *
  * Renders a menu item (`<li>`) with optional disabled and selected states.
  */
-declare const MenuItem: (props: MenuItemProps) => React$1.JSX.Element;
+declare const MenuItem: (props: MenuItemProps) => React__default.JSX.Element;
 
 type DatePickerPosition = 'auto' | 'above' | 'below' | 'auto left' | 'auto center' | 'auto right' | 'above left' | 'above center' | 'above right' | 'below left' | 'below center' | 'below right';
 type DatePickerProps = {
@@ -820,10 +701,6 @@ type DatePickerProps = {
     * @default false
     */
     allowInput?: boolean;
-    /**
-     * Container element for the calendar when used inside a Popover
-     */
-    container?: HTMLElement | null;
     /**
      * Custom time picker plugin
      */
@@ -832,16 +709,18 @@ type DatePickerProps = {
      * Custom time picker plugin
      */
     customDateTimePickerPlugin?: (config: CustomTimePickerConfig) => Plugin;
+    /**
+     * Use custom time input same as date picker input
+     * This is useful when the datepicker is inline and is re-added to the DOM after closing
+     * For example using this inside a Popover as content
+     */
+    useCustomTimeInputForTimePicker?: boolean;
 };
 type CustomTimePickerConfig = {
     minuteStep: number;
-    /**
-     * Container element for the calendar when used inside a Popover
-     */
-    container?: HTMLElement | null;
 };
 
-declare const DatePicker: (props: DatePickerProps) => React$1.JSX.Element;
+declare const DatePicker: (props: DatePickerProps) => React__default.JSX.Element;
 
 /**
  * Type representing the allowed values for form fields
@@ -963,13 +842,13 @@ type FormContextValues<T extends FormState = FormState> = {
     updateFieldValue: (name: string, value: FieldValue) => void;
     formErrors: FormErrors<T>;
     updateFieldError: (name: keyof T, errorMessage: string) => void;
-    onFormSubmit: React$1.FormEventHandler<HTMLFormElement>;
+    onFormSubmit: React__default.FormEventHandler<HTMLFormElement>;
     updateFieldValidators: (name: keyof T, validate?: FieldValidationFunction) => void;
     updateRequiredFields: (name: keyof T, required?: boolean) => void;
 };
 type FormProviderProps<T extends FormState = FormState> = {
     formRef?: Ref<HTMLFormElement>;
-    children?: React$1.ReactNode;
+    children?: React__default.ReactNode;
     formState?: T;
     onFormStateChange?: FormStateChangeHandler<T>;
     formValidator?: FormValidator<T>;
@@ -1077,7 +956,7 @@ declare const useField: <T extends FieldValue = FieldValue>(props: UseFieldProps
     formFieldId: string | undefined;
 };
 
-declare const FormField: (props: FormFieldProviderProps & FormFieldProps) => React$1.JSX.Element;
+declare const FormField: (props: FormFieldProviderProps & FormFieldProps) => React__default.JSX.Element;
 
 /**
  * Enum defining the possible sizes for the Modal component.
@@ -1136,15 +1015,15 @@ type ModalProps = {
 /**
  * Modal component for displaying a dialog window.
  */
-declare const Modal: (props: ModalProps) => React$1.JSX.Element;
+declare const Modal: (props: ModalProps) => React__default.JSX.Element;
 
 type NavProps = HTMLAttributes<HTMLElement> & {};
 
-declare const Nav: (props: NavProps) => React$1.JSX.Element;
+declare const Nav: (props: NavProps) => React__default.JSX.Element;
 
 type NavItemProps = LiHTMLAttributes<HTMLElement> & {};
 
-declare const NavItem: (props: NavItemProps) => React$1.JSX.Element;
+declare const NavItem: (props: NavItemProps) => React__default.JSX.Element;
 
 type NavLinkProps = Omit<LinkProps, 'to'> & Pick<ButtonProps, 'appearance' | 'size' | 'style' | 'type'> & {
     /**
@@ -1166,13 +1045,13 @@ type NavLinkProps = Omit<LinkProps, 'to'> & Pick<ButtonProps, 'appearance' | 'si
     'component-variant'?: string;
 };
 
-declare const NavLink: (props: NavLinkProps) => React$1.JSX.Element;
+declare const NavLink: (props: NavLinkProps) => React__default.JSX.Element;
 
 /**
  * Popover component that displays a floating content element in relation to a target element.
  * It can be triggered via different user actions like 'Click' or 'Hover'.
  */
-declare const Popover: React$1.ForwardRefExoticComponent<PopoverProps & React$1.RefAttributes<PopoverHandle>>;
+declare const Popover: React__default.ForwardRefExoticComponent<PopoverProps & React__default.RefAttributes<PopoverHandle>>;
 
 /**
  * Props for the Option component, extending LiHTMLAttributes<HTMLLIElement>.
@@ -1212,7 +1091,7 @@ type OptionProps = LiHTMLAttributes<HTMLLIElement> & {
  * @param props - Props for configuring the Option component.
  * @returns Element representing the option.
  */
-declare const Option: (props: OptionProps) => React$1.JSX.Element;
+declare const Option: (props: OptionProps) => React__default.JSX.Element;
 
 /**
  * Represents the context provided by the Select component.
@@ -1363,7 +1242,7 @@ declare const useSelectContext: () => SelectContextType;
  * @param props - Props for configuring the SelectProvider.
  * @returns JSX element that provides context to its children.
  */
-declare const SelectProvider: ({ children, value, defaultValue, multiple, disabled, onValueChanged, }: SelectProviderProps) => React$1.JSX.Element;
+declare const SelectProvider: ({ children, value, defaultValue, multiple, disabled, onValueChanged, }: SelectProviderProps) => React__default.JSX.Element;
 
 /**
  * Select component that wraps SelectComponent with SelectProvider.
@@ -1395,7 +1274,7 @@ interface TabContentProps {
     className?: string;
 }
 
-declare const TabContent: (props: TabContentProps) => React$1.JSX.Element | null;
+declare const TabContent: (props: TabContentProps) => React__default.JSX.Element | null;
 
 type TabItemStyleEnum = 'Filled' | 'Underlined';
 type TabItemProps = Omit<ButtonProps, 'actionType' | 'appearance' | 'size' | 'style' | 'type'> & {
@@ -1422,23 +1301,23 @@ type TabItemProps = Omit<ButtonProps, 'actionType' | 'appearance' | 'size' | 'st
     style?: TabItemStyleEnum;
 };
 
-declare const TabItem: (props: TabItemProps) => React$1.JSX.Element;
+declare const TabItem: (props: TabItemProps) => React__default.JSX.Element;
 
 type TableBodyProps = HTMLAttributes<HTMLTableSectionElement>;
 
-declare const TableBody: (props: TableBodyProps) => React$1.JSX.Element;
+declare const TableBody: (props: TableBodyProps) => React__default.JSX.Element;
 
 type TableCellProps = TdHTMLAttributes<HTMLTableCellElement>;
 
-declare const TableCell: (props: TableCellProps) => React$1.JSX.Element;
+declare const TableCell: (props: TableCellProps) => React__default.JSX.Element;
 
 type TableHeaderProps = HTMLAttributes<HTMLTableSectionElement>;
 
-declare const TableHeader: (props: TableHeaderProps) => React$1.JSX.Element;
+declare const TableHeader: (props: TableHeaderProps) => React__default.JSX.Element;
 
 type TableRowProps = HTMLAttributes<HTMLTableRowElement>;
 
-declare const TableRow: (props: TableRowProps) => React$1.JSX.Element;
+declare const TableRow: (props: TableRowProps) => React__default.JSX.Element;
 
 type TabsStyleEnum = 'Filled' | 'Underlined';
 type TabsTypeEnum = 'Horizontal' | 'Vertical';
@@ -1506,13 +1385,161 @@ type TabsProps = TabProviderProps & TabsViewProps;
  */
 declare const useTab: () => TabContextType;
 
-declare const Tabs: (props: TabsProps) => React$1.JSX.Element;
+declare const Tabs: (props: TabsProps) => React__default.JSX.Element;
+
+/**
+ * Enum for the alignment of the list.
+ *
+ * @typedef {'Horizontal' | 'Vertical'} ListAlignEnum
+ */
+type ListAlignEnum = 'Horizontal' | 'Vertical';
+/**
+ * Represents a generic list item.
+ *
+ * @property {string | number} [id] - A unique identifier for the list item. This is optional and can be auto-generated if not provided.
+ * @property {string} [itemClassName] - Additional class for styling the list item.
+ * @property {React.CSSProperties} [itemStyle] - Additional styles for the list item.
+ */
+type ListItemType = object & {
+    id?: string | number;
+    itemClassName?: string;
+    itemStyle?: React.CSSProperties;
+};
+/**
+ * Props for the list wrapper component.
+ *
+ * @template T - The type of the list items.
+ * @property {T[]} [data] - The data to be rendered in the list.
+ * @property {React.FC<any>} component - The React functional component used to render each list item.
+ * @property {(item: T, index: number) => string | number} [keyExtractor] - A function to extract unique keys for each item.
+ * @property {'Horizontal' | 'Vertical'} [align='Vertical'] - The alignment of the list. Defaults to `'Vertical'`.
+ * @property {boolean} [wrap] - Whether the list content should wrap.
+ * @property {string} [className] - Additional class for styling the list.
+ * @property {boolean} [sortable] - Whether the list items can be sorted using drag-and-drop.
+ * @property {Dispatch<SetStateAction<T[]>>} [updateSortOrder] - Callback function to update the order of the list items after sorting.
+ */
+type ListProps<T extends ListItemType> = Omit<HTMLAttributes<HTMLUListElement>, 'children'> & {
+    /**
+     * The data to be rendered in the list.
+     */
+    data?: T[];
+    /**
+     * The component used to render each item in the list.
+     */
+    component: React.FC<any>;
+    /**
+     * Function to extract keys.
+     */
+    keyExtractor?: (item: T, index: number) => string | number;
+    /**
+     * The alignment of the list.
+     * @default 'Vertical'
+     */
+    align?: ListAlignEnum;
+    /**
+     * Flag to control if the content should wrap.
+     */
+    wrap?: boolean;
+    /**
+     * Additional class for styling.
+     */
+    className?: string;
+    /**
+     * Flag to enable sorting of list items
+     */
+    sortable?: boolean;
+    /**
+     * callback function to update the current order of data
+     *
+     * @param data
+     * @returns
+     */
+    updateSortOrder?: Dispatch<SetStateAction<T[]>>;
+};
+
+/**
+ * A wrapper component that manages the rendering of either a sortable or regular list based on the provided props.
+ *
+ * @template T - The type of the list items.
+ * @param {ListProps<T>} props - The properties for the list wrapper.
+ * @returns {JSX.Element} The rendered list component.
+ */
+declare const List: <T extends ListItemType>(props: ListProps<T>) => React__default.JSX.Element;
+
+type ActionCardProps = HTMLAttributes<HTMLDivElement> & Omit<LinkProps, 'to'> & {
+    /**
+     * The content to be displayed within the action card.
+     */
+    children: ReactNode;
+    /**
+     * Specifies if the action card is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional class for styling.
+     */
+    className?: string;
+    /**
+     * The destination URL or path for the navigation link.
+     * If the URL starts with "https", it will be treated as an external link and rendered as an <a> tag.
+     * Otherwise, it will be treated as an internal link and rendered as a <RouterNavLink> component.
+     *
+     * @example
+     * // Internal link
+     * <NavLink to="/home">Home</NavLink>
+     *
+     * // External link
+     * <NavLink to="https://www.example.com">External</NavLink>
+     */
+    to?: string | -1;
+};
+
+/**
+ * ActionCard component definition.
+ */
+declare const ActionCard: (props: ActionCardProps) => React__default.JSX.Element;
+
+type CardProps = {
+    /**
+     * The content to be displayed within the card.
+     */
+    children: ReactNode;
+    /**
+     * Additional class for styling.
+     */
+    className?: string;
+};
+
+/**
+ * Card component definition.
+ */
+declare const Card: (props: CardProps) => React__default.JSX.Element;
+
+type GridListProps<T extends ListItemType> = Omit<ListProps<T>, 'style'> & {
+    columns?: number;
+};
+
+declare const GridList: <T extends ListItemType>(props: GridListProps<T>) => React__default.JSX.Element;
+
+type GridProps = HTMLAttributes<HTMLDivElement> & {
+    columns?: number;
+    rows?: number;
+};
+type GridItemProps = HTMLAttributes<HTMLDivElement> & {
+    columnSpan?: number;
+    rowSpan?: number;
+};
+
+declare const Grid: (props: GridProps) => React__default.JSX.Element;
+
+declare const GridItem: (props: GridItemProps) => React$1.JSX.Element;
 
-declare const Form: <T extends FormState>(props: FormProviderProps<T> & FormProps) => React$1.JSX.Element;
+declare const Form: <T extends FormState>(props: FormProviderProps<T> & FormProps) => React__default.JSX.Element;
 
 type TableProps = TableHTMLAttributes<HTMLTableElement>;
 
-declare const Table: (props: TableProps) => React$1.JSX.Element;
+declare const Table: (props: TableProps) => React__default.JSX.Element;
 
 type ThemeContextType = {
     theme: string;
@@ -1523,7 +1550,7 @@ type ThemeProviderProps = {
     children?: ReactNode;
 };
 
-declare const ThemeContext: React$1.Context<ThemeContextType>;
-declare const ThemeProvider: React$1.FC<ThemeProviderProps>;
+declare const ThemeContext: React__default.Context<ThemeContextType>;
+declare const ThemeProvider: React__default.FC<ThemeProviderProps>;
 
-export { ActionCard, type ActionCardProps, ActionImage, type ActionImageProps, Breakpoint, type BreakpointProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, ContextMenu, type ContextMenuProps, type CustomTimePickerConfig, DatePicker, type DatePickerProps, type FieldValidationFunction, type FieldValidators, type FieldValue, Form, type FormContextValues, type FormErrors, FormField, type FormFieldProps, type FormProps, type FormProviderProps, type FormState, type FormStateChangeHandler, type FormSubmitHandler, type FormValidator, Icon, IconButton, type IconButtonProps, type IconButtonStyleEnum, type IconProps, type IconSizeEnum, type IconStyleEnum, Image, type ImageFitEnum, type ImageProps, Input, type InputProps, type InputTypeEnum, List, ListItem, type ListItemProps, type ListProps, MenuItem, type MenuItemProps, Modal, type ModalProps, Nav, NavItem, type NavItemProps, NavLink, type NavLinkProps, type NavProps, Option, type OptionProps, type OverlayDirectionEnum, Password, Popover, type PopoverHandle, type PopoverProps, type RequiredFields, ResponsiveComponent, type ResponsiveComponentProps, Select, type SelectProps, SelectProvider, Spinner, type SpinnerProps, TabContent, type TabContentProps, TabItem, type TabItemProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Text, TextArea, type TextAreaProps, type TextDecorationEnum, type TextProps, type TextTypeEnum, type TextWeightEnum, ThemeContext, type ThemeContextType, ThemeProvider, type ThemeProviderProps, useField, useSelectContext, useTab };
+export { ActionCard, type ActionCardProps, ActionImage, type ActionImageProps, Breakpoint, type BreakpointProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, ContextMenu, type ContextMenuProps, type CustomTimePickerConfig, DatePicker, type DatePickerProps, type FieldValidationFunction, type FieldValidators, type FieldValue, Form, type FormContextValues, type FormErrors, FormField, type FormFieldProps, type FormProps, type FormProviderProps, type FormState, type FormStateChangeHandler, type FormSubmitHandler, type FormValidator, Grid, GridItem, type GridItemProps, GridList, type GridListProps, type GridProps, Icon, IconButton, type IconButtonProps, type IconButtonStyleEnum, type IconProps, type IconSizeEnum, type IconStyleEnum, Image, type ImageFitEnum, type ImageProps, Input, type InputProps, type InputTypeEnum, List, ListItem, type ListItemProps, type ListProps, MenuItem, type MenuItemProps, Modal, type ModalProps, Nav, NavItem, type NavItemProps, NavLink, type NavLinkProps, type NavProps, Option, type OptionProps, type OverlayDirectionEnum, Password, Popover, type PopoverHandle, type PopoverProps, type RequiredFields, ResponsiveComponent, type ResponsiveComponentProps, Select, type SelectProps, SelectProvider, Spinner, type SpinnerProps, TabContent, type TabContentProps, TabItem, type TabItemProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Text, TextArea, type TextAreaProps, type TextDecorationEnum, type TextProps, type TextTypeEnum, type TextWeightEnum, ThemeContext, type ThemeContextType, ThemeProvider, type ThemeProviderProps, useField, useSelectContext, useTab };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@delightui/components",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "private": false,
   "scripts": {
     "start": "vite",