@yahoo/uds 3.159.1 → 3.160.0

package/dist/components/client/IconButton/IconButtonBase.cjs

@@ -0,0 +1,68 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_styles_styler = require("../../../styles/styler.cjs");
+const require_utils_createSlot = require("../../../utils/createSlot.cjs");
+const require_generateDefaultClassName = require("../../../automated-config/dist/utils/generateDefaultClassName.cjs");
+let react = require("react");
+//#region src/components/client/IconButton/IconButtonBase.tsx
+const defaultSizeRootClass = require_generateDefaultClassName.generateDefaultClassName("iconbutton", "size", "root");
+const defaultSizeIconClass = require_generateDefaultClassName.generateDefaultClassName("iconbutton", "size", "icon");
+const defaultVariantRootClass = require_generateDefaultClassName.generateDefaultClassName("button", "variant", "root");
+const defaultVariantIconClass = require_generateDefaultClassName.generateDefaultClassName("button", "variant", "icon");
+const IconButtonBase = (0, react.forwardRef)(function IconButtonBase({ variant, size, iconVariant, loading, disableEffects, name, asChild = false, slotProps, type = "button", htmlName, className, children, renderIconContent, renderRoot, ...rest }, forwardedRef) {
+	const { className: iconSlotClassName, ...iconSlotProps } = slotProps?.icon ?? {};
+	const Slot = (0, react.useMemo)(() => require_utils_createSlot.createSlot(), []);
+	const rootSizeClass = (0, react.useMemo)(() => size ? require_styles_styler.getStyles({ iconbuttonSizeRoot: size }) : defaultSizeRootClass, [size]);
+	const rootVariantClass = (0, react.useMemo)(() => variant ? require_styles_styler.getStyles({ buttonVariantRoot: variant }) : defaultVariantRootClass, [variant]);
+	const iconSizeClass = (0, react.useMemo)(() => size ? require_styles_styler.getStyles({ iconbuttonSizeIcon: size }) : defaultSizeIconClass, [size]);
+	const iconVariantClass = (0, react.useMemo)(() => variant ? require_styles_styler.getStyles({ buttonVariantIcon: variant }) : defaultVariantIconClass, [variant]);
+	const styles = (0, react.useMemo)(() => ({
+		root: require_styles_styler.cx("uds-ring", "uds-hit-target", "inline-flex overflow-hidden justify-center items-center", "[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", className),
+		icon: require_styles_styler.getStyles({ className: require_styles_styler.cx(iconSizeClass, iconVariantClass) }),
+		loadingIcon: require_styles_styler.getStyles({ className: require_styles_styler.cx([
+			"animate-spin",
+			iconSizeClass,
+			iconVariantClass
+		]) })
+	}), [
+		className,
+		disableEffects,
+		iconSizeClass,
+		iconVariantClass,
+		loading,
+		rest?.disabled,
+		rootSizeClass,
+		rootVariantClass
+	]);
+	return renderRoot({
+		asChild,
+		Slot,
+		children,
+		buttonRef: forwardedRef,
+		type,
+		htmlName,
+		rootClassName: styles.root,
+		rest,
+		iconContent: renderIconContent({
+			asChild,
+			loading,
+			name,
+			iconVariant,
+			children,
+			iconClassName: styles.icon,
+			loadingIconClassName: styles.loadingIcon,
+			iconSlotClassName,
+			iconSlotProps
+		})
+	});
+});
+IconButtonBase.displayName = "IconButtonBase";
+function renderIconButtonAsChild(children, content) {
+	const childProps = children.props;
+	return (0, react.cloneElement)(children, childProps, content);
+}
+//#endregion
+exports.IconButtonBase = IconButtonBase;
+exports.renderIconButtonAsChild = renderIconButtonAsChild;

package/dist/components/client/IconButton/IconButtonBase.d.cts

@@ -0,0 +1,45 @@
+
+import { IconPropsWithSVGProps, UniversalIconButtonProps } from "../../../tokens/types.cjs";
+import * as _$react from "react";
+import { ForwardRefExoticComponent } from "react";
+
+//#region src/components/client/IconButton/IconButtonBase.d.ts
+type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'>;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface IconButtonProps extends HtmlButtonProps, UniversalIconButtonProps {
+  slotProps?: {
+    icon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+  };
+}
+type IconButtonRenderArgs = {
+  asChild: boolean;
+  loading?: boolean;
+  name?: IconButtonProps['name'];
+  iconVariant: IconButtonProps['iconVariant'];
+  children: React.ReactNode;
+  iconClassName: string;
+  loadingIconClassName: string;
+  iconSlotClassName?: string;
+  iconSlotProps: Partial<IconPropsWithSVGProps & DataAttributes>;
+};
+type IconButtonRootRenderArgs = {
+  asChild: boolean;
+  Slot: ForwardRefExoticComponent<HtmlButtonProps>;
+  children: React.ReactNode;
+  buttonRef: React.ForwardedRef<HTMLButtonElement>;
+  type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
+  htmlName?: string;
+  rootClassName: string;
+  rest: Record<string, unknown>;
+  iconContent: React.ReactNode;
+};
+interface IconButtonBaseProps extends IconButtonProps {
+  renderIconContent: (args: IconButtonRenderArgs) => React.ReactNode;
+  renderRoot: (args: IconButtonRootRenderArgs) => React.ReactNode;
+}
+declare const IconButtonBase: ForwardRefExoticComponent<IconButtonBaseProps & _$react.RefAttributes<HTMLButtonElement>>;
+declare function renderIconButtonAsChild(children: React.ReactNode, content: React.ReactNode): _$react.ReactElement<unknown, string | _$react.JSXElementConstructor<any>>;
+//#endregion
+export { IconButtonBase, type IconButtonProps, type IconButtonRootRenderArgs, renderIconButtonAsChild };

package/dist/components/client/IconButton/IconButtonBase.d.ts

@@ -0,0 +1,46 @@
+
+"use client";
+import { IconPropsWithSVGProps, UniversalIconButtonProps } from "../../../tokens/types.js";
+import * as _$react from "react";
+import { ForwardRefExoticComponent } from "react";
+
+//#region src/components/client/IconButton/IconButtonBase.d.ts
+type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'>;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface IconButtonProps extends HtmlButtonProps, UniversalIconButtonProps {
+  slotProps?: {
+    icon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+  };
+}
+type IconButtonRenderArgs = {
+  asChild: boolean;
+  loading?: boolean;
+  name?: IconButtonProps['name'];
+  iconVariant: IconButtonProps['iconVariant'];
+  children: React.ReactNode;
+  iconClassName: string;
+  loadingIconClassName: string;
+  iconSlotClassName?: string;
+  iconSlotProps: Partial<IconPropsWithSVGProps & DataAttributes>;
+};
+type IconButtonRootRenderArgs = {
+  asChild: boolean;
+  Slot: ForwardRefExoticComponent<HtmlButtonProps>;
+  children: React.ReactNode;
+  buttonRef: React.ForwardedRef<HTMLButtonElement>;
+  type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
+  htmlName?: string;
+  rootClassName: string;
+  rest: Record<string, unknown>;
+  iconContent: React.ReactNode;
+};
+interface IconButtonBaseProps extends IconButtonProps {
+  renderIconContent: (args: IconButtonRenderArgs) => React.ReactNode;
+  renderRoot: (args: IconButtonRootRenderArgs) => React.ReactNode;
+}
+declare const IconButtonBase: ForwardRefExoticComponent<IconButtonBaseProps & _$react.RefAttributes<HTMLButtonElement>>;
+declare function renderIconButtonAsChild(children: React.ReactNode, content: React.ReactNode): _$react.ReactElement<unknown, string | _$react.JSXElementConstructor<any>>;
+//#endregion
+export { IconButtonBase, type IconButtonProps, type IconButtonRootRenderArgs, renderIconButtonAsChild };

package/dist/components/client/IconButton/IconButtonBase.js

@@ -0,0 +1,65 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { cx, getStyles } from "../../../styles/styler.js";
+import { createSlot } from "../../../utils/createSlot.js";
+import { generateDefaultClassName } from "../../../automated-config/dist/utils/generateDefaultClassName.js";
+import { cloneElement, forwardRef, useMemo } from "react";
+//#region src/components/client/IconButton/IconButtonBase.tsx
+const defaultSizeRootClass = generateDefaultClassName("iconbutton", "size", "root");
+const defaultSizeIconClass = generateDefaultClassName("iconbutton", "size", "icon");
+const defaultVariantRootClass = generateDefaultClassName("button", "variant", "root");
+const defaultVariantIconClass = generateDefaultClassName("button", "variant", "icon");
+const IconButtonBase = forwardRef(function IconButtonBase({ variant, size, iconVariant, loading, disableEffects, name, asChild = false, slotProps, type = "button", htmlName, className, children, renderIconContent, renderRoot, ...rest }, forwardedRef) {
+	const { className: iconSlotClassName, ...iconSlotProps } = slotProps?.icon ?? {};
+	const Slot = useMemo(() => createSlot(), []);
+	const rootSizeClass = useMemo(() => size ? getStyles({ iconbuttonSizeRoot: size }) : defaultSizeRootClass, [size]);
+	const rootVariantClass = useMemo(() => variant ? getStyles({ buttonVariantRoot: variant }) : defaultVariantRootClass, [variant]);
+	const iconSizeClass = useMemo(() => size ? getStyles({ iconbuttonSizeIcon: size }) : defaultSizeIconClass, [size]);
+	const iconVariantClass = useMemo(() => variant ? getStyles({ buttonVariantIcon: variant }) : defaultVariantIconClass, [variant]);
+	const styles = useMemo(() => ({
+		root: cx("uds-ring", "uds-hit-target", "inline-flex overflow-hidden justify-center items-center", "[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", className),
+		icon: getStyles({ className: cx(iconSizeClass, iconVariantClass) }),
+		loadingIcon: getStyles({ className: cx([
+			"animate-spin",
+			iconSizeClass,
+			iconVariantClass
+		]) })
+	}), [
+		className,
+		disableEffects,
+		iconSizeClass,
+		iconVariantClass,
+		loading,
+		rest?.disabled,
+		rootSizeClass,
+		rootVariantClass
+	]);
+	return renderRoot({
+		asChild,
+		Slot,
+		children,
+		buttonRef: forwardedRef,
+		type,
+		htmlName,
+		rootClassName: styles.root,
+		rest,
+		iconContent: renderIconContent({
+			asChild,
+			loading,
+			name,
+			iconVariant,
+			children,
+			iconClassName: styles.icon,
+			loadingIconClassName: styles.loadingIcon,
+			iconSlotClassName,
+			iconSlotProps
+		})
+	});
+});
+IconButtonBase.displayName = "IconButtonBase";
+function renderIconButtonAsChild(children, content) {
+	const childProps = children.props;
+	return cloneElement(children, childProps, content);
+}
+//#endregion
+export { IconButtonBase, renderIconButtonAsChild };

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

@@ -0,0 +1,8 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_components_client_IconButton_IconButtonBase = require("./IconButtonBase.cjs");
+const require_components_client_IconButton_IconButton = require("./IconButton.cjs");
+exports.IconButton = require_components_client_IconButton_IconButton.IconButton;
+exports.IconButtonBase = require_components_client_IconButton_IconButtonBase.IconButtonBase;
+exports.renderIconButtonAsChild = require_components_client_IconButton_IconButtonBase.renderIconButtonAsChild;

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

@@ -0,0 +1,4 @@
+
+import { IconButtonBase, IconButtonRootRenderArgs, renderIconButtonAsChild } from "./IconButtonBase.cjs";
+import { IconButton, IconButtonProps } from "./IconButton.cjs";
+export { IconButton, IconButtonBase, type IconButtonProps, type IconButtonRootRenderArgs, renderIconButtonAsChild };

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

@@ -0,0 +1,5 @@
+
+"use client";
+import { IconButtonBase, IconButtonRootRenderArgs, renderIconButtonAsChild } from "./IconButtonBase.js";
+import { IconButton, IconButtonProps } from "./IconButton.js";
+export { IconButton, IconButtonBase, type IconButtonProps, type IconButtonRootRenderArgs, renderIconButtonAsChild };

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

@@ -0,0 +1,5 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { IconButtonBase, renderIconButtonAsChild } from "./IconButtonBase.js";
+import { IconButton } from "./IconButton.js";
+export { IconButton, IconButtonBase, renderIconButtonAsChild };

package/dist/components/client/Pressable.cjs

@@ -43,7 +43,7 @@ const Slot = require_utils_createSlot.createSlot();
 * @related [Button](https://uds.build/docs/components/button), [IconButton](https://uds.build/docs/components/icon-button)
 *
 */
-const Pressable = (0, react.forwardRef)(function Pressable({ className, asChild, onPress, onClick, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, dropShadow, insetShadow, ...props }, ref) {
+const Pressable = (0, react.forwardRef)(function Pressable({ className, asChild, onPress, onClick, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, width, height, dropShadow, insetShadow, ...props }, ref) {
 	const handleClick = onPress || onClick ? (e) => {
 		onClick?.(e);
 		onPress?.();
@@ -98,6 +98,8 @@ const Pressable = (0, react.forwardRef)(function Pressable({ className, asChild,
 		offsetTop,
 		columnGap,
 		rowGap,
+		width,
+		height,
 		dropShadow,
 		insetShadow,
 		className

package/dist/components/client/Pressable.js

@@ -41,7 +41,7 @@ const Slot = createSlot();
 * @related [Button](https://uds.build/docs/components/button), [IconButton](https://uds.build/docs/components/icon-button)
 *
 */
-const Pressable = forwardRef(function Pressable({ className, asChild, onPress, onClick, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, dropShadow, insetShadow, ...props }, ref) {
+const Pressable = forwardRef(function Pressable({ className, asChild, onPress, onClick, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, width, height, dropShadow, insetShadow, ...props }, ref) {
 	const handleClick = onPress || onClick ? (e) => {
 		onClick?.(e);
 		onPress?.();
@@ -96,6 +96,8 @@ const Pressable = forwardRef(function Pressable({ className, asChild, onPress, o
 		offsetTop,
 		columnGap,
 		rowGap,
+		width,
+		height,
 		dropShadow,
 		insetShadow,
 		className

package/dist/components/client/SpringMotionConfig.cjs

@@ -4,7 +4,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../../_virtual/_rolldown/runtime.cjs");
 const require_index = require("../../css-tokens/dist/index.cjs");
 const require_index$1 = require("../../motion-tokens/dist/index.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");
@@ -72,22 +71,20 @@ function SpringMotionConfig({ children, reducedMotion = "user", loadFeatures = d
 		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,
+			transition: (0, react.useMemo)(() => ({
+				type: "spring",
+				mass: 1,
+				...layoutConfig,
+				layout: layoutConfig,
+				opacity: colorConfig,
+				color: colorConfig,
+				borderColor: colorConfig,
+				backgroundColor: colorConfig
+			}), [colorConfig, layoutConfig]),
 			reducedMotion,
 			children
 		})

package/dist/components/client/SpringMotionConfig.js

@@ -2,7 +2,6 @@
 "use client";
 import { getMotionVar } from "../../css-tokens/dist/index.js";
 import { SPRING_MOTION_DEFAULTS, motion } from "../../motion-tokens/dist/index.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";
@@ -70,22 +69,20 @@ function SpringMotionConfig({ children, reducedMotion = "user", loadFeatures = d
 		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,
+			transition: useMemo(() => ({
+				type: "spring",
+				mass: 1,
+				...layoutConfig,
+				layout: layoutConfig,
+				opacity: colorConfig,
+				color: colorConfig,
+				borderColor: colorConfig,
+				backgroundColor: colorConfig
+			}), [colorConfig, layoutConfig]),
 			reducedMotion,
 			children
 		})

package/dist/components/client/Switch/Switch.cjs

@@ -0,0 +1,119 @@
+/*! © 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_client_SpringMotionConfig = require("../SpringMotionConfig.cjs");
+const require_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
+const require_components_client_Switch_SwitchBase = require("./SwitchBase.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/client/Switch/Switch.tsx
+const MotionBox = motion_react_m.create(require_components_Box.Box);
+MotionBox.displayName = "SwitchMotionBox";
+const toggleTransition = {
+	layoutVariant: "bouncy",
+	layoutSpeed: "4"
+};
+/**
+* **⚙️️ 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 Switch = (0, react.forwardRef)(function Switch({ reduceMotion: forceReduceMotion, ...props }, parentRef) {
+	const prefersReducedMotion = require_hooks_usePrefersReducedMotion.usePrefersReducedMotion();
+	const reduceMotion = forceReduceMotion ? "always" : "user";
+	const cssAnimationDuration = prefersReducedMotion || forceReduceMotion ? "duration-0" : "duration-120";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Switch_SwitchBase.SwitchBase, {
+		...props,
+		ref: parentRef,
+		cssAnimationDuration,
+		enableHoverTracking: true,
+		renderHandle: ({ size, isOn, isOnX, showHoverEffect, disabled, onIcon, offIcon, cssAnimationDuration, handleSlotProps }) => {
+			const motionInitialAndAnimate = {
+				initial: {
+					scale: 1,
+					x: isOn ? isOnX : 0
+				},
+				animate: {
+					scale: showHoverEffect ? 1.05 : 1,
+					x: isOn ? isOnX : 0
+				}
+			};
+			const classNames = {
+				handle: require_styles_styler.getStyles({
+					switchSizeHandle: size,
+					className: require_styles_styler.cx("relative", "pointer-events-none", "uds-border-radius-full", "overflow-hidden")
+				}),
+				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", "opacity-95", !disabled && "group-hover:opacity-100", cssAnimationDuration, "transition-[background-color,box-shadow,opacity]")
+				}),
+				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")
+				})
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
+				reducedMotion: reduceMotion,
+				...toggleTransition,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MotionBox, {
+					className: classNames.handle,
+					...motionInitialAndAnimate,
+					...handleSlotProps,
+					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")
+						})
+					]
+				})
+			});
+		}
+	});
+});
+Switch.displayName = "Switch";
+//#endregion
+exports.Switch = Switch;

package/dist/components/client/{Switch.d.cts → Switch/Switch.d.cts}

@@ -1,21 +1,9 @@
 
-import { UniversalSwitchProps } from "../../types/dist/index.cjs";
+import { SwitchProps as SwitchProps$1 } from "./types.cjs";
 import React from "react";
 
-//#region src/components/client/Switch.d.ts
-type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'size' | 'height' | 'width' | 'color' | 'defaultChecked' | 'children'>;
-type DataAttributes = {
-  [name: `data-${string}`]: string;
-};
-interface SwitchProps extends NativeInputProps, UniversalSwitchProps {
-  /** Props to be passed into various slots within the component. */
-  slotProps?: {
-    root?: DataAttributes;
-    switch?: DataAttributes;
-    handle?: DataAttributes;
-    label?: DataAttributes;
-  };
-}
+//#region src/components/client/Switch/Switch.d.ts
+type SwitchProps = SwitchProps$1;
 /**
  * **⚙️️ An switch.
  *
@@ -40,6 +28,6 @@ interface SwitchProps extends NativeInputProps, UniversalSwitchProps {
  *
  * @related [Checkbox](https://uds.build/docs/components/checkbox).
  **/
-declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps$1 & React.RefAttributes<HTMLInputElement>>;
 //#endregion
 export { Switch, type SwitchProps };

package/dist/components/client/{Switch.d.ts → Switch/Switch.d.ts}

@@ -1,22 +1,10 @@
 
 "use client";
-import { UniversalSwitchProps } from "../../types/dist/index.js";
+import { SwitchProps as SwitchProps$1 } from "./types.js";
 import React from "react";
 
-//#region src/components/client/Switch.d.ts
-type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'size' | 'height' | 'width' | 'color' | 'defaultChecked' | 'children'>;
-type DataAttributes = {
-  [name: `data-${string}`]: string;
-};
-interface SwitchProps extends NativeInputProps, UniversalSwitchProps {
-  /** Props to be passed into various slots within the component. */
-  slotProps?: {
-    root?: DataAttributes;
-    switch?: DataAttributes;
-    handle?: DataAttributes;
-    label?: DataAttributes;
-  };
-}
+//#region src/components/client/Switch/Switch.d.ts
+type SwitchProps = SwitchProps$1;
 /**
  * **⚙️️ An switch.
  *
@@ -41,6 +29,6 @@ interface SwitchProps extends NativeInputProps, UniversalSwitchProps {
  *
  * @related [Checkbox](https://uds.build/docs/components/checkbox).
  **/
-declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps$1 & React.RefAttributes<HTMLInputElement>>;
 //#endregion
 export { Switch, type SwitchProps };