@undefine-ui/design-system 2.10.1 → 2.12.0

package/dist/index.d.cts

@@ -18,8 +18,8 @@ import { FormHelperTextProps } from '@mui/material/FormHelperText';
 import { FormControlLabelProps } from '@mui/material/FormControlLabel';
 import { RadioProps } from '@mui/material/Radio';
 import { RadioGroupProps } from '@mui/material/RadioGroup';
-import { SwitchProps } from '@mui/material/Switch';
 import { TextFieldProps } from '@mui/material/TextField';
+import { SwitchProps } from '@mui/material/Switch';
 
 declare const isEqual: (a: any, b: any) => boolean;
 declare const orderBy: <T>(array: T[], properties: (keyof T)[], orders?: ("asc" | "desc")[]) => T[];
@@ -234,6 +234,115 @@ type UseSetStateReturnType<T> = {
  */
 declare const useSetState: <T extends Record<string, any>>(initialState: T) => UseSetStateReturnType<T>;
 
+interface CountdownState {
+    days: string;
+    hours: string;
+    minutes: string;
+    seconds: string;
+}
+/**
+ * A custom hook for creating a countdown timer to a specific date/time.
+ *
+ * Calculates and returns the time remaining until a target date, automatically
+ * updating every second. Returns zero values when the target time is reached.
+ *
+ * @param date - The target date/time as a Date object, ISO string, or Unix timestamp
+ *
+ * @returns An object containing:
+ * - `days` (string): Days remaining, zero-padded (e.g., "00", "05", "12")
+ * - `hours` (string): Hours remaining, zero-padded (e.g., "00", "23")
+ * - `minutes` (string): Minutes remaining, zero-padded (e.g., "00", "59")
+ * - `seconds` (string): Seconds remaining, zero-padded (e.g., "00", "59")
+ *
+ * @example
+ * ```tsx
+ * function EventCountdown() {
+ *   const countdown = useCountdownDate(new Date('2025-12-31T23:59:59'));
+ *
+ *   return (
+ *     <div>
+ *       <h2>Time Until New Year:</h2>
+ *       <p>
+ *         {countdown.days} days, {countdown.hours} hours,
+ *         {countdown.minutes} minutes, {countdown.seconds} seconds
+ *       </p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Using Unix timestamp
+ * const countdown = useCountdownDate(1735689599000);
+ *
+ * // Using ISO string
+ * const countdown = useCountdownDate('2025-12-31T23:59:59Z');
+ * ```
+ */
+declare const useCountdownDate: (date: Date | string | number) => CountdownState;
+interface UseCountdownSecondsReturn {
+    counting: boolean;
+    countdown: number;
+    startCountdown: () => void;
+    setCountdown: React.Dispatch<React.SetStateAction<number>>;
+}
+/**
+ * A custom hook for creating a countdown timer that counts down from a specified number of seconds.
+ *
+ * Provides manual control to start the countdown and tracks whether counting is in progress.
+ * Automatically cleans up intervals on unmount.
+ *
+ * @param initCountdown - Initial number of seconds for the countdown
+ *
+ * @returns An object containing:
+ * - `counting` (boolean): Whether countdown is actively running (between 0 and initCountdown)
+ * - `countdown` (number): Current countdown value in seconds
+ * - `startCountdown` (function): Function to start or restart the countdown
+ * - `setCountdown` (function): Direct setter for the countdown value
+ *
+ * @example
+ * ```tsx
+ * function OTPTimer() {
+ *   const { countdown, counting, startCountdown } = useCountdownSeconds(60);
+ *
+ *   return (
+ *     <div>
+ *       <p>Resend code in: {countdown}s</p>
+ *       <button onClick={startCountdown} disabled={counting}>
+ *         {counting ? 'Waiting...' : 'Resend Code'}
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * function SessionTimer() {
+ *   const { countdown, counting, startCountdown, setCountdown } = useCountdownSeconds(300);
+ *
+ *   useEffect(() => {
+ *     // Start countdown when component mounts
+ *     startCountdown();
+ *   }, [startCountdown]);
+ *
+ *   const extendSession = () => {
+ *     // Add 60 more seconds
+ *     setCountdown((prev) => prev + 60);
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <p>Session expires in: {Math.floor(countdown / 60)}:{countdown % 60}</p>
+ *       <button onClick={extendSession}>Extend Session</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare const useCountdownSeconds: (initCountdown: number) => UseCountdownSecondsReturn;
+
 type ReturnType = boolean;
 type Query = 'up' | 'down' | 'between' | 'only';
 type Value = Breakpoint | number;
@@ -1740,7 +1849,21 @@ interface RHFUploadProps extends Omit<UploadProps, 'value'> {
 }
 declare const RHFUpload: ({ name, multiple, helperText, ...rest }: RHFUploadProps) => react_jsx_runtime.JSX.Element;
 
+interface OTPInputProps extends Omit<TextFieldProps, 'onChange'> {
+    length?: number;
+    onChange?: (otp: string) => void;
+    onComplete?: (otp: string) => void;
+    containerProps?: BoxProps;
+}
+declare const OTPInput: (props: OTPInputProps) => react_jsx_runtime.JSX.Element;
+
+interface RHFOTPInputProps extends Omit<OTPInputProps, 'name'> {
+    name: string;
+}
+declare const RHFOTPInput: ({ name, length, helperText, ...rest }: RHFOTPInputProps) => react_jsx_runtime.JSX.Element;
+
 declare const Field: {
+    OTP: ({ name, length, helperText, ...rest }: RHFOTPInputProps) => react_jsx_runtime.JSX.Element;
     Switch: ({ name, description, helperText, label, sx, slotProps, ...other }: Omit<_mui_material.FormControlLabelProps, "name" | "control"> & {
         name: string;
         description?: string;
@@ -1803,4 +1926,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, 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 };
+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, OTPInput, type OTPInputProps, RHFAutocomplete, type RHFAutocompleteProps, RHFCheckbox, type RHFCheckboxProps, RHFMultiCheckbox, type RHFMultiCheckboxOption, type RHFMultiCheckboxProps, RHFMultiSwitch, RHFOTPInput, type RHFOTPInputProps, 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, useCountdownDate, useCountdownSeconds, useEventListener, useLocalStorage, usePopover, useResponsive, useScrollOffSetTop, useSetState, useSettings, useWidth, varAlpha, warning };

package/dist/index.d.ts

@@ -18,8 +18,8 @@ import { FormHelperTextProps } from '@mui/material/FormHelperText';
 import { FormControlLabelProps } from '@mui/material/FormControlLabel';
 import { RadioProps } from '@mui/material/Radio';
 import { RadioGroupProps } from '@mui/material/RadioGroup';
-import { SwitchProps } from '@mui/material/Switch';
 import { TextFieldProps } from '@mui/material/TextField';
+import { SwitchProps } from '@mui/material/Switch';
 
 declare const isEqual: (a: any, b: any) => boolean;
 declare const orderBy: <T>(array: T[], properties: (keyof T)[], orders?: ("asc" | "desc")[]) => T[];
@@ -234,6 +234,115 @@ type UseSetStateReturnType<T> = {
  */
 declare const useSetState: <T extends Record<string, any>>(initialState: T) => UseSetStateReturnType<T>;
 
+interface CountdownState {
+    days: string;
+    hours: string;
+    minutes: string;
+    seconds: string;
+}
+/**
+ * A custom hook for creating a countdown timer to a specific date/time.
+ *
+ * Calculates and returns the time remaining until a target date, automatically
+ * updating every second. Returns zero values when the target time is reached.
+ *
+ * @param date - The target date/time as a Date object, ISO string, or Unix timestamp
+ *
+ * @returns An object containing:
+ * - `days` (string): Days remaining, zero-padded (e.g., "00", "05", "12")
+ * - `hours` (string): Hours remaining, zero-padded (e.g., "00", "23")
+ * - `minutes` (string): Minutes remaining, zero-padded (e.g., "00", "59")
+ * - `seconds` (string): Seconds remaining, zero-padded (e.g., "00", "59")
+ *
+ * @example
+ * ```tsx
+ * function EventCountdown() {
+ *   const countdown = useCountdownDate(new Date('2025-12-31T23:59:59'));
+ *
+ *   return (
+ *     <div>
+ *       <h2>Time Until New Year:</h2>
+ *       <p>
+ *         {countdown.days} days, {countdown.hours} hours,
+ *         {countdown.minutes} minutes, {countdown.seconds} seconds
+ *       </p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Using Unix timestamp
+ * const countdown = useCountdownDate(1735689599000);
+ *
+ * // Using ISO string
+ * const countdown = useCountdownDate('2025-12-31T23:59:59Z');
+ * ```
+ */
+declare const useCountdownDate: (date: Date | string | number) => CountdownState;
+interface UseCountdownSecondsReturn {
+    counting: boolean;
+    countdown: number;
+    startCountdown: () => void;
+    setCountdown: React.Dispatch<React.SetStateAction<number>>;
+}
+/**
+ * A custom hook for creating a countdown timer that counts down from a specified number of seconds.
+ *
+ * Provides manual control to start the countdown and tracks whether counting is in progress.
+ * Automatically cleans up intervals on unmount.
+ *
+ * @param initCountdown - Initial number of seconds for the countdown
+ *
+ * @returns An object containing:
+ * - `counting` (boolean): Whether countdown is actively running (between 0 and initCountdown)
+ * - `countdown` (number): Current countdown value in seconds
+ * - `startCountdown` (function): Function to start or restart the countdown
+ * - `setCountdown` (function): Direct setter for the countdown value
+ *
+ * @example
+ * ```tsx
+ * function OTPTimer() {
+ *   const { countdown, counting, startCountdown } = useCountdownSeconds(60);
+ *
+ *   return (
+ *     <div>
+ *       <p>Resend code in: {countdown}s</p>
+ *       <button onClick={startCountdown} disabled={counting}>
+ *         {counting ? 'Waiting...' : 'Resend Code'}
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * function SessionTimer() {
+ *   const { countdown, counting, startCountdown, setCountdown } = useCountdownSeconds(300);
+ *
+ *   useEffect(() => {
+ *     // Start countdown when component mounts
+ *     startCountdown();
+ *   }, [startCountdown]);
+ *
+ *   const extendSession = () => {
+ *     // Add 60 more seconds
+ *     setCountdown((prev) => prev + 60);
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <p>Session expires in: {Math.floor(countdown / 60)}:{countdown % 60}</p>
+ *       <button onClick={extendSession}>Extend Session</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare const useCountdownSeconds: (initCountdown: number) => UseCountdownSecondsReturn;
+
 type ReturnType = boolean;
 type Query = 'up' | 'down' | 'between' | 'only';
 type Value = Breakpoint | number;
@@ -1740,7 +1849,21 @@ interface RHFUploadProps extends Omit<UploadProps, 'value'> {
 }
 declare const RHFUpload: ({ name, multiple, helperText, ...rest }: RHFUploadProps) => react_jsx_runtime.JSX.Element;
 
+interface OTPInputProps extends Omit<TextFieldProps, 'onChange'> {
+    length?: number;
+    onChange?: (otp: string) => void;
+    onComplete?: (otp: string) => void;
+    containerProps?: BoxProps;
+}
+declare const OTPInput: (props: OTPInputProps) => react_jsx_runtime.JSX.Element;
+
+interface RHFOTPInputProps extends Omit<OTPInputProps, 'name'> {
+    name: string;
+}
+declare const RHFOTPInput: ({ name, length, helperText, ...rest }: RHFOTPInputProps) => react_jsx_runtime.JSX.Element;
+
 declare const Field: {
+    OTP: ({ name, length, helperText, ...rest }: RHFOTPInputProps) => react_jsx_runtime.JSX.Element;
     Switch: ({ name, description, helperText, label, sx, slotProps, ...other }: Omit<_mui_material.FormControlLabelProps, "name" | "control"> & {
         name: string;
         description?: string;
@@ -1803,4 +1926,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, 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 };
+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, OTPInput, type OTPInputProps, RHFAutocomplete, type RHFAutocompleteProps, RHFCheckbox, type RHFCheckboxProps, RHFMultiCheckbox, type RHFMultiCheckboxOption, type RHFMultiCheckboxProps, RHFMultiSwitch, RHFOTPInput, type RHFOTPInputProps, 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, useCountdownDate, useCountdownSeconds, useEventListener, useLocalStorage, usePopover, useResponsive, useScrollOffSetTop, useSetState, useSettings, useWidth, varAlpha, warning };