@yahoo/uds 3.159.1 → 3.160.0

package/dist/components/experimental/client/SwitchV2.cjs

@@ -1,190 +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_IconSlot = require("../../IconSlot.cjs");
-const require_components_Box = require("../../Box.cjs");
-const require_components_FormLabel = require("../../FormLabel.cjs");
-const require_components_experimental_client_AvoidMotionLibraryProvider = require("./AvoidMotionLibraryProvider.cjs");
-const require_components_client_SpringMotionConfig = require("../../client/SpringMotionConfig.cjs");
-let react = require("react");
-react = require_runtime.__toESM(react);
-let react_jsx_runtime = require("react/jsx-runtime");
-let motion_react_m = require("motion/react-m");
-motion_react_m = require_runtime.__toESM(motion_react_m);
-//#region src/components/experimental/client/SwitchV2.tsx
-const loadFeatures = () => import("@yahoo/uds/__private/motionFeatures/domMax").then(({ domMax }) => domMax);
-const MotionBox = motion_react_m.create(require_components_Box.Box);
-/**
-* **⚙️️ An switch.
-*
-* @componentType Client component
-*
-* @description
-* A switch (also called a toggle) is a binary on/off input control. It is clickable or touchable on mobile devices allowing users to pick between two clearly opposite choices.
-*
-* @see
-* Check out the {@link https://uds.build/docs/components/switch Switch Docs} for more info
-*
-* @usage
-* - Forms: switch
-*
-* @example
-* ```tsx
-* 'use client';
-* import { Switch } from "@yahoo/uds";
-*
-* <Switch label="Name" required />
-*```
-*
-* @related [Checkbox](https://uds.build/docs/components/checkbox).
-**/
-const SwitchV2 = (0, react.forwardRef)(function Switch({ id, isOn: isOnProp, defaultIsOn, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, reduceMotion: forceReduceMotion, disabled, required, onFocus, onBlur, className, slotProps, ...switchProps }, parentRef) {
-	const generatedId = (0, react.useId)();
-	const uid = id ?? `uds-input-${generatedId}`;
-	const rootSlotProps = slotProps?.root ?? {};
-	const switchSlotProps = slotProps?.switch ?? {};
-	const handleSlotProps = slotProps?.handle ?? {};
-	const labelSlotProps = slotProps?.label ?? {};
-	const innerRef = (0, react.useRef)(null);
-	/**
-	* State
-	*/
-	const isControlled = isOnProp !== void 0;
-	const [isOn, setIsOn] = (0, react.useState)(isControlled ? isOnProp : defaultIsOn);
-	/**
-	* Handlers
-	*/
-	const handleChange = (0, react.useCallback)((e) => {
-		onChange?.(e);
-		if (!isControlled) setIsOn(e.target.checked);
-	}, [isControlled, onChange]);
-	const handleFocus = (0, react.useCallback)((e) => {
-		onFocus?.(e);
-	}, [onFocus]);
-	const handleBlur = (0, react.useCallback)((e) => {
-		onBlur?.(e);
-	}, [onBlur]);
-	const reduceMotion = forceReduceMotion ? "always" : "user";
-	const cssAnimationDuration = forceReduceMotion ? "duration-0" : "duration-120 motion-reduce:duration-0";
-	/**
-	* Effects
-	*/
-	(0, react.useEffect)(() => {
-		if (isControlled) setIsOn(isOnProp);
-	}, [isOnProp, isControlled]);
-	const classNames = {
-		root: require_styles_styler.getStyles({
-			switchSizeRoot: size,
-			switchVariantRoot: "default",
-			switchVariantActiveRoot: isOn ? "on" : "off",
-			className: require_styles_styler.cx("group", "flex", "items-center", labelPosition === "start" ? "flex-row" : "flex-row-reverse", ...disabled ? ["cursor-default", "opacity-50"] : ["cursor-pointer"], className)
-		}),
-		switch: require_styles_styler.getStyles({
-			switchVariantSwitch: "default",
-			switchSizeSwitch: size,
-			switchVariantActiveSwitch: isOn ? "on" : "off",
-			className: require_styles_styler.cx("uds-ring", "uds-ring-within", "relative", "uds-border-radius-full", "items-center", cssAnimationDuration, "transition-[background-color,box-shadow]")
-		}),
-		handleContainer: require_styles_styler.cx("pointer-events-none", "relative", "w-full", "h-full"),
-		handle: require_styles_styler.getStyles({
-			switchSizeHandle: size,
-			className: require_styles_styler.cx("absolute", "top-0", "bottom-0", isOn ? "right-0" : "left-0")
-		}),
-		handleContents: require_styles_styler.cx("relative", "w-full", "h-full", "uds-border-radius-full", "overflow-hidden", !disabled && "group-hover:scale-105", "opacity-95", !disabled && "group-hover:opacity-100", cssAnimationDuration, "transition-[transform,opacity]"),
-		handleCircle: require_styles_styler.getStyles({
-			switchVariantActiveHandle: isOn ? "on" : "off",
-			switchVariantHandle: "default",
-			className: require_styles_styler.cx("absolute", "top-0", "left-0", "right-0", "bottom-0")
-		}),
-		handleIcon: require_styles_styler.getStyles({
-			switchSizeHandleIcon: size,
-			switchVariantHandleIcon: "default",
-			switchVariantActiveHandleIcon: isOn ? "on" : "off",
-			className: require_styles_styler.cx("absolute", "opacity-0", "top-1/2", "left-1/2", "transform", "translate-x-[-50%]", "translate-y-[-50%]", 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")
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
-		reducedMotion: reduceMotion,
-		loadFeatures,
-		layoutVariant: "bouncy",
-		layoutSpeed: "4",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(label ? "label" : "div", {
-			className: classNames.root,
-			"data-testid": "switch-root",
-			tabIndex: -1,
-			...rootSlotProps,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
-				className: classNames.switch,
-				...switchSlotProps,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-					type: "checkbox",
-					...switchProps,
-					ref: (ref) => {
-						innerRef.current = ref;
-						if (typeof parentRef === "function") parentRef(ref);
-						else if (parentRef !== null) parentRef.current = ref;
-					},
-					onFocus: handleFocus,
-					onBlur: handleBlur,
-					id: uid,
-					disabled,
-					required,
-					checked: isControlled ? isOn : void 0,
-					defaultChecked: isControlled ? void 0 : defaultIsOn,
-					onChange: handleChange,
-					className: classNames.htmlCheckbox,
-					style: {}
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
-					className: classNames.handleContainer,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MotionBox, {
-						className: classNames.handle,
-						layout: "position",
-						layoutDependency: isOn,
-						...handleSlotProps,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
-							className: classNames.handleContents,
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, { className: classNames.handleCircle }),
-								onIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
-									icon: onIcon,
-									iconProps: {
-										variant: "fill",
-										size: "sm"
-									},
-									"data-testid": "on-icon",
-									className: require_styles_styler.cx(classNames.handleIcon, isOn ? "opacity-100" : "opacity-0")
-								}),
-								offIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
-									icon: offIcon,
-									iconProps: {
-										variant: "fill",
-										size: "sm"
-									},
-									"data-testid": "off-icon",
-									className: require_styles_styler.cx(classNames.handleIcon, !isOn ? "opacity-100" : "opacity-0")
-								})
-							]
-						})
-					})
-				})]
-			}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_FormLabel.FormLabel, {
-				as: "div",
-				variant: "inherit",
-				color: "inherit",
-				required,
-				label,
-				className: classNames.label,
-				...labelSlotProps
-			})]
-		})
-	});
-});
-SwitchV2.displayName = "SwitchV2";
-const SwitchV2AvoidMotionLibraryProvider = require_components_experimental_client_AvoidMotionLibraryProvider.AvoidMotionLibraryProvider;
-//#endregion
-exports.SwitchV2 = SwitchV2;
-exports.SwitchV2AvoidMotionLibraryProvider = SwitchV2AvoidMotionLibraryProvider;

package/dist/components/experimental/client/SwitchV2.d.cts

@@ -1,46 +0,0 @@
-
-import { UniversalSwitchProps } from "../../../types/dist/index.cjs";
-import React from "react";
-
-//#region src/components/experimental/client/SwitchV2.d.ts
-type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'size' | 'height' | 'width' | 'color' | 'defaultChecked' | 'children'>;
-type DataAttributes = {
-  [name: `data-${string}`]: string;
-};
-interface SwitchV2Props extends NativeInputProps, UniversalSwitchProps {
-  /** Props to be passed into various slots within the component. */
-  slotProps?: {
-    root?: DataAttributes;
-    switch?: DataAttributes;
-    handle?: DataAttributes;
-    label?: DataAttributes;
-  };
-}
-/**
- * **⚙️️ An switch.
- *
- * @componentType Client component
- *
- * @description
- * A switch (also called a toggle) is a binary on/off input control. It is clickable or touchable on mobile devices allowing users to pick between two clearly opposite choices.
- *
- * @see
- * Check out the {@link https://uds.build/docs/components/switch Switch Docs} for more info
- *
- * @usage
- * - Forms: switch
- *
- * @example
- * ```tsx
- * 'use client';
- * import { Switch } from "@yahoo/uds";
- *
- * <Switch label="Name" required />
- *```
- *
- * @related [Checkbox](https://uds.build/docs/components/checkbox).
- **/
-declare const SwitchV2: React.ForwardRefExoticComponent<SwitchV2Props & React.RefAttributes<HTMLInputElement>>;
-declare const SwitchV2AvoidMotionLibraryProvider: React.Provider<boolean>;
-//#endregion
-export { SwitchV2, SwitchV2AvoidMotionLibraryProvider, type SwitchV2Props };

package/dist/components/experimental/client/SwitchV2.d.ts

@@ -1,47 +0,0 @@
-
-"use client";
-import { UniversalSwitchProps } from "../../../types/dist/index.js";
-import React from "react";
-
-//#region src/components/experimental/client/SwitchV2.d.ts
-type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'size' | 'height' | 'width' | 'color' | 'defaultChecked' | 'children'>;
-type DataAttributes = {
-  [name: `data-${string}`]: string;
-};
-interface SwitchV2Props extends NativeInputProps, UniversalSwitchProps {
-  /** Props to be passed into various slots within the component. */
-  slotProps?: {
-    root?: DataAttributes;
-    switch?: DataAttributes;
-    handle?: DataAttributes;
-    label?: DataAttributes;
-  };
-}
-/**
- * **⚙️️ An switch.
- *
- * @componentType Client component
- *
- * @description
- * A switch (also called a toggle) is a binary on/off input control. It is clickable or touchable on mobile devices allowing users to pick between two clearly opposite choices.
- *
- * @see
- * Check out the {@link https://uds.build/docs/components/switch Switch Docs} for more info
- *
- * @usage
- * - Forms: switch
- *
- * @example
- * ```tsx
- * 'use client';
- * import { Switch } from "@yahoo/uds";
- *
- * <Switch label="Name" required />
- *```
- *
- * @related [Checkbox](https://uds.build/docs/components/checkbox).
- **/
-declare const SwitchV2: React.ForwardRefExoticComponent<SwitchV2Props & React.RefAttributes<HTMLInputElement>>;
-declare const SwitchV2AvoidMotionLibraryProvider: React.Provider<boolean>;
-//#endregion
-export { SwitchV2, SwitchV2AvoidMotionLibraryProvider, type SwitchV2Props };

package/dist/components/experimental/client/SwitchV2.js

@@ -1,185 +0,0 @@
-/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-"use client";
-import { cx, getStyles } from "../../../styles/styler.js";
-import { IconSlot } from "../../IconSlot.js";
-import { Box } from "../../Box.js";
-import { FormLabel } from "../../FormLabel.js";
-import { AvoidMotionLibraryProvider } from "./AvoidMotionLibraryProvider.js";
-import { SpringMotionConfig } from "../../client/SpringMotionConfig.js";
-import { forwardRef, useCallback, useEffect, useId, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import * as m from "motion/react-m";
-//#region src/components/experimental/client/SwitchV2.tsx
-const loadFeatures = () => import("@yahoo/uds/__private/motionFeatures/domMax").then(({ domMax }) => domMax);
-const MotionBox = m.create(Box);
-/**
-* **⚙️️ An switch.
-*
-* @componentType Client component
-*
-* @description
-* A switch (also called a toggle) is a binary on/off input control. It is clickable or touchable on mobile devices allowing users to pick between two clearly opposite choices.
-*
-* @see
-* Check out the {@link https://uds.build/docs/components/switch Switch Docs} for more info
-*
-* @usage
-* - Forms: switch
-*
-* @example
-* ```tsx
-* 'use client';
-* import { Switch } from "@yahoo/uds";
-*
-* <Switch label="Name" required />
-*```
-*
-* @related [Checkbox](https://uds.build/docs/components/checkbox).
-**/
-const SwitchV2 = forwardRef(function Switch({ id, isOn: isOnProp, defaultIsOn, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, reduceMotion: forceReduceMotion, disabled, required, onFocus, onBlur, className, slotProps, ...switchProps }, parentRef) {
-	const generatedId = useId();
-	const uid = id ?? `uds-input-${generatedId}`;
-	const rootSlotProps = slotProps?.root ?? {};
-	const switchSlotProps = slotProps?.switch ?? {};
-	const handleSlotProps = slotProps?.handle ?? {};
-	const labelSlotProps = slotProps?.label ?? {};
-	const innerRef = useRef(null);
-	/**
-	* State
-	*/
-	const isControlled = isOnProp !== void 0;
-	const [isOn, setIsOn] = useState(isControlled ? isOnProp : defaultIsOn);
-	/**
-	* Handlers
-	*/
-	const handleChange = useCallback((e) => {
-		onChange?.(e);
-		if (!isControlled) setIsOn(e.target.checked);
-	}, [isControlled, onChange]);
-	const handleFocus = useCallback((e) => {
-		onFocus?.(e);
-	}, [onFocus]);
-	const handleBlur = useCallback((e) => {
-		onBlur?.(e);
-	}, [onBlur]);
-	const reduceMotion = forceReduceMotion ? "always" : "user";
-	const cssAnimationDuration = forceReduceMotion ? "duration-0" : "duration-120 motion-reduce:duration-0";
-	/**
-	* Effects
-	*/
-	useEffect(() => {
-		if (isControlled) setIsOn(isOnProp);
-	}, [isOnProp, isControlled]);
-	const classNames = {
-		root: getStyles({
-			switchSizeRoot: size,
-			switchVariantRoot: "default",
-			switchVariantActiveRoot: isOn ? "on" : "off",
-			className: cx("group", "flex", "items-center", labelPosition === "start" ? "flex-row" : "flex-row-reverse", ...disabled ? ["cursor-default", "opacity-50"] : ["cursor-pointer"], className)
-		}),
-		switch: getStyles({
-			switchVariantSwitch: "default",
-			switchSizeSwitch: size,
-			switchVariantActiveSwitch: isOn ? "on" : "off",
-			className: cx("uds-ring", "uds-ring-within", "relative", "uds-border-radius-full", "items-center", cssAnimationDuration, "transition-[background-color,box-shadow]")
-		}),
-		handleContainer: cx("pointer-events-none", "relative", "w-full", "h-full"),
-		handle: getStyles({
-			switchSizeHandle: size,
-			className: cx("absolute", "top-0", "bottom-0", isOn ? "right-0" : "left-0")
-		}),
-		handleContents: cx("relative", "w-full", "h-full", "uds-border-radius-full", "overflow-hidden", !disabled && "group-hover:scale-105", "opacity-95", !disabled && "group-hover:opacity-100", cssAnimationDuration, "transition-[transform,opacity]"),
-		handleCircle: getStyles({
-			switchVariantActiveHandle: isOn ? "on" : "off",
-			switchVariantHandle: "default",
-			className: cx("absolute", "top-0", "left-0", "right-0", "bottom-0")
-		}),
-		handleIcon: getStyles({
-			switchSizeHandleIcon: size,
-			switchVariantHandleIcon: "default",
-			switchVariantActiveHandleIcon: isOn ? "on" : "off",
-			className: cx("absolute", "opacity-0", "top-1/2", "left-1/2", "transform", "translate-x-[-50%]", "translate-y-[-50%]", 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")
-	};
-	return /* @__PURE__ */ jsx(SpringMotionConfig, {
-		reducedMotion: reduceMotion,
-		loadFeatures,
-		layoutVariant: "bouncy",
-		layoutSpeed: "4",
-		children: /* @__PURE__ */ jsxs(label ? "label" : "div", {
-			className: classNames.root,
-			"data-testid": "switch-root",
-			tabIndex: -1,
-			...rootSlotProps,
-			children: [/* @__PURE__ */ jsxs(Box, {
-				className: classNames.switch,
-				...switchSlotProps,
-				children: [/* @__PURE__ */ jsx("input", {
-					type: "checkbox",
-					...switchProps,
-					ref: (ref) => {
-						innerRef.current = ref;
-						if (typeof parentRef === "function") parentRef(ref);
-						else if (parentRef !== null) parentRef.current = ref;
-					},
-					onFocus: handleFocus,
-					onBlur: handleBlur,
-					id: uid,
-					disabled,
-					required,
-					checked: isControlled ? isOn : void 0,
-					defaultChecked: isControlled ? void 0 : defaultIsOn,
-					onChange: handleChange,
-					className: classNames.htmlCheckbox,
-					style: {}
-				}), /* @__PURE__ */ jsx(Box, {
-					className: classNames.handleContainer,
-					children: /* @__PURE__ */ jsx(MotionBox, {
-						className: classNames.handle,
-						layout: "position",
-						layoutDependency: isOn,
-						...handleSlotProps,
-						children: /* @__PURE__ */ jsxs(Box, {
-							className: classNames.handleContents,
-							children: [
-								/* @__PURE__ */ jsx(Box, { className: classNames.handleCircle }),
-								onIcon && /* @__PURE__ */ jsx(IconSlot, {
-									icon: onIcon,
-									iconProps: {
-										variant: "fill",
-										size: "sm"
-									},
-									"data-testid": "on-icon",
-									className: cx(classNames.handleIcon, isOn ? "opacity-100" : "opacity-0")
-								}),
-								offIcon && /* @__PURE__ */ jsx(IconSlot, {
-									icon: offIcon,
-									iconProps: {
-										variant: "fill",
-										size: "sm"
-									},
-									"data-testid": "off-icon",
-									className: cx(classNames.handleIcon, !isOn ? "opacity-100" : "opacity-0")
-								})
-							]
-						})
-					})
-				})]
-			}), label && /* @__PURE__ */ jsx(FormLabel, {
-				as: "div",
-				variant: "inherit",
-				color: "inherit",
-				required,
-				label,
-				className: classNames.label,
-				...labelSlotProps
-			})]
-		})
-	});
-});
-SwitchV2.displayName = "SwitchV2";
-const SwitchV2AvoidMotionLibraryProvider = AvoidMotionLibraryProvider;
-//#endregion
-export { SwitchV2, SwitchV2AvoidMotionLibraryProvider };