@yahoo/uds-mobile 1.3.0-beta.9 → 1.3.0

package/dist/components/Input.mjs

@@ -18,22 +18,34 @@ import { isFunction } from "lodash-es";
 * as a way to display a selection and trigger a dropdown menu. Inputs are interactive
 * elements that users can click, tap, or otherwise engage with to collect data.
 *
+* @category Form
+* @platform mobile
+*
 * @example
 * ```tsx
 * import { Input } from '@yahoo/uds-mobile';
 *
 * <Input label="Name" placeholder="Enter your name" required />
+* <Input label="Email" startIcon="Mail" helpText="We'll never share your email" />
+* <Input label="Password" secureTextEntry hasError helpText="Password is required" />
 * ```
 *
 * @usage
 * - Forms: For collecting data like names, emails, passwords, etc.
-* - Search Bars: Allowing users to enter search queries.
-* - Filters/Settings: When users need to specify preferences.
-* - Feedback/Comments: Letting users leave reviews or comments.
+* - Search Bars: Allowing users to enter search queries
+* - Filters/Settings: When users need to specify preferences
+* - Feedback/Comments: Letting users leave reviews or comments
+*
+* @accessibility
+* - Label is automatically associated with the input
+* - Help text is announced as accessibility hint
+* - Error state is communicated to screen readers
+* - Disabled state prevents interaction
 *
-* @see The {@link https://uds.build/docs/components/input Input Docs} for more info
+* @see {@link Checkbox} for boolean selections
+* @see {@link Radio} for single-select options
 */
-const Input = memo(function Input$1({ label, size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, disabled, readOnly, required, width = "100%", defaultValue, value: controlledValue, onChangeText, onFocus, onBlur, placeholder, placeholderTextColor, ref, ...textInputProps }) {
+const Input = memo(function Input({ label, size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, disabled, readOnly, required, width = "100%", defaultValue, value: controlledValue, onChangeText, onFocus, onBlur, placeholder, placeholderTextColor, ref, ...textInputProps }) {
 	const uid = `uds-input-${useId()}`;
 	const [internalValue, setInternalValue] = useState(defaultValue ?? "");
 	const [isFocused, setIsFocused] = useState(false);

package/dist/components/Input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.mjs","names":["Input","Text"],"sources":["../../src/components/Input.tsx"],"sourcesContent":["import type { UniversalInputProps } from '@yahoo/uds-types';\nimport { isFunction } from 'lodash-es';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { TextInputProps } from 'react-native';\nimport { TextInput, View } from 'react-native';\n\nimport { inputStyles } from '../../generated/styles';\nimport type { SizeProps } from '../types';\nimport { HStack } from './HStack';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Text } from './Text';\nimport { VStack } from './VStack';\n\n/* -------------------------------------------------------------------------- */\n/*                                   Types                                    */\n/* -------------------------------------------------------------------------- */\n\ninterface InputProps\n  extends\n    Omit<UniversalInputProps<IconSlotType>, 'width'>,\n    Omit<TextInputProps, 'style' | 'editable'>,\n    Pick<SizeProps, 'width'> {\n  ref?: Ref<TextInput>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Input Component                                */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **📦 An input that allows users to enter text and collect data.**\n *\n * @description\n * An input field is a component that takes text typed into it. It can also serve\n * as a way to display a selection and trigger a dropdown menu. Inputs are interactive\n * elements that users can click, tap, or otherwise engage with to collect data.\n *\n * @example\n * ```tsx\n * import { Input } from '@yahoo/uds-mobile';\n *\n * <Input label=\"Name\" placeholder=\"Enter your name\" required />\n * ```\n *\n * @usage\n * - Forms: For collecting data like names, emails, passwords, etc.\n * - Search Bars: Allowing users to enter search queries.\n * - Filters/Settings: When users need to specify preferences.\n * - Feedback/Comments: Letting users leave reviews or comments.\n *\n * @see The {@link https://uds.build/docs/components/input Input Docs} for more info\n */\nconst Input = memo(function Input({\n  // Input props\n  label,\n  size = 'md',\n  startIcon,\n  endIcon,\n  helpText,\n  helperTextIcon,\n  hasError,\n  disabled,\n  readOnly,\n  required,\n  // Size props\n  width = '100%',\n  // TextInput props\n  defaultValue,\n  value: controlledValue,\n  onChangeText,\n  onFocus,\n  onBlur,\n  placeholder,\n  placeholderTextColor,\n  ref,\n  ...textInputProps\n}: InputProps) {\n  const generatedId = useId();\n  const uid = `uds-input-${generatedId}`;\n\n  /* --------------------------------- State ---------------------------------- */\n  const [internalValue, setInternalValue] = useState(defaultValue ?? '');\n  const [isFocused, setIsFocused] = useState(false);\n\n  // Support both controlled and uncontrolled modes\n  const isControlled = controlledValue !== undefined;\n  const value = isControlled ? controlledValue : internalValue;\n  const valueState = value ? 'filled' : 'empty';\n\n  /* -------------------------------- Handlers -------------------------------- */\n  const handleChangeText = useCallback(\n    (text: string) => {\n      if (!isControlled) {\n        setInternalValue(text);\n      }\n      onChangeText?.(text);\n    },\n    [isControlled, onChangeText],\n  );\n\n  const handleFocus = useCallback<NonNullable<TextInputProps['onFocus']>>(\n    (e) => {\n      setIsFocused(true);\n      onFocus?.(e);\n    },\n    [onFocus],\n  );\n\n  const handleBlur = useCallback<NonNullable<TextInputProps['onBlur']>>(\n    (e) => {\n      setIsFocused(false);\n      onBlur?.(e);\n    },\n    [onBlur],\n  );\n\n  /* --------------------------------- Styles --------------------------------- */\n  inputStyles.useVariants({\n    size,\n    value: valueState,\n    disabled,\n    pressed: isFocused,\n    readonly: readOnly,\n    invalid: hasError,\n  });\n\n  // Get placeholder color from theme styles\n  const computedPlaceholderColor = placeholderTextColor ?? inputStyles.inputPlaceholder.color;\n\n  const rootStyle = useMemo(() => [{ width, opacity: disabled ? 0.5 : 1 }], [width, disabled]);\n\n  const inputWrapperStyle = useMemo(\n    () => [\n      inputStyles.inputWrapper,\n      { flexDirection: 'row' as const, alignItems: 'center' as const },\n    ],\n    [inputStyles.inputWrapper],\n  );\n\n  // Android-specific fixes: TextInput on Android has rendering issues with text visibility\n  // - includeFontPadding: false removes Android's extra font padding that can clip text\n  // - textAlignVertical: 'center' ensures text is vertically centered in the input\n  // - paddingVertical: 0 removes default padding that interferes with flex layout\n  const textInputStyle = useMemo(\n    () => [\n      inputStyles.input,\n      {\n        flex: 1,\n        includeFontPadding: false,\n        textAlignVertical: 'center' as const,\n        paddingVertical: 0,\n      },\n    ],\n    [inputStyles.input],\n  );\n\n  /* ---------------------------- Render Helpers ------------------------------ */\n  const labelContent = useMemo(() => {\n    if (!label) {\n      return null;\n    }\n    const content = isFunction(label) ? label() : label;\n    return (\n      <HStack columnGap=\"1\" alignItems=\"flex-end\" spacingBottom=\"2\">\n        <Text style={inputStyles.label}>{content}</Text>\n        {required && <Text style={inputStyles.labelRequired}>*</Text>}\n      </HStack>\n    );\n  }, [label, required, inputStyles.label, inputStyles.labelRequired]);\n\n  const startIconContent = useMemo(() => {\n    if (!startIcon) {\n      return null;\n    }\n    return <IconSlot icon={startIcon} variant=\"outline\" style={inputStyles.startIcon} />;\n  }, [startIcon, inputStyles.startIcon]);\n\n  const endIconContent = useMemo(() => {\n    if (!endIcon) {\n      return null;\n    }\n    return <IconSlot icon={endIcon} variant=\"outline\" style={inputStyles.endIcon} />;\n  }, [endIcon, inputStyles.endIcon]);\n\n  const helpTextContent = useMemo(() => {\n    if (!helpText) {\n      return null;\n    }\n    const content = isFunction(helpText) ? helpText() : helpText;\n    return (\n      <HStack columnGap=\"1\" alignItems=\"center\" spacingTop=\"2\">\n        {helperTextIcon && <IconSlot icon={helperTextIcon} style={inputStyles.helperIcon} />}\n        <Text style={inputStyles.helperText}>{content}</Text>\n      </HStack>\n    );\n  }, [helpText, helperTextIcon, inputStyles.helperIcon, inputStyles.helperText]);\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <VStack style={rootStyle}>\n      {labelContent}\n\n      <View\n        style={inputWrapperStyle}\n        accessible\n        accessibilityRole=\"none\"\n        accessibilityLabel={typeof label === 'string' ? label : undefined}\n      >\n        {startIconContent}\n\n        <TextInput\n          ref={ref}\n          nativeID={uid}\n          value={value}\n          onChangeText={handleChangeText}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          placeholder={placeholder}\n          placeholderTextColor={computedPlaceholderColor}\n          editable={!disabled && !readOnly}\n          style={textInputStyle}\n          accessibilityLabel={typeof label === 'string' ? label : undefined}\n          accessibilityHint={typeof helpText === 'string' ? helpText : undefined}\n          accessibilityState={{ disabled }}\n          {...textInputProps}\n        />\n\n        {endIconContent}\n      </View>\n\n      {helpTextContent}\n    </VStack>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport { Input, type InputProps };\n"],"mappings":"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"}
+{"version":3,"file":"Input.mjs","names":["Text"],"sources":["../../src/components/Input.tsx"],"sourcesContent":["import type { UniversalInputProps } from '@yahoo/uds-types';\nimport { isFunction } from 'lodash-es';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { TextInputProps } from 'react-native';\nimport { TextInput, View } from 'react-native';\n\nimport { inputStyles } from '../../generated/styles';\nimport type { SizeProps } from '../types';\nimport { HStack } from './HStack';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Text } from './Text';\nimport { VStack } from './VStack';\n\n/* -------------------------------------------------------------------------- */\n/*                                   Types                                    */\n/* -------------------------------------------------------------------------- */\n\ninterface InputProps\n  extends\n    Omit<UniversalInputProps<IconSlotType>, 'width'>,\n    Omit<TextInputProps, 'style' | 'editable'>,\n    Pick<SizeProps, 'width'> {\n  /** Ref to the underlying TextInput element */\n  ref?: Ref<TextInput>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Input Component                                */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **📦 An input that allows users to enter text and collect data.**\n *\n * @description\n * An input field is a component that takes text typed into it. It can also serve\n * as a way to display a selection and trigger a dropdown menu. Inputs are interactive\n * elements that users can click, tap, or otherwise engage with to collect data.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Input } from '@yahoo/uds-mobile';\n *\n * <Input label=\"Name\" placeholder=\"Enter your name\" required />\n * <Input label=\"Email\" startIcon=\"Mail\" helpText=\"We'll never share your email\" />\n * <Input label=\"Password\" secureTextEntry hasError helpText=\"Password is required\" />\n * ```\n *\n * @usage\n * - Forms: For collecting data like names, emails, passwords, etc.\n * - Search Bars: Allowing users to enter search queries\n * - Filters/Settings: When users need to specify preferences\n * - Feedback/Comments: Letting users leave reviews or comments\n *\n * @accessibility\n * - Label is automatically associated with the input\n * - Help text is announced as accessibility hint\n * - Error state is communicated to screen readers\n * - Disabled state prevents interaction\n *\n * @see {@link Checkbox} for boolean selections\n * @see {@link Radio} for single-select options\n */\nconst Input = memo(function Input({\n  // Input props\n  label,\n  size = 'md',\n  startIcon,\n  endIcon,\n  helpText,\n  helperTextIcon,\n  hasError,\n  disabled,\n  readOnly,\n  required,\n  // Size props\n  width = '100%',\n  // TextInput props\n  defaultValue,\n  value: controlledValue,\n  onChangeText,\n  onFocus,\n  onBlur,\n  placeholder,\n  placeholderTextColor,\n  ref,\n  ...textInputProps\n}: InputProps) {\n  const generatedId = useId();\n  const uid = `uds-input-${generatedId}`;\n\n  /* --------------------------------- State ---------------------------------- */\n  const [internalValue, setInternalValue] = useState(defaultValue ?? '');\n  const [isFocused, setIsFocused] = useState(false);\n\n  // Support both controlled and uncontrolled modes\n  const isControlled = controlledValue !== undefined;\n  const value = isControlled ? controlledValue : internalValue;\n  const valueState = value ? 'filled' : 'empty';\n\n  /* -------------------------------- Handlers -------------------------------- */\n  const handleChangeText = useCallback(\n    (text: string) => {\n      if (!isControlled) {\n        setInternalValue(text);\n      }\n      onChangeText?.(text);\n    },\n    [isControlled, onChangeText],\n  );\n\n  const handleFocus = useCallback<NonNullable<TextInputProps['onFocus']>>(\n    (e) => {\n      setIsFocused(true);\n      onFocus?.(e);\n    },\n    [onFocus],\n  );\n\n  const handleBlur = useCallback<NonNullable<TextInputProps['onBlur']>>(\n    (e) => {\n      setIsFocused(false);\n      onBlur?.(e);\n    },\n    [onBlur],\n  );\n\n  /* --------------------------------- Styles --------------------------------- */\n  inputStyles.useVariants({\n    size,\n    value: valueState,\n    disabled,\n    pressed: isFocused,\n    readonly: readOnly,\n    invalid: hasError,\n  });\n\n  // Get placeholder color from theme styles\n  const computedPlaceholderColor = placeholderTextColor ?? inputStyles.inputPlaceholder.color;\n\n  const rootStyle = useMemo(() => [{ width, opacity: disabled ? 0.5 : 1 }], [width, disabled]);\n\n  const inputWrapperStyle = useMemo(\n    () => [\n      inputStyles.inputWrapper,\n      { flexDirection: 'row' as const, alignItems: 'center' as const },\n    ],\n    [inputStyles.inputWrapper],\n  );\n\n  // Android-specific fixes: TextInput on Android has rendering issues with text visibility\n  // - includeFontPadding: false removes Android's extra font padding that can clip text\n  // - textAlignVertical: 'center' ensures text is vertically centered in the input\n  // - paddingVertical: 0 removes default padding that interferes with flex layout\n  const textInputStyle = useMemo(\n    () => [\n      inputStyles.input,\n      {\n        flex: 1,\n        includeFontPadding: false,\n        textAlignVertical: 'center' as const,\n        paddingVertical: 0,\n      },\n    ],\n    [inputStyles.input],\n  );\n\n  /* ---------------------------- Render Helpers ------------------------------ */\n  const labelContent = useMemo(() => {\n    if (!label) {\n      return null;\n    }\n    const content = isFunction(label) ? label() : label;\n    return (\n      <HStack columnGap=\"1\" alignItems=\"flex-end\" spacingBottom=\"2\">\n        <Text style={inputStyles.label}>{content}</Text>\n        {required && <Text style={inputStyles.labelRequired}>*</Text>}\n      </HStack>\n    );\n  }, [label, required, inputStyles.label, inputStyles.labelRequired]);\n\n  const startIconContent = useMemo(() => {\n    if (!startIcon) {\n      return null;\n    }\n    return <IconSlot icon={startIcon} variant=\"outline\" style={inputStyles.startIcon} />;\n  }, [startIcon, inputStyles.startIcon]);\n\n  const endIconContent = useMemo(() => {\n    if (!endIcon) {\n      return null;\n    }\n    return <IconSlot icon={endIcon} variant=\"outline\" style={inputStyles.endIcon} />;\n  }, [endIcon, inputStyles.endIcon]);\n\n  const helpTextContent = useMemo(() => {\n    if (!helpText) {\n      return null;\n    }\n    const content = isFunction(helpText) ? helpText() : helpText;\n    return (\n      <HStack columnGap=\"1\" alignItems=\"center\" spacingTop=\"2\">\n        {helperTextIcon && <IconSlot icon={helperTextIcon} style={inputStyles.helperIcon} />}\n        <Text style={inputStyles.helperText}>{content}</Text>\n      </HStack>\n    );\n  }, [helpText, helperTextIcon, inputStyles.helperIcon, inputStyles.helperText]);\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <VStack style={rootStyle}>\n      {labelContent}\n\n      <View\n        style={inputWrapperStyle}\n        accessible\n        accessibilityRole=\"none\"\n        accessibilityLabel={typeof label === 'string' ? label : undefined}\n      >\n        {startIconContent}\n\n        <TextInput\n          ref={ref}\n          nativeID={uid}\n          value={value}\n          onChangeText={handleChangeText}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          placeholder={placeholder}\n          placeholderTextColor={computedPlaceholderColor}\n          editable={!disabled && !readOnly}\n          style={textInputStyle}\n          accessibilityLabel={typeof label === 'string' ? label : undefined}\n          accessibilityHint={typeof helpText === 'string' ? helpText : undefined}\n          accessibilityState={{ disabled }}\n          {...textInputProps}\n        />\n\n        {endIconContent}\n      </View>\n\n      {helpTextContent}\n    </VStack>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport { Input, type InputProps };\n"],"mappings":"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"}

package/dist/components/Link.cjs

@@ -1,12 +1,13 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_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);
+react_native_reanimated = require_runtime.__toESM(react_native_reanimated);
 let react_native_unistyles_reanimated = require("react-native-unistyles/reanimated");
 
 //#region src/components/Link.tsx
@@ -19,6 +20,9 @@ const noUnderline = { textDecorationLine: "none" };
 * A styled link component for navigation. Rendered as Text so it can be
 * nested inline within other Text. Supports optional start/end icons.
 *
+* @category Interactive
+* @platform mobile
+*
 * @example
 * ```tsx
 * import { Link } from '@yahoo/uds-mobile';
@@ -34,9 +38,20 @@ const noUnderline = { textDecorationLine: "none" };
 * <Link endIcon="ChevronRight">Navigate forward</Link>
 * ```
 *
-* @see The {@link https://uds.build/docs/components/link Link Docs} for more info
+* @usage
+* - Use for navigation actions
+* - Can be nested within Text for inline links
+* - Use alwaysUnderline for links that need to be visually distinct
+*
+* @accessibility
+* - Link text is the accessible name
+* - Shows underline on press for visual feedback
+* - Use descriptive link text (avoid "click here")
+*
+* @see {@link Button} for primary actions
+* @see {@link Text} for non-interactive text
 */
-const Link = (0, react.memo)(function Link$1({ children, variant = "primary", textVariant, alwaysUnderline = false, startIcon, endIcon, onPress, style, ref, ...rest }) {
+const Link = (0, react.memo)(function Link({ 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);

package/dist/components/Link.d.cts

@@ -2,16 +2,19 @@
 import { UniversalLinkProps } from "../types/dist/index.cjs";
 import { IconSlotType } from "./IconSlot.cjs";
 import { TextProps as TextProps$1 } from "./Text.cjs";
-import * as react15 from "react";
+import * as react 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 override for the link text */
   style?: TextStyle;
+  /** Callback fired when the link is pressed */
   onPress?: TextProps$1['onPress'];
+  /** Ref to the underlying Text element */
   ref?: Ref<Text>;
+  /** Link content, typically text */
   children?: ReactNode;
 }
 /**
@@ -21,6 +24,9 @@ interface LinkProps extends UniversalLinkProps<IconSlotType> {
  * A styled link component for navigation. Rendered as Text so it can be
  * nested inline within other Text. Supports optional start/end icons.
  *
+ * @category Interactive
+ * @platform mobile
+ *
  * @example
  * ```tsx
  * import { Link } from '@yahoo/uds-mobile';
@@ -36,9 +42,20 @@ interface LinkProps extends UniversalLinkProps<IconSlotType> {
  * <Link endIcon="ChevronRight">Navigate forward</Link>
  * ```
  *
- * @see The {@link https://uds.build/docs/components/link Link Docs} for more info
+ * @usage
+ * - Use for navigation actions
+ * - Can be nested within Text for inline links
+ * - Use alwaysUnderline for links that need to be visually distinct
+ *
+ * @accessibility
+ * - Link text is the accessible name
+ * - Shows underline on press for visual feedback
+ * - Use descriptive link text (avoid "click here")
+ *
+ * @see {@link Button} for primary actions
+ * @see {@link Text} for non-interactive text
  */
-declare const Link: react15.NamedExoticComponent<LinkProps>;
+declare const Link: react.NamedExoticComponent<LinkProps>;
 //#endregion
 export { Link, type LinkProps };
 //# sourceMappingURL=Link.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Link.d.cts","names":[],"sources":["../../src/components/Link.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;UAwBU,SAAA,SAAkB,mBAAmB;;EAArC,KAAA,CAAA,EAEA,SAFU;EAA2B,OAAA,CAAA,EAGnC,WAHmC,CAAA,SAAA,CAAA;EAErC,GAAA,CAAA,EAEF,GAFE,CAEE,IAFF,CAAA;EACE,QAAA,CAAA,EAEC,SAFD;;;;;;AAHkC;;;;;;;;;;;;;;;;;;;;cAgCxC,MAAI,OAAA,CAAA,qBAAA"}
+{"version":3,"file":"Link.d.cts","names":[],"sources":["../../src/components/Link.tsx"],"mappings":";;;;;;;;;UAwBU,SAAA,SAAkB,kBAAA,CAAmB,YAAA;;EAE7C,KAAA,GAAQ,SAAA;EAFU;EAIlB,OAAA,GAAU,WAAA;EAJmC;EAM7C,GAAA,GAAM,GAAA,CAAI,IAAA;EAFA;EAIV,QAAA,GAAW,SAAA;AAAA;;;;;;;;;;;;;;;;;;AAAS;;;;;;;;;;;;;;;;;;;;;cAyChB,IAAA,EAAI,KAAA,CAAA,oBAAA,CAAA,SAAA"}

package/dist/components/Link.d.mts

@@ -2,16 +2,19 @@
 import { UniversalLinkProps } from "../types/dist/index.mjs";
 import { IconSlotType } from "./IconSlot.mjs";
 import { TextProps as TextProps$1 } from "./Text.mjs";
-import * as react0 from "react";
+import * as react 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 override for the link text */
   style?: TextStyle;
+  /** Callback fired when the link is pressed */
   onPress?: TextProps$1['onPress'];
+  /** Ref to the underlying Text element */
   ref?: Ref<Text>;
+  /** Link content, typically text */
   children?: ReactNode;
 }
 /**
@@ -21,6 +24,9 @@ interface LinkProps extends UniversalLinkProps<IconSlotType> {
  * A styled link component for navigation. Rendered as Text so it can be
  * nested inline within other Text. Supports optional start/end icons.
  *
+ * @category Interactive
+ * @platform mobile
+ *
  * @example
  * ```tsx
  * import { Link } from '@yahoo/uds-mobile';
@@ -36,9 +42,20 @@ interface LinkProps extends UniversalLinkProps<IconSlotType> {
  * <Link endIcon="ChevronRight">Navigate forward</Link>
  * ```
  *
- * @see The {@link https://uds.build/docs/components/link Link Docs} for more info
+ * @usage
+ * - Use for navigation actions
+ * - Can be nested within Text for inline links
+ * - Use alwaysUnderline for links that need to be visually distinct
+ *
+ * @accessibility
+ * - Link text is the accessible name
+ * - Shows underline on press for visual feedback
+ * - Use descriptive link text (avoid "click here")
+ *
+ * @see {@link Button} for primary actions
+ * @see {@link Text} for non-interactive text
  */
-declare const Link: react0.NamedExoticComponent<LinkProps>;
+declare const Link: react.NamedExoticComponent<LinkProps>;
 //#endregion
 export { Link, type LinkProps };
 //# sourceMappingURL=Link.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Link.d.mts","names":[],"sources":["../../src/components/Link.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;UAwBU,SAAA,SAAkB,mBAAmB;;EAArC,KAAA,CAAA,EAEA,SAFU;EAA2B,OAAA,CAAA,EAGnC,WAHmC,CAAA,SAAA,CAAA;EAErC,GAAA,CAAA,EAEF,GAFE,CAEE,IAFF,CAAA;EACE,QAAA,CAAA,EAEC,SAFD;;;;;;AAHkC;;;;;;;;;;;;;;;;;;;;cAgCxC,MAAI,MAAA,CAAA,qBAAA"}
+{"version":3,"file":"Link.d.mts","names":[],"sources":["../../src/components/Link.tsx"],"mappings":";;;;;;;;;UAwBU,SAAA,SAAkB,kBAAA,CAAmB,YAAA;;EAE7C,KAAA,GAAQ,SAAA;EAFU;EAIlB,OAAA,GAAU,WAAA;EAJmC;EAM7C,GAAA,GAAM,GAAA,CAAI,IAAA;EAFA;EAIV,QAAA,GAAW,SAAA;AAAA;;;;;;;;;;;;;;;;;;AAAS;;;;;;;;;;;;;;;;;;;;;cAyChB,IAAA,EAAI,KAAA,CAAA,oBAAA,CAAA,SAAA"}

package/dist/components/Link.mjs

@@ -17,6 +17,9 @@ const noUnderline = { textDecorationLine: "none" };
 * A styled link component for navigation. Rendered as Text so it can be
 * nested inline within other Text. Supports optional start/end icons.
 *
+* @category Interactive
+* @platform mobile
+*
 * @example
 * ```tsx
 * import { Link } from '@yahoo/uds-mobile';
@@ -32,9 +35,20 @@ const noUnderline = { textDecorationLine: "none" };
 * <Link endIcon="ChevronRight">Navigate forward</Link>
 * ```
 *
-* @see The {@link https://uds.build/docs/components/link Link Docs} for more info
+* @usage
+* - Use for navigation actions
+* - Can be nested within Text for inline links
+* - Use alwaysUnderline for links that need to be visually distinct
+*
+* @accessibility
+* - Link text is the accessible name
+* - Shows underline on press for visual feedback
+* - Use descriptive link text (avoid "click here")
+*
+* @see {@link Button} for primary actions
+* @see {@link Text} for non-interactive text
 */
-const Link = memo(function Link$1({ children, variant = "primary", textVariant, alwaysUnderline = false, startIcon, endIcon, onPress, style, ref, ...rest }) {
+const Link = memo(function Link({ children, variant = "primary", textVariant, alwaysUnderline = false, startIcon, endIcon, onPress, style, ref, ...rest }) {
 	const [pressed, setPressed] = useState(false);
 	const handlePressIn = useCallback(() => {
 		setPressed(true);

package/dist/components/Link.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Link.mjs","names":["noUnderline: TextStyle","Link","RNText"],"sources":["../../src/components/Link.tsx"],"sourcesContent":["import type { UniversalLinkProps } from '@yahoo/uds-types';\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"}
+{"version":3,"file":"Link.mjs","names":["RNText"],"sources":["../../src/components/Link.tsx"],"sourcesContent":["import type { UniversalLinkProps } from '@yahoo/uds-types';\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 for the link text */\n  style?: TextStyle;\n  /** Callback fired when the link is pressed */\n  onPress?: TextProps['onPress'];\n  /** Ref to the underlying Text element */\n  ref?: Ref<RNText>;\n  /** Link content, typically text */\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 * @category Interactive\n * @platform mobile\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 * @usage\n * - Use for navigation actions\n * - Can be nested within Text for inline links\n * - Use alwaysUnderline for links that need to be visually distinct\n *\n * @accessibility\n * - Link text is the accessible name\n * - Shows underline on press for visual feedback\n * - Use descriptive link text (avoid \"click here\")\n *\n * @see {@link Button} for primary actions\n * @see {@link Text} for non-interactive text\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,MAAM,cAAyB,EAAE,oBAAoB,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmD7D,MAAM,OAAO,KAAK,SAAS,KAAK,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,oBAACA;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

@@ -1,11 +1,12 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_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);
+react_native_reanimated = require_runtime.__toESM(react_native_reanimated);
 
 //#region src/components/Pressable.tsx
 /**
@@ -13,7 +14,11 @@ react_native_reanimated = require_rolldown_runtime.__toESM(react_native_reanimat
 *
 * @description
 * A styled pressable component that wraps React Native's Pressable with
-* UDS styling support.
+* UDS styling support. Use this as a building block for custom interactive
+* components.
+*
+* @category Interactive
+* @platform mobile
 *
 * @example
 * ```tsx
@@ -31,11 +36,18 @@ react_native_reanimated = require_rolldown_runtime.__toESM(react_native_reanimat
 *
 * @usage
 * - Use for interactive elements that need press feedback
+* - Use for custom button-like components
 * - Supports all Box styling props
 *
-* @see The {@link https://uds.build/docs/components/pressable Pressable Docs} for more info
+* @accessibility
+* - Set `accessibilityRole` appropriate to the component's purpose
+* - Provide `accessibilityLabel` for screen readers
+* - Use `accessibilityState` to communicate state changes
+*
+* @see {@link Button} for standard button actions
+* @see {@link Box} for non-interactive containers
 */
-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 }) {
+const Pressable = (0, react.memo)(function Pressable({ 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,

package/dist/components/Pressable.d.cts

@@ -1,6 +1,6 @@
 
 import { SizeProps } from "../types.cjs";
-import * as react12 from "react";
+import * as react from "react";
 import { Ref } from "react";
 import { PressableProps as PressableProps$1, View } from "react-native";
 import { StyleProps } from "../../generated/styles";
@@ -8,7 +8,9 @@ import * as react_native_reanimated0 from "react-native-reanimated";
 
 //#region src/components/Pressable.d.ts
 interface PressableProps extends PressableProps$1, SizeProps {
+  /** Ref to the underlying View */
   ref?: Ref<View>;
+  /** Background color */
   backgroundColor?: StyleProps['backgroundColor'];
   borderRadius?: StyleProps['borderRadius'];
   borderTopStartRadius?: StyleProps['borderTopStartRadius'];
@@ -61,7 +63,11 @@ interface PressableProps extends PressableProps$1, SizeProps {
  *
  * @description
  * A styled pressable component that wraps React Native's Pressable with
- * UDS styling support.
+ * UDS styling support. Use this as a building block for custom interactive
+ * components.
+ *
+ * @category Interactive
+ * @platform mobile
  *
  * @example
  * ```tsx
@@ -79,12 +85,19 @@ interface PressableProps extends PressableProps$1, SizeProps {
  *
  * @usage
  * - Use for interactive elements that need press feedback
+ * - Use for custom button-like components
  * - Supports all Box styling props
  *
- * @see The {@link https://uds.build/docs/components/pressable Pressable Docs} for more info
+ * @accessibility
+ * - Set `accessibilityRole` appropriate to the component's purpose
+ * - Provide `accessibilityLabel` for screen readers
+ * - Use `accessibilityState` to communicate state changes
+ *
+ * @see {@link Button} for standard button actions
+ * @see {@link Box} for non-interactive containers
  */
-declare const Pressable: react12.NamedExoticComponent<PressableProps>;
-declare const AnimatedPressable: react12.FunctionComponent<react_native_reanimated0.AnimatedProps<PressableProps>>;
+declare const Pressable: react.NamedExoticComponent<PressableProps>;
+declare const AnimatedPressable: react.FunctionComponent<react_native_reanimated0.AnimatedProps<PressableProps>>;
 //#endregion
 export { AnimatedPressable, Pressable, type PressableProps };
 //# sourceMappingURL=Pressable.d.cts.map

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

@@ -1 +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,OAAA,CAAA,qBAAA;cAoJT,mBAAiB,OAAA,CAAA,kBAAA,wBAAA,CAAA,cAAA"}
+{"version":3,"file":"Pressable.d.cts","names":[],"sources":["../../src/components/Pressable.tsx"],"mappings":";;;;;;;;;UAgBU,cAAA,SAAuB,gBAAA,EAAkB,SAAA;;EAEjD,GAAA,GAAM,GAAA,CAAI,IAAA;;EAEV,eAAA,GAAkB,UAAA;EAElB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EAEpB,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,SAAA,GAAY,UAAA;EACZ,IAAA,GAAO,UAAA;EACP,aAAA,GAAgB,UAAA;EAChB,QAAA,GAAW,UAAA;EACX,UAAA,GAAa,UAAA;EACb,QAAA,GAAW,UAAA;EACX,cAAA,GAAiB,UAAA;EAEjB,OAAA,GAAU,UAAA;EACV,QAAA,GAAW,UAAA;EAEX,OAAA,GAAU,UAAA;EACV,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,aAAA,GAAgB,UAAA;EAChB,UAAA,GAAa,UAAA;EACb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EAEb,MAAA,GAAS,UAAA;EACT,cAAA,GAAiB,UAAA;EACjB,gBAAA,GAAmB,UAAA;EACnB,YAAA,GAAe,UAAA;EACf,SAAA,GAAY,UAAA;EACZ,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EAEZ,SAAA,GAAY,UAAA;EACZ,MAAA,GAAS,UAAA;EAET,OAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAyCI,SAAA,EAAS,KAAA,CAAA,oBAAA,CAAA,cAAA;AAAA,cAoJT,iBAAA,EAAiB,KAAA,CAAA,iBAAA,CAAA,wBAAA,CAAA,aAAA,CAAA,cAAA"}

package/dist/components/Pressable.d.mts

@@ -1,6 +1,6 @@
 
 import { SizeProps } from "../types.mjs";
-import * as react10 from "react";
+import * as react from "react";
 import { Ref } from "react";
 import { PressableProps as PressableProps$1, View } from "react-native";
 import { StyleProps } from "../../generated/styles";
@@ -8,7 +8,9 @@ import * as react_native_reanimated0 from "react-native-reanimated";
 
 //#region src/components/Pressable.d.ts
 interface PressableProps extends PressableProps$1, SizeProps {
+  /** Ref to the underlying View */
   ref?: Ref<View>;
+  /** Background color */
   backgroundColor?: StyleProps['backgroundColor'];
   borderRadius?: StyleProps['borderRadius'];
   borderTopStartRadius?: StyleProps['borderTopStartRadius'];
@@ -61,7 +63,11 @@ interface PressableProps extends PressableProps$1, SizeProps {
  *
  * @description
  * A styled pressable component that wraps React Native's Pressable with
- * UDS styling support.
+ * UDS styling support. Use this as a building block for custom interactive
+ * components.
+ *
+ * @category Interactive
+ * @platform mobile
  *
  * @example
  * ```tsx
@@ -79,12 +85,19 @@ interface PressableProps extends PressableProps$1, SizeProps {
  *
  * @usage
  * - Use for interactive elements that need press feedback
+ * - Use for custom button-like components
  * - Supports all Box styling props
  *
- * @see The {@link https://uds.build/docs/components/pressable Pressable Docs} for more info
+ * @accessibility
+ * - Set `accessibilityRole` appropriate to the component's purpose
+ * - Provide `accessibilityLabel` for screen readers
+ * - Use `accessibilityState` to communicate state changes
+ *
+ * @see {@link Button} for standard button actions
+ * @see {@link Box} for non-interactive containers
  */
-declare const Pressable: react10.NamedExoticComponent<PressableProps>;
-declare const AnimatedPressable: react10.FunctionComponent<react_native_reanimated0.AnimatedProps<PressableProps>>;
+declare const Pressable: react.NamedExoticComponent<PressableProps>;
+declare const AnimatedPressable: react.FunctionComponent<react_native_reanimated0.AnimatedProps<PressableProps>>;
 //#endregion
 export { AnimatedPressable, Pressable, type PressableProps };
 //# sourceMappingURL=Pressable.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Pressable.d.mts","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,OAAA,CAAA,qBAAA;cAoJT,mBAAiB,OAAA,CAAA,kBAAA,wBAAA,CAAA,cAAA"}
+{"version":3,"file":"Pressable.d.mts","names":[],"sources":["../../src/components/Pressable.tsx"],"mappings":";;;;;;;;;UAgBU,cAAA,SAAuB,gBAAA,EAAkB,SAAA;;EAEjD,GAAA,GAAM,GAAA,CAAI,IAAA;;EAEV,eAAA,GAAkB,UAAA;EAElB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EAEpB,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,SAAA,GAAY,UAAA;EACZ,IAAA,GAAO,UAAA;EACP,aAAA,GAAgB,UAAA;EAChB,QAAA,GAAW,UAAA;EACX,UAAA,GAAa,UAAA;EACb,QAAA,GAAW,UAAA;EACX,cAAA,GAAiB,UAAA;EAEjB,OAAA,GAAU,UAAA;EACV,QAAA,GAAW,UAAA;EAEX,OAAA,GAAU,UAAA;EACV,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,aAAA,GAAgB,UAAA;EAChB,UAAA,GAAa,UAAA;EACb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EAEb,MAAA,GAAS,UAAA;EACT,cAAA,GAAiB,UAAA;EACjB,gBAAA,GAAmB,UAAA;EACnB,YAAA,GAAe,UAAA;EACf,SAAA,GAAY,UAAA;EACZ,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EAEZ,SAAA,GAAY,UAAA;EACZ,MAAA,GAAS,UAAA;EAET,OAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAyCI,SAAA,EAAS,KAAA,CAAA,oBAAA,CAAA,cAAA;AAAA,cAoJT,iBAAA,EAAiB,KAAA,CAAA,iBAAA,CAAA,wBAAA,CAAA,aAAA,CAAA,cAAA"}

package/dist/components/Pressable.mjs

@@ -11,7 +11,11 @@ import Animated from "react-native-reanimated";
 *
 * @description
 * A styled pressable component that wraps React Native's Pressable with
-* UDS styling support.
+* UDS styling support. Use this as a building block for custom interactive
+* components.
+*
+* @category Interactive
+* @platform mobile
 *
 * @example
 * ```tsx
@@ -29,11 +33,18 @@ import Animated from "react-native-reanimated";
 *
 * @usage
 * - Use for interactive elements that need press feedback
+* - Use for custom button-like components
 * - Supports all Box styling props
 *
-* @see The {@link https://uds.build/docs/components/pressable Pressable Docs} for more info
+* @accessibility
+* - Set `accessibilityRole` appropriate to the component's purpose
+* - Provide `accessibilityLabel` for screen readers
+* - Use `accessibilityState` to communicate state changes
+*
+* @see {@link Button} for standard button actions
+* @see {@link Box} for non-interactive containers
 */
-const Pressable = memo(function Pressable$2({ 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 }) {
+const Pressable = memo(function Pressable({ 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 }) {
 	styles.useVariants({
 		backgroundColor,
 		borderRadius,

package/dist/components/Pressable.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pressable.mjs","names":["Pressable","RNPressable"],"sources":["../../src/components/Pressable.tsx"],"sourcesContent":["import type { Ref } from 'react';\nimport { memo, useCallback } from 'react';\nimport type {\n  PressableProps as RNPressableProps,\n  PressableStateCallbackType,\n  StyleProp,\n  View,\n  ViewStyle,\n} from 'react-native';\nimport { Pressable as RNPressable } from 'react-native';\nimport Animated from 'react-native-reanimated';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\nimport type { SizeProps } from '../types';\n\ninterface PressableProps extends RNPressableProps, SizeProps {\n  ref?: Ref<View>;\n  // Background\n  backgroundColor?: StyleProps['backgroundColor'];\n  // Border\n  borderRadius?: StyleProps['borderRadius'];\n  borderTopStartRadius?: StyleProps['borderTopStartRadius'];\n  borderTopEndRadius?: StyleProps['borderTopEndRadius'];\n  borderBottomStartRadius?: StyleProps['borderBottomStartRadius'];\n  borderBottomEndRadius?: StyleProps['borderBottomEndRadius'];\n  borderColor?: StyleProps['borderColor'];\n  borderStartColor?: StyleProps['borderStartColor'];\n  borderEndColor?: StyleProps['borderEndColor'];\n  borderTopColor?: StyleProps['borderTopColor'];\n  borderBottomColor?: StyleProps['borderBottomColor'];\n  borderWidth?: StyleProps['borderWidth'];\n  borderVerticalWidth?: StyleProps['borderVerticalWidth'];\n  borderHorizontalWidth?: StyleProps['borderHorizontalWidth'];\n  borderStartWidth?: StyleProps['borderStartWidth'];\n  borderEndWidth?: StyleProps['borderEndWidth'];\n  borderTopWidth?: StyleProps['borderTopWidth'];\n  borderBottomWidth?: StyleProps['borderBottomWidth'];\n  // Flex\n  alignContent?: StyleProps['alignContent'];\n  alignItems?: StyleProps['alignItems'];\n  alignSelf?: StyleProps['alignSelf'];\n  flex?: StyleProps['flex'];\n  flexDirection?: StyleProps['flexDirection'];\n  flexGrow?: StyleProps['flexGrow'];\n  flexShrink?: StyleProps['flexShrink'];\n  flexWrap?: StyleProps['flexWrap'];\n  justifyContent?: StyleProps['justifyContent'];\n  // Layout\n  display?: StyleProps['display'];\n  overflow?: StyleProps['overflow'];\n  // Spacing\n  spacing?: StyleProps['spacing'];\n  spacingHorizontal?: StyleProps['spacingHorizontal'];\n  spacingVertical?: StyleProps['spacingVertical'];\n  spacingBottom?: StyleProps['spacingBottom'];\n  spacingEnd?: StyleProps['spacingEnd'];\n  spacingStart?: StyleProps['spacingStart'];\n  spacingTop?: StyleProps['spacingTop'];\n  // Offset\n  offset?: StyleProps['offset'];\n  offsetVertical?: StyleProps['offsetVertical'];\n  offsetHorizontal?: StyleProps['offsetHorizontal'];\n  offsetBottom?: StyleProps['offsetBottom'];\n  offsetEnd?: StyleProps['offsetEnd'];\n  offsetStart?: StyleProps['offsetStart'];\n  offsetTop?: StyleProps['offsetTop'];\n  // Gap\n  columnGap?: StyleProps['columnGap'];\n  rowGap?: StyleProps['rowGap'];\n  // Opacity\n  opacity?: number;\n}\n\n/**\n * **👆 A pressable component with UDS styling**\n *\n * @description\n * A styled pressable component that wraps React Native's Pressable with\n * UDS styling support.\n *\n * @example\n * ```tsx\n * import { Pressable } from '@yahoo/uds-mobile';\n *\n * <Pressable\n *   backgroundColor=\"primary\"\n *   spacing=\"4\"\n *   borderRadius=\"md\"\n *   onPress={() => console.log('Pressed!')}\n * >\n *   <Text>Press me</Text>\n * </Pressable>\n * ```\n *\n * @usage\n * - Use for interactive elements that need press feedback\n * - Supports all Box styling props\n *\n * @see The {@link https://uds.build/docs/components/pressable Pressable Docs} for more info\n */\nconst Pressable = memo(function Pressable({\n  // Background\n  backgroundColor,\n  // Border\n  borderRadius,\n  borderTopStartRadius,\n  borderTopEndRadius,\n  borderBottomStartRadius,\n  borderBottomEndRadius,\n  borderColor,\n  borderStartColor,\n  borderEndColor,\n  borderTopColor,\n  borderBottomColor,\n  borderWidth,\n  borderVerticalWidth,\n  borderHorizontalWidth,\n  borderStartWidth,\n  borderEndWidth,\n  borderTopWidth,\n  borderBottomWidth,\n  // Flex\n  alignContent,\n  alignItems,\n  alignSelf,\n  flex,\n  flexDirection,\n  flexGrow,\n  flexShrink,\n  flexWrap,\n  justifyContent,\n  // Layout\n  display = 'flex',\n  overflow,\n  // Spacing\n  spacing,\n  spacingHorizontal,\n  spacingVertical,\n  spacingBottom,\n  spacingEnd,\n  spacingStart,\n  spacingTop,\n  // Offset\n  offset,\n  offsetVertical,\n  offsetHorizontal,\n  offsetBottom,\n  offsetEnd,\n  offsetStart,\n  offsetTop,\n  // Gap\n  columnGap,\n  rowGap,\n  // Size\n  width,\n  height,\n  minWidth,\n  maxWidth,\n  minHeight,\n  maxHeight,\n  // Opacity\n  opacity,\n  // Style - extracted to merge with variants\n  style,\n  ref,\n  // Rest\n  ...props\n}: PressableProps) {\n  styles.useVariants({\n    // Background\n    backgroundColor,\n    // Border\n    borderRadius,\n    borderTopStartRadius,\n    borderTopEndRadius,\n    borderBottomStartRadius,\n    borderBottomEndRadius,\n    borderColor,\n    borderStartColor,\n    borderEndColor,\n    borderTopColor,\n    borderBottomColor,\n    borderWidth,\n    borderVerticalWidth,\n    borderHorizontalWidth,\n    borderStartWidth,\n    borderEndWidth,\n    borderTopWidth,\n    borderBottomWidth,\n    // Flex\n    alignContent,\n    alignItems,\n    alignSelf,\n    flex,\n    flexDirection,\n    flexGrow,\n    flexShrink,\n    flexWrap,\n    justifyContent,\n    // Layout\n    display,\n    overflow,\n    // Spacing\n    spacing,\n    spacingHorizontal,\n    spacingVertical,\n    spacingBottom,\n    spacingEnd,\n    spacingStart,\n    spacingTop,\n    // Offset\n    offset,\n    offsetVertical,\n    offsetHorizontal,\n    offsetBottom,\n    offsetEnd,\n    offsetStart,\n    offsetTop,\n    // Gap\n    columnGap,\n    rowGap,\n  });\n\n  // Merge variant styles with user-provided style prop\n  // Handle the case where style can be a function (for press states)\n  const pressableStyles = useCallback(\n    (state: PressableStateCallbackType) => {\n      const userStyle = typeof style === 'function' ? style(state) : style;\n      return [\n        width ? { width } : undefined,\n        height ? { height } : undefined,\n        minWidth ? { minWidth } : undefined,\n        maxWidth ? { maxWidth } : undefined,\n        minHeight ? { minHeight } : undefined,\n        maxHeight ? { maxHeight } : undefined,\n        opacity ? { opacity } : undefined,\n        styles.foundation as StyleProp<ViewStyle>,\n        userStyle,\n      ];\n    },\n    [width, height, minWidth, maxWidth, minHeight, maxHeight, opacity, style, styles.foundation],\n  );\n\n  return <RNPressable ref={ref} style={pressableStyles} {...props} />;\n});\n\nPressable.displayName = 'Pressable';\n\nconst AnimatedPressable = Animated.createAnimatedComponent(Pressable);\n\nexport { AnimatedPressable, Pressable, type PressableProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqGA,MAAM,YAAY,KAAK,SAASA,YAAU,EAExC,iBAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,cACA,YACA,WACA,MACA,eACA,UACA,YACA,UACA,gBAEA,UAAU,QACV,UAEA,SACA,mBACA,iBACA,eACA,YACA,cACA,YAEA,QACA,gBACA,kBACA,cACA,WACA,aACA,WAEA,WACA,QAEA,OACA,QACA,UACA,UACA,WACA,WAEA,SAEA,OACA,KAEA,GAAG,SACc;AACjB,QAAO,YAAY;EAEjB;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACD,CAAC;AAsBF,QAAO,oBAACC;EAAiB;EAAK,OAlBN,aACrB,UAAsC;GACrC,MAAM,YAAY,OAAO,UAAU,aAAa,MAAM,MAAM,GAAG;AAC/D,UAAO;IACL,QAAQ,EAAE,OAAO,GAAG;IACpB,SAAS,EAAE,QAAQ,GAAG;IACtB,WAAW,EAAE,UAAU,GAAG;IAC1B,WAAW,EAAE,UAAU,GAAG;IAC1B,YAAY,EAAE,WAAW,GAAG;IAC5B,YAAY,EAAE,WAAW,GAAG;IAC5B,UAAU,EAAE,SAAS,GAAG;IACxB,OAAO;IACP;IACD;KAEH;GAAC;GAAO;GAAQ;GAAU;GAAU;GAAW;GAAW;GAAS;GAAO,OAAO;GAAW,CAC7F;EAEqD,GAAI;GAAS;EACnE;AAEF,UAAU,cAAc;AAExB,MAAM,oBAAoB,SAAS,wBAAwB,UAAU"}
+{"version":3,"file":"Pressable.mjs","names":["RNPressable"],"sources":["../../src/components/Pressable.tsx"],"sourcesContent":["import type { Ref } from 'react';\nimport { memo, useCallback } from 'react';\nimport type {\n  PressableProps as RNPressableProps,\n  PressableStateCallbackType,\n  StyleProp,\n  View,\n  ViewStyle,\n} from 'react-native';\nimport { Pressable as RNPressable } from 'react-native';\nimport Animated from 'react-native-reanimated';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\nimport type { SizeProps } from '../types';\n\ninterface PressableProps extends RNPressableProps, SizeProps {\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n  /** Background color */\n  backgroundColor?: StyleProps['backgroundColor'];\n  // Border\n  borderRadius?: StyleProps['borderRadius'];\n  borderTopStartRadius?: StyleProps['borderTopStartRadius'];\n  borderTopEndRadius?: StyleProps['borderTopEndRadius'];\n  borderBottomStartRadius?: StyleProps['borderBottomStartRadius'];\n  borderBottomEndRadius?: StyleProps['borderBottomEndRadius'];\n  borderColor?: StyleProps['borderColor'];\n  borderStartColor?: StyleProps['borderStartColor'];\n  borderEndColor?: StyleProps['borderEndColor'];\n  borderTopColor?: StyleProps['borderTopColor'];\n  borderBottomColor?: StyleProps['borderBottomColor'];\n  borderWidth?: StyleProps['borderWidth'];\n  borderVerticalWidth?: StyleProps['borderVerticalWidth'];\n  borderHorizontalWidth?: StyleProps['borderHorizontalWidth'];\n  borderStartWidth?: StyleProps['borderStartWidth'];\n  borderEndWidth?: StyleProps['borderEndWidth'];\n  borderTopWidth?: StyleProps['borderTopWidth'];\n  borderBottomWidth?: StyleProps['borderBottomWidth'];\n  // Flex\n  alignContent?: StyleProps['alignContent'];\n  alignItems?: StyleProps['alignItems'];\n  alignSelf?: StyleProps['alignSelf'];\n  flex?: StyleProps['flex'];\n  flexDirection?: StyleProps['flexDirection'];\n  flexGrow?: StyleProps['flexGrow'];\n  flexShrink?: StyleProps['flexShrink'];\n  flexWrap?: StyleProps['flexWrap'];\n  justifyContent?: StyleProps['justifyContent'];\n  // Layout\n  display?: StyleProps['display'];\n  overflow?: StyleProps['overflow'];\n  // Spacing\n  spacing?: StyleProps['spacing'];\n  spacingHorizontal?: StyleProps['spacingHorizontal'];\n  spacingVertical?: StyleProps['spacingVertical'];\n  spacingBottom?: StyleProps['spacingBottom'];\n  spacingEnd?: StyleProps['spacingEnd'];\n  spacingStart?: StyleProps['spacingStart'];\n  spacingTop?: StyleProps['spacingTop'];\n  // Offset\n  offset?: StyleProps['offset'];\n  offsetVertical?: StyleProps['offsetVertical'];\n  offsetHorizontal?: StyleProps['offsetHorizontal'];\n  offsetBottom?: StyleProps['offsetBottom'];\n  offsetEnd?: StyleProps['offsetEnd'];\n  offsetStart?: StyleProps['offsetStart'];\n  offsetTop?: StyleProps['offsetTop'];\n  // Gap\n  columnGap?: StyleProps['columnGap'];\n  rowGap?: StyleProps['rowGap'];\n  // Opacity\n  opacity?: number;\n}\n\n/**\n * **👆 A pressable component with UDS styling**\n *\n * @description\n * A styled pressable component that wraps React Native's Pressable with\n * UDS styling support. Use this as a building block for custom interactive\n * components.\n *\n * @category Interactive\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Pressable } from '@yahoo/uds-mobile';\n *\n * <Pressable\n *   backgroundColor=\"primary\"\n *   spacing=\"4\"\n *   borderRadius=\"md\"\n *   onPress={() => console.log('Pressed!')}\n * >\n *   <Text>Press me</Text>\n * </Pressable>\n * ```\n *\n * @usage\n * - Use for interactive elements that need press feedback\n * - Use for custom button-like components\n * - Supports all Box styling props\n *\n * @accessibility\n * - Set `accessibilityRole` appropriate to the component's purpose\n * - Provide `accessibilityLabel` for screen readers\n * - Use `accessibilityState` to communicate state changes\n *\n * @see {@link Button} for standard button actions\n * @see {@link Box} for non-interactive containers\n */\nconst Pressable = memo(function Pressable({\n  // Background\n  backgroundColor,\n  // Border\n  borderRadius,\n  borderTopStartRadius,\n  borderTopEndRadius,\n  borderBottomStartRadius,\n  borderBottomEndRadius,\n  borderColor,\n  borderStartColor,\n  borderEndColor,\n  borderTopColor,\n  borderBottomColor,\n  borderWidth,\n  borderVerticalWidth,\n  borderHorizontalWidth,\n  borderStartWidth,\n  borderEndWidth,\n  borderTopWidth,\n  borderBottomWidth,\n  // Flex\n  alignContent,\n  alignItems,\n  alignSelf,\n  flex,\n  flexDirection,\n  flexGrow,\n  flexShrink,\n  flexWrap,\n  justifyContent,\n  // Layout\n  display = 'flex',\n  overflow,\n  // Spacing\n  spacing,\n  spacingHorizontal,\n  spacingVertical,\n  spacingBottom,\n  spacingEnd,\n  spacingStart,\n  spacingTop,\n  // Offset\n  offset,\n  offsetVertical,\n  offsetHorizontal,\n  offsetBottom,\n  offsetEnd,\n  offsetStart,\n  offsetTop,\n  // Gap\n  columnGap,\n  rowGap,\n  // Size\n  width,\n  height,\n  minWidth,\n  maxWidth,\n  minHeight,\n  maxHeight,\n  // Opacity\n  opacity,\n  // Style - extracted to merge with variants\n  style,\n  ref,\n  // Rest\n  ...props\n}: PressableProps) {\n  styles.useVariants({\n    // Background\n    backgroundColor,\n    // Border\n    borderRadius,\n    borderTopStartRadius,\n    borderTopEndRadius,\n    borderBottomStartRadius,\n    borderBottomEndRadius,\n    borderColor,\n    borderStartColor,\n    borderEndColor,\n    borderTopColor,\n    borderBottomColor,\n    borderWidth,\n    borderVerticalWidth,\n    borderHorizontalWidth,\n    borderStartWidth,\n    borderEndWidth,\n    borderTopWidth,\n    borderBottomWidth,\n    // Flex\n    alignContent,\n    alignItems,\n    alignSelf,\n    flex,\n    flexDirection,\n    flexGrow,\n    flexShrink,\n    flexWrap,\n    justifyContent,\n    // Layout\n    display,\n    overflow,\n    // Spacing\n    spacing,\n    spacingHorizontal,\n    spacingVertical,\n    spacingBottom,\n    spacingEnd,\n    spacingStart,\n    spacingTop,\n    // Offset\n    offset,\n    offsetVertical,\n    offsetHorizontal,\n    offsetBottom,\n    offsetEnd,\n    offsetStart,\n    offsetTop,\n    // Gap\n    columnGap,\n    rowGap,\n  });\n\n  // Merge variant styles with user-provided style prop\n  // Handle the case where style can be a function (for press states)\n  const pressableStyles = useCallback(\n    (state: PressableStateCallbackType) => {\n      const userStyle = typeof style === 'function' ? style(state) : style;\n      return [\n        width ? { width } : undefined,\n        height ? { height } : undefined,\n        minWidth ? { minWidth } : undefined,\n        maxWidth ? { maxWidth } : undefined,\n        minHeight ? { minHeight } : undefined,\n        maxHeight ? { maxHeight } : undefined,\n        opacity ? { opacity } : undefined,\n        styles.foundation as StyleProp<ViewStyle>,\n        userStyle,\n      ];\n    },\n    [width, height, minWidth, maxWidth, minHeight, maxHeight, opacity, style, styles.foundation],\n  );\n\n  return <RNPressable ref={ref} style={pressableStyles} {...props} />;\n});\n\nPressable.displayName = 'Pressable';\n\nconst AnimatedPressable = Animated.createAnimatedComponent(Pressable);\n\nexport { AnimatedPressable, Pressable, type PressableProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiHA,MAAM,YAAY,KAAK,SAAS,UAAU,EAExC,iBAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,cACA,YACA,WACA,MACA,eACA,UACA,YACA,UACA,gBAEA,UAAU,QACV,UAEA,SACA,mBACA,iBACA,eACA,YACA,cACA,YAEA,QACA,gBACA,kBACA,cACA,WACA,aACA,WAEA,WACA,QAEA,OACA,QACA,UACA,UACA,WACA,WAEA,SAEA,OACA,KAEA,GAAG,SACc;AACjB,QAAO,YAAY;EAEjB;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACD,CAAC;AAsBF,QAAO,oBAACA;EAAiB;EAAK,OAlBN,aACrB,UAAsC;GACrC,MAAM,YAAY,OAAO,UAAU,aAAa,MAAM,MAAM,GAAG;AAC/D,UAAO;IACL,QAAQ,EAAE,OAAO,GAAG;IACpB,SAAS,EAAE,QAAQ,GAAG;IACtB,WAAW,EAAE,UAAU,GAAG;IAC1B,WAAW,EAAE,UAAU,GAAG;IAC1B,YAAY,EAAE,WAAW,GAAG;IAC5B,YAAY,EAAE,WAAW,GAAG;IAC5B,UAAU,EAAE,SAAS,GAAG;IACxB,OAAO;IACP;IACD;KAEH;GAAC;GAAO;GAAQ;GAAU;GAAU;GAAW;GAAW;GAAS;GAAO,OAAO;GAAW,CAC7F;EAEqD,GAAI;GAAS;EACnE;AAEF,UAAU,cAAc;AAExB,MAAM,oBAAoB,SAAS,wBAAwB,UAAU"}