@delightui/components 0.1.39 → 0.1.40

package/dist/cjs/modules/index.d.ts

@@ -1 +1,2 @@
 export * from './theme';
+export * from './notification';

package/dist/cjs/modules/notification/NotificationContainer.d.ts

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

package/dist/cjs/modules/notification/NotificationContext.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { NotificationContextValue, NotificationProviderProps } from './types';
+export declare const NotificationContext: React.Context<NotificationContextValue>;
+export declare const NotificationProvider: React.FC<NotificationProviderProps>;
+export declare const useNotification: () => NotificationContextValue;

package/dist/cjs/modules/notification/index.d.ts

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

package/dist/cjs/modules/notification/types.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+import { ToastNotificationPositionEnum, ToastNotificationStyleEnum } from '../../components/atoms/ToastNotification/ToastNotification.types';
+/**
+ * Represents a single notification.
+ */
+export type Notification = {
+    id?: number;
+    message?: ReactNode;
+    duration?: number;
+};
+/**
+ * Payload for triggering a new notification.
+ */
+export type TriggerNotificationPayload = Notification & {
+    style?: ToastNotificationStyleEnum;
+    position?: ToastNotificationPositionEnum;
+};
+/**
+ * Props for the NotificationContainer component.
+ */
+export type NotificationContainerProps = {
+    className?: string;
+};
+/**
+ * Context value for notifications.
+ */
+export type NotificationContextValue = {
+    notifications: Notification[];
+    clear: VoidFunction;
+    removeNotification: (id: number) => void;
+    trigger: (payload: TriggerNotificationPayload) => void;
+};
+/**
+ * Props for the NotificationProvider component.
+ */
+export type NotificationProviderProps = {
+    children: ReactNode;
+};

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

@@ -1,4 +1,12 @@
 import React from 'react';
-import { CheckboxProps } from './types';
-declare const Checkbox: (props: CheckboxProps) => React.JSX.Element;
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type"> & {
+    children?: React.ReactNode;
+    size?: import("./Checkbox.types").CheckboxSizeEnum;
+    checked?: boolean;
+    onValueChanged?: (value: boolean) => void;
+    defaultChecked?: boolean;
+    invalid?: boolean;
+    value?: string | number;
+    labelAlignment?: import("./Checkbox.types").CheckboxLabelAlignmentEnum;
+} & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;

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

@@ -0,0 +1,41 @@
+import type { InputHTMLAttributes } from 'react';
+export type CheckboxSizeEnum = 'Small' | 'Medium' | 'Large';
+export type CheckboxLabelAlignmentEnum = 'Left' | 'Right';
+export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value'> & {
+    /**
+     * The label of the checkbox.
+     */
+    children?: React.ReactNode;
+    /**
+     * The size of the checkbox.
+     * @default 'Medium'
+     */
+    size?: CheckboxSizeEnum;
+    /**
+     * The checked state of the checkbox.
+     */
+    checked?: boolean;
+    /**
+     * Callback function when the checkbox state changes.
+     * @param value - The new checked state of the checkbox.
+     */
+    onValueChanged?: (value: boolean) => void;
+    /**
+     * Default checked state of the checkbox.
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * Indicates if the checkbox is invalid.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * The value of the checkbox.
+     */
+    value?: string | number;
+    /**
+     * The alignment of the label.
+     */
+    labelAlignment?: CheckboxLabelAlignmentEnum;
+};

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

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

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

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const CheckboxItem: React.ForwardRefExoticComponent<Omit<import("..").CheckboxProps, "onValueChanged"> & {
+    onChange?: (value: boolean) => void;
+    showRightButton?: boolean;
+    onRightButtonClick?: () => void;
+    rightButtonIcon?: React.ReactNode;
+} & React.RefAttributes<HTMLInputElement>>;
+export default CheckboxItem;

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

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import type { CheckboxProps as BaseCheckboxProps } from '../Checkbox/Checkbox.types';
+export type CheckboxItemProps = Omit<BaseCheckboxProps, 'onValueChanged'> & {
+    /**
+     * Callback function when the checkbox state changes.
+     * @param value: boolean - The new checked state of the checkbox.
+     */
+    onChange?: (value: boolean) => void;
+    /**
+     * Flag to show right button.
+     * @default false
+     */
+    showRightButton?: boolean;
+    /**
+     * Callback function when the right button is clicked.
+     */
+    onRightButtonClick?: () => void;
+    /**
+     * Custom icon for the right button.
+     */
+    rightButtonIcon?: ReactNode;
+};

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

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

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

@@ -1,14 +1,14 @@
 import type { HTMLAttributes, ReactNode, MouseEvent } from 'react';
-export type ChipVariantEnum = 'Filled' | 'Outlined';
+export type ChipTypeEnum = 'Bright' | 'BrightOutline' | 'Subdued' | 'SubduedOutline';
 export type ChipStyleEnum = 'A' | 'B' | 'C' | 'D' | 'E' | 'F';
 export type ChipSizeEnum = 'Small' | 'Medium' | 'Large';
-export type ChipCornerEnum = 'Rounded' | 'Square';
+export type ChipCornerEnum = 'Rounded' | 'Squared';
 export type ChipProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {
     /**
-     * Variant of the chip.
+     * Type of the chip.
      * @default 'Filled'
      */
-    variant?: ChipVariantEnum;
+    type?: ChipTypeEnum;
     /**
      * Style of the chip.
      * @default 'A'
@@ -57,5 +57,5 @@ export type ChipProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {
     /**
      * Event handler for the close action when chip is dismissible.
      */
-    onClose?: (event?: MouseEvent<HTMLButtonElement>) => void;
+    onClose?: (event?: MouseEvent<HTMLElement>) => void;
 };

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

@@ -16,6 +16,10 @@ export type ListItemProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {
      * Click event handler for the list item.
      */
     onClick?: (event?: MouseEvent<HTMLElement>) => void;
+    /**
+     * The label for the list item.
+     */
+    children?: ReactNode;
     /**
      * Additional class for styling.
      */

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

@@ -0,0 +1,11 @@
+import React from 'react';
+declare const RadioButton: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type"> & {
+    children?: React.ReactNode;
+    size?: import("./RadioButton.types").RadioButtonSizeEnum;
+    checked?: boolean;
+    onValueChanged?: (value: string | number) => void;
+    invalid?: boolean;
+    labelAlignment?: import("./RadioButton.types").RadioButtonLabelAlignmentEnum;
+    value?: string | number;
+} & React.RefAttributes<HTMLInputElement>>;
+export default RadioButton;

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

@@ -0,0 +1,37 @@
+import type { InputHTMLAttributes } from 'react';
+export type RadioButtonSizeEnum = 'Small' | 'Medium' | 'Large';
+export type RadioButtonLabelAlignmentEnum = 'Left' | 'Right';
+export type RadioButtonProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value'> & {
+    /**
+     * The label of the radio button.
+     */
+    children?: React.ReactNode;
+    /**
+     * The size of the radio button.
+     * @default 'Medium'
+     */
+    size?: RadioButtonSizeEnum;
+    /**
+     * The checked state of the radio button.
+     */
+    checked?: boolean;
+    /**
+     * Callback function when the radio button state changes.
+     * @param value - The new checked state of the radio button.
+     */
+    onValueChanged?: (value: string | number) => void;
+    /**
+     * Indicates if the radio button is invalid.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Flag to show the label on the right side of the radio button.
+     * @default false
+     */
+    labelAlignment?: RadioButtonLabelAlignmentEnum;
+    /**
+     * The value of the radio button.
+     */
+    value?: string | number;
+};

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

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

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

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const RadioButtonItem: React.ForwardRefExoticComponent<Omit<import("../RadioButton").RadioButtonProps, "onValueChanged"> & {
+    onChange?: (value: string | number) => void;
+    showRightButton?: boolean;
+    onRightButtonClick?: () => void;
+    rightButtonIcon?: React.ReactNode;
+} & React.RefAttributes<HTMLInputElement>>;
+export default RadioButtonItem;

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

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import type { RadioButtonProps as BaseRadioButtonProps } from '../RadioButton/RadioButton.types';
+export type RadioButtonItemProps = Omit<BaseRadioButtonProps, 'onValueChanged'> & {
+    /**
+     * Callback function when the radio button state changes.
+     * @param value: string | number - The value of the selected radio button.
+     */
+    onChange?: (value: string | number) => void;
+    /**
+     * Flag to show right button.
+     * @default false
+     */
+    showRightButton?: boolean;
+    /**
+     * Callback function when the right button is clicked.
+     */
+    onRightButtonClick?: () => void;
+    /**
+     * Custom icon for the right button.
+     */
+    rightButtonIcon?: ReactNode;
+};

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

@@ -0,0 +1,2 @@
+export { default } from './RadioButtonItem';
+export type { RadioButtonItemProps } from './RadioButtonItem.types';

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

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

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

@@ -0,0 +1,53 @@
+export type SliderProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * The minimum value of the slider.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * The maximum value of the slider.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * The step size for the slider.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * The current value of the slider.
+     * Can be a single number or an array with exactly two numbers for range selection.
+     */
+    value?: number | [number, number];
+    /**
+     * Callback function triggered when the slider value changes.
+     * @param value - The new value of the slider.
+     */
+    onValueChange?: (value: number | [number, number]) => void;
+    /**
+     * Whether to display the minimum value label.
+     * @default false
+     */
+    showMin?: boolean;
+    /**
+     * Whether to display the maximum value label.
+     * @default false
+     */
+    showMax?: boolean;
+    /**
+     * Whether to show the current value on the slider thumb.
+     * @default false
+     */
+    showValueOnThumb?: boolean;
+    /**
+     * Whether to enable range selection (two thumbs).
+     * @default false
+     */
+    enableRange?: boolean;
+    /**
+     * Flag to disabled slider.
+     * @default false
+     */
+    disabled?: boolean;
+    className?: string;
+};

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

@@ -0,0 +1,4 @@
+import Slider from "./Slider";
+import type { SliderProps } from "./Slider.types";
+export default Slider;
+export type { SliderProps };

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ToastNotificationProps } from './ToastNotification.types';
+declare const ToastNotification: React.FC<ToastNotificationProps>;
+export default ToastNotification;

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

@@ -0,0 +1,44 @@
+import type { HTMLAttributes, ReactNode, MouseEvent } from 'react';
+export type ToastNotificationStyleEnum = 'Neutral' | 'Error' | 'Success';
+export type ToastNotificationPositionEnum = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export type ToastNotificationProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {
+    /**
+     * Style of the toast notification.
+     * @default 'Neutral'
+     */
+    style?: ToastNotificationStyleEnum;
+    /**
+     * Position of the toast notification.
+     * @default 'top-right'
+     */
+    position?: ToastNotificationPositionEnum;
+    /**
+     * Determines if the toast notification is dismissible.
+     * @default true
+     */
+    isDismissable?: boolean;
+    /**
+     * Icon displayed before the message content.
+     */
+    leadingIcon?: ReactNode;
+    /**
+     * Icon displayed after the message content.
+     */
+    trailingIcon?: ReactNode;
+    /**
+     * Close button/icon for dismissible toast notifications.
+     */
+    closeIcon?: ReactNode;
+    /**
+     * Click event handler for the close action.
+     */
+    removeToast?: (event?: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Duration before the toast auto-closes (in milliseconds).
+     */
+    duration?: number;
+    /**
+     * Additional class for styling.
+     */
+    className?: string;
+};

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

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

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

@@ -5,6 +5,6 @@ declare const Toggle: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttrib
     onValueChanged?: (value: boolean) => void;
     defaultChecked?: boolean;
     invalid?: boolean;
-    labelOnRight?: boolean;
+    labelAlignment?: import("./Toggle.types").ToggleLabelAlignmentEnum;
 } & React.RefAttributes<HTMLInputElement>>;
 export default Toggle;

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

@@ -1,4 +1,5 @@
 import type { InputHTMLAttributes } from 'react';
+export type ToggleLabelAlignmentEnum = 'Left' | 'Right';
 export type ToggleProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'checked'> & {
     /**
      * The label of the toggle.
@@ -24,8 +25,8 @@ export type ToggleProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | '
      */
     invalid?: boolean;
     /**
-     * Flag to show the label on the right side of the toggle.
-     * @default false
+     * Alignment of the label.
+     * @default 'Left'
      */
-    labelOnRight?: boolean;
+    labelAlignment?: ToggleLabelAlignmentEnum;
 };

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

@@ -14,6 +14,9 @@ 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 { default as Checkbox } from './Checkbox';
+export { default as CheckboxItem } from './CheckboxItem';
+export { default as Slider } from './Slider';
 export * from './ActionImage';
 export * from './Button';
 export * from './Icon';
@@ -30,3 +33,6 @@ export * from './Toggle';
 export * from './ToggleButton';
 export * from './CustomToggle';
 export * from './Chip';
+export * from './Checkbox';
+export * from './CheckboxItem';
+export * from './Slider';

package/dist/esm/components/molecules/CheckboxGroup/CheckboxGroup.Context.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { CheckboxGroupContextProps, CheckboxGroupProviderProps } from './CheckboxGroup.types';
+export declare const useCheckboxGroupContext: () => CheckboxGroupContextProps;
+export declare const CheckboxGroupProvider: React.FC<CheckboxGroupProviderProps>;

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

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

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

@@ -0,0 +1,53 @@
+import { HTMLAttributes } from 'react';
+export type CheckboxGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+    /**
+     * The name attribute for the checkbox group
+     */
+    name: string;
+    /**
+     * The currently selected values
+     */
+    value?: (string | number)[];
+    /**
+     * Callback function when selection changes
+     */
+    onValueChanged?: (value: (string | number)[]) => void;
+    /**
+     * The checkboxes to render
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the checkbox group is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the checkbox group is invalid
+     */
+    invalid?: boolean;
+    /**
+     * Whether a selection is required
+     */
+    required?: boolean;
+    /**
+     * The orientation of the checkbox group
+     * @default 'vertical'
+     */
+    orientation?: 'horizontal' | 'vertical';
+};
+export interface CheckboxGroupContextProps {
+    selectedValues: (string | number)[];
+    name?: string;
+    updateSelectedValue: (value: string | number, checked: boolean) => void;
+    disabledField?: boolean;
+    invalidField?: boolean;
+    requiredField?: boolean;
+}
+export interface CheckboxGroupProviderProps {
+    children: React.ReactNode;
+    value: (string | number)[];
+    name?: string;
+    onValueChanged?: (value: (string | number)[]) => void;
+    disabled?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+}

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

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

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

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

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

@@ -0,0 +1,16 @@
+import type { ChipProps, InputProps } from "../../atoms";
+export type ChipListItemTypeEnum = 'chip' | 'input';
+export type ChipListItemProps = {
+    type: ChipListItemTypeEnum;
+    props: ChipProps | InputProps;
+};
+export type ChipInputProps = {
+    inputValue?: string;
+    onInputChange?: (value: string) => void;
+    options?: string[];
+    placeholder?: string;
+    className?: string;
+    onValueChanged?: (value: string[]) => void;
+    onAddNewOption?: (value: string) => void;
+    selectedValues?: string[];
+};

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

@@ -1,7 +1,5 @@
-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;
+import React from "react";
+import { ContextMenuProps } from "./ContextMenu.types";
+import { ListItemType } from "../List/List.types";
+declare const ContextMenu: <T extends ListItemType>(props: ContextMenuProps<T>) => React.JSX.Element;
 export default ContextMenu;

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

@@ -1,64 +1,3 @@
-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;
-};
+import { ListProps } from "../List";
+import { ListItemType } from "../List/List.types";
+export type ContextMenuProps<T extends ListItemType> = ListProps<T>;

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

@@ -1,6 +1,4 @@
-import ContextMenu from './ContextMenu';
-import type { ContextMenuProps } from './ContextMenu.types';
+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;