{"name":"legend","type":"registry:ui","files":[{"path":"legend.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { getColorsCount, indicatorBackground, type ChartConfig } from \"@/components/ui/charts/chart\";\nimport type { CSSProperties } from \"react\";\n\nexport type LegendVariant =\n  | \"square\"\n  | \"circle\"\n  | \"circle-outline\"\n  | \"rounded-square\"\n  | \"rounded-square-outline\"\n  | \"vertical-bar\"\n  | \"horizontal-bar\";\n\nexport function legendFillStyle(key: string, colorsCount: number): CSSProperties {\n  if (colorsCount <= 1) return { backgroundColor: `var(--color-${key}-0)` };\n  return { background: indicatorBackground(key, colorsCount) };\n}\n\nexport function legendOutlineStyle(key: string, colorsCount: number): CSSProperties {\n  const mask: CSSProperties = {\n    WebkitMask: \"linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)\",\n    WebkitMaskComposite: \"xor\",\n    mask: \"linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)\",\n    maskComposite: \"exclude\",\n  };\n  return { ...legendFillStyle(key, colorsCount), ...mask };\n}\n\nexport function LegendIndicator({\n  variant,\n  dataKey,\n  colorsCount,\n}: {\n  variant: LegendVariant;\n  dataKey: string;\n  colorsCount: number;\n}) {\n  const fill = legendFillStyle(dataKey, colorsCount);\n  const outline = legendOutlineStyle(dataKey, colorsCount);\n\n  switch (variant) {\n    case \"square\":\n      return <div aria-hidden className=\"h-2 w-2 shrink-0\" style={fill} />;\n    case \"circle\":\n      return <div aria-hidden className=\"h-2 w-2 shrink-0 rounded-full\" style={fill} />;\n    case \"circle-outline\":\n      return <div aria-hidden className=\"h-2.5 w-2.5 shrink-0 rounded-full p-[1.5px]\" style={outline} />;\n    case \"vertical-bar\":\n      return <div aria-hidden className=\"h-3 w-1 shrink-0 rounded-[2px]\" style={fill} />;\n    case \"horizontal-bar\":\n      return <div aria-hidden className=\"h-1 w-3 shrink-0 rounded-[2px]\" style={fill} />;\n    case \"rounded-square-outline\":\n      return <div aria-hidden className=\"h-2.5 w-2.5 shrink-0 rounded-[3px] p-[1.5px]\" style={outline} />;\n    case \"rounded-square\":\n    default:\n      return <div aria-hidden className=\"h-2 w-2 shrink-0 rounded-[2px]\" style={fill} />;\n  }\n}\n\ntype LegendOverlayProps = {\n  seriesKeys: string[];\n  config: ChartConfig;\n  variant: LegendVariant;\n  align: \"left\" | \"center\" | \"right\";\n  verticalAlign: \"top\" | \"middle\" | \"bottom\";\n  selectedKey: string | null;\n  hoveredKey: string | null;\n  isClickable: boolean;\n  onToggle: (key: string) => void;\n  style: CSSProperties;\n};\n\nexport function LegendOverlay({\n  seriesKeys,\n  config,\n  variant,\n  align,\n  selectedKey,\n  hoveredKey,\n  isClickable,\n  onToggle,\n  style,\n}: LegendOverlayProps) {\n  const legendJustify =\n    align === \"left\" ? \"justify-start\" : align === \"center\" ? \"justify-center\" : \"justify-end\";\n\n  return (\n    <div\n      aria-label=\"Chart legend\"\n      role=\"group\"\n      style={style}\n      className={`flex items-center gap-4 select-none ${legendJustify}`}\n    >\n      {seriesKeys.map((key) => {\n        const item = config[key];\n        const colorsCount = item ? getColorsCount(item) : 1;\n        const isSelected =\n          (selectedKey === null || selectedKey === key) &&\n          (hoveredKey === null || hoveredKey === key);\n        const content = (\n          <>\n            <LegendIndicator variant={variant} dataKey={key} colorsCount={colorsCount} />\n            {item?.label}\n          </>\n        );\n\n        const className = `flex min-h-6 items-center gap-1.5 transition-opacity ${\n          !isSelected ? \"opacity-30\" : \"\"\n        }`;\n\n        return isClickable ? (\n          <button\n            key={key}\n            type=\"button\"\n            aria-pressed={selectedKey === null || selectedKey === key}\n            className={`${className} cursor-pointer rounded-sm border-0 bg-transparent p-0 text-inherit focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current`}\n            onClick={() => onToggle(key)}\n          >\n            {content}\n          </button>\n        ) : (\n          <div key={key} className={className}>\n            {content}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n","target":"components/ui/legend.tsx"}],"registryDependencies":["https://www.honestui.com/r/chart.json"]}