@pandacss/preset-base 1.1.0 → 1.3.0

package/dist/index.js

@@ -1512,6 +1512,101 @@ var flexGrid = {
   }
 };
 
+// src/utilities/focus-ring.ts
+function createFocusRing(selector, className) {
+  return {
+    className,
+    group: "Focus Ring",
+    values: ["outside", "inside", "mixed", "none"],
+    transform(value) {
+      const fallback = "var(--global-color-focus-ring, #005FCC)";
+      const focusRingColor = `var(--focus-ring-color-prop, ${fallback})`;
+      switch (value) {
+        case "inside":
+          return {
+            "--focus-ring-color": focusRingColor,
+            [selector]: {
+              outlineOffset: "0px",
+              outlineWidth: "var(--focus-ring-width, 1px)",
+              outlineColor: "var(--focus-ring-color)",
+              outlineStyle: "var(--focus-ring-style, solid)",
+              borderColor: "var(--focus-ring-color)"
+            }
+          };
+        case "outside":
+          return {
+            "--focus-ring-color": focusRingColor,
+            [selector]: {
+              outlineWidth: "var(--focus-ring-width, 2px)",
+              outlineOffset: "var(--focus-ring-offset, 2px)",
+              outlineStyle: "var(--focus-ring-style, solid)",
+              outlineColor: "var(--focus-ring-color)"
+            }
+          };
+        case "mixed":
+          return {
+            "--focus-ring-color": focusRingColor,
+            [selector]: {
+              outlineOffset: "0px",
+              outlineWidth: "var(--focus-ring-width, 3px)",
+              outlineStyle: "var(--focus-ring-style, solid)",
+              outlineColor: "color-mix(in srgb, var(--focus-ring-color), transparent 60%)",
+              borderColor: "var(--focus-ring-color)"
+            }
+          };
+        case "none":
+          return {
+            "--focus-ring-color": focusRingColor,
+            [selector]: {
+              outline: "none"
+            }
+          };
+        default:
+          return {};
+      }
+    }
+  };
+}
+var focusRing = {
+  focusRing: createFocusRing("&:is(:focus, [data-focus])", "focus-ring"),
+  focusVisibleRing: createFocusRing("&:is(:focus-visible, [data-focus-visible])", "focus-v-ring"),
+  focusRingColor: {
+    className: "focus-ring-c",
+    values: "colors",
+    group: "Focus Ring",
+    transform(value, { utils }) {
+      const prop = "--focus-ring-color-prop";
+      const mix = utils.colorMix(value);
+      if (mix.invalid) return { [prop]: value };
+      const cssVar = "--mix-" + prop;
+      return {
+        [cssVar]: mix.value,
+        [prop]: `var(${cssVar}, ${mix.color})`
+      };
+    }
+  },
+  focusRingOffset: {
+    className: "focus-ring-o",
+    values: "spacing",
+    group: "Focus Ring",
+    transform: (v) => ({ "--focus-ring-offset": v })
+  },
+  focusRingWidth: {
+    className: "focus-ring-w",
+    values: "borderWidths",
+    property: "outlineWidth",
+    group: "Focus Ring",
+    transform: (v) => ({ "--focus-ring-width": v })
+  },
+  focusRingStyle: {
+    className: "focus-ring-s",
+    values: "borderStyles",
+    property: "outlineStyle",
+    group: "Focus Ring",
+    transform: (v) => ({ "--focus-ring-style": v })
+  }
+};
+
 // src/utilities/gradient.ts
 var gradientVia = createColorMixTransform("--gradient-via");
 var linearGradientDirectionMap = /* @__PURE__ */ new Map([
@@ -2874,12 +2969,21 @@ var transitionMap = {
   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"),
+  size: createTransition("width, height, min-width, max-width, min-height, max-height"),
+  position: createTransition("left, right, top, bottom, inset, inset-inline, inset-block"),
+  background: createTransition("background, background-color, background-image, background-position"),
   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 transitionPropertyMap = {
+  common: "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
+  colors: "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke",
+  size: "width, height, min-width, max-width, min-height, max-height",
+  position: "left, right, top, bottom, inset, inset-inline, inset-block",
+  background: "background, background-color, background-image, background-position"
+};
 var transitions = {
   transitionTimingFunction: {
     className: "trs-tmf",
@@ -2911,6 +3015,7 @@ var transitions = {
   transitionProperty: {
     className: "trs-prop",
     group: "Transition",
+    values: transitionPropertyMap,
     transform(value) {
       return {
         "--transition-prop": value,
@@ -3189,6 +3294,7 @@ var utilities = Object.assign(
   flexGrid,
   spacing,
   outline,
+  focusRing,
   divide,
   sizing,
   typography,

package/dist/index.mjs

@@ -1485,6 +1485,101 @@ var flexGrid = {
   }
 };
 
+// src/utilities/focus-ring.ts
+function createFocusRing(selector, className) {
+  return {
+    className,
+    group: "Focus Ring",
+    values: ["outside", "inside", "mixed", "none"],
+    transform(value) {
+      const fallback = "var(--global-color-focus-ring, #005FCC)";
+      const focusRingColor = `var(--focus-ring-color-prop, ${fallback})`;
+      switch (value) {
+        case "inside":
+          return {
+            "--focus-ring-color": focusRingColor,
+            [selector]: {
+              outlineOffset: "0px",
+              outlineWidth: "var(--focus-ring-width, 1px)",
+              outlineColor: "var(--focus-ring-color)",
+              outlineStyle: "var(--focus-ring-style, solid)",
+              borderColor: "var(--focus-ring-color)"
+            }
+          };
+        case "outside":
+          return {
+            "--focus-ring-color": focusRingColor,
+            [selector]: {
+              outlineWidth: "var(--focus-ring-width, 2px)",
+              outlineOffset: "var(--focus-ring-offset, 2px)",
+              outlineStyle: "var(--focus-ring-style, solid)",
+              outlineColor: "var(--focus-ring-color)"
+            }
+          };
+        case "mixed":
+          return {
+            "--focus-ring-color": focusRingColor,
+            [selector]: {
+              outlineOffset: "0px",
+              outlineWidth: "var(--focus-ring-width, 3px)",
+              outlineStyle: "var(--focus-ring-style, solid)",
+              outlineColor: "color-mix(in srgb, var(--focus-ring-color), transparent 60%)",
+              borderColor: "var(--focus-ring-color)"
+            }
+          };
+        case "none":
+          return {
+            "--focus-ring-color": focusRingColor,
+            [selector]: {
+              outline: "none"
+            }
+          };
+        default:
+          return {};
+      }
+    }
+  };
+}
+var focusRing = {
+  focusRing: createFocusRing("&:is(:focus, [data-focus])", "focus-ring"),
+  focusVisibleRing: createFocusRing("&:is(:focus-visible, [data-focus-visible])", "focus-v-ring"),
+  focusRingColor: {
+    className: "focus-ring-c",
+    values: "colors",
+    group: "Focus Ring",
+    transform(value, { utils }) {
+      const prop = "--focus-ring-color-prop";
+      const mix = utils.colorMix(value);
+      if (mix.invalid) return { [prop]: value };
+      const cssVar = "--mix-" + prop;
+      return {
+        [cssVar]: mix.value,
+        [prop]: `var(${cssVar}, ${mix.color})`
+      };
+    }
+  },
+  focusRingOffset: {
+    className: "focus-ring-o",
+    values: "spacing",
+    group: "Focus Ring",
+    transform: (v) => ({ "--focus-ring-offset": v })
+  },
+  focusRingWidth: {
+    className: "focus-ring-w",
+    values: "borderWidths",
+    property: "outlineWidth",
+    group: "Focus Ring",
+    transform: (v) => ({ "--focus-ring-width": v })
+  },
+  focusRingStyle: {
+    className: "focus-ring-s",
+    values: "borderStyles",
+    property: "outlineStyle",
+    group: "Focus Ring",
+    transform: (v) => ({ "--focus-ring-style": v })
+  }
+};
+
 // src/utilities/gradient.ts
 var gradientVia = createColorMixTransform("--gradient-via");
 var linearGradientDirectionMap = /* @__PURE__ */ new Map([
@@ -2847,12 +2942,21 @@ var transitionMap = {
   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"),
+  size: createTransition("width, height, min-width, max-width, min-height, max-height"),
+  position: createTransition("left, right, top, bottom, inset, inset-inline, inset-block"),
+  background: createTransition("background, background-color, background-image, background-position"),
   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 transitionPropertyMap = {
+  common: "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
+  colors: "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke",
+  size: "width, height, min-width, max-width, min-height, max-height",
+  position: "left, right, top, bottom, inset, inset-inline, inset-block",
+  background: "background, background-color, background-image, background-position"
+};
 var transitions = {
   transitionTimingFunction: {
     className: "trs-tmf",
@@ -2884,6 +2988,7 @@ var transitions = {
   transitionProperty: {
     className: "trs-prop",
     group: "Transition",
+    values: transitionPropertyMap,
     transform(value) {
       return {
         "--transition-prop": value,
@@ -3162,6 +3267,7 @@ var utilities = Object.assign(
   flexGrid,
   spacing,
   outline,
+  focusRing,
   divide,
   sizing,
   typography,

package/package.json

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