@yahoo/uds-mobile 1.0.0

package/dist/components/Link.cjs

@@ -0,0 +1,139 @@
+/*! © 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');
+let react = require("react");
+let react_native = require("react-native");
+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);
+let react_native_unistyles_reanimated = require("react-native-unistyles/reanimated");
+
+//#region src/components/Link.tsx
+const AnimatedText = react_native_reanimated.default.Text;
+const noUnderline = { textDecorationLine: "none" };
+/**
+* **🔗 A navigation link component**
+*
+* @description
+* A styled link component for navigation. Rendered as Text so it can be
+* nested inline within other Text. Supports optional start/end icons.
+*
+* @example
+* ```tsx
+* import { Link } from '@yahoo/uds-mobile';
+*
+* // Standalone link
+* <Link onPress={() => navigate('/profile')}>Go to Profile</Link>
+*
+* // Inline within text
+* <Text>Read our <Link>Terms of Service</Link> and <Link>Privacy Policy</Link>.</Text>
+*
+* // With icons
+* <Link startIcon="AffiliateLink">External link</Link>
+* <Link endIcon="ChevronRight">Navigate forward</Link>
+* ```
+*
+* @see The {@link https://uds.build/docs/components/link Link Docs} for more info
+*/
+const Link = (0, react.memo)(function Link$1({ children, variant = "primary", textVariant, alwaysUnderline = false, startIcon, endIcon, onPress, style, ref, ...rest }) {
+	const [pressed, setPressed] = (0, react.useState)(false);
+	const handlePressIn = (0, react.useCallback)(() => {
+		setPressed(true);
+	}, []);
+	const handlePressOut = (0, react.useCallback)(() => {
+		setPressed(false);
+	}, []);
+	const handlePress = (0, react.useCallback)((event) => {
+		onPress?.(event);
+	}, [onPress]);
+	generated_styles.linkStyles.useVariants({
+		textStyle: textVariant,
+		variant,
+		pressed
+	});
+	const animatedTheme = (0, react_native_unistyles_reanimated.useAnimatedTheme)();
+	const underlineProgress = (0, react_native_reanimated.useDerivedValue)(() => {
+		return (0, react_native_reanimated.withTiming)(pressed || alwaysUnderline ? 1 : 0, {
+			duration: 150,
+			easing: react_native_reanimated.Easing.bezier(0, 0, .2, 1)
+		});
+	}, [pressed, alwaysUnderline]);
+	const animatedTextStyle = (0, react_native_reanimated.useAnimatedStyle)(() => {
+		const textColor = animatedTheme.value.components[`link/variant/${variant}/rootText/${pressed ? "pressed" : "rest"}`].color;
+		return {
+			color: (0, react_native_reanimated.withTiming)(textColor, {
+				duration: 150,
+				easing: react_native_reanimated.Easing.bezier(0, 0, .2, 1)
+			}),
+			textDecorationColor: (0, react_native_reanimated.interpolateColor)(underlineProgress.value, [0, 1], ["transparent", textColor])
+		};
+	});
+	const textStyles = (0, react.useMemo)(() => {
+		return [
+			generated_styles.linkStyles.root,
+			generated_styles.linkStyles.text,
+			animatedTextStyle,
+			style
+		];
+	}, [
+		generated_styles.linkStyles.text,
+		animatedTextStyle,
+		style,
+		generated_styles.linkStyles.root
+	]);
+	const startIconStyles = (0, react.useMemo)(() => {
+		return [
+			generated_styles.linkStyles.icon,
+			generated_styles.linkStyles.iconStart,
+			noUnderline
+		];
+	}, [
+		generated_styles.linkStyles.icon,
+		generated_styles.linkStyles.iconStart,
+		noUnderline
+	]);
+	const endIconStyles = (0, react.useMemo)(() => {
+		return [
+			generated_styles.linkStyles.icon,
+			generated_styles.linkStyles.iconEnd,
+			noUnderline
+		];
+	}, [
+		generated_styles.linkStyles.icon,
+		generated_styles.linkStyles.iconEnd,
+		noUnderline
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AnimatedText, {
+		ref,
+		onPress: handlePress,
+		onPressIn: handlePressIn,
+		onPressOut: handlePressOut,
+		suppressHighlighting: true,
+		style: textStyles,
+		...rest,
+		children: [
+			startIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+				icon: startIcon,
+				variant: "outline",
+				style: startIconStyles
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+				style: noUnderline,
+				children: "  "
+			})] }),
+			children,
+			endIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+				style: noUnderline,
+				children: "  "
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+				icon: endIcon,
+				variant: "outline",
+				style: endIconStyles
+			})] })
+		]
+	});
+});
+Link.displayName = "Link";
+
+//#endregion
+exports.Link = Link;

package/dist/components/Link.d.cts

@@ -0,0 +1,45 @@
+
+import { UniversalLinkProps } from "../uds/dist/tokens/types.cjs";
+import "../uds/dist/index.cjs";
+import { IconSlotType } from "./IconSlot.cjs";
+import { TextProps as TextProps$1 } from "./Text.cjs";
+import * as react6 from "react";
+import { ReactNode, Ref } from "react";
+import { Text, TextStyle } from "react-native";
+
+//#region src/components/Link.d.ts
+interface LinkProps extends UniversalLinkProps<IconSlotType> {
+  /** Style override */
+  style?: TextStyle;
+  onPress?: TextProps$1['onPress'];
+  ref?: Ref<Text>;
+  children?: ReactNode;
+}
+/**
+ * **🔗 A navigation link component**
+ *
+ * @description
+ * A styled link component for navigation. Rendered as Text so it can be
+ * nested inline within other Text. Supports optional start/end icons.
+ *
+ * @example
+ * ```tsx
+ * import { Link } from '@yahoo/uds-mobile';
+ *
+ * // Standalone link
+ * <Link onPress={() => navigate('/profile')}>Go to Profile</Link>
+ *
+ * // Inline within text
+ * <Text>Read our <Link>Terms of Service</Link> and <Link>Privacy Policy</Link>.</Text>
+ *
+ * // With icons
+ * <Link startIcon="AffiliateLink">External link</Link>
+ * <Link endIcon="ChevronRight">Navigate forward</Link>
+ * ```
+ *
+ * @see The {@link https://uds.build/docs/components/link Link Docs} for more info
+ */
+declare const Link: react6.NamedExoticComponent<LinkProps>;
+//#endregion
+export { Link, type LinkProps };
+//# sourceMappingURL=Link.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.cts","names":[],"sources":["../../src/components/Link.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;UAwBU,SAAA,SAAkB,mBAAmB;;UAErC;EAFA,OAAA,CAAA,EAGE,WAHQ,CAAA,SAAA,CAAA;EAA2B,GAAA,CAAA,EAIvC,GAJuC,CAInC,IAJmC,CAAA;EAErC,QAAA,CAAA,EAGG,SAHH;;;;;;;AAFoC;;;;;;;;;;;;;;;;;;;cAgCxC,MAAI,MAAA,CAAA,qBAAA"}

package/dist/components/Link.d.mts

@@ -0,0 +1,45 @@
+
+import { UniversalLinkProps } from "../uds/dist/tokens/types.mjs";
+import "../uds/dist/index.mjs";
+import { IconSlotType } from "./IconSlot.mjs";
+import { TextProps as TextProps$1 } from "./Text.mjs";
+import * as react11 from "react";
+import { ReactNode, Ref } from "react";
+import { Text, TextStyle } from "react-native";
+
+//#region src/components/Link.d.ts
+interface LinkProps extends UniversalLinkProps<IconSlotType> {
+  /** Style override */
+  style?: TextStyle;
+  onPress?: TextProps$1['onPress'];
+  ref?: Ref<Text>;
+  children?: ReactNode;
+}
+/**
+ * **🔗 A navigation link component**
+ *
+ * @description
+ * A styled link component for navigation. Rendered as Text so it can be
+ * nested inline within other Text. Supports optional start/end icons.
+ *
+ * @example
+ * ```tsx
+ * import { Link } from '@yahoo/uds-mobile';
+ *
+ * // Standalone link
+ * <Link onPress={() => navigate('/profile')}>Go to Profile</Link>
+ *
+ * // Inline within text
+ * <Text>Read our <Link>Terms of Service</Link> and <Link>Privacy Policy</Link>.</Text>
+ *
+ * // With icons
+ * <Link startIcon="AffiliateLink">External link</Link>
+ * <Link endIcon="ChevronRight">Navigate forward</Link>
+ * ```
+ *
+ * @see The {@link https://uds.build/docs/components/link Link Docs} for more info
+ */
+declare const Link: react11.NamedExoticComponent<LinkProps>;
+//#endregion
+export { Link, type LinkProps };
+//# sourceMappingURL=Link.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.mts","names":[],"sources":["../../src/components/Link.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;UAwBU,SAAA,SAAkB,mBAAmB;;UAErC;EAFA,OAAA,CAAA,EAGE,WAHQ,CAAA,SAAA,CAAA;EAA2B,GAAA,CAAA,EAIvC,GAJuC,CAInC,IAJmC,CAAA;EAErC,QAAA,CAAA,EAGG,SAHH;;;;;;;AAFoC;;;;;;;;;;;;;;;;;;;cAgCxC,MAAI,OAAA,CAAA,qBAAA"}

package/dist/components/Link.mjs

@@ -0,0 +1,138 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { IconSlot } from "./IconSlot.mjs";
+import { memo, useCallback, useMemo, useState } from "react";
+import { Text } from "react-native";
+import { linkStyles } from "../../generated/styles";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import Animated, { Easing, interpolateColor, useAnimatedStyle, useDerivedValue, withTiming } from "react-native-reanimated";
+import { useAnimatedTheme } from "react-native-unistyles/reanimated";
+
+//#region src/components/Link.tsx
+const AnimatedText = Animated.Text;
+const noUnderline = { textDecorationLine: "none" };
+/**
+* **🔗 A navigation link component**
+*
+* @description
+* A styled link component for navigation. Rendered as Text so it can be
+* nested inline within other Text. Supports optional start/end icons.
+*
+* @example
+* ```tsx
+* import { Link } from '@yahoo/uds-mobile';
+*
+* // Standalone link
+* <Link onPress={() => navigate('/profile')}>Go to Profile</Link>
+*
+* // Inline within text
+* <Text>Read our <Link>Terms of Service</Link> and <Link>Privacy Policy</Link>.</Text>
+*
+* // With icons
+* <Link startIcon="AffiliateLink">External link</Link>
+* <Link endIcon="ChevronRight">Navigate forward</Link>
+* ```
+*
+* @see The {@link https://uds.build/docs/components/link Link Docs} for more info
+*/
+const Link = memo(function Link$1({ children, variant = "primary", textVariant, alwaysUnderline = false, startIcon, endIcon, onPress, style, ref, ...rest }) {
+	const [pressed, setPressed] = useState(false);
+	const handlePressIn = useCallback(() => {
+		setPressed(true);
+	}, []);
+	const handlePressOut = useCallback(() => {
+		setPressed(false);
+	}, []);
+	const handlePress = useCallback((event) => {
+		onPress?.(event);
+	}, [onPress]);
+	linkStyles.useVariants({
+		textStyle: textVariant,
+		variant,
+		pressed
+	});
+	const animatedTheme = useAnimatedTheme();
+	const underlineProgress = useDerivedValue(() => {
+		return withTiming(pressed || alwaysUnderline ? 1 : 0, {
+			duration: 150,
+			easing: Easing.bezier(0, 0, .2, 1)
+		});
+	}, [pressed, alwaysUnderline]);
+	const animatedTextStyle = useAnimatedStyle(() => {
+		const textColor = animatedTheme.value.components[`link/variant/${variant}/rootText/${pressed ? "pressed" : "rest"}`].color;
+		return {
+			color: withTiming(textColor, {
+				duration: 150,
+				easing: Easing.bezier(0, 0, .2, 1)
+			}),
+			textDecorationColor: interpolateColor(underlineProgress.value, [0, 1], ["transparent", textColor])
+		};
+	});
+	const textStyles = useMemo(() => {
+		return [
+			linkStyles.root,
+			linkStyles.text,
+			animatedTextStyle,
+			style
+		];
+	}, [
+		linkStyles.text,
+		animatedTextStyle,
+		style,
+		linkStyles.root
+	]);
+	const startIconStyles = useMemo(() => {
+		return [
+			linkStyles.icon,
+			linkStyles.iconStart,
+			noUnderline
+		];
+	}, [
+		linkStyles.icon,
+		linkStyles.iconStart,
+		noUnderline
+	]);
+	const endIconStyles = useMemo(() => {
+		return [
+			linkStyles.icon,
+			linkStyles.iconEnd,
+			noUnderline
+		];
+	}, [
+		linkStyles.icon,
+		linkStyles.iconEnd,
+		noUnderline
+	]);
+	return /* @__PURE__ */ jsxs(AnimatedText, {
+		ref,
+		onPress: handlePress,
+		onPressIn: handlePressIn,
+		onPressOut: handlePressOut,
+		suppressHighlighting: true,
+		style: textStyles,
+		...rest,
+		children: [
+			startIcon && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconSlot, {
+				icon: startIcon,
+				variant: "outline",
+				style: startIconStyles
+			}), /* @__PURE__ */ jsx(Text, {
+				style: noUnderline,
+				children: "  "
+			})] }),
+			children,
+			endIcon && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Text, {
+				style: noUnderline,
+				children: "  "
+			}), /* @__PURE__ */ jsx(IconSlot, {
+				icon: endIcon,
+				variant: "outline",
+				style: endIconStyles
+			})] })
+		]
+	});
+});
+Link.displayName = "Link";
+
+//#endregion
+export { Link };
+//# sourceMappingURL=Link.mjs.map

package/dist/components/Link.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.mjs","names":["noUnderline: TextStyle","Link","RNText"],"sources":["../../src/components/Link.tsx"],"sourcesContent":["import type { UniversalLinkProps } from '@yahoo/uds';\nimport type { ReactNode, Ref } from 'react';\nimport { memo, useCallback, useMemo, useState } from 'react';\nimport type { GestureResponderEvent, TextStyle } from 'react-native';\nimport { Text as RNText } from 'react-native';\nimport Animated, {\n  Easing,\n  interpolateColor,\n  useAnimatedStyle,\n  useDerivedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport { useAnimatedTheme } from 'react-native-unistyles/reanimated';\n\nimport { linkStyles } from '../../generated/styles';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport type { TextProps } from './Text';\n\nconst AnimatedText = Animated.Text;\n\n// Prevent icons from inheriting underline from parent/theme (matches web behavior)\nconst noUnderline: TextStyle = { textDecorationLine: 'none' };\n\ninterface LinkProps extends UniversalLinkProps<IconSlotType> {\n  /** Style override */\n  style?: TextStyle;\n  onPress?: TextProps['onPress'];\n  ref?: Ref<RNText>;\n  children?: ReactNode;\n}\n\n/**\n * **🔗 A navigation link component**\n *\n * @description\n * A styled link component for navigation. Rendered as Text so it can be\n * nested inline within other Text. Supports optional start/end icons.\n *\n * @example\n * ```tsx\n * import { Link } from '@yahoo/uds-mobile';\n *\n * // Standalone link\n * <Link onPress={() => navigate('/profile')}>Go to Profile</Link>\n *\n * // Inline within text\n * <Text>Read our <Link>Terms of Service</Link> and <Link>Privacy Policy</Link>.</Text>\n *\n * // With icons\n * <Link startIcon=\"AffiliateLink\">External link</Link>\n * <Link endIcon=\"ChevronRight\">Navigate forward</Link>\n * ```\n *\n * @see The {@link https://uds.build/docs/components/link Link Docs} for more info\n */\nconst Link = memo(function Link({\n  children,\n  variant = 'primary',\n  textVariant,\n  alwaysUnderline = false,\n  startIcon,\n  endIcon,\n  onPress,\n  style,\n  ref,\n  ...rest\n}: LinkProps) {\n  const [pressed, setPressed] = useState(false);\n\n  const handlePressIn = useCallback(() => {\n    setPressed(true);\n  }, []);\n\n  const handlePressOut = useCallback(() => {\n    setPressed(false);\n  }, []);\n\n  // Must have onPress for touch events to register (RN requirement)\n  // Even without a user-provided handler, we need a function to make text touchable\n  const handlePress = useCallback(\n    (event: GestureResponderEvent) => {\n      onPress?.(event);\n    },\n    [onPress],\n  );\n\n  linkStyles.useVariants({\n    textStyle: textVariant,\n    variant,\n    pressed,\n  });\n\n  // Get theme as SharedValue for worklet access (zero re-renders)\n  const animatedTheme = useAnimatedTheme();\n\n  // Derive underline visibility from pressed state\n  // useDerivedValue handles the animation automatically when deps change\n  const underlineProgress = useDerivedValue(() => {\n    const targetValue = pressed || alwaysUnderline ? 1 : 0;\n    return withTiming(targetValue, {\n      duration: 150,\n      easing: Easing.bezier(0, 0, 0.2, 1),\n    });\n  }, [pressed, alwaysUnderline]);\n\n  // Combined animated style for color and underline\n  const animatedTextStyle = useAnimatedStyle(() => {\n    // Access text color from theme using variant path\n    const components = animatedTheme.value.components;\n    const state = pressed ? 'pressed' : 'rest';\n    const textVariantPath = `link/variant/${variant}/rootText/${state}` as const;\n    const textColor = components[textVariantPath].color;\n\n    const color = withTiming(textColor, {\n      duration: 150,\n      easing: Easing.bezier(0, 0, 0.2, 1),\n    });\n\n    // Interpolate underline opacity: 0 = transparent, 1 = text color\n    const underlineColor = interpolateColor(\n      underlineProgress.value,\n      [0, 1],\n      ['transparent', textColor],\n    );\n\n    return {\n      color,\n      textDecorationColor: underlineColor,\n    };\n  });\n\n  const textStyles = useMemo(() => {\n    return [linkStyles.root, linkStyles.text, animatedTextStyle, style];\n  }, [linkStyles.text, animatedTextStyle, style, linkStyles.root]);\n\n  const startIconStyles = useMemo(() => {\n    return [linkStyles.icon, linkStyles.iconStart, noUnderline];\n  }, [linkStyles.icon, linkStyles.iconStart, noUnderline]);\n\n  const endIconStyles = useMemo(() => {\n    return [linkStyles.icon, linkStyles.iconEnd, noUnderline];\n  }, [linkStyles.icon, linkStyles.iconEnd, noUnderline]);\n\n  return (\n    <AnimatedText\n      ref={ref}\n      onPress={handlePress}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      suppressHighlighting\n      style={textStyles}\n      {...rest}\n    >\n      {startIcon && (\n        <>\n          <IconSlot icon={startIcon} variant=\"outline\" style={startIconStyles} />\n          {/* TODO: need to add hairline space character to icon font so we can have space between icon and text https://hybridheroes.de/blog/2022-11-17-text-with-inline-icons-in-react-native/ */}\n          <RNText style={noUnderline}>{' \\u200A'}</RNText>\n        </>\n      )}\n      {children}\n      {endIcon && (\n        <>\n          {/* TODO: need to add hairline space character to icon font so we can have space between icon and text https://hybridheroes.de/blog/2022-11-17-text-with-inline-icons-in-react-native/ */}\n          <RNText style={noUnderline}>{' \\u200A'}</RNText>\n          <IconSlot icon={endIcon} variant=\"outline\" style={endIconStyles} />\n        </>\n      )}\n    </AnimatedText>\n  );\n});\n\nLink.displayName = 'Link';\n\nexport { Link, type LinkProps };\n"],"mappings":";;;;;;;;;;AAmBA,MAAM,eAAe,SAAS;AAG9B,MAAMA,cAAyB,EAAE,oBAAoB,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;AAkC7D,MAAM,OAAO,KAAK,SAASC,OAAK,EAC9B,UACA,UAAU,WACV,aACA,kBAAkB,OAClB,WACA,SACA,SACA,OACA,KACA,GAAG,QACS;CACZ,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAE7C,MAAM,gBAAgB,kBAAkB;AACtC,aAAW,KAAK;IACf,EAAE,CAAC;CAEN,MAAM,iBAAiB,kBAAkB;AACvC,aAAW,MAAM;IAChB,EAAE,CAAC;CAIN,MAAM,cAAc,aACjB,UAAiC;AAChC,YAAU,MAAM;IAElB,CAAC,QAAQ,CACV;AAED,YAAW,YAAY;EACrB,WAAW;EACX;EACA;EACD,CAAC;CAGF,MAAM,gBAAgB,kBAAkB;CAIxC,MAAM,oBAAoB,sBAAsB;AAE9C,SAAO,WADa,WAAW,kBAAkB,IAAI,GACtB;GAC7B,UAAU;GACV,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;GACpC,CAAC;IACD,CAAC,SAAS,gBAAgB,CAAC;CAG9B,MAAM,oBAAoB,uBAAuB;EAK/C,MAAM,YAHa,cAAc,MAAM,WAEf,gBAAgB,QAAQ,YADlC,UAAU,YAAY,UAEU;AAc9C,SAAO;GACL,OAbY,WAAW,WAAW;IAClC,UAAU;IACV,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;IACpC,CAAC;GAWA,qBARqB,iBACrB,kBAAkB,OAClB,CAAC,GAAG,EAAE,EACN,CAAC,eAAe,UAAU,CAC3B;GAKA;GACD;CAEF,MAAM,aAAa,cAAc;AAC/B,SAAO;GAAC,WAAW;GAAM,WAAW;GAAM;GAAmB;GAAM;IAClE;EAAC,WAAW;EAAM;EAAmB;EAAO,WAAW;EAAK,CAAC;CAEhE,MAAM,kBAAkB,cAAc;AACpC,SAAO;GAAC,WAAW;GAAM,WAAW;GAAW;GAAY;IAC1D;EAAC,WAAW;EAAM,WAAW;EAAW;EAAY,CAAC;CAExD,MAAM,gBAAgB,cAAc;AAClC,SAAO;GAAC,WAAW;GAAM,WAAW;GAAS;GAAY;IACxD;EAAC,WAAW;EAAM,WAAW;EAAS;EAAY,CAAC;AAEtD,QACE,qBAAC;EACM;EACL,SAAS;EACT,WAAW;EACX,YAAY;EACZ;EACA,OAAO;EACP,GAAI;;GAEH,aACC,4CACE,oBAAC;IAAS,MAAM;IAAW,SAAQ;IAAU,OAAO;KAAmB,EAEvE,oBAACC;IAAO,OAAO;cAAc;KAAmB,IAC/C;GAEJ;GACA,WACC,4CAEE,oBAACA;IAAO,OAAO;cAAc;KAAmB,EAChD,oBAAC;IAAS,MAAM;IAAS,SAAQ;IAAU,OAAO;KAAiB,IAClE;;GAEQ;EAEjB;AAEF,KAAK,cAAc"}

package/dist/components/Pressable.cjs

@@ -0,0 +1,120 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+let react_native = require("react-native");
+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/Pressable.tsx
+/**
+* **👆 A pressable component with UDS styling**
+*
+* @description
+* A styled pressable component that wraps React Native's Pressable with
+* UDS styling support.
+*
+* @example
+* ```tsx
+* import { Pressable } from '@yahoo/uds-mobile';
+*
+* <Pressable
+*   backgroundColor="primary"
+*   spacing="4"
+*   borderRadius="md"
+*   onPress={() => console.log('Pressed!')}
+* >
+*   <Text>Press me</Text>
+* </Pressable>
+* ```
+*
+* @usage
+* - Use for interactive elements that need press feedback
+* - Supports all Box styling props
+*
+* @see The {@link https://uds.build/docs/components/pressable Pressable Docs} for more info
+*/
+const Pressable = (0, react.memo)(function Pressable$1({ 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, display = "flex", overflow, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, width, height, minWidth, maxWidth, minHeight, maxHeight, opacity, style, ref, ...props }) {
+	generated_styles.styles.useVariants({
+		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,
+		display,
+		overflow,
+		spacing,
+		spacingHorizontal,
+		spacingVertical,
+		spacingBottom,
+		spacingEnd,
+		spacingStart,
+		spacingTop,
+		offset,
+		offsetVertical,
+		offsetHorizontal,
+		offsetBottom,
+		offsetEnd,
+		offsetStart,
+		offsetTop,
+		columnGap,
+		rowGap
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Pressable, {
+		ref,
+		style: (0, react.useCallback)((state) => {
+			const userStyle = typeof style === "function" ? style(state) : style;
+			return [
+				width ? { width } : void 0,
+				height ? { height } : void 0,
+				minWidth ? { minWidth } : void 0,
+				maxWidth ? { maxWidth } : void 0,
+				minHeight ? { minHeight } : void 0,
+				maxHeight ? { maxHeight } : void 0,
+				opacity ? { opacity } : void 0,
+				generated_styles.styles.foundation,
+				userStyle
+			];
+		}, [
+			width,
+			height,
+			minWidth,
+			maxWidth,
+			minHeight,
+			maxHeight,
+			opacity,
+			style,
+			generated_styles.styles.foundation
+		]),
+		...props
+	});
+});
+Pressable.displayName = "Pressable";
+const AnimatedPressable = react_native_reanimated.default.createAnimatedComponent(Pressable);
+
+//#endregion
+exports.AnimatedPressable = AnimatedPressable;
+exports.Pressable = Pressable;

package/dist/components/Pressable.d.cts

@@ -0,0 +1,90 @@
+
+import { SizeProps } from "../types.cjs";
+import * as react0 from "react";
+import { Ref } from "react";
+import { PressableProps as PressableProps$1, View } from "react-native";
+import { StyleProps } from "../../generated/styles";
+import * as react_native_reanimated0 from "react-native-reanimated";
+
+//#region src/components/Pressable.d.ts
+interface PressableProps extends PressableProps$1, SizeProps {
+  ref?: Ref<View>;
+  backgroundColor?: StyleProps['backgroundColor'];
+  borderRadius?: StyleProps['borderRadius'];
+  borderTopStartRadius?: StyleProps['borderTopStartRadius'];
+  borderTopEndRadius?: StyleProps['borderTopEndRadius'];
+  borderBottomStartRadius?: StyleProps['borderBottomStartRadius'];
+  borderBottomEndRadius?: StyleProps['borderBottomEndRadius'];
+  borderColor?: StyleProps['borderColor'];
+  borderStartColor?: StyleProps['borderStartColor'];
+  borderEndColor?: StyleProps['borderEndColor'];
+  borderTopColor?: StyleProps['borderTopColor'];
+  borderBottomColor?: StyleProps['borderBottomColor'];
+  borderWidth?: StyleProps['borderWidth'];
+  borderVerticalWidth?: StyleProps['borderVerticalWidth'];
+  borderHorizontalWidth?: StyleProps['borderHorizontalWidth'];
+  borderStartWidth?: StyleProps['borderStartWidth'];
+  borderEndWidth?: StyleProps['borderEndWidth'];
+  borderTopWidth?: StyleProps['borderTopWidth'];
+  borderBottomWidth?: StyleProps['borderBottomWidth'];
+  alignContent?: StyleProps['alignContent'];
+  alignItems?: StyleProps['alignItems'];
+  alignSelf?: StyleProps['alignSelf'];
+  flex?: StyleProps['flex'];
+  flexDirection?: StyleProps['flexDirection'];
+  flexGrow?: StyleProps['flexGrow'];
+  flexShrink?: StyleProps['flexShrink'];
+  flexWrap?: StyleProps['flexWrap'];
+  justifyContent?: StyleProps['justifyContent'];
+  display?: StyleProps['display'];
+  overflow?: StyleProps['overflow'];
+  spacing?: StyleProps['spacing'];
+  spacingHorizontal?: StyleProps['spacingHorizontal'];
+  spacingVertical?: StyleProps['spacingVertical'];
+  spacingBottom?: StyleProps['spacingBottom'];
+  spacingEnd?: StyleProps['spacingEnd'];
+  spacingStart?: StyleProps['spacingStart'];
+  spacingTop?: StyleProps['spacingTop'];
+  offset?: StyleProps['offset'];
+  offsetVertical?: StyleProps['offsetVertical'];
+  offsetHorizontal?: StyleProps['offsetHorizontal'];
+  offsetBottom?: StyleProps['offsetBottom'];
+  offsetEnd?: StyleProps['offsetEnd'];
+  offsetStart?: StyleProps['offsetStart'];
+  offsetTop?: StyleProps['offsetTop'];
+  columnGap?: StyleProps['columnGap'];
+  rowGap?: StyleProps['rowGap'];
+  opacity?: number;
+}
+/**
+ * **👆 A pressable component with UDS styling**
+ *
+ * @description
+ * A styled pressable component that wraps React Native's Pressable with
+ * UDS styling support.
+ *
+ * @example
+ * ```tsx
+ * import { Pressable } from '@yahoo/uds-mobile';
+ *
+ * <Pressable
+ *   backgroundColor="primary"
+ *   spacing="4"
+ *   borderRadius="md"
+ *   onPress={() => console.log('Pressed!')}
+ * >
+ *   <Text>Press me</Text>
+ * </Pressable>
+ * ```
+ *
+ * @usage
+ * - Use for interactive elements that need press feedback
+ * - Supports all Box styling props
+ *
+ * @see The {@link https://uds.build/docs/components/pressable Pressable Docs} for more info
+ */
+declare const Pressable: react0.NamedExoticComponent<PressableProps>;
+declare const AnimatedPressable: react0.FunctionComponent<react_native_reanimated0.AnimatedProps<PressableProps>>;
+//#endregion
+export { AnimatedPressable, Pressable, type PressableProps };
+//# sourceMappingURL=Pressable.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pressable.d.cts","names":[],"sources":["../../src/components/Pressable.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;UAgBU,cAAA,SAAuB,kBAAkB;QAC3C,IAAI;oBAEQ;iBAEH;EALP,oBAAe,CAAA,EAMA,UANA,CAAA,sBAAA,CAAA;EACb,kBAAA,CAAA,EAMW,UANX,CAAA,oBAAA,CAAA;EAAJ,uBAAA,CAAA,EAOoB,UAPpB,CAAA,yBAAA,CAAA;EAEY,qBAAA,CAAA,EAMM,UANN,CAAA,uBAAA,CAAA;EAEH,WAAA,CAAA,EAKD,UALC,CAAA,aAAA,CAAA;EACQ,gBAAA,CAAA,EAKJ,UALI,CAAA,kBAAA,CAAA;EACF,cAAA,CAAA,EAKJ,UALI,CAAA,gBAAA,CAAA;EACK,cAAA,CAAA,EAKT,UALS,CAAA,gBAAA,CAAA;EACF,iBAAA,CAAA,EAKJ,UALI,CAAA,mBAAA,CAAA;EACV,WAAA,CAAA,EAKA,UALA,CAAA,aAAA,CAAA;EACK,mBAAA,CAAA,EAKG,UALH,CAAA,qBAAA,CAAA;EACF,qBAAA,CAAA,EAKO,UALP,CAAA,uBAAA,CAAA;EACA,gBAAA,CAAA,EAKE,UALF,CAAA,kBAAA,CAAA;EACG,cAAA,CAAA,EAKH,UALG,CAAA,gBAAA,CAAA;EACN,cAAA,CAAA,EAKG,UALH,CAAA,gBAAA,CAAA;EACQ,iBAAA,CAAA,EAKF,UALE,CAAA,mBAAA,CAAA;EACE,YAAA,CAAA,EAMT,UANS,CAAA,cAAA,CAAA;EACL,UAAA,CAAA,EAMN,UANM,CAAA,YAAA,CAAA;EACF,SAAA,CAAA,EAML,UANK,CAAA,WAAA,CAAA;EACA,IAAA,CAAA,EAMV,UANU,CAAA,MAAA,CAAA;EACG,aAAA,CAAA,EAMJ,UANI,CAAA,eAAA,CAAA;EAEL,QAAA,CAAA,EAKJ,UALI,CAAA,UAAA,CAAA;EACF,UAAA,CAAA,EAKA,UALA,CAAA,YAAA,CAAA;EACD,QAAA,CAAA,EAKD,UALC,CAAA,UAAA,CAAA;EACL,cAAA,CAAA,EAKU,UALV,CAAA,gBAAA,CAAA;EACS,OAAA,CAAA,EAMN,UANM,CAAA,SAAA,CAAA;EACL,QAAA,CAAA,EAMA,UANA,CAAA,UAAA,CAAA;EACE,OAAA,CAAA,EAOH,UAPG,CAAA,SAAA,CAAA;EACF,iBAAA,CAAA,EAOS,UAPT,CAAA,mBAAA,CAAA;EACM,eAAA,CAAA,EAOC,UAPD,CAAA,iBAAA,CAAA;EAEP,aAAA,CAAA,EAMM,UANN,CAAA,eAAA,CAAA;EACC,UAAA,CAAA,EAME,UANF,CAAA,YAAA,CAAA;EAED,YAAA,CAAA,EAKK,UALL,CAAA,cAAA,CAAA;EACU,UAAA,CAAA,EAKP,UALO,CAAA,YAAA,CAAA;EACF,MAAA,CAAA,EAMT,UANS,CAAA,QAAA,CAAA;EACF,cAAA,CAAA,EAMC,UAND,CAAA,gBAAA,CAAA;EACH,gBAAA,CAAA,EAMM,UANN,CAAA,kBAAA,CAAA;EACE,YAAA,CAAA,EAMA,UANA,CAAA,cAAA,CAAA;EACF,SAAA,CAAA,EAMD,UANC,CAAA,WAAA,CAAA;EAEJ,WAAA,CAAA,EAKK,UALL,CAAA,aAAA,CAAA;EACQ,SAAA,CAAA,EAKL,UALK,CAAA,WAAA,CAAA;EACE,SAAA,CAAA,EAMP,UANO,CAAA,WAAA,CAAA;EACJ,MAAA,CAAA,EAMN,UANM,CAAA,QAAA,CAAA;EACH,OAAA,CAAA,EAAA,MAAA;;;;;;;;AAhD8C;AAqF7C;;;;;;;;;;;;;;;;;;;;cAAT,WAAS,MAAA,CAAA,qBAAA;cAoJT,mBAAiB,MAAA,CAAA,kBAAA,wBAAA,CAAA,cAAA"}