{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-number",
  "title": "Animated Number",
  "description": "Number that rolls up or down when its value changes.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "@ikas/motion",
    "@ikas/utils"
  ],
  "files": [
    {
      "path": "registry/ikas/animated-number.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { springOrInstant } from \"@/lib/motion\"\n\nconst defaultFormat = new Intl.NumberFormat(\"tr-TR\").format\n\ntype AnimatedNumberProps = Omit<React.ComponentProps<\"span\">, \"children\"> & {\n  value: number\n  /** Formats the number for display. Defaults to tr-TR grouping. */\n  format?: (value: number) => string\n}\n\n/**\n * A number that rolls when it changes: increases come up from below,\n * decreases drop from above, so the direction is readable at a glance.\n */\nfunction AnimatedNumber({ value, format = defaultFormat, className, ...props }: AnimatedNumberProps) {\n  const reduce = useReducedMotion()\n  // Derive direction during render (React's \"adjust state on prop change\" pattern).\n  const [previous, setPrevious] = React.useState(value)\n  const [direction, setDirection] = React.useState(0)\n  if (value !== previous) {\n    setDirection(value > previous ? 1 : -1)\n    setPrevious(value)\n  }\n\n  const offset = reduce ? 0 : 10\n\n  return (\n    <span data-slot=\"animated-number\" className={cn(\"relative inline-flex overflow-hidden tabular-nums\", className)} {...props}>\n      <AnimatePresence mode=\"popLayout\" initial={false} custom={direction}>\n        <motion.span\n          key={value}\n          custom={direction}\n          variants={{\n            enter: (dir: number) => ({ y: offset * dir, opacity: 0 }),\n            center: { y: 0, opacity: 1 },\n            exit: (dir: number) => ({ y: -offset * dir, opacity: 0 }),\n          }}\n          initial=\"enter\"\n          animate=\"center\"\n          exit=\"exit\"\n          transition={springOrInstant(reduce)}\n          className=\"inline-block\"\n        >\n          {format(value)}\n        </motion.span>\n      </AnimatePresence>\n    </span>\n  )\n}\n\nexport { AnimatedNumber, type AnimatedNumberProps }\n",
      "type": "registry:component",
      "target": "@components/ikas/animated-number.tsx"
    }
  ],
  "docs": "https://builders.ikas.com/tr/docs/app-development/ui-kit/components/animated-number",
  "categories": [
    "motion",
    "data-display"
  ],
  "type": "registry:component"
}