@bento/checkbox 0.2.2 → 0.2.3

package/README.md

@@ -177,75 +177,69 @@ 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 SELECT_ALL = 'select-all';
 
+export function CheckboxGroupIndeterminateExample() {
   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());
+  const [checkedItems, setCheckedItems] = useState<string[]>([]);
+
+  const itemsSelectedCount = checkedItems.filter(function isItem(value) {
+    return value !== SELECT_ALL;
+  }).length;
+  const isIndeterminate = itemsSelectedCount > 0 && itemsSelectedCount < allItemIds.length;
+
+  function handleGroupChange(nextValues: string[]) {
+    const prevHadSelectAll = checkedItems.includes(SELECT_ALL);
+    const nextHasSelectAll = nextValues.includes(SELECT_ALL);
+
+    // Select All was just toggled on → select every item, with select-all last.
+    if (!prevHadSelectAll && nextHasSelectAll) {
+      setCheckedItems([...allItemIds, SELECT_ALL]);
+      return;
+    }
+
+    // Select All was just toggled off → clear everything.
+    if (prevHadSelectAll && !nextHasSelectAll) {
+      setCheckedItems([]);
+      return;
     }
-  }
 
-  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;
+    // An individual item toggled. Strip select-all so its membership is purely derived.
+    const itemsOnly = nextValues.filter(function notSelectAll(value) {
+      return value !== SELECT_ALL;
     });
+    const allItemsNowSelected = allItemIds.every(function isInItems(id) {
+      return itemsOnly.includes(id);
+    });
+    if (allItemsNowSelected) {
+      setCheckedItems([...itemsOnly, SELECT_ALL]);
+    } else {
+      setCheckedItems(itemsOnly);
+    }
   }
 
   return (
-    <CheckboxGroup value={Array.from(checkedItems)} data-value={Array.from(checkedItems)}>
+    <CheckboxGroup value={checkedItems} onChange={handleGroupChange} data-value={checkedItems}>
       <Text slot="label">Select Items</Text>
-      <Checkbox
-        name="select-all"
-        value="select-all"
-        isSelected={isAllSelected}
-        isIndeterminate={isIndeterminate}
-        onChange={handleSelectAll}
-      >
+      <Checkbox name={SELECT_ALL} value={SELECT_ALL} isIndeterminate={isIndeterminate}>
         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>
-      ))}
+      {items.map(function renderItem(item) {
+        return (
+          <Checkbox key={item.id} name={item.id} value={item.id}>
+            {item.label}
+          </Checkbox>
+        );
+      })}
     </CheckboxGroup>
   );
 }

package/dist/index.cjs

@@ -1,100 +1,164 @@
-'use strict';
-
-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 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 = 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(
-    {
-      ...props,
-      // Value is optional for standalone checkboxes, but required for CheckboxGroup items;
-      // it's passed explicitly here to avoid typescript error (requires ignore)(recommendation from React Aria).
-      value: props.value
-    },
-    groupState,
-    inputRef
-  ) : reactAria.useCheckbox(props, reactStately.useToggleState(props), inputRef);
-  const interactionDisabled = props.isDisabled || isDisabled || isReadOnly;
-  const { hoverProps, isHovered } = reactAria.useHover({
-    ...props,
-    isDisabled: interactionDisabled
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    container.Container,
-    {
-      as: "label",
-      "aria-checked": props.isIndeterminate ? "mixed" : void 0,
-      ...apply(utils.mergeProps(labelProps, hoverProps)),
-      ...useDataAttributes.useDataAttributes({
-        selected: isSelected,
-        pressed: isPressed,
-        hovered: isHovered,
-        focused: isFocused,
-        focusVisible: isFocusVisible,
-        disabled: interactionDisabled,
-        readonly: isReadOnly,
-        invalid: isInvalid,
-        required: props.isRequired,
-        indeterminate: props.isIndeterminate
-      }),
-      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
-      ]
-    }
-  );
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+let react = require("react");
+react = __toESM(react);
+let _bento_container = require("@bento/container");
+let _bento_use_data_attributes = require("@bento/use-data-attributes");
+let _bento_icon = require("@bento/icon");
+let _bento_input = require("@bento/input");
+let _bento_slots = require("@bento/slots");
+let _bento_use_props = require("@bento/use-props");
+let _bento_visually_hidden = require("@bento/visually-hidden");
+let _react_aria_utils = require("@react-aria/utils");
+let react_aria = require("react-aria");
+let react_stately = require("react-stately");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/checkbox-group-state.tsx
+const CheckboxGroupStateContext = react.default.createContext(null);
+//#endregion
+//#region src/checkbox.tsx
+/**
+* The `Checkbox` is a single checkbox option that can be selected by the user.
+*/
+const Checkbox = (0, _bento_slots.withSlots)("BentoCheckbox", function Checkbox(args) {
+	const { props, apply } = (0, _bento_use_props.useProps)(args);
+	const groupState = (0, react.useContext)(CheckboxGroupStateContext);
+	const ref = (0, react.useRef)(null);
+	const inputRef = (0, _react_aria_utils.useObjectRef)((0, react.useMemo)(() => (0, _react_aria_utils.mergeRefs)(ref, props.inputRef), [ref, props.inputRef]));
+	const { isFocused, isFocusVisible, focusProps } = (0, react_aria.useFocusRing)();
+	const { labelProps, inputProps, isSelected, isPressed, isDisabled, isReadOnly, isInvalid } = groupState ? (0, react_aria.useCheckboxGroupItem)({
+		...props,
+		value: props.value
+	}, groupState, inputRef) : (0, react_aria.useCheckbox)(props, (0, react_stately.useToggleState)(props), inputRef);
+	const interactionDisabled = props.isDisabled || isDisabled || isReadOnly;
+	const { hoverProps, isHovered } = (0, react_aria.useHover)({
+		...props,
+		isDisabled: interactionDisabled
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_bento_container.Container, {
+		as: "label",
+		"aria-checked": props.isIndeterminate ? "mixed" : void 0,
+		...apply((0, _react_aria_utils.mergeProps)(labelProps, hoverProps)),
+		...(0, _bento_use_data_attributes.useDataAttributes)({
+			selected: isSelected,
+			pressed: isPressed,
+			hovered: isHovered,
+			focused: isFocused,
+			focusVisible: isFocusVisible,
+			disabled: interactionDisabled,
+			readonly: isReadOnly,
+			invalid: isInvalid,
+			required: props.isRequired,
+			indeterminate: props.isIndeterminate
+		}),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_bento_visually_hidden.VisuallyHidden, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_bento_input.Input, {
+				...(0, _react_aria_utils.mergeProps)(inputProps, focusProps),
+				ref: inputRef
+			}) }),
+			props.isIndeterminate ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_bento_icon.Icon, {
+				slot: "icon-indeterminate",
+				icon: "checkboxIndeterminate",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+					viewBox: "0 0 24 24",
+					xmlns: "http://www.w3.org/2000/svg",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+						x: "6",
+						y: "11",
+						width: "12",
+						height: "2",
+						fill: "currentColor"
+					})
+				})
+			}) : isSelected ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_bento_icon.Icon, {
+				slot: "icon-checked",
+				icon: "checkboxChecked",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+					viewBox: "0 0 24 24",
+					xmlns: "http://www.w3.org/2000/svg",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+						d: "M9,16.2L4.8,12l-1.4,1.4L9,19L21,7l-1.4-1.4L9,16.2z",
+						fill: "currentColor"
+					})
+				})
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_bento_icon.Icon, {
+				slot: "icon-unchecked",
+				icon: "checkboxUnchecked",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+					width: 24,
+					height: 24,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.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) {
-  const { props, apply } = useProps.useProps(args);
-  const state = reactStately.useCheckboxGroupState(props);
-  const { groupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = reactAria.useCheckboxGroup(
-    { ...props, label: props.label ?? "Checkbox Group", description: props.description ?? "Description" },
-    state
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(CheckboxGroupStateContext.Provider, { value: state, children: /* @__PURE__ */ jsxRuntime.jsx(
-    container.Container,
-    {
-      ...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)
-      },
-      children: props.children
-    }
-  ) });
+//#endregion
+//#region src/checkbox-group.tsx
+/**
+* The `CheckboxGroup` allows a user to select items from a list of `Checkbox` components.
+*/
+const CheckboxGroup = (0, _bento_slots.withSlots)("BentoCheckboxGroup", function CheckboxGroup(args) {
+	const { props, apply } = (0, _bento_use_props.useProps)(args);
+	const state = (0, react_stately.useCheckboxGroupState)(props);
+	const { groupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = (0, react_aria.useCheckboxGroup)({
+		...props,
+		label: props.label ?? "Checkbox Group",
+		description: props.description ?? "Description"
+	}, state);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxGroupStateContext.Provider, {
+		value: state,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_bento_container.Container, {
+			...apply(groupProps),
+			...(0, _bento_use_data_attributes.useDataAttributes)({
+				orientation: props.orientation || "vertical",
+				invalid: state.isInvalid,
+				disabled: state.isDisabled,
+				readonly: state.isReadOnly,
+				required: state.isRequired
+			}),
+			slots: {
+				label: labelProps,
+				description: descriptionProps,
+				error: (0, react_aria.mergeProps)(errorMessageProps, validationResult)
+			},
+			children: props.children
+		})
+	});
 });
-
+//#endregion
 exports.Checkbox = Checkbox;
 exports.CheckboxGroup = CheckboxGroup;
-//# sourceMappingURL=index.cjs.map
+
 //# sourceMappingURL=index.cjs.map

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","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"]}
+{"version":3,"file":"index.cjs","names":["React","Container","VisuallyHidden","Input","Icon","Container"],"sources":["../src/checkbox-group-state.tsx","../src/checkbox.tsx","../src/checkbox-group.tsx"],"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"],"mappings":"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"}

package/dist/index.d.cts

@@ -1,63 +1,66 @@
-import React from 'react';
-import { ContainerProps } from '@bento/container';
-import { AriaCheckboxProps, AriaCheckboxGroupProps } from 'react-aria';
+import React from "react";
+import { ContainerProps } from "@bento/container";
+import { AriaCheckboxGroupProps, AriaCheckboxProps } from "react-aria";
 
+//#region src/checkbox.d.ts
 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. */
-    name?: string;
-    /** A ref for the HTML input element. */
-    inputRef?: React.Ref<HTMLInputElement>;
-    /** The label for the checkbox. Accepts any renderable node. */
-    children?: React.ReactNode;
-    /** Whether the checkbox is required or not. */
-    isRequired?: boolean;
-    /** Whether the input can be selected but not changed by the user. */
-    isReadOnly?: boolean;
-    /**
-     * Whether the checkbox is disabled or not. Shows that a selection exists,
-     * but is not available in that circumstance.
-     */
-    isDisabled?: boolean;
-    /** Whether the element should receive focus on render. */
-    autoFocus?: boolean;
-    /** Whether the checkbox is in an indeterminate state. */
-    isIndeterminate?: boolean;
-    /** Whether the checkbox is in a selected state. */
-    isSelected?: boolean;
+  /** The value of the checkbox, used when submitting an HTML form. */
+  value?: string;
+  /** The name of the checkbox. */
+  name?: string;
+  /** A ref for the HTML input element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /** The label for the checkbox. Accepts any renderable node. */
+  children?: React.ReactNode;
+  /** Whether the checkbox is required or not. */
+  isRequired?: boolean;
+  /** Whether the input can be selected but not changed by the user. */
+  isReadOnly?: boolean;
+  /**
+   * Whether the checkbox is disabled or not. Shows that a selection exists,
+   * but is not available in that circumstance.
+   */
+  isDisabled?: boolean;
+  /** Whether the element should receive focus on render. */
+  autoFocus?: boolean;
+  /** Whether the checkbox is in an indeterminate state. */
+  isIndeterminate?: boolean;
+  /** Whether the checkbox is in a selected state. */
+  isSelected?: boolean;
 }
 /**
  * The `Checkbox` is a single checkbox option that can be selected by the user.
  */
 declare const Checkbox: React.MemoExoticComponent<React.ComponentType<any>>;
-
+//#endregion
+//#region src/checkbox-group.d.ts
 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). */
-    defaultValue?: string[];
-    /** Whether the input is disabled. */
-    isDisabled?: boolean;
-    /** Whether the input can be selected but not changed by the user. */
-    isReadOnly?: boolean;
-    /** Whether user input is required on the input before form submission. */
-    isRequired?: boolean;
-    /** Whether the input value is invalid. */
-    isInvalid?: boolean;
-    /** 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.
-     */
-    form?: string;
-    /** Checkbox children. */
-    children?: React.ReactNode;
+  /** The current value of the checkbox group (controlled). */
+  value?: string[];
+  /** The default value of the checkbox group (uncontrolled). */
+  defaultValue?: string[];
+  /** Whether the input is disabled. */
+  isDisabled?: boolean;
+  /** Whether the input can be selected but not changed by the user. */
+  isReadOnly?: boolean;
+  /** Whether user input is required on the input before form submission. */
+  isRequired?: boolean;
+  /** Whether the input value is invalid. */
+  isInvalid?: boolean;
+  /** 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.
+   */
+  form?: string;
+  /** Checkbox children. */
+  children?: React.ReactNode;
 }
 /**
  * The `CheckboxGroup` allows a user to select items from a list of `Checkbox` components.
  */
 declare const CheckboxGroup: React.MemoExoticComponent<React.ComponentType<any>>;
-
-export { Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps };
+//#endregion
+export { Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../src/checkbox.tsx","../src/checkbox-group.tsx"],"mappings":";;;;;UAaiB,aAAA,SAAsB,iBAAA,EAAmB,IAAA,CAAK,cAAA,QAAsB,iBAAA;;EAEnF,KAAA;EAF6B;EAK7B,IAAA;EAL6D;EAQ7D,QAAA,GAAW,KAAA,CAAM,GAAA,CAAI,gBAAA;EAAA;EAGrB,QAAA,GAAW,KAAA,CAAM,SAAA;EAAN;EAGX,UAAA;EAdwD;EAiBxD,UAAA;EAjB4D;;;;EAuB5D,UAAA;EArBA;EAwBA,SAAA;EAlBA;EAqBA,eAAA;EArBiB;EAwBjB,UAAA;AAAA;;;;cAMW,QAAA,EAAQ,KAAA,CAAA,mBAAA,CAAA,KAAA,CAAA,aAAA;;;UC1CJ,kBAAA,SAA2B,sBAAA,EAAwB,IAAA,CAAK,cAAA,QAAsB,sBAAA;;EAE7F,KAAA;EDE6B;ECC7B,YAAA;EDD6D;ECI7D,UAAA;EDIqB;ECDrB,UAAA;EDIW;ECDX,UAAA;EDVwD;ECaxD,SAAA;EDb4D;ECgB5D,IAAA;EDhBwD;;;;ECsBxD,IAAA;EDdA;ECiBA,QAAA,GAAW,KAAA,CAAM,SAAA;AAAA;;;;cAMN,aAAA,EAAa,KAAA,CAAA,mBAAA,CAAA,KAAA,CAAA,aAAA"}

package/dist/index.d.mts

@@ -0,0 +1,66 @@
+import React from "react";
+import { ContainerProps } from "@bento/container";
+import { AriaCheckboxGroupProps, AriaCheckboxProps } from "react-aria";
+
+//#region src/checkbox.d.ts
+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. */
+  name?: string;
+  /** A ref for the HTML input element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /** The label for the checkbox. Accepts any renderable node. */
+  children?: React.ReactNode;
+  /** Whether the checkbox is required or not. */
+  isRequired?: boolean;
+  /** Whether the input can be selected but not changed by the user. */
+  isReadOnly?: boolean;
+  /**
+   * Whether the checkbox is disabled or not. Shows that a selection exists,
+   * but is not available in that circumstance.
+   */
+  isDisabled?: boolean;
+  /** Whether the element should receive focus on render. */
+  autoFocus?: boolean;
+  /** Whether the checkbox is in an indeterminate state. */
+  isIndeterminate?: boolean;
+  /** Whether the checkbox is in a selected state. */
+  isSelected?: boolean;
+}
+/**
+ * The `Checkbox` is a single checkbox option that can be selected by the user.
+ */
+declare const Checkbox: React.MemoExoticComponent<React.ComponentType<any>>;
+//#endregion
+//#region src/checkbox-group.d.ts
+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). */
+  defaultValue?: string[];
+  /** Whether the input is disabled. */
+  isDisabled?: boolean;
+  /** Whether the input can be selected but not changed by the user. */
+  isReadOnly?: boolean;
+  /** Whether user input is required on the input before form submission. */
+  isRequired?: boolean;
+  /** Whether the input value is invalid. */
+  isInvalid?: boolean;
+  /** 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.
+   */
+  form?: string;
+  /** Checkbox children. */
+  children?: React.ReactNode;
+}
+/**
+ * The `CheckboxGroup` allows a user to select items from a list of `Checkbox` components.
+ */
+declare const CheckboxGroup: React.MemoExoticComponent<React.ComponentType<any>>;
+//#endregion
+export { Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/checkbox.tsx","../src/checkbox-group.tsx"],"mappings":";;;;;UAaiB,aAAA,SAAsB,iBAAA,EAAmB,IAAA,CAAK,cAAA,QAAsB,iBAAA;;EAEnF,KAAA;EAF6B;EAK7B,IAAA;EAL6D;EAQ7D,QAAA,GAAW,KAAA,CAAM,GAAA,CAAI,gBAAA;EAAA;EAGrB,QAAA,GAAW,KAAA,CAAM,SAAA;EAAN;EAGX,UAAA;EAdwD;EAiBxD,UAAA;EAjB4D;;;;EAuB5D,UAAA;EArBA;EAwBA,SAAA;EAlBA;EAqBA,eAAA;EArBiB;EAwBjB,UAAA;AAAA;;;;cAMW,QAAA,EAAQ,KAAA,CAAA,mBAAA,CAAA,KAAA,CAAA,aAAA;;;UC1CJ,kBAAA,SAA2B,sBAAA,EAAwB,IAAA,CAAK,cAAA,QAAsB,sBAAA;;EAE7F,KAAA;EDE6B;ECC7B,YAAA;EDD6D;ECI7D,UAAA;EDIqB;ECDrB,UAAA;EDIW;ECDX,UAAA;EDVwD;ECaxD,SAAA;EDb4D;ECgB5D,IAAA;EDhBwD;;;;ECsBxD,IAAA;EDdA;ECiBA,QAAA,GAAW,KAAA,CAAM,SAAA;AAAA;;;;cAMN,aAAA,EAAa,KAAA,CAAA,mBAAA,CAAA,KAAA,CAAA,aAAA"}

package/dist/index.mjs

@@ -0,0 +1,139 @@
+import React, { useContext, useMemo, useRef } 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 { mergeProps, mergeRefs, useObjectRef } from "@react-aria/utils";
+import { mergeProps as mergeProps$1, useCheckbox, useCheckboxGroup, useCheckboxGroupItem, useFocusRing, useHover } from "react-aria";
+import { useCheckboxGroupState, useToggleState } from "react-stately";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/checkbox-group-state.tsx
+const CheckboxGroupStateContext = React.createContext(null);
+//#endregion
+//#region src/checkbox.tsx
+/**
+* The `Checkbox` is a single checkbox option that can be selected by the user.
+*/
+const Checkbox = withSlots("BentoCheckbox", function Checkbox(args) {
+	const { props, apply } = useProps(args);
+	const groupState = useContext(CheckboxGroupStateContext);
+	const ref = useRef(null);
+	const inputRef = useObjectRef(useMemo(() => mergeRefs(ref, props.inputRef), [ref, props.inputRef]));
+	const { isFocused, isFocusVisible, focusProps } = useFocusRing();
+	const { labelProps, inputProps, isSelected, isPressed, isDisabled, isReadOnly, isInvalid } = groupState ? useCheckboxGroupItem({
+		...props,
+		value: props.value
+	}, groupState, inputRef) : useCheckbox(props, useToggleState(props), inputRef);
+	const interactionDisabled = props.isDisabled || isDisabled || isReadOnly;
+	const { hoverProps, isHovered } = useHover({
+		...props,
+		isDisabled: interactionDisabled
+	});
+	return /* @__PURE__ */ jsxs(Container, {
+		as: "label",
+		"aria-checked": props.isIndeterminate ? "mixed" : void 0,
+		...apply(mergeProps(labelProps, hoverProps)),
+		...useDataAttributes({
+			selected: isSelected,
+			pressed: isPressed,
+			hovered: isHovered,
+			focused: isFocused,
+			focusVisible: isFocusVisible,
+			disabled: interactionDisabled,
+			readonly: isReadOnly,
+			invalid: isInvalid,
+			required: props.isRequired,
+			indeterminate: props.isIndeterminate
+		}),
+		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
+		]
+	});
+});
+//#endregion
+//#region src/checkbox-group.tsx
+/**
+* The `CheckboxGroup` allows a user to select items from a list of `Checkbox` components.
+*/
+const CheckboxGroup = withSlots("BentoCheckboxGroup", function CheckboxGroup(args) {
+	const { props, apply } = useProps(args);
+	const state = useCheckboxGroupState(props);
+	const { groupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useCheckboxGroup({
+		...props,
+		label: props.label ?? "Checkbox Group",
+		description: props.description ?? "Description"
+	}, state);
+	return /* @__PURE__ */ jsx(CheckboxGroupStateContext.Provider, {
+		value: state,
+		children: /* @__PURE__ */ jsx(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$1(errorMessageProps, validationResult)
+			},
+			children: props.children
+		})
+	});
+});
+//#endregion
+export { Checkbox, CheckboxGroup };
+
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["mergeProps"],"sources":["../src/checkbox-group-state.tsx","../src/checkbox.tsx","../src/checkbox-group.tsx"],"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"],"mappings":";;;;;;;;;;;;;AAGA,MAAa,4BAA4B,MAAM,cAAyC,IAAI;;;;;;ACgD5F,MAAa,WAAW,UAAU,iBAAiB,SAAS,SAAS,MAAqB;CACxF,MAAM,EAAE,OAAO,UAAU,SAAS,IAAI;CACtC,MAAM,aAAa,WAAW,yBAAyB;CACvD,MAAM,MAAM,OAAyB,IAAI;CACzC,MAAM,WAAW,aAAa,cAAc,UAAU,KAAK,MAAM,QAAQ,GAAG,CAAC,KAAK,MAAM,QAAQ,CAAC,CAAC;CAClG,MAAM,EAAE,WAAW,gBAAgB,eAAe,aAAa;CAE/D,MAAM,EAAE,YAAY,YAAY,YAAY,WAAW,YAAY,YAAY,cAAc,aACzF,qBACE;EACE,GAAG;EAGH,OAAQ,MAAgD;CAC1D,GACA,YACA,QACF,IACA,YAAY,OAAO,eAAe,KAAK,GAAG,QAAQ;CAEtD,MAAM,sBAAsB,MAAM,cAAc,cAAc;CAC9D,MAAM,EAAE,YAAY,cAAc,SAAS;EACzC,GAAG;EACH,YAAY;CACd,CAAC;CAED,OACE,qBAAC,WAAD;EACE,IAAG;EACH,gBAAc,MAAM,kBAAkB,UAAU,KAAA;EAChD,GAAI,MAAM,WAAW,YAAY,UAAU,CAAC;EAC5C,GAAI,kBAAkB;GACpB,UAAU;GACV,SAAS;GACT,SAAS;GACT,SAAS;GACT,cAAc;GACd,UAAU;GACV,UAAU;GACV,SAAS;GACT,UAAU,MAAM;GAChB,eAAe,MAAM;EACvB,CAAC;YAfH;GAiBE,oBAAC,gBAAD,EAAA,UACE,oBAAC,OAAD;IAAO,GAAI,WAAW,YAAY,UAAU;IAAG,KAAK;GAAW,CAAA,EACjD,CAAA;GAEf,MAAM,kBACL,oBAAC,MAAD;IAAM,MAAK;IAAqB,MAAK;cACnC,oBAAC,OAAD;KAAK,SAAQ;KAAY,OAAM;eAC7B,oBAAC,QAAD;MAAM,GAAE;MAAI,GAAE;MAAK,OAAM;MAAK,QAAO;MAAI,MAAK;KAAgB,CAAA;IAC3D,CAAA;GACD,CAAA,IACJ,aACF,oBAAC,MAAD;IAAM,MAAK;IAAe,MAAK;cAC7B,oBAAC,OAAD;KAAK,SAAQ;KAAY,OAAM;eAC7B,oBAAC,QAAD;MAAM,GAAE;MAAqD,MAAK;KAAgB,CAAA;IAC/E,CAAA;GACD,CAAA,IAEN,oBAAC,MAAD;IAAM,MAAK;IAAiB,MAAK;cAC/B,oBAAC,OAAD;KAAK,OAAO;KAAI,QAAQ;eACtB,oBAAC,QAAD;MAAM,GAAG;MAAG,GAAG;MAAG,OAAO;MAAI,QAAQ;MAAI,IAAI;MAAG,MAAK;MAAO,QAAO;MAAO,aAAa;KAAI,CAAA;IACxF,CAAA;GACD,CAAA;GAEP,MAAM;EACE;;AAEf,CAAC;;;;;;AC7ED,MAAa,gBAAgB,UAAU,sBAAsB,SAAS,cAAc,MAA0B;CAC5G,MAAM,EAAE,OAAO,UAAU,SAAS,IAAI;CACtC,MAAM,QAAQ,sBAAsB,KAAK;CACzC,MAAM,EAAE,YAAY,YAAY,kBAAkB,mBAAmB,GAAG,qBAAqB,iBAC3F;EAAE,GAAG;EAAO,OAAO,MAAM,SAAS;EAAkB,aAAa,MAAM,eAAe;CAAc,GACpG,KACF;CAEA,OACE,oBAAC,0BAA0B,UAA3B;EAAoC,OAAO;YACzC,oBAAC,WAAD;GACE,GAAI,MAAM,UAAU;GACpB,GAAI,kBAAkB;IACpB,aAAa,MAAM,eAAe;IAClC,SAAS,MAAM;IACf,UAAU,MAAM;IAChB,UAAU,MAAM;IAChB,UAAU,MAAM;GAClB,CAAC;GACD,OAAO;IACL,OAAO;IACP,aAAa;IACb,OAAOA,aAAW,mBAAmB,gBAAgB;GACvD;aAEC,MAAM;EACE,CAAA;CACuB,CAAA;AAExC,CAAC"}

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@bento/checkbox",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Checkbox component",
   "type": "module",
   "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
+  "module": "./dist/index.mjs",
   "scripts": {
-    "build": "tsup-node",
-    "lint": "biome lint && tsc",
+    "build": "tsdown",
+    "lint": "biome lint && tsgo --noEmit",
     "prepublishOnly": "node ../../../scripts/compile-readme.ts",
     "test": "vitest --run",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "typecheck": "tsgo --noEmit -p tsconfig.json"
   },
   "repository": {
     "type": "git",
@@ -40,22 +41,22 @@
   "dependencies": {
     "@bento/container": "^0.2.1",
     "@bento/icon": "^0.2.0",
-    "@bento/input": "^0.1.0",
+    "@bento/input": "^0.1.1",
     "@bento/slots": "^0.3.0",
     "@bento/use-data-attributes": "^0.1.1",
-    "@bento/use-props": "^0.2.1",
+    "@bento/use-props": "^0.2.3",
     "@bento/visually-hidden": "^0.1.1",
-    "@react-aria/utils": "^3.30.0",
-    "react-aria": "^3.45.0",
-    "react-stately": "^3.43.0"
+    "@react-aria/utils": "^3.34.0",
+    "react-aria": "^3.48.0",
+    "react-stately": "^3.46.0"
   },
   "devDependencies": {
-    "@types/react": "^19.2.14",
+    "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
-    "tsup": "^8.5.1",
-    "typescript": "^5.9.3",
-    "vitest": "^4.0.18",
-    "vitest-browser-react": "^2.1.0"
+    "tsdown": "^0.22.1",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.7",
+    "vitest-browser-react": "^2.2.0"
   },
   "peerDependencies": {
     "react": "18.x || 19.x",
@@ -64,8 +65,8 @@
   "exports": {
     ".": {
       "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
       },
       "require": {
         "types": "./dist/index.d.cts",

package/dist/index.d.ts

@@ -1,63 +0,0 @@
-import React from 'react';
-import { ContainerProps } from '@bento/container';
-import { AriaCheckboxProps, AriaCheckboxGroupProps } from 'react-aria';
-
-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. */
-    name?: string;
-    /** A ref for the HTML input element. */
-    inputRef?: React.Ref<HTMLInputElement>;
-    /** The label for the checkbox. Accepts any renderable node. */
-    children?: React.ReactNode;
-    /** Whether the checkbox is required or not. */
-    isRequired?: boolean;
-    /** Whether the input can be selected but not changed by the user. */
-    isReadOnly?: boolean;
-    /**
-     * Whether the checkbox is disabled or not. Shows that a selection exists,
-     * but is not available in that circumstance.
-     */
-    isDisabled?: boolean;
-    /** Whether the element should receive focus on render. */
-    autoFocus?: boolean;
-    /** Whether the checkbox is in an indeterminate state. */
-    isIndeterminate?: boolean;
-    /** Whether the checkbox is in a selected state. */
-    isSelected?: boolean;
-}
-/**
- * The `Checkbox` is a single checkbox option that can be selected by the user.
- */
-declare const Checkbox: React.MemoExoticComponent<React.ComponentType<any>>;
-
-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). */
-    defaultValue?: string[];
-    /** Whether the input is disabled. */
-    isDisabled?: boolean;
-    /** Whether the input can be selected but not changed by the user. */
-    isReadOnly?: boolean;
-    /** Whether user input is required on the input before form submission. */
-    isRequired?: boolean;
-    /** Whether the input value is invalid. */
-    isInvalid?: boolean;
-    /** 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.
-     */
-    form?: string;
-    /** Checkbox children. */
-    children?: React.ReactNode;
-}
-/**
- * The `CheckboxGroup` allows a user to select items from a list of `Checkbox` components.
- */
-declare const CheckboxGroup: React.MemoExoticComponent<React.ComponentType<any>>;
-
-export { Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps };

package/dist/index.js

@@ -1,93 +0,0 @@
-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 = React.createContext(null);
-var Checkbox = withSlots("BentoCheckbox", function Checkbox2(args) {
-  const { props, apply } = useProps(args);
-  const groupState = useContext(CheckboxGroupStateContext);
-  const ref = useRef(null);
-  const inputRef = useObjectRef(useMemo(() => mergeRefs(ref, props.inputRef), [ref, props.inputRef]));
-  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;
-      // it's passed explicitly here to avoid typescript error (requires ignore)(recommendation from React Aria).
-      value: props.value
-    },
-    groupState,
-    inputRef
-  ) : useCheckbox(props, useToggleState(props), inputRef);
-  const interactionDisabled = props.isDisabled || isDisabled || isReadOnly;
-  const { hoverProps, isHovered } = useHover({
-    ...props,
-    isDisabled: interactionDisabled
-  });
-  return /* @__PURE__ */ jsxs(
-    Container,
-    {
-      as: "label",
-      "aria-checked": props.isIndeterminate ? "mixed" : void 0,
-      ...apply(mergeProps(labelProps, hoverProps)),
-      ...useDataAttributes({
-        selected: isSelected,
-        pressed: isPressed,
-        hovered: isHovered,
-        focused: isFocused,
-        focusVisible: isFocusVisible,
-        disabled: interactionDisabled,
-        readonly: isReadOnly,
-        invalid: isInvalid,
-        required: props.isRequired,
-        indeterminate: props.isIndeterminate
-      }),
-      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) {
-  const { props, apply } = useProps(args);
-  const state = useCheckboxGroupState(props);
-  const { groupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useCheckboxGroup(
-    { ...props, label: props.label ?? "Checkbox Group", description: props.description ?? "Description" },
-    state
-  );
-  return /* @__PURE__ */ jsx(CheckboxGroupStateContext.Provider, { value: state, children: /* @__PURE__ */ jsx(
-    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$1(errorMessageProps, validationResult)
-      },
-      children: props.children
-    }
-  ) });
-});
-
-export { Checkbox, CheckboxGroup };
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

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