@yahoo/uds 3.66.0 → 3.67.0-beta.1

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

@@ -0,0 +1,81 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_components_client_Radio_RadioGroupStore = require('./RadioGroupStore.cjs');
+let react = require("react");
+
+//#region src/components/client/Radio/useRadioGroup.ts
+const useRadioGroupName = (name) => {
+	const uid = (0, react.useId)();
+	return name ?? `uds-radio-group-${uid}`;
+};
+/**
+* A hook that connects a single Radio to its RadioGroupStore. If the Radio is used within a RadioGroupProvider,
+* it will use the context store. Otherwise, it will use a shared global store across all un-grouped Radios by name.
+*
+* @param name The name of the Radio which should be shared across the group.
+* @param value The value of the Radio.
+* @param checked Whether the Radio is checked by its controlled prop.
+* @param defaultChecked The uncontrolled default checked state of the Radio.
+* @returns The name of the RadioGroup, whether the Radio is controlled, the checked state of the Radio, and a function to set the RadioGroup value.
+*/
+const useRadioGroup = ({ name: radioName, value: radioValue, checked: radioIsChecked, defaultChecked: radioDefaultIsChecked }) => {
+	const ctx = (0, react.useContext)(require_components_client_Radio_RadioGroupStore.RadioGroupContext);
+	const hasRadioGroupProvider = ctx instanceof require_components_client_Radio_RadioGroupStore.RadioGroupStore;
+	const isControlled = radioIsChecked !== void 0 || hasRadioGroupProvider;
+	const uniqueName = useRadioGroupName(radioName);
+	const store = (0, react.useMemo)(() => {
+		if (hasRadioGroupProvider) return ctx;
+		return require_components_client_Radio_RadioGroupStore.RadioGroupStore.findOrCreate(ctx, uniqueName);
+	}, [
+		ctx,
+		hasRadioGroupProvider,
+		uniqueName
+	]);
+	const [radioGroupValue, setInternalRadioGroupValue] = (0, react.useState)(store.value);
+	const name = store.name ?? uniqueName;
+	const setGroupValue = (0, react.useCallback)((value) => {
+		store.setValue(value);
+		if (isControlled) return;
+		setInternalRadioGroupValue(value);
+	}, [isControlled, store]);
+	(0, react.useEffect)(() => store.onChange(setInternalRadioGroupValue), [store]);
+	(0, react.useEffect)(() => {
+		if (radioIsChecked !== true) return;
+		setGroupValue(radioValue);
+	}, [
+		radioIsChecked,
+		radioValue,
+		setGroupValue
+	]);
+	(0, react.useEffect)(() => {
+		if (hasRadioGroupProvider) return;
+		const store$1 = require_components_client_Radio_RadioGroupStore.RadioGroupStore.findOrCreate(ctx, name);
+		store$1.activeCount += 1;
+		ctx.set(name, store$1);
+		return () => {
+			const entry = ctx.get(name);
+			if (!entry) return;
+			entry.activeCount -= 1;
+			if (entry.activeCount === 0) ctx.delete(name);
+		};
+	}, [
+		ctx,
+		hasRadioGroupProvider,
+		name
+	]);
+	return {
+		name,
+		isControlled,
+		checked: (() => {
+			if (isControlled && !hasRadioGroupProvider) return radioIsChecked;
+			if (radioGroupValue !== void 0) return radioValue === radioGroupValue;
+			return radioDefaultIsChecked ?? false;
+		})(),
+		setGroupValue
+	};
+};
+
+//#endregion
+exports.useRadioGroup = useRadioGroup;
+exports.useRadioGroupName = useRadioGroupName;

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

@@ -0,0 +1,30 @@
+//#region src/components/client/Radio/useRadioGroup.d.ts
+declare const useRadioGroupName: (name?: string) => string;
+/**
+ * A hook that connects a single Radio to its RadioGroupStore. If the Radio is used within a RadioGroupProvider,
+ * it will use the context store. Otherwise, it will use a shared global store across all un-grouped Radios by name.
+ *
+ * @param name The name of the Radio which should be shared across the group.
+ * @param value The value of the Radio.
+ * @param checked Whether the Radio is checked by its controlled prop.
+ * @param defaultChecked The uncontrolled default checked state of the Radio.
+ * @returns The name of the RadioGroup, whether the Radio is controlled, the checked state of the Radio, and a function to set the RadioGroup value.
+ */
+declare const useRadioGroup: ({
+  name: radioName,
+  value: radioValue,
+  checked: radioIsChecked,
+  defaultChecked: radioDefaultIsChecked
+}: {
+  name?: string | undefined;
+  value: string;
+  checked?: boolean;
+  defaultChecked?: boolean;
+}) => {
+  name: string;
+  isControlled: boolean;
+  checked: boolean | undefined;
+  setGroupValue: (value: string) => void;
+};
+//#endregion
+export { useRadioGroup, useRadioGroupName };

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

@@ -0,0 +1,30 @@
+//#region src/components/client/Radio/useRadioGroup.d.ts
+declare const useRadioGroupName: (name?: string) => string;
+/**
+ * A hook that connects a single Radio to its RadioGroupStore. If the Radio is used within a RadioGroupProvider,
+ * it will use the context store. Otherwise, it will use a shared global store across all un-grouped Radios by name.
+ *
+ * @param name The name of the Radio which should be shared across the group.
+ * @param value The value of the Radio.
+ * @param checked Whether the Radio is checked by its controlled prop.
+ * @param defaultChecked The uncontrolled default checked state of the Radio.
+ * @returns The name of the RadioGroup, whether the Radio is controlled, the checked state of the Radio, and a function to set the RadioGroup value.
+ */
+declare const useRadioGroup: ({
+  name: radioName,
+  value: radioValue,
+  checked: radioIsChecked,
+  defaultChecked: radioDefaultIsChecked
+}: {
+  name?: string | undefined;
+  value: string;
+  checked?: boolean;
+  defaultChecked?: boolean;
+}) => {
+  name: string;
+  isControlled: boolean;
+  checked: boolean | undefined;
+  setGroupValue: (value: string) => void;
+};
+//#endregion
+export { useRadioGroup, useRadioGroupName };

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

@@ -0,0 +1,79 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { RadioGroupContext, RadioGroupStore } from "./RadioGroupStore.js";
+import { useCallback, useContext, useEffect, useId, useMemo, useState } from "react";
+
+//#region src/components/client/Radio/useRadioGroup.ts
+const useRadioGroupName = (name) => {
+	const uid = useId();
+	return name ?? `uds-radio-group-${uid}`;
+};
+/**
+* A hook that connects a single Radio to its RadioGroupStore. If the Radio is used within a RadioGroupProvider,
+* it will use the context store. Otherwise, it will use a shared global store across all un-grouped Radios by name.
+*
+* @param name The name of the Radio which should be shared across the group.
+* @param value The value of the Radio.
+* @param checked Whether the Radio is checked by its controlled prop.
+* @param defaultChecked The uncontrolled default checked state of the Radio.
+* @returns The name of the RadioGroup, whether the Radio is controlled, the checked state of the Radio, and a function to set the RadioGroup value.
+*/
+const useRadioGroup = ({ name: radioName, value: radioValue, checked: radioIsChecked, defaultChecked: radioDefaultIsChecked }) => {
+	const ctx = useContext(RadioGroupContext);
+	const hasRadioGroupProvider = ctx instanceof RadioGroupStore;
+	const isControlled = radioIsChecked !== void 0 || hasRadioGroupProvider;
+	const uniqueName = useRadioGroupName(radioName);
+	const store = useMemo(() => {
+		if (hasRadioGroupProvider) return ctx;
+		return RadioGroupStore.findOrCreate(ctx, uniqueName);
+	}, [
+		ctx,
+		hasRadioGroupProvider,
+		uniqueName
+	]);
+	const [radioGroupValue, setInternalRadioGroupValue] = useState(store.value);
+	const name = store.name ?? uniqueName;
+	const setGroupValue = useCallback((value) => {
+		store.setValue(value);
+		if (isControlled) return;
+		setInternalRadioGroupValue(value);
+	}, [isControlled, store]);
+	useEffect(() => store.onChange(setInternalRadioGroupValue), [store]);
+	useEffect(() => {
+		if (radioIsChecked !== true) return;
+		setGroupValue(radioValue);
+	}, [
+		radioIsChecked,
+		radioValue,
+		setGroupValue
+	]);
+	useEffect(() => {
+		if (hasRadioGroupProvider) return;
+		const store$1 = RadioGroupStore.findOrCreate(ctx, name);
+		store$1.activeCount += 1;
+		ctx.set(name, store$1);
+		return () => {
+			const entry = ctx.get(name);
+			if (!entry) return;
+			entry.activeCount -= 1;
+			if (entry.activeCount === 0) ctx.delete(name);
+		};
+	}, [
+		ctx,
+		hasRadioGroupProvider,
+		name
+	]);
+	return {
+		name,
+		isControlled,
+		checked: (() => {
+			if (isControlled && !hasRadioGroupProvider) return radioIsChecked;
+			if (radioGroupValue !== void 0) return radioValue === radioGroupValue;
+			return radioDefaultIsChecked ?? false;
+		})(),
+		setGroupValue
+	};
+};
+
+//#endregion
+export { useRadioGroup, useRadioGroupName };

package/dist/components/client/SpringMotionConfig.cjs

@@ -0,0 +1,99 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_tokens_configs_motion = require('../../tokens/configs/motion.cjs');
+const require_utils_getMotionVar = require('../../utils/getMotionVar.cjs');
+const require_components_experimental_client_AvoidMotionLibraryProvider = require('../experimental/client/AvoidMotionLibraryProvider.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let motion_react = require("motion/react");
+
+//#region src/components/client/SpringMotionConfig.tsx
+const LAYOUT_VARIANT = "subtle";
+const LAYOUT_SPEED = "3";
+const COLOR_VARIANT = "smooth";
+const COLOR_SPEED = "3";
+const defaultLoadFeatures = () => import("@yahoo/uds/__private/motionFeatures/domAnimation").then(({ domAnimation }) => domAnimation);
+/**
+* **🎬 Spring Motion Config to define motion animations for all UDS components**
+*
+* @componentType Client component
+*
+* @description
+* The SpringConfig component provides a way to configure the spring animations for the entire application.
+* This component provides a way to use uds motion configs with Framer Motion.
+*/
+function SpringMotionConfig({ children, reducedMotion = "user", loadFeatures = defaultLoadFeatures, layoutVariant = LAYOUT_VARIANT, layoutSpeed = LAYOUT_SPEED, colorVariant = COLOR_VARIANT, colorSpeed = COLOR_SPEED }) {
+	const initialLayoutConfig = require_tokens_configs_motion.motion[layoutVariant][layoutSpeed];
+	const initialColorConfig = require_tokens_configs_motion.motion[colorVariant][colorSpeed];
+	const [layoutConfig, setLayoutConfig] = (0, react.useState)(initialLayoutConfig);
+	const [colorConfig, setColorConfig] = (0, react.useState)(initialColorConfig);
+	const colorVarConfig = {
+		variant: colorVariant,
+		speed: colorSpeed
+	};
+	const colorStiffnessVar = require_utils_getMotionVar.getMotionVar({
+		...colorVarConfig,
+		control: "stiffness"
+	});
+	const colorDampingVar = require_utils_getMotionVar.getMotionVar({
+		...colorVarConfig,
+		control: "damping"
+	});
+	const layoutVarConfig = {
+		variant: layoutVariant,
+		speed: layoutSpeed
+	};
+	const layoutStiffnessVar = require_utils_getMotionVar.getMotionVar({
+		...layoutVarConfig,
+		control: "stiffness"
+	});
+	const layoutDampingVar = require_utils_getMotionVar.getMotionVar({
+		...layoutVarConfig,
+		control: "damping"
+	});
+	(0, react.useEffect)(() => {
+		const globalComputedStyles = getComputedStyle(document.documentElement);
+		const layoutValues = {
+			type: "spring",
+			damping: Number(globalComputedStyles.getPropertyValue(layoutDampingVar)),
+			stiffness: Number(globalComputedStyles.getPropertyValue(layoutStiffnessVar))
+		};
+		const colorValues = {
+			type: "spring",
+			damping: Number(globalComputedStyles.getPropertyValue(colorDampingVar)),
+			stiffness: Number(globalComputedStyles.getPropertyValue(colorStiffnessVar))
+		};
+		setLayoutConfig(layoutValues);
+		setColorConfig(colorValues);
+	}, [
+		colorDampingVar,
+		colorStiffnessVar,
+		layoutDampingVar,
+		layoutStiffnessVar
+	]);
+	const transition = (0, react.useMemo)(() => ({
+		type: "spring",
+		mass: 1,
+		...layoutConfig,
+		layout: layoutConfig,
+		opacity: colorConfig,
+		color: colorConfig,
+		borderColor: colorConfig,
+		backgroundColor: colorConfig
+	}), [colorConfig, layoutConfig]);
+	if (require_components_experimental_client_AvoidMotionLibraryProvider.useAvoidMotionLibrary()) return children;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.LazyMotion, {
+		features: loadFeatures,
+		strict: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.MotionConfig, {
+			transition,
+			reducedMotion,
+			children
+		})
+	});
+}
+SpringMotionConfig.displayName = "SpringMotionConfig";
+
+//#endregion
+exports.SpringMotionConfig = SpringMotionConfig;

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

@@ -0,0 +1,57 @@
+import { MotionVariant, MotionVariantSpeed } from "../../tokens/types.cjs";
+import "../../tokens/index.cjs";
+import * as react59 from "react";
+import { LazyFeatureBundle, MotionConfigProps } from "motion/react";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
+
+//#region src/components/client/SpringMotionConfig.d.ts
+interface SpringMotionConfigProps extends Pick<MotionConfigProps, 'children' | 'reducedMotion'> {
+  /**
+   * The layout variant to use for the motion config.
+   * @default 'subtle'
+   */
+  layoutVariant?: MotionVariant;
+  /**
+   * The layout speed to use for the motion config.
+   * @default '3'
+   */
+  layoutSpeed?: MotionVariantSpeed;
+  /**
+   * The color variant to use for the motion config.
+   * @default 'smooth'
+   */
+  colorVariant?: MotionVariant;
+  /**
+   * The color speed to use for the motion config.
+   * @default '3'
+   */
+  colorSpeed?: MotionVariantSpeed;
+  /**
+   * A lazy feature bundle to load additional features.
+   * This is useful for reducing bundle size by loading only the necessary features.
+   */
+  loadFeatures?: LazyFeatureBundle;
+}
+/**
+ * **🎬 Spring Motion Config to define motion animations for all UDS components**
+ *
+ * @componentType Client component
+ *
+ * @description
+ * The SpringConfig component provides a way to configure the spring animations for the entire application.
+ * This component provides a way to use uds motion configs with Framer Motion.
+ */
+declare function SpringMotionConfig({
+  children,
+  reducedMotion,
+  loadFeatures,
+  layoutVariant,
+  layoutSpeed,
+  colorVariant,
+  colorSpeed
+}: SpringMotionConfigProps): string | number | boolean | Iterable<react59.ReactNode> | react_jsx_runtime20.JSX.Element | null | undefined;
+declare namespace SpringMotionConfig {
+  var displayName: string;
+}
+//#endregion
+export { SpringMotionConfig, type SpringMotionConfigProps };

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

@@ -0,0 +1,57 @@
+import { MotionVariant, MotionVariantSpeed } from "../../tokens/types.js";
+import "../../tokens/index.js";
+import * as react43 from "react";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
+import { LazyFeatureBundle, MotionConfigProps } from "motion/react";
+
+//#region src/components/client/SpringMotionConfig.d.ts
+interface SpringMotionConfigProps extends Pick<MotionConfigProps, 'children' | 'reducedMotion'> {
+  /**
+   * The layout variant to use for the motion config.
+   * @default 'subtle'
+   */
+  layoutVariant?: MotionVariant;
+  /**
+   * The layout speed to use for the motion config.
+   * @default '3'
+   */
+  layoutSpeed?: MotionVariantSpeed;
+  /**
+   * The color variant to use for the motion config.
+   * @default 'smooth'
+   */
+  colorVariant?: MotionVariant;
+  /**
+   * The color speed to use for the motion config.
+   * @default '3'
+   */
+  colorSpeed?: MotionVariantSpeed;
+  /**
+   * A lazy feature bundle to load additional features.
+   * This is useful for reducing bundle size by loading only the necessary features.
+   */
+  loadFeatures?: LazyFeatureBundle;
+}
+/**
+ * **🎬 Spring Motion Config to define motion animations for all UDS components**
+ *
+ * @componentType Client component
+ *
+ * @description
+ * The SpringConfig component provides a way to configure the spring animations for the entire application.
+ * This component provides a way to use uds motion configs with Framer Motion.
+ */
+declare function SpringMotionConfig({
+  children,
+  reducedMotion,
+  loadFeatures,
+  layoutVariant,
+  layoutSpeed,
+  colorVariant,
+  colorSpeed
+}: SpringMotionConfigProps): string | number | boolean | Iterable<react43.ReactNode> | react_jsx_runtime11.JSX.Element | null | undefined;
+declare namespace SpringMotionConfig {
+  var displayName: string;
+}
+//#endregion
+export { SpringMotionConfig, type SpringMotionConfigProps };

package/dist/components/client/SpringMotionConfig.js

@@ -0,0 +1,98 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { motion } from "../../tokens/configs/motion.js";
+import { getMotionVar } from "../../utils/getMotionVar.js";
+import { useAvoidMotionLibrary } from "../experimental/client/AvoidMotionLibraryProvider.js";
+import { useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { LazyMotion, MotionConfig } from "motion/react";
+
+//#region src/components/client/SpringMotionConfig.tsx
+const LAYOUT_VARIANT = "subtle";
+const LAYOUT_SPEED = "3";
+const COLOR_VARIANT = "smooth";
+const COLOR_SPEED = "3";
+const defaultLoadFeatures = () => import("@yahoo/uds/__private/motionFeatures/domAnimation").then(({ domAnimation }) => domAnimation);
+/**
+* **🎬 Spring Motion Config to define motion animations for all UDS components**
+*
+* @componentType Client component
+*
+* @description
+* The SpringConfig component provides a way to configure the spring animations for the entire application.
+* This component provides a way to use uds motion configs with Framer Motion.
+*/
+function SpringMotionConfig({ children, reducedMotion = "user", loadFeatures = defaultLoadFeatures, layoutVariant = LAYOUT_VARIANT, layoutSpeed = LAYOUT_SPEED, colorVariant = COLOR_VARIANT, colorSpeed = COLOR_SPEED }) {
+	const initialLayoutConfig = motion[layoutVariant][layoutSpeed];
+	const initialColorConfig = motion[colorVariant][colorSpeed];
+	const [layoutConfig, setLayoutConfig] = useState(initialLayoutConfig);
+	const [colorConfig, setColorConfig] = useState(initialColorConfig);
+	const colorVarConfig = {
+		variant: colorVariant,
+		speed: colorSpeed
+	};
+	const colorStiffnessVar = getMotionVar({
+		...colorVarConfig,
+		control: "stiffness"
+	});
+	const colorDampingVar = getMotionVar({
+		...colorVarConfig,
+		control: "damping"
+	});
+	const layoutVarConfig = {
+		variant: layoutVariant,
+		speed: layoutSpeed
+	};
+	const layoutStiffnessVar = getMotionVar({
+		...layoutVarConfig,
+		control: "stiffness"
+	});
+	const layoutDampingVar = getMotionVar({
+		...layoutVarConfig,
+		control: "damping"
+	});
+	useEffect(() => {
+		const globalComputedStyles = getComputedStyle(document.documentElement);
+		const layoutValues = {
+			type: "spring",
+			damping: Number(globalComputedStyles.getPropertyValue(layoutDampingVar)),
+			stiffness: Number(globalComputedStyles.getPropertyValue(layoutStiffnessVar))
+		};
+		const colorValues = {
+			type: "spring",
+			damping: Number(globalComputedStyles.getPropertyValue(colorDampingVar)),
+			stiffness: Number(globalComputedStyles.getPropertyValue(colorStiffnessVar))
+		};
+		setLayoutConfig(layoutValues);
+		setColorConfig(colorValues);
+	}, [
+		colorDampingVar,
+		colorStiffnessVar,
+		layoutDampingVar,
+		layoutStiffnessVar
+	]);
+	const transition = useMemo(() => ({
+		type: "spring",
+		mass: 1,
+		...layoutConfig,
+		layout: layoutConfig,
+		opacity: colorConfig,
+		color: colorConfig,
+		borderColor: colorConfig,
+		backgroundColor: colorConfig
+	}), [colorConfig, layoutConfig]);
+	if (useAvoidMotionLibrary()) return children;
+	return /* @__PURE__ */ jsx(LazyMotion, {
+		features: loadFeatures,
+		strict: true,
+		children: /* @__PURE__ */ jsx(MotionConfig, {
+			transition,
+			reducedMotion,
+			children
+		})
+	});
+}
+SpringMotionConfig.displayName = "SpringMotionConfig";
+
+//#endregion
+export { SpringMotionConfig };