@retinalabsllc/zairusjs 20.1.35 → 21.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +36 -14
- package/dist/index.mjs +36 -14
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -496,11 +496,13 @@ interface ScrollFeature {
|
|
|
496
496
|
title: string;
|
|
497
497
|
desc: string;
|
|
498
498
|
image?: string;
|
|
499
|
+
imagePosition?: 'left' | 'right';
|
|
499
500
|
}
|
|
500
501
|
interface FeatureScrollProps {
|
|
501
502
|
tagline: string;
|
|
502
503
|
headline: React.ReactNode;
|
|
503
504
|
features: ScrollFeature[];
|
|
505
|
+
expand?: boolean;
|
|
504
506
|
}
|
|
505
507
|
declare const FeatureScroll: React.FC<FeatureScrollProps>;
|
|
506
508
|
|
package/dist/index.d.ts
CHANGED
|
@@ -496,11 +496,13 @@ interface ScrollFeature {
|
|
|
496
496
|
title: string;
|
|
497
497
|
desc: string;
|
|
498
498
|
image?: string;
|
|
499
|
+
imagePosition?: 'left' | 'right';
|
|
499
500
|
}
|
|
500
501
|
interface FeatureScrollProps {
|
|
501
502
|
tagline: string;
|
|
502
503
|
headline: React.ReactNode;
|
|
503
504
|
features: ScrollFeature[];
|
|
505
|
+
expand?: boolean;
|
|
504
506
|
}
|
|
505
507
|
declare const FeatureScroll: React.FC<FeatureScrollProps>;
|
|
506
508
|
|
package/dist/index.js
CHANGED
|
@@ -3186,6 +3186,7 @@ var import_core_free_icons19 = require("@hugeicons/core-free-icons");
|
|
|
3186
3186
|
var FeatureCard = ({ feature, bgImage }) => {
|
|
3187
3187
|
const [isBgLoading, setIsBgLoading] = (0, import_react50.useState)(true);
|
|
3188
3188
|
const [isFgLoading, setIsFgLoading] = (0, import_react50.useState)(!!feature.image);
|
|
3189
|
+
const isLeft = feature.imagePosition === "left";
|
|
3189
3190
|
return /* @__PURE__ */ import_react50.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_react50.default.createElement("div", { className: "relative w-full aspect-16/10 bg-stone-100 rounded-2xl overflow-hidden mb-6 flex items-center justify-center" }, /* @__PURE__ */ import_react50.default.createElement(
|
|
3190
3191
|
import_image3.default,
|
|
3191
3192
|
{
|
|
@@ -3207,22 +3208,32 @@ var FeatureCard = ({ feature, bgImage }) => {
|
|
|
3207
3208
|
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")`
|
|
3208
3209
|
}
|
|
3209
3210
|
}
|
|
3210
|
-
), isFgLoading && feature.image && /* @__PURE__ */ import_react50.default.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-20 bg-stone-50/50 backdrop-blur-sm transition-opacity duration-300" }, /* @__PURE__ */ import_react50.default.createElement(import_react51.HugeiconsIcon, { icon: import_core_free_icons19.Loading03Icon, size: 32, className: "animate-spin text-stone-400" })), feature.image && /* @__PURE__ */ import_react50.default.createElement(
|
|
3211
|
-
|
|
3211
|
+
), isFgLoading && feature.image && /* @__PURE__ */ import_react50.default.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-20 bg-stone-50/50 backdrop-blur-sm transition-opacity duration-300" }, /* @__PURE__ */ import_react50.default.createElement(import_react51.HugeiconsIcon, { icon: import_core_free_icons19.Loading03Icon, size: 32, className: "animate-spin text-stone-400" })), feature.image && /* @__PURE__ */ import_react50.default.createElement(
|
|
3212
|
+
"div",
|
|
3212
3213
|
{
|
|
3213
|
-
src: feature.image,
|
|
3214
|
-
alt: feature.title,
|
|
3215
|
-
fill: true,
|
|
3216
|
-
sizes: "(max-width: 768px) 90vw, 600px",
|
|
3217
|
-
onLoad: () => setIsFgLoading(false),
|
|
3218
3214
|
className: `
|
|
3219
|
-
|
|
3215
|
+
absolute -bottom-6 w-[85%] h-[85%] z-10 transition-transform duration-700 ease-out
|
|
3216
|
+
${isLeft ? "-left-6 group-hover:translate-x-2 group-hover:-translate-y-2" : "-right-6 group-hover:-translate-x-2 group-hover:-translate-y-2"}
|
|
3217
|
+
`
|
|
3218
|
+
},
|
|
3219
|
+
/* @__PURE__ */ import_react50.default.createElement(
|
|
3220
|
+
import_image3.default,
|
|
3221
|
+
{
|
|
3222
|
+
src: feature.image,
|
|
3223
|
+
alt: feature.title,
|
|
3224
|
+
fill: true,
|
|
3225
|
+
sizes: "(max-width: 768px) 90vw, 600px",
|
|
3226
|
+
onLoad: () => setIsFgLoading(false),
|
|
3227
|
+
className: `
|
|
3228
|
+
object-cover transition-all duration-700 ease-out
|
|
3229
|
+
${isLeft ? "object-top-right rounded-tr-2xl shadow-[12px_-12px_30px_rgba(0,0,0,0.06)]" : "object-top-left rounded-tl-2xl shadow-[-12px_-12px_30px_rgba(0,0,0,0.06)]"}
|
|
3220
3230
|
${isFgLoading ? "opacity-0 blur-xl" : "opacity-100 blur-0"}
|
|
3221
3231
|
`
|
|
3222
|
-
|
|
3223
|
-
|
|
3232
|
+
}
|
|
3233
|
+
)
|
|
3234
|
+
)), /* @__PURE__ */ import_react50.default.createElement("div", { className: "flex flex-col text-left pr-4" }, /* @__PURE__ */ import_react50.default.createElement("h3", { className: "text-xl tracking-tight text-black mb-2" }, feature.title), /* @__PURE__ */ import_react50.default.createElement("p", { className: "text-sm leading-relaxed text-stone-600 max-w-[90%]" }, feature.desc)));
|
|
3224
3235
|
};
|
|
3225
|
-
var FeatureScroll = ({ tagline, headline, features }) => {
|
|
3236
|
+
var FeatureScroll = ({ tagline, headline, features, expand = false }) => {
|
|
3226
3237
|
const scrollRef = (0, import_react50.useRef)(null);
|
|
3227
3238
|
const [canScrollLeft, setCanScrollLeft] = (0, import_react50.useState)(false);
|
|
3228
3239
|
const [canScrollRight, setCanScrollRight] = (0, import_react50.useState)(true);
|
|
@@ -3247,9 +3258,13 @@ var FeatureScroll = ({ tagline, headline, features }) => {
|
|
|
3247
3258
|
const bgImages = [
|
|
3248
3259
|
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_7.avif",
|
|
3249
3260
|
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_6.avif",
|
|
3250
|
-
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_1.avif"
|
|
3261
|
+
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_1.avif",
|
|
3262
|
+
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_2.avif",
|
|
3263
|
+
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_3.avif",
|
|
3264
|
+
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_4.avif"
|
|
3251
3265
|
];
|
|
3252
|
-
|
|
3266
|
+
const maxItems = expand ? 6 : 3;
|
|
3267
|
+
return /* @__PURE__ */ import_react50.default.createElement("section", { className: "py-24 w-full flex justify-center relative z-10 overflow-hidden" }, /* @__PURE__ */ import_react50.default.createElement("div", { className: "max-w-6xl w-full flex flex-col px-4 md:px-8" }, /* @__PURE__ */ import_react50.default.createElement("div", { className: "flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12" }, /* @__PURE__ */ import_react50.default.createElement("div", { className: "relative z-10 text-left" }, /* @__PURE__ */ import_react50.default.createElement("span", { className: "text-xs tracking-[0.4em] text-stone-500 block mb-4" }, tagline), /* @__PURE__ */ import_react50.default.createElement("h2", { className: "text-3xl tracking-tight text-black leading-[1.05]" }, headline)), /* @__PURE__ */ import_react50.default.createElement("div", { className: "hidden md:flex items-center gap-3" }, /* @__PURE__ */ import_react50.default.createElement(
|
|
3253
3268
|
"button",
|
|
3254
3269
|
{
|
|
3255
3270
|
onClick: () => scroll("left"),
|
|
@@ -3272,7 +3287,14 @@ var FeatureScroll = ({ tagline, headline, features }) => {
|
|
|
3272
3287
|
onScroll: checkScroll,
|
|
3273
3288
|
className: "flex gap-6 overflow-x-auto snap-x snap-mandatory [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] scrollbar-none pb-8 -mx-4 px-4 md:mx-0 md:px-0"
|
|
3274
3289
|
},
|
|
3275
|
-
features.slice(0,
|
|
3290
|
+
features.slice(0, maxItems).map((feature, idx) => /* @__PURE__ */ import_react50.default.createElement(
|
|
3291
|
+
FeatureCard,
|
|
3292
|
+
{
|
|
3293
|
+
key: idx,
|
|
3294
|
+
feature,
|
|
3295
|
+
bgImage: bgImages[idx % bgImages.length]
|
|
3296
|
+
}
|
|
3297
|
+
))
|
|
3276
3298
|
), /* @__PURE__ */ import_react50.default.createElement("div", { className: "flex md:hidden items-center justify-center gap-4 mt-2" }, /* @__PURE__ */ import_react50.default.createElement(
|
|
3277
3299
|
"button",
|
|
3278
3300
|
{
|
package/dist/index.mjs
CHANGED
|
@@ -3185,6 +3185,7 @@ import { ArrowLeft01Icon as ArrowLeft01Icon9, ArrowRight01Icon as ArrowRight01Ic
|
|
|
3185
3185
|
var FeatureCard = ({ feature, bgImage }) => {
|
|
3186
3186
|
const [isBgLoading, setIsBgLoading] = useState22(true);
|
|
3187
3187
|
const [isFgLoading, setIsFgLoading] = useState22(!!feature.image);
|
|
3188
|
+
const isLeft = feature.imagePosition === "left";
|
|
3188
3189
|
return /* @__PURE__ */ React29.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__ */ React29.createElement("div", { className: "relative w-full aspect-16/10 bg-stone-100 rounded-2xl overflow-hidden mb-6 flex items-center justify-center" }, /* @__PURE__ */ React29.createElement(
|
|
3189
3190
|
Image4,
|
|
3190
3191
|
{
|
|
@@ -3206,22 +3207,32 @@ var FeatureCard = ({ feature, bgImage }) => {
|
|
|
3206
3207
|
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")`
|
|
3207
3208
|
}
|
|
3208
3209
|
}
|
|
3209
|
-
), isFgLoading && feature.image && /* @__PURE__ */ React29.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-20 bg-stone-50/50 backdrop-blur-sm transition-opacity duration-300" }, /* @__PURE__ */ React29.createElement(HugeiconsIcon22, { icon: Loading03Icon13, size: 32, className: "animate-spin text-stone-400" })), feature.image && /* @__PURE__ */ React29.createElement(
|
|
3210
|
-
|
|
3210
|
+
), isFgLoading && feature.image && /* @__PURE__ */ React29.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-20 bg-stone-50/50 backdrop-blur-sm transition-opacity duration-300" }, /* @__PURE__ */ React29.createElement(HugeiconsIcon22, { icon: Loading03Icon13, size: 32, className: "animate-spin text-stone-400" })), feature.image && /* @__PURE__ */ React29.createElement(
|
|
3211
|
+
"div",
|
|
3211
3212
|
{
|
|
3212
|
-
src: feature.image,
|
|
3213
|
-
alt: feature.title,
|
|
3214
|
-
fill: true,
|
|
3215
|
-
sizes: "(max-width: 768px) 90vw, 600px",
|
|
3216
|
-
onLoad: () => setIsFgLoading(false),
|
|
3217
3213
|
className: `
|
|
3218
|
-
|
|
3214
|
+
absolute -bottom-6 w-[85%] h-[85%] z-10 transition-transform duration-700 ease-out
|
|
3215
|
+
${isLeft ? "-left-6 group-hover:translate-x-2 group-hover:-translate-y-2" : "-right-6 group-hover:-translate-x-2 group-hover:-translate-y-2"}
|
|
3216
|
+
`
|
|
3217
|
+
},
|
|
3218
|
+
/* @__PURE__ */ React29.createElement(
|
|
3219
|
+
Image4,
|
|
3220
|
+
{
|
|
3221
|
+
src: feature.image,
|
|
3222
|
+
alt: feature.title,
|
|
3223
|
+
fill: true,
|
|
3224
|
+
sizes: "(max-width: 768px) 90vw, 600px",
|
|
3225
|
+
onLoad: () => setIsFgLoading(false),
|
|
3226
|
+
className: `
|
|
3227
|
+
object-cover transition-all duration-700 ease-out
|
|
3228
|
+
${isLeft ? "object-top-right rounded-tr-2xl shadow-[12px_-12px_30px_rgba(0,0,0,0.06)]" : "object-top-left rounded-tl-2xl shadow-[-12px_-12px_30px_rgba(0,0,0,0.06)]"}
|
|
3219
3229
|
${isFgLoading ? "opacity-0 blur-xl" : "opacity-100 blur-0"}
|
|
3220
3230
|
`
|
|
3221
|
-
|
|
3222
|
-
|
|
3231
|
+
}
|
|
3232
|
+
)
|
|
3233
|
+
)), /* @__PURE__ */ React29.createElement("div", { className: "flex flex-col text-left pr-4" }, /* @__PURE__ */ React29.createElement("h3", { className: "text-xl tracking-tight text-black mb-2" }, feature.title), /* @__PURE__ */ React29.createElement("p", { className: "text-sm leading-relaxed text-stone-600 max-w-[90%]" }, feature.desc)));
|
|
3223
3234
|
};
|
|
3224
|
-
var FeatureScroll = ({ tagline, headline, features }) => {
|
|
3235
|
+
var FeatureScroll = ({ tagline, headline, features, expand = false }) => {
|
|
3225
3236
|
const scrollRef = useRef7(null);
|
|
3226
3237
|
const [canScrollLeft, setCanScrollLeft] = useState22(false);
|
|
3227
3238
|
const [canScrollRight, setCanScrollRight] = useState22(true);
|
|
@@ -3246,9 +3257,13 @@ var FeatureScroll = ({ tagline, headline, features }) => {
|
|
|
3246
3257
|
const bgImages = [
|
|
3247
3258
|
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_7.avif",
|
|
3248
3259
|
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_6.avif",
|
|
3249
|
-
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_1.avif"
|
|
3260
|
+
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_1.avif",
|
|
3261
|
+
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_2.avif",
|
|
3262
|
+
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_3.avif",
|
|
3263
|
+
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_4.avif"
|
|
3250
3264
|
];
|
|
3251
|
-
|
|
3265
|
+
const maxItems = expand ? 6 : 3;
|
|
3266
|
+
return /* @__PURE__ */ React29.createElement("section", { className: "py-24 w-full flex justify-center relative z-10 overflow-hidden" }, /* @__PURE__ */ React29.createElement("div", { className: "max-w-6xl w-full flex flex-col px-4 md:px-8" }, /* @__PURE__ */ React29.createElement("div", { className: "flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12" }, /* @__PURE__ */ React29.createElement("div", { className: "relative z-10 text-left" }, /* @__PURE__ */ React29.createElement("span", { className: "text-xs tracking-[0.4em] text-stone-500 block mb-4" }, tagline), /* @__PURE__ */ React29.createElement("h2", { className: "text-3xl tracking-tight text-black leading-[1.05]" }, headline)), /* @__PURE__ */ React29.createElement("div", { className: "hidden md:flex items-center gap-3" }, /* @__PURE__ */ React29.createElement(
|
|
3252
3267
|
"button",
|
|
3253
3268
|
{
|
|
3254
3269
|
onClick: () => scroll("left"),
|
|
@@ -3271,7 +3286,14 @@ var FeatureScroll = ({ tagline, headline, features }) => {
|
|
|
3271
3286
|
onScroll: checkScroll,
|
|
3272
3287
|
className: "flex gap-6 overflow-x-auto snap-x snap-mandatory [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] scrollbar-none pb-8 -mx-4 px-4 md:mx-0 md:px-0"
|
|
3273
3288
|
},
|
|
3274
|
-
features.slice(0,
|
|
3289
|
+
features.slice(0, maxItems).map((feature, idx) => /* @__PURE__ */ React29.createElement(
|
|
3290
|
+
FeatureCard,
|
|
3291
|
+
{
|
|
3292
|
+
key: idx,
|
|
3293
|
+
feature,
|
|
3294
|
+
bgImage: bgImages[idx % bgImages.length]
|
|
3295
|
+
}
|
|
3296
|
+
))
|
|
3275
3297
|
), /* @__PURE__ */ React29.createElement("div", { className: "flex md:hidden items-center justify-center gap-4 mt-2" }, /* @__PURE__ */ React29.createElement(
|
|
3276
3298
|
"button",
|
|
3277
3299
|
{
|