qstd 0.3.73 → 0.3.74

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;AAia9B,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;AAma9B,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

@@ -2805,7 +2805,7 @@ function DrawerComponent(props) {
           Backdrop,
           {
             onClick: () => onBackdropClick(),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
               MotionDiv4,
               {
                 grid: true,
@@ -2854,17 +2854,6 @@ function DrawerComponent(props) {
                   borderTopLeftRadius: 12,
                   borderTopRightRadius: 12,
                   overflow: "hidden",
-                  // Extend background below viewport to cover spring overshoot bounce
-                  _after: {
-                    content: '""',
-                    position: "absolute",
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    height: 100,
-                    transform: "translateY(100%)",
-                    bg: "inherit"
-                  },
                   // Note: Can't use framer-motion's `y` prop because it conflicts
                   // with the drag motion value. Use CSS transform instead.
                   variants: {
@@ -2919,31 +2908,46 @@ function DrawerComponent(props) {
                 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
-                    ]
-                  }
-                )
+                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
+                      ]
+                    }
+                  ),
+                  !isDesktop && /* @__PURE__ */ jsxRuntime.jsx(
+                    MotionDiv4,
+                    {
+                      position: "absolute",
+                      left: 0,
+                      right: 0,
+                      bottom: 0,
+                      h: 100,
+                      transform: "translateY(100%)",
+                      bg: { base: "neutral.100", _dark: "neutral.900" },
+                      pointerEvents: "none"
+                    }
+                  )
+                ]
               },
               "drawer"
             )

package/dist/react/index.css

@@ -1020,18 +1020,24 @@
   .justify-self_center {
     justify-self: center;
   }
+  .pos_absolute {
+    position: absolute;
+  }
+  .trf_translateY\(100\%\) {
+    transform: translateY(100%);
+  }
+  .pointer-events_none {
+    pointer-events: none;
+  }
   .rg_14 {
     row-gap: 14px;
   }
-  .place-i_true {
+  .place-i_true,
+  .center_true {
     place-items: center;
   }
-  .pos_absolute {
-    position: absolute;
-  }
   .center_true {
     place-content: center;
-    place-items: center;
   }
   .fs_16 {
     font-size: 16px;
@@ -1109,9 +1115,6 @@
   .grid-af_column {
     grid-auto-flow: column;
   }
-  .pointer-events_none {
-    pointer-events: none;
-  }
   .trf-o_top_left {
     transform-origin: top left;
   }
@@ -1275,6 +1278,9 @@
   .mb_4 {
     margin-bottom: var(--spacing-4);
   }
+  .h_100 {
+    height: 100px;
+  }
   .top_0 {
     top: var(--spacing-0);
   }
@@ -1380,9 +1386,6 @@
   [data-theme=dark] .dark\:bg_neutral\.900 {
     background: var(--colors-neutral-900);
   }
-  .after\:bg_inherit::after {
-    background: inherit;
-  }
   [data-theme=dark] .dark\:bg_neutral\.600 {
     background: var(--colors-neutral-600);
   }
@@ -1422,9 +1425,6 @@
   .after\:pos_absolute::after {
     position: absolute;
   }
-  .after\:trf_translateY\(100\%\)::after {
-    transform: translateY(100%);
-  }
   .after\:scale_0::after {
     scale: 0;
   }
@@ -1466,18 +1466,6 @@
   .\[\&\:\:-webkit-scrollbar-thumb\]\:bg-c_neutral\.300::-webkit-scrollbar-thumb {
     background-color: var(--colors-neutral-300);
   }
-  .after\:left_0::after {
-    left: var(--spacing-0);
-  }
-  .after\:right_0::after {
-    right: var(--spacing-0);
-  }
-  .after\:bottom_0::after {
-    bottom: var(--spacing-0);
-  }
-  .after\:h_100::after {
-    height: 100px;
-  }
   .\[\&\:\:-webkit-scrollbar\]\:h_6::-webkit-scrollbar {
     height: 6px;
   }

package/dist/react/index.js

@@ -2782,7 +2782,7 @@ function DrawerComponent(props) {
           Backdrop,
           {
             onClick: () => onBackdropClick(),
-            children: /* @__PURE__ */ jsx(
+            children: /* @__PURE__ */ jsxs(
               MotionDiv4,
               {
                 grid: true,
@@ -2831,17 +2831,6 @@ function DrawerComponent(props) {
                   borderTopLeftRadius: 12,
                   borderTopRightRadius: 12,
                   overflow: "hidden",
-                  // Extend background below viewport to cover spring overshoot bounce
-                  _after: {
-                    content: '""',
-                    position: "absolute",
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    height: 100,
-                    transform: "translateY(100%)",
-                    bg: "inherit"
-                  },
                   // Note: Can't use framer-motion's `y` prop because it conflicts
                   // with the drag motion value. Use CSS transform instead.
                   variants: {
@@ -2896,31 +2885,46 @@ function DrawerComponent(props) {
                 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
-                    ]
-                  }
-                )
+                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
+                      ]
+                    }
+                  ),
+                  !isDesktop && /* @__PURE__ */ jsx(
+                    MotionDiv4,
+                    {
+                      position: "absolute",
+                      left: 0,
+                      right: 0,
+                      bottom: 0,
+                      h: 100,
+                      transform: "translateY(100%)",
+                      bg: { base: "neutral.100", _dark: "neutral.900" },
+                      pointerEvents: "none"
+                    }
+                  )
+                ]
               },
               "drawer"
             )

package/package.json

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

package/styled-system/styles.css

@@ -1049,21 +1049,28 @@
     justify-self: center;
 }
 
+  .pos_absolute {
+    position: absolute;
+}
+
+  .trf_translateY\(100\%\) {
+    transform: translateY(100%);
+}
+
+  .pointer-events_none {
+    pointer-events: none;
+}
+
   .rg_14 {
     row-gap: 14px;
 }
 
-  .place-i_true {
+  .place-i_true,.center_true {
     place-items: center;
 }
 
-  .pos_absolute {
-    position: absolute;
-}
-
   .center_true {
     place-content: center;
-    place-items: center;
 }
 
   .fs_16 {
@@ -1159,10 +1166,6 @@
     grid-auto-flow: column;
 }
 
-  .pointer-events_none {
-    pointer-events: none;
-}
-
   .trf-o_top_left {
     transform-origin: top left;
 }
@@ -1379,6 +1382,10 @@
     margin-bottom: var(--spacing-4);
 }
 
+  .h_100 {
+    height: 100px;
+}
+
   .top_0 {
     top: var(--spacing-0);
 }
@@ -1519,10 +1526,6 @@
     background: var(--colors-neutral-900);
 }
 
-  .after\:bg_inherit::after {
-    background: inherit;
-}
-
   [data-theme=dark] .dark\:bg_neutral\.600 {
     background: var(--colors-neutral-600);
 }
@@ -1575,10 +1578,6 @@
     position: absolute;
 }
 
-  .after\:trf_translateY\(100\%\)::after {
-    transform: translateY(100%);
-}
-
   .after\:scale_0::after {
     scale: 0;
 }
@@ -1623,22 +1622,6 @@
     background-color: var(--colors-neutral-300);
 }
 
-  .after\:left_0::after {
-    left: var(--spacing-0);
-}
-
-  .after\:right_0::after {
-    right: var(--spacing-0);
-}
-
-  .after\:bottom_0::after {
-    bottom: var(--spacing-0);
-}
-
-  .after\:h_100::after {
-    height: 100px;
-}
-
   .\[\&\:\:-webkit-scrollbar\]\:h_6::-webkit-scrollbar {
     height: 6px;
 }