@jackcrane/ui 0.1.20 → 0.1.21

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

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

package/dist/jcui.cjs.js

@@ -217,7 +217,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     transform: rotate(360deg);
   }
 }
-._card_1db6q_1 {
+._card_1ywyn_1 {
   border-width: var(--border-thickness);
   border-style: solid;
   font-size: 1rem;
@@ -226,110 +226,120 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   display: flex;
   flex-direction: column;
 }
-._pageBackground_1db6q_11 {
+._pageBackground_1ywyn_11 {
   --card-bg: var(--body-bg);
   --button-bg: var(--body-bg);
   --card-color: var(--body-color);
   background-color: var(--body-bg);
 }
-._card_1db6q_1 ._title_1db6q_18 {
+._card_1ywyn_1 ._title_1ywyn_18 {
   font-size: 1.25rem;
   padding: 0.5rem 1rem;
   border-bottom: var(--border-thickness) solid var(--border-color);
   background-color: var(--card-bg);
 }
-._card_1db6q_1 ._titleCollapsed_1db6q_25 {
+._card_1ywyn_1 ._titleCollapsed_1ywyn_25 {
   border-bottom: 0;
 }
-._card_1db6q_1 ._titleContent_1db6q_29 {
+._card_1ywyn_1 ._titleContent_1ywyn_29 {
   display: flex;
   align-items: center;
   gap: 0.5rem;
 }
-._card_1db6q_1 ._chevron_1db6q_35 {
+._card_1ywyn_1 ._chevronButton_1ywyn_35 {
   margin-left: auto;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+._card_1ywyn_1 ._chevron_1ywyn_35 {
   width: 0.5rem;
   height: 0.5rem;
   border-right: 2px solid currentColor;
   border-bottom: 2px solid currentColor;
   transition: transform 0.2s ease;
   flex-shrink: 0;
+  cursor: pointer;
 }
-._card_1db6q_1 ._chevronExpanded_1db6q_45 {
+._card_1ywyn_1 ._chevronExpanded_1ywyn_56 {
   transform: rotate(45deg);
 }
-._card_1db6q_1 ._chevronCollapsed_1db6q_49 {
+._card_1ywyn_1 ._chevronCollapsed_1ywyn_60 {
   transform: rotate(-45deg);
 }
-._card_1db6q_1 ._content_1db6q_53 {
+._card_1ywyn_1 ._content_1ywyn_64 {
   display: grid;
   grid-template-rows: 1fr;
   transition:
     grid-template-rows 0.2s ease,
     opacity 0.2s ease;
 }
-._card_1db6q_1 ._contentInner_1db6q_61 {
+._card_1ywyn_1 ._contentInner_1ywyn_72 {
   overflow: hidden;
   min-height: 0;
   display: flex;
   flex-direction: column;
 }
-._card_1db6q_1 ._contentCollapsed_1db6q_68 {
+._card_1ywyn_1 ._contentCollapsed_1ywyn_79 {
   grid-template-rows: 0fr;
   opacity: 0;
 }
-._card_1db6q_1 ._body_1db6q_73 {
+._card_1ywyn_1 ._body_1ywyn_84 {
   padding: 0.5rem 1rem;
   width: 100%;
 }
-._card_1db6q_1 ._footer_1db6q_78 {
+._card_1ywyn_1 ._footer_1ywyn_89 {
   border-top: var(--border-thickness) solid var(--border-color);
   flex: 1;
   background-color: var(--card-bg);
   padding: 0.5rem 1rem;
 }
-._large_1db6q_85 ._body_1db6q_73,
-._large_1db6q_85 ._title_1db6q_18 {
+._large_1ywyn_96 ._body_1ywyn_84,
+._large_1ywyn_96 ._title_1ywyn_18 {
   font-size: 1.25rem;
   padding: 0.75rem 1.25rem;
 }
-._small_1db6q_91 ._body_1db6q_73,
-._small_1db6q_91 ._title_1db6q_18 {
+._small_1ywyn_102 ._body_1ywyn_84,
+._small_1ywyn_102 ._title_1ywyn_18 {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }
 /* Variants */
-._primary_1db6q_99 {
+._primary_1ywyn_110 {
   --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_1db6q_106 {
+._success_1ywyn_117 {
   --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_1db6q_113 {
+._warning_1ywyn_124 {
   --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_1db6q_120 {
+._danger_1ywyn_131 {
   --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_1db6q_127 {
+._info_1ywyn_138 {
   --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_1db6q_134 {
+._secondary_1ywyn_145 {
   --card-bg: var(--secondary-color-100);
   --border-color: var(--secondary-color-300);
   --border-accent-color: var(--secondary-color-600);
@@ -2655,33 +2665,35 @@ function requireClassnames() {
 }
 var classnamesExports = requireClassnames();
 const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
-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 card = "_card_1ywyn_1";
+const pageBackground$3 = "_pageBackground_1ywyn_11";
+const title$1 = "_title_1ywyn_18";
+const titleCollapsed = "_titleCollapsed_1ywyn_25";
+const titleContent = "_titleContent_1ywyn_29";
+const chevronButton = "_chevronButton_1ywyn_35";
+const chevron = "_chevron_1ywyn_35";
+const chevronExpanded = "_chevronExpanded_1ywyn_56";
+const chevronCollapsed = "_chevronCollapsed_1ywyn_60";
+const content$4 = "_content_1ywyn_64";
+const contentInner = "_contentInner_1ywyn_72";
+const contentCollapsed = "_contentCollapsed_1ywyn_79";
+const body$1 = "_body_1ywyn_84";
+const footer$1 = "_footer_1ywyn_89";
+const large$7 = "_large_1ywyn_96";
+const small$7 = "_small_1ywyn_102";
+const primary$9 = "_primary_1ywyn_110";
+const success$9 = "_success_1ywyn_117";
+const warning$9 = "_warning_1ywyn_124";
+const danger$9 = "_danger_1ywyn_131";
+const info$9 = "_info_1ywyn_138";
+const secondary$9 = "_secondary_1ywyn_145";
 const styles$b = {
   card,
   pageBackground: pageBackground$3,
   title: title$1,
   titleCollapsed,
   titleContent,
+  chevronButton,
   chevron,
   chevronExpanded,
   chevronCollapsed,
@@ -2705,6 +2717,7 @@ function Card({
   chamfer: chamfer2 = true,
   size: size2,
   collapsed,
+  onCollapseChange,
   footerHeight = 0,
   footer: footer2,
   // I hardly know her
@@ -2713,6 +2726,12 @@ function Card({
 }) {
   const isCollapsible = collapsed !== void 0;
   const isCollapsed2 = Boolean(collapsed);
+  const handleCollapseToggle = () => {
+    if (!isCollapsible) {
+      return;
+    }
+    onCollapseChange?.(!isCollapsed2);
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -2737,12 +2756,22 @@ function Card({
             children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$b.titleContent, children: [
               title2,
               isCollapsible && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "span",
+                "button",
                 {
-                  "aria-hidden": "true",
-                  className: classNames(
-                    styles$b.chevron,
-                    isCollapsed2 ? styles$b.chevronCollapsed : styles$b.chevronExpanded
+                  type: "button",
+                  className: styles$b.chevronButton,
+                  onClick: handleCollapseToggle,
+                  "aria-label": isCollapsed2 ? "Expand card" : "Collapse card",
+                  "aria-expanded": !isCollapsed2,
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: classNames(
+                        styles$b.chevron,
+                        isCollapsed2 ? styles$b.chevronCollapsed : styles$b.chevronExpanded
+                      )
+                    }
                   )
                 }
               )

package/dist/jcui.es.js

@@ -217,7 +217,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     transform: rotate(360deg);
   }
 }
-._card_1db6q_1 {
+._card_1ywyn_1 {
   border-width: var(--border-thickness);
   border-style: solid;
   font-size: 1rem;
@@ -226,110 +226,120 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   display: flex;
   flex-direction: column;
 }
-._pageBackground_1db6q_11 {
+._pageBackground_1ywyn_11 {
   --card-bg: var(--body-bg);
   --button-bg: var(--body-bg);
   --card-color: var(--body-color);
   background-color: var(--body-bg);
 }
-._card_1db6q_1 ._title_1db6q_18 {
+._card_1ywyn_1 ._title_1ywyn_18 {
   font-size: 1.25rem;
   padding: 0.5rem 1rem;
   border-bottom: var(--border-thickness) solid var(--border-color);
   background-color: var(--card-bg);
 }
-._card_1db6q_1 ._titleCollapsed_1db6q_25 {
+._card_1ywyn_1 ._titleCollapsed_1ywyn_25 {
   border-bottom: 0;
 }
-._card_1db6q_1 ._titleContent_1db6q_29 {
+._card_1ywyn_1 ._titleContent_1ywyn_29 {
   display: flex;
   align-items: center;
   gap: 0.5rem;
 }
-._card_1db6q_1 ._chevron_1db6q_35 {
+._card_1ywyn_1 ._chevronButton_1ywyn_35 {
   margin-left: auto;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+._card_1ywyn_1 ._chevron_1ywyn_35 {
   width: 0.5rem;
   height: 0.5rem;
   border-right: 2px solid currentColor;
   border-bottom: 2px solid currentColor;
   transition: transform 0.2s ease;
   flex-shrink: 0;
+  cursor: pointer;
 }
-._card_1db6q_1 ._chevronExpanded_1db6q_45 {
+._card_1ywyn_1 ._chevronExpanded_1ywyn_56 {
   transform: rotate(45deg);
 }
-._card_1db6q_1 ._chevronCollapsed_1db6q_49 {
+._card_1ywyn_1 ._chevronCollapsed_1ywyn_60 {
   transform: rotate(-45deg);
 }
-._card_1db6q_1 ._content_1db6q_53 {
+._card_1ywyn_1 ._content_1ywyn_64 {
   display: grid;
   grid-template-rows: 1fr;
   transition:
     grid-template-rows 0.2s ease,
     opacity 0.2s ease;
 }
-._card_1db6q_1 ._contentInner_1db6q_61 {
+._card_1ywyn_1 ._contentInner_1ywyn_72 {
   overflow: hidden;
   min-height: 0;
   display: flex;
   flex-direction: column;
 }
-._card_1db6q_1 ._contentCollapsed_1db6q_68 {
+._card_1ywyn_1 ._contentCollapsed_1ywyn_79 {
   grid-template-rows: 0fr;
   opacity: 0;
 }
-._card_1db6q_1 ._body_1db6q_73 {
+._card_1ywyn_1 ._body_1ywyn_84 {
   padding: 0.5rem 1rem;
   width: 100%;
 }
-._card_1db6q_1 ._footer_1db6q_78 {
+._card_1ywyn_1 ._footer_1ywyn_89 {
   border-top: var(--border-thickness) solid var(--border-color);
   flex: 1;
   background-color: var(--card-bg);
   padding: 0.5rem 1rem;
 }
-._large_1db6q_85 ._body_1db6q_73,
-._large_1db6q_85 ._title_1db6q_18 {
+._large_1ywyn_96 ._body_1ywyn_84,
+._large_1ywyn_96 ._title_1ywyn_18 {
   font-size: 1.25rem;
   padding: 0.75rem 1.25rem;
 }
-._small_1db6q_91 ._body_1db6q_73,
-._small_1db6q_91 ._title_1db6q_18 {
+._small_1ywyn_102 ._body_1ywyn_84,
+._small_1ywyn_102 ._title_1ywyn_18 {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }
 /* Variants */
-._primary_1db6q_99 {
+._primary_1ywyn_110 {
   --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_1db6q_106 {
+._success_1ywyn_117 {
   --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_1db6q_113 {
+._warning_1ywyn_124 {
   --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_1db6q_120 {
+._danger_1ywyn_131 {
   --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_1db6q_127 {
+._info_1ywyn_138 {
   --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_1db6q_134 {
+._secondary_1ywyn_145 {
   --card-bg: var(--secondary-color-100);
   --border-color: var(--secondary-color-300);
   --border-accent-color: var(--secondary-color-600);
@@ -2637,33 +2647,35 @@ function requireClassnames() {
 }
 var classnamesExports = requireClassnames();
 const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
-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 card = "_card_1ywyn_1";
+const pageBackground$3 = "_pageBackground_1ywyn_11";
+const title$1 = "_title_1ywyn_18";
+const titleCollapsed = "_titleCollapsed_1ywyn_25";
+const titleContent = "_titleContent_1ywyn_29";
+const chevronButton = "_chevronButton_1ywyn_35";
+const chevron = "_chevron_1ywyn_35";
+const chevronExpanded = "_chevronExpanded_1ywyn_56";
+const chevronCollapsed = "_chevronCollapsed_1ywyn_60";
+const content$4 = "_content_1ywyn_64";
+const contentInner = "_contentInner_1ywyn_72";
+const contentCollapsed = "_contentCollapsed_1ywyn_79";
+const body$1 = "_body_1ywyn_84";
+const footer$1 = "_footer_1ywyn_89";
+const large$7 = "_large_1ywyn_96";
+const small$7 = "_small_1ywyn_102";
+const primary$9 = "_primary_1ywyn_110";
+const success$9 = "_success_1ywyn_117";
+const warning$9 = "_warning_1ywyn_124";
+const danger$9 = "_danger_1ywyn_131";
+const info$9 = "_info_1ywyn_138";
+const secondary$9 = "_secondary_1ywyn_145";
 const styles$b = {
   card,
   pageBackground: pageBackground$3,
   title: title$1,
   titleCollapsed,
   titleContent,
+  chevronButton,
   chevron,
   chevronExpanded,
   chevronCollapsed,
@@ -2687,6 +2699,7 @@ function Card({
   chamfer: chamfer2 = true,
   size: size2,
   collapsed,
+  onCollapseChange,
   footerHeight = 0,
   footer: footer2,
   // I hardly know her
@@ -2695,6 +2708,12 @@ function Card({
 }) {
   const isCollapsible = collapsed !== void 0;
   const isCollapsed2 = Boolean(collapsed);
+  const handleCollapseToggle = () => {
+    if (!isCollapsible) {
+      return;
+    }
+    onCollapseChange?.(!isCollapsed2);
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -2719,12 +2738,22 @@ function Card({
             children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$b.titleContent, children: [
               title2,
               isCollapsible && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "span",
+                "button",
                 {
-                  "aria-hidden": "true",
-                  className: classNames(
-                    styles$b.chevron,
-                    isCollapsed2 ? styles$b.chevronCollapsed : styles$b.chevronExpanded
+                  type: "button",
+                  className: styles$b.chevronButton,
+                  onClick: handleCollapseToggle,
+                  "aria-label": isCollapsed2 ? "Expand card" : "Collapse card",
+                  "aria-expanded": !isCollapsed2,
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: classNames(
+                        styles$b.chevron,
+                        isCollapsed2 ? styles$b.chevronCollapsed : styles$b.chevronExpanded
+                      )
+                    }
                   )
                 }
               )

package/package.json

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