@factorialco/f0-react-native 0.21.0 → 0.23.0

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

@@ -1,4 +1,4 @@
-import { baseColors } from "@factorialco/f0-core";
+import { baseColors } from "../../../styles";
 import { BaseTag } from "../BaseTag";
 import { useTextFormatEnforcer } from "../../../lib/text";
 import { View } from "react-native";

package/src/components/Tags/RawTag/__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[`RawTag Snapshot 1`] = `
 <View
@@ -9,7 +9,7 @@ exports[`RawTag Snapshot 1`] = `
       {
         "busy": undefined,
         "checked": undefined,
-        "disabled": undefined,
+        "disabled": true,
         "expanded": undefined,
         "selected": undefined,
       }
@@ -23,7 +23,7 @@ exports[`RawTag Snapshot 1`] = `
       }
     }
     accessible={true}
-    className="flex flex-row items-center justify-start gap-0.5 rounded-full py-0.5 pr-2 pl-2 border border-solid border-f1-border-secondary"
+    className="overflow-hidden flex flex-row items-center justify-start gap-0.5 rounded-full py-0.5 pr-2 pl-2 border border-solid border-f1-border-secondary"
     collapsable={false}
     focusable={true}
     onBlur={[Function]}
@@ -35,6 +35,18 @@ exports[`RawTag Snapshot 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        },
+        undefined,
+      ]
+    }
   >
     <Text
       className="line-clamp-1 text-base font-medium text-f1-foreground"
@@ -54,7 +66,7 @@ exports[`RawTag Snapshot noBorder 1`] = `
       {
         "busy": undefined,
         "checked": undefined,
-        "disabled": undefined,
+        "disabled": true,
         "expanded": undefined,
         "selected": undefined,
       }
@@ -68,7 +80,7 @@ exports[`RawTag Snapshot noBorder 1`] = `
       }
     }
     accessible={true}
-    className="flex flex-row items-center justify-start gap-0.5 rounded-full py-0.5 pr-2 pl-2"
+    className="overflow-hidden flex flex-row items-center justify-start gap-0.5 rounded-full py-0.5 pr-2 pl-2"
     collapsable={false}
     focusable={true}
     onBlur={[Function]}
@@ -80,6 +92,18 @@ exports[`RawTag Snapshot noBorder 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        },
+        undefined,
+      ]
+    }
   >
     <Text
       className="line-clamp-1 text-base font-medium text-f1-foreground"
@@ -99,7 +123,7 @@ exports[`RawTag Snapshot with icon 1`] = `
       {
         "busy": undefined,
         "checked": undefined,
-        "disabled": undefined,
+        "disabled": true,
         "expanded": undefined,
         "selected": undefined,
       }
@@ -113,7 +137,7 @@ exports[`RawTag Snapshot with icon 1`] = `
       }
     }
     accessible={true}
-    className="flex flex-row items-center justify-start gap-0.5 rounded-full py-0.5 pr-2 pl-1 border border-solid border-f1-border-secondary"
+    className="overflow-hidden flex flex-row items-center justify-start gap-0.5 rounded-full py-0.5 pr-2 pl-1 border border-solid border-f1-border-secondary"
     collapsable={false}
     focusable={true}
     onBlur={[Function]}
@@ -125,6 +149,18 @@ exports[`RawTag Snapshot with icon 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        },
+        undefined,
+      ]
+    }
   >
     <RNSVGSvgView
       align="xMidYMid"
@@ -143,6 +179,9 @@ exports[`RawTag Snapshot with icon 1`] = `
             "backgroundColor": "transparent",
             "borderWidth": 0,
           },
+          [
+            {},
+          ],
           {
             "flex": 0,
             "height": "100%",

package/src/components/experimental/Lists/DetailsItem/__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[`DetailsItem Snapshot type company 1`] = `
 <View
@@ -113,6 +113,9 @@ exports[`DetailsItem Snapshot type company 1`] = `
                     "backgroundColor": "transparent",
                     "borderWidth": 0,
                   },
+                  [
+                    {},
+                  ],
                   {
                     "flex": 0,
                     "height": "100%",
@@ -211,7 +214,7 @@ exports[`DetailsItem Snapshot type dot-tag 1`] = `
               {
                 "busy": undefined,
                 "checked": undefined,
-                "disabled": undefined,
+                "disabled": true,
                 "expanded": undefined,
                 "selected": undefined,
               }
@@ -225,7 +228,7 @@ exports[`DetailsItem Snapshot type dot-tag 1`] = `
               }
             }
             accessible={true}
-            className="flex flex-row items-center justify-start gap-0.5 rounded-full py-0.5 pr-2 pl-1 border border-solid border-f1-border-secondary"
+            className="overflow-hidden flex flex-row items-center justify-start gap-0.5 rounded-full py-0.5 pr-2 pl-1 border border-solid border-f1-border-secondary"
             collapsable={false}
             focusable={true}
             onBlur={[Function]}
@@ -237,6 +240,18 @@ exports[`DetailsItem Snapshot type dot-tag 1`] = `
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
+            style={
+              [
+                {
+                  "transform": [
+                    {
+                      "scale": 1,
+                    },
+                  ],
+                },
+                undefined,
+              ]
+            }
           >
             <View
               aria-hidden={true}
@@ -248,7 +263,7 @@ exports[`DetailsItem Snapshot type dot-tag 1`] = `
               }
             />
             <Text
-              className="line-clamp-1 text-base font-medium text-f1-foreground"
+              className="text-f1-foreground line-clamp-1 text-base font-medium"
             >
               Activity
             </Text>
@@ -340,6 +355,9 @@ exports[`DetailsItem Snapshot type item 1`] = `
                     "backgroundColor": "transparent",
                     "borderWidth": 0,
                   },
+                  [
+                    {},
+                  ],
                   {
                     "flex": 0,
                     "height": "100%",
@@ -474,7 +492,7 @@ exports[`DetailsItem Snapshot type person 1`] = `
               >
                 <View
                   aria-hidden={true}
-                  className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-5 h-5 rounded-full bg-[hsl(theme(colors.flubber.50))]"
+                  className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-5 h-5 rounded-full bg-[hsl(theme(colors.flubber-50))]"
                   data-a11y-color-contrast-ignore={true}
                   role="img"
                 >
@@ -513,6 +531,9 @@ exports[`DetailsItem Snapshot type person 1`] = `
                     "backgroundColor": "transparent",
                     "borderWidth": 0,
                   },
+                  [
+                    {},
+                  ],
                   {
                     "flex": 0,
                     "height": "100%",
@@ -647,7 +668,7 @@ exports[`DetailsItem Snapshot type team 1`] = `
               >
                 <View
                   aria-hidden={true}
-                  className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-5 h-5 rounded-xs bg-[hsl(theme(colors.purple.50))]"
+                  className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-5 h-5 rounded-xs bg-[hsl(theme(colors.purple-50))]"
                   data-a11y-color-contrast-ignore={true}
                   role="img"
                 >
@@ -686,6 +707,9 @@ exports[`DetailsItem Snapshot type team 1`] = `
                     "backgroundColor": "transparent",
                     "borderWidth": 0,
                   },
+                  [
+                    {},
+                  ],
                   {
                     "flex": 0,
                     "height": "100%",

package/src/components/experimental/Lists/DetailsItemsList/__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[`DetailsItemsList Snapshot  1`] = `
 <View
@@ -91,6 +91,9 @@ exports[`DetailsItemsList Snapshot  1`] = `
                         "backgroundColor": "transparent",
                         "borderWidth": 0,
                       },
+                      [
+                        {},
+                      ],
                       {
                         "flex": 0,
                         "height": "100%",
@@ -197,7 +200,7 @@ exports[`DetailsItemsList Snapshot  1`] = `
                 }
               }
               accessible={true}
-              className="group justify-between rounded text-f1-foreground no-underline hover:bg-f1-background-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-f1-border-selected-bold active:bg-f1-background-secondary-hover flex flex-row items-center gap-1.5 p-1.5"
+              className="group justify-between rounded text-f1-foreground no-underline hover:bg-f1-background-hover focus-visible:outline-2 focus-visible:outline-f1-border-selected-bold active:bg-f1-background-secondary-hover flex flex-row items-center gap-1.5 p-1.5"
               collapsable={false}
               focusable={true}
               handlePress={[Function]}
@@ -271,6 +274,9 @@ exports[`DetailsItemsList Snapshot  1`] = `
                       "backgroundColor": "transparent",
                       "borderWidth": 0,
                     },
+                    [
+                      {},
+                    ],
                     {
                       "flex": 0,
                       "height": "100%",
@@ -355,7 +361,7 @@ exports[`DetailsItemsList Snapshot  1`] = `
                 }
               }
               accessible={true}
-              className="group justify-between rounded text-f1-foreground no-underline hover:bg-f1-background-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-f1-border-selected-bold active:bg-f1-background-secondary-hover flex flex-row items-center gap-1.5 p-1.5"
+              className="group justify-between rounded text-f1-foreground no-underline hover:bg-f1-background-hover focus-visible:outline-2 focus-visible:outline-f1-border-selected-bold active:bg-f1-background-secondary-hover flex flex-row items-center gap-1.5 p-1.5"
               collapsable={false}
               focusable={true}
               handlePress={[Function]}
@@ -381,7 +387,7 @@ exports[`DetailsItemsList Snapshot  1`] = `
                   >
                     <View
                       aria-hidden={true}
-                      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-5 h-5 rounded-xs bg-[hsl(theme(colors.yellow.50))]"
+                      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-5 h-5 rounded-xs bg-[hsl(theme(colors.yellow-50))]"
                       data-a11y-color-contrast-ignore={true}
                       role="img"
                     >
@@ -417,6 +423,9 @@ exports[`DetailsItemsList Snapshot  1`] = `
                       "backgroundColor": "transparent",
                       "borderWidth": 0,
                     },
+                    [
+                      {},
+                    ],
                     {
                       "flex": 0,
                       "height": "100%",
@@ -484,7 +493,7 @@ exports[`DetailsItemsList Snapshot  1`] = `
                 }
               }
               accessible={true}
-              className="group justify-between rounded text-f1-foreground no-underline hover:bg-f1-background-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-f1-border-selected-bold active:bg-f1-background-secondary-hover flex flex-row items-center gap-1.5 p-1.5"
+              className="group justify-between rounded text-f1-foreground no-underline hover:bg-f1-background-hover focus-visible:outline-2 focus-visible:outline-f1-border-selected-bold active:bg-f1-background-secondary-hover flex flex-row items-center gap-1.5 p-1.5"
               collapsable={false}
               focusable={true}
               handlePress={[Function]}
@@ -510,7 +519,7 @@ exports[`DetailsItemsList Snapshot  1`] = `
                   >
                     <View
                       aria-hidden={true}
-                      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-5 h-5 rounded-xs bg-[hsl(theme(colors.malibu.50))]"
+                      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-5 h-5 rounded-xs bg-[hsl(theme(colors.malibu-50))]"
                       data-a11y-color-contrast-ignore={true}
                       role="img"
                     >
@@ -546,6 +555,9 @@ exports[`DetailsItemsList Snapshot  1`] = `
                       "backgroundColor": "transparent",
                       "borderWidth": 0,
                     },
+                    [
+                      {},
+                    ],
                     {
                       "flex": 0,
                       "height": "100%",
@@ -619,7 +631,7 @@ exports[`DetailsItemsList Snapshot  1`] = `
                   {
                     "busy": undefined,
                     "checked": undefined,
-                    "disabled": undefined,
+                    "disabled": true,
                     "expanded": undefined,
                     "selected": undefined,
                   }
@@ -633,7 +645,7 @@ exports[`DetailsItemsList Snapshot  1`] = `
                   }
                 }
                 accessible={true}
-                className="flex flex-row items-center justify-start gap-0.5 rounded-full py-0.5 pr-2 pl-1 border border-solid border-f1-border-secondary"
+                className="overflow-hidden flex flex-row items-center justify-start gap-0.5 rounded-full py-0.5 pr-2 pl-1 border border-solid border-f1-border-secondary"
                 collapsable={false}
                 focusable={true}
                 onBlur={[Function]}
@@ -645,6 +657,18 @@ exports[`DetailsItemsList Snapshot  1`] = `
                 onResponderTerminate={[Function]}
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
+                style={
+                  [
+                    {
+                      "transform": [
+                        {
+                          "scale": 1,
+                        },
+                      ],
+                    },
+                    undefined,
+                  ]
+                }
               >
                 <View
                   aria-hidden={true}
@@ -656,7 +680,7 @@ exports[`DetailsItemsList Snapshot  1`] = `
                   }
                 />
                 <Text
-                  className="line-clamp-1 text-base font-medium text-f1-foreground"
+                  className="text-f1-foreground line-clamp-1 text-base font-medium"
                 >
                   Holidays
                 </Text>

package/src/components/experimental/Lists/DetailsItemsList/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { DetailsItem, DetailsItemType } from "../DetailsItem";
+import { Text, View } from "react-native";
 import { cn } from "../../../../lib/utils";
-import { View, Text } from "react-native";
+import { DetailsItem, DetailsItemType } from "../DetailsItem";
 
 export interface DetailsItemsListProps {
   title?: string;

package/src/components/exports.ts

@@ -0,0 +1,16 @@
+// Export components
+export * from "./Activity/ActivityItem";
+export * from "./Avatars/exports";
+export * from "./Badge";
+export * from "./Button";
+export * from "./Counter";
+export * from "./ExampleComponent";
+export * from "./Icon";
+export * from "./Navigation/PageHeader";
+export * from "./OneChip";
+export * from "./OnePreset";
+export * from "./PressableFeedback";
+export * from "./Tags/exports";
+export * from "./experimental/Lists/DataList";
+export * from "./experimental/Lists/DetailsItem";
+export * from "./experimental/Lists/DetailsItemsList";

package/src/index.ts

@@ -1,18 +1,8 @@
 // Export components
-export * from "./components/Activity/ActivityItem";
-export * from "./components/Avatars/exports";
-export * from "./components/Badge";
-export * from "./components/Button";
-export * from "./components/Counter";
-export * from "./components/ExampleComponent";
-export * from "./components/Icon";
-export * from "./components/Navigation/PageHeader";
-export * from "./components/OneChip";
-export * from "./components/OnePreset";
-export * from "./components/Tags/exports";
-export * from "./components/experimental/Lists/DataList";
-export * from "./components/experimental/Lists/DetailsItem";
-export * from "./components/experimental/Lists/DetailsItemsList";
+export * from "./components/exports";
 
 // Export icons
 export * from "./icons";
+
+// Export utilities
+export { cn } from "./lib/utils";

package/src/lib/utils.ts

@@ -1,6 +1,7 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { cnMerge, type CnOptions } from "tailwind-variants";
 
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
+export function cn(...args: CnOptions): string {
+  return cnMerge(args)({
+    twMerge: true,
+  }) ?? "";
 }

package/src/styles/index.css

@@ -0,0 +1,11 @@
+/**
+ * F0 React Native Styles Entry Point
+ * 
+ * Import this file in your app's global.css:
+ * @import '@factorialco/f0-react-native/styles';
+ * 
+ * And add source scanning:
+ * @source './node_modules/@factorialco/f0-react-native/lib';
+ */
+
+@import "./theme.css";

package/src/styles/index.ts

@@ -0,0 +1,4 @@
+export * from "./tokens/borderRadius"
+export * from "./tokens/breakpoints"
+export * from "./tokens/colors"
+export * from "./tokens/spacing"