@orangecheck/app-design 0.4.0 → 0.4.1

package/dist/components.mjs

@@ -1,4 +1,4 @@
-import { forwardRef, createContext, createElement, useContext, Children, isValidElement, cloneElement, useState, useRef, useEffect, useCallback } from 'react';
+import { forwardRef, createContext, createElement, useRef, useState, useEffect, useContext, Children, isValidElement, cloneElement, useCallback } from 'react';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -61,6 +61,131 @@ function Prose({ className, ...props }) {
     }
   );
 }
+function prefersStill() {
+  return typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function useInView(rootMargin = "0px 0px -12% 0px") {
+  const ref = useRef(null);
+  const [seen, setSeen] = useState(false);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || seen) return;
+    if (typeof IntersectionObserver === "undefined") {
+      setSeen(true);
+      return;
+    }
+    const io = new IntersectionObserver(
+      ([e]) => {
+        if (e?.isIntersecting) {
+          setSeen(true);
+          io.disconnect();
+        }
+      },
+      { rootMargin }
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, [rootMargin, seen]);
+  return [ref, seen];
+}
+function Reveal({
+  as = "div",
+  delay = 0,
+  className,
+  style,
+  children
+}) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || prefersStill() || typeof IntersectionObserver === "undefined") return;
+    if (el.getBoundingClientRect().top < window.innerHeight * 0.92) return;
+    el.dataset.reveal = "pending";
+    const io = new IntersectionObserver(
+      ([e]) => {
+        if (e?.isIntersecting) {
+          el.dataset.reveal = "shown";
+          io.disconnect();
+        }
+      },
+      { rootMargin: "0px 0px -10% 0px" }
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, []);
+  return createElement(
+    as,
+    { ref, className, style: { ...style, "--reveal-delay": `${delay}ms` } },
+    children
+  );
+}
+function ScrollStory({
+  length = 2,
+  className,
+  innerClassName,
+  children
+}) {
+  const ref = useRef(null);
+  const [pinned, setPinned] = useState(false);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || prefersStill()) return;
+    setPinned(true);
+    let raf = 0;
+    const update = () => {
+      raf = 0;
+      const r = el.getBoundingClientRect();
+      const travel = r.height - window.innerHeight;
+      const p = travel > 0 ? Math.min(1, Math.max(0, -r.top / travel)) : 0;
+      el.style.setProperty("--p", p.toFixed(4));
+    };
+    const on = () => {
+      if (!raf) raf = requestAnimationFrame(update);
+    };
+    update();
+    window.addEventListener("scroll", on, { passive: true });
+    window.addEventListener("resize", on);
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("scroll", on);
+      window.removeEventListener("resize", on);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("relative", className), style: pinned ? { height: `${length * 100}svh` } : void 0, children: /* @__PURE__ */ jsx("div", { className: cn(pinned && "sticky top-0 flex min-h-svh items-center", innerClassName), children }) });
+}
+function Ticker({
+  value,
+  duration = 1200,
+  format = (n) => Math.round(n).toLocaleString("en-US"),
+  className
+}) {
+  const [ref, seen] = useInView();
+  const [shown, setShown] = useState(value);
+  const animate = useRef(null);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || animate.current !== null) return;
+    animate.current = !prefersStill() && el.getBoundingClientRect().top > window.innerHeight * 0.9;
+    if (animate.current) setShown(0);
+  }, [ref]);
+  useEffect(() => {
+    if (!seen) return;
+    if (!animate.current) {
+      setShown(value);
+      return;
+    }
+    let raf = 0;
+    const t0 = performance.now();
+    const step = (now) => {
+      const k = Math.min(1, (now - t0) / duration);
+      setShown(value * (1 - Math.pow(1 - k, 3)));
+      if (k < 1) raf = requestAnimationFrame(step);
+    };
+    raf = requestAnimationFrame(step);
+    return () => cancelAnimationFrame(raf);
+  }, [seen, value, duration]);
+  return /* @__PURE__ */ jsx("span", { ref, className: cn("oca-tabular", className), children: format(shown) });
+}
 var sectionVariants = cva("relative w-full overflow-x-clip", {
   variants: {
     tone: {
@@ -89,19 +214,12 @@ function Container({ className, ...props }) {
 function SectionIntro({
   className,
   align = "start",
-  ...props
+  reveal = true,
+  children,
+  style
 }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "flex flex-col gap-4 md:gap-5",
-        align === "center" && "mx-auto items-center text-center",
-        className
-      ),
-      ...props
-    }
-  );
+  const cls = cn("flex flex-col gap-4 md:gap-5", align === "center" && "mx-auto items-center text-center", className);
+  return reveal ? /* @__PURE__ */ jsx(Reveal, { className: cls, style, children }) : /* @__PURE__ */ jsx("div", { className: cls, style, children });
 }
 function PageHero({
   eyebrow,
@@ -120,14 +238,14 @@ function PageHero({
   }
   return /* @__PURE__ */ jsx(Section, { space: "none", className: cn("pb-14 pt-12 md:pb-20 md:pt-20", className), children: /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-1 gap-10", art && "items-center md:grid-cols-12"), children: [
     /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-start gap-6", art ? "md:col-span-7" : "max-w-[52rem]"), children: [
-      eyebrow ? /* @__PURE__ */ jsx("p", { className: "oca-eyebrow", children: eyebrow }) : null,
-      /* @__PURE__ */ jsx("h1", { className: size === "xl" ? "oca-display-1" : "oca-display-2", children: title }),
-      lead ? /* @__PURE__ */ jsx("p", { className: "oca-lead max-w-[38rem]", children: lead }) : null,
-      meta ? /* @__PURE__ */ jsx("p", { className: "text-[0.875rem] text-muted-foreground", children: meta }) : null,
-      actions ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3", children: actions }) : null,
-      children
+      eyebrow ? /* @__PURE__ */ jsx("p", { className: "oca-eyebrow oca-enter", children: eyebrow }) : null,
+      /* @__PURE__ */ jsx("h1", { className: cn(size === "xl" ? "oca-display-1" : "oca-display-2", "oca-enter [--enter-delay:70ms]"), children: title }),
+      lead ? /* @__PURE__ */ jsx("p", { className: "oca-lead oca-enter max-w-[38rem] [--enter-delay:150ms]", children: lead }) : null,
+      meta ? /* @__PURE__ */ jsx("p", { className: "oca-enter text-[0.875rem] text-muted-foreground [--enter-delay:190ms]", children: meta }) : null,
+      actions ? /* @__PURE__ */ jsx("div", { className: "oca-enter flex flex-wrap gap-3 [--enter-delay:230ms]", children: actions }) : null,
+      children ? /* @__PURE__ */ jsx("div", { className: "oca-enter w-full [--enter-delay:270ms]", children }) : null
     ] }),
-    art ? /* @__PURE__ */ jsx("div", { className: "md:col-span-5", children: art }) : null
+    art ? /* @__PURE__ */ jsx("div", { className: "oca-enter md:col-span-5 [--enter-delay:120ms]", children: art }) : null
   ] }) });
 }
 function DocHeader({
@@ -140,8 +258,8 @@ function DocHeader({
   className
 }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-5", className), children: [
-    eyebrow ? /* @__PURE__ */ jsx("p", { className: "oca-eyebrow", children: eyebrow }) : null,
-    /* @__PURE__ */ jsx("h1", { className: "oca-display-2", children: title }),
+    eyebrow ? /* @__PURE__ */ jsx("p", { className: "oca-eyebrow oca-enter", children: eyebrow }) : null,
+    /* @__PURE__ */ jsx("h1", { className: "oca-display-2 oca-enter [--enter-delay:70ms]", children: title }),
     lead ? /* @__PURE__ */ jsx("p", { className: "oca-lead", children: lead }) : null,
     meta ? /* @__PURE__ */ jsx("p", { className: "text-[0.875rem] text-muted-foreground", children: meta }) : null,
     actions ? /* @__PURE__ */ jsx("div", { className: "mt-1 flex flex-wrap gap-3", children: actions }) : null,
@@ -1096,131 +1214,6 @@ function SatsFigure({
     hint ? /* @__PURE__ */ jsx("span", { className: "text-[0.875rem] text-muted-foreground", children: hint }) : null
   ] });
 }
-function prefersStill() {
-  return typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-function useInView(rootMargin = "0px 0px -12% 0px") {
-  const ref = useRef(null);
-  const [seen, setSeen] = useState(false);
-  useEffect(() => {
-    const el = ref.current;
-    if (!el || seen) return;
-    if (typeof IntersectionObserver === "undefined") {
-      setSeen(true);
-      return;
-    }
-    const io = new IntersectionObserver(
-      ([e]) => {
-        if (e?.isIntersecting) {
-          setSeen(true);
-          io.disconnect();
-        }
-      },
-      { rootMargin }
-    );
-    io.observe(el);
-    return () => io.disconnect();
-  }, [rootMargin, seen]);
-  return [ref, seen];
-}
-function Reveal({
-  as = "div",
-  delay = 0,
-  className,
-  style,
-  children
-}) {
-  const ref = useRef(null);
-  useEffect(() => {
-    const el = ref.current;
-    if (!el || prefersStill() || typeof IntersectionObserver === "undefined") return;
-    if (el.getBoundingClientRect().top < window.innerHeight * 0.92) return;
-    el.dataset.reveal = "pending";
-    const io = new IntersectionObserver(
-      ([e]) => {
-        if (e?.isIntersecting) {
-          el.dataset.reveal = "shown";
-          io.disconnect();
-        }
-      },
-      { rootMargin: "0px 0px -10% 0px" }
-    );
-    io.observe(el);
-    return () => io.disconnect();
-  }, []);
-  return createElement(
-    as,
-    { ref, className, style: { ...style, "--reveal-delay": `${delay}ms` } },
-    children
-  );
-}
-function ScrollStory({
-  length = 2,
-  className,
-  innerClassName,
-  children
-}) {
-  const ref = useRef(null);
-  const [pinned, setPinned] = useState(false);
-  useEffect(() => {
-    const el = ref.current;
-    if (!el || prefersStill()) return;
-    setPinned(true);
-    let raf = 0;
-    const update = () => {
-      raf = 0;
-      const r = el.getBoundingClientRect();
-      const travel = r.height - window.innerHeight;
-      const p = travel > 0 ? Math.min(1, Math.max(0, -r.top / travel)) : 0;
-      el.style.setProperty("--p", p.toFixed(4));
-    };
-    const on = () => {
-      if (!raf) raf = requestAnimationFrame(update);
-    };
-    update();
-    window.addEventListener("scroll", on, { passive: true });
-    window.addEventListener("resize", on);
-    return () => {
-      cancelAnimationFrame(raf);
-      window.removeEventListener("scroll", on);
-      window.removeEventListener("resize", on);
-    };
-  }, []);
-  return /* @__PURE__ */ jsx("div", { ref, className: cn("relative", className), style: pinned ? { height: `${length * 100}svh` } : void 0, children: /* @__PURE__ */ jsx("div", { className: cn(pinned && "sticky top-0 flex min-h-svh items-center", innerClassName), children }) });
-}
-function Ticker({
-  value,
-  duration = 1200,
-  format = (n) => Math.round(n).toLocaleString("en-US"),
-  className
-}) {
-  const [ref, seen] = useInView();
-  const [shown, setShown] = useState(value);
-  const animate = useRef(null);
-  useEffect(() => {
-    const el = ref.current;
-    if (!el || animate.current !== null) return;
-    animate.current = !prefersStill() && el.getBoundingClientRect().top > window.innerHeight * 0.9;
-    if (animate.current) setShown(0);
-  }, [ref]);
-  useEffect(() => {
-    if (!seen) return;
-    if (!animate.current) {
-      setShown(value);
-      return;
-    }
-    let raf = 0;
-    const t0 = performance.now();
-    const step = (now) => {
-      const k = Math.min(1, (now - t0) / duration);
-      setShown(value * (1 - Math.pow(1 - k, 3)));
-      if (k < 1) raf = requestAnimationFrame(step);
-    };
-    raf = requestAnimationFrame(step);
-    return () => cancelAnimationFrame(raf);
-  }, [seen, value, duration]);
-  return /* @__PURE__ */ jsx("span", { ref, className: cn("oca-tabular", className), children: format(shown) });
-}
 function PhoneFrame({ className, style, children }) {
   return /* @__PURE__ */ jsx(
     "div",