meticulous-ui 3.10.5 → 3.10.7

package/cjs/components/Image/Image.cjs

@@ -1,19 +1,25 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),d=require("react"),L=require("../Shimmer/Shimmer.cjs"),v=require("styled-components"),w=e=>e&&e.__esModule?e:{default:e},r=w(v),S=r.default.span`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),u=require("react"),S=require("../Shimmer/Shimmer.cjs"),_=require("styled-components"),k=e=>e&&e.__esModule?e:{default:e},r=k(_),q=r.default.span`
   position: relative;
-  display: inline-block;
+  display: ${({$isAutoHeight:e})=>e?"block":"inline-block"};
   width: ${({$width:e})=>e};
   height: ${({$height:e})=>e};
+  /* aspect-ratio reserves space for shimmer before image bytes arrive */
+  aspect-ratio: ${({$aspectRatio:e})=>e||"unset"};
+  /* minHeight ensures shimmer is visible even without an aspectRatio hint */
+  min-height: ${({$minHeight:e,$isAutoHeight:t,$aspectRatio:a})=>t&&!a?e:"unset"};
   border-radius: ${({$borderRadius:e})=>e};
   overflow: hidden;
-`,_=r.default.img`
+`,H=r.default.img`
   display: block;
   width: 100%;
-  height: 100%;
-  object-fit: cover;
+  /* height: 100% breaks in auto-height parents — use auto instead */
+  height: ${({$isAutoHeight:e})=>e?"auto":"100%"};
+  /* object-fit: cover requires both dimensions to be set */
+  object-fit: ${({$isAutoHeight:e})=>e?"initial":"cover"};
   border-radius: ${({$borderRadius:e})=>e};
   opacity: ${({$loaded:e})=>e?1:0};
   transition: opacity 0.5s ease-in-out;
-`,q=r.default.div`
+`,R=r.default.div`
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -30,8 +36,8 @@
   object-fit: cover;
   transform: scale(1.05);
   filter: ${({$loaded:e})=>e?"blur(0px)":"blur(12px)"};
-  opacity: ${({$lowLoaded:e,$loaded:i})=>e&&!i?1:0};
+  opacity: ${({$lowLoaded:e,$loaded:t})=>e&&!t?1:0};
   transition:
     opacity 0.5s ease-in-out,
     filter 0.5s ease-in-out;
-`,o=e=>{if(e!=null)return typeof e=="number"?`${e}rem`:e},k=({src:e,alt:i="",width:f="100%",height:p="100%",borderRadius:s="0.4rem",loadLow:u=!1,lowSrc:l,...h})=>{const[c,m]=d.useState(!1),[n,$]=d.useState(!1),[a,y]=d.useState(!1),b=()=>m(!0),g=()=>$(!0),x=()=>y(!0),j=u?c:n;return t.jsxs(S,{$width:o(f),$height:o(p),$borderRadius:o(s),children:[!a&&t.jsx(q,{$loaded:j,children:t.jsx(L.default,{borderRadius:s})}),u&&l&&!a&&t.jsx(I,{src:l,alt:"","aria-hidden":"true",$lowLoaded:c,$loaded:n,$borderRadius:o(s),onLoad:b}),!a&&t.jsx(_,{src:e,alt:i,"aria-hidden":i===""?"true":void 0,$loaded:n,$borderRadius:o(s),onLoad:g,onError:x,...h})]})};exports.default=k;
+`,i=e=>{if(e!=null)return typeof e=="number"?`${e}rem`:e},A=({src:e,alt:t="",width:a="100%",height:c="100%",aspectRatio:$,minHeight:f="12rem",borderRadius:s="0.4rem",loadLow:l=!1,lowSrc:h,...b})=>{const[m,g]=u.useState(!1),[n,y]=u.useState(!1),[d,v]=u.useState(!1),j=()=>g(!0),x=()=>y(!0),w=()=>v(!0),L=l?m:n,p=c==="auto";return o.jsxs(q,{$width:i(a),$height:i(c),$aspectRatio:$,$minHeight:i(f),$isAutoHeight:p,$borderRadius:i(s),children:[!d&&o.jsx(R,{$loaded:L,children:o.jsx(S.default,{borderRadius:s})}),l&&h&&!d&&o.jsx(I,{src:h,alt:"","aria-hidden":"true",$lowLoaded:m,$loaded:n,$borderRadius:i(s),onLoad:j}),!d&&o.jsx(H,{src:e,alt:t,"aria-hidden":t===""?"true":void 0,$loaded:n,$isAutoHeight:p,$borderRadius:i(s),onLoad:x,onError:w,...b})]})};exports.default=A;

package/components/Image/Image.js

@@ -1,30 +1,36 @@
-import { jsxs as x, jsx as r } from "react/jsx-runtime";
-import { useState as d } from "react";
-import v from "../Shimmer/Shimmer.js";
-import s from "styled-components";
-const j = s.span`
+import { jsxs as k, jsx as s } from "react/jsx-runtime";
+import { useState as c } from "react";
+import H from "../Shimmer/Shimmer.js";
+import r from "styled-components";
+const I = r.span`
   position: relative;
-  display: inline-block;
+  display: ${({ $isAutoHeight: e }) => e ? "block" : "inline-block"};
   width: ${({ $width: e }) => e};
   height: ${({ $height: e }) => e};
+  /* aspect-ratio reserves space for shimmer before image bytes arrive */
+  aspect-ratio: ${({ $aspectRatio: e }) => e || "unset"};
+  /* minHeight ensures shimmer is visible even without an aspectRatio hint */
+  min-height: ${({ $minHeight: e, $isAutoHeight: t, $aspectRatio: n }) => t && !n ? e : "unset"};
   border-radius: ${({ $borderRadius: e }) => e};
   overflow: hidden;
-`, I = s.img`
+`, R = r.img`
   display: block;
   width: 100%;
-  height: 100%;
-  object-fit: cover;
+  /* height: 100% breaks in auto-height parents — use auto instead */
+  height: ${({ $isAutoHeight: e }) => e ? "auto" : "100%"};
+  /* object-fit: cover requires both dimensions to be set */
+  object-fit: ${({ $isAutoHeight: e }) => e ? "initial" : "cover"};
   border-radius: ${({ $borderRadius: e }) => e};
   opacity: ${({ $loaded: e }) => e ? 1 : 0};
   transition: opacity 0.5s ease-in-out;
-`, k = s.div`
+`, A = r.div`
   position: absolute;
   inset: 0;
   z-index: 2;
   opacity: ${({ $loaded: e }) => e ? 0 : 1};
   transition: opacity 0.35s ease-out;
   pointer-events: none;
-`, S = s.img`
+`, S = r.img`
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -44,42 +50,56 @@ const j = s.span`
 }, O = ({
   src: e,
   alt: t = "",
-  width: p = "100%",
-  height: u = "100%",
+  width: n = "100%",
+  height: m = "100%",
+  aspectRatio: $,
+  minHeight: b = "12rem",
   borderRadius: i = "0.4rem",
-  loadLow: c = !1,
-  lowSrc: l,
-  ...h
+  loadLow: u = !1,
+  lowSrc: h,
+  ...f
 }) => {
-  const [m, $] = d(!1), [n, f] = d(!1), [a, y] = d(!1), b = () => $(!0), g = () => f(!0), L = () => y(!0), w = c ? m : n;
-  return /* @__PURE__ */ x(j, { $width: o(p), $height: o(u), $borderRadius: o(i), children: [
-    !a && /* @__PURE__ */ r(k, { $loaded: w, children: /* @__PURE__ */ r(v, { borderRadius: i }) }),
-    c && l && !a && /* @__PURE__ */ r(
-      S,
-      {
-        src: l,
-        alt: "",
-        "aria-hidden": "true",
-        $lowLoaded: m,
-        $loaded: n,
-        $borderRadius: o(i),
-        onLoad: b
-      }
-    ),
-    !a && /* @__PURE__ */ r(
-      I,
-      {
-        src: e,
-        alt: t,
-        "aria-hidden": t === "" ? "true" : void 0,
-        $loaded: n,
-        $borderRadius: o(i),
-        onLoad: g,
-        onError: L,
-        ...h
-      }
-    )
-  ] });
+  const [l, g] = c(!1), [a, y] = c(!1), [d, v] = c(!1), w = () => g(!0), L = () => y(!0), x = () => v(!0), j = u ? l : a, p = m === "auto";
+  return /* @__PURE__ */ k(
+    I,
+    {
+      $width: o(n),
+      $height: o(m),
+      $aspectRatio: $,
+      $minHeight: o(b),
+      $isAutoHeight: p,
+      $borderRadius: o(i),
+      children: [
+        !d && /* @__PURE__ */ s(A, { $loaded: j, children: /* @__PURE__ */ s(H, { borderRadius: i }) }),
+        u && h && !d && /* @__PURE__ */ s(
+          S,
+          {
+            src: h,
+            alt: "",
+            "aria-hidden": "true",
+            $lowLoaded: l,
+            $loaded: a,
+            $borderRadius: o(i),
+            onLoad: w
+          }
+        ),
+        !d && /* @__PURE__ */ s(
+          R,
+          {
+            src: e,
+            alt: t,
+            "aria-hidden": t === "" ? "true" : void 0,
+            $loaded: a,
+            $isAutoHeight: p,
+            $borderRadius: o(i),
+            onLoad: L,
+            onError: x,
+            ...f
+          }
+        )
+      ]
+    }
+  );
 };
 export {
   O as default

package/index.d.ts

@@ -474,7 +474,12 @@ export interface ImageProps extends React.HTMLAttributes<HTMLDivElement> {
   src: string;
   alt?: string;
   width?: string | number;
+  /** Pass `"auto"` for responsive images. Pair with `aspectRatio` so the shimmer reserves space before image bytes arrive. */
   height?: string | number;
+  /** CSS aspect-ratio hint (e.g. `"16/9"`, `"4/3"`, `"1/1"`). Required for correct shimmer behaviour when `height` is `"auto"`. */
+  aspectRatio?: string;
+  /** Fallback min-height when `height` is `"auto"` and no `aspectRatio` is given. Defaults to `"12rem"`. */
+  minHeight?: string | number;
   borderRadius?: string | number;
   loadLow?: boolean;
   lowSrc?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "3.10.5",
+  "version": "3.10.7",
   "license": "ISC",
   "description": "A comprehensive React UI component library with a wide range of customizable components, icons, colors, and utilities for building modern web applications.",
   "types": "./index.d.ts",