@cronocode/react-box 3.0.12 → 3.0.14

package/core/extends/boxComponents.d.ts

@@ -0,0 +1,391 @@
+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: {
+            b: number;
+            borderColor: "gray-400";
+            overflow: "hidden";
+            borderRadius: number;
+        };
+        children: {
+            header: {
+                styles: {
+                    position: "sticky";
+                    top: number;
+                    width: "max-content";
+                    minWidth: "fit";
+                    zIndex: 1;
+                };
+                variants: {
+                    isResizeMode: {
+                        userSelect: "none";
+                    };
+                };
+                children: {
+                    cell: {
+                        styles: {
+                            bgColor: "gray-200";
+                            borderColor: "gray-400";
+                            bb: number;
+                            minHeight: number;
+                            position: "relative";
+                            transition: "none";
+                        };
+                        variants: {
+                            isRowNumber: {};
+                            isRowSelection: {};
+                            isPinned: {
+                                position: "sticky";
+                                zIndex: 2;
+                            };
+                            isFirstLeftPinned: {};
+                            isLastLeftPinned: {
+                                br: number;
+                            };
+                            isFirstRightPinned: {
+                                bl: number;
+                            };
+                            isLastRightPinned: {};
+                            isSortable: {
+                                cursor: "pointer";
+                            };
+                        };
+                    };
+                };
+            };
+            cell: {
+                styles: {
+                    bgColor: "gray-100";
+                    bb: number;
+                    borderColor: "gray-400";
+                    transition: "none";
+                    ai: "center";
+                    overflow: "hidden";
+                    minHeight: number;
+                    hoverGroup: {
+                        'grid-row': {
+                            bgColor: "gray-200";
+                        };
+                    };
+                };
+                variants: {
+                    isRowNumber: {
+                        bgColor: "gray-200";
+                    };
+                    isRowSelection: {};
+                    isPinned: {
+                        position: "sticky";
+                    };
+                    isFirstLeftPinned: {};
+                    isLastLeftPinned: {
+                        br: number;
+                    };
+                    isFirstRightPinned: {
+                        bl: number;
+                    };
+                    isLastRightPinned: {};
+                };
+            };
+        };
+    };
+};
+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[];
+export default function useStyles(props: BoxStyleProps<any>, 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;
 }

package/core/variables.d.ts

@@ -253,6 +253,7 @@ declare namespace Variables {
         'rose-950': string;
     };
     type ColorType = keyof typeof colors | 'none';
+    const percentages: readonly ["1/2", "1/3", "2/3", "1/4", "2/4", "3/4", "1/5", "2/5", "3/5", "4/5", "1/6", "2/6", "3/6", "4/6", "5/6", "1/12", "2/12", "3/12", "4/12", "5/12", "6/12", "7/12", "8/12", "9/12", "10/12", "11/12"];
     function getVariableValue(name: string): string;
     function generateVariables(): string;
     function setUserVariables(variables: Record<string, string>): void;