@pandacss/preset-base 0.5.1 → 0.7.0

package/dist/index.d.mts

@@ -80,7 +80,7 @@ declare const preset: {
         light: string;
         osDark: string;
         osLight: string;
-        highConstrast: string;
+        highContrast: string;
         lessContrast: string;
         moreContrast: string;
         ltr: string;
@@ -364,7 +364,9 @@ declare const preset: {
             transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>, { map }: _pandacss_types.PatternHelpers): {
                 gridColumn: any;
                 gridRow: any;
+                gridColumnStart: any;
                 gridColumnEnd: any;
+                gridRowStart: any;
                 gridRowEnd: any;
             };
         };

package/dist/index.d.ts

@@ -80,7 +80,7 @@ declare const preset: {
         light: string;
         osDark: string;
         osLight: string;
-        highConstrast: string;
+        highContrast: string;
         lessContrast: string;
         moreContrast: string;
         ltr: string;
@@ -364,7 +364,9 @@ declare const preset: {
             transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>, { map }: _pandacss_types.PatternHelpers): {
                 gridColumn: any;
                 gridRow: any;
+                gridColumnStart: any;
                 gridColumnEnd: any;
+                gridRowStart: any;
                 gridRowEnd: any;
             };
         };

package/dist/index.js

@@ -53,8 +53,8 @@ var conditions = {
   first: "&:first-child",
   last: "&:last-child",
   only: "&:only-child",
-  even: "&:even",
-  odd: "&:odd",
+  even: "&:nth-child(even)",
+  odd: "&:nth-child(odd)",
   firstOfType: "&:first-of-type",
   lastOfType: "&:last-of-type",
   onlyOfType: "&:only-of-type",
@@ -104,7 +104,7 @@ var conditions = {
   light: " &.light, .light &",
   osDark: "@media (prefers-color-scheme: dark)",
   osLight: "@media (prefers-color-scheme: light)",
-  highConstrast: "@media (forced-colors: active)",
+  highContrast: "@media (forced-colors: active)",
   lessContrast: "@media (prefers-contrast: less)",
   moreContrast: "@media (prefers-contrast: more)",
   ltr: "[dir=ltr] &",
@@ -608,7 +608,7 @@ var effects = {
     className: "contrast",
     transform(value) {
       return {
-        "--contrast": `constrast(${value})`
+        "--contrast": `contrast(${value})`
       };
     }
   },
@@ -712,7 +712,7 @@ var effects = {
     className: "backdrop-contrast",
     transform(value) {
       return {
-        "--backdrop-contrast": `constrast(${value})`
+        "--backdrop-contrast": `contrast(${value})`
       };
     }
   },
@@ -840,7 +840,7 @@ var flexGrid = {
     }
   },
   gridTemplateRows: {
-    className: "grid-cols",
+    className: "grid-rows",
     values: {
       "1": "repeat(1, minmax(0, 1fr))",
       "2": "repeat(2, minmax(0, 1fr))",
@@ -1250,7 +1250,8 @@ var layout = {
     }
   },
   zIndex: {
-    className: "z"
+    className: "z",
+    values: "zIndex"
   },
   boxSizing: {
     className: "box"
@@ -1687,6 +1688,19 @@ var tables = {
 };
 
 // src/utilities/transforms.ts
+var positiveFractions = {
+  "1/2": "50%",
+  "1/3": "33.333333%",
+  "2/3": "66.666667%",
+  "1/4": "25%",
+  "2/4": "50%",
+  "3/4": "75%",
+  full: "100%"
+};
+var negativeFractions = Object.fromEntries(
+  Object.entries(positiveFractions).map(([key, value]) => [`-${key}`, `-${value}`])
+);
+var fractions = { ...positiveFractions, ...negativeFractions };
 var transforms = {
   transformOrigin: {
     className: "origin"
@@ -1727,13 +1741,7 @@ var transforms = {
     values(theme) {
       return {
         ...theme("spacing"),
-        "1/2": "50%",
-        "1/3": "33.333333%",
-        "2/3": "66.666667%",
-        "1/4": "25%",
-        "2/4": "50%",
-        "3/4": "75%",
-        full: "100%"
+        ...fractions
       };
     },
     transform(value) {
@@ -1748,13 +1756,7 @@ var transforms = {
     values(theme) {
       return {
         ...theme("spacing"),
-        "1/2": "50%",
-        "1/3": "33.333333%",
-        "2/3": "66.666667%",
-        "1/4": "25%",
-        "2/4": "50%",
-        "3/4": "75%",
-        full: "100%"
+        ...fractions
       };
     },
     transform(value) {
@@ -1766,10 +1768,32 @@ var transforms = {
 };
 
 // src/utilities/transitions.ts
+var createTransition = (value) => ({
+  transitionProperty: `var(--transition-prop, ${value})`,
+  transitionTimingFunction: "var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1))",
+  transitionDuration: "var(--transition-duration, 150ms)"
+});
+var transitionMap = {
+  all: createTransition("all"),
+  common: createTransition(
+    "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter"
+  ),
+  background: createTransition("background, background-color"),
+  colors: createTransition("color, background-color, border-color, outline-color, text-decoration-color, fill, stroke"),
+  opacity: createTransition("opacity"),
+  shadow: createTransition("box-shadow"),
+  transform: createTransition("transform")
+};
 var transitions = {
   transitionTimingFunction: {
     className: "ease",
-    values: "easings"
+    values: "easings",
+    transform(value) {
+      return {
+        "--transition-easing": value,
+        transitionTimingFunction: value
+      };
+    }
   },
   transitionDelay: {
     className: "delay",
@@ -1777,19 +1801,28 @@ var transitions = {
   },
   transitionDuration: {
     className: "duration",
-    values: "durations"
+    values: "durations",
+    transform(value) {
+      return {
+        "--transition-duration": value,
+        transitionDuration: value
+      };
+    }
   },
   transitionProperty: {
+    className: "transition-prop",
+    transform(value) {
+      return {
+        "--transition-prop": value,
+        transitionProperty: value
+      };
+    }
+  },
+  transition: {
     className: "transition",
-    values: {
-      all: "all",
-      none: "none",
-      opacity: "opacity",
-      shadow: "box-shadow",
-      transform: "transform",
-      base: "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
-      background: "background, background-color",
-      colors: "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke"
+    values: Object.keys(transitionMap),
+    transform(value) {
+      return transitionMap[value] ?? { transition: value };
     }
   },
   animation: {
@@ -2173,7 +2206,9 @@ var gridItem = definePattern({
     return {
       gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0,
       gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0,
+      gridColumnStart: colStart,
       gridColumnEnd: colEnd,
+      gridRowStart: rowStart,
       gridRowEnd: rowEnd,
       ...rest
     };

package/dist/index.mjs

@@ -26,8 +26,8 @@ var conditions = {
   first: "&:first-child",
   last: "&:last-child",
   only: "&:only-child",
-  even: "&:even",
-  odd: "&:odd",
+  even: "&:nth-child(even)",
+  odd: "&:nth-child(odd)",
   firstOfType: "&:first-of-type",
   lastOfType: "&:last-of-type",
   onlyOfType: "&:only-of-type",
@@ -77,7 +77,7 @@ var conditions = {
   light: " &.light, .light &",
   osDark: "@media (prefers-color-scheme: dark)",
   osLight: "@media (prefers-color-scheme: light)",
-  highConstrast: "@media (forced-colors: active)",
+  highContrast: "@media (forced-colors: active)",
   lessContrast: "@media (prefers-contrast: less)",
   moreContrast: "@media (prefers-contrast: more)",
   ltr: "[dir=ltr] &",
@@ -581,7 +581,7 @@ var effects = {
     className: "contrast",
     transform(value) {
       return {
-        "--contrast": `constrast(${value})`
+        "--contrast": `contrast(${value})`
       };
     }
   },
@@ -685,7 +685,7 @@ var effects = {
     className: "backdrop-contrast",
     transform(value) {
       return {
-        "--backdrop-contrast": `constrast(${value})`
+        "--backdrop-contrast": `contrast(${value})`
       };
     }
   },
@@ -813,7 +813,7 @@ var flexGrid = {
     }
   },
   gridTemplateRows: {
-    className: "grid-cols",
+    className: "grid-rows",
     values: {
       "1": "repeat(1, minmax(0, 1fr))",
       "2": "repeat(2, minmax(0, 1fr))",
@@ -1223,7 +1223,8 @@ var layout = {
     }
   },
   zIndex: {
-    className: "z"
+    className: "z",
+    values: "zIndex"
   },
   boxSizing: {
     className: "box"
@@ -1660,6 +1661,19 @@ var tables = {
 };
 
 // src/utilities/transforms.ts
+var positiveFractions = {
+  "1/2": "50%",
+  "1/3": "33.333333%",
+  "2/3": "66.666667%",
+  "1/4": "25%",
+  "2/4": "50%",
+  "3/4": "75%",
+  full: "100%"
+};
+var negativeFractions = Object.fromEntries(
+  Object.entries(positiveFractions).map(([key, value]) => [`-${key}`, `-${value}`])
+);
+var fractions = { ...positiveFractions, ...negativeFractions };
 var transforms = {
   transformOrigin: {
     className: "origin"
@@ -1700,13 +1714,7 @@ var transforms = {
     values(theme) {
       return {
         ...theme("spacing"),
-        "1/2": "50%",
-        "1/3": "33.333333%",
-        "2/3": "66.666667%",
-        "1/4": "25%",
-        "2/4": "50%",
-        "3/4": "75%",
-        full: "100%"
+        ...fractions
       };
     },
     transform(value) {
@@ -1721,13 +1729,7 @@ var transforms = {
     values(theme) {
       return {
         ...theme("spacing"),
-        "1/2": "50%",
-        "1/3": "33.333333%",
-        "2/3": "66.666667%",
-        "1/4": "25%",
-        "2/4": "50%",
-        "3/4": "75%",
-        full: "100%"
+        ...fractions
       };
     },
     transform(value) {
@@ -1739,10 +1741,32 @@ var transforms = {
 };
 
 // src/utilities/transitions.ts
+var createTransition = (value) => ({
+  transitionProperty: `var(--transition-prop, ${value})`,
+  transitionTimingFunction: "var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1))",
+  transitionDuration: "var(--transition-duration, 150ms)"
+});
+var transitionMap = {
+  all: createTransition("all"),
+  common: createTransition(
+    "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter"
+  ),
+  background: createTransition("background, background-color"),
+  colors: createTransition("color, background-color, border-color, outline-color, text-decoration-color, fill, stroke"),
+  opacity: createTransition("opacity"),
+  shadow: createTransition("box-shadow"),
+  transform: createTransition("transform")
+};
 var transitions = {
   transitionTimingFunction: {
     className: "ease",
-    values: "easings"
+    values: "easings",
+    transform(value) {
+      return {
+        "--transition-easing": value,
+        transitionTimingFunction: value
+      };
+    }
   },
   transitionDelay: {
     className: "delay",
@@ -1750,19 +1774,28 @@ var transitions = {
   },
   transitionDuration: {
     className: "duration",
-    values: "durations"
+    values: "durations",
+    transform(value) {
+      return {
+        "--transition-duration": value,
+        transitionDuration: value
+      };
+    }
   },
   transitionProperty: {
+    className: "transition-prop",
+    transform(value) {
+      return {
+        "--transition-prop": value,
+        transitionProperty: value
+      };
+    }
+  },
+  transition: {
     className: "transition",
-    values: {
-      all: "all",
-      none: "none",
-      opacity: "opacity",
-      shadow: "box-shadow",
-      transform: "transform",
-      base: "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
-      background: "background, background-color",
-      colors: "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke"
+    values: Object.keys(transitionMap),
+    transform(value) {
+      return transitionMap[value] ?? { transition: value };
     }
   },
   animation: {
@@ -2146,7 +2179,9 @@ var gridItem = definePattern({
     return {
       gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0,
       gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0,
+      gridColumnStart: colStart,
       gridColumnEnd: colEnd,
+      gridRowStart: rowStart,
       gridRowEnd: rowEnd,
       ...rest
     };

package/package.json

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