@epa-datos/ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 EPA Digital
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,98 @@
+# @epa-datos/ui
+
+React + Tailwind dashboard components built on [Base UI](https://base-ui.com), published as source (not a bundle) so the components stay fully readable and themeable in the projects that install them.
+
+There's no barrel `index` — each file is imported directly, the same way it's imported inside this repo:
+
+```tsx
+import { Button } from "@epa-datos/ui/components/ui/button"
+import { Badge } from "@epa-datos/ui/components/ui/badge"
+import { Heatmap } from "@epa-datos/ui/components/epa/heatmap"
+import { cn } from "@epa-datos/ui/lib/utils"
+```
+
+## Install
+
+```bash
+npm install @epa-datos/ui
+```
+
+`react`/`react-dom` ^19 are peer dependencies — everything else the components need (Base UI, Recharts, date-fns, lucide-react, etc.) installs automatically.
+
+## Set up styles
+
+Tailwind v4 project required. In your global stylesheet:
+
+```css
+@import "tailwindcss";
+@import "@epa-datos/ui/styles/tokens.css";
+```
+
+That one import brings in everything the components rely on: the semantic color tokens (`--primary`, `--success`, `--warning`, `--info`, `--chart-1..10`, etc.) in light and dark, the `dark:`/`short:` custom variants, and the animation/data-state utilities components use for open/close transitions. Override any token by redeclaring it after the import — see [Theming](#theming) below.
+
+Your project also needs to supply two font variables the components inherit rather than hardcode:
+
+```ts
+// wherever you load fonts (e.g. app/layout.tsx in Next.js)
+const sans = YourSansFont({ variable: "--font-sans" })
+const mono = YourMonoFont({ variable: "--font-mono" }) // optional, for code/tabular content
+```
+
+## Global providers
+
+Mount these once near the root of your app — components assume they exist, the same way they do in this repo's own `app/layout.tsx`:
+
+```tsx
+import { ThemeProvider } from "next-themes"
+import { TooltipProvider } from "@epa-datos/ui/components/ui/tooltip"
+import { Toaster } from "@epa-datos/ui/components/ui/toast"
+
+export default function RootLayout({ children }) {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="light">
+      <TooltipProvider>
+        {children}
+        <Toaster />
+      </TooltipProvider>
+    </ThemeProvider>
+  )
+}
+```
+
+## Theming
+
+All colors are OKLCH CSS variables — never hardcoded in component source — so re-theming means overriding variables, not editing component files:
+
+```css
+@import "tailwindcss";
+@import "@epa-datos/ui/styles/tokens.css";
+
+:root {
+  --primary: oklch(0.55 0.2 250);
+}
+.dark {
+  --primary: oklch(0.65 0.2 250);
+}
+```
+
+## Browsing components
+
+This repo is also the showcase — every component and its variants are demoed in `components/showcase/demos/*`. Clone the repo and run `pnpm dev` to browse them interactively, or read the source directly under `components/ui/` and `components/epa/`.
+
+## Conventions
+
+Full component-selection guidance ("which component fits this request"), styling rules, and the reasoning behind the design tokens live in [`AGENTS.md`](./AGENTS.md) — written for both human contributors and coding agents working in this repo.
+
+## Contributing / local development
+
+```bash
+pnpm install
+pnpm dev      # showcase app at localhost:3000
+pnpm build:lib  # builds the publishable package into dist/
+```
+
+Component and design-token changes are made here, in `epa-ui`, not in projects that depend on the package — see `AGENTS.md` for the full editing conventions.
+
+## License
+
+MIT

package/dist/components/epa/conversion-funnel.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+type ConversionFunnelStage = {
+    label: string;
+    value: number;
+    /** % change vs. the same stage in the previous period; omit to hide the trend badge */
+    previousPeriodDelta?: number;
+};
+type ConversionFunnelProps = {
+    stages: ConversionFunnelStage[];
+    formatValue?: (value: number) => string;
+    formatDelta?: (delta: number) => string;
+    formatDropOff?: (percent: number) => React.ReactNode;
+    className?: string;
+};
+declare function ConversionFunnel({ stages, formatValue, formatDelta, formatDropOff, className, }: ConversionFunnelProps): React.JSX.Element;
+export { ConversionFunnel };
+export type { ConversionFunnelProps, ConversionFunnelStage };

package/dist/components/epa/conversion-funnel.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
+import { ArrowDownIcon, ArrowDownRightIcon, ArrowUpRightIcon } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Badge } from "../../components/ui/badge.js";
+import { ProgressIndicator, ProgressLabel, ProgressTrack } from "../../components/ui/progress.js";
+// Segments narrower than this can't fit their value label without clipping it (see the
+// reference screenshot, where a narrow stage's compact-unit suffix gets cut off) — flip the
+// label to sit just past the bar instead of inside it.
+const NARROW_SEGMENT_THRESHOLD = 18;
+function defaultFormatValue(value) {
+    if (Math.abs(value) >= 1000000) {
+        return `${(value / 1000000).toFixed(2).replace(/\.?0+$/, "")}M`;
+    }
+    if (Math.abs(value) >= 1000) {
+        return `${(value / 1000).toFixed(1).replace(/\.0$/, "")}K`;
+    }
+    return value.toLocaleString();
+}
+function defaultFormatDelta(delta) {
+    return `${delta > 0 ? "+" : ""}${delta.toFixed(1)}%`;
+}
+function defaultFormatDropOff(percent) {
+    return percent >= 0
+        ? `${percent.toFixed(1)}% de caída`
+        : `${Math.abs(percent).toFixed(1)}% de alza`;
+}
+function TrendBadge({ delta, formatDelta, }) {
+    const isPositive = delta >= 0;
+    const Icon = isPositive ? ArrowUpRightIcon : ArrowDownRightIcon;
+    return (_jsxs(Badge, { variant: isPositive ? "success" : "destructive", className: "gap-0.5", children: [_jsx(Icon, { "data-icon": "inline-start" }), formatDelta(delta)] }));
+}
+function DropOff({ percent, formatDropOff, }) {
+    return (_jsxs("div", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [_jsx(ArrowDownIcon, { className: cn("size-3 shrink-0", percent < 0 && "rotate-180"), "aria-hidden": "true" }), _jsx("span", { className: "truncate", children: formatDropOff(percent) })] }));
+}
+function ConversionFunnel({ stages, formatValue = defaultFormatValue, formatDelta = defaultFormatDelta, formatDropOff = defaultFormatDropOff, className, }) {
+    const baseline = stages[0]?.value ?? 0;
+    return (_jsx("div", { className: cn("flex flex-col gap-2.5", className), children: stages.map((stage, index) => {
+            const widthPercent = baseline > 0 ? (stage.value / baseline) * 100 : 0;
+            const showLabelInside = widthPercent >= NARROW_SEGMENT_THRESHOLD;
+            const formatted = formatValue(stage.value);
+            const previous = index > 0 ? stages[index - 1] : undefined;
+            const dropOffPercent = previous && previous.value > 0
+                ? ((previous.value - stage.value) / previous.value) * 100
+                : undefined;
+            return (_jsxs(ProgressPrimitive.Root, { value: stage.value, min: 0, max: baseline, getAriaValueText: () => stage.previousPeriodDelta != null
+                    ? `${formatted}, ${formatDelta(stage.previousPeriodDelta)} vs. previous period`
+                    : formatted, className: "flex items-center gap-3", children: [_jsxs("div", { className: "flex w-36 shrink-0 flex-col gap-0.5", children: [_jsx(ProgressLabel, { className: "truncate text-sm font-semibold text-foreground", children: stage.label }), dropOffPercent != null && (_jsx(DropOff, { percent: dropOffPercent, formatDropOff: formatDropOff }))] }), _jsxs(ProgressTrack, { className: "h-9 flex-1 rounded-md bg-muted", children: [_jsx(ProgressIndicator, { className: "relative flex items-center overflow-hidden rounded-md", style: { backgroundColor: `var(--chart-${(index % 10) + 1})` }, children: showLabelInside && (_jsx("span", { className: "truncate px-3 text-sm font-medium text-white tabular-nums", children: formatted })) }), !showLabelInside && (_jsx("span", { className: "absolute inset-y-0 flex items-center pl-3 text-sm font-medium text-foreground tabular-nums", style: { left: `${widthPercent}%` }, children: formatted }))] }), stage.previousPeriodDelta != null && (_jsx("div", { className: "w-20 shrink-0 text-right", children: _jsx(TrendBadge, { delta: stage.previousPeriodDelta, formatDelta: formatDelta }) }))] }, stage.label));
+        }) }));
+}
+export { ConversionFunnel };

package/dist/components/epa/date-range-picker.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+import type { DateRange } from "react-day-picker";
+import { PopoverContent } from "../../components/ui/popover.js";
+type CompareType = "previous-period" | "previous-year" | "custom";
+type DateRangePreset = {
+    label: string;
+    getRange: () => DateRange;
+};
+type CompareOption = {
+    value: CompareType;
+    label: string;
+};
+declare const DEFAULT_PRESETS: DateRangePreset[];
+declare const TODAY_PRESET: DateRangePreset;
+declare const DEFAULT_COMPARE_OPTIONS: CompareOption[];
+declare function getPreviousPeriod(range: DateRange): DateRange | undefined;
+declare function getPreviousYear(range: DateRange): DateRange | undefined;
+type DateRangePickerBaseProps = {
+    value?: DateRange;
+    defaultValue?: DateRange;
+    onValueChange?: (value: DateRange) => void;
+    presets?: DateRangePreset[];
+    className?: string;
+};
+type DateRangePickerPopoverProps = DateRangePickerBaseProps & {
+    variant?: "popover";
+    compareEnabled?: boolean;
+    defaultCompareEnabled?: boolean;
+    onCompareEnabledChange?: (enabled: boolean) => void;
+    compareValue?: DateRange;
+    onCompareValueChange?: (value: DateRange | undefined) => void;
+    compareOptions?: CompareOption[];
+    numberOfMonths?: number;
+    align?: React.ComponentProps<typeof PopoverContent>["align"];
+};
+type DateRangePickerInlineProps = DateRangePickerBaseProps & {
+    variant: "inline";
+};
+type DateRangePickerProps = DateRangePickerPopoverProps | DateRangePickerInlineProps;
+declare function DateRangePicker(props: DateRangePickerProps): React.JSX.Element;
+export { DateRangePicker, DEFAULT_PRESETS, DEFAULT_COMPARE_OPTIONS, TODAY_PRESET, getPreviousPeriod, getPreviousYear, };
+export type { DateRangePickerProps, DateRangePickerPopoverProps, DateRangePickerInlineProps, DateRangePreset, CompareOption, CompareType, };

package/dist/components/epa/date-range-picker.js

@@ -0,0 +1,184 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { differenceInCalendarDays, format, isSameDay, startOfToday, startOfYear, subDays, subMonths, subYears, } from "date-fns";
+import { es } from "date-fns/locale";
+import { CalendarIcon, ChevronDownIcon } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../../components/ui/button.js";
+import { ButtonGroup } from "../../components/ui/button-group.js";
+import { Calendar } from "../../components/ui/calendar.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../components/ui/popover.js";
+import { Separator } from "../../components/ui/separator.js";
+import { Switch } from "../../components/ui/switch.js";
+const DEFAULT_PRESETS = [
+    {
+        label: "Ayer",
+        getRange: () => ({ from: subDays(startOfToday(), 1), to: startOfToday() }),
+    },
+    {
+        label: "Últimos 7 días",
+        getRange: () => ({ from: subDays(startOfToday(), 6), to: startOfToday() }),
+    },
+    {
+        label: "Últimos 14 días",
+        getRange: () => ({ from: subDays(startOfToday(), 13), to: startOfToday() }),
+    },
+    {
+        label: "Últimos 30 días",
+        getRange: () => ({ from: subDays(startOfToday(), 29), to: startOfToday() }),
+    },
+    {
+        label: "Últimos 90 días",
+        getRange: () => ({ from: subDays(startOfToday(), 89), to: startOfToday() }),
+    },
+    {
+        label: "Últimos 12 meses",
+        getRange: () => ({ from: subMonths(startOfToday(), 12), to: startOfToday() }),
+    },
+    {
+        label: "Año en curso",
+        getRange: () => ({ from: startOfYear(startOfToday()), to: startOfToday() }),
+    },
+];
+const TODAY_PRESET = {
+    label: "Hoy",
+    getRange: () => ({ from: startOfToday(), to: startOfToday() }),
+};
+const DEFAULT_COMPARE_OPTIONS = [
+    { value: "previous-period", label: "Período anterior" },
+    { value: "previous-year", label: "Año anterior" },
+    { value: "custom", label: "Personalizado" },
+];
+function rangesEqual(a, b) {
+    if (!a?.from || !a?.to || !b?.from || !b?.to)
+        return false;
+    return isSameDay(a.from, b.from) && isSameDay(a.to, b.to);
+}
+function getPreviousPeriod(range) {
+    if (!range.from || !range.to)
+        return undefined;
+    const length = differenceInCalendarDays(range.to, range.from) + 1;
+    const to = subDays(range.from, 1);
+    return { from: subDays(to, length - 1), to };
+}
+function getPreviousYear(range) {
+    if (!range.from || !range.to)
+        return undefined;
+    return { from: subYears(range.from, 1), to: subYears(range.to, 1) };
+}
+function formatRange(range) {
+    if (!range?.from)
+        return "Seleccionar fechas";
+    if (!range.to || isSameDay(range.from, range.to)) {
+        return format(range.from, "d MMM yyyy", { locale: es });
+    }
+    return `${format(range.from, "d MMM yyyy", { locale: es })} – ${format(range.to, "d MMM yyyy", { locale: es })}`;
+}
+function formatTriggerLabel(range, presets) {
+    if (!range?.from || !range?.to)
+        return "Seleccionar fechas";
+    const preset = presets.find((p) => rangesEqual(p.getRange(), range));
+    if (preset)
+        return preset.label;
+    if (isSameDay(range.from, range.to))
+        return format(range.from, "d MMM yyyy", { locale: es });
+    const sameYear = range.from.getFullYear() === range.to.getFullYear();
+    return `${format(range.from, sameYear ? "d MMM" : "d MMM yyyy", { locale: es })} – ${format(range.to, "d MMM yyyy", { locale: es })}`;
+}
+function DateRangePicker(props) {
+    if (props.variant === "inline") {
+        return _jsx(DateRangePickerInline, { ...props });
+    }
+    return _jsx(DateRangePickerPopover, { ...props });
+}
+function DateRangePickerPopover({ value, defaultValue, onValueChange, compareEnabled, defaultCompareEnabled = false, onCompareEnabledChange, compareValue, onCompareValueChange, presets = DEFAULT_PRESETS, compareOptions = DEFAULT_COMPARE_OPTIONS, numberOfMonths = 2, align = "end", className, }) {
+    const [internalValue, setInternalValue] = React.useState(defaultValue ?? presets[3]?.getRange());
+    const appliedValue = value ?? internalValue;
+    const [internalCompareEnabled, setInternalCompareEnabled] = React.useState(defaultCompareEnabled);
+    const appliedCompareEnabled = compareEnabled ?? internalCompareEnabled;
+    const [internalCompareValue, setInternalCompareValue] = React.useState(() => (appliedValue ? getPreviousPeriod(appliedValue) : undefined));
+    const appliedCompareValue = compareValue ?? internalCompareValue;
+    const [compareType, setCompareType] = React.useState("previous-period");
+    const [open, setOpen] = React.useState(false);
+    const [draftValue, setDraftValue] = React.useState(appliedValue);
+    const [draftCompareEnabled, setDraftCompareEnabled] = React.useState(appliedCompareEnabled);
+    const [draftCompareType, setDraftCompareType] = React.useState(compareType);
+    const [customCompareValue, setCustomCompareValue] = React.useState(appliedCompareValue);
+    const [editingTarget, setEditingTarget] = React.useState("main");
+    const draftCompareValue = draftCompareType === "custom"
+        ? customCompareValue
+        : draftValue?.from && draftValue?.to
+            ? draftCompareType === "previous-period"
+                ? getPreviousPeriod(draftValue)
+                : getPreviousYear(draftValue)
+            : undefined;
+    function handleOpenChange(nextOpen) {
+        if (nextOpen) {
+            setDraftValue(appliedValue);
+            setDraftCompareEnabled(appliedCompareEnabled);
+            setDraftCompareType(compareType);
+            setCustomCompareValue(appliedCompareValue);
+            setEditingTarget("main");
+        }
+        setOpen(nextOpen);
+    }
+    function handlePresetClick(preset) {
+        setDraftValue(preset.getRange());
+        setEditingTarget("main");
+    }
+    function handleCompareTypeClick(type) {
+        if (type === "custom" && draftCompareType !== "custom") {
+            setCustomCompareValue(draftCompareValue);
+        }
+        setDraftCompareType(type);
+        setEditingTarget(type === "custom" ? "compare" : "main");
+    }
+    function handleApply() {
+        if (draftValue) {
+            setInternalValue(draftValue);
+            onValueChange?.(draftValue);
+        }
+        setInternalCompareEnabled(draftCompareEnabled);
+        onCompareEnabledChange?.(draftCompareEnabled);
+        setCompareType(draftCompareType);
+        const nextCompareValue = draftCompareEnabled ? draftCompareValue : undefined;
+        setInternalCompareValue(nextCompareValue);
+        onCompareValueChange?.(nextCompareValue);
+        setOpen(false);
+    }
+    const calendarSelected = editingTarget === "compare" ? draftCompareValue : draftValue;
+    const otherRange = editingTarget === "compare"
+        ? draftValue
+        : draftCompareEnabled
+            ? draftCompareValue
+            : undefined;
+    function handleCalendarSelect(range) {
+        if (editingTarget === "compare") {
+            setCustomCompareValue(range);
+        }
+        else {
+            setDraftValue(range);
+        }
+    }
+    return (_jsxs(Popover, { open: open, onOpenChange: handleOpenChange, children: [_jsxs(PopoverTrigger, { render: _jsx(Button, { variant: "outline", className: cn("gap-1.5", className) }), children: [_jsx(CalendarIcon, { "data-icon": "inline-start" }), formatTriggerLabel(appliedValue, presets), appliedCompareEnabled && (_jsx("span", { className: "size-1.5 shrink-0 rounded-full bg-primary", "aria-hidden": "true" })), _jsx(ChevronDownIcon, { "data-icon": "inline-end", className: "text-muted-foreground" })] }), _jsxs(PopoverContent, { align: align, className: "w-auto flex-row gap-0 p-0", children: [_jsxs("div", { className: "flex w-48 shrink-0 flex-col gap-0.5 p-2", children: [presets.map((preset) => (_jsx("button", { type: "button", "data-active": rangesEqual(draftValue, preset.getRange()), onClick: () => handlePresetClick(preset), className: cn("w-full rounded-md px-2.5 py-1.5 text-left text-sm text-foreground transition-colors hover:bg-muted", "data-[active=true]:bg-muted data-[active=true]:font-medium data-[active=true]:text-primary"), children: preset.label }, preset.label))), _jsx(Separator, { className: "my-2" }), _jsxs("div", { className: "flex items-center justify-between px-2.5 py-1.5", children: [_jsx("span", { className: "text-sm font-medium", children: "Comparar" }), _jsx(Switch, { checked: draftCompareEnabled, onCheckedChange: (checked) => {
+                                            setDraftCompareEnabled(checked);
+                                            setEditingTarget(checked && draftCompareType === "custom" ? "compare" : "main");
+                                        } })] }), draftCompareEnabled &&
+                                compareOptions.map((option) => (_jsx("button", { type: "button", "data-active": draftCompareType === option.value, onClick: () => handleCompareTypeClick(option.value), className: cn("w-full rounded-md px-2.5 py-1.5 text-left text-sm text-foreground transition-colors hover:bg-muted", "data-[active=true]:bg-muted data-[active=true]:font-medium data-[active=true]:text-primary"), children: option.label }, option.value)))] }), _jsx(Separator, { orientation: "vertical" }), _jsxs("div", { className: "flex flex-col gap-3 p-4", children: [_jsxs("div", { className: "flex flex-col gap-2 sm:flex-row", children: [_jsxs("button", { type: "button", onClick: () => setEditingTarget("main"), className: cn("flex-1 rounded-lg border border-border px-3 py-2 text-left transition-colors", editingTarget === "main" && "border-primary"), children: [_jsx("span", { className: "text-[0.7rem] font-medium tracking-wide text-muted-foreground uppercase", children: "Per\u00EDodo" }), _jsx("p", { className: cn("text-sm font-medium", editingTarget === "main" && "text-primary"), children: formatRange(draftValue) })] }), draftCompareEnabled && (_jsxs("button", { type: "button", disabled: draftCompareType !== "custom", onClick: () => draftCompareType === "custom" && setEditingTarget("compare"), className: cn("flex-1 rounded-lg border border-border px-3 py-2 text-left transition-colors", draftCompareType === "custom" && "cursor-pointer", editingTarget === "compare" && "border-primary"), children: [_jsx("span", { className: "text-[0.7rem] font-medium tracking-wide text-muted-foreground uppercase", children: "Comparar" }), _jsx("p", { className: cn("text-sm font-medium", editingTarget === "compare" && "text-primary"), children: formatRange(draftCompareValue) })] }))] }), _jsx(Calendar, { mode: "range", locale: es, numberOfMonths: numberOfMonths, selected: calendarSelected, onSelect: handleCalendarSelect, defaultMonth: (editingTarget === "compare" ? draftCompareValue?.from : draftValue?.from) ??
+                                    undefined, modifiers: otherRange?.from && otherRange?.to ? { compare: otherRange } : undefined, modifiersClassNames: { compare: "bg-chart-2/15" }, className: "w-fit p-0" }), _jsx(Separator, {}), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "ghost", onClick: () => setOpen(false), children: "Cancelar" }), _jsx(Button, { onClick: handleApply, children: "Aplicar" })] })] })] })] }));
+}
+function DateRangePickerInline({ value, defaultValue, onValueChange, presets = DEFAULT_PRESETS, className, }) {
+    const [internalValue, setInternalValue] = React.useState(defaultValue ?? presets[0]?.getRange());
+    const appliedValue = value ?? internalValue;
+    function commit(range) {
+        setInternalValue(range);
+        if (range)
+            onValueChange?.(range);
+    }
+    return (_jsx(ButtonGroup, { className: className, children: presets.map((preset) => {
+            const active = rangesEqual(appliedValue, preset.getRange());
+            return (_jsx(Button, { type: "button", variant: active ? "default" : "outline", onClick: () => commit(preset.getRange()), children: preset.label }, preset.label));
+        }) }));
+}
+export { DateRangePicker, DEFAULT_PRESETS, DEFAULT_COMPARE_OPTIONS, TODAY_PRESET, getPreviousPeriod, getPreviousYear, };

package/dist/components/epa/heatmap.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+type HeatmapNormalize = "row" | "column" | "global";
+type HeatmapLegend = {
+    low?: React.ReactNode;
+    high?: React.ReactNode;
+};
+type HeatmapProps = {
+    rowLabels: string[];
+    columnLabels: string[];
+    /** data[rowIndex][columnIndex]; null/undefined renders as a neutral empty cell */
+    data: (number | null | undefined)[][];
+    cornerLabel?: React.ReactNode;
+    formatValue?: (value: number) => string;
+    /** which slice of the data each cell's color is computed against (default: "column") */
+    normalize?: HeatmapNormalize;
+    /** pass false to hide the scale legend */
+    legend?: HeatmapLegend | false;
+    emptyLabel?: React.ReactNode;
+    className?: string;
+    cellClassName?: string;
+    onCellClick?: (value: number | null | undefined, rowIndex: number, columnIndex: number) => void;
+};
+declare function Heatmap({ rowLabels, columnLabels, data, cornerLabel, formatValue, normalize, legend, emptyLabel, className, cellClassName, onCellClick, }: HeatmapProps): React.JSX.Element;
+export { Heatmap };
+export type { HeatmapProps, HeatmapNormalize, HeatmapLegend };

package/dist/components/epa/heatmap.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "../../components/ui/table.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../components/ui/tooltip.js";
+const CELL_PADDING = "px-3 py-1.5";
+function heatBackground(t) {
+    const clamped = Math.min(1, Math.max(0, t));
+    const scaled = clamped * 4;
+    const index = Math.min(3, Math.floor(scaled));
+    const localT = scaled - index;
+    return `color-mix(in oklch, var(--heat-${index + 1}) ${(1 - localT) * 100}%, var(--heat-${index + 2}) ${localT * 100}%)`;
+}
+function useHeatmapRanges(data, normalize) {
+    return React.useMemo(() => {
+        const colCount = data[0]?.length ?? 0;
+        if (normalize === "global") {
+            const range = { min: Infinity, max: -Infinity };
+            for (const row of data) {
+                for (const value of row) {
+                    if (value == null)
+                        continue;
+                    if (value < range.min)
+                        range.min = value;
+                    if (value > range.max)
+                        range.max = value;
+                }
+            }
+            return () => range;
+        }
+        if (normalize === "row") {
+            const ranges = data.map((row) => {
+                const range = { min: Infinity, max: -Infinity };
+                for (const value of row) {
+                    if (value == null)
+                        continue;
+                    if (value < range.min)
+                        range.min = value;
+                    if (value > range.max)
+                        range.max = value;
+                }
+                return range;
+            });
+            return (r) => ranges[r];
+        }
+        const ranges = Array.from({ length: colCount }, () => ({
+            min: Infinity,
+            max: -Infinity,
+        }));
+        for (const row of data) {
+            row.forEach((value, c) => {
+                if (value == null)
+                    return;
+                if (value < ranges[c].min)
+                    ranges[c].min = value;
+                if (value > ranges[c].max)
+                    ranges[c].max = value;
+            });
+        }
+        return (r, c) => (normalize === "column" ? ranges[c] : ranges[r]);
+    }, [data, normalize]);
+}
+function Heatmap({ rowLabels, columnLabels, data, cornerLabel, formatValue = (value) => value.toLocaleString(), normalize = "column", legend = { low: "Bajo", high: "Alto" }, emptyLabel = "–", className, cellClassName, onCellClick, }) {
+    const getRange = useHeatmapRanges(data, normalize);
+    return (_jsxs("div", { className: cn("flex flex-col gap-3", className), children: [legend !== false && (_jsxs("div", { className: "flex items-center justify-end gap-2 text-xs text-muted-foreground", children: [_jsx("span", { children: legend.low ?? "Bajo" }), _jsx("div", { className: "h-2 w-24 rounded-full", style: {
+                            backgroundImage: "linear-gradient(in oklch to right, var(--heat-1), var(--heat-2), var(--heat-3), var(--heat-4), var(--heat-5))",
+                        }, "aria-hidden": "true" }), _jsx("span", { children: legend.high ?? "Alto" })] })), _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: cn("sticky left-0 z-10 bg-background", CELL_PADDING), children: cornerLabel }), columnLabels.map((label, c) => (_jsx(TableHead, { className: cn("text-right", CELL_PADDING), children: label }, c)))] }) }), _jsx(TableBody, { children: rowLabels.map((rowLabel, r) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: cn("sticky left-0 z-10 bg-background font-medium text-foreground", CELL_PADDING), children: rowLabel }), columnLabels.map((columnLabel, c) => {
+                                    const value = data[r]?.[c];
+                                    if (value == null) {
+                                        return (_jsx(TableCell, { className: cn("bg-muted/40 text-right text-muted-foreground tabular-nums", CELL_PADDING, cellClassName), children: emptyLabel }, c));
+                                    }
+                                    const { min, max } = getRange(r, c);
+                                    const t = max > min ? (value - min) / (max - min) : 0.5;
+                                    const display = formatValue(value);
+                                    return (_jsx(TableCell, { className: cn("p-0 text-right", cellClassName), style: { backgroundColor: heatBackground(t) }, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx("button", { type: "button", onClick: () => onCellClick?.(value, r, c) }), className: cn("block w-full bg-transparent text-right text-(--heat-ink) tabular-nums outline-none transition-[filter] hover:brightness-95 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", CELL_PADDING, onCellClick ? "cursor-pointer" : "cursor-default"), children: display }), _jsxs(TooltipContent, { children: [columnLabel, " \u00B7 ", rowLabel, ": ", display] })] }) }, c));
+                                })] }, r))) })] })] }));
+}
+export { Heatmap };

package/dist/components/epa/metric-card-group.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+type MetricCardGroupProps = {
+    onValueChange?: (value: string[]) => void;
+    /** Label for the control that activates every metric. Default: "Mostrar todo". */
+    selectAllLabel?: string;
+    /** Label for the control that clears the active set — the chart is allowed to end up empty. Default: "Ocultar todo". */
+    selectNoneLabel?: string;
+    "aria-label"?: string;
+    className?: string;
+    children: React.ReactNode;
+} & ({
+    value: string[];
+    defaultValue?: never;
+} | {
+    value?: undefined;
+    /**
+     * The metrics active on first render. Required — a KPI toggle group should
+     * always start with a deliberate set of series plotted, even though
+     * `selectNoneLabel` (or manual toggling) can clear it down to none afterward.
+     */
+    defaultValue: string[];
+});
+declare function MetricCardGroup({ value, defaultValue, onValueChange, selectAllLabel, selectNoneLabel, "aria-label": ariaLabel, className, children, }: MetricCardGroupProps): React.JSX.Element;
+type MetricCardProps = {
+    /** Key this card toggles in the group's active list — pass the same key as the chart series' dataKey. */
+    metricKey: string;
+    label: string;
+    value: React.ReactNode;
+    /** % change vs. the previous period; omit to hide the trend badge. */
+    delta?: number;
+    formatDelta?: (delta: number) => string;
+    /**
+     * The chart series color this metric drives when active, e.g. `"var(--chart-1)"`.
+     * Shown as the border/background accent and the leading legend dot while selected.
+     */
+    color: string;
+    className?: string;
+};
+declare function MetricCard({ metricKey, label, value, delta, formatDelta, color, className, }: MetricCardProps): React.JSX.Element;
+export { MetricCardGroup, MetricCard };
+export type { MetricCardGroupProps, MetricCardProps };

package/dist/components/epa/metric-card-group.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ArrowDownRightIcon, ArrowUpRightIcon } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Badge } from "../../components/ui/badge.js";
+import { Button } from "../../components/ui/button.js";
+import { ButtonGroup } from "../../components/ui/button-group.js";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../components/ui/card.js";
+const MetricCardGroupContext = React.createContext(null);
+function useMetricCardGroupContext(metricKey) {
+    const context = React.useContext(MetricCardGroupContext);
+    if (!context) {
+        throw new Error("MetricCard must be used within a MetricCardGroup");
+    }
+    return { selected: context.active.includes(metricKey), toggle: () => context.toggle(metricKey) };
+}
+function getMetricKeys(children) {
+    return React.Children.toArray(children)
+        .filter(React.isValidElement)
+        .map((child) => child.props.metricKey)
+        .filter((key) => typeof key === "string");
+}
+function MetricCardGroup({ value, defaultValue, onValueChange, selectAllLabel = "Mostrar todo", selectNoneLabel = "Ocultar todo", "aria-label": ariaLabel, className, children, }) {
+    const [internalValue, setInternalValue] = React.useState(defaultValue ?? value ?? []);
+    const active = value ?? internalValue;
+    const allKeys = React.useMemo(() => getMetricKeys(children), [children]);
+    const setActive = React.useCallback((next) => {
+        if (value === undefined)
+            setInternalValue(next);
+        onValueChange?.(next);
+    }, [onValueChange, value]);
+    const toggle = React.useCallback((key) => {
+        setActive(active.includes(key) ? active.filter((k) => k !== key) : [...active, key]);
+    }, [active, setActive]);
+    return (_jsx(MetricCardGroupContext.Provider, { value: { active, toggle }, children: _jsxs("div", { className: cn("@container/metric-cards flex flex-col gap-2", className), children: [_jsx("div", { className: "flex justify-end", children: _jsxs(ButtonGroup, { children: [_jsx(Button, { variant: "outline", size: "xs", onClick: () => setActive(allKeys), disabled: allKeys.every((key) => active.includes(key)), children: selectAllLabel }), _jsx(Button, { variant: "outline", size: "xs", onClick: () => setActive([]), disabled: active.length === 0, children: selectNoneLabel })] }) }), _jsx("div", { role: "group", "aria-label": ariaLabel, className: "grid grid-cols-2 gap-3 @lg/metric-cards:grid-cols-3 @3xl/metric-cards:grid-cols-5", children: children })] }) }));
+}
+function defaultFormatDelta(delta) {
+    return `${delta > 0 ? "+" : ""}${delta.toFixed(1)}%`;
+}
+function MetricCard({ metricKey, label, value, delta, formatDelta = defaultFormatDelta, color, className, }) {
+    const { selected, toggle } = useMetricCardGroupContext(metricKey);
+    const isPositive = delta != null && delta >= 0;
+    const TrendIcon = isPositive ? ArrowUpRightIcon : ArrowDownRightIcon;
+    return (_jsxs(Card, { render: _jsx("button", { type: "button" }), size: "sm", "aria-pressed": selected, "aria-label": `${label}, ${selected ? "visible" : "oculto"} en el gráfico`, onClick: toggle, style: { "--selected-color": color }, className: cn("min-h-24 border border-transparent text-left outline-none transition-colors hover:bg-muted/40 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50", "aria-pressed:border-(--selected-color) aria-pressed:bg-(--selected-color)/8 aria-pressed:ring-1 aria-pressed:ring-(--selected-color)/25 aria-pressed:hover:bg-(--selected-color)/12", className), children: [_jsx(CardHeader, { children: _jsxs(CardDescription, { className: "flex min-w-0 items-center gap-1.5 text-xs font-medium tracking-wide text-muted-foreground uppercase", children: [selected && (_jsx("span", { "aria-hidden": "true", className: "size-1.5 shrink-0 rounded-full bg-(--selected-color)" })), _jsx("span", { className: "truncate", children: label })] }) }), _jsx(CardContent, { className: "flex flex-1 flex-col justify-center", children: _jsx(CardTitle, { className: cn("truncate text-2xl font-semibold tabular-nums", selected && "text-(--selected-color)"), children: value }) }), delta != null && (_jsx("div", { className: "min-w-0 px-(--card-spacing)", children: _jsxs(Badge, { variant: isPositive ? "success" : "destructive", className: "gap-0.5", children: [_jsx(TrendIcon, { "data-icon": "inline-start" }), formatDelta(delta)] }) }))] }));
+}
+export { MetricCardGroup, MetricCard };

package/dist/components/ui/accordion.d.ts

@@ -0,0 +1,6 @@
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+declare function Accordion({ className, ...props }: AccordionPrimitive.Root.Props): import("react").JSX.Element;
+declare function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props): import("react").JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props): import("react").JSX.Element;
+declare function AccordionContent({ className, children, ...props }: AccordionPrimitive.Panel.Props): import("react").JSX.Element;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };