@taiv/ui 1.2.0 → 1.3.1

package/dist/components/Data/PieChart.js

@@ -1,61 +1,53 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Card } from '../Layout/Card';
+import { PieChart as RechartsPieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend, Label } from 'recharts';
 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 }) => {
+import { Title } from '../Typography/Title';
+import { Stack } from '../Layout/Stack';
+import { Box } from '../Layout/Box';
+import { neutral } from '../../constants/colors';
+import { textStyle } from '../../constants/font';
+import { getChartFormatter } from '../../utils/charts';
+export const PieChart = ({ data, showLegend = true, innerRadius = 80, outerRadius = 100, paddingAngle = 5, format = 'percentage', loading = false, centerContent, height = '100%', }) => {
     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 }) => {
+    const transformedData = data.map((item) => ({
+        ...item,
+        name: item.key,
+    }));
+    const getCenterContent = () => {
+        return (_jsx("g", { children: _jsx("foreignObject", { x: "0%", y: "35%", width: "100%", height: "100%", style: { pointerEvents: 'none' }, children: _jsxs(Stack, { gap: "0", align: "center", children: [(centerContent === null || centerContent === void 0 ? void 0 : centerContent.value) && (_jsx(Title, { variant: "sectionHeader", color: neutral[300], children: getChartFormatter(format, { decimalPlaces: 0 })(centerContent.value) })), (centerContent === null || centerContent === void 0 ? void 0 : centerContent.title) && _jsx(Title, { variant: "cardSubheader", children: centerContent.title }), (centerContent === null || centerContent === void 0 ? void 0 : centerContent.subtitle) && _jsx(Text, { variant: "label", children: centerContent.subtitle })] }) }) }));
+    };
+    const getTooltip = ({ active, payload, label }) => {
         if (active && payload && payload.length) {
-            return (_jsxs("div", { style: {
+            return (_jsxs(Box, { sx: {
                     backgroundColor: 'white',
-                    padding: '10px',
+                    padding: '1rem',
                     border: `1px solid ${neutral[100]}`,
                     borderRadius: '8px',
                     boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                    zIndex: 1000,
+                    position: 'relative',
                 }, 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)))] }));
+                                    backgroundColor: entry.payload.color,
+                                } }), _jsxs(Group, { gap: "0.25rem", children: [_jsxs(Text, { variant: "label", color: neutral[300], children: [entry.payload.key, ":"] }), _jsx(Text, { variant: "label", children: getChartFormatter(format)(entry.payload.value) })] })] }, entry.key)))] }));
         }
         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; }` })] }));
+    return (_jsxs(_Fragment, { children: [loading || !hasData ? (_jsx(Center, { style: { backgroundColor: neutral[25], borderRadius: '8px' }, children: _jsx(Text, { variant: "label", color: neutral[200], children: loading ? 'Loading...' : 'No data available' }) })) : (_jsx(Center, { h: height, w: "100%", style: { position: 'relative' }, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", style: { outline: 'none' }, children: _jsxs(RechartsPieChart, { style: { outline: 'none' }, children: [_jsxs(Pie, { data: transformedData, innerRadius: innerRadius, outerRadius: outerRadius, paddingAngle: paddingAngle, dataKey: "value", style: { outline: 'none' }, children: [_jsx(Label, { content: getCenterContent(), position: "center" }), data.map((entry, index) => (_jsx(Cell, { fill: entry.color, style: { outline: 'none' } }, `cell-${entry.key}`)))] }), _jsx(Tooltip, { content: getTooltip }), showLegend && _jsx(Legend, { iconType: "circle", iconSize: 8, wrapperStyle: { paddingTop: '0.6rem' } })] }) }) })), _jsx("style", { children: `
+        .recharts-legend-item-text {
+          font-family: ${textStyle.label.fontFamily};
+          font-size: ${textStyle.label.fontSize};
+          line-height: ${textStyle.label.lineHeight};
+          font-weight: ${textStyle.label.fontWeight};
+          -webkit-font-smoothing: ${textStyle.label.WebkitFontSmoothing};
+          -moz-osx-font-smoothing: ${textStyle.label.MozOsxFontSmoothing};
+          display: inline !important;
+          white-space: nowrap !important;
+          color: ${neutral[300]} !important;
+        }
+      ` })] }));
 };

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

@@ -0,0 +1,10 @@
+import { BadgeProps } from '../Info/Badge';
+import { formats } from '../../constants/data';
+interface StatsBadgeProps extends BadgeProps {
+    value: number;
+    format?: keyof typeof formats;
+    isDelta?: boolean;
+}
+declare const StatsBadge: ({ value, format, isDelta, ...props }: StatsBadgeProps) => import("react/jsx-runtime").JSX.Element;
+export { StatsBadge };
+//# sourceMappingURL=StatsBadge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatsBadge.d.ts","sourceRoot":"","sources":["../../../src/components/Data/StatsBadge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,UAAU,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,UAAU,eAAgB,SAAQ,UAAU;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,UAAU,GAAI,sCAA0D,eAAe,4CA2B5F,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/Data/StatsBadge.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Badge } from '../Info/Badge';
+import { formats } from '../../constants/data';
+const StatsBadge = ({ value, format = 'decimal', isDelta = false, ...props }) => {
+    const delta = isDelta ? (value > 0 ? 'positive' : value < 0 ? 'negative' : 'equal') : null;
+    const color = delta ? (delta === 'positive' ? 'success' : delta === 'negative' ? 'error' : 'neutral') : 'success';
+    const formatValue = () => {
+        const config = formats[format];
+        const formattedNumber = value.toLocaleString('en-US', {
+            minimumFractionDigits: config.decimalPlaces,
+            maximumFractionDigits: config.decimalPlaces,
+        });
+        let result = formattedNumber;
+        if (delta === 'positive') {
+            result = `+${result}`;
+        }
+        else if (delta === 'negative') {
+            result = `-${result}`;
+        }
+        result = `${config.prefix}${result}${config.suffix}`;
+        return result;
+    };
+    return (_jsx(Badge, { color: color, ...props, children: formatValue() }));
+};
+export { StatsBadge };

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CardProps } from '../Layout/Card';
-import { palettes } from '../../constants/colors';
+import { primitives } from '../../constants/colors';
 import { dataFormats } from './shared/dataFormats';
 export interface StatsCardProps extends Omit<CardProps, 'children'> {
     value: number;
@@ -9,7 +9,7 @@ export interface StatsCardProps extends Omit<CardProps, 'children'> {
     format?: keyof typeof dataFormats;
     isDelta?: boolean;
     icon?: React.ReactNode;
-    iconColor?: keyof typeof palettes;
+    iconColor?: keyof typeof primitives;
     tooltip?: React.ReactNode;
     increaseDescription?: string;
 }

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

@@ -1 +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"}
+{"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,UAAU,EAAoB,MAAM,wBAAwB,CAAC;AACtE,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,UAAU,CAAC;IACpC,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

@@ -5,7 +5,7 @@ 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 { success, 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 }) => {
@@ -13,7 +13,7 @@ export const StatsCard = ({ value, format = 'decimal', isDelta = false, title, d
         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,
+            color: currentDirection === 'positive' ? success[200] : currentDirection === 'negative' ? neutral[200] : undefined,
             showIncrementalText: currentDirection === 'positive',
         };
     };

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

@@ -0,0 +1,8 @@
+import { formats, truncation } from '../../../constants/data';
+interface FormatOptions {
+    truncateAt?: keyof typeof truncation;
+    decimalPlaces?: number;
+}
+export declare const getChartFormatter: (format: keyof typeof formats, options?: FormatOptions) => ((value: string | number) => string);
+export {};
+//# sourceMappingURL=chartFormats.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chartFormats.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/shared/chartFormats.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAiB,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE7E,UAAU,aAAa;IACrB,UAAU,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAeD,eAAO,MAAM,iBAAiB,GAAI,QAAQ,MAAM,OAAO,OAAO,EAAE,UAAU,aAAa,KAAG,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,CAa5H,CAAC"}

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

@@ -0,0 +1,29 @@
+import { numberFormats, truncation } from '../../../constants/data';
+const formatAndTruncate = (value, format, options) => {
+    var _a, _b;
+    const absValue = Math.abs(value);
+    const config = numberFormats[format];
+    const truncateConfig = truncation[(_a = options === null || options === void 0 ? void 0 : options.truncateAt) !== null && _a !== void 0 ? _a : 'thousand'];
+    const computedDecimalPlaces = (_b = options === null || options === void 0 ? void 0 : options.decimalPlaces) !== null && _b !== void 0 ? _b : config.decimalPlaces;
+    if (absValue >= truncateConfig.threshold) {
+        return `${config.prefix}${(value / truncateConfig.threshold).toFixed(1)}${truncateConfig.suffix}${config.suffix}`;
+    }
+    else {
+        return `${config.prefix}${value.toFixed(computedDecimalPlaces)}${config.suffix}`;
+    }
+};
+export const getChartFormatter = (format, options) => {
+    if (format === 'string') {
+        return (value) => String(value);
+    }
+    else if (format in numberFormats) {
+        return (value) => {
+            const numValue = typeof value === 'string' ? parseFloat(value) : value;
+            if (isNaN(numValue)) {
+                return String(value);
+            }
+            return formatAndTruncate(numValue, format, options);
+        };
+    }
+    throw new Error(`Invalid format: ${format}`);
+};

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

@@ -1,35 +1,9 @@
-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;
+export declare const getChartFormat: {
+    string: (value: string) => string;
+    integer: (value: number) => string;
+    decimal: (value: number) => string;
+    currency: (value: number) => string;
+    percentage: (value: number) => string;
+    multiple: (value: number) => string;
 };
 //# sourceMappingURL=dataFormats.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"dataFormats.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/shared/dataFormats.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,cAAc;oBACT,MAAM,KAAG,MAAM;qBACd,MAAM,KAAG,MAAM;qBACf,MAAM,KAAG,MAAM;sBACd,MAAM,KAAG,MAAM;wBACb,MAAM,KAAG,MAAM;sBACjB,MAAM,KAAG,MAAM;CAClC,CAAC"}

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

@@ -1,25 +1,20 @@
-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) => {
+import { formats, truncation } from '../../../constants/data';
+const formatAndTruncate = (value, format, threshold = 'million') => {
     const absValue = Math.abs(value);
-    if (absValue >= 1000000) {
-        return `${prefix}${(value / 1000000).toFixed(1)}M${suffix}`;
+    const config = formats[format];
+    const truncateConfig = truncation[threshold];
+    if (absValue >= truncateConfig.threshold) {
+        return `${config.prefix}${(value / truncateConfig.threshold).toFixed(1)}${truncateConfig.suffix}${config.suffix}`;
     }
-    if (truncateAt1000 && absValue >= 1000) {
-        return `${prefix}${(value / 1000).toFixed(1)}k${suffix}`;
+    else {
+        return `${config.prefix}${value.toFixed(config.decimalPlaces)}${config.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),
+export const getChartFormat = {
+    string: (value) => value,
+    integer: (value) => formatAndTruncate(value, 'integer', 'thousand'),
+    decimal: (value) => formatAndTruncate(value, 'decimal', 'thousand'),
+    currency: (value) => formatAndTruncate(value, 'currency', 'thousand'),
+    percentage: (value) => formatAndTruncate(value, 'percentage', 'thousand'),
+    multiple: (value) => formatAndTruncate(value, 'multiple', 'thousand'),
 };

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

@@ -1 +1,11 @@
+import { BadgeProps as MantineBadgeProps } from '@mantine/core';
+import { colors } from '../../constants/colors';
+interface BadgeProps extends Omit<MantineBadgeProps, 'color'> {
+    size?: 'sm' | 'md' | 'lg';
+    color?: keyof typeof colors;
+    variant?: 'outline' | 'filled' | 'gradient';
+}
+declare const Badge: ({ styles, color, variant, size, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export { Badge };
+export type { BadgeProps };
 //# sourceMappingURL=Badge.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Info/Badge.tsx"],"names":[],"mappings":""}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Info/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,UAAU,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGvF,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,UAAU,UAAW,SAAQ,IAAI,CAAC,iBAAiB,EAAE,OAAO,CAAC;IAC3D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;CAC7C;AAED,QAAA,MAAM,KAAK,GAAI,4CAA2E,UAAU,4CA8DnG,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/Info/Badge.js

@@ -1 +1,64 @@
-"use strict";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Badge as MantineBadge } from '@mantine/core';
+import { fontBase, inputFontSize } from '../../constants/font';
+import { colors } from '../../constants/colors';
+const Badge = ({ styles, color = 'primary', variant = 'outline', size = 'md', ...props }) => {
+    const sizes = {
+        sm: {
+            mantineSize: 'md',
+            padding: '0.4rem 0.8rem',
+            height: '1.5rem',
+            fontSize: inputFontSize['sm'],
+        },
+        md: {
+            mantineSize: 'lg',
+            padding: '0.4rem 0.8rem',
+            height: '2.5rem',
+            fontSize: inputFontSize['md'],
+        },
+        lg: {
+            mantineSize: 'xl',
+            padding: '0.4rem 0.8rem',
+            height: '3rem',
+            fontSize: inputFontSize['lg'],
+        },
+    };
+    const variants = {
+        outline: {
+            border: `1.5px solid ${colors[color][200]}`,
+            color: colors[color][200],
+            backgroundColor: 'transparent',
+            borderRadius: '8px',
+            padding: '0.4rem 0.8rem',
+        },
+        filled: {
+            backgroundColor: colors[color][50],
+            color: colors[color][200],
+        },
+        gradient: {
+            background: `linear-gradient(to right, ${colors[color][50]}, ${colors[color][200]})`,
+            color: 'white',
+            borderRadius: '16px',
+            padding: '0.4rem 0.8rem',
+        },
+    };
+    const selectedSize = sizes[size];
+    const selectedVariant = variants[variant];
+    const style = {
+        root: {
+            padding: selectedSize.padding,
+            height: selectedSize.height,
+            cursor: 'default',
+            ...selectedVariant,
+        },
+        inner: {
+            ...fontBase,
+            ...selectedSize.fontSize,
+            textTransform: 'none',
+            cursor: 'default',
+        },
+        ...styles,
+    };
+    return _jsx(MantineBadge, { size: selectedSize.mantineSize, styles: style, ...props });
+};
+export { Badge };

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

@@ -0,0 +1,8 @@
+interface FormulaTooltipProps {
+    title: string;
+    description: string;
+    expression: string;
+}
+declare const FormulaTooltip: ({ title, description, expression }: FormulaTooltipProps) => import("react/jsx-runtime").JSX.Element;
+export { FormulaTooltip };
+//# sourceMappingURL=FormulaTooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormulaTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Tooltips/FormulaTooltip.tsx"],"names":[],"mappings":"AAQA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,cAAc,GAAI,oCAAoC,mBAAmB,4CAgB9E,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../Layout/Box';
+import { Text } from '../../Typography/Text';
+import { Formula } from '../../Typography/Formula';
+import { Stack } from '../../Layout/Stack';
+import { blue } from '../../../constants/colors';
+import { Center } from '../../Layout/Center';
+const FormulaTooltip = ({ title, description, expression }) => {
+    return (_jsx(Box, { p: "0.8rem", children: _jsxs(Stack, { gap: "1.6rem", children: [_jsxs(Stack, { gap: "0.8rem", sx: { maxWidth: '375px' }, children: [_jsx(Text, { weight: "semibold", children: title }), _jsx(Text, { variant: "label", children: description })] }), _jsx("div", { style: { padding: '1.6rem 2.4rem', borderRadius: '16px', backgroundColor: blue[25], width: '100%' }, children: _jsx(Center, { children: _jsx(Formula, { expression: expression, color: blue[300] }) }) })] }) }));
+};
+export { FormulaTooltip };

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

@@ -8,6 +8,7 @@ interface InfoTooltipProps {
     offset?: number;
     className?: string;
     styles?: Record<string, CSSObject>;
+    maxWidth?: string;
 }
 declare const componentSizes: {
     readonly sm: "1.2rem";
@@ -15,6 +16,6 @@ declare const componentSizes: {
     readonly lg: "2rem";
     readonly xl: "2.4rem";
 };
-declare const InfoTooltip: ({ text, content, position, size, offset, className, styles }: InfoTooltipProps) => import("react/jsx-runtime").JSX.Element;
+declare const InfoTooltip: ({ text, content, position, size, offset, className, styles, maxWidth }: 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":"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"}
+{"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;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,QAAA,MAAM,cAAc;;;;;CAKV,CAAC;AAEX,QAAA,MAAM,WAAW,GAAI,wEAA6F,gBAAgB,4CAcjI,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, content, position = 'top-start', size = 'md', offset, className, styles }) => {
+const InfoTooltip = ({ text, content, position = 'top-start', size = 'md', offset, className, styles, maxWidth }) => {
     const style = {
         icon: {
             color: neutral[100],
@@ -15,6 +15,6 @@ const InfoTooltip = ({ text, content, position = 'top-start', size = 'md', offse
         },
         ...styles,
     };
-    return (_jsx(Tooltip, { text: text || content, 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, maxWidth: maxWidth, children: _jsx("i", { className: "fas fa-info-circle", style: style.icon }) }));
 };
 export { InfoTooltip };

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

@@ -7,7 +7,8 @@ interface TooltipProps {
     offset?: number;
     className?: string;
     styles?: Record<string, CSSObject>;
+    maxWidth?: string;
 }
-declare const Tooltip: ({ children, text, position, offset, className, styles }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+declare const Tooltip: ({ children, text, position, offset, className, styles, maxWidth }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export { Tooltip };
 //# sourceMappingURL=Tooltip.d.ts.map

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,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"}
+{"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;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,QAAA,MAAM,OAAO,GAAI,mEAAiF,YAAY,4CAgD7G,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Tooltip as MantineTooltip, Box } from '@mantine/core';
 import { neutral } from '../../../constants/colors';
 import { fontBase, fontSize, fontWeight } from '../../../constants/font';
-const Tooltip = ({ children, text, position = 'top-start', offset, className, styles }) => {
+const Tooltip = ({ children, text, position = 'top-start', offset, className, styles, maxWidth }) => {
     const positionToTransition = {
         'top-end': 'slide-up',
         'bottom-end': 'slide-down',
@@ -23,7 +23,7 @@ const Tooltip = ({ children, text, position = 'top-start', offset, className, st
             boxShadow: '0px 0px 19px 0px #00000040',
             borderRadius: '8px',
             textWrap: 'wrap',
-            maxWidth: '375px',
+            maxWidth: maxWidth || '375px',
             padding: '0.75rem 1.125rem',
             ...fontSize['sm'],
             height: 'fit-content',

package/dist/components/Inputs/Controls/Radio.d.ts

@@ -0,0 +1,8 @@
+import { RadioProps as MantineRadioProps } from '@mantine/core';
+import { CSSObject } from '@mantine/styles';
+interface RadioProps extends MantineRadioProps {
+    styles?: Record<string, CSSObject>;
+}
+declare const Radio: ({ styles, ...props }: RadioProps) => import("react/jsx-runtime").JSX.Element;
+export { Radio };
+//# sourceMappingURL=Radio.d.ts.map

package/dist/components/Inputs/Controls/Radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/Controls/Radio.tsx"],"names":[],"mappings":"AACA,OAAO,EAAyB,UAAU,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACvF,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,UAAU,UAAW,SAAQ,iBAAiB;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,KAAK,GAAI,sBAAsB,UAAU,4CAsC9C,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/Inputs/Controls/Radio.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Radio as MantineRadio } from '@mantine/core';
+import { primary, neutral } from '../../../constants/colors';
+import { fontBase, inputFontSize } from '../../../constants/font';
+const Radio = ({ styles, ...props }) => {
+    const style = {
+        root: {
+            display: 'flex',
+            alignItems: 'center',
+        },
+        radio: {
+            cursor: props.disabled || props.checked ? 'default' : 'pointer',
+            margin: 0,
+            marginTop: 0,
+            lineHeight: 'normal',
+            '&[type="radio"]': {
+                margin: 0,
+                marginTop: 0,
+                lineHeight: 'normal',
+            },
+            '&:checked': {
+                backgroundColor: primary[200],
+                borderColor: primary[200],
+            },
+            '&:hover': {
+                backgroundColor: props.checked ? primary[200] : neutral[50],
+            },
+        },
+        icon: {
+            color: 'white',
+        },
+        label: {
+            cursor: props.disabled ? 'default' : 'pointer',
+            ...fontBase,
+            fontSize: inputFontSize['md'].fontSize,
+            lineHeight: '2.25rem',
+            color: neutral[200],
+        },
+        ...styles,
+    };
+    return _jsx(MantineRadio, { size: "lg", styles: style, ...props });
+};
+export { Radio };

package/dist/components/Inputs/Controls/RadioList.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface RadioListOption {
+    value: string;
+    label: string;
+    rightContent?: React.ReactNode;
+}
+interface RadioListProps {
+    data: RadioListOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    width?: React.CSSProperties['width'];
+}
+declare const RadioList: ({ data, value, onChange, disabled, width }: RadioListProps) => import("react/jsx-runtime").JSX.Element;
+export { RadioList };
+//# sourceMappingURL=RadioList.d.ts.map

package/dist/components/Inputs/Controls/RadioList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioList.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/Controls/RadioList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC;AAED,UAAU,cAAc;IACtB,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;CACtC;AAED,QAAA,MAAM,SAAS,GAAI,4CAAoD,cAAc,4CAkCpF,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}