@pandacss/preset-base 1.1.0 → 1.2.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([
@@ -3189,6 +3284,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([
@@ -3162,6 +3257,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.2.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.2.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format=esm,cjs --dts",