@sableui/react 0.6.2 → 0.7.1

package/dist/lib/chart/chart-frame.js

@@ -0,0 +1,163 @@
+"use client";
+
+// src/lib/chart/chart-frame.tsx
+import { useEffect, useId, useRef, useState } from "react";
+import { useMotion } from "../../motion/MotionProvider.js";
+import { useArrival } from "./use-arrival.js";
+import { cn } from "../cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ChartFrame({
+  label,
+  className,
+  count,
+  interactive,
+  animate,
+  activeIndex: controlled,
+  defaultActiveIndex = null,
+  onActiveIndexChange,
+  hitTest,
+  tooltip,
+  describe,
+  legend,
+  table,
+  children
+}) {
+  const { enabled } = useMotion();
+  const [viewRef, inView] = useArrival();
+  const plotRef = useRef(null);
+  const [size, setSize] = useState(null);
+  const [shown, setShown] = useState(!animate);
+  const [uncontrolled, setUncontrolled] = useState(defaultActiveIndex);
+  const [viaKeyboard, setViaKeyboard] = useState(false);
+  const appeared = useRef(true);
+  const tableId = useId();
+  const active = controlled !== void 0 ? controlled : uncontrolled;
+  const setActive = (index) => {
+    if (index === active) return;
+    appeared.current = active == null;
+    if (controlled === void 0) setUncontrolled(index);
+    onActiveIndexChange?.(index);
+  };
+  useEffect(() => {
+    const el = plotRef.current;
+    if (!el) return;
+    const measure = () => {
+      const r = el.getBoundingClientRect();
+      const next = { width: Math.round(r.width), height: Math.round(r.height) };
+      setSize((prev) => prev && prev.width === next.width && prev.height === next.height ? prev : next);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  useEffect(() => {
+    if (shown) return;
+    if (!animate || !enabled) {
+      setShown(true);
+      return;
+    }
+    if (!size || !inView) return;
+    let inner = 0;
+    const outer = requestAnimationFrame(() => {
+      inner = requestAnimationFrame(() => setShown(true));
+    });
+    return () => {
+      cancelAnimationFrame(outer);
+      cancelAnimationFrame(inner);
+    };
+  }, [shown, animate, enabled, size, inView]);
+  const local = (event) => {
+    const r = event.currentTarget.getBoundingClientRect();
+    return { x: event.clientX - r.left, y: event.clientY - r.top };
+  };
+  const onPointer = (event) => {
+    if (!interactive || !size || !hitTest) return;
+    const p = local(event);
+    if (viaKeyboard) setViaKeyboard(false);
+    setActive(hitTest(p.x, p.y, size));
+  };
+  const onKeyDown = (event) => {
+    if (!interactive || !count) return;
+    const step = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
+    let next;
+    if (event.key in step) next = active == null ? 0 : Math.min(count - 1, Math.max(0, active + step[event.key]));
+    else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = count - 1;
+    else if (event.key === "Escape") next = null;
+    if (next === void 0) return;
+    event.preventDefault();
+    setViaKeyboard(true);
+    setActive(next);
+  };
+  const placement = size && active != null && tooltip ? tooltip(active, size) : null;
+  const flip = placement && size ? placement.x > size.width / 2 : false;
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      ref: viewRef,
+      "data-reveal": shown ? "in" : "out",
+      className: cn("m-0 flex h-60 w-full min-w-0 flex-col gap-3", className),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: plotRef,
+            role: "group",
+            "aria-roledescription": "chart",
+            "aria-label": label,
+            "aria-describedby": tableId,
+            tabIndex: interactive ? 0 : void 0,
+            onPointerMove: onPointer,
+            onPointerDown: onPointer,
+            onPointerLeave: () => {
+              if (!viaKeyboard) setActive(null);
+            },
+            onKeyDown,
+            onBlur: () => viaKeyboard && setActive(null),
+            className: "relative min-h-0 flex-1 touch-pan-y rounded-sm outline-none motion-interactive focus-visible:ring-2 focus-visible:ring-ring",
+            children: [
+              size && size.width > 0 && size.height > 0 ? /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  "aria-hidden": true,
+                  width: size.width,
+                  height: size.height,
+                  viewBox: `0 0 ${size.width} ${size.height}`,
+                  className: "absolute inset-0 overflow-visible",
+                  children: children({ size, activeIndex: interactive ? active : null })
+                }
+              ) : null,
+              placement ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "aria-hidden": true,
+                  className: cn(
+                    "pointer-events-none absolute start-0 top-0 z-10",
+                    // Glides between positions; appears in place the first time.
+                    !appeared.current && "transition-transform duration-(--motion-duration-fast) ease-standard"
+                  ),
+                  style: { transform: `translate(${Math.round(placement.x)}px, ${Math.round(placement.y)}px)` },
+                  children: /* @__PURE__ */ jsx("div", { className: cn("w-max -translate-y-1/2 transition-transform duration-(--motion-duration-fast) ease-standard", flip ? "-translate-x-[calc(100%+0.75rem)]" : "translate-x-3"), children: placement.content })
+                }
+              ) : null
+            ]
+          }
+        ),
+        legend,
+        /* @__PURE__ */ jsxs("table", { id: tableId, className: "sr-only", children: [
+          /* @__PURE__ */ jsx("caption", { children: label }),
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: table.headers.map((h) => /* @__PURE__ */ jsx("th", { scope: "col", children: h }, h)) }) }),
+          /* @__PURE__ */ jsx("tbody", { children: table.rows.map((row) => /* @__PURE__ */ jsx("tr", { children: row.map(
+            (cell, i) => i === 0 ? /* @__PURE__ */ jsx("th", { scope: "row", children: cell }, `h-${cell}`) : /* @__PURE__ */ jsx("td", { children: cell }, `${table.headers[i]}`)
+          ) }, row[0])) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { "aria-live": "polite", className: "sr-only", children: viaKeyboard && active != null ? describe(active) : "" })
+      ]
+    }
+  );
+}
+export {
+  ChartFrame
+};

package/dist/lib/chart/chart-legend.js

@@ -0,0 +1,13 @@
+// src/lib/chart/chart-legend.tsx
+import { Icon } from "../../icon/index.js";
+import { cn } from "../cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ChartLegend({ items, className }) {
+  return /* @__PURE__ */ jsx("ul", { "aria-hidden": true, className: cn("flex flex-wrap items-center justify-center gap-x-4 gap-y-1.5", className), children: items.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1.5 text-caption text-muted-foreground", children: [
+    item.icon ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0", style: { color: item.color }, children: /* @__PURE__ */ jsx(Icon, { name: item.icon }) }) : /* @__PURE__ */ jsx("span", { className: "size-2.5 shrink-0 rounded-[2px]", style: { background: item.color } }),
+    item.label
+  ] }, item.key)) });
+}
+export {
+  ChartLegend
+};

package/dist/lib/chart/chart-tooltip.js

@@ -0,0 +1,38 @@
+// src/lib/chart/chart-tooltip.tsx
+import { Icon } from "../../icon/index.js";
+import { cn } from "../cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ChartTooltipContent({
+  label,
+  rows,
+  indicator = "dot",
+  total,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "grid min-w-32 gap-1.5 rounded-md border border-border-floating bg-popover px-2.5 py-1.5 text-caption text-popover-foreground shadow-md",
+        className
+      ),
+      children: [
+        label != null ? /* @__PURE__ */ jsx("div", { className: "text-label-sm", children: label }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
+          rows.map((row) => /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", indicator === "line" || indicator === "dashed" ? "items-stretch" : ""), children: [
+            row.icon ? /* @__PURE__ */ jsx(Icon, { name: row.icon, className: "shrink-0 text-muted-foreground" }) : indicator === "dot" ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "size-2.5 shrink-0 rounded-[2px]", style: { background: row.color } }) : indicator === "line" ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "w-1 shrink-0 rounded-full", style: { background: row.color } }) : indicator === "dashed" ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "w-0 shrink-0 border-[1.5px] border-dashed", style: { borderColor: row.color } }) : null,
+            /* @__PURE__ */ jsx("span", { className: "flex-1 text-muted-foreground", children: row.label }),
+            /* @__PURE__ */ jsx("span", { className: "ms-3 font-mono tabular-nums text-foreground", children: row.value })
+          ] }, row.key)),
+          total != null ? /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex items-center gap-2 border-t border-border pt-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "flex-1 text-label-sm", children: "Total" }),
+            /* @__PURE__ */ jsx("span", { className: "ms-3 font-mono tabular-nums text-foreground", children: total })
+          ] }) : null
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ChartTooltipContent
+};

package/dist/lib/chart/format.js

@@ -0,0 +1,24 @@
+// src/lib/chart/format.ts
+function chartFormatters(locale, valueFormatter) {
+  if (valueFormatter) return { axis: valueFormatter, full: valueFormatter };
+  const compact = new Intl.NumberFormat(locale, { notation: "compact", maximumFractionDigits: 1 });
+  const full = new Intl.NumberFormat(locale, { maximumFractionDigits: 2 });
+  return { axis: (v) => compact.format(v), full: (v) => full.format(v) };
+}
+function categoryText(v, locale) {
+  if (v instanceof Date) return new Intl.DateTimeFormat(locale, { month: "short", day: "numeric" }).format(v);
+  return v == null ? "" : String(v);
+}
+function approxTextWidth(text) {
+  return text.length * 6.6 + 4;
+}
+function centerValueText(value, locale) {
+  if (typeof value === "string") return value;
+  return Math.abs(value) < 1e4 ? new Intl.NumberFormat(locale, { maximumFractionDigits: 1 }).format(value) : new Intl.NumberFormat(locale, { notation: "compact", maximumFractionDigits: 1 }).format(value);
+}
+export {
+  approxTextWidth,
+  categoryText,
+  centerValueText,
+  chartFormatters
+};

package/dist/lib/chart/geometry.js

@@ -0,0 +1,114 @@
+// src/lib/chart/geometry.ts
+var f = (n) => Math.round(n * 100) / 100;
+function monotoneTangents(pts) {
+  const n = pts.length;
+  const d = [];
+  for (let i = 0; i < n - 1; i++) {
+    const dx = pts[i + 1][0] - pts[i][0];
+    d.push(dx === 0 ? 0 : (pts[i + 1][1] - pts[i][1]) / dx);
+  }
+  const m = new Array(n);
+  m[0] = d[0] ?? 0;
+  m[n - 1] = d[n - 2] ?? 0;
+  for (let i = 1; i < n - 1; i++) m[i] = d[i - 1] * d[i] <= 0 ? 0 : (d[i - 1] + d[i]) / 2;
+  for (let i = 0; i < n - 1; i++) {
+    if (d[i] === 0) {
+      m[i] = 0;
+      m[i + 1] = 0;
+      continue;
+    }
+    const a = m[i] / d[i];
+    const b = m[i + 1] / d[i];
+    const h = a * a + b * b;
+    if (h > 9) {
+      const t = 3 / Math.sqrt(h);
+      m[i] = t * a * d[i];
+      m[i + 1] = t * b * d[i];
+    }
+  }
+  return m;
+}
+function segments(pts, curve) {
+  if (pts.length < 2) return "";
+  if (curve === "linear") return pts.slice(1).map(([x, y]) => `L${f(x)},${f(y)}`).join("");
+  if (curve === "step") {
+    let out2 = "";
+    for (let i = 1; i < pts.length; i++) {
+      const mid = (pts[i - 1][0] + pts[i][0]) / 2;
+      out2 += `L${f(mid)},${f(pts[i - 1][1])}L${f(mid)},${f(pts[i][1])}L${f(pts[i][0])},${f(pts[i][1])}`;
+    }
+    return out2;
+  }
+  const m = monotoneTangents(pts);
+  let out = "";
+  for (let i = 0; i < pts.length - 1; i++) {
+    const [x0, y0] = pts[i];
+    const [x1, y1] = pts[i + 1];
+    const dx = (x1 - x0) / 3;
+    out += `C${f(x0 + dx)},${f(y0 + dx * m[i])},${f(x1 - dx)},${f(y1 - dx * m[i + 1])},${f(x1)},${f(y1)}`;
+  }
+  return out;
+}
+function linePath(pts, curve = "smooth") {
+  if (!pts.length) return "";
+  return `M${f(pts[0][0])},${f(pts[0][1])}${segments(pts, curve)}`;
+}
+function areaPath(top, bottom, curve = "smooth") {
+  if (!top.length) return "";
+  const back = [...bottom].reverse();
+  return `${linePath(top, curve)}L${f(back[0][0])},${f(back[0][1])}${segments(back, curve)}Z`;
+}
+function rectPath(x, y, w, h, [tl, tr, br, bl]) {
+  const max = Math.max(0, Math.min(w / 2, h / 2));
+  const r = (v) => Math.min(Math.max(0, v), max);
+  const [a, b, c, d] = [r(tl), r(tr), r(br), r(bl)];
+  return `M${f(x + a)},${f(y)}H${f(x + w - b)}A${f(b)},${f(b)} 0 0 1 ${f(x + w)},${f(y + b)}V${f(y + h - c)}A${f(c)},${f(c)} 0 0 1 ${f(x + w - c)},${f(y + h)}H${f(x + d)}A${f(d)},${f(d)} 0 0 1 ${f(x)},${f(y + h - d)}V${f(y + a)}A${f(a)},${f(a)} 0 0 1 ${f(x + a)},${f(y)}Z`;
+}
+function polar(cx, cy, r, angle) {
+  return [cx + r * Math.sin(angle), cy - r * Math.cos(angle)];
+}
+function arcPath(cx, cy, inner, outer, a0, a1) {
+  const sweep = a1 - a0;
+  if (Math.abs(sweep) >= Math.PI * 2 - 1e-6) {
+    const mid = a0 + sweep / 2;
+    return `${arcPath(cx, cy, inner, outer, a0, mid)}${arcPath(cx, cy, inner, outer, mid, a1)}`;
+  }
+  const large = Math.abs(sweep) > Math.PI ? 1 : 0;
+  const dir = sweep >= 0 ? 1 : 0;
+  const [ox0, oy0] = polar(cx, cy, outer, a0);
+  const [ox1, oy1] = polar(cx, cy, outer, a1);
+  let d = `M${f(ox0)},${f(oy0)}A${f(outer)},${f(outer)} 0 ${large} ${dir} ${f(ox1)},${f(oy1)}`;
+  if (inner > 0) {
+    const [ix1, iy1] = polar(cx, cy, inner, a1);
+    const [ix0, iy0] = polar(cx, cy, inner, a0);
+    d += `L${f(ix1)},${f(iy1)}A${f(inner)},${f(inner)} 0 ${large} ${1 - dir} ${f(ix0)},${f(iy0)}`;
+  } else {
+    d += `L${f(cx)},${f(cy)}`;
+  }
+  return `${d}Z`;
+}
+function strokeArcPath(cx, cy, r, a0, a1) {
+  const sweep = a1 - a0;
+  if (Math.abs(sweep) < 1e-6) {
+    const [x, y] = polar(cx, cy, r, a0);
+    return `M${f(x)},${f(y)}`;
+  }
+  if (Math.abs(sweep) >= Math.PI * 2 - 1e-6) {
+    const mid = a0 + sweep / 2;
+    const [x02, y02] = polar(cx, cy, r, a0);
+    const [xm, ym] = polar(cx, cy, r, mid);
+    const [x12, y12] = polar(cx, cy, r, a1 - (sweep > 0 ? 1e-4 : -1e-4));
+    return `M${f(x02)},${f(y02)}A${f(r)},${f(r)} 0 0 1 ${f(xm)},${f(ym)}A${f(r)},${f(r)} 0 0 1 ${f(x12)},${f(y12)}`;
+  }
+  const [x0, y0] = polar(cx, cy, r, a0);
+  const [x1, y1] = polar(cx, cy, r, a1);
+  return `M${f(x0)},${f(y0)}A${f(r)},${f(r)} 0 ${Math.abs(sweep) > Math.PI ? 1 : 0} ${sweep >= 0 ? 1 : 0} ${f(x1)},${f(y1)}`;
+}
+export {
+  arcPath,
+  areaPath,
+  linePath,
+  polar,
+  rectPath,
+  strokeArcPath
+};

package/dist/lib/chart/motion.js

@@ -0,0 +1,34 @@
+// src/lib/chart/motion.ts
+var DRAW_DURATION = "calc(var(--motion-duration-slower) * 1.8)";
+var RISE = "var(--motion-duration-slower) var(--motion-ease-emphasized)";
+var MORPH = "var(--motion-duration-slow) var(--motion-ease-standard)";
+var HOVER = "var(--motion-duration-fast) var(--motion-ease-standard)";
+var GLIDE = `transform ${HOVER}, opacity ${HOVER}, cx ${HOVER}, cy ${HOVER}`;
+function barTransition(delay = "0ms") {
+  return `scale ${RISE} ${delay}, opacity ${HOVER}, d ${MORPH}`;
+}
+function stagger(index, stepMs = 35) {
+  return `calc(${Math.min(index, 24) * stepMs}ms * var(--motion-scale, 1))`;
+}
+function drawTransition(delay = "0ms") {
+  return `stroke-dashoffset ${DRAW_DURATION} var(--motion-ease-decelerate) ${delay}, d ${MORPH}, opacity ${HOVER}`;
+}
+function riseTransition(delay = "0ms") {
+  return `scale ${RISE} ${delay}, opacity ${RISE} ${delay}, d ${MORPH}`;
+}
+function morphTransition() {
+  return `d ${MORPH}, opacity ${HOVER}, cx ${MORPH}, cy ${MORPH}`;
+}
+function pathStyle(d) {
+  return { d: `path("${d}")` };
+}
+export {
+  DRAW_DURATION,
+  GLIDE,
+  barTransition,
+  drawTransition,
+  morphTransition,
+  pathStyle,
+  riseTransition,
+  stagger
+};

package/dist/lib/chart/scale.js

@@ -0,0 +1,72 @@
+// src/lib/chart/scale.ts
+var clean = (n) => Number.parseFloat(n.toPrecision(12));
+function niceTicks(min, max, count = 5) {
+  if (!Number.isFinite(min) || !Number.isFinite(max)) return [0, 1];
+  if (min === max) {
+    if (min === 0) return [0, 1];
+    const pad = Math.abs(min) * 0.5;
+    return niceTicks(min > 0 ? 0 : min - pad, max > 0 ? max + pad : 0, count);
+  }
+  const raw = (max - min) / Math.max(1, count);
+  const power = 10 ** Math.floor(Math.log10(raw));
+  const error = raw / power;
+  const step = (error >= 7.07 ? 10 : error >= 3.16 ? 5 : error >= 1.41 ? 2 : 1) * power;
+  const start = Math.floor(min / step) * step;
+  const end = Math.ceil(max / step) * step;
+  const ticks = [];
+  for (let v = start; v <= end + step / 2; v += step) ticks.push(clean(v));
+  return ticks;
+}
+function linearScale([d0, d1], [r0, r1]) {
+  const span = d1 - d0 || 1;
+  return (v) => r0 + (v - d0) / span * (r1 - r0);
+}
+function bandScale(n, [r0, r1], paddingInner = 0.2, paddingOuter = 0.1) {
+  const step = (r1 - r0) / Math.max(1, n - paddingInner + paddingOuter * 2);
+  const bandwidth = step * (1 - paddingInner);
+  const start = r0 + step * paddingOuter;
+  return { step, bandwidth, at: (i) => start + i * step };
+}
+function pointScale(n, [r0, r1]) {
+  const step = n > 1 ? (r1 - r0) / (n - 1) : 0;
+  return { step, at: (i) => n > 1 ? r0 + i * step : (r0 + r1) / 2 };
+}
+function stack(values, expand = false) {
+  const n = values[0]?.length ?? 0;
+  const out = values.map(() => new Array(n));
+  for (let i = 0; i < n; i++) {
+    const total = values.reduce((sum, s) => sum + Math.abs(s[i] ?? 0), 0) || 1;
+    let up = 0;
+    let down = 0;
+    for (let s = 0; s < values.length; s++) {
+      const v = (values[s][i] ?? 0) / (expand ? total : 1);
+      if (v >= 0) {
+        out[s][i] = [up, up + v];
+        up += v;
+      } else {
+        out[s][i] = [down, down + v];
+        down += v;
+      }
+    }
+  }
+  return out;
+}
+function extent(values, includeZero = true) {
+  let min = includeZero ? 0 : Number.POSITIVE_INFINITY;
+  let max = includeZero ? 0 : Number.NEGATIVE_INFINITY;
+  for (const s of values) for (const v of s) {
+    if (!Number.isFinite(v)) continue;
+    if (v < min) min = v;
+    if (v > max) max = v;
+  }
+  if (!Number.isFinite(min)) return [0, 1];
+  return [min, max];
+}
+export {
+  bandScale,
+  extent,
+  linearScale,
+  niceTicks,
+  pointScale,
+  stack
+};

package/dist/lib/chart/types.js

@@ -0,0 +1,45 @@
+// src/lib/chart/types.ts
+var CHART_SERIES_COUNT = 8;
+function chartColor(index) {
+  return `var(--chart-${index % CHART_SERIES_COUNT + 1})`;
+}
+var TONE_VAR = {
+  edition: "var(--tone-edition)",
+  collectible: "var(--tone-collectible)",
+  standard: "var(--tone-standard)",
+  info: "var(--tone-info)",
+  warning: "var(--tone-warning)",
+  primary: "var(--primary)",
+  neutral: "var(--muted-foreground)",
+  success: "var(--success)",
+  destructive: "var(--destructive)"
+};
+function toneColor(tone) {
+  return `oklch(from ${TONE_VAR[tone]} clamp(0.5, calc(l + 0.1), 0.72) max(calc(c * 1.1), 0.1) h)`;
+}
+function resolveSeries(series) {
+  return series.map((s, i) => ({
+    ...s,
+    colorValue: s.color ?? (s.tone ? toneColor(s.tone) : chartColor(i))
+  }));
+}
+function categoryStyle(categories, name, i) {
+  const c = categories?.[name];
+  return {
+    label: c?.label ?? name,
+    color: c?.color ?? (c?.tone ? toneColor(c.tone) : chartColor(i)),
+    icon: c?.icon
+  };
+}
+function numberValue(v) {
+  const n = typeof v === "number" ? v : Number(v);
+  return Number.isFinite(n) ? n : 0;
+}
+export {
+  CHART_SERIES_COUNT,
+  categoryStyle,
+  chartColor,
+  numberValue,
+  resolveSeries,
+  toneColor
+};

package/dist/lib/chart/use-arrival.js

@@ -0,0 +1,41 @@
+"use client";
+
+// src/lib/chart/use-arrival.ts
+import { useCallback, useEffect, useState } from "react";
+function useArrival() {
+  const [el, setEl] = useState(null);
+  const [arrived, setArrived] = useState(false);
+  const ref = useCallback((node) => setEl(node), []);
+  useEffect(() => {
+    if (!el || arrived) return;
+    const onScreen = () => {
+      const r = el.getBoundingClientRect();
+      return r.width > 0 && r.bottom > 0 && r.right > 0 && r.top < window.innerHeight && r.left < window.innerWidth;
+    };
+    if (typeof IntersectionObserver === "undefined" || onScreen()) {
+      setArrived(true);
+      return;
+    }
+    const observer = new IntersectionObserver((entries) => {
+      if (entries.some((e) => e.isIntersecting)) setArrived(true);
+    });
+    observer.observe(el);
+    let frame = 0;
+    const check = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => onScreen() && setArrived(true));
+    };
+    window.addEventListener("scroll", check, { passive: true, capture: true });
+    window.addEventListener("resize", check, { passive: true });
+    return () => {
+      observer.disconnect();
+      cancelAnimationFrame(frame);
+      window.removeEventListener("scroll", check, { capture: true });
+      window.removeEventListener("resize", check);
+    };
+  }, [el, arrived]);
+  return [ref, arrived];
+}
+export {
+  useArrival
+};

package/dist/{chunk-SRQWQUTW.js → lib/cn.js}

@@ -1,7 +1,6 @@
-import { clsx } from 'clsx';
-import { extendTailwindMerge, validators } from 'tailwind-merge';
-
 // src/lib/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge, validators } from "tailwind-merge";
 var dsTypographyTokens = [
   "display-4xl",
   "display-3xl",
@@ -59,5 +58,6 @@ var twMerge = extendTailwindMerge({
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-
-export { cn };
+export {
+  cn
+};