@giddaa-housing/ui 1.0.0 → 1.2.0

package/dist/waterfall-chart.js

@@ -1,577 +1,480 @@
 "use client";
-import {
-  ChartCard,
-  ChartContainer,
-  ChartDescription,
-  ChartHeader,
-  ChartTitle,
-  ChartTooltip,
-  ChartTooltipContent
-} from "./chunk-NOFXVRWL.js";
-import {
-  SizeProvider,
-  useComponentSize
-} from "./chunk-HL3ZSYES.js";
-import {
-  cn
-} from "./chunk-Y4TTYVNE.js";
-
-// src/waterfall-chart.tsx
-import { cva } from "class-variance-authority";
-import {
-  Bar,
-  LabelList,
-  BarChart as RechartsBarChart,
-  ReferenceLine,
-  XAxis,
-  YAxis
-} from "recharts";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { SizeProvider, useComponentSize } from "./size-context.js";
+import { ChartCard, ChartContainer, ChartDescription, ChartHeader, ChartTitle, ChartTooltip, ChartTooltipContent } from "./chart.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var WATERFALL_CHART_COLORS = {
-  total: "var(--color-status-info)",
-  increase: "var(--color-status-success)",
-  decrease: "var(--color-status-danger)",
-  connector: "var(--color-line-strong)",
-  baseline: "var(--color-line)"
+import { cva } from "class-variance-authority";
+import { Bar, BarChart, LabelList, ReferenceLine, XAxis, YAxis } from "recharts";
+//#region src/waterfall-chart.tsx
+const WATERFALL_CHART_COLORS = {
+	total: "var(--color-status-info)",
+	increase: "var(--color-status-success)",
+	decrease: "var(--color-status-danger)",
+	connector: "var(--color-line-strong)",
+	baseline: "var(--color-line)"
 };
-var WATERFALL_CHART_LEGEND_ITEMS = [
-  { label: "Increase", color: WATERFALL_CHART_COLORS.increase },
-  { label: "Decrease", color: WATERFALL_CHART_COLORS.decrease },
-  { label: "Total", color: WATERFALL_CHART_COLORS.total }
+const WATERFALL_CHART_LEGEND_ITEMS = [
+	{
+		label: "Increase",
+		color: WATERFALL_CHART_COLORS.increase
+	},
+	{
+		label: "Decrease",
+		color: WATERFALL_CHART_COLORS.decrease
+	},
+	{
+		label: "Total",
+		color: WATERFALL_CHART_COLORS.total
+	}
 ];
-var WATERFALL_CHART_CONFIG = {
-  increase: {
-    label: "Increase",
-    color: WATERFALL_CHART_COLORS.increase
-  },
-  decrease: {
-    label: "Decrease",
-    color: WATERFALL_CHART_COLORS.decrease
-  },
-  total: {
-    label: "Total",
-    color: WATERFALL_CHART_COLORS.total
-  }
+const WATERFALL_CHART_CONFIG = {
+	increase: {
+		label: "Increase",
+		color: WATERFALL_CHART_COLORS.increase
+	},
+	decrease: {
+		label: "Decrease",
+		color: WATERFALL_CHART_COLORS.decrease
+	},
+	total: {
+		label: "Total",
+		color: WATERFALL_CHART_COLORS.total
+	}
 };
-var WATERFALL_CHART_LAYOUT = {
-  sm: {
-    height: 150,
-    horizontalHeight: 170,
-    margin: { top: 18, right: 8, bottom: 0, left: 0 },
-    horizontalMargin: { top: 6, right: 36, bottom: 0, left: 0 },
-    barSize: 18,
-    barRadius: 3,
-    connectorWidth: 1.25,
-    valueGap: 4,
-    tickFontSize: 10,
-    yAxisWidth: 56,
-    xAxisHeight: 20
-  },
-  md: {
-    height: 190,
-    horizontalHeight: 220,
-    margin: { top: 22, right: 10, bottom: 0, left: 0 },
-    horizontalMargin: { top: 8, right: 44, bottom: 0, left: 0 },
-    barSize: 24,
-    barRadius: 4,
-    connectorWidth: 1.5,
-    valueGap: 5,
-    tickFontSize: 11,
-    yAxisWidth: 72,
-    xAxisHeight: 24
-  },
-  lg: {
-    height: 250,
-    horizontalHeight: 280,
-    margin: { top: 28, right: 12, bottom: 0, left: 0 },
-    horizontalMargin: { top: 10, right: 56, bottom: 0, left: 0 },
-    barSize: 32,
-    barRadius: 5,
-    connectorWidth: 1.5,
-    valueGap: 6,
-    tickFontSize: 12,
-    yAxisWidth: 88,
-    xAxisHeight: 28
-  }
+const WATERFALL_CHART_LAYOUT = {
+	sm: {
+		height: 150,
+		horizontalHeight: 170,
+		margin: {
+			top: 18,
+			right: 8,
+			bottom: 0,
+			left: 0
+		},
+		horizontalMargin: {
+			top: 6,
+			right: 36,
+			bottom: 0,
+			left: 0
+		},
+		barSize: 18,
+		barRadius: 3,
+		connectorWidth: 1.25,
+		valueGap: 4,
+		tickFontSize: 10,
+		yAxisWidth: 56,
+		xAxisHeight: 20
+	},
+	md: {
+		height: 190,
+		horizontalHeight: 220,
+		margin: {
+			top: 22,
+			right: 10,
+			bottom: 0,
+			left: 0
+		},
+		horizontalMargin: {
+			top: 8,
+			right: 44,
+			bottom: 0,
+			left: 0
+		},
+		barSize: 24,
+		barRadius: 4,
+		connectorWidth: 1.5,
+		valueGap: 5,
+		tickFontSize: 11,
+		yAxisWidth: 72,
+		xAxisHeight: 24
+	},
+	lg: {
+		height: 250,
+		horizontalHeight: 280,
+		margin: {
+			top: 28,
+			right: 12,
+			bottom: 0,
+			left: 0
+		},
+		horizontalMargin: {
+			top: 10,
+			right: 56,
+			bottom: 0,
+			left: 0
+		},
+		barSize: 32,
+		barRadius: 5,
+		connectorWidth: 1.5,
+		valueGap: 6,
+		tickFontSize: 12,
+		yAxisWidth: 88,
+		xAxisHeight: 28
+	}
 };
-var waterfallLegendVariants = cva("flex min-w-0", {
-  variants: {
-    placement: {
-      right: "flex-col items-start",
-      bottom: "flex-row flex-wrap items-center"
-    },
-    size: {
-      sm: "text-gdt-xs",
-      md: "text-gdt-xs",
-      lg: "text-gdt-sm"
-    }
-  },
-  compoundVariants: [
-    { placement: "right", size: "sm", className: "gap-2" },
-    { placement: "right", size: "md", className: "gap-2.5" },
-    { placement: "right", size: "lg", className: "gap-3" },
-    { placement: "bottom", className: "gap-x-4 gap-y-2" }
-  ],
-  defaultVariants: { placement: "right", size: "md" }
+const waterfallLegendVariants = cva("flex min-w-0", {
+	variants: {
+		placement: {
+			right: "flex-col items-start",
+			bottom: "flex-row flex-wrap items-center"
+		},
+		size: {
+			sm: "text-gdt-xs",
+			md: "text-gdt-xs",
+			lg: "text-gdt-sm"
+		}
+	},
+	compoundVariants: [
+		{
+			placement: "right",
+			size: "sm",
+			className: "gap-2"
+		},
+		{
+			placement: "right",
+			size: "md",
+			className: "gap-2.5"
+		},
+		{
+			placement: "right",
+			size: "lg",
+			className: "gap-3"
+		},
+		{
+			placement: "bottom",
+			className: "gap-x-4 gap-y-2"
+		}
+	],
+	defaultVariants: {
+		placement: "right",
+		size: "md"
+	}
 });
 function defaultValueFormatter(value, { step }) {
-  if (step.type === "total") {
-    return value.toLocaleString("en-NG");
-  }
-  return `${value > 0 ? "+" : ""}${value.toLocaleString("en-NG")}`;
+	if (step.type === "total") return value.toLocaleString("en-NG");
+	return `${value > 0 ? "+" : ""}${value.toLocaleString("en-NG")}`;
 }
 function resolveWaterfallData(data) {
-  let running = 0;
-  return data.map((datum, index) => {
-    const isEdge = index === 0 || index === data.length - 1;
-    const requestedType = datum.type ?? (isEdge ? "total" : "auto");
-    const type = requestedType === "auto" ? datum.value >= 0 ? "increase" : "decrease" : requestedType;
-    if (type === "total") {
-      running = datum.value;
-      return {
-        label: datum.label,
-        value: datum.value,
-        start: 0,
-        end: datum.value,
-        range: [0, datum.value].sort((a, b) => a - b),
-        type,
-        fill: datum.fill ?? WATERFALL_CHART_COLORS.total
-      };
-    }
-    const start = running;
-    const end = running + datum.value;
-    running = end;
-    return {
-      label: datum.label,
-      value: datum.value,
-      start,
-      end,
-      range: [start, end].sort((a, b) => a - b),
-      type,
-      fill: datum.fill ?? (type === "increase" ? WATERFALL_CHART_COLORS.increase : WATERFALL_CHART_COLORS.decrease)
-    };
-  });
+	let running = 0;
+	return data.map((datum, index) => {
+		const isEdge = index === 0 || index === data.length - 1;
+		const requestedType = datum.type ?? (isEdge ? "total" : "auto");
+		const type = requestedType === "auto" ? datum.value >= 0 ? "increase" : "decrease" : requestedType;
+		if (type === "total") {
+			running = datum.value;
+			return {
+				label: datum.label,
+				value: datum.value,
+				start: 0,
+				end: datum.value,
+				range: [0, datum.value].sort((a, b) => a - b),
+				type,
+				fill: datum.fill ?? WATERFALL_CHART_COLORS.total
+			};
+		}
+		const start = running;
+		const end = running + datum.value;
+		running = end;
+		return {
+			label: datum.label,
+			value: datum.value,
+			start,
+			end,
+			range: [start, end].sort((a, b) => a - b),
+			type,
+			fill: datum.fill ?? (type === "increase" ? WATERFALL_CHART_COLORS.increase : WATERFALL_CHART_COLORS.decrease)
+		};
+	});
 }
 function getWaterfallDomain(steps, domain) {
-  if (domain) return domain;
-  const values = steps.flatMap((step) => [step.start, step.end, 0]);
-  const min = Math.min(...values);
-  const max = Math.max(...values);
-  const span = Math.max(max - min, 1);
-  const pad = span * 0.08;
-  return [Math.min(0, min - pad), Math.max(0, max + pad)];
+	if (domain) return domain;
+	const values = steps.flatMap((step) => [
+		step.start,
+		step.end,
+		0
+	]);
+	const min = Math.min(...values);
+	const max = Math.max(...values);
+	const pad = Math.max(max - min, 1) * .08;
+	return [Math.min(0, min - pad), Math.max(0, max + pad)];
 }
 function getPayloadStep(payload) {
-  if (typeof payload !== "object" || payload === null) return void 0;
-  if (!("payload" in payload)) return void 0;
-  const row = payload.payload;
-  if (typeof row !== "object" || row === null) return void 0;
-  if (!("step" in row)) return void 0;
-  return row.step;
+	if (typeof payload !== "object" || payload === null) return void 0;
+	if (!("payload" in payload)) return void 0;
+	const row = payload.payload;
+	if (typeof row !== "object" || row === null) return void 0;
+	if (!("step" in row)) return void 0;
+	return row.step;
 }
 function findDatumByLabel(data, label) {
-  const stringLabel = String(label);
-  return data.find((datum) => datum.label === stringLabel) ?? {
-    label: stringLabel,
-    value: 0
-  };
+	const stringLabel = String(label);
+	return data.find((datum) => datum.label === stringLabel) ?? {
+		label: stringLabel,
+		value: 0
+	};
 }
 function formatTooltipValue(valueFormatter, data) {
-  return (_value, _name, item, index) => {
-    const step = getPayloadStep(item);
-    if (!step) return "";
-    const datumIndex = Math.max(index, 0);
-    return valueFormatter(step.value, {
-      datum: data[datumIndex] ?? {
-        label: step.label,
-        value: step.value,
-        type: step.type
-      },
-      step,
-      index: datumIndex
-    });
-  };
+	return (_value, _name, item, index) => {
+		const step = getPayloadStep(item);
+		if (!step) return "";
+		const datumIndex = Math.max(index, 0);
+		return valueFormatter(step.value, {
+			datum: data[datumIndex] ?? {
+				label: step.label,
+				value: step.value,
+				type: step.type
+			},
+			step,
+			index: datumIndex
+		});
+	};
 }
-function WaterfallChartLegend({
-  className,
-  size,
-  placement = "right",
-  items = WATERFALL_CHART_LEGEND_ITEMS,
-  ...props
-}) {
-  const resolvedSize = useComponentSize(size);
-  const markerClassName = resolvedSize === "sm" ? "size-2" : resolvedSize === "lg" ? "size-3" : "size-2.5";
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        waterfallLegendVariants({ placement, size: resolvedSize }),
-        className
-      ),
-      ...props,
-      children: items.map((item) => /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: cn("shrink-0 rounded-[2px]", markerClassName),
-            style: { backgroundColor: item.color }
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "font-medium text-fg-secondary", children: item.label })
-      ] }, item.label))
-    }
-  );
+function WaterfallChartLegend({ className, size, placement = "right", items = WATERFALL_CHART_LEGEND_ITEMS, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	const markerClassName = resolvedSize === "sm" ? "size-2" : resolvedSize === "lg" ? "size-3" : "size-2.5";
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(waterfallLegendVariants({
+			placement,
+			size: resolvedSize
+		}), className),
+		...props,
+		children: items.map((item) => /* @__PURE__ */ jsxs("div", {
+			className: "inline-flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn("shrink-0 rounded-[2px]", markerClassName),
+				style: { backgroundColor: item.color }
+			}), /* @__PURE__ */ jsx("span", {
+				className: "font-medium text-fg-secondary",
+				children: item.label
+			})]
+		}, item.label))
+	});
 }
 function WaterfallBarShape(props) {
-  const x = Number(props.x ?? 0);
-  const y = Number(props.y ?? 0);
-  const width = Number(props.width ?? 0);
-  const height = Number(props.height ?? 0);
-  const payload = props.payload;
-  const radius = Number(props.radius ?? 0);
-  const rectX = width < 0 ? x + width : x;
-  const rectY = height < 0 ? y + height : y;
-  const rectWidth = Math.abs(width);
-  const rectHeight = Math.abs(height);
-  if (rectWidth <= 0 || rectHeight <= 0) return null;
-  return /* @__PURE__ */ jsx(
-    "rect",
-    {
-      x: rectX,
-      y: rectY,
-      width: rectWidth,
-      height: rectHeight,
-      rx: radius,
-      fill: payload?.step?.fill ?? payload?.fill ?? WATERFALL_CHART_COLORS.total
-    }
-  );
+	const x = Number(props.x ?? 0);
+	const y = Number(props.y ?? 0);
+	const width = Number(props.width ?? 0);
+	const height = Number(props.height ?? 0);
+	const payload = props.payload;
+	const radius = Number(props.radius ?? 0);
+	const rectX = width < 0 ? x + width : x;
+	const rectY = height < 0 ? y + height : y;
+	const rectWidth = Math.abs(width);
+	const rectHeight = Math.abs(height);
+	if (rectWidth <= 0 || rectHeight <= 0) return null;
+	return /* @__PURE__ */ jsx("rect", {
+		x: rectX,
+		y: rectY,
+		width: rectWidth,
+		height: rectHeight,
+		rx: radius,
+		fill: payload?.step?.fill ?? payload?.fill ?? WATERFALL_CHART_COLORS.total
+	});
 }
-function WaterfallValueLabel({
-  x,
-  y,
-  width,
-  height,
-  value,
-  payload,
-  orientation = "vertical",
-  layout,
-  valueFormatter = defaultValueFormatter,
-  data,
-  index
-}) {
-  const step = payload?.step ?? payload;
-  if (!step || x == null || y == null || width == null || height == null) {
-    return null;
-  }
-  const resolvedIndex = index ?? data.findIndex((datum) => datum.label === step.label);
-  const context = {
-    datum: data[resolvedIndex] ?? {
-      label: step.label,
-      value: step.value,
-      type: step.type
-    },
-    step,
-    index: Math.max(resolvedIndex, 0)
-  };
-  const fallbackLabel = Array.isArray(value) ? value.join(", ") : value == null ? "" : String(value);
-  const label = valueFormatter(step.value, context) ?? fallbackLabel;
-  const numX = Number(x);
-  const numY = Number(y);
-  const numWidth = Number(width);
-  const numHeight = Number(height);
-  const rectX = numWidth < 0 ? numX + numWidth : numX;
-  const rectY = numHeight < 0 ? numY + numHeight : numY;
-  const rectWidth = Math.abs(numWidth);
-  const rectHeight = Math.abs(numHeight);
-  if (orientation === "horizontal") {
-    return /* @__PURE__ */ jsx(
-      "text",
-      {
-        x: rectX + rectWidth + layout.valueGap,
-        y: rectY + rectHeight / 2,
-        dominantBaseline: "central",
-        className: "fill-fg-primary text-gdt-xs font-semibold tabular-nums",
-        children: label
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "text",
-    {
-      x: rectX + rectWidth / 2,
-      y: Math.max(10, rectY - layout.valueGap),
-      textAnchor: "middle",
-      className: "fill-fg-primary text-gdt-xs font-semibold tabular-nums",
-      children: label
-    }
-  );
+function WaterfallValueLabel({ x, y, width, height, value, payload, orientation = "vertical", layout, valueFormatter = defaultValueFormatter, data, index }) {
+	const step = payload?.step ?? payload;
+	if (!step || x == null || y == null || width == null || height == null) return null;
+	const resolvedIndex = index ?? data.findIndex((datum) => datum.label === step.label);
+	const context = {
+		datum: data[resolvedIndex] ?? {
+			label: step.label,
+			value: step.value,
+			type: step.type
+		},
+		step,
+		index: Math.max(resolvedIndex, 0)
+	};
+	const fallbackLabel = Array.isArray(value) ? value.join(", ") : value == null ? "" : String(value);
+	const label = valueFormatter(step.value, context) ?? fallbackLabel;
+	const numX = Number(x);
+	const numY = Number(y);
+	const numWidth = Number(width);
+	const numHeight = Number(height);
+	const rectX = numWidth < 0 ? numX + numWidth : numX;
+	const rectY = numHeight < 0 ? numY + numHeight : numY;
+	const rectWidth = Math.abs(numWidth);
+	const rectHeight = Math.abs(numHeight);
+	if (orientation === "horizontal") return /* @__PURE__ */ jsx("text", {
+		x: rectX + rectWidth + layout.valueGap,
+		y: rectY + rectHeight / 2,
+		dominantBaseline: "central",
+		className: "fill-fg-primary text-gdt-xs font-semibold tabular-nums",
+		children: label
+	});
+	return /* @__PURE__ */ jsx("text", {
+		x: rectX + rectWidth / 2,
+		y: Math.max(10, rectY - layout.valueGap),
+		textAnchor: "middle",
+		className: "fill-fg-primary text-gdt-xs font-semibold tabular-nums",
+		children: label
+	});
 }
-function WaterfallChartPlot({
-  data,
-  size,
-  orientation = "vertical",
-  legend = false,
-  showValues = true,
-  showTooltip = false,
-  valueType = "number",
-  valueFormatter = defaultValueFormatter,
-  categoryFormatter = (label) => label,
-  domain,
-  ariaLabel,
-  className,
-  ...props
-}) {
-  const resolvedSize = useComponentSize(size);
-  const layout = WATERFALL_CHART_LAYOUT[resolvedSize];
-  const steps = resolveWaterfallData(data);
-  if (!steps.length) return null;
-  const isHorizontal = orientation === "horizontal";
-  const resolvedDomain = getWaterfallDomain(steps, domain);
-  const chartHeight = isHorizontal ? layout.horizontalHeight : layout.height;
-  const chartMargin = isHorizontal ? layout.horizontalMargin : layout.margin;
-  const chartData = steps.map((step) => ({
-    ...step,
-    range: step.range,
-    step
-  }));
-  const summary = ariaLabel ?? `Waterfall chart from ${steps[0]?.label ?? "start"} to ${steps.at(-1)?.label ?? "end"}`;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn("w-full min-w-0", className),
-      "data-slot": "waterfall-chart-plot",
-      role: "img",
-      "aria-label": summary,
-      ...props,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "flex min-w-0 gap-5",
-            legend === "bottom" ? "flex-col" : "items-center justify-between max-sm:flex-col"
-          ),
-          children: [
-            /* @__PURE__ */ jsx(
-              ChartContainer,
-              {
-                config: WATERFALL_CHART_CONFIG,
-                className: "aspect-auto w-full min-w-0 flex-1",
-                style: { height: chartHeight },
-                initialDimension: { width: 420, height: chartHeight },
-                children: /* @__PURE__ */ jsxs(
-                  RechartsBarChart,
-                  {
-                    accessibilityLayer: true,
-                    data: chartData,
-                    layout: isHorizontal ? "vertical" : "horizontal",
-                    margin: chartMargin,
-                    children: [
-                      isHorizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx(
-                          XAxis,
-                          {
-                            type: "number",
-                            domain: resolvedDomain,
-                            axisLine: false,
-                            tickLine: false,
-                            tick: false
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          YAxis,
-                          {
-                            type: "category",
-                            dataKey: "label",
-                            width: layout.yAxisWidth,
-                            axisLine: false,
-                            tickLine: false,
-                            tickMargin: 8,
-                            tick: { fontSize: layout.tickFontSize },
-                            tickFormatter: (label) => categoryFormatter(
-                              String(label),
-                              findDatumByLabel(data, label)
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          ReferenceLine,
-                          {
-                            x: 0,
-                            stroke: WATERFALL_CHART_COLORS.baseline,
-                            strokeWidth: layout.connectorWidth
-                          }
-                        ),
-                        steps.slice(0, -1).map((step, index) => /* @__PURE__ */ jsx(
-                          ReferenceLine,
-                          {
-                            segment: [
-                              { x: step.end, y: steps[index].label },
-                              { x: step.end, y: steps[index + 1].label }
-                            ],
-                            stroke: WATERFALL_CHART_COLORS.connector,
-                            strokeWidth: layout.connectorWidth
-                          },
-                          `${step.label}-connector`
-                        ))
-                      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx(
-                          XAxis,
-                          {
-                            dataKey: "label",
-                            height: layout.xAxisHeight,
-                            axisLine: false,
-                            tickLine: false,
-                            tickMargin: 8,
-                            tick: { fontSize: layout.tickFontSize },
-                            tickFormatter: (label) => categoryFormatter(
-                              String(label),
-                              findDatumByLabel(data, label)
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          YAxis,
-                          {
-                            type: "number",
-                            domain: resolvedDomain,
-                            width: layout.yAxisWidth,
-                            axisLine: false,
-                            tickLine: false,
-                            tick: false
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          ReferenceLine,
-                          {
-                            y: 0,
-                            stroke: WATERFALL_CHART_COLORS.baseline,
-                            strokeWidth: layout.connectorWidth
-                          }
-                        ),
-                        steps.slice(0, -1).map((step, index) => /* @__PURE__ */ jsx(
-                          ReferenceLine,
-                          {
-                            segment: [
-                              { x: steps[index].label, y: step.end },
-                              { x: steps[index + 1].label, y: step.end }
-                            ],
-                            stroke: WATERFALL_CHART_COLORS.connector,
-                            strokeWidth: layout.connectorWidth
-                          },
-                          `${step.label}-connector`
-                        ))
-                      ] }),
-                      showTooltip ? /* @__PURE__ */ jsx(
-                        ChartTooltip,
-                        {
-                          cursor: false,
-                          content: /* @__PURE__ */ jsx(
-                            ChartTooltipContent,
-                            {
-                              nameKey: "type",
-                              valueType,
-                              formatter: formatTooltipValue(valueFormatter, data)
-                            }
-                          )
-                        }
-                      ) : null,
-                      /* @__PURE__ */ jsx(
-                        Bar,
-                        {
-                          dataKey: "range",
-                          name: "Change",
-                          barSize: layout.barSize,
-                          isAnimationActive: false,
-                          shape: /* @__PURE__ */ jsx(WaterfallBarShape, { radius: layout.barRadius }),
-                          children: showValues ? /* @__PURE__ */ jsx(
-                            LabelList,
-                            {
-                              dataKey: "range",
-                              content: /* @__PURE__ */ jsx(
-                                WaterfallValueLabel,
-                                {
-                                  orientation,
-                                  layout,
-                                  valueFormatter,
-                                  data
-                                }
-                              )
-                            }
-                          ) : null
-                        }
-                      )
-                    ]
-                  }
-                )
-              }
-            ),
-            legend ? /* @__PURE__ */ jsx(
-              WaterfallChartLegend,
-              {
-                size: resolvedSize,
-                placement: legend,
-                className: legend === "bottom" ? "justify-center" : "shrink-0"
-              }
-            ) : null
-          ]
-        }
-      )
-    }
-  );
+function WaterfallChartPlot({ data, size, orientation = "vertical", legend = false, showValues = true, showTooltip = false, valueType = "number", valueFormatter = defaultValueFormatter, categoryFormatter = (label) => label, domain, ariaLabel, className, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	const layout = WATERFALL_CHART_LAYOUT[resolvedSize];
+	const steps = resolveWaterfallData(data);
+	if (!steps.length) return null;
+	const isHorizontal = orientation === "horizontal";
+	const resolvedDomain = getWaterfallDomain(steps, domain);
+	const chartHeight = isHorizontal ? layout.horizontalHeight : layout.height;
+	const chartMargin = isHorizontal ? layout.horizontalMargin : layout.margin;
+	const chartData = steps.map((step) => ({
+		...step,
+		range: step.range,
+		step
+	}));
+	const summary = ariaLabel ?? `Waterfall chart from ${steps[0]?.label ?? "start"} to ${steps.at(-1)?.label ?? "end"}`;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("w-full min-w-0", className),
+		"data-slot": "waterfall-chart-plot",
+		role: "img",
+		"aria-label": summary,
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("flex min-w-0 gap-5", legend === "bottom" ? "flex-col" : "items-center justify-between max-sm:flex-col"),
+			children: [/* @__PURE__ */ jsx(ChartContainer, {
+				config: WATERFALL_CHART_CONFIG,
+				className: "aspect-auto w-full min-w-0 flex-1",
+				style: { height: chartHeight },
+				initialDimension: {
+					width: 420,
+					height: chartHeight
+				},
+				children: /* @__PURE__ */ jsxs(BarChart, {
+					accessibilityLayer: true,
+					data: chartData,
+					layout: isHorizontal ? "vertical" : "horizontal",
+					margin: chartMargin,
+					children: [
+						isHorizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [
+							/* @__PURE__ */ jsx(XAxis, {
+								type: "number",
+								domain: resolvedDomain,
+								axisLine: false,
+								tickLine: false,
+								tick: false
+							}),
+							/* @__PURE__ */ jsx(YAxis, {
+								type: "category",
+								dataKey: "label",
+								width: layout.yAxisWidth,
+								axisLine: false,
+								tickLine: false,
+								tickMargin: 8,
+								tick: { fontSize: layout.tickFontSize },
+								tickFormatter: (label) => categoryFormatter(String(label), findDatumByLabel(data, label))
+							}),
+							/* @__PURE__ */ jsx(ReferenceLine, {
+								x: 0,
+								stroke: WATERFALL_CHART_COLORS.baseline,
+								strokeWidth: layout.connectorWidth
+							}),
+							steps.slice(0, -1).map((step, index) => /* @__PURE__ */ jsx(ReferenceLine, {
+								segment: [{
+									x: step.end,
+									y: steps[index].label
+								}, {
+									x: step.end,
+									y: steps[index + 1].label
+								}],
+								stroke: WATERFALL_CHART_COLORS.connector,
+								strokeWidth: layout.connectorWidth
+							}, `${step.label}-connector`))
+						] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+							/* @__PURE__ */ jsx(XAxis, {
+								dataKey: "label",
+								height: layout.xAxisHeight,
+								axisLine: false,
+								tickLine: false,
+								tickMargin: 8,
+								tick: { fontSize: layout.tickFontSize },
+								tickFormatter: (label) => categoryFormatter(String(label), findDatumByLabel(data, label))
+							}),
+							/* @__PURE__ */ jsx(YAxis, {
+								type: "number",
+								domain: resolvedDomain,
+								width: layout.yAxisWidth,
+								axisLine: false,
+								tickLine: false,
+								tick: false
+							}),
+							/* @__PURE__ */ jsx(ReferenceLine, {
+								y: 0,
+								stroke: WATERFALL_CHART_COLORS.baseline,
+								strokeWidth: layout.connectorWidth
+							}),
+							steps.slice(0, -1).map((step, index) => /* @__PURE__ */ jsx(ReferenceLine, {
+								segment: [{
+									x: steps[index].label,
+									y: step.end
+								}, {
+									x: steps[index + 1].label,
+									y: step.end
+								}],
+								stroke: WATERFALL_CHART_COLORS.connector,
+								strokeWidth: layout.connectorWidth
+							}, `${step.label}-connector`))
+						] }),
+						showTooltip ? /* @__PURE__ */ jsx(ChartTooltip, {
+							cursor: false,
+							content: /* @__PURE__ */ jsx(ChartTooltipContent, {
+								nameKey: "type",
+								valueType,
+								formatter: formatTooltipValue(valueFormatter, data)
+							})
+						}) : null,
+						/* @__PURE__ */ jsx(Bar, {
+							dataKey: "range",
+							name: "Change",
+							barSize: layout.barSize,
+							isAnimationActive: false,
+							shape: /* @__PURE__ */ jsx(WaterfallBarShape, { radius: layout.barRadius }),
+							children: showValues ? /* @__PURE__ */ jsx(LabelList, {
+								dataKey: "range",
+								content: /* @__PURE__ */ jsx(WaterfallValueLabel, {
+									orientation,
+									layout,
+									valueFormatter,
+									data
+								})
+							}) : null
+						})
+					]
+				})
+			}), legend ? /* @__PURE__ */ jsx(WaterfallChartLegend, {
+				size: resolvedSize,
+				placement: legend,
+				className: legend === "bottom" ? "justify-center" : "shrink-0"
+			}) : null]
+		})
+	});
 }
-function WaterfallChart({
-  data,
-  size,
-  orientation = "vertical",
-  title,
-  description,
-  legend = "right",
-  showValues = true,
-  showTooltip = false,
-  valueType = "number",
-  valueFormatter,
-  categoryFormatter,
-  domain,
-  ariaLabel,
-  className,
-  ...props
-}) {
-  const resolvedSize = useComponentSize(size);
-  const showHeader = title != null || description != null;
-  return /* @__PURE__ */ jsx(ChartCard, { size: resolvedSize, className, ...props, children: /* @__PURE__ */ jsxs(SizeProvider, { size: resolvedSize, children: [
-    showHeader ? /* @__PURE__ */ jsxs(ChartHeader, { children: [
-      title != null ? /* @__PURE__ */ jsx(ChartTitle, { children: title }) : null,
-      description != null ? /* @__PURE__ */ jsx(ChartDescription, { children: description }) : null
-    ] }) : null,
-    /* @__PURE__ */ jsx(
-      WaterfallChartPlot,
-      {
-        data,
-        size: resolvedSize,
-        orientation,
-        legend,
-        showValues,
-        showTooltip,
-        valueType,
-        valueFormatter,
-        categoryFormatter,
-        domain,
-        ariaLabel
-      }
-    )
-  ] }) });
+function WaterfallChart({ data, size, orientation = "vertical", title, description, legend = "right", showValues = true, showTooltip = false, valueType = "number", valueFormatter, categoryFormatter, domain, ariaLabel, className, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	const showHeader = title != null || description != null;
+	return /* @__PURE__ */ jsx(ChartCard, {
+		size: resolvedSize,
+		className,
+		...props,
+		children: /* @__PURE__ */ jsxs(SizeProvider, {
+			size: resolvedSize,
+			children: [showHeader ? /* @__PURE__ */ jsxs(ChartHeader, { children: [title != null ? /* @__PURE__ */ jsx(ChartTitle, { children: title }) : null, description != null ? /* @__PURE__ */ jsx(ChartDescription, { children: description }) : null] }) : null, /* @__PURE__ */ jsx(WaterfallChartPlot, {
+				data,
+				size: resolvedSize,
+				orientation,
+				legend,
+				showValues,
+				showTooltip,
+				valueType,
+				valueFormatter,
+				categoryFormatter,
+				domain,
+				ariaLabel
+			})]
+		})
+	});
 }
-var WaterfallChartCard = WaterfallChart;
-export {
-  WATERFALL_CHART_COLORS,
-  WATERFALL_CHART_CONFIG,
-  WATERFALL_CHART_LAYOUT,
-  WATERFALL_CHART_LEGEND_ITEMS,
-  WaterfallChart,
-  WaterfallChartCard,
-  WaterfallChartLegend,
-  WaterfallChartPlot,
-  resolveWaterfallData
-};
-//# sourceMappingURL=waterfall-chart.js.map
+const WaterfallChartCard = WaterfallChart;
+//#endregion
+export { WATERFALL_CHART_COLORS, WATERFALL_CHART_CONFIG, WATERFALL_CHART_LAYOUT, WATERFALL_CHART_LEGEND_ITEMS, WaterfallChart, WaterfallChartCard, WaterfallChartLegend, WaterfallChartPlot, resolveWaterfallData };