@giddaa-housing/ui 0.1.0

package/dist/tree-map.js

@@ -0,0 +1,652 @@
+// src/components/ui/tree-map.tsx
+import { cva as cva2 } from "class-variance-authority";
+import { Treemap as RechartsTreemap } from "recharts";
+
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "gdt-display",
+            "gdt-h1",
+            "gdt-h2",
+            "gdt-h3",
+            "gdt-h4",
+            "gdt-h5",
+            "gdt-xl",
+            "gdt-lg",
+            "gdt-md",
+            "gdt-sm",
+            "gdt-xs",
+            "gdt-subtext",
+            "gdt-capitalized"
+          ]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/ui/chart.tsx
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+// src/components/ui/size-context.tsx
+import { createContext, useContext } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+var SizeContext = createContext(void 0);
+function SizeProvider({
+  children,
+  size
+}) {
+  if (!size) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx(SizeContext.Provider, { value: size, children });
+}
+function useComponentSize(size, fallback = "md") {
+  const inheritedSize = useContext(SizeContext);
+  return size ?? inheritedSize ?? fallback;
+}
+
+// src/components/ui/chart.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var SERIES_COLOR_PLACEHOLDER = "var(--color-surface-brand)";
+function formatChartValue(value, type) {
+  if (Array.isArray(value)) {
+    return value.join(", ");
+  }
+  if (typeof value !== "number") {
+    return value == null ? "" : String(value);
+  }
+  switch (type) {
+    case "currency":
+      return `\u20A6${value.toLocaleString("en-NG")}`;
+    case "percentage":
+      return `${value.toLocaleString("en-NG", {
+        minimumFractionDigits: 1,
+        maximumFractionDigits: 1
+      })}%`;
+    default:
+      return value.toLocaleString("en-NG");
+  }
+}
+var THEMES = { light: "", dark: ".dark" };
+var INITIAL_DIMENSION = { width: 320, height: 200 };
+var ChartContext = React.createContext(null);
+function useChart() {
+  const context = React.useContext(ChartContext);
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+  return context;
+}
+var chartCardVariants = cva(
+  "flex w-full min-w-0 flex-col rounded-2xl border border-line-subtle bg-surface-raised text-fg-primary shadow-1",
+  {
+    variants: {
+      size: {
+        sm: "gap-3 p-4",
+        md: "gap-4 p-5",
+        lg: "gap-5 p-6"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+function ChartCard({
+  className,
+  size,
+  children,
+  ...props
+}) {
+  const resolvedSize = useComponentSize(size);
+  return /* @__PURE__ */ jsx2(SizeProvider, { size: resolvedSize, children: /* @__PURE__ */ jsx2(
+    "section",
+    {
+      "data-slot": "chart-card",
+      className: cn(chartCardVariants({ size: resolvedSize }), className),
+      ...props,
+      children
+    }
+  ) });
+}
+function ChartHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "chart-header",
+      className: cn("flex min-w-0 flex-col gap-1", className),
+      ...props
+    }
+  );
+}
+var chartTitleVariants = cva("min-w-0 font-bold text-fg-primary", {
+  variants: {
+    size: {
+      sm: "text-gdt-md",
+      md: "text-gdt-lg",
+      lg: "text-gdt-h5"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+function ChartTitle({
+  className,
+  size,
+  ...props
+}) {
+  const resolvedSize = useComponentSize(size);
+  return /* @__PURE__ */ jsx2(
+    "h3",
+    {
+      "data-slot": "chart-title",
+      className: cn(chartTitleVariants({ size: resolvedSize }), className),
+      ...props
+    }
+  );
+}
+var chartDescriptionVariants = cva("min-w-0 font-normal text-fg-secondary", {
+  variants: {
+    size: {
+      sm: "text-gdt-xs",
+      md: "text-gdt-sm",
+      lg: "text-gdt-sm"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+function ChartDescription({
+  className,
+  size,
+  ...props
+}) {
+  const resolvedSize = useComponentSize(size);
+  return /* @__PURE__ */ jsx2(
+    "p",
+    {
+      "data-slot": "chart-description",
+      className: cn(
+        chartDescriptionVariants({ size: resolvedSize }),
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  initialDimension = INITIAL_DIMENSION,
+  ...props
+}) {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
+  return /* @__PURE__ */ jsx2(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "chart",
+      "data-chart": chartId,
+      className: cn(
+        "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx2(ChartStyle, { id: chartId, config }),
+        /* @__PURE__ */ jsx2(
+          RechartsPrimitive.ResponsiveContainer,
+          {
+            initialDimension,
+            children
+          }
+        )
+      ]
+    }
+  ) });
+}
+var ChartStyle = ({ id, config }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config2]) => config2.theme ?? config2.color
+  );
+  if (!colorConfig.length) {
+    return null;
+  }
+  const styleContent = Object.entries(THEMES).map(
+    ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig.map(([key, itemConfig]) => {
+      const color = itemConfig.theme?.[theme] ?? itemConfig.color;
+      return color ? `  --color-${key}: ${color};` : null;
+    }).join("\n")}
+}
+`
+  ).join("\n");
+  return /* @__PURE__ */ jsx2("style", { children: styleContent });
+};
+var ChartTooltip = RechartsPrimitive.Tooltip;
+var chartTooltipVariants = cva(
+  "flex flex-col bg-surface-overlay border border-line-subtle shadow-2",
+  {
+    variants: {
+      size: {
+        xs: "gap-0.5 rounded-md p-2",
+        sm: "gap-0.5 rounded-md p-2.5",
+        md: "gap-1 rounded-lg p-3",
+        lg: "gap-1 rounded-xl p-3.5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var chartTooltipDotVariants = cva("shrink-0 rounded-full", {
+  variants: {
+    size: {
+      xs: "size-1.5",
+      sm: "size-2",
+      md: "size-2.5",
+      lg: "size-2.5"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var chartTooltipLabelVariants = cva("font-medium text-fg-secondary", {
+  variants: {
+    size: {
+      xs: "text-gdt-xs",
+      sm: "text-gdt-xs",
+      md: "text-gdt-sm",
+      lg: "text-gdt-sm"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+var chartTooltipValueVariants = cva(
+  "font-extrabold text-fg-primary tabular-nums",
+  {
+    variants: {
+      size: {
+        xs: "text-gdt-sm",
+        sm: "text-gdt-md",
+        md: "text-gdt-lg",
+        lg: "text-gdt-xl"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  formatter,
+  color,
+  nameKey,
+  valueType = "number",
+  size = "md"
+}) {
+  const { config } = useChart();
+  if (!active || !payload?.length) {
+    return null;
+  }
+  const [item] = payload.filter((entry) => entry.type !== "none");
+  if (!item) {
+    return null;
+  }
+  const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
+  const itemConfig = getPayloadConfigFromPayload(config, item, key);
+  const dotColor = color ?? item.payload?.fill ?? item.color ?? SERIES_COLOR_PLACEHOLDER;
+  const metricLabel = itemConfig?.label ?? item.name;
+  const heroValue = formatter ? formatter(item.value, item.name ?? "", item, 0, item.payload) : formatChartValue(item.value, valueType);
+  const periodCaption = labelFormatter ? labelFormatter(label, payload) : (typeof label === "string" ? config[label]?.label : null) ?? label;
+  return /* @__PURE__ */ jsxs("div", { className: cn(chartTooltipVariants({ size }), className), children: [
+    metricLabel != null && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 [&>svg]:size-3 [&>svg]:shrink-0", children: [
+      !hideIndicator && (itemConfig?.icon ? /* @__PURE__ */ jsx2(itemConfig.icon, {}) : /* @__PURE__ */ jsx2(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: cn(chartTooltipDotVariants({ size })),
+          style: { backgroundColor: dotColor }
+        }
+      )),
+      /* @__PURE__ */ jsx2("span", { className: cn(chartTooltipLabelVariants({ size })), children: metricLabel })
+    ] }),
+    /* @__PURE__ */ jsx2("p", { className: cn(chartTooltipValueVariants({ size })), children: heroValue }),
+    periodCaption != null && periodCaption !== "" && /* @__PURE__ */ jsx2("p", { className: "text-gdt-xs text-fg-caption-placeholder", children: periodCaption })
+  ] });
+}
+var chartLegendItemVariants = cva(
+  "group/legend-item flex items-center rounded-md leading-none text-fg-primary transition-colors [&>svg]:shrink-0",
+  {
+    variants: {
+      size: {
+        sm: "gap-1.5 px-2 py-1 text-gdt-xs [&>svg]:size-3",
+        md: "gap-2 px-2.5 py-1.5 text-gdt-sm [&>svg]:size-3.5"
+      },
+      interactive: {
+        true: "cursor-pointer outline-none hover:bg-surface-raised focus-visible:bg-surface-raised",
+        false: ""
+      },
+      inactive: {
+        true: "text-fg-caption-placeholder line-through",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      interactive: false,
+      inactive: false
+    }
+  }
+);
+var chartLegendMarkerSizeVariants = cva("shrink-0", {
+  variants: {
+    marker: {
+      dot: "rounded-full",
+      square: "rounded-[2px]",
+      line: "rounded-full"
+    },
+    size: {
+      sm: "",
+      md: ""
+    }
+  },
+  compoundVariants: [
+    { marker: ["dot", "square"], size: "sm", className: "size-2" },
+    { marker: ["dot", "square"], size: "md", className: "size-2.5" },
+    { marker: "line", size: "sm", className: "h-[3px] w-3" },
+    { marker: "line", size: "md", className: "h-[3px] w-3.5" }
+  ],
+  defaultVariants: { marker: "dot", size: "md" }
+});
+function getPayloadConfigFromPayload(config, payload, key) {
+  if (typeof payload !== "object" || payload === null) {
+    return void 0;
+  }
+  const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+  let configLabelKey = key;
+  if (key in payload && typeof payload[key] === "string") {
+    configLabelKey = payload[key];
+  } else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") {
+    configLabelKey = payloadPayload[key];
+  }
+  return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+
+// src/components/ui/tree-map.tsx
+import { jsx as jsx3, jsxs as jsxs2 } 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)" }
+];
+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
+  }
+};
+var treeMapLegendVariants = cva2("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 = cva2("shrink-0 rounded-full", {
+  variants: {
+    size: { sm: "size-2", md: "size-2.5", lg: "size-3" }
+  },
+  defaultVariants: { size: "md" }
+});
+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 };
+}
+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__ */ jsx3(
+    ChartTooltip,
+    {
+      content: /* @__PURE__ */ jsx3(
+        ChartTooltipContent,
+        {
+          nameKey: "label",
+          valueType,
+          formatter: valueFormatter ? (value) => typeof value === "number" ? valueFormatter(value) : value : void 0
+        }
+      )
+    }
+  ) : null;
+  const legendNode = /* @__PURE__ */ jsx3(
+    "ul",
+    {
+      className: cn(
+        treeMapLegendVariants({ placement: legend, size: resolvedSize })
+      ),
+      children: resolved.map((datum) => /* @__PURE__ */ jsxs2(
+        "li",
+        {
+          className: "flex items-center gap-2 text-fg-primary",
+          children: [
+            /* @__PURE__ */ jsx3(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: cn(treeMapLegendDotVariants({ size: resolvedSize })),
+                style: { backgroundColor: datum.fill }
+              }
+            ),
+            /* @__PURE__ */ jsx3("span", { className: "min-w-0 truncate", children: datum.label })
+          ]
+        },
+        datum.label
+      ))
+    }
+  );
+  return /* @__PURE__ */ jsxs2(ChartCard, { size: resolvedSize, className, ...props, children: [
+    (title != null || description != null) && /* @__PURE__ */ jsxs2(ChartHeader, { children: [
+      title != null && /* @__PURE__ */ jsx3(ChartTitle, { children: title }),
+      description != null && /* @__PURE__ */ jsx3(ChartDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: cn(
+          "flex gap-4",
+          legend === "right" ? "flex-row items-stretch" : "flex-col"
+        ),
+        children: [
+          /* @__PURE__ */ jsx3(
+            ChartContainer,
+            {
+              config,
+              className: "aspect-auto min-w-0 flex-1",
+              style: { height: layout.height },
+              children: /* @__PURE__ */ jsx3(
+                RechartsTreemap,
+                {
+                  data: resolved,
+                  dataKey: "value",
+                  nameKey: "label",
+                  type: "flat",
+                  isAnimationActive: false,
+                  content: /* @__PURE__ */ jsx3(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__ */ jsx3("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__ */ jsxs2("g", { children: [
+    /* @__PURE__ */ jsx3(
+      "rect",
+      {
+        x: tileX,
+        y: tileY,
+        width: tileW,
+        height: tileH,
+        rx: layout.radius,
+        ry: layout.radius,
+        fill
+      }
+    ),
+    showLabel && /* @__PURE__ */ jsxs2(
+      "text",
+      {
+        x: tileX + layout.labelPadding,
+        y: tileY + layout.labelPadding,
+        fill: text,
+        dominantBaseline: "hanging",
+        children: [
+          /* @__PURE__ */ jsx3(
+            "tspan",
+            {
+              x: tileX + layout.labelPadding,
+              className: "font-semibold",
+              style: { fontSize: layout.nameFontSize },
+              children: name
+            }
+          ),
+          /* @__PURE__ */ jsxs2(
+            "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