@chakra-ui/panda-preset 3.3.0

package/dist/cjs/recipes/button.cjs

@@ -0,0 +1,180 @@
+"use strict";
+'use strict';
+
+var def = require('../def.cjs');
+
+const buttonRecipe = def.defineRecipe({
+  className: "button",
+  base: {
+    display: "inline-flex",
+    appearance: "none",
+    alignItems: "center",
+    justifyContent: "center",
+    userSelect: "none",
+    position: "relative",
+    borderRadius: "l2",
+    whiteSpace: "nowrap",
+    verticalAlign: "middle",
+    borderWidth: "1px",
+    borderColor: "transparent",
+    cursor: "button",
+    flexShrink: "0",
+    outline: "0",
+    lineHeight: "1.2",
+    isolation: "isolate",
+    fontWeight: "medium",
+    transitionProperty: "common",
+    transitionDuration: "moderate",
+    focusVisibleRing: "outside",
+    _disabled: {
+      layerStyle: "disabled"
+    },
+    _icon: {
+      flexShrink: "0"
+    }
+  },
+  variants: {
+    size: {
+      "2xs": {
+        h: "6",
+        minW: "6",
+        textStyle: "xs",
+        px: "2",
+        gap: "1",
+        _icon: {
+          width: "3.5",
+          height: "3.5"
+        }
+      },
+      xs: {
+        h: "8",
+        minW: "8",
+        textStyle: "xs",
+        px: "2.5",
+        gap: "1",
+        _icon: {
+          width: "4",
+          height: "4"
+        }
+      },
+      sm: {
+        h: "9",
+        minW: "9",
+        px: "3.5",
+        textStyle: "sm",
+        gap: "2",
+        _icon: {
+          width: "4",
+          height: "4"
+        }
+      },
+      md: {
+        h: "10",
+        minW: "10",
+        textStyle: "sm",
+        px: "4",
+        gap: "2",
+        _icon: {
+          width: "5",
+          height: "5"
+        }
+      },
+      lg: {
+        h: "11",
+        minW: "11",
+        textStyle: "md",
+        px: "5",
+        gap: "3",
+        _icon: {
+          width: "5",
+          height: "5"
+        }
+      },
+      xl: {
+        h: "12",
+        minW: "12",
+        textStyle: "md",
+        px: "5",
+        gap: "2.5",
+        _icon: {
+          width: "5",
+          height: "5"
+        }
+      },
+      "2xl": {
+        h: "16",
+        minW: "16",
+        textStyle: "lg",
+        px: "7",
+        gap: "3",
+        _icon: {
+          width: "6",
+          height: "6"
+        }
+      }
+    },
+    variant: {
+      solid: {
+        bg: "colorPalette.solid",
+        color: "colorPalette.contrast",
+        _hover: {
+          bg: "colorPalette.solid/90"
+        },
+        _expanded: {
+          bg: "colorPalette.solid/90"
+        }
+      },
+      subtle: {
+        bg: "colorPalette.subtle",
+        color: "colorPalette.fg",
+        _hover: {
+          bg: "colorPalette.muted"
+        },
+        _expanded: {
+          bg: "colorPalette.muted"
+        }
+      },
+      surface: {
+        bg: "colorPalette.subtle",
+        color: "colorPalette.fg",
+        shadow: "0 0 0px 1px var(--shadow-color)",
+        shadowColor: "colorPalette.muted",
+        _hover: {
+          bg: "colorPalette.muted"
+        },
+        _expanded: {
+          bg: "colorPalette.muted"
+        }
+      },
+      outline: {
+        borderWidth: "1px",
+        borderColor: "colorPalette.muted",
+        color: "colorPalette.fg",
+        _hover: {
+          bg: "colorPalette.subtle"
+        },
+        _expanded: {
+          bg: "colorPalette.subtle"
+        }
+      },
+      ghost: {
+        color: "colorPalette.fg",
+        _hover: {
+          bg: "colorPalette.subtle"
+        },
+        _expanded: {
+          bg: "colorPalette.subtle"
+        }
+      },
+      plain: {
+        color: "colorPalette.fg"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "solid"
+  }
+});
+
+exports.buttonRecipe = buttonRecipe;

package/dist/cjs/recipes/checkmark.cjs

@@ -0,0 +1,89 @@
+"use strict";
+'use strict';
+
+var def = require('../def.cjs');
+
+const checkmarkRecipe = def.defineRecipe({
+  className: "checkmark",
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: "0",
+    color: "white",
+    borderWidth: "1px",
+    borderColor: "transparent",
+    borderRadius: "l1",
+    focusVisibleRing: "outside",
+    _icon: {
+      boxSize: "full"
+    },
+    _invalid: {
+      colorPalette: "red",
+      borderColor: "border.error"
+    },
+    _disabled: {
+      opacity: "0.5"
+    }
+  },
+  variants: {
+    size: {
+      xs: {
+        boxSize: "3"
+      },
+      sm: {
+        boxSize: "4"
+      },
+      md: {
+        boxSize: "5",
+        p: "0.5"
+      },
+      lg: {
+        boxSize: "6",
+        p: "0.5"
+      }
+    },
+    variant: {
+      solid: {
+        borderColor: "border",
+        "&:is([data-state=checked], [data-state=indeterminate])": {
+          bg: "colorPalette.solid",
+          color: "colorPalette.contrast",
+          borderColor: "colorPalette.solid"
+        }
+      },
+      outline: {
+        borderColor: "border",
+        "&:is([data-state=checked], [data-state=indeterminate])": {
+          color: "colorPalette.fg",
+          borderColor: "colorPalette.solid"
+        }
+      },
+      subtle: {
+        bg: "colorPalette.muted",
+        borderColor: "colorPalette.muted",
+        "&:is([data-state=checked], [data-state=indeterminate])": {
+          color: "colorPalette.fg"
+        }
+      },
+      plain: {
+        "&:is([data-state=checked], [data-state=indeterminate])": {
+          color: "colorPalette.fg"
+        }
+      },
+      inverted: {
+        borderColor: "border",
+        color: "colorPalette.fg",
+        "&:is([data-state=checked], [data-state=indeterminate])": {
+          borderColor: "colorPalette.solid"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "solid",
+    size: "md"
+  }
+});
+
+exports.checkmarkRecipe = checkmarkRecipe;

package/dist/cjs/recipes/code.cjs

@@ -0,0 +1,68 @@
+"use strict";
+'use strict';
+
+var def = require('../def.cjs');
+
+const codeRecipe = def.defineRecipe({
+  className: "code",
+  base: {
+    fontFamily: "mono",
+    alignItems: "center",
+    display: "inline-flex",
+    borderRadius: "l2"
+  },
+  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.codeRecipe = codeRecipe;

package/dist/cjs/recipes/color-swatch.cjs

@@ -0,0 +1,68 @@
+"use strict";
+'use strict';
+
+var def = require('../def.cjs');
+
+const colorSwatchRecipe = def.defineRecipe({
+  className: "color-swatch",
+  base: {
+    boxSize: "var(--swatch-size)",
+    shadow: "inset 0 0 0 1px rgba(0, 0, 0, 0.1)",
+    "--checker-size": "8px",
+    "--checker-bg": "colors.bg",
+    "--checker-fg": "colors.bg.emphasized",
+    background: "linear-gradient(var(--color), var(--color)), repeating-conic-gradient(var(--checker-fg) 0%, var(--checker-fg) 25%, var(--checker-bg) 0%, var(--checker-bg) 50%) 0% 50% / var(--checker-size) var(--checker-size) !important",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: "0"
+  },
+  variants: {
+    size: {
+      "2xs": {
+        "--swatch-size": "sizes.3.5"
+      },
+      xs: {
+        "--swatch-size": "sizes.4"
+      },
+      sm: {
+        "--swatch-size": "sizes.4.5"
+      },
+      md: {
+        "--swatch-size": "sizes.5"
+      },
+      lg: {
+        "--swatch-size": "sizes.6"
+      },
+      xl: {
+        "--swatch-size": "sizes.7"
+      },
+      "2xl": {
+        "--swatch-size": "sizes.8"
+      },
+      inherit: {
+        "--swatch-size": "inherit"
+      },
+      full: {
+        "--swatch-size": "100%"
+      }
+    },
+    shape: {
+      square: {
+        borderRadius: "none"
+      },
+      circle: {
+        borderRadius: "full"
+      },
+      rounded: {
+        borderRadius: "l1"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    shape: "rounded"
+  }
+});
+
+exports.colorSwatchRecipe = colorSwatchRecipe;

package/dist/cjs/recipes/container.cjs

@@ -0,0 +1,35 @@
+"use strict";
+'use strict';
+
+var def = require('../def.cjs');
+
+const containerRecipe = def.defineRecipe({
+  className: "container",
+  base: {
+    position: "relative",
+    maxWidth: "8xl",
+    w: "100%",
+    mx: "auto",
+    px: {
+      base: "4",
+      md: "6",
+      lg: "8"
+    }
+  },
+  variants: {
+    centerContent: {
+      true: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center"
+      }
+    },
+    fluid: {
+      true: {
+        maxWidth: "full"
+      }
+    }
+  }
+});
+
+exports.containerRecipe = containerRecipe;

package/dist/cjs/recipes/heading.cjs

@@ -0,0 +1,54 @@
+"use strict";
+'use strict';
+
+var def = require('../def.cjs');
+
+const headingRecipe = def.defineRecipe({
+  className: "heading",
+  base: {
+    fontFamily: "heading",
+    fontWeight: "semibold"
+  },
+  variants: {
+    size: {
+      xs: {
+        textStyle: "xs"
+      },
+      sm: {
+        textStyle: "sm"
+      },
+      md: {
+        textStyle: "md"
+      },
+      lg: {
+        textStyle: "lg"
+      },
+      xl: {
+        textStyle: "xl"
+      },
+      "2xl": {
+        textStyle: "2xl"
+      },
+      "3xl": {
+        textStyle: "3xl"
+      },
+      "4xl": {
+        textStyle: "4xl"
+      },
+      "5xl": {
+        textStyle: "5xl"
+      },
+      "6xl": {
+        textStyle: "6xl"
+      },
+      "7xl": {
+        textStyle: "7xl"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "xl"
+  }
+});
+
+exports.headingRecipe = headingRecipe;

package/dist/cjs/recipes/icon.cjs

@@ -0,0 +1,47 @@
+"use strict";
+'use strict';
+
+var def = require('../def.cjs');
+
+const iconRecipe = def.defineRecipe({
+  className: "icon",
+  base: {
+    display: "inline-block",
+    lineHeight: "1em",
+    flexShrink: "0",
+    color: "currentcolor",
+    verticalAlign: "middle",
+    width: "var(--icon-size)",
+    height: "var(--icon-size)"
+  },
+  variants: {
+    size: {
+      inherit: {
+        "--icon-size": "1em"
+      },
+      xs: {
+        "--icon-size": "sizes.3"
+      },
+      sm: {
+        "--icon-size": "sizes.4"
+      },
+      md: {
+        "--icon-size": "sizes.5"
+      },
+      lg: {
+        "--icon-size": "sizes.6"
+      },
+      xl: {
+        "--icon-size": "sizes.7"
+      },
+      "2xl": {
+        "--icon-size": "sizes.8"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "inherit"
+  }
+});
+
+exports.iconRecipe = iconRecipe;

package/dist/cjs/recipes/index.cjs

@@ -0,0 +1,46 @@
+"use strict";
+'use strict';
+
+var badge = require('./badge.cjs');
+var button = require('./button.cjs');
+var checkmark = require('./checkmark.cjs');
+var code = require('./code.cjs');
+var colorSwatch = require('./color-swatch.cjs');
+var container = require('./container.cjs');
+var heading = require('./heading.cjs');
+var icon = require('./icon.cjs');
+var input = require('./input.cjs');
+var inputAddon = require('./input-addon.cjs');
+var kbd = require('./kbd.cjs');
+var link = require('./link.cjs');
+var mark = require('./mark.cjs');
+var radiomark = require('./radiomark.cjs');
+var separator = require('./separator.cjs');
+var skeleton = require('./skeleton.cjs');
+var skipNavLink = require('./skip-nav-link.cjs');
+var spinner = require('./spinner.cjs');
+var textarea = require('./textarea.cjs');
+
+const recipes = {
+  badge: badge.badgeRecipe,
+  button: button.buttonRecipe,
+  code: code.codeRecipe,
+  container: container.containerRecipe,
+  heading: heading.headingRecipe,
+  input: input.inputRecipe,
+  inputAddon: inputAddon.inputAddonRecipe,
+  kbd: kbd.kbdRecipe,
+  link: link.linkRecipe,
+  mark: mark.markRecipe,
+  separator: separator.separatorRecipe,
+  skeleton: skeleton.skeletonRecipe,
+  skipNavLink: skipNavLink.skipNavLinkRecipe,
+  spinner: spinner.spinnerRecipe,
+  textarea: textarea.textareaRecipe,
+  icon: icon.iconRecipe,
+  checkmark: checkmark.checkmarkRecipe,
+  radiomark: radiomark.radiomarkRecipe,
+  colorSwatch: colorSwatch.colorSwatchRecipe
+};
+
+exports.recipes = recipes;

package/dist/cjs/recipes/input-addon.cjs

@@ -0,0 +1,81 @@
+"use strict";
+'use strict';
+
+var def = require('../def.cjs');
+
+const inputAddonRecipe = def.defineRecipe({
+  className: "input-addon",
+  base: {
+    flex: "0 0 auto",
+    width: "auto",
+    display: "flex",
+    alignItems: "center",
+    whiteSpace: "nowrap",
+    alignSelf: "stretch",
+    borderRadius: "l2"
+  },
+  variants: {
+    size: {
+      "2xs": {
+        textStyle: "xs",
+        px: "2",
+        "--input-height": "sizes.7"
+      },
+      xs: {
+        textStyle: "xs",
+        px: "2",
+        "--input-height": "sizes.8"
+      },
+      sm: {
+        textStyle: "sm",
+        px: "2.5",
+        "--input-height": "sizes.9"
+      },
+      md: {
+        textStyle: "sm",
+        px: "3",
+        "--input-height": "sizes.10"
+      },
+      lg: {
+        textStyle: "md",
+        px: "4",
+        "--input-height": "sizes.11"
+      },
+      xl: {
+        textStyle: "md",
+        px: "4.5",
+        "--input-height": "sizes.12"
+      },
+      "2xl": {
+        textStyle: "lg",
+        px: "5",
+        "--input-height": "sizes.16"
+      }
+    },
+    variant: {
+      outline: {
+        borderWidth: "1px",
+        borderColor: "border",
+        bg: "bg.muted"
+      },
+      subtle: {
+        borderWidth: "1px",
+        borderColor: "transparent",
+        bg: "bg.emphasized"
+      },
+      flushed: {
+        borderBottom: "1px solid",
+        borderColor: "inherit",
+        borderRadius: "0",
+        px: "0",
+        bg: "transparent"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "outline"
+  }
+});
+
+exports.inputAddonRecipe = inputAddonRecipe;