@yahoo/uds 3.66.0 → 3.67.0-beta.1

package/dist/components/client/Button.js

@@ -0,0 +1,308 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { BUTTON_GAP_VAR, BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED, BUTTON_SCALE_EFFECT_REST } from "../../tokens/consts/cssTokens.js";
+import { cx, getStyles } from "../../styles/styler.js";
+import { createSlot } from "../../utils/createSlot.js";
+import { Icon } from "../Icon.js";
+import { IconSlot } from "../IconSlot.js";
+import { generateDefaultClassName } from "../../tokens/automation/utils/index.js";
+import { SpringMotionConfig } from "./SpringMotionConfig.js";
+import React, { cloneElement, forwardRef, isValidElement, useImperativeHandle, useMemo, useRef } from "react";
+import { buttonIconSvgSize } from "@yahoo/uds/fixtures";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Progress } from "@yahoo/uds-icons";
+import { AnimatePresence, m, useReducedMotion } from "motion/react";
+
+//#region src/components/client/Button.tsx
+const iconContainerMotionVariants = {
+	hide: {
+		display: "none",
+		width: "0px",
+		opacity: 0
+	},
+	loading: {
+		display: "flex",
+		width: "auto",
+		opacity: 1
+	},
+	icon: {
+		display: "flex",
+		width: "auto",
+		opacity: 1
+	}
+};
+const SCALE_DOWN = .7;
+const hiddenState = {
+	scale: SCALE_DOWN,
+	opacity: 0
+};
+const visibleState = {
+	scale: [
+		SCALE_DOWN,
+		SCALE_DOWN,
+		1
+	],
+	opacity: [
+		0,
+		0,
+		1
+	],
+	transition: { times: [
+		0,
+		.5,
+		1
+	] }
+};
+const iconMotionVariants = {
+	hide: hiddenState,
+	icon: visibleState,
+	loading: hiddenState
+};
+const loadingMotionVariants = {
+	hide: hiddenState,
+	icon: hiddenState,
+	loading: visibleState
+};
+function getGapVariant({ startIcon, endIcon, loading }) {
+	if (loading || startIcon || endIcon) return "withIcon";
+	return "withoutIcon";
+}
+function getStartVariant({ loading, startIcon }) {
+	if (loading) return "loading";
+	if (startIcon) return "icon";
+	return "hide";
+}
+const defaultVariantRootClass = generateDefaultClassName("button", "variant", "root");
+const defaultVariantIconClass = generateDefaultClassName("button", "variant", "icon");
+const defaultSizeRootClass = generateDefaultClassName("button", "size", "root");
+const defaultSizeIconClass = generateDefaultClassName("button", "size", "icon");
+/**
+* **🖲️ A button element that can be used to trigger an action**
+*
+* @componentType Client component
+*
+* @description A button is a fundamental component used to trigger an action or event. Buttons are interactive elements that users can click, tap, or otherwise engage with to submit forms, open dialogues, or perform any other interaction within an application or website. Consider an IconButton for buttons that only contain an icon.
+*
+* @see The {@link https://uds.build/docs/components/button Button Docs} for more info
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Button, HStack } from "@yahoo/uds";
+*
+* export function Demo() {
+*   return (
+*     <HStack gap="2">
+*       <Button onClick={console.log}>Save</Button>
+*       <Button variant="secondary" onClick={console.log}>Cancel</Button>
+*     </HStack>
+*   )
+* }
+* ```
+*
+* @usage
+* Buttons should be used to clearly indicate and initiate actions that users can take.
+*
+* @related [Icon](https://uds.build/docs/components/icon), [IconButton](https://uds.build/docs/components/icon-button), [Pressable](https://uds.build/docs/components/pressable)
+**/
+const Button = forwardRef(function Button$1({ size, variant, startIcon, endIcon, iconVariant, loading, disableEffects, children, asChild = false, type = "button", className, width, ...rest }, forwardedRef) {
+	const ref = useRef(null);
+	useImperativeHandle(forwardedRef, () => ref.current);
+	const prefersReducedMotion = useReducedMotion();
+	const disableMotion = !!disableEffects || !!rest?.disabled;
+	const layoutVariant = prefersReducedMotion ? "smooth" : "subtle";
+	const endVariant = endIcon ? "icon" : "hide";
+	const gapVariant = getGapVariant({
+		startIcon,
+		endIcon,
+		loading
+	});
+	const startVariant = getStartVariant({
+		loading,
+		startIcon
+	});
+	const Slot = useMemo(() => createSlot(), []);
+	const MotionSlot = useMemo(() => m.create(Slot), [Slot]);
+	const buttonVariants = useMemo(() => ({
+		rest: { scale: disableMotion ? 1 : `var(${BUTTON_SCALE_EFFECT_REST})` },
+		hover: { scale: disableMotion ? 1 : `var(${BUTTON_SCALE_EFFECT_HOVER})` },
+		pressed: { scale: disableMotion ? 1 : `var(${BUTTON_SCALE_EFFECT_PRESSED})` },
+		withIcon: { columnGap: `var(${BUTTON_GAP_VAR})` },
+		withoutIcon: { columnGap: "0px" }
+	}), [disableMotion]);
+	const rootSizeClass = useMemo(() => size ? getStyles({ buttonSizeRoot: size }) : defaultSizeRootClass, [size]);
+	const rootVariantClass = useMemo(() => variant ? getStyles({ buttonVariantRoot: variant }) : defaultVariantRootClass, [variant]);
+	const iconSizeClass = useMemo(() => size ? getStyles({ buttonSizeIcon: size }) : defaultSizeIconClass, [size]);
+	const iconVariantClass = useMemo(() => variant ? getStyles({ buttonVariantIcon: variant }) : defaultVariantIconClass, [variant]);
+	const styles = useMemo(() => ({
+		root: getStyles({
+			width,
+			className: cx([
+				"uds-ring",
+				"uds-hit-target",
+				"inline-flex overflow-hidden justify-center items-center whitespace-nowrap select-none",
+				"[transform-origin:center]",
+				"[backface-visibility:hidden]",
+				"[transition-property:color,background-color,border-color,box-shadow,text-decoration-color,fill,stroke]",
+				"[transition-timing-function:cubic-bezier(0,0,0.2,1)]",
+				"[transition-duration:220ms]",
+				rootSizeClass,
+				rootVariantClass,
+				rest?.disabled && "cursor-not-allowed",
+				loading && "uds-button-loading",
+				disableEffects && "uds-button-without-effects",
+				gapVariant === "withIcon" && "uds-button-with-gap",
+				className
+			])
+		}),
+		iconContainer: "flex overflow-clip uds-button-icon-container",
+		icon: getStyles({ className: cx([iconSizeClass, iconVariantClass]) }),
+		loadingIcon: getStyles({ className: cx([
+			"animate-spin",
+			iconSizeClass,
+			iconVariantClass
+		]) }),
+		content: cx(["truncate"])
+	}), [
+		className,
+		disableEffects,
+		gapVariant,
+		iconSizeClass,
+		iconVariantClass,
+		loading,
+		rest?.disabled,
+		rootSizeClass,
+		rootVariantClass,
+		width
+	]);
+	const startContent = useMemo(() => /* @__PURE__ */ jsx(m.span, {
+		className: styles.iconContainer,
+		initial: false,
+		variants: iconContainerMotionVariants,
+		animate: startVariant,
+		children: /* @__PURE__ */ jsxs(AnimatePresence, {
+			initial: false,
+			mode: "popLayout",
+			children: [loading && /* @__PURE__ */ jsx(m.span, {
+				variants: loadingMotionVariants,
+				initial: "hide",
+				animate: "loading",
+				exit: "hide",
+				children: /* @__PURE__ */ jsx(Icon, {
+					className: styles.loadingIcon,
+					size: buttonIconSvgSize,
+					name: Progress,
+					variant: iconVariant,
+					color: "current"
+				})
+			}, "loading"), startIcon && !loading && /* @__PURE__ */ jsx(m.span, {
+				variants: iconMotionVariants,
+				initial: "hide",
+				animate: "icon",
+				exit: "hide",
+				children: /* @__PURE__ */ jsx(IconSlot, {
+					className: styles.icon,
+					icon: startIcon,
+					iconProps: {
+						size: buttonIconSvgSize,
+						variant: iconVariant,
+						color: "current"
+					}
+				})
+			})]
+		})
+	}), [
+		styles,
+		iconVariant,
+		loading,
+		startIcon,
+		startVariant
+	]);
+	const endContent = useMemo(() => /* @__PURE__ */ jsx(m.span, {
+		className: styles.iconContainer,
+		initial: false,
+		variants: iconContainerMotionVariants,
+		animate: endVariant,
+		children: /* @__PURE__ */ jsx(AnimatePresence, {
+			initial: false,
+			mode: "popLayout",
+			children: endIcon && /* @__PURE__ */ jsx(m.span, {
+				variants: iconMotionVariants,
+				initial: "hide",
+				animate: "icon",
+				exit: "hide",
+				children: /* @__PURE__ */ jsx(IconSlot, {
+					className: styles.icon,
+					icon: endIcon,
+					iconProps: {
+						size: buttonIconSvgSize,
+						variant: iconVariant,
+						color: "current"
+					}
+				})
+			})
+		})
+	}), [
+		endIcon,
+		styles,
+		iconVariant,
+		endVariant
+	]);
+	if (asChild && isValidElement(children)) return /* @__PURE__ */ jsx(SpringMotionConfig, {
+		layoutSpeed: "3",
+		layoutVariant,
+		children: /* @__PURE__ */ jsx(MotionSlot, {
+			type,
+			className: styles.root,
+			initial: ["rest", gapVariant],
+			animate: [
+				"hide",
+				"rest",
+				gapVariant
+			],
+			variants: buttonVariants,
+			whileHover: "hover",
+			whileTap: "pressed",
+			...rest,
+			children: cloneElement(children, children.props, /* @__PURE__ */ jsxs(Fragment, { children: [
+				startContent,
+				/* @__PURE__ */ jsx("span", {
+					className: styles.content,
+					children: children.props.children
+				}),
+				endContent
+			] }))
+		})
+	});
+	return /* @__PURE__ */ jsx(SpringMotionConfig, {
+		layoutSpeed: "3",
+		layoutVariant,
+		children: /* @__PURE__ */ jsxs(m.button, {
+			ref,
+			type,
+			className: styles.root,
+			initial: ["rest", gapVariant],
+			animate: [
+				"hide",
+				"rest",
+				gapVariant
+			],
+			variants: buttonVariants,
+			whileHover: "hover",
+			whileTap: "pressed",
+			...rest,
+			children: [
+				startContent,
+				/* @__PURE__ */ jsx("span", {
+					className: styles.content,
+					children
+				}),
+				endContent
+			]
+		})
+	});
+});
+Button.displayName = "Button";
+
+//#endregion
+export { Button, iconMotionVariants, loadingMotionVariants };

package/dist/components/client/Checkbox.cjs

@@ -0,0 +1,215 @@
+"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_Icon = require('../Icon.cjs');
+const require_components_client_SpringMotionConfig = require('./SpringMotionConfig.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let __yahoo_uds_icons = require("@yahoo/uds-icons");
+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$1({ id, checked: checkedProp, defaultChecked, onChange, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: forceReduceMotion, disabled, required, hasError, className, layerClassNames, ...checkboxProps }, parentRef) {
+	const generatedId = (0, react.useId)();
+	const uid = id ?? `uds-input-${generatedId}`;
+	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 = (0, motion_react.useReducedMotion)();
+	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, layerClassNames?.root)
+		}),
+		checkbox: require_styles_styler.getStyles({
+			checkboxSizeCheckbox: size,
+			checkboxVariantCheckbox: variant,
+			checkboxVariantValueCheckbox: valueState,
+			className: require_styles_styler.cx("border", "rounded-[4px]", "uds-ring", "uds-ring-within", cssAnimationDuration, "transition-[background-color,border-color,box-shadow]", layerClassNames?.checkbox)
+		}),
+		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", 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",
+				className: classNames.checkbox,
+				alignItems: "center",
+				justifyContent: "center",
+				flex: "none",
+				animate: motionAnimate,
+				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
+				})]
+			}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_FormLabel.FormLabel, {
+				as: "div",
+				variant: "inherit",
+				color: "inherit",
+				required,
+				label,
+				className: classNames.label
+			})]
+		})
+	});
+});
+Checkbox.displayName = "Checkbox";
+
+//#endregion
+exports.Checkbox = Checkbox;
+exports.SIZES = SIZES;
+exports.VARIANTS = VARIANTS;

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

@@ -0,0 +1,42 @@
+import { UniversalCheckboxProps } from "../../tokens/types.cjs";
+import "../../tokens/index.cjs";
+import React from "react";
+
+//#region src/components/client/Checkbox.d.ts
+type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'size' | 'height' | 'width' | 'color'>;
+interface CheckboxProps extends NativeInputProps, UniversalCheckboxProps {
+  layerClassNames?: {
+    root?: string;
+    checkbox?: string;
+    label?: string;
+  };
+}
+declare const VARIANTS: ("primary" | "secondary")[];
+declare const SIZES: ("sm" | "md")[];
+/**
+ * **⚙️️ 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).
+ **/
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { Checkbox, type CheckboxProps, SIZES, VARIANTS };

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

@@ -0,0 +1,42 @@
+import { UniversalCheckboxProps } from "../../tokens/types.js";
+import "../../tokens/index.js";
+import React from "react";
+
+//#region src/components/client/Checkbox.d.ts
+type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'size' | 'height' | 'width' | 'color'>;
+interface CheckboxProps extends NativeInputProps, UniversalCheckboxProps {
+  layerClassNames?: {
+    root?: string;
+    checkbox?: string;
+    label?: string;
+  };
+}
+declare const VARIANTS: ("primary" | "secondary")[];
+declare const SIZES: ("sm" | "md")[];
+/**
+ * **⚙️️ 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).
+ **/
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { Checkbox, type CheckboxProps, SIZES, VARIANTS };