{
  "name": "sliding-number",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [
    "motion-v"
  ],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "SlidingNumber.vue",
      "content": "<script setup lang=\"ts\">\nimport SlidingNumberDigit from './SlidingNumberDigit.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    value: number\n    padStart?: boolean\n    decimalSeparator?: string\n  }>(),\n  {\n    padStart: false,\n    decimalSeparator: '.',\n  },\n)\n\nconst absValue = computed(() => Math.abs(props.value))\nconst parts = computed(() => absValue.value.toString().split('.'))\nconst integerPart = computed(() => parts.value[0]!)\nconst decimalPart = computed(() => parts.value[1]!)\nconst integerValue = computed(() => parseInt(integerPart.value, 10))\nconst paddedInteger = computed(() =>\n  props.padStart && integerValue.value < 10\n    ? `0${integerPart.value}`\n    : integerPart.value,\n)\nconst integerDigits = computed(() => paddedInteger.value.split(''))\nconst integerPlaces = computed(() =>\n  integerDigits.value.map((_, i) =>\n    Math.pow(10, integerDigits.value.length - i - 1),\n  ),\n)\nconst decimalDigits = computed(() => decimalPart.value?.split('') || [])\nconst decimalValue = computed(() =>\n  decimalPart.value ? parseInt(decimalPart.value, 10) : 0,\n)\nconst decimalPlaces = computed(() =>\n  decimalDigits.value.map((_, i) =>\n    Math.pow(10, decimalDigits.value.length - i - 1),\n  ),\n)\n</script>\n\n<template>\n  <div class=\"flex items-center\">\n    <template v-if=\"props.value < 0\">-</template>\n    <SlidingNumberDigit\n      v-for=\"(digit, index) in integerDigits\"\n      :key=\"`pos-${integerPlaces[index]}`\"\n      :value=\"integerValue\"\n      :place=\"integerPlaces[index]!\"\n    />\n    <template v-if=\"decimalPart\">\n      <span>{{ props.decimalSeparator }}</span>\n      <SlidingNumberDigit\n        v-for=\"(digit, index) in decimalDigits\"\n        :key=\"`decimal-${index}`\"\n        :value=\"decimalValue\"\n        :place=\"decimalPlaces[index]!\"\n      />\n    </template>\n  </div>\n</template>\n",
      "type": "registry:ui"
    },
    {
      "path": "SlidingNumberDigit.vue",
      "content": "<script setup lang=\"ts\">\nimport { Motion, useSpring, useMotionValueEvent } from 'motion-v'\n\nconst props = defineProps<{\n  value: number\n  place: number\n}>()\n\nconst TRANSITION = {\n  type: 'spring' as const,\n  stiffness: 280,\n  damping: 18,\n  mass: 0.3,\n}\n\nconst valueRoundedToPlace = computed(() => Math.floor(props.value / props.place) % 10)\n\nconst spring = useSpring(valueRoundedToPlace.value, TRANSITION)\n\nwatch(valueRoundedToPlace, (val) => {\n  spring.set(val)\n})\n\nconst height = ref(0)\nconst measureRef = useTemplateRef<HTMLSpanElement>('measureEl')\n\nonMounted(() => {\n  if (measureRef.value) {\n    height.value = measureRef.value.getBoundingClientRect().height\n  }\n})\n\nconst springValue = ref(spring.get())\nuseMotionValueEvent(spring, 'change', (val: number) => {\n  springValue.value = val\n})\n\nconst digits = Array.from({ length: 10 }, (_, i) => i)\n\nfunction getY(digit: number) {\n  if (!height.value) return 0\n  const placeValue = springValue.value % 10\n  const offset = (10 + digit - placeValue) % 10\n  let y = offset * height.value\n  if (offset > 5) {\n    y -= 10 * height.value\n  }\n  return y\n}\n</script>\n\n<template>\n  <div class=\"relative inline-block w-[1ch] overflow-x-visible overflow-y-clip leading-none tabular-nums\">\n    <div class=\"invisible\">0</div>\n    <span v-if=\"!height\" ref=\"measureEl\" class=\"invisible absolute\">0</span>\n    <template v-else>\n      <Motion\n        v-for=\"(digit, i) in digits\"\n        :key=\"i\"\n        as=\"span\"\n        :style=\"{ transform: `translateY(${getY(i)}px)` }\"\n        class=\"absolute inset-0 flex items-center justify-center\"\n        :transition=\"TRANSITION\"\n      >\n        {{ digit }}\n      </Motion>\n    </template>\n  </div>\n</template>\n",
      "type": "registry:ui"
    }
  ]
}