qstd 0.3.75 → 0.3.76

package/dist/block/drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../src/block/drawer.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,MAAM,SAAS,CAAC;AA6a9B,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,2CAMxD;AAID,wBAAgB,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,mBAAmB,2CAYrD;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,mBAAmB,uDAkDrD"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../src/block/drawer.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,MAAM,SAAS,CAAC;AA+a9B,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,2CAMxD;AAID,wBAAgB,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,mBAAmB,2CAYrD;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,mBAAmB,uDAkDrD"}

package/dist/react/index.cjs

@@ -2670,7 +2670,6 @@ var accordion_default = Accordion;
 var MotionDiv4 = motionTags.div;
 var MotionBtn2 = motionTags.button;
 var breakpoint = ["(min-width: 600px)"];
-var mobileOvershootCoverPx = 96;
 function requirePortalRootForDrawer() {
   if (typeof document === "undefined") {
     throw new Error(
@@ -2709,6 +2708,52 @@ function DrawerComponent(props) {
   const { open, setOpen } = useDrawer();
   const { onClose, onExitComplete, ...rest } = props;
   const drawerBg = rest.bg ?? { base: "neutral.100", _dark: "neutral.900" };
+  const hasMobileHeight = props.height !== void 0;
+  const mobileVariants = hasMobileHeight ? {
+    initial: { height: 0, opacity: 0.5 },
+    animate: {
+      height: props.height,
+      opacity: 1,
+      transition: {
+        type: "spring",
+        damping: 22,
+        stiffness: 400,
+        mass: 0.7
+      }
+    },
+    exit: {
+      height: 0,
+      opacity: 0,
+      transition: {
+        type: "tween",
+        duration: 0.2,
+        ease: [0.4, 0, 1, 1]
+        // ease-in for quick exit
+      }
+    }
+  } : {
+    initial: { transform: "translateY(100%)", opacity: 0.5 },
+    animate: {
+      transform: "translateY(0%)",
+      opacity: 1,
+      transition: {
+        type: "spring",
+        damping: 22,
+        stiffness: 400,
+        mass: 0.7
+      }
+    },
+    exit: {
+      transform: "translateY(100%)",
+      opacity: 0,
+      transition: {
+        type: "tween",
+        duration: 0.2,
+        ease: [0.4, 0, 1, 1]
+        // ease-in for quick exit
+      }
+    }
+  };
   const [mounted, setMounted] = React3__namespace.default.useState(false);
   React3__namespace.default.useEffect(() => {
     setMounted(true);
@@ -2803,155 +2848,116 @@ function DrawerComponent(props) {
         initial: false,
         mode: "wait",
         onExitComplete,
-        children: open && /* @__PURE__ */ jsxRuntime.jsxs(
+        children: open && /* @__PURE__ */ jsxRuntime.jsx(
           Backdrop,
           {
             onClick: () => onBackdropClick(),
-            children: [
-              !isDesktop && /* @__PURE__ */ jsxRuntime.jsx(
-                MotionDiv4,
-                {
-                  fixed: true,
-                  left: 0,
-                  right: 0,
-                  bottom: 0,
-                  h: mobileOvershootCoverPx,
-                  pointerEvents: "none",
-                  bg: drawerBg
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                MotionDiv4,
-                {
-                  grid: true,
-                  onClick: (e) => e.stopPropagation(),
-                  position: "fixed",
-                  initial: "initial",
-                  animate: "animate",
-                  exit: "exit",
-                  ...isDesktop ? {
-                    drag: false,
-                    style: void 0,
-                    dragControls: null,
-                    dragConstraints: void 0,
-                    // style: null,
-                    // dragConstraints: null,
-                    height: props.height ?? "max-content!",
-                    // "min(50%, 300px)",
-                    width: props.width ?? "clamp(50%, 700px, 90%)",
-                    pt: 6,
-                    // px: 4,
-                    margin: "auto",
-                    borderRadius: 12,
-                    zIndex: 1,
-                    variants: {
-                      initial: { opacity: 0, scale: 0.5 },
-                      animate: {
-                        opacity: 1,
-                        scale: 1,
-                        transition: {
-                          type: "spring",
-                          damping: 20,
-                          stiffness: 300
-                        }
-                      },
-                      exit: {
-                        opacity: 0,
-                        scale: 0.3,
-                        transition: { type: "spring", duration: 0.45 }
-                      }
-                    }
-                  } : {
-                    w: "100vw",
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    borderTopLeftRadius: 12,
-                    borderTopRightRadius: 12,
-                    overflow: "hidden",
-                    // Note: Can't use framer-motion's `y` prop because it conflicts
-                    // with the drag motion value. Use CSS transform instead.
-                    variants: {
-                      initial: {
-                        transform: "translateY(100%)",
-                        opacity: 0.5
-                      },
-                      animate: {
-                        transform: "translateY(0%)",
-                        opacity: 1,
-                        transition: {
-                          type: "spring",
-                          damping: 22,
-                          stiffness: 400,
-                          mass: 0.7
-                        }
-                      },
-                      exit: {
-                        transform: "translateY(100%)",
-                        opacity: 0,
-                        transition: {
-                          type: "tween",
-                          duration: 0.2,
-                          ease: [0.4, 0, 1, 1]
-                          // ease-in for quick exit
-                        }
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              MotionDiv4,
+              {
+                grid: true,
+                onClick: (e) => e.stopPropagation(),
+                position: "fixed",
+                initial: "initial",
+                animate: "animate",
+                exit: "exit",
+                ...isDesktop ? {
+                  drag: false,
+                  style: void 0,
+                  dragControls: null,
+                  dragConstraints: void 0,
+                  // style: null,
+                  // dragConstraints: null,
+                  height: props.height ?? "max-content!",
+                  // "min(50%, 300px)",
+                  width: props.width ?? "clamp(50%, 700px, 90%)",
+                  pt: 6,
+                  // px: 4,
+                  margin: "auto",
+                  borderRadius: 12,
+                  zIndex: 1,
+                  variants: {
+                    initial: { opacity: 0, scale: 0.5 },
+                    animate: {
+                      opacity: 1,
+                      scale: 1,
+                      transition: {
+                        type: "spring",
+                        damping: 20,
+                        stiffness: 300
                       }
                     },
-                    drag: "y",
-                    style: { y },
-                    dragControls,
-                    onPointerDown: (e) => onDragStart(e),
-                    //   drag={hasBackdrop ? "y" : false}
-                    dragElastic: 0,
-                    // prevent drawer from being dragged higher than what its opened to
-                    dragConstraints: { top: 0 },
-                    onDragEnd: (_, drag) => {
-                      if (props.drag === false) return;
-                      const pageHeight = document.documentElement.scrollHeight;
-                      const yCoord = drag.point.y;
-                      const velocity = drag.velocity.y;
-                      const releaseThreshold = 0.8;
-                      const releasePct = yCoord / pageHeight;
-                      if (velocity > 25 && releasePct >= releaseThreshold || velocity > 750) {
-                        props.onClose?.();
-                      }
+                    exit: {
+                      opacity: 0,
+                      scale: 0.3,
+                      transition: { type: "spring", duration: 0.45 }
                     }
-                  },
-                  boxSizing: "border-box",
-                  boxShadow: "hsl(0deg 0% 0% / 60%) 0px -4px 20px",
-                  bg: { base: "neutral.100", _dark: "neutral.900" },
-                  color: "text-primary",
-                  ref,
-                  ...rest,
-                  children: /* @__PURE__ */ jsxRuntime.jsxs(
-                    MotionDiv4,
-                    {
-                      grid: true,
-                      ...isDesktop ? { position: "relative" } : { rows: "max-content 1fr" },
-                      children: [
-                        !isDesktop && props.hideHandle !== false && /* @__PURE__ */ jsxRuntime.jsx(
-                          MotionDiv4,
-                          {
-                            grid: true,
-                            justifySelf: "center",
-                            h: 6,
-                            w: 34,
-                            mt: "16px",
-                            mb: 4,
-                            br: 20,
-                            bg: { base: "neutral.400", _dark: "neutral.600" },
-                            cursor: props.drag ? "row-resize" : "default",
-                            ref: dragHandleRef
-                          }
-                        ),
-                        props.children
-                      ]
+                  }
+                } : {
+                  w: "100vw",
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  borderTopLeftRadius: 12,
+                  borderTopRightRadius: 12,
+                  overflow: "hidden",
+                  // Note: Can't use framer-motion's `y` prop because it conflicts
+                  // with the drag motion value. Use CSS transform instead.
+                  drag: "y",
+                  style: { y },
+                  dragControls,
+                  variants: mobileVariants,
+                  onPointerDown: (e) => onDragStart(e),
+                  //   drag={hasBackdrop ? "y" : false}
+                  dragElastic: 0,
+                  // prevent drawer from being dragged higher than what its opened to
+                  dragConstraints: { top: 0 },
+                  onDragEnd: (_, drag) => {
+                    if (props.drag === false) return;
+                    const pageHeight = document.documentElement.scrollHeight;
+                    const yCoord = drag.point.y;
+                    const velocity = drag.velocity.y;
+                    const releaseThreshold = 0.8;
+                    const releasePct = yCoord / pageHeight;
+                    if (velocity > 25 && releasePct >= releaseThreshold || velocity > 750) {
+                      props.onClose?.();
                     }
-                  )
+                  }
                 },
-                "drawer"
-              )
-            ]
+                boxSizing: "border-box",
+                boxShadow: "hsl(0deg 0% 0% / 60%) 0px -4px 20px",
+                color: "text-primary",
+                bg: drawerBg,
+                ref,
+                ...rest,
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  MotionDiv4,
+                  {
+                    grid: true,
+                    ...isDesktop ? { position: "relative" } : { rows: "max-content 1fr" },
+                    children: [
+                      !isDesktop && props.hideHandle !== false && /* @__PURE__ */ jsxRuntime.jsx(
+                        MotionDiv4,
+                        {
+                          grid: true,
+                          justifySelf: "center",
+                          h: 6,
+                          w: 34,
+                          mt: "16px",
+                          mb: 4,
+                          br: 20,
+                          bg: { base: "neutral.400", _dark: "neutral.600" },
+                          cursor: props.drag ? "row-resize" : "default",
+                          ref: dragHandleRef
+                        }
+                      ),
+                      props.children
+                    ]
+                  }
+                )
+              },
+              "drawer"
+            )
           }
         )
       }

package/dist/react/index.css

@@ -996,12 +996,6 @@
   .stk-w_4 path {
     stroke-width: 4;
   }
-  .fixed_true {
-    position: fixed;
-  }
-  .pointer-events_none {
-    pointer-events: none;
-  }
   .pos_fixed {
     position: fixed;
   }
@@ -1115,6 +1109,9 @@
   .grid-af_column {
     grid-auto-flow: column;
   }
+  .pointer-events_none {
+    pointer-events: none;
+  }
   .trf-o_top_left {
     transform-origin: top left;
   }
@@ -1239,18 +1236,6 @@
   .w_100\% {
     width: 100%;
   }
-  .left_0 {
-    left: var(--spacing-0);
-  }
-  .right_0 {
-    right: var(--spacing-0);
-  }
-  .bottom_0 {
-    bottom: var(--spacing-0);
-  }
-  .h_96 {
-    height: 96px;
-  }
   .h_max-content\! {
     height: max-content !important;
   }
@@ -1263,6 +1248,15 @@
   .w_100vw {
     width: 100vw;
   }
+  .left_0 {
+    left: var(--spacing-0);
+  }
+  .right_0 {
+    right: var(--spacing-0);
+  }
+  .bottom_0 {
+    bottom: var(--spacing-0);
+  }
   .bdr-tl_12 {
     border-top-left-radius: 12px;
   }

package/dist/react/index.js

@@ -2647,7 +2647,6 @@ var accordion_default = Accordion;
 var MotionDiv4 = motionTags.div;
 var MotionBtn2 = motionTags.button;
 var breakpoint = ["(min-width: 600px)"];
-var mobileOvershootCoverPx = 96;
 function requirePortalRootForDrawer() {
   if (typeof document === "undefined") {
     throw new Error(
@@ -2686,6 +2685,52 @@ function DrawerComponent(props) {
   const { open, setOpen } = useDrawer();
   const { onClose, onExitComplete, ...rest } = props;
   const drawerBg = rest.bg ?? { base: "neutral.100", _dark: "neutral.900" };
+  const hasMobileHeight = props.height !== void 0;
+  const mobileVariants = hasMobileHeight ? {
+    initial: { height: 0, opacity: 0.5 },
+    animate: {
+      height: props.height,
+      opacity: 1,
+      transition: {
+        type: "spring",
+        damping: 22,
+        stiffness: 400,
+        mass: 0.7
+      }
+    },
+    exit: {
+      height: 0,
+      opacity: 0,
+      transition: {
+        type: "tween",
+        duration: 0.2,
+        ease: [0.4, 0, 1, 1]
+        // ease-in for quick exit
+      }
+    }
+  } : {
+    initial: { transform: "translateY(100%)", opacity: 0.5 },
+    animate: {
+      transform: "translateY(0%)",
+      opacity: 1,
+      transition: {
+        type: "spring",
+        damping: 22,
+        stiffness: 400,
+        mass: 0.7
+      }
+    },
+    exit: {
+      transform: "translateY(100%)",
+      opacity: 0,
+      transition: {
+        type: "tween",
+        duration: 0.2,
+        ease: [0.4, 0, 1, 1]
+        // ease-in for quick exit
+      }
+    }
+  };
   const [mounted, setMounted] = React3__default.useState(false);
   React3__default.useEffect(() => {
     setMounted(true);
@@ -2780,155 +2825,116 @@ function DrawerComponent(props) {
         initial: false,
         mode: "wait",
         onExitComplete,
-        children: open && /* @__PURE__ */ jsxs(
+        children: open && /* @__PURE__ */ jsx(
           Backdrop,
           {
             onClick: () => onBackdropClick(),
-            children: [
-              !isDesktop && /* @__PURE__ */ jsx(
-                MotionDiv4,
-                {
-                  fixed: true,
-                  left: 0,
-                  right: 0,
-                  bottom: 0,
-                  h: mobileOvershootCoverPx,
-                  pointerEvents: "none",
-                  bg: drawerBg
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                MotionDiv4,
-                {
-                  grid: true,
-                  onClick: (e) => e.stopPropagation(),
-                  position: "fixed",
-                  initial: "initial",
-                  animate: "animate",
-                  exit: "exit",
-                  ...isDesktop ? {
-                    drag: false,
-                    style: void 0,
-                    dragControls: null,
-                    dragConstraints: void 0,
-                    // style: null,
-                    // dragConstraints: null,
-                    height: props.height ?? "max-content!",
-                    // "min(50%, 300px)",
-                    width: props.width ?? "clamp(50%, 700px, 90%)",
-                    pt: 6,
-                    // px: 4,
-                    margin: "auto",
-                    borderRadius: 12,
-                    zIndex: 1,
-                    variants: {
-                      initial: { opacity: 0, scale: 0.5 },
-                      animate: {
-                        opacity: 1,
-                        scale: 1,
-                        transition: {
-                          type: "spring",
-                          damping: 20,
-                          stiffness: 300
-                        }
-                      },
-                      exit: {
-                        opacity: 0,
-                        scale: 0.3,
-                        transition: { type: "spring", duration: 0.45 }
-                      }
-                    }
-                  } : {
-                    w: "100vw",
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    borderTopLeftRadius: 12,
-                    borderTopRightRadius: 12,
-                    overflow: "hidden",
-                    // Note: Can't use framer-motion's `y` prop because it conflicts
-                    // with the drag motion value. Use CSS transform instead.
-                    variants: {
-                      initial: {
-                        transform: "translateY(100%)",
-                        opacity: 0.5
-                      },
-                      animate: {
-                        transform: "translateY(0%)",
-                        opacity: 1,
-                        transition: {
-                          type: "spring",
-                          damping: 22,
-                          stiffness: 400,
-                          mass: 0.7
-                        }
-                      },
-                      exit: {
-                        transform: "translateY(100%)",
-                        opacity: 0,
-                        transition: {
-                          type: "tween",
-                          duration: 0.2,
-                          ease: [0.4, 0, 1, 1]
-                          // ease-in for quick exit
-                        }
+            children: /* @__PURE__ */ jsx(
+              MotionDiv4,
+              {
+                grid: true,
+                onClick: (e) => e.stopPropagation(),
+                position: "fixed",
+                initial: "initial",
+                animate: "animate",
+                exit: "exit",
+                ...isDesktop ? {
+                  drag: false,
+                  style: void 0,
+                  dragControls: null,
+                  dragConstraints: void 0,
+                  // style: null,
+                  // dragConstraints: null,
+                  height: props.height ?? "max-content!",
+                  // "min(50%, 300px)",
+                  width: props.width ?? "clamp(50%, 700px, 90%)",
+                  pt: 6,
+                  // px: 4,
+                  margin: "auto",
+                  borderRadius: 12,
+                  zIndex: 1,
+                  variants: {
+                    initial: { opacity: 0, scale: 0.5 },
+                    animate: {
+                      opacity: 1,
+                      scale: 1,
+                      transition: {
+                        type: "spring",
+                        damping: 20,
+                        stiffness: 300
                       }
                     },
-                    drag: "y",
-                    style: { y },
-                    dragControls,
-                    onPointerDown: (e) => onDragStart(e),
-                    //   drag={hasBackdrop ? "y" : false}
-                    dragElastic: 0,
-                    // prevent drawer from being dragged higher than what its opened to
-                    dragConstraints: { top: 0 },
-                    onDragEnd: (_, drag) => {
-                      if (props.drag === false) return;
-                      const pageHeight = document.documentElement.scrollHeight;
-                      const yCoord = drag.point.y;
-                      const velocity = drag.velocity.y;
-                      const releaseThreshold = 0.8;
-                      const releasePct = yCoord / pageHeight;
-                      if (velocity > 25 && releasePct >= releaseThreshold || velocity > 750) {
-                        props.onClose?.();
-                      }
+                    exit: {
+                      opacity: 0,
+                      scale: 0.3,
+                      transition: { type: "spring", duration: 0.45 }
                     }
-                  },
-                  boxSizing: "border-box",
-                  boxShadow: "hsl(0deg 0% 0% / 60%) 0px -4px 20px",
-                  bg: { base: "neutral.100", _dark: "neutral.900" },
-                  color: "text-primary",
-                  ref,
-                  ...rest,
-                  children: /* @__PURE__ */ jsxs(
-                    MotionDiv4,
-                    {
-                      grid: true,
-                      ...isDesktop ? { position: "relative" } : { rows: "max-content 1fr" },
-                      children: [
-                        !isDesktop && props.hideHandle !== false && /* @__PURE__ */ jsx(
-                          MotionDiv4,
-                          {
-                            grid: true,
-                            justifySelf: "center",
-                            h: 6,
-                            w: 34,
-                            mt: "16px",
-                            mb: 4,
-                            br: 20,
-                            bg: { base: "neutral.400", _dark: "neutral.600" },
-                            cursor: props.drag ? "row-resize" : "default",
-                            ref: dragHandleRef
-                          }
-                        ),
-                        props.children
-                      ]
+                  }
+                } : {
+                  w: "100vw",
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  borderTopLeftRadius: 12,
+                  borderTopRightRadius: 12,
+                  overflow: "hidden",
+                  // Note: Can't use framer-motion's `y` prop because it conflicts
+                  // with the drag motion value. Use CSS transform instead.
+                  drag: "y",
+                  style: { y },
+                  dragControls,
+                  variants: mobileVariants,
+                  onPointerDown: (e) => onDragStart(e),
+                  //   drag={hasBackdrop ? "y" : false}
+                  dragElastic: 0,
+                  // prevent drawer from being dragged higher than what its opened to
+                  dragConstraints: { top: 0 },
+                  onDragEnd: (_, drag) => {
+                    if (props.drag === false) return;
+                    const pageHeight = document.documentElement.scrollHeight;
+                    const yCoord = drag.point.y;
+                    const velocity = drag.velocity.y;
+                    const releaseThreshold = 0.8;
+                    const releasePct = yCoord / pageHeight;
+                    if (velocity > 25 && releasePct >= releaseThreshold || velocity > 750) {
+                      props.onClose?.();
                     }
-                  )
+                  }
                 },
-                "drawer"
-              )
-            ]
+                boxSizing: "border-box",
+                boxShadow: "hsl(0deg 0% 0% / 60%) 0px -4px 20px",
+                color: "text-primary",
+                bg: drawerBg,
+                ref,
+                ...rest,
+                children: /* @__PURE__ */ jsxs(
+                  MotionDiv4,
+                  {
+                    grid: true,
+                    ...isDesktop ? { position: "relative" } : { rows: "max-content 1fr" },
+                    children: [
+                      !isDesktop && props.hideHandle !== false && /* @__PURE__ */ jsx(
+                        MotionDiv4,
+                        {
+                          grid: true,
+                          justifySelf: "center",
+                          h: 6,
+                          w: 34,
+                          mt: "16px",
+                          mb: 4,
+                          br: 20,
+                          bg: { base: "neutral.400", _dark: "neutral.600" },
+                          cursor: props.drag ? "row-resize" : "default",
+                          ref: dragHandleRef
+                        }
+                      ),
+                      props.children
+                    ]
+                  }
+                )
+              },
+              "drawer"
+            )
           }
         )
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qstd",
-  "version": "0.3.75",
+  "version": "0.3.76",
   "description": "Standard Block component and utilities library with Panda CSS",
   "author": "malin1",
   "license": "MIT",

package/styled-system/styles.css

@@ -1017,14 +1017,6 @@
     stroke-width: 4;
 }
 
-  .fixed_true {
-    position: fixed;
-}
-
-  .pointer-events_none {
-    pointer-events: none;
-}
-
   .pos_fixed {
     position: fixed;
 }
@@ -1167,6 +1159,10 @@
     grid-auto-flow: column;
 }
 
+  .pointer-events_none {
+    pointer-events: none;
+}
+
   .trf-o_top_left {
     transform-origin: top left;
 }
@@ -1331,22 +1327,6 @@
     width: 100%;
 }
 
-  .left_0 {
-    left: var(--spacing-0);
-}
-
-  .right_0 {
-    right: var(--spacing-0);
-}
-
-  .bottom_0 {
-    bottom: var(--spacing-0);
-}
-
-  .h_96 {
-    height: 96px;
-}
-
   .h_max-content\! {
     height: max-content !important;
 }
@@ -1363,6 +1343,18 @@
     width: 100vw;
 }
 
+  .left_0 {
+    left: var(--spacing-0);
+}
+
+  .right_0 {
+    right: var(--spacing-0);
+}
+
+  .bottom_0 {
+    bottom: var(--spacing-0);
+}
+
   .bdr-tl_12 {
     border-top-left-radius: 12px;
 }