@tamagui/linear-gradient 1.94.4 → 1.94.5

package/dist/cjs/linear-gradient.js

@@ -1,7 +1,8 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: !0 });
@@ -11,11 +12,80 @@ var __export = (target, all) => {
       !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   return to;
 };
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
+  mod
+)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
 var linear_gradient_exports = {};
 __export(linear_gradient_exports, {
-  LinearGradient: () => import_expo_linear_gradient.LinearGradient
+  LinearGradient: () => LinearGradient
 });
 module.exports = __toCommonJS(linear_gradient_exports);
-var import_expo_linear_gradient = require("expo-linear-gradient");
+var import_core = require("@tamagui/core"), React = __toESM(require("react")), import_react_native = require("react-native-web"), import_jsx_runtime = require("react/jsx-runtime");
+function LinearGradient({
+  colors,
+  locations,
+  start,
+  end,
+  ...props
+}) {
+  const [{ height, width }, setLayout] = React.useState({
+    height: 1,
+    width: 1
+  }), linearGradientBackgroundImage = React.useMemo(() => getLinearGradientBackgroundImage(colors, locations, start, end, width, height), [colors, locations, start, end, width, height]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native.View,
+    {
+      ...props,
+      style: [
+        props.style,
+        // @ts-ignore: [ts] Property 'backgroundImage' does not exist on type 'ViewStyle'.
+        { backgroundImage: linearGradientBackgroundImage }
+      ],
+      onLayout: (event) => {
+        const { width: width2, height: height2 } = event.nativeEvent.layout;
+        setLayout((oldLayout) => width2 !== oldLayout.width || height2 !== oldLayout.height ? { height: height2, width: width2 } : oldLayout), props.onLayout && props.onLayout(event);
+      }
+    }
+  );
+}
+function getLinearGradientBackgroundImage(colors, locations, startPoint, endPoint, width = 1, height = 1) {
+  const gradientColors = calculateGradientColors(
+    // @ts-expect-error TODO fix numbers
+    colors,
+    locations
+  );
+  return `linear-gradient(${calculatePseudoAngle(width, height, startPoint, endPoint)}deg, ${gradientColors.join(", ")})`;
+}
+function calculatePseudoAngle(width, height, startPoint, endPoint) {
+  const getControlPoints = () => {
+    let correctedStartPoint = [0, 0];
+    Array.isArray(startPoint) && (correctedStartPoint = [
+      startPoint[0] != null ? startPoint[0] : 0,
+      startPoint[1] != null ? startPoint[1] : 0
+    ]);
+    let correctedEndPoint = [0, 1];
+    return Array.isArray(endPoint) && (correctedEndPoint = [
+      endPoint[0] != null ? endPoint[0] : 0,
+      endPoint[1] != null ? endPoint[1] : 1
+    ]), [correctedStartPoint, correctedEndPoint];
+  }, [start, end] = getControlPoints();
+  start[0] *= width, end[0] *= width, start[1] *= height, end[1] *= height;
+  const py = end[1] - start[1], px = end[0] - start[0];
+  return 90 + Math.atan2(py, px) * 180 / Math.PI;
+}
+function calculateGradientColors(colors, locations) {
+  return colors.map((color, index) => {
+    const output = (0, import_core.normalizeColor)(color);
+    if (locations && locations[index]) {
+      const percentage = Math.max(0, Math.min(1, locations[index])) * 100;
+      return `${output} ${percentage}%`;
+    }
+    return output;
+  });
+}
 //# sourceMappingURL=linear-gradient.js.map

package/dist/cjs/linear-gradient.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/linear-gradient.ts"],
-  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kCAA+B;",
-  "names": []
+  "sources": ["../../src/linear-gradient.tsx"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,kBAA+B,0BAK/B,QAAuB,2BACvB,sBAAqB,yBAmBjB;AAjBG,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,CAAC,EAAE,QAAQ,MAAM,GAAG,SAAS,IAAI,MAAM,SAAS;AAAA,IACpD,QAAQ;AAAA,IACR,OAAO;AAAA,EACT,CAAC,GAEK,gCAAgC,MAAM,QAAQ,MAC3C,iCAAiC,QAAQ,WAAW,OAAO,KAAK,OAAO,MAAM,GACnF,CAAC,QAAQ,WAAW,OAAO,KAAK,OAAO,MAAM,CAAC;AAEjD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,QACL,MAAM;AAAA;AAAA,QAEN,EAAE,iBAAiB,8BAA8B;AAAA,MACnD;AAAA,MACA,UAAU,CAAC,UAAU;AACnB,cAAM,EAAE,OAAAA,QAAO,QAAAC,QAAO,IAAI,MAAM,YAAY;AAE5C,kBAAU,CAAC,cAELD,WAAU,UAAU,SAASC,YAAW,UAAU,SAC7C,EAAE,QAAAA,SAAQ,OAAAD,OAAM,IAGlB,SACR,GAEG,MAAM,YACR,MAAM,SAAS,KAAK;AAAA,MAExB;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,iCACP,QACA,WACA,YACA,UACA,QAAQ,GACR,SAAS,GACT;AACA,QAAM,iBAAiB;AAAA;AAAA,IAErB;AAAA,IACA;AAAA,EACF;AAEA,SAAO,mBADO,qBAAqB,OAAO,QAAQ,YAAY,QAAQ,CACvC,QAAQ,eAAe,KAAK,IAAI,CAAC;AAClE;AAEA,SAAS,qBACP,OACA,QACA,YACA,UACA;AACA,QAAM,mBAAmB,MAA6B;AACpD,QAAI,sBAA2C,CAAC,GAAG,CAAC;AACpD,IAAI,MAAM,QAAQ,UAAU,MAC1B,sBAAsB;AAAA,MACpB,WAAW,CAAC,KAAK,OAAO,WAAW,CAAC,IAAI;AAAA,MACxC,WAAW,CAAC,KAAK,OAAO,WAAW,CAAC,IAAI;AAAA,IAC1C;AAEF,QAAI,oBAAyC,CAAC,GAAK,CAAG;AACtD,WAAI,MAAM,QAAQ,QAAQ,MACxB,oBAAoB;AAAA,MAClB,SAAS,CAAC,KAAK,OAAO,SAAS,CAAC,IAAI;AAAA,MACpC,SAAS,CAAC,KAAK,OAAO,SAAS,CAAC,IAAI;AAAA,IACtC,IAEK,CAAC,qBAAqB,iBAAiB;AAAA,EAChD,GAEM,CAAC,OAAO,GAAG,IAAI,iBAAiB;AACtC,QAAM,CAAC,KAAK,OACZ,IAAI,CAAC,KAAK,OACV,MAAM,CAAC,KAAK,QACZ,IAAI,CAAC,KAAK;AACV,QAAM,KAAK,IAAI,CAAC,IAAI,MAAM,CAAC,GACrB,KAAK,IAAI,CAAC,IAAI,MAAM,CAAC;AAE3B,SAAO,KAAM,KAAK,MAAM,IAAI,EAAE,IAAI,MAAO,KAAK;AAChD;AAEA,SAAS,wBAAwB,QAAkB,WAA6B;AAC9E,SAAO,OAAO,IAAI,CAAC,OAAe,UAAiC;AACjE,UAAM,aAAS,4BAAe,KAAK;AACnC,QAAI,aAAa,UAAU,KAAK,GAAG;AAGjC,YAAM,aAFW,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,IAE5B;AAC9B,aAAO,GAAG,MAAM,IAAI,UAAU;AAAA,IAChC;AACA,WAAO;AAAA,EACT,CAAC;AACH;",
+  "names": ["width", "height"]
 }

package/dist/cjs/linear-gradient.native.js

@@ -13,14 +13,14 @@ var __export = (target, all) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
-var linear_gradient_exports = {};
-__export(linear_gradient_exports, {
+var linear_gradient_native_exports = {};
+__export(linear_gradient_native_exports, {
   LinearGradient: () => import_expo_linear_gradient.LinearGradient
 });
-module.exports = __toCommonJS(linear_gradient_exports);
+module.exports = __toCommonJS(linear_gradient_native_exports);
 var import_expo_linear_gradient = require("expo-linear-gradient");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   LinearGradient
 });
-//# sourceMappingURL=linear-gradient.js.map
+//# sourceMappingURL=linear-gradient.native.js.map

package/dist/cjs/linear-gradient.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/Users/n8/tamagui/packages/linear-gradient/src/linear-gradient.ts"],
+  "sources": ["../../src/Users/n8/tamagui/packages/linear-gradient/src/linear-gradient.native.tsx"],
   "mappings": ";;;;;;;;;;;;;;;AAAA;;;;;kCAA+B;",
   "names": []
 }

package/dist/esm/linear-gradient.js

@@ -1,4 +1,69 @@
-import { LinearGradient } from "expo-linear-gradient";
+import { normalizeColor } from "@tamagui/core";
+import * as React from "react";
+import { View } from "react-native-web";
+import { jsx } from "react/jsx-runtime";
+function LinearGradient({
+  colors,
+  locations,
+  start,
+  end,
+  ...props
+}) {
+  const [{ height, width }, setLayout] = React.useState({
+    height: 1,
+    width: 1
+  }), linearGradientBackgroundImage = React.useMemo(() => getLinearGradientBackgroundImage(colors, locations, start, end, width, height), [colors, locations, start, end, width, height]);
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      ...props,
+      style: [
+        props.style,
+        // @ts-ignore: [ts] Property 'backgroundImage' does not exist on type 'ViewStyle'.
+        { backgroundImage: linearGradientBackgroundImage }
+      ],
+      onLayout: (event) => {
+        const { width: width2, height: height2 } = event.nativeEvent.layout;
+        setLayout((oldLayout) => width2 !== oldLayout.width || height2 !== oldLayout.height ? { height: height2, width: width2 } : oldLayout), props.onLayout && props.onLayout(event);
+      }
+    }
+  );
+}
+function getLinearGradientBackgroundImage(colors, locations, startPoint, endPoint, width = 1, height = 1) {
+  const gradientColors = calculateGradientColors(
+    // @ts-expect-error TODO fix numbers
+    colors,
+    locations
+  );
+  return `linear-gradient(${calculatePseudoAngle(width, height, startPoint, endPoint)}deg, ${gradientColors.join(", ")})`;
+}
+function calculatePseudoAngle(width, height, startPoint, endPoint) {
+  const getControlPoints = () => {
+    let correctedStartPoint = [0, 0];
+    Array.isArray(startPoint) && (correctedStartPoint = [
+      startPoint[0] != null ? startPoint[0] : 0,
+      startPoint[1] != null ? startPoint[1] : 0
+    ]);
+    let correctedEndPoint = [0, 1];
+    return Array.isArray(endPoint) && (correctedEndPoint = [
+      endPoint[0] != null ? endPoint[0] : 0,
+      endPoint[1] != null ? endPoint[1] : 1
+    ]), [correctedStartPoint, correctedEndPoint];
+  }, [start, end] = getControlPoints();
+  start[0] *= width, end[0] *= width, start[1] *= height, end[1] *= height;
+  const py = end[1] - start[1], px = end[0] - start[0];
+  return 90 + Math.atan2(py, px) * 180 / Math.PI;
+}
+function calculateGradientColors(colors, locations) {
+  return colors.map((color, index) => {
+    const output = normalizeColor(color);
+    if (locations && locations[index]) {
+      const percentage = Math.max(0, Math.min(1, locations[index])) * 100;
+      return `${output} ${percentage}%`;
+    }
+    return output;
+  });
+}
 export {
   LinearGradient
 };

package/dist/esm/linear-gradient.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/linear-gradient.ts"],
-  "mappings": "AAAA,SAAS,sBAAsB;",
-  "names": []
+  "sources": ["../../src/linear-gradient.tsx"],
+  "mappings": "AACA,SAAS,sBAAsB;AAK/B,YAAY,WAAW;AACvB,SAAS,YAAY;AAmBjB;AAjBG,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,CAAC,EAAE,QAAQ,MAAM,GAAG,SAAS,IAAI,MAAM,SAAS;AAAA,IACpD,QAAQ;AAAA,IACR,OAAO;AAAA,EACT,CAAC,GAEK,gCAAgC,MAAM,QAAQ,MAC3C,iCAAiC,QAAQ,WAAW,OAAO,KAAK,OAAO,MAAM,GACnF,CAAC,QAAQ,WAAW,OAAO,KAAK,OAAO,MAAM,CAAC;AAEjD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,QACL,MAAM;AAAA;AAAA,QAEN,EAAE,iBAAiB,8BAA8B;AAAA,MACnD;AAAA,MACA,UAAU,CAAC,UAAU;AACnB,cAAM,EAAE,OAAAA,QAAO,QAAAC,QAAO,IAAI,MAAM,YAAY;AAE5C,kBAAU,CAAC,cAELD,WAAU,UAAU,SAASC,YAAW,UAAU,SAC7C,EAAE,QAAAA,SAAQ,OAAAD,OAAM,IAGlB,SACR,GAEG,MAAM,YACR,MAAM,SAAS,KAAK;AAAA,MAExB;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,iCACP,QACA,WACA,YACA,UACA,QAAQ,GACR,SAAS,GACT;AACA,QAAM,iBAAiB;AAAA;AAAA,IAErB;AAAA,IACA;AAAA,EACF;AAEA,SAAO,mBADO,qBAAqB,OAAO,QAAQ,YAAY,QAAQ,CACvC,QAAQ,eAAe,KAAK,IAAI,CAAC;AAClE;AAEA,SAAS,qBACP,OACA,QACA,YACA,UACA;AACA,QAAM,mBAAmB,MAA6B;AACpD,QAAI,sBAA2C,CAAC,GAAG,CAAC;AACpD,IAAI,MAAM,QAAQ,UAAU,MAC1B,sBAAsB;AAAA,MACpB,WAAW,CAAC,KAAK,OAAO,WAAW,CAAC,IAAI;AAAA,MACxC,WAAW,CAAC,KAAK,OAAO,WAAW,CAAC,IAAI;AAAA,IAC1C;AAEF,QAAI,oBAAyC,CAAC,GAAK,CAAG;AACtD,WAAI,MAAM,QAAQ,QAAQ,MACxB,oBAAoB;AAAA,MAClB,SAAS,CAAC,KAAK,OAAO,SAAS,CAAC,IAAI;AAAA,MACpC,SAAS,CAAC,KAAK,OAAO,SAAS,CAAC,IAAI;AAAA,IACtC,IAEK,CAAC,qBAAqB,iBAAiB;AAAA,EAChD,GAEM,CAAC,OAAO,GAAG,IAAI,iBAAiB;AACtC,QAAM,CAAC,KAAK,OACZ,IAAI,CAAC,KAAK,OACV,MAAM,CAAC,KAAK,QACZ,IAAI,CAAC,KAAK;AACV,QAAM,KAAK,IAAI,CAAC,IAAI,MAAM,CAAC,GACrB,KAAK,IAAI,CAAC,IAAI,MAAM,CAAC;AAE3B,SAAO,KAAM,KAAK,MAAM,IAAI,EAAE,IAAI,MAAO,KAAK;AAChD;AAEA,SAAS,wBAAwB,QAAkB,WAA6B;AAC9E,SAAO,OAAO,IAAI,CAAC,OAAe,UAAiC;AACjE,UAAM,SAAS,eAAe,KAAK;AACnC,QAAI,aAAa,UAAU,KAAK,GAAG;AAGjC,YAAM,aAFW,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,IAE5B;AAC9B,aAAO,GAAG,MAAM,IAAI,UAAU;AAAA,IAChC;AACA,WAAO;AAAA,EACT,CAAC;AACH;",
+  "names": ["width", "height"]
 }

package/dist/esm/linear-gradient.mjs

@@ -1,2 +1,68 @@
-import { LinearGradient } from "expo-linear-gradient";
+import { normalizeColor } from "@tamagui/core";
+import * as React from "react";
+import { View } from "react-native-web";
+import { jsx } from "react/jsx-runtime";
+function LinearGradient({
+  colors,
+  locations,
+  start,
+  end,
+  ...props
+}) {
+  const [{
+      height,
+      width
+    }, setLayout] = React.useState({
+      height: 1,
+      width: 1
+    }),
+    linearGradientBackgroundImage = React.useMemo(() => getLinearGradientBackgroundImage(colors, locations, start, end, width, height), [colors, locations, start, end, width, height]);
+  return /* @__PURE__ */jsx(View, {
+    ...props,
+    style: [props.style,
+    // @ts-ignore: [ts] Property 'backgroundImage' does not exist on type 'ViewStyle'.
+    {
+      backgroundImage: linearGradientBackgroundImage
+    }],
+    onLayout: event => {
+      const {
+        width: width2,
+        height: height2
+      } = event.nativeEvent.layout;
+      setLayout(oldLayout => width2 !== oldLayout.width || height2 !== oldLayout.height ? {
+        height: height2,
+        width: width2
+      } : oldLayout), props.onLayout && props.onLayout(event);
+    }
+  });
+}
+function getLinearGradientBackgroundImage(colors, locations, startPoint, endPoint, width = 1, height = 1) {
+  const gradientColors = calculateGradientColors(
+  // @ts-expect-error TODO fix numbers
+  colors, locations);
+  return `linear-gradient(${calculatePseudoAngle(width, height, startPoint, endPoint)}deg, ${gradientColors.join(", ")})`;
+}
+function calculatePseudoAngle(width, height, startPoint, endPoint) {
+  const getControlPoints = () => {
+      let correctedStartPoint = [0, 0];
+      Array.isArray(startPoint) && (correctedStartPoint = [startPoint[0] != null ? startPoint[0] : 0, startPoint[1] != null ? startPoint[1] : 0]);
+      let correctedEndPoint = [0, 1];
+      return Array.isArray(endPoint) && (correctedEndPoint = [endPoint[0] != null ? endPoint[0] : 0, endPoint[1] != null ? endPoint[1] : 1]), [correctedStartPoint, correctedEndPoint];
+    },
+    [start, end] = getControlPoints();
+  start[0] *= width, end[0] *= width, start[1] *= height, end[1] *= height;
+  const py = end[1] - start[1],
+    px = end[0] - start[0];
+  return 90 + Math.atan2(py, px) * 180 / Math.PI;
+}
+function calculateGradientColors(colors, locations) {
+  return colors.map((color, index) => {
+    const output = normalizeColor(color);
+    if (locations && locations[index]) {
+      const percentage = Math.max(0, Math.min(1, locations[index])) * 100;
+      return `${output} ${percentage}%`;
+    }
+    return output;
+  });
+}
 export { LinearGradient };

package/dist/esm/linear-gradient.native.js

@@ -2,4 +2,4 @@ import { LinearGradient } from "expo-linear-gradient";
 export {
   LinearGradient
 };
-//# sourceMappingURL=linear-gradient.js.map
+//# sourceMappingURL=linear-gradient.native.js.map

package/dist/esm/linear-gradient.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/Users/n8/tamagui/packages/linear-gradient/src/linear-gradient.ts"],
+  "sources": ["../../src/Users/n8/tamagui/packages/linear-gradient/src/linear-gradient.native.tsx"],
   "mappings": "AAAA,SAASA,sBAAsB;",
   "names": ["LinearGradient"]
 }

package/dist/jsx/linear-gradient.js

@@ -1,4 +1,69 @@
-import { LinearGradient } from "expo-linear-gradient";
+import { normalizeColor } from "@tamagui/core";
+import * as React from "react";
+import { View } from "react-native-web";
+import { jsx } from "react/jsx-runtime";
+function LinearGradient({
+  colors,
+  locations,
+  start,
+  end,
+  ...props
+}) {
+  const [{ height, width }, setLayout] = React.useState({
+    height: 1,
+    width: 1
+  }), linearGradientBackgroundImage = React.useMemo(() => getLinearGradientBackgroundImage(colors, locations, start, end, width, height), [colors, locations, start, end, width, height]);
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      ...props,
+      style: [
+        props.style,
+        // @ts-ignore: [ts] Property 'backgroundImage' does not exist on type 'ViewStyle'.
+        { backgroundImage: linearGradientBackgroundImage }
+      ],
+      onLayout: (event) => {
+        const { width: width2, height: height2 } = event.nativeEvent.layout;
+        setLayout((oldLayout) => width2 !== oldLayout.width || height2 !== oldLayout.height ? { height: height2, width: width2 } : oldLayout), props.onLayout && props.onLayout(event);
+      }
+    }
+  );
+}
+function getLinearGradientBackgroundImage(colors, locations, startPoint, endPoint, width = 1, height = 1) {
+  const gradientColors = calculateGradientColors(
+    // @ts-expect-error TODO fix numbers
+    colors,
+    locations
+  );
+  return `linear-gradient(${calculatePseudoAngle(width, height, startPoint, endPoint)}deg, ${gradientColors.join(", ")})`;
+}
+function calculatePseudoAngle(width, height, startPoint, endPoint) {
+  const getControlPoints = () => {
+    let correctedStartPoint = [0, 0];
+    Array.isArray(startPoint) && (correctedStartPoint = [
+      startPoint[0] != null ? startPoint[0] : 0,
+      startPoint[1] != null ? startPoint[1] : 0
+    ]);
+    let correctedEndPoint = [0, 1];
+    return Array.isArray(endPoint) && (correctedEndPoint = [
+      endPoint[0] != null ? endPoint[0] : 0,
+      endPoint[1] != null ? endPoint[1] : 1
+    ]), [correctedStartPoint, correctedEndPoint];
+  }, [start, end] = getControlPoints();
+  start[0] *= width, end[0] *= width, start[1] *= height, end[1] *= height;
+  const py = end[1] - start[1], px = end[0] - start[0];
+  return 90 + Math.atan2(py, px) * 180 / Math.PI;
+}
+function calculateGradientColors(colors, locations) {
+  return colors.map((color, index) => {
+    const output = normalizeColor(color);
+    if (locations && locations[index]) {
+      const percentage = Math.max(0, Math.min(1, locations[index])) * 100;
+      return `${output} ${percentage}%`;
+    }
+    return output;
+  });
+}
 export {
   LinearGradient
 };

package/dist/jsx/linear-gradient.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/linear-gradient.ts"],
-  "mappings": "AAAA,SAAS,sBAAsB;",
-  "names": []
+  "sources": ["../../src/linear-gradient.tsx"],
+  "mappings": "AACA,SAAS,sBAAsB;AAK/B,YAAY,WAAW;AACvB,SAAS,YAAY;AAmBjB;AAjBG,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,CAAC,EAAE,QAAQ,MAAM,GAAG,SAAS,IAAI,MAAM,SAAS;AAAA,IACpD,QAAQ;AAAA,IACR,OAAO;AAAA,EACT,CAAC,GAEK,gCAAgC,MAAM,QAAQ,MAC3C,iCAAiC,QAAQ,WAAW,OAAO,KAAK,OAAO,MAAM,GACnF,CAAC,QAAQ,WAAW,OAAO,KAAK,OAAO,MAAM,CAAC;AAEjD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,QACL,MAAM;AAAA;AAAA,QAEN,EAAE,iBAAiB,8BAA8B;AAAA,MACnD;AAAA,MACA,UAAU,CAAC,UAAU;AACnB,cAAM,EAAE,OAAAA,QAAO,QAAAC,QAAO,IAAI,MAAM,YAAY;AAE5C,kBAAU,CAAC,cAELD,WAAU,UAAU,SAASC,YAAW,UAAU,SAC7C,EAAE,QAAAA,SAAQ,OAAAD,OAAM,IAGlB,SACR,GAEG,MAAM,YACR,MAAM,SAAS,KAAK;AAAA,MAExB;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,iCACP,QACA,WACA,YACA,UACA,QAAQ,GACR,SAAS,GACT;AACA,QAAM,iBAAiB;AAAA;AAAA,IAErB;AAAA,IACA;AAAA,EACF;AAEA,SAAO,mBADO,qBAAqB,OAAO,QAAQ,YAAY,QAAQ,CACvC,QAAQ,eAAe,KAAK,IAAI,CAAC;AAClE;AAEA,SAAS,qBACP,OACA,QACA,YACA,UACA;AACA,QAAM,mBAAmB,MAA6B;AACpD,QAAI,sBAA2C,CAAC,GAAG,CAAC;AACpD,IAAI,MAAM,QAAQ,UAAU,MAC1B,sBAAsB;AAAA,MACpB,WAAW,CAAC,KAAK,OAAO,WAAW,CAAC,IAAI;AAAA,MACxC,WAAW,CAAC,KAAK,OAAO,WAAW,CAAC,IAAI;AAAA,IAC1C;AAEF,QAAI,oBAAyC,CAAC,GAAK,CAAG;AACtD,WAAI,MAAM,QAAQ,QAAQ,MACxB,oBAAoB;AAAA,MAClB,SAAS,CAAC,KAAK,OAAO,SAAS,CAAC,IAAI;AAAA,MACpC,SAAS,CAAC,KAAK,OAAO,SAAS,CAAC,IAAI;AAAA,IACtC,IAEK,CAAC,qBAAqB,iBAAiB;AAAA,EAChD,GAEM,CAAC,OAAO,GAAG,IAAI,iBAAiB;AACtC,QAAM,CAAC,KAAK,OACZ,IAAI,CAAC,KAAK,OACV,MAAM,CAAC,KAAK,QACZ,IAAI,CAAC,KAAK;AACV,QAAM,KAAK,IAAI,CAAC,IAAI,MAAM,CAAC,GACrB,KAAK,IAAI,CAAC,IAAI,MAAM,CAAC;AAE3B,SAAO,KAAM,KAAK,MAAM,IAAI,EAAE,IAAI,MAAO,KAAK;AAChD;AAEA,SAAS,wBAAwB,QAAkB,WAA6B;AAC9E,SAAO,OAAO,IAAI,CAAC,OAAe,UAAiC;AACjE,UAAM,SAAS,eAAe,KAAK;AACnC,QAAI,aAAa,UAAU,KAAK,GAAG;AAGjC,YAAM,aAFW,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,IAE5B;AAC9B,aAAO,GAAG,MAAM,IAAI,UAAU;AAAA,IAChC;AACA,WAAO;AAAA,EACT,CAAC;AACH;",
+  "names": ["width", "height"]
 }

package/dist/jsx/linear-gradient.mjs

@@ -1,2 +1,68 @@
-import { LinearGradient } from "expo-linear-gradient";
+import { normalizeColor } from "@tamagui/core";
+import * as React from "react";
+import { View } from "react-native-web";
+import { jsx } from "react/jsx-runtime";
+function LinearGradient({
+  colors,
+  locations,
+  start,
+  end,
+  ...props
+}) {
+  const [{
+      height,
+      width
+    }, setLayout] = React.useState({
+      height: 1,
+      width: 1
+    }),
+    linearGradientBackgroundImage = React.useMemo(() => getLinearGradientBackgroundImage(colors, locations, start, end, width, height), [colors, locations, start, end, width, height]);
+  return /* @__PURE__ */jsx(View, {
+    ...props,
+    style: [props.style,
+    // @ts-ignore: [ts] Property 'backgroundImage' does not exist on type 'ViewStyle'.
+    {
+      backgroundImage: linearGradientBackgroundImage
+    }],
+    onLayout: event => {
+      const {
+        width: width2,
+        height: height2
+      } = event.nativeEvent.layout;
+      setLayout(oldLayout => width2 !== oldLayout.width || height2 !== oldLayout.height ? {
+        height: height2,
+        width: width2
+      } : oldLayout), props.onLayout && props.onLayout(event);
+    }
+  });
+}
+function getLinearGradientBackgroundImage(colors, locations, startPoint, endPoint, width = 1, height = 1) {
+  const gradientColors = calculateGradientColors(
+  // @ts-expect-error TODO fix numbers
+  colors, locations);
+  return `linear-gradient(${calculatePseudoAngle(width, height, startPoint, endPoint)}deg, ${gradientColors.join(", ")})`;
+}
+function calculatePseudoAngle(width, height, startPoint, endPoint) {
+  const getControlPoints = () => {
+      let correctedStartPoint = [0, 0];
+      Array.isArray(startPoint) && (correctedStartPoint = [startPoint[0] != null ? startPoint[0] : 0, startPoint[1] != null ? startPoint[1] : 0]);
+      let correctedEndPoint = [0, 1];
+      return Array.isArray(endPoint) && (correctedEndPoint = [endPoint[0] != null ? endPoint[0] : 0, endPoint[1] != null ? endPoint[1] : 1]), [correctedStartPoint, correctedEndPoint];
+    },
+    [start, end] = getControlPoints();
+  start[0] *= width, end[0] *= width, start[1] *= height, end[1] *= height;
+  const py = end[1] - start[1],
+    px = end[0] - start[0];
+  return 90 + Math.atan2(py, px) * 180 / Math.PI;
+}
+function calculateGradientColors(colors, locations) {
+  return colors.map((color, index) => {
+    const output = normalizeColor(color);
+    if (locations && locations[index]) {
+      const percentage = Math.max(0, Math.min(1, locations[index])) * 100;
+      return `${output} ${percentage}%`;
+    }
+    return output;
+  });
+}
 export { LinearGradient };

package/dist/jsx/linear-gradient.native.js

@@ -2,4 +2,4 @@ import { LinearGradient } from "expo-linear-gradient";
 export {
   LinearGradient
 };
-//# sourceMappingURL=linear-gradient.js.map
+//# sourceMappingURL=linear-gradient.native.js.map

package/dist/jsx/linear-gradient.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/Users/n8/tamagui/packages/linear-gradient/src/linear-gradient.ts"],
+  "sources": ["../../src/Users/n8/tamagui/packages/linear-gradient/src/linear-gradient.native.tsx"],
   "mappings": "AAAA,SAASA,sBAAsB;",
   "names": ["LinearGradient"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/linear-gradient",
-  "version": "1.94.4",
+  "version": "1.94.5",
   "sideEffects": [
     "*.css"
   ],
@@ -32,14 +32,14 @@
     }
   },
   "dependencies": {
-    "@tamagui/core": "1.94.4",
-    "@tamagui/stacks": "1.94.4"
+    "@tamagui/core": "1.94.5",
+    "@tamagui/stacks": "1.94.5"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.94.4",
+    "@tamagui/build": "1.94.5",
     "expo-linear-gradient": "^12.7.1",
     "react": "^18.2.0"
   },

package/src/linear-gradient.tsx

@@ -0,0 +1,117 @@
+export type { LinearGradientProps, LinearGradientPoint } from 'expo-linear-gradient'
+import { normalizeColor } from '@tamagui/core'
+import type { LinearGradientProps, LinearGradientPoint } from 'expo-linear-gradient'
+
+// copied from https://raw.githubusercontent.com/expo/expo/main/packages/expo-linear-gradient/src/LinearGradient.web.tsx
+
+import * as React from 'react'
+import { View } from 'react-native'
+
+export function LinearGradient({
+  colors,
+  locations,
+  start,
+  end,
+  ...props
+}: LinearGradientProps) {
+  const [{ height, width }, setLayout] = React.useState({
+    height: 1,
+    width: 1,
+  })
+
+  const linearGradientBackgroundImage = React.useMemo(() => {
+    return getLinearGradientBackgroundImage(colors, locations, start, end, width, height)
+  }, [colors, locations, start, end, width, height])
+
+  return (
+    <View
+      {...props}
+      style={[
+        props.style,
+        // @ts-ignore: [ts] Property 'backgroundImage' does not exist on type 'ViewStyle'.
+        { backgroundImage: linearGradientBackgroundImage },
+      ]}
+      onLayout={(event) => {
+        const { width, height } = event.nativeEvent.layout
+
+        setLayout((oldLayout) => {
+          // don't set new layout state unless the layout has actually changed
+          if (width !== oldLayout.width || height !== oldLayout.height) {
+            return { height, width }
+          }
+
+          return oldLayout
+        })
+
+        if (props.onLayout) {
+          props.onLayout(event)
+        }
+      }}
+    />
+  )
+}
+
+function getLinearGradientBackgroundImage(
+  colors: number[] | string[],
+  locations?: number[] | null,
+  startPoint?: LinearGradientPoint | null,
+  endPoint?: LinearGradientPoint | null,
+  width = 1,
+  height = 1
+) {
+  const gradientColors = calculateGradientColors(
+    // @ts-expect-error TODO fix numbers
+    colors,
+    locations
+  )
+  const angle = calculatePseudoAngle(width, height, startPoint, endPoint)
+  return `linear-gradient(${angle}deg, ${gradientColors.join(', ')})`
+}
+
+function calculatePseudoAngle(
+  width: number,
+  height: number,
+  startPoint?: LinearGradientPoint | null,
+  endPoint?: LinearGradientPoint | null
+) {
+  const getControlPoints = (): LinearGradientPoint[] => {
+    let correctedStartPoint: LinearGradientPoint = [0, 0]
+    if (Array.isArray(startPoint)) {
+      correctedStartPoint = [
+        startPoint[0] != null ? startPoint[0] : 0.0,
+        startPoint[1] != null ? startPoint[1] : 0.0,
+      ]
+    }
+    let correctedEndPoint: LinearGradientPoint = [0.0, 1.0]
+    if (Array.isArray(endPoint)) {
+      correctedEndPoint = [
+        endPoint[0] != null ? endPoint[0] : 0.0,
+        endPoint[1] != null ? endPoint[1] : 1.0,
+      ]
+    }
+    return [correctedStartPoint, correctedEndPoint]
+  }
+
+  const [start, end] = getControlPoints()
+  start[0] *= width
+  end[0] *= width
+  start[1] *= height
+  end[1] *= height
+  const py = end[1] - start[1]
+  const px = end[0] - start[0]
+
+  return 90 + (Math.atan2(py, px) * 180) / Math.PI
+}
+
+function calculateGradientColors(colors: string[], locations?: number[] | null) {
+  return colors.map((color: string, index: number): string | void => {
+    const output = normalizeColor(color)
+    if (locations && locations[index]) {
+      const location = Math.max(0, Math.min(1, locations[index]))
+      // Convert 0...1 to 0...100
+      const percentage = location * 100
+      return `${output} ${percentage}%`
+    }
+    return output
+  })
+}

package/types/linear-gradient.d.ts

@@ -1,3 +1,4 @@
-export { LinearGradient } from 'expo-linear-gradient';
 export type { LinearGradientProps, LinearGradientPoint } from 'expo-linear-gradient';
+import type { LinearGradientProps } from 'expo-linear-gradient';
+export declare function LinearGradient({ colors, locations, start, end, ...props }: LinearGradientProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=linear-gradient.d.ts.map

package/types/linear-gradient.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"linear-gradient.d.ts","sourceRoot":"","sources":["../src/linear-gradient.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AACrD,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA"}
+{"version":3,"file":"linear-gradient.d.ts","sourceRoot":"","sources":["../src/linear-gradient.tsx"],"names":[],"mappings":"AAAA,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAEpF,OAAO,KAAK,EAAE,mBAAmB,EAAuB,MAAM,sBAAsB,CAAA;AAOpF,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAoCrB"}

package/types/linear-gradient.native.d.ts

@@ -0,0 +1,3 @@
+export { LinearGradient } from 'expo-linear-gradient';
+export type { LinearGradientProps, LinearGradientPoint } from 'expo-linear-gradient';
+//# sourceMappingURL=linear-gradient.native.d.ts.map

package/types/linear-gradient.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"linear-gradient.native.d.ts","sourceRoot":"","sources":["../src/linear-gradient.native.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AACrD,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA"}