orbital-ds 0.9.0 → 0.10.0

package/dist/ui/echart.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import * as echarts from 'echarts/core';
+import { EChartsCoreOption } from 'echarts/core';
+export { EChartsCoreOption as DsEChartOption } from 'echarts/core';
+
+interface EChartHandle {
+    /** Instancia de ECharts (para eventos o acciones avanzadas). */
+    getInstance(): ReturnType<typeof echarts.init> | null;
+    /** SVG del gráfico tal como se ve (solo con renderer SVG). */
+    toSvg(): string | null;
+    /** Descarga el gráfico como SVG o PNG. */
+    download(type?: "svg" | "png", fileName?: string): void;
+}
+interface EChartProps extends Omit<React.ComponentProps<"div">, "ref"> {
+    option: EChartsCoreOption;
+    /** Alto del gráfico (cualquier medida CSS). El ancho es el del contenedor. */
+    height?: string | number;
+    renderer?: "svg" | "canvas";
+    /** Reemplaza las series en vez de fusionarlas al cambiar `option`. */
+    notMerge?: boolean;
+    /** Muestra los botones de descargar SVG y PNG. */
+    exportable?: boolean;
+    fileName?: string;
+    /** Sin datos: muestra el texto «Sin datos» en lugar del gráfico. */
+    empty?: boolean;
+    /** Eventos de ECharts: { click: (p) => …, legendselectchanged: … } */
+    onEvents?: Record<string, (params: unknown) => void>;
+}
+declare const EChart: React.ForwardRefExoticComponent<EChartProps & React.RefAttributes<EChartHandle>>;
+
+export { EChart, type EChartHandle, type EChartProps };

package/dist/ui/echart.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { DownloadIcon } from "lucide-react";
+import { useDsMessages } from "../hooks/use-ds-messages";
+import { echarts } from "../lib/echarts-setup";
+import { dsEchartsTheme } from "../lib/echarts-theme";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+const EChart = React.forwardRef(function EChart2({ option, height = 320, renderer = "svg", notMerge = false, exportable = false, fileName = "grafico", empty = false, onEvents, className, ...props }, ref) {
+  const t = useDsMessages();
+  const box = React.useRef(null);
+  const chart = React.useRef(null);
+  const optionRef = React.useRef(option);
+  optionRef.current = option;
+  const [themeKey, setThemeKey] = React.useState(0);
+  React.useEffect(() => {
+    const observer = new MutationObserver(() => setThemeKey((k) => k + 1));
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-theme", "data-variant", "style"] });
+    const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const onMotion = () => setThemeKey((k) => k + 1);
+    mql.addEventListener("change", onMotion);
+    return () => {
+      observer.disconnect();
+      mql.removeEventListener("change", onMotion);
+    };
+  }, []);
+  React.useEffect(() => {
+    if (!box.current || empty) return;
+    const instance = echarts.init(box.current, dsEchartsTheme(box.current), { renderer });
+    chart.current = instance;
+    instance.setOption(optionRef.current);
+    for (const [name, handler] of Object.entries(onEvents ?? {})) instance.on(name, handler);
+    const resize = new ResizeObserver(() => instance.resize());
+    resize.observe(box.current);
+    return () => {
+      resize.disconnect();
+      instance.dispose();
+      chart.current = null;
+    };
+  }, [themeKey, renderer, empty]);
+  React.useEffect(() => {
+    chart.current?.setOption(option, { notMerge });
+  }, [option, notMerge]);
+  const toSvg = React.useCallback(() => {
+    const c = chart.current;
+    return renderer === "svg" && c?.renderToSVGString ? c.renderToSVGString() : null;
+  }, [renderer]);
+  const download = React.useCallback(
+    (type = "svg", name = fileName) => {
+      const c = chart.current;
+      if (!c) return;
+      let url;
+      if (type === "svg" && renderer === "svg") {
+        const svg = toSvg();
+        if (!svg) return;
+        url = URL.createObjectURL(new Blob([svg], { type: "image/svg+xml" }));
+      } else {
+        url = c.getDataURL({ type: type === "svg" ? "svg" : "png", pixelRatio: 2, backgroundColor: "transparent" });
+      }
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `${name}.${type}`;
+      a.click();
+      if (url.startsWith("blob:")) URL.revokeObjectURL(url);
+    },
+    [fileName, renderer, toSvg]
+  );
+  React.useImperativeHandle(ref, () => ({ getInstance: () => chart.current, toSvg, download }), [toSvg, download]);
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "echart", "data-renderer": renderer, className: cn("group/echart relative min-w-0", className), ...props, children: [
+    exportable && !empty && /* @__PURE__ */ jsxs("div", { "data-slot": "echart-actions", className: "absolute end-0 top-0 z-(--ds-z-raised) flex gap-1", children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", "aria-label": t.chartExportSvg, title: t.chartExportSvg, onClick: () => download("svg"), children: /* @__PURE__ */ jsx(DownloadIcon, {}) }),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "xs", "aria-label": t.chartExportPng, title: t.chartExportPng, onClick: () => download("png"), children: "PNG" })
+    ] }),
+    empty ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "echart-empty",
+        className: "flex items-center justify-center rounded-card border border-dashed border-border text-sm text-muted-foreground",
+        style: { height },
+        children: t.chartNoData
+      }
+    ) : /* @__PURE__ */ jsx("div", { ref: box, "data-slot": "echart-canvas", className: "w-full", style: { height } })
+  ] });
+});
+export {
+  EChart
+};

package/dist/ui/eyebrow.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+
+declare const eyebrowClassName = "text-xs leading-tight font-(--ds-label-weight) tracking-(--ds-label-tracking) text-muted-foreground uppercase";
+declare function Eyebrow({ className, render, ...props }: useRender.ComponentProps<"p">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+
+export { Eyebrow, eyebrowClassName };

package/dist/ui/eyebrow.js

@@ -0,0 +1,16 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "../lib/utils";
+const eyebrowClassName = "text-xs leading-tight font-(--ds-label-weight) tracking-(--ds-label-tracking) text-muted-foreground uppercase";
+function Eyebrow({ className, render, ...props }) {
+  return useRender({
+    defaultTagName: "p",
+    props: mergeProps({ className: cn(eyebrowClassName, className) }, props),
+    render,
+    state: { slot: "eyebrow" }
+  });
+}
+export {
+  Eyebrow,
+  eyebrowClassName
+};

package/dist/ui/filter-bar.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+declare function FilterBar({ className, children, actions, onClear, canClear, ...props }: React.ComponentProps<"div"> & {
+    /** Acciones de la vista (exportar, guardar vista…), al final de la fila. */
+    actions?: React.ReactNode;
+    /** Si se pasa, muestra «Quitar filtros». */
+    onClear?: () => void;
+    /** Hay algo que quitar: si es false, «Quitar filtros» se oculta. */
+    canClear?: boolean;
+}): React.JSX.Element;
+type FilterOption = {
+    value: string;
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+};
+declare function FilterMenu({ className, label, icon, value, onValueChange, options, allOption, disabled, disabledReason, size, align, id, }: {
+    className?: string;
+    /** Nombre del filtro («Campaña»): va siempre en el disparador. */
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    /** Valor elegido; `null`/`undefined` = sin filtro («Todos»). */
+    value?: string | null;
+    onValueChange?: (value: string | null) => void;
+    options: FilterOption[];
+    /** Añade la opción «Todos» (o con este texto) que quita el filtro. */
+    allOption?: boolean | string;
+    disabled?: boolean;
+    /** Desactiva el filtro y explica el motivo (Tooltip + texto accesible). */
+    disabledReason?: React.ReactNode;
+    size?: "sm" | "default";
+    align?: "start" | "center" | "end";
+    id?: string;
+}): React.JSX.Element;
+
+export { FilterBar, FilterMenu, type FilterOption };

package/dist/ui/filter-bar.js

@@ -0,0 +1,193 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, XIcon } from "lucide-react";
+import * as React from "react";
+import { useDsMessages } from "../hooks/use-ds-messages";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "./dropdown-menu";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
+function FilterBar({
+  className,
+  children,
+  actions,
+  onClear,
+  canClear = true,
+  ...props
+}) {
+  const t = useDsMessages();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "filter-bar",
+      className: cn(
+        "flex w-full flex-wrap items-center gap-(--ds-filter-gap)",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "filter-bar-filters",
+            className: "flex min-w-0 flex-wrap items-center gap-(--ds-filter-gap)",
+            children: [
+              children,
+              onClear && canClear ? /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  "data-slot": "filter-bar-clear",
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: onClear,
+                  children: [
+                    /* @__PURE__ */ jsx(XIcon, { "data-icon": "inline-start" }),
+                    t.filterClear
+                  ]
+                }
+              ) : null
+            ]
+          }
+        ),
+        actions ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "filter-bar-actions",
+            className: "ms-auto flex flex-wrap items-center gap-(--ds-filter-gap)",
+            children: actions
+          }
+        ) : null
+      ]
+    }
+  );
+}
+const ALL = "__all__";
+function FilterMenu({
+  className,
+  label,
+  icon,
+  value,
+  onValueChange,
+  options,
+  allOption = false,
+  disabled = false,
+  disabledReason,
+  size = "sm",
+  align = "start",
+  id
+}) {
+  const t = useDsMessages();
+  const reasonId = React.useId();
+  const selected = options.find((o) => o.value === value);
+  const allLabel = typeof allOption === "string" ? allOption : t.filterAll;
+  const isDisabled = disabled || !!disabledReason;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon,
+    /* @__PURE__ */ jsx("span", { "data-slot": "filter-menu-label", className: "text-muted-foreground", children: label }),
+    selected || allOption ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "filter-menu-value",
+        className: "max-w-40 truncate font-(--ds-label-weight) text-foreground",
+        children: selected ? selected.label : allLabel
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(ChevronDownIcon, { "data-icon": "inline-end", className: "text-muted-foreground" })
+  ] });
+  const triggerClass = cn(
+    "gap-1.5 aria-disabled:cursor-not-allowed aria-disabled:opacity-(--ds-disabled-opacity) data-active:border-primary",
+    className
+  );
+  if (disabledReason) {
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsxs(
+        TooltipTrigger,
+        {
+          render: /* @__PURE__ */ jsx(
+            Button,
+            {
+              id,
+              variant: "outline",
+              size,
+              "data-slot": "filter-menu-trigger",
+              "data-disabled": "",
+              "aria-disabled": "true",
+              "aria-describedby": reasonId,
+              className: triggerClass,
+              onClick: (e) => e.preventDefault()
+            }
+          ),
+          children: [
+            content,
+            /* @__PURE__ */ jsx("span", { id: reasonId, className: "sr-only", children: disabledReason })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(TooltipContent, { "aria-hidden": "true", children: disabledReason })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(
+      DropdownMenuTrigger,
+      {
+        disabled: isDisabled,
+        render: /* @__PURE__ */ jsx(
+          Button,
+          {
+            id,
+            variant: "outline",
+            size,
+            "data-slot": "filter-menu-trigger",
+            "data-active": selected ? "" : void 0,
+            className: triggerClass
+          }
+        ),
+        children: content
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DropdownMenuContent,
+      {
+        "data-slot": "filter-menu-content",
+        align,
+        className: "w-auto min-w-48",
+        children: /* @__PURE__ */ jsxs(
+          DropdownMenuRadioGroup,
+          {
+            value: value ?? ALL,
+            onValueChange: (v) => onValueChange?.(v === ALL ? null : v),
+            children: [
+              allOption ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value: ALL, children: allLabel }),
+                /* @__PURE__ */ jsx(DropdownMenuSeparator, {})
+              ] }) : null,
+              options.map((o) => /* @__PURE__ */ jsxs(
+                DropdownMenuRadioItem,
+                {
+                  value: o.value,
+                  disabled: o.disabled,
+                  children: [
+                    o.icon,
+                    o.label
+                  ]
+                },
+                o.value
+              ))
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  FilterBar,
+  FilterMenu
+};

package/dist/ui/heatmap-grid.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { DsDataTone } from './legend.js';
+
+interface HeatmapCell {
+    row: number;
+    column: number;
+    rowLabel: string;
+    columnLabel: string;
+    value: number | null;
+    /** Valor ya formateado (o «Sin dato»). */
+    formatted: string;
+}
+declare function HeatmapGrid({ className, rows, columns, values, min: minProp, max: maxProp, tone, caption, formatValue, cellLabel, renderColumnHeader, renderCard, onCellClick, onCellFocus, showScale, style, ...props }: Omit<React.ComponentProps<"div">, "children"> & {
+    /** Etiquetas de las filas (p. ej. días). */
+    rows: string[];
+    /** Etiquetas de las columnas (p. ej. horas). */
+    columns: string[];
+    /** Matriz [fila][columna]; `null` o ausente = sin dato. */
+    values: Array<Array<number | null | undefined>>;
+    min?: number;
+    max?: number;
+    /** Tono del extremo alto en lugar de --ds-heatmap-high. */
+    tone?: DsDataTone;
+    /** Título de la tabla (visible). Si no, pasa `aria-label`. */
+    caption?: React.ReactNode;
+    formatValue?: (value: number) => string;
+    /** Texto accesible propio de cada celda. */
+    cellLabel?: (cell: HeatmapCell) => string;
+    /** Contenido de la cabecera de columna (p. ej. mostrar solo cada 3 horas). */
+    renderColumnHeader?: (label: string, index: number) => React.ReactNode;
+    /** Tarjeta flotante de una celda (con ratón y foco). */
+    renderCard?: (cell: HeatmapCell) => React.ReactNode;
+    onCellClick?: (cell: HeatmapCell) => void;
+    onCellFocus?: (cell: HeatmapCell) => void;
+    /** Escala bajo/alto bajo la tabla. */
+    showScale?: boolean;
+}): React.JSX.Element;
+
+export { type HeatmapCell, HeatmapGrid };

package/dist/ui/heatmap-grid.js

@@ -0,0 +1,195 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useDsLocale, useDsMessages } from "../hooks/use-ds-messages";
+import { cn } from "../lib/utils";
+import { dataToneVar } from "./legend";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
+const HATCH = "var(--ds-hatch)";
+function HeatmapGrid({
+  className,
+  rows,
+  columns,
+  values,
+  min: minProp,
+  max: maxProp,
+  tone,
+  caption,
+  formatValue,
+  cellLabel,
+  renderColumnHeader,
+  renderCard,
+  onCellClick,
+  onCellFocus,
+  showScale = true,
+  style,
+  ...props
+}) {
+  const t = useDsMessages();
+  const locale = useDsLocale();
+  const number = React.useMemo(() => new Intl.NumberFormat(locale, { maximumFractionDigits: 1 }), [locale]);
+  const format = React.useCallback((v) => formatValue ? formatValue(v) : number.format(v), [formatValue, number]);
+  const { min, max, hasEmpty } = React.useMemo(() => {
+    let lo = Infinity;
+    let hi = -Infinity;
+    let empty = false;
+    for (let r = 0; r < rows.length; r++)
+      for (let c = 0; c < columns.length; c++) {
+        const v = values[r]?.[c];
+        if (v == null || !Number.isFinite(v)) empty = true;
+        else {
+          lo = Math.min(lo, v);
+          hi = Math.max(hi, v);
+        }
+      }
+    return { min: minProp ?? (lo === Infinity ? 0 : lo), max: maxProp ?? (hi === -Infinity ? 1 : hi), hasEmpty: empty };
+  }, [values, rows.length, columns.length, minProp, maxProp]);
+  const cellAt = React.useCallback(
+    (r, c) => {
+      const raw = values[r]?.[c];
+      const value = raw == null || !Number.isFinite(raw) ? null : raw;
+      return { row: r, column: c, rowLabel: rows[r], columnLabel: columns[c], value, formatted: value == null ? t.statNoData : format(value) };
+    },
+    [values, rows, columns, format, t.statNoData]
+  );
+  const [active, setActive] = React.useState({ r: 0, c: 0 });
+  const cells = React.useRef([]);
+  const nCols = columns.length;
+  const moveTo = (r, c) => {
+    const nr = Math.min(Math.max(r, 0), rows.length - 1);
+    const nc = Math.min(Math.max(c, 0), nCols - 1);
+    setActive({ r: nr, c: nc });
+    cells.current[nr * nCols + nc]?.focus();
+  };
+  const onKeyDown = (e, r, c) => {
+    const rtl = getComputedStyle(e.currentTarget).direction === "rtl";
+    const fwd = rtl ? -1 : 1;
+    switch (e.key) {
+      case "ArrowRight":
+        moveTo(r, c + fwd);
+        break;
+      case "ArrowLeft":
+        moveTo(r, c - fwd);
+        break;
+      case "ArrowDown":
+        moveTo(r + 1, c);
+        break;
+      case "ArrowUp":
+        moveTo(r - 1, c);
+        break;
+      case "Home":
+        moveTo(e.ctrlKey ? 0 : r, 0);
+        break;
+      case "End":
+        moveTo(e.ctrlKey ? rows.length - 1 : r, nCols - 1);
+        break;
+      case "Enter":
+      case " ":
+        onCellClick?.(cellAt(r, c));
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+  };
+  const span = max - min || 1;
+  const highStyle = tone ? { "--ds-heatmap-high": dataToneVar[tone] } : void 0;
+  const renderCell = (r, c) => {
+    const cell = cellAt(r, c);
+    const ratio = cell.value == null ? 0 : Math.min(Math.max((cell.value - min) / span, 0), 1);
+    const level = cell.value == null ? void 0 : Math.round(ratio * 4);
+    const isActive = active.r === r && active.c === c;
+    const tdProps = {
+      role: "gridcell",
+      tabIndex: isActive ? 0 : -1,
+      "aria-label": cellLabel ? cellLabel(cell) : `${cell.rowLabel}, ${cell.columnLabel}: ${cell.formatted}`,
+      "data-slot": "heatmap-grid-cell",
+      "data-state": cell.value == null ? "empty" : "filled",
+      "data-level": level,
+      className: cn(
+        "size-(--ds-heatmap-cell) min-w-(--ds-heatmap-cell) rounded-xs p-0 outline-hidden transition-shadow duration-(--ds-motion-fast) motion-reduce:transition-none",
+        "focus-visible:relative focus-visible:z-(--ds-z-raised) focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-(--ds-ring-color)",
+        cell.value == null ? "bg-muted" : "",
+        onCellClick && "cursor-pointer hover:ring-(length:--ds-rule-w) hover:ring-ring"
+      ),
+      style: cell.value == null ? { backgroundImage: HATCH } : { backgroundColor: `color-mix(in oklch, var(--ds-heatmap-high) ${Math.round(ratio * 100)}%, var(--ds-heatmap-low))` },
+      onClick: onCellClick ? () => onCellClick(cell) : void 0,
+      onFocus: () => {
+        if (!isActive) setActive({ r, c });
+        onCellFocus?.(cell);
+      },
+      onKeyDown: (e) => onKeyDown(e, r, c)
+    };
+    const ref = (el) => {
+      cells.current[r * nCols + c] = el;
+    };
+    if (!renderCard) return /* @__PURE__ */ jsx("td", { ref, ...tdProps }, c);
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx("td", { ref, ...tdProps }) }),
+      /* @__PURE__ */ jsx(TooltipContent, { "data-slot": "heatmap-grid-card", className: "max-w-xs flex-col items-start", children: renderCard(cell) })
+    ] }, c);
+  };
+  const table = /* @__PURE__ */ jsxs("table", { role: "grid", "data-slot": "heatmap-grid-table", className: "border-separate border-spacing-0.5 text-xs", children: [
+    caption && /* @__PURE__ */ jsx("caption", { "data-slot": "heatmap-grid-caption", className: "pb-2 text-start text-sm font-medium text-foreground", children: caption }),
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("td", { "aria-hidden": true }),
+      columns.map((col, c) => /* @__PURE__ */ jsx(
+        "th",
+        {
+          scope: "col",
+          "data-slot": "heatmap-grid-column-header",
+          "aria-label": col,
+          className: "pb-1 text-center font-normal text-muted-foreground tabular-nums",
+          children: renderColumnHeader ? renderColumnHeader(col, c) : col
+        },
+        c
+      ))
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: rows.map((row, r) => /* @__PURE__ */ jsxs("tr", { "data-slot": "heatmap-grid-row", children: [
+      /* @__PURE__ */ jsx("th", { scope: "row", "data-slot": "heatmap-grid-row-header", className: "pe-2 text-start font-normal whitespace-nowrap text-muted-foreground", children: row }),
+      columns.map((_, c) => renderCell(r, c))
+    ] }, r)) })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "heatmap-grid",
+      "data-tone": tone,
+      className: cn("flex min-w-0 flex-col gap-3", className),
+      style: { ...highStyle, ...style },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { "data-slot": "heatmap-grid-scroll", className: "min-w-0 overflow-x-auto", children: renderCard ? /* @__PURE__ */ jsx(TooltipProvider, { children: table }) : table }),
+        showScale && /* @__PURE__ */ jsxs("div", { "data-slot": "heatmap-grid-scale", className: "flex flex-wrap items-center gap-2 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("span", { children: t.heatmapLow }),
+          /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: format(min) }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              "data-slot": "heatmap-grid-scale-bar",
+              className: "h-(--ds-legend-swatch) w-24 rounded-xs bg-linear-to-r from-(--ds-heatmap-low) to-(--ds-heatmap-high) ring-(length:--ds-rule-w) ring-border rtl:bg-linear-to-l"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: format(max) }),
+          /* @__PURE__ */ jsx("span", { children: t.heatmapHigh }),
+          hasEmpty && /* @__PURE__ */ jsxs("span", { className: "ms-2 inline-flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                "data-slot": "heatmap-grid-scale-empty",
+                className: "size-(--ds-legend-swatch) rounded-xs bg-muted",
+                style: { backgroundImage: HATCH }
+              }
+            ),
+            t.statNoData
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  HeatmapGrid
+};

package/dist/ui/i18n-provider.js

@@ -2,8 +2,8 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { DirectionProvider } from "@base-ui/react/direction-provider";
-import { DsMessagesContext } from "../hooks/use-ds-messages";
-import { dsDirection, dsMessagesFor } from "../lib/i18n";
+import { DsLocaleContext, DsMessagesContext } from "../hooks/use-ds-messages";
+import { DS_DEFAULT_LOCALE, dsDirection, dsMessagesFor } from "../lib/i18n";
 function DsI18nProvider({
   locale,
   messages,
@@ -11,7 +11,7 @@ function DsI18nProvider({
   children
 }) {
   const value = React.useMemo(() => dsMessagesFor(locale, messages), [locale, messages]);
-  return /* @__PURE__ */ jsx(DirectionProvider, { direction: dir ?? dsDirection(locale), children: /* @__PURE__ */ jsx(DsMessagesContext.Provider, { value, children }) });
+  return /* @__PURE__ */ jsx(DirectionProvider, { direction: dir ?? dsDirection(locale), children: /* @__PURE__ */ jsx(DsLocaleContext.Provider, { value: locale || DS_DEFAULT_LOCALE, children: /* @__PURE__ */ jsx(DsMessagesContext.Provider, { value, children }) }) });
 }
 export {
   DsI18nProvider

package/dist/ui/legend.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+/** Tonos de color comunes a las piezas de datos (series del gráfico y estados). */
+type DsDataTone = "primary" | "info" | "success" | "warning" | "danger" | "neutral" | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5";
+/** Relleno de fondo de cada tono (clases estáticas para que Tailwind las genere). */
+declare const dataToneBg: Record<DsDataTone, string>;
+/** Variable CSS del color de cada tono (para mezclas con color-mix). */
+declare const dataToneVar: Record<DsDataTone, string>;
+declare function Legend({ className, orientation, ...props }: React.ComponentProps<"ul"> & {
+    orientation?: "horizontal" | "vertical";
+}): React.JSX.Element;
+declare function LegendSwatch({ className, tone, color, shape, style, ...props }: React.ComponentProps<"span"> & {
+    tone?: DsDataTone;
+    /** Color propio (cualquier valor CSS, mejor una variable). Gana a `tone`. */
+    color?: string;
+    shape?: "square" | "circle" | "line";
+}): React.JSX.Element;
+declare function LegendItem({ className, tone, color, shape, value, active, onToggle, children, ...props }: Omit<React.ComponentProps<"li">, "onToggle" | "color"> & {
+    tone?: DsDataTone;
+    color?: string;
+    shape?: "square" | "circle" | "line";
+    /** Valor opcional, tras la etiqueta (ya formateado por la app). */
+    value?: React.ReactNode;
+    /** Serie visible (en una leyenda interactiva). */
+    active?: boolean;
+    /** Hace el elemento interactivo: recibe el nuevo estado. */
+    onToggle?: (active: boolean) => void;
+}): React.JSX.Element;
+
+export { type DsDataTone, Legend, LegendItem, LegendSwatch, dataToneBg, dataToneVar };