@giddaa-housing/ui 0.1.0 → 1.0.0

package/dist/gallery-indicator.d.ts

@@ -0,0 +1,18 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+type GalleryIndicatorSize = "sm" | "md" | "lg";
+declare const galleryIndicatorVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type GalleryIndicatorProps = React.ComponentProps<"span"> & VariantProps<typeof galleryIndicatorVariants> & {
+    photoCount?: number;
+    currentPhoto?: number;
+    totalPhotos?: number;
+    label?: string;
+};
+declare function GalleryIndicatorIcon(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+declare function GalleryIndicator({ className, size, photoCount, currentPhoto, totalPhotos, label, children, ...props }: GalleryIndicatorProps): React.JSX.Element;
+
+export { GalleryIndicator, GalleryIndicatorIcon, type GalleryIndicatorProps, type GalleryIndicatorSize, galleryIndicatorVariants };

package/dist/gallery-indicator.js

@@ -0,0 +1,12 @@
+import {
+  GalleryIndicator,
+  GalleryIndicatorIcon,
+  galleryIndicatorVariants
+} from "./chunk-UJJNLGTM.js";
+import "./chunk-Y4TTYVNE.js";
+export {
+  GalleryIndicator,
+  GalleryIndicatorIcon,
+  galleryIndicatorVariants
+};
+//# sourceMappingURL=gallery-indicator.js.map

package/dist/gallery-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/heatmap-chart.d.ts

@@ -0,0 +1,98 @@
+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';
+
+/**
+ * A heatmap — a row × column grid encoding magnitude as fill intensity.
+ * Reach for one to compare a measure across two categorical dimensions at a
+ * glance (listing inquiries by neighbourhood and month, traffic by day and
+ * hour, repayment rate by branch and quarter).
+ *
+ * Unlike the other charts in this folder it is not built on recharts
+ * (recharts has no heatmap/matrix primitive); it is a CSS grid of cells, a
+ * hover/focus tooltip per cell, and an optional sequential-scale legend. It
+ * stays size-aware via the shared `SizeProvider` and reuses `ChartCard`.
+ *
+ * Color encodes magnitude, so cells are `--color-surface-brand` at a
+ * magnitude-scaled opacity (8/22/44/70/100%) rather than a distinct hue per
+ * bucket — the brand token already flips per theme, so the ramp stays
+ * correct in both without a separate token set. Never the categorical
+ * `chart-1`…`3` tokens, which encode identity, not amount.
+ *
+ * @example
+ * <HeatmapChart
+ *   data={[
+ *     { row: "Lekki", column: "Jan", value: 42 },
+ *     { row: "Lekki", column: "Feb", value: 58 },
+ *     { row: "Yaba", column: "Jan", value: 21 },
+ *     { row: "Yaba", column: "Feb", value: 30 },
+ *   ]}
+ *   title="Listing inquiries"
+ *   description="By neighbourhood · Jan–Feb 2026"
+ * />
+ */
+/** 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;
+};
+/**
+ * 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`.
+ */
+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;
+};
+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;
+};
+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 };

package/dist/heatmap-chart.js

@@ -0,0 +1,248 @@
+"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 { 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)"
+];
+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
+  }
+};
+function cellKey(row, column) {
+  return `${row}\u241F${column}`;
+}
+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));
+}
+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 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
+          }
+        )
+      ]
+    }
+  );
+}
+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

package/dist/heatmap-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/heatmap-chart.tsx"],"sourcesContent":["\"use client\";\n\nimport type * as React from \"react\";\nimport { Fragment } from \"react\";\nimport { ChartCard, ChartDescription, ChartHeader, ChartTitle } from \"./chart\";\nimport { type ComponentSize, useComponentSize } from \"./size-context\";\n\n/**\n * A heatmap — a row × column grid encoding magnitude as fill intensity.\n * Reach for one to compare a measure across two categorical dimensions at a\n * glance (listing inquiries by neighbourhood and month, traffic by day and\n * hour, repayment rate by branch and quarter).\n *\n * Unlike the other charts in this folder it is not built on recharts\n * (recharts has no heatmap/matrix primitive); it is a CSS grid of cells, a\n * hover/focus tooltip per cell, and an optional sequential-scale legend. It\n * stays size-aware via the shared `SizeProvider` and reuses `ChartCard`.\n *\n * Color encodes magnitude, so cells are `--color-surface-brand` at a\n * magnitude-scaled opacity (8/22/44/70/100%) rather than a distinct hue per\n * bucket — the brand token already flips per theme, so the ramp stays\n * correct in both without a separate token set. Never the categorical\n * `chart-1`…`3` tokens, which encode identity, not amount.\n *\n * @example\n * <HeatmapChart\n *   data={[\n *     { row: \"Lekki\", column: \"Jan\", value: 42 },\n *     { row: \"Lekki\", column: \"Feb\", value: 58 },\n *     { row: \"Yaba\", column: \"Jan\", value: 21 },\n *     { row: \"Yaba\", column: \"Feb\", value: 30 },\n *   ]}\n *   title=\"Listing inquiries\"\n *   description=\"By neighbourhood · Jan–Feb 2026\"\n * />\n */\n\n/** Heatmap sizes line up with the three shared `ComponentSize` values. */\ntype HeatmapChartSize = ComponentSize;\n\ntype HeatmapChartCellDatum = {\n\t/** Row category label. */\n\trow: string;\n\t/** Column category label. */\n\tcolumn: string;\n\t/** Magnitude driving the cell's fill. Omit the datum entirely for \"no data\". */\n\tvalue: number;\n};\n\n/**\n * Sequential fill ramp — `--color-surface-brand` (already theme-aware) at five\n * magnitude-scaled opacity stops: 8%, 22%, 44%, 70%, 100%. Index 0 is the\n * lowest magnitude bucket, index 4 the highest — assign by bucket order,\n * never by an arbitrary opacity pick. Relative color syntax (`rgb(from … / a)`)\n * keeps each stop a true alpha over whatever surface it sits on, matching the\n * shadow/gradient tokens in `styles/giddaa.css`.\n */\nconst HEATMAP_CHART_PALETTE = [\n\t\"rgb(from var(--color-surface-brand) r g b / 0.08)\",\n\t\"rgb(from var(--color-surface-brand) r g b / 0.22)\",\n\t\"rgb(from var(--color-surface-brand) r g b / 0.44)\",\n\t\"rgb(from var(--color-surface-brand) r g b / 0.7)\",\n\t\"rgb(from var(--color-surface-brand) r g b / 1)\",\n] as const;\n\ntype HeatmapChartLayout = {\n\t/** Width/height of a single (square) cell in px. */\n\tcellSize: number;\n\t/** Gap between cells in px. */\n\tgap: number;\n\t/** Reserved width for row labels in px. */\n\trowLabelWidth: number;\n\t/** Reserved height for the column header row in px. */\n\tcolumnLabelHeight: number;\n\t/** Row/column label font size in px. */\n\tlabelFontSize: number;\n\t/** In-cell value label font size in px. */\n\tvalueFontSize: number;\n\t/** Width of a single legend ramp swatch in px. */\n\tlegendSwatchSize: number;\n};\n\nconst HEATMAP_CHART_LAYOUT: Record<HeatmapChartSize, HeatmapChartLayout> = {\n\tsm: {\n\t\tcellSize: 20,\n\t\tgap: 3,\n\t\trowLabelWidth: 64,\n\t\tcolumnLabelHeight: 20,\n\t\tlabelFontSize: 10,\n\t\tvalueFontSize: 9,\n\t\tlegendSwatchSize: 14,\n\t},\n\tmd: {\n\t\tcellSize: 26,\n\t\tgap: 3,\n\t\trowLabelWidth: 80,\n\t\tcolumnLabelHeight: 22,\n\t\tlabelFontSize: 11,\n\t\tvalueFontSize: 10,\n\t\tlegendSwatchSize: 16,\n\t},\n\tlg: {\n\t\tcellSize: 32,\n\t\tgap: 4,\n\t\trowLabelWidth: 96,\n\t\tcolumnLabelHeight: 24,\n\t\tlabelFontSize: 12,\n\t\tvalueFontSize: 11,\n\t\tlegendSwatchSize: 18,\n\t},\n};\n\n/** Joins a row/column pair into a stable lookup key. */\nfunction cellKey(row: string, column: string) {\n\treturn `${row}␟${column}`;\n}\n\n/** Buckets a value into one of the five palette steps (1 = lowest, 5 = highest). */\nfunction heatmapStep(value: number, domain: readonly [number, number]) {\n\tconst [min, max] = domain;\n\tif (max <= min) return HEATMAP_CHART_PALETTE.length;\n\tconst ratio = (value - min) / (max - min);\n\tconst step = Math.ceil(ratio * HEATMAP_CHART_PALETTE.length);\n\treturn Math.min(HEATMAP_CHART_PALETTE.length, Math.max(1, step));\n}\n\ntype HeatmapChartProps = Omit<\n\tReact.ComponentProps<typeof ChartCard>,\n\t\"size\" | \"children\"\n> & {\n\t/** Cells — one entry per row/column pair that has a value. */\n\tdata: HeatmapChartCellDatum[];\n\t/** Row order, top to bottom. Defaults to first-seen order in `data`. */\n\trows?: string[];\n\t/** Column order, left to right. Defaults to first-seen order in `data`. */\n\tcolumns?: string[];\n\t/** Fixed `[min, max]` for the color scale. Defaults to the data's range. */\n\tdomain?: [number, number];\n\t/** Explicit size; otherwise inherited from the nearest `SizeProvider`. */\n\tsize?: HeatmapChartSize;\n\t/** Chart heading. Omit to hide the title. */\n\ttitle?: React.ReactNode;\n\t/** Supporting metadata (period, source). Omit to hide the description. */\n\tdescription?: React.ReactNode;\n\t/** Show the sequential-scale legend under the grid. Default true. */\n\tlegend?: boolean;\n\t/** Print the formatted value inside every cell. Default false — the\n\t * hover/focus tooltip carries exact figures without crowding the grid. */\n\tshowValues?: boolean;\n\t/** Format a cell value for the tooltip, legend, and in-cell label. */\n\tvalueFormatter?: (value: number) => string;\n};\n\nfunction HeatmapChart({\n\tdata,\n\trows: rowsProp,\n\tcolumns: columnsProp,\n\tdomain: domainProp,\n\tsize,\n\ttitle,\n\tdescription,\n\tlegend = true,\n\tshowValues = false,\n\tvalueFormatter = (value) => value.toLocaleString(\"en-NG\"),\n\tclassName,\n\t...props\n}: HeatmapChartProps) {\n\tconst resolvedSize = useComponentSize(size);\n\tconst layout = HEATMAP_CHART_LAYOUT[resolvedSize];\n\n\tconst rows = rowsProp ?? Array.from(new Set(data.map((d) => d.row)));\n\tconst columns = columnsProp ?? Array.from(new Set(data.map((d) => d.column)));\n\n\tconst valuesByKey = new Map(\n\t\tdata.map((datum) => [cellKey(datum.row, datum.column), datum.value]),\n\t);\n\n\tconst values = data.map((datum) => datum.value);\n\tconst domain: [number, number] = domainProp ?? [\n\t\tvalues.length ? Math.min(...values) : 0,\n\t\tvalues.length ? Math.max(...values) : 1,\n\t];\n\n\treturn (\n\t\t<ChartCard size={resolvedSize} className={className} {...props}>\n\t\t\t{(title != null || description != null) && (\n\t\t\t\t<ChartHeader>\n\t\t\t\t\t{title != null && <ChartTitle>{title}</ChartTitle>}\n\t\t\t\t\t{description != null && (\n\t\t\t\t\t\t<ChartDescription>{description}</ChartDescription>\n\t\t\t\t\t)}\n\t\t\t\t</ChartHeader>\n\t\t\t)}\n\t\t\t<div className=\"flex flex-col gap-3\">\n\t\t\t\t<div className=\"overflow-x-auto\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"inline-grid\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tgridTemplateColumns: `${layout.rowLabelWidth}px repeat(${columns.length}, ${layout.cellSize}px)`,\n\t\t\t\t\t\t\tgap: layout.gap,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span aria-hidden=\"true\" />\n\t\t\t\t\t\t{columns.map((column) => (\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tkey={column}\n\t\t\t\t\t\t\t\tclassName=\"flex items-end justify-center truncate px-0.5 pb-1 text-fg-secondary\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tfontSize: layout.labelFontSize,\n\t\t\t\t\t\t\t\t\theight: layout.columnLabelHeight,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\ttitle={column}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{column}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t{rows.map((row) => (\n\t\t\t\t\t\t\t<Fragment key={row}>\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclassName=\"flex items-center truncate pr-2 text-fg-secondary\"\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tfontSize: layout.labelFontSize,\n\t\t\t\t\t\t\t\t\t\theight: layout.cellSize,\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\ttitle={row}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{row}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t{columns.map((column) => (\n\t\t\t\t\t\t\t\t\t<HeatmapChartCell\n\t\t\t\t\t\t\t\t\t\tkey={column}\n\t\t\t\t\t\t\t\t\t\trow={row}\n\t\t\t\t\t\t\t\t\t\tcolumn={column}\n\t\t\t\t\t\t\t\t\t\tvalue={valuesByKey.get(cellKey(row, column))}\n\t\t\t\t\t\t\t\t\t\tdomain={domain}\n\t\t\t\t\t\t\t\t\t\tlayout={layout}\n\t\t\t\t\t\t\t\t\t\tshowValue={showValues}\n\t\t\t\t\t\t\t\t\t\tvalueFormatter={valueFormatter}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t{legend && (\n\t\t\t\t\t<HeatmapChartLegend\n\t\t\t\t\t\tdomain={domain}\n\t\t\t\t\t\tlayout={layout}\n\t\t\t\t\t\tvalueFormatter={valueFormatter}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</ChartCard>\n\t);\n}\n\ntype HeatmapChartCellProps = {\n\trow: string;\n\tcolumn: string;\n\tvalue: number | undefined;\n\tdomain: readonly [number, number];\n\tlayout: HeatmapChartLayout;\n\tshowValue: boolean;\n\tvalueFormatter: (value: number) => string;\n};\n\n/**\n * One grid cell. Missing data (no matching datum for this row/column) renders\n * a dashed placeholder and is skipped from tab order — there is nothing to\n * announce or hover. A valued cell is a focusable, hoverable swatch: the\n * `aria-label` carries the row/column/value so screen readers get the exact\n * figure without relying on the visual tooltip, which mirrors it for sighted\n * hover/keyboard-focus use.\n */\nfunction HeatmapChartCell({\n\trow,\n\tcolumn,\n\tvalue,\n\tdomain,\n\tlayout,\n\tshowValue,\n\tvalueFormatter,\n}: HeatmapChartCellProps) {\n\tif (value == null) {\n\t\treturn (\n\t\t\t<span\n\t\t\t\tclassName=\"rounded-[4px] border border-line-subtle border-dashed\"\n\t\t\t\tstyle={{ width: layout.cellSize, height: layout.cellSize }}\n\t\t\t\ttitle={`${row} · ${column}: no data`}\n\t\t\t/>\n\t\t);\n\t}\n\n\tconst step = heatmapStep(value, domain);\n\tconst color = HEATMAP_CHART_PALETTE[step - 1];\n\tconst formatted = valueFormatter(value);\n\tconst label = `${row} · ${column}: ${formatted}`;\n\tconst textColor =\n\t\tstep >= 4 ? \"var(--color-fg-on-brand)\" : \"var(--color-fg-primary)\";\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclassName=\"group/cell relative flex items-center justify-center rounded-[4px] outline-none focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]\"\n\t\t\tstyle={{\n\t\t\t\twidth: layout.cellSize,\n\t\t\t\theight: layout.cellSize,\n\t\t\t\tbackgroundColor: color,\n\t\t\t}}\n\t\t\taria-label={label}\n\t\t>\n\t\t\t{showValue && (\n\t\t\t\t<span\n\t\t\t\t\tclassName=\"pointer-events-none tabular-nums\"\n\t\t\t\t\tstyle={{ fontSize: layout.valueFontSize, color: textColor }}\n\t\t\t\t>\n\t\t\t\t\t{formatted}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t<span\n\t\t\t\trole=\"tooltip\"\n\t\t\t\tclassName=\"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\"\n\t\t\t>\n\t\t\t\t{label}\n\t\t\t</span>\n\t\t</button>\n\t);\n}\n\ntype HeatmapChartLegendProps = {\n\tdomain: readonly [number, number];\n\tlayout: HeatmapChartLayout;\n\tvalueFormatter: (value: number) => string;\n};\n\n/** Sequential-scale legend — the opacity ramp bounded by the domain's min/max. */\nfunction HeatmapChartLegend({\n\tdomain,\n\tlayout,\n\tvalueFormatter,\n}: HeatmapChartLegendProps) {\n\treturn (\n\t\t<div\n\t\t\tclassName=\"flex items-center gap-2 text-fg-caption-placeholder\"\n\t\t\tstyle={{ fontSize: layout.labelFontSize }}\n\t\t>\n\t\t\t<span className=\"tabular-nums\">{valueFormatter(domain[0])}</span>\n\t\t\t<div className=\"flex overflow-hidden rounded-[3px]\">\n\t\t\t\t{HEATMAP_CHART_PALETTE.map((color) => (\n\t\t\t\t\t<span\n\t\t\t\t\t\tkey={color}\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tbackgroundColor: color,\n\t\t\t\t\t\t\twidth: layout.legendSwatchSize,\n\t\t\t\t\t\t\theight: layout.legendSwatchSize / 2,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t\t<span className=\"tabular-nums\">{valueFormatter(domain[1])}</span>\n\t\t</div>\n\t);\n}\n\nexport { HEATMAP_CHART_LAYOUT, HEATMAP_CHART_PALETTE, HeatmapChart };\nexport type {\n\tHeatmapChartCellDatum,\n\tHeatmapChartLayout,\n\tHeatmapChartProps,\n\tHeatmapChartSize,\n};\n"],"mappings":"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","names":[]}

package/dist/infotip.d.ts

@@ -0,0 +1,11 @@
+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;
+type InfotipContentProps = Popover.Popup.Props & Pick<Popover.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset"> & Pick<Popover.Portal.Props, "container"> & {
+    showArrow?: boolean;
+};
+declare function InfotipContent({ className, container, side, sideOffset, align, alignOffset, showArrow, children, ...props }: InfotipContentProps): React.JSX.Element;
+
+export { Infotip, InfotipContent, InfotipTrigger };

package/dist/infotip.js

@@ -0,0 +1,66 @@
+"use client";
+import {
+  cn
+} from "./chunk-Y4TTYVNE.js";
+
+// src/infotip.tsx
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Infotip({ ...props }) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Root, { "data-slot": "infotip", ...props });
+}
+function InfotipTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(
+    PopoverPrimitive.Trigger,
+    {
+      nativeButton: false,
+      "data-slot": "infotip-trigger",
+      openOnHover: true,
+      delay: 100,
+      ...props
+    }
+  );
+}
+function InfotipContent({
+  className,
+  container,
+  side = "top",
+  sideOffset = 6,
+  align = "center",
+  alignOffset = 0,
+  showArrow = true,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { container, children: /* @__PURE__ */ jsx(
+    PopoverPrimitive.Positioner,
+    {
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      className: "isolate z-50",
+      children: /* @__PURE__ */ jsxs(
+        PopoverPrimitive.Popup,
+        {
+          "data-slot": "infotip-content",
+          className: cn(
+            "z-50 relative inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-[6px] border border-line bg-surface-overlay px-3 py-2 text-gdt-sm font-medium text-fg-primary shadow-2 duration-100 has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          ),
+          ...props,
+          children: [
+            children,
+            showArrow ? /* @__PURE__ */ jsx(PopoverPrimitive.Arrow, { className: "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-surface-overlay before:border before:border-line before:[transform:translate(-50%,50%)_rotate(45deg)]" }) : null
+          ]
+        }
+      )
+    }
+  ) });
+}
+export {
+  Infotip,
+  InfotipContent,
+  InfotipTrigger
+};
+//# sourceMappingURL=infotip.js.map

package/dist/infotip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/infotip.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\";\nimport { cn } from \"./lib/cn\";\n\nfunction Infotip({ ...props }: PopoverPrimitive.Root.Props) {\n\treturn <PopoverPrimitive.Root data-slot=\"infotip\" {...props} />;\n}\n\nfunction InfotipTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {\n\treturn (\n\t\t<PopoverPrimitive.Trigger\n\t\t\tnativeButton={false}\n\t\t\tdata-slot=\"infotip-trigger\"\n\t\t\topenOnHover={true}\n\t\t\tdelay={100}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\ntype InfotipContentProps = PopoverPrimitive.Popup.Props &\n\tPick<\n\t\tPopoverPrimitive.Positioner.Props,\n\t\t\"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n\t> &\n\tPick<PopoverPrimitive.Portal.Props, \"container\"> & {\n\t\tshowArrow?: boolean;\n\t};\n\nfunction InfotipContent({\n\tclassName,\n\tcontainer,\n\tside = \"top\",\n\tsideOffset = 6,\n\talign = \"center\",\n\talignOffset = 0,\n\tshowArrow = true,\n\tchildren,\n\t...props\n}: InfotipContentProps) {\n\treturn (\n\t\t<PopoverPrimitive.Portal container={container}>\n\t\t\t<PopoverPrimitive.Positioner\n\t\t\t\talign={align}\n\t\t\t\talignOffset={alignOffset}\n\t\t\t\tside={side}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\tclassName=\"isolate z-50\"\n\t\t\t>\n\t\t\t\t<PopoverPrimitive.Popup\n\t\t\t\t\tdata-slot=\"infotip-content\"\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"z-50 relative inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-[6px] border border-line bg-surface-overlay px-3 py-2 text-gdt-sm font-medium text-fg-primary shadow-2 duration-100 has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t\t{showArrow ? (\n\t\t\t\t\t\t<PopoverPrimitive.Arrow className=\"relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-surface-overlay before:border before:border-line before:[transform:translate(-50%,50%)_rotate(45deg)]\" />\n\t\t\t\t\t) : null}\n\t\t\t\t</PopoverPrimitive.Popup>\n\t\t\t</PopoverPrimitive.Positioner>\n\t\t</PopoverPrimitive.Portal>\n\t);\n}\n\nexport { Infotip, InfotipTrigger, InfotipContent };\n"],"mappings":";;;;;;AAEA,SAAS,WAAW,wBAAwB;AAIpC,cA4CJ,YA5CI;AADR,SAAS,QAAQ,EAAE,GAAG,MAAM,GAAgC;AAC3D,SAAO,oBAAC,iBAAiB,MAAjB,EAAsB,aAAU,WAAW,GAAG,OAAO;AAC9D;AAEA,SAAS,eAAe,EAAE,GAAG,MAAM,GAAmC;AACrE,SACC;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACA,cAAc;AAAA,MACd,aAAU;AAAA,MACV,aAAa;AAAA,MACb,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACL;AAEF;AAWA,SAAS,eAAe;AAAA,EACvB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACJ,GAAwB;AACvB,SACC,oBAAC,iBAAiB,QAAjB,EAAwB,WACxB;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MAEV;AAAA,QAAC,iBAAiB;AAAA,QAAjB;AAAA,UACA,aAAU;AAAA,UACV,WAAW;AAAA,YACV;AAAA,YACA;AAAA,UACD;AAAA,UACC,GAAG;AAAA,UAEH;AAAA;AAAA,YACA,YACA,oBAAC,iBAAiB,OAAjB,EAAuB,WAAU,meAAke,IACjgB;AAAA;AAAA;AAAA,MACL;AAAA;AAAA,EACD,GACD;AAEF;","names":[]}

package/dist/input-group.d.ts

@@ -5,13 +5,14 @@ import { Button } from './button.js';
 import { InputSize } from './input.js';
 import { TextareaSize } from './textarea.js';
 import '@base-ui/react/button';
+import '@base-ui/react/use-render';
 import './input-size-context.js';
 
 declare function InputGroup({ className, size, ...props }: React.ComponentProps<"div"> & {
     size?: InputSize;
 }): React.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-    align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
+    align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
 declare const inputGroupButtonVariants: (props?: ({