@chakra-ui/panda-preset 3.3.0

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

@@ -0,0 +1,82 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const statSlotRecipe = defineSlotRecipe({
+  className: "stat",
+  slots: ["root", "label", "helpText", "valueText", "valueUnit", "indicator"],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "1",
+      position: "relative",
+      flex: "1"
+    },
+    label: {
+      display: "inline-flex",
+      gap: "1.5",
+      alignItems: "center",
+      color: "fg.muted",
+      textStyle: "sm"
+    },
+    helpText: {
+      color: "fg.muted",
+      textStyle: "xs"
+    },
+    valueUnit: {
+      color: "fg.muted",
+      textStyle: "xs",
+      fontWeight: "initial",
+      letterSpacing: "initial"
+    },
+    valueText: {
+      verticalAlign: "baseline",
+      fontWeight: "semibold",
+      letterSpacing: "tight",
+      fontFeatureSettings: "pnum",
+      fontVariantNumeric: "proportional-nums",
+      display: "inline-flex",
+      gap: "1"
+    },
+    indicator: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      marginEnd: 1,
+      "& :where(svg)": {
+        w: "1em",
+        h: "1em"
+      },
+      "&[data-type=up]": {
+        color: "fg.success"
+      },
+      "&[data-type=down]": {
+        color: "fg.error"
+      }
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        valueText: {
+          textStyle: "xl"
+        }
+      },
+      md: {
+        valueText: {
+          textStyle: "2xl"
+        }
+      },
+      lg: {
+        valueText: {
+          textStyle: "3xl"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+export { statSlotRecipe };

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

@@ -0,0 +1,46 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const statusSlotRecipe = defineSlotRecipe({
+  className: "status",
+  slots: ["root", "indicator"],
+  base: {
+    root: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "2"
+    },
+    indicator: {
+      width: "0.64em",
+      height: "0.64em",
+      flexShrink: 0,
+      borderRadius: "full",
+      forcedColorAdjust: "none",
+      bg: "colorPalette.solid"
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        root: {
+          textStyle: "xs"
+        }
+      },
+      md: {
+        root: {
+          textStyle: "sm"
+        }
+      },
+      lg: {
+        root: {
+          textStyle: "md"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+export { statusSlotRecipe };

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

@@ -0,0 +1,229 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const stepsSlotRecipe = defineSlotRecipe({
+  className: "steps",
+  slots: [
+    "root",
+    "list",
+    "item",
+    "trigger",
+    "indicator",
+    "separator",
+    "content",
+    "title",
+    "description",
+    "nextTrigger",
+    "prevTrigger",
+    "progress"
+  ],
+  base: {
+    root: {
+      display: "flex",
+      width: "full"
+    },
+    list: {
+      display: "flex",
+      justifyContent: "space-between",
+      "--steps-gutter": "spacing.3",
+      "--steps-thickness": "2px"
+    },
+    title: {
+      fontWeight: "medium",
+      color: "fg"
+    },
+    description: {
+      color: "fg.muted"
+    },
+    separator: {
+      bg: "border",
+      flex: "1"
+    },
+    indicator: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      flexShrink: "0",
+      borderRadius: "full",
+      fontWeight: "medium",
+      width: "var(--steps-size)",
+      height: "var(--steps-size)",
+      _icon: {
+        flexShrink: "0",
+        width: "var(--steps-icon-size)",
+        height: "var(--steps-icon-size)"
+      }
+    },
+    item: {
+      position: "relative",
+      display: "flex",
+      flex: "1 0 0",
+      "&:last-of-type": {
+        flex: "initial",
+        "& [data-part=separator]": {
+          display: "none"
+        }
+      }
+    },
+    trigger: {
+      display: "flex",
+      alignItems: "center",
+      gap: "3",
+      textAlign: "start",
+      focusVisibleRing: "outside",
+      borderRadius: "l2"
+    },
+    content: {
+      focusVisibleRing: "outside"
+    }
+  },
+  variants: {
+    orientation: {
+      vertical: {
+        root: {
+          flexDirection: "row",
+          height: "100%"
+        },
+        list: {
+          flexDirection: "column",
+          alignItems: "flex-start"
+        },
+        separator: {
+          position: "absolute",
+          width: "var(--steps-thickness)",
+          height: "100%",
+          maxHeight: "calc(100% - var(--steps-size) - var(--steps-gutter) * 2)",
+          top: "calc(var(--steps-size) + var(--steps-gutter))",
+          insetStart: "calc(var(--steps-size) / 2 - 1px)"
+        },
+        item: {
+          alignItems: "flex-start"
+        }
+      },
+      horizontal: {
+        root: {
+          flexDirection: "column",
+          width: "100%"
+        },
+        list: {
+          flexDirection: "row",
+          alignItems: "center"
+        },
+        separator: {
+          width: "100%",
+          height: "var(--steps-thickness)",
+          marginX: "var(--steps-gutter)"
+        },
+        item: {
+          alignItems: "center"
+        }
+      }
+    },
+    variant: {
+      solid: {
+        indicator: {
+          _incomplete: {
+            borderWidth: "var(--steps-thickness)"
+          },
+          _current: {
+            bg: "colorPalette.muted",
+            borderWidth: "var(--steps-thickness)",
+            borderColor: "colorPalette.solid",
+            color: "colorPalette.fg"
+          },
+          _complete: {
+            bg: "colorPalette.solid",
+            borderColor: "colorPalette.solid",
+            color: "colorPalette.contrast"
+          }
+        },
+        separator: {
+          _complete: {
+            bg: "colorPalette.solid"
+          }
+        }
+      },
+      subtle: {
+        indicator: {
+          _incomplete: {
+            bg: "bg.muted"
+          },
+          _current: {
+            bg: "colorPalette.muted",
+            color: "colorPalette.fg"
+          },
+          _complete: {
+            bg: "colorPalette.emphasized",
+            color: "colorPalette.fg"
+          }
+        },
+        separator: {
+          _complete: {
+            bg: "colorPalette.emphasized"
+          }
+        }
+      }
+    },
+    size: {
+      xs: {
+        root: {
+          gap: "2.5"
+        },
+        list: {
+          "--steps-size": "sizes.6",
+          "--steps-icon-size": "sizes.3.5",
+          textStyle: "xs"
+        },
+        title: {
+          textStyle: "sm"
+        }
+      },
+      sm: {
+        root: {
+          gap: "3"
+        },
+        list: {
+          "--steps-size": "sizes.8",
+          "--steps-icon-size": "sizes.4",
+          textStyle: "xs"
+        },
+        title: {
+          textStyle: "sm"
+        }
+      },
+      md: {
+        root: {
+          gap: "4"
+        },
+        list: {
+          "--steps-size": "sizes.10",
+          "--steps-icon-size": "sizes.4",
+          textStyle: "sm"
+        },
+        title: {
+          textStyle: "sm"
+        }
+      },
+      lg: {
+        root: {
+          gap: "6"
+        },
+        list: {
+          "--steps-size": "sizes.11",
+          "--steps-icon-size": "sizes.5",
+          textStyle: "md"
+        },
+        title: {
+          textStyle: "md"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "solid",
+    orientation: "horizontal"
+  }
+});
+
+export { stepsSlotRecipe };

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

@@ -0,0 +1,161 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const switchSlotRecipe = defineSlotRecipe({
+  slots: ["root", "label", "control", "thumb", "indicator"],
+  className: "switch",
+  base: {
+    root: {
+      display: "inline-flex",
+      gap: "2.5",
+      alignItems: "center",
+      position: "relative",
+      verticalAlign: "middle",
+      "--switch-diff": "calc(var(--switch-width) - var(--switch-height))",
+      "--switch-x": {
+        base: "var(--switch-diff)",
+        _rtl: "calc(var(--switch-diff) * -1)"
+      }
+    },
+    label: {
+      lineHeight: "1",
+      userSelect: "none",
+      fontSize: "sm",
+      fontWeight: "medium",
+      _disabled: {
+        opacity: "0.5"
+      }
+    },
+    indicator: {
+      position: "absolute",
+      height: "var(--switch-height)",
+      width: "var(--switch-height)",
+      fontSize: "var(--switch-indicator-font-size)",
+      fontWeight: "medium",
+      flexShrink: 0,
+      userSelect: "none",
+      display: "grid",
+      placeContent: "center",
+      transition: "inset-inline-start 0.12s ease",
+      insetInlineStart: "calc(var(--switch-x) - 2px)",
+      _checked: {
+        insetInlineStart: "2px"
+      }
+    },
+    control: {
+      display: "inline-flex",
+      gap: "0.5rem",
+      flexShrink: 0,
+      justifyContent: "flex-start",
+      cursor: "switch",
+      borderRadius: "full",
+      position: "relative",
+      width: "var(--switch-width)",
+      height: "var(--switch-height)",
+      _disabled: {
+        opacity: "0.5",
+        cursor: "not-allowed"
+      },
+      _invalid: {
+        outline: "2px solid",
+        outlineColor: "border.error",
+        outlineOffset: "2px"
+      }
+    },
+    thumb: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      transitionProperty: "translate",
+      transitionDuration: "fast",
+      borderRadius: "inherit",
+      _checked: {
+        translate: "var(--switch-x) 0"
+      }
+    }
+  },
+  variants: {
+    variant: {
+      solid: {
+        control: {
+          borderRadius: "full",
+          bg: "bg.emphasized",
+          focusVisibleRing: "outside",
+          _checked: {
+            bg: "colorPalette.solid"
+          }
+        },
+        thumb: {
+          bg: "white",
+          width: "var(--switch-height)",
+          height: "var(--switch-height)",
+          scale: "0.8",
+          boxShadow: "sm",
+          _checked: {
+            bg: "colorPalette.contrast"
+          }
+        }
+      },
+      raised: {
+        control: {
+          borderRadius: "full",
+          height: "calc(var(--switch-height) / 2)",
+          bg: "bg.muted",
+          boxShadow: "inset",
+          _checked: {
+            bg: "colorPalette.solid/60"
+          }
+        },
+        thumb: {
+          width: "var(--switch-height)",
+          height: "var(--switch-height)",
+          position: "relative",
+          top: "calc(var(--switch-height) * -0.25)",
+          bg: "white",
+          boxShadow: "xs",
+          focusVisibleRing: "outside",
+          _checked: {
+            bg: "colorPalette.solid"
+          }
+        }
+      }
+    },
+    size: {
+      xs: {
+        root: {
+          "--switch-width": "sizes.6",
+          "--switch-height": "sizes.3",
+          "--switch-indicator-font-size": "fontSizes.xs"
+        }
+      },
+      sm: {
+        root: {
+          "--switch-width": "sizes.8",
+          "--switch-height": "sizes.4",
+          "--switch-indicator-font-size": "fontSizes.xs"
+        }
+      },
+      md: {
+        root: {
+          "--switch-width": "sizes.10",
+          "--switch-height": "sizes.5",
+          "--switch-indicator-font-size": "fontSizes.sm"
+        }
+      },
+      lg: {
+        root: {
+          "--switch-width": "sizes.12",
+          "--switch-height": "sizes.6",
+          "--switch-indicator-font-size": "fontSizes.md"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "solid",
+    size: "md"
+  }
+});
+
+export { switchSlotRecipe };

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

@@ -0,0 +1,173 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const tableSlotRecipe = defineSlotRecipe({
+  className: "table",
+  slots: [
+    "root",
+    "header",
+    "body",
+    "row",
+    "columnHeader",
+    "cell",
+    "footer",
+    "caption"
+  ],
+  base: {
+    root: {
+      fontVariantNumeric: "lining-nums tabular-nums",
+      borderCollapse: "collapse",
+      width: "full",
+      textAlign: "start",
+      verticalAlign: "top"
+    },
+    row: {
+      _selected: {
+        bg: "colorPalette.subtle"
+      }
+    },
+    cell: {
+      textAlign: "start",
+      alignItems: "center"
+    },
+    columnHeader: {
+      fontWeight: "medium",
+      textAlign: "start",
+      color: "fg"
+    },
+    caption: {
+      fontWeight: "medium",
+      textStyle: "xs"
+    },
+    footer: {
+      fontWeight: "medium"
+    }
+  },
+  variants: {
+    interactive: {
+      true: {
+        body: {
+          "& tr": {
+            _hover: {
+              bg: "colorPalette.subtle"
+            }
+          }
+        }
+      }
+    },
+    stickyHeader: {
+      true: {
+        header: {
+          "& :where(tr)": {
+            top: "var(--table-sticky-offset, 0)",
+            position: "sticky",
+            zIndex: 1
+          }
+        }
+      }
+    },
+    striped: {
+      true: {
+        row: {
+          "&:nth-of-type(odd) td": {
+            bg: "bg.muted"
+          }
+        }
+      }
+    },
+    showColumnBorder: {
+      true: {
+        columnHeader: {
+          "&:not(:last-of-type)": {
+            borderInlineEndWidth: "1px"
+          }
+        },
+        cell: {
+          "&:not(:last-of-type)": {
+            borderInlineEndWidth: "1px"
+          }
+        }
+      }
+    },
+    variant: {
+      line: {
+        columnHeader: {
+          borderBottomWidth: "1px"
+        },
+        cell: {
+          borderBottomWidth: "1px"
+        },
+        row: {
+          bg: "bg"
+        }
+      },
+      outline: {
+        root: {
+          boxShadow: "0 0 0 1px {colors.border}",
+          overflow: "hidden"
+        },
+        columnHeader: {
+          borderBottomWidth: "1px"
+        },
+        header: {
+          bg: "bg.muted"
+        },
+        row: {
+          "&:not(:last-of-type)": {
+            borderBottomWidth: "1px"
+          }
+        },
+        footer: {
+          borderTopWidth: "1px"
+        }
+      }
+    },
+    size: {
+      sm: {
+        root: {
+          textStyle: "sm"
+        },
+        columnHeader: {
+          px: "2",
+          py: "2"
+        },
+        cell: {
+          px: "2",
+          py: "2"
+        }
+      },
+      md: {
+        root: {
+          textStyle: "sm"
+        },
+        columnHeader: {
+          px: "3",
+          py: "3"
+        },
+        cell: {
+          px: "3",
+          py: "3"
+        }
+      },
+      lg: {
+        root: {
+          textStyle: "md"
+        },
+        columnHeader: {
+          px: "4",
+          py: "3"
+        },
+        cell: {
+          px: "4",
+          py: "3"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "line",
+    size: "md"
+  }
+});
+
+export { tableSlotRecipe };