@bento/radio 0.1.2 → 0.2.0

package/README.md

@@ -0,0 +1,187 @@
+import {
+  Meta,
+  ArgTypes,
+  Story,
+  Controls,
+  Source,
+} from '@storybook/addon-docs/blocks';
+
+# 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 following properties are available to be used on the `RadioGroup` and `Radio` primitives:
+
+### RadioGroup
+
+| Prop | Type | Required | Description |
+|------|------|----------|------------|
+| `value` | `string` | No | The current value (controlled). |
+| `defaultValue` | `string` | No | The default value (uncontrolled). |
+| `isDisabled` | `boolean` | No | Whether the input is disabled. |
+| `isReadOnly` | `boolean` | No | Whether the input can be selected but not changed by the user. |
+| `isRequired` | `boolean` | No | Whether user input is required on the input before form submission. |
+| `isInvalid` | `boolean` | No | Whether the input value is invalid. |
+| `name` | `string` | No | The name of the input element, used when submitting an HTML form. |
+| `form` | `string` | No | The `<form>` element to associate the input with.
+The value of this attribute must be the id of a `<form>` in the same document. |
+| `children` | `ReactNode` | Yes | Radio children. |
+| `slot` | `string` | No | A named part of a component that can be customized. This is implemented by the consuming component.
+The exposed slot names of a component are available in the components documentation. |
+| `slots` | `Record<string, object \| Function>` | No | An object that contains the customizations for the slots.
+The main way you interact with the slot system as a consumer. |
+| `ref` | `Ref<HTMLDivElement> \| LegacyRef<Component<RadioGroupProps & Slots, any, any>>` | No | Allows getting a ref to the component instance.
+Once the component unmounts, React will set `ref.current` to `null`
+(or call the ref with `null` if you passed a callback ref).
+@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
+| `as` | `"div"` | No |  |
+
+### Radio
+
+| Prop | Type | Required | Description |
+|------|------|----------|------------|
+| `value` | `string` | Yes | The value of the radio button, used when submitting an HTML form. |
+| `inputRef` | `Ref<HTMLInputElement>` | No | A ref for the HTML input element. |
+| `children` | `ReactNode` | No | The label for the Radio. Accepts any renderable node. |
+| `isDisabled` | `boolean` | No | Whether the radio button is disabled or not. Shows that a selection exists,
+but is not available in that circumstance. |
+| `autoFocus` | `boolean` | No | Whether the element should receive focus on render. |
+| `slot` | `string` | No | A named part of a component that can be customized. This is implemented by the consuming component.
+The exposed slot names of a component are available in the components documentation. |
+| `slots` | `Record<string, object \| Function>` | No | An object that contains the customizations for the slots.
+The main way you interact with the slot system as a consumer. |
+| `ref` | `Ref<HTMLDivElement> \| LegacyRef<Component<RadioProps & Slots, any, any>>` | No | Allows getting a ref to the component instance.
+Once the component unmounts, React will set `ref.current` to `null`
+(or call the ref with `null` if you passed a callback ref).
+@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
+| `as` | `"div"` | No |  |
+
+## Data Attributes, Slot Map and Props
+
+The data attributes, slot map and props can be used to style and customize the `RadioGroup` and `Radio` primitives.
+
+### `RadioGroup` Data Attributes
+
+| Attribute        | Description                     | Example Values |
+| ---------------- | ------------------------------- | -------------- |
+| `data-disabled`  | Indicates the group is disabled | "true"         |
+| `data-readonly`  | Indicates the group is readonly | "true"         |
+| `data-required`  | Indicates the group is required | "true"         |
+| `data-invalid`   | Indicates the group is invalid  | "true"         |
+
+### `Radio` Data Attributes
+
+| Attribute            | Description                          | Example Values |
+| -------------------- | ------------------------------------ | -------------- |
+| `data-pressed`       | Indicates the radio is being pressed | "true"         |
+| `data-hovered`       | Indicates the radio is hovered       | "true"         |
+| `data-focused`       | Indicates the radio has focus        | "true"         |
+| `data-focus-visible` | Indicates focus should be visible    | "true"         |
+| `data-selected`      | Indicates the radio is selected      | "true"         |
+| `data-disabled`      | Indicates the radio is disabled      | "true"         |
+| `data-readonly`      | Indicates the radio is readonly      | "true"         |
+| `data-invalid`       | Indicates the radio is invalid       | "true"         |
+| `data-required`      | Indicates the radio is required      | "true"         |
+
+### `RadioGroup` Slot Map
+
+| Slot Name     | Description                 |
+| ------------- | --------------------------- |
+| `label`       | Label for radio group       |
+| `description` | Description for radio group |
+| `error`       | Error for radio group       |
+
+### `Radio` Slot Map
+
+| Slot Name        | Description              |
+| ---------------- | ------------------------ |
+| `icon-checked`   | Icon for checked radio   |
+| `icon-unchecked` | Icon for unchecked radio |
+
+## Examples
+
+### Uncontrolled
+
+The `RadioGroup` is uncontrolled by default.
+
+```tsx
+import { Radio, RadioGroup } from '@bento/radio';
+import { Text } from '@bento/text';
+/* v8 ignore next */
+import React from 'react';
+
+export function UncontrolledExample() {
+  return (
+    <RadioGroup onChange={(value: string) => console.log('selected', value)}>
+      <Text slot="label">Favorite fruit</Text>
+      <Radio value="apple">Apple</Radio>
+      <Radio value="banana">Banana</Radio>
+      <Radio value="orange" isDisabled>
+        Orange
+      </Radio>
+    </RadioGroup>
+  );
+}
+```
+
+### Controlled
+
+The `RadioGroup` can be controlled by passing a `value` and `onChange` prop.
+
+```tsx
+/* v8 ignore next */
+import React, { useState } from 'react';
+import { RadioGroup, Radio } from '@bento/radio';
+import { Text } from '@bento/text';
+
+export function ControlledExample() {
+  const [value, setValue] = useState<string>();
+  return (
+    <RadioGroup value={value} onChange={setValue}>
+      <Text slot="label">Favorite fruit</Text>
+      <Radio value="apple">Apple</Radio>
+      <Radio value="banana">Banana</Radio>
+      <Radio value="orange">Orange</Radio>
+    </RadioGroup>
+  );
+}
+```
+
+### Single Radio
+
+Even if you only have one radio option, it must always be placed inside a `RadioGroup`.
+
+```tsx
+import { Radio, RadioGroup } from '@bento/radio';
+import { Text } from '@bento/text';
+/* v8 ignore next */
+import React, { type ComponentProps } from 'react';
+
+export function SingleRadioExample(props: {
+  groupProps?: Partial<ComponentProps<typeof RadioGroup>>;
+  radioProps?: Partial<ComponentProps<typeof Radio>>;
+}) {
+  return (
+    // Radios are always required to be in a group
+    <RadioGroup name="fruit" {...props.groupProps}>
+      <Text slot="label">Favorite fruit (single radio)</Text>
+      <Radio value="apple" {...props.radioProps}>
+        Apple
+      </Radio>
+      <Text slot="description">This is the description</Text>
+    </RadioGroup>
+  );
+}
+```

package/README.mdx

@@ -1,4 +1,10 @@
-import { Meta, ArgTypes, Story, Controls, Source } from '@storybook/addon-docs/blocks';
+import {
+  Meta,
+  ArgTypes,
+  Story,
+  Controls,
+  Source,
+} from '@storybook/addon-docs/blocks';
 import * as Stories from './radio.stories.tsx';
 import Uncontrolled from './examples/uncontrolled.tsx?raw';
 import Controlled from './examples/controlled.tsx?raw';
@@ -22,18 +28,6 @@ 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
@@ -50,42 +44,41 @@ The data attributes, slot map and props can be used to style and customize the `
 
 ### `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  |
+| Attribute        | Description                     | Example Values |
+| ---------------- | ------------------------------- | -------------- |
+| `data-disabled`  | Indicates the group is disabled | "true"         |
+| `data-readonly`  | Indicates the group is readonly | "true"         |
+| `data-required`  | Indicates the group is required | "true"         |
+| `data-invalid`   | Indicates the group is invalid  | "true"         |
 
 ### `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      |
+| Attribute            | Description                          | Example Values |
+| -------------------- | ------------------------------------ | -------------- |
+| `data-pressed`       | Indicates the radio is being pressed | "true"         |
+| `data-hovered`       | Indicates the radio is hovered       | "true"         |
+| `data-focused`       | Indicates the radio has focus        | "true"         |
+| `data-focus-visible` | Indicates focus should be visible    | "true"         |
+| `data-selected`      | Indicates the radio is selected      | "true"         |
+| `data-disabled`      | Indicates the radio is disabled      | "true"         |
+| `data-readonly`      | Indicates the radio is readonly      | "true"         |
+| `data-invalid`       | Indicates the radio is invalid       | "true"         |
+| `data-required`      | Indicates the radio is required      | "true"         |
 
 ### `RadioGroup` Slot Map
 
-| Slot Name           | Description                  |
-| ------------------- | ---------------------------- |
-| `group.label`       | Label for radiogroup         |
-| `group.description` | Description for radiogroup   |
-| `group.error`       | Error message for radiogroup |
+| Slot Name     | Description                 |
+| ------------- | --------------------------- |
+| `label`       | Label for radio group       |
+| `description` | Description for radio group |
+| `error`       | Error for radio group       |
 
 ### `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           |
+| Slot Name        | Description              |
+| ---------------- | ------------------------ |
+| `icon-checked`   | Icon for checked radio   |
+| `icon-unchecked` | Icon for unchecked radio |
 
 ## Examples
 

package/dist/index.cjs

@@ -1,11 +1,12 @@
 'use strict';
 
 var React2 = require('react');
-var control = require('@bento/control');
+var container = require('@bento/container');
 var useDataAttributes = require('@bento/use-data-attributes');
 var icon = require('@bento/icon');
 var slots = require('@bento/slots');
 var useProps = require('@bento/use-props');
+var visuallyHidden = require('@bento/visually-hidden');
 var utils = require('@react-aria/utils');
 var reactAria = require('react-aria');
 var reactStately = require('react-stately');
@@ -31,14 +32,10 @@ var Radio = slots.withSlots("BentoRadio", function Radio2(args) {
     isDisabled: interactionDisabled
   });
   return /* @__PURE__ */ React2__default.default.createElement(
-    control.Control,
+    container.Container,
     {
-      slot: "control",
-      label: props.children,
-      labelProps: utils.mergeProps(labelProps, hoverProps),
-      inputRef,
-      inputProps: utils.mergeProps(inputProps, focusProps),
-      ...apply(props, ["isDisabled", "value", "autoFocus"]),
+      as: "label",
+      ...apply(utils.mergeProps(labelProps, hoverProps)),
       ...useDataAttributes.useDataAttributes({
         selected: isSelected,
         pressed: isPressed,
@@ -51,43 +48,37 @@ var Radio = slots.withSlots("BentoRadio", function Radio2(args) {
         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 })))
+    /* @__PURE__ */ React2__default.default.createElement(visuallyHidden.VisuallyHidden, null, /* @__PURE__ */ React2__default.default.createElement("input", { ...utils.mergeProps(inputProps, focusProps), ref: inputRef })),
+    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" }, /* @__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" }, /* @__PURE__ */ React2__default.default.createElement("circle", { cx: 12, cy: 12, r: 8, fill: "none", stroke: "gray", strokeWidth: 2 }))),
+    props.children
   );
 });
 var RadioGroup = slots.withSlots("BentoRadioGroup", function RadioGroup2(args) {
-  const { errorMessage, ...restArgs } = args;
-  const { props, apply } = useProps.useProps(restArgs);
+  const { props, apply } = useProps.useProps(args);
   const state = reactStately.useRadioGroupState(props);
   const { radioGroupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = reactAria.useRadioGroup(
-    props,
+    { ...props, label: props.label ?? "Radio Group", description: props.description ?? "Description" },
     state
   );
-  const displayedErrorMessage = React2.useMemo(
-    function getErrorMessage() {
-      return typeof errorMessage === "function" ? errorMessage(validationResult) : errorMessage || validationResult.validationErrors.join(", ");
-    },
-    [errorMessage, validationResult]
-  );
-  return /* @__PURE__ */ React2__default.default.createElement(
-    control.ControlGroup,
+  return /* @__PURE__ */ React2__default.default.createElement(RadioGroupStateContext.Provider, { value: state }, /* @__PURE__ */ React2__default.default.createElement(
+    container.Container,
     {
-      slot: "group",
-      labelProps,
-      descriptionProps,
-      errorMessage: displayedErrorMessage,
-      errorMessageProps,
-      ...radioGroupProps,
-      ...apply(props, ["isInvalid", "isDisabled", "isReadOnly", "isRequired", "validationBehavior"]),
+      ...apply(radioGroupProps),
       ...useDataAttributes.useDataAttributes({
         orientation: props.orientation || "vertical",
         invalid: state.isInvalid,
         disabled: state.isDisabled,
         readonly: state.isReadOnly,
         required: state.isRequired
-      })
+      }),
+      slots: {
+        label: labelProps,
+        description: descriptionProps,
+        error: reactAria.mergeProps(errorMessageProps, validationResult)
+      }
     },
-    /* @__PURE__ */ React2__default.default.createElement(RadioGroupStateContext.Provider, { value: state }, props.children)
-  );
+    props.children
+  ));
 });
 
 exports.Radio = Radio;

package/dist/index.cjs.map

@@ -1 +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"]}
+{"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","Container","mergeProps","useDataAttributes","VisuallyHidden","Icon","RadioGroup","useRadioGroupState","useRadioGroup"],"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 { Container, type ContainerProps } from '@bento/container';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { Icon } from '@bento/icon';\nimport { withSlots } from '@bento/slots';\nimport { useProps } from '@bento/use-props';\nimport { VisuallyHidden } from '@bento/visually-hidden';\nimport { mergeProps, mergeRefs, useObjectRef } from '@react-aria/utils';\nimport { useFocusRing, useHover, useRadio, type AriaRadioProps } from 'react-aria';\nimport { RadioGroupStateContext } from './radio-group-state';\n\nexport interface RadioProps extends AriaRadioProps, Omit<ContainerProps, 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    <Container\n      as=\"label\"\n      {...apply(mergeProps(labelProps, hoverProps))}\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      <VisuallyHidden>\n        <input {...mergeProps(inputProps, focusProps)} ref={inputRef} />\n      </VisuallyHidden>\n\n      {isSelected ? (\n        <Icon slot=\"icon-checked\" icon=\"radioChecked\">\n          <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\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\">\n            <circle cx={12} cy={12} r={8} 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 { useRadioGroup, mergeProps, type AriaRadioGroupProps } from 'react-aria';\nimport { useRadioGroupState } from 'react-stately';\nimport { RadioGroupStateContext } from './radio-group-state';\nimport { useDataAttributes } from '@bento/use-data-attributes';\n\nexport interface RadioGroupProps extends AriaRadioGroupProps, Omit<ContainerProps, 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\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 { props, apply } = useProps(args);\n  const state = useRadioGroupState(props);\n  const { radioGroupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useRadioGroup(\n    { ...props, label: props.label ?? 'Radio Group', description: props.description ?? 'Description' },\n    state\n  );\n\n  return (\n    <RadioGroupStateContext.Provider value={state}>\n      <Container\n        {...apply(radioGroupProps)}\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    </RadioGroupStateContext.Provider>\n  );\n});\n"]}

package/dist/index.d.cts

@@ -1,10 +1,9 @@
 import * as _bento_slots from '@bento/slots';
 import React from 'react';
-import { ControlProps, ControlGroupProps } from '@bento/control';
+import { ContainerProps } from '@bento/container';
 import { AriaRadioProps, AriaRadioGroupProps } from 'react-aria';
-import { ValidationResult } from '@react-types/shared';
 
-interface RadioProps extends AriaRadioProps, Partial<Omit<ControlProps, keyof AriaRadioProps>> {
+interface RadioProps extends AriaRadioProps, Omit<ContainerProps, keyof AriaRadioProps> {
     /** The value of the radio button, used when submitting an HTML form. */
     value: string;
     /** A ref for the HTML input element. */
@@ -22,9 +21,9 @@ interface RadioProps extends AriaRadioProps, Partial<Omit<ControlProps, keyof Ar
 /**
  * The `Radio` is a single radio option that can be selected by the user.
  */
-declare const Radio: React.NamedExoticComponent<RadioProps & _bento_slots.Slots>;
+declare const Radio: React.MemoExoticComponent<React.ComponentType<RadioProps & _bento_slots.Slots>>;
 
-interface RadioGroupProps extends AriaRadioGroupProps, Partial<Omit<ControlGroupProps, keyof AriaRadioGroupProps>> {
+interface RadioGroupProps extends AriaRadioGroupProps, Omit<ContainerProps, keyof AriaRadioGroupProps> {
     /** The current value (controlled). */
     value?: string;
     /** The default value (uncontrolled). */
@@ -40,18 +39,16 @@ interface RadioGroupProps extends AriaRadioGroupProps, Partial<Omit<ControlGroup
     /** The name of the input element, used when submitting an HTML form. */
     name?: string;
     /**
-     * The <form> element to associate the input with.
-     * The value of this attribute must be the id of a <form> in the same document.
+     * The `<form>` element to associate the input with.
+     * The value of this attribute must be the id of a `<form>` in the same document.
      */
     form?: string;
     /** 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>;
+declare const RadioGroup: React.MemoExoticComponent<React.ComponentType<RadioGroupProps & _bento_slots.Slots>>;
 
 export { Radio, RadioGroup, type RadioGroupProps, type RadioProps };

package/dist/index.d.ts

@@ -1,10 +1,9 @@
 import * as _bento_slots from '@bento/slots';
 import React from 'react';
-import { ControlProps, ControlGroupProps } from '@bento/control';
+import { ContainerProps } from '@bento/container';
 import { AriaRadioProps, AriaRadioGroupProps } from 'react-aria';
-import { ValidationResult } from '@react-types/shared';
 
-interface RadioProps extends AriaRadioProps, Partial<Omit<ControlProps, keyof AriaRadioProps>> {
+interface RadioProps extends AriaRadioProps, Omit<ContainerProps, keyof AriaRadioProps> {
     /** The value of the radio button, used when submitting an HTML form. */
     value: string;
     /** A ref for the HTML input element. */
@@ -22,9 +21,9 @@ interface RadioProps extends AriaRadioProps, Partial<Omit<ControlProps, keyof Ar
 /**
  * The `Radio` is a single radio option that can be selected by the user.
  */
-declare const Radio: React.NamedExoticComponent<RadioProps & _bento_slots.Slots>;
+declare const Radio: React.MemoExoticComponent<React.ComponentType<RadioProps & _bento_slots.Slots>>;
 
-interface RadioGroupProps extends AriaRadioGroupProps, Partial<Omit<ControlGroupProps, keyof AriaRadioGroupProps>> {
+interface RadioGroupProps extends AriaRadioGroupProps, Omit<ContainerProps, keyof AriaRadioGroupProps> {
     /** The current value (controlled). */
     value?: string;
     /** The default value (uncontrolled). */
@@ -40,18 +39,16 @@ interface RadioGroupProps extends AriaRadioGroupProps, Partial<Omit<ControlGroup
     /** The name of the input element, used when submitting an HTML form. */
     name?: string;
     /**
-     * The <form> element to associate the input with.
-     * The value of this attribute must be the id of a <form> in the same document.
+     * The `<form>` element to associate the input with.
+     * The value of this attribute must be the id of a `<form>` in the same document.
      */
     form?: string;
     /** 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>;
+declare const RadioGroup: React.MemoExoticComponent<React.ComponentType<RadioGroupProps & _bento_slots.Slots>>;
 
 export { Radio, RadioGroup, type RadioGroupProps, type RadioProps };

package/dist/index.js

@@ -1,11 +1,12 @@
 import React2, { useMemo } from 'react';
-import { Control, ControlGroup } from '@bento/control';
+import { Container } from '@bento/container';
 import { useDataAttributes } from '@bento/use-data-attributes';
 import { Icon } from '@bento/icon';
 import { withSlots } from '@bento/slots';
 import { useProps } from '@bento/use-props';
+import { VisuallyHidden } from '@bento/visually-hidden';
 import { useObjectRef, mergeRefs, mergeProps } from '@react-aria/utils';
-import { useFocusRing, useRadio, useHover, useRadioGroup } from 'react-aria';
+import { useFocusRing, useRadio, useHover, useRadioGroup, mergeProps as mergeProps$1 } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
 
 // src/radio.tsx
@@ -25,14 +26,10 @@ var Radio = withSlots("BentoRadio", function Radio2(args) {
     isDisabled: interactionDisabled
   });
   return /* @__PURE__ */ React2.createElement(
-    Control,
+    Container,
     {
-      slot: "control",
-      label: props.children,
-      labelProps: mergeProps(labelProps, hoverProps),
-      inputRef,
-      inputProps: mergeProps(inputProps, focusProps),
-      ...apply(props, ["isDisabled", "value", "autoFocus"]),
+      as: "label",
+      ...apply(mergeProps(labelProps, hoverProps)),
       ...useDataAttributes({
         selected: isSelected,
         pressed: isPressed,
@@ -45,43 +42,37 @@ var Radio = withSlots("BentoRadio", function Radio2(args) {
         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 })))
+    /* @__PURE__ */ React2.createElement(VisuallyHidden, null, /* @__PURE__ */ React2.createElement("input", { ...mergeProps(inputProps, focusProps), ref: inputRef })),
+    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" }, /* @__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" }, /* @__PURE__ */ React2.createElement("circle", { cx: 12, cy: 12, r: 8, fill: "none", stroke: "gray", strokeWidth: 2 }))),
+    props.children
   );
 });
 var RadioGroup = withSlots("BentoRadioGroup", function RadioGroup2(args) {
-  const { errorMessage, ...restArgs } = args;
-  const { props, apply } = useProps(restArgs);
+  const { props, apply } = useProps(args);
   const state = useRadioGroupState(props);
   const { radioGroupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useRadioGroup(
-    props,
+    { ...props, label: props.label ?? "Radio Group", description: props.description ?? "Description" },
     state
   );
-  const displayedErrorMessage = useMemo(
-    function getErrorMessage() {
-      return typeof errorMessage === "function" ? errorMessage(validationResult) : errorMessage || validationResult.validationErrors.join(", ");
-    },
-    [errorMessage, validationResult]
-  );
-  return /* @__PURE__ */ React2.createElement(
-    ControlGroup,
+  return /* @__PURE__ */ React2.createElement(RadioGroupStateContext.Provider, { value: state }, /* @__PURE__ */ React2.createElement(
+    Container,
     {
-      slot: "group",
-      labelProps,
-      descriptionProps,
-      errorMessage: displayedErrorMessage,
-      errorMessageProps,
-      ...radioGroupProps,
-      ...apply(props, ["isInvalid", "isDisabled", "isReadOnly", "isRequired", "validationBehavior"]),
+      ...apply(radioGroupProps),
       ...useDataAttributes({
         orientation: props.orientation || "vertical",
         invalid: state.isInvalid,
         disabled: state.isDisabled,
         readonly: state.isReadOnly,
         required: state.isRequired
-      })
+      }),
+      slots: {
+        label: labelProps,
+        description: descriptionProps,
+        error: mergeProps$1(errorMessageProps, validationResult)
+      }
     },
-    /* @__PURE__ */ React2.createElement(RadioGroupStateContext.Provider, { value: state }, props.children)
-  );
+    props.children
+  ));
 });
 
 export { Radio, RadioGroup };

package/dist/index.js.map

@@ -1 +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"]}
+{"version":3,"sources":["../src/radio-group-state.tsx","../src/radio.tsx","../src/radio-group.tsx"],"names":["React","Radio","withSlots","RadioGroup","useProps","Container","useDataAttributes","mergeProps"],"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 { Container, type ContainerProps } from '@bento/container';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { Icon } from '@bento/icon';\nimport { withSlots } from '@bento/slots';\nimport { useProps } from '@bento/use-props';\nimport { VisuallyHidden } from '@bento/visually-hidden';\nimport { mergeProps, mergeRefs, useObjectRef } from '@react-aria/utils';\nimport { useFocusRing, useHover, useRadio, type AriaRadioProps } from 'react-aria';\nimport { RadioGroupStateContext } from './radio-group-state';\n\nexport interface RadioProps extends AriaRadioProps, Omit<ContainerProps, 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    <Container\n      as=\"label\"\n      {...apply(mergeProps(labelProps, hoverProps))}\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      <VisuallyHidden>\n        <input {...mergeProps(inputProps, focusProps)} ref={inputRef} />\n      </VisuallyHidden>\n\n      {isSelected ? (\n        <Icon slot=\"icon-checked\" icon=\"radioChecked\">\n          <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\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\">\n            <circle cx={12} cy={12} r={8} 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 { useRadioGroup, mergeProps, type AriaRadioGroupProps } from 'react-aria';\nimport { useRadioGroupState } from 'react-stately';\nimport { RadioGroupStateContext } from './radio-group-state';\nimport { useDataAttributes } from '@bento/use-data-attributes';\n\nexport interface RadioGroupProps extends AriaRadioGroupProps, Omit<ContainerProps, 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\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 { props, apply } = useProps(args);\n  const state = useRadioGroupState(props);\n  const { radioGroupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useRadioGroup(\n    { ...props, label: props.label ?? 'Radio Group', description: props.description ?? 'Description' },\n    state\n  );\n\n  return (\n    <RadioGroupStateContext.Provider value={state}>\n      <Container\n        {...apply(radioGroupProps)}\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    </RadioGroupStateContext.Provider>\n  );\n});\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento/radio",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Radio component",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -9,6 +9,7 @@
     "build": "tsup-node",
     "lint": "biome lint && tsc",
     "posttest": "npm run lint",
+    "prepublishOnly": "node ../../scripts/compile-readme.ts",
     "pretest": "npm run build",
     "test": "vitest --run",
     "test:watch": "vitest"
@@ -39,11 +40,12 @@
     "package.json"
   ],
   "dependencies": {
-    "@bento/control": "^0.1.1",
-    "@bento/icon": "^0.1.1",
-    "@bento/slots": "^0.1.2",
-    "@bento/use-data-attributes": "^0.1.0",
-    "@bento/use-props": "^0.1.0",
+    "@bento/container": "^0.2.0",
+    "@bento/icon": "^0.1.3",
+    "@bento/slots": "^0.2.0",
+    "@bento/use-data-attributes": "^0.1.1",
+    "@bento/use-props": "^0.2.0",
+    "@bento/visually-hidden": "^0.1.0",
     "@react-aria/utils": "^3.30.0",
     "react-aria": "^3.44.0",
     "react-stately": "^3.42.0"

package/src/radio-group.tsx

@@ -1,16 +1,13 @@
-import React, { useMemo } from 'react';
-import { ControlGroup, ControlGroupProps } from '@bento/control';
+import React from 'react';
 import { withSlots } from '@bento/slots';
+import { Container, type ContainerProps } from '@bento/container';
 import { useProps } from '@bento/use-props';
-import { useRadioGroup, type AriaRadioGroupProps } from 'react-aria';
+import { useRadioGroup, mergeProps, 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>> {
+export interface RadioGroupProps extends AriaRadioGroupProps, Omit<ContainerProps, keyof AriaRadioGroupProps> {
   /** The current value (controlled). */
   value?: string;
 
@@ -33,57 +30,45 @@ export interface RadioGroupProps
   name?: string;
 
   /**
-   * The <form> element to associate the input with.
-   * The value of this attribute must be the id of a <form> in the same document.
+   * The `<form>` element to associate the input with.
+   * The value of this attribute must be the id of a `<form>` in the same document.
    */
   form?: string;
 
   /** 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 { props, apply } = useProps(args);
   const state = useRadioGroupState(props);
   const { radioGroupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useRadioGroup(
-    props,
+    { ...props, label: props.label ?? 'Radio Group', description: props.description ?? 'Description' },
     state
   );
 
-  const displayedErrorMessage = useMemo(
-    function getErrorMessage() {
-      return typeof errorMessage === 'function'
-        ? errorMessage(validationResult)
-        : errorMessage || validationResult.validationErrors.join(', ');
-    },
-    [errorMessage, validationResult]
-  );
-
   return (
-    <ControlGroup
-      slot="group"
-      labelProps={labelProps}
-      descriptionProps={descriptionProps}
-      errorMessage={displayedErrorMessage}
-      errorMessageProps={errorMessageProps}
-      {...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>
+    <RadioGroupStateContext.Provider value={state}>
+      <Container
+        {...apply(radioGroupProps)}
+        {...useDataAttributes({
+          orientation: props.orientation || 'vertical',
+          invalid: state.isInvalid,
+          disabled: state.isDisabled,
+          readonly: state.isReadOnly,
+          required: state.isRequired
+        })}
+        slots={{
+          label: labelProps,
+          description: descriptionProps,
+          error: mergeProps(errorMessageProps, validationResult)
+        }}
+      >
+        {props.children}
+      </Container>
+    </RadioGroupStateContext.Provider>
   );
 });

package/src/radio.tsx

@@ -1,14 +1,15 @@
 import React, { useMemo } from 'react';
-import { Control, type ControlProps } from '@bento/control';
+import { Container, type ContainerProps } from '@bento/container';
 import { useDataAttributes } from '@bento/use-data-attributes';
 import { Icon } from '@bento/icon';
 import { withSlots } from '@bento/slots';
 import { useProps } from '@bento/use-props';
+import { VisuallyHidden } from '@bento/visually-hidden';
 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>> {
+export interface RadioProps extends AriaRadioProps, Omit<ContainerProps, keyof AriaRadioProps> {
   /** The value of the radio button, used when submitting an HTML form. */
   value: string;
 
@@ -45,13 +46,9 @@ export const Radio = withSlots('BentoRadio', function Radio(args: RadioProps) {
   });
 
   return (
-    <Control
-      slot="control"
-      label={props.children}
-      labelProps={mergeProps(labelProps, hoverProps)}
-      inputRef={inputRef}
-      inputProps={mergeProps(inputProps, focusProps)}
-      {...apply(props, ['isDisabled', 'value', 'autoFocus'])}
+    <Container
+      as="label"
+      {...apply(mergeProps(labelProps, hoverProps))}
       {...useDataAttributes({
         selected: isSelected,
         pressed: isPressed,
@@ -64,19 +61,24 @@ export const Radio = withSlots('BentoRadio', function Radio(args: RadioProps) {
         required: state.isRequired
       })}
     >
+      <VisuallyHidden>
+        <input {...mergeProps(inputProps, focusProps)} ref={inputRef} />
+      </VisuallyHidden>
+
       {isSelected ? (
         <Icon slot="icon-checked" icon="radioChecked">
-          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <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">
+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <circle cx={12} cy={12} r={8} fill="none" stroke="gray" strokeWidth={2} />
           </svg>
         </Icon>
       )}
-    </Control>
+      {props.children}
+    </Container>
   );
 });