@tamagui/image 1.0.1-beta.66 → 1.0.1-beta.69

package/dist/cjs/Image.js

@@ -1,6 +1,8 @@
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
@@ -18,6 +20,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -56,22 +59,23 @@ import_react.default["createElement"];
 const StyledImage = (0, import_core.styled)(import_react_native.Image, {
   name: "Image",
   position: "relative",
-  source: { uri: "" }
+  source: { uri: "" },
+  zIndex: 1
 }, {
   inlineProps: /* @__PURE__ */ new Set(["src", "width", "height"])
 });
 const Image = StyledImage.extractable((inProps) => {
   const props = (0, import_core.getExpandedShorthands)(inProps);
   const _a = props, { src, width = 100, height = 100 } = _a, rest = __objRest(_a, ["src", "width", "height"]);
-  const source = typeof src === "string" ? { uri: src, width, height } : src;
+  const source = typeof src === "string" ? __spreadValues({ uri: src }, import_core.isWeb && { width, height }) : src;
   const defaultSource = Array.isArray(source) ? source[0] : source;
   if (!defaultSource) {
     return null;
   }
-  return /* @__PURE__ */ import_react.default.createElement(StyledImage, __spreadValues({
+  return /* @__PURE__ */ import_react.default.createElement(StyledImage, __spreadValues(__spreadProps(__spreadValues({}, !import_core.isWeb && { style: { width, height } }), {
     defaultSource,
     source
-  }, rest));
+  }), rest));
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/Image.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Image.tsx"],
-  "sourcesContent": ["import { GetProps, StackProps, getExpandedShorthands, styled } from '@tamagui/core'\nimport React from 'react'\nimport { Image as RNImage } from 'react-native'\n\nReact['createElement']\n\nconst StyledImage = styled(\n  RNImage,\n  {\n    name: 'Image',\n    position: 'relative',\n    source: { uri: '' },\n  },\n  {\n    inlineProps: new Set(['src', 'width', 'height']),\n  }\n)\n\ntype StyledImageProps = GetProps<typeof StyledImage>\n\ntype BaseProps = Omit<StyledImageProps, 'source' | 'width' | 'height' | 'style' | 'onLayout'> & {\n  width: number\n  height: number\n  src: string | StyledImageProps['source']\n}\n\nexport type ImageProps = BaseProps & Omit<StackProps, keyof BaseProps>\n\nexport const Image: React.FC<ImageProps> = StyledImage.extractable((inProps) => {\n  const props = getExpandedShorthands(inProps)\n  const { src, width = 100, height = 100, ...rest } = props\n  const source = typeof src === 'string' ? { uri: src, width, height } : src\n  const defaultSource = Array.isArray(source) ? source[0] : source\n\n  if (!defaultSource) {\n    // placeholder with customizability\n    return null\n  }\n\n  // must set defaultSource to allow SSR, default it to the same as src\n  // @ts-ignore we pass all react-native-web props down\n  return <StyledImage defaultSource={defaultSource} source={source} {...rest} />\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAoE;AACpE,mBAAkB;AAClB,0BAAiC;AAEjC,qBAAM;AAEN,MAAM,cAAc,wBAClB,2BACA;AAAA,EACE,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ,EAAE,KAAK,GAAG;AACpB,GACA;AAAA,EACE,aAAa,oBAAI,IAAI,CAAC,OAAO,SAAS,QAAQ,CAAC;AACjD,CACF;AAYO,MAAM,QAA8B,YAAY,YAAY,CAAC,YAAY;AAC9E,QAAM,QAAQ,uCAAsB,OAAO;AAC3C,QAAoD,YAA5C,OAAK,QAAQ,KAAK,SAAS,QAAiB,IAAT,iBAAS,IAAT,CAAnC,OAAK,SAAa;AAC1B,QAAM,SAAS,OAAO,QAAQ,WAAW,EAAE,KAAK,KAAK,OAAO,OAAO,IAAI;AACvE,QAAM,gBAAgB,MAAM,QAAQ,MAAM,IAAI,OAAO,KAAK;AAE1D,MAAI,CAAC,eAAe;AAElB,WAAO;AAAA,EACT;AAIA,SAAO,mDAAC;AAAA,IAAY;AAAA,IAA8B;AAAA,KAAoB,KAAM;AAC9E,CAAC;",
+  "sourcesContent": ["import { GetProps, StackProps, getExpandedShorthands, isWeb, styled } from '@tamagui/core'\nimport React from 'react'\nimport { Image as RNImage } from 'react-native'\n\nReact['createElement']\n\nconst StyledImage = styled(\n  RNImage,\n  {\n    name: 'Image',\n    position: 'relative',\n    source: { uri: '' },\n    zIndex: 1,\n  },\n  {\n    inlineProps: new Set(['src', 'width', 'height']),\n  }\n)\n\ntype StyledImageProps = GetProps<typeof StyledImage>\n\ntype BaseProps = Omit<StyledImageProps, 'source' | 'width' | 'height' | 'style' | 'onLayout'> & {\n  width: number\n  height: number\n  src: string | StyledImageProps['source']\n}\n\nexport type ImageProps = BaseProps & Omit<StackProps, keyof BaseProps>\n\nexport const Image: React.FC<ImageProps> = StyledImage.extractable((inProps) => {\n  const props = getExpandedShorthands(inProps)\n  const { src, width = 100, height = 100, ...rest } = props\n  const source = typeof src === 'string' ? { uri: src, ...(isWeb && { width, height }) } : src\n  const defaultSource = Array.isArray(source) ? source[0] : source\n\n  if (!defaultSource) {\n    // placeholder with customizability\n    return null\n  }\n\n  // must set defaultSource to allow SSR, default it to the same as src\n  return (\n    <StyledImage\n      {...(!isWeb && { style: { width, height } })}\n      defaultSource={defaultSource}\n      source={source}\n      {...(rest as any)}\n    />\n  )\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA2E;AAC3E,mBAAkB;AAClB,0BAAiC;AAEjC,qBAAM;AAEN,MAAM,cAAc,wBAClB,2BACA;AAAA,EACE,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ,EAAE,KAAK,GAAG;AAAA,EAClB,QAAQ;AACV,GACA;AAAA,EACE,aAAa,oBAAI,IAAI,CAAC,OAAO,SAAS,QAAQ,CAAC;AACjD,CACF;AAYO,MAAM,QAA8B,YAAY,YAAY,CAAC,YAAY;AAC9E,QAAM,QAAQ,uCAAsB,OAAO;AAC3C,QAAoD,YAA5C,OAAK,QAAQ,KAAK,SAAS,QAAiB,IAAT,iBAAS,IAAT,CAAnC,OAAK,SAAa;AAC1B,QAAM,SAAS,OAAO,QAAQ,WAAW,iBAAE,KAAK,OAAS,qBAAS,EAAE,OAAO,OAAO,KAAO;AACzF,QAAM,gBAAgB,MAAM,QAAQ,MAAM,IAAI,OAAO,KAAK;AAE1D,MAAI,CAAC,eAAe;AAElB,WAAO;AAAA,EACT;AAGA,SACE,mDAAC,6DACM,CAAC,qBAAS,EAAE,OAAO,EAAE,OAAO,OAAO,EAAE,IAD3C;AAAA,IAEC;AAAA,IACA;AAAA,MACK,KACP;AAEJ,CAAC;",
   "names": []
 }

package/dist/esm/Image.js

@@ -1,23 +1,25 @@
-import { getExpandedShorthands, styled } from "@tamagui/core";
+import { getExpandedShorthands, isWeb, styled } from "@tamagui/core";
 import React from "react";
 import { Image as RNImage } from "react-native";
 React["createElement"];
 const StyledImage = styled(RNImage, {
   name: "Image",
   position: "relative",
-  source: { uri: "" }
+  source: { uri: "" },
+  zIndex: 1
 }, {
   inlineProps: /* @__PURE__ */ new Set(["src", "width", "height"])
 });
 const Image = StyledImage.extractable((inProps) => {
   const props = getExpandedShorthands(inProps);
   const { src, width = 100, height = 100, ...rest } = props;
-  const source = typeof src === "string" ? { uri: src, width, height } : src;
+  const source = typeof src === "string" ? { uri: src, ...isWeb && { width, height } } : src;
   const defaultSource = Array.isArray(source) ? source[0] : source;
   if (!defaultSource) {
     return null;
   }
   return /* @__PURE__ */ React.createElement(StyledImage, {
+    ...!isWeb && { style: { width, height } },
     defaultSource,
     source,
     ...rest

package/dist/esm/Image.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Image.tsx"],
-  "sourcesContent": ["import { GetProps, StackProps, getExpandedShorthands, styled } from '@tamagui/core'\nimport React from 'react'\nimport { Image as RNImage } from 'react-native'\n\nReact['createElement']\n\nconst StyledImage = styled(\n  RNImage,\n  {\n    name: 'Image',\n    position: 'relative',\n    source: { uri: '' },\n  },\n  {\n    inlineProps: new Set(['src', 'width', 'height']),\n  }\n)\n\ntype StyledImageProps = GetProps<typeof StyledImage>\n\ntype BaseProps = Omit<StyledImageProps, 'source' | 'width' | 'height' | 'style' | 'onLayout'> & {\n  width: number\n  height: number\n  src: string | StyledImageProps['source']\n}\n\nexport type ImageProps = BaseProps & Omit<StackProps, keyof BaseProps>\n\nexport const Image: React.FC<ImageProps> = StyledImage.extractable((inProps) => {\n  const props = getExpandedShorthands(inProps)\n  const { src, width = 100, height = 100, ...rest } = props\n  const source = typeof src === 'string' ? { uri: src, width, height } : src\n  const defaultSource = Array.isArray(source) ? source[0] : source\n\n  if (!defaultSource) {\n    // placeholder with customizability\n    return null\n  }\n\n  // must set defaultSource to allow SSR, default it to the same as src\n  // @ts-ignore we pass all react-native-web props down\n  return <StyledImage defaultSource={defaultSource} source={source} {...rest} />\n})\n"],
-  "mappings": "AAAA;AACA;AACA;AAEA,MAAM;AAEN,MAAM,cAAc,OAClB,SACA;AAAA,EACE,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ,EAAE,KAAK,GAAG;AACpB,GACA;AAAA,EACE,aAAa,oBAAI,IAAI,CAAC,OAAO,SAAS,QAAQ,CAAC;AACjD,CACF;AAYO,MAAM,QAA8B,YAAY,YAAY,CAAC,YAAY;AAC9E,QAAM,QAAQ,sBAAsB,OAAO;AAC3C,QAAM,EAAE,KAAK,QAAQ,KAAK,SAAS,QAAQ,SAAS;AACpD,QAAM,SAAS,OAAO,QAAQ,WAAW,EAAE,KAAK,KAAK,OAAO,OAAO,IAAI;AACvE,QAAM,gBAAgB,MAAM,QAAQ,MAAM,IAAI,OAAO,KAAK;AAE1D,MAAI,CAAC,eAAe;AAElB,WAAO;AAAA,EACT;AAIA,SAAO,oCAAC;AAAA,IAAY;AAAA,IAA8B;AAAA,IAAiB,GAAG;AAAA,GAAM;AAC9E,CAAC;",
+  "sourcesContent": ["import { GetProps, StackProps, getExpandedShorthands, isWeb, styled } from '@tamagui/core'\nimport React from 'react'\nimport { Image as RNImage } from 'react-native'\n\nReact['createElement']\n\nconst StyledImage = styled(\n  RNImage,\n  {\n    name: 'Image',\n    position: 'relative',\n    source: { uri: '' },\n    zIndex: 1,\n  },\n  {\n    inlineProps: new Set(['src', 'width', 'height']),\n  }\n)\n\ntype StyledImageProps = GetProps<typeof StyledImage>\n\ntype BaseProps = Omit<StyledImageProps, 'source' | 'width' | 'height' | 'style' | 'onLayout'> & {\n  width: number\n  height: number\n  src: string | StyledImageProps['source']\n}\n\nexport type ImageProps = BaseProps & Omit<StackProps, keyof BaseProps>\n\nexport const Image: React.FC<ImageProps> = StyledImage.extractable((inProps) => {\n  const props = getExpandedShorthands(inProps)\n  const { src, width = 100, height = 100, ...rest } = props\n  const source = typeof src === 'string' ? { uri: src, ...(isWeb && { width, height }) } : src\n  const defaultSource = Array.isArray(source) ? source[0] : source\n\n  if (!defaultSource) {\n    // placeholder with customizability\n    return null\n  }\n\n  // must set defaultSource to allow SSR, default it to the same as src\n  return (\n    <StyledImage\n      {...(!isWeb && { style: { width, height } })}\n      defaultSource={defaultSource}\n      source={source}\n      {...(rest as any)}\n    />\n  )\n})\n"],
+  "mappings": "AAAA;AACA;AACA;AAEA,MAAM;AAEN,MAAM,cAAc,OAClB,SACA;AAAA,EACE,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ,EAAE,KAAK,GAAG;AAAA,EAClB,QAAQ;AACV,GACA;AAAA,EACE,aAAa,oBAAI,IAAI,CAAC,OAAO,SAAS,QAAQ,CAAC;AACjD,CACF;AAYO,MAAM,QAA8B,YAAY,YAAY,CAAC,YAAY;AAC9E,QAAM,QAAQ,sBAAsB,OAAO;AAC3C,QAAM,EAAE,KAAK,QAAQ,KAAK,SAAS,QAAQ,SAAS;AACpD,QAAM,SAAS,OAAO,QAAQ,WAAW,EAAE,KAAK,KAAK,GAAI,SAAS,EAAE,OAAO,OAAO,EAAG,IAAI;AACzF,QAAM,gBAAgB,MAAM,QAAQ,MAAM,IAAI,OAAO,KAAK;AAE1D,MAAI,CAAC,eAAe;AAElB,WAAO;AAAA,EACT;AAGA,SACE,oCAAC;AAAA,IACE,GAAI,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,OAAO,EAAE;AAAA,IAC1C;AAAA,IACA;AAAA,IACC,GAAI;AAAA,GACP;AAEJ,CAAC;",
   "names": []
 }

package/dist/jsx/Image.js

@@ -1,23 +1,24 @@
-import { getExpandedShorthands, styled } from "@tamagui/core";
+import { getExpandedShorthands, isWeb, styled } from "@tamagui/core";
 import React from "react";
 import { Image as RNImage } from "react-native";
 React["createElement"];
 const StyledImage = styled(RNImage, {
   name: "Image",
   position: "relative",
-  source: { uri: "" }
+  source: { uri: "" },
+  zIndex: 1
 }, {
   inlineProps: /* @__PURE__ */ new Set(["src", "width", "height"])
 });
 const Image = StyledImage.extractable((inProps) => {
   const props = getExpandedShorthands(inProps);
   const { src, width = 100, height = 100, ...rest } = props;
-  const source = typeof src === "string" ? { uri: src, width, height } : src;
+  const source = typeof src === "string" ? { uri: src, ...isWeb && { width, height } } : src;
   const defaultSource = Array.isArray(source) ? source[0] : source;
   if (!defaultSource) {
     return null;
   }
-  return <StyledImage defaultSource={defaultSource} source={source} {...rest} />;
+  return <StyledImage {...!isWeb && { style: { width, height } }} defaultSource={defaultSource} source={source} {...rest} />;
 });
 export {
   Image

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/image",
-  "version": "1.0.1-beta.66",
+  "version": "1.0.1-beta.69",
   "sideEffects": true,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -19,14 +19,14 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/core": "^1.0.1-beta.66"
+    "@tamagui/core": "^1.0.1-beta.69"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.66",
+    "@tamagui/build": "^1.0.1-beta.69",
     "react": "*",
     "react-native": "*"
   },

package/src/Image.tsx

@@ -1,4 +1,4 @@
-import { GetProps, StackProps, getExpandedShorthands, styled } from '@tamagui/core'
+import { GetProps, StackProps, getExpandedShorthands, isWeb, styled } from '@tamagui/core'
 import React from 'react'
 import { Image as RNImage } from 'react-native'
 
@@ -10,6 +10,7 @@ const StyledImage = styled(
     name: 'Image',
     position: 'relative',
     source: { uri: '' },
+    zIndex: 1,
   },
   {
     inlineProps: new Set(['src', 'width', 'height']),
@@ -29,7 +30,7 @@ export type ImageProps = BaseProps & Omit<StackProps, keyof BaseProps>
 export const Image: React.FC<ImageProps> = StyledImage.extractable((inProps) => {
   const props = getExpandedShorthands(inProps)
   const { src, width = 100, height = 100, ...rest } = props
-  const source = typeof src === 'string' ? { uri: src, width, height } : src
+  const source = typeof src === 'string' ? { uri: src, ...(isWeb && { width, height }) } : src
   const defaultSource = Array.isArray(source) ? source[0] : source
 
   if (!defaultSource) {
@@ -38,6 +39,12 @@ export const Image: React.FC<ImageProps> = StyledImage.extractable((inProps) =>
   }
 
   // must set defaultSource to allow SSR, default it to the same as src
-  // @ts-ignore we pass all react-native-web props down
-  return <StyledImage defaultSource={defaultSource} source={source} {...rest} />
+  return (
+    <StyledImage
+      {...(!isWeb && { style: { width, height } })}
+      defaultSource={defaultSource}
+      source={source}
+      {...(rest as any)}
+    />
+  )
 })

package/types/Image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../src/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAiC,MAAM,eAAe,CAAA;AACnF,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,QAAA,MAAM,WAAW;;;;;;;;EAUhB,CAAA;AAED,aAAK,gBAAgB,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAEpD,aAAK,SAAS,GAAG,IAAI,CAAC,gBAAgB,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC,GAAG;IAC9F,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,GAAG,EAAE,MAAM,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAA;CACzC,CAAA;AAED,oBAAY,UAAU,GAAG,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,SAAS,CAAC,CAAA;AAEtE,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAcrC,CAAA"}
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../src/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAwC,MAAM,eAAe,CAAA;AAC1F,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,QAAA,MAAM,WAAW;;;;;;;;EAWhB,CAAA;AAED,aAAK,gBAAgB,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAEpD,aAAK,SAAS,GAAG,IAAI,CAAC,gBAAgB,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC,GAAG;IAC9F,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,GAAG,EAAE,MAAM,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAA;CACzC,CAAA;AAED,oBAAY,UAAU,GAAG,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,SAAS,CAAC,CAAA;AAEtE,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAoBrC,CAAA"}