@databricks/appkit-ui 0.43.1 → 0.44.0

package/dist/react/ui/chart.d.ts

@@ -1,117 +0,0 @@
-import * as react from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-import * as RechartsPrimitive from "recharts";
-import * as recharts_types_util_types0 from "recharts/types/util/types";
-import * as recharts_types_component_Tooltip0 from "recharts/types/component/Tooltip";
-import * as recharts_types_component_DefaultTooltipContent0 from "recharts/types/component/DefaultTooltipContent";
-import * as recharts_types_util_payload_getUniqPayload0 from "recharts/types/util/payload/getUniqPayload";
-
-//#region src/react/ui/chart.d.ts
-declare const THEMES: {
-  readonly light: "";
-  readonly dark: ".dark";
-};
-type ChartConfig = { [k in string]: {
-  label?: react.ReactNode;
-  icon?: react.ComponentType;
-} & ({
-  color?: string;
-  theme?: never;
-} | {
-  color?: never;
-  theme: Record<keyof typeof THEMES, string>;
-}) };
-/** Container for rendering data visualizations using Recharts */
-declare function ChartContainer({
-  id,
-  className,
-  children,
-  config,
-  ...props
-}: react.ComponentProps<"div"> & {
-  config: ChartConfig;
-  children: react.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
-}): react_jsx_runtime0.JSX.Element;
-declare const ChartStyle: ({
-  id,
-  config
-}: {
-  id: string;
-  config: ChartConfig;
-}) => react_jsx_runtime0.JSX.Element | null;
-/**
- * A wrapper component for Recharts Tooltip with proper typing and documentation support.
- * It is needed to ensure the correct name is displayed in the docs.
- * @see https://recharts.org/en-US/api/Tooltip
- */
-declare const ChartTooltip: react.ForwardRefExoticComponent<RechartsPrimitive.DefaultTooltipContentProps<any, any> & {
-  accessibilityLayer?: boolean;
-  active?: boolean | undefined;
-  includeHidden?: boolean | undefined;
-  allowEscapeViewBox?: recharts_types_util_types0.AllowInDimension;
-  animationDuration?: recharts_types_util_types0.AnimationDuration;
-  animationEasing?: recharts_types_util_types0.AnimationTiming;
-  content?: recharts_types_component_Tooltip0.ContentType<any, any> | undefined;
-  coordinate?: Partial<recharts_types_util_types0.Coordinate>;
-  cursor?: boolean | react.ReactElement | react.SVGProps<SVGElement>;
-  filterNull?: boolean;
-  defaultIndex?: number;
-  isAnimationActive?: boolean;
-  offset?: number;
-  payloadUniqBy?: recharts_types_util_payload_getUniqPayload0.UniqueOption<recharts_types_component_DefaultTooltipContent0.Payload<any, any>> | undefined;
-  position?: Partial<recharts_types_util_types0.Coordinate>;
-  reverseDirection?: recharts_types_util_types0.AllowInDimension;
-  shared?: boolean;
-  trigger?: "hover" | "click";
-  useTranslate3d?: boolean;
-  viewBox?: recharts_types_util_types0.CartesianViewBox;
-  wrapperStyle?: react.CSSProperties;
-} & react.RefAttributes<HTMLDivElement>>;
-declare function ChartTooltipContent({
-  active,
-  payload,
-  className,
-  indicator,
-  hideLabel,
-  hideIndicator,
-  label,
-  labelFormatter,
-  labelClassName,
-  formatter,
-  color,
-  nameKey,
-  labelKey
-}: react.ComponentProps<"div"> & {
-  active?: boolean;
-  payload?: any[];
-  label?: string;
-  labelFormatter?: (value: any, payload: any[]) => react.ReactNode;
-  formatter?: (value: any, name: any, item: any, index: number, payload: any) => react.ReactNode;
-  color?: string;
-  hideLabel?: boolean;
-  hideIndicator?: boolean;
-  indicator?: "line" | "dot" | "dashed";
-  labelClassName?: string;
-  nameKey?: string;
-  labelKey?: string;
-}): react_jsx_runtime0.JSX.Element | null;
-/**
- * A wrapper component for Recharts Legend with proper typing and documentation support.
- * It is needed to ensure the correct name is displayed in the docs.
- * @see https://recharts.org/en-US/api/Legend
- */
-declare const ChartLegend: react.ForwardRefExoticComponent<Omit<RechartsPrimitive.LegendProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-declare function ChartLegendContent({
-  className,
-  hideIcon,
-  payload,
-  verticalAlign,
-  nameKey
-}: react.ComponentProps<"div"> & Pick<RechartsPrimitive.LegendProps, "verticalAlign"> & {
-  payload?: any[];
-  hideIcon?: boolean;
-  nameKey?: string;
-}): react_jsx_runtime0.JSX.Element | null;
-//#endregion
-export { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent };
-//# sourceMappingURL=chart.d.ts.map

package/dist/react/ui/chart.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"chart.d.ts","names":[],"sources":["../../../src/react/ui/chart.tsx"],"mappings":";;;;;;;;;cAQM,MAAA;EAAA,SAA8C,KAAA;EAAA,SAAA,IAAA;AAAA;AAAA,KAExC,WAAA;EAER,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,IAAA,GAAO,KAAA,CAAM,aAAA;AAAA;EAET,KAAA;EAAgB,KAAA;AAAA;EAChB,KAAA;EAAe,KAAA,EAAO,MAAA,cAAoB,MAAA;AAAA;;iBAqBzC,cAAA,CAAA;EACP,EAAA;EACA,SAAA;EACA,QAAA;EACA,MAAA;EAAA,GACG;AAAA,GACF,KAAA,CAAM,cAAA;EACP,MAAA,EAAQ,WAAA;EACR,QAAA,EAAU,KAAA,CAAM,cAAA,QACP,iBAAA,CAAkB,mBAAA;AAAA,IAE5B,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAwBK,UAAA;EAAc,EAAA;EAAA;AAAA;EAAkB,EAAA;EAAY,MAAA,EAAQ,WAAA;AAAA,MAAa,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;cAsCjE,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,iBAAA,CAAA,0BAAA;;;;uBAAA,0BAAA,CAAA,gBAAA;;;;;;;;;;;;;;;;;;;iBAOT,mBAAA,CAAA;EACP,MAAA;EACA,OAAA;EACA,SAAA;EACA,SAAA;EACA,SAAA;EACA,aAAA;EACA,KAAA;EACA,cAAA;EACA,cAAA;EACA,SAAA;EACA,KAAA;EACA,OAAA;EACA;AAAA,GACC,KAAA,CAAM,cAAA;EACP,MAAA;EACA,OAAA;EACA,KAAA;EACA,cAAA,IAAkB,KAAA,OAAY,OAAA,YAAmB,KAAA,CAAM,SAAA;EACvD,SAAA,IACE,KAAA,OACA,IAAA,OACA,IAAA,OACA,KAAA,UACA,OAAA,UACG,KAAA,CAAM,SAAA;EACX,KAAA;EACA,SAAA;EACA,aAAA;EACA,SAAA;EACA,cAAA;EACA,OAAA;EACA,QAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;cAkIK,WAAA,EAAW,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,iBAAA,CAAA,WAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,iBAOR,kBAAA,CAAA;EACP,SAAA;EACA,QAAA;EACA,OAAA;EACA,aAAA;EACA;AAAA,GACC,KAAA,CAAM,cAAA,UACP,IAAA,CAAK,iBAAA,CAAkB,WAAA;EACrB,OAAA;EACA,QAAA;EACA,OAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/react/ui/chart.js

@@ -1,160 +0,0 @@
-"use client";
-
-import { cn } from "../lib/utils.js";
-import * as React$1 from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import * as RechartsPrimitive from "recharts";
-
-//#region src/react/ui/chart.tsx
-const THEMES = {
-	light: "",
-	dark: ".dark"
-};
-const ChartContext = React$1.createContext(null);
-function useChart() {
-	const context = React$1.useContext(ChartContext);
-	if (!context) throw new Error("useChart must be used within a <ChartContainer />");
-	return context;
-}
-/** Container for rendering data visualizations using Recharts */
-function ChartContainer({ id, className, children, config, ...props }) {
-	const uniqueId = React$1.useId();
-	const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
-	return /* @__PURE__ */ jsx(ChartContext.Provider, {
-		value: { config },
-		children: /* @__PURE__ */ jsxs("div", {
-			"data-slot": "chart",
-			"data-chart": chartId,
-			className: cn("[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className),
-			...props,
-			children: [/* @__PURE__ */ jsx(ChartStyle, {
-				id: chartId,
-				config
-			}), /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, { children })]
-		})
-	});
-}
-const ChartStyle = ({ id, config }) => {
-	const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
-	if (!colorConfig.length) return null;
-	return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: Object.entries(THEMES).map(([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig.map(([key, itemConfig]) => {
-		const color = itemConfig.theme?.[theme] || itemConfig.color;
-		return color ? `  --color-${key}: ${color};` : null;
-	}).join("\n")}
-}
-`).join("\n") } });
-};
-/**
-* A wrapper component for Recharts Tooltip with proper typing and documentation support.
-* It is needed to ensure the correct name is displayed in the docs.
-* @see https://recharts.org/en-US/api/Tooltip
-*/
-const ChartTooltip = React$1.forwardRef((props, ref) => {
-	return /* @__PURE__ */ jsx(RechartsPrimitive.Tooltip, { ...props });
-});
-ChartTooltip.displayName = "ChartTooltip";
-function ChartTooltipContent({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label = "", labelFormatter, labelClassName, formatter, color, nameKey, labelKey }) {
-	const { config } = useChart();
-	const tooltipLabel = React$1.useMemo(() => {
-		if (hideLabel || !payload?.length) return null;
-		const [item] = payload;
-		const itemConfig = getPayloadConfigFromPayload(config, item, `${labelKey || item?.dataKey || item?.name || "value"}`);
-		const value = !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
-		if (labelFormatter) return /* @__PURE__ */ jsx("div", {
-			className: cn("font-medium", labelClassName),
-			children: labelFormatter(value, payload)
-		});
-		if (!value) return null;
-		return /* @__PURE__ */ jsx("div", {
-			className: cn("font-medium", labelClassName),
-			children: value
-		});
-	}, [
-		label,
-		labelFormatter,
-		payload,
-		hideLabel,
-		labelClassName,
-		config,
-		labelKey
-	]);
-	if (!active || !payload?.length) return null;
-	const nestLabel = payload.length === 1 && indicator !== "dot";
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl", className),
-		children: [!nestLabel ? tooltipLabel : null, /* @__PURE__ */ jsx("div", {
-			className: "grid gap-1.5",
-			children: payload.filter((item) => item.type !== "none").map((item, index) => {
-				const itemConfig = getPayloadConfigFromPayload(config, item, `${nameKey || item.name || item.dataKey || "value"}`);
-				const indicatorColor = color || item.payload.fill || item.color;
-				return /* @__PURE__ */ jsx("div", {
-					className: cn("[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5", indicator === "dot" && "items-center"),
-					children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs(Fragment, { children: [itemConfig?.icon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx("div", {
-						className: cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
-							"h-2.5 w-2.5": indicator === "dot",
-							"w-1": indicator === "line",
-							"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
-							"my-0.5": nestLabel && indicator === "dashed"
-						}),
-						style: {
-							"--color-bg": indicatorColor,
-							"--color-border": indicatorColor
-						}
-					}), /* @__PURE__ */ jsxs("div", {
-						className: cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"),
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "grid gap-1.5",
-							children: [nestLabel ? tooltipLabel : null, /* @__PURE__ */ jsx("span", {
-								className: "text-muted-foreground",
-								children: itemConfig?.label || item.name
-							})]
-						}), item.value && /* @__PURE__ */ jsx("span", {
-							className: "text-foreground font-mono font-medium tabular-nums",
-							children: item.value.toLocaleString()
-						})]
-					})] })
-				}, item.dataKey);
-			})
-		})]
-	});
-}
-/**
-* A wrapper component for Recharts Legend with proper typing and documentation support.
-* It is needed to ensure the correct name is displayed in the docs.
-* @see https://recharts.org/en-US/api/Legend
-*/
-const ChartLegend = React$1.forwardRef((props, ref) => {
-	return /* @__PURE__ */ jsx(RechartsPrimitive.Legend, { ...props });
-});
-ChartLegend.displayName = "ChartLegend";
-function ChartLegendContent({ className, hideIcon = false, payload = [], verticalAlign = "bottom", nameKey }) {
-	const { config } = useChart();
-	if (!payload?.length) return null;
-	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className),
-		children: payload.filter((item) => item.type !== "none").map((item) => {
-			const itemConfig = getPayloadConfigFromPayload(config, item, `${nameKey || item.dataKey || "value"}`);
-			return /* @__PURE__ */ jsxs("div", {
-				className: cn("[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"),
-				children: [itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx("div", {
-					className: "h-2 w-2 shrink-0 rounded-[2px]",
-					style: { backgroundColor: item.color }
-				}), itemConfig?.label]
-			}, item.value);
-		})
-	});
-}
-function getPayloadConfigFromPayload(config, payload, key) {
-	if (typeof payload !== "object" || payload === null) return;
-	const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
-	let configLabelKey = key;
-	if (key in payload && typeof payload[key] === "string") configLabelKey = payload[key];
-	else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") configLabelKey = payloadPayload[key];
-	return configLabelKey in config ? config[configLabelKey] : config[key];
-}
-
-//#endregion
-export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent };
-//# sourceMappingURL=chart.js.map

package/dist/react/ui/chart.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"chart.js","names":["React"],"sources":["../../../src/react/ui/chart.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as RechartsPrimitive from \"recharts\";\n\nimport { cn } from \"../lib/utils\";\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const;\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode;\n    icon?: React.ComponentType;\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  );\n};\n\ntype ChartContextProps = {\n  config: ChartConfig;\n};\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\n\nfunction useChart() {\n  const context = React.useContext(ChartContext);\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\");\n  }\n\n  return context;\n}\n\n/** Container for rendering data visualizations using Recharts */\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig;\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"];\n}) {\n  const uniqueId = React.useId();\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`;\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className,\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  );\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color,\n  );\n\n  if (!colorConfig.length) {\n    return null;\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color;\n    return color ? `  --color-${key}: ${color};` : null;\n  })\n  .join(\"\\n\")}\n}\n`,\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  );\n};\n\n/**\n * A wrapper component for Recharts Tooltip with proper typing and documentation support.\n * It is needed to ensure the correct name is displayed in the docs.\n * @see https://recharts.org/en-US/api/Tooltip\n */\nconst ChartTooltip = React.forwardRef<HTMLDivElement, RechartsPrimitive.TooltipProps<any, any>>(\n  (props, ref) => {\n    return <RechartsPrimitive.Tooltip {...props} />;\n  }\n);\nChartTooltip.displayName = \"ChartTooltip\";\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label = \"\" as string,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<\"div\"> & {\n  active?: boolean;\n  payload?: any[];\n  label?: string;\n  labelFormatter?: (value: any, payload: any[]) => React.ReactNode;\n  formatter?: (\n    value: any,\n    name: any,\n    item: any,\n    index: number,\n    payload: any,\n  ) => React.ReactNode;\n  color?: string;\n  hideLabel?: boolean;\n  hideIndicator?: boolean;\n  indicator?: \"line\" | \"dot\" | \"dashed\";\n  labelClassName?: string;\n  nameKey?: string;\n  labelKey?: string;\n}) {\n  const { config } = useChart();\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null;\n    }\n\n    const [item] = payload;\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`;\n    const itemConfig = getPayloadConfigFromPayload(config, item, key);\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label;\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      );\n    }\n\n    if (!value) {\n      return null;\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>;\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ]);\n\n  if (!active || !payload?.length) {\n    return null;\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\";\n\n  return (\n    <div\n      className={cn(\n        \"border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl\",\n        className,\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item: any) => item.type !== \"none\")\n          .map((item: any, index: number) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`;\n            const itemConfig = getPayloadConfigFromPayload(config, item, key);\n            const indicatorColor = color || item.payload.fill || item.color;\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n                  indicator === \"dot\" && \"items-center\",\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            },\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\",\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            );\n          })}\n      </div>\n    </div>\n  );\n}\n\n/**\n * A wrapper component for Recharts Legend with proper typing and documentation support.\n * It is needed to ensure the correct name is displayed in the docs.\n * @see https://recharts.org/en-US/api/Legend\n */\nconst ChartLegend = React.forwardRef<HTMLDivElement, RechartsPrimitive.LegendProps>(\n  (props, ref) => {\n    return <RechartsPrimitive.Legend {...props} />;\n  }\n);\nChartLegend.displayName = \"ChartLegend\";\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload = [] as any[],\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> &\n  Pick<RechartsPrimitive.LegendProps, \"verticalAlign\"> & {\n    payload?: any[];\n    hideIcon?: boolean;\n    nameKey?: string;\n  }) {\n  const { config } = useChart();\n\n  if (!payload?.length) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className,\n      )}\n    >\n      {payload\n        .filter((item: any) => item.type !== \"none\")\n        .map((item: any) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`;\n          const itemConfig = getPayloadConfigFromPayload(config, item, key);\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\",\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          );\n        })}\n    </div>\n  );\n}\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string,\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined;\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined;\n\n  let configLabelKey: string = key;\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string;\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string;\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config];\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n};\n"],"mappings":"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"}