@homebound/beam 4.3.1 → 4.5.0

package/dist/index.cjs

@@ -5858,10 +5858,10 @@ function Loader({
     borderWidth: ["bw_var", {
       "--borderWidth": (0, import_runtime8.maybeCssVar)(`${borderSize}px`)
     }],
-    height: ["h_var", {
+    height: ["sq_var", {
       "--height": `${dimensions}px`
     }],
-    width: ["w_var", {
+    width: ["sq_var", {
       "--width": `${dimensions}px`
     }],
     borderColor: ["bc_var", {
@@ -6156,8 +6156,8 @@ var variantStyles = {
     // Blue100/200 hover fills have no semantic tokens — keep palette for those.
     base: {
       borderRadius: "br100",
-      width: "w_48px",
       height: "h_48px",
+      width: "w_48px",
       borderColor: ["bc_var", {
         "--borderColor": "var(--b-field-border-default)"
       }],
@@ -10564,12 +10564,12 @@ function Avatar({
   const [showFallback, setShowFallback] = (0, import_react33.useState)(src === void 0);
   const styles = {
     borderRadius: "br100",
-    width: ["w_var", {
-      "--width": `${px2}px`
-    }],
-    height: ["h_var", {
+    height: ["sq_var", {
       "--height": `${px2}px`
     }],
+    width: ["sq_var", {
+      "--width": `${px2}px`
+    }],
     minWidth: ["mw_var", {
       "--minWidth": `${px2}px`
     }],
@@ -10686,6 +10686,7 @@ function MenuItemImpl(props) {
     },
     onClose
   }, state, ref);
+  const itemTid = useTestIds(tid[defaultTestId(menuItem?.label ?? "item")]);
   if (!menuItem) {
     return null;
   }
@@ -10751,18 +10752,30 @@ function MenuItemImpl(props) {
           fontWeight: "fw5"
         } : {}
       }),
-      ...tid[defaultTestId(menuItem.label)],
+      ...itemTid,
       children: maybeTooltip({
         title: resolveTooltip(disabled),
         placement: "right",
-        children: renderMenuItem(menuItem, isSelected, isDisabled)
+        children: renderMenuItem(menuItem, isSelected, isDisabled, itemTid)
       })
     }
   );
 }
-function renderMenuItem(menuItem, isSelected, isDisabled) {
+function renderMenuItem(menuItem, isSelected, isDisabled, itemTid) {
+  const showDescription = menuItem.description != null;
+  const body = /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { ...(0, import_runtime27.trussProps)(showDescription ? {
+    display: "df",
+    flexDirection: "fdc",
+    width: "w100"
+  } : {
+    display: "df",
+    alignItems: "aic"
+  }), children: [
+    menuItem.ai ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(AiMenuItem, { label: menuItem.label, isDisabled }) : isIconMenuItem(menuItem) ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconMenuItem, { ...menuItem }) : isImageMenuItem(menuItem) ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ImageMenuItem, { ...menuItem }) : menuItem.label,
+    showDescription && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "fw4 fz_10px lh_14px", ...itemTid.description, children: menuItem.description })
+  ] });
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "df w100 aic jcsb gap2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "df aic", children: maybeWrapInLink(menuItem.onClick, menuItem.ai ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(AiMenuItem, { label: menuItem.label, isDisabled }) : isIconMenuItem(menuItem) ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconMenuItem, { ...menuItem }) : isImageMenuItem(menuItem) ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ImageMenuItem, { ...menuItem }) : menuItem.label, isDisabled) }),
+    maybeWrapInLink(menuItem.onClick, body, isDisabled),
     isSelected && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { icon: "check", color: isDisabled ? "--b-text-disabled" /* TextDisabled */ : "--b-selection-indicator" /* SelectionIndicator */ })
   ] });
 }
@@ -10817,7 +10830,8 @@ function maybeWrapInLink(onClick, content2, disabled) {
     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "fs0 ml2", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { icon: "linkExternal" }) })
   ] }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_router_dom3.Link, { ...(0, import_runtime27.mergeProps)("navLink", void 0, {
     display: "df",
-    alignItems: "aic"
+    alignItems: "aic",
+    width: "w100"
   }), to: onClick, children: content2 });
 }
 function wantsNewTab(e) {
@@ -11605,7 +11619,8 @@ function Menu(props) {
     onClose,
     searchable,
     selectedItem,
-    onChange
+    onChange,
+    header
   } = props;
   const tree = (0, import_react_stately3.useTreeData)({
     initialItems: [items, persistentItems ? persistentItems : []].map((i, idx) => ({
@@ -11694,6 +11709,18 @@ function Menu(props) {
         overflow: "h_oa"
       }),
       children: [
+        header && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { ...(0, import_runtime32.trussProps)({
+          paddingLeft: "pl2",
+          paddingRight: "pr2",
+          paddingTop: "pt_12px",
+          paddingBottom: "pb_12px",
+          borderBottomStyle: "bbs_solid",
+          borderBottomWidth: "bbw_1px",
+          borderColor: ["bc_var", {
+            "--borderColor": "var(--b-surface-separator)"
+          }],
+          minWidth: "mw_240px"
+        }), ...tid.header, children: header }),
         searchable && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(MenuSearchField, { label: "", value: search, placeholder: "Search...", labelStyle: "inline", onChange: setSearch, ...tid }),
         /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ul", { className: "p_0 m_0 lis_none outline0", ...menuProps, ref: menuRef, ...tid.menu, children: [...state.collection].map((item) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(MenuSectionImpl, { section: item, state, onClose, ...tid }, item.key)) })
       ]
@@ -11824,6 +11851,7 @@ function Button(props) {
     forceFocusStyles = false,
     active = false,
     labelInFlight,
+    colorScheme,
     ...otherProps
   } = props;
   const asLink = typeof onPress === "string";
@@ -11875,7 +11903,7 @@ function Button(props) {
     disabledStyles: disabledStyles3,
     pressedStyles: pressedStyles2,
     focusStyles: focusStyles2
-  } = (0, import_react41.useMemo)(() => getButtonStyles(variant, size), [variant, size]);
+  } = (0, import_react41.useMemo)(() => getButtonStyles(variant, size, colorScheme), [variant, size, colorScheme]);
   const buttonContent = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
     icon && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { xss: iconStyles[size], icon }),
     labelInFlight && asyncInProgress ? labelInFlight : label,
@@ -11918,8 +11946,8 @@ function Button(props) {
     children: getButtonOrLink(buttonContent, onPress, buttonAttrs, openInNew, download)
   });
 }
-function getButtonStyles(variant, size) {
-  const styles = variantStyles2[variant];
+function getButtonStyles(variant, size, colorScheme) {
+  const styles = variant === "secondary" && colorScheme ? colorSchemeStyles[colorScheme] : variantStyles2[variant];
   if (variant === "text") {
     return styles;
   }
@@ -12275,6 +12303,95 @@ var variantStyles2 = {
     }
   }
 };
+var colorSchemeStyles = {
+  neutral: {
+    baseStyles: {
+      backgroundColor: "bgGray100",
+      borderColor: "bcGray600",
+      borderWidth: "bw1",
+      borderStyle: "bss",
+      color: ["color_var", {
+        "--color": "var(--b-on-surface)"
+      }]
+    },
+    hoverStyles: {
+      backgroundColor: "bgGray200",
+      borderColor: "bcGray700"
+    },
+    pressedStyles: {
+      backgroundColor: "bgGray300",
+      borderColor: "bcGray800"
+    },
+    disabledStyles: {
+      backgroundColor: "bgGray100",
+      borderColor: "bcGray400",
+      color: ["color_var", {
+        "--color": "var(--b-text-link-disabled)"
+      }]
+    },
+    focusStyles: {
+      boxShadow: "bshFocus"
+    }
+  },
+  info: {
+    baseStyles: {
+      backgroundColor: "bgBlue50",
+      borderColor: "bcBlue600",
+      borderWidth: "bw1",
+      borderStyle: "bss",
+      color: ["color_var", {
+        "--color": "var(--b-on-surface)"
+      }]
+    },
+    hoverStyles: {
+      backgroundColor: "bgBlue100",
+      borderColor: "bcBlue700"
+    },
+    pressedStyles: {
+      backgroundColor: "bgBlue200",
+      borderColor: "bcBlue800"
+    },
+    disabledStyles: {
+      backgroundColor: "bgBlue50",
+      borderColor: "bcBlue300",
+      color: ["color_var", {
+        "--color": "var(--b-text-link-disabled)"
+      }]
+    },
+    focusStyles: {
+      boxShadow: "bshFocus"
+    }
+  },
+  success: {
+    baseStyles: {
+      backgroundColor: "bgGreen50",
+      borderColor: "bcGreen600",
+      borderWidth: "bw1",
+      borderStyle: "bss",
+      color: ["color_var", {
+        "--color": "var(--b-on-surface)"
+      }]
+    },
+    hoverStyles: {
+      backgroundColor: "bgGreen100",
+      borderColor: "bcGreen700"
+    },
+    pressedStyles: {
+      backgroundColor: "bgGreen200",
+      borderColor: "bcGreen800"
+    },
+    disabledStyles: {
+      backgroundColor: "bgGreen50",
+      borderColor: "bcGreen300",
+      color: ["color_var", {
+        "--color": "var(--b-text-link-disabled)"
+      }]
+    },
+    focusStyles: {
+      boxShadow: "bshFocus"
+    }
+  }
+};
 var sizeStyles = {
   sm: {
     height: "h_32px",
@@ -12634,7 +12751,7 @@ function labelOr(trigger, fallback) {
 // src/components/ButtonMenu.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
 function ButtonMenu(props) {
-  const { defaultOpen, disabled, items, persistentItems, trigger, searchable } = props;
+  const { defaultOpen, disabled, items, persistentItems, trigger, searchable, header } = props;
   let selectedItem, onChange;
   if (isSelectionButtonMenuProps(props)) {
     selectedItem = props.selectedItem;
@@ -12657,6 +12774,7 @@ function ButtonMenu(props) {
       searchable,
       selectedItem,
       onChange,
+      header,
       ...tid
     }
   ) });
@@ -15233,8 +15351,8 @@ function Day(props) {
           ...(0, import_runtime56.trussProps)({
             position: "absolute",
             bottom: "bot_4px",
-            width: "w_4px",
             height: "h_4px",
+            width: "w_4px",
             backgroundColor: ["bgColor_var", {
               "--backgroundColor": "var(--b-primary)"
             }],
@@ -25963,9 +26081,9 @@ function StepIcon({
   if (state === "complete") {
     return /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(Icon, { icon: "check" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { className: "w_24px h_24px df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { ...(0, import_runtime128.trussProps)({
-    width: "w_10px",
+  return /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { className: "h_24px w_24px df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { ...(0, import_runtime128.trussProps)({
     height: "h_10px",
+    width: "w_10px",
     borderStyle: "bss",
     borderWidth: "bw2",
     borderRadius: "br100",
@@ -28920,9 +29038,11 @@ function PageHeader2(props) {
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "header");
-  return /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(BaseHeader, { ...otherProps, rightSlot: /* @__PURE__ */ (0, import_jsx_runtime231.jsxs)(import_jsx_runtime231.Fragment, { children: [
+  const hasActions = !!actions && actions.length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(BaseHeader, { ...otherProps, rightSlot: /* @__PURE__ */ (0, import_jsx_runtime231.jsxs)("div", { className: "df gap1 fs0", ...tid.actions, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(AutoSaveIndicator, { hideOnIdle: true }),
     rightSlot,
-    actions && actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(HeaderActions, { actions, collapseOnSm: true })
+    hasActions && /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(HeaderActions, { actions, collapseOnSm: true })
   ] }), bottomSlot: tabs && /* @__PURE__ */ (0, import_jsx_runtime231.jsx)("div", { ...(0, import_runtime151.trussProps)(pageContentPaddingX), children: /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(Tabs, { ...tabs, ...tid.tabs }) }) });
 }