@factorialco/f0-react-native 0.29.0 → 0.31.0

package/lib/typescript/components/primitives/F0Icon/F0Icon.styles.d.ts

@@ -0,0 +1,90 @@
+/**
+ * F0Icon tailwind-variants configuration
+ * Size and color variants from the F0 design system
+ */
+export declare const iconVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        xl: string;
+        lg: string;
+        md: string;
+        sm: string;
+        xs: string;
+    };
+    color: {
+        default: string;
+        secondary: string;
+        inverse: string;
+        bold: string;
+        critical: string;
+        "critical-bold": string;
+        accent: string;
+        info: string;
+        warning: string;
+        positive: string;
+        promote: string;
+        selected: string;
+        "selected-hover": string;
+        "mood-super-negative": string;
+        "mood-negative": string;
+        "mood-neutral": string;
+        "mood-positive": string;
+        "mood-super-positive": string;
+    };
+}, undefined, "shrink-0", {
+    size: {
+        xl: string;
+        lg: string;
+        md: string;
+        sm: string;
+        xs: string;
+    };
+    color: {
+        default: string;
+        secondary: string;
+        inverse: string;
+        bold: string;
+        critical: string;
+        "critical-bold": string;
+        accent: string;
+        info: string;
+        warning: string;
+        positive: string;
+        promote: string;
+        selected: string;
+        "selected-hover": string;
+        "mood-super-negative": string;
+        "mood-negative": string;
+        "mood-neutral": string;
+        "mood-positive": string;
+        "mood-super-positive": string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        xl: string;
+        lg: string;
+        md: string;
+        sm: string;
+        xs: string;
+    };
+    color: {
+        default: string;
+        secondary: string;
+        inverse: string;
+        bold: string;
+        critical: string;
+        "critical-bold": string;
+        accent: string;
+        info: string;
+        warning: string;
+        positive: string;
+        promote: string;
+        selected: string;
+        "selected-hover": string;
+        "mood-super-negative": string;
+        "mood-negative": string;
+        "mood-neutral": string;
+        "mood-positive": string;
+        "mood-super-positive": string;
+    };
+}, undefined, "shrink-0", unknown, unknown, undefined>>;
+//# sourceMappingURL=F0Icon.styles.d.ts.map

package/lib/typescript/components/primitives/F0Icon/F0Icon.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"F0Icon.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/F0Icon/F0Icon.styles.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDAoCvB,CAAA"}

package/lib/typescript/components/primitives/F0Icon/F0Icon.types.d.ts

@@ -0,0 +1,47 @@
+import type { ForwardRefExoticComponent, RefAttributes } from "react";
+import type { SvgProps } from "react-native-svg";
+import type { Svg } from "react-native-svg";
+import type { VariantProps } from "tailwind-variants";
+import type { iconVariants } from "./F0Icon.styles";
+/**
+ * Icon component type - forward ref to SVG component with className support
+ */
+export type IconType = ForwardRefExoticComponent<SvgProps & RefAttributes<Svg> & {
+    className?: string;
+}>;
+/**
+ * Icon color variants derived from f0-icon-* tokens in src/styles/theme.css
+ * Sync is enforced by F0Icon.tokens.spec.ts
+ */
+export declare const ICON_COLORS: readonly ["default", "secondary", "inverse", "bold", "critical", "critical-bold", "accent", "info", "warning", "positive", "promote", "selected", "selected-hover", "mood-super-negative", "mood-negative", "mood-neutral", "mood-positive", "mood-super-positive"];
+export type IconColor = (typeof ICON_COLORS)[number];
+/**
+ * Public F0Icon props
+ * Supports semantic color via `color` prop, with `className` as escape hatch.
+ */
+export interface F0IconProps extends Omit<SvgProps, "style"> {
+    /**
+     * Tailwind className for custom styling or color overrides.
+     * Prefer the `color` prop for semantic icon colors.
+     */
+    className?: string;
+    /**
+     * Semantic icon color from the F0 design system
+     * Maps to f0-icon-* tokens (e.g. color="critical" -> text-f0-icon-critical)
+     */
+    color?: IconColor;
+    /**
+     * Icon component to render (from icons directory)
+     */
+    icon: IconType;
+    /**
+     * Icon size variant
+     * @default 'md'
+     */
+    size?: VariantProps<typeof iconVariants>["size"];
+    /**
+     * Test ID for testing
+     */
+    testID?: string;
+}
+//# sourceMappingURL=F0Icon.types.d.ts.map

package/lib/typescript/components/primitives/F0Icon/F0Icon.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"F0Icon.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/F0Icon/F0Icon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AACrE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAA;AAC3C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAEnD;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,yBAAyB,CAC9C,QAAQ,GACN,aAAa,CAAC,GAAG,CAAC,GAAG;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CACJ,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,qQAmBd,CAAA;AAEV,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAEpD;;;GAGG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC1D;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IAEjB;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAA;IAEd;;;OAGG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;IAEhD;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB"}

package/lib/typescript/components/primitives/F0Icon/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * F0Icon - Icon primitive component
+ *
+ * @see F0Icon.md for documentation
+ */
+export { default as F0Icon } from "./F0Icon";
+export type { F0IconProps, IconType, IconColor } from "./F0Icon.types";
+export { ICON_COLORS } from "./F0Icon.types";
+export { applyIconInterop } from "./F0Icon";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/primitives/F0Icon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/F0Icon/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA;AAC5C,YAAY,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA"}

package/lib/typescript/components/primitives/PressableFeedback/PressableFeedback.d.ts

@@ -0,0 +1,18 @@
+import { View } from "react-native";
+import type { PressableFeedbackProps } from "./PressableFeedback.types";
+/**
+ * PressableFeedback - Internal pressable primitive with animated feedback
+ *
+ * Wraps React Native's Pressable with Reanimated scale and highlight
+ * animations. Used internally by F0 components.
+ *
+ * @internal
+ *
+ * @example
+ * <PressableFeedback variant="both" onPress={handlePress}>
+ *   <View><F0Text>Press me</F0Text></View>
+ * </PressableFeedback>
+ */
+export declare const PressableFeedback: import("react").ForwardRefExoticComponent<PressableFeedbackProps & import("react").RefAttributes<View>>;
+export default PressableFeedback;
+//# sourceMappingURL=PressableFeedback.d.ts.map

package/lib/typescript/components/primitives/PressableFeedback/PressableFeedback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PressableFeedback.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/PressableFeedback/PressableFeedback.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,IAAI,EAAuB,MAAM,cAAc,CAAA;AAWnE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAA;AASvE;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,iBAAiB,yGAuI7B,CAAA;AAID,eAAe,iBAAiB,CAAA"}

package/lib/typescript/components/{PressableFeedback/index.d.ts → primitives/PressableFeedback/PressableFeedback.types.d.ts}

@@ -1,5 +1,5 @@
-import { View, type PressableProps } from "react-native";
-import { type WithTimingConfig } from "react-native-reanimated";
+import type { PressableProps } from "react-native";
+import type { WithTimingConfig } from "react-native-reanimated";
 export type PressableFeedbackVariant = "highlight" | "scale" | "both" | "none";
 export interface ScaleAnimationConfig {
     /** Scale value when pressed (0-1, default: 0.98) */
@@ -10,11 +10,16 @@ export interface ScaleAnimationConfig {
 export interface HighlightAnimationConfig {
     /** Background color of the highlight overlay */
     backgroundColor?: string;
-    /** Opacity when pressed [min, max] (default: [0, 0.1]) */
+    /** Opacity when pressed [min, max] (default: [0, 0.15]) */
     opacity?: [number, number];
     /** Timing configuration for the animation */
     timingConfig?: WithTimingConfig;
 }
+/**
+ * @internal
+ * PressableFeedback is an internal primitive used by other F0 components.
+ * It wraps React Native's Pressable with Reanimated scale/highlight animations.
+ */
 export interface PressableFeedbackProps extends Omit<PressableProps, "style" | "children"> {
     /** Visual feedback variant */
     variant?: PressableFeedbackVariant;
@@ -24,13 +29,11 @@ export interface PressableFeedbackProps extends Omit<PressableProps, "style" | "
     highlightAnimation?: HighlightAnimationConfig;
     /** Additional className for the pressable container */
     className?: string;
-    /** Style for the pressable container */
+    /** Style for the pressable container (needed for Reanimated animated styles) */
     style?: PressableProps["style"];
     /** Children to render inside the pressable */
     children?: React.ReactNode;
     /** Whether animations are disabled */
     disableAnimation?: boolean;
 }
-export declare const PressableFeedback: import("react").ForwardRefExoticComponent<PressableFeedbackProps & import("react").RefAttributes<View>>;
-export default PressableFeedback;
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=PressableFeedback.types.d.ts.map

package/lib/typescript/components/primitives/PressableFeedback/PressableFeedback.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PressableFeedback.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/PressableFeedback/PressableFeedback.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAE/D,MAAM,MAAM,wBAAwB,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;AAE9E,MAAM,WAAW,oBAAoB;IACnC,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6CAA6C;IAC7C,YAAY,CAAC,EAAE,gBAAgB,CAAA;CAChC;AAED,MAAM,WAAW,wBAAwB;IACvC,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC1B,6CAA6C;IAC7C,YAAY,CAAC,EAAE,gBAAgB,CAAA;CAChC;AAED;;;;GAIG;AACH,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAClD,cAAc,EACd,OAAO,GAAG,UAAU,CACrB;IACC,8BAA8B;IAC9B,OAAO,CAAC,EAAE,wBAAwB,CAAA;IAClC,4EAA4E;IAC5E,cAAc,CAAC,EAAE,oBAAoB,CAAA;IACrC,oFAAoF;IACpF,kBAAkB,CAAC,EAAE,wBAAwB,CAAA;IAC7C,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gFAAgF;IAChF,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IAC/B,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,sCAAsC;IACtC,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B"}

package/lib/typescript/components/primitives/PressableFeedback/index.d.ts

@@ -0,0 +1,3 @@
+export { PressableFeedback, default } from "./PressableFeedback";
+export type { PressableFeedbackProps, PressableFeedbackVariant, ScaleAnimationConfig, HighlightAnimationConfig, } from "./PressableFeedback.types";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/primitives/PressableFeedback/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/PressableFeedback/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAChE,YAAY,EACV,sBAAsB,EACtB,wBAAwB,EACxB,oBAAoB,EACpB,wBAAwB,GACzB,MAAM,2BAA2B,CAAA"}

package/lib/typescript/icons/index.d.ts

@@ -2,5 +2,4 @@ import * as AppIcons from "./app";
 import * as ModuleIcons from "./modules";
 export { AppIcons, ModuleIcons };
 export * from "./types";
-export { Icon } from "../components/Icon";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/icons/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/icons/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,OAAO,CAAA;AACjC,OAAO,KAAK,WAAW,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAA;AAChC,cAAc,SAAS,CAAA;AACvB,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/icons/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,OAAO,CAAA;AACjC,OAAO,KAAK,WAAW,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAA;AAChC,cAAc,SAAS,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@factorialco/f0-react-native",
-  "version": "0.29.0",
+  "version": "0.31.0",
   "type": "module",
   "description": "React Native components for F0 Design System",
   "main": "expo-router/entry",

package/src/components/Activity/ActivityItem/index.spec.tsx

@@ -2,7 +2,7 @@ import { render, fireEvent, screen } from "@testing-library/react-native"
 import React from "react"
 
 import { ActivityItem, ActivityItemSkeleton } from "../../Activity/ActivityItem"
-import { IconType } from "../../Icon"
+import { type IconType } from "../../primitives/F0Icon"
 
 // Mock the IconAvatar component
 jest.mock("../../Avatars/IconAvatar", () => ({

package/src/components/Activity/ActivityItem/index.tsx

@@ -2,7 +2,7 @@ import { useState } from "react"
 import { View, Text, Pressable } from "react-native"
 
 import { IconAvatar } from "../../Avatars/exports"
-import { IconType } from "../../Icon"
+import { type IconType } from "../../primitives/F0Icon"
 
 export type ActivityItemProps = {
   id: string

package/src/components/Avatars/IconAvatar/index.tsx

@@ -1,7 +1,7 @@
 import { View } from "react-native"
 
 import { cn } from "../../../lib/utils"
-import { Icon, IconType } from "../../Icon"
+import { F0Icon, type IconType } from "../../primitives/F0Icon"
 
 type Props = {
   icon: IconType
@@ -24,7 +24,11 @@ export const IconAvatar = ({ icon, size = "md", className }: Props) => {
         className
       )}
     >
-      <Icon icon={icon} size={size} className="text-f0-foreground-secondary" />
+      <F0Icon
+        icon={icon}
+        size={size}
+        className="text-f0-foreground-secondary"
+      />
     </View>
   )
 }

package/src/components/Avatars/ModuleAvatar/index.tsx

@@ -2,7 +2,7 @@ import { View } from "react-native"
 import Svg, { Defs, LinearGradient, Stop, Path } from "react-native-svg"
 import { tv, type VariantProps } from "tailwind-variants"
 
-import { IconType, applyIconInterop } from "../../Icon"
+import { type IconType, applyIconInterop } from "../../primitives/F0Icon"
 
 import { ModuleId, modules } from "./modules"
 

package/src/components/Badge/index.tsx

@@ -1,6 +1,6 @@
 import { tv, type VariantProps } from "tailwind-variants"
 
-import { Icon, type IconType } from "../Icon"
+import { F0Icon, type IconType } from "../primitives/F0Icon"
 
 const badgeVariants = tv({
   base: "flex shrink-0 items-center justify-center rounded-full",
@@ -39,7 +39,7 @@ export interface BadgeProps extends VariantProps<typeof badgeVariants> {
 
 export const Badge = ({ type, size = "md", icon }: BadgeProps) => {
   return (
-    <Icon
+    <F0Icon
       className={badgeVariants({ type, size })}
       icon={icon}
       size={iconSizes[size]}

package/src/components/Button/index.spec.tsx

@@ -1,13 +1,12 @@
 import { render, fireEvent, screen } from "@testing-library/react-native"
 import React from "react"
 
-import { IconType } from "../Icon"
+import { type IconType } from "../primitives/F0Icon"
 
 import { Button } from "./"
 
-// Mock the Icon component
-jest.mock("../Icon", () => ({
-  Icon: () => null,
+jest.mock("../primitives/F0Icon", () => ({
+  F0Icon: () => null,
 }))
 
 // Mock dependencies

package/src/components/Button/index.tsx

@@ -3,7 +3,7 @@ import { Pressable, Text, View } from "react-native"
 import { tv, type VariantProps } from "tailwind-variants"
 
 import { cn } from "../../lib/utils"
-import { Icon, type IconType } from "../Icon"
+import { F0Icon, type IconType, type IconColor } from "../primitives/F0Icon"
 
 export const variants = [
   "default",
@@ -68,29 +68,35 @@ const pressedVariants = tv({
   },
 })
 
-const getIconColor = (variant: ButtonVariant, isPressed: boolean) => {
+const getIconColor = (
+  variant: ButtonVariant,
+  isPressed: boolean
+): IconColor => {
   switch (variant) {
     case "default":
-      return "text-f0-icon-inverse"
+      return "inverse"
     case "critical":
-      return isPressed ? "text-f0-icon-inverse" : "text-f0-icon-critical-bold"
+      return isPressed ? "inverse" : "critical-bold"
     default:
-      return "text-f0-icon"
+      return "default"
   }
 }
 
-const getIconOnlyColor = (variant: ButtonVariant, isPressed: boolean) => {
+const getIconOnlyColor = (
+  variant: ButtonVariant,
+  isPressed: boolean
+): IconColor => {
   switch (variant) {
     case "critical":
-      return isPressed ? "text-f0-icon-inverse" : "text-f0-icon-critical-bold"
+      return isPressed ? "inverse" : "critical-bold"
     case "default":
-      return "text-f0-icon-inverse"
+      return "inverse"
     case "outline":
     case "neutral":
     case "ghost":
     case "promote":
     default:
-      return "text-f0-icon-bold"
+      return "bold"
   }
 }
 
@@ -191,15 +197,15 @@ export const Button = forwardRef<View, ButtonProps>(function Button(
         accessibilityHint={accessibilityHint}
       >
         {icon && (
-          <Icon
+          <F0Icon
             icon={icon}
             size={size === "sm" ? "sm" : "md"}
-            className={cn(
-              hideLabel && round ? undefined : "-ml-0.5",
+            color={
               hideLabel && round
                 ? getIconOnlyColor(variant, shouldShowPressed)
                 : getIconColor(variant, shouldShowPressed)
-            )}
+            }
+            className={hideLabel && round ? undefined : "-ml-0.5"}
           />
         )}
         {emoji && (

package/src/components/Icon/__tests__/Icon.spec.tsx

@@ -20,8 +20,6 @@ describe("Icon", () => {
     const { getByTestId } = render(
       <Icon icon={Archive} size="lg" testID="icon" />
     )
-    // In a real test environment, we could check the actual style props applied
-    // but for now we just ensure it renders
     expect(getByTestId("icon")).toBeTruthy()
   })
 
@@ -29,8 +27,6 @@ describe("Icon", () => {
     const { getByTestId } = render(
       <Icon icon={Archive} className="text-red-500" testID="icon" />
     )
-    // In a real test environment, we could check the actual style props applied
-    // but for now we just ensure it renders
     expect(getByTestId("icon")).toBeTruthy()
   })
 })

package/src/components/Icon/index.tsx

@@ -1,13 +1,9 @@
-import React, {
-  forwardRef,
-  ForwardRefExoticComponent,
-  RefAttributes,
-} from "react"
+import React, { forwardRef } from "react"
 import { Svg, SvgProps } from "react-native-svg"
 import { tv, type VariantProps } from "tailwind-variants"
-import { withUniwind } from "uniwind"
 
 import { cn } from "../../lib/utils"
+import { applyIconInterop, type IconType } from "../primitives/F0Icon"
 
 const iconVariants = tv({
   base: "shrink-0",
@@ -33,26 +29,11 @@ export interface IconProps extends SvgProps, VariantProps<typeof iconVariants> {
   isPressed?: boolean
 }
 
-export type IconType = ForwardRefExoticComponent<
-  SvgProps &
-    RefAttributes<Svg> & {
-      className?: string
-    }
->
-
-// Keep track of icons that have already had withUniwind applied
-const interopAppliedIcons = new WeakSet()
-
-// Function to apply UniWind interop to an icon component
-export function applyIconInterop(icon: IconType) {
-  if (!interopAppliedIcons.has(icon)) {
-    const wrappedIcon = withUniwind(icon)
-    interopAppliedIcons.add(wrappedIcon)
-    return wrappedIcon
-  }
-  return icon
-}
-
+/**
+ * @deprecated Use F0Icon instead. This component will be removed in a future version.
+ * Migration: Replace <Icon icon={X} /> with <F0Icon icon={X} />.
+ * F0Icon supports the same `icon`, `size`, `testID`, and `className` props, plus semantic `color` variants.
+ */
 export const Icon = forwardRef<Svg, IconProps>(function Icon(
   { size = "md", icon, className, testID, ...props },
   ref

package/src/components/OneChip/index.tsx

@@ -3,8 +3,8 @@ import { tv, type VariantProps } from "tailwind-variants"
 
 import { CrossedCircle } from "../../icons/app"
 import { cn } from "../../lib/utils"
-import { Icon, type IconType } from "../Icon"
-import { PressableFeedback } from "../PressableFeedback"
+import { F0Icon, type IconType } from "../primitives/F0Icon"
+import { PressableFeedback } from "../primitives/PressableFeedback"
 
 export const chipContainerVariants = tv({
   base: "flex items-center gap-1 rounded-full border border-solid border-f0-border px-2 py-0.5 grow-0",
@@ -61,7 +61,7 @@ export const OneChip = ({
       >
         <View className="flex flex-row items-center gap-0.5">
           {icon && (
-            <Icon
+            <F0Icon
               icon={icon}
               size="sm"
               className={chipTextVariants({ variant })}
@@ -78,7 +78,7 @@ export const OneChip = ({
               accessibilityRole="button"
               accessibilityLabel="Close"
             >
-              <Icon
+              <F0Icon
                 icon={CrossedCircle}
                 className={chipTextVariants({ variant })}
                 size="sm"

package/src/components/OnePreset/index.tsx

@@ -2,7 +2,7 @@ import { Text, View } from "react-native"
 
 import { cn } from "../../lib/utils"
 import { Counter } from "../Counter"
-import { PressableFeedback } from "../PressableFeedback"
+import { PressableFeedback } from "../primitives/PressableFeedback"
 
 interface PresetProps {
   label: string

package/src/components/Tags/AlertTab/index.tsx

@@ -1,7 +1,7 @@
 import { AlertCircle, InfoCircle, Warning } from "../../../icons/app"
 import { useTextFormatEnforcer } from "../../../lib/text"
 import { cn } from "../../../lib/utils"
-import { Icon, IconType } from "../../Icon"
+import { F0Icon, type IconType } from "../../primitives/F0Icon"
 import { BaseTag } from "../BaseTag"
 
 type Level = "info" | "warning" | "critical"
@@ -40,7 +40,7 @@ export const AlertTag = <T extends string>({ text, level }: Props<T>) => {
         }[level]
       )}
       left={
-        <Icon
+        <F0Icon
           icon={iconMap[level]}
           className={cn(
             {

package/src/components/Tags/BaseTag/index.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from "react"
 import { Text, View } from "react-native"
 
 import { cn } from "../../../lib/utils"
-import { PressableFeedback } from "../../PressableFeedback"
+import { PressableFeedback } from "../../primitives/PressableFeedback"
 
 type Props = {
   additionalAccesibleText?: string

package/src/components/Tags/RawTag/index.tsx

@@ -1,6 +1,6 @@
 import { useTextFormatEnforcer } from "../../../lib/text"
 import { cn } from "../../../lib/utils"
-import { Icon, IconType } from "../../Icon"
+import { F0Icon, type IconType } from "../../primitives/F0Icon"
 import { BaseTag } from "../BaseTag"
 
 export type RawTagProps = {
@@ -29,7 +29,7 @@ export const RawTag = ({
       classNameText="text-f0-foreground"
       left={
         icon ? (
-          <Icon icon={icon} size="sm" className="text-f0-icon" aria-hidden />
+          <F0Icon icon={icon} size="sm" color="default" aria-hidden />
         ) : null
       }
       text={text}

package/src/components/experimental/Lists/DataList/ItemContainer.tsx

@@ -2,7 +2,7 @@ import { ReactElement, ReactNode } from "react"
 import { View, Text } from "react-native"
 
 import { cn } from "../../../../lib/utils"
-import { Icon, IconType } from "../../../Icon"
+import { F0Icon, type IconType } from "../../../primitives/F0Icon"
 
 import { CopyAction } from "./actions/CopyAction"
 import { GenericAction } from "./actions/GenericAction"
@@ -34,7 +34,7 @@ export const ItemContainer = (props: ItemContainerProps) => {
           (typeof LeftIcon === "function" ? (
             LeftIcon({})
           ) : (
-            <Icon icon={LeftIcon} size="md" />
+            <F0Icon icon={LeftIcon} size="md" />
           ))}
         <Text className="line-clamp-5 text-left text-f0-foreground">
           {text}

package/src/components/experimental/Lists/DataList/actions/CopyAction.tsx

@@ -5,7 +5,7 @@ import { Pressable, View } from "react-native"
 import { CopyActionType } from ".."
 import { CheckCircle, LayersFront } from "../../../../../icons/app"
 import { cn } from "../../../../../lib/utils"
-import { Icon } from "../../../../Icon"
+import { F0Icon } from "../../../../primitives/F0Icon"
 
 const COPIED_SHOWN_MS = 750
 
@@ -47,24 +47,21 @@ export const CopyAction = ({ text, children }: CopyActionProps) => {
       <View className="flex flex-row items-center gap-1.5">{children}</View>
       <View className="flex">
         {!copied && (
-          <Icon
+          <F0Icon
             icon={LayersFront}
             size="md"
             aria-hidden={true}
-            className={cn(
-              "col-start-1 col-end-2 row-start-1 row-end-2 text-f0-icon-bold"
-            )}
+            color="bold"
+            className="col-start-1 col-end-2 row-start-1 row-end-2"
           />
         )}
         {copied && (
-          <Icon
+          <F0Icon
             icon={CheckCircle}
             size="md"
             aria-hidden={true}
-            className={cn(
-              "col-start-1 col-end-2 row-start-1 row-end-2",
-              "text-f0-icon-positive"
-            )}
+            color="positive"
+            className="col-start-1 col-end-2 row-start-1 row-end-2"
           />
         )}
       </View>