@cronocode/react-box 3.0.11 → 3.0.13

package/components/textbox.d.ts

@@ -1,11 +1,12 @@
-import { BoxProps } from '../box';
-type TextareaProps = Omit<BoxProps<'input'>, 'ref' | 'tag'>;
-type BoxTagProps = Required<TextareaProps>['props'];
+import { RefAttributes } from 'react';
+import { BoxProps, BoxTagProps } from '../box';
+import { ComponentsAndVariants } from '../types';
 declare const tagProps: readonly ["name", "onInput", "onChange", "type", "placeholder", "defaultValue", "autoFocus", "readOnly", "required", "value", "pattern"];
 type TagPropsType = (typeof tagProps)[number];
-type TextboxTagProps = Omit<BoxTagProps, TagPropsType>;
+type TextareaProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'input', TKey>, 'tag' | 'props'>;
+type TextboxTagProps = Omit<BoxTagProps<'input'>, TagPropsType | 'type'>;
 type TextboxType = 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
-interface Props extends Omit<TextareaProps, 'props'> {
+interface Props<TKey extends keyof ComponentsAndVariants> extends TextareaProps<TKey> {
     name?: string;
     props?: TextboxTagProps;
     onInput?: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -19,5 +20,5 @@ interface Props extends Omit<TextareaProps, 'props'> {
     readOnly?: boolean;
     step?: number | string;
 }
-declare const _default: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLInputElement>>;
+declare const _default: <TKey extends keyof ComponentsAndVariants = "textbox">(props: Props<TKey> & RefAttributes<HTMLInputElement>) => React.ReactNode;
 export default _default;

package/components/tooltip.d.ts

@@ -5,5 +5,5 @@ interface Props extends BoxProps {
         left: number;
     }): void;
 }
-declare const _default: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLDivElement>>;
+declare const _default: import('react').ForwardRefExoticComponent<Omit<Props, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default _default;

package/core/boxStyles.d.ts

@@ -747,6 +747,7 @@ export declare const pseudo2: {
     selected: string;
 };
 export declare const pseudoClasses: {
+    theme: string;
     indeterminate: string;
     checked: string;
     required: string;
@@ -765,15 +766,16 @@ export declare const pseudoClasses: {
     hasRequired: string;
     hasDisabled: string;
 };
-export declare const pseudoClassesWeight: Record<"indeterminate" | "checked" | "required" | "disabled" | "selected" | "hover" | "focus" | "hasFocus" | "active" | "valid" | "hasValid" | "invalid" | "hasInvalid" | "optional" | "hasChecked" | "hasRequired" | "hasDisabled", number>;
+export declare const pseudoClassesWeight: Record<"theme" | "indeterminate" | "checked" | "required" | "disabled" | "selected" | "hover" | "focus" | "hasFocus" | "active" | "valid" | "hasValid" | "invalid" | "hasInvalid" | "optional" | "hasChecked" | "hasRequired" | "hasDisabled", number>;
 export declare const pseudoClassesByWeight: {
-    [key: number]: ("indeterminate" | "checked" | "required" | "disabled" | "selected" | "hover" | "focus" | "hasFocus" | "active" | "valid" | "hasValid" | "invalid" | "hasInvalid" | "optional" | "hasChecked" | "hasRequired" | "hasDisabled")[];
+    [key: number]: ("theme" | "indeterminate" | "checked" | "required" | "disabled" | "selected" | "hover" | "focus" | "hasFocus" | "active" | "valid" | "hasValid" | "invalid" | "hasInvalid" | "optional" | "hasChecked" | "hasRequired" | "hasDisabled")[];
 };
 export declare const pseudoGroupClasses: {
     hoverGroup: "hover";
     focusGroup: "focus";
     activeGroup: "active";
     disabledGroup: "disabled";
+    theme: "theme";
 };
 export declare const breakpoints: {
     /** Styles applied for small screens and larger. >= 640 */

package/core/extends/boxComponents.d.ts

@@ -0,0 +1,306 @@
+import { BoxComponentStyles } from '../../types';
+export interface BoxComponent {
+    clean?: boolean;
+    styles: BoxComponentStyles;
+    variants?: Record<string, BoxComponentStyles>;
+    children?: Record<string, BoxComponent>;
+}
+export type Components = Record<string, BoxComponent>;
+declare const boxComponents: {
+    button: {
+        styles: {
+            display: "inline-flex";
+            color: "white";
+            bgColor: "violet-500";
+            borderColor: "violet-500";
+            p: number;
+            cursor: "pointer";
+            b: number;
+            borderRadius: number;
+            userSelect: "none";
+            lineHeight: number;
+            hover: {
+                bgColor: "violet-600";
+                borderColor: "violet-600";
+            };
+            disabled: {
+                cursor: "not-allowed";
+                bgColor: "violet-50";
+                color: "gray-400";
+                borderColor: "gray-300";
+            };
+        };
+        variants: {
+            test: {};
+            test2: {};
+        };
+    };
+    textbox: {
+        styles: {
+            display: "inline-block";
+            b: number;
+            borderColor: "violet-200";
+            bgColor: "violet-50";
+            color: "violet-950";
+            borderRadius: number;
+            p: number;
+            transition: "none";
+            lineHeight: number;
+            hover: {
+                borderColor: "violet-300";
+            };
+            focus: {
+                outline: number;
+                borderColor: "violet-500";
+                outlineColor: "violet-500";
+            };
+            disabled: {
+                cursor: "not-allowed";
+                bgColor: "violet-50";
+                color: "gray-400";
+                borderColor: "gray-300";
+            };
+        };
+    };
+    textarea: {
+        styles: {
+            display: "inline-block";
+            b: number;
+            borderColor: "violet-200";
+            bgColor: "violet-50";
+            color: "violet-950";
+            borderRadius: number;
+            p: number;
+            transition: "none";
+            hover: {
+                borderColor: "violet-300";
+            };
+            focus: {
+                outline: number;
+                borderColor: "violet-500";
+                outlineColor: "violet-500";
+            };
+            disabled: {
+                cursor: "not-allowed";
+                bgColor: "violet-50";
+                color: "gray-400";
+                borderColor: "gray-300";
+                resize: "none";
+            };
+        };
+    };
+    checkbox: {
+        styles: {
+            display: "inline-block";
+            appearance: "none";
+            b: number;
+            borderColor: "violet-300";
+            borderRadius: number;
+            p: number;
+            cursor: "pointer";
+            transition: "none";
+            hover: {
+                borderColor: "violet-500";
+            };
+            focus: {
+                outline: number;
+                outlineOffset: number;
+                outlineColor: "violet-500";
+            };
+            checked: {
+                bgColor: "violet-500";
+                borderColor: "violet-500";
+                bgImage: "bg-img-checked";
+            };
+            indeterminate: {
+                color: "violet-500";
+                bgImage: "bg-img-indeterminate";
+            };
+            disabled: {
+                cursor: "not-allowed";
+                bgColor: "violet-100";
+                color: "gray-400";
+                borderColor: "gray-300";
+            };
+        };
+    };
+    radioButton: {
+        styles: {
+            appearance: "none";
+            b: number;
+            borderColor: "violet-300";
+            borderRadius: number;
+            p: number;
+            cursor: "pointer";
+            transition: "none";
+            hover: {
+                borderColor: "violet-500";
+            };
+            focus: {
+                outline: number;
+                outlineOffset: number;
+                outlineColor: "violet-500";
+            };
+            checked: {
+                bgColor: "violet-500";
+                borderColor: "violet-500";
+                bgImage: "bg-img-radio";
+            };
+            disabled: {
+                cursor: "not-allowed";
+                bgColor: "violet-100";
+                color: "gray-400";
+                borderColor: "violet-200";
+            };
+        };
+    };
+    dropdown: {
+        styles: {
+            display: "inline-flex";
+            ai: "center";
+            gap: number;
+            jc: "space-between";
+            p: number;
+            cursor: "pointer";
+            bgColor: "violet-50";
+            color: "violet-950";
+            b: number;
+            borderColor: "violet-200";
+            borderRadius: number;
+            userSelect: "none";
+            lineHeight: number;
+            minWidth: number;
+            transition: "none";
+            hover: {
+                borderColor: "violet-300";
+            };
+            focus: {
+                outline: number;
+                borderColor: "violet-500";
+                outlineColor: "violet-500";
+            };
+            disabled: {
+                cursor: "not-allowed";
+                bgColor: "violet-50";
+                color: "gray-400";
+                borderColor: "gray-300";
+            };
+        };
+        children: {
+            display: {
+                styles: {
+                    whiteSpace: "nowrap";
+                    textOverflow: "ellipsis";
+                    overflow: "hidden";
+                };
+            };
+            items: {
+                styles: {
+                    display: "flex";
+                    d: "column";
+                    gap: number;
+                    p: number;
+                    b: number;
+                    borderRadius: number;
+                    position: "relative";
+                    top: number;
+                    bgColor: "white";
+                    overflow: "auto";
+                    maxHeight: number;
+                    borderColor: "violet-300";
+                    color: "violet-950";
+                    shadow: "medium-shadow";
+                };
+            };
+            item: {
+                styles: {
+                    display: "flex";
+                    width: "fit";
+                    p: number;
+                    cursor: "pointer";
+                    borderRadius: number;
+                    hover: {
+                        bgColor: "gray-100";
+                    };
+                    focus: {
+                        bgColor: "violet-50";
+                    };
+                    selected: {
+                        bgColor: "violet-50";
+                        cursor: "default";
+                        hover: {
+                            bgColor: "violet-100";
+                        };
+                    };
+                };
+                variants: {
+                    multiple: {
+                        selected: {
+                            cursor: "pointer";
+                        };
+                    };
+                };
+            };
+            unselect: {
+                styles: {
+                    display: "flex";
+                    width: "fit";
+                    p: number;
+                    cursor: "pointer";
+                    lineHeight: number;
+                    borderRadius: number;
+                    color: "violet-400";
+                    hover: {
+                        bgColor: "violet-50";
+                    };
+                    focus: {
+                        bgColor: "violet-50";
+                    };
+                    selected: {
+                        bgColor: "violet-50";
+                        cursor: "default";
+                    };
+                };
+            };
+            selectAll: {
+                styles: {
+                    display: "flex";
+                    width: "fit";
+                    p: number;
+                    cursor: "pointer";
+                    lineHeight: number;
+                    borderRadius: number;
+                    color: "violet-400";
+                    hover: {
+                        bgColor: "violet-50";
+                    };
+                    focus: {
+                        bgColor: "violet-50";
+                    };
+                    selected: {
+                        bgColor: "violet-50";
+                        cursor: "default";
+                    };
+                };
+            };
+            emptyItem: {
+                styles: {
+                    display: "flex";
+                    width: "fit";
+                    p: number;
+                    cursor: "default";
+                    lineHeight: number;
+                    borderRadius: number;
+                    color: "violet-400";
+                };
+            };
+        };
+    };
+    label: {
+        styles: {};
+    };
+    datagrid: {
+        styles: {};
+    };
+};
+export default boxComponents;

package/core/{boxExtends.d.ts → extends/boxExtends.d.ts}

@@ -1,8 +1,11 @@
-import { BoxStyle } from './coreTypes';
+import { BoxStyle } from '../coreTypes';
+import { Components } from './boxComponents';
 declare namespace BoxExtends {
     function extend<TProps extends Record<string, BoxStyle[]>, TPropTypes extends Record<string, BoxStyle[]>>(variables: Record<string, string>, extendedProps: TProps, extendedPropTypes: TPropTypes): {
         extendedProps: TProps;
         extendedPropTypes: TPropTypes;
     };
+    let componentsStyles: Components;
+    function components<T extends Components>(components: T): T;
 }
 export default BoxExtends;

package/core/extends/useComponents.d.ts

@@ -0,0 +1,2 @@
+import { BoxStyleProps, BoxComponentStyles, ComponentsAndVariants } from '../../types';
+export default function useComponents<TKey extends keyof ComponentsAndVariants = never>(props: BoxStyleProps<TKey>): Maybe<BoxComponentStyles>;

package/core/theme/theme.d.ts

@@ -1,13 +1,11 @@
 import { default as React } from 'react';
-import { Themes } from './themeContract';
 interface ThemeProps {
     children: React.ReactNode;
     theme: string;
+    use?: 'global' | 'local';
 }
 declare function Theme(props: ThemeProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Theme {
-    let userThemes: Maybe<Themes>;
-    function setup(themes: Themes): void;
     function useTheme(): [string, (theme: string) => void];
 }
 export default Theme;

package/core/theme/themeContext.d.ts

@@ -1,9 +1,7 @@
 import { default as React } from 'react';
-import { ThemeType } from './themeContract';
-interface IThemeContext {
-    themeStyles: ThemeType;
+interface ThemeContextProps {
     theme: string;
     setTheme(theme: string): void;
 }
-declare const ThemeContext: React.Context<IThemeContext>;
+declare const ThemeContext: React.Context<ThemeContextProps>;
 export default ThemeContext;

package/core/useStyles.d.ts

@@ -1,7 +1,7 @@
-import { BoxStyleProps, PseudoClassesType } from '../types';
-export default function useStyles(props: BoxStyleProps, isSvg: boolean): string[];
+import { BoxStyleProps, ComponentsAndVariants, PseudoClassesType } from '../types';
+export default function useStyles<TKey extends keyof ComponentsAndVariants = never>(props: BoxStyleProps<TKey>, isSvg: boolean): string[];
 declare namespace StylesContextImpl {
-    function addClassNames(props: BoxStyleProps, classNames: string[], currentPseudoClasses: PseudoClassesType[], breakpoint?: string, pseudoClassParentName?: string): void;
+    function addClassNames(props: BoxStyleProps<any>, classNames: string[], currentPseudoClasses: PseudoClassesType[], breakpoint?: string, pseudoClassParentName?: string): void;
     function flush(): void;
     function clear(): void;
 }