npm - @bento/checkbox - Versions diffs - 0.1.3 → 0.2.0 - Mend

@bento/checkbox 0.1.3 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/README.md CHANGED Viewed

@@ -1,3 +1,11 @@
+import {
+  Meta,
+  ArgTypes,
+  Story,
+  Controls,
+  Source,
+} from '@storybook/addon-docs/blocks';
 # Checkbox
 The `@bento/checkbox` package provides accessible and customizable checkbox inputs. It exports the **CheckboxGroup** and **Checkbox** primitives, enabling you to build individual or groups of checkboxes with consistent keyboard navigation, focus management, and ARIA support. React Aria is used to ensure that the checkboxes are accessible to all users.
@@ -31,13 +39,15 @@ but is not available in that circumstance. |
 | `autoFocus` | `boolean` | No | Whether the element should receive focus on render. |
 | `isIndeterminate` | `boolean` | No | Whether the checkbox is in an indeterminate state. |
 | `isSelected` | `boolean` | No | Whether the checkbox is in a selected state. |
-| `label` | `ReactNode` | No | The label for the control. |
 | `slot` | `string` | No | A named part of a component that can be customized. This is implemented by the consuming component.
 The exposed slot names of a component are available in the components documentation. |
-| `inputProps` | `DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>` | No | Props to pass to the underlying input element. |
-| `labelProps` | `DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>` | No | Props to pass to the label element. |
 | `slots` | `Record<string, object \| Function>` | No | An object that contains the customizations for the slots.
 The main way you interact with the slot system as a consumer. |
+| `ref` | `Ref<HTMLDivElement> \| LegacyRef<Component<CheckboxProps & Slots, any, any>>` | No | Allows getting a ref to the component instance.
+Once the component unmounts, React will set `ref.current` to `null`
+(or call the ref with `null` if you passed a callback ref).
+@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
+| `as` | `"div"` | No |  |
 ### CheckboxGroup
@@ -50,19 +60,18 @@ The main way you interact with the slot system as a consumer. |
 | `isRequired` | `boolean` | No | Whether user input is required on the input before form submission. |
 | `isInvalid` | `boolean` | No | Whether the input value is invalid. |
 | `name` | `string` | No | The name of the input element, used when submitting an HTML form. |
-| `form` | `string` | No | The <form> element to associate the input with.
-The value of this attribute must be the id of a <form> in the same document. |
-| `description` | `string` | No | Description for the checkbox group. |
+| `form` | `string` | No | The `<form>` element to associate the input with.
+The value of this attribute must be the id of a `<form>` in the same document. |
 | `children` | `ReactNode` | No | Checkbox children. |
-| `errorMessage` | `ReactNode \| ((val: ValidationResult) => ReactNode)` | No | Error message for the checkbox group. |
 | `slot` | `string` | No | A named part of a component that can be customized. This is implemented by the consuming component.
 The exposed slot names of a component are available in the components documentation. |
-| `labelProps` | `DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>` | No | Props to pass to the label element. |
-| `descriptionProps` | `DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>` | No | Props to pass to the description element. |
-| `errorMessageProps` | `DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>` | No | Props to pass to the error message element. |
-| `contentProps` | `DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>` | No | The props passed to the content element. |
 | `slots` | `Record<string, object \| Function>` | No | An object that contains the customizations for the slots.
 The main way you interact with the slot system as a consumer. |
+| `ref` | `Ref<HTMLDivElement> \| LegacyRef<Component<CheckboxGroupProps & Slots, any, any>>` | No | Allows getting a ref to the component instance.
+Once the component unmounts, React will set `ref.current` to `null`
+(or call the ref with `null` if you passed a callback ref).
+@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
+| `as` | `"div"` | No |  |
 ## Data Attributes, Slot Map and Props
@@ -72,48 +81,43 @@ The following data attributes can be used to style and customize the `CheckboxGr
 #### `CheckboxGroup` Data Attributes
-| Attribute       | Description                     |
-| --------------- | ------------------------------- |
-| `data-disabled` | Indicates the checkbox group is disabled |
-| `data-read-only` | Indicates the checkbox group is readonly |
-| `data-required` | Indicates the checkbox group is required |
-| `data-invalid`  | Indicates the checkbox group is invalid  |
+| Attribute        | Description                              | Example Values |
+| ---------------- | ---------------------------------------- | -------------- |
+| `data-disabled`  | Indicates the checkbox group is disabled | "true"         |
+| `data-readonly`  | Indicates the checkbox group is readonly | "true"         |
+| `data-required`  | Indicates the checkbox group is required | "true"         |
+| `data-invalid`   | Indicates the checkbox group is invalid  | "true"         |
 #### `Checkbox` Data Attributes
-| Attribute       | Description                     |
-| --------------- | ------------------------------- |
-| `data-disabled` | Indicates the checkbox is disabled |
-| `data-read-only` | Indicates the checkbox is readonly |
-| `data-required` | Indicates the checkbox is required |
-| `data-invalid`  | Indicates the checkbox is invalid  |
-| `data-indeterminate` | Indicates the checkbox is in an indeterminate state |
-| `data-pressed`       | Indicates the checkbox is being pressed |
-| `data-hovered`       | Indicates the checkbox is hovered       |
-| `data-focused`       | Indicates the checkbox has focus        |
-| `data-focus-visible` | Indicates focus should be visible    |
-| `data-selected`      | Indicates the checkbox is selected      |
-### Slot Map
-The `CheckboxGroup` and `Checkbox` primitives are built off of the `Control` and `ControlGroup` primitives, which provide a consisten set of slot values, as shown below.
-#### `CheckboxGroup` Slot Map
-| Slot Name           | Description                  |
-| ------------------- | ---------------------------- |
-| `group.label`       | Label for checkbox group     |
-| `group.description` | Description for checkbox group|
-| `group.error`       | Error message for checkbox group|
-#### `Checkbox` Slot Map
-| Slot Name       | Description    |
-| --------------- | -------------- |
-| `control.icon-checked`  | Icon for checked checkbox |
-| `control.icon-unchecked`  | Icon for unchecked checkbox |
-| `control.icon-indeterminate`  | Icon for indeterminate checkbox |
-| `control.label` | Text for checkbox |
+| Attribute            | Description                                         | Example Values |
+| -------------------- | --------------------------------------------------- | -------------- |
+| `data-disabled`      | Indicates the checkbox is disabled                  | "true"         |
+| `data-readonly`      | Indicates the checkbox is readonly                  | "true"         |
+| `data-required`      | Indicates the checkbox is required                  | "true"         |
+| `data-invalid`       | Indicates the checkbox is invalid                   | "true"         |
+| `data-indeterminate` | Indicates the checkbox is in an indeterminate state | "true"         |
+| `data-pressed`       | Indicates the checkbox is being pressed             | "true"         |
+| `data-hovered`       | Indicates the checkbox is hovered                   | "true"         |
+| `data-focused`       | Indicates the checkbox has focus                    | "true"         |
+| `data-focus-visible` | Indicates focus should be visible                   | "true"         |
+| `data-selected`      | Indicates the checkbox is selected                  | "true"         |
+### `CheckboxGroup` Slot Map
+| Slot Name     | Description                    |
+| ------------- | ------------------------------ |
+| `label`       | Label for checkbox group       |
+| `description` | Description for checkbox group |
+| `error`       | Error for checkbox group       |
+### `Checkbox` Slot Map
+| Slot Name            | Description                     |
+| -------------------- | ------------------------------- |
+| `icon-checked`       | Icon for checked checkbox       |
+| `icon-unchecked`     | Icon for unchecked checkbox     |
+| `icon-indeterminate` | Icon for indeterminate checkbox |
 ## Examples
@@ -168,12 +172,17 @@ The `CheckboxGroup` allows a user to select multiple items from a list of `Check
 /* v8 ignore next */
 import React from 'react';
 import { Checkbox, CheckboxGroup } from '@bento/checkbox';
+import { Text } from '@bento/text';
+import { FieldError } from '@bento/field-error';
 export function CheckboxGroupExample(args: React.ComponentProps<typeof CheckboxGroup>) {
   return (
-    <CheckboxGroup label="Checkbox Group" name="checkbox-group-example" {...args}>
+    <CheckboxGroup name="checkbox-group-example" {...args}>
+      <Text slot="label">Checkbox Group</Text>
       <Checkbox value="checkbox-1">Checkbox 1</Checkbox>
       <Checkbox value="checkbox-2">Checkbox 2</Checkbox>
+      <Text slot="description">Select your options</Text>
+      <FieldError slot="error">This is an error message</FieldError>
     </CheckboxGroup>
   );
 }
@@ -187,12 +196,14 @@ The `CheckboxGroup` can also be used in a controlled manner, where you manage th
 /* v8 ignore next */
 import React, { useState } from 'react';
 import { Checkbox, CheckboxGroup } from '@bento/checkbox';
+import { Text } from '@bento/text';
 export function CheckboxGroupControlledExample() {
   const [selectedValues, setSelectedValues] = useState<string[]>([]);
   return (
-    <CheckboxGroup label="Checkbox Group" value={selectedValues} onChange={setSelectedValues}>
+    <CheckboxGroup value={selectedValues} onChange={setSelectedValues}>
+      <Text slot="label">Checkbox Group</Text>
       <Checkbox value="option1">Option 1</Checkbox>
       <Checkbox value="option2">Option 2</Checkbox>
       <Checkbox value="option3">Option 3</Checkbox>
@@ -209,6 +220,7 @@ The `CheckboxGroup` can also support an indeterminate state, which is useful whe
 /* v8 ignore next */
 import React, { useState } from 'react';
 import { Checkbox, CheckboxGroup } from '@bento/checkbox';
+import { Text } from '@bento/text';
 export function CheckboxGroupIndeterminateExample() {
   const [checkedItems, setCheckedItems] = useState<Set<string>>(new Set());
@@ -254,7 +266,8 @@ export function CheckboxGroupIndeterminateExample() {
   }
   return (
-    <CheckboxGroup label="Select Items" value={Array.from(checkedItems)}>
+    <CheckboxGroup value={Array.from(checkedItems)} data-value={Array.from(checkedItems)}>
+      <Text slot="label">Select Items</Text>
       <Checkbox
         name="select-all"
         value="select-all"

package/README.mdx CHANGED Viewed

@@ -1,4 +1,10 @@
-import { Meta, ArgTypes, Story, Controls, Source } from '@storybook/addon-docs/blocks';
+import {
+  Meta,
+  ArgTypes,
+  Story,
+  Controls,
+  Source,
+} from '@storybook/addon-docs/blocks';
 import * as Stories from './checkbox.stories.tsx';
 import CheckboxControlledExample from './examples/checkbox-controlled.tsx?raw';
 import CheckboxExample from './examples/checkbox.tsx?raw';
@@ -42,48 +48,43 @@ The following data attributes can be used to style and customize the `CheckboxGr
 #### `CheckboxGroup` Data Attributes
-| Attribute       | Description                     |
-| --------------- | ------------------------------- |
-| `data-disabled` | Indicates the checkbox group is disabled |
-| `data-read-only` | Indicates the checkbox group is readonly |
-| `data-required` | Indicates the checkbox group is required |
-| `data-invalid`  | Indicates the checkbox group is invalid  |
+| Attribute        | Description                              | Example Values |
+| ---------------- | ---------------------------------------- | -------------- |
+| `data-disabled`  | Indicates the checkbox group is disabled | "true"         |
+| `data-readonly`  | Indicates the checkbox group is readonly | "true"         |
+| `data-required`  | Indicates the checkbox group is required | "true"         |
+| `data-invalid`   | Indicates the checkbox group is invalid  | "true"         |
 #### `Checkbox` Data Attributes
-| Attribute       | Description                     |
-| --------------- | ------------------------------- |
-| `data-disabled` | Indicates the checkbox is disabled |
-| `data-read-only` | Indicates the checkbox is readonly |
-| `data-required` | Indicates the checkbox is required |
-| `data-invalid`  | Indicates the checkbox is invalid  |
-| `data-indeterminate` | Indicates the checkbox is in an indeterminate state |
-| `data-pressed`       | Indicates the checkbox is being pressed |
-| `data-hovered`       | Indicates the checkbox is hovered       |
-| `data-focused`       | Indicates the checkbox has focus        |
-| `data-focus-visible` | Indicates focus should be visible    |
-| `data-selected`      | Indicates the checkbox is selected      |
-### Slot Map
-The `CheckboxGroup` and `Checkbox` primitives are built off of the `Control` and `ControlGroup` primitives, which provide a consisten set of slot values, as shown below.
-#### `CheckboxGroup` Slot Map
-| Slot Name           | Description                  |
-| ------------------- | ---------------------------- |
-| `group.label`       | Label for checkbox group     |
-| `group.description` | Description for checkbox group|
-| `group.error`       | Error message for checkbox group|
-#### `Checkbox` Slot Map
-| Slot Name       | Description    |
-| --------------- | -------------- |
-| `control.icon-checked`  | Icon for checked checkbox |
-| `control.icon-unchecked`  | Icon for unchecked checkbox |
-| `control.icon-indeterminate`  | Icon for indeterminate checkbox |
-| `control.label` | Text for checkbox |
+| Attribute            | Description                                         | Example Values |
+| -------------------- | --------------------------------------------------- | -------------- |
+| `data-disabled`      | Indicates the checkbox is disabled                  | "true"         |
+| `data-readonly`      | Indicates the checkbox is readonly                  | "true"         |
+| `data-required`      | Indicates the checkbox is required                  | "true"         |
+| `data-invalid`       | Indicates the checkbox is invalid                   | "true"         |
+| `data-indeterminate` | Indicates the checkbox is in an indeterminate state | "true"         |
+| `data-pressed`       | Indicates the checkbox is being pressed             | "true"         |
+| `data-hovered`       | Indicates the checkbox is hovered                   | "true"         |
+| `data-focused`       | Indicates the checkbox has focus                    | "true"         |
+| `data-focus-visible` | Indicates focus should be visible                   | "true"         |
+| `data-selected`      | Indicates the checkbox is selected                  | "true"         |
+### `CheckboxGroup` Slot Map
+| Slot Name     | Description                    |
+| ------------- | ------------------------------ |
+| `label`       | Label for checkbox group       |
+| `description` | Description for checkbox group |
+| `error`       | Error for checkbox group       |
+### `Checkbox` Slot Map
+| Slot Name            | Description                     |
+| -------------------- | ------------------------------- |
+| `icon-checked`       | Icon for checked checkbox       |
+| `icon-unchecked`     | Icon for unchecked checkbox     |
+| `icon-indeterminate` | Icon for indeterminate checkbox |
 ## Examples

package/dist/index.cjs CHANGED Viewed

@@ -1,14 +1,15 @@
 'use strict';
 var React2 = require('react');
-var control = require('@bento/control');
+var container = require('@bento/container');
+var useDataAttributes = require('@bento/use-data-attributes');
 var icon = require('@bento/icon');
 var slots = require('@bento/slots');
 var useProps = require('@bento/use-props');
-var reactAria = require('react-aria');
+var visuallyHidden = require('@bento/visually-hidden');
 var utils = require('@react-aria/utils');
+var reactAria = require('react-aria');
 var reactStately = require('react-stately');
-var useDataAttributes = require('@bento/use-data-attributes');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -20,17 +21,11 @@ var CheckboxGroupStateContext = React2__default.default.createContext(null);
 // src/checkbox.tsx
 var Checkbox = slots.withSlots("BentoCheckbox", function Checkbox2(args) {
   const { props, apply } = useProps.useProps(args);
-  const {
-    isRequired = false,
-    isIndeterminate = false,
-    isDisabled: isDisabledProp = false,
-    isSelected: isSelectedProp = false,
-    isReadOnly: isReadOnlyProp = false
-  } = props;
   const groupState = React2.useContext(CheckboxGroupStateContext);
   const ref = React2.useRef(null);
   const inputRef = utils.useObjectRef(React2.useMemo(() => utils.mergeRefs(ref, props.inputRef), [ref, props.inputRef]));
-  let { labelProps, inputProps, isSelected, isReadOnly, isDisabled, isPressed, isInvalid } = groupState ? reactAria.useCheckboxGroupItem(
+  const { isFocused, isFocusVisible, focusProps } = reactAria.useFocusRing();
+  const { labelProps, inputProps, isSelected, isPressed, isDisabled, isReadOnly, isInvalid } = groupState ? reactAria.useCheckboxGroupItem(
     {
       ...props,
       // Value is optional for standalone checkboxes, but required for CheckboxGroup items;
@@ -39,80 +34,62 @@ var Checkbox = slots.withSlots("BentoCheckbox", function Checkbox2(args) {
     },
     groupState,
     inputRef
-  ) : reactAria.useCheckbox(
-    {
-      ...props
-    },
-    reactStately.useToggleState(props),
-    inputRef
-  );
-  const interactionDisabled = isDisabledProp || isDisabled || isReadOnly || isReadOnlyProp;
+  ) : reactAria.useCheckbox(props, reactStately.useToggleState(props), inputRef);
+  const interactionDisabled = props.isDisabled || isDisabled || isReadOnly;
   const { hoverProps, isHovered } = reactAria.useHover({
     ...props,
     isDisabled: interactionDisabled
   });
-  const { isFocused, isFocusVisible, focusProps } = reactAria.useFocusRing();
   return /* @__PURE__ */ React2__default.default.createElement(
-    control.Control,
+    container.Container,
     {
-      slot: "control",
-      labelProps: utils.mergeProps(labelProps, hoverProps),
-      inputProps: utils.mergeProps(inputProps, focusProps),
-      label: props.children,
-      inputRef,
-      "aria-checked": isIndeterminate ? "mixed" : void 0,
-      ...apply(props, ["isReadOnly", "isSelected", "isIndeterminate", "isDisabled", "value", "autoFocus"]),
+      as: "label",
+      "aria-checked": props.isIndeterminate ? "mixed" : void 0,
+      ...apply(utils.mergeProps(labelProps, hoverProps)),
       ...useDataAttributes.useDataAttributes({
-        selected: isSelected || isSelectedProp,
+        selected: isSelected,
         pressed: isPressed,
         hovered: isHovered,
         focused: isFocused,
         focusVisible: isFocusVisible,
         disabled: interactionDisabled,
-        readOnly: isReadOnly || isReadOnlyProp,
+        readonly: isReadOnly,
         invalid: isInvalid,
-        required: isRequired,
-        indeterminate: isIndeterminate
+        required: props.isRequired,
+        indeterminate: props.isIndeterminate
       })
     },
-    isIndeterminate ? /* @__PURE__ */ React2__default.default.createElement(icon.Icon, { slot: "icon-indeterminate", icon: "checkboxIndeterminate" }, /* @__PURE__ */ React2__default.default.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React2__default.default.createElement("rect", { x: "6", y: "11", width: "12", height: "2", fill: "currentColor" }))) : isSelected ? /* @__PURE__ */ React2__default.default.createElement(icon.Icon, { slot: "icon-checked", icon: "checkboxChecked" }, /* @__PURE__ */ React2__default.default.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React2__default.default.createElement("path", { d: "M9,16.2L4.8,12l-1.4,1.4L9,19L21,7l-1.4-1.4L9,16.2z", fill: "currentColor" }))) : /* @__PURE__ */ React2__default.default.createElement(icon.Icon, { slot: "icon-unchecked", icon: "checkboxUnchecked" }, /* @__PURE__ */ React2__default.default.createElement("svg", { width: 24, height: 24, "aria-hidden": "true" }, /* @__PURE__ */ React2__default.default.createElement("rect", { x: 4, y: 4, width: 16, height: 16, rx: 3, fill: "none", stroke: "gray", strokeWidth: 2 })))
+    /* @__PURE__ */ React2__default.default.createElement(visuallyHidden.VisuallyHidden, null, /* @__PURE__ */ React2__default.default.createElement("input", { ...utils.mergeProps(inputProps, focusProps), ref: inputRef })),
+    props.isIndeterminate ? /* @__PURE__ */ React2__default.default.createElement(icon.Icon, { slot: "icon-indeterminate", icon: "checkboxIndeterminate" }, /* @__PURE__ */ React2__default.default.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React2__default.default.createElement("rect", { x: "6", y: "11", width: "12", height: "2", fill: "currentColor" }))) : isSelected ? /* @__PURE__ */ React2__default.default.createElement(icon.Icon, { slot: "icon-checked", icon: "checkboxChecked" }, /* @__PURE__ */ React2__default.default.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React2__default.default.createElement("path", { d: "M9,16.2L4.8,12l-1.4,1.4L9,19L21,7l-1.4-1.4L9,16.2z", fill: "currentColor" }))) : /* @__PURE__ */ React2__default.default.createElement(icon.Icon, { slot: "icon-unchecked", icon: "checkboxUnchecked" }, /* @__PURE__ */ React2__default.default.createElement("svg", { width: 24, height: 24 }, /* @__PURE__ */ React2__default.default.createElement("rect", { x: 4, y: 4, width: 16, height: 16, rx: 3, fill: "none", stroke: "gray", strokeWidth: 2 }))),
+    props.children
   );
 });
 var CheckboxGroup = slots.withSlots("BentoCheckboxGroup", function CheckboxGroup2(args) {
-  const { errorMessage, ...restArgs } = args;
-  const { props, apply } = useProps.useProps(restArgs);
+  const { props, apply } = useProps.useProps(args);
   const state = reactStately.useCheckboxGroupState(props);
-  const { children } = props;
   const { groupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = reactAria.useCheckboxGroup(
-    props,
+    { ...props, label: props.label ?? "Checkbox Group", description: props.description ?? "Description" },
     state
   );
-  const displayedErrorMessage = React2.useMemo(
-    function getErrorMessage() {
-      return typeof errorMessage === "function" ? errorMessage(validationResult) : errorMessage || validationResult.validationErrors.join(", ");
-    },
-    [errorMessage, validationResult]
-  );
-  return /* @__PURE__ */ React2__default.default.createElement(
-    control.ControlGroup,
+  return /* @__PURE__ */ React2__default.default.createElement(CheckboxGroupStateContext.Provider, { value: state }, /* @__PURE__ */ React2__default.default.createElement(
+    container.Container,
     {
-      slot: "group",
-      labelProps,
-      descriptionProps,
-      errorMessage: displayedErrorMessage,
-      errorMessageProps,
-      ...groupProps,
-      ...apply(props, ["isInvalid", "isDisabled", "isReadOnly", "isRequired", "validationBehavior"]),
+      ...apply(groupProps),
       ...useDataAttributes.useDataAttributes({
         orientation: props.orientation || "vertical",
         invalid: state.isInvalid,
         disabled: state.isDisabled,
         readonly: state.isReadOnly,
         required: state.isRequired
-      })
+      }),
+      slots: {
+        label: labelProps,
+        description: descriptionProps,
+        error: reactAria.mergeProps(errorMessageProps, validationResult)
+      }
     },
-    /* @__PURE__ */ React2__default.default.createElement(CheckboxGroupStateContext.Provider, { value: state }, children)
-  );
+    props.children
+  ));
 });
 exports.Checkbox = Checkbox;

package/dist/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/checkbox-group-state.tsx","../src/checkbox.tsx","../src/checkbox-group.tsx"],"names":["React","withSlots","Checkbox","useProps","useContext","useRef","useObjectRef","useMemo","mergeRefs","useCheckboxGroupItem","useCheckbox","useToggleState","useHover","useFocusRing","Control","mergeProps","useDataAttributes","Icon","CheckboxGroup","useCheckboxGroupState","useCheckboxGroup","ControlGroup"],"mappings":"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","file":"index.cjs","sourcesContent":["import React from 'react';\nimport { CheckboxGroupState } from 'react-stately';\n\nexport const CheckboxGroupStateContext = React.createContext<CheckboxGroupState \| null>(null);\n","import React, { useContext, useRef, useMemo } from 'react';\nimport { Control, ControlProps } from '@bento/control';\nimport { Icon } from '@bento/icon';\nimport { withSlots } from '@bento/slots';\nimport { useProps } from '@bento/use-props';\nimport { useFocusRing, useHover, type AriaCheckboxProps, useCheckboxGroupItem, useCheckbox } from 'react-aria';\nimport { mergeProps, mergeRefs, useObjectRef } from '@react-aria/utils';\nimport { useToggleState } from 'react-stately';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { CheckboxGroupStateContext } from './checkbox-group-state';\n\nexport interface CheckboxProps extends AriaCheckboxProps, Partial<Omit<ControlProps, keyof AriaCheckboxProps>> {\n /** The value of the checkbox, used when submitting an HTML form. /\n value?: string;\n\n /* The name of the checkbox. /\n name?: string;\n\n /* A ref for the HTML input element. /\n inputRef?: React.Ref<HTMLInputElement>;\n\n /* The label for the checkbox. Accepts any renderable node. /\n children?: React.ReactNode;\n\n /* Whether the checkbox is required or not. /\n isRequired?: boolean;\n\n /* Whether the input can be selected but not changed by the user. /\n isReadOnly?: boolean;\n\n /\n Whether the checkbox is disabled or not. Shows that a selection exists,\n * but is not available in that circumstance.\n /\n isDisabled?: boolean;\n\n /* Whether the element should receive focus on render. /\n autoFocus?: boolean;\n\n /* Whether the checkbox is in an indeterminate state. /\n isIndeterminate?: boolean;\n\n /* Whether the checkbox is in a selected state. /\n isSelected?: boolean;\n}\n\n/\n The `Checkbox` is a single checkbox option that can be selected by the user.\n \n @component\n * @param args - The props {@link CheckboxProps} passed to the Checkbox component.\n \n @public\n /\nexport const Checkbox = withSlots('BentoCheckbox', function Checkbox(args: CheckboxProps) {\n const { props, apply } = useProps(args);\n const {\n isRequired = false,\n isIndeterminate = false,\n isDisabled: isDisabledProp = false,\n isSelected: isSelectedProp = false,\n isReadOnly: isReadOnlyProp = false\n } = props;\n\n const groupState = useContext(CheckboxGroupStateContext);\n\n const ref = useRef<HTMLInputElement>(null);\n const inputRef = useObjectRef(useMemo(() => mergeRefs(ref, props.inputRef), [ref, props.inputRef]));\n\n let { labelProps, inputProps, isSelected, isReadOnly, isDisabled, isPressed, isInvalid } = groupState\n ? useCheckboxGroupItem(\n {\n ...props,\n // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n // it's passed explicitly here to avoid typescript error (requires ignore)(recommendation from React Aria).\n value: (props as Required<Pick<typeof props, 'value'>>).value\n },\n groupState,\n inputRef\n )\n : useCheckbox(\n {\n ...props\n },\n useToggleState(props),\n inputRef\n );\n\n const interactionDisabled = isDisabledProp \|\| isDisabled \|\| isReadOnly \|\| isReadOnlyProp;\n const { hoverProps, isHovered } = useHover({\n ...props,\n isDisabled: interactionDisabled\n });\n const { isFocused, isFocusVisible, focusProps } = useFocusRing();\n\n return (\n <Control\n slot=\"control\"\n labelProps={mergeProps(labelProps, hoverProps)}\n inputProps={mergeProps(inputProps, focusProps)}\n label={props.children}\n inputRef={inputRef}\n aria-checked={isIndeterminate ? 'mixed' : undefined}\n {...apply(props, ['isReadOnly', 'isSelected', 'isIndeterminate', 'isDisabled', 'value', 'autoFocus'])}\n {...useDataAttributes({\n selected: isSelected \|\| isSelectedProp,\n pressed: isPressed,\n hovered: isHovered,\n focused: isFocused,\n focusVisible: isFocusVisible,\n disabled: interactionDisabled,\n readOnly: isReadOnly \|\| isReadOnlyProp,\n invalid: isInvalid,\n required: isRequired,\n indeterminate: isIndeterminate\n })}\n >\n {isIndeterminate ? (\n <Icon slot=\"icon-indeterminate\" icon=\"checkboxIndeterminate\">\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"6\" y=\"11\" width=\"12\" height=\"2\" fill=\"currentColor\" />\n </svg>\n </Icon>\n ) : isSelected ? (\n <Icon slot=\"icon-checked\" icon=\"checkboxChecked\">\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9,16.2L4.8,12l-1.4,1.4L9,19L21,7l-1.4-1.4L9,16.2z\" fill=\"currentColor\" />\n </svg>\n </Icon>\n ) : (\n <Icon slot=\"icon-unchecked\" icon=\"checkboxUnchecked\">\n <svg width={24} height={24} aria-hidden=\"true\">\n <rect x={4} y={4} width={16} height={16} rx={3} fill=\"none\" stroke=\"gray\" strokeWidth={2} />\n </svg>\n </Icon>\n )}\n </Control>\n );\n});\n","import React, { useMemo } from 'react';\nimport { useProps } from '@bento/use-props';\nimport { ControlGroup, ControlGroupProps } from '@bento/control';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { type ValidationResult } from '@react-types/shared';\nimport { AriaCheckboxGroupProps, useCheckboxGroup } from 'react-aria';\nimport { useCheckboxGroupState } from 'react-stately';\nimport { withSlots } from '@bento/slots';\nimport { CheckboxGroupStateContext } from './checkbox-group-state';\n\nexport interface CheckboxGroupProps\n extends AriaCheckboxGroupProps,\n Partial<Omit<ControlGroupProps, keyof AriaCheckboxGroupProps>> {\n /* The current value of the checkbox group (controlled). /\n value?: string[];\n\n /* The default value of the checkbox group (uncontrolled). /\n defaultValue?: string[];\n\n /* Whether the input is disabled. /\n isDisabled?: boolean;\n\n /* Whether the input can be selected but not changed by the user. /\n isReadOnly?: boolean;\n\n /* Whether user input is required on the input before form submission. /\n isRequired?: boolean;\n\n /* Whether the input value is invalid. /\n isInvalid?: boolean;\n\n /* The name of the input element, used when submitting an HTML form. /\n name?: string;\n\n /\n The <form> element to associate the input with.\n * The value of this attribute must be the id of a <form> in the same document.\n /\n form?: string;\n\n /* Description for the checkbox group. /\n description?: string;\n\n /* Checkbox children. /\n children?: React.ReactNode;\n\n /* Error message for the checkbox group. /\n errorMessage?: React.ReactNode \| ((val: ValidationResult) => React.ReactNode);\n}\n\n/\n The `CheckboxGroup` allows a user to select items from a list of `Checkbox` components.\n \n @component\n * @param {CheckboxGroupProps} args - The props passed to the CheckboxGroup component.\n \n @public\n */\nexport const CheckboxGroup = withSlots('BentoCheckboxGroup', function CheckboxGroup(args: CheckboxGroupProps) {\n const { errorMessage, ...restArgs } = args;\n const { props, apply } = useProps(restArgs);\n const state = useCheckboxGroupState(props);\n const { children } = props;\n const { groupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useCheckboxGroup(\n props,\n state\n );\n\n const displayedErrorMessage = useMemo(\n function getErrorMessage() {\n return typeof errorMessage === 'function'\n ? errorMessage(validationResult)\n : errorMessage \|\| validationResult.validationErrors.join(', ');\n },\n [errorMessage, validationResult]\n );\n\n return (\n <ControlGroup\n slot=\"group\"\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessage={displayedErrorMessage}\n errorMessageProps={errorMessageProps}\n {...groupProps}\n {...apply(props, ['isInvalid', 'isDisabled', 'isReadOnly', 'isRequired', 'validationBehavior'])}\n {...useDataAttributes({\n orientation: props.orientation \|\| 'vertical',\n invalid: state.isInvalid,\n disabled: state.isDisabled,\n readonly: state.isReadOnly,\n required: state.isRequired\n })}\n >\n <CheckboxGroupStateContext.Provider value={state}>{children}</CheckboxGroupStateContext.Provider>\n </ControlGroup>\n );\n});\n"]}
1	+ {"version":3,"sources":["../src/checkbox-group-state.tsx","../src/checkbox.tsx","../src/checkbox-group.tsx"],"names":["React","withSlots","Checkbox","useProps","useContext","useRef","useObjectRef","useMemo","mergeRefs","useFocusRing","useCheckboxGroupItem","useCheckbox","useToggleState","useHover","Container","mergeProps","useDataAttributes","VisuallyHidden","Icon","CheckboxGroup","useCheckboxGroupState","useCheckboxGroup"],"mappings":"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","file":"index.cjs","sourcesContent":["import React from 'react';\nimport { CheckboxGroupState } from 'react-stately';\n\nexport const CheckboxGroupStateContext = React.createContext<CheckboxGroupState \| null>(null);\n","import React, { useContext, useRef, useMemo } from 'react';\nimport { Container, type ContainerProps } from '@bento/container';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { Icon } from '@bento/icon';\nimport { withSlots } from '@bento/slots';\nimport { useProps } from '@bento/use-props';\nimport { VisuallyHidden } from '@bento/visually-hidden';\nimport { mergeProps, mergeRefs, useObjectRef } from '@react-aria/utils';\nimport { useFocusRing, useHover, useCheckbox, useCheckboxGroupItem, type AriaCheckboxProps } from 'react-aria';\nimport { useToggleState } from 'react-stately';\nimport { CheckboxGroupStateContext } from './checkbox-group-state';\n\nexport interface CheckboxProps extends AriaCheckboxProps, Omit<ContainerProps, keyof AriaCheckboxProps> {\n /** The value of the checkbox, used when submitting an HTML form. /\n value?: string;\n\n /* The name of the checkbox. /\n name?: string;\n\n /* A ref for the HTML input element. /\n inputRef?: React.Ref<HTMLInputElement>;\n\n /* The label for the checkbox. Accepts any renderable node. /\n children?: React.ReactNode;\n\n /* Whether the checkbox is required or not. /\n isRequired?: boolean;\n\n /* Whether the input can be selected but not changed by the user. /\n isReadOnly?: boolean;\n\n /\n Whether the checkbox is disabled or not. Shows that a selection exists,\n * but is not available in that circumstance.\n /\n isDisabled?: boolean;\n\n /* Whether the element should receive focus on render. /\n autoFocus?: boolean;\n\n /* Whether the checkbox is in an indeterminate state. /\n isIndeterminate?: boolean;\n\n /* Whether the checkbox is in a selected state. /\n isSelected?: boolean;\n}\n\n/\n The `Checkbox` is a single checkbox option that can be selected by the user.\n /\nexport const Checkbox = withSlots('BentoCheckbox', function Checkbox(args: CheckboxProps) {\n const { props, apply } = useProps(args);\n const groupState = useContext(CheckboxGroupStateContext);\n const ref = useRef<HTMLInputElement>(null);\n const inputRef = useObjectRef(useMemo(() => mergeRefs(ref, props.inputRef), [ref, props.inputRef]));\n const { isFocused, isFocusVisible, focusProps } = useFocusRing();\n\n const { labelProps, inputProps, isSelected, isPressed, isDisabled, isReadOnly, isInvalid } = groupState\n ? useCheckboxGroupItem(\n {\n ...props,\n // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n // it's passed explicitly here to avoid typescript error (requires ignore)(recommendation from React Aria).\n value: (props as Required<Pick<typeof props, 'value'>>).value\n },\n groupState,\n inputRef\n )\n : useCheckbox(props, useToggleState(props), inputRef);\n\n const interactionDisabled = props.isDisabled \|\| isDisabled \|\| isReadOnly;\n const { hoverProps, isHovered } = useHover({\n ...props,\n isDisabled: interactionDisabled\n });\n\n return (\n <Container\n as=\"label\"\n aria-checked={props.isIndeterminate ? 'mixed' : undefined}\n {...apply(mergeProps(labelProps, hoverProps))}\n {...useDataAttributes({\n selected: isSelected,\n pressed: isPressed,\n hovered: isHovered,\n focused: isFocused,\n focusVisible: isFocusVisible,\n disabled: interactionDisabled,\n readonly: isReadOnly,\n invalid: isInvalid,\n required: props.isRequired,\n indeterminate: props.isIndeterminate\n })}\n >\n <VisuallyHidden>\n <input {...mergeProps(inputProps, focusProps)} ref={inputRef} />\n </VisuallyHidden>\n\n {props.isIndeterminate ? (\n <Icon slot=\"icon-indeterminate\" icon=\"checkboxIndeterminate\">\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"6\" y=\"11\" width=\"12\" height=\"2\" fill=\"currentColor\" />\n </svg>\n </Icon>\n ) : isSelected ? (\n <Icon slot=\"icon-checked\" icon=\"checkboxChecked\">\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9,16.2L4.8,12l-1.4,1.4L9,19L21,7l-1.4-1.4L9,16.2z\" fill=\"currentColor\" />\n </svg>\n </Icon>\n ) : (\n <Icon slot=\"icon-unchecked\" icon=\"checkboxUnchecked\">\n <svg width={24} height={24}>\n <rect x={4} y={4} width={16} height={16} rx={3} fill=\"none\" stroke=\"gray\" strokeWidth={2} />\n </svg>\n </Icon>\n )}\n {props.children}\n </Container>\n );\n});\n","import React from 'react';\nimport { withSlots } from '@bento/slots';\nimport { Container, type ContainerProps } from '@bento/container';\nimport { useProps } from '@bento/use-props';\nimport { useCheckboxGroup, mergeProps, type AriaCheckboxGroupProps } from 'react-aria';\nimport { useCheckboxGroupState } from 'react-stately';\nimport { CheckboxGroupStateContext } from './checkbox-group-state';\nimport { useDataAttributes } from '@bento/use-data-attributes';\n\nexport interface CheckboxGroupProps extends AriaCheckboxGroupProps, Omit<ContainerProps, keyof AriaCheckboxGroupProps> {\n /* The current value of the checkbox group (controlled). /\n value?: string[];\n\n /* The default value of the checkbox group (uncontrolled). /\n defaultValue?: string[];\n\n /* Whether the input is disabled. /\n isDisabled?: boolean;\n\n /* Whether the input can be selected but not changed by the user. /\n isReadOnly?: boolean;\n\n /* Whether user input is required on the input before form submission. /\n isRequired?: boolean;\n\n /* Whether the input value is invalid. /\n isInvalid?: boolean;\n\n /* The name of the input element, used when submitting an HTML form. /\n name?: string;\n\n /\n The `<form>` element to associate the input with.\n * The value of this attribute must be the id of a `<form>` in the same document.\n /\n form?: string;\n\n /* Checkbox children. /\n children?: React.ReactNode;\n}\n\n/\n The `CheckboxGroup` allows a user to select items from a list of `Checkbox` components.\n */\nexport const CheckboxGroup = withSlots('BentoCheckboxGroup', function CheckboxGroup(args: CheckboxGroupProps) {\n const { props, apply } = useProps(args);\n const state = useCheckboxGroupState(props);\n const { groupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useCheckboxGroup(\n { ...props, label: props.label ?? 'Checkbox Group', description: props.description ?? 'Description' },\n state\n );\n\n return (\n <CheckboxGroupStateContext.Provider value={state}>\n <Container\n {...apply(groupProps)}\n {...useDataAttributes({\n orientation: props.orientation \|\| 'vertical',\n invalid: state.isInvalid,\n disabled: state.isDisabled,\n readonly: state.isReadOnly,\n required: state.isRequired\n })}\n slots={{\n label: labelProps,\n description: descriptionProps,\n error: mergeProps(errorMessageProps, validationResult)\n }}\n >\n {props.children}\n </Container>\n </CheckboxGroupStateContext.Provider>\n );\n});\n"]}

package/dist/index.d.cts CHANGED Viewed

@@ -1,10 +1,9 @@
 import * as _bento_slots from '@bento/slots';
 import React from 'react';
-import { ControlProps, ControlGroupProps } from '@bento/control';
+import { ContainerProps } from '@bento/container';
 import { AriaCheckboxProps, AriaCheckboxGroupProps } from 'react-aria';
-import { ValidationResult } from '@react-types/shared';
-interface CheckboxProps extends AriaCheckboxProps, Partial<Omit<ControlProps, keyof AriaCheckboxProps>> {
+interface CheckboxProps extends AriaCheckboxProps, Omit<ContainerProps, keyof AriaCheckboxProps> {
     /** The value of the checkbox, used when submitting an HTML form. */
     value?: string;
     /** The name of the checkbox. */
@@ -31,15 +30,10 @@ interface CheckboxProps extends AriaCheckboxProps, Partial<Omit<ControlProps, ke
 }
 /**
  * The `Checkbox` is a single checkbox option that can be selected by the user.
- *
- * @component
- * @param args - The props {@link CheckboxProps} passed to the Checkbox component.
- *
- * @public
  */
-declare const Checkbox: React.NamedExoticComponent<CheckboxProps & _bento_slots.Slots>;
+declare const Checkbox: React.MemoExoticComponent<React.ComponentType<CheckboxProps & _bento_slots.Slots>>;
-interface CheckboxGroupProps extends AriaCheckboxGroupProps, Partial<Omit<ControlGroupProps, keyof AriaCheckboxGroupProps>> {
+interface CheckboxGroupProps extends AriaCheckboxGroupProps, Omit<ContainerProps, keyof AriaCheckboxGroupProps> {
     /** The current value of the checkbox group (controlled). */
     value?: string[];
     /** The default value of the checkbox group (uncontrolled). */
@@ -55,25 +49,16 @@ interface CheckboxGroupProps extends AriaCheckboxGroupProps, Partial<Omit<Contro
     /** The name of the input element, used when submitting an HTML form. */
     name?: string;
     /**
-     * The <form> element to associate the input with.
-     * The value of this attribute must be the id of a <form> in the same document.
+     * The `<form>` element to associate the input with.
+     * The value of this attribute must be the id of a `<form>` in the same document.
      */
     form?: string;
-    /** Description for the checkbox group. */
-    description?: string;
     /** Checkbox children. */
     children?: React.ReactNode;
-    /** Error message for the checkbox group. */
-    errorMessage?: React.ReactNode | ((val: ValidationResult) => React.ReactNode);
 }
 /**
  * The `CheckboxGroup` allows a user to select items from a list of `Checkbox` components.
- *
- * @component
- * @param {CheckboxGroupProps} args - The props passed to the CheckboxGroup component.
- *
- * @public
  */
-declare const CheckboxGroup: React.NamedExoticComponent<CheckboxGroupProps & _bento_slots.Slots>;
+declare const CheckboxGroup: React.MemoExoticComponent<React.ComponentType<CheckboxGroupProps & _bento_slots.Slots>>;
 export { Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps };

package/dist/index.d.ts CHANGED Viewed

@@ -1,10 +1,9 @@
 import * as _bento_slots from '@bento/slots';
 import React from 'react';
-import { ControlProps, ControlGroupProps } from '@bento/control';
+import { ContainerProps } from '@bento/container';
 import { AriaCheckboxProps, AriaCheckboxGroupProps } from 'react-aria';
-import { ValidationResult } from '@react-types/shared';
-interface CheckboxProps extends AriaCheckboxProps, Partial<Omit<ControlProps, keyof AriaCheckboxProps>> {
+interface CheckboxProps extends AriaCheckboxProps, Omit<ContainerProps, keyof AriaCheckboxProps> {
     /** The value of the checkbox, used when submitting an HTML form. */
     value?: string;
     /** The name of the checkbox. */
@@ -31,15 +30,10 @@ interface CheckboxProps extends AriaCheckboxProps, Partial<Omit<ControlProps, ke
 }
 /**
  * The `Checkbox` is a single checkbox option that can be selected by the user.
- *
- * @component
- * @param args - The props {@link CheckboxProps} passed to the Checkbox component.
- *
- * @public
  */
-declare const Checkbox: React.NamedExoticComponent<CheckboxProps & _bento_slots.Slots>;
+declare const Checkbox: React.MemoExoticComponent<React.ComponentType<CheckboxProps & _bento_slots.Slots>>;
-interface CheckboxGroupProps extends AriaCheckboxGroupProps, Partial<Omit<ControlGroupProps, keyof AriaCheckboxGroupProps>> {
+interface CheckboxGroupProps extends AriaCheckboxGroupProps, Omit<ContainerProps, keyof AriaCheckboxGroupProps> {
     /** The current value of the checkbox group (controlled). */
     value?: string[];
     /** The default value of the checkbox group (uncontrolled). */
@@ -55,25 +49,16 @@ interface CheckboxGroupProps extends AriaCheckboxGroupProps, Partial<Omit<Contro
     /** The name of the input element, used when submitting an HTML form. */
     name?: string;
     /**
-     * The <form> element to associate the input with.
-     * The value of this attribute must be the id of a <form> in the same document.
+     * The `<form>` element to associate the input with.
+     * The value of this attribute must be the id of a `<form>` in the same document.
      */
     form?: string;
-    /** Description for the checkbox group. */
-    description?: string;
     /** Checkbox children. */
     children?: React.ReactNode;
-    /** Error message for the checkbox group. */
-    errorMessage?: React.ReactNode | ((val: ValidationResult) => React.ReactNode);
 }
 /**
  * The `CheckboxGroup` allows a user to select items from a list of `Checkbox` components.
- *
- * @component
- * @param {CheckboxGroupProps} args - The props passed to the CheckboxGroup component.
- *
- * @public
  */
-declare const CheckboxGroup: React.NamedExoticComponent<CheckboxGroupProps & _bento_slots.Slots>;
+declare const CheckboxGroup: React.MemoExoticComponent<React.ComponentType<CheckboxGroupProps & _bento_slots.Slots>>;
 export { Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps };

package/dist/index.js CHANGED Viewed

@@ -1,12 +1,13 @@
 import React2, { useContext, useRef, useMemo } from 'react';
-import { Control, ControlGroup } from '@bento/control';
+import { Container } from '@bento/container';
+import { useDataAttributes } from '@bento/use-data-attributes';
 import { Icon } from '@bento/icon';
 import { withSlots } from '@bento/slots';
 import { useProps } from '@bento/use-props';
-import { useCheckboxGroupItem, useCheckbox, useHover, useFocusRing, useCheckboxGroup } from 'react-aria';
+import { VisuallyHidden } from '@bento/visually-hidden';
 import { useObjectRef, mergeRefs, mergeProps } from '@react-aria/utils';
+import { useFocusRing, useCheckboxGroupItem, useCheckbox, useHover, useCheckboxGroup, mergeProps as mergeProps$1 } from 'react-aria';
 import { useToggleState, useCheckboxGroupState } from 'react-stately';
-import { useDataAttributes } from '@bento/use-data-attributes';
 // src/checkbox.tsx
 var CheckboxGroupStateContext = React2.createContext(null);
@@ -14,17 +15,11 @@ var CheckboxGroupStateContext = React2.createContext(null);
 // src/checkbox.tsx
 var Checkbox = withSlots("BentoCheckbox", function Checkbox2(args) {
   const { props, apply } = useProps(args);
-  const {
-    isRequired = false,
-    isIndeterminate = false,
-    isDisabled: isDisabledProp = false,
-    isSelected: isSelectedProp = false,
-    isReadOnly: isReadOnlyProp = false
-  } = props;
   const groupState = useContext(CheckboxGroupStateContext);
   const ref = useRef(null);
   const inputRef = useObjectRef(useMemo(() => mergeRefs(ref, props.inputRef), [ref, props.inputRef]));
-  let { labelProps, inputProps, isSelected, isReadOnly, isDisabled, isPressed, isInvalid } = groupState ? useCheckboxGroupItem(
+  const { isFocused, isFocusVisible, focusProps } = useFocusRing();
+  const { labelProps, inputProps, isSelected, isPressed, isDisabled, isReadOnly, isInvalid } = groupState ? useCheckboxGroupItem(
     {
       ...props,
       // Value is optional for standalone checkboxes, but required for CheckboxGroup items;
@@ -33,80 +28,62 @@ var Checkbox = withSlots("BentoCheckbox", function Checkbox2(args) {
     },
     groupState,
     inputRef
-  ) : useCheckbox(
-    {
-      ...props
-    },
-    useToggleState(props),
-    inputRef
-  );
-  const interactionDisabled = isDisabledProp || isDisabled || isReadOnly || isReadOnlyProp;
+  ) : useCheckbox(props, useToggleState(props), inputRef);
+  const interactionDisabled = props.isDisabled || isDisabled || isReadOnly;
   const { hoverProps, isHovered } = useHover({
     ...props,
     isDisabled: interactionDisabled
   });
-  const { isFocused, isFocusVisible, focusProps } = useFocusRing();
   return /* @__PURE__ */ React2.createElement(
-    Control,
+    Container,
     {
-      slot: "control",
-      labelProps: mergeProps(labelProps, hoverProps),
-      inputProps: mergeProps(inputProps, focusProps),
-      label: props.children,
-      inputRef,
-      "aria-checked": isIndeterminate ? "mixed" : void 0,
-      ...apply(props, ["isReadOnly", "isSelected", "isIndeterminate", "isDisabled", "value", "autoFocus"]),
+      as: "label",
+      "aria-checked": props.isIndeterminate ? "mixed" : void 0,
+      ...apply(mergeProps(labelProps, hoverProps)),
       ...useDataAttributes({
-        selected: isSelected || isSelectedProp,
+        selected: isSelected,
         pressed: isPressed,
         hovered: isHovered,
         focused: isFocused,
         focusVisible: isFocusVisible,
         disabled: interactionDisabled,
-        readOnly: isReadOnly || isReadOnlyProp,
+        readonly: isReadOnly,
         invalid: isInvalid,
-        required: isRequired,
-        indeterminate: isIndeterminate
+        required: props.isRequired,
+        indeterminate: props.isIndeterminate
       })
     },
-    isIndeterminate ? /* @__PURE__ */ React2.createElement(Icon, { slot: "icon-indeterminate", icon: "checkboxIndeterminate" }, /* @__PURE__ */ React2.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React2.createElement("rect", { x: "6", y: "11", width: "12", height: "2", fill: "currentColor" }))) : isSelected ? /* @__PURE__ */ React2.createElement(Icon, { slot: "icon-checked", icon: "checkboxChecked" }, /* @__PURE__ */ React2.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React2.createElement("path", { d: "M9,16.2L4.8,12l-1.4,1.4L9,19L21,7l-1.4-1.4L9,16.2z", fill: "currentColor" }))) : /* @__PURE__ */ React2.createElement(Icon, { slot: "icon-unchecked", icon: "checkboxUnchecked" }, /* @__PURE__ */ React2.createElement("svg", { width: 24, height: 24, "aria-hidden": "true" }, /* @__PURE__ */ React2.createElement("rect", { x: 4, y: 4, width: 16, height: 16, rx: 3, fill: "none", stroke: "gray", strokeWidth: 2 })))
+    /* @__PURE__ */ React2.createElement(VisuallyHidden, null, /* @__PURE__ */ React2.createElement("input", { ...mergeProps(inputProps, focusProps), ref: inputRef })),
+    props.isIndeterminate ? /* @__PURE__ */ React2.createElement(Icon, { slot: "icon-indeterminate", icon: "checkboxIndeterminate" }, /* @__PURE__ */ React2.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React2.createElement("rect", { x: "6", y: "11", width: "12", height: "2", fill: "currentColor" }))) : isSelected ? /* @__PURE__ */ React2.createElement(Icon, { slot: "icon-checked", icon: "checkboxChecked" }, /* @__PURE__ */ React2.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React2.createElement("path", { d: "M9,16.2L4.8,12l-1.4,1.4L9,19L21,7l-1.4-1.4L9,16.2z", fill: "currentColor" }))) : /* @__PURE__ */ React2.createElement(Icon, { slot: "icon-unchecked", icon: "checkboxUnchecked" }, /* @__PURE__ */ React2.createElement("svg", { width: 24, height: 24 }, /* @__PURE__ */ React2.createElement("rect", { x: 4, y: 4, width: 16, height: 16, rx: 3, fill: "none", stroke: "gray", strokeWidth: 2 }))),
+    props.children
   );
 });
 var CheckboxGroup = withSlots("BentoCheckboxGroup", function CheckboxGroup2(args) {
-  const { errorMessage, ...restArgs } = args;
-  const { props, apply } = useProps(restArgs);
+  const { props, apply } = useProps(args);
   const state = useCheckboxGroupState(props);
-  const { children } = props;
   const { groupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useCheckboxGroup(
-    props,
+    { ...props, label: props.label ?? "Checkbox Group", description: props.description ?? "Description" },
     state
   );
-  const displayedErrorMessage = useMemo(
-    function getErrorMessage() {
-      return typeof errorMessage === "function" ? errorMessage(validationResult) : errorMessage || validationResult.validationErrors.join(", ");
-    },
-    [errorMessage, validationResult]
-  );
-  return /* @__PURE__ */ React2.createElement(
-    ControlGroup,
+  return /* @__PURE__ */ React2.createElement(CheckboxGroupStateContext.Provider, { value: state }, /* @__PURE__ */ React2.createElement(
+    Container,
     {
-      slot: "group",
-      labelProps,
-      descriptionProps,
-      errorMessage: displayedErrorMessage,
-      errorMessageProps,
-      ...groupProps,
-      ...apply(props, ["isInvalid", "isDisabled", "isReadOnly", "isRequired", "validationBehavior"]),
+      ...apply(groupProps),
       ...useDataAttributes({
         orientation: props.orientation || "vertical",
         invalid: state.isInvalid,
         disabled: state.isDisabled,
         readonly: state.isReadOnly,
         required: state.isRequired
-      })
+      }),
+      slots: {
+        label: labelProps,
+        description: descriptionProps,
+        error: mergeProps$1(errorMessageProps, validationResult)
+      }
     },
-    /* @__PURE__ */ React2.createElement(CheckboxGroupStateContext.Provider, { value: state }, children)
-  );
+    props.children
+  ));
 });
 export { Checkbox, CheckboxGroup };

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/checkbox-group-state.tsx","../src/checkbox.tsx","../src/checkbox-group.tsx"],"names":["React","Checkbox","withSlots","CheckboxGroup","useProps","useMemo","useDataAttributes"],"mappings":"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","file":"index.js","sourcesContent":["import React from 'react';\nimport { CheckboxGroupState } from 'react-stately';\n\nexport const CheckboxGroupStateContext = React.createContext<CheckboxGroupState \| null>(null);\n","import React, { useContext, useRef, useMemo } from 'react';\nimport { Control, ControlProps } from '@bento/control';\nimport { Icon } from '@bento/icon';\nimport { withSlots } from '@bento/slots';\nimport { useProps } from '@bento/use-props';\nimport { useFocusRing, useHover, type AriaCheckboxProps, useCheckboxGroupItem, useCheckbox } from 'react-aria';\nimport { mergeProps, mergeRefs, useObjectRef } from '@react-aria/utils';\nimport { useToggleState } from 'react-stately';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { CheckboxGroupStateContext } from './checkbox-group-state';\n\nexport interface CheckboxProps extends AriaCheckboxProps, Partial<Omit<ControlProps, keyof AriaCheckboxProps>> {\n /** The value of the checkbox, used when submitting an HTML form. /\n value?: string;\n\n /* The name of the checkbox. /\n name?: string;\n\n /* A ref for the HTML input element. /\n inputRef?: React.Ref<HTMLInputElement>;\n\n /* The label for the checkbox. Accepts any renderable node. /\n children?: React.ReactNode;\n\n /* Whether the checkbox is required or not. /\n isRequired?: boolean;\n\n /* Whether the input can be selected but not changed by the user. /\n isReadOnly?: boolean;\n\n /\n Whether the checkbox is disabled or not. Shows that a selection exists,\n * but is not available in that circumstance.\n /\n isDisabled?: boolean;\n\n /* Whether the element should receive focus on render. /\n autoFocus?: boolean;\n\n /* Whether the checkbox is in an indeterminate state. /\n isIndeterminate?: boolean;\n\n /* Whether the checkbox is in a selected state. /\n isSelected?: boolean;\n}\n\n/\n The `Checkbox` is a single checkbox option that can be selected by the user.\n \n @component\n * @param args - The props {@link CheckboxProps} passed to the Checkbox component.\n \n @public\n /\nexport const Checkbox = withSlots('BentoCheckbox', function Checkbox(args: CheckboxProps) {\n const { props, apply } = useProps(args);\n const {\n isRequired = false,\n isIndeterminate = false,\n isDisabled: isDisabledProp = false,\n isSelected: isSelectedProp = false,\n isReadOnly: isReadOnlyProp = false\n } = props;\n\n const groupState = useContext(CheckboxGroupStateContext);\n\n const ref = useRef<HTMLInputElement>(null);\n const inputRef = useObjectRef(useMemo(() => mergeRefs(ref, props.inputRef), [ref, props.inputRef]));\n\n let { labelProps, inputProps, isSelected, isReadOnly, isDisabled, isPressed, isInvalid } = groupState\n ? useCheckboxGroupItem(\n {\n ...props,\n // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n // it's passed explicitly here to avoid typescript error (requires ignore)(recommendation from React Aria).\n value: (props as Required<Pick<typeof props, 'value'>>).value\n },\n groupState,\n inputRef\n )\n : useCheckbox(\n {\n ...props\n },\n useToggleState(props),\n inputRef\n );\n\n const interactionDisabled = isDisabledProp \|\| isDisabled \|\| isReadOnly \|\| isReadOnlyProp;\n const { hoverProps, isHovered } = useHover({\n ...props,\n isDisabled: interactionDisabled\n });\n const { isFocused, isFocusVisible, focusProps } = useFocusRing();\n\n return (\n <Control\n slot=\"control\"\n labelProps={mergeProps(labelProps, hoverProps)}\n inputProps={mergeProps(inputProps, focusProps)}\n label={props.children}\n inputRef={inputRef}\n aria-checked={isIndeterminate ? 'mixed' : undefined}\n {...apply(props, ['isReadOnly', 'isSelected', 'isIndeterminate', 'isDisabled', 'value', 'autoFocus'])}\n {...useDataAttributes({\n selected: isSelected \|\| isSelectedProp,\n pressed: isPressed,\n hovered: isHovered,\n focused: isFocused,\n focusVisible: isFocusVisible,\n disabled: interactionDisabled,\n readOnly: isReadOnly \|\| isReadOnlyProp,\n invalid: isInvalid,\n required: isRequired,\n indeterminate: isIndeterminate\n })}\n >\n {isIndeterminate ? (\n <Icon slot=\"icon-indeterminate\" icon=\"checkboxIndeterminate\">\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"6\" y=\"11\" width=\"12\" height=\"2\" fill=\"currentColor\" />\n </svg>\n </Icon>\n ) : isSelected ? (\n <Icon slot=\"icon-checked\" icon=\"checkboxChecked\">\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9,16.2L4.8,12l-1.4,1.4L9,19L21,7l-1.4-1.4L9,16.2z\" fill=\"currentColor\" />\n </svg>\n </Icon>\n ) : (\n <Icon slot=\"icon-unchecked\" icon=\"checkboxUnchecked\">\n <svg width={24} height={24} aria-hidden=\"true\">\n <rect x={4} y={4} width={16} height={16} rx={3} fill=\"none\" stroke=\"gray\" strokeWidth={2} />\n </svg>\n </Icon>\n )}\n </Control>\n );\n});\n","import React, { useMemo } from 'react';\nimport { useProps } from '@bento/use-props';\nimport { ControlGroup, ControlGroupProps } from '@bento/control';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { type ValidationResult } from '@react-types/shared';\nimport { AriaCheckboxGroupProps, useCheckboxGroup } from 'react-aria';\nimport { useCheckboxGroupState } from 'react-stately';\nimport { withSlots } from '@bento/slots';\nimport { CheckboxGroupStateContext } from './checkbox-group-state';\n\nexport interface CheckboxGroupProps\n extends AriaCheckboxGroupProps,\n Partial<Omit<ControlGroupProps, keyof AriaCheckboxGroupProps>> {\n /* The current value of the checkbox group (controlled). /\n value?: string[];\n\n /* The default value of the checkbox group (uncontrolled). /\n defaultValue?: string[];\n\n /* Whether the input is disabled. /\n isDisabled?: boolean;\n\n /* Whether the input can be selected but not changed by the user. /\n isReadOnly?: boolean;\n\n /* Whether user input is required on the input before form submission. /\n isRequired?: boolean;\n\n /* Whether the input value is invalid. /\n isInvalid?: boolean;\n\n /* The name of the input element, used when submitting an HTML form. /\n name?: string;\n\n /\n The <form> element to associate the input with.\n * The value of this attribute must be the id of a <form> in the same document.\n /\n form?: string;\n\n /* Description for the checkbox group. /\n description?: string;\n\n /* Checkbox children. /\n children?: React.ReactNode;\n\n /* Error message for the checkbox group. /\n errorMessage?: React.ReactNode \| ((val: ValidationResult) => React.ReactNode);\n}\n\n/\n The `CheckboxGroup` allows a user to select items from a list of `Checkbox` components.\n \n @component\n * @param {CheckboxGroupProps} args - The props passed to the CheckboxGroup component.\n \n @public\n */\nexport const CheckboxGroup = withSlots('BentoCheckboxGroup', function CheckboxGroup(args: CheckboxGroupProps) {\n const { errorMessage, ...restArgs } = args;\n const { props, apply } = useProps(restArgs);\n const state = useCheckboxGroupState(props);\n const { children } = props;\n const { groupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useCheckboxGroup(\n props,\n state\n );\n\n const displayedErrorMessage = useMemo(\n function getErrorMessage() {\n return typeof errorMessage === 'function'\n ? errorMessage(validationResult)\n : errorMessage \|\| validationResult.validationErrors.join(', ');\n },\n [errorMessage, validationResult]\n );\n\n return (\n <ControlGroup\n slot=\"group\"\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessage={displayedErrorMessage}\n errorMessageProps={errorMessageProps}\n {...groupProps}\n {...apply(props, ['isInvalid', 'isDisabled', 'isReadOnly', 'isRequired', 'validationBehavior'])}\n {...useDataAttributes({\n orientation: props.orientation \|\| 'vertical',\n invalid: state.isInvalid,\n disabled: state.isDisabled,\n readonly: state.isReadOnly,\n required: state.isRequired\n })}\n >\n <CheckboxGroupStateContext.Provider value={state}>{children}</CheckboxGroupStateContext.Provider>\n </ControlGroup>\n );\n});\n"]}
1	+ {"version":3,"sources":["../src/checkbox-group-state.tsx","../src/checkbox.tsx","../src/checkbox-group.tsx"],"names":["React","Checkbox","withSlots","CheckboxGroup","useProps","Container","useDataAttributes","mergeProps"],"mappings":"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","file":"index.js","sourcesContent":["import React from 'react';\nimport { CheckboxGroupState } from 'react-stately';\n\nexport const CheckboxGroupStateContext = React.createContext<CheckboxGroupState \| null>(null);\n","import React, { useContext, useRef, useMemo } from 'react';\nimport { Container, type ContainerProps } from '@bento/container';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { Icon } from '@bento/icon';\nimport { withSlots } from '@bento/slots';\nimport { useProps } from '@bento/use-props';\nimport { VisuallyHidden } from '@bento/visually-hidden';\nimport { mergeProps, mergeRefs, useObjectRef } from '@react-aria/utils';\nimport { useFocusRing, useHover, useCheckbox, useCheckboxGroupItem, type AriaCheckboxProps } from 'react-aria';\nimport { useToggleState } from 'react-stately';\nimport { CheckboxGroupStateContext } from './checkbox-group-state';\n\nexport interface CheckboxProps extends AriaCheckboxProps, Omit<ContainerProps, keyof AriaCheckboxProps> {\n /** The value of the checkbox, used when submitting an HTML form. /\n value?: string;\n\n /* The name of the checkbox. /\n name?: string;\n\n /* A ref for the HTML input element. /\n inputRef?: React.Ref<HTMLInputElement>;\n\n /* The label for the checkbox. Accepts any renderable node. /\n children?: React.ReactNode;\n\n /* Whether the checkbox is required or not. /\n isRequired?: boolean;\n\n /* Whether the input can be selected but not changed by the user. /\n isReadOnly?: boolean;\n\n /\n Whether the checkbox is disabled or not. Shows that a selection exists,\n * but is not available in that circumstance.\n /\n isDisabled?: boolean;\n\n /* Whether the element should receive focus on render. /\n autoFocus?: boolean;\n\n /* Whether the checkbox is in an indeterminate state. /\n isIndeterminate?: boolean;\n\n /* Whether the checkbox is in a selected state. /\n isSelected?: boolean;\n}\n\n/\n The `Checkbox` is a single checkbox option that can be selected by the user.\n /\nexport const Checkbox = withSlots('BentoCheckbox', function Checkbox(args: CheckboxProps) {\n const { props, apply } = useProps(args);\n const groupState = useContext(CheckboxGroupStateContext);\n const ref = useRef<HTMLInputElement>(null);\n const inputRef = useObjectRef(useMemo(() => mergeRefs(ref, props.inputRef), [ref, props.inputRef]));\n const { isFocused, isFocusVisible, focusProps } = useFocusRing();\n\n const { labelProps, inputProps, isSelected, isPressed, isDisabled, isReadOnly, isInvalid } = groupState\n ? useCheckboxGroupItem(\n {\n ...props,\n // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n // it's passed explicitly here to avoid typescript error (requires ignore)(recommendation from React Aria).\n value: (props as Required<Pick<typeof props, 'value'>>).value\n },\n groupState,\n inputRef\n )\n : useCheckbox(props, useToggleState(props), inputRef);\n\n const interactionDisabled = props.isDisabled \|\| isDisabled \|\| isReadOnly;\n const { hoverProps, isHovered } = useHover({\n ...props,\n isDisabled: interactionDisabled\n });\n\n return (\n <Container\n as=\"label\"\n aria-checked={props.isIndeterminate ? 'mixed' : undefined}\n {...apply(mergeProps(labelProps, hoverProps))}\n {...useDataAttributes({\n selected: isSelected,\n pressed: isPressed,\n hovered: isHovered,\n focused: isFocused,\n focusVisible: isFocusVisible,\n disabled: interactionDisabled,\n readonly: isReadOnly,\n invalid: isInvalid,\n required: props.isRequired,\n indeterminate: props.isIndeterminate\n })}\n >\n <VisuallyHidden>\n <input {...mergeProps(inputProps, focusProps)} ref={inputRef} />\n </VisuallyHidden>\n\n {props.isIndeterminate ? (\n <Icon slot=\"icon-indeterminate\" icon=\"checkboxIndeterminate\">\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"6\" y=\"11\" width=\"12\" height=\"2\" fill=\"currentColor\" />\n </svg>\n </Icon>\n ) : isSelected ? (\n <Icon slot=\"icon-checked\" icon=\"checkboxChecked\">\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9,16.2L4.8,12l-1.4,1.4L9,19L21,7l-1.4-1.4L9,16.2z\" fill=\"currentColor\" />\n </svg>\n </Icon>\n ) : (\n <Icon slot=\"icon-unchecked\" icon=\"checkboxUnchecked\">\n <svg width={24} height={24}>\n <rect x={4} y={4} width={16} height={16} rx={3} fill=\"none\" stroke=\"gray\" strokeWidth={2} />\n </svg>\n </Icon>\n )}\n {props.children}\n </Container>\n );\n});\n","import React from 'react';\nimport { withSlots } from '@bento/slots';\nimport { Container, type ContainerProps } from '@bento/container';\nimport { useProps } from '@bento/use-props';\nimport { useCheckboxGroup, mergeProps, type AriaCheckboxGroupProps } from 'react-aria';\nimport { useCheckboxGroupState } from 'react-stately';\nimport { CheckboxGroupStateContext } from './checkbox-group-state';\nimport { useDataAttributes } from '@bento/use-data-attributes';\n\nexport interface CheckboxGroupProps extends AriaCheckboxGroupProps, Omit<ContainerProps, keyof AriaCheckboxGroupProps> {\n /* The current value of the checkbox group (controlled). /\n value?: string[];\n\n /* The default value of the checkbox group (uncontrolled). /\n defaultValue?: string[];\n\n /* Whether the input is disabled. /\n isDisabled?: boolean;\n\n /* Whether the input can be selected but not changed by the user. /\n isReadOnly?: boolean;\n\n /* Whether user input is required on the input before form submission. /\n isRequired?: boolean;\n\n /* Whether the input value is invalid. /\n isInvalid?: boolean;\n\n /* The name of the input element, used when submitting an HTML form. /\n name?: string;\n\n /\n The `<form>` element to associate the input with.\n * The value of this attribute must be the id of a `<form>` in the same document.\n /\n form?: string;\n\n /* Checkbox children. /\n children?: React.ReactNode;\n}\n\n/\n The `CheckboxGroup` allows a user to select items from a list of `Checkbox` components.\n */\nexport const CheckboxGroup = withSlots('BentoCheckboxGroup', function CheckboxGroup(args: CheckboxGroupProps) {\n const { props, apply } = useProps(args);\n const state = useCheckboxGroupState(props);\n const { groupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useCheckboxGroup(\n { ...props, label: props.label ?? 'Checkbox Group', description: props.description ?? 'Description' },\n state\n );\n\n return (\n <CheckboxGroupStateContext.Provider value={state}>\n <Container\n {...apply(groupProps)}\n {...useDataAttributes({\n orientation: props.orientation \|\| 'vertical',\n invalid: state.isInvalid,\n disabled: state.isDisabled,\n readonly: state.isReadOnly,\n required: state.isRequired\n })}\n slots={{\n label: labelProps,\n description: descriptionProps,\n error: mergeProps(errorMessageProps, validationResult)\n }}\n >\n {props.children}\n </Container>\n </CheckboxGroupStateContext.Provider>\n );\n});\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@bento/checkbox",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Checkbox component",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -40,11 +40,12 @@
     "package.json"
   ],
   "dependencies": {
-    "@bento/control": "^0.1.2",
-    "@bento/icon": "^0.1.2",
-    "@bento/slots": "^0.1.3",
+    "@bento/container": "^0.2.0",
+    "@bento/icon": "^0.1.3",
+    "@bento/slots": "^0.2.0",
     "@bento/use-data-attributes": "^0.1.1",
-    "@bento/use-props": "^0.1.1",
+    "@bento/use-props": "^0.2.0",
+    "@bento/visually-hidden": "^0.1.0",
     "@react-aria/utils": "^3.30.0",
     "react-aria": "^3.44.0",
     "react-stately": "^3.42.0"

package/src/checkbox-group.tsx CHANGED Viewed

@@ -1,16 +1,13 @@
-import React, { useMemo } from 'react';
+import React from 'react';
+import { withSlots } from '@bento/slots';
+import { Container, type ContainerProps } from '@bento/container';
 import { useProps } from '@bento/use-props';
-import { ControlGroup, ControlGroupProps } from '@bento/control';
-import { useDataAttributes } from '@bento/use-data-attributes';
-import { type ValidationResult } from '@react-types/shared';
-import { AriaCheckboxGroupProps, useCheckboxGroup } from 'react-aria';
+import { useCheckboxGroup, mergeProps, type AriaCheckboxGroupProps } from 'react-aria';
 import { useCheckboxGroupState } from 'react-stately';
-import { withSlots } from '@bento/slots';
 import { CheckboxGroupStateContext } from './checkbox-group-state';
+import { useDataAttributes } from '@bento/use-data-attributes';
-export interface CheckboxGroupProps
-  extends AriaCheckboxGroupProps,
-    Partial<Omit<ControlGroupProps, keyof AriaCheckboxGroupProps>> {
+export interface CheckboxGroupProps extends AriaCheckboxGroupProps, Omit<ContainerProps, keyof AriaCheckboxGroupProps> {
   /** The current value of the checkbox group (controlled). */
   value?: string[];
@@ -33,66 +30,45 @@ export interface CheckboxGroupProps
   name?: string;
   /**
-   * The <form> element to associate the input with.
-   * The value of this attribute must be the id of a <form> in the same document.
+   * The `<form>` element to associate the input with.
+   * The value of this attribute must be the id of a `<form>` in the same document.
    */
   form?: string;
-  /** Description for the checkbox group. */
-  description?: string;
   /** Checkbox children. */
   children?: React.ReactNode;
-  /** Error message for the checkbox group. */
-  errorMessage?: React.ReactNode | ((val: ValidationResult) => React.ReactNode);
 }
 /**
  * The `CheckboxGroup` allows a user to select items from a list of `Checkbox` components.
- *
- * @component
- * @param {CheckboxGroupProps} args - The props passed to the CheckboxGroup component.
- *
- * @public
  */
 export const CheckboxGroup = withSlots('BentoCheckboxGroup', function CheckboxGroup(args: CheckboxGroupProps) {
-  const { errorMessage, ...restArgs } = args;
-  const { props, apply } = useProps(restArgs);
+  const { props, apply } = useProps(args);
   const state = useCheckboxGroupState(props);
-  const { children } = props;
   const { groupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useCheckboxGroup(
-    props,
+    { ...props, label: props.label ?? 'Checkbox Group', description: props.description ?? 'Description' },
     state
   );
-  const displayedErrorMessage = useMemo(
-    function getErrorMessage() {
-      return typeof errorMessage === 'function'
-        ? errorMessage(validationResult)
-        : errorMessage || validationResult.validationErrors.join(', ');
-    },
-    [errorMessage, validationResult]
-  );
   return (
-    <ControlGroup
-      slot="group"
-      labelProps={labelProps}
-      descriptionProps={descriptionProps}
-      errorMessage={displayedErrorMessage}
-      errorMessageProps={errorMessageProps}
-      {...groupProps}
-      {...apply(props, ['isInvalid', 'isDisabled', 'isReadOnly', 'isRequired', 'validationBehavior'])}
-      {...useDataAttributes({
-        orientation: props.orientation || 'vertical',
-        invalid: state.isInvalid,
-        disabled: state.isDisabled,
-        readonly: state.isReadOnly,
-        required: state.isRequired
-      })}
-    >
-      <CheckboxGroupStateContext.Provider value={state}>{children}</CheckboxGroupStateContext.Provider>
-    </ControlGroup>
+    <CheckboxGroupStateContext.Provider value={state}>
+      <Container
+        {...apply(groupProps)}
+        {...useDataAttributes({
+          orientation: props.orientation || 'vertical',
+          invalid: state.isInvalid,
+          disabled: state.isDisabled,
+          readonly: state.isReadOnly,
+          required: state.isRequired
+        })}
+        slots={{
+          label: labelProps,
+          description: descriptionProps,
+          error: mergeProps(errorMessageProps, validationResult)
+        }}
+      >
+        {props.children}
+      </Container>
+    </CheckboxGroupStateContext.Provider>
   );
 });

package/src/checkbox.tsx CHANGED Viewed

@@ -1,15 +1,16 @@
 import React, { useContext, useRef, useMemo } from 'react';
-import { Control, ControlProps } from '@bento/control';
+import { Container, type ContainerProps } from '@bento/container';
+import { useDataAttributes } from '@bento/use-data-attributes';
 import { Icon } from '@bento/icon';
 import { withSlots } from '@bento/slots';
 import { useProps } from '@bento/use-props';
-import { useFocusRing, useHover, type AriaCheckboxProps, useCheckboxGroupItem, useCheckbox } from 'react-aria';
+import { VisuallyHidden } from '@bento/visually-hidden';
 import { mergeProps, mergeRefs, useObjectRef } from '@react-aria/utils';
+import { useFocusRing, useHover, useCheckbox, useCheckboxGroupItem, type AriaCheckboxProps } from 'react-aria';
 import { useToggleState } from 'react-stately';
-import { useDataAttributes } from '@bento/use-data-attributes';
 import { CheckboxGroupStateContext } from './checkbox-group-state';
-export interface CheckboxProps extends AriaCheckboxProps, Partial<Omit<ControlProps, keyof AriaCheckboxProps>> {
+export interface CheckboxProps extends AriaCheckboxProps, Omit<ContainerProps, keyof AriaCheckboxProps> {
   /** The value of the checkbox, used when submitting an HTML form. */
   value?: string;
@@ -46,28 +47,15 @@ export interface CheckboxProps extends AriaCheckboxProps, Partial<Omit<ControlPr
 /**
  * The `Checkbox` is a single checkbox option that can be selected by the user.
- *
- * @component
- * @param args - The props {@link CheckboxProps} passed to the Checkbox component.
- *
- * @public
  */
 export const Checkbox = withSlots('BentoCheckbox', function Checkbox(args: CheckboxProps) {
   const { props, apply } = useProps(args);
-  const {
-    isRequired = false,
-    isIndeterminate = false,
-    isDisabled: isDisabledProp = false,
-    isSelected: isSelectedProp = false,
-    isReadOnly: isReadOnlyProp = false
-  } = props;
   const groupState = useContext(CheckboxGroupStateContext);
   const ref = useRef<HTMLInputElement>(null);
   const inputRef = useObjectRef(useMemo(() => mergeRefs(ref, props.inputRef), [ref, props.inputRef]));
+  const { isFocused, isFocusVisible, focusProps } = useFocusRing();
-  let { labelProps, inputProps, isSelected, isReadOnly, isDisabled, isPressed, isInvalid } = groupState
+  const { labelProps, inputProps, isSelected, isPressed, isDisabled, isReadOnly, isInvalid } = groupState
     ? useCheckboxGroupItem(
         {
           ...props,
@@ -78,44 +66,37 @@ export const Checkbox = withSlots('BentoCheckbox', function Checkbox(args: Check
         groupState,
         inputRef
       )
-    : useCheckbox(
-        {
-          ...props
-        },
-        useToggleState(props),
-        inputRef
-      );
+    : useCheckbox(props, useToggleState(props), inputRef);
-  const interactionDisabled = isDisabledProp || isDisabled || isReadOnly || isReadOnlyProp;
+  const interactionDisabled = props.isDisabled || isDisabled || isReadOnly;
   const { hoverProps, isHovered } = useHover({
     ...props,
     isDisabled: interactionDisabled
   });
-  const { isFocused, isFocusVisible, focusProps } = useFocusRing();
   return (
-    <Control
-      slot="control"
-      labelProps={mergeProps(labelProps, hoverProps)}
-      inputProps={mergeProps(inputProps, focusProps)}
-      label={props.children}
-      inputRef={inputRef}
-      aria-checked={isIndeterminate ? 'mixed' : undefined}
-      {...apply(props, ['isReadOnly', 'isSelected', 'isIndeterminate', 'isDisabled', 'value', 'autoFocus'])}
+    <Container
+      as="label"
+      aria-checked={props.isIndeterminate ? 'mixed' : undefined}
+      {...apply(mergeProps(labelProps, hoverProps))}
       {...useDataAttributes({
-        selected: isSelected || isSelectedProp,
+        selected: isSelected,
         pressed: isPressed,
         hovered: isHovered,
         focused: isFocused,
         focusVisible: isFocusVisible,
         disabled: interactionDisabled,
-        readOnly: isReadOnly || isReadOnlyProp,
+        readonly: isReadOnly,
         invalid: isInvalid,
-        required: isRequired,
-        indeterminate: isIndeterminate
+        required: props.isRequired,
+        indeterminate: props.isIndeterminate
       })}
     >
-      {isIndeterminate ? (
+      <VisuallyHidden>
+        <input {...mergeProps(inputProps, focusProps)} ref={inputRef} />
+      </VisuallyHidden>
+      {props.isIndeterminate ? (
         <Icon slot="icon-indeterminate" icon="checkboxIndeterminate">
           <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <rect x="6" y="11" width="12" height="2" fill="currentColor" />
@@ -129,11 +110,12 @@ export const Checkbox = withSlots('BentoCheckbox', function Checkbox(args: Check
         </Icon>
       ) : (
         <Icon slot="icon-unchecked" icon="checkboxUnchecked">
-          <svg width={24} height={24} aria-hidden="true">
+          <svg width={24} height={24}>
             <rect x={4} y={4} width={16} height={16} rx={3} fill="none" stroke="gray" strokeWidth={2} />
           </svg>
         </Icon>
       )}
-    </Control>
+      {props.children}
+    </Container>
   );
 });