@retinalabsllc/zairusjs 5.1.80 → 5.1.85

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.
Files changed (3) hide show
  1. package/dist/index.js +71 -26
  2. package/dist/index.mjs +116 -71
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -290,12 +290,13 @@ var import_navigation = require("next/navigation");
290
290
  var NavLink = ({
291
291
  href,
292
292
  children,
293
- className = ""
293
+ className = "",
294
+ isDarkTheme
294
295
  }) => {
295
296
  const pathname = (0, import_navigation.usePathname)();
296
297
  const isActive = pathname === href;
297
- const activeClass = "text-white";
298
- const inactiveClass = "text-neutral-400 hover:text-white";
298
+ const activeClass = isDarkTheme ? "text-white" : "text-neutral-900 font-medium";
299
+ const inactiveClass = isDarkTheme ? "text-neutral-400 hover:text-white" : "text-neutral-500 hover:text-neutral-900";
299
300
  return /* @__PURE__ */ import_react5.default.createElement(
300
301
  import_link2.default,
301
302
  {
@@ -315,27 +316,71 @@ var Header = ({
315
316
  hideHeaderText = false,
316
317
  compact = false
317
318
  }) => {
319
+ const headerRef = (0, import_react5.useRef)(null);
320
+ const [isDarkTheme, setIsDarkTheme] = (0, import_react5.useState)(true);
321
+ (0, import_react5.useEffect)(() => {
322
+ const checkBackgroundLuminance = () => {
323
+ if (!headerRef.current) return;
324
+ const rect = headerRef.current.getBoundingClientRect();
325
+ const x = rect.left + rect.width / 2;
326
+ const y = rect.top + rect.height / 2;
327
+ const elementsAtPoint = document.elementsFromPoint(x, y);
328
+ let foundDarkBackground = true;
329
+ for (const el of elementsAtPoint) {
330
+ if (headerRef.current.contains(el)) continue;
331
+ const style = window.getComputedStyle(el);
332
+ const bg = style.backgroundColor;
333
+ if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
334
+ const rgbMatch = bg.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
335
+ if (rgbMatch) {
336
+ const r = parseInt(rgbMatch[1], 10);
337
+ const g = parseInt(rgbMatch[2], 10);
338
+ const b = parseInt(rgbMatch[3], 10);
339
+ const brightness = Math.round((r * 299 + g * 587 + b * 114) / 1e3);
340
+ foundDarkBackground = brightness < 128;
341
+ break;
342
+ }
343
+ }
344
+ }
345
+ setIsDarkTheme(foundDarkBackground);
346
+ };
347
+ checkBackgroundLuminance();
348
+ window.addEventListener("scroll", checkBackgroundLuminance, { passive: true });
349
+ window.addEventListener("resize", checkBackgroundLuminance, { passive: true });
350
+ return () => {
351
+ window.removeEventListener("scroll", checkBackgroundLuminance);
352
+ window.removeEventListener("resize", checkBackgroundLuminance);
353
+ };
354
+ }, []);
318
355
  const headerLayoutWidth = compact ? "w-fit mx-auto gap-8 md:gap-16" : "w-full justify-between";
319
356
  const hasBrandSection = showLogo || !hideHeaderText;
320
- return /* @__PURE__ */ import_react5.default.createElement("div", { className: "absolute inset-x-0 top-0 w-full z-50 pointer-events-none px-4 pt-4 sm:pt-6" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "max-w-5xl mx-auto w-full pointer-events-auto flex justify-center" }, /* @__PURE__ */ import_react5.default.createElement("header", { className: `${headerLayoutWidth} bg-black/40 backdrop-blur-md rounded-full py-2 px-6 flex items-center transition-all duration-300` }, hasBrandSection && /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex items-center shrink-0" }, /* @__PURE__ */ import_react5.default.createElement(import_link2.default, { href: "/", className: "flex items-center gap-3 transition-opacity hover:opacity-70 outline-none" }, showLogo && /* @__PURE__ */ import_react5.default.createElement(
321
- import_image.default,
322
- {
323
- src: logoSrc,
324
- alt: `${companyName} Logo`,
325
- width: 40,
326
- height: 40,
327
- className: `object-contain w-8 h-auto ${invert ? "invert" : ""}`,
328
- priority: true
329
- }
330
- ), !hideHeaderText && /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex flex-col justify-center" }, /* @__PURE__ */ import_react5.default.createElement("span", { className: "text-[11px] leading-none tracking-wide mb-1 transition-colors text-white" }, companyName), subtitle && /* @__PURE__ */ import_react5.default.createElement("span", { className: "text-[9px] tracking-widest leading-none transition-colors text-neutral-400" }, subtitle)))), /* @__PURE__ */ import_react5.default.createElement("nav", { className: "flex items-center gap-1 md:gap-2 shrink-0" }, links.map((link, index) => /* @__PURE__ */ import_react5.default.createElement(
331
- NavLink,
332
- {
333
- key: index,
334
- href: link.href,
335
- className: link.hideOnMobile ? "hidden sm:inline-flex" : ""
336
- },
337
- link.label
338
- ))))));
357
+ const headerBgClass = isDarkTheme ? "bg-black/40" : "bg-white/40";
358
+ const brandTitleClass = isDarkTheme ? "text-white" : "text-neutral-900";
359
+ const brandSubtitleClass = isDarkTheme ? "text-neutral-400" : "text-neutral-600";
360
+ const shouldInvertLogo = isDarkTheme ? invert : !invert;
361
+ return (
362
+ // Upgraded to 'fixed' so the smart scroll detection actually follows the user down the page
363
+ /* @__PURE__ */ import_react5.default.createElement("div", { className: "fixed inset-x-0 top-0 w-full z-50 pointer-events-none px-4 pt-4 sm:pt-6" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "max-w-5xl mx-auto w-full pointer-events-auto flex justify-center", ref: headerRef }, /* @__PURE__ */ import_react5.default.createElement("header", { className: `${headerLayoutWidth} ${headerBgClass} backdrop-blur-md rounded-full py-2 px-6 flex items-center transition-all duration-300` }, hasBrandSection && /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex items-center shrink-0" }, /* @__PURE__ */ import_react5.default.createElement(import_link2.default, { href: "/", className: "flex items-center gap-3 transition-opacity hover:opacity-70 outline-none" }, showLogo && /* @__PURE__ */ import_react5.default.createElement(
364
+ import_image.default,
365
+ {
366
+ src: logoSrc,
367
+ alt: `${companyName} Logo`,
368
+ width: 40,
369
+ height: 40,
370
+ className: `object-contain w-8 h-auto transition-all duration-300 ${shouldInvertLogo ? "invert" : ""}`,
371
+ priority: true
372
+ }
373
+ ), !hideHeaderText && /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex flex-col justify-center transition-colors duration-300" }, /* @__PURE__ */ import_react5.default.createElement("span", { className: `text-[11px] leading-none tracking-wide mb-1 ${brandTitleClass}` }, companyName), subtitle && /* @__PURE__ */ import_react5.default.createElement("span", { className: `text-[9px] tracking-widest leading-none ${brandSubtitleClass}` }, subtitle)))), /* @__PURE__ */ import_react5.default.createElement("nav", { className: "flex items-center gap-1 md:gap-2 shrink-0" }, links.map((link, index) => /* @__PURE__ */ import_react5.default.createElement(
374
+ NavLink,
375
+ {
376
+ key: index,
377
+ href: link.href,
378
+ isDarkTheme,
379
+ className: link.hideOnMobile ? "hidden sm:inline-flex" : ""
380
+ },
381
+ link.label
382
+ ))))))
383
+ );
339
384
  };
340
385
 
341
386
  // src/components/Footer.tsx
@@ -459,7 +504,7 @@ var HeroSection = ({
459
504
  backgroundPosition: "center"
460
505
  }
461
506
  }
462
- ), /* @__PURE__ */ import_react8.default.createElement("div", { className: "absolute inset-0 bg-white/40 z-10" }), /* @__PURE__ */ import_react8.default.createElement(
507
+ ), /* @__PURE__ */ import_react8.default.createElement("div", { className: "absolute inset-0 z-10" }), /* @__PURE__ */ import_react8.default.createElement(
463
508
  "div",
464
509
  {
465
510
  className: "absolute inset-0 w-full h-full pointer-events-none z-10 opacity-10",
@@ -480,7 +525,7 @@ var HeroSection = ({
480
525
  "h1",
481
526
  {
482
527
  ref: titleRef,
483
- className: `text-4xl sm:text-5xl lg:text-7xl font-light mb-6 text-neutral-900 tracking-tight leading-[1.05] max-w-4xl`,
528
+ className: `text-4xl sm:text-5xl lg:text-7xl font-light mb-6 text-white tracking-tight leading-[1.05] max-w-4xl`,
484
529
  style: isAnimating ? { animationIterationCount: 1 } : {}
485
530
  },
486
531
  titlePrefix,
@@ -490,7 +535,7 @@ var HeroSection = ({
490
535
  import_link4.default,
491
536
  {
492
537
  href: secondaryCtaHref,
493
- className: "w-full sm:w-60 inline-flex font-medium items-center justify-center text-[11px] tracking-widest rounded-full px-8 py-3 bg-white/60 backdrop-blur-md text-center text-neutral-900 text-xs hover:bg-white/80 border border-neutral-200 outline-none transition-all"
538
+ className: "w-full sm:w-60 inline-flex font-medium items-center justify-center text-[11px] tracking-widest rounded-full px-8 py-3 bg-black/60 backdrop-blur-md text-center text-white text-xs hover:bg-black/80 outline-none transition-all"
494
539
  },
495
540
  secondaryCtaText
496
541
  )), showApps && appLogos && appLogos.length > 0 && /* @__PURE__ */ import_react8.default.createElement("div", { className: "w-full flex flex-col items-center mt-4" }, appsText && /* @__PURE__ */ import_react8.default.createElement("p", { className: "text-[9px] tracking-[0.2em] text-neutral-500 mb-5 " }, appsText), /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex flex-wrap justify-center items-center gap-6 opacity-90" }, appLogos.map((logo, idx) => /* @__PURE__ */ import_react8.default.createElement("div", { key: idx, className: "relative h-6 w-6 sm:h-8 sm:w-8 flex items-center justify-center cursor-default" }, /* @__PURE__ */ import_react8.default.createElement(
@@ -880,7 +925,7 @@ var ManagedPricingBlock = ({
880
925
  },
881
926
  tab.label
882
927
  );
883
- }))), /* @__PURE__ */ import_react18.default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-5 w-full max-w-4xl animate-in slide-in-from-bottom-2 fade-in duration-500" }, currentPlans.map((plan, planIdx) => /* @__PURE__ */ import_react18.default.createElement(
928
+ }))), /* @__PURE__ */ import_react18.default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-5 w-full max-w-3xl animate-in slide-in-from-bottom-2 fade-in duration-500" }, currentPlans.map((plan, planIdx) => /* @__PURE__ */ import_react18.default.createElement(
884
929
  "div",
885
930
  {
886
931
  key: `${activeTabIndex}-${planIdx}`,
package/dist/index.mjs CHANGED
@@ -224,19 +224,20 @@ var ThreeDActionButton = ({
224
224
  };
225
225
 
226
226
  // src/components/Header.tsx
227
- import React4 from "react";
227
+ import React4, { useState as useState2, useEffect as useEffect2, useRef as useRef2 } from "react";
228
228
  import Link2 from "next/link";
229
229
  import Image from "next/image";
230
230
  import { usePathname } from "next/navigation";
231
231
  var NavLink = ({
232
232
  href,
233
233
  children,
234
- className = ""
234
+ className = "",
235
+ isDarkTheme
235
236
  }) => {
236
237
  const pathname = usePathname();
237
238
  const isActive = pathname === href;
238
- const activeClass = "text-white";
239
- const inactiveClass = "text-neutral-400 hover:text-white";
239
+ const activeClass = isDarkTheme ? "text-white" : "text-neutral-900 font-medium";
240
+ const inactiveClass = isDarkTheme ? "text-neutral-400 hover:text-white" : "text-neutral-500 hover:text-neutral-900";
240
241
  return /* @__PURE__ */ React4.createElement(
241
242
  Link2,
242
243
  {
@@ -256,31 +257,75 @@ var Header = ({
256
257
  hideHeaderText = false,
257
258
  compact = false
258
259
  }) => {
260
+ const headerRef = useRef2(null);
261
+ const [isDarkTheme, setIsDarkTheme] = useState2(true);
262
+ useEffect2(() => {
263
+ const checkBackgroundLuminance = () => {
264
+ if (!headerRef.current) return;
265
+ const rect = headerRef.current.getBoundingClientRect();
266
+ const x = rect.left + rect.width / 2;
267
+ const y = rect.top + rect.height / 2;
268
+ const elementsAtPoint = document.elementsFromPoint(x, y);
269
+ let foundDarkBackground = true;
270
+ for (const el of elementsAtPoint) {
271
+ if (headerRef.current.contains(el)) continue;
272
+ const style = window.getComputedStyle(el);
273
+ const bg = style.backgroundColor;
274
+ if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
275
+ const rgbMatch = bg.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
276
+ if (rgbMatch) {
277
+ const r = parseInt(rgbMatch[1], 10);
278
+ const g = parseInt(rgbMatch[2], 10);
279
+ const b = parseInt(rgbMatch[3], 10);
280
+ const brightness = Math.round((r * 299 + g * 587 + b * 114) / 1e3);
281
+ foundDarkBackground = brightness < 128;
282
+ break;
283
+ }
284
+ }
285
+ }
286
+ setIsDarkTheme(foundDarkBackground);
287
+ };
288
+ checkBackgroundLuminance();
289
+ window.addEventListener("scroll", checkBackgroundLuminance, { passive: true });
290
+ window.addEventListener("resize", checkBackgroundLuminance, { passive: true });
291
+ return () => {
292
+ window.removeEventListener("scroll", checkBackgroundLuminance);
293
+ window.removeEventListener("resize", checkBackgroundLuminance);
294
+ };
295
+ }, []);
259
296
  const headerLayoutWidth = compact ? "w-fit mx-auto gap-8 md:gap-16" : "w-full justify-between";
260
297
  const hasBrandSection = showLogo || !hideHeaderText;
261
- return /* @__PURE__ */ React4.createElement("div", { className: "absolute inset-x-0 top-0 w-full z-50 pointer-events-none px-4 pt-4 sm:pt-6" }, /* @__PURE__ */ React4.createElement("div", { className: "max-w-5xl mx-auto w-full pointer-events-auto flex justify-center" }, /* @__PURE__ */ React4.createElement("header", { className: `${headerLayoutWidth} bg-black/40 backdrop-blur-md rounded-full py-2 px-6 flex items-center transition-all duration-300` }, hasBrandSection && /* @__PURE__ */ React4.createElement("div", { className: "flex items-center shrink-0" }, /* @__PURE__ */ React4.createElement(Link2, { href: "/", className: "flex items-center gap-3 transition-opacity hover:opacity-70 outline-none" }, showLogo && /* @__PURE__ */ React4.createElement(
262
- Image,
263
- {
264
- src: logoSrc,
265
- alt: `${companyName} Logo`,
266
- width: 40,
267
- height: 40,
268
- className: `object-contain w-8 h-auto ${invert ? "invert" : ""}`,
269
- priority: true
270
- }
271
- ), !hideHeaderText && /* @__PURE__ */ React4.createElement("div", { className: "flex flex-col justify-center" }, /* @__PURE__ */ React4.createElement("span", { className: "text-[11px] leading-none tracking-wide mb-1 transition-colors text-white" }, companyName), subtitle && /* @__PURE__ */ React4.createElement("span", { className: "text-[9px] tracking-widest leading-none transition-colors text-neutral-400" }, subtitle)))), /* @__PURE__ */ React4.createElement("nav", { className: "flex items-center gap-1 md:gap-2 shrink-0" }, links.map((link, index) => /* @__PURE__ */ React4.createElement(
272
- NavLink,
273
- {
274
- key: index,
275
- href: link.href,
276
- className: link.hideOnMobile ? "hidden sm:inline-flex" : ""
277
- },
278
- link.label
279
- ))))));
298
+ const headerBgClass = isDarkTheme ? "bg-black/40" : "bg-white/40";
299
+ const brandTitleClass = isDarkTheme ? "text-white" : "text-neutral-900";
300
+ const brandSubtitleClass = isDarkTheme ? "text-neutral-400" : "text-neutral-600";
301
+ const shouldInvertLogo = isDarkTheme ? invert : !invert;
302
+ return (
303
+ // Upgraded to 'fixed' so the smart scroll detection actually follows the user down the page
304
+ /* @__PURE__ */ React4.createElement("div", { className: "fixed inset-x-0 top-0 w-full z-50 pointer-events-none px-4 pt-4 sm:pt-6" }, /* @__PURE__ */ React4.createElement("div", { className: "max-w-5xl mx-auto w-full pointer-events-auto flex justify-center", ref: headerRef }, /* @__PURE__ */ React4.createElement("header", { className: `${headerLayoutWidth} ${headerBgClass} backdrop-blur-md rounded-full py-2 px-6 flex items-center transition-all duration-300` }, hasBrandSection && /* @__PURE__ */ React4.createElement("div", { className: "flex items-center shrink-0" }, /* @__PURE__ */ React4.createElement(Link2, { href: "/", className: "flex items-center gap-3 transition-opacity hover:opacity-70 outline-none" }, showLogo && /* @__PURE__ */ React4.createElement(
305
+ Image,
306
+ {
307
+ src: logoSrc,
308
+ alt: `${companyName} Logo`,
309
+ width: 40,
310
+ height: 40,
311
+ className: `object-contain w-8 h-auto transition-all duration-300 ${shouldInvertLogo ? "invert" : ""}`,
312
+ priority: true
313
+ }
314
+ ), !hideHeaderText && /* @__PURE__ */ React4.createElement("div", { className: "flex flex-col justify-center transition-colors duration-300" }, /* @__PURE__ */ React4.createElement("span", { className: `text-[11px] leading-none tracking-wide mb-1 ${brandTitleClass}` }, companyName), subtitle && /* @__PURE__ */ React4.createElement("span", { className: `text-[9px] tracking-widest leading-none ${brandSubtitleClass}` }, subtitle)))), /* @__PURE__ */ React4.createElement("nav", { className: "flex items-center gap-1 md:gap-2 shrink-0" }, links.map((link, index) => /* @__PURE__ */ React4.createElement(
315
+ NavLink,
316
+ {
317
+ key: index,
318
+ href: link.href,
319
+ isDarkTheme,
320
+ className: link.hideOnMobile ? "hidden sm:inline-flex" : ""
321
+ },
322
+ link.label
323
+ ))))))
324
+ );
280
325
  };
281
326
 
282
327
  // src/components/Footer.tsx
283
- import React5, { useState as useState2 } from "react";
328
+ import React5, { useState as useState3 } from "react";
284
329
  import Link3 from "next/link";
285
330
  import { HugeiconsIcon as HugeiconsIcon2 } from "@hugeicons/react";
286
331
  var Footer = ({
@@ -290,7 +335,7 @@ var Footer = ({
290
335
  copyrightText,
291
336
  topSection
292
337
  }) => {
293
- const [openCol, setOpenCol] = useState2(null);
338
+ const [openCol, setOpenCol] = useState3(null);
294
339
  const toggleColumn = (idx) => {
295
340
  setOpenCol(openCol === idx ? null : idx);
296
341
  };
@@ -329,7 +374,7 @@ var Footer = ({
329
374
  };
330
375
 
331
376
  // src/components/HeroSection.tsx
332
- import React6, { useState as useState3, useEffect as useEffect2, useRef as useRef2 } from "react";
377
+ import React6, { useState as useState4, useEffect as useEffect3, useRef as useRef3 } from "react";
333
378
  import Link4 from "next/link";
334
379
  import Image2 from "next/image";
335
380
  var HeroSection = ({
@@ -350,9 +395,9 @@ var HeroSection = ({
350
395
  bgVideoSrc,
351
396
  bgImageSrc
352
397
  }) => {
353
- const [isAnimating, setIsAnimating] = useState3(false);
354
- const titleRef = useRef2(null);
355
- useEffect2(() => {
398
+ const [isAnimating, setIsAnimating] = useState4(false);
399
+ const titleRef = useRef3(null);
400
+ useEffect3(() => {
356
401
  const observer = new IntersectionObserver(
357
402
  ([entry]) => {
358
403
  if (entry.isIntersecting) {
@@ -400,7 +445,7 @@ var HeroSection = ({
400
445
  backgroundPosition: "center"
401
446
  }
402
447
  }
403
- ), /* @__PURE__ */ React6.createElement("div", { className: "absolute inset-0 bg-white/40 z-10" }), /* @__PURE__ */ React6.createElement(
448
+ ), /* @__PURE__ */ React6.createElement("div", { className: "absolute inset-0 z-10" }), /* @__PURE__ */ React6.createElement(
404
449
  "div",
405
450
  {
406
451
  className: "absolute inset-0 w-full h-full pointer-events-none z-10 opacity-10",
@@ -421,7 +466,7 @@ var HeroSection = ({
421
466
  "h1",
422
467
  {
423
468
  ref: titleRef,
424
- className: `text-4xl sm:text-5xl lg:text-7xl font-light mb-6 text-neutral-900 tracking-tight leading-[1.05] max-w-4xl`,
469
+ className: `text-4xl sm:text-5xl lg:text-7xl font-light mb-6 text-white tracking-tight leading-[1.05] max-w-4xl`,
425
470
  style: isAnimating ? { animationIterationCount: 1 } : {}
426
471
  },
427
472
  titlePrefix,
@@ -431,7 +476,7 @@ var HeroSection = ({
431
476
  Link4,
432
477
  {
433
478
  href: secondaryCtaHref,
434
- className: "w-full sm:w-60 inline-flex font-medium items-center justify-center text-[11px] tracking-widest rounded-full px-8 py-3 bg-white/60 backdrop-blur-md text-center text-neutral-900 text-xs hover:bg-white/80 border border-neutral-200 outline-none transition-all"
479
+ className: "w-full sm:w-60 inline-flex font-medium items-center justify-center text-[11px] tracking-widest rounded-full px-8 py-3 bg-black/60 backdrop-blur-md text-center text-white text-xs hover:bg-black/80 outline-none transition-all"
435
480
  },
436
481
  secondaryCtaText
437
482
  )), showApps && appLogos && appLogos.length > 0 && /* @__PURE__ */ React6.createElement("div", { className: "w-full flex flex-col items-center mt-4" }, appsText && /* @__PURE__ */ React6.createElement("p", { className: "text-[9px] tracking-[0.2em] text-neutral-500 mb-5 " }, appsText), /* @__PURE__ */ React6.createElement("div", { className: "flex flex-wrap justify-center items-center gap-6 opacity-90" }, appLogos.map((logo, idx) => /* @__PURE__ */ React6.createElement("div", { key: idx, className: "relative h-6 w-6 sm:h-8 sm:w-8 flex items-center justify-center cursor-default" }, /* @__PURE__ */ React6.createElement(
@@ -447,12 +492,12 @@ var HeroSection = ({
447
492
  };
448
493
 
449
494
  // src/components/AppBento2.tsx
450
- import React7, { useState as useState4, useEffect as useEffect3, useRef as useRef3 } from "react";
495
+ import React7, { useState as useState5, useEffect as useEffect4, useRef as useRef4 } from "react";
451
496
  import { HugeiconsIcon as HugeiconsIcon3 } from "@hugeicons/react";
452
497
  var AppBento2 = ({ tagline, headline, features }) => {
453
- const [isAnimating, setIsAnimating] = useState4(false);
454
- const titleRef = useRef3(null);
455
- useEffect3(() => {
498
+ const [isAnimating, setIsAnimating] = useState5(false);
499
+ const titleRef = useRef4(null);
500
+ useEffect4(() => {
456
501
  const observer = new IntersectionObserver(
457
502
  ([entry]) => {
458
503
  if (entry.isIntersecting) {
@@ -522,13 +567,13 @@ var AppBento2 = ({ tagline, headline, features }) => {
522
567
  };
523
568
 
524
569
  // src/components/FeatureScroll.tsx
525
- import React8, { useRef as useRef4, useState as useState5, useEffect as useEffect4 } from "react";
570
+ import React8, { useRef as useRef5, useState as useState6, useEffect as useEffect5 } from "react";
526
571
  import Image3 from "next/image";
527
572
  import { HugeiconsIcon as HugeiconsIcon4 } from "@hugeicons/react";
528
573
  import { ArrowLeft01Icon, ArrowRight01Icon, Loading03Icon as Loading03Icon2 } from "@hugeicons/core-free-icons";
529
574
  var FeatureCard = ({ feature, bgImage }) => {
530
- const [isBgLoading, setIsBgLoading] = useState5(true);
531
- const [isFgLoading, setIsFgLoading] = useState5(!!feature.image);
575
+ const [isBgLoading, setIsBgLoading] = useState6(true);
576
+ const [isFgLoading, setIsFgLoading] = useState6(!!feature.image);
532
577
  return /* @__PURE__ */ React8.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__ */ React8.createElement("div", { className: "relative w-full aspect-16/10 bg-neutral-100 rounded-2xl overflow-hidden mb-6 flex items-center justify-center" }, /* @__PURE__ */ React8.createElement(
533
578
  Image3,
534
579
  {
@@ -566,9 +611,9 @@ var FeatureCard = ({ feature, bgImage }) => {
566
611
  ))), /* @__PURE__ */ React8.createElement("div", { className: "flex flex-col text-left pr-4" }, /* @__PURE__ */ React8.createElement("h3", { className: " text-xl tracking-tight text-black mb-2" }, feature.title), /* @__PURE__ */ React8.createElement("p", { className: "text-[13px] leading-relaxed text-neutral-600 max-w-[90%]" }, feature.desc)));
567
612
  };
568
613
  var FeatureScroll = ({ tagline, headline, features }) => {
569
- const scrollRef = useRef4(null);
570
- const [canScrollLeft, setCanScrollLeft] = useState5(false);
571
- const [canScrollRight, setCanScrollRight] = useState5(true);
614
+ const scrollRef = useRef5(null);
615
+ const [canScrollLeft, setCanScrollLeft] = useState6(false);
616
+ const [canScrollRight, setCanScrollRight] = useState6(true);
572
617
  const checkScroll = () => {
573
618
  if (scrollRef.current) {
574
619
  const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
@@ -576,7 +621,7 @@ var FeatureScroll = ({ tagline, headline, features }) => {
576
621
  setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 2);
577
622
  }
578
623
  };
579
- useEffect4(() => {
624
+ useEffect5(() => {
580
625
  checkScroll();
581
626
  window.addEventListener("resize", checkScroll);
582
627
  return () => window.removeEventListener("resize", checkScroll);
@@ -659,7 +704,7 @@ var PlatformFeatures = ({
659
704
  };
660
705
 
661
706
  // src/components/ManagedDocument.tsx
662
- import React10, { useState as useState6, useEffect as useEffect5, useRef as useRef5 } from "react";
707
+ import React10, { useState as useState7, useEffect as useEffect6, useRef as useRef6 } from "react";
663
708
  var ManagedDocument = ({
664
709
  tagline,
665
710
  title,
@@ -667,9 +712,9 @@ var ManagedDocument = ({
667
712
  contactText,
668
713
  contactEmail
669
714
  }) => {
670
- const [isAnimating, setIsAnimating] = useState6(false);
671
- const titleRef = useRef5(null);
672
- useEffect5(() => {
715
+ const [isAnimating, setIsAnimating] = useState7(false);
716
+ const titleRef = useRef6(null);
717
+ useEffect6(() => {
673
718
  const observer = new IntersectionObserver(
674
719
  ([entry]) => {
675
720
  if (entry.isIntersecting) {
@@ -709,11 +754,11 @@ var ManagedDocument = ({
709
754
  };
710
755
 
711
756
  // src/components/ManagedContactBlock.tsx
712
- import React11, { useState as useState7, useEffect as useEffect6 } from "react";
757
+ import React11, { useState as useState8, useEffect as useEffect7 } from "react";
713
758
  import { HugeiconsIcon as HugeiconsIcon6 } from "@hugeicons/react";
714
759
  var SecureEmail = ({ user, domain, className }) => {
715
- const [isMounted, setIsMounted] = useState7(false);
716
- useEffect6(() => {
760
+ const [isMounted, setIsMounted] = useState8(false);
761
+ useEffect7(() => {
717
762
  setIsMounted(true);
718
763
  }, []);
719
764
  if (!isMounted) {
@@ -768,7 +813,7 @@ var ManagedContactBlock = ({
768
813
  };
769
814
 
770
815
  // src/components/ManagedPricingBlock.tsx
771
- import React12, { useState as useState8, useEffect as useEffect7, useRef as useRef6 } from "react";
816
+ import React12, { useState as useState9, useEffect as useEffect8, useRef as useRef7 } from "react";
772
817
  import Link5 from "next/link";
773
818
  import Image4 from "next/image";
774
819
  var CheckIcon = ({ className = "" }) => /* @__PURE__ */ React12.createElement("svg", { viewBox: "0 0 24 24", fill: "none", className: `w-4 h-4 shrink-0 ${className}`, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "black" }), /* @__PURE__ */ React12.createElement("path", { d: "M8 12L11 15L16 9", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
@@ -779,10 +824,10 @@ var ManagedPricingBlock = ({
779
824
  plans = [],
780
825
  tabs
781
826
  }) => {
782
- const [isAnimating, setIsAnimating] = useState8(false);
783
- const [activeTabIndex, setActiveTabIndex] = useState8(0);
784
- const titleRef = useRef6(null);
785
- useEffect7(() => {
827
+ const [isAnimating, setIsAnimating] = useState9(false);
828
+ const [activeTabIndex, setActiveTabIndex] = useState9(0);
829
+ const titleRef = useRef7(null);
830
+ useEffect8(() => {
786
831
  const observer = new IntersectionObserver(
787
832
  ([entry]) => {
788
833
  if (entry.isIntersecting) {
@@ -821,7 +866,7 @@ var ManagedPricingBlock = ({
821
866
  },
822
867
  tab.label
823
868
  );
824
- }))), /* @__PURE__ */ React12.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-5 w-full max-w-4xl animate-in slide-in-from-bottom-2 fade-in duration-500" }, currentPlans.map((plan, planIdx) => /* @__PURE__ */ React12.createElement(
869
+ }))), /* @__PURE__ */ React12.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-5 w-full max-w-3xl animate-in slide-in-from-bottom-2 fade-in duration-500" }, currentPlans.map((plan, planIdx) => /* @__PURE__ */ React12.createElement(
825
870
  "div",
826
871
  {
827
872
  key: `${activeTabIndex}-${planIdx}`,
@@ -1105,14 +1150,14 @@ var NumberInput = ({
1105
1150
  ));
1106
1151
 
1107
1152
  // src/components/PortfolioHero.tsx
1108
- import React19, { useEffect as useEffect8, useRef as useRef7 } from "react";
1153
+ import React19, { useEffect as useEffect9, useRef as useRef8 } from "react";
1109
1154
  import Link6 from "next/link";
1110
1155
  import Image7 from "next/image";
1111
1156
  import { HugeiconsIcon as HugeiconsIcon9 } from "@hugeicons/react";
1112
1157
  import { ArrowRight01Icon as ArrowRight01Icon2 } from "@hugeicons/core-free-icons";
1113
1158
  var useScrollAnimation = () => {
1114
- const elementRef = useRef7(null);
1115
- useEffect8(() => {
1159
+ const elementRef = useRef8(null);
1160
+ useEffect9(() => {
1116
1161
  const el = elementRef.current;
1117
1162
  if (!el) return;
1118
1163
  const observer = new IntersectionObserver(
@@ -1196,7 +1241,7 @@ var PortfolioHero = ({
1196
1241
  };
1197
1242
 
1198
1243
  // src/components/GifFeatureCard.tsx
1199
- import React20, { useState as useState9 } from "react";
1244
+ import React20, { useState as useState10 } from "react";
1200
1245
  import Image8 from "next/image";
1201
1246
  import { HugeiconsIcon as HugeiconsIcon10 } from "@hugeicons/react";
1202
1247
  import { Loading03Icon as Loading03Icon4 } from "@hugeicons/core-free-icons";
@@ -1207,7 +1252,7 @@ var GifFeatureCard = ({
1207
1252
  alt = "Feature animation",
1208
1253
  className = "aspect-video"
1209
1254
  }) => {
1210
- const [isLoading, setIsLoading] = useState9(true);
1255
+ const [isLoading, setIsLoading] = useState10(true);
1211
1256
  return /* @__PURE__ */ React20.createElement("div", { className: `relative w-full bg-black overflow-hidden shadow-2xl ${className}` }, isLoading && /* @__PURE__ */ React20.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-20 bg-black" }, /* @__PURE__ */ React20.createElement(
1212
1257
  HugeiconsIcon10,
1213
1258
  {
@@ -1240,7 +1285,7 @@ var GifFeatureCard = ({
1240
1285
  };
1241
1286
 
1242
1287
  // src/components/MedicalFeatureStatsBlock.tsx
1243
- import React21, { useState as useState10, useEffect as useEffect9, useRef as useRef8 } from "react";
1288
+ import React21, { useState as useState11, useEffect as useEffect10, useRef as useRef9 } from "react";
1244
1289
  import Image9 from "next/image";
1245
1290
  var MedicalFeatureStatsBlock = ({
1246
1291
  bottomHeadline,
@@ -1249,9 +1294,9 @@ var MedicalFeatureStatsBlock = ({
1249
1294
  trustText,
1250
1295
  stats
1251
1296
  }) => {
1252
- const [isAnimating, setIsAnimating] = useState10(false);
1253
- const titleRef = useRef8(null);
1254
- useEffect9(() => {
1297
+ const [isAnimating, setIsAnimating] = useState11(false);
1298
+ const titleRef = useRef9(null);
1299
+ useEffect10(() => {
1255
1300
  const observer = new IntersectionObserver(
1256
1301
  ([entry]) => {
1257
1302
  if (entry.isIntersecting) {
@@ -1290,12 +1335,12 @@ var MedicalFeatureStatsBlock = ({
1290
1335
  };
1291
1336
 
1292
1337
  // src/components/ConsultantShowcase.tsx
1293
- import React22, { useState as useState11 } from "react";
1338
+ import React22, { useState as useState12 } from "react";
1294
1339
  import Image10 from "next/image";
1295
1340
  import { HugeiconsIcon as HugeiconsIcon11 } from "@hugeicons/react";
1296
1341
  import { Loading03Icon as Loading03Icon5 } from "@hugeicons/core-free-icons";
1297
1342
  var ImageWithLoader = ({ src, alt, className, sizes, priority = false }) => {
1298
- const [isLoading, setIsLoading] = useState11(true);
1343
+ const [isLoading, setIsLoading] = useState12(true);
1299
1344
  return /* @__PURE__ */ React22.createElement("div", { className: `absolute inset-0 bg-neutral-800 ${className}` }, isLoading && /* @__PURE__ */ React22.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-20 bg-neutral-800/50 backdrop-blur-md transition-opacity duration-300" }, /* @__PURE__ */ React22.createElement(HugeiconsIcon11, { icon: Loading03Icon5, size: 24, className: "animate-spin text-white/50" })), /* @__PURE__ */ React22.createElement(
1300
1345
  Image10,
1301
1346
  {
@@ -1315,9 +1360,9 @@ var ImageWithLoader = ({ src, alt, className, sizes, priority = false }) => {
1315
1360
  var ConsultantShowcase = ({
1316
1361
  profiles
1317
1362
  }) => {
1318
- const [currentIndex, setCurrentIndex] = useState11(0);
1319
- const [touchStart, setTouchStart] = useState11(null);
1320
- const [touchEnd, setTouchEnd] = useState11(null);
1363
+ const [currentIndex, setCurrentIndex] = useState12(0);
1364
+ const [touchStart, setTouchStart] = useState12(null);
1365
+ const [touchEnd, setTouchEnd] = useState12(null);
1321
1366
  const nextSlide = () => {
1322
1367
  setCurrentIndex((prev) => prev === profiles.length - 1 ? 0 : prev + 1);
1323
1368
  };
@@ -1386,7 +1431,7 @@ var ConsultantShowcase = ({
1386
1431
  };
1387
1432
 
1388
1433
  // src/components/ContentGridBlock.tsx
1389
- import React23, { useState as useState12 } from "react";
1434
+ import React23, { useState as useState13 } from "react";
1390
1435
  import Image11 from "next/image";
1391
1436
  import { HugeiconsIcon as HugeiconsIcon12 } from "@hugeicons/react";
1392
1437
  import { Loading03Icon as Loading03Icon6 } from "@hugeicons/core-free-icons";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@retinalabsllc/zairusjs",
3
- "version": "5.1.80",
3
+ "version": "5.1.85",
4
4
  "description": "A perceptive, Ai data driven Next.js UI component library.",
5
5
  "author": "Retina Labs Company",
6
6
  "license": "MIT",