@shtabapp/ui-kit 1.84.0 → 1.85.1

package/dist/utils/chart/core/chartSkeletonConfig.js

@@ -0,0 +1,15 @@
+//#region src/utils/chart/core/chartSkeletonConfig.ts
+var createChartSkeletonInteraction = (skeleton, loadedInteraction) => {
+	if (!skeleton) return loadedInteraction;
+	return {
+		mode: "nearest",
+		intersect: false
+	};
+};
+var createChartSkeletonTooltipEnabled = (skeleton) => !skeleton;
+var resolveChartSkeletonPlugins = (skeleton, plugins) => {
+	if (skeleton) return [];
+	return plugins;
+};
+//#endregion
+export { createChartSkeletonInteraction, createChartSkeletonTooltipEnabled, resolveChartSkeletonPlugins };

package/dist/utils/chart/core/createChartMarkersPlugin.cjs

@@ -0,0 +1,85 @@
+const require_chartCssVariables = require("./chartCssVariables.cjs");
+const require_readCssColor = require("../css/readCssColor.cjs");
+//#region src/utils/chart/core/createChartMarkersPlugin.ts
+var MARKER_RADIUS = 3.5;
+var MARKER_STROKE_WIDTH = 1.5;
+var MARKER_LABEL_OFFSET = 8;
+var MARKER_LABEL_EDGE_OFFSET = 6;
+var MARKER_LABEL_HALF_HEIGHT = 6;
+var MARKER_SURFACE_COLOR_VARIABLE = "--s-ui-color-surface-primary";
+var MARKER_LABEL_COLOR_VARIABLE = "--s-ui-color-text-surface-secondary";
+var CSS_VARIABLE_PREFIX = "--";
+var CSS_VAR_FUNCTION_PATTERN = /^var\(\s*(--[^,)]+)\s*\)$/;
+var resolveMarkerFont = (colorHostElement) => {
+	if (typeof window === "undefined") return "500 10px sans-serif";
+	const target = colorHostElement ?? document.documentElement;
+	return `500 10px ${getComputedStyle(target).getPropertyValue("--s-ui-font-family-label").trim() || "sans-serif"}`;
+};
+var resolveMarkerColor = (color, colorHostElement, fallback) => {
+	if (!color) return fallback;
+	const cssVariableName = color.startsWith(CSS_VARIABLE_PREFIX) ? color : CSS_VAR_FUNCTION_PATTERN.exec(color)?.[1];
+	if (cssVariableName) return require_readCssColor.readCssColor(cssVariableName, colorHostElement) || fallback;
+	return color;
+};
+var resolveLabelLeft = (pointX, markerIndex, pointCount, textWidth, side, chartArea) => {
+	const isFirst = markerIndex === 0;
+	const isLast = markerIndex === pointCount - 1;
+	const edgeOffset = side === "aside" ? 11.5 : MARKER_LABEL_EDGE_OFFSET;
+	const preferredLeft = isLast ? pointX - edgeOffset - textWidth : isFirst || side === "aside" ? pointX + edgeOffset : pointX - textWidth / 2;
+	return Math.min(Math.max(preferredLeft, chartArea.left), chartArea.right - textWidth);
+};
+var resolveLabelSide = (point, neighbours, marker, chartArea) => {
+	const aboveY = point.y - MARKER_RADIUS - MARKER_LABEL_OFFSET;
+	const belowY = point.y + MARKER_RADIUS + MARKER_LABEL_OFFSET;
+	const fitsAbove = aboveY - MARKER_LABEL_HALF_HEIGHT >= chartArea.top;
+	const fitsBelow = belowY + MARKER_LABEL_HALF_HEIGHT <= chartArea.bottom;
+	const isLocalMaximum = neighbours.every((neighbour) => neighbour.y >= point.y);
+	const isLocalMinimum = neighbours.every((neighbour) => neighbour.y <= point.y);
+	if (marker.above && fitsAbove) return "above";
+	if (Boolean(marker.below) || isLocalMinimum && !isLocalMaximum) return fitsBelow ? "below" : fitsAbove && !isLocalMinimum ? "above" : "aside";
+	if (fitsAbove) return "above";
+	return isLocalMaximum ? "aside" : fitsBelow ? "below" : "aside";
+};
+var resolveLabelY = (point, side) => {
+	if (side === "above") return point.y - MARKER_RADIUS - MARKER_LABEL_OFFSET;
+	return side === "below" ? point.y + MARKER_RADIUS + MARKER_LABEL_OFFSET : point.y;
+};
+var createChartMarkersPlugin = ({ markers, datasetIndex = 0 }, colorHostElement) => ({
+	id: "sUiChartMarkers",
+	afterDatasetsDraw(chart) {
+		if (markers.length === 0) return;
+		const datasetMeta = chart.getDatasetMeta(datasetIndex);
+		const { ctx, chartArea } = chart;
+		if (!datasetMeta || !chartArea) return;
+		const defaultMarkerColor = require_readCssColor.readCssColor(require_chartCssVariables.CHART_CSS_VARIABLES.seriesPrimary, colorHostElement);
+		const surfaceColor = require_readCssColor.readCssColor(MARKER_SURFACE_COLOR_VARIABLE, colorHostElement);
+		const defaultLabelColor = require_readCssColor.readCssColor(MARKER_LABEL_COLOR_VARIABLE, colorHostElement);
+		const pointCount = datasetMeta.data.length;
+		ctx.save();
+		ctx.font = resolveMarkerFont(colorHostElement);
+		ctx.textAlign = "left";
+		ctx.textBaseline = "middle";
+		markers.forEach((marker) => {
+			const pointElement = datasetMeta.data[marker.index];
+			if (!pointElement) return;
+			const markerColor = resolveMarkerColor(marker.color, colorHostElement, defaultMarkerColor);
+			ctx.beginPath();
+			ctx.arc(pointElement.x, pointElement.y, MARKER_RADIUS, 0, Math.PI * 2);
+			ctx.fillStyle = marker.hollow ? surfaceColor : markerColor;
+			ctx.fill();
+			ctx.lineWidth = MARKER_STROKE_WIDTH;
+			ctx.strokeStyle = marker.hollow ? markerColor : surfaceColor;
+			ctx.stroke();
+			if (!marker.label) return;
+			const textWidth = ctx.measureText(marker.label).width;
+			const side = resolveLabelSide(pointElement, [datasetMeta.data[marker.index - 1], datasetMeta.data[marker.index + 1]].filter((neighbour) => neighbour !== void 0), marker, chartArea);
+			const labelLeft = resolveLabelLeft(pointElement.x, marker.index, pointCount, textWidth, side, chartArea);
+			const labelY = resolveLabelY(pointElement, side);
+			ctx.fillStyle = marker.color && !marker.hollow ? markerColor : defaultLabelColor;
+			ctx.fillText(marker.label, labelLeft, labelY);
+		});
+		ctx.restore();
+	}
+});
+//#endregion
+exports.createChartMarkersPlugin = createChartMarkersPlugin;

package/dist/utils/chart/core/createChartMarkersPlugin.js

@@ -0,0 +1,85 @@
+import { CHART_CSS_VARIABLES } from "./chartCssVariables.js";
+import { readCssColor } from "../css/readCssColor.js";
+//#region src/utils/chart/core/createChartMarkersPlugin.ts
+var MARKER_RADIUS = 3.5;
+var MARKER_STROKE_WIDTH = 1.5;
+var MARKER_LABEL_OFFSET = 8;
+var MARKER_LABEL_EDGE_OFFSET = 6;
+var MARKER_LABEL_HALF_HEIGHT = 6;
+var MARKER_SURFACE_COLOR_VARIABLE = "--s-ui-color-surface-primary";
+var MARKER_LABEL_COLOR_VARIABLE = "--s-ui-color-text-surface-secondary";
+var CSS_VARIABLE_PREFIX = "--";
+var CSS_VAR_FUNCTION_PATTERN = /^var\(\s*(--[^,)]+)\s*\)$/;
+var resolveMarkerFont = (colorHostElement) => {
+	if (typeof window === "undefined") return "500 10px sans-serif";
+	const target = colorHostElement ?? document.documentElement;
+	return `500 10px ${getComputedStyle(target).getPropertyValue("--s-ui-font-family-label").trim() || "sans-serif"}`;
+};
+var resolveMarkerColor = (color, colorHostElement, fallback) => {
+	if (!color) return fallback;
+	const cssVariableName = color.startsWith(CSS_VARIABLE_PREFIX) ? color : CSS_VAR_FUNCTION_PATTERN.exec(color)?.[1];
+	if (cssVariableName) return readCssColor(cssVariableName, colorHostElement) || fallback;
+	return color;
+};
+var resolveLabelLeft = (pointX, markerIndex, pointCount, textWidth, side, chartArea) => {
+	const isFirst = markerIndex === 0;
+	const isLast = markerIndex === pointCount - 1;
+	const edgeOffset = side === "aside" ? 11.5 : MARKER_LABEL_EDGE_OFFSET;
+	const preferredLeft = isLast ? pointX - edgeOffset - textWidth : isFirst || side === "aside" ? pointX + edgeOffset : pointX - textWidth / 2;
+	return Math.min(Math.max(preferredLeft, chartArea.left), chartArea.right - textWidth);
+};
+var resolveLabelSide = (point, neighbours, marker, chartArea) => {
+	const aboveY = point.y - MARKER_RADIUS - MARKER_LABEL_OFFSET;
+	const belowY = point.y + MARKER_RADIUS + MARKER_LABEL_OFFSET;
+	const fitsAbove = aboveY - MARKER_LABEL_HALF_HEIGHT >= chartArea.top;
+	const fitsBelow = belowY + MARKER_LABEL_HALF_HEIGHT <= chartArea.bottom;
+	const isLocalMaximum = neighbours.every((neighbour) => neighbour.y >= point.y);
+	const isLocalMinimum = neighbours.every((neighbour) => neighbour.y <= point.y);
+	if (marker.above && fitsAbove) return "above";
+	if (Boolean(marker.below) || isLocalMinimum && !isLocalMaximum) return fitsBelow ? "below" : fitsAbove && !isLocalMinimum ? "above" : "aside";
+	if (fitsAbove) return "above";
+	return isLocalMaximum ? "aside" : fitsBelow ? "below" : "aside";
+};
+var resolveLabelY = (point, side) => {
+	if (side === "above") return point.y - MARKER_RADIUS - MARKER_LABEL_OFFSET;
+	return side === "below" ? point.y + MARKER_RADIUS + MARKER_LABEL_OFFSET : point.y;
+};
+var createChartMarkersPlugin = ({ markers, datasetIndex = 0 }, colorHostElement) => ({
+	id: "sUiChartMarkers",
+	afterDatasetsDraw(chart) {
+		if (markers.length === 0) return;
+		const datasetMeta = chart.getDatasetMeta(datasetIndex);
+		const { ctx, chartArea } = chart;
+		if (!datasetMeta || !chartArea) return;
+		const defaultMarkerColor = readCssColor(CHART_CSS_VARIABLES.seriesPrimary, colorHostElement);
+		const surfaceColor = readCssColor(MARKER_SURFACE_COLOR_VARIABLE, colorHostElement);
+		const defaultLabelColor = readCssColor(MARKER_LABEL_COLOR_VARIABLE, colorHostElement);
+		const pointCount = datasetMeta.data.length;
+		ctx.save();
+		ctx.font = resolveMarkerFont(colorHostElement);
+		ctx.textAlign = "left";
+		ctx.textBaseline = "middle";
+		markers.forEach((marker) => {
+			const pointElement = datasetMeta.data[marker.index];
+			if (!pointElement) return;
+			const markerColor = resolveMarkerColor(marker.color, colorHostElement, defaultMarkerColor);
+			ctx.beginPath();
+			ctx.arc(pointElement.x, pointElement.y, MARKER_RADIUS, 0, Math.PI * 2);
+			ctx.fillStyle = marker.hollow ? surfaceColor : markerColor;
+			ctx.fill();
+			ctx.lineWidth = MARKER_STROKE_WIDTH;
+			ctx.strokeStyle = marker.hollow ? markerColor : surfaceColor;
+			ctx.stroke();
+			if (!marker.label) return;
+			const textWidth = ctx.measureText(marker.label).width;
+			const side = resolveLabelSide(pointElement, [datasetMeta.data[marker.index - 1], datasetMeta.data[marker.index + 1]].filter((neighbour) => neighbour !== void 0), marker, chartArea);
+			const labelLeft = resolveLabelLeft(pointElement.x, marker.index, pointCount, textWidth, side, chartArea);
+			const labelY = resolveLabelY(pointElement, side);
+			ctx.fillStyle = marker.color && !marker.hollow ? markerColor : defaultLabelColor;
+			ctx.fillText(marker.label, labelLeft, labelY);
+		});
+		ctx.restore();
+	}
+});
+//#endregion
+export { createChartMarkersPlugin };

package/dist/utils/chart/core/createCustomTooltipCallbacks.cjs

@@ -0,0 +1,12 @@
+//#region src/utils/chart/core/createCustomTooltipCallbacks.ts
+var createCustomTooltipCallbacks = (formatTooltip) => ({
+	title: () => [],
+	beforeBody: (tooltipItems) => {
+		const firstItem = tooltipItems[0];
+		return firstItem ? formatTooltip(firstItem.dataIndex) : [];
+	},
+	label: () => [],
+	footer: () => []
+});
+//#endregion
+exports.createCustomTooltipCallbacks = createCustomTooltipCallbacks;

package/dist/utils/chart/core/createCustomTooltipCallbacks.js

@@ -0,0 +1,12 @@
+//#region src/utils/chart/core/createCustomTooltipCallbacks.ts
+var createCustomTooltipCallbacks = (formatTooltip) => ({
+	title: () => [],
+	beforeBody: (tooltipItems) => {
+		const firstItem = tooltipItems[0];
+		return firstItem ? formatTooltip(firstItem.dataIndex) : [];
+	},
+	label: () => [],
+	footer: () => []
+});
+//#endregion
+export { createCustomTooltipCallbacks };

package/dist/utils/chart/core/createZeroLinePlugin.cjs

@@ -0,0 +1,24 @@
+const require_chartCssVariables = require("./chartCssVariables.cjs");
+const require_readCssColor = require("../css/readCssColor.cjs");
+//#region src/utils/chart/core/createZeroLinePlugin.ts
+var ZERO_LINE_DASH = [4, 4];
+var createZeroLinePlugin = (colorHostElement) => ({
+	id: "sUiChartZeroLine",
+	beforeDatasetsDraw(chart) {
+		const { ctx, chartArea } = chart;
+		const yScale = chart.scales.y;
+		if (!chartArea || !yScale || yScale.min >= 0 || yScale.max <= 0) return;
+		const zeroY = yScale.getPixelForValue(0);
+		ctx.save();
+		ctx.beginPath();
+		ctx.setLineDash(ZERO_LINE_DASH);
+		ctx.moveTo(chartArea.left, zeroY);
+		ctx.lineTo(chartArea.right, zeroY);
+		ctx.lineWidth = 1;
+		ctx.strokeStyle = require_readCssColor.readCssColor(require_chartCssVariables.CHART_CSS_VARIABLES.axisLabel, colorHostElement);
+		ctx.stroke();
+		ctx.restore();
+	}
+});
+//#endregion
+exports.createZeroLinePlugin = createZeroLinePlugin;

package/dist/utils/chart/core/createZeroLinePlugin.js

@@ -0,0 +1,24 @@
+import { CHART_CSS_VARIABLES } from "./chartCssVariables.js";
+import { readCssColor } from "../css/readCssColor.js";
+//#region src/utils/chart/core/createZeroLinePlugin.ts
+var ZERO_LINE_DASH = [4, 4];
+var createZeroLinePlugin = (colorHostElement) => ({
+	id: "sUiChartZeroLine",
+	beforeDatasetsDraw(chart) {
+		const { ctx, chartArea } = chart;
+		const yScale = chart.scales.y;
+		if (!chartArea || !yScale || yScale.min >= 0 || yScale.max <= 0) return;
+		const zeroY = yScale.getPixelForValue(0);
+		ctx.save();
+		ctx.beginPath();
+		ctx.setLineDash(ZERO_LINE_DASH);
+		ctx.moveTo(chartArea.left, zeroY);
+		ctx.lineTo(chartArea.right, zeroY);
+		ctx.lineWidth = 1;
+		ctx.strokeStyle = readCssColor(CHART_CSS_VARIABLES.axisLabel, colorHostElement);
+		ctx.stroke();
+		ctx.restore();
+	}
+});
+//#endregion
+export { createZeroLinePlugin };

package/dist/utils/chart/core/registerChartJs.cjs

@@ -0,0 +1,42 @@
+const require_createStackedBarTooltipCallbacks = require("../bar/createStackedBarTooltipCallbacks.cjs");
+const require_createMultiLineTooltipCallbacks = require("../multiLine/createMultiLineTooltipCallbacks.cjs");
+const require_createProgressChartTooltipPositioner = require("../progress/createProgressChartTooltipPositioner.cjs");
+const require_createStackedAreaTooltipCallbacks = require("../stacked/createStackedAreaTooltipCallbacks.cjs");
+let chart_js = require("chart.js");
+//#region src/utils/chart/core/registerChartJs.ts
+var isChartJsRegistered = false;
+var isStackedAreaTooltipPositionerRegistered = false;
+var isStackedBarTooltipPositionerRegistered = false;
+var isProgressChartTooltipPositionerRegistered = false;
+var isMultiLineTooltipPositionerRegistered = false;
+var ensureStackedAreaTooltipPositionerRegistered = () => {
+	if (isStackedAreaTooltipPositionerRegistered) return;
+	chart_js.Tooltip.positioners.stackedAreaTop = require_createStackedAreaTooltipCallbacks.stackedAreaTooltipPositioner;
+	isStackedAreaTooltipPositionerRegistered = true;
+};
+var ensureStackedBarTooltipPositionerRegistered = () => {
+	if (isStackedBarTooltipPositionerRegistered) return;
+	chart_js.Tooltip.positioners.stackedBarTop = require_createStackedBarTooltipCallbacks.stackedBarTooltipPositioner;
+	isStackedBarTooltipPositionerRegistered = true;
+};
+var ensureProgressChartTooltipPositionerRegistered = () => {
+	if (isProgressChartTooltipPositionerRegistered) return;
+	chart_js.Tooltip.positioners.progressChartPoint = require_createProgressChartTooltipPositioner.progressChartPointTooltipPositioner;
+	isProgressChartTooltipPositionerRegistered = true;
+};
+var ensureMultiLineTooltipPositionerRegistered = () => {
+	if (isMultiLineTooltipPositionerRegistered) return;
+	chart_js.Tooltip.positioners.multiLineTop = require_createMultiLineTooltipCallbacks.multiLineTooltipPositioner;
+	isMultiLineTooltipPositionerRegistered = true;
+};
+var ensureChartJsRegistered = () => {
+	if (isChartJsRegistered) return;
+	chart_js.Chart.register(chart_js.LineController, chart_js.LineElement, chart_js.PointElement, chart_js.ScatterController, chart_js.BarController, chart_js.BarElement, chart_js.PieController, chart_js.ArcElement, chart_js.LinearScale, chart_js.CategoryScale, chart_js.Tooltip, chart_js.Filler);
+	ensureStackedAreaTooltipPositionerRegistered();
+	ensureStackedBarTooltipPositionerRegistered();
+	ensureProgressChartTooltipPositionerRegistered();
+	ensureMultiLineTooltipPositionerRegistered();
+	isChartJsRegistered = true;
+};
+//#endregion
+exports.ensureChartJsRegistered = ensureChartJsRegistered;

package/dist/utils/chart/core/registerChartJs.js

@@ -0,0 +1,42 @@
+import { stackedBarTooltipPositioner } from "../bar/createStackedBarTooltipCallbacks.js";
+import { multiLineTooltipPositioner } from "../multiLine/createMultiLineTooltipCallbacks.js";
+import { progressChartPointTooltipPositioner } from "../progress/createProgressChartTooltipPositioner.js";
+import { stackedAreaTooltipPositioner } from "../stacked/createStackedAreaTooltipCallbacks.js";
+import { ArcElement, BarController, BarElement, CategoryScale, Chart, Filler, LineController, LineElement, LinearScale, PieController, PointElement, ScatterController, Tooltip } from "chart.js";
+//#region src/utils/chart/core/registerChartJs.ts
+var isChartJsRegistered = false;
+var isStackedAreaTooltipPositionerRegistered = false;
+var isStackedBarTooltipPositionerRegistered = false;
+var isProgressChartTooltipPositionerRegistered = false;
+var isMultiLineTooltipPositionerRegistered = false;
+var ensureStackedAreaTooltipPositionerRegistered = () => {
+	if (isStackedAreaTooltipPositionerRegistered) return;
+	Tooltip.positioners.stackedAreaTop = stackedAreaTooltipPositioner;
+	isStackedAreaTooltipPositionerRegistered = true;
+};
+var ensureStackedBarTooltipPositionerRegistered = () => {
+	if (isStackedBarTooltipPositionerRegistered) return;
+	Tooltip.positioners.stackedBarTop = stackedBarTooltipPositioner;
+	isStackedBarTooltipPositionerRegistered = true;
+};
+var ensureProgressChartTooltipPositionerRegistered = () => {
+	if (isProgressChartTooltipPositionerRegistered) return;
+	Tooltip.positioners.progressChartPoint = progressChartPointTooltipPositioner;
+	isProgressChartTooltipPositionerRegistered = true;
+};
+var ensureMultiLineTooltipPositionerRegistered = () => {
+	if (isMultiLineTooltipPositionerRegistered) return;
+	Tooltip.positioners.multiLineTop = multiLineTooltipPositioner;
+	isMultiLineTooltipPositionerRegistered = true;
+};
+var ensureChartJsRegistered = () => {
+	if (isChartJsRegistered) return;
+	Chart.register(LineController, LineElement, PointElement, ScatterController, BarController, BarElement, PieController, ArcElement, LinearScale, CategoryScale, Tooltip, Filler);
+	ensureStackedAreaTooltipPositionerRegistered();
+	ensureStackedBarTooltipPositionerRegistered();
+	ensureProgressChartTooltipPositionerRegistered();
+	ensureMultiLineTooltipPositionerRegistered();
+	isChartJsRegistered = true;
+};
+//#endregion
+export { ensureChartJsRegistered };

package/dist/utils/chart/core/resolveChartValueRange.cjs

@@ -0,0 +1,19 @@
+//#region src/utils/chart/core/resolveChartValueRange.ts
+var DEFAULT_STEPS_ABOVE_ZERO = 5;
+var resolveAutoMax = (roundedPeak, roundedTrough, yStep) => {
+	if (roundedPeak > 0) return roundedPeak;
+	if (roundedTrough < 0) return 0;
+	return yStep * DEFAULT_STEPS_ABOVE_ZERO;
+};
+var resolveChartValueRange = (values, { yMin, yMax, yStep }) => {
+	const peak = values.reduce((currentPeak, value) => Math.max(currentPeak, value), 0);
+	const trough = values.reduce((currentTrough, value) => Math.min(currentTrough, value), 0);
+	const roundedPeak = Math.ceil(peak / yStep) * yStep;
+	const roundedTrough = Math.floor(trough / yStep) * yStep;
+	return {
+		min: yMin ?? roundedTrough,
+		max: yMax ?? resolveAutoMax(roundedPeak, roundedTrough, yStep)
+	};
+};
+//#endregion
+exports.resolveChartValueRange = resolveChartValueRange;

package/dist/utils/chart/core/resolveChartValueRange.js

@@ -0,0 +1,19 @@
+//#region src/utils/chart/core/resolveChartValueRange.ts
+var DEFAULT_STEPS_ABOVE_ZERO = 5;
+var resolveAutoMax = (roundedPeak, roundedTrough, yStep) => {
+	if (roundedPeak > 0) return roundedPeak;
+	if (roundedTrough < 0) return 0;
+	return yStep * DEFAULT_STEPS_ABOVE_ZERO;
+};
+var resolveChartValueRange = (values, { yMin, yMax, yStep }) => {
+	const peak = values.reduce((currentPeak, value) => Math.max(currentPeak, value), 0);
+	const trough = values.reduce((currentTrough, value) => Math.min(currentTrough, value), 0);
+	const roundedPeak = Math.ceil(peak / yStep) * yStep;
+	const roundedTrough = Math.floor(trough / yStep) * yStep;
+	return {
+		min: yMin ?? roundedTrough,
+		max: yMax ?? resolveAutoMax(roundedPeak, roundedTrough, yStep)
+	};
+};
+//#endregion
+export { resolveChartValueRange };

package/dist/utils/chart/core/resolveSeriesPaletteColor.cjs

@@ -0,0 +1,11 @@
+const require_readCssColor = require("../css/readCssColor.cjs");
+const require_resolveCssColorValue = require("../css/resolveCssColorValue.cjs");
+//#region src/utils/chart/core/resolveSeriesPaletteColor.ts
+var resolveSeriesPaletteColor = (index, colorHostElement, fillColor, skeleton, config) => {
+	if (fillColor) return require_resolveCssColorValue.resolveCssColorValue(fillColor, colorHostElement);
+	const palette = skeleton ? config.skeletonPalette : config.palette;
+	const fallback = skeleton ? config.skeletonFallback : config.paletteFallback;
+	return require_readCssColor.readCssColor(palette[index % palette.length] ?? fallback, colorHostElement);
+};
+//#endregion
+exports.resolveSeriesPaletteColor = resolveSeriesPaletteColor;

package/dist/utils/chart/core/resolveSeriesPaletteColor.js

@@ -0,0 +1,11 @@
+import { readCssColor } from "../css/readCssColor.js";
+import { resolveCssColorValue } from "../css/resolveCssColorValue.js";
+//#region src/utils/chart/core/resolveSeriesPaletteColor.ts
+var resolveSeriesPaletteColor = (index, colorHostElement, fillColor, skeleton, config) => {
+	if (fillColor) return resolveCssColorValue(fillColor, colorHostElement);
+	const palette = skeleton ? config.skeletonPalette : config.palette;
+	const fallback = skeleton ? config.skeletonFallback : config.paletteFallback;
+	return readCssColor(palette[index % palette.length] ?? fallback, colorHostElement);
+};
+//#endregion
+export { resolveSeriesPaletteColor };

package/dist/utils/chart/core/splitChartAxisLabel.cjs

@@ -0,0 +1,5 @@
+//#region src/utils/chart/core/splitChartAxisLabel.ts
+var AXIS_LABEL_LINE_SEPARATOR = "\n";
+var splitChartAxisLabel = (label) => label.includes(AXIS_LABEL_LINE_SEPARATOR) ? label.split(AXIS_LABEL_LINE_SEPARATOR) : label;
+//#endregion
+exports.splitChartAxisLabel = splitChartAxisLabel;

package/dist/utils/chart/core/splitChartAxisLabel.js

@@ -0,0 +1,5 @@
+//#region src/utils/chart/core/splitChartAxisLabel.ts
+var AXIS_LABEL_LINE_SEPARATOR = "\n";
+var splitChartAxisLabel = (label) => label.includes(AXIS_LABEL_LINE_SEPARATOR) ? label.split(AXIS_LABEL_LINE_SEPARATOR) : label;
+//#endregion
+export { splitChartAxisLabel };

package/dist/utils/chart/css/applyOpacityToCssColor.cjs

@@ -0,0 +1,8 @@
+//#region src/utils/chart/css/applyOpacityToCssColor.ts
+var applyOpacityToCssColor = (cssColor, opacity) => {
+	if (!cssColor || opacity >= 1) return cssColor;
+	if (opacity <= 0) return "transparent";
+	return `color-mix(in srgb, ${cssColor} ${Math.round(opacity * 100)}%, transparent)`;
+};
+//#endregion
+exports.applyOpacityToCssColor = applyOpacityToCssColor;

package/dist/utils/chart/css/applyOpacityToCssColor.js

@@ -0,0 +1,8 @@
+//#region src/utils/chart/css/applyOpacityToCssColor.ts
+var applyOpacityToCssColor = (cssColor, opacity) => {
+	if (!cssColor || opacity >= 1) return cssColor;
+	if (opacity <= 0) return "transparent";
+	return `color-mix(in srgb, ${cssColor} ${Math.round(opacity * 100)}%, transparent)`;
+};
+//#endregion
+export { applyOpacityToCssColor };

package/dist/utils/chart/css/readCssColor.cjs

@@ -0,0 +1,8 @@
+//#region src/utils/chart/css/readCssColor.ts
+var readCssColor = (cssVariableName, element) => {
+	if (typeof window === "undefined") return "";
+	const target = element ?? document.documentElement;
+	return getComputedStyle(target).getPropertyValue(cssVariableName).trim();
+};
+//#endregion
+exports.readCssColor = readCssColor;

package/dist/utils/chart/css/readCssColor.js

@@ -0,0 +1,8 @@
+//#region src/utils/chart/css/readCssColor.ts
+var readCssColor = (cssVariableName, element) => {
+	if (typeof window === "undefined") return "";
+	const target = element ?? document.documentElement;
+	return getComputedStyle(target).getPropertyValue(cssVariableName).trim();
+};
+//#endregion
+export { readCssColor };

package/dist/utils/chart/css/readCssNumber.cjs

@@ -0,0 +1,11 @@
+//#region src/utils/chart/css/readCssNumber.ts
+var readCssNumber = (cssVariableName, element, fallback = 1) => {
+	if (typeof window === "undefined") return fallback;
+	const target = element ?? document.documentElement;
+	const rawValue = getComputedStyle(target).getPropertyValue(cssVariableName).trim();
+	const parsedValue = Number.parseFloat(rawValue);
+	if (Number.isNaN(parsedValue)) return fallback;
+	return parsedValue;
+};
+//#endregion
+exports.readCssNumber = readCssNumber;

package/dist/utils/chart/css/readCssNumber.js

@@ -0,0 +1,11 @@
+//#region src/utils/chart/css/readCssNumber.ts
+var readCssNumber = (cssVariableName, element, fallback = 1) => {
+	if (typeof window === "undefined") return fallback;
+	const target = element ?? document.documentElement;
+	const rawValue = getComputedStyle(target).getPropertyValue(cssVariableName).trim();
+	const parsedValue = Number.parseFloat(rawValue);
+	if (Number.isNaN(parsedValue)) return fallback;
+	return parsedValue;
+};
+//#endregion
+export { readCssNumber };

package/dist/utils/chart/css/resolveChartLabelFont.cjs

@@ -0,0 +1,8 @@
+//#region src/utils/chart/css/resolveChartLabelFont.ts
+var LABEL_FONT_FAMILY_VARIABLE = "--s-ui-font-family-label";
+var FALLBACK_FONT_FAMILY = "sans-serif";
+var resolveChartLabelFont = ({ size, weight, colorHostElement }) => {
+	return `${weight} ${size}px ${typeof window === "undefined" ? FALLBACK_FONT_FAMILY : getComputedStyle(colorHostElement ?? document.documentElement).getPropertyValue(LABEL_FONT_FAMILY_VARIABLE).trim() || FALLBACK_FONT_FAMILY}`;
+};
+//#endregion
+exports.resolveChartLabelFont = resolveChartLabelFont;

package/dist/utils/chart/css/resolveChartLabelFont.js

@@ -0,0 +1,8 @@
+//#region src/utils/chart/css/resolveChartLabelFont.ts
+var LABEL_FONT_FAMILY_VARIABLE = "--s-ui-font-family-label";
+var FALLBACK_FONT_FAMILY = "sans-serif";
+var resolveChartLabelFont = ({ size, weight, colorHostElement }) => {
+	return `${weight} ${size}px ${typeof window === "undefined" ? FALLBACK_FONT_FAMILY : getComputedStyle(colorHostElement ?? document.documentElement).getPropertyValue(LABEL_FONT_FAMILY_VARIABLE).trim() || FALLBACK_FONT_FAMILY}`;
+};
+//#endregion
+export { resolveChartLabelFont };

package/dist/utils/chart/css/resolveCssColorValue.cjs

@@ -0,0 +1,10 @@
+const require_readCssColor = require("./readCssColor.cjs");
+//#region src/utils/chart/css/resolveCssColorValue.ts
+var CSS_VAR_FUNCTION_PATTERN = /^var\(\s*(--[^,)\s]+)\s*\)$/;
+var resolveCssColorValue = (color, colorHostElement) => {
+	const cssVariableName = color.startsWith("--") ? color : CSS_VAR_FUNCTION_PATTERN.exec(color.trim())?.[1];
+	if (!cssVariableName) return color;
+	return require_readCssColor.readCssColor(cssVariableName, colorHostElement) || color;
+};
+//#endregion
+exports.resolveCssColorValue = resolveCssColorValue;

package/dist/utils/chart/css/resolveCssColorValue.js

@@ -0,0 +1,10 @@
+import { readCssColor } from "./readCssColor.js";
+//#region src/utils/chart/css/resolveCssColorValue.ts
+var CSS_VAR_FUNCTION_PATTERN = /^var\(\s*(--[^,)\s]+)\s*\)$/;
+var resolveCssColorValue = (color, colorHostElement) => {
+	const cssVariableName = color.startsWith("--") ? color : CSS_VAR_FUNCTION_PATTERN.exec(color.trim())?.[1];
+	if (!cssVariableName) return color;
+	return readCssColor(cssVariableName, colorHostElement) || color;
+};
+//#endregion
+export { resolveCssColorValue };

package/dist/utils/chart/horizontalBar/buildHorizontalBarChartConfig.cjs

@@ -0,0 +1,96 @@
+const require_chartCssVariables = require("../core/chartCssVariables.cjs");
+const require_readCssColor = require("../css/readCssColor.cjs");
+const require_chartSkeletonConfig = require("../core/chartSkeletonConfig.cjs");
+const require_chartInteractivity = require("../core/chartInteractivity.cjs");
+const require_buildHorizontalBarChartScales = require("./buildHorizontalBarChartScales.cjs");
+const require_createHorizontalBarValueLabelPlugin = require("./createHorizontalBarValueLabelPlugin.cjs");
+const require_resolveHorizontalBarColor = require("./resolveHorizontalBarColor.cjs");
+const require_resolveHorizontalBarXMax = require("./resolveHorizontalBarXMax.cjs");
+//#region src/utils/chart/horizontalBar/buildHorizontalBarChartConfig.ts
+var DEFAULT_X_STEP = 10;
+var DEFAULT_X_MIN = 0;
+var BAR_THICKNESS = 36;
+var BAR_BORDER_RADIUS = 4;
+var buildHorizontalBarChartConfig = ({ items, colorHostElement, xMax, xMin = DEFAULT_X_MIN, xStep = DEFAULT_X_STEP, skeleton = false, barThickness = BAR_THICKNESS, mirrorXAxis = false, showValues = false, formatValue, formatXTick, formatTooltip, onBarClick }) => {
+	if (items.length === 0) return null;
+	const axisLabelColor = require_readCssColor.readCssColor(require_chartCssVariables.CHART_CSS_VARIABLES.axisLabel, colorHostElement);
+	const gridColor = require_readCssColor.readCssColor(require_chartCssVariables.CHART_CSS_VARIABLES.grid, colorHostElement);
+	const tooltipBackgroundColor = require_readCssColor.readCssColor(require_chartCssVariables.CHART_CSS_VARIABLES.tooltipBackground, colorHostElement);
+	const tooltipTextColor = require_readCssColor.readCssColor(require_chartCssVariables.CHART_CSS_VARIABLES.tooltipText, colorHostElement);
+	const categoryLabelColor = require_readCssColor.readCssColor(skeleton ? require_chartCssVariables.CHART_CSS_VARIABLES.barHorizontalCategoryLabelSkeleton : require_chartCssVariables.CHART_CSS_VARIABLES.barHorizontalCategoryLabel, colorHostElement);
+	const resolvedXMax = require_resolveHorizontalBarXMax.resolveHorizontalBarXMax(items, xMax, xStep);
+	const barColors = items.map((item) => require_resolveHorizontalBarColor.resolveHorizontalBarColor(item.color, colorHostElement, skeleton));
+	const interactivity = require_chartInteractivity.createChartInteractivity({
+		kind: "element",
+		skeleton,
+		colorHostElement,
+		onIndexClick: onBarClick
+	});
+	return {
+		type: "bar",
+		data: {
+			labels: items.map((item) => item.label),
+			datasets: [{
+				data: items.map((item) => item.value),
+				backgroundColor: barColors,
+				hoverBackgroundColor: barColors,
+				borderWidth: 0,
+				hoverBorderWidth: 0,
+				barThickness,
+				borderRadius: {
+					topRight: BAR_BORDER_RADIUS,
+					bottomRight: BAR_BORDER_RADIUS
+				}
+			}]
+		},
+		options: {
+			indexAxis: "y",
+			responsive: true,
+			layout: showValues && !skeleton ? { padding: { right: require_createHorizontalBarValueLabelPlugin.resolveHorizontalBarValueLabelPadding({
+				values: items.map((item) => item.value),
+				colorHostElement,
+				formatValue
+			}) } } : void 0,
+			maintainAspectRatio: false,
+			onHover: interactivity.onHover,
+			onClick: interactivity.onClick,
+			interaction: require_chartSkeletonConfig.createChartSkeletonInteraction(skeleton, {
+				mode: "index",
+				axis: "y",
+				intersect: false
+			}),
+			plugins: {
+				legend: { display: false },
+				tooltip: {
+					enabled: require_chartSkeletonConfig.createChartSkeletonTooltipEnabled(skeleton),
+					backgroundColor: tooltipBackgroundColor,
+					titleColor: tooltipTextColor,
+					bodyColor: tooltipTextColor,
+					...formatTooltip ? {
+						displayColors: false,
+						callbacks: {
+							title: () => [],
+							label: (context) => formatTooltip(context.dataIndex)
+						}
+					} : {}
+				}
+			},
+			scales: require_buildHorizontalBarChartScales.buildHorizontalBarChartScales({
+				axisLabelColor,
+				categoryLabelColor,
+				gridColor,
+				xMin,
+				xMax: resolvedXMax,
+				xStep,
+				mirrorXAxis,
+				formatXTick
+			})
+		},
+		plugins: showValues && !skeleton ? [...interactivity.plugins, require_createHorizontalBarValueLabelPlugin.createHorizontalBarValueLabelPlugin({
+			colorHostElement,
+			formatValue
+		})] : interactivity.plugins
+	};
+};
+//#endregion
+exports.buildHorizontalBarChartConfig = buildHorizontalBarChartConfig;