@yahoo/uds 3.66.1 → 3.67.0-beta.2

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

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

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,37 @@
+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 };

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

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

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

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

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

@@ -0,0 +1,41 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+
+//#region src/components/client/Radio/RadioGroupStore.tsx
+/**
+* A store for a single RadioGroup. This store is used to manage the state of all Radios within a group.
+*/
+var RadioGroupStore = class RadioGroupStore {
+	name;
+	value;
+	activeCount = 0;
+	#changeListeners = /* @__PURE__ */ new Set();
+	constructor(name) {
+		this.name = name;
+	}
+	onChange(cb) {
+		this.#changeListeners.add(cb);
+		return () => {
+			this.#changeListeners.delete(cb);
+		};
+	}
+	setValue(value) {
+		this.value = value;
+		this.#changeListeners.forEach((cb) => cb(value));
+	}
+	static findOrCreate(radioGroupStores, name) {
+		let store = radioGroupStores.get(name);
+		if (!store) {
+			store = new RadioGroupStore(name);
+			radioGroupStores.set(name, store);
+		}
+		return store;
+	}
+};
+const RadioGroupContext = (0, react.createContext)(/* @__PURE__ */ new Map());
+
+//#endregion
+exports.RadioGroupContext = RadioGroupContext;
+exports.RadioGroupStore = RadioGroupStore;

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

@@ -0,0 +1,20 @@
+import * as react43 from "react";
+
+//#region src/components/client/Radio/RadioGroupStore.d.ts
+type RadioGroupStoreOnChange = (value: string | undefined) => void;
+/**
+ * A store for a single RadioGroup. This store is used to manage the state of all Radios within a group.
+ */
+declare class RadioGroupStore {
+  #private;
+  name: string;
+  value?: string;
+  activeCount: number;
+  constructor(name: string);
+  onChange(cb: RadioGroupStoreOnChange): () => void;
+  setValue(value: string | undefined): void;
+  static findOrCreate(radioGroupStores: Map<string, RadioGroupStore>, name: string): RadioGroupStore;
+}
+declare const RadioGroupContext: react43.Context<RadioGroupStore | Map<string, RadioGroupStore>>;
+//#endregion
+export { RadioGroupContext, RadioGroupStore };

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

@@ -0,0 +1,20 @@
+import * as react53 from "react";
+
+//#region src/components/client/Radio/RadioGroupStore.d.ts
+type RadioGroupStoreOnChange = (value: string | undefined) => void;
+/**
+ * A store for a single RadioGroup. This store is used to manage the state of all Radios within a group.
+ */
+declare class RadioGroupStore {
+  #private;
+  name: string;
+  value?: string;
+  activeCount: number;
+  constructor(name: string);
+  onChange(cb: RadioGroupStoreOnChange): () => void;
+  setValue(value: string | undefined): void;
+  static findOrCreate(radioGroupStores: Map<string, RadioGroupStore>, name: string): RadioGroupStore;
+}
+declare const RadioGroupContext: react53.Context<RadioGroupStore | Map<string, RadioGroupStore>>;
+//#endregion
+export { RadioGroupContext, RadioGroupStore };

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

@@ -0,0 +1,39 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { createContext } from "react";
+
+//#region src/components/client/Radio/RadioGroupStore.tsx
+/**
+* A store for a single RadioGroup. This store is used to manage the state of all Radios within a group.
+*/
+var RadioGroupStore = class RadioGroupStore {
+	name;
+	value;
+	activeCount = 0;
+	#changeListeners = /* @__PURE__ */ new Set();
+	constructor(name) {
+		this.name = name;
+	}
+	onChange(cb) {
+		this.#changeListeners.add(cb);
+		return () => {
+			this.#changeListeners.delete(cb);
+		};
+	}
+	setValue(value) {
+		this.value = value;
+		this.#changeListeners.forEach((cb) => cb(value));
+	}
+	static findOrCreate(radioGroupStores, name) {
+		let store = radioGroupStores.get(name);
+		if (!store) {
+			store = new RadioGroupStore(name);
+			radioGroupStores.set(name, store);
+		}
+		return store;
+	}
+};
+const RadioGroupContext = createContext(/* @__PURE__ */ new Map());
+
+//#endregion
+export { RadioGroupContext, RadioGroupStore };

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

@@ -0,0 +1,7 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_components_client_Radio_Radio = require('./Radio.cjs');
+const require_components_client_Radio_RadioGroupProvider = require('./RadioGroupProvider.cjs');
+
+exports.Radio = require_components_client_Radio_Radio.Radio;
+exports.RadioGroupProvider = require_components_client_Radio_RadioGroupProvider.RadioGroupProvider;

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

@@ -0,0 +1,3 @@
+import { Radio, RadioProps } from "./Radio.cjs";
+import { RadioGroupProvider, RadioGroupProviderProps } from "./RadioGroupProvider.cjs";
+export { Radio, RadioGroupProvider, type RadioGroupProviderProps, type RadioProps };

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

@@ -0,0 +1,3 @@
+import { Radio, RadioProps } from "./Radio.js";
+import { RadioGroupProvider, RadioGroupProviderProps } from "./RadioGroupProvider.js";
+export { Radio, RadioGroupProvider, type RadioGroupProviderProps, type RadioProps };

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

@@ -0,0 +1,6 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { Radio } from "./Radio.js";
+import { RadioGroupProvider } from "./RadioGroupProvider.js";
+
+export { Radio, RadioGroupProvider };