@optilogic/core 1.3.7 → 1.5.0

package/dist/index.cjs

@@ -2128,7 +2128,10 @@ function Modal({
   footer,
   size = "md",
   zIndex = 50,
-  className
+  className,
+  contentClassName,
+  responsive = false,
+  forceMobile = false
 }) {
   React20__namespace.useEffect(() => {
     if (!isOpen) return;
@@ -2154,12 +2157,23 @@ function Modal({
   const sizeClasses = {
     sm: "max-w-md",
     md: "max-w-lg",
-    lg: "max-w-2xl"
+    lg: "max-w-2xl",
+    xl: "max-w-4xl",
+    "2xl": "max-w-6xl",
+    full: "max-w-[95vw]"
   };
+  const responsiveOuter = "[@media(pointer:coarse)and(hover:none)]:!p-0";
+  const responsiveFrame = "[@media(pointer:coarse)and(hover:none)]:!w-screen [@media(pointer:coarse)and(hover:none)]:!h-[100dvh] [@media(pointer:coarse)and(hover:none)]:!max-h-[100dvh] [@media(pointer:coarse)and(hover:none)]:!max-w-none [@media(pointer:coarse)and(hover:none)]:!rounded-none [@media(pointer:coarse)and(hover:none)]:!border-0";
+  const forcedOuter = "!p-0";
+  const forcedFrame = "!w-screen !h-[100dvh] !max-h-[100dvh] !max-w-none !rounded-none !border-0";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "fixed inset-0 flex items-center justify-center p-4",
+      className: cn(
+        "fixed inset-0 flex items-center justify-center p-4",
+        responsive && responsiveOuter,
+        forceMobile && forcedOuter
+      ),
       style: { zIndex },
       onClick: onClose,
       children: [
@@ -2172,7 +2186,10 @@ function Modal({
               "bg-card border border-border rounded-lg shadow-lg",
               "flex flex-col",
               "max-h-[90vh]",
-              sizeClasses[size]
+              sizeClasses[size],
+              responsive && responsiveFrame,
+              forceMobile && forcedFrame,
+              contentClassName
             ),
             onClick: (e) => e.stopPropagation(),
             children: [
@@ -2217,6 +2234,27 @@ function ModalButton({
     }
   );
 }
+var mobileSheetContentClasses = [
+  "[@media(pointer:coarse)and(hover:none)]:!top-auto",
+  "[@media(pointer:coarse)and(hover:none)]:!bottom-0",
+  "[@media(pointer:coarse)and(hover:none)]:!left-0",
+  "[@media(pointer:coarse)and(hover:none)]:!translate-x-0",
+  "[@media(pointer:coarse)and(hover:none)]:!translate-y-0",
+  "[@media(pointer:coarse)and(hover:none)]:!w-screen",
+  "[@media(pointer:coarse)and(hover:none)]:!max-w-none",
+  "[@media(pointer:coarse)and(hover:none)]:!rounded-t-xl",
+  "[@media(pointer:coarse)and(hover:none)]:!rounded-b-none",
+  "[@media(pointer:coarse)and(hover:none)]:!pb-[calc(1.5rem+env(safe-area-inset-bottom))]"
+].join(" ");
+var mobileSheetFooterClasses = [
+  // Stack buttons full-width with comfortable tap targets on touch devices.
+  "[@media(pointer:coarse)and(hover:none)]:!flex-col",
+  "[@media(pointer:coarse)and(hover:none)]:!gap-2"
+].join(" ");
+var mobileSheetActionClasses = [
+  "[@media(pointer:coarse)and(hover:none)]:!w-full",
+  "[@media(pointer:coarse)and(hover:none)]:!min-h-11"
+].join(" ");
 function ConfirmationModal({
   open,
   onOpenChange,
@@ -2236,18 +2274,28 @@ function ConfirmationModal({
     onConfirm();
     onOpenChange(false);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogContent, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogContent, { className: mobileSheetContentClasses, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogHeader, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(AlertDialogTitle, { children: title }),
       /* @__PURE__ */ jsxRuntime.jsx(AlertDialogDescription, { children: description })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogFooter, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(AlertDialogCancel, { onClick: handleCancel, children: cancelLabel }),
+    /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogFooter, { className: mobileSheetFooterClasses, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AlertDialogCancel,
+        {
+          onClick: handleCancel,
+          className: mobileSheetActionClasses,
+          children: cancelLabel
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(
         AlertDialogAction,
         {
           onClick: handleConfirm,
-          className: destructive ? "bg-destructive text-destructive-foreground hover:bg-destructive/90" : void 0,
+          className: [
+            destructive ? "bg-destructive text-destructive-foreground hover:bg-destructive/90" : "",
+            mobileSheetActionClasses
+          ].filter(Boolean).join(" "),
           children: confirmLabel
         }
       )