@giddaa-housing/ui 0.1.0 → 1.1.0

package/dist/use-uncontrolled-CLfM1XbB.js

@@ -0,0 +1,21 @@
+import { useState } from "react";
+//#region src/lib/use-uncontrolled.ts
+function useUncontrolled({ value, defaultValue, finalValue, onChange = () => {} }) {
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue !== void 0 ? defaultValue : finalValue);
+	const handleUncontrolledChange = (nextValue, ...payload) => {
+		setUncontrolledValue(nextValue);
+		onChange?.(nextValue, ...payload);
+	};
+	if (value !== void 0) return [
+		value,
+		onChange,
+		true
+	];
+	return [
+		uncontrolledValue,
+		handleUncontrolledChange,
+		false
+	];
+}
+//#endregion
+export { useUncontrolled as t };

package/dist/waterfall-chart.d.ts

@@ -0,0 +1,126 @@
+import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import { ChartCard, ChartValueType } from "./chart.js";
+import * as React from "react";
+//#region src/waterfall-chart.d.ts
+type WaterfallChartOrientation = "vertical" | "horizontal";
+type WaterfallChartLegendPlacement = "right" | "bottom";
+type WaterfallChartStepType = "auto" | "increase" | "decrease" | "total";
+type WaterfallChartDatum = {
+  /** Step label shown on the category axis, legend/tooltip context, and value label context. */
+  label: string;
+  /** Absolute subtotal for `type="total"`; delta amount for increase/decrease steps. */
+  value: number;
+  /** Defaults to `total` for the first/last datum and `auto` for middle data. */
+  type?: WaterfallChartStepType;
+  /** Optional fill override for this step. Defaults to semantic status tokens. */
+  fill?: string;
+};
+type ResolvedWaterfallStep = {
+  label: string;
+  value: number;
+  start: number;
+  end: number;
+  range: [number, number];
+  type: Exclude<WaterfallChartStepType, "auto">;
+  fill: string;
+};
+type WaterfallChartLayout = {
+  height: number;
+  horizontalHeight: number;
+  margin: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+  };
+  horizontalMargin: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+  };
+  barSize: number;
+  barRadius: number;
+  connectorWidth: number;
+  valueGap: number;
+  tickFontSize: number;
+  yAxisWidth: number;
+  xAxisHeight: number;
+};
+type WaterfallChartFormatContext = {
+  datum: WaterfallChartDatum;
+  step: ResolvedWaterfallStep;
+  index: number;
+};
+type WaterfallChartPlotProps = Omit<React.ComponentProps<"div">, "children"> & {
+  data: WaterfallChartDatum[];
+  size?: ComponentSize;
+  orientation?: WaterfallChartOrientation;
+  legend?: WaterfallChartLegendPlacement | false;
+  showValues?: boolean;
+  showTooltip?: boolean;
+  valueType?: ChartValueType;
+  valueFormatter?: (value: number, context: WaterfallChartFormatContext) => React.ReactNode;
+  categoryFormatter?: (label: string, datum: WaterfallChartDatum) => string;
+  domain?: [number, number] | [number, "auto"];
+  ariaLabel?: string;
+};
+type WaterfallChartLegendProps = Omit<React.ComponentProps<"div">, "children"> & {
+  size?: ComponentSize;
+  placement?: WaterfallChartLegendPlacement;
+  items?: WaterfallChartLegendItem[];
+};
+type WaterfallChartLegendItem = {
+  label: string;
+  color: string;
+};
+type WaterfallChartProps = Omit<React.ComponentProps<typeof ChartCard>, "children" | "size"> & WaterfallChartPlotProps & {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+};
+declare const WATERFALL_CHART_COLORS: {
+  readonly total: "var(--color-status-info)";
+  readonly increase: "var(--color-status-success)";
+  readonly decrease: "var(--color-status-danger)";
+  readonly connector: "var(--color-line-strong)";
+  readonly baseline: "var(--color-line)";
+};
+declare const WATERFALL_CHART_LEGEND_ITEMS: WaterfallChartLegendItem[];
+declare const WATERFALL_CHART_CONFIG: {
+  increase: {
+    label: string;
+    color: "var(--color-status-success)";
+  };
+  decrease: {
+    label: string;
+    color: "var(--color-status-danger)";
+  };
+  total: {
+    label: string;
+    color: "var(--color-status-info)";
+  };
+};
+declare const WATERFALL_CHART_LAYOUT: Record<ComponentSize, WaterfallChartLayout>;
+declare function resolveWaterfallData(data: WaterfallChartDatum[]): ({
+  label: string;
+  value: number;
+  start: number;
+  end: number;
+  range: [number, number];
+  type: "total";
+  fill: string;
+} | {
+  label: string;
+  value: number;
+  start: number;
+  end: number;
+  range: [number, number];
+  type: "decrease" | "increase";
+  fill: string;
+})[];
+declare function WaterfallChartLegend({ className, size, placement, items, ...props }: WaterfallChartLegendProps): React.JSX.Element;
+declare function WaterfallChartPlot({ data, size, orientation, legend, showValues, showTooltip, valueType, valueFormatter, categoryFormatter, domain, ariaLabel, className, ...props }: WaterfallChartPlotProps): React.JSX.Element | null;
+declare function WaterfallChart({ data, size, orientation, title, description, legend, showValues, showTooltip, valueType, valueFormatter, categoryFormatter, domain, ariaLabel, className, ...props }: WaterfallChartProps): React.JSX.Element;
+declare const WaterfallChartCard: typeof WaterfallChart;
+//#endregion
+export { type ResolvedWaterfallStep, WATERFALL_CHART_COLORS, WATERFALL_CHART_CONFIG, WATERFALL_CHART_LAYOUT, WATERFALL_CHART_LEGEND_ITEMS, WaterfallChart, WaterfallChartCard, type WaterfallChartDatum, type WaterfallChartFormatContext, type WaterfallChartLayout, WaterfallChartLegend, type WaterfallChartLegendItem, type WaterfallChartLegendPlacement, type WaterfallChartOrientation, WaterfallChartPlot, type WaterfallChartPlotProps, type WaterfallChartProps, type WaterfallChartStepType, resolveWaterfallData };

package/dist/waterfall-chart.js

@@ -0,0 +1,480 @@
+"use client";
+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";
+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)"
+};
+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
+	}
+];
+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
+	}
+};
+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
+	}
+};
+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")}`;
+}
+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)
+		};
+	});
+}
+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 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;
+}
+function findDatumByLabel(data, label) {
+	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
+		});
+	};
+}
+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
+	});
+}
+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(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
+			})]
+		})
+	});
+}
+const WaterfallChartCard = WaterfallChart;
+//#endregion
+export { WATERFALL_CHART_COLORS, WATERFALL_CHART_CONFIG, WATERFALL_CHART_LAYOUT, WATERFALL_CHART_LEGEND_ITEMS, WaterfallChart, WaterfallChartCard, WaterfallChartLegend, WaterfallChartPlot, resolveWaterfallData };