@jackcrane/ui 0.1.18 → 0.1.19

package/dist/components/jcui/provider.d.ts

@@ -1,6 +1,7 @@
-export function JCUIProvider({ children, theme: initialTheme, className, ...props }: {
+export function JCUIProvider({ children, theme: initialTheme, modalMobileBreakpoint, className, ...props }: {
     [x: string]: any;
     children: any;
     theme?: string;
+    modalMobileBreakpoint?: number;
     className: any;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/jcui.cjs.js

@@ -1592,7 +1592,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   --button-color: var(--body-color);
 }
 /* modal.module.css */
-@keyframes _overlayIn_3g5sg_1 {
+@keyframes _overlayIn_1fxeg_1 {
   from {
     opacity: 0;
   }
@@ -1600,7 +1600,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     opacity: 1;
   }
 }
-@keyframes _overlayOut_3g5sg_1 {
+@keyframes _overlayOut_1fxeg_1 {
   from {
     opacity: 1;
   }
@@ -1608,7 +1608,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     opacity: 0;
   }
 }
-@keyframes _panelIn_3g5sg_1 {
+@keyframes _panelIn_1fxeg_1 {
   from {
     opacity: 0;
     transform: translateX(400px);
@@ -1618,7 +1618,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     transform: translateX(0);
   }
 }
-@keyframes _panelOut_3g5sg_1 {
+@keyframes _panelOut_1fxeg_1 {
   from {
     opacity: 1;
     transform: translateX(0);
@@ -1628,23 +1628,23 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     transform: translateX(100%);
   }
 }
-._overlay_3g5sg_43 {
+._overlay_1fxeg_43 {
   position: fixed;
   inset: 0;
   z-index: 98;
 }
-._overlayBackdrop_3g5sg_49 {
+._overlayBackdrop_1fxeg_49 {
   position: absolute;
   inset: 0;
   background: color-mix(in srgb, var(--body-bg) 50%, transparent);
 }
-._overlay_3g5sg_43[data-state="open"] {
-  animation: _overlayIn_3g5sg_1 160ms ease-out;
+._overlay_1fxeg_43[data-state="open"] {
+  animation: _overlayIn_1fxeg_1 160ms ease-out;
 }
-._overlay_3g5sg_43[data-state="closed"] {
-  animation: _overlayOut_3g5sg_1 120ms ease-in;
+._overlay_1fxeg_43[data-state="closed"] {
+  animation: _overlayOut_1fxeg_1 120ms ease-in;
 }
-._content_3g5sg_63 {
+._content_1fxeg_63 {
   position: fixed;
   top: 10px;
   right: 10px;
@@ -1657,22 +1657,29 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   display: flex;
   flex-direction: column;
 }
-._content_3g5sg_63[data-state="open"] {
-  animation: _panelIn_3g5sg_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_1fxeg_63[data-state="open"] {
+  animation: _panelIn_1fxeg_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-._content_3g5sg_63[data-state="closed"] {
-  animation: _panelOut_3g5sg_1 140ms ease-in;
+._content_1fxeg_63[data-state="closed"] {
+  animation: _panelOut_1fxeg_1 140ms ease-in;
 }
-._title_3g5sg_88 {
+body.jcui-modal-mobile ._content_1fxeg_63 {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  min-width: 0;
+}
+._title_1fxeg_96 {
   margin: 0;
 }
-._body_3g5sg_92 {
+._body_1fxeg_100 {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
   padding-top: 1rem;
 }
-._footer_3g5sg_99 {
+._footer_1fxeg_107 {
   margin: -12px;
   margin-top: 0px;
   padding: 12px;
@@ -27814,12 +27821,12 @@ var Overlay = DialogOverlay;
 var Content = DialogContent;
 var Title = DialogTitle;
 var Close = DialogClose;
-const overlay = "_overlay_3g5sg_43";
-const overlayBackdrop = "_overlayBackdrop_3g5sg_49";
-const content$1 = "_content_3g5sg_63";
-const title = "_title_3g5sg_88";
-const body = "_body_3g5sg_92";
-const footer = "_footer_3g5sg_99";
+const overlay = "_overlay_1fxeg_43";
+const overlayBackdrop = "_overlayBackdrop_1fxeg_49";
+const content$1 = "_content_1fxeg_63";
+const title = "_title_1fxeg_96";
+const body = "_body_1fxeg_100";
+const footer = "_footer_1fxeg_107";
 const styles$1 = {
   overlay,
   overlayBackdrop,
@@ -27907,6 +27914,7 @@ const global = {
 const JCUIProvider = ({
   children: children2,
   theme: initialTheme = DEFAULT_THEME,
+  modalMobileBreakpoint = 600,
   className,
   ...props
 }) => {
@@ -27926,6 +27934,26 @@ const JCUIProvider = ({
       body2.classList.remove(themeClass, globalClass);
     };
   }, [themeClass, globalClass]);
+  React.useEffect(() => {
+    if (typeof document === "undefined" || typeof window === "undefined") {
+      return void 0;
+    }
+    const body2 = document.body;
+    const parsedBreakpoint = Number(modalMobileBreakpoint);
+    const breakpoint = Number.isFinite(parsedBreakpoint) && parsedBreakpoint > 0 ? parsedBreakpoint : 600;
+    const updateModalMobileState = () => {
+      const isMobile = window.innerWidth <= breakpoint;
+      body2.classList.toggle("jcui-modal-mobile", isMobile);
+      body2.style.setProperty("--jcui-modal-mobile-breakpoint", `${breakpoint}px`);
+    };
+    updateModalMobileState();
+    window.addEventListener("resize", updateModalMobileState);
+    return () => {
+      window.removeEventListener("resize", updateModalMobileState);
+      body2.classList.remove("jcui-modal-mobile");
+      body2.style.removeProperty("--jcui-modal-mobile-breakpoint");
+    };
+  }, [modalMobileBreakpoint]);
   const contextValue = React.useMemo(() => ({ theme, setTheme }), [theme]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",

package/dist/jcui.es.js

@@ -1592,7 +1592,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   --button-color: var(--body-color);
 }
 /* modal.module.css */
-@keyframes _overlayIn_3g5sg_1 {
+@keyframes _overlayIn_1fxeg_1 {
   from {
     opacity: 0;
   }
@@ -1600,7 +1600,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     opacity: 1;
   }
 }
-@keyframes _overlayOut_3g5sg_1 {
+@keyframes _overlayOut_1fxeg_1 {
   from {
     opacity: 1;
   }
@@ -1608,7 +1608,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     opacity: 0;
   }
 }
-@keyframes _panelIn_3g5sg_1 {
+@keyframes _panelIn_1fxeg_1 {
   from {
     opacity: 0;
     transform: translateX(400px);
@@ -1618,7 +1618,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     transform: translateX(0);
   }
 }
-@keyframes _panelOut_3g5sg_1 {
+@keyframes _panelOut_1fxeg_1 {
   from {
     opacity: 1;
     transform: translateX(0);
@@ -1628,23 +1628,23 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     transform: translateX(100%);
   }
 }
-._overlay_3g5sg_43 {
+._overlay_1fxeg_43 {
   position: fixed;
   inset: 0;
   z-index: 98;
 }
-._overlayBackdrop_3g5sg_49 {
+._overlayBackdrop_1fxeg_49 {
   position: absolute;
   inset: 0;
   background: color-mix(in srgb, var(--body-bg) 50%, transparent);
 }
-._overlay_3g5sg_43[data-state="open"] {
-  animation: _overlayIn_3g5sg_1 160ms ease-out;
+._overlay_1fxeg_43[data-state="open"] {
+  animation: _overlayIn_1fxeg_1 160ms ease-out;
 }
-._overlay_3g5sg_43[data-state="closed"] {
-  animation: _overlayOut_3g5sg_1 120ms ease-in;
+._overlay_1fxeg_43[data-state="closed"] {
+  animation: _overlayOut_1fxeg_1 120ms ease-in;
 }
-._content_3g5sg_63 {
+._content_1fxeg_63 {
   position: fixed;
   top: 10px;
   right: 10px;
@@ -1657,22 +1657,29 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   display: flex;
   flex-direction: column;
 }
-._content_3g5sg_63[data-state="open"] {
-  animation: _panelIn_3g5sg_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_1fxeg_63[data-state="open"] {
+  animation: _panelIn_1fxeg_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-._content_3g5sg_63[data-state="closed"] {
-  animation: _panelOut_3g5sg_1 140ms ease-in;
+._content_1fxeg_63[data-state="closed"] {
+  animation: _panelOut_1fxeg_1 140ms ease-in;
 }
-._title_3g5sg_88 {
+body.jcui-modal-mobile ._content_1fxeg_63 {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  min-width: 0;
+}
+._title_1fxeg_96 {
   margin: 0;
 }
-._body_3g5sg_92 {
+._body_1fxeg_100 {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
   padding-top: 1rem;
 }
-._footer_3g5sg_99 {
+._footer_1fxeg_107 {
   margin: -12px;
   margin-top: 0px;
   padding: 12px;
@@ -27796,12 +27803,12 @@ var Overlay = DialogOverlay;
 var Content = DialogContent;
 var Title = DialogTitle;
 var Close = DialogClose;
-const overlay = "_overlay_3g5sg_43";
-const overlayBackdrop = "_overlayBackdrop_3g5sg_49";
-const content$1 = "_content_3g5sg_63";
-const title = "_title_3g5sg_88";
-const body = "_body_3g5sg_92";
-const footer = "_footer_3g5sg_99";
+const overlay = "_overlay_1fxeg_43";
+const overlayBackdrop = "_overlayBackdrop_1fxeg_49";
+const content$1 = "_content_1fxeg_63";
+const title = "_title_1fxeg_96";
+const body = "_body_1fxeg_100";
+const footer = "_footer_1fxeg_107";
 const styles$1 = {
   overlay,
   overlayBackdrop,
@@ -27889,6 +27896,7 @@ const global$1 = {
 const JCUIProvider = ({
   children: children2,
   theme: initialTheme = DEFAULT_THEME,
+  modalMobileBreakpoint = 600,
   className,
   ...props
 }) => {
@@ -27908,6 +27916,26 @@ const JCUIProvider = ({
       body2.classList.remove(themeClass, globalClass);
     };
   }, [themeClass, globalClass]);
+  useEffect(() => {
+    if (typeof document === "undefined" || typeof window === "undefined") {
+      return void 0;
+    }
+    const body2 = document.body;
+    const parsedBreakpoint = Number(modalMobileBreakpoint);
+    const breakpoint = Number.isFinite(parsedBreakpoint) && parsedBreakpoint > 0 ? parsedBreakpoint : 600;
+    const updateModalMobileState = () => {
+      const isMobile = window.innerWidth <= breakpoint;
+      body2.classList.toggle("jcui-modal-mobile", isMobile);
+      body2.style.setProperty("--jcui-modal-mobile-breakpoint", `${breakpoint}px`);
+    };
+    updateModalMobileState();
+    window.addEventListener("resize", updateModalMobileState);
+    return () => {
+      window.removeEventListener("resize", updateModalMobileState);
+      body2.classList.remove("jcui-modal-mobile");
+      body2.style.removeProperty("--jcui-modal-mobile-breakpoint");
+    };
+  }, [modalMobileBreakpoint]);
   const contextValue = useMemo(() => ({ theme, setTheme }), [theme]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jackcrane/ui",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "type": "module",
   "sideEffects": false,
   "main": "dist/jcui.cjs.js",