@optilogic/core 1.4.0 → 1.5.0

package/dist/index.d.cts

@@ -1021,6 +1021,20 @@ interface ModalProps {
      * `"w-[80vw] max-w-none"`.
      */
     contentClassName?: string;
+    /**
+     * Opt into mobile-friendly rendering. When `true`, the modal renders full-
+     * screen (no border, no rounded corners, fills the viewport) under
+     * `@media (pointer: coarse) and (hover: none)` — i.e. on touch devices
+     * without hover. On desktop / hybrid input devices the named `size` is
+     * preserved. Default: `false`.
+     */
+    responsive?: boolean;
+    /**
+     * Force mobile (full-screen) rendering regardless of device. Useful for
+     * Storybook, manual QA, and the rare case where sheet-style rendering is
+     * desired on desktop. Overrides `responsive`. Default: `false`.
+     */
+    forceMobile?: boolean;
 }
 /**
  * Modal component
@@ -1052,8 +1066,20 @@ interface ModalProps {
  * >
  *   ...
  * </Modal>
+ *
+ * @example
+ * // Full-screen on mobile (touch devices), `lg` width on desktop
+ * <Modal
+ *   isOpen={open}
+ *   onClose={() => setOpen(false)}
+ *   title="New Database"
+ *   size="lg"
+ *   responsive
+ * >
+ *   ...
+ * </Modal>
  */
-declare function Modal({ isOpen, onClose, title, children, footer, size, zIndex, className, contentClassName, }: ModalProps): react_jsx_runtime.JSX.Element | null;
+declare function Modal({ isOpen, onClose, title, children, footer, size, zIndex, className, contentClassName, responsive, forceMobile, }: ModalProps): react_jsx_runtime.JSX.Element | null;
 /**
  * ModalButton component
  * @deprecated Use Button component from @optilogic/core instead

package/dist/index.d.ts

@@ -1021,6 +1021,20 @@ interface ModalProps {
      * `"w-[80vw] max-w-none"`.
      */
     contentClassName?: string;
+    /**
+     * Opt into mobile-friendly rendering. When `true`, the modal renders full-
+     * screen (no border, no rounded corners, fills the viewport) under
+     * `@media (pointer: coarse) and (hover: none)` — i.e. on touch devices
+     * without hover. On desktop / hybrid input devices the named `size` is
+     * preserved. Default: `false`.
+     */
+    responsive?: boolean;
+    /**
+     * Force mobile (full-screen) rendering regardless of device. Useful for
+     * Storybook, manual QA, and the rare case where sheet-style rendering is
+     * desired on desktop. Overrides `responsive`. Default: `false`.
+     */
+    forceMobile?: boolean;
 }
 /**
  * Modal component
@@ -1052,8 +1066,20 @@ interface ModalProps {
  * >
  *   ...
  * </Modal>
+ *
+ * @example
+ * // Full-screen on mobile (touch devices), `lg` width on desktop
+ * <Modal
+ *   isOpen={open}
+ *   onClose={() => setOpen(false)}
+ *   title="New Database"
+ *   size="lg"
+ *   responsive
+ * >
+ *   ...
+ * </Modal>
  */
-declare function Modal({ isOpen, onClose, title, children, footer, size, zIndex, className, contentClassName, }: ModalProps): react_jsx_runtime.JSX.Element | null;
+declare function Modal({ isOpen, onClose, title, children, footer, size, zIndex, className, contentClassName, responsive, forceMobile, }: ModalProps): react_jsx_runtime.JSX.Element | null;
 /**
  * ModalButton component
  * @deprecated Use Button component from @optilogic/core instead

package/dist/index.js

@@ -2092,7 +2092,9 @@ function Modal({
   size = "md",
   zIndex = 50,
   className,
-  contentClassName
+  contentClassName,
+  responsive = false,
+  forceMobile = false
 }) {
   React20.useEffect(() => {
     if (!isOpen) return;
@@ -2123,10 +2125,18 @@ function Modal({
     "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__ */ 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: [
@@ -2140,6 +2150,8 @@ function Modal({
               "flex flex-col",
               "max-h-[90vh]",
               sizeClasses[size],
+              responsive && responsiveFrame,
+              forceMobile && forcedFrame,
               contentClassName
             ),
             onClick: (e) => e.stopPropagation(),
@@ -2185,6 +2197,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,
@@ -2204,18 +2237,28 @@ function ConfirmationModal({
     onConfirm();
     onOpenChange(false);
   };
-  return /* @__PURE__ */ jsx(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
+  return /* @__PURE__ */ jsx(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(AlertDialogContent, { className: mobileSheetContentClasses, children: [
     /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
       /* @__PURE__ */ jsx(AlertDialogTitle, { children: title }),
       /* @__PURE__ */ jsx(AlertDialogDescription, { children: description })
     ] }),
-    /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
-      /* @__PURE__ */ jsx(AlertDialogCancel, { onClick: handleCancel, children: cancelLabel }),
+    /* @__PURE__ */ jsxs(AlertDialogFooter, { className: mobileSheetFooterClasses, children: [
+      /* @__PURE__ */ jsx(
+        AlertDialogCancel,
+        {
+          onClick: handleCancel,
+          className: mobileSheetActionClasses,
+          children: cancelLabel
+        }
+      ),
       /* @__PURE__ */ 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
         }
       )