@chakra-ui/panda-preset 3.3.0

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

@@ -0,0 +1,145 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const progressSlotRecipe = defineSlotRecipe({
+  slots: [
+    "root",
+    "label",
+    "track",
+    "range",
+    "valueText",
+    "view",
+    "circle",
+    "circleTrack",
+    "circleRange"
+  ],
+  className: "progress",
+  base: {
+    root: {
+      textStyle: "sm",
+      position: "relative"
+    },
+    track: {
+      overflow: "hidden",
+      position: "relative"
+    },
+    range: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      transitionProperty: "width, height",
+      transitionDuration: "slow",
+      height: "100%",
+      bgColor: "var(--track-color)",
+      _indeterminate: {
+        "--animate-from-x": "-40%",
+        "--animate-to-x": "100%",
+        position: "absolute",
+        willChange: "left",
+        minWidth: "50%",
+        animation: "position 1s ease infinite normal none running",
+        backgroundImage: "linear-gradient(to right, transparent 0%, var(--track-color) 50%, transparent 100%)"
+      }
+    },
+    label: {
+      display: "inline-flex",
+      fontWeight: "medium",
+      alignItems: "center",
+      gap: "1"
+    },
+    valueText: {
+      textStyle: "xs",
+      lineHeight: "1",
+      fontWeight: "medium"
+    }
+  },
+  variants: {
+    variant: {
+      outline: {
+        track: {
+          shadow: "inset",
+          bgColor: "bg.muted"
+        },
+        range: {
+          bgColor: "colorPalette.solid"
+        }
+      },
+      subtle: {
+        track: {
+          bgColor: "colorPalette.muted"
+        },
+        range: {
+          bgColor: "colorPalette.solid/72"
+        }
+      }
+    },
+    shape: {
+      square: {},
+      rounded: {
+        track: {
+          borderRadius: "l1"
+        }
+      },
+      full: {
+        track: {
+          borderRadius: "full"
+        }
+      }
+    },
+    striped: {
+      true: {
+        range: {
+          backgroundImage: "linear-gradient(45deg, var(--stripe-color) 25%, transparent 25%, transparent 50%, var(--stripe-color) 50%, var(--stripe-color) 75%, transparent 75%, transparent)",
+          backgroundSize: "var(--stripe-size) var(--stripe-size)",
+          "--stripe-size": "1rem",
+          "--stripe-color": {
+            _light: "rgba(255, 255, 255, 0.3)",
+            _dark: "rgba(0, 0, 0, 0.3)"
+          }
+        }
+      }
+    },
+    animated: {
+      true: {
+        range: {
+          "--animate-from": "var(--stripe-size)",
+          animation: "bg-position 1s linear infinite"
+        }
+      }
+    },
+    size: {
+      xs: {
+        track: {
+          h: "1.5"
+        }
+      },
+      sm: {
+        track: {
+          h: "2"
+        }
+      },
+      md: {
+        track: {
+          h: "2.5"
+        }
+      },
+      lg: {
+        track: {
+          h: "3"
+        }
+      },
+      xl: {
+        track: {
+          h: "4"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "outline",
+    size: "md",
+    shape: "rounded"
+  }
+});
+
+export { progressSlotRecipe };

package/dist/esm/slot-recipes/qr-code.js

@@ -0,0 +1,78 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const qrCodeSlotRecipe = defineSlotRecipe({
+  slots: ["root", "frame", "pattern", "overlay", "downloadTrigger"],
+  className: "qr-code",
+  base: {
+    root: {
+      position: "relative",
+      width: "fit-content",
+      "--qr-code-overlay-size": "calc(var(--qr-code-size) / 3)"
+    },
+    frame: {
+      width: "var(--qr-code-size)",
+      height: "var(--qr-code-size)",
+      fill: "currentColor"
+    },
+    overlay: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "var(--qr-code-overlay-size)",
+      height: "var(--qr-code-overlay-size)",
+      padding: "1",
+      bg: "bg",
+      rounded: "l1"
+    }
+  },
+  variants: {
+    size: {
+      "2xs": {
+        root: {
+          "--qr-code-size": "40px"
+        }
+      },
+      xs: {
+        root: {
+          "--qr-code-size": "64px"
+        }
+      },
+      sm: {
+        root: {
+          "--qr-code-size": "80px"
+        }
+      },
+      md: {
+        root: {
+          "--qr-code-size": "120px"
+        }
+      },
+      lg: {
+        root: {
+          "--qr-code-size": "160px"
+        }
+      },
+      xl: {
+        root: {
+          "--qr-code-size": "200px"
+        }
+      },
+      "2xl": {
+        root: {
+          "--qr-code-size": "240px"
+        }
+      },
+      full: {
+        root: {
+          "--qr-code-size": "100%"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+export { qrCodeSlotRecipe };

package/dist/esm/slot-recipes/radio-card.js

@@ -0,0 +1,315 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const radioCardSlotRecipe = defineSlotRecipe({
+  className: "radio-card",
+  slots: [
+    "root",
+    "label",
+    "item",
+    "itemText",
+    "itemControl",
+    "indicator",
+    "itemAddon",
+    "itemIndicator",
+    "itemContent",
+    "itemDescription"
+  ],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "1.5",
+      isolation: "isolate"
+    },
+    item: {
+      flex: "1",
+      display: "flex",
+      flexDirection: "column",
+      userSelect: "none",
+      position: "relative",
+      borderRadius: "l2",
+      _focus: {
+        bg: "colorPalette.muted/20"
+      },
+      _disabled: {
+        opacity: "0.8",
+        borderColor: "border.disabled"
+      },
+      _checked: {
+        zIndex: "1"
+      }
+    },
+    label: {
+      display: "inline-flex",
+      fontWeight: "medium",
+      textStyle: "sm",
+      _disabled: {
+        opacity: "0.5"
+      }
+    },
+    itemText: {
+      fontWeight: "medium"
+    },
+    itemDescription: {
+      opacity: "0.64",
+      textStyle: "sm"
+    },
+    itemControl: {
+      display: "inline-flex",
+      flex: "1",
+      pos: "relative",
+      rounded: "inherit",
+      justifyContent: "var(--radio-card-justify)",
+      alignItems: "var(--radio-card-align)",
+      _disabled: {
+        bg: "bg.muted"
+      }
+    },
+    itemIndicator: {
+      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"
+      }
+    },
+    itemAddon: {
+      roundedBottom: "inherit",
+      _disabled: {
+        color: "fg.muted"
+      }
+    },
+    itemContent: {
+      display: "flex",
+      flexDirection: "column",
+      flex: "1",
+      gap: "1",
+      justifyContent: "var(--radio-card-justify)",
+      alignItems: "var(--radio-card-align)"
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        item: {
+          textStyle: "sm"
+        },
+        itemControl: {
+          padding: "3",
+          gap: "1.5"
+        },
+        itemAddon: {
+          px: "3",
+          py: "1.5",
+          borderTopWidth: "1px"
+        },
+        itemIndicator: {
+          boxSize: "4"
+        }
+      },
+      md: {
+        item: {
+          textStyle: "sm"
+        },
+        itemControl: {
+          padding: "4",
+          gap: "2.5"
+        },
+        itemAddon: {
+          px: "4",
+          py: "2",
+          borderTopWidth: "1px"
+        },
+        itemIndicator: {
+          boxSize: "5"
+        }
+      },
+      lg: {
+        item: {
+          textStyle: "md"
+        },
+        itemControl: {
+          padding: "4",
+          gap: "3.5"
+        },
+        itemAddon: {
+          px: "4",
+          py: "2",
+          borderTopWidth: "1px"
+        },
+        itemIndicator: {
+          boxSize: "6"
+        }
+      }
+    },
+    variant: {
+      surface: {
+        item: {
+          borderWidth: "1px",
+          _checked: {
+            bg: "colorPalette.subtle",
+            color: "colorPalette.fg",
+            borderColor: "colorPalette.muted"
+          }
+        },
+        itemIndicator: {
+          borderWidth: "1px",
+          borderColor: "border",
+          _checked: {
+            bg: "colorPalette.solid",
+            color: "colorPalette.contrast",
+            borderColor: "colorPalette.solid"
+          }
+        }
+      },
+      subtle: {
+        item: {
+          bg: "bg.muted"
+        },
+        itemControl: {
+          _checked: {
+            bg: "colorPalette.muted",
+            color: "colorPalette.fg"
+          }
+        },
+        itemIndicator: {
+          borderWidth: "1px",
+          borderColor: "inherit",
+          _checked: {
+            color: "colorPalette.fg",
+            borderColor: "colorPalette.solid"
+          },
+          "& .dot": {
+            scale: "0.6"
+          }
+        }
+      },
+      outline: {
+        item: {
+          borderWidth: "1px",
+          _checked: {
+            boxShadow: "0 0 0 1px var(--shadow-color)",
+            boxShadowColor: "colorPalette.solid",
+            borderColor: "colorPalette.solid"
+          }
+        },
+        itemIndicator: {
+          borderWidth: "1px",
+          borderColor: "border",
+          _checked: {
+            bg: "colorPalette.solid",
+            color: "colorPalette.contrast",
+            borderColor: "colorPalette.solid"
+          }
+        }
+      },
+      solid: {
+        item: {
+          borderWidth: "1px",
+          _checked: {
+            bg: "colorPalette.solid",
+            color: "colorPalette.contrast",
+            borderColor: "colorPalette.solid"
+          }
+        },
+        itemIndicator: {
+          bg: "bg",
+          borderWidth: "1px",
+          borderColor: "inherit",
+          _checked: {
+            color: "colorPalette.solid",
+            borderColor: "currentcolor"
+          }
+        }
+      }
+    },
+    justify: {
+      start: {
+        item: {
+          "--radio-card-justify": "flex-start"
+        }
+      },
+      end: {
+        item: {
+          "--radio-card-justify": "flex-end"
+        }
+      },
+      center: {
+        item: {
+          "--radio-card-justify": "center"
+        }
+      }
+    },
+    align: {
+      start: {
+        item: {
+          "--radio-card-align": "flex-start"
+        },
+        itemControl: {
+          textAlign: "start"
+        }
+      },
+      end: {
+        item: {
+          "--radio-card-align": "flex-end"
+        },
+        itemControl: {
+          textAlign: "end"
+        }
+      },
+      center: {
+        item: {
+          "--radio-card-align": "center"
+        },
+        itemControl: {
+          textAlign: "center"
+        }
+      }
+    },
+    orientation: {
+      vertical: {
+        itemControl: {
+          flexDirection: "column"
+        }
+      },
+      horizontal: {
+        itemControl: {
+          flexDirection: "row"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "outline",
+    align: "start",
+    orientation: "horizontal"
+  }
+});
+
+export { radioCardSlotRecipe };

package/dist/esm/slot-recipes/radio-group.js

@@ -0,0 +1,149 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const radioGroupSlotRecipe = defineSlotRecipe({
+  className: "radio-group",
+  slots: [
+    "root",
+    "label",
+    "item",
+    "itemText",
+    "itemControl",
+    "indicator",
+    "itemAddon",
+    "itemIndicator"
+  ],
+  base: {
+    item: {
+      display: "inline-flex",
+      alignItems: "center",
+      position: "relative",
+      fontWeight: "medium",
+      _disabled: {
+        cursor: "disabled"
+      }
+    },
+    itemControl: {
+      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"
+      }
+    },
+    label: {
+      userSelect: "none",
+      textStyle: "sm",
+      _disabled: {
+        opacity: "0.5"
+      }
+    }
+  },
+  variants: {
+    variant: {
+      outline: {
+        itemControl: {
+          borderWidth: "1px",
+          borderColor: "inherit",
+          _checked: {
+            color: "colorPalette.fg",
+            borderColor: "colorPalette.solid"
+          },
+          "& .dot": {
+            scale: "0.6"
+          }
+        }
+      },
+      subtle: {
+        itemControl: {
+          borderWidth: "1px",
+          bg: "colorPalette.muted",
+          borderColor: "colorPalette.muted",
+          color: "transparent",
+          _checked: {
+            color: "colorPalette.fg"
+          }
+        }
+      },
+      solid: {
+        itemControl: {
+          borderWidth: "1px",
+          borderColor: "border",
+          _checked: {
+            bg: "colorPalette.solid",
+            color: "colorPalette.contrast",
+            borderColor: "colorPalette.solid"
+          }
+        }
+      }
+    },
+    size: {
+      xs: {
+        item: {
+          textStyle: "xs",
+          gap: "1.5"
+        },
+        itemControl: {
+          boxSize: "3"
+        }
+      },
+      sm: {
+        item: {
+          textStyle: "sm",
+          gap: "2"
+        },
+        itemControl: {
+          boxSize: "4"
+        }
+      },
+      md: {
+        item: {
+          textStyle: "sm",
+          gap: "2.5"
+        },
+        itemControl: {
+          boxSize: "5"
+        }
+      },
+      lg: {
+        item: {
+          textStyle: "md",
+          gap: "3"
+        },
+        itemControl: {
+          boxSize: "6"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "solid"
+  }
+});
+
+export { radioGroupSlotRecipe };