@cronocode/react-box 3.1.7 → 3.1.8

package/core/boxStyles.d.ts

@@ -120,6 +120,9 @@ export declare const cssStyles: {
     } | {
         values: readonly ["-1/1", "-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;
+    } | {
+        values: `${number}%`;
+        valueFormat?: undefined;
     })[];
     /** 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: ({
@@ -131,6 +134,9 @@ export declare const cssStyles: {
     } | {
         values: readonly ["-1/1", "-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;
+    } | {
+        values: `${number}%`;
+        valueFormat?: undefined;
     })[];
     /** 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: ({
@@ -142,6 +148,9 @@ export declare const cssStyles: {
     } | {
         values: readonly ["-1/1", "-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;
+    } | {
+        values: `${number}%`;
+        valueFormat?: undefined;
     })[];
     /** 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: ({
@@ -153,12 +162,18 @@ export declare const cssStyles: {
     } | {
         values: readonly ["-1/1", "-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;
+    } | {
+        values: `${number}%`;
+        valueFormat?: undefined;
     })[];
     /** 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: {
+    inset: ({
         values: number;
         valueFormat: typeof BoxStylesFormatters.Value.rem;
-    }[];
+    } | {
+        values: `${number}%`;
+        valueFormat?: undefined;
+    })[];
     /** The `box-sizing` CSS property sets how the total width and height of an element is calculated. */
     boxSizing: {
         values: readonly ["border-box", "content-box"];
@@ -259,22 +274,33 @@ export declare const cssStyles: {
         values: readonly [100, 200, 300, 400, 500, 600, 700, 800, 900];
     }[];
     /** The gap CSS shorthand property sets the gaps (also called gutters) between rows and columns. This property applies to multi-column, flex, and grid containers. */
-    gap: {
+    gap: ({
         values: number;
         valueFormat: typeof BoxStylesFormatters.Value.rem;
-    }[];
+    } | {
+        values: `${number}%`;
+        valueFormat?: undefined;
+    })[];
     /** The row-gap CSS property sets the size of the gap (gutter) between an element's rows. */
-    rowGap: {
+    rowGap: ({
         styleName: string;
         values: number;
         valueFormat: typeof BoxStylesFormatters.Value.rem;
-    }[];
+    } | {
+        styleName: string;
+        values: `${number}%`;
+        valueFormat?: undefined;
+    })[];
     /** The column-gap CSS property sets the size of the gap (gutter) between an element's columns. */
-    columnGap: {
+    columnGap: ({
         styleName: string;
         values: number;
         valueFormat: typeof BoxStylesFormatters.Value.rem;
-    }[];
+    } | {
+        styleName: string;
+        values: `${number}%`;
+        valueFormat?: undefined;
+    })[];
     /** The order CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order value and then by their source code order. Items not given an explicit order value are assigned the default value of 0. */
     order: {
         styleName: string;
@@ -296,6 +322,9 @@ export declare const cssStyles: {
     } | {
         values: readonly ["auto", "fit-content", "max-content", "min-content"];
         valueFormat?: undefined;
+    } | {
+        values: `${number}%`;
+        valueFormat?: undefined;
     })[];
     /** The min-height CSS property sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified for min-height. */
     minHeight: ({
@@ -318,6 +347,10 @@ export declare const cssStyles: {
         styleName: string;
         values: readonly ["auto", "fit-content", "max-content", "min-content"];
         valueFormat?: undefined;
+    } | {
+        styleName: string;
+        values: `${number}%`;
+        valueFormat?: undefined;
     })[];
     /** The max-height CSS property sets the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height. */
     maxHeight: ({
@@ -340,6 +373,10 @@ export declare const cssStyles: {
         styleName: string;
         values: readonly ["auto", "fit-content", "max-content", "min-content"];
         valueFormat?: undefined;
+    } | {
+        styleName: string;
+        values: `${number}%`;
+        valueFormat?: undefined;
     })[];
     /** 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: ({
@@ -357,6 +394,9 @@ export declare const cssStyles: {
     } | {
         values: readonly ["auto", "fit-content", "max-content", "min-content"];
         valueFormat?: undefined;
+    } | {
+        values: `${number}%`;
+        valueFormat?: undefined;
     })[];
     /** The min-width CSS property sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified for min-width. */
     minWidth: ({
@@ -379,6 +419,10 @@ export declare const cssStyles: {
         styleName: string;
         values: readonly ["auto", "fit-content", "max-content", "min-content"];
         valueFormat?: undefined;
+    } | {
+        styleName: string;
+        values: `${number}%`;
+        valueFormat?: undefined;
     })[];
     /** The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width. */
     maxWidth: ({
@@ -401,6 +445,10 @@ export declare const cssStyles: {
         styleName: string;
         values: readonly ["auto", "fit-content", "max-content", "min-content"];
         valueFormat?: undefined;
+    } | {
+        styleName: string;
+        values: `${number}%`;
+        valueFormat?: undefined;
     })[];
     /** The letter-spacing CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of letter-spacing causes characters to spread farther apart, while negative values of letter-spacing bring characters closer together. */
     letterSpacing: {
@@ -433,9 +481,13 @@ export declare const cssStyles: {
         styleName: string;
         valueFormat?: undefined;
     } | {
+        styleName: string;
         values: readonly ["1/1", "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;
+    } | {
+        values: `${number}%`;
+        styleName: string;
+        valueFormat?: 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: ({
@@ -447,9 +499,13 @@ export declare const cssStyles: {
         styleName: string;
         valueFormat?: undefined;
     } | {
+        styleName: string;
         values: readonly ["1/1", "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;
+    } | {
+        values: `${number}%`;
+        styleName: string;
+        valueFormat?: 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: ({
@@ -461,9 +517,13 @@ export declare const cssStyles: {
         styleName: string;
         valueFormat?: undefined;
     } | {
+        styleName: string;
         values: readonly ["1/1", "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;
+    } | {
+        values: `${number}%`;
+        styleName: string;
+        valueFormat?: 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: ({
@@ -477,7 +537,11 @@ export declare const cssStyles: {
     } | {
         values: readonly ["1/1", "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;
+        styleName: string;
+    } | {
+        values: `${number}%`;
+        styleName: string;
+        valueFormat?: 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: ({
@@ -491,7 +555,11 @@ export declare const cssStyles: {
     } | {
         values: readonly ["1/1", "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;
+        styleName: string;
+    } | {
+        values: `${number}%`;
+        styleName: string;
+        valueFormat?: 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: ({
@@ -505,7 +573,11 @@ export declare const cssStyles: {
     } | {
         values: readonly ["1/1", "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;
+        styleName: string;
+    } | {
+        values: `${number}%`;
+        styleName: string;
+        valueFormat?: 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: ({
@@ -519,7 +591,11 @@ export declare const cssStyles: {
     } | {
         values: readonly ["1/1", "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;
+        styleName: string;
+    } | {
+        values: `${number}%`;
+        styleName: string;
+        valueFormat?: undefined;
     })[];
     /** The padding CSS shorthand property sets the padding area on all four sides of an element at once. */
     p: ({
@@ -529,7 +605,11 @@ export declare const cssStyles: {
     } | {
         values: readonly ["1/1", "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;
+        styleName: string;
+    } | {
+        values: `${number}%`;
+        styleName: string;
+        valueFormat?: 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: ({
@@ -539,7 +619,11 @@ export declare const cssStyles: {
     } | {
         values: readonly ["1/1", "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;
+        styleName: string;
+    } | {
+        values: `${number}%`;
+        styleName: string;
+        valueFormat?: 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: ({
@@ -549,7 +633,11 @@ export declare const cssStyles: {
     } | {
         values: readonly ["1/1", "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;
+        styleName: string;
+    } | {
+        values: `${number}%`;
+        styleName: string;
+        valueFormat?: undefined;
     })[];
     /** The padding-top CSS property sets the height of the padding area on the top of an element. */
     pt: ({
@@ -559,7 +647,11 @@ export declare const cssStyles: {
     } | {
         values: readonly ["1/1", "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;
+        styleName: string;
+    } | {
+        values: `${number}%`;
+        styleName: string;
+        valueFormat?: undefined;
     })[];
     /** The padding-right CSS property sets the width of the padding area on the right of an element. */
     pr: ({
@@ -569,7 +661,11 @@ export declare const cssStyles: {
     } | {
         values: readonly ["1/1", "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;
+        styleName: string;
+    } | {
+        values: `${number}%`;
+        styleName: string;
+        valueFormat?: undefined;
     })[];
     /** The padding-bottom CSS property sets the height of the padding area on the bottom of an element. */
     pb: ({
@@ -579,7 +675,11 @@ export declare const cssStyles: {
     } | {
         values: readonly ["1/1", "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;
+        styleName: string;
+    } | {
+        values: `${number}%`;
+        styleName: string;
+        valueFormat?: undefined;
     })[];
     /** The padding-left CSS property sets the width of the padding area to the left of an element. */
     pl: ({
@@ -589,7 +689,11 @@ export declare const cssStyles: {
     } | {
         values: readonly ["1/1", "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;
+        styleName: string;
+    } | {
+        values: `${number}%`;
+        styleName: string;
+        valueFormat?: 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: {
@@ -829,6 +933,10 @@ export declare const cssStyles: {
         values: readonly ["-1/1", "-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;
         styleName: string;
+    } | {
+        values: `${number}%`;
+        valueFormat: (value: string) => string;
+        styleName: string;
     })[];
     /** The translateY() CSS function repositions an element vertically on the 2D plane. */
     translateY: ({
@@ -843,6 +951,10 @@ export declare const cssStyles: {
         values: readonly ["-1/1", "-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;
         styleName: string;
+    } | {
+        values: `${number}%`;
+        valueFormat: (value: string) => string;
+        styleName: string;
     })[];
     /** The content CSS property replaces content with a generated value. It can be used to define what is rendered inside an element or pseudo-element. */
     content: {

package/core/theme/theme.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 interface ThemeProps {
     children: React.ReactNode;
-    theme: string;
+    theme?: string;
     use?: 'global' | 'local';
 }
 declare function Theme(props: ThemeProps): import("react/jsx-runtime").JSX.Element;

package/core/variables.d.ts

@@ -274,6 +274,8 @@ declare namespace Variables {
     const shadowValues: Variables.ShadowType[];
     const percentages: readonly ["1/1", "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"];
     const negativePercentages: readonly ["-1/1", "-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"];
+    type PercentString = `${number}%`;
+    const percentString: PercentString;
     function getVariableValue(name: string): string;
     function generateVariables(): string;
     function getPendingVariables(): {