@homebound/beam 3.59.1 → 3.60.0

package/dist/index.cjs

@@ -14885,6 +14885,7 @@ var import_jsx_runtime75 = require("react/jsx-runtime");
 function SelectCardShell(props) {
   const {
     view,
+    layout = "vertical",
     label,
     selected: isSelected = false,
     disabled: isDisabled = false,
@@ -14925,7 +14926,15 @@ function SelectCardShell(props) {
       borderColor: "bcGray300",
       width: "w100"
     },
-    ...view === "grid" ? {
+    ...view === "grid" ? layout === "horizontal" ? {
+      flexDirection: "fdr",
+      alignItems: "aic",
+      gap: "gap2",
+      paddingTop: "pt2",
+      paddingBottom: "pb2",
+      paddingRight: "pr2",
+      paddingLeft: "pl2"
+    } : {
       alignItems: "aic",
       gap: "gap1",
       paddingLeft: "pl2",
@@ -14961,7 +14970,7 @@ function SelectCardShell(props) {
     ...isFocusVisible ? {
       boxShadow: "bshFocus"
     } : {}
-  }), [view, isDisabled, isHovered, isSelected, isFocusVisible, isPressed]);
+  }), [view, layout, isDisabled, isHovered, isSelected, isFocusVisible, isPressed]);
   const tid = useTestIds(props, defaultTestId(label));
   return maybeTooltip({
     title: resolveTooltip(isDisabled, tooltip),
@@ -14984,6 +14993,8 @@ var import_jsx_runtime76 = require("react/jsx-runtime");
 function GridSelectCard(props) {
   const {
     icon,
+    image,
+    layout,
     label,
     description,
     selected: isSelected = false,
@@ -14994,9 +15005,17 @@ function GridSelectCard(props) {
     ...others
   } = props;
   const tid = useTestIds(props, defaultTestId(label));
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(SelectCardShell, { label, selected: isSelected, disabled: isDisabled, tooltip, view: "grid", __storyState, ...others, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(SelectCardShell, { label, selected: isSelected, disabled: isDisabled, tooltip, view: "grid", layout, __storyState, ...others, children: [
     /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_react_aria36.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("input", { ...inputProps, ...tid.value }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Icon, { icon, inc: 4, color: isDisabled ? "--b-on-surface-disabled" /* OnSurfaceDisabled */ : "--b-on-surface" /* OnSurface */ }),
+    image ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("img", { src: image, alt: "", ...(0, import_runtime51.trussProps)({
+      height: "h_100px",
+      width: "w_100px",
+      objectFit: "objectContain",
+      flexShrink: "fs0",
+      ...isDisabled ? {
+        opacity: "o50"
+      } : {}
+    }), ...tid.img }) : icon && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Icon, { icon, inc: 4, color: isDisabled ? "--b-on-surface-disabled" /* OnSurfaceDisabled */ : "--b-on-surface" /* OnSurface */ }),
     /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("span", { className: "df fdc gap_4px w100", children: [
       /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { ...(0, import_runtime51.trussProps)({
         fontWeight: "fw6",
@@ -15110,7 +15129,7 @@ function ListSelectCard(props) {
 // src/inputs/SelectCard/SelectCardCheckboxGroupItem.tsx
 var import_jsx_runtime79 = require("react/jsx-runtime");
 function SelectCardCheckboxGroupItem(props) {
-  const { option, groupState, isSelected, view, ...others } = props;
+  const { option, groupState, isSelected, view, layout, ...others } = props;
   const { label, description, disabled, tooltip, value } = option;
   const ref = (0, import_react65.useRef)(null);
   const { inputProps, isDisabled: isOptionDisabled } = (0, import_react_aria39.useCheckboxGroupItem)(
@@ -15130,7 +15149,8 @@ function SelectCardCheckboxGroupItem(props) {
   if (view === "list") {
     return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ListSelectCard, { ...layoutProps });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(GridSelectCard, { ...layoutProps, icon: option.icon });
+  const gridOption = option;
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(GridSelectCard, { ...layoutProps, layout, icon: gridOption.icon, image: gridOption.image });
 }
 
 // src/inputs/SelectCard/utils.ts
@@ -15157,14 +15177,20 @@ function findToggledSelectCardGroupValue(prev, next) {
   if (added !== void 0) return added;
   return prev.find((v) => !next.includes(v));
 }
-function getSelectCardOptionsCss(view, hasDescription) {
-  const cardWidth = hasDescription ? 192 : 142;
-  return view === "list" ? {
+function getSelectCardOptionsCss({
+  view,
+  hasDescription,
+  layout,
+  hasImage
+}) {
+  if (view === "list") return {
     display: "df",
     flexDirection: "fdc",
     gap: "gap2",
     width: "w100"
-  } : {
+  };
+  const cardWidth = layout === "horizontal" ? hasImage ? 360 : 240 : hasImage || hasDescription ? 192 : 142;
+  return {
     display: "dg",
     gridTemplateColumns: ["gtc_var", {
       "--gridTemplateColumns": (0, import_runtime54.maybeCssVar)(`repeat(auto-fill, minmax(${cardWidth}px, 1fr))`)
@@ -15189,9 +15215,11 @@ function MultiSelectCardGroup(props) {
     helperText,
     disabled: isDisabled = false,
     onChange,
-    view = "grid"
+    view = "grid",
+    layout
   } = props;
   const hasDescription = (0, import_react66.useMemo)(() => options.some((o) => o.description), [options]);
+  const hasImage = (0, import_react66.useMemo)(() => options.some((o) => "image" in o && o.image), [options]);
   const tid = useTestIds(props, defaultTestId(label));
   const handleChange = (0, import_react66.useCallback)((nextFromAria) => {
     const clicked = findToggledSelectCardGroupValue(values, nextFromAria);
@@ -15214,7 +15242,12 @@ function MultiSelectCardGroup(props) {
     label,
     isDisabled
   }, state);
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(LabeledGroupField, { label, labelStyle, labelProps, groupProps, errorMsg, helperText, tid, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { ...(0, import_runtime55.trussProps)(getSelectCardOptionsCss(view, hasDescription)), children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(SelectCardCheckboxGroupItem, { option, groupState: state, isSelected: values.includes(option.value), view, ...tid[defaultTestId(option.label)] }, String(option.value))) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(LabeledGroupField, { label, labelStyle, labelProps, groupProps, errorMsg, helperText, tid, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { ...(0, import_runtime55.trussProps)(getSelectCardOptionsCss({
+    view,
+    hasDescription,
+    layout,
+    hasImage
+  })), children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(SelectCardCheckboxGroupItem, { option, groupState: state, isSelected: values.includes(option.value), view, layout, ...tid[defaultTestId(option.label)] }, String(option.value))) }) });
 }
 
 // src/inputs/SelectCard/SelectCardGroup.tsx
@@ -15227,7 +15260,7 @@ var import_react67 = require("react");
 var import_react_aria41 = require("react-aria");
 var import_jsx_runtime81 = require("react/jsx-runtime");
 function SelectCardRadioGroupItem(props) {
-  const { option, groupState, isSelected, view, ...others } = props;
+  const { option, groupState, isSelected, view, layout, ...others } = props;
   const { label, description, disabled, tooltip, value } = option;
   const ref = (0, import_react67.useRef)(null);
   const { inputProps, isDisabled: isOptionDisabled } = (0, import_react_aria41.useRadio)(
@@ -15247,7 +15280,8 @@ function SelectCardRadioGroupItem(props) {
   if (view === "list") {
     return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ListSelectCard, { ...layoutProps });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(GridSelectCard, { ...layoutProps, icon: option.icon });
+  const gridOption = option;
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(GridSelectCard, { ...layoutProps, layout, icon: gridOption.icon, image: gridOption.image });
 }
 
 // src/inputs/SelectCard/SelectCardGroup.tsx
@@ -15266,9 +15300,11 @@ function SelectCardGroup(props) {
     helperText,
     disabled: isDisabled = false,
     onChange,
-    view = "grid"
+    view = "grid",
+    layout
   } = props;
   const hasDescription = (0, import_react68.useMemo)(() => options.some((o) => o.description), [options]);
+  const hasImage = (0, import_react68.useMemo)(() => options.some((o) => "image" in o && o.image), [options]);
   const tid = useTestIds(props, defaultTestId(label));
   const handleChange = (0, import_react68.useCallback)((nextValue) => {
     onChange(nextValue);
@@ -15285,7 +15321,12 @@ function SelectCardGroup(props) {
     label,
     isDisabled
   }, state);
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(LabeledGroupField, { label, labelStyle, labelProps, groupProps: radioGroupProps, errorMsg, helperText, tid, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { ...(0, import_runtime56.trussProps)(getSelectCardOptionsCss(view, hasDescription)), children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(SelectCardRadioGroupItem, { option, groupState: state, isSelected: value === option.value, view, ...tid[defaultTestId(option.label)] }, String(option.value))) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(LabeledGroupField, { label, labelStyle, labelProps, groupProps: radioGroupProps, errorMsg, helperText, tid, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { ...(0, import_runtime56.trussProps)(getSelectCardOptionsCss({
+    view,
+    hasDescription,
+    layout,
+    hasImage
+  })), children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(SelectCardRadioGroupItem, { option, groupState: state, isSelected: value === option.value, view, layout, ...tid[defaultTestId(option.label)] }, String(option.value))) }) });
 }
 
 // src/inputs/SelectField.tsx
@@ -22632,6 +22673,7 @@ function Card(props) {
     imgSrc,
     imageFit = "contain",
     type = "card",
+    fullWidth = false,
     bordered = false,
     disabled: isDisabled = false,
     buttonMenuItems,
@@ -22648,11 +22690,12 @@ function Card(props) {
   const imgHeight = isList ? 96 : bordered ? 224 : 256;
   const styles = (0, import_react122.useMemo)(() => ({
     ...baseStyles3(type),
+    ...fullWidth && fullWidthStyles,
     ...isList && listStyles,
     ...bordered && borderedStyles,
     ...isHovered && cardHoverStyles,
     ...isDisabled && disabledStyles2
-  }), [isDisabled, isHovered, bordered, type, isList]);
+  }), [isDisabled, isHovered, bordered, type, isList, fullWidth]);
   return /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("div", { ...(0, import_runtime95.trussProps)(styles), ...hoverProps, ...tid, children: [
     /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { ...(0, import_runtime95.trussProps)({
       ...{
@@ -22670,6 +22713,10 @@ function Card(props) {
         position: "relative",
         filter: "filter_brightness_1"
       },
+      // Once the card follows its container, keep the image at its own size so the title wraps instead.
+      ...fullWidth && {
+        flexShrink: "fs0"
+      },
       ...isHovered && !isList && imageHoverStyles
     }), children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("img", { ...(0, import_runtime95.trussProps)({
       width: "w100",
@@ -22722,6 +22769,9 @@ var baseStyles3 = (type) => ({
   gap: "gap1",
   position: "relative"
 });
+var fullWidthStyles = {
+  width: "w100"
+};
 var listStyles = {
   display: "df",
   flexDirection: "fdr",