@taiv/ui 1.10.9 → 1.11.0

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

@@ -1,13 +1,19 @@
 import React from 'react';
 import { formats } from '../../../constants/data';
-import { ChartSeries } from '../../../types/types';
+import { ChartFormatOptions, ChartSeries } from '../../../types/types';
+type ChartFormat = keyof typeof formats;
+interface AxisFormat {
+    format: ChartFormat;
+    options?: ChartFormatOptions;
+}
 export interface ChartProps {
     series: ChartSeries[];
-    yAxisFormat?: keyof typeof formats;
-    xAxisFormat?: keyof typeof formats;
+    yAxisFormat?: ChartFormat | AxisFormat;
+    xAxisFormat?: ChartFormat | AxisFormat;
     height?: string | number;
     showLegend?: boolean;
     loading?: boolean;
 }
 export declare const Chart: React.FC<ChartProps>;
+export {};
 //# sourceMappingURL=Chart.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/Chart/Chart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAIlD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGnD,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAmKtC,CAAC"}
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/Chart/Chart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAIlD,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGvE,KAAK,WAAW,GAAG,MAAM,OAAO,OAAO,CAAC;AAExC,UAAU,UAAU;IAClB,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC;IACvC,WAAW,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC;IACvC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAwLtC,CAAC"}

package/dist/components/Data/Chart/Chart.js

@@ -10,8 +10,20 @@ import { fontStyle } from '../../../constants/font';
 import { primary, neutral } from '../../../constants/colors';
 import { createStyles } from '@mantine/core';
 export const Chart = ({ series, yAxisFormat = 'decimal', xAxisFormat = 'string', showLegend = true, loading = false, height = '100%' }) => {
-    const formatYAxisValue = getChartFormatter(yAxisFormat);
-    const formatXAxisValue = getChartFormatter(xAxisFormat);
+    const parseFormat = (format) => {
+        var _a;
+        if (typeof format === 'string') {
+            return { format: format, options: {} };
+        }
+        return {
+            format: format.format,
+            options: (_a = format.options) !== null && _a !== void 0 ? _a : {}
+        };
+    };
+    const parsedYAxis = parseFormat(yAxisFormat);
+    const parsedXAxis = parseFormat(xAxisFormat);
+    const formatYAxisValue = getChartFormatter(parsedYAxis.format, parsedYAxis.options);
+    const formatXAxisValue = getChartFormatter(parsedXAxis.format, parsedXAxis.options);
     const hasData = series.some((s) => s.data.length > 0);
     // Transform our ChartSeries array to match the Recharts format (just a singular data array keyed by the series name)
     const transformedData = (() => {

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

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { ChartProps } from "./Chart";
+declare const meta: Meta<ChartProps>;
+export default meta;
+type Story = StoryObj<ChartProps>;
+export declare const Default: Story;
+export declare const SeriesTypes: Story;
+export declare const MultiSeries: Story;
+export declare const MixedBarAndLine: Story;
+export declare const YAxisFormats: Story;
+export declare const YAxisDecimalPlaces: Story;
+export declare const YAxisTruncation: Story;
+export declare const XAxisNumericFormats: Story;
+export declare const WithoutLegend: Story;
+export declare const Loading: Story;
+export declare const Empty: Story;
+//# sourceMappingURL=Chart.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/Chart/Chart.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAO5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AA8D1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAAU,CA0D1B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;AAElC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAczB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAqB1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAmBhC,CAAC;AAgBF,eAAO,MAAM,eAAe,EAAE,KA+B7B,CAAC;AAgBF,eAAO,MAAM,mBAAmB,EAAE,KAuCjC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KASnB,CAAC"}

package/dist/components/Data/Chart/Chart.stories.js

@@ -0,0 +1,192 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formats } from "../../../constants/data";
+import { primary, success, warning } from "../../../constants/colors";
+import { Box } from "../../Layout/Box/Box";
+import { Group } from "../../Layout/Group/Group";
+import { Stack } from "../../Layout/Stack/Stack";
+import { Chart } from "./Chart";
+const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
+const sampleLineSeries = [
+    {
+        name: "Units sold",
+        type: "line",
+        data: months.map((m, i) => ({ key: m, value: 100 + i * 25 })),
+        color: primary[200],
+    },
+];
+const sampleAreaSeries = [
+    {
+        name: "Revenue",
+        type: "area",
+        data: months.map((m, i) => ({ key: m, value: 1200 + i * 180 })),
+        color: primary[200],
+    },
+];
+const sampleBarSeries = [
+    {
+        name: "Orders",
+        type: "bar",
+        data: months.map((m, i) => ({ key: m, value: 42 + i * 8 })),
+        color: success[200],
+    },
+];
+const sampleMultiSeries = [
+    {
+        name: "Product A",
+        type: "line",
+        data: months.map((m, i) => ({ key: m, value: 120 + i * 20 })),
+        color: primary[200],
+    },
+    {
+        name: "Product B",
+        type: "line",
+        data: months.map((m, i) => ({ key: m, value: 80 + i * 15 })),
+        color: success[200],
+    },
+];
+const sampleMixedSeries = [
+    {
+        name: "Actuals",
+        type: "bar",
+        data: months.map((m, i) => ({ key: m, value: 55 + i * 6 })),
+        color: primary[200],
+    },
+    {
+        name: "Target",
+        type: "line",
+        data: months.map((m, i) => ({ key: m, value: 50 + i * 7 })),
+        color: warning[200],
+    },
+];
+const meta = {
+    title: "Components/Data/Chart",
+    component: Chart,
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "A composed chart (line, area, bar) built on Recharts with shared X/Y axes, tooltips, and optional legend. `yAxisFormat` and `xAxisFormat` accept either a `formats` key string (e.g. `'currency'`) or `{ format, options? }` for `decimalPlaces` / `truncateAt`; the chart normalizes both via an internal `parseFormat` before calling `getChartFormatter`.",
+            },
+        },
+    },
+    argTypes: {
+        series: {
+            control: { type: "object" },
+            description: "ChartSeries[] — each series: name, data (DataPoint[]), optional color and type (line | area | bar)",
+            table: { type: { summary: "ChartSeries[]" } },
+        },
+        yAxisFormat: {
+            control: { type: "select" },
+            options: Object.keys(formats),
+            description: "Format key string (default formatting) or pass `{ format, options }` in code for `decimalPlaces` / `truncateAt`. Tooltip values use the Y formatter.",
+            table: {
+                type: { summary: "ChartFormat | AxisFormat" },
+                defaultValue: { summary: "'decimal'" },
+            },
+        },
+        xAxisFormat: {
+            control: { type: "select" },
+            options: Object.keys(formats),
+            description: "Format key string or `{ format, options }`. Use `string` for categorical X keys; numeric `formats` when keys parse as numbers.",
+            table: {
+                type: { summary: "ChartFormat | AxisFormat" },
+                defaultValue: { summary: "'string'" },
+            },
+        },
+        height: {
+            control: { type: "text" },
+            description: "Chart height (CSS length or number)",
+            table: {
+                type: { summary: "string | number" },
+                defaultValue: { summary: "'100%'" },
+            },
+        },
+        showLegend: {
+            control: { type: "boolean" },
+            description: "Show Recharts legend below the chart",
+            table: { defaultValue: { summary: "true" } },
+        },
+        loading: {
+            control: { type: "boolean" },
+            description: "Placeholder state while data is loading",
+            table: { defaultValue: { summary: "false" } },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        series: sampleLineSeries,
+        yAxisFormat: "decimal",
+        xAxisFormat: "string",
+        height: "100%",
+        showLegend: true,
+        loading: false,
+    },
+    render: (args) => (_jsx(Box, { w: "100%", maw: 720, h: 360, children: _jsx(Chart, { ...args }) })),
+};
+export const SeriesTypes = {
+    render: () => (_jsxs(Stack, { gap: "2.4rem", children: [_jsx(Box, { w: "100%", h: 280, children: _jsx(Chart, { series: sampleLineSeries, height: "100%", yAxisFormat: "integer" }) }), _jsx(Box, { w: "100%", h: 280, children: _jsx(Chart, { series: sampleAreaSeries, height: "100%", yAxisFormat: "currency" }) }), _jsx(Box, { w: "100%", h: 280, children: _jsx(Chart, { series: sampleBarSeries, height: "100%", yAxisFormat: "integer" }) })] })),
+};
+export const MultiSeries = {
+    render: () => (_jsx(Box, { w: "100%", h: 320, children: _jsx(Chart, { series: sampleMultiSeries, height: "100%", yAxisFormat: "decimal" }) })),
+};
+export const MixedBarAndLine = {
+    render: () => (_jsx(Box, { w: "100%", h: 320, children: _jsx(Chart, { series: sampleMixedSeries, height: "100%", yAxisFormat: "integer" }) })),
+};
+export const YAxisFormats = {
+    render: () => (_jsx(Group, { align: "flex-start", gap: "1.6rem", styles: { root: { flexWrap: "wrap" } }, children: ["integer", "decimal", "currency", "percentage", "multiple"].map((fmt) => (_jsx(Box, { w: 280, h: 220, children: _jsx(Chart, { series: sampleLineSeries, height: "100%", yAxisFormat: fmt, showLegend: false }) }, fmt))) })),
+};
+export const YAxisDecimalPlaces = {
+    render: () => (_jsx(Group, { align: "flex-start", gap: "1.6rem", styles: { root: { flexWrap: "wrap" } }, children: [1, 2, 3].map((dp) => (_jsx(Box, { w: 280, h: 220, children: _jsx(Chart, { series: sampleLineSeries, height: "100%", yAxisFormat: { format: "decimal", options: { decimalPlaces: dp } }, showLegend: false }) }, dp))) })),
+};
+const largeValueSeries = [
+    {
+        name: "Volume",
+        type: "line",
+        data: [
+            { key: "Q1", value: 850 },
+            { key: "Q2", value: 4200 },
+            { key: "Q3", value: 1550000 },
+            { key: "Q4", value: 2100000 },
+        ],
+        color: primary[200],
+    },
+];
+export const YAxisTruncation = {
+    render: () => (_jsxs(Group, { align: "flex-start", gap: "1.6rem", styles: { root: { flexWrap: "wrap" } }, children: [_jsx(Box, { w: 280, h: 220, children: _jsx(Chart, { series: largeValueSeries, height: "100%", yAxisFormat: {
+                        format: "decimal",
+                        options: { truncateAt: "thousand" },
+                    }, showLegend: false }) }), _jsx(Box, { w: 280, h: 220, children: _jsx(Chart, { series: largeValueSeries, height: "100%", yAxisFormat: {
+                        format: "decimal",
+                        options: { truncateAt: "million" },
+                    }, showLegend: false }) })] })),
+};
+const numericKeySeries = [
+    {
+        name: "Score",
+        type: "bar",
+        data: [
+            { key: "1000", value: 12 },
+            { key: "2500", value: 24 },
+            { key: "5000", value: 18 },
+            { key: "10000", value: 30 },
+        ],
+        color: success[200],
+    },
+];
+export const XAxisNumericFormats = {
+    render: () => (_jsxs(Group, { align: "flex-start", gap: "1.6rem", styles: { root: { flexWrap: "wrap" } }, children: [_jsx(Box, { w: 280, h: 220, children: _jsx(Chart, { series: numericKeySeries, height: "100%", xAxisFormat: "integer", yAxisFormat: "integer", showLegend: false }) }), _jsx(Box, { w: 280, h: 220, children: _jsx(Chart, { series: numericKeySeries, height: "100%", xAxisFormat: { format: "currency", options: { decimalPlaces: 0 } }, yAxisFormat: "integer", showLegend: false }) }), _jsx(Box, { w: 280, h: 220, children: _jsx(Chart, { series: numericKeySeries, height: "100%", xAxisFormat: {
+                        format: "decimal",
+                        options: { truncateAt: "thousand" },
+                    }, yAxisFormat: "integer", showLegend: false }) })] })),
+};
+export const WithoutLegend = {
+    render: () => (_jsx(Box, { w: "100%", h: 300, children: _jsx(Chart, { series: sampleMultiSeries, height: "100%", showLegend: false }) })),
+};
+export const Loading = {
+    render: () => (_jsx(Box, { w: "100%", h: 300, children: _jsx(Chart, { series: sampleLineSeries, height: "100%", loading: true }) })),
+};
+export const Empty = {
+    render: () => (_jsx(Box, { w: "100%", h: 300, children: _jsx(Chart, { series: [{ name: "Empty", data: [], color: primary[200] }], height: "100%" }) })),
+};

package/dist/components/Data/PieChart/PieChart.js

@@ -9,7 +9,7 @@ import { Box } from '../../Layout/Box/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%', }) => {
+export const PieChart = ({ data, showLegend = true, innerRadius = 80, outerRadius = 100, paddingAngle = 0, format = 'percentage', loading = false, centerContent, height = '100%', }) => {
     const hasData = data && data.length > 0;
     const transformedData = data.map((item) => ({
         ...item,
@@ -37,7 +37,7 @@ export const PieChart = ({ data, showLegend = true, innerRadius = 80, outerRadiu
         }
         return null;
     };
-    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: `
+    return (_jsxs(_Fragment, { children: [loading || !hasData ? (_jsx(Center, { style: { height, 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};

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

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { PieChartProps } from "./PieChart";
+declare const meta: Meta<PieChartProps>;
+export default meta;
+type Story = StoryObj<PieChartProps>;
+export declare const Default: Story;
+export declare const Formats: Story;
+export declare const WithCenterContent: Story;
+export declare const DonutGeometry: Story;
+export declare const PaddingAngle: Story;
+export declare const WithoutLegend: Story;
+export declare const Loading: Story;
+export declare const Empty: Story;
+//# sourceMappingURL=PieChart.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PieChart.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/PieChart/PieChart.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAM5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAShD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,aAAa,CAmE7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAqBrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAe/B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA6B3B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAoC1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAW3B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC"}

package/dist/components/Data/PieChart/PieChart.stories.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { numberFormats } from "../../../constants/data";
+import { primary, success, warning } from "../../../constants/colors";
+import { Box } from "../../Layout/Box/Box";
+import { Group } from "../../Layout/Group/Group";
+import { PieChart } from "./PieChart";
+const samplePieData = [
+    { key: "Product A", value: 45, color: primary[200] },
+    { key: "Product B", value: 30, color: success[200] },
+    { key: "Product C", value: 25, color: warning[200] },
+];
+const meta = {
+    title: "Components/Data/PieChart",
+    component: PieChart,
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "A pie / donut chart built on Recharts. Slice values are formatted with `getChartFormatter` via the `format` prop (key of `numberFormats`). Optional `centerContent` renders a label in the donut hole. `paddingAngle` defaults to `0` (no gap between slices); increase it for separation. Use a parent with a definite height when `height` is `'100%'` (see stories).",
+            },
+        },
+    },
+    argTypes: {
+        data: {
+            control: { type: "object" },
+            description: "PieDataPoint[] — key, value, optional color per slice",
+            table: { type: { summary: "PieDataPoint[]" } },
+        },
+        format: {
+            control: { type: "select" },
+            options: Object.keys(numberFormats),
+            description: "Format key for tooltip and optional center value",
+            table: {
+                type: { summary: "keyof typeof numberFormats" },
+                defaultValue: { summary: "'percentage'" },
+            },
+        },
+        height: {
+            control: { type: "text" },
+            description: "Chart height (CSS length or number); loading and empty states match this height",
+            table: {
+                type: { summary: "string | number" },
+                defaultValue: { summary: "'100%'" },
+            },
+        },
+        showLegend: {
+            control: { type: "boolean" },
+            description: "Show Recharts legend below the chart",
+            table: { defaultValue: { summary: "true" } },
+        },
+        loading: {
+            control: { type: "boolean" },
+            description: "Placeholder state while data is loading",
+            table: { defaultValue: { summary: "false" } },
+        },
+        innerRadius: {
+            control: { type: "number" },
+            description: "Inner radius in px (larger = more donut, 0 = pie)",
+            table: { defaultValue: { summary: "80" } },
+        },
+        outerRadius: {
+            control: { type: "number" },
+            description: "Outer radius in px",
+            table: { defaultValue: { summary: "100" } },
+        },
+        paddingAngle: {
+            control: { type: "number" },
+            description: "Angular gap between slices in degrees (Recharts `Pie` `paddingAngle`). Default **0** — slices touch; increase for visible separation.",
+            table: { defaultValue: { summary: "0" } },
+        },
+        centerContent: {
+            control: { type: "object" },
+            description: "Optional center: title, subtitle, value",
+            table: { type: { summary: "PieCardCenterContentProps" } },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        data: samplePieData,
+        format: "percentage",
+        height: "100%",
+        showLegend: true,
+        loading: false,
+    },
+    render: (args) => (_jsx(Box, { w: "100%", maw: 480, h: 360, children: _jsx(PieChart, { ...args }) })),
+};
+export const Formats = {
+    render: () => (_jsx(Group, { align: "flex-start", gap: "1.6rem", styles: { root: { flexWrap: "wrap" } }, children: ["integer", "decimal", "currency", "percentage", "multiple"].map((fmt) => (_jsx(Box, { w: 400, h: 400, children: _jsx(PieChart, { data: samplePieData, format: fmt, height: "100%", showLegend: false }) }, fmt))) })),
+};
+export const WithCenterContent = {
+    render: () => (_jsx(Box, { w: "100%", maw: 480, h: 360, children: _jsx(PieChart, { data: samplePieData, format: "percentage", height: "100%", centerContent: {
+                value: 100,
+                title: "Share",
+                subtitle: "Q1 2026",
+            } }) })),
+};
+export const DonutGeometry = {
+    render: () => (_jsxs(Group, { align: "flex-start", gap: "1.6rem", styles: { root: { flexWrap: "wrap" } }, children: [_jsx(Box, { w: 400, h: 400, children: _jsx(PieChart, { data: samplePieData, format: "percentage", height: "100%", innerRadius: 0, outerRadius: 100, showLegend: false }) }), _jsx(Box, { w: 400, h: 400, children: _jsx(PieChart, { data: samplePieData, format: "percentage", height: "100%", innerRadius: 80, outerRadius: 100, showLegend: false }) })] })),
+};
+export const PaddingAngle = {
+    name: "Slice gaps (paddingAngle)",
+    parameters: {
+        docs: {
+            description: {
+                story: "The component defaults **`paddingAngle` to `0`**, so slices meet with no gap. Pass a positive value (degrees) when you want separation between segments—the background shows through in those gaps.",
+            },
+        },
+    },
+    render: () => (_jsxs(Group, { align: "flex-start", gap: "1.6rem", styles: { root: { flexWrap: "wrap" } }, children: [_jsx(Box, { w: 400, h: 400, children: _jsx(PieChart, { data: samplePieData, format: "percentage", height: "100%", paddingAngle: 0, showLegend: false }) }), _jsx(Box, { w: 400, h: 400, children: _jsx(PieChart, { data: samplePieData, format: "percentage", height: "100%", paddingAngle: 8, showLegend: false }) })] })),
+};
+export const WithoutLegend = {
+    render: () => (_jsx(Box, { w: "100%", h: 320, children: _jsx(PieChart, { data: samplePieData, format: "percentage", height: "100%", showLegend: false }) })),
+};
+export const Loading = {
+    render: () => (_jsx(Box, { w: "100%", h: 300, children: _jsx(PieChart, { data: samplePieData, format: "percentage", height: "100%", loading: true }) })),
+};
+export const Empty = {
+    render: () => (_jsx(Box, { w: "100%", h: 300, children: _jsx(PieChart, { data: [], format: "percentage", height: "100%" }) })),
+};

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

@@ -0,0 +1,10 @@
+import { type ProgressProps as MantineProgressProps } from '@mantine/core';
+import type { ProgressDataPoint } from '../../../types';
+export interface ProgressProps extends Omit<MantineProgressProps, 'animate' | 'style' | 'size' | 'radius' | 'sections'> {
+    width?: string | number;
+    scale?: string;
+    cornerRadius?: string;
+    data?: ProgressDataPoint[];
+}
+export declare const Progress: ({ width, color, data, scale, cornerRadius, ...props }: ProgressProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Progress.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/Progress/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,aAAa,IAAI,oBAAoB,EAC3C,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,MAAM,WAAW,aACf,SAAQ,IAAI,CACV,oBAAoB,EACpB,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CACrD;IACD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC5B;AAED,eAAO,MAAM,QAAQ,GAAI,uDAOtB,aAAa,4CAcf,CAAC"}

package/dist/components/Data/Progress/Progress.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Progress as MantineProgress, } from '@mantine/core';
+import { primary } from '../../../constants/colors';
+export const Progress = ({ width, color, data, scale = 'md', cornerRadius = 'md', ...props }) => {
+    const hasData = Array.isArray(data) && data.length > 0;
+    const resolvedColor = !hasData && color === undefined ? primary[200] : color;
+    return (_jsx(MantineProgress, { ...props, radius: cornerRadius, size: scale, sections: data, color: resolvedColor, style: width ? { width } : undefined }));
+};

package/dist/components/Data/Progress/Progress.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Progress } from './Progress';
+declare const meta: Meta<typeof Progress>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Values: Story;
+export declare const Scale: Story;
+export declare const CornerRadius: Story;
+export declare const Striped: Story;
+export declare const WithLabel: Story;
+export declare const Data: Story;
+export declare const WithTooltips: Story;
+export declare const Width: Story;
+//# sourceMappingURL=Progress.stories.d.ts.map

package/dist/components/Data/Progress/Progress.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/Progress/Progress.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAItC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CA6E/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KASpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAYlB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA2B1B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAC"}

package/dist/components/Data/Progress/Progress.stories.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { primary, purple, success } from '../../../constants/colors';
+import { Stack } from '../../Layout/Stack/Stack';
+import { Progress } from './Progress';
+const presetOptions = ['xs', 'sm', 'md', 'lg', 'xl'];
+const meta = {
+    title: 'Components/Data/Progress',
+    component: Progress,
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '25rem' }, children: _jsx(Story, {}) })),
+    ],
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'Horizontal progress bar. **`data`** (`ProgressDataPoint[]`) for multi-part segments; **`value`** / **`color`** for a single fill. Root width: **`width`** (**rem** or **`%`**). Bar thickness and corners: **`scale`** and **`cornerRadius`** (`xs`–`xl` preset strings). **`styles`** for Mantine styling hooks when needed.',
+            },
+        },
+    },
+    argTypes: {
+        scale: {
+            control: { type: 'select' },
+            options: [...presetOptions],
+            description: 'Bar height on the xs–xl scale',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: "'md'" },
+            },
+        },
+        cornerRadius: {
+            control: { type: 'select' },
+            options: [...presetOptions],
+            description: 'Corner rounding on the xs–xl scale',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: undefined },
+            },
+        },
+        value: {
+            control: { type: 'range', min: 0, max: 100, step: 1 },
+            description: 'Filled percent (single-bar mode; use `data` for multiple segments)',
+            table: { type: { summary: 'number' }, defaultValue: { summary: '0' } },
+        },
+        color: {
+            control: { type: 'text' },
+            description: 'Theme color of the bar (single-bar mode)',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'primary[200]' },
+            },
+        },
+        width: {
+            control: { type: 'text' },
+            description: 'Root width (e.g. rem string or percentage)',
+            table: {
+                type: { summary: 'string | number' },
+            },
+        },
+        data: {
+            control: { type: 'object' },
+            description: 'Multi-segment bar data',
+            table: { type: { summary: 'ProgressDataPoint[]' } },
+        },
+        striped: {
+            control: { type: 'boolean' },
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        label: {
+            control: { type: 'text' },
+            description: 'Label inside the bar (single-bar mode)',
+            table: { type: { summary: 'string' } },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        value: 50,
+        scale: 'md',
+        cornerRadius: 'md',
+        width: undefined,
+        striped: false,
+        data: undefined,
+        label: undefined,
+    },
+};
+export const Values = {
+    render: () => (_jsxs(Stack, { spacing: "md", children: [_jsx(Progress, { value: 0, scale: "xl", cornerRadius: "xl" }), _jsx(Progress, { value: 25, scale: "xl", cornerRadius: "xl" }), _jsx(Progress, { value: 50, scale: "xl", cornerRadius: "xl" }), _jsx(Progress, { value: 100, scale: "xl", cornerRadius: "xl" })] })),
+};
+export const Scale = {
+    render: () => (_jsx(Stack, { spacing: "md", children: presetOptions.map((preset) => (_jsx(Progress, { value: 60, scale: preset, cornerRadius: "md" }, preset))) })),
+};
+export const CornerRadius = {
+    render: () => (_jsx(Stack, { spacing: "md", children: presetOptions.map((radius) => (_jsx(Progress, { value: 60, scale: "xl", cornerRadius: radius }, radius))) })),
+};
+export const Striped = {
+    render: () => (_jsx(Stack, { spacing: "md", children: _jsx(Progress, { value: 55, scale: "xl", cornerRadius: "xl", striped: true }) })),
+};
+export const WithLabel = {
+    args: {
+        value: 70,
+        scale: 'xl',
+        cornerRadius: 'xl',
+        label: '70%',
+    },
+};
+export const Data = {
+    render: () => (_jsx(Progress, { scale: "xl", cornerRadius: "xl", data: [
+            { value: 35, color: primary[200], label: '35%' },
+            { value: 25, color: success[200], label: '25%' },
+            { value: 30, color: purple[200], label: '30%' },
+        ] })),
+};
+export const WithTooltips = {
+    render: () => (_jsx(Progress, { scale: "xl", cornerRadius: "xl", data: [
+            {
+                value: 40,
+                color: primary[200],
+                label: '40%',
+                tooltip: 'Completed tasks — 40%',
+            },
+            {
+                value: 35,
+                color: success[200],
+                label: '35%',
+                tooltip: 'In progress — 35%',
+            },
+            {
+                value: 25,
+                color: purple[200],
+                label: '25%',
+                tooltip: 'Remaining — 25%',
+            },
+        ] })),
+};
+export const Width = {
+    args: {
+        value: 45,
+        scale: 'xl',
+        cornerRadius: 'xl',
+        width: '24rem',
+    },
+};

package/dist/components/index.d.ts

@@ -6,6 +6,7 @@ export { PieChartCard } from './Data/Cards/PieChartCard/PieChartCard';
 export { RemovableItemList } from './Data/RemovableItemList/RemovableItemList';
 export { StatsCard } from './Data/Cards/StatsCard/StatsCard';
 export { StatsBadge } from './Data/StatsBadge/StatsBadge';
+export { Progress } from './Data/Progress/Progress';
 export { Modal } from './Info/Modals/Modal/Modal';
 export { FormModal } from './Info/Modals/FormModal/FormModal';
 export { ModalProvider } from './Info/Modals/ModalProvider/ModalProvider';

package/dist/components/index.d.ts.map

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

package/dist/components/index.js

@@ -7,6 +7,7 @@ export { PieChartCard } from './Data/Cards/PieChartCard/PieChartCard';
 export { RemovableItemList } from './Data/RemovableItemList/RemovableItemList';
 export { StatsCard } from './Data/Cards/StatsCard/StatsCard';
 export { StatsBadge } from './Data/StatsBadge/StatsBadge';
+export { Progress } from './Data/Progress/Progress';
 //Info
 export { Modal } from './Info/Modals/Modal/Modal';
 export { FormModal } from './Info/Modals/FormModal/FormModal';

package/dist/types/types.d.ts

@@ -1,3 +1,4 @@
+import { truncation } from "../constants";
 export type SelectOption = {
     value: string;
     label: string;
@@ -17,4 +18,14 @@ export type ChartSeries = {
     color?: string;
     type?: 'line' | 'area' | 'bar';
 };
+export type ChartFormatOptions = {
+    truncateAt?: keyof typeof truncation;
+    decimalPlaces?: number;
+};
+export type ProgressDataPoint = {
+    value: number;
+    color: string;
+    label?: string;
+    tooltip?: string;
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/types/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types/types.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC;CAChC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types/types.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC"}

package/dist/utils/charts.d.ts

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

package/dist/utils/charts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"charts.d.ts","sourceRoot":"","sources":["../../src/utils/charts.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAiB,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,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;AAEF,eAAO,MAAM,mBAAmB,GAAI,MAAM,SAAS,EAAE;;;GAmBpD,CAAC"}
+{"version":3,"file":"charts.d.ts","sourceRoot":"","sources":["../../src/utils/charts.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAA6B,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAe/D,eAAO,MAAM,iBAAiB,GAAI,QAAQ,MAAM,OAAO,OAAO,EAAE,UAAU,kBAAkB,KAAG,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,CAajI,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,MAAM,SAAS,EAAE;;;GAmBpD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taiv/ui",
-  "version": "1.10.9",
+  "version": "1.11.0",
   "author": "Taiv",
   "description": "Taiv's web UI Toolkit built on Mantine v6",
   "main": "dist/index.js",