cortena-ui 1.3.0 → 1.4.0

package/dist/components/chart/tokens.js

@@ -0,0 +1,192 @@
+"use client";
+"use client";
+import { useEffect, useState } from "react";
+import { vizSeries } from "cortena-design/tokens";
+//#region src/components/chart/tokens.ts
+/**
+* Token plumbing for the chart engines.
+*
+* Recharts draws SVG, so it can take `var(--ds-viz-1)` verbatim and the
+* browser resolves it. Nivo cannot: its canvas renderer hands colours to a
+* 2D context, and its SVG renderer runs colours through d3-color for label and
+* border derivation, and neither understands `var()`. So every Nivo value is
+* read from the `--ds-*` custom property at runtime and handed over as a
+* concrete hex. Nothing in this file is a literal; on the server (no DOM) the
+* `var()` form is returned so SSR markup still resolves in the browser.
+*/
+/** Number of categorical series colours the design system defines (`--ds-viz-1..n`). */
+const VIZ_SERIES_COUNT = vizSeries.length;
+/** `var(--ds-viz-N)` for a zero-based series index, wrapping past the palette. */
+function vizVar(index) {
+	const n = VIZ_SERIES_COUNT;
+	return `var(--ds-viz-${(index % n + n) % n + 1})`;
+}
+/** The categorical palette as `var()` references, in series order. */
+const vizSeriesVars = /* @__PURE__ */ Array.from({ length: VIZ_SERIES_COUNT }, (_, i) => vizVar(i));
+function hasDom() {
+	return typeof document !== "undefined" && typeof getComputedStyle === "function";
+}
+/** Read a custom property as the browser computes it on `el` (default: `<html>`). */
+function readToken(name, el) {
+	if (!hasDom()) return "";
+	return getComputedStyle(el ?? document.documentElement).getPropertyValue(name).trim();
+}
+/** A `--ds-text-*` size (rem or px) as a pixel number, for engines that want numbers. */
+function tokenPx(name, el) {
+	const raw = readToken(name, el);
+	if (!raw) return void 0;
+	const n = Number.parseFloat(raw);
+	if (Number.isNaN(n)) return void 0;
+	if (raw.endsWith("rem")) return n * (Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16);
+	return n;
+}
+let probe;
+function hex2(n) {
+	return n.toString(16).padStart(2, "0");
+}
+/**
+* Convert any CSS colour the browser understands (oklch, color-mix, rgba…) to
+* `#rrggbb`, by painting it into an offscreen 2D context. Alpha is composited
+* against transparent, so translucent tokens come back opaque; chart fills
+* never use those.
+*/
+function toHex(css) {
+	if (!hasDom() || !css) return void 0;
+	if (probe === void 0) probe = document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+	if (!probe) return void 0;
+	probe.clearRect(0, 0, 1, 1);
+	probe.fillStyle = css;
+	probe.fillRect(0, 0, 1, 1);
+	const d = probe.getImageData(0, 0, 1, 1).data;
+	return `#${hex2(d[0] ?? 0)}${hex2(d[1] ?? 0)}${hex2(d[2] ?? 0)}`;
+}
+/**
+* A token as a concrete colour. Returns hex in the browser; on the server the
+* `var()` form, which is fine for SVG markup and irrelevant for canvas.
+*/
+function resolveColor(token, el) {
+	return toHex(readToken(token, el)) ?? `var(${token})`;
+}
+/** The categorical palette resolved to concrete colours, in series order. */
+function resolveVizSeries(el) {
+	return vizSeriesVars.map((_, i) => resolveColor(`--ds-viz-${i + 1}`, el));
+}
+/** Relative luminance of a `#rrggbb`, for choosing a scale direction. */
+function luminance(hex) {
+	const c = (i) => {
+		const v = Number.parseInt(hex.slice(i, i + 2), 16) / 255;
+		return v <= .03928 ? v / 12.92 : ((v + .055) / 1.055) ** 2.4;
+	};
+	return .2126 * c(1) + .7152 * c(3) + .0722 * c(5);
+}
+/**
+* A label colour that reads on a given fill: the design system's ink on light
+* fills, its white on dark ones. Nivo cells and arcs paint their labels with
+* this so a value on a deep sequential cell stays legible.
+*/
+function contrastLabel(el) {
+	const ink = resolveColor("--ds-base-text-ink", el);
+	const white = resolveColor("--ds-base-white", el);
+	return (fill) => {
+		const hex = fill.startsWith("#") && fill.length === 7 ? fill : toHex(fill);
+		return hex && luminance(hex) < .3 ? white : ink;
+	};
+}
+/** True when the resolved `--ds-background` is dark, whatever set the theme (attribute or OS). */
+function isDarkSurface(el) {
+	const bg = toHex(readToken("--ds-background", el));
+	return bg ? luminance(bg) < .4 : false;
+}
+/** Linear interpolation through a list of hex stops; `t` in [0, 1]. */
+function piecewiseHex(stops) {
+	const rgb = stops.map((h) => [
+		1,
+		3,
+		5
+	].map((i) => Number.parseInt(h.slice(i, i + 2), 16)));
+	return (t) => {
+		const pos = Math.min(1, Math.max(0, Number.isNaN(t) ? 0 : t)) * (rgb.length - 1);
+		const i = Math.max(0, Math.min(rgb.length - 2, Math.floor(pos)));
+		const f = pos - i;
+		const a = rgb[i] ?? [
+			0,
+			0,
+			0
+		];
+		const b = rgb[i + 1] ?? a;
+		const mix = (k) => Math.round((a[k] ?? 0) + ((b[k] ?? 0) - (a[k] ?? 0)) * f);
+		return `#${hex2(mix(0))}${hex2(mix(1))}${hex2(mix(2))}`;
+	};
+}
+/**
+* Sequential and diverging scales from the tokens.
+*
+* The token set has only the eight categorical `--ds-viz-*` colours and no
+* sequential ramp, so the sequential scale is derived from the
+* `--ds-primary-100..900` ladder: light surfaces run 100 → 700 (pale to deep),
+* dark surfaces run 900 → 400 (deep to bright), so low values sit near the
+* background in both themes. The diverging scale runs `--ds-viz-5` (rose)
+* through the theme's neutral (`--ds-neutral-200` light, `--ds-neutral-700`
+* dark) to `--ds-viz-1` (blue).
+*/
+function chartScales(el) {
+	const dark = isDarkSurface(el);
+	const sequential = (dark ? [
+		"--ds-primary-900",
+		"--ds-primary-800",
+		"--ds-primary-600",
+		"--ds-primary-400"
+	] : [
+		"--ds-primary-100",
+		"--ds-primary-300",
+		"--ds-primary-500",
+		"--ds-primary-700"
+	]).map((t) => resolveColor(t, el));
+	const diverging = [
+		"--ds-viz-5",
+		dark ? "--ds-neutral-700" : "--ds-neutral-200",
+		"--ds-viz-1"
+	].map((t) => resolveColor(t, el));
+	const sequentialInterpolator = piecewiseHex(sequential);
+	return {
+		sequential,
+		diverging,
+		sequentialInterpolator,
+		divergingInterpolator: piecewiseHex(diverging),
+		sequentialSteps: (n) => Array.from({ length: n }, (_, i) => sequentialInterpolator(n === 1 ? 1 : i / (n - 1))),
+		empty: resolveColor("--ds-muted", el),
+		surface: resolveColor("--ds-background", el)
+	};
+}
+/**
+* A counter that bumps whenever the theme may have changed: the `data-theme`
+* or `class` attribute on `<html>`, or the OS colour scheme. Resolved token
+* values are memoised on it so Nivo re-reads them on a flip.
+*/
+function useThemeVersion() {
+	const [version, setVersion] = useState(0);
+	useEffect(() => {
+		if (!hasDom()) return;
+		const bump = () => setVersion((v) => v + 1);
+		const observer = new MutationObserver(bump);
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: [
+				"data-theme",
+				"class",
+				"style"
+			]
+		});
+		const media = window.matchMedia?.("(prefers-color-scheme: dark)");
+		media?.addEventListener?.("change", bump);
+		return () => {
+			observer.disconnect();
+			media?.removeEventListener?.("change", bump);
+		};
+	}, []);
+	return version;
+}
+//#endregion
+export { VIZ_SERIES_COUNT, chartScales, contrastLabel, isDarkSurface, piecewiseHex, readToken, resolveColor, resolveVizSeries, toHex, tokenPx, useThemeVersion, vizSeriesVars, vizVar };
+
+//# sourceMappingURL=tokens.js.map

package/dist/components/chart/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../../src/components/chart/tokens.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { vizSeries } from \"cortena-design/tokens\";\n\n/**\n * Token plumbing for the chart engines.\n *\n * Recharts draws SVG, so it can take `var(--ds-viz-1)` verbatim and the\n * browser resolves it. Nivo cannot: its canvas renderer hands colours to a\n * 2D context, and its SVG renderer runs colours through d3-color for label and\n * border derivation, and neither understands `var()`. So every Nivo value is\n * read from the `--ds-*` custom property at runtime and handed over as a\n * concrete hex. Nothing in this file is a literal; on the server (no DOM) the\n * `var()` form is returned so SSR markup still resolves in the browser.\n */\n\n/** Number of categorical series colours the design system defines (`--ds-viz-1..n`). */\nexport const VIZ_SERIES_COUNT = vizSeries.length;\n\n/** `var(--ds-viz-N)` for a zero-based series index, wrapping past the palette. */\nexport function vizVar(index: number): string {\n  const n = VIZ_SERIES_COUNT;\n  return `var(--ds-viz-${(((index % n) + n) % n) + 1})`;\n}\n\n/** The categorical palette as `var()` references, in series order. */\nexport const vizSeriesVars: readonly string[] = /* @__PURE__ */ Array.from({ length: VIZ_SERIES_COUNT }, (_, i) =>\n  vizVar(i),\n);\n\nfunction hasDom(): boolean {\n  return typeof document !== \"undefined\" && typeof getComputedStyle === \"function\";\n}\n\n/** Read a custom property as the browser computes it on `el` (default: `<html>`). */\nexport function readToken(name: string, el?: Element | null): string {\n  if (!hasDom()) return \"\";\n  return getComputedStyle(el ?? document.documentElement).getPropertyValue(name).trim();\n}\n\n/** A `--ds-text-*` size (rem or px) as a pixel number, for engines that want numbers. */\nexport function tokenPx(name: string, el?: Element | null): number | undefined {\n  const raw = readToken(name, el);\n  if (!raw) return undefined;\n  const n = Number.parseFloat(raw);\n  if (Number.isNaN(n)) return undefined;\n  if (raw.endsWith(\"rem\")) {\n    const root = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;\n    return n * root;\n  }\n  return n;\n}\n\nlet probe: CanvasRenderingContext2D | null | undefined;\n\nfunction hex2(n: number): string {\n  return n.toString(16).padStart(2, \"0\");\n}\n\n/**\n * Convert any CSS colour the browser understands (oklch, color-mix, rgba…) to\n * `#rrggbb`, by painting it into an offscreen 2D context. Alpha is composited\n * against transparent, so translucent tokens come back opaque; chart fills\n * never use those.\n */\nexport function toHex(css: string): string | undefined {\n  if (!hasDom() || !css) return undefined;\n  if (probe === undefined) {\n    probe = document.createElement(\"canvas\").getContext(\"2d\", { willReadFrequently: true });\n  }\n  if (!probe) return undefined;\n  probe.clearRect(0, 0, 1, 1);\n  probe.fillStyle = css;\n  probe.fillRect(0, 0, 1, 1);\n  const d = probe.getImageData(0, 0, 1, 1).data;\n  return `#${hex2(d[0] ?? 0)}${hex2(d[1] ?? 0)}${hex2(d[2] ?? 0)}`;\n}\n\n/**\n * A token as a concrete colour. Returns hex in the browser; on the server the\n * `var()` form, which is fine for SVG markup and irrelevant for canvas.\n */\nexport function resolveColor(token: string, el?: Element | null): string {\n  return toHex(readToken(token, el)) ?? `var(${token})`;\n}\n\n/** The categorical palette resolved to concrete colours, in series order. */\nexport function resolveVizSeries(el?: Element | null): string[] {\n  return vizSeriesVars.map((_, i) => resolveColor(`--ds-viz-${i + 1}`, el));\n}\n\n/** Relative luminance of a `#rrggbb`, for choosing a scale direction. */\nfunction luminance(hex: string): number {\n  const c = (i: number) => {\n    const v = Number.parseInt(hex.slice(i, i + 2), 16) / 255;\n    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;\n  };\n  return 0.2126 * c(1) + 0.7152 * c(3) + 0.0722 * c(5);\n}\n\n/**\n * A label colour that reads on a given fill: the design system's ink on light\n * fills, its white on dark ones. Nivo cells and arcs paint their labels with\n * this so a value on a deep sequential cell stays legible.\n */\nexport function contrastLabel(el?: Element | null): (fill: string) => string {\n  const ink = resolveColor(\"--ds-base-text-ink\", el);\n  const white = resolveColor(\"--ds-base-white\", el);\n  return (fill: string) => {\n    const hex = fill.startsWith(\"#\") && fill.length === 7 ? fill : toHex(fill);\n    return hex && luminance(hex) < 0.3 ? white : ink;\n  };\n}\n\n/** True when the resolved `--ds-background` is dark, whatever set the theme (attribute or OS). */\nexport function isDarkSurface(el?: Element | null): boolean {\n  const bg = toHex(readToken(\"--ds-background\", el));\n  return bg ? luminance(bg) < 0.4 : false;\n}\n\n/** Linear interpolation through a list of hex stops; `t` in [0, 1]. */\nexport function piecewiseHex(stops: string[]): (t: number) => string {\n  const rgb = stops.map((h) => [1, 3, 5].map((i) => Number.parseInt(h.slice(i, i + 2), 16)));\n  return (t: number) => {\n    const clamped = Math.min(1, Math.max(0, Number.isNaN(t) ? 0 : t));\n    const pos = clamped * (rgb.length - 1);\n    const i = Math.max(0, Math.min(rgb.length - 2, Math.floor(pos)));\n    const f = pos - i;\n    const a = rgb[i] ?? [0, 0, 0];\n    const b = rgb[i + 1] ?? a;\n    const mix = (k: number) => Math.round((a[k] ?? 0) + ((b[k] ?? 0) - (a[k] ?? 0)) * f);\n    return `#${hex2(mix(0))}${hex2(mix(1))}${hex2(mix(2))}`;\n  };\n}\n\nexport interface ChartScales {\n  /** Low → high, as concrete hex stops. */\n  sequential: string[];\n  /** Negative → neutral → positive, as concrete hex stops. */\n  diverging: string[];\n  /** Interpolators over the stops, `t` in [0, 1], for Nivo's `interpolator` configs. */\n  sequentialInterpolator: (t: number) => string;\n  divergingInterpolator: (t: number) => string;\n  /** `n` evenly spaced sequential swatches, for quantised fills like the calendar. */\n  sequentialSteps: (n: number) => string[];\n  /** Fill for cells with no value. */\n  empty: string;\n  /** The chart's surface (`--ds-background`), for the gaps between cells and arcs. */\n  surface: string;\n}\n\n/**\n * Sequential and diverging scales from the tokens.\n *\n * The token set has only the eight categorical `--ds-viz-*` colours and no\n * sequential ramp, so the sequential scale is derived from the\n * `--ds-primary-100..900` ladder: light surfaces run 100 → 700 (pale to deep),\n * dark surfaces run 900 → 400 (deep to bright), so low values sit near the\n * background in both themes. The diverging scale runs `--ds-viz-5` (rose)\n * through the theme's neutral (`--ds-neutral-200` light, `--ds-neutral-700`\n * dark) to `--ds-viz-1` (blue).\n */\nexport function chartScales(el?: Element | null): ChartScales {\n  const dark = isDarkSurface(el);\n  const seqTokens = dark\n    ? [\"--ds-primary-900\", \"--ds-primary-800\", \"--ds-primary-600\", \"--ds-primary-400\"]\n    : [\"--ds-primary-100\", \"--ds-primary-300\", \"--ds-primary-500\", \"--ds-primary-700\"];\n  const sequential = seqTokens.map((t) => resolveColor(t, el));\n  const diverging = [\"--ds-viz-5\", dark ? \"--ds-neutral-700\" : \"--ds-neutral-200\", \"--ds-viz-1\"].map(\n    (t) => resolveColor(t, el),\n  );\n  const sequentialInterpolator = piecewiseHex(sequential);\n  const divergingInterpolator = piecewiseHex(diverging);\n  return {\n    sequential,\n    diverging,\n    sequentialInterpolator,\n    divergingInterpolator,\n    sequentialSteps: (n) =>\n      Array.from({ length: n }, (_, i) => sequentialInterpolator(n === 1 ? 1 : i / (n - 1))),\n    empty: resolveColor(\"--ds-muted\", el),\n    surface: resolveColor(\"--ds-background\", el),\n  };\n}\n\n/**\n * A counter that bumps whenever the theme may have changed: the `data-theme`\n * or `class` attribute on `<html>`, or the OS colour scheme. Resolved token\n * values are memoised on it so Nivo re-reads them on a flip.\n */\nexport function useThemeVersion(): number {\n  const [version, setVersion] = useState(0);\n  useEffect(() => {\n    if (!hasDom()) return;\n    const bump = () => setVersion((v) => v + 1);\n    const observer = new MutationObserver(bump);\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"data-theme\", \"class\", \"style\"],\n    });\n    const media = window.matchMedia?.(\"(prefers-color-scheme: dark)\");\n    media?.addEventListener?.(\"change\", bump);\n    return () => {\n      observer.disconnect();\n      media?.removeEventListener?.(\"change\", bump);\n    };\n  }, []);\n  return version;\n}\n"],"mappings":"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"}

package/dist/components/chart/types.d.ts

@@ -0,0 +1,114 @@
+"use client";
+import * as React from "react";
+//#region src/components/chart/types.d.ts
+/**
+ * Chart types and the data shape each one expects.
+ *
+ * Engine per type (see cortena-docs/cortenaUI&Design/03-charting.md):
+ *
+ * | type                                                     | engine                    |
+ * | -------------------------------------------------------- | ------------------------- |
+ * | bar, line, area, pie, donut, scatter, radar, funnel      | Recharts (static import)  |
+ * | heatmap, calendar, treemap, sunburst                     | Nivo (lazy, per package)  |
+ *
+ * Data shapes (the webchat renderer's legacy shapes are all accepted):
+ *
+ * - **bar**, **radar**: `ChartRow[]` — one object per category with a string
+ *   category key (`indexBy`, inferred as the first string field) and one
+ *   numeric field per series (`keys`, inferred as every numeric field).
+ *   `[{ month: "Jan", revenue: 12, cost: 8 }, …]`. The series shape below is
+ *   also accepted and pivoted.
+ * - **line**, **area**: `ChartSeries[]` — `[{ id: "revenue", data: [{ x, y }] }]`
+ *   (the Nivo line shape the webchat emits). `ChartRow[]` is also accepted.
+ * - **pie**, **donut**, **funnel**: `ChartSlice[]` — `[{ id, label?, value }]`.
+ * - **scatter** (alias `scatterplot`): `ChartSeries[]` — one series per group.
+ * - **heatmap**: `ChartSeries[]` — Nivo heatmap shape, `[{ id: row, data: [{ x: column, y: value }] }]` —
+ *   or `ChartMatrix`, the categorical form a correlation / confusion matrix
+ *   already has: `{ rows, columns, values }` with `values[r][c]` at
+ *   `rows[r] × columns[c]`.
+ * - **calendar**: `ChartDay[]` — `[{ day: "2026-01-31", value }]`; `from`/`to`
+ *   default to the data's range.
+ * - **treemap**, **sunburst**: `ChartTree` — Nivo tree, `{ id, children?: [...], value? }`
+ *   (`name` is accepted in place of `id`).
+ */
+export type ChartType = "bar" | "line" | "area" | "pie" | "donut" | "scatter" | "scatterplot" | "radar" | "funnel" | "heatmap" | "calendar" | "treemap" | "sunburst";
+/** The engine that draws a given type. */
+export type ChartEngine = "recharts" | "nivo";
+/** Nivo renderer; only the Nivo types honour it (Recharts is SVG only). */
+export type ChartRenderer = "svg" | "canvas";
+/** One category with a numeric value per series. */
+export type ChartRow = Record<string, string | number | null | undefined>;
+/** One series of points; x may be a category or a number, y a number. */
+export interface ChartPoint {
+  x: string | number;
+  y: number | null;
+}
+export interface ChartSeries {
+  id: string | number;
+  data: ChartPoint[];
+}
+/**
+ * What to write on each arc of a pie or donut.
+ *
+ * `percent` is the default for both, because the question a reader asks of a
+ * pie is almost always "what share is that", and reading it off the legend
+ * slice by slice is the work the chart was supposed to do for them. `value`
+ * writes the number itself, through `valueFormatter` when one is given. `none`
+ * leaves the arcs bare for a chart that is decorative or has its own labelling.
+ *
+ * Arcs too thin to hold their text are left unlabelled whatever this says; see
+ * `ARC_LABEL_MIN_FRACTION` in recharts-charts.tsx.
+ */
+export type ChartLabels = "none" | "value" | "percent";
+/** One slice of a pie, donut or funnel. */
+export interface ChartSlice {
+  id: string | number;
+  label?: string;
+  value: number;
+}
+/**
+ * A categorical matrix: `values[r][c]` is the cell at `rows[r]` × `columns[c]`.
+ * The shape a correlation matrix, a confusion matrix or a day × hour grid is
+ * already in, so it needs no pivot at the call site. Short rows are padded
+ * with `null` (drawn as the empty colour) rather than treated as zero.
+ */
+export interface ChartMatrix {
+  rows: string[];
+  columns: string[];
+  values: Array<Array<number | null | undefined>>;
+}
+/** One day of a calendar heatmap. */
+export interface ChartDay {
+  day: string;
+  value: number;
+}
+/** A Nivo tree node for treemap and sunburst. */
+export interface ChartTree {
+  id?: string | number;
+  name?: string;
+  value?: number;
+  children?: ChartTree[];
+  [key: string]: unknown;
+}
+/** The data type accepted for each chart type. */
+export type ChartDataFor<T extends ChartType> = T extends "bar" | "radar" ? ChartRow[] | ChartSeries[] : T extends "line" | "area" ? ChartSeries[] | ChartRow[] : T extends "pie" | "donut" | "funnel" ? ChartSlice[] : T extends "heatmap" ? ChartSeries[] | ChartMatrix : T extends "scatter" | "scatterplot" ? ChartSeries[] : T extends "calendar" ? ChartDay[] : T extends "treemap" | "sunburst" ? ChartTree : never;
+/**
+ * Per-series presentation, keyed by series id (the `keys` of a row chart, the
+ * `id` of a series or slice). Colours default to `var(--ds-viz-1..n)` in key
+ * order, so the same category index gets the same colour in every app; set
+ * `color` only to pin a category to a semantic colour, and then only to a
+ * token (`var(--ds-success)`), never a literal.
+ */
+export type ChartConfig = Record<string, {
+  label?: React.ReactNode;
+  icon?: React.ComponentType;
+  color?: string;
+}>;
+/** Which continuous scale a heatmap or calendar uses. */
+export type ChartScale = "sequential" | "diverging";
+export declare const RECHARTS_TYPES: ReadonlySet<ChartType>;
+export declare const NIVO_TYPES: ReadonlySet<ChartType>;
+/** The engine the package uses for a chart type. */
+export declare function chartEngine(type: ChartType): ChartEngine;
+//#endregion
+//# sourceMappingURL=types.d.ts.map

package/dist/components/chart/types.js

@@ -0,0 +1,27 @@
+"use client";
+//#region src/components/chart/types.ts
+const RECHARTS_TYPES = /* @__PURE__ */ new Set([
+	"bar",
+	"line",
+	"area",
+	"pie",
+	"donut",
+	"scatter",
+	"scatterplot",
+	"radar",
+	"funnel"
+]);
+const NIVO_TYPES = /* @__PURE__ */ new Set([
+	"heatmap",
+	"calendar",
+	"treemap",
+	"sunburst"
+]);
+/** The engine the package uses for a chart type. */
+function chartEngine(type) {
+	return NIVO_TYPES.has(type) ? "nivo" : "recharts";
+}
+//#endregion
+export { NIVO_TYPES, RECHARTS_TYPES, chartEngine };
+
+//# sourceMappingURL=types.js.map

package/dist/components/chart/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/components/chart/types.ts"],"sourcesContent":["import type * as React from \"react\";\n\n/**\n * Chart types and the data shape each one expects.\n *\n * Engine per type (see cortena-docs/cortenaUI&Design/03-charting.md):\n *\n * | type                                                     | engine                    |\n * | -------------------------------------------------------- | ------------------------- |\n * | bar, line, area, pie, donut, scatter, radar, funnel      | Recharts (static import)  |\n * | heatmap, calendar, treemap, sunburst                     | Nivo (lazy, per package)  |\n *\n * Data shapes (the webchat renderer's legacy shapes are all accepted):\n *\n * - **bar**, **radar**: `ChartRow[]` — one object per category with a string\n *   category key (`indexBy`, inferred as the first string field) and one\n *   numeric field per series (`keys`, inferred as every numeric field).\n *   `[{ month: \"Jan\", revenue: 12, cost: 8 }, …]`. The series shape below is\n *   also accepted and pivoted.\n * - **line**, **area**: `ChartSeries[]` — `[{ id: \"revenue\", data: [{ x, y }] }]`\n *   (the Nivo line shape the webchat emits). `ChartRow[]` is also accepted.\n * - **pie**, **donut**, **funnel**: `ChartSlice[]` — `[{ id, label?, value }]`.\n * - **scatter** (alias `scatterplot`): `ChartSeries[]` — one series per group.\n * - **heatmap**: `ChartSeries[]` — Nivo heatmap shape, `[{ id: row, data: [{ x: column, y: value }] }]` —\n *   or `ChartMatrix`, the categorical form a correlation / confusion matrix\n *   already has: `{ rows, columns, values }` with `values[r][c]` at\n *   `rows[r] × columns[c]`.\n * - **calendar**: `ChartDay[]` — `[{ day: \"2026-01-31\", value }]`; `from`/`to`\n *   default to the data's range.\n * - **treemap**, **sunburst**: `ChartTree` — Nivo tree, `{ id, children?: [...], value? }`\n *   (`name` is accepted in place of `id`).\n */\nexport type ChartType =\n  | \"bar\"\n  | \"line\"\n  | \"area\"\n  | \"pie\"\n  | \"donut\"\n  | \"scatter\"\n  | \"scatterplot\"\n  | \"radar\"\n  | \"funnel\"\n  | \"heatmap\"\n  | \"calendar\"\n  | \"treemap\"\n  | \"sunburst\";\n\n/** The engine that draws a given type. */\nexport type ChartEngine = \"recharts\" | \"nivo\";\n\n/** Nivo renderer; only the Nivo types honour it (Recharts is SVG only). */\nexport type ChartRenderer = \"svg\" | \"canvas\";\n\n/** One category with a numeric value per series. */\nexport type ChartRow = Record<string, string | number | null | undefined>;\n\n/** One series of points; x may be a category or a number, y a number. */\nexport interface ChartPoint {\n  x: string | number;\n  y: number | null;\n}\nexport interface ChartSeries {\n  id: string | number;\n  data: ChartPoint[];\n}\n\n/**\n * What to write on each arc of a pie or donut.\n *\n * `percent` is the default for both, because the question a reader asks of a\n * pie is almost always \"what share is that\", and reading it off the legend\n * slice by slice is the work the chart was supposed to do for them. `value`\n * writes the number itself, through `valueFormatter` when one is given. `none`\n * leaves the arcs bare for a chart that is decorative or has its own labelling.\n *\n * Arcs too thin to hold their text are left unlabelled whatever this says; see\n * `ARC_LABEL_MIN_FRACTION` in recharts-charts.tsx.\n */\nexport type ChartLabels = \"none\" | \"value\" | \"percent\";\n\n/** One slice of a pie, donut or funnel. */\nexport interface ChartSlice {\n  id: string | number;\n  label?: string;\n  value: number;\n}\n\n/**\n * A categorical matrix: `values[r][c]` is the cell at `rows[r]` × `columns[c]`.\n * The shape a correlation matrix, a confusion matrix or a day × hour grid is\n * already in, so it needs no pivot at the call site. Short rows are padded\n * with `null` (drawn as the empty colour) rather than treated as zero.\n */\nexport interface ChartMatrix {\n  rows: string[];\n  columns: string[];\n  values: Array<Array<number | null | undefined>>;\n}\n\n/** One day of a calendar heatmap. */\nexport interface ChartDay {\n  day: string;\n  value: number;\n}\n\n/** A Nivo tree node for treemap and sunburst. */\nexport interface ChartTree {\n  id?: string | number;\n  name?: string;\n  value?: number;\n  children?: ChartTree[];\n  [key: string]: unknown;\n}\n\n/** The data type accepted for each chart type. */\nexport type ChartDataFor<T extends ChartType> = T extends \"bar\" | \"radar\"\n  ? ChartRow[] | ChartSeries[]\n  : T extends \"line\" | \"area\"\n    ? ChartSeries[] | ChartRow[]\n    : T extends \"pie\" | \"donut\" | \"funnel\"\n      ? ChartSlice[]\n      : T extends \"heatmap\"\n      ? ChartSeries[] | ChartMatrix\n      : T extends \"scatter\" | \"scatterplot\"\n        ? ChartSeries[]\n        : T extends \"calendar\"\n          ? ChartDay[]\n          : T extends \"treemap\" | \"sunburst\"\n            ? ChartTree\n            : never;\n\n/**\n * Per-series presentation, keyed by series id (the `keys` of a row chart, the\n * `id` of a series or slice). Colours default to `var(--ds-viz-1..n)` in key\n * order, so the same category index gets the same colour in every app; set\n * `color` only to pin a category to a semantic colour, and then only to a\n * token (`var(--ds-success)`), never a literal.\n */\nexport type ChartConfig = Record<\n  string,\n  {\n    label?: React.ReactNode;\n    icon?: React.ComponentType;\n    color?: string;\n  }\n>;\n\n/** Which continuous scale a heatmap or calendar uses. */\nexport type ChartScale = \"sequential\" | \"diverging\";\n\nexport const RECHARTS_TYPES: ReadonlySet<ChartType> = new Set<ChartType>([\n  \"bar\",\n  \"line\",\n  \"area\",\n  \"pie\",\n  \"donut\",\n  \"scatter\",\n  \"scatterplot\",\n  \"radar\",\n  \"funnel\",\n]);\n\nexport const NIVO_TYPES: ReadonlySet<ChartType> = new Set<ChartType>([\n  \"heatmap\",\n  \"calendar\",\n  \"treemap\",\n  \"sunburst\",\n]);\n\n/** The engine the package uses for a chart type. */\nexport function chartEngine(type: ChartType): ChartEngine {\n  return NIVO_TYPES.has(type) ? \"nivo\" : \"recharts\";\n}\n"],"mappings":";;AAsJA,MAAa,iCAAyC,IAAI,IAAe;CACvE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;AAED,MAAa,6BAAqC,IAAI,IAAe;CACnE;CACA;CACA;CACA;AACF,CAAC;;AAGD,SAAgB,YAAY,MAA8B;CACxD,OAAO,WAAW,IAAI,IAAI,IAAI,SAAS;AACzC"}

package/dist/components/checkbox.d.ts

@@ -0,0 +1,20 @@
+"use client";
+import { Checkbox } from "@base-ui/react/checkbox";
+import * as React from "react";
+//#region src/components/checkbox.d.ts
+/**
+ * Checkbox.
+ *
+ * Base UI renders a `<span role="checkbox">` with a hidden `<input>` beside
+ * it, so it submits with forms and takes `checked`/`defaultChecked`. The
+ * indicator only mounts while checked or indeterminate; the icon inside it is
+ * a lucide Check, or a Minus when `indeterminate` is set.
+ *
+ * The 16px box takes half the small radius: the 8px ladder step would round
+ * it into a circle.
+ */
+export interface CheckboxProps extends React.ComponentProps<typeof Checkbox.Root> {}
+declare function Checkbox$1({ className, indeterminate, ...props }: CheckboxProps): React.JSX.Element;
+//#endregion
+export { Checkbox$1 as Checkbox };
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/components/checkbox.js

@@ -0,0 +1,24 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { Check, Minus } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+import { Checkbox } from "@base-ui/react/checkbox";
+//#region src/components/checkbox.tsx
+function Checkbox$1({ className, indeterminate, ...props }) {
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		"data-slot": "checkbox",
+		indeterminate,
+		className: cn("peer inline-flex size-4 shrink-0 items-center justify-center rounded-[calc(var(--ds-radius-sm)/2)] border", "border-[var(--ds-input)] bg-[var(--ds-background)]", "transition-[background-color,border-color,box-shadow] duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]", "outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40", "data-[checked]:border-[var(--ds-primary)] data-[checked]:bg-[var(--ds-primary)] data-[checked]:text-[color:var(--ds-primary-foreground)]", "data-[indeterminate]:border-[var(--ds-primary)] data-[indeterminate]:bg-[var(--ds-primary)] data-[indeterminate]:text-[color:var(--ds-primary-foreground)]", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "aria-invalid:border-[var(--ds-destructive)] aria-invalid:ring-[3px] aria-invalid:ring-[var(--ds-destructive)]/20", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
+			"data-slot": "checkbox-indicator",
+			className: "flex items-center justify-center text-current [&_svg]:size-3.5 [&_svg]:shrink-0",
+			children: indeterminate ? /* @__PURE__ */ jsx(Minus, { strokeWidth: 3 }) : /* @__PURE__ */ jsx(Check, { strokeWidth: 3 })
+		})
+	});
+}
+//#endregion
+export { Checkbox$1 as Checkbox };
+
+//# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","names":["Checkbox","BaseCheckbox"],"sources":["../../src/components/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport { Checkbox as BaseCheckbox } from \"@base-ui/react/checkbox\";\nimport { Check, Minus } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Checkbox.\n *\n * Base UI renders a `<span role=\"checkbox\">` with a hidden `<input>` beside\n * it, so it submits with forms and takes `checked`/`defaultChecked`. The\n * indicator only mounts while checked or indeterminate; the icon inside it is\n * a lucide Check, or a Minus when `indeterminate` is set.\n *\n * The 16px box takes half the small radius: the 8px ladder step would round\n * it into a circle.\n */\nexport interface CheckboxProps extends React.ComponentProps<typeof BaseCheckbox.Root> {}\n\nfunction Checkbox({ className, indeterminate, ...props }: CheckboxProps) {\n  return (\n    <BaseCheckbox.Root\n      data-slot=\"checkbox\"\n      indeterminate={indeterminate}\n      className={cn(\n        \"peer inline-flex size-4 shrink-0 items-center justify-center rounded-[calc(var(--ds-radius-sm)/2)] border\",\n        \"border-[var(--ds-input)] bg-[var(--ds-background)]\",\n        \"transition-[background-color,border-color,box-shadow] duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]\",\n        \"outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40\",\n        \"data-[checked]:border-[var(--ds-primary)] data-[checked]:bg-[var(--ds-primary)] data-[checked]:text-[color:var(--ds-primary-foreground)]\",\n        \"data-[indeterminate]:border-[var(--ds-primary)] data-[indeterminate]:bg-[var(--ds-primary)] data-[indeterminate]:text-[color:var(--ds-primary-foreground)]\",\n        \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n        \"aria-invalid:border-[var(--ds-destructive)] aria-invalid:ring-[3px] aria-invalid:ring-[var(--ds-destructive)]/20\",\n        className,\n      )}\n      {...props}\n    >\n      <BaseCheckbox.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"flex items-center justify-center text-current [&_svg]:size-3.5 [&_svg]:shrink-0\"\n      >\n        {indeterminate ? <Minus strokeWidth={3} /> : <Check strokeWidth={3} />}\n      </BaseCheckbox.Indicator>\n    </BaseCheckbox.Root>\n  );\n}\n\nexport { Checkbox };\n"],"mappings":";;;;;;;AAoBA,SAASA,WAAS,EAAE,WAAW,eAAe,GAAG,SAAwB;CACvE,OACE,oBAACC,SAAa,MAAd;EACE,aAAU;EACK;EACf,WAAW,GACT,6GACA,sDACA,sHACA,gFACA,4IACA,8JACA,kEACA,oHACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAACA,SAAa,WAAd;GACE,aAAU;GACV,WAAU;GAET,UAAA,gBAAgB,oBAAC,OAAD,EAAO,aAAa,EAAI,CAAA,IAAI,oBAAC,OAAD,EAAO,aAAa,EAAI,CAAA;EAC/C,CAAA;CACP,CAAA;AAEvB"}

package/dist/components/chip.d.ts

@@ -0,0 +1,17 @@
+"use client";
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+//#region src/components/chip.d.ts
+/**
+ * Chip — a pill for filters, tags and selected values. Unlike Badge it keeps
+ * sentence case and the body font.
+ */
+declare const chipVariants: (props?: ({
+  variant?: "default" | "outline" | "accent" | null | undefined;
+  size?: "default" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ChipProps extends React.ComponentProps<"span">, VariantProps<typeof chipVariants> {}
+declare function Chip({ className, variant, size, ...props }: ChipProps): React.JSX.Element;
+//#endregion
+export { Chip, chipVariants };
+//# sourceMappingURL=chip.d.ts.map

package/dist/components/chip.js

@@ -0,0 +1,47 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/chip.tsx
+/**
+* Chip — a pill for filters, tags and selected values. Unlike Badge it keeps
+* sentence case and the body font.
+*/
+const chipVariants = /* @__PURE__ */ cva([
+	"inline-flex items-center gap-1.5 whitespace-nowrap border font-medium",
+	"rounded-[var(--ds-radius-full)]",
+	"transition-[background-color,border-color,color]",
+	"duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]",
+	"[&_svg]:shrink-0"
+], {
+	variants: {
+		variant: {
+			default: "bg-[var(--ds-hover)] border-[var(--ds-border-subtle)] text-[color:var(--ds-muted-foreground)]",
+			accent: "bg-[var(--ds-primary-soft)] border-[var(--ds-ring)] text-[color:var(--ds-primary)]",
+			outline: "bg-transparent border-[var(--ds-border)] text-[color:var(--ds-muted-foreground)]"
+		},
+		size: {
+			default: "px-2.5 py-1 text-[length:var(--ds-text-caption)] [&_svg]:size-3.5",
+			sm: "px-2 py-0.5 text-[length:var(--ds-text-caption-sm)] [&_svg]:size-3"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+function Chip({ className, variant, size, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "chip",
+		className: cn(chipVariants({
+			variant,
+			size
+		}), className),
+		...props
+	});
+}
+//#endregion
+export { Chip, chipVariants };
+
+//# sourceMappingURL=chip.js.map

package/dist/components/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.js","names":[],"sources":["../../src/components/chip.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Chip — a pill for filters, tags and selected values. Unlike Badge it keeps\n * sentence case and the body font.\n */\nconst chipVariants = /* @__PURE__ */ cva(\n  [\n    \"inline-flex items-center gap-1.5 whitespace-nowrap border font-medium\",\n    \"rounded-[var(--ds-radius-full)]\",\n    \"transition-[background-color,border-color,color]\",\n    \"duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]\",\n    \"[&_svg]:shrink-0\",\n  ],\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-[var(--ds-hover)] border-[var(--ds-border-subtle)] text-[color:var(--ds-muted-foreground)]\",\n        accent: \"bg-[var(--ds-primary-soft)] border-[var(--ds-ring)] text-[color:var(--ds-primary)]\",\n        outline:\n          \"bg-transparent border-[var(--ds-border)] text-[color:var(--ds-muted-foreground)]\",\n      },\n      size: {\n        default: \"px-2.5 py-1 text-[length:var(--ds-text-caption)] [&_svg]:size-3.5\",\n        sm: \"px-2 py-0.5 text-[length:var(--ds-text-caption-sm)] [&_svg]:size-3\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nexport interface ChipProps\n  extends React.ComponentProps<\"span\">, VariantProps<typeof chipVariants> {}\n\nfunction Chip({ className, variant, size, ...props }: ChipProps) {\n  return (\n    <span data-slot=\"chip\" className={cn(chipVariants({ variant, size }), className)} {...props} />\n  );\n}\n\nexport { Chip, chipVariants };\n"],"mappings":";;;;;;;;;;AAUA,MAAM,eAA+B,oBACnC;CACE;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,QAAQ;GACR,SACE;EACJ;EACA,MAAM;GACJ,SAAS;GACT,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;AAKA,SAAS,KAAK,EAAE,WAAW,SAAS,MAAM,GAAG,SAAoB;CAC/D,OACE,oBAAC,QAAD;EAAM,aAAU;EAAO,WAAW,GAAG,aAAa;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AAElG"}

package/dist/components/combobox.d.ts

@@ -0,0 +1,76 @@
+"use client";
+import { Combobox } from "@base-ui/react/combobox";
+import { ReactNode } from "react";
+//#region src/components/combobox.d.ts
+/**
+ * Combobox: a filterable text input with a listbox popup, on Base UI.
+ *
+ * Give the Root `items` (an array, or `[{ value, label }]`) and render the
+ * list with `<ComboboxList>{(item) => <ComboboxItem value={item} />}</ComboboxList>`;
+ * Base UI filters `items` against the input as the user types. Without
+ * `items` nothing is filtered and `ComboboxEmpty` never shows.
+ *
+ * - `ComboboxInput` is our `Input` with a trailing open/close trigger and,
+ *   with `clearable`, an X button that clears the value.
+ * - `ComboboxContent` composes Portal + Positioner + Popup + List so
+ *   consumers write one element; positioning props go to the Positioner.
+ * - Multiple selection: set `multiple` on the Root and wrap `ComboboxValue`
+ *   (rendering a `ComboboxChip` per value) plus `ComboboxInput` in
+ *   `ComboboxChips`. Inside `ComboboxChips` the input drops its own frame;
+ *   the chips container carries the field look and anchors the popup.
+ * - `useComboboxFilter` is Base UI's `useFilter` for external filtering via
+ *   `filteredItems`.
+ *
+ * `onValueChange` receives `(value, eventDetails)`; `onInputValueChange`
+ * reports the typed text.
+ */
+declare function Combobox$1<Value, Multiple extends boolean | undefined = false, Item = Value>(props: Combobox.Root.Props<Value, Multiple, Item>): import("react").JSX.Element;
+declare function ComboboxTrigger({ className, children, ...props }: Combobox.Trigger.Props): import("react").JSX.Element;
+declare function ComboboxClear({ className, children, ...props }: Combobox.Clear.Props): import("react").JSX.Element;
+export interface ComboboxInputProps extends Combobox.Input.Props {
+  /** Show an X button that clears the selection while there is one. */
+  clearable?: boolean;
+  /** Class for the wrapper that holds the input and its buttons. */
+  wrapperClassName?: string;
+}
+declare function ComboboxInput({ className, clearable, wrapperClassName, ...props }: ComboboxInputProps): import("react").JSX.Element;
+declare function ComboboxValue(props: Combobox.Value.Props): import("react").JSX.Element;
+export interface ComboboxChipsProps extends Combobox.Chips.Props {
+  /** Class for the inner chip row; `className` styles the field frame. */
+  chipsClassName?: string;
+}
+declare function ComboboxChips({ className, chipsClassName, children, ...props }: ComboboxChipsProps): import("react").JSX.Element;
+export interface ComboboxChipProps extends Combobox.Chip.Props {
+  /** Hide the remove button. */
+  removable?: boolean;
+}
+declare function ComboboxChip({ className, children, removable, ...props }: ComboboxChipProps): import("react").JSX.Element;
+type PositionerProps = Pick<Combobox.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor" | "collisionBoundary" | "collisionPadding" | "collisionAvoidance" | "sticky" | "positionMethod">;
+export interface ComboboxContentProps extends Omit<Combobox.Popup.Props, "children">, PositionerProps {
+  /** Items, or a render function called per filtered item (needs `items` on the Root). */
+  children?: Combobox.List.Props["children"];
+  /**
+   * Shown (via `ComboboxEmpty`, above the list) when nothing matches the query.
+   * Needs `items` on the Root.
+   */
+  empty?: ReactNode;
+  /** Class for the inner List element. */
+  listClassName?: string;
+  /** Keep the popup mounted in the DOM while hidden. */
+  keepMounted?: boolean;
+  /** Where to portal the popup; defaults to `<body>`. */
+  container?: Combobox.Portal.Props["container"];
+}
+declare function ComboboxContent({ className, children, empty, listClassName, side, align, sideOffset, alignOffset, anchor, collisionBoundary, collisionPadding, collisionAvoidance, sticky, positionMethod, keepMounted, container, ...props }: ComboboxContentProps): import("react").JSX.Element;
+declare function ComboboxItem({ className, children, ...props }: Combobox.Item.Props): import("react").JSX.Element;
+/** Renders per filtered item; use inside a `ComboboxGroup` given `items`, or for a flat list pass a function as `ComboboxContent` children instead. */
+declare function ComboboxCollection(props: Combobox.Collection.Props): import("react").JSX.Element;
+declare function ComboboxEmpty({ className, ...props }: Combobox.Empty.Props): import("react").JSX.Element;
+declare function ComboboxStatus({ className, ...props }: Combobox.Status.Props): import("react").JSX.Element;
+declare function ComboboxGroup({ className, ...props }: Combobox.Group.Props): import("react").JSX.Element;
+declare function ComboboxGroupLabel({ className, ...props }: Combobox.GroupLabel.Props): import("react").JSX.Element;
+declare function ComboboxSeparator({ className, ...props }: Combobox.Separator.Props): import("react").JSX.Element;
+declare const useComboboxFilter: typeof Combobox.useFilter;
+//#endregion
+export { Combobox$1 as Combobox, ComboboxChip, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, useComboboxFilter };
+//# sourceMappingURL=combobox.d.ts.map