@undefine-ui/design-system 2.12.0 → 2.14.0

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import * as react from 'react';
-import { SetStateAction, ElementType } from 'react';
+import { SetStateAction, ElementType, CSSProperties, ReactNode, SyntheticEvent } 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 { Breakpoint, Shadows, Components, Theme, CssVarsTheme, SxProps as SxProps$1 } from '@mui/material/styles';
 import * as _mui_material from '@mui/material';
 import { SxProps, Theme as Theme$1 } from '@mui/material';
 import { BoxProps } from '@mui/material/Box';
@@ -1285,11 +1285,13 @@ declare module '@mui/material/styles' {
         customShadows: CustomShadowOptions;
         radius: RadiusOptions;
         customSpacing: CustomSpacingOptions;
+        vars: NonNullable<CssVarsTheme['vars']>;
     }
     interface ThemeOptions {
         customShadows?: CustomShadowOptions;
         radius?: RadiusOptions;
         customSpacing?: CustomSpacingOptions;
+        vars?: CssVarsTheme['vars'];
     }
     interface TypographyVariants {
         fontSecondaryFamily: React.CSSProperties['fontFamily'];
@@ -1637,7 +1639,6 @@ declare const schemeConfig: {
     modeStorageKey: string;
     defaultMode: "light" | "dark";
 };
-declare const getInitColorSchemeScript: react_jsx_runtime.JSX.Element;
 
 /**
  * [1] settings @primaryColor
@@ -1757,6 +1758,77 @@ interface LogoProps extends BoxProps {
 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;
 
+type ImageStatus = 'idle' | 'loading' | 'loaded' | 'error';
+interface ImageProps extends Omit<BoxProps, 'component' | 'children' | 'position'> {
+    src: string;
+    alt: string;
+    /**
+     * Load the image only when it enters the viewport.
+     * Defaults to true.
+     */
+    lazy?: boolean;
+    /**
+     * Fallback URL used when the main source fails to load.
+     */
+    fallbackSrc?: string;
+    /**
+     * Responsive image sources for different screen sizes/resolutions.
+     * Example: "image-320w.jpg 320w, image-640w.jpg 640w, image-1280w.jpg 1280w"
+     */
+    srcSet?: string;
+    /**
+     * Sizes attribute for responsive images. Defines which image size to use at different viewport widths.
+     * Example: "(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
+     */
+    sizes?: string;
+    /**
+     * Aspect ratio (e.g. "16 / 9" or 1.5) applied to the wrapper to avoid layout shift.
+     */
+    aspectRatio?: number | string;
+    /**
+     * Controls object-fit of the underlying image. Defaults to "cover".
+     */
+    fit?: CSSProperties['objectFit'];
+    /**
+     * Controls object-position of the underlying image. Defaults to "center".
+     */
+    position?: CSSProperties['objectPosition'];
+    /**
+     * Optional overlay content rendered above the image.
+     */
+    overlay?: ReactNode;
+    /**
+     * Enables overlay even when overlay content is not provided.
+     */
+    withOverlay?: boolean;
+    /**
+     * Custom loading indicator shown before the image is loaded.
+     */
+    loadingIndicator?: ReactNode;
+    /**
+     * Custom error fallback content when both src and fallbackSrc fail.
+     */
+    renderError?: ReactNode;
+    /**
+     * Additional styles for the underlying image element.
+     */
+    imgSx?: BoxProps['sx'];
+    /**
+     * Additional props for the underlying image element.
+     */
+    imgProps?: Omit<BoxProps<'img'>, 'component' | 'sx' | 'ref' | 'src' | 'alt' | 'children'>;
+    /**
+     * Root margin passed to the IntersectionObserver. Defaults to "200px".
+     */
+    observerMargin?: string;
+    /**
+     * Callback fired when the image fails to load.
+     */
+    onError?: (event: SyntheticEvent<HTMLImageElement, Event>) => void;
+}
+
+declare const Image: react.ForwardRefExoticComponent<Omit<ImageProps, "ref"> & react.RefAttributes<HTMLImageElement>>;
+
 interface UploadProps extends DropzoneOptions {
     error?: boolean;
     sx?: SxProps$1<Theme>;
@@ -1926,4 +1998,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, 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 };
+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, Image, type ImageProps, type ImageStatus, 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, 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

@@ -1,7 +1,7 @@
 import * as react from 'react';
-import { SetStateAction, ElementType } from 'react';
+import { SetStateAction, ElementType, CSSProperties, ReactNode, SyntheticEvent } 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 { Breakpoint, Shadows, Components, Theme, CssVarsTheme, SxProps as SxProps$1 } from '@mui/material/styles';
 import * as _mui_material from '@mui/material';
 import { SxProps, Theme as Theme$1 } from '@mui/material';
 import { BoxProps } from '@mui/material/Box';
@@ -1285,11 +1285,13 @@ declare module '@mui/material/styles' {
         customShadows: CustomShadowOptions;
         radius: RadiusOptions;
         customSpacing: CustomSpacingOptions;
+        vars: NonNullable<CssVarsTheme['vars']>;
     }
     interface ThemeOptions {
         customShadows?: CustomShadowOptions;
         radius?: RadiusOptions;
         customSpacing?: CustomSpacingOptions;
+        vars?: CssVarsTheme['vars'];
     }
     interface TypographyVariants {
         fontSecondaryFamily: React.CSSProperties['fontFamily'];
@@ -1637,7 +1639,6 @@ declare const schemeConfig: {
     modeStorageKey: string;
     defaultMode: "light" | "dark";
 };
-declare const getInitColorSchemeScript: react_jsx_runtime.JSX.Element;
 
 /**
  * [1] settings @primaryColor
@@ -1757,6 +1758,77 @@ interface LogoProps extends BoxProps {
 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;
 
+type ImageStatus = 'idle' | 'loading' | 'loaded' | 'error';
+interface ImageProps extends Omit<BoxProps, 'component' | 'children' | 'position'> {
+    src: string;
+    alt: string;
+    /**
+     * Load the image only when it enters the viewport.
+     * Defaults to true.
+     */
+    lazy?: boolean;
+    /**
+     * Fallback URL used when the main source fails to load.
+     */
+    fallbackSrc?: string;
+    /**
+     * Responsive image sources for different screen sizes/resolutions.
+     * Example: "image-320w.jpg 320w, image-640w.jpg 640w, image-1280w.jpg 1280w"
+     */
+    srcSet?: string;
+    /**
+     * Sizes attribute for responsive images. Defines which image size to use at different viewport widths.
+     * Example: "(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
+     */
+    sizes?: string;
+    /**
+     * Aspect ratio (e.g. "16 / 9" or 1.5) applied to the wrapper to avoid layout shift.
+     */
+    aspectRatio?: number | string;
+    /**
+     * Controls object-fit of the underlying image. Defaults to "cover".
+     */
+    fit?: CSSProperties['objectFit'];
+    /**
+     * Controls object-position of the underlying image. Defaults to "center".
+     */
+    position?: CSSProperties['objectPosition'];
+    /**
+     * Optional overlay content rendered above the image.
+     */
+    overlay?: ReactNode;
+    /**
+     * Enables overlay even when overlay content is not provided.
+     */
+    withOverlay?: boolean;
+    /**
+     * Custom loading indicator shown before the image is loaded.
+     */
+    loadingIndicator?: ReactNode;
+    /**
+     * Custom error fallback content when both src and fallbackSrc fail.
+     */
+    renderError?: ReactNode;
+    /**
+     * Additional styles for the underlying image element.
+     */
+    imgSx?: BoxProps['sx'];
+    /**
+     * Additional props for the underlying image element.
+     */
+    imgProps?: Omit<BoxProps<'img'>, 'component' | 'sx' | 'ref' | 'src' | 'alt' | 'children'>;
+    /**
+     * Root margin passed to the IntersectionObserver. Defaults to "200px".
+     */
+    observerMargin?: string;
+    /**
+     * Callback fired when the image fails to load.
+     */
+    onError?: (event: SyntheticEvent<HTMLImageElement, Event>) => void;
+}
+
+declare const Image: react.ForwardRefExoticComponent<Omit<ImageProps, "ref"> & react.RefAttributes<HTMLImageElement>>;
+
 interface UploadProps extends DropzoneOptions {
     error?: boolean;
     sx?: SxProps$1<Theme>;
@@ -1926,4 +1998,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, 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 };
+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, Image, type ImageProps, type ImageStatus, 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, 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 };