pixelize-design-library 2.4.1-beta.9 → 2.4.2-beta.0

package/dist/esm/Assets/defaultLogo.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DefaultLogo = () => {
+    return (_jsxs("svg", { width: "12.09", height: "15.95", viewBox: "0 0 31 29", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M30.4999 6.26137V7.81058H15.9761H14.8787V22.8508V28.8862H12.5226C9.6824 28.8862 7.32632 26.4656 7.06812 23.3995C7.06812 23.2381 7.06812 23.0444 7.06812 22.8508V18.3323C7.06812 18.2677 7.06812 18.2032 7.06812 18.1063V15.5889V6.2291C7.06812 2.80793 9.84378 -5.72205e-06 13.2972 -5.72205e-06H24.8517C28.0147 0.355021 30.4676 3.00158 30.4676 6.2291L30.4999 6.26137Z", fill: "currentColor" }), _jsx("path", { d: "M7.10053 23.3672H7.03598C5.16402 23.2381 3.48571 22.4635 2.25926 21.3338C0.871428 20.0428 0 18.2677 0 16.3312V15.6211H7.06825V18.1386C7.06825 18.2032 7.06825 18.2677 7.06825 18.3645V22.883C7.06825 23.0767 7.06825 23.2381 7.06825 23.4317L7.10053 23.3672Z", fill: "currentColor" }), _jsx("path", { d: "M30.4678 12.0063V15.6211V17.1703C30.4678 20.6238 26.272 23.3994 21.0757 23.3994H14.8789V22.8508V15.6211H22.6572V7.81056C22.6895 7.81056 30.5001 7.81056 30.5001 7.81056V11.5868C30.5001 11.7159 30.5001 11.8772 30.5001 12.0063H30.4678Z", fill: "currentColor" })] }));
+};
+export default DefaultLogo;

package/dist/esm/Components/Accordion/Accordion.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Accordion as ChakraAccordian, AccordionItem, AccordionButton, AccordionPanel, Box, Flex, } from "@chakra-ui/react";
+import { ChevronDown } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { DEFAULT_CANVAS, isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { getAccordionHoverColors } from "./accordionColors.js";
+const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const theme = useCustomTheme();
+    const c = (_a = theme.colors) !== null && _a !== void 0 ? _a : {};
+    const isDark = isDarkCanvas((_c = (_b = c.backgroundColor) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : DEFAULT_CANVAS);
+    const border = (_e = (_d = c.boxborder) === null || _d === void 0 ? void 0 : _d[300]) !== null && _e !== void 0 ? _e : (_f = c.gray) === null || _f === void 0 ? void 0 : _f[200];
+    const headingColor = (_h = (_g = c.text) === null || _g === void 0 ? void 0 : _g[800]) !== null && _h !== void 0 ? _h : (_j = c.gray) === null || _j === void 0 ? void 0 : _j[800];
+    const bodyColor = (_l = (_k = c.text) === null || _k === void 0 ? void 0 : _k[600]) !== null && _l !== void 0 ? _l : (_m = c.gray) === null || _m === void 0 ? void 0 : _m[600];
+    const { expandedBg, softHover } = useMemo(() => { var _a; return getAccordionHoverColors((_a = theme.colors) !== null && _a !== void 0 ? _a : {}, isDark); }, [theme.colors, isDark]);
+    return (_jsx(ChakraAccordian, { allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion, ...rest, children: items.map((item, idx) => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            return (_jsx(AccordionItem, { border: `0.063rem solid ${border}`, borderRadius: "xl", bg: (_b = (_a = c.background) === null || _a === void 0 ? void 0 : _a[50]) !== null && _b !== void 0 ? _b : (_c = c.backgroundColor) === null || _c === void 0 ? void 0 : _c.light, mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: (_e = (_d = c.boxborder) === null || _d === void 0 ? void 0 : _d[400]) !== null && _e !== void 0 ? _e : (_f = c.gray) === null || _f === void 0 ? void 0 : _f[300] }, ...item.itemProps, sx: (_g = item.customStyles) === null || _g === void 0 ? void 0 : _g.itemStyle, children: ({ isExpanded }) => {
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+                    return (_jsxs(_Fragment, { children: [_jsx("h2", { children: _jsxs(AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "0.875rem", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: "background 0.15s ease", _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: {
+                                        boxShadow: "none",
+                                        outline: `0.125rem solid ${(_b = (_a = c.primary) === null || _a === void 0 ? void 0 : _a[300]) !== null && _b !== void 0 ? _b : (_c = c.gray) === null || _c === void 0 ? void 0 : _c[300]}`,
+                                        outlineOffset: "-0.125rem",
+                                    }, ...item.buttonProps, sx: {
+                                        ...(_d = item.customStyles) === null || _d === void 0 ? void 0 : _d.buttonStyle,
+                                        "&:hover": {
+                                            ...(_e = item.customStyles) === null || _e === void 0 ? void 0 : _e.hoverbuttonStyle,
+                                        },
+                                    }, children: [_jsx(Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), _jsx(Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "md", color: isExpanded ? ((_g = (_f = c.primary) === null || _f === void 0 ? void 0 : _f[600]) !== null && _g !== void 0 ? _g : headingColor) : (_h = c.gray) === null || _h === void 0 ? void 0 : _h[500], bg: isExpanded ? ((_l = (_k = (_j = c.primary) === null || _j === void 0 ? void 0 : _j.opacity) === null || _k === void 0 ? void 0 : _k[16]) !== null && _l !== void 0 ? _l : "transparent") : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s ease, color 0.2s ease, background 0.2s ease", children: _jsx(ChevronDown, { size: 16 }) })] }) }), _jsx(AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "0.875rem", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_m = item.customStyles) === null || _m === void 0 ? void 0 : _m.panelStyle, children: item.content })] }));
+                } }, idx));
+        }) }));
+};
+export default Accordion;

package/dist/esm/Components/Accordion/AccordionProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Accordion/accordionColors.js

@@ -0,0 +1,30 @@
+import { compositeOver } from "../../Theme/tokens/builders/color.js";
+import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+/**
+ * Same perceptibility floor the SideBar ladder uses — a state a user cannot see is not a state.
+ * Light mode `softHover` measured 1.042-1.105 across all 9 brands (invisible) while dark sat at
+ * 1.58-1.85; `expandedBg` (`primary.opacity[8]`, an 8%-alpha tint) is the same bug class — an
+ * 8% tint composited over a near-white canvas is itself near-white. Both are resolved against
+ * the rest surface so light and dark actually agree on "you can see this".
+ */
+const MIN_HOVER_STEP = 1.15;
+export const getAccordionHoverColors = (colors, isDark) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    if (isDark) {
+        // primary.opacity[8] composited over the dark canvas collapses to ~1.07:1 (near-black on
+        // near-black) — gray[200] is an opaque rung that stays visibly above canvas (~1.6:1) without
+        // being as loud as the gray[300] hover fill FilterSidebar/Table already use.
+        return {
+            expandedBg: (_d = (_b = (_a = colors.gray) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[50],
+            softHover: (_j = (_g = (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[200]) !== null && _g !== void 0 ? _g : (_h = colors.gray) === null || _h === void 0 ? void 0 : _h[300]) !== null && _j !== void 0 ? _j : (_k = colors.gray) === null || _k === void 0 ? void 0 : _k[50],
+        };
+    }
+    const rest = (_m = (_l = colors.background) === null || _l === void 0 ? void 0 : _l[50]) !== null && _m !== void 0 ? _m : (_o = colors.backgroundColor) === null || _o === void 0 ? void 0 : _o.light;
+    const expandedTint = ((_q = (_p = colors.primary) === null || _p === void 0 ? void 0 : _p.opacity) === null || _q === void 0 ? void 0 : _q[8])
+        ? compositeOver(colors.primary.opacity[8], rest)
+        : ((_s = (_r = colors.gray) === null || _r === void 0 ? void 0 : _r[50]) !== null && _s !== void 0 ? _s : rest);
+    return {
+        expandedBg: liftToContrast(expandedTint, rest, "light", MIN_HOVER_STEP),
+        softHover: liftToContrast((_v = (_u = (_t = colors.table) === null || _t === void 0 ? void 0 : _t.hover) === null || _u === void 0 ? void 0 : _u[100]) !== null && _v !== void 0 ? _v : (_w = colors.gray) === null || _w === void 0 ? void 0 : _w[50], rest, "light", MIN_HOVER_STEP),
+    };
+};

package/dist/esm/Components/AlertDialog/AlertDialog.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertDialog as ChakraAlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Button, } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+const AlertDialog = ({ isOpen, onClose, leastDestructiveRef, content, title, confirmButtonText = "Yes", cancelButtonText = "No", isConfirmLoading, onConfirm, ContentStyle, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, key, }) => {
+    var _a;
+    const { colors } = useCustomTheme();
+    return (_jsxs(ChakraAlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, children: [_jsx(AlertDialogOverlay, {}), _jsxs(AlertDialogContent, { bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], sx: ContentStyle, children: [_jsx(AlertDialogHeader, { sx: headerStyle, children: title }), _jsx(AlertDialogCloseButton, { sx: closeButtonStyle }), _jsx(AlertDialogBody, { sx: bodyStyle, children: content }), _jsxs(AlertDialogFooter, { sx: footerStyle, children: [_jsx(Button, { ref: leastDestructiveRef, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm", sx: button1Style, children: cancelButtonText }), _jsx(Button, { colorScheme: "primary", onClick: onConfirm, isLoading: isConfirmLoading, ml: 3, size: "sm", sx: button2Style, children: confirmButtonText })] })] })] }, key));
+};
+export default AlertDialog;

package/dist/esm/Components/AlertDialog/AlertDialogProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Apexcharts/ApexAreaChart/ApexAreaChart.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import ReactApexChart from "react-apexcharts";
+import { useTheme } from "@chakra-ui/react";
+import { getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
+import { baseAxisLabels, baseChart, baseGrid, baseLegend, baseTooltip } from "../chartBase.js";
+const ApexAreaChart = ({ variant = "basic", data, series, labels, title, titlePosition = "left", height = 320, width = "100%", colors, showLegend = true, legendPosition = "bottom", yAxisFormatter, }) => {
+    const theme = useTheme();
+    const palette = theme.colors;
+    const seriesColors = useMemo(() => colors !== null && colors !== void 0 ? colors : getDefaultSeriesColors(palette), [colors, palette]);
+    const resolvedSeries = useMemo(() => series !== null && series !== void 0 ? series : [{ name: title !== null && title !== void 0 ? title : "Series 1", data: data !== null && data !== void 0 ? data : [] }], [series, data, title]);
+    const isSpark = variant === "sparkline";
+    const options = useMemo(() => ({
+        chart: baseChart(palette, {
+            type: "area",
+            stacked: variant === "stacked",
+            sparkline: { enabled: isSpark },
+        }),
+        colors: seriesColors,
+        stroke: { curve: "smooth", width: 2, lineCap: "round" },
+        fill: variant === "gradient"
+            ? {
+                type: "gradient",
+                gradient: { shadeIntensity: 1, opacityFrom: 0.45, opacityTo: 0.05, stops: [0, 90, 100] },
+            }
+            : { type: "solid", opacity: variant === "stacked" ? 0.85 : 0.2 },
+        dataLabels: { enabled: false },
+        markers: { size: 0, hover: { size: isSpark ? 0 : 5 } },
+        grid: isSpark ? { show: false } : baseGrid(palette),
+        xaxis: {
+            categories: labels,
+            labels: { show: !isSpark, style: baseAxisLabels(palette) },
+            axisBorder: { show: false },
+            axisTicks: { show: false },
+            tooltip: { enabled: false },
+        },
+        yaxis: {
+            show: !isSpark,
+            labels: { style: baseAxisLabels(palette), formatter: yAxisFormatter },
+        },
+        title: {
+            text: isSpark ? undefined : title,
+            align: titlePosition,
+            style: mergeChartTitleStyle(palette),
+        },
+        legend: {
+            ...baseLegend(palette, legendPosition),
+            show: showLegend && !isSpark && resolvedSeries.length > 1,
+        },
+        tooltip: baseTooltip(palette),
+    }), [
+        palette,
+        variant,
+        isSpark,
+        seriesColors,
+        labels,
+        title,
+        titlePosition,
+        showLegend,
+        legendPosition,
+        resolvedSeries.length,
+        yAxisFormatter,
+    ]);
+    return (_jsx("div", { children: _jsx(ReactApexChart, { options: options, series: resolvedSeries, type: "area", height: height, width: width }) }));
+};
+export default ApexAreaChart;

package/dist/esm/Components/Apexcharts/ApexAreaChart/ApexAreaChartProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Apexcharts/ApexBarChart/ApexBarChart.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import ReactApexChart from "react-apexcharts";
+import { useTheme } from "@chakra-ui/react";
+import { chartAxisLabelColor, getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
+import { baseAxisLabels, baseChart, baseGrid, baseLegend, baseTooltip } from "../chartBase.js";
+export default function ApexBarChart({ data, labels, title, titlePosition, height = 400, width = 500, barColor, xAxisStyle, yAxisStyle, titleStyle, horizontal = false, distributed = false, seriesName = "Data", series, stacked = false, showLegend, legendPosition = "bottom", }) {
+    const theme = useTheme();
+    const palette = theme.colors;
+    const seriesColors = useMemo(() => getDefaultSeriesColors(palette), [palette]);
+    const resolvedBarColors = useMemo(() => barColor !== null && barColor !== void 0 ? barColor : (distributed ? seriesColors : [seriesColors[1]]), [barColor, distributed, seriesColors]);
+    const axisColor = chartAxisLabelColor(palette);
+    const mergedXAxis = useMemo(() => { var _a; return ({ ...baseAxisLabels(palette), ...xAxisStyle, colors: (_a = xAxisStyle === null || xAxisStyle === void 0 ? void 0 : xAxisStyle.color) !== null && _a !== void 0 ? _a : axisColor }); }, [palette, axisColor, xAxisStyle]);
+    const mergedYAxis = useMemo(() => { var _a; return ({ ...baseAxisLabels(palette), ...yAxisStyle, colors: (_a = yAxisStyle === null || yAxisStyle === void 0 ? void 0 : yAxisStyle.color) !== null && _a !== void 0 ? _a : axisColor }); }, [palette, axisColor, yAxisStyle]);
+    const mergedTitleStyle = useMemo(() => mergeChartTitleStyle(palette, titleStyle), [palette, titleStyle]);
+    const options = useMemo(() => ({
+        chart: baseChart(palette, { type: "bar", stacked }),
+        plotOptions: {
+            bar: {
+                borderRadius: 4,
+                borderRadiusApplication: "end",
+                columnWidth: "55%",
+                barHeight: "60%",
+                horizontal,
+                distributed,
+            },
+        },
+        dataLabels: { enabled: false },
+        grid: baseGrid(palette, horizontal),
+        xaxis: {
+            categories: labels,
+            labels: { style: mergedXAxis },
+            axisBorder: { show: false },
+            axisTicks: { show: false },
+        },
+        yaxis: { labels: { style: mergedYAxis } },
+        title: { text: title, align: titlePosition, style: mergedTitleStyle },
+        legend: {
+            ...baseLegend(palette, legendPosition),
+            show: showLegend !== null && showLegend !== void 0 ? showLegend : (series ? series.length > 1 : false),
+        },
+        tooltip: baseTooltip(palette),
+        colors: resolvedBarColors,
+    }), [
+        palette,
+        labels,
+        mergedXAxis,
+        mergedYAxis,
+        title,
+        titlePosition,
+        mergedTitleStyle,
+        resolvedBarColors,
+        horizontal,
+        distributed,
+        stacked,
+        showLegend,
+        legendPosition,
+        series,
+    ]);
+    const resolvedSeries = series !== null && series !== void 0 ? series : [{ name: seriesName, data: data !== null && data !== void 0 ? data : [] }];
+    return (_jsx("div", { children: _jsx(ReactApexChart, { options: options, series: resolvedSeries, type: "bar", height: height, width: width }) }));
+}

package/dist/esm/Components/Apexcharts/ApexBarChart/ApexBarChartProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Apexcharts/ApexLineChart/ApexLineChart.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import ReactApexChart from "react-apexcharts";
+import { useTheme } from "@chakra-ui/react";
+import ToolTip from "../../ToolTip/ToolTip.js";
+import { getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
+import { baseAxisLabels, baseChart, baseGrid, baseTooltip } from "../chartBase.js";
+const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePosition = "center", titleStyle, compact = false, toolbarBreakpointPct = 0.6, titleClampLines, showTitleEllipsis = true, showSeries = true, series: seriesNames, variant = "basic", }) => {
+    const theme = useTheme();
+    const palette = theme.colors;
+    const resolvedLineColors = lineColors !== null && lineColors !== void 0 ? lineColors : getDefaultSeriesColors(palette);
+    const resolvedTitleStyle = useMemo(() => mergeChartTitleStyle(palette, titleStyle), [palette, titleStyle]);
+    const initialName = Array.isArray(seriesNames) && seriesNames.length ? seriesNames[0] : "Series 1";
+    const [apexSeries, setApexSeries] = useState([
+        {
+            name: initialName,
+            data: Array.isArray(data) ? data : [],
+        },
+    ]);
+    useEffect(() => {
+        if (variant === "realtime") {
+            const interval = setInterval(() => {
+                setApexSeries((prev) => {
+                    const newData = [...prev[0].data];
+                    newData.push(Math.floor(Math.random() * 100) + 10);
+                    if (newData.length > 20)
+                        newData.shift();
+                    return [{ name: prev[0].name, data: newData }];
+                });
+            }, 1000);
+            return () => clearInterval(interval);
+        }
+    }, [variant]);
+    const wrapperRef = useRef(null);
+    const [containerW, setContainerW] = useState(0);
+    useEffect(() => {
+        if (!wrapperRef.current)
+            return;
+        const ro = new ResizeObserver((entries) => {
+            var _a, _b;
+            const w = ((_b = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.contentRect) === null || _b === void 0 ? void 0 : _b.width) || 0;
+            setContainerW(w);
+        });
+        ro.observe(wrapperRef.current);
+        return () => ro.disconnect();
+    }, []);
+    const parsePercent = (v) => {
+        const n = parseFloat(v.replace("%", ""));
+        return isNaN(n) ? 0 : n / 100;
+    };
+    const chartW = typeof width === "number"
+        ? width
+        : typeof width === "string" && width.trim().endsWith("%")
+            ? containerW * parsePercent(width.trim())
+            : containerW;
+    const hNum = typeof height === "number" ? height : 0;
+    const isSmall = compact || (chartW > 0 && chartW < 280) || (hNum > 0 && hNum < 220);
+    const computedFontSize = (resolvedTitleStyle === null || resolvedTitleStyle === void 0 ? void 0 : resolvedTitleStyle.fontSize) ||
+        (chartW
+            ? `${Math.max(12, Math.min(18, Math.floor(chartW / 18)))}px`
+            : "14px");
+    const clampLines = titleClampLines !== null && titleClampLines !== void 0 ? titleClampLines : (isSmall ? 2 : 1);
+    const titleRef = useRef(null);
+    const [isTruncated, setIsTruncated] = useState(false);
+    useEffect(() => {
+        const el = titleRef.current;
+        if (!el)
+            return;
+        if (clampLines > 1) {
+            setIsTruncated(el.scrollHeight > el.clientHeight);
+        }
+        else {
+            setIsTruncated(el.scrollWidth > el.clientWidth);
+        }
+    }, [title, chartW, width, clampLines]);
+    const ratio = containerW > 0
+        ? chartW / containerW
+        : typeof width === "string" && width.trim().endsWith("%")
+            ? parsePercent(width.trim())
+            : 1;
+    const showToolbar = !isSmall && ratio >= toolbarBreakpointPct;
+    const options = useMemo(() => ({
+        chart: baseChart(palette, {
+            type: "line",
+            animations: variant === "realtime"
+                ? { enabled: true, speed: 1000, dynamicAnimation: { speed: 1000 } }
+                : baseChart(palette).animations,
+            zoom: { enabled: !isSmall },
+            toolbar: { show: showToolbar },
+        }),
+        stroke: { curve: "smooth", width: 2, lineCap: "round" },
+        colors: resolvedLineColors,
+        xaxis: {
+            ...(labels
+                ? { categories: labels }
+                : { type: variant === "realtime" ? "numeric" : "category" }),
+            labels: { style: baseAxisLabels(palette) },
+            axisBorder: { show: false },
+            axisTicks: { show: false },
+        },
+        yaxis: { labels: { style: baseAxisLabels(palette) } },
+        title: {
+            text: isSmall ? undefined : title,
+            align: titlePosition !== null && titlePosition !== void 0 ? titlePosition : "center",
+            style: resolvedTitleStyle,
+        },
+        tooltip: {
+            ...baseTooltip(palette),
+            enabled: !!showSeries,
+            marker: { show: !!showSeries },
+        },
+        markers: { size: 0, hover: { size: showSeries ? 5 : 0 } },
+        dataLabels: { enabled: false },
+        grid: {
+            ...baseGrid(palette),
+            padding: { top: isSmall ? 6 : 16, right: 12, left: 8, bottom: 0 },
+        },
+    }), [
+        variant,
+        showToolbar,
+        resolvedLineColors,
+        labels,
+        isSmall,
+        title,
+        titlePosition,
+        resolvedTitleStyle,
+        showSeries,
+        palette,
+    ]);
+    return (_jsxs("div", { ref: wrapperRef, children: [title && isSmall && (_jsx(ToolTip, { label: title, placement: "top", hasArrow: true, fontSize: "0.75rem", isDisabled: !isTruncated, children: _jsx("div", { ref: titleRef, style: {
+                        textAlign: "left",
+                        color: resolvedTitleStyle === null || resolvedTitleStyle === void 0 ? void 0 : resolvedTitleStyle.color,
+                        fontSize: computedFontSize,
+                        fontWeight: resolvedTitleStyle === null || resolvedTitleStyle === void 0 ? void 0 : resolvedTitleStyle.fontWeight,
+                        fontFamily: resolvedTitleStyle === null || resolvedTitleStyle === void 0 ? void 0 : resolvedTitleStyle.fontFamily,
+                        marginBottom: 4,
+                        width: typeof width === "string"
+                            ? width
+                            : typeof width === "number"
+                                ? `${width}px`
+                                : "100%",
+                        whiteSpace: clampLines > 1 ? "normal" : "nowrap",
+                        overflow: "hidden",
+                        textOverflow: showTitleEllipsis && clampLines === 1 ? "ellipsis" : "clip",
+                        display: clampLines > 1 ? "-webkit-box" : undefined,
+                        WebkitLineClamp: clampLines > 1 ? clampLines : undefined,
+                        WebkitBoxOrient: clampLines > 1 ? "vertical" : undefined,
+                        wordBreak: clampLines > 1 ? "break-word" : undefined,
+                        lineHeight: clampLines > 1 ? "1.2em" : undefined,
+                        maxHeight: clampLines > 1 ? `${1.2 * clampLines}em` : undefined,
+                    }, children: title }) })), _jsx(ReactApexChart, { options: options, series: apexSeries, type: "line", height: height, width: width })] }));
+};
+export default ApexLineChart;

package/dist/esm/Components/Apexcharts/ApexLineChart/ApexLineChartProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Apexcharts/ApexPieChart/ApexPieChart.js

@@ -0,0 +1,182 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import ReactApexChart from "react-apexcharts";
+import { useTheme } from "@chakra-ui/react";
+import { chartInk, chartMode, getDefaultSeriesColors, labelOnSeries, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
+import { baseChart, baseLegend, baseTooltip } from "../chartBase.js";
+const getValidLegendPosition = (position) => {
+    const validPositions = ["left", "right", "top", "bottom"];
+    if (validPositions.includes(position)) {
+        return position;
+    }
+    console.warn(`Invalid legend position: ${position}. Defaulting to 'bottom'.`);
+    return "bottom";
+};
+const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutColors, chartColor, titlePosition = "center", titleStyle, legendPosition = "bottom", legendStyle, variant = "pie", showDataLabels = true, minLabelPercent = 8, surfaceColor, donutSize = "68%", totalLabel = "Total", labelPlacement = "auto", }) => {
+    var _a;
+    const theme = useTheme();
+    const palette = theme.colors;
+    const ink = chartInk(palette);
+    const gap = surfaceColor !== null && surfaceColor !== void 0 ? surfaceColor : ink.surface;
+    const mergedTitleStyle = useMemo(() => mergeChartTitleStyle(palette, titleStyle), [palette, titleStyle]);
+    const seriesColors = useMemo(() => { var _a; return (_a = chartColor !== null && chartColor !== void 0 ? chartColor : donutColors) !== null && _a !== void 0 ? _a : getDefaultSeriesColors(palette); }, [chartColor, donutColors, palette]);
+    const labelInks = useMemo(() => seriesColors.map((c) => labelOnSeries(c, palette)), [seriesColors, palette]);
+    const numericHeight = typeof height === "number" ? height : Number.POSITIVE_INFINITY;
+    // A fixed outside-offset throws labels off a small canvas, and no single ink clears AA
+    // inside eight fills, so a small chart drops to legend plus tooltip instead.
+    const placement = labelPlacement === "auto"
+        ? numericHeight >= 240
+            ? "outside"
+            : "none"
+        : labelPlacement;
+    const labelsOn = showDataLabels && placement !== "none";
+    const outside = placement === "outside";
+    const validLegendPosition = getValidLegendPosition(legendPosition);
+    const legend = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        const base = baseLegend(palette, validLegendPosition);
+        if (!legendStyle)
+            return base;
+        return {
+            ...base,
+            labels: {
+                colors: (_a = legendStyle.colors) !== null && _a !== void 0 ? _a : (_b = base.labels) === null || _b === void 0 ? void 0 : _b.colors,
+                useSeriesColors: (_c = legendStyle.useSeriesColors) !== null && _c !== void 0 ? _c : (_d = base.labels) === null || _d === void 0 ? void 0 : _d.useSeriesColors,
+            },
+            markers: {
+                ...base.markers,
+                size: (_e = legendStyle.markerSize) !== null && _e !== void 0 ? _e : (_f = base.markers) === null || _f === void 0 ? void 0 : _f.size,
+                offsetX: (_g = legendStyle.markerOffsetX) !== null && _g !== void 0 ? _g : (_h = base.markers) === null || _h === void 0 ? void 0 : _h.offsetX,
+                offsetY: (_j = legendStyle.markerOffsetY) !== null && _j !== void 0 ? _j : (_k = base.markers) === null || _k === void 0 ? void 0 : _k.offsetY,
+            },
+            itemMargin: {
+                horizontal: (_l = legendStyle.horizontalGap) !== null && _l !== void 0 ? _l : (_m = base.itemMargin) === null || _m === void 0 ? void 0 : _m.horizontal,
+                vertical: (_o = legendStyle.verticalGap) !== null && _o !== void 0 ? _o : (_p = base.itemMargin) === null || _p === void 0 ? void 0 : _p.vertical,
+            },
+        };
+    }, [palette, validLegendPosition, legendStyle]);
+    const options = useMemo(() => {
+        var _a, _b, _c;
+        let extraOptions = {};
+        switch (variant) {
+            case "semi-donut":
+                extraOptions = {
+                    plotOptions: { pie: { startAngle: -90, endAngle: 90, offsetY: 10 } },
+                };
+                break;
+            case "monochrome-pie":
+                extraOptions = {
+                    theme: { monochrome: { enabled: true, shadeTo: "light", shadeIntensity: 0.65 } },
+                };
+                break;
+            case "gradient-donut":
+                extraOptions = { fill: { type: "gradient" } };
+                break;
+            case "donut-with-pattern":
+                extraOptions = {
+                    fill: {
+                        type: "pattern",
+                        pattern: { style: ["verticalLines", "squares", "horizontalLines", "circles"] },
+                    },
+                };
+                break;
+            case "pie-with-image":
+                extraOptions = {
+                    fill: {
+                        type: "image",
+                        image: {
+                            src: [
+                                "https://i.imgur.com/UM3mrju.jpg",
+                                "https://i.imgur.com/NpPOqQq.jpg",
+                            ],
+                        },
+                    },
+                };
+                break;
+            case "update-donut":
+                extraOptions = {
+                    plotOptions: {
+                        pie: {
+                            donut: {
+                                size: donutSize,
+                                labels: {
+                                    show: true,
+                                    name: { fontSize: "12px", fontFamily: "inherit", color: ink.muted, offsetY: -2 },
+                                    value: {
+                                        fontSize: "22px",
+                                        fontFamily: "inherit",
+                                        fontWeight: 600,
+                                        color: ink.text,
+                                        offsetY: 4,
+                                    },
+                                    total: { show: true, label: totalLabel, color: ink.muted, fontSize: "12px" },
+                                },
+                            },
+                        },
+                    },
+                };
+                break;
+            case "pie":
+                break;
+            default:
+                break;
+        }
+        const isDonut = !variant.includes("pie");
+        return {
+            labels,
+            colors: seriesColors,
+            stroke: { width: 2, colors: [gap] },
+            legend,
+            tooltip: { ...baseTooltip(palette), y: { formatter: (v) => `${v}` } },
+            title: { text: title, align: titlePosition, style: mergedTitleStyle },
+            dataLabels: {
+                enabled: labelsOn,
+                formatter: (val) => (val < minLabelPercent ? "" : `${Math.round(val)}%`),
+                style: {
+                    fontSize: "12px",
+                    fontFamily: "inherit",
+                    fontWeight: 600,
+                    colors: outside ? [ink.text] : labelInks,
+                },
+                dropShadow: { enabled: false },
+            },
+            states: { hover: { filter: { type: "lighten", value: 0.08 } } },
+            ...extraOptions,
+            chart: baseChart(palette, {
+                type: isDonut ? "donut" : "pie",
+                ...((_a = extraOptions.chart) !== null && _a !== void 0 ? _a : {}),
+            }),
+            plotOptions: {
+                ...extraOptions.plotOptions,
+                pie: {
+                    expandOnClick: false,
+                    customScale: outside && labelsOn ? 0.72 : 1,
+                    dataLabels: { offset: outside && labelsOn ? 42 : 0 },
+                    ...(isDonut ? { donut: { size: donutSize } } : {}),
+                    ...((_c = (_b = extraOptions.plotOptions) === null || _b === void 0 ? void 0 : _b.pie) !== null && _c !== void 0 ? _c : {}),
+                },
+            },
+            theme: { mode: chartMode(palette), ...extraOptions.theme },
+        };
+    }, [
+        variant,
+        labels,
+        seriesColors,
+        legend,
+        title,
+        titlePosition,
+        mergedTitleStyle,
+        palette,
+        gap,
+        minLabelPercent,
+        labelInks,
+        labelsOn,
+        outside,
+        donutSize,
+        totalLabel,
+        ink.muted,
+        ink.text,
+    ]);
+    return (_jsx("div", { children: _jsx(ReactApexChart, { options: options, series: data, type: (_a = options.chart) === null || _a === void 0 ? void 0 : _a.type, height: height, width: width }) }));
+};
+export default ApexPieChart;

package/dist/esm/Components/Apexcharts/ApexPieChart/ApexPieChartProps.js

@@ -0,0 +1 @@
+export {};