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

package/dist/components/Checkbox.d.mts

@@ -1,11 +1,12 @@
 
 import { UniversalCheckboxProps } from "../types/dist/index.mjs";
-import * as react14 from "react";
+import * as react from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
 
 //#region src/components/Checkbox.d.ts
 interface CheckboxProps extends Omit<ViewProps, 'style'>, UniversalCheckboxProps {
+  /** Ref to the underlying View */
   ref?: Ref<View>;
   /** Default checked state for uncontrolled mode */
   defaultChecked?: boolean;
@@ -19,13 +20,14 @@ interface CheckboxProps extends Omit<ViewProps, 'style'>, UniversalCheckboxProps
 /**
  * **⚙️ A checkbox component**
  *
- * @componentType Client component
- *
  * @description
  * A checkbox component allows users to select one or multiple options from a set.
  * It represents a binary state, typically as checked or unchecked, and optionally
  * includes a third "indeterminate" state to indicate partial selection.
  *
+ * @category Form
+ * @platform mobile
+ *
  * @example
  * ```tsx
  * import { Checkbox } from '@yahoo/uds-mobile';
@@ -40,9 +42,16 @@ interface CheckboxProps extends Omit<ViewProps, 'style'>, UniversalCheckboxProps
  * - Settings: For toggling preferences
  * - Filters: For multi-select filtering
  *
- * @see The {@link https://uds.build/docs/components/checkbox Checkbox Docs} for more info
+ * @accessibility
+ * - Sets `accessibilityRole="checkbox"` automatically
+ * - Announces checked/unchecked/mixed state
+ * - Label is used as accessibility label
+ * - Supports `reduceMotion` for users who prefer reduced motion
+ *
+ * @see {@link Radio} for single-select options
+ * @see {@link Switch} for binary toggles
  */
-declare const Checkbox: react14.NamedExoticComponent<CheckboxProps>;
+declare const Checkbox: react.NamedExoticComponent<CheckboxProps>;
 //#endregion
 export { Checkbox, type CheckboxProps };
 //# sourceMappingURL=Checkbox.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.mts","names":[],"sources":["../../src/components/Checkbox.tsx"],"sourcesContent":[],"mappings":";;;;;;;UAyBU,aAAA,SAAsB,KAAK,qBAAqB;QAClD,IAAI;;EADF,cAAA,CAAA,EAAc,OAAA;EAAa;EACzB,QAAA,CAAA,EAAA,OAAA;EAAJ;EADwB,QAAA,CAAA,EAAA,OAAA;EAA0B;EAAsB,QAAA,CAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,GAAA,IAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;cAsD1E,UAAQ,OAAA,CAAA,qBAAA"}
+{"version":3,"file":"Checkbox.d.mts","names":[],"sources":["../../src/components/Checkbox.tsx"],"mappings":";;;;;;;UAyBU,aAAA,SAAsB,IAAA,CAAK,SAAA,YAAqB,sBAAA;;EAExD,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,cAAA;;EAEA,QAAA;EAJU;EAMV,QAAA;EAR8B;EAU9B,QAAA,IAAY,OAAA;AAAA;;;;;;;;;;;;;;;AAAgB;;;;;;;;;;;;;;;;;;;;cAqDxB,QAAA,EAAQ,KAAA,CAAA,oBAAA,CAAA,aAAA"}

package/dist/components/Checkbox.mjs

@@ -18,13 +18,14 @@ const VARIANT_ERROR_MAP = {
 /**
 * **⚙️ A checkbox component**
 *
-* @componentType Client component
-*
 * @description
 * A checkbox component allows users to select one or multiple options from a set.
 * It represents a binary state, typically as checked or unchecked, and optionally
 * includes a third "indeterminate" state to indicate partial selection.
 *
+* @category Form
+* @platform mobile
+*
 * @example
 * ```tsx
 * import { Checkbox } from '@yahoo/uds-mobile';
@@ -39,9 +40,16 @@ const VARIANT_ERROR_MAP = {
 * - Settings: For toggling preferences
 * - Filters: For multi-select filtering
 *
-* @see The {@link https://uds.build/docs/components/checkbox Checkbox Docs} for more info
+* @accessibility
+* - Sets `accessibilityRole="checkbox"` automatically
+* - Announces checked/unchecked/mixed state
+* - Label is used as accessibility label
+* - Supports `reduceMotion` for users who prefer reduced motion
+*
+* @see {@link Radio} for single-select options
+* @see {@link Switch} for binary toggles
 */
-const Checkbox = memo(function Checkbox$1({ label, labelPosition = "start", variant: variantProp = "primary", size = "md", checked: checkedProp, hasError, reduceMotion, defaultChecked, disabled, required, onChange, ref, ...viewProps }) {
+const Checkbox = memo(function Checkbox({ label, labelPosition = "start", variant: variantProp = "primary", size = "md", checked: checkedProp, hasError, reduceMotion, defaultChecked, disabled, required, onChange, ref, ...viewProps }) {
 	const uid = `uds-checkbox-${useId()}`;
 	const isControlled = checkedProp !== void 0;
 	const [internalChecked, setInternalChecked] = useState(isControlled ? checkedProp : defaultChecked ?? false);

package/dist/components/Checkbox.mjs.map

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

package/dist/components/Chip.cjs

@@ -1,5 +1,6 @@
 /*! © 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');
 const require_components_Text = require('./Text.cjs');
 const require_components_HStack = require('./HStack.cjs');
@@ -16,9 +17,12 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * Chips help people make selections, filter content, or trigger actions.
 * They can be toggleable, dismissible, or simple pressable elements.
 *
+* @category Interactive
+* @platform mobile
+*
 * @example
 * ```tsx
-* import { Chip } from '~/components/ui/Chip';
+* import { Chip } from '@yahoo/uds-mobile';
 *
 * // Basic chip
 * <Chip>Label</Chip>
@@ -32,8 +36,21 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * // With icons
 * <Chip startIcon="Star" variant="brand">Favorite</Chip>
 * ```
+*
+* @usage
+* - Filters: For multi-select filtering options
+* - Tags: For displaying and removing tags
+* - Actions: For quick contextual actions
+*
+* @accessibility
+* - Toggle chips use `accessibilityRole="checkbox"` with checked state
+* - Action chips use `accessibilityRole="button"`
+* - Dismiss button has customizable `dismissButtonAriaLabel`
+*
+* @see {@link Badge} for non-interactive status indicators
+* @see {@link Button} for primary actions
 */
-const Chip = (0, react.memo)(function Chip$1({ variant = "primary", size = "md", minWidth, maxWidth = 200, startIcon, endIcon, disabled = false, isToggled = false, onPress, onToggle, onDismiss, dismissButtonAriaLabel = "Dismiss", children, style, ref, ...rest }) {
+const Chip = (0, react.memo)(function Chip({ variant = "primary", size = "md", minWidth, maxWidth = 200, startIcon, endIcon, disabled = false, isToggled = false, onPress, onToggle, onDismiss, dismissButtonAriaLabel = "Dismiss", children, style, ref, ...rest }) {
 	const isInteractive = Boolean(onPress || onToggle);
 	const isDismissible = Boolean(onDismiss);
 	const isDisabled = disabled;

package/dist/components/Chip.d.cts

@@ -1,22 +1,27 @@
 
 import { ChipSize, ChipVariant } from "../types/dist/index.cjs";
 import { IconSlotType } from "./IconSlot.cjs";
-import * as react4 from "react";
+import * as react from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
 
 //#region src/components/Chip.d.ts
 interface ChipProps extends Omit<ViewProps, 'children'> {
+  /** Ref to the underlying View */
   ref?: Ref<View>;
-  /** @default 'primary' */
+  /** The visual style variant @default 'primary' */
   variant?: ChipVariant;
-  /** @default 'md' */
+  /** The size of the chip @default 'md' */
   size?: ChipSize;
+  /** Minimum width of the chip in pixels */
   minWidth?: number;
-  /** @default 200 */
+  /** Maximum width of the chip in pixels @default 200 */
   maxWidth?: number;
+  /** Icon displayed at the start of the chip */
   startIcon?: IconSlotType;
+  /** Icon displayed at the end of the chip */
   endIcon?: IconSlotType;
+  /** Whether the chip is disabled */
   disabled?: boolean;
   /** Called when the chip is pressed. Makes the chip interactive. */
   onPress?: () => void;
@@ -28,6 +33,7 @@ interface ChipProps extends Omit<ViewProps, 'children'> {
   onDismiss?: () => void;
   /** Accessibility label for the dismiss button. */
   dismissButtonAriaLabel?: string;
+  /** Chip label content */
   children?: React.ReactNode;
 }
 /**
@@ -37,9 +43,12 @@ interface ChipProps extends Omit<ViewProps, 'children'> {
  * Chips help people make selections, filter content, or trigger actions.
  * They can be toggleable, dismissible, or simple pressable elements.
  *
+ * @category Interactive
+ * @platform mobile
+ *
  * @example
  * ```tsx
- * import { Chip } from '~/components/ui/Chip';
+ * import { Chip } from '@yahoo/uds-mobile';
  *
  * // Basic chip
  * <Chip>Label</Chip>
@@ -53,8 +62,21 @@ interface ChipProps extends Omit<ViewProps, 'children'> {
  * // With icons
  * <Chip startIcon="Star" variant="brand">Favorite</Chip>
  * ```
+ *
+ * @usage
+ * - Filters: For multi-select filtering options
+ * - Tags: For displaying and removing tags
+ * - Actions: For quick contextual actions
+ *
+ * @accessibility
+ * - Toggle chips use `accessibilityRole="checkbox"` with checked state
+ * - Action chips use `accessibilityRole="button"`
+ * - Dismiss button has customizable `dismissButtonAriaLabel`
+ *
+ * @see {@link Badge} for non-interactive status indicators
+ * @see {@link Button} for primary actions
  */
-declare const Chip: react4.NamedExoticComponent<ChipProps>;
+declare const Chip: react.NamedExoticComponent<ChipProps>;
 //#endregion
 export { Chip, type ChipProps };
 //# sourceMappingURL=Chip.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.cts","names":[],"sources":["../../src/components/Chip.tsx"],"sourcesContent":[],"mappings":";;;;;;;;UAYU,SAAA,SAAkB,KAAK;QACzB,IAAI;;EADF,OAAA,CAAA,EAGE,WAHQ;EAAa;EACrB,IAAA,CAAA,EAIH,QAJG;EAAJ,QAAA,CAAA,EAAA,MAAA;EAEI;EAEH,QAAA,CAAA,EAAA,MAAA;EAIK,SAAA,CAAA,EAAA,YAAA;EACF,OAAA,CAAA,EAAA,YAAA;EAYC,QAAM,CAAA,EAAA,OAAA;EAtBS;EAAI,OAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EAiD1B;;;;;;;;aA3BO,KAAA,CAAM;;;;;;;;;;;;;;;;;;;;;;;;;;cA2Bb,MAAI,MAAA,CAAA,qBAAA"}
+{"version":3,"file":"Chip.d.cts","names":[],"sources":["../../src/components/Chip.tsx"],"mappings":";;;;;;;;UAYU,SAAA,SAAkB,IAAA,CAAK,SAAA;;EAE/B,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,OAAA,GAAU,WAAA;;EAEV,IAAA,GAAO,QAAA;EAJG;EAMV,QAAA;EAJU;EAMV,QAAA;EAEY;EAAZ,SAAA,GAAY,YAAA;EAgBD;EAdX,OAAA,GAAU,YAAA;EAdoB;EAgB9B,QAAA;EAhB0B;EAkB1B,OAAA;EAhBA;EAkBA,SAAA;EAlBU;EAoBV,QAAA,IAAY,OAAA;EAlBF;EAoBV,SAAA;EAlBO;EAoBP,sBAAA;EAhBA;EAkBA,QAAA,GAAW,KAAA,CAAM,SAAA;AAAA;;;;;;;;;;;;;;;AAAS;;;;;;;;;;;;;;;;;;;;;;;;;;cA2CtB,IAAA,EAAI,KAAA,CAAA,oBAAA,CAAA,SAAA"}

package/dist/components/Chip.d.mts

@@ -1,22 +1,27 @@
 
 import { ChipSize, ChipVariant } from "../types/dist/index.mjs";
 import { IconSlotType } from "./IconSlot.mjs";
-import * as react18 from "react";
+import * as react from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
 
 //#region src/components/Chip.d.ts
 interface ChipProps extends Omit<ViewProps, 'children'> {
+  /** Ref to the underlying View */
   ref?: Ref<View>;
-  /** @default 'primary' */
+  /** The visual style variant @default 'primary' */
   variant?: ChipVariant;
-  /** @default 'md' */
+  /** The size of the chip @default 'md' */
   size?: ChipSize;
+  /** Minimum width of the chip in pixels */
   minWidth?: number;
-  /** @default 200 */
+  /** Maximum width of the chip in pixels @default 200 */
   maxWidth?: number;
+  /** Icon displayed at the start of the chip */
   startIcon?: IconSlotType;
+  /** Icon displayed at the end of the chip */
   endIcon?: IconSlotType;
+  /** Whether the chip is disabled */
   disabled?: boolean;
   /** Called when the chip is pressed. Makes the chip interactive. */
   onPress?: () => void;
@@ -28,6 +33,7 @@ interface ChipProps extends Omit<ViewProps, 'children'> {
   onDismiss?: () => void;
   /** Accessibility label for the dismiss button. */
   dismissButtonAriaLabel?: string;
+  /** Chip label content */
   children?: React.ReactNode;
 }
 /**
@@ -37,9 +43,12 @@ interface ChipProps extends Omit<ViewProps, 'children'> {
  * Chips help people make selections, filter content, or trigger actions.
  * They can be toggleable, dismissible, or simple pressable elements.
  *
+ * @category Interactive
+ * @platform mobile
+ *
  * @example
  * ```tsx
- * import { Chip } from '~/components/ui/Chip';
+ * import { Chip } from '@yahoo/uds-mobile';
  *
  * // Basic chip
  * <Chip>Label</Chip>
@@ -53,8 +62,21 @@ interface ChipProps extends Omit<ViewProps, 'children'> {
  * // With icons
  * <Chip startIcon="Star" variant="brand">Favorite</Chip>
  * ```
+ *
+ * @usage
+ * - Filters: For multi-select filtering options
+ * - Tags: For displaying and removing tags
+ * - Actions: For quick contextual actions
+ *
+ * @accessibility
+ * - Toggle chips use `accessibilityRole="checkbox"` with checked state
+ * - Action chips use `accessibilityRole="button"`
+ * - Dismiss button has customizable `dismissButtonAriaLabel`
+ *
+ * @see {@link Badge} for non-interactive status indicators
+ * @see {@link Button} for primary actions
  */
-declare const Chip: react18.NamedExoticComponent<ChipProps>;
+declare const Chip: react.NamedExoticComponent<ChipProps>;
 //#endregion
 export { Chip, type ChipProps };
 //# sourceMappingURL=Chip.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.mts","names":[],"sources":["../../src/components/Chip.tsx"],"sourcesContent":[],"mappings":";;;;;;;;UAYU,SAAA,SAAkB,KAAK;QACzB,IAAI;;EADF,OAAA,CAAA,EAGE,WAHQ;EAAa;EACrB,IAAA,CAAA,EAIH,QAJG;EAAJ,QAAA,CAAA,EAAA,MAAA;EAEI;EAEH,QAAA,CAAA,EAAA,MAAA;EAIK,SAAA,CAAA,EAAA,YAAA;EACF,OAAA,CAAA,EAAA,YAAA;EAYC,QAAM,CAAA,EAAA,OAAA;EAtBS;EAAI,OAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EAiD1B;;;;;;;;aA3BO,KAAA,CAAM;;;;;;;;;;;;;;;;;;;;;;;;;;cA2Bb,MAAI,OAAA,CAAA,qBAAA"}
+{"version":3,"file":"Chip.d.mts","names":[],"sources":["../../src/components/Chip.tsx"],"mappings":";;;;;;;;UAYU,SAAA,SAAkB,IAAA,CAAK,SAAA;;EAE/B,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,OAAA,GAAU,WAAA;;EAEV,IAAA,GAAO,QAAA;EAJG;EAMV,QAAA;EAJU;EAMV,QAAA;EAEY;EAAZ,SAAA,GAAY,YAAA;EAgBD;EAdX,OAAA,GAAU,YAAA;EAdoB;EAgB9B,QAAA;EAhB0B;EAkB1B,OAAA;EAhBA;EAkBA,SAAA;EAlBU;EAoBV,QAAA,IAAY,OAAA;EAlBF;EAoBV,SAAA;EAlBO;EAoBP,sBAAA;EAhBA;EAkBA,QAAA,GAAW,KAAA,CAAM,SAAA;AAAA;;;;;;;;;;;;;;;AAAS;;;;;;;;;;;;;;;;;;;;;;;;;;cA2CtB,IAAA,EAAI,KAAA,CAAA,oBAAA,CAAA,SAAA"}

package/dist/components/Chip.mjs

@@ -15,9 +15,12 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * Chips help people make selections, filter content, or trigger actions.
 * They can be toggleable, dismissible, or simple pressable elements.
 *
+* @category Interactive
+* @platform mobile
+*
 * @example
 * ```tsx
-* import { Chip } from '~/components/ui/Chip';
+* import { Chip } from '@yahoo/uds-mobile';
 *
 * // Basic chip
 * <Chip>Label</Chip>
@@ -31,8 +34,21 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * // With icons
 * <Chip startIcon="Star" variant="brand">Favorite</Chip>
 * ```
+*
+* @usage
+* - Filters: For multi-select filtering options
+* - Tags: For displaying and removing tags
+* - Actions: For quick contextual actions
+*
+* @accessibility
+* - Toggle chips use `accessibilityRole="checkbox"` with checked state
+* - Action chips use `accessibilityRole="button"`
+* - Dismiss button has customizable `dismissButtonAriaLabel`
+*
+* @see {@link Badge} for non-interactive status indicators
+* @see {@link Button} for primary actions
 */
-const Chip = memo(function Chip$1({ variant = "primary", size = "md", minWidth, maxWidth = 200, startIcon, endIcon, disabled = false, isToggled = false, onPress, onToggle, onDismiss, dismissButtonAriaLabel = "Dismiss", children, style, ref, ...rest }) {
+const Chip = memo(function Chip({ variant = "primary", size = "md", minWidth, maxWidth = 200, startIcon, endIcon, disabled = false, isToggled = false, onPress, onToggle, onDismiss, dismissButtonAriaLabel = "Dismiss", children, style, ref, ...rest }) {
 	const isInteractive = Boolean(onPress || onToggle);
 	const isDismissible = Boolean(onDismiss);
 	const isDisabled = disabled;

package/dist/components/Chip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.mjs","names":["Chip"],"sources":["../../src/components/Chip.tsx"],"sourcesContent":["import type { ChipSize, ChipVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useMemo } from 'react';\nimport type { View, ViewProps } from 'react-native';\n\nimport { chipStyles } from '../../generated/styles';\nimport { HStack } from './HStack';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Pressable } from './Pressable';\nimport { Text } from './Text';\n\ninterface ChipProps extends Omit<ViewProps, 'children'> {\n  ref?: Ref<View>;\n  /** @default 'primary' */\n  variant?: ChipVariant;\n  /** @default 'md' */\n  size?: ChipSize;\n  minWidth?: number;\n  /** @default 200 */\n  maxWidth?: number;\n  startIcon?: IconSlotType;\n  endIcon?: IconSlotType;\n  disabled?: boolean;\n  /** Called when the chip is pressed. Makes the chip interactive. */\n  onPress?: () => void;\n  /** Whether the chip is toggled/selected. */\n  isToggled?: boolean;\n  /** Called when the chip toggle state changes. */\n  onToggle?: (toggled: boolean) => void;\n  /** Called when the dismiss button is pressed. Shows a dismiss icon. */\n  onDismiss?: () => void;\n  /** Accessibility label for the dismiss button. */\n  dismissButtonAriaLabel?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * **A chip component for selections, filters, or actions**\n *\n * @description\n * Chips help people make selections, filter content, or trigger actions.\n * They can be toggleable, dismissible, or simple pressable elements.\n *\n * @example\n * ```tsx\n * import { Chip } from '~/components/ui/Chip';\n *\n * // Basic chip\n * <Chip>Label</Chip>\n *\n * // Toggle chip\n * <Chip isToggled={selected} onToggle={setSelected}>Filter</Chip>\n *\n * // Dismissible chip\n * <Chip onDismiss={() => removeChip()}>Tag</Chip>\n *\n * // With icons\n * <Chip startIcon=\"Star\" variant=\"brand\">Favorite</Chip>\n * ```\n */\nconst Chip = memo(function Chip({\n  variant = 'primary',\n  size = 'md',\n  minWidth,\n  maxWidth = 200,\n  startIcon,\n  endIcon,\n  disabled = false,\n  isToggled = false,\n  onPress,\n  onToggle,\n  onDismiss,\n  dismissButtonAriaLabel = 'Dismiss',\n  children,\n  style,\n  ref,\n  ...rest\n}: ChipProps) {\n  const isInteractive = Boolean(onPress || onToggle);\n  const isDismissible = Boolean(onDismiss);\n  const isDisabled = disabled;\n  // Determine which variant type to use for styling\n  const toggleState = isToggled ? 'on' : 'off';\n\n  // Apply layer-based styles\n  // Note: Chip doesn't have disabled variants in theme - handled via opacity\n  // Note: pressed state is applied dynamically via Pressable's style callback\n  chipStyles.useVariants({\n    size,\n    link: variant,\n    dismissible: variant,\n    toggle: toggleState,\n  });\n\n  const handlePress = useCallback(() => {\n    if (isDisabled) {\n      return;\n    }\n\n    if (onToggle) {\n      onToggle(!isToggled);\n    } else if (onPress) {\n      onPress();\n    }\n  }, [isDisabled, onToggle, isToggled, onPress]);\n\n  const handleDismiss = useCallback(() => {\n    if (isDisabled) {\n      return;\n    }\n    onDismiss?.();\n  }, [isDisabled, onDismiss]);\n\n  const content = (\n    <>\n      {startIcon && <IconSlot icon={startIcon} variant=\"fill\" style={chipStyles.icon} />}\n      <Text numberOfLines={1} textAlign=\"center\" flexShrink=\"1\" style={chipStyles.text}>\n        {children}\n      </Text>\n      {isDismissible ? (\n        <Pressable\n          onPress={isDisabled ? undefined : handleDismiss}\n          disabled={isDisabled}\n          accessibilityLabel={dismissButtonAriaLabel}\n          accessibilityRole=\"button\"\n        >\n          <IconSlot icon={endIcon ?? 'Cross'} variant=\"fill\" style={chipStyles.icon} />\n        </Pressable>\n      ) : (\n        endIcon && <IconSlot icon={endIcon} variant=\"fill\" style={chipStyles.icon} />\n      )}\n    </>\n  );\n\n  const a11yState = {\n    disabled: isDisabled,\n    checked: onToggle ? isToggled : undefined,\n  };\n\n  const rootStyles = useMemo(() => [chipStyles.root, style], [chipStyles.root, style]);\n  const sharedProps = {\n    ref,\n    style: rootStyles,\n    flexDirection: 'row',\n    alignItems: 'center',\n    overflow: 'hidden',\n    alignSelf: 'flex-start',\n    maxWidth,\n    minWidth,\n    disabled: isDisabled,\n    opacity: isDisabled ? 0.5 : undefined,\n    accessibilityState: a11yState,\n    ...rest,\n  } as const;\n\n  // Interactive chip (toggle or button)\n  if (isInteractive) {\n    return (\n      <Pressable\n        onPress={handlePress}\n        accessibilityRole={onToggle ? 'checkbox' : 'button'}\n        {...sharedProps}\n      >\n        {content}\n      </Pressable>\n    );\n  }\n\n  // Non-interactive chip (display only or dismissible)\n  return (\n    <HStack accessibilityRole={isDismissible ? 'button' : undefined} {...sharedProps} {...rest}>\n      {content}\n    </HStack>\n  );\n});\n\nChip.displayName = 'Chip';\n\nexport { Chip, type ChipProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,MAAM,OAAO,KAAK,SAASA,OAAK,EAC9B,UAAU,WACV,OAAO,MACP,UACA,WAAW,KACX,WACA,SACA,WAAW,OACX,YAAY,OACZ,SACA,UACA,WACA,yBAAyB,WACzB,UACA,OACA,KACA,GAAG,QACS;CACZ,MAAM,gBAAgB,QAAQ,WAAW,SAAS;CAClD,MAAM,gBAAgB,QAAQ,UAAU;CACxC,MAAM,aAAa;CAEnB,MAAM,cAAc,YAAY,OAAO;AAKvC,YAAW,YAAY;EACrB;EACA,MAAM;EACN,aAAa;EACb,QAAQ;EACT,CAAC;CAEF,MAAM,cAAc,kBAAkB;AACpC,MAAI,WACF;AAGF,MAAI,SACF,UAAS,CAAC,UAAU;WACX,QACT,UAAS;IAEV;EAAC;EAAY;EAAU;EAAW;EAAQ,CAAC;CAE9C,MAAM,gBAAgB,kBAAkB;AACtC,MAAI,WACF;AAEF,eAAa;IACZ,CAAC,YAAY,UAAU,CAAC;CAE3B,MAAM,UACJ;EACG,aAAa,oBAAC;GAAS,MAAM;GAAW,SAAQ;GAAO,OAAO,WAAW;IAAQ;EAClF,oBAAC;GAAK,eAAe;GAAG,WAAU;GAAS,YAAW;GAAI,OAAO,WAAW;GACzE;IACI;EACN,gBACC,oBAAC;GACC,SAAS,aAAa,SAAY;GAClC,UAAU;GACV,oBAAoB;GACpB,mBAAkB;aAElB,oBAAC;IAAS,MAAM,WAAW;IAAS,SAAQ;IAAO,OAAO,WAAW;KAAQ;IACnE,GAEZ,WAAW,oBAAC;GAAS,MAAM;GAAS,SAAQ;GAAO,OAAO,WAAW;IAAQ;KAE9E;CAGL,MAAM,YAAY;EAChB,UAAU;EACV,SAAS,WAAW,YAAY;EACjC;CAGD,MAAM,cAAc;EAClB;EACA,OAHiB,cAAc,CAAC,WAAW,MAAM,MAAM,EAAE,CAAC,WAAW,MAAM,MAAM,CAAC;EAIlF,eAAe;EACf,YAAY;EACZ,UAAU;EACV,WAAW;EACX;EACA;EACA,UAAU;EACV,SAAS,aAAa,KAAM;EAC5B,oBAAoB;EACpB,GAAG;EACJ;AAGD,KAAI,cACF,QACE,oBAAC;EACC,SAAS;EACT,mBAAmB,WAAW,aAAa;EAC3C,GAAI;YAEH;GACS;AAKhB,QACE,oBAAC;EAAO,mBAAmB,gBAAgB,WAAW;EAAW,GAAI;EAAa,GAAI;YACnF;GACM;EAEX;AAEF,KAAK,cAAc"}
+{"version":3,"file":"Chip.mjs","names":[],"sources":["../../src/components/Chip.tsx"],"sourcesContent":["import type { ChipSize, ChipVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useMemo } from 'react';\nimport type { View, ViewProps } from 'react-native';\n\nimport { chipStyles } from '../../generated/styles';\nimport { HStack } from './HStack';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Pressable } from './Pressable';\nimport { Text } from './Text';\n\ninterface ChipProps extends Omit<ViewProps, 'children'> {\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n  /** The visual style variant @default 'primary' */\n  variant?: ChipVariant;\n  /** The size of the chip @default 'md' */\n  size?: ChipSize;\n  /** Minimum width of the chip in pixels */\n  minWidth?: number;\n  /** Maximum width of the chip in pixels @default 200 */\n  maxWidth?: number;\n  /** Icon displayed at the start of the chip */\n  startIcon?: IconSlotType;\n  /** Icon displayed at the end of the chip */\n  endIcon?: IconSlotType;\n  /** Whether the chip is disabled */\n  disabled?: boolean;\n  /** Called when the chip is pressed. Makes the chip interactive. */\n  onPress?: () => void;\n  /** Whether the chip is toggled/selected. */\n  isToggled?: boolean;\n  /** Called when the chip toggle state changes. */\n  onToggle?: (toggled: boolean) => void;\n  /** Called when the dismiss button is pressed. Shows a dismiss icon. */\n  onDismiss?: () => void;\n  /** Accessibility label for the dismiss button. */\n  dismissButtonAriaLabel?: string;\n  /** Chip label content */\n  children?: React.ReactNode;\n}\n\n/**\n * **A chip component for selections, filters, or actions**\n *\n * @description\n * Chips help people make selections, filter content, or trigger actions.\n * They can be toggleable, dismissible, or simple pressable elements.\n *\n * @category Interactive\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Chip } from '@yahoo/uds-mobile';\n *\n * // Basic chip\n * <Chip>Label</Chip>\n *\n * // Toggle chip\n * <Chip isToggled={selected} onToggle={setSelected}>Filter</Chip>\n *\n * // Dismissible chip\n * <Chip onDismiss={() => removeChip()}>Tag</Chip>\n *\n * // With icons\n * <Chip startIcon=\"Star\" variant=\"brand\">Favorite</Chip>\n * ```\n *\n * @usage\n * - Filters: For multi-select filtering options\n * - Tags: For displaying and removing tags\n * - Actions: For quick contextual actions\n *\n * @accessibility\n * - Toggle chips use `accessibilityRole=\"checkbox\"` with checked state\n * - Action chips use `accessibilityRole=\"button\"`\n * - Dismiss button has customizable `dismissButtonAriaLabel`\n *\n * @see {@link Badge} for non-interactive status indicators\n * @see {@link Button} for primary actions\n */\nconst Chip = memo(function Chip({\n  variant = 'primary',\n  size = 'md',\n  minWidth,\n  maxWidth = 200,\n  startIcon,\n  endIcon,\n  disabled = false,\n  isToggled = false,\n  onPress,\n  onToggle,\n  onDismiss,\n  dismissButtonAriaLabel = 'Dismiss',\n  children,\n  style,\n  ref,\n  ...rest\n}: ChipProps) {\n  const isInteractive = Boolean(onPress || onToggle);\n  const isDismissible = Boolean(onDismiss);\n  const isDisabled = disabled;\n  // Determine which variant type to use for styling\n  const toggleState = isToggled ? 'on' : 'off';\n\n  // Apply layer-based styles\n  // Note: Chip doesn't have disabled variants in theme - handled via opacity\n  // Note: pressed state is applied dynamically via Pressable's style callback\n  chipStyles.useVariants({\n    size,\n    link: variant,\n    dismissible: variant,\n    toggle: toggleState,\n  });\n\n  const handlePress = useCallback(() => {\n    if (isDisabled) {\n      return;\n    }\n\n    if (onToggle) {\n      onToggle(!isToggled);\n    } else if (onPress) {\n      onPress();\n    }\n  }, [isDisabled, onToggle, isToggled, onPress]);\n\n  const handleDismiss = useCallback(() => {\n    if (isDisabled) {\n      return;\n    }\n    onDismiss?.();\n  }, [isDisabled, onDismiss]);\n\n  const content = (\n    <>\n      {startIcon && <IconSlot icon={startIcon} variant=\"fill\" style={chipStyles.icon} />}\n      <Text numberOfLines={1} textAlign=\"center\" flexShrink=\"1\" style={chipStyles.text}>\n        {children}\n      </Text>\n      {isDismissible ? (\n        <Pressable\n          onPress={isDisabled ? undefined : handleDismiss}\n          disabled={isDisabled}\n          accessibilityLabel={dismissButtonAriaLabel}\n          accessibilityRole=\"button\"\n        >\n          <IconSlot icon={endIcon ?? 'Cross'} variant=\"fill\" style={chipStyles.icon} />\n        </Pressable>\n      ) : (\n        endIcon && <IconSlot icon={endIcon} variant=\"fill\" style={chipStyles.icon} />\n      )}\n    </>\n  );\n\n  const a11yState = {\n    disabled: isDisabled,\n    checked: onToggle ? isToggled : undefined,\n  };\n\n  const rootStyles = useMemo(() => [chipStyles.root, style], [chipStyles.root, style]);\n  const sharedProps = {\n    ref,\n    style: rootStyles,\n    flexDirection: 'row',\n    alignItems: 'center',\n    overflow: 'hidden',\n    alignSelf: 'flex-start',\n    maxWidth,\n    minWidth,\n    disabled: isDisabled,\n    opacity: isDisabled ? 0.5 : undefined,\n    accessibilityState: a11yState,\n    ...rest,\n  } as const;\n\n  // Interactive chip (toggle or button)\n  if (isInteractive) {\n    return (\n      <Pressable\n        onPress={handlePress}\n        accessibilityRole={onToggle ? 'checkbox' : 'button'}\n        {...sharedProps}\n      >\n        {content}\n      </Pressable>\n    );\n  }\n\n  // Non-interactive chip (display only or dismissible)\n  return (\n    <HStack accessibilityRole={isDismissible ? 'button' : undefined} {...sharedProps} {...rest}>\n      {content}\n    </HStack>\n  );\n});\n\nChip.displayName = 'Chip';\n\nexport { Chip, type ChipProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmFA,MAAM,OAAO,KAAK,SAAS,KAAK,EAC9B,UAAU,WACV,OAAO,MACP,UACA,WAAW,KACX,WACA,SACA,WAAW,OACX,YAAY,OACZ,SACA,UACA,WACA,yBAAyB,WACzB,UACA,OACA,KACA,GAAG,QACS;CACZ,MAAM,gBAAgB,QAAQ,WAAW,SAAS;CAClD,MAAM,gBAAgB,QAAQ,UAAU;CACxC,MAAM,aAAa;CAEnB,MAAM,cAAc,YAAY,OAAO;AAKvC,YAAW,YAAY;EACrB;EACA,MAAM;EACN,aAAa;EACb,QAAQ;EACT,CAAC;CAEF,MAAM,cAAc,kBAAkB;AACpC,MAAI,WACF;AAGF,MAAI,SACF,UAAS,CAAC,UAAU;WACX,QACT,UAAS;IAEV;EAAC;EAAY;EAAU;EAAW;EAAQ,CAAC;CAE9C,MAAM,gBAAgB,kBAAkB;AACtC,MAAI,WACF;AAEF,eAAa;IACZ,CAAC,YAAY,UAAU,CAAC;CAE3B,MAAM,UACJ;EACG,aAAa,oBAAC;GAAS,MAAM;GAAW,SAAQ;GAAO,OAAO,WAAW;IAAQ;EAClF,oBAAC;GAAK,eAAe;GAAG,WAAU;GAAS,YAAW;GAAI,OAAO,WAAW;GACzE;IACI;EACN,gBACC,oBAAC;GACC,SAAS,aAAa,SAAY;GAClC,UAAU;GACV,oBAAoB;GACpB,mBAAkB;aAElB,oBAAC;IAAS,MAAM,WAAW;IAAS,SAAQ;IAAO,OAAO,WAAW;KAAQ;IACnE,GAEZ,WAAW,oBAAC;GAAS,MAAM;GAAS,SAAQ;GAAO,OAAO,WAAW;IAAQ;KAE9E;CAGL,MAAM,YAAY;EAChB,UAAU;EACV,SAAS,WAAW,YAAY;EACjC;CAGD,MAAM,cAAc;EAClB;EACA,OAHiB,cAAc,CAAC,WAAW,MAAM,MAAM,EAAE,CAAC,WAAW,MAAM,MAAM,CAAC;EAIlF,eAAe;EACf,YAAY;EACZ,UAAU;EACV,WAAW;EACX;EACA;EACA,UAAU;EACV,SAAS,aAAa,KAAM;EAC5B,oBAAoB;EACpB,GAAG;EACJ;AAGD,KAAI,cACF,QACE,oBAAC;EACC,SAAS;EACT,mBAAmB,WAAW,aAAa;EAC3C,GAAI;YAEH;GACS;AAKhB,QACE,oBAAC;EAAO,mBAAmB,gBAAgB,WAAW;EAAW,GAAI;EAAa,GAAI;YACnF;GACM;EAEX;AAEF,KAAK,cAAc"}

package/dist/components/HStack.cjs

@@ -1,5 +1,6 @@
 /*! © 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_Box = require('./Box.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -12,6 +13,9 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * A convenience component for creating horizontal layouts. It's a Box with
 * `flexDirection="row"` preset.
 *
+* @category Layout
+* @platform mobile
+*
 * @example
 * ```tsx
 * import { HStack } from '@yahoo/uds-mobile';
@@ -26,11 +30,10 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * - Use for horizontal arrangements of elements
 * - Use gap prop for consistent spacing between children
 *
-* @see The {@link https://uds.build/docs/components/h-stack HStack Docs} for more info
-*
-* @related [VStack](https://uds.build/docs/components/v-stack), [Box](https://uds.build/docs/components/box)
+* @see {@link VStack} for vertical layouts
+* @see {@link Box} for custom flex layouts
 */
-const HStack = (0, react.memo)(function HStack$1({ gap, children, ref, ...props }) {
+const HStack = (0, react.memo)(function HStack({ gap, children, ref, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
 		ref,
 		flexDirection: "row",

package/dist/components/HStack.d.cts

@@ -1,13 +1,15 @@
 
 import { BoxProps } from "./Box.cjs";
-import * as react6 from "react";
+import * as react from "react";
 import { Ref } from "react";
 import { View } from "react-native";
 import { StyleProps } from "../../generated/styles";
 
 //#region src/components/HStack.d.ts
 interface HStackProps extends Omit<BoxProps, 'ref'> {
+  /** Gap between child elements */
   gap?: StyleProps['columnGap'];
+  /** Ref to the underlying View */
   ref?: Ref<View>;
 }
 /**
@@ -17,6 +19,9 @@ interface HStackProps extends Omit<BoxProps, 'ref'> {
  * A convenience component for creating horizontal layouts. It's a Box with
  * `flexDirection="row"` preset.
  *
+ * @category Layout
+ * @platform mobile
+ *
  * @example
  * ```tsx
  * import { HStack } from '@yahoo/uds-mobile';
@@ -31,11 +36,10 @@ interface HStackProps extends Omit<BoxProps, 'ref'> {
  * - Use for horizontal arrangements of elements
  * - Use gap prop for consistent spacing between children
  *
- * @see The {@link https://uds.build/docs/components/h-stack HStack Docs} for more info
- *
- * @related [VStack](https://uds.build/docs/components/v-stack), [Box](https://uds.build/docs/components/box)
+ * @see {@link VStack} for vertical layouts
+ * @see {@link Box} for custom flex layouts
  */
-declare const HStack: react6.NamedExoticComponent<HStackProps>;
+declare const HStack: react.NamedExoticComponent<HStackProps>;
 //#endregion
 export { HStack, type HStackProps };
 //# sourceMappingURL=HStack.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"HStack.d.cts","names":[],"sources":["../../src/components/HStack.tsx"],"sourcesContent":[],"mappings":";;;;;;;;UAQU,WAAA,SAAoB,KAAK;QAC3B;QACA,IAAI;AAL0B;;;;;;;AAGJ;;;;;;;;;;;;;;;;;;;cA8B5B,QAAM,MAAA,CAAA,qBAAA"}
+{"version":3,"file":"HStack.d.cts","names":[],"sources":["../../src/components/HStack.tsx"],"mappings":";;;;;;;;UAQU,WAAA,SAAoB,IAAA,CAAK,QAAA;;EAEjC,GAAA,GAAM,UAAA;EAFE;EAIR,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;;;;;;AAAI;;;;;;;;;;;cA8BV,MAAA,EAAM,KAAA,CAAA,oBAAA,CAAA,WAAA"}

package/dist/components/HStack.d.mts

@@ -1,13 +1,15 @@
 
 import { BoxProps } from "./Box.mjs";
-import * as react0 from "react";
+import * as react from "react";
 import { Ref } from "react";
 import { View } from "react-native";
 import { StyleProps } from "../../generated/styles";
 
 //#region src/components/HStack.d.ts
 interface HStackProps extends Omit<BoxProps, 'ref'> {
+  /** Gap between child elements */
   gap?: StyleProps['columnGap'];
+  /** Ref to the underlying View */
   ref?: Ref<View>;
 }
 /**
@@ -17,6 +19,9 @@ interface HStackProps extends Omit<BoxProps, 'ref'> {
  * A convenience component for creating horizontal layouts. It's a Box with
  * `flexDirection="row"` preset.
  *
+ * @category Layout
+ * @platform mobile
+ *
  * @example
  * ```tsx
  * import { HStack } from '@yahoo/uds-mobile';
@@ -31,11 +36,10 @@ interface HStackProps extends Omit<BoxProps, 'ref'> {
  * - Use for horizontal arrangements of elements
  * - Use gap prop for consistent spacing between children
  *
- * @see The {@link https://uds.build/docs/components/h-stack HStack Docs} for more info
- *
- * @related [VStack](https://uds.build/docs/components/v-stack), [Box](https://uds.build/docs/components/box)
+ * @see {@link VStack} for vertical layouts
+ * @see {@link Box} for custom flex layouts
  */
-declare const HStack: react0.NamedExoticComponent<HStackProps>;
+declare const HStack: react.NamedExoticComponent<HStackProps>;
 //#endregion
 export { HStack, type HStackProps };
 //# sourceMappingURL=HStack.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"HStack.d.mts","names":[],"sources":["../../src/components/HStack.tsx"],"sourcesContent":[],"mappings":";;;;;;;;UAQU,WAAA,SAAoB,KAAK;QAC3B;QACA,IAAI;AAL0B;;;;;;;AAGJ;;;;;;;;;;;;;;;;;;;cA8B5B,QAAM,MAAA,CAAA,qBAAA"}
+{"version":3,"file":"HStack.d.mts","names":[],"sources":["../../src/components/HStack.tsx"],"mappings":";;;;;;;;UAQU,WAAA,SAAoB,IAAA,CAAK,QAAA;;EAEjC,GAAA,GAAM,UAAA;EAFE;EAIR,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;;;;;;AAAI;;;;;;;;;;;cA8BV,MAAA,EAAM,KAAA,CAAA,oBAAA,CAAA,WAAA"}

package/dist/components/HStack.mjs

@@ -11,6 +11,9 @@ import { jsx } from "react/jsx-runtime";
 * A convenience component for creating horizontal layouts. It's a Box with
 * `flexDirection="row"` preset.
 *
+* @category Layout
+* @platform mobile
+*
 * @example
 * ```tsx
 * import { HStack } from '@yahoo/uds-mobile';
@@ -25,11 +28,10 @@ import { jsx } from "react/jsx-runtime";
 * - Use for horizontal arrangements of elements
 * - Use gap prop for consistent spacing between children
 *
-* @see The {@link https://uds.build/docs/components/h-stack HStack Docs} for more info
-*
-* @related [VStack](https://uds.build/docs/components/v-stack), [Box](https://uds.build/docs/components/box)
+* @see {@link VStack} for vertical layouts
+* @see {@link Box} for custom flex layouts
 */
-const HStack = memo(function HStack$1({ gap, children, ref, ...props }) {
+const HStack = memo(function HStack({ gap, children, ref, ...props }) {
 	return /* @__PURE__ */ jsx(Box, {
 		ref,
 		flexDirection: "row",

package/dist/components/HStack.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HStack.mjs","names":["HStack"],"sources":["../../src/components/HStack.tsx"],"sourcesContent":["import type { Ref } from 'react';\nimport { memo } from 'react';\nimport type { View } from 'react-native';\n\nimport type { StyleProps } from '../../generated/styles';\nimport type { BoxProps } from './Box';\nimport { Box } from './Box';\n\ninterface HStackProps extends Omit<BoxProps, 'ref'> {\n  gap?: StyleProps['columnGap'];\n  ref?: Ref<View>;\n}\n\n/**\n * **📦 A horizontal stack layout component**\n *\n * @description\n * A convenience component for creating horizontal layouts. It's a Box with\n * `flexDirection=\"row\"` preset.\n *\n * @example\n * ```tsx\n * import { HStack } from '@yahoo/uds-mobile';\n *\n * <HStack gap=\"4\" alignItems=\"center\">\n *   <Text>Item 1</Text>\n *   <Text>Item 2</Text>\n * </HStack>\n * ```\n *\n * @usage\n * - Use for horizontal arrangements of elements\n * - Use gap prop for consistent spacing between children\n *\n * @see The {@link https://uds.build/docs/components/h-stack HStack Docs} for more info\n *\n * @related [VStack](https://uds.build/docs/components/v-stack), [Box](https://uds.build/docs/components/box)\n */\nconst HStack = memo(function HStack({ gap, children, ref, ...props }: HStackProps) {\n  return (\n    <Box ref={ref} flexDirection=\"row\" rowGap={gap} columnGap={gap} {...props}>\n      {children}\n    </Box>\n  );\n});\n\nHStack.displayName = 'HStack';\n\nexport { HStack, type HStackProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,MAAM,SAAS,KAAK,SAASA,SAAO,EAAE,KAAK,UAAU,KAAK,GAAG,SAAsB;AACjF,QACE,oBAAC;EAAS;EAAK,eAAc;EAAM,QAAQ;EAAK,WAAW;EAAK,GAAI;EACjE;GACG;EAER;AAEF,OAAO,cAAc"}
+{"version":3,"file":"HStack.mjs","names":[],"sources":["../../src/components/HStack.tsx"],"sourcesContent":["import type { Ref } from 'react';\nimport { memo } from 'react';\nimport type { View } from 'react-native';\n\nimport type { StyleProps } from '../../generated/styles';\nimport type { BoxProps } from './Box';\nimport { Box } from './Box';\n\ninterface HStackProps extends Omit<BoxProps, 'ref'> {\n  /** Gap between child elements */\n  gap?: StyleProps['columnGap'];\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n}\n\n/**\n * **📦 A horizontal stack layout component**\n *\n * @description\n * A convenience component for creating horizontal layouts. It's a Box with\n * `flexDirection=\"row\"` preset.\n *\n * @category Layout\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { HStack } from '@yahoo/uds-mobile';\n *\n * <HStack gap=\"4\" alignItems=\"center\">\n *   <Text>Item 1</Text>\n *   <Text>Item 2</Text>\n * </HStack>\n * ```\n *\n * @usage\n * - Use for horizontal arrangements of elements\n * - Use gap prop for consistent spacing between children\n *\n * @see {@link VStack} for vertical layouts\n * @see {@link Box} for custom flex layouts\n */\nconst HStack = memo(function HStack({ gap, children, ref, ...props }: HStackProps) {\n  return (\n    <Box ref={ref} flexDirection=\"row\" rowGap={gap} columnGap={gap} {...props}>\n      {children}\n    </Box>\n  );\n});\n\nHStack.displayName = 'HStack';\n\nexport { HStack, type HStackProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,MAAM,SAAS,KAAK,SAAS,OAAO,EAAE,KAAK,UAAU,KAAK,GAAG,SAAsB;AACjF,QACE,oBAAC;EAAS;EAAK,eAAc;EAAM,QAAQ;EAAK,WAAW;EAAK,GAAI;EACjE;GACG;EAER;AAEF,OAAO,cAAc"}