@chakra-ui/panda-preset 3.3.0

package/dist/esm/recipes/button.js

@@ -0,0 +1,178 @@
+"use strict";
+import { defineRecipe } from '../def.js';
+
+const buttonRecipe = 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"
+  }
+});
+
+export { buttonRecipe };

package/dist/esm/recipes/checkmark.js

@@ -0,0 +1,87 @@
+"use strict";
+import { defineRecipe } from '../def.js';
+
+const checkmarkRecipe = 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"
+  }
+});
+
+export { checkmarkRecipe };

package/dist/esm/recipes/code.js

@@ -0,0 +1,66 @@
+"use strict";
+import { defineRecipe } from '../def.js';
+
+const codeRecipe = 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"
+  }
+});
+
+export { codeRecipe };

package/dist/esm/recipes/color-swatch.js

@@ -0,0 +1,66 @@
+"use strict";
+import { defineRecipe } from '../def.js';
+
+const colorSwatchRecipe = 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"
+  }
+});
+
+export { colorSwatchRecipe };

package/dist/esm/recipes/container.js

@@ -0,0 +1,33 @@
+"use strict";
+import { defineRecipe } from '../def.js';
+
+const containerRecipe = 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"
+      }
+    }
+  }
+});
+
+export { containerRecipe };

package/dist/esm/recipes/heading.js

@@ -0,0 +1,52 @@
+"use strict";
+import { defineRecipe } from '../def.js';
+
+const headingRecipe = 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"
+  }
+});
+
+export { headingRecipe };

package/dist/esm/recipes/icon.js

@@ -0,0 +1,45 @@
+"use strict";
+import { defineRecipe } from '../def.js';
+
+const iconRecipe = 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"
+  }
+});
+
+export { iconRecipe };

package/dist/esm/recipes/index.js

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

package/dist/esm/recipes/input-addon.js

@@ -0,0 +1,79 @@
+"use strict";
+import { defineRecipe } from '../def.js';
+
+const inputAddonRecipe = 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"
+  }
+});
+
+export { inputAddonRecipe };