@homebound/beam 3.78.0 → 3.79.0

package/dist/index.d.cts

@@ -7974,6 +7974,8 @@ type SelectCardView = "grid" | "list";
 type SelectCardLayout = "vertical" | "horizontal";
 type SelectCardGroupItemOptionBase<V extends Value> = {
     label: string;
+    /** Optional tag shown above the label (grid view) or next to it (list view). Not supported on icon cards. */
+    tag?: CardTag;
     /** Optional secondary copy shown beneath the label. */
     description?: ReactNode;
     disabled?: boolean;
@@ -7984,13 +7986,15 @@ type SelectCardGroupItemOptionBase<V extends Value> = {
     /** For checkbox groups, selecting this option clears other options and cannot be combined. */
     selectionBehavior?: "exclusive";
 };
-/** Grid-view option; requires either `icon` or `image` (image url shown in place of the icon). */
+/** Grid-view option; requires either `icon` or `image`, and only image cards take a `tag`. */
 type SelectCardGridGroupItemOption<V extends Value> = SelectCardGroupItemOptionBase<V> & ({
     icon: IconProps["icon"];
     image?: never;
+    tag?: never;
 } | {
     image: string;
     icon?: never;
+    tag?: CardTag;
 });
 /** List-view option; `icon` is ignored when present. */
 type SelectCardListGroupItemOption<V extends Value> = SelectCardGroupItemOptionBase<V> & {

package/dist/index.d.ts

@@ -7974,6 +7974,8 @@ type SelectCardView = "grid" | "list";
 type SelectCardLayout = "vertical" | "horizontal";
 type SelectCardGroupItemOptionBase<V extends Value> = {
     label: string;
+    /** Optional tag shown above the label (grid view) or next to it (list view). Not supported on icon cards. */
+    tag?: CardTag;
     /** Optional secondary copy shown beneath the label. */
     description?: ReactNode;
     disabled?: boolean;
@@ -7984,13 +7986,15 @@ type SelectCardGroupItemOptionBase<V extends Value> = {
     /** For checkbox groups, selecting this option clears other options and cannot be combined. */
     selectionBehavior?: "exclusive";
 };
-/** Grid-view option; requires either `icon` or `image` (image url shown in place of the icon). */
+/** Grid-view option; requires either `icon` or `image`, and only image cards take a `tag`. */
 type SelectCardGridGroupItemOption<V extends Value> = SelectCardGroupItemOptionBase<V> & ({
     icon: IconProps["icon"];
     image?: never;
+    tag?: never;
 } | {
     image: string;
     icon?: never;
+    tag?: CardTag;
 });
 /** List-view option; `icon` is ignored when present. */
 type SelectCardListGroupItemOption<V extends Value> = SelectCardGroupItemOptionBase<V> & {

package/dist/index.js

@@ -14926,6 +14926,7 @@ function GridSelectCard(props) {
     layout,
     label,
     description,
+    tag,
     selected: isSelected = false,
     disabled: isDisabled = false,
     tooltip,
@@ -14946,6 +14947,12 @@ function GridSelectCard(props) {
       } : {}
     }), ...tid.img }) : icon && /* @__PURE__ */ jsx76(Icon, { icon, inc: 4, color: isDisabled ? "--b-on-surface-disabled" /* OnSurfaceDisabled */ : "--b-on-surface" /* OnSurface */ }),
     /* @__PURE__ */ jsxs43("span", { className: "df fdc gap_4px w100", children: [
+      tag && /* @__PURE__ */ jsx76("span", { ...trussProps51({
+        display: "df",
+        ...layout !== "horizontal" ? {
+          justifyContent: "jcc"
+        } : {}
+      }), children: /* @__PURE__ */ jsx76(Tag, { type: tag.type, text: tag.text, ...tid.tag }) }),
       /* @__PURE__ */ jsx76("span", { ...trussProps51({
         fontWeight: "fw6",
         fontSize: "fz_14px",
@@ -15015,6 +15022,7 @@ function ListSelectCard(props) {
   const {
     label,
     description,
+    tag,
     selected: isSelected = false,
     disabled: isDisabled = false,
     tooltip,
@@ -15044,7 +15052,8 @@ function ListSelectCard(props) {
             "--color": "var(--b-field-text-disabled)"
           }]
         } : {}
-      }), children: label })
+      }), children: label }),
+      tag && /* @__PURE__ */ jsx78(Tag, { type: tag.type, text: tag.text, ...tid.tag })
     ] }),
     description && /* @__PURE__ */ jsx78("span", { ...trussProps53({
       marginLeft: "ml3",
@@ -15067,7 +15076,7 @@ function ListSelectCard(props) {
 import { jsx as jsx79 } from "react/jsx-runtime";
 function SelectCardCheckboxGroupItem(props) {
   const { option, groupState, isSelected, view, layout, ...others } = props;
-  const { label, description, disabled, tooltip, value } = option;
+  const { label, description, tag, disabled, tooltip, value } = option;
   const ref = useRef32(null);
   const { inputProps, isDisabled: isOptionDisabled } = useCheckboxGroupItem2(
     { value: valueToKey(value), "aria-label": label, isDisabled: disabled ?? false },
@@ -15076,6 +15085,7 @@ function SelectCardCheckboxGroupItem(props) {
   );
   const layoutProps = {
     label,
+    tag,
     description,
     selected: isSelected,
     disabled: isOptionDisabled,
@@ -15087,7 +15097,16 @@ function SelectCardCheckboxGroupItem(props) {
     return /* @__PURE__ */ jsx79(ListSelectCard, { ...layoutProps });
   }
   const gridOption = option;
-  return /* @__PURE__ */ jsx79(GridSelectCard, { ...layoutProps, layout, icon: gridOption.icon, image: gridOption.image });
+  return /* @__PURE__ */ jsx79(
+    GridSelectCard,
+    {
+      ...layoutProps,
+      layout,
+      icon: gridOption.icon,
+      image: gridOption.image,
+      tag: gridOption.tag
+    }
+  );
 }
 
 // src/inputs/SelectCard/utils.ts
@@ -15198,7 +15217,7 @@ import { useRadio as useRadio2 } from "react-aria";
 import { jsx as jsx81 } from "react/jsx-runtime";
 function SelectCardRadioGroupItem(props) {
   const { option, groupState, isSelected, view, layout, ...others } = props;
-  const { label, description, disabled, tooltip, value } = option;
+  const { label, description, tag, disabled, tooltip, value } = option;
   const ref = useRef33(null);
   const { inputProps, isDisabled: isOptionDisabled } = useRadio2(
     { value: valueToKey(value), "aria-label": label, isDisabled: disabled ?? false },
@@ -15207,6 +15226,7 @@ function SelectCardRadioGroupItem(props) {
   );
   const layoutProps = {
     label,
+    tag,
     description,
     selected: isSelected,
     disabled: isOptionDisabled,
@@ -15218,7 +15238,16 @@ function SelectCardRadioGroupItem(props) {
     return /* @__PURE__ */ jsx81(ListSelectCard, { ...layoutProps });
   }
   const gridOption = option;
-  return /* @__PURE__ */ jsx81(GridSelectCard, { ...layoutProps, layout, icon: gridOption.icon, image: gridOption.image });
+  return /* @__PURE__ */ jsx81(
+    GridSelectCard,
+    {
+      ...layoutProps,
+      layout,
+      icon: gridOption.icon,
+      image: gridOption.image,
+      tag: gridOption.tag
+    }
+  );
 }
 
 // src/inputs/SelectCard/SelectCardGroup.tsx