@homebound/beam 2.340.0 → 2.342.0

package/dist/inputs/Checkbox.d.ts

@@ -1,6 +1,11 @@
 import { ReactNode } from "react";
 export interface CheckboxProps {
     label: string;
+    /** If false this will be wrap in a div element instead of the label
+     * Expects implementer to wrap within a label element to work properly
+     * @default true
+     */
+    withLabelElement?: boolean;
     checkboxOnly?: boolean;
     selected: boolean | "indeterminate";
     /** Handler that is called when the element's selection state changes. */

package/dist/inputs/CheckboxBase.d.ts

@@ -19,6 +19,11 @@ export interface CheckboxBaseProps extends BeamFocusableProps {
     checkboxOnly?: boolean;
     errorMsg?: string;
     helperText?: string | ReactNode;
+    /** If false this will be wrap in a div element instead of the label
+     * Expects implementer to wrap within a label element to work properly
+     * @default true
+     */
+    withLabelElement?: boolean;
 }
 export declare function CheckboxBase(props: CheckboxBaseProps): import("@emotion/react/jsx-runtime").JSX.Element;
 interface StyledCheckboxProps {

package/dist/inputs/CheckboxBase.js

@@ -10,12 +10,12 @@ const ErrorMessage_1 = require("./ErrorMessage");
 const utils_1 = require("../utils");
 const defaultTestId_1 = require("../utils/defaultTestId");
 function CheckboxBase(props) {
-    const { ariaProps, description, isDisabled = false, isIndeterminate = false, isSelected, inputProps, label, errorMsg, helperText, checkboxOnly = false, } = props;
+    const { ariaProps, description, isDisabled = false, isIndeterminate = false, inputProps, label, errorMsg, helperText, checkboxOnly = false, withLabelElement = true, } = props;
     const ref = (0, react_1.useRef)(null);
     const { isFocusVisible, focusProps } = (0, react_aria_1.useFocusRing)(ariaProps);
-    const { hoverProps, isHovered } = (0, react_aria_1.useHover)({ isDisabled });
     const tid = (0, utils_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
-    return ((0, jsx_runtime_1.jsxs)("label", { css: Css_1.Css.df.cursorPointer.relative
+    const Tag = withLabelElement ? "label" : "div";
+    return ((0, jsx_runtime_1.jsxs)(Tag, { css: Css_1.Css.df.cursorPointer.relative
             // Prevents accidental checkbox clicks due to label width being longer
             // than the content.
             .w("max-content")

package/dist/inputs/ToggleChipGroup.d.ts

@@ -11,6 +11,7 @@ type ToggleChipItemProps = {
 };
 export interface ToggleChipGroupProps {
     label: string;
+    labelStyle?: "above" | "left";
     options: ToggleChipItemProps[];
     values: string[];
     onChange: (values: string[]) => void;

package/dist/inputs/ToggleChipGroup.js

@@ -10,11 +10,11 @@ const Label_1 = require("../components/Label");
 const Css_1 = require("../Css");
 const useTestIds_1 = require("../utils/useTestIds");
 function ToggleChipGroup(props) {
-    const { values, label, options, hideLabel } = props;
+    const { values, label, labelStyle, options, hideLabel } = 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.$, children: [(0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, ...labelProps, hidden: hideLabel }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.gap1.add("flexWrap", "wrap").$, 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))) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...groupProps, css: Css_1.Css.relative.df.fdc.if(labelStyle === "left").fdr.maxw100.$, children: [(0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, ...labelProps, hidden: hideLabel }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.gap1.add("flexWrap", "wrap").if(labelStyle === "left").ml2.$, 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))) })] }));
 }
 exports.ToggleChipGroup = ToggleChipGroup;
 function ToggleChip(props) {

package/package.json

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