@retinalabsllc/zairusjs 0.5.9 → 0.6.0

package/dist/index.js

@@ -741,8 +741,22 @@ var import_image3 = __toESM(require("next/image"));
 var import_react14 = require("@hugeicons/react");
 var import_core_free_icons3 = require("@hugeicons/core-free-icons");
 var FeatureCard = ({ feature }) => {
-  const [isLoading, setIsLoading] = (0, import_react13.useState)(!!feature.image);
-  return /* @__PURE__ */ import_react13.default.createElement("div", { className: "flex flex-col shrink-0 w-[90vw] sm:w-150 snap-center md:snap-start group cursor-grab active:cursor-grabbing" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "relative w-full aspect-16/10 bg-linear-to-br from-neutral-50 via-neutral-100 to-neutral-200 rounded-2xl overflow-hidden mb-6 flex items-center justify-center" }, /* @__PURE__ */ import_react13.default.createElement(
+  const [isBgLoading, setIsBgLoading] = (0, import_react13.useState)(true);
+  const [isFgLoading, setIsFgLoading] = (0, import_react13.useState)(!!feature.image);
+  return /* @__PURE__ */ import_react13.default.createElement("div", { className: "flex flex-col shrink-0 w-[90vw] sm:w-150 snap-center md:snap-start group cursor-grab active:cursor-grabbing" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "relative w-full aspect-16/10 bg-neutral-100 rounded-2xl overflow-hidden mb-6 flex items-center justify-center" }, /* @__PURE__ */ import_react13.default.createElement(
+    import_image3.default,
+    {
+      src: "/assets/webp/card-bg.webp",
+      alt: "Card Background",
+      fill: true,
+      sizes: "(max-width: 768px) 90vw, 600px",
+      onLoad: () => setIsBgLoading(false),
+      className: `
+                        object-cover z-0 transition-all duration-700 ease-out
+                        ${isBgLoading ? "blur-xl scale-110" : "blur-0 scale-100"}
+                    `
+    }
+  ), /* @__PURE__ */ import_react13.default.createElement(
     "div",
     {
       className: "absolute inset-0 w-full h-full pointer-events-none z-0 opacity-[0.25] mix-blend-overlay",
@@ -750,18 +764,17 @@ var FeatureCard = ({ feature }) => {
         backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`
       }
     }
-  ), isLoading && feature.image && /* @__PURE__ */ import_react13.default.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-20 bg-neutral-50/50 backdrop-blur-sm" }, /* @__PURE__ */ import_react13.default.createElement(import_react14.HugeiconsIcon, { icon: import_core_free_icons3.Loading03Icon, size: 32, className: "animate-spin text-neutral-400" })), feature.image && /* 3. Sunk the image down and right, giving it a top-left shadow to pop out */
-  /* @__PURE__ */ import_react13.default.createElement("div", { className: "absolute -bottom-6 -right-6 w-[85%] h-[85%] z-10 transition-transform duration-700 ease-out group-hover:-translate-x-2 group-hover:-translate-y-2" }, /* @__PURE__ */ import_react13.default.createElement(
+  ), isFgLoading && feature.image && /* @__PURE__ */ import_react13.default.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-20 bg-neutral-50/50 backdrop-blur-sm transition-opacity duration-300" }, /* @__PURE__ */ import_react13.default.createElement(import_react14.HugeiconsIcon, { icon: import_core_free_icons3.Loading03Icon, size: 32, className: "animate-spin text-neutral-400" })), feature.image && /* @__PURE__ */ import_react13.default.createElement("div", { className: "absolute -bottom-6 -right-6 w-[85%] h-[85%] z-10 transition-transform duration-700 ease-out group-hover:-translate-x-2 group-hover:-translate-y-2" }, /* @__PURE__ */ import_react13.default.createElement(
     import_image3.default,
     {
       src: feature.image,
       alt: feature.title,
       fill: true,
       sizes: "(max-width: 768px) 90vw, 600px",
-      onLoad: () => setIsLoading(false),
+      onLoad: () => setIsFgLoading(false),
       className: `
-                                object-cover rounded-tl-2xl shadow-[-12px_-12px_30px_rgba(0,0,0,0.06)] transition-all duration-700 ease-out
-                                ${isLoading ? "scale-110 blur-xl opacity-0" : "scale-100 blur-0 opacity-100"}
+                                object-cover object-top-left rounded-tl-2xl shadow-[-12px_-12px_30px_rgba(0,0,0,0.06)] transition-all duration-700 ease-out
+                                ${isFgLoading ? "opacity-0 blur-xl" : "opacity-100 blur-0"}
                             `
     }
   ))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "flex flex-col text-left pr-4" }, /* @__PURE__ */ import_react13.default.createElement("h3", { className: " font-serif text-xl tracking-tight text-black mb-2" }, feature.title), /* @__PURE__ */ import_react13.default.createElement("p", { className: "text-[13px] leading-relaxed text-neutral-600 max-w-[90%]" }, feature.desc)));

package/dist/index.mjs

@@ -665,8 +665,22 @@ import Image3 from "next/image";
 import { HugeiconsIcon as HugeiconsIcon5 } from "@hugeicons/react";
 import { ArrowLeft01Icon, ArrowRight01Icon, Loading03Icon as Loading03Icon2 } from "@hugeicons/core-free-icons";
 var FeatureCard = ({ feature }) => {
-  const [isLoading, setIsLoading] = useState4(!!feature.image);
-  return /* @__PURE__ */ React9.createElement("div", { className: "flex flex-col shrink-0 w-[90vw] sm:w-150 snap-center md:snap-start group cursor-grab active:cursor-grabbing" }, /* @__PURE__ */ React9.createElement("div", { className: "relative w-full aspect-16/10 bg-linear-to-br from-neutral-50 via-neutral-100 to-neutral-200 rounded-2xl overflow-hidden mb-6 flex items-center justify-center" }, /* @__PURE__ */ React9.createElement(
+  const [isBgLoading, setIsBgLoading] = useState4(true);
+  const [isFgLoading, setIsFgLoading] = useState4(!!feature.image);
+  return /* @__PURE__ */ React9.createElement("div", { className: "flex flex-col shrink-0 w-[90vw] sm:w-150 snap-center md:snap-start group cursor-grab active:cursor-grabbing" }, /* @__PURE__ */ React9.createElement("div", { className: "relative w-full aspect-16/10 bg-neutral-100 rounded-2xl overflow-hidden mb-6 flex items-center justify-center" }, /* @__PURE__ */ React9.createElement(
+    Image3,
+    {
+      src: "/assets/webp/card-bg.webp",
+      alt: "Card Background",
+      fill: true,
+      sizes: "(max-width: 768px) 90vw, 600px",
+      onLoad: () => setIsBgLoading(false),
+      className: `
+                        object-cover z-0 transition-all duration-700 ease-out
+                        ${isBgLoading ? "blur-xl scale-110" : "blur-0 scale-100"}
+                    `
+    }
+  ), /* @__PURE__ */ React9.createElement(
     "div",
     {
       className: "absolute inset-0 w-full h-full pointer-events-none z-0 opacity-[0.25] mix-blend-overlay",
@@ -674,18 +688,17 @@ var FeatureCard = ({ feature }) => {
         backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`
       }
     }
-  ), isLoading && feature.image && /* @__PURE__ */ React9.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-20 bg-neutral-50/50 backdrop-blur-sm" }, /* @__PURE__ */ React9.createElement(HugeiconsIcon5, { icon: Loading03Icon2, size: 32, className: "animate-spin text-neutral-400" })), feature.image && /* 3. Sunk the image down and right, giving it a top-left shadow to pop out */
-  /* @__PURE__ */ React9.createElement("div", { className: "absolute -bottom-6 -right-6 w-[85%] h-[85%] z-10 transition-transform duration-700 ease-out group-hover:-translate-x-2 group-hover:-translate-y-2" }, /* @__PURE__ */ React9.createElement(
+  ), isFgLoading && feature.image && /* @__PURE__ */ React9.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-20 bg-neutral-50/50 backdrop-blur-sm transition-opacity duration-300" }, /* @__PURE__ */ React9.createElement(HugeiconsIcon5, { icon: Loading03Icon2, size: 32, className: "animate-spin text-neutral-400" })), feature.image && /* @__PURE__ */ React9.createElement("div", { className: "absolute -bottom-6 -right-6 w-[85%] h-[85%] z-10 transition-transform duration-700 ease-out group-hover:-translate-x-2 group-hover:-translate-y-2" }, /* @__PURE__ */ React9.createElement(
     Image3,
     {
       src: feature.image,
       alt: feature.title,
       fill: true,
       sizes: "(max-width: 768px) 90vw, 600px",
-      onLoad: () => setIsLoading(false),
+      onLoad: () => setIsFgLoading(false),
       className: `
-                                object-cover rounded-tl-2xl shadow-[-12px_-12px_30px_rgba(0,0,0,0.06)] transition-all duration-700 ease-out
-                                ${isLoading ? "scale-110 blur-xl opacity-0" : "scale-100 blur-0 opacity-100"}
+                                object-cover object-top-left rounded-tl-2xl shadow-[-12px_-12px_30px_rgba(0,0,0,0.06)] transition-all duration-700 ease-out
+                                ${isFgLoading ? "opacity-0 blur-xl" : "opacity-100 blur-0"}
                             `
     }
   ))), /* @__PURE__ */ React9.createElement("div", { className: "flex flex-col text-left pr-4" }, /* @__PURE__ */ React9.createElement("h3", { className: " font-serif text-xl tracking-tight text-black mb-2" }, feature.title), /* @__PURE__ */ React9.createElement("p", { className: "text-[13px] leading-relaxed text-neutral-600 max-w-[90%]" }, feature.desc)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retinalabsllc/zairusjs",
-  "version": "0.5.9",
+  "version": "0.6.0",
   "description": "A perceptive, Ai data driven Next.js UI component library.",
   "author": "Retina Labs Company",
   "license": "MIT",