@misoto22/design 0.3.1 → 0.6.0

package/dist/charts/AreaChart/AreaChart.d.ts

@@ -0,0 +1,191 @@
+import * as react from 'react';
+import { ReactNode, ComponentProps, FC } from 'react';
+import { AreaChart as AreaChart$1, Area, XAxis, YAxis, CartesianGrid } from 'recharts';
+import { ChartConfig } from '../lib/chart.js';
+import { ChartEmptyProps } from '../lib/empty.js';
+import { ValuesProps } from '../lib/values.js';
+import { SonifyProps } from '../lib/sonify-control.js';
+import { ChartBackgroundVariant } from '../lib/background.js';
+import { BrushProps } from '../lib/brush.js';
+import { ToolbarProps } from '../lib/toolbar.js';
+import { ChartRevealType } from '../lib/paint.js';
+import { ChartDotVariant } from '../lib/dot.js';
+import { ChartLegendVariant, ChartLegendAlign } from '../lib/legend.js';
+import { ChartTooltipVariant, ChartTooltipRoundness } from '../lib/tooltip.js';
+import { ReferenceLine, ReferenceBand, Annotation } from '../lib/annotations.js';
+import '../lib/sonify.js';
+import '../lib/zoom.js';
+import '../lib/figure.js';
+import 'recharts/types/component/DefaultTooltipContent';
+
+/**
+ * The axis props, with `label` narrowed to a string.
+ *
+ * Recharts' own `label` accepts a render function and a config object, neither
+ * of which a call site should be reaching for to name an axis — and both of
+ * which would let a consumer opt out of the system's own axis type styling
+ * without noticing.
+ */
+type ChartXAxisProps = Omit<ComponentProps<typeof XAxis>, 'label'> & {
+    /** What this axis measures. Say the unit here or in the series label, once. */
+    label?: string;
+};
+type ChartYAxisProps = Omit<ComponentProps<typeof YAxis>, 'label'> & {
+    /** What this axis measures. Say the unit here or in the series label, once. */
+    label?: string;
+};
+
+/** How an area's curve is interpolated between points. */
+type ChartCurveType = ComponentProps<typeof Area>['type'];
+/**
+ * How an area meets the plot.
+ *
+ * In the monochrome default this is the PRIMARY way two series are told apart
+ * — the ramp is the second encoding — so a chart with more than one area
+ * should vary this before it varies anything else.
+ */
+type AreaVariant = 'gradient' | 'gradient-reverse' | 'solid' | 'dotted' | 'lines' | 'hatched';
+/** How the line on top of an area is drawn. */
+type AreaStrokeVariant = 'solid' | 'dashed' | 'animated-dashed';
+/** How several areas combine: side by side, stacked, or normalised to 100%. */
+type AreaStackType = 'default' | 'stacked' | 'expanded';
+/** Fails the build when a config names a series the rows do not have. */
+type ValidateKeys<TData, TConfig> = {
+    [K in keyof TConfig]: K extends keyof TData ? ChartConfig[string] : never;
+};
+interface AreaChartProps<TData extends Record<string, unknown>, TConfig extends Record<string, ChartConfig[string]>> {
+    /** Series keys → their label and paint. Declaration order is ramp order. */
+    config: TConfig & ValidateKeys<TData, TConfig>;
+    /** The rows the chart draws. One entry per point, bar or category. */
+    data: TData[];
+    /**
+     * What the chart shows, in a sentence a reader could act on. Required, and
+     * announced to a screen reader even when it is not printed.
+     */
+    title: string;
+    /** Prints the title above the plot instead of hiding it from sight. */
+    showTitle?: boolean;
+    /** A line under the title — the unit, the window, the caveat. */
+    description?: ReactNode;
+    /**
+     * The composed parts — axes, grid, tooltip, legend, and the marks
+     * themselves.
+     */
+    children: ReactNode;
+    /** Merged onto the figure, last, so a call site can size or space it. */
+    className?: string;
+    /** Escape hatch onto the raw Recharts chart element. */
+    chartProps?: ComponentProps<typeof AreaChart$1>;
+    /** The curve every `<AreaChart.Area>` inherits. */
+    curveType?: ChartCurveType;
+    /** The intro wipe every `<AreaChart.Area>` inherits. */
+    animationType?: ChartRevealType;
+    /** How several marks combine: side by side, stacked, or normalised to 100%. */
+    stackType?: AreaStackType;
+    /** The series lit on first render. Selection dims every other series. */
+    defaultSelectedDataKey?: string | null;
+    /** Fires when the selection changes, and with null when it is cleared. */
+    onSelectionChange?: (selectedDataKey: string | null) => void;
+    /**
+     * Swaps the marks for an animated skeleton, keeping the measured height so
+     * the page does not jump when the data lands.
+     */
+    isLoading?: boolean;
+    /** How many points the skeleton draws. */
+    loadingPoints?: number;
+    /**
+     * The row field on the category axis. Needed by the brush and by the table
+     * view.
+     */
+    xDataKey?: keyof TData & string;
+    /**
+     * Drops the hidden table view. Only correct when the page prints the data
+     * itself.
+     */
+    hideDataTable?: boolean;
+    /**
+     * What the chart shows when it has nothing to draw.
+     *
+     * Rendered instead of the plot whenever `data` is empty and the chart is not
+     * loading — the state a real dashboard reaches within a week, and the one an
+     * empty pair of axes is indistinguishable from a failed load. `false` keeps
+     * the axes, for a chart whose emptiness is itself the reading.
+     */
+    empty?: ChartEmptyProps | false;
+}
+/**
+ * A filled series over a category axis — the shape for a magnitude that is
+ * continuous, where the area under the line means something.
+ *
+ * Composed rather than configured: axes, grid, tooltip, legend and the areas
+ * themselves are children, so a chart renders exactly the parts it asked for
+ * and nothing is switched on by a prop nobody can see.
+ *
+ * Reach for `<LineChart>` instead when the reader is comparing several series
+ * against each other rather than reading one total, and for `<BarChart>` when
+ * the categories are discrete.
+ *
+ * @example
+ * <AreaChart title="Visitors per month" config={config} data={data} xDataKey="month">
+ *   <AreaChart.Grid />
+ *   <AreaChart.XAxis dataKey="month" />
+ *   <AreaChart.Tooltip />
+ *   <AreaChart.Area dataKey="desktop" variant="gradient" />
+ * </AreaChart>
+ */
+declare function AreaChart<TData extends Record<string, unknown>, TConfig extends Record<string, ChartConfig[string]>>({ config, data, title, showTitle, description, children, className, chartProps, curveType, animationType, stackType, defaultSelectedDataKey, onSelectionChange, isLoading, loadingPoints, xDataKey, hideDataTable, empty, }: AreaChartProps<TData, TConfig>): react.JSX.Element;
+declare namespace AreaChart {
+    var Area: ({ dataKey, variant, strokeVariant, strokeWidth, curveType, animationType, connectNulls, isClickable, children, areaProps, }: AreaProps) => react.JSX.Element | null;
+    var Dot: FC<DotProps>;
+    var ActiveDot: FC<DotProps>;
+    var XAxis: ({ tickLine, axisLine, tickMargin, minTickGap, label, ...rest }: ChartXAxisProps) => react.JSX.Element | null;
+    var YAxis: ({ tickLine, axisLine, tickMargin, minTickGap, width, tickFormatter, label, ...rest }: ChartYAxisProps) => react.JSX.Element | null;
+    var Grid: ({ vertical, strokeDasharray, ...rest }: ComponentProps<typeof CartesianGrid>) => react.JSX.Element;
+    var Tooltip: ({ variant, roundness, defaultIndex, cursor }: ChartTooltipSlotProps) => react.JSX.Element | null;
+    var Legend: ({ variant, align, verticalAlign, isClickable, }: ChartLegendSlotProps) => react.JSX.Element;
+    var Background: ({ variant }: {
+        variant: ChartBackgroundVariant;
+    }) => react.JSX.Element | null;
+    var ReferenceLine: typeof ReferenceLine;
+    var ReferenceBand: typeof ReferenceBand;
+    var Annotation: typeof Annotation;
+    var Values: FC<ValuesProps>;
+    var Brush: FC<BrushProps>;
+    var Toolbar: FC<ToolbarProps>;
+    var Sonify: FC<SonifyProps>;
+}
+interface AreaProps {
+    /** The series to draw. Must exist on both the rows and the config. */
+    dataKey: string;
+    variant?: AreaVariant;
+    strokeVariant?: AreaStrokeVariant;
+    strokeWidth?: number;
+    curveType?: ChartCurveType;
+    animationType?: ChartRevealType;
+    connectNulls?: boolean;
+    /** Lets a click on this area select it, dimming the rest. */
+    isClickable?: boolean;
+    /** `<AreaChart.Dot>`, `<AreaChart.ActiveDot>` and `<AreaChart.Values>`. */
+    children?: ReactNode;
+    areaProps?: ComponentProps<typeof Area>;
+}
+interface DotProps {
+    variant?: ChartDotVariant;
+}
+interface ChartTooltipSlotProps {
+    variant?: ChartTooltipVariant;
+    roundness?: ChartTooltipRoundness;
+    /** Shows the tooltip at this row before anything is hovered. */
+    defaultIndex?: number;
+    /** The crosshair that follows the pointer along the axis. */
+    cursor?: boolean;
+}
+interface ChartLegendSlotProps {
+    variant?: ChartLegendVariant;
+    align?: ChartLegendAlign;
+    verticalAlign?: 'top' | 'middle' | 'bottom';
+    /** Makes each entry a button that selects its series. */
+    isClickable?: boolean;
+}
+
+export { AreaChart, type AreaChartProps, type AreaProps, type AreaStackType, type AreaStrokeVariant, type AreaVariant, type ChartCurveType, type ChartLegendSlotProps, type ChartTooltipSlotProps, type ChartXAxisProps, type ChartYAxisProps, type DotProps, AreaChart as default };

package/dist/charts/AreaChart/AreaChart.js

@@ -0,0 +1,480 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Children,
+  createContext,
+  isValidElement,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useState
+} from "react";
+import {
+  Area as RechartsArea,
+  AreaChart as RechartsAreaChart,
+  CartesianGrid,
+  XAxis as RechartsXAxis,
+  YAxis as RechartsYAxis
+} from "recharts";
+import { useReducedMotion } from "motion/react";
+import { ChartContainer, percentTick } from "../lib/chart.js";
+import { ChartFigure } from "../lib/figure.js";
+import { ChartEmpty } from "../lib/empty.js";
+import { axisLabel } from "../lib/axis.js";
+import { defaultTick } from "../lib/format.js";
+import { Annotation, ReferenceBand, ReferenceLine } from "../lib/annotations.js";
+import { Values, findSlot, resolveValues } from "../lib/values.js";
+import {
+  ChartSonifyButton,
+  Sonify,
+  useChartSonifySeries
+} from "../lib/sonify-control.js";
+import { ChartBackground } from "../lib/background.js";
+import { ChartDot } from "../lib/dot.js";
+import {
+  ChartLegend,
+  ChartLegendContent
+} from "../lib/legend.js";
+import {
+  ChartTooltip,
+  ChartTooltipContent
+} from "../lib/tooltip.js";
+import { Brush, ChartBrush } from "../lib/brush.js";
+import { ChartControls, Toolbar } from "../lib/toolbar.js";
+import { useChartZoom } from "../lib/zoom.js";
+import { LoadingIndicator, LoadingShimmer, LOADING_KEY, useLoadingRows } from "../lib/loading.js";
+import {
+  AnimatedDashedStroke,
+  AreaDottedFill,
+  AreaGradientFill,
+  AreaGradientReverseFill,
+  AreaHatchedFill,
+  AreaLinesFill,
+  AreaSolidFill,
+  RevealMask,
+  SeriesGradient,
+  UnselectedFill
+} from "../lib/paint.js";
+const STROKE_WIDTH = 0.8;
+const STACK_ID = "m22-area-stack";
+const CHART_MARGIN = { top: 8, right: 12, bottom: 0, left: 12 };
+const AreaChartContext = createContext(null);
+function useAreaChart() {
+  const context = useContext(AreaChartContext);
+  if (!context) throw new Error("An area chart part must be rendered inside <AreaChart>");
+  return context;
+}
+function AreaChart({
+  config,
+  data,
+  title,
+  showTitle,
+  description,
+  children,
+  className,
+  chartProps,
+  curveType = "linear",
+  animationType = "forward",
+  stackType = "default",
+  defaultSelectedDataKey = null,
+  onSelectionChange,
+  isLoading = false,
+  loadingPoints,
+  xDataKey,
+  hideDataTable = false,
+  empty
+}) {
+  const chartId = useId().replace(/:/g, "");
+  const [selectedDataKey, setSelectedDataKey] = useState(defaultSelectedDataKey);
+  const { rows: loadingData, onShimmerExit } = useLoadingRows(isLoading, loadingPoints);
+  const zoom = useChartZoom({ data, xDataKey });
+  const { brushSlot, toolbarSlot, sonifySlot, chartChildren } = useMemo(() => {
+    const parts = Children.toArray(children);
+    const element = parts.find((child) => isValidElement(child) && child.type === Brush);
+    const props = isValidElement(element) ? element.props : {};
+    return {
+      brushSlot: { present: isValidElement(element), ...props },
+      toolbarSlot: findSlot(parts, Toolbar),
+      sonifySlot: findSlot(parts, Sonify),
+      chartChildren: parts.filter(
+        (child) => !(isValidElement(child) && (child.type === Brush || child.type === Toolbar || child.type === Sonify))
+      )
+    };
+  }, [children]);
+  const columns = useMemo(
+    () => Object.entries(config).map(([key, series]) => ({ key, label: series.label })),
+    [config]
+  );
+  const isExpanded = stackType === "expanded";
+  const isStacked = stackType === "stacked" || isExpanded;
+  const showBrush = brushSlot.present && !isLoading;
+  const showToolbar = toolbarSlot !== null && !isLoading;
+  const isEmpty = !isLoading && empty !== false && data.length === 0;
+  const displayData = isLoading ? loadingData : showBrush || showToolbar ? zoom.visibleData : data;
+  const sonifySeries = useChartSonifySeries(
+    sonifySlot,
+    displayData,
+    config,
+    xDataKey
+  );
+  const selectDataKey = useCallback(
+    (next) => {
+      setSelectedDataKey(next);
+      onSelectionChange?.(next);
+    },
+    [onSelectionChange]
+  );
+  const context = useMemo(
+    () => ({
+      config,
+      rows: displayData,
+      curveType,
+      animationType,
+      isStacked,
+      isExpanded,
+      isLoading,
+      selectedDataKey,
+      selectDataKey
+    }),
+    [
+      animationType,
+      config,
+      curveType,
+      displayData,
+      isExpanded,
+      isLoading,
+      isStacked,
+      selectDataKey,
+      selectedDataKey
+    ]
+  );
+  return /* @__PURE__ */ jsx(AreaChartContext.Provider, { value: context, children: /* @__PURE__ */ jsxs(
+    ChartFigure,
+    {
+      title,
+      showTitle,
+      description,
+      className,
+      table: hideDataTable ? false : { rows: data, rowKey: xDataKey, columns },
+      children: [
+        sonifySlot && /* @__PURE__ */ jsx(ChartSonifyButton, { ...sonifySlot, title, series: sonifySeries }),
+        isEmpty ? /* @__PURE__ */ jsx(ChartEmpty, { ...empty || {} }) : /* @__PURE__ */ jsx(
+          ChartControls,
+          {
+            toolbar: showToolbar ? toolbarSlot : null,
+            zoom,
+            title,
+            rows: data,
+            columns,
+            rowKey: xDataKey,
+            children: /* @__PURE__ */ jsx(
+              ChartContainer,
+              {
+                config,
+                footer: showBrush && /* @__PURE__ */ jsx(
+                  ChartBrush,
+                  {
+                    data,
+                    config,
+                    xDataKey,
+                    variant: "area",
+                    curveType,
+                    height: brushSlot.height,
+                    formatLabel: brushSlot.formatLabel,
+                    stacked: isStacked,
+                    className: "mt-1",
+                    ...zoom.brushProps,
+                    onChange: (range) => {
+                      zoom.brushProps.onChange(range);
+                      brushSlot.onChange?.(range);
+                    }
+                  }
+                ),
+                children: /* @__PURE__ */ jsxs(
+                  RechartsAreaChart,
+                  {
+                    id: chartId,
+                    accessibilityLayer: true,
+                    margin: CHART_MARGIN,
+                    stackOffset: isExpanded ? "expand" : void 0,
+                    data: displayData,
+                    ...chartProps,
+                    children: [
+                      chartChildren,
+                      isLoading && /* @__PURE__ */ jsx(LoadingArea, { chartId, curveType, onShimmerExit })
+                    ]
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(LoadingIndicator, { isLoading })
+      ]
+    }
+  ) });
+}
+function Area({
+  dataKey,
+  variant = "gradient",
+  strokeVariant = "dashed",
+  strokeWidth = STROKE_WIDTH,
+  curveType,
+  animationType,
+  connectNulls = false,
+  isClickable = false,
+  children,
+  areaProps
+}) {
+  const {
+    config,
+    curveType: defaultCurve,
+    animationType: defaultAnimation,
+    isStacked,
+    isExpanded,
+    isLoading,
+    rows,
+    selectedDataKey,
+    selectDataKey
+  } = useAreaChart();
+  const id = useId().replace(/:/g, "");
+  const reduceMotion = useReducedMotion();
+  if (isLoading) return null;
+  const reveal = reduceMotion ? "none" : animationType ?? defaultAnimation;
+  const maskId = reveal === "none" ? void 0 : `${id}-reveal-mask`;
+  const isSelected = selectedDataKey === dataKey;
+  const hasSelection = selectedDataKey !== null;
+  const dimmed = hasSelection && !isSelected;
+  const opacity = dimmed ? { fill: 0.25, stroke: 0.3, dot: 0.3 } : { fill: 1, stroke: 1, dot: 1 };
+  const { dot, activeDot } = resolveDots(children, id, dataKey, opacity.dot, maskId);
+  const labels = resolveValues(
+    findSlot(children, Values),
+    rows.map((row) => Number(row[dataKey])).filter(Number.isFinite)
+  );
+  const animateDash = strokeVariant === "animated-dashed" && !hasSelection && !reduceMotion;
+  const isDashed = strokeVariant !== "solid";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      RechartsArea,
+      {
+        type: curveType ?? defaultCurve,
+        dataKey,
+        connectNulls,
+        fillOpacity: opacity.fill,
+        strokeOpacity: opacity.stroke,
+        fill: `url(#${id}-${dimmed ? "unselected" : variant}-${dataKey})`,
+        stroke: `url(#${id}-colors-${dataKey})`,
+        stackId: isStacked ? STACK_ID : void 0,
+        dot,
+        activeDot,
+        strokeWidth,
+        strokeDasharray: isDashed ? "3 3" : void 0,
+        isAnimationActive: false,
+        style: {
+          ...maskId ? { mask: `url(#${maskId})` } : {},
+          ...isClickable ? { cursor: "pointer" } : {}
+        },
+        onClick: () => {
+          if (!isClickable) return;
+          selectDataKey(isSelected ? null : dataKey);
+        },
+        ...areaProps,
+        children: [
+          animateDash && /* @__PURE__ */ jsx(AnimatedDashedStroke, {}),
+          labels
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("defs", { children: [
+      reveal !== "none" && /* @__PURE__ */ jsx(RevealMask, { id, type: reveal }),
+      /* @__PURE__ */ jsx(
+        SeriesGradient,
+        {
+          id,
+          dataKey,
+          config,
+          gradientUnits: isExpanded ? "userSpaceOnUse" : "objectBoundingBox"
+        }
+      ),
+      variant === "gradient" && /* @__PURE__ */ jsx(AreaGradientFill, { id, dataKey }),
+      variant === "gradient-reverse" && /* @__PURE__ */ jsx(AreaGradientReverseFill, { id, dataKey }),
+      variant === "solid" && /* @__PURE__ */ jsx(AreaSolidFill, { id, dataKey }),
+      variant === "dotted" && /* @__PURE__ */ jsx(AreaDottedFill, { id, dataKey }),
+      variant === "lines" && /* @__PURE__ */ jsx(AreaLinesFill, { id, dataKey }),
+      variant === "hatched" && /* @__PURE__ */ jsx(AreaHatchedFill, { id, dataKey }),
+      dimmed && /* @__PURE__ */ jsx(UnselectedFill, { id, dataKey })
+    ] })
+  ] });
+}
+const Dot = () => null;
+const ActiveDot = () => null;
+function resolveDots(children, id, dataKey, dotOpacity, maskId) {
+  let dot = false;
+  let activeDot = false;
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    const { variant } = child.props;
+    if (child.type === Dot) {
+      dot = /* @__PURE__ */ jsx(
+        ChartDot,
+        {
+          variant,
+          dataKey,
+          chartId: id,
+          fillOpacity: dotOpacity,
+          maskId
+        }
+      );
+    }
+    if (child.type === ActiveDot) {
+      activeDot = /* @__PURE__ */ jsx(ChartDot, { variant, dataKey, chartId: id, fillOpacity: dotOpacity });
+    }
+  });
+  return { dot, activeDot };
+}
+function XAxis({
+  tickLine = false,
+  axisLine = false,
+  tickMargin = 8,
+  minTickGap = 8,
+  label,
+  ...rest
+}) {
+  const { isLoading } = useAreaChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx(
+    RechartsXAxis,
+    {
+      tickLine,
+      axisLine,
+      tickMargin,
+      minTickGap,
+      ...rest,
+      children: axisLabel(label, "x")
+    }
+  );
+}
+function YAxis({
+  tickLine = false,
+  axisLine = false,
+  tickMargin = 8,
+  minTickGap = 8,
+  width = "auto",
+  tickFormatter,
+  label,
+  ...rest
+}) {
+  const { isLoading, isExpanded } = useAreaChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx(
+    RechartsYAxis,
+    {
+      tickLine,
+      axisLine,
+      tickMargin,
+      minTickGap,
+      width,
+      tickFormatter: isExpanded ? percentTick : tickFormatter ?? defaultTick,
+      ...rest,
+      children: axisLabel(label, "y")
+    }
+  );
+}
+function Grid({
+  vertical = false,
+  strokeDasharray = "3 3",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(CartesianGrid, { vertical, strokeDasharray, ...rest });
+}
+function Tooltip({ variant, roundness, defaultIndex, cursor = true }) {
+  const { isLoading, selectedDataKey } = useAreaChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      defaultIndex,
+      cursor: cursor ? { strokeDasharray: "3 3", strokeWidth: STROKE_WIDTH } : false,
+      content: /* @__PURE__ */ jsx(ChartTooltipContent, { selected: selectedDataKey, roundness, variant })
+    }
+  );
+}
+function Legend({
+  variant,
+  align = "right",
+  verticalAlign = "top",
+  isClickable = false
+}) {
+  const { selectedDataKey, selectDataKey } = useAreaChart();
+  return /* @__PURE__ */ jsx(
+    ChartLegend,
+    {
+      verticalAlign,
+      align,
+      content: /* @__PURE__ */ jsx(
+        ChartLegendContent,
+        {
+          selected: selectedDataKey,
+          onSelectChange: selectDataKey,
+          isClickable,
+          variant
+        }
+      )
+    }
+  );
+}
+function Background({ variant }) {
+  const { isLoading } = useAreaChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx(ChartBackground, { variant });
+}
+function LoadingArea({
+  chartId,
+  curveType,
+  onShimmerExit
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      RechartsArea,
+      {
+        type: curveType,
+        dataKey: LOADING_KEY,
+        fillOpacity: 0.05,
+        fill: "currentColor",
+        stroke: "currentColor",
+        strokeOpacity: 0.5,
+        isAnimationActive: false,
+        legendType: "none",
+        tooltipType: "none",
+        activeDot: false,
+        dot: false,
+        className: "text-(--ink)",
+        style: { mask: `url(#${chartId}-loading-mask)` }
+      }
+    ),
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(LoadingShimmer, { id: chartId, onShimmerExit }) })
+  ] });
+}
+AreaChart.Area = Area;
+AreaChart.Dot = Dot;
+AreaChart.ActiveDot = ActiveDot;
+AreaChart.XAxis = XAxis;
+AreaChart.YAxis = YAxis;
+AreaChart.Grid = Grid;
+AreaChart.Tooltip = Tooltip;
+AreaChart.Legend = Legend;
+AreaChart.Background = Background;
+AreaChart.ReferenceLine = ReferenceLine;
+AreaChart.ReferenceBand = ReferenceBand;
+AreaChart.Annotation = Annotation;
+AreaChart.Values = Values;
+AreaChart.Brush = Brush;
+AreaChart.Toolbar = Toolbar;
+AreaChart.Sonify = Sonify;
+var AreaChart_default = AreaChart;
+export {
+  AreaChart,
+  AreaChart_default as default
+};
+//# sourceMappingURL=AreaChart.js.map