@kodffe/ui 0.0.0-stage → 0.10.1

package/dist/card/insight-card.js

@@ -0,0 +1,51 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Glyph as t } from "../lib/glyphs.js";
+import { Avatar as n } from "../data-display/avatar.js";
+import { ChipList as r } from "../data-display/insights.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import "react";
+//#region src/card/insight-card.tsx
+function o({ name: o, handle: s, avatarSrc: c, summary: l, topics: u, action: d, headingLevel: f = 3, className: p }) {
+	let m = `h${f}`;
+	return /* @__PURE__ */ a("article", {
+		className: e("grid content-start gap-3 rounded-lg border border-border bg-surface p-card font-sans", p),
+		children: [
+			/* @__PURE__ */ a("div", {
+				className: "flex items-center gap-3",
+				children: [/* @__PURE__ */ i(n, {
+					name: o,
+					src: c,
+					size: "md",
+					decorative: !0
+				}), /* @__PURE__ */ a("div", {
+					className: "grid min-w-0",
+					children: [/* @__PURE__ */ i(m, {
+						className: "m-0 truncate text-[15px] font-semibold text-fg",
+						children: o
+					}), s && /* @__PURE__ */ i("span", {
+						className: "truncate text-xs text-fg-muted",
+						children: s
+					})]
+				})]
+			}),
+			/* @__PURE__ */ i("p", {
+				className: "m-0 line-clamp-3 text-sm text-fg-muted",
+				children: l
+			}),
+			u && u.length > 0 && /* @__PURE__ */ i(r, { items: u }),
+			d && /* @__PURE__ */ a("a", {
+				href: d.href,
+				className: "inline-flex w-fit items-center gap-1 rounded-xs text-sm font-semibold text-link no-underline hover:underline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus",
+				children: [d.label, /* @__PURE__ */ i(t, {
+					name: "chevron-right",
+					size: 14
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { o as InsightCard };
+
+//# sourceMappingURL=insight-card.js.map

package/dist/card/insight-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"insight-card.js","names":["InsightCard","H","headingLevel","cx","className","Avatar","avatarSrc","name","handle","summary","topics","ChipList","action","Glyph"],"sources":["../../src/card/insight-card.tsx"],"sourcesContent":["'use client';\nimport { type ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { Glyph } from '../lib/glyphs';\nimport { Avatar } from '../data-display/avatar';\nimport { ChipList, type ChipListItem } from '../data-display/insights';\n\n/* ---------------- InsightCard ---------------- */\n\nexport interface InsightCardProps {\n  name: string;\n  /** \"@ana\" or a role. */\n  handle?: string;\n  avatarSrc?: string;\n  /** Clamped to three lines. */\n  summary: ReactNode;\n  topics?: ChipListItem[];\n  action?: { label: string; href: string };\n  headingLevel?: 2 | 3;\n  className?: string;\n}\n\n/** A person's AI summary in a grid: avatar, name and handle, a clamped summary, topics and a link to the profile. */\nexport function InsightCard({\n  name,\n  handle,\n  avatarSrc,\n  summary,\n  topics,\n  action,\n  headingLevel = 3,\n  className,\n}: InsightCardProps) {\n  const H = `h${headingLevel}` as const;\n  return (\n    <article\n      className={cx('grid content-start gap-3 rounded-lg border border-border bg-surface p-card font-sans', className)}\n    >\n      <div className=\"flex items-center gap-3\">\n        <Avatar name={name} src={avatarSrc} size=\"md\" decorative />\n        <div className=\"grid min-w-0\">\n          <H className=\"m-0 truncate text-[15px] font-semibold text-fg\">{name}</H>\n          {handle && <span className=\"truncate text-xs text-fg-muted\">{handle}</span>}\n        </div>\n      </div>\n      <p className=\"m-0 line-clamp-3 text-sm text-fg-muted\">{summary}</p>\n      {topics && topics.length > 0 && <ChipList items={topics} />}\n      {action && (\n        <a\n          href={action.href}\n          className=\"inline-flex w-fit items-center gap-1 rounded-xs text-sm font-semibold text-link no-underline hover:underline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus\"\n        >\n          {action.label}\n          <Glyph name=\"chevron-right\" size={14} />\n        </a>\n      )}\n    </article>\n  );\n}\n"],"mappings":";;;;;;;;AAuBA,SAAgBA,EAAY,EAC1B,SACA,WACA,cACA,YACA,WACA,WACA,kBAAe,GACf,gBACmB;CACnB,IAAMC,IAAI,IAAIC;CACd,OACE,kBAAC,WAAD;EACE,WAAWC,EAAG,wFAAwFC,CAAS;EADjH,UAAA;GAGE,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAACC,GAAD;KAAc;KAAM,KAAKC;KAAW,MAAK;KAAK,YAAA;IAAY,CAAA,GAC1D,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,kBAACL,GAAD;MAAG,WAAU;MAAkD,UAAAM;KAAQ,CAAA,GACtEC,KAAU,kBAAC,QAAD;MAAM,WAAU;MAAkC,UAAAA;KAAa,CAAA,CACvE;IACF,CAAA,CAAA;;GACL,kBAAC,KAAD;IAAG,WAAU;IAA0C,UAAAC;GAAW,CAAA;GACjEC,KAAUA,EAAO,SAAS,KAAK,kBAACC,GAAD,EAAU,OAAOD,EAAS,CAAA;GACzDE,KACC,kBAAC,KAAD;IACE,MAAMA,EAAO;IACb,WAAU;IAFZ,UAAA,CAIGA,EAAO,OACR,kBAACC,GAAD;KAAO,MAAK;KAAgB,MAAM;IAAK,CAAA,CACtC;;EAEE;;AAEb"}

package/dist/card/integration-card.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+import type { IconName } from '../icon/icon';
+export type IntegrationStatus = 'connected' | 'off' | 'not-connected';
+export interface IntegrationCardProps {
+    name: string;
+    description?: ReactNode;
+    /** A brand icon (`b-slack`) or any logo element. */
+    logo: IconName | ReactNode;
+    status: IntegrationStatus;
+    /** Details when connected (account, last sync). */
+    children?: ReactNode;
+    /** Buttons: Connect, Sync now, Disconnect… */
+    actions?: ReactNode;
+    labels?: Partial<Record<IntegrationStatus, string>>;
+    headingLevel?: 2 | 3;
+    className?: string;
+}
+/** One connected app: logo, name, description, status, details and actions (Apps and integrations pages). */
+export declare function IntegrationCard({ name, description, logo, status, children, actions, labels, headingLevel, className, }: IntegrationCardProps): import("react").JSX.Element;

package/dist/card/integration-card.js

@@ -0,0 +1,70 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Badge as t } from "../badge/badge.js";
+import { IconTile as n } from "../icon/icon-tile.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import "react";
+//#region src/card/integration-card.tsx
+var a = {
+	connected: {
+		variant: "success",
+		label: "Connected"
+	},
+	off: {
+		variant: "warning",
+		label: "Turned off"
+	},
+	"not-connected": {
+		variant: "neutral",
+		label: "Not connected"
+	}
+};
+function o({ name: o, description: s, logo: c, status: l, children: u, actions: d, labels: f = {}, headingLevel: p = 3, className: m }) {
+	let h = `h${p}`, g = a[l];
+	return /* @__PURE__ */ i("article", {
+		className: e("grid content-start gap-4 rounded-lg border border-border bg-surface p-card font-sans", m),
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: "flex items-start gap-3",
+				children: [typeof c == "string" ? /* @__PURE__ */ r(n, {
+					icon: c,
+					size: "lg",
+					tone: "outline"
+				}) : /* @__PURE__ */ r("span", {
+					"aria-hidden": "true",
+					className: "grid size-12 shrink-0 place-items-center rounded-md border border-border bg-bg",
+					children: c
+				}), /* @__PURE__ */ i("div", {
+					className: "grid min-w-0 flex-1 gap-1",
+					children: [/* @__PURE__ */ i("div", {
+						className: "flex flex-wrap items-center gap-2",
+						children: [/* @__PURE__ */ r(h, {
+							className: "m-0 text-base font-semibold text-fg",
+							children: o
+						}), /* @__PURE__ */ r(t, {
+							variant: g.variant,
+							appearance: "soft",
+							dot: l !== "not-connected",
+							children: f[l] ?? g.label
+						})]
+					}), s && /* @__PURE__ */ r("p", {
+						className: "m-0 text-sm text-pretty text-fg-muted",
+						children: s
+					})]
+				})]
+			}),
+			u && /* @__PURE__ */ r("div", {
+				className: "rounded-md bg-surface-muted p-3 text-sm text-fg-muted",
+				children: u
+			}),
+			d && /* @__PURE__ */ r("div", {
+				className: "flex flex-wrap gap-2",
+				children: d
+			})
+		]
+	});
+}
+//#endregion
+export { o as IntegrationCard };
+
+//# sourceMappingURL=integration-card.js.map

package/dist/card/integration-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"integration-card.js","names":["STATUS","IntegrationCard","H","headingLevel","s","status","cx","className","logo","IconTile","name","Badge","labels","description","children","actions"],"sources":["../../src/card/integration-card.tsx"],"sourcesContent":["'use client';\nimport { type ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { IconTile } from '../icon/icon-tile';\nimport type { IconName } from '../icon/icon';\nimport { Badge } from '../badge/badge';\n\n/* ---------------- IntegrationCard ---------------- */\n\nexport type IntegrationStatus = 'connected' | 'off' | 'not-connected';\n\nexport interface IntegrationCardProps {\n  name: string;\n  description?: ReactNode;\n  /** A brand icon (`b-slack`) or any logo element. */\n  logo: IconName | ReactNode;\n  status: IntegrationStatus;\n  /** Details when connected (account, last sync). */\n  children?: ReactNode;\n  /** Buttons: Connect, Sync now, Disconnect… */\n  actions?: ReactNode;\n  labels?: Partial<Record<IntegrationStatus, string>>;\n  headingLevel?: 2 | 3;\n  className?: string;\n}\n\nconst STATUS = {\n  connected: { variant: 'success', label: 'Connected' },\n  off: { variant: 'warning', label: 'Turned off' },\n  'not-connected': { variant: 'neutral', label: 'Not connected' },\n} as const;\n\n/** One connected app: logo, name, description, status, details and actions (Apps and integrations pages). */\nexport function IntegrationCard({\n  name,\n  description,\n  logo,\n  status,\n  children,\n  actions,\n  labels = {},\n  headingLevel = 3,\n  className,\n}: IntegrationCardProps) {\n  const H = `h${headingLevel}` as const;\n  const s = STATUS[status];\n  return (\n    <article\n      className={cx('grid content-start gap-4 rounded-lg border border-border bg-surface p-card font-sans', className)}\n    >\n      <div className=\"flex items-start gap-3\">\n        {typeof logo === 'string' ? (\n          <IconTile icon={logo as IconName} size=\"lg\" tone=\"outline\" />\n        ) : (\n          <span\n            aria-hidden=\"true\"\n            className=\"grid size-12 shrink-0 place-items-center rounded-md border border-border bg-bg\"\n          >\n            {logo}\n          </span>\n        )}\n        <div className=\"grid min-w-0 flex-1 gap-1\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <H className=\"m-0 text-base font-semibold text-fg\">{name}</H>\n            <Badge variant={s.variant} appearance=\"soft\" dot={status !== 'not-connected'}>\n              {labels[status] ?? s.label}\n            </Badge>\n          </div>\n          {description && <p className=\"m-0 text-sm text-pretty text-fg-muted\">{description}</p>}\n        </div>\n      </div>\n      {children && <div className=\"rounded-md bg-surface-muted p-3 text-sm text-fg-muted\">{children}</div>}\n      {actions && <div className=\"flex flex-wrap gap-2\">{actions}</div>}\n    </article>\n  );\n}\n"],"mappings":";;;;;;;AA0BA,IAAMA,IAAS;CACb,WAAW;EAAE,SAAS;EAAW,OAAO;CAAY;CACpD,KAAK;EAAE,SAAS;EAAW,OAAO;CAAa;CAC/C,iBAAiB;EAAE,SAAS;EAAW,OAAO;CAAgB;AAChE;AAGA,SAAgBC,EAAgB,EAC9B,SACA,gBACA,SACA,WACA,aACA,YACA,YAAS,CAAC,GACV,kBAAe,GACf,gBACuB;CACvB,IAAMC,IAAI,IAAIC,KACRC,IAAIJ,EAAOK;CACjB,OACE,kBAAC,WAAD;EACE,WAAWC,EAAG,wFAAwFC,CAAS;EADjH,UAAA;GAGE,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,OAAOC,KAAS,WACf,kBAACC,GAAD;KAAU,MAAMD;KAAkB,MAAK;KAAK,MAAK;IAAW,CAAA,IAE5D,kBAAC,QAAD;KACE,eAAY;KACZ,WAAU;KAET,UAAAA;IACG,CAAA,GAER,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,kBAACN,GAAD;OAAG,WAAU;OAAuC,UAAAQ;MAAQ,CAAA,GAC5D,kBAACC,GAAD;OAAO,SAASP,EAAE;OAAS,YAAW;OAAO,KAAKC,MAAW;OAC1D,UAAAO,EAAOP,MAAWD,EAAE;MAChB,CAAA,CACJ;KACJ,CAAA,GAAAS,KAAe,kBAAC,KAAD;MAAG,WAAU;MAAyC,UAAAA;KAAe,CAAA,CAClF;IACF,CAAA,CAAA;;GACJC,KAAY,kBAAC,OAAD;IAAK,WAAU;IAAyD;GAAc,CAAA;GAClGC,KAAW,kBAAC,OAAD;IAAK,WAAU;IAAwB,UAAAA;GAAa,CAAA;EACzD;;AAEb"}

package/dist/charts/charts.d.ts

@@ -0,0 +1,75 @@
+import { type ReactNode } from 'react';
+export declare const CHART_COLORS: string[];
+export interface ChartSeries {
+    /** Key in each data row. */
+    key: string;
+    label: string;
+    /** CSS color; defaults to the next --kf-chart-* token. */
+    color?: string;
+}
+type Row = Record<string, string | number | null | undefined>;
+interface BaseChartProps {
+    data: Row[];
+    /** Key of the category / x-axis value (e.g. "month"). */
+    index: string;
+    series: ChartSeries[];
+    /** Visible title; also names the chart for screen readers. */
+    title: ReactNode;
+    /** Plain-text title when `title` is not a string. */
+    ariaTitle?: string;
+    /** One-sentence takeaway ("Runs grew 38% in October"). */
+    description?: ReactNode;
+    height?: number;
+    /** Formats values on the axis, tooltip and data table (e.g. currency, %). */
+    valueFormatter?: (value: number) => string;
+    /** Formats the index on the axis and tooltip (e.g. dates). */
+    indexFormatter?: (value: string | number) => string;
+    showLegend?: boolean;
+    showGrid?: boolean;
+    /** Extra content in the header (e.g. a Tabs period switch). */
+    actions?: ReactNode;
+    /** A summary line under the chart ("Busiest day · Wednesday 381"). */
+    footer?: ReactNode;
+    className?: string;
+}
+export interface LineChartProps extends BaseChartProps {
+    /** Smooth curves (default) or straight segments. */
+    curve?: 'monotone' | 'linear';
+}
+/** Trends over time (runs per day, response time). */
+export declare function LineChart({ data, index, series, height, valueFormatter, indexFormatter, showLegend, showGrid, curve, ...frame }: LineChartProps): import("react").JSX.Element;
+export interface AreaChartProps extends BaseChartProps {
+    stacked?: boolean;
+}
+/** Volumes over time, optionally stacked (runs by workflow). */
+export declare function AreaChart({ data, index, series, height, valueFormatter, indexFormatter, showLegend, showGrid, stacked, ...frame }: AreaChartProps): import("react").JSX.Element;
+export interface BarChartProps extends BaseChartProps {
+    stacked?: boolean;
+    /** Horizontal bars for long category names (rankings). */
+    layout?: 'vertical-bars' | 'horizontal-bars';
+    /** A series plotted against a second axis on the right (tasks left, hours right). Vertical bars only. */
+    secondaryAxis?: string;
+    /** Formats the right axis (defaults to `valueFormatter`). */
+    secondaryValueFormatter?: (value: number) => string;
+    /** One category color per bar (a single series compared across categories). */
+    colorByCategory?: boolean;
+}
+export declare const CATEGORY_CHART_COLORS: string[];
+/** Comparisons between categories (hours saved by workflow, runs per month). */
+export declare function BarChart({ data, index, series, height, valueFormatter, indexFormatter, showLegend, showGrid, stacked, layout, secondaryAxis, secondaryValueFormatter, colorByCategory, ...frame }: BarChartProps): import("react").JSX.Element;
+export interface DonutChartProps extends Omit<BaseChartProps, 'series' | 'index' | 'showGrid' | 'indexFormatter'> {
+    /** Key of the slice name. */
+    index: string;
+    /** Key of the slice value. */
+    valueKey: string;
+    /** Big number in the center (e.g. the total). */
+    centerLabel?: ReactNode;
+    /** Slice colors (default: the chart tokens). Pass `CATEGORY_CHART_COLORS` for more than five slices. */
+    colors?: string[];
+    /** Adds a percentage column to the legend. */
+    showPercent?: boolean;
+    centerSubLabel?: ReactNode;
+}
+/** Share of a whole with 2–5 slices (runs by status). For more categories use BarChart. */
+export declare function DonutChart({ data, index, valueKey, height, valueFormatter, centerLabel, centerSubLabel, showLegend, colors, showPercent, ...frame }: DonutChartProps): import("react").JSX.Element;
+export {};

package/dist/charts/charts.js

@@ -0,0 +1,453 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { useMediaQuery as t } from "../lib/use-media-query.js";
+import { StatusLegend as n } from "../data-display/insights.js";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useId as o } from "react";
+import { Area as s, AreaChart as c, Bar as l, BarChart as u, CartesianGrid as d, Cell as f, Line as p, LineChart as m, Pie as h, PieChart as g, ResponsiveContainer as _, Tooltip as v, XAxis as y, YAxis as b } from "recharts";
+//#region src/charts/charts.tsx
+var x = () => !t("(prefers-reduced-motion: reduce)", !1), S = [
+	"var(--kf-chart-1)",
+	"var(--kf-chart-2)",
+	"var(--kf-chart-3)",
+	"var(--kf-chart-4)",
+	"var(--kf-chart-5)"
+], C = (e, t) => e.color ?? S[t % S.length], w = (e, t) => typeof t == "number" ? e ? e(t) : t.toLocaleString() : String(t ?? "—"), T = {
+	stroke: "var(--kf-fg-muted)",
+	fontSize: 12,
+	tickLine: !1,
+	axisLine: !1
+};
+function E({ title: t, ariaTitle: r, description: s, actions: c, showLegend: l, series: u, className: d, children: f, table: p, footer: m }) {
+	let h = o();
+	return /* @__PURE__ */ a("figure", {
+		"aria-labelledby": `${h}-t`,
+		className: e("m-0 grid gap-4 rounded-lg border border-border bg-surface p-5 font-sans text-fg", d),
+		children: [
+			/* @__PURE__ */ a("figcaption", {
+				className: "flex flex-wrap items-start justify-between gap-3",
+				children: [/* @__PURE__ */ a("div", {
+					className: "grid gap-0.5",
+					children: [/* @__PURE__ */ i("span", {
+						id: `${h}-t`,
+						className: "font-display text-base font-bold",
+						children: t
+					}), s && /* @__PURE__ */ i("span", {
+						className: "text-sm text-fg-muted",
+						children: s
+					})]
+				}), c]
+			}),
+			l && u.length > 1 && /* @__PURE__ */ i("div", {
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ i(n, { items: u.map((e, t) => ({
+					label: e.label,
+					color: C(e, t)
+				})) })
+			}),
+			/* @__PURE__ */ i("div", {
+				"aria-hidden": "true",
+				className: "min-w-0",
+				children: f
+			}),
+			m && /* @__PURE__ */ i("div", {
+				className: "border-t border-border pt-3 text-sm text-fg-muted",
+				children: m
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "sr-only",
+				children: [r && /* @__PURE__ */ i("span", { children: r }), p]
+			})
+		]
+	});
+}
+function D({ data: e, index: t, series: n, valueFormatter: r, indexFormatter: o, caption: s }) {
+	return /* @__PURE__ */ a("table", { children: [
+		/* @__PURE__ */ i("caption", { children: s }),
+		/* @__PURE__ */ i("thead", { children: /* @__PURE__ */ a("tr", { children: [/* @__PURE__ */ i("th", {
+			scope: "col",
+			children: t
+		}), n.map((e) => /* @__PURE__ */ i("th", {
+			scope: "col",
+			children: e.label
+		}, e.key))] }) }),
+		/* @__PURE__ */ i("tbody", { children: e.map((e, s) => /* @__PURE__ */ a("tr", { children: [/* @__PURE__ */ i("th", {
+			scope: "row",
+			children: o ? o(e[t]) : String(e[t])
+		}), n.map((t) => /* @__PURE__ */ i("td", { children: w(r, e[t.key]) }, t.key))] }, s)) })
+	] });
+}
+function O({ active: e, payload: t, label: n, series: r, valueFormatter: o, indexFormatter: s }) {
+	return !e || !t?.length ? null : /* @__PURE__ */ a("div", {
+		className: "grid min-w-36 gap-1.5 rounded-md border border-border bg-surface px-3 py-2 font-sans text-sm text-fg shadow-overlay",
+		children: [n !== void 0 && /* @__PURE__ */ i("span", {
+			className: "font-semibold",
+			children: s ? s(n) : n
+		}), t.map((e) => {
+			let t = r.findIndex((t) => t.key === e.dataKey), n = r[t];
+			return /* @__PURE__ */ a("span", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ i("span", {
+						className: "size-2.5 shrink-0 rounded-full",
+						style: { background: n ? C(n, t) : e.color }
+					}),
+					/* @__PURE__ */ i("span", {
+						className: "flex-1 text-fg-muted",
+						children: n?.label ?? e.dataKey
+					}),
+					/* @__PURE__ */ i("span", {
+						className: "font-semibold tabular-nums",
+						children: w(o, e.value)
+					})
+				]
+			}, String(e.dataKey));
+		})]
+	});
+}
+function k(e, t) {
+	return t ?? (typeof e == "string" ? e : "Chart");
+}
+function A({ data: e, index: t, series: n, height: r = 260, valueFormatter: o, indexFormatter: s, showLegend: c = !0, showGrid: l = !0, curve: u = "monotone", ...f }) {
+	let h = x();
+	return /* @__PURE__ */ i(E, {
+		...f,
+		series: n,
+		showLegend: c,
+		table: /* @__PURE__ */ i(D, {
+			caption: k(f.title, f.ariaTitle),
+			data: e,
+			index: t,
+			series: n,
+			valueFormatter: o,
+			indexFormatter: s
+		}),
+		children: /* @__PURE__ */ i(_, {
+			width: "100%",
+			height: r,
+			children: /* @__PURE__ */ a(m, {
+				accessibilityLayer: !1,
+				data: e,
+				margin: {
+					top: 8,
+					right: 8,
+					bottom: 0,
+					left: 0
+				},
+				children: [
+					l && /* @__PURE__ */ i(d, {
+						stroke: "var(--kf-border)",
+						vertical: !1
+					}),
+					/* @__PURE__ */ i(y, {
+						dataKey: t,
+						...T,
+						tickFormatter: s,
+						minTickGap: 16
+					}),
+					/* @__PURE__ */ i(b, {
+						...T,
+						width: 48,
+						tickFormatter: o
+					}),
+					/* @__PURE__ */ i(v, {
+						cursor: { stroke: "var(--kf-border)" },
+						content: /* @__PURE__ */ i(O, {
+							series: n,
+							valueFormatter: o,
+							indexFormatter: s
+						})
+					}),
+					n.map((e, t) => /* @__PURE__ */ i(p, {
+						isAnimationActive: h,
+						type: u,
+						dataKey: e.key,
+						name: e.label,
+						stroke: C(e, t),
+						strokeWidth: 2.5,
+						dot: !1,
+						activeDot: {
+							r: 5,
+							strokeWidth: 0
+						}
+					}, e.key))
+				]
+			})
+		})
+	});
+}
+function j({ data: e, index: t, series: n, height: r = 260, valueFormatter: l, indexFormatter: u, showLegend: f = !0, showGrid: p = !0, stacked: m, ...h }) {
+	let g = x(), S = o().replace(/:/g, "");
+	return /* @__PURE__ */ i(E, {
+		...h,
+		series: n,
+		showLegend: f,
+		table: /* @__PURE__ */ i(D, {
+			caption: k(h.title, h.ariaTitle),
+			data: e,
+			index: t,
+			series: n,
+			valueFormatter: l,
+			indexFormatter: u
+		}),
+		children: /* @__PURE__ */ i(_, {
+			width: "100%",
+			height: r,
+			children: /* @__PURE__ */ a(c, {
+				accessibilityLayer: !1,
+				data: e,
+				margin: {
+					top: 8,
+					right: 8,
+					bottom: 0,
+					left: 0
+				},
+				children: [
+					/* @__PURE__ */ i("defs", { children: n.map((e, t) => /* @__PURE__ */ a("linearGradient", {
+						id: `${S}-${t}`,
+						x1: "0",
+						x2: "0",
+						y1: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ i("stop", {
+							offset: "0%",
+							stopColor: C(e, t),
+							stopOpacity: .35
+						}), /* @__PURE__ */ i("stop", {
+							offset: "100%",
+							stopColor: C(e, t),
+							stopOpacity: .02
+						})]
+					}, e.key)) }),
+					p && /* @__PURE__ */ i(d, {
+						stroke: "var(--kf-border)",
+						vertical: !1
+					}),
+					/* @__PURE__ */ i(y, {
+						dataKey: t,
+						...T,
+						tickFormatter: u,
+						minTickGap: 16
+					}),
+					/* @__PURE__ */ i(b, {
+						...T,
+						width: 48,
+						tickFormatter: l
+					}),
+					/* @__PURE__ */ i(v, {
+						cursor: { stroke: "var(--kf-border)" },
+						content: /* @__PURE__ */ i(O, {
+							series: n,
+							valueFormatter: l,
+							indexFormatter: u
+						})
+					}),
+					n.map((e, t) => /* @__PURE__ */ i(s, {
+						isAnimationActive: g,
+						type: "monotone",
+						dataKey: e.key,
+						name: e.label,
+						stackId: m ? "a" : void 0,
+						stroke: C(e, t),
+						strokeWidth: 2,
+						fill: `url(#${S}-${t})`
+					}, e.key))
+				]
+			})
+		})
+	});
+}
+var M = Array.from({ length: 12 }, (e, t) => `var(--kf-category-${t + 1})`);
+function N({ data: e, index: t, series: n, height: o = 260, valueFormatter: s, indexFormatter: c, showLegend: p = !0, showGrid: m = !0, stacked: h, layout: g = "vertical-bars", secondaryAxis: S, secondaryValueFormatter: w, colorByCategory: A, ...j }) {
+	let N = x(), P = g === "horizontal-bars", F = !P && !!S && n.some((e) => e.key === S);
+	return /* @__PURE__ */ i(E, {
+		...j,
+		series: n,
+		showLegend: p,
+		table: /* @__PURE__ */ i(D, {
+			caption: k(j.title, j.ariaTitle),
+			data: e,
+			index: t,
+			series: n,
+			valueFormatter: s,
+			indexFormatter: c
+		}),
+		children: /* @__PURE__ */ i(_, {
+			width: "100%",
+			height: o,
+			children: /* @__PURE__ */ a(u, {
+				accessibilityLayer: !1,
+				data: e,
+				layout: P ? "vertical" : "horizontal",
+				margin: {
+					top: 8,
+					right: 8,
+					bottom: 0,
+					left: 0
+				},
+				barCategoryGap: "22%",
+				children: [
+					m && /* @__PURE__ */ i(d, {
+						stroke: "var(--kf-border)",
+						vertical: P,
+						horizontal: !P,
+						...P ? {} : { yAxisId: "left" }
+					}),
+					P ? /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(y, {
+						type: "number",
+						...T,
+						tickFormatter: s
+					}), /* @__PURE__ */ i(b, {
+						type: "category",
+						dataKey: t,
+						...T,
+						width: 112,
+						tickFormatter: c
+					})] }) : /* @__PURE__ */ a(r, { children: [
+						/* @__PURE__ */ i(y, {
+							dataKey: t,
+							...T,
+							tickFormatter: c,
+							minTickGap: 8
+						}),
+						/* @__PURE__ */ i(b, {
+							yAxisId: "left",
+							...T,
+							width: 48,
+							tickFormatter: s
+						}),
+						F && /* @__PURE__ */ i(b, {
+							yAxisId: "right",
+							orientation: "right",
+							...T,
+							width: 48,
+							tickFormatter: w ?? s
+						})
+					] }),
+					/* @__PURE__ */ i(v, {
+						cursor: { fill: "var(--kf-surface-muted)" },
+						content: /* @__PURE__ */ i(O, {
+							series: n,
+							valueFormatter: s,
+							indexFormatter: c
+						})
+					}),
+					n.map((t, r) => /* @__PURE__ */ i(l, {
+						isAnimationActive: N,
+						dataKey: t.key,
+						name: t.label,
+						stackId: h ? "a" : void 0,
+						...P ? {} : { yAxisId: F && t.key === S ? "right" : "left" },
+						fill: C(t, r),
+						radius: h && r < n.length - 1 ? 0 : P ? [
+							0,
+							6,
+							6,
+							0
+						] : [
+							6,
+							6,
+							0,
+							0
+						],
+						maxBarSize: 48,
+						children: A && e.map((e, t) => /* @__PURE__ */ i(f, { fill: M[t % M.length] }, t))
+					}, t.key))
+				]
+			})
+		})
+	});
+}
+function P({ data: e, index: t, valueKey: n, height: r = 220, valueFormatter: o, centerLabel: s, centerSubLabel: c, showLegend: l = !0, colors: u = S, showPercent: d, ...p }) {
+	let m = x(), y = e.map((e) => ({
+		key: String(e[t]),
+		label: String(e[t])
+	})), b = e.reduce((e, t) => e + (Number(t[n]) || 0), 0);
+	return /* @__PURE__ */ i(E, {
+		...p,
+		series: y,
+		showLegend: !1,
+		table: /* @__PURE__ */ a("table", { children: [/* @__PURE__ */ i("caption", { children: k(p.title, p.ariaTitle) }), /* @__PURE__ */ i("tbody", { children: e.map((e) => /* @__PURE__ */ a("tr", { children: [
+			/* @__PURE__ */ i("th", {
+				scope: "row",
+				children: String(e[t])
+			}),
+			/* @__PURE__ */ i("td", { children: w(o, e[n]) }),
+			/* @__PURE__ */ i("td", { children: b ? `${Math.round(Number(e[n]) / b * 100)}%` : "" })
+		] }, String(e[t]))) })] }),
+		children: /* @__PURE__ */ a("div", {
+			className: "grid items-center gap-6 sm:grid-cols-[minmax(0,1fr)_auto]",
+			children: [/* @__PURE__ */ a("div", {
+				className: "relative",
+				children: [/* @__PURE__ */ i(_, {
+					width: "100%",
+					height: r,
+					children: /* @__PURE__ */ a(g, {
+						accessibilityLayer: !1,
+						children: [/* @__PURE__ */ i(v, { content: ({ active: e, payload: t }) => e && t?.length ? /* @__PURE__ */ a("div", {
+							className: "rounded-md border border-border bg-surface px-3 py-2 font-sans text-sm text-fg shadow-overlay",
+							children: [
+								/* @__PURE__ */ i("span", {
+									className: "font-semibold",
+									children: String(t[0].name)
+								}),
+								":",
+								" ",
+								w(o, t[0].value)
+							]
+						}) : null }), /* @__PURE__ */ i(h, {
+							isAnimationActive: m,
+							rootTabIndex: -1,
+							data: e,
+							dataKey: n,
+							nameKey: t,
+							innerRadius: "62%",
+							outerRadius: "90%",
+							paddingAngle: 2,
+							stroke: "var(--kf-surface)",
+							strokeWidth: 2,
+							children: e.map((e, t) => /* @__PURE__ */ i(f, { fill: u[t % u.length] }, t))
+						})]
+					})
+				}), s !== void 0 && /* @__PURE__ */ a("div", {
+					className: "pointer-events-none absolute inset-0 grid place-content-center text-center",
+					children: [/* @__PURE__ */ i("span", {
+						className: "font-display text-2xl font-extrabold tabular-nums",
+						children: s
+					}), c && /* @__PURE__ */ i("span", {
+						className: "text-xs text-fg-muted",
+						children: c
+					})]
+				})]
+			}), l && /* @__PURE__ */ i("ul", {
+				"aria-hidden": "true",
+				className: "m-0 grid list-none gap-2 p-0 text-sm",
+				children: e.map((e, r) => /* @__PURE__ */ a("li", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ i("span", {
+							className: "size-2.5 rounded-full",
+							style: { background: u[r % u.length] }
+						}),
+						/* @__PURE__ */ i("span", {
+							className: "flex-1 text-fg-muted",
+							children: String(e[t])
+						}),
+						/* @__PURE__ */ i("span", {
+							className: "font-semibold tabular-nums",
+							children: w(o, e[n])
+						}),
+						d && /* @__PURE__ */ i("span", {
+							className: "w-10 text-right text-fg-muted tabular-nums",
+							children: b ? `${Math.round(Number(e[n]) / b * 100)}%` : ""
+						})
+					]
+				}, String(e[t])))
+			})]
+		})
+	});
+}
+//#endregion
+export { j as AreaChart, N as BarChart, M as CATEGORY_CHART_COLORS, S as CHART_COLORS, P as DonutChart, A as LineChart };
+
+//# sourceMappingURL=charts.js.map