@flipdish/ui-library 0.2.2 → 0.3.0

package/dist/components/organisms/Charts/components/charts-base.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+
+/**
+ * Selects evenly spaced items from an array. Used for rendering
+ * certain number of x-axis labels.
+ * @param dataArray - The array of items to select from.
+ * @param count - The number of items to select.
+ * @returns The selected items.
+ */
+const selectEvenlySpacedItems = (dataArray, count) => {
+    if (!dataArray || dataArray.length === 0) {
+        return [];
+    }
+    const selectedItems = [];
+    if (dataArray.length === 1) {
+        for (let i = 0; i < count; i++) {
+            selectedItems.push(dataArray[0]);
+        }
+        return selectedItems;
+    }
+    for (let i = 0; i < count; i++) {
+        const targetIndex = Math.round((i * (dataArray.length - 1)) / (count - 1));
+        const boundedIndex = Math.max(0, Math.min(targetIndex, dataArray.length - 1));
+        selectedItems.push(dataArray[boundedIndex]);
+    }
+    return selectedItems;
+};
+/**
+ * Renders the legend content for a chart.
+ * @param reversed - Whether to reverse the payload.
+ * @param payload - The payload of the legend.
+ * @param align - The alignment of the legend.
+ * @param layout - The layout of the legend.
+ * @param className - The class name of the legend.
+ * @returns The legend content.
+ */
+const ChartLegendContent = ({ reversed, payload, align, layout, className, }) => {
+    payload = reversed ? [...(payload ?? [])].reverse() : payload;
+    return (jsx("ul", { className: cx('flex', layout === 'vertical'
+            ? `flex-col gap-1 pl-4 ${align === 'center' ? 'items-center' : align === 'right' ? 'items-start' : 'items-start'}`
+            : `flex-row gap-3 ${align === 'center' ? 'justify-center' : align === 'right' ? 'justify-end' : 'justify-start'}`, className), children: payload?.map((entry, index) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: we need to use the index as the key because the payload is an array of objects
+        jsxs("li", { className: "flex items-center gap-2 text-sm text-tertiary", children: [jsx("span", { className: cx('block size-2 rounded-full bg-current ring-[0.5px] ring-black/10 ring-inset', entry.payload?.className) }), entry.value] }, index))) }));
+};
+const ChartTooltipContent = ({ active, payload, label, isRadialChart, isPieChart, formatter, labelFormatter }) => {
+    const canRender = active && payload && payload.length;
+    if (!canRender) {
+        return null;
+    }
+    const isSingleDataPoint = payload.length === 1;
+    // If it's a single data point, we use the value as the title and
+    // the name as the secondary title.
+    let title = isSingleDataPoint ? (isRadialChart ? payload[0].value : isPieChart ? payload[0].value : payload[0].value) : label;
+    let secondaryTitle = isSingleDataPoint ? (isRadialChart ? payload[0].payload.name : isPieChart ? payload[0].name : label) : payload;
+    title =
+        isSingleDataPoint && formatter
+            ? formatter(title, payload?.[0].name || label, payload[0], 0, payload)
+            : labelFormatter
+                ? labelFormatter(title, payload)
+                : title;
+    secondaryTitle = isSingleDataPoint && labelFormatter ? labelFormatter(secondaryTitle, payload) : secondaryTitle;
+    return (jsxs("div", { className: "flex flex-col gap-0.5 rounded-lg bg-primary-solid px-3 py-2 shadow-lg", children: [jsx("p", { className: "text-xs font-semibold text-white", children: title }), !secondaryTitle ? null : Array.isArray(secondaryTitle) ? (jsx("div", { children: secondaryTitle.map((entry, index) => (
+                // biome-ignore lint/suspicious/noArrayIndexKey: we need to use the index as the key because the secondaryTitle is an array of objects
+                jsx("p", { className: cx('text-xs text-tooltip-supporting-text'), children: `${entry.name}: ${formatter ? formatter(entry.value, entry.name, entry, index, entry.payload) : entry.value}` }, index))) })) : (jsx("p", { className: "text-xs text-tooltip-supporting-text", children: secondaryTitle }))] }));
+};
+
+export { ChartLegendContent, ChartTooltipContent, selectEvenlySpacedItems };
+//# sourceMappingURL=charts-base.js.map

package/dist/components/organisms/Charts/components/charts-base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"charts-base.js","sources":["../../../../../src/components/organisms/Charts/components/charts-base.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;AAQA;;;;;;AAMG;MACU,uBAAuB,GAAG,CAA+B,SAAY,EAAE,KAAa,KAAsB;IACrH,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;AACxC,QAAA,OAAO,EAAE;IACX;IAEA,MAAM,aAAa,GAAqB,EAAE;AAE1C,IAAA,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;AAC1B,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE;YAC9B,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;QAClC;AACA,QAAA,OAAO,aAAa;IACtB;AAEA,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE;QAC9B,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,KAAK,GAAG,CAAC,CAAC,CAAC;QAC1E,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAC7E,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;IAC7C;AAEA,IAAA,OAAO,aAAa;AACtB;AAEA;;;;;;;;AAQG;AACI,MAAM,kBAAkB,GAAG,CAAC,EACjC,QAAQ,EACR,OAAO,EACP,KAAK,EACL,MAAM,EACN,SAAS,GACuD,KAAI;IACpE,OAAO,GAAG,QAAQ,GAAG,CAAC,IAAI,OAAO,IAAI,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,GAAG,OAAO;IAE7D,QACEA,GAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,MAAM,EACN,MAAM,KAAK;cACP,uBAAuB,KAAK,KAAK,QAAQ,GAAG,cAAc,GAAG,KAAK,KAAK,OAAO,GAAG,aAAa,GAAG,aAAa,CAAA;AAChH,cAAE,CAAA,eAAA,EAAkB,KAAK,KAAK,QAAQ,GAAG,gBAAgB,GAAG,KAAK,KAAK,OAAO,GAAG,aAAa,GAAG,eAAe,CAAA,CAAE,EACnH,SAAS,CACV,EAAA,QAAA,EAEA,OAAO,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK;;AAEzB,QAAAC,IAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,+CAA+C,EAAA,QAAA,EAAA,CAC3DD,GAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,4EAA4E,EAC3E,KAAK,CAAC,OAAkC,EAAE,SAAS,CACrD,EAAA,CACD,EACD,KAAK,CAAC,KAAK,CAAA,EAAA,EAPqD,KAAK,CAQnE,CACN,CAAC,EAAA,CACC;AAET;MAWa,mBAAmB,GAAG,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAA4B,KAAI;IAChJ,MAAM,SAAS,GAAG,MAAM,IAAI,OAAO,IAAI,OAAO,CAAC,MAAM;IAErD,IAAI,CAAC,SAAS,EAAE;AACd,QAAA,OAAO,IAAI;IACb;AAEA,IAAA,MAAM,iBAAiB,GAAG,OAAO,CAAC,MAAM,KAAK,CAAC;;;IAI9C,IAAI,KAAK,GAAG,iBAAiB,IAAI,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,UAAU,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,KAAK;AAC7H,IAAA,IAAI,cAAc,GAAG,iBAAiB,IAAI,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,GAAG,UAAU,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,KAAK,IAAI,OAAO;IAEnI,KAAK;AACH,QAAA,iBAAiB,IAAI;cACjB,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,CAAC,CAAC,CAAC,IAAI,IAAI,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,OAAO;AACrE,cAAE;AACA,kBAAE,cAAc,CAAC,KAAK,EAAE,OAAO;kBAC7B,KAAK;AACb,IAAA,cAAc,GAAG,iBAAiB,IAAI,cAAc,GAAG,cAAc,CAAC,cAAc,EAAE,OAAO,CAAC,GAAG,cAAc;IAE/G,QACEC,cAAK,SAAS,EAAC,uEAAuE,EAAA,QAAA,EAAA,CACpFD,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,kCAAkC,YAAE,KAAK,EAAA,CAAK,EAE1D,CAAC,cAAc,GAAG,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,IACrDA,GAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EACG,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK;;AAE/B,gBAAAA,GAAA,CAAA,GAAA,EAAA,EAAe,SAAS,EAAE,EAAE,CAAC,sCAAsC,CAAC,EAAA,QAAA,EACjE,CAAA,EAAG,KAAK,CAAC,IAAI,CAAA,EAAA,EAAK,SAAS,GAAG,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,KAAK,CAAA,CAAE,EAAA,EADxG,KAAK,CAET,CACL,CAAC,EAAA,CACE,KAENA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAE,cAAc,EAAA,CAAK,CACzE,CAAA,EAAA,CACG;AAEV;;;;"}

package/dist/components/organisms/Charts/components/line-chart.cjs

@@ -0,0 +1,58 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var useBreakpoints = require('@flipdish/ui-library/hooks/useBreakpoints');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var React = require('react');
+var recharts = require('recharts');
+var chartsBase = require('./charts-base.cjs');
+
+const defaultData = [
+    { date: new Date(2026, 0, 1), A: 600, B: 400, C: 100 },
+    { date: new Date(2026, 1, 1), A: 620, B: 405, C: 160 },
+    { date: new Date(2026, 2, 1), A: 630, B: 400, C: 170 },
+    { date: new Date(2026, 3, 1), A: 650, B: 410, C: 190 },
+    { date: new Date(2026, 4, 1), A: 600, B: 320, C: 200 },
+    { date: new Date(2026, 5, 1), A: 650, B: 430, C: 230 },
+    { date: new Date(2026, 6, 1), A: 620, B: 400, C: 200 },
+    { date: new Date(2026, 7, 1), A: 750, B: 540, C: 300 },
+    { date: new Date(2026, 8, 1), A: 780, B: 490, C: 390 },
+    { date: new Date(2026, 9, 1), A: 750, B: 450, C: 300 },
+    { date: new Date(2026, 10, 1), A: 780, B: 480, C: 340 },
+    { date: new Date(2026, 11, 1), A: 820, B: 500, C: 450 },
+];
+const defaultSeries = [
+    { dataKey: 'A', name: 'Series 1', colorClassName: 'text-utility-brand-600', fill: 'gradient' },
+    { dataKey: 'B', name: 'Series 2', colorClassName: 'text-utility-brand-400' },
+    { dataKey: 'C', name: 'Series 3', colorClassName: 'text-utility-brand-700' },
+];
+const defaultXTickFormatter = (value) => value instanceof Date ? value.toLocaleDateString(undefined, { month: 'short' }) : String(value);
+const defaultValueFormatter = (value) => Number(value).toLocaleString();
+const defaultLabelFormatter = (value) => value instanceof Date ? value.toLocaleDateString(undefined, { month: 'short', year: 'numeric' }) : String(value);
+const areaClassName = '[&_.recharts-area-area]:translate-y-1.5 [&_.recharts-area-area]:[clip-path:inset(0_0_6px_0)]';
+const activeDot = { className: 'fill-bg-primary stroke-utility-brand-600 stroke-2' };
+const LineChart = ({ data = defaultData, series = defaultSeries, xDataKey = 'date', xAxisLabel = 'Month', yAxisLabel = 'Active users', xTickFormatter = defaultXTickFormatter, valueFormatter = defaultValueFormatter, labelFormatter = defaultLabelFormatter, showLegend = true, showTooltip = true, margin, className, }) => {
+    const isDesktop = useBreakpoints.useBreakpoint('lg');
+    const id = React.useId();
+    const gradientId = (index) => `${id}-gradient-${index}`;
+    const patternId = (index) => `${id}-pattern-${index}`;
+    const fillFor = (s, index) => {
+        if (s.fill === 'gradient')
+            return `url(#${gradientId(index)})`;
+        if (s.fill === 'pattern')
+            return `url(#${patternId(index)})`;
+        return 'none';
+    };
+    return (jsxRuntime.jsx("div", { className: "flex h-60 flex-col gap-2", children: jsxRuntime.jsx(recharts.ResponsiveContainer, { initialDimension: { width: 1, height: 1 }, className: "h-full", children: jsxRuntime.jsxs(recharts.AreaChart, { data: data, className: cx.cx('text-tertiary [&_.recharts-text]:text-xs', className), margin: margin ?? { left: 5, right: 5, top: isDesktop ? 12 : 6, bottom: isDesktop ? 16 : 0 }, children: [jsxRuntime.jsx("defs", { children: series.map((s, index) => {
+                            if (s.fill === 'gradient') {
+                                return (jsxRuntime.jsxs("linearGradient", { id: gradientId(index), x1: "0", y1: "0", x2: "0", y2: "1", children: [jsxRuntime.jsx("stop", { offset: "5%", stopColor: "currentColor", className: s.colorClassName, stopOpacity: "0.7" }), jsxRuntime.jsx("stop", { offset: "95%", stopColor: "currentColor", className: s.colorClassName, stopOpacity: "0" })] }, s.dataKey));
+                            }
+                            if (s.fill === 'pattern') {
+                                return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("linearGradient", { id: `${patternId(index)}-gradient`, x1: "0", y1: "0", x2: "0", y2: "1", children: [jsxRuntime.jsx("stop", { offset: "0%", stopColor: "currentColor", className: "text-utility-neutral-500", stopOpacity: "0.8" }), jsxRuntime.jsx("stop", { offset: "80%", stopColor: "currentColor", className: "text-utility-neutral-500", stopOpacity: "0" })] }), jsxRuntime.jsxs("pattern", { id: patternId(index), width: "8", height: "100%", patternUnits: "userSpaceOnUse", children: [jsxRuntime.jsx("line", { x1: "0", y1: "0", x2: "0", y2: "100%", stroke: "currentColor", className: "text-utility-neutral-200", strokeWidth: "1.5" }), jsxRuntime.jsx("rect", { width: "100%", height: "100%", fill: `url(#${patternId(index)}-gradient)`, fillOpacity: 0.15 })] })] }, s.dataKey));
+                            }
+                            return null;
+                        }) }), jsxRuntime.jsx(recharts.CartesianGrid, { vertical: false, stroke: "currentColor", className: "text-utility-neutral-100" }), showLegend && (jsxRuntime.jsx(recharts.Legend, { align: "right", verticalAlign: "top", layout: isDesktop ? 'vertical' : 'horizontal', content: jsxRuntime.jsx(chartsBase.ChartLegendContent, { className: "-translate-y-2" }) })), jsxRuntime.jsx(recharts.XAxis, { fill: "currentColor", axisLine: false, tickLine: false, tickMargin: 10, interval: "preserveStartEnd", dataKey: xDataKey, tickFormatter: xTickFormatter, padding: { left: 10, right: 10 }, children: isDesktop && xAxisLabel && (jsxRuntime.jsx(recharts.Label, { fill: "currentColor", className: "text-xs! font-medium max-lg:hidden", position: "bottom", children: xAxisLabel })) }), jsxRuntime.jsx(recharts.YAxis, { fill: "currentColor", axisLine: false, tickLine: false, interval: "preserveStartEnd", tickFormatter: valueFormatter, children: yAxisLabel && (jsxRuntime.jsx(recharts.Label, { value: yAxisLabel, fill: "currentColor", className: "text-xs! font-medium", style: { textAnchor: 'middle' }, angle: -90, position: "insideLeft" })) }), showTooltip && (jsxRuntime.jsx(recharts.Tooltip, { content: jsxRuntime.jsx(chartsBase.ChartTooltipContent, {}), formatter: valueFormatter, labelFormatter: labelFormatter, cursor: { className: 'stroke-utility-brand-600 stroke-2' } })), series.map((s, index) => (jsxRuntime.jsx(recharts.Area, { isAnimationActive: false, className: cx.cx(s.colorClassName, areaClassName), dataKey: s.dataKey, name: s.name ?? s.dataKey, type: "monotone", stroke: "currentColor", strokeWidth: 2, strokeDasharray: s.dashed ? '0.1 8' : undefined, strokeLinecap: s.dashed ? 'round' : undefined, fill: fillFor(s, index), fillOpacity: s.fill === 'gradient' ? 0.1 : 1, activeDot: activeDot }, s.dataKey)))] }) }) }));
+};
+
+exports.LineChart = LineChart;
+//# sourceMappingURL=line-chart.cjs.map

package/dist/components/organisms/Charts/components/line-chart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"line-chart.cjs","sources":["../../../../../src/components/organisms/Charts/components/line-chart.tsx"],"sourcesContent":[null],"names":["useBreakpoint","useId","_jsx","ResponsiveContainer","_jsxs","AreaChart","cx","Fragment","CartesianGrid","Legend","ChartLegendContent","XAxis","Label","YAxis","Tooltip","ChartTooltipContent","Area"],"mappings":"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"}

package/dist/components/organisms/Charts/components/line-chart.d.ts

@@ -0,0 +1,60 @@
+import { type Margin } from 'recharts';
+/** Fill style rendered beneath a series line. */
+export type LineChartFill = 'gradient' | 'pattern' | 'none';
+type ChartValueFormatter = (value: any) => string;
+export interface LineChartSeries {
+    /** Key in each data row holding this series' value. */
+    dataKey: string;
+    /** Display name shown in the legend and tooltip. Defaults to `dataKey`. */
+    name?: string;
+    /** Tailwind `text-*` utility controlling the stroke and fill colour. */
+    colorClassName?: string;
+    /**
+     * Fill style rendered beneath the line.
+     * @default 'none'
+     */
+    fill?: LineChartFill;
+    /**
+     * Render the stroke as a dashed line.
+     * @default false
+     */
+    dashed?: boolean;
+}
+export interface LineChartProps {
+    /** Rows of data to plot. */
+    data?: Array<Record<string, unknown>>;
+    /** Series configuration, one entry per line. */
+    series?: LineChartSeries[];
+    /**
+     * Key in each data row holding the x-axis value.
+     * @default 'date'
+     */
+    xDataKey?: string;
+    /** Label rendered beneath the x-axis (desktop only). */
+    xAxisLabel?: string;
+    /** Label rendered alongside the y-axis. */
+    yAxisLabel?: string;
+    /** Formats x-axis ticks. Defaults to a short month for `Date` values. */
+    xTickFormatter?: ChartValueFormatter;
+    /** Formats y-axis ticks and tooltip values. Defaults to a localised number. */
+    valueFormatter?: ChartValueFormatter;
+    /** Formats the tooltip label. Defaults to a short month + year for `Date` values. */
+    labelFormatter?: ChartValueFormatter;
+    /**
+     * Whether to render the legend.
+     * @default true
+     */
+    showLegend?: boolean;
+    /**
+     * Whether to render the tooltip on hover.
+     * @default true
+     */
+    showTooltip?: boolean;
+    /** Overrides the chart margin. */
+    margin?: Margin;
+    /** Additional class name for the chart container. */
+    className?: string;
+}
+export declare const LineChart: ({ data, series, xDataKey, xAxisLabel, yAxisLabel, xTickFormatter, valueFormatter, labelFormatter, showLegend, showTooltip, margin, className, }: LineChartProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=line-chart.d.ts.map

package/dist/components/organisms/Charts/components/line-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"line-chart.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/Charts/components/line-chart.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAiD,KAAK,MAAM,EAA8C,MAAM,UAAU,CAAC;AAGlI,iDAAiD;AACjD,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;AAG5D,KAAK,mBAAmB,GAAG,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,CAAC;AAElD,MAAM,WAAW,eAAe;IAC9B,uDAAuD;IACvD,OAAO,EAAE,MAAM,CAAC;IAChB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B,4BAA4B;IAC5B,IAAI,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IACtC,gDAAgD;IAChD,MAAM,CAAC,EAAE,eAAe,EAAE,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wDAAwD;IACxD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yEAAyE;IACzE,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC,+EAA+E;IAC/E,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC,qFAAqF;IACrF,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkCD,eAAO,MAAM,SAAS,GAAI,iJAavB,cAAc,gCA0HhB,CAAC"}

package/dist/components/organisms/Charts/components/line-chart.js

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useBreakpoint } from '@flipdish/ui-library/hooks/useBreakpoints';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { useId, Fragment } from 'react';
+import { ResponsiveContainer, AreaChart, CartesianGrid, Legend, XAxis, Label, YAxis, Tooltip, Area } from 'recharts';
+import { ChartLegendContent, ChartTooltipContent } from './charts-base.js';
+
+const defaultData = [
+    { date: new Date(2026, 0, 1), A: 600, B: 400, C: 100 },
+    { date: new Date(2026, 1, 1), A: 620, B: 405, C: 160 },
+    { date: new Date(2026, 2, 1), A: 630, B: 400, C: 170 },
+    { date: new Date(2026, 3, 1), A: 650, B: 410, C: 190 },
+    { date: new Date(2026, 4, 1), A: 600, B: 320, C: 200 },
+    { date: new Date(2026, 5, 1), A: 650, B: 430, C: 230 },
+    { date: new Date(2026, 6, 1), A: 620, B: 400, C: 200 },
+    { date: new Date(2026, 7, 1), A: 750, B: 540, C: 300 },
+    { date: new Date(2026, 8, 1), A: 780, B: 490, C: 390 },
+    { date: new Date(2026, 9, 1), A: 750, B: 450, C: 300 },
+    { date: new Date(2026, 10, 1), A: 780, B: 480, C: 340 },
+    { date: new Date(2026, 11, 1), A: 820, B: 500, C: 450 },
+];
+const defaultSeries = [
+    { dataKey: 'A', name: 'Series 1', colorClassName: 'text-utility-brand-600', fill: 'gradient' },
+    { dataKey: 'B', name: 'Series 2', colorClassName: 'text-utility-brand-400' },
+    { dataKey: 'C', name: 'Series 3', colorClassName: 'text-utility-brand-700' },
+];
+const defaultXTickFormatter = (value) => value instanceof Date ? value.toLocaleDateString(undefined, { month: 'short' }) : String(value);
+const defaultValueFormatter = (value) => Number(value).toLocaleString();
+const defaultLabelFormatter = (value) => value instanceof Date ? value.toLocaleDateString(undefined, { month: 'short', year: 'numeric' }) : String(value);
+const areaClassName = '[&_.recharts-area-area]:translate-y-1.5 [&_.recharts-area-area]:[clip-path:inset(0_0_6px_0)]';
+const activeDot = { className: 'fill-bg-primary stroke-utility-brand-600 stroke-2' };
+const LineChart = ({ data = defaultData, series = defaultSeries, xDataKey = 'date', xAxisLabel = 'Month', yAxisLabel = 'Active users', xTickFormatter = defaultXTickFormatter, valueFormatter = defaultValueFormatter, labelFormatter = defaultLabelFormatter, showLegend = true, showTooltip = true, margin, className, }) => {
+    const isDesktop = useBreakpoint('lg');
+    const id = useId();
+    const gradientId = (index) => `${id}-gradient-${index}`;
+    const patternId = (index) => `${id}-pattern-${index}`;
+    const fillFor = (s, index) => {
+        if (s.fill === 'gradient')
+            return `url(#${gradientId(index)})`;
+        if (s.fill === 'pattern')
+            return `url(#${patternId(index)})`;
+        return 'none';
+    };
+    return (jsx("div", { className: "flex h-60 flex-col gap-2", children: jsx(ResponsiveContainer, { initialDimension: { width: 1, height: 1 }, className: "h-full", children: jsxs(AreaChart, { data: data, className: cx('text-tertiary [&_.recharts-text]:text-xs', className), margin: margin ?? { left: 5, right: 5, top: isDesktop ? 12 : 6, bottom: isDesktop ? 16 : 0 }, children: [jsx("defs", { children: series.map((s, index) => {
+                            if (s.fill === 'gradient') {
+                                return (jsxs("linearGradient", { id: gradientId(index), x1: "0", y1: "0", x2: "0", y2: "1", children: [jsx("stop", { offset: "5%", stopColor: "currentColor", className: s.colorClassName, stopOpacity: "0.7" }), jsx("stop", { offset: "95%", stopColor: "currentColor", className: s.colorClassName, stopOpacity: "0" })] }, s.dataKey));
+                            }
+                            if (s.fill === 'pattern') {
+                                return (jsxs(Fragment, { children: [jsxs("linearGradient", { id: `${patternId(index)}-gradient`, x1: "0", y1: "0", x2: "0", y2: "1", children: [jsx("stop", { offset: "0%", stopColor: "currentColor", className: "text-utility-neutral-500", stopOpacity: "0.8" }), jsx("stop", { offset: "80%", stopColor: "currentColor", className: "text-utility-neutral-500", stopOpacity: "0" })] }), jsxs("pattern", { id: patternId(index), width: "8", height: "100%", patternUnits: "userSpaceOnUse", children: [jsx("line", { x1: "0", y1: "0", x2: "0", y2: "100%", stroke: "currentColor", className: "text-utility-neutral-200", strokeWidth: "1.5" }), jsx("rect", { width: "100%", height: "100%", fill: `url(#${patternId(index)}-gradient)`, fillOpacity: 0.15 })] })] }, s.dataKey));
+                            }
+                            return null;
+                        }) }), jsx(CartesianGrid, { vertical: false, stroke: "currentColor", className: "text-utility-neutral-100" }), showLegend && (jsx(Legend, { align: "right", verticalAlign: "top", layout: isDesktop ? 'vertical' : 'horizontal', content: jsx(ChartLegendContent, { className: "-translate-y-2" }) })), jsx(XAxis, { fill: "currentColor", axisLine: false, tickLine: false, tickMargin: 10, interval: "preserveStartEnd", dataKey: xDataKey, tickFormatter: xTickFormatter, padding: { left: 10, right: 10 }, children: isDesktop && xAxisLabel && (jsx(Label, { fill: "currentColor", className: "text-xs! font-medium max-lg:hidden", position: "bottom", children: xAxisLabel })) }), jsx(YAxis, { fill: "currentColor", axisLine: false, tickLine: false, interval: "preserveStartEnd", tickFormatter: valueFormatter, children: yAxisLabel && (jsx(Label, { value: yAxisLabel, fill: "currentColor", className: "text-xs! font-medium", style: { textAnchor: 'middle' }, angle: -90, position: "insideLeft" })) }), showTooltip && (jsx(Tooltip, { content: jsx(ChartTooltipContent, {}), formatter: valueFormatter, labelFormatter: labelFormatter, cursor: { className: 'stroke-utility-brand-600 stroke-2' } })), series.map((s, index) => (jsx(Area, { isAnimationActive: false, className: cx(s.colorClassName, areaClassName), dataKey: s.dataKey, name: s.name ?? s.dataKey, type: "monotone", stroke: "currentColor", strokeWidth: 2, strokeDasharray: s.dashed ? '0.1 8' : undefined, strokeLinecap: s.dashed ? 'round' : undefined, fill: fillFor(s, index), fillOpacity: s.fill === 'gradient' ? 0.1 : 1, activeDot: activeDot }, s.dataKey)))] }) }) }));
+};
+
+export { LineChart };
+//# sourceMappingURL=line-chart.js.map

package/dist/components/organisms/Charts/components/line-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"line-chart.js","sources":["../../../../../src/components/organisms/Charts/components/line-chart.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/organisms/Charts/components/metrics.d.ts

@@ -0,0 +1,125 @@
+import type { FC, ReactNode, SVGProps } from 'react';
+import type { CurveType } from 'recharts/types/shape/Curve';
+export interface MetricDropdownAction {
+    id: string;
+    label: string;
+    icon?: FC<SVGProps<SVGSVGElement>>;
+    onPress: () => void;
+}
+interface MetricChangeIndicatorProps {
+    type: 'simple' | 'trend' | 'modern';
+    trend: 'positive' | 'negative';
+    value?: string;
+    className?: string;
+}
+export declare const MetricChangeIndicator: ({ type, trend, value, className }: MetricChangeIndicatorProps) => import("react").JSX.Element;
+export declare const MetricsSimple: ({ title, subtitle, type, trend, change, dropdownActions, footer, className, }: {
+    title?: string;
+    subtitle?: string;
+    type: "simple" | "trend" | "modern";
+    trend: "positive" | "negative";
+    change?: string;
+    dropdownActions?: MetricDropdownAction[];
+    footer?: ReactNode;
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const MetricsIcon01: ({ title, subtitle, dropdownActions, footer, className, }: {
+    title?: string;
+    subtitle?: string;
+    dropdownActions?: MetricDropdownAction[];
+    footer?: ReactNode;
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const MetricsIcon02: ({ title, subtitle, dropdownActions, footer, className, }: {
+    title?: string;
+    subtitle?: string;
+    dropdownActions?: MetricDropdownAction[];
+    footer?: ReactNode;
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const MetricsIcon03: ({ icon, title, subtitle, change, changeTrend, dropdownActions, className, footer, }: {
+    icon?: FC<{
+        className?: string;
+    }>;
+    title?: string;
+    subtitle?: string;
+    change?: string;
+    changeTrend?: "positive" | "negative";
+    dropdownActions?: MetricDropdownAction[];
+    footer?: ReactNode;
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const MetricsIcon04: ({ icon, title, subtitle, change, changeTrend, dropdownActions, footer, className, }: {
+    icon?: FC<{
+        className?: string;
+    }>;
+    title?: string;
+    subtitle?: string;
+    change?: string;
+    changeTrend?: "positive" | "negative";
+    dropdownActions?: MetricDropdownAction[];
+    footer?: ReactNode;
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const MetricsChart01: ({ title, subtitle, change, changeDescription, dropdownActions, chartData, trend, footer, className, }: {
+    title?: string;
+    subtitle?: string;
+    change?: string;
+    changeDescription?: string;
+    dropdownActions?: MetricDropdownAction[];
+    trend?: "positive" | "negative";
+    chartData?: {
+        value: number;
+        highlight?: boolean;
+    }[];
+    footer?: ReactNode;
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const MetricsChart02: ({ icon, title, subtitle, change, changeTrend, dropdownActions, footer, className, }: {
+    icon?: FC<{
+        className?: string;
+    }>;
+    title?: string;
+    subtitle?: string;
+    change?: string;
+    changeTrend?: "positive" | "negative";
+    dropdownActions?: MetricDropdownAction[];
+    footer?: ReactNode;
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const MetricsChart03: ({ title, subtitle, type, change, changeTrend, changeDescription, chartColor, chartAreaFill, chartCurveType, chartData, dropdownActions, footer, className, }: {
+    title?: string;
+    subtitle?: string;
+    type?: "simple" | "trend" | "modern";
+    change: string;
+    changeTrend: "positive" | "negative";
+    changeDescription?: string;
+    chartColor?: string;
+    chartAreaFill?: string;
+    chartCurveType?: CurveType;
+    chartData?: {
+        value: number;
+    }[];
+    dropdownActions?: MetricDropdownAction[];
+    footer?: ReactNode;
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const MetricsChart04: ({ title, subtitle, type, change, changeTrend, changeDescription, chartColor, chartAreaFill, chartCurveType, chartData, dropdownActions, footer, className, }: {
+    title: string;
+    subtitle: string;
+    type?: "simple" | "trend" | "modern";
+    change: string;
+    changeTrend: "positive" | "negative";
+    changeDescription?: string;
+    chartColor?: string;
+    chartAreaFill?: string;
+    chartCurveType?: CurveType;
+    chartData?: {
+        value: number;
+    }[];
+    dropdownActions?: MetricDropdownAction[];
+    footer?: ReactNode;
+    className?: string;
+}) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=metrics.d.ts.map

package/dist/components/organisms/Charts/components/metrics.d.ts.map

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

package/dist/components/organisms/Charts/components/pie-chart.cjs

@@ -0,0 +1,80 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('@flipdish/ui-library/utilities/cx');
+
+/**
+ * Selects evenly spaced items from an array. Used for rendering
+ * certain number of x-axis labels.
+ * @param dataArray - The array of items to select from.
+ * @param count - The number of items to select.
+ * @returns The selected items.
+ */
+const selectEvenlySpacedItems = (dataArray, count) => {
+    if (!dataArray || dataArray.length === 0) {
+        return [];
+    }
+    const selectedItems = [];
+    if (dataArray.length === 1) {
+        for (let i = 0; i < count; i++) {
+            selectedItems.push(dataArray[0]);
+        }
+        return selectedItems;
+    }
+    for (let i = 0; i < count; i++) {
+        const targetIndex = Math.round((i * (dataArray.length - 1)) / (count - 1));
+        const boundedIndex = Math.max(0, Math.min(targetIndex, dataArray.length - 1));
+        selectedItems.push(dataArray[boundedIndex]);
+    }
+    return selectedItems;
+};
+/**
+ * Renders the legend content for a chart.
+ * @param reversed - Whether to reverse the payload.
+ * @param payload - The payload of the legend.
+ * @param align - The alignment of the legend.
+ * @param layout - The layout of the legend.
+ * @param className - The class name of the legend.
+ * @returns The legend content.
+ */
+const ChartLegendContent = ({ reversed, payload, align, layout, className, }) => {
+    payload = reversed ? [...(payload ?? [])].reverse() : payload;
+    return (jsxRuntime.jsx("ul", { className: cx.cx('flex', layout === 'vertical'
+            ? `flex-col gap-1 pl-4 ${align === 'center' ? 'items-center' : align === 'right' ? 'items-start' : 'items-start'}`
+            : `flex-row gap-3 ${align === 'center' ? 'justify-center' : align === 'right' ? 'justify-end' : 'justify-start'}`, className), children: payload?.map((entry, index) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: we need to use the index as the key because the payload is an array of objects
+        jsxRuntime.jsxs("li", { className: "flex items-center gap-2 text-sm text-tertiary", children: [jsxRuntime.jsx("span", { className: cx.cx('block size-2 rounded-full bg-current ring-[0.5px] ring-black/10 ring-inset', entry.payload?.className) }), entry.value] }, index))) }));
+};
+const ChartTooltipContent = ({ active, payload, label, isRadialChart, isPieChart, formatter, labelFormatter }) => {
+    const canRender = active && payload && payload.length;
+    if (!canRender) {
+        return null;
+    }
+    const isSingleDataPoint = payload.length === 1;
+    // If it's a single data point, we use the value as the title and
+    // the name as the secondary title.
+    let title = isSingleDataPoint ? (isRadialChart ? payload[0].value : isPieChart ? payload[0].value : payload[0].value) : label;
+    let secondaryTitle = isSingleDataPoint ? (isRadialChart ? payload[0].payload.name : isPieChart ? payload[0].name : label) : payload;
+    title =
+        isSingleDataPoint && formatter
+            ? formatter(title, payload?.[0].name || label, payload[0], 0, payload)
+            : labelFormatter
+                ? labelFormatter(title, payload)
+                : title;
+    secondaryTitle = isSingleDataPoint && labelFormatter ? labelFormatter(secondaryTitle, payload) : secondaryTitle;
+    return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5 rounded-lg bg-primary-solid px-3 py-2 shadow-lg", children: [jsxRuntime.jsx("p", { className: "text-xs font-semibold text-white", children: title }), !secondaryTitle ? null : Array.isArray(secondaryTitle) ? (jsxRuntime.jsx("div", { children: secondaryTitle.map((entry, index) => (
+                // biome-ignore lint/suspicious/noArrayIndexKey: we need to use the index as the key because the secondaryTitle is an array of objects
+                jsxRuntime.jsx("p", { className: cx.cx('text-xs text-tooltip-supporting-text'), children: `${entry.name}: ${formatter ? formatter(entry.value, entry.name, entry, index, entry.payload) : entry.value}` }, index))) })) : (jsxRuntime.jsx("p", { className: "text-xs text-tooltip-supporting-text", children: secondaryTitle }))] }));
+};
+const ChartActiveDot = ({ cx = 0, cy = 0 }) => {
+    const size = 12;
+    return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: this is an icon
+    jsxRuntime.jsx("svg", { x: cx - size / 2, y: cy - size / 2, width: size, height: size, viewBox: "0 0 12 12", fill: "none", children: jsxRuntime.jsx("rect", { x: "2", y: "2", width: "8", height: "8", rx: "6", className: "fill-bg-primary stroke-utility-brand-600", strokeWidth: "2" }) }));
+};
+
+exports.ChartActiveDot = ChartActiveDot;
+exports.ChartLegendContent = ChartLegendContent;
+exports.ChartTooltipContent = ChartTooltipContent;
+exports.selectEvenlySpacedItems = selectEvenlySpacedItems;
+//# sourceMappingURL=pie-chart.cjs.map

package/dist/components/organisms/Charts/components/pie-chart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pie-chart.cjs","sources":["../../../../../src/components/organisms/Charts/components/pie-chart.tsx"],"sourcesContent":[null],"names":["_jsx","cx","_jsxs"],"mappings":"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"}

package/dist/components/organisms/Charts/components/pie-chart.d.ts

@@ -0,0 +1,38 @@
+import type { TooltipProps } from 'recharts';
+import type { Props as LegendContentProps } from 'recharts/types/component/DefaultLegendContent';
+import type { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent';
+import type { Props as DotProps } from 'recharts/types/shape/Dot';
+/**
+ * Selects evenly spaced items from an array. Used for rendering
+ * certain number of x-axis labels.
+ * @param dataArray - The array of items to select from.
+ * @param count - The number of items to select.
+ * @returns The selected items.
+ */
+export declare const selectEvenlySpacedItems: <T extends readonly unknown[]>(dataArray: T, count: number) => Array<T[number]>;
+/**
+ * Renders the legend content for a chart.
+ * @param reversed - Whether to reverse the payload.
+ * @param payload - The payload of the legend.
+ * @param align - The alignment of the legend.
+ * @param layout - The layout of the legend.
+ * @param className - The class name of the legend.
+ * @returns The legend content.
+ */
+export declare const ChartLegendContent: ({ reversed, payload, align, layout, className, }: LegendContentProps & {
+    reversed?: boolean;
+    className?: string;
+}) => import("react").JSX.Element;
+interface ChartTooltipContentProps extends TooltipProps<ValueType, NameType> {
+    isRadialChart?: boolean;
+    isPieChart?: boolean;
+    label?: string;
+    payload?: any;
+}
+export declare const ChartTooltipContent: ({ active, payload, label, isRadialChart, isPieChart, formatter, labelFormatter }: ChartTooltipContentProps) => import("react").JSX.Element | null;
+interface ChartActiveDotProps extends DotProps {
+    payload?: any;
+}
+export declare const ChartActiveDot: ({ cx, cy }: ChartActiveDotProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=pie-chart.d.ts.map

package/dist/components/organisms/Charts/components/pie-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pie-chart.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/Charts/components/pie-chart.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,KAAK,EAAE,KAAK,IAAI,kBAAkB,EAAE,MAAM,+CAA+C,CAAC;AACjG,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,gDAAgD,CAAC;AAC1F,OAAO,KAAK,EAAE,KAAK,IAAI,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAElE;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,GAAI,CAAC,SAAS,SAAS,OAAO,EAAE,EAAE,WAAW,CAAC,EAAE,OAAO,MAAM,KAAG,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAqBlH,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,GAAI,kDAMhC,kBAAkB,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,gCA2BjE,CAAC;AAEF,UAAU,wBAAyB,SAAQ,YAAY,CAAC,SAAS,EAAE,QAAQ,CAAC;IAC1E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,OAAO,CAAC,EAAE,GAAG,CAAC;CACf;AAED,eAAO,MAAM,mBAAmB,GAAI,kFAAkF,wBAAwB,uCAwC7I,CAAC;AAEF,UAAU,mBAAoB,SAAQ,QAAQ;IAG5C,OAAO,CAAC,EAAE,GAAG,CAAC;CACf;AAED,eAAO,MAAM,cAAc,GAAI,YAAoB,mBAAmB,gCASrE,CAAC"}