@multiplatform.one/components 5.0.27 → 6.0.0

package/dist/esm/images/Image/Image.spec.mjs

@@ -0,0 +1,239 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it } from "vitest";
+import { Image } from "./index.mjs";
+import { jsx } from "react/jsx-runtime";
+describe("Image", () => {
+  describe("rendering", () => {
+    it("renders an img element on web", () => {
+      const {
+        container
+      } = renderWithProviders(/* @__PURE__ */jsx(Image, {
+        src: "https://example.com/photo.jpg",
+        alt: "test",
+        width: 100,
+        height: 100
+      }));
+      const img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+    it("applies layout styles directly to the img element on web", () => {
+      const {
+        container
+      } = renderWithProviders(/* @__PURE__ */jsx(Image, {
+        src: "https://example.com/photo.jpg",
+        alt: "test",
+        width: 200,
+        height: 100
+      }));
+      const img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+    it("returns null when no source is provided", () => {
+      const {
+        container
+      } = renderWithProviders(/* @__PURE__ */jsx(Image, {
+        alt: "no source"
+      }));
+      const img = container.querySelector("img");
+      expect(img).not.toBeInTheDocument();
+    });
+    it("renders with source prop (object form)", () => {
+      const {
+        container
+      } = renderWithProviders(/* @__PURE__ */jsx(Image, {
+        source: {
+          uri: "https://example.com/photo.jpg"
+        },
+        alt: "object source",
+        width: 100,
+        height: 100
+      }));
+      const img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+  });
+  describe("web layout props on img", () => {
+    it("passes width directly to the img element", () => {
+      const {
+        container
+      } = renderWithProviders(/* @__PURE__ */jsx(Image, {
+        src: "https://example.com/photo.jpg",
+        alt: "test",
+        width: 300
+      }));
+      const img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+    it("passes aspectRatio style to the img element on web", () => {
+      const {
+        container
+      } = renderWithProviders(/* @__PURE__ */jsx(Image, {
+        src: "https://example.com/photo.jpg",
+        alt: "test",
+        width: 400,
+        aspectRatio: 16 / 9
+      }));
+      const img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+    it("passes borderRadius to the img element on web", () => {
+      const {
+        container
+      } = renderWithProviders(/* @__PURE__ */jsx(Image, {
+        src: "https://example.com/photo.jpg",
+        alt: "test",
+        width: 200,
+        height: 200,
+        borderRadius: 16
+      }));
+      const img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+  });
+  describe("SVG detection", () => {
+    it("detects .svg extension", () => {
+      const {
+        container
+      } = renderWithProviders(/* @__PURE__ */jsx(Image, {
+        src: "https://example.com/icon.svg",
+        alt: "svg",
+        width: 100,
+        height: 100
+      }));
+      const img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+    it("detects .svg with query params", () => {
+      const {
+        container
+      } = renderWithProviders(/* @__PURE__ */jsx(Image, {
+        src: "https://example.com/icon.svg?v=2",
+        alt: "svg with params",
+        width: 100,
+        height: 100
+      }));
+      const img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+    it("detects .svg with hash fragment", () => {
+      const {
+        container
+      } = renderWithProviders(/* @__PURE__ */jsx(Image, {
+        src: "https://example.com/icon.svg#section",
+        alt: "svg with hash",
+        width: 100,
+        height: 100
+      }));
+      const img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+    it("detects data:image/svg+xml", () => {
+      const {
+        container
+      } = renderWithProviders(/* @__PURE__ */jsx(Image, {
+        src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3C/svg%3E",
+        alt: "data svg",
+        width: 100,
+        height: 100
+      }));
+      const img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+    it("detects svg via the svg prop", () => {
+      const {
+        container
+      } = renderWithProviders(/* @__PURE__ */jsx(Image, {
+        src: "https://example.com/image",
+        alt: "forced svg",
+        svg: true,
+        width: 100,
+        height: 100
+      }));
+      const img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+    it("does not detect non-svg images as svg", () => {
+      const {
+        container
+      } = renderWithProviders(/* @__PURE__ */jsx(Image, {
+        src: "https://example.com/photo.jpg",
+        alt: "jpg",
+        width: 100,
+        height: 100
+      }));
+      const img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+  });
+  describe("alt text", () => {
+    it("sets alt attribute on the img", () => {
+      const {
+        container
+      } = renderWithProviders(/* @__PURE__ */jsx(Image, {
+        src: "https://example.com/photo.jpg",
+        alt: "descriptive alt",
+        width: 100,
+        height: 100
+      }));
+      const img = container.querySelector("img");
+      expect(img).toHaveAttribute("alt", "descriptive alt");
+    });
+  });
+  describe("objectFit", () => {
+    it("renders with objectFit cover", () => {
+      const {
+        container
+      } = renderWithProviders(/* @__PURE__ */jsx(Image, {
+        src: "https://example.com/photo.jpg",
+        alt: "cover",
+        width: 200,
+        height: 200,
+        objectFit: "cover"
+      }));
+      const img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+    it("renders with objectFit contain", () => {
+      const {
+        container
+      } = renderWithProviders(/* @__PURE__ */jsx(Image, {
+        src: "https://example.com/photo.jpg",
+        alt: "contain",
+        width: 200,
+        height: 200,
+        objectFit: "contain"
+      }));
+      const img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+  });
+  describe("event handlers", () => {
+    it("accepts onLoad handler", () => {
+      const {
+        container
+      } = renderWithProviders(/* @__PURE__ */jsx(Image, {
+        src: "https://example.com/photo.jpg",
+        alt: "test",
+        width: 100,
+        height: 100,
+        onLoad: () => {}
+      }));
+      const img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+    it("accepts onError handler", () => {
+      const {
+        container
+      } = renderWithProviders(/* @__PURE__ */jsx(Image, {
+        src: "https://example.com/photo.jpg",
+        alt: "test",
+        width: 100,
+        height: 100,
+        onError: () => {}
+      }));
+      const img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+  });
+});
+//# sourceMappingURL=Image.spec.mjs.map

package/dist/esm/images/Image/Image.spec.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["renderWithProviders","describe","expect","it","Image","jsx","container","src","alt","width","height","img","querySelector","toBeInTheDocument","not","source","uri","aspectRatio","borderRadius","svg","toHaveAttribute","objectFit","onLoad","onError"],"sources":["../../../../src/images/Image/Image.spec.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/images/Image/Image.spec.native.js

@@ -0,0 +1,239 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it } from "vitest";
+import { Image } from "./index.native.js";
+describe("Image", function () {
+  describe("rendering", function () {
+    it("renders an img element on web", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(Image, {
+        src: "https://example.com/photo.jpg",
+        alt: "test",
+        width: 100,
+        height: 100
+      }));
+      var img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+    it("applies layout styles directly to the img element on web", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(Image, {
+        src: "https://example.com/photo.jpg",
+        alt: "test",
+        width: 200,
+        height: 100
+      }));
+      var img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+    it("returns null when no source is provided", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(Image, {
+        alt: "no source"
+      }));
+      var img = container.querySelector("img");
+      expect(img).not.toBeInTheDocument();
+    });
+    it("renders with source prop (object form)", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(Image, {
+        source: {
+          uri: "https://example.com/photo.jpg"
+        },
+        alt: "object source",
+        width: 100,
+        height: 100
+      }));
+      var img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+  });
+  describe("web layout props on img", function () {
+    it("passes width directly to the img element", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(Image, {
+        src: "https://example.com/photo.jpg",
+        alt: "test",
+        width: 300
+      }));
+      var img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+    it("passes aspectRatio style to the img element on web", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(Image, {
+        src: "https://example.com/photo.jpg",
+        alt: "test",
+        width: 400,
+        aspectRatio: 16 / 9
+      }));
+      var img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+    it("passes borderRadius to the img element on web", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(Image, {
+        src: "https://example.com/photo.jpg",
+        alt: "test",
+        width: 200,
+        height: 200,
+        borderRadius: 16
+      }));
+      var img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+  });
+  describe("SVG detection", function () {
+    it("detects .svg extension", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(Image, {
+        src: "https://example.com/icon.svg",
+        alt: "svg",
+        width: 100,
+        height: 100
+      }));
+      var img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+    it("detects .svg with query params", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(Image, {
+        src: "https://example.com/icon.svg?v=2",
+        alt: "svg with params",
+        width: 100,
+        height: 100
+      }));
+      var img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+    it("detects .svg with hash fragment", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(Image, {
+        src: "https://example.com/icon.svg#section",
+        alt: "svg with hash",
+        width: 100,
+        height: 100
+      }));
+      var img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+    it("detects data:image/svg+xml", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(Image, {
+        src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3C/svg%3E",
+        alt: "data svg",
+        width: 100,
+        height: 100
+      }));
+      var img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+    it("detects svg via the svg prop", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(Image, {
+        src: "https://example.com/image",
+        alt: "forced svg",
+        svg: true,
+        width: 100,
+        height: 100
+      }));
+      var img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+    it("does not detect non-svg images as svg", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(Image, {
+        src: "https://example.com/photo.jpg",
+        alt: "jpg",
+        width: 100,
+        height: 100
+      }));
+      var img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+  });
+  describe("alt text", function () {
+    it("sets alt attribute on the img", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(Image, {
+        src: "https://example.com/photo.jpg",
+        alt: "descriptive alt",
+        width: 100,
+        height: 100
+      }));
+      var img = container.querySelector("img");
+      expect(img).toHaveAttribute("alt", "descriptive alt");
+    });
+  });
+  describe("objectFit", function () {
+    it("renders with objectFit cover", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(Image, {
+        src: "https://example.com/photo.jpg",
+        alt: "cover",
+        width: 200,
+        height: 200,
+        objectFit: "cover"
+      }));
+      var img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+    it("renders with objectFit contain", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(Image, {
+        src: "https://example.com/photo.jpg",
+        alt: "contain",
+        width: 200,
+        height: 200,
+        objectFit: "contain"
+      }));
+      var img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+  });
+  describe("event handlers", function () {
+    it("accepts onLoad handler", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(Image, {
+        src: "https://example.com/photo.jpg",
+        alt: "test",
+        width: 100,
+        height: 100,
+        onLoad: function onLoad() {}
+      }));
+      var img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+    it("accepts onError handler", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(Image, {
+        src: "https://example.com/photo.jpg",
+        alt: "test",
+        width: 100,
+        height: 100,
+        onError: function onError() {}
+      }));
+      var img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+    });
+  });
+});
+//# sourceMappingURL=Image.spec.native.js.map

package/dist/esm/images/Image/Image.spec.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","renderWithProviders","describe","expect","it","Image","container","src","alt","width","height","img","querySelector","toBeInTheDocument","not","source","uri","aspectRatio","borderRadius","svg","toHaveAttribute","objectFit","onLoad","onError"],"sources":["../../../../src/images/Image/Image.spec.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,2BAA2B;AACpC,SAASC,mBAAkB,uCAAU;AACrC,SAASC,QAAA,EAAAC,MAAa,EAAAC,EAAA;AAMd,SAAAC,KAAA;AAJRH,QAAA,CAAS,SAAS,YAAM;EACtBA,QAAA,CAAS,aAAa,YAAM;IAC1BE,EAAA,CAAG,iCAAiC,YAAM;MACxC;QAAME;MAAE,IAAUL,mBAAI,gBAAAD,IAAA,CAAAK,KAAA;QACpBE,GAAA,iCAAW;QACbC,GAAA;QACAC,KAAM,KAAM;QACZC,MAAO,EAAG;MACX;MAED,IAAGC,GAAA,GAAAL,SAAA,CAAAM,aAAA;MACDT,MAAM,CAAAQ,GAAE,EAAAE,iBAAc;IAAA;IAC2DT,EACjF;MACA;QAAME;MAAM,IAAAL,mBAAwB,gBAAKD,IAAA,CAAAK,KAAA;QACzCE,GAAA,EAAO,+BAAuB;QAC/BC,GAAA;QAEEC,KAAA;QACDC,MAAQ;MACR;MACA,IAAAC,GAAO,GAAGL,SAAM,CAAAM,aAAA,CAAkB;MACnCT,MAAA,CAAAQ,GAAA,EAAAE,iBAAA;IAED;IACET,EAAA,0CAAsB;MAAA,IACpB;QAAAE;MAAA,IAAAL,mBAAA,gBAAAD,IAAA,CAAAK,KAAA;QAAAG,GAAC;MAAA;MAAA,IAAAG,GACC,GAAAL,SAAU,CAAAM,aAAK;MAAgCT,MAC/C,CAAAQ,GAAA,CAAI,CAAAG,GAAA,CAAAD,iBAAA;IAAA;IACGT,EAAA,yCACC;MAAA;QAAAE;MAAA,IAAAL,mBAAA,gBAAAD,IAAA,CAAAK,KAAA;QACVU,MAAA;UACFC,GAAA;QACA;QACAR,GAAA,EAAO,eAAK;QACbC,KAAA;QACFC,MAAA;MAED;MACE,IAAGC,GAAA,GAAAL,SAAA,CAAAM,aAAA;MACDT,MAAM,CAAAQ,GAAE,EAAAE,iBAAc;IAAA;EAC8C;EAEpEX,QAAA,0BAAsB,cAAmB;IACzCE,EAAA,2CAA8B;MAC/B;QAAAE;MAAA,IAAAL,mBAAA,gBAAAD,IAAA,CAAAK,KAAA;QAEEE,GAAA;QACDC,GAAA,EAAM,MAAE;QACNC,KAAA;MACF;MACA,IAAAE,GAAM,GAAAL,SAAM,CAAAM,aAAU,MAAc;MACpCT,MAAA,CAAOQ,GAAG,EAAEE,iBAAA,CAAkB;IAChC,CAAC;IAEDT,EAAA,CAAG,oDAAiD,cAAM;MACxD;QAAME;MAAE,IAAUL,mBAAI,gBAAAD,IAAA,CAAAK,KAAA;QACpBE,GAAA;QAAAC,GAAC;QAAAC,KAAA;QAAAQ,WACK;MAAA;MACA,IAAAN,GACJ,GAAAL,SAAO,CAAAM,aAAA;MAAAT,MACP,CAAAQ,GAAA,EAAAE,iBAAQ;IAAA;IACMT,EAAA;MAAA,IAChB;QAAAE;MAAA,IAAAL,mBAAA,gBAAAD,IAAA,CAAAK,KAAA;QACFE,GAAA;QACAC,GAAA,EAAM,MAAM;QACZC,KAAO,KAAK;QACbC,MAAA;QACFQ,YAAA;MAED;MACE,IAAGP,GAAA,GAAAL,SAAA,CAAAM,aAAgC;MACjCT,MAAM,CAAAQ,GAAE,EAAAE,iBAAc;IAAA;EACyD;EAE/EX,QAAA,gBAAY,EAAU;IACtBE,EAAA,yBAAY,cAAkB;MAC/B;QAAAE;MAAA,IAAAL,mBAAA,gBAAAD,IAAA,CAAAK,KAAA;QAEEE,GAAA,gCAAkC;QACnCC,GAAA,EAAM,KAAE;QACNC,KAAA;QAAAC,MAAC;MAAA;MAAA,IAAAC,GACC,GAAAL,SAAI,CAAAM,aAAA;MAAAT,MACJ,CAAAQ,GAAA,CAAI,CAAAE,iBAAA;IAAA;IACGT,EAAA,iCACC;MAAA;QAAAE;MAAA,IAAAL,mBAAA,gBAAAD,IAAA,CAAAK,KAAA;QACVE,GAAA;QACFC,GAAA;QACAC,KAAM,KAAM;QACZC,MAAO,EAAG;MACX;MAED,IAAGC,GAAA,GAAAL,SAAA,CAAAM,aAAA,MAAmC;MACpCT,MAAM,CAAAQ,GAAE,EAAAE,iBAAc;IAAA;IACpBT,EAAA,kCAAC;MAAA;QAAAE;MAAA,IAAAL,mBAAA,gBAAAD,IAAA,CAAAK,KAAA;QAAAE,GAAA,EACC,sCAAI;QAAAC,GAAA,EACJ,eAAI;QAAAC,KACJ;QAAOC,MACP;MAAQ;MAAA,IACVC,GAAA,GAAAL,SAAA,CAAAM,aAAA;MACFT,MAAA,CAAAQ,GAAA,EAAAE,iBAAA;IACA;IACAT,EAAA,6BAAY,EAAkB;MAC/B;QAAAE;MAAA,IAAAL,mBAAA,gBAAAD,IAAA,CAAAK,KAAA;QAEEE,GAAA,oGAAoC;QACrCC,GAAA,EAAM,UAAE;QACNC,KAAA;QAAAC,MAAC;MAAA;MAAA,IAAAC,GACC,GAAAL,SAAI,CAAAM,aAAA;MAAAT,MACJ,CAAAQ,GAAA,CAAI,CAAAE,iBAAA;IAAA;IACGT,EAAA,+BACC;MAAA;QAAAE;MAAA,IAAAL,mBAAA,gBAAAD,IAAA,CAAAK,KAAA;QACVE,GAAA;QACFC,GAAA;QACAW,GAAA,EAAM;QACNV,KAAO,KAAK;QACbC,MAAA;MAED,CAAG;MACD,IAAAC,GAAM,GAAEL,SAAU,CAAAM,aAAI;MAAAT,MACpB,CAAAQ,GAAA,EAAAE,iBAAC,EAAM;IAA8E,EACvF;IACAT,EAAA,wCAAoC,EAAK;MACzC;QAAAE;MAAY,IAAAL,mBAAkB,gBAAAD,IAAA,CAAAK,KAAA;QAC/BE,GAAA;QAEEC,GAAA;QACDC,KAAM,EAAE;QACNC,MAAA;MACF;MACA,IAAAC,GAAM,GAAAL,SAAM,CAAAM,aAAU,MAAc;MACpCT,MAAA,CAAOQ,GAAG,EAAEE,iBAAA,CAAkB;IAChC,CAAC;EACH,CAAC;EAEDX,QAAA,CAAS,YAAY,YAAM;IACzBE,EAAA,CAAG,iCAAiC,YAAM;MACxC;QAAME;MAAE,IAAUL,mBAAI,gBAAAD,IAAA,CAAAK,KAAA;QACpBE,GAAA;QAAAC,GAAC;QAAAC,KAAA;QAAAC,MACC;MAAI;MACA,IAAAC,GACJ,GAAAL,SAAO,CAAAM,aAAA;MAAAT,MACP,CAAAQ,GAAA,EAAAS,eAAQ;IAAA;EAAA;EACVlB,QACF;IACAE,EAAA,+BAAsB,cAAmB;MACzC;QAAAE;MAAY,IAAAL,mBAAuB,gBAAiBD,IAAA,CAAAK,KAAA;QACrDE,GAAA;QACFC,GAAA;QAEDC,KAAS;QACJC,MAAA;QACDW,SAAQ;MAAc,EACpB;MAAA,IAACV,GAAA,GAAAL,SAAA,CAAAM,aAAA;MAAAT,MAAA,CAAAQ,GAAA,EAAAE,iBAAA;IAAA;IACKT,EAAA,iCACA;MAAA;QACJE;MAAO,IAAAL,mBAAA,gBAAAD,IAAA,CAAAK,KAAA;QAAAE,GAAA,EACP,+BAAQ;QAAAC,GAAA,EACR;QAAUC,KAAA;QACZC,MAAA;QACFW,SAAA;MACA;MACA,IAAAV,GAAO,GAAGL,SAAE,CAAAM,aAAkB;MAC/BT,MAAA,CAAAQ,GAAA,EAAAE,iBAAA;IAED;EACE;EAAsBX,QACpB;IAAAE,EAAA,yBAAC;MAAA;QAAAE;MAAA,IAAAL,mBAAA,gBAAAD,IAAA,CAAAK,KAAA;QAAAE,GAAA,EACC,+BAAI;QAAAC,GAAA,EACJ,MAAI;QAAAC,KACJ;QAAOC,MACP;QAAQY,MACR,WAAUA,OAAA;MAAA,EACZ;MACF,IAAAX,GAAA,GAAAL,SAAA,CAAAM,aAAA;MACAT,MAAM,CAAAQ,GAAA,EAAME,iBAAU;IACtB;IACFT,EAAC;MACF;QAAAE;MAAA,IAAAL,mBAAA,gBAAAD,IAAA,CAAAK,KAAA;QAEDE,GAAS,iCAAwB;QAC5BC,GAAA;QACDC,KAAM,EAAE;QACNC,MAAA;QAAAa,OAAC,WAAAA,QAAA;MAAA;MACK,IAAAZ,GACJ,GAAAL,SAAI,CAAAM,aAAA;MAAAT,MACJ,CAAAQ,GAAA,EAAAE,iBAAO;IAAA;EACC;AACM","ignoreList":[]}

package/dist/esm/images/Image/Image.stories.mjs

@@ -0,0 +1,147 @@
+import { View, YStack } from "tamagui";
+import { Image } from "./index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const LANDSCAPE_IMG = "https://picsum.photos/id/10/800/400";
+const SQUARE_IMG = "https://picsum.photos/id/20/400/400";
+const SVG_IMG = "https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg";
+const GIF_IMG = "https://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating_earth_%28large%29.gif";
+const meta = {
+  title: "Components/Image",
+  component: Image,
+  parameters: {
+    status: {
+      type: "beta"
+    }
+  }
+};
+var Image_stories_default = meta;
+const BothDimensions = {
+  args: {
+    src: LANDSCAPE_IMG,
+    alt: "Landscape with both dimensions",
+    width: 400,
+    height: 200
+  }
+};
+const WidthOnly = {
+  args: {
+    src: LANDSCAPE_IMG,
+    alt: "Landscape with width only",
+    width: 400
+  }
+};
+const HeightOnly = {
+  args: {
+    src: SQUARE_IMG,
+    alt: "Square with height only",
+    height: 200
+  }
+};
+const WidthWithAspectRatio = {
+  args: {
+    src: LANDSCAPE_IMG,
+    alt: "Landscape with width and aspect ratio",
+    width: 400,
+    aspectRatio: 16 / 9
+  }
+};
+const FullWidthResponsive = {
+  render: () => /* @__PURE__ */jsx(View, {
+    width: "100%",
+    maxWidth: 600,
+    children: /* @__PURE__ */jsx(Image, {
+      src: LANDSCAPE_IMG,
+      alt: "Full width responsive",
+      width: "100%",
+      aspectRatio: 2
+    })
+  })
+};
+const ObjectFitCover = {
+  args: {
+    src: LANDSCAPE_IMG,
+    alt: "Cover fit",
+    width: 300,
+    height: 300,
+    objectFit: "cover"
+  }
+};
+const ObjectFitContain = {
+  args: {
+    src: LANDSCAPE_IMG,
+    alt: "Contain fit",
+    width: 300,
+    height: 300,
+    objectFit: "contain"
+  }
+};
+const SvgImage = {
+  args: {
+    src: SVG_IMG,
+    alt: "SVG logo",
+    width: 200,
+    height: 200
+  }
+};
+const GifImage = {
+  args: {
+    src: GIF_IMG,
+    alt: "Animated globe",
+    width: 200,
+    height: 200
+  }
+};
+const NoDimensions = {
+  args: {
+    src: SQUARE_IMG,
+    alt: "No explicit dimensions"
+  }
+};
+const WithBorderRadius = {
+  args: {
+    src: LANDSCAPE_IMG,
+    alt: "Rounded image",
+    width: 300,
+    height: 200,
+    borderRadius: 16
+  }
+};
+const Gallery = {
+  render: () => /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    padding: "$4",
+    maxWidth: 800,
+    children: [/* @__PURE__ */jsx(Image, {
+      src: LANDSCAPE_IMG,
+      alt: "Both dimensions",
+      width: 400,
+      height: 200,
+      testID: "gallery-both"
+    }), /* @__PURE__ */jsx(Image, {
+      src: LANDSCAPE_IMG,
+      alt: "Width only",
+      width: 400,
+      testID: "gallery-width-only"
+    }), /* @__PURE__ */jsx(Image, {
+      src: LANDSCAPE_IMG,
+      alt: "Width + aspect ratio",
+      width: 400,
+      aspectRatio: 16 / 9,
+      testID: "gallery-aspect-ratio"
+    }), /* @__PURE__ */jsx(Image, {
+      src: SVG_IMG,
+      alt: "SVG",
+      width: 100,
+      height: 100,
+      testID: "gallery-svg"
+    }), /* @__PURE__ */jsx(Image, {
+      src: GIF_IMG,
+      alt: "GIF",
+      width: 150,
+      height: 150,
+      testID: "gallery-gif"
+    })]
+  })
+};
+export { BothDimensions, FullWidthResponsive, Gallery, GifImage, HeightOnly, NoDimensions, ObjectFitContain, ObjectFitCover, SvgImage, WidthOnly, WidthWithAspectRatio, WithBorderRadius, Image_stories_default as default };
+//# sourceMappingURL=Image.stories.mjs.map

package/dist/esm/images/Image/Image.stories.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","YStack","Image","jsx","jsxs","LANDSCAPE_IMG","SQUARE_IMG","SVG_IMG","GIF_IMG","meta","title","component","parameters","status","type","Image_stories_default","BothDimensions","args","src","alt","width","height","WidthOnly","HeightOnly","WidthWithAspectRatio","aspectRatio","FullWidthResponsive","render","maxWidth","children","ObjectFitCover","objectFit","ObjectFitContain","SvgImage","GifImage","NoDimensions","WithBorderRadius","borderRadius","Gallery","gap","padding","testID"],"sources":["../../../../src/images/Image/Image.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}