@chakra-ui/panda-preset 3.3.0

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

@@ -0,0 +1,254 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const dialogSlotRecipe = defineSlotRecipe({
+  slots: [
+    "trigger",
+    "backdrop",
+    "positioner",
+    "content",
+    "title",
+    "description",
+    "closeTrigger",
+    "header",
+    "body",
+    "footer",
+    "backdrop"
+  ],
+  className: "dialog",
+  base: {
+    backdrop: {
+      bg: "blackAlpha.500",
+      pos: "fixed",
+      left: 0,
+      top: 0,
+      w: "100vw",
+      h: "100dvh",
+      zIndex: "modal",
+      _open: {
+        animationName: "fade-in",
+        animationDuration: "slow"
+      },
+      _closed: {
+        animationName: "fade-out",
+        animationDuration: "moderate"
+      }
+    },
+    positioner: {
+      display: "flex",
+      width: "100vw",
+      height: "100dvh",
+      position: "fixed",
+      left: 0,
+      top: 0,
+      "--dialog-z-index": "zIndex.modal",
+      zIndex: "calc(var(--dialog-z-index) + var(--layer-index, 0))",
+      justifyContent: "center",
+      overscrollBehaviorY: "none"
+    },
+    content: {
+      display: "flex",
+      flexDirection: "column",
+      position: "relative",
+      width: "100%",
+      outline: 0,
+      borderRadius: "l3",
+      textStyle: "sm",
+      my: "var(--dialog-margin, var(--dialog-base-margin))",
+      "--dialog-z-index": "zIndex.modal",
+      zIndex: "calc(var(--dialog-z-index) + var(--layer-index, 0))",
+      bg: "bg.panel",
+      boxShadow: "lg",
+      _open: {
+        animationDuration: "moderate"
+      },
+      _closed: {
+        animationDuration: "faster"
+      }
+    },
+    header: {
+      flex: 0,
+      px: "6",
+      pt: "6",
+      pb: "4"
+    },
+    body: {
+      flex: "1",
+      px: "6",
+      pt: "2",
+      pb: "6"
+    },
+    footer: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      gap: "3",
+      px: "6",
+      pt: "2",
+      pb: "4"
+    },
+    title: {
+      textStyle: "lg",
+      fontWeight: "semibold"
+    },
+    description: {
+      color: "fg.muted"
+    }
+  },
+  variants: {
+    placement: {
+      center: {
+        positioner: {
+          alignItems: "center"
+        },
+        content: {
+          "--dialog-base-margin": "auto",
+          mx: "auto"
+        }
+      },
+      top: {
+        positioner: {
+          alignItems: "flex-start"
+        },
+        content: {
+          "--dialog-base-margin": "spacing.16",
+          mx: "auto"
+        }
+      },
+      bottom: {
+        positioner: {
+          alignItems: "flex-end"
+        },
+        content: {
+          "--dialog-base-margin": "spacing.16",
+          mx: "auto"
+        }
+      }
+    },
+    scrollBehavior: {
+      inside: {
+        positioner: {
+          overflow: "hidden"
+        },
+        content: {
+          maxH: "calc(100% - 7.5rem)"
+        },
+        body: {
+          overflow: "auto"
+        }
+      },
+      outside: {
+        positioner: {
+          overflow: "auto",
+          pointerEvents: "auto"
+        }
+      }
+    },
+    size: {
+      xs: {
+        content: {
+          maxW: "sm"
+        }
+      },
+      sm: {
+        content: {
+          maxW: "md"
+        }
+      },
+      md: {
+        content: {
+          maxW: "lg"
+        }
+      },
+      lg: {
+        content: {
+          maxW: "2xl"
+        }
+      },
+      xl: {
+        content: {
+          maxW: "4xl"
+        }
+      },
+      cover: {
+        positioner: {
+          padding: "10"
+        },
+        content: {
+          width: "100%",
+          height: "100%",
+          "--dialog-margin": "0"
+        }
+      },
+      full: {
+        content: {
+          maxW: "100vw",
+          minH: "100vh",
+          "--dialog-margin": "0",
+          borderRadius: "0"
+        }
+      }
+    },
+    motionPreset: {
+      scale: {
+        content: {
+          _open: {
+            animationName: "scale-in, fade-in"
+          },
+          _closed: {
+            animationName: "scale-out, fade-out"
+          }
+        }
+      },
+      "slide-in-bottom": {
+        content: {
+          _open: {
+            animationName: "slide-from-bottom, fade-in"
+          },
+          _closed: {
+            animationName: "slide-to-bottom, fade-out"
+          }
+        }
+      },
+      "slide-in-top": {
+        content: {
+          _open: {
+            animationName: "slide-from-top, fade-in"
+          },
+          _closed: {
+            animationName: "slide-to-top, fade-out"
+          }
+        }
+      },
+      "slide-in-left": {
+        content: {
+          _open: {
+            animationName: "slide-from-left, fade-in"
+          },
+          _closed: {
+            animationName: "slide-to-left, fade-out"
+          }
+        }
+      },
+      "slide-in-right": {
+        content: {
+          _open: {
+            animationName: "slide-from-right, fade-in"
+          },
+          _closed: {
+            animationName: "slide-to-right, fade-out"
+          }
+        }
+      },
+      none: {}
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    scrollBehavior: "outside",
+    placement: "top",
+    motionPreset: "scale"
+  }
+});
+
+export { dialogSlotRecipe };

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

@@ -0,0 +1,216 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const drawerSlotRecipe = defineSlotRecipe({
+  slots: [
+    "trigger",
+    "backdrop",
+    "positioner",
+    "content",
+    "title",
+    "description",
+    "closeTrigger",
+    "header",
+    "body",
+    "footer",
+    "backdrop"
+  ],
+  className: "drawer",
+  base: {
+    backdrop: {
+      bg: "blackAlpha.500",
+      pos: "fixed",
+      insetInlineStart: 0,
+      top: 0,
+      w: "100vw",
+      h: "100dvh",
+      zIndex: "modal",
+      _open: {
+        animationName: "fade-in",
+        animationDuration: "slow"
+      },
+      _closed: {
+        animationName: "fade-out",
+        animationDuration: "moderate"
+      }
+    },
+    positioner: {
+      display: "flex",
+      width: "100vw",
+      height: "100dvh",
+      position: "fixed",
+      insetInlineStart: 0,
+      top: 0,
+      zIndex: "modal",
+      overscrollBehaviorY: "none"
+    },
+    content: {
+      display: "flex",
+      flexDirection: "column",
+      position: "relative",
+      width: "100%",
+      outline: 0,
+      zIndex: "modal",
+      textStyle: "sm",
+      maxH: "100dvh",
+      color: "inherit",
+      bg: "bg.panel",
+      boxShadow: "lg",
+      _open: {
+        animationDuration: "slowest",
+        animationTimingFunction: "ease-in-smooth"
+      },
+      _closed: {
+        animationDuration: "slower",
+        animationTimingFunction: "ease-in-smooth"
+      }
+    },
+    header: {
+      flex: 0,
+      px: "6",
+      pt: "6",
+      pb: "4"
+    },
+    body: {
+      px: "6",
+      py: "2",
+      flex: "1",
+      overflow: "auto"
+    },
+    footer: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      gap: "3",
+      px: "6",
+      pt: "2",
+      pb: "4"
+    },
+    title: {
+      textStyle: "lg",
+      fontWeight: "semibold"
+    },
+    description: {
+      color: "fg.muted"
+    }
+  },
+  variants: {
+    size: {
+      xs: {
+        content: {
+          maxW: "xs"
+        }
+      },
+      sm: {
+        content: {
+          maxW: "md"
+        }
+      },
+      md: {
+        content: {
+          maxW: "lg"
+        }
+      },
+      lg: {
+        content: {
+          maxW: "2xl"
+        }
+      },
+      xl: {
+        content: {
+          maxW: "4xl"
+        }
+      },
+      full: {
+        content: {
+          maxW: "100vw",
+          h: "100dvh"
+        }
+      }
+    },
+    placement: {
+      start: {
+        positioner: {
+          justifyContent: "flex-start"
+        },
+        content: {
+          _open: {
+            animationName: {
+              base: "slide-from-left-full, fade-in",
+              _rtl: "slide-from-right-full, fade-in"
+            }
+          },
+          _closed: {
+            animationName: {
+              base: "slide-to-left-full, fade-out",
+              _rtl: "slide-to-right-full, fade-out"
+            }
+          }
+        }
+      },
+      end: {
+        positioner: {
+          justifyContent: "flex-end"
+        },
+        content: {
+          _open: {
+            animationName: {
+              base: "slide-from-right-full, fade-in",
+              _rtl: "slide-from-left-full, fade-in"
+            }
+          },
+          _closed: {
+            animationName: {
+              base: "slide-to-right-full, fade-out",
+              _rtl: "slide-to-right-full, fade-out"
+            }
+          }
+        }
+      },
+      top: {
+        positioner: {
+          alignItems: "flex-start"
+        },
+        content: {
+          maxW: "100%",
+          _open: {
+            animationName: "slide-from-top-full, fade-in"
+          },
+          _closed: {
+            animationName: "slide-to-top-full, fade-out"
+          }
+        }
+      },
+      bottom: {
+        positioner: {
+          alignItems: "flex-end"
+        },
+        content: {
+          maxW: "100%",
+          _open: {
+            animationName: "slide-from-bottom-full, fade-in"
+          },
+          _closed: {
+            animationName: "slide-to-bottom-full, fade-out"
+          }
+        }
+      }
+    },
+    contained: {
+      true: {
+        positioner: {
+          padding: "4"
+        },
+        content: {
+          borderRadius: "l3"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "xs",
+    placement: "end"
+  }
+});
+
+export { drawerSlotRecipe };

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

@@ -0,0 +1,112 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const editableSlotRecipe = defineSlotRecipe({
+  slots: [
+    "root",
+    "area",
+    "label",
+    "preview",
+    "input",
+    "editTrigger",
+    "submitTrigger",
+    "cancelTrigger",
+    "control",
+    "textarea"
+  ],
+  className: "editable",
+  base: {
+    root: {
+      display: "inline-flex",
+      alignItems: "center",
+      position: "relative",
+      gap: "1.5",
+      width: "full"
+    },
+    preview: {
+      fontSize: "inherit",
+      fontWeight: "inherit",
+      textAlign: "inherit",
+      bg: "transparent",
+      borderRadius: "l2",
+      py: "1",
+      px: "1",
+      display: "inline-flex",
+      alignItems: "center",
+      transitionProperty: "common",
+      transitionDuration: "normal",
+      cursor: "text",
+      _hover: {
+        bg: "bg.muted"
+      },
+      _disabled: {
+        userSelect: "none"
+      }
+    },
+    input: {
+      fontSize: "inherit",
+      fontWeight: "inherit",
+      textAlign: "inherit",
+      bg: "transparent",
+      borderRadius: "l2",
+      outline: "0",
+      py: "1",
+      px: "1",
+      transitionProperty: "common",
+      transitionDuration: "normal",
+      width: "full",
+      focusVisibleRing: "inside",
+      focusRingWidth: "2px",
+      _placeholder: {
+        opacity: 0.6
+      }
+    },
+    control: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "1.5"
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        root: {
+          textStyle: "sm"
+        },
+        preview: {
+          minH: "8"
+        },
+        input: {
+          minH: "8"
+        }
+      },
+      md: {
+        root: {
+          textStyle: "sm"
+        },
+        preview: {
+          minH: "9"
+        },
+        input: {
+          minH: "9"
+        }
+      },
+      lg: {
+        root: {
+          textStyle: "md"
+        },
+        preview: {
+          minH: "10"
+        },
+        input: {
+          minH: "10"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+export { editableSlotRecipe };

package/dist/esm/slot-recipes/empty-state.js

@@ -0,0 +1,88 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const emptyStateSlotRecipe = defineSlotRecipe({
+  slots: ["root", "content", "indicator", "title", "description"],
+  className: "empty-state",
+  base: {
+    root: {
+      width: "full"
+    },
+    content: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    indicator: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: "fg.subtle",
+      _icon: {
+        boxSize: "1em"
+      }
+    },
+    title: {
+      fontWeight: "semibold"
+    },
+    description: {
+      textStyle: "sm",
+      color: "fg.muted"
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        root: {
+          px: "4",
+          py: "6"
+        },
+        title: {
+          textStyle: "md"
+        },
+        content: {
+          gap: "4"
+        },
+        indicator: {
+          textStyle: "2xl"
+        }
+      },
+      md: {
+        root: {
+          px: "8",
+          py: "12"
+        },
+        title: {
+          textStyle: "lg"
+        },
+        content: {
+          gap: "6"
+        },
+        indicator: {
+          textStyle: "4xl"
+        }
+      },
+      lg: {
+        root: {
+          px: "12",
+          py: "16"
+        },
+        title: {
+          textStyle: "xl"
+        },
+        content: {
+          gap: "8"
+        },
+        indicator: {
+          textStyle: "6xl"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+export { emptyStateSlotRecipe };