@undefine-ui/design-system 2.5.0 → 2.7.0

package/dist/index.d.cts

@@ -1,6 +1,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { SetStateAction, ElementType } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Breakpoint, Shadows, Components, Theme, SxProps as SxProps$1 } from '@mui/material/styles';
 import * as _mui_material from '@mui/material';
 import { SxProps, Theme as Theme$1 } from '@mui/material';
@@ -82,6 +82,13 @@ declare const fShortenNumber: (inputValue: unknown, locale?: string, options?: F
  */
 declare const fData: (inputValue: unknown) => string;
 
+declare const getInitials: (name: string) => string;
+declare const splitFullname: (name: string) => {
+    firstname: string;
+    lastname: string;
+};
+declare const formatFullname: (firstname: string, lastname: string) => string;
+
 interface UseBooleanReturnType {
     value: boolean;
     onTrue: () => void;
@@ -108,6 +115,50 @@ interface UseBooleanReturnType {
  */
 declare const useBoolean: (defaultValue?: boolean) => UseBooleanReturnType;
 
+/**
+ * A custom hook for managing popover state and interactions.
+ *
+ * Provides utilities to control the open/close state of a popover component,
+ * track the anchor element, and handle user interactions.
+ *
+ * @returns An object containing:
+ * - `open` (boolean): Whether the popover is currently open
+ * - `anchorEl` (HTMLElement | null): The element the popover is anchored to
+ * - `onOpen` (function): Handler to open the popover on a mouse event
+ * - `onClose` (function): Handler to close the popover
+ * - `setAnchorEl` (function): Direct setter for the anchor element
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const popover = usePopover();
+ *
+ *   return (
+ *     <>
+ *       <Button onClick={popover.onOpen}>
+ *         Open Menu
+ *       </Button>
+ *       <Popover
+ *         open={popover.open}
+ *         anchorEl={popover.anchorEl}
+ *         onClose={popover.onClose}
+ *       >
+ *         <MenuItem onClick={popover.onClose}>Option 1</MenuItem>
+ *         <MenuItem onClick={popover.onClose}>Option 2</MenuItem>
+ *       </Popover>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare const usePopover: () => {
+    open: boolean;
+    anchorEl: HTMLElement | null;
+    onOpen: (event: React.MouseEvent<HTMLElement>) => void;
+    onClose: () => void;
+    setAnchorEl: react.Dispatch<react.SetStateAction<HTMLElement | null>>;
+};
+
 declare const STORAGE_KEY = "app-settings";
 type SettingsValueProps = {
     colorScheme: 'light' | 'dark';
@@ -1752,4 +1803,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, BellNotification, CheckboxDefault, CheckboxIndeterminate, CheckboxSelect, ClipboardCheck, CloudUpload, type ColorSchema, Copy, CopyButton, type CustomShadowOptions, type CustomSpacingOptions, Eye, EyeClosed, Field, Form, Icon, type IconProps, type IconType, InfoCircleFill, InfoCircleOutline, KeyCommand, 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, Settings, 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 };
+export { AnimatedLogo, BellNotification, CheckboxDefault, CheckboxIndeterminate, CheckboxSelect, ClipboardCheck, CloudUpload, type ColorSchema, Copy, CopyButton, type CustomShadowOptions, type CustomSpacingOptions, Eye, EyeClosed, Field, Form, Icon, type IconProps, type IconType, InfoCircleFill, InfoCircleOutline, KeyCommand, 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, Settings, 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, formatFullname, getCurrencySymbol, getInitColorSchemeScript, getInitials, 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, splitFullname, stylesMode, success, surface, tertiaryFont, text, textGradient, typography, updateComponentsWithSettings, updateCoreWithSettings, useBoolean, useCopyToClipboard, useEventListener, useLocalStorage, usePopover, useResponsive, useScrollOffSetTop, useSetState, useSettings, useWidth, varAlpha, warning };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { SetStateAction, ElementType } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Breakpoint, Shadows, Components, Theme, SxProps as SxProps$1 } from '@mui/material/styles';
 import * as _mui_material from '@mui/material';
 import { SxProps, Theme as Theme$1 } from '@mui/material';
@@ -82,6 +82,13 @@ declare const fShortenNumber: (inputValue: unknown, locale?: string, options?: F
  */
 declare const fData: (inputValue: unknown) => string;
 
+declare const getInitials: (name: string) => string;
+declare const splitFullname: (name: string) => {
+    firstname: string;
+    lastname: string;
+};
+declare const formatFullname: (firstname: string, lastname: string) => string;
+
 interface UseBooleanReturnType {
     value: boolean;
     onTrue: () => void;
@@ -108,6 +115,50 @@ interface UseBooleanReturnType {
  */
 declare const useBoolean: (defaultValue?: boolean) => UseBooleanReturnType;
 
+/**
+ * A custom hook for managing popover state and interactions.
+ *
+ * Provides utilities to control the open/close state of a popover component,
+ * track the anchor element, and handle user interactions.
+ *
+ * @returns An object containing:
+ * - `open` (boolean): Whether the popover is currently open
+ * - `anchorEl` (HTMLElement | null): The element the popover is anchored to
+ * - `onOpen` (function): Handler to open the popover on a mouse event
+ * - `onClose` (function): Handler to close the popover
+ * - `setAnchorEl` (function): Direct setter for the anchor element
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const popover = usePopover();
+ *
+ *   return (
+ *     <>
+ *       <Button onClick={popover.onOpen}>
+ *         Open Menu
+ *       </Button>
+ *       <Popover
+ *         open={popover.open}
+ *         anchorEl={popover.anchorEl}
+ *         onClose={popover.onClose}
+ *       >
+ *         <MenuItem onClick={popover.onClose}>Option 1</MenuItem>
+ *         <MenuItem onClick={popover.onClose}>Option 2</MenuItem>
+ *       </Popover>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare const usePopover: () => {
+    open: boolean;
+    anchorEl: HTMLElement | null;
+    onOpen: (event: React.MouseEvent<HTMLElement>) => void;
+    onClose: () => void;
+    setAnchorEl: react.Dispatch<react.SetStateAction<HTMLElement | null>>;
+};
+
 declare const STORAGE_KEY = "app-settings";
 type SettingsValueProps = {
     colorScheme: 'light' | 'dark';
@@ -1752,4 +1803,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, BellNotification, CheckboxDefault, CheckboxIndeterminate, CheckboxSelect, ClipboardCheck, CloudUpload, type ColorSchema, Copy, CopyButton, type CustomShadowOptions, type CustomSpacingOptions, Eye, EyeClosed, Field, Form, Icon, type IconProps, type IconType, InfoCircleFill, InfoCircleOutline, KeyCommand, 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, Settings, 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 };
+export { AnimatedLogo, BellNotification, CheckboxDefault, CheckboxIndeterminate, CheckboxSelect, ClipboardCheck, CloudUpload, type ColorSchema, Copy, CopyButton, type CustomShadowOptions, type CustomSpacingOptions, Eye, EyeClosed, Field, Form, Icon, type IconProps, type IconType, InfoCircleFill, InfoCircleOutline, KeyCommand, 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, Settings, 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, formatFullname, getCurrencySymbol, getInitColorSchemeScript, getInitials, 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, splitFullname, stylesMode, success, surface, tertiaryFont, text, textGradient, typography, updateComponentsWithSettings, updateCoreWithSettings, useBoolean, useCopyToClipboard, useEventListener, useLocalStorage, usePopover, useResponsive, useScrollOffSetTop, useSetState, useSettings, useWidth, varAlpha, warning };

package/dist/index.js

@@ -133,6 +133,25 @@ var fData = (inputValue) => {
   return fm;
 };
 
+// src/libs/fullname-utils.ts
+var getInitials = (name) => {
+  const names = name?.split(" ");
+  const initials = names?.map((n) => n.charAt(0)?.toUpperCase())?.join("");
+  return initials;
+};
+var splitFullname = (name) => {
+  if (!name) {
+    return { firstname: "", lastname: "" };
+  }
+  const names = name.split(" ");
+  const firstname = names[0];
+  const lastname = names[names.length - 1];
+  return { firstname, lastname };
+};
+var formatFullname = (firstname, lastname) => {
+  return `${firstname} ${lastname}`;
+};
+
 // src/hooks/useBoolean.ts
 import { useMemo, useState, useCallback } from "react";
 var useBoolean = (defaultValue) => {
@@ -159,6 +178,25 @@ var useBoolean = (defaultValue) => {
   return memoizedValue;
 };
 
+// src/hooks/usePopover.ts
+import { useState as useState2, useCallback as useCallback2 } from "react";
+var usePopover = () => {
+  const [anchorEl, setAnchorEl] = useState2(null);
+  const onOpen = useCallback2((event) => {
+    setAnchorEl(event.currentTarget);
+  }, []);
+  const onClose = useCallback2(() => {
+    setAnchorEl(null);
+  }, []);
+  return {
+    open: !!anchorEl,
+    anchorEl,
+    onOpen,
+    onClose,
+    setAnchorEl
+  };
+};
+
 // src/hooks/useSettings.ts
 import { useContext } from "react";
 
@@ -406,12 +444,12 @@ var defaultSettings = {
 };
 
 // src/contexts/settings/context.tsx
-import { useMemo as useMemo3, useState as useState3, useCallback as useCallback3, createContext } from "react";
+import { useMemo as useMemo3, useState as useState4, useCallback as useCallback4, createContext } from "react";
 
 // src/hooks/useLocalStorage.ts
-import { useMemo as useMemo2, useState as useState2, useEffect, useCallback as useCallback2 } from "react";
+import { useMemo as useMemo2, useState as useState3, useEffect, useCallback as useCallback3 } from "react";
 var useLocalStorage = (key, initialState) => {
-  const [state, set] = useState2(initialState);
+  const [state, set] = useState3(initialState);
   const multiValue = initialState && typeof initialState === "object";
   const canReset = !isEqual(state, initialState);
   useEffect(() => {
@@ -424,7 +462,7 @@ var useLocalStorage = (key, initialState) => {
       }
     }
   }, [key, multiValue]);
-  const setState = useCallback2(
+  const setState = useCallback3(
     (updateState) => {
       if (multiValue) {
         set((prevValue) => {
@@ -438,7 +476,7 @@ var useLocalStorage = (key, initialState) => {
     },
     [key, multiValue]
   );
-  const setField = useCallback2(
+  const setField = useCallback3(
     (name, updateValue) => {
       if (multiValue) {
         setState({ [name]: updateValue });
@@ -446,7 +484,7 @@ var useLocalStorage = (key, initialState) => {
     },
     [multiValue, setState]
   );
-  const resetState = useCallback2(() => {
+  const resetState = useCallback3(() => {
     set(initialState);
     removeStorage(key);
   }, [initialState, key]);
@@ -515,11 +553,11 @@ var SettingsConsumer = SettingsContext.Consumer;
 var SettingsProvider = ({ children, settings }) => {
   const localStorage2 = useLocalStorage(STORAGE_KEY, settings);
   const values = localStorage2;
-  const [openDrawer, setOpenDrawer] = useState3(false);
-  const onToggleDrawer = useCallback3(() => {
+  const [openDrawer, setOpenDrawer] = useState4(false);
+  const onToggleDrawer = useCallback4(() => {
     setOpenDrawer((prev) => !prev);
   }, []);
-  const onCloseDrawer = useCallback3(() => {
+  const onCloseDrawer = useCallback4(() => {
     setOpenDrawer(false);
   }, []);
   const memoizedValue = useMemo3(
@@ -555,20 +593,20 @@ var useSettings = () => {
 };
 
 // src/hooks/useSetState.ts
-import { useMemo as useMemo4, useState as useState4, useCallback as useCallback4 } from "react";
+import { useMemo as useMemo4, useState as useState5, useCallback as useCallback5 } from "react";
 var useSetState = (initialState) => {
-  const [state, set] = useState4(initialState);
+  const [state, set] = useState5(initialState);
   const canReset = !isEqual(state, initialState);
-  const setState = useCallback4((updateState) => {
+  const setState = useCallback5((updateState) => {
     set((prevValue) => ({ ...prevValue, ...updateState }));
   }, []);
-  const setField = useCallback4(
+  const setField = useCallback5(
     (name, updateValue) => {
       setState({ [name]: updateValue });
     },
     [setState]
   );
-  const onResetState = useCallback4(() => {
+  const onResetState = useCallback5(() => {
     set(initialState);
   }, [initialState]);
   const memoizedValue = useMemo4(
@@ -644,11 +682,11 @@ var useEventListener = ({
 };
 
 // src/hooks/useCopyToClipboard.ts
-import { useMemo as useMemo6, useState as useState5, useCallback as useCallback5 } from "react";
+import { useMemo as useMemo6, useState as useState6, useCallback as useCallback6 } from "react";
 var useCopyToClipboard = () => {
-  const [copiedText, setCopiedText] = useState5("");
-  const [isCopied, setIsCopied] = useState5(false);
-  const copy = useCallback5(
+  const [copiedText, setCopiedText] = useState6("");
+  const [isCopied, setIsCopied] = useState6(false);
+  const copy = useCallback6(
     async (text2) => {
       if (!navigator?.clipboard) {
         console.warn("Clipboard not supported");
@@ -676,11 +714,11 @@ var useCopyToClipboard = () => {
 };
 
 // src/hooks/useScrollOffsetTop.ts
-import { useRef as useRef2, useMemo as useMemo7, useState as useState6, useEffect as useEffect3, useCallback as useCallback6 } from "react";
+import { useRef as useRef2, useMemo as useMemo7, useState as useState7, useEffect as useEffect3, useCallback as useCallback7 } from "react";
 var useScrollOffSetTop = (top = 0) => {
   const elementRef = useRef2(null);
-  const [offsetTop, setOffsetTop] = useState6(false);
-  const handleScrollChange = useCallback6(() => {
+  const [offsetTop, setOffsetTop] = useState7(false);
+  const handleScrollChange = useCallback7(() => {
     const scrollHeight = Math.round(window.scrollY);
     if (elementRef?.current) {
       const rect = elementRef.current.getBoundingClientRect();
@@ -7127,8 +7165,10 @@ export {
   fNumber,
   fPercent,
   fShortenNumber,
+  formatFullname,
   getCurrencySymbol,
   getInitColorSchemeScript,
+  getInitials,
   getStorage,
   grey,
   hexToRgbChannel,
@@ -7161,6 +7201,7 @@ export {
   setStorage,
   shadows,
   snakeCase,
+  splitFullname,
   stylesMode,
   success,
   surface,
@@ -7174,6 +7215,7 @@ export {
   useCopyToClipboard,
   useEventListener,
   useLocalStorage,
+  usePopover,
   useResponsive,
   useScrollOffSetTop,
   useSetState,