@chakra-ui/panda-preset 3.3.0

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

@@ -0,0 +1,148 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const accordionSlotRecipe = defineSlotRecipe({
+  className: "accordion",
+  slots: [
+    "root",
+    "item",
+    "itemTrigger",
+    "itemContent",
+    "itemIndicator",
+    "itemBody"
+  ],
+  base: {
+    root: {
+      width: "full",
+      "--accordion-radius": "radii.l2"
+    },
+    item: {
+      overflowAnchor: "none"
+    },
+    itemTrigger: {
+      display: "flex",
+      alignItems: "center",
+      width: "full",
+      outline: "0",
+      gap: "3",
+      fontWeight: "medium",
+      borderRadius: "var(--accordion-radius)",
+      _focusVisible: {
+        outline: "2px solid",
+        outlineColor: "colorPalette.focusRing"
+      },
+      _disabled: {
+        layerStyle: "disabled"
+      }
+    },
+    itemBody: {
+      pt: "var(--accordion-padding-y)",
+      pb: "calc(var(--accordion-padding-y) * 2)"
+    },
+    itemContent: {
+      overflow: "hidden",
+      borderRadius: "var(--accordion-radius)",
+      _open: {
+        animationName: "expand-height, fade-in",
+        animationDuration: "moderate"
+      },
+      _closed: {
+        animationName: "collapse-height, fade-out",
+        animationDuration: "moderate"
+      }
+    },
+    itemIndicator: {
+      transition: "rotate 0.2s",
+      transformOrigin: "center",
+      color: "fg.subtle",
+      _open: {
+        rotate: "180deg"
+      },
+      _icon: {
+        width: "1.2em",
+        height: "1.2em"
+      }
+    }
+  },
+  variants: {
+    variant: {
+      outline: {
+        item: {
+          borderBottomWidth: "1px"
+        }
+      },
+      subtle: {
+        itemTrigger: {
+          px: "var(--accordion-padding-x)"
+        },
+        itemContent: {
+          px: "var(--accordion-padding-x)"
+        },
+        item: {
+          borderRadius: "var(--accordion-radius)",
+          _open: {
+            bg: "colorPalette.subtle"
+          }
+        }
+      },
+      enclosed: {
+        root: {
+          borderWidth: "1px",
+          borderRadius: "var(--accordion-radius)",
+          divideY: "1px",
+          overflow: "hidden"
+        },
+        itemTrigger: {
+          px: "var(--accordion-padding-x)"
+        },
+        itemContent: {
+          px: "var(--accordion-padding-x)"
+        },
+        item: {
+          _open: {
+            bg: "bg.subtle"
+          }
+        }
+      },
+      plain: {}
+    },
+    size: {
+      sm: {
+        root: {
+          "--accordion-padding-x": "spacing.3",
+          "--accordion-padding-y": "spacing.2"
+        },
+        itemTrigger: {
+          textStyle: "sm",
+          py: "var(--accordion-padding-y)"
+        }
+      },
+      md: {
+        root: {
+          "--accordion-padding-x": "spacing.4",
+          "--accordion-padding-y": "spacing.2"
+        },
+        itemTrigger: {
+          textStyle: "md",
+          py: "var(--accordion-padding-y)"
+        }
+      },
+      lg: {
+        root: {
+          "--accordion-padding-x": "spacing.4.5",
+          "--accordion-padding-y": "spacing.2.5"
+        },
+        itemTrigger: {
+          textStyle: "lg",
+          py: "var(--accordion-padding-y)"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "outline"
+  }
+});
+
+export { accordionSlotRecipe };

package/dist/esm/slot-recipes/action-bar.js

@@ -0,0 +1,63 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const actionBarSlotRecipe = defineSlotRecipe({
+  className: "action-bar",
+  slots: [
+    "positioner",
+    "content",
+    "separator",
+    "selectionTrigger",
+    "closeTrigger"
+  ],
+  base: {
+    positioner: {
+      position: "fixed",
+      display: "flex",
+      justifyContent: "center",
+      pointerEvents: "none",
+      insetInline: "0",
+      top: "unset",
+      bottom: "calc(env(safe-area-inset-bottom) + 20px)"
+    },
+    content: {
+      bg: "bg.panel",
+      shadow: "md",
+      display: "flex",
+      alignItems: "center",
+      gap: "3",
+      borderRadius: "l3",
+      py: "2.5",
+      px: "3",
+      pointerEvents: "auto",
+      translate: "calc(-1 * var(--scrollbar-width) / 2) 0px",
+      _open: {
+        animationName: "slide-from-bottom, fade-in",
+        animationDuration: "moderate"
+      },
+      _closed: {
+        animationName: "slide-to-bottom, fade-out",
+        animationDuration: "faster"
+      }
+    },
+    separator: {
+      width: "1px",
+      height: "5",
+      bg: "border"
+    },
+    selectionTrigger: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "2",
+      alignSelf: "stretch",
+      textStyle: "sm",
+      px: "4",
+      py: "1",
+      borderRadius: "l2",
+      borderWidth: "1px",
+      borderStyle: "dashed"
+    }
+  }
+});
+
+export { actionBarSlotRecipe };

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

@@ -0,0 +1,163 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const alertSlotRecipe = defineSlotRecipe({
+  slots: ["title", "description", "root", "indicator", "content"],
+  className: "alert",
+  base: {
+    root: {
+      width: "full",
+      display: "flex",
+      alignItems: "flex-start",
+      position: "relative",
+      borderRadius: "l3"
+    },
+    title: {
+      fontWeight: "medium"
+    },
+    description: {
+      display: "inline"
+    },
+    indicator: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: "0",
+      width: "1em",
+      height: "1em",
+      _icon: {
+        boxSize: "full"
+      }
+    },
+    content: {
+      display: "flex",
+      flex: "1",
+      gap: "1"
+    }
+  },
+  variants: {
+    status: {
+      info: {
+        root: {
+          colorPalette: "blue"
+        }
+      },
+      warning: {
+        root: {
+          colorPalette: "orange"
+        }
+      },
+      success: {
+        root: {
+          colorPalette: "green"
+        }
+      },
+      error: {
+        root: {
+          colorPalette: "red"
+        }
+      },
+      neutral: {
+        root: {
+          colorPalette: "gray"
+        }
+      }
+    },
+    inline: {
+      true: {
+        content: {
+          display: "inline-flex",
+          flexDirection: "row",
+          alignItems: "center"
+        }
+      },
+      false: {
+        content: {
+          display: "flex",
+          flexDirection: "column"
+        }
+      }
+    },
+    variant: {
+      subtle: {
+        root: {
+          bg: "colorPalette.subtle",
+          color: "colorPalette.fg"
+        }
+      },
+      surface: {
+        root: {
+          bg: "colorPalette.subtle",
+          color: "colorPalette.fg",
+          shadow: "inset 0 0 0px 1px var(--shadow-color)",
+          shadowColor: "colorPalette.muted"
+        },
+        indicator: {
+          color: "colorPalette.fg"
+        }
+      },
+      outline: {
+        root: {
+          color: "colorPalette.fg",
+          shadow: "inset 0 0 0px 1px var(--shadow-color)",
+          shadowColor: "colorPalette.muted"
+        },
+        indicator: {
+          color: "colorPalette.fg"
+        }
+      },
+      solid: {
+        root: {
+          bg: "colorPalette.solid",
+          color: "colorPalette.contrast"
+        },
+        indicator: {
+          color: "colorPalette.contrast"
+        }
+      }
+    },
+    size: {
+      sm: {
+        root: {
+          gap: "2",
+          px: "3",
+          py: "3",
+          textStyle: "xs"
+        },
+        indicator: {
+          textStyle: "lg"
+        }
+      },
+      md: {
+        root: {
+          gap: "3",
+          px: "4",
+          py: "4",
+          textStyle: "sm"
+        },
+        indicator: {
+          textStyle: "xl"
+        }
+      },
+      lg: {
+        root: {
+          gap: "3",
+          px: "4",
+          py: "4",
+          textStyle: "md"
+        },
+        indicator: {
+          textStyle: "2xl"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    status: "info",
+    variant: "subtle",
+    size: "md",
+    inline: false
+  }
+});
+
+export { alertSlotRecipe };

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

@@ -0,0 +1,142 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const avatarSlotRecipe = defineSlotRecipe({
+  slots: ["root", "image", "fallback"],
+  className: "avatar",
+  base: {
+    root: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontWeight: "medium",
+      position: "relative",
+      verticalAlign: "top",
+      flexShrink: "0",
+      userSelect: "none",
+      width: "var(--avatar-size)",
+      height: "var(--avatar-size)",
+      fontSize: "var(--avatar-font-size)",
+      borderRadius: "var(--avatar-radius)",
+      "&[data-group-item]": {
+        borderWidth: "2px",
+        borderColor: "bg"
+      }
+    },
+    image: {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover",
+      borderRadius: "var(--avatar-radius)"
+    },
+    fallback: {
+      lineHeight: "1",
+      textTransform: "uppercase",
+      fontWeight: "medium",
+      fontSize: "var(--avatar-font-size)",
+      borderRadius: "var(--avatar-radius)"
+    }
+  },
+  variants: {
+    size: {
+      full: {
+        root: {
+          "--avatar-size": "100%",
+          "--avatar-font-size": "100%"
+        }
+      },
+      "2xs": {
+        root: {
+          "--avatar-font-size": "fontSizes.2xs",
+          "--avatar-size": "sizes.6"
+        }
+      },
+      xs: {
+        root: {
+          "--avatar-font-size": "fontSizes.xs",
+          "--avatar-size": "sizes.8"
+        }
+      },
+      sm: {
+        root: {
+          "--avatar-font-size": "fontSizes.sm",
+          "--avatar-size": "sizes.9"
+        }
+      },
+      md: {
+        root: {
+          "--avatar-font-size": "fontSizes.md",
+          "--avatar-size": "sizes.10"
+        }
+      },
+      lg: {
+        root: {
+          "--avatar-font-size": "fontSizes.md",
+          "--avatar-size": "sizes.11"
+        }
+      },
+      xl: {
+        root: {
+          "--avatar-font-size": "fontSizes.lg",
+          "--avatar-size": "sizes.12"
+        }
+      },
+      "2xl": {
+        root: {
+          "--avatar-font-size": "fontSizes.xl",
+          "--avatar-size": "sizes.16"
+        }
+      }
+    },
+    variant: {
+      solid: {
+        root: {
+          bg: "colorPalette.solid",
+          color: "colorPalette.contrast"
+        }
+      },
+      subtle: {
+        root: {
+          bg: "colorPalette.muted",
+          color: "colorPalette.fg"
+        }
+      },
+      outline: {
+        root: {
+          color: "colorPalette.fg",
+          borderWidth: "1px",
+          borderColor: "colorPalette.muted"
+        }
+      }
+    },
+    shape: {
+      square: {},
+      rounded: {
+        root: {
+          "--avatar-radius": "radii.l3"
+        }
+      },
+      full: {
+        root: {
+          "--avatar-radius": "radii.full"
+        }
+      }
+    },
+    borderless: {
+      true: {
+        root: {
+          "&[data-group-item]": {
+            borderWidth: "0px"
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    shape: "full",
+    variant: "subtle"
+  }
+});
+
+export { avatarSlotRecipe };

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

@@ -0,0 +1,80 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const blockquoteSlotRecipe = defineSlotRecipe({
+  className: "blockquote",
+  slots: ["root", "icon", "content", "caption"],
+  base: {
+    root: {
+      position: "relative",
+      display: "flex",
+      flexDirection: "column",
+      gap: "2"
+    },
+    caption: {
+      textStyle: "sm",
+      color: "fg.muted"
+    },
+    icon: {
+      boxSize: "5"
+    }
+  },
+  variants: {
+    justify: {
+      start: {
+        root: {
+          alignItems: "flex-start",
+          textAlign: "start"
+        }
+      },
+      center: {
+        root: {
+          alignItems: "center",
+          textAlign: "center"
+        }
+      },
+      end: {
+        root: {
+          alignItems: "flex-end",
+          textAlign: "end"
+        }
+      }
+    },
+    variant: {
+      subtle: {
+        root: {
+          paddingX: "5",
+          borderStartWidth: "4px",
+          borderStartColor: "colorPalette.muted"
+        },
+        icon: {
+          color: "colorPalette.fg"
+        }
+      },
+      solid: {
+        root: {
+          paddingX: "5",
+          borderStartWidth: "4px",
+          borderStartColor: "colorPalette.solid"
+        },
+        icon: {
+          color: "colorPalette.solid"
+        }
+      },
+      plain: {
+        root: {
+          paddingX: "5"
+        },
+        icon: {
+          color: "colorPalette.solid"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "subtle",
+    justify: "start"
+  }
+});
+
+export { blockquoteSlotRecipe };

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

@@ -0,0 +1,103 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const breadcrumbSlotRecipe = defineSlotRecipe({
+  className: "breadcrumb",
+  slots: [
+    "link",
+    "currentLink",
+    "item",
+    "list",
+    "root",
+    "ellipsis",
+    "separator"
+  ],
+  base: {
+    list: {
+      display: "flex",
+      alignItems: "center",
+      wordBreak: "break-word",
+      color: "fg.muted"
+    },
+    link: {
+      outline: "0",
+      textDecoration: "none",
+      borderRadius: "l1",
+      focusRing: "outside",
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "2"
+    },
+    item: {
+      display: "inline-flex",
+      alignItems: "center"
+    },
+    separator: {
+      color: "fg.muted",
+      opacity: "0.8",
+      _icon: {
+        boxSize: "1em"
+      }
+    },
+    ellipsis: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      _icon: {
+        boxSize: "1em"
+      }
+    }
+  },
+  variants: {
+    variant: {
+      underline: {
+        link: {
+          color: "colorPalette.fg",
+          textDecoration: "underline",
+          textUnderlineOffset: "0.2em",
+          textDecorationColor: "colorPalette.muted"
+        },
+        currentLink: {
+          color: "colorPalette.fg"
+        }
+      },
+      plain: {
+        link: {
+          color: "fg.muted",
+          _hover: {
+            color: "fg"
+          }
+        },
+        currentLink: {
+          color: "fg"
+        }
+      }
+    },
+    size: {
+      sm: {
+        list: {
+          gap: "1",
+          textStyle: "xs"
+        }
+      },
+      md: {
+        list: {
+          gap: "1.5",
+          textStyle: "sm"
+        }
+      },
+      lg: {
+        list: {
+          gap: "2",
+          textStyle: "md"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "plain",
+    size: "md"
+  }
+});
+
+export { breadcrumbSlotRecipe };