@undefine-ui/design-system 2.2.0 → 2.4.0

package/dist/index.d.cts

@@ -89,6 +89,23 @@ interface UseBooleanReturnType {
     onToggle: () => void;
     setValue: React.Dispatch<React.SetStateAction<boolean>>;
 }
+/**
+ * Custom hook for managing boolean state with helper functions.
+ *
+ * @param {boolean} [defaultValue=false] - The initial boolean value
+ * @returns {UseBooleanReturnType} Object containing:
+ *   - value: Current boolean state
+ *   - onTrue: Function to set value to true
+ *   - onFalse: Function to set value to false
+ *   - onToggle: Function to toggle the value
+ *   - setValue: Direct state setter
+ *
+ * @example
+ * const modal = useBoolean();
+ *
+ * <Button onClick={modal.onTrue}>Open Modal</Button>
+ * <Modal open={modal.value} onClose={modal.onFalse} />
+ */
 declare const useBoolean: (defaultValue?: boolean) => UseBooleanReturnType;
 
 declare const STORAGE_KEY = "app-settings";
@@ -118,14 +135,102 @@ interface SettingsProviderProps {
 }
 declare const SettingsProvider: ({ children, settings }: SettingsProviderProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * Custom hook for accessing the design system settings context.
+ * Must be used within a SettingsProvider.
+ *
+ * @returns {SettingsContextValue} The settings context value containing:
+ *   - Current theme settings (colorScheme, contrast, direction, etc.)
+ *   - Functions to update settings (onUpdate, onUpdateField, onReset)
+ *
+ * @throws {Error} If used outside of SettingsProvider
+ *
+ * @example
+ * const { colorScheme, onUpdateField } = useSettings();
+ *
+ * <Button onClick={() => onUpdateField('colorScheme', 'dark')}>
+ *   Toggle Dark Mode
+ * </Button>
+ */
 declare const useSettings: () => SettingsContextProps;
 
+type UseSetStateReturnType<T> = {
+    state: T;
+    setState: (updateState: SetStateAction<T>) => void;
+    setField: (name: keyof T, updateValue: T[keyof T]) => void;
+    onResetState: () => void;
+    canReset: boolean;
+};
+/**
+ * Custom hook for managing complex object state with field-level updates.
+ * Similar to useState but optimized for objects with helper functions.
+ *
+ * @template T - The type of the state object (must be a record)
+ * @param {T} initialState - The initial state object
+ * @returns {UseSetStateReturnType<T>} Object containing:
+ *   - state: Current state object
+ *   - setState: Function to update state (merges with previous state)
+ *   - setField: Function to update a single field
+ *   - onResetState: Function to reset to initial state
+ *   - canReset: Boolean indicating if state differs from initial
+ *
+ * @example
+ * const { state, setField, onResetState } = useSetState({ name: '', age: 0 });
+ *
+ * setField('name', 'John');
+ * setField('age', 25);
+ * onResetState();
+ */
+declare const useSetState: <T extends Record<string, any>>(initialState: T) => UseSetStateReturnType<T>;
+
 type ReturnType = boolean;
 type Query = 'up' | 'down' | 'between' | 'only';
 type Value = Breakpoint | number;
+/**
+ * Custom hook for responsive design with MUI breakpoints.
+ *
+ * @param {Query} query - The type of breakpoint query ('up' | 'down' | 'between' | 'only')
+ * @param {Value} [start] - The starting breakpoint or number
+ * @param {Value} [end] - The ending breakpoint (only used with 'between')
+ * @returns {boolean} True if the media query matches
+ *
+ * @example
+ * const isMobile = useResponsive('down', 'sm');
+ * const isDesktop = useResponsive('up', 'md');
+ * const isTablet = useResponsive('between', 'sm', 'md');
+ */
 declare const useResponsive: (query: Query, start?: Value, end?: Value) => ReturnType;
+/**
+ * Custom hook that returns the current MUI breakpoint.
+ *
+ * @returns {Breakpoint} The current breakpoint ('xs' | 'sm' | 'md' | 'lg' | 'xl')
+ *
+ * @example
+ * const width = useWidth();
+ * // Returns 'xs', 'sm', 'md', 'lg', or 'xl' based on viewport
+ */
 declare const useWidth: () => "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
 
+/**
+ * Custom hook for managing state synchronized with localStorage.
+ * Supports both primitive values and objects with field-level updates.
+ *
+ * @template T - The type of the state value
+ * @param {string} key - The localStorage key
+ * @param {T} initialState - The initial state value
+ * @returns {Object} Object containing:
+ *   - state: Current state value
+ *   - setState: Function to update the entire state
+ *   - setField: Function to update a single field (for objects)
+ *   - resetState: Function to reset to initial state
+ *   - canReset: Boolean indicating if state differs from initial
+ *
+ * @example
+ * const { state, setState, setField } = useLocalStorage('user', { name: '', age: 0 });
+ *
+ * setField('name', 'John');
+ * setState({ name: 'Jane', age: 25 });
+ */
 declare const useLocalStorage: <T>(key: string, initialState: T) => {
     state: T;
     setState: (updateState: SetStateAction<T>) => void;
@@ -133,10 +238,41 @@ declare const useLocalStorage: <T>(key: string, initialState: T) => {
     resetState: () => void;
     canReset: boolean;
 };
+/**
+ * Retrieves a value from localStorage and parses it as JSON.
+ *
+ * @template T - The expected return type
+ * @param {string} key - The localStorage key
+ * @returns {T | null} The parsed value or null if not found or error occurs
+ */
 declare const getStorage: <T>(key: string) => T | null;
+/**
+ * Stores a value in localStorage as JSON string.
+ *
+ * @template T - The type of value to store
+ * @param {string} key - The localStorage key
+ * @param {T} value - The value to store
+ */
 declare const setStorage: <T>(key: string, value: T) => void;
+/**
+ * Removes a value from localStorage.
+ *
+ * @param {string} key - The localStorage key to remove
+ */
 declare const removeStorage: (key: string) => void;
+/**
+ * Checks if localStorage is available in the current environment.
+ *
+ * @returns {boolean} True if localStorage is available, false otherwise
+ */
 declare const LocalStorageAvailable: () => boolean;
+/**
+ * Gets an item from localStorage with fallback to default value.
+ *
+ * @param {string} key - The localStorage key
+ * @param {string} [defaultValue=''] - The default value if key doesn't exist
+ * @returns {string | undefined} The stored value or default value
+ */
 declare const LocalStorageGetItem: (key: string, defaultValue?: string) => string | undefined;
 
 type useEventListenerOptions = {
@@ -145,14 +281,69 @@ type useEventListenerOptions = {
     element?: React.RefObject<HTMLElement>;
     options?: AddEventListenerOptions;
 };
+/**
+ * Custom hook for adding event listeners with automatic cleanup.
+ * Uses isomorphic layout effect for SSR compatibility.
+ *
+ * @param {Object} params - Hook parameters
+ * @param {string} params.eventName - The name of the event to listen for
+ * @param {Function} params.handler - The event handler function
+ * @param {React.RefObject<HTMLElement>} [params.element] - Optional element ref (defaults to window)
+ * @param {AddEventListenerOptions} [params.options] - Optional event listener options
+ *
+ * @example
+ * const ref = useRef<HTMLDivElement>(null);
+ *
+ * useEventListener({
+ *   eventName: 'click',
+ *   handler: (e) => console.log('Clicked!'),
+ *   element: ref
+ * });
+ */
 declare const useEventListener: ({ eventName, handler, element, options }: useEventListenerOptions) => void;
 
+/**
+ * Custom hook for copying text to clipboard with status tracking.
+ *
+ * @returns {Object} Object containing:
+ *   - copy: Async function to copy text to clipboard
+ *   - copiedText: The last successfully copied text
+ *   - isCopied: Boolean indicating if text was recently copied (resets after 2s)
+ *
+ * @example
+ * const { copy, isCopied } = useCopyToClipboard();
+ *
+ * <Button onClick={() => copy('Hello World')}>
+ *   {isCopied ? 'Copied!' : 'Copy'}
+ * </Button>
+ */
 declare const useCopyToClipboard: () => {
     copy: (text: string) => Promise<boolean>;
     copiedText: string;
     isCopied: boolean;
 };
 
+/**
+ * Custom hook for tracking if an element or window has scrolled past a threshold.
+ *
+ * @param {number} [top=0] - The threshold in pixels
+ * @returns {Object} Object containing:
+ *   - elementRef: Ref to attach to an element for element-specific tracking
+ *   - offsetTop: Boolean indicating if scrolled past threshold
+ *
+ * @example
+ * // Track global scroll position
+ * const { offsetTop } = useScrollOffSetTop(80);
+ *
+ * // Track specific element position
+ * const { offsetTop, elementRef } = useScrollOffSetTop(80);
+ * <div ref={elementRef}>Content</div>
+ */
+declare const useScrollOffSetTop: (top?: number) => {
+    elementRef: React.RefObject<HTMLElement | null>;
+    offsetTop: boolean;
+};
+
 interface RadiusOptions {
     'radius-0': string;
     'radius-2xs': string;
@@ -1552,4 +1743,4 @@ interface LoadingScreenProps extends BoxProps {
 declare const LoadingScreen: ({ portal, sx, ...rest }: LoadingScreenProps) => react_jsx_runtime.JSX.Element;
 declare const SplashScreen: ({ portal, sx, ...rest }: LoadingScreenProps) => react_jsx_runtime.JSX.Element;
 
-export { AnimatedLogo, CheckboxDefault, CheckboxIndeterminate, CheckboxSelect, ClipboardCheck, CloudUpload, type ColorSchema, Copy, CopyButton, type CustomShadowOptions, type CustomSpacingOptions, Eye, EyeClosed, Field, Form, Icon, type IconProps, type IconType, InfoCircleFill, InfoCircleOutline, Loader, LoadingScreen, LocalStorageAvailable, LocalStorageGetItem, Logo, LongArrowUpLeftSolid, NavArrowDown, NavArrowLeft, NavArrowRight, RHFAutocomplete, type RHFAutocompleteProps, RHFCheckbox, type RHFCheckboxProps, RHFMultiCheckbox, type RHFMultiCheckboxOption, type RHFMultiCheckboxProps, RHFMultiSwitch, RHFRadioGroup, type RHFRadioGroupProps, RHFSwitch, RHFTextField, RHFUpload, type RHFUploadProps, RadioDefault, RadioSelect, type RadiusOptions, STORAGE_KEY, Search, SettingsConsumer, SettingsContext, type SettingsContextProps, SettingsProvider, type SettingsValueProps, SplashScreen, Table, type TableNoRowsProps, TablePagination, ThemeProvider, Trash, Upload, type UploadProps, type UseBooleanReturnType, UserFill, UserOutline, XMark, XMarkSolid, action, background, baseAction, basePalette, bgBlur, bgGradient, border, borderGradient, breakpoints, colorSchemes, common, components, createPaletteChannel, createShadowColor, createTheme, customShadows, customSpacing, darkPalette, defaultSettings, error, fCurrency, fData, fNumber, fPercent, fShortenNumber, getCurrencySymbol, getInitColorSchemeScript, getStorage, grey, hexToRgbChannel, hideScrollX, hideScrollY, icon, iconClasses, info, isEqual, lightPalette, maxLine, mediaQueries, menuItem, neutral, orderBy, paper, paramCase, primary, primaryFont, pxToRem, radius, remToPx, removeStorage, responsiveFontSizes, schemeConfig, secondary, secondaryFont, sentenceCase, setFont, setStorage, shadows, snakeCase, stylesMode, success, surface, tertiaryFont, text, textGradient, typography, updateComponentsWithSettings, updateCoreWithSettings, useBoolean, useCopyToClipboard, useEventListener, useLocalStorage, useResponsive, useSettings, useWidth, varAlpha, warning };
+export { AnimatedLogo, CheckboxDefault, CheckboxIndeterminate, CheckboxSelect, ClipboardCheck, CloudUpload, type ColorSchema, Copy, CopyButton, type CustomShadowOptions, type CustomSpacingOptions, Eye, EyeClosed, Field, Form, Icon, type IconProps, type IconType, InfoCircleFill, InfoCircleOutline, Loader, LoadingScreen, LocalStorageAvailable, LocalStorageGetItem, Logo, LongArrowUpLeftSolid, NavArrowDown, NavArrowLeft, NavArrowRight, RHFAutocomplete, type RHFAutocompleteProps, RHFCheckbox, type RHFCheckboxProps, RHFMultiCheckbox, type RHFMultiCheckboxOption, type RHFMultiCheckboxProps, RHFMultiSwitch, RHFRadioGroup, type RHFRadioGroupProps, RHFSwitch, RHFTextField, RHFUpload, type RHFUploadProps, RadioDefault, RadioSelect, type RadiusOptions, STORAGE_KEY, Search, SettingsConsumer, SettingsContext, type SettingsContextProps, SettingsProvider, type SettingsValueProps, SplashScreen, Table, type TableNoRowsProps, TablePagination, ThemeProvider, Trash, Upload, type UploadProps, type UseBooleanReturnType, type UseSetStateReturnType, UserFill, UserOutline, XMark, XMarkSolid, action, background, baseAction, basePalette, bgBlur, bgGradient, border, borderGradient, breakpoints, colorSchemes, common, components, createPaletteChannel, createShadowColor, createTheme, customShadows, customSpacing, darkPalette, defaultSettings, error, fCurrency, fData, fNumber, fPercent, fShortenNumber, getCurrencySymbol, getInitColorSchemeScript, getStorage, grey, hexToRgbChannel, hideScrollX, hideScrollY, icon, iconClasses, info, isEqual, lightPalette, maxLine, mediaQueries, menuItem, neutral, orderBy, paper, paramCase, primary, primaryFont, pxToRem, radius, remToPx, removeStorage, responsiveFontSizes, schemeConfig, secondary, secondaryFont, sentenceCase, setFont, setStorage, shadows, snakeCase, stylesMode, success, surface, tertiaryFont, text, textGradient, typography, updateComponentsWithSettings, updateCoreWithSettings, useBoolean, useCopyToClipboard, useEventListener, useLocalStorage, useResponsive, useScrollOffSetTop, useSetState, useSettings, useWidth, varAlpha, warning };

package/dist/index.d.ts

@@ -89,6 +89,23 @@ interface UseBooleanReturnType {
     onToggle: () => void;
     setValue: React.Dispatch<React.SetStateAction<boolean>>;
 }
+/**
+ * Custom hook for managing boolean state with helper functions.
+ *
+ * @param {boolean} [defaultValue=false] - The initial boolean value
+ * @returns {UseBooleanReturnType} Object containing:
+ *   - value: Current boolean state
+ *   - onTrue: Function to set value to true
+ *   - onFalse: Function to set value to false
+ *   - onToggle: Function to toggle the value
+ *   - setValue: Direct state setter
+ *
+ * @example
+ * const modal = useBoolean();
+ *
+ * <Button onClick={modal.onTrue}>Open Modal</Button>
+ * <Modal open={modal.value} onClose={modal.onFalse} />
+ */
 declare const useBoolean: (defaultValue?: boolean) => UseBooleanReturnType;
 
 declare const STORAGE_KEY = "app-settings";
@@ -118,14 +135,102 @@ interface SettingsProviderProps {
 }
 declare const SettingsProvider: ({ children, settings }: SettingsProviderProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * Custom hook for accessing the design system settings context.
+ * Must be used within a SettingsProvider.
+ *
+ * @returns {SettingsContextValue} The settings context value containing:
+ *   - Current theme settings (colorScheme, contrast, direction, etc.)
+ *   - Functions to update settings (onUpdate, onUpdateField, onReset)
+ *
+ * @throws {Error} If used outside of SettingsProvider
+ *
+ * @example
+ * const { colorScheme, onUpdateField } = useSettings();
+ *
+ * <Button onClick={() => onUpdateField('colorScheme', 'dark')}>
+ *   Toggle Dark Mode
+ * </Button>
+ */
 declare const useSettings: () => SettingsContextProps;
 
+type UseSetStateReturnType<T> = {
+    state: T;
+    setState: (updateState: SetStateAction<T>) => void;
+    setField: (name: keyof T, updateValue: T[keyof T]) => void;
+    onResetState: () => void;
+    canReset: boolean;
+};
+/**
+ * Custom hook for managing complex object state with field-level updates.
+ * Similar to useState but optimized for objects with helper functions.
+ *
+ * @template T - The type of the state object (must be a record)
+ * @param {T} initialState - The initial state object
+ * @returns {UseSetStateReturnType<T>} Object containing:
+ *   - state: Current state object
+ *   - setState: Function to update state (merges with previous state)
+ *   - setField: Function to update a single field
+ *   - onResetState: Function to reset to initial state
+ *   - canReset: Boolean indicating if state differs from initial
+ *
+ * @example
+ * const { state, setField, onResetState } = useSetState({ name: '', age: 0 });
+ *
+ * setField('name', 'John');
+ * setField('age', 25);
+ * onResetState();
+ */
+declare const useSetState: <T extends Record<string, any>>(initialState: T) => UseSetStateReturnType<T>;
+
 type ReturnType = boolean;
 type Query = 'up' | 'down' | 'between' | 'only';
 type Value = Breakpoint | number;
+/**
+ * Custom hook for responsive design with MUI breakpoints.
+ *
+ * @param {Query} query - The type of breakpoint query ('up' | 'down' | 'between' | 'only')
+ * @param {Value} [start] - The starting breakpoint or number
+ * @param {Value} [end] - The ending breakpoint (only used with 'between')
+ * @returns {boolean} True if the media query matches
+ *
+ * @example
+ * const isMobile = useResponsive('down', 'sm');
+ * const isDesktop = useResponsive('up', 'md');
+ * const isTablet = useResponsive('between', 'sm', 'md');
+ */
 declare const useResponsive: (query: Query, start?: Value, end?: Value) => ReturnType;
+/**
+ * Custom hook that returns the current MUI breakpoint.
+ *
+ * @returns {Breakpoint} The current breakpoint ('xs' | 'sm' | 'md' | 'lg' | 'xl')
+ *
+ * @example
+ * const width = useWidth();
+ * // Returns 'xs', 'sm', 'md', 'lg', or 'xl' based on viewport
+ */
 declare const useWidth: () => "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
 
+/**
+ * Custom hook for managing state synchronized with localStorage.
+ * Supports both primitive values and objects with field-level updates.
+ *
+ * @template T - The type of the state value
+ * @param {string} key - The localStorage key
+ * @param {T} initialState - The initial state value
+ * @returns {Object} Object containing:
+ *   - state: Current state value
+ *   - setState: Function to update the entire state
+ *   - setField: Function to update a single field (for objects)
+ *   - resetState: Function to reset to initial state
+ *   - canReset: Boolean indicating if state differs from initial
+ *
+ * @example
+ * const { state, setState, setField } = useLocalStorage('user', { name: '', age: 0 });
+ *
+ * setField('name', 'John');
+ * setState({ name: 'Jane', age: 25 });
+ */
 declare const useLocalStorage: <T>(key: string, initialState: T) => {
     state: T;
     setState: (updateState: SetStateAction<T>) => void;
@@ -133,10 +238,41 @@ declare const useLocalStorage: <T>(key: string, initialState: T) => {
     resetState: () => void;
     canReset: boolean;
 };
+/**
+ * Retrieves a value from localStorage and parses it as JSON.
+ *
+ * @template T - The expected return type
+ * @param {string} key - The localStorage key
+ * @returns {T | null} The parsed value or null if not found or error occurs
+ */
 declare const getStorage: <T>(key: string) => T | null;
+/**
+ * Stores a value in localStorage as JSON string.
+ *
+ * @template T - The type of value to store
+ * @param {string} key - The localStorage key
+ * @param {T} value - The value to store
+ */
 declare const setStorage: <T>(key: string, value: T) => void;
+/**
+ * Removes a value from localStorage.
+ *
+ * @param {string} key - The localStorage key to remove
+ */
 declare const removeStorage: (key: string) => void;
+/**
+ * Checks if localStorage is available in the current environment.
+ *
+ * @returns {boolean} True if localStorage is available, false otherwise
+ */
 declare const LocalStorageAvailable: () => boolean;
+/**
+ * Gets an item from localStorage with fallback to default value.
+ *
+ * @param {string} key - The localStorage key
+ * @param {string} [defaultValue=''] - The default value if key doesn't exist
+ * @returns {string | undefined} The stored value or default value
+ */
 declare const LocalStorageGetItem: (key: string, defaultValue?: string) => string | undefined;
 
 type useEventListenerOptions = {
@@ -145,14 +281,69 @@ type useEventListenerOptions = {
     element?: React.RefObject<HTMLElement>;
     options?: AddEventListenerOptions;
 };
+/**
+ * Custom hook for adding event listeners with automatic cleanup.
+ * Uses isomorphic layout effect for SSR compatibility.
+ *
+ * @param {Object} params - Hook parameters
+ * @param {string} params.eventName - The name of the event to listen for
+ * @param {Function} params.handler - The event handler function
+ * @param {React.RefObject<HTMLElement>} [params.element] - Optional element ref (defaults to window)
+ * @param {AddEventListenerOptions} [params.options] - Optional event listener options
+ *
+ * @example
+ * const ref = useRef<HTMLDivElement>(null);
+ *
+ * useEventListener({
+ *   eventName: 'click',
+ *   handler: (e) => console.log('Clicked!'),
+ *   element: ref
+ * });
+ */
 declare const useEventListener: ({ eventName, handler, element, options }: useEventListenerOptions) => void;
 
+/**
+ * Custom hook for copying text to clipboard with status tracking.
+ *
+ * @returns {Object} Object containing:
+ *   - copy: Async function to copy text to clipboard
+ *   - copiedText: The last successfully copied text
+ *   - isCopied: Boolean indicating if text was recently copied (resets after 2s)
+ *
+ * @example
+ * const { copy, isCopied } = useCopyToClipboard();
+ *
+ * <Button onClick={() => copy('Hello World')}>
+ *   {isCopied ? 'Copied!' : 'Copy'}
+ * </Button>
+ */
 declare const useCopyToClipboard: () => {
     copy: (text: string) => Promise<boolean>;
     copiedText: string;
     isCopied: boolean;
 };
 
+/**
+ * Custom hook for tracking if an element or window has scrolled past a threshold.
+ *
+ * @param {number} [top=0] - The threshold in pixels
+ * @returns {Object} Object containing:
+ *   - elementRef: Ref to attach to an element for element-specific tracking
+ *   - offsetTop: Boolean indicating if scrolled past threshold
+ *
+ * @example
+ * // Track global scroll position
+ * const { offsetTop } = useScrollOffSetTop(80);
+ *
+ * // Track specific element position
+ * const { offsetTop, elementRef } = useScrollOffSetTop(80);
+ * <div ref={elementRef}>Content</div>
+ */
+declare const useScrollOffSetTop: (top?: number) => {
+    elementRef: React.RefObject<HTMLElement | null>;
+    offsetTop: boolean;
+};
+
 interface RadiusOptions {
     'radius-0': string;
     'radius-2xs': string;
@@ -1552,4 +1743,4 @@ interface LoadingScreenProps extends BoxProps {
 declare const LoadingScreen: ({ portal, sx, ...rest }: LoadingScreenProps) => react_jsx_runtime.JSX.Element;
 declare const SplashScreen: ({ portal, sx, ...rest }: LoadingScreenProps) => react_jsx_runtime.JSX.Element;
 
-export { AnimatedLogo, CheckboxDefault, CheckboxIndeterminate, CheckboxSelect, ClipboardCheck, CloudUpload, type ColorSchema, Copy, CopyButton, type CustomShadowOptions, type CustomSpacingOptions, Eye, EyeClosed, Field, Form, Icon, type IconProps, type IconType, InfoCircleFill, InfoCircleOutline, Loader, LoadingScreen, LocalStorageAvailable, LocalStorageGetItem, Logo, LongArrowUpLeftSolid, NavArrowDown, NavArrowLeft, NavArrowRight, RHFAutocomplete, type RHFAutocompleteProps, RHFCheckbox, type RHFCheckboxProps, RHFMultiCheckbox, type RHFMultiCheckboxOption, type RHFMultiCheckboxProps, RHFMultiSwitch, RHFRadioGroup, type RHFRadioGroupProps, RHFSwitch, RHFTextField, RHFUpload, type RHFUploadProps, RadioDefault, RadioSelect, type RadiusOptions, STORAGE_KEY, Search, SettingsConsumer, SettingsContext, type SettingsContextProps, SettingsProvider, type SettingsValueProps, SplashScreen, Table, type TableNoRowsProps, TablePagination, ThemeProvider, Trash, Upload, type UploadProps, type UseBooleanReturnType, UserFill, UserOutline, XMark, XMarkSolid, action, background, baseAction, basePalette, bgBlur, bgGradient, border, borderGradient, breakpoints, colorSchemes, common, components, createPaletteChannel, createShadowColor, createTheme, customShadows, customSpacing, darkPalette, defaultSettings, error, fCurrency, fData, fNumber, fPercent, fShortenNumber, getCurrencySymbol, getInitColorSchemeScript, getStorage, grey, hexToRgbChannel, hideScrollX, hideScrollY, icon, iconClasses, info, isEqual, lightPalette, maxLine, mediaQueries, menuItem, neutral, orderBy, paper, paramCase, primary, primaryFont, pxToRem, radius, remToPx, removeStorage, responsiveFontSizes, schemeConfig, secondary, secondaryFont, sentenceCase, setFont, setStorage, shadows, snakeCase, stylesMode, success, surface, tertiaryFont, text, textGradient, typography, updateComponentsWithSettings, updateCoreWithSettings, useBoolean, useCopyToClipboard, useEventListener, useLocalStorage, useResponsive, useSettings, useWidth, varAlpha, warning };
+export { AnimatedLogo, CheckboxDefault, CheckboxIndeterminate, CheckboxSelect, ClipboardCheck, CloudUpload, type ColorSchema, Copy, CopyButton, type CustomShadowOptions, type CustomSpacingOptions, Eye, EyeClosed, Field, Form, Icon, type IconProps, type IconType, InfoCircleFill, InfoCircleOutline, Loader, LoadingScreen, LocalStorageAvailable, LocalStorageGetItem, Logo, LongArrowUpLeftSolid, NavArrowDown, NavArrowLeft, NavArrowRight, RHFAutocomplete, type RHFAutocompleteProps, RHFCheckbox, type RHFCheckboxProps, RHFMultiCheckbox, type RHFMultiCheckboxOption, type RHFMultiCheckboxProps, RHFMultiSwitch, RHFRadioGroup, type RHFRadioGroupProps, RHFSwitch, RHFTextField, RHFUpload, type RHFUploadProps, RadioDefault, RadioSelect, type RadiusOptions, STORAGE_KEY, Search, SettingsConsumer, SettingsContext, type SettingsContextProps, SettingsProvider, type SettingsValueProps, SplashScreen, Table, type TableNoRowsProps, TablePagination, ThemeProvider, Trash, Upload, type UploadProps, type UseBooleanReturnType, type UseSetStateReturnType, UserFill, UserOutline, XMark, XMarkSolid, action, background, baseAction, basePalette, bgBlur, bgGradient, border, borderGradient, breakpoints, colorSchemes, common, components, createPaletteChannel, createShadowColor, createTheme, customShadows, customSpacing, darkPalette, defaultSettings, error, fCurrency, fData, fNumber, fPercent, fShortenNumber, getCurrencySymbol, getInitColorSchemeScript, getStorage, grey, hexToRgbChannel, hideScrollX, hideScrollY, icon, iconClasses, info, isEqual, lightPalette, maxLine, mediaQueries, menuItem, neutral, orderBy, paper, paramCase, primary, primaryFont, pxToRem, radius, remToPx, removeStorage, responsiveFontSizes, schemeConfig, secondary, secondaryFont, sentenceCase, setFont, setStorage, shadows, snakeCase, stylesMode, success, surface, tertiaryFont, text, textGradient, typography, updateComponentsWithSettings, updateCoreWithSettings, useBoolean, useCopyToClipboard, useEventListener, useLocalStorage, useResponsive, useScrollOffSetTop, useSetState, useSettings, useWidth, varAlpha, warning };

package/dist/index.js

@@ -554,13 +554,43 @@ var useSettings = () => {
   return context;
 };
 
+// src/hooks/useSetState.ts
+import { useMemo as useMemo4, useState as useState4, useCallback as useCallback4 } from "react";
+var useSetState = (initialState) => {
+  const [state, set] = useState4(initialState);
+  const canReset = !isEqual(state, initialState);
+  const setState = useCallback4((updateState) => {
+    set((prevValue) => ({ ...prevValue, ...updateState }));
+  }, []);
+  const setField = useCallback4(
+    (name, updateValue) => {
+      setState({ [name]: updateValue });
+    },
+    [setState]
+  );
+  const onResetState = useCallback4(() => {
+    set(initialState);
+  }, [initialState]);
+  const memoizedValue = useMemo4(
+    () => ({
+      state,
+      setState,
+      setField,
+      onResetState,
+      canReset
+    }),
+    [canReset, onResetState, setField, setState, state]
+  );
+  return memoizedValue;
+};
+
 // src/hooks/useResponsive.ts
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useTheme } from "@mui/material/styles";
 var useResponsive = (query, start, end) => {
   const theme = useTheme();
-  const getQuery = useMemo4(() => {
+  const getQuery = useMemo5(() => {
     switch (query) {
       case "up":
         return theme.breakpoints.up(start);
@@ -579,7 +609,7 @@ var useResponsive = (query, start, end) => {
 };
 var useWidth = () => {
   const theme = useTheme();
-  const keys = useMemo4(() => [...theme.breakpoints.keys].reverse(), [theme]);
+  const keys = useMemo5(() => [...theme.breakpoints.keys].reverse(), [theme]);
   const width = keys.reduce((output, key) => {
     const matches = useMediaQuery(theme.breakpoints.up(key));
     return !output && matches ? key : output;
@@ -614,11 +644,11 @@ var useEventListener = ({
 };
 
 // src/hooks/useCopyToClipboard.ts
-import { useMemo as useMemo5, useState as useState4, useCallback as useCallback4 } from "react";
+import { useMemo as useMemo6, useState as useState5, useCallback as useCallback5 } from "react";
 var useCopyToClipboard = () => {
-  const [copiedText, setCopiedText] = useState4("");
-  const [isCopied, setIsCopied] = useState4(false);
-  const copy = useCallback4(
+  const [copiedText, setCopiedText] = useState5("");
+  const [isCopied, setIsCopied] = useState5(false);
+  const copy = useCallback5(
     async (text2) => {
       if (!navigator?.clipboard) {
         console.warn("Clipboard not supported");
@@ -638,13 +668,39 @@ var useCopyToClipboard = () => {
     },
     [setCopiedText]
   );
-  const memoizedValue = useMemo5(
+  const memoizedValue = useMemo6(
     () => ({ copy, copiedText, isCopied }),
     [copy, copiedText, isCopied]
   );
   return memoizedValue;
 };
 
+// src/hooks/useScrollOffsetTop.ts
+import { useRef as useRef2, useMemo as useMemo7, useState as useState6, useEffect as useEffect3, useCallback as useCallback6 } from "react";
+var useScrollOffSetTop = (top = 0) => {
+  const elementRef = useRef2(null);
+  const [offsetTop, setOffsetTop] = useState6(false);
+  const handleScrollChange = useCallback6(() => {
+    const scrollHeight = Math.round(window.scrollY);
+    if (elementRef?.current) {
+      const rect = elementRef.current.getBoundingClientRect();
+      const elementTop = Math.round(rect.top);
+      setOffsetTop(elementTop < top);
+    } else {
+      setOffsetTop(scrollHeight > top);
+    }
+  }, [top]);
+  useEffect3(() => {
+    handleScrollChange();
+    window.addEventListener("scroll", handleScrollChange, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", handleScrollChange);
+    };
+  }, [handleScrollChange]);
+  const memoizedValue = useMemo7(() => ({ elementRef, offsetTop }), [offsetTop]);
+  return memoizedValue;
+};
+
 // src/theme/core/radius.ts
 function radius(baseRadius) {
   return {
@@ -5927,7 +5983,7 @@ var UploadProgress = ({ progress: progress2 = 20 }) => {
 };
 
 // src/components/Upload/components/MultiFilePreview.tsx
-import { useRef as useRef2 } from "react";
+import { useRef as useRef3 } from "react";
 import Box9 from "@mui/material/Box";
 import IconButton2 from "@mui/material/IconButton";
 
@@ -5995,7 +6051,7 @@ var DeleteButton = ({ sx, ...rest }) => {
 // src/components/Upload/components/MultiFilePreview.tsx
 import { jsx as jsx45, jsxs as jsxs24 } from "react/jsx-runtime";
 var MultiFilePreview = ({ files, onRemove }) => {
-  const scrollRef = useRef2(null);
+  const scrollRef = useRef3(null);
   const handleScroll = (direction) => {
     if (scrollRef.current) {
       const scrollAmount = 300;
@@ -6967,6 +7023,8 @@ export {
   useEventListener,
   useLocalStorage,
   useResponsive,
+  useScrollOffSetTop,
+  useSetState,
   useSettings,
   useWidth,
   varAlpha,