@pandacss/preset-base 0.53.7 → 1.0.0

package/dist/index.d.mts

@@ -108,6 +108,8 @@ declare const preset: {
         vertical: string;
         icon: string;
         starting: string;
+        noscript: string;
+        invertedColors: string;
     };
     utilities: _pandacss_types.UtilityConfig;
     patterns: {

package/dist/index.d.ts

@@ -108,6 +108,8 @@ declare const preset: {
         vertical: string;
         icon: string;
         starting: string;
+        noscript: string;
+        invertedColors: string;
     };
     utilities: _pandacss_types.UtilityConfig;
     patterns: {

package/dist/index.js

@@ -18,12 +18,12 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  default: () => src_default,
+var index_exports = {};
+__export(index_exports, {
+  default: () => index_default,
   preset: () => preset
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/conditions.ts
 var conditions = {
@@ -31,11 +31,11 @@ var conditions = {
   focus: "&:is(:focus, [data-focus])",
   focusWithin: "&:focus-within",
   focusVisible: "&:is(:focus-visible, [data-focus-visible])",
-  disabled: "&:is(:disabled, [disabled], [data-disabled])",
+  disabled: "&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])",
   active: "&:is(:active, [data-active])",
   visited: "&:visited",
   target: "&:target",
-  readOnly: "&:is(:read-only, [data-read-only])",
+  readOnly: "&:is(:read-only, [data-read-only], [aria-readonly=true])",
   readWrite: "&:read-write",
   empty: "&:is(:empty, [data-empty])",
   checked: '&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])',
@@ -49,7 +49,7 @@ var conditions = {
   after: "&::after",
   firstLetter: "&::first-letter",
   firstLine: "&::first-line",
-  marker: "&::marker",
+  marker: "&:is(::marker, ::-webkit-details-marker)",
   selection: "&::selection",
   file: "&::file-selector-button",
   backdrop: "&::backdrop",
@@ -66,7 +66,7 @@ var conditions = {
   peerActive: ".peer:is(:active, [data-active]) ~ &",
   peerFocusWithin: ".peer:focus-within ~ &",
   peerFocusVisible: ".peer:is(:focus-visible, [data-focus-visible]) ~ &",
-  peerDisabled: ".peer:is(:disabled, [disabled], [data-disabled]) ~ &",
+  peerDisabled: ".peer:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) ~ &",
   peerChecked: '.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &',
   peerInvalid: ".peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &",
   peerExpanded: '.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &',
@@ -76,14 +76,14 @@ var conditions = {
   groupActive: ".group:is(:active, [data-active]) &",
   groupFocusWithin: ".group:focus-within &",
   groupFocusVisible: ".group:is(:focus-visible, [data-focus-visible]) &",
-  groupDisabled: ".group:is(:disabled, [disabled], [data-disabled]) &",
+  groupDisabled: ".group:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) &",
   groupChecked: '.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &',
   groupExpanded: '.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &',
-  groupInvalid: ".group:is(:invalid, [data-invalid]) &",
+  groupInvalid: ".group:is(:invalid, [data-invalid], [aria-invalid=true]) &",
   indeterminate: '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])',
   required: "&:is(:required, [data-required], [aria-required=true])",
   valid: "&:is(:valid, [data-valid])",
-  invalid: "&:is(:invalid, [data-invalid])",
+  invalid: "&:is(:invalid, [data-invalid], [aria-invalid=true])",
   autofill: "&:autofill",
   inRange: "&:is(:in-range, [data-in-range])",
   outOfRange: "&:is(:out-of-range, [data-outside-range])",
@@ -97,7 +97,7 @@ var conditions = {
   atValue: "&[data-state=at-value]",
   default: "&:default",
   optional: "&:optional",
-  open: '&:is([open], [data-open], [data-state="open"])',
+  open: '&:is([open], [data-open], [data-state="open"], :popover-open)',
   closed: '&:is([closed], [data-closed], [data-state="closed"])',
   fullscreen: "&:is(:fullscreen, [data-fullscreen])",
   loading: "&:is([data-loading], [aria-busy=true])",
@@ -123,15 +123,17 @@ var conditions = {
   highContrast: "@media (forced-colors: active)",
   lessContrast: "@media (prefers-contrast: less)",
   moreContrast: "@media (prefers-contrast: more)",
-  ltr: "[dir=ltr] &",
-  rtl: "[dir=rtl] &",
+  ltr: ":where([dir=ltr], :dir(ltr)) &",
+  rtl: ":where([dir=rtl], :dir(rtl)) &",
   scrollbar: "&::-webkit-scrollbar",
   scrollbarThumb: "&::-webkit-scrollbar-thumb",
   scrollbarTrack: "&::-webkit-scrollbar-track",
   horizontal: "&[data-orientation=horizontal]",
   vertical: "&[data-orientation=vertical]",
   icon: "& :where(svg)",
-  starting: "@starting-style"
+  starting: "@starting-style",
+  noscript: "@media (scripting: none)",
+  invertedColors: "@media (inverted-colors: inverted)"
 };
 
 // src/global-css.ts
@@ -619,8 +621,7 @@ var patterns = {
 // src/color-mix-transform.ts
 var createColorMixTransform = (prop) => (value, args) => {
   const mix = args.utils.colorMix(value);
-  if (mix.invalid)
-    return { [prop]: value };
+  if (mix.invalid) return { [prop]: value };
   const cssVar = "--mix-" + prop;
   return {
     [cssVar]: mix.value,
@@ -1513,51 +1514,84 @@ var flexGrid = {
 
 // src/utilities/gradient.ts
 var gradientVia = createColorMixTransform("--gradient-via");
-var gradientTemplate = {
-  "to-t": "linear-gradient(to top, var(--gradient))",
-  "to-tr": "linear-gradient(to top right, var(--gradient))",
-  "to-r": "linear-gradient(to right, var(--gradient))",
-  "to-br": "linear-gradient(to bottom right, var(--gradient))",
-  "to-b": "linear-gradient(to bottom, var(--gradient))",
-  "to-bl": "linear-gradient(to bottom left, var(--gradient))",
-  "to-l": "linear-gradient(to left, var(--gradient))",
-  "to-tl": "linear-gradient(to top left, var(--gradient))"
+var union = (values) => {
+  return Array.from(values).map((value) => `'${value}'`).join(" | ");
 };
-var gradientVars = {
-  "--gradient-stops": "var(--gradient-via-stops, var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))",
-  "--gradient": "var(--gradient-via-stops, var(--gradient-stops))"
+var linearGradientDirectionMap = /* @__PURE__ */ new Map([
+  ["to-t", "to top"],
+  ["to-tr", "to top right"],
+  ["to-r", "to right"],
+  ["to-br", "to bottom right"],
+  ["to-b", "to bottom"],
+  ["to-bl", "to bottom left"],
+  ["to-l", "to left"],
+  ["to-tl", "to top left"]
+]);
+var linearGradientValues = {
+  type: union(linearGradientDirectionMap.keys())
 };
+var gradientStops = "var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))";
+var gradientViaStops = "var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-via) var(--gradient-via-position), var(--gradient-to) var(--gradient-to-position)";
 var backgroundGradients = {
   backgroundGradient: {
     shorthand: "bgGradient",
     className: "bg-grad",
     group: "Background Gradient",
-    values(theme) {
+    values: linearGradientValues,
+    transform(value) {
       return {
-        ...theme("gradients"),
-        ...gradientTemplate
+        "--gradient-stops": gradientStops,
+        "--gradient-position": linearGradientDirectionMap.get(value) || value,
+        backgroundImage: `linear-gradient(var(--gradient-stops))`
       };
-    },
+    }
+  },
+  backgroundLinear: {
+    shorthand: "bgLinear",
+    className: "bg-linear",
+    group: "Background Gradient",
+    values: linearGradientValues,
     transform(value) {
       return {
-        ...gradientVars,
-        backgroundImage: value
+        "--gradient-stops": gradientStops,
+        "--gradient-position": linearGradientDirectionMap.get(value) || value,
+        backgroundImage: `linear-gradient(var(--gradient-stops))`
       };
     }
   },
-  textGradient: {
-    className: "txt-grad",
+  backgroundRadial: {
+    shorthand: "bgRadial",
+    className: "bg-radial",
     group: "Background Gradient",
-    values(theme) {
+    transform(value) {
       return {
-        ...theme("gradients"),
-        ...gradientTemplate
+        "--gradient-stops": gradientStops,
+        "--gradient-position": value,
+        backgroundImage: `radial-gradient(var(--gradient-stops,${value}))`
       };
-    },
+    }
+  },
+  backgroundConic: {
+    shorthand: "bgConic",
+    className: "bg-conic",
+    group: "Background Gradient",
     transform(value) {
       return {
-        ...gradientVars,
-        backgroundImage: value,
+        "--gradient-stops": gradientStops,
+        "--gradient-position": value,
+        backgroundImage: `conic-gradient(var(--gradient-stops))`
+      };
+    }
+  },
+  textGradient: {
+    className: "txt-grad",
+    group: "Background Gradient",
+    values: linearGradientValues,
+    transform(value) {
+      return {
+        "--gradient-stops": gradientStops,
+        "--gradient-position": linearGradientDirectionMap.get(value) || value,
+        backgroundImage: `linear-gradient(var(--gradient-stops))`,
         WebkitBackgroundClip: "text",
         color: "transparent"
       };
@@ -1601,7 +1635,8 @@ var backgroundGradients = {
       const transformed = gradientVia(value, args);
       return {
         ...transformed,
-        "--gradient-stops": "var(--gradient-from) var(--gradient-from-position), var(--gradient-via) var(--gradient-via-position), var(--gradient-to) var(--gradient-to-position)"
+        "--gradient-stops": "var(--gradient-via-stops)",
+        "--gradient-via-stops": gradientViaStops
       };
     }
   },
@@ -1654,8 +1689,7 @@ var helpers = {
     values: { type: "boolean" },
     group: "Other",
     transform(value) {
-      if (!value)
-        return {};
+      if (!value) return {};
       return {
         outline: "1px solid blue !important",
         "&>*": {
@@ -2388,6 +2422,17 @@ var sizing = {
     className: "max-b",
     group: "Height",
     values: heightValues
+  },
+  boxSize: {
+    className: "size",
+    group: "Width",
+    values: widthValues,
+    transform(value) {
+      return {
+        width: value,
+        height: value
+      };
+    }
   }
 };
 
@@ -3088,8 +3133,7 @@ var typography = {
     values: { type: "boolean" },
     group: "Typography",
     transform(value) {
-      if (!value)
-        return {};
+      if (!value) return {};
       return {
         overflow: "hidden",
         textOverflow: "ellipsis",
@@ -3153,7 +3197,7 @@ var preset = definePreset({
   // globalVars,
   globalCss
 });
-var src_default = preset;
+var index_default = preset;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   preset

package/dist/index.mjs

@@ -4,11 +4,11 @@ var conditions = {
   focus: "&:is(:focus, [data-focus])",
   focusWithin: "&:focus-within",
   focusVisible: "&:is(:focus-visible, [data-focus-visible])",
-  disabled: "&:is(:disabled, [disabled], [data-disabled])",
+  disabled: "&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])",
   active: "&:is(:active, [data-active])",
   visited: "&:visited",
   target: "&:target",
-  readOnly: "&:is(:read-only, [data-read-only])",
+  readOnly: "&:is(:read-only, [data-read-only], [aria-readonly=true])",
   readWrite: "&:read-write",
   empty: "&:is(:empty, [data-empty])",
   checked: '&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])',
@@ -22,7 +22,7 @@ var conditions = {
   after: "&::after",
   firstLetter: "&::first-letter",
   firstLine: "&::first-line",
-  marker: "&::marker",
+  marker: "&:is(::marker, ::-webkit-details-marker)",
   selection: "&::selection",
   file: "&::file-selector-button",
   backdrop: "&::backdrop",
@@ -39,7 +39,7 @@ var conditions = {
   peerActive: ".peer:is(:active, [data-active]) ~ &",
   peerFocusWithin: ".peer:focus-within ~ &",
   peerFocusVisible: ".peer:is(:focus-visible, [data-focus-visible]) ~ &",
-  peerDisabled: ".peer:is(:disabled, [disabled], [data-disabled]) ~ &",
+  peerDisabled: ".peer:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) ~ &",
   peerChecked: '.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &',
   peerInvalid: ".peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &",
   peerExpanded: '.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &',
@@ -49,14 +49,14 @@ var conditions = {
   groupActive: ".group:is(:active, [data-active]) &",
   groupFocusWithin: ".group:focus-within &",
   groupFocusVisible: ".group:is(:focus-visible, [data-focus-visible]) &",
-  groupDisabled: ".group:is(:disabled, [disabled], [data-disabled]) &",
+  groupDisabled: ".group:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) &",
   groupChecked: '.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &',
   groupExpanded: '.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &',
-  groupInvalid: ".group:is(:invalid, [data-invalid]) &",
+  groupInvalid: ".group:is(:invalid, [data-invalid], [aria-invalid=true]) &",
   indeterminate: '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])',
   required: "&:is(:required, [data-required], [aria-required=true])",
   valid: "&:is(:valid, [data-valid])",
-  invalid: "&:is(:invalid, [data-invalid])",
+  invalid: "&:is(:invalid, [data-invalid], [aria-invalid=true])",
   autofill: "&:autofill",
   inRange: "&:is(:in-range, [data-in-range])",
   outOfRange: "&:is(:out-of-range, [data-outside-range])",
@@ -70,7 +70,7 @@ var conditions = {
   atValue: "&[data-state=at-value]",
   default: "&:default",
   optional: "&:optional",
-  open: '&:is([open], [data-open], [data-state="open"])',
+  open: '&:is([open], [data-open], [data-state="open"], :popover-open)',
   closed: '&:is([closed], [data-closed], [data-state="closed"])',
   fullscreen: "&:is(:fullscreen, [data-fullscreen])",
   loading: "&:is([data-loading], [aria-busy=true])",
@@ -96,15 +96,17 @@ var conditions = {
   highContrast: "@media (forced-colors: active)",
   lessContrast: "@media (prefers-contrast: less)",
   moreContrast: "@media (prefers-contrast: more)",
-  ltr: "[dir=ltr] &",
-  rtl: "[dir=rtl] &",
+  ltr: ":where([dir=ltr], :dir(ltr)) &",
+  rtl: ":where([dir=rtl], :dir(rtl)) &",
   scrollbar: "&::-webkit-scrollbar",
   scrollbarThumb: "&::-webkit-scrollbar-thumb",
   scrollbarTrack: "&::-webkit-scrollbar-track",
   horizontal: "&[data-orientation=horizontal]",
   vertical: "&[data-orientation=vertical]",
   icon: "& :where(svg)",
-  starting: "@starting-style"
+  starting: "@starting-style",
+  noscript: "@media (scripting: none)",
+  invertedColors: "@media (inverted-colors: inverted)"
 };
 
 // src/global-css.ts
@@ -592,8 +594,7 @@ var patterns = {
 // src/color-mix-transform.ts
 var createColorMixTransform = (prop) => (value, args) => {
   const mix = args.utils.colorMix(value);
-  if (mix.invalid)
-    return { [prop]: value };
+  if (mix.invalid) return { [prop]: value };
   const cssVar = "--mix-" + prop;
   return {
     [cssVar]: mix.value,
@@ -1486,51 +1487,84 @@ var flexGrid = {
 
 // src/utilities/gradient.ts
 var gradientVia = createColorMixTransform("--gradient-via");
-var gradientTemplate = {
-  "to-t": "linear-gradient(to top, var(--gradient))",
-  "to-tr": "linear-gradient(to top right, var(--gradient))",
-  "to-r": "linear-gradient(to right, var(--gradient))",
-  "to-br": "linear-gradient(to bottom right, var(--gradient))",
-  "to-b": "linear-gradient(to bottom, var(--gradient))",
-  "to-bl": "linear-gradient(to bottom left, var(--gradient))",
-  "to-l": "linear-gradient(to left, var(--gradient))",
-  "to-tl": "linear-gradient(to top left, var(--gradient))"
+var union = (values) => {
+  return Array.from(values).map((value) => `'${value}'`).join(" | ");
 };
-var gradientVars = {
-  "--gradient-stops": "var(--gradient-via-stops, var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))",
-  "--gradient": "var(--gradient-via-stops, var(--gradient-stops))"
+var linearGradientDirectionMap = /* @__PURE__ */ new Map([
+  ["to-t", "to top"],
+  ["to-tr", "to top right"],
+  ["to-r", "to right"],
+  ["to-br", "to bottom right"],
+  ["to-b", "to bottom"],
+  ["to-bl", "to bottom left"],
+  ["to-l", "to left"],
+  ["to-tl", "to top left"]
+]);
+var linearGradientValues = {
+  type: union(linearGradientDirectionMap.keys())
 };
+var gradientStops = "var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))";
+var gradientViaStops = "var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-via) var(--gradient-via-position), var(--gradient-to) var(--gradient-to-position)";
 var backgroundGradients = {
   backgroundGradient: {
     shorthand: "bgGradient",
     className: "bg-grad",
     group: "Background Gradient",
-    values(theme) {
+    values: linearGradientValues,
+    transform(value) {
       return {
-        ...theme("gradients"),
-        ...gradientTemplate
+        "--gradient-stops": gradientStops,
+        "--gradient-position": linearGradientDirectionMap.get(value) || value,
+        backgroundImage: `linear-gradient(var(--gradient-stops))`
       };
-    },
+    }
+  },
+  backgroundLinear: {
+    shorthand: "bgLinear",
+    className: "bg-linear",
+    group: "Background Gradient",
+    values: linearGradientValues,
     transform(value) {
       return {
-        ...gradientVars,
-        backgroundImage: value
+        "--gradient-stops": gradientStops,
+        "--gradient-position": linearGradientDirectionMap.get(value) || value,
+        backgroundImage: `linear-gradient(var(--gradient-stops))`
       };
     }
   },
-  textGradient: {
-    className: "txt-grad",
+  backgroundRadial: {
+    shorthand: "bgRadial",
+    className: "bg-radial",
     group: "Background Gradient",
-    values(theme) {
+    transform(value) {
       return {
-        ...theme("gradients"),
-        ...gradientTemplate
+        "--gradient-stops": gradientStops,
+        "--gradient-position": value,
+        backgroundImage: `radial-gradient(var(--gradient-stops,${value}))`
       };
-    },
+    }
+  },
+  backgroundConic: {
+    shorthand: "bgConic",
+    className: "bg-conic",
+    group: "Background Gradient",
     transform(value) {
       return {
-        ...gradientVars,
-        backgroundImage: value,
+        "--gradient-stops": gradientStops,
+        "--gradient-position": value,
+        backgroundImage: `conic-gradient(var(--gradient-stops))`
+      };
+    }
+  },
+  textGradient: {
+    className: "txt-grad",
+    group: "Background Gradient",
+    values: linearGradientValues,
+    transform(value) {
+      return {
+        "--gradient-stops": gradientStops,
+        "--gradient-position": linearGradientDirectionMap.get(value) || value,
+        backgroundImage: `linear-gradient(var(--gradient-stops))`,
         WebkitBackgroundClip: "text",
         color: "transparent"
       };
@@ -1574,7 +1608,8 @@ var backgroundGradients = {
       const transformed = gradientVia(value, args);
       return {
         ...transformed,
-        "--gradient-stops": "var(--gradient-from) var(--gradient-from-position), var(--gradient-via) var(--gradient-via-position), var(--gradient-to) var(--gradient-to-position)"
+        "--gradient-stops": "var(--gradient-via-stops)",
+        "--gradient-via-stops": gradientViaStops
       };
     }
   },
@@ -1627,8 +1662,7 @@ var helpers = {
     values: { type: "boolean" },
     group: "Other",
     transform(value) {
-      if (!value)
-        return {};
+      if (!value) return {};
       return {
         outline: "1px solid blue !important",
         "&>*": {
@@ -2361,6 +2395,17 @@ var sizing = {
     className: "max-b",
     group: "Height",
     values: heightValues
+  },
+  boxSize: {
+    className: "size",
+    group: "Width",
+    values: widthValues,
+    transform(value) {
+      return {
+        width: value,
+        height: value
+      };
+    }
   }
 };
 
@@ -3061,8 +3106,7 @@ var typography = {
     values: { type: "boolean" },
     group: "Typography",
     transform(value) {
-      if (!value)
-        return {};
+      if (!value) return {};
       return {
         overflow: "hidden",
         textOverflow: "ellipsis",
@@ -3126,8 +3170,8 @@ var preset = definePreset({
   // globalVars,
   globalCss
 });
-var src_default = preset;
+var index_default = preset;
 export {
-  src_default as default,
+  index_default as default,
   preset
 };

package/package.json

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