@homebound/beam 2.360.0 → 2.362.0

package/dist/components/Chip.d.ts

@@ -4,7 +4,7 @@ import { IconKey } from "./Icon";
 export type ChipType = "caution" | "warning" | "success" | "light" | "dark" | "neutral" | "darkMode" | "info";
 export declare const ChipTypes: Record<ChipType, ChipType>;
 export interface ChipProps<X> {
-    text: string;
+    text: ReactNode;
     title?: ReactNode;
     xss?: X;
     type?: ChipType;

package/dist/inputs/ToggleChipGroup.d.ts

@@ -1,8 +1,11 @@
 import { ReactNode } from "react";
+import { Xss } from "../Css";
 import { PresentationFieldProps } from "../components/PresentationContext";
+type ToggleChipXss = Xss<"color" | "backgroundColor">;
 type ToggleChipItemProps = {
     label: string;
     value: string;
+    startAdornment?: ReactNode;
     /**
      * Whether the interactive element is disabled.
      *
@@ -15,6 +18,7 @@ export interface ToggleChipGroupProps extends Pick<PresentationFieldProps, "labe
     options: ToggleChipItemProps[];
     values: string[];
     onChange: (values: string[]) => void;
+    xss?: ToggleChipXss;
 }
 export declare function ToggleChipGroup(props: ToggleChipGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/inputs/ToggleChipGroup.js

@@ -14,18 +14,19 @@ function ToggleChipGroup(props) {
     var _a;
     const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
     const { labelLeftFieldWidth = "50%" } = fieldProps !== null && fieldProps !== void 0 ? fieldProps : {};
-    const { values, label, labelStyle = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.labelStyle) !== null && _a !== void 0 ? _a : "above", options } = props;
+    const { values, label, labelStyle = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.labelStyle) !== null && _a !== void 0 ? _a : "above", options, xss } = props;
     const state = (0, react_stately_1.useCheckboxGroupState)({ ...props, value: values });
     const { groupProps, labelProps } = (0, react_aria_1.useCheckboxGroup)(props, state);
     const tid = (0, useTestIds_1.useTestIds)(props, "toggleChip");
     return ((0, jsx_runtime_1.jsxs)("div", { ...groupProps, css: Css_1.Css.relative.df.fdc.if(labelStyle === "left").fdr.gap2.maxw100.jcsb.$, children: [(0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, ...labelProps, hidden: labelStyle === "hidden", inline: labelStyle !== "above" }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.gap1
                     .add("flexWrap", "wrap")
                     .if(labelStyle === "left")
-                    .w(labelLeftFieldWidth).$, children: options.map((o) => ((0, jsx_runtime_1.jsx)(ToggleChip, { value: o.value, groupState: state, selected: state.value.includes(o.value), label: o.label, disabled: o.disabled, ...tid[o.value] }, o.value))) })] }));
+                    .w(labelLeftFieldWidth).$, children: options.map((o) => ((0, jsx_runtime_1.jsx)(ToggleChip, { value: o.value, groupState: state, selected: state.value.includes(o.value), label: o.label, disabled: o.disabled, startAdornment: o.startAdornment, xss: xss, ...tid[o.value] }, o.value))) })] }));
 }
 exports.ToggleChipGroup = ToggleChipGroup;
 function ToggleChip(props) {
-    const { label, value, groupState, selected: isSelected, disabled = false, ...others } = props;
+    var _a, _b, _c;
+    const { label, value, groupState, selected: isSelected, disabled = false, startAdornment, xss, ...others } = props;
     const isDisabled = !!disabled;
     const ref = (0, react_1.useRef)(null);
     const { inputProps } = (0, react_aria_1.useCheckboxGroupItem)({ value, "aria-label": label, isDisabled }, groupState, ref);
@@ -38,11 +39,11 @@ function ToggleChip(props) {
                 ...Css_1.Css.relative.dib.br16.sm.px1.cursorPointer.pyPx(4).bgGray200.if(isDisabled).cursorNotAllowed.gray600.pr1.$,
                 ...(isSelected
                     ? {
-                        ...Css_1.Css.white.bgBlue700.$,
-                        ":hover:not([data-disabled='true'])": Css_1.Css.bgBlue800.$,
+                        ...Css_1.Css.color((_a = xss === null || xss === void 0 ? void 0 : xss.color) !== null && _a !== void 0 ? _a : Css_1.Palette.White).bgColor((_b = xss === null || xss === void 0 ? void 0 : xss.backgroundColor) !== null && _b !== void 0 ? _b : Css_1.Palette.Blue700).$,
+                        ":hover:not([data-disabled='true'])": Css_1.Css.bgColor((_c = xss === null || xss === void 0 ? void 0 : xss.backgroundColor) !== null && _c !== void 0 ? _c : Css_1.Palette.Blue800).$,
                     }
                     : { ":hover:not([data-disabled='true'])": Css_1.Css.bgGray300.$ }),
                 ...(isFocusVisible ? Css_1.Css.bshFocus.$ : {}),
-            }, "data-selected": isSelected, "data-disabled": isDisabled, "aria-disabled": isDisabled, ...others, children: [(0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", { ...inputProps, ...focusProps }) }), label] })),
+            }, "data-selected": isSelected, "data-disabled": isDisabled, "aria-disabled": isDisabled, ...others, children: [(0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", { ...inputProps, ...focusProps }) }), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.gap1.$, children: [startAdornment, label] })] })),
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.360.0",
+  "version": "2.362.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",