npm - @pandacss/preset-base - Versions diffs - 0.3.2 → 0.5.0 - Mend

@pandacss/preset-base 0.3.2 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.d.mts ADDED Viewed

@@ -0,0 +1,479 @@
+import * as _pandacss_types_dist_pattern from '@pandacss/types/dist/pattern';
+import * as _pandacss_types from '@pandacss/types';
+declare const preset: {
+    conditions: {
+        hover: string;
+        focus: string;
+        focusWithin: string;
+        focusVisible: string;
+        disabled: string;
+        active: string;
+        visited: string;
+        target: string;
+        readOnly: string;
+        readWrite: string;
+        empty: string;
+        checked: string;
+        enabled: string;
+        expanded: string;
+        highlighted: string;
+        before: string;
+        after: string;
+        firstLetter: string;
+        firstLine: string;
+        marker: string;
+        selection: string;
+        file: string;
+        backdrop: string;
+        first: string;
+        last: string;
+        only: string;
+        even: string;
+        odd: string;
+        firstOfType: string;
+        lastOfType: string;
+        onlyOfType: string;
+        peerFocus: string;
+        peerHover: string;
+        peerActive: string;
+        peerFocusWithin: string;
+        peerFocusVisible: string;
+        peerDisabled: string;
+        peerChecked: string;
+        peerInvalid: string;
+        peerExpanded: string;
+        peerPlaceholderShown: string;
+        groupFocus: string;
+        groupHover: string;
+        groupActive: string;
+        groupFocusWithin: string;
+        groupFocusVisible: string;
+        groupDisabled: string;
+        groupChecked: string;
+        groupExpanded: string;
+        groupInvalid: string;
+        indeterminate: string;
+        required: string;
+        valid: string;
+        invalid: string;
+        autofill: string;
+        inRange: string;
+        outOfRange: string;
+        placeholder: string;
+        placeholderShown: string;
+        pressed: string;
+        selected: string;
+        default: string;
+        optional: string;
+        open: string;
+        fullscreen: string;
+        loading: string;
+        currentPage: string;
+        currentStep: string;
+        motionReduce: string;
+        motionSafe: string;
+        print: string;
+        landscape: string;
+        portrait: string;
+        dark: string;
+        light: string;
+        osDark: string;
+        osLight: string;
+        highConstrast: string;
+        lessContrast: string;
+        moreContrast: string;
+        ltr: string;
+        rtl: string;
+        scrollbar: string;
+        scrollbarThumb: string;
+        scrollbarTrack: string;
+        horizontal: string;
+        vertical: string;
+    };
+    utilities: _pandacss_types.UtilityConfig;
+    patterns: {
+        box: {
+            transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>): _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>;
+        };
+        flex: {
+            properties: {
+                align: {
+                    type: "property";
+                    value: "alignItems";
+                };
+                justify: {
+                    type: "property";
+                    value: "justifyContent";
+                };
+                direction: {
+                    type: "property";
+                    value: "flexDirection";
+                };
+                wrap: {
+                    type: "property";
+                    value: "flexWrap";
+                };
+                basis: {
+                    type: "property";
+                    value: "flexBasis";
+                };
+                grow: {
+                    type: "property";
+                    value: "flexGrow";
+                };
+                shrink: {
+                    type: "property";
+                    value: "flexShrink";
+                };
+            };
+            transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>): {
+                display: "flex";
+                flexDirection: any;
+                alignItems: any;
+                justifyContent: any;
+                flexWrap: any;
+                flexBasis: any;
+                flexGrow: any;
+                flexShrink: any;
+            };
+        };
+        stack: {
+            properties: {
+                align: {
+                    type: "property";
+                    value: "alignItems";
+                };
+                justify: {
+                    type: "property";
+                    value: "justifyContent";
+                };
+                direction: {
+                    type: "property";
+                    value: "flexDirection";
+                };
+                gap: {
+                    type: "property";
+                    value: "gap";
+                };
+            };
+            transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>): {
+                display: "flex";
+                flexDirection: any;
+                alignItems: any;
+                justifyContent: any;
+                gap: any;
+            };
+        };
+        vstack: {
+            jsx: string;
+            properties: {
+                justify: {
+                    type: "property";
+                    value: "justifyContent";
+                };
+                gap: {
+                    type: "property";
+                    value: "gap";
+                };
+            };
+            transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>): {
+                display: "flex";
+                alignItems: "center";
+                justifyContent: any;
+                gap: any;
+                flexDirection: "column";
+            };
+        };
+        hstack: {
+            jsx: string;
+            properties: {
+                justify: {
+                    type: "property";
+                    value: "justifyContent";
+                };
+                gap: {
+                    type: "property";
+                    value: "gap";
+                };
+            };
+            transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>): {
+                display: "flex";
+                alignItems: "center";
+                justifyContent: any;
+                gap: any;
+                flexDirection: "row";
+            };
+        };
+        spacer: {
+            properties: {
+                size: {
+                    type: "token";
+                    value: "spacing";
+                };
+            };
+            transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>, { map }: _pandacss_types.PatternHelpers): {
+                alignSelf: "stretch";
+                justifySelf: "stretch";
+                flex: any;
+            };
+        };
+        square: {
+            properties: {
+                size: {
+                    type: "property";
+                    value: "width";
+                };
+            };
+            transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>): {
+                display: "flex";
+                alignItems: "center";
+                justifyContent: "center";
+                flex: "0 0 auto";
+                width: any;
+                height: any;
+            };
+        };
+        circle: {
+            properties: {
+                size: {
+                    type: "property";
+                    value: "width";
+                };
+            };
+            transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>): {
+                display: "flex";
+                alignItems: "center";
+                justifyContent: "center";
+                flex: "0 0 auto";
+                width: any;
+                height: any;
+                borderRadius: "9999px";
+            };
+        };
+        center: {
+            properties: {
+                inline: {
+                    type: "boolean";
+                };
+            };
+            transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>): {
+                display: "flex" | "inline-flex";
+                alignItems: "center";
+                justifyContent: "center";
+            };
+        };
+        linkBox: {
+            transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>): {
+                position: "relative";
+                '& :where(a, abbr)': {
+                    position: "relative";
+                    zIndex: "1";
+                };
+            };
+        };
+        linkOverlay: {
+            jsxElement: string;
+            transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>): {
+                position: "static";
+                _before: any;
+            };
+        };
+        aspectRatio: {
+            properties: {
+                ratio: {
+                    type: "number";
+                };
+            };
+            blocklist: "aspectRatio"[];
+            transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>, { map }: _pandacss_types.PatternHelpers): {
+                position: "relative";
+                _before: {
+                    content: "\"\"";
+                    display: "block";
+                    height: "0";
+                    paddingBottom: any;
+                };
+                '&>*': {
+                    display: "flex";
+                    justifyContent: "center";
+                    alignItems: "center";
+                    overflow: "hidden";
+                    position: "absolute";
+                    inset: "0";
+                    width: "100%";
+                    height: "100%";
+                };
+                '&>img, &>video': {
+                    objectFit: "cover";
+                };
+            };
+        };
+        grid: {
+            properties: {
+                gap: {
+                    type: "property";
+                    value: "gap";
+                };
+                columnGap: {
+                    type: "property";
+                    value: "gap";
+                };
+                rowGap: {
+                    type: "property";
+                    value: "gap";
+                };
+                columns: {
+                    type: "number";
+                };
+                minChildWidth: {
+                    type: "token";
+                    value: "sizes";
+                    property: "width";
+                };
+            };
+            transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>, { map }: _pandacss_types.PatternHelpers): {
+                display: "grid";
+                gridTemplateColumns: any;
+                gap: any;
+                columnGap: any;
+                rowGap: any;
+            };
+        };
+        gridItem: {
+            properties: {
+                colSpan: {
+                    type: "number";
+                };
+                rowSpan: {
+                    type: "number";
+                };
+                colStart: {
+                    type: "number";
+                };
+                rowStart: {
+                    type: "number";
+                };
+                colEnd: {
+                    type: "number";
+                };
+                rowEnd: {
+                    type: "number";
+                };
+            };
+            transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>, { map }: _pandacss_types.PatternHelpers): {
+                gridColumn: any;
+                gridRow: any;
+                gridColumnEnd: any;
+                gridRowEnd: any;
+            };
+        };
+        wrap: {
+            properties: {
+                gap: {
+                    type: "property";
+                    value: "gap";
+                };
+                rowGap: {
+                    type: "property";
+                    value: "gap";
+                };
+                columnGap: {
+                    type: "property";
+                    value: "gap";
+                };
+                align: {
+                    type: "property";
+                    value: "alignItems";
+                };
+                justify: {
+                    type: "property";
+                    value: "justifyContent";
+                };
+            };
+            transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>): {
+                display: "flex";
+                flexWrap: "wrap";
+                alignItems: any;
+                justifyContent: any;
+                gap: any;
+                columnGap: any;
+                rowGap: any;
+            };
+        };
+        container: {
+            transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>): {
+                position: "relative";
+                maxWidth: "8xl";
+                mx: string;
+                px: {
+                    base: string;
+                    md: string;
+                    lg: string;
+                };
+            };
+        };
+        divider: {
+            properties: {
+                orientation: {
+                    type: "enum";
+                    value: string[];
+                };
+                thickness: {
+                    type: "token";
+                    value: "sizes";
+                    property: "borderWidth";
+                };
+                color: {
+                    type: "token";
+                    value: "colors";
+                    property: "borderColor";
+                };
+            };
+            transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>, { map }: _pandacss_types.PatternHelpers): {
+                '--thickness': any;
+                width: any;
+                height: any;
+                borderBlockEndWidth: any;
+                borderInlineEndWidth: any;
+                borderColor: any;
+            };
+        };
+        float: {
+            properties: {
+                offsetX: {
+                    type: "token";
+                    value: "spacing";
+                    property: "left";
+                };
+                offsetY: {
+                    type: "token";
+                    value: "spacing";
+                    property: "top";
+                };
+                offset: {
+                    type: "token";
+                    value: "spacing";
+                    property: "top";
+                };
+                placement: {
+                    type: "enum";
+                    value: string[];
+                };
+            };
+            transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>, { map }: _pandacss_types.PatternHelpers): {
+                display: "inline-flex";
+                justifyContent: "center";
+                alignItems: "center";
+                position: "absolute";
+                insetBlockStart: any;
+                insetBlockEnd: any;
+                insetInlineStart: any;
+                insetInlineEnd: any;
+                translate: any;
+            };
+        };
+    };
+};
+export { preset as default, preset };

package/dist/index.d.ts CHANGED Viewed

@@ -94,7 +94,6 @@ declare const preset: {
     utilities: _pandacss_types.UtilityConfig;
     patterns: {
         box: {
-            properties: {};
             transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>): _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>;
         };
         flex: {
@@ -265,7 +264,6 @@ declare const preset: {
             };
         };
         linkBox: {
-            properties: {};
             transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>): {
                 position: "relative";
                 '& :where(a, abbr)': {
@@ -276,7 +274,6 @@ declare const preset: {
         };
         linkOverlay: {
             jsxElement: string;
-            properties: {};
             transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>): {
                 position: "static";
                 _before: any;
@@ -289,15 +286,25 @@ declare const preset: {
                 };
             };
             blocklist: "aspectRatio"[];
-            transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>): {
-                aspectRatio: any;
-                overflow: "hidden";
-                display: "flex";
-                justifyContent: "center";
-                alignItems: "center";
-                '&>img, &>video': {
+            transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>, { map }: _pandacss_types.PatternHelpers): {
+                position: "relative";
+                _before: {
+                    content: "\"\"";
+                    display: "block";
+                    height: "0";
+                    paddingBottom: any;
+                };
+                '&>*': {
+                    display: "flex";
+                    justifyContent: "center";
+                    alignItems: "center";
+                    overflow: "hidden";
+                    position: "absolute";
+                    inset: "0";
                     width: "100%";
                     height: "100%";
+                };
+                '&>img, &>video': {
                     objectFit: "cover";
                 };
             };
@@ -395,7 +402,6 @@ declare const preset: {
             };
         };
         container: {
-            properties: {};
             transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>): {
                 position: "relative";
                 maxWidth: "8xl";
@@ -428,7 +434,7 @@ declare const preset: {
                 '--thickness': any;
                 width: any;
                 height: any;
-                borderInlineStartWidth: any;
+                borderBlockEndWidth: any;
                 borderInlineEndWidth: any;
                 borderColor: any;
             };

package/dist/index.js CHANGED Viewed

@@ -84,7 +84,7 @@ var conditions = {
   autofill: "&:autofill",
   inRange: "&:in-range",
   outOfRange: "&:out-of-range",
-  placeholder: "&:placeholder",
+  placeholder: "&::placeholder",
   placeholderShown: "&:placeholder-shown",
   pressed: "&:where([aria-pressed=true], [data-pressed])",
   selected: "&:where([aria-selected=true], [data-selected])",
@@ -136,7 +136,13 @@ var background = {
   },
   backgroundClip: {
     shorthand: "bgClip",
-    className: "bg-clip"
+    className: "bg-clip",
+    transform(value) {
+      return {
+        backgroundClip: value,
+        WebkitBackgroundClip: value
+      };
+    }
   },
   background: {
     shorthand: "bg",
@@ -677,6 +683,12 @@ var effects = {
         "var(--backdrop-saturate)",
         "var(--backdrop-sepia)"
       ].join(" ")
+    },
+    transform(value) {
+      return {
+        backdropFilter: value,
+        WebkitBackdropFilter: value
+      };
     }
   },
   backdropBlur: {
@@ -1204,7 +1216,13 @@ var interactivity = {
     className: "touch"
   },
   userSelect: {
-    className: "select"
+    className: "select",
+    transform(value) {
+      return {
+        WebkitUserSelect: value,
+        userSelect: value
+      };
+    }
   }
 };
@@ -1213,6 +1231,7 @@ var layout = {
   aspectRatio: {
     className: "aspect",
     values: {
+      auto: "auto",
       square: "1 / 1",
       landscape: "4 / 3",
       portrait: "3 / 4",
@@ -1222,7 +1241,13 @@ var layout = {
     }
   },
   boxDecorationBreak: {
-    className: "decoration"
+    className: "decoration",
+    transform(value) {
+      return {
+        boxDecorationBreak: value,
+        WebkitBoxDecorationBreak: value
+      };
+    }
   },
   zIndex: {
     className: "z"
@@ -1267,7 +1292,10 @@ var layout = {
   },
   inset: {
     className: "inset",
-    values: "spacing"
+    values: (theme) => ({
+      auto: "auto",
+      ...theme("spacing")
+    })
   },
   insetBlockEnd: {
     className: "inset-b",
@@ -1390,6 +1418,7 @@ var outline = {
 // src/utilities/sizing.ts
 var widthValues = (theme) => ({
+  auto: "auto",
   ...theme("sizes"),
   "1/2": "50%",
   "1/3": "33.333333%",
@@ -1420,6 +1449,7 @@ var widthValues = (theme) => ({
   screen: "100vw"
 });
 var heightValues = (theme) => ({
+  auto: "auto",
   ...theme("sizes"),
   svh: "100svh",
   lvh: "100lvh",
@@ -1499,6 +1529,10 @@ var sizing = {
 };
 // src/utilities/spacing.ts
+var marginValues = (theme) => ({
+  auto: "auto",
+  ...theme("spacing")
+});
 var spacing = {
   padding: {
     className: "p",
@@ -1556,55 +1590,55 @@ var spacing = {
   marginLeft: {
     className: "ml",
     shorthand: "ml",
-    values: "spacing"
+    values: marginValues
   },
   marginRight: {
     className: "mr",
     shorthand: "mr",
-    values: "spacing"
+    values: marginValues
   },
   marginTop: {
     className: "mt",
     shorthand: "mt",
-    values: "spacing"
+    values: marginValues
   },
   marginBottom: {
     className: "mb",
     shorthand: "mb",
-    values: "spacing"
+    values: marginValues
   },
   margin: {
     className: "m",
     shorthand: "m",
-    values: "spacing"
+    values: marginValues
   },
   marginBlock: {
     className: "my",
-    values: "spacing",
+    values: marginValues,
     shorthand: ["my", "marginY"]
   },
   marginBlockEnd: {
     className: "mb",
-    values: "spacing"
+    values: marginValues
   },
   marginBlockStart: {
     className: "mt",
-    values: "spacing"
+    values: marginValues
   },
   marginInline: {
     className: "mx",
-    values: "spacing",
+    values: marginValues,
     shorthand: ["mx", "marginX"]
   },
   marginInlineEnd: {
     className: "me",
     shorthand: ["me", "marginEnd"],
-    values: "spacing"
+    values: marginValues
   },
   marginInlineStart: {
     className: "ms",
     shorthand: ["ms", "marginStart"],
-    values: "spacing"
+    values: marginValues
   }
 };
@@ -1890,6 +1924,58 @@ var typography = {
   }
 };
+// src/utilities/polyfill.ts
+var polyfill = {
+  appearance: {
+    className: "appearance",
+    transform(value) {
+      return { appearance: value, WebkitAppearance: value };
+    }
+  },
+  backfaceVisibility: {
+    className: "backface",
+    transform(value) {
+      return { backfaceVisibility: value, WebkitBackfaceVisibility: value };
+    }
+  },
+  clipPath: {
+    className: "clip-path",
+    transform(value) {
+      return { clipPath: value, WebkitClipPath: value };
+    }
+  },
+  hyphens: {
+    className: "hyphens",
+    transform(value) {
+      return { hyphens: value, WebkitHyphens: value };
+    }
+  },
+  mask: {
+    className: "mask",
+    transform(value) {
+      return { mask: value, WebkitMask: value };
+    }
+  },
+  maskImage: {
+    className: "mask-image",
+    transform(value) {
+      return { maskImage: value, WebkitMaskImage: value };
+    }
+  },
+  maskSize: {
+    className: "mask-size",
+    transform(value) {
+      return { maskSize: value, WebkitMaskSize: value };
+    }
+  },
+  textSizeAdjust: {
+    className: "text-size-adjust",
+    transform(value) {
+      return { textSizeAdjust: value, WebkitTextSizeAdjust: value };
+    }
+  }
+};
 // src/utilities/index.ts
 var utilities = Object.assign(
   {},
@@ -1910,7 +1996,8 @@ var utilities = Object.assign(
   transforms,
   interactivity,
   svg,
-  helpers
+  helpers,
+  polyfill
 );
 // src/patterns.ts
@@ -1918,7 +2005,6 @@ function definePattern(config) {
   return config;
 }
 var box = definePattern({
-  properties: {},
   transform(props) {
     return props;
   }
@@ -2116,7 +2202,6 @@ var wrap = definePattern({
   }
 });
 var container = definePattern({
-  properties: {},
   transform(props) {
     return {
       position: "relative",
@@ -2146,17 +2231,27 @@ var aspectRatio = definePattern({
     ratio: { type: "number" }
   },
   blocklist: ["aspectRatio"],
-  transform(props) {
-    const { ratio, ...rest } = props;
+  transform(props, { map }) {
+    const { ratio = 4 / 3, ...rest } = props;
     return {
-      aspectRatio: ratio,
-      overflow: "hidden",
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      "&>img, &>video": {
+      position: "relative",
+      _before: {
+        content: `""`,
+        display: "block",
+        height: "0",
+        paddingBottom: map(ratio, (r) => `${1 / r * 100}%`)
+      },
+      "&>*": {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        overflow: "hidden",
+        position: "absolute",
+        inset: "0",
         width: "100%",
-        height: "100%",
+        height: "100%"
+      },
+      "&>img, &>video": {
         objectFit: "cover"
       },
       ...rest
@@ -2175,7 +2270,7 @@ var divider = definePattern({
       "--thickness": thickness,
       width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),
       height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"),
-      borderInlineStartWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0),
+      borderBlockEndWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0),
       borderInlineEndWidth: map(orientation, (v) => v === "vertical" ? "var(--thickness)" : void 0),
       borderColor: color,
       ...rest
@@ -2183,7 +2278,6 @@ var divider = definePattern({
   }
 });
 var linkBox = definePattern({
-  properties: {},
   transform(props) {
     return {
       position: "relative",
@@ -2197,7 +2291,6 @@ var linkBox = definePattern({
 });
 var linkOverlay = definePattern({
   jsxElement: "a",
-  properties: {},
   transform(props) {
     return {
       position: "static",

package/dist/index.mjs CHANGED Viewed

@@ -57,7 +57,7 @@ var conditions = {
   autofill: "&:autofill",
   inRange: "&:in-range",
   outOfRange: "&:out-of-range",
-  placeholder: "&:placeholder",
+  placeholder: "&::placeholder",
   placeholderShown: "&:placeholder-shown",
   pressed: "&:where([aria-pressed=true], [data-pressed])",
   selected: "&:where([aria-selected=true], [data-selected])",
@@ -109,7 +109,13 @@ var background = {
   },
   backgroundClip: {
     shorthand: "bgClip",
-    className: "bg-clip"
+    className: "bg-clip",
+    transform(value) {
+      return {
+        backgroundClip: value,
+        WebkitBackgroundClip: value
+      };
+    }
   },
   background: {
     shorthand: "bg",
@@ -650,6 +656,12 @@ var effects = {
         "var(--backdrop-saturate)",
         "var(--backdrop-sepia)"
       ].join(" ")
+    },
+    transform(value) {
+      return {
+        backdropFilter: value,
+        WebkitBackdropFilter: value
+      };
     }
   },
   backdropBlur: {
@@ -1177,7 +1189,13 @@ var interactivity = {
     className: "touch"
   },
   userSelect: {
-    className: "select"
+    className: "select",
+    transform(value) {
+      return {
+        WebkitUserSelect: value,
+        userSelect: value
+      };
+    }
   }
 };
@@ -1186,6 +1204,7 @@ var layout = {
   aspectRatio: {
     className: "aspect",
     values: {
+      auto: "auto",
       square: "1 / 1",
       landscape: "4 / 3",
       portrait: "3 / 4",
@@ -1195,7 +1214,13 @@ var layout = {
     }
   },
   boxDecorationBreak: {
-    className: "decoration"
+    className: "decoration",
+    transform(value) {
+      return {
+        boxDecorationBreak: value,
+        WebkitBoxDecorationBreak: value
+      };
+    }
   },
   zIndex: {
     className: "z"
@@ -1240,7 +1265,10 @@ var layout = {
   },
   inset: {
     className: "inset",
-    values: "spacing"
+    values: (theme) => ({
+      auto: "auto",
+      ...theme("spacing")
+    })
   },
   insetBlockEnd: {
     className: "inset-b",
@@ -1363,6 +1391,7 @@ var outline = {
 // src/utilities/sizing.ts
 var widthValues = (theme) => ({
+  auto: "auto",
   ...theme("sizes"),
   "1/2": "50%",
   "1/3": "33.333333%",
@@ -1393,6 +1422,7 @@ var widthValues = (theme) => ({
   screen: "100vw"
 });
 var heightValues = (theme) => ({
+  auto: "auto",
   ...theme("sizes"),
   svh: "100svh",
   lvh: "100lvh",
@@ -1472,6 +1502,10 @@ var sizing = {
 };
 // src/utilities/spacing.ts
+var marginValues = (theme) => ({
+  auto: "auto",
+  ...theme("spacing")
+});
 var spacing = {
   padding: {
     className: "p",
@@ -1529,55 +1563,55 @@ var spacing = {
   marginLeft: {
     className: "ml",
     shorthand: "ml",
-    values: "spacing"
+    values: marginValues
   },
   marginRight: {
     className: "mr",
     shorthand: "mr",
-    values: "spacing"
+    values: marginValues
   },
   marginTop: {
     className: "mt",
     shorthand: "mt",
-    values: "spacing"
+    values: marginValues
   },
   marginBottom: {
     className: "mb",
     shorthand: "mb",
-    values: "spacing"
+    values: marginValues
   },
   margin: {
     className: "m",
     shorthand: "m",
-    values: "spacing"
+    values: marginValues
   },
   marginBlock: {
     className: "my",
-    values: "spacing",
+    values: marginValues,
     shorthand: ["my", "marginY"]
   },
   marginBlockEnd: {
     className: "mb",
-    values: "spacing"
+    values: marginValues
   },
   marginBlockStart: {
     className: "mt",
-    values: "spacing"
+    values: marginValues
   },
   marginInline: {
     className: "mx",
-    values: "spacing",
+    values: marginValues,
     shorthand: ["mx", "marginX"]
   },
   marginInlineEnd: {
     className: "me",
     shorthand: ["me", "marginEnd"],
-    values: "spacing"
+    values: marginValues
   },
   marginInlineStart: {
     className: "ms",
     shorthand: ["ms", "marginStart"],
-    values: "spacing"
+    values: marginValues
   }
 };
@@ -1863,6 +1897,58 @@ var typography = {
   }
 };
+// src/utilities/polyfill.ts
+var polyfill = {
+  appearance: {
+    className: "appearance",
+    transform(value) {
+      return { appearance: value, WebkitAppearance: value };
+    }
+  },
+  backfaceVisibility: {
+    className: "backface",
+    transform(value) {
+      return { backfaceVisibility: value, WebkitBackfaceVisibility: value };
+    }
+  },
+  clipPath: {
+    className: "clip-path",
+    transform(value) {
+      return { clipPath: value, WebkitClipPath: value };
+    }
+  },
+  hyphens: {
+    className: "hyphens",
+    transform(value) {
+      return { hyphens: value, WebkitHyphens: value };
+    }
+  },
+  mask: {
+    className: "mask",
+    transform(value) {
+      return { mask: value, WebkitMask: value };
+    }
+  },
+  maskImage: {
+    className: "mask-image",
+    transform(value) {
+      return { maskImage: value, WebkitMaskImage: value };
+    }
+  },
+  maskSize: {
+    className: "mask-size",
+    transform(value) {
+      return { maskSize: value, WebkitMaskSize: value };
+    }
+  },
+  textSizeAdjust: {
+    className: "text-size-adjust",
+    transform(value) {
+      return { textSizeAdjust: value, WebkitTextSizeAdjust: value };
+    }
+  }
+};
 // src/utilities/index.ts
 var utilities = Object.assign(
   {},
@@ -1883,7 +1969,8 @@ var utilities = Object.assign(
   transforms,
   interactivity,
   svg,
-  helpers
+  helpers,
+  polyfill
 );
 // src/patterns.ts
@@ -1891,7 +1978,6 @@ function definePattern(config) {
   return config;
 }
 var box = definePattern({
-  properties: {},
   transform(props) {
     return props;
   }
@@ -2089,7 +2175,6 @@ var wrap = definePattern({
   }
 });
 var container = definePattern({
-  properties: {},
   transform(props) {
     return {
       position: "relative",
@@ -2119,17 +2204,27 @@ var aspectRatio = definePattern({
     ratio: { type: "number" }
   },
   blocklist: ["aspectRatio"],
-  transform(props) {
-    const { ratio, ...rest } = props;
+  transform(props, { map }) {
+    const { ratio = 4 / 3, ...rest } = props;
     return {
-      aspectRatio: ratio,
-      overflow: "hidden",
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      "&>img, &>video": {
+      position: "relative",
+      _before: {
+        content: `""`,
+        display: "block",
+        height: "0",
+        paddingBottom: map(ratio, (r) => `${1 / r * 100}%`)
+      },
+      "&>*": {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        overflow: "hidden",
+        position: "absolute",
+        inset: "0",
         width: "100%",
-        height: "100%",
+        height: "100%"
+      },
+      "&>img, &>video": {
         objectFit: "cover"
       },
       ...rest
@@ -2148,7 +2243,7 @@ var divider = definePattern({
       "--thickness": thickness,
       width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),
       height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"),
-      borderInlineStartWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0),
+      borderBlockEndWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0),
       borderInlineEndWidth: map(orientation, (v) => v === "vertical" ? "var(--thickness)" : void 0),
       borderColor: color,
       ...rest
@@ -2156,7 +2251,6 @@ var divider = definePattern({
   }
 });
 var linkBox = definePattern({
-  properties: {},
   transform(props) {
     return {
       position: "relative",
@@ -2170,7 +2264,6 @@ var linkBox = definePattern({
 });
 var linkOverlay = definePattern({
   jsxElement: "a",
-  properties: {},
   transform(props) {
     return {
       position: "static",

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/preset-base",
-  "version": "0.3.2",
+  "version": "0.5.0",
   "description": "The base preset for Panda CSS that contains the conditions and utilities",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -14,7 +14,7 @@
     "dist"
   ],
   "dependencies": {
-    "@pandacss/types": "0.3.2"
+    "@pandacss/types": "0.5.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format=esm,cjs --dts",