barua-ui 0.3.0 → 0.3.1

package/css/components/media.css

@@ -232,6 +232,34 @@
     opacity: 0;
     transition: opacity var(--b-duration-slow) var(--b-ease-out);
   }
+  /* ---- Blur-up ------------------------------------------------------------
+   *
+   * A shimmer says "something is coming". A blurred copy of the actual picture
+   * says "this is what is coming", which is a different and better promise —
+   * the layout is right, the colours are right, and the photograph resolves
+   * rather than appearing.
+   *
+   * The placeholder is a thumbnail small enough to inline: a 32px-wide JPEG is
+   * around a kilobyte, so it costs nothing and arrives with the markup. Give
+   * it as a data URI on --b-img-placeholder and mark the host with
+   * data-placeholder, which is what tells the shimmer to stand down.
+   */
+  .b-async-img[data-placeholder]::before { display: none; }
+
+  .b-async-img[data-placeholder]::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: var(--b-img-placeholder) center / cover no-repeat;
+    /* Scaled up because a blur samples past the edges and would otherwise
+       leave a soft border all the way round. */
+    filter: blur(14px);
+    transform: scale(1.1);
+    transition: opacity var(--b-duration-slow) var(--b-ease-out);
+    pointer-events: none;
+  }
+  .b-async-img[data-placeholder].is-loaded::after { opacity: 0; }
+
   .b-async-img.is-loaded::before { display: none; }
   .b-async-img.is-loaded img { opacity: 1; }
 

package/dist/index.cjs

@@ -2395,7 +2395,32 @@ var OnboardingFeature = (0, import_react19.forwardRef)(
 var import_react20 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var MediaPlaceholder = block("div", "b-media-placeholder", "MediaPlaceholder");
-var AsyncImage = block("span", "b-async-img", "AsyncImage");
+var AsyncImage = (0, import_react20.forwardRef)(function AsyncImage2({ src, alt, placeholder, aspect, className, style, ...rest }, ref) {
+  const [loaded, setLoaded] = (0, import_react20.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "span",
+    {
+      className: cn("b-async-img", loaded && "is-loaded", className),
+      "data-placeholder": placeholder ? "" : void 0,
+      style: {
+        ...aspect ? { aspectRatio: aspect } : null,
+        ...placeholder ? { ["--b-img-placeholder"]: `url("${placeholder}")` } : null,
+        ...style
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "img",
+        {
+          ref,
+          src,
+          alt,
+          onLoad: () => setLoaded(true),
+          onError: () => setLoaded(true),
+          ...rest
+        }
+      )
+    }
+  );
+});
 var Web = block("div", "b-web", "Web");
 var Video = block("video", "b-video", "Video");
 var Audio = block("div", "b-audio", "Audio");