@yahoo/uds 3.58.2-beta.1 → 3.59.0-beta.1

package/dist/components/client/Radio/Radio.d.cts

@@ -0,0 +1,43 @@
+import { RadioSize, RadioVariant, UniversalRadioProps } from "../../../tokens/types.cjs";
+import "../../../tokens/index.cjs";
+import React from "react";
+
+//#region src/components/client/Radio/Radio.d.ts
+type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value' | 'size' | 'height' | 'width' | 'color' | 'required'>;
+interface RadioProps extends NativeInputProps, UniversalRadioProps {
+  layerClassNames?: {
+    root?: string;
+    radio?: string;
+    label?: string;
+  };
+}
+declare const RADIO_VARIANTS: RadioVariant[];
+declare const RADIO_SIZES: RadioSize[];
+/**
+ * **⚙️️ A Radio.
+ *
+ * @componentType Client component
+ *
+ * @description
+ * A radio component allows users to select one or multiple options from a set. Unlike checkbox, radio buttons cannot have multiple selected in a form, allowing only 1 selection in a group. It represents a binary state, typically as selected or unselected.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/radio Radio Docs} for more info
+ *
+ * @usage
+ * - Forms: Radio
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Radio } from "@yahoo/uds";
+ *
+ * <Radio label="Name" />
+ *```
+ *
+ * @related [Radio](https://uds.build/docs/components/Radio).
+ **/
+declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { RADIO_SIZES, RADIO_VARIANTS, Radio, type RadioProps };
+//# sourceMappingURL=Radio.d.cts.map

package/dist/components/client/Radio/Radio.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.cts","names":[],"sources":["../../../../src/components/client/Radio/Radio.tsx"],"sourcesContent":[],"mappings":";;;;;KAWK,gBAAA,CAAA,CAAA,CAAmB,KACtB,KAAA,CAAM,oBAAoB;UAIlB,UAAA,CAAA,OAAA,CAAmB,kBAAkB;;IAL1C,IAAA,CAAA,CAAA,CAAA,MAAA;IACuB,KAAA,CAAA,CAAA,CAAA,MAAA;IAApB,KAAA,CAAA,CAAA,CAAA,MAAA;EADgB,CAAA;;AAAI,OAAA,CAAA,KAAA,CAatB,cARe,CAAA,CAQC,YARO,CAAA,CAAA;AAAqC,OAAA,CAAA,KAAA,CAS5D,WADyD,CAAA,CAC5C,SADG,CAAA,CAAA;AAAY,CAAA,CAAA;AACN,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA;;;;;;;;;;;;;;;;;;;;;;;cAoCtB,OAAK,KAAA,CAAA,0BAAA,aAAA,KAAA,CAAA,cAAA"}

package/dist/components/client/Radio/Radio.d.ts

@@ -0,0 +1,43 @@
+import { RadioSize, RadioVariant, UniversalRadioProps } from "../../../tokens/types.js";
+import "../../../tokens/index.js";
+import React from "react";
+
+//#region src/components/client/Radio/Radio.d.ts
+type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value' | 'size' | 'height' | 'width' | 'color' | 'required'>;
+interface RadioProps extends NativeInputProps, UniversalRadioProps {
+  layerClassNames?: {
+    root?: string;
+    radio?: string;
+    label?: string;
+  };
+}
+declare const RADIO_VARIANTS: RadioVariant[];
+declare const RADIO_SIZES: RadioSize[];
+/**
+ * **⚙️️ A Radio.
+ *
+ * @componentType Client component
+ *
+ * @description
+ * A radio component allows users to select one or multiple options from a set. Unlike checkbox, radio buttons cannot have multiple selected in a form, allowing only 1 selection in a group. It represents a binary state, typically as selected or unselected.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/radio Radio Docs} for more info
+ *
+ * @usage
+ * - Forms: Radio
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Radio } from "@yahoo/uds";
+ *
+ * <Radio label="Name" />
+ *```
+ *
+ * @related [Radio](https://uds.build/docs/components/Radio).
+ **/
+declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { RADIO_SIZES, RADIO_VARIANTS, Radio, type RadioProps };
+//# sourceMappingURL=Radio.d.ts.map

package/dist/components/client/Radio/Radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","names":[],"sources":["../../../../src/components/client/Radio/Radio.tsx"],"sourcesContent":[],"mappings":";;;;;KAWK,gBAAA,CAAA,CAAA,CAAmB,KACtB,KAAA,CAAM,oBAAoB;UAIlB,UAAA,CAAA,OAAA,CAAmB,kBAAkB;;IAL1C,IAAA,CAAA,CAAA,CAAA,MAAA;IACuB,KAAA,CAAA,CAAA,CAAA,MAAA;IAApB,KAAA,CAAA,CAAA,CAAA,MAAA;EADgB,CAAA;;AAAI,OAAA,CAAA,KAAA,CAatB,cARe,CAAA,CAQC,YARO,CAAA,CAAA;AAAqC,OAAA,CAAA,KAAA,CAS5D,WADyD,CAAA,CAC5C,SADG,CAAA,CAAA;AAAY,CAAA,CAAA;AACN,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA;;;;;;;;;;;;;;;;;;;;;;;cAoCtB,OAAK,KAAA,CAAA,0BAAA,aAAA,KAAA,CAAA,cAAA"}

package/dist/components/client/Radio/Radio.js

@@ -0,0 +1,223 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { cx, getStyles } from "../../../styles/styler.js";
+import { Box } from "../../Box.js";
+import { FormLabel } from "../../FormLabel.js";
+import { SpringMotionConfig } from "../SpringMotionConfig.js";
+import { useRadioGroup } from "./useRadioGroup.js";
+import React, { forwardRef, useCallback, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { m, useReducedMotion } from "motion/react";
+
+//#region src/components/client/Radio/Radio.tsx
+const RADIO_VARIANTS = ["primary", "secondary"];
+const RADIO_SIZES = ["sm", "md"];
+const VARIANT_ERROR_MAP = {
+	primary: "alert",
+	secondary: "alert-secondary"
+};
+const MotionBox = m.create(Box);
+const hoverTransition = {
+	layoutVariant: "smooth",
+	layoutSpeed: "3"
+};
+const pressTransition = {
+	layoutVariant: "veryBouncy",
+	layoutSpeed: "4"
+};
+/**
+* **⚙️️ A Radio.
+*
+* @componentType Client component
+*
+* @description
+* A radio component allows users to select one or multiple options from a set. Unlike checkbox, radio buttons cannot have multiple selected in a form, allowing only 1 selection in a group. It represents a binary state, typically as selected or unselected.
+*
+* @see
+* Check out the {@link https://uds.build/docs/components/radio Radio Docs} for more info
+*
+* @usage
+* - Forms: Radio
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Radio } from "@yahoo/uds";
+*
+* <Radio label="Name" />
+*```
+*
+* @related [Radio](https://uds.build/docs/components/Radio).
+**/
+const Radio = forwardRef(function Radio$1({ id, name: nameProp, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: forceReduceMotion, value: valueProp = "", checked: checkedProp, defaultChecked, disabled, hasError, onChange, onFocus, onBlur, className, layerClassNames,...radioProps }, parentRef) {
+	const generatedId = useId();
+	const uid = id ?? `uds-radio-${generatedId}`;
+	const innerRef = useRef(null);
+	/**
+	* State
+	*/
+	const { name, isControlled, checked, setGroupValue } = useRadioGroup({
+		name: nameProp,
+		value: valueProp,
+		checked: checkedProp,
+		defaultChecked
+	});
+	const [isHovered, setIsHovered] = useState(false);
+	const [isPressed, setIsPressed] = useState(false);
+	/**
+	* Derived values
+	*/
+	const variant = useMemo(() => hasError ? VARIANT_ERROR_MAP[variantProp] : variantProp, [hasError, variantProp]);
+	const showHoverEffect = useMemo(() => !disabled && isHovered, [disabled, isHovered]);
+	const showPressedEffect = useMemo(() => !disabled && !checked && isPressed, [
+		checked,
+		disabled,
+		isPressed
+	]);
+	const scale = useMemo(() => showPressedEffect ? .9 : showHoverEffect ? 1.1 : 1, [showHoverEffect, showPressedEffect]);
+	const checkOpacity = useMemo(() => checked ? showPressedEffect ? "opacity-55" : "opacity-100" : "opacity-0", [checked, showPressedEffect]);
+	const showShadow = useMemo(() => {
+		return !disabled && (showPressedEffect && !checked || showHoverEffect && checked);
+	}, [
+		checked,
+		disabled,
+		showHoverEffect,
+		showPressedEffect
+	]);
+	const motionAnimate = useMemo(() => ({ scale }), [scale]);
+	const motionTransition = useMemo(() => isPressed ? pressTransition : hoverTransition, [isPressed]);
+	/**
+	* Handlers
+	*/
+	const handleOnChange = useCallback((e) => {
+		setGroupValue(e.target.value);
+		onChange?.(e);
+	}, [onChange, setGroupValue]);
+	const handleFocus = useCallback((e) => {
+		onFocus?.(e);
+	}, [onFocus]);
+	const handleBlur = useCallback((e) => {
+		onBlur?.(e);
+	}, [onBlur]);
+	const handleHoverStart = useCallback(() => {
+		setIsHovered(true);
+	}, []);
+	const handleHoverEnd = useCallback(() => {
+		setIsHovered(false);
+	}, []);
+	const handleTapStart = useCallback(() => {
+		setIsPressed(true);
+	}, []);
+	const handleTapEnd = useCallback(() => {
+		setIsPressed(false);
+	}, []);
+	const prefersReducedMotion = useReducedMotion();
+	const reduceMotion = forceReduceMotion ? "always" : "user";
+	const cssAnimationDuration = prefersReducedMotion || forceReduceMotion ? "duration-0" : "duration-120";
+	const classNames = {
+		root: getStyles({
+			radioSizeRoot: size,
+			radioVariantValueRoot: checked ? "checked" : "unchecked",
+			radioVariantRoot: variant,
+			display: "flex",
+			flexDirection: labelPosition === "start" ? "row" : "row-reverse",
+			alignItems: "center",
+			className: cx([
+				{
+					"cursor-pointer": !disabled,
+					"cursor-default": disabled,
+					"opacity-50": disabled
+				},
+				className,
+				layerClassNames?.root
+			])
+		}),
+		radio: getStyles({
+			radioSizeRadio: size,
+			radioVariantRadio: variant,
+			radioVariantValueRadio: checked ? "checked" : "unchecked",
+			className: cx([
+				"border",
+				"uds-ring",
+				"uds-ring-within",
+				cssAnimationDuration,
+				"transition-[background-color,border-color]",
+				"transition-shadow",
+				layerClassNames?.radio
+			])
+		}),
+		radioCircle: getStyles({
+			radioVariantRadioCircle: variant,
+			radioVariantValueRadioCircle: checked ? "checked" : "unchecked",
+			className: cx([
+				"pointer-events-none",
+				"w-[8px]",
+				"h-[8px]",
+				checkOpacity,
+				cssAnimationDuration,
+				"transition-opacity"
+			])
+		}),
+		htmlRadio: cx("cursor-[inherit]", "absolute", "opacity-0", "top-1/2", "left-1/2", "w-[calc(100%+2px)]", "h-[calc(100%+2px)]", "transform", "translate-x-[-50%]", "translate-y-[-50%]"),
+		label: cx(labelPosition === "start" ? "text-start" : "text-end", layerClassNames?.label)
+	};
+	const RootElement = label ? m.label : m.div;
+	return /* @__PURE__ */ jsx(SpringMotionConfig, {
+		reducedMotion: reduceMotion,
+		...motionTransition,
+		children: /* @__PURE__ */ jsxs(RootElement, {
+			className: classNames.root,
+			"data-testid": "container",
+			onHoverStart: handleHoverStart,
+			onHoverEnd: handleHoverEnd,
+			onTapStart: handleTapStart,
+			onTap: handleTapEnd,
+			onTapCancel: handleTapEnd,
+			tabIndex: -1,
+			children: [/* @__PURE__ */ jsxs(MotionBox, {
+				position: "relative",
+				borderRadius: "full",
+				alignItems: "center",
+				justifyContent: "center",
+				flex: "none",
+				className: classNames.radio,
+				animate: motionAnimate,
+				insetShadow: showShadow ? "lg-invert" : "none",
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "radio",
+					tabIndex: 0,
+					...radioProps,
+					ref: (ref) => {
+						innerRef.current = ref;
+						if (typeof parentRef === "function") parentRef(ref);
+						else if (parentRef !== null) parentRef.current = ref;
+					},
+					onFocus: handleFocus,
+					onBlur: handleBlur,
+					id: uid,
+					name,
+					value: valueProp,
+					disabled,
+					"aria-invalid": hasError,
+					onChange: handleOnChange,
+					...isControlled ? { checked } : { defaultChecked },
+					className: classNames.htmlRadio
+				}), /* @__PURE__ */ jsx(Box, {
+					borderRadius: "full",
+					className: classNames.radioCircle
+				})]
+			}), label && /* @__PURE__ */ jsx(FormLabel, {
+				as: "div",
+				variant: "inherit",
+				color: "inherit",
+				label,
+				className: classNames.label
+			})]
+		})
+	});
+});
+Radio.displayName = "Radio";
+
+//#endregion
+export { RADIO_SIZES, RADIO_VARIANTS, Radio };
+//# sourceMappingURL=Radio.js.map

package/dist/components/client/Radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","names":["RADIO_VARIANTS: RadioVariant[]","RADIO_SIZES: RadioSize[]","VARIANT_ERROR_MAP: Record<RadioVariant, 'alert' | 'alert-secondary'>","Radio"],"sources":["../../../../src/components/client/Radio/Radio.tsx"],"sourcesContent":["import type { RadioSize, RadioVariant, UniversalRadioProps } from '@yahoo/uds/tokens';\nimport { m, useReducedMotion } from 'motion/react';\nimport type { ChangeEvent, FocusEvent } from 'react';\nimport React, { forwardRef, useCallback, useId, useMemo, useRef, useState } from 'react';\n\nimport { cx, getStyles } from '../../../styles/styler';\nimport { Box } from '../../Box';\nimport { FormLabel } from '../../FormLabel';\nimport { SpringMotionConfig } from '../SpringMotionConfig';\nimport { useRadioGroup } from './useRadioGroup';\n\ntype NativeInputProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type' | 'checked' | 'value' | 'size' | 'height' | 'width' | 'color' | 'required'\n>;\n\ninterface RadioProps extends NativeInputProps, UniversalRadioProps {\n  layerClassNames?: {\n    root?: string;\n    radio?: string;\n    label?: string;\n  };\n}\n\nconst RADIO_VARIANTS: RadioVariant[] = ['primary', 'secondary'];\nconst RADIO_SIZES: RadioSize[] = ['sm', 'md'];\n\nconst VARIANT_ERROR_MAP: Record<RadioVariant, 'alert' | 'alert-secondary'> = {\n  primary: 'alert',\n  secondary: 'alert-secondary',\n};\n\nconst MotionBox = m.create(Box);\n\nconst hoverTransition = { layoutVariant: 'smooth', layoutSpeed: '3' } as const;\nconst pressTransition = { layoutVariant: 'veryBouncy', layoutSpeed: '4' } as const;\n\n/**\n * **⚙️️ A Radio.\n *\n * @componentType Client component\n *\n * @description\n * A radio component allows users to select one or multiple options from a set. Unlike checkbox, radio buttons cannot have multiple selected in a form, allowing only 1 selection in a group. It represents a binary state, typically as selected or unselected.\n *\n * @see\n * Check out the {@link https://uds.build/docs/components/radio Radio Docs} for more info\n *\n * @usage\n * - Forms: Radio\n *\n * @example\n * ```tsx\n * 'use client';\n * import { Radio } from \"@yahoo/uds\";\n *\n * <Radio label=\"Name\" />\n *```\n *\n * @related [Radio](https://uds.build/docs/components/Radio).\n **/\nconst Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  {\n    id,\n    name: nameProp,\n    label,\n    labelPosition = 'start',\n    variant: variantProp = 'primary',\n    size = 'md',\n    reduceMotion: forceReduceMotion,\n    value: valueProp = '', // Matches HTML\n    checked: checkedProp,\n    defaultChecked,\n    disabled,\n    hasError,\n    onChange,\n    onFocus,\n    onBlur,\n    className,\n    layerClassNames,\n    ...radioProps\n  },\n  parentRef,\n) {\n  const generatedId = useId();\n  const uid = id ?? `uds-radio-${generatedId}`;\n\n  const innerRef = useRef<HTMLInputElement | null>(null);\n\n  /**\n   * State\n   */\n  const { name, isControlled, checked, setGroupValue } = useRadioGroup({\n    name: nameProp,\n    value: valueProp,\n    checked: checkedProp,\n    defaultChecked,\n  });\n\n  const [isHovered, setIsHovered] = useState(false);\n  const [isPressed, setIsPressed] = useState(false);\n\n  /**\n   * Derived values\n   */\n  const variant = useMemo(\n    () => (hasError ? VARIANT_ERROR_MAP[variantProp] : variantProp),\n    [hasError, variantProp],\n  );\n\n  const showHoverEffect = useMemo(() => !disabled && isHovered, [disabled, isHovered]);\n\n  const showPressedEffect = useMemo(\n    () => !disabled && !checked && isPressed,\n    [checked, disabled, isPressed],\n  );\n\n  const scale = useMemo(\n    () => (showPressedEffect ? 0.9 : showHoverEffect ? 1.1 : 1),\n    [showHoverEffect, showPressedEffect],\n  );\n\n  const checkOpacity = useMemo(\n    () => (checked ? (showPressedEffect ? 'opacity-55' : 'opacity-100') : 'opacity-0'),\n    [checked, showPressedEffect],\n  );\n\n  const showShadow = useMemo(() => {\n    const pressedAndUnchecked = showPressedEffect && !checked;\n    const hoverAndChecked = showHoverEffect && checked;\n\n    return !disabled && (pressedAndUnchecked || hoverAndChecked);\n  }, [checked, disabled, showHoverEffect, showPressedEffect]);\n\n  const motionAnimate = useMemo(() => ({ scale }), [scale]);\n\n  const motionTransition = useMemo(\n    () => (isPressed ? pressTransition : hoverTransition),\n    [isPressed],\n  );\n\n  /**\n   * Handlers\n   */\n  const handleOnChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      setGroupValue(e.target.value);\n      onChange?.(e);\n    },\n    [onChange, setGroupValue],\n  );\n\n  const handleFocus = useCallback(\n    (e: FocusEvent<HTMLInputElement>) => {\n      onFocus?.(e);\n    },\n    [onFocus],\n  );\n\n  const handleBlur = useCallback(\n    (e: FocusEvent<HTMLInputElement>) => {\n      onBlur?.(e);\n    },\n    [onBlur],\n  );\n\n  const handleHoverStart = useCallback(() => {\n    setIsHovered(true);\n  }, []);\n\n  const handleHoverEnd = useCallback(() => {\n    setIsHovered(false);\n  }, []);\n\n  const handleTapStart = useCallback(() => {\n    setIsPressed(true);\n  }, []);\n\n  const handleTapEnd = useCallback(() => {\n    setIsPressed(false);\n  }, []);\n\n  // Motion\n  const prefersReducedMotion = useReducedMotion();\n  const reduceMotion = forceReduceMotion ? 'always' : 'user';\n\n  const cssAnimationDuration =\n    prefersReducedMotion || forceReduceMotion ? 'duration-0' : 'duration-120';\n\n  const classNames = {\n    root: getStyles({\n      radioSizeRoot: size,\n      radioVariantValueRoot: checked ? 'checked' : 'unchecked',\n      radioVariantRoot: variant,\n      display: 'flex',\n      flexDirection: labelPosition === 'start' ? 'row' : 'row-reverse',\n      alignItems: 'center',\n      className: cx([\n        {\n          'cursor-pointer': !disabled,\n          'cursor-default': disabled,\n          'opacity-50': disabled,\n        },\n\n        className,\n        layerClassNames?.root,\n      ]),\n    }),\n\n    radio: getStyles({\n      radioSizeRadio: size,\n      radioVariantRadio: variant,\n      radioVariantValueRadio: checked ? 'checked' : 'unchecked',\n      className: cx([\n        'border',\n\n        'uds-ring',\n        'uds-ring-within',\n\n        cssAnimationDuration,\n        'transition-[background-color,border-color]',\n        'transition-shadow',\n\n        layerClassNames?.radio,\n      ]),\n    }),\n\n    radioCircle: getStyles({\n      radioVariantRadioCircle: variant,\n      radioVariantValueRadioCircle: checked ? 'checked' : 'unchecked',\n      className: cx([\n        'pointer-events-none',\n        'w-[8px]',\n        'h-[8px]',\n\n        // Variant/state specific check opacity override only used when checked.\n        checkOpacity,\n\n        cssAnimationDuration,\n        'transition-opacity',\n      ]),\n    }),\n\n    htmlRadio: cx(\n      // Control the cursor at the top of the component\n      // and don't let the input override it back to the\n      // default value.\n      'cursor-[inherit]',\n\n      'absolute',\n      'opacity-0',\n      'top-1/2',\n      'left-1/2',\n      'w-[calc(100%+2px)]',\n      'h-[calc(100%+2px)]',\n      'transform',\n      'translate-x-[-50%]',\n      'translate-y-[-50%]',\n    ),\n\n    label: cx(labelPosition === 'start' ? 'text-start' : 'text-end', layerClassNames?.label),\n  };\n\n  const RootElement = label ? m.label : m.div;\n\n  return (\n    <SpringMotionConfig reducedMotion={reduceMotion} {...motionTransition}>\n      <RootElement\n        className={classNames.root}\n        data-testid=\"container\"\n        onHoverStart={handleHoverStart}\n        onHoverEnd={handleHoverEnd}\n        onTapStart={handleTapStart}\n        onTap={handleTapEnd}\n        onTapCancel={handleTapEnd}\n        tabIndex={-1}\n      >\n        <MotionBox\n          position=\"relative\"\n          borderRadius=\"full\"\n          alignItems=\"center\"\n          justifyContent=\"center\"\n          flex=\"none\"\n          className={classNames.radio}\n          animate={motionAnimate}\n          insetShadow={showShadow ? 'lg-invert' : 'none'}\n        >\n          <input\n            type=\"radio\"\n            // Required for Safari to render a focus ring\n            tabIndex={0}\n            // These are standard HTML input props for customization.\n            {...radioProps}\n            //\n            // Provide a ref to the underlying input element for customization.\n            ref={(ref) => {\n              // Set internal ref.\n              innerRef.current = ref;\n\n              // Forward the ref to parent.\n              if (typeof parentRef === 'function') {\n                parentRef(ref);\n              } else if (parentRef !== null) {\n                parentRef.current = ref;\n              }\n            }}\n            //\n            // Track focus as a prop for easier styling.\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            //\n            // Core props for the Radio.\n            id={uid}\n            name={name}\n            value={valueProp}\n            disabled={disabled}\n            aria-invalid={hasError}\n            onChange={handleOnChange}\n            {...(isControlled\n              ? {\n                  checked,\n                }\n              : {\n                  defaultChecked,\n                })}\n            //\n            // styles\n            className={classNames.htmlRadio}\n          />\n\n          <Box borderRadius=\"full\" className={classNames.radioCircle} />\n        </MotionBox>\n\n        {label && (\n          <FormLabel\n            as=\"div\"\n            variant=\"inherit\"\n            color=\"inherit\"\n            label={label}\n            className={classNames.label}\n          />\n        )}\n      </RootElement>\n    </SpringMotionConfig>\n  );\n});\n\n// Need to re-set this because of the forwardRef wrapper\nRadio.displayName = 'Radio';\n\nexport { Radio, RADIO_SIZES, RADIO_VARIANTS, type RadioProps };\n"],"mappings":"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"}

package/dist/components/client/Radio/RadioGroupProvider.cjs

@@ -0,0 +1,98 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_utils_createSlot = require('../../../utils/createSlot.cjs');
+const require_components_client_Radio_RadioGroupStore = require('./RadioGroupStore.cjs');
+const require_components_client_Radio_useRadioGroup = require('./useRadioGroup.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/client/Radio/RadioGroupProvider.tsx
+const Slot = require_utils_createSlot.createSlot();
+/**
+* A custom RadioGroupStore that extends the default RadioGroupStore to allow for controlled RadioGroups.
+*/
+var RadioGroupProviderStore = class extends require_components_client_Radio_RadioGroupStore.RadioGroupStore {
+	onChangeCb;
+	isControlled;
+	constructor(name, isControlled) {
+		super(name);
+		this.isControlled = isControlled;
+	}
+	setValue(value, force = false) {
+		if (!this.isControlled || force) {
+			super.setValue(value);
+			return;
+		}
+		this.onChangeCb?.(value);
+	}
+};
+/**
+* **⚙️️ A RadioGroup that improves accessibility and provides a central component for state manangement.
+*
+* @componentType Client component
+*
+* @description
+* Provides a radio group
+*
+* @see
+* Check out the {@link https://uds.build/docs/components/radio Radio Docs} for more info
+*
+* @usage
+* - Forms: RadioGroup
+*
+* @example
+* ```tsx
+* 'use client';
+* import { RadioGroup } from "@yahoo/uds";
+*
+* <RadioGroup name="items" value="1">
+*   <Radio value="1" label="One" />
+*   <Radio value="2" label="Two" />
+* </RadioGroup>
+*```
+*
+* @related [Radio](https://uds.build/docs/components/radio).
+**/
+const RadioGroupProvider = (0, react.forwardRef)(function RadioGroupProvider$1({ asChild, name, value: valueProp, defaultValue, onChange,...props }, ref) {
+	const isControlled = valueProp !== void 0;
+	const localName = require_components_client_Radio_useRadioGroup.useRadioGroupName(name);
+	const store = (0, react.useMemo)(() => {
+		const s = new RadioGroupProviderStore(localName, isControlled);
+		s.value = isControlled ? valueProp : defaultValue;
+		return s;
+	}, [
+		defaultValue,
+		isControlled,
+		localName,
+		valueProp
+	]);
+	(0, react.useEffect)(() => {
+		store.onChangeCb = onChange;
+	}, [onChange, store]);
+	(0, react.useEffect)(() => {
+		if (!isControlled) return;
+		store.setValue(valueProp, true);
+	}, [
+		isControlled,
+		store,
+		valueProp
+	]);
+	(0, react.useEffect)(() => {
+		return store.onChange((value) => onChange?.(value));
+	}, [onChange, store]);
+	const Comp = asChild ? Slot : "div";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Radio_RadioGroupStore.RadioGroupContext.Provider, {
+		value: store,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Comp, {
+			role: "radiogroup",
+			ref,
+			...props
+		})
+	});
+});
+RadioGroupProvider.displayName = "RadioGroupProvider";
+
+//#endregion
+exports.RadioGroupProvider = RadioGroupProvider;

package/dist/components/client/Radio/RadioGroupProvider.d.cts

@@ -0,0 +1,38 @@
+import { UniversalRadioGroupProps } from "../../../tokens/types.cjs";
+import "../../../tokens/index.cjs";
+import React from "react";
+
+//#region src/components/client/Radio/RadioGroupProvider.d.ts
+type NativeDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'>;
+interface RadioGroupProviderProps extends UniversalRadioGroupProps, NativeDivProps {}
+/**
+ * **⚙️️ A RadioGroup that improves accessibility and provides a central component for state manangement.
+ *
+ * @componentType Client component
+ *
+ * @description
+ * Provides a radio group
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/radio Radio Docs} for more info
+ *
+ * @usage
+ * - Forms: RadioGroup
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { RadioGroup } from "@yahoo/uds";
+ *
+ * <RadioGroup name="items" value="1">
+ *   <Radio value="1" label="One" />
+ *   <Radio value="2" label="Two" />
+ * </RadioGroup>
+ *```
+ *
+ * @related [Radio](https://uds.build/docs/components/radio).
+ **/
+declare const RadioGroupProvider: React.ForwardRefExoticComponent<RadioGroupProviderProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { RadioGroupProvider, type RadioGroupProviderProps };
+//# sourceMappingURL=RadioGroupProvider.d.cts.map

package/dist/components/client/Radio/RadioGroupProvider.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupProvider.d.cts","names":[],"sources":["../../../../src/components/client/Radio/RadioGroupProvider.tsx"],"sourcesContent":[],"mappings":";;;;;KAUK,cAAA,CAAA,CAAA,CAAiB,KAAK,KAAA,CAAM,eAAe;UAEtC,uBAAA,CAAA,OAAA,CAAgC,0BAA0B;AAXN,CAAA,CAAA;;;;;AASpC,CAAA,CAAA,CAAA,CAAA;AAEwD,CAAA,CAAA,CAAA,QAAA,CAAA,CAAA,CAAA,KAAA,CAAA;;;;;;;;;;;;;;;;;;;;;cAyD5E,oBAAkB,KAAA,CAAA,0BAAA,0BAAA,KAAA,CAAA,cAAA"}

package/dist/components/client/Radio/RadioGroupProvider.d.ts

@@ -0,0 +1,38 @@
+import { UniversalRadioGroupProps } from "../../../tokens/types.js";
+import "../../../tokens/index.js";
+import React from "react";
+
+//#region src/components/client/Radio/RadioGroupProvider.d.ts
+type NativeDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'>;
+interface RadioGroupProviderProps extends UniversalRadioGroupProps, NativeDivProps {}
+/**
+ * **⚙️️ A RadioGroup that improves accessibility and provides a central component for state manangement.
+ *
+ * @componentType Client component
+ *
+ * @description
+ * Provides a radio group
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/radio Radio Docs} for more info
+ *
+ * @usage
+ * - Forms: RadioGroup
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { RadioGroup } from "@yahoo/uds";
+ *
+ * <RadioGroup name="items" value="1">
+ *   <Radio value="1" label="One" />
+ *   <Radio value="2" label="Two" />
+ * </RadioGroup>
+ *```
+ *
+ * @related [Radio](https://uds.build/docs/components/radio).
+ **/
+declare const RadioGroupProvider: React.ForwardRefExoticComponent<RadioGroupProviderProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { RadioGroupProvider, type RadioGroupProviderProps };
+//# sourceMappingURL=RadioGroupProvider.d.ts.map

package/dist/components/client/Radio/RadioGroupProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupProvider.d.ts","names":[],"sources":["../../../../src/components/client/Radio/RadioGroupProvider.tsx"],"sourcesContent":[],"mappings":";;;;;KAUK,cAAA,CAAA,CAAA,CAAiB,KAAK,KAAA,CAAM,eAAe;UAEtC,uBAAA,CAAA,OAAA,CAAgC,0BAA0B;AAXN,CAAA,CAAA;;;;;AASpC,CAAA,CAAA,CAAA,CAAA;AAEwD,CAAA,CAAA,CAAA,QAAA,CAAA,CAAA,CAAA,KAAA,CAAA;;;;;;;;;;;;;;;;;;;;;cAyD5E,oBAAkB,KAAA,CAAA,0BAAA,0BAAA,KAAA,CAAA,cAAA"}

package/dist/components/client/Radio/RadioGroupProvider.js

@@ -0,0 +1,97 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { createSlot } from "../../../utils/createSlot.js";
+import { RadioGroupContext, RadioGroupStore } from "./RadioGroupStore.js";
+import { useRadioGroupName } from "./useRadioGroup.js";
+import React, { forwardRef, useEffect, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/client/Radio/RadioGroupProvider.tsx
+const Slot = createSlot();
+/**
+* A custom RadioGroupStore that extends the default RadioGroupStore to allow for controlled RadioGroups.
+*/
+var RadioGroupProviderStore = class extends RadioGroupStore {
+	onChangeCb;
+	isControlled;
+	constructor(name, isControlled) {
+		super(name);
+		this.isControlled = isControlled;
+	}
+	setValue(value, force = false) {
+		if (!this.isControlled || force) {
+			super.setValue(value);
+			return;
+		}
+		this.onChangeCb?.(value);
+	}
+};
+/**
+* **⚙️️ A RadioGroup that improves accessibility and provides a central component for state manangement.
+*
+* @componentType Client component
+*
+* @description
+* Provides a radio group
+*
+* @see
+* Check out the {@link https://uds.build/docs/components/radio Radio Docs} for more info
+*
+* @usage
+* - Forms: RadioGroup
+*
+* @example
+* ```tsx
+* 'use client';
+* import { RadioGroup } from "@yahoo/uds";
+*
+* <RadioGroup name="items" value="1">
+*   <Radio value="1" label="One" />
+*   <Radio value="2" label="Two" />
+* </RadioGroup>
+*```
+*
+* @related [Radio](https://uds.build/docs/components/radio).
+**/
+const RadioGroupProvider = forwardRef(function RadioGroupProvider$1({ asChild, name, value: valueProp, defaultValue, onChange,...props }, ref) {
+	const isControlled = valueProp !== void 0;
+	const localName = useRadioGroupName(name);
+	const store = useMemo(() => {
+		const s = new RadioGroupProviderStore(localName, isControlled);
+		s.value = isControlled ? valueProp : defaultValue;
+		return s;
+	}, [
+		defaultValue,
+		isControlled,
+		localName,
+		valueProp
+	]);
+	useEffect(() => {
+		store.onChangeCb = onChange;
+	}, [onChange, store]);
+	useEffect(() => {
+		if (!isControlled) return;
+		store.setValue(valueProp, true);
+	}, [
+		isControlled,
+		store,
+		valueProp
+	]);
+	useEffect(() => {
+		return store.onChange((value) => onChange?.(value));
+	}, [onChange, store]);
+	const Comp = asChild ? Slot : "div";
+	return /* @__PURE__ */ jsx(RadioGroupContext.Provider, {
+		value: store,
+		children: /* @__PURE__ */ jsx(Comp, {
+			role: "radiogroup",
+			ref,
+			...props
+		})
+	});
+});
+RadioGroupProvider.displayName = "RadioGroupProvider";
+
+//#endregion
+export { RadioGroupProvider };
+//# sourceMappingURL=RadioGroupProvider.js.map

package/dist/components/client/Radio/RadioGroupProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupProvider.js","names":["RadioGroupProvider"],"sources":["../../../../src/components/client/Radio/RadioGroupProvider.tsx"],"sourcesContent":["import type { UniversalRadioGroupProps } from '@yahoo/uds/tokens';\nimport React, { forwardRef, useEffect, useMemo } from 'react';\n\nimport type { DivProps } from '../../../components/Box';\nimport { createSlot } from '../../../utils/createSlot';\nimport { RadioGroupContext, RadioGroupStore } from './RadioGroupStore';\nimport { useRadioGroupName } from './useRadioGroup';\n\nconst Slot = createSlot<React.ComponentType<DivProps>>();\n\ntype NativeDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'>;\n\ninterface RadioGroupProviderProps extends UniversalRadioGroupProps, NativeDivProps {}\n\n/**\n * A custom RadioGroupStore that extends the default RadioGroupStore to allow for controlled RadioGroups.\n */\nclass RadioGroupProviderStore extends RadioGroupStore {\n  // The callback to notify the controlled RadioGroup of a value change.\n  onChangeCb?: (value: string | undefined) => void;\n\n  // Whether the RadioGroup is controlled\n  isControlled: boolean;\n\n  constructor(name: string, isControlled: boolean) {\n    super(name);\n\n    this.isControlled = isControlled;\n  }\n\n  // Overloads the default setValue to notify the controlled RadioGroup of a value change rather than setting the value directly.\n  setValue(value: string | undefined, force = false) {\n    // If we are being used inside RadioGroupProvider, we can force the store value to be set (and notify the listeners).\n    if (!this.isControlled || force) {\n      super.setValue(value);\n      return;\n    }\n\n    this.onChangeCb?.(value);\n  }\n}\n\n/**\n * **⚙️️ A RadioGroup that improves accessibility and provides a central component for state manangement.\n *\n * @componentType Client component\n *\n * @description\n * Provides a radio group\n *\n * @see\n * Check out the {@link https://uds.build/docs/components/radio Radio Docs} for more info\n *\n * @usage\n * - Forms: RadioGroup\n *\n * @example\n * ```tsx\n * 'use client';\n * import { RadioGroup } from \"@yahoo/uds\";\n *\n * <RadioGroup name=\"items\" value=\"1\">\n *   <Radio value=\"1\" label=\"One\" />\n *   <Radio value=\"2\" label=\"Two\" />\n * </RadioGroup>\n *```\n *\n * @related [Radio](https://uds.build/docs/components/radio).\n **/\nconst RadioGroupProvider = forwardRef<HTMLDivElement, RadioGroupProviderProps>(\n  function RadioGroupProvider(\n    { asChild, name, value: valueProp, defaultValue, onChange, ...props },\n    ref,\n  ) {\n    const isControlled = valueProp !== undefined;\n    const localName = useRadioGroupName(name);\n\n    // The store for this RadioGroup. Will be created once, memoized and used as the context value.\n    const store = useMemo(() => {\n      const s = new RadioGroupProviderStore(localName, isControlled);\n\n      // Set the initial value of the store\n      s.value = isControlled ? valueProp : defaultValue;\n\n      return s;\n    }, [defaultValue, isControlled, localName, valueProp]);\n\n    useEffect(() => {\n      // The store should call the onChange callback when the a change event is emitted.\n      store.onChangeCb = onChange;\n    }, [onChange, store]);\n\n    useEffect(() => {\n      if (!isControlled) {\n        return;\n      }\n\n      store.setValue(\n        valueProp,\n        true, // Force set the value since we are responding to a controlled prop change.\n      );\n    }, [isControlled, store, valueProp]);\n\n    // When the store changes, trigger a change.\n    useEffect(() => {\n      return store.onChange((value) => onChange?.(value));\n    }, [onChange, store]);\n\n    const Comp = asChild ? Slot : 'div';\n\n    return (\n      <RadioGroupContext.Provider value={store}>\n        <Comp role=\"radiogroup\" ref={ref} {...props} />\n      </RadioGroupContext.Provider>\n    );\n  },\n);\n\n// Need to re-set this because of the forwardRef wrapper\nRadioGroupProvider.displayName = 'RadioGroupProvider';\n\nexport { RadioGroupProvider, type RadioGroupProviderProps };\n"],"mappings":";;;;;;;;AAQA,MAAM,OAAO,YAA2C;;;;AASxD,IAAM,0BAAN,cAAsC,gBAAgB;CAEpD;CAGA;CAEA,YAAY,MAAc,cAAuB;AAC/C,QAAM,KAAK;AAEX,OAAK,eAAe;;CAItB,SAAS,OAA2B,QAAQ,OAAO;AAEjD,MAAI,CAAC,KAAK,gBAAgB,OAAO;AAC/B,SAAM,SAAS,MAAM;AACrB;;AAGF,OAAK,aAAa,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+B5B,MAAM,qBAAqB,WACzB,SAASA,qBACP,EAAE,SAAS,MAAM,OAAO,WAAW,cAAc,SAAU,GAAG,SAC9D,KACA;CACA,MAAM,eAAe,cAAc;CACnC,MAAM,YAAY,kBAAkB,KAAK;CAGzC,MAAM,QAAQ,cAAc;EAC1B,MAAM,IAAI,IAAI,wBAAwB,WAAW,aAAa;AAG9D,IAAE,QAAQ,eAAe,YAAY;AAErC,SAAO;IACN;EAAC;EAAc;EAAc;EAAW;EAAU,CAAC;AAEtD,iBAAgB;AAEd,QAAM,aAAa;IAClB,CAAC,UAAU,MAAM,CAAC;AAErB,iBAAgB;AACd,MAAI,CAAC,aACH;AAGF,QAAM,SACJ,WACA,KACD;IACA;EAAC;EAAc;EAAO;EAAU,CAAC;AAGpC,iBAAgB;AACd,SAAO,MAAM,UAAU,UAAU,WAAW,MAAM,CAAC;IAClD,CAAC,UAAU,MAAM,CAAC;CAErB,MAAM,OAAO,UAAU,OAAO;AAE9B,QACE,oBAAC,kBAAkB;EAAS,OAAO;YACjC,oBAAC;GAAK,MAAK;GAAkB;GAAK,GAAI;IAAS;GACpB;EAGlC;AAGD,mBAAmB,cAAc"}