@homebound/beam 3.78.0 → 3.80.0

package/dist/index.js

@@ -23,6 +23,8 @@ import {
 // src/Css.ts
 import { __invertTrussMediaQuery, trussProps, useRuntimeStyle as _useRuntimeStyle } from "@homebound/truss/runtime";
 var Tokens = /* @__PURE__ */ ((Tokens4) => {
+  Tokens4["AiFieldBg"] = "--b-ai-field-bg";
+  Tokens4["AiFieldFg"] = "--b-ai-field-fg";
   Tokens4["ButtonCautionDisabledBg"] = "--b-button-caution-disabled-bg";
   Tokens4["ButtonCautionDisabledFg"] = "--b-button-caution-disabled-fg";
   Tokens4["ButtonDangerDisabledBg"] = "--b-button-danger-disabled-bg";
@@ -76,8 +78,8 @@ var Tokens = /* @__PURE__ */ ((Tokens4) => {
   Tokens4["NeutralSurfacePressed"] = "--b-neutral-surface-pressed";
   Tokens4["OnPrimary"] = "--b-on-primary";
   Tokens4["OnSurface"] = "--b-on-surface";
-  Tokens4["OnSurfaceMuted"] = "--b-on-surface-muted";
   Tokens4["OnSurfaceDisabled"] = "--b-on-surface-disabled";
+  Tokens4["OnSurfaceMuted"] = "--b-on-surface-muted";
   Tokens4["OnSurfaceRaisedHover"] = "--b-on-surface-raised-hover";
   Tokens4["OnSurfaceRaisedPressed"] = "--b-on-surface-raised-pressed";
   Tokens4["Primary"] = "--b-primary";
@@ -87,11 +89,11 @@ var Tokens = /* @__PURE__ */ ((Tokens4) => {
   Tokens4["SelectionFill"] = "--b-selection-fill";
   Tokens4["SelectionIndicator"] = "--b-selection-indicator";
   Tokens4["Surface"] = "--b-surface";
+  Tokens4["SurfaceDisabled"] = "--b-surface-disabled";
   Tokens4["SurfaceHover"] = "--b-surface-hover";
   Tokens4["SurfaceRaised"] = "--b-surface-raised";
   Tokens4["SurfaceRaisedHover"] = "--b-surface-raised-hover";
   Tokens4["SurfaceRaisedPressed"] = "--b-surface-raised-pressed";
-  Tokens4["SurfaceDisabled"] = "--b-surface-disabled";
   Tokens4["SurfaceSeparator"] = "--b-surface-separator";
   Tokens4["SurfaceSubtle"] = "--b-surface-subtle";
   Tokens4["TextDisabled"] = "--b-text-disabled";
@@ -143,6 +145,10 @@ var CssBuilder = class _CssBuilder {
   get bcTransparent() {
     return this.add("borderColor", "rgba(0,0,0,0)");
   }
+  /** Sets `borderColor: "rgba(0, 0, 0, 1)"`. */
+  get bcBlack() {
+    return this.add("borderColor", "rgba(0, 0, 0, 1)");
+  }
   /** Sets `borderColor: "rgba(255, 253, 253, 1)"`. */
   get bcGray50() {
     return this.add("borderColor", "rgba(255, 253, 253, 1)");
@@ -1803,6 +1809,10 @@ var CssBuilder = class _CssBuilder {
   get transparent() {
     return this.add("color", "rgba(0,0,0,0)");
   }
+  /** Sets `color: "rgba(0, 0, 0, 1)"`. */
+  get black() {
+    return this.add("color", "rgba(0, 0, 0, 1)");
+  }
   /** Sets `color: "rgba(255, 253, 253, 1)"`. */
   get gray50() {
     return this.add("color", "rgba(255, 253, 253, 1)");
@@ -2095,6 +2105,10 @@ var CssBuilder = class _CssBuilder {
   get bgTransparent() {
     return this.add("backgroundColor", "rgba(0,0,0,0)");
   }
+  /** Sets `backgroundColor: "rgba(0, 0, 0, 1)"`. */
+  get bgBlack() {
+    return this.add("backgroundColor", "rgba(0, 0, 0, 1)");
+  }
   /** Sets `backgroundColor: "rgba(255, 253, 253, 1)"`. */
   get bgGray50() {
     return this.add("backgroundColor", "rgba(255, 253, 253, 1)");
@@ -2387,6 +2401,10 @@ var CssBuilder = class _CssBuilder {
   get fTransparent() {
     return this.add("fill", "rgba(0,0,0,0)");
   }
+  /** Sets `fill: "rgba(0, 0, 0, 1)"`. */
+  get fBlack() {
+    return this.add("fill", "rgba(0, 0, 0, 1)");
+  }
   /** Sets `fill: "rgba(255, 253, 253, 1)"`. */
   get fGray50() {
     return this.add("fill", "rgba(255, 253, 253, 1)");
@@ -3841,6 +3859,28 @@ var CssBuilder = class _CssBuilder {
   z(value) {
     return this.add("zIndex", value);
   }
+  // ai
+  /** Sets `backgroundImage: "radial-gradient(40% 1000% at 35.83% 62.18%, rgba(239, 246, 255, 1) 0%, rgba(237, 233, 254, 1) 100%)"`. */
+  get aiBackground() {
+    return this.add(
+      "backgroundImage",
+      "radial-gradient(40% 1000% at 35.83% 62.18%, rgba(239, 246, 255, 1) 0%, rgba(237, 233, 254, 1) 100%)"
+    );
+  }
+  /** Sets `backgroundImage: "linear-gradient(270deg, rgba(29, 78, 216, 1) 2.97%, rgba(109, 40, 217, 1) 87.08%)"`. */
+  get aiBoldBg() {
+    return this.add(
+      "backgroundImage",
+      "linear-gradient(270deg, rgba(29, 78, 216, 1) 2.97%, rgba(109, 40, 217, 1) 87.08%)"
+    );
+  }
+  /** Sets `color: "rgba(109, 40, 217, 1)"; backgroundImage: "linear-gradient(270deg, rgba(29, 78, 216, 1) 2.97%, rgba(109, 40, 217, 1) 87.08%)"; backgroundClip: "text"; WebkitBackgroundClip: "text"; WebkitTextFillColor: "transparent"`. */
+  get aiBoldText() {
+    return this.add("color", "rgba(109, 40, 217, 1)").add(
+      "backgroundImage",
+      "linear-gradient(270deg, rgba(29, 78, 216, 1) 2.97%, rgba(109, 40, 217, 1) 87.08%)"
+    ).add("backgroundClip", "text").add("WebkitBackgroundClip", "text").add("WebkitTextFillColor", "transparent");
+  }
   // fontFamily
   /** Sets `fontFamily: "'Inter', sans-serif"`. */
   get sansSerif() {
@@ -4121,6 +4161,7 @@ function omitUndefinedValues(value) {
 var Palette = /* @__PURE__ */ ((Palette2) => {
   Palette2["White"] = "rgba(255, 255, 255, 1)";
   Palette2["Transparent"] = "rgba(0,0,0,0)";
+  Palette2["Black"] = "rgba(0, 0, 0, 1)";
   Palette2["Gray50"] = "rgba(255, 253, 253, 1)";
   Palette2["Gray100"] = "rgba(247, 245, 245, 1)";
   Palette2["Gray200"] = "rgba(236, 235, 235, 1)";
@@ -10321,6 +10362,37 @@ function getButtonStyles(variant, size) {
   };
 }
 var variantStyles2 = {
+  // Design applies their "AI Bold" ramp to the existing primary button. They haven't specified
+  // hover/pressed/disabled, so those ramps are extrapolated from it rather than design-sourced.
+  ai: {
+    baseStyles: {
+      backgroundImage: "aiBoldBg",
+      color: ["color_var", {
+        "--color": "var(--b-on-primary)"
+      }]
+    },
+    hoverStyles: {
+      backgroundImage: ["backgroundImage_var", {
+        "--backgroundImage": maybeCssVar14(`linear-gradient(270deg, ${"rgba(30, 64, 175, 1)" /* Blue800 */}, ${"rgba(91, 33, 182, 1)" /* Purple800 */})`)
+      }]
+    },
+    pressedStyles: {
+      backgroundImage: ["backgroundImage_var", {
+        "--backgroundImage": maybeCssVar14(`linear-gradient(270deg, ${"rgba(30, 58, 138, 1)" /* Blue900 */}, ${"rgba(76, 29, 149, 1)" /* Purple900 */})`)
+      }]
+    },
+    disabledStyles: {
+      backgroundImage: ["backgroundImage_var", {
+        "--backgroundImage": maybeCssVar14(`linear-gradient(270deg, ${"rgba(191, 219, 254, 1)" /* Blue200 */}, ${"rgba(221, 214, 254, 1)" /* Purple200 */})`)
+      }],
+      color: ["color_var", {
+        "--color": "var(--b-button-primary-disabled-fg)"
+      }]
+    },
+    focusStyles: {
+      boxShadow: "bshFocus"
+    }
+  },
   primary: {
     baseStyles: {
       backgroundColor: ["bgColor_var", {
@@ -14926,6 +14998,7 @@ function GridSelectCard(props) {
     layout,
     label,
     description,
+    tag,
     selected: isSelected = false,
     disabled: isDisabled = false,
     tooltip,
@@ -14946,6 +15019,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 +15094,7 @@ function ListSelectCard(props) {
   const {
     label,
     description,
+    tag,
     selected: isSelected = false,
     disabled: isDisabled = false,
     tooltip,
@@ -15044,7 +15124,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 +15148,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 +15157,7 @@ function SelectCardCheckboxGroupItem(props) {
   );
   const layoutProps = {
     label,
+    tag,
     description,
     selected: isSelected,
     disabled: isOptionDisabled,
@@ -15087,7 +15169,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 +15289,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 +15298,7 @@ function SelectCardRadioGroupItem(props) {
   );
   const layoutProps = {
     label,
+    tag,
     description,
     selected: isSelected,
     disabled: isOptionDisabled,
@@ -15218,7 +15310,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