@orangecheck/app-design 0.3.2 → 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,7 +1214,81 @@ function SatsFigure({
     hint ? /* @__PURE__ */ jsx("span", { className: "text-[0.875rem] text-muted-foreground", children: hint }) : null
   ] });
 }
+function PhoneFrame({ className, style, children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "relative w-[17.5rem] shrink-0 rounded-[2.9rem] bg-[#0b0b0c] p-[0.6rem]",
+        "shadow-[0_50px_100px_-40px_rgb(10_10_10/0.55),0_0_0_1px_rgb(255_255_255/0.06)_inset]",
+        className
+      ),
+      style,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-[9/19.2] overflow-hidden rounded-[2.35rem] bg-background", children: [
+        /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "absolute left-1/2 top-2.5 z-10 h-[1.35rem] w-[5.6rem] -translate-x-1/2 rounded-full bg-[#0b0b0c]" }),
+        children
+      ] })
+    }
+  );
+}
+function BrowserFrame({
+  url = "ochk.app",
+  className,
+  style,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "overflow-hidden rounded-[1.1rem] border border-border bg-card",
+        "shadow-[0_40px_90px_-40px_rgb(10_10_10/0.45)]",
+        className
+      ),
+      style,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex h-10 items-center gap-3 border-b border-border px-4", children: [
+          /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: "flex gap-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-[#ff5f57]" }),
+            /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-[#febc2e]" }),
+            /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-[#28c840]" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mx-auto flex h-6 min-w-0 max-w-[60%] flex-1 items-center justify-center rounded-md bg-muted px-3 text-[0.75rem] text-muted-foreground", children: /* @__PURE__ */ jsx("span", { className: "truncate", children: url }) }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "w-[2.6rem]" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "relative", children })
+      ]
+    }
+  );
+}
+function FloatChip({
+  icon,
+  title,
+  detail,
+  delay = 0,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "oca-animate-drift flex items-center gap-3 rounded-2xl border border-border bg-card/90 py-2.5 pl-2.5 pr-4 backdrop-blur-md",
+        "shadow-[0_24px_50px_-24px_rgb(10_10_10/0.35)]",
+        className
+      ),
+      style: { animationDelay: `${-delay}s`, ...style },
+      children: [
+        icon ? /* @__PURE__ */ jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-xl bg-muted text-foreground [&_svg]:size-4", children: icon }) : null,
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[0.875rem] font-medium leading-tight", children: title }),
+          detail ? /* @__PURE__ */ jsx("span", { className: "text-[0.8125rem] leading-tight text-muted-foreground", children: detail }) : null
+        ] })
+      ]
+    }
+  );
+}
 
-export { Accent, ActivityList, CodeBlock, Container, CopyButton, DataTable, Display, DocHeader, DocLayout, EmptyLine, EmptyState, Eyebrow, Footnote, HashChip, KeyValueList, Lead, LoadingBlock, Notice, PackageCard, PageHeader, PageHero, ProgressSteps, Prose, Sats, SatsFigure, Section, SectionIntro, SplitBar, StatCard, StatGrid, StepGrid, TruthTable, UsdApprox, satsText, sectionVariants, useCopy };
+export { Accent, ActivityList, BrowserFrame, CodeBlock, Container, CopyButton, DataTable, Display, DocHeader, DocLayout, EmptyLine, EmptyState, Eyebrow, FloatChip, Footnote, HashChip, KeyValueList, Lead, LoadingBlock, Notice, PackageCard, PageHeader, PageHero, PhoneFrame, ProgressSteps, Prose, Reveal, Sats, SatsFigure, ScrollStory, Section, SectionIntro, SplitBar, StatCard, StatGrid, StepGrid, Ticker, TruthTable, UsdApprox, satsText, sectionVariants, useCopy, useInView };
 //# sourceMappingURL=components.mjs.map
 //# sourceMappingURL=components.mjs.map