@undefine-ui/design-system 2.1.0 → 2.3.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,73 @@ 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 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 +209,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,8 +252,42 @@ 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;
@@ -1395,6 +1536,7 @@ interface LogoProps extends BoxProps {
     alt?: string;
 }
 declare const Logo: ({ sx, isFull, isWhite, isBlack, disableLink, LinkComponent, href, src, alt, ...rest }: LogoProps) => react_jsx_runtime.JSX.Element;
+declare const AnimatedLogo: () => react_jsx_runtime.JSX.Element;
 
 interface UploadProps extends DropzoneOptions {
     error?: boolean;
@@ -1549,5 +1691,6 @@ interface LoadingScreenProps extends BoxProps {
     portal?: boolean;
 }
 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 { 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, 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, 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 };

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,73 @@ 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 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 +209,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,8 +252,42 @@ 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;
@@ -1395,6 +1536,7 @@ interface LogoProps extends BoxProps {
     alt?: string;
 }
 declare const Logo: ({ sx, isFull, isWhite, isBlack, disableLink, LinkComponent, href, src, alt, ...rest }: LogoProps) => react_jsx_runtime.JSX.Element;
+declare const AnimatedLogo: () => react_jsx_runtime.JSX.Element;
 
 interface UploadProps extends DropzoneOptions {
     error?: boolean;
@@ -1549,5 +1691,6 @@ interface LoadingScreenProps extends BoxProps {
     portal?: boolean;
 }
 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 { 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, 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, 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 };