@delightui/components 0.1.4 → 0.1.6

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

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+/**
+ * Enum for the alignment of the button-group.
+ */
+export type ButtonGroupAlignEnum = 'Horizontal' | 'Vertical';
+/**
+ * Enum for the type of the button-group.
+ */
+export type ButtonGroupTypeEnum = 'Outlined' | 'Ghost';
+export type ButtonGroupProps = {
+    /**
+     * The alignment of the button-group.
+     * @default 'Horizontal'
+     */
+    align?: ButtonGroupAlignEnum;
+    /**
+     * Type of the button-group.
+     * @default 'Filled'
+     */
+    type?: ButtonGroupTypeEnum;
+    /**
+     * The content to be displayed within the ButtonGroup.
+     */
+    children: ReactNode | ReactNode[];
+    /**
+     * Additional class for styling.
+     */
+    className?: string;
+};

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

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

package/dist/cjs/components/molecules/ButtonGroup/utils.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+/**
+ * Renders a list of button items.
+ *
+ * This function takes children elements (which can be a single ReactNode
+ * or an array of ReactNodes) and maps them to list items (<li>)
+ * with unique keys.
+ *
+ * @param {ReactNode | ReactNode[]} children - The button items to render.
+ * @returns {ReactElement | null} A React fragment containing a list of
+ *          <li> elements, each wrapping a child.
+ */
+export declare const renderButtonItem: (children: ReactNode | ReactNode[]) => React.JSX.Element;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ContextMenuProps } from './ContextMenu.types';
+/**
+ * ContextMenu component that renders a popover menu.
+ */
+declare const ContextMenu: (props: ContextMenuProps) => React.JSX.Element;
+export default ContextMenu;

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

@@ -0,0 +1,64 @@
+import type { HTMLAttributes } from 'react';
+import type React from 'react';
+import type { Offset } from 'react-overlays/usePopper';
+import type { ActionType, ContentProps, OverlayAlignEnum, OverlayDirectionEnum } from '../Popover/Popover.types';
+/**
+ * Props for the ContextMenu component.
+ */
+export type ContextMenuProps = HTMLAttributes<HTMLUListElement> & {
+    /**
+     * The content to be rendered inside the context menu.
+     */
+    children: React.ReactNode;
+    /**
+     * The element that triggers the display of the context menu.
+     */
+    target: React.ReactNode;
+    /**
+     * Alignment of the menu relative to its target.
+     * @default 'Center'
+     */
+    alignment?: OverlayAlignEnum;
+    /**
+     * Direction in which the menu expands.
+     * @default 'Down'
+     */
+    direction?: OverlayDirectionEnum;
+    /**
+     * Offset position of the menu relative to its target.
+     */
+    offset?: Offset;
+    /**
+     * Controls whether the context menu is visible (`true`) or hidden (`false`).
+     * @default false
+     */
+    show?: boolean;
+    /**
+     * Disables interaction with the context menu if `true`.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional props to be passed to the menu content.
+     */
+    menuProps?: ContentProps;
+    /**
+     * Action that triggers the display of the context menu.
+     * @default 'Click'
+     */
+    action?: ActionType;
+    /**
+     * Determines whether the context menu should be hidden when clicking away from it.
+     * @default true
+     */
+    hideOnClickAway?: boolean;
+    /**
+     * Determines whether the menu should remain open when clicking inside it.
+     * @default false
+     */
+    keepMenuOnItemClick?: boolean;
+    /**
+     * Additional CSS class names to apply to the context menu.
+     */
+    className?: string;
+};

package/dist/cjs/components/molecules/ContextMenu/MenuItem/MenuItem.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { MenuItemProps } from './MenuItem.types';
+/**
+ * MenuItem component definition.
+ *
+ * Renders a menu item (`<li>`) with optional disabled and selected states.
+ */
+declare const MenuItem: (props: MenuItemProps) => React.JSX.Element;
+export default MenuItem;

package/dist/cjs/components/molecules/ContextMenu/MenuItem/MenuItem.types.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from 'react';
+/**
+ * Props for the MenuItem component.
+ */
+export type MenuItemProps = HTMLAttributes<HTMLLIElement> & {
+    /**
+     * The content to be rendered inside the menu item.
+     */
+    children: React.ReactNode;
+    /**
+     * Optional key to identify the menu item uniquely.
+     */
+    key?: string;
+    /**
+     * Disables interaction with the menu item if `true`.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Indicates whether the menu item is selected.
+     * @default false
+     */
+    selected?: boolean;
+};

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

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

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

@@ -0,0 +1,6 @@
+import ContextMenu from './ContextMenu';
+import type { ContextMenuProps } from './ContextMenu.types';
+export type { ContextMenuProps };
+export { default as MenuItem } from './MenuItem';
+export * from './MenuItem';
+export default ContextMenu;

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

@@ -0,0 +1,7 @@
+import 'flatpickr/dist/flatpickr.css';
+import React from 'react';
+import 'flatpickr/dist/flatpickr.css';
+import type { DatePickerProps } from './DatePicker.types';
+import './Flatpickr.custom.scss';
+declare const DatePicker: (props: DatePickerProps) => React.JSX.Element;
+export default DatePicker;

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

@@ -0,0 +1,77 @@
+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 = {
+    /**
+     * Additional class for styling.
+     */
+    className?: string;
+    /**
+     * The minimum selectable date.
+     */
+    minDate?: string | Date;
+    /**
+     * The maximum selectable date.
+     */
+    maxDate?: string | Date;
+    /**
+     * Enable time selection in the date picker.
+     * @default false
+     */
+    enableTime?: boolean;
+    /**
+     * Enable selecting a start and end date.
+     * @default false
+     */
+    enableRange?: boolean;
+    /**
+     * The date that is initially displayed.
+     */
+    defaultDate?: string | Date;
+    /**
+     * The format of the date to be displayed.
+     * @remark
+     * For info about what formats exist, refer to the flatpickr documentation
+     */
+    dateFormat?: string;
+    /**
+     * Callback function when the date(s) are changed.
+     * @param dates - Array of selected dates.
+     * @param dateStr - String representation of the selected date(s). Will match the date format.
+     */
+    onChange?: (dates: Date[], dateStr: string) => void;
+    /**
+     * Callback function when the date picker is opened.
+     * @param dates - Array of selected dates.
+     * @param dateStr - String representation of the selected date(s). Will match the date format.
+     */
+    onOpen?: (dates: Date[], dateStr: string) => void;
+    /**
+     * Callback function when the date picker is closed.
+     * @param dates - Array of selected dates.
+     * @param dateStr - String representation of the selected date(s). Will match the date format.
+     */
+    onClose?: (dates: Date[], dateStr: string) => void;
+    /**
+     * render date picker inline
+     */
+    inline?: boolean;
+    /**
+   * Hide calendar for only time picker.
+   * @default false
+   */
+    noCalendar?: boolean;
+    /**
+     * The Flatpickr ref.
+     */
+    datePickerRef?: React.RefObject<FlatPickr>;
+    /**
+     * Datepicker position
+     */
+    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.
+     */
+    parseDate?: (date: string) => Date;
+};
+export {};

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

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

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

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

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

@@ -0,0 +1,124 @@
+import type { HTMLAttributes } from 'react';
+import { FieldValidationFunction, FieldValue } from '../../organisms/Form/Form.types';
+/**
+ * Props for the FormField component.
+ */
+export type FormFieldProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * The label for the form field
+     */
+    label: string;
+    /**
+     * Optional message for the form field
+     */
+    message?: string;
+    /**
+     * Info icon for message
+     */
+    infoIcon?: React.ReactNode;
+};
+/**
+ * Context values for the FormField component.
+ */
+export type FormFieldContextValues<T extends FieldValue = FieldValue> = {
+    /**
+     * The current value of the field
+     */
+    fieldValue: T;
+    /**
+     * Function to update the field value
+     */
+    updateFieldValue: (value: T) => void;
+    /**
+     * Indicates if the field is invalid
+     * @default false
+     */
+    invalidField: boolean;
+    /**
+     * Indicates if the field is disabled
+     * @default false
+     */
+    disabledField?: boolean;
+    /**
+     * Indicates if the field is required
+     * @default false
+     */
+    requiredField?: boolean;
+    /**
+     * Error message for the field
+     */
+    fieldError?: string;
+    /**
+     * id to use as htmlFor for label and id for input elements
+     */
+    formFieldId: string;
+};
+/**
+ * Props for the FormFieldProvider component.
+ */
+export type FormFieldProviderProps = {
+    /**
+     * Child components
+     */
+    children: React.ReactNode;
+    /**
+     * Name of the form field
+     */
+    name: string;
+    /**
+     * Indicates if the field is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Indicates if the field is invalid
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Indicates if the field is required
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Validation function for the field
+     */
+    validate?: FieldValidationFunction;
+    /**
+     * id attribute to connect label and field of form field
+     * note:- this is optional as FormFieldContext will generate an id
+     */
+    id?: string;
+};
+/**
+ * Props for the UseField hook.
+ */
+export type UseFieldProps<T extends FieldValue = FieldValue> = {
+    /**
+     * The value of the field
+     */
+    value?: T;
+    /**
+     * Indicates if the field is invalid
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Callback when the field value changes
+     */
+    onValueChanged?: (value: T) => void;
+    /**
+     * Indicates if the field is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Indicates if the field is required
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Default value for the field
+     */
+    defaultValue?: T;
+};

package/dist/cjs/components/molecules/FormField/FormFieldContext.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { FormFieldContextValues, FormFieldProviderProps } from './FormField.types';
+declare const FormFieldContext: React.Context<FormFieldContextValues | undefined>;
+export declare const FormFieldProvider: (props: FormFieldProviderProps) => React.JSX.Element;
+export default FormFieldContext;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { FormFieldProps, FormFieldProviderProps } from './FormField.types';
+import useField from './useField';
+export { useField };
+declare const FormField: (props: FormFieldProviderProps & FormFieldProps) => React.JSX.Element;
+export default FormField;
+export type { FormFieldProps };

package/dist/cjs/components/molecules/FormField/useField.d.ts

@@ -0,0 +1,11 @@
+import { FieldValue } from '../../organisms/Form/Form.types';
+import type { UseFieldProps } from './FormField.types';
+declare const useField: <T extends FieldValue = FieldValue>(props: UseFieldProps<T>) => {
+    fieldValue: T;
+    updateFieldValue: (newValue: T) => void;
+    disabledField: boolean | undefined;
+    requiredField: boolean | undefined;
+    invalidField: boolean | undefined;
+    formFieldId: string | undefined;
+};
+export default useField;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ModalProps } from './Modal.types';
+/**
+ * Modal component for displaying a dialog window.
+ */
+declare const Modal: (props: ModalProps) => React.JSX.Element;
+export default Modal;

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

@@ -0,0 +1,54 @@
+import type { ReactNode } from 'react';
+/**
+ * Enum defining the possible sizes for the Modal component.
+ */
+export type ModalSizeEnum = 'Small' | 'Medium' | 'Large';
+/**
+ * Props for the Modal component.
+ */
+export type ModalProps = {
+    /**
+     * The content that will be rendered inside the modal.
+     */
+    children: ReactNode;
+    /**
+     * Optional size of the modal. Defaults to 'Medium'.
+     *  @default "Medium"
+     */
+    size?: ModalSizeEnum;
+    /**
+     * Callback function invoked when the modal is hidden.
+     */
+    onHide?: () => void;
+    /**
+     * Controls whether the modal is visible (`true`) or hidden (`false`).
+     *  @default false
+     */
+    show?: boolean;
+    /**
+     * The content to be rendered in the header of the modal.
+     */
+    header?: ReactNode;
+    /**
+     * The content to be rendered in the footer of the modal.
+     */
+    footer?: ReactNode;
+    /**
+     * Custom JSX element to render as the backdrop for the modal.
+     */
+    renderBackdrop?: ReactNode;
+    /**
+     * Determines whether a backdrop should be displayed behind the modal.
+     *  @default true
+     */
+    backdrop?: boolean;
+    /**
+     * Disables the ability to dismiss the modal by clicking on the backdrop.
+     *  @default false
+     */
+    disableBackdropDismiss?: boolean;
+    /**
+     * Additional CSS class names to apply to the modal.
+     */
+    className?: string;
+};

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from "react";
+export type NavProps = HTMLAttributes<HTMLElement> & {};

package/dist/cjs/components/molecules/Nav/NavItem/NavItem.d.ts

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

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

@@ -0,0 +1,2 @@
+import { LiHTMLAttributes } from "react";
+export type NavItemProps = LiHTMLAttributes<HTMLElement> & {};

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

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

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

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

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

@@ -0,0 +1,16 @@
+import { LinkProps as RouteLinkProps } from 'react-router-dom';
+export type NavLinkProps = Omit<RouteLinkProps, 'to'> & {
+    /**
+     * 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;
+};

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

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

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

@@ -0,0 +1,8 @@
+import Nav from './Nav';
+import type { NavProps } from './Nav.types';
+export { default as NavItem } from './NavItem';
+export * from './NavItem';
+export { default as NavLink } from './NavLink';
+export * from './NavLink';
+export type { NavProps };
+export default Nav;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { PopoverHandle, PopoverProps } from './Popover.types';
+/**
+ * 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.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<PopoverHandle>>;
+export default Popover;

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

@@ -0,0 +1,107 @@
+import React from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import type { Offset } from 'react-overlays/usePopper';
+/**
+ * Enum for the action type of the Popover.
+ */
+export type ActionType = 'Click' | 'Hover' | 'DoubleClick';
+/**
+ * Enum for the overlay direction of the Popover.
+ */
+export type OverlayDirectionEnum = 'Up' | 'Down' | 'Right' | 'Left';
+/**
+ * Enum for the overlay alignment of the Popover.
+ */
+export type OverlayAlignEnum = 'Start' | 'End' | 'Center';
+/**
+ * Props for the content of the Popover.
+ */
+export type ContentProps = {
+    width?: CSSProperties['width'] | 'match-trigger';
+    minWidth?: CSSProperties['minWidth'] | 'match-trigger';
+};
+/**
+ * Props for the Popover component.
+ */
+export type PopoverProps = {
+    /**
+     * Ref or Element for the Popover component to render in.
+     */
+    container?: HTMLElement | React.RefObject<HTMLElement> | null;
+    /**
+     * The content to display in the Popover.
+     */
+    content: ReactNode;
+    /**
+     * The target element for the Popover.
+     */
+    target: ReactNode;
+    /**
+     * Offset for positioning the Popover.
+     */
+    offset?: Offset;
+    /**
+     * Function to handle hiding the Popover.
+     */
+    onHide?: () => void;
+    /**
+     * Function to handle hiding the Popover.
+     */
+    onOpen?: () => void;
+    /**
+     * Direction in which the Popover should open.
+     * @default 'Down'
+     */
+    direction?: OverlayDirectionEnum;
+    /**
+     * Indicates if Popover should hide on click away.
+     * @default true
+     */
+    hideOnClickAway?: boolean;
+    /**
+     * Indicates if content should stay on item click.
+     * @default false
+     */
+    keepContentOnItemClick?: boolean;
+    /**
+     * Indicates if the Popover is shown.
+     * @default false
+     */
+    show?: boolean;
+    /**
+     * Action type to trigger the Popover.
+     * @default 'Click'
+     */
+    action?: ActionType;
+    /**
+     * Alignment of the Popover.
+     * @default 'Center'
+     */
+    alignment?: OverlayAlignEnum;
+    /**
+     * Props for the content of the Popover.
+     */
+    contentProps?: ContentProps;
+    /**
+     * Indicates if the Popover is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Indicates if content should change placement to stay on the screen.
+     * @default false
+     */
+    flip?: boolean;
+    /**
+     * Additional class for styling.
+     */
+    className?: string;
+    /**
+     * Additional class for overlay container styling.
+     */
+    overlayClassName?: string;
+};
+export type PopoverHandle = {
+    close: () => void;
+    open: () => void;
+};