@factorialco/f0-react-native 0.35.0 → 0.36.0

package/lib/module/components/exports.js

@@ -1,2 +1,2 @@
-export*from"./Activity/ActivityItem";export*from"./Avatars/exports";export*from"./Badge";export*from"./Button";export*from"./F0Button";export*from"./F0Badge";export*from"./Counter";export*from"./ExampleComponent";export{Icon}from"./Icon";export*from"./Navigation/PageHeader";export*from"./OneChip";export*from"./OnePreset";export*from"./Tags/exports";export*from"./experimental/Lists/DataList";export*from"./experimental/Lists/DetailsItem";export*from"./experimental/Lists/DetailsItemsList";export*from"./primitives/F0Text";export*from"./primitives/F0Icon";export*from"./primitives/PressableFeedback";
+export*from"./Activity/ActivityItem";export*from"./Avatars/exports";export*from"./Badge";export*from"./Button";export*from"./F0Button";export*from"./F0Badge";export*from"./Counter";export*from"./ExampleComponent";export{Icon}from"./Icon";export*from"./Navigation/PageHeader";export*from"./OneChip";export*from"./OnePreset";export*from"./Tags/exports";export*from"./experimental/Lists/DataList";export*from"./experimental/Lists/DetailsItem";export*from"./experimental/Lists/DetailsItemsList";export*from"./primitives/F0Text";export*from"./primitives/F0Icon";export*from"./primitives/F0Image";export*from"./primitives/PressableFeedback";
 //# sourceMappingURL=exports.js.map

package/lib/module/components/exports.js.map

@@ -1 +1 @@
-{"version":3,"names":["Icon"],"sourceRoot":"../../../src","sources":["components/exports.ts"],"mappings":"AACA,WAAc,yBAAyB,CACvC,WAAc,mBAAmB,CACjC,WAAc,SAAS,CACvB,WAAc,UAAU,CACxB,WAAc,YAAY,CAC1B,WAAc,WAAW,CACzB,WAAc,WAAW,CACzB,WAAc,oBAAoB,CAClC,OAASA,IAAI,KAAwB,QAAQ,CAC7C,WAAc,yBAAyB,CACvC,WAAc,WAAW,CACzB,WAAc,aAAa,CAC3B,WAAc,gBAAgB,CAC9B,WAAc,+BAA+B,CAC7C,WAAc,kCAAkC,CAChD,WAAc,uCAAuC,CAGrD,WAAc,qBAAqB,CACnC,WAAc,qBAAqB,CACnC,WAAc,gCAAgC","ignoreList":[]}
+{"version":3,"names":["Icon"],"sourceRoot":"../../../src","sources":["components/exports.ts"],"mappings":"AACA,WAAc,yBAAyB,CACvC,WAAc,mBAAmB,CACjC,WAAc,SAAS,CACvB,WAAc,UAAU,CACxB,WAAc,YAAY,CAC1B,WAAc,WAAW,CACzB,WAAc,WAAW,CACzB,WAAc,oBAAoB,CAClC,OAASA,IAAI,KAAwB,QAAQ,CAC7C,WAAc,yBAAyB,CACvC,WAAc,WAAW,CACzB,WAAc,aAAa,CAC3B,WAAc,gBAAgB,CAC9B,WAAc,+BAA+B,CAC7C,WAAc,kCAAkC,CAChD,WAAc,uCAAuC,CAGrD,WAAc,qBAAqB,CACnC,WAAc,qBAAqB,CACnC,WAAc,sBAAsB,CACpC,WAAc,gCAAgC","ignoreList":[]}

package/lib/module/components/primitives/F0Image/F0Image.js

@@ -0,0 +1,2 @@
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["source","className","style","contentFit","transition","cachePolicy"];import{Image as ExpoImage}from"expo-image";import React from"react";import{withUniwind}from"uniwind";import{cn}from"../../../lib/utils";import{jsx as _jsx}from"react/jsx-runtime";var UniwindExpoImage=withUniwind(ExpoImage);var F0Image=React.memo(React.forwardRef(function(_ref,ref){var source=_ref.source,className=_ref.className,style=_ref.style,_ref$contentFit=_ref.contentFit,contentFit=_ref$contentFit===void 0?"cover":_ref$contentFit,_ref$transition=_ref.transition,transition=_ref$transition===void 0?150:_ref$transition,_ref$cachePolicy=_ref.cachePolicy,cachePolicy=_ref$cachePolicy===void 0?"memory-disk":_ref$cachePolicy,rest=_objectWithoutProperties(_ref,_excluded);return _jsx(UniwindExpoImage,Object.assign({ref:ref,source:source,className:cn("h-full w-full",className),style:style,contentFit:contentFit,transition:transition,cachePolicy:cachePolicy},rest));}));F0Image.displayName="F0Image";export{F0Image};
+//# sourceMappingURL=F0Image.js.map

package/lib/module/components/primitives/F0Image/F0Image.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Image","ExpoImage","React","withUniwind","cn","jsx","_jsx","UniwindExpoImage","F0Image","memo","forwardRef","_ref","ref","source","className","style","_ref$contentFit","contentFit","_ref$transition","transition","_ref$cachePolicy","cachePolicy","rest","_objectWithoutProperties","_excluded","Object","assign","displayName"],"sourceRoot":"../../../../../src","sources":["components/primitives/F0Image/F0Image.tsx"],"mappings":"0KAAA,OAASA,KAAK,GAAI,CAAAC,SAAS,KAAQ,YAAY,CAC/C,MAAO,CAAAC,KAAK,KAAM,OAAO,CACzB,OAASC,WAAW,KAAQ,SAAS,CAErC,OAASC,EAAE,KAAQ,oBAAoB,QAAAC,GAAA,IAAAC,IAAA,yBAIvC,GAAM,CAAAC,gBAAgB,CAAGJ,WAAW,CAACF,SAAS,CAAC,CAO/C,GAAM,CAAAO,OAAO,CAAGN,KAAK,CAACO,IAAI,CACxBP,KAAK,CAACQ,UAAU,CACd,SAAAC,IAAA,CAUEC,GAAG,CACA,IATD,CAAAC,MAAM,CAAAF,IAAA,CAANE,MAAM,CACNC,SAAS,CAAAH,IAAA,CAATG,SAAS,CACTC,KAAK,CAAAJ,IAAA,CAALI,KAAK,CAAAC,eAAA,CAAAL,IAAA,CACLM,UAAU,CAAVA,UAAU,CAAAD,eAAA,UAAG,OAAO,CAAAA,eAAA,CAAAE,eAAA,CAAAP,IAAA,CACpBQ,UAAU,CAAVA,UAAU,CAAAD,eAAA,UAAG,GAAG,CAAAA,eAAA,CAAAE,gBAAA,CAAAT,IAAA,CAChBU,WAAW,CAAXA,WAAW,CAAAD,gBAAA,UAAG,aAAa,CAAAA,gBAAA,CACxBE,IAAI,CAAAC,wBAAA,CAAAZ,IAAA,CAAAa,SAAA,EAIT,MACE,CAAAlB,IAAA,CAACC,gBAAgB,CAAAkB,MAAA,CAAAC,MAAA,EACfd,GAAG,CAAEA,GAAI,CACTC,MAAM,CAAEA,MAAO,CACfC,SAAS,CAAEV,EAAE,CAAC,eAAe,CAAEU,SAAS,CAAE,CAC1CC,KAAK,CAAEA,KAAM,CACbE,UAAU,CAAEA,UAAW,CACvBE,UAAU,CAAEA,UAAW,CACvBE,WAAW,CAAEA,WAAY,EACrBC,IAAI,CACT,CAAC,CAEN,CACF,CACF,CAAC,CAEDd,OAAO,CAACmB,WAAW,CAAG,SAAS,CAE/B,OAASnB,OAAO","ignoreList":[]}

package/lib/module/components/primitives/F0Image/F0Image.md

@@ -0,0 +1,40 @@
+# F0Image
+
+Image primitive for React Native in F0.
+
+## Overview
+
+`F0Image` is a thin wrapper around `expo-image` with className support and consistent defaults for `contentFit`, `transition`, and `cachePolicy`.
+
+`expo-image` is a runtime peer dependency of `@factorialco/f0-react-native`. Ensure your app installs a compatible `expo-image` version.
+
+## Usage
+
+<!-- prettier-ignore -->
+```tsx
+import { F0Image } from "@factorialco/f0-react-native"
+
+<F0Image
+  source={{ uri: "https://example.com/avatar.png" }}
+  className="h-8 w-8 rounded-full"
+  accessibilityLabel="Profile picture"
+/>
+```
+
+## Props
+
+| Prop          | Type                | Default           | Description                    |
+| ------------- | ------------------- | ----------------- | ------------------------------ |
+| `source`      | `ImageSource`       | required          | Image source                   |
+| `className`   | `string`            | `"h-full w-full"` | Utility classes for layout     |
+| `contentFit`  | `ImageContentFit`   | `"cover"`         | Content fit mode               |
+| `transition`  | `number \| boolean` | `150`             | Transition duration / behavior |
+| `cachePolicy` | `ImageCachePolicy`  | `"memory-disk"`   | Caching policy                 |
+
+All other supported `expo-image` props are forwarded.
+
+## Testing
+
+Main tests:
+
+- `src/components/primitives/F0Image/__tests__/F0Image.spec.tsx`

package/lib/module/components/primitives/F0Image/F0Image.types.js

@@ -0,0 +1,2 @@
+export{};export{};
+//# sourceMappingURL=F0Image.types.js.map

package/lib/module/components/primitives/F0Image/F0Image.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["components/primitives/F0Image/F0Image.types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/components/primitives/F0Image/index.js

@@ -0,0 +1,2 @@
+export{F0Image}from"./F0Image";
+//# sourceMappingURL=index.js.map

package/lib/module/components/primitives/F0Image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["F0Image"],"sourceRoot":"../../../../../src","sources":["components/primitives/F0Image/index.ts"],"mappings":"AAAA,OAASA,OAAO,KAAQ,WAAW","ignoreList":[]}

package/lib/typescript/components/exports.d.ts

@@ -16,5 +16,6 @@ export * from "./experimental/Lists/DetailsItem";
 export * from "./experimental/Lists/DetailsItemsList";
 export * from "./primitives/F0Text";
 export * from "./primitives/F0Icon";
+export * from "./primitives/F0Image";
 export * from "./primitives/PressableFeedback";
 //# sourceMappingURL=exports.d.ts.map

package/lib/typescript/components/exports.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"exports.d.ts","sourceRoot":"","sources":["../../../src/components/exports.ts"],"names":[],"mappings":"AACA,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,oBAAoB,CAAA;AAClC,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,+BAA+B,CAAA;AAC7C,cAAc,kCAAkC,CAAA;AAChD,cAAc,uCAAuC,CAAA;AAGrD,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,gCAAgC,CAAA"}
+{"version":3,"file":"exports.d.ts","sourceRoot":"","sources":["../../../src/components/exports.ts"],"names":[],"mappings":"AACA,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,oBAAoB,CAAA;AAClC,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,+BAA+B,CAAA;AAC7C,cAAc,kCAAkC,CAAA;AAChD,cAAc,uCAAuC,CAAA;AAGrD,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,gCAAgC,CAAA"}

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

@@ -0,0 +1,11 @@
+import { Image as ExpoImage } from "expo-image";
+import React from "react";
+import type { F0ImageProps } from "./F0Image.types";
+/**
+ * F0Image - Image primitive for React Native in F0.
+ *
+ * Wraps `expo-image` to provide className support and sane defaults.
+ */
+declare const F0Image: React.MemoExoticComponent<React.ForwardRefExoticComponent<F0ImageProps & React.RefAttributes<ExpoImage>>>;
+export { F0Image };
+//# sourceMappingURL=F0Image.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"F0Image.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/F0Image/F0Image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,YAAY,CAAA;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAInD;;;;GAIG;AACH,QAAA,MAAM,OAAO,2GA4BZ,CAAA;AAID,OAAO,EAAE,OAAO,EAAE,CAAA"}

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

@@ -0,0 +1,21 @@
+import type { ImageProps as ExpoImageProps } from "expo-image";
+/**
+ * Public F0Image props.
+ *
+ * Thin primitive wrapper around `expo-image` with className support.
+ */
+export interface F0ImageProps extends Omit<ExpoImageProps, "source" | "style"> {
+    /**
+     * Image source passed to expo-image.
+     */
+    source: ExpoImageProps["source"];
+    /**
+     * Utility classes for sizing/layout.
+     */
+    className?: string;
+    /**
+     * Inline style escape hatch.
+     */
+    style?: ExpoImageProps["style"];
+}
+//# sourceMappingURL=F0Image.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"F0Image.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/F0Image/F0Image.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,YAAY,CAAA;AAE9D;;;;GAIG;AACH,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC5E;;OAEG;IACH,MAAM,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAA;IAEhC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;CAChC"}

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

@@ -0,0 +1,3 @@
+export { F0Image } from "./F0Image";
+export type { F0ImageProps } from "./F0Image.types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/F0Image/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@factorialco/f0-react-native",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "type": "module",
   "description": "React Native components for F0 Design System",
   "main": "expo-router/entry",
@@ -75,6 +75,7 @@
   "license": "MIT",
   "peerDependencies": {
     "date-fns": "^3.6.0",
+    "expo-image": "~3.0.11",
     "react": "*",
     "react-native": "*",
     "react-native-reanimated": "^3.19.4",

package/src/components/exports.ts

@@ -19,4 +19,5 @@ export * from "./experimental/Lists/DetailsItemsList"
 // Export primitives
 export * from "./primitives/F0Text"
 export * from "./primitives/F0Icon"
+export * from "./primitives/F0Image"
 export * from "./primitives/PressableFeedback"

package/src/components/primitives/F0Image/F0Image.md

@@ -0,0 +1,40 @@
+# F0Image
+
+Image primitive for React Native in F0.
+
+## Overview
+
+`F0Image` is a thin wrapper around `expo-image` with className support and consistent defaults for `contentFit`, `transition`, and `cachePolicy`.
+
+`expo-image` is a runtime peer dependency of `@factorialco/f0-react-native`. Ensure your app installs a compatible `expo-image` version.
+
+## Usage
+
+<!-- prettier-ignore -->
+```tsx
+import { F0Image } from "@factorialco/f0-react-native"
+
+<F0Image
+  source={{ uri: "https://example.com/avatar.png" }}
+  className="h-8 w-8 rounded-full"
+  accessibilityLabel="Profile picture"
+/>
+```
+
+## Props
+
+| Prop          | Type                | Default           | Description                    |
+| ------------- | ------------------- | ----------------- | ------------------------------ |
+| `source`      | `ImageSource`       | required          | Image source                   |
+| `className`   | `string`            | `"h-full w-full"` | Utility classes for layout     |
+| `contentFit`  | `ImageContentFit`   | `"cover"`         | Content fit mode               |
+| `transition`  | `number \| boolean` | `150`             | Transition duration / behavior |
+| `cachePolicy` | `ImageCachePolicy`  | `"memory-disk"`   | Caching policy                 |
+
+All other supported `expo-image` props are forwarded.
+
+## Testing
+
+Main tests:
+
+- `src/components/primitives/F0Image/__tests__/F0Image.spec.tsx`

package/src/components/primitives/F0Image/F0Image.tsx

@@ -0,0 +1,48 @@
+import { Image as ExpoImage } from "expo-image"
+import React from "react"
+import { withUniwind } from "uniwind"
+
+import { cn } from "../../../lib/utils"
+
+import type { F0ImageProps } from "./F0Image.types"
+
+const UniwindExpoImage = withUniwind(ExpoImage)
+
+/**
+ * F0Image - Image primitive for React Native in F0.
+ *
+ * Wraps `expo-image` to provide className support and sane defaults.
+ */
+const F0Image = React.memo(
+  React.forwardRef<React.ElementRef<typeof ExpoImage>, F0ImageProps>(
+    (
+      {
+        source,
+        className,
+        style,
+        contentFit = "cover",
+        transition = 150,
+        cachePolicy = "memory-disk",
+        ...rest
+      },
+      ref
+    ) => {
+      return (
+        <UniwindExpoImage
+          ref={ref}
+          source={source}
+          className={cn("h-full w-full", className)}
+          style={style}
+          contentFit={contentFit}
+          transition={transition}
+          cachePolicy={cachePolicy}
+          {...rest}
+        />
+      )
+    }
+  )
+)
+
+F0Image.displayName = "F0Image"
+
+export { F0Image }

package/src/components/primitives/F0Image/F0Image.types.ts

@@ -0,0 +1,23 @@
+import type { ImageProps as ExpoImageProps } from "expo-image"
+
+/**
+ * Public F0Image props.
+ *
+ * Thin primitive wrapper around `expo-image` with className support.
+ */
+export interface F0ImageProps extends Omit<ExpoImageProps, "source" | "style"> {
+  /**
+   * Image source passed to expo-image.
+   */
+  source: ExpoImageProps["source"]
+
+  /**
+   * Utility classes for sizing/layout.
+   */
+  className?: string
+
+  /**
+   * Inline style escape hatch.
+   */
+  style?: ExpoImageProps["style"]
+}

package/src/components/primitives/F0Image/__tests__/F0Image.spec.tsx

@@ -0,0 +1,46 @@
+import { render } from "@testing-library/react-native"
+import React from "react"
+
+import { F0Image } from "../"
+
+describe("F0Image", () => {
+  it("renders with a remote source", () => {
+    const { getByTestId } = render(
+      <F0Image
+        source={{ uri: "https://example.com/avatar.png" }}
+        testID="f0-image"
+      />
+    )
+
+    expect(getByTestId("f0-image")).toBeTruthy()
+  })
+
+  it("applies sane defaults", () => {
+    const { getByTestId } = render(
+      <F0Image
+        source={{ uri: "https://example.com/defaults.png" }}
+        testID="f0-image-defaults"
+      />
+    )
+    const image = getByTestId("f0-image-defaults")
+
+    expect(image.props.contentFit).toBe("cover")
+    expect(image.props.transition).toBe(150)
+    expect(image.props.cachePolicy).toBe("memory-disk")
+  })
+
+  it("accepts className overrides", () => {
+    const { getByTestId } = render(
+      <F0Image
+        source={{ uri: "https://example.com/classname.png" }}
+        className="h-8 w-8 rounded-full"
+        testID="f0-image-classname"
+      />
+    )
+    const image = getByTestId("f0-image-classname")
+
+    expect(image.props.className).toContain("h-8")
+    expect(image.props.className).toContain("w-8")
+    expect(image.props.className).toContain("rounded-full")
+  })
+})

package/src/components/primitives/F0Image/index.ts

@@ -0,0 +1,2 @@
+export { F0Image } from "./F0Image"
+export type { F0ImageProps } from "./F0Image.types"