@stfrigerio/sito-template 0.1.80 → 0.1.81

package/dist/components/atoms/Modal/Modal.d.ts

@@ -18,44 +18,10 @@ export interface ModalProps {
     actions?: ReactNode;
     /** When true, the body is padded; when false, the body is flush to the edges */
     padding?: boolean;
+    /** How the modal renders on narrow viewports. `sheet` slides from the bottom; `center` stays centered. Defaults to `sheet`. */
+    mobileVariant?: 'sheet' | 'center';
+    /** When the modal is in sheet mode on mobile, allow the user to swipe the header down to dismiss. Defaults to true. */
+    draggable?: boolean;
 }
-/**
- * Modal Component
- *
- * @component
- * @description
- * An accessible overlay dialog with a backdrop, title header, optional
- * header actions, and a flexible body. Renders into a React portal on
- * `document.body`, animates in/out with Framer Motion, closes on Escape
- * key or backdrop click, and clicks inside the dialog don't propagate
- * to the backdrop.
- *
- * @example
- * // Basic usage
- * <Modal open={isOpen} title="Confirm" onClose={() => setIsOpen(false)}>
- *   <p>Are you sure?</p>
- * </Modal>
- *
- * @example
- * // With header actions and wide size
- * <Modal
- *   open={isOpen}
- *   title="Edit profile"
- *   size="wide"
- *   actions={<button onClick={save}>Save</button>}
- *   onClose={handleClose}
- * >
- *   <ProfileForm />
- * </Modal>
- *
- * @example
- * // Flush body (no padding) for editors and full-bleed content
- * <Modal open={isOpen} title="Document" padding={false} onClose={handleClose}>
- *   <DocEditor content={content} onSave={save} />
- * </Modal>
- *
- * @param {ModalProps} props - The props for the Modal component
- * @returns {React.ReactPortal | null} A portal rendering the modal, or null on the server
- */
 export declare const Modal: React.FC<ModalProps>;
 //# sourceMappingURL=Modal.d.ts.map

package/dist/components/atoms/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAMpD;;;GAGG;AACH,MAAM,WAAW,UAAU;IAC1B,6CAA6C;IAC7C,IAAI,EAAE,OAAO,CAAC;IACd,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,qGAAqG;IACrG,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,yBAAyB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,gGAAgG;IAChG,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IACtC,0FAA0F;IAC1F,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gFAAgF;IAChF,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAsEtC,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAMtE;;;GAGG;AACH,MAAM,WAAW,UAAU;IAC1B,6CAA6C;IAC7C,IAAI,EAAE,OAAO,CAAC;IACd,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,qGAAqG;IACrG,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,yBAAyB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,gGAAgG;IAChG,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IACtC,0FAA0F;IAC1F,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gFAAgF;IAChF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+HAA+H;IAC/H,aAAa,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACnC,uHAAuH;IACvH,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAqBD,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA+GtC,CAAC"}

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { motion, AnimatePresence, useMotionValue, useTransform, animate, LayoutGroup } from 'framer-motion';
+import { motion, AnimatePresence, useDragControls, useMotionValue, useTransform, animate, LayoutGroup } from 'framer-motion';
 import React, { useRef, useEffect, useCallback, useState, useMemo, createContext, useContext, Fragment as Fragment$1, memo } from 'react';
 import { createPortal } from 'react-dom';
 import { X, Calendar as Calendar$1, ChevronDown, Search, Check, Edit, Folder, Users, Book, MessageSquare, UserPlus, Sun, Moon, Info, Github, SquareKanban, ChevronRight, Plus, Loader2, AlertTriangle, Play, Brain, FolderSearch, FilePlus, Pencil, FileText, Terminal, Trash2, GripVertical, Download, Menu, ChevronLeft, Maximize, Share2, Pause } from 'lucide-react';
@@ -720,47 +720,29 @@ const EmptyState = ({ icon, title, message, action, size = 'default', }) => {
     return (jsxs("div", { className: wrapperClass, children: [icon && jsx("div", { className: styles$z.icon, children: icon }), title && jsx("h3", { className: styles$z.title, children: title }), jsx("p", { className: styles$z.message, children: message }), action && jsx("div", { className: styles$z.action, children: action })] }));
 };
 
-var styles$y = {"backdrop":"Modal-module_backdrop__yOx-a","dialog":"Modal-module_dialog__yEXTq","dialogCompact":"Modal-module_dialogCompact__z1Wxp","dialogWide":"Modal-module_dialogWide__9PTXK","header":"Modal-module_header__NHHKd","title":"Modal-module_title__i3R0x","headerActions":"Modal-module_headerActions__g28UN","closeButton":"Modal-module_closeButton__siC-1","body":"Modal-module_body__U7jvM","bodyFlush":"Modal-module_bodyFlush__wtk3q"};
+var styles$y = {"backdrop":"Modal-module_backdrop__yOx-a","dialog":"Modal-module_dialog__yEXTq","dialogCompact":"Modal-module_dialogCompact__z1Wxp","dialogWide":"Modal-module_dialogWide__9PTXK","header":"Modal-module_header__NHHKd","title":"Modal-module_title__i3R0x","headerActions":"Modal-module_headerActions__g28UN","closeButton":"Modal-module_closeButton__siC-1","body":"Modal-module_body__U7jvM","bodyFlush":"Modal-module_bodyFlush__wtk3q","backdropSheet":"Modal-module_backdropSheet__o9kW3","dialogSheet":"Modal-module_dialogSheet__EjpwP","grabBar":"Modal-module_grabBar__qhl9f"};
 
-/**
- * Modal Component
- *
- * @component
- * @description
- * An accessible overlay dialog with a backdrop, title header, optional
- * header actions, and a flexible body. Renders into a React portal on
- * `document.body`, animates in/out with Framer Motion, closes on Escape
- * key or backdrop click, and clicks inside the dialog don't propagate
- * to the backdrop.
- *
- * @example
- * // Basic usage
- * <Modal open={isOpen} title="Confirm" onClose={() => setIsOpen(false)}>
- *   <p>Are you sure?</p>
- * </Modal>
- *
- * @example
- * // With header actions and wide size
- * <Modal
- *   open={isOpen}
- *   title="Edit profile"
- *   size="wide"
- *   actions={<button onClick={save}>Save</button>}
- *   onClose={handleClose}
- * >
- *   <ProfileForm />
- * </Modal>
- *
- * @example
- * // Flush body (no padding) for editors and full-bleed content
- * <Modal open={isOpen} title="Document" padding={false} onClose={handleClose}>
- *   <DocEditor content={content} onSave={save} />
- * </Modal>
- *
- * @param {ModalProps} props - The props for the Modal component
- * @returns {React.ReactPortal | null} A portal rendering the modal, or null on the server
- */
-const Modal = ({ open, title, onClose, children, size = 'default', actions, padding = true, }) => {
+const MOBILE_BREAKPOINT = '(max-width: 640px)';
+const useIsMobile = () => {
+    const [isMobile, setIsMobile] = useState(() => {
+        if (typeof window === 'undefined')
+            return false;
+        return window.matchMedia(MOBILE_BREAKPOINT).matches;
+    });
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const mq = window.matchMedia(MOBILE_BREAKPOINT);
+        const onChange = (e) => setIsMobile(e.matches);
+        mq.addEventListener('change', onChange);
+        return () => mq.removeEventListener('change', onChange);
+    }, []);
+    return isMobile;
+};
+const Modal = ({ open, title, onClose, children, size = 'default', actions, padding = true, mobileVariant = 'sheet', draggable = true, }) => {
+    const isMobile = useIsMobile();
+    const dragControls = useDragControls();
+    const headerRef = useRef(null);
     useEffect(() => {
         if (!open)
             return;
@@ -773,14 +755,38 @@ const Modal = ({ open, title, onClose, children, size = 'default', actions, padd
     }, [open, onClose]);
     if (typeof document === 'undefined')
         return null;
+    const isSheet = mobileVariant === 'sheet' && isMobile;
+    const isDraggable = isSheet && draggable;
+    const backdropClass = [styles$y.backdrop, isSheet && styles$y.backdropSheet]
+        .filter(Boolean)
+        .join(' ');
     const dialogClass = [
         styles$y.dialog,
         size === 'compact' && styles$y.dialogCompact,
         size === 'wide' && styles$y.dialogWide,
+        isSheet && styles$y.dialogSheet,
     ]
         .filter(Boolean)
         .join(' ');
-    return createPortal(jsx(AnimatePresence, { children: open && (jsx(motion.div, { className: styles$y.backdrop, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, onClick: onClose, "aria-hidden": "true", children: jsxs(motion.div, { className: dialogClass, role: "dialog", "aria-modal": "true", "aria-label": title, initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, exit: { opacity: 0, scale: 0.96, y: 8 }, transition: { duration: 0.15, ease: 'easeOut' }, onClick: (e) => e.stopPropagation(), children: [jsxs("div", { className: styles$y.header, children: [jsx("span", { className: styles$y.title, children: title }), actions && jsx("div", { className: styles$y.headerActions, children: actions }), jsx("button", { className: styles$y.closeButton, onClick: onClose, "aria-label": "Close modal", type: "button", children: jsx(X, { size: 16 }) })] }), jsx("div", { className: padding ? styles$y.body : styles$y.bodyFlush, children: children })] }) })) }), document.body);
+    const enteringAnimation = isSheet
+        ? { initial: { y: '100%' }, animate: { y: 0 }, exit: { y: '100%' } }
+        : {
+            initial: { opacity: 0, scale: 0.96, y: 8 },
+            animate: { opacity: 1, scale: 1, y: 0 },
+            exit: { opacity: 0, scale: 0.96, y: 8 },
+        };
+    return createPortal(jsx(AnimatePresence, { children: open && (jsx(motion.div, { className: backdropClass, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, onClick: onClose, "aria-hidden": "true", children: jsxs(motion.div, { className: dialogClass, role: "dialog", "aria-modal": "true", "aria-label": title, ...enteringAnimation, transition: isSheet
+                    ? { type: 'spring', stiffness: 320, damping: 32 }
+                    : { duration: 0.15, ease: 'easeOut' }, onClick: (e) => e.stopPropagation(), drag: isDraggable ? 'y' : false, dragControls: isDraggable ? dragControls : undefined, dragConstraints: { top: 0 }, dragElastic: { top: 0, bottom: 0.3 }, dragListener: false, onDragEnd: (_, info) => {
+                    if (info.offset.y > 80)
+                        onClose();
+                }, children: [isSheet && jsx("div", { className: styles$y.grabBar }), jsxs("div", { ref: headerRef, className: styles$y.header, onPointerDown: (e) => {
+                            if (!isDraggable)
+                                return;
+                            if (e.target.closest('button'))
+                                return;
+                            dragControls.start(e);
+                        }, children: [jsx("span", { className: styles$y.title, children: title }), actions && jsx("div", { className: styles$y.headerActions, children: actions }), jsx("button", { className: styles$y.closeButton, onClick: onClose, "aria-label": "Close modal", type: "button", children: jsx(X, { size: 16 }) })] }), jsx("div", { className: padding ? styles$y.body : styles$y.bodyFlush, children: children })] }) })) }), document.body);
 };
 
 var styles$x = {"checkboxLabel":"Checkbox-module_checkboxLabel__4tBVg","checkbox":"Checkbox-module_checkbox__BbJul","checkboxText":"Checkbox-module_checkboxText__oJsc9"};