@giddaa-housing/ui 1.0.0 → 1.1.0

package/dist/heatmap-chart.d.ts

@@ -1,10 +1,7 @@
-import * as React from 'react';
-import { ChartCard } from './chart.js';
-import { ComponentSize } from './size-context.js';
-import 'class-variance-authority/types';
-import 'class-variance-authority';
-import 'recharts';
-
+import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import { ChartCard } from "./chart.js";
+import * as React from "react";
+//#region src/heatmap-chart.d.ts
 /**
  * A heatmap — a row × column grid encoding magnitude as fill intensity.
  * Reach for one to compare a measure across two categorical dimensions at a
@@ -37,12 +34,12 @@ import 'recharts';
 /** Heatmap sizes line up with the three shared `ComponentSize` values. */
 type HeatmapChartSize = ComponentSize;
 type HeatmapChartCellDatum = {
-    /** Row category label. */
-    row: string;
-    /** Column category label. */
-    column: string;
-    /** Magnitude driving the cell's fill. Omit the datum entirely for "no data". */
-    value: number;
+  /** Row category label. */
+  row: string;
+  /** Column category label. */
+  column: string;
+  /** Magnitude driving the cell's fill. Omit the datum entirely for "no data". */
+  value: number;
 };
 /**
  * Sequential fill ramp — `--color-surface-brand` (already theme-aware) at five
@@ -54,45 +51,45 @@ type HeatmapChartCellDatum = {
  */
 declare const HEATMAP_CHART_PALETTE: readonly ["rgb(from var(--color-surface-brand) r g b / 0.08)", "rgb(from var(--color-surface-brand) r g b / 0.22)", "rgb(from var(--color-surface-brand) r g b / 0.44)", "rgb(from var(--color-surface-brand) r g b / 0.7)", "rgb(from var(--color-surface-brand) r g b / 1)"];
 type HeatmapChartLayout = {
-    /** Width/height of a single (square) cell in px. */
-    cellSize: number;
-    /** Gap between cells in px. */
-    gap: number;
-    /** Reserved width for row labels in px. */
-    rowLabelWidth: number;
-    /** Reserved height for the column header row in px. */
-    columnLabelHeight: number;
-    /** Row/column label font size in px. */
-    labelFontSize: number;
-    /** In-cell value label font size in px. */
-    valueFontSize: number;
-    /** Width of a single legend ramp swatch in px. */
-    legendSwatchSize: number;
+  /** Width/height of a single (square) cell in px. */
+  cellSize: number;
+  /** Gap between cells in px. */
+  gap: number;
+  /** Reserved width for row labels in px. */
+  rowLabelWidth: number;
+  /** Reserved height for the column header row in px. */
+  columnLabelHeight: number;
+  /** Row/column label font size in px. */
+  labelFontSize: number;
+  /** In-cell value label font size in px. */
+  valueFontSize: number;
+  /** Width of a single legend ramp swatch in px. */
+  legendSwatchSize: number;
 };
 declare const HEATMAP_CHART_LAYOUT: Record<HeatmapChartSize, HeatmapChartLayout>;
 type HeatmapChartProps = Omit<React.ComponentProps<typeof ChartCard>, "size" | "children"> & {
-    /** Cells — one entry per row/column pair that has a value. */
-    data: HeatmapChartCellDatum[];
-    /** Row order, top to bottom. Defaults to first-seen order in `data`. */
-    rows?: string[];
-    /** Column order, left to right. Defaults to first-seen order in `data`. */
-    columns?: string[];
-    /** Fixed `[min, max]` for the color scale. Defaults to the data's range. */
-    domain?: [number, number];
-    /** Explicit size; otherwise inherited from the nearest `SizeProvider`. */
-    size?: HeatmapChartSize;
-    /** Chart heading. Omit to hide the title. */
-    title?: React.ReactNode;
-    /** Supporting metadata (period, source). Omit to hide the description. */
-    description?: React.ReactNode;
-    /** Show the sequential-scale legend under the grid. Default true. */
-    legend?: boolean;
-    /** Print the formatted value inside every cell. Default false — the
-     * hover/focus tooltip carries exact figures without crowding the grid. */
-    showValues?: boolean;
-    /** Format a cell value for the tooltip, legend, and in-cell label. */
-    valueFormatter?: (value: number) => string;
+  /** Cells — one entry per row/column pair that has a value. */
+  data: HeatmapChartCellDatum[];
+  /** Row order, top to bottom. Defaults to first-seen order in `data`. */
+  rows?: string[];
+  /** Column order, left to right. Defaults to first-seen order in `data`. */
+  columns?: string[];
+  /** Fixed `[min, max]` for the color scale. Defaults to the data's range. */
+  domain?: [number, number];
+  /** Explicit size; otherwise inherited from the nearest `SizeProvider`. */
+  size?: HeatmapChartSize;
+  /** Chart heading. Omit to hide the title. */
+  title?: React.ReactNode;
+  /** Supporting metadata (period, source). Omit to hide the description. */
+  description?: React.ReactNode;
+  /** Show the sequential-scale legend under the grid. Default true. */
+  legend?: boolean;
+  /** Print the formatted value inside every cell. Default false — the
+   * hover/focus tooltip carries exact figures without crowding the grid. */
+  showValues?: boolean;
+  /** Format a cell value for the tooltip, legend, and in-cell label. */
+  valueFormatter?: (value: number) => string;
 };
 declare function HeatmapChart({ data, rows: rowsProp, columns: columnsProp, domain: domainProp, size, title, description, legend, showValues, valueFormatter, className, ...props }: HeatmapChartProps): React.JSX.Element;
-
-export { HEATMAP_CHART_LAYOUT, HEATMAP_CHART_PALETTE, HeatmapChart, type HeatmapChartCellDatum, type HeatmapChartLayout, type HeatmapChartProps, type HeatmapChartSize };
+//#endregion
+export { HEATMAP_CHART_LAYOUT, HEATMAP_CHART_PALETTE, HeatmapChart, type HeatmapChartCellDatum, type HeatmapChartLayout, type HeatmapChartProps, type HeatmapChartSize };

package/dist/heatmap-chart.js

@@ -1,248 +1,197 @@
 "use client";
-import {
-  ChartCard,
-  ChartDescription,
-  ChartHeader,
-  ChartTitle
-} from "./chunk-NOFXVRWL.js";
-import {
-  useComponentSize
-} from "./chunk-HL3ZSYES.js";
-import "./chunk-Y4TTYVNE.js";
-
-// src/heatmap-chart.tsx
-import { Fragment } from "react";
+import { useComponentSize } from "./size-context.js";
+import { ChartCard, ChartDescription, ChartHeader, ChartTitle } from "./chart.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-var HEATMAP_CHART_PALETTE = [
-  "rgb(from var(--color-surface-brand) r g b / 0.08)",
-  "rgb(from var(--color-surface-brand) r g b / 0.22)",
-  "rgb(from var(--color-surface-brand) r g b / 0.44)",
-  "rgb(from var(--color-surface-brand) r g b / 0.7)",
-  "rgb(from var(--color-surface-brand) r g b / 1)"
+import { Fragment as Fragment$1 } from "react";
+//#region src/heatmap-chart.tsx
+/**
+* Sequential fill ramp — `--color-surface-brand` (already theme-aware) at five
+* magnitude-scaled opacity stops: 8%, 22%, 44%, 70%, 100%. Index 0 is the
+* lowest magnitude bucket, index 4 the highest — assign by bucket order,
+* never by an arbitrary opacity pick. Relative color syntax (`rgb(from … / a)`)
+* keeps each stop a true alpha over whatever surface it sits on, matching the
+* shadow/gradient tokens in `styles/giddaa.css`.
+*/
+const HEATMAP_CHART_PALETTE = [
+	"rgb(from var(--color-surface-brand) r g b / 0.08)",
+	"rgb(from var(--color-surface-brand) r g b / 0.22)",
+	"rgb(from var(--color-surface-brand) r g b / 0.44)",
+	"rgb(from var(--color-surface-brand) r g b / 0.7)",
+	"rgb(from var(--color-surface-brand) r g b / 1)"
 ];
-var HEATMAP_CHART_LAYOUT = {
-  sm: {
-    cellSize: 20,
-    gap: 3,
-    rowLabelWidth: 64,
-    columnLabelHeight: 20,
-    labelFontSize: 10,
-    valueFontSize: 9,
-    legendSwatchSize: 14
-  },
-  md: {
-    cellSize: 26,
-    gap: 3,
-    rowLabelWidth: 80,
-    columnLabelHeight: 22,
-    labelFontSize: 11,
-    valueFontSize: 10,
-    legendSwatchSize: 16
-  },
-  lg: {
-    cellSize: 32,
-    gap: 4,
-    rowLabelWidth: 96,
-    columnLabelHeight: 24,
-    labelFontSize: 12,
-    valueFontSize: 11,
-    legendSwatchSize: 18
-  }
+const HEATMAP_CHART_LAYOUT = {
+	sm: {
+		cellSize: 20,
+		gap: 3,
+		rowLabelWidth: 64,
+		columnLabelHeight: 20,
+		labelFontSize: 10,
+		valueFontSize: 9,
+		legendSwatchSize: 14
+	},
+	md: {
+		cellSize: 26,
+		gap: 3,
+		rowLabelWidth: 80,
+		columnLabelHeight: 22,
+		labelFontSize: 11,
+		valueFontSize: 10,
+		legendSwatchSize: 16
+	},
+	lg: {
+		cellSize: 32,
+		gap: 4,
+		rowLabelWidth: 96,
+		columnLabelHeight: 24,
+		labelFontSize: 12,
+		valueFontSize: 11,
+		legendSwatchSize: 18
+	}
 };
+/** Joins a row/column pair into a stable lookup key. */
 function cellKey(row, column) {
-  return `${row}\u241F${column}`;
+	return `${row}␟${column}`;
 }
+/** Buckets a value into one of the five palette steps (1 = lowest, 5 = highest). */
 function heatmapStep(value, domain) {
-  const [min, max] = domain;
-  if (max <= min) return HEATMAP_CHART_PALETTE.length;
-  const ratio = (value - min) / (max - min);
-  const step = Math.ceil(ratio * HEATMAP_CHART_PALETTE.length);
-  return Math.min(HEATMAP_CHART_PALETTE.length, Math.max(1, step));
+	const [min, max] = domain;
+	if (max <= min) return HEATMAP_CHART_PALETTE.length;
+	const ratio = (value - min) / (max - min);
+	const step = Math.ceil(ratio * HEATMAP_CHART_PALETTE.length);
+	return Math.min(HEATMAP_CHART_PALETTE.length, Math.max(1, step));
 }
-function HeatmapChart({
-  data,
-  rows: rowsProp,
-  columns: columnsProp,
-  domain: domainProp,
-  size,
-  title,
-  description,
-  legend = true,
-  showValues = false,
-  valueFormatter = (value) => value.toLocaleString("en-NG"),
-  className,
-  ...props
-}) {
-  const resolvedSize = useComponentSize(size);
-  const layout = HEATMAP_CHART_LAYOUT[resolvedSize];
-  const rows = rowsProp ?? Array.from(new Set(data.map((d) => d.row)));
-  const columns = columnsProp ?? Array.from(new Set(data.map((d) => d.column)));
-  const valuesByKey = new Map(
-    data.map((datum) => [cellKey(datum.row, datum.column), datum.value])
-  );
-  const values = data.map((datum) => datum.value);
-  const domain = domainProp ?? [
-    values.length ? Math.min(...values) : 0,
-    values.length ? Math.max(...values) : 1
-  ];
-  return /* @__PURE__ */ jsxs(ChartCard, { size: resolvedSize, className, ...props, children: [
-    (title != null || description != null) && /* @__PURE__ */ jsxs(ChartHeader, { children: [
-      title != null && /* @__PURE__ */ jsx(ChartTitle, { children: title }),
-      description != null && /* @__PURE__ */ jsx(ChartDescription, { children: description })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
-      /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "inline-grid",
-          style: {
-            gridTemplateColumns: `${layout.rowLabelWidth}px repeat(${columns.length}, ${layout.cellSize}px)`,
-            gap: layout.gap
-          },
-          children: [
-            /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
-            columns.map((column) => /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "flex items-end justify-center truncate px-0.5 pb-1 text-fg-secondary",
-                style: {
-                  fontSize: layout.labelFontSize,
-                  height: layout.columnLabelHeight
-                },
-                title: column,
-                children: column
-              },
-              column
-            )),
-            rows.map((row) => /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "flex items-center truncate pr-2 text-fg-secondary",
-                  style: {
-                    fontSize: layout.labelFontSize,
-                    height: layout.cellSize
-                  },
-                  title: row,
-                  children: row
-                }
-              ),
-              columns.map((column) => /* @__PURE__ */ jsx(
-                HeatmapChartCell,
-                {
-                  row,
-                  column,
-                  value: valuesByKey.get(cellKey(row, column)),
-                  domain,
-                  layout,
-                  showValue: showValues,
-                  valueFormatter
-                },
-                column
-              ))
-            ] }, row))
-          ]
-        }
-      ) }),
-      legend && /* @__PURE__ */ jsx(
-        HeatmapChartLegend,
-        {
-          domain,
-          layout,
-          valueFormatter
-        }
-      )
-    ] })
-  ] });
+function HeatmapChart({ data, rows: rowsProp, columns: columnsProp, domain: domainProp, size, title, description, legend = true, showValues = false, valueFormatter = (value) => value.toLocaleString("en-NG"), className, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	const layout = HEATMAP_CHART_LAYOUT[resolvedSize];
+	const rows = rowsProp ?? Array.from(new Set(data.map((d) => d.row)));
+	const columns = columnsProp ?? Array.from(new Set(data.map((d) => d.column)));
+	const valuesByKey = new Map(data.map((datum) => [cellKey(datum.row, datum.column), datum.value]));
+	const values = data.map((datum) => datum.value);
+	const domain = domainProp ?? [values.length ? Math.min(...values) : 0, values.length ? Math.max(...values) : 1];
+	return /* @__PURE__ */ jsxs(ChartCard, {
+		size: resolvedSize,
+		className,
+		...props,
+		children: [(title != null || description != null) && /* @__PURE__ */ jsxs(ChartHeader, { children: [title != null && /* @__PURE__ */ jsx(ChartTitle, { children: title }), description != null && /* @__PURE__ */ jsx(ChartDescription, { children: description })] }), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-3",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "overflow-x-auto",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "inline-grid",
+					style: {
+						gridTemplateColumns: `${layout.rowLabelWidth}px repeat(${columns.length}, ${layout.cellSize}px)`,
+						gap: layout.gap
+					},
+					children: [
+						/* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+						columns.map((column) => /* @__PURE__ */ jsx("span", {
+							className: "flex items-end justify-center truncate px-0.5 pb-1 text-fg-secondary",
+							style: {
+								fontSize: layout.labelFontSize,
+								height: layout.columnLabelHeight
+							},
+							title: column,
+							children: column
+						}, column)),
+						rows.map((row) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+							className: "flex items-center truncate pr-2 text-fg-secondary",
+							style: {
+								fontSize: layout.labelFontSize,
+								height: layout.cellSize
+							},
+							title: row,
+							children: row
+						}), columns.map((column) => /* @__PURE__ */ jsx(HeatmapChartCell, {
+							row,
+							column,
+							value: valuesByKey.get(cellKey(row, column)),
+							domain,
+							layout,
+							showValue: showValues,
+							valueFormatter
+						}, column))] }, row))
+					]
+				})
+			}), legend && /* @__PURE__ */ jsx(HeatmapChartLegend, {
+				domain,
+				layout,
+				valueFormatter
+			})]
+		})]
+	});
 }
-function HeatmapChartCell({
-  row,
-  column,
-  value,
-  domain,
-  layout,
-  showValue,
-  valueFormatter
-}) {
-  if (value == null) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: "rounded-[4px] border border-line-subtle border-dashed",
-        style: { width: layout.cellSize, height: layout.cellSize },
-        title: `${row} \xB7 ${column}: no data`
-      }
-    );
-  }
-  const step = heatmapStep(value, domain);
-  const color = HEATMAP_CHART_PALETTE[step - 1];
-  const formatted = valueFormatter(value);
-  const label = `${row} \xB7 ${column}: ${formatted}`;
-  const textColor = step >= 4 ? "var(--color-fg-on-brand)" : "var(--color-fg-primary)";
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      className: "group/cell relative flex items-center justify-center rounded-[4px] outline-none focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]",
-      style: {
-        width: layout.cellSize,
-        height: layout.cellSize,
-        backgroundColor: color
-      },
-      "aria-label": label,
-      children: [
-        showValue && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "pointer-events-none tabular-nums",
-            style: { fontSize: layout.valueFontSize, color: textColor },
-            children: formatted
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            role: "tooltip",
-            className: "pointer-events-none absolute bottom-full left-1/2 z-10 mb-1.5 -translate-x-1/2 whitespace-nowrap rounded-md border border-line-subtle bg-surface-overlay px-2 py-1 text-fg-primary text-gdt-xs opacity-0 shadow-2 transition-opacity group-hover/cell:opacity-100 group-focus-visible/cell:opacity-100",
-            children: label
-          }
-        )
-      ]
-    }
-  );
+/**
+* One grid cell. Missing data (no matching datum for this row/column) renders
+* a dashed placeholder and is skipped from tab order — there is nothing to
+* announce or hover. A valued cell is a focusable, hoverable swatch: the
+* `aria-label` carries the row/column/value so screen readers get the exact
+* figure without relying on the visual tooltip, which mirrors it for sighted
+* hover/keyboard-focus use.
+*/
+function HeatmapChartCell({ row, column, value, domain, layout, showValue, valueFormatter }) {
+	if (value == null) return /* @__PURE__ */ jsx("span", {
+		className: "rounded-[4px] border border-line-subtle border-dashed",
+		style: {
+			width: layout.cellSize,
+			height: layout.cellSize
+		},
+		title: `${row} · ${column}: no data`
+	});
+	const step = heatmapStep(value, domain);
+	const color = HEATMAP_CHART_PALETTE[step - 1];
+	const formatted = valueFormatter(value);
+	const label = `${row} · ${column}: ${formatted}`;
+	const textColor = step >= 4 ? "var(--color-fg-on-brand)" : "var(--color-fg-primary)";
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: "group/cell relative flex items-center justify-center rounded-[4px] outline-none focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]",
+		style: {
+			width: layout.cellSize,
+			height: layout.cellSize,
+			backgroundColor: color
+		},
+		"aria-label": label,
+		children: [showValue && /* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none tabular-nums",
+			style: {
+				fontSize: layout.valueFontSize,
+				color: textColor
+			},
+			children: formatted
+		}), /* @__PURE__ */ jsx("span", {
+			role: "tooltip",
+			className: "pointer-events-none absolute bottom-full left-1/2 z-10 mb-1.5 -translate-x-1/2 whitespace-nowrap rounded-md border border-line-subtle bg-surface-overlay px-2 py-1 text-fg-primary text-gdt-xs opacity-0 shadow-2 transition-opacity group-hover/cell:opacity-100 group-focus-visible/cell:opacity-100",
+			children: label
+		})]
+	});
 }
-function HeatmapChartLegend({
-  domain,
-  layout,
-  valueFormatter
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "flex items-center gap-2 text-fg-caption-placeholder",
-      style: { fontSize: layout.labelFontSize },
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: valueFormatter(domain[0]) }),
-        /* @__PURE__ */ jsx("div", { className: "flex overflow-hidden rounded-[3px]", children: HEATMAP_CHART_PALETTE.map((color) => /* @__PURE__ */ jsx(
-          "span",
-          {
-            "aria-hidden": "true",
-            style: {
-              backgroundColor: color,
-              width: layout.legendSwatchSize,
-              height: layout.legendSwatchSize / 2
-            }
-          },
-          color
-        )) }),
-        /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: valueFormatter(domain[1]) })
-      ]
-    }
-  );
+/** Sequential-scale legend — the opacity ramp bounded by the domain's min/max. */
+function HeatmapChartLegend({ domain, layout, valueFormatter }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2 text-fg-caption-placeholder",
+		style: { fontSize: layout.labelFontSize },
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "tabular-nums",
+				children: valueFormatter(domain[0])
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex overflow-hidden rounded-[3px]",
+				children: HEATMAP_CHART_PALETTE.map((color) => /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					style: {
+						backgroundColor: color,
+						width: layout.legendSwatchSize,
+						height: layout.legendSwatchSize / 2
+					}
+				}, color))
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "tabular-nums",
+				children: valueFormatter(domain[1])
+			})
+		]
+	});
 }
-export {
-  HEATMAP_CHART_LAYOUT,
-  HEATMAP_CHART_PALETTE,
-  HeatmapChart
-};
-//# sourceMappingURL=heatmap-chart.js.map
+//#endregion
+export { HEATMAP_CHART_LAYOUT, HEATMAP_CHART_PALETTE, HeatmapChart };

package/dist/infotip.d.ts

@@ -1,11 +1,10 @@
-import * as React from 'react';
-import { Popover } from '@base-ui/react/popover';
-
-declare function Infotip({ ...props }: Popover.Root.Props): React.JSX.Element;
-declare function InfotipTrigger({ ...props }: Popover.Trigger.Props): React.JSX.Element;
+import { Popover } from "@base-ui/react/popover";
+//#region src/infotip.d.ts
+declare function Infotip({ ...props }: Popover.Root.Props): import("react").JSX.Element;
+declare function InfotipTrigger({ ...props }: Popover.Trigger.Props): import("react").JSX.Element;
 type InfotipContentProps = Popover.Popup.Props & Pick<Popover.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset"> & Pick<Popover.Portal.Props, "container"> & {
-    showArrow?: boolean;
+  showArrow?: boolean;
 };
-declare function InfotipContent({ className, container, side, sideOffset, align, alignOffset, showArrow, children, ...props }: InfotipContentProps): React.JSX.Element;
-
-export { Infotip, InfotipContent, InfotipTrigger };
+declare function InfotipContent({ className, container, side, sideOffset, align, alignOffset, showArrow, children, ...props }: InfotipContentProps): import("react").JSX.Element;
+//#endregion
+export { Infotip, InfotipContent, InfotipTrigger };