@delightui/components 0.1.39 → 0.1.40

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

@@ -1,4 +1,5 @@
 import type { Dispatch, HTMLAttributes, SetStateAction } from 'react';
+import { IconButtonProps } from '../../atoms';
 /**
  * Enum for the alignment of the list.
  *
@@ -49,6 +50,35 @@ export type SortableListProps<T extends {
 }> = ListProps<T> & {
     data: T[];
 };
+/**
+ * Context type for the sortable item.
+ *
+ * @property {string | number} id - The unique identifier of the sortable item.
+ * @property {Object} transform - The transform properties of the sortable item.
+ * @property {string | undefined} transition - The transition of the sortable item.
+ * @property {Object} attributes - The attributes of the sortable item.
+ * @property {Record<string, Function> | undefined} listeners - The listeners of the sortable item.
+ */
+export type SortableItemContextType = {
+    id: string | number;
+    transform: {
+        x: number;
+        y: number;
+        scaleX: number;
+        scaleY: number;
+    } | null;
+    transition: string | undefined;
+    attributes: {
+        role: string;
+        tabIndex: number;
+        'aria-disabled': boolean;
+        'aria-pressed': boolean | undefined;
+        'aria-roledescription': string;
+        'aria-describedby': string;
+    };
+    listeners: Record<string, Function> | undefined;
+};
+export type SortableTriggerProps = IconButtonProps;
 /**
  * Props for the list wrapper component.
  *

package/dist/esm/components/molecules/List/components/SortableListItem.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ListItemProps, ListItemType } from "../List.types";
+import { ListItemProps, ListItemType, SortableItemContextType } from "../List.types";
 /**
  * A sortable item component that integrates with the dnd-kit library for drag-and-drop functionality.
  *
@@ -8,3 +8,4 @@ import { ListItemProps, ListItemType } from "../List.types";
  * @returns {JSX.Element} The rendered sortable item.
  */
 export declare const SortableItem: <T extends ListItemType>(props: ListItemProps<T>) => React.JSX.Element;
+export declare const useSortableItem: () => SortableItemContextType;

package/dist/esm/components/molecules/List/components/SortableTrigger.d.ts

@@ -0,0 +1,3 @@
+import type { SortableTriggerProps } from "../List.types";
+declare const SortableTrigger: (props: SortableTriggerProps) => import("react").JSX.Element;
+export default SortableTrigger;

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

@@ -1,6 +1,7 @@
 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' | 'leadingIcon' | 'trailingIcon'> & {
+import { ButtonProps, ButtonTypeEnum } from '../../../atoms/Button/Button.types';
+export type NavLinkTypeEnum = 'Fill' | 'Underline';
+export type NavLinkProps = Omit<RouteLinkProps, 'to'> & Pick<ButtonProps, 'appearance' | 'size' | 'style' | '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.
@@ -14,6 +15,11 @@ export type NavLinkProps = Omit<RouteLinkProps, 'to'> & Pick<ButtonProps, 'appea
      * <NavLink to="https://www.example.com">External</NavLink>
      */
     to: string | -1;
+    /**
+     * The type of nav link to render.
+     * @default 'Fill'
+     */
+    type?: NavLinkTypeEnum | ButtonTypeEnum;
     /**
      * provide a way to override the styling
      */

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

@@ -0,0 +1,3 @@
+import { PaginationProps } from './Pagination.types';
+declare const Pagination: (props: PaginationProps) => import("react").JSX.Element;
+export default Pagination;

package/dist/esm/components/molecules/Pagination/Pagination.presenter.d.ts

@@ -0,0 +1,11 @@
+import { PaginationProps } from "./Pagination.types";
+declare const usePresenter: (props: PaginationProps) => {
+    currentPage: number;
+    updateCurrentPage: (page: number) => void;
+    nextPage: () => void;
+    previousPage: () => void;
+    totalPages: number;
+    nextPageEnabled: boolean;
+    previousPageEnabled: boolean;
+};
+export default usePresenter;

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

@@ -0,0 +1,9 @@
+type PaginationProps = {
+    className?: string;
+    currentPage?: number;
+    totalPages?: number;
+    updateCurrentPage?: (page: number) => void;
+    previousPageIcon?: React.ReactNode;
+    nextPageIcon?: React.ReactNode;
+};
+export type { PaginationProps };

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

@@ -0,0 +1,2 @@
+export * from './Pagination.types';
+export { default } from './Pagination';

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

@@ -0,0 +1,3 @@
+import { PaginationNumberFieldProps } from './PaginationNumberField.types';
+declare const PaginationNumberField: (props: PaginationNumberFieldProps) => import("react").JSX.Element;
+export default PaginationNumberField;

package/dist/esm/components/molecules/PaginationNumberField/PaginationNumberField.presenter.d.ts

@@ -0,0 +1,10 @@
+import { ChangeEventHandler, KeyboardEventHandler } from "react";
+import { PaginationNumberFieldProps } from "./PaginationNumberField.types";
+declare const usePresenter: (props: PaginationNumberFieldProps) => {
+    inputRef: import("react").RefObject<HTMLInputElement>;
+    page: string;
+    onPageChanged: ChangeEventHandler<HTMLInputElement>;
+    onBlur: () => void;
+    keyListener: KeyboardEventHandler<HTMLInputElement>;
+};
+export default usePresenter;

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

@@ -0,0 +1,7 @@
+type PaginationNumberFieldProps = {
+    className?: string;
+    page?: number;
+    totalPages?: number;
+    onPageChanged?: (page: number) => void;
+};
+export type { PaginationNumberFieldProps };

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

@@ -0,0 +1,2 @@
+export * from './PaginationNumberField.types';
+export { default } from './PaginationNumberField';

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

@@ -0,0 +1,21 @@
+import React from 'react';
+interface RadioGroupContextType {
+    selectedValue?: string | number;
+    updateSelectedValue: (value: string | number) => void;
+    name?: string;
+    disabledField?: boolean;
+    invalidField?: boolean;
+    requiredField?: boolean;
+}
+interface RadioGroupProviderProps {
+    children: React.ReactNode;
+    value?: string | number;
+    name?: string;
+    onValueChanged?: (value: string | number) => void;
+    disabled?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+}
+export declare const useRadioGroupContext: () => RadioGroupContextType;
+export declare const RadioGroupProvider: ({ children, value, name, onValueChanged, disabled, invalid, required, }: RadioGroupProviderProps) => React.JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,36 @@
+import { HTMLAttributes } from 'react';
+export type RadioGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+    /**
+     * The name attribute for the radio button group
+     */
+    name: string;
+    /**
+     * The currently selected value
+     */
+    value?: string | number;
+    /**
+     * Callback function when selection changes
+     */
+    onValueChanged?: (value: string | number) => void;
+    /**
+     * The radio buttons to render
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the radio group is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the radio group is invalid
+     */
+    invalid?: boolean;
+    /**
+     * Whether a selection is required
+     */
+    required?: boolean;
+    /**
+     * The orientation of the radio group
+     * @default 'vertical'
+     */
+    orientation?: 'horizontal' | 'vertical';
+};

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

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

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

@@ -1,49 +1,40 @@
-export { default as ButtonGroup } from './ButtonGroup';
+export { default as Accordion } from './Accordion';
+export { default as ActionCard } from './ActionCard';
 export { default as Breadcrumbs, Breadcrumb } from './Breadcrumbs';
+export { default as ButtonGroup } from './ButtonGroup';
+export { default as Card } from './Card';
 export { default as ContextMenu } from './ContextMenu';
 export { default as DatePicker } from './DatePicker';
 export { default as FormField } from './FormField';
+export { default as Grid } from './Grid';
+export { default as GridList } from './GridList';
+export { default as List } from './List';
 export { default as Modal } from './Modal';
+export { default as ModalFooter } from './Modal/ModalFooter';
+export { default as ModalHeader } from './Modal/ModalHeader';
 export { default as Nav, NavItem, NavLink } from './Nav';
-export { default as ProgressBar } from './ProgressBar';
+export { default as Pagination } from './Pagination';
+export { default as PaginationNumberField } from './PaginationNumberField';
 export { default as Popover } from './Popover';
+export { default as ProgressBar } from './ProgressBar';
 export { Option, default as Select } from './Select';
-export { default as TabContent } from './TabContent';
-export { default as TabItem } from './TabItem';
-export { default as TableBody } from './TableBody';
-export { default as TableCell } from './TableCell';
-export { default as TableHeader } from './TableHeader';
-export { default as TableRow } from './TableRow';
-export { default as Tabs } from './Tabs';
-export { default as List } from './List';
-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 './Accordion';
 export * from './ActionCard';
-export * from './Card';
+export * from './Breadcrumbs';
 export * from './ButtonGroup';
+export * from './Card';
 export * from './ContextMenu';
 export * from './DatePicker';
 export * from './FormField';
+export * from './Grid';
+export * from './GridList';
+export * from './List';
 export * from './Modal';
+export * from './Modal/ModalFooter';
+export * from './Modal/ModalHeader';
 export * from './Nav';
-export * from './ProgressBar';
+export * from './Pagination';
+export * from './PaginationNumberField';
 export * from './Popover';
+export * from './ProgressBar';
 export * from './Select';
-export * from './TabContent';
-export * from './TabItem';
-export * from './TableBody';
-export * from './TableCell';
-export * from './TableHeader';
-export * from './TableRow';
-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/Dropzone/Dropzone.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { DropzoneContextType, DropzoneProps } from './Dropzone.types';
+declare const Dropzone: (props: DropzoneProps) => React.JSX.Element;
+export declare const useDropzoneContext: () => DropzoneContextType;
+export default Dropzone;

package/dist/esm/components/organisms/Dropzone/Dropzone.types.d.ts

@@ -0,0 +1,102 @@
+import { ReactNode } from 'react';
+import { ButtonProps, IconButtonProps, TextProps } from '../../atoms';
+/**
+ * Dropzone component props
+ * @param initial React.ReactNode - The initial state of the dropzone.
+ * @param uploading React.ReactNode - The uploading state of the dropzone.
+ * @param uploaded React.ReactNode - The uploaded state of the dropzone.
+ * @param accept { [key: string]: readonly string[] } - The accepted file types.
+ * @param maxSize number - The maximum size of the file in bytes.
+ * @param maxFiles number - The maximum number of files to upload.
+ * @param onFilesUpload (file: File) => void - callback when files are selected
+ * @param onFilesReset () => void - callback when files are reset
+ */
+export type DropzoneProps = {
+    /**
+     * The initial state of the dropzone.
+     */
+    initial?: React.ReactNode;
+    /**
+     * The uploading state of the dropzone.
+     */
+    uploading?: React.ReactNode;
+    /**
+     * The uploaded state of the dropzone.
+     */
+    uploaded?: React.ReactNode;
+    /**
+     * The accepted file types based on mime type.
+     * @example
+     * accept={{
+     *   'image/*': ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.tiff', '.ico', '.webp'],
+     * }}
+     */
+    accept?: {
+        [key: string]: readonly string[];
+    };
+    /**
+     * The maximum size of the file in bytes.
+     */
+    maxSize?: number;
+    /**
+     * The maximum number of files to upload.
+     * @default 1
+     */
+    maxFiles?: number;
+    disabled?: boolean;
+    required?: boolean;
+    /**
+     * callback when files are selected
+     */
+    onFilesSelected?: (files: File[]) => Promise<void> | void;
+    /**
+     * callback when files are reset
+     */
+    onFilesReset?: () => void;
+};
+/**
+ * Dropzone context type
+ * @param status 'initial' | 'uploading' | 'uploaded' - The status of the dropzone.
+ * @param file File | null - The file of the dropzone.
+ * @param selectFile () => void - The function to call when the file is selected.
+ * @param resetUpload () => void - The function to call when the file is reset.
+ */
+export type DropzoneContextType = {
+    /**
+     * The status of the dropzone.
+     */
+    status: 'initial' | 'uploading' | 'uploaded';
+    /**
+     * The files of the dropzone.
+     */
+    files: File[];
+    /**
+     * The accepted file types based on mime type.
+     * @example
+     * accept={{
+     *   'image/*': ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.tiff', '.ico', '.webp'],
+     * }}
+     */
+    accept: {
+        [key: string]: readonly string[];
+    };
+    /**
+     * The function to call to open the file dialog.
+     */
+    selectFiles: () => void;
+    /**
+     * The function to call to reset the files.
+     */
+    resetFiles: () => void;
+    children?: ReactNode;
+};
+export type DropzoneTriggerProps = ButtonProps;
+export type DropzoneSupportedFormatsProps = TextProps;
+export type DropzoneClearProps = IconButtonProps;
+export type DropzoneFilenameProps = TextProps & {
+    /**
+     * The index of the file in the files array.
+     * @default 0
+     */
+    fileIndex?: number;
+};

package/dist/esm/components/organisms/Dropzone/components/DropzoneClear.d.ts

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

package/dist/esm/components/organisms/Dropzone/components/DropzoneFilename.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { DropzoneFilenameProps } from "../Dropzone.types";
+declare const DropzoneFilename: ({ children, fileIndex, ...props }: DropzoneFilenameProps) => React.JSX.Element;
+export default DropzoneFilename;

package/dist/esm/components/organisms/Dropzone/components/DropzoneSupportedFormats.d.ts

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

package/dist/esm/components/organisms/Dropzone/components/DrozoneTrigger.d.ts

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

package/dist/esm/components/organisms/Dropzone/index.d.ts

@@ -0,0 +1,6 @@
+import Dropzone from "./Dropzone";
+import { useDropzoneContext } from "./Dropzone";
+import type { DropzoneProps } from './Dropzone.types';
+export { useDropzoneContext };
+export type { DropzoneProps };
+export default Dropzone;

package/dist/esm/components/organisms/DropzoneContent/DropzoneContent.d.ts

@@ -0,0 +1,3 @@
+import { DropzoneContentProps } from './DropzoneContent.types';
+declare const DropzoneContent: (props: DropzoneContentProps) => import("react").JSX.Element;
+export default DropzoneContent;

package/dist/esm/components/organisms/DropzoneContent/DropzoneContent.types.d.ts

@@ -0,0 +1,6 @@
+type DropzoneContentTypeEnum = 'Empty' | 'Uploaded' | 'Loading';
+type DropzoneContentProps = {
+    className?: string;
+    type: DropzoneContentTypeEnum;
+};
+export type { DropzoneContentProps, DropzoneContentTypeEnum };

package/dist/esm/components/organisms/DropzoneContent/index.d.ts

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

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

@@ -3,7 +3,7 @@ import type { FormHTMLAttributes, Ref } from 'react';
 /**
  * Type representing the allowed values for form fields
  */
-export type FieldValue = string | number | Date | boolean | Array<string | number | Date>;
+export type FieldValue = string | number | Date | boolean | File | Array<string | number | Date | File>;
 /**
  * Type representing the form values as a partial record of field names to field values
  * @example

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

@@ -1,16 +1,24 @@
 import React from 'react';
 export type ProfileFormValues = {
     participants?: number;
+    age: number[];
+    photo: File[];
     name: string;
     email: string;
     address: string;
     someField: string;
     check?: string;
     date?: string | Date;
-    checked?: boolean;
     password?: string;
     notifications?: boolean;
     toggleButtonState?: boolean;
+    gender?: string;
+    experience?: string;
+    termsAccepted: boolean;
+    privacyAccepted: boolean;
+    notificationPreferences: string[];
+    interests: string[];
+    chipInputValue: string[];
 };
 declare const ProfileForm: () => React.JSX.Element;
 export default ProfileForm;

package/dist/esm/components/organisms/Table/Table.types.d.ts

@@ -1,2 +1,7 @@
 import { TableHTMLAttributes } from 'react';
-export type TableProps = TableHTMLAttributes<HTMLTableElement>;
+export type TableProps = TableHTMLAttributes<HTMLTableElement> & {
+    /**
+     * Whether the table header should stick to the top when scrolling
+     */
+    stickyHeader?: boolean;
+};

package/dist/esm/components/{molecules → organisms/Tabs}/TabItem/TabItem.types.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from '../../atoms/Button';
+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'> & {

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

@@ -1,4 +1,26 @@
+export { default as Dropzone } from './Dropzone';
+export { default as DropzoneClear } from './Dropzone/components/DropzoneClear';
+export { default as DropzonePreview } from './Dropzone/components/DropzoneFilename';
+export { default as DropzoneReject } from './Dropzone/components/DropzoneSupportedFormats';
+export { default as DropzoneRoot } from './Dropzone/components/DrozoneTrigger';
+export { default as DropzoneContent } from './DropzoneContent';
 export { default as Form } from './Form';
-export * from './Form';
 export { default as Table } from './Table';
+export { default as TableRow } from './Table/TableRow';
+export { default as TableCell } from './Table/TableCell';
+export { default as TableHeader } from './Table/TableHeader';
+export { default as TableBody } from './Table/TableBody';
+export { default as Tabs } from './Tabs';
+export { default as TabItem } from './Tabs/TabItem';
+export { default as TabContent } from './Tabs/TabContent';
+export * from './Dropzone';
+export * from './DropzoneContent';
+export * from './Form';
 export * from './Table';
+export * from './Table/TableRow';
+export * from './Table/TableCell';
+export * from './Table/TableHeader';
+export * from './Table/TableBody';
+export * from './Tabs';
+export * from './Tabs/TabItem';
+export * from './Tabs/TabContent';