@techfides/ui-library-design 0.1.0

package/dist/brands.d.ts

@@ -0,0 +1,39 @@
+//#region src/brands.d.ts
+type BrandSlug = 'techfides' | 'tech-it-out' | 'rtsg' | 'digital-boost-group';
+interface Brand {
+  accent: string;
+  asset: string;
+  domain: string;
+  slug: BrandSlug;
+  title: string;
+}
+declare const brands: readonly [{
+  readonly accent: "#0075c9";
+  readonly asset: "assets/brands/techfides.svg";
+  readonly domain: "techfides.cz";
+  readonly slug: "techfides";
+  readonly title: "TechFides";
+}, {
+  readonly accent: "#84bd23";
+  readonly asset: "assets/brands/tech-it-out.svg";
+  readonly domain: "techitout.io";
+  readonly slug: "tech-it-out";
+  readonly title: "Tech It Out";
+}, {
+  readonly accent: "#eb7500";
+  readonly asset: "assets/brands/rtsg.svg";
+  readonly domain: "rtsg.cz";
+  readonly slug: "rtsg";
+  readonly title: "RTSG";
+}, {
+  readonly accent: "#995fd2";
+  readonly asset: "assets/brands/digital-boost-group.svg";
+  readonly domain: "digitalboostgroup.cz";
+  readonly slug: "digital-boost-group";
+  readonly title: "Digital Boost Group";
+}];
+declare const defaultBrand: BrandSlug;
+declare const brandTitle: (slug: string) => string;
+//#endregion
+export { type Brand, type BrandSlug, brandTitle, brands, defaultBrand };
+//# sourceMappingURL=brands.d.ts.map

package/dist/brands.js

@@ -0,0 +1,41 @@
+//#region src/brands.ts
+const brands = [
+	{
+		accent: "#0075c9",
+		asset: "assets/brands/techfides.svg",
+		domain: "techfides.cz",
+		slug: "techfides",
+		title: "TechFides"
+	},
+	{
+		accent: "#84bd23",
+		asset: "assets/brands/tech-it-out.svg",
+		domain: "techitout.io",
+		slug: "tech-it-out",
+		title: "Tech It Out"
+	},
+	{
+		accent: "#eb7500",
+		asset: "assets/brands/rtsg.svg",
+		domain: "rtsg.cz",
+		slug: "rtsg",
+		title: "RTSG"
+	},
+	{
+		accent: "#995fd2",
+		asset: "assets/brands/digital-boost-group.svg",
+		domain: "digitalboostgroup.cz",
+		slug: "digital-boost-group",
+		title: "Digital Boost Group"
+	}
+];
+const defaultBrand = "techfides";
+const brandTitle = (slug) => {
+	const match = brands.find((brand) => brand.slug === slug);
+	if (match) return match.title;
+	return slug;
+};
+//#endregion
+export { brandTitle, brands, defaultBrand };
+
+//# sourceMappingURL=brands.js.map

package/dist/brands.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"brands.js","names":[],"sources":["../src/brands.ts"],"sourcesContent":["type BrandSlug = 'techfides' | 'tech-it-out' | 'rtsg' | 'digital-boost-group'\n\ninterface Brand {\n  accent: string\n  asset: string\n  domain: string\n  slug: BrandSlug\n  title: string\n}\n\nconst brands = [\n  {\n    accent: '#0075c9',\n    asset: 'assets/brands/techfides.svg',\n    domain: 'techfides.cz',\n    slug: 'techfides',\n    title: 'TechFides',\n  },\n  {\n    accent: '#84bd23',\n    asset: 'assets/brands/tech-it-out.svg',\n    domain: 'techitout.io',\n    slug: 'tech-it-out',\n    title: 'Tech It Out',\n  },\n  {\n    accent: '#eb7500',\n    asset: 'assets/brands/rtsg.svg',\n    domain: 'rtsg.cz',\n    slug: 'rtsg',\n    title: 'RTSG',\n  },\n  {\n    accent: '#995fd2',\n    asset: 'assets/brands/digital-boost-group.svg',\n    domain: 'digitalboostgroup.cz',\n    slug: 'digital-boost-group',\n    title: 'Digital Boost Group',\n  },\n] as const satisfies readonly Brand[]\n\nconst defaultBrand: BrandSlug = 'techfides'\n\nconst brandTitle = (slug: string): string => {\n  const match = brands.find((brand) => brand.slug === slug)\n  if (match) {\n    return match.title\n  }\n  return slug\n}\n\nexport type { Brand, BrandSlug }\nexport { brandTitle, brands, defaultBrand }\n"],"mappings":";AAUA,MAAM,SAAS;CACb;EACE,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,MAAM;EACN,OAAO;CACT;CACA;EACE,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,MAAM;EACN,OAAO;CACT;CACA;EACE,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,MAAM;EACN,OAAO;CACT;CACA;EACE,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,MAAM;EACN,OAAO;CACT;AACF;AAEA,MAAM,eAA0B;AAEhC,MAAM,cAAc,SAAyB;CAC3C,MAAM,QAAQ,OAAO,MAAM,UAAU,MAAM,SAAS,IAAI;CACxD,IAAI,OACF,OAAO,MAAM;CAEf,OAAO;AACT"}

package/dist/charts/animation.js

@@ -0,0 +1,14 @@
+//#region src/charts/animation.ts
+const CHART_EASING = "cubicOut";
+const chartAnimation = (durationMs) => ({
+	animation: true,
+	animationDuration: durationMs,
+	animationDurationUpdate: durationMs,
+	animationEasing: CHART_EASING,
+	animationEasingUpdate: CHART_EASING
+});
+const chartStagger = (stepMs) => (index) => index * stepMs;
+//#endregion
+export { CHART_EASING, chartAnimation, chartStagger };
+
+//# sourceMappingURL=animation.js.map

package/dist/charts/animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation.js","names":[],"sources":["../../src/charts/animation.ts"],"sourcesContent":["import type { EChartsOption } from 'echarts'\n\nconst CHART_EASING = 'cubicOut'\n\ntype ChartAnimation = Pick<\n  EChartsOption,\n  | 'animation'\n  | 'animationDuration'\n  | 'animationDurationUpdate'\n  | 'animationEasing'\n  | 'animationEasingUpdate'\n>\n\nconst chartAnimation = (durationMs: number): ChartAnimation => ({\n  animation: true,\n  animationDuration: durationMs,\n  animationDurationUpdate: durationMs,\n  animationEasing: CHART_EASING,\n  animationEasingUpdate: CHART_EASING,\n})\n\nconst chartStagger =\n  (stepMs: number) =>\n  (index: number): number =>\n    index * stepMs\n\nexport { CHART_EASING, chartAnimation, chartStagger }\n"],"mappings":";AAEA,MAAM,eAAe;AAWrB,MAAM,kBAAkB,gBAAwC;CAC9D,WAAW;CACX,mBAAmB;CACnB,yBAAyB;CACzB,iBAAiB;CACjB,uBAAuB;AACzB;AAEA,MAAM,gBACH,YACA,UACC,QAAQ"}

package/dist/charts/bars.d.ts

@@ -0,0 +1,22 @@
+import { EChartsOption } from "echarts";
+//#region src/charts/bars.d.ts
+interface BarsAccent {
+  hi: string;
+  surface: string;
+}
+interface BarsPoint {
+  label: string;
+  value: number | null;
+}
+interface BarsOptionInput {
+  accent: BarsAccent;
+  durationMs: number;
+  labelColor: string;
+  radius: number;
+  stateDurationMs: number;
+  values: readonly BarsPoint[];
+}
+declare const barsOption: (input: BarsOptionInput) => EChartsOption;
+//#endregion
+export { type BarsAccent, type BarsOptionInput, type BarsPoint, barsOption };
+//# sourceMappingURL=bars.d.ts.map

package/dist/charts/bars.js

@@ -0,0 +1,61 @@
+import { CHART_EASING, chartAnimation, chartStagger } from "./animation.js";
+import { verticalGradient } from "./paint.js";
+import { chartTooltip, formatCallbackValue } from "./tooltip.js";
+//#region src/charts/bars.ts
+const GRID = {
+	bottom: 22,
+	left: 4,
+	right: 4,
+	top: 8
+};
+const BAR_CATEGORY_GAP = "35%";
+const LABEL_FONT_SIZE = 11;
+const STAGGER_MS = 40;
+const EMPTY_LENGTH = 0;
+const FIRST_INDEX = 0;
+const barPointFormatter = (params) => {
+	const point = params[FIRST_INDEX];
+	if (!point) return "";
+	return `${point.name}: ${formatCallbackValue(point.value)}`;
+};
+const barsOption = (input) => {
+	if (input.values.length === EMPTY_LENGTH) return { series: [] };
+	return {
+		...chartAnimation(input.durationMs),
+		grid: GRID,
+		series: [{
+			animationDelay: chartStagger(STAGGER_MS),
+			barCategoryGap: BAR_CATEGORY_GAP,
+			data: input.values.map((point) => point.value),
+			emphasis: { disabled: true },
+			itemStyle: {
+				borderRadius: input.radius,
+				color: verticalGradient(input.accent.hi, input.accent.surface)
+			},
+			stateAnimation: {
+				duration: input.stateDurationMs,
+				easing: CHART_EASING
+			},
+			type: "bar"
+		}],
+		tooltip: chartTooltip(barPointFormatter),
+		xAxis: {
+			axisLabel: {
+				color: input.labelColor,
+				fontSize: LABEL_FONT_SIZE
+			},
+			axisLine: { show: false },
+			axisTick: { show: false },
+			data: input.values.map((point) => point.label),
+			type: "category"
+		},
+		yAxis: {
+			show: false,
+			type: "value"
+		}
+	};
+};
+//#endregion
+export { barsOption };
+
+//# sourceMappingURL=bars.js.map

package/dist/charts/bars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bars.js","names":[],"sources":["../../src/charts/bars.ts"],"sourcesContent":["import type { DefaultLabelFormatterCallbackParams, EChartsOption } from 'echarts'\n\nimport { CHART_EASING, chartAnimation, chartStagger } from './animation'\nimport { verticalGradient } from './paint'\nimport { chartTooltip, formatCallbackValue } from './tooltip'\n\ninterface BarsAccent {\n  hi: string\n\n  surface: string\n}\n\ninterface BarsPoint {\n  label: string\n\n  value: number | null\n}\n\ninterface BarsOptionInput {\n  accent: BarsAccent\n\n  durationMs: number\n\n  labelColor: string\n\n  radius: number\n\n  stateDurationMs: number\n\n  values: readonly BarsPoint[]\n}\n\nconst GRID = { bottom: 22, left: 4, right: 4, top: 8 }\n\nconst BAR_CATEGORY_GAP = '35%'\n\nconst LABEL_FONT_SIZE = 11\n\nconst STAGGER_MS = 40\n\nconst EMPTY_LENGTH = 0\n\nconst FIRST_INDEX = 0\n\nconst barPointFormatter = (params: readonly DefaultLabelFormatterCallbackParams[]): string => {\n  const point = params[FIRST_INDEX]\n\n  if (!point) {\n    return ''\n  }\n  return `${point.name}: ${formatCallbackValue(point.value)}`\n}\n\nconst barsOption = (input: BarsOptionInput): EChartsOption => {\n  if (input.values.length === EMPTY_LENGTH) {\n    return { series: [] }\n  }\n  return {\n    ...chartAnimation(input.durationMs),\n    grid: GRID,\n    series: [\n      {\n        animationDelay: chartStagger(STAGGER_MS),\n        barCategoryGap: BAR_CATEGORY_GAP,\n        data: input.values.map((point) => point.value),\n        emphasis: { disabled: true },\n        itemStyle: {\n          borderRadius: input.radius,\n          color: verticalGradient(input.accent.hi, input.accent.surface),\n        },\n        stateAnimation: { duration: input.stateDurationMs, easing: CHART_EASING },\n        type: 'bar',\n      },\n    ],\n    tooltip: chartTooltip(barPointFormatter),\n    xAxis: {\n      axisLabel: { color: input.labelColor, fontSize: LABEL_FONT_SIZE },\n      axisLine: { show: false },\n      axisTick: { show: false },\n      data: input.values.map((point) => point.label),\n      type: 'category',\n    },\n    yAxis: { show: false, type: 'value' },\n  }\n}\n\nexport { type BarsAccent, type BarsOptionInput, type BarsPoint, barsOption }\n"],"mappings":";;;;AAgCA,MAAM,OAAO;CAAE,QAAQ;CAAI,MAAM;CAAG,OAAO;CAAG,KAAK;AAAE;AAErD,MAAM,mBAAmB;AAEzB,MAAM,kBAAkB;AAExB,MAAM,aAAa;AAEnB,MAAM,eAAe;AAErB,MAAM,cAAc;AAEpB,MAAM,qBAAqB,WAAmE;CAC5F,MAAM,QAAQ,OAAO;CAErB,IAAI,CAAC,OACH,OAAO;CAET,OAAO,GAAG,MAAM,KAAK,IAAI,oBAAoB,MAAM,KAAK;AAC1D;AAEA,MAAM,cAAc,UAA0C;CAC5D,IAAI,MAAM,OAAO,WAAW,cAC1B,OAAO,EAAE,QAAQ,CAAC,EAAE;CAEtB,OAAO;EACL,GAAG,eAAe,MAAM,UAAU;EAClC,MAAM;EACN,QAAQ,CACN;GACE,gBAAgB,aAAa,UAAU;GACvC,gBAAgB;GAChB,MAAM,MAAM,OAAO,KAAK,UAAU,MAAM,KAAK;GAC7C,UAAU,EAAE,UAAU,KAAK;GAC3B,WAAW;IACT,cAAc,MAAM;IACpB,OAAO,iBAAiB,MAAM,OAAO,IAAI,MAAM,OAAO,OAAO;GAC/D;GACA,gBAAgB;IAAE,UAAU,MAAM;IAAiB,QAAQ;GAAa;GACxE,MAAM;EACR,CACF;EACA,SAAS,aAAa,iBAAiB;EACvC,OAAO;GACL,WAAW;IAAE,OAAO,MAAM;IAAY,UAAU;GAAgB;GAChE,UAAU,EAAE,MAAM,MAAM;GACxB,UAAU,EAAE,MAAM,MAAM;GACxB,MAAM,MAAM,OAAO,KAAK,UAAU,MAAM,KAAK;GAC7C,MAAM;EACR;EACA,OAAO;GAAE,MAAM;GAAO,MAAM;EAAQ;CACtC;AACF"}

package/dist/charts/groupedBars.d.ts

@@ -0,0 +1,20 @@
+import { EChartsOption } from "echarts";
+//#region src/charts/groupedBars.d.ts
+interface GroupedBarsSeries {
+  color: string;
+  name: string;
+  values: readonly (number | null)[];
+}
+interface GroupedBarsOptionInput {
+  categories: readonly string[];
+  durationMs: number;
+  labelColor: string;
+  radius: number;
+  series: readonly GroupedBarsSeries[];
+  stateDurationMs: number;
+  valueFormat?: (value: number) => string;
+}
+declare const groupedBarsOption: (input: GroupedBarsOptionInput) => EChartsOption;
+//#endregion
+export { type GroupedBarsOptionInput, type GroupedBarsSeries, groupedBarsOption };
+//# sourceMappingURL=groupedBars.d.ts.map

package/dist/charts/groupedBars.js

@@ -0,0 +1,82 @@
+import { CHART_EASING, chartAnimation } from "./animation.js";
+import { chartTooltip, formatCallbackValue } from "./tooltip.js";
+//#region src/charts/groupedBars.ts
+const GRID = {
+	bottom: 22,
+	left: 4,
+	right: 4,
+	top: 8
+};
+const BAR_CATEGORY_GAP = "35%";
+const LABEL_FONT_SIZE = 11;
+const EMPTY_LENGTH = 0;
+const FIRST_INDEX = 0;
+const DOT_CLASS = "inline-block size-2 flex-none rounded-tf-pill";
+const ROW_CLASS = "flex items-center justify-between gap-3";
+const NAME_CLASS = "flex items-center gap-1.5";
+const VALUE_CLASS = "font-semibold tabular-nums";
+const formatValue = (value, valueFormat) => {
+	if (typeof value === "number") return valueFormat(value);
+	return formatCallbackValue(value);
+};
+const NO_COLOR = "";
+const colorOf = (point) => {
+	if (typeof point.color === "string") return point.color;
+	return NO_COLOR;
+};
+const groupedBarRow = (point, valueFormat) => {
+	const color = colorOf(point);
+	const name = formatCallbackValue(point.seriesName);
+	return `<div class="${ROW_CLASS}"><span class="${NAME_CLASS}"><span aria-hidden="true" class="${DOT_CLASS}" style="background:${color}"></span>${name}</span><span class="${VALUE_CLASS}">${formatValue(point.value, valueFormat)}</span></div>`;
+};
+const groupedBarsFormatter = (valueFormat) => (params) => {
+	const first = params[FIRST_INDEX];
+	if (!first) return "";
+	return `<div class="flex flex-col gap-1"><span class="font-semibold">${formatCallbackValue(first.name)}</span>${params.map((point) => groupedBarRow(point, valueFormat)).join("")}</div>`;
+};
+const IDENTITY_FORMAT = String;
+const AXIS_SHADOW_COLOR = "rgb(255 255 255 / 9%)";
+const groupedBarsOption = (input) => {
+	if (input.categories.length === EMPTY_LENGTH) return { series: [] };
+	const valueFormat = input.valueFormat ?? IDENTITY_FORMAT;
+	return {
+		...chartAnimation(input.durationMs),
+		grid: GRID,
+		series: input.series.map((series) => ({
+			barCategoryGap: BAR_CATEGORY_GAP,
+			data: [...series.values],
+			itemStyle: {
+				borderRadius: input.radius,
+				color: series.color
+			},
+			name: series.name,
+			stateAnimation: {
+				duration: input.stateDurationMs,
+				easing: CHART_EASING
+			},
+			type: "bar"
+		})),
+		tooltip: chartTooltip(groupedBarsFormatter(valueFormat), "axis", {
+			shadowStyle: { color: AXIS_SHADOW_COLOR },
+			type: "shadow"
+		}),
+		xAxis: {
+			axisLabel: {
+				color: input.labelColor,
+				fontSize: LABEL_FONT_SIZE
+			},
+			axisLine: { show: false },
+			axisTick: { show: false },
+			data: [...input.categories],
+			type: "category"
+		},
+		yAxis: {
+			show: false,
+			type: "value"
+		}
+	};
+};
+//#endregion
+export { groupedBarsOption };
+
+//# sourceMappingURL=groupedBars.js.map

package/dist/charts/groupedBars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"groupedBars.js","names":[],"sources":["../../src/charts/groupedBars.ts"],"sourcesContent":["import type { DefaultLabelFormatterCallbackParams, EChartsOption } from 'echarts'\n\nimport { CHART_EASING, chartAnimation } from './animation'\nimport { chartTooltip, formatCallbackValue } from './tooltip'\n\ninterface GroupedBarsSeries {\n  color: string\n\n  name: string\n\n  values: readonly (number | null)[]\n}\n\ninterface GroupedBarsOptionInput {\n  categories: readonly string[]\n\n  durationMs: number\n\n  labelColor: string\n\n  radius: number\n\n  series: readonly GroupedBarsSeries[]\n\n  stateDurationMs: number\n\n  valueFormat?: (value: number) => string\n}\n\nconst GRID = { bottom: 22, left: 4, right: 4, top: 8 }\n\nconst BAR_CATEGORY_GAP = '35%'\n\nconst LABEL_FONT_SIZE = 11\n\nconst EMPTY_LENGTH = 0\n\nconst FIRST_INDEX = 0\n\nconst DOT_CLASS = 'inline-block size-2 flex-none rounded-tf-pill'\n\nconst ROW_CLASS = 'flex items-center justify-between gap-3'\n\nconst NAME_CLASS = 'flex items-center gap-1.5'\n\nconst VALUE_CLASS = 'font-semibold tabular-nums'\n\nconst formatValue = (value: unknown, valueFormat: (value: number) => string): string => {\n  if (typeof value === 'number') {\n    return valueFormat(value)\n  }\n  return formatCallbackValue(value)\n}\n\nconst NO_COLOR = ''\n\nconst colorOf = (point: DefaultLabelFormatterCallbackParams): string => {\n  if (typeof point.color === 'string') {\n    return point.color\n  }\n  return NO_COLOR\n}\n\nconst groupedBarRow = (\n  point: DefaultLabelFormatterCallbackParams,\n  valueFormat: (value: number) => string,\n): string => {\n  const color = colorOf(point)\n  const name = formatCallbackValue(point.seriesName)\n\n  return (\n    `<div class=\"${ROW_CLASS}\">` +\n    `<span class=\"${NAME_CLASS}\"><span aria-hidden=\"true\" class=\"${DOT_CLASS}\" style=\"background:${color}\"></span>${name}</span>` +\n    `<span class=\"${VALUE_CLASS}\">${formatValue(point.value, valueFormat)}</span>` +\n    `</div>`\n  )\n}\n\nconst groupedBarsFormatter =\n  (valueFormat: (value: number) => string) =>\n  (params: readonly DefaultLabelFormatterCallbackParams[]): string => {\n    const first = params[FIRST_INDEX]\n\n    if (!first) {\n      return ''\n    }\n    const heading = formatCallbackValue(first.name)\n    const rows = params.map((point) => groupedBarRow(point, valueFormat)).join('')\n\n    return `<div class=\"flex flex-col gap-1\"><span class=\"font-semibold\">${heading}</span>${rows}</div>`\n  }\n\nconst IDENTITY_FORMAT = String\n\nconst AXIS_SHADOW_COLOR = 'rgb(255 255 255 / 9%)'\n\nconst groupedBarsOption = (input: GroupedBarsOptionInput): EChartsOption => {\n  if (input.categories.length === EMPTY_LENGTH) {\n    return { series: [] }\n  }\n  const valueFormat = input.valueFormat ?? IDENTITY_FORMAT\n\n  return {\n    ...chartAnimation(input.durationMs),\n    grid: GRID,\n    series: input.series.map((series) => ({\n      barCategoryGap: BAR_CATEGORY_GAP,\n      data: [...series.values],\n      itemStyle: { borderRadius: input.radius, color: series.color },\n      name: series.name,\n      stateAnimation: { duration: input.stateDurationMs, easing: CHART_EASING },\n      type: 'bar' as const,\n    })),\n    tooltip: chartTooltip(groupedBarsFormatter(valueFormat), 'axis', {\n      shadowStyle: { color: AXIS_SHADOW_COLOR },\n      type: 'shadow',\n    }),\n    xAxis: {\n      axisLabel: { color: input.labelColor, fontSize: LABEL_FONT_SIZE },\n      axisLine: { show: false },\n      axisTick: { show: false },\n      data: [...input.categories],\n      type: 'category',\n    },\n    yAxis: { show: false, type: 'value' },\n  }\n}\n\nexport { type GroupedBarsOptionInput, type GroupedBarsSeries, groupedBarsOption }\n"],"mappings":";;;AA6BA,MAAM,OAAO;CAAE,QAAQ;CAAI,MAAM;CAAG,OAAO;CAAG,KAAK;AAAE;AAErD,MAAM,mBAAmB;AAEzB,MAAM,kBAAkB;AAExB,MAAM,eAAe;AAErB,MAAM,cAAc;AAEpB,MAAM,YAAY;AAElB,MAAM,YAAY;AAElB,MAAM,aAAa;AAEnB,MAAM,cAAc;AAEpB,MAAM,eAAe,OAAgB,gBAAmD;CACtF,IAAI,OAAO,UAAU,UACnB,OAAO,YAAY,KAAK;CAE1B,OAAO,oBAAoB,KAAK;AAClC;AAEA,MAAM,WAAW;AAEjB,MAAM,WAAW,UAAuD;CACtE,IAAI,OAAO,MAAM,UAAU,UACzB,OAAO,MAAM;CAEf,OAAO;AACT;AAEA,MAAM,iBACJ,OACA,gBACW;CACX,MAAM,QAAQ,QAAQ,KAAK;CAC3B,MAAM,OAAO,oBAAoB,MAAM,UAAU;CAEjD,OACE,eAAe,UAAU,iBACT,WAAW,oCAAoC,UAAU,sBAAsB,MAAM,WAAW,KAAK,sBACrG,YAAY,IAAI,YAAY,MAAM,OAAO,WAAW,EAAE;AAG1E;AAEA,MAAM,wBACH,iBACA,WAAmE;CAClE,MAAM,QAAQ,OAAO;CAErB,IAAI,CAAC,OACH,OAAO;CAKT,OAAO,gEAHS,oBAAoB,MAAM,IAGmC,EAAE,SAFlE,OAAO,KAAK,UAAU,cAAc,OAAO,WAAW,CAAC,CAAC,CAAC,KAAK,EAEgB,EAAE;AAC/F;AAEF,MAAM,kBAAkB;AAExB,MAAM,oBAAoB;AAE1B,MAAM,qBAAqB,UAAiD;CAC1E,IAAI,MAAM,WAAW,WAAW,cAC9B,OAAO,EAAE,QAAQ,CAAC,EAAE;CAEtB,MAAM,cAAc,MAAM,eAAe;CAEzC,OAAO;EACL,GAAG,eAAe,MAAM,UAAU;EAClC,MAAM;EACN,QAAQ,MAAM,OAAO,KAAK,YAAY;GACpC,gBAAgB;GAChB,MAAM,CAAC,GAAG,OAAO,MAAM;GACvB,WAAW;IAAE,cAAc,MAAM;IAAQ,OAAO,OAAO;GAAM;GAC7D,MAAM,OAAO;GACb,gBAAgB;IAAE,UAAU,MAAM;IAAiB,QAAQ;GAAa;GACxE,MAAM;EACR,EAAE;EACF,SAAS,aAAa,qBAAqB,WAAW,GAAG,QAAQ;GAC/D,aAAa,EAAE,OAAO,kBAAkB;GACxC,MAAM;EACR,CAAC;EACD,OAAO;GACL,WAAW;IAAE,OAAO,MAAM;IAAY,UAAU;GAAgB;GAChE,UAAU,EAAE,MAAM,MAAM;GACxB,UAAU,EAAE,MAAM,MAAM;GACxB,MAAM,CAAC,GAAG,MAAM,UAAU;GAC1B,MAAM;EACR;EACA,OAAO;GAAE,MAAM;GAAO,MAAM;EAAQ;CACtC;AACF"}

package/dist/charts/paint.js

@@ -0,0 +1,19 @@
+import { graphic } from "echarts/core";
+//#region src/charts/paint.ts
+const TOP = 0;
+const BOTTOM = 1;
+const LEFT = 0;
+const START = 0;
+const END = 1;
+const verticalGradient = (from, to) => new graphic.LinearGradient(LEFT, TOP, LEFT, BOTTOM, [{
+	color: from,
+	offset: START
+}, {
+	color: to,
+	offset: END
+}]);
+const TRANSPARENT = "rgba(0, 0, 0, 0)";
+//#endregion
+export { TRANSPARENT, verticalGradient };
+
+//# sourceMappingURL=paint.js.map

package/dist/charts/paint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"paint.js","names":[],"sources":["../../src/charts/paint.ts"],"sourcesContent":["import { graphic } from 'echarts/core'\n\nconst TOP = 0\n\nconst BOTTOM = 1\n\nconst LEFT = 0\n\nconst START = 0\n\nconst END = 1\n\nconst verticalGradient = (from: string, to: string): graphic.LinearGradient =>\n  new graphic.LinearGradient(LEFT, TOP, LEFT, BOTTOM, [\n    { color: from, offset: START },\n    { color: to, offset: END },\n  ])\n\nconst TRANSPARENT = 'rgba(0, 0, 0, 0)'\n\nexport { TRANSPARENT, verticalGradient }\n"],"mappings":";;AAEA,MAAM,MAAM;AAEZ,MAAM,SAAS;AAEf,MAAM,OAAO;AAEb,MAAM,QAAQ;AAEd,MAAM,MAAM;AAEZ,MAAM,oBAAoB,MAAc,OACtC,IAAI,QAAQ,eAAe,MAAM,KAAK,MAAM,QAAQ,CAClD;CAAE,OAAO;CAAM,QAAQ;AAAM,GAC7B;CAAE,OAAO;CAAI,QAAQ;AAAI,CAC3B,CAAC;AAEH,MAAM,cAAc"}

package/dist/charts/spark.d.ts

@@ -0,0 +1,17 @@
+import { BarsAccent } from "./bars.js";
+import { EChartsOption } from "echarts";
+//#region src/charts/spark.d.ts
+type SparkShape = 'line' | 'bars';
+type SparkAccent = BarsAccent;
+interface SparkOptionInput {
+  accent: SparkAccent;
+  durationMs: number;
+  stateDurationMs: number;
+  radius: number;
+  shape: SparkShape;
+  values: readonly number[];
+}
+declare const sparkOption: (input: SparkOptionInput) => EChartsOption;
+//#endregion
+export { type SparkAccent, type SparkOptionInput, type SparkShape, sparkOption };
+//# sourceMappingURL=spark.d.ts.map

package/dist/charts/spark.js

@@ -0,0 +1,159 @@
+import { CHART_EASING, chartAnimation, chartStagger } from "./animation.js";
+import { TRANSPARENT, verticalGradient } from "./paint.js";
+import { chartTooltip } from "./tooltip.js";
+//#region src/charts/spark.ts
+const LINE_WIDTH = 2;
+const MARKER_SIZE = 5;
+const MIN_SPAN = 1;
+const EMPTY_LENGTH = 0;
+const LAST_INDEX_OFFSET = 1;
+const NO_GAP = 0;
+const LINE_BOUNDARY_GAP = [NO_GAP, NO_GAP];
+const LINE_GRID = {
+	bottom: 4,
+	left: 4,
+	right: 4,
+	top: 4
+};
+const BAR_GRID = {
+	bottom: 0,
+	left: 0,
+	right: 0,
+	top: 0
+};
+const BAR_CATEGORY_GAP = "25%";
+const MIN_HEIGHT_RATIO = .15;
+const BAR_AXIS_MAX = 1;
+const BAR_AXIS_MIN = 0;
+const AREA_OPACITY = .32;
+const STAGGER_MS = 30;
+const lastIndexOf = (values) => values.length - LAST_INDEX_OFFSET;
+const NO_VALUE = 0;
+const FIRST_INDEX = 0;
+const pointFormatter = (values) => (params) => {
+	const point = params[FIRST_INDEX];
+	if (!point || typeof point.dataIndex !== "number") return String(NO_VALUE);
+	return String(values[point.dataIndex] ?? NO_VALUE);
+};
+const yRange = (values) => {
+	const min = Math.min(...values);
+	const max = Math.max(...values);
+	if (max === min) return {
+		max: min + MIN_SPAN,
+		min
+	};
+	return {
+		max,
+		min
+	};
+};
+const lineOption = (input) => {
+	const last = lastIndexOf(input.values);
+	const range = yRange(input.values);
+	const lastValue = input.values[last] ?? range.min;
+	return {
+		...chartAnimation(input.durationMs),
+		grid: LINE_GRID,
+		series: [{
+			areaStyle: {
+				color: verticalGradient(input.accent.hi, TRANSPARENT),
+				opacity: AREA_OPACITY
+			},
+			data: input.values.map((value, index) => [index, value]),
+			emphasis: { disabled: true },
+			lineStyle: {
+				cap: "round",
+				color: input.accent.surface,
+				join: "round",
+				width: LINE_WIDTH
+			},
+			markPoint: {
+				animation: true,
+				data: [{
+					coord: [last, lastValue],
+					name: ""
+				}],
+				itemStyle: { color: input.accent.hi },
+				label: { show: false },
+				symbol: "circle",
+				symbolSize: MARKER_SIZE
+			},
+			showSymbol: false,
+			stateAnimation: {
+				duration: input.stateDurationMs,
+				easing: CHART_EASING
+			},
+			symbolSize: MARKER_SIZE,
+			type: "line"
+		}],
+		tooltip: chartTooltip(pointFormatter(input.values), "axis"),
+		xAxis: {
+			boundaryGap: LINE_BOUNDARY_GAP,
+			max: last,
+			min: 0,
+			show: false,
+			type: "value"
+		},
+		yAxis: {
+			max: range.max,
+			min: range.min,
+			show: false,
+			type: "value"
+		}
+	};
+};
+const barHeightRatio = (value, range) => {
+	const ratio = (value - range.min) / (range.max - range.min);
+	return Math.max(ratio, MIN_HEIGHT_RATIO);
+};
+const barOption = (input) => {
+	const last = lastIndexOf(input.values);
+	const range = yRange(input.values);
+	return {
+		...chartAnimation(input.durationMs),
+		grid: BAR_GRID,
+		series: [{
+			animationDelay: chartStagger(STAGGER_MS),
+			barCategoryGap: BAR_CATEGORY_GAP,
+			data: input.values.map((value, index) => {
+				const height = barHeightRatio(value, range);
+				if (index === last) return {
+					itemStyle: { color: input.accent.hi },
+					value: height
+				};
+				return height;
+			}),
+			emphasis: { disabled: true },
+			itemStyle: {
+				borderRadius: input.radius,
+				color: verticalGradient(input.accent.hi, input.accent.surface)
+			},
+			stateAnimation: {
+				duration: input.stateDurationMs,
+				easing: CHART_EASING
+			},
+			type: "bar"
+		}],
+		tooltip: chartTooltip(pointFormatter(input.values)),
+		xAxis: {
+			data: input.values.map((_value, index) => String(index)),
+			show: false,
+			type: "category"
+		},
+		yAxis: {
+			max: BAR_AXIS_MAX,
+			min: BAR_AXIS_MIN,
+			show: false,
+			type: "value"
+		}
+	};
+};
+const sparkOption = (input) => {
+	if (input.values.length === EMPTY_LENGTH) return { series: [] };
+	if (input.shape === "bars") return barOption(input);
+	return lineOption(input);
+};
+//#endregion
+export { sparkOption };
+
+//# sourceMappingURL=spark.js.map

package/dist/charts/spark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spark.js","names":[],"sources":["../../src/charts/spark.ts"],"sourcesContent":["import type { DefaultLabelFormatterCallbackParams, EChartsOption } from 'echarts'\n\nimport { CHART_EASING, chartAnimation, chartStagger } from './animation'\nimport type { BarsAccent } from './bars'\nimport { TRANSPARENT, verticalGradient } from './paint'\nimport { chartTooltip } from './tooltip'\n\ntype SparkShape = 'line' | 'bars'\n\ntype SparkAccent = BarsAccent\n\ninterface SparkOptionInput {\n  accent: SparkAccent\n  durationMs: number\n  stateDurationMs: number\n  radius: number\n  shape: SparkShape\n  values: readonly number[]\n}\n\nconst LINE_WIDTH = 2\n\nconst MARKER_SIZE = 5\n\nconst MIN_SPAN = 1\n\nconst EMPTY_LENGTH = 0\n\nconst LAST_INDEX_OFFSET = 1\n\nconst NO_GAP = 0\n\nconst LINE_BOUNDARY_GAP: [number, number] = [NO_GAP, NO_GAP]\n\nconst LINE_GRID = { bottom: 4, left: 4, right: 4, top: 4 }\n\nconst BAR_GRID = { bottom: 0, left: 0, right: 0, top: 0 }\n\nconst BAR_CATEGORY_GAP = '25%'\n\nconst MIN_HEIGHT_RATIO = 0.15\n\nconst BAR_AXIS_MAX = 1\n\nconst BAR_AXIS_MIN = 0\n\nconst AREA_OPACITY = 0.32\n\nconst STAGGER_MS = 30\n\nconst lastIndexOf = (values: readonly number[]): number => values.length - LAST_INDEX_OFFSET\n\nconst NO_VALUE = 0\n\nconst FIRST_INDEX = 0\n\nconst pointFormatter =\n  (values: readonly number[]) =>\n  (params: readonly DefaultLabelFormatterCallbackParams[]): string => {\n    const point = params[FIRST_INDEX]\n\n    if (!point || typeof point.dataIndex !== 'number') {\n      return String(NO_VALUE)\n    }\n    return String(values[point.dataIndex] ?? NO_VALUE)\n  }\n\nconst yRange = (values: readonly number[]): { max: number; min: number } => {\n  const min = Math.min(...values)\n  const max = Math.max(...values)\n\n  if (max === min) {\n    return { max: min + MIN_SPAN, min }\n  }\n  return { max, min }\n}\n\nconst lineOption = (input: SparkOptionInput): EChartsOption => {\n  const last = lastIndexOf(input.values)\n  const range = yRange(input.values)\n  const lastValue = input.values[last] ?? range.min\n\n  return {\n    ...chartAnimation(input.durationMs),\n    grid: LINE_GRID,\n    series: [\n      {\n        areaStyle: {\n          color: verticalGradient(input.accent.hi, TRANSPARENT),\n          opacity: AREA_OPACITY,\n        },\n        data: input.values.map((value, index) => [index, value]),\n        emphasis: { disabled: true },\n        lineStyle: {\n          cap: 'round',\n          color: input.accent.surface,\n          join: 'round',\n          width: LINE_WIDTH,\n        },\n        markPoint: {\n          animation: true,\n          data: [{ coord: [last, lastValue], name: '' }],\n          itemStyle: { color: input.accent.hi },\n          label: { show: false },\n          symbol: 'circle',\n          symbolSize: MARKER_SIZE,\n        },\n        showSymbol: false,\n        stateAnimation: { duration: input.stateDurationMs, easing: CHART_EASING },\n        symbolSize: MARKER_SIZE,\n        type: 'line',\n      },\n    ],\n    tooltip: chartTooltip(pointFormatter(input.values), 'axis'),\n    xAxis: { boundaryGap: LINE_BOUNDARY_GAP, max: last, min: 0, show: false, type: 'value' },\n    yAxis: { max: range.max, min: range.min, show: false, type: 'value' },\n  }\n}\n\nconst barHeightRatio = (value: number, range: { max: number; min: number }): number => {\n  const ratio = (value - range.min) / (range.max - range.min)\n\n  return Math.max(ratio, MIN_HEIGHT_RATIO)\n}\n\nconst barOption = (input: SparkOptionInput): EChartsOption => {\n  const last = lastIndexOf(input.values)\n  const range = yRange(input.values)\n\n  return {\n    ...chartAnimation(input.durationMs),\n    grid: BAR_GRID,\n    series: [\n      {\n        animationDelay: chartStagger(STAGGER_MS),\n        barCategoryGap: BAR_CATEGORY_GAP,\n        data: input.values.map((value, index) => {\n          const height = barHeightRatio(value, range)\n\n          if (index === last) {\n            return { itemStyle: { color: input.accent.hi }, value: height }\n          }\n          return height\n        }),\n        emphasis: { disabled: true },\n        itemStyle: {\n          borderRadius: input.radius,\n          color: verticalGradient(input.accent.hi, input.accent.surface),\n        },\n        stateAnimation: { duration: input.stateDurationMs, easing: CHART_EASING },\n        type: 'bar',\n      },\n    ],\n    tooltip: chartTooltip(pointFormatter(input.values)),\n    xAxis: {\n      data: input.values.map((_value, index) => String(index)),\n      show: false,\n      type: 'category',\n    },\n    yAxis: { max: BAR_AXIS_MAX, min: BAR_AXIS_MIN, show: false, type: 'value' },\n  }\n}\n\nconst sparkOption = (input: SparkOptionInput): EChartsOption => {\n  if (input.values.length === EMPTY_LENGTH) {\n    return { series: [] }\n  }\n  if (input.shape === 'bars') {\n    return barOption(input)\n  }\n  return lineOption(input)\n}\n\nexport { type SparkAccent, type SparkOptionInput, type SparkShape, sparkOption }\n"],"mappings":";;;;AAoBA,MAAM,aAAa;AAEnB,MAAM,cAAc;AAEpB,MAAM,WAAW;AAEjB,MAAM,eAAe;AAErB,MAAM,oBAAoB;AAE1B,MAAM,SAAS;AAEf,MAAM,oBAAsC,CAAC,QAAQ,MAAM;AAE3D,MAAM,YAAY;CAAE,QAAQ;CAAG,MAAM;CAAG,OAAO;CAAG,KAAK;AAAE;AAEzD,MAAM,WAAW;CAAE,QAAQ;CAAG,MAAM;CAAG,OAAO;CAAG,KAAK;AAAE;AAExD,MAAM,mBAAmB;AAEzB,MAAM,mBAAmB;AAEzB,MAAM,eAAe;AAErB,MAAM,eAAe;AAErB,MAAM,eAAe;AAErB,MAAM,aAAa;AAEnB,MAAM,eAAe,WAAsC,OAAO,SAAS;AAE3E,MAAM,WAAW;AAEjB,MAAM,cAAc;AAEpB,MAAM,kBACH,YACA,WAAmE;CAClE,MAAM,QAAQ,OAAO;CAErB,IAAI,CAAC,SAAS,OAAO,MAAM,cAAc,UACvC,OAAO,OAAO,QAAQ;CAExB,OAAO,OAAO,OAAO,MAAM,cAAc,QAAQ;AACnD;AAEF,MAAM,UAAU,WAA4D;CAC1E,MAAM,MAAM,KAAK,IAAI,GAAG,MAAM;CAC9B,MAAM,MAAM,KAAK,IAAI,GAAG,MAAM;CAE9B,IAAI,QAAQ,KACV,OAAO;EAAE,KAAK,MAAM;EAAU;CAAI;CAEpC,OAAO;EAAE;EAAK;CAAI;AACpB;AAEA,MAAM,cAAc,UAA2C;CAC7D,MAAM,OAAO,YAAY,MAAM,MAAM;CACrC,MAAM,QAAQ,OAAO,MAAM,MAAM;CACjC,MAAM,YAAY,MAAM,OAAO,SAAS,MAAM;CAE9C,OAAO;EACL,GAAG,eAAe,MAAM,UAAU;EAClC,MAAM;EACN,QAAQ,CACN;GACE,WAAW;IACT,OAAO,iBAAiB,MAAM,OAAO,IAAI,WAAW;IACpD,SAAS;GACX;GACA,MAAM,MAAM,OAAO,KAAK,OAAO,UAAU,CAAC,OAAO,KAAK,CAAC;GACvD,UAAU,EAAE,UAAU,KAAK;GAC3B,WAAW;IACT,KAAK;IACL,OAAO,MAAM,OAAO;IACpB,MAAM;IACN,OAAO;GACT;GACA,WAAW;IACT,WAAW;IACX,MAAM,CAAC;KAAE,OAAO,CAAC,MAAM,SAAS;KAAG,MAAM;IAAG,CAAC;IAC7C,WAAW,EAAE,OAAO,MAAM,OAAO,GAAG;IACpC,OAAO,EAAE,MAAM,MAAM;IACrB,QAAQ;IACR,YAAY;GACd;GACA,YAAY;GACZ,gBAAgB;IAAE,UAAU,MAAM;IAAiB,QAAQ;GAAa;GACxE,YAAY;GACZ,MAAM;EACR,CACF;EACA,SAAS,aAAa,eAAe,MAAM,MAAM,GAAG,MAAM;EAC1D,OAAO;GAAE,aAAa;GAAmB,KAAK;GAAM,KAAK;GAAG,MAAM;GAAO,MAAM;EAAQ;EACvF,OAAO;GAAE,KAAK,MAAM;GAAK,KAAK,MAAM;GAAK,MAAM;GAAO,MAAM;EAAQ;CACtE;AACF;AAEA,MAAM,kBAAkB,OAAe,UAAgD;CACrF,MAAM,SAAS,QAAQ,MAAM,QAAQ,MAAM,MAAM,MAAM;CAEvD,OAAO,KAAK,IAAI,OAAO,gBAAgB;AACzC;AAEA,MAAM,aAAa,UAA2C;CAC5D,MAAM,OAAO,YAAY,MAAM,MAAM;CACrC,MAAM,QAAQ,OAAO,MAAM,MAAM;CAEjC,OAAO;EACL,GAAG,eAAe,MAAM,UAAU;EAClC,MAAM;EACN,QAAQ,CACN;GACE,gBAAgB,aAAa,UAAU;GACvC,gBAAgB;GAChB,MAAM,MAAM,OAAO,KAAK,OAAO,UAAU;IACvC,MAAM,SAAS,eAAe,OAAO,KAAK;IAE1C,IAAI,UAAU,MACZ,OAAO;KAAE,WAAW,EAAE,OAAO,MAAM,OAAO,GAAG;KAAG,OAAO;IAAO;IAEhE,OAAO;GACT,CAAC;GACD,UAAU,EAAE,UAAU,KAAK;GAC3B,WAAW;IACT,cAAc,MAAM;IACpB,OAAO,iBAAiB,MAAM,OAAO,IAAI,MAAM,OAAO,OAAO;GAC/D;GACA,gBAAgB;IAAE,UAAU,MAAM;IAAiB,QAAQ;GAAa;GACxE,MAAM;EACR,CACF;EACA,SAAS,aAAa,eAAe,MAAM,MAAM,CAAC;EAClD,OAAO;GACL,MAAM,MAAM,OAAO,KAAK,QAAQ,UAAU,OAAO,KAAK,CAAC;GACvD,MAAM;GACN,MAAM;EACR;EACA,OAAO;GAAE,KAAK;GAAc,KAAK;GAAc,MAAM;GAAO,MAAM;EAAQ;CAC5E;AACF;AAEA,MAAM,eAAe,UAA2C;CAC9D,IAAI,MAAM,OAAO,WAAW,cAC1B,OAAO,EAAE,QAAQ,CAAC,EAAE;CAEtB,IAAI,MAAM,UAAU,QAClB,OAAO,UAAU,KAAK;CAExB,OAAO,WAAW,KAAK;AACzB"}

package/dist/charts/tooltip.js

@@ -0,0 +1,41 @@
+//#region src/charts/tooltip.ts
+const TOOLTIP_CLASS = ["tf-edge-sweep tf-edge-plain rounded-tf-inline bg-tf-glass px-2 py-1", "font-tf-body text-tf-caption-sm text-tf-fg shadow-tf-float backdrop-blur-tf-glass"].join(" ");
+const NO_CHROME_CSS = "box-shadow: none; pointer-events: none;";
+const NO_CONTENT = "";
+const SNAP_TO_CURSOR = 0;
+const EMPTY_LENGTH = 0;
+const DEFAULT_AXIS_POINTER = { type: "none" };
+const appendToBody = () => document.body;
+const formatCallbackValue = (value) => {
+	if (typeof value === "string" || typeof value === "number") return String(value);
+	return NO_CONTENT;
+};
+const asParams = (raw) => {
+	if (Array.isArray(raw)) return raw;
+	return [raw];
+};
+const chartTooltip = (formatter, trigger = "item", axisPointer = DEFAULT_AXIS_POINTER) => {
+	const base = {
+		appendTo: appendToBody,
+		backgroundColor: "transparent",
+		borderWidth: 0,
+		extraCssText: NO_CHROME_CSS,
+		formatter: (raw) => {
+			const params = asParams(raw);
+			if (params.length === EMPTY_LENGTH) return NO_CONTENT;
+			return `<div class="${TOOLTIP_CLASS}">${formatter(params)}</div>`;
+		},
+		padding: 0,
+		transitionDuration: SNAP_TO_CURSOR,
+		trigger
+	};
+	if (trigger === "axis") return {
+		...base,
+		axisPointer
+	};
+	return base;
+};
+//#endregion
+export { chartTooltip, formatCallbackValue };
+
+//# sourceMappingURL=tooltip.js.map

package/dist/charts/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","names":[],"sources":["../../src/charts/tooltip.ts"],"sourcesContent":["import type {\n  DefaultLabelFormatterCallbackParams,\n  TooltipComponentFormatterCallbackParams,\n  TooltipComponentOption,\n} from 'echarts'\n\nconst TOOLTIP_CLASS = [\n  'tf-edge-sweep tf-edge-plain rounded-tf-inline bg-tf-glass px-2 py-1',\n  'font-tf-body text-tf-caption-sm text-tf-fg shadow-tf-float backdrop-blur-tf-glass',\n].join(' ')\n\nconst NO_CHROME_CSS = 'box-shadow: none; pointer-events: none;'\n\nconst NO_CONTENT = ''\n\nconst SNAP_TO_CURSOR = 0\n\nconst EMPTY_LENGTH = 0\n\ntype ChartTooltipTrigger = 'item' | 'axis'\n\ntype ChartTooltipAxisPointer = NonNullable<TooltipComponentOption['axisPointer']>\n\nconst DEFAULT_AXIS_POINTER: ChartTooltipAxisPointer = { type: 'none' }\n\nconst appendToBody = (): HTMLElement => document.body\n\nconst formatCallbackValue = (value: unknown): string => {\n  if (typeof value === 'string' || typeof value === 'number') {\n    return String(value)\n  }\n  return NO_CONTENT\n}\n\nconst asParams = (\n  raw: TooltipComponentFormatterCallbackParams,\n): readonly DefaultLabelFormatterCallbackParams[] => {\n  if (Array.isArray(raw)) {\n    return raw\n  }\n  return [raw]\n}\n\nconst chartTooltip = (\n  formatter: (params: readonly DefaultLabelFormatterCallbackParams[]) => string,\n  trigger: ChartTooltipTrigger = 'item',\n  axisPointer: ChartTooltipAxisPointer = DEFAULT_AXIS_POINTER,\n): TooltipComponentOption => {\n  const base: TooltipComponentOption = {\n    appendTo: appendToBody,\n    backgroundColor: 'transparent',\n    borderWidth: 0,\n    extraCssText: NO_CHROME_CSS,\n    formatter: (raw: TooltipComponentFormatterCallbackParams) => {\n      const params = asParams(raw)\n\n      if (params.length === EMPTY_LENGTH) {\n        return NO_CONTENT\n      }\n      return `<div class=\"${TOOLTIP_CLASS}\">${formatter(params)}</div>`\n    },\n    padding: 0,\n    transitionDuration: SNAP_TO_CURSOR,\n    trigger,\n  }\n\n  if (trigger === 'axis') {\n    return { ...base, axisPointer }\n  }\n  return base\n}\n\nexport { chartTooltip, formatCallbackValue }\n"],"mappings":";AAMA,MAAM,gBAAgB,CACpB,uEACA,mFACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,gBAAgB;AAEtB,MAAM,aAAa;AAEnB,MAAM,iBAAiB;AAEvB,MAAM,eAAe;AAMrB,MAAM,uBAAgD,EAAE,MAAM,OAAO;AAErE,MAAM,qBAAkC,SAAS;AAEjD,MAAM,uBAAuB,UAA2B;CACtD,IAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAChD,OAAO,OAAO,KAAK;CAErB,OAAO;AACT;AAEA,MAAM,YACJ,QACmD;CACnD,IAAI,MAAM,QAAQ,GAAG,GACnB,OAAO;CAET,OAAO,CAAC,GAAG;AACb;AAEA,MAAM,gBACJ,WACA,UAA+B,QAC/B,cAAuC,yBACZ;CAC3B,MAAM,OAA+B;EACnC,UAAU;EACV,iBAAiB;EACjB,aAAa;EACb,cAAc;EACd,YAAY,QAAiD;GAC3D,MAAM,SAAS,SAAS,GAAG;GAE3B,IAAI,OAAO,WAAW,cACpB,OAAO;GAET,OAAO,eAAe,cAAc,IAAI,UAAU,MAAM,EAAE;EAC5D;EACA,SAAS;EACT,oBAAoB;EACpB;CACF;CAEA,IAAI,YAAY,QACd,OAAO;EAAE,GAAG;EAAM;CAAY;CAEhC,OAAO;AACT"}

package/dist/cn.d.ts

@@ -0,0 +1,6 @@
+import { ClassValue } from "clsx";
+//#region src/cn.d.ts
+declare const cn: (...inputs: ClassValue[]) => string;
+//#endregion
+export { cn };
+//# sourceMappingURL=cn.d.ts.map