@bento/checkbox 0.1.2 → 0.2.0

package/README.md

@@ -0,0 +1,297 @@
+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.
+
+The `CheckboxGroup` allows a user to select multiple items from a list of `Checkbox` components.
+
+The `Checkbox` is a single checkbox option that can be selected by the user.
+
+# Installation
+
+```bash
+npm install --save @bento/checkbox
+```
+
+## Props
+
+The following properties are available to be used on the `CheckboxGroup` and `Checkbox` primitives:
+
+### Checkbox
+
+| Prop | Type | Required | Description |
+|------|------|----------|------------|
+| `value` | `string` | No | The value of the checkbox, used when submitting an HTML form. |
+| `name` | `string` | No | The name of the checkbox. |
+| `inputRef` | `Ref<HTMLInputElement>` | No | A ref for the HTML input element. |
+| `children` | `ReactNode` | No | The label for the checkbox. Accepts any renderable node. |
+| `isRequired` | `boolean` | No | Whether the checkbox is required or not. |
+| `isReadOnly` | `boolean` | No | Whether the input can be selected but not changed by the user. |
+| `isDisabled` | `boolean` | No | Whether the checkbox is disabled or not. Shows that a selection exists,
+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. |
+| `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. |
+| `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
+
+| Prop | Type | Required | Description |
+|------|------|----------|------------|
+| `value` | `string[]` | No | The current value of the checkbox group (controlled). |
+| `defaultValue` | `string[]` | No | The default value of the checkbox group (uncontrolled). |
+| `isDisabled` | `boolean` | No | Whether the input is disabled. |
+| `isReadOnly` | `boolean` | No | Whether the input can be selected but not changed by the user. |
+| `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. |
+| `children` | `ReactNode` | No | Checkbox children. |
+| `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. |
+| `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
+
+### Data Attributes
+
+The following data attributes can be used to style and customize the `CheckboxGroup` and `Checkbox` primitives.
+
+#### `CheckboxGroup` Data Attributes
+
+| 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                                         | 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
+
+### Default Checkbox - Uncontrolled
+
+The `Checkbox` primitive is uncontrolled by default, meaning it manages its own state internally. You can also use it in a controlled manner by providing the `checked` and `onChange` props.
+
+```tsx
+/* v8 ignore next */
+import React from 'react';
+import { Checkbox } from '@bento/checkbox';
+
+export function CheckboxExample(args: React.ComponentProps<typeof Checkbox>) {
+  return (
+    <Checkbox name="checkbox-example" value="checkbox-value" {...args}>
+      Checkbox Label
+    </Checkbox>
+  );
+}
+```
+
+### Controlled Checkbox
+
+The `Checkbox` can also be used in a controlled manner, where you manage its state externally with the `checked` and `onChange` props.
+
+```tsx
+/* v8 ignore next */
+import React, { useState } from 'react';
+import { Checkbox } from '@bento/checkbox';
+
+export function CheckboxControlledExample() {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <Checkbox
+      name="checkbox-controlled-example"
+      value="checkbox-controlled-value"
+      isSelected={checked}
+      onChange={setChecked}
+    >
+      Controlled Checkbox
+    </Checkbox>
+  );
+}
+```
+
+### Checkbox Group
+
+The `CheckboxGroup` allows a user to select multiple items from a list of `Checkbox` components.
+
+```tsx
+/* 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 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>
+  );
+}
+```
+
+### Controlled Checkbox Group
+
+The `CheckboxGroup` can also be used in a controlled manner, where you manage the state of the checkboxes externally with the `value` and `onChange` props.
+
+```tsx
+/* 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 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>
+    </CheckboxGroup>
+  );
+}
+```
+
+### Checkbox Group with Indeterminate State
+
+The `CheckboxGroup` can also support an indeterminate state, which is useful when some but not all checkboxes are selected. The complex state management shown here is an example of how to handle indeterminate states in a checkbox group in a common way.
+
+```tsx
+/* 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());
+
+  const items = [
+    { id: 'option1', label: 'Option 1' },
+    { id: 'option2', label: 'Option 2' },
+    { id: 'option3', label: 'Option 3' }
+  ];
+
+  const allItemIds = items.map(function getItemId(item) {
+    return item.id;
+  });
+  const isAllSelected = checkedItems.size === items.length;
+  const isIndeterminate = checkedItems.size > 0 && checkedItems.size < items.length;
+
+  function handleSelectAll(checked: boolean) {
+    if (checked) {
+      setCheckedItems(new Set([...allItemIds, 'select-all']));
+    } else {
+      setCheckedItems(new Set());
+    }
+  }
+
+  function handleItemChange(itemId: string, checked: boolean) {
+    setCheckedItems(function updateCheckedItems(prev) {
+      const newSet = new Set(prev);
+      if (checked) {
+        newSet.add(itemId);
+        if (
+          allItemIds.every(function checkItemInSet(id) {
+            return newSet.has(id);
+          })
+        ) {
+          newSet.add('select-all');
+        }
+      } else {
+        newSet.delete(itemId);
+        newSet.delete('select-all');
+      }
+      return newSet;
+    });
+  }
+
+  return (
+    <CheckboxGroup value={Array.from(checkedItems)} data-value={Array.from(checkedItems)}>
+      <Text slot="label">Select Items</Text>
+      <Checkbox
+        name="select-all"
+        value="select-all"
+        isSelected={isAllSelected}
+        isIndeterminate={isIndeterminate}
+        onChange={handleSelectAll}
+      >
+        Select All
+      </Checkbox>
+
+      {items.map((item) => (
+        <Checkbox
+          key={item.id}
+          name={item.id}
+          value={item.id}
+          isSelected={checkedItems.has(item.id)}
+          onChange={function handleItemChangeForItem(checked) {
+            return handleItemChange(item.id, checked);
+          }}
+        >
+          {item.label}
+        </Checkbox>
+      ))}
+    </CheckboxGroup>
+  );
+}
+```

package/README.mdx

@@ -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

@@ -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

@@ -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"]}
+{"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

@@ -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

@@ -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

@@ -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

@@ -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"]}
+{"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

@@ -1,6 +1,6 @@
 {
   "name": "@bento/checkbox",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Checkbox component",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -9,6 +9,7 @@
     "build": "tsup-node",
     "lint": "biome lint && tsc",
     "posttest": "npm run lint",
+    "prepublishOnly": "node ../../scripts/compile-readme.ts",
     "pretest": "npm run build",
     "test": "vitest --run",
     "test:watch": "vitest"
@@ -39,11 +40,12 @@
     "package.json"
   ],
   "dependencies": {
-    "@bento/control": "^0.1.1",
-    "@bento/icon": "^0.1.1",
-    "@bento/slots": "^0.1.2",
-    "@bento/use-data-attributes": "^0.1.0",
-    "@bento/use-props": "^0.1.0",
+    "@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.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

@@ -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

@@ -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>
   );
 });