4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:Ta25,"use client"; import { cloneElement, isValidElement, type ReactElement, useState, } from "react"; import { cn } from "@/lib/utils"; import { type LegendItemData, LegendItemProvider, LegendProvider, } from "./legend-context"; export interface LegendProps { /** Legend items data */ items: LegendItemData[]; /** Controlled hover state */ hoveredIndex?: number | null; /** Hover state change callback */ onHoverChange?: (index: number | null) => void; /** Title shown above the legend */ title?: string; /** Title class name */ titleClassName?: string; /** Container class name */ className?: string; /** Children - should contain a single LegendItem that will be mapped for each item */ children: ReactElement; } export function Legend({ items, hoveredIndex: controlledHoveredIndex, onHoverChange, title, titleClassName = "text-sm font-semibold", className = "", children, }: LegendProps) { const [internalHoveredIndex, setInternalHoveredIndex] = useState< number | null >(null); // Controlled or uncontrolled hover state const isControlled = controlledHoveredIndex !== undefined; const hoveredIndex = isControlled ? controlledHoveredIndex : internalHoveredIndex; const setHoveredIndex = (index: number | null) => { if (isControlled) { onHoverChange?.(index); } else { setInternalHoveredIndex(index); } }; const contextValue = { items, hoveredIndex, setHoveredIndex, }; return (

{title && (

{title}

)} {items.map((item, index) => { const isHovered = hoveredIndex === index; const isFaded = hoveredIndex !== null && hoveredIndex !== index; const percentage = item.maxValue ? (item.value / item.maxValue) * 100 : 0; const itemContext = { item, index, isHovered, isFaded, percentage, }; // Clone the child element for each item if (isValidElement(children)) { return ( {cloneElement(children)} ); } return null; })}

); } Legend.displayName = "Legend"; 52:T8c4,"use client"; import { createContext, useContext } from "react"; // CSS variable references for legend theming export const legendCssVars = { background: "var(--legend)", foreground: "var(--legend-foreground)", muted: "var(--legend-muted)", mutedForeground: "var(--legend-muted-foreground)", track: "var(--legend-track)", }; export interface LegendItemData { /** Display label */ label: string; /** Current value */ value: number; /** Maximum value (for progress/percentage calculation) */ maxValue?: number; /** Item color */ color: string; } export interface LegendContextValue { /** All legend items */ items: LegendItemData[]; /** Currently hovered index */ hoveredIndex: number | null; /** Set hovered index */ setHoveredIndex: (index: number | null) => void; } export interface LegendItemContextValue { /** The current item data */ item: LegendItemData; /** Index of this item */ index: number; /** Whether this item is hovered */ isHovered: boolean; /** Whether this item is faded (another item is hovered) */ isFaded: boolean; /** Percentage value (value / maxValue * 100) */ percentage: number; } const LegendContext = createContext(null); const LegendItemContext = createContext(null); export function LegendProvider({ children, value, }: { children: React.ReactNode; value: LegendContextValue; }) { return ( {children} ); } export function LegendItemProvider({ children, value, }: { children: React.ReactNode; value: LegendItemContextValue; }) { return ( {children} ); } export function useLegend(): LegendContextValue { const context = useContext(LegendContext); if (!context) { throw new Error("useLegend must be used within a component."); } return context; } export function useLegendItem(): LegendItemContextValue { const context = useContext(LegendItemContext); if (!context) { throw new Error( "useLegendItem must be used within a component." ); } return context; } 53:T466,"use client"; import type { ReactNode } from "react"; import { cn } from "@/lib/utils"; import { useLegend, useLegendItem } from "./legend-context"; export interface LegendItemProps { /** Container class name */ className?: string; /** Children components (LegendMarker, LegendLabel, LegendValue, LegendProgress) */ children: ReactNode; } export function LegendItem({ className = "", children }: LegendItemProps) { const { setHoveredIndex } = useLegend(); const { index, isHovered } = useLegendItem(); return ( // biome-ignore lint/a11y/noNoninteractiveElementInteractions: Legend item hover interaction // biome-ignore lint/a11y/noStaticElementInteractions: Legend item hover interaction

setHoveredIndex(index)} onMouseLeave={() => setHoveredIndex(null)} > {children}

); } LegendItem.displayName = "LegendItem"; 54:T4ba,"use client"; import { Progress } from "@base-ui/react/progress"; import { cn } from "@/lib/utils"; import { useLegendItem } from "./legend-context"; export interface LegendProgressProps { /** Track class name */ trackClassName?: string; /** Indicator class name */ indicatorClassName?: string; /** Track height. Default: "h-1.5" */ height?: string; } export function LegendProgress({ trackClassName = "", indicatorClassName = "", height = "h-1.5", }: LegendProgressProps) { const { item } = useLegendItem(); if (!item.maxValue) { return null; } // Note: item.color must remain inline style as it's dynamic data return ( ); } LegendProgress.displayName = "LegendProgress"; 55:T55d,"use client"; import { cn } from "@/lib/utils"; import { intFmt } from "../chart-formatters"; import { useLegendItem } from "./legend-context"; export interface LegendValueProps { /** Value class name. Default: "text-sm tabular-nums" */ className?: string; /** Show percentage alongside value. Default: false */ showPercentage?: boolean; /** Percentage class name. Default: "text-xs tabular-nums" */ percentageClassName?: string; /** Format function for the value. Default: toLocaleString() */ formatValue?: (value: number) => string; /** Format function for percentage. Default: (p) => `${p.toFixed(0)}%` */ formatPercentage?: (percentage: number) => string; } export function LegendValue({ className = "text-sm tabular-nums", showPercentage = false, percentageClassName = "text-xs tabular-nums", formatValue = intFmt, formatPercentage = (p) => `${p.toFixed(0)}%`, }: LegendValueProps) { const { item, percentage } = useLegendItem(); return ( {formatValue(item.value)} {showPercentage && item.maxValue && ( {formatPercentage(percentage)} )} ); } LegendValue.displayName = "LegendValue"; 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","@base-ui/react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@base-ui/react"}]]}]}],["$","li","@number-flow/react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40number-flow%2Freact","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@number-flow/react"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":["@bklit/utils","@bklit/chart-utils"]}]]}],["$","$L4f",null,{"sourceUrl":"https://ui.bklit.com/r/legend.json","proxyUrl":"https://shadcnregistry.com/r/bklit/legend","itemId":"@bklit/legend"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"src/charts/legend/legend.tsx","content":"$51","type":"registry:component","target":"components/charts/legend/legend.tsx"},{"path":"src/charts/legend/legend-context.tsx","content":"$52","type":"registry:component","target":"components/charts/legend/legend-context.tsx"},{"path":"src/charts/legend/legend-item.tsx","content":"$53","type":"registry:component","target":"components/charts/legend/legend-item.tsx"},{"path":"src/charts/legend/legend-label.tsx","content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { useLegendItem } from \"./legend-context\";\n\nexport interface LegendLabelProps {\n /** Label class name. Default: \"text-sm font-medium\" */\n className?: string;\n}\n\nexport function LegendLabel({\n className = \"text-sm font-medium\",\n}: LegendLabelProps) {\n const { item } = useLegendItem();\n\n return (\n \n {item.label}\n \n );\n}\n\nLegendLabel.displayName = \"LegendLabel\";\n","type":"registry:component","target":"components/charts/legend/legend-label.tsx"},{"path":"src/charts/legend/legend-marker.tsx","content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { useLegendItem } from \"./legend-context\";\n\nexport interface LegendMarkerProps {\n /** Marker size class. Default: \"h-2.5 w-2.5\" */\n className?: string;\n}\n\nexport function LegendMarker({ className = \"h-2.5 w-2.5\" }: LegendMarkerProps) {\n const { item } = useLegendItem();\n\n // Note: backgroundColor must remain inline style as item.color is dynamic data\n return (\n \n );\n}\n\nLegendMarker.displayName = \"LegendMarker\";\n","type":"registry:component","target":"components/charts/legend/legend-marker.tsx"},{"path":"src/charts/legend/legend-progress.tsx","content":"$54","type":"registry:component","target":"components/charts/legend/legend-progress.tsx"},{"path":"src/charts/legend/legend-value.tsx","content":"$55","type":"registry:component","target":"components/charts/legend/legend-value.tsx"},{"path":"src/charts/legend/index.ts","content":"// Legend context and hooks\n\n// Legend components\nexport { Legend, type LegendProps } from \"./legend\";\nexport {\n type LegendContextValue,\n type LegendItemContextValue,\n type LegendItemData,\n legendCssVars,\n useLegend,\n useLegendItem,\n} from \"./legend-context\";\nexport { LegendItem, type LegendItemProps } from \"./legend-item\";\nexport { LegendLabel, type LegendLabelProps } from \"./legend-label\";\nexport { LegendMarker, type LegendMarkerProps } from \"./legend-marker\";\nexport { LegendProgress, type LegendProgressProps } from \"./legend-progress\";\nexport { LegendValue, type LegendValueProps } from \"./legend-value\";\n","type":"registry:component","target":"components/charts/legend/index.ts"}]}]]}],"$L56"]}]

Chart Legend

Installation

Files

components

Styles