@chakra-ui/panda-preset 3.3.0

package/dist/esm/recipes/input.js

@@ -0,0 +1,96 @@
+"use strict";
+import { defineRecipe } from '../def.js';
+
+const inputRecipe = defineRecipe({
+  className: "input",
+  base: {
+    width: "100%",
+    minWidth: "0",
+    outline: "0",
+    position: "relative",
+    appearance: "none",
+    textAlign: "start",
+    borderRadius: "l2",
+    _disabled: {
+      layerStyle: "disabled"
+    },
+    height: "var(--input-height)",
+    minW: "var(--input-height)",
+    "--focus-color": "colors.colorPalette.focusRing",
+    "--error-color": "colors.border.error",
+    _invalid: {
+      focusRingColor: "var(--error-color)",
+      borderColor: "var(--error-color)"
+    }
+  },
+  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: {
+        bg: "transparent",
+        borderWidth: "1px",
+        borderColor: "border",
+        focusVisibleRing: "inside"
+      },
+      subtle: {
+        borderWidth: "1px",
+        borderColor: "transparent",
+        bg: "bg.muted",
+        focusVisibleRing: "inside"
+      },
+      flushed: {
+        bg: "transparent",
+        borderBottomWidth: "1px",
+        borderBottomColor: "border",
+        borderRadius: "0",
+        px: "0",
+        _focusVisible: {
+          borderColor: "var(--focus-color)",
+          boxShadow: "0px 1px 0px 0px var(--focus-color)"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "outline"
+  }
+});
+
+export { inputRecipe };

package/dist/esm/recipes/kbd.js

@@ -0,0 +1,60 @@
+"use strict";
+import { defineRecipe } from '../def.js';
+
+const kbdRecipe = defineRecipe({
+  className: "kbd",
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    fontWeight: "medium",
+    fontFamily: "mono",
+    flexShrink: "0",
+    whiteSpace: "nowrap",
+    wordSpacing: "-0.5em",
+    userSelect: "none",
+    px: "1",
+    borderRadius: "l2"
+  },
+  variants: {
+    variant: {
+      raised: {
+        bg: "colorPalette.subtle",
+        color: "colorPalette.fg",
+        borderWidth: "1px",
+        borderBottomWidth: "2px",
+        borderColor: "colorPalette.muted"
+      },
+      outline: {
+        borderWidth: "1px",
+        color: "colorPalette.fg"
+      },
+      subtle: {
+        bg: "colorPalette.muted",
+        color: "colorPalette.fg"
+      },
+      plain: {
+        color: "colorPalette.fg"
+      }
+    },
+    size: {
+      sm: {
+        textStyle: "xs",
+        height: "4.5"
+      },
+      md: {
+        textStyle: "sm",
+        height: "5"
+      },
+      lg: {
+        textStyle: "md",
+        height: "6"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "raised"
+  }
+});
+
+export { kbdRecipe };

package/dist/esm/recipes/link.js

@@ -0,0 +1,38 @@
+"use strict";
+import { defineRecipe } from '../def.js';
+
+const linkRecipe = defineRecipe({
+  className: "link",
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    outline: "none",
+    gap: "1.5",
+    cursor: "pointer",
+    borderRadius: "l1",
+    focusRing: "outside"
+  },
+  variants: {
+    variant: {
+      underline: {
+        color: "colorPalette.fg",
+        textDecoration: "underline",
+        textUnderlineOffset: "3px",
+        textDecorationColor: "currentColor/20"
+      },
+      plain: {
+        color: "colorPalette.fg",
+        _hover: {
+          textDecoration: "underline",
+          textUnderlineOffset: "3px",
+          textDecorationColor: "currentColor/20"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "plain"
+  }
+});
+
+export { linkRecipe };

package/dist/esm/recipes/mark.js

@@ -0,0 +1,29 @@
+"use strict";
+import { defineRecipe } from '../def.js';
+
+const markRecipe = defineRecipe({
+  className: "mark",
+  base: {
+    bg: "transparent",
+    color: "inherit",
+    whiteSpace: "nowrap"
+  },
+  variants: {
+    variant: {
+      subtle: {
+        bg: "colorPalette.subtle",
+        color: "inherit"
+      },
+      solid: {
+        bg: "colorPalette.solid",
+        color: "colorPalette.contrast"
+      },
+      text: {
+        fontWeight: "medium"
+      },
+      plain: {}
+    }
+  }
+});
+
+export { markRecipe };

package/dist/esm/recipes/radiomark.js

@@ -0,0 +1,100 @@
+"use strict";
+import { defineRecipe } from '../def.js';
+
+const radiomarkRecipe = defineRecipe({
+  className: "radiomark",
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    verticalAlign: "top",
+    color: "white",
+    borderWidth: "1px",
+    borderColor: "transparent",
+    borderRadius: "full",
+    cursor: "radio",
+    _focusVisible: {
+      outline: "2px solid",
+      outlineColor: "colorPalette.focusRing",
+      outlineOffset: "2px"
+    },
+    _invalid: {
+      colorPalette: "red",
+      borderColor: "red.500"
+    },
+    _disabled: {
+      opacity: "0.5",
+      cursor: "disabled"
+    },
+    "& .dot": {
+      height: "100%",
+      width: "100%",
+      borderRadius: "full",
+      bg: "currentColor",
+      scale: "0.4"
+    }
+  },
+  variants: {
+    variant: {
+      solid: {
+        borderWidth: "1px",
+        borderColor: "border",
+        _checked: {
+          bg: "colorPalette.solid",
+          color: "colorPalette.contrast",
+          borderColor: "colorPalette.solid"
+        }
+      },
+      subtle: {
+        borderWidth: "1px",
+        bg: "colorPalette.muted",
+        borderColor: "colorPalette.muted",
+        color: "transparent",
+        _checked: {
+          color: "colorPalette.fg"
+        }
+      },
+      outline: {
+        borderWidth: "1px",
+        borderColor: "inherit",
+        _checked: {
+          color: "colorPalette.fg",
+          borderColor: "colorPalette.solid"
+        },
+        "& .dot": {
+          scale: "0.6"
+        }
+      },
+      inverted: {
+        bg: "bg",
+        borderWidth: "1px",
+        borderColor: "inherit",
+        _checked: {
+          color: "colorPalette.solid",
+          borderColor: "currentcolor"
+        }
+      }
+    },
+    size: {
+      xs: {
+        boxSize: "3"
+      },
+      sm: {
+        boxSize: "4"
+      },
+      md: {
+        boxSize: "5"
+      },
+      lg: {
+        boxSize: "6"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "solid",
+    size: "md"
+  }
+});
+
+export { radiomarkRecipe };

package/dist/esm/recipes/separator.js

@@ -0,0 +1,54 @@
+"use strict";
+import { defineRecipe } from '../def.js';
+
+const separatorRecipe = defineRecipe({
+  className: "separator",
+  base: {
+    display: "block",
+    borderColor: "border"
+  },
+  variants: {
+    variant: {
+      solid: {
+        borderStyle: "solid"
+      },
+      dashed: {
+        borderStyle: "dashed"
+      },
+      dotted: {
+        borderStyle: "dotted"
+      }
+    },
+    orientation: {
+      vertical: {
+        height: "100%",
+        borderInlineStartWidth: "var(--separator-thickness)"
+      },
+      horizontal: {
+        width: "100%",
+        borderTopWidth: "var(--separator-thickness)"
+      }
+    },
+    size: {
+      xs: {
+        "--separator-thickness": "0.5px"
+      },
+      sm: {
+        "--separator-thickness": "1px"
+      },
+      md: {
+        "--separator-thickness": "2px"
+      },
+      lg: {
+        "--separator-thickness": "3px"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "sm",
+    variant: "solid",
+    orientation: "horizontal"
+  }
+});
+
+export { separatorRecipe };

package/dist/esm/recipes/skeleton.js

@@ -0,0 +1,53 @@
+"use strict";
+import { defineRecipe } from '../def.js';
+
+const skeletonRecipe = defineRecipe({
+  className: "skeleton",
+  base: {},
+  variants: {
+    loading: {
+      true: {
+        borderRadius: "l2",
+        boxShadow: "none",
+        backgroundClip: "padding-box",
+        cursor: "default",
+        color: "transparent",
+        pointerEvents: "none",
+        userSelect: "none",
+        flexShrink: "0",
+        "&::before, &::after, *": {
+          visibility: "hidden"
+        }
+      },
+      false: {
+        background: "unset",
+        animation: "fade-in var(--fade-duration, 0.1s) ease-out !important"
+      }
+    },
+    variant: {
+      pulse: {
+        background: "bg.emphasized",
+        animation: "pulse",
+        animationDuration: "var(--duration, 1.2s)"
+      },
+      shine: {
+        "--animate-from": "200%",
+        "--animate-to": "-200%",
+        "--start-color": "colors.bg.muted",
+        "--end-color": "colors.bg.emphasized",
+        backgroundImage: "linear-gradient(270deg,var(--start-color),var(--end-color),var(--end-color),var(--start-color))",
+        backgroundSize: "400% 100%",
+        animation: "bg-position var(--duration, 5s) ease-in-out infinite"
+      },
+      none: {
+        animation: "none"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "pulse",
+    loading: true
+  }
+});
+
+export { skeletonRecipe };

package/dist/esm/recipes/skip-nav-link.js

@@ -0,0 +1,34 @@
+"use strict";
+import { defineRecipe } from '../def.js';
+
+const skipNavLinkRecipe = defineRecipe({
+  className: "skip-nav",
+  base: {
+    display: "inline-flex",
+    bg: "bg.panel",
+    padding: "2.5",
+    borderRadius: "l2",
+    fontWeight: "semibold",
+    focusVisibleRing: "outside",
+    textStyle: "sm",
+    userSelect: "none",
+    border: "0",
+    height: "1px",
+    width: "1px",
+    margin: "-1px",
+    outline: "0",
+    overflow: "hidden",
+    position: "absolute",
+    clip: "rect(0 0 0 0)",
+    _focusVisible: {
+      clip: "auto",
+      width: "auto",
+      height: "auto",
+      position: "fixed",
+      top: "6",
+      insetStart: "6"
+    }
+  }
+});
+
+export { skipNavLinkRecipe };

package/dist/esm/recipes/spinner.js

@@ -0,0 +1,47 @@
+"use strict";
+import { defineRecipe } from '../def.js';
+
+const spinnerRecipe = defineRecipe({
+  className: "spinner",
+  base: {
+    display: "inline-block",
+    borderColor: "currentColor",
+    borderStyle: "solid",
+    borderWidth: "2px",
+    borderRadius: "full",
+    width: "var(--spinner-size)",
+    height: "var(--spinner-size)",
+    animation: "spin",
+    animationDuration: "slowest",
+    "--spinner-track-color": "transparent",
+    borderBottomColor: "var(--spinner-track-color)",
+    borderInlineStartColor: "var(--spinner-track-color)"
+  },
+  variants: {
+    size: {
+      inherit: {
+        "--spinner-size": "1em"
+      },
+      xs: {
+        "--spinner-size": "sizes.3"
+      },
+      sm: {
+        "--spinner-size": "sizes.4"
+      },
+      md: {
+        "--spinner-size": "sizes.5"
+      },
+      lg: {
+        "--spinner-size": "sizes.8"
+      },
+      xl: {
+        "--spinner-size": "sizes.10"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+export { spinnerRecipe };

package/dist/esm/recipes/textarea.js

@@ -0,0 +1,89 @@
+"use strict";
+import { defineRecipe } from '../def.js';
+
+const textareaRecipe = defineRecipe({
+  className: "textarea",
+  base: {
+    width: "100%",
+    minWidth: "0",
+    outline: "0",
+    position: "relative",
+    appearance: "none",
+    textAlign: "start",
+    borderRadius: "l2",
+    _disabled: {
+      layerStyle: "disabled"
+    },
+    "--focus-color": "colors.colorPalette.focusRing",
+    "--error-color": "colors.border.error",
+    _invalid: {
+      focusRingColor: "var(--error-color)",
+      borderColor: "var(--error-color)"
+    }
+  },
+  variants: {
+    size: {
+      xs: {
+        textStyle: "xs",
+        px: "2",
+        py: "1.5",
+        scrollPaddingBottom: "1.5"
+      },
+      sm: {
+        textStyle: "sm",
+        px: "2.5",
+        py: "2",
+        scrollPaddingBottom: "2"
+      },
+      md: {
+        textStyle: "sm",
+        px: "3",
+        py: "2",
+        scrollPaddingBottom: "2"
+      },
+      lg: {
+        textStyle: "md",
+        px: "4",
+        py: "3",
+        scrollPaddingBottom: "3"
+      },
+      xl: {
+        textStyle: "md",
+        px: "4.5",
+        py: "3.5",
+        scrollPaddingBottom: "3.5"
+      }
+    },
+    variant: {
+      outline: {
+        bg: "transparent",
+        borderWidth: "1px",
+        borderColor: "border",
+        focusVisibleRing: "inside"
+      },
+      subtle: {
+        borderWidth: "1px",
+        borderColor: "transparent",
+        bg: "bg.muted",
+        focusVisibleRing: "inside"
+      },
+      flushed: {
+        bg: "transparent",
+        borderBottomWidth: "1px",
+        borderBottomColor: "border",
+        borderRadius: "0",
+        px: "0",
+        _focusVisible: {
+          borderColor: "var(--focus-color)",
+          boxShadow: "0px 1px 0px 0px var(--focus-color)"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "outline"
+  }
+});
+
+export { textareaRecipe };