@orangecheck/app-design 0.3.2 → 0.4.0

package/dist/components.mjs

@@ -1096,7 +1096,206 @@ 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",
+    {
+      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