pixelize-design-library 3.0.1-beta.1 → 3.1.0

package/dist/Utils/validation.d.ts

@@ -0,0 +1,13 @@
+export declare const EMAIL_REGEX: RegExp;
+export type ValidationCode = "email_required" | "email_invalid" | "password_required" | "password_min" | "required" | "positive_number" | "file_type" | "file_too_large" | "video_type" | "youtube_required" | "youtube_invalid";
+export declare const defaultValidationMessages: Record<ValidationCode, string>;
+export declare function validateEmail(value: string): ValidationCode | undefined;
+export declare function validatePassword(value: string, minLength?: number): ValidationCode | undefined;
+export declare function validateRequired(value: string): ValidationCode | undefined;
+export declare function validatePositiveNumber(value: string): ValidationCode | undefined;
+export declare function validateFileType(file: File, allowed?: Set<string>): ValidationCode | undefined;
+export declare function validateFileSize(file: File, maxMB: number): ValidationCode | undefined;
+export declare function validateFile(file: File, maxMB: number, allowed?: Set<string>): ValidationCode | undefined;
+export declare function validateVideoFileType(file: File, allowed?: Set<string>): ValidationCode | undefined;
+export declare function validateVideoFile(file: File, maxMB: number, allowed?: Set<string>): ValidationCode | undefined;
+export declare function validateYoutubeUrl(value: string): ValidationCode | undefined;

package/dist/Utils/validation.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultValidationMessages = exports.EMAIL_REGEX = void 0;
+exports.validateEmail = validateEmail;
+exports.validatePassword = validatePassword;
+exports.validateRequired = validateRequired;
+exports.validatePositiveNumber = validatePositiveNumber;
+exports.validateFileType = validateFileType;
+exports.validateFileSize = validateFileSize;
+exports.validateFile = validateFile;
+exports.validateVideoFileType = validateVideoFileType;
+exports.validateVideoFile = validateVideoFile;
+exports.validateYoutubeUrl = validateYoutubeUrl;
+exports.EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+exports.defaultValidationMessages = {
+    email_required: "Email is required",
+    email_invalid: "Enter a valid email address",
+    password_required: "Password is required",
+    password_min: "Password must be at least {min} characters",
+    required: "{label} is required",
+    positive_number: "{label} must be a positive number",
+    file_type: "Unsupported file type",
+    file_too_large: "File must be smaller than {max}MB",
+    video_type: "Unsupported video type",
+    youtube_required: "YouTube URL is required",
+    youtube_invalid: "Enter a valid YouTube URL",
+};
+function validateEmail(value) {
+    if (!value.trim())
+        return "email_required";
+    if (!exports.EMAIL_REGEX.test(value.trim()))
+        return "email_invalid";
+    return undefined;
+}
+function validatePassword(value, minLength = 6) {
+    if (!value)
+        return "password_required";
+    if (value.length < minLength)
+        return "password_min";
+    return undefined;
+}
+function validateRequired(value) {
+    if (!value.trim())
+        return "required";
+    return undefined;
+}
+function validatePositiveNumber(value) {
+    if (!value.trim())
+        return "required";
+    const n = Number(value);
+    if (Number.isNaN(n) || n <= 0)
+        return "positive_number";
+    return undefined;
+}
+const DEFAULT_FILE_TYPES = new Set(["application/pdf", "image/jpeg", "image/png", "image/jpg"]);
+function validateFileType(file, allowed = DEFAULT_FILE_TYPES) {
+    return allowed.has(file.type) ? undefined : "file_type";
+}
+function validateFileSize(file, maxMB) {
+    return file.size > maxMB * 1024 * 1024 ? "file_too_large" : undefined;
+}
+function validateFile(file, maxMB, allowed) {
+    var _a;
+    return (_a = validateFileType(file, allowed)) !== null && _a !== void 0 ? _a : validateFileSize(file, maxMB);
+}
+const DEFAULT_VIDEO_TYPES = new Set(["video/mp4", "video/quicktime"]);
+function validateVideoFileType(file, allowed = DEFAULT_VIDEO_TYPES) {
+    return allowed.has(file.type) ? undefined : "video_type";
+}
+function validateVideoFile(file, maxMB, allowed) {
+    var _a;
+    return (_a = validateVideoFileType(file, allowed)) !== null && _a !== void 0 ? _a : validateFileSize(file, maxMB);
+}
+const YOUTUBE_HOSTS = new Set(["youtube.com", "www.youtube.com", "m.youtube.com", "youtu.be"]);
+function validateYoutubeUrl(value) {
+    if (!value.trim())
+        return "youtube_required";
+    let url;
+    try {
+        url = new URL(value.trim());
+    }
+    catch {
+        return "youtube_invalid";
+    }
+    return YOUTUBE_HOSTS.has(url.hostname.toLowerCase()) ? undefined : "youtube_invalid";
+}

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,36 @@
+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 { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { accordionFocusRing, getAccordionHoverColors } from "./accordionColors.js";
+const HEADER_ACTION_RIGHT = "3.25rem";
+/** Chakra Accordion wrapper for header/content pairs; FilterSidebar composes this directly for its collapsible filter sections. */
+const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }) => {
+    const { colors } = useCustomTheme();
+    const isDark = isDarkCanvas(colors.backgroundColor.main);
+    const border = colors.boxborder[200];
+    const headingColor = colors.text[800];
+    const bodyColor = colors.text[600];
+    const { expandedBg, softHover } = useMemo(() => getAccordionHoverColors(colors, isDark), [colors, isDark]);
+    const focusRing = useMemo(() => accordionFocusRing(colors), [colors]);
+    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: "1px solid", borderColor: border, borderRadius: "xl", bg: colors.background[50], boxShadow: "none", mb: 3, overflow: "hidden", _last: { mb: 0 }, ...item.itemProps, sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle, children: ({ isExpanded }) => {
+                    var _a, _b, _c, _d, _e;
+                    return (_jsxs(_Fragment, { children: [_jsxs(Box, { as: "h2", position: item.headerAction ? "relative" : undefined, sx: item.headerAction
+                                    ? { "&:hover > button": { background: isExpanded ? expandedBg : softHover, ...(_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.hoverbuttonStyle } }
+                                    : undefined, children: [_jsxs(AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "sm", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: transitionFor(["background-color"]), _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: focusRing, ...item.buttonProps, sx: {
+                                            ...reducedMotionSx(),
+                                            ...(_b = item.customStyles) === null || _b === void 0 ? void 0 : _b.buttonStyle,
+                                            "&:hover": {
+                                                ...(_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.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: "lg", color: isExpanded ? colors.accentText : colors.textMuted, bg: isExpanded ? colors.primary.opacity[16] : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: transitionFor(["transform", "color", "background-color"], "base"), sx: reducedMotionSx(), children: _jsx(ChevronDown, { size: 16 }) })] }), item.headerAction && (_jsx(Flex, { position: "absolute", top: "50%", right: HEADER_ACTION_RIGHT, transform: "translateY(-50%)", align: "center", sx: (_d = item.customStyles) === null || _d === void 0 ? void 0 : _d.headerActionStyle, children: item.headerAction }))] }), _jsx(AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "sm", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_e = item.customStyles) === null || _e === void 0 ? void 0 : _e.panelStyle, children: item.content })] }));
+                } }, idx));
+        }) }));
+};
+export default Accordion;

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

@@ -0,0 +1,25 @@
+import { compositeOver } from "../../Theme/tokens/builders/color.js";
+import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { insetFocusRingShadow } from "../../Theme/chakra/focusRing.styles.js";
+// NOTE: light softHover measured 1.04-1.11 (invisible) unresolved — both modes now resolve against the rest surface.
+const MIN_HOVER_STEP = 1.15;
+export const getAccordionHoverColors = (colors, isDark) => {
+    if (isDark) {
+        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),
+    };
+};
+/** The Button's two-tone `focusRing`, drawn inset because the item clips overflow. */
+export const accordionFocusRing = (colors) => ({
+    outline: "2px solid transparent",
+    outlineOffset: "-2px",
+    boxShadow: insetFocusRingShadow(colors),
+});

package/dist/esm/Components/AddressCard/AddressCard.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
+import { RadioIndicator, selectableSurface, useSelectable } from "../CheckoutKit/selectable.js";
+import Button from "../Button/Button.js";
+import Tag from "../Tag/Tag.js";
+const DEFAULT_LABELS = { default: "Default", edit: "Edit", remove: "Remove" };
+/** Tonal delivery-address card: name, tags, lines and calm Edit/Remove actions; selection is a ring plus a check. */
+const AddressCard = ({ value, name, phone, lines, tag, isDefault = false, note, selected, onSelect, onEdit, onRemove, disabled = false, labels, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const uid = useId();
+    const nameId = `${uid}-name`;
+    const bodyId = `${uid}-body`;
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const { isSelected, interactive, inGroup, ringed, props } = useSelectable({ value, selected, disabled, onSelect });
+    const selectable = inGroup || !!onSelect;
+    return (_jsxs(Flex, { direction: "column", "data-testid": testId, "data-selected": isSelected || undefined, ...selectableSurface(colors, { selected: isSelected && selectable, disabled, interactive, ringed }), children: [_jsxs(Flex, { ...props, "data-radio": true, "aria-disabled": selectable && disabled ? true : undefined, "aria-labelledby": props.role ? nameId : undefined, "aria-describedby": props.role ? bodyId : undefined, gap: 3, p: 4, pb: onEdit || onRemove ? 2 : 4, borderRadius: "2xl", cursor: interactive ? "pointer" : "default", outline: "none", align: "flex-start", children: [selectable && (_jsx(Box, { mt: 0.5, children: _jsx(RadioIndicator, { selected: isSelected }) })), _jsxs(Flex, { direction: "column", gap: 1, flex: 1, minW: 0, children: [_jsxs(Flex, { align: "center", gap: 2, wrap: "wrap", children: [_jsx(Text, { as: "span", id: nameId, fontSize: "sm", fontWeight: 700, lineHeight: 1.4, color: colors.header[900], children: name }), tag && _jsx(Tag, { label: tag, size: "xs", tone: "neutral" }), isDefault && _jsx(Tag, { label: copy.default, size: "xs", tone: "neutral" })] }), _jsxs(Box, { id: bodyId, children: [lines.map((line) => (_jsx(Text, { as: "span", display: "block", fontSize: "sm", lineHeight: 1.5, color: colors.text[800], children: line }, line))), phone && (_jsx(Text, { as: "span", display: "block", mt: 1, fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, sx: NUMERIC_TEXT, children: phone })), note && (_jsx(Text, { as: "span", display: "block", mt: 1, fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: note }))] })] })] }), (onEdit || onRemove) && (_jsxs(Flex, { gap: 1, pl: selectable ? "2.75rem" : 1, pr: 2, pb: 2, children: [onEdit && (_jsx(Button, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onEdit, "aria-label": `${copy.edit} address: ${name}`, children: copy.edit })), onRemove && (_jsx(Button, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onRemove, "aria-label": `${copy.remove} address: ${name}`, children: copy.remove }))] }))] }));
+};
+export default AddressCard;

package/dist/esm/Components/AddressCard/AddressCardGroup.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SelectableGroup } from "../CheckoutKit/selectable.js";
+/** Radiogroup wrapper for `AddressCard`s. */
+const AddressCardGroup = (props) => _jsx(SelectableGroup, { ...props });
+export default AddressCardGroup;

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertDialog as ChakraAlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, } from "@chakra-ui/react";
+import Button from "../Button/Button.js";
+/** Renders a fixed Cancel/Confirm AlertDialog from title+content props — not a substitute for Modal when you need custom footer buttons or slots. */
+const AlertDialog = ({ isOpen, onClose, leastDestructiveRef, closeOnOverlayClick, closeOnEsc, content, title, confirmButtonText = "Confirm", cancelButtonText = "Cancel", isConfirmLoading, onConfirm, tone = "default", ContentStyle, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, }) => (_jsxs(ChakraAlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, children: [_jsx(AlertDialogOverlay, {}), _jsxs(AlertDialogContent, { 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: "gray", size: "sm", sx: button1Style, label: cancelButtonText }), _jsx(Button, { colorScheme: tone === "danger" ? "red" : "primary", onClick: onConfirm, isLoading: isConfirmLoading, size: "sm", sx: button2Style, label: confirmButtonText })] })] })] }));
+export default AlertDialog;

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

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense, useId, useMemo } from "react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
+import { baseAxisLabels, baseChart, baseGrid, baseLegend, baseTooltip } from "../chartBase.js";
+import LazyReactApexChart from "../LazyReactApexChart.js";
+import ApexChartFallback from "../ApexChartFallback.js";
+/** Filled line chart (basic/stacked/gradient/sparkline); unlike `ApexLineChart`, `data`/`series` are read fresh via `useMemo` every render, not frozen at mount. */
+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 chartId = `apex-area-${useId().replace(/:/g, "")}`;
+    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, {
+            id: chartId,
+            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,
+        chartId,
+        variant,
+        isSpark,
+        seriesColors,
+        labels,
+        title,
+        titlePosition,
+        showLegend,
+        legendPosition,
+        resolvedSeries.length,
+        yAxisFormatter,
+    ]);
+    return (_jsx("div", { children: _jsx(Suspense, { fallback: _jsx(ApexChartFallback, { height: height, width: width }), children: _jsx(LazyReactApexChart, { options: options, series: resolvedSeries, type: "area", height: height, width: width }) }) }));
+};
+export default ApexAreaChart;

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

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense, useId, useMemo } from "react";
+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";
+import LazyReactApexChart from "../LazyReactApexChart.js";
+import ApexChartFallback from "../ApexChartFallback.js";
+/** Bar chart wrapper around react-apexcharts (horizontal/stacked/distributed via props), themed via chartColorsFromTheme + chartBase. */
+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 chartId = `apex-bar-${useId().replace(/:/g, "")}`;
+    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, { id: chartId, 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,
+        chartId,
+        labels,
+        mergedXAxis,
+        mergedYAxis,
+        title,
+        titlePosition,
+        mergedTitleStyle,
+        resolvedBarColors,
+        horizontal,
+        distributed,
+        stacked,
+        showLegend,
+        legendPosition,
+        series,
+    ]);
+    const resolvedSeries = useMemo(() => series !== null && series !== void 0 ? series : [{ name: seriesName, data: data !== null && data !== void 0 ? data : [] }], [series, seriesName, data]);
+    return (_jsx("div", { children: _jsx(Suspense, { fallback: _jsx(ApexChartFallback, { height: height, width: width }), children: _jsx(LazyReactApexChart, { options: options, series: resolvedSeries, type: "bar", height: height, width: width }) }) }));
+}

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Skeletons from "../Skeletons/Skeletons.js";
+/** Suspense fallback while the lazy react-apexcharts chunk loads — reserves the chart's own footprint. */
+const ApexChartFallback = ({ height = "320px", width = "100%" }) => (_jsx(Skeletons, { type: "skeleton", height: height, width: width, borderRadius: "lg" }));
+export default ApexChartFallback;

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

@@ -0,0 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, useEffect, useId, useMemo, useRef, useState } from "react";
+import { useTheme } from "@chakra-ui/react";
+import ToolTip from "../../ToolTip/ToolTip.js";
+import { chartMode, getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
+import { baseAxisLabels, baseChart, baseGrid, baseTooltip } from "../chartBase.js";
+import LazyReactApexChart from "../LazyReactApexChart.js";
+import ApexChartFallback from "../ApexChartFallback.js";
+/** Line chart wrapper around react-apexcharts, themed via chartColorsFromTheme + chartBase. */
+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 chartId = `apex-line-${useId().replace(/:/g, "")}`;
+    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, {
+            id: chartId,
+            type: "line",
+            animations: variant === "realtime"
+                ? { enabled: true, speed: 1000, dynamicAnimation: { speed: 1000 } }
+                : baseChart(palette).animations,
+            zoom: { enabled: !isSmall },
+            toolbar: { show: showToolbar },
+        }),
+        theme: { mode: chartMode(palette) },
+        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,
+        chartId,
+        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: "xs", 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(Suspense, { fallback: _jsx(ApexChartFallback, { height: height, width: width }), children: _jsx(LazyReactApexChart, { options: options, series: apexSeries, type: "line", height: height, width: width }) })] }));
+};
+export default ApexLineChart;