@orianatech/pire 0.10.0 → 0.11.0

package/dist/index.cjs

@@ -32,6 +32,7 @@ var src_exports = {};
 __export(src_exports, {
   Avatar: () => Avatar,
   Badge: () => Badge,
+  BarChart: () => BarChart,
   Breadcrumb: () => Breadcrumb,
   Button: () => Button,
   Card: () => Card,
@@ -44,6 +45,7 @@ __export(src_exports, {
   DescriptionList: () => DescriptionList,
   Dialog: () => Dialog,
   DialogTrigger: () => import_react_aria_components32.DialogTrigger,
+  DonutChart: () => DonutChart,
   EmptyState: () => EmptyState,
   FileDropZone: () => FileDropZone,
   FileUpload: () => FileUpload,
@@ -57,6 +59,7 @@ __export(src_exports, {
   InlineMessage: () => InlineMessage,
   Input: () => Input,
   KpiTile: () => KpiTile,
+  LineChart: () => LineChart,
   Link: () => Link,
   LinkList: () => LinkList,
   Menu: () => Menu,
@@ -97,6 +100,7 @@ __export(src_exports, {
   Toast: () => Toast,
   ToastProvider: () => ToastProvider,
   Tooltip: () => Tooltip,
+  VIZ_SLOT_COUNT: () => VIZ_SLOT_COUNT,
   ValueHelpDialog: () => ValueHelpDialog,
   ValueHelpField: () => ValueHelpField,
   configureIcons: () => configureIcons,
@@ -919,7 +923,10 @@ var enMessages = {
   fileUploadChoose: "Choose files",
   fileUploadRemoveNamed: "Remove {name}",
   fileUploadUploading: "Uploading",
-  fileDropZonePrompt: "Drag files here, or choose them"
+  fileDropZonePrompt: "Drag files here, or choose them",
+  chartCategoryHeader: "Category",
+  chartNoValue: "No data",
+  chartEmpty: "No data for this period"
 };
 var esMessages = {
   filterBarLabel: "Filtros",
@@ -956,7 +963,10 @@ var esMessages = {
   fileUploadChoose: "Elegir archivos",
   fileUploadRemoveNamed: "Quitar {name}",
   fileUploadUploading: "Subiendo",
-  fileDropZonePrompt: "Arrastr\xE1 archivos ac\xE1, o elegilos"
+  fileDropZonePrompt: "Arrastr\xE1 archivos ac\xE1, o elegilos",
+  chartCategoryHeader: "Categor\xEDa",
+  chartNoValue: "Sin datos",
+  chartEmpty: "Sin datos para este per\xEDodo"
 };
 
 // src/i18n/PireIntlProvider.tsx
@@ -2466,20 +2476,509 @@ function Timeline({ entries, reverse = false, className, ...rest }) {
   ] }, entry.id ?? i)) });
 }
 
+// src/components/data/chartGeometry.ts
+var VIZ_SLOT_COUNT = 6;
+var NICE_STEPS = [1, 2, 2.5, 5, 10];
+function niceStep(rough) {
+  if (!(rough > 0)) return 1;
+  const magnitude = 10 ** Math.floor(Math.log10(rough));
+  const normalized = rough / magnitude;
+  return (NICE_STEPS.find((candidate) => candidate >= normalized) ?? 10) * magnitude;
+}
+function linearScale(values, tickCount = 4, startAtZero = true) {
+  const present = values.filter((value) => value != null && Number.isFinite(value));
+  if (present.length === 0) return { min: 0, max: 1, ticks: [0, 1] };
+  let low = Math.min(...present);
+  let high = Math.max(...present);
+  if (startAtZero) {
+    low = Math.min(0, low);
+    high = Math.max(0, high);
+  }
+  if (low === high) {
+    high = low === 0 ? 1 : low + Math.abs(low);
+  }
+  const step = niceStep((high - low) / Math.max(1, tickCount));
+  const EDGE_TOLERANCE = 1e-9;
+  const decimals = Math.max(0, 1 - Math.floor(Math.log10(step)));
+  const toStepPrecision = (value) => Number(value.toFixed(decimals));
+  const min = toStepPrecision(Math.floor(low / step + EDGE_TOLERANCE) * step);
+  const max = toStepPrecision(Math.ceil(high / step - EDGE_TOLERANCE) * step);
+  const stepCount = Math.round((max - min) / step);
+  const ticks = Array.from(
+    { length: stepCount + 1 },
+    (_, index) => toStepPrecision(min + index * step)
+  );
+  return { min, max, ticks };
+}
+function scalePosition(value, scale) {
+  const span = scale.max - scale.min;
+  return span === 0 ? 0 : (value - scale.min) / span;
+}
+function seriesColor(series, index) {
+  const slot = series.colorIndex ?? index + 1;
+  return slot >= 1 && slot <= VIZ_SLOT_COUNT ? `var(--viz-${slot})` : "var(--viz-other)";
+}
+var IS_DEV2 = process.env.NODE_ENV !== "production";
+var warnedCharts = /* @__PURE__ */ new Set();
+function warnOnSlotOverflow(series, chartLabel) {
+  if (!IS_DEV2 || warnedCharts.has(chartLabel)) return;
+  if (series.length <= VIZ_SLOT_COUNT) return;
+  warnedCharts.add(chartLabel);
+  console.warn(
+    `[pire] "${chartLabel}" has ${series.length} series but the palette defines ${VIZ_SLOT_COUNT} distinguishable colours. The extras render in one shared neutral. Group the tail into an "Other" series, or split the chart into small multiples.`
+  );
+}
+function warnOnDonutShape(series, categoryCount, chartLabel) {
+  if (!IS_DEV2 || warnedCharts.has(`donut:${chartLabel}`)) return;
+  const complaints = [];
+  if (series.length > 1) {
+    complaints.push(`it has ${series.length} series but a donut draws one \u2014 the rest are ignored`);
+  }
+  if (categoryCount > VIZ_SLOT_COUNT) {
+    complaints.push(`it has ${categoryCount} segments and the palette defines ${VIZ_SLOT_COUNT}; past about four, slices stop being readable at all \u2014 group the tail into "Other"`);
+  }
+  if (series[0]?.values.some((value) => value != null && value < 0)) {
+    complaints.push("it contains negative values, which have no part-to-whole meaning \u2014 a signed measure belongs in a bar chart");
+  }
+  if (complaints.length === 0) return;
+  warnedCharts.add(`donut:${chartLabel}`);
+  console.warn(`[pire] DonutChart "${chartLabel}": ${complaints.join("; ")}.`);
+}
+function stackTotal(series, categoryIndex) {
+  return series.reduce((total, one) => total + (one.values[categoryIndex] ?? 0), 0);
+}
+function flatValues(series) {
+  return series.flatMap((one) => one.values);
+}
+function alignToCategories(series, categoryCount) {
+  return series.map((one) => one.values.length <= categoryCount ? one : { ...one, values: one.values.slice(0, categoryCount) });
+}
+
+// src/components/data/ChartFrame.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+function seriesLegend(series) {
+  return series.map((one, index) => ({
+    key: one.id,
+    label: one.label,
+    color: seriesColor(one, index)
+  }));
+}
+var defaultFormatValue = (value) => value.toLocaleString();
+function ChartFrame({
+  label,
+  title,
+  description,
+  categories,
+  series,
+  formatValue,
+  legend,
+  showDataTable,
+  className,
+  style,
+  children
+}) {
+  const msg = usePireMessages();
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("figure", { className: cx("pire-chart", className), style, children: [
+    title || description ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("figcaption", { className: "pire-chart-head", children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "pire-chart-title", children: title }) : null,
+      description ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "pire-chart-desc", children: description }) : null
+    ] }) : null,
+    legend && legend.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("ul", { className: "pire-chart-legend", children: legend.map((item) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("li", { className: "pire-chart-legend-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "pire-chart-swatch", style: { background: item.color } }),
+      item.label
+    ] }, item.key)) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "pire-chart-plot", "aria-hidden": "true", children }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: showDataTable ? "pire-chart-table" : "pire-sr-only", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("table", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("caption", { children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("tr", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("th", { scope: "col", children: msg.chartCategoryHeader }),
+        series.map((one) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("th", { scope: "col", children: one.label }, one.id))
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("tbody", { children: categories.map((category, categoryIndex) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: categories are positional and repeat legitimately (two quarters both labelled "Q1").
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("th", { scope: "row", children: category }),
+          series.map((one) => {
+            const value = one.values[categoryIndex];
+            return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("td", { children: value == null ? msg.chartNoValue : formatValue(value) }, one.id);
+          })
+        ] }, categoryIndex)
+      )) })
+    ] }) })
+  ] });
+}
+
+// src/components/data/BarChart.tsx
+var import_jsx_runtime48 = require("react/jsx-runtime");
+function BarChart({
+  categories,
+  series: rawSeries,
+  title,
+  description,
+  formatValue = defaultFormatValue,
+  height = 260,
+  emptyState,
+  showDataTable,
+  orientation = "horizontal",
+  stacked = false,
+  showValues,
+  className,
+  style,
+  ...rest
+}) {
+  const label = rest["aria-label"];
+  const msg = usePireMessages();
+  warnOnSlotOverflow(rawSeries, label);
+  const series = alignToCategories(rawSeries, categories.length);
+  const hasData = categories.length > 0 && series.length > 0;
+  const withValues = showValues ?? series.length === 1;
+  const scale = linearScale(
+    stacked ? categories.map((_, index) => stackTotal(series, index)) : flatValues(series)
+  );
+  const sizeOf = (value) => `${scalePosition(value, scale) * 100}%`;
+  const horizontalLabelFor = (categoryIndex) => {
+    if (stacked) return formatValue(stackTotal(series, categoryIndex));
+    const value = series[0].values[categoryIndex];
+    return value == null ? msg.chartNoValue : formatValue(value);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    ChartFrame,
+    {
+      label,
+      title,
+      description,
+      categories,
+      series,
+      formatValue,
+      legend: seriesLegend(series),
+      showDataTable,
+      className,
+      style,
+      children: !hasData ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "pire-chart-empty", children: emptyState ?? msg.chartEmpty }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        "div",
+        {
+          className: "pire-chart-bars",
+          "data-orientation": orientation,
+          "data-stacked": String(stacked),
+          style: { "--pire-chart-height": `${height}px` },
+          children: categories.map((category, categoryIndex) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: categories are positional and repeat legitimately (two quarters both labelled "Q1").
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "pire-chart-group", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "pire-chart-cat", children: category }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "pire-chart-track", children: series.map((one, seriesIndex) => {
+                const value = one.values[categoryIndex];
+                if (value == null) return null;
+                return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+                  "div",
+                  {
+                    className: "pire-chart-bar",
+                    style: {
+                      "--pire-bar-size": sizeOf(value),
+                      "--pire-bar-color": seriesColor(one, seriesIndex)
+                    },
+                    children: [
+                      withValues && orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "pire-chart-barval", children: formatValue(value) }) : null,
+                      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "pire-chart-tip", role: "presentation", children: [
+                        series.length > 1 ? `${one.label}: ` : "",
+                        formatValue(value)
+                      ] })
+                    ]
+                  },
+                  one.id
+                );
+              }) }),
+              withValues && orientation === "horizontal" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "pire-chart-val", children: horizontalLabelFor(categoryIndex) }) : null
+            ] }, categoryIndex)
+          ))
+        }
+      )
+    }
+  );
+}
+
+// src/components/data/LineChart.tsx
+var React13 = __toESM(require("react"), 1);
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var PLOT_INSET = { top: 10, right: 14, bottom: 24, left: 58 };
+var MARKER_LIMIT = 20;
+var useIsomorphicLayoutEffect2 = typeof window === "undefined" ? React13.useEffect : React13.useLayoutEffect;
+function useMeasuredWidth() {
+  const ref = React13.useRef(null);
+  const [width, setWidth] = React13.useState(0);
+  useIsomorphicLayoutEffect2(() => {
+    const element = ref.current;
+    if (!element) return;
+    setWidth(element.getBoundingClientRect().width);
+    const observer = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width));
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  return [ref, width];
+}
+function LineChart({
+  categories,
+  series: rawSeries,
+  title,
+  description,
+  formatValue = defaultFormatValue,
+  height = 260,
+  emptyState,
+  showDataTable,
+  showArea = false,
+  showMarkers,
+  zoomToData = false,
+  className,
+  style,
+  ...rest
+}) {
+  const label = rest["aria-label"];
+  const msg = usePireMessages();
+  warnOnSlotOverflow(rawSeries, label);
+  const [plotRef, width] = useMeasuredWidth();
+  const series = alignToCategories(rawSeries, categories.length);
+  const hasData = categories.length > 0 && series.length > 0;
+  const withMarkers = showMarkers ?? categories.length <= MARKER_LIMIT;
+  const scale = linearScale(flatValues(series), 4, !zoomToData);
+  const innerWidth = Math.max(0, width - PLOT_INSET.left - PLOT_INSET.right);
+  const innerHeight = Math.max(0, height - PLOT_INSET.top - PLOT_INSET.bottom);
+  const xAt = (index) => PLOT_INSET.left + (categories.length <= 1 ? innerWidth / 2 : index / (categories.length - 1) * innerWidth);
+  const yAt = (value) => PLOT_INSET.top + innerHeight - scalePosition(value, scale) * innerHeight;
+  const pathFor = (values) => {
+    let path = "";
+    let penIsDown = false;
+    values.forEach((value, index) => {
+      if (value == null) {
+        penIsDown = false;
+        return;
+      }
+      path += `${penIsDown ? "L" : "M"}${xAt(index)} ${yAt(value)} `;
+      penIsDown = true;
+    });
+    return path.trim();
+  };
+  const areaFor = (values) => {
+    const present = values.map((value, index) => ({ value, index })).filter((point) => point.value != null);
+    if (present.length < 2) return "";
+    const baseline = PLOT_INSET.top + innerHeight;
+    const line = present.map((point) => `${xAt(point.index)} ${yAt(point.value)}`).join(" L");
+    const last = present[present.length - 1];
+    return `M${xAt(present[0].index)} ${baseline} L${line} L${xAt(last.index)} ${baseline} Z`;
+  };
+  const labelEvery = Math.max(1, Math.ceil(categories.length / Math.max(2, Math.floor(innerWidth / 64))));
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    ChartFrame,
+    {
+      label,
+      title,
+      description,
+      categories,
+      series,
+      formatValue,
+      legend: seriesLegend(series),
+      showDataTable,
+      className,
+      style,
+      children: !hasData ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "pire-chart-empty", children: emptyState ?? msg.chartEmpty }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "pire-chart-lines", ref: plotRef, style: { height }, children: [
+        width > 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+          "svg",
+          {
+            width,
+            height,
+            className: "pire-chart-svg",
+            "aria-hidden": "true",
+            focusable: "false",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("g", { className: "pire-chart-grid", children: scale.ticks.map((tick) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                "line",
+                {
+                  x1: PLOT_INSET.left,
+                  x2: width - PLOT_INSET.right,
+                  y1: yAt(tick),
+                  y2: yAt(tick)
+                },
+                tick
+              )) }),
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("g", { className: "pire-chart-tick", children: [
+                scale.ticks.map((tick) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                  "text",
+                  {
+                    x: PLOT_INSET.left - 8,
+                    y: yAt(tick),
+                    textAnchor: "end",
+                    dominantBaseline: "middle",
+                    children: formatValue(tick)
+                  },
+                  tick
+                )),
+                categories.map((category, index) => index % labelEvery === 0 ? (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: categories are positional and repeat legitimately (two quarters both labelled "Q1").
+                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("text", { x: xAt(index), y: height - 6, textAnchor: "middle", children: category }, index)
+                ) : null)
+              ] }),
+              showArea && series[0] ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                "path",
+                {
+                  d: areaFor(series[0].values),
+                  className: "pire-chart-area",
+                  style: { fill: seriesColor(series[0], 0) }
+                }
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("g", { className: "pire-chart-line", fill: "none", children: series.map((one, index) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("path", { d: pathFor(one.values), stroke: seriesColor(one, index) }, one.id)) }),
+              withMarkers ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("g", { className: "pire-chart-marker", children: series.map((one, seriesIndex) => one.values.map((value, index) => value == null ? null : (
+                // biome-ignore lint/suspicious/noArrayIndexKey: a series is positional — the index is the point's identity, and category labels repeat.
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                  "circle",
+                  {
+                    cx: xAt(index),
+                    cy: yAt(value),
+                    r: 4,
+                    fill: seriesColor(one, seriesIndex)
+                  },
+                  `${one.id}-${index}`
+                )
+              ))) }) : null
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          "div",
+          {
+            className: "pire-chart-hover",
+            style: { inset: `${PLOT_INSET.top}px ${PLOT_INSET.right}px ${PLOT_INSET.bottom}px ${PLOT_INSET.left}px` },
+            children: categories.map((category, categoryIndex) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: categories are positional and repeat legitimately (two quarters both labelled "Q1").
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "pire-chart-band", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { className: "pire-chart-tip", role: "presentation", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("strong", { children: category }),
+                series.map((one) => {
+                  const value = one.values[categoryIndex];
+                  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { className: "pire-chart-tip-row", children: [
+                    one.label,
+                    ": ",
+                    value == null ? "No data" : formatValue(value)
+                  ] }, one.id);
+                })
+              ] }) }, categoryIndex)
+            ))
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/components/data/DonutChart.tsx
+var React14 = __toESM(require("react"), 1);
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var SEGMENT_GAP_DEGREES = 1.5;
+function DonutChart({
+  categories,
+  series,
+  title,
+  description,
+  formatValue = defaultFormatValue,
+  height = 220,
+  emptyState,
+  showDataTable,
+  centerLabel,
+  centerCaption,
+  thickness = 28,
+  className,
+  style,
+  ...rest
+}) {
+  const label = rest["aria-label"];
+  const msg = usePireMessages();
+  const [hoveredIndex, setHoveredIndex] = React14.useState(null);
+  warnOnDonutShape(series, categories.length, label);
+  const values = (series[0]?.values ?? []).slice(0, categories.length);
+  const segments = categories.map((category, index) => ({ category, index, value: values[index] ?? 0 })).filter((segment) => segment.value > 0);
+  const total = segments.reduce((sum, segment) => sum + segment.value, 0);
+  const hasData = segments.length > 0 && total > 0;
+  const size = height;
+  const radius = (size - thickness) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const gapLength = SEGMENT_GAP_DEGREES / 360 * circumference;
+  const legend = segments.map((segment) => ({
+    key: segment.category,
+    label: segment.category,
+    color: colorForSegment(segment.index)
+  }));
+  const hovered = hoveredIndex == null ? null : segments.find((segment) => segment.index === hoveredIndex) ?? null;
+  let arcStart = 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    ChartFrame,
+    {
+      label,
+      title,
+      description,
+      categories,
+      series,
+      formatValue,
+      legend,
+      showDataTable,
+      className,
+      style,
+      children: !hasData ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "pire-chart-empty", children: emptyState ?? msg.chartEmpty }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "pire-chart-donut", style: { height: size }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          "svg",
+          {
+            width: size,
+            height: size,
+            "aria-hidden": "true",
+            focusable: "false",
+            onMouseLeave: () => setHoveredIndex(null),
+            children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("g", { transform: `rotate(-90 ${size / 2} ${size / 2})`, children: segments.map((segment) => {
+              const arcLength = segment.value / total * circumference;
+              const offset = arcStart;
+              arcStart += arcLength;
+              return (
+                // biome-ignore lint/a11y/noStaticElementInteractions: pointer-only enhancement inside an aria-hidden plot — the arcs carry nothing the data table does not, so there is nothing here for a keyboard to reach.
+                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                  "circle",
+                  {
+                    className: "pire-chart-arc",
+                    cx: size / 2,
+                    cy: size / 2,
+                    r: radius,
+                    stroke: colorForSegment(segment.index),
+                    strokeWidth: thickness,
+                    strokeDasharray: `${Math.max(0, arcLength - gapLength)} ${circumference}`,
+                    strokeDashoffset: -offset,
+                    "data-hovered": hoveredIndex === segment.index ? "true" : void 0,
+                    onMouseEnter: () => setHoveredIndex(segment.index)
+                  },
+                  segment.category
+                )
+              );
+            }) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "pire-chart-donut-center", style: { width: size - thickness * 2 - 8 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "pire-chart-donut-value", children: hovered ? formatValue(hovered.value) : centerLabel ?? formatValue(total) }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "pire-chart-donut-caption", children: hovered ? hovered.category : centerCaption })
+        ] })
+      ] })
+    }
+  );
+}
+function colorForSegment(index) {
+  return index < VIZ_SLOT_COUNT ? `var(--viz-${index + 1})` : "var(--viz-other)";
+}
+
 // src/components/data/LinkList.tsx
 var import_react_aria_components29 = require("react-aria-components");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function LinkList({ items, onSelect, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: cx("pire-linklist", className), role: "list", ...rest, children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react_aria_components29.Button, { className: "pire-linklist-item", onPress: () => onSelect?.(item.id), children: [
-    item.icon ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { name: item.icon, size: 16, style: { color: "var(--text-secondary)" } }) : null,
-    item.key ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "pire-linklist-key", children: item.key }) : null,
-    item.text ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "pire-linklist-text", children: item.text }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: cx("pire-linklist", className), role: "list", ...rest, children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_aria_components29.Button, { className: "pire-linklist-item", onPress: () => onSelect?.(item.id), children: [
+    item.icon ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icon, { name: item.icon, size: 16, style: { color: "var(--text-secondary)" } }) : null,
+    item.key ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "pire-linklist-key", children: item.key }) : null,
+    item.text ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "pire-linklist-text", children: item.text }) : null,
     item.trailing
   ] }, item.id)) });
 }
 
 // src/components/layout/PageBand.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function PageBand({
   surface = "card",
   hasBorder = true,
@@ -2487,7 +2986,7 @@ function PageBand({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "div",
     {
       className: cx("pire-pageband", className),
@@ -2500,56 +2999,56 @@ function PageBand({
 }
 
 // src/components/layout/PageHeader.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function PageHeader({ title, subtitle, actions, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("header", { className: cx("pire-pageheader", className), ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { style: { minWidth: 0 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("h1", { className: "pire-pageheader-title", children: title }),
-      subtitle ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "pire-pageheader-sub", children: subtitle }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("header", { className: cx("pire-pageheader", className), ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { style: { minWidth: 0 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("h1", { className: "pire-pageheader-title", children: title }),
+      subtitle ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "pire-pageheader-sub", children: subtitle }) : null
     ] }),
-    actions ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "pire-pageheader-actions", children: actions }) : null
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "pire-pageheader-actions", children: actions }) : null
   ] });
 }
 
 // src/components/layout/SectionHeader.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function SectionHeader({ title, meta, actions, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: cx("pire-sectionhead", className), ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "pire-eyebrow", children: title }),
-    meta ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { style: { font: "var(--type-caption)", color: "var(--text-tertiary)" }, children: meta }) : null,
-    actions ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "pire-sectionhead-actions", children: actions }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: cx("pire-sectionhead", className), ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "pire-eyebrow", children: title }),
+    meta ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { style: { font: "var(--type-caption)", color: "var(--text-tertiary)" }, children: meta }) : null,
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "pire-sectionhead-actions", children: actions }) : null
   ] });
 }
 
 // src/components/layout/SelectionBar.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function SelectionBar({ count, noun = "record", children, actions, className, ...rest }) {
   if (!count) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: cx("pire-selectionbar", className), role: "status", "aria-live": "polite", ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { className: "pire-selectionbar-count", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: cx("pire-selectionbar", className), role: "status", "aria-live": "polite", ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { className: "pire-selectionbar-count", children: [
       count.toLocaleString(),
       " ",
       noun,
       count === 1 ? "" : "s",
       " selected"
     ] }),
-    children ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { style: { color: "var(--text-secondary)", font: "var(--type-caption)" }, children }) : null,
-    actions ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "pire-selectionbar-actions", children: actions }) : null
+    children ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { style: { color: "var(--text-secondary)", font: "var(--type-caption)" }, children }) : null,
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "pire-selectionbar-actions", children: actions }) : null
   ] });
 }
 
 // src/components/layout/FooterBar.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function FooterBar({ note, actions, children, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("footer", { className: cx("pire-footerbar", className), ...rest, children: [
-    note ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "pire-footerbar-note", children: note }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("footer", { className: cx("pire-footerbar", className), ...rest, children: [
+    note ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "pire-footerbar-note", children: note }) : null,
     children,
-    actions ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "pire-footerbar-actions", children: actions }) : null
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "pire-footerbar-actions", children: actions }) : null
   ] });
 }
 
 // src/components/patterns/ConfirmDialog.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function ConfirmDialog({
   isOpen,
   title,
@@ -2563,7 +3062,7 @@ function ConfirmDialog({
   onConfirm,
   onCancel
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
     Dialog,
     {
       isOpen,
@@ -2573,12 +3072,12 @@ function ConfirmDialog({
       onClose: onCancel,
       isDismissable: !isBusy,
       showClose: false,
-      footer: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Button, { variant: "tertiary", isDisabled: isBusy, onPress: onCancel, children: cancelLabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Button, { variant: tone === "danger" ? "danger" : "primary", isDisabled: isBusy, onPress: onConfirm, children: isBusy ? "Working\u2026" : confirmLabel })
+      footer: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Button, { variant: "tertiary", isDisabled: isBusy, onPress: onCancel, children: cancelLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Button, { variant: tone === "danger" ? "danger" : "primary", isDisabled: isBusy, onPress: onConfirm, children: isBusy ? "Working\u2026" : confirmLabel })
       ] }),
       children: [
-        consequence ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(InlineMessage, { kind: tone === "danger" ? "error" : "warning", style: { marginBottom: children ? "var(--sp-3)" : 0 }, children: consequence }) : null,
+        consequence ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(InlineMessage, { kind: tone === "danger" ? "error" : "warning", style: { marginBottom: children ? "var(--sp-3)" : 0 }, children: consequence }) : null,
         children
       ]
     }
@@ -2587,10 +3086,10 @@ function ConfirmDialog({
 
 // src/components/patterns/SidePanel.tsx
 var import_react_aria_components30 = require("react-aria-components");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function SidePanel({ isOpen, title, subtitle, width = 400, children, footer, onClose, className }) {
   const msg = usePireMessages();
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     import_react_aria_components30.ModalOverlay,
     {
       className: "pire-sidepanel-overlay",
@@ -2599,36 +3098,36 @@ function SidePanel({ isOpen, title, subtitle, width = 400, children, footer, onC
       onOpenChange: (o) => {
         if (!o) onClose?.();
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_aria_components30.Modal, { className: cx("pire-sidepanel", className), style: { width }, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_react_aria_components30.Dialog, { className: "pire-dialog", style: { height: "100%" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("header", { className: "pire-dialog-head", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_aria_components30.Heading, { slot: "title", className: "pire-dialog-title", children: title }),
-            subtitle ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "pire-dialog-sub", style: { margin: 0 }, children: subtitle }) : null
+      children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_aria_components30.Modal, { className: cx("pire-sidepanel", className), style: { width }, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_react_aria_components30.Dialog, { className: "pire-dialog", style: { height: "100%" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("header", { className: "pire-dialog-head", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_aria_components30.Heading, { slot: "title", className: "pire-dialog-title", children: title }),
+            subtitle ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "pire-dialog-sub", style: { margin: 0 }, children: subtitle }) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(IconButton, { icon: "x", label: msg.sidePanelClose, size: "sm", onPress: onClose })
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(IconButton, { icon: "x", label: msg.sidePanelClose, size: "sm", onPress: onClose })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "pire-dialog-body", style: { flex: 1 }, children }),
-        footer ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("footer", { className: "pire-dialog-foot", children: footer }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "pire-dialog-body", style: { flex: 1 }, children }),
+        footer ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("footer", { className: "pire-dialog-foot", children: footer }) : null
       ] }) })
     }
   );
 }
 
 // src/components/patterns/EmptyState.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function EmptyState({ icon = "file-text", title, action, compact, children, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: cx("pire-empty", className), "data-compact": compact ? "true" : void 0, ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Icon, { name: icon, size: 24, className: "pire-empty-icon" }),
-    title ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: "pire-empty-title", style: { margin: 0 }, children: title }) : null,
-    children ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: "pire-empty-body", style: { margin: 0 }, children }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: cx("pire-empty", className), "data-compact": compact ? "true" : void 0, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Icon, { name: icon, size: 24, className: "pire-empty-icon" }),
+    title ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "pire-empty-title", style: { margin: 0 }, children: title }) : null,
+    children ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "pire-empty-body", style: { margin: 0 }, children }) : null,
     action
   ] });
 }
 
 // src/components/patterns/FileDropZone.tsx
-var React13 = __toESM(require("react"), 1);
+var React15 = __toESM(require("react"), 1);
 var import_react_aria_components31 = require("react-aria-components");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var isImage2 = (file) => file.type.startsWith("image/");
 function FileDropZone({
   label,
@@ -2654,10 +3153,10 @@ function FileDropZone({
   style
 }) {
   const msg = usePireMessages();
-  const [uncontrolled, setUncontrolled] = React13.useState(defaultValue ?? []);
+  const [uncontrolled, setUncontrolled] = React15.useState(defaultValue ?? []);
   const files = value ?? uncontrolled;
-  const created = React13.useRef([]);
-  React13.useEffect(() => () => {
+  const created = React15.useRef([]);
+  React15.useEffect(() => () => {
     for (const url of created.current) URL.revokeObjectURL(url);
   }, []);
   const commit = (next) => {
@@ -2677,12 +3176,12 @@ function FileDropZone({
     commit(allowsMultiple ? [...files, ...wrapped] : wrapped.slice(0, 1));
   };
   const remove = (target) => commit(files.filter((f) => f.file !== target));
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: cx("pire-field", className), style, "data-full-width": String(fullWidth), children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", { className: "pire-field-label", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: cx("pire-field", className), style, "data-full-width": String(fullWidth), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { className: "pire-field-label", children: [
       label,
-      isRequired ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
+      isRequired ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
       import_react_aria_components31.DropZone,
       {
         className: "pire-dropzone",
@@ -2695,25 +3194,25 @@ function FileDropZone({
           accept(dropped);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Icon, { name: "download", size: 24, className: "pire-dropzone-icon" }),
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "pire-dropzone-prompt", children: promptLabel ?? msg.fileDropZonePrompt }),
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { name: "download", size: 24, className: "pire-dropzone-icon" }),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "pire-dropzone-prompt", children: promptLabel ?? msg.fileDropZonePrompt }),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
             import_react_aria_components31.FileTrigger,
             {
               acceptedFileTypes,
               allowsMultiple,
               onSelect: (list) => accept(list ? [...list] : []),
-              children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Button, { variant: "secondary", isDisabled: isDisabled || isReadOnly, children: msg.fileUploadChoose })
+              children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Button, { variant: "secondary", isDisabled: isDisabled || isReadOnly, children: msg.fileUploadChoose })
             }
           )
         ]
       }
     ),
-    files.length ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("ul", { className: "pire-fileupload-list", children: files.map(({ file, previewUrl }) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("li", { className: "pire-fileupload-item", children: [
-      previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("img", { className: "pire-fileupload-thumb", src: previewUrl, alt: "" }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Icon, { name: "file-text", size: 16, className: "pire-fileupload-icon" }),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "pire-fileupload-name", children: file.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "pire-fileupload-size", children: formatFileSize(file.size) }),
-      isDisabled || isReadOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    files.length ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("ul", { className: "pire-fileupload-list", children: files.map(({ file, previewUrl }) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("li", { className: "pire-fileupload-item", children: [
+      previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("img", { className: "pire-fileupload-thumb", src: previewUrl, alt: "" }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { name: "file-text", size: 16, className: "pire-fileupload-icon" }),
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "pire-fileupload-name", children: file.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "pire-fileupload-size", children: formatFileSize(file.size) }),
+      isDisabled || isReadOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
         IconButton,
         {
           icon: "x",
@@ -2723,9 +3222,9 @@ function FileDropZone({
         }
       )
     ] }, `${file.name}-${file.size}-${file.lastModified}`)) }) : null,
-    uploadProgress != null ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ProgressBar, { value: uploadProgress, label: msg.fileUploadUploading }) : null,
-    description ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "pire-field-hint", children: description }) : null,
-    isInvalid && errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "pire-field-error", children: errorMessage }) : null
+    uploadProgress != null ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ProgressBar, { value: uploadProgress, label: msg.fileUploadUploading }) : null,
+    description ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "pire-field-hint", children: description }) : null,
+    isInvalid && errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "pire-field-error", children: errorMessage }) : null
   ] });
 }
 
@@ -2735,6 +3234,7 @@ var import_react_aria_components32 = require("react-aria-components");
 0 && (module.exports = {
   Avatar,
   Badge,
+  BarChart,
   Breadcrumb,
   Button,
   Card,
@@ -2747,6 +3247,7 @@ var import_react_aria_components32 = require("react-aria-components");
   DescriptionList,
   Dialog,
   DialogTrigger,
+  DonutChart,
   EmptyState,
   FileDropZone,
   FileUpload,
@@ -2760,6 +3261,7 @@ var import_react_aria_components32 = require("react-aria-components");
   InlineMessage,
   Input,
   KpiTile,
+  LineChart,
   Link,
   LinkList,
   Menu,
@@ -2800,6 +3302,7 @@ var import_react_aria_components32 = require("react-aria-components");
   Toast,
   ToastProvider,
   Tooltip,
+  VIZ_SLOT_COUNT,
   ValueHelpDialog,
   ValueHelpField,
   configureIcons,