{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chart-card",
  "title": "Chart Card",
  "description": "Dashboard chart frame with title, headline value, change and a time range switch.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@ikas/animated-number",
    "@ikas/badge",
    "@ikas/chart-kit",
    "@ikas/segmented-control",
    "@ikas/utils"
  ],
  "files": [
    {
      "path": "registry/ikas/chart-card.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowDownRightIcon, ArrowUpRightIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { AnimatedNumber } from \"@/components/ikas/animated-number\"\nimport { defaultNumberFormat } from \"@/components/ikas/chart-kit\"\nimport { SegmentedControl } from \"@/components/ikas/segmented-control\"\n\ntype ChartCardRange<T extends string> = { value: T; label: string }\n\ntype ChartCardProps<T extends string> = {\n  title: React.ReactNode\n  description?: React.ReactNode\n  /** The headline figure for the selected range. Rolls when it changes. */\n  value?: number\n  /** Formats `value`. */\n  valueFormat?: (value: number) => string\n  /** Percent change against the previous period, e.g. 12.4. */\n  change?: number\n  /** Set when a decrease is good (refunds, errors, response time). */\n  invertChange?: boolean\n  /** Comparison period shown after the change. */\n  changeLabel?: React.ReactNode\n  /** Options for the range switch. Omit to hide it. */\n  ranges?: ChartCardRange<T>[]\n  /** Selected range. Pair with `onRangeChange`. */\n  range?: T\n  onRangeChange?: (range: T) => void\n  /** Slot under the chart. */\n  footer?: React.ReactNode\n  className?: string\n  /** The chart, usually AreaChart or BarChart. */\n  children: React.ReactNode\n}\n\n/**\n * The frame every dashboard chart sits in: title, headline value with its\n * change, a range switch and the chart. Switching the range crossfades the body.\n */\nfunction ChartCard<T extends string>({\n  title,\n  description,\n  value,\n  valueFormat = defaultNumberFormat,\n  change,\n  invertChange = false,\n  changeLabel,\n  ranges,\n  range,\n  onRangeChange,\n  footer,\n  className,\n  children,\n}: ChartCardProps<T>) {\n  const hasChange = typeof change === \"number\" && Number.isFinite(change)\n  const isUp = hasChange && change > 0\n  const isFlat = hasChange && change === 0\n  const isGood = invertChange ? !isUp : isUp\n\n  return (\n    <section data-slot=\"chart-card\" className={cn(\"flex flex-col overflow-hidden rounded-xl bg-card shadow-card\", className)}>\n      <header className=\"flex flex-wrap items-start justify-between gap-4 px-5 pt-5\">\n        <div className=\"flex min-w-0 flex-col gap-1\">\n          <h3 className=\"text-[13px] font-medium text-muted-foreground\">{title}</h3>\n          {value != null && (\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <AnimatedNumber value={value} format={valueFormat} className=\"text-2xl font-semibold tracking-[-0.02em] text-foreground\" />\n              {hasChange && (\n                <Badge status={isFlat ? \"neutral\" : isGood ? \"success\" : \"danger\"} size=\"sm\">\n                  {!isFlat && (isUp ? <ArrowUpRightIcon /> : <ArrowDownRightIcon />)}\n                  {isUp ? \"+\" : change < 0 ? \"−\" : \"\"}%{Math.abs(change).toLocaleString(\"tr-TR\", { maximumFractionDigits: 1 })}\n                </Badge>\n              )}\n              {changeLabel && <span className=\"text-[12px] text-muted-foreground\">{changeLabel}</span>}\n            </div>\n          )}\n          {description && <p className=\"text-[13px] text-muted-foreground\">{description}</p>}\n        </div>\n        {ranges && range != null && onRangeChange && (\n          <SegmentedControl size=\"sm\" mode=\"radio\" aria-label=\"Zaman aralığı\" options={ranges} value={range} onValueChange={onRangeChange} />\n        )}\n      </header>\n      <div key={range} className=\"px-5 pt-4 pb-5 animate-in duration-300 ease-(--ease-out) fade-in-0 motion-reduce:animate-none\">\n        {children}\n      </div>\n      {footer && <footer className=\"border-t bg-muted/40 px-5 py-3 text-[13px] text-muted-foreground\">{footer}</footer>}\n    </section>\n  )\n}\n\nexport { ChartCard, type ChartCardProps, type ChartCardRange }\n",
      "type": "registry:component",
      "target": "@components/ikas/chart-card.tsx"
    }
  ],
  "docs": "https://builders.ikas.com/tr/docs/app-development/ui-kit/components/chart-card",
  "categories": [
    "charts",
    "layout"
  ],
  "type": "registry:component"
}