From ead47ea291c6c6628e6c006362321e1948f30b18 Mon Sep 17 00:00:00 2001
From: zyxd <zyxd@syncraft.ru>
Date: Thu, 11 Sep 2025 15:07:04 +0400
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82?=
 =?UTF-8?q?=20Picture?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/Picture.svelte | 33 +++++++++++++++++++++++++++++++
 src/lib/index.js                  |  3 ++-
 2 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/components/Picture.svelte

diff --git a/src/lib/components/Picture.svelte b/src/lib/components/Picture.svelte
new file mode 100644
index 0000000..7e90995
--- /dev/null
+++ b/src/lib/components/Picture.svelte
@@ -0,0 +1,33 @@
+{#if src}
+  <picture>
+    {#if src?.sources}
+      {#each Object.entries(src.sources) as [ format, srcset ]}
+        <source {srcset} type={`image/${format}`}/>
+      {/each}
+    {/if}
+    
+    <Image
+      src={src?.img?.src || src}
+      width={src?.img?.w}
+      height={src?.img?.h}
+      {...others}
+    />
+  </picture>
+{/if}
+
+<script>
+  import { Image } from './Image.svelte'
+  
+  let {
+    src,
+    ...others
+  } = $props()
+</script>
+
+<style lang="scss">
+  picture {
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
+</style>
\ No newline at end of file
diff --git a/src/lib/index.js b/src/lib/index.js
index dc083eb..5f23709 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -1 +1,2 @@
-export { default as Image } from './components/Image.svelte'
\ No newline at end of file
+export { default as Image } from './components/Image.svelte'
+export { default as Picture } from './components/Picture.svelte'
\ No newline at end of file