pixelize-design-library 2.4.1-beta.9 → 2.4.2-beta.0

package/README.md

@@ -287,21 +287,85 @@ function CustomButton({ customProp, ...props }: CustomButtonProps) {
 }
 ```
 
+## Bundle size and tree-shaking
+
+The package ships both CommonJS (`main`) and ES modules (`module`). Bundlers pick the ESM
+build and tree-shake it, so **you only pay for what you import**:
+
+```tsx
+import { Button } from 'pixelize-design-library';
+```
+
+That import produces roughly **113 KB** — it contains no chart, editor, drag-and-drop,
+virtual-list or date code, even though the package depends on all of them.
+
+To keep it that way:
+
+- **Import from the package root.** The root barrel is tree-shakeable; there is no size
+  penalty for it, and it is the only path covered by semver.
+- **Do not import from `dist/` for values.** Deep imports still work (and are used for types),
+  but they bypass the ESM build and pull in the CommonJS copy.
+- **Do not disable `sideEffects` handling** in your bundler config.
+
+### Heavy components load on demand
+
+`Editor` wraps Jodit, which is by far the largest dependency. It is loaded lazily, when the
+component first renders, rather than when the package is imported. An app that uses `Editor`
+ships about **96 KB** up front and fetches the ~1.5 MB editor chunk on demand. No extra setup
+is required — `Editor` renders its own `Suspense` boundary.
+
+### Fonts
+
+The theme self-hosts Inter Variable. The stylesheet is split by `unicode-range`, so a
+Latin-script page downloads a single **47 KB** font file; Cyrillic, Greek and Vietnamese
+subsets are only fetched if the page actually renders those scripts.
+
+### Server-side rendering
+
+Components are browser-targeted and the theme imports a CSS file, so the package must be
+transpiled by your bundler rather than imported by bare Node. In Next.js:
+
+```js
+// next.config.js
+module.exports = { transpilePackages: ['pixelize-design-library'] };
+```
+
+## Demo app
+
+`npm start` runs a local component explorer on `http://localhost:5173` — every exported
+component on its own page, with live variants, an interactive playground for editing props,
+and a generated props reference.
+
+```bash
+npm install
+npm start
+```
+
+The demo lives in `src/Pages/` and is excluded from the published package. See
+[GOTCHAS.md](GOTCHAS.md) for the traps involved in keeping it that way.
+
 ## Contributing
 
-We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
+Read [CLAUDE.md](CLAUDE.md) for the repo layout, component pattern and the checklist for
+adding a component, and [GOTCHAS.md](GOTCHAS.md) before touching the theme provider, the
+build config or `package.json`.
 
-## License
+```bash
+npm install
+npm start        # demo app on :5173
+npm test         # Jest — not vitest
+npm run lint
+npm run typecheck
+```
 
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+Every component needs a demo page in `src/Pages/` and Jest tests next to the component.
 
-## Support
+## License
 
-For support and questions:
-- 📧 Email: support@pixelize.com
-- 📖 Documentation: [docs.pixelize.com](https://docs.pixelize.com)
-- 🐛 Issues: [GitHub Issues](https://github.com/pixelize/design-library/issues)
+Not yet declared. The `license` field in `package.json` is unset and there is no `LICENSE`
+file in the repo — both need the owning entity's decision before the package is published
+outside the organisation.
 
-## Changelog
+## Support
 
-See [CHANGELOG.md](CHANGELOG.md) for a list of changes and updates.
+- Issues: [github.com/pixelize-tech/Micro-Components/issues](https://github.com/pixelize-tech/Micro-Components/issues)

package/dist/Assets/defaultLogo.d.ts

@@ -1,3 +1,2 @@
 declare const DefaultLogo: () => import("react/jsx-runtime").JSX.Element;
 export default DefaultLogo;
-//# sourceMappingURL=defaultLogo.d.ts.map

package/dist/Components/Accordion/Accordion.d.ts

@@ -1,4 +1,3 @@
 import { AccordionProps } from "./AccordionProps";
 declare const Accordion: ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
 export default Accordion;
-//# sourceMappingURL=Accordion.d.ts.map

package/dist/Components/Accordion/Accordion.js

@@ -11,14 +11,14 @@ const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion,
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const c = (_a = theme.colors) !== null && _a !== void 0 ? _a : {};
-    const isDark = (0, accentText_1.isDarkCanvas)((_c = (_b = c.backgroundColor) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : "#ffffff");
+    const isDark = (0, accentText_1.isDarkCanvas)((_c = (_b = c.backgroundColor) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : accentText_1.DEFAULT_CANVAS);
     const border = (_e = (_d = c.boxborder) === null || _d === void 0 ? void 0 : _d[300]) !== null && _e !== void 0 ? _e : (_f = c.gray) === null || _f === void 0 ? void 0 : _f[200];
     const headingColor = (_h = (_g = c.text) === null || _g === void 0 ? void 0 : _g[800]) !== null && _h !== void 0 ? _h : (_j = c.gray) === null || _j === void 0 ? void 0 : _j[800];
     const bodyColor = (_l = (_k = c.text) === null || _k === void 0 ? void 0 : _k[600]) !== null && _l !== void 0 ? _l : (_m = c.gray) === null || _m === void 0 ? void 0 : _m[600];
     const { expandedBg, softHover } = (0, react_1.useMemo)(() => { var _a; return (0, accordionColors_1.getAccordionHoverColors)((_a = theme.colors) !== null && _a !== void 0 ? _a : {}, isDark); }, [theme.colors, isDark]);
     return ((0, jsx_runtime_1.jsx)(react_2.Accordion, { allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion, ...rest, children: items.map((item, idx) => {
-            var _a, _b, _c, _d, _e, _f;
-            return ((0, jsx_runtime_1.jsx)(react_2.AccordionItem, { border: `0.063rem solid ${border}`, borderRadius: "0.625rem", bg: (_b = (_a = c.background) === null || _a === void 0 ? void 0 : _a[50]) !== null && _b !== void 0 ? _b : "#fff", mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: (_d = (_c = c.boxborder) === null || _c === void 0 ? void 0 : _c[400]) !== null && _d !== void 0 ? _d : (_e = c.gray) === null || _e === void 0 ? void 0 : _e[300] }, ...item.itemProps, sx: (_f = item.customStyles) === null || _f === void 0 ? void 0 : _f.itemStyle, children: ({ isExpanded }) => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            return ((0, jsx_runtime_1.jsx)(react_2.AccordionItem, { border: `0.063rem solid ${border}`, borderRadius: "xl", bg: (_b = (_a = c.background) === null || _a === void 0 ? void 0 : _a[50]) !== null && _b !== void 0 ? _b : (_c = c.backgroundColor) === null || _c === void 0 ? void 0 : _c.light, mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: (_e = (_d = c.boxborder) === null || _d === void 0 ? void 0 : _d[400]) !== null && _e !== void 0 ? _e : (_f = c.gray) === null || _f === void 0 ? void 0 : _f[300] }, ...item.itemProps, sx: (_g = item.customStyles) === null || _g === void 0 ? void 0 : _g.itemStyle, children: ({ isExpanded }) => {
                     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
                     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { children: (0, jsx_runtime_1.jsxs)(react_2.AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "0.875rem", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: "background 0.15s ease", _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: {
                                         boxShadow: "none",
@@ -29,7 +29,7 @@ const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion,
                                         "&:hover": {
                                             ...(_e = item.customStyles) === null || _e === void 0 ? void 0 : _e.hoverbuttonStyle,
                                         },
-                                    }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "0.375rem", color: isExpanded ? ((_g = (_f = c.primary) === null || _f === void 0 ? void 0 : _f[600]) !== null && _g !== void 0 ? _g : headingColor) : (_h = c.gray) === null || _h === void 0 ? void 0 : _h[500], bg: isExpanded ? ((_l = (_k = (_j = c.primary) === null || _j === void 0 ? void 0 : _j.opacity) === null || _k === void 0 ? void 0 : _k[16]) !== null && _l !== void 0 ? _l : "transparent") : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s ease, color 0.2s ease, background 0.2s ease", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "0.875rem", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_m = item.customStyles) === null || _m === void 0 ? void 0 : _m.panelStyle, children: item.content })] }));
+                                    }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "md", color: isExpanded ? ((_g = (_f = c.primary) === null || _f === void 0 ? void 0 : _f[600]) !== null && _g !== void 0 ? _g : headingColor) : (_h = c.gray) === null || _h === void 0 ? void 0 : _h[500], bg: isExpanded ? ((_l = (_k = (_j = c.primary) === null || _j === void 0 ? void 0 : _j.opacity) === null || _k === void 0 ? void 0 : _k[16]) !== null && _l !== void 0 ? _l : "transparent") : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s ease, color 0.2s ease, background 0.2s ease", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "0.875rem", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_m = item.customStyles) === null || _m === void 0 ? void 0 : _m.panelStyle, children: item.content })] }));
                 } }, idx));
         }) }));
 };

package/dist/Components/Accordion/AccordionProps.d.ts

@@ -14,4 +14,3 @@ export type AccordionProps = ChakraAccordionProps & {
         };
     }[];
 };
-//# sourceMappingURL=AccordionProps.d.ts.map

package/dist/Components/Accordion/accordionColors.d.ts

@@ -3,4 +3,3 @@ export declare const getAccordionHoverColors: (colors: PaletteProps, isDark: boo
     expandedBg: string;
     softHover: string;
 };
-//# sourceMappingURL=accordionColors.d.ts.map

package/dist/Components/Accordion/accordionColors.js

@@ -12,7 +12,7 @@ const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
  */
 const MIN_HOVER_STEP = 1.15;
 const getAccordionHoverColors = (colors, isDark) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
     if (isDark) {
         // primary.opacity[8] composited over the dark canvas collapses to ~1.07:1 (near-black on
         // near-black) — gray[200] is an opaque rung that stays visibly above canvas (~1.6:1) without
@@ -22,13 +22,13 @@ const getAccordionHoverColors = (colors, isDark) => {
             softHover: (_j = (_g = (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[200]) !== null && _g !== void 0 ? _g : (_h = colors.gray) === null || _h === void 0 ? void 0 : _h[300]) !== null && _j !== void 0 ? _j : (_k = colors.gray) === null || _k === void 0 ? void 0 : _k[50],
         };
     }
-    const rest = (_m = (_l = colors.background) === null || _l === void 0 ? void 0 : _l[50]) !== null && _m !== void 0 ? _m : "#ffffff";
-    const expandedTint = ((_p = (_o = colors.primary) === null || _o === void 0 ? void 0 : _o.opacity) === null || _p === void 0 ? void 0 : _p[8])
+    const rest = (_m = (_l = colors.background) === null || _l === void 0 ? void 0 : _l[50]) !== null && _m !== void 0 ? _m : (_o = colors.backgroundColor) === null || _o === void 0 ? void 0 : _o.light;
+    const expandedTint = ((_q = (_p = colors.primary) === null || _p === void 0 ? void 0 : _p.opacity) === null || _q === void 0 ? void 0 : _q[8])
         ? (0, color_1.compositeOver)(colors.primary.opacity[8], rest)
-        : ((_r = (_q = colors.gray) === null || _q === void 0 ? void 0 : _q[50]) !== null && _r !== void 0 ? _r : rest);
+        : ((_s = (_r = colors.gray) === null || _r === void 0 ? void 0 : _r[50]) !== null && _s !== void 0 ? _s : rest);
     return {
         expandedBg: (0, outlineRung_1.liftToContrast)(expandedTint, rest, "light", MIN_HOVER_STEP),
-        softHover: (0, outlineRung_1.liftToContrast)((_u = (_t = (_s = colors.table) === null || _s === void 0 ? void 0 : _s.hover) === null || _t === void 0 ? void 0 : _t[100]) !== null && _u !== void 0 ? _u : (_v = colors.gray) === null || _v === void 0 ? void 0 : _v[50], rest, "light", MIN_HOVER_STEP),
+        softHover: (0, outlineRung_1.liftToContrast)((_v = (_u = (_t = colors.table) === null || _t === void 0 ? void 0 : _t.hover) === null || _u === void 0 ? void 0 : _u[100]) !== null && _v !== void 0 ? _v : (_w = colors.gray) === null || _w === void 0 ? void 0 : _w[50], rest, "light", MIN_HOVER_STEP),
     };
 };
 exports.getAccordionHoverColors = getAccordionHoverColors;

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

@@ -1,4 +1,3 @@
 import { AlertDialogsProps } from "./AlertDialogProps";
 declare const AlertDialog: ({ isOpen, onClose, leastDestructiveRef, content, title, confirmButtonText, cancelButtonText, isConfirmLoading, onConfirm, ContentStyle, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, key, }: AlertDialogsProps) => import("react/jsx-runtime").JSX.Element;
 export default AlertDialog;
-//# sourceMappingURL=AlertDialog.d.ts.map

package/dist/Components/AlertDialog/AlertDialog.js

@@ -6,6 +6,6 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const AlertDialog = ({ isOpen, onClose, leastDestructiveRef, content, title, confirmButtonText = "Yes", cancelButtonText = "No", isConfirmLoading, onConfirm, ContentStyle, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, key, }) => {
     var _a;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.AlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, children: [(0, jsx_runtime_1.jsx)(react_1.AlertDialogOverlay, {}), (0, jsx_runtime_1.jsxs)(react_1.AlertDialogContent, { bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], 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)(react_1.Button, { ref: null, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm", sx: button1Style, children: cancelButtonText }), (0, jsx_runtime_1.jsx)(react_1.Button, { colorScheme: "primary", onClick: onConfirm, isLoading: isConfirmLoading, ml: 3, size: "sm", sx: button2Style, children: confirmButtonText })] })] })] }, key));
+    return ((0, jsx_runtime_1.jsxs)(react_1.AlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, children: [(0, jsx_runtime_1.jsx)(react_1.AlertDialogOverlay, {}), (0, jsx_runtime_1.jsxs)(react_1.AlertDialogContent, { bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], 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)(react_1.Button, { ref: leastDestructiveRef, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm", sx: button1Style, children: cancelButtonText }), (0, jsx_runtime_1.jsx)(react_1.Button, { colorScheme: "primary", onClick: onConfirm, isLoading: isConfirmLoading, ml: 3, size: "sm", sx: button2Style, children: confirmButtonText })] })] })] }, key));
 };
 exports.default = AlertDialog;

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

@@ -17,4 +17,3 @@ export type AlertDialogsProps = Pick<AlertDialogProps, "isOpen" | "onClose" | "l
     button2Style?: React.CSSProperties;
     key?: string | number;
 };
-//# sourceMappingURL=AlertDialogProps.d.ts.map

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

@@ -0,0 +1,3 @@
+import { ApexAreaChartProps } from "./ApexAreaChartProps";
+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,71 @@
+"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_apexcharts_1 = __importDefault(require("react-apexcharts"));
+const react_2 = require("@chakra-ui/react");
+const chartColorsFromTheme_1 = require("../../../Theme/tokens/builders/chartColorsFromTheme");
+const chartBase_1 = require("../chartBase");
+const ApexAreaChart = ({ variant = "basic", data, series, labels, title, titlePosition = "left", height = 320, width = "100%", colors, showLegend = true, legendPosition = "bottom", yAxisFormatter, }) => {
+    const theme = (0, react_2.useTheme)();
+    const palette = theme.colors;
+    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, {
+            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,
+        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_apexcharts_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,19 @@
+export type AreaChartVariant = "basic" | "stacked" | "gradient" | "sparkline";
+export type ApexAreaSeries = {
+    name: string;
+    data: number[];
+};
+export type ApexAreaChartProps = {
+    variant?: AreaChartVariant;
+    data?: number[];
+    series?: ApexAreaSeries[];
+    labels?: string[];
+    title?: string;
+    titlePosition?: "left" | "center" | "right";
+    height?: number | string;
+    width?: number | string;
+    colors?: string[];
+    showLegend?: boolean;
+    legendPosition?: "top" | "right" | "bottom" | "left";
+    yAxisFormatter?: (value: number) => string;
+};

package/dist/Components/{NavigationBar/NavBar.stories.js → Apexcharts/ApexAreaChart/ApexAreaChartProps.js}

@@ -1,3 +1,2 @@
 "use strict";
-// // NavBar.stories.tsx
 Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -1,3 +1,2 @@
 import { ApexBarChartProps } from "./ApexBarChartProps";
-export default function ApexBarChart({ data, labels, title, titlePosition, height, width, barColor, xAxisStyle, yAxisStyle, titleStyle, }: ApexBarChartProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ApexBarChart.d.ts.map
+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

@@ -9,54 +9,46 @@ const react_1 = require("react");
 const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
 const react_2 = require("@chakra-ui/react");
 const chartColorsFromTheme_1 = require("../../../Theme/tokens/builders/chartColorsFromTheme");
-const accentText_1 = require("../../../Theme/tokens/builders/accentText");
-function ApexBarChart({ data, labels, title, titlePosition, height = 400, width = 500, barColor, xAxisStyle, yAxisStyle, titleStyle, }) {
+const chartBase_1 = require("../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 resolvedBarColors = (0, react_1.useMemo)(() => barColor !== null && barColor !== void 0 ? barColor : [(0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette)[0]], [barColor, palette]);
+    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 ({ ...xAxisStyle, color: (_a = xAxisStyle === null || xAxisStyle === void 0 ? void 0 : xAxisStyle.color) !== null && _a !== void 0 ? _a : axisColor }); }, [axisColor, xAxisStyle]);
-    const mergedYAxis = (0, react_1.useMemo)(() => { var _a; return ({ ...yAxisStyle, color: (_a = yAxisStyle === null || yAxisStyle === void 0 ? void 0 : yAxisStyle.color) !== null && _a !== void 0 ? _a : axisColor }); }, [axisColor, yAxisStyle]);
+    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 dataLabelColor = palette.primary[500];
-    const chartThemeMode = (0, accentText_1.isDarkCanvas)(palette.backgroundColor.main) ? "dark" : "light";
     const options = (0, react_1.useMemo)(() => ({
-        chart: {
-            type: "bar",
-            height: 350,
-        },
+        chart: (0, chartBase_1.baseChart)(palette, { 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,
-            },
+            labels: { style: mergedXAxis },
+            axisBorder: { show: false },
+            axisTicks: { show: false },
         },
-        yaxis: {
-            labels: {
-                style: mergedYAxis,
-            },
-        },
-        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,
-        theme: { mode: chartThemeMode },
     }), [
+        palette,
         labels,
         mergedXAxis,
         mergedYAxis,
@@ -64,14 +56,13 @@ function ApexBarChart({ data, labels, title, titlePosition, height = 400, width
         titlePosition,
         mergedTitleStyle,
         resolvedBarColors,
-        dataLabelColor,
-        chartThemeMode,
+        horizontal,
+        distributed,
+        stacked,
+        showLegend,
+        legendPosition,
+        series,
     ]);
-    const series = [
-        {
-            name: "Data",
-            data: data,
-        },
-    ];
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_apexcharts_1.default, { options: options, series: series, type: "bar", height: height, width: width }) }));
+    const resolvedSeries = series !== null && series !== void 0 ? series : [{ name: seriesName, data: data !== null && data !== void 0 ? data : [] }];
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_apexcharts_1.default, { options: options, series: resolvedSeries, type: "bar", height: height, width: width }) }));
 }

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

@@ -1,14 +1,24 @@
 export type ApexBarChartProps = {
-    data: number[];
+    data?: number[];
     labels: string[];
     title?: string;
     titlePosition?: "left" | "center" | "right";
-    height?: number;
-    width?: number;
+    height?: number | string;
+    width?: number | string;
     barColor?: string[];
     xAxisStyle?: StyleProps;
     yAxisStyle?: StyleProps;
     titleStyle?: StyleProps;
+    horizontal?: boolean;
+    distributed?: boolean;
+    seriesName?: string;
+    series?: {
+        name: string;
+        data: number[];
+    }[];
+    stacked?: boolean;
+    showLegend?: boolean;
+    legendPosition?: "top" | "right" | "bottom" | "left";
 };
 type StyleProps = {
     fontSize?: string;
@@ -17,4 +27,3 @@ type StyleProps = {
     color?: string;
 };
 export {};
-//# sourceMappingURL=ApexBarChartProps.d.ts.map

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

@@ -1,4 +1,3 @@
 import { ApexLineChartProps } from "./ApexLineChartProps";
 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;
-//# sourceMappingURL=ApexLineChart.d.ts.map

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

@@ -9,12 +9,11 @@ const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
 const react_2 = require("@chakra-ui/react");
 const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
 const chartColorsFromTheme_1 = require("../../../Theme/tokens/builders/chartColorsFromTheme");
-const accentText_1 = require("../../../Theme/tokens/builders/accentText");
+const chartBase_1 = require("../chartBase");
 const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePosition = "center", titleStyle, compact = false, toolbarBreakpointPct = 0.6, titleClampLines, showTitleEllipsis = true, showSeries = true, series: seriesNames, variant = "basic", }) => {
     const theme = (0, react_2.useTheme)();
     const palette = theme.colors;
     const resolvedLineColors = lineColors !== null && lineColors !== void 0 ? lineColors : (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette);
-    const chartThemeMode = (0, accentText_1.isDarkCanvas)(palette.backgroundColor.main) ? "dark" : "light";
     const resolvedTitleStyle = (0, react_1.useMemo)(() => (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle), [palette, titleStyle]);
     const initialName = Array.isArray(seriesNames) && seriesNames.length ? seriesNames[0] : "Series 1";
     const [apexSeries, setApexSeries] = (0, react_1.useState)([
@@ -86,36 +85,41 @@ const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePo
             : 1;
     const showToolbar = !isSmall && ratio >= toolbarBreakpointPct;
     const options = (0, react_1.useMemo)(() => ({
-        chart: {
+        chart: (0, chartBase_1.baseChart)(palette, {
             type: "line",
             animations: variant === "realtime"
-                ? {
-                    enabled: true,
-                    speed: 1000,
-                    dynamicAnimation: { speed: 1000 },
-                }
-                : { enabled: false },
-            zoom: { enabled: true },
+                ? { enabled: true, speed: 1000, dynamicAnimation: { speed: 1000 } }
+                : (0, chartBase_1.baseChart)(palette).animations,
+            zoom: { enabled: !isSmall },
             toolbar: { show: showToolbar },
-        },
-        stroke: { curve: "smooth" },
+        }),
+        stroke: { curve: "smooth", width: 2, lineCap: "round" },
         colors: resolvedLineColors,
-        xaxis: labels
-            ? { categories: labels }
-            : { type: variant === "realtime" ? "numeric" : "category" },
+        xaxis: {
+            ...(labels
+                ? { categories: labels }
+                : { type: variant === "realtime" ? "numeric" : "category" }),
+            labels: { style: (0, chartBase_1.baseAxisLabels)(palette) },
+            axisBorder: { show: false },
+            axisTicks: { show: false },
+        },
+        yaxis: { labels: { style: (0, chartBase_1.baseAxisLabels)(palette) } },
         title: {
             text: isSmall ? undefined : title,
             align: titlePosition !== null && titlePosition !== void 0 ? titlePosition : "center",
             style: resolvedTitleStyle,
         },
         tooltip: {
+            ...(0, chartBase_1.baseTooltip)(palette),
             enabled: !!showSeries,
             marker: { show: !!showSeries },
         },
-        markers: { size: showSeries ? 4 : 0, hover: { size: showSeries ? 4 : 0 } },
+        markers: { size: 0, hover: { size: showSeries ? 5 : 0 } },
         dataLabels: { enabled: false },
-        grid: { padding: { top: isSmall ? 6 : 16, right: 8, left: 8 } },
-        theme: { mode: chartThemeMode },
+        grid: {
+            ...(0, chartBase_1.baseGrid)(palette),
+            padding: { top: isSmall ? 6 : 16, right: 12, left: 8, bottom: 0 },
+        },
     }), [
         variant,
         showToolbar,
@@ -126,7 +130,7 @@ const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePo
         titlePosition,
         resolvedTitleStyle,
         showSeries,
-        chartThemeMode,
+        palette,
     ]);
     return ((0, jsx_runtime_1.jsxs)("div", { ref: wrapperRef, children: [title && isSmall && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: title, placement: "top", hasArrow: true, fontSize: "0.75rem", isDisabled: !isTruncated, children: (0, jsx_runtime_1.jsx)("div", { ref: titleRef, style: {
                         textAlign: "left",

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

@@ -26,4 +26,3 @@ export type ApexLineChartProps = {
     toolbarBreakpointPct?: number;
 };
 export type LineChartVariant = "basic" | "realtime";
-//# sourceMappingURL=ApexLineChartProps.d.ts.map

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

@@ -1,4 +1,3 @@
 import { ApexPieChartProps } from "./ApexPieChartProps";
-declare const ApexPieChart: ({ data, labels, title, height, width, donutColors, chartColor, titlePosition, titleStyle, legendPosition, legendStyle, variant, }: ApexPieChartProps) => import("react/jsx-runtime").JSX.Element;
+declare const ApexPieChart: ({ data, labels, title, height, width, donutColors, chartColor, titlePosition, titleStyle, legendPosition, legendStyle, variant, showDataLabels, minLabelPercent, surfaceColor, donutSize, totalLabel, labelPlacement, }: ApexPieChartProps) => import("react/jsx-runtime").JSX.Element;
 export default ApexPieChart;
-//# sourceMappingURL=ApexPieChart.d.ts.map