@zvoove/unity-ui 2.28.0 → 2.29.0

package/dist/components/Select/Select.styled.d.ts

@@ -0,0 +1,250 @@
+export declare const selectContainerStyles: import('tailwind-variants').TVReturnType<{
+    disabled: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], {
+    disabled: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    disabled: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const selectWrapperStyles: import('tailwind-variants').TVReturnType<{
+    disabled: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], {
+    disabled: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    disabled: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const selectStyles: import('tailwind-variants').TVReturnType<{
+    multiple: {
+        true: string[];
+        false: string[];
+    };
+    error: {
+        true: never[];
+        false: never[];
+    };
+    isFocused: {
+        true: never[];
+        false: never[];
+    };
+    disabled: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], {
+    multiple: {
+        true: string[];
+        false: string[];
+    };
+    error: {
+        true: never[];
+        false: never[];
+    };
+    isFocused: {
+        true: never[];
+        false: never[];
+    };
+    disabled: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    multiple: {
+        true: string[];
+        false: string[];
+    };
+    error: {
+        true: never[];
+        false: never[];
+    };
+    isFocused: {
+        true: never[];
+        false: never[];
+    };
+    disabled: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const iconStyles: import('tailwind-variants').TVReturnType<{
+    error: {
+        true: string[];
+        false: string[];
+    };
+    disabled: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, string[], {
+    error: {
+        true: string[];
+        false: string[];
+    };
+    disabled: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    error: {
+        true: string[];
+        false: string[];
+    };
+    disabled: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const inputContainerStyles: import('tailwind-variants').TVReturnType<{
+    isFilledOrFocused: {
+        true: never[];
+        false: never[];
+    };
+    hasMultipleSelectedValues: {
+        true: never[];
+        false: never[];
+    };
+    multiple: {
+        true: never[];
+        false: never[];
+    };
+}, undefined, string[], {
+    isFilledOrFocused: {
+        true: never[];
+        false: never[];
+    };
+    hasMultipleSelectedValues: {
+        true: never[];
+        false: never[];
+    };
+    multiple: {
+        true: never[];
+        false: never[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isFilledOrFocused: {
+        true: never[];
+        false: never[];
+    };
+    hasMultipleSelectedValues: {
+        true: never[];
+        false: never[];
+    };
+    multiple: {
+        true: never[];
+        false: never[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const inputStyles: import('tailwind-variants').TVReturnType<{
+    isVisible: {
+        true: string[];
+        false: string[];
+    };
+    error: {
+        true: string[];
+        false: string[];
+    };
+    disabled: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, string[], {
+    isVisible: {
+        true: string[];
+        false: string[];
+    };
+    error: {
+        true: string[];
+        false: string[];
+    };
+    disabled: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isVisible: {
+        true: string[];
+        false: string[];
+    };
+    error: {
+        true: string[];
+        false: string[];
+    };
+    disabled: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const labelStyles: import('tailwind-variants').TVReturnType<{
+    isFocused: {
+        true: never[];
+        false: never[];
+    };
+    isFilledOrFocused: {
+        true: string[];
+    };
+    error: {
+        true: string[];
+    };
+    hideLabel: {
+        true: string[];
+        false: never[];
+    };
+    disabled: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, string[], {
+    isFocused: {
+        true: never[];
+        false: never[];
+    };
+    isFilledOrFocused: {
+        true: string[];
+    };
+    error: {
+        true: string[];
+    };
+    hideLabel: {
+        true: string[];
+        false: never[];
+    };
+    disabled: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isFocused: {
+        true: never[];
+        false: never[];
+    };
+    isFilledOrFocused: {
+        true: string[];
+    };
+    error: {
+        true: string[];
+    };
+    hideLabel: {
+        true: string[];
+        false: never[];
+    };
+    disabled: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;

package/dist/components/Select/Select.types.d.ts

@@ -0,0 +1,70 @@
+import { PopUpMenuItem, PopUpMenuProps } from '../../index.ts';
+export type SelectOption = Omit<PopUpMenuItem, 'id' | 'onClick' | 'disabled' | 'linkComponent' | 'as'> & {
+    /**
+     * The value of the option
+     * @required
+     */
+    value: string;
+};
+type Union = {
+    /**
+     * Whether the select is multiple.
+     */
+    multiple?: true;
+    /**
+     * The value of the select.
+     */
+    value?: string[];
+} | {
+    /**
+     * Whether the select is multiple.
+     */
+    multiple?: false;
+    /**
+     * The value of the select.
+     */
+    value?: string;
+};
+export type SelectProps = Union & {
+    /**
+     * The options of the select.
+     */
+    options: SelectOption[];
+    /**
+     * The onChange event handler.
+     */
+    onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+    /**
+     * Whether the select has a search input.
+     */
+    searchable?: boolean;
+    /**
+     * Whether the select has an error.
+     */
+    error?: boolean;
+    /**
+     * The error message of the select.
+     */
+    errorMessage?: string;
+    /**
+     * Whether the select is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The label of the select.
+     */
+    label?: string;
+    /**
+     * Whether to hide the label.
+     */
+    hideLabel?: boolean;
+    /**
+     * The name of the select.
+     */
+    name: string;
+    /**
+     * The id of the select.
+     */
+    id?: string;
+} & Pick<PopUpMenuProps, 'allowClearAll' | 'allowSelectAll' | 'selectAllLabel' | 'clearAllLabel' | 'noResultsFoundMessage' | 'onScrollEnd' | 'isLoadingMore'> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>;
+export {};

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

@@ -0,0 +1,51 @@
+import { PopUpMenuItem } from '../../index.ts';
+import { SelectOption } from './Select.types';
+/**
+ * Performs a fuzzy match search on a string
+ * @param needle - The search term
+ * @param haystack - The string to search in
+ * @returns true if all characters in needle are found in haystack in order
+ */
+export declare const fuzzyMatch: (needle: string, haystack: string) => boolean;
+/**
+ * Filters options based on a search query using fuzzy matching
+ */
+export declare const filterOptions: (options: SelectOption[], query: string) => SelectOption[];
+/**
+ * Transforms a SelectOption to a PopUpMenuItem
+ * SelectOption uses 'value', PopUpMenuItem uses 'id'
+ */
+export declare const selectOptionToPopUpMenuItem: (option: SelectOption) => PopUpMenuItem;
+/**
+ * Transforms a PopUpMenuItem to a SelectOption
+ * PopUpMenuItem uses 'id', SelectOption uses 'value'
+ */
+export declare const popUpMenuItemToSelectOption: (item: PopUpMenuItem) => SelectOption;
+/**
+ * Transforms an array of SelectOptions to PopUpMenuItems
+ */
+export declare const selectOptionsToPopUpMenuItems: (options: SelectOption[]) => PopUpMenuItem[];
+/**
+ * Transforms an array of PopUpMenuItems to SelectOptions
+ */
+export declare const popUpMenuItemsToSelectOptions: (items: PopUpMenuItem[]) => SelectOption[];
+/**
+ * Finds an option by its value (ID)
+ */
+export declare const findOptionById: (options: SelectOption[], id: string | undefined) => SelectOption | undefined;
+/**
+ * Finds an option that exactly matches a label (case-insensitive)
+ */
+export declare const findOptionByExactLabel: (options: SelectOption[], label: string) => SelectOption | undefined;
+/**
+ * Type guard to check if value is a single select value (string)
+ */
+export declare const isSingleSelectValue: (value?: string | string[]) => value is string;
+/**
+ * Type guard to check if value is a multiple select value (array)
+ */
+export declare const isMultipleSelectValue: (value?: string | string[]) => value is string[];
+/**
+ * Determines if the label should be in the "filled or focused" state
+ */
+export declare const shouldLabelBeElevated: (value: string | string[] | undefined, inputValue: string, isFocused: boolean, multiple: boolean, searchable: boolean) => boolean;

package/dist/components/Select/SelectDisplay.d.ts

@@ -0,0 +1,3 @@
+import { SelectDisplayProps } from './SelectDisplay.types';
+declare const SelectDisplay: ({ multiple, value, options, searchable, error, disabled, isFocused, inputValue, label, name, id, onDeleteItem, onInputChange, onSingleSearchInputChange, onInputFocus, onInputKeyDown, onInputBlur, inputRef, chipsRef, }: SelectDisplayProps) => import("react/jsx-runtime").JSX.Element | null;
+export default SelectDisplay;

package/dist/components/Select/SelectDisplay.types.d.ts

@@ -0,0 +1,43 @@
+import { SelectOption, SelectProps } from './Select.types';
+export interface SelectDisplayProps extends Pick<SelectProps, 'value' | 'options' | 'label' | 'name' | 'id'>, Required<Pick<SelectProps, 'multiple' | 'searchable' | 'error' | 'disabled'>> {
+    /**
+     * Whether the input is focused.
+     */
+    isFocused: boolean;
+    /**
+     * The input value.
+     */
+    inputValue: string;
+    /**
+     * Handler for deleting an item in multiple select.
+     */
+    onDeleteItem: (option: SelectOption) => void;
+    /**
+     * Handler for input change (single select with searchable).
+     */
+    onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Handler for input change (multiple select with searchable).
+     */
+    onSingleSearchInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Handler for input focus.
+     */
+    onInputFocus: () => void;
+    /**
+     * Handler for input key down.
+     */
+    onInputKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Handler for input blur.
+     */
+    onInputBlur?: () => void;
+    /**
+     * Ref for the input element.
+     */
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    /**
+     * Ref for the chips container.
+     */
+    chipsRef: React.RefObject<HTMLDivElement | null>;
+}

package/dist/components/Select/SelectManager.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Global manager for Select components to ensure only one Select menu is open at a time
+ */
+declare class SelectManager {
+    private readonly openSelects;
+    private readonly closeCallbacks;
+    /**
+     * Register a Select as open with its close callback
+     * @param selectId - Unique identifier for the Select
+     * @param closeCallback - Function to close this specific Select
+     */
+    registerOpenSelect(selectId: string, closeCallback: () => void): void;
+    /**
+     * Unregister a Select as closed
+     * @param selectId - Unique identifier for the Select
+     */
+    unregisterOpenSelect(selectId: string): void;
+    /**
+     * Close all other Selects except the specified one
+     * @param excludeSelectId - Select ID to exclude from closing
+     */
+    closeOtherSelects(excludeSelectId: string): void;
+    /**
+     * Check if any Selects are currently open
+     */
+    hasOpenSelects(): boolean;
+    /**
+     * Get all currently open Select IDs
+     */
+    getOpenSelects(): string[];
+    /**
+     * Clear all registered Selects (useful for cleanup)
+     */
+    clear(): void;
+}
+export declare const selectManager: SelectManager;
+export {};

package/dist/components/Select/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Select } from './Select';
+export type { SelectProps, SelectOption } from './Select.types';

package/dist/components/Select/useSelectHandlers.d.ts

@@ -0,0 +1,40 @@
+import { PopUpMenuItem } from '../../index.ts';
+import { SelectOption } from './Select.types';
+import { useSelectState } from './useSelectState';
+type SelectStateReturn = ReturnType<typeof useSelectState>;
+interface UseSelectHandlersProps {
+    options: SelectOption[];
+    value?: string | string[];
+    multiple: boolean;
+    searchable: boolean;
+    disabled: boolean;
+    onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+    inputValue: string;
+    setInputValue: (value: string) => void;
+    filteredOptions: SelectOption[];
+    setFilteredOptions: (options: SelectOption[]) => void;
+    setIsPopUpMenuOpen: (open: boolean) => void;
+    setIsFocused: (focused: boolean) => void;
+    inputRef: SelectStateReturn['inputRef'];
+    wrapperRef: SelectStateReturn['wrapperRef'];
+    justSelectedRef: SelectStateReturn['justSelectedRef'];
+    name: string;
+    selectId: string;
+}
+export declare const useSelectHandlers: ({ options, value, multiple, searchable, disabled, onChange, inputValue, setInputValue, filteredOptions, setFilteredOptions, setIsPopUpMenuOpen, setIsFocused, inputRef, wrapperRef, justSelectedRef, name, selectId, }: UseSelectHandlersProps) => {
+    handleDeleteItem: (option: SelectOption) => void;
+    handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleSearchInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleInputFocus: () => void;
+    handleInputKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    handleInputBlur: () => void;
+    handleItemClick: (item: PopUpMenuItem, selectedItem: string | string[] | undefined) => void;
+    handleClearAllOrSelectAll: (_items: PopUpMenuItem[], selectedItems: string | string[] | undefined) => void;
+    handleMenuClose: () => void;
+    handleWrapperFocus: () => void;
+    handleWrapperBlur: (e: React.FocusEvent<HTMLDivElement>) => void;
+    handleWrapperClick: () => void;
+    handleWrapperKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+    handleMenuFocus: () => void;
+};
+export {};

package/dist/components/Select/useSelectState.d.ts

@@ -0,0 +1,19 @@
+import { SelectOption } from './Select.types';
+/**
+ * Custom hook to manage Select component state
+ */
+export declare const useSelectState: (options: SelectOption[]) => {
+    isPopUpMenuOpen: boolean;
+    setIsPopUpMenuOpen: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+    inputValue: string;
+    setInputValue: import('react').Dispatch<import('react').SetStateAction<string>>;
+    isFocused: boolean;
+    setIsFocused: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+    filteredOptions: SelectOption[];
+    setFilteredOptions: import('react').Dispatch<import('react').SetStateAction<SelectOption[]>>;
+    inputRef: import('react').RefObject<HTMLInputElement | null>;
+    chipsRef: import('react').RefObject<HTMLDivElement | null>;
+    wrapperRef: import('react').RefObject<HTMLDivElement | null>;
+    justSelectedRef: import('react').RefObject<boolean>;
+    selectId: string;
+};

package/dist/components/Shared/Backdrop/Backdrop.d.ts

@@ -0,0 +1,6 @@
+import { BackdropProps } from './Backdrop.types';
+declare const Backdrop: {
+    ({ show, onClick, className, children, zIndex, }: BackdropProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Backdrop;

package/dist/components/Shared/Backdrop/Backdrop.styled.d.ts

@@ -0,0 +1,16 @@
+export declare const backdropStyles: import('tailwind-variants').TVReturnType<{
+    show: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], {
+    show: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    show: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;

package/dist/components/Shared/Backdrop/Backdrop.types.d.ts

@@ -0,0 +1,23 @@
+export interface BackdropProps {
+    /**
+     * Controls the visibility of the backdrop
+     */
+    show: boolean;
+    /**
+     * Callback fired when the backdrop is clicked
+     */
+    onClick?: () => void;
+    /**
+     * Additional CSS classes to apply to the backdrop
+     */
+    className?: string;
+    /**
+     * Children to render inside the backdrop (typically dialog/sheet content)
+     */
+    children?: React.ReactNode;
+    /**
+     * The z-index of the backdrop.
+     * @default 20
+     */
+    zIndex?: number;
+}

package/dist/components/Shared/Backdrop/index.d.ts

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

package/dist/components/Shared/ErrorMessage/ErrorMessage.d.ts

@@ -0,0 +1,3 @@
+import { ErrorMessageProps } from './ErrorMessage.types';
+declare const ErrorMessage: ({ errorMessage, open, disabled, }: ErrorMessageProps) => import("react/jsx-runtime").JSX.Element;
+export default ErrorMessage;

package/dist/components/Shared/ErrorMessage/ErrorMessage.styled.d.ts

@@ -0,0 +1,25 @@
+export declare const errorMessageStyles: import('tailwind-variants').TVReturnType<{
+    open: {
+        true: string[];
+        false: string[];
+    };
+    disabled: {
+        true: string[];
+    };
+}, undefined, string[], {
+    open: {
+        true: string[];
+        false: string[];
+    };
+    disabled: {
+        true: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    open: {
+        true: string[];
+        false: string[];
+    };
+    disabled: {
+        true: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;

package/dist/components/Shared/ErrorMessage/ErrorMessage.types.d.ts

@@ -0,0 +1,16 @@
+export interface ErrorMessageProps {
+    /**
+     * The error message to display.
+     */
+    errorMessage?: string;
+    /**
+     * Whether the error message is open.
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Whether the error message is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+}

package/dist/components/Shared/ErrorMessage/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ErrorMessage } from './ErrorMessage';
+export type { ErrorMessageProps } from './ErrorMessage.types';

package/dist/components/Shared/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Backdrop';
+export * from './ErrorMessage';

package/dist/components/Sheet/Examples/SheetDefault.d.ts

@@ -0,0 +1,3 @@
+import { SheetProps } from '../../../index.ts';
+declare const SheetDefault: ({ open, onClose, ...args }: SheetProps) => import("react/jsx-runtime").JSX.Element;
+export default SheetDefault;

package/dist/components/Sheet/Examples/SheetWithFooterAndHeader.d.ts

@@ -0,0 +1,3 @@
+import { SheetProps } from '../../../index.ts';
+declare const SheetWithFooterAndHeader: ({ placement, title, subTitle, showBackArrow, showCloseButton, stickyHeader, stickyFooter, padding, size, showHandle, resizable, width, minWidth, maxWidth, onResizeEnd, }: SheetProps) => import("react/jsx-runtime").JSX.Element;
+export default SheetWithFooterAndHeader;

package/dist/components/Sheet/Sheet.d.ts

@@ -0,0 +1,6 @@
+import { SheetProps } from './Sheet.types';
+declare const Sheet: {
+    ({ open, onClose, children, title, subTitle, closeOnBackdropClick, closeOnEsc, padding, showHandle, size, placement, headerActions, footerActions, stickyFooter, stickyHeader, showCloseButton, showBackArrow, resizable, width, minWidth, maxWidth, onResizeEnd, }: SheetProps): import('react').ReactPortal | null;
+    displayName: string;
+};
+export default Sheet;