@chakra-ui/panda-preset 3.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Segun Adebayo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,20 @@
+# @chakra-ui/panda-preset
+
+Panda preset for using Chakra UI design system in your Panda CSS.
+
+## Installation
+
+```bash
+npm install @chakra-ui/panda-preset
+```
+
+## Usage
+
+```tsx
+// panda.config.ts
+import { defineConfig } from "@pandacss/dev"
+
+export default defineConfig({
+  presets: ["@chakra-ui/panda-preset"],
+})
+```

package/dist/cjs/animation-styles.cjs

@@ -0,0 +1,55 @@
+"use strict";
+'use strict';
+
+var def = require('./def.cjs');
+
+const animationStyles = def.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"
+    }
+  }
+});
+
+exports.animationStyles = animationStyles;

package/dist/cjs/breakpoints.cjs

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

package/dist/cjs/def.cjs

@@ -0,0 +1,34 @@
+"use strict";
+'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;
+
+exports.defineAnimationStyles = defineAnimationStyles;
+exports.defineConfig = defineConfig;
+exports.defineGlobalStyles = defineGlobalStyles;
+exports.defineLayerStyles = defineLayerStyles;
+exports.definePreset = definePreset;
+exports.defineRecipe = defineRecipe;
+exports.defineSemanticTokens = defineSemanticTokens;
+exports.defineSlotRecipe = defineSlotRecipe;
+exports.defineTextStyles = defineTextStyles;
+exports.defineTokens = defineTokens;
+exports.defineUtilities = defineUtilities;

package/dist/cjs/global-css.cjs

@@ -0,0 +1,50 @@
+"use strict";
+'use strict';
+
+var def = require('./def.cjs');
+
+const globalCss = def.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"
+  }
+});
+
+exports.globalCss = globalCss;

package/dist/cjs/index.cjs

@@ -0,0 +1,43 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var animationStyles = require('./animation-styles.cjs');
+var breakpoints = require('./breakpoints.cjs');
+var def = require('./def.cjs');
+var globalCss = require('./global-css.cjs');
+var keyframes = require('./keyframes.cjs');
+var layerStyles = require('./layer-styles.cjs');
+var index$3 = require('./recipes/index.cjs');
+var index$2 = require('./semantic-tokens/index.cjs');
+var index$4 = require('./slot-recipes/index.cjs');
+var textStyles = require('./text-styles.cjs');
+var index$1 = require('./tokens/index.cjs');
+var utilities = require('./utilities.cjs');
+
+var index = def.definePreset({
+  name: "@chakra-ui/panda-preset",
+  globalCss: globalCss.globalCss,
+  theme: {
+    breakpoints: breakpoints.breakpoints,
+    keyframes: keyframes.keyframes,
+    tokens: index$1.tokens,
+    semanticTokens: index$2.semanticTokens,
+    recipes: index$3.recipes,
+    slotRecipes: index$4.slotRecipes,
+    textStyles: textStyles.textStyles,
+    layerStyles: layerStyles.layerStyles,
+    animationStyles: animationStyles.animationStyles
+  },
+  utilities: {
+    extend: utilities.utilities
+  },
+  conditions: {
+    extend: {
+      icon: "& :where(svg)"
+    }
+  }
+});
+
+exports.default = index;

package/dist/cjs/keyframes.cjs

@@ -0,0 +1,260 @@
+"use strict";
+'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"
+    }
+  }
+};
+
+exports.keyframes = keyframes;

package/dist/cjs/layer-styles.cjs

@@ -0,0 +1,114 @@
+"use strict";
+'use strict';
+
+var def = require('./def.cjs');
+
+const layerStyles = def.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: {}
+  }
+});
+
+exports.layerStyles = layerStyles;

package/dist/cjs/recipes/badge.cjs

@@ -0,0 +1,72 @@
+"use strict";
+'use strict';
+
+var def = require('../def.cjs');
+
+const badgeRecipe = def.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"
+  }
+});
+
+exports.badgeRecipe = badgeRecipe;