@handled-ai/design-system 0.8.0 → 0.9.0

package/dist/charts/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/charts/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\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\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\ntype TooltipPayloadItem = {\n  name?: string;\n  value?: number | string;\n  dataKey?: string;\n  payload?: Record<string, unknown>;\n  color?: string;\n  fill?: string;\n};\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<\"div\"> & {\n  active?: boolean;\n  payload?: TooltipPayloadItem[];\n  label?: string;\n  labelFormatter?: (value: unknown, payload: TooltipPayloadItem[]) => React.ReactNode;\n  formatter?: (value: unknown, name: string, item: TooltipPayloadItem, index: number, payload: Record<string, unknown>) => React.ReactNode;\n  hideLabel?: boolean;\n  hideIndicator?: boolean;\n  indicator?: \"line\" | \"dot\" | \"dashed\";\n  nameKey?: string;\n  labelKey?: string;\n  labelClassName?: string;\n  color?: 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.map((item: TooltipPayloadItem, 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\nconst ChartLegend = RechartsPrimitive.Legend;\n\ntype LegendPayloadItem = { value?: string; dataKey?: string; [key: string]: unknown };\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> & {\n  payload?: LegendPayloadItem[];\n  verticalAlign?: \"top\" | \"bottom\";\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.map((item: LegendPayloadItem) => {\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 as string | undefined,\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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","names":["config"]}

package/dist/charts/donut-chart.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+interface DonutSegment {
+    name: string;
+    value: number;
+    color: string;
+}
+interface DonutChartProps {
+    data: DonutSegment[];
+    centerLabel?: string | number;
+    size?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    paddingAngle?: number;
+    showTooltip?: boolean;
+    showLegend?: boolean;
+    className?: string;
+}
+declare function DonutChart({ data, centerLabel, size, innerRadius, outerRadius, paddingAngle, showTooltip, showLegend, className, }: DonutChartProps): React.JSX.Element;
+
+export { DonutChart, type DonutChartProps, type DonutSegment };

package/dist/charts/donut-chart.js

@@ -0,0 +1,96 @@
+"use client"
+
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  PieChart,
+  Pie,
+  Cell,
+  Label,
+  Tooltip,
+  ResponsiveContainer
+} from "recharts";
+import { cn } from "../lib/utils.js";
+import { CHART_TOOLTIP_STYLE } from "./chart-tooltip.js";
+function DonutChart({
+  data,
+  centerLabel,
+  size = 80,
+  innerRadius,
+  outerRadius,
+  paddingAngle = 2,
+  showTooltip = true,
+  showLegend = false,
+  className
+}) {
+  const computedInner = innerRadius != null ? innerRadius : Math.round(size * 0.325);
+  const computedOuter = outerRadius != null ? outerRadius : Math.round(size * 0.45);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "shrink-0", style: { height: size, width: size }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(PieChart, { children: [
+      showTooltip ? /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          contentStyle: CHART_TOOLTIP_STYLE,
+          itemStyle: { color: "#0f172a", fontWeight: 600 },
+          formatter: (value, name) => [
+            `${value}`,
+            String(name)
+          ]
+        }
+      ) : null,
+      /* @__PURE__ */ jsxs(
+        Pie,
+        {
+          data,
+          innerRadius: computedInner,
+          outerRadius: computedOuter,
+          paddingAngle,
+          dataKey: "value",
+          stroke: "none",
+          children: [
+            data.map((entry, index) => /* @__PURE__ */ jsx(Cell, { fill: entry.color }, `cell-${index}`)),
+            centerLabel != null ? /* @__PURE__ */ jsx(
+              Label,
+              {
+                value: String(centerLabel),
+                position: "center",
+                className: "fill-foreground text-lg font-bold"
+              }
+            ) : null
+          ]
+        }
+      )
+    ] }) }) }),
+    showLegend ? /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5 pl-1", children: data.map((d) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-center justify-between text-[10px]",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-1.5 w-1.5 shrink-0 rounded-full",
+                style: { backgroundColor: d.color }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "whitespace-nowrap font-medium text-muted-foreground",
+                title: d.name,
+                children: d.name
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "ml-1.5 font-bold text-foreground", children: d.value })
+        ]
+      },
+      d.name
+    )) }) : null
+  ] });
+}
+export {
+  DonutChart
+};
+//# sourceMappingURL=donut-chart.js.map

package/dist/charts/donut-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/charts/donut-chart.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport {\n  PieChart,\n  Pie,\n  Cell,\n  Label,\n  Tooltip,\n  ResponsiveContainer,\n} from \"recharts\"\n\nimport { cn } from \"../lib/utils\"\nimport { CHART_TOOLTIP_STYLE } from \"./chart-tooltip\"\n\nexport interface DonutSegment {\n  name: string\n  value: number\n  color: string\n}\n\nexport interface DonutChartProps {\n  data: DonutSegment[]\n  centerLabel?: string | number\n  size?: number\n  innerRadius?: number\n  outerRadius?: number\n  paddingAngle?: number\n  showTooltip?: boolean\n  showLegend?: boolean\n  className?: string\n}\n\nexport function DonutChart({\n  data,\n  centerLabel,\n  size = 80,\n  innerRadius,\n  outerRadius,\n  paddingAngle = 2,\n  showTooltip = true,\n  showLegend = false,\n  className,\n}: DonutChartProps) {\n  const computedInner = innerRadius ?? Math.round(size * 0.325)\n  const computedOuter = outerRadius ?? Math.round(size * 0.45)\n\n  return (\n    <div className={cn(\"flex items-center gap-3\", className)}>\n      <div className=\"shrink-0\" style={{ height: size, width: size }}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <PieChart>\n            {showTooltip ? (\n              <Tooltip\n                contentStyle={CHART_TOOLTIP_STYLE}\n                itemStyle={{ color: \"#0f172a\", fontWeight: 600 }}\n                formatter={(value: unknown, name: unknown) => [\n                  `${value}`,\n                  String(name),\n                ]}\n              />\n            ) : null}\n            <Pie\n              data={data}\n              innerRadius={computedInner}\n              outerRadius={computedOuter}\n              paddingAngle={paddingAngle}\n              dataKey=\"value\"\n              stroke=\"none\"\n            >\n              {data.map((entry, index) => (\n                <Cell key={`cell-${index}`} fill={entry.color} />\n              ))}\n              {centerLabel != null ? (\n                <Label\n                  value={String(centerLabel)}\n                  position=\"center\"\n                  className=\"fill-foreground text-lg font-bold\"\n                />\n              ) : null}\n            </Pie>\n          </PieChart>\n        </ResponsiveContainer>\n      </div>\n\n      {showLegend ? (\n        <div className=\"flex min-w-0 flex-1 flex-col gap-1.5 pl-1\">\n          {data.map((d) => (\n            <div\n              key={d.name}\n              className=\"flex items-center justify-between text-[10px]\"\n            >\n              <div className=\"flex min-w-0 items-center gap-1.5\">\n                <div\n                  className=\"h-1.5 w-1.5 shrink-0 rounded-full\"\n                  style={{ backgroundColor: d.color }}\n                />\n                <span\n                  className=\"whitespace-nowrap font-medium text-muted-foreground\"\n                  title={d.name}\n                >\n                  {d.name}\n                </span>\n              </div>\n              <span className=\"ml-1.5 font-bold text-foreground\">{d.value}</span>\n            </div>\n          ))}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":";AAqDc,cASF,YATE;AAlDd;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,UAAU;AACnB,SAAS,2BAA2B;AAoB7B,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,cAAc;AAAA,EACd,aAAa;AAAA,EACb;AACF,GAAoB;AAClB,QAAM,gBAAgB,oCAAe,KAAK,MAAM,OAAO,KAAK;AAC5D,QAAM,gBAAgB,oCAAe,KAAK,MAAM,OAAO,IAAI;AAE3D,SACE,qBAAC,SAAI,WAAW,GAAG,2BAA2B,SAAS,GACrD;AAAA,wBAAC,SAAI,WAAU,YAAW,OAAO,EAAE,QAAQ,MAAM,OAAO,KAAK,GAC3D,8BAAC,uBAAoB,OAAM,QAAO,QAAO,QACvC,+BAAC,YACE;AAAA,oBACC;AAAA,QAAC;AAAA;AAAA,UACC,cAAc;AAAA,UACd,WAAW,EAAE,OAAO,WAAW,YAAY,IAAI;AAAA,UAC/C,WAAW,CAAC,OAAgB,SAAkB;AAAA,YAC5C,GAAG,KAAK;AAAA,YACR,OAAO,IAAI;AAAA,UACb;AAAA;AAAA,MACF,IACE;AAAA,MACJ;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,aAAa;AAAA,UACb,aAAa;AAAA,UACb;AAAA,UACA,SAAQ;AAAA,UACR,QAAO;AAAA,UAEN;AAAA,iBAAK,IAAI,CAAC,OAAO,UAChB,oBAAC,QAA2B,MAAM,MAAM,SAA7B,QAAQ,KAAK,EAAuB,CAChD;AAAA,YACA,eAAe,OACd;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,OAAO,WAAW;AAAA,gBACzB,UAAS;AAAA,gBACT,WAAU;AAAA;AAAA,YACZ,IACE;AAAA;AAAA;AAAA,MACN;AAAA,OACF,GACF,GACF;AAAA,IAEC,aACC,oBAAC,SAAI,WAAU,6CACZ,eAAK,IAAI,CAAC,MACT;AAAA,MAAC;AAAA;AAAA,QAEC,WAAU;AAAA,QAEV;AAAA,+BAAC,SAAI,WAAU,qCACb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,iBAAiB,EAAE,MAAM;AAAA;AAAA,YACpC;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE;AAAA,gBAER,YAAE;AAAA;AAAA,YACL;AAAA,aACF;AAAA,UACA,oBAAC,UAAK,WAAU,oCAAoC,YAAE,OAAM;AAAA;AAAA;AAAA,MAfvD,EAAE;AAAA,IAgBT,CACD,GACH,IACE;AAAA,KACN;AAEJ;","names":[]}

package/dist/charts/index.d.ts

@@ -0,0 +1,11 @@
+export { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent } from './chart.js';
+export { CHART_CURSOR_STYLE, CHART_TOOLTIP_STYLE, ChartTooltipEntry, SimpleChartTooltip, SimpleChartTooltipProps } from './chart-tooltip.js';
+export { BarChartComponent, BarChartComponentProps, BarSeries } from './bar-chart-component.js';
+export { DonutChart, DonutChartProps, DonutSegment } from './donut-chart.js';
+export { TrendAreaChart, TrendAreaChartProps, TrendSeries } from './trend-area-chart.js';
+export { VolumeAnalysisChart, VolumeAnalysisChartProps, VolumeDataKey } from './volume-analysis-chart.js';
+export { MetricCardData, TopLineMetrics, TopLineMetricsProps } from './top-line-metrics.js';
+export { PipelineFilterBreakdown, PipelineOverview, PipelineOverviewProps, PipelineStage, PipelineStageMetrics, PipelineStageTiming } from './pipeline-overview.js';
+export { SankeyChart, SankeyData, SankeyDropOff, SankeyHoverCardData, SankeyLink, SankeyNode, SankeyStageMetrics } from './sankey-chart.js';
+import 'react';
+import 'recharts';

package/dist/charts/index.js

@@ -0,0 +1,10 @@
+export * from "./chart.js";
+export * from "./chart-tooltip.js";
+export * from "./bar-chart-component.js";
+export * from "./donut-chart.js";
+export * from "./trend-area-chart.js";
+export * from "./volume-analysis-chart.js";
+export * from "./top-line-metrics.js";
+export * from "./pipeline-overview.js";
+export * from "./sankey-chart.js";
+//# sourceMappingURL=index.js.map

package/dist/charts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/charts/index.ts"],"sourcesContent":["/**\n * @handled-ai/design-system/charts\n * Chart components requiring recharts and @nivo/sankey\n */\nexport * from \"./chart\"\nexport * from \"./chart-tooltip\"\nexport * from \"./bar-chart-component\"\nexport * from \"./donut-chart\"\nexport * from \"./trend-area-chart\"\nexport * from \"./volume-analysis-chart\"\nexport * from \"./top-line-metrics\"\nexport * from \"./pipeline-overview\"\nexport * from \"./sankey-chart\"\n"],"mappings":"AAIA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/dist/charts/pipeline-overview.d.ts

@@ -0,0 +1,76 @@
+import * as React from 'react';
+
+interface PipelineStage {
+    id: string;
+    label: string;
+    count: number;
+    trend: string;
+    nextConversion: string | null;
+}
+interface PipelineStageMetrics {
+    medianTime: string;
+    avgTime: string;
+    dropOffs: {
+        reason: string;
+        count: number;
+        pct: string;
+    }[];
+}
+interface PipelineStageTiming {
+    median: string;
+    avg: string;
+}
+interface PipelineFilterBreakdown {
+    [stageId: string]: Record<string, number>;
+}
+interface PipelineOverviewProps {
+    title?: string;
+    stages: PipelineStage[];
+    stageMetrics: Record<string, PipelineStageMetrics>;
+    stageTimings: (PipelineStageTiming | null)[];
+    filterOptions?: string[];
+    onFilterChange?: (filterOption: string) => void;
+    filterBreakdowns?: Record<string, PipelineFilterBreakdown>;
+    countingModes?: string[];
+    countingModeTooltip?: string;
+    /** Main pipeline flow nodes (after the first stage) */
+    flowNodes?: {
+        id: string;
+        nodeColor: string;
+    }[];
+    /** Drop-off distribution from initial stage: { "Lost/Other": 56, "Coverage": 40, ... } */
+    dropOffDistribution?: Record<string, number>;
+    /** Flow links after the first stage (middle of pipeline onward) */
+    flowLinks?: {
+        source: string;
+        target: string;
+        value: number;
+    }[];
+    totalReceived?: number;
+    /** Dollar amounts to display on terminal node labels: { "Retained": "$18.2M" } */
+    nodeAmounts?: Record<string, string>;
+    /** Unit noun for standard node/link tooltips (e.g. "signals", "accounts"). */
+    unitLabel?: string;
+    /** Unit noun for terminal/drop-off node tooltips (e.g. "opportunities"). Defaults to unitLabel. */
+    terminalUnitLabel?: string;
+    /** Node IDs that should use terminalUnitLabel. Defaults to keys of dropOffDistribution. */
+    terminalNodeIds?: string[];
+    /** Sankey chart margins, merged with defaults { top: 20, right: 120, bottom: 20, left: 140 }. */
+    sankeyMargin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    /** Gap between Sankey node bar and its outside label. */
+    sankeyLabelPadding?: number;
+    /** When true, conversion badges use `flex`; when false, `hidden xl:flex`. */
+    alwaysShowConversionBadges?: boolean;
+    /** Color for dynamically generated drop-off nodes. */
+    dropOffNodeColor?: string;
+    onViewInWorkQueue?: (stageId: string) => void;
+    className?: string;
+}
+declare function PipelineOverview({ title, stages, stageMetrics, stageTimings, filterOptions, onFilterChange, filterBreakdowns, countingModes, countingModeTooltip, flowNodes, dropOffDistribution, flowLinks, totalReceived, nodeAmounts, unitLabel, terminalUnitLabel, terminalNodeIds, sankeyMargin, sankeyLabelPadding, alwaysShowConversionBadges, dropOffNodeColor, onViewInWorkQueue: _onViewInWorkQueue, className, }: PipelineOverviewProps): React.JSX.Element;
+
+export { type PipelineFilterBreakdown, PipelineOverview, type PipelineOverviewProps, type PipelineStage, type PipelineStageMetrics, type PipelineStageTiming };

package/dist/charts/pipeline-overview.js

@@ -0,0 +1,372 @@
+"use client"
+
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { TrendingUp, Info, ArrowRight } from "lucide-react";
+import { ResponsiveSankey } from "@nivo/sankey";
+import { cn } from "../lib/utils.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "../components/tooltip.js";
+const SEGMENT_PALETTE = [
+  "#0F4C3A",
+  "#15803d",
+  "#0ea5e9",
+  "#8b5cf6",
+  "#f59e0b",
+  "#ef4444"
+];
+const DROP_OFF_NODES = [
+  { id: "Lost/Other", nodeColor: "#CBD5E1" },
+  { id: "Coverage", nodeColor: "#F59E0B" },
+  { id: "Unqualified", nodeColor: "#F59E0B" },
+  { id: "No Contact", nodeColor: "#F59E0B" },
+  { id: "Intake Drop", nodeColor: "#F59E0B" },
+  { id: "No Show/Cancel", nodeColor: "#F59E0B" }
+];
+function StageHoverCard({
+  title,
+  count,
+  metrics
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "w-[260px] overflow-hidden rounded-lg border border-border bg-card font-sans text-left shadow-xl", children: [
+    /* @__PURE__ */ jsxs("div", { className: "border-b border-border p-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-0.5 text-xs font-medium text-muted-foreground", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold text-foreground", children: count })
+    ] }),
+    metrics && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2 border-b border-border bg-muted/30 px-3 py-2", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "text-[9px] font-semibold uppercase tracking-wider text-muted-foreground/70", children: "Median" }),
+        /* @__PURE__ */ jsx("div", { className: "text-xs font-bold text-foreground", children: metrics.medianTime })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "border-l border-border pl-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-[9px] font-semibold uppercase tracking-wider text-muted-foreground/70", children: "Average" }),
+        /* @__PURE__ */ jsx("div", { className: "text-xs font-bold text-foreground", children: metrics.avgTime })
+      ] })
+    ] }),
+    (metrics == null ? void 0 : metrics.dropOffs) && metrics.dropOffs.length > 0 && /* @__PURE__ */ jsxs("div", { className: "p-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-1.5 px-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: "Drop-off Reasons" }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: metrics.dropOffs.map((drop, i) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "group flex cursor-pointer items-center justify-between rounded p-1.5 text-xs transition-colors hover:bg-muted",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate pr-2 text-muted-foreground group-hover:text-foreground", children: drop.reason }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground/70", children: drop.pct }),
+              /* @__PURE__ */ jsx("span", { className: "inline-flex h-4 min-w-[20px] items-center justify-center rounded border border-border bg-muted px-1 text-[9px] font-semibold text-muted-foreground group-hover:bg-muted group-hover:text-foreground", children: drop.count })
+            ] })
+          ]
+        },
+        i
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex cursor-pointer items-center justify-between border-t border-border bg-muted px-3 py-2 text-xs font-medium text-blue-600 transition-colors hover:bg-muted hover:text-blue-700", children: [
+      "View in Work Queue ",
+      /* @__PURE__ */ jsx(ArrowRight, { className: "h-3 w-3" })
+    ] })
+  ] });
+}
+function PipelineOverview({
+  title = "Pipeline Overview",
+  stages,
+  stageMetrics,
+  stageTimings,
+  filterOptions = ["Facility", "Source", "Lead Source", "Payer", "Channel"],
+  onFilterChange,
+  filterBreakdowns,
+  countingModes = ["Unique Patients", "All Referrals"],
+  countingModeTooltip = "Patients may be referred through multiple channels. 'All Referrals' shows total volume; 'Unique Patients' deduplicates to show distinct patient counts.",
+  flowNodes = [
+    { id: "Contacted", nodeColor: "#2A8F7A" },
+    { id: "Intake Sent", nodeColor: "#3DB4A0" },
+    { id: "Intake Done", nodeColor: "#4CC9B0" },
+    { id: "Scheduled", nodeColor: "#5FCFBC" },
+    { id: "Completed", nodeColor: "#79E2C9" }
+  ],
+  dropOffDistribution = {
+    "Lost/Other": 56,
+    Coverage: 40,
+    Unqualified: 30
+  },
+  flowLinks = [
+    { source: "Contacted", target: "Intake Sent", value: 660 },
+    { source: "Contacted", target: "No Contact", value: 60 },
+    { source: "Intake Sent", target: "Intake Done", value: 612 },
+    { source: "Intake Sent", target: "Intake Drop", value: 48 },
+    { source: "Intake Done", target: "Scheduled", value: 612 },
+    { source: "Scheduled", target: "Completed", value: 520 },
+    { source: "Scheduled", target: "No Show/Cancel", value: 92 }
+  ],
+  totalReceived = 847,
+  nodeAmounts,
+  unitLabel,
+  terminalUnitLabel,
+  terminalNodeIds,
+  sankeyMargin,
+  sankeyLabelPadding,
+  alwaysShowConversionBadges = false,
+  dropOffNodeColor,
+  onViewInWorkQueue: _onViewInWorkQueue,
+  className
+}) {
+  const [selectedFilter, setSelectedFilter] = React.useState(filterOptions[0]);
+  const [countingMode, setCountingMode] = React.useState(countingModes[0]);
+  const effectiveUnitLabel = unitLabel != null ? unitLabel : "items";
+  const effectiveTerminalUnitLabel = terminalUnitLabel != null ? terminalUnitLabel : effectiveUnitLabel;
+  const effectiveTerminalNodeIds = React.useMemo(
+    () => new Set(terminalNodeIds != null ? terminalNodeIds : Object.keys(dropOffDistribution)),
+    [terminalNodeIds, dropOffDistribution]
+  );
+  const effectiveMargin = React.useMemo(
+    () => __spreadValues({ top: 20, right: 120, bottom: 20, left: 140 }, sankeyMargin),
+    [sankeyMargin]
+  );
+  const effectiveLabelPadding = sankeyLabelPadding != null ? sankeyLabelPadding : 16;
+  const sankeyData = React.useMemo(() => {
+    var _a, _b, _c, _d, _e, _f;
+    const breakdown = (_d = (_a = filterBreakdowns == null ? void 0 : filterBreakdowns[selectedFilter]) == null ? void 0 : _a.received) != null ? _d : { [(_c = (_b = stages[0]) == null ? void 0 : _b.label) != null ? _c : "Received"]: totalReceived };
+    const segments = Object.entries(breakdown).map(([name, value], index) => ({
+      id: name,
+      nodeColor: SEGMENT_PALETTE[index % SEGMENT_PALETTE.length],
+      value
+    }));
+    const dropOffKeys = Object.keys(dropOffDistribution);
+    const dropOffNodes = dropOffKeys.length > 0 ? dropOffKeys.map((reason) => ({
+      id: reason,
+      nodeColor: dropOffNodeColor != null ? dropOffNodeColor : "#F59E0B"
+    })) : DROP_OFF_NODES;
+    const nodes = [
+      ...segments,
+      ...flowNodes,
+      ...dropOffNodes
+    ];
+    const nodeIds = new Set(nodes.map((n) => n.id));
+    for (const link of flowLinks) {
+      for (const endpoint of [link.source, link.target]) {
+        if (!nodeIds.has(endpoint)) {
+          nodes.push({ id: endpoint, nodeColor: dropOffNodeColor != null ? dropOffNodeColor : "#F59E0B" });
+          nodeIds.add(endpoint);
+        }
+      }
+    }
+    const links = [];
+    const firstFlowNode = (_f = (_e = flowNodes[0]) == null ? void 0 : _e.id) != null ? _f : "Contacted";
+    segments.forEach((segment) => {
+      if (segment.value > 0) {
+        links.push({
+          source: segment.id,
+          target: firstFlowNode,
+          value: segment.value
+        });
+      }
+    });
+    for (const [reason, count] of Object.entries(dropOffDistribution)) {
+      if (count > 0) {
+        links.push({ source: firstFlowNode, target: reason, value: count });
+      }
+    }
+    flowLinks.forEach((link) => links.push(__spreadValues({}, link)));
+    return { nodes, links };
+  }, [
+    selectedFilter,
+    filterBreakdowns,
+    stages,
+    totalReceived,
+    flowNodes,
+    dropOffDistribution,
+    dropOffNodeColor,
+    flowLinks
+  ]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-xl border border-border bg-card p-5 shadow-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-6 flex flex-col gap-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-foreground", children: title }),
+            countingModes.length > 1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-border bg-muted p-1", children: [
+              countingModes.map((mode) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setCountingMode(mode),
+                  className: cn(
+                    "rounded-md px-3 py-1 text-xs font-medium transition-all",
+                    countingMode === mode ? "border border-border bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+                  ),
+                  children: mode
+                },
+                mode
+              )),
+              /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Info, { className: "ml-1 h-3.5 w-3.5 cursor-help text-muted-foreground/70" }) }),
+                /* @__PURE__ */ jsx(TooltipContent, { className: "max-w-[250px] text-xs", children: countingModeTooltip })
+              ] }) })
+            ] })
+          ] }),
+          filterOptions.length > 1 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 self-start rounded-lg bg-muted p-1 md:self-auto", children: filterOptions.map((option) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => {
+                setSelectedFilter(option);
+                onFilterChange == null ? void 0 : onFilterChange(option);
+              },
+              className: cn(
+                "h-7 rounded-md border-none bg-transparent px-3 text-xs font-medium shadow-none transition-all hover:bg-background",
+                selectedFilter === option && "bg-background text-foreground shadow-sm"
+              ),
+              children: option
+            },
+            option
+          )) })
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "mb-2 grid gap-4", style: { gridTemplateColumns: `repeat(${stages.length}, minmax(0, 1fr))` }, children: stages.map((stage, index) => {
+          var _a;
+          const details = stageMetrics[stage.id];
+          const timing = (_a = stageTimings[index]) != null ? _a : null;
+          return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 100, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "group relative flex cursor-pointer flex-col items-center rounded-lg p-2 text-center transition-colors hover:bg-muted", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "mb-1 w-full truncate text-xs font-medium text-muted-foreground",
+                  title: stage.label,
+                  children: stage.label
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "mb-1 text-2xl font-bold text-foreground", children: stage.count.toLocaleString() }),
+              /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-center gap-1 text-xs font-medium text-emerald-600", children: [
+                stage.trend,
+                " ",
+                /* @__PURE__ */ jsx(TrendingUp, { className: "h-3 w-3" })
+              ] }),
+              index < stages.length - 1 && stage.nextConversion && /* @__PURE__ */ jsxs("div", { className: cn(
+                alwaysShowConversionBadges ? "flex" : "hidden xl:flex",
+                "absolute -right-2 top-1/2 z-10 -translate-y-1/2 translate-x-1/2 flex-col items-center"
+              ), children: [
+                /* @__PURE__ */ jsx("span", { className: "z-10 whitespace-nowrap rounded-full border border-border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground shadow-sm", children: stage.nextConversion }),
+                timing && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-col items-center", children: [
+                  /* @__PURE__ */ jsx("div", { className: "h-2 w-px bg-border" }),
+                  /* @__PURE__ */ jsxs("div", { className: "whitespace-nowrap rounded bg-background/80 px-1 py-0.5 text-[9px] font-medium leading-3 text-muted-foreground/70 backdrop-blur-[2px]", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "mr-1 font-semibold text-muted-foreground", children: [
+                      "Med: ",
+                      timing.median
+                    ] }),
+                    /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/70", children: [
+                      "Avg: ",
+                      timing.avg
+                    ] })
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "mx-auto mb-1 mt-2 h-4 w-px bg-border" })
+            ] }) }),
+            /* @__PURE__ */ jsx(
+              TooltipContent,
+              {
+                className: "border-none bg-transparent p-0 shadow-none",
+                sideOffset: 8,
+                children: /* @__PURE__ */ jsx(
+                  StageHoverCard,
+                  {
+                    title: stage.label,
+                    count: stage.count,
+                    metrics: details
+                  }
+                )
+              }
+            )
+          ] }) }, stage.id);
+        }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "relative mt-4 w-full",
+            style: { height: 400, minWidth: 0 },
+            children: /* @__PURE__ */ jsx(
+              ResponsiveSankey,
+              {
+                data: sankeyData,
+                margin: effectiveMargin,
+                align: "justify",
+                colors: (node) => node.nodeColor || "#94a3b8",
+                nodeOpacity: 1,
+                nodeHoverOthersOpacity: 0.35,
+                nodeThickness: 18,
+                nodeSpacing: 16,
+                nodeBorderWidth: 0,
+                nodeBorderRadius: 3,
+                linkOpacity: 0.5,
+                linkHoverOthersOpacity: 0.1,
+                linkContract: 3,
+                enableLinkGradient: true,
+                labelPosition: "outside",
+                labelOrientation: "horizontal",
+                labelPadding: effectiveLabelPadding,
+                label: (node) => (nodeAmounts == null ? void 0 : nodeAmounts[node.id]) ? `${node.id} (${nodeAmounts[node.id]})` : node.id,
+                labelTextColor: { from: "color", modifiers: [["darker", 1]] },
+                nodeTooltip: ({ node }) => {
+                  const unit = effectiveTerminalNodeIds.has(node.id) ? effectiveTerminalUnitLabel : effectiveUnitLabel;
+                  return /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border bg-card p-2 text-xs shadow-lg", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "mb-1 block font-bold", children: [
+                      node.id,
+                      (nodeAmounts == null ? void 0 : nodeAmounts[node.id]) ? ` \u2014 ${nodeAmounts[node.id]}` : ""
+                    ] }),
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      node.value,
+                      " ",
+                      unit
+                    ] })
+                  ] });
+                },
+                linkTooltip: ({ link }) => {
+                  const unit = effectiveTerminalNodeIds.has(link.target.id) ? effectiveTerminalUnitLabel : effectiveUnitLabel;
+                  return /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border bg-card p-2 text-xs shadow-lg", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "mb-1 block font-bold", children: [
+                      link.source.id,
+                      " \u2192 ",
+                      link.target.id
+                    ] }),
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      link.value,
+                      " ",
+                      unit
+                    ] })
+                  ] });
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  PipelineOverview
+};
+//# sourceMappingURL=pipeline-overview.js.map