@giddaa-housing/ui 0.1.0

package/dist/base.css

@@ -0,0 +1,32 @@
+body {
+	background-color: var(--color-canvas);
+	color: var(--color-fg-primary);
+}
+
+button:not(:disabled),
+[role="button"]:not(:disabled) {
+	cursor: pointer;
+}
+
+html {
+	font-family: var(--font-sans);
+}
+
+* {
+	border-color: var(--color-line);
+	box-sizing: border-box;
+	outline-color: rgb(from var(--color-line-focus) r g b / 0.5);
+}
+
+::-webkit-scrollbar {
+	display: none;
+}
+
+.no-scrollbar::-webkit-scrollbar {
+	display: none;
+}
+
+.no-scrollbar {
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+}

package/dist/breadcrumb.d.ts

@@ -0,0 +1,12 @@
+import { useRender } from '@base-ui/react/use-render';
+import * as React from 'react';
+
+declare function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
+declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): React.JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+declare function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<"a">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

package/dist/breadcrumb.js

@@ -0,0 +1,161 @@
+// src/components/ui/breadcrumb.tsx
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+
+// 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/breadcrumb.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Breadcrumb({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": "breadcrumb",
+      "data-slot": "breadcrumb",
+      className: cn("min-w-0", className),
+      ...props
+    }
+  );
+}
+function BreadcrumbList({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      "data-slot": "breadcrumb-list",
+      className: cn(
+        "flex flex-wrap items-center gap-2 wrap-break-word text-gdt-sm text-fg-secondary",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function BreadcrumbItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "data-slot": "breadcrumb-item",
+      className: cn("inline-flex min-w-0 items-center gap-2", className),
+      ...props
+    }
+  );
+}
+function BreadcrumbLink({
+  className,
+  render,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "a",
+    props: mergeProps(
+      {
+        className: cn(
+          "inline-flex min-w-0 items-center rounded-sm text-gdt-sm font-normal text-fg-secondary transition-colors hover:text-fg-primary focus-visible:outline-none focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]",
+          className
+        )
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "breadcrumb-link"
+    }
+  });
+}
+function BreadcrumbPage({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "breadcrumb-page",
+      "aria-current": "page",
+      className: cn(
+        "inline-flex min-w-0 items-center text-gdt-sm font-semibold text-fg-brand",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "data-slot": "breadcrumb-separator",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: cn(
+        "inline-flex shrink-0 items-center text-fg-caption-placeholder [&>svg]:size-4 [&>svg]:shrink-0",
+        className
+      ),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, { className: "cn-rtl-flip" })
+    }
+  );
+}
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "breadcrumb-ellipsis",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: cn(
+        "inline-flex items-center justify-center text-fg-caption-placeholder [&>svg]:size-4 [&>svg]:shrink-0",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(MoreHorizontalIcon, {}),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More" })
+      ]
+    }
+  );
+}
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+};
+//# sourceMappingURL=breadcrumb.js.map

package/dist/breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/breadcrumb.tsx","../src/lib/cn.ts"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { ChevronRightIcon, MoreHorizontalIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../../lib/cn\";\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n\treturn (\n\t\t<nav\n\t\t\taria-label=\"breadcrumb\"\n\t\t\tdata-slot=\"breadcrumb\"\n\t\t\tclassName={cn(\"min-w-0\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n\treturn (\n\t\t<ol\n\t\t\tdata-slot=\"breadcrumb-list\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex flex-wrap items-center gap-2 wrap-break-word text-gdt-sm text-fg-secondary\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n\treturn (\n\t\t<li\n\t\t\tdata-slot=\"breadcrumb-item\"\n\t\t\tclassName={cn(\"inline-flex min-w-0 items-center gap-2\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction BreadcrumbLink({\n\tclassName,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"a\">) {\n\treturn useRender({\n\t\tdefaultTagName: \"a\",\n\t\tprops: mergeProps<\"a\">(\n\t\t\t{\n\t\t\t\tclassName: cn(\n\t\t\t\t\t\"inline-flex min-w-0 items-center rounded-sm text-gdt-sm font-normal text-fg-secondary transition-colors hover:text-fg-primary focus-visible:outline-none focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]\",\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: \"breadcrumb-link\",\n\t\t},\n\t});\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"breadcrumb-page\"\n\t\t\taria-current=\"page\"\n\t\t\tclassName={cn(\n\t\t\t\t\"inline-flex min-w-0 items-center text-gdt-sm font-semibold text-fg-brand\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction BreadcrumbSeparator({\n\tchildren,\n\tclassName,\n\t...props\n}: React.ComponentProps<\"li\">) {\n\treturn (\n\t\t<li\n\t\t\tdata-slot=\"breadcrumb-separator\"\n\t\t\trole=\"presentation\"\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName={cn(\n\t\t\t\t\"inline-flex shrink-0 items-center text-fg-caption-placeholder [&>svg]:size-4 [&>svg]:shrink-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children ?? <ChevronRightIcon className=\"cn-rtl-flip\" />}\n\t\t</li>\n\t);\n}\n\nfunction BreadcrumbEllipsis({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"breadcrumb-ellipsis\"\n\t\t\trole=\"presentation\"\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName={cn(\n\t\t\t\t\"inline-flex items-center justify-center text-fg-caption-placeholder [&>svg]:size-4 [&>svg]:shrink-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<MoreHorizontalIcon />\n\t\t\t<span className=\"sr-only\">More</span>\n\t\t</span>\n\t);\n}\n\nexport {\n\tBreadcrumb,\n\tBreadcrumbList,\n\tBreadcrumbItem,\n\tBreadcrumbLink,\n\tBreadcrumbPage,\n\tBreadcrumbSeparator,\n\tBreadcrumbEllipsis,\n};\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"],"mappings":";AAAA,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB,0BAA0B;;;ACFrD,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;;;ADtBE,cA+FA,YA/FA;AAFF,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAgC;AACzE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,cAAW;AAAA,MACX,aAAU;AAAA,MACV,WAAW,GAAG,WAAW,SAAS;AAAA,MACjC,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,MAAM,GAA+B;AAC5E,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,MAAM,GAA+B;AAC5E,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,0CAA0C,SAAS;AAAA,MAChE,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,eAAe;AAAA,EACvB;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAkC;AACjC,SAAO,UAAU;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACN;AAAA,QACC,WAAW;AAAA,UACV;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACN,MAAM;AAAA,IACP;AAAA,EACD,CAAC;AACF;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,MAAM,GAAiC;AAC9E,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,gBAAa;AAAA,MACb,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,oBAAoB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAA+B;AAC9B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA,MAEH,sBAAY,oBAAC,oBAAiB,WAAU,eAAc;AAAA;AAAA,EACxD;AAEF;AAEA,SAAS,mBAAmB;AAAA,EAC3B;AAAA,EACA,GAAG;AACJ,GAAiC;AAChC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,4BAAC,sBAAmB;AAAA,QACpB,oBAAC,UAAK,WAAU,WAAU,kBAAI;AAAA;AAAA;AAAA,EAC/B;AAEF;","names":[]}

package/dist/bullet-chart.d.ts

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { ComponentSize } from './size-context.js';
+
+/**
+ * A bullet chart — a compact linear gauge for KPI-vs-goal reporting where a full
+ * bar chart would be excessive. It encodes three things on one horizontal track:
+ * a **measure** bar (the actualized value), a **target** marker (the forecast to
+ * beat), and qualitative **range** bands (poor · satisfactory · good context
+ * zones) along a quantitative axis.
+ *
+ * This is just the gauge — no card, title, or value display — so it composes
+ * into whatever surrounds it (a `ChartCard`, a `KpiCard`, a table cell). Unlike
+ * the other charts in this folder it is not built on recharts (recharts has no
+ * bullet/linear-gauge primitive); it is a few positioned bands, a centered bar,
+ * and a tick. It stays size-aware via the shared `SizeProvider` and reuses the
+ * brand colour tokens.
+ *
+ * Status colour signals whether the actual cleared the forecast: `auto` paints
+ * the measure bar `status-success` when `value >= target` (OnTrack) and
+ * `status-warning` when it falls short (Behind); pass `status` to override.
+ *
+ * Tokens:
+ * - Measure bar — OnTrack `var(--color-status-success)`, Behind
+ *   `var(--color-status-warning)`
+ * - Target marker — `var(--color-fg-primary)`
+ * - Range bands — progressively darker `stone` shades (poor → good); the base
+ *   track is the lightest shade
+ * - Axis ticks — `var(--color-fg-caption-placeholder)`
+ *
+ * @example
+ * <BulletChart
+ *   value={108}
+ *   target={100}
+ *   max={120}
+ *   ranges={[60, 90]}
+ *   ticks={[0, 60, 120]}
+ *   valueFormatter={(v) => `₦${v}M`}
+ * />
+ *
+ * @example
+ * // Composed under a heading the consumer owns
+ * <div className="flex flex-col gap-4">
+ *   <div className="flex items-start justify-between">
+ *     <div>
+ *       <h3 className="font-bold">Revenue</h3>
+ *       <p className="text-fg-secondary">Actual vs ₦100M forecast</p>
+ *     </div>
+ *     <span className="text-gdt-h3 font-extrabold">₦108M</span>
+ *   </div>
+ *   <BulletChart value={108} target={100} max={120} ranges={[60, 90]} />
+ * </div>
+ */
+/** Bullet sizes line up with the three shared `ComponentSize` values. */
+type BulletChartSize = ComponentSize;
+/** Measure-bar sentiment — `auto` derives it from `value` vs `target`. */
+type BulletChartStatus = "auto" | "success" | "warning";
+type BulletChartLayout = {
+    /** Thickness of the range-band track (the pill) in px. */
+    trackHeight: number;
+    /** Thickness of the centered measure bar in px. */
+    measureHeight: number;
+    /** Height of the target marker in px — taller than the bar, inside the track. */
+    markerHeight: number;
+    /** Target marker thickness in px. */
+    markerWidth: number;
+    /** Axis tick label class. */
+    tickClass: string;
+};
+declare const BULLET_CHART_LAYOUT: Record<BulletChartSize, BulletChartLayout>;
+/**
+ * Range-band shades, ordered poor → good. The base track is the lightest shade,
+ * so the first (poorest) zone blends into it and each higher zone darkens —
+ * giving the gauge its qualitative context without competing with the bar.
+ */
+declare const BULLET_RANGE_PALETTE: readonly ["var(--color-stone-200)", "var(--color-stone-300)", "var(--color-stone-400)"];
+type BulletChartProps = Omit<React.ComponentProps<"div">, "children"> & {
+    /** The realized (actualized) value — drives the measure bar length. */
+    value: number;
+    /** The goal to beat — drives the target marker and the auto status colour. */
+    target: number;
+    /** Axis start. Default 0. */
+    min?: number;
+    /** Axis end. Default the largest of `value`, `target`, and the top range. */
+    max?: number;
+    /** Internal thresholds dividing [min, max] into qualitative zones, ascending. */
+    ranges?: number[];
+    /** Axis tick values. Default `[min, midpoint, max]`. Pass `[]` to hide. */
+    ticks?: number[];
+    /** Measure-bar sentiment. Default `auto` (success when `value >= target`). */
+    status?: BulletChartStatus;
+    /** Explicit size; otherwise inherited from the nearest `SizeProvider`. */
+    size?: BulletChartSize;
+    /** Format the tick labels (and the aria summary). Default grouped integer. */
+    valueFormatter?: (value: number) => string;
+};
+declare function BulletChart({ value, target, min, max, ranges, ticks, status, size, valueFormatter, className, ...props }: BulletChartProps): React.JSX.Element;
+
+export { BULLET_CHART_LAYOUT, BULLET_RANGE_PALETTE, BulletChart, type BulletChartLayout, type BulletChartProps, type BulletChartSize, type BulletChartStatus };

package/dist/bullet-chart.js

@@ -0,0 +1,189 @@
+// 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/bullet-chart.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var BULLET_CHART_LAYOUT = {
+  sm: {
+    trackHeight: 26,
+    measureHeight: 11,
+    markerHeight: 20,
+    markerWidth: 3,
+    tickClass: "text-gdt-xs"
+  },
+  md: {
+    trackHeight: 34,
+    measureHeight: 15,
+    markerHeight: 26,
+    markerWidth: 4,
+    tickClass: "text-gdt-sm"
+  },
+  lg: {
+    trackHeight: 44,
+    measureHeight: 19,
+    markerHeight: 34,
+    markerWidth: 5,
+    tickClass: "text-gdt-sm"
+  }
+};
+var BULLET_RANGE_PALETTE = [
+  "var(--color-stone-200)",
+  "var(--color-stone-300)",
+  "var(--color-stone-400)"
+];
+var STATUS_COLOR = {
+  success: "var(--color-status-success)",
+  warning: "var(--color-status-warning)"
+};
+function toPercent(value, min, max) {
+  if (max <= min) return 0;
+  const ratio = (value - min) / (max - min);
+  return Math.min(Math.max(ratio, 0), 1) * 100;
+}
+function BulletChart({
+  value,
+  target,
+  min = 0,
+  max,
+  ranges,
+  ticks,
+  status = "auto",
+  size,
+  valueFormatter = (v) => v.toLocaleString("en-NG"),
+  className,
+  ...props
+}) {
+  const layout = BULLET_CHART_LAYOUT[useComponentSize(size)];
+  const topRange = ranges?.length ? Math.max(...ranges) : 0;
+  const resolvedMax = max ?? (Math.max(value, target, topRange) || 1);
+  const resolvedTicks = ticks ?? [min, (min + resolvedMax) / 2, resolvedMax];
+  const resolvedStatus = status === "auto" ? value >= target ? "success" : "warning" : status;
+  const measureColor = STATUS_COLOR[resolvedStatus];
+  const thresholds = [
+    min,
+    ...(ranges ?? []).filter((r) => r > min && r < resolvedMax).sort((a, b) => a - b),
+    resolvedMax
+  ];
+  const zones = thresholds.slice(0, -1).map((from, i) => ({
+    from,
+    to: thresholds[i + 1],
+    color: BULLET_RANGE_PALETTE[Math.min(i, BULLET_RANGE_PALETTE.length - 1)]
+  }));
+  const ariaLabel = props["aria-label"] ?? `${valueFormatter(value)} of ${valueFormatter(target)} target \u2014 ${resolvedStatus === "success" ? "on track" : "behind"}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      role: "img",
+      "aria-label": ariaLabel,
+      className: cn("flex w-full flex-col gap-2", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative w-full", style: { height: layout.trackHeight }, children: [
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              className: "absolute inset-0 overflow-hidden rounded-full",
+              style: { backgroundColor: BULLET_RANGE_PALETTE[0] },
+              children: zones.map((zone) => /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  className: "absolute inset-y-0",
+                  style: {
+                    left: `${toPercent(zone.from, min, resolvedMax)}%`,
+                    width: `${toPercent(zone.to, min, resolvedMax) - toPercent(zone.from, min, resolvedMax)}%`,
+                    backgroundColor: zone.color
+                  }
+                },
+                zone.from
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              className: "absolute left-0 top-1/2 rounded-full",
+              style: {
+                height: layout.measureHeight,
+                width: `${toPercent(value, min, resolvedMax)}%`,
+                backgroundColor: measureColor,
+                transform: "translateY(-50%)"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              className: "absolute top-1/2 rounded-full bg-fg-primary",
+              style: {
+                height: layout.markerHeight,
+                width: layout.markerWidth,
+                left: `${toPercent(target, min, resolvedMax)}%`,
+                transform: "translate(-50%, -50%)"
+              }
+            }
+          )
+        ] }),
+        resolvedTicks.length > 0 && /* @__PURE__ */ jsx2("div", { className: "relative h-4 w-full", children: resolvedTicks.map((tick) => {
+          const pct = toPercent(tick, min, resolvedMax);
+          const transform = pct <= 0 ? "translateX(0)" : pct >= 100 ? "translateX(-100%)" : "translateX(-50%)";
+          return /* @__PURE__ */ jsx2(
+            "span",
+            {
+              className: cn(
+                "absolute top-0 whitespace-nowrap tabular-nums text-fg-caption-placeholder",
+                layout.tickClass
+              ),
+              style: { left: `${pct}%`, transform },
+              children: valueFormatter(tick)
+            },
+            tick
+          );
+        }) })
+      ]
+    }
+  );
+}
+export {
+  BULLET_CHART_LAYOUT,
+  BULLET_RANGE_PALETTE,
+  BulletChart
+};
+//# sourceMappingURL=bullet-chart.js.map

package/dist/bullet-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/cn.ts","../src/components/ui/size-context.tsx","../src/components/ui/bullet-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 { 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 { type ComponentSize, useComponentSize } from \"./size-context\";\n\n/**\n * A bullet chart — a compact linear gauge for KPI-vs-goal reporting where a full\n * bar chart would be excessive. It encodes three things on one horizontal track:\n * a **measure** bar (the actualized value), a **target** marker (the forecast to\n * beat), and qualitative **range** bands (poor · satisfactory · good context\n * zones) along a quantitative axis.\n *\n * This is just the gauge — no card, title, or value display — so it composes\n * into whatever surrounds it (a `ChartCard`, a `KpiCard`, a table cell). Unlike\n * the other charts in this folder it is not built on recharts (recharts has no\n * bullet/linear-gauge primitive); it is a few positioned bands, a centered bar,\n * and a tick. It stays size-aware via the shared `SizeProvider` and reuses the\n * brand colour tokens.\n *\n * Status colour signals whether the actual cleared the forecast: `auto` paints\n * the measure bar `status-success` when `value >= target` (OnTrack) and\n * `status-warning` when it falls short (Behind); pass `status` to override.\n *\n * Tokens:\n * - Measure bar — OnTrack `var(--color-status-success)`, Behind\n *   `var(--color-status-warning)`\n * - Target marker — `var(--color-fg-primary)`\n * - Range bands — progressively darker `stone` shades (poor → good); the base\n *   track is the lightest shade\n * - Axis ticks — `var(--color-fg-caption-placeholder)`\n *\n * @example\n * <BulletChart\n *   value={108}\n *   target={100}\n *   max={120}\n *   ranges={[60, 90]}\n *   ticks={[0, 60, 120]}\n *   valueFormatter={(v) => `₦${v}M`}\n * />\n *\n * @example\n * // Composed under a heading the consumer owns\n * <div className=\"flex flex-col gap-4\">\n *   <div className=\"flex items-start justify-between\">\n *     <div>\n *       <h3 className=\"font-bold\">Revenue</h3>\n *       <p className=\"text-fg-secondary\">Actual vs ₦100M forecast</p>\n *     </div>\n *     <span className=\"text-gdt-h3 font-extrabold\">₦108M</span>\n *   </div>\n *   <BulletChart value={108} target={100} max={120} ranges={[60, 90]} />\n * </div>\n */\n\n/** Bullet sizes line up with the three shared `ComponentSize` values. */\ntype BulletChartSize = ComponentSize;\n\n/** Measure-bar sentiment — `auto` derives it from `value` vs `target`. */\ntype BulletChartStatus = \"auto\" | \"success\" | \"warning\";\n\ntype BulletChartLayout = {\n\t/** Thickness of the range-band track (the pill) in px. */\n\ttrackHeight: number;\n\t/** Thickness of the centered measure bar in px. */\n\tmeasureHeight: number;\n\t/** Height of the target marker in px — taller than the bar, inside the track. */\n\tmarkerHeight: number;\n\t/** Target marker thickness in px. */\n\tmarkerWidth: number;\n\t/** Axis tick label class. */\n\ttickClass: string;\n};\n\nconst BULLET_CHART_LAYOUT: Record<BulletChartSize, BulletChartLayout> = {\n\tsm: {\n\t\ttrackHeight: 26,\n\t\tmeasureHeight: 11,\n\t\tmarkerHeight: 20,\n\t\tmarkerWidth: 3,\n\t\ttickClass: \"text-gdt-xs\",\n\t},\n\tmd: {\n\t\ttrackHeight: 34,\n\t\tmeasureHeight: 15,\n\t\tmarkerHeight: 26,\n\t\tmarkerWidth: 4,\n\t\ttickClass: \"text-gdt-sm\",\n\t},\n\tlg: {\n\t\ttrackHeight: 44,\n\t\tmeasureHeight: 19,\n\t\tmarkerHeight: 34,\n\t\tmarkerWidth: 5,\n\t\ttickClass: \"text-gdt-sm\",\n\t},\n};\n\n/**\n * Range-band shades, ordered poor → good. The base track is the lightest shade,\n * so the first (poorest) zone blends into it and each higher zone darkens —\n * giving the gauge its qualitative context without competing with the bar.\n */\nconst BULLET_RANGE_PALETTE = [\n\t\"var(--color-stone-200)\",\n\t\"var(--color-stone-300)\",\n\t\"var(--color-stone-400)\",\n] as const;\n\nconst STATUS_COLOR: Record<Exclude<BulletChartStatus, \"auto\">, string> = {\n\tsuccess: \"var(--color-status-success)\",\n\twarning: \"var(--color-status-warning)\",\n};\n\n/** Clamp a value into [min, max] and express it as a 0–100 track percentage. */\nfunction toPercent(value: number, min: number, max: number) {\n\tif (max <= min) return 0;\n\tconst ratio = (value - min) / (max - min);\n\treturn Math.min(Math.max(ratio, 0), 1) * 100;\n}\n\ntype BulletChartProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n\t/** The realized (actualized) value — drives the measure bar length. */\n\tvalue: number;\n\t/** The goal to beat — drives the target marker and the auto status colour. */\n\ttarget: number;\n\t/** Axis start. Default 0. */\n\tmin?: number;\n\t/** Axis end. Default the largest of `value`, `target`, and the top range. */\n\tmax?: number;\n\t/** Internal thresholds dividing [min, max] into qualitative zones, ascending. */\n\tranges?: number[];\n\t/** Axis tick values. Default `[min, midpoint, max]`. Pass `[]` to hide. */\n\tticks?: number[];\n\t/** Measure-bar sentiment. Default `auto` (success when `value >= target`). */\n\tstatus?: BulletChartStatus;\n\t/** Explicit size; otherwise inherited from the nearest `SizeProvider`. */\n\tsize?: BulletChartSize;\n\t/** Format the tick labels (and the aria summary). Default grouped integer. */\n\tvalueFormatter?: (value: number) => string;\n};\n\nfunction BulletChart({\n\tvalue,\n\ttarget,\n\tmin = 0,\n\tmax,\n\tranges,\n\tticks,\n\tstatus = \"auto\",\n\tsize,\n\tvalueFormatter = (v) => v.toLocaleString(\"en-NG\"),\n\tclassName,\n\t...props\n}: BulletChartProps) {\n\tconst layout = BULLET_CHART_LAYOUT[useComponentSize(size)];\n\n\tconst topRange = ranges?.length ? Math.max(...ranges) : 0;\n\tconst resolvedMax = max ?? (Math.max(value, target, topRange) || 1);\n\tconst resolvedTicks = ticks ?? [min, (min + resolvedMax) / 2, resolvedMax];\n\n\tconst resolvedStatus =\n\t\tstatus === \"auto\" ? (value >= target ? \"success\" : \"warning\") : status;\n\tconst measureColor = STATUS_COLOR[resolvedStatus];\n\n\t// Zones are the spans between consecutive thresholds (and the axis bounds).\n\tconst thresholds = [\n\t\tmin,\n\t\t...(ranges ?? [])\n\t\t\t.filter((r) => r > min && r < resolvedMax)\n\t\t\t.sort((a, b) => a - b),\n\t\tresolvedMax,\n\t];\n\tconst zones = thresholds.slice(0, -1).map((from, i) => ({\n\t\tfrom,\n\t\tto: thresholds[i + 1],\n\t\tcolor: BULLET_RANGE_PALETTE[Math.min(i, BULLET_RANGE_PALETTE.length - 1)],\n\t}));\n\n\tconst ariaLabel =\n\t\t(props[\"aria-label\"] as string | undefined) ??\n\t\t`${valueFormatter(value)} of ${valueFormatter(target)} target — ${\n\t\t\tresolvedStatus === \"success\" ? \"on track\" : \"behind\"\n\t\t}`;\n\n\treturn (\n\t\t<div\n\t\t\t{...props}\n\t\t\trole=\"img\"\n\t\t\taria-label={ariaLabel}\n\t\t\tclassName={cn(\"flex w-full flex-col gap-2\", className)}\n\t\t>\n\t\t\t<div className=\"relative w-full\" style={{ height: layout.trackHeight }}>\n\t\t\t\t{/* Range bands — the lightest shade is the full-width base track,\n\t\t\t\t    darker zones layer on top, all clipped to the pill. */}\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"absolute inset-0 overflow-hidden rounded-full\"\n\t\t\t\t\tstyle={{ backgroundColor: BULLET_RANGE_PALETTE[0] }}\n\t\t\t\t>\n\t\t\t\t\t{zones.map((zone) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={zone.from}\n\t\t\t\t\t\t\tclassName=\"absolute inset-y-0\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tleft: `${toPercent(zone.from, min, resolvedMax)}%`,\n\t\t\t\t\t\t\t\twidth: `${\n\t\t\t\t\t\t\t\t\ttoPercent(zone.to, min, resolvedMax) -\n\t\t\t\t\t\t\t\t\ttoPercent(zone.from, min, resolvedMax)\n\t\t\t\t\t\t\t\t}%`,\n\t\t\t\t\t\t\t\tbackgroundColor: zone.color,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\n\t\t\t\t{/* Measure / actual bar — centered, thinner than the track. */}\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"absolute left-0 top-1/2 rounded-full\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\theight: layout.measureHeight,\n\t\t\t\t\t\twidth: `${toPercent(value, min, resolvedMax)}%`,\n\t\t\t\t\t\tbackgroundColor: measureColor,\n\t\t\t\t\t\ttransform: \"translateY(-50%)\",\n\t\t\t\t\t}}\n\t\t\t\t/>\n\n\t\t\t\t{/* Target / forecast marker — taller than the bar, inside the track. */}\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"absolute top-1/2 rounded-full bg-fg-primary\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\theight: layout.markerHeight,\n\t\t\t\t\t\twidth: layout.markerWidth,\n\t\t\t\t\t\tleft: `${toPercent(target, min, resolvedMax)}%`,\n\t\t\t\t\t\ttransform: \"translate(-50%, -50%)\",\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t{resolvedTicks.length > 0 && (\n\t\t\t\t<div className=\"relative h-4 w-full\">\n\t\t\t\t\t{resolvedTicks.map((tick) => {\n\t\t\t\t\t\tconst pct = toPercent(tick, min, resolvedMax);\n\t\t\t\t\t\tconst transform =\n\t\t\t\t\t\t\tpct <= 0\n\t\t\t\t\t\t\t\t? \"translateX(0)\"\n\t\t\t\t\t\t\t\t: pct >= 100\n\t\t\t\t\t\t\t\t\t? \"translateX(-100%)\"\n\t\t\t\t\t\t\t\t\t: \"translateX(-50%)\";\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tkey={tick}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"absolute top-0 whitespace-nowrap tabular-nums text-fg-caption-placeholder\",\n\t\t\t\t\t\t\t\t\tlayout.tickClass,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tstyle={{ left: `${pct}%`, transform }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{valueFormatter(tick)}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nexport { BULLET_CHART_LAYOUT, BULLET_RANGE_PALETTE, BulletChart };\nexport type {\n\tBulletChartLayout,\n\tBulletChartProps,\n\tBulletChartSize,\n\tBulletChartStatus,\n};\n"],"mappings":"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","names":["jsx"]}

package/dist/button-group.d.ts

@@ -0,0 +1,18 @@
+import * as React$1 from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { useRender } from '@base-ui/react/use-render';
+import { VariantProps } from 'class-variance-authority';
+import { Separator } from './separator.js';
+import { ComponentSize } from './size-context.js';
+import '@base-ui/react/separator';
+
+declare const buttonGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants> & {
+    size?: ComponentSize;
+}): React$1.JSX.Element;
+declare function ButtonGroupText({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): React$1.JSX.Element;
+
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };