@sableui/react 0.6.2 → 0.7.1

package/dist/lib/taxonomy.js

@@ -0,0 +1,214 @@
+// src/lib/taxonomy.ts
+var COMPONENT_GROUPS = [
+  "Actions",
+  "Badges & pills",
+  "Charts",
+  "Chat & AI",
+  "Containers",
+  "Data display",
+  "Forms",
+  "Layout",
+  "Loading & progress",
+  "Media & mockups",
+  "Navigation",
+  "Overlays",
+  "Selection",
+  "Status",
+  "Text & code"
+];
+var COMPONENT_TAXONOMY = {
+  /* ── Actions ──────────────────────────────────────────────────────────────
+     Things whose whole purpose is to DO something on activation. `OverflowMenu`
+     is here, not in Overlays: it is the "more actions" button a reader reaches
+     for as an action (and the options half of Button's "main action with
+     options" pattern) — that its list opens in a layer is how it works, not
+     what it is. Copying is `useCopy` on a Button, not a component. */
+  Button: ["Actions", "either"],
+  OverflowMenu: ["Actions", "either"],
+  Toolbar: ["Actions", "either"],
+  /* ── Forms ────────────────────────────────────────────────────────────────
+     Typing or entering a value, and the structure a form is built from.
+     Choosing from options moved out to Selection. `ColorField` and
+     `ScrubField` are form vocabulary that happens to be used in tool chrome —
+     the register tag carries that, not the group. */
+  Calendar: ["Forms", "either"],
+  ColorField: ["Forms", "either"],
+  DatePicker: ["Forms", "either"],
+  Fieldset: ["Forms", "either"],
+  FileDropzone: ["Forms", "page"],
+  Form: ["Forms", "either"],
+  Input: ["Forms", "either"],
+  Label: ["Forms", "either"],
+  NumberField: ["Forms", "either"],
+  OtpField: ["Forms", "either"],
+  ScrubField: ["Forms", "workspace"],
+  SearchInput: ["Forms", "either"],
+  Textarea: ["Forms", "either"],
+  /* ── Selection ────────────────────────────────────────────────────────────
+     Choosing from options: on/off, one of many, several of many, a point on a
+     range. Split from Forms so a 27-item group became two a reader can scan.
+     `Toggle` sits with `Switch`, which its own meta calls its sibling;
+     `ThemeSelector`/`ThemeSwitcher` capture a stored preference. */
+  Checkbox: ["Selection", "either"],
+  CheckboxCard: ["Selection", "page"],
+  RadioCard: ["Selection", "page"],
+  Combobox: ["Selection", "either"],
+  DisclosurePicker: ["Selection", "either"],
+  FontPicker: ["Selection", "either"],
+  Radio: ["Selection", "either"],
+  Select: ["Selection", "either"],
+  Slider: ["Selection", "either"],
+  Switch: ["Selection", "either"],
+  ThemeSelector: ["Selection", "either"],
+  ThemeSwitcher: ["Selection", "either"],
+  Toggle: ["Selection", "either"],
+  /* ── Overlays ─────────────────────────────────────────────────────────────
+     Anything that renders above the page in its own layer. */
+  CommandMenu: ["Overlays", "either"],
+  ContextCard: ["Overlays", "page"],
+  ContextMenu: ["Overlays", "either"],
+  DestructiveActionModal: ["Overlays", "either"],
+  Dialog: ["Overlays", "either"],
+  Feedback: ["Overlays", "page"],
+  Menu: ["Overlays", "either"],
+  Popover: ["Overlays", "either"],
+  SettingsMenu: ["Overlays", "either"],
+  Sheet: ["Overlays", "either"],
+  Tooltip: ["Overlays", "either"],
+  /* ── Navigation ───────────────────────────────────────────────────────────
+     Getting somewhere else, or to more of the same thing. `Pagination` and
+     `ShowMore` (and a `Button` with `loading` for load-more) reveal more content and
+     stay together; `Tree` is the hierarchy browser. */
+  Breadcrumbs: ["Navigation", "either"],
+  BottomNav: ["Navigation", "page"],
+  Pagination: ["Navigation", "either"],
+  ShowMore: ["Navigation", "page"],
+  SideNav: ["Navigation", "page"],
+  Sidebar: ["Navigation", "page"],
+  Tabs: ["Navigation", "either"],
+  Tree: ["Navigation", "workspace"],
+  /* ── Layout ───────────────────────────────────────────────────────────────
+     The frame a product lives in, in either register (renamed from "Shells":
+     a designer looks for the app header and panels under Layout). The layout
+     PRIMITIVES — Stack, Row, Region, Grid — are foundations, not components,
+     and live on the Grid & layout page. */
+  AppHeader: ["Layout", "page"],
+  AppShell: ["Layout", "page"],
+  PageHeader: ["Layout", "page"],
+  PanelGroup: ["Layout", "workspace"],
+  PanelSection: ["Layout", "workspace"],
+  SectionHeader: ["Layout", "page"],
+  StatusBar: ["Layout", "workspace"],
+  Workspace: ["Layout", "workspace"],
+  /* ── Containers ───────────────────────────────────────────────────────────
+     A box that holds other content: bounds it, folds it, scrolls it, divides
+     it. `Card` moved here from Data Display — people look for a card as a
+     container, not as a way of showing data. */
+  Accordion: ["Containers", "either"],
+  Card: ["Containers", "page"],
+  Collapsible: ["Containers", "either"],
+  Scroller: ["Containers", "either"],
+  Separator: ["Containers", "either"],
+  /* ── Charts ───────────────────────────────────────────────────────────────
+     Plotted data for dashboards, landing pages and decks: SVG on the theme's
+     tones, with arrival and data-change motion and a data table for assistive
+     tech. Data-heavy apps (streaming, zoom, thousands of points) belong on a
+     charting library. `SegmentedBar` and `Meter` stay in Data display: they
+     are readings, not plots. */
+  AreaChart: ["Charts", "page"],
+  BarChart: ["Charts", "page"],
+  LineChart: ["Charts", "page"],
+  PieChart: ["Charts", "page"],
+  RadarChart: ["Charts", "page"],
+  RadialChart: ["Charts", "page"],
+  Sparkline: ["Charts", "either"],
+  /* ── Data display ─────────────────────────────────────────────────────────
+     Showing records and readings. `Meter` (bar or ring) is here: it shows a
+     value within a known range (a reading), which is not loading or progress. */
+  Avatar: ["Data display", "either"],
+  DataTable: ["Data display", "either"],
+  DateTile: ["Data display", "page"],
+  Entity: ["Data display", "either"],
+  GlidingHighlight: ["Data display", "either"],
+  Meter: ["Data display", "either"],
+  RelativeTime: ["Data display", "either"],
+  SegmentedBar: ["Data display", "either"],
+  Table: ["Data display", "either"],
+  /* ── Badges & pills ───────────────────────────────────────────────────────
+     Small labelled shapes. `Badge` (with `dot`) / `StatusDot` belong HERE, not in
+     Status: an earlier audit moved them next to Toast/Banner and the crossing
+     links went UP (14 → 21) — they relate to Badge, Pill and Entity, which is
+     a badge-shaped argument. This group makes that finding the obvious home. */
+  Badge: ["Badges & pills", "either"],
+  NotificationBadge: ["Badges & pills", "either"],
+  Pill: ["Badges & pills", "page"],
+  StatusDot: ["Badges & pills", "either"],
+  /* ── Text & code ──────────────────────────────────────────────────────────
+     Presenting a string: code, a shortcut, a truncated path, a copyable value. */
+  Code: ["Text & code", "either"],
+  CodeBlock: ["Text & code", "either"],
+  Kbd: ["Text & code", "either"],
+  MiddleTruncate: ["Text & code", "either"],
+  /* ── Status ───────────────────────────────────────────────────────────────
+     Telling the user what happened or what state they are in: alerts,
+     callouts, empty and error states. `Note` (a callout) joins Banner and
+     Toast — it is where a designer looks for an "alert" box. */
+  Banner: ["Status", "page"],
+  EmptyState: ["Status", "page"],
+  InlineStatus: ["Status", "either"],
+  Note: ["Status", "page"],
+  Toast: ["Status", "either"],
+  /* ── Loading & progress ───────────────────────────────────────────────────
+     Waiting, and how far along something is. */
+  PageLoader: ["Loading & progress", "page"],
+  Progress: ["Loading & progress", "either"],
+  Skeleton: ["Loading & progress", "either"],
+  Spinner: ["Loading & progress", "either"],
+  Stepper: ["Loading & progress", "page"],
+  /* ── Chat & AI ────────────────────────────────────────────────────────────
+     A deliberate exception to "group by kind", made for finding: someone
+     building a conversation looks for one place, and these were scattered
+     across five groups. The rule that keeps it from becoming a second home for
+     everything: a member exists ONLY inside a conversation. A Button used in a
+     chat is still a Button; a Message has no meaning outside one. */
+  Attachment: ["Chat & AI", "either"],
+  Bubble: ["Chat & AI", "either"],
+  ChatComposer: ["Chat & AI", "either"],
+  Marker: ["Chat & AI", "either"],
+  Message: ["Chat & AI", "either"],
+  MessageScroller: ["Chat & AI", "either"],
+  StreamingText: ["Chat & AI", "either"],
+  ThinkingOrb: ["Chat & AI", "either"],
+  /* ── Media & mockups ──────────────────────────────────────────────────────
+     Presenting images and video: players, galleries, scrolling strips, and the
+     device frames a product image sits in. `Video` was filed as a mockup; it is
+     a player, and it sits with the other media now. */
+  Browser: ["Media & mockups", "page"],
+  Carousel: ["Media & mockups", "page"],
+  GradientArt: ["Media & mockups", "either"],
+  Marquee: ["Media & mockups", "page"],
+  MediaImage: ["Media & mockups", "either"],
+  MediaTile: ["Media & mockups", "page"],
+  Phone: ["Media & mockups", "page"],
+  Video: ["Media & mockups", "page"]
+};
+function componentsInGroup(group) {
+  return Object.entries(COMPONENT_TAXONOMY).filter(([, [g]]) => g === group).map(([name]) => name).sort((a, b) => componentLabel(a).localeCompare(componentLabel(b)));
+}
+function componentSlug(name) {
+  return name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+var LABEL_OVERRIDES = {
+  DestructiveActionModal: "Destructive Modal",
+  OtpField: "OTP Field"
+};
+function componentLabel(name) {
+  return LABEL_OVERRIDES[name] ?? name.replace(/([a-z0-9])([A-Z])/g, "$1 $2");
+}
+export {
+  COMPONENT_GROUPS,
+  COMPONENT_TAXONOMY,
+  componentLabel,
+  componentSlug,
+  componentsInGroup
+};

package/dist/lib/trim-label.js

@@ -0,0 +1,20 @@
+// src/lib/trim-label.tsx
+import { Children, isValidElement } from "react";
+import { jsx } from "react/jsx-runtime";
+function trimLabel(children) {
+  if (typeof children === "string" || typeof children === "number") {
+    return /* @__PURE__ */ jsx("span", { className: "sable-label-trim", children });
+  }
+  if (children == null || typeof children === "boolean") return children;
+  if (isValidElement(children)) return children;
+  let wrapped = false;
+  const out = Children.map(children, (child, i) => {
+    if (typeof child !== "string" && typeof child !== "number") return child;
+    wrapped = true;
+    return /* @__PURE__ */ jsx("span", { className: "sable-label-trim", children: child }, `label-${i}`);
+  });
+  return wrapped ? out : children;
+}
+export {
+  trimLabel
+};

package/dist/lib/use-copy.js

@@ -0,0 +1,27 @@
+"use client";
+
+// src/lib/use-copy.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+function useCopy(text, { timeout = 1500 } = {}) {
+  const [copied, setCopied] = useState(false);
+  const timer = useRef(null);
+  useEffect(() => () => {
+    if (timer.current) clearTimeout(timer.current);
+  }, []);
+  const copy = useCallback(async () => {
+    if (typeof navigator === "undefined" || !navigator.clipboard) return false;
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      return false;
+    }
+    setCopied(true);
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => setCopied(false), timeout);
+    return true;
+  }, [text, timeout]);
+  return { copy, copied };
+}
+export {
+  useCopy
+};

package/dist/lib/use-edge-fade.js

@@ -0,0 +1,32 @@
+"use client";
+
+// src/lib/use-edge-fade.ts
+import { useCallback, useState } from "react";
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.js";
+import { useResizeObserver } from "./use-resize-observer.js";
+function useEdgeFade(ref, orientation) {
+  const [showStart, setShowStart] = useState(false);
+  const [showEnd, setShowEnd] = useState(false);
+  const sync = useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (orientation === "horizontal") {
+      const { scrollLeft, scrollWidth, clientWidth } = el;
+      setShowStart(scrollLeft > 0);
+      setShowEnd(scrollLeft < scrollWidth - clientWidth - 1);
+    } else {
+      const { scrollTop, scrollHeight, clientHeight } = el;
+      setShowStart(scrollTop > 0);
+      setShowEnd(scrollTop < scrollHeight - clientHeight - 1);
+    }
+  }, [ref, orientation]);
+  useIsomorphicLayoutEffect(sync);
+  useResizeObserver(sync, [ref]);
+  const fade = "calc(var(--spacing) * 7)";
+  const direction = orientation === "vertical" ? "bottom" : "right";
+  const mask = showStart || showEnd ? `linear-gradient(to ${direction}, ${showStart ? "transparent" : "#000"}, #000 ${showStart ? fade : "0"}, #000 ${showEnd ? `calc(100% - ${fade})` : "100%"}, ${showEnd ? "transparent" : "#000"})` : void 0;
+  return { sync, style: mask ? { maskImage: mask, WebkitMaskImage: mask } : void 0 };
+}
+export {
+  useEdgeFade
+};

package/dist/lib/use-isomorphic-layout-effect.js

@@ -0,0 +1,8 @@
+"use client";
+
+// src/lib/use-isomorphic-layout-effect.ts
+import { useEffect, useLayoutEffect } from "react";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+export {
+  useIsomorphicLayoutEffect
+};

package/dist/lib/use-resize-observer.js

@@ -0,0 +1,18 @@
+"use client";
+
+// src/lib/use-resize-observer.ts
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.js";
+function useResizeObserver(measure, refs) {
+  useIsomorphicLayoutEffect(() => {
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(measure);
+    for (const ref of refs) {
+      if (ref.current) ro.observe(ref.current);
+    }
+    return () => ro.disconnect();
+  }, [measure]);
+}
+export {
+  useResizeObserver
+};

package/dist/lib/use-scroll-activity.js

@@ -0,0 +1,52 @@
+"use client";
+
+// src/lib/use-scroll-activity.ts
+import { useCallback, useEffect, useRef } from "react";
+var LINGER_MS = 600;
+function useScrollActivity() {
+  const nodeRef = useRef(null);
+  const timer = useRef(null);
+  const clear = useCallback(() => {
+    if (timer.current !== null) {
+      window.clearTimeout(timer.current);
+      timer.current = null;
+    }
+  }, []);
+  const onScroll = useCallback(() => {
+    const node = nodeRef.current;
+    if (!node) return;
+    node.setAttribute("data-scrolling", "");
+    clear();
+    timer.current = window.setTimeout(() => {
+      nodeRef.current?.removeAttribute("data-scrolling");
+      timer.current = null;
+    }, LINGER_MS);
+  }, [clear]);
+  const setNode = useCallback(
+    (node) => {
+      const previous = nodeRef.current;
+      if (previous === node) return;
+      if (previous) {
+        previous.removeEventListener("scroll", onScroll);
+        previous.removeAttribute("data-scrolling");
+      }
+      nodeRef.current = node;
+      if (node) node.addEventListener("scroll", onScroll, { passive: true });
+    },
+    [onScroll]
+  );
+  useEffect(() => {
+    return () => {
+      clear();
+      const node = nodeRef.current;
+      if (node) {
+        node.removeEventListener("scroll", onScroll);
+        node.removeAttribute("data-scrolling");
+      }
+    };
+  }, [clear, onScroll]);
+  return setNode;
+}
+export {
+  useScrollActivity
+};

package/dist/lib/use-wheel-to-horizontal.js

@@ -0,0 +1,65 @@
+"use client";
+
+// src/lib/use-wheel-to-horizontal.ts
+import { useCallback, useRef } from "react";
+var LINE_HEIGHT = 16;
+var PAGE_HEIGHT = 400;
+function toPixels(delta, mode) {
+  if (mode === 1) return delta * LINE_HEIGHT;
+  if (mode === 2) return delta * PAGE_HEIGHT;
+  return delta;
+}
+function useWheelToHorizontal(enabled = true) {
+  const nodeRef = useRef(null);
+  const onWheel = useCallback((event) => {
+    const el = nodeRef.current;
+    if (!el) return;
+    if (event.shiftKey) return;
+    if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) return;
+    if (event.deltaY === 0) return;
+    const delta = toPixels(event.deltaY, event.deltaMode);
+    const max = el.scrollWidth - el.clientWidth;
+    if (max <= 0) return;
+    const atStart = Math.round(el.scrollLeft) <= 0;
+    const atEnd = Math.round(el.scrollLeft) >= max;
+    if (delta < 0 && atStart || delta > 0 && atEnd) return;
+    event.preventDefault();
+    el.scrollLeft += delta;
+  }, []);
+  return useCallback(
+    (node) => {
+      const previous = nodeRef.current;
+      if (previous === node) return;
+      previous?.removeEventListener("wheel", onWheel);
+      nodeRef.current = node;
+      if (node && enabled) {
+        node.addEventListener("wheel", onWheel, { passive: false });
+      }
+    },
+    [enabled, onWheel]
+  );
+}
+function scrollRegionKeyDown(event, orientation) {
+  const el = event.currentTarget;
+  const horizontal = orientation === "horizontal";
+  const page = horizontal ? el.clientWidth : el.clientHeight;
+  const step = Math.max(40, page * 0.2);
+  const back = horizontal ? "ArrowLeft" : "ArrowUp";
+  const forward = horizontal ? "ArrowRight" : "ArrowDown";
+  const axis = horizontal ? "scrollLeft" : "scrollTop";
+  const max = horizontal ? el.scrollWidth - el.clientWidth : el.scrollHeight - el.clientHeight;
+  let next = null;
+  if (event.key === back) next = el[axis] - step;
+  else if (event.key === forward) next = el[axis] + step;
+  else if (event.key === "Home") next = 0;
+  else if (event.key === "End") next = max;
+  else if (event.key === "PageUp") next = el[axis] - page;
+  else if (event.key === "PageDown") next = el[axis] + page;
+  if (next === null) return;
+  event.preventDefault();
+  el[axis] = Math.max(0, Math.min(max, next));
+}
+export {
+  scrollRegionKeyDown,
+  useWheelToHorizontal
+};

package/dist/motion/MotionProvider.js

@@ -0,0 +1,75 @@
+"use client";
+
+// src/motion/MotionProvider.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import { useReducedMotion } from "./useReducedMotion.js";
+import { jsx } from "react/jsx-runtime";
+var MotionContext = createContext(null);
+function resolveEnabled(policy, prefersReducedMotion) {
+  if (policy === "off" || policy === "reduced") return false;
+  if (policy === "full") return true;
+  return !prefersReducedMotion;
+}
+function MotionProvider({
+  children,
+  defaultPolicy = "system",
+  policy: controlledPolicy,
+  onPolicyChange,
+  target = "root"
+}) {
+  const [uncontrolled, setUncontrolled] = useState(defaultPolicy);
+  const policy = controlledPolicy ?? uncontrolled;
+  const prefersReducedMotion = useReducedMotion();
+  const setPolicy = useCallback(
+    (next) => {
+      if (controlledPolicy === void 0) setUncontrolled(next);
+      onPolicyChange?.(next);
+    },
+    [controlledPolicy, onPolicyChange]
+  );
+  useEffect(() => {
+    const el = target === "root" ? typeof document !== "undefined" ? document.documentElement : null : target();
+    if (!el) return;
+    if (policy === "system") {
+      el.removeAttribute("data-motion");
+    } else {
+      el.setAttribute("data-motion", policy);
+    }
+    return () => {
+      el.removeAttribute("data-motion");
+    };
+  }, [policy, target]);
+  const value = useMemo(
+    () => ({
+      policy,
+      setPolicy,
+      prefersReducedMotion,
+      enabled: resolveEnabled(policy, prefersReducedMotion)
+    }),
+    [policy, setPolicy, prefersReducedMotion]
+  );
+  return /* @__PURE__ */ jsx(MotionContext.Provider, { value, children });
+}
+function useMotion() {
+  const ctx = useContext(MotionContext);
+  const prefersReducedMotion = useReducedMotion();
+  if (ctx) return ctx;
+  return {
+    policy: "system",
+    setPolicy: () => {
+    },
+    prefersReducedMotion,
+    enabled: resolveEnabled("system", prefersReducedMotion)
+  };
+}
+export {
+  MotionProvider,
+  useMotion
+};

package/dist/motion/Presence.js

@@ -0,0 +1,112 @@
+"use client";
+
+// src/motion/Presence.tsx
+import { cloneElement, isValidElement, useRef, useState } from "react";
+import { mergeRefs } from "../lib/refs.js";
+import { useIsomorphicLayoutEffect } from "../lib/use-isomorphic-layout-effect.js";
+import { useMotion } from "./MotionProvider.js";
+function motionScale(node) {
+  const raw = Number.parseFloat(getComputedStyle(node).getPropertyValue("--motion-scale"));
+  return Number.isFinite(raw) ? Math.max(0, raw) : 1;
+}
+function Presence({
+  show,
+  children,
+  duration,
+  easing,
+  offset = 8,
+  onExitComplete
+}) {
+  const { enabled } = useMotion();
+  const [mounted, setMounted] = useState(show);
+  const nodeRef = useRef(null);
+  const prevShow = useRef(show);
+  const animRef = useRef(null);
+  const exitCompleteRef = useRef(onExitComplete);
+  const didExit = useRef(false);
+  useIsomorphicLayoutEffect(() => {
+    exitCompleteRef.current = onExitComplete;
+  });
+  useIsomorphicLayoutEffect(() => () => {
+    if (!animRef.current) return;
+    animRef.current.onfinish = null;
+    animRef.current.oncancel = null;
+    animRef.current.cancel();
+    animRef.current = null;
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    if (!mounted && didExit.current) {
+      didExit.current = false;
+      exitCompleteRef.current?.();
+    }
+  }, [mounted]);
+  useIsomorphicLayoutEffect(() => {
+    const node = nodeRef.current;
+    const was = prevShow.current;
+    prevShow.current = show;
+    if (was === show && (enabled || !animRef.current)) return;
+    if (animRef.current) {
+      animRef.current.onfinish = null;
+      animRef.current.oncancel = null;
+      animRef.current.cancel();
+      animRef.current = null;
+    }
+    const canAnimate = enabled && node && typeof node.animate === "function";
+    const scale = node ? motionScale(node) : 1;
+    if (show) {
+      setMounted(true);
+      if (!canAnimate || !node) return;
+      animRef.current = node.animate(
+        [
+          { opacity: 0, transform: `translateY(${offset}px)` },
+          { opacity: 1, transform: "translateY(0)" }
+        ],
+        {
+          duration: (duration?.enter ?? 200) * scale,
+          easing: easing?.enter ?? "cubic-bezier(0, 0, 0.2, 1)",
+          fill: "backwards"
+        }
+      );
+      return;
+    }
+    const finish = () => {
+      if (animRef.current) {
+        animRef.current.onfinish = null;
+        animRef.current.oncancel = null;
+        animRef.current.cancel();
+      }
+      animRef.current = null;
+      didExit.current = true;
+      setMounted(false);
+    };
+    if (!canAnimate || !node) {
+      finish();
+      return;
+    }
+    const anim = node.animate(
+      [
+        { opacity: 1, transform: "translateY(0)" },
+        { opacity: 0, transform: `translateY(${offset}px)` }
+      ],
+      {
+        duration: (duration?.exit ?? 150) * scale,
+        easing: easing?.exit ?? "cubic-bezier(0.4, 0, 1, 1)",
+        fill: "forwards"
+      }
+    );
+    animRef.current = anim;
+    anim.onfinish = finish;
+    anim.oncancel = finish;
+  }, [show, enabled, offset, duration?.enter, duration?.exit, easing?.enter, easing?.exit]);
+  if (!show && !mounted) return null;
+  if (!isValidElement(children)) return children;
+  const element = children;
+  const childRef = element.props.ref;
+  return cloneElement(element, {
+    ref: mergeRefs(nodeRef, childRef)
+  });
+}
+Presence.displayName = "Presence";
+export {
+  Presence
+};

package/dist/motion/Reveal.js

@@ -0,0 +1,42 @@
+"use client";
+
+// src/motion/Reveal.tsx
+import { cn } from "../lib/cn.js";
+import { useMotion } from "./MotionProvider.js";
+import { useInView } from "./useInView.js";
+import { jsx } from "react/jsx-runtime";
+function Reveal({
+  as,
+  delay,
+  when = true,
+  once,
+  amount,
+  rootMargin,
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const Comp = as ?? "div";
+  const { enabled } = useMotion();
+  const { ref, inView } = useInView({ once, amount, rootMargin });
+  const shown = inView && when || !enabled;
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "data-reveal": shown ? "in" : "out",
+      className: cn("motion-reveal", className),
+      style: delay ? {
+        transitionDelay: enabled ? `calc(${delay}ms * var(--motion-scale, 1))` : "0ms",
+        ...style
+      } : style,
+      ...props,
+      children
+    }
+  );
+}
+Reveal.displayName = "Reveal";
+export {
+  Reveal
+};