@giddaa-housing/ui 0.1.0 → 1.1.0

package/dist/badge.js

@@ -1,119 +1,71 @@
-// src/components/ui/badge.tsx
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { useComponentSize } from "./size-context.js";
 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"
-          ]
-        }
-      ]
-    }
-  }
+//#region src/badge.tsx
+const 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",
+			accent: "border-transparent bg-surface-accent text-fg-on-accent",
+			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: "min-h-7 min-w-7 gap-1 px-2.5 py-1 text-gdt-xs [&>svg]:size-3",
+			md: "min-h-9 min-w-9 gap-1.5 px-3 py-1.5 text-gdt-sm [&>svg]:size-3.5",
+			lg: "min-h-10.5 min-w-10.5 gap-2 px-4 py-2 text-gdt-md [&>svg]:size-4"
+		},
+		shape: {
+			round: "rounded-4xl",
+			box: "rounded-lg"
+		},
+		border: {
+			true: "",
+			false: "border-transparent"
+		},
+		iconOnly: {
+			true: "py-0 px-0",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "md",
+		shape: "round",
+		border: true
+	}
 });
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
+function Badge({ className, variant = "default", size, shape = "round", border = true, iconOnly = false, render, children, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	return useRender({
+		defaultTagName: "span",
+		props: mergeProps({
+			className: cn(badgeVariants({
+				variant,
+				size: resolvedSize,
+				shape,
+				border,
+				iconOnly
+			}), className),
+			children
+		}, props),
+		render,
+		state: {
+			slot: "badge",
+			variant,
+			size: resolvedSize,
+			shape,
+			border,
+			iconOnly
+		}
+	});
 }
-
-// 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
+//#endregion
+export { Badge, badgeVariants };

package/dist/bar-chart.d.ts

@@ -1,136 +1,158 @@
-import * as React from 'react';
-import { ComponentSize } from './size-context.js';
-
+import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import { ChartConfig } from "./chart.js";
+import * as React from "react";
+import { Bar, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis } from "recharts";
+//#region src/bar-chart.d.ts
 /**
- * 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. */
-    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;
+  /** 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>;
+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 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 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 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";
-    /** 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;
+  /** 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) => 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;
+  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 };
+declare function BarValueLabel({ orientation, fontSize, formatter, size, className, x, y, width, height, value }: BarValueLabelProps): React.JSX.Element | null;
+//#endregion
+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 };