@giddaa-housing/ui 0.1.0 → 1.0.0

package/dist/bar-chart.d.ts

@@ -1,39 +1,50 @@
 import * as React from 'react';
+import { BarChart as BarChart$1, CartesianGrid, Bar, XAxis, YAxis } from 'recharts';
+import { ChartConfig } from './chart.js';
 import { ComponentSize } from './size-context.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
 
 /**
- * Bar charts are composed from recharts plot primitives directly — recharts
- * identifies `Bar`, `XAxis`, `YAxis`, `CartesianGrid`, and `LabelList` by
- * component identity, so they cannot be wrapped without breaking the chart.
- * This module supplies the giddaa-specific defaults that would otherwise be
- * copy-pasted into every bar chart: per-size layout numbers and a value-label
- * renderer. Pair them with the shared frame and overlays from `./chart`.
+ * Bar charts are composable wrappers over the recharts cartesian primitives.
+ * recharts 3 registers graphical items through context when they render, so the
+ * primitives CAN be wrapped in our own components. Each wrapper bakes in the
+ * giddaa defaults (tokens, size-scaled type, mark specs) and forwards every
+ * recharts prop, so anything can be overridden in place or replaced with the
+ * raw recharts element.
+ *
+ * Anatomy: `BarChart` is the plot root (frame + responsive box + recharts
+ * chart); compose the grid, axes, series, and the shared overlays from
+ * `./chart` as children:
  *
  * @example
- * const chart = useBarChartLayout();
  * <ChartCard size="md">
  *   <ChartHeader>
  *     <ChartTitle>Revenue Overview</ChartTitle>
- *     <ChartDescription>Monthly revenue · Jan–Jul</ChartDescription>
+ *     <ChartDescription>Monthly revenue - Jan-Jul</ChartDescription>
  *   </ChartHeader>
- *   <ChartContainer config={config} {...chart.container}>
- *     <BarChart data={data} {...chart.chart}>
- *       <CartesianGrid vertical={false} stroke="var(--color-line-subtle)" />
- *       <XAxis dataKey="month" {...chart.xAxis} />
- *       <YAxis {...chart.yAxis} />
- *       <ChartLegend verticalAlign="top" content={<ChartLegendContent />} />
- *       <ChartTooltip content={<ChartTooltipContent />} />
- *       <Bar dataKey="revenue" fill="var(--color-revenue)" {...chart.bar}>
- *         <LabelList dataKey="revenue" content={<BarValueLabel />} />
- *       </Bar>
- *     </BarChart>
- *   </ChartContainer>
+ *   <BarChart config={config} data={data}>
+ *     <BarChartGrid />
+ *     <BarChartXAxis dataKey="month" />
+ *     <BarChartYAxis domain={[0, 120]} />
+ *     <ChartTooltip content={<ChartTooltipContent />} />
+ *     <BarChartSeries dataKey="revenue" name="Revenue">
+ *       <LabelList dataKey="revenue" content={<BarValueLabel />} />
+ *     </BarChartSeries>
+ *   </BarChart>
  * </ChartCard>
  */
+/**
+ * Categorical series palette - the theme-aware `chart-1`...`chart-3` tokens.
+ * Assign colours in this fixed order, never cycled: a fourth series folds into
+ * "Other" or becomes a second chart.
+ */
+declare const BAR_CHART_PALETTE: readonly ["var(--color-chart-1)", "var(--color-chart-2)", "var(--color-chart-3)"];
+type BarChartOrientation = "vertical" | "horizontal";
 type BarChartLayout = {
     /** Plot height in px. Width stays fluid via the ResponsiveContainer. */
     height: number;
-    /** Outer margin — top leaves room for value labels above the tallest bar. */
+    /** Outer margin - top leaves room for value labels above the tallest bar. */
     margin: {
         top: number;
         right: number;
@@ -58,72 +69,85 @@ type BarChartLayout = {
     tickMargin: number;
 };
 declare const BAR_CHART_LAYOUT: Record<ComponentSize, BarChartLayout>;
+type BarChartProps = Omit<React.ComponentProps<typeof BarChart$1>, "width" | "height"> & {
+    /** Series labels/icons for the shared tooltip and legend (see `ChartConfig`). */
+    config?: ChartConfig;
+    /** Plot scale; inherited from the nearest `SizeProvider` when omitted. */
+    size?: ComponentSize;
+    /** Applied to the responsive plot box, e.g. to override its height. */
+    className?: string;
+    /** Visual bar direction. `horizontal` maps to recharts `layout="vertical"`. */
+    orientation?: BarChartOrientation;
+};
 /**
- * Resolve the bar-chart layout for an explicit or inherited component size. The
- * returned object groups the giddaa defaults by the recharts component they
- * belong to — spread each onto its element, then pass the data-specific props
- * (`config`, `data`, `dataKey`, `fill`, …) directly afterwards to add or
- * override anything:
- *
- *   const chart = useBarChartLayout(size);
- *   <ChartContainer config={config} {...chart.container}>
- *     <BarChart data={data} {...chart.chart}>
- *       <XAxis dataKey="month" {...chart.xAxis} />
- *       <YAxis {...chart.yAxis} />
- *       <Bar dataKey="revenue" fill="var(--color-revenue)" {...chart.bar} />
+ * Plot root - wraps the shared `ChartContainer` (tooltip/legend theming,
+ * responsive box) around the recharts `BarChart` with size-scaled height,
+ * margin, and bar gaps. `size` also flows to the child primitives through
+ * `SizeProvider`. Extra props reach the recharts chart (`data`, `syncId`,
+ * `layout`, ...); passing `layout` directly overrides `orientation`.
  */
-declare function useBarChartLayout(size?: ComponentSize): {
-    container: {
-        className: string;
-        style: {
-            height: number;
-        };
-    };
-    chart: {
-        accessibilityLayer: boolean;
-        margin: {
-            top: number;
-            right: number;
-            bottom: number;
-            left: number;
-        };
-        barCategoryGap: string;
-        barGap: number;
-    };
-    xAxis: {
-        readonly tickLine: false;
-        readonly axisLine: false;
-        readonly tickMargin: number;
-        readonly tick: {
-            fontSize: number;
-        };
-    };
-    yAxis: {
-        readonly tickLine: false;
-        readonly axisLine: false;
-        readonly width: number;
-        readonly tick: {
-            fontSize: number;
-        };
-    };
-    bar: {
-        radius: [number, number, number, number];
-        maxBarSize: number;
-    };
+declare function BarChart({ config, size, className, children, orientation, layout, ...props }: BarChartProps): React.JSX.Element;
+type BarChartGridProps = React.ComponentProps<typeof CartesianGrid>;
+/**
+ * Value reference lines - recharts `CartesianGrid` with vertical lines hidden
+ * and the visible grid painted with the `line` token (`line-subtle` matches the
+ * chart card surface in both themes, so it would vanish). For horizontal bar
+ * charts, pass `horizontal={false} vertical`.
+ */
+declare function BarChartGrid(props: BarChartGridProps): React.JSX.Element;
+type BarChartXAxisProps = React.ComponentProps<typeof XAxis> & {
+    /** Explicit axis scale; otherwise inherited from the chart's `size`. */
+    size?: ComponentSize;
+};
+/**
+ * Category/value axis - recharts `XAxis` with no axis/tick lines,
+ * size-scaled tick margin, and caption-placeholder tick ink. Passing your own
+ * `tick` replaces the default styling entirely.
+ */
+declare function BarChartXAxis({ size, tick, ...props }: BarChartXAxisProps): React.JSX.Element;
+type BarChartYAxisProps = React.ComponentProps<typeof YAxis> & {
+    /** Explicit axis scale; otherwise inherited from the chart's `size`. */
+    size?: ComponentSize;
 };
+/**
+ * Value/category axis - recharts `YAxis` with no axis/tick lines,
+ * size-scaled tick type, and reserved width for value labels. Override `width`
+ * for long horizontal-category labels.
+ */
+declare function BarChartYAxis({ size, tick, ...props }: BarChartYAxisProps): React.JSX.Element;
+type BarChartSeriesProps = React.ComponentProps<typeof Bar> & {
+    /** Series colour for the bar. Defaults to the first categorical chart token. */
+    color?: string;
+    /** Explicit mark scale; otherwise inherited from the chart's `size`. */
+    size?: ComponentSize;
+    /** Override visual direction for radius when the root orientation is absent. */
+    orientation?: BarChartOrientation;
+};
+/**
+ * One data series - recharts `Bar` with the giddaa mark spec: a theme-aware
+ * series colour, size-scaled max thickness, and a small radius only on the
+ * leading edge (top for vertical bars, right for horizontal bars). `color`
+ * drives `fill`; `fill`, `radius`, and `maxBarSize` still win when passed
+ * directly.
+ */
+declare function BarChartSeries({ color, size, orientation, ...props }: BarChartSeriesProps): React.JSX.Element;
 /**
  * Renderer for recharts `<LabelList content={<BarValueLabel />} />`. recharts
  * injects the bar geometry (`x`, `y`, `width`, `height`, `value`); the rest are
  * caller props. For a vertical bar the label sits above the bar; for a
- * horizontal bar (`orientation="horizontal"`) it sits to the right of the bar.
+ * horizontal bar it sits to the right of the bar. When used inside `BarChart`,
+ * the root `orientation` is inherited unless this component receives an
+ * explicit `orientation`.
  */
 type BarValueLabelProps = {
-    /** Bar layout direction — drives where the label is placed. */
-    orientation?: "vertical" | "horizontal";
+    /** Bar visual direction - drives where the label is placed. */
+    orientation?: BarChartOrientation;
     /** Override the on-bar font size (defaults to the size-scaled value). */
     fontSize?: number;
-    /** Format the raw value before display, e.g. `(v) => `₦${v}``. */
+    /** Format the raw value before display, e.g. `(v) => String(v)`. */
     formatter?: (value: React.ReactNode) => React.ReactNode;
+    /** Explicit label scale; otherwise inherited from the chart's `size`. */
+    size?: ComponentSize;
     className?: string;
     x?: string | number;
     y?: string | number;
@@ -131,6 +155,6 @@ type BarValueLabelProps = {
     height?: string | number;
     value?: React.ReactNode;
 };
-declare function BarValueLabel({ orientation, fontSize, formatter, className, x, y, width, height, value, }: BarValueLabelProps): React.JSX.Element | null;
+declare function BarValueLabel({ orientation, fontSize, formatter, size, className, x, y, width, height, value, }: BarValueLabelProps): React.JSX.Element | null;
 
-export { BAR_CHART_LAYOUT, type BarChartLayout, BarValueLabel, type BarValueLabelProps, useBarChartLayout };
+export { BAR_CHART_LAYOUT, BAR_CHART_PALETTE, BarChart, BarChartGrid, type BarChartGridProps, type BarChartLayout, type BarChartOrientation, type BarChartProps, BarChartSeries, type BarChartSeriesProps, BarChartXAxis, type BarChartXAxisProps, BarChartYAxis, type BarChartYAxisProps, BarValueLabel, type BarValueLabelProps };

package/dist/bar-chart.js

@@ -1,203 +1,32 @@
-// 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));
-}
+"use client";
+import {
+  ChartContainer,
+  cartesianAxisProps
+} from "./chunk-NOFXVRWL.js";
+import {
+  SizeProvider,
+  useComponentSize
+} from "./chunk-HL3ZSYES.js";
+import {
+  cn
+} from "./chunk-Y4TTYVNE.js";
 
-// src/components/ui/chart.tsx
-import { cva } from "class-variance-authority";
+// src/bar-chart.tsx
 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 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 ChartContext = React.createContext(null);
-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" }
-  }
-);
-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" }
-});
-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" }
-});
-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" }
-  }
-);
-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 cartesianAxisProps(layout) {
-  const tick = { fontSize: layout.tickFontSize };
-  return {
-    xAxis: {
-      tickLine: false,
-      axisLine: false,
-      tickMargin: layout.tickMargin,
-      tick
-    },
-    yAxis: {
-      tickLine: false,
-      axisLine: false,
-      width: layout.yAxisWidth,
-      tick
-    }
-  };
-}
-
-// src/components/ui/bar-chart.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import {
+  Bar,
+  BarChart as BarChartPrimitive,
+  CartesianGrid,
+  XAxis,
+  YAxis
+} from "recharts";
+import { jsx } from "react/jsx-runtime";
+var BAR_CHART_PALETTE = [
+  "var(--color-chart-1)",
+  "var(--color-chart-2)",
+  "var(--color-chart-3)"
+];
+var DEFAULT_SERIES_COLOR = BAR_CHART_PALETTE[0];
 var BAR_CHART_LAYOUT = {
   sm: {
     height: 180,
@@ -236,32 +65,116 @@ var BAR_CHART_LAYOUT = {
     tickMargin: 10
   }
 };
-function useBarChartLayout(size) {
-  const layout = BAR_CHART_LAYOUT[useComponentSize(size)];
+var BarChartContext = React.createContext(null);
+function useBarChartOrientation(orientation) {
+  const context = React.useContext(BarChartContext);
+  return orientation ?? context?.orientation ?? "vertical";
+}
+function barChartAxisProps(layout) {
   const axes = cartesianAxisProps(layout);
+  const tick = {
+    ...axes.xAxis.tick,
+    fill: "var(--color-fg-caption-placeholder)"
+  };
   return {
-    container: {
-      className: "aspect-auto w-full",
-      style: { height: layout.height }
-    },
-    chart: {
-      accessibilityLayer: true,
-      margin: layout.margin,
-      barCategoryGap: layout.barCategoryGap,
-      barGap: layout.barGap
+    xAxis: {
+      ...axes.xAxis,
+      tick
     },
-    xAxis: axes.xAxis,
-    yAxis: axes.yAxis,
-    bar: {
-      radius: [layout.barRadius, layout.barRadius, 0, 0],
-      maxBarSize: layout.maxBarSize
+    yAxis: {
+      ...axes.yAxis,
+      tick
     }
   };
 }
-function BarValueLabel({
+function BarChart({
+  config = {},
+  size,
+  className,
+  children,
   orientation = "vertical",
+  layout,
+  ...props
+}) {
+  const resolvedSize = useComponentSize(size);
+  const chartLayout = BAR_CHART_LAYOUT[resolvedSize];
+  const rechartsLayout = layout ?? (orientation === "horizontal" ? "vertical" : "horizontal");
+  return /* @__PURE__ */ jsx(SizeProvider, { size: resolvedSize, children: /* @__PURE__ */ jsx(BarChartContext.Provider, { value: { orientation }, children: /* @__PURE__ */ jsx(
+    ChartContainer,
+    {
+      config,
+      className: cn("aspect-auto w-full", className),
+      style: { height: chartLayout.height },
+      children: /* @__PURE__ */ jsx(
+        BarChartPrimitive,
+        {
+          accessibilityLayer: true,
+          margin: chartLayout.margin,
+          barCategoryGap: chartLayout.barCategoryGap,
+          barGap: chartLayout.barGap,
+          layout: rechartsLayout,
+          ...props,
+          children
+        }
+      )
+    }
+  ) }) });
+}
+function BarChartGrid(props) {
+  return /* @__PURE__ */ jsx(CartesianGrid, { vertical: false, stroke: "var(--color-line)", ...props });
+}
+function BarChartXAxis({ size, tick, ...props }) {
+  const layout = BAR_CHART_LAYOUT[useComponentSize(size)];
+  const axes = barChartAxisProps(layout);
+  return /* @__PURE__ */ jsx(
+    XAxis,
+    {
+      tickLine: axes.xAxis.tickLine,
+      axisLine: axes.xAxis.axisLine,
+      tickMargin: axes.xAxis.tickMargin,
+      tick: tick ?? axes.xAxis.tick,
+      ...props
+    }
+  );
+}
+function BarChartYAxis({ size, tick, ...props }) {
+  const layout = BAR_CHART_LAYOUT[useComponentSize(size)];
+  const axes = barChartAxisProps(layout);
+  return /* @__PURE__ */ jsx(
+    YAxis,
+    {
+      tickLine: axes.yAxis.tickLine,
+      axisLine: axes.yAxis.axisLine,
+      width: axes.yAxis.width,
+      tick: tick ?? axes.yAxis.tick,
+      ...props
+    }
+  );
+}
+function BarChartSeries({
+  color = DEFAULT_SERIES_COLOR,
+  size,
+  orientation,
+  ...props
+}) {
+  const layout = BAR_CHART_LAYOUT[useComponentSize(size)];
+  const resolvedOrientation = useBarChartOrientation(orientation);
+  const radius = resolvedOrientation === "horizontal" ? [0, layout.barRadius, layout.barRadius, 0] : [layout.barRadius, layout.barRadius, 0, 0];
+  return /* @__PURE__ */ jsx(
+    Bar,
+    {
+      fill: color,
+      radius,
+      maxBarSize: layout.maxBarSize,
+      ...props
+    }
+  );
+}
+function BarValueLabel({
+  orientation,
   fontSize,
   formatter,
+  size,
   className,
   x,
   y,
@@ -269,7 +182,8 @@ function BarValueLabel({
   height,
   value
 }) {
-  const valueFontSize = BAR_CHART_LAYOUT[useComponentSize()].valueFontSize;
+  const resolvedOrientation = useBarChartOrientation(orientation);
+  const valueFontSize = BAR_CHART_LAYOUT[useComponentSize(size)].valueFontSize;
   if (value == null || x == null || y == null || width == null) {
     return null;
   }
@@ -278,10 +192,13 @@ function BarValueLabel({
   const numWidth = Number(width);
   const numHeight = Number(height ?? 0);
   const gap = 6;
-  const isHorizontal = orientation === "horizontal";
+  if (!Number.isFinite(numX) || !Number.isFinite(numY) || !Number.isFinite(numWidth) || !Number.isFinite(numHeight)) {
+    return null;
+  }
+  const isHorizontal = resolvedOrientation === "horizontal";
   const labelX = isHorizontal ? numX + numWidth + gap : numX + numWidth / 2;
   const labelY = isHorizontal ? numY + numHeight / 2 : numY - gap;
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx(
     "text",
     {
       x: labelX,
@@ -296,7 +213,12 @@ function BarValueLabel({
 }
 export {
   BAR_CHART_LAYOUT,
-  BarValueLabel,
-  useBarChartLayout
+  BAR_CHART_PALETTE,
+  BarChart,
+  BarChartGrid,
+  BarChartSeries,
+  BarChartXAxis,
+  BarChartYAxis,
+  BarValueLabel
 };
 //# sourceMappingURL=bar-chart.js.map