@galaxy-io/dls 1.0.3

package/dist/beacons/Beacon.js

@@ -0,0 +1,68 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+/* empty css                 */
+import { styled } from "@linaria/react";
+import { match } from "ts-pattern";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/beacons/Beacon.tsx
+var BeaconSize = /* @__PURE__ */ function(BeaconSize) {
+	BeaconSize["SMALL"] = "SMALL";
+	BeaconSize["MEDIUM"] = "MEDIUM";
+	BeaconSize["LARGE"] = "LARGE";
+	return BeaconSize;
+}({});
+var BeaconVariant = /* @__PURE__ */ function(BeaconVariant) {
+	BeaconVariant["BASE"] = "BASE";
+	BeaconVariant["PRIMARY"] = "PRIMARY";
+	BeaconVariant["SECONDARY"] = "SECONDARY";
+	BeaconVariant["TERTIARY"] = "TERTIARY";
+	BeaconVariant["SUCCESS"] = "SUCCESS";
+	BeaconVariant["ERROR"] = "ERROR";
+	BeaconVariant["WARNING"] = "WARNING";
+	BeaconVariant["LIME"] = "LIME";
+	BeaconVariant["YELLOW"] = "YELLOW";
+	BeaconVariant["BLUE"] = "BLUE";
+	BeaconVariant["ORANGE"] = "ORANGE";
+	BeaconVariant["PINK"] = "PINK";
+	BeaconVariant["PURPLE"] = "PURPLE";
+	BeaconVariant["TEAL"] = "TEAL";
+	BeaconVariant["DISABLED"] = "DISABLED";
+	return BeaconVariant;
+}({});
+var _exp2 = () => ({ $size }) => match($size).returnType().with("SMALL", () => "6px").with("MEDIUM", () => "8px").with("LARGE", () => "10px").exhaustive();
+var BeaconWrapper = /*#__PURE__*/ styled("div")({
+	name: "BeaconWrapper",
+	class: "bjccs5e",
+	propsAsIs: false,
+	vars: { "bjccs5e-0": [_exp2()] }
+});
+var _exp3 = () => ({ $speed }) => $speed ?? 2;
+var _exp4 = () => ({ $variant, theme }) => {
+	return match($variant).returnType().with("BASE", () => theme.color.icon.primary).with("PRIMARY", () => theme.color.icon.primary).with("SECONDARY", () => theme.color.icon.secondary).with("TERTIARY", () => theme.color.background.tertiaryAlt).with("SUCCESS", () => theme.color.border.success).with("ERROR", () => theme.color.border.error).with("WARNING", () => theme.color.border.warning).with("LIME", () => theme.color.background.limeAlt).with("YELLOW", () => theme.color.background.yellowAlt).with("BLUE", () => theme.color.icon.blue).with("ORANGE", () => theme.color.background.orangeAlt).with("PINK", () => theme.color.background.pinkAlt).with("PURPLE", () => theme.color.background.purpleAlt).with("TEAL", () => theme.color.background.tealAlt).with("DISABLED", () => theme.color.background.disabled).exhaustive();
+};
+var BeaconPulse = withTheme(/*#__PURE__*/ styled("span")({
+	name: "BeaconPulse",
+	class: "barhcbn",
+	propsAsIs: false,
+	vars: {
+		"barhcbn-0": [_exp3(), "s"],
+		"barhcbn-1": [_exp4()]
+	}
+}));
+var _exp5 = () => ({ $variant, theme }) => {
+	return match($variant).returnType().with("BASE", () => theme.color.background.baseAlt).with("PRIMARY", () => theme.color.background.primaryAlt).with("SECONDARY", () => theme.color.background.secondaryAlt).with("TERTIARY", () => theme.color.background.tertiaryAlt).with("SUCCESS", () => theme.color.icon.success).with("ERROR", () => theme.color.icon.error).with("WARNING", () => theme.color.icon.warning).with("LIME", () => theme.color.background.limeAlt).with("YELLOW", () => theme.color.background.yellowAlt).with("BLUE", () => theme.color.icon.blue).with("ORANGE", () => theme.color.background.orangeAlt).with("PINK", () => theme.color.background.pinkAlt).with("PURPLE", () => theme.color.background.purpleAlt).with("TEAL", () => theme.color.background.tealAlt).with("DISABLED", () => theme.color.border.disabled).exhaustive();
+};
+var BeaconDot = withTheme(/*#__PURE__*/ styled("span")({
+	name: "BeaconDot",
+	class: "bv9nmr4",
+	propsAsIs: false,
+	vars: { "bv9nmr4-0": [_exp5()] }
+}));
+var Beacon = ({ variant = "BASE", size = "MEDIUM", speed, isPulse }) => /* @__PURE__ */ jsxs(BeaconWrapper, {
+	$size: size,
+	children: [isPulse && /* @__PURE__ */ jsx(BeaconPulse, {
+		$variant: variant,
+		$speed: speed
+	}), /* @__PURE__ */ jsx(BeaconDot, { $variant: variant })]
+});
+//#endregion
+export { BeaconSize, BeaconVariant, Beacon as default };

package/dist/buttons/Button.d.ts

@@ -0,0 +1,30 @@
+import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
+export interface ButtonProps {
+    label?: string;
+    icon?: PhosphorIcon;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseLeave?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    isIconTrailing?: boolean;
+    fillWidth?: boolean;
+    isEllipsis?: boolean;
+    cursor?: React.CSSProperties["cursor"];
+}
+export declare enum ButtonVariant {
+    PRIMARY = "PRIMARY",
+    SECONDARY = "SECONDARY",
+    TERTIARY = "TERTIARY",
+    SUCCESS = "SUCCESS",
+    ERROR = "ERROR"
+}
+export declare enum ButtonSize {
+    SMALL = "SMALL",
+    MEDIUM = "MEDIUM",
+    LARGE = "LARGE"
+}
+declare const Button: ({ label, icon, variant, size, onClick, onMouseEnter, onMouseLeave, fillWidth, isLoading, isDisabled, isIconTrailing, isEllipsis, cursor, }: ButtonProps) => import("react").JSX.Element;
+export default Button;

package/dist/buttons/Button.js

@@ -0,0 +1,173 @@
+import { GalaxyTheme } from "../theme/constants.js";
+import { useGalaxyTheme, withTheme } from "../theme/GalaxyTheme.js";
+import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
+import FlexItem from "../containers/FlexItem.js";
+import Icon, { IconVariant } from "../icons/Icon.js";
+/* empty css                 */
+import { styled } from "@linaria/react";
+import { match } from "ts-pattern";
+import { useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/buttons/Button.tsx
+var ButtonVariant = /* @__PURE__ */ function(ButtonVariant) {
+	ButtonVariant["PRIMARY"] = "PRIMARY";
+	ButtonVariant["SECONDARY"] = "SECONDARY";
+	ButtonVariant["TERTIARY"] = "TERTIARY";
+	ButtonVariant["SUCCESS"] = "SUCCESS";
+	ButtonVariant["ERROR"] = "ERROR";
+	return ButtonVariant;
+}({});
+var ButtonSize = /* @__PURE__ */ function(ButtonSize) {
+	ButtonSize["SMALL"] = "SMALL";
+	ButtonSize["MEDIUM"] = "MEDIUM";
+	ButtonSize["LARGE"] = "LARGE";
+	return ButtonSize;
+}({});
+var _exp = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
+var _exp2 = () => ({ $isEllipsis }) => $isEllipsis ? "0" : "auto";
+var _exp3 = () => ({ $isEllipsis }) => $isEllipsis ? "hidden" : "visible";
+var _exp4 = () => ({ $size }) => {
+	return match($size).with("SMALL", () => "4px").with("MEDIUM", () => "6px").with("LARGE", () => "6px").exhaustive();
+};
+var _exp5 = () => ({ $size, $noLabel }) => {
+	return match($size).with("SMALL", () => $noLabel ? "0 6px" : "0 6px").with("MEDIUM", () => $noLabel ? "0 6px" : "0 8px").with("LARGE", () => $noLabel ? "0 8px" : "0 12px").exhaustive();
+};
+var _exp6 = () => ({ $size }) => {
+	return match($size).with("SMALL", () => "24px").with("MEDIUM", () => "28px").with("LARGE", () => "32px").exhaustive();
+};
+var _exp7 = () => ({ theme, $variant }) => {
+	return match($variant).with("PRIMARY", () => theme.color.background.galaxy).with("SECONDARY", () => theme.color.background.primary).with("TERTIARY", () => "transparent").with("SUCCESS", () => theme.color.icon.success).with("ERROR", () => theme.color.icon.error).exhaustive();
+};
+var _exp8 = () => ({ theme, $variant }) => {
+	return match($variant).with("PRIMARY", () => "0.5px solid transparent").with("SECONDARY", () => `0.5px solid ${theme.color.border.primary}`).with("TERTIARY", () => "0.5px solid transparent").with("SUCCESS", () => "0.5px solid transparent").with("ERROR", () => "0.5px solid transparent").exhaustive();
+};
+var _exp9 = () => ({ $cursor }) => $cursor ?? "pointer";
+var _exp0 = () => ({ theme, $variant }) => {
+	return match($variant).with("PRIMARY", () => theme.color.background.galaxyAlt).with("SECONDARY", () => theme.color.background.tertiary).with("TERTIARY", () => theme.color.background.secondary).with("SUCCESS", () => theme.color.background.successAlt).with("ERROR", () => theme.color.background.errorAlt).exhaustive();
+};
+var _exp1 = () => ({ theme, $variant }) => {
+	return match($variant).with("PRIMARY", () => theme.color.border.primary).with("SECONDARY", () => theme.color.border.primary).with("TERTIARY", () => theme.color.border.primary).with("SUCCESS", () => "transparent").with("ERROR", () => "transparent").exhaustive();
+};
+var _exp10 = () => ({ theme, $variant }) => {
+	return match($variant).with("PRIMARY", () => theme.color.background.disabled).with("SECONDARY", () => theme.color.background.disabled).with("TERTIARY", () => "transparent").with("SUCCESS", () => theme.color.background.successAlt).with("ERROR", () => theme.color.background.errorAlt).exhaustive();
+};
+var StyledButton = withTheme(/*#__PURE__*/ styled("button")({
+	name: "StyledButton",
+	class: "s99zquh",
+	propsAsIs: false,
+	vars: {
+		"s99zquh-0": [_exp()],
+		"s99zquh-1": [_exp2()],
+		"s99zquh-2": [_exp3()],
+		"s99zquh-3": [_exp4()],
+		"s99zquh-4": [_exp5()],
+		"s99zquh-5": [_exp6()],
+		"s99zquh-6": [_exp7()],
+		"s99zquh-7": [_exp8()],
+		"s99zquh-8": [_exp9()],
+		"s99zquh-9": [_exp0()],
+		"s99zquh-10": [_exp1()],
+		"s99zquh-11": [_exp10()]
+	}
+}));
+var _exp11 = () => ({ $isEllipsis }) => $isEllipsis ? "1" : "0 1 auto";
+var _exp12 = () => ({ $isEllipsis }) => $isEllipsis ? "0" : "auto";
+var LabelWrapper = /*#__PURE__*/ styled("span")({
+	name: "LabelWrapper",
+	class: "l9yox33",
+	propsAsIs: false,
+	vars: {
+		"l9yox33-0": [_exp11()],
+		"l9yox33-1": [_exp12()]
+	}
+});
+function getTextVariant(variant, galaxyTheme) {
+	return match(variant).with("PRIMARY", () => galaxyTheme === GalaxyTheme.DARK ? TextVariant.PRIMARY : TextVariant.PRIMARY_ALT).with("SECONDARY", () => TextVariant.PRIMARY).with("TERTIARY", () => TextVariant.PRIMARY).with("SUCCESS", () => TextVariant.PRIMARY_ALT).with("ERROR", () => TextVariant.PRIMARY_ALT).exhaustive();
+}
+function getIconVariant(variant, galaxyTheme) {
+	return match(variant).with("PRIMARY", () => galaxyTheme === GalaxyTheme.DARK ? IconVariant.PRIMARY : IconVariant.PRIMARY_ALT).with("SECONDARY", () => IconVariant.PRIMARY).with("TERTIARY", () => IconVariant.PRIMARY).with("SUCCESS", () => IconVariant.PRIMARY_ALT).with("ERROR", () => IconVariant.PRIMARY_ALT).exhaustive();
+}
+var BUTTON_SIZE_TO_TEXT_SIZE_MAP = {
+	["SMALL"]: TextSize.BODY_SM,
+	["MEDIUM"]: TextSize.BODY_MD,
+	["LARGE"]: TextSize.BODY_LG
+};
+var BUTTON_SIZE_TO_ICON_SIZE_MAP = {
+	["SMALL"]: 12,
+	["MEDIUM"]: 14,
+	["LARGE"]: 16
+};
+var Button = ({ label, icon, variant = "PRIMARY", size = "MEDIUM", onClick, onMouseEnter, onMouseLeave, fillWidth, isLoading, isDisabled, isIconTrailing, isEllipsis, cursor }) => {
+	const { galaxyTheme } = useGalaxyTheme();
+	const handleClick = useCallback((e) => {
+		if (isDisabled || isLoading) return;
+		onClick(e);
+	}, [
+		isDisabled,
+		isLoading,
+		onClick
+	]);
+	const renderIcon = useCallback(() => {
+		if (!icon) return null;
+		let iconVariant = getIconVariant(variant, galaxyTheme);
+		if (isDisabled) iconVariant = IconVariant.TERTIARY;
+		return /* @__PURE__ */ jsx(FlexItem, {
+			shrink: 0,
+			grow: 0,
+			children: /* @__PURE__ */ jsx(Icon, {
+				component: icon,
+				variant: iconVariant,
+				size: BUTTON_SIZE_TO_ICON_SIZE_MAP[size]
+			})
+		});
+	}, [
+		icon,
+		variant,
+		size,
+		isDisabled,
+		galaxyTheme
+	]);
+	const renderLabel = useCallback(() => {
+		if (!label) return null;
+		let textVariant = getTextVariant(variant, galaxyTheme);
+		if (isDisabled) textVariant = TextVariant.TERTIARY_ALT;
+		return /* @__PURE__ */ jsx(LabelWrapper, {
+			$isEllipsis: isEllipsis,
+			children: /* @__PURE__ */ jsx(Text, {
+				variant: textVariant,
+				weight: TextWeight.MEDIUM,
+				size: BUTTON_SIZE_TO_TEXT_SIZE_MAP[size],
+				cursor: isDisabled ? "not-allowed" : cursor,
+				isEllipsis,
+				children: label
+			})
+		});
+	}, [
+		label,
+		variant,
+		size,
+		isDisabled,
+		isEllipsis,
+		cursor,
+		galaxyTheme
+	]);
+	return /* @__PURE__ */ jsxs(StyledButton, {
+		$variant: variant,
+		$size: size,
+		$fillWidth: fillWidth,
+		$noLabel: !label,
+		$isEllipsis: isEllipsis,
+		$cursor: cursor,
+		onClick: handleClick,
+		disabled: isDisabled || isLoading,
+		onMouseEnter,
+		onMouseLeave,
+		children: [
+			!isIconTrailing && renderIcon(),
+			label && renderLabel(),
+			isIconTrailing && renderIcon()
+		]
+	});
+};
+//#endregion
+export { ButtonSize, ButtonVariant, Button as default };

package/dist/charts/BarChart.d.ts

@@ -0,0 +1,21 @@
+import type { BaseChartProps } from "./types";
+export declare enum BarChartMode {
+    GROUPED = "GROUPED",
+    STACKED = "STACKED"
+}
+export interface BarChartProps extends BaseChartProps {
+    /** Stacked or grouped bar mode */
+    mode?: BarChartMode;
+    /** Corner radius for bar tops (px) */
+    barRadius?: number;
+    /** Padding between bars within a group (0-1 fraction of bandwidth) */
+    barPaddingInner?: number;
+    /** Padding around outer bar groups (0-1 fraction of step) */
+    barPaddingOuter?: number;
+    /** Show value labels on bars */
+    showValues?: boolean;
+    /** Show grid lines */
+    showGrid?: boolean;
+}
+declare const BarChart: ({ data, series, width, height, margin: marginOverride, fillWidth, aspectRatio, mode, barRadius, barPaddingInner, barPaddingOuter, valueFormatter, labelFormatter, tooltipRenderer, noTooltip, showLegend, showValues, showGrid, ariaLabel, }: BarChartProps) => import("react").JSX.Element;
+export default BarChart;

package/dist/charts/BarChart.js

@@ -0,0 +1,264 @@
+import { useGalaxyTheme, withTheme } from "../theme/GalaxyTheme.js";
+import Text, { TextSize, TextWeight } from "../text/Text.js";
+import FlexWrapper, { AlignItems, FlexDirection, JustifyContent } from "../containers/FlexWrapper.js";
+import { useElementWidth } from "../hooks/useElementWidth.js";
+import Wrapper from "../containers/Wrapper.js";
+import { DEFAULT_BAR_PADDING_INNER, DEFAULT_BAR_PADDING_OUTER, getChartPalette } from "./constants.js";
+import { buildBandScale, buildLinearScale, defaultLabelFormatter, defaultValueFormatter, getGroupedMax, getPlotDimensions, getStackedMax, resolveMargin, resolveSeriesColor, roundedTopRectPath } from "./utils.js";
+import ChartLegend from "./ChartLegend.js";
+import ChartTooltip from "./ChartTooltip.js";
+import { XAxis, YAxis } from "./ChartAxis.js";
+/* empty css                   */
+import { styled } from "@linaria/react";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/charts/BarChart.tsx
+var BarChartMode = /* @__PURE__ */ function(BarChartMode) {
+	BarChartMode["GROUPED"] = "GROUPED";
+	BarChartMode["STACKED"] = "STACKED";
+	return BarChartMode;
+}({});
+var _exp = () => ({ $fillWidth }) => $fillWidth ? "flex" : "inline-flex";
+var _exp2 = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
+var ChartWrapper = withTheme(/*#__PURE__*/ styled("div")({
+	name: "ChartWrapper",
+	class: "c16zjhoz",
+	propsAsIs: false,
+	vars: {
+		"c16zjhoz-0": [_exp()],
+		"c16zjhoz-1": [_exp2()]
+	}
+}));
+var BarChart = ({ data, series, width, height, margin: marginOverride, fillWidth = false, aspectRatio, mode = "STACKED", barRadius = 4, barPaddingInner = DEFAULT_BAR_PADDING_INNER, barPaddingOuter = DEFAULT_BAR_PADDING_OUTER, valueFormatter = defaultValueFormatter, labelFormatter = defaultLabelFormatter, tooltipRenderer, noTooltip = false, showLegend = true, showValues = false, showGrid = true, ariaLabel }) => {
+	const { theme } = useGalaxyTheme();
+	const containerRef = useRef(null);
+	const svgRef = useRef(null);
+	const [tooltip, setTooltip] = useState(null);
+	const [hoveredDatumIndex, setHoveredDatumIndex] = useState(null);
+	const measuredWidth = useElementWidth(containerRef);
+	const resolvedWidth = fillWidth ? measuredWidth ?? 0 : width ?? 0;
+	const resolvedHeight = aspectRatio ? resolvedWidth / aspectRatio : height ?? 0;
+	const palette = useMemo(() => getChartPalette(theme), [theme]);
+	const margin = useMemo(() => resolveMargin(marginOverride), [marginOverride]);
+	const { plotWidth, plotHeight } = useMemo(() => getPlotDimensions(resolvedWidth, resolvedHeight, margin), [
+		resolvedWidth,
+		resolvedHeight,
+		margin
+	]);
+	const seriesKeys = useMemo(() => series.map((s) => s.key), [series]);
+	const labels = useMemo(() => data.map((d) => d.label), [data]);
+	const xScale = useMemo(() => buildBandScale(labels, [0, plotWidth], barPaddingInner, barPaddingOuter), [
+		labels,
+		plotWidth,
+		barPaddingInner,
+		barPaddingOuter
+	]);
+	const yMax = useMemo(() => mode === "STACKED" ? getStackedMax(data, seriesKeys) : getGroupedMax(data, seriesKeys), [
+		data,
+		seriesKeys,
+		mode
+	]);
+	const yScale = useMemo(() => buildLinearScale(yMax, [plotHeight, 0]), [yMax, plotHeight]);
+	const innerScale = useMemo(() => {
+		if (mode !== "GROUPED") return null;
+		return buildBandScale(seriesKeys, [0, xScale.bandwidth()], .05, 0);
+	}, [
+		mode,
+		seriesKeys,
+		xScale
+	]);
+	const handleBarMouseEnter = useCallback((datumIndex, x, y) => {
+		const datum = data[datumIndex];
+		if (!datum) return;
+		setHoveredDatumIndex(datumIndex);
+		setTooltip({
+			label: datum.label,
+			items: series.map((s, i) => ({
+				seriesKey: s.key,
+				seriesName: s.name,
+				value: datum.values[s.key] ?? 0,
+				color: resolveSeriesColor(s, i, palette)
+			})),
+			x: x + margin.left,
+			y: y + margin.top
+		});
+	}, [
+		data,
+		series,
+		palette,
+		margin
+	]);
+	const handleBarMouseLeave = useCallback(() => {
+		setHoveredDatumIndex(null);
+		setTooltip(null);
+	}, []);
+	const handleBarFocus = useCallback((datumIndex, x, y) => {
+		handleBarMouseEnter(datumIndex, x, y);
+	}, [handleBarMouseEnter]);
+	const handleBarBlur = useCallback(() => {
+		handleBarMouseLeave();
+	}, [handleBarMouseLeave]);
+	if (resolvedWidth === 0 || resolvedHeight === 0) return /* @__PURE__ */ jsx(ChartWrapper, {
+		ref: containerRef,
+		$fillWidth: fillWidth
+	});
+	const renderStackedBars = () => {
+		return data.map((datum, datumIndex) => {
+			const x = xScale(datum.label) ?? 0;
+			const bandWidth = xScale.bandwidth();
+			let cumulativeY = plotHeight;
+			return /* @__PURE__ */ jsx("g", { children: series.map((s, seriesIndex) => {
+				const value = datum.values[s.key] ?? 0;
+				if (value === 0) return null;
+				const barHeight = plotHeight - yScale(value);
+				const barY = cumulativeY - barHeight;
+				cumulativeY = barY;
+				const color = resolveSeriesColor(s, seriesIndex, palette);
+				const isTopSegment = seriesIndex === series.length - 1 || series.slice(seriesIndex + 1).every((next) => (datum.values[next.key] ?? 0) === 0);
+				const isDimmed = hoveredDatumIndex !== null && hoveredDatumIndex !== datumIndex;
+				return /* @__PURE__ */ jsxs("g", { children: [isTopSegment ? /* @__PURE__ */ jsx("path", {
+					d: roundedTopRectPath(x, barY, bandWidth, barHeight, barRadius),
+					fill: color,
+					opacity: isDimmed ? .3 : 1,
+					style: { transition: `opacity 150ms ease-in-out` },
+					onMouseEnter: () => handleBarMouseEnter(datumIndex, x + bandWidth / 2, barY),
+					onMouseLeave: handleBarMouseLeave,
+					onFocus: () => handleBarFocus(datumIndex, x + bandWidth / 2, barY),
+					onBlur: handleBarBlur,
+					tabIndex: 0,
+					role: "graphics-symbol",
+					"aria-roledescription": "bar",
+					"aria-label": `${s.name} for ${datum.label}: ${valueFormatter(value)}`
+				}) : /* @__PURE__ */ jsx("rect", {
+					x,
+					y: barY,
+					width: bandWidth,
+					height: barHeight,
+					fill: color,
+					opacity: isDimmed ? .3 : 1,
+					style: { transition: `opacity 150ms ease-in-out` },
+					onMouseEnter: () => handleBarMouseEnter(datumIndex, x + bandWidth / 2, barY),
+					onMouseLeave: handleBarMouseLeave,
+					onFocus: () => handleBarFocus(datumIndex, x + bandWidth / 2, barY),
+					onBlur: handleBarBlur,
+					tabIndex: 0,
+					role: "graphics-symbol",
+					"aria-roledescription": "bar",
+					"aria-label": `${s.name} for ${datum.label}: ${valueFormatter(value)}`
+				}), showValues && isTopSegment && /* @__PURE__ */ jsx("foreignObject", {
+					x,
+					y: barY - 20,
+					width: bandWidth,
+					height: 20,
+					children: /* @__PURE__ */ jsx(FlexWrapper, {
+						justifyContent: JustifyContent.CENTER,
+						alignItems: AlignItems.END,
+						fillWidth: true,
+						fillHeight: true,
+						children: /* @__PURE__ */ jsx(Text, {
+							size: TextSize.CAPTION,
+							weight: TextWeight.MEDIUM,
+							children: valueFormatter(value)
+						})
+					})
+				})] }, s.key);
+			}) }, datum.label);
+		});
+	};
+	const renderGroupedBars = () => {
+		if (!innerScale) return null;
+		return data.map((datum, datumIndex) => {
+			const groupX = xScale(datum.label) ?? 0;
+			const isDimmed = hoveredDatumIndex !== null && hoveredDatumIndex !== datumIndex;
+			return /* @__PURE__ */ jsx("g", {
+				transform: `translate(${groupX}, 0)`,
+				children: series.map((s, seriesIndex) => {
+					const value = datum.values[s.key] ?? 0;
+					if (value === 0) return null;
+					const barX = innerScale(s.key) ?? 0;
+					const barWidth = innerScale.bandwidth();
+					const barHeight = plotHeight - yScale(value);
+					const barY = yScale(value);
+					const color = resolveSeriesColor(s, seriesIndex, palette);
+					return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("path", {
+						d: roundedTopRectPath(barX, barY, barWidth, barHeight, barRadius),
+						fill: color,
+						opacity: isDimmed ? .3 : 1,
+						style: { transition: `opacity 150ms ease-in-out` },
+						onMouseEnter: () => handleBarMouseEnter(datumIndex, groupX + barX + barWidth / 2, barY),
+						onMouseLeave: handleBarMouseLeave,
+						onFocus: () => handleBarFocus(datumIndex, groupX + barX + barWidth / 2, barY),
+						onBlur: handleBarBlur,
+						tabIndex: 0,
+						role: "graphics-symbol",
+						"aria-roledescription": "bar",
+						"aria-label": `${s.name} for ${datum.label}: ${valueFormatter(value)}`
+					}), showValues && /* @__PURE__ */ jsx("foreignObject", {
+						x: barX,
+						y: barY - 20,
+						width: barWidth,
+						height: 20,
+						children: /* @__PURE__ */ jsx(FlexWrapper, {
+							justifyContent: JustifyContent.CENTER,
+							alignItems: AlignItems.END,
+							fillWidth: true,
+							fillHeight: true,
+							children: /* @__PURE__ */ jsx(Text, {
+								size: TextSize.CAPTION,
+								weight: TextWeight.MEDIUM,
+								children: valueFormatter(value)
+							})
+						})
+					})] }, s.key);
+				})
+			}, datum.label);
+		});
+	};
+	const defaultAriaLabel = `Bar chart with ${data.length} categories and ${series.length} series`;
+	return /* @__PURE__ */ jsxs(ChartWrapper, {
+		ref: containerRef,
+		$fillWidth: fillWidth,
+		children: [/* @__PURE__ */ jsxs(Wrapper, {
+			position: "relative",
+			children: [/* @__PURE__ */ jsx("svg", {
+				ref: svgRef,
+				width: resolvedWidth,
+				height: resolvedHeight,
+				role: "img",
+				"aria-label": ariaLabel ?? defaultAriaLabel,
+				children: /* @__PURE__ */ jsxs("g", {
+					transform: `translate(${margin.left}, ${margin.top})`,
+					children: [
+						/* @__PURE__ */ jsx(YAxis, {
+							scale: yScale,
+							transform: "translate(0, 0)",
+							plotWidth,
+							formatter: valueFormatter,
+							showGrid,
+							theme
+						}),
+						/* @__PURE__ */ jsx(XAxis, {
+							scale: xScale,
+							transform: `translate(0, ${plotHeight})`,
+							plotWidth,
+							formatter: labelFormatter
+						}),
+						mode === "STACKED" ? renderStackedBars() : renderGroupedBars()
+					]
+				})
+			}), !noTooltip && (tooltipRenderer ? tooltip && tooltipRenderer(tooltip) : /* @__PURE__ */ jsx(ChartTooltip, {
+				data: tooltip,
+				valueFormatter
+			}))]
+		}), showLegend && /* @__PURE__ */ jsxs(FlexWrapper, {
+			direction: FlexDirection.ROW,
+			gap: 0,
+			children: [/* @__PURE__ */ jsx(Wrapper, { minWidth: margin.left }), /* @__PURE__ */ jsx(ChartLegend, {
+				series,
+				palette
+			})]
+		})]
+	});
+};
+//#endregion
+export { BarChartMode, BarChart as default };

package/dist/charts/ChartAxis.d.ts

@@ -0,0 +1,28 @@
+import type { ScaleBand, ScaleLinear, ScalePoint } from "d3-scale";
+import type { Theme } from "../theme/types";
+import type { ChartLabelFormatter, ChartValueFormatter } from "./types";
+interface XAxisProps {
+    scale: ScaleBand<string>;
+    transform: string;
+    plotWidth: number;
+    formatter?: ChartLabelFormatter;
+}
+export declare const XAxis: ({ scale, transform, formatter }: XAxisProps) => import("react").JSX.Element;
+interface XAxisPointProps {
+    scale: ScalePoint<string>;
+    transform: string;
+    plotWidth: number;
+    formatter?: ChartLabelFormatter;
+}
+export declare const XAxisPoint: ({ scale, transform, formatter, }: XAxisPointProps) => import("react").JSX.Element;
+interface YAxisProps {
+    scale: ScaleLinear<number, number>;
+    transform: string;
+    plotWidth: number;
+    tickCount?: number;
+    formatter?: ChartValueFormatter;
+    showGrid?: boolean;
+    theme: Theme;
+}
+export declare const YAxis: ({ scale, transform, plotWidth, tickCount, formatter, showGrid, theme, }: YAxisProps) => import("react").JSX.Element;
+export {};

package/dist/charts/ChartAxis.js

@@ -0,0 +1,94 @@
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import FlexWrapper, { AlignItems, JustifyContent } from "../containers/FlexWrapper.js";
+import "./constants.js";
+import { defaultLabelFormatter, defaultValueFormatter } from "./utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/charts/ChartAxis.tsx
+var XAxis = ({ scale, transform, formatter = defaultLabelFormatter }) => {
+	return /* @__PURE__ */ jsx("g", {
+		transform,
+		children: scale.domain().map((label) => {
+			return /* @__PURE__ */ jsx("foreignObject", {
+				x: (scale(label) ?? 0) + scale.bandwidth() / 2 - scale.bandwidth() / 2,
+				y: 8,
+				width: scale.bandwidth(),
+				height: 24,
+				children: /* @__PURE__ */ jsx(FlexWrapper, {
+					justifyContent: JustifyContent.CENTER,
+					alignItems: AlignItems.CENTER,
+					fillWidth: true,
+					fillHeight: true,
+					children: /* @__PURE__ */ jsx(Text, {
+						size: TextSize.CAPTION,
+						variant: TextVariant.TERTIARY,
+						align: "center",
+						children: formatter(label)
+					})
+				})
+			}, label);
+		})
+	});
+};
+var XAxisPoint = ({ scale, transform, formatter = defaultLabelFormatter }) => {
+	const step = scale.step();
+	return /* @__PURE__ */ jsx("g", {
+		transform,
+		children: scale.domain().map((label) => {
+			return /* @__PURE__ */ jsx("foreignObject", {
+				x: (scale(label) ?? 0) - step / 2,
+				y: 8,
+				width: step,
+				height: 24,
+				children: /* @__PURE__ */ jsx(FlexWrapper, {
+					justifyContent: JustifyContent.CENTER,
+					alignItems: AlignItems.CENTER,
+					fillWidth: true,
+					fillHeight: true,
+					children: /* @__PURE__ */ jsx(Text, {
+						size: TextSize.CAPTION,
+						variant: TextVariant.TERTIARY,
+						align: "center",
+						children: formatter(label)
+					})
+				})
+			}, label);
+		})
+	});
+};
+var YAxis = ({ scale, transform, plotWidth, tickCount = 5, formatter = defaultValueFormatter, showGrid = true, theme }) => {
+	return /* @__PURE__ */ jsx("g", {
+		transform,
+		children: scale.ticks(tickCount).map((tick) => {
+			return /* @__PURE__ */ jsxs("g", {
+				transform: `translate(0, ${scale(tick)})`,
+				children: [/* @__PURE__ */ jsx("foreignObject", {
+					x: -48,
+					y: -10,
+					width: 36,
+					height: 20,
+					children: /* @__PURE__ */ jsx(FlexWrapper, {
+						justifyContent: JustifyContent.END,
+						alignItems: AlignItems.CENTER,
+						fillWidth: true,
+						fillHeight: true,
+						children: /* @__PURE__ */ jsx(Text, {
+							size: TextSize.CAPTION,
+							variant: TextVariant.TERTIARY,
+							children: formatter(tick)
+						})
+					})
+				}), showGrid && /* @__PURE__ */ jsx("line", {
+					x1: 0,
+					x2: plotWidth,
+					y1: 0,
+					y2: 0,
+					stroke: theme.color.border.primary,
+					strokeOpacity: .5,
+					strokeDasharray: "2,2"
+				})]
+			}, tick);
+		})
+	});
+};
+//#endregion
+export { XAxis, XAxisPoint, YAxis };