pixelize-design-library 2.4.1 → 2.4.2-beta.1

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/Assets/defaultLogo.js

@@ -1,9 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const useCustomTheme_1 = require("../Theme/useCustomTheme");
 const DefaultLogo = () => {
-    const theme = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)("svg", { width: "12.09", height: "15.95", viewBox: "0 0 31 29", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M30.4999 6.26137V7.81058H15.9761H14.8787V22.8508V28.8862H12.5226C9.6824 28.8862 7.32632 26.4656 7.06812 23.3995C7.06812 23.2381 7.06812 23.0444 7.06812 22.8508V18.3323C7.06812 18.2677 7.06812 18.2032 7.06812 18.1063V15.5889V6.2291C7.06812 2.80793 9.84378 -5.72205e-06 13.2972 -5.72205e-06H24.8517C28.0147 0.355021 30.4676 3.00158 30.4676 6.2291L30.4999 6.26137Z", fill: theme.colors.black }), (0, jsx_runtime_1.jsx)("path", { d: "M7.10053 23.3672H7.03598C5.16402 23.2381 3.48571 22.4635 2.25926 21.3338C0.871428 20.0428 0 18.2677 0 16.3312V15.6211H7.06825V18.1386C7.06825 18.2032 7.06825 18.2677 7.06825 18.3645V22.883C7.06825 23.0767 7.06825 23.2381 7.06825 23.4317L7.10053 23.3672Z", fill: theme.colors.black }), (0, jsx_runtime_1.jsx)("path", { d: "M30.4678 12.0063V15.6211V17.1703C30.4678 20.6238 26.272 23.3994 21.0757 23.3994H14.8789V22.8508V15.6211H22.6572V7.81056C22.6895 7.81056 30.5001 7.81056 30.5001 7.81056V11.5868C30.5001 11.7159 30.5001 11.8772 30.5001 12.0063H30.4678Z", fill: theme.colors.black })] }));
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: "12.09", height: "15.95", viewBox: "0 0 31 29", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M30.4999 6.26137V7.81058H15.9761H14.8787V22.8508V28.8862H12.5226C9.6824 28.8862 7.32632 26.4656 7.06812 23.3995C7.06812 23.2381 7.06812 23.0444 7.06812 22.8508V18.3323C7.06812 18.2677 7.06812 18.2032 7.06812 18.1063V15.5889V6.2291C7.06812 2.80793 9.84378 -5.72205e-06 13.2972 -5.72205e-06H24.8517C28.0147 0.355021 30.4676 3.00158 30.4676 6.2291L30.4999 6.26137Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M7.10053 23.3672H7.03598C5.16402 23.2381 3.48571 22.4635 2.25926 21.3338C0.871428 20.0428 0 18.2677 0 16.3312V15.6211H7.06825V18.1386C7.06825 18.2032 7.06825 18.2677 7.06825 18.3645V22.883C7.06825 23.0767 7.06825 23.2381 7.06825 23.4317L7.10053 23.3672Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M30.4678 12.0063V15.6211V17.1703C30.4678 20.6238 26.272 23.3994 21.0757 23.3994H14.8789V22.8508V15.6211H22.6572V7.81056C22.6895 7.81056 30.5001 7.81056 30.5001 7.81056V11.5868C30.5001 11.7159 30.5001 11.8772 30.5001 12.0063H30.4678Z", fill: "currentColor" })] }));
 };
 exports.default = DefaultLogo;

package/dist/Assets/defaultLogo.tsx

@@ -1,7 +1,4 @@
-import { useCustomTheme } from "../Theme/useCustomTheme";
-
 const DefaultLogo = () => {
-  const theme = useCustomTheme();
   return (
     <svg
       width="12.09"
@@ -12,19 +9,18 @@ const DefaultLogo = () => {
     >
       <path
         d="M30.4999 6.26137V7.81058H15.9761H14.8787V22.8508V28.8862H12.5226C9.6824 28.8862 7.32632 26.4656 7.06812 23.3995C7.06812 23.2381 7.06812 23.0444 7.06812 22.8508V18.3323C7.06812 18.2677 7.06812 18.2032 7.06812 18.1063V15.5889V6.2291C7.06812 2.80793 9.84378 -5.72205e-06 13.2972 -5.72205e-06H24.8517C28.0147 0.355021 30.4676 3.00158 30.4676 6.2291L30.4999 6.26137Z"
-        fill={theme.colors.black}
+        fill="currentColor"
       />
       <path
         d="M7.10053 23.3672H7.03598C5.16402 23.2381 3.48571 22.4635 2.25926 21.3338C0.871428 20.0428 0 18.2677 0 16.3312V15.6211H7.06825V18.1386C7.06825 18.2032 7.06825 18.2677 7.06825 18.3645V22.883C7.06825 23.0767 7.06825 23.2381 7.06825 23.4317L7.10053 23.3672Z"
-        fill={theme.colors.black}
+        fill="currentColor"
       />
       <path
         d="M30.4678 12.0063V15.6211V17.1703C30.4678 20.6238 26.272 23.3994 21.0757 23.3994H14.8789V22.8508V15.6211H22.6572V7.81056C22.6895 7.81056 30.5001 7.81056 30.5001 7.81056V11.5868C30.5001 11.7159 30.5001 11.8772 30.5001 12.0063H30.4678Z"
-        fill={theme.colors.black}
+        fill="currentColor"
       />
     </svg>
-
-  )
+  );
 };
 
 export default DefaultLogo;

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

@@ -8,28 +8,26 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const accordionColors_1 = require("./accordionColors");
 const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }) => {
-    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 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]);
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const isDark = (0, accentText_1.isDarkCanvas)(colors.backgroundColor.main);
+    const border = colors.boxborder[300];
+    const headingColor = colors.text[800];
+    const bodyColor = colors.text[600];
+    const { expandedBg, softHover } = (0, react_1.useMemo)(() => (0, accordionColors_1.getAccordionHoverColors)(colors, isDark), [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, _h, _j, _k, _l, _m;
+            var _a;
+            return ((0, jsx_runtime_1.jsx)(react_2.AccordionItem, { border: `0.063rem solid ${border}`, borderRadius: "xl", bg: colors.background[50], mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: colors.boxborder[400] }, ...item.itemProps, sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle, children: ({ isExpanded }) => {
+                    var _a, _b, _c;
                     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",
-                                        outline: `0.125rem solid ${(_b = (_a = c.primary) === null || _a === void 0 ? void 0 : _a[300]) !== null && _b !== void 0 ? _b : (_c = c.gray) === null || _c === void 0 ? void 0 : _c[300]}`,
+                                        outline: `0.125rem solid ${colors.primary[300]}`,
                                         outlineOffset: "-0.125rem",
                                     }, ...item.buttonProps, sx: {
-                                        ...(_d = item.customStyles) === null || _d === void 0 ? void 0 : _d.buttonStyle,
+                                        ...(_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.buttonStyle,
                                         "&:hover": {
-                                            ...(_e = item.customStyles) === null || _e === void 0 ? void 0 : _e.hoverbuttonStyle,
+                                            ...(_b = item.customStyles) === null || _b === void 0 ? void 0 : _b.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 ? colors.accentText : colors.textMuted, bg: isExpanded ? colors.primary.opacity[16] : "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: (_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.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

@@ -1,20 +1,31 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getAccordionHoverColors = void 0;
+const color_1 = require("../../Theme/tokens/builders/color");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+/**
+ * Same perceptibility floor the SideBar ladder uses — a state a user cannot see is not a state.
+ * Light mode `softHover` measured 1.042-1.105 across all 9 brands (invisible) while dark sat at
+ * 1.58-1.85; `expandedBg` (`primary.opacity[8]`, an 8%-alpha tint) is the same bug class — an
+ * 8% tint composited over a near-white canvas is itself near-white. Both are resolved against
+ * the rest surface so light and dark actually agree on "you can see this".
+ */
+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;
     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
         // being as loud as the gray[300] hover fill FilterSidebar/Table already use.
         return {
-            expandedBg: (_d = (_b = (_a = colors.gray) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[50],
-            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],
+            expandedBg: colors.gray[200],
+            softHover: colors.gray[200],
         };
     }
+    const rest = colors.background[50];
+    const expandedTint = (0, color_1.compositeOver)(colors.primary.opacity[8], rest);
     return {
-        expandedBg: (_o = (_m = (_l = colors.primary) === null || _l === void 0 ? void 0 : _l.opacity) === null || _m === void 0 ? void 0 : _m[8]) !== null && _o !== void 0 ? _o : (_p = colors.gray) === null || _p === void 0 ? void 0 : _p[50],
-        softHover: (_s = (_r = (_q = colors.table) === null || _q === void 0 ? void 0 : _q.hover) === null || _r === void 0 ? void 0 : _r[100]) !== null && _s !== void 0 ? _s : (_t = colors.gray) === null || _t === void 0 ? void 0 : _t[50],
+        expandedBg: (0, outlineRung_1.liftToContrast)(expandedTint, rest, MIN_HOVER_STEP),
+        softHover: (0, outlineRung_1.liftToContrast)(colors.table.hover[100], rest, MIN_HOVER_STEP),
     };
 };
 exports.getAccordionHoverColors = getAccordionHoverColors;

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

@@ -4,8 +4,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 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: colors.background[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,70 @@
+"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 useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+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 { colors: palette } = (0, useCustomTheme_1.useCustomTheme)();
+    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/Apexcharts/ApexAreaChart/ApexAreaChartProps.js

@@ -0,0 +1,2 @@
+"use strict";
+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