@giddaa-housing/ui 1.0.0 → 1.2.0

package/dist/tree-map.js

@@ -1,279 +1,236 @@
 "use client";
-import {
-  ChartCard,
-  ChartContainer,
-  ChartDescription,
-  ChartHeader,
-  ChartTitle,
-  ChartTooltip,
-  ChartTooltipContent
-} from "./chunk-NOFXVRWL.js";
-import {
-  useComponentSize
-} from "./chunk-HL3ZSYES.js";
-import {
-  cn
-} from "./chunk-Y4TTYVNE.js";
-
-// src/tree-map.tsx
-import { cva } from "class-variance-authority";
-import { Treemap as RechartsTreemap } from "recharts";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { useComponentSize } from "./size-context.js";
+import { ChartCard, ChartContainer, ChartDescription, ChartHeader, ChartTitle, ChartTooltip, ChartTooltipContent } from "./chart.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-var TREE_MAP_PALETTE = [
-  { fill: "var(--color-forest-700)", text: "var(--color-forest-100)" },
-  { fill: "var(--color-brass-500)", text: "var(--color-brass-900)" },
-  { fill: "var(--color-moss-600)", text: "var(--color-moss-100)" },
-  { fill: "var(--color-clay-500)", text: "var(--color-clay-50)" },
-  { fill: "var(--color-stone-500)", text: "var(--color-stone-50)" }
+import { cva } from "class-variance-authority";
+import { Treemap } from "recharts";
+//#region src/tree-map.tsx
+/**
+* Tile palette, ordered by share. A tile's area already encodes magnitude and
+* every tile is directly labelled, so the fill carries category *identity* — the
+* three validated categorical `chart-1`…`chart-3` tokens, then a neutral "Other"
+* bucket for the fourth+ category (the brand has three validated categorical
+* slots; see `styles/giddaa.css`). Each entry pairs a `fill` with the `text`
+* colour that reads on it in both themes. Assign by order, or override per datum
+* with `fill`.
+*/
+const TREE_MAP_PALETTE = [
+	{
+		fill: "var(--color-chart-1)",
+		text: "var(--color-forest-50)"
+	},
+	{
+		fill: "var(--color-chart-2)",
+		text: "var(--color-brass-900)"
+	},
+	{
+		fill: "var(--color-chart-3)",
+		text: "var(--color-clay-900)"
+	},
+	{
+		fill: "var(--color-action-tertiary)",
+		text: "var(--color-fg-primary)"
+	}
 ];
-var TREE_MAP_LAYOUT = {
-  sm: {
-    height: 180,
-    gap: 3,
-    radius: 4,
-    labelPadding: 8,
-    nameFontSize: 11,
-    shareFontSize: 10,
-    labelMinSide: 44
-  },
-  md: {
-    height: 240,
-    gap: 4,
-    radius: 6,
-    labelPadding: 10,
-    nameFontSize: 12,
-    shareFontSize: 11,
-    labelMinSide: 52
-  },
-  lg: {
-    height: 300,
-    gap: 5,
-    radius: 8,
-    labelPadding: 12,
-    nameFontSize: 14,
-    shareFontSize: 12,
-    labelMinSide: 60
-  }
+const TREE_MAP_LAYOUT = {
+	sm: {
+		height: 180,
+		gap: 3,
+		radius: 4,
+		labelPadding: 8,
+		nameFontSize: 11,
+		shareFontSize: 10,
+		labelMinSide: 44
+	},
+	md: {
+		height: 240,
+		gap: 4,
+		radius: 6,
+		labelPadding: 10,
+		nameFontSize: 12,
+		shareFontSize: 11,
+		labelMinSide: 52
+	},
+	lg: {
+		height: 300,
+		gap: 5,
+		radius: 8,
+		labelPadding: 12,
+		nameFontSize: 14,
+		shareFontSize: 12,
+		labelMinSide: 60
+	}
 };
-var treeMapLegendVariants = cva("flex min-w-0", {
-  variants: {
-    placement: {
-      right: "flex-col",
-      bottom: "flex-row flex-wrap items-center"
-    },
-    size: {
-      sm: "text-gdt-xs",
-      md: "text-gdt-sm",
-      lg: "text-gdt-sm"
-    }
-  },
-  compoundVariants: [
-    { placement: "right", size: "sm", className: "gap-2" },
-    { placement: "right", size: "md", className: "gap-3" },
-    { placement: "right", size: "lg", className: "gap-3.5" },
-    { placement: "bottom", className: "gap-x-4 gap-y-2" }
-  ],
-  defaultVariants: { placement: "right", size: "md" }
+/** Vertical legend column / value list — shared with the right-hand legend. */
+const treeMapLegendVariants = cva("flex min-w-0", {
+	variants: {
+		placement: {
+			right: "flex-col",
+			bottom: "flex-row flex-wrap items-center"
+		},
+		size: {
+			sm: "text-gdt-xs",
+			md: "text-gdt-sm",
+			lg: "text-gdt-sm"
+		}
+	},
+	compoundVariants: [
+		{
+			placement: "right",
+			size: "sm",
+			className: "gap-2"
+		},
+		{
+			placement: "right",
+			size: "md",
+			className: "gap-3"
+		},
+		{
+			placement: "right",
+			size: "lg",
+			className: "gap-3.5"
+		},
+		{
+			placement: "bottom",
+			className: "gap-x-4 gap-y-2"
+		}
+	],
+	defaultVariants: {
+		placement: "right",
+		size: "md"
+	}
 });
-var treeMapLegendDotVariants = cva("shrink-0 rounded-full", {
-  variants: {
-    size: { sm: "size-2", md: "size-2.5", lg: "size-3" }
-  },
-  defaultVariants: { size: "md" }
+const treeMapLegendDotVariants = cva("shrink-0 rounded-full", {
+	variants: { size: {
+		sm: "size-2",
+		md: "size-2.5",
+		lg: "size-3"
+	} },
+	defaultVariants: { size: "md" }
 });
+/**
+* Walk the data, assigning each top-level entry a palette colour (by order) that
+* its leaves inherit, and summing the leaf values into a grand total. Top-level
+* entries become the legend keys: tiles in `flat`, groups in `nested`.
+*/
 function resolveData(data) {
-  let total = 0;
-  const resolve = (datum, palette) => {
-    const fill = datum.fill ?? palette.fill;
-    const text = palette.text;
-    if (datum.children?.length) {
-      return {
-        label: datum.label,
-        fill,
-        text,
-        children: datum.children.map((child) => resolve(child, { fill, text }))
-      };
-    }
-    total += datum.value ?? 0;
-    return { label: datum.label, value: datum.value, fill, text };
-  };
-  const resolved = data.map(
-    (datum, i) => resolve(datum, TREE_MAP_PALETTE[i % TREE_MAP_PALETTE.length])
-  );
-  return { resolved, total };
+	let total = 0;
+	const resolve = (datum, palette) => {
+		const fill = datum.fill ?? palette.fill;
+		const text = palette.text;
+		if (datum.children?.length) return {
+			label: datum.label,
+			fill,
+			text,
+			children: datum.children.map((child) => resolve(child, {
+				fill,
+				text
+			}))
+		};
+		total += datum.value ?? 0;
+		return {
+			label: datum.label,
+			value: datum.value,
+			fill,
+			text
+		};
+	};
+	return {
+		resolved: data.map((datum, i) => resolve(datum, TREE_MAP_PALETTE[i % TREE_MAP_PALETTE.length])),
+		total
+	};
 }
-function TreeMap({
-  data,
-  size,
-  title,
-  description,
-  tooltip = false,
-  legend = "right",
-  valueFormatter,
-  valueType = "number",
-  className,
-  ...props
-}) {
-  const resolvedSize = useComponentSize(size);
-  const layout = TREE_MAP_LAYOUT[resolvedSize];
-  const { resolved, total } = resolveData(data);
-  const config = Object.fromEntries(
-    resolved.map((datum) => [
-      datum.label,
-      { label: datum.label, color: datum.fill }
-    ])
-  );
-  const tooltipNode = tooltip ? /* @__PURE__ */ jsx(
-    ChartTooltip,
-    {
-      content: /* @__PURE__ */ jsx(
-        ChartTooltipContent,
-        {
-          nameKey: "label",
-          valueType,
-          formatter: valueFormatter ? (value) => typeof value === "number" ? valueFormatter(value) : value : void 0
-        }
-      )
-    }
-  ) : null;
-  const legendNode = /* @__PURE__ */ jsx(
-    "ul",
-    {
-      className: cn(
-        treeMapLegendVariants({ placement: legend, size: resolvedSize })
-      ),
-      children: resolved.map((datum) => /* @__PURE__ */ jsxs(
-        "li",
-        {
-          className: "flex items-center gap-2 text-fg-primary",
-          children: [
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                "aria-hidden": "true",
-                className: cn(treeMapLegendDotVariants({ size: resolvedSize })),
-                style: { backgroundColor: datum.fill }
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: datum.label })
-          ]
-        },
-        datum.label
-      ))
-    }
-  );
-  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: cn(
-          "flex gap-4",
-          legend === "right" ? "flex-row items-stretch" : "flex-col"
-        ),
-        children: [
-          /* @__PURE__ */ jsx(
-            ChartContainer,
-            {
-              config,
-              className: "aspect-auto min-w-0 flex-1",
-              style: { height: layout.height },
-              children: /* @__PURE__ */ jsx(
-                RechartsTreemap,
-                {
-                  data: resolved,
-                  dataKey: "value",
-                  nameKey: "label",
-                  type: "flat",
-                  isAnimationActive: false,
-                  content: /* @__PURE__ */ jsx(TreeMapTile, { total, layout }),
-                  children: tooltipNode
-                }
-              )
-            }
-          ),
-          legendNode
-        ]
-      }
-    )
-  ] });
+function TreeMap({ data, size, title, description, tooltip = false, legend = "right", valueFormatter, valueType = "number", className, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	const layout = TREE_MAP_LAYOUT[resolvedSize];
+	const { resolved, total } = resolveData(data);
+	const config = Object.fromEntries(resolved.map((datum) => [datum.label, {
+		label: datum.label,
+		color: datum.fill
+	}]));
+	const tooltipNode = tooltip ? /* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {
+		nameKey: "label",
+		valueType,
+		formatter: valueFormatter ? (value) => typeof value === "number" ? valueFormatter(value) : value : void 0
+	}) }) : null;
+	const legendNode = /* @__PURE__ */ jsx("ul", {
+		className: cn(treeMapLegendVariants({
+			placement: legend,
+			size: resolvedSize
+		})),
+		children: resolved.map((datum) => /* @__PURE__ */ jsxs("li", {
+			className: "flex items-center gap-2 text-fg-primary",
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn(treeMapLegendDotVariants({ size: resolvedSize })),
+				style: { backgroundColor: datum.fill }
+			}), /* @__PURE__ */ jsx("span", {
+				className: "min-w-0 truncate",
+				children: datum.label
+			})]
+		}, datum.label))
+	});
+	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: cn("flex gap-4", legend === "right" ? "flex-row items-stretch" : "flex-col"),
+			children: [/* @__PURE__ */ jsx(ChartContainer, {
+				config,
+				className: "aspect-auto min-w-0 flex-1",
+				style: { height: layout.height },
+				children: /* @__PURE__ */ jsx(Treemap, {
+					data: resolved,
+					dataKey: "value",
+					nameKey: "label",
+					type: "flat",
+					isAnimationActive: false,
+					content: /* @__PURE__ */ jsx(TreeMapTile, {
+						total,
+						layout
+					}),
+					children: tooltipNode
+				})
+			}), legendNode]
+		})]
+	});
 }
-function TreeMapTile({
-  total,
-  layout,
-  x,
-  y,
-  width,
-  height,
-  value,
-  name,
-  children,
-  fill,
-  text
-}) {
-  if (children != null || x == null || y == null || width == null || height == null) {
-    return /* @__PURE__ */ jsx("g", {});
-  }
-  const tileX = x + layout.gap / 2;
-  const tileY = y + layout.gap / 2;
-  const tileW = Math.max(0, width - layout.gap);
-  const tileH = Math.max(0, height - layout.gap);
-  const showLabel = tileW >= layout.labelMinSide && tileH >= layout.labelMinSide;
-  const share = total > 0 ? Math.round((value ?? 0) / total * 100) : 0;
-  return /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx(
-      "rect",
-      {
-        x: tileX,
-        y: tileY,
-        width: tileW,
-        height: tileH,
-        rx: layout.radius,
-        ry: layout.radius,
-        fill
-      }
-    ),
-    showLabel && /* @__PURE__ */ jsxs(
-      "text",
-      {
-        x: tileX + layout.labelPadding,
-        y: tileY + layout.labelPadding,
-        fill: text,
-        dominantBaseline: "hanging",
-        children: [
-          /* @__PURE__ */ jsx(
-            "tspan",
-            {
-              x: tileX + layout.labelPadding,
-              className: "font-semibold",
-              style: { fontSize: layout.nameFontSize },
-              children: name
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "tspan",
-            {
-              x: tileX + layout.labelPadding,
-              dy: layout.nameFontSize + 4,
-              className: "tabular-nums",
-              style: { fontSize: layout.shareFontSize },
-              children: [
-                share,
-                "%"
-              ]
-            }
-          )
-        ]
-      }
-    )
-  ] });
+function TreeMapTile({ total, layout, x, y, width, height, value, name, children, fill, text }) {
+	if (children != null || x == null || y == null || width == null || height == null) return /* @__PURE__ */ jsx("g", {});
+	const tileX = x + layout.gap / 2;
+	const tileY = y + layout.gap / 2;
+	const tileW = Math.max(0, width - layout.gap);
+	const tileH = Math.max(0, height - layout.gap);
+	const showLabel = tileW >= layout.labelMinSide && tileH >= layout.labelMinSide;
+	const share = total > 0 ? Math.round((value ?? 0) / total * 100) : 0;
+	return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+		x: tileX,
+		y: tileY,
+		width: tileW,
+		height: tileH,
+		rx: layout.radius,
+		ry: layout.radius,
+		fill
+	}), showLabel && /* @__PURE__ */ jsxs("text", {
+		x: tileX + layout.labelPadding,
+		y: tileY + layout.labelPadding,
+		fill: text,
+		dominantBaseline: "hanging",
+		children: [/* @__PURE__ */ jsx("tspan", {
+			x: tileX + layout.labelPadding,
+			className: "font-semibold",
+			style: { fontSize: layout.nameFontSize },
+			children: name
+		}), /* @__PURE__ */ jsxs("tspan", {
+			x: tileX + layout.labelPadding,
+			dy: layout.nameFontSize + 4,
+			className: "tabular-nums",
+			style: { fontSize: layout.shareFontSize },
+			children: [share, "%"]
+		})]
+	})] });
 }
-export {
-  TREE_MAP_LAYOUT,
-  TREE_MAP_PALETTE,
-  TreeMap
-};
-//# sourceMappingURL=tree-map.js.map
+//#endregion
+export { TREE_MAP_LAYOUT, TREE_MAP_PALETTE, TreeMap };

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 };