pixelize-design-library 2.4.1 → 2.4.2-beta.1

package/dist/Utils/table.js

@@ -45,6 +45,14 @@ exports.useDebounce = useDebounce;
 exports.globalSearchFilter = globalSearchFilter;
 const react_1 = __importStar(require("react"));
 const accentText_1 = require("../Theme/tokens/builders/accentText");
+const statusTone_1 = require("../Theme/tokens/builders/statusTone");
+// Built once, not per comparison: sorting 10k rows runs this ~130k times, and constructing a
+// collator is orders of magnitude dearer than using one.
+const COLLATOR = new Intl.Collator(undefined, {
+    numeric: true,
+    sensitivity: "base",
+});
+const HAS_DIGIT = /\d/;
 /**
  * Type-aware, null-safe comparison. Detects numbers and dates; otherwise falls
  * back to a numeric-aware locale string compare. Empty/null values sort last.
@@ -67,11 +75,15 @@ function compareValues(aRaw, bRaw, direction) {
     const bn = Number(b);
     if (!Number.isNaN(an) && !Number.isNaN(bn))
         return (an - bn) * dir;
-    const ad = Date.parse(a);
-    const bd = Date.parse(b);
-    if (!Number.isNaN(ad) && !Number.isNaN(bd))
-        return (ad - bd) * dir;
-    return a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }) * dir;
+    // No digit means no date, so this skips two Date.parse calls per comparison on the common
+    // text columns (names, emails, statuses) without changing which strings parse as dates.
+    if (HAS_DIGIT.test(a) && HAS_DIGIT.test(b)) {
+        const ad = Date.parse(a);
+        const bd = Date.parse(b);
+        if (!Number.isNaN(ad) && !Number.isNaN(bd))
+            return (ad - bd) * dir;
+    }
+    return COLLATOR.compare(a, b) * dir;
 }
 function SortMultiColumnData(data, sortConfig) {
     const active = sortConfig.filter((s) => s.direction !== "none");
@@ -87,33 +99,31 @@ function SortMultiColumnData(data, sortConfig) {
     });
 }
 const withAlpha = (hex, aa) => /^#([0-9a-fA-F]{6})$/.test(hex) ? `${hex}${aa}` : hex;
-const FALLBACK_SOLID = "#8B3FC8";
 /** Deterministic, theme-aware color palette for groups + status pills. */
 function buildTablePalette(theme) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-    const c = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) !== null && _a !== void 0 ? _a : {};
-    const white = c.white || "#FFFFFF";
-    const black = c.black || "#000000";
-    const bases = [
-        (_b = c.primary) === null || _b === void 0 ? void 0 : _b[500],
-        (_d = (_c = c.semantic) === null || _c === void 0 ? void 0 : _c.success) === null || _d === void 0 ? void 0 : _d[500],
-        (_f = (_e = c.semantic) === null || _e === void 0 ? void 0 : _e.info) === null || _f === void 0 ? void 0 : _f[500],
-        (_h = (_g = c.semantic) === null || _g === void 0 ? void 0 : _g.warning) === null || _h === void 0 ? void 0 : _h[500],
-        (_j = c.teal) === null || _j === void 0 ? void 0 : _j[500],
-        (_k = c.blue) === null || _k === void 0 ? void 0 : _k[500],
-        (_l = c.pink) === null || _l === void 0 ? void 0 : _l[500],
-        (_o = (_m = c.semantic) === null || _m === void 0 ? void 0 : _m.error) === null || _o === void 0 ? void 0 : _o[500],
-        (_p = c.orange) === null || _p === void 0 ? void 0 : _p[500],
-        (_q = c.purple) === null || _q === void 0 ? void 0 : _q[500],
+    const c = theme.colors;
+    const mode = (0, accentText_1.isDarkCanvas)(c.backgroundColor.main) ? "dark" : "light";
+    const scales = [
+        c.primary,
+        c.semantic.success,
+        c.semantic.info,
+        c.semantic.warning,
+        c.teal,
+        c.blue,
+        c.pink,
+        c.semantic.error,
+        c.orange,
+        c.purple,
     ];
-    const list = bases.filter(Boolean);
-    const fallback = [FALLBACK_SOLID];
-    return (list.length ? list : fallback).map((solid) => ({
-        solid,
-        soft: withAlpha(solid, "22"),
-        text: solid,
-        onSolid: (0, accentText_1.onFilled)(solid, white, black),
-    }));
+    return scales.map((scale) => {
+        const tone = (0, statusTone_1.resolveStatusTone)(scale, mode);
+        return {
+            solid: scale[500],
+            soft: tone.bg,
+            text: tone.fg,
+            onSolid: (0, accentText_1.onFilled)(scale[500], c.white, c.black),
+        };
+    });
 }
 const hashKey = (value) => {
     const s = String(value);
@@ -122,22 +132,15 @@ const hashKey = (value) => {
         h = (h * 31 + s.charCodeAt(i)) >>> 0;
     return h;
 };
-/**
- * Pick a deterministic palette color for a value, with optional override hex.
- *
- * `theme` is optional so existing callers that don't have it keep compiling — when omitted,
- * `onSolid` falls back to the mode-stable absolutes ("#FFFFFF"/"#000000", same value
- * `theme.colors.white`/`black` resolve to for every brand) instead of going undefined.
- */
+/** Pick a deterministic palette color for a value, with optional consumer override hex. */
 function pickTableColor(value, palette, override, theme) {
-    var _a, _b;
-    const white = ((_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.white) || "#FFFFFF";
-    const black = ((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.black) || "#000000";
+    const white = theme ? theme.colors.white : accentText_1.DEFAULT_WHITE;
+    const black = theme ? theme.colors.black : accentText_1.DEFAULT_BLACK;
     if (override) {
         return { solid: override, soft: withAlpha(override, "22"), text: override, onSolid: (0, accentText_1.onFilled)(override, white, black) };
     }
     if (!palette.length) {
-        return { solid: FALLBACK_SOLID, soft: withAlpha(FALLBACK_SOLID, "22"), text: FALLBACK_SOLID, onSolid: (0, accentText_1.onFilled)(FALLBACK_SOLID, white, black) };
+        throw new Error("pickTableColor: empty palette — build it with buildTablePalette(theme).");
     }
     return palette[hashKey(value) % palette.length];
 }

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,32 @@
+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 { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { getAccordionHoverColors } from "./accordionColors.js";
+const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }) => {
+    const { colors } = useCustomTheme();
+    const isDark = isDarkCanvas(colors.backgroundColor.main);
+    const border = colors.boxborder[300];
+    const headingColor = colors.text[800];
+    const bodyColor = colors.text[600];
+    const { expandedBg, softHover } = useMemo(() => getAccordionHoverColors(colors, isDark), [colors, isDark]);
+    return (_jsx(ChakraAccordian, { allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion, ...rest, children: items.map((item, idx) => {
+            var _a;
+            return (_jsx(AccordionItem, { border: `0.063rem solid ${border}`, borderRadius: "xl", bg: colors.background[50], mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: colors.boxborder[400] }, ...item.itemProps, sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle, children: ({ isExpanded }) => {
+                    var _a, _b, _c;
+                    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 ${colors.primary[300]}`,
+                                        outlineOffset: "-0.125rem",
+                                    }, ...item.buttonProps, sx: {
+                                        ...(_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.buttonStyle,
+                                        "&:hover": {
+                                            ...(_b = item.customStyles) === null || _b === void 0 ? void 0 : _b.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 ? colors.accentText : colors.textMuted, bg: isExpanded ? colors.primary.opacity[16] : "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: (_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.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,27 @@
+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) => {
+    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: colors.gray[200],
+            softHover: colors.gray[200],
+        };
+    }
+    const rest = colors.background[50];
+    const expandedTint = compositeOver(colors.primary.opacity[8], rest);
+    return {
+        expandedBg: liftToContrast(expandedTint, rest, MIN_HOVER_STEP),
+        softHover: liftToContrast(colors.table.hover[100], rest, MIN_HOVER_STEP),
+    };
+};

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

@@ -0,0 +1,8 @@
+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, }) => {
+    const { colors } = useCustomTheme();
+    return (_jsxs(ChakraAlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, children: [_jsx(AlertDialogOverlay, {}), _jsxs(AlertDialogContent, { bg: colors.background[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,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import ReactApexChart from "react-apexcharts";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+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 { colors: palette } = useCustomTheme();
+    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 {};