pixelize-design-library 2.2.198 → 2.3.1-beta.1

package/dist/Utils/table.js

@@ -43,32 +43,116 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableCellCalculation = exports.pageSizeCalculation = exports.searchAndSortData = exports.calculateLeftOffset = void 0;
+exports.compareValues = compareValues;
 exports.SortMultiColumnData = SortMultiColumnData;
+exports.buildTablePalette = buildTablePalette;
+exports.pickTableColor = pickTableColor;
+exports.groupRows = groupRows;
 exports.normalizeTableCellValue = normalizeTableCellValue;
 exports.debounce = debounce;
 exports.useDebounce = useDebounce;
 exports.globalSearchFilter = globalSearchFilter;
 var react_1 = __importStar(require("react"));
+/**
+ * Type-aware, null-safe comparison. Detects numbers and dates; otherwise falls
+ * back to a numeric-aware locale string compare. Empty/null values sort last.
+ */
+function compareValues(aRaw, bRaw, direction) {
+    if (direction === "none")
+        return 0;
+    var dir = direction === "asc" ? 1 : -1;
+    var a = getStringValue(aRaw);
+    var b = getStringValue(bRaw);
+    var aEmpty = a === "";
+    var bEmpty = b === "";
+    if (aEmpty && bEmpty)
+        return 0;
+    if (aEmpty)
+        return 1; // nulls/empties always last
+    if (bEmpty)
+        return -1;
+    var an = Number(a);
+    var bn = Number(b);
+    if (!Number.isNaN(an) && !Number.isNaN(bn))
+        return (an - bn) * dir;
+    var ad = Date.parse(a);
+    var 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;
+}
 function SortMultiColumnData(data, sortConfig) {
-    if (!sortConfig.length)
+    var active = sortConfig.filter(function (s) { return s.direction !== "none"; });
+    if (!active.length)
         return data;
     return __spreadArray([], data, true).sort(function (a, b) {
-        for (var _i = 0, sortConfig_1 = sortConfig; _i < sortConfig_1.length; _i++) {
-            var _a = sortConfig_1[_i], column = _a.column, direction = _a.direction;
-            if (direction === "none") {
-                continue;
-            }
-            var dirMultiplier = direction === "asc" ? 1 : -1;
-            // Compare values for the current column
-            if (a[column] < b[column])
-                return -1 * dirMultiplier;
-            if (a[column] > b[column])
-                return 1 * dirMultiplier;
-            // If values are equal, continue to the next sorting rule
+        for (var _i = 0, active_1 = active; _i < active_1.length; _i++) {
+            var _a = active_1[_i], column = _a.column, direction = _a.direction;
+            var r = compareValues(a[column], b[column], direction);
+            if (r !== 0)
+                return r;
         }
-        return 0; // Return 0 if all sort conditions are equal
+        return 0;
     });
 }
+var withAlpha = function (hex, aa) {
+    return /^#([0-9a-fA-F]{6})$/.test(hex) ? "".concat(hex).concat(aa) : hex;
+};
+/** 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;
+    var c = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) !== null && _a !== void 0 ? _a : {};
+    var 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],
+    ];
+    var list = bases.filter(Boolean);
+    var fallback = ["#8B3FC8"];
+    return (list.length ? list : fallback).map(function (solid) { return ({
+        solid: solid,
+        soft: withAlpha(solid, "22"),
+        text: solid,
+    }); });
+}
+var hashKey = function (value) {
+    var s = String(value);
+    var h = 0;
+    for (var i = 0; i < s.length; i++)
+        h = (h * 31 + s.charCodeAt(i)) >>> 0;
+    return h;
+};
+/** Pick a deterministic palette color for a value, with optional override hex. */
+function pickTableColor(value, palette, override) {
+    if (override)
+        return { solid: override, soft: withAlpha(override, "22"), text: override };
+    if (!palette.length)
+        return { solid: "#8B3FC8", soft: "#8B3FC822", text: "#8B3FC8" };
+    return palette[hashKey(value) % palette.length];
+}
+/** Partition rows by a column key, preserving first-seen group order. */
+function groupRows(data, groupBy) {
+    var order = [];
+    var map = new Map();
+    for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
+        var row = data_1[_i];
+        var raw = row[groupBy];
+        var key = raw === undefined || raw === null || raw === "" ? "—" : raw;
+        if (!map.has(key)) {
+            map.set(key, []);
+            order.push(key);
+        }
+        map.get(key).push(row);
+    }
+    return order.map(function (value) { return ({ value: value, label: String(value), rows: map.get(value) }); });
+}
 var calculateLeftOffset = function (columns, index) {
     return columns.slice(0, index).reduce(function (sum, width) { return sum + width; }, 0);
 };

package/dist/bootstrap.d.ts

@@ -0,0 +1 @@
+import './index.css';

package/dist/bootstrap.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var client_1 = __importDefault(require("react-dom/client"));
+var App_1 = __importDefault(require("./App"));
+var withTheme_1 = __importDefault(require("./withTheme"));
+require("./index.css");
+var root = client_1.default.createRoot(document.getElementById("root"));
+var ThemeApp = (0, withTheme_1.default)(App_1.default);
+root.render(react_1.default.createElement(react_1.default.StrictMode, null,
+    react_1.default.createElement(ThemeApp, null)));

package/dist/components-v2/AlertDialog/AlertDialog.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+export declare const AlertDialog: React.FC<AlertDialogPrimitive.AlertDialogProps>;
+export declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const AlertDialogPortal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
+export declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare function AlertDialogHeader({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export declare namespace AlertDialogHeader {
+    var displayName: string;
+}
+export declare function AlertDialogFooter({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export declare namespace AlertDialogFooter {
+    var displayName: string;
+}
+export declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export interface AlertDialogActionProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> {
+    /** Defaults to "default" — pass "destructive" for delete-style confirmations. */
+    variant?: "default" | "destructive";
+}
+export declare const AlertDialogAction: React.ForwardRefExoticComponent<AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components-v2/AlertDialog/AlertDialog.js

@@ -0,0 +1,98 @@
+"use strict";
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertDialogCancel = exports.AlertDialogAction = exports.AlertDialogDescription = exports.AlertDialogTitle = exports.AlertDialogContent = exports.AlertDialogOverlay = exports.AlertDialogPortal = exports.AlertDialogTrigger = exports.AlertDialog = void 0;
+exports.AlertDialogHeader = AlertDialogHeader;
+exports.AlertDialogFooter = AlertDialogFooter;
+const React = __importStar(require("react"));
+const AlertDialogPrimitive = __importStar(require("@radix-ui/react-alert-dialog"));
+const utils_1 = require("../../lib/utils");
+const button_1 = require("../ui/button");
+exports.AlertDialog = AlertDialogPrimitive.Root;
+exports.AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+exports.AlertDialogPortal = AlertDialogPrimitive.Portal;
+exports.AlertDialogOverlay = React.forwardRef((_a, ref) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React.createElement(AlertDialogPrimitive.Overlay, Object.assign({ ref: ref, className: (0, utils_1.cn)("fixed inset-0 z-50 bg-foreground/40 backdrop-blur-sm", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className) }, rest)));
+});
+exports.AlertDialogOverlay.displayName = "AlertDialogOverlay";
+exports.AlertDialogContent = React.forwardRef((_a, ref) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React.createElement(exports.AlertDialogPortal, null,
+        React.createElement(exports.AlertDialogOverlay, null),
+        React.createElement(AlertDialogPrimitive.Content, Object.assign({ ref: ref, className: (0, utils_1.cn)("fixed left-1/2 top-1/2 z-50 grid w-full max-w-md -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border border-border bg-card p-6 text-card-foreground shadow-lg", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", className) }, rest))));
+});
+exports.AlertDialogContent.displayName = "AlertDialogContent";
+function AlertDialogHeader(_a) {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React.createElement("div", Object.assign({ className: (0, utils_1.cn)("flex flex-col gap-1.5 text-left", className) }, rest)));
+}
+AlertDialogHeader.displayName = "AlertDialogHeader";
+function AlertDialogFooter(_a) {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React.createElement("div", Object.assign({ className: (0, utils_1.cn)("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className) }, rest)));
+}
+AlertDialogFooter.displayName = "AlertDialogFooter";
+exports.AlertDialogTitle = React.forwardRef((_a, ref) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React.createElement(AlertDialogPrimitive.Title, Object.assign({ ref: ref, className: (0, utils_1.cn)("text-lg font-semibold leading-none tracking-tight text-foreground", className) }, rest)));
+});
+exports.AlertDialogTitle.displayName = "AlertDialogTitle";
+exports.AlertDialogDescription = React.forwardRef((_a, ref) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React.createElement(AlertDialogPrimitive.Description, Object.assign({ ref: ref, className: (0, utils_1.cn)("text-sm text-muted-foreground", className) }, rest)));
+});
+exports.AlertDialogDescription.displayName = "AlertDialogDescription";
+exports.AlertDialogAction = React.forwardRef((_a, ref) => {
+    var { className, variant = "default" } = _a, rest = __rest(_a, ["className", "variant"]);
+    return (React.createElement(AlertDialogPrimitive.Action, Object.assign({ ref: ref, className: (0, utils_1.cn)((0, button_1.buttonVariants)({ variant }), className) }, rest)));
+});
+exports.AlertDialogAction.displayName = "AlertDialogAction";
+exports.AlertDialogCancel = React.forwardRef((_a, ref) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React.createElement(AlertDialogPrimitive.Cancel, Object.assign({ ref: ref, className: (0, utils_1.cn)((0, button_1.buttonVariants)({ variant: "outline" }), "mt-0", className) }, rest)));
+});
+exports.AlertDialogCancel.displayName = "AlertDialogCancel";

package/dist/components-v2/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export interface BreadcrumbItem {
+    label: React.ReactNode;
+    href?: string;
+    onClick?: () => void;
+}
+export interface BreadcrumbsProps {
+    items: BreadcrumbItem[];
+    separator?: React.ReactNode;
+    /** Collapse middle items with an ellipsis above this count. */
+    maxItems?: number;
+    className?: string;
+}
+export declare function Breadcrumbs({ items, separator, maxItems, className, }: BreadcrumbsProps): React.ReactElement;

package/dist/components-v2/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,66 @@
+"use strict";
+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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Breadcrumbs = Breadcrumbs;
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils");
+function Breadcrumbs({ items, separator, maxItems, className, }) {
+    const [expanded, setExpanded] = React.useState(false);
+    const shouldCollapse = typeof maxItems === "number" && !expanded && items.length > maxItems;
+    const rendered = shouldCollapse
+        ? [items[0], "ellipsis", ...items.slice(-Math.max(maxItems - 2, 1))]
+        : items;
+    const sep = separator !== null && separator !== void 0 ? separator : (React.createElement(lucide_react_1.ChevronRight, { "aria-hidden": "true", className: "h-3.5 w-3.5 text-muted-foreground" }));
+    return (React.createElement("nav", { "aria-label": "Breadcrumb", className: (0, utils_1.cn)("min-w-0 flex-1", className) },
+        React.createElement("ol", { className: "flex min-w-0 flex-wrap items-center gap-1 text-sm" }, rendered.map((entry, index) => {
+            const isLast = index === rendered.length - 1;
+            if (entry === "ellipsis") {
+                return (React.createElement(React.Fragment, { key: "ellipsis" },
+                    React.createElement("li", null,
+                        React.createElement("button", { type: "button", "aria-label": "Show hidden breadcrumb items", onClick: () => setExpanded(true), className: "inline-flex items-center rounded-sm px-1 text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" },
+                            React.createElement(lucide_react_1.MoreHorizontal, { "aria-hidden": "true", className: "h-4 w-4" }))),
+                    React.createElement("li", { "aria-hidden": "true", className: "flex items-center" }, sep)));
+            }
+            return (React.createElement(React.Fragment, { key: `${index}-${String(entry.label)}` },
+                React.createElement("li", { className: "flex min-w-0 items-center" }, isLast ? (React.createElement("span", { "aria-current": "page", className: "truncate font-medium text-foreground" }, entry.label)) : entry.href || entry.onClick ? (React.createElement("a", { href: entry.href, onClick: (event) => {
+                        if (entry.onClick) {
+                            event.preventDefault();
+                            entry.onClick();
+                        }
+                    }, className: "truncate rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" }, entry.label)) : (React.createElement("span", { className: "truncate text-muted-foreground" }, entry.label))),
+                !isLast && (React.createElement("li", { "aria-hidden": "true", className: "flex items-center" }, sep))));
+        }))));
+}

package/dist/components-v2/Charts/AreaChart.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import type { ApexOptions } from "apexcharts";
+export interface AreaPoint {
+    x: string | number | Date;
+    y: number;
+}
+export interface AreaSeries {
+    name: string;
+    data: AreaPoint[] | number[];
+}
+export interface AreaChartProps {
+    series: AreaSeries[];
+    categories?: (string | number)[];
+    height?: number | string;
+    stacked?: boolean;
+    showLegend?: boolean;
+    options?: ApexOptions;
+    className?: string;
+}
+export declare function AreaChart({ series, categories, height, stacked, showLegend, options, className, }: AreaChartProps): React.ReactElement;
+export declare namespace AreaChart {
+    var displayName: string;
+}

package/dist/components-v2/Charts/AreaChart.js

@@ -0,0 +1,63 @@
+"use strict";
+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.AreaChart = AreaChart;
+const React = __importStar(require("react"));
+const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
+const utils_1 = require("../../lib/utils");
+const chartOptions_1 = require("./chartOptions");
+const useChartTheme_1 = require("./useChartTheme");
+function AreaChart({ series, categories, height = 320, stacked = false, showLegend = true, options, className, }) {
+    const theme = (0, useChartTheme_1.useChartTheme)();
+    const merged = React.useMemo(() => {
+        const base = (0, chartOptions_1.baseApexOptions)(theme);
+        return Object.assign(Object.assign(Object.assign({}, base), { chart: Object.assign(Object.assign({}, base.chart), { type: "area", stacked }), fill: {
+                type: "gradient",
+                gradient: {
+                    shadeIntensity: 1,
+                    opacityFrom: 0.4,
+                    opacityTo: 0.05,
+                    stops: [0, 100],
+                },
+            }, stroke: { curve: "smooth", width: 2 }, xaxis: categories
+                ? Object.assign(Object.assign({}, base.xaxis), { categories }) : base.xaxis, legend: Object.assign(Object.assign({}, base.legend), { show: showLegend }) }), options);
+    }, [theme, categories, stacked, showLegend, options]);
+    return (React.createElement("div", { className: (0, utils_1.cn)("w-full", className) },
+        React.createElement(react_apexcharts_1.default, { key: `${theme.mode}-${theme.primary}`, options: merged, series: series, type: "area", height: height })));
+}
+AreaChart.displayName = "AreaChart";

package/dist/components-v2/Charts/BarChart.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import type { ApexOptions } from "apexcharts";
+export interface BarSeriesPoint {
+    x: string | number;
+    y: number;
+}
+export interface BarSeries {
+    name: string;
+    data: BarSeriesPoint[] | number[];
+}
+export interface BarChartProps {
+    series: BarSeries[];
+    categories?: (string | number)[];
+    height?: number | string;
+    horizontal?: boolean;
+    stacked?: boolean;
+    showLegend?: boolean;
+    /** Extra Apex options merged on top of the themed base. */
+    options?: ApexOptions;
+    className?: string;
+}
+export declare function BarChart({ series, categories, height, horizontal, stacked, showLegend, options, className, }: BarChartProps): React.ReactElement;
+export declare namespace BarChart {
+    var displayName: string;
+}

package/dist/components-v2/Charts/BarChart.js

@@ -0,0 +1,57 @@
+"use strict";
+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.BarChart = BarChart;
+const React = __importStar(require("react"));
+const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
+const utils_1 = require("../../lib/utils");
+const chartOptions_1 = require("./chartOptions");
+const useChartTheme_1 = require("./useChartTheme");
+function BarChart({ series, categories, height = 320, horizontal = false, stacked = false, showLegend = true, options, className, }) {
+    const theme = (0, useChartTheme_1.useChartTheme)();
+    const merged = React.useMemo(() => {
+        const base = (0, chartOptions_1.baseApexOptions)(theme);
+        return Object.assign(Object.assign(Object.assign({}, base), { chart: Object.assign(Object.assign({}, base.chart), { type: "bar", stacked }), plotOptions: {
+                bar: { horizontal, borderRadius: 4, columnWidth: "55%" },
+            }, xaxis: categories
+                ? Object.assign(Object.assign({}, base.xaxis), { categories }) : base.xaxis, legend: Object.assign(Object.assign({}, base.legend), { show: showLegend }) }), options);
+    }, [theme, categories, horizontal, stacked, showLegend, options]);
+    return (React.createElement("div", { className: (0, utils_1.cn)("w-full", className) },
+        React.createElement(react_apexcharts_1.default, { key: `${theme.mode}-${theme.primary}`, options: merged, series: series, type: "bar", height: height })));
+}
+BarChart.displayName = "BarChart";

package/dist/components-v2/Charts/LineChart.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import type { ApexOptions } from "apexcharts";
+export interface LinePoint {
+    x: string | number | Date;
+    y: number;
+}
+export interface LineSeries {
+    name: string;
+    data: LinePoint[] | number[];
+}
+export interface LineChartProps {
+    series: LineSeries[];
+    categories?: (string | number)[];
+    height?: number | string;
+    curve?: "smooth" | "straight" | "stepline";
+    showLegend?: boolean;
+    options?: ApexOptions;
+    className?: string;
+}
+export declare function LineChart({ series, categories, height, curve, showLegend, options, className, }: LineChartProps): React.ReactElement;
+export declare namespace LineChart {
+    var displayName: string;
+}

package/dist/components-v2/Charts/LineChart.js

@@ -0,0 +1,55 @@
+"use strict";
+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.LineChart = LineChart;
+const React = __importStar(require("react"));
+const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
+const utils_1 = require("../../lib/utils");
+const chartOptions_1 = require("./chartOptions");
+const useChartTheme_1 = require("./useChartTheme");
+function LineChart({ series, categories, height = 320, curve = "smooth", showLegend = true, options, className, }) {
+    const theme = (0, useChartTheme_1.useChartTheme)();
+    const merged = React.useMemo(() => {
+        const base = (0, chartOptions_1.baseApexOptions)(theme);
+        return Object.assign(Object.assign(Object.assign({}, base), { chart: Object.assign(Object.assign({}, base.chart), { type: "line" }), stroke: { curve, width: 2 }, markers: { size: 4 }, xaxis: categories
+                ? Object.assign(Object.assign({}, base.xaxis), { categories }) : base.xaxis, legend: Object.assign(Object.assign({}, base.legend), { show: showLegend }) }), options);
+    }, [theme, categories, curve, showLegend, options]);
+    return (React.createElement("div", { className: (0, utils_1.cn)("w-full", className) },
+        React.createElement(react_apexcharts_1.default, { key: `${theme.mode}-${theme.primary}`, options: merged, series: series, type: "line", height: height })));
+}
+LineChart.displayName = "LineChart";

package/dist/components-v2/Charts/PieChart.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import type { ApexOptions } from "apexcharts";
+export interface PieChartProps {
+    series: number[];
+    labels: string[];
+    height?: number | string;
+    variant?: "pie" | "donut";
+    showLegend?: boolean;
+    options?: ApexOptions;
+    className?: string;
+}
+export declare function PieChart({ series, labels, height, variant, showLegend, options, className, }: PieChartProps): React.ReactElement;
+export declare namespace PieChart {
+    var displayName: string;
+}