@delightui/components 0.1.16 → 0.1.17

package/dist/cjs/App.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
 import './resources/themes/base.css';
-import './resources/themes/override.css';
 declare function App(): React.JSX.Element;
 export default App;

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

@@ -6,5 +6,6 @@ declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttribu
     invalid?: boolean;
     leadingIcon?: React.ReactNode;
     trailingIcon?: React.ReactNode;
+    'component-variant'?: string;
 } & React.RefAttributes<HTMLInputElement>>;
 export default Input;

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

@@ -31,4 +31,8 @@ export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'v
      * Icon to be displayed after the input.
      */
     trailingIcon?: React.ReactNode;
+    /**
+     * provide a way to override the styling
+     */
+    'component-variant'?: string;
 };

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

@@ -1,4 +1,10 @@
-import React from 'react';
 import type { ListItemType, ListProps } from './List.types';
-declare const ListWrapper: <T extends ListItemType>(props: ListProps<T>) => React.JSX.Element;
-export default ListWrapper;
+/**
+ * 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>) => import("react").JSX.Element;
+export default List;

package/dist/cjs/components/atoms/List/List.types.d.ts

@@ -1,11 +1,61 @@
 import type { Dispatch, HTMLAttributes, SetStateAction } from 'react';
 /**
  * Enum for the alignment of the list.
+ *
+ * @typedef {'Horizontal' | 'Vertical'} ListAlignEnum
  */
 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.
+ */
 export type ListItemType = object & {
     id?: string | number;
 };
+/**
+ * Props for an individual list item component.
+ *
+ * @template T - The type of the list item.
+ * @property {string | number} id - The unique identifier of the list item.
+ * @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> = {
+    id: string | number;
+    component: React.FC<any>;
+    item: T;
+};
+/**
+ * Props for the root list component, excluding certain properties.
+ *
+ * @template T - The type of the list items.
+ */
+export type RootListProps<T extends ListItemType> = Omit<ListProps<T>, 'data' | 'component' | 'keyExtractor' | 'sortable'>;
+/**
+ * Props for the sortable list component.
+ *
+ * @template T - The type of the list items, which must include an `id` property.
+ * @property {T[]} data - The list of items to be rendered in the sortable list.
+ */
+export type SortableListProps<T extends {
+    id: string | number;
+}> = ListProps<T> & {
+    data: T[];
+};
+/**
+ * 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.
+ */
 export type ListProps<T extends ListItemType> = HTMLAttributes<HTMLUListElement> & {
     /**
      * The data to be rendered in the list.

package/dist/cjs/components/atoms/List/components/ListItem.d.ts

@@ -0,0 +1,9 @@
+import { ListItemProps, ListItemType } from "../List.types";
+/**
+ * A list item component that renders a single item.
+ *
+ * @template T - The type of the list item.
+ * @param {ListItemProps<T>} props - The properties for the list item.
+ * @returns {JSX.Element} The rendered list item.
+ */
+export declare const ListItem: <T extends ListItemType>(props: ListItemProps<T>) => import("react").JSX.Element;

package/dist/cjs/components/atoms/List/components/RootList.d.ts

@@ -0,0 +1,9 @@
+import { ListItemType, RootListProps } from "../List.types";
+/**
+ * A root list component that provides layout and styling for list items.
+ *
+ * @template T - The type of the list items.
+ * @param {RootListProps<T>} props - The properties for the root list.
+ * @returns {JSX.Element} The rendered root list.
+ */
+export declare const RootList: <T extends ListItemType>(props: RootListProps<T>) => import("react").JSX.Element;

package/dist/cjs/components/atoms/List/components/SortableList.d.ts

@@ -0,0 +1,11 @@
+import { SortableListProps } from "../List.types";
+/**
+ * A sortable list component that allows drag-and-drop reordering of items.
+ *
+ * @template T - The type of the list items, which must include an `id` property.
+ * @param {SortableListProps<T>} props - The properties for the sortable list.
+ * @returns {JSX.Element} The rendered sortable list.
+ */
+export declare const SortableList: <T extends {
+    id: string | number;
+}>(props: SortableListProps<T>) => import("react").JSX.Element;

package/dist/cjs/components/atoms/List/components/SortableListItem.d.ts

@@ -0,0 +1,9 @@
+import { ListItemProps, ListItemType } from "../List.types";
+/**
+ * A sortable item component that integrates with the dnd-kit library for drag-and-drop functionality.
+ *
+ * @template T - The type of the list item.
+ * @param {ListItemProps<T>} props - The properties for the sortable item.
+ * @returns {JSX.Element} The rendered sortable item.
+ */
+export declare const SortableItem: <T extends ListItemType>(props: ListItemProps<T>) => import("react").JSX.Element;

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

@@ -1,3 +1,4 @@
+import { Plugin } from 'flatpickr/dist/types/options';
 import FlatPickr from 'react-flatpickr';
 type DatePickerPosition = 'auto' | 'above' | 'below' | 'auto left' | 'auto center' | 'auto right' | 'above left' | 'above center' | 'above right' | 'below left' | 'below center' | 'below right';
 export type DatePickerProps = {
@@ -69,17 +70,36 @@ export type DatePickerProps = {
      */
     position?: DatePickerPosition;
     /**
-     * Function to parse date string to Date object.
-     * this function will be used to parse initial date string and date string from input field.
+     * Function to parse date strings into Date objects.
+     * Used for parsing both the initial date string and any date strings entered in the input field.
+     * @param date - The date value to parse, can be a string
+     * @param format - Optional format string to use when parsing date strings
+     * @returns A Date object representing the parsed date
      */
-    parseDate?: (date: string) => Date;
+    parseDate?: (date: string, format?: string) => Date;
     /**
     * Allow user to type date/time in input.
     * @default false
     */
     allowInput?: boolean;
+    /**
+     * Container element for the calendar when used inside a Popover
+     */
+    container?: HTMLElement | null;
+    /**
+     * Custom time picker plugin
+     */
+    customTimePickerPlugin?: (config: CustomTimePickerConfig) => Plugin;
+    /**
+     * Custom time picker plugin
+     */
+    customDateTimePickerPlugin?: (config: CustomTimePickerConfig) => Plugin;
 };
 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/utils.d.ts

@@ -30,3 +30,21 @@ export declare const formatTime: (date: Date) => string;
  */
 export declare const toggleDropdownVisibility: (dropdown: HTMLDivElement, isVisible: boolean) => void;
 export declare const generateTimeOptions: (minuteStep: number) => string[];
+/**
+ * Parses a time input string and returns a formatted time string.
+ * Handles various input formats and edge cases including AM/PM specifications.
+ * Hours greater than 24 are handled by taking remainder of 24.
+ *
+ * @param input - The time input string to parse (can be numeric, time string, or include AM/PM)
+ * @returns A formatted time string in "HH:MM AM/PM" format
+ *
+ * @example
+ * parseTimeInput("1") => "1:00 AM"
+ * parseTimeInput("abc") => "12:00 AM"
+ * parseTimeInput("3456") => "10:00 AM"
+ * parseTimeInput("1:30") => "1:30 AM"
+ * parseTimeInput("1:30 PM") => "1:30 PM"
+ * parseTimeInput("13:45") => "1:45 PM"
+ * parseTimeInput("25:00") => "1:00 AM"
+ */
+export declare const parseTimeInput: (input: string) => string;

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,4 +1,4 @@
 import DatePicker from './DatePicker';
-import type { DatePickerProps } from './DatePicker.types';
-export type { DatePickerProps };
+import type { DatePickerProps, CustomTimePickerConfig } from './DatePicker.types';
+export type { DatePickerProps, CustomTimePickerConfig };
 export default DatePicker;

package/dist/cjs/components/molecules/Nav/NavLink/NavLink.types.d.ts

@@ -1,6 +1,6 @@
 import { LinkProps as RouteLinkProps } from 'react-router-dom';
 import { ButtonProps } from '../../../atoms/Button/Button.types';
-export type NavLinkProps = Omit<RouteLinkProps, 'to'> & Pick<ButtonProps, 'size' | 'style' | 'type'> & {
+export type NavLinkProps = Omit<RouteLinkProps, 'to'> & Pick<ButtonProps, 'appearance' | 'size' | 'style' | 'type'> & {
     /**
      * 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.
@@ -14,4 +14,8 @@ export type NavLinkProps = Omit<RouteLinkProps, 'to'> & Pick<ButtonProps, 'size'
      * <NavLink to="https://www.example.com">External</NavLink>
      */
     to: string | -1;
+    /**
+     * provide a way to override the styling
+     */
+    'component-variant'?: string;
 };

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

@@ -117,6 +117,11 @@ export type SelectViewProps = Omit<HTMLAttributes<HTMLElement>, 'style' | 'child
    * @default false
    */
     hasDefaultOption?: boolean;
+    /**
+     * Indicates if multiple options can be selected.
+     * @default false
+     */
+    multiple?: boolean;
     /**
      * Additional CSS classes for customization.
      */

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

@@ -1,5 +1,7 @@
-import { HTMLAttributes, MouseEvent } from 'react';
-export type TabItemProps = Omit<HTMLAttributes<HTMLButtonElement>, 'style'> & {
+import { ButtonProps } from '../../atoms/Button';
+export type TabItemTypeEnum = 'Selected' | 'Unselected';
+export type TabItemStyleEnum = 'Filled' | 'Underlined';
+export type TabItemProps = Omit<ButtonProps, 'actionType' | 'appearance' | 'size' | 'style' | 'type'> & {
     /**
      * The tabs value.
      * @remarks
@@ -17,7 +19,8 @@ export type TabItemProps = Omit<HTMLAttributes<HTMLButtonElement>, 'style'> & {
      */
     defaultTab?: boolean;
     /**
-     * Click event handler for the button.
-     */
-    onClick?: (event?: MouseEvent<HTMLElement>) => void;
+    * The tab item style to apply.
+    * @default Filled
+    */
+    style?: TabItemStyleEnum;
 };

package/dist/cjs/components/molecules/Tabs/Tabs.Context.d.ts

@@ -10,4 +10,4 @@ export declare const useTab: () => TabContextType;
  * Provides context for Tab components
  * Manages the current tab state and providing a method to update
  */
-export declare const TabProvider: ({ children, value, onClick, }: TabProviderProps) => React.JSX.Element;
+export declare const TabProvider: ({ children, value, style, onClick, }: TabProviderProps) => React.JSX.Element;

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

@@ -1,4 +1,11 @@
+export type TabsStyleEnum = 'Filled' | 'Underlined';
+export type TabsTypeEnum = 'Horizontal' | 'Vertical';
 export type TabContextType = {
+    /**
+    * The tab item style to apply.
+    * @default Filled
+    */
+    style: TabsStyleEnum;
     /**
      * The currently selected tab.
      */
@@ -18,6 +25,11 @@ export type TabProviderProps = {
      * The value of the tab.
      */
     value?: number | string;
+    /**
+    * The tab item style to apply.
+    * @default Filled
+    */
+    style?: TabsStyleEnum;
     /**
      * Callback function when a tab is clicked.
      * @param value - The value of the clicked tab.
@@ -33,5 +45,15 @@ export type TabsViewProps = {
      * Additional class for styling.
      */
     className?: string;
+    /**
+    * The tab item style to apply.
+    * @default Filled
+    */
+    style?: TabsStyleEnum;
+    /**
+     * The tab item type to apply.
+     * @default Horizontal
+     */
+    type?: TabsTypeEnum;
 };
 export type TabsProps = TabProviderProps & TabsViewProps;