{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "trend",
  "title": "Trend",
  "description": "A trend indicator component.",
  "dependencies": ["class-variance-authority", "lucide-react"],
  "registryDependencies": ["https://dashboardblocks.com/r/animated-number.json"],
  "files": [
    {
      "path": "registry/components/dashboardblocks/trend.tsx",
      "content": "import { AnimatedNumber } from '@/registry/components/dashboardblocks/animated-number'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport { ArrowDown, ArrowUp, Minus, TrendingDown, TrendingUp } from 'lucide-react'\n\nimport { cn } from '@/lib/utils'\n\ntype TrendDirection = 'up' | 'down' | 'neutral'\n\nconst trendVariants = cva('', {\n  variants: {\n    variant: {\n      default: 'flex items-center text-sm font-medium',\n      'icon-only': 'h-4 w-4',\n      badge:\n        'flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-xs font-semibold',\n    },\n    direction: {\n      up: '',\n      down: '',\n      neutral: '',\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'default',\n      direction: 'up',\n      class: 'text-green-600',\n    },\n    {\n      variant: 'default',\n      direction: 'down',\n      class: 'text-red-600',\n    },\n    {\n      variant: 'default',\n      direction: 'neutral',\n      class: 'text-gray-500',\n    },\n    {\n      variant: 'icon-only',\n      direction: 'up',\n      class: 'text-green-600',\n    },\n    {\n      variant: 'icon-only',\n      direction: 'down',\n      class: 'text-red-600',\n    },\n    {\n      variant: 'icon-only',\n      direction: 'neutral',\n      class: 'text-gray-500',\n    },\n    {\n      variant: 'badge',\n      direction: 'up',\n      class: 'bg-green-100 text-green-800 border-green-200',\n    },\n    {\n      variant: 'badge',\n      direction: 'down',\n      class: 'bg-red-100 text-red-800 border-red-200',\n    },\n    {\n      variant: 'badge',\n      direction: 'neutral',\n      class: 'bg-gray-100 text-gray-800 border-gray-200',\n    },\n  ],\n  defaultVariants: {\n    variant: 'default',\n    direction: 'neutral',\n  },\n})\n\ninterface TrendProps extends Omit<VariantProps<typeof trendVariants>, 'direction'> {\n  animated?: boolean\n  className?: string\n  formatter?: (value: number) => string\n  trend: number\n  trendIcon?: 'arrow' | 'trend'\n}\n\nconst defaultFormatter = (value: number): string => {\n  const prefix = value > 0 ? '+' : ''\n  return `${prefix}${value.toLocaleString()}%`\n}\n\nfunction getTrendDirection(value: number): TrendDirection {\n  if (value > 0) return 'up'\n  if (value < 0) return 'down'\n  return 'neutral'\n}\n\nfunction Trend({\n  animated = false,\n  className,\n  formatter = defaultFormatter,\n  trend,\n  trendIcon = 'trend',\n  variant = 'default',\n}: TrendProps) {\n  const direction = getTrendDirection(trend)\n  const TrendIcon =\n    direction === 'up' ? TrendingUp : direction === 'down' ? TrendingDown : Minus\n  const ArrowIcon =\n    direction === 'up' ? ArrowUp : direction === 'down' ? ArrowDown : Minus\n  const Icon = trendIcon === 'arrow' ? ArrowIcon : TrendIcon\n\n  const displayValue = animated ? (\n    <AnimatedNumber value={trend} formatter={formatter} />\n  ) : (\n    formatter(trend)\n  )\n\n  if (variant === 'icon-only') {\n    return <Icon className={cn(trendVariants({ variant, direction }), className)} />\n  }\n\n  if (variant === 'badge') {\n    return (\n      <div className={cn(trendVariants({ variant, direction }), className)}>\n        <Icon className='h-4 w-4' />\n        {displayValue}\n      </div>\n    )\n  }\n\n  return (\n    <div className={cn(trendVariants({ variant, direction }), className)}>\n      <Icon className='mr-1 h-4 w-4' />\n      {displayValue}\n    </div>\n  )\n}\n\nexport { Trend, trendVariants, getTrendDirection }\nexport type { TrendProps, TrendDirection }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}