@undefine-ui/design-system 2.3.0 → 2.4.0

package/dist/index.d.cts

@@ -154,6 +154,35 @@ declare const SettingsProvider: ({ children, settings }: SettingsProviderProps)
  */
 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;
@@ -294,6 +323,27 @@ declare const useCopyToClipboard: () => {
     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;
@@ -1693,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

@@ -154,6 +154,35 @@ declare const SettingsProvider: ({ children, settings }: SettingsProviderProps)
  */
 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;
@@ -294,6 +323,27 @@ declare const useCopyToClipboard: () => {
     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;
@@ -1693,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,