@langchain/macaw-components 1.0.0-beta.0

package/dist/components/BarChart/BarChartPlot.js

@@ -0,0 +1,262 @@
+import { cn } from "../../utils/cn.js";
+import "../../utils/chartConstants.js";
+import { getBarAnimationRanges, getBarChartIsBarDimmed, getBarChartRenderedBars, getCategoryKey, groupBarChartItemsBy, toBarChartInteractionBar } from "./BarChart.utils.js";
+import { AnimatedBar } from "./AnimatedBar.js";
+import { getAccessibleText } from "../ChartLegend/utils.js";
+import { getChartTickValues, getNearestChartValue } from "../../utils/chartValues.js";
+import "./constants.js";
+import { BarChartAxes } from "./BarChartAxes.js";
+import { BarChartGuides } from "./BarChartGuides.js";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useReducedMotion, useSpring } from "@react-spring/web";
+import { scaleBand } from "@visx/scale";
+import { Group } from "@visx/group";
+//#region packages/components/src/components/BarChart/BarChartPlot.tsx
+var defaultFormatCategory = (value) => String(value);
+var BarChartPlot = ({ width, height, innerWidth, innerHeight, chartMargin, categories, series, bars, axes, orientation, categoryAxis, categoryAxisThickness, categoryPadding, groupPadding, minimumBarSize, shouldAnimate, grid, valueBands, activeCategory, activeGuideBarId, activeBarId, activeBuiltInLegendItemId, activeLegendItemId, selectionRange, slots, isRendering, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, getBarAriaLabel, getCategoryAriaLabel, onDatumPointerDown, onDatumPointerMove, onDatumPointerOut, onDatumPointerUp, onDatumActivate, onDatumFocus, onDatumBlur, onBarPointerMove, onBarPointerOut, onBarActivate, onBarFocus, onBarBlur }) => {
+	const [hoveredCategory, setHoveredCategory] = useState(null);
+	const isVertical = orientation === "vertical";
+	const clipPathId = `bar-chart-${useId().replace(/[^\w-]/g, "")}`;
+	const isReducedMotion = (useReducedMotion() ?? false) || !shouldAnimate;
+	const primaryAxis = axes[0];
+	const canDraw = innerWidth > 0 && innerHeight > 0 && primaryAxis != null;
+	const categoryScale = scaleBand({
+		domain: Array.from(categories),
+		range: [0, isVertical ? innerWidth : innerHeight],
+		paddingInner: categoryPadding.inner,
+		paddingOuter: categoryPadding.outer
+	});
+	const axisById = new Map(axes.map((axis) => [axis.id, axis]));
+	const renderedBars = canDraw && isRendering ? getBarChartRenderedBars({
+		bars,
+		orientation,
+		categoryScale,
+		axisById,
+		groupPadding,
+		minimumBarSize,
+		innerWidth,
+		innerHeight
+	}) : [];
+	const renderedBarsBySeriesId = groupBarChartItemsBy(renderedBars, (bar) => bar.seriesId);
+	const isBarDimmed = getBarChartIsBarDimmed({
+		bars: renderedBars,
+		activeBuiltInLegendItemId,
+		activeLegendItemId,
+		activeBarId
+	});
+	const animationRanges = getBarAnimationRanges(renderedBars, orientation);
+	const hasRenderedBars = renderedBars.length > 0;
+	const barAnimationKey = JSON.stringify([orientation, bars.map((bar) => [
+		bar.id,
+		bar.category,
+		bar.valueAxisId,
+		bar.groupIndex,
+		bar.startValue,
+		bar.endValue
+	])]);
+	const [animation] = useSpring(() => ({
+		from: { progress: 0 },
+		to: { progress: hasRenderedBars ? 1 : 0 },
+		reset: true,
+		immediate: isReducedMotion
+	}), [
+		barAnimationKey,
+		hasRenderedBars,
+		isReducedMotion
+	]);
+	const formatCategory = categoryAxis?.formatValue ?? defaultFormatCategory;
+	const categoryTickValues = categoryAxis?.tickValues ?? getChartTickValues(categories, categoryAxis?.tickCount ?? Math.max(1, Math.floor(isVertical ? innerWidth / 64 : innerHeight / 28)));
+	const getCategoryPosition = (category) => {
+		const start = categoryScale(category);
+		return start == null ? void 0 : start + categoryScale.bandwidth() / 2;
+	};
+	const hasCategoryTarget = getCategoryAriaLabel != null || onDatumActivate != null || onDatumFocus != null || onDatumBlur != null;
+	const interactionBarsByCategory = hasCategoryTarget ? groupBarChartItemsBy(bars.map(toBarChartInteractionBar), (bar) => getCategoryKey(bar.category)) : void 0;
+	const getInteractionDatum = (category, pointerPosition) => {
+		const position = getCategoryPosition(category) ?? 0;
+		const categoryBars = interactionBarsByCategory?.get(getCategoryKey(category)) ?? bars.filter((bar) => bar.category === category).map(toBarChartInteractionBar);
+		return {
+			category,
+			categoryPosition: position + (isVertical ? chartMargin.left : chartMargin.top),
+			xPosition: pointerPosition?.x ?? (isVertical ? chartMargin.left + position : chartMargin.left),
+			yPosition: pointerPosition?.y ?? (isVertical ? chartMargin.top : chartMargin.top + position),
+			bars: categoryBars
+		};
+	};
+	const getDatumFromPointer = (event) => {
+		if (categories.length === 0) return null;
+		const bounds = event.currentTarget.getBoundingClientRect();
+		const plotX = event.clientX - bounds.left - chartMargin.left;
+		const plotY = event.clientY - bounds.top - chartMargin.top;
+		if (plotX < 0 || plotX > innerWidth || plotY < 0 || plotY > innerHeight) return null;
+		const category = getNearestChartValue(categories, isVertical ? plotX : plotY, getCategoryPosition);
+		return category == null ? null : getInteractionDatum(category, {
+			x: isVertical ? chartMargin.left + (getCategoryPosition(category) ?? plotX) : chartMargin.left + plotX,
+			y: isVertical ? chartMargin.top + plotY : chartMargin.top + (getCategoryPosition(category) ?? plotY)
+		});
+	};
+	const handlePointerMove = (event) => {
+		const datum = getDatumFromPointer(event);
+		if (datum == null) {
+			setHoveredCategory(null);
+			onDatumPointerOut?.();
+			return;
+		}
+		setHoveredCategory(datum.category);
+		onDatumPointerMove?.(datum, event);
+	};
+	const handlePointerLeave = () => {
+		setHoveredCategory(null);
+		onDatumPointerOut?.();
+	};
+	const handlePointerDown = onDatumPointerDown == null ? void 0 : (event) => {
+		const datum = getDatumFromPointer(event);
+		if (datum != null) onDatumPointerDown(datum, event);
+	};
+	const handlePointerUp = onDatumPointerUp == null && onDatumActivate == null ? void 0 : (event) => {
+		const datum = getDatumFromPointer(event);
+		if (datum == null) return;
+		onDatumPointerUp?.(datum, event);
+		const isBarActivation = onBarActivate != null && event.target instanceof Element && event.target.closest("[data-bar-id]") != null;
+		if (event.button === 0 && !isBarActivation) onDatumActivate?.(datum, event);
+	};
+	const activeCategoryPosition = activeCategory == null ? void 0 : getCategoryPosition(activeCategory);
+	const activeGuideBar = activeGuideBarId == null ? void 0 : renderedBars.find((bar) => bar.id === activeGuideBarId);
+	const activeGuidePosition = activeGuideBar == null ? activeCategoryPosition : isVertical ? activeGuideBar.x + activeGuideBar.width / 2 : activeGuideBar.y + activeGuideBar.height / 2;
+	const plotSlotProps = {
+		orientation,
+		categories,
+		bars: renderedBars,
+		innerWidth,
+		innerHeight,
+		bandwidth: categoryScale.bandwidth(),
+		getCategoryPosition,
+		getValuePosition: (valueAxisId, value) => axisById.get(valueAxisId)?.scale(value)
+	};
+	const isInteractive = hasCategoryTarget || getBarAriaLabel != null || onBarActivate != null || onDatumPointerMove != null;
+	const hasAccessibleGuides = selectionRange != null || valueBands.some((band) => band.ariaLabel != null);
+	return /* @__PURE__ */ jsx("svg", {
+		width,
+		height,
+		role: isInteractive || hasAccessibleGuides ? "graphics-document group" : "img",
+		"aria-describedby": ariaDescribedBy,
+		"aria-label": ariaLabel,
+		className: cn("block size-full", onDatumActivate != null ? "cursor-pointer" : onDatumPointerMove != null && "cursor-crosshair"),
+		onPointerMove: handlePointerMove,
+		onPointerDown: handlePointerDown,
+		onPointerLeave: handlePointerLeave,
+		onPointerUp: handlePointerUp,
+		children: canDraw && /* @__PURE__ */ jsxs(Group, {
+			left: chartMargin.left,
+			top: chartMargin.top,
+			children: [
+				/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", {
+					id: clipPathId,
+					children: /* @__PURE__ */ jsx("rect", {
+						width: innerWidth,
+						height: innerHeight
+					})
+				}) }),
+				/* @__PURE__ */ jsx("g", {
+					clipPath: `url(#${clipPathId})`,
+					children: /* @__PURE__ */ jsx(BarChartGuides, {
+						orientation,
+						primaryAxis,
+						axisById,
+						categoryScale,
+						categoryTickValues,
+						grid,
+						valueBands,
+						selectionRange,
+						activeCategory: activeCategory ?? hoveredCategory,
+						innerWidth,
+						innerHeight,
+						formatCategory
+					})
+				}),
+				slots?.background?.(plotSlotProps),
+				hasCategoryTarget && categories.map((category) => {
+					const start = categoryScale(category);
+					if (start == null) return null;
+					const datum = getInteractionDatum(category);
+					const categoryAriaLabel = getCategoryAriaLabel?.(datum);
+					return /* @__PURE__ */ jsx("rect", {
+						x: isVertical ? start : 0,
+						y: isVertical ? 0 : start,
+						width: isVertical ? categoryScale.bandwidth() : innerWidth,
+						height: isVertical ? innerHeight : categoryScale.bandwidth(),
+						fill: "transparent",
+						pointerEvents: "none",
+						className: "focus-visible:stroke-focus focus-visible:stroke-2 focus-visible:outline-none",
+						tabIndex: categoryAriaLabel == null ? void 0 : 0,
+						"aria-label": categoryAriaLabel,
+						role: categoryAriaLabel != null && onDatumActivate != null ? "button" : void 0,
+						onKeyDown: onDatumActivate == null ? void 0 : (event) => {
+							if (event.key !== "Enter" && event.key !== " ") return;
+							event.preventDefault();
+							onDatumActivate(datum, event);
+						},
+						onFocus: onDatumFocus == null ? void 0 : (event) => onDatumFocus(datum, event),
+						onBlur: onDatumBlur == null ? void 0 : (event) => onDatumBlur(datum, event)
+					}, getCategoryKey(category));
+				}),
+				series.map((item) => /* @__PURE__ */ jsx("g", {
+					role: "group",
+					"aria-label": `${item.ariaLabel ?? getAccessibleText(item.label) ?? item.id} series`,
+					"data-series-id": item.id,
+					children: (renderedBarsBySeriesId.get(item.id) ?? []).map((bar) => {
+						const animationRange = animationRanges.get(bar.id) ?? {
+							start: bar.baselinePosition,
+							end: orientation === "vertical" ? bar.value < 0 ? bar.y + bar.height : bar.y : bar.value < 0 ? bar.x : bar.x + bar.width
+						};
+						return /* @__PURE__ */ jsx(AnimatedBar, {
+							bar,
+							orientation,
+							animationProgress: animation.progress,
+							animationStart: animationRange.start,
+							animationEnd: animationRange.end,
+							ariaLabel: getBarAriaLabel?.(toBarChartInteractionBar(bar)),
+							isDimmed: isBarDimmed(bar),
+							onPointerMove: onBarPointerMove,
+							onPointerOut: onBarPointerOut,
+							onActivate: onBarActivate,
+							onFocus: onBarFocus,
+							onBlur: onBarBlur
+						}, bar.id);
+					})
+				}, item.id)),
+				activeGuidePosition != null && /* @__PURE__ */ jsx("line", {
+					x1: isVertical ? activeGuidePosition : 0,
+					x2: isVertical ? activeGuidePosition : innerWidth,
+					y1: isVertical ? 0 : activeGuidePosition,
+					y2: isVertical ? innerHeight : activeGuidePosition,
+					stroke: "currentColor",
+					strokeDasharray: "4 2",
+					className: "text-quaternary",
+					pointerEvents: "none"
+				}),
+				slots?.barLabel != null && renderedBars.map((bar) => /* @__PURE__ */ jsx("g", { children: slots.barLabel?.(bar) }, `label:${bar.id}`)),
+				slots?.overlay?.(plotSlotProps),
+				/* @__PURE__ */ jsx(BarChartAxes, {
+					orientation,
+					categories,
+					categoryAxis,
+					categoryAxisThickness,
+					categoryScale,
+					categoryTickValues,
+					axes,
+					slots,
+					innerWidth,
+					innerHeight,
+					getCategoryPosition,
+					formatCategory
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { BarChartPlot };
+
+//# sourceMappingURL=BarChartPlot.js.map

package/dist/components/BarChart/BarChartPlot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChartPlot.js","names":[],"sources":["../../../src/components/BarChart/BarChartPlot.tsx"],"sourcesContent":["import { useId, useState, type KeyboardEvent, type PointerEvent } from 'react';\n\nimport { useReducedMotion, useSpring } from '@react-spring/web';\nimport { Group } from '@visx/group';\nimport { scaleBand } from '@visx/scale';\n\nimport { CHART_DASHED_STROKE_DASHARRAY } from '../../utils/chartConstants';\nimport {\n  getChartTickValues,\n  getNearestChartValue,\n} from '../../utils/chartValues';\nimport { cn } from '../../utils/cn';\nimport { getAccessibleText } from '../ChartLegend';\nimport { AnimatedBar } from './AnimatedBar';\nimport type {\n  BarChartCategory,\n  BarChartCategoryAxis,\n  BarChartDisplayAxis,\n  BarChartDisplaySeries,\n  BarChartGrid,\n  BarChartInteractionBar,\n  BarChartInteractionDatum,\n  BarChartInteractionProps,\n  BarChartLayoutBar,\n  BarChartOrientation,\n  BarChartRenderedBar,\n  BarChartSelectionRange,\n  BarChartSlots,\n  BarChartValueBand,\n} from './BarChart.types';\nimport {\n  getBarAnimationRanges,\n  getBarChartIsBarDimmed,\n  getBarChartRenderedBars,\n  getCategoryKey,\n  groupBarChartItemsBy,\n  toBarChartInteractionBar,\n} from './BarChart.utils';\nimport { BarChartAxes } from './BarChartAxes';\nimport { BarChartGuides } from './BarChartGuides';\nimport {\n  BAR_CHART_CATEGORY_ROW_TICK_SPACING,\n  BAR_CHART_CATEGORY_TICK_SPACING,\n} from './constants';\n\nconst defaultFormatCategory = (value: BarChartCategory) => String(value);\nexport type BarChartPlotProps = BarChartInteractionProps & {\n  width: number;\n  height: number;\n  innerWidth: number;\n  innerHeight: number;\n  chartMargin: { top: number; right: number; bottom: number; left: number };\n  categories: readonly BarChartCategory[];\n  series: readonly BarChartDisplaySeries[];\n  bars: readonly BarChartLayoutBar[];\n  axes: readonly BarChartDisplayAxis[];\n  orientation: BarChartOrientation;\n  categoryAxis?: BarChartCategoryAxis;\n  categoryAxisThickness: number;\n  categoryPadding: { inner: number; outer: number };\n  groupPadding: number;\n  minimumBarSize: number;\n  shouldAnimate: boolean;\n  grid?: BarChartGrid;\n  valueBands: readonly BarChartValueBand[];\n  activeCategory?: BarChartCategory | null;\n  activeGuideBarId?: string | null;\n  activeBarId?: string | null;\n  activeBuiltInLegendItemId?: string | null;\n  activeLegendItemId?: string | null;\n  selectionRange?: BarChartSelectionRange;\n  slots?: BarChartSlots;\n  isRendering: boolean;\n  'aria-describedby'?: string;\n  'aria-label': string;\n};\n\nexport const BarChartPlot = ({\n  width,\n  height,\n  innerWidth,\n  innerHeight,\n  chartMargin,\n  categories,\n  series,\n  bars,\n  axes,\n  orientation,\n  categoryAxis,\n  categoryAxisThickness,\n  categoryPadding,\n  groupPadding,\n  minimumBarSize,\n  shouldAnimate,\n  grid,\n  valueBands,\n  activeCategory,\n  activeGuideBarId,\n  activeBarId,\n  activeBuiltInLegendItemId,\n  activeLegendItemId,\n  selectionRange,\n  slots,\n  isRendering,\n  'aria-describedby': ariaDescribedBy,\n  'aria-label': ariaLabel,\n  getBarAriaLabel,\n  getCategoryAriaLabel,\n  onDatumPointerDown,\n  onDatumPointerMove,\n  onDatumPointerOut,\n  onDatumPointerUp,\n  onDatumActivate,\n  onDatumFocus,\n  onDatumBlur,\n  onBarPointerMove,\n  onBarPointerOut,\n  onBarActivate,\n  onBarFocus,\n  onBarBlur,\n}: BarChartPlotProps) => {\n  const [hoveredCategory, setHoveredCategory] =\n    useState<BarChartCategory | null>(null);\n  const isVertical = orientation === 'vertical';\n  // useId can emit characters that are not valid in a CSS identifier.\n  const clipPathId = `bar-chart-${useId().replace(/[^\\w-]/g, '')}`;\n  const isReducedMotion = (useReducedMotion() ?? false) || !shouldAnimate;\n  const primaryAxis = axes[0];\n  const canDraw = innerWidth > 0 && innerHeight > 0 && primaryAxis != null;\n  const categoryScale = scaleBand<BarChartCategory>({\n    domain: Array.from(categories),\n    range: [0, isVertical ? innerWidth : innerHeight],\n    paddingInner: categoryPadding.inner,\n    paddingOuter: categoryPadding.outer,\n  });\n  const axisById = new Map(axes.map((axis) => [axis.id, axis]));\n  // Marks are the expensive half; `isRendering` exists to skip exactly this.\n  const renderedBars: readonly BarChartRenderedBar[] =\n    canDraw && isRendering\n      ? getBarChartRenderedBars({\n          bars,\n          orientation,\n          categoryScale,\n          axisById,\n          groupPadding,\n          minimumBarSize,\n          innerWidth,\n          innerHeight,\n        })\n      : [];\n  const renderedBarsBySeriesId = groupBarChartItemsBy(\n    renderedBars,\n    (bar) => bar.seriesId\n  );\n  const isBarDimmed = getBarChartIsBarDimmed({\n    bars: renderedBars,\n    activeBuiltInLegendItemId,\n    activeLegendItemId,\n    activeBarId,\n  });\n  const animationRanges = getBarAnimationRanges(renderedBars, orientation);\n  const hasRenderedBars = renderedBars.length > 0;\n  const barAnimationKey = JSON.stringify([\n    orientation,\n    bars.map((bar) => [\n      bar.id,\n      bar.category,\n      bar.valueAxisId,\n      bar.groupIndex,\n      bar.startValue,\n      bar.endValue,\n    ]),\n  ]);\n  // One chart-level spring keeps every stack on the same timeline. Individual\n  // segments clamp that shared reveal edge to their own final geometry.\n  const [animation] = useSpring(\n    () => ({\n      from: { progress: 0 },\n      to: { progress: hasRenderedBars ? 1 : 0 },\n      reset: true,\n      immediate: isReducedMotion,\n    }),\n    [barAnimationKey, hasRenderedBars, isReducedMotion]\n  );\n  const formatCategory = categoryAxis?.formatValue ?? defaultFormatCategory;\n  const categoryTickValues =\n    categoryAxis?.tickValues ??\n    getChartTickValues(\n      categories,\n      categoryAxis?.tickCount ??\n        Math.max(\n          1,\n          Math.floor(\n            isVertical\n              ? innerWidth / BAR_CHART_CATEGORY_TICK_SPACING\n              : innerHeight / BAR_CHART_CATEGORY_ROW_TICK_SPACING\n          )\n        )\n    );\n  const getCategoryPosition = (category: BarChartCategory) => {\n    const start = categoryScale(category);\n    return start == null ? undefined : start + categoryScale.bandwidth() / 2;\n  };\n\n  const hasCategoryTarget =\n    getCategoryAriaLabel != null ||\n    onDatumActivate != null ||\n    onDatumFocus != null ||\n    onDatumBlur != null;\n  // One pass over the bars, rather than one scan of every bar per category.\n  const interactionBarsByCategory = hasCategoryTarget\n    ? groupBarChartItemsBy(bars.map(toBarChartInteractionBar), (bar) =>\n        getCategoryKey(bar.category)\n      )\n    : undefined;\n  const getInteractionDatum = (\n    category: BarChartCategory,\n    pointerPosition?: { x: number; y: number }\n  ): BarChartInteractionDatum => {\n    const position = getCategoryPosition(category) ?? 0;\n    const categoryBars: readonly BarChartInteractionBar[] =\n      interactionBarsByCategory?.get(getCategoryKey(category)) ??\n      bars\n        .filter((bar) => bar.category === category)\n        .map(toBarChartInteractionBar);\n    return {\n      category,\n      categoryPosition:\n        position + (isVertical ? chartMargin.left : chartMargin.top),\n      xPosition:\n        pointerPosition?.x ??\n        (isVertical ? chartMargin.left + position : chartMargin.left),\n      yPosition:\n        pointerPosition?.y ??\n        (isVertical ? chartMargin.top : chartMargin.top + position),\n      bars: categoryBars,\n    };\n  };\n  const getDatumFromPointer = (event: PointerEvent<SVGSVGElement>) => {\n    if (categories.length === 0) return null;\n    const bounds = event.currentTarget.getBoundingClientRect();\n    const plotX = event.clientX - bounds.left - chartMargin.left;\n    const plotY = event.clientY - bounds.top - chartMargin.top;\n    if (plotX < 0 || plotX > innerWidth || plotY < 0 || plotY > innerHeight) {\n      return null;\n    }\n    const category = getNearestChartValue(\n      categories,\n      isVertical ? plotX : plotY,\n      getCategoryPosition\n    );\n    return category == null\n      ? null\n      : getInteractionDatum(category, {\n          x: isVertical\n            ? chartMargin.left + (getCategoryPosition(category) ?? plotX)\n            : chartMargin.left + plotX,\n          y: isVertical\n            ? chartMargin.top + plotY\n            : chartMargin.top + (getCategoryPosition(category) ?? plotY),\n        });\n  };\n  const handlePointerMove = (event: PointerEvent<SVGSVGElement>) => {\n    const datum = getDatumFromPointer(event);\n    // Leaving the plot for an axis gutter must clear hover state and consumer\n    // tooltips even though the pointer remains inside the chart SVG.\n    if (datum == null) {\n      setHoveredCategory(null);\n      onDatumPointerOut?.();\n      return;\n    }\n    setHoveredCategory(datum.category);\n    onDatumPointerMove?.(datum, event);\n  };\n  const handlePointerLeave = () => {\n    setHoveredCategory(null);\n    onDatumPointerOut?.();\n  };\n  const handlePointerDown =\n    onDatumPointerDown == null\n      ? undefined\n      : (event: PointerEvent<SVGSVGElement>) => {\n          const datum = getDatumFromPointer(event);\n          if (datum != null) onDatumPointerDown(datum, event);\n        };\n  const handlePointerUp =\n    onDatumPointerUp == null && onDatumActivate == null\n      ? undefined\n      : (event: PointerEvent<SVGSVGElement>) => {\n          const datum = getDatumFromPointer(event);\n          if (datum == null) return;\n          onDatumPointerUp?.(datum, event);\n          const isBarActivation =\n            onBarActivate != null &&\n            event.target instanceof Element &&\n            event.target.closest('[data-bar-id]') != null;\n          if (event.button === 0 && !isBarActivation) {\n            onDatumActivate?.(datum, event);\n          }\n        };\n\n  const activeCategoryPosition =\n    activeCategory == null ? undefined : getCategoryPosition(activeCategory);\n  const activeGuideBar =\n    activeGuideBarId == null\n      ? undefined\n      : renderedBars.find((bar) => bar.id === activeGuideBarId);\n  const activeGuidePosition =\n    activeGuideBar == null\n      ? activeCategoryPosition\n      : isVertical\n        ? activeGuideBar.x + activeGuideBar.width / 2\n        : activeGuideBar.y + activeGuideBar.height / 2;\n  const plotSlotProps = {\n    orientation,\n    categories,\n    bars: renderedBars,\n    innerWidth,\n    innerHeight,\n    bandwidth: categoryScale.bandwidth(),\n    getCategoryPosition,\n    getValuePosition: (valueAxisId: string, value: number) =>\n      axisById.get(valueAxisId)?.scale(value),\n  };\n  const isInteractive =\n    hasCategoryTarget ||\n    getBarAriaLabel != null ||\n    onBarActivate != null ||\n    onDatumPointerMove != null;\n  const hasAccessibleGuides =\n    selectionRange != null || valueBands.some((band) => band.ariaLabel != null);\n\n  return (\n    <svg\n      width={width}\n      height={height}\n      // Preserve accessible descendants for labeled bars, targets, and guides.\n      role={\n        isInteractive || hasAccessibleGuides ? 'graphics-document group' : 'img'\n      }\n      aria-describedby={ariaDescribedBy}\n      aria-label={ariaLabel}\n      className={cn(\n        'block size-full',\n        onDatumActivate != null\n          ? 'cursor-pointer'\n          : onDatumPointerMove != null && 'cursor-crosshair'\n      )}\n      onPointerMove={handlePointerMove}\n      onPointerDown={handlePointerDown}\n      onPointerLeave={handlePointerLeave}\n      onPointerUp={handlePointerUp}\n    >\n      {canDraw && (\n        <Group left={chartMargin.left} top={chartMargin.top}>\n          <defs>\n            <clipPath id={clipPathId}>\n              <rect width={innerWidth} height={innerHeight} />\n            </clipPath>\n          </defs>\n          <g clipPath={`url(#${clipPathId})`}>\n            <BarChartGuides\n              orientation={orientation}\n              primaryAxis={primaryAxis}\n              axisById={axisById}\n              categoryScale={categoryScale}\n              categoryTickValues={categoryTickValues}\n              grid={grid}\n              valueBands={valueBands}\n              selectionRange={selectionRange}\n              activeCategory={activeCategory ?? hoveredCategory}\n              innerWidth={innerWidth}\n              innerHeight={innerHeight}\n              formatCategory={formatCategory}\n            />\n          </g>\n          {slots?.background?.(plotSlotProps)}\n          {hasCategoryTarget &&\n            categories.map((category) => {\n              const start = categoryScale(category);\n              if (start == null) return null;\n              const datum = getInteractionDatum(category);\n              const categoryAriaLabel = getCategoryAriaLabel?.(datum);\n              return (\n                <rect\n                  key={getCategoryKey(category)}\n                  x={isVertical ? start : 0}\n                  y={isVertical ? 0 : start}\n                  width={isVertical ? categoryScale.bandwidth() : innerWidth}\n                  height={isVertical ? innerHeight : categoryScale.bandwidth()}\n                  fill=\"transparent\"\n                  // The plot-level pointer handlers own hit testing; these\n                  // targets exist for keyboard and assistive technology.\n                  pointerEvents=\"none\"\n                  className=\"focus-visible:stroke-focus focus-visible:stroke-2 focus-visible:outline-none\"\n                  tabIndex={categoryAriaLabel == null ? undefined : 0}\n                  aria-label={categoryAriaLabel}\n                  role={\n                    categoryAriaLabel != null && onDatumActivate != null\n                      ? 'button'\n                      : undefined\n                  }\n                  onKeyDown={\n                    onDatumActivate == null\n                      ? undefined\n                      : (event: KeyboardEvent<SVGRectElement>) => {\n                          if (event.key !== 'Enter' && event.key !== ' ')\n                            return;\n                          event.preventDefault();\n                          onDatumActivate(datum, event);\n                        }\n                  }\n                  onFocus={\n                    onDatumFocus == null\n                      ? undefined\n                      : (event) => onDatumFocus(datum, event)\n                  }\n                  onBlur={\n                    onDatumBlur == null\n                      ? undefined\n                      : (event) => onDatumBlur(datum, event)\n                  }\n                />\n              );\n            })}\n          {series.map((item) => (\n            <g\n              key={item.id}\n              role=\"group\"\n              aria-label={`${item.ariaLabel ?? getAccessibleText(item.label) ?? item.id} series`}\n              data-series-id={item.id}\n            >\n              {(renderedBarsBySeriesId.get(item.id) ?? []).map((bar) => {\n                const animationRange = animationRanges.get(bar.id) ?? {\n                  start: bar.baselinePosition,\n                  end:\n                    orientation === 'vertical'\n                      ? bar.value < 0\n                        ? bar.y + bar.height\n                        : bar.y\n                      : bar.value < 0\n                        ? bar.x\n                        : bar.x + bar.width,\n                };\n                return (\n                  <AnimatedBar\n                    key={bar.id}\n                    bar={bar}\n                    orientation={orientation}\n                    animationProgress={animation.progress}\n                    animationStart={animationRange.start}\n                    animationEnd={animationRange.end}\n                    ariaLabel={getBarAriaLabel?.(toBarChartInteractionBar(bar))}\n                    isDimmed={isBarDimmed(bar)}\n                    onPointerMove={onBarPointerMove}\n                    onPointerOut={onBarPointerOut}\n                    onActivate={onBarActivate}\n                    onFocus={onBarFocus}\n                    onBlur={onBarBlur}\n                  />\n                );\n              })}\n            </g>\n          ))}\n          {activeGuidePosition != null && (\n            <line\n              x1={isVertical ? activeGuidePosition : 0}\n              x2={isVertical ? activeGuidePosition : innerWidth}\n              y1={isVertical ? 0 : activeGuidePosition}\n              y2={isVertical ? innerHeight : activeGuidePosition}\n              stroke=\"currentColor\"\n              strokeDasharray={CHART_DASHED_STROKE_DASHARRAY}\n              className=\"text-quaternary\"\n              pointerEvents=\"none\"\n            />\n          )}\n          {slots?.barLabel != null &&\n            renderedBars.map((bar) => (\n              <g key={`label:${bar.id}`}>{slots.barLabel?.(bar)}</g>\n            ))}\n          {slots?.overlay?.(plotSlotProps)}\n          <BarChartAxes\n            orientation={orientation}\n            categories={categories}\n            categoryAxis={categoryAxis}\n            categoryAxisThickness={categoryAxisThickness}\n            categoryScale={categoryScale}\n            categoryTickValues={categoryTickValues}\n            axes={axes}\n            slots={slots}\n            innerWidth={innerWidth}\n            innerHeight={innerHeight}\n            getCategoryPosition={getCategoryPosition}\n            formatCategory={formatCategory}\n          />\n        </Group>\n      )}\n    </svg>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AA6CA,IAAM,yBAAyB,UAA4B,OAAO,KAAK;AAgCvE,IAAa,gBAAgB,EAC3B,OACA,QACA,YACA,aACA,aACA,YACA,QACA,MACA,MACA,aACA,cACA,uBACA,iBACA,cACA,gBACA,eACA,MACA,YACA,gBACA,kBACA,aACA,2BACA,oBACA,gBACA,OACA,aACA,oBAAoB,iBACpB,cAAc,WACd,iBACA,sBACA,oBACA,oBACA,mBACA,kBACA,iBACA,cACA,aACA,kBACA,iBACA,eACA,YACA,gBACuB;CACvB,MAAM,CAAC,iBAAiB,sBACtB,SAAkC,IAAI;CACxC,MAAM,aAAa,gBAAgB;CAEnC,MAAM,aAAa,aAAa,MAAM,CAAC,CAAC,QAAQ,WAAW,EAAE;CAC7D,MAAM,mBAAmB,iBAAiB,KAAK,UAAU,CAAC;CAC1D,MAAM,cAAc,KAAK;CACzB,MAAM,UAAU,aAAa,KAAK,cAAc,KAAK,eAAe;CACpE,MAAM,gBAAgB,UAA4B;EAChD,QAAQ,MAAM,KAAK,UAAU;EAC7B,OAAO,CAAC,GAAG,aAAa,aAAa,WAAW;EAChD,cAAc,gBAAgB;EAC9B,cAAc,gBAAgB;CAChC,CAAC;CACD,MAAM,WAAW,IAAI,IAAI,KAAK,KAAK,SAAS,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC;CAE5D,MAAM,eACJ,WAAW,cACP,wBAAwB;EACtB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,IACD,CAAC;CACP,MAAM,yBAAyB,qBAC7B,eACC,QAAQ,IAAI,QACf;CACA,MAAM,cAAc,uBAAuB;EACzC,MAAM;EACN;EACA;EACA;CACF,CAAC;CACD,MAAM,kBAAkB,sBAAsB,cAAc,WAAW;CACvE,MAAM,kBAAkB,aAAa,SAAS;CAC9C,MAAM,kBAAkB,KAAK,UAAU,CACrC,aACA,KAAK,KAAK,QAAQ;EAChB,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,CAAC,CACH,CAAC;CAGD,MAAM,CAAC,aAAa,iBACX;EACL,MAAM,EAAE,UAAU,EAAE;EACpB,IAAI,EAAE,UAAU,kBAAkB,IAAI,EAAE;EACxC,OAAO;EACP,WAAW;CACb,IACA;EAAC;EAAiB;EAAiB;CAAe,CACpD;CACA,MAAM,iBAAiB,cAAc,eAAe;CACpD,MAAM,qBACJ,cAAc,cACd,mBACE,YACA,cAAc,aACZ,KAAK,IACH,GACA,KAAK,MACH,aACI,aAAA,KACA,cAAA,EACN,CACF,CACJ;CACF,MAAM,uBAAuB,aAA+B;EAC1D,MAAM,QAAQ,cAAc,QAAQ;EACpC,OAAO,SAAS,OAAO,KAAA,IAAY,QAAQ,cAAc,UAAU,IAAI;CACzE;CAEA,MAAM,oBACJ,wBAAwB,QACxB,mBAAmB,QACnB,gBAAgB,QAChB,eAAe;CAEjB,MAAM,4BAA4B,oBAC9B,qBAAqB,KAAK,IAAI,wBAAwB,IAAI,QACxD,eAAe,IAAI,QAAQ,CAC7B,IACA,KAAA;CACJ,MAAM,uBACJ,UACA,oBAC6B;EAC7B,MAAM,WAAW,oBAAoB,QAAQ,KAAK;EAClD,MAAM,eACJ,2BAA2B,IAAI,eAAe,QAAQ,CAAC,KACvD,KACG,QAAQ,QAAQ,IAAI,aAAa,QAAQ,CAAC,CAC1C,IAAI,wBAAwB;EACjC,OAAO;GACL;GACA,kBACE,YAAY,aAAa,YAAY,OAAO,YAAY;GAC1D,WACE,iBAAiB,MAChB,aAAa,YAAY,OAAO,WAAW,YAAY;GAC1D,WACE,iBAAiB,MAChB,aAAa,YAAY,MAAM,YAAY,MAAM;GACpD,MAAM;EACR;CACF;CACA,MAAM,uBAAuB,UAAuC;EAClE,IAAI,WAAW,WAAW,GAAG,OAAO;EACpC,MAAM,SAAS,MAAM,cAAc,sBAAsB;EACzD,MAAM,QAAQ,MAAM,UAAU,OAAO,OAAO,YAAY;EACxD,MAAM,QAAQ,MAAM,UAAU,OAAO,MAAM,YAAY;EACvD,IAAI,QAAQ,KAAK,QAAQ,cAAc,QAAQ,KAAK,QAAQ,aAC1D,OAAO;EAET,MAAM,WAAW,qBACf,YACA,aAAa,QAAQ,OACrB,mBACF;EACA,OAAO,YAAY,OACf,OACA,oBAAoB,UAAU;GAC5B,GAAG,aACC,YAAY,QAAQ,oBAAoB,QAAQ,KAAK,SACrD,YAAY,OAAO;GACvB,GAAG,aACC,YAAY,MAAM,QAClB,YAAY,OAAO,oBAAoB,QAAQ,KAAK;EAC1D,CAAC;CACP;CACA,MAAM,qBAAqB,UAAuC;EAChE,MAAM,QAAQ,oBAAoB,KAAK;EAGvC,IAAI,SAAS,MAAM;GACjB,mBAAmB,IAAI;GACvB,oBAAoB;GACpB;EACF;EACA,mBAAmB,MAAM,QAAQ;EACjC,qBAAqB,OAAO,KAAK;CACnC;CACA,MAAM,2BAA2B;EAC/B,mBAAmB,IAAI;EACvB,oBAAoB;CACtB;CACA,MAAM,oBACJ,sBAAsB,OAClB,KAAA,KACC,UAAuC;EACtC,MAAM,QAAQ,oBAAoB,KAAK;EACvC,IAAI,SAAS,MAAM,mBAAmB,OAAO,KAAK;CACpD;CACN,MAAM,kBACJ,oBAAoB,QAAQ,mBAAmB,OAC3C,KAAA,KACC,UAAuC;EACtC,MAAM,QAAQ,oBAAoB,KAAK;EACvC,IAAI,SAAS,MAAM;EACnB,mBAAmB,OAAO,KAAK;EAC/B,MAAM,kBACJ,iBAAiB,QACjB,MAAM,kBAAkB,WACxB,MAAM,OAAO,QAAQ,eAAe,KAAK;EAC3C,IAAI,MAAM,WAAW,KAAK,CAAC,iBACzB,kBAAkB,OAAO,KAAK;CAElC;CAEN,MAAM,yBACJ,kBAAkB,OAAO,KAAA,IAAY,oBAAoB,cAAc;CACzE,MAAM,iBACJ,oBAAoB,OAChB,KAAA,IACA,aAAa,MAAM,QAAQ,IAAI,OAAO,gBAAgB;CAC5D,MAAM,sBACJ,kBAAkB,OACd,yBACA,aACE,eAAe,IAAI,eAAe,QAAQ,IAC1C,eAAe,IAAI,eAAe,SAAS;CACnD,MAAM,gBAAgB;EACpB;EACA;EACA,MAAM;EACN;EACA;EACA,WAAW,cAAc,UAAU;EACnC;EACA,mBAAmB,aAAqB,UACtC,SAAS,IAAI,WAAW,CAAC,EAAE,MAAM,KAAK;CAC1C;CACA,MAAM,gBACJ,qBACA,mBAAmB,QACnB,iBAAiB,QACjB,sBAAsB;CACxB,MAAM,sBACJ,kBAAkB,QAAQ,WAAW,MAAM,SAAS,KAAK,aAAa,IAAI;CAE5E,OACE,oBAAC,OAAD;EACS;EACC;EAER,MACE,iBAAiB,sBAAsB,4BAA4B;EAErE,oBAAkB;EAClB,cAAY;EACZ,WAAW,GACT,mBACA,mBAAmB,OACf,mBACA,sBAAsB,QAAQ,kBACpC;EACA,eAAe;EACf,eAAe;EACf,gBAAgB;EAChB,aAAa;EAEZ,UAAA,WACC,qBAAC,OAAD;GAAO,MAAM,YAAY;GAAM,KAAK,YAAY;GAAhD,UAAA;IACE,oBAAC,QAAD,EAAA,UACE,oBAAC,YAAD;KAAU,IAAI;KACZ,UAAA,oBAAC,QAAD;MAAM,OAAO;MAAY,QAAQ;KAAc,CAAA;IACvC,CAAA,EACN,CAAA;IACN,oBAAC,KAAD;KAAG,UAAU,QAAQ,WAAW;KAC9B,UAAA,oBAAC,gBAAD;MACe;MACA;MACH;MACK;MACK;MACd;MACM;MACI;MAChB,gBAAgB,kBAAkB;MACtB;MACC;MACG;KACjB,CAAA;IACA,CAAA;IACF,OAAO,aAAa,aAAa;IACjC,qBACC,WAAW,KAAK,aAAa;KAC3B,MAAM,QAAQ,cAAc,QAAQ;KACpC,IAAI,SAAS,MAAM,OAAO;KAC1B,MAAM,QAAQ,oBAAoB,QAAQ;KAC1C,MAAM,oBAAoB,uBAAuB,KAAK;KACtD,OACE,oBAAC,QAAD;MAEE,GAAG,aAAa,QAAQ;MACxB,GAAG,aAAa,IAAI;MACpB,OAAO,aAAa,cAAc,UAAU,IAAI;MAChD,QAAQ,aAAa,cAAc,cAAc,UAAU;MAC3D,MAAK;MAGL,eAAc;MACd,WAAU;MACV,UAAU,qBAAqB,OAAO,KAAA,IAAY;MAClD,cAAY;MACZ,MACE,qBAAqB,QAAQ,mBAAmB,OAC5C,WACA,KAAA;MAEN,WACE,mBAAmB,OACf,KAAA,KACC,UAAyC;OACxC,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KACzC;OACF,MAAM,eAAe;OACrB,gBAAgB,OAAO,KAAK;MAC9B;MAEN,SACE,gBAAgB,OACZ,KAAA,KACC,UAAU,aAAa,OAAO,KAAK;MAE1C,QACE,eAAe,OACX,KAAA,KACC,UAAU,YAAY,OAAO,KAAK;KAE1C,GArCM,eAAe,QAAQ,CAqC7B;IAEL,CAAC;IACF,OAAO,KAAK,SACX,oBAAC,KAAD;KAEE,MAAK;KACL,cAAY,GAAG,KAAK,aAAa,kBAAkB,KAAK,KAAK,KAAK,KAAK,GAAG;KAC1E,kBAAgB,KAAK;KAEnB,WAAA,uBAAuB,IAAI,KAAK,EAAE,KAAK,CAAC,EAAA,CAAG,KAAK,QAAQ;MACxD,MAAM,iBAAiB,gBAAgB,IAAI,IAAI,EAAE,KAAK;OACpD,OAAO,IAAI;OACX,KACE,gBAAgB,aACZ,IAAI,QAAQ,IACV,IAAI,IAAI,IAAI,SACZ,IAAI,IACN,IAAI,QAAQ,IACV,IAAI,IACJ,IAAI,IAAI,IAAI;MACtB;MACA,OACE,oBAAC,aAAD;OAEO;OACQ;OACb,mBAAmB,UAAU;OAC7B,gBAAgB,eAAe;OAC/B,cAAc,eAAe;OAC7B,WAAW,kBAAkB,yBAAyB,GAAG,CAAC;OAC1D,UAAU,YAAY,GAAG;OACzB,eAAe;OACf,cAAc;OACd,YAAY;OACZ,SAAS;OACT,QAAQ;MACT,GAbM,IAAI,EAaV;KAEL,CAAC;IACA,GAnCI,KAAK,EAmCT,CACJ;IACA,uBAAuB,QACtB,oBAAC,QAAD;KACE,IAAI,aAAa,sBAAsB;KACvC,IAAI,aAAa,sBAAsB;KACvC,IAAI,aAAa,IAAI;KACrB,IAAI,aAAa,cAAc;KAC/B,QAAO;KACP,iBAAA;KACA,WAAU;KACV,eAAc;IACf,CAAA;IAEF,OAAO,YAAY,QAClB,aAAa,KAAK,QAChB,oBAAC,KAAD,EAAA,UAA4B,MAAM,WAAW,GAAG,EAAK,GAA7C,SAAS,IAAI,IAAgC,CACtD;IACF,OAAO,UAAU,aAAa;IAC/B,oBAAC,cAAD;KACe;KACD;KACE;KACS;KACR;KACK;KACd;KACC;KACK;KACC;KACQ;KACL;IACjB,CAAA;GACI;;CAEN,CAAA;AAET"}

package/dist/components/BarChart/constants.d.ts

@@ -0,0 +1,21 @@
+/** Narrowest a vertical value axis gets, before its tick labels are measured. */
+export declare const BAR_CHART_VALUE_AXIS_THICKNESS = 48;
+/** Reserved width of a horizontal chart's category axis, in SVG pixels. */
+export declare const BAR_CHART_HORIZONTAL_CATEGORY_AXIS_THICKNESS = 112;
+/** Reserved height of an axis that runs along the bottom or top edge. */
+export declare const BAR_CHART_AXIS_THICKNESS = 32;
+export declare const BAR_CHART_DEFAULT_AXIS_ID = "bar-chart-default-axis";
+export declare const BAR_CHART_MARGIN_TOP = 8;
+export declare const BAR_CHART_MARGIN_RIGHT = 8;
+export declare const BAR_CHART_MINIMUM_PLOT_WIDTH = 160;
+export declare const BAR_CHART_DEFAULT_GROUP_PADDING = 0.08;
+export declare const BAR_CHART_DEFAULT_MINIMUM_BAR_SIZE = 1;
+export declare const BAR_CHART_DEFAULT_CATEGORY_PADDING_INNER = 0.2;
+export declare const BAR_CHART_DEFAULT_CATEGORY_PADDING_OUTER = 0.1;
+export declare const BAR_CHART_DEFAULT_VALUE_BAND_OPACITY = 0.5;
+/** Shared by the value grid and the value axis so their lines stay aligned. */
+export declare const BAR_CHART_DEFAULT_TICK_COUNT = 4;
+/** Narrowest comfortable gap between two category tick labels, in pixels. */
+export declare const BAR_CHART_CATEGORY_TICK_SPACING = 64;
+/** Narrowest comfortable gap between two category tick labels when stacked vertically. */
+export declare const BAR_CHART_CATEGORY_ROW_TICK_SPACING = 28;

package/dist/components/BarChart/constants.js

@@ -0,0 +1,26 @@
+//#region packages/components/src/components/BarChart/constants.ts
+/** Narrowest a vertical value axis gets, before its tick labels are measured. */
+var BAR_CHART_VALUE_AXIS_THICKNESS = 48;
+/** Reserved width of a horizontal chart's category axis, in SVG pixels. */
+var BAR_CHART_HORIZONTAL_CATEGORY_AXIS_THICKNESS = 112;
+/** Reserved height of an axis that runs along the bottom or top edge. */
+var BAR_CHART_AXIS_THICKNESS = 32;
+var BAR_CHART_DEFAULT_AXIS_ID = "bar-chart-default-axis";
+var BAR_CHART_MARGIN_TOP = 8;
+var BAR_CHART_MARGIN_RIGHT = 8;
+var BAR_CHART_MINIMUM_PLOT_WIDTH = 160;
+var BAR_CHART_DEFAULT_GROUP_PADDING = .08;
+var BAR_CHART_DEFAULT_MINIMUM_BAR_SIZE = 1;
+var BAR_CHART_DEFAULT_CATEGORY_PADDING_INNER = .2;
+var BAR_CHART_DEFAULT_CATEGORY_PADDING_OUTER = .1;
+var BAR_CHART_DEFAULT_VALUE_BAND_OPACITY = .5;
+/** Shared by the value grid and the value axis so their lines stay aligned. */
+var BAR_CHART_DEFAULT_TICK_COUNT = 4;
+/** Narrowest comfortable gap between two category tick labels, in pixels. */
+var BAR_CHART_CATEGORY_TICK_SPACING = 64;
+/** Narrowest comfortable gap between two category tick labels when stacked vertically. */
+var BAR_CHART_CATEGORY_ROW_TICK_SPACING = 28;
+//#endregion
+export { BAR_CHART_AXIS_THICKNESS, BAR_CHART_CATEGORY_ROW_TICK_SPACING, BAR_CHART_CATEGORY_TICK_SPACING, BAR_CHART_DEFAULT_AXIS_ID, BAR_CHART_DEFAULT_CATEGORY_PADDING_INNER, BAR_CHART_DEFAULT_CATEGORY_PADDING_OUTER, BAR_CHART_DEFAULT_GROUP_PADDING, BAR_CHART_DEFAULT_MINIMUM_BAR_SIZE, BAR_CHART_DEFAULT_TICK_COUNT, BAR_CHART_DEFAULT_VALUE_BAND_OPACITY, BAR_CHART_HORIZONTAL_CATEGORY_AXIS_THICKNESS, BAR_CHART_MARGIN_RIGHT, BAR_CHART_MARGIN_TOP, BAR_CHART_MINIMUM_PLOT_WIDTH, BAR_CHART_VALUE_AXIS_THICKNESS };
+
+//# sourceMappingURL=constants.js.map

package/dist/components/BarChart/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":[],"sources":["../../../src/components/BarChart/constants.ts"],"sourcesContent":["/** Narrowest a vertical value axis gets, before its tick labels are measured. */\nexport const BAR_CHART_VALUE_AXIS_THICKNESS = 48;\n/** Reserved width of a horizontal chart's category axis, in SVG pixels. */\nexport const BAR_CHART_HORIZONTAL_CATEGORY_AXIS_THICKNESS = 112;\n/** Reserved height of an axis that runs along the bottom or top edge. */\nexport const BAR_CHART_AXIS_THICKNESS = 32;\n\nexport const BAR_CHART_DEFAULT_AXIS_ID = 'bar-chart-default-axis';\nexport const BAR_CHART_MARGIN_TOP = 8;\nexport const BAR_CHART_MARGIN_RIGHT = 8;\nexport const BAR_CHART_MINIMUM_PLOT_WIDTH = 160;\n\nexport const BAR_CHART_DEFAULT_GROUP_PADDING = 0.08;\nexport const BAR_CHART_DEFAULT_MINIMUM_BAR_SIZE = 1;\nexport const BAR_CHART_DEFAULT_CATEGORY_PADDING_INNER = 0.2;\nexport const BAR_CHART_DEFAULT_CATEGORY_PADDING_OUTER = 0.1;\nexport const BAR_CHART_DEFAULT_VALUE_BAND_OPACITY = 0.5;\n\n/** Shared by the value grid and the value axis so their lines stay aligned. */\nexport const BAR_CHART_DEFAULT_TICK_COUNT = 4;\n/** Narrowest comfortable gap between two category tick labels, in pixels. */\nexport const BAR_CHART_CATEGORY_TICK_SPACING = 64;\n/** Narrowest comfortable gap between two category tick labels when stacked vertically. */\nexport const BAR_CHART_CATEGORY_ROW_TICK_SPACING = 28;\n"],"mappings":";;AACA,IAAa,iCAAiC;;AAE9C,IAAa,+CAA+C;;AAE5D,IAAa,2BAA2B;AAExC,IAAa,4BAA4B;AACzC,IAAa,uBAAuB;AACpC,IAAa,yBAAyB;AACtC,IAAa,+BAA+B;AAE5C,IAAa,kCAAkC;AAC/C,IAAa,qCAAqC;AAClD,IAAa,2CAA2C;AACxD,IAAa,2CAA2C;AACxD,IAAa,uCAAuC;;AAGpD,IAAa,+BAA+B;;AAE5C,IAAa,kCAAkC;;AAE/C,IAAa,sCAAsC"}

package/dist/components/BarChart/index.d.ts

@@ -0,0 +1,3 @@
+export { BarChart } from './BarChart.js';
+export type { BarChartCategory, BarChartCategoryAxis, BarChartCategoryAxisSlotProps, BarChartDataPoint, BarChartGrid, BarChartInteractionBar, BarChartInteractionDatum, BarChartMode, BarChartOrientation, BarChartPlotSlotProps, BarChartProps, BarChartRenderedBar, BarChartSelectionRange, BarChartSeries, BarChartSlots, BarChartValueAxis, BarChartValueAxisSlotProps, BarChartValueBand, } from './BarChart.types.js';
+export { BAR_CHART_AXIS_THICKNESS, BAR_CHART_HORIZONTAL_CATEGORY_AXIS_THICKNESS, BAR_CHART_MARGIN_RIGHT, BAR_CHART_MARGIN_TOP, BAR_CHART_MINIMUM_PLOT_WIDTH, BAR_CHART_VALUE_AXIS_THICKNESS, } from './constants.js';

package/dist/components/BarChart/index.js

@@ -0,0 +1,3 @@
+import { BAR_CHART_AXIS_THICKNESS, BAR_CHART_HORIZONTAL_CATEGORY_AXIS_THICKNESS, BAR_CHART_MARGIN_RIGHT, BAR_CHART_MARGIN_TOP, BAR_CHART_MINIMUM_PLOT_WIDTH, BAR_CHART_VALUE_AXIS_THICKNESS } from "./constants.js";
+import { BarChart } from "./BarChart.js";
+export { BAR_CHART_AXIS_THICKNESS, BAR_CHART_HORIZONTAL_CATEGORY_AXIS_THICKNESS, BAR_CHART_MARGIN_RIGHT, BAR_CHART_MARGIN_TOP, BAR_CHART_MINIMUM_PLOT_WIDTH, BAR_CHART_VALUE_AXIS_THICKNESS, BarChart };

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,36 @@
+import { type ButtonHTMLAttributes, type ReactElement } from 'react';
+import { type ControlSize } from '../../utils/componentSizes.js';
+import type { IconComponent } from '../../utils/icon-types.js';
+type ButtonSize = Exclude<ControlSize, 'lg'>;
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Exact outer height: xs=20px, sm=24px, md=32px. */
+    size?: ButtonSize;
+    /** Button color scheme */
+    color?: 'primary' | 'secondary' | 'error';
+    /** Button visual variant */
+    variant?: 'normal' | 'outlined' | 'plain' | 'underlined';
+    /** Click handler */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Icon component to display on the left side */
+    leftDecorator?: IconComponent;
+    /** Icon component to display on the right side */
+    rightDecorator?: IconComponent;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Tag text to display */
+    tagText?: string;
+    /** Position of the tag */
+    tagPosition?: 'left' | 'right';
+    /** Button content */
+    children: React.ReactNode;
+    /** Whether the button is loading */
+    loading?: boolean;
+    /** Pass through the `<button>` props to a child component */
+    as?: ReactElement<{
+        children: React.ReactNode;
+        [key: string]: unknown;
+    }>;
+}
+declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export { Button };
+export type { ButtonProps };

package/dist/components/Button/Button.js

@@ -0,0 +1,99 @@
+import { cn } from "../../utils/cn.js";
+import { CONTROL_SIZES } from "../../utils/componentSizes.js";
+import { Text } from "../Text/Text.js";
+import { Badge } from "../Badge/Badge.js";
+import { buttonStyleMap } from "./constants.js";
+import { Spinner } from "../Spinner/Spinner.js";
+import { cloneElement, forwardRef, isValidElement } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/components/src/components/Button/Button.tsx
+var Button = forwardRef(({ color = "primary", variant = "normal", size = "sm", onClick, leftDecorator: LeftIcon, rightDecorator: RightIcon, disabled = false, tagText, tagPosition = "right", className, children, loading = false, as, ...props }, ref) => {
+	const baseStyles = cn("lc-button relative box-border inline-flex flex-none items-center justify-center gap-1.5 truncate transition-all duration-200", CONTROL_SIZES[size].heightClassName, "[&_*]:[text-box-trim:trim-both]", {
+		"text-xxs leading-[1.15] tracking-normal": size === "xs",
+		"text-xs leading-tight tracking-snug": size === "sm",
+		"text-sm leading-[1.15] tracking-tighter": size === "md"
+	}, {
+		"px-space-2": variant !== "underlined",
+		"px-0": variant === "underlined"
+	}, { "shadow-[0px_1px_2px_0px_var(--shadow-color-subtle)]": (variant === "normal" || variant === "outlined") && !disabled }, variant === "underlined" ? "rounded-none" : size === "xs" ? "rounded-[3px]" : `rounded-${size}`);
+	const getColorVariantStyles = () => {
+		const key = `${color}-${variant}-${disabled ? "disabled" : "enabled"}`;
+		return buttonStyleMap[key] || "";
+	};
+	const getAriaLabel = () => {
+		if (props["aria-label"]) return props["aria-label"];
+		if (typeof children === "string") return children;
+		if (tagText) return tagText;
+		return "button";
+	};
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		LeftIcon && /* @__PURE__ */ jsx(LeftIcon, {
+			"aria-hidden": true,
+			className: cn("size-4 flex-shrink-0", "[&_path]:stroke-[1.5px]", size === "xs" && "size-3")
+		}),
+		tagText && tagPosition === "left" && /* @__PURE__ */ jsx(Badge, {
+			color,
+			size: size === "md" ? "xs" : "xxs",
+			rounded: "xs",
+			className: cn("border-0 py-0", disabled && "opacity-50"),
+			children: tagText
+		}),
+		typeof children === "string" ? /* @__PURE__ */ jsx(Text, {
+			variant: size,
+			weight: "normal",
+			as: "span",
+			children
+		}) : children,
+		tagText && tagPosition === "right" && /* @__PURE__ */ jsx(Badge, {
+			color,
+			size: size === "md" ? "xs" : "xxs",
+			rounded: "xs",
+			className: cn("border-0 py-0", disabled && "opacity-50"),
+			children: tagText
+		}),
+		RightIcon && /* @__PURE__ */ jsx(RightIcon, {
+			"aria-hidden": true,
+			className: cn("size-4 flex-shrink-0", "[&_path]:stroke-[1.5px]", size === "xs" && "size-3")
+		})
+	] });
+	const spinnerSize = size === "xs" ? "xxs" : "xs";
+	if (as) {
+		if (!isValidElement(as)) return null;
+		return cloneElement(as, {
+			className: cn(baseStyles, getColorVariantStyles(), className),
+			onClick,
+			"aria-label": getAriaLabel(),
+			"aria-disabled": disabled || void 0,
+			ref,
+			...props,
+			children: loading ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				className: "invisible flex items-center",
+				children: content
+			}), /* @__PURE__ */ jsx("span", {
+				className: "absolute",
+				children: /* @__PURE__ */ jsx(Spinner, { size: spinnerSize })
+			})] }) : content
+		});
+	}
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		className: cn(baseStyles, getColorVariantStyles(), className),
+		disabled,
+		onClick,
+		"aria-label": getAriaLabel(),
+		...props,
+		children: loading ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			className: "invisible flex items-center",
+			children: content
+		}), /* @__PURE__ */ jsx("span", {
+			className: "absolute",
+			children: /* @__PURE__ */ jsx(Spinner, { size: spinnerSize })
+		})] }) : content
+	});
+});
+Button.displayName = "Button";
+//#endregion
+export { Button };
+
+//# sourceMappingURL=Button.js.map

package/dist/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import {\n  type ButtonHTMLAttributes,\n  type ReactElement,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n} from 'react';\n\nimport { cn } from '../../utils/cn';\nimport { CONTROL_SIZES, type ControlSize } from '../../utils/componentSizes';\nimport type { IconComponent } from '../../utils/icon-types';\nimport { Badge } from '../Badge';\nimport { Spinner } from '../Spinner';\nimport { Text } from '../Text';\nimport { buttonStyleMap } from './constants';\n\ntype ButtonSize = Exclude<ControlSize, 'lg'>;\n\ninterface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Exact outer height: xs=20px, sm=24px, md=32px. */\n  size?: ButtonSize;\n  /** Button color scheme */\n  color?: 'primary' | 'secondary' | 'error';\n  /** Button visual variant */\n  variant?: 'normal' | 'outlined' | 'plain' | 'underlined';\n  /** Click handler */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Icon component to display on the left side */\n  leftDecorator?: IconComponent;\n  /** Icon component to display on the right side */\n  rightDecorator?: IconComponent;\n  /** Whether the button is disabled */\n  disabled?: boolean;\n  /** Tag text to display */\n  tagText?: string;\n  /** Position of the tag */\n  tagPosition?: 'left' | 'right';\n  /** Button content */\n  children: React.ReactNode;\n  /** Whether the button is loading */\n  loading?: boolean;\n  /** Pass through the `<button>` props to a child component */\n  as?: ReactElement<{ children: React.ReactNode; [key: string]: unknown }>;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      color = 'primary',\n      variant = 'normal',\n      size = 'sm',\n      onClick,\n      leftDecorator: LeftIcon,\n      rightDecorator: RightIcon,\n      disabled = false,\n      tagText,\n      tagPosition = 'right',\n      className,\n      children,\n      loading = false,\n      as,\n      ...props\n    },\n    ref\n  ) => {\n    const baseStyles = cn(\n      'lc-button relative box-border inline-flex flex-none items-center justify-center gap-1.5 truncate transition-all duration-200',\n      CONTROL_SIZES[size].heightClassName,\n      '[&_*]:[text-box-trim:trim-both]',\n      {\n        'text-xxs leading-[1.15] tracking-normal': size === 'xs',\n        'text-xs leading-tight tracking-snug': size === 'sm',\n        'text-sm leading-[1.15] tracking-tighter': size === 'md',\n      },\n      {\n        'px-space-2': variant !== 'underlined',\n        'px-0': variant === 'underlined',\n      },\n      {\n        'shadow-[0px_1px_2px_0px_var(--shadow-color-subtle)]':\n          (variant === 'normal' || variant === 'outlined') && !disabled,\n      },\n      variant === 'underlined'\n        ? 'rounded-none'\n        : size === 'xs'\n          ? 'rounded-[3px]'\n          : `rounded-${size}`\n    );\n\n    // Generate unique class combinations for each color/variant combination\n    const getColorVariantStyles = () => {\n      const state = disabled ? 'disabled' : 'enabled';\n      const key = `${color}-${variant}-${state}` as keyof typeof buttonStyleMap;\n      return buttonStyleMap[key] || '';\n    };\n\n    // Generate aria-label automatically based on content\n    const getAriaLabel = () => {\n      if (props['aria-label']) {\n        return props['aria-label'];\n      }\n\n      // If children is a string, use it as aria-label\n      if (typeof children === 'string') {\n        return children;\n      }\n      // If children is not a string but tagText exists, use tagText\n      if (tagText) {\n        return tagText;\n      }\n\n      // Fallback to generic \"button\"\n      return 'button';\n    };\n\n    const content = (\n      <>\n        {LeftIcon && (\n          <LeftIcon\n            aria-hidden\n            className={cn(\n              'size-4 flex-shrink-0',\n              '[&_path]:stroke-[1.5px]',\n              size === 'xs' && 'size-3'\n            )}\n          />\n        )}\n\n        {tagText && tagPosition === 'left' && (\n          <Badge\n            color={color}\n            size={size === 'md' ? 'xs' : 'xxs'}\n            rounded=\"xs\"\n            className={cn('border-0 py-0', disabled && 'opacity-50')}\n          >\n            {tagText}\n          </Badge>\n        )}\n\n        {typeof children === 'string' ? (\n          <Text variant={size} weight=\"normal\" as=\"span\">\n            {children}\n          </Text>\n        ) : (\n          children\n        )}\n\n        {tagText && tagPosition === 'right' && (\n          <Badge\n            color={color}\n            size={size === 'md' ? 'xs' : 'xxs'}\n            rounded=\"xs\"\n            className={cn('border-0 py-0', disabled && 'opacity-50')}\n          >\n            {tagText}\n          </Badge>\n        )}\n\n        {RightIcon && (\n          <RightIcon\n            aria-hidden\n            className={cn(\n              'size-4 flex-shrink-0',\n              '[&_path]:stroke-[1.5px]',\n              size === 'xs' && 'size-3'\n            )}\n          />\n        )}\n      </>\n    );\n    const spinnerSize = size === 'xs' ? 'xxs' : 'xs';\n\n    if (as) {\n      if (!isValidElement(as)) return null;\n\n      return cloneElement(as, {\n        className: cn(baseStyles, getColorVariantStyles(), className),\n        onClick,\n        'aria-label': getAriaLabel(),\n        'aria-disabled': disabled || undefined,\n        ref,\n        ...props,\n        children: loading ? (\n          <>\n            <span className=\"invisible flex items-center\">{content}</span>\n            <span className=\"absolute\">\n              <Spinner size={spinnerSize} />\n            </span>\n          </>\n        ) : (\n          content\n        ),\n      });\n    }\n\n    return (\n      // eslint-disable-next-line react/forbid-elements\n      <button\n        ref={ref}\n        type=\"button\"\n        className={cn(baseStyles, getColorVariantStyles(), className)}\n        disabled={disabled}\n        onClick={onClick}\n        aria-label={getAriaLabel()}\n        {...props}\n      >\n        {loading ? (\n          <>\n            <span className=\"invisible flex items-center\">{content}</span>\n            <span className=\"absolute\">\n              <Spinner size={spinnerSize} />\n            </span>\n          </>\n        ) : (\n          content\n        )}\n      </button>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n\nexport { Button };\nexport type { ButtonProps };\n"],"mappings":";;;;;;;;;AA6CA,IAAM,SAAS,YAEX,EACE,QAAQ,WACR,UAAU,UACV,OAAO,MACP,SACA,eAAe,UACf,gBAAgB,WAChB,WAAW,OACX,SACA,cAAc,SACd,WACA,UACA,UAAU,OACV,IACA,GAAG,SAEL,QACG;CACH,MAAM,aAAa,GACjB,gIACA,cAAc,KAAK,CAAC,iBACpB,mCACA;EACE,2CAA2C,SAAS;EACpD,uCAAuC,SAAS;EAChD,2CAA2C,SAAS;CACtD,GACA;EACE,cAAc,YAAY;EAC1B,QAAQ,YAAY;CACtB,GACA,EACE,wDACG,YAAY,YAAY,YAAY,eAAe,CAAC,SACzD,GACA,YAAY,eACR,iBACA,SAAS,OACP,kBACA,WAAW,MACnB;CAGA,MAAM,8BAA8B;EAElC,MAAM,MAAM,GAAG,MAAM,GAAG,QAAQ,GADlB,WAAW,aAAa;EAEtC,OAAO,eAAe,QAAQ;CAChC;CAGA,MAAM,qBAAqB;EACzB,IAAI,MAAM,eACR,OAAO,MAAM;EAIf,IAAI,OAAO,aAAa,UACtB,OAAO;EAGT,IAAI,SACF,OAAO;EAIT,OAAO;CACT;CAEA,MAAM,UACJ,qBAAA,YAAA,EAAA,UAAA;EACG,YACC,oBAAC,UAAD;GACE,eAAA;GACA,WAAW,GACT,wBACA,2BACA,SAAS,QAAQ,QACnB;EACD,CAAA;EAGF,WAAW,gBAAgB,UAC1B,oBAAC,OAAD;GACS;GACP,MAAM,SAAS,OAAO,OAAO;GAC7B,SAAQ;GACR,WAAW,GAAG,iBAAiB,YAAY,YAAY;GAEtD,UAAA;EACI,CAAA;EAGR,OAAO,aAAa,WACnB,oBAAC,MAAD;GAAM,SAAS;GAAM,QAAO;GAAS,IAAG;GACrC;EACG,CAAA,IAEN;EAGD,WAAW,gBAAgB,WAC1B,oBAAC,OAAD;GACS;GACP,MAAM,SAAS,OAAO,OAAO;GAC7B,SAAQ;GACR,WAAW,GAAG,iBAAiB,YAAY,YAAY;GAEtD,UAAA;EACI,CAAA;EAGR,aACC,oBAAC,WAAD;GACE,eAAA;GACA,WAAW,GACT,wBACA,2BACA,SAAS,QAAQ,QACnB;EACD,CAAA;CAEH,EAAA,CAAA;CAEJ,MAAM,cAAc,SAAS,OAAO,QAAQ;CAE5C,IAAI,IAAI;EACN,IAAI,CAAC,eAAe,EAAE,GAAG,OAAO;EAEhC,OAAO,aAAa,IAAI;GACtB,WAAW,GAAG,YAAY,sBAAsB,GAAG,SAAS;GAC5D;GACA,cAAc,aAAa;GAC3B,iBAAiB,YAAY,KAAA;GAC7B;GACA,GAAG;GACH,UAAU,UACR,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD;IAAM,WAAU;IAA+B,UAAA;GAAc,CAAA,GAC7D,oBAAC,QAAD;IAAM,WAAU;IACd,UAAA,oBAAC,SAAD,EAAS,MAAM,YAAc,CAAA;GACzB,CAAA,CACN,EAAA,CAAA,IAEF;EAEJ,CAAC;CACH;CAEA,OAEE,oBAAC,UAAD;EACO;EACL,MAAK;EACL,WAAW,GAAG,YAAY,sBAAsB,GAAG,SAAS;EAClD;EACD;EACT,cAAY,aAAa;EACzB,GAAI;EAEH,UAAA,UACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,WAAU;GAA+B,UAAA;EAAc,CAAA,GAC7D,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAAC,SAAD,EAAS,MAAM,YAAc,CAAA;EACzB,CAAA,CACN,EAAA,CAAA,IAEF;CAEI,CAAA;AAEZ,CACF;AAEA,OAAO,cAAc"}

package/dist/components/Button/constants.d.ts

@@ -0,0 +1,26 @@
+export declare const buttonStyleMap: {
+    'primary-normal-enabled': string;
+    'primary-outlined-enabled': string;
+    'primary-plain-enabled': string;
+    'primary-underlined-enabled': string;
+    'primary-normal-disabled': string;
+    'primary-outlined-disabled': string;
+    'primary-plain-disabled': string;
+    'primary-underlined-disabled': string;
+    'secondary-normal-enabled': string;
+    'secondary-outlined-enabled': string;
+    'secondary-plain-enabled': string;
+    'secondary-underlined-enabled': string;
+    'secondary-normal-disabled': string;
+    'secondary-outlined-disabled': string;
+    'secondary-plain-disabled': string;
+    'secondary-underlined-disabled': string;
+    'error-normal-enabled': string;
+    'error-outlined-enabled': string;
+    'error-plain-enabled': string;
+    'error-underlined-enabled': string;
+    'error-normal-disabled': string;
+    'error-outlined-disabled': string;
+    'error-plain-disabled': string;
+    'error-underlined-disabled': string;
+};

package/dist/components/Button/constants.js

@@ -0,0 +1,31 @@
+//#region packages/components/src/components/Button/constants.ts
+var buttonStyleMap = {
+	"primary-normal-enabled": "button-primary-bg button-primary-foreground border button-primary-border hover:border-transparent hover:button-primary-bg-hover dark:hover:button-primary-bg-hover dark:hover:border-transparent",
+	"primary-outlined-enabled": "bg-transparent text-brand-secondary border border-brand-strong hover:text-brand-primary hover:bg-brand-muted dark:border-brand dark:hover:bg-brand-subtle dark:hover:button-primary-border dark:hover:text-brand-primary",
+	"primary-plain-enabled": "bg-transparent text-brand-400 dark:text-brand-700 border border-transparent hover:text-brand-secondary dark:hover:text-brand-primary hover:bg-brand-muted/80",
+	"primary-underlined-enabled": "bg-transparent button-primary-underlined-foreground border-b button-primary-underlined-border hover:button-primary-underlined-border-hover hover:button-primary-underlined-foreground-hover",
+	"primary-normal-disabled": "bg-brand-muted border border-brand-disabled text-brand-disabled",
+	"primary-outlined-disabled": "bg-brand-muted border border-transparent text-brand-disabled",
+	"primary-plain-disabled": "bg-brand-muted border border-transparent text-brand-disabled",
+	"primary-underlined-disabled": "bg-transparent text-brand-disabled border border-transparent",
+	"secondary-normal-enabled": "bg-elevated text-secondary border border-subtle dark:border-muted hover:bg-elevated-hover/80",
+	"secondary-outlined-enabled": "bg-elevated text-secondary border border-subtle dark:border-muted hover:bg-elevated-hover/80",
+	"secondary-plain-enabled": "bg-transparent text-secondary border border-transparent hover:bg-elevated-hover/80 dark:hover:bg-elevated-hover/40",
+	"secondary-underlined-enabled": "text-secondary hover:text-secondary-hover border-b button-secondary-underlined-border hover:button-secondary-underlined-border-hover",
+	"secondary-normal-disabled": "bg-surface-level-1-hover dark:bg-disabled border border-transparent text-disabled",
+	"secondary-outlined-disabled": "bg-surface-level-1-hover dark:bg-disabled border border-transparent text-disabled",
+	"secondary-plain-disabled": "bg-surface-level-1-hover dark:bg-disabled border border-transparent text-disabled",
+	"secondary-underlined-disabled": "text-disabled border border-transparent",
+	"error-normal-enabled": "bg-error-strong dark:bg-error-secondary text-white border border-red-600 hover:bg-red-700 dark:hover:bg-error",
+	"error-outlined-enabled": "bg-transparent text-error-secondary border border-red-700 hover:bg-error",
+	"error-plain-enabled": "bg-transparent text-error-secondary border border-transparent hover:bg-error/80",
+	"error-underlined-enabled": "bg-transparent text-error-secondary border-b button-error-underlined-border hover:button-error-underlined-border-hover hover:button-error-underlined-foreground-hover",
+	"error-normal-disabled": "bg-error border border-transparent button-error-disabled-foreground",
+	"error-outlined-disabled": "bg-transparent button-error-disabled-foreground border button-error-disabled-border",
+	"error-plain-disabled": "bg-transparent button-error-disabled-foreground border border-transparent",
+	"error-underlined-disabled": "bg-transparent button-error-disabled-foreground border border-transparent"
+};
+//#endregion
+export { buttonStyleMap };
+
+//# sourceMappingURL=constants.js.map

package/dist/components/Button/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":[],"sources":["../../../src/components/Button/constants.ts"],"sourcesContent":["// Define styles for each specific combination\nexport const buttonStyleMap = {\n  // Primary variants - enabled\n  'primary-normal-enabled':\n    'button-primary-bg button-primary-foreground border button-primary-border hover:border-transparent hover:button-primary-bg-hover dark:hover:button-primary-bg-hover dark:hover:border-transparent',\n  'primary-outlined-enabled':\n    'bg-transparent text-brand-secondary border border-brand-strong hover:text-brand-primary hover:bg-brand-muted dark:border-brand dark:hover:bg-brand-subtle dark:hover:button-primary-border dark:hover:text-brand-primary',\n  'primary-plain-enabled':\n    'bg-transparent text-brand-400 dark:text-brand-700 border border-transparent hover:text-brand-secondary dark:hover:text-brand-primary hover:bg-brand-muted/80',\n  'primary-underlined-enabled':\n    'bg-transparent button-primary-underlined-foreground border-b button-primary-underlined-border hover:button-primary-underlined-border-hover hover:button-primary-underlined-foreground-hover',\n\n  // Primary variants - disabled\n  'primary-normal-disabled':\n    'bg-brand-muted border border-brand-disabled text-brand-disabled',\n  'primary-outlined-disabled':\n    'bg-brand-muted border border-transparent text-brand-disabled',\n  'primary-plain-disabled':\n    'bg-brand-muted border border-transparent text-brand-disabled',\n  'primary-underlined-disabled':\n    'bg-transparent text-brand-disabled border border-transparent',\n\n  // Secondary variants - enabled\n  'secondary-normal-enabled':\n    'bg-elevated text-secondary border border-subtle dark:border-muted hover:bg-elevated-hover/80',\n  'secondary-outlined-enabled':\n    'bg-elevated text-secondary border border-subtle dark:border-muted hover:bg-elevated-hover/80',\n  'secondary-plain-enabled':\n    'bg-transparent text-secondary border border-transparent hover:bg-elevated-hover/80 dark:hover:bg-elevated-hover/40',\n  'secondary-underlined-enabled':\n    'text-secondary hover:text-secondary-hover border-b button-secondary-underlined-border hover:button-secondary-underlined-border-hover',\n\n  // Secondary variants - disabled\n  'secondary-normal-disabled':\n    'bg-surface-level-1-hover dark:bg-disabled border border-transparent text-disabled',\n  'secondary-outlined-disabled':\n    'bg-surface-level-1-hover dark:bg-disabled border border-transparent text-disabled',\n  'secondary-plain-disabled':\n    'bg-surface-level-1-hover dark:bg-disabled border border-transparent text-disabled',\n  'secondary-underlined-disabled': 'text-disabled border border-transparent',\n\n  // Error variants - enabled\n  'error-normal-enabled':\n    'bg-error-strong dark:bg-error-secondary text-white border border-red-600 hover:bg-red-700 dark:hover:bg-error',\n  'error-outlined-enabled':\n    'bg-transparent text-error-secondary border border-red-700 hover:bg-error',\n  'error-plain-enabled':\n    'bg-transparent text-error-secondary border border-transparent hover:bg-error/80',\n  'error-underlined-enabled':\n    'bg-transparent text-error-secondary border-b button-error-underlined-border hover:button-error-underlined-border-hover hover:button-error-underlined-foreground-hover',\n\n  // Error variants - disabled\n  'error-normal-disabled':\n    'bg-error border border-transparent button-error-disabled-foreground',\n  'error-outlined-disabled':\n    'bg-transparent button-error-disabled-foreground border button-error-disabled-border',\n  'error-plain-disabled':\n    'bg-transparent button-error-disabled-foreground border border-transparent',\n  'error-underlined-disabled':\n    'bg-transparent button-error-disabled-foreground border border-transparent',\n};\n"],"mappings":";AACA,IAAa,iBAAiB;CAE5B,0BACE;CACF,4BACE;CACF,yBACE;CACF,8BACE;CAGF,2BACE;CACF,6BACE;CACF,0BACE;CACF,+BACE;CAGF,4BACE;CACF,8BACE;CACF,2BACE;CACF,gCACE;CAGF,6BACE;CACF,+BACE;CACF,4BACE;CACF,iCAAiC;CAGjC,wBACE;CACF,0BACE;CACF,uBACE;CACF,4BACE;CAGF,yBACE;CACF,2BACE;CACF,wBACE;CACF,6BACE;AACJ"}

package/dist/components/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button.js';
+export type { ButtonProps } from './Button.js';

package/dist/components/Button/index.js

@@ -0,0 +1,2 @@
+import { Button } from "./Button.js";
+export { Button };