@yahoo/uds-mobile 1.0.0

package/dist/components/Checkbox.cjs

@@ -0,0 +1,156 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_motion = require('../uds/dist/tokens/configs/motion.cjs');
+const require_motion$1 = require('../motion.cjs');
+const require_components_Icon = require('./Icon.cjs');
+const require_components_Text = require('./Text.cjs');
+const require_components_HStack = require('./HStack.cjs');
+const require_components_Pressable = require('./Pressable.cjs');
+let react = require("react");
+let generated_styles = require("../../generated/styles");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_native_reanimated = require("react-native-reanimated");
+react_native_reanimated = require_rolldown_runtime.__toESM(react_native_reanimated);
+
+//#region src/components/Checkbox.tsx
+const VARIANT_ERROR_MAP = {
+	primary: "alert",
+	secondary: "alert-secondary"
+};
+/**
+* **⚙️ A checkbox component**
+*
+* @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.
+*
+* @example
+* ```tsx
+* import { Checkbox } from '@yahoo/uds-mobile';
+*
+* <Checkbox label="Agree to terms" />
+* <Checkbox label="Subscribe" checked={true} onChange={setChecked} />
+* <Checkbox label="Partial" checked="indeterminate" />
+* ```
+*
+* @usage
+* - Forms: For selecting options
+* - Settings: For toggling preferences
+* - Filters: For multi-select filtering
+*
+* @see The {@link https://uds.build/docs/components/checkbox Checkbox Docs} for more info
+*/
+const Checkbox = (0, react.memo)(function Checkbox$1({ label, labelPosition = "start", variant: variantProp = "primary", size = "md", checked: checkedProp, hasError, reduceMotion, defaultChecked, disabled, required, onChange, ref, ...viewProps }) {
+	const uid = `uds-checkbox-${(0, react.useId)()}`;
+	const isControlled = checkedProp !== void 0;
+	const [internalChecked, setInternalChecked] = (0, react.useState)(isControlled ? checkedProp : defaultChecked ?? false);
+	const [pressed, setPressed] = (0, react.useState)(false);
+	const checked = isControlled ? checkedProp : internalChecked;
+	const valueState = (0, react.useMemo)(() => {
+		if (checked === "indeterminate") return "indeterminate";
+		return checked ? "checked" : "unchecked";
+	}, [checked]);
+	const iconName = valueState === "indeterminate" ? "Minus" : "Check";
+	const showIcon = valueState !== "unchecked";
+	const shouldAnimate = !reduceMotion;
+	const scaleProgress = (0, react_native_reanimated.useDerivedValue)(() => shouldAnimate ? (0, react_native_reanimated.withSpring)(pressed ? require_motion.SCALE_EFFECTS.down : require_motion.SCALE_EFFECTS.none, require_motion$1.BUTTON_SPRING_CONFIG) : require_motion.SCALE_EFFECTS.none, [pressed, shouldAnimate]);
+	const iconProgress = (0, react_native_reanimated.useDerivedValue)(() => shouldAnimate ? (0, react_native_reanimated.withSpring)(showIcon ? 1 : 0, require_motion$1.BUTTON_SPRING_CONFIG) : showIcon ? 1 : 0, [showIcon, shouldAnimate]);
+	const checkboxAnimatedStyle = (0, react_native_reanimated.useAnimatedStyle)(() => ({ transform: [{ scale: scaleProgress.value }] }));
+	const iconAnimatedStyle = (0, react_native_reanimated.useAnimatedStyle)(() => ({
+		opacity: (0, react_native_reanimated.interpolate)(iconProgress.value, [0, 1], [0, 1]),
+		transform: [{ scale: (0, react_native_reanimated.interpolate)(iconProgress.value, [0, 1], [.5, 1]) }]
+	}));
+	const handlePress = (0, react.useCallback)(() => {
+		if (disabled) return;
+		const newChecked = checked === "indeterminate" ? true : !checked;
+		if (!isControlled) setInternalChecked(newChecked);
+		onChange?.(newChecked);
+	}, [
+		disabled,
+		checked,
+		isControlled,
+		onChange
+	]);
+	const handlePressIn = (0, react.useCallback)(() => {
+		setPressed(true);
+	}, []);
+	const handlePressOut = (0, react.useCallback)(() => {
+		setPressed(false);
+	}, []);
+	const styleVariant = hasError ? VARIANT_ERROR_MAP[variantProp] : variantProp;
+	generated_styles.checkboxStyles.useVariants({
+		size,
+		variant: styleVariant,
+		value: valueState,
+		disabled,
+		pressed
+	});
+	const rootStyle = (0, react.useMemo)(() => [generated_styles.checkboxStyles.root, { opacity: disabled ? .5 : 1 }], [generated_styles.checkboxStyles.root, disabled]);
+	const checkboxBoxStyle = (0, react.useMemo)(() => [
+		generated_styles.checkboxStyles.checkbox,
+		{
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		checkboxAnimatedStyle
+	], [generated_styles.checkboxStyles.checkbox, checkboxAnimatedStyle]);
+	const labelContent = (0, react.useMemo)(() => {
+		if (!label) return null;
+		const content = typeof label === "function" ? label() : (0, react.isValidElement)(label) ? label : String(label);
+		const textContent = typeof content === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+			style: generated_styles.checkboxStyles.text,
+			children: content
+		}) : content;
+		if (required) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_HStack.HStack, {
+			columnGap: "1",
+			alignItems: "flex-start",
+			children: [textContent, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+				style: generated_styles.checkboxStyles.text,
+				children: "*"
+			})]
+		});
+		return textContent;
+	}, [
+		label,
+		required,
+		generated_styles.checkboxStyles.text
+	]);
+	const a11yState = (0, react.useMemo)(() => ({
+		disabled,
+		checked: valueState === "checked" ? true : valueState === "indeterminate" ? "mixed" : false
+	}), [disabled, valueState]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Pressable.Pressable, {
+		ref,
+		nativeID: uid,
+		onPress: handlePress,
+		onPressIn: handlePressIn,
+		onPressOut: handlePressOut,
+		disabled,
+		flexDirection: labelPosition === "start" ? "row" : "row-reverse",
+		alignItems: "center",
+		alignSelf: "flex-start",
+		accessibilityRole: "checkbox",
+		accessibilityState: a11yState,
+		accessibilityLabel: typeof label === "string" ? label : void 0,
+		...viewProps,
+		style: rootStyle,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {
+			style: checkboxBoxStyle,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {
+				style: iconAnimatedStyle,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
+					name: iconName,
+					size: "sm",
+					style: generated_styles.checkboxStyles.checkboxIcon
+				})
+			})
+		}), labelContent]
+	});
+});
+Checkbox.displayName = "Checkbox";
+
+//#endregion
+exports.Checkbox = Checkbox;

package/dist/components/Checkbox.d.cts

@@ -0,0 +1,48 @@
+
+import { UniversalCheckboxProps } from "../uds/dist/tokens/types.cjs";
+import * as react4 from "react";
+import { Ref } from "react";
+import { View, ViewProps } from "react-native";
+
+//#region src/components/Checkbox.d.ts
+interface CheckboxProps extends Omit<ViewProps, 'style'>, UniversalCheckboxProps {
+  ref?: Ref<View>;
+  /** Default checked state for uncontrolled mode */
+  defaultChecked?: boolean;
+  /** Whether the checkbox is disabled */
+  disabled?: boolean;
+  /** Whether the checkbox is required */
+  required?: boolean;
+  /** Callback fired when the checked state changes */
+  onChange?: (checked: boolean) => void;
+}
+/**
+ * **⚙️ A checkbox component**
+ *
+ * @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.
+ *
+ * @example
+ * ```tsx
+ * import { Checkbox } from '@yahoo/uds-mobile';
+ *
+ * <Checkbox label="Agree to terms" />
+ * <Checkbox label="Subscribe" checked={true} onChange={setChecked} />
+ * <Checkbox label="Partial" checked="indeterminate" />
+ * ```
+ *
+ * @usage
+ * - Forms: For selecting options
+ * - Settings: For toggling preferences
+ * - Filters: For multi-select filtering
+ *
+ * @see The {@link https://uds.build/docs/components/checkbox Checkbox Docs} for more info
+ */
+declare const Checkbox: react4.NamedExoticComponent<CheckboxProps>;
+//#endregion
+export { Checkbox, type CheckboxProps };
+//# sourceMappingURL=Checkbox.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.cts","names":[],"sources":["../../src/components/Checkbox.tsx"],"sourcesContent":[],"mappings":";;;;;;;UAyBU,aAAA,SAAsB,KAAK,qBAAqB;QAClD,IAAI;;EADF,cAAA,CAAA,EAAc,OAAA;EAAa;EACzB,QAAA,CAAA,EAAA,OAAA;EAAJ;EADwB,QAAA,CAAA,EAAA,OAAA;EAA0B;EAAsB,QAAA,CAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,GAAA,IAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;cAsD1E,UAAQ,MAAA,CAAA,qBAAA"}

package/dist/components/Checkbox.d.mts

@@ -0,0 +1,48 @@
+
+import { UniversalCheckboxProps } from "../uds/dist/tokens/types.mjs";
+import * as react9 from "react";
+import { Ref } from "react";
+import { View, ViewProps } from "react-native";
+
+//#region src/components/Checkbox.d.ts
+interface CheckboxProps extends Omit<ViewProps, 'style'>, UniversalCheckboxProps {
+  ref?: Ref<View>;
+  /** Default checked state for uncontrolled mode */
+  defaultChecked?: boolean;
+  /** Whether the checkbox is disabled */
+  disabled?: boolean;
+  /** Whether the checkbox is required */
+  required?: boolean;
+  /** Callback fired when the checked state changes */
+  onChange?: (checked: boolean) => void;
+}
+/**
+ * **⚙️ A checkbox component**
+ *
+ * @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.
+ *
+ * @example
+ * ```tsx
+ * import { Checkbox } from '@yahoo/uds-mobile';
+ *
+ * <Checkbox label="Agree to terms" />
+ * <Checkbox label="Subscribe" checked={true} onChange={setChecked} />
+ * <Checkbox label="Partial" checked="indeterminate" />
+ * ```
+ *
+ * @usage
+ * - Forms: For selecting options
+ * - Settings: For toggling preferences
+ * - Filters: For multi-select filtering
+ *
+ * @see The {@link https://uds.build/docs/components/checkbox Checkbox Docs} for more info
+ */
+declare const Checkbox: react9.NamedExoticComponent<CheckboxProps>;
+//#endregion
+export { Checkbox, type CheckboxProps };
+//# sourceMappingURL=Checkbox.d.mts.map

package/dist/components/Checkbox.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.mts","names":[],"sources":["../../src/components/Checkbox.tsx"],"sourcesContent":[],"mappings":";;;;;;;UAyBU,aAAA,SAAsB,KAAK,qBAAqB;QAClD,IAAI;;EADF,cAAA,CAAA,EAAc,OAAA;EAAa;EACzB,QAAA,CAAA,EAAA,OAAA;EAAJ;EADwB,QAAA,CAAA,EAAA,OAAA;EAA0B;EAAsB,QAAA,CAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,GAAA,IAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;cAsD1E,UAAQ,MAAA,CAAA,qBAAA"}

package/dist/components/Checkbox.mjs

@@ -0,0 +1,155 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { SCALE_EFFECTS } from "../uds/dist/tokens/configs/motion.mjs";
+import { BUTTON_SPRING_CONFIG } from "../motion.mjs";
+import { Icon } from "./Icon.mjs";
+import { Text } from "./Text.mjs";
+import { HStack } from "./HStack.mjs";
+import { Pressable } from "./Pressable.mjs";
+import { isValidElement, memo, useCallback, useId, useMemo, useState } from "react";
+import { checkboxStyles } from "../../generated/styles";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Animated, { interpolate, useAnimatedStyle, useDerivedValue, withSpring } from "react-native-reanimated";
+
+//#region src/components/Checkbox.tsx
+const VARIANT_ERROR_MAP = {
+	primary: "alert",
+	secondary: "alert-secondary"
+};
+/**
+* **⚙️ A checkbox component**
+*
+* @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.
+*
+* @example
+* ```tsx
+* import { Checkbox } from '@yahoo/uds-mobile';
+*
+* <Checkbox label="Agree to terms" />
+* <Checkbox label="Subscribe" checked={true} onChange={setChecked} />
+* <Checkbox label="Partial" checked="indeterminate" />
+* ```
+*
+* @usage
+* - Forms: For selecting options
+* - Settings: For toggling preferences
+* - Filters: For multi-select filtering
+*
+* @see The {@link https://uds.build/docs/components/checkbox Checkbox Docs} for more info
+*/
+const Checkbox = memo(function Checkbox$1({ label, labelPosition = "start", variant: variantProp = "primary", size = "md", checked: checkedProp, hasError, reduceMotion, defaultChecked, disabled, required, onChange, ref, ...viewProps }) {
+	const uid = `uds-checkbox-${useId()}`;
+	const isControlled = checkedProp !== void 0;
+	const [internalChecked, setInternalChecked] = useState(isControlled ? checkedProp : defaultChecked ?? false);
+	const [pressed, setPressed] = useState(false);
+	const checked = isControlled ? checkedProp : internalChecked;
+	const valueState = useMemo(() => {
+		if (checked === "indeterminate") return "indeterminate";
+		return checked ? "checked" : "unchecked";
+	}, [checked]);
+	const iconName = valueState === "indeterminate" ? "Minus" : "Check";
+	const showIcon = valueState !== "unchecked";
+	const shouldAnimate = !reduceMotion;
+	const scaleProgress = useDerivedValue(() => shouldAnimate ? withSpring(pressed ? SCALE_EFFECTS.down : SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG) : SCALE_EFFECTS.none, [pressed, shouldAnimate]);
+	const iconProgress = useDerivedValue(() => shouldAnimate ? withSpring(showIcon ? 1 : 0, BUTTON_SPRING_CONFIG) : showIcon ? 1 : 0, [showIcon, shouldAnimate]);
+	const checkboxAnimatedStyle = useAnimatedStyle(() => ({ transform: [{ scale: scaleProgress.value }] }));
+	const iconAnimatedStyle = useAnimatedStyle(() => ({
+		opacity: interpolate(iconProgress.value, [0, 1], [0, 1]),
+		transform: [{ scale: interpolate(iconProgress.value, [0, 1], [.5, 1]) }]
+	}));
+	const handlePress = useCallback(() => {
+		if (disabled) return;
+		const newChecked = checked === "indeterminate" ? true : !checked;
+		if (!isControlled) setInternalChecked(newChecked);
+		onChange?.(newChecked);
+	}, [
+		disabled,
+		checked,
+		isControlled,
+		onChange
+	]);
+	const handlePressIn = useCallback(() => {
+		setPressed(true);
+	}, []);
+	const handlePressOut = useCallback(() => {
+		setPressed(false);
+	}, []);
+	const styleVariant = hasError ? VARIANT_ERROR_MAP[variantProp] : variantProp;
+	checkboxStyles.useVariants({
+		size,
+		variant: styleVariant,
+		value: valueState,
+		disabled,
+		pressed
+	});
+	const rootStyle = useMemo(() => [checkboxStyles.root, { opacity: disabled ? .5 : 1 }], [checkboxStyles.root, disabled]);
+	const checkboxBoxStyle = useMemo(() => [
+		checkboxStyles.checkbox,
+		{
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		checkboxAnimatedStyle
+	], [checkboxStyles.checkbox, checkboxAnimatedStyle]);
+	const labelContent = useMemo(() => {
+		if (!label) return null;
+		const content = typeof label === "function" ? label() : isValidElement(label) ? label : String(label);
+		const textContent = typeof content === "string" ? /* @__PURE__ */ jsx(Text, {
+			style: checkboxStyles.text,
+			children: content
+		}) : content;
+		if (required) return /* @__PURE__ */ jsxs(HStack, {
+			columnGap: "1",
+			alignItems: "flex-start",
+			children: [textContent, /* @__PURE__ */ jsx(Text, {
+				style: checkboxStyles.text,
+				children: "*"
+			})]
+		});
+		return textContent;
+	}, [
+		label,
+		required,
+		checkboxStyles.text
+	]);
+	const a11yState = useMemo(() => ({
+		disabled,
+		checked: valueState === "checked" ? true : valueState === "indeterminate" ? "mixed" : false
+	}), [disabled, valueState]);
+	return /* @__PURE__ */ jsxs(Pressable, {
+		ref,
+		nativeID: uid,
+		onPress: handlePress,
+		onPressIn: handlePressIn,
+		onPressOut: handlePressOut,
+		disabled,
+		flexDirection: labelPosition === "start" ? "row" : "row-reverse",
+		alignItems: "center",
+		alignSelf: "flex-start",
+		accessibilityRole: "checkbox",
+		accessibilityState: a11yState,
+		accessibilityLabel: typeof label === "string" ? label : void 0,
+		...viewProps,
+		style: rootStyle,
+		children: [/* @__PURE__ */ jsx(Animated.View, {
+			style: checkboxBoxStyle,
+			children: /* @__PURE__ */ jsx(Animated.View, {
+				style: iconAnimatedStyle,
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: iconName,
+					size: "sm",
+					style: checkboxStyles.checkboxIcon
+				})
+			})
+		}), labelContent]
+	});
+});
+Checkbox.displayName = "Checkbox";
+
+//#endregion
+export { Checkbox };
+//# sourceMappingURL=Checkbox.mjs.map

package/dist/components/Checkbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.mjs","names":["VARIANT_ERROR_MAP: Record<CheckboxVariant, CheckboxStyleVariant>","Checkbox","valueState: CheckboxValueState","styleVariant: CheckboxStyleVariant"],"sources":["../../src/components/Checkbox.tsx"],"sourcesContent":["import type { CheckboxValue, CheckboxVariant, UniversalCheckboxProps } from '@yahoo/uds/tokens';\nimport type { Ref } from 'react';\nimport { isValidElement, memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { View, ViewProps } from 'react-native';\nimport Animated, {\n  interpolate,\n  useAnimatedStyle,\n  useDerivedValue,\n  withSpring,\n} from 'react-native-reanimated';\n\nimport { checkboxStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport { HStack } from './HStack';\nimport { Icon } from './Icon';\nimport { Pressable } from './Pressable';\nimport { Text } from './Text';\n\n/* -------------------------------------------------------------------------- */\n/*                                   Types                                    */\n/* -------------------------------------------------------------------------- */\n\n/** Derived from CheckboxValue - maps boolean to 'checked'/'unchecked' string literals */\ntype CheckboxValueState = Exclude<CheckboxValue, boolean> | 'checked' | 'unchecked';\n\ninterface CheckboxProps extends Omit<ViewProps, 'style'>, UniversalCheckboxProps {\n  ref?: Ref<View>;\n  /** Default checked state for uncontrolled mode */\n  defaultChecked?: boolean;\n  /** Whether the checkbox is disabled */\n  disabled?: boolean;\n  /** Whether the checkbox is required */\n  required?: boolean;\n  /** Callback fired when the checked state changes */\n  onChange?: (checked: boolean) => void;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Variant Mapping                                */\n/* -------------------------------------------------------------------------- */\n\n/** All style variants available in the generated styles (includes error variants) */\ntype CheckboxStyleVariant = 'primary' | 'secondary' | 'alert' | 'alert-secondary';\n\nconst VARIANT_ERROR_MAP: Record<CheckboxVariant, CheckboxStyleVariant> = {\n  primary: 'alert',\n  secondary: 'alert-secondary',\n};\n\n/* -------------------------------------------------------------------------- */\n/*                              Checkbox Component                             */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **⚙️ A checkbox component**\n *\n * @componentType Client component\n *\n * @description\n * A checkbox component allows users to select one or multiple options from a set.\n * It represents a binary state, typically as checked or unchecked, and optionally\n * includes a third \"indeterminate\" state to indicate partial selection.\n *\n * @example\n * ```tsx\n * import { Checkbox } from '@yahoo/uds-mobile';\n *\n * <Checkbox label=\"Agree to terms\" />\n * <Checkbox label=\"Subscribe\" checked={true} onChange={setChecked} />\n * <Checkbox label=\"Partial\" checked=\"indeterminate\" />\n * ```\n *\n * @usage\n * - Forms: For selecting options\n * - Settings: For toggling preferences\n * - Filters: For multi-select filtering\n *\n * @see The {@link https://uds.build/docs/components/checkbox Checkbox Docs} for more info\n */\nconst Checkbox = memo(function Checkbox({\n  // Checkbox props\n  label,\n  labelPosition = 'start',\n  variant: variantProp = 'primary',\n  size = 'md',\n  checked: checkedProp,\n  hasError,\n  reduceMotion,\n  // Native props\n  defaultChecked,\n  disabled,\n  required,\n  onChange,\n  ref,\n  ...viewProps\n}: CheckboxProps) {\n  const generatedId = useId();\n  const uid = `uds-checkbox-${generatedId}`;\n\n  /* --------------------------------- State ---------------------------------- */\n  const isControlled = checkedProp !== undefined;\n  const [internalChecked, setInternalChecked] = useState<CheckboxValue>(\n    isControlled ? checkedProp : (defaultChecked ?? false),\n  );\n  const [pressed, setPressed] = useState(false);\n\n  // Use controlled value if provided, otherwise use internal state\n  const checked = isControlled ? checkedProp : internalChecked;\n\n  /* ------------------------------ Derived Values ---------------------------- */\n  const valueState: CheckboxValueState = useMemo(() => {\n    if (checked === 'indeterminate') {\n      return 'indeterminate';\n    }\n    return checked ? 'checked' : 'unchecked';\n  }, [checked]);\n\n  const iconName = valueState === 'indeterminate' ? 'Minus' : 'Check';\n  const showIcon = valueState !== 'unchecked';\n\n  /* -------------------------------- Animation ------------------------------- */\n  const shouldAnimate = !reduceMotion;\n\n  // Scale animation for press feedback (disabled when reduceMotion is true)\n  const scaleProgress = useDerivedValue(\n    () =>\n      shouldAnimate\n        ? withSpring(pressed ? SCALE_EFFECTS.down : SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG)\n        : SCALE_EFFECTS.none, // No scale effect when reduceMotion is true\n    [pressed, shouldAnimate],\n  );\n\n  // Icon visibility animation\n  // When reduceMotion is true, still show/hide the icon but without animation\n  const iconProgress = useDerivedValue(\n    () => (shouldAnimate ? withSpring(showIcon ? 1 : 0, BUTTON_SPRING_CONFIG) : showIcon ? 1 : 0),\n    [showIcon, shouldAnimate],\n  );\n\n  const checkboxAnimatedStyle = useAnimatedStyle(() => ({\n    transform: [{ scale: scaleProgress.value }],\n  }));\n\n  const iconAnimatedStyle = useAnimatedStyle(() => ({\n    opacity: interpolate(iconProgress.value, [0, 1], [0, 1]),\n    transform: [{ scale: interpolate(iconProgress.value, [0, 1], [0.5, 1]) }],\n  }));\n\n  /* -------------------------------- Handlers -------------------------------- */\n  const handlePress = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    const newChecked = checked === 'indeterminate' ? true : !checked;\n\n    if (!isControlled) {\n      setInternalChecked(newChecked);\n    }\n\n    onChange?.(newChecked);\n  }, [disabled, checked, isControlled, onChange]);\n\n  const handlePressIn = useCallback(() => {\n    setPressed(true);\n  }, []);\n\n  const handlePressOut = useCallback(() => {\n    setPressed(false);\n  }, []);\n\n  /* --------------------------------- Styles --------------------------------- */\n  // Compute the style variant (primary/secondary maps to alert variants when hasError)\n  const styleVariant: CheckboxStyleVariant = hasError\n    ? VARIANT_ERROR_MAP[variantProp]\n    : variantProp;\n\n  checkboxStyles.useVariants({\n    size,\n    variant: styleVariant, // primary, secondary, alert, alert-secondary\n    value: valueState, // checked, unchecked, indeterminate\n    disabled,\n    pressed,\n  });\n\n  const rootStyle = useMemo(\n    () => [checkboxStyles.root, { opacity: disabled ? 0.5 : 1 }],\n    [checkboxStyles.root, disabled],\n  );\n\n  const checkboxBoxStyle = useMemo(\n    () => [\n      checkboxStyles.checkbox,\n      { alignItems: 'center' as const, justifyContent: 'center' as const },\n      checkboxAnimatedStyle,\n    ],\n    [checkboxStyles.checkbox, checkboxAnimatedStyle],\n  );\n\n  /* ---------------------------- Render Helpers ------------------------------ */\n  const labelContent = useMemo(() => {\n    if (!label) {\n      return null;\n    }\n\n    const content =\n      typeof label === 'function' ? label() : isValidElement(label) ? label : String(label);\n\n    const textContent =\n      typeof content === 'string' ? <Text style={checkboxStyles.text}>{content}</Text> : content;\n\n    if (required) {\n      return (\n        <HStack columnGap=\"1\" alignItems=\"flex-start\">\n          {textContent}\n          <Text style={checkboxStyles.text}>*</Text>\n        </HStack>\n      );\n    }\n\n    return textContent;\n  }, [label, required, checkboxStyles.text]);\n\n  const a11yState = useMemo(\n    () => ({\n      disabled,\n      checked:\n        valueState === 'checked'\n          ? true\n          : valueState === 'indeterminate'\n            ? ('mixed' as const)\n            : false,\n    }),\n    [disabled, valueState],\n  );\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <Pressable\n      ref={ref}\n      nativeID={uid}\n      onPress={handlePress}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      disabled={disabled}\n      flexDirection={labelPosition === 'start' ? 'row' : 'row-reverse'}\n      alignItems=\"center\"\n      alignSelf=\"flex-start\"\n      accessibilityRole=\"checkbox\"\n      accessibilityState={a11yState}\n      accessibilityLabel={typeof label === 'string' ? label : undefined}\n      {...viewProps}\n      style={rootStyle}\n    >\n      <Animated.View style={checkboxBoxStyle}>\n        <Animated.View style={iconAnimatedStyle}>\n          <Icon name={iconName} size=\"sm\" style={checkboxStyles.checkboxIcon} />\n        </Animated.View>\n      </Animated.View>\n\n      {labelContent}\n    </Pressable>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox, type CheckboxProps };\n"],"mappings":"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"}

package/dist/components/Chip.cjs

@@ -0,0 +1,124 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_components_IconSlot = require('./IconSlot.cjs');
+const require_components_Text = require('./Text.cjs');
+const require_components_HStack = require('./HStack.cjs');
+const require_components_Pressable = require('./Pressable.cjs');
+let react = require("react");
+let generated_styles = require("../../generated/styles");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Chip.tsx
+/**
+* **A chip component for selections, filters, or actions**
+*
+* @description
+* Chips help people make selections, filter content, or trigger actions.
+* They can be toggleable, dismissible, or simple pressable elements.
+*
+* @example
+* ```tsx
+* import { Chip } from '~/components/ui/Chip';
+*
+* // Basic chip
+* <Chip>Label</Chip>
+*
+* // Toggle chip
+* <Chip isToggled={selected} onToggle={setSelected}>Filter</Chip>
+*
+* // Dismissible chip
+* <Chip onDismiss={() => removeChip()}>Tag</Chip>
+*
+* // With icons
+* <Chip startIcon="Star" variant="brand">Favorite</Chip>
+* ```
+*/
+const Chip = (0, react.memo)(function Chip$1({ variant = "primary", size = "md", minWidth, maxWidth = 200, startIcon, endIcon, disabled = false, isToggled = false, onPress, onToggle, onDismiss, dismissButtonAriaLabel = "Dismiss", children, style, ref, ...rest }) {
+	const isInteractive = Boolean(onPress || onToggle);
+	const isDismissible = Boolean(onDismiss);
+	const isDisabled = disabled;
+	const toggleState = isToggled ? "on" : "off";
+	generated_styles.chipStyles.useVariants({
+		size,
+		link: variant,
+		dismissible: variant,
+		toggle: toggleState
+	});
+	const handlePress = (0, react.useCallback)(() => {
+		if (isDisabled) return;
+		if (onToggle) onToggle(!isToggled);
+		else if (onPress) onPress();
+	}, [
+		isDisabled,
+		onToggle,
+		isToggled,
+		onPress
+	]);
+	const handleDismiss = (0, react.useCallback)(() => {
+		if (isDisabled) return;
+		onDismiss?.();
+	}, [isDisabled, onDismiss]);
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		startIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+			icon: startIcon,
+			variant: "fill",
+			style: generated_styles.chipStyles.icon
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+			numberOfLines: 1,
+			textAlign: "center",
+			flexShrink: "1",
+			style: generated_styles.chipStyles.text,
+			children
+		}),
+		isDismissible ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Pressable.Pressable, {
+			onPress: isDisabled ? void 0 : handleDismiss,
+			disabled: isDisabled,
+			accessibilityLabel: dismissButtonAriaLabel,
+			accessibilityRole: "button",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+				icon: endIcon ?? "Cross",
+				variant: "fill",
+				style: generated_styles.chipStyles.icon
+			})
+		}) : endIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+			icon: endIcon,
+			variant: "fill",
+			style: generated_styles.chipStyles.icon
+		})
+	] });
+	const a11yState = {
+		disabled: isDisabled,
+		checked: onToggle ? isToggled : void 0
+	};
+	const sharedProps = {
+		ref,
+		style: (0, react.useMemo)(() => [generated_styles.chipStyles.root, style], [generated_styles.chipStyles.root, style]),
+		flexDirection: "row",
+		alignItems: "center",
+		overflow: "hidden",
+		alignSelf: "flex-start",
+		maxWidth,
+		minWidth,
+		disabled: isDisabled,
+		opacity: isDisabled ? .5 : void 0,
+		accessibilityState: a11yState,
+		...rest
+	};
+	if (isInteractive) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Pressable.Pressable, {
+		onPress: handlePress,
+		accessibilityRole: onToggle ? "checkbox" : "button",
+		...sharedProps,
+		children: content
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_HStack.HStack, {
+		accessibilityRole: isDismissible ? "button" : void 0,
+		...sharedProps,
+		...rest,
+		children: content
+	});
+});
+Chip.displayName = "Chip";
+
+//#endregion
+exports.Chip = Chip;

package/dist/components/Chip.d.cts

@@ -0,0 +1,60 @@
+
+import { ChipSize, ChipVariant } from "../uds/dist/tokens/types.cjs";
+import { IconSlotType } from "./IconSlot.cjs";
+import * as react5 from "react";
+import { Ref } from "react";
+import { View, ViewProps } from "react-native";
+
+//#region src/components/Chip.d.ts
+interface ChipProps extends Omit<ViewProps, 'children'> {
+  ref?: Ref<View>;
+  /** @default 'primary' */
+  variant?: ChipVariant;
+  /** @default 'md' */
+  size?: ChipSize;
+  minWidth?: number;
+  /** @default 200 */
+  maxWidth?: number;
+  startIcon?: IconSlotType;
+  endIcon?: IconSlotType;
+  disabled?: boolean;
+  /** Called when the chip is pressed. Makes the chip interactive. */
+  onPress?: () => void;
+  /** Whether the chip is toggled/selected. */
+  isToggled?: boolean;
+  /** Called when the chip toggle state changes. */
+  onToggle?: (toggled: boolean) => void;
+  /** Called when the dismiss button is pressed. Shows a dismiss icon. */
+  onDismiss?: () => void;
+  /** Accessibility label for the dismiss button. */
+  dismissButtonAriaLabel?: string;
+  children?: React.ReactNode;
+}
+/**
+ * **A chip component for selections, filters, or actions**
+ *
+ * @description
+ * Chips help people make selections, filter content, or trigger actions.
+ * They can be toggleable, dismissible, or simple pressable elements.
+ *
+ * @example
+ * ```tsx
+ * import { Chip } from '~/components/ui/Chip';
+ *
+ * // Basic chip
+ * <Chip>Label</Chip>
+ *
+ * // Toggle chip
+ * <Chip isToggled={selected} onToggle={setSelected}>Filter</Chip>
+ *
+ * // Dismissible chip
+ * <Chip onDismiss={() => removeChip()}>Tag</Chip>
+ *
+ * // With icons
+ * <Chip startIcon="Star" variant="brand">Favorite</Chip>
+ * ```
+ */
+declare const Chip: react5.NamedExoticComponent<ChipProps>;
+//#endregion
+export { Chip, type ChipProps };
+//# sourceMappingURL=Chip.d.cts.map

package/dist/components/Chip.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.d.cts","names":[],"sources":["../../src/components/Chip.tsx"],"sourcesContent":[],"mappings":";;;;;;;;UAYU,SAAA,SAAkB,KAAK;QACzB,IAAI;;EADF,OAAA,CAAA,EAGE,WAHQ;EAAa;EACrB,IAAA,CAAA,EAIH,QAJG;EAAJ,QAAA,CAAA,EAAA,MAAA;EAEI;EAEH,QAAA,CAAA,EAAA,MAAA;EAIK,SAAA,CAAA,EAAA,YAAA;EACF,OAAA,CAAA,EAAA,YAAA;EAYC,QAAM,CAAA,EAAA,OAAA;EAtBS;EAAI,OAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EAiD1B;;;;;;;;aA3BO,KAAA,CAAM;;;;;;;;;;;;;;;;;;;;;;;;;;cA2Bb,MAAI,MAAA,CAAA,qBAAA"}