@homebound/beam 4.30.0 → 4.32.0

package/dist/index.cjs

@@ -207,6 +207,7 @@ __export(index_exports, {
   StepperLayout: () => StepperLayout,
   StepperTab: () => StepperTab,
   StepperTabs: () => StepperTabs,
+  StyledRadio: () => StyledRadio,
   SubmitButton: () => SubmitButton,
   SuperDrawerContent: () => SuperDrawerContent,
   SuperDrawerHeader: () => SuperDrawerHeader,
@@ -17310,6 +17311,7 @@ function EntityLockup(props) {
   const {
     imgSrc,
     title,
+    eyebrow,
     description,
     right,
     compact = false
@@ -17317,10 +17319,13 @@ function EntityLockup(props) {
   const tid = useTestIds(props, "entityLockup");
   const styles = compact ? compactStyles : defaultStyles;
   return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { ...(0, import_runtime69.trussProps)(styles.container), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { ...(0, import_runtime69.trussProps)(styles.image), children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("img", { src: imgSrc, alt: "", loading: "lazy", className: "w100 h100 obf_cover db", ...tid.image }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { ...(0, import_runtime69.trussProps)(styles.image), children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("img", { src: imgSrc, alt: title, loading: "lazy", className: "w100 h100 obf_cover db", ...tid.image }) }),
     /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { ...(0, import_runtime69.trussProps)(styles.body), children: [
       /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { ...(0, import_runtime69.trussProps)(styles.text), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { ...(0, import_runtime69.trussProps)(styles.title), ...tid.title, children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { ...(0, import_runtime69.trussProps)(styles.heading), children: [
+          isDefined(eyebrow) && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { ...(0, import_runtime69.trussProps)(styles.eyebrow), ...tid.eyebrow, children: eyebrow }),
+          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { ...(0, import_runtime69.trussProps)(styles.title), ...tid.title, children: title })
+        ] }),
         isDefined(description) && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { ...(0, import_runtime69.trussProps)(styles.description), ...tid.description, children: description })
       ] }),
       isDefined(right) && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { ...(0, import_runtime69.trussProps)(styles.right), ...tid.right, children: right })
@@ -17363,6 +17368,19 @@ var defaultStyles = {
     flexGrow: "fg1",
     gap: "g_1"
   },
+  heading: {
+    display: "df",
+    flexDirection: "fdc",
+    gap: "g_2px"
+  },
+  eyebrow: {
+    fontWeight: "fw4",
+    fontSize: "fz_14px",
+    lineHeight: "lh_20px",
+    color: ["color_var", {
+      "--color": "var(--b-on-surface)"
+    }]
+  },
   title: {
     fontWeight: "fw6",
     fontSize: "fz_14px",
@@ -17430,6 +17448,18 @@ var compactStyles = {
     gap: "g_2px",
     paddingTop: "pt_4px"
   },
+  heading: {
+    display: "df",
+    flexDirection: "fdc"
+  },
+  eyebrow: {
+    fontWeight: "fw4",
+    fontSize: "fz_12px",
+    lineHeight: "lh_16px",
+    color: ["color_var", {
+      "--color": "var(--b-on-surface)"
+    }]
+  },
   title: {
     fontWeight: "fw6",
     fontSize: "fz_12px",
@@ -22263,7 +22293,7 @@ function GridSelectCard(props) {
 // src/inputs/SelectCard/ListSelectCard.tsx
 var import_react_aria45 = require("react-aria");
 
-// src/inputs/SelectCard/StyledRadio.tsx
+// src/inputs/StyledRadio.tsx
 var import_react_aria44 = require("react-aria");
 var import_runtime101 = require("@homebound/truss/runtime");
 
@@ -22377,12 +22407,13 @@ function getRadioStateStyles({
   return radioUnchecked;
 }
 
-// src/inputs/SelectCard/StyledRadio.tsx
+// src/inputs/StyledRadio.tsx
 var import_jsx_runtime142 = require("react/jsx-runtime");
 function StyledRadio(props) {
   const {
     isDisabled = false,
     isSelected = false,
+    isFocusVisible = false,
     label,
     inputProps
   } = props;
@@ -22393,18 +22424,29 @@ function StyledRadio(props) {
     isDisabled
   });
   const tid = useTestIds(props, label ? defaultTestId(label) : void 0);
-  return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("input", { type: "radio", ...(0, import_runtime101.trussProps)({
-    ...radioReset,
-    ...radioDefault,
-    ...getRadioStateStyles({
-      isDisabled,
-      isSelected
-    }),
-    ...isHovered && !isDisabled ? radioHover : {},
-    ...{
-      flexShrink: "fs0"
+  return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
+    "input",
+    {
+      type: "radio",
+      ...(0, import_runtime101.trussProps)({
+        ...radioReset,
+        ...radioDefault,
+        ...getRadioStateStyles({
+          isDisabled,
+          isSelected
+        }),
+        ...isHovered && !isDisabled ? radioHover : {},
+        ...isFocusVisible ? radioFocus : {},
+        ...{
+          flexShrink: "fs0"
+        }
+      }),
+      disabled: isDisabled,
+      ...hoverProps,
+      ...tid.value,
+      ...inputProps
     }
-  }), disabled: isDisabled, ...hoverProps, ...inputProps, ...tid.value });
+  );
 }
 
 // src/inputs/SelectCard/ListSelectCard.tsx
@@ -23048,6 +23090,7 @@ function RadioGroupField(props) {
     helperText,
     layout = "vertical",
     tooltip,
+    renderOption,
     ...otherProps
   } = props;
   const name = (0, import_react101.useMemo)(() => `radio-group-${++nextNameId}`, []);
@@ -23069,6 +23112,7 @@ function RadioGroupField(props) {
     isRequired: required
   }, state);
   const isThumbnail = layout === "thumbnail";
+  const stretchOptions = !!renderOption && !isThumbnail;
   return (
     // default styling to position `<Label />` above.
     /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { ...(0, import_runtime106.trussProps)({
@@ -23083,7 +23127,14 @@ function RadioGroupField(props) {
       } : {}
     }), ...tid, children: [
       /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(Label, { label, ...labelProps, ...tid.label, suffix: labelSuffix, tooltip, hidden: labelStyle === "hidden" }),
-      /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { ...radioGroupProps, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { ...radioGroupProps, ...(0, import_runtime106.trussProps)({
+        ...stretchOptions && labelStyle === "left" ? {
+          flexGrow: "fg1"
+        } : {},
+        ...stretchOptions && labelStyle !== "left" ? {
+          width: "w100"
+        } : {}
+      }), children: [
         /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { ...(0, import_runtime106.trussProps)({
           display: "df",
           flexDirection: "fdc",
@@ -23103,7 +23154,7 @@ function RadioGroupField(props) {
             ...otherProps,
             ...tid[option.value]
           };
-          return /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(import_react101.Fragment, { children: isThumbnail ? /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(ThumbnailRadio, { ...radioProps }) : /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(Radio, { parentId: name, ...radioProps }) }, option.value);
+          return /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(import_react101.Fragment, { children: isThumbnail ? /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(ThumbnailRadio, { ...radioProps }) : renderOption ? /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(CustomRadio, { ...radioProps, renderOption }) : /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(Radio, { parentId: name, ...radioProps }) }, option.value);
         }) }),
         errorMsg && /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(ErrorMessage, { errorMsg, ...tid.errorMsg }),
         helperText && /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(HelperText, { helperText })
@@ -23217,6 +23268,43 @@ function Radio(props) {
     ] })
   });
 }
+function CustomRadio(props) {
+  const {
+    option,
+    state,
+    isOptionDisabled,
+    renderOption,
+    ...others
+  } = props;
+  const ref = (0, import_react101.useRef)(null);
+  const {
+    inputProps,
+    isDisabled
+  } = (0, import_react_aria49.useRadio)({
+    value: option.value,
+    "aria-label": option.label,
+    isDisabled: isOptionDisabled
+  }, state, ref);
+  const isSelected = !isDisabled && state.selectedValue === option.value;
+  const {
+    focusProps,
+    isFocusVisible
+  } = (0, import_react_aria49.useFocusRing)();
+  return maybeTooltip({
+    title: resolveTooltip(option.disabled),
+    placement: "bottom",
+    children: renderOption(option, {
+      // Merge others last b/c it could have data-testid in it or onX events.
+      inputProps: {
+        ...(0, import_react_aria49.mergeProps)(inputProps, focusProps, others),
+        ref
+      },
+      isSelected,
+      isDisabled,
+      isFocusVisible
+    })
+  });
+}
 function ThumbnailRadio(props) {
   const {
     option: {
@@ -32556,6 +32644,7 @@ var togglePressStyles = {
   StepperLayout,
   StepperTab,
   StepperTabs,
+  StyledRadio,
   SubmitButton,
   SuperDrawerContent,
   SuperDrawerHeader,