@delightui/components 0.1.36 → 0.1.38

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 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 { LinkProps } from 'react-router-dom';
 import { Offset } from 'react-overlays/usePopper';
 import { Plugin } from 'flatpickr/dist/types/options';
 import FlatPickr from 'react-flatpickr';
-import { LinkProps } from 'react-router-dom';
 
 /**
  * Enum for different image fit options.
@@ -384,6 +384,168 @@ type ListItemProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {
 
 declare const ListItem: (props: ListItemProps) => React__default.JSX.Element;
 
+declare const Toggle: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type"> & {
+    children?: React__default.ReactNode;
+    checked?: boolean;
+    onValueChanged?: (value: boolean) => void;
+    defaultChecked?: boolean;
+    invalid?: boolean;
+    labelOnRight?: boolean;
+} & React__default.RefAttributes<HTMLInputElement>>;
+
+declare const ToggleButton: React__default.ForwardRefExoticComponent<Omit<ButtonProps, "type" | "actionType"> & {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onValueChanged?: (value: boolean) => void;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    children?: React__default.ReactNode;
+    className?: string;
+} & React__default.RefAttributes<HTMLInputElement>>;
+
+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;
+};
+
+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;
+}
+
+declare const CustomToggle: React__default.ForwardRefExoticComponent<CustomToggleProps & React__default.RefAttributes<HTMLInputElement>>;
+
+type ChipVariantEnum = 'Filled' | 'Outlined';
+type ChipStyleEnum = 'A' | 'B' | 'C' | 'D' | 'E' | 'F';
+type ChipSizeEnum = 'Small' | 'Medium' | 'Large';
+type ChipCornerEnum = 'Rounded' | 'Square';
+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;
+};
+
+/**
+ * Chip component definition.
+ */
+declare const Chip: (props: ChipProps) => React__default.JSX.Element;
+
 /**
  * Enum for the alignment of the button-group.
  */
@@ -418,6 +580,60 @@ type ButtonGroupProps = {
  */
 declare const ButtonGroup: (props: ButtonGroupProps) => React__default.JSX.Element;
 
+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;
+}
+
+declare const Breadcrumbs: (props: BreadcrumbsProps) => React__default.JSX.Element;
+
+type NavLinkProps = Omit<LinkProps, '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.
+     * 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;
+    /**
+     * provide a way to override the styling
+     */
+    'component-variant'?: string;
+};
+
+declare const NavLink: (props: NavLinkProps) => React__default.JSX.Element;
+
+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;
+}
+
+declare const Breadcrumb: (props: BreadcrumbProps) => React__default.JSX.Element;
+
 /**
  * Enum for the action type of the Popover.
  */
@@ -1031,27 +1247,44 @@ type NavItemProps = LiHTMLAttributes<HTMLElement> & {};
 
 declare const NavItem: (props: NavItemProps) => React__default.JSX.Element;
 
-type NavLinkProps = Omit<LinkProps, 'to'> & Pick<ButtonProps, 'appearance' | 'size' | 'style' | 'type'> & {
+type ProgressBarOrientation = "Horizontal" | "Vertical";
+type ProgressBarLabelType = "Percentage" | "Text";
+type ProgressBarProps = {
     /**
-     * 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>
+     * Current progress value
+     * @default 0
      */
-    to: string | -1;
+    value: number;
     /**
-     * provide a way to override the styling
+     * Minimum value of the progress bar
+     * @default 0
      */
-    'component-variant'?: string;
+    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;
 };
 
-declare const NavLink: (props: NavLinkProps) => React__default.JSX.Element;
+declare const ProgressBar: React__default.FC<ProgressBarProps>;
 
 /**
  * Popover component that displays a floating content element in relation to a target element.
@@ -1280,7 +1513,7 @@ interface TabContentProps {
     className?: string;
 }
 
-declare const TabContent: (props: TabContentProps) => React__default.JSX.Element | null;
+declare const TabContent: (props: TabContentProps) => React__default.JSX.Element;
 
 type TabItemStyleEnum = 'Filled' | 'Underlined';
 type TabItemProps = Omit<ButtonProps, 'actionType' | 'appearance' | 'size' | 'style' | 'type'> & {
@@ -1541,6 +1774,122 @@ declare const Grid: (props: GridProps) => React__default.JSX.Element;
 
 declare const GridItem: (props: GridItemProps) => React$1.JSX.Element;
 
+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;
+};
+type AccordionDetailsProps = {
+    /**
+     * The content to be displayed in the accordion details section.
+     */
+    children: ReactNode;
+    /**
+     * Optional CSS class name for custom styling.
+     */
+    className?: string;
+};
+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;
+};
+
+declare const AccordionSummary: (props: AccordionSummaryProps) => React__default.JSX.Element;
+declare const AccordionDetails: (props: AccordionDetailsProps) => React__default.JSX.Element;
+declare const Accordion: (props: AccordionProps) => React__default.JSX.Element;
+
+type AccordionGroupProps = {
+    children: ReactNode;
+    className?: string;
+    /**
+     * Unique identifier for the accordion group.
+     * This will be passed to the accordions as a prop.
+     */
+    name?: string;
+};
+
+declare const AccordionGroup: (props: AccordionGroupProps) => React__default.JSX.Element;
+
+/**
+ * Defines the type of modal footer layout.
+ * @default "1 button"
+ */
+type ModalFooterTypeEnum = "1 button" | "2 buttons";
+/**
+ * Props for the ModalFooter component.
+ */
+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;
+};
+
+/**
+ * Modal Footer component for displaying footer actions in a modal.
+ */
+declare const ModalFooter: React__default.FC<ModalFooterProps>;
+
+/**
+ * Props for the ModalHeader component.
+ */
+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;
+};
+
+/**
+ * Modal Header component definition.
+ */
+declare const ModalHeader: (props: ModalHeaderProps) => React__default.JSX.Element;
+
 declare const Form: <T extends FormState>(props: FormProviderProps<T> & FormProps) => React__default.JSX.Element;
 
 type TableProps = TableHTMLAttributes<HTMLTableElement>;
@@ -1559,4 +1908,4 @@ type 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, 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 };
+export { Accordion, AccordionDetails, AccordionGroup, AccordionSummary, ActionCard, type ActionCardProps, ActionImage, type ActionImageProps, Breadcrumb, Breadcrumbs, Breakpoint, type BreakpointProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, Chip, type ChipProps, ContextMenu, type ContextMenuProps, type CustomTimePickerConfig, CustomToggle, type CustomToggleProps, 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, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, Nav, NavItem, type NavItemProps, NavLink, type NavLinkProps, type NavProps, Option, type OptionProps, type OverlayDirectionEnum, Password, Popover, type PopoverHandle, type PopoverProps, ProgressBar, type ProgressBarProps, 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, Toggle, ToggleButton, type ToggleButtonProps, useField, useSelectContext, useTab };

package/package.json

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