{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "motion-react",
  "title": "Motion React",
  "description": "BoldKit Motion React adapter — <Motion>/<Reveal>/<Stagger> components plus useShake and useViewTransition hooks over a framework-agnostic core.",
  "registryDependencies": [
    "@boldkit/motion",
    "@boldkit/motion-core",
    "@boldkit/utils"
  ],
  "files": [
    {
      "path": "registry/default/ui/motion.tsx",
      "content": "/* eslint-disable react-refresh/only-export-components */\n/**\n * BoldKit Motion — React adapter (L3).\n *\n * Thin wrapper around @boldkit/motion-core. Adds React lifecycle wiring\n * to the framework-agnostic primitives. The Vue adapter mirrors this\n * surface 1:1 so apps can switch frameworks without re-learning the API.\n *\n * Requires `motion.css` (L2 recipes) to be loaded. If you're using\n * BoldKit's globals.css, the recipes are already included.\n */\nimport * as React from 'react'\nimport { cn } from '@/lib/utils'\nimport {\n  observeReveal,\n  staggerChildren,\n  triggerAnimation,\n  startViewTransition,\n  prefersReducedMotion,\n  type RevealOptions,\n  type StaggerOptions,\n} from '@/lib/motion-core'\n\n// ──────────────────────────────────────────────────────────────────\n// <Reveal> — scroll-triggered entrance\n// ──────────────────────────────────────────────────────────────────\n\nexport type RevealDirection = 'up' | 'down' | 'left' | 'right'\n\nexport interface RevealProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Omit<RevealOptions, 'rootMargin'> {\n  /** Direction to slide in from. Default 'up'. */\n  direction?: RevealDirection\n  /** Custom IntersectionObserver rootMargin. */\n  rootMargin?: string\n  /** Element tag to render. Default 'div'. */\n  as?: keyof React.JSX.IntrinsicElements\n}\n\nexport const Reveal = React.forwardRef<HTMLDivElement, RevealProps>(\n  ({ direction = 'up', rootMargin, threshold, once, delay, as, className, children, ...rest }, ref) => {\n    const innerRef = React.useRef<HTMLDivElement | null>(null)\n    React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    React.useEffect(() => {\n      const el = innerRef.current\n      if (!el) return\n      return observeReveal(el, { rootMargin, threshold, once, delay })\n    }, [rootMargin, threshold, once, delay])\n\n    const Tag = (as ?? 'div') as React.ElementType\n    return (\n      <Tag\n        ref={innerRef}\n        className={cn('bk-reveal', `bk-reveal-${direction}`, className)}\n        {...rest}\n      >\n        {children}\n      </Tag>\n    )\n  }\n)\nReveal.displayName = 'Reveal'\n\n// ──────────────────────────────────────────────────────────────────\n// <Motion> — declarative recipe composition\n// ──────────────────────────────────────────────────────────────────\n\nexport interface MotionProps extends React.HTMLAttributes<HTMLElement> {\n  as?: keyof React.JSX.IntrinsicElements\n  /** Apply .bk-press for interactive shadow choreography. */\n  press?: boolean\n  /** Apply .bk-stamp-in entrance. */\n  stamp?: boolean\n  /** Apply .bk-pulse-shadow. */\n  pulse?: boolean\n}\n\nexport const Motion = React.forwardRef<HTMLElement, MotionProps>(\n  ({ as, press, stamp, pulse, className, children, ...rest }, ref) => {\n    const Tag = (as ?? 'div') as React.ElementType\n    return (\n      <Tag\n        ref={ref}\n        className={cn(\n          press && 'bk-press',\n          stamp && 'bk-stamp-in',\n          pulse && 'bk-pulse-shadow',\n          className\n        )}\n        {...rest}\n      >\n        {children}\n      </Tag>\n    )\n  }\n)\nMotion.displayName = 'Motion'\n\n// ──────────────────────────────────────────────────────────────────\n// <Stagger> — sequence children entrance\n// ──────────────────────────────────────────────────────────────────\n\nexport interface StaggerProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    StaggerOptions {\n  as?: keyof React.JSX.IntrinsicElements\n}\n\nexport const Stagger = React.forwardRef<HTMLDivElement, StaggerProps>(\n  ({ delay, initialDelay, selector, as, className, children, ...rest }, ref) => {\n    const innerRef = React.useRef<HTMLDivElement | null>(null)\n    React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    React.useEffect(() => {\n      const el = innerRef.current\n      if (!el) return\n      return staggerChildren(el, { delay, initialDelay, selector })\n    }, [delay, initialDelay, selector])\n\n    const Tag = (as ?? 'div') as React.ElementType\n    return (\n      <Tag ref={innerRef} className={className} {...rest}>\n        {children}\n      </Tag>\n    )\n  }\n)\nStagger.displayName = 'Stagger'\n\n// ──────────────────────────────────────────────────────────────────\n// useShake — imperative shake-on-error\n// ──────────────────────────────────────────────────────────────────\n\n/**\n * Returns a function that shakes a given element (e.g. an invalid input).\n *\n *   const shake = useShake()\n *   shake(inputRef.current)\n */\nexport function useShake() {\n  return React.useCallback(async (el: Element | null) => {\n    if (!el) return\n    await triggerAnimation(el, 'bk-shake-x')\n  }, [])\n}\n\n// ──────────────────────────────────────────────────────────────────\n// useViewTransition — wraps document.startViewTransition\n// ──────────────────────────────────────────────────────────────────\n\n/**\n * Returns a function that runs `callback` inside a view transition where\n * supported. Falls back to invoking the callback directly. Always safe to call.\n */\nexport function useViewTransition() {\n  return React.useCallback((callback: () => void | Promise<void>) => {\n    return startViewTransition(callback)\n  }, [])\n}\n\n// Re-export the core helper so consumers don't need a second import\nexport { prefersReducedMotion }\n",
      "type": "registry:ui",
      "target": "components/ui/motion.tsx"
    }
  ],
  "type": "registry:ui"
}