@delightui/components 0.1.26 → 0.1.28

package/dist/cjs/components/atoms/Input/Input.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "value"> & {
+declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "type"> & {
     inputType?: import("./Input.types").InputTypeEnum;
     value?: string;
     onValueChanged?: (value: string) => void;

package/dist/cjs/components/atoms/index.d.ts

@@ -1,27 +1,21 @@
-export { default as ActionCard } from './ActionCard';
 export { default as ActionImage } from './ActionImage';
 export { default as Button } from './Button';
-export { default as Card } from './Card';
 export { default as Icon } from './Icon';
 export { default as IconButton } from './IconButton';
 export { default as Image } from './Image';
 export { default as Input } from './Input';
-export { default as List } from './List';
 export { default as Password } from './Password';
 export { default as Spinner } from './Spinner';
 export { default as Text } from './Text';
 export { default as TextArea } from './TextArea';
 export { default as ResponsiveComponent } from './ResponsiveComponent';
 export { default as ListItem } from './ListItem';
-export * from './ActionCard';
 export * from './ActionImage';
 export * from './Button';
-export * from './Card';
 export * from './Icon';
 export * from './IconButton';
 export * from './Image';
 export * from './Input';
-export * from './List';
 export * from './Password';
 export * from './Spinner';
 export * from './Text';

package/dist/cjs/components/molecules/DatePicker/DatePicker.types.d.ts

@@ -82,10 +82,6 @@ export type DatePickerProps = {
     * @default false
     */
     allowInput?: boolean;
-    /**
-     * Container element for the calendar when used inside a Popover
-     */
-    container?: HTMLElement | null;
     /**
      * Custom time picker plugin
      */
@@ -94,12 +90,14 @@ export 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;
 };
 export type CustomTimePickerConfig = {
     minuteStep: number;
-    /**
-     * Container element for the calendar when used inside a Popover
-     */
-    container?: HTMLElement | null;
 };
 export {};

package/dist/cjs/components/molecules/DatePicker/Plugins/customTimeSelector.d.ts

@@ -0,0 +1,4 @@
+import { Plugin } from "flatpickr/dist/types/options";
+import { CustomTimePickerConfig } from '../DatePicker.types';
+declare const timeDropdownPlugin: (config: CustomTimePickerConfig) => Plugin;
+export default timeDropdownPlugin;

package/dist/cjs/components/molecules/DatePicker/Plugins/utils.d.ts

@@ -15,8 +15,10 @@ export declare const filterDropdownOptions: (dropdown: HTMLDivElement, query: st
  * Positions the dropdown relative to the input field.
  * @param dropdown - The dropdown element to position.
  * @param inputElement - The input element to base the dropdown positioning on.
+ * @param wrapperElement - The wrapper element to base the dropdown positioning on. This will take precedence over the input element.
+ * @param dropdownPosition - The position of the dropdown. 'fixed' or 'absolute'.
  */
-export declare const positionDropdownRelativeToInput: (dropdown: HTMLDivElement, inputElement: HTMLInputElement, wrapperElement?: HTMLElement) => void;
+export declare const positionDropdownRelativeToInput: (dropdown: HTMLDivElement, inputElement: HTMLInputElement, wrapperElement?: HTMLElement, dropdownPosition?: "fixed" | "absolute") => void;
 /**
  * Formats a Date object into a time string (HH:MM AM/PM).
  * @param date - The Date object to format.

package/dist/cjs/components/molecules/Grid/Grid.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { GridProps } from './Grid.types';
+declare const Grid: (props: GridProps) => React.JSX.Element;
+export default Grid;

package/dist/cjs/components/molecules/Grid/Grid.types.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from "react";
+export type GridProps = HTMLAttributes<HTMLDivElement> & {
+    columns?: number;
+    rows?: number;
+};
+export type GridItemProps = HTMLAttributes<HTMLDivElement> & {
+    columnSpan?: number;
+    rowSpan?: number;
+};

package/dist/cjs/components/molecules/Grid/GridItem.d.ts

@@ -0,0 +1,3 @@
+import { GridItemProps } from './Grid.types';
+declare const GridItem: (props: GridItemProps) => import("react").JSX.Element;
+export default GridItem;

package/dist/cjs/components/molecules/Grid/index.d.ts

@@ -0,0 +1,5 @@
+import Grid from './Grid';
+import GridItem from './GridItem';
+import { GridProps, GridItemProps } from './Grid.types';
+export default Grid;
+export type { GridProps, GridItem, GridItemProps };

package/dist/cjs/components/molecules/GridList/GridList.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { GridListProps } from './GridList.types';
+import { ListItemType } from '../List/List.types';
+declare const GridList: <T extends ListItemType>(props: GridListProps<T>) => React.JSX.Element;
+export default GridList;

package/dist/cjs/components/molecules/GridList/GridList.types.d.ts

@@ -0,0 +1,5 @@
+import { ListProps } from "../List";
+import { ListItemType } from "../List/List.types";
+export type GridListProps<T extends ListItemType> = Omit<ListProps<T>, 'style'> & {
+    columns?: number;
+};

package/dist/cjs/components/molecules/GridList/index.d.ts

@@ -0,0 +1,4 @@
+import GridList from './GridList';
+import { GridListProps } from './GridList.types';
+export default GridList;
+export type { GridListProps };

package/dist/cjs/components/{atoms → molecules}/List/List.types.d.ts

@@ -9,9 +9,13 @@ export 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.
  */
 export type ListItemType = object & {
     id?: string | number;
+    itemClassName?: string;
+    itemStyle?: React.CSSProperties;
 };
 /**
  * Props for an individual list item component.
@@ -21,7 +25,7 @@ export type ListItemType = object & {
  * @property {React.FC<any>} component - The React functional component used to render the list item.
  * @property {T} item - The data for the list item.
  */
-export type ListItemProps<T extends ListItemType> = {
+export type ListItemProps<T extends ListItemType> = Omit<HTMLAttributes<HTMLLIElement>, 'id' | 'children'> & {
     id: string | number;
     component: React.FC<any>;
     item: T;
@@ -31,7 +35,9 @@ export type ListItemProps<T extends ListItemType> = {
  *
  * @template T - The type of the list items.
  */
-export type RootListProps<T extends ListItemType> = Omit<ListProps<T>, 'data' | 'component' | 'keyExtractor' | 'sortable'>;
+export type RootListProps<T extends ListItemType> = Omit<ListProps<T>, 'data' | 'component' | 'keyExtractor' | 'sortable'> & {
+    children: React.ReactNode;
+};
 /**
  * Props for the sortable list component.
  *
@@ -56,7 +62,7 @@ export type SortableListProps<T extends {
  * @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.
  */
-export type ListProps<T extends ListItemType> = HTMLAttributes<HTMLUListElement> & {
+export type ListProps<T extends ListItemType> = Omit<HTMLAttributes<HTMLUListElement>, 'children'> & {
     /**
      * The data to be rendered in the list.
      */

package/dist/cjs/components/molecules/Popover/Popover.types.d.ts

@@ -100,6 +100,11 @@ export type PopoverProps = {
      * Additional class for overlay container styling.
      */
     overlayClassName?: string;
+    /**
+     * Position of the Popover.
+     * @default 'absolute'
+     */
+    contentPosition?: 'absolute' | 'fixed';
 };
 export type PopoverHandle = {
     close: () => void;

package/dist/cjs/components/molecules/index.d.ts

@@ -13,6 +13,13 @@ export { default as TableCell } from './TableCell';
 export { default as TableHeader } from './TableHeader';
 export { default as TableRow } from './TableRow';
 export { default as Tabs } from './Tabs';
+export { default as List } from './List';
+export { default as ActionCard } from './ActionCard';
+export { default as Card } from './Card';
+export { default as GridList } from './GridList';
+export { default as Grid } from './Grid';
+export * from './ActionCard';
+export * from './Card';
 export * from './ButtonGroup';
 export * from './ContextMenu';
 export * from './DatePicker';
@@ -28,3 +35,6 @@ export * from './TableCell';
 export * from './TableHeader';
 export * from './TableRow';
 export * from './Tabs';
+export * from './List';
+export * from './GridList';
+export * from './Grid';