@giddaa-housing/ui 0.1.0 → 1.1.0

package/dist/sparkline.js

@@ -1,568 +1,230 @@
-// src/components/ui/sparkline.tsx
-import {
-  Area,
-  AreaChart,
-  Bar,
-  BarChart,
-  Line,
-  LineChart,
-  XAxis
-} from "recharts";
-
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "gdt-display",
-            "gdt-h1",
-            "gdt-h2",
-            "gdt-h3",
-            "gdt-h4",
-            "gdt-h5",
-            "gdt-xl",
-            "gdt-lg",
-            "gdt-md",
-            "gdt-sm",
-            "gdt-xs",
-            "gdt-subtext",
-            "gdt-capitalized"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/components/ui/chart.tsx
-import { cva } from "class-variance-authority";
-import * as React from "react";
-import * as RechartsPrimitive from "recharts";
-
-// src/components/ui/size-context.tsx
-import { createContext, useContext } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
-var SizeContext = createContext(void 0);
-function useComponentSize(size, fallback = "md") {
-  const inheritedSize = useContext(SizeContext);
-  return size ?? inheritedSize ?? fallback;
-}
-
-// src/components/ui/chart.tsx
-import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
-var SERIES_COLOR_PLACEHOLDER = "var(--color-surface-brand)";
-function formatChartValue(value, type) {
-  if (Array.isArray(value)) {
-    return value.join(", ");
-  }
-  if (typeof value !== "number") {
-    return value == null ? "" : String(value);
-  }
-  switch (type) {
-    case "currency":
-      return `\u20A6${value.toLocaleString("en-NG")}`;
-    case "percentage":
-      return `${value.toLocaleString("en-NG", {
-        minimumFractionDigits: 1,
-        maximumFractionDigits: 1
-      })}%`;
-    default:
-      return value.toLocaleString("en-NG");
-  }
-}
-var THEMES = { light: "", dark: ".dark" };
-var INITIAL_DIMENSION = { width: 320, height: 200 };
-var ChartContext = React.createContext(null);
-function useChart() {
-  const context = React.useContext(ChartContext);
-  if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />");
-  }
-  return context;
-}
-var chartCardVariants = cva(
-  "flex w-full min-w-0 flex-col rounded-2xl border border-line-subtle bg-surface-raised text-fg-primary shadow-1",
-  {
-    variants: {
-      size: {
-        sm: "gap-3 p-4",
-        md: "gap-4 p-5",
-        lg: "gap-5 p-6"
-      }
-    },
-    defaultVariants: { size: "md" }
-  }
-);
-var chartTitleVariants = cva("min-w-0 font-bold text-fg-primary", {
-  variants: {
-    size: {
-      sm: "text-gdt-md",
-      md: "text-gdt-lg",
-      lg: "text-gdt-h5"
-    }
-  },
-  defaultVariants: { size: "md" }
-});
-var chartDescriptionVariants = cva("min-w-0 font-normal text-fg-secondary", {
-  variants: {
-    size: {
-      sm: "text-gdt-xs",
-      md: "text-gdt-sm",
-      lg: "text-gdt-sm"
-    }
-  },
-  defaultVariants: { size: "md" }
-});
-function ChartContainer({
-  id,
-  className,
-  children,
-  config,
-  initialDimension = INITIAL_DIMENSION,
-  ...props
-}) {
-  const uniqueId = React.useId();
-  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
-  return /* @__PURE__ */ jsx2(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-slot": "chart",
-      "data-chart": chartId,
-      className: cn(
-        "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx2(ChartStyle, { id: chartId, config }),
-        /* @__PURE__ */ jsx2(
-          RechartsPrimitive.ResponsiveContainer,
-          {
-            initialDimension,
-            children
-          }
-        )
-      ]
-    }
-  ) });
-}
-var ChartStyle = ({ id, config }) => {
-  const colorConfig = Object.entries(config).filter(
-    ([, config2]) => config2.theme ?? config2.color
-  );
-  if (!colorConfig.length) {
-    return null;
-  }
-  const styleContent = Object.entries(THEMES).map(
-    ([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig.map(([key, itemConfig]) => {
-      const color = itemConfig.theme?.[theme] ?? itemConfig.color;
-      return color ? `  --color-${key}: ${color};` : null;
-    }).join("\n")}
-}
-`
-  ).join("\n");
-  return /* @__PURE__ */ jsx2("style", { children: styleContent });
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { useComponentSize } from "./size-context.js";
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "./chart.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Area, AreaChart, Bar, BarChart, Line, LineChart, XAxis } from "recharts";
+//#region src/sparkline.tsx
+const SPARKLINE_LAYOUT = {
+	sm: {
+		width: 72,
+		height: 24,
+		strokeWidth: 1.5,
+		dotRadius: 2,
+		margin: {
+			top: 4,
+			right: 4,
+			bottom: 2,
+			left: 2
+		},
+		barRadius: 1,
+		maxBarSize: 6
+	},
+	md: {
+		width: 104,
+		height: 32,
+		strokeWidth: 2,
+		dotRadius: 2.5,
+		margin: {
+			top: 5,
+			right: 5,
+			bottom: 2,
+			left: 2
+		},
+		barRadius: 2,
+		maxBarSize: 8
+	},
+	lg: {
+		width: 144,
+		height: 44,
+		strokeWidth: 2,
+		dotRadius: 3,
+		margin: {
+			top: 6,
+			right: 6,
+			bottom: 3,
+			left: 3
+		},
+		barRadius: 2,
+		maxBarSize: 10
+	}
 };
-var ChartTooltip = RechartsPrimitive.Tooltip;
-var chartTooltipVariants = cva(
-  "flex flex-col bg-surface-overlay border border-line-subtle shadow-2",
-  {
-    variants: {
-      size: {
-        xs: "gap-0.5 rounded-md p-2",
-        sm: "gap-0.5 rounded-md p-2.5",
-        md: "gap-1 rounded-lg p-3",
-        lg: "gap-1 rounded-xl p-3.5"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-var chartTooltipDotVariants = cva("shrink-0 rounded-full", {
-  variants: {
-    size: {
-      xs: "size-1.5",
-      sm: "size-2",
-      md: "size-2.5",
-      lg: "size-2.5"
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-});
-var chartTooltipLabelVariants = cva("font-medium text-fg-secondary", {
-  variants: {
-    size: {
-      xs: "text-gdt-xs",
-      sm: "text-gdt-xs",
-      md: "text-gdt-sm",
-      lg: "text-gdt-sm"
-    }
-  },
-  defaultVariants: { size: "md" }
-});
-var chartTooltipValueVariants = cva(
-  "font-extrabold text-fg-primary tabular-nums",
-  {
-    variants: {
-      size: {
-        xs: "text-gdt-sm",
-        sm: "text-gdt-md",
-        md: "text-gdt-lg",
-        lg: "text-gdt-xl"
-      }
-    },
-    defaultVariants: { size: "md" }
-  }
-);
-function ChartTooltipContent({
-  active,
-  payload,
-  className,
-  hideIndicator = false,
-  label,
-  labelFormatter,
-  formatter,
-  color,
-  nameKey,
-  valueType = "number",
-  size = "md"
-}) {
-  const { config } = useChart();
-  if (!active || !payload?.length) {
-    return null;
-  }
-  const [item] = payload.filter((entry) => entry.type !== "none");
-  if (!item) {
-    return null;
-  }
-  const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
-  const itemConfig = getPayloadConfigFromPayload(config, item, key);
-  const dotColor = color ?? item.payload?.fill ?? item.color ?? SERIES_COLOR_PLACEHOLDER;
-  const metricLabel = itemConfig?.label ?? item.name;
-  const heroValue = formatter ? formatter(item.value, item.name ?? "", item, 0, item.payload) : formatChartValue(item.value, valueType);
-  const periodCaption = labelFormatter ? labelFormatter(label, payload) : (typeof label === "string" ? config[label]?.label : null) ?? label;
-  return /* @__PURE__ */ jsxs("div", { className: cn(chartTooltipVariants({ size }), className), children: [
-    metricLabel != null && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 [&>svg]:size-3 [&>svg]:shrink-0", children: [
-      !hideIndicator && (itemConfig?.icon ? /* @__PURE__ */ jsx2(itemConfig.icon, {}) : /* @__PURE__ */ jsx2(
-        "span",
-        {
-          "aria-hidden": "true",
-          className: cn(chartTooltipDotVariants({ size })),
-          style: { backgroundColor: dotColor }
-        }
-      )),
-      /* @__PURE__ */ jsx2("span", { className: cn(chartTooltipLabelVariants({ size })), children: metricLabel })
-    ] }),
-    /* @__PURE__ */ jsx2("p", { className: cn(chartTooltipValueVariants({ size })), children: heroValue }),
-    periodCaption != null && periodCaption !== "" && /* @__PURE__ */ jsx2("p", { className: "text-gdt-xs text-fg-caption-placeholder", children: periodCaption })
-  ] });
-}
-var chartLegendItemVariants = cva(
-  "group/legend-item flex items-center rounded-md leading-none text-fg-primary transition-colors [&>svg]:shrink-0",
-  {
-    variants: {
-      size: {
-        sm: "gap-1.5 px-2 py-1 text-gdt-xs [&>svg]:size-3",
-        md: "gap-2 px-2.5 py-1.5 text-gdt-sm [&>svg]:size-3.5"
-      },
-      interactive: {
-        true: "cursor-pointer outline-none hover:bg-surface-raised focus-visible:bg-surface-raised",
-        false: ""
-      },
-      inactive: {
-        true: "text-fg-caption-placeholder line-through",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      interactive: false,
-      inactive: false
-    }
-  }
-);
-var chartLegendMarkerSizeVariants = cva("shrink-0", {
-  variants: {
-    marker: {
-      dot: "rounded-full",
-      square: "rounded-[2px]",
-      line: "rounded-full"
-    },
-    size: {
-      sm: "",
-      md: ""
-    }
-  },
-  compoundVariants: [
-    { marker: ["dot", "square"], size: "sm", className: "size-2" },
-    { marker: ["dot", "square"], size: "md", className: "size-2.5" },
-    { marker: "line", size: "sm", className: "h-[3px] w-3" },
-    { marker: "line", size: "md", className: "h-[3px] w-3.5" }
-  ],
-  defaultVariants: { marker: "dot", size: "md" }
-});
-function getPayloadConfigFromPayload(config, payload, key) {
-  if (typeof payload !== "object" || payload === null) {
-    return void 0;
-  }
-  const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
-  let configLabelKey = key;
-  if (key in payload && typeof payload[key] === "string") {
-    configLabelKey = payload[key];
-  } else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") {
-    configLabelKey = payloadPayload[key];
-  }
-  return configLabelKey in config ? config[configLabelKey] : config[key];
-}
-
-// src/components/ui/sparkline.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var SPARKLINE_LAYOUT = {
-  sm: {
-    width: 72,
-    height: 24,
-    strokeWidth: 1.5,
-    dotRadius: 2,
-    margin: { top: 4, right: 4, bottom: 2, left: 2 },
-    barRadius: 1,
-    maxBarSize: 6
-  },
-  md: {
-    width: 104,
-    height: 32,
-    strokeWidth: 2,
-    dotRadius: 2.5,
-    margin: { top: 5, right: 5, bottom: 2, left: 2 },
-    barRadius: 2,
-    maxBarSize: 8
-  },
-  lg: {
-    width: 144,
-    height: 44,
-    strokeWidth: 2,
-    dotRadius: 3,
-    margin: { top: 6, right: 6, bottom: 3, left: 3 },
-    barRadius: 2,
-    maxBarSize: 10
-  }
-};
-var TREND_COLOR = {
-  up: "var(--color-status-success)",
-  down: "var(--color-status-danger)",
-  flat: "var(--color-fg-secondary)"
+const TREND_COLOR = {
+	up: "var(--color-status-success)",
+	down: "var(--color-status-danger)",
+	flat: "var(--color-fg-secondary)"
 };
+/**
+* Derive sentiment from the series: compare the last value to the first and
+* read flat when the change is a small fraction of the overall range.
+*/
 function resolveTrend(data) {
-  if (data.length < 2) return "flat";
-  const first = data[0];
-  const last = data[data.length - 1];
-  const min = Math.min(...data);
-  const max = Math.max(...data);
-  const range = max - min || 1;
-  const delta = last - first;
-  if (Math.abs(delta) / range < 0.05) return "flat";
-  return delta > 0 ? "up" : "down";
+	if (data.length < 2) return "flat";
+	const first = data[0];
+	const last = data[data.length - 1];
+	const min = Math.min(...data);
+	const range = Math.max(...data) - min || 1;
+	const delta = last - first;
+	if (Math.abs(delta) / range < .05) return "flat";
+	return delta > 0 ? "up" : "down";
 }
-function SparklineEndDot({
-  cx,
-  cy,
-  index,
-  lastIndex,
-  radius
-}) {
-  if (cx == null || cy == null || index !== lastIndex) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx3(
-    "circle",
-    {
-      cx,
-      cy,
-      r: radius,
-      fill: "var(--color-value)",
-      stroke: "var(--color-surface)",
-      strokeWidth: 2
-    }
-  );
+/**
+* Custom dot passed to recharts as `dot={<SparklineEndDot ... />}`. recharts
+* clones it for every point, injecting `cx`/`cy`/`index`; we only paint the
+* latest point so the series carries a single end-point marker.
+*/
+function SparklineEndDot({ cx, cy, index, lastIndex, radius }) {
+	if (cx == null || cy == null || index !== lastIndex) return null;
+	return /* @__PURE__ */ jsx("circle", {
+		cx,
+		cy,
+		r: radius,
+		fill: "var(--color-value)",
+		stroke: "var(--color-surface)",
+		strokeWidth: 2
+	});
 }
-function SparklineBarShape({
-  x,
-  y,
-  width,
-  height,
-  index,
-  value,
-  lastIndex,
-  radius,
-  dotRadius
-}) {
-  if (x == null || y == null || width == null || height == null) {
-    return null;
-  }
-  const markerY = typeof value === "number" && value < 0 ? y + height : y;
-  return /* @__PURE__ */ jsxs2("g", { children: [
-    /* @__PURE__ */ jsx3(
-      "rect",
-      {
-        x,
-        y,
-        width,
-        height,
-        rx: radius,
-        ry: radius,
-        fill: "var(--color-value)"
-      }
-    ),
-    index === lastIndex ? /* @__PURE__ */ jsx3(
-      "circle",
-      {
-        cx: x + width / 2,
-        cy: markerY,
-        r: dotRadius,
-        fill: "var(--color-value)",
-        stroke: "var(--color-surface)",
-        strokeWidth: 2
-      }
-    ) : null
-  ] });
+/**
+* Bars do not support `dot`, so the marker is rendered as part of a custom bar
+* shape. Only the latest bar receives the end-point marker.
+*/
+function SparklineBarShape({ x, y, width, height, index, value, lastIndex, radius, dotRadius }) {
+	if (x == null || y == null || width == null || height == null) return null;
+	const markerY = typeof value === "number" && value < 0 ? y + height : y;
+	return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+		x,
+		y,
+		width,
+		height,
+		rx: radius,
+		ry: radius,
+		fill: "var(--color-value)"
+	}), index === lastIndex ? /* @__PURE__ */ jsx("circle", {
+		cx: x + width / 2,
+		cy: markerY,
+		r: dotRadius,
+		fill: "var(--color-value)",
+		stroke: "var(--color-surface)",
+		strokeWidth: 2
+	}) : null] });
 }
-function Sparkline({
-  data,
-  type = "line",
-  size,
-  trend,
-  showMarker = true,
-  tooltip = false,
-  label = "Value",
-  labels,
-  valueType = "number",
-  className,
-  style,
-  ...props
-}) {
-  const layout = SPARKLINE_LAYOUT[useComponentSize(size)];
-  const resolvedTrend = trend ?? resolveTrend(data);
-  const color = TREND_COLOR[resolvedTrend];
-  const chartData = data.map((value, i) => ({
-    x: labels?.[i] ?? `${i + 1}`,
-    value
-  }));
-  const lastIndex = data.length - 1;
-  const config = {
-    value: { label, color }
-  };
-  const showDot = showMarker && data.length >= 2;
-  const endDot = showDot ? /* @__PURE__ */ jsx3(SparklineEndDot, { lastIndex, radius: layout.dotRadius }) : false;
-  const barShape = showDot ? /* @__PURE__ */ jsx3(
-    SparklineBarShape,
-    {
-      lastIndex,
-      radius: layout.barRadius,
-      dotRadius: layout.dotRadius
-    }
-  ) : void 0;
-  const activeDot = tooltip ? {
-    r: layout.dotRadius + 0.5,
-    fill: "var(--color-value)",
-    stroke: "var(--color-surface)",
-    strokeWidth: 2
-  } : false;
-  const tooltipNode = tooltip ? /* @__PURE__ */ jsx3(
-    ChartTooltip,
-    {
-      cursor: false,
-      content: /* @__PURE__ */ jsx3(ChartTooltipContent, { size: "xs", valueType })
-    }
-  ) : null;
-  const ariaLabel = props["aria-label"] ?? `${label} sparkline, trend ${resolvedTrend}`;
-  if (data.length < 2) {
-    return /* @__PURE__ */ jsx3(
-      "div",
-      {
-        ...props,
-        "aria-label": ariaLabel,
-        role: "img",
-        className: cn("w-full", className),
-        style: { height: layout.height, ...style }
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx3(
-    ChartContainer,
-    {
-      ...props,
-      "aria-label": ariaLabel,
-      role: "img",
-      config,
-      className: cn("aspect-auto w-full", className),
-      style: { height: layout.height, ...style },
-      children: type === "bar" ? /* @__PURE__ */ jsxs2(BarChart, { accessibilityLayer: true, data: chartData, margin: layout.margin, children: [
-        tooltipNode,
-        /* @__PURE__ */ jsx3(
-          Bar,
-          {
-            dataKey: "value",
-            fill: "var(--color-value)",
-            radius: layout.barRadius,
-            maxBarSize: layout.maxBarSize,
-            shape: barShape,
-            isAnimationActive: false
-          }
-        )
-      ] }) : type === "area" ? /* @__PURE__ */ jsxs2(AreaChart, { accessibilityLayer: true, data: chartData, margin: layout.margin, children: [
-        tooltip ? /* @__PURE__ */ jsx3(XAxis, { dataKey: "x", hide: true }) : null,
-        tooltipNode,
-        /* @__PURE__ */ jsx3(
-          Area,
-          {
-            type: "monotone",
-            dataKey: "value",
-            stroke: "var(--color-value)",
-            strokeWidth: layout.strokeWidth,
-            strokeLinejoin: "round",
-            strokeLinecap: "round",
-            fill: "var(--color-value)",
-            fillOpacity: 0.14,
-            dot: endDot,
-            activeDot,
-            isAnimationActive: false
-          }
-        )
-      ] }) : /* @__PURE__ */ jsxs2(LineChart, { accessibilityLayer: true, data: chartData, margin: layout.margin, children: [
-        tooltip ? /* @__PURE__ */ jsx3(XAxis, { dataKey: "x", hide: true }) : null,
-        tooltipNode,
-        /* @__PURE__ */ jsx3(
-          Line,
-          {
-            type: "monotone",
-            dataKey: "value",
-            stroke: "var(--color-value)",
-            strokeWidth: layout.strokeWidth,
-            strokeLinejoin: "round",
-            strokeLinecap: "round",
-            dot: endDot,
-            activeDot,
-            isAnimationActive: false
-          }
-        )
-      ] })
-    }
-  );
+function Sparkline({ data, type = "line", size, trend, showMarker = true, tooltip = false, label = "Value", labels, valueType = "number", className, style, ...props }) {
+	const layout = SPARKLINE_LAYOUT[useComponentSize(size)];
+	const resolvedTrend = trend ?? resolveTrend(data);
+	const color = TREND_COLOR[resolvedTrend];
+	const chartData = data.map((value, i) => ({
+		x: labels?.[i] ?? `${i + 1}`,
+		value
+	}));
+	const lastIndex = data.length - 1;
+	const config = { value: {
+		label,
+		color
+	} };
+	const showDot = showMarker && data.length >= 2;
+	const endDot = showDot ? /* @__PURE__ */ jsx(SparklineEndDot, {
+		lastIndex,
+		radius: layout.dotRadius
+	}) : false;
+	const barShape = showDot ? /* @__PURE__ */ jsx(SparklineBarShape, {
+		lastIndex,
+		radius: layout.barRadius,
+		dotRadius: layout.dotRadius
+	}) : void 0;
+	const activeDot = tooltip ? {
+		r: layout.dotRadius + .5,
+		fill: "var(--color-value)",
+		stroke: "var(--color-surface)",
+		strokeWidth: 2
+	} : false;
+	const tooltipNode = tooltip ? /* @__PURE__ */ jsx(ChartTooltip, {
+		cursor: false,
+		content: /* @__PURE__ */ jsx(ChartTooltipContent, {
+			size: "xs",
+			valueType
+		})
+	}) : null;
+	const ariaLabel = props["aria-label"] ?? `${label} sparkline, trend ${resolvedTrend}`;
+	if (data.length < 2) return /* @__PURE__ */ jsx("div", {
+		...props,
+		"aria-label": ariaLabel,
+		role: "img",
+		className: cn("w-full", className),
+		style: {
+			height: layout.height,
+			...style
+		}
+	});
+	return /* @__PURE__ */ jsx(ChartContainer, {
+		...props,
+		"aria-label": ariaLabel,
+		role: "img",
+		config,
+		className: cn("aspect-auto w-full", className),
+		style: {
+			height: layout.height,
+			...style
+		},
+		children: type === "bar" ? /* @__PURE__ */ jsxs(BarChart, {
+			accessibilityLayer: true,
+			data: chartData,
+			margin: layout.margin,
+			children: [tooltipNode, /* @__PURE__ */ jsx(Bar, {
+				dataKey: "value",
+				fill: "var(--color-value)",
+				radius: layout.barRadius,
+				maxBarSize: layout.maxBarSize,
+				shape: barShape,
+				isAnimationActive: false
+			})]
+		}) : type === "area" ? /* @__PURE__ */ jsxs(AreaChart, {
+			accessibilityLayer: true,
+			data: chartData,
+			margin: layout.margin,
+			children: [
+				tooltip ? /* @__PURE__ */ jsx(XAxis, {
+					dataKey: "x",
+					hide: true
+				}) : null,
+				tooltipNode,
+				/* @__PURE__ */ jsx(Area, {
+					type: "monotone",
+					dataKey: "value",
+					stroke: "var(--color-value)",
+					strokeWidth: layout.strokeWidth,
+					strokeLinejoin: "round",
+					strokeLinecap: "round",
+					fill: "var(--color-value)",
+					fillOpacity: .14,
+					dot: endDot,
+					activeDot,
+					isAnimationActive: false
+				})
+			]
+		}) : /* @__PURE__ */ jsxs(LineChart, {
+			accessibilityLayer: true,
+			data: chartData,
+			margin: layout.margin,
+			children: [
+				tooltip ? /* @__PURE__ */ jsx(XAxis, {
+					dataKey: "x",
+					hide: true
+				}) : null,
+				tooltipNode,
+				/* @__PURE__ */ jsx(Line, {
+					type: "monotone",
+					dataKey: "value",
+					stroke: "var(--color-value)",
+					strokeWidth: layout.strokeWidth,
+					strokeLinejoin: "round",
+					strokeLinecap: "round",
+					dot: endDot,
+					activeDot,
+					isAnimationActive: false
+				})
+			]
+		})
+	});
 }
-export {
-  SPARKLINE_LAYOUT,
-  Sparkline
-};
-//# sourceMappingURL=sparkline.js.map
+//#endregion
+export { SPARKLINE_LAYOUT, Sparkline };