{
  "name": "day-range",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "day-range.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion } from 'motion/react';\nimport { cn } from '@/lib/utils';\n\nexport interface DayRangeProps extends React.HTMLAttributes<HTMLDivElement> {\n  low: number;\n  high: number;\n  current: number;\n  currencySymbol?: string;\n  lowLabel?: string;\n  highLabel?: string;\n  formatValue?: (value: number) => string;\n}\n\nexport const DayRange = React.forwardRef<HTMLDivElement, DayRangeProps>(\n  (\n    {\n      low,\n      high,\n      current,\n      currencySymbol = '₹',\n      lowLabel = \"Today's low\",\n      highLabel = \"Today's high\",\n      formatValue,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    // Ensure current is clamped between low and high\n    const clampedCurrent = Math.max(low, Math.min(high, current));\n\n    // Calculate percentage (0 to 100)\n    const percentage =\n      high === low ? 0 : ((clampedCurrent - low) / (high - low)) * 100;\n\n    const defaultFormat = (val: number) =>\n      new Intl.NumberFormat('en-IN', {\n        maximumFractionDigits: 2,\n      }).format(val);\n\n    const formatter = formatValue || defaultFormat;\n\n    return (\n      <div\n        ref={ref}\n        className={cn('flex w-full flex-col space-y-3', className)}\n        {...props}\n      >\n        {/* Top Labels */}\n        <div className='flex w-full items-center justify-between'>\n          <div className='flex flex-col gap-1'>\n            <span className='text-sm font-medium text-red-700'>{lowLabel}</span>\n            <span className='text-foreground text-xl font-bold'>\n              {currencySymbol}\n              {formatter(low)}\n            </span>\n          </div>\n          <div className='flex flex-col items-end gap-1'>\n            <span className='text-sm font-medium text-teal-700'>\n              {highLabel}\n            </span>\n            <span className='text-foreground text-xl font-bold'>\n              {currencySymbol}\n              {formatter(high)}\n            </span>\n          </div>\n        </div>\n\n        {/* Range Bar */}\n        <div className='relative mt-2 h-1.5 w-full rounded-full bg-slate-200 dark:bg-slate-800'>\n          {/* Filled part */}\n          <motion.div\n            initial={{ width: 0 }}\n            animate={{ width: `${percentage}%` }}\n            transition={{ duration: 1, ease: 'easeOut' }}\n            className='absolute top-0 left-0 h-full rounded-full bg-blue-600'\n          />\n\n          {/* Current Value Tooltip/Indicator */}\n          <motion.div\n            initial={{ left: 0, opacity: 0, y: 10 }}\n            animate={{ left: `${percentage}%`, opacity: 1, y: 0 }}\n            transition={{ duration: 1, ease: 'easeOut', delay: 0.2 }}\n            className='absolute top-3 -translate-x-1/2 transform'\n          >\n            {/* Tooltip triangle */}\n            <div className='absolute -top-1.5 left-1/2 -translate-x-1/2 transform border-x-[6px] border-b-[6px] border-transparent border-b-blue-600' />\n            <div className='rounded bg-blue-600 px-2.5 py-1 text-sm font-medium whitespace-nowrap text-white shadow-sm'>\n              {currencySymbol}\n              {formatter(current)}\n            </div>\n          </motion.div>\n        </div>\n      </div>\n    );\n  }\n);\nDayRange.displayName = 'DayRange';\n",
      "type": "registry:ui"
    }
  ]
}