{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "advanced-stats",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/stats-section/advanced-stats/index.tsx",
      "content": "'use client'\r\nimport { cn } from '@/lib/utils'\r\nimport React, { useRef } from 'react'\r\nimport { ClippedAreaChart } from './charts'\r\nimport { TimelineAnimation } from '@/components/ui/timeline-animation'\r\n\r\nconst kpis = [\r\n  { label: 'Total Revenue', value: '$2.4M', change: '+12.5%', status: 'up' },\r\n  {\r\n    label: 'Active Subscriptions',\r\n    value: '14,205',\r\n    change: '+4.2%',\r\n    status: 'up',\r\n  },\r\n  {\r\n    label: 'Avg. Response Time',\r\n    value: '184ms',\r\n    change: '-8.1%',\r\n    status: 'down',\r\n  },\r\n  { label: 'Churn Rate', value: '1.2%', change: '-0.4%', status: 'down' },\r\n]\r\n\r\nexport const AdvancedStats: React.FC = () => {\r\n  const timelineRef = useRef<HTMLDivElement>(null)\r\n\r\n  return (\r\n    <section\r\n      ref={timelineRef}\r\n      className=\"flex flex-col gap-8 py-4 bg-white min-h-screen justify-center md:px-0 px-5 font-dmSans\"\r\n    >\r\n      <div className=\"max-w-6xl mx-auto\">\r\n        <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-8\">\r\n          {/* Main Chart Section */}\r\n          <TimelineAnimation\r\n            animationNum={1}\r\n            timelineRef={timelineRef}\r\n            className=\"lg:col-span-2 p-8 rounded-3xl bg-zinc-50 border border-zinc-200\"\r\n          >\r\n            <ClippedAreaChart />\r\n          </TimelineAnimation>\r\n\r\n          {/* Breakdown Section */}\r\n          <div>\r\n            <div className=\"flex flex-col gap-4\">\r\n              <TimelineAnimation\r\n                animationNum={2}\r\n                timelineRef={timelineRef}\r\n                className=\"p-6 rounded-3xl h-full bg-zinc-900 text-white flex flex-col justify-between shadow-lg\"\r\n              >\r\n                <div>\r\n                  <p className=\"text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-500 mb-2\">\r\n                    Primary Goal\r\n                  </p>\r\n                  <h4 className=\"text-xl font-bold tracking-tight\">\r\n                    Enterprise Adoption\r\n                  </h4>\r\n                </div>\r\n                <div className=\"mt-8\">\r\n                  <div className=\"flex justify-between items-end mb-2\">\r\n                    <span className=\"text-3xl font-semibold tracking-tighter \">\r\n                      82%\r\n                    </span>\r\n                    <span className=\"text-xs font-medium text-zinc-400 mb-1\">\r\n                      Target: 90%\r\n                    </span>\r\n                  </div>\r\n                  <div className=\"w-full h-1.5 bg-zinc-800 rounded-full overflow-hidden\">\r\n                    <div className=\"h-full bg-white w-[82%] rounded-full\" />\r\n                  </div>\r\n                </div>\r\n              </TimelineAnimation>\r\n\r\n              <TimelineAnimation\r\n                animationNum={3}\r\n                timelineRef={timelineRef}\r\n                className=\"p-6 rounded-3xl h-full bg-zinc-50 border border-zinc-200\"\r\n              >\r\n                <div className=\"flex items-center gap-3 mb-4\">\r\n                  <div className=\"size-8 rounded-lg bg-zinc-50 flex items-center justify-center border border-zinc-100\">\r\n                    <svg\r\n                      xmlns=\"http://www.w3.org/2000/svg\"\r\n                      viewBox=\"0 0 24 24\"\r\n                      className=\"w-6 h-6\"\r\n                      color=\"#000000\"\r\n                      fill=\"none\"\r\n                      stroke=\"#141B34\"\r\n                      strokeWidth=\"1.5\"\r\n                      strokeLinecap=\"round\"\r\n                      strokeLinejoin=\"round\"\r\n                    >\r\n                      <path d=\"M15 8C15 9.65685 13.6569 11 12 11C10.3431 11 9 9.65685 9 8C9 6.34315 10.3431 5 12 5C13.6569 5 15 6.34315 15 8Z\" />\r\n                      <path d=\"M16 4C17.6569 4 19 5.34315 19 7C19 8.22309 18.2681 9.27523 17.2183 9.7423\" />\r\n                      <path d=\"M13.7143 14H10.2857C7.91876 14 5.99998 15.9188 5.99998 18.2857C5.99998 19.2325 6.76749 20 7.71426 20H16.2857C17.2325 20 18 19.2325 18 18.2857C18 15.9188 16.0812 14 13.7143 14Z\" />\r\n                      <path d=\"M17.7143 13C20.0812 13 22 14.9188 22 17.2857C22 18.2325 21.2325 19 20.2857 19\" />\r\n                      <path d=\"M8 4C6.34315 4 5 5.34315 5 7C5 8.22309 5.73193 9.27523 6.78168 9.7423\" />\r\n                      <path d=\"M3.71429 19C2.76751 19 2 18.2325 2 17.2857C2 14.9188 3.91878 13 6.28571 13\" />\r\n                    </svg>\r\n                  </div>\r\n                  <h4 className=\"font-bold text-zinc-900\">User Growth</h4>\r\n                </div>\r\n                <p className=\"text-sm text-zinc-500\">\r\n                  Organic acquisition is up{' '}\r\n                  <span className=\"text-zinc-900 font-semibold\">24%</span>{' '}\r\n                  compared to previous quarter.\r\n                </p>\r\n              </TimelineAnimation>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        {/* KPI Row */}\r\n        <div className=\"grid grid-cols-2 md:grid-cols-4 gap-4 pt-6\">\r\n          {kpis.map((kpi, index) => (\r\n            <TimelineAnimation\r\n              animationNum={4 + index}\r\n              timelineRef={timelineRef}\r\n              key={kpi.label}\r\n              className={cn(\r\n                'p-6 rounded-2xl border bg-zinc-50 border-zinc-200 transition-colors',\r\n                kpi.status === 'up'\r\n                  ? 'hover:border-emerald-400 hover:bg-emerald-50'\r\n                  : 'hover:border-rose-400 hover:bg-rose-50'\r\n              )}\r\n            >\r\n              <p className=\"text-xs font-bold text-zinc-400 uppercase tracking-widest mb-2\">\r\n                {kpi.label}\r\n              </p>\r\n              <div className=\"flex items-baseline justify-between\">\r\n                <p className=\"text-2xl font-black text-zinc-900  tracking-tighter\">\r\n                  {kpi.value}\r\n                </p>\r\n                <span\r\n                  className={cn(\r\n                    'text-xs font-bold  px-1.5 py-0.5 rounded',\r\n                    kpi.status === 'up'\r\n                      ? 'text-emerald-600 bg-emerald-50'\r\n                      : 'text-rose-600 bg-rose-50'\r\n                  )}\r\n                >\r\n                  {kpi.change}\r\n                </span>\r\n              </div>\r\n            </TimelineAnimation>\r\n          ))}\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"
}