@optilogic/core 1.3.7 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optilogic/core",
-  "version": "1.3.7",
+  "version": "1.5.0",
   "description": "Core UI components for Optilogic - A professional React component library",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/components/confirmation-modal.tsx

@@ -11,6 +11,35 @@ import {
   AlertDialogTitle,
 } from "./alert-dialog";
 
+// On touch devices (no hover), AlertDialog's centered card competes with
+// thumb reach and the action buttons are too small. Under
+// `@media (pointer: coarse) and (hover: none)` we re-anchor the dialog to
+// the bottom edge of the screen, full-width, with safe-area-aware padding
+// and a stacked, taller button row.
+const 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(" ");
+
+const 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(" ");
+
+const mobileSheetActionClasses = [
+  "[@media(pointer:coarse)and(hover:none)]:!w-full",
+  "[@media(pointer:coarse)and(hover:none)]:!min-h-11",
+].join(" ");
+
 export interface ConfirmationModalProps {
   /** Whether the modal is open */
   open: boolean;
@@ -71,22 +100,28 @@ export function ConfirmationModal({
 
   return (
     <AlertDialog open={open} onOpenChange={onOpenChange}>
-      <AlertDialogContent>
+      <AlertDialogContent className={mobileSheetContentClasses}>
         <AlertDialogHeader>
           <AlertDialogTitle>{title}</AlertDialogTitle>
           <AlertDialogDescription>{description}</AlertDialogDescription>
         </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel onClick={handleCancel}>
+        <AlertDialogFooter className={mobileSheetFooterClasses}>
+          <AlertDialogCancel
+            onClick={handleCancel}
+            className={mobileSheetActionClasses}
+          >
             {cancelLabel}
           </AlertDialogCancel>
           <AlertDialogAction
             onClick={handleConfirm}
-            className={
+            className={[
               destructive
                 ? "bg-destructive text-destructive-foreground hover:bg-destructive/90"
-                : undefined
-            }
+                : "",
+              mobileSheetActionClasses,
+            ]
+              .filter(Boolean)
+              .join(" ")}
           >
             {confirmLabel}
           </AlertDialogAction>

package/src/components/modal.tsx

@@ -31,9 +31,10 @@ export interface ModalProps {
   footer?: React.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)
@@ -41,9 +42,33 @@ export interface ModalProps {
   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;
 }
 
 /**
@@ -65,6 +90,29 @@ export 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>
  */
 export function Modal({
   isOpen,
@@ -75,6 +123,9 @@ export function Modal({
   size = "md",
   zIndex = 50,
   className,
+  contentClassName,
+  responsive = false,
+  forceMobile = false,
 }: ModalProps) {
   React.useEffect(() => {
     if (!isOpen) return;
@@ -107,11 +158,36 @@ export function Modal({
     sm: "max-w-md",
     md: "max-w-lg",
     lg: "max-w-2xl",
+    xl: "max-w-4xl",
+    "2xl": "max-w-6xl",
+    full: "max-w-[95vw]",
   };
 
+  // Mobile rendering: full-screen, no chrome. Applied via media query when
+  // `responsive` is on, or unconditionally when `forceMobile` is on. The `!`
+  // important modifier ensures the mobile values win over the base utilities
+  // (`p-4`, `rounded-lg`, `border`, `max-w-*`, `max-h-[90vh]`) regardless of
+  // class ordering in the generated stylesheet.
+  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 (
     <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}
     >
@@ -123,7 +199,10 @@ export 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()}
       >