@homebound/beam 3.33.1 → 3.34.1

package/dist/index.d.cts

@@ -4999,15 +4999,22 @@ type MenuSection = MenuItem & {
 
 type TagXss = Margin | "backgroundColor" | "color";
 type TagType = "info" | "caution" | "warning" | "success" | "neutral";
-type TagProps<X> = {
+type TagPropsBase<X> = {
     text: ReactNode;
     type?: TagType;
     xss?: X;
-    icon?: IconKey;
     /** A tooltip will automatically be displayed if the text is truncated. Set to true to prevent this behavior.
      * @default false */
     preventTooltip?: boolean;
 };
+/** When `iconOnly`, `icon` is required — the tag renders only the icon; `text` stays for tooltip/a11y. */
+type TagProps<X> = TagPropsBase<X> & ({
+    iconOnly?: false;
+    icon?: IconKey;
+} | {
+    iconOnly: true;
+    icon: IconKey;
+});
 /** Tag used for indicating a status */
 declare function Tag<X extends Only<Xss<TagXss>, X>>(props: TagProps<X>): JSX.Element;
 

package/dist/index.d.ts

@@ -4999,15 +4999,22 @@ type MenuSection = MenuItem & {
 
 type TagXss = Margin | "backgroundColor" | "color";
 type TagType = "info" | "caution" | "warning" | "success" | "neutral";
-type TagProps<X> = {
+type TagPropsBase<X> = {
     text: ReactNode;
     type?: TagType;
     xss?: X;
-    icon?: IconKey;
     /** A tooltip will automatically be displayed if the text is truncated. Set to true to prevent this behavior.
      * @default false */
     preventTooltip?: boolean;
 };
+/** When `iconOnly`, `icon` is required — the tag renders only the icon; `text` stays for tooltip/a11y. */
+type TagProps<X> = TagPropsBase<X> & ({
+    iconOnly?: false;
+    icon?: IconKey;
+} | {
+    iconOnly: true;
+    icon: IconKey;
+});
 /** Tag used for indicating a status */
 declare function Tag<X extends Only<Xss<TagXss>, X>>(props: TagProps<X>): JSX.Element;
 

package/dist/index.js

@@ -8284,7 +8284,7 @@ function memoizedTableStyles() {
           // Header's will add `lineClamp2` more locally in their renders.
           // Also `unset`-ing the white-space: nowrap defined in `cellCss` below.
           ...{
-            color: "gray700",
+            color: "gray900",
             fontWeight: "fw6",
             fontSize: "fz_12px",
             lineHeight: "lh_16px",
@@ -21337,24 +21337,32 @@ function Tag(props) {
     type,
     xss,
     preventTooltip = false,
+    iconOnly,
+    icon,
     ...otherProps
   } = props;
-  const typeStyles2 = getStyles(type);
+  const isIconOnly = !!iconOnly && !!icon;
+  const {
+    background,
+    iconColor
+  } = getStyles(type);
   const tid = useTestIds(otherProps);
   const [showTooltip, setShowTooltip] = useState49(false);
   const ref = useRef52(null);
   useResizeObserver6({
     ref,
     onResize: () => {
-      if (ref.current) {
+      if (!isIconOnly && ref.current) {
         setShowTooltip(ref.current.offsetHeight < ref.current.scrollHeight);
       }
     }
   });
+  const tooltipTitle = !preventTooltip ? isIconOnly ? text : showTooltip ? text : void 0 : void 0;
   return maybeTooltip({
-    title: !preventTooltip && showTooltip ? text : void 0,
+    title: tooltipTitle,
     children: /* @__PURE__ */ jsxs82("span", { ...tid, ...trussProps79({
       ...{
+        position: "relative",
         display: "dif",
         fontWeight: "fw6",
         fontSize: "fz_10px",
@@ -21362,18 +21370,23 @@ function Tag(props) {
         textTransform: "ttu",
         alignItems: "aic",
         gap: "gap_4px",
-        paddingLeft: "pl_6px",
-        paddingRight: "pr_6px",
         paddingTop: "pt_2px",
         paddingBottom: "pb_2px",
         color: "gray900",
         borderRadius: "br4"
       },
-      ...typeStyles2,
+      ...isIconOnly ? {
+        paddingLeft: "pl_2px",
+        paddingRight: "pr_2px"
+      } : {
+        paddingLeft: "pl_6px",
+        paddingRight: "pr_6px"
+      },
+      ...background,
       ...xss
     }), children: [
-      otherProps.icon && /* @__PURE__ */ jsx161("span", { className: "fs0", children: /* @__PURE__ */ jsx161(Icon, { icon: otherProps.icon, inc: 1.5 }) }),
-      /* @__PURE__ */ jsx161("span", { ref, className: "oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1 wbba", children: text })
+      icon && /* @__PURE__ */ jsx161("span", { className: "fs0", children: /* @__PURE__ */ jsx161(Icon, { icon, inc: 1.75, color: iconColor }) }),
+      isIconOnly ? /* @__PURE__ */ jsx161("span", { className: "absolute oh cli_inset_50 clp_none bd_0 h_1px m_neg1px w_1px p_0 wsnw o0", children: text }) : /* @__PURE__ */ jsx161("span", { ref, className: "oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1 wbba", children: text })
     ] })
   });
 }
@@ -21381,23 +21394,38 @@ function getStyles(type) {
   switch (type) {
     case "info":
       return {
-        backgroundColor: "bgBlue100"
+        background: {
+          backgroundColor: "bgBlue100"
+        },
+        iconColor: "rgba(37, 99, 235, 1)" /* Blue600 */
       };
     case "caution":
       return {
-        backgroundColor: "bgYellow200"
+        background: {
+          backgroundColor: "bgYellow200"
+        },
+        iconColor: "rgba(161, 98, 7, 1)" /* Yellow700 */
       };
     case "warning":
       return {
-        backgroundColor: "bgRed200"
+        background: {
+          backgroundColor: "bgRed200"
+        },
+        iconColor: "rgba(194, 65, 12, 1)" /* Orange700 */
       };
     case "success":
       return {
-        backgroundColor: "bgGreen200"
+        background: {
+          backgroundColor: "bgGreen200"
+        },
+        iconColor: "rgba(5, 150, 105, 1)" /* Green600 */
       };
     default:
       return {
-        backgroundColor: "bgGray200"
+        background: {
+          backgroundColor: "bgGray200"
+        },
+        iconColor: "rgba(100, 100, 100, 1)" /* Gray700 */
       };
   }
 }