@homebound/beam 4.32.0 → 4.34.0

package/dist/index.cjs

@@ -17318,103 +17318,105 @@ function EntityLockup(props) {
   } = 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: 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.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 })
+  return (
+    // `defaultStyles` query this container's width to switch to compact.
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: "w100 mw0 ctis cn_entityLockup", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { ...(0, import_runtime69.trussProps)(styles.container), 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: 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.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(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 })
-    ] })
-  ] });
+        isDefined(right) && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { ...(0, import_runtime69.trussProps)(styles.right), ...tid.right, children: right })
+      ] })
+    ] }) })
+  );
 }
 var defaultStyles = {
   container: {
     display: "df",
     alignItems: "aifs",
-    gap: "g_2"
+    gap: "g_2 container_entityLockup_max_width_400px_g_12px"
   },
   image: {
     flexShrink: "fs0",
-    height: "h_96px",
-    width: "w_96px",
+    height: "h_96px container_entityLockup_max_width_400px_h_62px",
+    width: "w_96px container_entityLockup_max_width_400px_w_62px",
     borderRadius: "br8",
     borderStyle: "bss",
     borderWidth: "bw1",
-    borderColor: ["bc_var", {
-      "--borderColor": "var(--b-field-border-default)"
+    borderColor: ["bc_var container_entityLockup_max_width_400px_bc_var", {
+      "--borderColor": "var(--b-field-border-default)",
+      "--container_entityLockup_max_width_400px_borderColor": "var(--b-surface-separator)"
     }],
     overflow: "oh",
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface-raised)"
     }]
   },
-  // On small screens, `right` moves under the description so the text keeps its width.
   body: {
     display: "df",
     flexGrow: "fg1",
     minWidth: "mw0",
-    gap: "g_2 sm_g_1",
-    flexDirection: "sm_fdc"
+    gap: "g_2 container_entityLockup_max_width_400px_g_12px",
+    alignSelf: "container_entityLockup_max_width_400px_asStretch"
   },
   text: {
     display: "df",
     flexDirection: "fdc",
     minWidth: "mw0",
     flexGrow: "fg1",
-    gap: "g_1"
+    gap: "g_1 container_entityLockup_max_width_400px_g_2px",
+    paddingTop: "container_entityLockup_max_width_400px_pt_4px"
   },
   heading: {
     display: "df",
     flexDirection: "fdc",
-    gap: "g_2px"
+    gap: "g_2px container_entityLockup_max_width_400px_g_0"
   },
   eyebrow: {
-    fontWeight: "fw4",
-    fontSize: "fz_14px",
-    lineHeight: "lh_20px",
+    fontWeight: "fw4 container_entityLockup_max_width_400px_fw4",
+    fontSize: "fz_14px container_entityLockup_max_width_400px_fz_12px",
+    lineHeight: "lh_20px container_entityLockup_max_width_400px_lh_16px",
     color: ["color_var", {
       "--color": "var(--b-on-surface)"
     }]
   },
   title: {
-    fontWeight: "fw6",
-    fontSize: "fz_14px",
-    lineHeight: "lh_20px",
+    fontWeight: "fw6 container_entityLockup_max_width_400px_fw6",
+    fontSize: "fz_14px container_entityLockup_max_width_400px_fz_12px",
+    lineHeight: "lh_20px container_entityLockup_max_width_400px_lh_16px",
     color: ["color_var", {
       "--color": "var(--b-on-surface)"
     }]
   },
   description: {
-    fontWeight: "fw4",
-    fontSize: "fz_12px",
-    lineHeight: "lh_16px",
+    fontWeight: "fw4 container_entityLockup_max_width_400px_fw4",
+    fontSize: "fz_12px container_entityLockup_max_width_400px_fz_10px",
+    lineHeight: "lh_16px container_entityLockup_max_width_400px_lh_14px",
     color: ["color_var", {
       "--color": "var(--b-on-surface)"
     }]
   },
-  // Capped at half the row so wide content can't squeeze the text to nothing; on small screens it gets its own row.
-  // A lone child (fewer than two elements) stays right-aligned instead of falling to the start under `jcsb`.
+  // Capped at half the row so wide content can't squeeze the text to nothing.
   right: {
     flexShrink: "fs0",
-    maxWidth: "maxw50 sm_maxw_none",
+    maxWidth: "maxw50",
     display: "df",
-    flexDirection: "fdc sm_fdr",
-    alignItems: "aife sm_aic",
+    flexDirection: "fdc",
+    alignItems: "aife",
     gap: "g_6px",
-    alignSelf: "asfs sm_asStretch",
-    textAlign: "tar",
-    justifyContent: "sm_jcsb sm_n_has_nth_child_2_jcfe"
+    alignSelf: "asfs",
+    textAlign: "tar"
   }
 };
 var compactStyles = {
   container: {
     display: "df",
-    alignItems: "aic",
+    alignItems: "aifs",
     gap: "g_12px"
   },
   image: {
@@ -30911,10 +30913,13 @@ function EnvironmentBannerLayout(props) {
 var import_runtime162 = require("@homebound/truss/runtime");
 
 // src/forms/FormSection/FormSection.tsx
+var import_react_aria70 = require("react-aria");
+var import_react_stately18 = require("react-stately");
 var import_runtime160 = require("@homebound/truss/runtime");
 
 // src/forms/FormSection/FormSectionChild.tsx
 var import_react164 = require("react");
+var import_react_aria69 = require("react-aria");
 var import_runtime159 = require("@homebound/truss/runtime");
 var import_jsx_runtime242 = require("react/jsx-runtime");
 function FormSectionChild(props) {
@@ -30924,7 +30929,10 @@ function FormSectionChild(props) {
     actions,
     fields,
     orderField,
-    tag
+    tag,
+    value = title,
+    selection,
+    group
   } = props;
   const tid = useTestIds(props, "formSectionChild");
   const itemRef = (0, import_react164.useRef)(null);
@@ -30936,6 +30944,7 @@ function FormSectionChild(props) {
     id: props.id ?? title,
     itemRef
   });
+  const control = group?.mode === "single" ? /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(FormSectionChildRadio, { state: group.state, value, label: title, ...tid.radio }) : group?.mode === "multiple" ? /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(FormSectionChildCheckbox, { state: group.state, value, label: title, ...tid.checkbox }) : selection ? /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(BoundCheckboxField, { field: selection.field, label: title, checkboxOnly: true, ...tid.checkbox }) : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime242.jsxs)("div", { ...isDraggable ? {
     ...dragItemProps,
     ref: itemRef
@@ -30955,10 +30964,73 @@ function FormSectionChild(props) {
     borderStyle: "lot_bsn",
     borderWidth: "lot_bw_0"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(ContentHeader, { ...tid.header, title, description, actions, level: 4, rightSlotLead: tag && /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(Tag, { ...tag, ...tid.tag }), startAdornment: isDraggable ? /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(DnDGridItemHandle, { dragHandleProps, icon: "drag", compact: true }) : void 0 }),
+    /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(ContentHeader, { ...tid.header, title, description, actions, level: 4, rightSlotLead: tag && /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(Tag, { ...tag, ...tid.tag }), startAdornment: isDraggable || control ? /* @__PURE__ */ (0, import_jsx_runtime242.jsxs)(import_jsx_runtime242.Fragment, { children: [
+      isDraggable && /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(DnDGridItemHandle, { dragHandleProps, icon: "drag", compact: true }),
+      control
+    ] }) : void 0 }),
     fields
   ] });
 }
+function FormSectionChildRadio(props) {
+  const {
+    state,
+    value,
+    label
+  } = props;
+  const ref = (0, import_react164.useRef)(null);
+  const {
+    inputProps,
+    isDisabled,
+    isSelected
+  } = (0, import_react_aria69.useRadio)({
+    value,
+    "aria-label": label
+  }, state, ref);
+  const {
+    focusProps,
+    isFocusVisible
+  } = (0, import_react_aria69.useFocusRing)();
+  const tid = useTestIds(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(StyledRadio, { isDisabled, isSelected, isFocusVisible, inputProps: {
+    ...(0, import_react_aria69.mergeProps)(inputProps, focusProps),
+    ref,
+    ...tid
+  } });
+}
+function FormSectionChildCheckbox(props) {
+  const {
+    state,
+    value,
+    label
+  } = props;
+  const ref = (0, import_react164.useRef)(null);
+  const {
+    inputProps,
+    isDisabled,
+    isSelected
+  } = (0, import_react_aria69.useCheckboxGroupItem)({
+    value,
+    "aria-label": label
+  }, state, ref);
+  const {
+    focusProps,
+    isFocusVisible
+  } = (0, import_react_aria69.useFocusRing)();
+  const tid = useTestIds(props);
+  return (
+    // `StyledCheckbox` is just the visual box, so the label makes clicking it toggle the hidden input
+    /* @__PURE__ */ (0, import_jsx_runtime242.jsxs)("label", { ...(0, import_runtime159.trussProps)({
+      display: "df",
+      cursor: "cur_pointer",
+      ...isDisabled ? {
+        cursor: "cur_not_allowed"
+      } : {}
+    }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(import_react_aria69.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime242.jsx)("input", { ref, ...(0, import_react_aria69.mergeProps)(inputProps, focusProps), ...tid }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(StyledCheckbox, { isDisabled, isSelected, isFocusVisible })
+    ] })
+  );
+}
 
 // src/forms/FormSection/FormSection.tsx
 var import_jsx_runtime243 = require("react/jsx-runtime");
@@ -30968,7 +31040,8 @@ function FormSection(props) {
     description,
     actions,
     fields,
-    childSections
+    childSections,
+    selection
   } = props;
   const tid = useTestIds(props, "formSection");
   return /* @__PURE__ */ (0, import_jsx_runtime243.jsxs)("div", { id: defaultTestId(title), ...(0, import_runtime160.trussProps)({
@@ -30981,15 +31054,94 @@ function FormSection(props) {
   }), ...tid.section, children: [
     /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(ContentHeader, { ...tid, title, description, actions, level: 3 }),
     fields,
-    childSections && (isReorderable(childSections) ? /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(DraggableChildren, { childSections, ...tid.childSection }) : /* @__PURE__ */ (0, import_jsx_runtime243.jsx)("div", { className: "df fdc g_3", children: childSections.map((child) => /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(FormSectionChild, { ...child, ...tid.childSection }, child.id ?? child.title)) }))
+    childSections && (selection?.mode === "single" ? /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(FormSectionRadioGroup, { field: selection.field, label: title, childSections, ...tid }) : selection?.mode === "multiple" ? /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(FormSectionCheckboxGroup, { field: selection.field, label: title, childSections, ...tid }) : /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(ChildSectionList, { childSections, ...tid.childSection }))
   ] });
 }
+function FormSectionRadioGroup(props) {
+  const {
+    field,
+    label,
+    childSections
+  } = props;
+  const tid = useTestIds(props);
+  const {
+    value,
+    readOnly
+  } = useComputed(() => ({
+    value: field.value ?? null,
+    readOnly: field.readOnly
+  }), [field]);
+  const state = (0, import_react_stately18.useRadioGroupState)({
+    value,
+    onChange: (value2) => {
+      field.set(value2);
+      field.maybeAutoSave();
+    },
+    isDisabled: readOnly
+  });
+  const {
+    radioGroupProps
+  } = (0, import_react_aria70.useRadioGroup)({
+    "aria-label": label,
+    isDisabled: readOnly,
+    onFocus: () => field.focus(),
+    onBlur: () => field.blur()
+  }, state);
+  return /* @__PURE__ */ (0, import_jsx_runtime243.jsx)("div", { ...radioGroupProps, ...tid.childGroup, children: /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(ChildSectionList, { childSections, group: {
+    mode: "single",
+    state
+  }, ...tid.childSection }) });
+}
+function FormSectionCheckboxGroup(props) {
+  const {
+    field,
+    label,
+    childSections
+  } = props;
+  const tid = useTestIds(props);
+  const {
+    value,
+    readOnly
+  } = useComputed(() => ({
+    value: field.value ?? [],
+    readOnly: field.readOnly
+  }), [field]);
+  const state = (0, import_react_stately18.useCheckboxGroupState)({
+    value,
+    onChange: (values) => {
+      field.set(values);
+      field.maybeAutoSave();
+    },
+    isDisabled: readOnly
+  });
+  const {
+    groupProps
+  } = (0, import_react_aria70.useCheckboxGroup)({
+    "aria-label": label,
+    isDisabled: readOnly,
+    onFocus: () => field.focus(),
+    onBlur: () => field.blur()
+  }, state);
+  return /* @__PURE__ */ (0, import_jsx_runtime243.jsx)("div", { ...groupProps, ...tid.childGroup, children: /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(ChildSectionList, { childSections, group: {
+    mode: "multiple",
+    state
+  }, ...tid.childSection }) });
+}
+function ChildSectionList(props) {
+  const {
+    childSections,
+    group,
+    ...tid
+  } = props;
+  return isReorderable(childSections) ? /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(DraggableChildren, { childSections, group, ...tid }) : /* @__PURE__ */ (0, import_jsx_runtime243.jsx)("div", { className: "df fdc g_3", children: childSections.map((child) => /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(FormSectionChild, { ...child, group, ...tid }, child.id ?? child.title)) });
+}
 function isReorderable(childSections) {
   return childSections.length > 0 && childSections.every((c) => !!c.orderField);
 }
 function DraggableChildren(props) {
   const {
     childSections,
+    group,
     ...tid
   } = props;
   const sorted = sortByOrderField(childSections);
@@ -31007,7 +31159,7 @@ function DraggableChildren(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(DnDGrid, { onReorder: handleReorder, lockAxis: "y", gridStyles: {
     gridTemplateColumns: "gtc_minmax_0_1fr",
     gap: "g_3"
-  }, children: sorted.map((child) => /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(FormSectionChild, { ...child, ...tid }, child.id)) });
+  }, children: sorted.map((child) => /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(FormSectionChild, { ...child, group, ...tid }, child.id)) });
 }
 function sortByOrderField(childSections) {
   return [...childSections].sort((a, b) => (a.orderField.value ?? 0) - (b.orderField.value ?? 0));
@@ -32222,8 +32374,8 @@ function useFilter4({ filterDefs }) {
 
 // src/inputs/Autocomplete.tsx
 var import_react180 = require("react");
-var import_react_aria69 = require("react-aria");
-var import_react_stately18 = require("react-stately");
+var import_react_aria71 = require("react-aria");
+var import_react_stately19 = require("react-stately");
 var import_jsx_runtime264 = require("react/jsx-runtime");
 function Autocomplete(props) {
   const {
@@ -32242,7 +32394,7 @@ function Autocomplete(props) {
   const { effectiveValue, proposalProps } = useAiProposal(value, proposedValue);
   const disabledOptionsWithReasons = Object.fromEntries(disabledOptions?.map(disabledOptionToKeyedTuple) ?? []);
   const comboBoxChildren = (0, import_react180.useCallback)(
-    (item) => /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(import_react_stately18.Item, { textValue: getOptionLabel(item), children: getOptionMenuLabel ? getOptionMenuLabel(item) : getOptionLabel(item) }, getOptionValue(item)),
+    (item) => /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(import_react_stately19.Item, { textValue: getOptionLabel(item), children: getOptionMenuLabel ? getOptionMenuLabel(item) : getOptionLabel(item) }, getOptionValue(item)),
     [getOptionValue, getOptionLabel, getOptionMenuLabel]
   );
   const comboBoxProps = {
@@ -32265,12 +32417,12 @@ function Autocomplete(props) {
     },
     ...others
   };
-  const state = (0, import_react_stately18.useComboBoxState)(comboBoxProps);
+  const state = (0, import_react_stately19.useComboBoxState)(comboBoxProps);
   const inputWrapRef = (0, import_react180.useRef)(null);
   const inputRef = (0, import_react180.useRef)(null);
   const listBoxRef = (0, import_react180.useRef)(null);
   const popoverRef = (0, import_react180.useRef)(null);
-  const { inputProps, listBoxProps, labelProps } = (0, import_react_aria69.useComboBox)(
+  const { inputProps, listBoxProps, labelProps } = (0, import_react_aria71.useComboBox)(
     {
       ...comboBoxProps,
       inputRef,
@@ -32281,7 +32433,7 @@ function Autocomplete(props) {
     },
     state
   );
-  const { overlayProps: positionProps } = (0, import_react_aria69.useOverlayPosition)({
+  const { overlayProps: positionProps } = (0, import_react_aria71.useOverlayPosition)({
     targetRef: inputWrapRef,
     overlayRef: popoverRef,
     scrollRef: listBoxRef,
@@ -32338,8 +32490,8 @@ function Autocomplete(props) {
 
 // src/inputs/ToggleButton.tsx
 var import_react181 = require("react");
-var import_react_aria70 = require("react-aria");
-var import_react_stately19 = require("react-stately");
+var import_react_aria72 = require("react-aria");
+var import_react_stately20 = require("react-stately");
 var import_runtime172 = require("@homebound/truss/runtime");
 var import_jsx_runtime265 = require("react/jsx-runtime");
 function ToggleButton(props) {
@@ -32360,7 +32512,7 @@ function ToggleButton(props) {
     isDisabled,
     ...otherProps
   };
-  const state = (0, import_react_stately19.useToggleState)({
+  const state = (0, import_react_stately20.useToggleState)({
     ...ariaProps,
     onChange: (e) => {
       const result = onChange(e);
@@ -32377,24 +32529,24 @@ function ToggleButton(props) {
   const {
     isPressed: isPressedFromEvents,
     pressProps
-  } = (0, import_react_aria70.usePress)({
+  } = (0, import_react_aria72.usePress)({
     ref: labelRef,
     isDisabled
   });
   const {
     inputProps
-  } = (0, import_react_aria70.useSwitch)(ariaProps, state, ref);
+  } = (0, import_react_aria72.useSwitch)(ariaProps, state, ref);
   const {
     isFocusVisible: isFocusVisibleFromEvents,
     focusProps
-  } = (0, import_react_aria70.useFocusRing)({
+  } = (0, import_react_aria72.useFocusRing)({
     ...otherProps,
     within: true
   });
   const {
     hoverProps,
     isHovered: isHoveredFromEvents
-  } = (0, import_react_aria70.useHover)({
+  } = (0, import_react_aria72.useHover)({
     isDisabled
   });
   const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
@@ -32448,7 +32600,7 @@ function ToggleButton(props) {
     children: /* @__PURE__ */ (0, import_jsx_runtime265.jsxs)("label", { ...labelAttrs, children: [
       icon && /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(Icon, { icon }),
       label,
-      /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(import_react_aria70.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime265.jsx)("input", { ref, ...inputProps, ...tid.value }) })
+      /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(import_react_aria72.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime265.jsx)("input", { ref, ...inputProps, ...tid.value }) })
     ] })
   });
 }