@giddaa-housing/ui 0.1.0 → 1.0.0

package/dist/scatter-chart.js

@@ -0,0 +1,252 @@
+"use client";
+import {
+  ChartContainer,
+  cartesianAxisProps
+} from "./chunk-NOFXVRWL.js";
+import {
+  SizeProvider,
+  useComponentSize
+} from "./chunk-HL3ZSYES.js";
+import {
+  cn
+} from "./chunk-Y4TTYVNE.js";
+
+// src/scatter-chart.tsx
+import {
+  CartesianGrid,
+  Scatter,
+  ScatterChart as ScatterChartPrimitive,
+  XAxis,
+  YAxis
+} from "recharts";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SCATTER_CHART_PALETTE = [
+  "var(--color-chart-1)",
+  "var(--color-chart-2)",
+  "var(--color-chart-3)"
+];
+var DEFAULT_SERIES_COLOR = SCATTER_CHART_PALETTE[0];
+var SCATTER_CHART_LAYOUT = {
+  sm: {
+    height: 220,
+    margin: { top: 16, right: 12, bottom: 0, left: 0 },
+    tickFontSize: 10,
+    tickMargin: 6,
+    yAxisWidth: 32,
+    dotRadius: 4,
+    activeDotRadius: 6
+  },
+  md: {
+    height: 260,
+    margin: { top: 20, right: 16, bottom: 0, left: 0 },
+    tickFontSize: 11,
+    tickMargin: 8,
+    yAxisWidth: 36,
+    dotRadius: 5,
+    activeDotRadius: 7
+  },
+  lg: {
+    height: 320,
+    margin: { top: 24, right: 20, bottom: 0, left: 0 },
+    tickFontSize: 12,
+    tickMargin: 10,
+    yAxisWidth: 40,
+    dotRadius: 6,
+    activeDotRadius: 8
+  }
+};
+function ScatterChart({
+  config = {},
+  size,
+  className,
+  children,
+  ...props
+}) {
+  const resolvedSize = useComponentSize(size);
+  const layout = SCATTER_CHART_LAYOUT[resolvedSize];
+  return /* @__PURE__ */ jsx(SizeProvider, { size: resolvedSize, children: /* @__PURE__ */ jsx(
+    ChartContainer,
+    {
+      config,
+      className: cn("aspect-auto w-full", className),
+      style: { height: layout.height },
+      children: /* @__PURE__ */ jsx(
+        ScatterChartPrimitive,
+        {
+          accessibilityLayer: true,
+          margin: layout.margin,
+          ...props,
+          children
+        }
+      )
+    }
+  ) });
+}
+function ScatterChartGrid(props) {
+  return /* @__PURE__ */ jsx(CartesianGrid, { stroke: "var(--color-line)", ...props });
+}
+function ScatterChartXAxis({
+  size,
+  type = "number",
+  tick,
+  ...props
+}) {
+  const layout = SCATTER_CHART_LAYOUT[useComponentSize(size)];
+  const axes = cartesianAxisProps(layout);
+  const defaultTick = {
+    ...axes.xAxis.tick,
+    fill: "var(--color-fg-caption-placeholder)"
+  };
+  return /* @__PURE__ */ jsx(
+    XAxis,
+    {
+      type,
+      tickLine: axes.xAxis.tickLine,
+      axisLine: axes.xAxis.axisLine,
+      tickMargin: axes.xAxis.tickMargin,
+      tick: tick ?? defaultTick,
+      ...props
+    }
+  );
+}
+function ScatterChartYAxis({
+  size,
+  type = "number",
+  tick,
+  ...props
+}) {
+  const layout = SCATTER_CHART_LAYOUT[useComponentSize(size)];
+  const axes = cartesianAxisProps(layout);
+  const defaultTick = {
+    ...axes.yAxis.tick,
+    fill: "var(--color-fg-caption-placeholder)"
+  };
+  return /* @__PURE__ */ jsx(
+    YAxis,
+    {
+      type,
+      tickLine: axes.yAxis.tickLine,
+      axisLine: axes.yAxis.axisLine,
+      width: axes.yAxis.width,
+      tick: tick ?? defaultTick,
+      ...props
+    }
+  );
+}
+function ScatterChartTooltipContent({
+  active,
+  payload,
+  className
+}) {
+  if (!active || !payload?.length) {
+    return null;
+  }
+  const points = payload.filter(
+    (entry) => entry.type !== "none" && entry.value != null
+  );
+  if (!points.length) {
+    return null;
+  }
+  const dotColor = points[0]?.color ?? points[0]?.fill ?? DEFAULT_SERIES_COLOR;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-1 rounded-lg border border-line-subtle bg-surface-overlay p-3 shadow-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "size-2.5 shrink-0 rounded-full",
+            style: { backgroundColor: dotColor }
+          }
+        ),
+        points.map((point, index) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-baseline justify-between gap-3 text-gdt-sm",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "text-fg-secondary", children: point.name }),
+              /* @__PURE__ */ jsxs("span", { className: "font-extrabold text-fg-primary tabular-nums", children: [
+                point.value,
+                point.unit != null && point.unit !== "" && /* @__PURE__ */ jsx("span", { className: "ml-1 font-normal text-fg-caption-placeholder", children: point.unit })
+              ] })
+            ]
+          },
+          `${point.dataKey ?? point.name ?? index}`
+        ))
+      ]
+    }
+  );
+}
+function ScatterPoint({
+  cx,
+  cy,
+  r,
+  color,
+  ringed
+}) {
+  if (cx == null || cy == null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "circle",
+    {
+      cx,
+      cy,
+      r,
+      fill: color,
+      stroke: ringed ? "var(--color-surface-raised)" : "none",
+      strokeWidth: ringed ? 2 : 0
+    }
+  );
+}
+function ScatterChartSeries({
+  color = DEFAULT_SERIES_COLOR,
+  size,
+  shape,
+  activeShape,
+  ...props
+}) {
+  const layout = SCATTER_CHART_LAYOUT[useComponentSize(size)];
+  return /* @__PURE__ */ jsx(
+    Scatter,
+    {
+      shape: shape ?? ((shapeProps) => /* @__PURE__ */ jsx(
+        ScatterPoint,
+        {
+          cx: shapeProps.cx,
+          cy: shapeProps.cy,
+          r: layout.dotRadius,
+          color
+        }
+      )),
+      activeShape: activeShape ?? ((shapeProps) => /* @__PURE__ */ jsx(
+        ScatterPoint,
+        {
+          cx: shapeProps.cx,
+          cy: shapeProps.cy,
+          r: layout.activeDotRadius,
+          color,
+          ringed: true
+        }
+      )),
+      fill: color,
+      ...props
+    }
+  );
+}
+export {
+  SCATTER_CHART_LAYOUT,
+  SCATTER_CHART_PALETTE,
+  ScatterChart,
+  ScatterChartGrid,
+  ScatterChartSeries,
+  ScatterChartTooltipContent,
+  ScatterChartXAxis,
+  ScatterChartYAxis
+};
+//# sourceMappingURL=scatter-chart.js.map

package/dist/scatter-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/scatter-chart.tsx"],"sourcesContent":["\"use client\";\n\nimport type * as React from \"react\";\nimport {\n\tCartesianGrid,\n\tScatter,\n\tScatterChart as ScatterChartPrimitive,\n\tXAxis,\n\tYAxis,\n} from \"recharts\";\nimport type { Payload } from \"recharts/types/component/DefaultTooltipContent\";\nimport type { ScatterShapeProps } from \"recharts/types/util/ScatterUtils\";\nimport { type ChartConfig, ChartContainer, cartesianAxisProps } from \"./chart\";\nimport { cn } from \"./lib/cn\";\nimport {\n\ttype ComponentSize,\n\tSizeProvider,\n\tuseComponentSize,\n} from \"./size-context\";\n\n/**\n * Scatter charts are composable wrappers over the recharts cartesian\n * primitives. recharts 3 registers graphical items through context when they\n * render, so the primitives CAN be wrapped in our own components. Each\n * wrapper bakes in the giddaa defaults (tokens, size-scaled type, mark specs)\n * and forwards every recharts prop, so anything can be overridden in place or\n * replaced with the raw recharts element.\n *\n * Anatomy: `ScatterChart` is the plot root (frame + responsive box + recharts\n * chart); compose the grid, axes, series, and the shared overlays from\n * `./chart` as children. Unlike `BarChart`/`RadarChart`, each series carries\n * its own `data` (an array of `{ x, y }` pairs) rather than sharing one row\n * per category.\n *\n * @example\n * <ChartCard size=\"md\">\n *   <ChartHeader>\n *     <ChartTitle>Price vs. size</ChartTitle>\n *     <ChartDescription>Lekki listings · ₦m by sqm</ChartDescription>\n *   </ChartHeader>\n *   <ScatterChart config={config}>\n *     <ScatterChartGrid />\n *     <ScatterChartXAxis dataKey=\"size\" name=\"Size\" unit=\"sqm\" />\n *     <ScatterChartYAxis dataKey=\"price\" name=\"Price\" unit=\"₦m\" />\n *     <ChartTooltip content={<ScatterChartTooltipContent />} />\n *     <ScatterChartSeries data={data} name=\"Lekki\" />\n *   </ScatterChart>\n * </ChartCard>\n */\n\n/**\n * Categorical series palette — the theme-aware `chart-1`…`chart-3` tokens.\n * Assign colours in this fixed order, never cycled: a fourth series folds into\n * \"Other\" or becomes a second chart.\n */\nconst SCATTER_CHART_PALETTE = [\n\t\"var(--color-chart-1)\",\n\t\"var(--color-chart-2)\",\n\t\"var(--color-chart-3)\",\n] as const;\n\nconst DEFAULT_SERIES_COLOR = SCATTER_CHART_PALETTE[0];\n\ntype ScatterChartLayout = {\n\t/** Plot height in px. Width stays fluid via the ResponsiveContainer. */\n\theight: number;\n\t/** Outer margin around the plot. */\n\tmargin: { top: number; right: number; bottom: number; left: number };\n\t/** Axis tick label font size. */\n\ttickFontSize: number;\n\t/** Space between an axis and its tick labels. */\n\ttickMargin: number;\n\t/** Reserved width for the value axis. */\n\tyAxisWidth: number;\n\t/** Radius of a resting point, in px (r ≥ 4 keeps the ≥8px marker floor). */\n\tdotRadius: number;\n\t/** Radius of the active (hover) point. */\n\tactiveDotRadius: number;\n};\n\nconst SCATTER_CHART_LAYOUT: Record<ComponentSize, ScatterChartLayout> = {\n\tsm: {\n\t\theight: 220,\n\t\tmargin: { top: 16, right: 12, bottom: 0, left: 0 },\n\t\ttickFontSize: 10,\n\t\ttickMargin: 6,\n\t\tyAxisWidth: 32,\n\t\tdotRadius: 4,\n\t\tactiveDotRadius: 6,\n\t},\n\tmd: {\n\t\theight: 260,\n\t\tmargin: { top: 20, right: 16, bottom: 0, left: 0 },\n\t\ttickFontSize: 11,\n\t\ttickMargin: 8,\n\t\tyAxisWidth: 36,\n\t\tdotRadius: 5,\n\t\tactiveDotRadius: 7,\n\t},\n\tlg: {\n\t\theight: 320,\n\t\tmargin: { top: 24, right: 20, bottom: 0, left: 0 },\n\t\ttickFontSize: 12,\n\t\ttickMargin: 10,\n\t\tyAxisWidth: 40,\n\t\tdotRadius: 6,\n\t\tactiveDotRadius: 8,\n\t},\n};\n\ntype ScatterChartProps = Omit<\n\tReact.ComponentProps<typeof ScatterChartPrimitive>,\n\t\"width\" | \"height\"\n> & {\n\t/** Series labels/icons for the shared tooltip and legend (see `ChartConfig`). */\n\tconfig?: ChartConfig;\n\t/** Plot scale; inherited from the nearest `SizeProvider` when omitted. */\n\tsize?: ComponentSize;\n\t/** Applied to the responsive plot box, e.g. to override its height. */\n\tclassName?: string;\n};\n\n/**\n * Plot root — wraps the shared `ChartContainer` (tooltip/legend theming,\n * responsive box) around the recharts `ScatterChart` with a size-scaled\n * height and margin. `size` also flows to the child primitives through\n * `SizeProvider`. Extra props reach the recharts chart (`data`, `syncId`,\n * `margin`, …).\n */\nfunction ScatterChart({\n\tconfig = {},\n\tsize,\n\tclassName,\n\tchildren,\n\t...props\n}: ScatterChartProps) {\n\tconst resolvedSize = useComponentSize(size);\n\tconst layout = SCATTER_CHART_LAYOUT[resolvedSize];\n\n\treturn (\n\t\t<SizeProvider size={resolvedSize}>\n\t\t\t<ChartContainer\n\t\t\t\tconfig={config}\n\t\t\t\tclassName={cn(\"aspect-auto w-full\", className)}\n\t\t\t\tstyle={{ height: layout.height }}\n\t\t\t>\n\t\t\t\t<ScatterChartPrimitive\n\t\t\t\t\taccessibilityLayer\n\t\t\t\t\tmargin={layout.margin}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</ScatterChartPrimitive>\n\t\t\t</ChartContainer>\n\t\t</SizeProvider>\n\t);\n}\n\ntype ScatterChartGridProps = React.ComponentProps<typeof CartesianGrid>;\n\n/**\n * Value reference lines — recharts `CartesianGrid` painted with the `line`\n * token (`line-subtle` matches the chart card surface in both themes, so it\n * would vanish). Both axes are quantitative in a scatter plot, so horizontal\n * and vertical lines render by default; pass `vertical={false}` to thin it out.\n */\nfunction ScatterChartGrid(props: ScatterChartGridProps) {\n\treturn <CartesianGrid stroke=\"var(--color-line)\" {...props} />;\n}\n\ntype ScatterChartXAxisProps = React.ComponentProps<typeof XAxis> & {\n\t/** Explicit axis scale; otherwise inherited from the chart's `size`. */\n\tsize?: ComponentSize;\n};\n\n/**\n * Value axis — recharts `XAxis` defaulting to `type=\"number\"` (a scatter axis\n * is continuous, not categorical), with no axis/tick lines, size-scaled tick\n * margin, and caption-placeholder tick ink. Pass `name`/`unit` to label this\n * axis in the tooltip. Passing your own `tick` replaces the default styling\n * entirely.\n */\nfunction ScatterChartXAxis({\n\tsize,\n\ttype = \"number\",\n\ttick,\n\t...props\n}: ScatterChartXAxisProps) {\n\tconst layout = SCATTER_CHART_LAYOUT[useComponentSize(size)];\n\tconst axes = cartesianAxisProps(layout);\n\tconst defaultTick = {\n\t\t...axes.xAxis.tick,\n\t\tfill: \"var(--color-fg-caption-placeholder)\",\n\t};\n\n\treturn (\n\t\t<XAxis\n\t\t\ttype={type}\n\t\t\ttickLine={axes.xAxis.tickLine}\n\t\t\taxisLine={axes.xAxis.axisLine}\n\t\t\ttickMargin={axes.xAxis.tickMargin}\n\t\t\ttick={tick ?? defaultTick}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\ntype ScatterChartYAxisProps = React.ComponentProps<typeof YAxis> & {\n\t/** Explicit axis scale; otherwise inherited from the chart's `size`. */\n\tsize?: ComponentSize;\n};\n\n/**\n * Value axis — recharts `YAxis` defaulting to `type=\"number\"`, with no\n * axis/tick lines, size-scaled tick type, and reserved width for value\n * labels. Pass `name`/`unit` to label this axis in the tooltip. Override\n * `width` for long tick labels.\n */\nfunction ScatterChartYAxis({\n\tsize,\n\ttype = \"number\",\n\ttick,\n\t...props\n}: ScatterChartYAxisProps) {\n\tconst layout = SCATTER_CHART_LAYOUT[useComponentSize(size)];\n\tconst axes = cartesianAxisProps(layout);\n\tconst defaultTick = {\n\t\t...axes.yAxis.tick,\n\t\tfill: \"var(--color-fg-caption-placeholder)\",\n\t};\n\n\treturn (\n\t\t<YAxis\n\t\t\ttype={type}\n\t\t\ttickLine={axes.yAxis.tickLine}\n\t\t\taxisLine={axes.yAxis.axisLine}\n\t\t\twidth={axes.yAxis.width}\n\t\t\ttick={tick ?? defaultTick}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\ntype ScatterChartTooltipContentProps = {\n\tactive?: boolean;\n\tpayload?: ReadonlyArray<Payload<string | number, string | number>>;\n\tclassName?: string;\n};\n\n/**\n * Hover tooltip for a scatter point. Unlike the shared `ChartTooltipContent`\n * (built for a single hero value), a scatter point carries one value per\n * axis, so this lists every axis entry — each labelled by its `XAxis`/\n * `YAxis` `name` and `unit` — under one series dot, on the same elevated\n * overlay (bg-surface-overlay, shadow-2, border-subtle) as the rest of the\n * chart library.\n */\nfunction ScatterChartTooltipContent({\n\tactive,\n\tpayload,\n\tclassName,\n}: ScatterChartTooltipContentProps) {\n\tif (!active || !payload?.length) {\n\t\treturn null;\n\t}\n\n\tconst points = payload.filter(\n\t\t(entry) => entry.type !== \"none\" && entry.value != null,\n\t);\n\n\tif (!points.length) {\n\t\treturn null;\n\t}\n\n\tconst dotColor = points[0]?.color ?? points[0]?.fill ?? DEFAULT_SERIES_COLOR;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex flex-col gap-1 rounded-lg border border-line-subtle bg-surface-overlay p-3 shadow-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t<span\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclassName=\"size-2.5 shrink-0 rounded-full\"\n\t\t\t\tstyle={{ backgroundColor: dotColor }}\n\t\t\t/>\n\t\t\t{points.map((point, index) => (\n\t\t\t\t<div\n\t\t\t\t\tkey={`${point.dataKey ?? point.name ?? index}`}\n\t\t\t\t\tclassName=\"flex items-baseline justify-between gap-3 text-gdt-sm\"\n\t\t\t\t>\n\t\t\t\t\t<span className=\"text-fg-secondary\">{point.name}</span>\n\t\t\t\t\t<span className=\"font-extrabold text-fg-primary tabular-nums\">\n\t\t\t\t\t\t{point.value}\n\t\t\t\t\t\t{point.unit != null && point.unit !== \"\" && (\n\t\t\t\t\t\t\t<span className=\"ml-1 font-normal text-fg-caption-placeholder\">\n\t\t\t\t\t\t\t\t{point.unit}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n}\n\n/** Renders one resting or active point as a plain filled/ringed circle. */\nfunction ScatterPoint({\n\tcx,\n\tcy,\n\tr,\n\tcolor,\n\tringed,\n}: {\n\tcx?: number;\n\tcy?: number;\n\tr: number;\n\tcolor: string;\n\tringed?: boolean;\n}) {\n\tif (cx == null || cy == null) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<circle\n\t\t\tcx={cx}\n\t\t\tcy={cy}\n\t\t\tr={r}\n\t\t\tfill={color}\n\t\t\tstroke={ringed ? \"var(--color-surface-raised)\" : \"none\"}\n\t\t\tstrokeWidth={ringed ? 2 : 0}\n\t\t/>\n\t);\n}\n\ntype ScatterChartSeriesProps = React.ComponentProps<typeof Scatter> & {\n\t/** Series colour for the points. Defaults to the first categorical chart token. */\n\tcolor?: string;\n\t/** Explicit mark scale; otherwise inherited from the chart's `size`. */\n\tsize?: ComponentSize;\n};\n\n/**\n * One data series — recharts `Scatter` with the giddaa mark spec: solid\n * resting points at a size-scaled radius (r ≥ 4, the ≥8px marker floor) and a\n * larger active point ringed in `surface-raised` so overlapping series stay\n * separable. `color` drives both shapes at once; `shape`/`activeShape` still\n * win when passed directly.\n */\nfunction ScatterChartSeries({\n\tcolor = DEFAULT_SERIES_COLOR,\n\tsize,\n\tshape,\n\tactiveShape,\n\t...props\n}: ScatterChartSeriesProps) {\n\tconst layout = SCATTER_CHART_LAYOUT[useComponentSize(size)];\n\n\treturn (\n\t\t<Scatter\n\t\t\tshape={\n\t\t\t\tshape ??\n\t\t\t\t((shapeProps: ScatterShapeProps) => (\n\t\t\t\t\t<ScatterPoint\n\t\t\t\t\t\tcx={shapeProps.cx}\n\t\t\t\t\t\tcy={shapeProps.cy}\n\t\t\t\t\t\tr={layout.dotRadius}\n\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t/>\n\t\t\t\t))\n\t\t\t}\n\t\t\tactiveShape={\n\t\t\t\tactiveShape ??\n\t\t\t\t((shapeProps: ScatterShapeProps) => (\n\t\t\t\t\t<ScatterPoint\n\t\t\t\t\t\tcx={shapeProps.cx}\n\t\t\t\t\t\tcy={shapeProps.cy}\n\t\t\t\t\t\tr={layout.activeDotRadius}\n\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\tringed\n\t\t\t\t\t/>\n\t\t\t\t))\n\t\t\t}\n\t\t\tfill={color}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tSCATTER_CHART_LAYOUT,\n\tSCATTER_CHART_PALETTE,\n\tScatterChart,\n\tScatterChartGrid,\n\tScatterChartSeries,\n\tScatterChartTooltipContent,\n\tScatterChartXAxis,\n\tScatterChartYAxis,\n};\nexport type {\n\tScatterChartGridProps,\n\tScatterChartLayout,\n\tScatterChartProps,\n\tScatterChartSeriesProps,\n\tScatterChartTooltipContentProps,\n\tScatterChartXAxisProps,\n\tScatterChartYAxisProps,\n};\n"],"mappings":"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","names":[]}

package/dist/search-input.d.ts

@@ -4,6 +4,7 @@ import 'class-variance-authority/types';
 import 'class-variance-authority';
 import './button.js';
 import '@base-ui/react/button';
+import '@base-ui/react/use-render';
 import './input.js';
 import './input-size-context.js';
 import './textarea.js';

package/dist/search-input.js

@@ -1,320 +1,22 @@
-// src/components/ui/search-input.tsx
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput
+} from "./chunk-6ZSGQHH2.js";
+import "./chunk-KSMDANKI.js";
+import "./chunk-MEKCCOP5.js";
+import "./chunk-3ACQVT7A.js";
+import "./chunk-B4H6RNDH.js";
+import "./chunk-HL3ZSYES.js";
+import {
+  cn
+} from "./chunk-Y4TTYVNE.js";
+
+// src/search-input.tsx
 import { Search, X } from "lucide-react";
 import * as React from "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/input-group.tsx
-import { cva as cva3 } from "class-variance-authority";
-
-// src/components/ui/button.tsx
-import { Button as ButtonPrimitive } from "@base-ui/react/button";
-import { cva } from "class-variance-authority";
-import { Loader } from "lucide-react";
-
-// src/components/ui/size-context.tsx
-import { createContext, useContext } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
-var SizeContext = createContext(void 0);
-function SizeProvider({
-  children,
-  size
-}) {
-  if (!size) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
-  return /* @__PURE__ */ jsx(SizeContext.Provider, { value: size, children });
-}
-function useComponentSize(size, fallback = "md") {
-  const inheritedSize = useContext(SizeContext);
-  return size ?? inheritedSize ?? fallback;
-}
-
-// src/components/ui/button.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-full bg-clip-padding whitespace-nowrap font-bold transition-[background-color,color,border-color,box-shadow,transform] outline-none select-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        primary: "bg-action-primary text-fg-on-brand hover:bg-action-primary-hover active:bg-action-primary-pressed",
-        "primary-outline": "border-2 border-action-primary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
-        secondary: "bg-surface-brand-subtle text-fg-brand hover:bg-action-primary-hover hover:text-fg-on-brand active:bg-action-primary-pressed active:text-fg-on-brand data-focused:bg-action-primary-hover data-pressed:bg-action-primary-pressed data-focused:text-fg-on-brand data-pressed:text-fg-on-brand",
-        "secondary-outline": "border-2 border-action-secondary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
-        tertiary: "bg-action-tertiary text-fg-primary hover:bg-action-tertiary-hover active:bg-action-tertiary-pressed data-focused:bg-action-tertiary-hover data-pressed:bg-action-tertiary-pressed",
-        "tertiary-outline": "border border-line-strong bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
-        ghost: "bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
-        danger: "bg-action-danger text-fg-on-brand hover:bg-action-danger-hover active:bg-action-danger-pressed data-focused:bg-action-danger-hover data-pressed:bg-action-danger-pressed",
-        "glass-overlay": "bg-surface-glass-overlay-button text-fg-on-brand",
-        "link-brand": "border-transparent bg-transparent px-0 text-fg-brand hover:underline active:underline active:opacity-70",
-        "link-neutral": "border-transparent bg-transparent px-0 text-fg-secondary hover:underline active:underline active:opacity-70"
-      },
-      size: {
-        sm: "h-8 gap-2 px-3.5 text-gdt-xs has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&_svg:not([class*='size-'])]:size-3.5",
-        md: "h-10 gap-2 px-4.5 text-gdt-sm has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
-        lg: "h-12.5 gap-2.5 px-5.5 text-gdt-md has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5 [&_svg:not([class*='size-'])]:size-4.5",
-        xl: "h-14 gap-3 px-6.5 text-gdt-lg has-data-[icon=inline-end]:pr-6 has-data-[icon=inline-start]:pl-6 [&_svg:not([class*='size-'])]:size-5",
-        icon: "size-10",
-        "icon-xs": "size-6 text-gdt-xs [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8 text-gdt-sm [&_svg:not([class*='size-'])]:size-3.5",
-        "icon-lg": "size-12.5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5",
-        "icon-xl": "size-14 text-gdt-lg [&_svg:not([class*='size-'])]:size-5"
-      }
-    },
-    defaultVariants: {
-      variant: "primary",
-      size: "md"
-    }
-  }
-);
-function Button({
-  className,
-  variant = "primary",
-  size,
-  isLoading = false,
-  children,
-  disabled = false,
-  ...props
-}) {
-  const inheritedSize = useComponentSize();
-  const resolvedSize = size ?? inheritedSize;
-  const _disabled = disabled || isLoading;
-  return /* @__PURE__ */ jsxs(
-    ButtonPrimitive,
-    {
-      "data-slot": "button",
-      className: cn(buttonVariants({ variant, size: resolvedSize, className })),
-      disabled: _disabled,
-      ...props,
-      children: [
-        isLoading && /* @__PURE__ */ jsx2(Loader, { className: "size-4 animate-spin" }),
-        " ",
-        children
-      ]
-    }
-  );
-}
-
-// src/components/ui/input.tsx
-import { Input as InputPrimitive } from "@base-ui/react/input";
-import { cva as cva2 } from "class-variance-authority";
-
-// src/components/ui/input-size-context.tsx
-import { createContext as createContext2, useContext as useContext2 } from "react";
-import { Fragment as Fragment2, jsx as jsx3 } from "react/jsx-runtime";
-var InputSizeContext = createContext2(
-  void 0
-);
-function InputSizeProvider({
-  children,
-  size
-}) {
-  if (!size) {
-    return /* @__PURE__ */ jsx3(Fragment2, { children });
-  }
-  return /* @__PURE__ */ jsx3(InputSizeContext.Provider, { value: size, children });
-}
-function useInputComponentSize(size, fallback = "md") {
-  const inheritedSize = useContext2(InputSizeContext);
-  return size ?? inheritedSize ?? fallback;
-}
-
-// src/components/ui/input.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var inputVariants = cva2(
-  "flex w-full min-w-0 rounded-full border border-line bg-canvas text-fg-primary transition-[background-color,border-color,box-shadow,color] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-normal file:text-fg-primary placeholder:text-fg-muted hover:border-line-strong focus-visible:border-line-focus focus-visible:inset-ring-1 inset-ring-line-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-line-subtle disabled:bg-surface disabled:text-fg-muted disabled:placeholder:text-fg-muted aria-invalid:border-line-danger aria-invalid:text-fg-danger aria-invalid:placeholder:text-fg-danger aria-invalid:shadow-none",
-  {
-    variants: {
-      size: {
-        sm: "h-8 px-3 text-gdt-xs font-normal file:text-gdt-xs",
-        md: "h-10 px-3.5 text-gdt-sm font-normal file:text-gdt-sm",
-        lg: "h-12 px-4 text-gdt-md font-normal file:text-gdt-md",
-        xl: "h-14 px-4.5 text-gdt-lg font-normal file:text-gdt-lg"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-function Input({ className, size, type, ...props }) {
-  const resolvedSize = useInputComponentSize(size);
-  return /* @__PURE__ */ jsx4(
-    InputPrimitive,
-    {
-      type,
-      "data-slot": "input",
-      "data-size": resolvedSize,
-      className: cn(inputVariants({ size: resolvedSize }), className),
-      ...props
-    }
-  );
-}
-
-// src/components/ui/input-group.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var inputGroupVariants = cva3(
-  "group/input-group relative flex w-full min-w-0 items-center rounded-full has-[textarea]:rounded-xl has-data-[align=block-end]:rounded-xl has-data-[align=block-start]:rounded-xl border border-line bg-canvas transition-[background-color,border-color,box-shadow,color] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:border-line-subtle has-disabled:bg-surface has-disabled:text-fg-muted focus-within:border-line-focus focus-within:inset-ring-1 inset-ring-line-focus has-[[data-slot][aria-invalid=true]]:border-line-danger has-[[data-slot][aria-invalid=true]]:inset-shadow-none has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=sm]/input-group:pl-2 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=md]/input-group:pl-2.5 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=lg]/input-group:pl-3 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=xl]/input-group:pl-3 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=sm]/input-group:pr-2 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=md]/input-group:pr-2.5 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=lg]/input-group:pr-3 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=xl]/input-group:pr-3",
-  {
-    variants: {
-      size: {
-        sm: "h-8",
-        md: "h-10",
-        lg: "h-12",
-        xl: "h-14"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-function InputGroup({
-  className,
-  size,
-  ...props
-}) {
-  const inheritedSize = useComponentSize();
-  const resolvedSize = size ?? inheritedSize;
-  const componentSize = resolvedSize === "xl" ? void 0 : resolvedSize;
-  return /* @__PURE__ */ jsx5(SizeProvider, { size: componentSize, children: /* @__PURE__ */ jsx5(InputSizeProvider, { size: resolvedSize, children: /* @__PURE__ */ jsx5(
-    "div",
-    {
-      "data-slot": "input-group",
-      "data-size": resolvedSize,
-      role: "group",
-      className: cn(inputGroupVariants({ size: resolvedSize }), className),
-      ...props
-    }
-  ) }) });
-}
-var inputGroupAddonVariants = cva3(
-  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-gdt-sm font-normal text-fg-secondary select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[size=lg]/input-group:[&>svg:not([class*='size-'])]:size-4.5 group-data-[size=xl]/input-group:[&>svg:not([class*='size-'])]:size-5 [&>svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      align: {
-        "inline-start": "order-first group-data-[size=sm]/input-group:pl-3 group-data-[size=md]/input-group:pl-3.5 group-data-[size=lg]/input-group:pl-4 group-data-[size=xl]/input-group:pl-4.5 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
-        "inline-end": "order-last group-data-[size=sm]/input-group:pr-3 group-data-[size=md]/input-group:pr-3.5 group-data-[size=lg]/input-group:pr-4 group-data-[size=xl]/input-group:pr-4.5 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
-        "block-start": "order-first w-full justify-start px-3 group-data-[size=md]/input-group:px-3.5 group-data-[size=lg]/input-group:px-4 group-data-[size=xl]/input-group:px-4.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
-        "block-end": "order-last w-full justify-start px-3 group-data-[size=md]/input-group:px-3.5 group-data-[size=lg]/input-group:px-4 group-data-[size=xl]/input-group:px-4.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2"
-      }
-    },
-    defaultVariants: {
-      align: "inline-start"
-    }
-  }
-);
-function InputGroupAddon({
-  className,
-  align = "inline-start",
-  ...props
-}) {
-  return (
-    // biome-ignore lint/a11y/useSemanticElements: addon is a structural wrapper for grouped input affordances.
-    // biome-ignore lint/a11y/useKeyWithClickEvents: click only forwards focus to the sibling input and is not a standalone action target.
-    /* @__PURE__ */ jsx5(
-      "div",
-      {
-        role: "group",
-        "data-slot": "input-group-addon",
-        "data-align": align,
-        className: cn(inputGroupAddonVariants({ align }), className),
-        onClick: (e) => {
-          if (e.target.closest("button")) {
-            return;
-          }
-          e.currentTarget.parentElement?.querySelector("input")?.focus();
-        },
-        ...props
-      }
-    )
-  );
-}
-var inputGroupButtonVariants = cva3(
-  "flex items-center gap-2 text-sm shadow-none rounded-full",
-  {
-    variants: {
-      size: {
-        xs: "h-6 gap-1 px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
-        sm: "",
-        "icon-xs": "size-6 p-0 has-[>svg]:p-0",
-        "icon-sm": "size-8 p-0 has-[>svg]:p-0"
-      }
-    },
-    defaultVariants: {
-      size: "xs"
-    }
-  }
-);
-function InputGroupButton({
-  className,
-  type = "button",
-  variant = "ghost",
-  size = "xs",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx5(
-    Button,
-    {
-      type,
-      "data-size": size,
-      variant,
-      className: cn(inputGroupButtonVariants({ size }), className),
-      ...props
-    }
-  );
-}
-function InputGroupInput({
-  className,
-  size,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx5(
-    Input,
-    {
-      "data-slot": "input-group-control",
-      size,
-      className: cn(
-        "flex-1 rounded-none border-0 bg-transparent shadow-none inset-shadow-none  inset-ring-0 focus:border-transparent focus:shadow-none focus:inset-shadow-none focus-visible:border-transparent focus-visible:shadow-none focus-visible:ring-0 focus-visible:inset-ring-0 focus-visible:inset-shadow-none disabled:bg-transparent aria-invalid:ring-0 aria-invalid:inset-ring-0 dark:bg-transparent dark:disabled:bg-transparent",
-        className
-      ),
-      ...props
-    }
-  );
-}
-
-// src/components/ui/search-input.tsx
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 function hasValue(value) {
   if (Array.isArray(value)) {
     return value.length > 0;
@@ -367,7 +69,7 @@ var SearchInput = React.forwardRef(
       input.focus();
       onClear?.();
     }
-    return /* @__PURE__ */ jsxs2(
+    return /* @__PURE__ */ jsxs(
       InputGroup,
       {
         size,
@@ -376,7 +78,7 @@ var SearchInput = React.forwardRef(
           wrapperClassName
         ),
         children: [
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx(
             InputGroupInput,
             {
               ref: inputRef,
@@ -390,14 +92,14 @@ var SearchInput = React.forwardRef(
               onChange: handleChange
             }
           ),
-          /* @__PURE__ */ jsx6(InputGroupAddon, { children: /* @__PURE__ */ jsx6(Search, {}) }),
-          showClearButton ? /* @__PURE__ */ jsx6(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(Search, {}) }),
+          showClearButton ? /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx(
             InputGroupButton,
             {
               "aria-label": "Clear search",
               disabled: disabled || readOnly,
               onClick: handleClear,
-              children: /* @__PURE__ */ jsx6(X, { className: "size-3" })
+              children: /* @__PURE__ */ jsx(X, { className: "size-3" })
             }
           ) }) : null
         ]