@chakra-ui/panda-preset 3.3.0

package/dist/cjs/utilities.cjs

@@ -0,0 +1,85 @@
+"use strict";
+'use strict';
+
+var def = require('./def.cjs');
+
+const createFocusRing = (selector) => {
+  return {
+    values: ["outside", "inside", "mixed", "none"],
+    transform(value, { token }) {
+      const focusRingColor = token("colors.colorPalette.focusRing");
+      const styles = {
+        inside: {
+          "--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)"
+          }
+        },
+        outside: {
+          "--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)"
+          }
+        },
+        mixed: {
+          "--focus-ring-color": focusRingColor,
+          [selector]: {
+            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)"
+          }
+        },
+        none: {
+          "--focus-ring-color": focusRingColor,
+          [selector]: {
+            outline: "none"
+          }
+        }
+      };
+      return styles[value] ?? {};
+    }
+  };
+};
+const utilities = def.defineUtilities({
+  focusRing: createFocusRing("&:is(:focus, [data-focus])"),
+  focusVisibleRing: createFocusRing(
+    "&:is(:focus-visible, [data-focus-visible])"
+  ),
+  focusRingColor: {
+    values: "colors",
+    transform(value, { utils }) {
+      const prop = "--focus-ring-color";
+      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: {
+    values: "spacing",
+    transform: (v) => ({ "--focus-ring-offset": v })
+  },
+  focusRingWidth: {
+    values: "borderWidths",
+    property: "outlineWidth",
+    transform: (v) => ({ "--focus-ring-width": v })
+  },
+  focusRingStyle: {
+    values: "borderStyles",
+    property: "outlineStyle",
+    transform: (v) => ({ "--focus-ring-style": v })
+  }
+});
+
+exports.utilities = utilities;

package/dist/esm/animation-styles.js

@@ -0,0 +1,53 @@
+"use strict";
+import { defineAnimationStyles } from './def.js';
+
+const animationStyles = defineAnimationStyles({
+  "slide-fade-in": {
+    value: {
+      transformOrigin: "var(--transform-origin)",
+      "&[data-placement^=top]": {
+        animationName: "slide-from-bottom, fade-in"
+      },
+      "&[data-placement^=bottom]": {
+        animationName: "slide-from-top, fade-in"
+      },
+      "&[data-placement^=left]": {
+        animationName: "slide-from-right, fade-in"
+      },
+      "&[data-placement^=right]": {
+        animationName: "slide-from-left, fade-in"
+      }
+    }
+  },
+  "slide-fade-out": {
+    value: {
+      transformOrigin: "var(--transform-origin)",
+      "&[data-placement^=top]": {
+        animationName: "slide-to-bottom, fade-out"
+      },
+      "&[data-placement^=bottom]": {
+        animationName: "slide-to-top, fade-out"
+      },
+      "&[data-placement^=left]": {
+        animationName: "slide-to-right, fade-out"
+      },
+      "&[data-placement^=right]": {
+        animationName: "slide-to-left, fade-out"
+      }
+    }
+  },
+  "scale-fade-in": {
+    value: {
+      transformOrigin: "var(--transform-origin)",
+      animationName: "scale-in, fade-in"
+    }
+  },
+  "scale-fade-out": {
+    value: {
+      transformOrigin: "var(--transform-origin)",
+      animationName: "scale-out, fade-out"
+    }
+  }
+});
+
+export { animationStyles };

package/dist/esm/breakpoints.js

@@ -0,0 +1,10 @@
+"use strict";
+const breakpoints = {
+  sm: "480px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1536px"
+};
+
+export { breakpoints };

package/dist/esm/def.js

@@ -0,0 +1,22 @@
+"use strict";
+const defineConfig = (config) => config;
+const defineRecipe = (recipes) => recipes;
+const defineSlotRecipe = (slotRecipes) => slotRecipes;
+const defineTextStyles = (textStyles) => textStyles;
+const defineLayerStyles = (layerStyles) => layerStyles;
+const defineAnimationStyles = (animationStyles) => animationStyles;
+const defineGlobalStyles = (globalStyles) => globalStyles;
+function createProxy() {
+  const identity = (v) => v;
+  return new Proxy(identity, {
+    get() {
+      return identity;
+    }
+  });
+}
+const defineTokens = /* @__PURE__ */ createProxy();
+const defineSemanticTokens = /* @__PURE__ */ createProxy();
+const definePreset = (preset) => preset;
+const defineUtilities = (utilities) => utilities;
+
+export { defineAnimationStyles, defineConfig, defineGlobalStyles, defineLayerStyles, definePreset, defineRecipe, defineSemanticTokens, defineSlotRecipe, defineTextStyles, defineTokens, defineUtilities };

package/dist/esm/global-css.js

@@ -0,0 +1,48 @@
+"use strict";
+import { defineGlobalStyles } from './def.js';
+
+const globalCss = defineGlobalStyles({
+  "*": {
+    fontFeatureSettings: '"cv11"',
+    "--ring-inset": "var(--empty,/*!*/ /*!*/)",
+    "--ring-offset-width": "0px",
+    "--ring-offset-color": "#fff",
+    "--ring-color": "rgba(66, 153, 225, 0.6)",
+    "--ring-offset-shadow": "0 0 #0000",
+    "--ring-shadow": "0 0 #0000",
+    "--brightness": "var(--empty,/*!*/ /*!*/)",
+    "--contrast": "var(--empty,/*!*/ /*!*/)",
+    "--grayscale": "var(--empty,/*!*/ /*!*/)",
+    "--hue-rotate": "var(--empty,/*!*/ /*!*/)",
+    "--invert": "var(--empty,/*!*/ /*!*/)",
+    "--saturate": "var(--empty,/*!*/ /*!*/)",
+    "--sepia": "var(--empty,/*!*/ /*!*/)",
+    "--drop-shadow": "var(--empty,/*!*/ /*!*/)",
+    "--backdrop-blur": "var(--empty,/*!*/ /*!*/)",
+    "--backdrop-brightness": "var(--empty,/*!*/ /*!*/)",
+    "--backdrop-contrast": "var(--empty,/*!*/ /*!*/)",
+    "--backdrop-grayscale": "var(--empty,/*!*/ /*!*/)",
+    "--backdrop-hue-rotate": "var(--empty,/*!*/ /*!*/)",
+    "--backdrop-invert": "var(--empty,/*!*/ /*!*/)",
+    "--backdrop-opacity": "var(--empty,/*!*/ /*!*/)",
+    "--backdrop-saturate": "var(--empty,/*!*/ /*!*/)",
+    "--backdrop-sepia": "var(--empty,/*!*/ /*!*/)",
+    "--global-font-mono": "fonts.mono",
+    "--global-font-body": "fonts.body",
+    "--global-color-border": "colors.border"
+  },
+  html: {
+    color: "fg",
+    bg: "bg",
+    lineHeight: "1.5",
+    colorPalette: "gray"
+  },
+  "*::placeholder": {
+    color: "fg.muted/80"
+  },
+  "*::selection": {
+    bg: "colorPalette.muted/80"
+  }
+});
+
+export { globalCss };

package/dist/esm/index.js

@@ -0,0 +1,39 @@
+"use strict";
+import { animationStyles } from './animation-styles.js';
+import { breakpoints } from './breakpoints.js';
+import { definePreset } from './def.js';
+import { globalCss } from './global-css.js';
+import { keyframes } from './keyframes.js';
+import { layerStyles } from './layer-styles.js';
+import { recipes } from './recipes/index.js';
+import { semanticTokens } from './semantic-tokens/index.js';
+import { slotRecipes } from './slot-recipes/index.js';
+import { textStyles } from './text-styles.js';
+import { tokens } from './tokens/index.js';
+import { utilities } from './utilities.js';
+
+var index = definePreset({
+  name: "@chakra-ui/panda-preset",
+  globalCss,
+  theme: {
+    breakpoints,
+    keyframes,
+    tokens,
+    semanticTokens,
+    recipes,
+    slotRecipes,
+    textStyles,
+    layerStyles,
+    animationStyles
+  },
+  utilities: {
+    extend: utilities
+  },
+  conditions: {
+    extend: {
+      icon: "& :where(svg)"
+    }
+  }
+});
+
+export { index as default };

package/dist/esm/keyframes.js

@@ -0,0 +1,258 @@
+"use strict";
+const keyframes = {
+  spin: {
+    "0%": {
+      transform: "rotate(0deg)"
+    },
+    "100%": {
+      transform: "rotate(360deg)"
+    }
+  },
+  pulse: {
+    "50%": {
+      opacity: "0.5"
+    }
+  },
+  ping: {
+    "75%, 100%": {
+      transform: "scale(2)",
+      opacity: "0"
+    }
+  },
+  bounce: {
+    "0%, 100%": {
+      transform: "translateY(-25%)",
+      animationTimingFunction: "cubic-bezier(0.8,0,1,1)"
+    },
+    "50%": {
+      transform: "none",
+      animationTimingFunction: "cubic-bezier(0,0,0.2,1)"
+    }
+  },
+  "bg-position": {
+    from: {
+      backgroundPosition: "var(--animate-from, 1rem) 0"
+    },
+    to: {
+      backgroundPosition: "var(--animate-to, 0) 0"
+    }
+  },
+  position: {
+    from: {
+      insetInlineStart: "var(--animate-from-x)",
+      insetBlockStart: "var(--animate-from-y)"
+    },
+    to: {
+      insetInlineStart: "var(--animate-to-x)",
+      insetBlockStart: "var(--animate-to-y)"
+    }
+  },
+  "circular-progress": {
+    "0%": {
+      strokeDasharray: "1, 400",
+      strokeDashoffset: "0"
+    },
+    "50%": {
+      strokeDasharray: "400, 400",
+      strokeDashoffset: "-100%"
+    },
+    "100%": {
+      strokeDasharray: "400, 400",
+      strokeDashoffset: "-260%"
+    }
+  },
+  "expand-height": {
+    from: {
+      height: "0"
+    },
+    to: {
+      height: "var(--height)"
+    }
+  },
+  "collapse-height": {
+    from: {
+      height: "var(--height)"
+    },
+    to: {
+      height: "0"
+    }
+  },
+  "expand-width": {
+    from: {
+      width: "0"
+    },
+    to: {
+      width: "var(--width)"
+    }
+  },
+  "collapse-width": {
+    from: {
+      height: "var(--width)"
+    },
+    to: {
+      height: "0"
+    }
+  },
+  "fade-in": {
+    from: {
+      opacity: 0
+    },
+    to: {
+      opacity: 1
+    }
+  },
+  "fade-out": {
+    from: {
+      opacity: 1
+    },
+    to: {
+      opacity: 0
+    }
+  },
+  "slide-from-left-full": {
+    from: {
+      translate: "-100% 0"
+    },
+    to: {
+      translate: "0 0"
+    }
+  },
+  "slide-from-right-full": {
+    from: {
+      translate: "100% 0"
+    },
+    to: {
+      translate: "0 0"
+    }
+  },
+  "slide-from-top-full": {
+    from: {
+      translate: "0 -100%"
+    },
+    to: {
+      translate: "0 0"
+    }
+  },
+  "slide-from-bottom-full": {
+    from: {
+      translate: "0 100%"
+    },
+    to: {
+      translate: "0 0"
+    }
+  },
+  "slide-to-left-full": {
+    from: {
+      translate: "0 0"
+    },
+    to: {
+      translate: "-100% 0"
+    }
+  },
+  "slide-to-right-full": {
+    from: {
+      translate: "0 0"
+    },
+    to: {
+      translate: "100% 0"
+    }
+  },
+  "slide-to-top-full": {
+    from: {
+      translate: "0 0"
+    },
+    to: {
+      translate: "0 -100%"
+    }
+  },
+  "slide-to-bottom-full": {
+    from: {
+      translate: "0 0"
+    },
+    to: {
+      translate: "0 100%"
+    }
+  },
+  "slide-from-top": {
+    "0%": {
+      translate: "0 -0.5rem"
+    },
+    to: {
+      translate: "0"
+    }
+  },
+  "slide-from-bottom": {
+    "0%": {
+      translate: "0 0.5rem"
+    },
+    to: {
+      translate: "0"
+    }
+  },
+  "slide-from-left": {
+    "0%": {
+      translate: "-0.5rem 0"
+    },
+    to: {
+      translate: "0"
+    }
+  },
+  "slide-from-right": {
+    "0%": {
+      translate: "0.5rem 0"
+    },
+    to: {
+      translate: "0"
+    }
+  },
+  "slide-to-top": {
+    "0%": {
+      translate: "0"
+    },
+    to: {
+      translate: "0 -0.5rem"
+    }
+  },
+  "slide-to-bottom": {
+    "0%": {
+      translate: "0"
+    },
+    to: {
+      translate: "0 0.5rem"
+    }
+  },
+  "slide-to-left": {
+    "0%": {
+      translate: "0"
+    },
+    to: {
+      translate: "-0.5rem 0"
+    }
+  },
+  "slide-to-right": {
+    "0%": {
+      translate: "0"
+    },
+    to: {
+      translate: "0.5rem 0"
+    }
+  },
+  "scale-in": {
+    from: {
+      scale: "0.95"
+    },
+    to: {
+      scale: "1"
+    }
+  },
+  "scale-out": {
+    from: {
+      scale: "1"
+    },
+    to: {
+      scale: "0.95"
+    }
+  }
+};
+
+export { keyframes };

package/dist/esm/layer-styles.js

@@ -0,0 +1,112 @@
+"use strict";
+import { defineLayerStyles } from './def.js';
+
+const layerStyles = defineLayerStyles({
+  "fill.muted": {
+    value: {
+      background: "colorPalette.muted",
+      color: "colorPalette.fg"
+    }
+  },
+  "fill.subtle": {
+    value: {
+      background: "colorPalette.subtle",
+      color: "colorPalette.fg"
+    }
+  },
+  "fill.surface": {
+    value: {
+      background: "colorPalette.subtle",
+      color: "colorPalette.fg",
+      boxShadow: "0 0 0px 1px var(--shadow-color)",
+      boxShadowColor: "colorPalette.muted"
+    }
+  },
+  "fill.solid": {
+    value: {
+      background: "colorPalette.solid",
+      color: "colorPalette.contrast"
+    }
+  },
+  "outline.subtle": {
+    value: {
+      color: "colorPalette.fg",
+      boxShadow: "inset 0 0 0px 1px var(--shadow-color)",
+      boxShadowColor: "colorPalette.subtle"
+    }
+  },
+  "outline.solid": {
+    value: {
+      borderWidth: "1px",
+      borderColor: "colorPalette.solid",
+      color: "colorPalette.fg"
+    }
+  },
+  "indicator.bottom": {
+    value: {
+      position: "relative",
+      "--indicator-color-fallback": "colors.colorPalette.solid",
+      _before: {
+        content: '""',
+        position: "absolute",
+        bottom: "var(--indicator-offset-y, 0)",
+        insetInline: "var(--indicator-offset-x, 0)",
+        height: "var(--indicator-thickness, 2px)",
+        background: "var(--indicator-color, var(--indicator-color-fallback))"
+      }
+    }
+  },
+  "indicator.top": {
+    value: {
+      position: "relative",
+      "--indicator-color-fallback": "colors.colorPalette.solid",
+      _before: {
+        content: '""',
+        position: "absolute",
+        top: "var(--indicator-offset-y, 0)",
+        insetInline: "var(--indicator-offset-x, 0)",
+        height: "var(--indicator-thickness, 2px)",
+        background: "var(--indicator-color, var(--indicator-color-fallback))"
+      }
+    }
+  },
+  "indicator.start": {
+    value: {
+      position: "relative",
+      "--indicator-color-fallback": "colors.colorPalette.solid",
+      _before: {
+        content: '""',
+        position: "absolute",
+        insetInlineStart: "var(--indicator-offset-x, 0)",
+        insetBlock: "var(--indicator-offset-y, 0)",
+        width: "var(--indicator-thickness, 2px)",
+        background: "var(--indicator-color, var(--indicator-color-fallback))"
+      }
+    }
+  },
+  "indicator.end": {
+    value: {
+      position: "relative",
+      "--indicator-color-fallback": "colors.colorPalette.solid",
+      _before: {
+        content: '""',
+        position: "absolute",
+        insetInlineEnd: "var(--indicator-offset-x, 0)",
+        insetBlock: "var(--indicator-offset-y, 0)",
+        width: "var(--indicator-thickness, 2px)",
+        background: "var(--indicator-color, var(--indicator-color-fallback))"
+      }
+    }
+  },
+  disabled: {
+    value: {
+      opacity: "0.5",
+      cursor: "not-allowed"
+    }
+  },
+  none: {
+    value: {}
+  }
+});
+
+export { layerStyles };

package/dist/esm/recipes/badge.js

@@ -0,0 +1,70 @@
+"use strict";
+import { defineRecipe } from '../def.js';
+
+const badgeRecipe = defineRecipe({
+  className: "badge",
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    borderRadius: "l2",
+    gap: "1",
+    fontWeight: "medium",
+    fontVariantNumeric: "tabular-nums",
+    whiteSpace: "nowrap",
+    userSelect: "none"
+  },
+  variants: {
+    variant: {
+      solid: {
+        bg: "colorPalette.solid",
+        color: "colorPalette.contrast"
+      },
+      subtle: {
+        bg: "colorPalette.subtle",
+        color: "colorPalette.fg"
+      },
+      outline: {
+        color: "colorPalette.fg",
+        shadow: "inset 0 0 0px 1px var(--shadow-color)",
+        shadowColor: "colorPalette.muted"
+      },
+      surface: {
+        bg: "colorPalette.subtle",
+        color: "colorPalette.fg",
+        shadow: "inset 0 0 0px 1px var(--shadow-color)",
+        shadowColor: "colorPalette.muted"
+      },
+      plain: {
+        color: "colorPalette.fg"
+      }
+    },
+    size: {
+      xs: {
+        textStyle: "2xs",
+        px: "1",
+        minH: "4"
+      },
+      sm: {
+        textStyle: "xs",
+        px: "1.5",
+        minH: "5"
+      },
+      md: {
+        textStyle: "sm",
+        px: "2",
+        minH: "6"
+      },
+      lg: {
+        textStyle: "sm",
+        px: "2.5",
+        minH: "7"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "subtle",
+    size: "sm"
+  }
+});
+
+export { badgeRecipe };