@nadicodeai/ui 7.1.3 → 8.0.0

package/AGENTS.md

@@ -21,10 +21,3 @@ When a brand-icon or model-maker allow-list changes, run
 `generate:brand-icons`.
 Use current shadcn or assistant-ui discovery for their components;
 `--overwrite` requires authorization to replace the affected component.
-
-Charts are shadcn charts: `src/components/chart.tsx` is shadcn's `chart` over
-Recharts, and the `chart-*.tsx` kit is built on it. A surface takes its chart
-from this kit. When the kit lacks one, look it up in the shadcn registry
-(`npx shadcn@latest search @shadcn -q chart`, run here) and add it to the kit
-with NadicodeAI tokens before any app draws its own. `recharts` is a dependency
-of this package only.

package/dist/components/agent-card.js

@@ -10,6 +10,6 @@ function AgentCard({ action, className, job, meta, name, status, visual, ...prop
     const hasMeta = hasSlotContent(meta);
     const hasAction = hasSlotContent(action);
     const hasFooter = hasStatus || hasMeta || hasAction;
-    return (_jsxs(Card, { className: cn("h-full", className), ...props, children: [_jsxs(CardHeader, { className: "relative min-h-40 pr-32", children: [_jsx(CardTitle, { className: "text-lg", children: name }), _jsx(CardDescription, { className: "max-w-sm leading-6", children: job }), _jsx("div", { className: "absolute top-5 right-5 size-24 overflow-hidden rounded-xl", "data-slot": "agent-card-visual", children: visual })] }), hasFooter ? (_jsxs(CardContent, { className: "mt-auto grid gap-5", children: [_jsx(Separator, {}), _jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-3 text-xs text-muted-foreground", children: [hasStatus ? _jsx("div", { "data-slot": "agent-card-status", children: status }) : null, hasMeta ? (_jsx("div", { className: "min-w-0 flex-1", "data-slot": "agent-card-meta", children: meta })) : null, hasAction ? (_jsx("div", { className: "ml-auto", "data-slot": "agent-card-action", children: action })) : null] })] })) : null] }));
+    return (_jsxs(Card, { className: cn("h-full", className), ...props, children: [_jsxs(CardHeader, { className: "relative min-h-40 pr-32", children: [_jsx(CardTitle, { className: "text-lg", children: name }), _jsx(CardDescription, { className: "max-w-sm leading-6", children: job }), _jsx("div", { className: "absolute top-5 right-5 size-24 overflow-hidden rounded-md", "data-slot": "agent-card-visual", children: visual })] }), hasFooter ? (_jsxs(CardContent, { className: "mt-auto grid gap-5", children: [_jsx(Separator, {}), _jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-3 text-xs text-muted-foreground", children: [hasStatus ? _jsx("div", { "data-slot": "agent-card-status", children: status }) : null, hasMeta ? (_jsx("div", { className: "min-w-0 flex-1", "data-slot": "agent-card-meta", children: meta })) : null, hasAction ? (_jsx("div", { className: "ml-auto", "data-slot": "agent-card-action", children: action })) : null] })] })) : null] }));
 }
 export { AgentCard };

package/dist/components/agent-visual.js

@@ -58,6 +58,6 @@ function AgentVisual({ className, decorative = true, label, presentation = "card
         return () => observer.disconnect();
     }, []);
     const hasAmbientRenderer = canAnimate && isInViewport;
-    return (_jsxs("div", { "aria-hidden": decorative || undefined, "aria-label": decorative ? undefined : label, className: cn("relative isolate size-full overflow-hidden rounded-xl bg-nc-identity-ink", presentation === "card" && "min-h-20", presentation === "detail" && "min-h-48", className), "data-agent-visual-motion": hasAmbientRenderer ? "ambient" : "static", "data-agent-visual-presentation": presentation, "data-agent-visual-recipe": recipe, ref: hostRef, role: decorative ? undefined : "img", children: [_jsx(AgentVisualPoster, { recipe: recipe }), hasAmbientRenderer && hostRef.current ? (_jsx("div", { "aria-hidden": "true", className: cn("absolute inset-0 opacity-0 transition-opacity duration-[var(--nc-duration-close)] ease-[var(--nc-ease-out-strong)]", rendererReady && "opacity-100"), "data-agent-visual-renderer": "paper-metaballs", children: _jsx(AgentVisualErrorBoundary, { onUnavailable: handleUnavailable, children: _jsx(Suspense, { fallback: null, children: _jsx(LazyAgentVisualRenderer, { host: hostRef.current, onReady: handleReady, onUnavailable: handleUnavailable, recipe: recipe }) }) }) })) : null] }));
+    return (_jsxs("div", { "aria-hidden": decorative || undefined, "aria-label": decorative ? undefined : label, className: cn("relative isolate size-full overflow-hidden rounded-md bg-nc-identity-ink", presentation === "card" && "min-h-20", presentation === "detail" && "min-h-48", className), "data-agent-visual-motion": hasAmbientRenderer ? "ambient" : "static", "data-agent-visual-presentation": presentation, "data-agent-visual-recipe": recipe, ref: hostRef, role: decorative ? undefined : "img", children: [_jsx(AgentVisualPoster, { recipe: recipe }), hasAmbientRenderer && hostRef.current ? (_jsx("div", { "aria-hidden": "true", className: cn("absolute inset-0 opacity-0 transition-opacity duration-[var(--nc-duration-close)] ease-[var(--nc-ease-out-strong)]", rendererReady && "opacity-100"), "data-agent-visual-renderer": "paper-metaballs", children: _jsx(AgentVisualErrorBoundary, { onUnavailable: handleUnavailable, children: _jsx(Suspense, { fallback: null, children: _jsx(LazyAgentVisualRenderer, { host: hostRef.current, onReady: handleReady, onUnavailable: handleUnavailable, recipe: recipe }) }) }) })) : null] }));
 }
 export { AgentVisual };

package/dist/components/alert-dialog.js

@@ -17,7 +17,7 @@ function AlertDialogOverlay({ className, ...props }) {
     return (_jsx(AlertDialogPrimitive.Backdrop, { "data-slot": "alert-dialog-overlay", className: cn("fixed inset-0 isolate z-50 bg-scrim/scrim", overlayBackdropMotion, className), ...props }));
 }
 function AlertDialogContent({ className, size = "default", ...props }) {
-    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Popup, { "data-slot": "alert-dialog-content", "data-size": size, className: cn("group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-nadicode-md rounded-3xl border-0 bg-popover p-nadicode-lg text-popover-foreground nc-elevation-modal outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm", modalOverlayMotion, className), ...props })] }));
+    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Popup, { "data-slot": "alert-dialog-content", "data-size": size, className: cn("group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-nadicode-md rounded-md border-0 bg-popover p-nadicode-lg text-popover-foreground nc-elevation-modal outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm", modalOverlayMotion, className), ...props })] }));
 }
 function AlertDialogHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "alert-dialog-header", className: cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className), ...props }));

package/dist/components/automation-section.js

@@ -47,7 +47,7 @@ const environmentStateMeta = {
     invalid: { label: "Needs review", variant: "destructive" },
 };
 function AutomationSection({ title, description, actions, automations = [], emptyTitle = "No automations configured", emptyDescription = "Add automation rows from the consuming app when there is work to run.", onAutomationEnabledChange, children, className, ...props }) {
-    return (_jsxs("section", { "data-slot": "automation-section", className: cn("grid gap-5 rounded-lg border bg-background p-5", className), ...props, children: [(title || description || actions) && (_jsxs("div", { "data-slot": "automation-section-header", className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { className: "grid gap-1", children: [title && (_jsx("h2", { "data-slot": "automation-section-title", className: "text-base font-semibold", children: title })), description && (_jsx("p", { "data-slot": "automation-section-description", className: "text-sm text-muted-foreground", children: description }))] }), actions && _jsx("div", { "data-slot": "automation-section-actions", children: actions })] })), automations.length > 0 ? (_jsx(ItemGroup, { "data-slot": "automation-section-items", className: "gap-2", children: automations.map((automation) => {
+    return (_jsxs("section", { "data-slot": "automation-section", className: cn("grid gap-5 rounded-md border bg-background p-5", className), ...props, children: [(title || description || actions) && (_jsxs("div", { "data-slot": "automation-section-header", className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { className: "grid gap-1", children: [title && (_jsx("h2", { "data-slot": "automation-section-title", className: "text-base font-semibold", children: title })), description && (_jsx("p", { "data-slot": "automation-section-description", className: "text-sm text-muted-foreground", children: description }))] }), actions && _jsx("div", { "data-slot": "automation-section-actions", children: actions })] })), automations.length > 0 ? (_jsx(ItemGroup, { "data-slot": "automation-section-items", className: "gap-2", children: automations.map((automation) => {
                     const status = automation.status ?? "ready";
                     return (_jsxs(Item, { role: "listitem", "data-slot": "automation-section-item", "data-status": status, "data-enabled": automation.enabled, "data-disabled": automation.disabled ? true : undefined, variant: "outline", children: [_jsx(ItemMedia, { variant: "icon", "aria-hidden": "true", children: automationStatusMeta[status].icon }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: automation.title }), automation.description && (_jsx(ItemDescription, { children: automation.description })), automation.meta && (_jsx("div", { className: "text-sm text-muted-foreground", children: automation.meta }))] }), _jsxs(ItemActions, { children: [_jsx(Badge, { variant: automationStatusMeta[status].variant, children: automationStatusMeta[status].label }), _jsx(Switch, { "aria-label": automation.toggleLabel ?? "Toggle automation", checked: Boolean(automation.enabled), disabled: automation.disabled, onCheckedChange: (enabled) => onAutomationEnabledChange?.(automation.id, enabled) }), automation.actions] })] }, automation.id));
                 }) })) : (_jsx(FeedbackState, { "data-slot": "automation-section-empty", status: "empty", title: emptyTitle, description: emptyDescription, compact: true, className: "rounded-md" })), children] }));

package/dist/components/card-marketing.d.ts

@@ -13,7 +13,7 @@ import * as React from "react";
  * square top corners to the card radius (the card owns the outer radius; the media
  * never re-rounds it). No other layer repeats either coordinate.
  *
- * `size="lg"` steps up to `rounded-lg` + larger padding; `surface="soft"` uses the
+ * `size="lg"` steps up to larger padding; `surface="soft"` uses the
  * `canvas-soft` fill. Server-renderable: the media-present padding compression is a
  * `:has()` variant and the title/media sizing is driven by `data-size` descendant
  * selectors on the parent — no client context. Token-only; no `dark:` styling.

package/dist/components/card-marketing.js

@@ -14,20 +14,20 @@ import { cn } from "../lib/utils.js";
  * square top corners to the card radius (the card owns the outer radius; the media
  * never re-rounds it). No other layer repeats either coordinate.
  *
- * `size="lg"` steps up to `rounded-lg` + larger padding; `surface="soft"` uses the
+ * `size="lg"` steps up to larger padding; `surface="soft"` uses the
  * `canvas-soft` fill. Server-renderable: the media-present padding compression is a
  * `:has()` variant and the title/media sizing is driven by `data-size` descendant
  * selectors on the parent — no client context. Token-only; no `dark:` styling.
  */
 function CardMarketing({ className, size = "default", surface = "canvas", ...props }) {
-    return (_jsx("div", { "data-slot": "card-marketing", "data-size": size, "data-surface": surface, className: cn("grid content-start overflow-hidden border border-border text-foreground", surface === "soft" ? "bg-[var(--nc-canvas-soft)]" : "bg-card", size === "default" && [
-            "gap-3 rounded-md p-6",
+    return (_jsx("div", { "data-slot": "card-marketing", "data-size": size, "data-surface": surface, className: cn("grid content-start overflow-hidden rounded-md border border-border text-foreground", surface === "soft" ? "bg-[var(--nc-canvas-soft)]" : "bg-card", size === "default" && [
+            "gap-3 p-6",
             // media present -> compress padding; the media insets follow (below).
             "has-[[data-slot=card-marketing-media]]:gap-3 has-[[data-slot=card-marketing-media]]:p-4",
             "[&_[data-slot=card-marketing-title]]:text-xl",
             "[&_[data-slot=card-marketing-media]]:-mx-4 [&_[data-slot=card-marketing-media]]:-mt-4 [&_[data-slot=card-marketing-media]]:mb-1",
         ], size === "lg" && [
-            "gap-4 rounded-lg p-8",
+            "gap-4 p-8",
             "has-[[data-slot=card-marketing-media]]:p-6",
             "[&_[data-slot=card-marketing-title]]:text-2xl",
             "[&_[data-slot=card-marketing-media]]:-mx-6 [&_[data-slot=card-marketing-media]]:-mt-6 [&_[data-slot=card-marketing-media]]:mb-1.5",

package/dist/components/card.js

@@ -5,8 +5,8 @@ import { cn } from "../lib/utils.js";
 function Card({ className, render, size = "default", surface = "resting", variant = "default", ...props }) {
     const structure = cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden bg-card py-(--card-spacing) text-sm text-card-foreground [--card-spacing:var(--spacing-nadicode-lg)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:var(--spacing-nadicode-md)] data-[size=sm]:has-data-[slot=card-footer]:pb-0", variant === "interactive" && "cursor-pointer", variant === "link" && "nc-transition-paint");
     const surfaceClassName = surface === "outlined"
-        ? cn(structure, "rounded-lg border border-border", className)
-        : cn(structure, "rounded-3xl border-0 *:[img:first-child]:rounded-t-3xl *:[img:last-child]:rounded-b-3xl", surface === "resting" && "nc-elevation-resting", surface === "raised" && "nc-elevation-raised", className);
+        ? cn(structure, "rounded-md border border-border", className)
+        : cn(structure, "rounded-md border-0 *:[img:first-child]:rounded-t-md *:[img:last-child]:rounded-b-md", surface === "resting" && "nc-elevation-resting", surface === "raised" && "nc-elevation-raised", className);
     return useRender({
         defaultTagName: "div",
         props: mergeProps({ className: surfaceClassName }, props),
@@ -15,7 +15,7 @@ function Card({ className, render, size = "default", surface = "resting", varian
     });
 }
 function CardHeader({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card-header", className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-3xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)", className), ...props }));
+    return (_jsx("div", { "data-slot": "card-header", className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-md px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)", className), ...props }));
 }
 function CardTitle({ className, focusTarget = false, ...props }) {
     return (_jsx("div", { "data-slot": "card-title", "data-focus-target": focusTarget || undefined, className: cn("text-base font-medium group-data-[size=sm]/card:text-sm", focusTarget && "rounded-sm", className), ...props }));

package/dist/components/chart-area-stacked.d.ts

@@ -0,0 +1,4 @@
+import { type ChartCardProps } from "./chart-card.js";
+declare function ChartAreaStacked({ title, description, action, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter, axisFormatter, otherLabel, emptyState, size, className, }: ChartCardProps): import("react").JSX.Element;
+export { ChartAreaStacked };
+//# sourceMappingURL=chart-area-stacked.d.ts.map

package/dist/components/chart-area-stacked.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-area-stacked.d.ts","sourceRoot":"","sources":["../../src/components/chart-area-stacked.tsx"],"names":[],"mappings":"AAcA,OAAO,EAOL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAGjC,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,WAAW,EACX,MAAM,EACN,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,cAAc,EACd,cAAsC,EACtC,aAAa,EACb,UAAoB,EACpB,UAAU,EACV,IAAgB,EAChB,SAAS,GACV,EAAE,cAAc,+BAwEhB;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/chart-area-stacked.js

@@ -0,0 +1,24 @@
+// Pulled from the shadcn registry item `chart-area-stacked`
+// (https://ui.shadcn.com/r/styles/new-york-v4/chart-area-stacked.json).
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from "./chart.js";
+import { CHART_Y_AXIS_TICK_COUNT, niceAxisTicks, stackedAxisMax } from "./chart-axis.js";
+import { CHART_LEGEND_CLASS, ChartCard, chartPlotClassName, chartSeriesConfig, defaultValueFormatter, foldOtherSeries, } from "./chart-card.js";
+import { entityColor } from "./chart-entity-colors.js";
+function ChartAreaStacked({ title, description, action, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter = defaultValueFormatter, axisFormatter, otherLabel = "Other", emptyState, size = "default", className, }) {
+    const folded = foldOtherSeries(series, data, entityColorMap, otherLabel);
+    const chartConfig = chartSeriesConfig(folded.series, entityColorMap);
+    const domainMax = stackedAxisMax(folded.data, folded.series.map((entry) => entry.id));
+    return (_jsx(ChartCard, { title: title, description: description, action: action, footer: footer, ...(headingLevel ? { headingLevel } : {}), className: className, children: (titleId) => emptyState && data.length === 0 ? (emptyState) : (_jsx(ChartContainer, { config: chartConfig, className: chartPlotClassName(size), children: _jsxs(AreaChart, { accessibilityLayer: true, "aria-labelledby": titleId, data: folded.data, margin: {
+                    left: 12,
+                    right: 12,
+                }, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: xKey, tickLine: false, axisLine: false, tickMargin: 8 }), _jsx(YAxis, { width: "auto", tickLine: false, axisLine: false, tickMargin: 8, tickCount: CHART_Y_AXIS_TICK_COUNT, ...(domainMax === undefined
+                            ? {}
+                            : {
+                                domain: [0, domainMax],
+                                ticks: niceAxisTicks(domainMax),
+                            }), tickFormatter: (value) => (axisFormatter ?? valueFormatter)(Number(value)) }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { indicator: "line", valueFormatter: valueFormatter }) }), _jsx(ChartLegend, { itemSorter: null, content: _jsx(ChartLegendContent, { className: CHART_LEGEND_CLASS }) }), folded.series.map((entry) => (_jsx(Area, { dataKey: entry.id, type: "natural", fill: entityColor(entityColorMap, entry.id), fillOpacity: 0.4, stroke: entityColor(entityColorMap, entry.id), stackId: "a" }, entry.id)))] }) })) }));
+}
+export { ChartAreaStacked };

package/dist/components/chart-axis.d.ts

@@ -0,0 +1,38 @@
+/**
+ * chart-axis — the kit's one axis deviation from the stock shadcn chart blocks.
+ *
+ * Left to itself Recharts divides the data's own maximum by its tick count,
+ * which produces steps of whatever the data happens to reach: one console chart
+ * read $0/$5/$10 while the chart beside it read EUR0/9/18/27/36, and the two
+ * stopped sharing a numeric register. Every chart in this kit therefore draws a
+ * y axis of five ticks whose maximum is rounded up to a step a reader counts
+ * in: 1, 2, 2.5, 5 or 10 per order of magnitude.
+ */
+/** Ticks the y axis draws, ends included. */
+declare const CHART_Y_AXIS_TICK_COUNT = 5;
+declare function niceStep(rawStep: number): number;
+/**
+ * Rounds a raw maximum up to a whole number of nice steps. `undefined` when
+ * there is nothing to bound, so the axis falls back to Recharts' own domain
+ * rather than pinning itself to zero.
+ */
+declare function niceAxisMax(max: number): number | undefined;
+/**
+ * The ticks for a domain `niceAxisMax` built: that maximum is four nice steps, so
+ * the five ticks land on those steps exactly. Handing them to the axis is what
+ * keeps Recharts from choosing its own count and putting a rounded label on an
+ * unrounded position (a tick at 6.67 reading "$6").
+ */
+declare function niceAxisTicks(max: number | undefined): number[] | undefined;
+type AxisDatum = Record<string, number | string>;
+/** The tallest stacked column across the data, as a nice axis maximum. */
+declare function stackedAxisMax(data: readonly AxisDatum[], keys: readonly string[]): number | undefined;
+/**
+ * The largest single value across the keys, as a nice axis maximum. Grouped
+ * bars bound one value rather than a column's sum. A negative value returns
+ * `undefined`: a diverging read fits its own domain instead of being clipped to
+ * a zero-based one.
+ */
+declare function seriesAxisMax(data: readonly AxisDatum[], keys: readonly string[]): number | undefined;
+export { CHART_Y_AXIS_TICK_COUNT, niceAxisMax, niceAxisTicks, niceStep, seriesAxisMax, stackedAxisMax, };
+//# sourceMappingURL=chart-axis.d.ts.map

package/dist/components/chart-axis.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-axis.d.ts","sourceRoot":"","sources":["../../src/components/chart-axis.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,6CAA6C;AAC7C,QAAA,MAAM,uBAAuB,IAAI,CAAC;AAKlC,iBAAS,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAMzC;AAED;;;;GAIG;AACH,iBAAS,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAIpD;AAED;;;;;GAKG;AACH,iBAAS,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,EAAE,GAAG,SAAS,CAOpE;AAED,KAAK,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AAEjD,0EAA0E;AAC1E,iBAAS,cAAc,CAAC,IAAI,EAAE,SAAS,SAAS,EAAE,EAAE,IAAI,EAAE,SAAS,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,CAW/F;AAED;;;;;GAKG;AACH,iBAAS,aAAa,CAAC,IAAI,EAAE,SAAS,SAAS,EAAE,EAAE,IAAI,EAAE,SAAS,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,CAW9F;AAED,OAAO,EACL,uBAAuB,EACvB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,aAAa,EACb,cAAc,GACf,CAAC"}

package/dist/components/chart-axis.js

@@ -0,0 +1,83 @@
+/**
+ * chart-axis — the kit's one axis deviation from the stock shadcn chart blocks.
+ *
+ * Left to itself Recharts divides the data's own maximum by its tick count,
+ * which produces steps of whatever the data happens to reach: one console chart
+ * read $0/$5/$10 while the chart beside it read EUR0/9/18/27/36, and the two
+ * stopped sharing a numeric register. Every chart in this kit therefore draws a
+ * y axis of five ticks whose maximum is rounded up to a step a reader counts
+ * in: 1, 2, 2.5, 5 or 10 per order of magnitude.
+ */
+/** Ticks the y axis draws, ends included. */
+const CHART_Y_AXIS_TICK_COUNT = 5;
+/** The steps a reader counts in, per order of magnitude. */
+const NICE_STEP_MULTIPLES = [1, 2, 2.5, 5, 10];
+function niceStep(rawStep) {
+    if (!Number.isFinite(rawStep) || rawStep <= 0)
+        return 1;
+    const magnitude = 10 ** Math.floor(Math.log10(rawStep));
+    const normalized = rawStep / magnitude;
+    const multiple = NICE_STEP_MULTIPLES.find((candidate) => normalized <= candidate) ?? 10;
+    return multiple * magnitude;
+}
+/**
+ * Rounds a raw maximum up to a whole number of nice steps. `undefined` when
+ * there is nothing to bound, so the axis falls back to Recharts' own domain
+ * rather than pinning itself to zero.
+ */
+function niceAxisMax(max) {
+    if (!Number.isFinite(max) || max <= 0)
+        return undefined;
+    const step = niceStep(max / (CHART_Y_AXIS_TICK_COUNT - 1));
+    return step * (CHART_Y_AXIS_TICK_COUNT - 1);
+}
+/**
+ * The ticks for a domain `niceAxisMax` built: that maximum is four nice steps, so
+ * the five ticks land on those steps exactly. Handing them to the axis is what
+ * keeps Recharts from choosing its own count and putting a rounded label on an
+ * unrounded position (a tick at 6.67 reading "$6").
+ */
+function niceAxisTicks(max) {
+    if (max === undefined)
+        return undefined;
+    const intervals = CHART_Y_AXIS_TICK_COUNT - 1;
+    const step = max / intervals;
+    return Array.from({ length: CHART_Y_AXIS_TICK_COUNT }, (_unused, index) => Number((step * index).toPrecision(12)));
+}
+/** The tallest stacked column across the data, as a nice axis maximum. */
+function stackedAxisMax(data, keys) {
+    let max = 0;
+    for (const datum of data) {
+        let total = 0;
+        for (const key of keys) {
+            const value = datum[key];
+            if (typeof value === "number" && Number.isFinite(value))
+                total += value;
+        }
+        if (total > max)
+            max = total;
+    }
+    return niceAxisMax(max);
+}
+/**
+ * The largest single value across the keys, as a nice axis maximum. Grouped
+ * bars bound one value rather than a column's sum. A negative value returns
+ * `undefined`: a diverging read fits its own domain instead of being clipped to
+ * a zero-based one.
+ */
+function seriesAxisMax(data, keys) {
+    let max = 0;
+    for (const datum of data) {
+        for (const key of keys) {
+            const value = datum[key];
+            if (typeof value !== "number" || !Number.isFinite(value))
+                continue;
+            if (value < 0)
+                return undefined;
+            if (value > max)
+                max = value;
+        }
+    }
+    return niceAxisMax(max);
+}
+export { CHART_Y_AXIS_TICK_COUNT, niceAxisMax, niceAxisTicks, niceStep, seriesAxisMax, stackedAxisMax, };

package/dist/components/chart-bar-multiple.d.ts

@@ -0,0 +1,9 @@
+import { type ChartCardProps } from "./chart-card.js";
+/**
+ * Grouped bars: two or more measures side by side per period, on ONE axis in
+ * one unit. A rate over those measures (a margin percentage) is a KPI card, not
+ * a second axis on this plot.
+ */
+declare function ChartBarMultiple({ title, description, action, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter, axisFormatter, otherLabel, emptyState, size, className, }: ChartCardProps): import("react").JSX.Element;
+export { ChartBarMultiple };
+//# sourceMappingURL=chart-bar-multiple.d.ts.map

package/dist/components/chart-bar-multiple.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-bar-multiple.d.ts","sourceRoot":"","sources":["../../src/components/chart-bar-multiple.tsx"],"names":[],"mappings":"AAcA,OAAO,EAOL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAGjC;;;;GAIG;AACH,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,WAAW,EACX,MAAM,EACN,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,cAAc,EACd,cAAsC,EACtC,aAAa,EACb,UAAoB,EACpB,UAAU,EACV,IAAgB,EAChB,SAAS,GACV,EAAE,cAAc,+BA8DhB;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/chart-bar-multiple.js

@@ -0,0 +1,26 @@
+// Pulled from the shadcn registry item `chart-bar-multiple`
+// (https://ui.shadcn.com/r/styles/new-york-v4/chart-bar-multiple.json).
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from "./chart.js";
+import { CHART_Y_AXIS_TICK_COUNT, niceAxisTicks, seriesAxisMax } from "./chart-axis.js";
+import { CHART_LEGEND_CLASS, ChartCard, chartPlotClassName, chartSeriesConfig, defaultValueFormatter, foldOtherSeries, } from "./chart-card.js";
+import { entityColor } from "./chart-entity-colors.js";
+/**
+ * Grouped bars: two or more measures side by side per period, on ONE axis in
+ * one unit. A rate over those measures (a margin percentage) is a KPI card, not
+ * a second axis on this plot.
+ */
+function ChartBarMultiple({ title, description, action, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter = defaultValueFormatter, axisFormatter, otherLabel = "Other", emptyState, size = "default", className, }) {
+    const folded = foldOtherSeries(series, data, entityColorMap, otherLabel);
+    const chartConfig = chartSeriesConfig(folded.series, entityColorMap);
+    const domainMax = seriesAxisMax(folded.data, folded.series.map((entry) => entry.id));
+    return (_jsx(ChartCard, { title: title, description: description, action: action, footer: footer, ...(headingLevel ? { headingLevel } : {}), className: className, children: (titleId) => emptyState && data.length === 0 ? (emptyState) : (_jsx(ChartContainer, { config: chartConfig, className: chartPlotClassName(size), children: _jsxs(BarChart, { accessibilityLayer: true, "aria-labelledby": titleId, data: folded.data, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: xKey, tickLine: false, tickMargin: 10, axisLine: false }), _jsx(YAxis, { width: "auto", tickLine: false, axisLine: false, tickMargin: 8, tickCount: CHART_Y_AXIS_TICK_COUNT, ...(domainMax === undefined
+                            ? {}
+                            : {
+                                domain: [0, domainMax],
+                                ticks: niceAxisTicks(domainMax),
+                            }), tickFormatter: (value) => (axisFormatter ?? valueFormatter)(Number(value)) }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { indicator: "line", valueFormatter: valueFormatter }) }), _jsx(ChartLegend, { itemSorter: null, content: _jsx(ChartLegendContent, { className: CHART_LEGEND_CLASS }) }), folded.series.map((entry) => (_jsx(Bar, { dataKey: entry.id, fill: entityColor(entityColorMap, entry.id), radius: 4, maxBarSize: 48 }, entry.id)))] }) })) }));
+}
+export { ChartBarMultiple };

package/dist/components/chart-bar-stacked.d.ts

@@ -0,0 +1,10 @@
+import { type ChartCardProps } from "./chart-card.js";
+declare function ChartBarStacked({ title, description, action, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter, axisFormatter, otherLabel, emptyState, size, share, className, }: ChartCardProps & {
+    /**
+     * One bar across the card, each entity a segment of 100%: the share of a
+     * total with no time axis. `data` is then a single row keyed by series id.
+     */
+    share?: boolean;
+}): import("react").JSX.Element;
+export { ChartBarStacked };
+//# sourceMappingURL=chart-bar-stacked.d.ts.map

package/dist/components/chart-bar-stacked.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-bar-stacked.d.ts","sourceRoot":"","sources":["../../src/components/chart-bar-stacked.tsx"],"names":[],"mappings":"AAcA,OAAO,EAOL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAmBjC,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,WAAW,EACX,MAAM,EACN,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,cAAc,EACd,cAAsC,EACtC,aAAa,EACb,UAAoB,EACpB,UAAU,EACV,IAAgB,EAChB,KAAa,EACb,SAAS,GACV,EAAE,cAAc,GAAG;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,+BA8FA;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/chart-bar-stacked.js

@@ -0,0 +1,41 @@
+// Pulled from the shadcn registry item `chart-bar-stacked`
+// (https://ui.shadcn.com/r/styles/new-york-v4/chart-bar-stacked.json).
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from "./chart.js";
+import { CHART_Y_AXIS_TICK_COUNT, niceAxisTicks, stackedAxisMax } from "./chart-axis.js";
+import { CHART_LEGEND_CLASS, ChartCard, chartPlotClassName, chartSeriesConfig, defaultValueFormatter, foldOtherSeries, } from "./chart-card.js";
+import { entityColor } from "./chart-entity-colors.js";
+/** Stock stacked-bar corner radius: the bottom bar rounds down, the top bar up. */
+function stackRadius(index, count) {
+    if (count === 1)
+        return [4, 4, 4, 4];
+    if (index === 0)
+        return [0, 0, 4, 4];
+    if (index === count - 1)
+        return [4, 4, 0, 0];
+    return [0, 0, 0, 0];
+}
+/** The same stock rounding, turned on its side: the first segment rounds left, the last right. */
+function shareRadius(index, count) {
+    if (count === 1)
+        return [4, 4, 4, 4];
+    if (index === 0)
+        return [4, 0, 0, 4];
+    if (index === count - 1)
+        return [0, 4, 4, 0];
+    return [0, 0, 0, 0];
+}
+function ChartBarStacked({ title, description, action, footer, headingLevel, data, xKey, series, entityColorMap, valueFormatter = defaultValueFormatter, axisFormatter, otherLabel = "Other", emptyState, size = "default", share = false, className, }) {
+    const folded = foldOtherSeries(series, data, entityColorMap, otherLabel);
+    const chartConfig = chartSeriesConfig(folded.series, entityColorMap);
+    const domainMax = stackedAxisMax(folded.data, folded.series.map((entry) => entry.id));
+    return (_jsx(ChartCard, { title: title, description: description, action: action, footer: footer, ...(headingLevel ? { headingLevel } : {}), className: className, children: (titleId) => emptyState && data.length === 0 ? (emptyState) : share ? (_jsx(ChartContainer, { config: chartConfig, className: "aspect-auto h-16 w-full", children: _jsxs(BarChart, { accessibilityLayer: true, "aria-labelledby": titleId, data: folded.data, layout: "vertical", stackOffset: "expand", children: [_jsx(XAxis, { type: "number", hide: true }), _jsx(YAxis, { type: "category", dataKey: xKey, hide: true }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { hideLabel: true, indicator: "line", valueFormatter: valueFormatter }) }), _jsx(ChartLegend, { itemSorter: null, content: _jsx(ChartLegendContent, { className: CHART_LEGEND_CLASS }) }), folded.series.map((entry, index) => (_jsx(Bar, { dataKey: entry.id, stackId: "a", fill: entityColor(entityColorMap, entry.id), radius: shareRadius(index, folded.series.length) }, entry.id)))] }) })) : (_jsx(ChartContainer, { config: chartConfig, className: chartPlotClassName(size), children: _jsxs(BarChart, { accessibilityLayer: true, "aria-labelledby": titleId, data: folded.data, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: xKey, tickLine: false, tickMargin: 10, axisLine: false }), _jsx(YAxis, { width: "auto", tickLine: false, axisLine: false, tickMargin: 8, tickCount: CHART_Y_AXIS_TICK_COUNT, ...(domainMax === undefined
+                            ? {}
+                            : {
+                                domain: [0, domainMax],
+                                ticks: niceAxisTicks(domainMax),
+                            }), tickFormatter: (value) => (axisFormatter ?? valueFormatter)(Number(value)) }), _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { indicator: "line", valueFormatter: valueFormatter }) }), _jsx(ChartLegend, { itemSorter: null, content: _jsx(ChartLegendContent, { className: CHART_LEGEND_CLASS }) }), folded.series.map((entry, index) => (_jsx(Bar, { dataKey: entry.id, stackId: "a", fill: entityColor(entityColorMap, entry.id), radius: stackRadius(index, folded.series.length), maxBarSize: 48 }, entry.id)))] }) })) }));
+}
+export { ChartBarStacked };

package/dist/components/chart-card.d.ts

@@ -0,0 +1,75 @@
+import * as React from "react";
+import type { ChartConfig } from "./chart.js";
+import { type EntityColorMap } from "./chart-entity-colors.js";
+/**
+ * chart-card — the Card frame and series plumbing every chart in this kit
+ * renders, so the four registry blocks (`chart-bar-stacked`,
+ * `chart-area-stacked`, `chart-bar-multiple`) hold only
+ * their own plot. It is the stock block's own shell —
+ * `Card > CardHeader(CardTitle, CardDescription, CardAction) > CardContent >
+ * CardFooter?` — named once instead of copied into each file. A page never
+ * builds a chart card frame by hand.
+ */
+type ChartSeries = {
+    /** Stable entity id: the data key in each datum and the color-map key. */
+    id: string;
+    label: string;
+};
+type ChartDatum = Record<string, number | string>;
+type ChartCardSize = "default" | "lg";
+type ChartCardProps = {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** The title's heading level in the page outline. Defaults to 2. */
+    headingLevel?: 2 | 3 | 4;
+    /** Trailing header slot, e.g. an "Explore" link. */
+    action?: React.ReactNode;
+    footer?: React.ReactNode;
+    data: readonly ChartDatum[];
+    /** The datum key carrying the category or period. */
+    xKey: string;
+    series: readonly ChartSeries[];
+    /** The shared page-context entity-color assignment map. */
+    entityColorMap: EntityColorMap;
+    /** Formats the y-axis ticks and the tooltip values. */
+    valueFormatter?: (value: number) => string;
+    /** Axis ticks only: a compact reading (1.6B, 800M, $14) where the tooltip keeps the exact figure. Defaults to `valueFormatter`. */
+    axisFormatter?: (value: number) => string;
+    /** Label for the folded neutral series (entities past the sixth). */
+    otherLabel?: string;
+    /** Rendered in CardContent instead of the plot when `data` is empty. */
+    emptyState?: React.ReactNode;
+    size?: ChartCardSize;
+    className?: string;
+};
+declare function defaultValueFormatter(value: number): string;
+/** The chart config the legend and tooltip read: each series' label and color. */
+declare function chartSeriesConfig(series: readonly ChartSeries[], entityColorMap: EntityColorMap): ChartConfig;
+/**
+ * Folds every series whose entity color resolves to the neutral register into
+ * ONE aggregated series (values summed per bucket). Past the sixth entity the
+ * color map returns that register, and drawing each tail entity as its own
+ * indistinguishable neutral mark is unreadable. Series resolving to a hue pass
+ * through unchanged, so six or fewer are never rewritten.
+ */
+declare function foldOtherSeries(series: readonly ChartSeries[], data: readonly ChartDatum[], entityColorMap: EntityColorMap, otherLabel: string): {
+    series: ChartSeries[];
+    data: ChartDatum[];
+};
+declare function ChartCard({ title, description, action, footer, headingLevel, className, children, }: Pick<ChartCardProps, "title" | "description" | "action" | "footer" | "headingLevel" | "className"> & {
+    /** Receives the title's id, which the plot takes as `aria-labelledby`. */
+    children: (titleId: string) => React.ReactNode;
+}): React.JSX.Element;
+/** The plot frame class: fixed height, no aspect ratio, full width. */
+declare function chartPlotClassName(size: ChartCardSize): string;
+/**
+ * Stock `ChartContainer` hides the plot's outline, and Recharts' accessibility
+ * layer makes that same svg focusable, so a keyboard user would land on nothing
+ * visible. The ring comes back only while the svg has keyboard focus.
+ */
+declare const CHART_FOCUS_CLASS = "[&_.recharts-surface:focus-visible]:nc-focus-outline [&_.recharts-surface:focus-visible]:outline-ring";
+/** Legend below the plot, left-aligned, wrapping to a second line. */
+declare const CHART_LEGEND_CLASS = "flex-wrap justify-start";
+export { CHART_FOCUS_CLASS, CHART_LEGEND_CLASS, ChartCard, chartPlotClassName, chartSeriesConfig, defaultValueFormatter, foldOtherSeries, };
+export type { ChartCardProps, ChartCardSize, ChartDatum, ChartSeries };
+//# sourceMappingURL=chart-card.d.ts.map

package/dist/components/chart-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-card.d.ts","sourceRoot":"","sources":["../../src/components/chart-card.tsx"],"names":[],"mappings":"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"}

package/dist/components/chart-card.js

@@ -0,0 +1,71 @@
+"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 { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./card.js";
+import { CHART_ENTITY_OTHER_COLOR, entityColor, } from "./chart-entity-colors.js";
+/** Fixed plot heights, so charts on a page share one register. */
+const chartSizes = {
+    default: "h-64",
+    lg: "h-80",
+};
+/** Synthetic key for the aggregated neutral series. */
+const OTHER_SERIES_ID = "__nc-other-series__";
+function defaultValueFormatter(value) {
+    return value.toLocaleString();
+}
+/** The chart config the legend and tooltip read: each series' label and color. */
+function chartSeriesConfig(series, entityColorMap) {
+    return Object.fromEntries(series.map((entry) => [
+        entry.id,
+        { label: entry.label, color: entityColor(entityColorMap, entry.id) },
+    ]));
+}
+/**
+ * Folds every series whose entity color resolves to the neutral register into
+ * ONE aggregated series (values summed per bucket). Past the sixth entity the
+ * color map returns that register, and drawing each tail entity as its own
+ * indistinguishable neutral mark is unreadable. Series resolving to a hue pass
+ * through unchanged, so six or fewer are never rewritten.
+ */
+function foldOtherSeries(series, data, entityColorMap, otherLabel) {
+    const isNeutral = (entry) => entityColor(entityColorMap, entry.id) === CHART_ENTITY_OTHER_COLOR;
+    const neutral = series.filter(isNeutral);
+    if (neutral.length === 0) {
+        return { series: [...series], data: [...data] };
+    }
+    const folded = [
+        ...series.filter((entry) => !isNeutral(entry)),
+        { id: OTHER_SERIES_ID, label: otherLabel },
+    ];
+    const foldedData = data.map((datum) => {
+        const otherSum = neutral.reduce((sum, entry) => {
+            const value = datum[entry.id];
+            return sum + (typeof value === "number" ? value : 0);
+        }, 0);
+        const next = { ...datum };
+        for (const entry of neutral) {
+            delete next[entry.id];
+        }
+        next[OTHER_SERIES_ID] = otherSum;
+        return next;
+    });
+    return { series: folded, data: foldedData };
+}
+function ChartCard({ title, description, action, footer, headingLevel = 2, className, children, }) {
+    const titleId = React.useId();
+    return (_jsxs(Card, { "data-slot": "chart-card", className: className, children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { id: titleId, role: "heading", "aria-level": headingLevel, children: title }), description ? _jsx(CardDescription, { children: description }) : null, action ? _jsx(CardAction, { children: action }) : null] }), _jsx(CardContent, { children: children(titleId) }), footer ? (_jsx(CardFooter, { className: "flex-col items-start gap-2 text-sm", children: footer })) : null] }));
+}
+/** The plot frame class: fixed height, no aspect ratio, full width. */
+function chartPlotClassName(size) {
+    return cn("aspect-auto w-full", chartSizes[size], CHART_FOCUS_CLASS);
+}
+/**
+ * Stock `ChartContainer` hides the plot's outline, and Recharts' accessibility
+ * layer makes that same svg focusable, so a keyboard user would land on nothing
+ * visible. The ring comes back only while the svg has keyboard focus.
+ */
+const CHART_FOCUS_CLASS = "[&_.recharts-surface:focus-visible]:nc-focus-outline [&_.recharts-surface:focus-visible]:outline-ring";
+/** Legend below the plot, left-aligned, wrapping to a second line. */
+const CHART_LEGEND_CLASS = "flex-wrap justify-start";
+export { CHART_FOCUS_CLASS, CHART_LEGEND_CLASS, ChartCard, chartPlotClassName, chartSeriesConfig, defaultValueFormatter, foldOtherSeries, };

package/dist/components/chart-date-range-control.d.ts

@@ -1,14 +1,11 @@
 import * as React from "react";
 import { type DateRangePreset, type DateRangeValue } from "./chart-date-range.js";
-declare function DateRangeControl({ value, onChange, label, presets, presetLabels, customLabel, formatCustomValue, className, ...props }: Omit<React.ComponentProps<"div">, "children" | "onChange"> & {
+declare function DateRangeControl({ value, onChange, label, presets, presetLabels, customLabel, formatCustomValue, className, }: {
     value: DateRangeValue;
     onChange: (value: DateRangeValue) => void;
-    /** Accessible name for the control group. */
+    /** Accessible name for the control. */
     label?: string;
-    /**
-     * Which preset buttons to render, in order. Defaults to the full codec set;
-     * pass a subset to offer fewer presets (the codec enum is unchanged).
-     */
+    /** Which presets to offer, in order. Defaults to the full codec set. */
     presets?: readonly DateRangePreset[];
     presetLabels?: Partial<Record<DateRangePreset, string>>;
     customLabel?: string;
@@ -22,6 +19,7 @@ declare function DateRangeControl({ value, onChange, label, presets, presetLabel
         from: string;
         to: string;
     }) => string;
+    className?: string;
 }): React.JSX.Element;
 export { DateRangeControl };
 //# sourceMappingURL=chart-date-range-control.d.ts.map

package/dist/components/chart-date-range-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-date-range-control.d.ts","sourceRoot":"","sources":["../../src/components/chart-date-range-control.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,EAIL,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,+BAA+B,CAAC;AAmCvC,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,KAAoB,EACpB,OAA4B,EAC5B,YAAY,EACZ,WAAsB,EACtB,iBAAiB,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG;IAC9D,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IACrC,YAAY,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;CACrE,qBAoFA;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"chart-date-range-control.d.ts","sourceRoot":"","sources":["../../src/components/chart-date-range-control.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,EAIL,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,+BAA+B,CAAC;AA2BvC,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,KAAoB,EACpB,OAA4B,EAC5B,YAAY,EACZ,WAAsB,EACtB,iBAAiB,EACjB,SAAS,GACV,EAAE;IACD,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,OAAO,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IACrC,YAAY,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,qBA6EA;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}