Motion React

1/* eslint-disable react-refresh/only-export-components */
2/**
3 * BoldKit Motion — React adapter (L3).
4 *
5 * Thin wrapper around @boldkit/motion-core. Adds React lifecycle wiring
6 * to the framework-agnostic primitives. The Vue adapter mirrors this
7 * surface 1:1 so apps can switch frameworks without re-learning the API.
8 *
9 * Requires `motion.css` (L2 recipes) to be loaded. If you're using
10 * BoldKit's globals.css, the recipes are already included.
11 */
12import * as React from 'react'
13import { cn } from '@/lib/utils'
14import {
15  observeReveal,
16  staggerChildren,
17  triggerAnimation,
18  startViewTransition,
19  prefersReducedMotion,
20  type RevealOptions,
21  type StaggerOptions,
22} from '@/lib/motion-core'
23 
24// ──────────────────────────────────────────────────────────────────
25// <Reveal> — scroll-triggered entrance
26// ──────────────────────────────────────────────────────────────────
27 
28export type RevealDirection = 'up' | 'down' | 'left' | 'right'
29 
30export interface RevealProps
31  extends React.HTMLAttributes<HTMLDivElement>,
32    Omit<RevealOptions, 'rootMargin'> {
33  /** Direction to slide in from. Default 'up'. */
34  direction?: RevealDirection
35  /** Custom IntersectionObserver rootMargin. */
36  rootMargin?: string
37  /** Element tag to render. Default 'div'. */
38  as?: keyof React.JSX.IntrinsicElements
39}
40 
41export const Reveal = React.forwardRef<HTMLDivElement, RevealProps>(
42  ({ direction = 'up', rootMargin, threshold, once, delay, as, className, children, ...rest }, ref) => {
43    const innerRef = React.useRef<HTMLDivElement | null>(null)
44    React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)
45 
46    React.useEffect(() => {
47      const el = innerRef.current
48      if (!el) return
49      return observeReveal(el, { rootMargin, threshold, once, delay })
50    }, [rootMargin, threshold, once, delay])
51 
52    const Tag = (as ?? 'div') as React.ElementType
53    return (
54      <Tag
55        ref={innerRef}
56        className={cn('bk-reveal', `bk-reveal-${direction}`, className)}
57        {...rest}
58      >
59        {children}
60      </Tag>
61    )
62  }
63)
64Reveal.displayName = 'Reveal'
65 
66// … truncated