@optilogic/core 1.3.7 → 1.5.0

package/dist/index.d.cts

@@ -1002,17 +1002,39 @@ interface ModalProps {
      */
     footer?: React$1.ReactNode;
     /**
-     * Size variant
+     * Size variant. Maps to a `max-width` on the modal frame. For arbitrary
+     * widths, use `contentClassName` to override.
      */
-    size?: "sm" | "md" | "lg";
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
     /**
      * Z-index for stacking modals (default: 50)
      */
     zIndex?: number;
     /**
-     * Additional class names for modal content
+     * Additional class names for the modal body (the scrollable content area).
      */
     className?: string;
+    /**
+     * Additional class names for the modal frame (the outer card containing
+     * header, body, and footer). Merges with the `size` class — pass width
+     * utilities here to override the named size, e.g. `"max-w-[1200px]"` or
+     * `"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
@@ -1033,8 +1055,31 @@ interface ModalProps {
  *     <Button variant="primary" onClick={handleConfirm}>Confirm</Button>
  *   </footer>
  * </Modal>
+ *
+ * @example
+ * // Custom width override
+ * <Modal
+ *   isOpen={open}
+ *   onClose={() => setOpen(false)}
+ *   title="Report"
+ *   contentClassName="max-w-[1200px]"
+ * >
+ *   ...
+ * </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, }: 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

@@ -1002,17 +1002,39 @@ interface ModalProps {
      */
     footer?: React$1.ReactNode;
     /**
-     * Size variant
+     * Size variant. Maps to a `max-width` on the modal frame. For arbitrary
+     * widths, use `contentClassName` to override.
      */
-    size?: "sm" | "md" | "lg";
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
     /**
      * Z-index for stacking modals (default: 50)
      */
     zIndex?: number;
     /**
-     * Additional class names for modal content
+     * Additional class names for the modal body (the scrollable content area).
      */
     className?: string;
+    /**
+     * Additional class names for the modal frame (the outer card containing
+     * header, body, and footer). Merges with the `size` class — pass width
+     * utilities here to override the named size, e.g. `"max-w-[1200px]"` or
+     * `"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
@@ -1033,8 +1055,31 @@ interface ModalProps {
  *     <Button variant="primary" onClick={handleConfirm}>Confirm</Button>
  *   </footer>
  * </Modal>
+ *
+ * @example
+ * // Custom width override
+ * <Modal
+ *   isOpen={open}
+ *   onClose={() => setOpen(false)}
+ *   title="Report"
+ *   contentClassName="max-w-[1200px]"
+ * >
+ *   ...
+ * </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, }: 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

@@ -2091,7 +2091,10 @@ function Modal({
   footer,
   size = "md",
   zIndex = 50,
-  className
+  className,
+  contentClassName,
+  responsive = false,
+  forceMobile = false
 }) {
   React20.useEffect(() => {
     if (!isOpen) return;
@@ -2117,12 +2120,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__ */ 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: [
@@ -2135,7 +2149,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: [
@@ -2180,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,
@@ -2199,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
         }
       )