@factorialco/f0-react-native 0.28.1 → 0.30.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/F0Text/AnimatedF0Text/AnimatedF0Text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedF0Text.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AA+DjE,eAAO,MAAM,cAAc,qNAAsC,CAAA;AAEjE,YAAY,EAAE,mBAAmB,EAAE,CAAA"}
+{"version":3,"file":"AnimatedF0Text.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AA0EjE,eAAO,MAAM,cAAc,qNAAsC,CAAA;AAEjE,YAAY,EAAE,mBAAmB,EAAE,CAAA"}

package/lib/typescript/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.types.d.ts

@@ -41,5 +41,19 @@ export interface AnimatedF0TextProps extends Omit<AnimatedProps<RNTextProps>, "c
      * Children content
      */
     children?: React.ReactNode;
+    /**
+     * Tailwind classes for layout and positioning.
+     *
+     * Allowed: margin, padding, flex, position, width, height, opacity, z-index, etc.
+     * Ignored: font-size, font-weight, line-height, letter-spacing, color, text-align,
+     * text-decoration, text-transform — these are controlled by semantic props and
+     * always take precedence via twMerge.
+     *
+     * @example
+     * className="mt-4 flex-1"
+     * className="mb-2 self-center"
+     * className="absolute top-0 left-0"
+     */
+    className?: string;
 }
 //# sourceMappingURL=AnimatedF0Text.types.d.ts.map

package/lib/typescript/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedF0Text.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAA;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AAE5D,OAAO,KAAK,EACV,SAAS,EACT,SAAS,EACT,cAAc,EACd,aAAa,EACb,iBAAiB,EAClB,MAAM,wBAAwB,CAAA;AAE/B;;;;;GAKG;AACH,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,aAAa,CAAC,WAAW,CAAC,EAC1B,WAAW,CACZ;IACC;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IAEjB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IAEjB;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAA;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAA;IAEzB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B"}
+{"version":3,"file":"AnimatedF0Text.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAA;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AAE5D,OAAO,KAAK,EACV,SAAS,EACT,SAAS,EACT,cAAc,EACd,aAAa,EACb,iBAAiB,EAClB,MAAM,wBAAwB,CAAA;AAE/B;;;;;GAKG;AACH,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,aAAa,CAAC,WAAW,CAAC,EAC1B,WAAW,CACZ;IACC;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IAEjB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IAEjB;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAA;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAA;IAEzB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE1B;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB"}

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

@@ -1 +1 @@
-{"version":3,"file":"F0Text.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/F0Text/F0Text/F0Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,MAAM,cAAc,CAAA;AAK7C,OAAO,EAAwB,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAoDvE,eAAO,MAAM,MAAM,uGAA8B,CAAA;AAGjD,YAAY,EAAE,WAAW,EAAE,CAAA;AAC3B,OAAO,EACL,mBAAmB,EACnB,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,eAAe,GAChB,MAAM,gBAAgB,CAAA;AACvB,YAAY,EACV,iBAAiB,EACjB,SAAS,EACT,SAAS,EACT,cAAc,EACd,aAAa,GACd,MAAM,gBAAgB,CAAA"}
+{"version":3,"file":"F0Text.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/F0Text/F0Text/F0Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,MAAM,cAAc,CAAA;AAK7C,OAAO,EAAwB,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAA;AA2DvE,eAAO,MAAM,MAAM,uGAA8B,CAAA;AAGjD,YAAY,EAAE,WAAW,EAAE,CAAA;AAC3B,OAAO,EACL,mBAAmB,EACnB,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,eAAe,GAChB,MAAM,gBAAgB,CAAA;AACvB,YAAY,EACV,iBAAiB,EACjB,SAAS,EACT,SAAS,EACT,cAAc,EACd,aAAa,GACd,MAAM,gBAAgB,CAAA"}

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

@@ -50,7 +50,7 @@ export declare const textVariants: import("tailwind-variants").TVReturnType<{
         lowercase: string;
         capitalize: string;
     };
-}, undefined, "", {
+}, undefined, "no-underline normal-case tracking-normal", {
     variant: {
         "heading-xl": string;
         "heading-lg": string;
@@ -140,6 +140,6 @@ export declare const textVariants: import("tailwind-variants").TVReturnType<{
         lowercase: string;
         capitalize: string;
     };
-}, undefined, "", unknown, unknown, undefined>>;
+}, undefined, "no-underline normal-case tracking-normal", unknown, unknown, undefined>>;
 export type TextVariants = VariantProps<typeof textVariants>;
 //# sourceMappingURL=F0Text.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"F0Text.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/F0Text/F0Text/F0Text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEzD;;;;;GAKG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+CA6DvB,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA"}
+{"version":3,"file":"F0Text.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/F0Text/F0Text/F0Text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEzD;;;;;GAKG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uFA6DvB,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA"}

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

@@ -1,10 +1,10 @@
 import type { TextProps as RNTextProps } from "react-native";
 /**
- * Props that must not be passed through to the underlying RN Text
- * (`style` and `className` are handled by F0 instead).
- * Used with omitProps for runtime safety.
+ * Props that must not be passed through to the underlying RN Text.
+ * `style` is blocked to enforce the semantic API; `className` is allowed
+ * for layout/positioning and merged with typography classes via twMerge.
  */
-export declare const F0_TEXT_BANNED_PROPS: readonly ["style", "className"];
+export declare const F0_TEXT_BANNED_PROPS: readonly ["style"];
 /**
  * Typography variant types based on semantic design tokens
  */
@@ -31,10 +31,14 @@ export type TextDecoration = (typeof TEXT_DECORATIONS)[number];
 export declare const TEXT_TRANSFORMS: readonly ["none", "uppercase", "lowercase", "capitalize"];
 export type TextTransform = (typeof TEXT_TRANSFORMS)[number];
 /**
- * Internal props for the F0Text component.
- * @private
+ * Props for the F0Text component.
+ *
+ * `className` is available for layout/positioning (margin, padding, flex, etc.).
+ * Typography is controlled exclusively by semantic props (variant, color, align, etc.)
+ * and always takes precedence — any typography classes in `className` are overridden.
+ * `style` is NOT available (omitted from RNTextProps and filtered at runtime).
  */
-interface F0TextPropsInternal extends Omit<RNTextProps, "style"> {
+export interface F0TextProps extends Omit<RNTextProps, "style"> {
     /**
      * Semantic typography variant
      * @default "body-sm-default"
@@ -69,18 +73,18 @@ interface F0TextPropsInternal extends Omit<RNTextProps, "style"> {
      */
     children?: React.ReactNode;
     /**
-     * Excluded from public API via Omit<F0TextPropsInternal, "className">.
-     * @private
+     * Tailwind classes for layout and positioning.
+     *
+     * Allowed: margin, padding, flex, position, width, height, opacity, z-index, etc.
+     * Ignored: font-size, font-weight, line-height, letter-spacing, color, text-align,
+     * text-decoration, text-transform — these are controlled by semantic props and
+     * always take precedence via twMerge.
+     *
+     * @example
+     * className="mt-4 flex-1"
+     * className="mb-2 self-center"
+     * className="absolute top-0 left-0"
      */
     className?: string;
 }
-/**
- * Public props for the F0Text component
- *
- * Note: `className` and `style` props are NOT available.
- * Use semantic props (variant, color, align, etc.) for typography.
- * For spacing/layout, wrap F0Text in a View with className.
- */
-export type F0TextProps = Omit<F0TextPropsInternal, "className">;
-export {};
 //# sourceMappingURL=F0Text.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"F0Text.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/F0Text/F0Text/F0Text.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAA;AAE5D;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,iCAAkC,CAAA;AAEnE;;GAEG;AACH,eAAO,MAAM,mBAAmB,uMAYtB,CAAA;AAEV,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEpE;;GAEG;AACH,eAAO,MAAM,WAAW,4JAad,CAAA;AAEV,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAEpD;;GAEG;AACH,eAAO,MAAM,UAAU,iDAAkD,CAAA;AAEzE,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AAEnD;;GAEG;AACH,eAAO,MAAM,gBAAgB,gDAAiD,CAAA;AAE9E,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE9D;;GAEG;AACH,eAAO,MAAM,eAAe,2DAKlB,CAAA;AAEV,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAE5D;;;GAGG;AACH,UAAU,mBAAoB,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9D;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IAEjB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IAEjB;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAA;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAA;IAEzB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,mBAAmB,EAAE,WAAW,CAAC,CAAA"}
+{"version":3,"file":"F0Text.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/F0Text/F0Text/F0Text.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAA;AAE5D;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,oBAAqB,CAAA;AAEtD;;GAEG;AACH,eAAO,MAAM,mBAAmB,uMAYtB,CAAA;AAEV,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEpE;;GAEG;AACH,eAAO,MAAM,WAAW,4JAad,CAAA;AAEV,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAEpD;;GAEG;AACH,eAAO,MAAM,UAAU,iDAAkD,CAAA;AAEzE,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AAEnD;;GAEG;AACH,eAAO,MAAM,gBAAgB,gDAAiD,CAAA;AAE9E,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE9D;;GAEG;AACH,eAAO,MAAM,eAAe,2DAKlB,CAAA;AAEV,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAE5D;;;;;;;GAOG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;IAC7D;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IAEjB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IAEjB;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAA;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAA;IAEzB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE1B;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB"}

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/lib/typescript/lib/utils.d.ts

@@ -2,11 +2,10 @@ import { type CnOptions } from "tailwind-variants";
 export declare function cn(...args: CnOptions): string;
 /**
  * Omits specified keys from an object at runtime.
- * Used to filter blocked props (e.g. style, className) before spreading to primitives.
+ * Used to filter blocked props (e.g. style) before spreading to primitives.
  *
  * @example
  * omitProps(rest, ["style"])
- * omitProps(rest, ["style", "className"])
  */
 export declare function omitProps<T extends Record<string, unknown>, K extends string>(obj: T, keys: readonly K[]): Omit<T, K>;
 //# sourceMappingURL=utils.d.ts.map

package/lib/typescript/lib/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAE3D,wBAAgB,EAAE,CAAC,GAAG,IAAI,EAAE,SAAS,GAAG,MAAM,CAM7C;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC,SAAS,MAAM,EAC3E,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,SAAS,CAAC,EAAE,GACjB,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAMZ"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAE3D,wBAAgB,EAAE,CAAC,GAAG,IAAI,EAAE,SAAS,GAAG,MAAM,CAM7C;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC,SAAS,MAAM,EAC3E,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,SAAS,CAAC,EAAE,GACjB,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAMZ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@factorialco/f0-react-native",
-  "version": "0.28.1",
+  "version": "0.30.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"
 
 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/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/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}