{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sparkline",
  "title": "Sparkline",
  "description": "Tiny trend line without axes for stat cards and table cells.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "@ikas/chart-kit",
    "@ikas/utils"
  ],
  "files": [
    {
      "path": "registry/ikas/sparkline.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ChartFillDefs, RevealMask, chartFill } from \"@/components/ikas/chart-kit\"\n\ntype SparklineProps = Omit<React.ComponentProps<\"div\">, \"color\"> & {\n  /** Values in time order. Twelve to thirty points read best. */\n  data: number[]\n  /** Height in px. Width follows the container. */\n  height?: number\n  /** `area` adds a light wash under the line. */\n  variant?: \"area\" | \"line\"\n  /** Line color. Defaults to ink: a sparkline is context, not a series to identify. */\n  color?: string\n  /** Color of the end dot, to point at the current period. Defaults to `color`. */\n  highlightColor?: string\n  /** Wipe in from the left on mount. */\n  reveal?: boolean\n  /** Accessible summary, e.g. \"Son 14 günde artış\". Hidden from screen readers when omitted. */\n  \"aria-label\"?: string\n}\n\nconst VIEW_WIDTH = 100\n\n/** Smooth path through the points (Catmull-Rom converted to cubic Béziers). */\nfunction smoothPath(points: [number, number][]) {\n  if (points.length < 2) return \"\"\n  let d = `M${points[0][0]},${points[0][1]}`\n  for (let i = 0; i < points.length - 1; i++) {\n    const p0 = points[i - 1] ?? points[i]\n    const p1 = points[i]\n    const p2 = points[i + 1]\n    const p3 = points[i + 2] ?? p2\n    const c1 = [p1[0] + (p2[0] - p0[0]) / 6, p1[1] + (p2[1] - p0[1]) / 6]\n    const c2 = [p2[0] - (p3[0] - p1[0]) / 6, p2[1] - (p3[1] - p1[1]) / 6]\n    d += ` C${c1[0].toFixed(2)},${c1[1].toFixed(2)} ${c2[0].toFixed(2)},${c2[1].toFixed(2)} ${p2[0].toFixed(2)},${p2[1].toFixed(2)}`\n  }\n  return d\n}\n\n/**\n * A tiny trend line for stat cards and table cells. No axes, no grid, no\n * tooltip: the number next to it carries the value, the line carries the shape.\n */\nfunction Sparkline({\n  data,\n  height = 32,\n  variant = \"area\",\n  color = \"var(--chart-ink)\",\n  highlightColor,\n  reveal = true,\n  className,\n  \"aria-label\": ariaLabel,\n  ...props\n}: SparklineProps) {\n  const id = React.useId().replace(/:/g, \"\")\n  const reduceMotion = useReducedMotion()\n  const pad = 4\n  const min = Math.min(...data)\n  const max = Math.max(...data)\n  const range = max - min || 1\n  const points = data.map((v, i): [number, number] => [\n    data.length === 1 ? VIEW_WIDTH / 2 : (i / (data.length - 1)) * VIEW_WIDTH,\n    pad + (1 - (v - min) / range) * (height - pad * 2),\n  ])\n  const line = smoothPath(points)\n  const last = points[points.length - 1]\n  const maskId = reveal && !reduceMotion ? `${id}-reveal` : undefined\n\n  return (\n    <div\n      data-slot=\"sparkline\"\n      role={ariaLabel ? \"img\" : undefined}\n      aria-label={ariaLabel}\n      aria-hidden={ariaLabel ? undefined : true}\n      className={cn(\"relative w-full\", className)}\n      style={{ height }}\n      {...props}\n    >\n      <svg viewBox={`0 0 ${VIEW_WIDTH} ${height}`} preserveAspectRatio=\"none\" className=\"absolute inset-0 size-full overflow-visible\">\n        <defs>\n          {maskId && <RevealMask id={maskId} duration={0.8} />}\n          {variant === \"area\" && <ChartFillDefs id={`${id}-fill`} color={color} variant=\"gradient\" />}\n        </defs>\n        <g style={maskId ? { mask: `url(#${maskId})` } : undefined}>\n          {variant === \"area\" && line && <path d={`${line} L${VIEW_WIDTH},${height} L0,${height} Z`} fill={chartFill(`${id}-fill`, color, \"gradient\")} />}\n          <path d={line} fill=\"none\" stroke={color} strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\" vectorEffect=\"non-scaling-stroke\" />\n        </g>\n      </svg>\n      {last && (\n        <span\n          aria-hidden\n          className=\"absolute size-2 -translate-x-1/2 -translate-y-1/2 rounded-full ring-2 ring-card duration-300 animate-in fade-in-0 zoom-in-50 fill-mode-both motion-reduce:animate-none\"\n          style={{\n            left: `${(last[0] / VIEW_WIDTH) * 100}%`,\n            top: last[1],\n            background: highlightColor ?? color,\n            animationDelay: maskId ? \"700ms\" : undefined,\n          }}\n        />\n      )}\n    </div>\n  )\n}\n\nexport { Sparkline, type SparklineProps }\n",
      "type": "registry:component",
      "target": "@components/ikas/sparkline.tsx"
    }
  ],
  "docs": "https://builders.ikas.com/tr/docs/app-development/ui-kit/components/sparkline",
  "categories": [
    "charts"
  ],
  "type": "registry:component"
}