@optilogic/core 1.4.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optilogic/core",
-  "version": "1.4.0",
+  "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

@@ -53,6 +53,22 @@ export 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;
 }
 
 /**
@@ -85,6 +101,18 @@ export 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>
  */
 export function Modal({
   isOpen,
@@ -96,6 +124,8 @@ export function Modal({
   zIndex = 50,
   className,
   contentClassName,
+  responsive = false,
+  forceMobile = false,
 }: ModalProps) {
   React.useEffect(() => {
     if (!isOpen) return;
@@ -133,9 +163,31 @@ export function Modal({
     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}
     >
@@ -148,6 +200,8 @@ export function Modal({
           "flex flex-col",
           "max-h-[90vh]",
           sizeClasses[size],
+          responsive && responsiveFrame,
+          forceMobile && forcedFrame,
           contentClassName
         )}
         onClick={(e) => e.stopPropagation()}