@jackcrane/ui 0.1.18 → 0.1.20

package/dist/components/Card/card.d.ts

@@ -1,9 +1,10 @@
-export default function Card({ children, variant, chamfer, size, footerHeight, footer, title, ...props }: {
+export default function Card({ children, variant, chamfer, size, collapsed, footerHeight, footer, title, ...props }: {
     [x: string]: any;
     children: any;
     variant: any;
     chamfer?: boolean;
     size: any;
+    collapsed: any;
     footerHeight?: number;
     footer: any;
     title: any;

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

@@ -1,4 +1,4 @@
-(function(){"use strict";try{if(typeof document!="undefined"){var r=document.createElement("style");r.appendChild(document.createTextNode(`@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");@property --button-bg {
+(function(){"use strict";try{if(typeof document!="undefined"){var n=document.createElement("style");n.appendChild(document.createTextNode(`@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");@property --button-bg {
   syntax: "<color>";
   inherits: true;
   initial-value: transparent;
@@ -217,7 +217,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     transform: rotate(360deg);
   }
 }
-._card_et6fi_1 {
+._card_1db6q_1 {
   border-width: var(--border-thickness);
   border-style: solid;
   font-size: 1rem;
@@ -226,70 +226,110 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   display: flex;
   flex-direction: column;
 }
-._pageBackground_et6fi_11 {
+._pageBackground_1db6q_11 {
   --card-bg: var(--body-bg);
   --button-bg: var(--body-bg);
   --card-color: var(--body-color);
   background-color: var(--body-bg);
 }
-._card_et6fi_1 ._title_et6fi_18 {
+._card_1db6q_1 ._title_1db6q_18 {
   font-size: 1.25rem;
   padding: 0.5rem 1rem;
   border-bottom: var(--border-thickness) solid var(--border-color);
   background-color: var(--card-bg);
 }
-._card_et6fi_1 ._body_et6fi_25 {
+._card_1db6q_1 ._titleCollapsed_1db6q_25 {
+  border-bottom: 0;
+}
+._card_1db6q_1 ._titleContent_1db6q_29 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+._card_1db6q_1 ._chevron_1db6q_35 {
+  margin-left: auto;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  transition: transform 0.2s ease;
+  flex-shrink: 0;
+}
+._card_1db6q_1 ._chevronExpanded_1db6q_45 {
+  transform: rotate(45deg);
+}
+._card_1db6q_1 ._chevronCollapsed_1db6q_49 {
+  transform: rotate(-45deg);
+}
+._card_1db6q_1 ._content_1db6q_53 {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition:
+    grid-template-rows 0.2s ease,
+    opacity 0.2s ease;
+}
+._card_1db6q_1 ._contentInner_1db6q_61 {
+  overflow: hidden;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+._card_1db6q_1 ._contentCollapsed_1db6q_68 {
+  grid-template-rows: 0fr;
+  opacity: 0;
+}
+._card_1db6q_1 ._body_1db6q_73 {
   padding: 0.5rem 1rem;
   width: 100%;
 }
-._card_et6fi_1 ._footer_et6fi_30 {
+._card_1db6q_1 ._footer_1db6q_78 {
   border-top: var(--border-thickness) solid var(--border-color);
   flex: 1;
   background-color: var(--card-bg);
   padding: 0.5rem 1rem;
 }
-._large_et6fi_37 ._body_et6fi_25,
-._large_et6fi_37 ._title_et6fi_18 {
+._large_1db6q_85 ._body_1db6q_73,
+._large_1db6q_85 ._title_1db6q_18 {
   font-size: 1.25rem;
   padding: 0.75rem 1.25rem;
 }
-._small_et6fi_43 ._body_et6fi_25,
-._small_et6fi_43 ._title_et6fi_18 {
+._small_1db6q_91 ._body_1db6q_73,
+._small_1db6q_91 ._title_1db6q_18 {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }
 /* Variants */
-._primary_et6fi_51 {
+._primary_1db6q_99 {
   --card-bg: var(--primary-color-100);
   --border-color: var(--primary-color-300);
   --border-accent-color: var(--primary-color-600);
   --card-color: var(--primary-color-800);
 }
-._success_et6fi_58 {
+._success_1db6q_106 {
   --card-bg: var(--success-color-100);
   --border-color: var(--success-color-300);
   --border-accent-color: var(--success-color-600);
   --card-color: var(--success-color-800);
 }
-._warning_et6fi_65 {
+._warning_1db6q_113 {
   --card-bg: var(--warning-color-100);
   --border-color: var(--warning-color-300);
   --border-accent-color: var(--warning-color-600);
   --card-color: var(--warning-color-800);
 }
-._danger_et6fi_72 {
+._danger_1db6q_120 {
   --card-bg: var(--danger-color-100);
   --border-color: var(--danger-color-300);
   --border-accent-color: var(--danger-color-600);
   --card-color: var(--danger-color-800);
 }
-._info_et6fi_79 {
+._info_1db6q_127 {
   --card-bg: var(--info-color-100);
   --border-color: var(--info-color-300);
   --border-accent-color: var(--info-color-600);
   --card-color: var(--info-color-800);
 }
-._secondary_et6fi_86 {
+._secondary_1db6q_134 {
   --card-bg: var(--secondary-color-100);
   --border-color: var(--secondary-color-300);
   --border-accent-color: var(--secondary-color-600);
@@ -1592,7 +1632,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 +1640,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     opacity: 1;
   }
 }
-@keyframes _overlayOut_3g5sg_1 {
+@keyframes _overlayOut_1fxeg_1 {
   from {
     opacity: 1;
   }
@@ -1608,7 +1648,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 +1658,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 +1668,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 +1697,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_1fxeg_63[data-state="closed"] {
+  animation: _panelOut_1fxeg_1 140ms ease-in;
 }
-._content_3g5sg_63[data-state="closed"] {
-  animation: _panelOut_3g5sg_1 140ms ease-in;
+body.jcui-modal-mobile ._content_1fxeg_63 {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  min-width: 0;
 }
-._title_3g5sg_88 {
+._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;
@@ -2093,7 +2140,7 @@ hr {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
   width: 100%;
-}`)),document.head.appendChild(r)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
+}`)),document.head.appendChild(n)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
@@ -2608,23 +2655,39 @@ function requireClassnames() {
 }
 var classnamesExports = requireClassnames();
 const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
-const card = "_card_et6fi_1";
-const pageBackground$3 = "_pageBackground_et6fi_11";
-const title$1 = "_title_et6fi_18";
-const body$1 = "_body_et6fi_25";
-const footer$1 = "_footer_et6fi_30";
-const large$7 = "_large_et6fi_37";
-const small$7 = "_small_et6fi_43";
-const primary$9 = "_primary_et6fi_51";
-const success$9 = "_success_et6fi_58";
-const warning$9 = "_warning_et6fi_65";
-const danger$9 = "_danger_et6fi_72";
-const info$9 = "_info_et6fi_79";
-const secondary$9 = "_secondary_et6fi_86";
+const card = "_card_1db6q_1";
+const pageBackground$3 = "_pageBackground_1db6q_11";
+const title$1 = "_title_1db6q_18";
+const titleCollapsed = "_titleCollapsed_1db6q_25";
+const titleContent = "_titleContent_1db6q_29";
+const chevron = "_chevron_1db6q_35";
+const chevronExpanded = "_chevronExpanded_1db6q_45";
+const chevronCollapsed = "_chevronCollapsed_1db6q_49";
+const content$4 = "_content_1db6q_53";
+const contentInner = "_contentInner_1db6q_61";
+const contentCollapsed = "_contentCollapsed_1db6q_68";
+const body$1 = "_body_1db6q_73";
+const footer$1 = "_footer_1db6q_78";
+const large$7 = "_large_1db6q_85";
+const small$7 = "_small_1db6q_91";
+const primary$9 = "_primary_1db6q_99";
+const success$9 = "_success_1db6q_106";
+const warning$9 = "_warning_1db6q_113";
+const danger$9 = "_danger_1db6q_120";
+const info$9 = "_info_1db6q_127";
+const secondary$9 = "_secondary_1db6q_134";
 const styles$b = {
   card,
   pageBackground: pageBackground$3,
   title: title$1,
+  titleCollapsed,
+  titleContent,
+  chevron,
+  chevronExpanded,
+  chevronCollapsed,
+  content: content$4,
+  contentInner,
+  contentCollapsed,
   body: body$1,
   footer: footer$1,
   large: large$7,
@@ -2641,12 +2704,15 @@ function Card({
   variant,
   chamfer: chamfer2 = true,
   size: size2,
+  collapsed,
   footerHeight = 0,
   footer: footer2,
   // I hardly know her
   title: title2,
   ...props
 }) {
+  const isCollapsible = collapsed !== void 0;
+  const isCollapsed2 = Boolean(collapsed);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -2660,14 +2726,44 @@ function Card({
       ),
       ...props,
       children: [
-        title2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classNames(styles$b.title, hatchStyles.hatch), children: title2 }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$b.body, children: children2 }),
-        footerHeight > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        (title2 || isCollapsible) && /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
-            className: classNames(hatchStyles.hatch, styles$b.footer),
-            style: { flexBasis: footerHeight },
-            children: footer2
+            className: classNames(
+              styles$b.title,
+              hatchStyles.hatch,
+              isCollapsed2 && styles$b.titleCollapsed
+            ),
+            children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$b.titleContent, children: [
+              title2,
+              isCollapsible && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: classNames(
+                    styles$b.chevron,
+                    isCollapsed2 ? styles$b.chevronCollapsed : styles$b.chevronExpanded
+                  )
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: classNames(styles$b.content, isCollapsed2 && styles$b.contentCollapsed),
+            children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$b.contentInner, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$b.body, children: children2 }),
+              footerHeight > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "div",
+                {
+                  className: classNames(hatchStyles.hatch, styles$b.footer),
+                  style: { flexBasis: footerHeight },
+                  children: footer2
+                }
+              )
+            ] })
           }
         )
       ]
@@ -27814,12 +27910,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 +28003,7 @@ const global = {
 const JCUIProvider = ({
   children: children2,
   theme: initialTheme = DEFAULT_THEME,
+  modalMobileBreakpoint = 600,
   className,
   ...props
 }) => {
@@ -27926,6 +28023,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

@@ -1,4 +1,4 @@
-(function(){"use strict";try{if(typeof document!="undefined"){var r=document.createElement("style");r.appendChild(document.createTextNode(`@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");@property --button-bg {
+(function(){"use strict";try{if(typeof document!="undefined"){var n=document.createElement("style");n.appendChild(document.createTextNode(`@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");@property --button-bg {
   syntax: "<color>";
   inherits: true;
   initial-value: transparent;
@@ -217,7 +217,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     transform: rotate(360deg);
   }
 }
-._card_et6fi_1 {
+._card_1db6q_1 {
   border-width: var(--border-thickness);
   border-style: solid;
   font-size: 1rem;
@@ -226,70 +226,110 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   display: flex;
   flex-direction: column;
 }
-._pageBackground_et6fi_11 {
+._pageBackground_1db6q_11 {
   --card-bg: var(--body-bg);
   --button-bg: var(--body-bg);
   --card-color: var(--body-color);
   background-color: var(--body-bg);
 }
-._card_et6fi_1 ._title_et6fi_18 {
+._card_1db6q_1 ._title_1db6q_18 {
   font-size: 1.25rem;
   padding: 0.5rem 1rem;
   border-bottom: var(--border-thickness) solid var(--border-color);
   background-color: var(--card-bg);
 }
-._card_et6fi_1 ._body_et6fi_25 {
+._card_1db6q_1 ._titleCollapsed_1db6q_25 {
+  border-bottom: 0;
+}
+._card_1db6q_1 ._titleContent_1db6q_29 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+._card_1db6q_1 ._chevron_1db6q_35 {
+  margin-left: auto;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  transition: transform 0.2s ease;
+  flex-shrink: 0;
+}
+._card_1db6q_1 ._chevronExpanded_1db6q_45 {
+  transform: rotate(45deg);
+}
+._card_1db6q_1 ._chevronCollapsed_1db6q_49 {
+  transform: rotate(-45deg);
+}
+._card_1db6q_1 ._content_1db6q_53 {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition:
+    grid-template-rows 0.2s ease,
+    opacity 0.2s ease;
+}
+._card_1db6q_1 ._contentInner_1db6q_61 {
+  overflow: hidden;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+._card_1db6q_1 ._contentCollapsed_1db6q_68 {
+  grid-template-rows: 0fr;
+  opacity: 0;
+}
+._card_1db6q_1 ._body_1db6q_73 {
   padding: 0.5rem 1rem;
   width: 100%;
 }
-._card_et6fi_1 ._footer_et6fi_30 {
+._card_1db6q_1 ._footer_1db6q_78 {
   border-top: var(--border-thickness) solid var(--border-color);
   flex: 1;
   background-color: var(--card-bg);
   padding: 0.5rem 1rem;
 }
-._large_et6fi_37 ._body_et6fi_25,
-._large_et6fi_37 ._title_et6fi_18 {
+._large_1db6q_85 ._body_1db6q_73,
+._large_1db6q_85 ._title_1db6q_18 {
   font-size: 1.25rem;
   padding: 0.75rem 1.25rem;
 }
-._small_et6fi_43 ._body_et6fi_25,
-._small_et6fi_43 ._title_et6fi_18 {
+._small_1db6q_91 ._body_1db6q_73,
+._small_1db6q_91 ._title_1db6q_18 {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }
 /* Variants */
-._primary_et6fi_51 {
+._primary_1db6q_99 {
   --card-bg: var(--primary-color-100);
   --border-color: var(--primary-color-300);
   --border-accent-color: var(--primary-color-600);
   --card-color: var(--primary-color-800);
 }
-._success_et6fi_58 {
+._success_1db6q_106 {
   --card-bg: var(--success-color-100);
   --border-color: var(--success-color-300);
   --border-accent-color: var(--success-color-600);
   --card-color: var(--success-color-800);
 }
-._warning_et6fi_65 {
+._warning_1db6q_113 {
   --card-bg: var(--warning-color-100);
   --border-color: var(--warning-color-300);
   --border-accent-color: var(--warning-color-600);
   --card-color: var(--warning-color-800);
 }
-._danger_et6fi_72 {
+._danger_1db6q_120 {
   --card-bg: var(--danger-color-100);
   --border-color: var(--danger-color-300);
   --border-accent-color: var(--danger-color-600);
   --card-color: var(--danger-color-800);
 }
-._info_et6fi_79 {
+._info_1db6q_127 {
   --card-bg: var(--info-color-100);
   --border-color: var(--info-color-300);
   --border-accent-color: var(--info-color-600);
   --card-color: var(--info-color-800);
 }
-._secondary_et6fi_86 {
+._secondary_1db6q_134 {
   --card-bg: var(--secondary-color-100);
   --border-color: var(--secondary-color-300);
   --border-accent-color: var(--secondary-color-600);
@@ -1592,7 +1632,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 +1640,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     opacity: 1;
   }
 }
-@keyframes _overlayOut_3g5sg_1 {
+@keyframes _overlayOut_1fxeg_1 {
   from {
     opacity: 1;
   }
@@ -1608,7 +1648,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 +1658,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 +1668,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 +1697,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_1fxeg_63[data-state="closed"] {
+  animation: _panelOut_1fxeg_1 140ms ease-in;
 }
-._content_3g5sg_63[data-state="closed"] {
-  animation: _panelOut_3g5sg_1 140ms ease-in;
+body.jcui-modal-mobile ._content_1fxeg_63 {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  min-width: 0;
 }
-._title_3g5sg_88 {
+._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;
@@ -2093,7 +2140,7 @@ hr {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
   width: 100%;
-}`)),document.head.appendChild(r)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
+}`)),document.head.appendChild(n)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
 import * as React from "react";
 import React__default, { useContext, createContext as createContext$1, useId as useId$1, forwardRef, useRef, useState, useMemo, useEffect, useLayoutEffect, useCallback, createElement } from "react";
 import * as ReactDOM from "react-dom";
@@ -2590,23 +2637,39 @@ function requireClassnames() {
 }
 var classnamesExports = requireClassnames();
 const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
-const card = "_card_et6fi_1";
-const pageBackground$3 = "_pageBackground_et6fi_11";
-const title$1 = "_title_et6fi_18";
-const body$1 = "_body_et6fi_25";
-const footer$1 = "_footer_et6fi_30";
-const large$7 = "_large_et6fi_37";
-const small$7 = "_small_et6fi_43";
-const primary$9 = "_primary_et6fi_51";
-const success$9 = "_success_et6fi_58";
-const warning$9 = "_warning_et6fi_65";
-const danger$9 = "_danger_et6fi_72";
-const info$9 = "_info_et6fi_79";
-const secondary$9 = "_secondary_et6fi_86";
+const card = "_card_1db6q_1";
+const pageBackground$3 = "_pageBackground_1db6q_11";
+const title$1 = "_title_1db6q_18";
+const titleCollapsed = "_titleCollapsed_1db6q_25";
+const titleContent = "_titleContent_1db6q_29";
+const chevron = "_chevron_1db6q_35";
+const chevronExpanded = "_chevronExpanded_1db6q_45";
+const chevronCollapsed = "_chevronCollapsed_1db6q_49";
+const content$4 = "_content_1db6q_53";
+const contentInner = "_contentInner_1db6q_61";
+const contentCollapsed = "_contentCollapsed_1db6q_68";
+const body$1 = "_body_1db6q_73";
+const footer$1 = "_footer_1db6q_78";
+const large$7 = "_large_1db6q_85";
+const small$7 = "_small_1db6q_91";
+const primary$9 = "_primary_1db6q_99";
+const success$9 = "_success_1db6q_106";
+const warning$9 = "_warning_1db6q_113";
+const danger$9 = "_danger_1db6q_120";
+const info$9 = "_info_1db6q_127";
+const secondary$9 = "_secondary_1db6q_134";
 const styles$b = {
   card,
   pageBackground: pageBackground$3,
   title: title$1,
+  titleCollapsed,
+  titleContent,
+  chevron,
+  chevronExpanded,
+  chevronCollapsed,
+  content: content$4,
+  contentInner,
+  contentCollapsed,
   body: body$1,
   footer: footer$1,
   large: large$7,
@@ -2623,12 +2686,15 @@ function Card({
   variant,
   chamfer: chamfer2 = true,
   size: size2,
+  collapsed,
   footerHeight = 0,
   footer: footer2,
   // I hardly know her
   title: title2,
   ...props
 }) {
+  const isCollapsible = collapsed !== void 0;
+  const isCollapsed2 = Boolean(collapsed);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -2642,14 +2708,44 @@ function Card({
       ),
       ...props,
       children: [
-        title2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classNames(styles$b.title, hatchStyles.hatch), children: title2 }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$b.body, children: children2 }),
-        footerHeight > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        (title2 || isCollapsible) && /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
-            className: classNames(hatchStyles.hatch, styles$b.footer),
-            style: { flexBasis: footerHeight },
-            children: footer2
+            className: classNames(
+              styles$b.title,
+              hatchStyles.hatch,
+              isCollapsed2 && styles$b.titleCollapsed
+            ),
+            children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$b.titleContent, children: [
+              title2,
+              isCollapsible && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: classNames(
+                    styles$b.chevron,
+                    isCollapsed2 ? styles$b.chevronCollapsed : styles$b.chevronExpanded
+                  )
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: classNames(styles$b.content, isCollapsed2 && styles$b.contentCollapsed),
+            children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$b.contentInner, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$b.body, children: children2 }),
+              footerHeight > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "div",
+                {
+                  className: classNames(hatchStyles.hatch, styles$b.footer),
+                  style: { flexBasis: footerHeight },
+                  children: footer2
+                }
+              )
+            ] })
           }
         )
       ]
@@ -27796,12 +27892,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 +27985,7 @@ const global$1 = {
 const JCUIProvider = ({
   children: children2,
   theme: initialTheme = DEFAULT_THEME,
+  modalMobileBreakpoint = 600,
   className,
   ...props
 }) => {
@@ -27908,6 +28005,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.20",
   "type": "module",
   "sideEffects": false,
   "main": "dist/jcui.cjs.js",