@bento/checkbox 0.2.0 → 0.2.2

package/README.md

@@ -26,53 +26,8 @@ The following properties are available to be used on the `CheckboxGroup` and `Ch
 
 ### 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

package/dist/index.cjs

@@ -1,29 +1,29 @@
 'use strict';
 
-var React2 = require('react');
+var React = require('react');
 var container = require('@bento/container');
 var useDataAttributes = require('@bento/use-data-attributes');
 var icon = require('@bento/icon');
+var input = require('@bento/input');
 var slots = require('@bento/slots');
 var useProps = require('@bento/use-props');
 var visuallyHidden = require('@bento/visually-hidden');
 var utils = require('@react-aria/utils');
 var reactAria = require('react-aria');
 var reactStately = require('react-stately');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React2__default = /*#__PURE__*/_interopDefault(React2);
-
-// src/checkbox.tsx
-var CheckboxGroupStateContext = React2__default.default.createContext(null);
+var React__default = /*#__PURE__*/_interopDefault(React);
 
 // src/checkbox.tsx
+var CheckboxGroupStateContext = React__default.default.createContext(null);
 var Checkbox = slots.withSlots("BentoCheckbox", function Checkbox2(args) {
   const { props, apply } = useProps.useProps(args);
-  const groupState = React2.useContext(CheckboxGroupStateContext);
-  const ref = React2.useRef(null);
-  const inputRef = utils.useObjectRef(React2.useMemo(() => utils.mergeRefs(ref, props.inputRef), [ref, props.inputRef]));
+  const groupState = React.useContext(CheckboxGroupStateContext);
+  const ref = React.useRef(null);
+  const inputRef = utils.useObjectRef(React.useMemo(() => utils.mergeRefs(ref, props.inputRef), [ref, props.inputRef]));
   const { isFocused, isFocusVisible, focusProps } = reactAria.useFocusRing();
   const { labelProps, inputProps, isSelected, isPressed, isDisabled, isReadOnly, isInvalid } = groupState ? reactAria.useCheckboxGroupItem(
     {
@@ -40,7 +40,7 @@ var Checkbox = slots.withSlots("BentoCheckbox", function Checkbox2(args) {
     ...props,
     isDisabled: interactionDisabled
   });
-  return /* @__PURE__ */ React2__default.default.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     container.Container,
     {
       as: "label",
@@ -57,11 +57,13 @@ var Checkbox = slots.withSlots("BentoCheckbox", function Checkbox2(args) {
         invalid: isInvalid,
         required: props.isRequired,
         indeterminate: props.isIndeterminate
-      })
-    },
-    /* @__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
+      }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(visuallyHidden.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx(input.Input, { ...utils.mergeProps(inputProps, focusProps), ref: inputRef }) }),
+        props.isIndeterminate ? /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { slot: "icon-indeterminate", icon: "checkboxIndeterminate", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "6", y: "11", width: "12", height: "2", fill: "currentColor" }) }) }) : isSelected ? /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { slot: "icon-checked", icon: "checkboxChecked", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9,16.2L4.8,12l-1.4,1.4L9,19L21,7l-1.4-1.4L9,16.2z", fill: "currentColor" }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { slot: "icon-unchecked", icon: "checkboxUnchecked", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 24, height: 24, children: /* @__PURE__ */ jsxRuntime.jsx("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) {
@@ -71,7 +73,7 @@ var CheckboxGroup = slots.withSlots("BentoCheckboxGroup", function CheckboxGroup
     { ...props, label: props.label ?? "Checkbox Group", description: props.description ?? "Description" },
     state
   );
-  return /* @__PURE__ */ React2__default.default.createElement(CheckboxGroupStateContext.Provider, { value: state }, /* @__PURE__ */ React2__default.default.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(CheckboxGroupStateContext.Provider, { value: state, children: /* @__PURE__ */ jsxRuntime.jsx(
     container.Container,
     {
       ...apply(groupProps),
@@ -86,10 +88,10 @@ var CheckboxGroup = slots.withSlots("BentoCheckboxGroup", function CheckboxGroup
         label: labelProps,
         description: descriptionProps,
         error: reactAria.mergeProps(errorMessageProps, validationResult)
-      }
-    },
-    props.children
-  ));
+      },
+      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","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"]}
+{"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","jsxs","Container","mergeProps","useDataAttributes","jsx","VisuallyHidden","Input","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 { Input } from '@bento/input';\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,4 +1,3 @@
-import * as _bento_slots from '@bento/slots';
 import React from 'react';
 import { ContainerProps } from '@bento/container';
 import { AriaCheckboxProps, AriaCheckboxGroupProps } from 'react-aria';
@@ -31,7 +30,7 @@ interface CheckboxProps extends AriaCheckboxProps, Omit<ContainerProps, keyof Ar
 /**
  * The `Checkbox` is a single checkbox option that can be selected by the user.
  */
-declare const Checkbox: React.MemoExoticComponent<React.ComponentType<CheckboxProps & _bento_slots.Slots>>;
+declare const Checkbox: React.MemoExoticComponent<React.ComponentType<any>>;
 
 interface CheckboxGroupProps extends AriaCheckboxGroupProps, Omit<ContainerProps, keyof AriaCheckboxGroupProps> {
     /** The current value of the checkbox group (controlled). */
@@ -59,6 +58,6 @@ interface CheckboxGroupProps extends AriaCheckboxGroupProps, Omit<ContainerProps
 /**
  * The `CheckboxGroup` allows a user to select items from a list of `Checkbox` components.
  */
-declare const CheckboxGroup: React.MemoExoticComponent<React.ComponentType<CheckboxGroupProps & _bento_slots.Slots>>;
+declare const CheckboxGroup: React.MemoExoticComponent<React.ComponentType<any>>;
 
 export { Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps };

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-import * as _bento_slots from '@bento/slots';
 import React from 'react';
 import { ContainerProps } from '@bento/container';
 import { AriaCheckboxProps, AriaCheckboxGroupProps } from 'react-aria';
@@ -31,7 +30,7 @@ interface CheckboxProps extends AriaCheckboxProps, Omit<ContainerProps, keyof Ar
 /**
  * The `Checkbox` is a single checkbox option that can be selected by the user.
  */
-declare const Checkbox: React.MemoExoticComponent<React.ComponentType<CheckboxProps & _bento_slots.Slots>>;
+declare const Checkbox: React.MemoExoticComponent<React.ComponentType<any>>;
 
 interface CheckboxGroupProps extends AriaCheckboxGroupProps, Omit<ContainerProps, keyof AriaCheckboxGroupProps> {
     /** The current value of the checkbox group (controlled). */
@@ -59,6 +58,6 @@ interface CheckboxGroupProps extends AriaCheckboxGroupProps, Omit<ContainerProps
 /**
  * The `CheckboxGroup` allows a user to select items from a list of `Checkbox` components.
  */
-declare const CheckboxGroup: React.MemoExoticComponent<React.ComponentType<CheckboxGroupProps & _bento_slots.Slots>>;
+declare const CheckboxGroup: React.MemoExoticComponent<React.ComponentType<any>>;
 
 export { Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps };

package/dist/index.js

@@ -1,18 +1,18 @@
-import React2, { useContext, useRef, useMemo } from 'react';
+import React, { useContext, useRef, useMemo } from 'react';
 import { Container } from '@bento/container';
 import { useDataAttributes } from '@bento/use-data-attributes';
 import { Icon } from '@bento/icon';
+import { Input } from '@bento/input';
 import { withSlots } from '@bento/slots';
 import { useProps } from '@bento/use-props';
 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 { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/checkbox.tsx
-var CheckboxGroupStateContext = React2.createContext(null);
-
-// src/checkbox.tsx
+var CheckboxGroupStateContext = React.createContext(null);
 var Checkbox = withSlots("BentoCheckbox", function Checkbox2(args) {
   const { props, apply } = useProps(args);
   const groupState = useContext(CheckboxGroupStateContext);
@@ -34,7 +34,7 @@ var Checkbox = withSlots("BentoCheckbox", function Checkbox2(args) {
     ...props,
     isDisabled: interactionDisabled
   });
-  return /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ jsxs(
     Container,
     {
       as: "label",
@@ -51,11 +51,13 @@ var Checkbox = withSlots("BentoCheckbox", function Checkbox2(args) {
         invalid: isInvalid,
         required: props.isRequired,
         indeterminate: props.isIndeterminate
-      })
-    },
-    /* @__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
+      }),
+      children: [
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(Input, { ...mergeProps(inputProps, focusProps), ref: inputRef }) }),
+        props.isIndeterminate ? /* @__PURE__ */ jsx(Icon, { slot: "icon-indeterminate", icon: "checkboxIndeterminate", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("rect", { x: "6", y: "11", width: "12", height: "2", fill: "currentColor" }) }) }) : isSelected ? /* @__PURE__ */ jsx(Icon, { slot: "icon-checked", icon: "checkboxChecked", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M9,16.2L4.8,12l-1.4,1.4L9,19L21,7l-1.4-1.4L9,16.2z", fill: "currentColor" }) }) }) : /* @__PURE__ */ jsx(Icon, { slot: "icon-unchecked", icon: "checkboxUnchecked", children: /* @__PURE__ */ jsx("svg", { width: 24, height: 24, children: /* @__PURE__ */ jsx("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) {
@@ -65,7 +67,7 @@ var CheckboxGroup = withSlots("BentoCheckboxGroup", function CheckboxGroup2(args
     { ...props, label: props.label ?? "Checkbox Group", description: props.description ?? "Description" },
     state
   );
-  return /* @__PURE__ */ React2.createElement(CheckboxGroupStateContext.Provider, { value: state }, /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ jsx(CheckboxGroupStateContext.Provider, { value: state, children: /* @__PURE__ */ jsx(
     Container,
     {
       ...apply(groupProps),
@@ -80,10 +82,10 @@ var CheckboxGroup = withSlots("BentoCheckboxGroup", function CheckboxGroup2(args
         label: labelProps,
         description: descriptionProps,
         error: mergeProps$1(errorMessageProps, validationResult)
-      }
-    },
-    props.children
-  ));
+      },
+      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","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"]}
+{"version":3,"sources":["../src/checkbox-group-state.tsx","../src/checkbox.tsx","../src/checkbox-group.tsx"],"names":["Checkbox","withSlots","CheckboxGroup","useProps","jsx","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 { Input } from '@bento/input';\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.2.0",
+  "version": "0.2.2",
   "description": "Checkbox component",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -8,15 +8,13 @@
   "scripts": {
     "build": "tsup-node",
     "lint": "biome lint && tsc",
-    "posttest": "npm run lint",
-    "prepublishOnly": "node ../../scripts/compile-readme.ts",
-    "pretest": "npm run build",
+    "prepublishOnly": "node ../../../scripts/compile-readme.ts",
     "test": "vitest --run",
     "test:watch": "vitest"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/godaddy/bento.git"
+    "url": "git+https://github.com/godaddy/antares.git"
   },
   "keywords": [
     "accessibility",
@@ -31,24 +29,33 @@
   "author": "GoDaddy Operating Company, LLC",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/godaddy/bento/issues"
+    "url": "https://github.com/godaddy/antares/issues"
   },
-  "homepage": "https://github.com/godaddy/bento#readme",
+  "homepage": "https://github.com/godaddy/antares#readme",
   "files": [
     "dist",
     "src",
     "package.json"
   ],
   "dependencies": {
-    "@bento/container": "^0.2.0",
-    "@bento/icon": "^0.1.3",
-    "@bento/slots": "^0.2.0",
+    "@bento/container": "^0.2.1",
+    "@bento/icon": "^0.2.0",
+    "@bento/input": "^0.1.0",
+    "@bento/slots": "^0.3.0",
     "@bento/use-data-attributes": "^0.1.1",
-    "@bento/use-props": "^0.2.0",
-    "@bento/visually-hidden": "^0.1.0",
+    "@bento/use-props": "^0.2.1",
+    "@bento/visually-hidden": "^0.1.1",
     "@react-aria/utils": "^3.30.0",
-    "react-aria": "^3.44.0",
-    "react-stately": "^3.42.0"
+    "react-aria": "^3.45.0",
+    "react-stately": "^3.43.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.18",
+    "vitest-browser-react": "^2.1.0"
   },
   "peerDependencies": {
     "react": "18.x || 19.x",

package/src/checkbox.tsx

@@ -2,6 +2,7 @@ import React, { useContext, useRef, useMemo } from 'react';
 import { Container, type ContainerProps } from '@bento/container';
 import { useDataAttributes } from '@bento/use-data-attributes';
 import { Icon } from '@bento/icon';
+import { Input } from '@bento/input';
 import { withSlots } from '@bento/slots';
 import { useProps } from '@bento/use-props';
 import { VisuallyHidden } from '@bento/visually-hidden';
@@ -93,7 +94,7 @@ export const Checkbox = withSlots('BentoCheckbox', function Checkbox(args: Check
       })}
     >
       <VisuallyHidden>
-        <input {...mergeProps(inputProps, focusProps)} ref={inputRef} />
+        <Input {...mergeProps(inputProps, focusProps)} ref={inputRef} />
       </VisuallyHidden>
 
       {props.isIndeterminate ? (