@digilogiclabs/saas-factory-ui 1.26.0 → 1.26.1

package/dist/index.js

@@ -34375,9 +34375,21 @@ var TRANSITIONS = {
   }
 };
 var STAT_SIZES = {
-  sm: { value: "clamp(18px,2.5vw,26px)", label: "clamp(9px,1vw,11px)", divider: 24 },
-  md: { value: "clamp(22px,3.5vw,36px)", label: "clamp(10px,1.2vw,13px)", divider: 32 },
-  lg: { value: "clamp(28px,4.5vw,48px)", label: "clamp(11px,1.3vw,14px)", divider: 40 }
+  sm: {
+    value: "clamp(18px,2.5vw,26px)",
+    label: "clamp(9px,1vw,11px)",
+    divider: 24
+  },
+  md: {
+    value: "clamp(22px,3.5vw,36px)",
+    label: "clamp(10px,1.2vw,13px)",
+    divider: 32
+  },
+  lg: {
+    value: "clamp(28px,4.5vw,48px)",
+    label: "clamp(11px,1.3vw,14px)",
+    divider: 40
+  }
 };
 var STAT_BG = {
   glass: {
@@ -34754,9 +34766,7 @@ function DynamicHeroBanner({
     [current, slideCount, goTo]
   );
   const prev = (0, import_react72.useCallback)(
-    () => goTo(
-      (current - 1 + Math.max(slideCount, 1)) % Math.max(slideCount, 1)
-    ),
+    () => goTo((current - 1 + Math.max(slideCount, 1)) % Math.max(slideCount, 1)),
     [current, slideCount, goTo]
   );
   (0, import_react72.useEffect)(() => {
@@ -34841,12 +34851,26 @@ function DynamicHeroBanner({
         overflow: "hidden",
         background: backgroundColor,
         fontFamily: bodyFontFamily,
+        // Expose accent/glow as CSS custom properties so hover rules in the
+        // injected `<style>` block can reference them without prop drilling.
+        ["--dll-hero-accent"]: resolvedTheme.accent,
+        ["--dll-hero-glow"]: resolvedTheme.glow,
         ...style
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("style", { children: `${loadGoogleFonts ? `@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');` : ""}
 @keyframes dllHeroProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
-@media(prefers-reduced-motion:reduce){.dll-hero-banner *{animation-duration:.01ms!important;transition-duration:.01ms!important}}` }),
+.dll-hero-cta{transition:transform .25s cubic-bezier(.2,.8,.3,1),background-color .25s,box-shadow .25s,color .25s,border-color .25s,filter .25s}
+.dll-hero-cta:hover{transform:translateY(-2px)}
+.dll-hero-cta:focus-visible{outline:2px solid var(--dll-hero-accent,#fff);outline-offset:3px}
+.dll-hero-cta--primary:hover{filter:brightness(1.08);box-shadow:0 10px 32px color-mix(in srgb, var(--dll-hero-glow, #3b82f6) 40%, transparent)}
+.dll-hero-cta--secondary:hover{background:rgba(255,255,255,0.12)!important;border-color:rgba(255,255,255,0.38)!important;color:#fff!important}
+.dll-hero-cta--ghost:hover{color:var(--dll-hero-accent,#fff)!important}
+.dll-hero-dot{transition:all .35s}
+.dll-hero-dot:hover{background:rgba(255,255,255,0.55)!important;transform:scaleY(1.15)}
+.dll-hero-arrow{transition:opacity .25s,background-color .25s,transform .25s}
+.dll-hero-arrow:hover{background:rgba(255,255,255,0.16)!important;transform:translateY(-50%) scale(1.06)}
+@media(prefers-reduced-motion:reduce){.dll-hero-cta:hover,.dll-hero-dot:hover,.dll-hero-arrow:hover{transform:none!important}}` }),
         slides.map((slide, i) => {
           const isCurrent = i === current;
           const filter = IMAGE_FILTERS[slide.imageFilter ?? imageFilter] ?? IMAGE_FILTERS.cinematic;
@@ -35113,6 +35137,7 @@ function DynamicHeroBanner({
               type: "button",
               onClick: prev,
               "aria-label": "Previous slide",
+              className: "dll-hero-arrow",
               style: {
                 position: "absolute",
                 top: "50%",
@@ -35144,6 +35169,7 @@ function DynamicHeroBanner({
               type: "button",
               onClick: next,
               "aria-label": "Next slide",
+              className: "dll-hero-arrow",
               style: {
                 position: "absolute",
                 top: "50%",
@@ -35192,6 +35218,7 @@ function DynamicHeroBanner({
                 "aria-selected": i === current,
                 "aria-label": `Go to slide ${i + 1}`,
                 onClick: () => goTo(i),
+                className: "dll-hero-dot",
                 style: {
                   width: i === current ? 28 : 10,
                   height: 10,
@@ -35199,7 +35226,6 @@ function DynamicHeroBanner({
                   border: "none",
                   background: i === current ? resolvedTheme.accent : "rgba(255,255,255,0.25)",
                   cursor: "pointer",
-                  transition: "all 0.35s",
                   padding: 0
                 }
               },
@@ -35250,6 +35276,7 @@ function CtaButton({
   const variant = cta.variant ?? (index === 0 ? "primary" : "secondary");
   const isPrimary = variant === "primary";
   const isGhost = variant === "ghost";
+  const ctaClass = `dll-hero-cta dll-hero-cta--${variant}`;
   const buttonStyle = {
     fontFamily: bodyFont,
     fontSize: "clamp(13px,1.2vw,15px)",
@@ -35263,7 +35290,6 @@ function CtaButton({
     textDecoration: isGhost ? "underline" : "none",
     textUnderlineOffset: isGhost ? 4 : void 0,
     letterSpacing: "-0.01em",
-    transition: "all 0.25s",
     boxShadow: isPrimary ? `0 4px 20px ${glow}33` : "none",
     display: "inline-flex",
     alignItems: "center",
@@ -35288,6 +35314,7 @@ function CtaButton({
         href: cta.href,
         onClick: cta.onClick,
         "aria-label": cta.ariaLabel,
+        className: ctaClass,
         style: buttonStyle,
         children: content
       }
@@ -35302,6 +35329,7 @@ function CtaButton({
         target: cta.target,
         rel: cta.rel,
         "aria-label": cta.ariaLabel,
+        className: ctaClass,
         style: buttonStyle,
         children: content
       }
@@ -35313,6 +35341,7 @@ function CtaButton({
       type: "button",
       onClick: cta.onClick,
       "aria-label": cta.ariaLabel,
+      className: ctaClass,
       style: buttonStyle,
       children: content
     }