@homebound/beam 2.402.0 → 2.403.0

package/dist/index.cjs

@@ -12467,8 +12467,16 @@ var import_jsx_runtime76 = require("@emotion/react/jsx-runtime");
 function ToggleChipGroup(props) {
   const { fieldProps } = usePresentationContext();
   const { labelLeftFieldWidth = "50%" } = fieldProps ?? {};
-  const { values, label, labelStyle = fieldProps?.labelStyle ?? "above", options, required, xss } = props;
-  const state = (0, import_react_stately16.useCheckboxGroupState)({ ...props, value: values });
+  const {
+    values,
+    label,
+    labelStyle = fieldProps?.labelStyle ?? "above",
+    options,
+    required,
+    xss,
+    readonly = false
+  } = props;
+  const state = (0, import_react_stately16.useCheckboxGroupState)({ ...props, isReadOnly: readonly, value: values });
   const { groupProps, labelProps } = (0, import_react_aria39.useCheckboxGroup)(props, state);
   const tid = useTestIds(props, "toggleChip");
   const labelSuffix = useLabelSuffix(required, false);
@@ -12495,6 +12503,7 @@ function ToggleChipGroup(props) {
             selected: state.value.includes(o.value),
             label: o.label,
             disabled: o.disabled,
+            readonly: o.readonly,
             startAdornment: o.startAdornment,
             xss,
             ...tid[o.value]
@@ -12506,10 +12515,21 @@ function ToggleChipGroup(props) {
   ] });
 }
 function ToggleChip2(props) {
-  const { label, value, groupState, selected: isSelected, disabled = false, startAdornment, xss, ...others } = props;
+  const {
+    label,
+    value,
+    groupState,
+    selected: isSelected,
+    disabled = false,
+    readonly = false,
+    startAdornment,
+    xss,
+    ...others
+  } = props;
   const isDisabled = !!disabled;
+  const isReadOnly = !!readonly;
   const ref = (0, import_react64.useRef)(null);
-  const { inputProps } = (0, import_react_aria39.useCheckboxGroupItem)({ value, "aria-label": label, isDisabled }, groupState, ref);
+  const { inputProps } = (0, import_react_aria39.useCheckboxGroupItem)({ value, "aria-label": label, isReadOnly, isDisabled }, groupState, ref);
   const { isFocusVisible, focusProps } = (0, import_react_aria39.useFocusRing)();
   const tooltip = resolveTooltip(disabled);
   return maybeTooltip({
@@ -12523,7 +12543,7 @@ function ToggleChip2(props) {
           ...isSelected ? {
             ...Css.color(xss?.color ?? "rgba(255,255,255,1)" /* White */).bgColor(xss?.backgroundColor ?? "rgba(29, 78, 216, 1)" /* Blue700 */).$,
             ":hover:not([data-disabled='true'])": Css.bgColor(xss?.backgroundColor ?? "rgba(30, 64, 175, 1)" /* Blue800 */).$
-          } : { ":hover:not([data-disabled='true'])": Css.bgGray300.$ },
+          } : { ":hover:not([data-disabled='true'])": Css.if(!groupState.isReadOnly).bgGray300.$ },
           ...isFocusVisible ? Css.bshFocus.$ : {}
         },
         "data-selected": isSelected,