@yahoo/uds 3.66.1 → 3.67.0-beta.1

package/dist/components/client/Menu/utils/transformAriakitPlacement.js

@@ -0,0 +1,38 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+//#region src/components/client/Menu/utils/transformAriakitPlacement.ts
+/**
+* Maps directionally-agnostic placement values to Ariakit LTR values
+* - Converts 'start' to 'left' and 'end' to 'right' (with RTL support)
+* - Examples:
+*   - 'start' -> 'left' (or 'right' in RTL)
+*   - 'end' -> 'right' (or 'left' in RTL)
+*   - 'top-start' -> 'top-left' (or 'top-right' in RTL)
+*   - 'bottom-end' -> 'bottom-right' (or 'bottom-left' in RTL)
+*   - 'start-top' -> 'left-top' (or 'right-top' in RTL)
+*   - 'end-bottom' -> 'right-bottom' (or 'left-bottom' in RTL)
+*
+* The function handles:
+* - Simple placements (start/end)
+* - Vertical-horizontal combinations (top-start, bottom-end, etc.)
+* - Horizontal-vertical combinations (start-top, end-bottom, etc.)
+* - RTL/LTR directionality
+* - Undefined placements and options
+*/
+const transformAriakitPlacement = (placement, options) => {
+	const isRtl = options?.rtl;
+	if (placement === "start") return isRtl ? "right" : "left";
+	if (placement === "end") return isRtl ? "left" : "right";
+	if (placement?.includes("-")) {
+		const [first, second] = placement.split("-");
+		if (first === "start" || first === "end") {
+			const horizontal = first === "start" ? isRtl ? "right" : "left" : isRtl ? "left" : "right";
+			if (second === "top" || second === "bottom") return `${horizontal}-${second === "bottom" ? "end" : "start"}`;
+		}
+		if (first === "top" || first === "bottom") return `${first}-${second === "start" ? isRtl ? "end" : "start" : isRtl ? "start" : "end"}`;
+	}
+	return placement;
+};
+
+//#endregion
+export { transformAriakitPlacement };

package/dist/components/client/Pressable.cjs

@@ -0,0 +1,112 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_styles_styler = require('../../styles/styler.cjs');
+const require_utils_createSlot = require('../../utils/createSlot.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/client/Pressable.tsx
+const Slot = require_utils_createSlot.createSlot();
+/**
+* **🖲️ A primitive component for creating button interactions with accessibility support**
+*
+* @componentType Client component
+*
+* @description
+* The Pressable component is a primitive component that can be used
+* to create button interactions with accessibility support. It can be used
+* to trigger an action, such as submitting a form, navigating to a new page,
+* or adding interactivity to a section or card.
+*
+* @example
+* ```tsx
+* import { Pressable } from '@yahoo/uds';
+*
+* <Pressable
+*   backgroundColor="secondary"
+*   borderWidth="thin"
+*   borderColor="primary"
+*   borderRadius="lg"
+*   onPress={() => console.log('Pressed!')}
+*  >
+*    <Text variant="body1" color="primary" spacingHorizontal="7" spacingVertical="5">Click me...</Text>
+* </Pressable>
+* ```
+*
+* @usage
+* - If you need to add interactivity to a section or card.
+* - If you need a highly customized version of [Button](./button)
+*
+* @see The {@link https://uds.build/docs/components/pressable Pressable Docs} for more info
+*
+* @related [Button](https://uds.build/docs/components/button), [IconButton](https://uds.build/docs/components/icon-button)
+*
+*/
+const Pressable = (0, react.forwardRef)(function Pressable$1({ className, asChild, onPress, onClick = onPress, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, dropShadow, insetShadow, ...props }, ref) {
+	const styles = require_styles_styler.getStyles({
+		backgroundColor,
+		borderRadius,
+		borderTopStartRadius,
+		borderTopEndRadius,
+		borderBottomStartRadius,
+		borderBottomEndRadius,
+		borderColor,
+		borderStartColor,
+		borderEndColor,
+		borderTopColor,
+		borderBottomColor,
+		borderWidth,
+		borderVerticalWidth,
+		borderHorizontalWidth,
+		borderStartWidth,
+		borderEndWidth,
+		borderTopWidth,
+		borderBottomWidth,
+		alignContent,
+		alignItems,
+		alignSelf,
+		flex,
+		flexDirection,
+		flexGrow,
+		flexShrink,
+		flexWrap,
+		justifyContent,
+		flexBasis,
+		display,
+		overflow,
+		overflowX,
+		overflowY,
+		position,
+		spacing,
+		spacingHorizontal,
+		spacingVertical,
+		spacingBottom,
+		spacingEnd,
+		spacingStart,
+		spacingTop,
+		offset,
+		offsetVertical,
+		offsetHorizontal,
+		offsetBottom,
+		offsetEnd,
+		offsetStart,
+		offsetTop,
+		columnGap,
+		rowGap,
+		dropShadow,
+		insetShadow,
+		className
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? Slot : "button", {
+		className: styles,
+		ref,
+		onClick,
+		tabIndex: 0,
+		...props
+	});
+});
+Pressable.displayName = "Pressable";
+
+//#endregion
+exports.Pressable = Pressable;

package/dist/{Pressable-DKUSyadp.d.cts → components/client/Pressable.d.cts}

@@ -1,9 +1,10 @@
-import * as react from 'react';
-import { a as UniversalPressableProps } from './universalTokensConfigAuto-BHqbAL0M.cjs';
+import { UniversalPressableProps } from "../../tokens/types.cjs";
+import "../../tokens/index.cjs";
+import * as react25 from "react";
 
+//#region src/components/client/Pressable.d.ts
 type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'>;
-interface PressableProps extends UniversalPressableProps, HtmlButtonProps {
-}
+interface PressableProps extends UniversalPressableProps, HtmlButtonProps {}
 /**
  * **🖲️ A primitive component for creating button interactions with accessibility support**
  *
@@ -39,6 +40,6 @@ interface PressableProps extends UniversalPressableProps, HtmlButtonProps {
  * @related [Button](https://uds.build/docs/components/button), [IconButton](https://uds.build/docs/components/icon-button)
  *
  */
-declare const Pressable: react.ForwardRefExoticComponent<PressableProps & react.RefAttributes<HTMLButtonElement>>;
-
-export { type PressableProps as P, Pressable as a };
+declare const Pressable: react25.ForwardRefExoticComponent<PressableProps & react25.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { Pressable, type PressableProps };

package/dist/{Pressable-CTm_RY-u.d.ts → components/client/Pressable.d.ts}

@@ -1,9 +1,10 @@
-import * as react from 'react';
-import { a as UniversalPressableProps } from './universalTokensConfigAuto-D1z2ow2N.js';
+import { UniversalPressableProps } from "../../tokens/types.js";
+import "../../tokens/index.js";
+import * as react41 from "react";
 
+//#region src/components/client/Pressable.d.ts
 type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'>;
-interface PressableProps extends UniversalPressableProps, HtmlButtonProps {
-}
+interface PressableProps extends UniversalPressableProps, HtmlButtonProps {}
 /**
  * **🖲️ A primitive component for creating button interactions with accessibility support**
  *
@@ -39,6 +40,6 @@ interface PressableProps extends UniversalPressableProps, HtmlButtonProps {
  * @related [Button](https://uds.build/docs/components/button), [IconButton](https://uds.build/docs/components/icon-button)
  *
  */
-declare const Pressable: react.ForwardRefExoticComponent<PressableProps & react.RefAttributes<HTMLButtonElement>>;
-
-export { type PressableProps as P, Pressable as a };
+declare const Pressable: react41.ForwardRefExoticComponent<PressableProps & react41.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { Pressable, type PressableProps };

package/dist/components/client/Pressable.js

@@ -0,0 +1,111 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { getStyles } from "../../styles/styler.js";
+import { createSlot } from "../../utils/createSlot.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/client/Pressable.tsx
+const Slot = createSlot();
+/**
+* **🖲️ A primitive component for creating button interactions with accessibility support**
+*
+* @componentType Client component
+*
+* @description
+* The Pressable component is a primitive component that can be used
+* to create button interactions with accessibility support. It can be used
+* to trigger an action, such as submitting a form, navigating to a new page,
+* or adding interactivity to a section or card.
+*
+* @example
+* ```tsx
+* import { Pressable } from '@yahoo/uds';
+*
+* <Pressable
+*   backgroundColor="secondary"
+*   borderWidth="thin"
+*   borderColor="primary"
+*   borderRadius="lg"
+*   onPress={() => console.log('Pressed!')}
+*  >
+*    <Text variant="body1" color="primary" spacingHorizontal="7" spacingVertical="5">Click me...</Text>
+* </Pressable>
+* ```
+*
+* @usage
+* - If you need to add interactivity to a section or card.
+* - If you need a highly customized version of [Button](./button)
+*
+* @see The {@link https://uds.build/docs/components/pressable Pressable Docs} for more info
+*
+* @related [Button](https://uds.build/docs/components/button), [IconButton](https://uds.build/docs/components/icon-button)
+*
+*/
+const Pressable = forwardRef(function Pressable$1({ className, asChild, onPress, onClick = onPress, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, dropShadow, insetShadow, ...props }, ref) {
+	const styles = getStyles({
+		backgroundColor,
+		borderRadius,
+		borderTopStartRadius,
+		borderTopEndRadius,
+		borderBottomStartRadius,
+		borderBottomEndRadius,
+		borderColor,
+		borderStartColor,
+		borderEndColor,
+		borderTopColor,
+		borderBottomColor,
+		borderWidth,
+		borderVerticalWidth,
+		borderHorizontalWidth,
+		borderStartWidth,
+		borderEndWidth,
+		borderTopWidth,
+		borderBottomWidth,
+		alignContent,
+		alignItems,
+		alignSelf,
+		flex,
+		flexDirection,
+		flexGrow,
+		flexShrink,
+		flexWrap,
+		justifyContent,
+		flexBasis,
+		display,
+		overflow,
+		overflowX,
+		overflowY,
+		position,
+		spacing,
+		spacingHorizontal,
+		spacingVertical,
+		spacingBottom,
+		spacingEnd,
+		spacingStart,
+		spacingTop,
+		offset,
+		offsetVertical,
+		offsetHorizontal,
+		offsetBottom,
+		offsetEnd,
+		offsetStart,
+		offsetTop,
+		columnGap,
+		rowGap,
+		dropShadow,
+		insetShadow,
+		className
+	});
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		className: styles,
+		ref,
+		onClick,
+		tabIndex: 0,
+		...props
+	});
+});
+Pressable.displayName = "Pressable";
+
+//#endregion
+export { Pressable };

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

@@ -0,0 +1,226 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_styles_styler = require('../../../styles/styler.cjs');
+const require_components_Box = require('../../Box.cjs');
+const require_components_FormLabel = require('../../FormLabel.cjs');
+const require_components_client_SpringMotionConfig = require('../SpringMotionConfig.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");
+let motion_react = require("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 = motion_react.m.create(require_components_Box.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 = (0, react.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 = (0, react.useId)();
+	const uid = id ?? `uds-radio-${generatedId}`;
+	const innerRef = (0, react.useRef)(null);
+	/**
+	* State
+	*/
+	const { name, isControlled, checked, setGroupValue } = require_components_client_Radio_useRadioGroup.useRadioGroup({
+		name: nameProp,
+		value: valueProp,
+		checked: checkedProp,
+		defaultChecked
+	});
+	const [isHovered, setIsHovered] = (0, react.useState)(false);
+	const [isPressed, setIsPressed] = (0, react.useState)(false);
+	/**
+	* Derived values
+	*/
+	const variant = (0, react.useMemo)(() => hasError ? VARIANT_ERROR_MAP[variantProp] : variantProp, [hasError, variantProp]);
+	const showHoverEffect = (0, react.useMemo)(() => !disabled && isHovered, [disabled, isHovered]);
+	const showPressedEffect = (0, react.useMemo)(() => !disabled && !checked && isPressed, [
+		checked,
+		disabled,
+		isPressed
+	]);
+	const scale = (0, react.useMemo)(() => showPressedEffect ? .9 : showHoverEffect ? 1.1 : 1, [showHoverEffect, showPressedEffect]);
+	const checkOpacity = (0, react.useMemo)(() => checked ? showPressedEffect ? "opacity-55" : "opacity-100" : "opacity-0", [checked, showPressedEffect]);
+	const showShadow = (0, react.useMemo)(() => {
+		return !disabled && (showPressedEffect && !checked || showHoverEffect && checked);
+	}, [
+		checked,
+		disabled,
+		showHoverEffect,
+		showPressedEffect
+	]);
+	const motionAnimate = (0, react.useMemo)(() => ({ scale }), [scale]);
+	const motionTransition = (0, react.useMemo)(() => isPressed ? pressTransition : hoverTransition, [isPressed]);
+	/**
+	* Handlers
+	*/
+	const handleOnChange = (0, react.useCallback)((e) => {
+		setGroupValue(e.target.value);
+		onChange?.(e);
+	}, [onChange, setGroupValue]);
+	const handleFocus = (0, react.useCallback)((e) => {
+		onFocus?.(e);
+	}, [onFocus]);
+	const handleBlur = (0, react.useCallback)((e) => {
+		onBlur?.(e);
+	}, [onBlur]);
+	const handleHoverStart = (0, react.useCallback)(() => {
+		setIsHovered(true);
+	}, []);
+	const handleHoverEnd = (0, react.useCallback)(() => {
+		setIsHovered(false);
+	}, []);
+	const handleTapStart = (0, react.useCallback)(() => {
+		setIsPressed(true);
+	}, []);
+	const handleTapEnd = (0, react.useCallback)(() => {
+		setIsPressed(false);
+	}, []);
+	const prefersReducedMotion = (0, motion_react.useReducedMotion)();
+	const reduceMotion = forceReduceMotion ? "always" : "user";
+	const cssAnimationDuration = prefersReducedMotion || forceReduceMotion ? "duration-0" : "duration-120";
+	const classNames = {
+		root: require_styles_styler.getStyles({
+			radioSizeRoot: size,
+			radioVariantValueRoot: checked ? "checked" : "unchecked",
+			radioVariantRoot: variant,
+			display: "flex",
+			flexDirection: labelPosition === "start" ? "row" : "row-reverse",
+			alignItems: "center",
+			className: require_styles_styler.cx([
+				{
+					"cursor-pointer": !disabled,
+					"cursor-default": disabled,
+					"opacity-50": disabled
+				},
+				className,
+				layerClassNames?.root
+			])
+		}),
+		radio: require_styles_styler.getStyles({
+			radioSizeRadio: size,
+			radioVariantRadio: variant,
+			radioVariantValueRadio: checked ? "checked" : "unchecked",
+			className: require_styles_styler.cx([
+				"border",
+				"uds-ring",
+				"uds-ring-within",
+				cssAnimationDuration,
+				"transition-[background-color,border-color]",
+				"transition-shadow",
+				layerClassNames?.radio
+			])
+		}),
+		radioCircle: require_styles_styler.getStyles({
+			radioVariantRadioCircle: variant,
+			radioVariantValueRadioCircle: checked ? "checked" : "unchecked",
+			className: require_styles_styler.cx([
+				"pointer-events-none",
+				"w-[8px]",
+				"h-[8px]",
+				checkOpacity,
+				cssAnimationDuration,
+				"transition-opacity"
+			])
+		}),
+		htmlRadio: require_styles_styler.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: require_styles_styler.cx(labelPosition === "start" ? "text-start" : "text-end", layerClassNames?.label)
+	};
+	const RootElement = label ? motion_react.m.label : motion_react.m.div;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
+		reducedMotion: reduceMotion,
+		...motionTransition,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RootElement, {
+			className: classNames.root,
+			"data-testid": "container",
+			onHoverStart: handleHoverStart,
+			onHoverEnd: handleHoverEnd,
+			onTapStart: handleTapStart,
+			onTap: handleTapEnd,
+			onTapCancel: handleTapEnd,
+			tabIndex: -1,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MotionBox, {
+				position: "relative",
+				borderRadius: "full",
+				alignItems: "center",
+				justifyContent: "center",
+				flex: "none",
+				className: classNames.radio,
+				animate: motionAnimate,
+				insetShadow: showShadow ? "lg-invert" : "none",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+					borderRadius: "full",
+					className: classNames.radioCircle
+				})]
+			}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_FormLabel.FormLabel, {
+				as: "div",
+				variant: "inherit",
+				color: "inherit",
+				label,
+				className: classNames.label
+			})]
+		})
+	});
+});
+Radio.displayName = "Radio";
+
+//#endregion
+exports.RADIO_SIZES = RADIO_SIZES;
+exports.RADIO_VARIANTS = RADIO_VARIANTS;
+exports.Radio = Radio;

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

@@ -0,0 +1,42 @@
+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 };

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

@@ -0,0 +1,42 @@
+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 };