@quan-erp/shared-ui 1.0.0

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

@@ -0,0 +1,378 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default, { useRef, useState, useEffect } from "react";
+import { Check, CloseSmall } from "@icon-park/react";
+import "../ui/accordion.js";
+import "../ui/alert.js";
+import "../ui/avatar.js";
+import "../ui/badge.js";
+import "../ui/breadcrumb.js";
+import "../ui/button-group.js";
+import "../ui/button.js";
+import "lucide-react";
+import "react-day-picker";
+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";
+import "../ui/chart.js";
+import "../ui/checkbox.js";
+import "@radix-ui/react-collapsible";
+import "../ui/command.js";
+import "../ui/context-menu.js";
+import "@radix-ui/react-dialog";
+import "../ui/dropdown-menu.js";
+import "../ui/field.js";
+import "../ui/form.js";
+import "../ui/hover-card.js";
+import "../ui/input-group.js";
+import "../ui/input-otp.js";
+import "../ui/input.js";
+import "../ui/item.js";
+import "@radix-ui/react-label";
+import "../ui/menubar.js";
+import "../ui/navigation-menu.js";
+import "../ui/pagination.js";
+import "../ui/progress.js";
+import "../ui/radio-group.js";
+import "react-resizable-panels";
+import "../ui/scroll-area.js";
+import "@radix-ui/react-separator";
+import "../ui/sidebar.js";
+import "../ui/slider.js";
+import "next-themes";
+import "sonner";
+import { Spinner } from "../ui/spinner.js";
+import "../ui/switch.js";
+import "../ui/table.js";
+import "../ui/tabs.js";
+import "../ui/textarea.js";
+import "../ui/toggle-group.js";
+import "../ui/toggle.js";
+import "@radix-ui/react-tooltip";
+import "@radix-ui/react-alert-dialog";
+const PullToRefresh = React__default.memo(({
+  onRefresh,
+  refreshing,
+  threshold = 80,
+  resistance = 2.5,
+  renderIndicator,
+  children,
+  className = "",
+  disabled = false,
+  success = true
+}) => {
+  const containerRef = useRef(null);
+  const indicatorRef = useRef(null);
+  const successRef = useRef(null);
+  const errorRef = useRef(null);
+  const refreshingRef = useRef(null);
+  const readyRef = useRef(null);
+  const pullingRef = useRef(null);
+  const pullingScaleRef = useRef(null);
+  const circleProgressRef = useRef(null);
+  const percentTextRef = useRef(null);
+  const statusRef = useRef("idle");
+  const yOffsetRef = useRef(0);
+  const isDraggingRef = useRef(false);
+  const startXRef = useRef(0);
+  const startYRef = useRef(0);
+  const isGestureClassified = useRef(false);
+  const isVerticalDrag = useRef(false);
+  const onRefreshRef = useRef(onRefresh);
+  const thresholdRef = useRef(threshold);
+  const resistanceRef = useRef(resistance);
+  const successRefProp = useRef(success);
+  const refreshingRefProp = useRef(refreshing);
+  onRefreshRef.current = onRefresh;
+  thresholdRef.current = threshold;
+  resistanceRef.current = resistance;
+  successRefProp.current = success;
+  refreshingRefProp.current = refreshing;
+  const [customState, setCustomState] = useState(null);
+  const updateState = (newStatus, newYOffset) => {
+    statusRef.current = newStatus;
+    yOffsetRef.current = newYOffset;
+    if (renderIndicator) {
+      setCustomState({ status: newStatus, yOffset: newYOffset });
+    }
+    if (containerRef.current) {
+      containerRef.current.style.transform = `translateY(${newYOffset}px) translateZ(0)`;
+    }
+    if (indicatorRef.current) {
+      indicatorRef.current.style.height = `${newYOffset}px`;
+      indicatorRef.current.style.opacity = `${newYOffset > 0 ? Math.min(newYOffset / 20, 1) : 0}`;
+    }
+    if (!renderIndicator) {
+      const successEl = successRef.current;
+      const errorEl = errorRef.current;
+      const refreshingEl = refreshingRef.current;
+      const readyEl = readyRef.current;
+      const pullingEl = pullingRef.current;
+      if (successEl) {
+        successEl.style.opacity = newStatus === "success" ? "1" : "0";
+        successEl.style.transform = newStatus === "success" ? "scale(1)" : "scale(0.95)";
+      }
+      if (errorEl) {
+        errorEl.style.opacity = newStatus === "error" ? "1" : "0";
+        errorEl.style.transform = newStatus === "error" ? "scale(1)" : "scale(0.95)";
+      }
+      if (refreshingEl) {
+        refreshingEl.style.opacity = newStatus === "refreshing" ? "1" : "0";
+      }
+      if (readyEl) {
+        readyEl.style.opacity = newStatus === "ready" ? "1" : "0";
+      }
+      if (pullingEl) {
+        pullingEl.style.opacity = newStatus === "pulling" ? "1" : "0";
+      }
+      if (newStatus === "pulling") {
+        const pullPercent = Math.min(Math.round(newYOffset / thresholdRef.current * 100), 100);
+        const radius = 10;
+        const circumference = 2 * Math.PI * radius;
+        const strokeDashoffset = circumference - pullPercent / 100 * circumference;
+        if (circleProgressRef.current) {
+          circleProgressRef.current.style.strokeDashoffset = `${strokeDashoffset}`;
+        }
+        if (percentTextRef.current) {
+          percentTextRef.current.innerText = `${pullPercent.toFixed(0)}%`;
+        }
+        if (pullingScaleRef.current) {
+          const scale = Math.min(1, Math.max(0, pullPercent / 100));
+          pullingScaleRef.current.style.transform = `scale(${scale})`;
+        }
+      }
+    }
+  };
+  const isScrolled = (target, stopElement) => {
+    let el = target;
+    while (el && el !== stopElement && el !== document.body) {
+      if (el.scrollTop > 0) {
+        return true;
+      }
+      el = el.parentElement;
+    }
+    return false;
+  };
+  const startDrag = (pageX, pageY, target) => {
+    if (containerRef.current) {
+      if (containerRef.current.scrollTop > 0) return;
+      if (target && isScrolled(target, containerRef.current)) return;
+    }
+    if (statusRef.current === "refreshing" || statusRef.current === "success" || statusRef.current === "error") return;
+    isDraggingRef.current = true;
+    startXRef.current = pageX;
+    startYRef.current = pageY;
+    isGestureClassified.current = false;
+    isVerticalDrag.current = false;
+    if (containerRef.current) {
+      containerRef.current.style.transition = "none";
+    }
+    if (indicatorRef.current) {
+      indicatorRef.current.style.transition = "none";
+    }
+    bindListeners();
+  };
+  const moveDrag = (pageX, pageY, event) => {
+    if (!isDraggingRef.current) return;
+    const diffX = Math.abs(pageX - startXRef.current);
+    const diffY = pageY - startYRef.current;
+    if (!isGestureClassified.current && (Math.abs(diffY) > 2 || diffX > 2)) {
+      isGestureClassified.current = true;
+      if (diffY > diffX && diffY > 0) {
+        isVerticalDrag.current = true;
+      } else {
+        isVerticalDrag.current = false;
+        isDraggingRef.current = false;
+        unbindListeners();
+        return;
+      }
+    }
+    if (isGestureClassified.current && !isVerticalDrag.current) {
+      return;
+    }
+    if (diffY <= 0) {
+      if (yOffsetRef.current > 0) {
+        updateState("idle", 0);
+      }
+      return;
+    }
+    if (event && event.cancelable) {
+      event.preventDefault();
+    }
+    const dampedOffset = diffY / (1 + diffY / (thresholdRef.current * resistanceRef.current));
+    const newStatus = dampedOffset >= thresholdRef.current ? "ready" : "pulling";
+    if (newStatus === "ready" && statusRef.current !== "ready") {
+      Vibration.instance.vibrate(100);
+    }
+    updateState(newStatus, dampedOffset);
+  };
+  const endDrag = async () => {
+    if (!isDraggingRef.current) return;
+    isDraggingRef.current = false;
+    unbindListeners();
+    if (containerRef.current) {
+      containerRef.current.style.transition = "transform 400ms cubic-bezier(0.16, 1, 0.3, 1)";
+    }
+    if (indicatorRef.current) {
+      indicatorRef.current.style.transition = "height 400ms cubic-bezier(0.16, 1, 0.3, 1), opacity 400ms cubic-bezier(0.16, 1, 0.3, 1)";
+    }
+    if (statusRef.current === "ready") {
+      updateState("refreshing", thresholdRef.current * 0.8);
+      try {
+        await onRefreshRef.current();
+        if (refreshingRefProp.current === void 0) {
+          const finalStatus = successRefProp.current ? "success" : "error";
+          updateState(finalStatus, thresholdRef.current * 0.8);
+          setTimeout(() => {
+            updateState(finalStatus, 0);
+            setTimeout(() => {
+              updateState("idle", 0);
+            }, 400);
+          }, 1e3);
+        }
+      } catch (err) {
+        if (refreshingRefProp.current === void 0) {
+          updateState("error", thresholdRef.current * 0.8);
+          setTimeout(() => {
+            updateState("error", 0);
+            setTimeout(() => {
+              updateState("idle", 0);
+            }, 400);
+          }, 1200);
+        }
+      }
+    } else {
+      updateState("idle", 0);
+    }
+  };
+  useEffect(() => {
+    if (refreshing === void 0) return;
+    if (refreshing) {
+      if (statusRef.current !== "refreshing") {
+        if (containerRef.current) {
+          containerRef.current.style.transition = "transform 400ms cubic-bezier(0.16, 1, 0.3, 1)";
+        }
+        if (indicatorRef.current) {
+          indicatorRef.current.style.transition = "height 400ms cubic-bezier(0.16, 1, 0.3, 1), opacity 400ms cubic-bezier(0.16, 1, 0.3, 1)";
+        }
+        updateState("refreshing", thresholdRef.current * 0.8);
+      }
+    } else {
+      if (statusRef.current === "refreshing") {
+        if (containerRef.current) {
+          containerRef.current.style.transition = "transform 400ms cubic-bezier(0.16, 1, 0.3, 1)";
+        }
+        if (indicatorRef.current) {
+          indicatorRef.current.style.transition = "height 400ms cubic-bezier(0.16, 1, 0.3, 1), opacity 400ms cubic-bezier(0.16, 1, 0.3, 1)";
+        }
+        const finalStatus = successRefProp.current ? "success" : "error";
+        updateState(finalStatus, thresholdRef.current * 0.8);
+        setTimeout(() => {
+          updateState(finalStatus, 0);
+          setTimeout(() => {
+            updateState("idle", 0);
+          }, 400);
+        }, 1e3);
+      }
+    }
+  }, [refreshing, success, threshold]);
+  const handleTouchMove = (e) => {
+    if (e.touches.length > 0) {
+      moveDrag(e.touches[0].pageX, e.touches[0].pageY, e);
+    }
+  };
+  const handleMouseMove = (e) => {
+    moveDrag(e.pageX, e.pageY, e);
+  };
+  const handleTouchEnd = () => {
+    endDrag();
+  };
+  const handleMouseUp = () => {
+    endDrag();
+  };
+  const bindListeners = () => {
+    window.addEventListener("touchmove", handleTouchMove, { passive: false });
+    window.addEventListener("touchend", handleTouchEnd);
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+  };
+  const unbindListeners = () => {
+    window.removeEventListener("touchmove", handleTouchMove);
+    window.removeEventListener("touchend", handleTouchEnd);
+    window.removeEventListener("mousemove", handleMouseMove);
+    window.removeEventListener("mouseup", handleMouseUp);
+  };
+  useEffect(() => {
+    return () => {
+      unbindListeners();
+    };
+  }, []);
+  const handleTouchStart = (e) => {
+    startDrag(e.touches[0].pageX, e.touches[0].pageY, e.target);
+  };
+  const handleMouseDown = (e) => {
+    if (e.button !== 0) return;
+    startDrag(e.pageX, e.pageY, e.target);
+  };
+  if (disabled) {
+    return /* @__PURE__ */ jsx("div", { className, 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, 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" })
+            ] }),
+            /* @__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,
+        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/render-in-view.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+function RenderInView({
+  children,
+  rootMargin = "0px",
+  threshold = 0,
+  once = true,
+  className,
+  pluginName,
+  ...props
+}) {
+  const ref = useRef(null);
+  const [visible, setVisible] = useState(false);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+          if (once) observer.disconnect();
+        } else if (!once) {
+          setVisible(false);
+        }
+      },
+      { rootMargin, threshold }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [rootMargin, threshold, once]);
+  return /* @__PURE__ */ jsx("div", { ...props, ref, "data-plugin": pluginName, className, children: visible ? children : null });
+}
+export {
+  RenderInView
+};

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

@@ -0,0 +1,163 @@
+import { jsx } from "react/jsx-runtime";
+import { useMediaQuery, SCREENS } from "../../hooks/use-mobile.js";
+import { useMobileBackDialog } from "../../hooks/use-mobile-back-dialog.js";
+import { createContext, forwardRef, useState, useImperativeHandle, useContext } from "react";
+import "@quan-erp/shared-frontend-core";
+import "../ui/accordion.js";
+import "../ui/alert.js";
+import "../ui/avatar.js";
+import "../ui/badge.js";
+import "../ui/breadcrumb.js";
+import "../ui/button-group.js";
+import "../ui/button.js";
+import "lucide-react";
+import "react-day-picker";
+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";
+import "../ui/checkbox.js";
+import "@radix-ui/react-collapsible";
+import "../ui/command.js";
+import "../ui/context-menu.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger } from "../ui/dialog.js";
+import "../ui/dropdown-menu.js";
+import "../ui/field.js";
+import "../ui/form.js";
+import "../ui/hover-card.js";
+import "../ui/input-group.js";
+import "../ui/input-otp.js";
+import "../ui/input.js";
+import "../ui/item.js";
+import "@radix-ui/react-label";
+import "../ui/menubar.js";
+import "../ui/navigation-menu.js";
+import "../ui/pagination.js";
+import "../ui/progress.js";
+import "../ui/radio-group.js";
+import "react-resizable-panels";
+import "../ui/scroll-area.js";
+import "@radix-ui/react-separator";
+import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetTitle, SheetTrigger } from "../ui/sheet.js";
+import "../ui/sidebar.js";
+import "../ui/slider.js";
+import "next-themes";
+import "sonner";
+import "../ui/spinner.js";
+import "../ui/switch.js";
+import "../ui/table.js";
+import "../ui/tabs.js";
+import "../ui/textarea.js";
+import "../ui/toggle-group.js";
+import "../ui/toggle.js";
+import "@radix-ui/react-tooltip";
+import "@radix-ui/react-alert-dialog";
+import "@radix-ui/react-dialog";
+import "uuid";
+const DesktopDialogType = {
+  SHEET: "SHEET",
+  DIALOG: "DIALOG"
+};
+const ResponsiveDialogContext = createContext(void 0);
+const useDialogType = () => {
+  const context = useContext(ResponsiveDialogContext);
+  if (!context) throw new Error("useDialogType must be used inside ResponsiveDialog");
+  return context;
+};
+const UncontrolledResponsiveDialog = forwardRef((props, ref) => {
+  const [open, setOpenChange] = useState(false);
+  useImperativeHandle(ref, () => {
+    return {
+      open: () => setOpenChange(true),
+      close: () => setOpenChange(false),
+      getStatus: () => open
+    };
+  });
+  return /* @__PURE__ */ jsx(ResponsiveDialog, { ...props, open, onOpenChange: setOpenChange });
+});
+function ResponsiveDialog({
+  open,
+  onOpenChange,
+  children,
+  trigger,
+  desktopDialogType = DesktopDialogType.DIALOG,
+  pluginName,
+  trackBrowserBack = true,
+  ...props
+}) {
+  const isMobile = useMediaQuery(SCREENS.md);
+  const type = isMobile ? "mobile" : "desktop";
+  useMobileBackDialog({ open, onOpenChange, enable: trackBrowserBack });
+  if (isMobile) {
+    return /* @__PURE__ */ jsx(ResponsiveDialogContext.Provider, { value: { type, desktopDialogType }, children: /* @__PURE__ */ jsx(Drawer, { open, "data-plugin": pluginName, onOpenChange, direction: "bottom", shouldScaleBackground: false, repositionInputs: false, ...props, children }) });
+  }
+  if (desktopDialogType === DesktopDialogType.DIALOG) {
+    return /* @__PURE__ */ jsx(ResponsiveDialogContext.Provider, { value: { type, desktopDialogType }, children: /* @__PURE__ */ jsx(Dialog, { open, "data-plugin": pluginName, onOpenChange, ...props, children }) });
+  }
+  return /* @__PURE__ */ jsx(ResponsiveDialogContext.Provider, { value: { type, desktopDialogType }, children: /* @__PURE__ */ jsx(Sheet, { open, "data-plugin": pluginName, onOpenChange, ...props, children }) });
+}
+function ResponsiveHeader({ children, pluginName, className }) {
+  const dialog = useDialogType();
+  if (dialog.type === "mobile") return /* @__PURE__ */ jsx(DrawerHeader, { "data-plugin": pluginName, className, children });
+  if (dialog.desktopDialogType == DesktopDialogType.DIALOG)
+    return /* @__PURE__ */ jsx(DialogHeader, { "data-plugin": pluginName, className, children });
+  return /* @__PURE__ */ jsx(SheetHeader, { "data-plugin": pluginName, className, children });
+}
+function ResponsiveTitle({ children, className, pluginName }) {
+  const dialog = useDialogType();
+  if (dialog.type === "mobile") return /* @__PURE__ */ jsx(DrawerTitle, { className, "data-plugin": pluginName, children });
+  if (dialog.desktopDialogType == DesktopDialogType.DIALOG)
+    return /* @__PURE__ */ jsx(DialogTitle, { className, "data-plugin": pluginName, children });
+  return /* @__PURE__ */ jsx(SheetTitle, { className, "data-plugin": pluginName, children });
+}
+function ResponsiveContent({ children, className, style, pluginName, showCloseButton }) {
+  const dialog = useDialogType();
+  if (dialog.type === "mobile") return /* @__PURE__ */ jsx(DrawerContent, { style, "data-plugin": pluginName, className: cn("shared:p-3 shared:rounded-t-3xl shared:cupertino-corner shared:fixed shared:bottom-0 shared:left-0 shared:right-0 shared:low-end-device:duration-0! shared:mid-device:duration-75! shared:low-end-device:animation-duration-[0s]! shared:mid-device:animation-duration-[100ms]!", className), children });
+  if (dialog.desktopDialogType == DesktopDialogType.DIALOG)
+    return /* @__PURE__ */ jsx(DialogContent, { style, className: cn("shared:low-end-device:duration-0! shared:mid-device:duration-75! shared:low-end-device:animation-duration-[0s]! shared:mid-device:animation-duration-[100ms]!", className), "data-plugin": pluginName, showCloseButton, children });
+  return /* @__PURE__ */ jsx(SheetContent, { style, className: cn("shared:low-end-device:duration-0! shared:mid-device:duration-75! shared:low-end-device:animation-duration-[0s]! shared:mid-device:animation-duration-[100ms]!", className), "data-plugin": pluginName, showCloseButton, children });
+}
+function ResponsiveTrigger({ children, className, pluginName }) {
+  const dialog = useDialogType();
+  if (dialog.type === "mobile") return /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, "data-plugin": pluginName, className, children });
+  if (dialog.desktopDialogType == DesktopDialogType.DIALOG)
+    return /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, "data-plugin": pluginName, className, children });
+  return /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, "data-plugin": pluginName, className, children });
+}
+function ResponsiveDescription({ children, className, pluginName }) {
+  const dialog = useDialogType();
+  if (dialog.type === "mobile") return /* @__PURE__ */ jsx(DrawerDescription, { className, children });
+  if (dialog.desktopDialogType == DesktopDialogType.DIALOG)
+    return /* @__PURE__ */ jsx(DialogDescription, { asChild: true, "data-plugin": pluginName, className, children });
+  return /* @__PURE__ */ jsx(SheetDescription, { asChild: true, "data-plugin": pluginName, className, children });
+}
+function ResponsiveFooter({ children, className, pluginName }) {
+  const dialog = useDialogType();
+  if (dialog.type === "mobile") return /* @__PURE__ */ jsx(DrawerFooter, { "data-plugin": pluginName, className, children });
+  if (dialog.desktopDialogType == DesktopDialogType.DIALOG)
+    return /* @__PURE__ */ jsx(DialogFooter, { "data-plugin": pluginName, className, children });
+  return /* @__PURE__ */ jsx(SheetFooter, { "data-plugin": pluginName, className, children });
+}
+function ResponsiveOverlay({ children, className, pluginName }) {
+  const dialog = useDialogType();
+  if (dialog.type === "mobile") return /* @__PURE__ */ jsx(DrawerOverlay, { "data-plugin": pluginName, className, children });
+  if (dialog.desktopDialogType == DesktopDialogType.DIALOG)
+    return /* @__PURE__ */ jsx(DialogOverlay, { "data-plugin": pluginName, className, children });
+  return /* @__PURE__ */ jsx(SheetOverlay, { "data-plugin": pluginName, className, children });
+}
+export {
+  DesktopDialogType,
+  ResponsiveContent,
+  ResponsiveDescription,
+  ResponsiveDialog,
+  ResponsiveFooter,
+  ResponsiveHeader,
+  ResponsiveOverlay,
+  ResponsiveTitle,
+  ResponsiveTrigger,
+  UncontrolledResponsiveDialog,
+  useDialogType
+};

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

@@ -0,0 +1,8 @@
+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 });
+}
+export {
+  SafeArea
+};