{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-stats-sparkline-stats","type":"registry:block","title":"Sparkline Stats","files":[{"path":"components/blocks/marketing/stats/sparkline-stats.tsx","content":"import { Badge } from '@/components/ui/badge';\nimport { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/ui/select';\nimport { cn } from '@/lib/utils';\nimport { useState } from 'react';\n\ntype TimeRange = 'daily' | 'weekly' | 'monthly' | 'quarterly';\n\ntype SparklineData = {\n  id: string;\n  name: string;\n  value: string;\n  secondaryValue: string;\n  change: number;\n  trend: 'up' | 'down' | 'neutral';\n  sparklineData: number[];\n};\n\ntype SparklineStats = {\n  [key in TimeRange]: SparklineData[];\n};\n\nexport default function SparklineStats() {\n  const [timeRange, setTimeRange] = useState<TimeRange>('monthly');\n\n  // Sample data for different time ranges\n  const stats: SparklineStats = {\n    daily: [\n      {\n        id: 'visitors',\n        name: 'Unique Visitors',\n        value: '8,492',\n        secondaryValue: '+1,204',\n        change: 16.5,\n        trend: 'up',\n        sparklineData: [32, 38, 28, 43, 36, 42, 39, 37, 41, 38, 42, 48, 52, 47],\n      },\n      {\n        id: 'page-views',\n        name: 'Page Views',\n        value: '32,591',\n        secondaryValue: '+4,882',\n        change: 17.6,\n        trend: 'up',\n        sparklineData: [\n          142, 128, 132, 156, 148, 163, 157, 152, 166, 171, 168, 182, 190, 196,\n        ],\n      },\n      {\n        id: 'bounce-rate',\n        name: 'Bounce Rate',\n        value: '36.4%',\n        secondaryValue: '-2.3%',\n        change: -5.9,\n        trend: 'down',\n        sparklineData: [42, 40, 41, 39, 38, 40, 37, 36, 35, 38, 37, 34, 36, 35],\n      },\n      {\n        id: 'orders',\n        name: 'Orders',\n        value: '284',\n        secondaryValue: '+42',\n        change: 17.4,\n        trend: 'up',\n        sparklineData: [18, 22, 19, 24, 21, 20, 25, 18, 24, 22, 26, 28, 27, 32],\n      },\n    ],\n    weekly: [\n      {\n        id: 'visitors',\n        name: 'Unique Visitors',\n        value: '52,846',\n        secondaryValue: '+8,294',\n        change: 18.6,\n        trend: 'up',\n        sparklineData: [321, 384, 428, 461, 423, 462, 478, 512],\n      },\n      {\n        id: 'page-views',\n        name: 'Page Views',\n        value: '198,432',\n        secondaryValue: '+24,781',\n        change: 14.3,\n        trend: 'up',\n        sparklineData: [1428, 1562, 1679, 1781, 1823, 1942, 2018, 2156],\n      },\n      {\n        id: 'bounce-rate',\n        name: 'Bounce Rate',\n        value: '38.2%',\n        secondaryValue: '-1.7%',\n        change: -4.3,\n        trend: 'down',\n        sparklineData: [42, 41, 40, 39, 38, 37, 37, 36],\n      },\n      {\n        id: 'orders',\n        name: 'Orders',\n        value: '1,784',\n        secondaryValue: '+286',\n        change: 19.1,\n        trend: 'up',\n        sparklineData: [176, 186, 204, 211, 234, 242, 262, 281],\n      },\n    ],\n    monthly: [\n      {\n        id: 'visitors',\n        name: 'Unique Visitors',\n        value: '214,283',\n        secondaryValue: '+32,941',\n        change: 18.2,\n        trend: 'up',\n        sparklineData: [\n          14283, 16421, 18642, 19846, 21256, 23841, 25174, 27428, 29152, 30841,\n          32145, 35462,\n        ],\n      },\n      {\n        id: 'page-views',\n        name: 'Page Views',\n        value: '842,156',\n        secondaryValue: '+72,184',\n        change: 9.4,\n        trend: 'up',\n        sparklineData: [\n          64215, 68420, 70156, 72841, 75621, 79421, 82156, 85214, 87951, 89214,\n          92451, 96214,\n        ],\n      },\n      {\n        id: 'bounce-rate',\n        name: 'Bounce Rate',\n        value: '41.2%',\n        secondaryValue: '-3.8%',\n        change: -8.4,\n        trend: 'down',\n        sparklineData: [48, 47, 46, 46, 45, 44, 44, 43, 42, 42, 41, 40],\n      },\n      {\n        id: 'orders',\n        name: 'Orders',\n        value: '7,842',\n        secondaryValue: '+1,241',\n        change: 18.8,\n        trend: 'up',\n        sparklineData: [\n          524, 584, 612, 645, 687, 721, 764, 802, 852, 894, 932, 984,\n        ],\n      },\n    ],\n    quarterly: [\n      {\n        id: 'visitors',\n        name: 'Unique Visitors',\n        value: '643,294',\n        secondaryValue: '+89,214',\n        change: 16.1,\n        trend: 'up',\n        sparklineData: [154283, 182846, 214283, 246512],\n      },\n      {\n        id: 'page-views',\n        name: 'Page Views',\n        value: '2,471,582',\n        secondaryValue: '+210,452',\n        change: 9.3,\n        trend: 'up',\n        sparklineData: [582416, 624185, 742156, 824582],\n      },\n      {\n        id: 'bounce-rate',\n        name: 'Bounce Rate',\n        value: '43.7%',\n        secondaryValue: '-5.2%',\n        change: -10.6,\n        trend: 'down',\n        sparklineData: [52, 49, 47, 44],\n      },\n      {\n        id: 'orders',\n        name: 'Orders',\n        value: '23,485',\n        secondaryValue: '+3,624',\n        change: 18.2,\n        trend: 'up',\n        sparklineData: [4856, 5742, 6254, 7412],\n      },\n    ],\n  };\n\n  // Function to normalize sparkline data for rendering\n  const normalizeSparklineData = (data: number[]) => {\n    const min = Math.min(...data);\n    const max = Math.max(...data);\n    const range = max - min;\n\n    if (range === 0) return data.map(() => 50); // Handle flat data\n\n    // Normalize to 0-100 range for SVG path\n    return data.map((value) => Math.round(((value - min) / range) * 100));\n  };\n\n  // Create SVG path for sparkline\n  const createSparklinePath = (data: number[]) => {\n    if (data.length < 2) return '';\n\n    const normalizedData = normalizeSparklineData(data);\n    const height = 40; // SVG height\n    const width = 120; // SVG width\n    const points = normalizedData.map((value, index) => {\n      const x = (index / (normalizedData.length - 1)) * width;\n      const y = height - (value / 100) * height;\n      return `${x},${y}`;\n    });\n\n    // Start from the bottom left for fill effect\n    return `M0,${height} ${points\n      .map((point) => `L${point}`)\n      .join(' ')} L${width},${height} Z`;\n  };\n\n  // Get appropriate color for trend\n  const getTrendColor = (\n    trend: 'up' | 'down' | 'neutral',\n    negative: boolean = false\n  ) => {\n    if (trend === 'up') {\n      return negative\n        ? 'text-rose-500 fill-rose-100 dark:fill-rose-950'\n        : 'text-emerald-500 fill-emerald-100 dark:fill-emerald-950';\n    } else if (trend === 'down') {\n      return negative\n        ? 'text-emerald-500 fill-emerald-100 dark:fill-emerald-950'\n        : 'text-rose-500 fill-rose-100 dark:fill-rose-950';\n    }\n    return 'text-gray-500 fill-gray-100 dark:fill-gray-900';\n  };\n\n  // Bounce rate is inverted (down is good)\n  const isInverseMetric = (id: string) => {\n    return ['bounce-rate'].includes(id);\n  };\n\n  return (\n    <div className=\"container mx-auto px-4 py-24 md:px-6 lg:py-32 2xl:max-w-[1400px]\">\n      <div className=\"mx-auto max-w-6xl\">\n        <div className=\"mb-12 text-center\">\n          <Badge className=\"mb-2\">Analytics</Badge>\n          <h2 className=\"text-3xl font-bold md:text-4xl\">Performance Trends</h2>\n          <p className=\"text-muted-foreground mx-auto mt-3 max-w-2xl\">\n            Track how our key metrics are trending over time\n          </p>\n        </div>\n\n        {/* Time Range Selector - Tabs for md+ screens */}\n        <div className=\"mb-10 flex justify-center\">\n          {/* Tabs for md+ screens */}\n          <div className=\"bg-card hidden overflow-hidden rounded-lg border p-1 md:inline-flex\">\n            {(['daily', 'weekly', 'monthly', 'quarterly'] as TimeRange[]).map(\n              (range) => (\n                <button\n                  key={range}\n                  onClick={() => setTimeRange(range)}\n                  className={cn(\n                    'rounded-md px-4 py-2 text-sm font-medium transition-colors',\n                    timeRange === range\n                      ? 'bg-primary text-primary-foreground'\n                      : 'text-muted-foreground hover:bg-muted'\n                  )}\n                >\n                  {range.charAt(0).toUpperCase() + range.slice(1)}\n                </button>\n              )\n            )}\n          </div>\n\n          {/* Dropdown for small screens */}\n          <div className=\"w-full max-w-xs md:hidden\">\n            <Select\n              value={timeRange}\n              onValueChange={(value) => setTimeRange(value as TimeRange)}\n            >\n              <SelectTrigger>\n                <SelectValue placeholder=\"Select time range\">\n                  {timeRange.charAt(0).toUpperCase() + timeRange.slice(1)}\n                </SelectValue>\n              </SelectTrigger>\n              <SelectContent>\n                {(\n                  ['daily', 'weekly', 'monthly', 'quarterly'] as TimeRange[]\n                ).map((range) => (\n                  <SelectItem key={range} value={range}>\n                    {range.charAt(0).toUpperCase() + range.slice(1)}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n          </div>\n        </div>\n\n        {/* Sparkline Cards */}\n        <div className=\"grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4\">\n          {stats[timeRange].map((stat) => {\n            const inverse = isInverseMetric(stat.id);\n            return (\n              <Card key={stat.id} className=\"overflow-hidden\">\n                <CardHeader className=\"pb-2\">\n                  <CardTitle className=\"text-base font-medium\">\n                    {stat.name}\n                  </CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div className=\"mb-1 flex items-baseline justify-between\">\n                    <div className=\"text-2xl font-bold\">{stat.value}</div>\n                    <div\n                      className={cn(\n                        'text-sm font-medium',\n                        getTrendColor(stat.trend, inverse)\n                      )}\n                    >\n                      {stat.secondaryValue}\n                    </div>\n                  </div>\n\n                  <div className=\"text-muted-foreground mb-4 text-xs\">\n                    <span className={cn(getTrendColor(stat.trend, inverse))}>\n                      {stat.trend === 'up' ? '↑' : '↓'} {Math.abs(stat.change)}%\n                    </span>\n                    {' vs '}\n                    {timeRange === 'daily' && 'yesterday'}\n                    {timeRange === 'weekly' && 'last week'}\n                    {timeRange === 'monthly' && 'last month'}\n                    {timeRange === 'quarterly' && 'last quarter'}\n                  </div>\n\n                  {/* Sparkline */}\n                  <div className=\"h-10 w-full\">\n                    <svg\n                      width=\"100%\"\n                      height=\"40\"\n                      viewBox=\"0 0 120 40\"\n                      preserveAspectRatio=\"none\"\n                      className=\"overflow-visible\"\n                    >\n                      <path\n                        d={createSparklinePath(stat.sparklineData)}\n                        className={cn(\n                          'fill-current stroke-current stroke-2 opacity-10',\n                          getTrendColor(stat.trend, inverse)\n                        )}\n                      />\n                      <path\n                        d={\n                          createSparklinePath(stat.sparklineData).split(' Z')[0]\n                        }\n                        className={cn(\n                          'fill-none stroke-current stroke-2',\n                          getTrendColor(stat.trend, inverse)\n                        )}\n                      />\n                    </svg>\n                  </div>\n                </CardContent>\n              </Card>\n            );\n          })}\n        </div>\n      </div>\n    </div>\n  );\n}\n","type":"registry:component","target":"components/blocks/marketing/stats/sparkline-stats.tsx"},{"path":"components/ui/badge.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n  \"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"span\"\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n","type":"registry:ui","target":"components/ui/badge.tsx"},{"path":"components/ui/card.tsx","content":"import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"group/card flex flex-col gap-6 overflow-hidden rounded-xl bg-card py-6 text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"font-heading text-base leading-normal font-medium group-data-[size=sm]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6 group-data-[size=sm]/card:px-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n","type":"registry:ui","target":"components/ui/card.tsx"},{"path":"components/ui/select.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ChevronDownIcon, CheckIcon, ChevronUpIcon } from \"lucide-react\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDownIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"item-aligned\",\n  align = \"center\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        data-align-trigger={position === \"item-aligned\"}\n        className={cn(\"relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\", position ===\"popper\"&&\"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\", className )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          data-position={position}\n          className={cn(\n            \"data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)\",\n            position === \"popper\" && \"\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"px-2 py-1.5 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon className=\"pointer-events-none\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"pointer-events-none -mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronUpIcon\n      />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronDownIcon\n      />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n","type":"registry:ui","target":"components/ui/select.tsx"}],"description":"Stat cards that pair a current value with a tiny inline trend chart. Use it to show a number and its recent direction together on a dashboard view.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}