@yahoo/uds 3.161.0 → 3.162.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yahoo/uds",
   "description": "Yahoo Universal System",
-  "version": "3.161.0",
+  "version": "3.162.0",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

package/dist/components/client/Checkbox.cjs

@@ -1,224 +0,0 @@
-/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-"use client";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
-const require_styles_styler = require("../../styles/styler.cjs");
-const require_components_Icon = require("../Icon.cjs");
-const require_components_Box = require("../Box.cjs");
-const require_components_FormLabel = require("../FormLabel.cjs");
-const require_hooks_usePrefersReducedMotion = require("../../hooks/usePrefersReducedMotion.cjs");
-const require_components_client_SpringMotionConfig = require("./SpringMotionConfig.cjs");
-let _yahoo_uds_icons = require("@yahoo/uds-icons");
-let react = require("react");
-react = require_runtime.__toESM(react);
-let react_jsx_runtime = require("react/jsx-runtime");
-let motion_react = require("motion/react");
-//#region src/components/client/Checkbox.tsx
-const VARIANTS = ["primary", "secondary"];
-const SIZES = ["sm", "md"];
-const VARIANT_ERROR_MAP = {
-	primary: "alert",
-	secondary: "alert-secondary"
-};
-const isIndeterminate = (checked) => checked === "indeterminate";
-const getIcon = (checked) => {
-	if (isIndeterminate(checked)) return _yahoo_uds_icons.Minus;
-	return _yahoo_uds_icons.Check;
-};
-const MotionBox = motion_react.m.create(require_components_Box.Box);
-const hoverTransition = {
-	layoutVariant: "smooth",
-	layoutSpeed: "3"
-};
-const pressTransition = {
-	layoutVariant: "veryBouncy",
-	layoutSpeed: "4"
-};
-/**
-* **⚙️️ An checkbox.
-*
-* @componentType Client component
-*
-* @description
-* A checkbox component allows users to select one or multiple options from a set. It represents a binary state, typically as checked or unchecked, and optionally includes a third "indeterminate" state to indicate partial selection.
-*
-* @see
-* Check out the {@link https://uds.build/docs/components/checkbox Checkbox Docs} for more info
-*
-* @usage
-* - Forms: checkbox
-*
-* @example
-* ```tsx
-* 'use client';
-* import { Checkbox } from "@yahoo/uds";
-*
-* <Checkbox label="Name" required />
-*```
-*
-* @related [Radio](https://uds.build/docs/components/radio), [Switch](https://uds.build/docs/components/switch), [Input](https://uds.build/docs/components/input).
-**/
-const Checkbox = (0, react.forwardRef)(function Checkbox({ id, checked: checkedProp, defaultChecked, onChange, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: forceReduceMotion, disabled, required, hasError, className, style, slotProps, ...checkboxProps }, parentRef) {
-	const generatedId = (0, react.useId)();
-	const uid = id ?? `uds-input-${generatedId}`;
-	const rootSlotProps = slotProps?.root ?? {};
-	const checkboxSlotProps = slotProps?.checkbox ?? {};
-	const iconSlotProps = slotProps?.icon ?? {};
-	const labelSlotProps = slotProps?.label ?? {};
-	const innerRef = (0, react.useRef)(null);
-	/**
-	* State
-	*/
-	const isControlled = checkedProp !== void 0;
-	const [checked, setChecked] = (0, react.useState)(isControlled ? 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 = !disabled && isHovered;
-	const showPressedEffect = !disabled && isPressed;
-	const scale = (0, react.useMemo)(() => {
-		if (showPressedEffect) return .9;
-		if (showHoverEffect) return 1.1;
-		return 1;
-	}, [showPressedEffect, showHoverEffect]);
-	const checkOpacity = (0, react.useMemo)(() => {
-		if (!checked) return "opacity-0";
-		if (showPressedEffect) return "opacity-55";
-		return "opacity-100";
-	}, [checked, showPressedEffect]);
-	const motionAnimate = (0, react.useMemo)(() => ({ scale }), [scale]);
-	const motionTransition = (0, react.useMemo)(() => isPressed ? pressTransition : hoverTransition, [isPressed]);
-	/**
-	* Handlers
-	*/
-	const handleChange = (0, react.useCallback)((e) => {
-		onChange?.(e);
-		if (!isControlled) setChecked(e.target.checked);
-	}, [isControlled, onChange]);
-	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);
-	}, []);
-	/**
-	* Helpers
-	*/
-	const setDOMIndeterminate = (checked_) => {
-		if (!innerRef.current) return;
-		innerRef.current.indeterminate = isIndeterminate(checked_);
-	};
-	const prefersReducedMotion = require_hooks_usePrefersReducedMotion.usePrefersReducedMotion();
-	const reduceMotion = forceReduceMotion ? "always" : "user";
-	const cssAnimationDuration = prefersReducedMotion || forceReduceMotion ? "duration-0" : "duration-120";
-	/**
-	* Effects
-	*/
-	(0, react.useEffect)(() => {
-		if (isControlled) setChecked(checkedProp);
-	}, [checkedProp, isControlled]);
-	(0, react.useEffect)(() => {
-		setDOMIndeterminate(checked);
-	}, [checked]);
-	const valueState = isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
-	const classNames = {
-		root: require_styles_styler.getStyles({
-			checkboxSizeRoot: size,
-			checkboxVariantRoot: variant,
-			checkboxVariantValueRoot: valueState,
-			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)
-		}),
-		checkbox: require_styles_styler.getStyles({
-			checkboxSizeCheckbox: size,
-			checkboxVariantCheckbox: variant,
-			checkboxVariantValueCheckbox: valueState,
-			className: require_styles_styler.cx("uds-ring", "uds-ring-within", cssAnimationDuration, "transition-[background-color,border-color,box-shadow]")
-		}),
-		check: require_styles_styler.getStyles({
-			checkboxVariantCheckboxIcon: variant,
-			checkboxVariantValueCheckboxIcon: valueState,
-			className: require_styles_styler.cx("pointer-events-none", checkOpacity, cssAnimationDuration, "transition-opacity")
-		}),
-		htmlCheckbox: 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")
-	};
-	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",
-			style,
-			onHoverStart: handleHoverStart,
-			onHoverEnd: handleHoverEnd,
-			onTapStart: handleTapStart,
-			onTap: handleTapEnd,
-			onTapCancel: handleTapEnd,
-			tabIndex: -1,
-			...rootSlotProps,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MotionBox, {
-				position: "relative",
-				className: classNames.checkbox,
-				alignItems: "center",
-				justifyContent: "center",
-				flex: "none",
-				animate: motionAnimate,
-				...checkboxSlotProps,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-					type: "checkbox",
-					tabIndex: 0,
-					...checkboxProps,
-					ref: (ref) => {
-						innerRef.current = ref;
-						setDOMIndeterminate(checked);
-						if (typeof parentRef === "function") parentRef(ref);
-						else if (parentRef !== null) parentRef.current = ref;
-					},
-					id: uid,
-					disabled,
-					required,
-					"aria-invalid": hasError,
-					checked: isControlled ? isIndeterminate(checked) ? false : checked : void 0,
-					defaultChecked: isControlled ? void 0 : defaultChecked,
-					onChange: handleChange,
-					className: classNames.htmlCheckbox
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
-					name: getIcon(checked),
-					size: "sm",
-					className: classNames.check,
-					...iconSlotProps
-				})]
-			}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_FormLabel.FormLabel, {
-				as: "div",
-				variant: "inherit",
-				color: "inherit",
-				required,
-				label,
-				className: classNames.label,
-				...labelSlotProps
-			})]
-		})
-	});
-});
-Checkbox.displayName = "Checkbox";
-//#endregion
-exports.Checkbox = Checkbox;
-exports.SIZES = SIZES;
-exports.VARIANTS = VARIANTS;

package/dist/components/client/Checkbox.js

@@ -1,219 +0,0 @@
-/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-"use client";
-import { cx, getStyles } from "../../styles/styler.js";
-import { Icon } from "../Icon.js";
-import { Box } from "../Box.js";
-import { FormLabel } from "../FormLabel.js";
-import { usePrefersReducedMotion } from "../../hooks/usePrefersReducedMotion.js";
-import { SpringMotionConfig } from "./SpringMotionConfig.js";
-import { Check, Minus } from "@yahoo/uds-icons";
-import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { m } from "motion/react";
-//#region src/components/client/Checkbox.tsx
-const VARIANTS = ["primary", "secondary"];
-const SIZES = ["sm", "md"];
-const VARIANT_ERROR_MAP = {
-	primary: "alert",
-	secondary: "alert-secondary"
-};
-const isIndeterminate = (checked) => checked === "indeterminate";
-const getIcon = (checked) => {
-	if (isIndeterminate(checked)) return Minus;
-	return Check;
-};
-const MotionBox = m.create(Box);
-const hoverTransition = {
-	layoutVariant: "smooth",
-	layoutSpeed: "3"
-};
-const pressTransition = {
-	layoutVariant: "veryBouncy",
-	layoutSpeed: "4"
-};
-/**
-* **⚙️️ An checkbox.
-*
-* @componentType Client component
-*
-* @description
-* A checkbox component allows users to select one or multiple options from a set. It represents a binary state, typically as checked or unchecked, and optionally includes a third "indeterminate" state to indicate partial selection.
-*
-* @see
-* Check out the {@link https://uds.build/docs/components/checkbox Checkbox Docs} for more info
-*
-* @usage
-* - Forms: checkbox
-*
-* @example
-* ```tsx
-* 'use client';
-* import { Checkbox } from "@yahoo/uds";
-*
-* <Checkbox label="Name" required />
-*```
-*
-* @related [Radio](https://uds.build/docs/components/radio), [Switch](https://uds.build/docs/components/switch), [Input](https://uds.build/docs/components/input).
-**/
-const Checkbox = forwardRef(function Checkbox({ id, checked: checkedProp, defaultChecked, onChange, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: forceReduceMotion, disabled, required, hasError, className, style, slotProps, ...checkboxProps }, parentRef) {
-	const generatedId = useId();
-	const uid = id ?? `uds-input-${generatedId}`;
-	const rootSlotProps = slotProps?.root ?? {};
-	const checkboxSlotProps = slotProps?.checkbox ?? {};
-	const iconSlotProps = slotProps?.icon ?? {};
-	const labelSlotProps = slotProps?.label ?? {};
-	const innerRef = useRef(null);
-	/**
-	* State
-	*/
-	const isControlled = checkedProp !== void 0;
-	const [checked, setChecked] = useState(isControlled ? 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 = !disabled && isHovered;
-	const showPressedEffect = !disabled && isPressed;
-	const scale = useMemo(() => {
-		if (showPressedEffect) return .9;
-		if (showHoverEffect) return 1.1;
-		return 1;
-	}, [showPressedEffect, showHoverEffect]);
-	const checkOpacity = useMemo(() => {
-		if (!checked) return "opacity-0";
-		if (showPressedEffect) return "opacity-55";
-		return "opacity-100";
-	}, [checked, showPressedEffect]);
-	const motionAnimate = useMemo(() => ({ scale }), [scale]);
-	const motionTransition = useMemo(() => isPressed ? pressTransition : hoverTransition, [isPressed]);
-	/**
-	* Handlers
-	*/
-	const handleChange = useCallback((e) => {
-		onChange?.(e);
-		if (!isControlled) setChecked(e.target.checked);
-	}, [isControlled, onChange]);
-	const handleHoverStart = useCallback(() => {
-		setIsHovered(true);
-	}, []);
-	const handleHoverEnd = useCallback(() => {
-		setIsHovered(false);
-	}, []);
-	const handleTapStart = useCallback(() => {
-		setIsPressed(true);
-	}, []);
-	const handleTapEnd = useCallback(() => {
-		setIsPressed(false);
-	}, []);
-	/**
-	* Helpers
-	*/
-	const setDOMIndeterminate = (checked_) => {
-		if (!innerRef.current) return;
-		innerRef.current.indeterminate = isIndeterminate(checked_);
-	};
-	const prefersReducedMotion = usePrefersReducedMotion();
-	const reduceMotion = forceReduceMotion ? "always" : "user";
-	const cssAnimationDuration = prefersReducedMotion || forceReduceMotion ? "duration-0" : "duration-120";
-	/**
-	* Effects
-	*/
-	useEffect(() => {
-		if (isControlled) setChecked(checkedProp);
-	}, [checkedProp, isControlled]);
-	useEffect(() => {
-		setDOMIndeterminate(checked);
-	}, [checked]);
-	const valueState = isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
-	const classNames = {
-		root: getStyles({
-			checkboxSizeRoot: size,
-			checkboxVariantRoot: variant,
-			checkboxVariantValueRoot: valueState,
-			display: "flex",
-			flexDirection: labelPosition === "start" ? "row" : "row-reverse",
-			alignItems: "center",
-			className: cx({
-				"cursor-pointer": !disabled,
-				"cursor-default": disabled,
-				"opacity-50": disabled
-			}, className)
-		}),
-		checkbox: getStyles({
-			checkboxSizeCheckbox: size,
-			checkboxVariantCheckbox: variant,
-			checkboxVariantValueCheckbox: valueState,
-			className: cx("uds-ring", "uds-ring-within", cssAnimationDuration, "transition-[background-color,border-color,box-shadow]")
-		}),
-		check: getStyles({
-			checkboxVariantCheckboxIcon: variant,
-			checkboxVariantValueCheckboxIcon: valueState,
-			className: cx("pointer-events-none", checkOpacity, cssAnimationDuration, "transition-opacity")
-		}),
-		htmlCheckbox: 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")
-	};
-	const RootElement = label ? m.label : m.div;
-	return /* @__PURE__ */ jsx(SpringMotionConfig, {
-		reducedMotion: reduceMotion,
-		...motionTransition,
-		children: /* @__PURE__ */ jsxs(RootElement, {
-			className: classNames.root,
-			"data-testid": "container",
-			style,
-			onHoverStart: handleHoverStart,
-			onHoverEnd: handleHoverEnd,
-			onTapStart: handleTapStart,
-			onTap: handleTapEnd,
-			onTapCancel: handleTapEnd,
-			tabIndex: -1,
-			...rootSlotProps,
-			children: [/* @__PURE__ */ jsxs(MotionBox, {
-				position: "relative",
-				className: classNames.checkbox,
-				alignItems: "center",
-				justifyContent: "center",
-				flex: "none",
-				animate: motionAnimate,
-				...checkboxSlotProps,
-				children: [/* @__PURE__ */ jsx("input", {
-					type: "checkbox",
-					tabIndex: 0,
-					...checkboxProps,
-					ref: (ref) => {
-						innerRef.current = ref;
-						setDOMIndeterminate(checked);
-						if (typeof parentRef === "function") parentRef(ref);
-						else if (parentRef !== null) parentRef.current = ref;
-					},
-					id: uid,
-					disabled,
-					required,
-					"aria-invalid": hasError,
-					checked: isControlled ? isIndeterminate(checked) ? false : checked : void 0,
-					defaultChecked: isControlled ? void 0 : defaultChecked,
-					onChange: handleChange,
-					className: classNames.htmlCheckbox
-				}), /* @__PURE__ */ jsx(Icon, {
-					name: getIcon(checked),
-					size: "sm",
-					className: classNames.check,
-					...iconSlotProps
-				})]
-			}), label && /* @__PURE__ */ jsx(FormLabel, {
-				as: "div",
-				variant: "inherit",
-				color: "inherit",
-				required,
-				label,
-				className: classNames.label,
-				...labelSlotProps
-			})]
-		})
-	});
-});
-Checkbox.displayName = "Checkbox";
-//#endregion
-export { Checkbox, SIZES, VARIANTS };