{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-bento",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/stats-section/stats-bento.tsx",
      "content": "'use client'\r\nimport React from 'react'\r\n\r\nexport const StatsBento = () => {\r\n  return (\r\n    <section className=\"min-h-screen bg-white flex flex-col justify-center\">\r\n      <div className=\"grid grid-cols-1 md:grid-cols-6 md:grid-rows-2 gap-4 max-w-7xl mx-auto\">\r\n        {/* Primary Stat */}\r\n        <div className=\"md:col-span-3 md:row-span-2 bg-zinc-950 rounded-3xl p-10 flex flex-col justify-between overflow-hidden relative\">\r\n          <div className=\"absolute bottom-0 left-0 right-0 top-0 bg-[repeating-linear-gradient(45deg,#383838_0px_1px,transparent_1px_10px)] mask-[radial-gradient(ellipse_80%_50%_at_100%_0%,#000_70%,transparent_110%)] pointer-events-none\"></div>\r\n          {/* <div className=\"absolute top-0 right-0 p-8 opacity-20\">\r\n            <div className=\"size-40 border-8 border-white rounded-full translate-x-10 -translate-y-10\" />\r\n          </div> */}\r\n          <div>\r\n            <span className=\"inline-block px-3 py-1 bg-zinc-800 rounded-full text-[10px] font-semibold text-zinc-400 uppercase tracking-widest mb-6\">\r\n              Market Share\r\n            </span>\r\n            <h3 className=\"text-6xl tracking-tighter text-white \">64%</h3>\r\n          </div>\r\n          <p className=\"text-zinc-400 text-sm max-w-xs\">\r\n            Dominating the cloud-native infrastructure market for venture-backed\r\n            startups.\r\n          </p>\r\n        </div>\r\n\r\n        {/* Secondary Stat A */}\r\n        <div className=\"md:col-span-3 bg-zinc-50 rounded-3xl p-8 border border-zinc-200 flex items-center justify-between\">\r\n          <div>\r\n            <p className=\"text-xs font-semibold uppercase tracking-widest text-zinc-400 mb-1\">\r\n              Growth\r\n            </p>\r\n            <p className=\"text-3xl text-zinc-900 \">+240%</p>\r\n          </div>\r\n          <div className=\"flex gap-1 items-end h-8\">\r\n            {[10, 20, 40, 30, 60, 50, 80, 70, 90, 100, 110].map((h, i) => (\r\n              <div\r\n                key={i}\r\n                className=\"w-1.5 bg-zinc-900 rounded-full\"\r\n                style={{ height: `${h}%` }}\r\n              />\r\n            ))}\r\n          </div>\r\n        </div>\r\n\r\n        {/* Tertiary Stat B */}\r\n        <div className=\"md:col-span-1 bg-white rounded-3xl p-6 border border-zinc-200 flex flex-col justify-center text-center\">\r\n          <p className=\"text-2xl text-zinc-900\">12</p>\r\n          <p className=\"text-xs font-semibold uppercase tracking-widest text-zinc-400\">\r\n            Awards\r\n          </p>\r\n        </div>\r\n\r\n        {/* Tertiary Stat C */}\r\n        <div className=\"md:col-span-2 bg-zinc-100 rounded-3xl p-6 flex items-center gap-4\">\r\n          <div className=\"size-10 text-2xl rounded-full bg-white flex items-center justify-center shrink-0 shadow-sm font-semibold\">\r\n            ★\r\n          </div>\r\n          <div>\r\n            <p className=\"text-sm text-zinc-900 leading-none\">4.9 / 5.0</p>\r\n            <p className=\"text-xs font-semibold text-zinc-500 mt-1\">\r\n              G2 Peer Reviews\r\n            </p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  )\r\n}\r\n",
      "type": "registry:block"
    },
    {
      "path": "./components/ui/timeline-animation.tsx",
      "content": "import type { Variants } from 'motion/react';\nimport { type HTMLMotionProps, motion, useInView } from 'motion/react';\nimport type React from 'react';\n\ntype TimelineContentProps<T extends keyof HTMLElementTagNameMap> = {\n  children?: React.ReactNode;\n  animationNum: number;\n  className?: string;\n  timelineRef: React.RefObject<HTMLElement | null>;\n  as?: T;\n  customVariants?: Variants;\n  once?: boolean;\n} & HTMLMotionProps<T>;\n\nexport const TimelineAnimation = <T extends keyof HTMLElementTagNameMap = 'div'>({\n  children,\n  animationNum,\n  timelineRef,\n  className,\n  as,\n  customVariants,\n  once = true,\n  ...props\n}: TimelineContentProps<T>) => {\n  const defaultSequenceVariants = {\n    visible: (i: number) => ({\n      filter: 'blur(0px)',\n      y: 0,\n      opacity: 1,\n      transition: {\n        delay: i * 0.5,\n        duration: 0.5,\n      },\n    }),\n    hidden: {\n      filter: 'blur(20px)',\n      y: 0,\n      opacity: 0,\n    },\n  };\n\n  const sequenceVariants = customVariants || defaultSequenceVariants;\n\n  const isInView = useInView(timelineRef, {\n    once,\n  });\n\n  const MotionComponent = motion[as || 'div'] as React.ElementType;\n\n  return (\n    <MotionComponent\n      initial='hidden'\n      animate={isInView ? 'visible' : 'hidden'}\n      custom={animationNum}\n      variants={sequenceVariants}\n      className={className}\n      {...props}\n    >\n      {children}\n    </MotionComponent>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}