@yahoo/uds-mobile 2.10.0 → 2.12.0

package/dist/components/Checkbox.cjs

@@ -30,7 +30,7 @@ const VARIANT_ERROR_MAP = {
 *
 * @example
 * ```tsx
-* import { Checkbox } from '@yahoo/uds-mobile';
+* import { Checkbox } from '@yahoo/uds-mobile/Checkbox';
 *
 * <Checkbox label="Agree to terms" />
 * <Checkbox label="Subscribe" checked={true} onChange={setChecked} />

package/dist/components/Checkbox.d.cts

@@ -30,7 +30,7 @@ interface CheckboxProps extends Omit<ViewProps, 'style'>, UniversalCheckboxProps
  *
  * @example
  * ```tsx
- * import { Checkbox } from '@yahoo/uds-mobile';
+ * import { Checkbox } from '@yahoo/uds-mobile/Checkbox';
  *
  * <Checkbox label="Agree to terms" />
  * <Checkbox label="Subscribe" checked={true} onChange={setChecked} />

package/dist/components/Checkbox.d.ts

@@ -30,7 +30,7 @@ interface CheckboxProps extends Omit<ViewProps, 'style'>, UniversalCheckboxProps
  *
  * @example
  * ```tsx
- * import { Checkbox } from '@yahoo/uds-mobile';
+ * import { Checkbox } from '@yahoo/uds-mobile/Checkbox';
  *
  * <Checkbox label="Agree to terms" />
  * <Checkbox label="Subscribe" checked={true} onChange={setChecked} />

package/dist/components/Checkbox.js

@@ -27,7 +27,7 @@ const VARIANT_ERROR_MAP = {
 *
 * @example
 * ```tsx
-* import { Checkbox } from '@yahoo/uds-mobile';
+* import { Checkbox } from '@yahoo/uds-mobile/Checkbox';
 *
 * <Checkbox label="Agree to terms" />
 * <Checkbox label="Subscribe" checked={true} onChange={setChecked} />

package/dist/components/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","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, { useAnimatedStyle, useDerivedValue, withSpring } 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  const checkboxAnimatedStyle = useAnimatedStyle(() => ({\n    transform: [{ scale: scaleProgress.value }],\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, borderRadius: 4 },\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        {showIcon && <Icon name={iconName} size=\"sm\" style={checkboxStyles.checkboxIcon} />}\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.js","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, { useAnimatedStyle, useDerivedValue, withSpring } 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/Checkbox';\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  const checkboxAnimatedStyle = useAnimatedStyle(() => ({\n    transform: [{ scale: scaleProgress.value }],\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, borderRadius: 4 },\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        {showIcon && <Icon name={iconName} size=\"sm\" style={checkboxStyles.checkboxIcon} />}\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

@@ -21,7 +21,7 @@ let generated_styles = require("../../generated/styles");
 *
 * @example
 * ```tsx
-* import { Chip } from '@yahoo/uds-mobile';
+* import { Chip } from '@yahoo/uds-mobile/Chip';
 *
 * // Basic chip
 * <Chip>Label</Chip>

package/dist/components/Chip.d.cts

@@ -48,7 +48,7 @@ interface ChipProps extends Omit<ViewProps, 'children'> {
  *
  * @example
  * ```tsx
- * import { Chip } from '@yahoo/uds-mobile';
+ * import { Chip } from '@yahoo/uds-mobile/Chip';
  *
  * // Basic chip
  * <Chip>Label</Chip>

package/dist/components/Chip.d.ts

@@ -48,7 +48,7 @@ interface ChipProps extends Omit<ViewProps, 'children'> {
  *
  * @example
  * ```tsx
- * import { Chip } from '@yahoo/uds-mobile';
+ * import { Chip } from '@yahoo/uds-mobile/Chip';
  *
  * // Basic chip
  * <Chip>Label</Chip>

package/dist/components/Chip.js

@@ -19,7 +19,7 @@ import { chipStyles } from "../../generated/styles";
 *
 * @example
 * ```tsx
-* import { Chip } from '@yahoo/uds-mobile';
+* import { Chip } from '@yahoo/uds-mobile/Chip';
 *
 * // Basic chip
 * <Chip>Label</Chip>

package/dist/components/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","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,qBAAA,UAAA,EAAA,UAAA;EACG,aAAa,oBAAC,UAAD;GAAU,MAAM;GAAW,SAAQ;GAAO,OAAO,WAAW;GAAQ,CAAA;EAClF,oBAAC,MAAD;GAAM,eAAe;GAAG,WAAU;GAAS,YAAW;GAAI,OAAO,WAAW;GACzE;GACI,CAAA;EACN,gBACC,oBAAC,WAAD;GACE,SAAS,aAAa,KAAA,IAAY;GAClC,UAAU;GACV,oBAAoB;GACpB,mBAAkB;aAElB,oBAAC,UAAD;IAAU,MAAM,WAAW;IAAS,SAAQ;IAAO,OAAO,WAAW;IAAQ,CAAA;GACnE,CAAA,GAEZ,WAAW,oBAAC,UAAD;GAAU,MAAM;GAAS,SAAQ;GAAO,OAAO,WAAW;GAAQ,CAAA;EAE9E,EAAA,CAAA;CAGL,MAAM,YAAY;EAChB,UAAU;EACV,SAAS,WAAW,YAAY,KAAA;EACjC;CAGD,MAAM,cAAc;EAClB;EACA,OAHiB,cAAc,CAAC,WAAW,MAAM,MAAM,EAAE,CAAC,WAAW,MAAM,MAAM,CAGhE;EACjB,eAAe;EACf,YAAY;EACZ,UAAU;EACV,WAAW;EACX;EACA;EACA,UAAU;EACV,SAAS,aAAa,KAAM,KAAA;EAC5B,oBAAoB;EACpB,GAAG;EACJ;AAGD,KAAI,cACF,QACE,oBAAC,WAAD;EACE,SAAS;EACT,mBAAmB,WAAW,aAAa;EAC3C,GAAI;YAEH;EACS,CAAA;AAKhB,QACE,oBAAC,QAAD;EAAQ,mBAAmB,gBAAgB,WAAW,KAAA;EAAW,GAAI;EAAa,GAAI;YACnF;EACM,CAAA;EAEX;AAEF,KAAK,cAAc"}
+{"version":3,"file":"Chip.js","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/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 *\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;CAKvC,WAAW,YAAY;EACrB;EACA,MAAM;EACN,aAAa;EACb,QAAQ;EACT,CAAC;CAEF,MAAM,cAAc,kBAAkB;EACpC,IAAI,YACF;EAGF,IAAI,UACF,SAAS,CAAC,UAAU;OACf,IAAI,SACT,SAAS;IAEV;EAAC;EAAY;EAAU;EAAW;EAAQ,CAAC;CAE9C,MAAM,gBAAgB,kBAAkB;EACtC,IAAI,YACF;EAEF,aAAa;IACZ,CAAC,YAAY,UAAU,CAAC;CAE3B,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA;EACG,aAAa,oBAAC,UAAD;GAAU,MAAM;GAAW,SAAQ;GAAO,OAAO,WAAW;GAAQ,CAAA;EAClF,oBAAC,MAAD;GAAM,eAAe;GAAG,WAAU;GAAS,YAAW;GAAI,OAAO,WAAW;GACzE;GACI,CAAA;EACN,gBACC,oBAAC,WAAD;GACE,SAAS,aAAa,KAAA,IAAY;GAClC,UAAU;GACV,oBAAoB;GACpB,mBAAkB;aAElB,oBAAC,UAAD;IAAU,MAAM,WAAW;IAAS,SAAQ;IAAO,OAAO,WAAW;IAAQ,CAAA;GACnE,CAAA,GAEZ,WAAW,oBAAC,UAAD;GAAU,MAAM;GAAS,SAAQ;GAAO,OAAO,WAAW;GAAQ,CAAA;EAE9E,EAAA,CAAA;CAGL,MAAM,YAAY;EAChB,UAAU;EACV,SAAS,WAAW,YAAY,KAAA;EACjC;CAGD,MAAM,cAAc;EAClB;EACA,OAHiB,cAAc,CAAC,WAAW,MAAM,MAAM,EAAE,CAAC,WAAW,MAAM,MAAM,CAGhE;EACjB,eAAe;EACf,YAAY;EACZ,UAAU;EACV,WAAW;EACX;EACA;EACA,UAAU;EACV,SAAS,aAAa,KAAM,KAAA;EAC5B,oBAAoB;EACpB,GAAG;EACJ;CAGD,IAAI,eACF,OACE,oBAAC,WAAD;EACE,SAAS;EACT,mBAAmB,WAAW,aAAa;EAC3C,GAAI;YAEH;EACS,CAAA;CAKhB,OACE,oBAAC,QAAD;EAAQ,mBAAmB,gBAAgB,WAAW,KAAA;EAAW,GAAI;EAAa,GAAI;YACnF;EACM,CAAA;EAEX;AAEF,KAAK,cAAc"}

package/dist/components/Divider/Divider.cjs

@@ -0,0 +1,103 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_components_Box = require("../Box.cjs");
+const require_components_HStack = require("../HStack.cjs");
+const require_components_VStack = require("../VStack.cjs");
+const require_components_Divider_DividerLabel = require("./DividerLabel.cjs");
+const require_components_Divider_DividerLine = require("./DividerLine.cjs");
+const require_components_Divider_utils = require("./utils.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let generated_styles = require("../../../generated/styles");
+//#region src/components/Divider/Divider.tsx
+/**
+* **A divider component that can be used to visually separate components**
+*
+* @description
+* Divider is a visual separator for grouping content. It supports horizontal
+* and vertical orientation, optional label content, configurable label
+* positioning, and the same primary, secondary, tertiary, and muted variants
+* as the web component.
+*
+* For custom composition, import `DividerLine` and `DividerLabel` from the same
+* subpath and compose them inside `Divider`, `HStack`, or `VStack`.
+*
+* @category Layout
+* @platform mobile
+*
+* @example
+* ```tsx
+* import { Divider, DividerLabel, DividerLine } from '@yahoo/uds-mobile/Divider';
+*
+* <Divider />
+* <Divider variant="secondary" />
+* <Divider contentPosition="start">Section</Divider>
+* <Divider>
+*   <DividerLine />
+*   <DividerLabel>Custom</DividerLabel>
+*   <DividerLine />
+* </Divider>
+* ```
+*
+* @usage
+* - Separate related content groups in lists, settings screens, and stacked layouts
+* - Use `vertical` inside horizontal layouts when a visual split is needed
+* - Use `DividerLine` and `DividerLabel` when a layout needs custom composition
+*
+* @accessibility
+* - Divider is visual-only by default
+* - Use a text label only when the separator needs visible section context
+*
+* @see {@link DividerLine} for a standalone configured divider line
+* @see {@link DividerLabel} for a standalone configured divider label
+*/
+const Divider = (0, react.memo)(function Divider({ variant = "primary", vertical = false, contentPosition = "center", gap, children, style, ref, ...boxProps }) {
+	generated_styles.dividerStyles.useVariants({ variant });
+	const rootStyle = (0, react.useMemo)(() => [
+		{ flexShrink: 0 },
+		gap === void 0 ? generated_styles.dividerStyles.root : void 0,
+		style
+	], [
+		gap,
+		generated_styles.dividerStyles.root,
+		style
+	]);
+	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(vertical ? require_components_VStack.VStack : require_components_HStack.HStack, {
+		ref,
+		alignItems: "center",
+		flex: "1",
+		gap,
+		...boxProps,
+		style: rootStyle,
+		children: require_components_Divider_utils.hasManualLine(children) ? require_components_Divider_utils.renderManualChildren(children, variant, vertical) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			contentPosition !== "start" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Divider_DividerLine.DividerLine, {
+				variant,
+				vertical
+			}),
+			require_components_Divider_utils.shouldWrapInLabel(children) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Divider_DividerLabel.DividerLabel, {
+				variant,
+				children
+			}) : children,
+			contentPosition !== "end" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Divider_DividerLine.DividerLine, {
+				variant,
+				vertical
+			})
+		] })
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+		ref,
+		display: "flex",
+		flexDirection: vertical ? "column" : "row",
+		width: vertical ? void 0 : "100%",
+		...boxProps,
+		style: rootStyle,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Divider_DividerLine.DividerLine, {
+			variant,
+			vertical
+		})
+	});
+});
+Divider.displayName = "Divider";
+//#endregion
+exports.Divider = Divider;

package/dist/components/Divider/Divider.d.cts

@@ -0,0 +1,50 @@
+
+import { DividerProps } from "./types.cjs";
+import * as _$react from "react";
+
+//#region src/components/Divider/Divider.d.ts
+/**
+ * **A divider component that can be used to visually separate components**
+ *
+ * @description
+ * Divider is a visual separator for grouping content. It supports horizontal
+ * and vertical orientation, optional label content, configurable label
+ * positioning, and the same primary, secondary, tertiary, and muted variants
+ * as the web component.
+ *
+ * For custom composition, import `DividerLine` and `DividerLabel` from the same
+ * subpath and compose them inside `Divider`, `HStack`, or `VStack`.
+ *
+ * @category Layout
+ * @platform mobile
+ *
+ * @example
+ * ```tsx
+ * import { Divider, DividerLabel, DividerLine } from '@yahoo/uds-mobile/Divider';
+ *
+ * <Divider />
+ * <Divider variant="secondary" />
+ * <Divider contentPosition="start">Section</Divider>
+ * <Divider>
+ *   <DividerLine />
+ *   <DividerLabel>Custom</DividerLabel>
+ *   <DividerLine />
+ * </Divider>
+ * ```
+ *
+ * @usage
+ * - Separate related content groups in lists, settings screens, and stacked layouts
+ * - Use `vertical` inside horizontal layouts when a visual split is needed
+ * - Use `DividerLine` and `DividerLabel` when a layout needs custom composition
+ *
+ * @accessibility
+ * - Divider is visual-only by default
+ * - Use a text label only when the separator needs visible section context
+ *
+ * @see {@link DividerLine} for a standalone configured divider line
+ * @see {@link DividerLabel} for a standalone configured divider label
+ */
+declare const Divider: _$react.NamedExoticComponent<DividerProps>;
+//#endregion
+export { Divider };
+//# sourceMappingURL=Divider.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.cts","names":[],"sources":["../../../src/components/Divider/Divider.tsx"],"mappings":";;;;;;;;AAS4C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA4CtC,OAAA,EAAO,OAAA,CAAA,oBAAA,CAAA,YAAA"}

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,50 @@
+
+import { DividerProps } from "./types.js";
+import * as _$react from "react";
+
+//#region src/components/Divider/Divider.d.ts
+/**
+ * **A divider component that can be used to visually separate components**
+ *
+ * @description
+ * Divider is a visual separator for grouping content. It supports horizontal
+ * and vertical orientation, optional label content, configurable label
+ * positioning, and the same primary, secondary, tertiary, and muted variants
+ * as the web component.
+ *
+ * For custom composition, import `DividerLine` and `DividerLabel` from the same
+ * subpath and compose them inside `Divider`, `HStack`, or `VStack`.
+ *
+ * @category Layout
+ * @platform mobile
+ *
+ * @example
+ * ```tsx
+ * import { Divider, DividerLabel, DividerLine } from '@yahoo/uds-mobile/Divider';
+ *
+ * <Divider />
+ * <Divider variant="secondary" />
+ * <Divider contentPosition="start">Section</Divider>
+ * <Divider>
+ *   <DividerLine />
+ *   <DividerLabel>Custom</DividerLabel>
+ *   <DividerLine />
+ * </Divider>
+ * ```
+ *
+ * @usage
+ * - Separate related content groups in lists, settings screens, and stacked layouts
+ * - Use `vertical` inside horizontal layouts when a visual split is needed
+ * - Use `DividerLine` and `DividerLabel` when a layout needs custom composition
+ *
+ * @accessibility
+ * - Divider is visual-only by default
+ * - Use a text label only when the separator needs visible section context
+ *
+ * @see {@link DividerLine} for a standalone configured divider line
+ * @see {@link DividerLabel} for a standalone configured divider label
+ */
+declare const Divider: _$react.NamedExoticComponent<DividerProps>;
+//#endregion
+export { Divider };
+//# sourceMappingURL=Divider.d.ts.map

package/dist/components/Divider/Divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","names":[],"sources":["../../../src/components/Divider/Divider.tsx"],"mappings":";;;;;;;;AAS4C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA4CtC,OAAA,EAAO,OAAA,CAAA,oBAAA,CAAA,YAAA"}

package/dist/components/Divider/Divider.js

@@ -0,0 +1,103 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { Box } from "../Box.js";
+import { HStack } from "../HStack.js";
+import { VStack } from "../VStack.js";
+import { DividerLabel } from "./DividerLabel.js";
+import { DividerLine } from "./DividerLine.js";
+import { hasManualLine, renderManualChildren, shouldWrapInLabel } from "./utils.js";
+import { memo, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { dividerStyles } from "../../../generated/styles";
+//#region src/components/Divider/Divider.tsx
+/**
+* **A divider component that can be used to visually separate components**
+*
+* @description
+* Divider is a visual separator for grouping content. It supports horizontal
+* and vertical orientation, optional label content, configurable label
+* positioning, and the same primary, secondary, tertiary, and muted variants
+* as the web component.
+*
+* For custom composition, import `DividerLine` and `DividerLabel` from the same
+* subpath and compose them inside `Divider`, `HStack`, or `VStack`.
+*
+* @category Layout
+* @platform mobile
+*
+* @example
+* ```tsx
+* import { Divider, DividerLabel, DividerLine } from '@yahoo/uds-mobile/Divider';
+*
+* <Divider />
+* <Divider variant="secondary" />
+* <Divider contentPosition="start">Section</Divider>
+* <Divider>
+*   <DividerLine />
+*   <DividerLabel>Custom</DividerLabel>
+*   <DividerLine />
+* </Divider>
+* ```
+*
+* @usage
+* - Separate related content groups in lists, settings screens, and stacked layouts
+* - Use `vertical` inside horizontal layouts when a visual split is needed
+* - Use `DividerLine` and `DividerLabel` when a layout needs custom composition
+*
+* @accessibility
+* - Divider is visual-only by default
+* - Use a text label only when the separator needs visible section context
+*
+* @see {@link DividerLine} for a standalone configured divider line
+* @see {@link DividerLabel} for a standalone configured divider label
+*/
+const Divider = memo(function Divider({ variant = "primary", vertical = false, contentPosition = "center", gap, children, style, ref, ...boxProps }) {
+	dividerStyles.useVariants({ variant });
+	const rootStyle = useMemo(() => [
+		{ flexShrink: 0 },
+		gap === void 0 ? dividerStyles.root : void 0,
+		style
+	], [
+		gap,
+		dividerStyles.root,
+		style
+	]);
+	if (children) return /* @__PURE__ */ jsx(vertical ? VStack : HStack, {
+		ref,
+		alignItems: "center",
+		flex: "1",
+		gap,
+		...boxProps,
+		style: rootStyle,
+		children: hasManualLine(children) ? renderManualChildren(children, variant, vertical) : /* @__PURE__ */ jsxs(Fragment, { children: [
+			contentPosition !== "start" && /* @__PURE__ */ jsx(DividerLine, {
+				variant,
+				vertical
+			}),
+			shouldWrapInLabel(children) ? /* @__PURE__ */ jsx(DividerLabel, {
+				variant,
+				children
+			}) : children,
+			contentPosition !== "end" && /* @__PURE__ */ jsx(DividerLine, {
+				variant,
+				vertical
+			})
+		] })
+	});
+	return /* @__PURE__ */ jsx(Box, {
+		ref,
+		display: "flex",
+		flexDirection: vertical ? "column" : "row",
+		width: vertical ? void 0 : "100%",
+		...boxProps,
+		style: rootStyle,
+		children: /* @__PURE__ */ jsx(DividerLine, {
+			variant,
+			vertical
+		})
+	});
+});
+Divider.displayName = "Divider";
+//#endregion
+export { Divider };
+
+//# sourceMappingURL=Divider.js.map

package/dist/components/Divider/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","names":[],"sources":["../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import { memo, useMemo } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { dividerStyles } from '../../../generated/styles';\nimport { Box } from '../Box';\nimport { HStack } from '../HStack';\nimport { VStack } from '../VStack';\nimport { DividerLabel } from './DividerLabel';\nimport { DividerLine } from './DividerLine';\nimport type { DividerProps } from './types';\nimport { hasManualLine, renderManualChildren, shouldWrapInLabel } from './utils';\n\n/**\n * **A divider component that can be used to visually separate components**\n *\n * @description\n * Divider is a visual separator for grouping content. It supports horizontal\n * and vertical orientation, optional label content, configurable label\n * positioning, and the same primary, secondary, tertiary, and muted variants\n * as the web component.\n *\n * For custom composition, import `DividerLine` and `DividerLabel` from the same\n * subpath and compose them inside `Divider`, `HStack`, or `VStack`.\n *\n * @category Layout\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Divider, DividerLabel, DividerLine } from '@yahoo/uds-mobile/Divider';\n *\n * <Divider />\n * <Divider variant=\"secondary\" />\n * <Divider contentPosition=\"start\">Section</Divider>\n * <Divider>\n *   <DividerLine />\n *   <DividerLabel>Custom</DividerLabel>\n *   <DividerLine />\n * </Divider>\n * ```\n *\n * @usage\n * - Separate related content groups in lists, settings screens, and stacked layouts\n * - Use `vertical` inside horizontal layouts when a visual split is needed\n * - Use `DividerLine` and `DividerLabel` when a layout needs custom composition\n *\n * @accessibility\n * - Divider is visual-only by default\n * - Use a text label only when the separator needs visible section context\n *\n * @see {@link DividerLine} for a standalone configured divider line\n * @see {@link DividerLabel} for a standalone configured divider label\n */\nconst Divider = memo(function Divider({\n  variant = 'primary',\n  vertical = false,\n  contentPosition = 'center',\n  gap,\n  children,\n  style,\n  ref,\n  ...boxProps\n}: DividerProps) {\n  dividerStyles.useVariants({ variant });\n\n  const rootStyle: StyleProp<ViewStyle> = useMemo(\n    () => [{ flexShrink: 0 }, gap === undefined ? dividerStyles.root : undefined, style],\n    [gap, dividerStyles.root, style],\n  );\n\n  if (children) {\n    const InternalComponent = vertical ? VStack : HStack;\n\n    return (\n      <InternalComponent\n        ref={ref}\n        alignItems=\"center\"\n        flex=\"1\"\n        gap={gap}\n        {...boxProps}\n        style={rootStyle}\n      >\n        {hasManualLine(children) ? (\n          renderManualChildren(children, variant, vertical)\n        ) : (\n          <>\n            {contentPosition !== 'start' && <DividerLine variant={variant} vertical={vertical} />}\n            {shouldWrapInLabel(children) ? (\n              <DividerLabel variant={variant}>{children}</DividerLabel>\n            ) : (\n              children\n            )}\n            {contentPosition !== 'end' && <DividerLine variant={variant} vertical={vertical} />}\n          </>\n        )}\n      </InternalComponent>\n    );\n  }\n\n  return (\n    <Box\n      ref={ref}\n      display=\"flex\"\n      flexDirection={vertical ? 'column' : 'row'}\n      width={vertical ? undefined : '100%'}\n      {...boxProps}\n      style={rootStyle}\n    >\n      <DividerLine variant={variant} vertical={vertical} />\n    </Box>\n  );\n});\n\nDivider.displayName = 'Divider';\n\nexport { Divider };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,MAAM,UAAU,KAAK,SAAS,QAAQ,EACpC,UAAU,WACV,WAAW,OACX,kBAAkB,UAClB,KACA,UACA,OACA,KACA,GAAG,YACY;CACf,cAAc,YAAY,EAAE,SAAS,CAAC;CAEtC,MAAM,YAAkC,cAChC;EAAC,EAAE,YAAY,GAAG;EAAE,QAAQ,KAAA,IAAY,cAAc,OAAO,KAAA;EAAW;EAAM,EACpF;EAAC;EAAK,cAAc;EAAM;EAAM,CACjC;CAED,IAAI,UAGF,OACE,oBAHwB,WAAW,SAAS,QAG5C;EACO;EACL,YAAW;EACX,MAAK;EACA;EACL,GAAI;EACJ,OAAO;YAEN,cAAc,SAAS,GACtB,qBAAqB,UAAU,SAAS,SAAS,GAEjD,qBAAA,UAAA,EAAA,UAAA;GACG,oBAAoB,WAAW,oBAAC,aAAD;IAAsB;IAAmB;IAAY,CAAA;GACpF,kBAAkB,SAAS,GAC1B,oBAAC,cAAD;IAAuB;IAAU;IAAwB,CAAA,GAEzD;GAED,oBAAoB,SAAS,oBAAC,aAAD;IAAsB;IAAmB;IAAY,CAAA;GAClF,EAAA,CAAA;EAEa,CAAA;CAIxB,OACE,oBAAC,KAAD;EACO;EACL,SAAQ;EACR,eAAe,WAAW,WAAW;EACrC,OAAO,WAAW,KAAA,IAAY;EAC9B,GAAI;EACJ,OAAO;YAEP,oBAAC,aAAD;GAAsB;GAAmB;GAAY,CAAA;EACjD,CAAA;EAER;AAEF,QAAQ,cAAc"}

package/dist/components/Divider/DividerLabel.cjs

@@ -0,0 +1,37 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_components_Text = require("../Text.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let generated_styles = require("../../../generated/styles");
+//#region src/components/Divider/DividerLabel.tsx
+/**
+* **The configured label element used by Divider.**
+*
+* @description
+* DividerLabel applies the configured divider label typography and color.
+*
+* @category Layout
+* @platform mobile
+*/
+const DividerLabel = (0, react.memo)(function DividerLabel({ variant: variantProp, style, children, ref, ...textProps }) {
+	const variant = variantProp ?? "primary";
+	generated_styles.dividerStyles.useVariants({ variant });
+	const labelStyle = (0, react.useMemo)(() => [
+		{ flexShrink: 0 },
+		generated_styles.dividerStyles.label,
+		style
+	], [generated_styles.dividerStyles.label, style]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+		ref,
+		color: "primary",
+		variant: "label3",
+		...textProps,
+		style: labelStyle,
+		children
+	});
+});
+DividerLabel.displayName = "DividerLabel";
+//#endregion
+exports.DividerLabel = DividerLabel;

package/dist/components/Divider/DividerLabel.d.cts

@@ -0,0 +1,18 @@
+
+import { DividerLabelProps } from "./types.cjs";
+import * as _$react from "react";
+
+//#region src/components/Divider/DividerLabel.d.ts
+/**
+ * **The configured label element used by Divider.**
+ *
+ * @description
+ * DividerLabel applies the configured divider label typography and color.
+ *
+ * @category Layout
+ * @platform mobile
+ */
+declare const DividerLabel: _$react.NamedExoticComponent<DividerLabelProps>;
+//#endregion
+export { DividerLabel };
+//# sourceMappingURL=DividerLabel.d.cts.map

package/dist/components/Divider/DividerLabel.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DividerLabel.d.cts","names":[],"sources":["../../../src/components/Divider/DividerLabel.tsx"],"mappings":";;;;;;;;AAIiD;;;;;;cAW3C,YAAA,EAAY,OAAA,CAAA,oBAAA,CAAA,iBAAA"}

package/dist/components/Divider/DividerLabel.d.ts

@@ -0,0 +1,18 @@
+
+import { DividerLabelProps } from "./types.js";
+import * as _$react from "react";
+
+//#region src/components/Divider/DividerLabel.d.ts
+/**
+ * **The configured label element used by Divider.**
+ *
+ * @description
+ * DividerLabel applies the configured divider label typography and color.
+ *
+ * @category Layout
+ * @platform mobile
+ */
+declare const DividerLabel: _$react.NamedExoticComponent<DividerLabelProps>;
+//#endregion
+export { DividerLabel };
+//# sourceMappingURL=DividerLabel.d.ts.map

package/dist/components/Divider/DividerLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DividerLabel.d.ts","names":[],"sources":["../../../src/components/Divider/DividerLabel.tsx"],"mappings":";;;;;;;;AAIiD;;;;;;cAW3C,YAAA,EAAY,OAAA,CAAA,oBAAA,CAAA,iBAAA"}

package/dist/components/Divider/DividerLabel.js

@@ -0,0 +1,37 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { Text } from "../Text.js";
+import { memo, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { dividerStyles } from "../../../generated/styles";
+//#region src/components/Divider/DividerLabel.tsx
+/**
+* **The configured label element used by Divider.**
+*
+* @description
+* DividerLabel applies the configured divider label typography and color.
+*
+* @category Layout
+* @platform mobile
+*/
+const DividerLabel = memo(function DividerLabel({ variant: variantProp, style, children, ref, ...textProps }) {
+	const variant = variantProp ?? "primary";
+	dividerStyles.useVariants({ variant });
+	const labelStyle = useMemo(() => [
+		{ flexShrink: 0 },
+		dividerStyles.label,
+		style
+	], [dividerStyles.label, style]);
+	return /* @__PURE__ */ jsx(Text, {
+		ref,
+		color: "primary",
+		variant: "label3",
+		...textProps,
+		style: labelStyle,
+		children
+	});
+});
+DividerLabel.displayName = "DividerLabel";
+//#endregion
+export { DividerLabel };
+
+//# sourceMappingURL=DividerLabel.js.map

package/dist/components/Divider/DividerLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DividerLabel.js","names":[],"sources":["../../../src/components/Divider/DividerLabel.tsx"],"sourcesContent":["import { memo, useMemo } from 'react';\n\nimport { dividerStyles } from '../../../generated/styles';\nimport { Text } from '../Text';\nimport type { DividerLabelProps } from './types';\n\n/**\n * **The configured label element used by Divider.**\n *\n * @description\n * DividerLabel applies the configured divider label typography and color.\n *\n * @category Layout\n * @platform mobile\n */\nconst DividerLabel = memo(function DividerLabel({\n  variant: variantProp,\n  style,\n  children,\n  ref,\n  ...textProps\n}: DividerLabelProps) {\n  const variant = variantProp ?? 'primary';\n\n  dividerStyles.useVariants({ variant });\n\n  const labelStyle = useMemo(\n    () => [{ flexShrink: 0 }, dividerStyles.label, style],\n    [dividerStyles.label, style],\n  );\n\n  return (\n    <Text ref={ref} color=\"primary\" variant=\"label3\" {...textProps} style={labelStyle}>\n      {children}\n    </Text>\n  );\n});\n\nDividerLabel.displayName = 'DividerLabel';\n\nexport { DividerLabel };\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAM,eAAe,KAAK,SAAS,aAAa,EAC9C,SAAS,aACT,OACA,UACA,KACA,GAAG,aACiB;CACpB,MAAM,UAAU,eAAe;CAE/B,cAAc,YAAY,EAAE,SAAS,CAAC;CAEtC,MAAM,aAAa,cACX;EAAC,EAAE,YAAY,GAAG;EAAE,cAAc;EAAO;EAAM,EACrD,CAAC,cAAc,OAAO,MAAM,CAC7B;CAED,OACE,oBAAC,MAAD;EAAW;EAAK,OAAM;EAAU,SAAQ;EAAS,GAAI;EAAW,OAAO;EACpE;EACI,CAAA;EAET;AAEF,aAAa,cAAc"}