@yr3/ui 1.0.12 → 1.0.14

package/dist/index.d.ts

@@ -95,6 +95,11 @@ type Theme = {
             primary: string;
             secondary: string;
         };
+        backdrop?: string;
+        common?: {
+            white: string;
+            black: string;
+        };
     };
     breakpoints: typeof breakpoints;
     text: typeof text;
@@ -981,7 +986,7 @@ declare const composeStyles: (ui?: UIProps, style?: React.CSSProperties) => {
 
 type AvatarProps = {
     label?: string;
-    variant?: 'circle' | 'square' | 'rounded';
+    variant?: 'circle' | 'square' | 'rounded' | 'bordered';
     src?: string;
     alt?: string;
     children?: React$1.ReactNode;
@@ -1079,8 +1084,116 @@ declare const baseTokens: {
     };
 };
 
+declare const bem: (block: string) => (element?: string, modifiers?: Record<string, any>) => string;
+declare const bemMerge: (...args: any[]) => string;
+
+type CalendarDayProps = {
+    day: number;
+    date: Dayjs;
+    isToday: boolean;
+    isPast: boolean;
+    isFuture: boolean;
+    isCurrentMonth: boolean;
+    selected: any;
+    data?: any;
+};
+type CalendarComponentProps = {
+    calendar: (CalendarDayProps | null)[][];
+    month: number;
+    monthLabel: string;
+    yearLabel: string;
+    daysContainer: number[];
+    days: number;
+    weeks: number;
+    isWeekend: boolean;
+    date: Dayjs;
+    selected: CalendarDayProps | null;
+    currentDay: CalendarDayProps;
+    props?: any;
+};
+declare function getMonthCalendar(year: number, month: number, startIndex: number, selected: CalendarDayProps, props?: any): CalendarComponentProps;
+
+declare const rgbToHex: (r: number, g: number, b: number) => string;
+declare const hexToRgb: (hex: string) => {
+    r: number;
+    g: number;
+    b: number;
+};
+declare const adjustColor: (hex: string, amount: number) => string;
+declare const getContrast: (hex: string) => "#000000" | "#ffffff";
+declare const createPaletteColor: (main: string) => PaletteColor;
+declare const lighten: (hex: string, amount: number) => string;
+declare const darken: (hex: string, amount: number) => string;
+declare const alpha: (hex: string, opacity: number) => string;
+
+declare function isEmpty(value: unknown): boolean;
+declare function times<T>(n: number, iteratee: (index: number) => T): T[];
+
+declare const cx: (...args: any[]) => string;
+
+type VariantConfig = {
+    base: string;
+    variants?: Record<string, Record<string, string>>;
+};
+declare const createVariants: (config: VariantConfig) => (props?: Record<string, any>) => string;
+
+type CountriesDial = {
+    code: string;
+    dial: string;
+    label: string;
+};
+declare const normalizePhone: (phone: string, dial: string) => {
+    number: string;
+    full: string;
+} | null;
+declare const getDialPhone: (phone: string, countries: CountriesDial[]) => string | null;
+declare const getCountryCodePhone: (phone: string, countries: CountriesDial[]) => string | null;
+declare const getNumberPhone: (phone: string, dial: string) => string;
+
+declare function mergeDeep<T>(target: T, source?: Partial<T>): T;
+
+type NotistackAnchorProps = {
+    vertical: 'top' | 'bottom';
+    horizontal: 'left' | 'center' | 'right';
+};
+type NotistackProps = {
+    message: string;
+    duration?: number;
+    variant?: 'info' | 'success' | 'warning' | 'error';
+    color?: keyof Theme['colors'];
+    anchor?: NotistackAnchorProps;
+    exiting?: boolean;
+    propsComponent?: {
+        notistack?: {
+            ui?: UIProps;
+            style?: React.CSSProperties;
+        };
+        container?: {
+            ui?: UIProps;
+            style?: React.CSSProperties;
+        };
+        progress?: {
+            ui?: UIProps;
+            style?: React.CSSProperties;
+        };
+    };
+};
+declare const Notistack: React.FC<NotistackProps>;
+
+type Snack = NotistackProps & {
+    id: number;
+    message: string;
+    duration?: number;
+    variant?: 'success' | 'error' | 'info';
+    exiting?: boolean;
+    anchor?: NotistackAnchorProps;
+};
+type NotistackContextType = {
+    notistack: (snack: Snack) => void;
+};
+declare const NotistackContext: React$1.Context<NotistackContextType | null>;
 declare const NotistackProvider: ({ children }: any) => react_jsx_runtime.JSX.Element;
-declare const useNotistack: () => any;
+declare const useNotistack: () => NotistackContextType;
 
 declare function useMediaQuery(query: string | ((theme: any) => string)): boolean;
 type Breakpoint = keyof typeof breakpoints;
@@ -1130,6 +1243,7 @@ type CheckboxProps = {
     onChange?: (e: React$1.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
     label?: string;
     variant?: 'filled' | 'outlined' | 'text';
+    type?: 'default' | 'circle';
     color?: keyof Theme['colors'];
     disabled?: boolean;
     propsComponent?: {
@@ -1152,9 +1266,23 @@ type ChipProps = {
     size?: 'small' | 'medium' | 'large';
     onClick?: (e: React$1.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     icon?: React$1.ReactNode;
+    deleted?: boolean;
     onDelete?: (e: React$1.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    ui?: UIProps;
-    style?: React$1.CSSProperties;
+    propsComponent?: {
+        chip?: {
+            ui?: UIProps;
+            style?: React$1.CSSProperties;
+        };
+        label?: {
+            ui?: UIProps;
+            style?: React$1.CSSProperties;
+        };
+        delete?: {
+            ui?: UIProps;
+            style?: React$1.CSSProperties;
+        };
+        icon?: IconProps;
+    };
 };
 declare const Chip: React$1.FC<ChipProps>;
 
@@ -1263,11 +1391,13 @@ type Option = {
     value: string;
 };
 type GroupsVariant = 'filled' | 'outlined' | 'text';
+type GroupsType = 'rounded' | 'square';
 type GroupProps = {
     options: Option[];
     value?: string | string[];
     onChange?: (value: any) => void;
     variant?: GroupsVariant;
+    type?: GroupsType;
     color?: keyof Theme['colors'];
     propsComponent?: {
         group?: {
@@ -1291,12 +1421,10 @@ type ImageProps = {
 };
 declare const Image: React$1.FC<ImageProps>;
 
-type Props = {
+type ImageDropzoneProps = {
     onChange?: (files: File[]) => void;
     multiple?: boolean;
-    ui?: UIProps;
     bordered?: boolean;
-    style?: React$1.CSSProperties;
     component?: React$1.ReactNode;
     defaultImage?: string;
     variant?: 'base' | 'outlined';
@@ -1305,9 +1433,21 @@ type Props = {
         text?: Omit<TextProps, 'children' | 'as'> & {
             primary?: string;
         };
+        container?: {
+            ui?: UIProps;
+            style?: React$1.CSSProperties;
+        };
+        preview?: {
+            ui?: UIProps;
+            style?: React$1.CSSProperties;
+        };
+        content?: {
+            ui?: UIProps;
+            style?: React$1.CSSProperties;
+        };
     };
 };
-declare const ImageDropzone: React$1.FC<Props>;
+declare const ImageDropzone: React$1.FC<ImageDropzoneProps>;
 
 type LabelProps = {
     display?: boolean;
@@ -1323,7 +1463,7 @@ declare const Label: React$1.FC<LabelProps>;
 type InputProps = Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
     label?: string;
     value?: string;
-    type?: 'text' | 'email' | 'phone' | 'number' | 'password' | 'search';
+    type?: 'text' | 'email' | 'phone' | 'number' | 'password' | 'search' | 'date';
     variant?: ControlVariants;
     color?: keyof Theme['colors'];
     onChange?: (e: React$1.ChangeEvent<HTMLInputElement>, value: string) => void;
@@ -1340,7 +1480,7 @@ type InputProps = Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'onChange'
 declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "onChange"> & {
     label?: string;
     value?: string;
-    type?: "text" | "email" | "phone" | "number" | "password" | "search";
+    type?: "text" | "email" | "phone" | "number" | "password" | "search" | "date";
     variant?: ControlVariants;
     color?: keyof Theme["colors"];
     onChange?: (e: React$1.ChangeEvent<HTMLInputElement>, value: string) => void;
@@ -1355,63 +1495,6 @@ declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAtt
     };
 } & React$1.RefAttributes<HTMLInputElement>>;
 
-declare const bem: (block: string) => (element?: string, modifiers?: Record<string, any>) => string;
-declare const bemMerge: (...args: any[]) => string;
-
-type CalendarDayProps = {
-    day: number;
-    date: Dayjs;
-    isToday: boolean;
-    isPast: boolean;
-    isFuture: boolean;
-    isCurrentMonth: boolean;
-    selected: any;
-    data?: any;
-};
-type CalendarComponentProps = {
-    calendar: (CalendarDayProps | null)[][];
-    month: number;
-    monthLabel: string;
-    yearLabel: string;
-    daysContainer: number[];
-    days: number;
-    weeks: number;
-    isWeekend: boolean;
-    date: Dayjs;
-    selected: CalendarDayProps | null;
-    currentDay: CalendarDayProps;
-    props?: any;
-};
-declare function getMonthCalendar(year: number, month: number, startIndex: number, selected: CalendarDayProps, props?: any): CalendarComponentProps;
-
-declare const adjustColor: (hex: string, amount: number) => string;
-declare const getContrast: (hex: string) => "#000000" | "#ffffff";
-declare const createPaletteColor: (main: string) => PaletteColor;
-
-declare function isEmpty(value: unknown): boolean;
-declare function times<T>(n: number, iteratee: (index: number) => T): T[];
-
-declare const cx: (...args: any[]) => string;
-
-type VariantConfig = {
-    base: string;
-    variants?: Record<string, Record<string, string>>;
-};
-declare const createVariants: (config: VariantConfig) => (props?: Record<string, any>) => string;
-
-type CountriesDial = {
-    code: string;
-    dial: string;
-    label: string;
-};
-declare const normalizePhone: (phone: string, dial: string) => {
-    number: string;
-    full: string;
-} | null;
-declare const getDialPhone: (phone: string, countries: CountriesDial[]) => string | null;
-declare const getCountryCodePhone: (phone: string, countries: CountriesDial[]) => string | null;
-declare const getNumberPhone: (phone: string, dial: string) => string;
-
 type InputAreaVariant = 'filled' | 'outlined' | 'base' | 'lined';
 type InputAreaProps = {
     value?: string;
@@ -1435,6 +1518,24 @@ type InputAreaProps = {
 };
 declare const InputArea: React$1.FC<InputAreaProps>;
 
+type LoaderProps = {
+    component?: React$1.ReactNode;
+    loading?: boolean;
+    propsComponent?: {
+        loader?: {
+            ui?: UIProps;
+            style?: React$1.CSSProperties;
+        };
+        spinner?: {
+            size?: 'sm' | 'md' | 'lg';
+            color?: keyof Theme['colors'];
+            type: 'default' | 'dots' | 'fancy';
+        };
+        container?: Omit<FlexProps, 'children'>;
+    };
+};
+declare const Loader: React$1.FC<LoaderProps>;
+
 type ModalContainerProps = {
     children?: React$1.ReactNode;
     size?: 'sm' | 'md' | 'lg';
@@ -1454,34 +1555,6 @@ type ModalProps = {
 };
 declare const Modal: React$1.FC<ModalProps>;
 
-type NotistackAnchorProps = {
-    vertical: 'top' | 'bottom';
-    horizontal: 'left' | 'center' | 'right';
-};
-type NotistackProps = {
-    message: string;
-    duration?: number;
-    variant?: 'info' | 'success' | 'warning' | 'error';
-    color?: keyof Theme['colors'];
-    anchor?: NotistackAnchorProps;
-    exiting?: boolean;
-    propsComponent?: {
-        notistack?: {
-            ui?: UIProps;
-            style?: React.CSSProperties;
-        };
-        container?: {
-            ui?: UIProps;
-            style?: React.CSSProperties;
-        };
-        progress?: {
-            ui?: UIProps;
-            style?: React.CSSProperties;
-        };
-    };
-};
-declare const Notistack: React.FC<NotistackProps>;
-
 type PendingProps = {
     variant?: 'rect' | 'circle' | 'text';
     width?: number | string;
@@ -1627,6 +1700,7 @@ type SelectProps = {
         icon?: {
             style?: React$1.CSSProperties;
             component?: React$1.ReactNode;
+            color?: keyof Theme['colors'];
         };
         label?: Omit<LabelProps, 'text'>;
         menu?: {
@@ -1706,4 +1780,4 @@ declare const breakUp: (bp: number) => string;
 declare const breakDown: (bp: number) => string;
 declare function useBreakpoint(queryInput: QueryInput): boolean;
 
-export { Avatar, type AvatarProps, Backdrop, BackdropContext, type BackdropContextType, BackdropProvider, Box, type BoxProps, Button, type ButtonProps, type ButtonVariant, Calendar, type CalendarComponentProps, type CalendarDayProps, type CalendarProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Collapse, type CollapseProps, Container, type ContainerProps, Control, ControlContext, type ControlProps, type ControlVariants, type CountriesDial, Divider, type DividerProps, Drawer, type DrawerProps, Fade, type FadeProps, Flex, type FlexProps, Grid, type GridProps, Group, type GroupProps, type GroupsVariant, IconClose, IconDown, IconSearch, Image, ImageDropzone, type ImageProps, Input, InputArea, type InputAreaProps, type InputAreaVariant, type InputProps, Label, type LabelProps, Modal, ModalContainer, type ModalContainerProps, type ModalProps, Notistack, type NotistackAnchorProps, type NotistackProps, NotistackProvider, type Option, Pending, type PendingProps, Phone, type PhoneInputProps, type PlaceData, PlacesAutocomplete, type PropsPlaces, Radio, type RadioVariant, Select, type SelectChangeEvent, type SelectOptionsProps, type SelectProps, type SelectorChangeEvent, type SelectorProps, Slide, type SlideContentProps, type SlideProps, Switch, type SwitchProps, Text, type TextProps, type TextVariant, type TextWeight, type Theme, ThemeContext, ThemeProvider, type UIProps, adjustColor, applyTheme, baseTokens, bem, bemMerge, breakDown, breakUp, breakpoints, composeStyles, createPaletteColor, createTheme, createVariants, cx, getContrast, getCountryCodePhone, getDialPhone, getMonthCalendar, getNumberPhone, initTheme, isEmpty, normalizePhone, text, times, uiStyle, useBackdrop, useBreakpoint, useBreakpointValue, useClickAway, useControl, useMediaQuery, useNotistack, usePlaces, useTheme };
+export { Avatar, type AvatarProps, Backdrop, BackdropContext, type BackdropContextType, BackdropProvider, Box, type BoxProps, Button, type ButtonProps, type ButtonVariant, Calendar, type CalendarComponentProps, type CalendarDayProps, type CalendarProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Collapse, type CollapseProps, Container, type ContainerProps, Control, ControlContext, type ControlProps, type ControlVariants, type CountriesDial, Divider, type DividerProps, Drawer, type DrawerProps, Fade, type FadeProps, Flex, type FlexProps, Grid, type GridProps, Group, type GroupProps, type GroupsType, type GroupsVariant, IconClose, IconDown, IconSearch, Image, ImageDropzone, type ImageDropzoneProps, type ImageProps, Input, InputArea, type InputAreaProps, type InputAreaVariant, type InputProps, Label, type LabelProps, Loader, type LoaderProps, Modal, ModalContainer, type ModalContainerProps, type ModalProps, Notistack, type NotistackAnchorProps, NotistackContext, type NotistackContextType, type NotistackProps, NotistackProvider, type Option, Pending, type PendingProps, Phone, type PhoneInputProps, type PlaceData, PlacesAutocomplete, type PropsPlaces, Radio, type RadioVariant, Select, type SelectChangeEvent, type SelectOptionsProps, type SelectProps, type SelectorChangeEvent, type SelectorProps, Slide, type SlideContentProps, type SlideProps, type Snack, Switch, type SwitchProps, Text, type TextProps, type TextVariant, type TextWeight, type Theme, ThemeContext, ThemeProvider, type UIProps, adjustColor, alpha, applyTheme, baseTokens, bem, bemMerge, breakDown, breakUp, breakpoints, composeStyles, createPaletteColor, createTheme, createVariants, cx, darken, getContrast, getCountryCodePhone, getDialPhone, getMonthCalendar, getNumberPhone, hexToRgb, initTheme, isEmpty, lighten, mergeDeep, normalizePhone, rgbToHex, text, times, uiStyle, useBackdrop, useBreakpoint, useBreakpointValue, useClickAway, useControl, useMediaQuery, useNotistack, usePlaces, useTheme };