@pandacss/preset-base 0.3.1 → 0.4.0

package/dist/index.d.ts

@@ -289,15 +289,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";
                 };
             };
@@ -428,7 +438,7 @@ declare const preset: {
                 '--thickness': any;
                 width: any;
                 height: any;
-                borderInlineStartWidth: any;
+                borderBlockEndWidth: any;
                 borderInlineEndWidth: any;
                 borderColor: any;
             };

package/dist/index.js

@@ -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
@@ -2146,17 +2233,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 +2272,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

package/dist/index.mjs

@@ -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
@@ -2119,17 +2206,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 +2245,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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/preset-base",
-  "version": "0.3.1",
+  "version": "0.4.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.1"
+    "@pandacss/types": "0.4.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format=esm,cjs --dts",