@bento/radio 0.1.2

package/LICENSE

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright (c) 2025 GoDaddy Operating Company, LLC.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.mdx

@@ -0,0 +1,108 @@
+import { Meta, ArgTypes, Story, Controls, Source } from '@storybook/addon-docs/blocks';
+import * as Stories from './radio.stories.tsx';
+import Uncontrolled from './examples/uncontrolled.tsx?raw';
+import Controlled from './examples/controlled.tsx?raw';
+import SingleRadio from './examples/single-radio.tsx?raw';
+
+<Meta of={Stories} name="Overview" />
+
+# Radio
+
+The `@bento/radio` package provides accessible, customizable radio controls. It exports the **RadioGroup** and **Radio** primitives, enabling you to build groups of radio options with consistent keyboard navigation, focus management, and ARIA support.
+
+The `RadioGroup` allows a user to select a single item from a list of `Radio` components.
+
+The `Radio` is a single radio option that can be selected by the user.
+
+## Installation
+
+```bash
+npm install --save @bento/radio
+```
+
+## Props
+
+The `@bento/radio` package exports the `RadioGroup` and `Radio` primitives:
+
+```jsx
+import { RadioGroup, Radio } from '@bento/radio';
+
+<RadioGroup label="Favorite fruit">
+  <Radio value="apple">Apple</Radio>
+  <Radio value="banana">Banana</Radio>
+  <Radio value="orange">Orange</Radio>
+</RadioGroup>;
+```
+
+The following properties are available to be used on the `RadioGroup` and `Radio` primitives:
+
+### RadioGroup
+
+<ArgTypes of={Stories.RadioGroupProps} />
+
+### Radio
+
+<ArgTypes of={Stories.RadioProps} />
+
+## Data Attributes, Slot Map and Props
+
+The data attributes, slot map and props can be used to style and customize the `RadioGroup` and `Radio` primitives.
+
+### `RadioGroup` Data Attributes
+
+| Attribute       | Description                     |
+| --------------- | ------------------------------- |
+| `data-disabled` | Indicates the group is disabled |
+| `data-readonly` | Indicates the group is readonly |
+| `data-required` | Indicates the group is required |
+| `data-invalid`  | Indicates the group is invalid  |
+
+### `Radio` Data Attributes
+
+| Attribute            | Description                          |
+| -------------------- | ------------------------------------ |
+| `data-pressed`       | Indicates the radio is being pressed |
+| `data-hovered`       | Indicates the radio is hovered       |
+| `data-focused`       | Indicates the radio has focus        |
+| `data-focus-visible` | Indicates focus should be visible    |
+| `data-selected`      | Indicates the radio is selected      |
+| `data-disabled`      | Indicates the radio is disabled      |
+| `data-readonly`      | Indicates the radio is readonly      |
+| `data-invalid`       | Indicates the radio is invalid       |
+| `data-required`      | Indicates the radio is required      |
+
+### `RadioGroup` Slot Map
+
+| Slot Name           | Description                  |
+| ------------------- | ---------------------------- |
+| `group.label`       | Label for radiogroup         |
+| `group.description` | Description for radiogroup   |
+| `group.error`       | Error message for radiogroup |
+
+### `Radio` Slot Map
+
+| Slot Name                | Description              |
+| ------------------------ | ------------------------ |
+| `control.icon-checked`   | Icon for checked radio   |
+| `control.icon-unchecked` | Icon for unchecked radio |
+| `control.label`          | Text for radio           |
+
+## Examples
+
+### Uncontrolled
+
+The `RadioGroup` is uncontrolled by default.
+
+<Source language="tsx" code={Uncontrolled} />
+
+### Controlled
+
+The `RadioGroup` can be controlled by passing a `value` and `onChange` prop.
+
+<Source language="tsx" code={Controlled} />
+
+### Single Radio
+
+Even if you only have one radio option, it must always be placed inside a `RadioGroup`.
+
+<Source language="tsx" code={SingleRadio} />

package/dist/index.cjs

@@ -0,0 +1,96 @@
+'use strict';
+
+var React2 = require('react');
+var control = require('@bento/control');
+var useDataAttributes = require('@bento/use-data-attributes');
+var icon = require('@bento/icon');
+var slots = require('@bento/slots');
+var useProps = require('@bento/use-props');
+var utils = require('@react-aria/utils');
+var reactAria = require('react-aria');
+var reactStately = require('react-stately');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React2__default = /*#__PURE__*/_interopDefault(React2);
+
+// src/radio.tsx
+var RadioGroupStateContext = React2__default.default.createContext(null);
+
+// src/radio.tsx
+var Radio = slots.withSlots("BentoRadio", function Radio2(args) {
+  const { props, apply } = useProps.useProps(args);
+  const state = React2__default.default.useContext(RadioGroupStateContext);
+  const ref = React2__default.default.useRef(null);
+  const inputRef = utils.useObjectRef(React2.useMemo(() => utils.mergeRefs(ref, props.inputRef), [ref, props.inputRef]));
+  const { isFocused, isFocusVisible, focusProps } = reactAria.useFocusRing();
+  const { inputProps, labelProps, isSelected, isPressed } = reactAria.useRadio(props, state, inputRef);
+  const interactionDisabled = props.isDisabled || state.isReadOnly;
+  const { hoverProps, isHovered } = reactAria.useHover({
+    ...props,
+    isDisabled: interactionDisabled
+  });
+  return /* @__PURE__ */ React2__default.default.createElement(
+    control.Control,
+    {
+      slot: "control",
+      label: props.children,
+      labelProps: utils.mergeProps(labelProps, hoverProps),
+      inputRef,
+      inputProps: utils.mergeProps(inputProps, focusProps),
+      ...apply(props, ["isDisabled", "value", "autoFocus"]),
+      ...useDataAttributes.useDataAttributes({
+        selected: isSelected,
+        pressed: isPressed,
+        hovered: isHovered,
+        focused: isFocused,
+        focusVisible: isFocusVisible,
+        disabled: props.isDisabled,
+        readonly: state.isReadOnly,
+        invalid: state.isInvalid,
+        required: state.isRequired
+      })
+    },
+    isSelected ? /* @__PURE__ */ React2__default.default.createElement(icon.Icon, { slot: "icon-checked", icon: "radioChecked" }, /* @__PURE__ */ React2__default.default.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, /* @__PURE__ */ React2__default.default.createElement("circle", { cx: 12, cy: 12, r: 8 - 6 / 2, fill: "none", stroke: "orange", strokeWidth: 6 }))) : /* @__PURE__ */ React2__default.default.createElement(icon.Icon, { slot: "icon-unchecked", icon: "radioUnchecked" }, /* @__PURE__ */ React2__default.default.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, /* @__PURE__ */ React2__default.default.createElement("circle", { cx: 12, cy: 12, r: 8, fill: "none", stroke: "gray", strokeWidth: 2 })))
+  );
+});
+var RadioGroup = slots.withSlots("BentoRadioGroup", function RadioGroup2(args) {
+  const { errorMessage, ...restArgs } = args;
+  const { props, apply } = useProps.useProps(restArgs);
+  const state = reactStately.useRadioGroupState(props);
+  const { radioGroupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = reactAria.useRadioGroup(
+    props,
+    state
+  );
+  const displayedErrorMessage = React2.useMemo(
+    function getErrorMessage() {
+      return typeof errorMessage === "function" ? errorMessage(validationResult) : errorMessage || validationResult.validationErrors.join(", ");
+    },
+    [errorMessage, validationResult]
+  );
+  return /* @__PURE__ */ React2__default.default.createElement(
+    control.ControlGroup,
+    {
+      slot: "group",
+      labelProps,
+      descriptionProps,
+      errorMessage: displayedErrorMessage,
+      errorMessageProps,
+      ...radioGroupProps,
+      ...apply(props, ["isInvalid", "isDisabled", "isReadOnly", "isRequired", "validationBehavior"]),
+      ...useDataAttributes.useDataAttributes({
+        orientation: props.orientation || "vertical",
+        invalid: state.isInvalid,
+        disabled: state.isDisabled,
+        readonly: state.isReadOnly,
+        required: state.isRequired
+      })
+    },
+    /* @__PURE__ */ React2__default.default.createElement(RadioGroupStateContext.Provider, { value: state }, props.children)
+  );
+});
+
+exports.Radio = Radio;
+exports.RadioGroup = RadioGroup;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/radio-group-state.tsx","../src/radio.tsx","../src/radio-group.tsx"],"names":["React","withSlots","Radio","useProps","useObjectRef","useMemo","mergeRefs","useFocusRing","useRadio","useHover","Control","mergeProps","useDataAttributes","Icon","RadioGroup","useRadioGroupState","useRadioGroup","ControlGroup"],"mappings":"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","file":"index.cjs","sourcesContent":["import React from 'react';\nimport { RadioGroupState } from 'react-stately';\n\nexport const RadioGroupStateContext = React.createContext<RadioGroupState | null>(null);\n","import React, { useMemo } from 'react';\nimport { Control, type ControlProps } from '@bento/control';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { Icon } from '@bento/icon';\nimport { withSlots } from '@bento/slots';\nimport { useProps } from '@bento/use-props';\nimport { mergeProps, mergeRefs, useObjectRef } from '@react-aria/utils';\nimport { useFocusRing, useHover, useRadio, type AriaRadioProps } from 'react-aria';\nimport { RadioGroupStateContext } from './radio-group-state';\n\nexport interface RadioProps extends AriaRadioProps, Partial<Omit<ControlProps, keyof AriaRadioProps>> {\n  /** The value of the radio button, used when submitting an HTML form. */\n  value: string;\n\n  /** A ref for the HTML input element. */\n  inputRef?: React.Ref<HTMLInputElement>;\n\n  /** The label for the Radio. Accepts any renderable node. */\n  children?: React.ReactNode;\n\n  /**\n   * Whether the radio button 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\n/**\n * The `Radio` is a single radio option that can be selected by the user.\n */\nexport const Radio = withSlots('BentoRadio', function Radio(args: RadioProps) {\n  const { props, apply } = useProps(args);\n  const state = React.useContext(RadioGroupStateContext)!;\n  const ref = React.useRef<HTMLInputElement>(null);\n  const inputRef = useObjectRef(useMemo(() => mergeRefs(ref, props.inputRef), [ref, props.inputRef]));\n  const { isFocused, isFocusVisible, focusProps } = useFocusRing();\n  const { inputProps, labelProps, isSelected, isPressed } = useRadio(props as RadioProps, state, inputRef);\n  const interactionDisabled = props.isDisabled || state.isReadOnly;\n  const { hoverProps, isHovered } = useHover({\n    ...props,\n    isDisabled: interactionDisabled\n  });\n\n  return (\n    <Control\n      slot=\"control\"\n      label={props.children}\n      labelProps={mergeProps(labelProps, hoverProps)}\n      inputRef={inputRef}\n      inputProps={mergeProps(inputProps, focusProps)}\n      {...apply(props, ['isDisabled', 'value', 'autoFocus'])}\n      {...useDataAttributes({\n        selected: isSelected,\n        pressed: isPressed,\n        hovered: isHovered,\n        focused: isFocused,\n        focusVisible: isFocusVisible,\n        disabled: props.isDisabled,\n        readonly: state.isReadOnly,\n        invalid: state.isInvalid,\n        required: state.isRequired\n      })}\n    >\n      {isSelected ? (\n        <Icon slot=\"icon-checked\" icon=\"radioChecked\">\n          <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n            <circle cx={12} cy={12} r={8 - 6 / 2} fill=\"none\" stroke=\"orange\" strokeWidth={6} />\n          </svg>\n        </Icon>\n      ) : (\n        <Icon slot=\"icon-unchecked\" icon=\"radioUnchecked\">\n          <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n            <circle cx={12} cy={12} r={8} fill=\"none\" stroke=\"gray\" strokeWidth={2} />\n          </svg>\n        </Icon>\n      )}\n    </Control>\n  );\n});\n","import React, { useMemo } from 'react';\nimport { ControlGroup, ControlGroupProps } from '@bento/control';\nimport { withSlots } from '@bento/slots';\nimport { useProps } from '@bento/use-props';\nimport { useRadioGroup, type AriaRadioGroupProps } from 'react-aria';\nimport { useRadioGroupState } from 'react-stately';\nimport { RadioGroupStateContext } from './radio-group-state';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { type ValidationResult } from '@react-types/shared';\n\nexport interface RadioGroupProps\n  extends AriaRadioGroupProps,\n    Partial<Omit<ControlGroupProps, keyof AriaRadioGroupProps>> {\n  /** The current value (controlled). */\n  value?: string;\n\n  /** The default value (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  /** Radio children. */\n  children: React.ReactNode;\n\n  /** Error message for the radio group. */\n  errorMessage?: React.ReactNode | ((val: ValidationResult) => React.ReactNode);\n}\n\n/**\n * The `RadioGroup` allows a user to select a single item from a list of `Radio` components.\n */\nexport const RadioGroup = withSlots('BentoRadioGroup', function RadioGroup(args: RadioGroupProps) {\n  const { errorMessage, ...restArgs } = args;\n  const { props, apply } = useProps(restArgs);\n  const state = useRadioGroupState(props);\n  const { radioGroupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useRadioGroup(\n    props,\n    state\n  );\n\n  const displayedErrorMessage = useMemo(\n    function getErrorMessage() {\n      return typeof errorMessage === 'function'\n        ? errorMessage(validationResult)\n        : errorMessage || validationResult.validationErrors.join(', ');\n    },\n    [errorMessage, validationResult]\n  );\n\n  return (\n    <ControlGroup\n      slot=\"group\"\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessage={displayedErrorMessage}\n      errorMessageProps={errorMessageProps}\n      {...radioGroupProps}\n      {...apply(props, ['isInvalid', 'isDisabled', 'isReadOnly', 'isRequired', 'validationBehavior'])}\n      {...useDataAttributes({\n        orientation: props.orientation || 'vertical',\n        invalid: state.isInvalid,\n        disabled: state.isDisabled,\n        readonly: state.isReadOnly,\n        required: state.isRequired\n      })}\n    >\n      <RadioGroupStateContext.Provider value={state}>{props.children}</RadioGroupStateContext.Provider>\n    </ControlGroup>\n  );\n});\n"]}

package/dist/index.d.cts

@@ -0,0 +1,57 @@
+import * as _bento_slots from '@bento/slots';
+import React from 'react';
+import { ControlProps, ControlGroupProps } from '@bento/control';
+import { AriaRadioProps, AriaRadioGroupProps } from 'react-aria';
+import { ValidationResult } from '@react-types/shared';
+
+interface RadioProps extends AriaRadioProps, Partial<Omit<ControlProps, keyof AriaRadioProps>> {
+    /** The value of the radio button, used when submitting an HTML form. */
+    value: string;
+    /** A ref for the HTML input element. */
+    inputRef?: React.Ref<HTMLInputElement>;
+    /** The label for the Radio. Accepts any renderable node. */
+    children?: React.ReactNode;
+    /**
+     * Whether the radio button 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;
+}
+/**
+ * The `Radio` is a single radio option that can be selected by the user.
+ */
+declare const Radio: React.NamedExoticComponent<RadioProps & _bento_slots.Slots>;
+
+interface RadioGroupProps extends AriaRadioGroupProps, Partial<Omit<ControlGroupProps, keyof AriaRadioGroupProps>> {
+    /** The current value (controlled). */
+    value?: string;
+    /** The default value (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;
+    /** Radio children. */
+    children: React.ReactNode;
+    /** Error message for the radio group. */
+    errorMessage?: React.ReactNode | ((val: ValidationResult) => React.ReactNode);
+}
+/**
+ * The `RadioGroup` allows a user to select a single item from a list of `Radio` components.
+ */
+declare const RadioGroup: React.NamedExoticComponent<RadioGroupProps & _bento_slots.Slots>;
+
+export { Radio, RadioGroup, type RadioGroupProps, type RadioProps };

package/dist/index.d.ts

@@ -0,0 +1,57 @@
+import * as _bento_slots from '@bento/slots';
+import React from 'react';
+import { ControlProps, ControlGroupProps } from '@bento/control';
+import { AriaRadioProps, AriaRadioGroupProps } from 'react-aria';
+import { ValidationResult } from '@react-types/shared';
+
+interface RadioProps extends AriaRadioProps, Partial<Omit<ControlProps, keyof AriaRadioProps>> {
+    /** The value of the radio button, used when submitting an HTML form. */
+    value: string;
+    /** A ref for the HTML input element. */
+    inputRef?: React.Ref<HTMLInputElement>;
+    /** The label for the Radio. Accepts any renderable node. */
+    children?: React.ReactNode;
+    /**
+     * Whether the radio button 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;
+}
+/**
+ * The `Radio` is a single radio option that can be selected by the user.
+ */
+declare const Radio: React.NamedExoticComponent<RadioProps & _bento_slots.Slots>;
+
+interface RadioGroupProps extends AriaRadioGroupProps, Partial<Omit<ControlGroupProps, keyof AriaRadioGroupProps>> {
+    /** The current value (controlled). */
+    value?: string;
+    /** The default value (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;
+    /** Radio children. */
+    children: React.ReactNode;
+    /** Error message for the radio group. */
+    errorMessage?: React.ReactNode | ((val: ValidationResult) => React.ReactNode);
+}
+/**
+ * The `RadioGroup` allows a user to select a single item from a list of `Radio` components.
+ */
+declare const RadioGroup: React.NamedExoticComponent<RadioGroupProps & _bento_slots.Slots>;
+
+export { Radio, RadioGroup, type RadioGroupProps, type RadioProps };

package/dist/index.js

@@ -0,0 +1,89 @@
+import React2, { useMemo } from 'react';
+import { Control, ControlGroup } from '@bento/control';
+import { useDataAttributes } from '@bento/use-data-attributes';
+import { Icon } from '@bento/icon';
+import { withSlots } from '@bento/slots';
+import { useProps } from '@bento/use-props';
+import { useObjectRef, mergeRefs, mergeProps } from '@react-aria/utils';
+import { useFocusRing, useRadio, useHover, useRadioGroup } from 'react-aria';
+import { useRadioGroupState } from 'react-stately';
+
+// src/radio.tsx
+var RadioGroupStateContext = React2.createContext(null);
+
+// src/radio.tsx
+var Radio = withSlots("BentoRadio", function Radio2(args) {
+  const { props, apply } = useProps(args);
+  const state = React2.useContext(RadioGroupStateContext);
+  const ref = React2.useRef(null);
+  const inputRef = useObjectRef(useMemo(() => mergeRefs(ref, props.inputRef), [ref, props.inputRef]));
+  const { isFocused, isFocusVisible, focusProps } = useFocusRing();
+  const { inputProps, labelProps, isSelected, isPressed } = useRadio(props, state, inputRef);
+  const interactionDisabled = props.isDisabled || state.isReadOnly;
+  const { hoverProps, isHovered } = useHover({
+    ...props,
+    isDisabled: interactionDisabled
+  });
+  return /* @__PURE__ */ React2.createElement(
+    Control,
+    {
+      slot: "control",
+      label: props.children,
+      labelProps: mergeProps(labelProps, hoverProps),
+      inputRef,
+      inputProps: mergeProps(inputProps, focusProps),
+      ...apply(props, ["isDisabled", "value", "autoFocus"]),
+      ...useDataAttributes({
+        selected: isSelected,
+        pressed: isPressed,
+        hovered: isHovered,
+        focused: isFocused,
+        focusVisible: isFocusVisible,
+        disabled: props.isDisabled,
+        readonly: state.isReadOnly,
+        invalid: state.isInvalid,
+        required: state.isRequired
+      })
+    },
+    isSelected ? /* @__PURE__ */ React2.createElement(Icon, { slot: "icon-checked", icon: "radioChecked" }, /* @__PURE__ */ React2.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, /* @__PURE__ */ React2.createElement("circle", { cx: 12, cy: 12, r: 8 - 6 / 2, fill: "none", stroke: "orange", strokeWidth: 6 }))) : /* @__PURE__ */ React2.createElement(Icon, { slot: "icon-unchecked", icon: "radioUnchecked" }, /* @__PURE__ */ React2.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, /* @__PURE__ */ React2.createElement("circle", { cx: 12, cy: 12, r: 8, fill: "none", stroke: "gray", strokeWidth: 2 })))
+  );
+});
+var RadioGroup = withSlots("BentoRadioGroup", function RadioGroup2(args) {
+  const { errorMessage, ...restArgs } = args;
+  const { props, apply } = useProps(restArgs);
+  const state = useRadioGroupState(props);
+  const { radioGroupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useRadioGroup(
+    props,
+    state
+  );
+  const displayedErrorMessage = useMemo(
+    function getErrorMessage() {
+      return typeof errorMessage === "function" ? errorMessage(validationResult) : errorMessage || validationResult.validationErrors.join(", ");
+    },
+    [errorMessage, validationResult]
+  );
+  return /* @__PURE__ */ React2.createElement(
+    ControlGroup,
+    {
+      slot: "group",
+      labelProps,
+      descriptionProps,
+      errorMessage: displayedErrorMessage,
+      errorMessageProps,
+      ...radioGroupProps,
+      ...apply(props, ["isInvalid", "isDisabled", "isReadOnly", "isRequired", "validationBehavior"]),
+      ...useDataAttributes({
+        orientation: props.orientation || "vertical",
+        invalid: state.isInvalid,
+        disabled: state.isDisabled,
+        readonly: state.isReadOnly,
+        required: state.isRequired
+      })
+    },
+    /* @__PURE__ */ React2.createElement(RadioGroupStateContext.Provider, { value: state }, props.children)
+  );
+});
+
+export { Radio, RadioGroup };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/radio-group-state.tsx","../src/radio.tsx","../src/radio-group.tsx"],"names":["React","Radio","withSlots","RadioGroup","useProps","useMemo","useDataAttributes"],"mappings":"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","file":"index.js","sourcesContent":["import React from 'react';\nimport { RadioGroupState } from 'react-stately';\n\nexport const RadioGroupStateContext = React.createContext<RadioGroupState | null>(null);\n","import React, { useMemo } from 'react';\nimport { Control, type ControlProps } from '@bento/control';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { Icon } from '@bento/icon';\nimport { withSlots } from '@bento/slots';\nimport { useProps } from '@bento/use-props';\nimport { mergeProps, mergeRefs, useObjectRef } from '@react-aria/utils';\nimport { useFocusRing, useHover, useRadio, type AriaRadioProps } from 'react-aria';\nimport { RadioGroupStateContext } from './radio-group-state';\n\nexport interface RadioProps extends AriaRadioProps, Partial<Omit<ControlProps, keyof AriaRadioProps>> {\n  /** The value of the radio button, used when submitting an HTML form. */\n  value: string;\n\n  /** A ref for the HTML input element. */\n  inputRef?: React.Ref<HTMLInputElement>;\n\n  /** The label for the Radio. Accepts any renderable node. */\n  children?: React.ReactNode;\n\n  /**\n   * Whether the radio button 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\n/**\n * The `Radio` is a single radio option that can be selected by the user.\n */\nexport const Radio = withSlots('BentoRadio', function Radio(args: RadioProps) {\n  const { props, apply } = useProps(args);\n  const state = React.useContext(RadioGroupStateContext)!;\n  const ref = React.useRef<HTMLInputElement>(null);\n  const inputRef = useObjectRef(useMemo(() => mergeRefs(ref, props.inputRef), [ref, props.inputRef]));\n  const { isFocused, isFocusVisible, focusProps } = useFocusRing();\n  const { inputProps, labelProps, isSelected, isPressed } = useRadio(props as RadioProps, state, inputRef);\n  const interactionDisabled = props.isDisabled || state.isReadOnly;\n  const { hoverProps, isHovered } = useHover({\n    ...props,\n    isDisabled: interactionDisabled\n  });\n\n  return (\n    <Control\n      slot=\"control\"\n      label={props.children}\n      labelProps={mergeProps(labelProps, hoverProps)}\n      inputRef={inputRef}\n      inputProps={mergeProps(inputProps, focusProps)}\n      {...apply(props, ['isDisabled', 'value', 'autoFocus'])}\n      {...useDataAttributes({\n        selected: isSelected,\n        pressed: isPressed,\n        hovered: isHovered,\n        focused: isFocused,\n        focusVisible: isFocusVisible,\n        disabled: props.isDisabled,\n        readonly: state.isReadOnly,\n        invalid: state.isInvalid,\n        required: state.isRequired\n      })}\n    >\n      {isSelected ? (\n        <Icon slot=\"icon-checked\" icon=\"radioChecked\">\n          <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n            <circle cx={12} cy={12} r={8 - 6 / 2} fill=\"none\" stroke=\"orange\" strokeWidth={6} />\n          </svg>\n        </Icon>\n      ) : (\n        <Icon slot=\"icon-unchecked\" icon=\"radioUnchecked\">\n          <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n            <circle cx={12} cy={12} r={8} fill=\"none\" stroke=\"gray\" strokeWidth={2} />\n          </svg>\n        </Icon>\n      )}\n    </Control>\n  );\n});\n","import React, { useMemo } from 'react';\nimport { ControlGroup, ControlGroupProps } from '@bento/control';\nimport { withSlots } from '@bento/slots';\nimport { useProps } from '@bento/use-props';\nimport { useRadioGroup, type AriaRadioGroupProps } from 'react-aria';\nimport { useRadioGroupState } from 'react-stately';\nimport { RadioGroupStateContext } from './radio-group-state';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { type ValidationResult } from '@react-types/shared';\n\nexport interface RadioGroupProps\n  extends AriaRadioGroupProps,\n    Partial<Omit<ControlGroupProps, keyof AriaRadioGroupProps>> {\n  /** The current value (controlled). */\n  value?: string;\n\n  /** The default value (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  /** Radio children. */\n  children: React.ReactNode;\n\n  /** Error message for the radio group. */\n  errorMessage?: React.ReactNode | ((val: ValidationResult) => React.ReactNode);\n}\n\n/**\n * The `RadioGroup` allows a user to select a single item from a list of `Radio` components.\n */\nexport const RadioGroup = withSlots('BentoRadioGroup', function RadioGroup(args: RadioGroupProps) {\n  const { errorMessage, ...restArgs } = args;\n  const { props, apply } = useProps(restArgs);\n  const state = useRadioGroupState(props);\n  const { radioGroupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useRadioGroup(\n    props,\n    state\n  );\n\n  const displayedErrorMessage = useMemo(\n    function getErrorMessage() {\n      return typeof errorMessage === 'function'\n        ? errorMessage(validationResult)\n        : errorMessage || validationResult.validationErrors.join(', ');\n    },\n    [errorMessage, validationResult]\n  );\n\n  return (\n    <ControlGroup\n      slot=\"group\"\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessage={displayedErrorMessage}\n      errorMessageProps={errorMessageProps}\n      {...radioGroupProps}\n      {...apply(props, ['isInvalid', 'isDisabled', 'isReadOnly', 'isRequired', 'validationBehavior'])}\n      {...useDataAttributes({\n        orientation: props.orientation || 'vertical',\n        invalid: state.isInvalid,\n        disabled: state.isDisabled,\n        readonly: state.isReadOnly,\n        required: state.isRequired\n      })}\n    >\n      <RadioGroupStateContext.Provider value={state}>{props.children}</RadioGroupStateContext.Provider>\n    </ControlGroup>\n  );\n});\n"]}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@bento/radio",
+  "version": "0.1.2",
+  "description": "Radio component",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "scripts": {
+    "build": "tsup-node",
+    "lint": "biome lint && tsc",
+    "posttest": "npm run lint",
+    "pretest": "npm run build",
+    "test": "vitest --run",
+    "test:watch": "vitest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/godaddy/bento.git"
+  },
+  "keywords": [
+    "accessibility",
+    "aria",
+    "bento",
+    "component",
+    "interactive",
+    "library",
+    "radio",
+    "react"
+  ],
+  "author": "GoDaddy Operating Company, LLC",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/godaddy/bento/issues"
+  },
+  "homepage": "https://github.com/godaddy/bento#readme",
+  "files": [
+    "dist",
+    "src",
+    "package.json"
+  ],
+  "dependencies": {
+    "@bento/control": "^0.1.1",
+    "@bento/icon": "^0.1.1",
+    "@bento/slots": "^0.1.2",
+    "@bento/use-data-attributes": "^0.1.0",
+    "@bento/use-props": "^0.1.0",
+    "@react-aria/utils": "^3.30.0",
+    "react-aria": "^3.44.0",
+    "react-stately": "^3.42.0"
+  },
+  "peerDependencies": {
+    "react": "18.x || 19.x",
+    "react-dom": "18.x || 19.x"
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,2 @@
+export * from './radio.tsx';
+export * from './radio-group.tsx';

package/src/radio-group-state.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { RadioGroupState } from 'react-stately';
+
+export const RadioGroupStateContext = React.createContext<RadioGroupState | null>(null);

package/src/radio-group.tsx

@@ -0,0 +1,89 @@
+import React, { useMemo } from 'react';
+import { ControlGroup, ControlGroupProps } from '@bento/control';
+import { withSlots } from '@bento/slots';
+import { useProps } from '@bento/use-props';
+import { useRadioGroup, type AriaRadioGroupProps } from 'react-aria';
+import { useRadioGroupState } from 'react-stately';
+import { RadioGroupStateContext } from './radio-group-state';
+import { useDataAttributes } from '@bento/use-data-attributes';
+import { type ValidationResult } from '@react-types/shared';
+
+export interface RadioGroupProps
+  extends AriaRadioGroupProps,
+    Partial<Omit<ControlGroupProps, keyof AriaRadioGroupProps>> {
+  /** The current value (controlled). */
+  value?: string;
+
+  /** The default value (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;
+
+  /** Radio children. */
+  children: React.ReactNode;
+
+  /** Error message for the radio group. */
+  errorMessage?: React.ReactNode | ((val: ValidationResult) => React.ReactNode);
+}
+
+/**
+ * The `RadioGroup` allows a user to select a single item from a list of `Radio` components.
+ */
+export const RadioGroup = withSlots('BentoRadioGroup', function RadioGroup(args: RadioGroupProps) {
+  const { errorMessage, ...restArgs } = args;
+  const { props, apply } = useProps(restArgs);
+  const state = useRadioGroupState(props);
+  const { radioGroupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useRadioGroup(
+    props,
+    state
+  );
+
+  const displayedErrorMessage = useMemo(
+    function getErrorMessage() {
+      return typeof errorMessage === 'function'
+        ? errorMessage(validationResult)
+        : errorMessage || validationResult.validationErrors.join(', ');
+    },
+    [errorMessage, validationResult]
+  );
+
+  return (
+    <ControlGroup
+      slot="group"
+      labelProps={labelProps}
+      descriptionProps={descriptionProps}
+      errorMessage={displayedErrorMessage}
+      errorMessageProps={errorMessageProps}
+      {...radioGroupProps}
+      {...apply(props, ['isInvalid', 'isDisabled', 'isReadOnly', 'isRequired', 'validationBehavior'])}
+      {...useDataAttributes({
+        orientation: props.orientation || 'vertical',
+        invalid: state.isInvalid,
+        disabled: state.isDisabled,
+        readonly: state.isReadOnly,
+        required: state.isRequired
+      })}
+    >
+      <RadioGroupStateContext.Provider value={state}>{props.children}</RadioGroupStateContext.Provider>
+    </ControlGroup>
+  );
+});

package/src/radio.tsx

@@ -0,0 +1,82 @@
+import React, { useMemo } from 'react';
+import { Control, type ControlProps } from '@bento/control';
+import { useDataAttributes } from '@bento/use-data-attributes';
+import { Icon } from '@bento/icon';
+import { withSlots } from '@bento/slots';
+import { useProps } from '@bento/use-props';
+import { mergeProps, mergeRefs, useObjectRef } from '@react-aria/utils';
+import { useFocusRing, useHover, useRadio, type AriaRadioProps } from 'react-aria';
+import { RadioGroupStateContext } from './radio-group-state';
+
+export interface RadioProps extends AriaRadioProps, Partial<Omit<ControlProps, keyof AriaRadioProps>> {
+  /** The value of the radio button, used when submitting an HTML form. */
+  value: string;
+
+  /** A ref for the HTML input element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+
+  /** The label for the Radio. Accepts any renderable node. */
+  children?: React.ReactNode;
+
+  /**
+   * Whether the radio button 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;
+}
+
+/**
+ * The `Radio` is a single radio option that can be selected by the user.
+ */
+export const Radio = withSlots('BentoRadio', function Radio(args: RadioProps) {
+  const { props, apply } = useProps(args);
+  const state = React.useContext(RadioGroupStateContext)!;
+  const ref = React.useRef<HTMLInputElement>(null);
+  const inputRef = useObjectRef(useMemo(() => mergeRefs(ref, props.inputRef), [ref, props.inputRef]));
+  const { isFocused, isFocusVisible, focusProps } = useFocusRing();
+  const { inputProps, labelProps, isSelected, isPressed } = useRadio(props as RadioProps, state, inputRef);
+  const interactionDisabled = props.isDisabled || state.isReadOnly;
+  const { hoverProps, isHovered } = useHover({
+    ...props,
+    isDisabled: interactionDisabled
+  });
+
+  return (
+    <Control
+      slot="control"
+      label={props.children}
+      labelProps={mergeProps(labelProps, hoverProps)}
+      inputRef={inputRef}
+      inputProps={mergeProps(inputProps, focusProps)}
+      {...apply(props, ['isDisabled', 'value', 'autoFocus'])}
+      {...useDataAttributes({
+        selected: isSelected,
+        pressed: isPressed,
+        hovered: isHovered,
+        focused: isFocused,
+        focusVisible: isFocusVisible,
+        disabled: props.isDisabled,
+        readonly: state.isReadOnly,
+        invalid: state.isInvalid,
+        required: state.isRequired
+      })}
+    >
+      {isSelected ? (
+        <Icon slot="icon-checked" icon="radioChecked">
+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <circle cx={12} cy={12} r={8 - 6 / 2} fill="none" stroke="orange" strokeWidth={6} />
+          </svg>
+        </Icon>
+      ) : (
+        <Icon slot="icon-unchecked" icon="radioUnchecked">
+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <circle cx={12} cy={12} r={8} fill="none" stroke="gray" strokeWidth={2} />
+          </svg>
+        </Icon>
+      )}
+    </Control>
+  );
+});