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

package/dist/Components/Accordion/accordionColors.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.accordionFocusRing = exports.getAccordionHoverColors = void 0;
+const color_1 = require("../../Theme/tokens/builders/color");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+// NOTE: light softHover measured 1.04-1.11 (invisible) unresolved — both modes now resolve against the rest surface.
+const MIN_HOVER_STEP = 1.15;
+const getAccordionHoverColors = (colors, isDark) => {
+    if (isDark) {
+        return {
+            expandedBg: colors.gray[200],
+            softHover: colors.gray[200],
+        };
+    }
+    const rest = colors.background[50];
+    const expandedTint = (0, color_1.compositeOver)(colors.primary.opacity[8], rest);
+    return {
+        expandedBg: (0, outlineRung_1.liftToContrast)(expandedTint, rest, MIN_HOVER_STEP),
+        softHover: (0, outlineRung_1.liftToContrast)(colors.table.hover[100], rest, MIN_HOVER_STEP),
+    };
+};
+exports.getAccordionHoverColors = getAccordionHoverColors;
+/** The Button's two-tone `focusRing`, drawn inset because the item clips overflow. */
+const accordionFocusRing = (colors) => ({
+    outline: "2px solid transparent",
+    outlineOffset: "-2px",
+    boxShadow: (0, focusRing_styles_1.insetFocusRingShadow)(colors),
+});
+exports.accordionFocusRing = accordionFocusRing;

package/dist/Components/AddressCard/AddressCard.d.ts

@@ -0,0 +1,4 @@
+import type { AddressCardProps } from "./AddressCardProps";
+/** Tonal delivery-address card: name, tags, lines and calm Edit/Remove actions; selection is a ring plus a check. */
+declare const AddressCard: ({ value, name, phone, lines, tag, isDefault, note, selected, onSelect, onEdit, onRemove, disabled, labels, "data-testid": testId, }: AddressCardProps) => import("react/jsx-runtime").JSX.Element;
+export default AddressCard;

package/dist/Components/AddressCard/AddressCard.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
+const selectable_1 = require("../CheckoutKit/selectable");
+const Button_1 = __importDefault(require("../Button/Button"));
+const Tag_1 = __importDefault(require("../Tag/Tag"));
+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 } = (0, useCustomTheme_1.useCustomTheme)();
+    const uid = (0, react_1.useId)();
+    const nameId = `${uid}-name`;
+    const bodyId = `${uid}-body`;
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const { isSelected, interactive, inGroup, ringed, props } = (0, selectable_1.useSelectable)({ value, selected, disabled, onSelect });
+    const selectable = inGroup || !!onSelect;
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", "data-testid": testId, "data-selected": isSelected || undefined, ...(0, selectable_1.selectableSurface)(colors, { selected: isSelected && selectable, disabled, interactive, ringed }), children: [(0, jsx_runtime_1.jsxs)(react_2.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 && ((0, jsx_runtime_1.jsx)(react_2.Box, { mt: 0.5, children: (0, jsx_runtime_1.jsx)(selectable_1.RadioIndicator, { selected: isSelected }) })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 1, flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", id: nameId, fontSize: "sm", fontWeight: 700, lineHeight: 1.4, color: colors.header[900], children: name }), tag && (0, jsx_runtime_1.jsx)(Tag_1.default, { label: tag, size: "xs", tone: "neutral" }), isDefault && (0, jsx_runtime_1.jsx)(Tag_1.default, { label: copy.default, size: "xs", tone: "neutral" })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { id: bodyId, children: [lines.map((line) => ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "sm", lineHeight: 1.5, color: colors.text[800], children: line }, line))), phone && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", mt: 1, fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, sx: typography_1.NUMERIC_TEXT, children: phone })), note && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", mt: 1, fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: note }))] })] })] }), (onEdit || onRemove) && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 1, pl: selectable ? "2.75rem" : 1, pr: 2, pb: 2, children: [onEdit && ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onEdit, "aria-label": `${copy.edit} address: ${name}`, children: copy.edit })), onRemove && ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onRemove, "aria-label": `${copy.remove} address: ${name}`, children: copy.remove }))] }))] }));
+};
+exports.default = AddressCard;

package/dist/Components/AddressCard/AddressCardGroup.d.ts

@@ -0,0 +1,4 @@
+import type { AddressCardGroupProps } from "./AddressCardProps";
+/** Radiogroup wrapper for `AddressCard`s. */
+declare const AddressCardGroup: (props: AddressCardGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default AddressCardGroup;

package/dist/Components/AddressCard/AddressCardGroup.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const selectable_1 = require("../CheckoutKit/selectable");
+/** Radiogroup wrapper for `AddressCard`s. */
+const AddressCardGroup = (props) => (0, jsx_runtime_1.jsx)(selectable_1.SelectableGroup, { ...props });
+exports.default = AddressCardGroup;

package/dist/Components/AddressCard/AddressCardProps.d.ts

@@ -0,0 +1,58 @@
+import type { ReactNode } from "react";
+/** Visible copy; override every string for another language. */
+export interface AddressCardLabels {
+    /** Text of the tag shown when `isDefault` is set. */
+    default: string;
+    /** Edit button text; also the verb in its accessible name. */
+    edit: string;
+    /** Remove button text; also the verb in its accessible name. */
+    remove: string;
+}
+/** A saved delivery address. Inside an `AddressCardGroup` it is a radio keyed by `value`; alone, `onSelect` makes it a toggle button. */
+export interface AddressCardProps {
+    /** Identifies the card inside an `AddressCardGroup`; required there. */
+    value?: string;
+    /** Recipient name, shown bold; also the card's accessible name when selectable. */
+    name: string;
+    /** Recipient phone, shown in tabular figures under the address lines. */
+    phone?: string;
+    /** Address lines in order, e.g. ["12 Palm Grove, Indiranagar", "Bengaluru, Karnataka 560038"]. */
+    lines: string[];
+    /** Short place tag such as "Home" or "Work". */
+    tag?: string;
+    /** Adds a "Default" tag. */
+    isDefault?: boolean;
+    /** Muted line under the address, e.g. "Delivers by Thu, 9 Oct". */
+    note?: ReactNode;
+    /** Standalone selection state; ignored inside a group, where the group's value decides. */
+    selected?: boolean;
+    /** Called when the card is chosen; also fires inside a group, after the group updates. */
+    onSelect?: () => void;
+    /** Shows an Edit button when set; called on click. */
+    onEdit?: () => void;
+    /** Shows a Remove button when set; called on click. */
+    onRemove?: () => void;
+    /** Dims the card, drops it from the tab order and ignores selection; Edit and Remove still work. */
+    disabled?: boolean;
+    /** Overrides the default English strings; unset keys keep their default. */
+    labels?: Partial<AddressCardLabels>;
+    /** Test id on the card's outer element. */
+    "data-testid"?: string;
+}
+/** Radiogroup of `AddressCard`s with a roving tab stop; arrow keys move focus and selection together. */
+export interface AddressCardGroupProps {
+    /** Selected card's `value`; controls the group when set. */
+    value?: string;
+    /** Initially selected `value` when the group is uncontrolled. */
+    defaultValue?: string;
+    /** Called with the new `value` when selection changes by click or arrow key. */
+    onValueChange?: (value: string) => void;
+    /** Direct `AddressCard` children; wrapping them in another component hides their `value` from the roving tab stop. */
+    children: ReactNode;
+    /** Accessible name of the radiogroup; give this or `aria-labelledby`. */
+    "aria-label"?: string;
+    /** Id of the element that names the radiogroup. */
+    "aria-labelledby"?: string;
+    /** Test id on the radiogroup element. */
+    "data-testid"?: string;
+}

package/dist/Components/AlertDialog/AlertDialog.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
 import { AlertDialogsProps } from "./AlertDialogProps";
-declare const AlertDialog: ({ isOpen, onClose, leastDestructiveRef, content, title, confirmButtonText, cancelButtonText, isConfirmLoading, onConfirm, ContentStyle, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, confirmButtonColor, key, }: AlertDialogsProps) => React.JSX.Element;
+/** Renders a fixed Cancel/Confirm AlertDialog from title+content props — not a substitute for Modal when you need custom footer buttons or slots. */
+declare const AlertDialog: ({ isOpen, onClose, leastDestructiveRef, closeOnOverlayClick, closeOnEsc, content, title, confirmButtonText, cancelButtonText, isConfirmLoading, onConfirm, tone, ContentStyle, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, }: AlertDialogsProps) => import("react/jsx-runtime").JSX.Element;
 export default AlertDialog;

package/dist/Components/AlertDialog/AlertDialog.js

@@ -3,18 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("@chakra-ui/react");
-var react_2 = __importDefault(require("react"));
-var AlertDialog = function (_a) {
-    var isOpen = _a.isOpen, onClose = _a.onClose, leastDestructiveRef = _a.leastDestructiveRef, content = _a.content, title = _a.title, _b = _a.confirmButtonText, confirmButtonText = _b === void 0 ? "Yes" : _b, _c = _a.cancelButtonText, cancelButtonText = _c === void 0 ? "No" : _c, isConfirmLoading = _a.isConfirmLoading, onConfirm = _a.onConfirm, ContentStyle = _a.ContentStyle, headerStyle = _a.headerStyle, bodyStyle = _a.bodyStyle, footerStyle = _a.footerStyle, closeButtonStyle = _a.closeButtonStyle, button1Style = _a.button1Style, button2Style = _a.button2Style, isCentered = _a.isCentered, _d = _a.confirmButtonColor, confirmButtonColor = _d === void 0 ? "red" : _d, key = _a.key;
-    return (react_2.default.createElement(react_1.AlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, key: key },
-        react_2.default.createElement(react_1.AlertDialogOverlay, null),
-        react_2.default.createElement(react_1.AlertDialogContent, { sx: ContentStyle },
-            react_2.default.createElement(react_1.AlertDialogHeader, { sx: headerStyle }, title),
-            react_2.default.createElement(react_1.AlertDialogCloseButton, { sx: closeButtonStyle }),
-            react_2.default.createElement(react_1.AlertDialogBody, { sx: bodyStyle }, content),
-            react_2.default.createElement(react_1.AlertDialogFooter, { sx: footerStyle },
-                react_2.default.createElement(react_1.Button, { ref: null, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm", sx: button1Style }, cancelButtonText),
-                react_2.default.createElement(react_1.Button, { colorScheme: "primary", onClick: onConfirm, isLoading: isConfirmLoading, ml: 3, size: "sm", sx: button2Style }, confirmButtonText)))));
-};
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const Button_1 = __importDefault(require("../Button/Button"));
+/** 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, }) => ((0, jsx_runtime_1.jsxs)(react_1.AlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, children: [(0, jsx_runtime_1.jsx)(react_1.AlertDialogOverlay, {}), (0, jsx_runtime_1.jsxs)(react_1.AlertDialogContent, { sx: ContentStyle, children: [(0, jsx_runtime_1.jsx)(react_1.AlertDialogHeader, { sx: headerStyle, children: title }), (0, jsx_runtime_1.jsx)(react_1.AlertDialogCloseButton, { sx: closeButtonStyle }), (0, jsx_runtime_1.jsx)(react_1.AlertDialogBody, { sx: bodyStyle, children: content }), (0, jsx_runtime_1.jsxs)(react_1.AlertDialogFooter, { sx: footerStyle, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { ref: leastDestructiveRef, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm", sx: button1Style, label: cancelButtonText }), (0, jsx_runtime_1.jsx)(Button_1.default, { colorScheme: tone === "danger" ? "red" : "primary", onClick: onConfirm, isLoading: isConfirmLoading, size: "sm", sx: button2Style, label: confirmButtonText })] })] })] }));
 exports.default = AlertDialog;

package/dist/Components/AlertDialog/AlertDialogProps.d.ts

@@ -1,20 +1,44 @@
 import { AlertDialogProps, AlertProps } from "@chakra-ui/react";
 import { ReactElement } from "react";
-export type AlertDialogsProps = Pick<AlertDialogProps, "isOpen" | "onClose" | "leastDestructiveRef"> & Pick<AlertProps, "addRole" | "colorScheme" | "size" | "status" | "variant"> & {
+/** Props accepted for backward compatibility but never read by AlertDialog. */
+export type AlertDialogDeadProps = {
+    /** @deprecated Never read — the dialog already has role="alertdialog". */
+    addRole?: AlertProps["addRole"];
+    /** @deprecated Never read — use `tone`. */
+    colorScheme?: AlertProps["colorScheme"];
+    /** @deprecated Never read — the dialog always uses Chakra's default size. */
+    size?: AlertProps["size"];
+    /** @deprecated Never read — use `tone`. */
+    status?: AlertProps["status"];
+    /** @deprecated Never read — use `tone`. */
+    variant?: AlertProps["variant"];
+    /** @deprecated Never read — React strips `key` before props arrive. */
+    key?: string | number;
+};
+/** Fixed Cancel/Confirm dialog; `tone="danger"` fills Confirm red, otherwise it is primary. */
+export type AlertDialogsProps = Pick<AlertDialogProps, "isOpen" | "onClose" | "leastDestructiveRef" | "closeOnOverlayClick" | "closeOnEsc"> & AlertDialogDeadProps & {
     title: string;
+    /** Rendered inside the dialog body. */
     content: ReactElement;
     isCentered?: boolean;
+    /** Defaults to "Confirm". */
     confirmButtonText?: string;
+    /** Defaults to "Cancel"; Cancel calls `onClose` and holds `leastDestructiveRef`. */
     cancelButtonText?: string;
+    /** Shows a spinner on the Confirm button. */
     isConfirmLoading?: boolean;
+    /** Fires on Confirm click; does not close the dialog — call `onClose` yourself. */
     onConfirm: () => void;
+    /** Defaults to "default" (primary Confirm); "danger" makes Confirm red. */
+    tone?: "default" | "danger";
+    /** `sx` for the dialog content box. */
     ContentStyle?: React.CSSProperties;
     headerStyle?: React.CSSProperties;
     bodyStyle?: React.CSSProperties;
     footerStyle?: React.CSSProperties;
     closeButtonStyle?: React.CSSProperties;
+    /** Raw style escape hatch for the Cancel button. */
     button1Style?: React.CSSProperties;
+    /** Raw style escape hatch for Confirm; prefer `tone` for a danger action. */
     button2Style?: React.CSSProperties;
-    key?: string | number;
-    confirmButtonColor?: string;
 };

package/dist/Components/Apexcharts/ApexAreaChart/ApexAreaChart.d.ts

@@ -0,0 +1,4 @@
+import { ApexAreaChartProps } from "./ApexAreaChartProps";
+/** Filled line chart (basic/stacked/gradient/sparkline); unlike `ApexLineChart`, `data`/`series` are read fresh via `useMemo` every render, not frozen at mount. */
+declare const ApexAreaChart: ({ variant, data, series, labels, title, titlePosition, height, width, colors, showLegend, legendPosition, yAxisFormatter, }: ApexAreaChartProps) => import("react/jsx-runtime").JSX.Element;
+export default ApexAreaChart;

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

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const chartColorsFromTheme_1 = require("../../../Theme/tokens/builders/chartColorsFromTheme");
+const chartBase_1 = require("../chartBase");
+const LazyReactApexChart_1 = __importDefault(require("../LazyReactApexChart"));
+const ApexChartFallback_1 = __importDefault(require("../ApexChartFallback"));
+/** 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 } = (0, useCustomTheme_1.useCustomTheme)();
+    const chartId = `apex-area-${(0, react_1.useId)().replace(/:/g, "")}`;
+    const seriesColors = (0, react_1.useMemo)(() => colors !== null && colors !== void 0 ? colors : (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette), [colors, palette]);
+    const resolvedSeries = (0, react_1.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 = (0, react_1.useMemo)(() => ({
+        chart: (0, chartBase_1.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 } : (0, chartBase_1.baseGrid)(palette),
+        xaxis: {
+            categories: labels,
+            labels: { show: !isSpark, style: (0, chartBase_1.baseAxisLabels)(palette) },
+            axisBorder: { show: false },
+            axisTicks: { show: false },
+            tooltip: { enabled: false },
+        },
+        yaxis: {
+            show: !isSpark,
+            labels: { style: (0, chartBase_1.baseAxisLabels)(palette), formatter: yAxisFormatter },
+        },
+        title: {
+            text: isSpark ? undefined : title,
+            align: titlePosition,
+            style: (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette),
+        },
+        legend: {
+            ...(0, chartBase_1.baseLegend)(palette, legendPosition),
+            show: showLegend && !isSpark && resolvedSeries.length > 1,
+        },
+        tooltip: (0, chartBase_1.baseTooltip)(palette),
+    }), [
+        palette,
+        chartId,
+        variant,
+        isSpark,
+        seriesColors,
+        labels,
+        title,
+        titlePosition,
+        showLegend,
+        legendPosition,
+        resolvedSeries.length,
+        yAxisFormatter,
+    ]);
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(ApexChartFallback_1.default, { height: height, width: width }), children: (0, jsx_runtime_1.jsx)(LazyReactApexChart_1.default, { options: options, series: resolvedSeries, type: "area", height: height, width: width }) }) }));
+};
+exports.default = ApexAreaChart;

package/dist/Components/Apexcharts/ApexAreaChart/ApexAreaChartProps.d.ts

@@ -0,0 +1,34 @@
+/** "sparkline" strips axes, legend and title for a compact inline trend; the others only change fill/stacking. */
+export type AreaChartVariant = "basic" | "stacked" | "gradient" | "sparkline";
+/** One named line in a multi-series area chart; `name` becomes its legend label. */
+export type ApexAreaSeries = {
+    name: string;
+    data: number[];
+};
+/** Props for the area chart; unlike ApexLineChart, `data`/`series` are re-read every render, not frozen at mount. */
+export type ApexAreaChartProps = {
+    /** Defaults to "basic"; "sparkline" also hides the title, axes and legend. */
+    variant?: AreaChartVariant;
+    /** Ignored entirely once `series` is also passed — `series` always wins, no merge. */
+    data?: number[];
+    /** Multiple named lines; wins over `data`. The legend appears only when there is more than one series. */
+    series?: ApexAreaSeries[];
+    /** X-axis category labels, one per data point; hidden in the "sparkline" variant. */
+    labels?: string[];
+    /** Heading above the chart and the name of the series built from `data` (default "Series 1"); not drawn in "sparkline". */
+    title?: string;
+    /** Horizontal alignment of the title. Defaults to "left". */
+    titlePosition?: "left" | "center" | "right";
+    /** Chart height as a px number or CSS string. Defaults to 320; also sizes the loading skeleton. */
+    height?: number | string;
+    /** Chart width as a px number or CSS string. Defaults to "100%"; also sizes the loading skeleton. */
+    width?: number | string;
+    /** Series colours in order. Defaults to the theme's categorical series palette. */
+    colors?: string[];
+    /** Defaults to true, but the legend only shows with more than one series and never in "sparkline". */
+    showLegend?: boolean;
+    /** Legend placement. Defaults to "bottom". */
+    legendPosition?: "top" | "right" | "bottom" | "left";
+    /** Formats y-axis tick labels from the numeric value; no effect in "sparkline", where the axis is hidden. */
+    yAxisFormatter?: (value: number) => string;
+};

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChart.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
 import { ApexBarChartProps } from "./ApexBarChartProps";
-export default function ApexBarChart({ data, labels, title, titlePosition, height, width, barColor, xAxisStyle, yAxisStyle, titleStyle, }: ApexBarChartProps): React.JSX.Element;
+/** Bar chart wrapper around react-apexcharts (horizontal/stacked/distributed via props), themed via chartColorsFromTheme + chartBase. */
+export default function ApexBarChart({ data, labels, title, titlePosition, height, width, barColor, xAxisStyle, yAxisStyle, titleStyle, horizontal, distributed, seriesName, series, stacked, showLegend, legendPosition, }: ApexBarChartProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,103 +1,58 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = ApexBarChart;
-var react_1 = __importStar(require("react"));
-var react_apexcharts_1 = __importDefault(require("react-apexcharts"));
-var react_2 = require("@chakra-ui/react");
-var chartColorsFromTheme_1 = require("../../../Theme/chartColorsFromTheme");
-function ApexBarChart(_a) {
-    var data = _a.data, labels = _a.labels, title = _a.title, titlePosition = _a.titlePosition, _b = _a.height, height = _b === void 0 ? 400 : _b, _c = _a.width, width = _c === void 0 ? 500 : _c, barColor = _a.barColor, xAxisStyle = _a.xAxisStyle, yAxisStyle = _a.yAxisStyle, titleStyle = _a.titleStyle;
-    var theme = (0, react_2.useTheme)();
-    var palette = theme.colors;
-    var resolvedBarColors = barColor !== null && barColor !== void 0 ? barColor : [(0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette)[0]];
-    var axisColor = (0, chartColorsFromTheme_1.chartAxisLabelColor)(palette);
-    var mergedXAxis = (0, react_1.useMemo)(function () { var _a; return (__assign(__assign({}, xAxisStyle), { color: (_a = xAxisStyle === null || xAxisStyle === void 0 ? void 0 : xAxisStyle.color) !== null && _a !== void 0 ? _a : axisColor })); }, [axisColor, xAxisStyle]);
-    var mergedYAxis = (0, react_1.useMemo)(function () { var _a; return (__assign(__assign({}, yAxisStyle), { color: (_a = yAxisStyle === null || yAxisStyle === void 0 ? void 0 : yAxisStyle.color) !== null && _a !== void 0 ? _a : axisColor })); }, [axisColor, yAxisStyle]);
-    var mergedTitleStyle = (0, react_1.useMemo)(function () { return (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle); }, [palette, titleStyle]);
-    var dataLabelColor = palette.primary[500];
-    var options = (0, react_1.useMemo)(function () { return ({
-        chart: {
-            type: "bar",
-            height: 350,
-        },
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const chartColorsFromTheme_1 = require("../../../Theme/tokens/builders/chartColorsFromTheme");
+const chartBase_1 = require("../chartBase");
+const LazyReactApexChart_1 = __importDefault(require("../LazyReactApexChart"));
+const ApexChartFallback_1 = __importDefault(require("../ApexChartFallback"));
+/** Bar chart wrapper around react-apexcharts (horizontal/stacked/distributed via props), themed via chartColorsFromTheme + chartBase. */
+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 = (0, react_2.useTheme)();
+    const palette = theme.colors;
+    const chartId = `apex-bar-${(0, react_1.useId)().replace(/:/g, "")}`;
+    const seriesColors = (0, react_1.useMemo)(() => (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette), [palette]);
+    const resolvedBarColors = (0, react_1.useMemo)(() => barColor !== null && barColor !== void 0 ? barColor : (distributed ? seriesColors : [seriesColors[1]]), [barColor, distributed, seriesColors]);
+    const axisColor = (0, chartColorsFromTheme_1.chartAxisLabelColor)(palette);
+    const mergedXAxis = (0, react_1.useMemo)(() => { var _a; return ({ ...(0, chartBase_1.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 = (0, react_1.useMemo)(() => { var _a; return ({ ...(0, chartBase_1.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 = (0, react_1.useMemo)(() => (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle), [palette, titleStyle]);
+    const options = (0, react_1.useMemo)(() => ({
+        chart: (0, chartBase_1.baseChart)(palette, { id: chartId, type: "bar", stacked }),
         plotOptions: {
             bar: {
                 borderRadius: 4,
-                horizontal: false,
-            },
-        },
-        dataLabels: {
-            enabled: false,
-            style: {
-                fontSize: "12px",
-                colors: [dataLabelColor],
+                borderRadiusApplication: "end",
+                columnWidth: "55%",
+                barHeight: "60%",
+                horizontal,
+                distributed,
             },
         },
+        dataLabels: { enabled: false },
+        grid: (0, chartBase_1.baseGrid)(palette, horizontal),
         xaxis: {
             categories: labels,
-            labels: {
-                style: mergedXAxis,
-            },
-        },
-        yaxis: {
-            labels: {
-                style: mergedYAxis,
-            },
+            labels: { style: mergedXAxis },
+            axisBorder: { show: false },
+            axisTicks: { show: false },
         },
-        title: {
-            text: title,
-            align: titlePosition,
-            style: mergedTitleStyle,
+        yaxis: { labels: { style: mergedYAxis } },
+        title: { text: title, align: titlePosition, style: mergedTitleStyle },
+        legend: {
+            ...(0, chartBase_1.baseLegend)(palette, legendPosition),
+            show: showLegend !== null && showLegend !== void 0 ? showLegend : (series ? series.length > 1 : false),
         },
+        tooltip: (0, chartBase_1.baseTooltip)(palette),
         colors: resolvedBarColors,
-    }); }, [
+    }), [
+        palette,
+        chartId,
         labels,
         mergedXAxis,
         mergedYAxis,
@@ -105,14 +60,13 @@ function ApexBarChart(_a) {
         titlePosition,
         mergedTitleStyle,
         resolvedBarColors,
-        dataLabelColor,
+        horizontal,
+        distributed,
+        stacked,
+        showLegend,
+        legendPosition,
+        series,
     ]);
-    var series = [
-        {
-            name: "Data",
-            data: data,
-        },
-    ];
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(react_apexcharts_1.default, { options: options, series: series, type: "bar", height: height, width: width })));
+    const resolvedSeries = (0, react_1.useMemo)(() => series !== null && series !== void 0 ? series : [{ name: seriesName, data: data !== null && data !== void 0 ? data : [] }], [series, seriesName, data]);
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(ApexChartFallback_1.default, { height: height, width: width }), children: (0, jsx_runtime_1.jsx)(LazyReactApexChart_1.default, { options: options, series: resolvedSeries, type: "bar", height: height, width: width }) }) }));
 }

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChartProps.d.ts

@@ -1,19 +1,51 @@
+/** Renders grouped/stacked/distributed bars from `series`, or one series from `data`+`seriesName`; not a substitute for ApexLineChart on trend-over-time data. */
 export type ApexBarChartProps = {
-    data: number[];
+    /** Ignored whenever `series` is also passed — series wins outright and data is silently dropped, not merged. */
+    data?: number[];
+    /** Category labels, one per bar or bar group; they run along the vertical axis when `horizontal` is true. */
     labels: string[];
+    /** Heading above the chart, aligned by `titlePosition`. */
     title?: string;
+    /** No default here (renders ApexCharts' native left-align) — pie, line and polar charts default it to "center", area and radial to "left". */
     titlePosition?: "left" | "center" | "right";
-    height?: number;
-    width?: number;
+    /** Chart height as a px number or CSS string. Defaults to 400; also sizes the loading skeleton. */
+    height?: number | string;
+    /** Chart width as a px number or CSS string. Defaults to 500; also sizes the loading skeleton. */
+    width?: number | string;
+    /** Array paints per-bar only when `distributed` is true; otherwise only barColor[0] applies and the rest are silently unused. */
     barColor?: string[];
+    /** Font and colour of x-axis labels; colour falls back to the theme's axis ink. */
     xAxisStyle?: StyleProps;
+    /** Font and colour of y-axis labels; colour falls back to the theme's axis ink. */
     yAxisStyle?: StyleProps;
+    /** Font and colour of the title; unset fields default to 14px, weight 600 and the theme's text ink. */
     titleStyle?: StyleProps;
+    /** Draws bars left to right instead of upward. Defaults to false. */
+    horizontal?: boolean;
+    /** Gives each bar its own colour from `barColor` or the theme palette. Defaults to false (one colour). */
+    distributed?: boolean;
+    /** Name of the single series built from `data`. Defaults to "Data"; ignored when `series` is passed. */
+    seriesName?: string;
+    /** Multi-series bars — {name, data}[], not data's flat number[]; passing this alongside `data` makes data a no-op. */
+    series?: {
+        name: string;
+        data: number[];
+    }[];
+    /** Stacks `series` on top of each other instead of grouping them side by side. Defaults to false. */
+    stacked?: boolean;
+    /** Unset default isn't fixed — shows only when `series` has more than one entry; the single-`data` path stays legend-less. */
+    showLegend?: boolean;
+    /** Legend placement. Defaults to "bottom". */
+    legendPosition?: "top" | "right" | "bottom" | "left";
 };
 type StyleProps = {
+    /** CSS font size, e.g. "12px". Axis labels default to 12px, the title to 14px. */
     fontSize?: string;
+    /** CSS font family. Defaults to inherit, i.e. the page font. */
     fontFamily?: string;
+    /** CSS font weight. The title defaults to 600. */
     fontWeight?: string | number;
+    /** Text colour. Defaults to the theme's axis ink on axes and its text ink on the title. */
     color?: string;
 };
 export {};

package/dist/Components/Apexcharts/ApexChartFallback.d.ts

@@ -0,0 +1,7 @@
+type ApexChartFallbackProps = {
+    height?: string | number;
+    width?: string | number;
+};
+/** Suspense fallback while the lazy react-apexcharts chunk loads — reserves the chart's own footprint. */
+declare const ApexChartFallback: ({ height, width }: ApexChartFallbackProps) => import("react/jsx-runtime").JSX.Element;
+export default ApexChartFallback;

package/dist/Components/Apexcharts/ApexChartFallback.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
+/** Suspense fallback while the lazy react-apexcharts chunk loads — reserves the chart's own footprint. */
+const ApexChartFallback = ({ height = "320px", width = "100%" }) => ((0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: height, width: width, borderRadius: "lg" }));
+exports.default = ApexChartFallback;

package/dist/Components/Apexcharts/ApexLineChart/ApexLineChart.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
 import { ApexLineChartProps } from "./ApexLineChartProps";
-declare const ApexLineChart: ({ data, labels, title, height, width, lineColors, titlePosition, titleStyle, compact, toolbarBreakpointPct, titleClampLines, showTitleEllipsis, showSeries, series: seriesNames, variant, }: ApexLineChartProps) => React.JSX.Element;
+/** Line chart wrapper around react-apexcharts, themed via chartColorsFromTheme + chartBase. */
+declare const ApexLineChart: ({ data, labels, title, height, width, lineColors, titlePosition, titleStyle, compact, toolbarBreakpointPct, titleClampLines, showTitleEllipsis, showSeries, series: seriesNames, variant, }: ApexLineChartProps) => import("react/jsx-runtime").JSX.Element;
 export default ApexLineChart;