@bento/radio 0.2.1 → 0.2.3

package/README.md

@@ -26,48 +26,8 @@ The following properties are available to be used on the `RadioGroup` and `Radio
 
 ### 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.

package/dist/index.cjs

@@ -1,88 +1,147 @@
-'use strict';
-
-var React2 = require('react');
-var container = require('@bento/container');
-var useDataAttributes = require('@bento/use-data-attributes');
-var icon = require('@bento/icon');
-var input = require('@bento/input');
-var slots = require('@bento/slots');
-var useProps = require('@bento/use-props');
-var visuallyHidden = require('@bento/visually-hidden');
-var utils = require('@react-aria/utils');
-var reactAria = require('react-aria');
-var reactStately = require('react-stately');
-
-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(
-    container.Container,
-    {
-      as: "label",
-      ...apply(utils.mergeProps(labelProps, hoverProps)),
-      ...useDataAttributes.useDataAttributes({
-        selected: isSelected,
-        pressed: isPressed,
-        hovered: isHovered,
-        focused: isFocused,
-        focusVisible: isFocusVisible,
-        disabled: props.isDisabled,
-        readonly: state.isReadOnly,
-        invalid: state.isInvalid,
-        required: state.isRequired
-      })
-    },
-    /* @__PURE__ */ React2__default.default.createElement(visuallyHidden.VisuallyHidden, null, /* @__PURE__ */ React2__default.default.createElement(input.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
-  );
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+let react = require("react");
+react = __toESM(react);
+let _bento_container = require("@bento/container");
+let _bento_use_data_attributes = require("@bento/use-data-attributes");
+let _bento_icon = require("@bento/icon");
+let _bento_input = require("@bento/input");
+let _bento_slots = require("@bento/slots");
+let _bento_use_props = require("@bento/use-props");
+let _bento_visually_hidden = require("@bento/visually-hidden");
+let _react_aria_utils = require("@react-aria/utils");
+let react_aria = require("react-aria");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_stately = require("react-stately");
+//#region src/radio-group-state.tsx
+const RadioGroupStateContext = react.default.createContext(null);
+//#endregion
+//#region src/radio.tsx
+/**
+* The `Radio` is a single radio option that can be selected by the user.
+*/
+const Radio = (0, _bento_slots.withSlots)("BentoRadio", function Radio(args) {
+	const { props, apply } = (0, _bento_use_props.useProps)(args);
+	const state = react.default.useContext(RadioGroupStateContext);
+	const ref = react.default.useRef(null);
+	const inputRef = (0, _react_aria_utils.useObjectRef)((0, react.useMemo)(() => (0, _react_aria_utils.mergeRefs)(ref, props.inputRef), [ref, props.inputRef]));
+	const { isFocused, isFocusVisible, focusProps } = (0, react_aria.useFocusRing)();
+	const { inputProps, labelProps, isSelected, isPressed } = (0, react_aria.useRadio)(props, state, inputRef);
+	const interactionDisabled = props.isDisabled || state.isReadOnly;
+	const { hoverProps, isHovered } = (0, react_aria.useHover)({
+		...props,
+		isDisabled: interactionDisabled
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_bento_container.Container, {
+		as: "label",
+		...apply((0, _react_aria_utils.mergeProps)(labelProps, hoverProps)),
+		...(0, _bento_use_data_attributes.useDataAttributes)({
+			selected: isSelected,
+			pressed: isPressed,
+			hovered: isHovered,
+			focused: isFocused,
+			focusVisible: isFocusVisible,
+			disabled: props.isDisabled,
+			readonly: state.isReadOnly,
+			invalid: state.isInvalid,
+			required: state.isRequired
+		}),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_bento_visually_hidden.VisuallyHidden, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_bento_input.Input, {
+				...(0, _react_aria_utils.mergeProps)(inputProps, focusProps),
+				ref: inputRef
+			}) }),
+			isSelected ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_bento_icon.Icon, {
+				slot: "icon-checked",
+				icon: "radioChecked",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+					viewBox: "0 0 24 24",
+					xmlns: "http://www.w3.org/2000/svg",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+						cx: 12,
+						cy: 12,
+						r: 8 - 6 / 2,
+						fill: "none",
+						stroke: "orange",
+						strokeWidth: 6
+					})
+				})
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_bento_icon.Icon, {
+				slot: "icon-unchecked",
+				icon: "radioUnchecked",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+					viewBox: "0 0 24 24",
+					xmlns: "http://www.w3.org/2000/svg",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+						cx: 12,
+						cy: 12,
+						r: 8,
+						fill: "none",
+						stroke: "gray",
+						strokeWidth: 2
+					})
+				})
+			}),
+			props.children
+		]
+	});
 });
-var RadioGroup = slots.withSlots("BentoRadioGroup", function RadioGroup2(args) {
-  const { props, apply } = useProps.useProps(args);
-  const state = reactStately.useRadioGroupState(props);
-  const { radioGroupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = reactAria.useRadioGroup(
-    { ...props, label: props.label ?? "Radio Group", description: props.description ?? "Description" },
-    state
-  );
-  return /* @__PURE__ */ React2__default.default.createElement(RadioGroupStateContext.Provider, { value: state }, /* @__PURE__ */ React2__default.default.createElement(
-    container.Container,
-    {
-      ...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)
-      }
-    },
-    props.children
-  ));
+//#endregion
+//#region src/radio-group.tsx
+/**
+* The `RadioGroup` allows a user to select a single item from a list of `Radio` components.
+*/
+const RadioGroup = (0, _bento_slots.withSlots)("BentoRadioGroup", function RadioGroup(args) {
+	const { props, apply } = (0, _bento_use_props.useProps)(args);
+	const state = (0, react_stately.useRadioGroupState)(props);
+	const { radioGroupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = (0, react_aria.useRadioGroup)({
+		...props,
+		label: props.label ?? "Radio Group",
+		description: props.description ?? "Description"
+	}, state);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadioGroupStateContext.Provider, {
+		value: state,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_bento_container.Container, {
+			...apply(radioGroupProps),
+			...(0, _bento_use_data_attributes.useDataAttributes)({
+				orientation: props.orientation || "vertical",
+				invalid: state.isInvalid,
+				disabled: state.isDisabled,
+				readonly: state.isReadOnly,
+				required: state.isRequired
+			}),
+			slots: {
+				label: labelProps,
+				description: descriptionProps,
+				error: (0, react_aria.mergeProps)(errorMessageProps, validationResult)
+			},
+			children: props.children
+		})
+	});
 });
-
+//#endregion
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
-//# sourceMappingURL=index.cjs.map
+
 //# sourceMappingURL=index.cjs.map

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","Container","mergeProps","useDataAttributes","VisuallyHidden","Input","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 { Input } from '@bento/input';\nimport { withSlots } from '@bento/slots';\nimport { useProps } from '@bento/use-props';\nimport { VisuallyHidden } from '@bento/visually-hidden';\nimport { mergeProps, mergeRefs, useObjectRef } from '@react-aria/utils';\nimport { useFocusRing, useHover, 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"]}
+{"version":3,"file":"index.cjs","names":["React","React","Container","VisuallyHidden","Input","Icon","Container"],"sources":["../src/radio-group-state.tsx","../src/radio.tsx","../src/radio-group.tsx"],"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 { Input } from '@bento/input';\nimport { withSlots } from '@bento/slots';\nimport { useProps } from '@bento/use-props';\nimport { VisuallyHidden } from '@bento/visually-hidden';\nimport { mergeProps, mergeRefs, useObjectRef } from '@react-aria/utils';\nimport { useFocusRing, useHover, 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"],"mappings":"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"}

package/dist/index.d.cts

@@ -1,54 +1,56 @@
-import * as _bento_slots from '@bento/slots';
-import React from 'react';
-import { ContainerProps } from '@bento/container';
-import { AriaRadioProps, AriaRadioGroupProps } from 'react-aria';
+import React from "react";
+import { ContainerProps } from "@bento/container";
+import { AriaRadioGroupProps, AriaRadioProps } from "react-aria";
 
+//#region src/radio.d.ts
 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. */
-    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 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.MemoExoticComponent<React.ComponentType<RadioProps & _bento_slots.Slots>>;
-
+declare const Radio: React.MemoExoticComponent<React.ComponentType<any>>;
+//#endregion
+//#region src/radio-group.d.ts
 interface RadioGroupProps extends AriaRadioGroupProps, Omit<ContainerProps, 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;
+  /** 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;
 }
 /**
  * The `RadioGroup` allows a user to select a single item from a list of `Radio` components.
  */
-declare const RadioGroup: React.MemoExoticComponent<React.ComponentType<RadioGroupProps & _bento_slots.Slots>>;
-
-export { Radio, RadioGroup, type RadioGroupProps, type RadioProps };
+declare const RadioGroup: React.MemoExoticComponent<React.ComponentType<any>>;
+//#endregion
+export { Radio, RadioGroup, RadioGroupProps, RadioProps };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../src/radio.tsx","../src/radio-group.tsx"],"mappings":";;;;;UAYiB,UAAA,SAAmB,cAAA,EAAgB,IAAA,CAAK,cAAA,QAAsB,cAAA;;EAE7E,KAAA;EAF0B;EAK1B,QAAA,GAAW,KAAA,CAAM,GAAA,CAAI,gBAAA;EALkC;EAQvD,QAAA,GAAW,KAAA,CAAM,SAAA;EAHI;;;;EASrB,UAAA;EAdsD;EAiBtD,SAAA;AAAA;;;;cAMW,KAAA,EAAK,KAAA,CAAA,mBAAA,CAAA,KAAA,CAAA,aAAA;;;UC1BD,eAAA,SAAwB,mBAAA,EAAqB,IAAA,CAAK,cAAA,QAAsB,mBAAA;;EAEvF,KAAA;EDC0B;ECE1B,YAAA;EDFuD;ECKvD,UAAA;EDAqB;ECGrB,UAAA;EDAW;ECGX,UAAA;EDXkD;ECclD,SAAA;EDdsD;ECiBtD,IAAA;EDjBkD;;;;ECuBlD,IAAA;EDlBW;ECqBX,QAAA,EAAU,KAAA,CAAM,SAAA;AAAA;;;;cAML,UAAA,EAAU,KAAA,CAAA,mBAAA,CAAA,KAAA,CAAA,aAAA"}

package/dist/index.d.mts

@@ -0,0 +1,56 @@
+import React from "react";
+import { ContainerProps } from "@bento/container";
+import { AriaRadioGroupProps, AriaRadioProps } from "react-aria";
+
+//#region src/radio.d.ts
+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. */
+  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.MemoExoticComponent<React.ComponentType<any>>;
+//#endregion
+//#region src/radio-group.d.ts
+interface RadioGroupProps extends AriaRadioGroupProps, Omit<ContainerProps, 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;
+}
+/**
+ * The `RadioGroup` allows a user to select a single item from a list of `Radio` components.
+ */
+declare const RadioGroup: React.MemoExoticComponent<React.ComponentType<any>>;
+//#endregion
+export { Radio, RadioGroup, RadioGroupProps, RadioProps };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/radio.tsx","../src/radio-group.tsx"],"mappings":";;;;;UAYiB,UAAA,SAAmB,cAAA,EAAgB,IAAA,CAAK,cAAA,QAAsB,cAAA;;EAE7E,KAAA;EAF0B;EAK1B,QAAA,GAAW,KAAA,CAAM,GAAA,CAAI,gBAAA;EALkC;EAQvD,QAAA,GAAW,KAAA,CAAM,SAAA;EAHI;;;;EASrB,UAAA;EAdsD;EAiBtD,SAAA;AAAA;;;;cAMW,KAAA,EAAK,KAAA,CAAA,mBAAA,CAAA,KAAA,CAAA,aAAA;;;UC1BD,eAAA,SAAwB,mBAAA,EAAqB,IAAA,CAAK,cAAA,QAAsB,mBAAA;;EAEvF,KAAA;EDC0B;ECE1B,YAAA;EDFuD;ECKvD,UAAA;EDAqB;ECGrB,UAAA;EDAW;ECGX,UAAA;EDXkD;ECclD,SAAA;EDdsD;ECiBtD,IAAA;EDjBkD;;;;ECuBlD,IAAA;EDlBW;ECqBX,QAAA,EAAU,KAAA,CAAM,SAAA;AAAA;;;;cAML,UAAA,EAAU,KAAA,CAAA,mBAAA,CAAA,KAAA,CAAA,aAAA"}

package/dist/index.mjs

@@ -0,0 +1,122 @@
+import React, { useMemo } from "react";
+import { Container } from "@bento/container";
+import { useDataAttributes } from "@bento/use-data-attributes";
+import { Icon } from "@bento/icon";
+import { Input } from "@bento/input";
+import { withSlots } from "@bento/slots";
+import { useProps } from "@bento/use-props";
+import { VisuallyHidden } from "@bento/visually-hidden";
+import { mergeProps, mergeRefs, useObjectRef } from "@react-aria/utils";
+import { mergeProps as mergeProps$1, useFocusRing, useHover, useRadio, useRadioGroup } from "react-aria";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRadioGroupState } from "react-stately";
+//#region src/radio-group-state.tsx
+const RadioGroupStateContext = React.createContext(null);
+//#endregion
+//#region src/radio.tsx
+/**
+* The `Radio` is a single radio option that can be selected by the user.
+*/
+const Radio = withSlots("BentoRadio", function Radio(args) {
+	const { props, apply } = useProps(args);
+	const state = React.useContext(RadioGroupStateContext);
+	const ref = React.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__ */ jsxs(Container, {
+		as: "label",
+		...apply(mergeProps(labelProps, hoverProps)),
+		...useDataAttributes({
+			selected: isSelected,
+			pressed: isPressed,
+			hovered: isHovered,
+			focused: isFocused,
+			focusVisible: isFocusVisible,
+			disabled: props.isDisabled,
+			readonly: state.isReadOnly,
+			invalid: state.isInvalid,
+			required: state.isRequired
+		}),
+		children: [
+			/* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(Input, {
+				...mergeProps(inputProps, focusProps),
+				ref: inputRef
+			}) }),
+			isSelected ? /* @__PURE__ */ jsx(Icon, {
+				slot: "icon-checked",
+				icon: "radioChecked",
+				children: /* @__PURE__ */ jsx("svg", {
+					viewBox: "0 0 24 24",
+					xmlns: "http://www.w3.org/2000/svg",
+					children: /* @__PURE__ */ jsx("circle", {
+						cx: 12,
+						cy: 12,
+						r: 8 - 6 / 2,
+						fill: "none",
+						stroke: "orange",
+						strokeWidth: 6
+					})
+				})
+			}) : /* @__PURE__ */ jsx(Icon, {
+				slot: "icon-unchecked",
+				icon: "radioUnchecked",
+				children: /* @__PURE__ */ jsx("svg", {
+					viewBox: "0 0 24 24",
+					xmlns: "http://www.w3.org/2000/svg",
+					children: /* @__PURE__ */ jsx("circle", {
+						cx: 12,
+						cy: 12,
+						r: 8,
+						fill: "none",
+						stroke: "gray",
+						strokeWidth: 2
+					})
+				})
+			}),
+			props.children
+		]
+	});
+});
+//#endregion
+//#region src/radio-group.tsx
+/**
+* The `RadioGroup` allows a user to select a single item from a list of `Radio` components.
+*/
+const RadioGroup = withSlots("BentoRadioGroup", function RadioGroup(args) {
+	const { props, apply } = useProps(args);
+	const state = useRadioGroupState(props);
+	const { radioGroupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useRadioGroup({
+		...props,
+		label: props.label ?? "Radio Group",
+		description: props.description ?? "Description"
+	}, state);
+	return /* @__PURE__ */ jsx(RadioGroupStateContext.Provider, {
+		value: state,
+		children: /* @__PURE__ */ jsx(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$1(errorMessageProps, validationResult)
+			},
+			children: props.children
+		})
+	});
+});
+//#endregion
+export { Radio, RadioGroup };
+
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["mergeProps"],"sources":["../src/radio-group-state.tsx","../src/radio.tsx","../src/radio-group.tsx"],"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 { Input } from '@bento/input';\nimport { withSlots } from '@bento/slots';\nimport { useProps } from '@bento/use-props';\nimport { VisuallyHidden } from '@bento/visually-hidden';\nimport { mergeProps, mergeRefs, useObjectRef } from '@react-aria/utils';\nimport { useFocusRing, useHover, 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"],"mappings":";;;;;;;;;;;;;AAGA,MAAa,yBAAyB,MAAM,cAAsC,IAAI;;;;;;ACgCtF,MAAa,QAAQ,UAAU,cAAc,SAAS,MAAM,MAAkB;CAC5E,MAAM,EAAE,OAAO,UAAU,SAAS,IAAI;CACtC,MAAM,QAAQ,MAAM,WAAW,sBAAsB;CACrD,MAAM,MAAM,MAAM,OAAyB,IAAI;CAC/C,MAAM,WAAW,aAAa,cAAc,UAAU,KAAK,MAAM,QAAQ,GAAG,CAAC,KAAK,MAAM,QAAQ,CAAC,CAAC;CAClG,MAAM,EAAE,WAAW,gBAAgB,eAAe,aAAa;CAC/D,MAAM,EAAE,YAAY,YAAY,YAAY,cAAc,SAAS,OAAqB,OAAO,QAAQ;CACvG,MAAM,sBAAsB,MAAM,cAAc,MAAM;CACtD,MAAM,EAAE,YAAY,cAAc,SAAS;EACzC,GAAG;EACH,YAAY;CACd,CAAC;CAED,OACE,qBAAC,WAAD;EACE,IAAG;EACH,GAAI,MAAM,WAAW,YAAY,UAAU,CAAC;EAC5C,GAAI,kBAAkB;GACpB,UAAU;GACV,SAAS;GACT,SAAS;GACT,SAAS;GACT,cAAc;GACd,UAAU,MAAM;GAChB,UAAU,MAAM;GAChB,SAAS,MAAM;GACf,UAAU,MAAM;EAClB,CAAC;YAbH;GAeE,oBAAC,gBAAD,EAAA,UACE,oBAAC,OAAD;IAAO,GAAI,WAAW,YAAY,UAAU;IAAG,KAAK;GAAW,CAAA,EACjD,CAAA;GAEf,aACC,oBAAC,MAAD;IAAM,MAAK;IAAe,MAAK;cAC7B,oBAAC,OAAD;KAAK,SAAQ;KAAY,OAAM;eAC7B,oBAAC,UAAD;MAAQ,IAAI;MAAI,IAAI;MAAI,GAAG,IAAI,IAAI;MAAG,MAAK;MAAO,QAAO;MAAS,aAAa;KAAI,CAAA;IAChF,CAAA;GACD,CAAA,IAEN,oBAAC,MAAD;IAAM,MAAK;IAAiB,MAAK;cAC/B,oBAAC,OAAD;KAAK,SAAQ;KAAY,OAAM;eAC7B,oBAAC,UAAD;MAAQ,IAAI;MAAI,IAAI;MAAI,GAAG;MAAG,MAAK;MAAO,QAAO;MAAO,aAAa;KAAI,CAAA;IACtE,CAAA;GACD,CAAA;GAEP,MAAM;EACE;;AAEf,CAAC;;;;;;ACxCD,MAAa,aAAa,UAAU,mBAAmB,SAAS,WAAW,MAAuB;CAChG,MAAM,EAAE,OAAO,UAAU,SAAS,IAAI;CACtC,MAAM,QAAQ,mBAAmB,KAAK;CACtC,MAAM,EAAE,iBAAiB,YAAY,kBAAkB,mBAAmB,GAAG,qBAAqB,cAChG;EAAE,GAAG;EAAO,OAAO,MAAM,SAAS;EAAe,aAAa,MAAM,eAAe;CAAc,GACjG,KACF;CAEA,OACE,oBAAC,uBAAuB,UAAxB;EAAiC,OAAO;YACtC,oBAAC,WAAD;GACE,GAAI,MAAM,eAAe;GACzB,GAAI,kBAAkB;IACpB,aAAa,MAAM,eAAe;IAClC,SAAS,MAAM;IACf,UAAU,MAAM;IAChB,UAAU,MAAM;IAChB,UAAU,MAAM;GAClB,CAAC;GACD,OAAO;IACL,OAAO;IACP,aAAa;IACb,OAAOA,aAAW,mBAAmB,gBAAgB;GACvD;aAEC,MAAM;EACE,CAAA;CACoB,CAAA;AAErC,CAAC"}

package/package.json

@@ -1,22 +1,21 @@
 {
   "name": "@bento/radio",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Radio component",
   "type": "module",
   "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
+  "module": "./dist/index.mjs",
   "scripts": {
-    "build": "tsup-node",
-    "lint": "biome lint && tsc",
-    "posttest": "npm run lint",
-    "prepublishOnly": "node ../../scripts/compile-readme.ts",
-    "pretest": "npm run build",
+    "build": "tsdown",
+    "lint": "biome lint && tsgo --noEmit",
+    "prepublishOnly": "node ../../../scripts/compile-readme.ts",
     "test": "vitest --run",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "typecheck": "tsgo --noEmit -p tsconfig.json"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/godaddy/bento.git"
+    "url": "git+https://github.com/godaddy/antares.git"
   },
   "keywords": [
     "accessibility",
@@ -31,9 +30,9 @@
   "author": "GoDaddy Operating Company, LLC",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/godaddy/bento/issues"
+    "url": "https://github.com/godaddy/antares/issues"
   },
-  "homepage": "https://github.com/godaddy/bento#readme",
+  "homepage": "https://github.com/godaddy/antares#readme",
   "files": [
     "dist",
     "src",
@@ -41,15 +40,23 @@
   ],
   "dependencies": {
     "@bento/container": "^0.2.1",
-    "@bento/icon": "^0.1.4",
-    "@bento/input": "^0.1.0",
+    "@bento/icon": "^0.2.0",
+    "@bento/input": "^0.1.1",
     "@bento/slots": "^0.3.0",
     "@bento/use-data-attributes": "^0.1.1",
-    "@bento/use-props": "^0.2.1",
+    "@bento/use-props": "^0.2.3",
     "@bento/visually-hidden": "^0.1.1",
-    "@react-aria/utils": "^3.30.0",
-    "react-aria": "^3.44.0",
-    "react-stately": "^3.42.0"
+    "@react-aria/utils": "^3.34.0",
+    "react-aria": "^3.48.0",
+    "react-stately": "^3.46.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.15",
+    "@types/react-dom": "^19.2.3",
+    "tsdown": "^0.22.1",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.7",
+    "vitest-browser-react": "^2.2.0"
   },
   "peerDependencies": {
     "react": "18.x || 19.x",
@@ -58,8 +65,8 @@
   "exports": {
     ".": {
       "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
       },
       "require": {
         "types": "./dist/index.d.cts",

package/dist/index.d.ts

@@ -1,54 +0,0 @@
-import * as _bento_slots from '@bento/slots';
-import React from 'react';
-import { ContainerProps } from '@bento/container';
-import { AriaRadioProps, AriaRadioGroupProps } from 'react-aria';
-
-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. */
-    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.MemoExoticComponent<React.ComponentType<RadioProps & _bento_slots.Slots>>;
-
-interface RadioGroupProps extends AriaRadioGroupProps, Omit<ContainerProps, 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;
-}
-/**
- * The `RadioGroup` allows a user to select a single item from a list of `Radio` components.
- */
-declare const RadioGroup: React.MemoExoticComponent<React.ComponentType<RadioGroupProps & _bento_slots.Slots>>;
-
-export { Radio, RadioGroup, type RadioGroupProps, type RadioProps };

package/dist/index.js

@@ -1,81 +0,0 @@
-import React2, { useMemo } from 'react';
-import { Container } from '@bento/container';
-import { useDataAttributes } from '@bento/use-data-attributes';
-import { Icon } from '@bento/icon';
-import { Input } from '@bento/input';
-import { withSlots } from '@bento/slots';
-import { useProps } from '@bento/use-props';
-import { VisuallyHidden } from '@bento/visually-hidden';
-import { useObjectRef, mergeRefs, mergeProps } from '@react-aria/utils';
-import { useFocusRing, useRadio, useHover, useRadioGroup, mergeProps as mergeProps$1 } 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(
-    Container,
-    {
-      as: "label",
-      ...apply(mergeProps(labelProps, hoverProps)),
-      ...useDataAttributes({
-        selected: isSelected,
-        pressed: isPressed,
-        hovered: isHovered,
-        focused: isFocused,
-        focusVisible: isFocusVisible,
-        disabled: props.isDisabled,
-        readonly: state.isReadOnly,
-        invalid: state.isInvalid,
-        required: state.isRequired
-      })
-    },
-    /* @__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 { props, apply } = useProps(args);
-  const state = useRadioGroupState(props);
-  const { radioGroupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useRadioGroup(
-    { ...props, label: props.label ?? "Radio Group", description: props.description ?? "Description" },
-    state
-  );
-  return /* @__PURE__ */ React2.createElement(RadioGroupStateContext.Provider, { value: state }, /* @__PURE__ */ React2.createElement(
-    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$1(errorMessageProps, validationResult)
-      }
-    },
-    props.children
-  ));
-});
-
-export { Radio, RadioGroup };
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"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 { Input } from '@bento/input';\nimport { withSlots } from '@bento/slots';\nimport { useProps } from '@bento/use-props';\nimport { VisuallyHidden } from '@bento/visually-hidden';\nimport { mergeProps, mergeRefs, useObjectRef } from '@react-aria/utils';\nimport { useFocusRing, useHover, 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"]}