gemi 0.3.2 → 0.3.3

package/dist/client/index.d.ts

@@ -6,4 +6,5 @@ export { Mutation, FormError, useMutationStatus, ValidationErrors, } from "./Mut
 export { Link, useLocation, useParams, useRouter } from "./ClientRouterContext";
 export { init } from "./init";
 export { createRoot } from "./createRoot";
+export { Image } from "./Image";
 //# sourceMappingURL=index.d.ts.map

package/dist/client/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../client/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EACL,QAAQ,EACR,SAAS,EACT,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAEhF,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../client/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EACL,QAAQ,EACR,SAAS,EACT,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAEhF,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/dist/client/index.js

@@ -29453,9 +29453,60 @@ function createRoot(RootLayout) {
     }
   ) });
 }
+const defaultScreen = [390, 768, 1024];
+const defaultContainer = [100, 100, 100, 100];
+function generateImageProps(src, width, container = defaultContainer, screen = defaultScreen, quality) {
+  const baseUrl = src;
+  const widths = [...container.map((c, i) => screen[i] * c / 100), width * 2];
+  return {
+    srcSet: [
+      ...screen.map((size, i) => {
+        return `/__gemi__/image?url=${baseUrl}&q=${quality}&w=${widths[i]} ${size}${isNaN(Number(size)) ? "" : "w"}`;
+      }),
+      `/__gemi__/image?url=${baseUrl}&q=${quality}&w=${width * 2} 2x`
+    ].join(", "),
+    sources: [
+      ...container.map((c, i) => {
+        if (!screen[i]) {
+          return `${c}vw`;
+        }
+        return `(max-width: ${screen[i]}px) ${c}vw`;
+      })
+    ].join(", ")
+  };
+}
+function fillRestWithLast(arr, length) {
+  return [
+    ...arr,
+    ...Array.from({ length: length - arr.length }).fill(arr[arr.length - 1])
+  ];
+}
+const Image = (props) => {
+  const {
+    screen = defaultScreen,
+    container = defaultContainer,
+    src,
+    width,
+    quality = 80,
+    srcSet: __,
+    ...rest
+  } = props;
+  if (!src) {
+    return null;
+  }
+  const srcProps = generateImageProps(
+    src,
+    width,
+    fillRestWithLast(container, 4),
+    screen,
+    quality
+  );
+  return /* @__PURE__ */ jsx("img", { ...srcProps, width, ...rest });
+};
 export {
   Form,
   FormError,
+  Image,
   Link,
   Mutation,
   ValidationErrors,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gemi",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "devDependencies": {
     "@repo/eslint-config": "*",
     "@repo/typescript-config": "*",