@delightui/components 0.1.121 → 0.1.123

package/dist/cjs/components/atoms/Input/Input.presenter.d.ts

@@ -5,9 +5,11 @@ declare const usePresenter: (props: InputProps, ref: React.ForwardedRef<HTMLInpu
     };
     onInputChanged: (event: React.ChangeEvent<HTMLInputElement>) => void;
     otherInputProps: {
+        checked?: boolean | undefined;
         className?: string | undefined;
         form?: string | undefined;
         list?: string | undefined;
+        children?: import("react").ReactNode | undefined;
         role?: import("react").AriaRole | undefined;
         src?: string | undefined;
         onLoad?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
@@ -114,7 +116,6 @@ declare const usePresenter: (props: InputProps, ref: React.ForwardedRef<HTMLInpu
         "aria-valuemin"?: number | undefined;
         "aria-valuenow"?: number | undefined;
         "aria-valuetext"?: string | undefined;
-        children?: import("react").ReactNode | undefined;
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;
         } | undefined;
@@ -277,7 +278,6 @@ declare const usePresenter: (props: InputProps, ref: React.ForwardedRef<HTMLInpu
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
         pattern?: string | undefined;
-        checked?: boolean | undefined;
         size?: number | undefined;
         step?: number | string | undefined;
         autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;

package/dist/cjs/components/atoms/Password/Password.presenter.d.ts

@@ -7,8 +7,14 @@ declare const usePresenter: (props: PasswordProps) => {
     };
     hideTrailingIcon: boolean | undefined;
     otherPasswordProps: {
+        disabled?: boolean | undefined;
+        required?: boolean | undefined;
+        checked?: boolean | undefined;
+        value?: string | undefined;
+        'component-variant'?: string;
         form?: string | undefined;
         list?: string | undefined;
+        children?: import("react").ReactNode | undefined;
         role?: import("react").AriaRole | undefined;
         src?: string | undefined;
         onLoad?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
@@ -115,7 +121,6 @@ declare const usePresenter: (props: PasswordProps) => {
         "aria-valuemin"?: number | undefined;
         "aria-valuenow"?: number | undefined;
         "aria-valuetext"?: string | undefined;
-        children?: import("react").ReactNode | undefined;
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;
         } | undefined;
@@ -277,11 +282,7 @@ declare const usePresenter: (props: PasswordProps) => {
         onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLInputElement> | undefined;
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
-        disabled?: boolean | undefined;
         pattern?: string | undefined;
-        required?: boolean | undefined;
-        checked?: boolean | undefined;
-        value?: string | undefined;
         invalid?: boolean;
         size?: number | undefined;
         leadingIcon?: React.ReactNode;
@@ -305,7 +306,6 @@ declare const usePresenter: (props: PasswordProps) => {
         readOnly?: boolean | undefined;
         onValueChange?: ((value: string) => void) | undefined;
         preProcessInput?: (text: string) => string;
-        'component-variant'?: string;
         initialValue?: string | undefined;
     };
 };

package/dist/cjs/components/atoms/Spinner/Spinner.d.ts

@@ -1,3 +1,3 @@
 import { SpinnerProps } from './Spinner.types';
-declare const Spinner: ({ className }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+declare const Spinner: ({ className, "component-variant": componentVariant }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
 export default Spinner;

package/dist/cjs/components/atoms/Spinner/Spinner.types.d.ts

@@ -1,3 +1,7 @@
 export type SpinnerProps = {
     className?: string;
+    /**
+     * Component variant for theming
+     */
+    'component-variant'?: string;
 };

package/dist/cjs/components/atoms/TextArea/TextArea.presenter.d.ts

@@ -8,6 +8,7 @@ declare const usePresenter: (props: TextAreaProps) => {
     otherTextAreaProps: {
         className?: string | undefined;
         form?: string | undefined;
+        children?: import("react").ReactNode | undefined;
         role?: import("react").AriaRole | undefined;
         onLoad?: import("react").ReactEventHandler<HTMLTextAreaElement> | undefined;
         onError?: import("react").ReactEventHandler<HTMLTextAreaElement> | undefined;
@@ -110,7 +111,6 @@ declare const usePresenter: (props: TextAreaProps) => {
         "aria-valuemin"?: number | undefined;
         "aria-valuenow"?: number | undefined;
         "aria-valuetext"?: string | undefined;
-        children?: import("react").ReactNode | undefined;
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;
         } | undefined;

package/dist/cjs/components/examples/PopoverContextMenuExample.d.ts

@@ -0,0 +1,2 @@
+declare const PopoverContextMenuExample: () => import("react/jsx-runtime").JSX.Element;
+export default PopoverContextMenuExample;

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

@@ -1,4 +1,3 @@
-import React from 'react';
-import { ChipInputProps } from "./ChipInput.types";
-declare const _default: React.NamedExoticComponent<ChipInputProps>;
-export default _default;
+import { ChipInputProps, OptionLike } from "./ChipInput.types";
+declare const ChipInput: <T extends string[] | OptionLike[]>(props: ChipInputProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default ChipInput;

package/dist/cjs/components/molecules/ChipInput/ChipInput.presenter.d.ts

@@ -1,28 +1,14 @@
-import { ChipInputProps, ChipListItemProps } from './ChipInput.types';
-declare const usePresenter: (props: ChipInputProps) => {
+import { ChipInputProps } from './ChipInput.types';
+import { ChipProps } from '../../atoms/Chip/Chip.types';
+import { OptionLike } from './ChipInput.types';
+declare const usePresenter: <T extends string[] | OptionLike[]>(props: ChipInputProps<T>) => {
     handleChipInputAreaClick: () => void;
-    chips: (ChipListItemProps | {
-        type: string;
-        props: {
-            onKeyUp: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-            value: string;
-            onValueChange: (value: string) => void;
-            placeholder: string;
-            className: string;
-            disabled: boolean;
-            id: string | undefined;
-        };
-        inputRef: import("react").RefObject<HTMLInputElement>;
-    })[];
-    optionList: {
-        id: string;
-        children: string;
-        className: string;
-        onValueChange: () => void;
-        checked: boolean;
-        value: boolean;
-        labelAlignment: string;
-    }[];
+    handleKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    inputValue: string;
+    onValueChange: (value: string) => void;
+    chips: ChipProps[];
+    inputRef: import("react").RefObject<HTMLInputElement>;
+    optionList: import("../..").CheckboxItemProps[];
     variantProps: {
         'component-variant': string;
     };

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

@@ -1,17 +1,129 @@
-import { RefObject } from 'react';
-import type { ChipProps, InputProps } from "../../atoms";
 import { ControlledFormComponentProps } from '../FormField/FormField.types';
-export type ChipListItemTypeEnum = 'chip' | 'input';
-export type ChipListItemProps = {
-    type: ChipListItemTypeEnum;
-    props: ChipProps | InputProps;
-    inputRef?: RefObject<HTMLInputElement>;
+/**
+ * Represents an option that can be selected in the ChipInput component.
+ * This is the normalized format used internally to handle both string arrays and object arrays.
+ */
+export type OptionLike = {
+    /** Unique identifier for the option. Can be string or number. */
+    key: string | number;
+    /** Display text shown to the user for this option. */
+    label: string;
 };
-export type ChipInputProps = ControlledFormComponentProps<string[]> & {
+/**
+ * Type alias for the key property of OptionLike.
+ * Used for type safety when working with selected values.
+ */
+export type OptionLikeKey = OptionLike['key'];
+/**
+ * Props for the ChipInput component.
+ *
+ * @template T - The type of the value array. Can be string[] or OptionLike[].
+ *               This generic ensures type consistency between input and output.
+ *
+ * @example
+ * ```tsx
+ * // String array usage
+ * const [fruits, setFruits] = useState<string[]>(['apple']);
+ * <ChipInput
+ *   value={fruits}
+ *   onValueChange={setFruits}
+ *   options={['apple', 'banana', 'cherry']}
+ * />
+ *
+ * // OptionLike array usage
+ * const [items, setItems] = useState<OptionLike[]>([{key: 1, label: 'Apple'}]);
+ * <ChipInput
+ *   value={items}
+ *   onValueChange={setItems}
+ *   options={[{key: 1, label: 'Apple'}, {key: 2, label: 'Banana'}]}
+ * />
+ * ```
+ */
+export type ChipInputProps<T = string[] | OptionLike[]> = Omit<ControlledFormComponentProps<OptionLikeKey[]>, 'value' | 'onValueChange'> & {
+    /**
+     * Current selected values. Type matches the generic T parameter.
+     * For string arrays: ['apple', 'banana']
+     * For OptionLike arrays: [{key: 1, label: 'Apple'}, {key: 2, label: 'Banana'}]
+     */
+    value?: T;
+    /**
+     * Callback fired when the selected values change.
+     * Returns the same type as the input value for type consistency.
+     *
+     * @param value - The new array of selected values in the same format as input
+     */
+    onValueChange?: (value: T) => void;
+    /**
+     * Current value of the text input field.
+     * Used for controlled input behavior and filtering.
+     */
     inputValue?: string;
+    /**
+     * Callback fired when the input field value changes.
+     *
+     * @param value - The new input field value
+     */
     onInputChange?: (value: string) => void;
-    options?: string[];
+    /**
+     * Available options for selection. Can be either:
+     * - string[]: Simple array of strings like ['apple', 'banana']
+     * - OptionLike[]: Array of objects like [{key: 1, label: 'Apple'}]
+     *
+     * Options are automatically filtered as the user types in the input field.
+     */
+    options?: string[] | OptionLike[];
+    /**
+     * Placeholder text shown in the input field when it's empty.
+     *
+     * @default undefined
+     */
     placeholder?: string;
+    /**
+     * Additional CSS class name applied to the root element.
+     */
     className?: string;
-    onAddNewOption?: (value: string) => void;
+    /**
+     * Optional callback for creating new items when they don't exist in options.
+     * Can be synchronous or asynchronous for API integration.
+     *
+     * When this prop is provided:
+     * - Optimistic UI updates are applied immediately
+     * - If async, the UI shows loading states and handles errors
+     * - Failed operations are automatically reverted
+     *
+     * @param newItemValue - The text value entered by the user
+     * @returns Promise<OptionLike> for async operations, OptionLike for sync operations
+     *
+     * @example
+     * ```tsx
+     * // Sync operation
+     * onAddItem={(value) => ({ key: value, label: value })}
+     *
+     * // Async operation
+     * onAddItem={async (value) => {
+     *   const newItem = await api.createItem(value);
+     *   return { key: newItem.id, label: newItem.name };
+     * }}
+     * ```
+     */
+    onAddItem?: (newItemValue: string) => Promise<OptionLike> | OptionLike;
+    /**
+     * Optional callback for deleting items.
+     * Typically used for API integration to sync deletions with backend.
+     *
+     * When provided, this callback is called when a chip is removed.
+     * The component handles UI updates automatically.
+     *
+     * @param keyToDelete - The key of the item being deleted
+     * @returns Promise<void> for the deletion operation
+     *
+     * @example
+     * ```tsx
+     * onDeleteItem={async (key) => {
+     *   await api.deleteItem(key);
+     *   // Component automatically updates UI
+     * }}
+     * ```
+     */
+    onDeleteItem?: (keyToDelete: OptionLikeKey) => Promise<void>;
 };

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

@@ -1,2 +1,63 @@
-import React from 'react';
-export declare const onEnterKeyPreventFormSubmit: (onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>) => (e: React.KeyboardEvent<HTMLInputElement>) => void;
+import { ChipProps } from '../../atoms/Chip/Chip.types';
+import { CheckboxItemProps } from '../../atoms/CheckboxItem/CheckboxItem.types';
+import { OptionLike, OptionLikeKey } from './ChipInput.types';
+/**
+ * Normalizes string array or OptionLike array to OptionLike array
+ */
+export declare const normalizeToOptionLike: (options: string[] | OptionLike[]) => OptionLike[];
+/**
+ * Normalizes string array or OptionLike array to OptionLikeKey array
+ */
+export declare const normalizeToOptionLikeKey: (options: string[] | OptionLike[]) => OptionLikeKey[];
+/**
+ * Creates chip props for a selected value using OptionLike
+ */
+export declare const createChipProps: (option: OptionLike, onRemove: (key: OptionLikeKey) => void, className?: string) => ChipProps;
+/**
+ * Creates checkbox item props for context menu options using OptionLike
+ */
+export declare const createCheckboxItemProps: (option: OptionLike, isChecked: boolean, onSelect: (key: OptionLikeKey) => void, className?: string) => CheckboxItemProps;
+/**
+ * Toggles an option key in the selected keys array
+ */
+export declare const toggleOptionInArray: (selectedKeys: OptionLikeKey[], optionKey: OptionLikeKey) => OptionLikeKey[];
+/**
+ * Adds a new OptionLike to available options if it doesn't exist
+ */
+export declare const addUniqueOption: (availableOptions: OptionLike[], newOption: OptionLike) => OptionLike[];
+/**
+ * Handles Enter key press for adding new chips
+ */
+export declare const handleEnterKeyForChip: (event: React.KeyboardEvent<HTMLInputElement>, inputValue: string, onAddChip: (value: string) => void, onClearInput: () => void) => void;
+/**
+ * Finds an OptionLike by its key
+ */
+export declare const findOptionByKey: (options: OptionLike[], key: OptionLikeKey) => OptionLike | undefined;
+/**
+ * Converts OptionLikeKey array back to original format (string[] or OptionLike[])
+ */
+export declare const convertKeysToOriginalFormat: <T extends string[] | OptionLike[]>(keys: OptionLikeKey[], originalValue: T | undefined, availableOptions: OptionLike[]) => T;
+/**
+ * Filters options by input value for search functionality
+ */
+export declare const filterOptionsByInput: (options: OptionLike[], inputValue: string) => OptionLike[];
+/**
+ * Creates an optimistic item for async operations
+ */
+export declare const createOptimisticItem: (value: string) => OptionLike;
+/**
+ * Adds a key to selected keys array
+ */
+export declare const addKeyToSelection: (selectedKeys: OptionLikeKey[], keyToAdd: OptionLikeKey) => OptionLikeKey[];
+/**
+ * Removes a key from selected keys array
+ */
+export declare const removeKeyFromSelection: (selectedKeys: OptionLikeKey[], keyToRemove: OptionLikeKey) => OptionLikeKey[];
+/**
+ * Replaces a temporary key with a real key in selected keys array
+ */
+export declare const replaceKeyInSelection: (selectedKeys: OptionLikeKey[], oldKey: OptionLikeKey, newKey: OptionLikeKey) => OptionLikeKey[];
+/**
+ * Handles async add item operation with optimistic updates
+ */
+export declare const handleAsyncAddItem: (inputValue: string, onAddItem: (value: string) => Promise<OptionLike>, currentOptions: OptionLike[], currentSelectedKeys: OptionLikeKey[], setOptions: (options: OptionLike[]) => void, setSelectedKeys: (keys: OptionLikeKey[]) => void) => Promise<void>;

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

@@ -1,3 +1,8 @@
 import { ListProps } from "../List";
 import { ListItemType } from "../List/List.types";
-export type ContextMenuProps<T extends ListItemType> = ListProps<T>;
+export type ContextMenuProps<T extends ListItemType> = ListProps<T> & {
+    /**
+     * Component variant for theming
+     */
+    'component-variant'?: string;
+};

package/dist/cjs/components/molecules/Search/Search.presenter.d.ts

@@ -19,9 +19,13 @@ declare const useSearchPresenter: (props: SearchProps) => {
         'component-variant': string;
     };
     restProps: {
+        disabled?: boolean | undefined;
+        required?: boolean | undefined;
+        checked?: boolean | undefined;
         className?: string | undefined;
         form?: string | undefined;
         list?: string | undefined;
+        children?: import("react").ReactNode | undefined;
         role?: import("react").AriaRole | undefined;
         src?: string | undefined;
         onLoad?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
@@ -127,7 +131,6 @@ declare const useSearchPresenter: (props: SearchProps) => {
         "aria-valuemin"?: number | undefined;
         "aria-valuenow"?: number | undefined;
         "aria-valuetext"?: string | undefined;
-        children?: import("react").ReactNode | undefined;
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;
         } | undefined;
@@ -289,10 +292,7 @@ declare const useSearchPresenter: (props: SearchProps) => {
         onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLInputElement> | undefined;
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
-        disabled?: boolean | undefined;
         pattern?: string | undefined;
-        required?: boolean | undefined;
-        checked?: boolean | undefined;
         size?: number | undefined;
         step?: number | string | undefined;
         autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;

package/dist/cjs/components/molecules/Select/Select.presenter.d.ts

@@ -15,11 +15,11 @@ declare const usePresenter: (props: SelectProps) => {
     selectedValue: import("../..").FieldValue;
     resetSelectedValue: () => void;
     triggerProps: {
-        id?: string;
         disabled?: boolean;
         required?: boolean;
         checked?: boolean;
         value?: import("../..").FieldValue | undefined;
+        id?: string;
         invalid?: boolean;
         onValueChange?: ((value: import("../..").FieldValue) => void) | undefined;
         initialValue?: import("../..").FieldValue | undefined;

package/dist/cjs/library.css

@@ -48,28 +48,32 @@
   background-color: var(--actionImage-background-color--disabled);
 }
 .Spinner-module_spinner__CfJfU {
-  --spinner-height: 14px;
-  --spinner-width: 14px;
-  --spinner-border-width: 2px;
-  --spinner-border-style: solid;
-  --spinner-border-color: currentcolor;
+  width: 16px;
+  width: var(--spinner-width, 16px);
+  height: 16px;
+  height: var(--spinner-height, 16px);
+  display: inline-block;
+  position: relative;
+}
+.Spinner-module_spinner__CfJfU .Spinner-module_inner__o2YHF {
+  --spinner-inner-border-width: 2px;
+  --spinner-inner-border-style: solid;
   width: 14px;
-  width: var(--spinner-width);
+  width: var(--spinner-inner-width, 14px);
   height: 14px;
-  height: var(--spinner-height);
+  height: var(--spinner-inner-height, 14px);
   border-width: 2px;
-  border-width: var(--spinner-border-width);
+  border-width: var(--spinner-inner-border-width);
   border-style: solid;
-  border-style: var(--spinner-border-style);
+  border-style: var(--spinner-inner-border-style);
   border-color: currentcolor;
-  border-color: var(--spinner-border-color);
+  border-color: var(--spinner-inner-color, currentcolor);
   border-top: 2px solid transparent;
-  border-top: var(--spinner-border-width) solid transparent;
+  border-top: var(--spinner-inner-border-width) solid transparent;
   border-radius: 50%;
   animation: Spinner-module_spin__136Ue 1s linear infinite;
   box-sizing: border-box;
 }
-
 @keyframes Spinner-module_spin__136Ue {
   0% {
     transform: rotate(0deg);
@@ -489,8 +493,8 @@
 .ListItem-module_listItem__jYwlh .ListItem-module_content__I-1o- {
   flex: 1;
   display: flex;
-  justify-content: center;
-  justify-content: var(--list-item-content-justify-content, center);
+  justify-content: flex-start;
+  justify-content: var(--list-item-content-justify-content, flex-start);
 }
 .ListItem-module_listItem__jYwlh .ListItem-module_content__I-1o- > *,
 .ListItem-module_listItem__jYwlh .ListItem-module_leadingIcon__BvSjG > *,
@@ -542,8 +546,8 @@
 .SelectListItem-module_listItem__alhXN .SelectListItem-module_content__IU02L {
   flex: 1;
   display: flex;
-  justify-content: center;
-  justify-content: var(--list-item-content-justify-content, center);
+  justify-content: flex-start;
+  justify-content: var(--list-item-content-justify-content, flex-start);
 }
 .SelectListItem-module_listItem__alhXN .SelectListItem-module_content__IU02L > *,
 .SelectListItem-module_listItem__alhXN .SelectListItem-module_leadingIcon__wMycl > *,
@@ -3704,6 +3708,9 @@ span.flatpickr-weekday {
 }
 
 .ChipInput-module_chipInput__tCCgW .ChipInput-module_trigger__KLvR4 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
   padding-top: calc(var(--chip-input-padding-top) - var(--chip-input-border-top-width));
   padding-bottom: calc(var(--chip-input-padding-bottom) - var(--chip-input-border-bottom-width));
   padding-left: calc(var(--chip-input-padding-left) - var(--chip-input-border-left-width));
@@ -29326,6 +29333,16 @@ span.flatpickr-weekday {
         --spinner-paragraph-spacing: 0px;
         --spinner-paragraph-indent: 0px
     }
+[data-theme='dark'] [component-variant="spinner-default"], [data-theme='light'] [component-variant="spinner-default"] {
+        --spinner-inner-height: 14px;
+        --spinner-inner-width: 14px;
+        --spinner-inner-color: var(--colours-grey-50);
+        --spinner-inner-font-family: sans-sarif;
+        --spinner-inner-font-size: initial;
+        --spinner-inner-font-weight: regular;
+        --spinner-inner-paragraph-spacing: 0px;
+        --spinner-inner-paragraph-indent: 0px
+    }
 [data-theme='dark'] [component-variant^="modal-header-"], [data-theme='light'] [component-variant^="modal-header-"] {
         --modal-header-opacity: 1;
         --modal-header-height: auto;