@quan-erp/shared-ui 2.0.1 → 2.0.3

package/dist/es/components/custom/pull-to-refresh.js

@@ -15,7 +15,6 @@ import "clsx";
 import "tailwind-merge";
 import "../ui/popover.js";
 import "../ui/drawer.js";
-import "../ui/select.js";
 import "uuid";
 import { Vibration } from "@quan-erp/shared-frontend-core";
 import "../ui/carousel.js";
@@ -41,6 +40,7 @@ import "../ui/progress.js";
 import "../ui/radio-group.js";
 import "react-resizable-panels";
 import "../ui/scroll-area.js";
+import "../ui/select.js";
 import "@radix-ui/react-separator";
 import "../ui/sidebar.js";
 import "../ui/slider.js";
@@ -159,9 +159,15 @@ const PullToRefresh = React__default.memo(({
     return false;
   };
   const startDrag = (pageX, pageY, target) => {
-    if (containerRef.current) {
-      if (containerRef.current.scrollTop > 0) return;
-      if (target && isScrolled(target, containerRef.current)) return;
+    const container = containerRef.current;
+    const overlay = target?.closest?.(
+      '[data-vaul-drawer], [data-vaul-overlay], [role="dialog"][data-state="open"]'
+    );
+    if (overlay && !overlay.contains(container)) return;
+    if (container?.closest?.("[data-vaul-drawer]")) return;
+    if (container) {
+      if (container.scrollTop > 0) return;
+      if (target && isScrolled(target, container)) return;
     }
     if (statusRef.current === "refreshing" || statusRef.current === "success" || statusRef.current === "error") return;
     isDraggingRef.current = true;
@@ -322,58 +328,63 @@ const PullToRefresh = React__default.memo(({
   if (disabled) {
     return /* @__PURE__ */ jsx("div", { className, ...macrosSlot("pull-to-refresh"), children });
   }
-  return /* @__PURE__ */ jsxs("div", { className: `shared:relative shared:overflow-hidden shared:w-full shared:h-full shared:select-none ${className}`, "data-vaul-no-drag": true, ...macrosSlot("pull-to-refresh"), children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: indicatorRef,
-        className: "shared:absolute shared:top-0 shared:left-0 shared:right-0 shared:flex shared:items-center shared:justify-center shared:overflow-hidden shared:pointer-events-none",
-        style: {
-          height: "0px",
-          opacity: 0,
-          transition: "height 400ms cubic-bezier(0.16, 1, 0.3, 1), opacity 400ms cubic-bezier(0.16, 1, 0.3, 1)"
-        },
-        children: renderIndicator ? renderIndicator(customState?.status || "idle", customState?.yOffset || 0, threshold) : /* @__PURE__ */ jsxs("div", { className: "shared:relative shared:flex shared:items-center shared:justify-center shared:w-full", children: [
-          /* @__PURE__ */ jsxs("div", { ref: successRef, style: { opacity: 0, transform: "scale(0.95)" }, className: "shared:absolute shared:flex shared:items-center shared:justify-center shared:gap-2 shared:text-sm shared:text-foreground/70 shared:font-medium shared:py-1 shared:transition-all shared:duration-200", children: [
-            /* @__PURE__ */ jsx("div", { className: "shared:w-5 shared:h-5 shared:rounded-full shared:bg-muted shared:flex shared:items-center shared:justify-center shared:text-foreground/70", children: /* @__PURE__ */ jsx(Check, { theme: "outline", size: "12", strokeWidth: 5 }) }),
-            /* @__PURE__ */ jsx("span", { children: "Refresh succeed" })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { ref: errorRef, style: { opacity: 0, transform: "scale(0.95)" }, className: "shared:absolute shared:flex shared:items-center shared:justify-center shared:gap-2 shared:text-sm shared:text-red-600 shared:dark:text-red-500 shared:font-medium shared:py-1 shared:transition-all shared:duration-200", children: [
-            /* @__PURE__ */ jsx("div", { className: "shared:w-5 shared:h-5 shared:rounded-full shared:bg-red-100 shared:dark:bg-red-950/30 shared:flex shared:items-center shared:justify-center shared:text-red-600 shared:dark:text-red-500", children: /* @__PURE__ */ jsx(CloseSmall, { theme: "outline", size: "12", strokeWidth: 5 }) }),
-            /* @__PURE__ */ jsx("span", { children: "Refresh failed" })
-          ] }),
-          /* @__PURE__ */ jsx("div", { ref: refreshingRef, style: { opacity: 0 }, className: "shared:absolute shared:flex shared:items-center shared:justify-center shared:py-1 shared:transition-opacity shared:duration-200", children: /* @__PURE__ */ jsx(Spinner, {}) }),
-          /* @__PURE__ */ jsxs("div", { ref: readyRef, style: { opacity: 0 }, className: "shared:absolute shared:flex shared:items-center shared:justify-center shared:gap-2 shared:text-sm shared:text-primary shared:font-medium shared:py-1 shared:transition-opacity shared:duration-200", children: [
-            /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", className: "shared:-rotate-90", children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: 10, className: "shared:text-primary", stroke: "currentColor", strokeWidth: 2.5, fill: "none" }) }),
-            /* @__PURE__ */ jsx("span", { children: "Release to refresh" })
-          ] }),
-          /* @__PURE__ */ jsx("div", { ref: pullingRef, style: { opacity: 0 }, className: "shared:absolute shared:flex shared:items-center shared:justify-center shared:py-1 shared:transition-opacity shared:duration-200", children: /* @__PURE__ */ jsxs("div", { ref: pullingScaleRef, className: "shared:flex shared:items-center shared:justify-center shared:gap-2 shared:text-sm shared:text-muted-foreground shared:font-medium shared:transition-transform shared:duration-75", style: { transformOrigin: "center" }, children: [
-            /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", style: { transform: "rotate(-90deg)", transformOrigin: "center" }, children: [
-              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: 10, className: "shared:text-muted/30", stroke: "currentColor", strokeWidth: 2.5, fill: "none" }),
-              /* @__PURE__ */ jsx("circle", { ref: circleProgressRef, cx: "12", cy: "12", r: 10, className: "shared:text-primary shared:transition-all shared:duration-75", stroke: "currentColor", strokeWidth: 2.5, fill: "none", strokeDasharray: 2 * Math.PI * 10, strokeLinecap: "round" })
+  return (
+    // No `data-vaul-no-drag` here: opting out would stop a drawer from being
+    // dragged by its content and hand the gesture to pull-to-refresh instead.
+    // Drawer ownership is decided in `startDrag` (see the overlay guards).
+    /* @__PURE__ */ jsxs("div", { className: `shared:relative shared:overflow-hidden shared:w-full shared:h-full shared:select-none shared:overscroll-contain ${className}`, ...macrosSlot("pull-to-refresh"), children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: indicatorRef,
+          className: "shared:absolute shared:top-0 shared:left-0 shared:right-0 shared:flex shared:items-center shared:justify-center shared:overflow-hidden shared:pointer-events-none",
+          style: {
+            height: "0px",
+            opacity: 0,
+            transition: "height 400ms cubic-bezier(0.16, 1, 0.3, 1), opacity 400ms cubic-bezier(0.16, 1, 0.3, 1)"
+          },
+          children: renderIndicator ? renderIndicator(customState?.status || "idle", customState?.yOffset || 0, threshold) : /* @__PURE__ */ jsxs("div", { className: "shared:relative shared:flex shared:items-center shared:justify-center shared:w-full", children: [
+            /* @__PURE__ */ jsxs("div", { ref: successRef, style: { opacity: 0, transform: "scale(0.95)" }, className: "shared:absolute shared:flex shared:items-center shared:justify-center shared:gap-2 shared:text-sm shared:text-foreground/70 shared:font-medium shared:py-1 shared:transition-all shared:duration-200", children: [
+              /* @__PURE__ */ jsx("div", { className: "shared:w-5 shared:h-5 shared:rounded-full shared:bg-muted shared:flex shared:items-center shared:justify-center shared:text-foreground/70", children: /* @__PURE__ */ jsx(Check, { theme: "outline", size: "12", strokeWidth: 5 }) }),
+              /* @__PURE__ */ jsx("span", { children: "Refresh succeed" })
             ] }),
-            /* @__PURE__ */ jsx("span", { children: "Pull down " }),
-            /* @__PURE__ */ jsx("span", { ref: percentTextRef, className: "shared:text-primary shared:font-bold", children: "0%" })
-          ] }) })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: containerRef,
-        ...macrosSlot("pull-to-refresh-content"),
-        onTouchStart: handleTouchStart,
-        onMouseDown: handleMouseDown,
-        className: `shared:overflow-y-auto shared:w-full shared:h-full shared:scrollbar-thin shared:will-change-transform`,
-        style: {
-          transform: "translateY(0px) translateZ(0)",
-          transition: "transform 400ms cubic-bezier(0.16, 1, 0.3, 1)"
-        },
-        children
-      }
-    )
-  ] });
+            /* @__PURE__ */ jsxs("div", { ref: errorRef, style: { opacity: 0, transform: "scale(0.95)" }, className: "shared:absolute shared:flex shared:items-center shared:justify-center shared:gap-2 shared:text-sm shared:text-red-600 shared:dark:text-red-500 shared:font-medium shared:py-1 shared:transition-all shared:duration-200", children: [
+              /* @__PURE__ */ jsx("div", { className: "shared:w-5 shared:h-5 shared:rounded-full shared:bg-red-100 shared:dark:bg-red-950/30 shared:flex shared:items-center shared:justify-center shared:text-red-600 shared:dark:text-red-500", children: /* @__PURE__ */ jsx(CloseSmall, { theme: "outline", size: "12", strokeWidth: 5 }) }),
+              /* @__PURE__ */ jsx("span", { children: "Refresh failed" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { ref: refreshingRef, style: { opacity: 0 }, className: "shared:absolute shared:flex shared:items-center shared:justify-center shared:py-1 shared:transition-opacity shared:duration-200", children: /* @__PURE__ */ jsx(Spinner, {}) }),
+            /* @__PURE__ */ jsxs("div", { ref: readyRef, style: { opacity: 0 }, className: "shared:absolute shared:flex shared:items-center shared:justify-center shared:gap-2 shared:text-sm shared:text-primary shared:font-medium shared:py-1 shared:transition-opacity shared:duration-200", children: [
+              /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", className: "shared:-rotate-90", children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: 10, className: "shared:text-primary", stroke: "currentColor", strokeWidth: 2.5, fill: "none" }) }),
+              /* @__PURE__ */ jsx("span", { children: "Release to refresh" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { ref: pullingRef, style: { opacity: 0 }, className: "shared:absolute shared:flex shared:items-center shared:justify-center shared:py-1 shared:transition-opacity shared:duration-200", children: /* @__PURE__ */ jsxs("div", { ref: pullingScaleRef, className: "shared:flex shared:items-center shared:justify-center shared:gap-2 shared:text-sm shared:text-muted-foreground shared:font-medium shared:transition-transform shared:duration-75", style: { transformOrigin: "center" }, children: [
+              /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", style: { transform: "rotate(-90deg)", transformOrigin: "center" }, children: [
+                /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: 10, className: "shared:text-muted/30", stroke: "currentColor", strokeWidth: 2.5, fill: "none" }),
+                /* @__PURE__ */ jsx("circle", { ref: circleProgressRef, cx: "12", cy: "12", r: 10, className: "shared:text-primary shared:transition-all shared:duration-75", stroke: "currentColor", strokeWidth: 2.5, fill: "none", strokeDasharray: 2 * Math.PI * 10, strokeLinecap: "round" })
+              ] }),
+              /* @__PURE__ */ jsx("span", { children: "Pull down " }),
+              /* @__PURE__ */ jsx("span", { ref: percentTextRef, className: "shared:text-primary shared:font-bold", children: "0%" })
+            ] }) })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: containerRef,
+          ...macrosSlot("pull-to-refresh-content"),
+          onTouchStart: handleTouchStart,
+          onMouseDown: handleMouseDown,
+          className: `shared:overflow-y-auto shared:w-full shared:h-full shared:scrollbar-thin shared:will-change-transform`,
+          style: {
+            transform: "translateY(0px) translateZ(0)",
+            transition: "transform 400ms cubic-bezier(0.16, 1, 0.3, 1)"
+          },
+          children
+        }
+      )
+    ] })
+  );
 });
 export {
   PullToRefresh

package/dist/es/components/custom/responsive-dialog.js

@@ -16,7 +16,6 @@ import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 import "../ui/popover.js";
 import { Drawer, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, DrawerTrigger } from "../ui/drawer.js";
-import "../ui/select.js";
 import "@icon-park/react";
 import "../ui/carousel.js";
 import "../ui/chart.js";
@@ -41,6 +40,7 @@ import "../ui/progress.js";
 import "../ui/radio-group.js";
 import "react-resizable-panels";
 import "../ui/scroll-area.js";
+import "../ui/select.js";
 import "@radix-ui/react-separator";
 import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetTitle, SheetTrigger } from "../ui/sheet.js";
 import "../ui/sidebar.js";

package/dist/es/components/custom/safearea.js

@@ -1,7 +1,29 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../lib/utils.js";
-function SafeArea({ children, className = "" }) {
-  return /* @__PURE__ */ jsx("div", { className: cn(`shared:pt-(--safe-area-inset-top) shared:pb-(--safe-area-inset-bottom) shared:pl-(--safe-area-inset-left) shared:pr-(--safe-area-inset-right) shared:bg-white shared:min-h-screen shared:h-full`, className), children });
+const INSET_ZERO = "0px";
+const INSET_TOP = "var(--safe-area-inset-top, env(safe-area-inset-top, 0px))";
+const INSET_RIGHT = "var(--safe-area-inset-right, env(safe-area-inset-right, 0px))";
+const INSET_BOTTOM = "var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))";
+const INSET_LEFT = "var(--safe-area-inset-left, env(safe-area-inset-left, 0px))";
+function SafeArea({
+  children,
+  className = "",
+  ignoreTop = false,
+  ignoreBottom = false
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("shared:min-h-screen shared:h-full shared:box-border", className),
+      style: {
+        paddingTop: ignoreTop ? INSET_ZERO : INSET_TOP,
+        paddingRight: INSET_RIGHT,
+        paddingBottom: ignoreBottom ? INSET_ZERO : INSET_BOTTOM,
+        paddingLeft: INSET_LEFT
+      },
+      children
+    }
+  );
 }
 export {
   SafeArea

package/dist/es/components/ui/calendar.js

@@ -7,7 +7,6 @@ import { cn } from "../../lib/utils.js";
 import { Button, buttonVariants } from "./button.js";
 import { Popover, PopoverTrigger, PopoverContent } from "./popover.js";
 import { Drawer, DrawerTrigger, DrawerContent, DrawerFooter, DrawerClose } from "./drawer.js";
-import "./select.js";
 import { useMediaQuery } from "../../hooks/use-mobile.js";
 import { useMobileBackDialog } from "../../hooks/use-mobile-back-dialog.js";
 import "@quan-erp/shared-frontend-core";
@@ -23,18 +22,86 @@ function Calendar({
   type = "raw",
   trigger,
   label,
+  onSelect,
   ...props
 }) {
   const defaultClassNames = getDefaultClassNames();
   const isMobile = useMediaQuery();
   const [open, setOpen] = React.useState(false);
   const isDrawer = type === "drawer" || type === "automatic" && isMobile;
+  const contentRef = React.useRef(null);
+  const triggerRef = React.useRef(null);
   const [internalMonth, setInternalMonth] = React.useState(props.defaultMonth || props.month || /* @__PURE__ */ new Date());
   useMobileBackDialog({
     open,
     enable: open && isDrawer,
     onOpenChange: setOpen
   });
+  React.useLayoutEffect(() => {
+    if (!open || isDrawer) return;
+    const pad = 8;
+    const gap = 6;
+    let applying = false;
+    let observed = null;
+    let obs;
+    function place() {
+      const el = contentRef.current;
+      const trigger2 = triggerRef.current;
+      if (!el || !trigger2 || !el.isConnected || applying) return;
+      const wrapper = el.closest("[data-radix-popper-content-wrapper]") || el;
+      const tr = trigger2.getBoundingClientRect();
+      const h = el.offsetHeight;
+      const w = el.offsetWidth;
+      const vh = window.innerHeight;
+      const vw = window.innerWidth;
+      let top = tr.bottom + gap;
+      if (top + h > vh - pad) top = tr.top - gap - h;
+      if (top < pad) top = pad;
+      if (top + h > vh - pad) top = Math.max(pad, vh - pad - h);
+      let left = tr.left;
+      if (left + w > vw - pad) left = Math.max(pad, vw - pad - w);
+      if (left < pad) left = pad;
+      applying = true;
+      wrapper.style.setProperty("position", "fixed", "important");
+      wrapper.style.setProperty("top", `${Math.round(top)}px`, "important");
+      wrapper.style.setProperty("left", `${Math.round(left)}px`, "important");
+      wrapper.style.setProperty("right", "auto", "important");
+      wrapper.style.setProperty("bottom", "auto", "important");
+      wrapper.style.setProperty("transform", "none", "important");
+      wrapper.style.setProperty("margin", "0", "important");
+      wrapper.style.setProperty("z-index", "200", "important");
+      applying = false;
+      if (observed !== wrapper) {
+        if (observed) obs.disconnect();
+        observed = wrapper;
+        obs.observe(wrapper, { attributes: true, attributeFilter: ["style"] });
+      }
+    }
+    obs = new MutationObserver(() => {
+      if (!applying) place();
+    });
+    place();
+    const rafs = [0, 1, 2].map(() => requestAnimationFrame(place));
+    const timers = [16, 50, 100, 200, 400].map((ms) => window.setTimeout(place, ms));
+    window.addEventListener("resize", place);
+    window.addEventListener("scroll", place, true);
+    return () => {
+      rafs.forEach((id) => cancelAnimationFrame(id));
+      timers.forEach((id) => window.clearTimeout(id));
+      obs.disconnect();
+      window.removeEventListener("resize", place);
+      window.removeEventListener("scroll", place, true);
+    };
+  }, [open, isDrawer]);
+  const handleSelect = React.useCallback(
+    (date, ...args) => {
+      onSelect?.(date, ...args);
+      if (props.mode === "single" && date && (type === "popover" || type === "automatic" || type === "drawer")) {
+        setOpen(false);
+      }
+    },
+    [onSelect, props.mode, type]
+  );
   React.useEffect(() => {
     if (props.month) {
       setInternalMonth(props.month);
@@ -106,8 +173,8 @@ function Calendar({
     const today = /* @__PURE__ */ new Date();
     setInternalMonth(today);
     props.onMonthChange?.(today);
-    if (props.mode === "single" && props.onSelect) {
-      props.onSelect(today, today, { selected: false }, {});
+    if (props.mode === "single" && onSelect) {
+      handleSelect(today, today, { selected: false }, {});
     }
   };
   const CalendarContent = /* @__PURE__ */ jsxs("div", { className: "shared:flex shared:flex-col shared:gap-2 shared:w-full shared:overflow-hidden shared:md:h-[26.5rem] shared:h-[31.5rem] shared:md:mt-0 shared:mt-5", children: [
@@ -329,7 +396,8 @@ function Calendar({
           },
           ...components
         },
-        ...props
+        ...props,
+        onSelect: handleSelect
       }
     ),
     /* @__PURE__ */ jsx("div", { className: "shared:px-2 shared:pb-2 shared:mt-[-4px] shared:min-h-min shared:flex shared:justify-end", children: showMonthYearPicker ? /* @__PURE__ */ jsx(
@@ -361,10 +429,29 @@ function Calendar({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs(Popover, { children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx(PopoverContent, { className: "shared:w-auto shared:p-0", align: "start", children: CalendarContent })
-  ] });
+  return (
+    // modal={false}: works inside Dialog (pointer-events / focus trap won't swallow the panel)
+    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, modal: false, children: [
+      /* @__PURE__ */ jsx("div", { ref: triggerRef, className: "shared:w-full shared:min-w-0", children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger || /* @__PURE__ */ jsxs(Button, { type: "button", variant: "input", children: [
+        label,
+        /* @__PURE__ */ jsx(Calendar$1, { theme: "outline", size: "19", fill: "#000000" })
+      ] }) }) }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          ref: contentRef,
+          align: "start",
+          side: "bottom",
+          sideOffset: 6,
+          avoidCollisions: false,
+          className: "shared:z-[100] shared:w-auto shared:p-0",
+          onOpenAutoFocus: (e) => e.preventDefault(),
+          onCloseAutoFocus: (e) => e.preventDefault(),
+          children: CalendarContent
+        }
+      )
+    ] })
+  );
 }
 function CalendarDayButton({
   className,

package/dist/es/components/ui/dialog.js

@@ -40,10 +40,21 @@ function DialogOverlay({
     }
   );
 }
+function isPortaledOverlayTarget(target) {
+  if (!(target instanceof Element)) return false;
+  return Boolean(
+    target.closest(
+      '[data-slot="popover-content"], [data-slot="select-content"], [data-slot="dropdown-menu-content"], [data-slot="combobox-content"]'
+    )
+  );
+}
 function DialogContent({
   className,
   children,
   showCloseButton = true,
+  onPointerDownOutside,
+  onInteractOutside,
+  onFocusOutside,
   ...props
 }) {
   return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
@@ -57,6 +68,18 @@ function DialogContent({
           className
         ),
         ...props,
+        onPointerDownOutside: (e) => {
+          if (isPortaledOverlayTarget(e.target)) e.preventDefault();
+          onPointerDownOutside?.(e);
+        },
+        onInteractOutside: (e) => {
+          if (isPortaledOverlayTarget(e.target)) e.preventDefault();
+          onInteractOutside?.(e);
+        },
+        onFocusOutside: (e) => {
+          if (isPortaledOverlayTarget(e.target)) e.preventDefault();
+          onFocusOutside?.(e);
+        },
         children: [
           children,
           showCloseButton && /* @__PURE__ */ jsxs(

package/dist/es/components/ui/drawer.js

@@ -27,7 +27,7 @@ const DrawerOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__P
   {
     ref,
     ...macrosSlot("drawer-overlay"),
-    className: cn("shared:fixed shared:inset-0 shared:z-50 shared:bg-black/80", className),
+    className: cn("shared:fixed shared:inset-0 shared:z-50 shared:touch-none shared:overscroll-none shared:bg-black/80", className),
     ...props
   }
 ));
@@ -42,7 +42,7 @@ const DrawerContent = React.forwardRef(({ className, children, ...props }, ref)
         ref,
         ...macrosSlot("drawer-content"),
         className: cn(
-          "shared:fixed shared:inset-x-0 shared:bottom-0 shared:z-50 shared:mt-24 shared:flex shared:h-auto shared:flex-col shared:rounded-t-3xl shared:border shared:bg-(--drawer-background)",
+          "shared:fixed shared:inset-x-0 shared:bottom-0 shared:z-50 shared:mt-24 shared:flex shared:h-auto shared:flex-col shared:overscroll-contain shared:rounded-t-3xl shared:border shared:bg-(--drawer-background)",
           className
         ),
         ...props,

package/dist/es/components/ui/sheet.js

@@ -38,11 +38,22 @@ function SheetOverlay({
     }
   );
 }
+function isPortaledOverlayTarget(target) {
+  if (!(target instanceof Element)) return false;
+  return Boolean(
+    target.closest(
+      '[data-slot="popover-content"], [data-slot="select-content"], [data-slot="dropdown-menu-content"], [data-slot="combobox-content"]'
+    )
+  );
+}
 function SheetContent({
   className,
   children,
   side = "right",
   showCloseButton = true,
+  onPointerDownOutside,
+  onInteractOutside,
+  onFocusOutside,
   ...props
 }) {
   return /* @__PURE__ */ jsxs(SheetPortal, { children: [
@@ -60,6 +71,18 @@ function SheetContent({
           className
         ),
         ...props,
+        onPointerDownOutside: (e) => {
+          if (isPortaledOverlayTarget(e.target)) e.preventDefault();
+          onPointerDownOutside?.(e);
+        },
+        onInteractOutside: (e) => {
+          if (isPortaledOverlayTarget(e.target)) e.preventDefault();
+          onInteractOutside?.(e);
+        },
+        onFocusOutside: (e) => {
+          if (isPortaledOverlayTarget(e.target)) e.preventDefault();
+          onFocusOutside?.(e);
+        },
         children: [
           children,
           showCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, { ...macrosSlot("sheet-close"), className: "shared:p-2 shared:bg-muted shared:rounded-full shared:ring-offset-background shared:focus:ring-ring shared:data-[state=open]:bg-secondary shared:absolute shared:top-4 shared:right-4 shared:opacity-70 shared:transition-opacity shared:hover:opacity-100 shared:focus:ring-2 shared:focus:ring-offset-2 shared:focus:outline-hidden shared:disabled:pointer-events-none shared:cursor-pointer", children: [

package/dist/es/components/ui/table.js

@@ -1,11 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
-const Table = React.forwardRef(({ className, wrapper, parentContainer, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn("shared:w-full shared:border shared:border-black/10 shared:rounded-xl shared:cupertino-corner shared:overflow-hidden", parentContainer), children: /* @__PURE__ */ jsx("div", { className: cn("shared:relative shared:w-full shared:overflow-auto", wrapper), children: /* @__PURE__ */ jsx(
+const Table = React.forwardRef(({ className, wrapper, parentContainer, parentContainerStyle, warpperStyle, style, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn("shared:w-full shared:border shared:border-black/10 shared:rounded-xl shared:cupertino-corner shared:overflow-hidden", parentContainer), style: parentContainerStyle, children: /* @__PURE__ */ jsx("div", { className: cn("shared:relative shared:w-full shared:overflow-auto", wrapper), style: warpperStyle, children: /* @__PURE__ */ jsx(
   "table",
   {
     ref,
     className: cn("shared:w-full shared:caption-bottom shared:text-sm", className),
+    style,
     ...props
   }
 ) }) }));

package/dist/es/hooks/use-mobile.js

@@ -6,7 +6,9 @@ const SCREENS = {
   xl: 1280
 };
 function useMediaQuery(breakpoint = SCREENS.md) {
-  const [isTriggered, setTrigger] = React.useState(void 0);
+  const [isTriggered, setTrigger] = React.useState(
+    () => typeof window === "undefined" ? false : window.matchMedia(`(max-width: ${breakpoint - 1}px)`).matches
+  );
   React.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
     const onChange = () => {

package/dist/es/index.js

@@ -90,6 +90,7 @@ import { DataTableViewFallback } from "./components/custom/data-table/data-table
 import { DataTableViewOptions } from "./components/custom/data-table/data-table-view-options.js";
 import { buildColumnLayoutKey, loadViewPreferences, parseViewPreferences, saveViewPreferences, serializeViewPreferences, setColumnVisibleInState } from "./components/custom/data-table/data-table-view-preferences.storage.js";
 import { getDataTableViewPreferencesStorageKey, useDataTableViewPreferences } from "./components/custom/data-table/data-table-view-preferences.js";
+import "@tanstack/react-table";
 import { DataTable } from "./components/custom/data-table/data-table.js";
 import { useDataTablePageSize } from "./components/custom/data-table/use-data-table-page-size.js";
 import { SCREENS, useMediaQuery, useMediaQueryMultiStep } from "./hooks/use-mobile.js";