@yahoo/uds-mobile 1.0.0

package/dist/components/Chip.d.mts

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

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

@@ -0,0 +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,MAAA,CAAA,qBAAA"}

package/dist/components/Chip.mjs

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

package/dist/components/Chip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.mjs","names":["Chip"],"sources":["../../src/components/Chip.tsx"],"sourcesContent":["import type { ChipSize, ChipVariant } from '@yahoo/uds/tokens';\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"}

package/dist/components/HStack.cjs

@@ -0,0 +1,46 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+const require_rolldown_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");
+
+//#region src/components/HStack.tsx
+/**
+* **📦 A horizontal stack layout component**
+*
+* @description
+* A convenience component for creating horizontal layouts. It's a Box with
+* `flexDirection="row"` preset.
+*
+* @example
+* ```tsx
+* import { HStack } from '@yahoo/uds-mobile';
+*
+* <HStack gap="4" alignItems="center">
+*   <Text>Item 1</Text>
+*   <Text>Item 2</Text>
+* </HStack>
+* ```
+*
+* @usage
+* - 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)
+*/
+const HStack = (0, react.memo)(function HStack$1({ gap, children, ref, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+		ref,
+		flexDirection: "row",
+		rowGap: gap,
+		columnGap: gap,
+		...props,
+		children
+	});
+});
+HStack.displayName = "HStack";
+
+//#endregion
+exports.HStack = HStack;

package/dist/components/HStack.d.cts

@@ -0,0 +1,41 @@
+
+import { BoxProps } from "./Box.cjs";
+import * as react9 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?: StyleProps['columnGap'];
+  ref?: Ref<View>;
+}
+/**
+ * **📦 A horizontal stack layout component**
+ *
+ * @description
+ * A convenience component for creating horizontal layouts. It's a Box with
+ * `flexDirection="row"` preset.
+ *
+ * @example
+ * ```tsx
+ * import { HStack } from '@yahoo/uds-mobile';
+ *
+ * <HStack gap="4" alignItems="center">
+ *   <Text>Item 1</Text>
+ *   <Text>Item 2</Text>
+ * </HStack>
+ * ```
+ *
+ * @usage
+ * - 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)
+ */
+declare const HStack: react9.NamedExoticComponent<HStackProps>;
+//#endregion
+export { HStack, type HStackProps };
+//# sourceMappingURL=HStack.d.cts.map

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

@@ -0,0 +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"}

package/dist/components/HStack.d.mts

@@ -0,0 +1,41 @@
+
+import { BoxProps } from "./Box.mjs";
+import * as react4 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?: StyleProps['columnGap'];
+  ref?: Ref<View>;
+}
+/**
+ * **📦 A horizontal stack layout component**
+ *
+ * @description
+ * A convenience component for creating horizontal layouts. It's a Box with
+ * `flexDirection="row"` preset.
+ *
+ * @example
+ * ```tsx
+ * import { HStack } from '@yahoo/uds-mobile';
+ *
+ * <HStack gap="4" alignItems="center">
+ *   <Text>Item 1</Text>
+ *   <Text>Item 2</Text>
+ * </HStack>
+ * ```
+ *
+ * @usage
+ * - 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)
+ */
+declare const HStack: react4.NamedExoticComponent<HStackProps>;
+//#endregion
+export { HStack, type HStackProps };
+//# sourceMappingURL=HStack.d.mts.map

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

@@ -0,0 +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"}

package/dist/components/HStack.mjs

@@ -0,0 +1,46 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { Box } from "./Box.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/HStack.tsx
+/**
+* **📦 A horizontal stack layout component**
+*
+* @description
+* A convenience component for creating horizontal layouts. It's a Box with
+* `flexDirection="row"` preset.
+*
+* @example
+* ```tsx
+* import { HStack } from '@yahoo/uds-mobile';
+*
+* <HStack gap="4" alignItems="center">
+*   <Text>Item 1</Text>
+*   <Text>Item 2</Text>
+* </HStack>
+* ```
+*
+* @usage
+* - 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)
+*/
+const HStack = memo(function HStack$1({ gap, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Box, {
+		ref,
+		flexDirection: "row",
+		rowGap: gap,
+		columnGap: gap,
+		...props,
+		children
+	});
+});
+HStack.displayName = "HStack";
+
+//#endregion
+export { HStack };
+//# sourceMappingURL=HStack.mjs.map

package/dist/components/HStack.mjs.map

@@ -0,0 +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"}

package/dist/components/Icon.cjs

@@ -0,0 +1,150 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_glyphMap = require('../icons/dist/glyphMap.cjs');
+const require_svgMap = require('../icons/dist/svgMap.cjs');
+const require_tokens = require('../icons/dist/tokens.cjs');
+let react = require("react");
+let react_native = require("react-native");
+let generated_styles = require("../../generated/styles");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_native_svg = require("react-native-svg");
+let react_native_unistyles = require("react-native-unistyles");
+
+//#region src/components/Icon.tsx
+const DEFAULT_PROPS = {
+	size: "md",
+	color: "primary",
+	variant: "outline",
+	flexShrink: "0"
+};
+/**
+* Separate component for multicolor SVG icons.
+* Uses useUnistyles() for reactive theme access - isolated here so
+* glyph-based icons don't pay the hook overhead.
+*/
+const MulticolorIcon = (0, react.memo)(function MulticolorIcon$1({ name, size = DEFAULT_PROPS.size, flexShrink = DEFAULT_PROPS.flexShrink, backgroundColor, dangerouslySetSize }) {
+	const { rt } = (0, react_native_unistyles.useUnistyles)();
+	const colorScheme = rt.themeName === "dark" ? "dark" : "light";
+	const pixelSize = require_tokens.ICON_SIZE_MAP[size];
+	const svgKey = `${name}-${colorScheme}-${pixelSize}`;
+	const svgContent = require_svgMap.svgMap[svgKey];
+	if (!svgContent) {
+		console.warn(`Multicolor icon "${svgKey}" not found`);
+		return null;
+	}
+	generated_styles.styles.useVariants({
+		flexShrink,
+		backgroundColor
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+		style: generated_styles.styles.foundation,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_svg.SvgXml, {
+			xml: svgContent,
+			width: dangerouslySetSize ?? pixelSize,
+			height: dangerouslySetSize ?? pixelSize
+		})
+	});
+});
+const OutlineOrFillIcon = (0, react.memo)(function OutlineOrFillIcon$1({ name, size = DEFAULT_PROPS.size, color = DEFAULT_PROPS.color, variant = DEFAULT_PROPS.variant, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, flexShrink = "0", spacingStart, spacingEnd, spacingTop, spacingBottom, spacingHorizontal, spacingVertical, spacing, offsetStart, offsetEnd, offsetTop, offsetBottom, offsetHorizontal, offsetVertical, offset, dangerouslySetColor, dangerouslySetSize, style, ref, ...props }) {
+	const pixelSize = require_tokens.ICON_SIZE_MAP[size];
+	generated_styles.styles.useVariants({
+		color,
+		backgroundColor,
+		borderRadius,
+		borderTopStartRadius,
+		borderTopEndRadius,
+		borderBottomStartRadius,
+		borderBottomEndRadius,
+		borderColor,
+		borderStartColor,
+		borderEndColor,
+		borderTopColor,
+		borderBottomColor,
+		borderWidth,
+		borderVerticalWidth,
+		borderHorizontalWidth,
+		borderStartWidth,
+		borderEndWidth,
+		borderTopWidth,
+		borderBottomWidth,
+		flexShrink,
+		spacingStart,
+		spacingEnd,
+		spacingTop,
+		spacingBottom,
+		spacingHorizontal,
+		spacingVertical,
+		spacing,
+		offsetStart,
+		offsetEnd,
+		offsetTop,
+		offsetBottom,
+		offsetHorizontal,
+		offsetVertical,
+		offset
+	});
+	const glyph = require_glyphMap.glyphMap[`${name}-${variant}-${pixelSize}`];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+		ref,
+		accessibilityRole: "image",
+		accessibilityLabel: name,
+		style: (0, react.useMemo)(() => [
+			{
+				fontFamily: "uds-icons",
+				textAlign: "center",
+				textAlignVertical: "center"
+			},
+			generated_styles.styles.foundation,
+			dangerouslySetColor ? { color: dangerouslySetColor } : void 0,
+			dangerouslySetSize ? {
+				fontSize: dangerouslySetSize,
+				lineHeight: dangerouslySetSize
+			} : void 0,
+			style
+		], [
+			dangerouslySetColor,
+			dangerouslySetSize,
+			style,
+			generated_styles.styles.foundation
+		]),
+		...props,
+		children: glyph
+	});
+});
+/**
+* **🎨 An icon component using UDS icon fonts**
+*
+* @description
+* Renders icons from the UDS icon library. Supports multiple variants
+* (outline, fill, multicolor) and sizes.
+*
+* @example
+* ```tsx
+* import { Icon } from '@yahoo/uds-mobile';
+*
+* <Icon name="ChevronRight" size="md" color="primary" />
+* <Icon name="Star" variant="fill" color="accent" />
+* ```
+*
+* @usage
+* - Use name prop to specify the icon
+* - Use variant prop for outline/fill/multicolor
+* - Use size prop for icon size (xs, sm, md, lg, xl)
+*
+* @see The {@link https://uds.build/docs/components/icon Icon Docs} for more info
+*/
+const Icon = (0, react.memo)(function Icon$1({ variant, ...props }) {
+	if (variant === "multicolor") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MulticolorIcon, { ...props });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OutlineOrFillIcon, {
+		variant,
+		...props
+	});
+});
+Icon.displayName = "Icon";
+const iconNames = require_glyphMap.glyphNames;
+const multicolorIconNames = require_svgMap.svgGlyphNames;
+
+//#endregion
+exports.Icon = Icon;
+exports.iconNames = iconNames;
+exports.multicolorIconNames = multicolorIconNames;

package/dist/components/Icon.d.cts

@@ -0,0 +1,90 @@
+
+import { IconSize, IconVariant } from "../icons/dist/types.cjs";
+import "../uds/dist/index.cjs";
+import { GlyphName } from "../icons/dist/glyphMap.cjs";
+import { SvgGlyphName } from "../icons/dist/svgMap.cjs";
+import * as react19 from "react";
+import { Ref } from "react";
+import { StyleProp, Text, TextProps, TextStyle } from "react-native";
+import { StyleProps } from "../../generated/styles";
+
+//#region src/components/Icon.d.ts
+type IconName = GlyphName | SvgGlyphName;
+interface IconProps extends Omit<TextProps, 'style'> {
+  ref?: Ref<Text>;
+  /** The icon name */
+  name: IconName;
+  /** Icon size */
+  size?: IconSize;
+  /** Icon color */
+  color?: StyleProps['color'];
+  /** Icon variant (outline, fill, multicolor) */
+  variant?: IconVariant;
+  backgroundColor?: StyleProps['backgroundColor'];
+  borderRadius?: StyleProps['borderRadius'];
+  borderTopStartRadius?: StyleProps['borderTopStartRadius'];
+  borderTopEndRadius?: StyleProps['borderTopEndRadius'];
+  borderBottomStartRadius?: StyleProps['borderBottomStartRadius'];
+  borderBottomEndRadius?: StyleProps['borderBottomEndRadius'];
+  borderColor?: StyleProps['borderColor'];
+  borderStartColor?: StyleProps['borderStartColor'];
+  borderEndColor?: StyleProps['borderEndColor'];
+  borderTopColor?: StyleProps['borderTopColor'];
+  borderBottomColor?: StyleProps['borderBottomColor'];
+  borderWidth?: StyleProps['borderWidth'];
+  borderVerticalWidth?: StyleProps['borderVerticalWidth'];
+  borderHorizontalWidth?: StyleProps['borderHorizontalWidth'];
+  borderStartWidth?: StyleProps['borderStartWidth'];
+  borderEndWidth?: StyleProps['borderEndWidth'];
+  borderTopWidth?: StyleProps['borderTopWidth'];
+  borderBottomWidth?: StyleProps['borderBottomWidth'];
+  flexShrink?: StyleProps['flexShrink'];
+  spacingStart?: StyleProps['spacingStart'];
+  spacingEnd?: StyleProps['spacingEnd'];
+  spacingTop?: StyleProps['spacingTop'];
+  spacingBottom?: StyleProps['spacingBottom'];
+  spacingHorizontal?: StyleProps['spacingHorizontal'];
+  spacingVertical?: StyleProps['spacingVertical'];
+  spacing?: StyleProps['spacing'];
+  offsetStart?: StyleProps['offsetStart'];
+  offsetEnd?: StyleProps['offsetEnd'];
+  offsetTop?: StyleProps['offsetTop'];
+  offsetBottom?: StyleProps['offsetBottom'];
+  offsetHorizontal?: StyleProps['offsetHorizontal'];
+  offsetVertical?: StyleProps['offsetVertical'];
+  offset?: StyleProps['offset'];
+  /** Icon color override */
+  dangerouslySetColor?: string;
+  /** Icon font size override */
+  dangerouslySetSize?: number;
+  /** Optional style override */
+  style?: StyleProp<TextStyle>;
+}
+/**
+ * **🎨 An icon component using UDS icon fonts**
+ *
+ * @description
+ * Renders icons from the UDS icon library. Supports multiple variants
+ * (outline, fill, multicolor) and sizes.
+ *
+ * @example
+ * ```tsx
+ * import { Icon } from '@yahoo/uds-mobile';
+ *
+ * <Icon name="ChevronRight" size="md" color="primary" />
+ * <Icon name="Star" variant="fill" color="accent" />
+ * ```
+ *
+ * @usage
+ * - Use name prop to specify the icon
+ * - Use variant prop for outline/fill/multicolor
+ * - Use size prop for icon size (xs, sm, md, lg, xl)
+ *
+ * @see The {@link https://uds.build/docs/components/icon Icon Docs} for more info
+ */
+declare const Icon: react19.NamedExoticComponent<IconProps>;
+declare const iconNames: readonly ["A11Y", "Accessible", "AccountRecover", "AccountRefresh", "AccountSwitchAlt", "AccountSwitcher", "AcousticGuitar", "Add", "AddBell", "AddCalendar", "AddCheckCircle", "AddCircle", "AddContactCard", "AddDocument", "AddFace", "AddFolder", "AddPaperPlane", "AddPeople", "AddQuestion", "AddSearch", "AddSquare", "AffiliateLink", "AirQuality", "Airplane", "AirplaneLanding", "AirplaneTakeOff", "AngledSquareOnSquare", "AnyFile", "AppSwitcher", "AquariusAstrology", "Archive", "AriesAstrology", "ArrowDown", "ArrowDownCircle", "ArrowLeft", "ArrowLineDown", "ArrowLineUp", "ArrowRight", "ArrowUp", "Article", "ArtisticGymnastics", "Ascender", "AudioFile", "Authenticator", "AutoDownload", "AutoSaveOffline", "AutoSaveSync", "AutoSaveUpload", "AutoSaveUploadFail", "AutoSaved", "BabyBottle", "BackTimeTen", "Badge", "Balance", "BallInWater", "Barometer", "BaseBallBat", "Baseball", "Basketball", "BasketballHoop", "BeachUmbrella", "Bed", "Bell", "Below", "BigDownArrow", "BigLeftArrow", "BigRightArrow", "BigRightStraightArrow", "BigUpArrow", "Bike", "Bingo", "Binoculars", "BlackJack", "Bold", "Bolt", "Bookmark", "BottomLine", "BowAndArrow", "BoxCircle", "BoxFront", "BoxOnBox", "BoxingGlove", "Browser", "BubbleZone", "Building", "BulletPointContainer", "BulletPoints", "Bullseye", "BusFront", "BusinessBag", "Cake", "Calendar", "CalendarClock", "CalendarConfirm", "CalendarFile", "CalendarICSFile", "CalendarRightArrow", "Camera", "CancerAstrology", "Canoe", "CapriconAstrology", "Car", "CardsCheck", "Cash", "CelebrityStar", "CenterAlignment", "ChatAi", "Check", "CheckBookmark", "CheckBox", "CheckCircle", "CheckDocuments", "CheckEnvelope", "CheckPeople", "CheckSpeechBubble", "CheckVoteBallot", "Checklist", "ChevronDown", "ChevronLeft", "ChevronLeftPeople", "ChevronRight", "ChevronRightPeople", "ChevronUp", "Circle", "ClearText", "Clipboard", "Clock", "Clone", "ClosedCaption", "Cloud", "CloudDay", "CloudNight", "Cocktails", "Coffee", "CoffeeTakeout", "Cog", "Coin", "CollapseColumn", "Command", "Compass", "ComputerChip", "Connection", "ConnectionScreen", "ContactBook", "ContactCard", "Convert", "ConvertAlt", "ConvertLeft", "ConvertRight", "Cookies", "Coupon", "CreditCard", "CreditCardPayment", "CrescentMoon", "Cricket", "Cross", "CrossCircle", "CrossEnvelope", "CrossPeople", "CrossShield", "Crossword", "Cycling", "DOCFile", "DailyFantasy", "DaisyFlower", "Dandelion", "DataBook", "DataCloud", "DataSilo", "DataStorage", "Debug", "DeleteTab", "DeliveryPackage", "Dense", "DenyCircle", "Descender", "Desktop", "DiagonalKey", "DiagonalLeftDown", "DiagonalLeftUp", "DiagonalRightDown", "DiagonalRightUp", "Diamond", "Dice", "Dining", "Direction", "DiscoBall", "Document", "DocumentImageRectangle", "DocumentImageSquare", "DocumentRectangle", "DollarCircleArrows", "DotEnvelope", "DotTwoRings", "DoubleBigLeftArrow", "DoubleChevronLeft", "DoubleChevronRight", "DownCurveArrow", "Download", "DownloadCircle", "DownloadComplete", "DownloadInProgressCircle", "DraftDocument", "DragVertical", "Dusk", "Easel", "Eclipse", "Edit", "EmailVerification", "Emails", "Embed", "EntertainmentTv", "Envelope", "Error", "ExpandArrowLeft", "ExpandArrowRight", "ExpandColumn", "Eye", "EyeSearch", "EyeShut", "FaceID", "FallLeaf", "Family", "FastForward", "FencingEpee", "FilmReel", "FilmRoll", "FingerPointLeftArrow", "FingerPointRightArrow", "FingerPrint", "Fire", "FirstAidKit", "FirstQuarter", "FiveCircles", "Flag", "FlameTorch", "Fog", "FogDay", "Folder", "Font", "Football", "FootballHelmet", "ForestTree", "FourBoxes", "FourCorners", "FourCornersMusicNote", "FourLinesSpread", "FourThreeRatio", "FullMoon", "GIF", "GeminiAstrology", "GiftBox", "GolfTee", "GraduationHat", "Graph", "Gymnastics", "HalfStar", "HalfSun", "HappyFace", "HazeDay", "HazeNight", "Heading2", "Heading3", "Headline1", "HeadlineDocumentSquare", "Headphone", "HeadphonesMic", "Heart", "HeartArrow", "HeartPulse", "HeavyRain", "HeavyRainDay", "HeavyRainLightning", "HeavyRainLightningDay", "HeavyRainLightningNight", "HeavyRainNight", "Help", "Highlighter", "History", "HockeyWithPuck", "Home", "HorseHeadBridle", "HotTub", "Hurricane", "Ice", "Id", "Image", "ImageFile", "ImageGallery", "Inbox", "InboxDownArrow", "InboxUpArrow", "IndentRight", "Infinity", "Info", "InstitutionalWesternBank", "Italics", "JoyfulFace", "JudoUniform", "Keyboard", "KeylineShapes", "Kick", "KnightChessPiece", "Laptop", "LaptopWithPhone", "LayoutBottom", "LayoutDefault", "LayoutFourColumn", "LayoutGrid", "LayoutPerfectGrid", "LayoutRight", "LayoutThreeColumn", "LayoutThreeRows", "LayoutTwoColumn", "LeftAlign", "LeftCurveArrow", "LeftPageArrow", "LeoAstrology", "Letter", "LetterColor", "LetterSize", "LibraAstrology", "LifeRing", "Lightbulb", "Lightning", "LightningDay", "LightningNight", "Link", "LiquidDrop", "Live", "Livestream", "Location", "LocationCircle", "LocationMap", "Lock", "LogIn", "LogOut", "Lollipop", "LoveEnvelope", "LoyaltyCard", "MagicWand", "MagnifyingGlass", "Mahjong", "MakeupBeauty", "Mannequin", "Medal", "MedicineBottle", "MedicinePill", "Megaphone", "Microphone", "Microscope", "Minus", "MinusBox", "MinusCircle", "MinusPeople", "MinusSearch", "MmaGlove", "MmaRing", "MobileNumber", "MobilePhone", "More", "MoreVertical", "NeutralFace", "NewMoon", "Newsletter", "Night", "NineSixteenRatio", "NoBell", "NoConnectionScreen", "NoEye", "NoHeart", "NoImage", "NoPeople", "NoShield", "NoSmoking", "NoSquare", "NoStar", "NoVideoCamera", "NoWifi", "NotificationBell", "Null", "NumberedList", "OnTop", "OneOneRatio", "OpenBook", "OpenEnvelope", "OrderedList", "OutdentLeft", "PDF", "PPT", "PaperPlane", "PaperPlaneDiagonal", "Paperclip", "Paragraph", "ParagraphLeftIdent", "ParagraphRightIdent", "Parking", "ParkingSquare", "PassKey", "Password", "Pause", "Payments", "Payphone", "PayphoneFace", "Pencil", "PencilLines", "People", "Person", "PersonClimbing", "PersonShield", "Pets", "Phone", "PieChart", "Pin", "PingPong", "PiscesAstrology", "PlainText", "Play", "PlayCircle", "Pool", "PowerSwitch", "Preferences", "PreferencesAlt", "Printer", "Priority", "Profile", "Progress", "ProgressWithCheck", "Pulse", "PuzzlePiece", "QrCode", "QuestionBubble", "QuoteCircle", "QuoteSquare", "RAW", "RTF", "RTFOff", "RacingFlag", "Radar", "RadioCircle", "RainDay", "RainNight", "Receipt", "Receipts", "RedoPencil", "Refresh", "Restaurant", "RetailTag", "RightAlign", "RightCurveArrow", "RightPageArrow", "RobotHead", "Running", "SadFace", "SadderFace", "SagittariusAstrology", "SailBoat", "Satellite", "ScaleDown", "ScanQrCode", "Scissors", "ScorpioAstrology", "SearchConfirm", "SearchEnvelope", "SearchWorldWithLines", "SecurityKey", "SendToSelf", "Server", "SettingsAlt", "SettingsCogPeople", "Shapes", "Share", "Shield", "ShieldCheck", "ShieldSlash", "ShockedFace", "ShoppingBag", "ShoppingBasket", "ShoppingCart", "Shuttlecock", "SixteenNineRatio", "Skateboard", "SkipTimeTen", "Skull", "Slideshow", "SmallSquareInsideBigSquare", "SmartWatch", "SmileFace", "SmileFaceLife", "Sms", "SmsVerificationCode", "Sneaker", "SneakerAlt", "Snippet", "Snow", "SnowDay", "SnowNight", "Snowflake", "Soccer", "Solitaire", "SoundLow", "SoundOff", "SoundOn", "Spa", "Sparkle", "SparkleFootballBall", "SparkleTennisBall", "SpecialCharacter", "SpeechBubble", "SpeechBubbleStar", "SportsBook", "SportsSparkle", "SprinkleDay", "SprinkleNight", "Square", "Stadium", "Star", "StarArticle", "StarMedal", "StarTrophy", "StatePrivacyControls", "StockTrends", "Stopwatch", "Store", "Strikethrough", "Sun", "Sunrise", "Sunset", "SurfboardOnSand", "Swimming", "Sync", "Tab", "Tablet", "TaurusAstrology", "TechnicalRoute", "Television", "TennisBall", "TennisRacketBall", "ThirdQuarter", "ThreeCircles", "ThreeFourRatio", "ThreeLines", "ThreeLinesSpread", "ThumbsDown", "ThumbsUp", "Thumbtack", "ThumbtackDiagonal", "TimePaperPlane", "Tornado", "Trading", "TrafficSignRightTurn", "Trampoline", "Transactions", "Trash", "Trending", "TrendingCircle", "Trophy", "TruckRight", "Tshirt", "Tsunami", "Tub", "TwoArrowsDiagonalInwards", "TwoArrowsDiagonalOutwards", "TwoCorners", "TwoHorizontalRectangles", "TwoLinesContainer", "TwoMasks", "TwoRectangles", "TwoSparkles", "TwoSquares", "TwoThirdsColumn", "Underline", "Unlock", "UnorderedList", "UpCurveArrow", "UpDownChevron", "UpDownShortArrows", "UpFolder", "Upload", "Verification", "VideoCamera", "VideoFile", "VirgoAstrology", "Virus", "Volleyball", "Walking", "Wallet", "WaningCrescent", "WaningGibbous", "Warning", "WaxingCrescent", "WaxingGibbous", "Web", "Weights", "Wifi", "Wind", "WindCloud", "WindCloudDay", "WindCloudNight", "Wine", "WorldWithLines", "Wrench", "WrestlingHeadGear", "WritingAi", "XLSFile", "YEP", "ZIP"];
+declare const multicolorIconNames: readonly ["Cloud", "CloudDay", "CloudNight", "Cold", "Dreary", "Dusk", "Eclipse", "FirstQuarter", "Fog", "FogDay", "FogNight", "FullMoon", "HalfSun", "HazeDay", "HazeNight", "HeavyRain", "HeavyRainDay", "HeavyRainLightning", "HeavyRainLightningDay", "HeavyRainLightningNight", "HeavyRainNight", "Hot", "Hurricane", "Ice", "IntermittentCloudsNight", "IntermittentCloudsSunny", "Lightning", "LightningDay", "LightningNight", "MostlyNightFlurries", "Night", "PartlyCloudyNight", "PartlyFlurries", "PartlyNightFlurries", "PartlySunny", "Rain", "RainDay", "RainNight", "Sleet", "Snow", "SnowDay", "Snowflake", "SprinkleDay", "SprinkleNight", "Sun", "Sunrise", "Sunset", "ThirdQuarter", "Tornado", "WaningCrescent", "WaningGibbous", "WaxingCrescent", "WaxingGibbous", "Wind", "WindCloud", "WindCloudDay", "WindCloudNight"];
+//#endregion
+export { Icon, type IconName, type IconProps, iconNames, multicolorIconNames };
+//# sourceMappingURL=Icon.d.cts.map