@chakra-ui/panda-preset 3.3.0

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

@@ -0,0 +1,86 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const ratingGroupSlotRecipe = defineSlotRecipe({
+  className: "rating-group",
+  slots: ["root", "label", "item", "control", "itemIndicator"],
+  base: {
+    root: {
+      display: "inline-flex"
+    },
+    control: {
+      display: "inline-flex",
+      alignItems: "center"
+    },
+    item: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      userSelect: "none"
+    },
+    itemIndicator: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "1em",
+      height: "1em",
+      position: "relative",
+      _icon: {
+        stroke: "currentColor",
+        width: "100%",
+        height: "100%",
+        display: "inline-block",
+        flexShrink: 0,
+        position: "absolute",
+        left: 0,
+        top: 0
+      },
+      "& [data-bg]": {
+        color: "bg.emphasized"
+      },
+      "& [data-fg]": {
+        color: "transparent"
+      },
+      "&[data-highlighted]:not([data-half])": {
+        "& [data-fg]": {
+          color: "colorPalette.solid"
+        }
+      },
+      "&[data-half]": {
+        "& [data-fg]": {
+          color: "colorPalette.solid",
+          clipPath: "inset(0 50% 0 0)"
+        }
+      }
+    }
+  },
+  variants: {
+    size: {
+      xs: {
+        item: {
+          textStyle: "sm"
+        }
+      },
+      sm: {
+        item: {
+          textStyle: "md"
+        }
+      },
+      md: {
+        item: {
+          textStyle: "xl"
+        }
+      },
+      lg: {
+        item: {
+          textStyle: "2xl"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+export { ratingGroupSlotRecipe };

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

@@ -0,0 +1,117 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const segmentGroupSlotRecipe = defineSlotRecipe({
+  className: "segment-group",
+  slots: ["root", "label", "item", "itemText", "itemControl", "indicator"],
+  base: {
+    root: {
+      "--segment-radius": "radii.l2",
+      borderRadius: "l2",
+      display: "inline-flex",
+      boxShadow: "inset",
+      minW: "max-content",
+      textAlign: "center",
+      position: "relative",
+      isolation: "isolate",
+      bg: "bg.muted"
+    },
+    item: {
+      display: "flex",
+      alignItems: "center",
+      userSelect: "none",
+      fontSize: "sm",
+      position: "relative",
+      color: "fg",
+      borderRadius: "var(--segment-radius)",
+      _disabled: {
+        opacity: "0.5"
+      },
+      "&:has(input:focus-visible)": {
+        focusRing: "outside"
+      },
+      _before: {
+        content: '""',
+        position: "absolute",
+        insetInlineStart: 0,
+        insetBlock: "1.5",
+        bg: "border",
+        width: "1px",
+        transition: "opacity 0.2s"
+      },
+      "& + &[data-state=checked], &[data-state=checked] + &, &:first-of-type": {
+        _before: {
+          opacity: "0"
+        }
+      },
+      "&[data-state=checked][data-ssr]": {
+        shadow: "sm",
+        bg: "bg",
+        borderRadius: "var(--segment-radius)"
+      }
+    },
+    indicator: {
+      shadow: "sm",
+      pos: "absolute",
+      bg: {
+        _light: "bg",
+        _dark: "bg.emphasized"
+      },
+      width: "var(--width)",
+      height: "var(--height)",
+      top: "var(--top)",
+      left: "var(--left)",
+      zIndex: -1,
+      borderRadius: "var(--segment-radius)"
+    }
+  },
+  variants: {
+    size: {
+      xs: {
+        root: {
+          height: "6"
+        },
+        item: {
+          textStyle: "xs",
+          px: "3",
+          gap: "1"
+        }
+      },
+      sm: {
+        root: {
+          height: "8"
+        },
+        item: {
+          textStyle: "sm",
+          px: "4",
+          gap: "2"
+        }
+      },
+      md: {
+        root: {
+          height: "10"
+        },
+        item: {
+          textStyle: "sm",
+          px: "4",
+          gap: "2"
+        }
+      },
+      lg: {
+        root: {
+          height: "10"
+        },
+        item: {
+          textStyle: "md",
+          px: "5",
+          gap: "3"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+export { segmentGroupSlotRecipe };

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

@@ -0,0 +1,303 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const selectSlotRecipe = defineSlotRecipe({
+  className: "select",
+  slots: [
+    "label",
+    "positioner",
+    "trigger",
+    "indicator",
+    "clearTrigger",
+    "item",
+    "itemText",
+    "itemIndicator",
+    "itemGroup",
+    "itemGroupLabel",
+    "list",
+    "content",
+    "root",
+    "control",
+    "valueText",
+    "indicatorGroup"
+  ],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "1.5",
+      width: "full"
+    },
+    trigger: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "full",
+      minH: "var(--select-trigger-height)",
+      px: "var(--select-trigger-padding-x)",
+      borderRadius: "l2",
+      userSelect: "none",
+      textAlign: "start",
+      focusVisibleRing: "inside",
+      _placeholderShown: {
+        color: "fg.muted"
+      },
+      _disabled: {
+        layerStyle: "disabled"
+      },
+      _invalid: {
+        borderColor: "border.error"
+      }
+    },
+    indicatorGroup: {
+      display: "flex",
+      alignItems: "center",
+      gap: "1",
+      pos: "absolute",
+      right: "0",
+      top: "0",
+      bottom: "0",
+      px: "var(--select-trigger-padding-x)",
+      pointerEvents: "none"
+    },
+    indicator: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: {
+        base: "fg.muted",
+        _disabled: "fg.subtle",
+        _invalid: "fg.error"
+      }
+    },
+    content: {
+      background: "bg.panel",
+      display: "flex",
+      flexDirection: "column",
+      zIndex: "dropdown",
+      borderRadius: "l2",
+      outline: 0,
+      maxH: "96",
+      overflowY: "auto",
+      boxShadow: "md",
+      _open: {
+        animationStyle: "slide-fade-in",
+        animationDuration: "fast"
+      },
+      _closed: {
+        animationStyle: "slide-fade-out",
+        animationDuration: "fastest"
+      }
+    },
+    item: {
+      position: "relative",
+      userSelect: "none",
+      display: "flex",
+      alignItems: "center",
+      gap: "2",
+      cursor: "option",
+      justifyContent: "space-between",
+      flex: "1",
+      textAlign: "start",
+      borderRadius: "l1",
+      _highlighted: {
+        bg: {
+          _light: "bg.muted",
+          _dark: "bg.emphasized"
+        }
+      },
+      _disabled: {
+        pointerEvents: "none",
+        opacity: "0.5"
+      },
+      _icon: {
+        width: "4",
+        height: "4"
+      }
+    },
+    control: {
+      pos: "relative"
+    },
+    itemText: {
+      flex: "1"
+    },
+    itemGroup: {
+      _first: {
+        mt: "0"
+      }
+    },
+    itemGroupLabel: {
+      py: "1",
+      fontWeight: "medium"
+    },
+    label: {
+      fontWeight: "medium",
+      userSelect: "none",
+      textStyle: "sm",
+      _disabled: {
+        layerStyle: "disabled"
+      }
+    },
+    valueText: {
+      lineClamp: "1",
+      maxW: "80%"
+    }
+  },
+  variants: {
+    variant: {
+      outline: {
+        trigger: {
+          bg: "transparent",
+          borderWidth: "1px",
+          borderColor: "border",
+          _expanded: {
+            borderColor: "border.emphasized"
+          }
+        }
+      },
+      subtle: {
+        trigger: {
+          borderWidth: "1px",
+          borderColor: "transparent",
+          bg: "bg.muted"
+        }
+      }
+    },
+    size: {
+      xs: {
+        root: {
+          "--select-trigger-height": "sizes.8",
+          "--select-trigger-padding-x": "spacing.2"
+        },
+        content: {
+          p: "1",
+          gap: "1",
+          textStyle: "xs"
+        },
+        trigger: {
+          textStyle: "xs",
+          gap: "1"
+        },
+        item: {
+          py: "1",
+          px: "2"
+        },
+        itemGroupLabel: {
+          py: "1",
+          px: "2"
+        },
+        indicator: {
+          _icon: {
+            width: "3.5",
+            height: "3.5"
+          }
+        }
+      },
+      sm: {
+        root: {
+          "--select-trigger-height": "sizes.9",
+          "--select-trigger-padding-x": "spacing.2.5"
+        },
+        content: {
+          p: "1",
+          textStyle: "sm"
+        },
+        trigger: {
+          textStyle: "sm",
+          gap: "1"
+        },
+        indicator: {
+          _icon: {
+            width: "4",
+            height: "4"
+          }
+        },
+        item: {
+          py: "1",
+          px: "1.5"
+        },
+        itemGroup: {
+          mt: "1"
+        },
+        itemGroupLabel: {
+          py: "1",
+          px: "1.5"
+        }
+      },
+      md: {
+        root: {
+          "--select-trigger-height": "sizes.10",
+          "--select-trigger-padding-x": "spacing.3"
+        },
+        content: {
+          p: "1",
+          textStyle: "sm"
+        },
+        itemGroup: {
+          mt: "1.5"
+        },
+        item: {
+          py: "1.5",
+          px: "2"
+        },
+        itemIndicator: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        itemGroupLabel: {
+          py: "1.5",
+          px: "2"
+        },
+        trigger: {
+          textStyle: "sm",
+          gap: "2"
+        },
+        indicator: {
+          _icon: {
+            width: "4",
+            height: "4"
+          }
+        }
+      },
+      lg: {
+        root: {
+          "--select-trigger-height": "sizes.12",
+          "--select-trigger-padding-x": "spacing.4"
+        },
+        content: {
+          p: "1.5",
+          textStyle: "md"
+        },
+        itemGroup: {
+          mt: "2"
+        },
+        item: {
+          py: "2",
+          px: "3"
+        },
+        itemGroupLabel: {
+          py: "2",
+          px: "3"
+        },
+        trigger: {
+          textStyle: "md",
+          py: "3",
+          gap: "2"
+        },
+        indicator: {
+          _icon: {
+            width: "5",
+            height: "5"
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "outline"
+  }
+});
+
+export { selectSlotRecipe };

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

@@ -0,0 +1,216 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const sliderSlotRecipe = defineSlotRecipe({
+  className: "slider",
+  slots: [
+    "root",
+    "label",
+    "thumb",
+    "valueText",
+    "track",
+    "range",
+    "control",
+    "markerGroup",
+    "marker",
+    "draggingIndicator",
+    "markerIndicator"
+  ],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "1",
+      textStyle: "sm",
+      position: "relative",
+      isolation: "isolate",
+      touchAction: "none"
+    },
+    label: {
+      fontWeight: "medium",
+      textStyle: "sm"
+    },
+    control: {
+      display: "inline-flex",
+      alignItems: "center",
+      position: "relative"
+    },
+    track: {
+      overflow: "hidden",
+      borderRadius: "full",
+      flex: "1"
+    },
+    range: {
+      width: "inherit",
+      height: "inherit",
+      _disabled: {
+        bg: "border.emphasized!"
+      }
+    },
+    markerGroup: {
+      position: "absolute!",
+      zIndex: "1"
+    },
+    marker: {
+      "--marker-bg": {
+        base: "white",
+        _underValue: "colors.bg"
+      },
+      display: "flex",
+      alignItems: "center",
+      gap: "calc(var(--slider-thumb-size) / 2)",
+      color: "fg.muted",
+      textStyle: "xs"
+    },
+    markerIndicator: {
+      width: "var(--slider-marker-size)",
+      height: "var(--slider-marker-size)",
+      borderRadius: "full",
+      bg: "var(--marker-bg)"
+    },
+    thumb: {
+      width: "var(--slider-thumb-size)",
+      height: "var(--slider-thumb-size)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      outline: 0,
+      zIndex: "2",
+      borderRadius: "full",
+      _focusVisible: {
+        ring: "2px",
+        ringColor: "colorPalette.focusRing",
+        ringOffset: "2px",
+        ringOffsetColor: "bg"
+      }
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        root: {
+          "--slider-thumb-size": "sizes.4",
+          "--slider-track-size": "sizes.1.5",
+          "--slider-marker-center": "6px",
+          "--slider-marker-size": "sizes.1",
+          "--slider-marker-inset": "3px"
+        }
+      },
+      md: {
+        root: {
+          "--slider-thumb-size": "sizes.5",
+          "--slider-track-size": "sizes.2",
+          "--slider-marker-center": "8px",
+          "--slider-marker-size": "sizes.1",
+          "--slider-marker-inset": "4px"
+        }
+      },
+      lg: {
+        root: {
+          "--slider-thumb-size": "sizes.6",
+          "--slider-track-size": "sizes.2.5",
+          "--slider-marker-center": "9px",
+          "--slider-marker-size": "sizes.1.5",
+          "--slider-marker-inset": "5px"
+        }
+      }
+    },
+    variant: {
+      outline: {
+        track: {
+          shadow: "inset",
+          bg: "bg.emphasized/72"
+        },
+        range: {
+          bg: "colorPalette.solid"
+        },
+        thumb: {
+          borderWidth: "2px",
+          borderColor: "colorPalette.solid",
+          bg: "bg",
+          _disabled: {
+            bg: "border.emphasized",
+            borderColor: "border.emphasized"
+          }
+        }
+      },
+      solid: {
+        track: {
+          bg: "colorPalette.subtle",
+          _disabled: {
+            bg: "bg.muted"
+          }
+        },
+        range: {
+          bg: "colorPalette.solid"
+        },
+        thumb: {
+          bg: "colorPalette.solid",
+          _disabled: {
+            bg: "border.emphasized"
+          }
+        }
+      }
+    },
+    orientation: {
+      vertical: {
+        root: {
+          display: "inline-flex"
+        },
+        control: {
+          flexDirection: "column",
+          height: "100%",
+          minWidth: "var(--slider-thumb-size)",
+          "&[data-has-mark-label]": {
+            marginEnd: "4"
+          }
+        },
+        track: {
+          width: "var(--slider-track-size)"
+        },
+        thumb: {
+          left: "50%",
+          translate: "-50% 0"
+        },
+        markerGroup: {
+          insetStart: "var(--slider-marker-center)",
+          insetBlock: "var(--slider-marker-inset)"
+        },
+        marker: {
+          flexDirection: "row"
+        }
+      },
+      horizontal: {
+        control: {
+          flexDirection: "row",
+          width: "100%",
+          minHeight: "var(--slider-thumb-size)",
+          "&[data-has-mark-label]": {
+            marginBottom: "4"
+          }
+        },
+        track: {
+          height: "var(--slider-track-size)"
+        },
+        thumb: {
+          top: "50%",
+          translate: "0 -50%"
+        },
+        markerGroup: {
+          top: "var(--slider-marker-center)",
+          insetInline: "var(--slider-marker-inset)"
+        },
+        marker: {
+          flexDirection: "column"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "outline",
+    orientation: "horizontal"
+  }
+});
+
+export { sliderSlotRecipe };