@pandacss/preset-base 0.17.5 → 0.18.1

package/dist/index.js

@@ -78,7 +78,7 @@ var conditions = {
   groupExpanded: '.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &',
   groupInvalid: ".group:invalid &",
   indeterminate: '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate")',
-  required: "&:required",
+  required: "&:is(:required, [data-required], [aria-required=true])",
   valid: "&:is(:valid, [data-valid])",
   invalid: "&:is(:invalid, [data-invalid])",
   autofill: "&:autofill",
@@ -500,9 +500,11 @@ var display = {
   hideFrom: {
     className: "hide",
     values: "breakpoints",
-    transform(value, { raw }) {
+    transform(value, { raw, token }) {
+      const bp = token.raw(`breakpoints.${raw}`);
+      const media = bp ? `@breakpoint ${raw}` : `@media screen and (min-width: ${value})`;
       return {
-        [`@breakpoint ${raw}`]: {
+        [media]: {
           display: "none"
         }
       };
@@ -511,9 +513,11 @@ var display = {
   hideBelow: {
     className: "show",
     values: "breakpoints",
-    transform(value, { raw }) {
+    transform(value, { raw, token }) {
+      const bp = token.raw(`breakpoints.${raw}`);
+      const media = bp ? `@breakpoint ${raw}Down` : `@media screen and (max-width: ${value})`;
       return {
-        [`@breakpoint ${raw}Down`]: {
+        [media]: {
           display: "none"
         }
       };
@@ -2198,10 +2202,12 @@ var grid = definePattern({
     minChildWidth: { type: "token", value: "sizes", property: "width" }
   },
   transform(props, { map }) {
+    const regex = /\d+(cm|in|pt|em|px|rem|vh|vmax|vmin|vw|ch|lh|%)$/;
     const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", columns, minChildWidth, ...rest } = props;
+    const getValue = (v) => regex.test(v) ? v : `token(sizes.${v}, ${v})`;
     return {
       display: "grid",
-      gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${v}, 1fr))`) : void 0,
+      gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${getValue(v)}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${getValue(v)}, 1fr))`) : void 0,
       gap,
       columnGap,
       rowGap,

package/dist/index.mjs

@@ -51,7 +51,7 @@ var conditions = {
   groupExpanded: '.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &',
   groupInvalid: ".group:invalid &",
   indeterminate: '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate")',
-  required: "&:required",
+  required: "&:is(:required, [data-required], [aria-required=true])",
   valid: "&:is(:valid, [data-valid])",
   invalid: "&:is(:invalid, [data-invalid])",
   autofill: "&:autofill",
@@ -473,9 +473,11 @@ var display = {
   hideFrom: {
     className: "hide",
     values: "breakpoints",
-    transform(value, { raw }) {
+    transform(value, { raw, token }) {
+      const bp = token.raw(`breakpoints.${raw}`);
+      const media = bp ? `@breakpoint ${raw}` : `@media screen and (min-width: ${value})`;
       return {
-        [`@breakpoint ${raw}`]: {
+        [media]: {
           display: "none"
         }
       };
@@ -484,9 +486,11 @@ var display = {
   hideBelow: {
     className: "show",
     values: "breakpoints",
-    transform(value, { raw }) {
+    transform(value, { raw, token }) {
+      const bp = token.raw(`breakpoints.${raw}`);
+      const media = bp ? `@breakpoint ${raw}Down` : `@media screen and (max-width: ${value})`;
       return {
-        [`@breakpoint ${raw}Down`]: {
+        [media]: {
           display: "none"
         }
       };
@@ -2171,10 +2175,12 @@ var grid = definePattern({
     minChildWidth: { type: "token", value: "sizes", property: "width" }
   },
   transform(props, { map }) {
+    const regex = /\d+(cm|in|pt|em|px|rem|vh|vmax|vmin|vw|ch|lh|%)$/;
     const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", columns, minChildWidth, ...rest } = props;
+    const getValue = (v) => regex.test(v) ? v : `token(sizes.${v}, ${v})`;
     return {
       display: "grid",
-      gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${v}, 1fr))`) : void 0,
+      gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${getValue(v)}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${getValue(v)}, 1fr))`) : void 0,
       gap,
       columnGap,
       rowGap,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/preset-base",
-  "version": "0.17.5",
+  "version": "0.18.1",
   "description": "The base preset for Panda CSS that contains the conditions and utilities",
   "author": "Segun Adebayo <joseshegs@gmail.com>",
   "main": "dist/index.js",
@@ -26,7 +26,7 @@
     "dist"
   ],
   "dependencies": {
-    "@pandacss/types": "0.17.5"
+    "@pandacss/types": "0.18.1"
   },
   "scripts": {
     "build": "tsup src/index.ts --format=esm,cjs --dts",