@cronocode/react-box 3.0.13 → 3.0.14

package/core/boxStyles.d.ts

@@ -111,25 +111,37 @@ export declare const cssStyles: {
         values: readonly ["static", "relative", "absolute", "fixed", "sticky"];
     }[];
     /** The top CSS property sets the vertical position of a positioned element. This inset property has no effect on non-positioned elements. */
-    top: {
+    top: ({
         values: number;
         valueFormat: typeof BoxStylesFormatters.Value.rem;
-    }[];
+    } | {
+        values: 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"];
+        valueFormat: typeof BoxStylesFormatters.Value.fraction;
+    })[];
     /** The right CSS property participates in specifying the horizontal position of a positioned element. This inset property has no effect on non-positioned elements. */
-    right: {
+    right: ({
         values: number;
         valueFormat: typeof BoxStylesFormatters.Value.rem;
-    }[];
+    } | {
+        values: 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"];
+        valueFormat: typeof BoxStylesFormatters.Value.fraction;
+    })[];
     /** The bottom CSS property participates in setting the vertical position of a positioned element. This inset property has no effect on non-positioned elements. */
-    bottom: {
+    bottom: ({
         values: number;
         valueFormat: typeof BoxStylesFormatters.Value.rem;
-    }[];
+    } | {
+        values: 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"];
+        valueFormat: typeof BoxStylesFormatters.Value.fraction;
+    })[];
     /** The left CSS property participates in specifying the horizontal position of a positioned element. This inset property has no effect on non-positioned elements. */
-    left: {
+    left: ({
         values: number;
         valueFormat: typeof BoxStylesFormatters.Value.rem;
-    }[];
+    } | {
+        values: 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"];
+        valueFormat: typeof BoxStylesFormatters.Value.fraction;
+    })[];
     /** The inset CSS property is a shorthand that corresponds to the top, right, bottom, and/or left properties. It has the same multi-value syntax of the margin shorthand. */
     inset: {
         values: number;
@@ -255,7 +267,7 @@ export declare const cssStyles: {
     /** The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box, however, it instead determines the height of the border area. */
     height: ({
         values: number;
-        valueFormat: (value: number) => string;
+        valueFormat: typeof BoxStylesFormatters.Value.rem;
     } | {
         values: readonly ["fit"];
         valueFormat: () => string;
@@ -264,7 +276,7 @@ export declare const cssStyles: {
         valueFormat: () => string;
     } | {
         values: 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"];
-        valueFormat: (value: string) => string;
+        valueFormat: typeof BoxStylesFormatters.Value.fraction;
     } | {
         values: readonly ["auto", "fit-content", "max-content", "min-content"];
         valueFormat?: undefined;
@@ -273,7 +285,7 @@ export declare const cssStyles: {
     minHeight: ({
         styleName: string;
         values: number;
-        valueFormat: (value: number) => string;
+        valueFormat: typeof BoxStylesFormatters.Value.rem;
     } | {
         styleName: string;
         values: readonly ["fit"];
@@ -285,7 +297,7 @@ export declare const cssStyles: {
     } | {
         styleName: string;
         values: 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"];
-        valueFormat: (value: string) => string;
+        valueFormat: typeof BoxStylesFormatters.Value.fraction;
     } | {
         styleName: string;
         values: readonly ["auto", "fit-content", "max-content", "min-content"];
@@ -295,7 +307,7 @@ export declare const cssStyles: {
     maxHeight: ({
         styleName: string;
         values: number;
-        valueFormat: (value: number) => string;
+        valueFormat: typeof BoxStylesFormatters.Value.rem;
     } | {
         styleName: string;
         values: readonly ["fit"];
@@ -307,7 +319,7 @@ export declare const cssStyles: {
     } | {
         styleName: string;
         values: 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"];
-        valueFormat: (value: string) => string;
+        valueFormat: typeof BoxStylesFormatters.Value.fraction;
     } | {
         styleName: string;
         values: readonly ["auto", "fit-content", "max-content", "min-content"];
@@ -316,7 +328,7 @@ export declare const cssStyles: {
     /** The width CSS property sets an element's width. By default, it sets the width of the content area, but if box-sizing is set to border-box, it sets the width of the border area. */
     width: ({
         values: number;
-        valueFormat: (value: number) => string;
+        valueFormat: typeof BoxStylesFormatters.Value.rem;
     } | {
         values: readonly ["fit"];
         valueFormat: () => string;
@@ -325,7 +337,7 @@ export declare const cssStyles: {
         valueFormat: () => string;
     } | {
         values: 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"];
-        valueFormat: (value: string) => string;
+        valueFormat: typeof BoxStylesFormatters.Value.fraction;
     } | {
         values: readonly ["auto", "fit-content", "max-content", "min-content"];
         valueFormat?: undefined;
@@ -334,7 +346,7 @@ export declare const cssStyles: {
     minWidth: ({
         styleName: string;
         values: number;
-        valueFormat: (value: number) => string;
+        valueFormat: typeof BoxStylesFormatters.Value.rem;
     } | {
         styleName: string;
         values: readonly ["fit"];
@@ -346,7 +358,7 @@ export declare const cssStyles: {
     } | {
         styleName: string;
         values: 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"];
-        valueFormat: (value: string) => string;
+        valueFormat: typeof BoxStylesFormatters.Value.fraction;
     } | {
         styleName: string;
         values: readonly ["auto", "fit-content", "max-content", "min-content"];
@@ -356,7 +368,7 @@ export declare const cssStyles: {
     maxWidth: ({
         styleName: string;
         values: number;
-        valueFormat: (value: number) => string;
+        valueFormat: typeof BoxStylesFormatters.Value.rem;
     } | {
         styleName: string;
         values: readonly ["fit"];
@@ -368,7 +380,7 @@ export declare const cssStyles: {
     } | {
         styleName: string;
         values: 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"];
-        valueFormat: (value: string) => string;
+        valueFormat: typeof BoxStylesFormatters.Value.fraction;
     } | {
         styleName: string;
         values: readonly ["auto", "fit-content", "max-content", "min-content"];
@@ -404,6 +416,10 @@ export declare const cssStyles: {
         values: readonly ["auto"];
         styleName: string;
         valueFormat?: undefined;
+    } | {
+        values: 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"];
+        valueFormat: typeof BoxStylesFormatters.Value.fraction;
+        styleName?: undefined;
     })[];
     /** The margin-inline CSS shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation. */
     mx: ({
@@ -414,6 +430,10 @@ export declare const cssStyles: {
         values: readonly ["auto"];
         styleName: string;
         valueFormat?: undefined;
+    } | {
+        values: 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"];
+        valueFormat: typeof BoxStylesFormatters.Value.fraction;
+        styleName?: undefined;
     })[];
     /** The margin-block CSS shorthand property defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation. */
     my: ({
@@ -424,6 +444,10 @@ export declare const cssStyles: {
         values: readonly ["auto"];
         styleName: string;
         valueFormat?: undefined;
+    } | {
+        values: 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"];
+        valueFormat: typeof BoxStylesFormatters.Value.fraction;
+        styleName?: undefined;
     })[];
     /** The margin-top CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer. */
     mt: ({
@@ -434,6 +458,10 @@ export declare const cssStyles: {
         values: readonly ["auto"];
         styleName: string;
         valueFormat?: undefined;
+    } | {
+        values: 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"];
+        valueFormat: typeof BoxStylesFormatters.Value.fraction;
+        styleName?: undefined;
     })[];
     /** The margin-right CSS property sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer. */
     mr: ({
@@ -444,6 +472,10 @@ export declare const cssStyles: {
         values: readonly ["auto"];
         styleName: string;
         valueFormat?: undefined;
+    } | {
+        values: 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"];
+        valueFormat: typeof BoxStylesFormatters.Value.fraction;
+        styleName?: undefined;
     })[];
     /** The margin-bottom CSS property sets the margin area on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer. */
     mb: ({
@@ -454,6 +486,10 @@ export declare const cssStyles: {
         values: readonly ["auto"];
         styleName: string;
         valueFormat?: undefined;
+    } | {
+        values: 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"];
+        valueFormat: typeof BoxStylesFormatters.Value.fraction;
+        styleName?: undefined;
     })[];
     /** The margin-left CSS property sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer. */
     ml: ({
@@ -464,49 +500,81 @@ export declare const cssStyles: {
         values: readonly ["auto"];
         styleName: string;
         valueFormat?: undefined;
+    } | {
+        values: 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"];
+        valueFormat: typeof BoxStylesFormatters.Value.fraction;
+        styleName?: undefined;
     })[];
     /** The padding CSS shorthand property sets the padding area on all four sides of an element at once. */
-    p: {
+    p: ({
         values: number;
         styleName: string;
         valueFormat: typeof BoxStylesFormatters.Value.rem;
-    }[];
+    } | {
+        values: 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"];
+        valueFormat: typeof BoxStylesFormatters.Value.fraction;
+        styleName?: undefined;
+    })[];
     /** The padding-inline CSS shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. */
-    px: {
+    px: ({
         values: number;
         styleName: string;
         valueFormat: typeof BoxStylesFormatters.Value.rem;
-    }[];
+    } | {
+        values: 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"];
+        valueFormat: typeof BoxStylesFormatters.Value.fraction;
+        styleName?: undefined;
+    })[];
     /** The padding-block CSS shorthand property defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. */
-    py: {
+    py: ({
         values: number;
         styleName: string;
         valueFormat: typeof BoxStylesFormatters.Value.rem;
-    }[];
+    } | {
+        values: 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"];
+        valueFormat: typeof BoxStylesFormatters.Value.fraction;
+        styleName?: undefined;
+    })[];
     /** The padding-top CSS property sets the height of the padding area on the top of an element. */
-    pt: {
+    pt: ({
         values: number;
         styleName: string;
         valueFormat: typeof BoxStylesFormatters.Value.rem;
-    }[];
+    } | {
+        values: 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"];
+        valueFormat: typeof BoxStylesFormatters.Value.fraction;
+        styleName?: undefined;
+    })[];
     /** The padding-right CSS property sets the width of the padding area on the right of an element. */
-    pr: {
+    pr: ({
         values: number;
         styleName: string;
         valueFormat: typeof BoxStylesFormatters.Value.rem;
-    }[];
+    } | {
+        values: 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"];
+        valueFormat: typeof BoxStylesFormatters.Value.fraction;
+        styleName?: undefined;
+    })[];
     /** The padding-bottom CSS property sets the height of the padding area on the bottom of an element. */
-    pb: {
+    pb: ({
         values: number;
         styleName: string;
         valueFormat: typeof BoxStylesFormatters.Value.rem;
-    }[];
+    } | {
+        values: 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"];
+        valueFormat: typeof BoxStylesFormatters.Value.fraction;
+        styleName?: undefined;
+    })[];
     /** The padding-left CSS property sets the width of the padding area to the left of an element. */
-    pl: {
+    pl: ({
         values: number;
         styleName: string;
         valueFormat: typeof BoxStylesFormatters.Value.rem;
-    }[];
+    } | {
+        values: 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"];
+        valueFormat: typeof BoxStylesFormatters.Value.fraction;
+        styleName?: undefined;
+    })[];
     /** The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container. */
     objectFit: {
         styleName: string;
@@ -643,7 +711,7 @@ export declare const cssStyles: {
         valueFormat?: undefined;
     })[];
     /** The grid-column CSS shorthand property specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. */
-    colSpan: ({
+    gridColumn: ({
         styleName: string;
         values: number;
         valueFormat: (value: number) => string;
@@ -724,6 +792,11 @@ export declare const cssStyles: {
         valueFormat: (value: number) => string;
         styleName: string;
     }[];
+    translateY: {
+        values: number;
+        valueFormat: (value: number) => string;
+        styleName: string;
+    }[];
 };
 export declare const pseudo1: {
     hover: string;

package/core/boxStylesFormatters.d.ts

@@ -6,7 +6,7 @@ export declare namespace BoxStylesFormatters {
     namespace Value {
         function rem(value: number, _fn?: Function, divider?: number): string;
         function px(value: number): string;
-        function fraction(_key: string, value: string): string;
+        function fraction(value: string): string;
         function widthHeight(key: string, value: string): string;
         function variables(prefix: string): (key: string, value: string) => string;
         function svgVariables(prefix: string): (key: string, value: string) => string;

package/core/classNames.d.ts

@@ -1,2 +1,2 @@
-export type ClassNameType = undefined | string | string[] | Record<string, boolean> | ClassNameType[];
+export type ClassNameType<T extends string = string> = T extends never ? undefined : undefined | T | T[] | Record<T, boolean> | ClassNameType<T>[];
 export declare function classNames(...classNameRules: ClassNameType[]): string[];

package/core/extends/boxComponents.d.ts

@@ -300,7 +300,92 @@ declare const boxComponents: {
         styles: {};
     };
     datagrid: {
-        styles: {};
+        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/useStyles.d.ts

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