react-marketing-ui 0.0.3 → 0.0.5

package/dist/highlighter.mjs

@@ -1,5 +1,124 @@
-export { Highlighter } from './chunk-5QQAPGR2.mjs';
-import './chunk-EYHT2EWJ.mjs';
-import './chunk-QAWSH567.mjs';
+"use client";
+import { useInView } from 'framer-motion';
+import { useRef, useState, useLayoutEffect, useEffect } from 'react';
+import { annotate } from 'rough-notation';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+function useMediaQuery(query, defaultState = false) {
+  const [matches, setMatches] = useState(defaultState);
+  useEffect(() => {
+    const mql = globalThis.matchMedia(query);
+    setMatches(mql.matches);
+    const onChange = (e) => setMatches(e.matches);
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [query]);
+  return matches;
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function resolveColor(element, color) {
+  if (!color.startsWith("var(")) return color;
+  const token = color.slice(4, -1).trim();
+  return globalThis.getComputedStyle(element).getPropertyValue(token).trim() || color;
+}
+var BREAKPOINTS = [
+  ["xs", 30],
+  ["sm", 40],
+  ["md", 50],
+  ["lg", 64],
+  ["xl", 80],
+  ["2xl", 96]
+];
+function getBreakpoint() {
+  let current = "base";
+  for (const [name, rem] of BREAKPOINTS) {
+    if (globalThis.matchMedia(`(min-width: ${rem}rem)`).matches) current = name;
+  }
+  return current;
+}
+function onBreakpointChange(listener) {
+  const queries = BREAKPOINTS.map(([, rem]) => globalThis.matchMedia(`(min-width: ${rem}rem)`));
+  for (const query of queries) query.addEventListener("change", listener);
+  return () => {
+    for (const query of queries) query.removeEventListener("change", listener);
+  };
+}
+function Highlighter({
+  children,
+  className,
+  action = "highlight",
+  color = "var(--marker-highlight)",
+  strokeWidth = 1.5,
+  animationDuration = 600,
+  delay = 0,
+  iterations = 2,
+  padding = 2,
+  multiline = true,
+  isView = false
+}) {
+  const elementRef = useRef(null);
+  const isInView = useInView(elementRef, { once: true, margin: "-10%" });
+  const reducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+  const [themeVersion, setThemeVersion] = useState(0);
+  const shouldShow = !isView || isInView;
+  useLayoutEffect(() => {
+    const observer = new MutationObserver(() => setThemeVersion((v) => v + 1));
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
+  useLayoutEffect(() => {
+    const element = elementRef.current;
+    if (!(shouldShow && element)) return;
+    let annotation;
+    let untrack;
+    const draw = () => {
+      annotation = annotate(element, {
+        type: action,
+        color: resolveColor(element, color),
+        strokeWidth,
+        animationDuration,
+        animate: !reducedMotion,
+        iterations,
+        padding,
+        multiline
+      });
+      annotation.show();
+      let drawnAt = getBreakpoint();
+      untrack = onBreakpointChange(() => {
+        const current = getBreakpoint();
+        if (current === drawnAt) return;
+        drawnAt = current;
+        annotation?.show();
+      });
+    };
+    const startDelay = reducedMotion ? 0 : delay;
+    const timer = startDelay > 0 ? globalThis.setTimeout(draw, startDelay) : void 0;
+    if (timer === void 0) draw();
+    return () => {
+      globalThis.clearTimeout(timer);
+      untrack?.();
+      annotation?.remove();
+    };
+  }, [
+    shouldShow,
+    action,
+    color,
+    strokeWidth,
+    animationDuration,
+    delay,
+    iterations,
+    padding,
+    multiline,
+    reducedMotion,
+    themeVersion
+  ]);
+  return /* @__PURE__ */ jsx("span", { className: cn("relative inline-block bg-transparent", className), children: /* @__PURE__ */ jsx("span", { ref: elementRef, children }) });
+}
+
+export { Highlighter };
 //# sourceMappingURL=highlighter.mjs.map
 //# sourceMappingURL=highlighter.mjs.map

package/dist/highlighter.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"highlighter.mjs"}
+{"version":3,"sources":["../src/lib/use-media-query.ts","../src/lib/utils.ts","../src/components/highlighter.tsx"],"names":["useState"],"mappings":"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","file":"highlighter.mjs","sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\n/**\n * Tracks a CSS media query, returning `true` when it matches.\n *\n * The default return before hydration is `false`; pass `defaultState`\n * to set a different initial value (e.g. `true` for dark-mode queries\n * whose SSR default is dark).\n */\nexport function useMediaQuery(query: string, defaultState = false): boolean {\n  const [matches, setMatches] = useState(defaultState);\n\n  // biome-ignore lint/plugin: subscribes to a matchMedia listener — an imperative side effect with no derived-state equivalent.\n  useEffect(() => {\n    const mql = globalThis.matchMedia(query);\n    setMatches(mql.matches);\n\n    const onChange = (e: MediaQueryListEvent) => setMatches(e.matches);\n    mql.addEventListener('change', onChange);\n    return () => mql.removeEventListener('change', onChange);\n  }, [query]);\n\n  return matches;\n}\n","import { type ClassValue, clsx } from 'clsx';\nimport type { CSSProperties } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * A style object that may carry CSS custom properties (CSS variables)\n * such as `--duration`. React's `CSSProperties` intentionally drops\n * its index signature, so custom properties are not accepted without help.\n */\nexport type CSSPropertiesWithVars = CSSProperties & Record<`--${string}`, string | number>;\n\n/**\n * Builds a {@link CSSProperties} value that also allows CSS custom properties,\n * so `style` props can be written without an `as React.CSSProperties` cast while\n * still type-checking both the known style keys and the custom-property values.\n *\n * @example\n * <div style={validCssVars({ '--duration': '0.35s', color: 'red' })} />\n */\nexport function validCssVars(style: CSSPropertiesWithVars): CSSProperties {\n  return style;\n}\n\n/**\n * Narrows a union to the member(s) that declare `key` — a type-guard\n * replacement for the `in` operator's discriminated-union narrowing.\n */\nexport function hasKey<K extends PropertyKey>(key: K, obj: unknown): obj is Record<K, unknown> {\n  return obj !== null && typeof obj === 'object' && Object.hasOwn(obj, key);\n}\n\nexport function noop(): void {\n  // intentional no-op\n}\n","'use client';\n\nimport { useInView } from 'framer-motion';\nimport { type ReactNode, useLayoutEffect, useRef, useState } from 'react';\nimport { annotate } from 'rough-notation';\nimport type { RoughAnnotation } from 'rough-notation/lib/model';\nimport { useMediaQuery } from '../lib/use-media-query.js';\nimport { cn } from '../lib/utils.js';\n\ntype AnnotationAction = 'highlight' | 'underline' | 'box' | 'circle' | 'strike-through' | 'crossed-off' | 'bracket';\n\n/**\n * rough-notation writes the colour straight into the SVG's `stroke` presentation\n * attribute, where `var()` is never substituted — so a design token has to be\n * resolved against the live element before it is handed over.\n */\nfunction resolveColor(element: Element, color: string): string {\n  if (!color.startsWith('var(')) return color;\n  const token = color.slice(4, -1).trim();\n  return globalThis.getComputedStyle(element).getPropertyValue(token).trim() || color;\n}\n\n/**\n * The site's breakpoints, ascending, in the `rem` units Tailwind emits them in —\n * so they keep tracking the root font size the way the CSS does. Mirrored from\n * the library's `@theme` block (`xs` and `md` are custom, the rest are defaults).\n */\nconst BREAKPOINTS = [\n  ['xs', 30],\n  ['sm', 40],\n  ['md', 50],\n  ['lg', 64],\n  ['xl', 80],\n  ['2xl', 96],\n] as const;\n\ntype Breakpoint = 'base' | (typeof BREAKPOINTS)[number][0];\n\n/** `'base'` is the implicit below-`xs` band — the widths no `min-width` query claims. */\nfunction getBreakpoint(): Breakpoint {\n  let current: Breakpoint = 'base';\n  for (const [name, rem] of BREAKPOINTS) {\n    if (globalThis.matchMedia(`(min-width: ${rem}rem)`).matches) current = name;\n  }\n  return current;\n}\n\n/**\n * Call `listener` whenever the viewport crosses a breakpoint. Returns the\n * unsubscribe.\n *\n * The imperative counterpart to a `useBreakpoint` hook, for work that has to land\n * in the *same frame* as the layout change. Media-query change events fire during\n * the rendering steps, before `requestAnimationFrame` and before paint, so a\n * listener that writes to the DOM here is painted with the new layout rather than\n * one frame behind it.\n */\nfunction onBreakpointChange(listener: () => void): () => void {\n  const queries = BREAKPOINTS.map(([, rem]) => globalThis.matchMedia(`(min-width: ${rem}rem)`));\n  for (const query of queries) query.addEventListener('change', listener);\n  return () => {\n    for (const query of queries) query.removeEventListener('change', listener);\n  };\n}\n\ntype HighlighterProps = {\n  /** The words to annotate. Rendered inline, so they inherit the surrounding type. */\n  children: ReactNode;\n  className?: string;\n  /**\n   * Which marker stroke to draw.\n   * @default 'highlight'\n   */\n  action?: AnnotationAction;\n  /**\n   * Stroke colour. Accepts a `var(--token)` string, which is resolved against\n   * the live element and re-resolved whenever the theme flips.\n   * @default 'var(--marker-highlight)'\n   */\n  color?: string;\n  /** @default 1.5 */\n  strokeWidth?: number;\n  /** Milliseconds the stroke takes to draw itself on. @default 600 */\n  animationDuration?: number;\n  /**\n   * Milliseconds to hold the stroke back before it starts drawing. Ignored under\n   * reduced motion, where there is no draw-on to stagger.\n   * @default 0\n   */\n  delay?: number;\n  /** Passes over the same stroke, which is what makes it read as hand-drawn. @default 2 */\n  iterations?: number;\n  /** Pixels of slack between the text box and the stroke. @default 2 */\n  padding?: number;\n  /** Annotate every line the text wraps onto, rather than one box around all of them. @default true */\n  multiline?: boolean;\n  /** Hold the stroke back until the text scrolls into view. @default false */\n  isView?: boolean;\n};\n\n/**\n * Draws a hand-drawn marker stroke over a word or phrase.\n *\n * The stroke is an SVG that rough-notation injects on the client, so the\n * exported HTML ships the bare text and nothing about the layout depends on JS\n * having run. Readers who ask for reduced motion get the stroke without the\n * draw-on animation.\n */\nexport function Highlighter({\n  children,\n  className,\n  action = 'highlight',\n  color = 'var(--marker-highlight)',\n  strokeWidth = 1.5,\n  animationDuration = 600,\n  delay = 0,\n  iterations = 2,\n  padding = 2,\n  multiline = true,\n  isView = false,\n}: HighlighterProps) {\n  const elementRef = useRef<HTMLSpanElement>(null);\n  const isInView = useInView(elementRef, { once: true, margin: '-10%' });\n  const reducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\n  // Only a re-run trigger: the colour itself comes from the computed style, which\n  // is already correct on first paint because the theme class is set before\n  // hydration. The observer below bumps this whenever the class attribute flips.\n  const [themeVersion, setThemeVersion] = useState(0);\n\n  const shouldShow = !isView || isInView;\n\n  // Theme flips land as a class swap on <html> (the `.dark` class toggled by the\n  // theme provider), and rough-notation bakes the *resolved* token into the\n  // SVG's stroke attribute — which does not track var(). Re-running the draw\n  // effect with a freshly resolved colour is what repaints the stroke.\n  useLayoutEffect(() => {\n    const observer = new MutationObserver(() => setThemeVersion((v) => v + 1));\n    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });\n    return () => observer.disconnect();\n  }, []);\n\n  // Imperatively injects and tears down a rough-notation SVG measured off live\n  // DOM layout — a post-render side effect with no render-time equivalent.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: `themeVersion` is a redraw trigger, not a read value — the token resolves to a different colour per theme, so a flip has to repaint the stroke.\n  useLayoutEffect(() => {\n    const element = elementRef.current;\n    if (!(shouldShow && element)) return;\n\n    let annotation: RoughAnnotation | undefined;\n    let untrack: (() => void) | undefined;\n\n    const draw = () => {\n      annotation = annotate(element, {\n        type: action,\n        color: resolveColor(element, color),\n        strokeWidth,\n        animationDuration,\n        animate: !reducedMotion,\n        iterations,\n        padding,\n        multiline,\n      });\n      annotation.show();\n\n      // The wrapper below already carries the stroke wherever the page moves the\n      // text, so the only thing left that can stale it is a change in the text's\n      // own shape — which on a breakpoint-driven layout means a breakpoint. This\n      // is subscribed directly rather than through a `useBreakpoint` hook because\n      // a React state round-trip commits a frame or more after the browser has\n      // painted the new layout, which is exactly the lag being chased out.\n      // `show()` on a still-showing annotation re-renders un-animated, so the\n      // stroke resizes without replaying the draw-on.\n      let drawnAt = getBreakpoint();\n      untrack = onBreakpointChange(() => {\n        const current = getBreakpoint();\n        if (current === drawnAt) return;\n        drawnAt = current;\n        annotation?.show();\n      });\n    };\n\n    const startDelay = reducedMotion ? 0 : delay;\n    const timer = startDelay > 0 ? globalThis.setTimeout(draw, startDelay) : undefined;\n    if (timer === undefined) draw();\n\n    return () => {\n      globalThis.clearTimeout(timer);\n      untrack?.();\n      annotation?.remove();\n    };\n  }, [\n    shouldShow,\n    action,\n    color,\n    strokeWidth,\n    animationDuration,\n    delay,\n    iterations,\n    padding,\n    multiline,\n    reducedMotion,\n    themeVersion,\n  ]);\n\n  // Two spans, and both earn their place.\n  //\n  // rough-notation injects its SVG as a *sibling* of the annotated element, laid\n  // out `position: absolute; top: 0; left: 0`, with the stroke's coordinates baked\n  // as offsets from wherever that SVG lands. Left alone it resolves against\n  // whatever positioned ancestor it happens to find — for a centred, shrink-wrapped\n  // page section, effectively the viewport — so every reflow that slid the text\n  // sideways slid it out from under its own stroke, and only a redraw put it back.\n  // The `relative` wrapper makes the SVG resolve against a box the text sits\n  // inside instead, so the two now move as one and no listener is involved.\n  //\n  // The inner span stays plain `inline`, which is what makes `multiline` work:\n  // `getClientRects()` on an inline reports one box per line, so wrapped text gets\n  // a stroke per line rather than one slab drawn around the whole paragraph.\n  return (\n    <span className={cn('relative inline-block bg-transparent', className)}>\n      <span ref={elementRef}>{children}</span>\n    </span>\n  );\n}\n\nexport type { AnnotationAction, HighlighterProps };\n"]}

package/dist/index.d.cts

@@ -15,6 +15,7 @@ export { FadeIn, Stagger, StaggerItem } from './components/fade-in.js';
 export type { FeatureCardProps } from './components/feature-card.js';
 export { FeatureCard } from './components/feature-card.js';
 export { ArrowLeft, ArrowRight, FlowDiamond, FlowNode, FlowPill, JoinArrow, SplitArrow, TurnDown, } from './components/flowchart-parts.js';
+export { default as FooterGlow } from './components/footer-glow.js';
 export type { GlossyButtonProps } from './components/glossy-button.js';
 export { GlossyButton, glossyButtonVariants } from './components/glossy-button.js';
 export { default as Grainient } from './components/grainient.js';

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export { FadeIn, Stagger, StaggerItem } from './components/fade-in.js';
 export type { FeatureCardProps } from './components/feature-card.js';
 export { FeatureCard } from './components/feature-card.js';
 export { ArrowLeft, ArrowRight, FlowDiamond, FlowNode, FlowPill, JoinArrow, SplitArrow, TurnDown, } from './components/flowchart-parts.js';
+export { default as FooterGlow } from './components/footer-glow.js';
 export type { GlossyButtonProps } from './components/glossy-button.js';
 export { GlossyButton, glossyButtonVariants } from './components/glossy-button.js';
 export { default as Grainient } from './components/grainient.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var accordion = require('@base-ui/react/accordion');
@@ -13,7 +14,6 @@ var shadersReact = require('@paper-design/shaders-react');
 var navigationMenu = require('@base-ui/react/navigation-menu');
 var reactSlot = require('@radix-ui/react-slot');
 
-// src/components/accordion.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -1185,6 +1185,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__ */ jsxRuntime.jsx("stop", { offset, style: { stopColor: "#fff", stopOpacity: opacity } }, offset));
+}
+function FooterGlow() {
+  const ref = react.useRef(null);
+  const reduce = framerMotion.useReducedMotion();
+  const uid = react.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 } = framerMotion.useScroll({ target: ref, offset: ["start end", "start center"] });
+  const y = framerMotion.useTransform(scrollYProgress, [0, 0.7, 1], ["55%", "5%", "2%"]);
+  const opacity = framerMotion.useTransform(scrollYProgress, [0, 0.65], [0, MAX_OPACITY]);
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+        framerMotion.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__ */ jsxRuntime.jsxs("defs", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("linearGradient", { id: hueId, x1: "0", y1: "0", x2: "1", y2: "0", children: HUES.map((hue, i) => /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: i / (HUES.length - 1), style: { stopColor: `hsl(${hue} 95% 55%)` } }, hue)) }),
+              /* @__PURE__ */ jsxRuntime.jsx("linearGradient", { id: flatFadeId, gradientUnits: "userSpaceOnUse", x1: "0", y1: VB_H, x2: "0", y2: BAND_TOP, children: /* @__PURE__ */ jsxRuntime.jsx(FadeStops, {}) }),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(FadeStops, {})
+                }
+              ),
+              [
+                { id: flatMaskId, fill: flatFadeId },
+                { id: archMaskId, fill: archFadeId }
+              ].map(({ id, fill }) => /* @__PURE__ */ jsxRuntime.jsx("mask", { id, maskUnits: "userSpaceOnUse", x: BAND_X, y: "0", width: BAND_W, height: BAND_H, children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: BAND_X, y: "0", width: BAND_W, height: BAND_H, fill: `url(#${fill})` }) }, id))
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                x: BAND_X,
+                y: "0",
+                width: BAND_W,
+                height: BAND_H,
+                fill: `url(#${hueId})`,
+                mask: `url(#${flatMaskId})`,
+                className: "md:hidden"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.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)]",
@@ -2672,6 +2771,7 @@ exports.FeatureCard = FeatureCard;
 exports.FlowDiamond = FlowDiamond;
 exports.FlowNode = FlowNode;
 exports.FlowPill = FlowPill;
+exports.FooterGlow = FooterGlow;
 exports.GlossyButton = GlossyButton;
 exports.Grainient = grainient_default;
 exports.Highlighter = Highlighter;