@chakra-ui/panda-preset 3.3.0

package/dist/esm/slot-recipes/native-select.js

@@ -0,0 +1,150 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const nativeSelectSlotRecipe = defineSlotRecipe({
+  className: "native-select",
+  slots: ["root", "field", "indicator"],
+  base: {
+    root: {
+      height: "fit-content",
+      display: "flex",
+      width: "100%",
+      position: "relative"
+    },
+    field: {
+      width: "100%",
+      minWidth: "0",
+      outline: "0",
+      appearance: "none",
+      borderRadius: "l2",
+      _disabled: {
+        layerStyle: "disabled"
+      },
+      _invalid: {
+        borderColor: "border.error"
+      },
+      focusVisibleRing: "inside",
+      lineHeight: "normal",
+      "& > option, & > optgroup": {
+        bg: "inherit"
+      }
+    },
+    indicator: {
+      position: "absolute",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      pointerEvents: "none",
+      top: "50%",
+      transform: "translateY(-50%)",
+      height: "100%",
+      color: "fg.muted",
+      _disabled: {
+        opacity: "0.5"
+      },
+      _invalid: {
+        color: "fg.error"
+      },
+      _icon: {
+        width: "1em",
+        height: "1em"
+      }
+    }
+  },
+  variants: {
+    variant: {
+      outline: {
+        field: {
+          bg: "transparent",
+          borderWidth: "1px",
+          borderColor: "border",
+          _expanded: {
+            borderColor: "border.emphasized"
+          }
+        }
+      },
+      subtle: {
+        field: {
+          borderWidth: "1px",
+          borderColor: "transparent",
+          bg: "bg.muted"
+        }
+      },
+      plain: {
+        field: {
+          bg: "transparent",
+          color: "fg",
+          focusRingWidth: "2px"
+        }
+      }
+    },
+    size: {
+      xs: {
+        field: {
+          textStyle: "xs",
+          ps: "2",
+          pe: "6",
+          height: "6"
+        },
+        indicator: {
+          textStyle: "sm",
+          insetEnd: "1.5"
+        }
+      },
+      sm: {
+        field: {
+          textStyle: "sm",
+          ps: "2.5",
+          pe: "8",
+          height: "8"
+        },
+        indicator: {
+          textStyle: "md",
+          insetEnd: "2"
+        }
+      },
+      md: {
+        field: {
+          textStyle: "sm",
+          ps: "3",
+          pe: "8",
+          height: "10"
+        },
+        indicator: {
+          textStyle: "lg",
+          insetEnd: "2"
+        }
+      },
+      lg: {
+        field: {
+          textStyle: "md",
+          ps: "4",
+          pe: "8",
+          height: "11"
+        },
+        indicator: {
+          textStyle: "xl",
+          insetEnd: "3"
+        }
+      },
+      xl: {
+        field: {
+          textStyle: "md",
+          ps: "4.5",
+          pe: "10",
+          height: "12"
+        },
+        indicator: {
+          textStyle: "xl",
+          insetEnd: "3"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "outline"
+  }
+});
+
+export { nativeSelectSlotRecipe };

package/dist/esm/slot-recipes/number-input.js

@@ -0,0 +1,198 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const numberInputSlotRecipe = defineSlotRecipe({
+  className: "number-input",
+  slots: [
+    "root",
+    "label",
+    "input",
+    "control",
+    "valueText",
+    "incrementTrigger",
+    "decrementTrigger",
+    "scrubber"
+  ],
+  base: {
+    root: {
+      position: "relative",
+      zIndex: "0",
+      isolation: "isolate"
+    },
+    input: {
+      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)"
+      },
+      verticalAlign: "top",
+      pe: "calc(var(--stepper-width) + 0.5rem)"
+    },
+    control: {
+      display: "flex",
+      flexDirection: "column",
+      position: "absolute",
+      top: "0",
+      insetEnd: "0px",
+      margin: "1px",
+      width: "var(--stepper-width)",
+      height: "calc(100% - 2px)",
+      zIndex: "1",
+      borderStartWidth: "1px",
+      divideY: "1px"
+    },
+    incrementTrigger: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      flex: "1",
+      userSelect: "none",
+      cursor: "button",
+      lineHeight: "1",
+      color: "fg.muted",
+      "--stepper-base-radius": "radii.l1",
+      "--stepper-radius": "calc(var(--stepper-base-radius) + 1px)",
+      _icon: {
+        boxSize: "1em"
+      },
+      _disabled: {
+        opacity: "0.5"
+      },
+      _hover: {
+        bg: "bg.muted"
+      },
+      _active: {
+        bg: "bg.emphasized"
+      },
+      borderTopEndRadius: "var(--stepper-radius)"
+    },
+    decrementTrigger: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      flex: "1",
+      userSelect: "none",
+      cursor: "button",
+      lineHeight: "1",
+      color: "fg.muted",
+      "--stepper-base-radius": "radii.l1",
+      "--stepper-radius": "calc(var(--stepper-base-radius) + 1px)",
+      _icon: {
+        boxSize: "1em"
+      },
+      _disabled: {
+        opacity: "0.5"
+      },
+      _hover: {
+        bg: "bg.muted"
+      },
+      _active: {
+        bg: "bg.emphasized"
+      },
+      borderBottomEndRadius: "var(--stepper-radius)"
+    },
+    valueText: {
+      fontWeight: "medium",
+      fontFeatureSettings: "pnum",
+      fontVariantNumeric: "proportional-nums"
+    }
+  },
+  variants: {
+    size: {
+      xs: {
+        input: {
+          textStyle: "xs",
+          px: "2",
+          "--input-height": "sizes.8"
+        },
+        control: {
+          fontSize: "2xs",
+          "--stepper-width": "sizes.4"
+        }
+      },
+      sm: {
+        input: {
+          textStyle: "sm",
+          px: "2.5",
+          "--input-height": "sizes.9"
+        },
+        control: {
+          fontSize: "xs",
+          "--stepper-width": "sizes.5"
+        }
+      },
+      md: {
+        input: {
+          textStyle: "sm",
+          px: "3",
+          "--input-height": "sizes.10"
+        },
+        control: {
+          fontSize: "sm",
+          "--stepper-width": "sizes.6"
+        }
+      },
+      lg: {
+        input: {
+          textStyle: "md",
+          px: "4",
+          "--input-height": "sizes.11"
+        },
+        control: {
+          fontSize: "sm",
+          "--stepper-width": "sizes.6"
+        }
+      }
+    },
+    variant: {
+      outline: {
+        input: {
+          bg: "transparent",
+          borderWidth: "1px",
+          borderColor: "border",
+          focusVisibleRing: "inside"
+        }
+      },
+      subtle: {
+        input: {
+          borderWidth: "1px",
+          borderColor: "transparent",
+          bg: "bg.muted",
+          focusVisibleRing: "inside"
+        }
+      },
+      flushed: {
+        input: {
+          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 { numberInputSlotRecipe };

package/dist/esm/slot-recipes/pin-input.js

@@ -0,0 +1,119 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const pinInputSlotRecipe = defineSlotRecipe({
+  className: "pin-input",
+  slots: ["root", "label", "input", "control"],
+  base: {
+    input: {
+      width: "var(--input-height)",
+      minWidth: "0",
+      outline: "0",
+      position: "relative",
+      appearance: "none",
+      textAlign: "center",
+      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": {
+        input: {
+          textStyle: "xs",
+          px: "2",
+          "--input-height": "sizes.7"
+        }
+      },
+      xs: {
+        input: {
+          textStyle: "xs",
+          px: "2",
+          "--input-height": "sizes.8"
+        }
+      },
+      sm: {
+        input: {
+          textStyle: "sm",
+          px: "2.5",
+          "--input-height": "sizes.9"
+        }
+      },
+      md: {
+        input: {
+          textStyle: "sm",
+          px: "3",
+          "--input-height": "sizes.10"
+        }
+      },
+      lg: {
+        input: {
+          textStyle: "md",
+          px: "4",
+          "--input-height": "sizes.11"
+        }
+      },
+      xl: {
+        input: {
+          textStyle: "md",
+          px: "4.5",
+          "--input-height": "sizes.12"
+        }
+      },
+      "2xl": {
+        input: {
+          textStyle: "lg",
+          px: "5",
+          "--input-height": "sizes.16"
+        }
+      }
+    },
+    variant: {
+      outline: {
+        input: {
+          bg: "transparent",
+          borderWidth: "1px",
+          borderColor: "border",
+          focusVisibleRing: "inside"
+        }
+      },
+      subtle: {
+        input: {
+          borderWidth: "1px",
+          borderColor: "transparent",
+          bg: "bg.muted",
+          focusVisibleRing: "inside"
+        }
+      },
+      flushed: {
+        input: {
+          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 { pinInputSlotRecipe };

package/dist/esm/slot-recipes/popover.js

@@ -0,0 +1,102 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const popoverSlotRecipe = defineSlotRecipe({
+  className: "popover",
+  slots: [
+    "arrow",
+    "arrowTip",
+    "anchor",
+    "trigger",
+    "indicator",
+    "positioner",
+    "content",
+    "title",
+    "description",
+    "closeTrigger",
+    "header",
+    "body",
+    "footer"
+  ],
+  base: {
+    content: {
+      position: "relative",
+      display: "flex",
+      flexDirection: "column",
+      textStyle: "sm",
+      "--popover-bg": "colors.bg.panel",
+      bg: "var(--popover-bg)",
+      boxShadow: "lg",
+      "--popover-size": "sizes.xs",
+      "--popover-mobile-size": "calc(100dvw - 1rem)",
+      width: {
+        base: "min(var(--popover-mobile-size), var(--popover-size))",
+        sm: "var(--popover-size)"
+      },
+      borderRadius: "l3",
+      "--popover-z-index": "zIndex.popover",
+      zIndex: "calc(var(--popover-z-index) + var(--layer-index, 0))",
+      outline: "0",
+      transformOrigin: "var(--transform-origin)",
+      _open: {
+        animationStyle: "scale-fade-in",
+        animationDuration: "fast"
+      },
+      _closed: {
+        animationStyle: "scale-fade-out",
+        animationDuration: "faster"
+      }
+    },
+    header: {
+      paddingInline: "var(--popover-padding)",
+      paddingTop: "var(--popover-padding)"
+    },
+    body: {
+      padding: "var(--popover-padding)",
+      flex: "1"
+    },
+    footer: {
+      display: "flex",
+      alignItems: "center",
+      paddingInline: "var(--popover-padding)",
+      paddingBottom: "var(--popover-padding)"
+    },
+    arrow: {
+      "--arrow-size": "sizes.3",
+      "--arrow-background": "var(--popover-bg)"
+    },
+    arrowTip: {
+      borderTopWidth: "1px",
+      borderInlineStartWidth: "1px"
+    }
+  },
+  variants: {
+    size: {
+      xs: {
+        content: {
+          "--popover-padding": "spacing.3"
+        }
+      },
+      sm: {
+        content: {
+          "--popover-padding": "spacing.4"
+        }
+      },
+      md: {
+        content: {
+          "--popover-padding": "spacing.5"
+        }
+      },
+      lg: {
+        content: {
+          "--popover-padding": "spacing.6"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+export { popoverSlotRecipe };

package/dist/esm/slot-recipes/progress-circle.js

@@ -0,0 +1,104 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const progressCircleSlotRecipe = defineSlotRecipe({
+  className: "progress-circle",
+  slots: [
+    "root",
+    "label",
+    "track",
+    "range",
+    "valueText",
+    "view",
+    "circle",
+    "circleTrack",
+    "circleRange"
+  ],
+  base: {
+    root: {
+      display: "inline-flex",
+      textStyle: "sm",
+      position: "relative"
+    },
+    circle: {
+      _indeterminate: {
+        animation: "spin 2s linear infinite"
+      }
+    },
+    circleTrack: {
+      "--track-color": "colors.colorPalette.muted",
+      stroke: "var(--track-color)"
+    },
+    circleRange: {
+      stroke: "colorPalette.solid",
+      transitionProperty: "stroke-dasharray",
+      transitionDuration: "0.6s",
+      _indeterminate: {
+        animation: "circular-progress 1.5s linear infinite"
+      }
+    },
+    label: {
+      display: "inline-flex"
+    },
+    valueText: {
+      lineHeight: "1",
+      fontWeight: "medium",
+      letterSpacing: "tight",
+      fontVariantNumeric: "tabular-nums"
+    }
+  },
+  variants: {
+    size: {
+      xs: {
+        circle: {
+          "--size": "24px",
+          "--thickness": "4px"
+        },
+        valueText: {
+          textStyle: "2xs"
+        }
+      },
+      sm: {
+        circle: {
+          "--size": "32px",
+          "--thickness": "5px"
+        },
+        valueText: {
+          textStyle: "2xs"
+        }
+      },
+      md: {
+        circle: {
+          "--size": "40px",
+          "--thickness": "6px"
+        },
+        valueText: {
+          textStyle: "xs"
+        }
+      },
+      lg: {
+        circle: {
+          "--size": "48px",
+          "--thickness": "7px"
+        },
+        valueText: {
+          textStyle: "sm"
+        }
+      },
+      xl: {
+        circle: {
+          "--size": "64px",
+          "--thickness": "8px"
+        },
+        valueText: {
+          textStyle: "sm"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+export { progressCircleSlotRecipe };