@factorialco/f0-react-native 0.22.0 → 0.23.1

package/src/components/Badge/index.tsx

@@ -1,7 +1,7 @@
-import { cva, type VariantProps } from "cva";
-import { Icon, IconType } from "../Icon";
+import { tv, type VariantProps } from "tailwind-variants";
+import { Icon, type IconType } from "../Icon";
 
-const badgeVariants = cva({
+const badgeVariants = tv({
   base: "flex shrink-0 items-center justify-center rounded-full",
   variants: {
     type: {

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Button Snapshot - critical variant 1`] = `
 <View

package/src/components/Button/index.tsx

@@ -1,4 +1,4 @@
-import { cva, type VariantProps } from "cva";
+import { tv, type VariantProps } from "tailwind-variants";
 import React, { forwardRef, useState } from "react";
 import { Pressable, Text, View } from "react-native";
 import { cn } from "../../lib/utils";
@@ -17,7 +17,7 @@ export type ButtonVariant = (typeof variants)[number];
 export const sizes = ["sm", "md", "lg"] as const;
 export type ButtonSize = (typeof sizes)[number];
 
-const buttonVariants = cva({
+const buttonVariants = tv({
   base: "flex-row items-center justify-center rounded border-none grow-0",
   variants: {
     variant: {
@@ -50,7 +50,7 @@ const buttonVariants = cva({
   },
 });
 
-const pressedVariants = cva({
+const pressedVariants = tv({
   base: "",
   variants: {
     variant: {

package/src/components/Counter/__snapshots__/index.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Counter Snapshot 1`] = `
 <View

package/src/components/Counter/index.tsx

@@ -1,8 +1,8 @@
-import { cva, type VariantProps } from "cva";
+import { tv, type VariantProps } from "tailwind-variants";
 import { Text, View } from "react-native";
 import { cn } from "../../lib/utils";
 
-const counterContainerVariants = cva({
+const counterContainerVariants = tv({
   base: "flex items-center justify-center rounded-xs grow-0 px-0.5",
   variants: {
     size: {
@@ -21,7 +21,7 @@ const counterContainerVariants = cva({
   },
 });
 
-const counterTextVariants = cva({
+const counterTextVariants = tv({
   base: "text-center text-sm font-medium tabular-nums whitespace-nowrap",
   variants: {
     size: {

package/src/components/Icon/README.md

@@ -26,9 +26,9 @@ import { AppIcons, ModuleIcons } from "@factorialco/f0-react-native";
 | testID    | string                       |         | Test ID for testing                     |
 | ...props  | SvgProps                     |         | Additional props for the SVG component  |
 
-## Styling with NativeWind
+## Styling with UniWind
 
-The Icon component is designed to work with NativeWind, allowing you to style icons using Tailwind CSS classes:
+The Icon component is designed to work with UniWind, allowing you to style icons using Tailwind CSS classes:
 
 ```tsx
 // Style using Tailwind CSS classes

package/src/components/Icon/index.tsx

@@ -1,14 +1,14 @@
-import { cva, type VariantProps } from "cva";
+import { tv, type VariantProps } from "tailwind-variants";
 import React, {
-  forwardRef,
-  ForwardRefExoticComponent,
-  RefAttributes,
+    forwardRef,
+    ForwardRefExoticComponent,
+    RefAttributes,
 } from "react";
-import { SvgProps, Svg } from "react-native-svg";
+import { Svg, SvgProps } from "react-native-svg";
+import { withUniwind } from "uniwind";
 import { cn } from "../../lib/utils";
-import { cssInterop } from "nativewind";
 
-const iconVariants = cva({
+const iconVariants = tv({
   base: "shrink-0",
   variants: {
     size: {
@@ -45,33 +45,26 @@ export type IconType = ForwardRefExoticComponent<
     }
 >;
 
-// Keep track of icons that have already had cssInterop applied
+// Keep track of icons that have already had withUniwind applied
 const interopAppliedIcons = new WeakSet();
 
-// Function to apply NativeWind interop to an icon component
+// Function to apply UniWind interop to an icon component
 export function applyIconInterop(icon: IconType) {
   if (!interopAppliedIcons.has(icon)) {
-    cssInterop(icon, {
-      className: {
-        target: "style",
-        nativeStyleToProp: {
-          color: true,
-          opacity: true,
-        },
-      },
-    });
-    interopAppliedIcons.add(icon);
+    const wrappedIcon = withUniwind(icon);
+    interopAppliedIcons.add(wrappedIcon);
+    return wrappedIcon;
   }
   return icon;
 }
 
 export const Icon = forwardRef<Svg, IconProps>(function Icon(
-  { size, icon, className, testID, ...props },
+  { size = "md", icon, className, testID, ...props },
   ref,
 ) {
   if (!icon) return null;
 
-  // Apply NativeWind interop to the icon if not already applied
+  // Apply UniWind interop to the icon if not already applied
   const Component = applyIconInterop(icon);
 
   return (

package/src/components/Navigation/PageHeader/__snapshots__/index.spec.tsx.snap

@@ -1,11 +1,11 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PageHeader Snapshot - renders correctly with multiple actions 1`] = `
 <View
   className="flex-row items-center justify-between px-5 py-3"
 >
   <Text
-    className="text-3xl font-semibold text-f1-foreground"
+    className="text-f1-foreground text-3xl font-semibold"
   >
     Test Page Title
   </Text>
@@ -110,7 +110,7 @@ exports[`PageHeader Snapshot - renders correctly with one action 1`] = `
   className="flex-row items-center justify-between px-5 py-3"
 >
   <Text
-    className="text-3xl font-semibold text-f1-foreground"
+    className="text-f1-foreground text-3xl font-semibold"
   >
     Test Page Title
   </Text>
@@ -169,7 +169,7 @@ exports[`PageHeader Snapshot - renders correctly with one action with a badge 1`
   className="flex-row items-center justify-between px-5 py-3"
 >
   <Text
-    className="text-3xl font-semibold text-f1-foreground"
+    className="text-f1-foreground text-3xl font-semibold"
   >
     Test Page Title
   </Text>
@@ -231,7 +231,7 @@ exports[`PageHeader Snapshot - renders correctly with only a title 1`] = `
   className="flex-row items-center justify-between px-5 py-3"
 >
   <Text
-    className="text-3xl font-semibold text-f1-foreground"
+    className="text-f1-foreground text-3xl font-semibold"
   >
     Test Page Title
   </Text>

package/src/components/Navigation/PageHeader/index.tsx

@@ -35,7 +35,7 @@ const NotificationsAction = ({ label, onPress, showBadge }: ActionT) => {
 export const PageHeader = memo(({ title, actions }: Props) => {
   return (
     <View className="flex-row items-center justify-between px-5 py-3">
-      <Text className="text-3xl font-semibold text-f1-foreground">{title}</Text>
+      <Text className="text-f1-foreground text-3xl font-semibold">{title}</Text>
       <View className="flex-row gap-2">
         {actions?.map((action) => {
           switch (action.type) {

package/src/components/OneChip/__snapshots__/index.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`OneChip Snapshot 1`] = `
 <View
@@ -6,6 +6,7 @@ exports[`OneChip Snapshot 1`] = `
 >
   <View
     accessibilityLabel="Action"
+    accessibilityRole="button"
     accessibilityState={
       {
         "busy": undefined,
@@ -24,7 +25,7 @@ exports[`OneChip Snapshot 1`] = `
       }
     }
     accessible={true}
-    className="flex items-center gap-1 rounded-full border border-solid border-f1-border px-2 py-0.5 grow-0"
+    className="overflow-hidden flex items-center gap-1 rounded-full border border-solid border-f1-border px-2 py-0.5 grow-0"
     collapsable={false}
     focusable={true}
     onBlur={[Function]}
@@ -36,7 +37,33 @@ exports[`OneChip Snapshot 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        },
+        undefined,
+      ]
+    }
   >
+    <View
+      className="absolute inset-0"
+      pointerEvents="none"
+      style={
+        [
+          {
+            "opacity": 0,
+          },
+          {
+            "backgroundColor": "rgba(0, 0, 0, 1)",
+          },
+        ]
+      }
+    />
     <View
       className="flex flex-row items-center gap-0.5"
     >
@@ -56,6 +83,7 @@ exports[`OneChip Snapshot variant selected 1`] = `
 >
   <View
     accessibilityLabel="Action"
+    accessibilityRole="button"
     accessibilityState={
       {
         "busy": undefined,
@@ -74,7 +102,7 @@ exports[`OneChip Snapshot variant selected 1`] = `
       }
     }
     accessible={true}
-    className="flex items-center gap-1 rounded-full border border-solid px-2 py-0.5 grow-0 border-f1-border-selected bg-f1-background-selected-secondary"
+    className="overflow-hidden flex items-center gap-1 rounded-full border border-solid px-2 py-0.5 grow-0 border-f1-border-selected bg-f1-background-selected-secondary"
     collapsable={false}
     focusable={true}
     onBlur={[Function]}
@@ -86,7 +114,33 @@ exports[`OneChip Snapshot variant selected 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        },
+        undefined,
+      ]
+    }
   >
+    <View
+      className="absolute inset-0"
+      pointerEvents="none"
+      style={
+        [
+          {
+            "opacity": 0,
+          },
+          {
+            "backgroundColor": "rgba(0, 0, 0, 1)",
+          },
+        ]
+      }
+    />
     <View
       className="flex flex-row items-center gap-0.5"
     >
@@ -106,6 +160,7 @@ exports[`OneChip Snapshot with Icon 1`] = `
 >
   <View
     accessibilityLabel="Action"
+    accessibilityRole="button"
     accessibilityState={
       {
         "busy": undefined,
@@ -124,7 +179,7 @@ exports[`OneChip Snapshot with Icon 1`] = `
       }
     }
     accessible={true}
-    className="flex items-center gap-1 rounded-full border border-solid border-f1-border px-2 py-0.5 grow-0 pl-1.5"
+    className="overflow-hidden flex items-center gap-1 rounded-full border border-solid border-f1-border px-2 py-0.5 grow-0 pl-1.5"
     collapsable={false}
     focusable={true}
     onBlur={[Function]}
@@ -136,7 +191,33 @@ exports[`OneChip Snapshot with Icon 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        },
+        undefined,
+      ]
+    }
   >
+    <View
+      className="absolute inset-0"
+      pointerEvents="none"
+      style={
+        [
+          {
+            "opacity": 0,
+          },
+          {
+            "backgroundColor": "rgba(0, 0, 0, 1)",
+          },
+        ]
+      }
+    />
     <View
       className="flex flex-row items-center gap-0.5"
     >
@@ -156,6 +237,9 @@ exports[`OneChip Snapshot with Icon 1`] = `
               "backgroundColor": "transparent",
               "borderWidth": 0,
             },
+            [
+              {},
+            ],
             {
               "flex": 0,
               "height": "100%",
@@ -234,6 +318,7 @@ exports[`OneChip Snapshot with OnClose 1`] = `
 >
   <View
     accessibilityLabel="Action"
+    accessibilityRole="button"
     accessibilityState={
       {
         "busy": undefined,
@@ -252,7 +337,7 @@ exports[`OneChip Snapshot with OnClose 1`] = `
       }
     }
     accessible={true}
-    className="flex items-center gap-1 rounded-full border border-solid border-f1-border px-2 py-0.5 grow-0 pr-1.5"
+    className="overflow-hidden flex items-center gap-1 rounded-full border border-solid border-f1-border px-2 py-0.5 grow-0 pr-1.5"
     collapsable={false}
     focusable={true}
     onBlur={[Function]}
@@ -264,7 +349,33 @@ exports[`OneChip Snapshot with OnClose 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        },
+        undefined,
+      ]
+    }
   >
+    <View
+      className="absolute inset-0"
+      pointerEvents="none"
+      style={
+        [
+          {
+            "opacity": 0,
+          },
+          {
+            "backgroundColor": "rgba(0, 0, 0, 1)",
+          },
+        ]
+      }
+    />
     <View
       className="flex flex-row items-center gap-0.5"
     >
@@ -275,6 +386,7 @@ exports[`OneChip Snapshot with OnClose 1`] = `
       </Text>
       <View
         accessibilityLabel="Close"
+        accessibilityRole="button"
         accessibilityState={
           {
             "busy": undefined,
@@ -293,7 +405,7 @@ exports[`OneChip Snapshot with OnClose 1`] = `
           }
         }
         accessible={true}
-        className="-m-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full [&_svg]:text-f1-icon-secondary"
+        className="[&_svg]:text-f1-icon-secondary -m-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full"
         collapsable={false}
         focusable={true}
         onBlur={[Function]}
@@ -305,7 +417,6 @@ exports[`OneChip Snapshot with OnClose 1`] = `
         onResponderTerminate={[Function]}
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
-        tabIndex={0}
       >
         <RNSVGSvgView
           align="xMidYMid"
@@ -323,6 +434,9 @@ exports[`OneChip Snapshot with OnClose 1`] = `
                 "backgroundColor": "transparent",
                 "borderWidth": 0,
               },
+              [
+                {},
+              ],
               {
                 "flex": 0,
                 "height": "100%",

package/src/components/OneChip/index.tsx

@@ -1,10 +1,11 @@
-import { cva, type VariantProps } from "cva";
+import { tv, type VariantProps } from "tailwind-variants";
 import { cn } from "../../lib/utils";
-import { Icon, IconType } from "../Icon";
+import { Icon, type IconType } from "../Icon";
 import { View, Text, Pressable } from "react-native";
 import { CrossedCircle } from "../../icons/app";
+import { PressableFeedback } from "../PressableFeedback";
 
-export const chipContainerVariants = cva({
+export const chipContainerVariants = tv({
   base: "flex items-center gap-1 rounded-full border border-solid border-f1-border px-2 py-0.5 grow-0",
   variants: {
     variant: {
@@ -17,7 +18,7 @@ export const chipContainerVariants = cva({
   },
 });
 
-export const chipTextVariants = cva({
+export const chipTextVariants = tv({
   base: "font-medium",
   variants: {
     variant: {
@@ -46,15 +47,16 @@ export const OneChip = ({
 }: ChipProps) => {
   return (
     <View className="flex items-start">
-      <Pressable
+      <PressableFeedback
         className={cn(
           chipContainerVariants({ variant }),
           onClose && "pr-1.5",
           icon && "pl-1.5",
         )}
         onPress={onClick}
-        tabIndex={onClick ? 0 : undefined}
-        aria-label="Action"
+        variant="both"
+        accessibilityRole="button"
+        accessibilityLabel="Action"
       >
         <View className="flex flex-row items-center gap-0.5">
           {icon && (
@@ -71,9 +73,9 @@ export const OneChip = ({
                 e.stopPropagation();
                 onClose();
               }}
-              className="-m-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full [&_svg]:text-f1-icon-secondary"
-              tabIndex={0}
-              aria-label="Close"
+              className="[&_svg]:text-f1-icon-secondary -m-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full"
+              accessibilityRole="button"
+              accessibilityLabel="Close"
             >
               <Icon
                 icon={CrossedCircle}
@@ -83,7 +85,7 @@ export const OneChip = ({
             </Pressable>
           )}
         </View>
-      </Pressable>
+      </PressableFeedback>
     </View>
   );
 };

package/src/components/OnePreset/__snapshots__/index.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`OnePreset Snapshot 1`] = `
 <View
@@ -23,7 +23,7 @@ exports[`OnePreset Snapshot 1`] = `
       }
     }
     accessible={true}
-    className="flex grow-0 flex-row items-center gap-2 rounded border border-f1-border px-2.5 py-1.5 font-medium text-f1-foreground"
+    className="overflow-hidden flex grow-0 flex-row items-center gap-2 rounded border px-2.5 py-1.5 font-medium border-f1-border text-f1-foreground"
     collapsable={false}
     focusable={true}
     onBlur={[Function]}
@@ -35,7 +35,33 @@ exports[`OnePreset Snapshot 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        },
+        undefined,
+      ]
+    }
   >
+    <View
+      className="absolute inset-0"
+      pointerEvents="none"
+      style={
+        [
+          {
+            "opacity": 0,
+          },
+          {
+            "backgroundColor": "rgba(0, 0, 0, 1)",
+          },
+        ]
+      }
+    />
     <Text
       className="whitespace-nowrap text-f1-foreground"
     >
@@ -68,7 +94,7 @@ exports[`OnePreset Snapshot with number 1`] = `
       }
     }
     accessible={true}
-    className="flex grow-0 flex-row items-center gap-2 rounded border border-f1-border px-2.5 py-1.5 font-medium text-f1-foreground pr-1.5"
+    className="overflow-hidden flex grow-0 flex-row items-center gap-2 rounded border px-2.5 py-1.5 font-medium pr-1.5 border-f1-border text-f1-foreground"
     collapsable={false}
     focusable={true}
     onBlur={[Function]}
@@ -80,7 +106,33 @@ exports[`OnePreset Snapshot with number 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        },
+        undefined,
+      ]
+    }
   >
+    <View
+      className="absolute inset-0"
+      pointerEvents="none"
+      style={
+        [
+          {
+            "opacity": 0,
+          },
+          {
+            "backgroundColor": "rgba(0, 0, 0, 1)",
+          },
+        ]
+      }
+    />
     <Text
       className="whitespace-nowrap text-f1-foreground"
     >
@@ -126,7 +178,7 @@ exports[`OnePreset renders correctly with selected props 1`] = `
       }
     }
     accessible={true}
-    className="flex grow-0 flex-row items-center gap-2 rounded border px-2.5 py-1.5 font-medium border-f1-border-selected bg-f1-background-selected-secondary text-f1-foreground-selected"
+    className="overflow-hidden flex grow-0 flex-row items-center gap-2 rounded border px-2.5 py-1.5 font-medium border-f1-border-selected bg-f1-background-selected-secondary text-f1-foreground-selected"
     collapsable={false}
     focusable={true}
     onBlur={[Function]}
@@ -138,9 +190,35 @@ exports[`OnePreset renders correctly with selected props 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        },
+        undefined,
+      ]
+    }
   >
+    <View
+      className="absolute inset-0"
+      pointerEvents="none"
+      style={
+        [
+          {
+            "opacity": 0,
+          },
+          {
+            "backgroundColor": "rgba(0, 0, 0, 1)",
+          },
+        ]
+      }
+    />
     <Text
-      className="whitespace-nowrap text-f1-foreground"
+      className="whitespace-nowrap text-f1-foreground-selected"
     >
       label
     </Text>