@delightui/components 0.1.37 → 0.1.38

package/dist/esm/components/atoms/Chip/Chip.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ChipProps } from './Chip.types';
+/**
+ * Chip component definition.
+ */
+declare const Chip: (props: ChipProps) => React.JSX.Element;
+export default Chip;

package/dist/esm/components/atoms/Chip/Chip.types.d.ts

@@ -0,0 +1,61 @@
+import type { HTMLAttributes, ReactNode, MouseEvent } from 'react';
+export type ChipVariantEnum = 'Filled' | 'Outlined';
+export type ChipStyleEnum = 'A' | 'B' | 'C' | 'D' | 'E' | 'F';
+export type ChipSizeEnum = 'Small' | 'Medium' | 'Large';
+export type ChipCornerEnum = 'Rounded' | 'Square';
+export type ChipProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {
+    /**
+     * Variant of the chip.
+     * @default 'Filled'
+     */
+    variant?: ChipVariantEnum;
+    /**
+     * Style of the chip.
+     * @default 'A'
+     */
+    style?: ChipStyleEnum;
+    /**
+     * Size of the chip.
+     * @default 'Medium'
+     */
+    size?: ChipSizeEnum;
+    /**
+     * Determines if the chip is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Icon displayed before the chip's content.
+     */
+    leadingIcon?: ReactNode;
+    /**
+     * Icon displayed after the chip's content.
+     */
+    trailingIcon?: ReactNode;
+    /**
+     * Click event handler for the chip.
+     */
+    onClick?: (event?: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Additional class for styling.
+     */
+    className?: string;
+    /**
+     * Defines the corner shape of the chip.
+     * @default 'Rounded'
+     */
+    corner?: ChipCornerEnum;
+    /**
+     * Determines if the chip is dismissible.
+     * @default false
+     */
+    isDismissible?: boolean;
+    /**
+     * Close button/icon for dismissible chips.
+     */
+    closeIcon?: ReactNode;
+    /**
+     * Event handler for the close action when chip is dismissible.
+     */
+    onClose?: (event?: MouseEvent<HTMLButtonElement>) => void;
+};

package/dist/esm/components/atoms/Chip/index.d.ts

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

package/dist/esm/components/atoms/CustomToggle/CustomToggle.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CustomToggleProps } from './CustomToggle.types';
+declare const CustomToggle: React.ForwardRefExoticComponent<CustomToggleProps & React.RefAttributes<HTMLInputElement>>;
+export default CustomToggle;

package/dist/esm/components/atoms/CustomToggle/CustomToggle.types.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+export interface CustomToggleProps {
+    /**
+     * Controlled state of the toggle
+     */
+    checked?: boolean;
+    /**
+     * Default value for uncontrolled component
+     */
+    defaultChecked?: boolean;
+    /**
+     * Callback function when toggle state changes
+     */
+    onValueChanged?: (value: boolean) => void;
+    /**
+     * Disable the toggle
+     */
+    disabled?: boolean;
+    /**
+     * Make the toggle required
+     */
+    required?: boolean;
+    /**
+     * Show invalid state
+     */
+    invalid?: boolean;
+    /**
+     * Content to show when toggle is off
+     */
+    offContent?: ReactNode;
+    /**
+     * Content to show when toggle is on
+     */
+    onContent?: ReactNode;
+    /**
+     * Additional className for the toggle
+     */
+    className?: string;
+}

package/dist/esm/components/atoms/CustomToggle/index.d.ts

@@ -0,0 +1,3 @@
+import CustomToggle from './CustomToggle';
+export default CustomToggle;
+export * from './CustomToggle.types';

package/dist/esm/components/atoms/Toggle/Toggle.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare const Toggle: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type"> & {
+    children?: React.ReactNode;
+    checked?: boolean;
+    onValueChanged?: (value: boolean) => void;
+    defaultChecked?: boolean;
+    invalid?: boolean;
+    labelOnRight?: boolean;
+} & React.RefAttributes<HTMLInputElement>>;
+export default Toggle;

package/dist/esm/components/atoms/Toggle/Toggle.types.d.ts

@@ -0,0 +1,31 @@
+import type { InputHTMLAttributes } from 'react';
+export type ToggleProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'checked'> & {
+    /**
+     * The label of the toggle.
+     */
+    children?: React.ReactNode;
+    /**
+     * The checked state of the toggle.
+     */
+    checked?: boolean;
+    /**
+     * Callback function when the toggle state changes.
+     * @param value - The new checked state of the toggle.
+     */
+    onValueChanged?: (value: boolean) => void;
+    /**
+     * Default checked state of the toggle.
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * Indicates if the toggle is invalid.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Flag to show the label on the right side of the toggle.
+     * @default false
+     */
+    labelOnRight?: boolean;
+};

package/dist/esm/components/atoms/Toggle/index.d.ts

@@ -0,0 +1,2 @@
+import Toggle from './Toggle';
+export default Toggle;

package/dist/esm/components/atoms/ToggleButton/ToggleButton.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+declare const ToggleButton: React.ForwardRefExoticComponent<Omit<import("../Button").ButtonProps, "type" | "actionType"> & {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onValueChanged?: (value: boolean) => void;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+} & React.RefAttributes<HTMLInputElement>>;
+export default ToggleButton;

package/dist/esm/components/atoms/ToggleButton/ToggleButton.types.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import { ButtonProps } from '../Button/Button.types';
+export type ToggleButtonProps = Omit<ButtonProps, 'type' | 'actionType'> & {
+    /**
+     * Controlled state of the toggle
+     */
+    checked?: boolean;
+    /**
+     * Default value for uncontrolled component
+     */
+    defaultChecked?: boolean;
+    /**
+     * Callback function when toggle state changes
+     */
+    onValueChanged?: (value: boolean) => void;
+    /**
+     * Disable the toggle
+     */
+    disabled?: boolean;
+    /**
+     * Make the toggle required
+     */
+    required?: boolean;
+    /**
+     * Show invalid state
+     */
+    invalid?: boolean;
+    /**
+     * Content of the button
+     */
+    children?: ReactNode;
+    /**
+     * Additional className for the toggle
+     */
+    className?: string;
+};

package/dist/esm/components/atoms/ToggleButton/index.d.ts

@@ -0,0 +1,3 @@
+import ToggleButton from './ToggleButton';
+export default ToggleButton;
+export * from './ToggleButton.types';

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

@@ -10,6 +10,10 @@ 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 { default as Toggle } from './Toggle';
+export { default as ToggleButton } from './ToggleButton';
+export { default as CustomToggle } from './CustomToggle';
+export { default as Chip } from './Chip';
 export * from './ActionImage';
 export * from './Button';
 export * from './Icon';
@@ -22,3 +26,7 @@ export * from './Text';
 export * from './TextArea';
 export * from './ResponsiveComponent';
 export * from './ListItem';
+export * from './Toggle';
+export * from './ToggleButton';
+export * from './CustomToggle';
+export * from './Chip';

package/dist/esm/components/molecules/Accordion/Accordion.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { AccordionDetailsProps, AccordionProps, AccordionSummaryProps } from './Accordion.types';
+declare const AccordionSummary: (props: AccordionSummaryProps) => React.JSX.Element;
+declare const AccordionDetails: (props: AccordionDetailsProps) => React.JSX.Element;
+declare const Accordion: (props: AccordionProps) => React.JSX.Element;
+export { Accordion, AccordionDetails, AccordionSummary };

package/dist/esm/components/molecules/Accordion/Accordion.types.d.ts

@@ -0,0 +1,44 @@
+import { ReactNode } from "react";
+export type AccordionSummaryProps = {
+    children: ReactNode;
+    className?: string;
+    /**
+     * Custom expand/collapse icon element to override the default icon.
+     * It will rotate 90 degrees clockwise when the accordion is expanded.
+     */
+    expandIcon?: ReactNode;
+};
+export type AccordionDetailsProps = {
+    /**
+     * The content to be displayed in the accordion details section.
+     */
+    children: ReactNode;
+    /**
+     * Optional CSS class name for custom styling.
+     */
+    className?: string;
+};
+export type AccordionProps = {
+    children: ReactNode;
+    className?: string;
+    /**
+     * Whether the accordion is expanded by default.
+     * @default false
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Controls the expanded state when using controlled mode.
+     * Use this prop along with onChange for controlled behavior.
+     */
+    expanded?: boolean;
+    /**
+     * Callback function when the accordion is expanded/collapsed.
+     * @param isOpen - The new expanded state of the accordion.
+     */
+    onChange?: (isOpen: boolean) => void;
+    /**
+     * Unique identifier for the accordion.
+     * This is used to identify the accordion in the group.
+     */
+    name?: string;
+};

package/dist/esm/components/molecules/Accordion/AccordionGroup/AccordionGroup.d.ts

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

package/dist/esm/components/molecules/Accordion/AccordionGroup/AccordionGroup.types.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export type AccordionGroupProps = {
+    children: ReactNode;
+    className?: string;
+    /**
+     * Unique identifier for the accordion group.
+     * This will be passed to the accordions as a prop.
+     */
+    name?: string;
+};

package/dist/esm/components/molecules/Accordion/AccordionGroup/index.d.ts

@@ -0,0 +1,2 @@
+import AccordionGroup from './AccordionGroup';
+export default AccordionGroup;

package/dist/esm/components/molecules/Accordion/index.d.ts

@@ -0,0 +1,4 @@
+import { Accordion, AccordionDetails, AccordionSummary } from './Accordion';
+import AccordionGroup from './AccordionGroup';
+export { Accordion, AccordionDetails, AccordionGroup, AccordionSummary };
+export default Accordion;

package/dist/esm/components/molecules/Breadcrumbs/Breadcrumb/Breadcrumb.d.ts

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

package/dist/esm/components/molecules/Breadcrumbs/Breadcrumb/Breadcrumb.types.d.ts

@@ -0,0 +1,13 @@
+import { NavLinkProps } from '../../Nav/NavLink';
+import { ButtonTypeEnum } from '../../../atoms/Button/Button.types';
+export interface BreadcrumbProps extends Omit<NavLinkProps, 'type'> {
+    /**
+     * Flag that defines the breadcrumb state.
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Defines the button type used for the breadcrumb link.
+     */
+    navLinkType?: ButtonTypeEnum;
+}

package/dist/esm/components/molecules/Breadcrumbs/Breadcrumb/index.d.ts

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

package/dist/esm/components/molecules/Breadcrumbs/Breadcrumbs.d.ts

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

package/dist/esm/components/molecules/Breadcrumbs/Breadcrumbs.types.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+export interface BreadcrumbsProps {
+    /**
+     * The divider element to separate breadcrumb items.
+     * Can be a string, icon, or custom React node.
+     */
+    divider?: ReactNode;
+    /**
+     * Additional classes for custom styling.
+     */
+    className?: string;
+    /**
+     * The breadcrumb items to be displayed.
+     */
+    children: ReactNode;
+}

package/dist/esm/components/molecules/Breadcrumbs/index.d.ts

@@ -0,0 +1,6 @@
+import Breadcrumbs from './Breadcrumbs';
+import type { BreadcrumbsProps } from './Breadcrumbs.types';
+export { default as Breadcrumb } from './Breadcrumb';
+export * from './Breadcrumb';
+export type { BreadcrumbsProps };
+export default Breadcrumbs;

package/dist/esm/components/molecules/ModalFooter/ModalFooter.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { ModalFooterProps } from "./ModalFooter.types";
+/**
+ * Modal Footer component for displaying footer actions in a modal.
+ */
+declare const ModalFooter: React.FC<ModalFooterProps>;
+export default ModalFooter;

package/dist/esm/components/molecules/ModalFooter/ModalFooter.types.d.ts

@@ -0,0 +1,28 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/**
+ * Defines the type of modal footer layout.
+ * @default "1 button"
+ */
+export type ModalFooterTypeEnum = "1 button" | "2 buttons";
+/**
+ * Props for the ModalFooter component.
+ */
+export type ModalFooterProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {
+    /**
+     * Determines whether the footer contains one or two buttons.
+     * @default "1 button"
+     */
+    type?: ModalFooterTypeEnum;
+    /**
+     * The primary button element.
+     */
+    primaryButton?: ReactNode;
+    /**
+     * The secondary button element (only applicable when type is "2 buttons").
+     */
+    secondaryButton?: ReactNode;
+    /**
+     * Additional class for styling.
+     */
+    className?: string;
+};

package/dist/esm/components/molecules/ModalFooter/index.d.ts

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

package/dist/esm/components/molecules/ModalHeader/ModalHeader.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ModalHeaderProps } from './ModalHeader.types';
+/**
+ * Modal Header component definition.
+ */
+declare const ModalHeader: (props: ModalHeaderProps) => React.JSX.Element;
+export default ModalHeader;

package/dist/esm/components/molecules/ModalHeader/ModalHeader.types.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+/**
+ * Props for the ModalHeader component.
+ */
+export type ModalHeaderProps = {
+    /**
+     * The title to be displayed in the header.
+     */
+    title?: string;
+    /**
+     * An optional icon button to display in the header.
+     */
+    iconButton?: ReactNode;
+    /**
+     * Additional CSS class names to apply to the modal header.
+     */
+    className?: string;
+};

package/dist/esm/components/molecules/ModalHeader/index.d.ts

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

package/dist/esm/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, 'appearance' | 'size' | 'style' | 'type'> & {
+export type NavLinkProps = Omit<RouteLinkProps, 'to'> & Pick<ButtonProps, 'appearance' | 'size' | 'style' | 'type' | 'leadingIcon' | 'trailingIcon'> & {
     /**
      * 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.

package/dist/esm/components/molecules/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ProgressBarProps } from "./ProgressBar.types";
+declare const ProgressBar: React.FC<ProgressBarProps>;
+export default ProgressBar;

package/dist/esm/components/molecules/ProgressBar/ProgressBar.types.d.ts

@@ -0,0 +1,36 @@
+export type ProgressBarOrientation = "Horizontal" | "Vertical";
+export type ProgressBarLabelType = "Percentage" | "Text";
+export type ProgressBarProps = {
+    /**
+     * Current progress value
+     * @default 0
+     */
+    value: number;
+    /**
+     * Minimum value of the progress bar
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximum value of the progress bar
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Defines the orientation of the progress bar
+     * @default "horizontal"
+     */
+    orientation?: ProgressBarOrientation;
+    /**
+     * Determines if and how the label is displayed
+     */
+    showLabel?: ProgressBarLabelType;
+    /**
+     * Custom label to be displayed when `showLabel` is set to "Text"
+     */
+    label?: React.ReactNode;
+    /**
+     * Additional class for styling
+     */
+    className?: string;
+};

package/dist/esm/components/molecules/ProgressBar/ProgressBar.utils.d.ts

@@ -0,0 +1 @@
+export declare const calculatePercentageValue: (value: number, min: number, max: number) => number;

package/dist/esm/components/molecules/ProgressBar/index.d.ts

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

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

@@ -1,9 +1,11 @@
 export { default as ButtonGroup } from './ButtonGroup';
+export { default as Breadcrumbs, Breadcrumb } from './Breadcrumbs';
 export { default as ContextMenu } from './ContextMenu';
 export { default as DatePicker } from './DatePicker';
 export { default as FormField } from './FormField';
 export { default as Modal } from './Modal';
 export { default as Nav, NavItem, NavLink } from './Nav';
+export { default as ProgressBar } from './ProgressBar';
 export { default as Popover } from './Popover';
 export { Option, default as Select } from './Select';
 export { default as TabContent } from './TabContent';
@@ -18,6 +20,9 @@ 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 { default as Accordion } from './Accordion';
+export { default as ModalFooter } from './ModalFooter';
+export { default as ModalHeader } from './ModalHeader';
 export * from './ActionCard';
 export * from './Card';
 export * from './ButtonGroup';
@@ -26,6 +31,7 @@ export * from './DatePicker';
 export * from './FormField';
 export * from './Modal';
 export * from './Nav';
+export * from './ProgressBar';
 export * from './Popover';
 export * from './Select';
 export * from './TabContent';
@@ -38,3 +44,6 @@ export * from './Tabs';
 export * from './List';
 export * from './GridList';
 export * from './Grid';
+export * from './Accordion';
+export * from './ModalFooter';
+export * from './ModalHeader';

package/dist/esm/components/organisms/Form/FormExample.d.ts

@@ -9,6 +9,8 @@ export type ProfileFormValues = {
     date?: string | Date;
     checked?: boolean;
     password?: string;
+    notifications?: boolean;
+    toggleButtonState?: boolean;
 };
 declare const ProfileForm: () => React.JSX.Element;
 export default ProfileForm;

package/dist/esm/components/utils.d.ts

@@ -9,6 +9,7 @@ import { TextTypeEnum, TextWeightEnum } from './atoms/Text';
  * @param children - The child nodes to be rendered.
  * @param defaultWeight - Default weight for <Text> component when wrapping strings or numbers.
  * @param defaultType - Default type for <Text> component when wrapping strings or numbers.
+ * @param appendProps - Additional props to be appended to the child nodes.
  * @returns The rendered React element.
  */
 export declare const renderChildren: (children: ReactNode, options?: {
@@ -17,7 +18,7 @@ export declare const renderChildren: (children: ReactNode, options?: {
     noWrap?: boolean;
     whiteSpaceNoWrap?: boolean;
     as?: "span";
-}) => ReactElement;
+}, appendProps?: Record<string, any>) => ReactElement;
 /**
  * Utility function to merge multiple refs into a single ref callback function.
  *