react-marketing-ui 0.0.4 → 0.0.6

package/dist/index.mjs

@@ -3,7 +3,7 @@ import { Accordion as Accordion$1 } from '@base-ui/react/accordion';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useReducedMotion, AnimatePresence, motion, useInView, useSpring, useTransform } from 'framer-motion';
+import { useReducedMotion, AnimatePresence, motion, useInView, useScroll, useTransform, useSpring } from 'framer-motion';
 import { createContext, useRef, useState, useLayoutEffect, useId, useEffect, useMemo, useCallback, useContext, useSyncExternalStore } from 'react';
 import { cva } from 'class-variance-authority';
 import { Renderer, Triangle, Mesh, Program } from 'ogl';
@@ -1183,6 +1183,105 @@ function FlowDiamond({ label, sub, className }) {
     ] })
   ] });
 }
+var VB_W = 1270;
+var VB_H = 600;
+var BAND_TOP = 0;
+var OVERHANG = "0.5rem";
+var OVERSHOOT = 60;
+var BAND_X = -OVERSHOOT;
+var BAND_W = VB_W + OVERSHOOT * 2;
+var BAND_H = VB_H + OVERSHOOT;
+var HUES = [188, 210, 232, 250, 262, 285, 308, 330, 350];
+var ARCH_RX = VB_W * 1.35;
+var FADE_STOPS = [
+  { offset: 0, opacity: 1 },
+  { offset: 0.62, opacity: 1 },
+  { offset: 0.81, opacity: 0.8 },
+  { offset: 0.93, opacity: 0.35 },
+  { offset: 1, opacity: 0 }
+];
+var MAX_OPACITY = 0.85;
+function FadeStops() {
+  return FADE_STOPS.map(({ offset, opacity }) => /* @__PURE__ */ jsx("stop", { offset, style: { stopColor: "#fff", stopOpacity: opacity } }, offset));
+}
+function FooterGlow() {
+  const ref = useRef(null);
+  const reduce = useReducedMotion();
+  const uid = useId();
+  const hueId = `footer-glow-hue-${uid}`;
+  const flatFadeId = `footer-glow-fade-flat-${uid}`;
+  const archFadeId = `footer-glow-fade-arch-${uid}`;
+  const flatMaskId = `footer-glow-mask-flat-${uid}`;
+  const archMaskId = `footer-glow-mask-arch-${uid}`;
+  const { scrollYProgress } = useScroll({ target: ref, offset: ["start end", "start center"] });
+  const y = useTransform(scrollYProgress, [0, 0.7, 1], ["55%", "5%", "2%"]);
+  const opacity = useTransform(scrollYProgress, [0, 0.65], [0, MAX_OPACITY]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "aria-hidden": "true",
+      className: "pointer-events-none absolute inset-x-0 bottom-0 overflow-hidden",
+      style: { height: `calc(100% + ${OVERHANG})` },
+      children: /* @__PURE__ */ jsxs(
+        motion.svg,
+        {
+          viewBox: `0 0 ${VB_W} ${VB_H}`,
+          preserveAspectRatio: "none",
+          className: "h-full w-full",
+          overflow: "visible",
+          style: reduce ? { opacity: MAX_OPACITY } : { y, opacity },
+          children: [
+            /* @__PURE__ */ jsxs("defs", { children: [
+              /* @__PURE__ */ jsx("linearGradient", { id: hueId, x1: "0", y1: "0", x2: "1", y2: "0", children: HUES.map((hue, i) => /* @__PURE__ */ jsx("stop", { offset: i / (HUES.length - 1), style: { stopColor: `hsl(${hue} 95% 55%)` } }, hue)) }),
+              /* @__PURE__ */ jsx("linearGradient", { id: flatFadeId, gradientUnits: "userSpaceOnUse", x1: "0", y1: VB_H, x2: "0", y2: BAND_TOP, children: /* @__PURE__ */ jsx(FadeStops, {}) }),
+              /* @__PURE__ */ jsx(
+                "radialGradient",
+                {
+                  id: archFadeId,
+                  gradientUnits: "userSpaceOnUse",
+                  cx: VB_W / 2,
+                  cy: VB_H,
+                  r: VB_H - BAND_TOP,
+                  gradientTransform: `translate(${VB_W / 2} 0) scale(${ARCH_RX / (VB_H - BAND_TOP)} 1) translate(${-VB_W / 2} 0)`,
+                  children: /* @__PURE__ */ jsx(FadeStops, {})
+                }
+              ),
+              [
+                { id: flatMaskId, fill: flatFadeId },
+                { id: archMaskId, fill: archFadeId }
+              ].map(({ id, fill }) => /* @__PURE__ */ jsx("mask", { id, maskUnits: "userSpaceOnUse", x: BAND_X, y: "0", width: BAND_W, height: BAND_H, children: /* @__PURE__ */ jsx("rect", { x: BAND_X, y: "0", width: BAND_W, height: BAND_H, fill: `url(#${fill})` }) }, id))
+            ] }),
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: BAND_X,
+                y: "0",
+                width: BAND_W,
+                height: BAND_H,
+                fill: `url(#${hueId})`,
+                mask: `url(#${flatMaskId})`,
+                className: "md:hidden"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: BAND_X,
+                y: "0",
+                width: BAND_W,
+                height: BAND_H,
+                fill: `url(#${hueId})`,
+                mask: `url(#${archMaskId})`,
+                className: "hidden md:block"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
 var glossLayer = cn(
   "pointer-events-none absolute inset-0 z-[-1] rounded-[inherit]",
   "[background-color:var(--btn-face)] [box-shadow:var(--shadow-button)]",
@@ -2639,6 +2738,6 @@ function useBreakpoint() {
   return useSyncExternalStore(subscribe2, getBreakpoint2, getBreakpointServer);
 }
 
-export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, ActionSwapRollIcon, ActionSwapRollText, AnimatedBeam, ArrowLeft, ArrowRight, ArrowSvg, BREAKPOINTS2 as BREAKPOINTS, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChevronDownIcon2 as ChevronDownIcon, ChevronRightIcon, DiaTextReveal, EASE_OUT, EASE_OUT_CSS, ElevatedInput, FadeIn, FeatureCard, FlowDiamond, FlowNode, FlowPill, GlossyButton, grainient_default as Grainient, Highlighter, Input, JoinArrow, LiquidMetal, NavigationMenu, NavigationMenuArrow, NavigationMenuBackdrop, NavigationMenuContent, NavigationMenuIcon, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPortal, NavigationMenuSub, NavigationMenuSubTrigger, NavigationMenuTrigger, NavigationMenuViewport, PasswordInput, RainbowButton, RangeSlider, RollingBadge, SPRING_SWAP, SavingsBadge, ShineBorder, SparklesText, SplitArrow, Stagger, StaggerItem, Tabs, ThemeToggle, TurnDown, cn, easeOut, easeOutBack, getBreakpoint2 as getBreakpoint, glossyButtonVariants, hasKey, navigationMenuSubTriggerStyle, navigationMenuTriggerStyle, noop, onBreakpointChange2 as onBreakpointChange, rainbowButtonVariants, solidSurface, useBreakpoint, validCssVars };
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, ActionSwapRollIcon, ActionSwapRollText, AnimatedBeam, ArrowLeft, ArrowRight, ArrowSvg, BREAKPOINTS2 as BREAKPOINTS, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChevronDownIcon2 as ChevronDownIcon, ChevronRightIcon, DiaTextReveal, EASE_OUT, EASE_OUT_CSS, ElevatedInput, FadeIn, FeatureCard, FlowDiamond, FlowNode, FlowPill, FooterGlow, GlossyButton, grainient_default as Grainient, Highlighter, Input, JoinArrow, LiquidMetal, NavigationMenu, NavigationMenuArrow, NavigationMenuBackdrop, NavigationMenuContent, NavigationMenuIcon, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPortal, NavigationMenuSub, NavigationMenuSubTrigger, NavigationMenuTrigger, NavigationMenuViewport, PasswordInput, RainbowButton, RangeSlider, RollingBadge, SPRING_SWAP, SavingsBadge, ShineBorder, SparklesText, SplitArrow, Stagger, StaggerItem, Tabs, ThemeToggle, TurnDown, cn, easeOut, easeOutBack, getBreakpoint2 as getBreakpoint, glossyButtonVariants, hasKey, navigationMenuSubTriggerStyle, navigationMenuTriggerStyle, noop, onBreakpointChange2 as onBreakpointChange, rainbowButtonVariants, solidSurface, useBreakpoint, validCssVars };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map