@pandacss/preset-base 0.5.0 → 0.6.0

package/dist/index.d.mts

@@ -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

@@ -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

@@ -27,20 +27,20 @@ module.exports = __toCommonJS(src_exports);
 
 // src/conditions.ts
 var conditions = {
-  hover: "&:where(:hover, [data-hover])",
-  focus: "&:where(:focus, [data-focus])",
+  hover: "&:is(:hover, [data-hover])",
+  focus: "&:is(:focus, [data-focus])",
   focusWithin: "&:focus-within",
-  focusVisible: "&:where(:focus-visible, [data-focus-visible])",
-  disabled: "&:where(:disabled, [disabled], [data-disabled])",
-  active: "&:where(:active, [data-active])",
+  focusVisible: "&:is(:focus-visible, [data-focus-visible])",
+  disabled: "&:is(:disabled, [disabled], [data-disabled])",
+  active: "&:is(:active, [data-active])",
   visited: "&:visited",
   target: "&:target",
-  readOnly: "&:where(:read-only, [data-read-only])",
+  readOnly: "&:is(:read-only, [data-read-only])",
   readWrite: "&:read-write",
-  empty: "&:where(:empty, [data-empty])",
-  checked: "&:where(:checked, [data-checked], [aria-checked=true])",
+  empty: "&:is(:empty, [data-empty])",
+  checked: "&:is(:checked, [data-checked], [aria-checked=true])",
   enabled: "&:enabled",
-  expanded: "&:where([aria-expanded=true], [data-expanded])",
+  expanded: "&:is([aria-expanded=true], [data-expanded])",
   highlighted: "&[data-highlighted]",
   before: "&::before",
   after: "&::after",
@@ -53,46 +53,46 @@ 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",
-  peerFocus: ".peer:where(:focus, [data-focus]) ~ &",
-  peerHover: ".peer:where(:hover, [data-hover]) ~ &",
-  peerActive: ".peer:where(:active, [data-active]) ~ &",
+  peerFocus: ".peer:is(:focus, [data-focus]) ~ &",
+  peerHover: ".peer:is(:hover, [data-hover]) ~ &",
+  peerActive: ".peer:is(:active, [data-active]) ~ &",
   peerFocusWithin: ".peer:focus-within ~ &",
-  peerFocusVisible: ".peer:where(:focus-visible, [data-focus-visible]) ~ &",
-  peerDisabled: ".peer:where(:disabled, [disabled], [data-disabled]) ~ &",
-  peerChecked: ".peer:where(:checked, [data-checked], [aria-checked=true]) ~ &",
-  peerInvalid: ".peer:where(:invalid, [data-invalid], [aria-invalid=true]) ~ &",
-  peerExpanded: ".peer:where([aria-expanded=true], [data-expanded]) ~ &",
+  peerFocusVisible: ".peer:is(:focus-visible, [data-focus-visible]) ~ &",
+  peerDisabled: ".peer:is(:disabled, [disabled], [data-disabled]) ~ &",
+  peerChecked: ".peer:is(:checked, [data-checked], [aria-checked=true]) ~ &",
+  peerInvalid: ".peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &",
+  peerExpanded: ".peer:is([aria-expanded=true], [data-expanded]) ~ &",
   peerPlaceholderShown: ".peer:placeholder-shown ~ &",
-  groupFocus: ".group:where(:focus, [data-focus]) &",
-  groupHover: ".group:where(:hover, [data-hover]) &",
-  groupActive: ".group:where(:active, [data-active]) &",
+  groupFocus: ".group:is(:focus, [data-focus]) &",
+  groupHover: ".group:is(:hover, [data-hover]) &",
+  groupActive: ".group:is(:active, [data-active]) &",
   groupFocusWithin: ".group:focus-within &",
-  groupFocusVisible: ".group:where(:focus-visible, [data-focus-visible]) &",
-  groupDisabled: ".group:where(:disabled, [disabled], [data-disabled]) &",
-  groupChecked: ".group:where(:checked, [data-checked], [aria-checked=true]) &",
-  groupExpanded: ".group:where([aria-expanded=true], [data-expanded]) &",
+  groupFocusVisible: ".group:is(:focus-visible, [data-focus-visible]) &",
+  groupDisabled: ".group:is(:disabled, [disabled], [data-disabled]) &",
+  groupChecked: ".group:is(:checked, [data-checked], [aria-checked=true]) &",
+  groupExpanded: ".group:is([aria-expanded=true], [data-expanded]) &",
   groupInvalid: ".group:invalid &",
-  indeterminate: "&:where(:indeterminate, [data-indeterminate], [aria-checked=mixed])",
+  indeterminate: "&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed])",
   required: "&:required",
-  valid: "&:where(:valid, [data-valid])",
-  invalid: "&:where(:invalid, [data-invalid])",
+  valid: "&:is(:valid, [data-valid])",
+  invalid: "&:is(:invalid, [data-invalid])",
   autofill: "&:autofill",
   inRange: "&:in-range",
   outOfRange: "&:out-of-range",
   placeholder: "&::placeholder",
   placeholderShown: "&:placeholder-shown",
-  pressed: "&:where([aria-pressed=true], [data-pressed])",
-  selected: "&:where([aria-selected=true], [data-selected])",
+  pressed: "&:is([aria-pressed=true], [data-pressed])",
+  selected: "&:is([aria-selected=true], [data-selected])",
   default: "&:default",
   optional: "&:optional",
   open: "&[open]",
   fullscreen: "&:fullscreen",
-  loading: "&:where([data-loading], [aria-busy=true])",
+  loading: "&:is([data-loading], [aria-busy=true])",
   currentPage: "&[aria-current=page]",
   currentStep: "&[aria-current=step]",
   motionReduce: "@media (prefers-reduced-motion: reduce)",
@@ -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))",
@@ -1687,6 +1687,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 +1740,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 +1755,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) {
@@ -2173,7 +2174,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

@@ -1,19 +1,19 @@
 // src/conditions.ts
 var conditions = {
-  hover: "&:where(:hover, [data-hover])",
-  focus: "&:where(:focus, [data-focus])",
+  hover: "&:is(:hover, [data-hover])",
+  focus: "&:is(:focus, [data-focus])",
   focusWithin: "&:focus-within",
-  focusVisible: "&:where(:focus-visible, [data-focus-visible])",
-  disabled: "&:where(:disabled, [disabled], [data-disabled])",
-  active: "&:where(:active, [data-active])",
+  focusVisible: "&:is(:focus-visible, [data-focus-visible])",
+  disabled: "&:is(:disabled, [disabled], [data-disabled])",
+  active: "&:is(:active, [data-active])",
   visited: "&:visited",
   target: "&:target",
-  readOnly: "&:where(:read-only, [data-read-only])",
+  readOnly: "&:is(:read-only, [data-read-only])",
   readWrite: "&:read-write",
-  empty: "&:where(:empty, [data-empty])",
-  checked: "&:where(:checked, [data-checked], [aria-checked=true])",
+  empty: "&:is(:empty, [data-empty])",
+  checked: "&:is(:checked, [data-checked], [aria-checked=true])",
   enabled: "&:enabled",
-  expanded: "&:where([aria-expanded=true], [data-expanded])",
+  expanded: "&:is([aria-expanded=true], [data-expanded])",
   highlighted: "&[data-highlighted]",
   before: "&::before",
   after: "&::after",
@@ -26,46 +26,46 @@ 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",
-  peerFocus: ".peer:where(:focus, [data-focus]) ~ &",
-  peerHover: ".peer:where(:hover, [data-hover]) ~ &",
-  peerActive: ".peer:where(:active, [data-active]) ~ &",
+  peerFocus: ".peer:is(:focus, [data-focus]) ~ &",
+  peerHover: ".peer:is(:hover, [data-hover]) ~ &",
+  peerActive: ".peer:is(:active, [data-active]) ~ &",
   peerFocusWithin: ".peer:focus-within ~ &",
-  peerFocusVisible: ".peer:where(:focus-visible, [data-focus-visible]) ~ &",
-  peerDisabled: ".peer:where(:disabled, [disabled], [data-disabled]) ~ &",
-  peerChecked: ".peer:where(:checked, [data-checked], [aria-checked=true]) ~ &",
-  peerInvalid: ".peer:where(:invalid, [data-invalid], [aria-invalid=true]) ~ &",
-  peerExpanded: ".peer:where([aria-expanded=true], [data-expanded]) ~ &",
+  peerFocusVisible: ".peer:is(:focus-visible, [data-focus-visible]) ~ &",
+  peerDisabled: ".peer:is(:disabled, [disabled], [data-disabled]) ~ &",
+  peerChecked: ".peer:is(:checked, [data-checked], [aria-checked=true]) ~ &",
+  peerInvalid: ".peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &",
+  peerExpanded: ".peer:is([aria-expanded=true], [data-expanded]) ~ &",
   peerPlaceholderShown: ".peer:placeholder-shown ~ &",
-  groupFocus: ".group:where(:focus, [data-focus]) &",
-  groupHover: ".group:where(:hover, [data-hover]) &",
-  groupActive: ".group:where(:active, [data-active]) &",
+  groupFocus: ".group:is(:focus, [data-focus]) &",
+  groupHover: ".group:is(:hover, [data-hover]) &",
+  groupActive: ".group:is(:active, [data-active]) &",
   groupFocusWithin: ".group:focus-within &",
-  groupFocusVisible: ".group:where(:focus-visible, [data-focus-visible]) &",
-  groupDisabled: ".group:where(:disabled, [disabled], [data-disabled]) &",
-  groupChecked: ".group:where(:checked, [data-checked], [aria-checked=true]) &",
-  groupExpanded: ".group:where([aria-expanded=true], [data-expanded]) &",
+  groupFocusVisible: ".group:is(:focus-visible, [data-focus-visible]) &",
+  groupDisabled: ".group:is(:disabled, [disabled], [data-disabled]) &",
+  groupChecked: ".group:is(:checked, [data-checked], [aria-checked=true]) &",
+  groupExpanded: ".group:is([aria-expanded=true], [data-expanded]) &",
   groupInvalid: ".group:invalid &",
-  indeterminate: "&:where(:indeterminate, [data-indeterminate], [aria-checked=mixed])",
+  indeterminate: "&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed])",
   required: "&:required",
-  valid: "&:where(:valid, [data-valid])",
-  invalid: "&:where(:invalid, [data-invalid])",
+  valid: "&:is(:valid, [data-valid])",
+  invalid: "&:is(:invalid, [data-invalid])",
   autofill: "&:autofill",
   inRange: "&:in-range",
   outOfRange: "&:out-of-range",
   placeholder: "&::placeholder",
   placeholderShown: "&:placeholder-shown",
-  pressed: "&:where([aria-pressed=true], [data-pressed])",
-  selected: "&:where([aria-selected=true], [data-selected])",
+  pressed: "&:is([aria-pressed=true], [data-pressed])",
+  selected: "&:is([aria-selected=true], [data-selected])",
   default: "&:default",
   optional: "&:optional",
   open: "&[open]",
   fullscreen: "&:fullscreen",
-  loading: "&:where([data-loading], [aria-busy=true])",
+  loading: "&:is([data-loading], [aria-busy=true])",
   currentPage: "&[aria-current=page]",
   currentStep: "&[aria-current=step]",
   motionReduce: "@media (prefers-reduced-motion: reduce)",
@@ -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))",
@@ -1660,6 +1660,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 +1713,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 +1728,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) {
@@ -2146,7 +2147,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.0",
+  "version": "0.6.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.0"
+    "@pandacss/types": "0.6.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format=esm,cjs --dts",