@giddaa-housing/ui 0.1.0

package/dist/badge.js

@@ -0,0 +1,119 @@
+// src/components/ui/badge.tsx
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+
+// 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/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/badge.tsx
+var badgeVariants = cva(
+  "group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden border font-bold leading-none whitespace-nowrap transition-[background-color,border-color,color,box-shadow] outline-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-invalid:border-line-danger aria-invalid:text-fg-danger [&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "border-line bg-surface-raised text-fg-secondary",
+        info: "border-status-info/40 bg-surface-info-subtle text-status-info",
+        success: "border-status-success/40 bg-surface-brand-subtle text-status-success",
+        warning: "border-status-warning/40 bg-surface-accent-subtle text-status-warning",
+        danger: "border-line-danger bg-surface-danger-subtle text-status-danger",
+        secondary: "border-status-info/40 bg-surface-info-subtle text-status-info",
+        destructive: "border-line-danger bg-surface-danger-subtle text-status-danger",
+        outline: "border-line bg-transparent text-fg-secondary"
+      },
+      size: {
+        sm: "gap-1 px-2.5 py-1 text-gdt-xs has-data-[icon=inline-start]:pl-2 has-data-[icon=inline-end]:pr-2 [&>svg]:size-3",
+        md: "gap-1.5 px-3 py-1.5 text-gdt-sm has-data-[icon=inline-start]:pl-2.5 has-data-[icon=inline-end]:pr-2.5 [&>svg]:size-3.5",
+        lg: "gap-2 px-4 py-2 text-gdt-md has-data-[icon=inline-start]:pl-3.5 has-data-[icon=inline-end]:pr-3.5 [&>svg]:size-4"
+      },
+      shape: {
+        round: "rounded-4xl",
+        box: "rounded-lg"
+      },
+      border: {
+        true: "",
+        false: "border-transparent"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      shape: "round",
+      border: true
+    }
+  }
+);
+function Badge({
+  className,
+  variant = "default",
+  size,
+  shape = "round",
+  border = true,
+  render,
+  ...props
+}) {
+  const resolvedSize = useComponentSize(size);
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps(
+      {
+        className: cn(
+          badgeVariants({ variant, size: resolvedSize, shape, border }),
+          className
+        )
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+      size: resolvedSize,
+      shape,
+      border
+    }
+  });
+}
+export {
+  Badge,
+  badgeVariants
+};
+//# sourceMappingURL=badge.js.map

package/dist/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/badge.tsx","../src/lib/cn.ts","../src/components/ui/size-context.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/cn\";\nimport { useComponentSize } from \"./size-context\";\n\nconst badgeVariants = cva(\n\t\"group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden border font-bold leading-none whitespace-nowrap transition-[background-color,border-color,color,box-shadow] outline-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-invalid:border-line-danger aria-invalid:text-fg-danger [&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:text-current\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"border-line bg-surface-raised text-fg-secondary\",\n\t\t\t\tinfo: \"border-status-info/40 bg-surface-info-subtle text-status-info\",\n\t\t\t\tsuccess:\n\t\t\t\t\t\"border-status-success/40 bg-surface-brand-subtle text-status-success\",\n\t\t\t\twarning:\n\t\t\t\t\t\"border-status-warning/40 bg-surface-accent-subtle text-status-warning\",\n\t\t\t\tdanger:\n\t\t\t\t\t\"border-line-danger bg-surface-danger-subtle text-status-danger\",\n\t\t\t\tsecondary:\n\t\t\t\t\t\"border-status-info/40 bg-surface-info-subtle text-status-info\",\n\t\t\t\tdestructive:\n\t\t\t\t\t\"border-line-danger bg-surface-danger-subtle text-status-danger\",\n\t\t\t\toutline: \"border-line bg-transparent text-fg-secondary\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tsm: \"gap-1 px-2.5 py-1 text-gdt-xs has-data-[icon=inline-start]:pl-2 has-data-[icon=inline-end]:pr-2 [&>svg]:size-3\",\n\t\t\t\tmd: \"gap-1.5 px-3 py-1.5 text-gdt-sm has-data-[icon=inline-start]:pl-2.5 has-data-[icon=inline-end]:pr-2.5 [&>svg]:size-3.5\",\n\t\t\t\tlg: \"gap-2 px-4 py-2 text-gdt-md has-data-[icon=inline-start]:pl-3.5 has-data-[icon=inline-end]:pr-3.5 [&>svg]:size-4\",\n\t\t\t},\n\t\t\tshape: {\n\t\t\t\tround: \"rounded-4xl\",\n\t\t\t\tbox: \"rounded-lg\",\n\t\t\t},\n\t\t\tborder: {\n\t\t\t\ttrue: \"\",\n\t\t\t\tfalse: \"border-transparent\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"default\",\n\t\t\tsize: \"md\",\n\t\t\tshape: \"round\",\n\t\t\tborder: true,\n\t\t},\n\t},\n);\n\nfunction Badge({\n\tclassName,\n\tvariant = \"default\",\n\tsize,\n\tshape = \"round\",\n\tborder = true,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n\tconst resolvedSize = useComponentSize(size);\n\n\treturn useRender({\n\t\tdefaultTagName: \"span\",\n\t\tprops: mergeProps<\"span\">(\n\t\t\t{\n\t\t\t\tclassName: cn(\n\t\t\t\t\tbadgeVariants({ variant, size: resolvedSize, shape, border }),\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t\tstate: {\n\t\t\tslot: \"badge\",\n\t\t\tvariant,\n\t\t\tsize: resolvedSize,\n\t\t\tshape,\n\t\t\tborder,\n\t\t},\n\t});\n}\n\nexport { Badge, badgeVariants };\n","import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n\textend: {\n\t\tclassGroups: {\n\t\t\t\"font-size\": [\n\t\t\t\t{\n\t\t\t\t\ttext: [\n\t\t\t\t\t\t\"gdt-display\",\n\t\t\t\t\t\t\"gdt-h1\",\n\t\t\t\t\t\t\"gdt-h2\",\n\t\t\t\t\t\t\"gdt-h3\",\n\t\t\t\t\t\t\"gdt-h4\",\n\t\t\t\t\t\t\"gdt-h5\",\n\t\t\t\t\t\t\"gdt-xl\",\n\t\t\t\t\t\t\"gdt-lg\",\n\t\t\t\t\t\t\"gdt-md\",\n\t\t\t\t\t\t\"gdt-sm\",\n\t\t\t\t\t\t\"gdt-xs\",\n\t\t\t\t\t\t\"gdt-subtext\",\n\t\t\t\t\t\t\"gdt-capitalized\",\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n});\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { createContext, type ReactNode, useContext } from \"react\";\n\ntype ComponentSize = \"sm\" | \"md\" | \"lg\";\n\nconst SizeContext = createContext<ComponentSize | undefined>(undefined);\n\nfunction SizeProvider({\n\tchildren,\n\tsize,\n}: {\n\tchildren: ReactNode;\n\tsize?: ComponentSize | null;\n}) {\n\tif (!size) {\n\t\treturn <>{children}</>;\n\t}\n\n\treturn <SizeContext.Provider value={size}>{children}</SizeContext.Provider>;\n}\n\nfunction useComponentSize(\n\tsize?: ComponentSize | null,\n\tfallback: ComponentSize = \"md\",\n) {\n\tconst inheritedSize = useContext(SizeContext);\n\treturn size ?? inheritedSize ?? fallback;\n}\n\nexport { SizeProvider, useComponentSize, type ComponentSize };\n"],"mappings":";AAAA,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,WAA8B;;;ACFvC,SAA0B,YAAY;AACtC,SAAS,2BAA2B;AAEpC,IAAM,UAAU,oBAAoB;AAAA,EACnC,QAAQ;AAAA,IACP,aAAa;AAAA,MACZ,aAAa;AAAA,QACZ;AAAA,UACC,MAAM;AAAA,YACL;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACD;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACD,CAAC;AAEM,SAAS,MAAM,QAAsB;AAC3C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC5B;;;AC7BA,SAAS,eAA+B,kBAAkB;AAcjD;AAVT,IAAM,cAAc,cAAyC,MAAS;AAgBtE,SAAS,iBACR,MACA,WAA0B,MACzB;AACD,QAAM,gBAAgB,WAAW,WAAW;AAC5C,SAAO,QAAQ,iBAAiB;AACjC;;;AFrBA,IAAM,gBAAgB;AAAA,EACrB;AAAA,EACA;AAAA,IACC,UAAU;AAAA,MACT,SAAS;AAAA,QACR,SAAS;AAAA,QACT,MAAM;AAAA,QACN,SACC;AAAA,QACD,SACC;AAAA,QACD,QACC;AAAA,QACD,WACC;AAAA,QACD,aACC;AAAA,QACD,SAAS;AAAA,MACV;AAAA,MACA,MAAM;AAAA,QACL,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACL;AAAA,MACA,OAAO;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MACN;AAAA,MACA,QAAQ;AAAA,QACP,MAAM;AAAA,QACN,OAAO;AAAA,MACR;AAAA,IACD;AAAA,IACA,iBAAiB;AAAA,MAChB,SAAS;AAAA,MACT,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,IACT;AAAA,EACD;AACD;AAEA,SAAS,MAAM;AAAA,EACd;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,QAAQ;AAAA,EACR,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACJ,GAA0E;AACzE,QAAM,eAAe,iBAAiB,IAAI;AAE1C,SAAO,UAAU;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACN;AAAA,QACC,WAAW;AAAA,UACV,cAAc,EAAE,SAAS,MAAM,cAAc,OAAO,OAAO,CAAC;AAAA,UAC5D;AAAA,QACD;AAAA,MACD;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,IACD;AAAA,EACD,CAAC;AACF;","names":[]}

package/dist/bar-chart.d.ts

@@ -0,0 +1,136 @@
+import * as React from 'react';
+import { ComponentSize } from './size-context.js';
+
+/**
+ * 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`.
+ *
+ * @example
+ * const chart = useBarChartLayout();
+ * <ChartCard size="md">
+ *   <ChartHeader>
+ *     <ChartTitle>Revenue Overview</ChartTitle>
+ *     <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>
+ * </ChartCard>
+ */
+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. */
+    margin: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    /** Cap on bar thickness so a few categories don't render slab-wide bars. */
+    maxBarSize: number;
+    /** Gap between categories (groups), as a percentage of the band. */
+    barCategoryGap: string;
+    /** Gap between bars within a group (grouped layout). */
+    barGap: number;
+    /** Corner radius for a bar. */
+    barRadius: number;
+    /** Axis tick label font size. */
+    tickFontSize: number;
+    /** Value label (on-bar number) font size. */
+    valueFontSize: number;
+    /** Reserved width for the value axis. */
+    yAxisWidth: number;
+    /** Space between an axis and its tick labels. */
+    tickMargin: number;
+};
+declare const BAR_CHART_LAYOUT: Record<ComponentSize, BarChartLayout>;
+/**
+ * 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} />
+ */
+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;
+    };
+};
+/**
+ * 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.
+ */
+type BarValueLabelProps = {
+    /** Bar layout direction — drives where the label is placed. */
+    orientation?: "vertical" | "horizontal";
+    /** Override the on-bar font size (defaults to the size-scaled value). */
+    fontSize?: number;
+    /** Format the raw value before display, e.g. `(v) => `₦${v}``. */
+    formatter?: (value: React.ReactNode) => React.ReactNode;
+    className?: string;
+    x?: string | number;
+    y?: string | number;
+    width?: string | number;
+    height?: string | number;
+    value?: React.ReactNode;
+};
+declare function BarValueLabel({ orientation, fontSize, formatter, className, x, y, width, height, value, }: BarValueLabelProps): React.JSX.Element | null;
+
+export { BAR_CHART_LAYOUT, type BarChartLayout, BarValueLabel, type BarValueLabelProps, useBarChartLayout };

package/dist/bar-chart.js

@@ -0,0 +1,302 @@
+// 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 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";
+var BAR_CHART_LAYOUT = {
+  sm: {
+    height: 180,
+    margin: { top: 20, right: 8, bottom: 0, left: 0 },
+    maxBarSize: 22,
+    barCategoryGap: "8%",
+    barGap: 4,
+    barRadius: 4,
+    tickFontSize: 10,
+    valueFontSize: 10,
+    yAxisWidth: 28,
+    tickMargin: 6
+  },
+  md: {
+    height: 220,
+    margin: { top: 24, right: 12, bottom: 0, left: 0 },
+    maxBarSize: 28,
+    barCategoryGap: "8%",
+    barGap: 6,
+    barRadius: 6,
+    tickFontSize: 11,
+    valueFontSize: 11,
+    yAxisWidth: 32,
+    tickMargin: 8
+  },
+  lg: {
+    height: 280,
+    margin: { top: 28, right: 16, bottom: 0, left: 0 },
+    maxBarSize: 36,
+    barCategoryGap: "8%",
+    barGap: 8,
+    barRadius: 8,
+    tickFontSize: 12,
+    valueFontSize: 12,
+    yAxisWidth: 36,
+    tickMargin: 10
+  }
+};
+function useBarChartLayout(size) {
+  const layout = BAR_CHART_LAYOUT[useComponentSize(size)];
+  const axes = cartesianAxisProps(layout);
+  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,
+    yAxis: axes.yAxis,
+    bar: {
+      radius: [layout.barRadius, layout.barRadius, 0, 0],
+      maxBarSize: layout.maxBarSize
+    }
+  };
+}
+function BarValueLabel({
+  orientation = "vertical",
+  fontSize,
+  formatter,
+  className,
+  x,
+  y,
+  width,
+  height,
+  value
+}) {
+  const valueFontSize = BAR_CHART_LAYOUT[useComponentSize()].valueFontSize;
+  if (value == null || x == null || y == null || width == null) {
+    return null;
+  }
+  const numX = Number(x);
+  const numY = Number(y);
+  const numWidth = Number(width);
+  const numHeight = Number(height ?? 0);
+  const gap = 6;
+  const isHorizontal = orientation === "horizontal";
+  const labelX = isHorizontal ? numX + numWidth + gap : numX + numWidth / 2;
+  const labelY = isHorizontal ? numY + numHeight / 2 : numY - gap;
+  return /* @__PURE__ */ jsx3(
+    "text",
+    {
+      x: labelX,
+      y: labelY,
+      textAnchor: isHorizontal ? "start" : "middle",
+      dominantBaseline: isHorizontal ? "central" : "auto",
+      className: cn("fill-fg-primary font-semibold tabular-nums", className),
+      style: { fontSize: fontSize ?? valueFontSize },
+      children: formatter ? formatter(value) : value
+    }
+  );
+}
+export {
+  BAR_CHART_LAYOUT,
+  BarValueLabel,
+  useBarChartLayout
+};
+//# sourceMappingURL=bar-chart.js.map

package/dist/bar-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/cn.ts","../src/components/ui/chart.tsx","../src/components/ui/size-context.tsx","../src/components/ui/bar-chart.tsx"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n\textend: {\n\t\tclassGroups: {\n\t\t\t\"font-size\": [\n\t\t\t\t{\n\t\t\t\t\ttext: [\n\t\t\t\t\t\t\"gdt-display\",\n\t\t\t\t\t\t\"gdt-h1\",\n\t\t\t\t\t\t\"gdt-h2\",\n\t\t\t\t\t\t\"gdt-h3\",\n\t\t\t\t\t\t\"gdt-h4\",\n\t\t\t\t\t\t\"gdt-h5\",\n\t\t\t\t\t\t\"gdt-xl\",\n\t\t\t\t\t\t\"gdt-lg\",\n\t\t\t\t\t\t\"gdt-md\",\n\t\t\t\t\t\t\"gdt-sm\",\n\t\t\t\t\t\t\"gdt-xs\",\n\t\t\t\t\t\t\"gdt-subtext\",\n\t\t\t\t\t\t\"gdt-capitalized\",\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n});\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport type { TooltipValueType } from \"recharts\";\nimport * as RechartsPrimitive from \"recharts\";\nimport { cn } from \"../../lib/cn\";\nimport {\n\ttype ComponentSize,\n\tSizeProvider,\n\tuseComponentSize,\n} from \"./size-context\";\n\n/**\n * Markers use `--color-surface-brand` as a placeholder. Giddaa has no\n * categorical chart palette yet — add `chart-1`…`chart-N` tokens and bind each\n * series (its legend marker and tooltip dot) to its own colour once they exist.\n * Until then any series without an explicit colour paints brand-green.\n */\nconst SERIES_COLOR_PLACEHOLDER = \"var(--color-surface-brand)\";\n\n/** How a precise value is formatted in the tooltip and which prefix/suffix it carries. */\nexport type ChartValueType = \"number\" | \"percentage\" | \"currency\";\n\nfunction formatChartValue(\n\tvalue: TooltipValueType | undefined,\n\ttype: ChartValueType,\n) {\n\tif (Array.isArray(value)) {\n\t\treturn value.join(\", \");\n\t}\n\n\tif (typeof value !== \"number\") {\n\t\treturn value == null ? \"\" : String(value);\n\t}\n\n\tswitch (type) {\n\t\tcase \"currency\":\n\t\t\treturn `₦${value.toLocaleString(\"en-NG\")}`;\n\t\tcase \"percentage\":\n\t\t\treturn `${value.toLocaleString(\"en-NG\", {\n\t\t\t\tminimumFractionDigits: 1,\n\t\t\t\tmaximumFractionDigits: 1,\n\t\t\t})}%`;\n\t\tdefault:\n\t\t\treturn value.toLocaleString(\"en-NG\");\n\t}\n}\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const;\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const;\ntype TooltipNameType = number | string;\n\nexport type ChartConfig = Record<\n\tstring,\n\t{\n\t\tlabel?: React.ReactNode;\n\t\ticon?: React.ComponentType;\n\t} & (\n\t\t| { color?: string; theme?: never }\n\t\t| { color?: never; theme: Record<keyof typeof THEMES, string> }\n\t)\n>;\n\ntype ChartContextProps = {\n\tconfig: ChartConfig;\n};\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\n\nfunction useChart() {\n\tconst context = React.useContext(ChartContext);\n\n\tif (!context) {\n\t\tthrow new Error(\"useChart must be used within a <ChartContainer />\");\n\t}\n\n\treturn context;\n}\n\n/**\n * Shared chart frame — the chrome that surrounds the plot of any chart type\n * (bar, line, area, pie). These are presentational, domain-free, and size-aware:\n * a `size` flows through `SizeProvider` so the plot and its labels can scale\n * with the card. Compose them with the plot primitives:\n *\n * <ChartCard size=\"md\">\n *   <ChartHeader>\n *     <ChartTitle>Revenue Overview</ChartTitle>\n *     <ChartDescription>Monthly revenue · Jan–Jul</ChartDescription>\n *   </ChartHeader>\n *   <ChartContainer config={config}>{/* recharts plot *\\/}</ChartContainer>\n * </ChartCard>\n */\nconst chartCardVariants = cva(\n\t\"flex w-full min-w-0 flex-col rounded-2xl border border-line-subtle bg-surface-raised text-fg-primary shadow-1\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"gap-3 p-4\",\n\t\t\t\tmd: \"gap-4 p-5\",\n\t\t\t\tlg: \"gap-5 p-6\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: { size: \"md\" },\n\t},\n);\n\nfunction ChartCard({\n\tclassName,\n\tsize,\n\tchildren,\n\t...props\n}: React.ComponentProps<\"section\"> & { size?: ComponentSize }) {\n\tconst resolvedSize = useComponentSize(size);\n\n\treturn (\n\t\t<SizeProvider size={resolvedSize}>\n\t\t\t<section\n\t\t\t\tdata-slot=\"chart-card\"\n\t\t\t\tclassName={cn(chartCardVariants({ size: resolvedSize }), className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</section>\n\t\t</SizeProvider>\n\t);\n}\n\nfunction ChartHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"chart-header\"\n\t\t\tclassName={cn(\"flex min-w-0 flex-col gap-1\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nconst chartTitleVariants = cva(\"min-w-0 font-bold text-fg-primary\", {\n\tvariants: {\n\t\tsize: {\n\t\t\tsm: \"text-gdt-md\",\n\t\t\tmd: \"text-gdt-lg\",\n\t\t\tlg: \"text-gdt-h5\",\n\t\t},\n\t},\n\tdefaultVariants: { size: \"md\" },\n});\n\nfunction ChartTitle({\n\tclassName,\n\tsize,\n\t...props\n}: React.ComponentProps<\"h3\"> & { size?: ComponentSize }) {\n\tconst resolvedSize = useComponentSize(size);\n\n\treturn (\n\t\t<h3\n\t\t\tdata-slot=\"chart-title\"\n\t\t\tclassName={cn(chartTitleVariants({ size: resolvedSize }), className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nconst chartDescriptionVariants = cva(\"min-w-0 font-normal text-fg-secondary\", {\n\tvariants: {\n\t\tsize: {\n\t\t\tsm: \"text-gdt-xs\",\n\t\t\tmd: \"text-gdt-sm\",\n\t\t\tlg: \"text-gdt-sm\",\n\t\t},\n\t},\n\tdefaultVariants: { size: \"md\" },\n});\n\nfunction ChartDescription({\n\tclassName,\n\tsize,\n\t...props\n}: React.ComponentProps<\"p\"> & { size?: ComponentSize }) {\n\tconst resolvedSize = useComponentSize(size);\n\n\treturn (\n\t\t<p\n\t\t\tdata-slot=\"chart-description\"\n\t\t\tclassName={cn(\n\t\t\t\tchartDescriptionVariants({ size: resolvedSize }),\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction ChartContainer({\n\tid,\n\tclassName,\n\tchildren,\n\tconfig,\n\tinitialDimension = INITIAL_DIMENSION,\n\t...props\n}: React.ComponentProps<\"div\"> & {\n\tconfig: ChartConfig;\n\tchildren: React.ComponentProps<\n\t\ttypeof RechartsPrimitive.ResponsiveContainer\n\t>[\"children\"];\n\tinitialDimension?: {\n\t\twidth: number;\n\t\theight: number;\n\t};\n}) {\n\tconst uniqueId = React.useId();\n\tconst chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`;\n\n\treturn (\n\t\t<ChartContext.Provider value={{ config }}>\n\t\t\t<div\n\t\t\t\tdata-slot=\"chart\"\n\t\t\t\tdata-chart={chartId}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"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\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<ChartStyle id={chartId} config={config} />\n\t\t\t\t<RechartsPrimitive.ResponsiveContainer\n\t\t\t\t\tinitialDimension={initialDimension}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</RechartsPrimitive.ResponsiveContainer>\n\t\t\t</div>\n\t\t</ChartContext.Provider>\n\t);\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n\tconst colorConfig = Object.entries(config).filter(\n\t\t([, config]) => config.theme ?? config.color,\n\t);\n\n\tif (!colorConfig.length) {\n\t\treturn null;\n\t}\n\n\tconst styleContent = Object.entries(THEMES)\n\t\t.map(\n\t\t\t([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n\t.map(([key, itemConfig]) => {\n\t\tconst color =\n\t\t\titemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n\t\t\titemConfig.color;\n\t\treturn color ? `  --color-${key}: ${color};` : null;\n\t})\n\t.join(\"\\n\")}\n}\n`,\n\t\t)\n\t\t.join(\"\\n\");\n\n\treturn <style>{styleContent}</style>;\n};\n\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\n/**\n * Hover tooltip for a chart data point. It surfaces a single precise value with\n * type-appropriate formatting — grouped integers, percentages, or ₦-prefixed\n * currency — sitting on an elevated overlay (bg-surface-overlay, Shadow-2,\n * 1px border-subtle) so users can read exact figures without leaving the chart.\n *\n * Anatomy: series dot · metric label · hero value · period caption.\n */\nconst chartTooltipVariants = cva(\n\t\"flex flex-col bg-surface-overlay border border-line-subtle shadow-2\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\txs: \"gap-0.5 rounded-md p-2\",\n\t\t\t\tsm: \"gap-0.5 rounded-md p-2.5\",\n\t\t\t\tmd: \"gap-1 rounded-lg p-3\",\n\t\t\t\tlg: \"gap-1 rounded-xl p-3.5\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tsize: \"md\",\n\t\t},\n\t},\n);\n\nconst chartTooltipDotVariants = cva(\"shrink-0 rounded-full\", {\n\tvariants: {\n\t\tsize: {\n\t\t\txs: \"size-1.5\",\n\t\t\tsm: \"size-2\",\n\t\t\tmd: \"size-2.5\",\n\t\t\tlg: \"size-2.5\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"md\",\n\t},\n});\n\nconst chartTooltipLabelVariants = cva(\"font-medium text-fg-secondary\", {\n\tvariants: {\n\t\tsize: {\n\t\t\txs: \"text-gdt-xs\",\n\t\t\tsm: \"text-gdt-xs\",\n\t\t\tmd: \"text-gdt-sm\",\n\t\t\tlg: \"text-gdt-sm\",\n\t\t},\n\t},\n\tdefaultVariants: { size: \"md\" },\n});\n\nconst chartTooltipValueVariants = cva(\n\t\"font-extrabold text-fg-primary tabular-nums\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\txs: \"text-gdt-sm\",\n\t\t\t\tsm: \"text-gdt-md\",\n\t\t\t\tmd: \"text-gdt-lg\",\n\t\t\t\tlg: \"text-gdt-xl\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: { size: \"md\" },\n\t},\n);\n\nfunction ChartTooltipContent({\n\tactive,\n\tpayload,\n\tclassName,\n\thideIndicator = false,\n\tlabel,\n\tlabelFormatter,\n\tformatter,\n\tcolor,\n\tnameKey,\n\tvalueType = \"number\",\n\tsize = \"md\",\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n\tReact.ComponentProps<\"div\"> & {\n\t\thideIndicator?: boolean;\n\t\tnameKey?: string;\n\t\tvalueType?: ChartValueType;\n\t} & VariantProps<typeof chartTooltipVariants> &\n\tOmit<\n\t\tRechartsPrimitive.DefaultTooltipContentProps<\n\t\t\tTooltipValueType,\n\t\t\tTooltipNameType\n\t\t>,\n\t\t\"accessibilityLayer\"\n\t>) {\n\tconst { config } = useChart();\n\n\tif (!active || !payload?.length) {\n\t\treturn null;\n\t}\n\n\tconst [item] = payload.filter((entry) => entry.type !== \"none\");\n\n\tif (!item) {\n\t\treturn null;\n\t}\n\n\tconst key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`;\n\tconst itemConfig = getPayloadConfigFromPayload(config, item, key);\n\tconst dotColor =\n\t\tcolor ?? item.payload?.fill ?? item.color ?? SERIES_COLOR_PLACEHOLDER;\n\n\t// Metric label — the short name of the series being read, e.g. \"Total Revenue\".\n\tconst metricLabel = itemConfig?.label ?? item.name;\n\t// Hero value — the precise, formatted figure, the visual focus of the tooltip.\n\tconst heroValue = formatter\n\t\t? formatter(item.value, item.name ?? \"\", item, 0, item.payload)\n\t\t: formatChartValue(item.value, valueType);\n\t// Period caption — the time context for the value, e.g. \"March 2026\".\n\tconst periodCaption = labelFormatter\n\t\t? labelFormatter(label, payload)\n\t\t: ((typeof label === \"string\" ? config[label]?.label : null) ?? label);\n\n\treturn (\n\t\t<div className={cn(chartTooltipVariants({ size }), className)}>\n\t\t\t{metricLabel != null && (\n\t\t\t\t<div className=\"flex items-center gap-1.5 [&>svg]:size-3 [&>svg]:shrink-0\">\n\t\t\t\t\t{!hideIndicator &&\n\t\t\t\t\t\t(itemConfig?.icon ? (\n\t\t\t\t\t\t\t<itemConfig.icon />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\tclassName={cn(chartTooltipDotVariants({ size }))}\n\t\t\t\t\t\t\t\tstyle={{ backgroundColor: dotColor }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t\t<span className={cn(chartTooltipLabelVariants({ size }))}>\n\t\t\t\t\t\t{metricLabel}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<p className={cn(chartTooltipValueVariants({ size }))}>{heroValue}</p>\n\t\t\t{periodCaption != null && periodCaption !== \"\" && (\n\t\t\t\t<p className=\"text-gdt-xs text-fg-caption-placeholder\">\n\t\t\t\t\t{periodCaption}\n\t\t\t\t</p>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nconst ChartLegend = RechartsPrimitive.Legend;\n\n/** Marker shape that ties a legend item to its series. */\ntype ChartLegendMarker = \"dot\" | \"square\" | \"line\";\n\nconst chartLegendItemVariants = cva(\n\t\"group/legend-item flex items-center rounded-md leading-none text-fg-primary transition-colors [&>svg]:shrink-0\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"gap-1.5 px-2 py-1 text-gdt-xs [&>svg]:size-3\",\n\t\t\t\tmd: \"gap-2 px-2.5 py-1.5 text-gdt-sm [&>svg]:size-3.5\",\n\t\t\t},\n\t\t\tinteractive: {\n\t\t\t\ttrue: \"cursor-pointer outline-none hover:bg-surface-raised focus-visible:bg-surface-raised\",\n\t\t\t\tfalse: \"\",\n\t\t\t},\n\t\t\tinactive: {\n\t\t\t\ttrue: \"text-fg-caption-placeholder line-through\",\n\t\t\t\tfalse: \"\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tsize: \"md\",\n\t\t\tinteractive: false,\n\t\t\tinactive: false,\n\t\t},\n\t},\n);\n\nconst chartLegendMarkerSizeVariants = cva(\"shrink-0\", {\n\tvariants: {\n\t\tmarker: {\n\t\t\tdot: \"rounded-full\",\n\t\t\tsquare: \"rounded-[2px]\",\n\t\t\tline: \"rounded-full\",\n\t\t},\n\t\tsize: {\n\t\t\tsm: \"\",\n\t\t\tmd: \"\",\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{ marker: [\"dot\", \"square\"], size: \"sm\", className: \"size-2\" },\n\t\t{ marker: [\"dot\", \"square\"], size: \"md\", className: \"size-2.5\" },\n\t\t{ marker: \"line\", size: \"sm\", className: \"h-[3px] w-3\" },\n\t\t{ marker: \"line\", size: \"md\", className: \"h-[3px] w-3.5\" },\n\t],\n\tdefaultVariants: { marker: \"dot\", size: \"md\" },\n});\n\n/**\n * A shared legend for all chart types. Each item pairs a series marker with a\n * label and can be toggled to hide or show its series — the inactive state mutes\n * the marker and strikes through the label. Items compose into horizontal rows\n * or vertical columns, in two sizes, with dot, square, or line markers.\n *\n * Toggling: pass `onToggle` to make items interactive. Inactive items are read\n * from each payload entry's `inactive` flag (recharts sets this when wired) or\n * the controlled `inactiveKeys` set.\n */\nfunction ChartLegendContent({\n\tclassName,\n\thideIcon = false,\n\tpayload,\n\tverticalAlign = \"bottom\",\n\tnameKey,\n\tmarker = \"dot\",\n\tsize = \"md\",\n\torientation = \"horizontal\",\n\tinactiveKeys,\n\tonToggle,\n}: React.ComponentProps<\"div\"> & {\n\thideIcon?: boolean;\n\tnameKey?: string;\n\tmarker?: ChartLegendMarker;\n\tsize?: \"sm\" | \"md\";\n\torientation?: \"horizontal\" | \"vertical\";\n\tinactiveKeys?: Iterable<string>;\n\tonToggle?: (key: string) => void;\n} & RechartsPrimitive.DefaultLegendContentProps) {\n\tconst { config } = useChart();\n\n\tif (!payload?.length) {\n\t\treturn null;\n\t}\n\n\tconst inactiveSet = inactiveKeys ? new Set(inactiveKeys) : undefined;\n\tconst interactive = Boolean(onToggle);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex\",\n\t\t\t\torientation === \"vertical\"\n\t\t\t\t\t? \"flex-col items-start gap-0.5\"\n\t\t\t\t\t: \"flex-row flex-wrap items-center justify-center gap-x-1 gap-y-0.5\",\n\t\t\t\tverticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{payload\n\t\t\t\t.filter((item) => item.type !== \"none\")\n\t\t\t\t.map((item, index) => {\n\t\t\t\t\tconst key = `${nameKey ?? item.dataKey ?? \"value\"}`;\n\t\t\t\t\tconst itemKey = `${item.dataKey ?? item.value ?? index}`;\n\t\t\t\t\tconst itemConfig = getPayloadConfigFromPayload(config, item, key);\n\t\t\t\t\tconst inactive =\n\t\t\t\t\t\t(inactiveSet?.has(key) ?? false) || Boolean(item.inactive);\n\t\t\t\t\tconst markerColor = inactive\n\t\t\t\t\t\t? \"var(--color-fg-caption-placeholder)\"\n\t\t\t\t\t\t: (item.color ?? SERIES_COLOR_PLACEHOLDER);\n\n\t\t\t\t\tconst content = (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{itemConfig?.icon && !hideIcon ? (\n\t\t\t\t\t\t\t\t<itemConfig.icon />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\tchartLegendMarkerSizeVariants({ marker, size }),\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\tstyle={{ backgroundColor: markerColor }}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{itemConfig?.label ?? item.value}\n\t\t\t\t\t\t</>\n\t\t\t\t\t);\n\n\t\t\t\t\tif (interactive) {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tkey={itemKey}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\taria-pressed={!inactive}\n\t\t\t\t\t\t\t\tonClick={() => onToggle?.(key)}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\tchartLegendItemVariants({ size, interactive, inactive }),\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={itemKey}\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\tchartLegendItemVariants({ size, interactive, inactive }),\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t</div>\n\t);\n}\n\n/** The size-scaled layout numbers a cartesian chart needs to build axis props. */\ntype CartesianAxisLayout = {\n\ttickMargin: number;\n\ttickFontSize: number;\n\tyAxisWidth: number;\n};\n\n/**\n * Shared `<XAxis>`/`<YAxis>` props — the giddaa cartesian-axis defaults (no tick\n * or axis lines, a size-scaled tick font, and a reserved value-axis width) that\n * every bar and line chart would otherwise repeat per axis. Spread the result\n * onto the recharts axis, then add the chart-specific props (`dataKey`,\n * `domain`, `ticks`, a `width`/`type` override, …):\n *\n *   const chart = useBarChartLayout();\n *   <XAxis dataKey=\"month\" {...chart.xAxis} />\n *   <YAxis domain={[0, 120]} {...chart.yAxis} />\n */\nfunction cartesianAxisProps(layout: CartesianAxisLayout) {\n\tconst tick = { fontSize: layout.tickFontSize };\n\treturn {\n\t\txAxis: {\n\t\t\ttickLine: false,\n\t\t\taxisLine: false,\n\t\t\ttickMargin: layout.tickMargin,\n\t\t\ttick,\n\t\t},\n\t\tyAxis: {\n\t\t\ttickLine: false,\n\t\t\taxisLine: false,\n\t\t\twidth: layout.yAxisWidth,\n\t\t\ttick,\n\t\t},\n\t} as const;\n}\n\nfunction getPayloadConfigFromPayload(\n\tconfig: ChartConfig,\n\tpayload: unknown,\n\tkey: string,\n) {\n\tif (typeof payload !== \"object\" || payload === null) {\n\t\treturn undefined;\n\t}\n\n\tconst payloadPayload =\n\t\t\"payload\" in payload &&\n\t\ttypeof payload.payload === \"object\" &&\n\t\tpayload.payload !== null\n\t\t\t? payload.payload\n\t\t\t: undefined;\n\n\tlet configLabelKey: string = key;\n\n\tif (\n\t\tkey in payload &&\n\t\ttypeof payload[key as keyof typeof payload] === \"string\"\n\t) {\n\t\tconfigLabelKey = payload[key as keyof typeof payload] as string;\n\t} else if (\n\t\tpayloadPayload &&\n\t\tkey in payloadPayload &&\n\t\ttypeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n\t) {\n\t\tconfigLabelKey = payloadPayload[\n\t\t\tkey as keyof typeof payloadPayload\n\t\t] as string;\n\t}\n\n\treturn configLabelKey in config ? config[configLabelKey] : config[key];\n}\n\nexport {\n\tcartesianAxisProps,\n\tChartCard,\n\tChartContainer,\n\tChartDescription,\n\tChartHeader,\n\tChartLegend,\n\tChartLegendContent,\n\tChartStyle,\n\tChartTitle,\n\tChartTooltip,\n\tChartTooltipContent,\n};\nexport type { CartesianAxisLayout };\n","\"use client\";\n\nimport { createContext, type ReactNode, useContext } from \"react\";\n\ntype ComponentSize = \"sm\" | \"md\" | \"lg\";\n\nconst SizeContext = createContext<ComponentSize | undefined>(undefined);\n\nfunction SizeProvider({\n\tchildren,\n\tsize,\n}: {\n\tchildren: ReactNode;\n\tsize?: ComponentSize | null;\n}) {\n\tif (!size) {\n\t\treturn <>{children}</>;\n\t}\n\n\treturn <SizeContext.Provider value={size}>{children}</SizeContext.Provider>;\n}\n\nfunction useComponentSize(\n\tsize?: ComponentSize | null,\n\tfallback: ComponentSize = \"md\",\n) {\n\tconst inheritedSize = useContext(SizeContext);\n\treturn size ?? inheritedSize ?? fallback;\n}\n\nexport { SizeProvider, useComponentSize, type ComponentSize };\n","\"use client\";\n\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { cartesianAxisProps } from \"./chart\";\nimport { type ComponentSize, useComponentSize } from \"./size-context\";\n\n/**\n * Bar charts are composed from recharts plot primitives directly — recharts\n * identifies `Bar`, `XAxis`, `YAxis`, `CartesianGrid`, and `LabelList` by\n * component identity, so they cannot be wrapped without breaking the chart.\n * This module supplies the giddaa-specific defaults that would otherwise be\n * copy-pasted into every bar chart: per-size layout numbers and a value-label\n * renderer. Pair them with the shared frame and overlays from `./chart`.\n *\n * @example\n * const chart = useBarChartLayout();\n * <ChartCard size=\"md\">\n *   <ChartHeader>\n *     <ChartTitle>Revenue Overview</ChartTitle>\n *     <ChartDescription>Monthly revenue · Jan–Jul</ChartDescription>\n *   </ChartHeader>\n *   <ChartContainer config={config} {...chart.container}>\n *     <BarChart data={data} {...chart.chart}>\n *       <CartesianGrid vertical={false} stroke=\"var(--color-line-subtle)\" />\n *       <XAxis dataKey=\"month\" {...chart.xAxis} />\n *       <YAxis {...chart.yAxis} />\n *       <ChartLegend verticalAlign=\"top\" content={<ChartLegendContent />} />\n *       <ChartTooltip content={<ChartTooltipContent />} />\n *       <Bar dataKey=\"revenue\" fill=\"var(--color-revenue)\" {...chart.bar}>\n *         <LabelList dataKey=\"revenue\" content={<BarValueLabel />} />\n *       </Bar>\n *     </BarChart>\n *   </ChartContainer>\n * </ChartCard>\n */\n\ntype BarChartLayout = {\n\t/** Plot height in px. Width stays fluid via the ResponsiveContainer. */\n\theight: number;\n\t/** Outer margin — top leaves room for value labels above the tallest bar. */\n\tmargin: { top: number; right: number; bottom: number; left: number };\n\t/** Cap on bar thickness so a few categories don't render slab-wide bars. */\n\tmaxBarSize: number;\n\t/** Gap between categories (groups), as a percentage of the band. */\n\tbarCategoryGap: string;\n\t/** Gap between bars within a group (grouped layout). */\n\tbarGap: number;\n\t/** Corner radius for a bar. */\n\tbarRadius: number;\n\t/** Axis tick label font size. */\n\ttickFontSize: number;\n\t/** Value label (on-bar number) font size. */\n\tvalueFontSize: number;\n\t/** Reserved width for the value axis. */\n\tyAxisWidth: number;\n\t/** Space between an axis and its tick labels. */\n\ttickMargin: number;\n};\n\nconst BAR_CHART_LAYOUT: Record<ComponentSize, BarChartLayout> = {\n\tsm: {\n\t\theight: 180,\n\t\tmargin: { top: 20, right: 8, bottom: 0, left: 0 },\n\t\tmaxBarSize: 22,\n\t\tbarCategoryGap: \"8%\",\n\t\tbarGap: 4,\n\t\tbarRadius: 4,\n\t\ttickFontSize: 10,\n\t\tvalueFontSize: 10,\n\t\tyAxisWidth: 28,\n\t\ttickMargin: 6,\n\t},\n\tmd: {\n\t\theight: 220,\n\t\tmargin: { top: 24, right: 12, bottom: 0, left: 0 },\n\t\tmaxBarSize: 28,\n\t\tbarCategoryGap: \"8%\",\n\t\tbarGap: 6,\n\t\tbarRadius: 6,\n\t\ttickFontSize: 11,\n\t\tvalueFontSize: 11,\n\t\tyAxisWidth: 32,\n\t\ttickMargin: 8,\n\t},\n\tlg: {\n\t\theight: 280,\n\t\tmargin: { top: 28, right: 16, bottom: 0, left: 0 },\n\t\tmaxBarSize: 36,\n\t\tbarCategoryGap: \"8%\",\n\t\tbarGap: 8,\n\t\tbarRadius: 8,\n\t\ttickFontSize: 12,\n\t\tvalueFontSize: 12,\n\t\tyAxisWidth: 36,\n\t\ttickMargin: 10,\n\t},\n};\n\n/**\n * Resolve the bar-chart layout for an explicit or inherited component size. The\n * returned object groups the giddaa defaults by the recharts component they\n * belong to — spread each onto its element, then pass the data-specific props\n * (`config`, `data`, `dataKey`, `fill`, …) directly afterwards to add or\n * override anything:\n *\n *   const chart = useBarChartLayout(size);\n *   <ChartContainer config={config} {...chart.container}>\n *     <BarChart data={data} {...chart.chart}>\n *       <XAxis dataKey=\"month\" {...chart.xAxis} />\n *       <YAxis {...chart.yAxis} />\n *       <Bar dataKey=\"revenue\" fill=\"var(--color-revenue)\" {...chart.bar} />\n */\nfunction useBarChartLayout(size?: ComponentSize) {\n\tconst layout = BAR_CHART_LAYOUT[useComponentSize(size)];\n\tconst axes = cartesianAxisProps(layout);\n\n\treturn {\n\t\tcontainer: {\n\t\t\tclassName: \"aspect-auto w-full\",\n\t\t\tstyle: { height: layout.height },\n\t\t},\n\t\tchart: {\n\t\t\taccessibilityLayer: true,\n\t\t\tmargin: layout.margin,\n\t\t\tbarCategoryGap: layout.barCategoryGap,\n\t\t\tbarGap: layout.barGap,\n\t\t},\n\t\txAxis: axes.xAxis,\n\t\tyAxis: axes.yAxis,\n\t\tbar: {\n\t\t\tradius: [layout.barRadius, layout.barRadius, 0, 0] as [\n\t\t\t\tnumber,\n\t\t\t\tnumber,\n\t\t\t\tnumber,\n\t\t\t\tnumber,\n\t\t\t],\n\t\t\tmaxBarSize: layout.maxBarSize,\n\t\t},\n\t};\n}\n\n/**\n * Renderer for recharts `<LabelList content={<BarValueLabel />} />`. recharts\n * injects the bar geometry (`x`, `y`, `width`, `height`, `value`); the rest are\n * caller props. For a vertical bar the label sits above the bar; for a\n * horizontal bar (`orientation=\"horizontal\"`) it sits to the right of the bar.\n */\ntype BarValueLabelProps = {\n\t/** Bar layout direction — drives where the label is placed. */\n\torientation?: \"vertical\" | \"horizontal\";\n\t/** Override the on-bar font size (defaults to the size-scaled value). */\n\tfontSize?: number;\n\t/** Format the raw value before display, e.g. `(v) => `₦${v}``. */\n\tformatter?: (value: React.ReactNode) => React.ReactNode;\n\tclassName?: string;\n\t// Injected by recharts at render time.\n\tx?: string | number;\n\ty?: string | number;\n\twidth?: string | number;\n\theight?: string | number;\n\tvalue?: React.ReactNode;\n};\n\nfunction BarValueLabel({\n\torientation = \"vertical\",\n\tfontSize,\n\tformatter,\n\tclassName,\n\tx,\n\ty,\n\twidth,\n\theight,\n\tvalue,\n}: BarValueLabelProps) {\n\tconst valueFontSize = BAR_CHART_LAYOUT[useComponentSize()].valueFontSize;\n\n\tif (value == null || x == null || y == null || width == null) {\n\t\treturn null;\n\t}\n\n\tconst numX = Number(x);\n\tconst numY = Number(y);\n\tconst numWidth = Number(width);\n\tconst numHeight = Number(height ?? 0);\n\tconst gap = 6;\n\n\tconst isHorizontal = orientation === \"horizontal\";\n\tconst labelX = isHorizontal ? numX + numWidth + gap : numX + numWidth / 2;\n\tconst labelY = isHorizontal ? numY + numHeight / 2 : numY - gap;\n\n\treturn (\n\t\t<text\n\t\t\tx={labelX}\n\t\t\ty={labelY}\n\t\t\ttextAnchor={isHorizontal ? \"start\" : \"middle\"}\n\t\t\tdominantBaseline={isHorizontal ? \"central\" : \"auto\"}\n\t\t\tclassName={cn(\"fill-fg-primary font-semibold tabular-nums\", className)}\n\t\t\tstyle={{ fontSize: fontSize ?? valueFontSize }}\n\t\t>\n\t\t\t{formatter ? formatter(value) : value}\n\t\t</text>\n\t);\n}\n\nexport { BAR_CHART_LAYOUT, BarValueLabel, useBarChartLayout };\nexport type { BarChartLayout, BarValueLabelProps };\n"],"mappings":"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","names":["Fragment","jsx","jsx"]}