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

package/dist/Theme/Dark/palette.js

@@ -0,0 +1,372 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var darkPalette = {
+    primary: {
+        50: "#2d1f4a",
+        100: "#3d2a63",
+        200: "#4e357c",
+        300: "#6244a0",
+        400: "#7a56c5",
+        500: "#9A4FE5",
+        600: "#a967e8",
+        700: "#bb83ed",
+        800: "#cca3f2",
+        900: "#dfc3f7",
+        opacity: {
+            4: "#9A4FE50a",
+            8: "#9A4FE514",
+            16: "#9A4FE529",
+            24: "#9A4FE53d",
+            32: "#9A4FE552",
+            40: "#9A4FE566",
+            48: "#9A4FE57a",
+        },
+    },
+    secondary: {
+        50: "#1e2235",
+        100: "#252b42",
+        200: "#2d3554",
+        300: "#3a4269",
+        400: "#47507e",
+        500: "#5a6496",
+        600: "#6f79a8",
+        700: "#8e97be",
+        800: "#adb4d3",
+        900: "#ccd0e7",
+        opacity: {
+            4: "#5a64960a",
+            8: "#5a649614",
+            16: "#5a649629",
+            24: "#5a64963d",
+            32: "#5a649652",
+            40: "#5a649666",
+            48: "#5a64967a",
+        },
+    },
+    tertiary: {
+        50: "#1a1d2e",
+        100: "#21253a",
+        200: "#292e48",
+        300: "#333857",
+        400: "#3d4366",
+        500: "#4a5175",
+        600: "#5f668b",
+        700: "#7d83a4",
+        800: "#9ca1bc",
+        900: "#bbbfd4",
+        opacity: {
+            4: "#4a51750a",
+            8: "#4a517514",
+            16: "#4a517529",
+            24: "#4a51753d",
+            32: "#4a517552",
+            40: "#4a517566",
+            48: "#4a51757a",
+        },
+    },
+    transparent: "transparent",
+    black: "#000",
+    white: "#fff",
+    semantic: {
+        success: {
+            50: "#0d2e1f",
+            100: "#133d28",
+            200: "#1a5236",
+            300: "#216644",
+            400: "#297b53",
+            500: "#23b85c",
+            600: "#3dc770",
+            700: "#5fd388",
+            800: "#88e0a7",
+            900: "#b3edc6",
+        },
+        error: {
+            50: "#2e1210",
+            100: "#3d1917",
+            200: "#52201e",
+            300: "#662825",
+            400: "#7b302c",
+            500: "#f2463a",
+            600: "#f45f54",
+            700: "#f6796f",
+            800: "#f9998f",
+            900: "#fbbbb6",
+        },
+        warning: {
+            50: "#2e1f0d",
+            100: "#3d2a12",
+            200: "#523817",
+            300: "#66461d",
+            400: "#7b5523",
+            500: "#Ff9162",
+            600: "#ffa07a",
+            700: "#ffb395",
+            800: "#ffc7ae",
+            900: "#ffdacb",
+        },
+        info: {
+            50: "#0d2430",
+            100: "#123040",
+            200: "#184055",
+            300: "#1e5069",
+            400: "#24607e",
+            500: "#5FC4de",
+            600: "#76cde3",
+            700: "#90d8ea",
+            800: "#aee3f1",
+            900: "#caecf7",
+        },
+    },
+    gray: {
+        50: "#f7fafc",
+        100: "#edf2f7",
+        200: "#e2e8f0",
+        300: "#cbd5e0",
+        400: "#a0aec0",
+        500: "#718096",
+        600: "#4a5568",
+        700: "#2d3748",
+        800: "#1a202c",
+        900: "#171923",
+    },
+    red: {
+        50: "#2e1210",
+        100: "#3d1917",
+        200: "#52201e",
+        300: "#662825",
+        400: "#7b302c",
+        500: "#f2463a",
+        600: "#f45f54",
+        700: "#f6796f",
+        800: "#f9998f",
+        900: "#fbbbb6",
+    },
+    orange: {
+        50: "#2e1f0d",
+        100: "#3d2a12",
+        200: "#523817",
+        300: "#66461d",
+        400: "#7b5523",
+        500: "#Ff9162",
+        600: "#ffa07a",
+        700: "#ffb395",
+        800: "#ffc7ae",
+        900: "#ffdacb",
+    },
+    yellow: {
+        50: "#2b2509",
+        100: "#3a310d",
+        200: "#4d4211",
+        300: "#615315",
+        400: "#756419",
+        500: "#f7d343",
+        600: "#f9db62",
+        700: "#fbe281",
+        800: "#fdeaa5",
+        900: "#fef2c8",
+    },
+    green: {
+        50: "#0d2e1f",
+        100: "#133d28",
+        200: "#1a5236",
+        300: "#216644",
+        400: "#297b53",
+        500: "#23b85c",
+        600: "#3dc770",
+        700: "#5fd388",
+        800: "#88e0a7",
+        900: "#b3edc6",
+    },
+    teal: {
+        50: "#0d2430",
+        100: "#123040",
+        200: "#184055",
+        300: "#1e5069",
+        400: "#24607e",
+        500: "#5FC4de",
+        600: "#76cde3",
+        700: "#90d8ea",
+        800: "#aee3f1",
+        900: "#caecf7",
+    },
+    blue: {
+        50: "#0d2033",
+        100: "#122b44",
+        200: "#173959",
+        300: "#1c476e",
+        400: "#215583",
+        500: "#3182ce",
+        600: "#4a95d9",
+        700: "#6aaae2",
+        800: "#8dbfeb",
+        900: "#b4d5f3",
+    },
+    cyan: {
+        50: "#0d2a2e",
+        100: "#12383d",
+        200: "#174b51",
+        300: "#1c5e65",
+        400: "#21717a",
+        500: "#00b5d8",
+        600: "#1fc4e5",
+        700: "#44cfec",
+        800: "#72dcf2",
+        900: "#a3e9f7",
+    },
+    purple: {
+        50: "#1e1533",
+        100: "#281d44",
+        200: "#34265a",
+        300: "#422f70",
+        400: "#513987",
+        500: "#805ad5",
+        600: "#9f7aea",
+        700: "#b794f4",
+        800: "#d6bcfa",
+        900: "#e9d8fd",
+    },
+    pink: {
+        50: "#2e1020",
+        100: "#3d152b",
+        200: "#521c3a",
+        300: "#662249",
+        400: "#7b2958",
+        500: "#d53f8c",
+        600: "#dd5a9e",
+        700: "#e577b2",
+        800: "#ed98c8",
+        900: "#f5badc",
+    },
+    background: {
+        50: "#1a1d2e",
+        100: "#1e2235",
+        200: "#22273c",
+        300: "#262c43",
+        400: "#2a314a",
+        500: "#2e3652",
+        600: "#434d6b",
+        700: "#616e8e",
+        800: "#8490ae",
+        900: "#a8b1ca",
+    },
+    backgroundColor: {
+        main: "#111827",
+        secondary: "#1a202c",
+        tertiary: "#1e2535",
+        quaternary: "#252e3d",
+        light: "#161b27",
+        medium: "#1c2333",
+        accent: "#212840",
+        subtle: "#131926",
+        muted: "#202840",
+        neutral: "#1a2133",
+        base: "#111827",
+        tableHeader: "#161d2e",
+    },
+    text: {
+        50: "#1a1d2b",
+        100: "#2d3149",
+        200: "#434867",
+        300: "#5c6180",
+        400: "#777c9a",
+        500: "#9499b4",
+        600: "#adb1c8",
+        700: "#c6c9da",
+        800: "#dfe1eb",
+        900: "#f0f1f7",
+    },
+    header: {
+        50: "#1c2130",
+        100: "#252c3f",
+        200: "#2f384e",
+        300: "#39445e",
+        400: "#44506e",
+        500: "#c8cfe0",
+        600: "#d4dae8",
+        700: "#e0e5f0",
+        800: "#eceff7",
+        900: "#f5f7fb",
+    },
+    placeholder: {
+        50: "#1e2235",
+        100: "#272c42",
+        200: "#31374f",
+        300: "#3b425c",
+        400: "#464d6a",
+        500: "#6b7191",
+        600: "#8388a5",
+        700: "#9da2ba",
+        800: "#b7bbcf",
+        900: "#d1d4e4",
+    },
+    boxShadow: {
+        primary: "#9A52E247",
+        error: "#F2463A47",
+        default: "#00000066",
+    },
+    sidebar: {
+        background: {
+            50: "#0d1117",
+            100: "#111827",
+            200: "#0d1526",
+            300: "#1a2540",
+            400: "#1f2d4d",
+            500: "#0a0f1e",
+            600: "#090d1b",
+            700: "#070b17",
+            800: "#060913",
+            900: "#04070f",
+        },
+    },
+    boxborder: {
+        50: "#1e2235",
+        100: "#252b42",
+        200: "#2c3250",
+        300: "#33395e",
+        400: "#3a406c",
+        500: "#41477a",
+        600: "#565c91",
+        700: "#7479a8",
+        800: "#9499bf",
+        900: "#b5b9d6",
+    },
+    border: {
+        50: "#1a1e2e",
+        100: "#1f2438",
+        200: "#252a42",
+        300: "#2b314c",
+        400: "#313756",
+        500: "#373d60",
+        600: "#4d5479",
+        700: "#6b7296",
+        800: "#8d93b3",
+        900: "#b0b4d0",
+    },
+    table: {
+        hover: {
+            50: "#171c2c",
+            100: "#1b2033",
+            200: "#1f243a",
+            300: "#232841",
+            400: "#272c48",
+            500: "#2b304f",
+            600: "#3a3f63",
+            700: "#545879",
+            800: "#72768f",
+            900: "#9295a6",
+        },
+    },
+    disabled: {
+        50: "#1a1e2e",
+        100: "#1f2438",
+        200: "#252a42",
+        300: "#2b314c",
+        400: "#313756",
+        500: "#373d60",
+        600: "#4d5479",
+        700: "#6b7296",
+        800: "#8d93b3",
+        900: "#b0b4d0",
+    },
+};
+exports.default = darkPalette;

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";