@homebound/beam 4.28.0 → 4.29.0

package/dist/index.cjs

@@ -23066,6 +23066,7 @@ function RadioGroupField(props) {
     isDisabled: disabled,
     isRequired: required
   }, state);
+  const isThumbnail = layout === "thumbnail";
   return (
     // default styling to position `<Label />` above.
     /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { ...(0, import_runtime106.trussProps)({
@@ -23083,20 +23084,24 @@ function RadioGroupField(props) {
       /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { ...radioGroupProps, children: [
         /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { ...(0, import_runtime106.trussProps)({
           display: "df",
-          ...layout === "horizontal" ? {
+          flexDirection: "fdc",
+          gap: "g_1",
+          ...layout !== "vertical" ? {
             flexDirection: "fdr",
-            flexWrap: "fww",
+            flexWrap: "fww"
+          } : {},
+          ...layout === "horizontal" ? {
             gap: "g_3"
-          } : {
-            flexDirection: "fdc",
-            gap: "g_1"
-          }
+          } : {}
         }), children: options.map((option) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(import_react101.Fragment, { children: maybeTooltip({
-            title: resolveTooltip(option.disabled),
-            placement: "bottom",
-            children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(Radio, { parentId: name, option, state, isOptionDisabled: !!option.disabled, ...otherProps, ...tid[option.value] })
-          }) }, option.value);
+          const radioProps = {
+            option,
+            state,
+            isOptionDisabled: !!option.disabled,
+            ...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);
         }) }),
         errorMsg && /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(ErrorMessage, { errorMsg, ...tid.errorMsg }),
         helperText && /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(HelperText, { helperText })
@@ -23110,7 +23115,8 @@ function Radio(props) {
     option: {
       description,
       label,
-      value
+      value,
+      disabled: disabledReason
     },
     state,
     isOptionDisabled,
@@ -23139,71 +23145,198 @@ function Radio(props) {
   } = (0, import_react_aria49.useHover)({
     isDisabled: disabled
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("label", { ...(0, import_runtime106.trussProps)({
-    display: "df",
-    cursor: "cur_pointer",
-    ...disabled ? {
-      cursor: "cur_initial"
-    } : {}
-  }), ...hoverProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
-      "input",
-      {
-        type: "radio",
-        ref,
-        ...(0, import_runtime106.trussProps)({
-          ...radioReset,
-          ...radioDefault,
-          ...getRadioStateStyles({
-            isDisabled: disabled,
-            isSelected
+  return maybeTooltip({
+    title: resolveTooltip(disabledReason),
+    placement: "bottom",
+    children: /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("label", { ...(0, import_runtime106.trussProps)({
+      display: "df",
+      cursor: "cur_pointer",
+      ...disabled ? {
+        cursor: "cur_initial"
+      } : {}
+    }), ...hoverProps, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
+        "input",
+        {
+          type: "radio",
+          ref,
+          ...(0, import_runtime106.trussProps)({
+            ...radioReset,
+            ...radioDefault,
+            ...getRadioStateStyles({
+              isDisabled: disabled,
+              isSelected
+            }),
+            ...isHovered && !disabled ? radioHover : {},
+            ...isFocusVisible ? radioFocus : {},
+            // Nudge down so the center of the circle lines up with the label text
+            ...{
+              marginTop: "mt_2px",
+              marginRight: "mr1"
+            }
           }),
-          ...isHovered && !disabled ? radioHover : {},
-          ...isFocusVisible ? radioFocus : {},
-          // Nudge down so the center of the circle lines up with the label text
-          ...{
-            marginTop: "mt_2px",
-            marginRight: "mr1"
-          }
-        }),
-        disabled,
-        "aria-labelledby": labelId,
-        ...inputProps,
-        ...focusProps,
-        ...others
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { id: labelId, ...(0, import_runtime106.trussProps)({
-        fontWeight: "fw4",
-        fontSize: "fz_14px",
-        lineHeight: "lh_20px",
-        color: ["color_var", {
-          "--color": "var(--b-on-surface)"
-        }],
-        ...disabled ? {
+          disabled,
+          "aria-labelledby": labelId,
+          ...inputProps,
+          ...focusProps,
+          ...others
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { id: labelId, ...(0, import_runtime106.trussProps)({
+          fontWeight: "fw4",
+          fontSize: "fz_14px",
+          lineHeight: "lh_20px",
           color: ["color_var", {
-            "--color": "var(--b-text-disabled)"
-          }]
-        } : {}
-      }), ...description ? {
-        "aria-describedby": descriptionId
-      } : {}, children: label }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { id: descriptionId, ...(0, import_runtime106.trussProps)({
-        fontWeight: "fw4",
-        fontSize: "fz_14px",
-        lineHeight: "lh_20px",
-        color: ["color_var", {
-          "--color": "var(--b-on-surface-muted)"
-        }],
-        ...disabled ? {
+            "--color": "var(--b-on-surface)"
+          }],
+          ...disabled ? {
+            color: ["color_var", {
+              "--color": "var(--b-text-disabled)"
+            }]
+          } : {}
+        }), ...description ? {
+          "aria-describedby": descriptionId
+        } : {}, children: label }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { id: descriptionId, ...(0, import_runtime106.trussProps)({
+          fontWeight: "fw4",
+          fontSize: "fz_14px",
+          lineHeight: "lh_20px",
           color: ["color_var", {
-            "--color": "var(--b-text-disabled)"
-          }]
-        } : {}
-      }), children: typeof description === "function" ? description() : description })
+            "--color": "var(--b-on-surface-muted)"
+          }],
+          ...disabled ? {
+            color: ["color_var", {
+              "--color": "var(--b-text-disabled)"
+            }]
+          } : {}
+        }), children: typeof description === "function" ? description() : description })
+      ] })
     ] })
-  ] });
+  });
+}
+function ThumbnailRadio(props) {
+  const {
+    option: {
+      label,
+      value,
+      imgSrc,
+      disabled: disabledReason
+    },
+    state,
+    isOptionDisabled,
+    ...others
+  } = props;
+  const ref = (0, import_react101.useRef)(null);
+  const {
+    inputProps,
+    isDisabled
+  } = (0, import_react_aria49.useRadio)({
+    value,
+    "aria-label": label,
+    isDisabled: isOptionDisabled
+  }, state, ref);
+  const isSelected = !isDisabled && state.selectedValue === value;
+  const {
+    focusProps,
+    isFocusVisible
+  } = (0, import_react_aria49.useFocusRing)();
+  const {
+    hoverProps,
+    isHovered
+  } = (0, import_react_aria49.useHover)({
+    isDisabled
+  });
+  const {
+    pressProps,
+    isPressed
+  } = (0, import_react_aria49.usePress)({
+    isDisabled,
+    preventFocusOnPress: true
+  });
+  return maybeTooltip({
+    // Thumbnails have no visible text, so their label doubles as the tooltip, unless there's a disabled reason.
+    title: resolveTooltip(disabledReason) ?? label,
+    placement: "top",
+    children: /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("label", { ...(0, import_runtime106.trussProps)({
+      // The padding over the white background is the inner ring between the border and the image.
+      ...{
+        display: "db",
+        flexShrink: "fs0",
+        height: "h_32px",
+        width: "w_32px",
+        paddingTop: "pt_2px",
+        paddingBottom: "pb_2px",
+        paddingRight: "pr_2px",
+        paddingLeft: "pl_2px",
+        borderRadius: "br8",
+        borderStyle: "bss",
+        borderWidth: "bw1",
+        borderColor: ["bc_var", {
+          "--borderColor": "var(--b-field-border-default)"
+        }],
+        backgroundColor: ["bgColor_var", {
+          "--backgroundColor": "var(--b-surface-raised)"
+        }],
+        outline: "ol_0",
+        cursor: "cur_pointer"
+      },
+      // Lets a wrapping `Carousel` snap to each thumbnail.
+      ...{
+        scrollSnapAlign: "ssa_start"
+      },
+      ...isHovered && !isFocusVisible ? {
+        boxShadow: "bshHover"
+      } : {},
+      ...isSelected || isPressed ? {
+        borderColor: ["bc_var", {
+          "--borderColor": "var(--b-primary)"
+        }]
+      } : {},
+      ...isFocusVisible ? {
+        boxShadow: "bshFocus"
+      } : {},
+      ...isDisabled ? {
+        cursor: "cur_not_allowed"
+      } : {}
+    }), "data-selected": isSelected, "data-disabled": isDisabled, ...(0, import_react_aria49.mergeProps)(hoverProps, pressProps), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(import_react_aria49.VisuallyHidden, { elementType: "span", children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("input", { ...(0, import_react_aria49.mergeProps)(inputProps, focusProps, others), ref }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("span", { className: "relative db w100 h100 oh br4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("img", { src: imgSrc, alt: label, loading: "lazy", ...(0, import_runtime106.trussProps)({
+          width: "w100",
+          height: "h100",
+          objectFit: "obf_cover",
+          display: "db",
+          ...isDisabled ? {
+            opacity: "o50"
+          } : {}
+        }) }),
+        (isSelected || isPressed) && /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("span", { ...(0, import_runtime106.trussProps)({
+          ...{
+            position: "absolute",
+            top: "top0",
+            left: "l_0",
+            width: "w100",
+            height: "h100",
+            pointerEvents: "pen"
+          },
+          ...isSelected ? {
+            backgroundColor: ["bgColor_var", {
+              "--backgroundColor": "var(--b-selection-fill)"
+            }],
+            mixBlendMode: "mbm_multiply"
+          } : {},
+          ...isPressed ? {
+            backgroundColor: ["bgColor_var", {
+              "--backgroundColor": "var(--b-primary)"
+            }],
+            opacity: "o_0_28",
+            mixBlendMode: "mbm_normal"
+          } : {}
+        }) })
+      ] })
+    ] })
+  });
 }
 
 // src/forms/BoundRadioGroupField.tsx