@taiv/ui 1.0.2 → 1.1.0

package/README.md

@@ -1 +1,23 @@
-# taiv-ui-toolkit
+# **Taiv Web UI Toolkit**
+
+This toolkit is designed to make frontend work quicker, easier, and better for developers working on Taiv’s web apps.
+
+To get started with the toolkit in a new repo, the npm package for the toolkit needs to be installed and setup.
+
+## Installation
+
+To get started with the toolkit, ensure you have the following installed in your project:
+
+- Node 20
+- TypeScript 5
+- React 17
+
+Then, you can install the package from npm:
+
+```tsx
+npm i @taiv/ui
+```
+
+The npm package is **public** and requires no access keys. It contains **strictly** UI components, constants, etc. so in order to test changes, you will need to npm link to your web project and run that.
+
+See the Notion documentation for more information on usages and best practices.

package/dist/components/Data/Chart.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { CardProps } from '../Layout/Card';
+import { dataFormats } from './shared/dataFormats';
+export interface ChartDataPoint {
+    date: string | number;
+    value: number;
+    label?: string;
+}
+export interface ChartSeries {
+    name: string;
+    data: ChartDataPoint[];
+    color?: string;
+    type?: 'line' | 'area' | 'bar';
+}
+export interface ChartProps extends Omit<CardProps, 'children'> {
+    title: string;
+    subtitle?: string;
+    series: ChartSeries[];
+    height?: string | number;
+    showLegend?: boolean;
+    showGrid?: boolean;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    format?: keyof typeof dataFormats;
+    formatYAxis?: (value: number) => string;
+    formatXAxis?: (value: string | number) => string;
+    tooltipContent?: (data: any) => React.ReactNode;
+    loading?: boolean;
+    emptyMessage?: string;
+}
+export declare const Chart: React.FC<ChartProps>;
+//# sourceMappingURL=Chart.d.ts.map

package/dist/components/Data/Chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../../src/components/Data/Chart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAQjD,OAAO,EAAE,WAAW,EAAgB,MAAM,sBAAsB,CAAC;AAEjE,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC;CAChC;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,MAAM,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAClC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,CAAC;IAEjD,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,KAAK,CAAC,SAAS,CAAC;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAyOtC,CAAC"}

package/dist/components/Data/Chart.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Card } from '../Layout/Card';
+import { Text } from '../Typography/Text';
+import { Title } from '../Typography/Title';
+import { Stack } from '../Layout/Stack';
+import { Center } from '../Layout/Center';
+import { primary, neutral } from '../../constants/colors';
+import { Area, Bar, CartesianGrid, ComposedChart, Legend, Line, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import { Group } from '../Layout/Group';
+import { chartFormats } from './shared/dataFormats';
+export const Chart = ({ title, subtitle, series, height = 300, showLegend = true, showGrid = true, xAxisLabel, yAxisLabel, 
+// New formatting props
+format = 'decimal', // Default format
+formatYAxis, // Custom formatter
+formatXAxis = (value) => value.toString(), tooltipContent, loading = false, emptyMessage = 'No data available', ...cardProps }) => {
+    var _a;
+    // Create the Y-axis formatter function
+    const getYAxisFormatter = () => {
+        // If custom formatYAxis is provided, use it (takes priority)
+        if (formatYAxis) {
+            return formatYAxis;
+        }
+        // Otherwise, use the smart chart format
+        return chartFormats[format];
+    };
+    const yAxisFormatter = getYAxisFormatter();
+    const hasData = series.some((s) => s.data.length > 0);
+    // Custom tick components using our Text component
+    const CustomXAxisTick = (props) => {
+        const { x, y, payload } = props;
+        return (_jsx("g", { transform: `translate(${x},${y})`, children: _jsx("foreignObject", { x: -50, y: 0, width: 100, height: 20, children: _jsx("div", { style: { display: 'flex', justifyContent: 'center' }, children: _jsx(Text, { variant: "label", children: formatXAxis(payload.value) }) }) }) }));
+    };
+    const CustomYAxisTick = (props) => {
+        const { x, y, payload } = props;
+        return (_jsx("g", { transform: `translate(${x},${y})`, children: _jsx("foreignObject", { x: -35, y: -10, width: 35, height: 20, children: _jsx("div", { style: { display: 'flex', justifyContent: 'flex-end', alignItems: 'center', height: '100%' }, children: _jsx(Text, { variant: "label", children: yAxisFormatter(payload.value) }) }) }) }));
+    };
+    if (loading) {
+        return (_jsx(Card, { ...cardProps, children: _jsxs(Stack, { gap: "1rem", children: [_jsx(Title, { variant: "cardHeader", children: title }), subtitle && _jsx(Text, { variant: "label", children: subtitle }), _jsx(Center, { style: { height, backgroundColor: neutral[25], borderRadius: '8px' }, children: _jsx(Text, { variant: "label", color: neutral[200], children: "Loading..." }) })] }) }));
+    }
+    if (!hasData) {
+        return (_jsx(Card, { ...cardProps, children: _jsxs(Stack, { gap: "1rem", children: [_jsx(Title, { variant: "cardHeader", children: title }), subtitle && _jsx(Text, { variant: "label", children: subtitle }), _jsx(Center, { style: { height, backgroundColor: neutral[25], borderRadius: '8px' }, children: _jsx(Text, { variant: "label", color: neutral[200], children: emptyMessage }) })] }) }));
+    }
+    // Transform data to match Recharts format
+    const chartData = (_a = series[0]) === null || _a === void 0 ? void 0 : _a.data.map((point, index) => {
+        const dataPoint = { date: point.date };
+        series.forEach((s, seriesIndex) => {
+            if (s.data[index]) {
+                dataPoint[s.name] = s.data[index].value;
+            }
+        });
+        return dataPoint;
+    });
+    // Custom tooltip component
+    const CustomTooltip = ({ active, payload, label }) => {
+        if (active && payload && payload.length) {
+            return (_jsxs("div", { style: {
+                    backgroundColor: 'white',
+                    padding: '10px',
+                    border: `1px solid ${neutral[100]}`,
+                    borderRadius: '8px',
+                    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                }, children: [_jsx(Text, { weight: "semibold", color: neutral[300], children: formatXAxis(label) }), payload.map((entry) => (_jsxs(Group, { children: [_jsx("div", { style: {
+                                    width: '8px',
+                                    height: '8px',
+                                    borderRadius: '50%',
+                                    backgroundColor: entry.color,
+                                } }), _jsxs(Group, { gap: "0.25rem", children: [_jsxs(Text, { variant: "label", color: neutral[300], children: [entry.name, ":"] }), _jsx(Text, { variant: "label", children: yAxisFormatter(entry.value) })] })] }, entry.name)))] }));
+        }
+        return null;
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Card, { ...cardProps, children: _jsxs(Stack, { gap: "1rem", children: [_jsxs(Stack, { gap: "0.5rem", children: [_jsx(Title, { variant: "cardHeader", children: title }), subtitle && _jsx(Text, { variant: "label", children: subtitle })] }), _jsx(Center, { style: { height, width: '100%' }, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(ComposedChart, { data: chartData, children: [_jsx("defs", { children: series.map((s, index) => (_jsxs("linearGradient", { id: `gradient-${index}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: s.color || primary[200], stopOpacity: 0.3 }), _jsx("stop", { offset: "99%", stopColor: s.color || primary[200], stopOpacity: 0.05 })] }, s.name))) }), _jsx(XAxis, { dataKey: "date", axisLine: { stroke: neutral[50] }, tickLine: { stroke: neutral[50] }, tick: _jsx(CustomXAxisTick, {}) }), _jsx(YAxis, { width: 40, axisLine: false, tickLine: false, tick: _jsx(CustomYAxisTick, {}) }), _jsx(CartesianGrid, { strokeDasharray: "0", stroke: neutral[50], horizontal: true, vertical: false }), series.map((s, index) => {
+                                            const seriesType = s.type || 'line'; // Default to 'line' if no type specified
+                                            if (seriesType === 'area') {
+                                                return (_jsx(Area, { type: "monotone", dataKey: s.name, stroke: s.color || primary[200], strokeWidth: 2, fill: `url(#gradient-${index})`, baseValue: "dataMin", style: { outline: 'none' } }, s.name));
+                                            }
+                                            else if (seriesType === 'bar') {
+                                                return _jsx(Bar, { dataKey: s.name, fill: s.color || primary[200], radius: [2, 2, 0, 0], style: { outline: 'none' } }, s.name);
+                                            }
+                                            else {
+                                                // Default to line (seriesType === 'line')
+                                                return _jsx(Line, { type: "monotone", dataKey: s.name, stroke: s.color || primary[200], strokeWidth: 2, dot: false, style: { outline: 'none' } }, s.name);
+                                            }
+                                        }), _jsx(Tooltip, { content: tooltipContent || _jsx(CustomTooltip, {}), wrapperStyle: {
+                                                border: 'none',
+                                                outline: 'none', // Remove any outline
+                                                boxShadow: 'none', // Remove default shadow
+                                            }, contentStyle: {
+                                                border: 'none',
+                                                outline: 'none',
+                                                boxShadow: 'none',
+                                                padding: 0,
+                                                margin: 0,
+                                                backgroundColor: 'transparent',
+                                            }, labelStyle: {
+                                                display: 'none',
+                                            } }), showLegend && (_jsx(Legend, { iconType: "circle", iconSize: 8, formatter: (value) => (_jsx(Text, { variant: "label", sx: { color: neutral[300], display: 'inline', whiteSpace: 'nowrap' }, children: value })) }))] }) }) })] }) }), _jsx("style", { children: `.recharts-surface { outline: none; }` })] }));
+};

package/dist/components/Data/PieChart.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { CardProps } from '../Layout/Card';
+export interface PieChartDataPoint {
+    name: string;
+    value: number;
+    color?: string;
+}
+export interface PieChartProps extends Omit<CardProps, 'children'> {
+    title: string;
+    subtitle?: string;
+    data: PieChartDataPoint[];
+    height?: string | number;
+    showLegend?: boolean;
+    innerRadius?: number;
+    outerRadius?: number;
+    paddingAngle?: number;
+    colors?: string[];
+    formatValue?: (value: number) => string;
+    tooltipContent?: (data: any) => React.ReactNode;
+    loading?: boolean;
+    emptyMessage?: string;
+}
+export declare const PieChart: React.FC<PieChartProps>;
+//# sourceMappingURL=PieChart.d.ts.map

package/dist/components/Data/PieChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PieChart.d.ts","sourceRoot":"","sources":["../../../src/components/Data/PieChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,gBAAgB,CAAC;AASjD,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,iBAAiB,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,KAAK,CAAC,SAAS,CAAC;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAKD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAwK5C,CAAC"}

package/dist/components/Data/PieChart.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Card } from '../Layout/Card';
+import { Text } from '../Typography/Text';
+import { Title } from '../Typography/Title';
+import { Stack } from '../Layout/Stack';
+import { Center } from '../Layout/Center';
+import { Group } from '../Layout/Group';
+import { primary, neutral } from '../../constants/colors';
+import { PieChart as RechartsPieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend } from 'recharts';
+// Default color palette
+const DEFAULT_COLORS = [primary[200], primary[300], primary[100], primary[50], '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD', '#98D8C8', '#F7DC6F'];
+export const PieChart = ({ title, subtitle, data, height = '30rem', showLegend = true, innerRadius = 80, outerRadius = 100, paddingAngle = 5, colors = DEFAULT_COLORS, formatValue = (value) => value.toString(), tooltipContent, loading = false, emptyMessage = 'No data available', ...cardProps }) => {
+    const hasData = data && data.length > 0;
+    const totalValue = hasData ? data.reduce((sum, item) => sum + item.value, 0) : 0;
+    const firstDataPoint = hasData ? data[0] : null;
+    const firstDataPercentage = firstDataPoint && totalValue > 0 ? Math.round((firstDataPoint.value / totalValue) * 100) : 0;
+    if (loading) {
+        return (_jsx(Card, { ...cardProps, children: _jsxs(Stack, { gap: "1rem", children: [_jsx(Title, { variant: "cardHeader", children: title }), subtitle && _jsx(Text, { variant: "label", children: subtitle }), _jsx(Center, { style: { height, backgroundColor: neutral[25], borderRadius: '8px' }, children: _jsx(Text, { variant: "label", color: neutral[200], children: "Loading..." }) })] }) }));
+    }
+    if (!hasData) {
+        return (_jsx(Card, { ...cardProps, children: _jsxs(Stack, { gap: "1rem", children: [_jsx(Title, { variant: "cardHeader", children: title }), subtitle && _jsx(Text, { variant: "label", children: subtitle }), _jsx(Center, { style: { height, backgroundColor: neutral[25], borderRadius: '8px' }, children: _jsx(Text, { variant: "label", color: neutral[200], children: emptyMessage }) })] }) }));
+    }
+    // Custom tooltip component
+    const CustomTooltip = ({ active, payload, label }) => {
+        if (active && payload && payload.length) {
+            return (_jsxs("div", { style: {
+                    backgroundColor: 'white',
+                    padding: '10px',
+                    border: `1px solid ${neutral[100]}`,
+                    borderRadius: '8px',
+                    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                }, children: [_jsx(Text, { weight: "semibold", color: neutral[300], children: label }), payload.map((entry) => (_jsxs(Group, { children: [_jsx("div", { style: {
+                                    width: '8px',
+                                    height: '8px',
+                                    borderRadius: '50%',
+                                    backgroundColor: entry.color,
+                                } }), _jsxs(Group, { gap: "0.25rem", children: [_jsxs(Text, { variant: "label", color: neutral[300], children: [entry.name, ":"] }), _jsx(Text, { variant: "label", children: formatValue(entry.value) })] })] }, entry.name)))] }));
+        }
+        return null;
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Card, { ...cardProps, children: _jsxs(Stack, { gap: "0", children: [_jsxs(Stack, { gap: "0.5rem", children: [_jsx(Title, { variant: "cardHeader", children: title }), subtitle && _jsx(Text, { variant: "label", children: subtitle })] }), _jsxs(Center, { style: { height, width: '100%', position: 'relative' }, children: [_jsx(ResponsiveContainer, { width: "100%", height: "100%", style: { outline: 'none' }, children: _jsxs(RechartsPieChart, { style: { outline: 'none' }, children: [_jsx(Pie, { data: data, innerRadius: innerRadius, outerRadius: outerRadius, paddingAngle: paddingAngle, dataKey: "value", style: { outline: 'none' }, children: data.map((entry, index) => (_jsx(Cell, { fill: entry.color || colors[index % colors.length], style: { outline: 'none' } }, `cell-${entry.name}`))) }), _jsx(Tooltip, { content: tooltipContent || _jsx(CustomTooltip, {}), wrapperStyle: {
+                                                    border: 'none',
+                                                    outline: 'none',
+                                                    boxShadow: 'none',
+                                                }, contentStyle: {
+                                                    border: 'none',
+                                                    outline: 'none',
+                                                    boxShadow: 'none',
+                                                    padding: 0,
+                                                    margin: 0,
+                                                    backgroundColor: 'transparent',
+                                                } }), showLegend && (_jsx(Legend, { iconType: "circle", iconSize: 8, style: {
+                                                    marginTop: '1rem',
+                                                }, formatter: (value) => (_jsx(Text, { variant: "label", style: { color: neutral[300], display: 'inline', whiteSpace: 'nowrap' }, children: value })) }))] }) }), _jsx(Center, { style: {
+                                        position: 'absolute',
+                                        top: '45%',
+                                        left: '50%',
+                                        transform: 'translate(-50%, -50%)',
+                                        textAlign: 'center',
+                                    }, children: _jsxs(Stack, { gap: "0", align: "center", children: [_jsxs(Title, { variant: "cardHeader", color: neutral[300], children: [firstDataPercentage, "%"] }), _jsx(Text, { variant: "label", children: title })] }) })] })] }) }), _jsx("style", { children: `.recharts-surface { outline: none; }` })] }));
+};

package/dist/components/Data/StatsCard.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { CardProps } from '../Layout/Card';
+import { palettes } from '../../constants/colors';
+import { dataFormats } from './shared/dataFormats';
+export interface StatsCardProps extends Omit<CardProps, 'children'> {
+    value: number;
+    title: string;
+    description?: string;
+    format?: keyof typeof dataFormats;
+    isDelta?: boolean;
+    icon?: React.ReactNode;
+    iconColor?: keyof typeof palettes;
+    tooltip?: React.ReactNode;
+    increaseDescription?: string;
+}
+export declare const StatsCard: ({ value, format, isDelta, title, description, increaseDescription, icon: Icon, iconColor, tooltip, ...cardProps }: StatsCardProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StatsCard.d.ts.map

package/dist/components/Data/StatsCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatsCard.d.ts","sourceRoot":"","sources":["../../../src/components/Data/StatsCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAMjD,OAAO,EAAE,QAAQ,EAAmB,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGnD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,eAAO,MAAM,SAAS,GAAI,mHAAgJ,cAAc,4CA4DvL,CAAC"}

package/dist/components/Data/StatsCard.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from '../Layout/Card';
+import { InfoTooltip } from '../Info/Tooltips/InfoTooltip';
+import { Text } from '../Typography/Text';
+import { Title } from '../Typography/Title';
+import { Group } from '../Layout/Group';
+import { Stack } from '../Layout/Stack';
+import { colors, neutral } from '../../constants/colors';
+import { dataFormats } from './shared/dataFormats';
+import { IconBadge } from '../Misc/IconBadge';
+export const StatsCard = ({ value, format = 'decimal', isDelta = false, title, description, increaseDescription, icon: Icon, iconColor = 'blue', tooltip, ...cardProps }) => {
+    const getDelta = () => {
+        const currentDirection = isDelta ? (value > 0 ? 'positive' : value < 0 ? 'negative' : null) : null;
+        return {
+            direction: currentDirection,
+            color: currentDirection === 'positive' ? colors.success[200] : currentDirection === 'negative' ? colors.neutral[200] : undefined,
+            showIncrementalText: currentDirection === 'positive',
+        };
+    };
+    const delta = getDelta();
+    const formatValue = () => {
+        const config = dataFormats[format];
+        const formattedNumber = value.toLocaleString('en-US', {
+            minimumFractionDigits: config.decimalPlaces,
+            maximumFractionDigits: config.decimalPlaces,
+        });
+        let result = formattedNumber;
+        if (delta.direction === 'positive') {
+            result = `+${result}`;
+        }
+        else if (delta.direction === 'negative') {
+            result = `-${result}`;
+        }
+        result = `${config.prefix}${result}${config.suffix}`;
+        return result;
+    };
+    return (_jsx(Card, { bg: neutral[25], animate: true, ...cardProps, children: _jsxs(Stack, { gap: "1.6rem", children: [_jsxs(Stack, { gap: "0.25rem", children: [_jsxs(Group, { position: "apart", children: [_jsx(Title, { size: "3xl", weight: "bold", children: formatValue() }), Icon && _jsx(IconBadge, { icon: Icon, color: iconColor })] }), _jsxs(Group, { gap: "0.75rem", children: [_jsx(Title, { variant: "cardHeader", color: "#6D6D6D", weight: "medium", children: title }), tooltip && _jsx(InfoTooltip, { text: tooltip })] })] }), _jsxs(Stack, { gap: "0", children: [description && _jsx(Text, { variant: "label", children: description }), delta.showIncrementalText && increaseDescription && (_jsx(Text, { variant: "label", color: delta.color, children: increaseDescription }))] })] }) }));
+};

package/dist/components/Data/shared/dataFormats.d.ts

@@ -0,0 +1,35 @@
+export declare const dataFormats: {
+    readonly integer: {
+        readonly decimalPlaces: 0;
+        readonly prefix: "";
+        readonly suffix: "";
+    };
+    readonly decimal: {
+        readonly decimalPlaces: 1;
+        readonly prefix: "";
+        readonly suffix: "";
+    };
+    readonly currency: {
+        readonly decimalPlaces: 2;
+        readonly prefix: "$";
+        readonly suffix: "";
+    };
+    readonly percentage: {
+        readonly decimalPlaces: 1;
+        readonly prefix: "";
+        readonly suffix: "%";
+    };
+    readonly multiple: {
+        readonly decimalPlaces: 1;
+        readonly prefix: "";
+        readonly suffix: "x";
+    };
+};
+export declare const chartFormats: {
+    readonly integer: (value: number) => string;
+    readonly decimal: (value: number) => string;
+    readonly currency: (value: number) => string;
+    readonly percentage: (value: number) => string;
+    readonly multiple: (value: number) => string;
+};
+//# sourceMappingURL=dataFormats.d.ts.map

package/dist/components/Data/shared/dataFormats.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dataFormats.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/shared/dataFormats.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;CAMd,CAAC;AAiBX,eAAO,MAAM,YAAY;8BACN,MAAM,KAAG,MAAM;8BAEf,MAAM,KAAG,MAAM;+BAEd,MAAM,KAAG,MAAM;iCAEb,MAAM,KAAG,MAAM;+BAEjB,MAAM,KAAG,MAAM;CACzB,CAAC"}

package/dist/components/Data/shared/dataFormats.js

@@ -0,0 +1,25 @@
+export const dataFormats = {
+    integer: { decimalPlaces: 0, prefix: '', suffix: '' },
+    decimal: { decimalPlaces: 1, prefix: '', suffix: '' },
+    currency: { decimalPlaces: 2, prefix: '$', suffix: '' },
+    percentage: { decimalPlaces: 1, prefix: '', suffix: '%' },
+    multiple: { decimalPlaces: 1, prefix: '', suffix: 'x' },
+};
+// Helper function to format numbers with truncation
+const formatWithTruncation = (value, prefix, suffix, decimalPlaces, truncateAt1000 = true) => {
+    const absValue = Math.abs(value);
+    if (absValue >= 1000000) {
+        return `${prefix}${(value / 1000000).toFixed(1)}M${suffix}`;
+    }
+    if (truncateAt1000 && absValue >= 1000) {
+        return `${prefix}${(value / 1000).toFixed(1)}k${suffix}`;
+    }
+    return `${prefix}${value.toFixed(decimalPlaces)}${suffix}`;
+};
+export const chartFormats = {
+    integer: (value) => formatWithTruncation(value, '', '', 0, true),
+    decimal: (value) => formatWithTruncation(value, '', '', 1, true),
+    currency: (value) => formatWithTruncation(value, '$', '', 2, true),
+    percentage: (value) => formatWithTruncation(value, '', '%', 1, true),
+    multiple: (value) => formatWithTruncation(value, '', 'x', 1, true),
+};

package/dist/components/Info/Badge.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=Badge.d.ts.map

package/dist/components/Info/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Info/Badge.tsx"],"names":[],"mappings":""}

package/dist/components/Info/Badge.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/Info/InfoCard.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { CardProps } from '../Layout/Card';
+import { colors } from '../../constants/colors';
+export interface InfoCardProps extends Omit<CardProps, 'children'> {
+    children: React.ReactNode;
+    variant?: keyof typeof colors;
+}
+export declare const InfoCard: ({ children, variant, ...cardProps }: InfoCardProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InfoCard.d.ts.map

package/dist/components/Info/InfoCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoCard.d.ts","sourceRoot":"","sources":["../../../src/components/Info/InfoCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAChE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,QAAQ,GAAI,qCAAiD,aAAa,4CAwBtF,CAAC"}

package/dist/components/Info/InfoCard.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Card } from '../Layout/Card';
+import { Center } from '../Layout/Center';
+import { colors } from '../../constants/colors';
+export const InfoCard = ({ children, variant = 'primary', ...cardProps }) => {
+    const colorPalette = colors[variant];
+    const style = {
+        border: `1px solid ${colorPalette[200]}`,
+        backgroundColor: colorPalette[25],
+        color: colorPalette[200] + ' !important',
+        padding: '3.2rem 6.4rem',
+    };
+    return (_jsx(Card, { shadow: "lg", style: style, sx: {
+            '& *': {
+                color: `${colorPalette[200]} !important`,
+            },
+        }, ...cardProps, children: _jsx(Center, { children: children }) }));
+};

package/dist/components/Info/Tooltips/InfoTooltip.d.ts

@@ -1,6 +1,8 @@
+import React from 'react';
 import { CSSObject } from '@mantine/styles';
 interface InfoTooltipProps {
-    text: string;
+    text: React.ReactNode;
+    content?: React.ReactNode;
     position?: 'top-end' | 'bottom-end' | 'top-start' | 'bottom-start';
     size?: keyof typeof componentSizes;
     offset?: number;
@@ -13,6 +15,6 @@ declare const componentSizes: {
     readonly lg: "2rem";
     readonly xl: "2.4rem";
 };
-declare const InfoTooltip: ({ text, position, size, offset, className, styles }: InfoTooltipProps) => import("react/jsx-runtime").JSX.Element;
+declare const InfoTooltip: ({ text, content, position, size, offset, className, styles }: InfoTooltipProps) => import("react/jsx-runtime").JSX.Element;
 export { InfoTooltip };
 //# sourceMappingURL=InfoTooltip.d.ts.map

package/dist/components/Info/Tooltips/InfoTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfoTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Tooltips/InfoTooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,cAAc,CAAC;IACnE,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,cAAc;;;;;CAKV,CAAC;AAEX,QAAA,MAAM,WAAW,GAAI,qDAA0E,gBAAgB,4CAc9G,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"InfoTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Tooltips/InfoTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,UAAU,gBAAgB;IACxB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,cAAc,CAAC;IACnE,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,cAAc;;;;;CAKV,CAAC;AAEX,QAAA,MAAM,WAAW,GAAI,8DAAmF,gBAAgB,4CAcvH,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/Info/Tooltips/InfoTooltip.js

@@ -7,7 +7,7 @@ const componentSizes = {
     lg: '2rem',
     xl: '2.4rem',
 };
-const InfoTooltip = ({ text, position = 'top-start', size = 'md', offset, className, styles }) => {
+const InfoTooltip = ({ text, content, position = 'top-start', size = 'md', offset, className, styles }) => {
     const style = {
         icon: {
             color: neutral[100],
@@ -15,6 +15,6 @@ const InfoTooltip = ({ text, position = 'top-start', size = 'md', offset, classN
         },
         ...styles,
     };
-    return (_jsx(Tooltip, { text: text, position: position, offset: offset, className: className, children: _jsx("i", { className: "fas fa-info-circle", style: style.icon }) }));
+    return (_jsx(Tooltip, { text: text || content, position: position, offset: offset, className: className, children: _jsx("i", { className: "fas fa-info-circle", style: style.icon }) }));
 };
 export { InfoTooltip };

package/dist/components/Info/Tooltips/Tooltip.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { CSSObject } from '@mantine/styles';
 interface TooltipProps {
     children: React.ReactNode;
-    text: string;
+    text?: React.ReactNode;
     position?: 'top-end' | 'bottom-end' | 'top-start' | 'bottom-start';
     offset?: number;
     className?: string;

package/dist/components/Info/Tooltips/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Tooltips/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,UAAU,YAAY;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,cAAc,CAAC;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,OAAO,GAAI,yDAAuE,YAAY,4CA+CnG,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Tooltips/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,UAAU,YAAY;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,cAAc,CAAC;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,OAAO,GAAI,yDAAuE,YAAY,4CAgDnG,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/Info/Tooltips/Tooltip.js

@@ -30,6 +30,6 @@ const Tooltip = ({ children, text, position = 'top-start', offset, className, st
         },
         ...styles,
     };
-    return (_jsx(MantineTooltip, { withArrow: true, arrowRadius: 0, arrowSize: 8, label: text, position: position, transitionProps: { transition: positionToTransition[position], duration: 200 }, color: "white", styles: tooltipStyle, offset: offset, className: className, children: _jsx(Box, { sx: wrapperStyle, children: children }) }));
+    return (_jsx(MantineTooltip, { withArrow: true, arrowRadius: 0, arrowSize: 8, label: text, position: position, transitionProps: { transition: positionToTransition[position], duration: 200 }, color: "white", styles: tooltipStyle, offset: offset, className: className, withinPortal: true, children: _jsx(Box, { sx: wrapperStyle, children: children }) }));
 };
 export { Tooltip };

package/dist/components/Inputs/Buttons/Button.d.ts

@@ -6,6 +6,7 @@ export interface ButtonProps extends MantineButtonProps {
     size?: keyof typeof componentSizes;
     variant?: keyof typeof componentVariants;
     fullWidth?: boolean;
+    toggled?: boolean;
 }
-export declare const Button: ({ onClick, size, variant, fullWidth, styles, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ onClick, size, variant, fullWidth, toggled, styles, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Button.d.ts.map

package/dist/components/Inputs/Buttons/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/Buttons/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAE3F,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,GAAI,yDAOpB,WAAW,4CAuBb,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/Buttons/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAE3F,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,MAAM,GAAI,kEAAqG,WAAW,4CAkCtI,CAAC"}

package/dist/components/Inputs/Buttons/Button.js

@@ -3,9 +3,19 @@ import { Button as MantineButton } from '@mantine/core';
 import { fontBase, fontWeight } from '../../../constants/font';
 import { componentSizes } from './shared/sizes';
 import { componentVariants } from './shared/variants';
-export const Button = ({ onClick, size = 'md', variant = 'primary', fullWidth = false, styles, ...props }) => {
+export const Button = ({ onClick, size = 'md', variant = 'primary', fullWidth = false, toggled = false, styles, ...props }) => {
     const selectedVariant = componentVariants[variant];
     const selectedSize = componentSizes[size];
+    // Apply active styles for nav variant when isActive is true
+    const getVariantStyles = () => {
+        if (toggled) {
+            return {
+                ...selectedVariant,
+                ...selectedVariant['&:toggled'],
+            };
+        }
+        return selectedVariant;
+    };
     const style = {
         root: {
             borderRadius: '8px',
@@ -15,7 +25,7 @@ export const Button = ({ onClick, size = 'md', variant = 'primary', fullWidth =
             padding: selectedSize.padding,
             minWidth: `${selectedSize.minWidth}rem`,
             fontSize: selectedSize.fontSize,
-            ...selectedVariant,
+            ...getVariantStyles(),
         },
         label: {
             ...fontBase,