@yahoo/uds 3.161.0 → 3.162.0

package/dist/components/client/Checkbox/Checkbox.cjs

@@ -0,0 +1,118 @@
+/*! © 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_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
+const require_components_client_SpringMotionConfig = require("../SpringMotionConfig.cjs");
+const require_components_client_Checkbox_checkboxConstants = require("./checkboxConstants.cjs");
+const require_components_client_Checkbox_CheckboxBase = require("./CheckboxBase.cjs");
+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/Checkbox.tsx
+const MotionBox = motion_react.m.create(require_components_Box.Box);
+MotionBox.displayName = "CheckboxMotionBox";
+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({ 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_Checkbox_CheckboxBase.CheckboxBase, {
+		...props,
+		ref: parentRef,
+		cssAnimationDuration,
+		enableInteractionTracking: true,
+		renderRoot: ({ className, style, rootSlotProps, hasLabel, isPressed, onHoverStart, onHoverEnd, onTapStart, onTapEnd, children }) => {
+			const RootElement = hasLabel ? motion_react.m.label : motion_react.m.div;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
+				reducedMotion: reduceMotion,
+				...isPressed ? pressTransition : hoverTransition,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RootElement, {
+					className,
+					"data-testid": "container",
+					style,
+					onHoverStart,
+					onHoverEnd,
+					onTapStart,
+					onTap: onTapEnd,
+					onTapCancel: onTapEnd,
+					tabIndex: -1,
+					...rootSlotProps,
+					children
+				})
+			});
+		},
+		renderIndicator: ({ size, variant, valueState, checked, showHoverEffect, showPressedEffect, cssAnimationDuration, checkIcon, checkboxSlotProps, iconSlotProps, children }) => {
+			const scale = showPressedEffect ? .9 : showHoverEffect ? 1.1 : 1;
+			const checkOpacity = !checked ? require_styles_styler.cx("opacity-0") : showPressedEffect ? require_styles_styler.cx("opacity-55") : require_styles_styler.cx("opacity-100");
+			const classNames = {
+				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")
+				})
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MotionBox, {
+				position: "relative",
+				className: classNames.checkbox,
+				alignItems: "center",
+				justifyContent: "center",
+				flex: "none",
+				animate: { scale },
+				...checkboxSlotProps,
+				children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
+					name: checkIcon,
+					size: "sm",
+					className: classNames.check,
+					...iconSlotProps
+				})]
+			});
+		}
+	});
+});
+Checkbox.displayName = "Checkbox";
+//#endregion
+exports.Checkbox = Checkbox;
+exports.SIZES = require_components_client_Checkbox_checkboxConstants.SIZES;
+exports.VARIANTS = require_components_client_Checkbox_checkboxConstants.VARIANTS;

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

@@ -1,23 +1,10 @@
 
-import { UniversalCheckboxProps } from "../../types/dist/index.cjs";
+import { SIZES, VARIANTS } from "./checkboxConstants.cjs";
+import { CheckboxProps as CheckboxProps$1 } from "./types.cjs";
 import React from "react";
 
-//#region src/components/client/Checkbox.d.ts
-type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'size' | 'height' | 'width' | 'color'>;
-type DataAttributes = {
-  [name: `data-${string}`]: string;
-};
-interface CheckboxProps extends NativeInputProps, UniversalCheckboxProps {
-  /** Props to be passed into various slots within the component. */
-  slotProps?: {
-    root?: DataAttributes;
-    checkbox?: DataAttributes;
-    icon?: DataAttributes;
-    label?: DataAttributes;
-  };
-}
-declare const VARIANTS: ("primary" | "secondary")[];
-declare const SIZES: ("sm" | "md")[];
+//#region src/components/client/Checkbox/Checkbox.d.ts
+type CheckboxProps = CheckboxProps$1;
 /**
  * **⚙️️ An checkbox.
  *
@@ -42,6 +29,6 @@ declare const SIZES: ("sm" | "md")[];
  *
  * @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>>;
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps$1 & React.RefAttributes<HTMLInputElement>>;
 //#endregion
 export { Checkbox, type CheckboxProps, SIZES, VARIANTS };

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

@@ -1,24 +1,11 @@
 
 "use client";
-import { UniversalCheckboxProps } from "../../types/dist/index.js";
+import { SIZES, VARIANTS } from "./checkboxConstants.js";
+import { CheckboxProps as CheckboxProps$1 } from "./types.js";
 import React from "react";
 
-//#region src/components/client/Checkbox.d.ts
-type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'size' | 'height' | 'width' | 'color'>;
-type DataAttributes = {
-  [name: `data-${string}`]: string;
-};
-interface CheckboxProps extends NativeInputProps, UniversalCheckboxProps {
-  /** Props to be passed into various slots within the component. */
-  slotProps?: {
-    root?: DataAttributes;
-    checkbox?: DataAttributes;
-    icon?: DataAttributes;
-    label?: DataAttributes;
-  };
-}
-declare const VARIANTS: ("primary" | "secondary")[];
-declare const SIZES: ("sm" | "md")[];
+//#region src/components/client/Checkbox/Checkbox.d.ts
+type CheckboxProps = CheckboxProps$1;
 /**
  * **⚙️️ An checkbox.
  *
@@ -43,6 +30,6 @@ declare const SIZES: ("sm" | "md")[];
  *
  * @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>>;
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps$1 & React.RefAttributes<HTMLInputElement>>;
 //#endregion
 export { Checkbox, type CheckboxProps, SIZES, VARIANTS };

package/dist/components/client/Checkbox/Checkbox.js

@@ -0,0 +1,113 @@
+/*! © 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 { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
+import { SpringMotionConfig } from "../SpringMotionConfig.js";
+import { SIZES, VARIANTS } from "./checkboxConstants.js";
+import { CheckboxBase } from "./CheckboxBase.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { m } from "motion/react";
+//#region src/components/client/Checkbox/Checkbox.tsx
+const MotionBox = m.create(Box);
+MotionBox.displayName = "CheckboxMotionBox";
+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({ reduceMotion: forceReduceMotion, ...props }, parentRef) {
+	const prefersReducedMotion = usePrefersReducedMotion();
+	const reduceMotion = forceReduceMotion ? "always" : "user";
+	const cssAnimationDuration = prefersReducedMotion || forceReduceMotion ? "duration-0" : "duration-120";
+	return /* @__PURE__ */ jsx(CheckboxBase, {
+		...props,
+		ref: parentRef,
+		cssAnimationDuration,
+		enableInteractionTracking: true,
+		renderRoot: ({ className, style, rootSlotProps, hasLabel, isPressed, onHoverStart, onHoverEnd, onTapStart, onTapEnd, children }) => {
+			const RootElement = hasLabel ? m.label : m.div;
+			return /* @__PURE__ */ jsx(SpringMotionConfig, {
+				reducedMotion: reduceMotion,
+				...isPressed ? pressTransition : hoverTransition,
+				children: /* @__PURE__ */ jsx(RootElement, {
+					className,
+					"data-testid": "container",
+					style,
+					onHoverStart,
+					onHoverEnd,
+					onTapStart,
+					onTap: onTapEnd,
+					onTapCancel: onTapEnd,
+					tabIndex: -1,
+					...rootSlotProps,
+					children
+				})
+			});
+		},
+		renderIndicator: ({ size, variant, valueState, checked, showHoverEffect, showPressedEffect, cssAnimationDuration, checkIcon, checkboxSlotProps, iconSlotProps, children }) => {
+			const scale = showPressedEffect ? .9 : showHoverEffect ? 1.1 : 1;
+			const checkOpacity = !checked ? cx("opacity-0") : showPressedEffect ? cx("opacity-55") : cx("opacity-100");
+			const classNames = {
+				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")
+				})
+			};
+			return /* @__PURE__ */ jsxs(MotionBox, {
+				position: "relative",
+				className: classNames.checkbox,
+				alignItems: "center",
+				justifyContent: "center",
+				flex: "none",
+				animate: { scale },
+				...checkboxSlotProps,
+				children: [children, /* @__PURE__ */ jsx(Icon, {
+					name: checkIcon,
+					size: "sm",
+					className: classNames.check,
+					...iconSlotProps
+				})]
+			});
+		}
+	});
+});
+Checkbox.displayName = "Checkbox";
+//#endregion
+export { Checkbox, SIZES, VARIANTS };

package/dist/components/client/Checkbox/CheckboxBase.cjs

@@ -0,0 +1,141 @@
+/*! © 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_FormLabel = require("../../FormLabel.cjs");
+const require_components_client_Checkbox_checkboxConstants = require("./checkboxConstants.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/client/Checkbox/CheckboxBase.tsx
+const CheckboxBase = (0, react.forwardRef)(function CheckboxBase({ id, checked: checkedProp, defaultChecked, onChange, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: _reduceMotion, disabled, required, hasError, className, style, slotProps, cssAnimationDuration, enableInteractionTracking = false, renderRoot, renderIndicator, ...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 ? require_components_client_Checkbox_checkboxConstants.VARIANT_ERROR_MAP[variantProp] : variantProp, [hasError, variantProp]);
+	const showHoverEffect = enableInteractionTracking && !disabled && isHovered;
+	const showPressedEffect = enableInteractionTracking && !disabled && isPressed;
+	/**
+	* Handlers
+	*/
+	const handleChange = (0, react.useCallback)((e) => {
+		onChange?.(e);
+		if (!isControlled) setChecked(e.target.checked);
+	}, [isControlled, onChange]);
+	const handleHoverStart = (0, react.useCallback)(() => {
+		if (enableInteractionTracking) setIsHovered(true);
+	}, [enableInteractionTracking]);
+	const handleHoverEnd = (0, react.useCallback)(() => {
+		if (enableInteractionTracking) setIsHovered(false);
+	}, [enableInteractionTracking]);
+	const handleTapStart = (0, react.useCallback)(() => {
+		if (enableInteractionTracking) setIsPressed(true);
+	}, [enableInteractionTracking]);
+	const handleTapEnd = (0, react.useCallback)(() => {
+		if (enableInteractionTracking) setIsPressed(false);
+	}, [enableInteractionTracking]);
+	/**
+	* Helpers
+	*/
+	const setDOMIndeterminate = (checked_) => {
+		if (!innerRef.current) return;
+		innerRef.current.indeterminate = require_components_client_Checkbox_checkboxConstants.isIndeterminate(checked_);
+	};
+	/**
+	* Effects
+	*/
+	(0, react.useEffect)(() => {
+		if (isControlled) setChecked(checkedProp);
+	}, [checkedProp, isControlled]);
+	(0, react.useEffect)(() => {
+		setDOMIndeterminate(checked);
+	}, [checked]);
+	const valueState = require_components_client_Checkbox_checkboxConstants.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)
+		}),
+		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 input = /* @__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 ? require_components_client_Checkbox_checkboxConstants.isIndeterminate(checked) ? false : checked : void 0,
+		defaultChecked: isControlled ? void 0 : defaultChecked,
+		onChange: handleChange,
+		className: classNames.htmlCheckbox
+	});
+	return renderRoot({
+		className: classNames.root,
+		style,
+		rootSlotProps,
+		hasLabel: Boolean(label),
+		isPressed,
+		onHoverStart: handleHoverStart,
+		onHoverEnd: handleHoverEnd,
+		onTapStart: handleTapStart,
+		onTapEnd: handleTapEnd,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [renderIndicator({
+			size,
+			variant,
+			valueState,
+			checked,
+			disabled,
+			showHoverEffect,
+			showPressedEffect,
+			cssAnimationDuration,
+			checkIcon: require_components_client_Checkbox_checkboxConstants.getIcon(checked),
+			checkboxSlotProps,
+			iconSlotProps,
+			children: input
+		}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_FormLabel.FormLabel, {
+			as: "div",
+			variant: "inherit",
+			color: "inherit",
+			required,
+			label,
+			className: classNames.label,
+			...labelSlotProps
+		})] })
+	});
+});
+CheckboxBase.displayName = "CheckboxBase";
+//#endregion
+exports.CheckboxBase = CheckboxBase;

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

@@ -0,0 +1,48 @@
+
+import { CheckboxVariant } from "../../../types/dist/index.cjs";
+import { getIcon } from "./checkboxConstants.cjs";
+import { CheckboxProps, CheckboxValueState, DataAttributes } from "./types.cjs";
+import React, { CSSProperties, ReactNode } from "react";
+
+//#region src/components/client/Checkbox/CheckboxBase.d.ts
+type ResolvedCheckboxVariant = CheckboxVariant | 'alert' | 'alert-secondary';
+type RenderRootArgs = {
+  className: string;
+  style?: CSSProperties;
+  rootSlotProps: DataAttributes;
+  hasLabel: boolean;
+  isPressed: boolean;
+  onHoverStart: () => void;
+  onHoverEnd: () => void;
+  onTapStart: () => void;
+  onTapEnd: () => void;
+  children: ReactNode;
+};
+type RenderIndicatorArgs = {
+  size: NonNullable<CheckboxProps['size']>;
+  variant: ResolvedCheckboxVariant;
+  valueState: CheckboxValueState;
+  checked: CheckboxProps['checked'];
+  disabled?: boolean;
+  showHoverEffect: boolean;
+  showPressedEffect: boolean;
+  cssAnimationDuration: string;
+  checkIcon: ReturnType<typeof getIcon>;
+  checkboxSlotProps: DataAttributes;
+  iconSlotProps: DataAttributes;
+  children: ReactNode;
+};
+type CheckboxBaseProps = CheckboxProps & {
+  cssAnimationDuration: string;
+  enableInteractionTracking?: boolean;
+  renderRoot: (args: RenderRootArgs) => ReactNode;
+  renderIndicator: (args: RenderIndicatorArgs) => ReactNode;
+};
+declare const CheckboxBase: React.ForwardRefExoticComponent<CheckboxProps & {
+  cssAnimationDuration: string;
+  enableInteractionTracking?: boolean;
+  renderRoot: (args: RenderRootArgs) => ReactNode;
+  renderIndicator: (args: RenderIndicatorArgs) => ReactNode;
+} & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { CheckboxBase, type CheckboxBaseProps, type RenderIndicatorArgs, type RenderRootArgs, type ResolvedCheckboxVariant };

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

@@ -0,0 +1,49 @@
+
+"use client";
+import { CheckboxVariant } from "../../../types/dist/index.js";
+import { getIcon } from "./checkboxConstants.js";
+import { CheckboxProps, CheckboxValueState, DataAttributes } from "./types.js";
+import React, { CSSProperties, ReactNode } from "react";
+
+//#region src/components/client/Checkbox/CheckboxBase.d.ts
+type ResolvedCheckboxVariant = CheckboxVariant | 'alert' | 'alert-secondary';
+type RenderRootArgs = {
+  className: string;
+  style?: CSSProperties;
+  rootSlotProps: DataAttributes;
+  hasLabel: boolean;
+  isPressed: boolean;
+  onHoverStart: () => void;
+  onHoverEnd: () => void;
+  onTapStart: () => void;
+  onTapEnd: () => void;
+  children: ReactNode;
+};
+type RenderIndicatorArgs = {
+  size: NonNullable<CheckboxProps['size']>;
+  variant: ResolvedCheckboxVariant;
+  valueState: CheckboxValueState;
+  checked: CheckboxProps['checked'];
+  disabled?: boolean;
+  showHoverEffect: boolean;
+  showPressedEffect: boolean;
+  cssAnimationDuration: string;
+  checkIcon: ReturnType<typeof getIcon>;
+  checkboxSlotProps: DataAttributes;
+  iconSlotProps: DataAttributes;
+  children: ReactNode;
+};
+type CheckboxBaseProps = CheckboxProps & {
+  cssAnimationDuration: string;
+  enableInteractionTracking?: boolean;
+  renderRoot: (args: RenderRootArgs) => ReactNode;
+  renderIndicator: (args: RenderIndicatorArgs) => ReactNode;
+};
+declare const CheckboxBase: React.ForwardRefExoticComponent<CheckboxProps & {
+  cssAnimationDuration: string;
+  enableInteractionTracking?: boolean;
+  renderRoot: (args: RenderRootArgs) => ReactNode;
+  renderIndicator: (args: RenderIndicatorArgs) => ReactNode;
+} & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { CheckboxBase, type CheckboxBaseProps, type RenderIndicatorArgs, type RenderRootArgs, type ResolvedCheckboxVariant };

package/dist/components/client/Checkbox/CheckboxBase.js

@@ -0,0 +1,138 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { cx, getStyles } from "../../../styles/styler.js";
+import { FormLabel } from "../../FormLabel.js";
+import { VARIANT_ERROR_MAP, getIcon, isIndeterminate } from "./checkboxConstants.js";
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/client/Checkbox/CheckboxBase.tsx
+const CheckboxBase = forwardRef(function CheckboxBase({ id, checked: checkedProp, defaultChecked, onChange, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: _reduceMotion, disabled, required, hasError, className, style, slotProps, cssAnimationDuration, enableInteractionTracking = false, renderRoot, renderIndicator, ...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 = enableInteractionTracking && !disabled && isHovered;
+	const showPressedEffect = enableInteractionTracking && !disabled && isPressed;
+	/**
+	* Handlers
+	*/
+	const handleChange = useCallback((e) => {
+		onChange?.(e);
+		if (!isControlled) setChecked(e.target.checked);
+	}, [isControlled, onChange]);
+	const handleHoverStart = useCallback(() => {
+		if (enableInteractionTracking) setIsHovered(true);
+	}, [enableInteractionTracking]);
+	const handleHoverEnd = useCallback(() => {
+		if (enableInteractionTracking) setIsHovered(false);
+	}, [enableInteractionTracking]);
+	const handleTapStart = useCallback(() => {
+		if (enableInteractionTracking) setIsPressed(true);
+	}, [enableInteractionTracking]);
+	const handleTapEnd = useCallback(() => {
+		if (enableInteractionTracking) setIsPressed(false);
+	}, [enableInteractionTracking]);
+	/**
+	* Helpers
+	*/
+	const setDOMIndeterminate = (checked_) => {
+		if (!innerRef.current) return;
+		innerRef.current.indeterminate = isIndeterminate(checked_);
+	};
+	/**
+	* 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)
+		}),
+		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 input = /* @__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
+	});
+	return renderRoot({
+		className: classNames.root,
+		style,
+		rootSlotProps,
+		hasLabel: Boolean(label),
+		isPressed,
+		onHoverStart: handleHoverStart,
+		onHoverEnd: handleHoverEnd,
+		onTapStart: handleTapStart,
+		onTapEnd: handleTapEnd,
+		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [renderIndicator({
+			size,
+			variant,
+			valueState,
+			checked,
+			disabled,
+			showHoverEffect,
+			showPressedEffect,
+			cssAnimationDuration,
+			checkIcon: getIcon(checked),
+			checkboxSlotProps,
+			iconSlotProps,
+			children: input
+		}), label && /* @__PURE__ */ jsx(FormLabel, {
+			as: "div",
+			variant: "inherit",
+			color: "inherit",
+			required,
+			label,
+			className: classNames.label,
+			...labelSlotProps
+		})] })
+	});
+});
+CheckboxBase.displayName = "CheckboxBase";
+//#endregion
+export { CheckboxBase };