{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "Counter-JS-CSS",
	"title": "Counter",
	"description": "Flexible animated counter supporting increments + easing.",
	"type": "registry:component",
	"files": [
		{
			"type": "registry:file",
			"path": "Counter.css",
			"target": "@components/Counter.css",
			"content": ".counter-container {\n  position: relative;\n  display: inline-block;\n}\n\n.counter-counter {\n  display: flex;\n  overflow: hidden;\n  line-height: 1;\n}\n\n.counter-digit {\n  position: relative;\n  width: 1ch;\n  font-variant-numeric: tabular-nums;\n}\n\n.counter-number {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.gradient-container {\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n\n.bottom-gradient {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n}\n"
		},
		{
			"type": "registry:component",
			"path": "Counter.jsx",
			"content": "import { motion, useSpring, useTransform } from 'motion/react';\nimport { useEffect } from 'react';\n\nimport './Counter.css';\n\nfunction Number({ mv, number, height }) {\n  let y = useTransform(mv, latest => {\n    let placeValue = latest % 10;\n    let offset = (10 + number - placeValue) % 10;\n    let memo = offset * height;\n    if (offset > 5) {\n      memo -= 10 * height;\n    }\n    return memo;\n  });\n  return (\n    <motion.span className=\"counter-number\" style={{ y }}>\n      {number}\n    </motion.span>\n  );\n}\n\nfunction normalizeNearInteger(num) {\n  const nearest = Math.round(num);\n  const tolerance = 1e-9 * Math.max(1, Math.abs(num));\n  return Math.abs(num - nearest) < tolerance ? nearest : num;\n}\n\nfunction getValueRoundedToPlace(value, place) {\n  const scaled = value / place;\n  return Math.floor(normalizeNearInteger(scaled));\n}\n\nfunction Digit({ place, value, height, digitStyle }) {\n  const isDecimal = place === '.';\n  const valueRoundedToPlace = isDecimal ? 0 : getValueRoundedToPlace(value, place);\n  const animatedValue = useSpring(valueRoundedToPlace);\n\n  useEffect(() => {\n    if (!isDecimal) {\n      animatedValue.set(valueRoundedToPlace);\n    }\n  }, [animatedValue, valueRoundedToPlace, isDecimal]);\n\n  if (isDecimal) {\n    return (\n      <span className=\"counter-digit\" style={{ height, ...digitStyle, width: 'fit-content' }}>\n        .\n      </span>\n    );\n  }\n\n  return (\n    <span className=\"counter-digit\" style={{ height, ...digitStyle }}>\n      {Array.from({ length: 10 }, (_, i) => (\n        <Number key={i} mv={animatedValue} number={i} height={height} />\n      ))}\n    </span>\n  );\n}\n\nexport default function Counter({\n  value,\n  fontSize = 100,\n  padding = 0,\n  places = [...value.toString()].map((ch, i, a) => {\n    ch == '.';\n    if (ch === '.') {\n      return '.';\n    } else {\n      return (\n        10 **\n        (a.indexOf('.') === -1 ? a.length - i - 1 : i < a.indexOf('.') ? a.indexOf('.') - i - 1 : -(i - a.indexOf('.')))\n      );\n    }\n  }),\n  gap = 8,\n  borderRadius = 4,\n  horizontalPadding = 8,\n  textColor = 'inherit',\n  fontWeight = 'inherit',\n  containerStyle,\n  counterStyle,\n  digitStyle,\n  gradientHeight = 16,\n  gradientFrom = 'black',\n  gradientTo = 'transparent',\n  topGradientStyle,\n  bottomGradientStyle\n}) {\n  const height = fontSize + padding;\n  const defaultCounterStyle = {\n    fontSize,\n    gap: gap,\n    borderRadius: borderRadius,\n    paddingLeft: horizontalPadding,\n    paddingRight: horizontalPadding,\n    color: textColor,\n    fontWeight: fontWeight,\n    direction: \"ltr\"\n  };\n  const defaultTopGradientStyle = {\n    height: gradientHeight,\n    background: `linear-gradient(to bottom, ${gradientFrom}, ${gradientTo})`\n  };\n  const defaultBottomGradientStyle = {\n    height: gradientHeight,\n    background: `linear-gradient(to top, ${gradientFrom}, ${gradientTo})`\n  };\n  return (\n    <span className=\"counter-container\" style={containerStyle}>\n      <span className=\"counter-counter\" style={{ ...defaultCounterStyle, ...counterStyle }}>\n        {places.map(place => (\n          <Digit key={place} place={place} value={value} height={height} digitStyle={digitStyle} />\n        ))}\n      </span>\n      <span className=\"gradient-container\">\n        <span className=\"top-gradient\" style={topGradientStyle ? topGradientStyle : defaultTopGradientStyle}></span>\n        <span\n          className=\"bottom-gradient\"\n          style={bottomGradientStyle ? bottomGradientStyle : defaultBottomGradientStyle}\n        ></span>\n      </span>\n    </span>\n  );\n}\n"
		}
	],
	"registryDependencies": [],
	"dependencies": [
		"motion@^12.23.12"
	]
}