@omnitron-dev/prism 0.3.0 → 0.3.2

package/dist/chunk-2AB7VGPW.js

@@ -0,0 +1,447 @@
+import { createClasses } from './chunk-LH4ZZZYB.js';
+import { lazy, useState, useEffect, Suspense } from 'react';
+import { styled, useTheme } from '@mui/material/styles';
+import { clsx } from 'clsx';
+import Box from '@mui/material/Box';
+import Skeleton from '@mui/material/Skeleton';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import useMediaQuery from '@mui/material/useMediaQuery';
+
+function cn(...inputs) {
+  return clsx(inputs);
+}
+function mergeClasses(className, state) {
+  const classList = className ? Array.isArray(className) ? className.filter(Boolean) : [className] : [];
+  if (!state) {
+    return classList.join(" ");
+  }
+  const stateClasses = Object.entries(state).filter(([, value]) => value !== void 0 && value !== false).map(([key, value]) => {
+    if (Array.isArray(value)) {
+      return value[0] ? value[1] : "";
+    }
+    return value ? key : "";
+  }).filter(Boolean);
+  return [...classList, ...stateClasses].join(" ");
+}
+
+// src/components/chart/classes.ts
+var chartClasses = {
+  root: createClasses("chart__root"),
+  loading: createClasses("chart__loading"),
+  legends: {
+    root: createClasses("chart__legends__root"),
+    item: {
+      wrap: createClasses("chart__legends__item__wrap"),
+      root: createClasses("chart__legends__item__root"),
+      dot: createClasses("chart__legends__item__dot"),
+      icon: createClasses("chart__legends__item__icon"),
+      label: createClasses("chart__legends__item__label"),
+      value: createClasses("chart__legends__item__value")
+    }
+  }
+};
+var CIRCULAR_TYPES = ["donut", "radialBar", "pie", "polarArea"];
+function ChartLoading({ sx, className, type, ...other }) {
+  const isCircular = type && CIRCULAR_TYPES.includes(type);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: cn(chartClasses.loading, className),
+      sx: [
+        {
+          top: 0,
+          left: 0,
+          width: 1,
+          zIndex: 9,
+          height: 1,
+          p: "inherit",
+          overflow: "hidden",
+          alignItems: "center",
+          position: "absolute",
+          borderRadius: "inherit",
+          justifyContent: "center",
+          display: "flex"
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      ...other,
+      children: /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          variant: "circular",
+          sx: {
+            width: 1,
+            height: 1,
+            borderRadius: "inherit",
+            ...isCircular && { borderRadius: "50%" }
+          }
+        }
+      )
+    }
+  );
+}
+function ChartLegends({
+  sx,
+  className,
+  slotProps,
+  icons = [],
+  values = [],
+  labels = [],
+  colors = [],
+  sublabels = [],
+  ...other
+}) {
+  return /* @__PURE__ */ jsx(ListRoot, { className: cn(chartClasses.legends.root, className), sx, ...other, children: labels.map((series, index) => /* @__PURE__ */ jsxs(
+    ItemWrap,
+    {
+      className: chartClasses.legends.item.wrap,
+      sx: [
+        {
+          "--icon-color": colors[index]
+        },
+        ...Array.isArray(slotProps?.wrapper?.sx) ? slotProps.wrapper.sx : [slotProps?.wrapper?.sx]
+      ],
+      ...slotProps?.wrapper,
+      children: [
+        /* @__PURE__ */ jsxs(ItemRoot, { className: chartClasses.legends.item.root, ...slotProps?.root, children: [
+          icons.length ? /* @__PURE__ */ jsx(ItemIcon, { className: chartClasses.legends.item.icon, ...slotProps?.icon, children: icons[index] }) : /* @__PURE__ */ jsx(ItemDot, { className: chartClasses.legends.item.dot, ...slotProps?.dot }),
+          /* @__PURE__ */ jsxs(ItemLabel, { className: chartClasses.legends.item.label, ...slotProps?.label, children: [
+            series,
+            !!sublabels.length && /* @__PURE__ */ jsxs(Fragment, { children: [
+              " ",
+              ` (${sublabels[index]})`
+            ] })
+          ] })
+        ] }),
+        values.length > 0 && /* @__PURE__ */ jsx(ItemValue, { className: chartClasses.legends.item.value, ...slotProps?.value, children: values[index] })
+      ]
+    },
+    series
+  )) });
+}
+var ListRoot = styled("ul")(({ theme }) => ({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: theme.spacing(2),
+  margin: 0,
+  padding: 0,
+  listStyle: "none"
+}));
+var ItemWrap = styled("li")({
+  minWidth: 0,
+  maxWidth: "100%",
+  display: "inline-flex",
+  flexDirection: "column"
+});
+var ItemRoot = styled("div")(({ theme }) => ({
+  gap: 6,
+  alignItems: "center",
+  display: "inline-flex",
+  justifyContent: "flex-start",
+  fontSize: theme.typography.pxToRem(13),
+  fontWeight: theme.typography.fontWeightMedium
+}));
+var ItemIcon = styled("span")({
+  display: "inline-flex",
+  color: "var(--icon-color)",
+  "& > svg": {
+    width: 20,
+    height: 20
+  }
+});
+var ItemDot = styled("span")({
+  width: 12,
+  height: 12,
+  flexShrink: 0,
+  display: "flex",
+  borderRadius: "50%",
+  position: "relative",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "var(--icon-color)",
+  backgroundColor: "currentColor"
+});
+var ItemLabel = styled("span")({
+  minWidth: 0,
+  overflowWrap: "anywhere"
+});
+var ItemValue = styled("span")(({ theme }) => ({
+  ...theme.typography.h6,
+  marginTop: theme.spacing(1)
+}));
+var LazyApexChart = lazy(
+  () => import('react-apexcharts').then((module) => ({
+    default: module.default
+  }))
+);
+function Chart({
+  type,
+  series,
+  options,
+  width = "100%",
+  height = "100%",
+  slotProps,
+  className,
+  sx,
+  ...other
+}) {
+  const [isClient, setIsClient] = useState(false);
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+  const renderFallback = () => /* @__PURE__ */ jsx(ChartLoading, { type, sx: slotProps?.loading });
+  return /* @__PURE__ */ jsx(
+    ChartRoot,
+    {
+      dir: "ltr",
+      className: cn(chartClasses.root, className),
+      sx: [{ minHeight: typeof height === "number" ? height : void 0 }, ...Array.isArray(sx) ? sx : [sx]],
+      ...other,
+      children: isClient ? /* @__PURE__ */ jsx(Suspense, { fallback: renderFallback(), children: /* @__PURE__ */ jsx(LazyApexChart, { type, series, options, width, height }) }) : renderFallback()
+    }
+  );
+}
+var ChartRoot = styled("div")(({ theme }) => ({
+  "--prism-chart-text": theme.vars?.palette.text.primary ?? theme.palette.text.primary,
+  "--prism-chart-muted": theme.vars?.palette.text.secondary ?? theme.palette.text.secondary,
+  "--prism-chart-background": theme.vars?.palette.background.paper ?? theme.palette.background.paper,
+  "--prism-chart-neutral": theme.vars?.palette.background.default ?? theme.palette.background.default,
+  "--prism-chart-divider": theme.vars?.palette.divider ?? theme.palette.divider,
+  "--prism-chart-shadow": theme.shadows[8],
+  width: "100%",
+  minWidth: 0,
+  maxWidth: "100%",
+  flexShrink: 0,
+  position: "relative",
+  borderRadius: Number(theme.shape.borderRadius) * 1.5
+}));
+function useChart(updatedOptions) {
+  const theme = useTheme();
+  const reducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+  const baseOptions = baseChartOptions(theme) ?? {};
+  const options = deepMerge(baseOptions, updatedOptions ?? {});
+  if (reducedMotion) {
+    options.chart = { ...options.chart, animations: { ...options.chart?.animations, enabled: false } };
+  }
+  return options;
+}
+function baseChartOptions(theme) {
+  const vars = theme.vars?.palette;
+  const palette = theme.palette;
+  const LABEL_TOTAL = {
+    show: true,
+    label: "Total",
+    color: vars?.text.secondary ?? palette.text.secondary,
+    fontSize: theme.typography.subtitle2.fontSize,
+    fontWeight: theme.typography.subtitle2.fontWeight
+  };
+  const LABEL_VALUE = {
+    offsetY: 8,
+    color: vars?.text.primary ?? palette.text.primary,
+    fontSize: theme.typography.h4.fontSize,
+    fontWeight: theme.typography.h4.fontWeight
+  };
+  const greyChannel = getColorChannel(theme, "grey", "500");
+  const dividerColor = vars?.divider ?? palette.divider;
+  const paperColor = vars?.background.paper ?? palette.background.paper;
+  return {
+    theme: { mode: palette.mode },
+    // =========================================================================
+    // Chart
+    // https://apexcharts.com/docs/options/chart/animations/
+    // =========================================================================
+    chart: {
+      background: "transparent",
+      toolbar: { show: false },
+      zoom: { enabled: false },
+      parentHeightOffset: 0,
+      fontFamily: theme.typography.fontFamily,
+      foreColor: vars?.text.secondary ?? palette.text.secondary,
+      animations: {
+        enabled: true,
+        speed: 360,
+        animateGradually: { enabled: true, delay: 120 },
+        dynamicAnimation: { enabled: true, speed: 360 }
+      }
+    },
+    // =========================================================================
+    // Colors
+    // https://apexcharts.com/docs/options/colors/
+    // =========================================================================
+    colors: [
+      palette.primary.main,
+      palette.warning.main,
+      palette.info.main,
+      palette.error.main,
+      palette.success.main,
+      palette.warning.dark,
+      palette.success.dark,
+      palette.info.dark,
+      palette.primary.dark
+    ],
+    // =========================================================================
+    // States
+    // https://apexcharts.com/docs/options/states/
+    // =========================================================================
+    states: {
+      hover: { filter: { type: "darken" } },
+      active: { filter: { type: "darken" } }
+    },
+    // =========================================================================
+    // Fill
+    // https://apexcharts.com/docs/options/fill/
+    // =========================================================================
+    fill: {
+      opacity: 1,
+      gradient: {
+        type: "vertical",
+        shadeIntensity: 0,
+        opacityFrom: 0.4,
+        opacityTo: 0,
+        stops: [0, 100]
+      }
+    },
+    // =========================================================================
+    // Data Labels
+    // https://apexcharts.com/docs/options/datalabels/
+    // =========================================================================
+    dataLabels: { enabled: false },
+    // =========================================================================
+    // Stroke
+    // https://apexcharts.com/docs/options/stroke/
+    // =========================================================================
+    stroke: { width: 2.5, curve: "smooth", lineCap: "round" },
+    // =========================================================================
+    // Grid
+    // https://apexcharts.com/docs/options/grid/
+    // =========================================================================
+    grid: {
+      strokeDashArray: 3,
+      borderColor: dividerColor,
+      padding: { top: 0, right: 0, bottom: 0 },
+      xaxis: { lines: { show: false } }
+    },
+    // =========================================================================
+    // Axis
+    // https://apexcharts.com/docs/options/xaxis/
+    // https://apexcharts.com/docs/options/yaxis/
+    // =========================================================================
+    xaxis: { axisBorder: { show: false }, axisTicks: { show: false } },
+    yaxis: { tickAmount: 5 },
+    // =========================================================================
+    // Markers
+    // https://apexcharts.com/docs/options/markers/
+    // =========================================================================
+    markers: {
+      size: 0,
+      strokeColors: paperColor
+    },
+    // =========================================================================
+    // Tooltip
+    // =========================================================================
+    tooltip: { theme: palette.mode, fillSeriesColor: false, x: { show: true } },
+    // =========================================================================
+    // Legend
+    // https://apexcharts.com/docs/options/legend/
+    // =========================================================================
+    legend: {
+      show: false,
+      position: "top",
+      fontWeight: 500,
+      fontSize: "13px",
+      horizontalAlign: "right",
+      markers: { shape: "circle" },
+      labels: { colors: vars?.text.primary ?? palette.text.primary },
+      itemMargin: { horizontal: 8, vertical: 8 }
+    },
+    // =========================================================================
+    // Plot Options
+    // =========================================================================
+    plotOptions: {
+      // Bar charts
+      // https://apexcharts.com/docs/options/plotoptions/bar/
+      bar: { borderRadius: 4, columnWidth: "48%", borderRadiusApplication: "end" },
+      // Pie & Donut charts
+      // https://apexcharts.com/docs/options/plotoptions/pie/
+      pie: {
+        donut: {
+          labels: {
+            show: true,
+            value: { ...LABEL_VALUE },
+            total: { ...LABEL_TOTAL }
+          }
+        }
+      },
+      // RadialBar charts
+      // https://apexcharts.com/docs/options/plotoptions/radialbar/
+      radialBar: {
+        hollow: { margin: -8, size: "100%" },
+        track: {
+          margin: -8,
+          strokeWidth: "50%",
+          background: `rgba(${greyChannel} / 0.16)`
+        },
+        dataLabels: { value: { ...LABEL_VALUE }, total: { ...LABEL_TOTAL } }
+      },
+      // Radar charts
+      // https://apexcharts.com/docs/options/plotoptions/radar/
+      radar: {
+        polygons: {
+          fill: { colors: ["transparent"] },
+          strokeColors: dividerColor,
+          connectorColors: dividerColor
+        }
+      },
+      // Polar Area charts
+      // https://apexcharts.com/docs/options/plotoptions/polararea/
+      polarArea: {
+        rings: { strokeColor: dividerColor },
+        spokes: { connectorColors: dividerColor }
+      },
+      // Heatmap charts
+      // https://apexcharts.com/docs/options/plotoptions/heatmap/
+      heatmap: { distributed: true }
+    },
+    // =========================================================================
+    // Responsive
+    // https://apexcharts.com/docs/options/responsive/
+    // =========================================================================
+    responsive: [
+      {
+        breakpoint: theme.breakpoints.values.sm,
+        options: { plotOptions: { bar: { borderRadius: 3, columnWidth: "80%" } } }
+      },
+      {
+        breakpoint: theme.breakpoints.values.md,
+        options: { plotOptions: { bar: { columnWidth: "60%" } } }
+      }
+    ]
+  };
+}
+function getColorChannel(theme, color, shade) {
+  const channelKey = `${shade}Channel` ;
+  const vars = theme.vars?.palette[color];
+  const fallbacks = {
+    "500Channel": "145 158 171",
+    "900Channel": "0 0 0",
+    mainChannel: "51 133 240"
+  };
+  return vars?.[channelKey] ?? fallbacks[channelKey] ?? "145 158 171";
+}
+function deepMerge(target, source) {
+  const output = { ...target };
+  for (const key of Object.keys(source)) {
+    const sourceValue = source[key];
+    const targetValue = target[key];
+    if (sourceValue !== null && typeof sourceValue === "object" && !Array.isArray(sourceValue) && targetValue !== null && typeof targetValue === "object" && !Array.isArray(targetValue)) {
+      output[key] = deepMerge(targetValue, sourceValue);
+    } else if (sourceValue !== void 0) {
+      output[key] = sourceValue;
+    }
+  }
+  return output;
+}
+
+export { Chart, ChartLegends, ChartLoading, chartClasses, cn, mergeClasses, useChart };
+//# sourceMappingURL=chunk-2AB7VGPW.js.map
+//# sourceMappingURL=chunk-2AB7VGPW.js.map

package/dist/chunk-2AB7VGPW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/cn.ts","../src/components/chart/classes.ts","../src/components/chart/components/chart-loading.tsx","../src/components/chart/components/chart-legends.tsx","../src/components/chart/chart.tsx","../src/components/chart/use-chart.ts"],"names":["jsx","styled"],"mappings":"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","file":"chunk-2AB7VGPW.js","sourcesContent":["/**\n * Class Name Utility\n *\n * Combines clsx for conditional classes with optional Tailwind merge.\n * Inspired by shadcn/ui's cn() utility and minimal-shared's mergeClasses.\n *\n * @module utils/cn\n */\n\nimport { clsx, type ClassValue } from 'clsx';\n\n/**\n * Combines class names using clsx.\n *\n * This is a simplified version without tailwind-merge since Prism\n * primarily uses MUI's sx prop for styling. For Tailwind projects,\n * consider adding tailwind-merge.\n *\n * @example\n * ```tsx\n * // Basic usage\n * cn('px-4 py-2', 'bg-blue-500')\n *\n * // Conditional classes\n * cn('base-class', isActive && 'active', isDisabled && 'disabled')\n *\n * // With objects\n * cn('base', { active: isActive, disabled: isDisabled })\n *\n * // With arrays\n * cn(['class1', 'class2'], condition && 'class3')\n * ```\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return clsx(inputs);\n}\n\n/**\n * Type for class value inputs.\n * Re-exported for convenience.\n */\nexport type { ClassValue };\n\n// =============================================================================\n// STATE-BASED CLASS MERGING (minimal-shared pattern)\n// =============================================================================\n\n/**\n * State props for mergeClasses.\n * Values can be:\n * - boolean: includes key as class name if true\n * - undefined: excluded\n * - [boolean, string]: includes string as class name if boolean is true\n */\nexport type StateProps = {\n  [key: string]: boolean | undefined | [boolean, string];\n};\n\n/**\n * Merges class names with state-based class names.\n *\n * This utility provides an alternative API for state-based class toggling,\n * particularly useful when class names differ from state keys.\n *\n * @param className - Base class name(s)\n * @param state - State object with boolean or [boolean, className] values\n * @returns Merged class names string\n *\n * @example\n * ```tsx\n * // Basic state-based merging\n * mergeClasses('item', {\n *   'item--active': isActive,\n *   'item--disabled': isDisabled,\n * });\n * // Output: 'item item--active' (if isActive is true)\n *\n * // With tuple format for different class names\n * mergeClasses('btn', {\n *   primary: [isPrimary, 'btn-primary'],\n *   secondary: [isSecondary, 'btn-secondary'],\n * });\n *\n * // With array of base classes\n * mergeClasses(['nav', 'nav--main'], {\n *   'nav--open': isOpen,\n * });\n * ```\n */\nexport function mergeClasses(className?: string | (string | undefined)[] | null, state?: StateProps): string {\n  const classList = className ? (Array.isArray(className) ? className.filter(Boolean) : [className]) : [];\n\n  if (!state) {\n    return classList.join(' ');\n  }\n\n  const stateClasses = Object.entries(state)\n    .filter(([, value]) => value !== undefined && value !== false)\n    .map(([key, value]) => {\n      if (Array.isArray(value)) {\n        return value[0] ? value[1] : '';\n      }\n      return value ? key : '';\n    })\n    .filter(Boolean);\n\n  return [...classList, ...stateClasses].join(' ');\n}\n","/**\n * Chart Component CSS Classes\n *\n * @module components/chart\n */\n\nimport { createClasses } from '../../utils/create-classes.js';\n\n// =============================================================================\n// CHART CLASSES\n// =============================================================================\n\n/**\n * CSS class names for the Chart component.\n */\nexport const chartClasses = {\n  root: createClasses('chart__root'),\n  loading: createClasses('chart__loading'),\n  legends: {\n    root: createClasses('chart__legends__root'),\n    item: {\n      wrap: createClasses('chart__legends__item__wrap'),\n      root: createClasses('chart__legends__item__root'),\n      dot: createClasses('chart__legends__item__dot'),\n      icon: createClasses('chart__legends__item__icon'),\n      label: createClasses('chart__legends__item__label'),\n      value: createClasses('chart__legends__item__value'),\n    },\n  },\n};\n","'use client';\n\n/**\n * Chart Loading Component\n *\n * Skeleton placeholder shown while chart is loading.\n *\n * @module components/chart\n */\n\nimport type { ChartLoadingProps, ChartType } from '../types.js';\n\nimport Box from '@mui/material/Box';\nimport Skeleton from '@mui/material/Skeleton';\n\nimport { cn } from '../../../utils/cn.js';\nimport { chartClasses } from '../classes.js';\n\n// =============================================================================\n// CIRCULAR CHART TYPES\n// =============================================================================\n\nconst CIRCULAR_TYPES: ChartType[] = ['donut', 'radialBar', 'pie', 'polarArea'];\n\n// =============================================================================\n// CHART LOADING\n// =============================================================================\n\n/**\n * Loading skeleton for charts.\n *\n * Displays a skeleton placeholder with shape appropriate for the chart type.\n *\n * @example\n * ```tsx\n * <ChartLoading type=\"pie\" />\n * <ChartLoading type=\"bar\" />\n * ```\n */\nexport function ChartLoading({ sx, className, type, ...other }: ChartLoadingProps) {\n  const isCircular = type && CIRCULAR_TYPES.includes(type);\n\n  return (\n    <Box\n      className={cn(chartClasses.loading, className)}\n      sx={[\n        {\n          top: 0,\n          left: 0,\n          width: 1,\n          zIndex: 9,\n          height: 1,\n          p: 'inherit',\n          overflow: 'hidden',\n          alignItems: 'center',\n          position: 'absolute',\n          borderRadius: 'inherit',\n          justifyContent: 'center',\n          display: 'flex',\n        },\n        ...(Array.isArray(sx) ? sx : [sx]),\n      ]}\n      {...other}\n    >\n      <Skeleton\n        variant=\"circular\"\n        sx={{\n          width: 1,\n          height: 1,\n          borderRadius: 'inherit',\n          ...(isCircular && { borderRadius: '50%' }),\n        }}\n      />\n    </Box>\n  );\n}\n","'use client';\n\n/**\n * Chart Legends Component\n *\n * Custom legend display for charts.\n *\n * @module components/chart\n */\n\nimport type { ChartLegendsProps } from '../types.js';\n\nimport { styled } from '@mui/material/styles';\n\nimport { cn } from '../../../utils/cn.js';\nimport { chartClasses } from '../classes.js';\n\n// =============================================================================\n// CHART LEGENDS\n// =============================================================================\n\n/**\n * Custom chart legends component.\n *\n * Displays chart legends with support for colors, icons, values, and sublabels.\n *\n * @example\n * ```tsx\n * <ChartLegends\n *   labels={['Series A', 'Series B']}\n *   colors={['#ff0000', '#00ff00']}\n *   values={['100', '200']}\n * />\n * ```\n */\nexport function ChartLegends({\n  sx,\n  className,\n  slotProps,\n  icons = [],\n  values = [],\n  labels = [],\n  colors = [],\n  sublabels = [],\n  ...other\n}: ChartLegendsProps) {\n  return (\n    <ListRoot className={cn(chartClasses.legends.root, className)} sx={sx} {...other}>\n      {labels.map((series, index) => (\n        <ItemWrap\n          key={series}\n          className={chartClasses.legends.item.wrap}\n          sx={[\n            {\n              '--icon-color': colors[index],\n            },\n            ...(Array.isArray(slotProps?.wrapper?.sx) ? slotProps.wrapper.sx : [slotProps?.wrapper?.sx]),\n          ]}\n          {...slotProps?.wrapper}\n        >\n          <ItemRoot className={chartClasses.legends.item.root} {...slotProps?.root}>\n            {icons.length ? (\n              <ItemIcon className={chartClasses.legends.item.icon} {...slotProps?.icon}>\n                {icons[index]}\n              </ItemIcon>\n            ) : (\n              <ItemDot className={chartClasses.legends.item.dot} {...slotProps?.dot} />\n            )}\n\n            <ItemLabel className={chartClasses.legends.item.label} {...slotProps?.label}>\n              {series}\n              {!!sublabels.length && <> {` (${sublabels[index]})`}</>}\n            </ItemLabel>\n          </ItemRoot>\n\n          {values.length > 0 && (\n            <ItemValue className={chartClasses.legends.item.value} {...slotProps?.value}>\n              {values[index]}\n            </ItemValue>\n          )}\n        </ItemWrap>\n      ))}\n    </ListRoot>\n  );\n}\n\n// =============================================================================\n// STYLED COMPONENTS\n// =============================================================================\n\nconst ListRoot = styled('ul')(({ theme }) => ({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: theme.spacing(2),\n  margin: 0,\n  padding: 0,\n  listStyle: 'none',\n}));\n\nconst ItemWrap = styled('li')({\n  minWidth: 0,\n  maxWidth: '100%',\n  display: 'inline-flex',\n  flexDirection: 'column',\n});\n\nconst ItemRoot = styled('div')(({ theme }) => ({\n  gap: 6,\n  alignItems: 'center',\n  display: 'inline-flex',\n  justifyContent: 'flex-start',\n  fontSize: theme.typography.pxToRem(13),\n  fontWeight: theme.typography.fontWeightMedium,\n}));\n\nconst ItemIcon = styled('span')({\n  display: 'inline-flex',\n  color: 'var(--icon-color)',\n  '& > svg': {\n    width: 20,\n    height: 20,\n  },\n});\n\nconst ItemDot = styled('span')({\n  width: 12,\n  height: 12,\n  flexShrink: 0,\n  display: 'flex',\n  borderRadius: '50%',\n  position: 'relative',\n  alignItems: 'center',\n  justifyContent: 'center',\n  color: 'var(--icon-color)',\n  backgroundColor: 'currentColor',\n});\n\nconst ItemLabel = styled('span')({\n  minWidth: 0,\n  overflowWrap: 'anywhere',\n});\n\nconst ItemValue = styled('span')(({ theme }) => ({\n  ...theme.typography.h6,\n  marginTop: theme.spacing(1),\n}));\n","'use client';\n\n/**\n * Chart Component\n *\n * Lazy-loaded ApexCharts wrapper with theme integration and SSR support.\n *\n * @module components/chart\n */\n\nimport type { ChartProps } from './types.js';\n\nimport { lazy, Suspense, useState, useEffect, type ComponentType } from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport { cn } from '../../utils/cn.js';\nimport { chartClasses } from './classes.js';\nimport { ChartLoading } from './components/index.js';\n\n// =============================================================================\n// LAZY LOADED APEX CHARTS\n// =============================================================================\n\n/**\n * ApexChart component props (minimal type for lazy loading).\n */\ninterface ApexChartProps {\n  type?: string;\n  series?: unknown;\n  options?: unknown;\n  width?: string | number;\n  height?: string | number;\n}\n\nconst LazyApexChart = lazy(() =>\n  import('react-apexcharts').then((module) => ({\n    default: module.default as ComponentType<ApexChartProps>,\n  }))\n);\n\n// =============================================================================\n// CHART COMPONENT\n// =============================================================================\n\n/**\n * Theme-aware chart component using ApexCharts.\n *\n * Features:\n * - Lazy loading with Suspense\n * - SSR-safe (only renders on client)\n * - Theme-integrated styles\n * - Loading skeleton placeholder\n *\n * @example\n * ```tsx\n * import { Chart, useChart } from '@omnitron-dev/prism/components';\n *\n * function MyChart() {\n *   const chartOptions = useChart({\n *     xaxis: { categories: ['Jan', 'Feb', 'Mar'] },\n *   });\n *\n *   return (\n *     <Chart\n *       type=\"line\"\n *       series={[{ name: 'Sales', data: [10, 20, 30] }]}\n *       options={chartOptions}\n *       height={320}\n *     />\n *   );\n * }\n * ```\n */\nexport function Chart({\n  type,\n  series,\n  options,\n  width = '100%',\n  height = '100%',\n  slotProps,\n  className,\n  sx,\n  ...other\n}: ChartProps) {\n  const [isClient, setIsClient] = useState(false);\n\n  // SSR safety: only render chart on client\n  useEffect(() => {\n    setIsClient(true);\n  }, []);\n\n  const renderFallback = () => <ChartLoading type={type} sx={slotProps?.loading} />;\n\n  return (\n    <ChartRoot\n      dir=\"ltr\"\n      className={cn(chartClasses.root, className)}\n      sx={[{ minHeight: typeof height === 'number' ? height : undefined }, ...(Array.isArray(sx) ? sx : [sx])]}\n      {...other}\n    >\n      {isClient ? (\n        <Suspense fallback={renderFallback()}>\n          <LazyApexChart type={type} series={series} options={options} width={width} height={height} />\n        </Suspense>\n      ) : (\n        renderFallback()\n      )}\n    </ChartRoot>\n  );\n}\n\n// =============================================================================\n// STYLED COMPONENTS\n// =============================================================================\n\nconst ChartRoot = styled('div')(({ theme }) => ({\n  '--prism-chart-text': theme.vars?.palette.text.primary ?? theme.palette.text.primary,\n  '--prism-chart-muted': theme.vars?.palette.text.secondary ?? theme.palette.text.secondary,\n  '--prism-chart-background': theme.vars?.palette.background.paper ?? theme.palette.background.paper,\n  '--prism-chart-neutral': theme.vars?.palette.background.default ?? theme.palette.background.default,\n  '--prism-chart-divider': theme.vars?.palette.divider ?? theme.palette.divider,\n  '--prism-chart-shadow': theme.shadows[8],\n  width: '100%',\n  minWidth: 0,\n  maxWidth: '100%',\n  flexShrink: 0,\n  position: 'relative',\n  borderRadius: Number(theme.shape.borderRadius) * 1.5,\n}));\n","/**\n * useChart Hook\n *\n * Creates theme-aware ApexCharts options with sensible defaults.\n * Merges custom options with base theme-integrated options.\n *\n * @module components/chart\n */\n\nimport type { Theme } from '@mui/material/styles';\nimport type { ChartOptions } from './types.js';\n\nimport { useTheme } from '@mui/material/styles';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\n// =============================================================================\n// USE CHART HOOK\n// =============================================================================\n\n/**\n * Create theme-aware chart options.\n *\n * @param updatedOptions - Custom options to merge with base options\n * @returns Merged chart options with theme integration\n *\n * @example\n * ```tsx\n * function MyChart() {\n *   const chartOptions = useChart({\n *     xaxis: { categories: ['Jan', 'Feb', 'Mar'] },\n *   });\n *\n *   return (\n *     <Chart\n *       type=\"line\"\n *       series={[{ name: 'Sales', data: [10, 20, 30] }]}\n *       options={chartOptions}\n *     />\n *   );\n * }\n * ```\n */\nexport function useChart(updatedOptions?: ChartOptions): ChartOptions {\n  const theme = useTheme();\n  const reducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\n\n  const baseOptions = baseChartOptions(theme) ?? {};\n\n  const options = deepMerge(baseOptions, updatedOptions ?? {});\n  if (reducedMotion) {\n    options.chart = { ...options.chart, animations: { ...options.chart?.animations, enabled: false } };\n  }\n  return options;\n}\n\n// =============================================================================\n// BASE CHART OPTIONS\n// =============================================================================\n\n/**\n * Generate base chart options from theme.\n */\nfunction baseChartOptions(theme: Theme): ChartOptions {\n  // Access CSS variables safely\n  const vars = theme.vars?.palette;\n  const palette = theme.palette;\n\n  // Label styles for donut/radialBar charts\n  const LABEL_TOTAL = {\n    show: true,\n    label: 'Total',\n    color: vars?.text.secondary ?? palette.text.secondary,\n    fontSize: theme.typography.subtitle2.fontSize as string,\n    fontWeight: theme.typography.subtitle2.fontWeight,\n  };\n\n  const LABEL_VALUE = {\n    offsetY: 8,\n    color: vars?.text.primary ?? palette.text.primary,\n    fontSize: theme.typography.h4.fontSize as string,\n    fontWeight: theme.typography.h4.fontWeight,\n  };\n\n  // Get grey channel for opacity calculations\n  const greyChannel = getColorChannel(theme, 'grey', '500');\n  const dividerColor = vars?.divider ?? palette.divider;\n  const paperColor = vars?.background.paper ?? palette.background.paper;\n\n  return {\n    theme: { mode: palette.mode },\n    // =========================================================================\n    // Chart\n    // https://apexcharts.com/docs/options/chart/animations/\n    // =========================================================================\n    chart: {\n      background: 'transparent',\n      toolbar: { show: false },\n      zoom: { enabled: false },\n      parentHeightOffset: 0,\n      fontFamily: theme.typography.fontFamily,\n      foreColor: vars?.text.secondary ?? palette.text.secondary,\n      animations: {\n        enabled: true,\n        speed: 360,\n        animateGradually: { enabled: true, delay: 120 },\n        dynamicAnimation: { enabled: true, speed: 360 },\n      },\n    },\n\n    // =========================================================================\n    // Colors\n    // https://apexcharts.com/docs/options/colors/\n    // =========================================================================\n    colors: [\n      palette.primary.main,\n      palette.warning.main,\n      palette.info.main,\n      palette.error.main,\n      palette.success.main,\n      palette.warning.dark,\n      palette.success.dark,\n      palette.info.dark,\n      palette.primary.dark,\n    ],\n\n    // =========================================================================\n    // States\n    // https://apexcharts.com/docs/options/states/\n    // =========================================================================\n    states: {\n      hover: { filter: { type: 'darken' } },\n      active: { filter: { type: 'darken' } },\n    },\n\n    // =========================================================================\n    // Fill\n    // https://apexcharts.com/docs/options/fill/\n    // =========================================================================\n    fill: {\n      opacity: 1,\n      gradient: {\n        type: 'vertical',\n        shadeIntensity: 0,\n        opacityFrom: 0.4,\n        opacityTo: 0,\n        stops: [0, 100],\n      },\n    },\n\n    // =========================================================================\n    // Data Labels\n    // https://apexcharts.com/docs/options/datalabels/\n    // =========================================================================\n    dataLabels: { enabled: false },\n\n    // =========================================================================\n    // Stroke\n    // https://apexcharts.com/docs/options/stroke/\n    // =========================================================================\n    stroke: { width: 2.5, curve: 'smooth', lineCap: 'round' },\n\n    // =========================================================================\n    // Grid\n    // https://apexcharts.com/docs/options/grid/\n    // =========================================================================\n    grid: {\n      strokeDashArray: 3,\n      borderColor: dividerColor,\n      padding: { top: 0, right: 0, bottom: 0 },\n      xaxis: { lines: { show: false } },\n    },\n\n    // =========================================================================\n    // Axis\n    // https://apexcharts.com/docs/options/xaxis/\n    // https://apexcharts.com/docs/options/yaxis/\n    // =========================================================================\n    xaxis: { axisBorder: { show: false }, axisTicks: { show: false } },\n    yaxis: { tickAmount: 5 },\n\n    // =========================================================================\n    // Markers\n    // https://apexcharts.com/docs/options/markers/\n    // =========================================================================\n    markers: {\n      size: 0,\n      strokeColors: paperColor,\n    },\n\n    // =========================================================================\n    // Tooltip\n    // =========================================================================\n    tooltip: { theme: palette.mode, fillSeriesColor: false, x: { show: true } },\n\n    // =========================================================================\n    // Legend\n    // https://apexcharts.com/docs/options/legend/\n    // =========================================================================\n    legend: {\n      show: false,\n      position: 'top',\n      fontWeight: 500,\n      fontSize: '13px',\n      horizontalAlign: 'right',\n      markers: { shape: 'circle' },\n      labels: { colors: vars?.text.primary ?? palette.text.primary },\n      itemMargin: { horizontal: 8, vertical: 8 },\n    },\n\n    // =========================================================================\n    // Plot Options\n    // =========================================================================\n    plotOptions: {\n      // Bar charts\n      // https://apexcharts.com/docs/options/plotoptions/bar/\n      bar: { borderRadius: 4, columnWidth: '48%', borderRadiusApplication: 'end' },\n\n      // Pie & Donut charts\n      // https://apexcharts.com/docs/options/plotoptions/pie/\n      pie: {\n        donut: {\n          labels: {\n            show: true,\n            value: { ...LABEL_VALUE },\n            total: { ...LABEL_TOTAL },\n          },\n        },\n      },\n\n      // RadialBar charts\n      // https://apexcharts.com/docs/options/plotoptions/radialbar/\n      radialBar: {\n        hollow: { margin: -8, size: '100%' },\n        track: {\n          margin: -8,\n          strokeWidth: '50%',\n          background: `rgba(${greyChannel} / 0.16)`,\n        },\n        dataLabels: { value: { ...LABEL_VALUE }, total: { ...LABEL_TOTAL } },\n      },\n\n      // Radar charts\n      // https://apexcharts.com/docs/options/plotoptions/radar/\n      radar: {\n        polygons: {\n          fill: { colors: ['transparent'] },\n          strokeColors: dividerColor,\n          connectorColors: dividerColor,\n        },\n      },\n\n      // Polar Area charts\n      // https://apexcharts.com/docs/options/plotoptions/polararea/\n      polarArea: {\n        rings: { strokeColor: dividerColor },\n        spokes: { connectorColors: dividerColor },\n      },\n\n      // Heatmap charts\n      // https://apexcharts.com/docs/options/plotoptions/heatmap/\n      heatmap: { distributed: true },\n    },\n\n    // =========================================================================\n    // Responsive\n    // https://apexcharts.com/docs/options/responsive/\n    // =========================================================================\n    responsive: [\n      {\n        breakpoint: theme.breakpoints.values.sm,\n        options: { plotOptions: { bar: { borderRadius: 3, columnWidth: '80%' } } },\n      },\n      {\n        breakpoint: theme.breakpoints.values.md,\n        options: { plotOptions: { bar: { columnWidth: '60%' } } },\n      },\n    ],\n  };\n}\n\n// =============================================================================\n// HELPERS\n// =============================================================================\n\n/**\n * Get color channel from theme safely.\n */\nfunction getColorChannel(theme: Theme, color: 'grey' | 'primary' | 'secondary', shade?: string): string {\n  const channelKey = shade ? `${shade}Channel` : 'mainChannel';\n  const vars = theme.vars?.palette[color] as Record<string, string> | undefined;\n\n  const fallbacks: Record<string, string> = {\n    '500Channel': '145 158 171',\n    '900Channel': '0 0 0',\n    mainChannel: '51 133 240',\n  };\n\n  return vars?.[channelKey] ?? fallbacks[channelKey] ?? '145 158 171';\n}\n\n/**\n * Deep merge two objects.\n */\nfunction deepMerge<T extends object>(target: T, source: Partial<T>): T {\n  const output = { ...target };\n\n  for (const key of Object.keys(source) as Array<keyof T>) {\n    const sourceValue = source[key];\n    const targetValue = target[key];\n\n    if (\n      sourceValue !== null &&\n      typeof sourceValue === 'object' &&\n      !Array.isArray(sourceValue) &&\n      targetValue !== null &&\n      typeof targetValue === 'object' &&\n      !Array.isArray(targetValue)\n    ) {\n      output[key] = deepMerge(targetValue as object, sourceValue as object) as T[keyof T];\n    } else if (sourceValue !== undefined) {\n      output[key] = sourceValue as T[keyof T];\n    }\n  }\n\n  return output;\n}\n"]}