@chakra-ui/panda-preset 3.3.0

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

@@ -0,0 +1,279 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const tabsSlotRecipe = defineSlotRecipe({
+  slots: ["root", "trigger", "list", "content", "contentGroup", "indicator"],
+  className: "tabs",
+  base: {
+    root: {
+      "--tabs-trigger-radius": "radii.l2",
+      position: "relative",
+      _horizontal: {
+        display: "block"
+      },
+      _vertical: {
+        display: "flex"
+      }
+    },
+    list: {
+      display: "inline-flex",
+      position: "relative",
+      isolation: "isolate",
+      "--tabs-indicator-shadow": "shadows.xs",
+      "--tabs-indicator-bg": "colors.bg",
+      minH: "var(--tabs-height)",
+      _horizontal: {
+        flexDirection: "row"
+      },
+      _vertical: {
+        flexDirection: "column"
+      }
+    },
+    trigger: {
+      outline: "0",
+      minW: "var(--tabs-height)",
+      height: "var(--tabs-height)",
+      display: "flex",
+      alignItems: "center",
+      fontWeight: "medium",
+      position: "relative",
+      cursor: "button",
+      gap: "2",
+      _focusVisible: {
+        zIndex: 1,
+        outline: "2px solid",
+        outlineColor: "colorPalette.focusRing"
+      },
+      _disabled: {
+        cursor: "not-allowed",
+        opacity: 0.5
+      }
+    },
+    content: {
+      focusVisibleRing: "inside",
+      _horizontal: {
+        width: "100%",
+        pt: "var(--tabs-content-padding)"
+      },
+      _vertical: {
+        height: "100%",
+        ps: "var(--tabs-content-padding)"
+      }
+    },
+    indicator: {
+      width: "var(--width)",
+      height: "var(--height)",
+      borderRadius: "var(--tabs-indicator-radius)",
+      bg: "var(--tabs-indicator-bg)",
+      shadow: "var(--tabs-indicator-shadow)",
+      zIndex: -1
+    }
+  },
+  variants: {
+    fitted: {
+      true: {
+        list: {
+          display: "flex"
+        },
+        trigger: {
+          flex: 1,
+          textAlign: "center",
+          justifyContent: "center"
+        }
+      }
+    },
+    justify: {
+      start: {
+        list: {
+          justifyContent: "flex-start"
+        }
+      },
+      center: {
+        list: {
+          justifyContent: "center"
+        }
+      },
+      end: {
+        list: {
+          justifyContent: "flex-end"
+        }
+      }
+    },
+    size: {
+      sm: {
+        root: {
+          "--tabs-height": "sizes.9",
+          "--tabs-content-padding": "spacing.3"
+        },
+        trigger: {
+          py: "1",
+          px: "3",
+          textStyle: "sm"
+        }
+      },
+      md: {
+        root: {
+          "--tabs-height": "sizes.10",
+          "--tabs-content-padding": "spacing.4"
+        },
+        trigger: {
+          py: "2",
+          px: "4",
+          textStyle: "sm"
+        }
+      },
+      lg: {
+        root: {
+          "--tabs-height": "sizes.11",
+          "--tabs-content-padding": "spacing.4.5"
+        },
+        trigger: {
+          py: "2",
+          px: "4.5",
+          textStyle: "md"
+        }
+      }
+    },
+    variant: {
+      line: {
+        list: {
+          display: "flex",
+          borderColor: "border",
+          _horizontal: {
+            borderBottomWidth: "1px"
+          },
+          _vertical: {
+            borderEndWidth: "1px"
+          }
+        },
+        trigger: {
+          color: "fg.muted",
+          _disabled: {
+            _active: {
+              bg: "initial"
+            }
+          },
+          _selected: {
+            color: "fg",
+            _horizontal: {
+              layerStyle: "indicator.bottom",
+              "--indicator-offset-y": "-1px",
+              "--indicator-color": "colors.colorPalette.solid"
+            },
+            _vertical: {
+              layerStyle: "indicator.end",
+              "--indicator-offset-x": "-1px"
+            }
+          }
+        }
+      },
+      subtle: {
+        trigger: {
+          borderRadius: "var(--tabs-trigger-radius)",
+          color: "fg.muted",
+          _selected: {
+            bg: "colorPalette.subtle",
+            color: "colorPalette.fg"
+          }
+        }
+      },
+      enclosed: {
+        list: {
+          bg: "bg.muted",
+          padding: "1",
+          borderRadius: "l3",
+          minH: "calc(var(--tabs-height) - 4px)"
+        },
+        trigger: {
+          justifyContent: "center",
+          color: "fg.muted",
+          borderRadius: "var(--tabs-trigger-radius)",
+          _selected: {
+            bg: "bg",
+            color: "colorPalette.fg",
+            shadow: "xs"
+          }
+        }
+      },
+      outline: {
+        list: {
+          "--line-thickness": "1px",
+          "--line-offset": "calc(var(--line-thickness) * -1)",
+          borderColor: "border",
+          display: "flex",
+          _horizontal: {
+            _before: {
+              content: '""',
+              position: "absolute",
+              bottom: "0px",
+              width: "100%",
+              borderBottomWidth: "var(--line-thickness)",
+              borderBottomColor: "border"
+            }
+          },
+          _vertical: {
+            _before: {
+              content: '""',
+              position: "absolute",
+              insetInline: "var(--line-offset)",
+              height: "calc(100% - calc(var(--line-thickness) * 2))",
+              borderEndWidth: "var(--line-thickness)",
+              borderEndColor: "border"
+            }
+          }
+        },
+        trigger: {
+          color: "fg.muted",
+          borderWidth: "1px",
+          borderColor: "transparent",
+          _selected: {
+            bg: "currentBg",
+            color: "colorPalette.fg"
+          },
+          _horizontal: {
+            borderTopRadius: "var(--tabs-trigger-radius)",
+            marginBottom: "var(--line-offset)",
+            marginEnd: {
+              _notLast: "var(--line-offset)"
+            },
+            _selected: {
+              borderColor: "border",
+              borderBottomColor: "transparent"
+            }
+          },
+          _vertical: {
+            borderStartRadius: "var(--tabs-trigger-radius)",
+            marginEnd: "var(--line-offset)",
+            marginBottom: {
+              _notLast: "var(--line-offset)"
+            },
+            _selected: {
+              borderColor: "border",
+              borderEndColor: "transparent"
+            }
+          }
+        }
+      },
+      plain: {
+        trigger: {
+          color: "fg.muted",
+          _selected: {
+            color: "colorPalette.fg"
+          },
+          borderRadius: "var(--tabs-trigger-radius)",
+          "&[data-selected][data-ssr]": {
+            bg: "var(--tabs-indicator-bg)",
+            shadow: "var(--tabs-indicator-shadow)",
+            borderRadius: "var(--tabs-indicator-radius)"
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "line"
+  }
+});
+
+export { tabsSlotRecipe };

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

@@ -0,0 +1,145 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const tagSlotRecipe = defineSlotRecipe({
+  slots: ["root", "label", "closeTrigger", "startElement", "endElement"],
+  className: "tag",
+  base: {
+    root: {
+      display: "inline-flex",
+      alignItems: "center",
+      verticalAlign: "top",
+      maxWidth: "100%",
+      userSelect: "none",
+      borderRadius: "l2",
+      focusVisibleRing: "outside"
+    },
+    label: {
+      lineClamp: "1"
+    },
+    closeTrigger: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      outline: "0",
+      borderRadius: "l1",
+      color: "currentColor",
+      focusVisibleRing: "inside",
+      focusRingWidth: "2px"
+    },
+    startElement: {
+      flexShrink: 0,
+      boxSize: "var(--tag-element-size)",
+      ms: "var(--tag-element-offset)",
+      "&:has([data-scope=avatar])": {
+        boxSize: "var(--tag-avatar-size)",
+        ms: "calc(var(--tag-element-offset) * 1.5)"
+      },
+      _icon: {
+        boxSize: "100%"
+      }
+    },
+    endElement: {
+      flexShrink: 0,
+      boxSize: "var(--tag-element-size)",
+      me: "var(--tag-element-offset)",
+      _icon: {
+        boxSize: "100%"
+      },
+      "&:has(button)": {
+        ms: "calc(var(--tag-element-offset) * -1)"
+      }
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        root: {
+          px: "1.5",
+          minH: "4.5",
+          gap: "1",
+          "--tag-avatar-size": "spacing.3",
+          "--tag-element-size": "spacing.3",
+          "--tag-element-offset": "-2px"
+        },
+        label: {
+          textStyle: "xs"
+        }
+      },
+      md: {
+        root: {
+          px: "1.5",
+          minH: "5",
+          gap: "1",
+          "--tag-avatar-size": "spacing.3.5",
+          "--tag-element-size": "spacing.3.5",
+          "--tag-element-offset": "-2px"
+        },
+        label: {
+          textStyle: "xs"
+        }
+      },
+      lg: {
+        root: {
+          px: "2",
+          minH: "6",
+          gap: "1.5",
+          "--tag-avatar-size": "spacing.4.5",
+          "--tag-element-size": "spacing.4",
+          "--tag-element-offset": "-3px"
+        },
+        label: {
+          textStyle: "sm"
+        }
+      },
+      xl: {
+        root: {
+          px: "2.5",
+          minH: "8",
+          gap: "1.5",
+          "--tag-avatar-size": "spacing.6",
+          "--tag-element-size": "spacing.4.5",
+          "--tag-element-offset": "-4px"
+        },
+        label: {
+          textStyle: "sm"
+        }
+      }
+    },
+    variant: {
+      subtle: {
+        root: {
+          bg: "colorPalette.subtle",
+          color: "colorPalette.fg"
+        }
+      },
+      solid: {
+        root: {
+          bg: "colorPalette.solid",
+          color: "colorPalette.contrast"
+        }
+      },
+      outline: {
+        root: {
+          color: "colorPalette.fg",
+          shadow: "inset 0 0 0px 1px var(--shadow-color)",
+          shadowColor: "colorPalette.muted"
+        }
+      },
+      surface: {
+        root: {
+          bg: "colorPalette.subtle",
+          color: "colorPalette.fg",
+          shadow: "inset 0 0 0px 1px var(--shadow-color)",
+          shadowColor: "colorPalette.muted"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "surface"
+  }
+});
+
+export { tagSlotRecipe };

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

@@ -0,0 +1,149 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const timelineSlotRecipe = defineSlotRecipe({
+  slots: [
+    "root",
+    "item",
+    "content",
+    "separator",
+    "indicator",
+    "connector",
+    "title",
+    "description"
+  ],
+  className: "timeline",
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      width: "full",
+      "--timeline-thickness": "1px",
+      "--timeline-gutter": "4px"
+    },
+    item: {
+      display: "flex",
+      position: "relative",
+      alignItems: "flex-start",
+      flexShrink: 0,
+      gap: "4",
+      _last: {
+        "& :where(.timeline__separator)": {
+          display: "none"
+        }
+      }
+    },
+    separator: {
+      position: "absolute",
+      borderStartWidth: "var(--timeline-thickness)",
+      ms: "calc(-1 * var(--timeline-thickness) / 2)",
+      insetInlineStart: "calc(var(--timeline-indicator-size) / 2)",
+      insetBlock: "0",
+      borderColor: "border"
+    },
+    indicator: {
+      outline: "2px solid {colors.bg}",
+      position: "relative",
+      flexShrink: "0",
+      boxSize: "var(--timeline-indicator-size)",
+      fontSize: "var(--timeline-font-size)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: "full",
+      fontWeight: "medium"
+    },
+    connector: {
+      alignSelf: "stretch",
+      position: "relative"
+    },
+    content: {
+      pb: "6",
+      display: "flex",
+      flexDirection: "column",
+      width: "full",
+      gap: "2"
+    },
+    title: {
+      display: "flex",
+      fontWeight: "medium",
+      flexWrap: "wrap",
+      gap: "1.5",
+      alignItems: "center",
+      mt: "var(--timeline-margin)"
+    },
+    description: {
+      color: "fg.muted",
+      textStyle: "xs"
+    }
+  },
+  variants: {
+    variant: {
+      subtle: {
+        indicator: {
+          bg: "colorPalette.muted"
+        }
+      },
+      solid: {
+        indicator: {
+          bg: "colorPalette.solid",
+          color: "colorPalette.contrast"
+        }
+      },
+      outline: {
+        indicator: {
+          bg: "currentBg",
+          borderWidth: "1px",
+          borderColor: "colorPalette.muted"
+        }
+      },
+      plain: {}
+    },
+    size: {
+      sm: {
+        root: {
+          "--timeline-indicator-size": "sizes.4",
+          "--timeline-font-size": "fontSizes.2xs"
+        },
+        title: {
+          textStyle: "xs"
+        }
+      },
+      md: {
+        root: {
+          "--timeline-indicator-size": "sizes.5",
+          "--timeline-font-size": "fontSizes.xs"
+        },
+        title: {
+          textStyle: "sm"
+        }
+      },
+      lg: {
+        root: {
+          "--timeline-indicator-size": "sizes.6",
+          "--timeline-font-size": "fontSizes.xs"
+        },
+        title: {
+          mt: "0.5",
+          textStyle: "sm"
+        }
+      },
+      xl: {
+        root: {
+          "--timeline-indicator-size": "sizes.8",
+          "--timeline-font-size": "fontSizes.sm"
+        },
+        title: {
+          mt: "1.5",
+          textStyle: "sm"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "solid"
+  }
+});
+
+export { timelineSlotRecipe };

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

@@ -0,0 +1,104 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const toastSlotRecipe = defineSlotRecipe({
+  slots: [
+    "root",
+    "title",
+    "description",
+    "indicator",
+    "closeTrigger",
+    "actionTrigger"
+  ],
+  className: "toast",
+  base: {
+    root: {
+      width: "full",
+      display: "flex",
+      alignItems: "flex-start",
+      position: "relative",
+      gap: "3",
+      py: "4",
+      ps: "4",
+      pe: "6",
+      borderRadius: "l2",
+      translate: "var(--x) var(--y)",
+      scale: "var(--scale)",
+      zIndex: "var(--z-index)",
+      height: "var(--height)",
+      opacity: "var(--opacity)",
+      willChange: "translate, opacity, scale",
+      transition: "translate 400ms, scale 400ms, opacity 400ms, height 400ms, box-shadow 200ms",
+      transitionTimingFunction: "cubic-bezier(0.21, 1.02, 0.73, 1)",
+      _closed: {
+        transition: "translate 400ms, scale 400ms, opacity 200ms",
+        transitionTimingFunction: "cubic-bezier(0.06, 0.71, 0.55, 1)"
+      },
+      bg: "bg.panel",
+      color: "fg",
+      boxShadow: "xl",
+      "--toast-trigger-bg": "colors.bg.muted",
+      "&[data-type=warning]": {
+        bg: "orange.solid",
+        color: "orange.contrast",
+        "--toast-trigger-bg": "{white/10}",
+        "--toast-border-color": "{white/40}"
+      },
+      "&[data-type=success]": {
+        bg: "green.solid",
+        color: "green.contrast",
+        "--toast-trigger-bg": "{white/10}",
+        "--toast-border-color": "{white/40}"
+      },
+      "&[data-type=error]": {
+        bg: "red.solid",
+        color: "red.contrast",
+        "--toast-trigger-bg": "{white/10}",
+        "--toast-border-color": "{white/40}"
+      }
+    },
+    title: {
+      fontWeight: "medium",
+      textStyle: "sm",
+      marginEnd: "2"
+    },
+    description: {
+      display: "inline",
+      textStyle: "sm",
+      opacity: "0.8"
+    },
+    indicator: {
+      flexShrink: "0",
+      boxSize: "5"
+    },
+    actionTrigger: {
+      textStyle: "sm",
+      fontWeight: "medium",
+      height: "8",
+      px: "3",
+      borderRadius: "l2",
+      alignSelf: "center",
+      borderWidth: "1px",
+      borderColor: "var(--toast-border-color, inherit)",
+      transition: "background 200ms",
+      _hover: {
+        bg: "var(--toast-trigger-bg)"
+      }
+    },
+    closeTrigger: {
+      position: "absolute",
+      top: "1",
+      insetEnd: "1",
+      padding: "1",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: "{currentColor/60}",
+      borderRadius: "l2",
+      textStyle: "md",
+      transition: "background 200ms"
+    }
+  }
+});
+
+export { toastSlotRecipe };

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

@@ -0,0 +1,42 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const tooltipSlotRecipe = defineSlotRecipe({
+  slots: ["trigger", "arrow", "arrowTip", "positioner", "content"],
+  className: "tooltip",
+  base: {
+    content: {
+      "--tooltip-bg": "colors.bg.inverted",
+      bg: "var(--tooltip-bg)",
+      color: "fg.inverted",
+      px: "2.5",
+      py: "1",
+      borderRadius: "l2",
+      fontWeight: "medium",
+      textStyle: "xs",
+      boxShadow: "md",
+      maxW: "xs",
+      zIndex: "tooltip",
+      transformOrigin: "var(--transform-origin)",
+      _open: {
+        animationStyle: "scale-fade-in",
+        animationDuration: "fast"
+      },
+      _closed: {
+        animationStyle: "scale-fade-out",
+        animationDuration: "fast"
+      }
+    },
+    arrow: {
+      "--arrow-size": "sizes.2",
+      "--arrow-background": "var(--tooltip-bg)"
+    },
+    arrowTip: {
+      borderTopWidth: "1px",
+      borderInlineStartWidth: "1px",
+      borderColor: "var(--tooltip-bg)"
+    }
+  }
+});
+
+export { tooltipSlotRecipe };