@galaxy-io/dls 1.4.10 → 1.4.12

package/dist/accordion/Accordion.d.ts

@@ -1,29 +1,46 @@
 import React, { type PropsWithChildren } from "react";
 import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
+/** Surface treatment of the accordion shell. */
 export declare enum AccordionVariant {
     PRIMARY = "PRIMARY",
     SECONDARY = "SECONDARY",
     TERTIARY = "TERTIARY"
 }
+/** Header density — drives header padding and text size. */
 export declare enum AccordionSize {
     SMALL = "SMALL",
     MEDIUM = "MEDIUM",
     LARGE = "LARGE"
 }
 export interface AccordionProps {
+    /** @default AccordionVariant.PRIMARY */
     variant?: AccordionVariant;
+    /** @default AccordionSize.MEDIUM */
     size?: AccordionSize;
+    /** Phosphor icon *component* shown before the header. */
     icon?: PhosphorIcon;
+    /** Header text. Always visible; clicking it toggles the panel. */
     header: string;
+    /** Secondary line under the header. */
     subheader?: string;
+    /** Trailing content in the header — a count, a badge, a status. */
     metric?: React.ReactNode;
+    /** A number is px. */
     borderRadius?: number | string;
+    /** Inset for the body. @default "12px" */
     padding?: string | number;
+    /** Starting state in uncontrolled mode. Ignored once `isOpen` is passed. */
     isOpenInitial?: boolean;
-    /** Controlled mode: external open state */
+    /** Controlled open state. Pass it together with `onToggle`. */
     isOpen?: boolean;
-    /** Controlled mode: callback when toggle is clicked */
+    /** Called when the header is clicked. Required for controlled mode. */
     onToggle?: () => void;
 }
+/**
+ * A collapsible section with a persistent header.
+ *
+ * Uncontrolled by default — it tracks its own state from `isOpenInitial`. Pass
+ * `isOpen` *and* `onToggle` together to drive it from outside instead.
+ */
 declare const Accordion: ({ children, variant, size, icon, header, subheader, metric, borderRadius, padding, isOpenInitial, isOpen: controlledIsOpen, onToggle: controlledOnToggle, }: PropsWithChildren<AccordionProps>) => React.JSX.Element;
 export default Accordion;

package/dist/accordion/Accordion.js

@@ -13,12 +13,14 @@ import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CaretDownIcon } from "@phosphor-icons/react";
 //#region src/accordion/Accordion.tsx
+/** Surface treatment of the accordion shell. */
 var AccordionVariant = /* @__PURE__ */ function(AccordionVariant) {
 	AccordionVariant["PRIMARY"] = "PRIMARY";
 	AccordionVariant["SECONDARY"] = "SECONDARY";
 	AccordionVariant["TERTIARY"] = "TERTIARY";
 	return AccordionVariant;
 }({});
+/** Header density — drives header padding and text size. */
 var AccordionSize = /* @__PURE__ */ function(AccordionSize) {
 	AccordionSize["SMALL"] = "SMALL";
 	AccordionSize["MEDIUM"] = "MEDIUM";
@@ -65,6 +67,12 @@ var AccordionContentInner = withTheme(/*#__PURE__*/ styled("div")({
 	class: "a1f5gwwu",
 	propsAsIs: false
 }));
+/**
+* A collapsible section with a persistent header.
+*
+* Uncontrolled by default — it tracks its own state from `isOpenInitial`. Pass
+* `isOpen` *and* `onToggle` together to drive it from outside instead.
+*/
 var Accordion = ({ children, variant = "PRIMARY", size = "MEDIUM", icon, header, subheader, metric, borderRadius, padding = "12px", isOpenInitial = false, isOpen: controlledIsOpen, onToggle: controlledOnToggle }) => {
 	const [internalIsOpen, setInternalIsOpen] = useState(isOpenInitial);
 	const isControlled = controlledIsOpen !== void 0;

package/dist/avatar/Avatar.d.ts

@@ -1,9 +1,18 @@
 export interface AvatarProps {
+    /** Image URL. Falls back to the generated pattern when null or missing. */
     img?: string | null;
+    /** Render the shimmer placeholder instead. */
     isLoading?: boolean;
+    /** Square size in px. @default 16 */
     size?: number;
+    /** Override the generated pattern's color. */
     hex?: string;
+    /** Input to the generated pattern — same seed always yields the same avatar. */
     seed?: string;
 }
+/**
+ * A user or entity avatar. Falls back to a dot pattern derived from `seed` when
+ * there's no image, so the same user is always recognizable without one.
+ */
 declare const Avatar: ({ img, isLoading, size, hex, seed }: AvatarProps) => import("react").JSX.Element;
 export default Avatar;

package/dist/avatar/Avatar.js

@@ -51,6 +51,10 @@ var seededRandom = (seed) => {
 		return hash / 2147483647;
 	};
 };
+/**
+* A user or entity avatar. Falls back to a dot pattern derived from `seed` when
+* there's no image, so the same user is always recognizable without one.
+*/
 var Avatar = ({ img, isLoading, size = 16, hex, seed }) => {
 	const { theme } = useGalaxyTheme();
 	const [failedSrc, setFailedSrc] = useState(null);

package/dist/avatar/AvatarShimmer.d.ts

@@ -1,4 +1,5 @@
 export interface AvatarShimmerProps {
+    /** Square size in px. Match the `Avatar` it stands in for. @default 16 */
     size?: number;
 }
 export declare const StyledAvatarShimmer: import("react").ComponentType<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
@@ -24,5 +25,6 @@ export declare const StyledAvatarShimmer: import("react").ComponentType<Pick<imp
 } & {
     as?: React.ElementType;
 }>, {}>;
+/** Loading placeholder for an `Avatar`. `Avatar` renders it itself when `isLoading`. */
 declare const AvatarShimmer: ({ size }: AvatarShimmerProps) => import("react").JSX.Element;
 export default AvatarShimmer;

package/dist/avatar/AvatarShimmer.js

@@ -14,6 +14,7 @@ var StyledAvatarShimmer = withTheme(/*#__PURE__*/ styled("div")({
 		"s1o6ak6r-1": [_exp3(), "px"]
 	}
 }));
+/** Loading placeholder for an `Avatar`. `Avatar` renders it itself when `isLoading`. */
 var AvatarShimmer = ({ size }) => {
 	return /* @__PURE__ */ jsx(StyledAvatarShimmer, { $size: size });
 };

package/dist/backgrounds/CellGridBackground.d.ts

@@ -1,13 +1,24 @@
 import type { ReactNode } from "react";
 import { ThemeBackgroundColor } from "../theme/types";
-interface CellGridBackgroundProps {
+export interface CellGridBackgroundProps {
+    /** Side length of one cell in px. @default 24 */
     cellSize?: number;
+    /** Line width in px. @default 1 */
     strokeWidth?: number;
+    /** Grid line color. @default theme.color.border.primary */
     lineColor?: string;
+    /** Surface behind the grid. Pass a token. @default theme.color.background.base */
     backgroundColor?: ThemeBackgroundColor[keyof ThemeBackgroundColor];
+    /** Line opacity, 0–1. @default 0.5 */
     lineOpacity?: number;
+    /** Fill the parent instead of sizing to children. @default true */
     fillContainer?: boolean;
     children?: ReactNode;
 }
+/**
+ * Ruled graph-paper surface. Centers its children; the pattern is an inline SVG
+ * data URI, so it costs no request. Unlike the dot and cross grids it has no
+ * `borderRadius` prop — wrap it if you need clipped corners.
+ */
 declare const CellGridBackground: ({ cellSize, strokeWidth, lineColor, backgroundColor, lineOpacity, fillContainer, children, }: CellGridBackgroundProps) => import("react").JSX.Element;
 export default CellGridBackground;

package/dist/backgrounds/CellGridBackground.js

@@ -25,6 +25,11 @@ var generateCellSvg = (cellSize, strokeWidth, color, opacity) => {
   </svg>`;
 	return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
 };
+/**
+* Ruled graph-paper surface. Centers its children; the pattern is an inline SVG
+* data URI, so it costs no request. Unlike the dot and cross grids it has no
+* `borderRadius` prop — wrap it if you need clipped corners.
+*/
 var CellGridBackground = ({ cellSize = 24, strokeWidth = 1, lineColor, backgroundColor, lineOpacity = .5, fillContainer = true, children }) => {
 	const { theme } = useGalaxyTheme();
 	return /* @__PURE__ */ jsx(StyledCellGridBackground, {

package/dist/backgrounds/CrossGridBackground.d.ts

@@ -1,14 +1,26 @@
 import type { PropsWithChildren } from "react";
 import { ThemeBackgroundColor } from "../theme/types";
-interface CrossGridBackgroundProps {
+export interface CrossGridBackgroundProps {
+    /** Arm length of each cross in px. @default 8 */
     crossSize?: number;
+    /** Grid pitch in px — the distance between cross centers. @default 24 */
     spacing?: number;
+    /** Stroke width of each arm in px. @default 1 */
     strokeWidth?: number;
+    /** Cross color. @default theme.color.border.primary */
     crossColor?: string;
+    /** Surface behind the crosses. Pass a token. @default theme.color.background.base */
     backgroundColor?: ThemeBackgroundColor[keyof ThemeBackgroundColor];
+    /** Cross opacity, 0–1. @default 0.5 */
     crossOpacity?: number;
+    /** Fill the parent instead of sizing to children. @default true */
     fillContainer?: boolean;
+    /** A number is px. @default 0 */
     borderRadius?: string | number;
 }
+/**
+ * Grid surface marked with small crosses at each intersection. Centers its
+ * children; the pattern is an inline SVG data URI, so it costs no request.
+ */
 declare const CrossGridBackground: ({ crossSize, spacing, strokeWidth, crossColor, backgroundColor, crossOpacity, fillContainer, borderRadius, children, }: PropsWithChildren<CrossGridBackgroundProps>) => import("react").JSX.Element;
 export default CrossGridBackground;

package/dist/backgrounds/CrossGridBackground.js

@@ -30,6 +30,10 @@ var generateCrossSvg = (crossSize, spacing, strokeWidth, color, opacity) => {
   </svg>`;
 	return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
 };
+/**
+* Grid surface marked with small crosses at each intersection. Centers its
+* children; the pattern is an inline SVG data URI, so it costs no request.
+*/
 var CrossGridBackground = ({ crossSize = 8, spacing = 24, strokeWidth = 1, crossColor, backgroundColor, crossOpacity = .5, fillContainer = true, borderRadius, children }) => {
 	const { theme } = useGalaxyTheme();
 	return /* @__PURE__ */ jsx(StyledCrossGridBackground, {

package/dist/backgrounds/DotGridBackground.d.ts

@@ -1,13 +1,24 @@
 import type { PropsWithChildren } from "react";
 import { ThemeBackgroundColor } from "../theme/types";
-interface DotGridBackgroundProps {
+export interface DotGridBackgroundProps {
+    /** Dot diameter in px. @default 3 */
     dotSize?: number;
+    /** Grid pitch in px — the distance between dot centers. @default 24 */
     spacing?: number;
+    /** Dot color. @default theme.color.border.primary */
     dotColor?: string;
+    /** Surface behind the dots. Pass a token. @default theme.color.background.base */
     backgroundColor?: ThemeBackgroundColor[keyof ThemeBackgroundColor];
+    /** Dot opacity, 0–1. @default 0.5 */
     dotOpacity?: number;
+    /** Fill the parent instead of sizing to children. @default true */
     fillContainer?: boolean;
+    /** A number is px. @default 0 */
     borderRadius?: string | number;
 }
+/**
+ * Dotted grid surface. Centers its children and paints the pattern as an inline
+ * SVG data URI, so it costs no network request and scales with `spacing`.
+ */
 declare const DotGridBackground: ({ dotSize, spacing, dotColor, backgroundColor, dotOpacity, fillContainer, borderRadius, children, }: PropsWithChildren<DotGridBackgroundProps>) => import("react").JSX.Element;
 export default DotGridBackground;

package/dist/backgrounds/DotGridBackground.js

@@ -28,6 +28,10 @@ var generateDotSvg = (size, dotSize, color, opacity) => {
   </svg>`;
 	return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
 };
+/**
+* Dotted grid surface. Centers its children and paints the pattern as an inline
+* SVG data URI, so it costs no network request and scales with `spacing`.
+*/
 var DotGridBackground = ({ dotSize = 3, spacing = 24, dotColor, backgroundColor, dotOpacity = .5, fillContainer = true, borderRadius, children }) => {
 	const { theme } = useGalaxyTheme();
 	return /* @__PURE__ */ jsx(StyledDotGridBackground, {

package/dist/badge/Badge.d.ts

@@ -1,3 +1,4 @@
+/** Badge color. Signals what the count *means* — errors, warnings, neutral totals. */
 export declare enum BadgeVariant {
     PRIMARY = "PRIMARY",
     PRIMARY_ALT = "PRIMARY_ALT",
@@ -14,17 +15,28 @@ export declare enum BadgeVariant {
     PURPLE = "PURPLE",
     TEAL = "TEAL"
 }
+/** Badge height. Match the control it annotates. */
 export declare enum BadgeSize {
     SMALL = "SMALL",
     MEDIUM = "MEDIUM",
     LARGE = "LARGE"
 }
 export interface BadgeProps {
+    /** The number shown. A count of 0 renders nothing at all. */
     count: number;
+    /** @default BadgeVariant.PRIMARY */
     variant?: BadgeVariant;
+    /** @default BadgeSize.MEDIUM */
     size?: BadgeSize;
+    /** Counts above this show as "N+". @default 99 */
     max?: number;
+    /** Also flips the cursor to `pointer`. */
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 }
+/**
+ * A numeric count pill — unread items, pending actions.
+ *
+ * Renders `null` when `count` is 0, so you don't need to guard it yourself.
+ */
 declare const Badge: ({ count, variant, size, max, onClick, }: BadgeProps) => import("react").JSX.Element | null;
 export default Badge;

package/dist/badge/Badge.js

@@ -5,6 +5,7 @@ import { styled } from "@linaria/react";
 import { match } from "ts-pattern";
 import { jsx } from "react/jsx-runtime";
 //#region src/badge/Badge.tsx
+/** Badge color. Signals what the count *means* — errors, warnings, neutral totals. */
 var BadgeVariant = /* @__PURE__ */ function(BadgeVariant) {
 	BadgeVariant["PRIMARY"] = "PRIMARY";
 	BadgeVariant["PRIMARY_ALT"] = "PRIMARY_ALT";
@@ -22,6 +23,7 @@ var BadgeVariant = /* @__PURE__ */ function(BadgeVariant) {
 	BadgeVariant["TEAL"] = "TEAL";
 	return BadgeVariant;
 }({});
+/** Badge height. Match the control it annotates. */
 var BadgeSize = /* @__PURE__ */ function(BadgeSize) {
 	BadgeSize["SMALL"] = "SMALL";
 	BadgeSize["MEDIUM"] = "MEDIUM";
@@ -73,6 +75,11 @@ var StyledBadge = withTheme(/*#__PURE__*/ styled("div")({
 		"s6s20zd-3": [_exp5()]
 	}
 }));
+/**
+* A numeric count pill — unread items, pending actions.
+*
+* Renders `null` when `count` is 0, so you don't need to guard it yourself.
+*/
 var Badge = ({ count, variant = "PRIMARY", size = "MEDIUM", max = 99, onClick }) => {
 	if (count === 0) return null;
 	const displayValue = count > max ? `${max}+` : count;

package/dist/beacons/Beacon.d.ts

@@ -1,8 +1,10 @@
+/** Dot diameter. */
 export declare enum BeaconSize {
     SMALL = "SMALL",
     MEDIUM = "MEDIUM",
     LARGE = "LARGE"
 }
+/** Dot color — the status being signalled. Also colors the pulse ring. */
 export declare enum BeaconVariant {
     BASE = "BASE",
     PRIMARY = "PRIMARY",
@@ -21,23 +23,15 @@ export declare enum BeaconVariant {
     DISABLED = "DISABLED"
 }
 export interface BeaconProps {
-    /**
-     * The size of the Beacon.
-     */
+    /** @default BeaconSize.MEDIUM */
     size?: BeaconSize;
-    /**
-     * The color of the Beacon.
-     */
+    /** @default BeaconVariant.BASE */
     variant?: BeaconVariant;
-    /**
-     * The speed of the pulse animation in seconds.
-     * @default 2
-     */
+    /** Duration of one pulse cycle in seconds. @default 2 */
     speed?: number;
-    /**
-     * Whether to show the pulse animation.
-     */
+    /** Add an expanding ring around the dot. Off means a static dot. */
     isPulse?: boolean;
 }
+/** A status dot, optionally pulsing. Live connections, unread state, health. */
 declare const Beacon: ({ variant, size, speed, isPulse, }: BeaconProps) => import("react").JSX.Element;
 export default Beacon;

package/dist/beacons/Beacon.js

@@ -4,12 +4,14 @@ import { styled } from "@linaria/react";
 import { match } from "ts-pattern";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/beacons/Beacon.tsx
+/** Dot diameter. */
 var BeaconSize = /* @__PURE__ */ function(BeaconSize) {
 	BeaconSize["SMALL"] = "SMALL";
 	BeaconSize["MEDIUM"] = "MEDIUM";
 	BeaconSize["LARGE"] = "LARGE";
 	return BeaconSize;
 }({});
+/** Dot color — the status being signalled. Also colors the pulse ring. */
 var BeaconVariant = /* @__PURE__ */ function(BeaconVariant) {
 	BeaconVariant["BASE"] = "BASE";
 	BeaconVariant["PRIMARY"] = "PRIMARY";
@@ -57,6 +59,7 @@ var BeaconDot = withTheme(/*#__PURE__*/ styled("span")({
 	propsAsIs: false,
 	vars: { "bv9nmr4-0": [_exp5()] }
 }));
+/** A status dot, optionally pulsing. Live connections, unread state, health. */
 var Beacon = ({ variant = "BASE", size = "MEDIUM", speed, isPulse }) => /* @__PURE__ */ jsxs(BeaconWrapper, {
 	$size: size,
 	children: [isPulse && /* @__PURE__ */ jsx(BeaconPulse, {

package/dist/buttons/Button.d.ts

@@ -1,17 +1,26 @@
 import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
 export interface ButtonProps {
+    /** Button text. Omit for an icon-only button and set `ariaLabel` instead. */
     label?: string;
+    /** Phosphor icon *component* — pass `PlusIcon`, not `<PlusIcon />`. */
     icon?: PhosphorIcon;
+    /** @default ButtonVariant.PRIMARY */
     variant?: ButtonVariant;
+    /** @default ButtonSize.MEDIUM */
     size?: ButtonSize;
     onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onMouseLeave?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Blocks `onClick` and disables the button. Renders no spinner. */
     isLoading?: boolean;
     isDisabled?: boolean;
+    /** Render the icon after the label instead of before. */
     isIconTrailing?: boolean;
+    /** Use the icon's filled weight instead of bold. */
     isIconFilled?: boolean;
+    /** Truncate a long label with an ellipsis instead of growing the button. */
     isEllipsis?: boolean;
+    /** Stretch to the parent's width. */
     fillWidth?: boolean;
     cursor?: React.CSSProperties["cursor"];
     /** Accessible name — required when the button renders an icon with no label. */
@@ -20,6 +29,7 @@ export interface ButtonProps {
     ariaControls?: string;
     ariaHasPopup?: boolean;
 }
+/** Visual weight. One PRIMARY per view; TERTIARY is the transparent variant. */
 export declare enum ButtonVariant {
     PRIMARY = "PRIMARY",
     PRIMARY_ALT = "PRIMARY_ALT",
@@ -28,10 +38,18 @@ export declare enum ButtonVariant {
     SUCCESS = "SUCCESS",
     ERROR = "ERROR"
 }
+/** Control height — 24 / 28 / 32px. Also drives label and icon size. */
 export declare enum ButtonSize {
     SMALL = "SMALL",
     MEDIUM = "MEDIUM",
     LARGE = "LARGE"
 }
+/**
+ * The standard action control. Renders a label, an icon, or both.
+ *
+ * `isLoading` and `isDisabled` behave identically at the DOM level — both set
+ * `disabled` on the `<button>` and swallow `onClick`. Loading is a lockout, not
+ * a spinner; render your own indicator alongside if you need one.
+ */
 declare const Button: ({ label, icon, variant, size, onClick, onMouseEnter, onMouseLeave, fillWidth, isLoading, isDisabled, isIconTrailing, isIconFilled, isEllipsis, cursor, ariaLabel, ariaExpanded, ariaControls, ariaHasPopup, }: ButtonProps) => import("react").JSX.Element;
 export default Button;

package/dist/buttons/Button.js

@@ -1,4 +1,4 @@
-import { GalaxyTheme } from "../theme/constants.js";
+import { GalaxyTheme } from "../theme/types.js";
 import { useGalaxyTheme, withTheme } from "../theme/GalaxyTheme.js";
 import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
 import FlexItem from "../containers/FlexItem.js";
@@ -9,6 +9,7 @@ import { match } from "ts-pattern";
 import { useCallback } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/buttons/Button.tsx
+/** Visual weight. One PRIMARY per view; TERTIARY is the transparent variant. */
 var ButtonVariant = /* @__PURE__ */ function(ButtonVariant) {
 	ButtonVariant["PRIMARY"] = "PRIMARY";
 	ButtonVariant["PRIMARY_ALT"] = "PRIMARY_ALT";
@@ -18,6 +19,7 @@ var ButtonVariant = /* @__PURE__ */ function(ButtonVariant) {
 	ButtonVariant["ERROR"] = "ERROR";
 	return ButtonVariant;
 }({});
+/** Control height — 24 / 28 / 32px. Also drives label and icon size. */
 var ButtonSize = /* @__PURE__ */ function(ButtonSize) {
 	ButtonSize["SMALL"] = "SMALL";
 	ButtonSize["MEDIUM"] = "MEDIUM";
@@ -98,6 +100,13 @@ var BUTTON_SIZE_TO_ICON_SIZE_MAP = {
 	["MEDIUM"]: 14,
 	["LARGE"]: 16
 };
+/**
+* The standard action control. Renders a label, an icon, or both.
+*
+* `isLoading` and `isDisabled` behave identically at the DOM level — both set
+* `disabled` on the `<button>` and swallow `onClick`. Loading is a lockout, not
+* a spinner; render your own indicator alongside if you need one.
+*/
 var Button = ({ label, icon, variant = "PRIMARY", size = "MEDIUM", onClick, onMouseEnter, onMouseLeave, fillWidth, isLoading, isDisabled, isIconTrailing, isIconFilled, isEllipsis, cursor, ariaLabel, ariaExpanded, ariaControls, ariaHasPopup }) => {
 	const { activeTheme } = useGalaxyTheme();
 	const handleClick = useCallback((e) => {

package/dist/charts/BarChart.d.ts

@@ -13,6 +13,9 @@ export type BarChartProps<TMetric extends string, TComponentKey extends string =
     groups: BarChartGroupDatum<NoInfer<TMetric>, NoInfer<TComponentKey>>[];
     /** @default BarChartNormalization.NONE */
     normalization?: BarChartNormalization;
+    /** Tint the active category's full band, marking the hover position even
+     * where there is no data. @default true */
+    showCursor?: boolean;
 };
 /**
  * Bar chart with a three-level data model.
@@ -21,5 +24,5 @@ export type BarChartProps<TMetric extends string, TComponentKey extends string =
  * `bars` in a group render side by side, several `components` in a bar stack,
  * and a chart doing both at once needs no extra configuration.
  */
-declare const BarChart: <TMetric extends string, TComponentKey extends string = string>({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid, showLegend, legendMaxItems, noTooltip, tooltipRenderer, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: BarChartProps<TMetric, TComponentKey>) => import("react").JSX.Element;
+declare const BarChart: <TMetric extends string, TComponentKey extends string = string>({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization, showCursor, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid, showLegend, legendMaxItems, noTooltip, tooltipRenderer, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: BarChartProps<TMetric, TComponentKey>) => import("react").JSX.Element;
 export default BarChart;

package/dist/charts/BarChart.js

@@ -1,10 +1,10 @@
-import { BarChartNormalization, ChartKind, ChartTargetShape } from "./types.js";
+import { BarChartNormalization, ChartKind, ChartMarkState, ChartTargetShape } from "./types.js";
 import { useSeriesColorResolver } from "./useSeriesColorResolver.js";
 import { useChartInteraction } from "./useChartInteraction.js";
 import { useCartesianChartLayout } from "./useCartesianChartLayout.js";
 import { getBarLegendItems } from "./barChartLegend.js";
 import { buildBarChartGeometry, getBarValueDomain, roundedRectPath } from "./barChartGeometry.js";
-import { ChartBarPath } from "./ChartPrimitives.js";
+import { ChartBarPath, ChartCursorBand } from "./ChartPrimitives.js";
 import ChartFrame from "./ChartFrame.js";
 import { ChartCategoryAxis, ChartValueAxis } from "./ChartAxis.js";
 import { useCallback, useMemo, useRef } from "react";
@@ -17,7 +17,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * `bars` in a group render side by side, several `components` in a bar stack,
 * and a chart doing both at once needs no extra configuration.
 */
-var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization = BarChartNormalization.NONE, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, legendMaxItems, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
+var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization = BarChartNormalization.NONE, showCursor = true, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, legendMaxItems, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
 	const containerRef = useRef(null);
 	const colors = useSeriesColorResolver(series);
 	/**
@@ -101,12 +101,16 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		colors
 	]);
 	const legendKeys = useMemo(() => legendItems.map((item) => item.key), [legendItems]);
+	const categoryKeys = useMemo(() => groups.map((group) => group.label), [groups]);
 	const interaction = useChartInteraction({
 		categoryCount: geometry.bands.length,
 		seriesKeys: legendKeys,
-		disabled: noTooltip || isLoading || isEmpty,
+		categoryKeys,
+		categoryMuteState: ChartMarkState.DIMMED,
+		isDisabled: noTooltip || isLoading || isEmpty,
 		isLoading
 	});
+	const activeBand = interaction.activeIndex === null ? null : geometry.bands[interaction.activeIndex] ?? null;
 	const buildCategoryTooltip = useCallback((index) => {
 		const band = geometry.bands[index];
 		const group = groups[index];
@@ -140,7 +144,7 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		width: band.width,
 		height: band.height
 	})), [geometry.bands]);
-	return /* @__PURE__ */ jsx(ChartFrame, {
+	return /* @__PURE__ */ jsxs(ChartFrame, {
 		containerRef,
 		dimensions,
 		fillWidth,
@@ -160,7 +164,7 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 			showGrid,
 			title: valueAxisTitle
 		}), /* @__PURE__ */ jsx(ChartCategoryAxis, {
-			labels: groups.map((group) => group.label),
+			labels: categoryKeys,
 			positions: categoryPositions,
 			step: categoryStep,
 			plotWidth,
@@ -180,14 +184,19 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		showLegend,
 		legendItems,
 		legendMaxItems,
-		children: geometry.rects.map((rect) => /* @__PURE__ */ jsx(ChartBarPath, {
+		children: [showCursor && activeBand && /* @__PURE__ */ jsx(ChartCursorBand, {
+			x: activeBand.x,
+			y: activeBand.y,
+			width: activeBand.width,
+			height: activeBand.height
+		}), geometry.rects.map((rect) => /* @__PURE__ */ jsx(ChartBarPath, {
 			d: roundedRectPath(rect.x, rect.y, rect.width, rect.height, rect.radius, rect.corners),
 			fill: rect.color,
 			"data-state": interaction.getMarkState({
 				categoryIndex: rect.groupIndex,
 				seriesKey: isStacked ? rect.componentKey : rect.metric
 			})
-		}, rect.id))
+		}, rect.id))]
 	});
 };
 //#endregion

package/dist/charts/ChartCategoryTargets.d.ts

@@ -7,21 +7,14 @@ import type { ChartInteraction } from "./useChartInteraction";
  * roles and no tab stops — the plot is `role="img"` and its accessible story is
  * the frame's label and description, while pointer users get the tooltip.
  *
- * A category with nothing to show gets no target at all: hovering an all-zero
- * bar group or an all-null line column must not open a tooltip with a heading
- * and no rows, so the empty stretch of plot is simply not hoverable.
+ * Every category is hoverable, including one with nothing to show: the cursor
+ * still marks where the pointer is over an empty stretch of axis, and the
+ * frame's rowless guard is what keeps a heading-only tooltip from opening
+ * there.
  */
 interface ChartCategoryTargetsProps {
     targets: ChartCategoryTarget[];
     interaction: ChartInteraction;
-    /**
-     * Category indices whose tooltip would have no rows.
-     *
-     * Skipped entirely rather than rendered inert, so the pointer falls through
-     * to nothing. Indexing is unaffected: `targets.map` still passes the true
-     * category index for every target that does render.
-     */
-    inertIndices?: ReadonlySet<number>;
 }
-declare const ChartCategoryTargets: ({ targets, interaction, inertIndices, }: ChartCategoryTargetsProps) => import("react").JSX.Element;
+declare const ChartCategoryTargets: ({ targets, interaction }: ChartCategoryTargetsProps) => import("react").JSX.Element;
 export default ChartCategoryTargets;

package/dist/charts/ChartCategoryTargets.js

@@ -3,8 +3,7 @@ import { ChartHitTarget, ChartHitTargetPath } from "./ChartPrimitives.js";
 import { match } from "ts-pattern";
 import { Fragment, jsx } from "react/jsx-runtime";
 //#region src/charts/ChartCategoryTargets.tsx
-var ChartCategoryTargets = ({ targets, interaction, inertIndices }) => /* @__PURE__ */ jsx(Fragment, { children: targets.map((target, index) => {
-	if (inertIndices?.has(index)) return null;
+var ChartCategoryTargets = ({ targets, interaction }) => /* @__PURE__ */ jsx(Fragment, { children: targets.map((target, index) => {
 	const shared = {
 		onMouseEnter: () => interaction.onCategoryEnter(index),
 		onMouseLeave: () => interaction.onCategoryLeave()

package/dist/charts/ChartFrame.d.ts

@@ -70,10 +70,9 @@ export interface ChartFrameProps {
     /**
      * Builds one category's tooltip, in plot coordinates.
      *
-     * Taken as a function rather than a finished model because the frame needs it
-     * twice: once for the category under the pointer, and once per category to
-     * decide which categories are inert. Deriving both from the same builder is
-     * what makes "no tooltip rows" and "not hoverable" the same fact.
+     * A rowless model means "no data here": the category stays hoverable — the
+     * cursor should still mark the pointer over an empty stretch of axis — but
+     * no tooltip opens.
      *
      * Must be stable; memoize it at the call site.
      */