@taiv/ui 1.10.10 → 1.12.0

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/Inputs/Controls/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,26 @@
+import { SegmentedControlProps as MantineSegmentedControlProps } from '@mantine/core';
+import { CSSObject } from '@mantine/styles';
+declare const componentSizes: {
+    readonly sm: {
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly mantineSize: "md";
+    };
+    readonly md: {
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly mantineSize: "lg";
+    };
+    readonly lg: {
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly mantineSize: "xl";
+    };
+};
+interface SegmentedControlProps extends Omit<MantineSegmentedControlProps, 'size'> {
+    size?: keyof typeof componentSizes;
+    styles?: Record<string, CSSObject>;
+}
+declare const SegmentedControl: ({ styles, size, color, ...props }: SegmentedControlProps) => import("react/jsx-runtime").JSX.Element;
+export { SegmentedControl };
+//# sourceMappingURL=SegmentedControl.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Controls/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,qBAAqB,IAAI,4BAA4B,EACtD,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;CAIV,CAAC;AAEX,UAAU,qBAAsB,SAAQ,IAAI,CAAC,4BAA4B,EAAE,MAAM,CAAC;IAChF,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,gBAAgB,GAAI,mCAA0C,qBAAqB,4CA+BxF,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SegmentedControl as MantineSegmentedControl, } from '@mantine/core';
+import { primary, neutral, white } from '../../../../constants/colors';
+import { fontBase, fontSize, fontWeight } from '../../../../constants/font';
+const componentSizes = {
+    sm: { mantineSize: 'md', ...fontSize['xs'] },
+    md: { mantineSize: 'lg', ...fontSize['sm'] },
+    lg: { mantineSize: 'xl', ...fontSize['md'] },
+};
+const SegmentedControl = ({ styles, size = 'md', color, ...props }) => {
+    const selectedSize = componentSizes[size];
+    const style = {
+        root: {
+            backgroundColor: neutral[50],
+        },
+        controlActive: {
+            backgroundColor: white,
+        },
+        label: {
+            ...fontBase,
+            fontSize: selectedSize.fontSize,
+            '&:not([data-active])': {
+                color: neutral[200],
+            },
+            '&[data-active]': {
+                '&, &:hover': {
+                    color: primary[200],
+                    fontWeight: fontWeight.semibold,
+                },
+            },
+        },
+        control: {
+            '&:not(:first-of-type)': {
+                borderColor: neutral[100],
+            },
+        },
+        ...styles,
+    };
+    return _jsx(MantineSegmentedControl, { radius: 'md', color: color, size: selectedSize.mantineSize, styles: style, transitionTimingFunction: 'linear', transitionDuration: 300, ...props });
+};
+export { SegmentedControl };

package/dist/components/Inputs/Controls/SegmentedControl/SegmentedControl.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SegmentedControl } from './SegmentedControl';
+declare const meta: Meta<typeof SegmentedControl>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const StringData: Story;
+export declare const States: Story;
+export declare const FullWidth: Story;
+export declare const Orientation: Story;
+export declare const CustomStyles: Story;
+//# sourceMappingURL=SegmentedControl.stories.d.ts.map

package/dist/components/Inputs/Controls/SegmentedControl/SegmentedControl.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Controls/SegmentedControl/SegmentedControl.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAUtD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAkHvC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KA8BrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAenB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAwBpB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAczB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA2B1B,CAAC"}

package/dist/components/Inputs/Controls/SegmentedControl/SegmentedControl.stories.js

@@ -0,0 +1,231 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { SegmentedControl } from './SegmentedControl';
+import { Group } from '../../../Layout/Group/Group';
+import { Stack } from '../../../Layout/Stack/Stack';
+const sampleData = [
+    { label: 'React', value: 'react' },
+    { label: 'Angular', value: 'ng' },
+    { label: 'Vue', value: 'vue' },
+];
+const meta = {
+    title: 'Components/Inputs/Controls/SegmentedControl',
+    component: SegmentedControl,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        size: {
+            control: { type: 'select' },
+            options: ['sm', 'md', 'lg'],
+            description: 'Controls segment padding and label font size',
+            table: {
+                type: { summary: "'sm' | 'md' | 'lg'" },
+                defaultValue: { summary: "'md'" },
+            },
+        },
+        data: {
+            control: { type: 'object' },
+            description: 'Segments as strings or { value, label, disabled? } objects',
+            table: {
+                type: { summary: "string[] | SegmentedControlItem[]" },
+            },
+        },
+        value: {
+            control: { type: 'text' },
+            description: 'Selected segment value (controlled)',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        defaultValue: {
+            control: { type: 'text' },
+            description: 'Default value when uncontrolled',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        disabled: {
+            control: { type: 'boolean' },
+            description: 'Disables the entire control',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        fullWidth: {
+            control: { type: 'boolean' },
+            description: 'Stretch to 100% of the container width',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        orientation: {
+            control: { type: 'select' },
+            options: ['horizontal', 'vertical'],
+            description: 'Layout direction of segments',
+            table: {
+                type: { summary: "'horizontal' | 'vertical'" },
+                defaultValue: { summary: "'horizontal'" },
+            },
+        },
+        readOnly: {
+            control: { type: 'boolean' },
+            description: 'Non-interactive but not visually disabled',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        color: {
+            control: { type: 'color' },
+            description: 'Active segment color (Mantine color key or CSS color)',
+            table: {
+                type: { summary: 'MantineColor' },
+            },
+        },
+        radius: {
+            control: { type: 'text' },
+            description: 'Border radius (theme key or CSS value)',
+            table: {
+                type: { summary: "MantineNumberSize" },
+            },
+        },
+        transitionDuration: {
+            control: { type: 'number' },
+            description: 'Transition duration in ms (0 to disable)',
+            table: {
+                type: { summary: 'number' },
+                defaultValue: { summary: '200' },
+            },
+        },
+        name: {
+            control: { type: 'text' },
+            description: 'Name attribute for the underlying radio group',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        styles: {
+            control: { type: 'object' },
+            description: 'Custom styles object (Mantine Styles API)',
+            table: {
+                type: { summary: 'Record<string, CSSObject>' },
+            },
+        },
+        onChange: {
+            action: 'changed',
+            description: 'Called with the new value when selection changes',
+            table: {
+                type: { summary: '(value: string) => void' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: (args) => {
+        var _a, _b;
+        const [value, setValue] = useState((_a = args.value) !== null && _a !== void 0 ? _a : 'react');
+        return _jsx(SegmentedControl, { ...args, data: (_b = args.data) !== null && _b !== void 0 ? _b : sampleData, value: value, onChange: setValue });
+    },
+    args: {
+        data: sampleData,
+        size: 'md',
+        disabled: false,
+        fullWidth: false,
+        orientation: 'horizontal',
+        readOnly: false,
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: `const [value, setValue] = useState('react');
+
+<SegmentedControl
+  data={[
+    { label: 'React', value: 'react' },
+    { label: 'Angular', value: 'ng' },
+    { label: 'Vue', value: 'vue' },
+  ]}
+  value={value}
+  onChange={setValue}
+/>`,
+            },
+        },
+    },
+};
+export const Sizes = {
+    render: () => (_jsxs(Stack, { gap: "1.6rem", children: [_jsx(SegmentedControl, { size: "sm", data: sampleData, value: "react", onChange: () => { } }), _jsx(SegmentedControl, { size: "md", data: sampleData, value: "ng", onChange: () => { } }), _jsx(SegmentedControl, { size: "lg", data: sampleData, value: "vue", onChange: () => { } })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const StringData = {
+    render: () => (_jsx(SegmentedControl, { data: ['Day', 'Week', 'Month', 'Year'], value: "Week", onChange: () => { } })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const States = {
+    render: () => (_jsxs(Stack, { gap: "1.6rem", style: { minWidth: '28rem' }, children: [_jsx(SegmentedControl, { data: sampleData, value: "react", onChange: () => { } }), _jsx(SegmentedControl, { data: sampleData, value: "react", onChange: () => { }, disabled: true }), _jsx(SegmentedControl, { data: [
+                    { value: 'preview', label: 'Preview', disabled: true },
+                    { value: 'code', label: 'Code' },
+                    { value: 'export', label: 'Export' },
+                ], value: "code", onChange: () => { } }), _jsx(SegmentedControl, { data: sampleData, value: "vue", onChange: () => { }, readOnly: true })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const FullWidth = {
+    render: () => (_jsx("div", { style: { width: '36rem', maxWidth: '100%' }, children: _jsx(SegmentedControl, { fullWidth: true, data: sampleData, value: "react", onChange: () => { } }) })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const Orientation = {
+    render: () => (_jsxs(Group, { gap: "3rem", align: "flex-start", children: [_jsx(SegmentedControl, { data: sampleData, value: "ng", onChange: () => { }, orientation: "horizontal" }), _jsx(SegmentedControl, { data: sampleData, value: "vue", onChange: () => { }, orientation: "vertical" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const CustomStyles = {
+    render: () => (_jsx(Group, { gap: "2rem", children: _jsx(SegmentedControl, { data: sampleData, value: "react", onChange: () => { }, styles: {
+                root: {
+                    backgroundColor: '#f0f4f8',
+                },
+                label: {
+                    '&:not([data-active])': {
+                        color: '#495057',
+                    },
+                },
+            } }) })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};

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';
@@ -23,6 +24,7 @@ export { Checkbox } from './Inputs/Controls/Checkbox/Checkbox';
 export { Radio } from './Inputs/Controls/Radio/Radio';
 export { RadioList } from './Inputs/Controls/RadioList/RadioList';
 export { Toggle } from './Inputs/Controls/Toggle/Toggle';
+export { SegmentedControl } from './Inputs/Controls/SegmentedControl/SegmentedControl';
 export { FontSelect } from './Inputs/Dropdowns/FontSelect/FontSelect';
 export { MultiSelect } from './Inputs/Dropdowns/MultiSelect/MultiSelect';
 export { CascadingSelect } from './Inputs/Dropdowns/CascadingSelect/CascadingSelect';

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';
@@ -26,6 +27,7 @@ export { Checkbox } from './Inputs/Controls/Checkbox/Checkbox';
 export { Radio } from './Inputs/Controls/Radio/Radio';
 export { RadioList } from './Inputs/Controls/RadioList/RadioList';
 export { Toggle } from './Inputs/Controls/Toggle/Toggle';
+export { SegmentedControl } from './Inputs/Controls/SegmentedControl/SegmentedControl';
 export { FontSelect } from './Inputs/Dropdowns/FontSelect/FontSelect';
 export { MultiSelect } from './Inputs/Dropdowns/MultiSelect/MultiSelect';
 export { CascadingSelect } from './Inputs/Dropdowns/CascadingSelect/CascadingSelect';

package/dist/types/types.d.ts

@@ -22,4 +22,10 @@ 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,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,CAAA"}
+{"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/package.json

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