@adea-ai/ui 0.60.4 → 0.61.1

package/dist/components/ui/chart/chart.js

@@ -0,0 +1,373 @@
+import { cn } from "../../../lib/utils.js";
+import { Dynamic, className, createComponent, effect, insert, setStyleProperty, template } from "solid-js/web";
+import { For, splitProps } from "solid-js";
+import { Bar, Bubble, Doughnut, Line, Pie, PolarArea, Radar, Scatter } from "solid-chartjs";
+import { ArcElement, BarElement, CategoryScale, Chart, Filler, Legend, LineElement, LinearScale, LogarithmicScale, PointElement, RadialLinearScale, Tooltip } from "chart.js";
+//#region src/components/ui/chart/chart.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<figure><figcaption class="flex items-start justify-between gap-3"><div><h3 class="text-sm font-semibold text-foreground">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<ul>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<li class="flex items-center gap-1.5 text-2xs text-muted-foreground"><span class="size-2 shrink-0 rounded-full"aria-hidden=true>`);
+/**
+* Chart.
+*
+* A thin wrapper over Chart.js, themed through the same CSS custom properties as
+* everything else. The wrapper is thin on purpose: a design system's job here is
+* to make a chart *look like the rest of the application* — the palette, the
+* type scale, the tooltip surface, the grid lines — and not to re-implement
+* scales and axes, which is where a hand-rolled chart goes wrong.
+*
+* ## Registration, and why it is here rather than left to the caller
+*
+* Chart.js is tree-shakeable through explicit registration: nothing is bundled
+* until a controller, a scale or a plugin is registered. That is the whole reason
+* it was chosen over a batteries-included charting library, and it only pays off
+* if the registrations are scoped to what a component actually uses.
+*
+* This module registers the **shared** pieces once — scales, elements, tooltip,
+* legend, filler — and nothing else. The controllers are imported per component
+* so a `LineChart` does not carry the radar controller, and a consumer that
+* imports only `LineChart` gets only that. Measured: see the story for the
+* per-component figures the tree-shaking gate publishes.
+*
+* A caller with a chart type this file does not export registers its own
+* controller with `registerChartPiece`, which is the escape hatch rather than a
+* reason to widen the registration above.
+*
+* ## Theming
+*
+* Colours resolve from `--chart-1` through `--chart-5`, which every theme
+* defines, plus `--chart-grid`, `--chart-axis` and `--chart-label`. That means a
+* chart follows the accent axis, the appearance, and the font axis with no
+* per-chart configuration — and a caller that wants a specific series colour
+* passes it explicitly rather than reaching into the theme.
+*/
+/**
+* Register a piece with Chart.js. The escape hatch for a caller's own chart type.
+*
+* `solid-chartjs` re-exports the typed components but not the registry, so
+* registration comes from `chart.js` itself — which is also the honest place for
+* it, since the registry is Chart.js's global.
+*/
+function registerChartPiece(piece) {
+	Chart.register(piece);
+}
+Chart.register(CategoryScale, LinearScale, LogarithmicScale, RadialLinearScale, PointElement, LineElement, BarElement, ArcElement, Filler, Tooltip, Legend);
+/** The five series colours, in the order a multi-series chart should use them. */
+var chartSeriesColors = [
+	"var(--chart-1)",
+	"var(--chart-2)",
+	"var(--chart-3)",
+	"var(--chart-4)",
+	"var(--chart-5)"
+];
+/**
+* The theme's defaults as Chart.js options.
+*
+* Exported so a caller can spread it and change one thing, rather than
+* restating every colour. Everything a chart draws that is not data — grid,
+* ticks, legend, tooltip — is decided here once, which is what makes two charts
+* in one application look like they came from the same place.
+*/
+function chartOptions(overrides) {
+	return {
+		responsive: true,
+		maintainAspectRatio: false,
+		interaction: {
+			mode: "nearest",
+			intersect: false
+		},
+		plugins: {
+			legend: { labels: {
+				color: "var(--chart-label)",
+				boxWidth: 8,
+				boxHeight: 8,
+				usePointStyle: true,
+				pointStyle: "circle",
+				font: { size: 11 }
+			} },
+			tooltip: {
+				backgroundColor: "var(--popover)",
+				titleColor: "var(--popover-foreground)",
+				bodyColor: "var(--popover-foreground)",
+				borderColor: "var(--border)",
+				borderWidth: 1,
+				padding: 8,
+				cornerRadius: 6,
+				displayColors: true,
+				boxWidth: 8,
+				boxHeight: 8,
+				usePointStyle: true,
+				titleFont: {
+					size: 11,
+					weight: 600
+				},
+				bodyFont: { size: 11 }
+			}
+		},
+		scales: {
+			x: {
+				border: { color: "var(--chart-grid)" },
+				grid: {
+					color: "var(--chart-grid)",
+					drawTicks: false
+				},
+				ticks: {
+					color: "var(--chart-axis)",
+					font: { size: 10 }
+				}
+			},
+			y: {
+				border: { display: false },
+				grid: {
+					color: "var(--chart-grid)",
+					drawTicks: false
+				},
+				ticks: {
+					color: "var(--chart-axis)",
+					font: { size: 10 }
+				}
+			}
+		},
+		...overrides
+	};
+}
+function ChartFrame(props) {
+	const [local] = splitProps(props, [
+		"title",
+		"description",
+		"actions",
+		"children",
+		"class"
+	]);
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild;
+		insert(_el$4, () => local.title);
+		insert(_el$3, () => local.description, null);
+		insert(_el$2, () => local.actions, null);
+		insert(_el$, () => local.children, null);
+		effect(() => className(_el$, cn("grid gap-3 rounded-lg border border-border bg-card p-4", local.class)));
+		return _el$;
+	})();
+}
+/**
+* The data as Chart.js datasets, with the theme's colours applied in order and
+* the series' own colour winning when it has one.
+*
+* `fill: false` and a 2px border are deliberate: a filled line chart is a
+* different chart, and a 1px line at a 12px label size reads as a grid line.
+*/
+function datasetsFor(series, filled) {
+	return series.map((entry, index) => ({
+		label: entry.label,
+		data: [...entry.data],
+		borderColor: entry.color ?? chartSeriesColors[index % chartSeriesColors.length],
+		backgroundColor: entry.color ?? chartSeriesColors[index % chartSeriesColors.length],
+		pointBackgroundColor: entry.color ?? chartSeriesColors[index % chartSeriesColors.length],
+		borderWidth: 2,
+		pointRadius: 0,
+		pointHoverRadius: 4,
+		tension: .3,
+		fill: filled
+	}));
+}
+function seriesOptions(props, extra) {
+	return chartOptions({
+		...extra,
+		...props.stacked ? { scales: {
+			...extra?.scales,
+			x: { stacked: true },
+			y: { stacked: true }
+		} } : {},
+		...props.options
+	});
+}
+/** A line chart. The default for a series over time. */
+function LineChart(props) {
+	return (() => {
+		var _el$5 = _tmpl$2();
+		insert(_el$5, createComponent(Line, {
+			get data() {
+				return {
+					labels: [...props.labels],
+					datasets: datasetsFor(props.series, props.area ?? false)
+				};
+			},
+			get options() {
+				return seriesOptions(props);
+			}
+		}));
+		effect(() => className(_el$5, cn("h-64", props.class)));
+		return _el$5;
+	})();
+}
+/** A bar chart. `stacked` for parts of a whole over categories. */
+function BarChart(props) {
+	return (() => {
+		var _el$6 = _tmpl$2();
+		insert(_el$6, createComponent(Bar, {
+			get data() {
+				return {
+					labels: [...props.labels],
+					datasets: datasetsFor(props.series, true).map((dataset) => ({
+						...dataset,
+						borderWidth: 0,
+						borderRadius: 3
+					}))
+				};
+			},
+			get options() {
+				return seriesOptions(props, { indexAxis: props.horizontal ? "y" : "x" });
+			}
+		}));
+		effect(() => className(_el$6, cn("h-64", props.class)));
+		return _el$6;
+	})();
+}
+/** A scatter plot, for a correlation rather than a series. */
+function ScatterChart(props) {
+	return (() => {
+		var _el$7 = _tmpl$2();
+		insert(_el$7, createComponent(Scatter, {
+			get data() {
+				return { datasets: props.series.map((entry, index) => ({
+					label: entry.label,
+					data: entry.data.map((point) => ({ ...point })),
+					backgroundColor: entry.color ?? chartSeriesColors[index % chartSeriesColors.length],
+					pointRadius: 3,
+					pointHoverRadius: 5
+				})) };
+			},
+			get options() {
+				return chartOptions(props.options);
+			}
+		}));
+		effect(() => className(_el$7, cn("h-64", props.class)));
+		return _el$7;
+	})();
+}
+/** A bubble chart: scatter with a third dimension carried by the radius. */
+function BubbleChart(props) {
+	return (() => {
+		var _el$8 = _tmpl$2();
+		insert(_el$8, createComponent(Bubble, {
+			get data() {
+				return { datasets: props.series.map((entry, index) => ({
+					label: entry.label,
+					data: entry.data.map((point) => ({ ...point })),
+					backgroundColor: entry.color ?? chartSeriesColors[index % chartSeriesColors.length]
+				})) };
+			},
+			get options() {
+				return chartOptions(props.options);
+			}
+		}));
+		effect(() => className(_el$8, cn("h-64", props.class)));
+		return _el$8;
+	})();
+}
+/** A radar chart, for a profile across fixed axes. */
+function RadarChart(props) {
+	return (() => {
+		var _el$9 = _tmpl$2();
+		insert(_el$9, createComponent(Radar, {
+			get data() {
+				return {
+					labels: [...props.labels],
+					datasets: datasetsFor(props.series, true)
+				};
+			},
+			get options() {
+				return seriesOptions(props, { scales: { r: { grid: { color: "var(--chart-grid)" } } } });
+			}
+		}));
+		effect(() => className(_el$9, cn("h-64", props.class)));
+		return _el$9;
+	})();
+}
+/** A polar area chart: radial bars, for a composition. */
+function PolarAreaChart(props) {
+	return (() => {
+		var _el$0 = _tmpl$2();
+		insert(_el$0, createComponent(PolarArea, {
+			get data() {
+				return {
+					labels: [...props.labels],
+					datasets: [{
+						data: [...props.data],
+						backgroundColor: [...chartSeriesColors],
+						borderColor: "var(--card)",
+						borderWidth: 2
+					}]
+				};
+			},
+			get options() {
+				return chartOptions(props.options);
+			}
+		}));
+		effect(() => className(_el$0, cn("h-64", props.class)));
+		return _el$0;
+	})();
+}
+/**
+* A doughnut or a pie, for a composition with few enough slices to name.
+*
+* Both are one component because the only difference is the hole, and a caller
+* choosing between them is choosing a ratio rather than a chart. `cutout` is the
+* hole's share of the radius: 0 is a pie, 60% is the doughnut most dashboards
+* mean. A composition with more than about six slices should be a bar chart —
+* past that, the smallest slices become unreadable and their labels collide.
+*/
+function DonutChart(props) {
+	const component = () => props.cutout === 0 ? Pie : Doughnut;
+	return (() => {
+		var _el$1 = _tmpl$2();
+		insert(_el$1, createComponent(Dynamic, {
+			get component() {
+				return component();
+			},
+			get data() {
+				return {
+					labels: [...props.labels],
+					datasets: [{
+						data: [...props.data],
+						backgroundColor: props.labels.map((_, index) => chartSeriesColors[index % chartSeriesColors.length]),
+						borderColor: "var(--card)",
+						borderWidth: 2
+					}]
+				};
+			},
+			get options() {
+				return chartOptions({
+					...props.options,
+					...props.cutout === 0 ? {} : { cutout: `${props.cutout ?? 60}%` }
+				});
+			}
+		}));
+		effect(() => className(_el$1, cn("h-64", props.class)));
+		return _el$1;
+	})();
+}
+/** A legend built from the same five colours, for a chart whose legend is elsewhere. */
+function ChartLegend(props) {
+	return (() => {
+		var _el$10 = _tmpl$3();
+		insert(_el$10, createComponent(For, {
+			get each() {
+				return props.series;
+			},
+			children: (entry, index) => (() => {
+				var _el$11 = _tmpl$4(), _el$12 = _el$11.firstChild;
+				insert(_el$11, () => entry.label, null);
+				effect((_$p) => setStyleProperty(_el$12, "background", entry.color ?? chartSeriesColors[index() % chartSeriesColors.length]));
+				return _el$11;
+			})()
+		}));
+		effect(() => className(_el$10, cn("flex flex-wrap items-center gap-x-3 gap-y-1", props.class)));
+		return _el$10;
+	})();
+}
+//#endregion
+export { BarChart, BubbleChart, ChartFrame, ChartLegend, DonutChart, LineChart, PolarAreaChart, RadarChart, ScatterChart, chartOptions, chartSeriesColors, registerChartPiece };
+
+//# sourceMappingURL=chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart.js","names":["For","splitProps","JSX","Dynamic","Bar","Bubble","Doughnut","Line","Pie","PolarArea","Radar","Scatter","Chart","ChartJs","ArcElement","BarElement","CategoryScale","Filler","Legend","LineElement","LinearScale","LogarithmicScale","PointElement","RadialLinearScale","Tooltip","ChartTooltip","ChartOptions","ChartType","cn","registerChartPiece","piece","Parameters","register","chartSeriesColors","const","chartOptions","overrides","responsive","maintainAspectRatio","interaction","mode","intersect","plugins","legend","labels","color","boxWidth","boxHeight","usePointStyle","pointStyle","font","size","tooltip","backgroundColor","titleColor","bodyColor","borderColor","borderWidth","padding","cornerRadius","displayColors","titleFont","weight","bodyFont","scales","x","border","grid","drawTicks","ticks","y","display","ChartFrameProps","title","description","actions","Element","children","class","ChartFrame","props","local","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","_$insert","_$effect","_$className","SeriesChartProps","series","label","data","options","stacked","datasetsFor","filled","map","entry","index","length","pointBackgroundColor","pointRadius","pointHoverRadius","tension","fill","seriesOptions","extra","LineChart","area","_el$5","_tmpl$2","_$createComponent","datasets","BarChart","horizontal","_el$6","dataset","borderRadius","indexAxis","ScatterChart","_el$7","point","BubbleChart","r","_el$8","RadarChart","_el$9","PolarAreaChart","_el$0","DonutChart","cutout","component","_el$1","_","ChartLegend","_el$10","_tmpl$3","each","_el$11","_tmpl$4","_el$12","_$p","_$setStyleProperty","ChartJs","ChartTooltip","_$className","_$createComponent","_$setStyleProperty"],"sources":["../../../../src/components/ui/chart/chart.tsx"],"sourcesContent":["import { For, splitProps, type JSX } from 'solid-js'\nimport { Dynamic } from 'solid-js/web'\nimport { Bar, Bubble, Doughnut, Line, Pie, PolarArea, Radar, Scatter } from 'solid-chartjs'\nimport {\n  Chart as ChartJs,\n  ArcElement,\n  BarElement,\n  CategoryScale,\n  Filler,\n  Legend,\n  LineElement,\n  LinearScale,\n  LogarithmicScale,\n  PointElement,\n  RadialLinearScale,\n  Tooltip as ChartTooltip,\n} from 'chart.js'\nimport type { ChartOptions, ChartType } from 'chart.js'\nimport { cn } from '#lib/utils'\n\n/**\n * Chart.\n *\n * A thin wrapper over Chart.js, themed through the same CSS custom properties as\n * everything else. The wrapper is thin on purpose: a design system's job here is\n * to make a chart *look like the rest of the application* — the palette, the\n * type scale, the tooltip surface, the grid lines — and not to re-implement\n * scales and axes, which is where a hand-rolled chart goes wrong.\n *\n * ## Registration, and why it is here rather than left to the caller\n *\n * Chart.js is tree-shakeable through explicit registration: nothing is bundled\n * until a controller, a scale or a plugin is registered. That is the whole reason\n * it was chosen over a batteries-included charting library, and it only pays off\n * if the registrations are scoped to what a component actually uses.\n *\n * This module registers the **shared** pieces once — scales, elements, tooltip,\n * legend, filler — and nothing else. The controllers are imported per component\n * so a `LineChart` does not carry the radar controller, and a consumer that\n * imports only `LineChart` gets only that. Measured: see the story for the\n * per-component figures the tree-shaking gate publishes.\n *\n * A caller with a chart type this file does not export registers its own\n * controller with `registerChartPiece`, which is the escape hatch rather than a\n * reason to widen the registration above.\n *\n * ## Theming\n *\n * Colours resolve from `--chart-1` through `--chart-5`, which every theme\n * defines, plus `--chart-grid`, `--chart-axis` and `--chart-label`. That means a\n * chart follows the accent axis, the appearance, and the font axis with no\n * per-chart configuration — and a caller that wants a specific series colour\n * passes it explicitly rather than reaching into the theme.\n */\n\n/**\n * Register a piece with Chart.js. The escape hatch for a caller's own chart type.\n *\n * `solid-chartjs` re-exports the typed components but not the registry, so\n * registration comes from `chart.js` itself — which is also the honest place for\n * it, since the registry is Chart.js's global.\n */\nexport function registerChartPiece(piece: Parameters<typeof ChartJs.register>[number]): void {\n  ChartJs.register(piece)\n}\n\nChartJs.register(\n  CategoryScale,\n  LinearScale,\n  LogarithmicScale,\n  RadialLinearScale,\n  PointElement,\n  LineElement,\n  BarElement,\n  ArcElement,\n  Filler,\n  ChartTooltip,\n  Legend\n)\n\n/** The five series colours, in the order a multi-series chart should use them. */\nexport const chartSeriesColors = [\n  'var(--chart-1)',\n  'var(--chart-2)',\n  'var(--chart-3)',\n  'var(--chart-4)',\n  'var(--chart-5)',\n] as const\n\n/**\n * The theme's defaults as Chart.js options.\n *\n * Exported so a caller can spread it and change one thing, rather than\n * restating every colour. Everything a chart draws that is not data — grid,\n * ticks, legend, tooltip — is decided here once, which is what makes two charts\n * in one application look like they came from the same place.\n */\nexport function chartOptions(overrides?: ChartOptions): ChartOptions {\n  return {\n    responsive: true,\n    maintainAspectRatio: false,\n    interaction: { mode: 'nearest', intersect: false },\n    plugins: {\n      legend: {\n        labels: {\n          color: 'var(--chart-label)',\n          boxWidth: 8,\n          boxHeight: 8,\n          usePointStyle: true,\n          pointStyle: 'circle',\n          font: { size: 11 },\n        },\n      },\n      tooltip: {\n        backgroundColor: 'var(--popover)',\n        titleColor: 'var(--popover-foreground)',\n        bodyColor: 'var(--popover-foreground)',\n        borderColor: 'var(--border)',\n        borderWidth: 1,\n        padding: 8,\n        cornerRadius: 6,\n        displayColors: true,\n        boxWidth: 8,\n        boxHeight: 8,\n        usePointStyle: true,\n        titleFont: { size: 11, weight: 600 },\n        bodyFont: { size: 11 },\n      },\n    },\n    scales: {\n      x: {\n        border: { color: 'var(--chart-grid)' },\n        grid: { color: 'var(--chart-grid)', drawTicks: false },\n        ticks: { color: 'var(--chart-axis)', font: { size: 10 } },\n      },\n      y: {\n        border: { display: false },\n        grid: { color: 'var(--chart-grid)', drawTicks: false },\n        ticks: { color: 'var(--chart-axis)', font: { size: 10 } },\n      },\n    },\n    ...overrides,\n  }\n}\n\n/** A chart's frame: a bordered surface with a title and an optional description. */\nexport type ChartFrameProps = {\n  /** The chart's title. Required — a chart with no name is not readable. */\n  title: string\n  /** What the chart shows. Announced to assistive technology, and drawn. */\n  description?: string\n  /** Trailing controls. */\n  actions?: JSX.Element\n  children: JSX.Element\n  class?: string\n}\n\nexport function ChartFrame(props: ChartFrameProps) {\n  const [local] = splitProps(props, ['title', 'description', 'actions', 'children', 'class'])\n\n  return (\n    <figure class={cn('grid gap-3 rounded-lg border border-border bg-card p-4', local.class)}>\n      <figcaption class=\"flex items-start justify-between gap-3\">\n        <div>\n          <h3 class=\"text-sm font-semibold text-foreground\">{local.title}</h3>\n          {local.description}\n        </div>\n        {local.actions}\n      </figcaption>\n      {local.children}\n    </figure>\n  )\n}\n\ntype SeriesChartProps = {\n  /** The category labels along the axis. */\n  labels: readonly string[]\n  /** One entry per series. `data` is aligned to `labels`. */\n  series: readonly { label: string; data: readonly number[]; color?: string }[]\n  /** Chart.js options, merged over the theme's defaults. */\n  options?: ChartOptions\n  /** Stack the series. */\n  stacked?: boolean\n  class?: string\n}\n\n/**\n * The data as Chart.js datasets, with the theme's colours applied in order and\n * the series' own colour winning when it has one.\n *\n * `fill: false` and a 2px border are deliberate: a filled line chart is a\n * different chart, and a 1px line at a 12px label size reads as a grid line.\n */\nfunction datasetsFor(series: SeriesChartProps['series'], filled: boolean) {\n  return series.map((entry, index) => ({\n    label: entry.label,\n    data: [...entry.data],\n    borderColor: entry.color ?? chartSeriesColors[index % chartSeriesColors.length],\n    backgroundColor: entry.color ?? chartSeriesColors[index % chartSeriesColors.length],\n    pointBackgroundColor: entry.color ?? chartSeriesColors[index % chartSeriesColors.length],\n    borderWidth: 2,\n    pointRadius: 0,\n    pointHoverRadius: 4,\n    tension: 0.3,\n    fill: filled,\n  }))\n}\n\nfunction seriesOptions(props: SeriesChartProps, extra?: ChartOptions): ChartOptions {\n  return chartOptions({\n    ...extra,\n    ...(props.stacked\n      ? { scales: { ...extra?.scales, x: { stacked: true }, y: { stacked: true } } }\n      : {}),\n    ...props.options,\n  })\n}\n\n/** A line chart. The default for a series over time. */\nexport function LineChart(props: SeriesChartProps & { area?: boolean }) {\n  return (\n    <div class={cn('h-64', props.class)}>\n      <Line\n        data={{\n          labels: [...props.labels],\n          datasets: datasetsFor(props.series, props.area ?? false),\n        }}\n        options={seriesOptions(props)}\n      />\n    </div>\n  )\n}\n\n/** A bar chart. `stacked` for parts of a whole over categories. */\nexport function BarChart(props: SeriesChartProps & { horizontal?: boolean }) {\n  return (\n    <div class={cn('h-64', props.class)}>\n      <Bar\n        data={{\n          labels: [...props.labels],\n          datasets: datasetsFor(props.series, true).map((dataset) => ({\n            ...dataset,\n            borderWidth: 0,\n            borderRadius: 3,\n          })),\n        }}\n        options={seriesOptions(props, { indexAxis: props.horizontal ? 'y' : 'x' })}\n      />\n    </div>\n  )\n}\n\n/** A scatter plot, for a correlation rather than a series. */\nexport function ScatterChart(props: {\n  series: readonly { label: string; data: readonly { x: number; y: number }[]; color?: string }[]\n  options?: ChartOptions\n  class?: string\n}) {\n  return (\n    <div class={cn('h-64', props.class)}>\n      <Scatter\n        data={{\n          datasets: props.series.map((entry, index) => ({\n            label: entry.label,\n            data: entry.data.map((point) => ({ ...point })),\n            backgroundColor: entry.color ?? chartSeriesColors[index % chartSeriesColors.length],\n            pointRadius: 3,\n            pointHoverRadius: 5,\n          })),\n        }}\n        options={chartOptions(props.options)}\n      />\n    </div>\n  )\n}\n\n/** A bubble chart: scatter with a third dimension carried by the radius. */\nexport function BubbleChart(props: {\n  series: readonly {\n    label: string\n    data: readonly { x: number; y: number; r: number }[]\n    color?: string\n  }[]\n  options?: ChartOptions\n  class?: string\n}) {\n  return (\n    <div class={cn('h-64', props.class)}>\n      <Bubble\n        data={{\n          datasets: props.series.map((entry, index) => ({\n            label: entry.label,\n            data: entry.data.map((point) => ({ ...point })),\n            backgroundColor: entry.color ?? chartSeriesColors[index % chartSeriesColors.length],\n          })),\n        }}\n        options={chartOptions(props.options)}\n      />\n    </div>\n  )\n}\n\n/** A radar chart, for a profile across fixed axes. */\nexport function RadarChart(props: SeriesChartProps) {\n  return (\n    <div class={cn('h-64', props.class)}>\n      <Radar\n        data={{ labels: [...props.labels], datasets: datasetsFor(props.series, true) }}\n        options={seriesOptions(props, { scales: { r: { grid: { color: 'var(--chart-grid)' } } } })}\n      />\n    </div>\n  )\n}\n\n/** A polar area chart: radial bars, for a composition. */\nexport function PolarAreaChart(props: {\n  labels: readonly string[]\n  data: readonly number[]\n  options?: ChartOptions\n  class?: string\n}) {\n  return (\n    <div class={cn('h-64', props.class)}>\n      <PolarArea\n        data={{\n          labels: [...props.labels],\n          datasets: [\n            {\n              data: [...props.data],\n              backgroundColor: [...chartSeriesColors],\n              borderColor: 'var(--card)',\n              borderWidth: 2,\n            },\n          ],\n        }}\n        options={chartOptions(props.options)}\n      />\n    </div>\n  )\n}\n\n/**\n * A doughnut or a pie, for a composition with few enough slices to name.\n *\n * Both are one component because the only difference is the hole, and a caller\n * choosing between them is choosing a ratio rather than a chart. `cutout` is the\n * hole's share of the radius: 0 is a pie, 60% is the doughnut most dashboards\n * mean. A composition with more than about six slices should be a bar chart —\n * past that, the smallest slices become unreadable and their labels collide.\n */\nexport function DonutChart(props: {\n  labels: readonly string[]\n  data: readonly number[]\n  /** The hole, as a percentage of the radius. 0 for a pie. */\n  cutout?: number\n  options?: ChartOptions\n  class?: string\n}) {\n  // `Dynamic` rather than a local component accessor: Solid's JSX types require\n  // a component reference, and an accessor returning one is a call in disguise.\n  const component = () => (props.cutout === 0 ? Pie : Doughnut)\n  return (\n    <div class={cn('h-64', props.class)}>\n      <Dynamic\n        component={component()}\n        data={{\n          labels: [...props.labels],\n          datasets: [\n            {\n              data: [...props.data],\n              backgroundColor: props.labels.map(\n                (_, index) => chartSeriesColors[index % chartSeriesColors.length]\n              ),\n              borderColor: 'var(--card)',\n              borderWidth: 2,\n            },\n          ],\n        }}\n        options={chartOptions({\n          ...props.options,\n          ...(props.cutout === 0 ? {} : { cutout: `${props.cutout ?? 60}%` }),\n        })}\n      />\n    </div>\n  )\n}\n\n/** A legend built from the same five colours, for a chart whose legend is elsewhere. */\nexport function ChartLegend(props: {\n  series: readonly { label: string; color?: string }[]\n  class?: string\n}) {\n  return (\n    <ul class={cn('flex flex-wrap items-center gap-x-3 gap-y-1', props.class)}>\n      <For each={props.series}>\n        {(entry, index) => (\n          <li class=\"flex items-center gap-1.5 text-2xs text-muted-foreground\">\n            <span\n              class=\"size-2 shrink-0 rounded-full\"\n              style={{\n                background: entry.color ?? chartSeriesColors[index() % chartSeriesColors.length],\n              }}\n              aria-hidden=\"true\"\n            />\n            {entry.label}\n          </li>\n        )}\n      </For>\n    </ul>\n  )\n}\n\nexport type { ChartType, ChartOptions }\n"],"mappings":"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"}

package/dist/components/ui/chart/index.d.ts

@@ -0,0 +1,2 @@
+export { BarChart, BubbleChart, ChartFrame, ChartLegend, DonutChart, LineChart, PolarAreaChart, RadarChart, ScatterChart, chartOptions, chartSeriesColors, registerChartPiece, type ChartFrameProps, type ChartOptions, type ChartType, } from './chart';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/chart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/chart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,WAAW,EACX,UAAU,EACV,WAAW,EACX,UAAU,EACV,SAAS,EACT,cAAc,EACd,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,SAAS,GACf,MAAM,SAAS,CAAA"}

package/dist/components/ui/checkbox/checkbox.d.ts

@@ -0,0 +1,33 @@
+import { Checkbox as KobalteCheckbox } from '@kobalte/core/checkbox';
+import type { ComponentProps, JSX } from 'solid-js';
+/**
+ * Checkbox.
+ *
+ * Three states: unchecked, checked, and indeterminate. Indeterminate is what a
+ * "select all" box shows when only some rows are selected; Kobalte expresses
+ * it through `checked="indeterminate"` rather than a second boolean, so there
+ * is no way to render a box that is both.
+ *
+ * The paint is `Control` and the value is a real hidden `Input`, so the control
+ * participates in a form submission and in native validation while looking
+ * nothing like a browser checkbox. Focus is tracked by the input, which is why
+ * the ring lives on the control and reads the input's focus state.
+ */
+export type CheckboxProps = Omit<ComponentProps<typeof KobalteCheckbox>, 'children'> & {
+    controlClass?: string;
+    labelClass?: string;
+    descriptionClass?: string;
+    /**
+     * Replaces the control and label. Omit it to get the default control beside
+     * `label` and `description`; supply it to compose the parts yourself.
+     */
+    children?: JSX.Element;
+};
+export declare function Checkbox(props: CheckboxProps): JSX.Element;
+/**
+ * The box's own label. Valid only inside a `<Checkbox>`, for the same reason as
+ * `SwitchLabel`: outside its root there is no control to associate with.
+ */
+export declare function CheckboxLabel(props: ComponentProps<typeof KobalteCheckbox.Label>): JSX.Element;
+export declare function CheckboxDescription(props: ComponentProps<typeof KobalteCheckbox.Description>): JSX.Element;
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/components/ui/checkbox/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAEpE,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAInD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,EAAE,UAAU,CAAC,GAAG;IACrF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB,CAAA;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,eAiD5C;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,eAGhF;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,eAQ5F"}

package/dist/components/ui/checkbox/checkbox.js

@@ -0,0 +1,76 @@
+import { cn } from "../../../lib/utils.js";
+import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
+import { Check, Minus } from "lucide-solid";
+import { splitProps } from "solid-js";
+import { Checkbox } from "@kobalte/core/checkbox";
+//#region src/components/ui/checkbox/checkbox.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div class="grid gap-0.5 leading-none">`);
+function Checkbox$1(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"controlClass",
+		"labelClass",
+		"descriptionClass",
+		"children",
+		"indeterminate",
+		"aria-label",
+		"aria-labelledby"
+	]);
+	return createComponent(Checkbox, mergeProps({ get ["class"]() {
+		return cn("group/checkbox flex items-start gap-2.5", local.class);
+	} }, rest, { get children() {
+		return [
+			createComponent(Checkbox.Input, {
+				get ["aria-label"]() {
+					return local["aria-label"];
+				},
+				get ["aria-labelledby"]() {
+					return local["aria-labelledby"];
+				}
+			}),
+			createComponent(Checkbox.Control, {
+				get ["class"]() {
+					return cn("border-input bg-transparent flex size-4 shrink-0 items-center justify-center rounded-sm border", "transition-[color,box-shadow,border-color,background-color] ease-out outline-none", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", "data-[checked]:bg-primary data-[checked]:border-primary data-[checked]:text-primary-foreground", "data-[indeterminate]:bg-primary data-[indeterminate]:border-primary data-[indeterminate]:text-primary-foreground", "data-[invalid]:border-destructive data-[invalid]:ring-3 data-[invalid]:ring-destructive-subtle", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", local.controlClass);
+				},
+				get children() {
+					return createComponent(Checkbox.Indicator, {
+						"class": "flex items-center justify-center",
+						get children() {
+							return memo(() => !!local.indeterminate)() ? createComponent(Minus, { "class": "size-3" }) : createComponent(Check, { "class": "size-3" });
+						}
+					});
+				}
+			}),
+			memo(() => local.children ?? (() => {
+				var _el$ = _tmpl$();
+				insert(_el$, createComponent(Checkbox.Label, { get ["class"]() {
+					return cn("text-sm font-medium", local.labelClass);
+				} }), null);
+				insert(_el$, createComponent(Checkbox.Description, { get ["class"]() {
+					return cn("text-muted-foreground text-sm", local.descriptionClass);
+				} }), null);
+				return _el$;
+			})())
+		];
+	} }));
+}
+/**
+* The box's own label. Valid only inside a `<Checkbox>`, for the same reason as
+* `SwitchLabel`: outside its root there is no control to associate with.
+*/
+function CheckboxLabel(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return createComponent(Checkbox.Label, mergeProps({ get ["class"]() {
+		return cn("text-sm font-medium", local.class);
+	} }, rest));
+}
+function CheckboxDescription(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return createComponent(Checkbox.Description, mergeProps({ get ["class"]() {
+		return cn("text-muted-foreground text-sm", local.class);
+	} }, rest));
+}
+//#endregion
+export { Checkbox$1 as Checkbox, CheckboxDescription, CheckboxLabel };
+
+//# sourceMappingURL=checkbox.js.map

package/dist/components/ui/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","names":["Checkbox","KobalteCheckbox","Check","Minus","ComponentProps","JSX","splitProps","cn","CheckboxProps","Omit","controlClass","labelClass","descriptionClass","children","Element","props","local","rest","_$createComponent","_$mergeProps","class","Input","aria-label","aria-labelledby","Control","Indicator","_$memo","indeterminate","_el$","_tmpl$","_$insert","Label","Description","CheckboxLabel","CheckboxDescription","Checkbox","_$createComponent","KobalteCheckbox","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/checkbox/checkbox.tsx"],"sourcesContent":["import { Checkbox as KobalteCheckbox } from '@kobalte/core/checkbox'\nimport { Check, Minus } from 'lucide-solid'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Checkbox.\n *\n * Three states: unchecked, checked, and indeterminate. Indeterminate is what a\n * \"select all\" box shows when only some rows are selected; Kobalte expresses\n * it through `checked=\"indeterminate\"` rather than a second boolean, so there\n * is no way to render a box that is both.\n *\n * The paint is `Control` and the value is a real hidden `Input`, so the control\n * participates in a form submission and in native validation while looking\n * nothing like a browser checkbox. Focus is tracked by the input, which is why\n * the ring lives on the control and reads the input's focus state.\n */\nexport type CheckboxProps = Omit<ComponentProps<typeof KobalteCheckbox>, 'children'> & {\n  controlClass?: string\n  labelClass?: string\n  descriptionClass?: string\n  /**\n   * Replaces the control and label. Omit it to get the default control beside\n   * `label` and `description`; supply it to compose the parts yourself.\n   */\n  children?: JSX.Element\n}\n\nexport function Checkbox(props: CheckboxProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'controlClass',\n    'labelClass',\n    'descriptionClass',\n    'children',\n    'indeterminate',\n    'aria-label',\n    'aria-labelledby',\n  ])\n\n  return (\n    <KobalteCheckbox class={cn('group/checkbox flex items-start gap-2.5', local.class)} {...rest}>\n      {/*\n       * The name goes on the input, which is what carries the value and takes\n       * focus. On the Root it would land on a plain div and name nothing — the\n       * box would announce its state with no subject.\n       */}\n      <KobalteCheckbox.Input\n        aria-label={local['aria-label']}\n        aria-labelledby={local['aria-labelledby']}\n      />\n      <KobalteCheckbox.Control\n        class={cn(\n          'border-input bg-transparent flex size-4 shrink-0 items-center justify-center rounded-sm border',\n          'transition-[color,box-shadow,border-color,background-color] ease-out outline-none',\n          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n          'data-[checked]:bg-primary data-[checked]:border-primary data-[checked]:text-primary-foreground',\n          'data-[indeterminate]:bg-primary data-[indeterminate]:border-primary data-[indeterminate]:text-primary-foreground',\n          'data-[invalid]:border-destructive data-[invalid]:ring-3 data-[invalid]:ring-destructive-subtle',\n          'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n          local.controlClass\n        )}\n      >\n        <KobalteCheckbox.Indicator class=\"flex items-center justify-center\">\n          {local.indeterminate ? <Minus class=\"size-3\" /> : <Check class=\"size-3\" />}\n        </KobalteCheckbox.Indicator>\n      </KobalteCheckbox.Control>\n      {local.children ?? (\n        <div class=\"grid gap-0.5 leading-none\">\n          <KobalteCheckbox.Label class={cn('text-sm font-medium', local.labelClass)} />\n          <KobalteCheckbox.Description\n            class={cn('text-muted-foreground text-sm', local.descriptionClass)}\n          />\n        </div>\n      )}\n    </KobalteCheckbox>\n  )\n}\n\n/**\n * The box's own label. Valid only inside a `<Checkbox>`, for the same reason as\n * `SwitchLabel`: outside its root there is no control to associate with.\n */\nexport function CheckboxLabel(props: ComponentProps<typeof KobalteCheckbox.Label>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteCheckbox.Label class={cn('text-sm font-medium', local.class)} {...rest} />\n}\n\nexport function CheckboxDescription(props: ComponentProps<typeof KobalteCheckbox.Description>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteCheckbox.Description\n      class={cn('text-muted-foreground text-sm', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;AA8BA,SAAgBA,WAASe,OAAsB;CAC7C,MAAM,CAACC,OAAOC,QAAQX,WAAWS,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAiB,CAClB;CAED,OAAAG,gBACGjB,UAAekB,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQZ,GAAG,2CAA2CS,MAAMI,KAAK;CAAC,EAAA,GAAMH,MAAI,EAAA,IAAAJ,WAAA;EAAA,OAAA;GAAAK,gBAMzFjB,SAAgBoB,OAAK;IAAA,KAAA,gBAAA;KAAA,OACRL,MAAM;IAAa;IAAA,KAAA,qBAAA;KAAA,OACdA,MAAM;IAAkB;GAAA,CAAA;GAAAE,gBAE1CjB,SAAgBuB,SAAO;IAAA,KAAA,WAAA;KAAA,OACfjB,GACL,kGACA,qFACA,oFACA,kGACA,oHACA,kGACA,iEACAS,MAAMN,YACR;IAAC;IAAA,IAAAG,WAAA;KAAA,OAAAK,gBAEAjB,SAAgBwB,WAAS;MAAA,SAAA;MAAA,IAAAZ,WAAA;OAAA,OACvBa,WAAA,CAAA,CAAAV,MAAMW,aAAa,CAAA,CAAA,IAAAT,gBAAIf,OAAK,EAAA,SAAA,SAAA,CAAA,IAAAe,gBAAsBhB,OAAK,EAAA,SAAA,SAAA,CAAA;MAAkB;KAAA,CAAA;IAAA;GAAA,CAAA;GAAAwB,WAG7EV,MAAMH,mBAAQ;IAAA,IAAAe,OAAAC,OAAA;IAAAC,OAAAF,MAAAV,gBAEVjB,SAAgB8B,OAAK,EAAA,KAAA,WAAA;KAAA,OAAQxB,GAAG,uBAAuBS,MAAML,UAAU;IAAC,EAAA,CAAA,GAAA,IAAA;IAAAmB,OAAAF,MAAAV,gBACxEjB,SAAgB+B,aAAW,EAAA,KAAA,WAAA;KAAA,OACnBzB,GAAG,iCAAiCS,MAAMJ,gBAAgB;IAAC,EAAA,CAAA,GAAA,IAAA;IAAA,OAAAgB;GAAA,EAAA,CAAA,CAGvE;EAAA;CAAA,EAAA,CAAA,CAAA;AAGP;;;;;AAMA,SAAgBK,cAAclB,OAAqD;CACjF,MAAM,CAACC,OAAOC,QAAQX,WAAWS,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBAAQjB,SAAgB8B,OAAKZ,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQZ,GAAG,uBAAuBS,MAAMI,KAAK;CAAC,EAAA,GAAMH,IAAI,CAAA;AACvF;AAEA,SAAgBiB,oBAAoBnB,OAA2D;CAC7F,MAAM,CAACC,OAAOC,QAAQX,WAAWS,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBACGjB,SAAgB+B,aAAWb,WAAA,EAAA,KAAA,WAAA;EAAA,OACnBZ,GAAG,iCAAiCS,MAAMI,KAAK;CAAC,EAAA,GACnDH,IAAI,CAAA;AAGd"}

package/dist/components/ui/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { Checkbox, CheckboxDescription, CheckboxLabel, type CheckboxProps } from './checkbox';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,mBAAmB,EAAE,aAAa,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAA"}

package/dist/components/ui/code-block/code-block.d.ts

@@ -0,0 +1,75 @@
+import { type ComponentProps, type JSX } from 'solid-js';
+/**
+ * CodeBlock.
+ *
+ * A fenced block, rendered as a surface. The library ships no highlighter —
+ * syntax colouring is a large dependency with its own theme format, and a
+ * component that bundled one would force every consumer to pay for it. This
+ * renders the block, its chrome, and its behaviour; a caller that wants
+ * highlighting passes the result through `highlight`, which is the seam a
+ * Shiki/Pierre/Prism integration plugs into.
+ *
+ * Four details are the reason this exists rather than a styled `<pre>`:
+ *
+ * **Copy confirms only on success.** `navigator.clipboard.writeText` rejects
+ * outside a secure context, in a sandboxed frame, and when the document is not
+ * focused. Flipping to a tick unconditionally confirms a copy that did not
+ * happen, and the reader pastes something stale and does not know why. The
+ * rejection is caught and the button reports the failure instead.
+ *
+ * **A tall block repeats its action row at the bottom.** Copying from a block
+ * that is taller than the viewport otherwise costs a scroll back to the top and
+ * another scroll down to where you were. The threshold is a fixed 480px rather
+ * than viewport-relative so the behaviour does not change when the window is
+ * resized.
+ *
+ * **The scroller is focusable and named.** A horizontally scrollable region has
+ * to be reachable by keyboard — this is axe's `scrollable-region-focusable`, and
+ * a region that scrolls but cannot be focused is a WCAG 2.1.1 failure. It is a
+ * `region` with a label rather than a bare `tabindex`, so the tab stop announces
+ * what it is.
+ *
+ * **Resolving a streaming block must not move the reader.** When `complete` is
+ * false the block shows the code it has plus a generating indicator; the
+ * indicator is inside the scroller's own box and does not add a line, because a
+ * block that grows the moment its content resolves shifts everything below it.
+ * If a caller's `highlight` changes the line box, that is the caller's height to
+ * hold — `lineHeight` is a prop for exactly that reason.
+ */
+export type CodeBlockProps = Omit<ComponentProps<'div'>, 'children'> & {
+    code: string;
+    /** The language, shown in the header and used as the region's label. */
+    language?: string;
+    /** The code, transformed — highlighted HTML or a component. Omit for plain text. */
+    highlight?: (code: string) => JSX.Element;
+    /** False while the block is still streaming. Adds a generating indicator. */
+    complete?: boolean;
+    /** A filename or title, shown instead of the language. */
+    title?: string;
+    /** Extra header controls, before the copy button. */
+    actions?: JSX.Element;
+    /** Copy label. Override for a non-English application. */
+    copyLabel?: string;
+    copiedLabel?: string;
+    /** Line height of the rendered code. Set it when `highlight` changes the box. */
+    lineHeight?: string;
+    /** A line-number gutter. Off by default; a short snippet rarely needs one. */
+    showLineNumbers?: boolean;
+    /** The height above which the action row is repeated below the block. */
+    tallThreshold?: number;
+};
+/** The height a block must exceed before its actions are repeated. */
+export declare const TALL_CODE_BLOCK_PX = 480;
+export declare function CodeBlock(props: CodeBlockProps): JSX.Element;
+/**
+ * InlineCode.
+ *
+ * The `code` inside a sentence. It is a component rather than a class because it
+ * has to hold three properties at once: it must not break the line's rhythm
+ * (`font-size: 0.9em`, so it tracks the surrounding text), it must wrap rather
+ * than overflow a narrow column (`overflow-wrap: anywhere` — an identifier with
+ * no spaces is one long token), and it must be legible against whatever surface
+ * it lands on, which is why the fill is a token and not a fixed grey.
+ */
+export declare function InlineCode(props: ComponentProps<'code'>): JSX.Element;
+//# sourceMappingURL=code-block.d.ts.map

package/dist/components/ui/code-block/code-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/code-block/code-block.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,cAAc,EACnB,KAAK,GAAG,EACT,MAAM,UAAU,CAAA;AAKjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACrE,IAAI,EAAE,MAAM,CAAA;IACZ,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,oFAAoF;IACpF,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG,CAAC,OAAO,CAAA;IACzC,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qDAAqD;IACrD,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACrB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iFAAiF;IACjF,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,8EAA8E;IAC9E,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,yEAAyE;IACzE,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,sEAAsE;AACtE,eAAO,MAAM,kBAAkB,MAAM,CAAA;AAkBrC,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAyH9C;AAED;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,eAYvD"}