@orangecheck/app-design 0.3.2 → 0.4.1

package/dist/components.js

@@ -83,6 +83,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 = react.useRef(null);
+  const [seen, setSeen] = react.useState(false);
+  react.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 = react.useRef(null);
+  react.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 react.createElement(
+    as,
+    { ref, className, style: { ...style, "--reveal-delay": `${delay}ms` } },
+    children
+  );
+}
+function ScrollStory({
+  length = 2,
+  className,
+  innerClassName,
+  children
+}) {
+  const ref = react.useRef(null);
+  const [pinned, setPinned] = react.useState(false);
+  react.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__ */ jsxRuntime.jsx("div", { ref, className: cn("relative", className), style: pinned ? { height: `${length * 100}svh` } : void 0, children: /* @__PURE__ */ jsxRuntime.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] = react.useState(value);
+  const animate = react.useRef(null);
+  react.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]);
+  react.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__ */ jsxRuntime.jsx("span", { ref, className: cn("oca-tabular", className), children: format(shown) });
+}
 var sectionVariants = classVarianceAuthority.cva("relative w-full overflow-x-clip", {
   variants: {
     tone: {
@@ -111,19 +236,12 @@ function Container({ className, ...props }) {
 function SectionIntro({
   className,
   align = "start",
-  ...props
+  reveal = true,
+  children,
+  style
 }) {
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Reveal, { className: cls, style, children }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls, style, children });
 }
 function PageHero({
   eyebrow,
@@ -142,14 +260,14 @@ function PageHero({
   }
   return /* @__PURE__ */ jsxRuntime.jsx(Section, { space: "none", className: cn("pb-14 pt-12 md:pb-20 md:pt-20", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid grid-cols-1 gap-10", art && "items-center md:grid-cols-12"), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-start gap-6", art ? "md:col-span-7" : "max-w-[52rem]"), children: [
-      eyebrow ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oca-eyebrow", children: eyebrow }) : null,
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: size === "xl" ? "oca-display-1" : "oca-display-2", children: title }),
-      lead ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oca-lead max-w-[38rem]", children: lead }) : null,
-      meta ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.875rem] text-muted-foreground", children: meta }) : null,
-      actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-3", children: actions }) : null,
-      children
+      eyebrow ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oca-eyebrow oca-enter", children: eyebrow }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(size === "xl" ? "oca-display-1" : "oca-display-2", "oca-enter [--enter-delay:70ms]"), children: title }),
+      lead ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oca-lead oca-enter max-w-[38rem] [--enter-delay:150ms]", children: lead }) : null,
+      meta ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oca-enter text-[0.875rem] text-muted-foreground [--enter-delay:190ms]", children: meta }) : null,
+      actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oca-enter flex flex-wrap gap-3 [--enter-delay:230ms]", children: actions }) : null,
+      children ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oca-enter w-full [--enter-delay:270ms]", children }) : null
     ] }),
-    art ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:col-span-5", children: art }) : null
+    art ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oca-enter md:col-span-5 [--enter-delay:120ms]", children: art }) : null
   ] }) });
 }
 function DocHeader({
@@ -162,8 +280,8 @@ function DocHeader({
   className
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-5", className), children: [
-    eyebrow ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oca-eyebrow", children: eyebrow }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "oca-display-2", children: title }),
+    eyebrow ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oca-eyebrow oca-enter", children: eyebrow }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "oca-display-2 oca-enter [--enter-delay:70ms]", children: title }),
     lead ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "oca-lead", children: lead }) : null,
     meta ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.875rem] text-muted-foreground", children: meta }) : null,
     actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 flex flex-wrap gap-3", children: actions }) : null,
@@ -1118,9 +1236,84 @@ function SatsFigure({
     hint ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.875rem] text-muted-foreground", children: hint }) : null
   ] });
 }
+function PhoneFrame({ className, style, children }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "relative aspect-[9/19.2] overflow-hidden rounded-[2.35rem] bg-background", children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex h-10 items-center gap-3 border-b border-border px-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-hidden": true, className: "flex gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-2.5 rounded-full bg-[#ff5f57]" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-2.5 rounded-full bg-[#febc2e]" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-2.5 rounded-full bg-[#28c840]" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "truncate", children: url }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "w-[2.6rem]" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children })
+      ]
+    }
+  );
+}
+function FloatChip({
+  icon,
+  title,
+  detail,
+  delay = 0,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.875rem] font-medium leading-tight", children: title }),
+          detail ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.8125rem] leading-tight text-muted-foreground", children: detail }) : null
+        ] })
+      ]
+    }
+  );
+}
 
 exports.Accent = Accent;
 exports.ActivityList = ActivityList;
+exports.BrowserFrame = BrowserFrame;
 exports.CodeBlock = CodeBlock;
 exports.Container = Container;
 exports.CopyButton = CopyButton;
@@ -1131,6 +1324,7 @@ exports.DocLayout = DocLayout;
 exports.EmptyLine = EmptyLine;
 exports.EmptyState = EmptyState;
 exports.Eyebrow = Eyebrow;
+exports.FloatChip = FloatChip;
 exports.Footnote = Footnote;
 exports.HashChip = HashChip;
 exports.KeyValueList = KeyValueList;
@@ -1140,20 +1334,25 @@ exports.Notice = Notice;
 exports.PackageCard = PackageCard;
 exports.PageHeader = PageHeader;
 exports.PageHero = PageHero;
+exports.PhoneFrame = PhoneFrame;
 exports.ProgressSteps = ProgressSteps;
 exports.Prose = Prose;
+exports.Reveal = Reveal;
 exports.Sats = Sats;
 exports.SatsFigure = SatsFigure;
+exports.ScrollStory = ScrollStory;
 exports.Section = Section;
 exports.SectionIntro = SectionIntro;
 exports.SplitBar = SplitBar;
 exports.StatCard = StatCard;
 exports.StatGrid = StatGrid;
 exports.StepGrid = StepGrid;
+exports.Ticker = Ticker;
 exports.TruthTable = TruthTable;
 exports.UsdApprox = UsdApprox;
 exports.satsText = satsText;
 exports.sectionVariants = sectionVariants;
 exports.useCopy = useCopy;
+exports.useInView = useInView;
 //# sourceMappingURL=components.js.map
 //# sourceMappingURL=components.js.map