@northslopetech/altitude-ui 2.0.14 → 2.0.17

package/dist/index.mjs

@@ -1470,7 +1470,7 @@ var Statement = ({
     )
   }
 );
-var Table = ({
+var TableIcon = ({
   className,
   variant = "dark",
   ...props
@@ -3018,20 +3018,828 @@ var DropdownMenuShortcut = ({
   );
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+// src/components/ui/charts/chart-legend.tsx
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+function ChartLegend({
+  items,
+  x = 0,
+  y = 550,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx12("foreignObject", { x, y, width: "100%", height: "40", children: /* @__PURE__ */ jsx12(
+    "div",
+    {
+      className: `flex justify-center items-center gap-6 ${className}`,
+      style: { height: "100%" },
+      children: items.map(({ key, color, label }) => /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx12("div", { className: "w-3 h-3", style: { backgroundColor: color } }),
+        /* @__PURE__ */ jsx12(Typography, { variant: "body-xs", children: label || key })
+      ] }, key))
+    }
+  ) });
+}
+
+// src/lib/chart-utils.ts
+var CHART_COLORS = {
+  // Status colors
+  SUCCESS: "var(--color-success)",
+  ERROR: "var(--color-error)",
+  WARNING: "var(--color-warning)",
+  SECONDARY: "var(--color-secondary)",
+  // Primary brand colors
+  PRIMARY: "var(--color-primary)",
+  // Categorical palette from altitude-tokens
+  CATEGORICAL: [
+    "var(--color-chart-color-palette-categorical-1)",
+    "var(--color-chart-color-palette-categorical-2)",
+    "var(--color-chart-color-palette-categorical-3)",
+    "var(--color-chart-color-palette-categorical-4)",
+    "var(--color-chart-color-palette-categorical-5)"
+  ],
+  // Performance palette from altitude-tokens
+  PERFORMANCE: [
+    "var(--color-chart-color-palette-performance-1)",
+    "var(--color-chart-color-palette-performance-2)",
+    "var(--color-chart-color-palette-performance-3)",
+    "var(--color-chart-color-palette-performance-4)",
+    "var(--color-chart-color-palette-performance-5)"
+  ],
+  // Heatmap palette from altitude-tokens
+  HEATMAP: [
+    "var(--color-chart-color-palette-heatmap-1)",
+    "var(--color-chart-color-palette-heatmap-2)",
+    "var(--color-chart-color-palette-heatmap-3)",
+    "var(--color-chart-color-palette-heatmap-4)",
+    "var(--color-chart-color-palette-heatmap-5)"
+  ]
+};
+var COLOR_SCHEMES = {
+  passFail: {
+    PASS: CHART_COLORS.SUCCESS,
+    FAIL: CHART_COLORS.ERROR
+  },
+  targetVsAchieved: {
+    TARGET: CHART_COLORS.SECONDARY,
+    ACHIEVED: CHART_COLORS.SUCCESS
+  },
+  performance: {
+    HIGH: CHART_COLORS.PERFORMANCE[0],
+    MEDIUM_HIGH: CHART_COLORS.PERFORMANCE[1],
+    MEDIUM: CHART_COLORS.PERFORMANCE[2],
+    MEDIUM_LOW: CHART_COLORS.PERFORMANCE[3],
+    LOW: CHART_COLORS.PERFORMANCE[4]
+  }
+};
+var CHART_CONSTANTS = {
+  // Standard chart dimensions
+  STANDARD_HEIGHT: 400,
+  LARGE_HEIGHT: 500,
+  SMALL_HEIGHT: 300,
+  // Chart margins
+  MARGIN: {
+    top: 20,
+    right: 30,
+    left: 20,
+    bottom: 5
+  },
+  // Axis dimensions
+  AXIS_HEIGHT_STANDARD: 30,
+  AXIS_HEIGHT_ROTATED: 60,
+  AXIS_WIDTH_STANDARD: 60,
+  AXIS_WIDTH_YAXIS: 80,
+  // Pie chart constants
+  PIE_CHART_CENTER_X: 300,
+  PIE_CHART_CENTER_Y: 200
+};
+var getSeriesColor = (index) => {
+  return CHART_COLORS.CATEGORICAL[index % CHART_COLORS.CATEGORICAL.length] || CHART_COLORS.PRIMARY;
+};
+var getPerformanceColor = (index) => {
+  return CHART_COLORS.PERFORMANCE[index % CHART_COLORS.PERFORMANCE.length] || CHART_COLORS.PRIMARY;
+};
+var getHeatmapColor = (index) => {
+  return CHART_COLORS.HEATMAP[index % CHART_COLORS.HEATMAP.length] || CHART_COLORS.PRIMARY;
+};
+var createLegendItems = (colorScheme) => {
+  return Object.entries(colorScheme).map(([key, color]) => ({
+    key,
+    color,
+    label: key
+  }));
+};
+var calculateYAxisWidth = (data, yAxisKey) => {
+  if (!data || data.length === 0) return CHART_CONSTANTS.AXIS_WIDTH_YAXIS;
+  const maxLength = Math.max(
+    ...data.map((item) => {
+      const value = item[yAxisKey];
+      return String(value || "").length;
+    })
+  );
+  return Math.max(maxLength * 8 + 20, CHART_CONSTANTS.AXIS_WIDTH_YAXIS);
+};
+var formatPercentage = (value, decimals = 1) => {
+  return `${(value * 100).toFixed(decimals)}%`;
+};
+var formatLargeNumber = (value) => {
+  if (value >= 1e6) {
+    return `${(value / 1e6).toFixed(1)}M`;
+  }
+  if (value >= 1e3) {
+    return `${(value / 1e3).toFixed(1)}K`;
+  }
+  return value.toString();
+};
+
+// src/components/ui/charts/chart-labels.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var createCustomXAxisLabel = (text, yOffset = 40) => {
+  const CustomXAxisLabel = ({ viewBox }) => {
+    if (!viewBox) return null;
+    const { x, y, width } = viewBox;
+    return /* @__PURE__ */ jsx13("g", { children: /* @__PURE__ */ jsx13("foreignObject", { x, y: y + yOffset, width, height: 20, children: /* @__PURE__ */ jsx13("div", { className: "flex justify-center w-full", children: /* @__PURE__ */ jsx13(Typography, { variant: "label-xs-bold", className: "text-secondary", children: text }) }) }) });
+  };
+  CustomXAxisLabel.displayName = "CustomXAxisLabel";
+  return CustomXAxisLabel;
+};
+var createCustomYAxisLabel = (text, leftMargin) => {
+  const CustomYAxisLabel = ({ viewBox }) => {
+    if (!viewBox) return null;
+    const { x, y, height } = viewBox;
+    const offset = leftMargin ? leftMargin + 10 : 110;
+    return /* @__PURE__ */ jsx13("g", { children: /* @__PURE__ */ jsx13("foreignObject", { x: x - offset, y, width: 100, height, children: /* @__PURE__ */ jsx13("div", { className: "flex items-center justify-center h-full transform -rotate-90 whitespace-nowrap", children: /* @__PURE__ */ jsx13(Typography, { variant: "label-xs-bold", className: "text-secondary", children: text }) }) }) });
+  };
+  CustomYAxisLabel.displayName = "CustomYAxisLabel";
+  return CustomYAxisLabel;
+};
+var createCustomYAxisRightLabel = (text) => {
+  const CustomYAxisRightLabel = ({ viewBox }) => {
+    if (!viewBox) return null;
+    const { x, y, width, height } = viewBox;
+    return /* @__PURE__ */ jsx13("g", { children: /* @__PURE__ */ jsx13("foreignObject", { x: x + width - 70, y, width: 120, height, children: /* @__PURE__ */ jsx13("div", { className: "flex items-center justify-center h-full transform rotate-90 whitespace-nowrap", children: /* @__PURE__ */ jsx13(Typography, { variant: "label-xs-bold", className: "text-secondary", children: text }) }) }) });
+  };
+  CustomYAxisRightLabel.displayName = "CustomYAxisRightLabel";
+  return CustomYAxisRightLabel;
+};
+var customXAxisTick = (props) => {
+  const { x, y, payload } = props;
+  return /* @__PURE__ */ jsx13("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ jsx13(
+    "foreignObject",
+    {
+      x: -20,
+      y: 5,
+      width: 40,
+      height: 20,
+      style: { overflow: "visible" },
+      children: /* @__PURE__ */ jsx13(
+        "div",
+        {
+          className: "flex items-start justify-center h-full",
+          style: { overflow: "visible" },
+          children: /* @__PURE__ */ jsx13(
+            Typography,
+            {
+              variant: "body-xs",
+              className: "text-secondary whitespace-nowrap",
+              children: payload.value
+            }
+          )
+        }
+      )
+    }
+  ) });
+};
+var customXAxisTickRotated = (props) => {
+  const { x, y, payload } = props;
+  return /* @__PURE__ */ jsx13("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ jsx13(
+    "text",
+    {
+      x: 0,
+      y: 0,
+      dy: 10,
+      textAnchor: "end",
+      fill: "currentColor",
+      transform: "rotate(-45)",
+      className: "text-secondary",
+      style: { fontSize: "12px" },
+      children: payload.value
+    }
+  ) });
+};
+var customYAxisTick = (props) => {
+  const { x, y, payload } = props;
+  const text = String(payload.value);
+  const estimatedWidth = Math.max(text.length * 8, 80);
+  return /* @__PURE__ */ jsx13(
+    "foreignObject",
+    {
+      x: x - estimatedWidth + 5,
+      y: y - 6,
+      width: estimatedWidth,
+      height: 15,
+      children: /* @__PURE__ */ jsx13("div", { className: "flex justify-end w-full", children: /* @__PURE__ */ jsx13(Typography, { variant: "body-xs", className: "text-secondary", children: payload.value }) })
+    }
+  );
+};
+
+// src/components/ui/charts/chart-tooltip.tsx
+import { Fragment, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+function TooltipContainer({
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx14(
+    "div",
+    {
+      className: `bg-light border border-subtle rounded p-2.5 text-dark ${className}`,
+      children
+    }
+  );
+}
+function TooltipItem({
+  color,
+  label,
+  value,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs10(Fragment, { children: [
+    /* @__PURE__ */ jsx14("br", {}),
+    /* @__PURE__ */ jsxs10(Typography, { variant: "label-sm", className, children: [
+      /* @__PURE__ */ jsx14(
+        "span",
+        {
+          className: "inline-block w-3 h-3 mr-1.5",
+          style: { backgroundColor: color }
+        }
+      ),
+      label,
+      ": ",
+      value
+    ] })
+  ] });
+}
+function GenericTooltip({
+  title,
+  items,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs10(TooltipContainer, { className, children: [
+    title && /* @__PURE__ */ jsx14(Typography, { variant: "label-sm-bold", children: title }),
+    items.map((item, index) => /* @__PURE__ */ jsx14(
+      TooltipItem,
+      {
+        color: item.color,
+        label: item.label,
+        value: item.value
+      },
+      index
+    ))
+  ] });
+}
+
+// src/components/ui/charts/bar-chart.tsx
+import { forwardRef as forwardRef12 } from "react";
+import {
+  BarChart as RechartsBarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer
+} from "recharts";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+var BarChart = forwardRef12(
+  ({
+    data,
+    xAxisKey,
+    yAxisKey,
+    title,
+    xAxisLabel,
+    yAxisLabel,
+    barColor = CHART_COLORS.PRIMARY,
+    className = "",
+    rotateXAxisLabels = false,
+    showLegend = false,
+    legendItems = [],
+    onDataPointClick,
+    layout = "horizontal",
+    xAxisType = "category",
+    yAxisType = "number",
+    barDataKey
+  }, ref) => {
+    const handleClick = (data2) => {
+      if (onDataPointClick && data2 && typeof data2 === "object") {
+        onDataPointClick(data2);
+      }
+    };
+    const defaultLegendItems = showLegend && legendItems.length === 0 ? [{ key: yAxisKey, color: barColor, label: yAxisKey }] : legendItems;
+    const hasData = data && data.length > 0;
+    return /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        ref,
+        className: `bg-light border border-subtle mx-6 ${className}`,
+        children: [
+          /* @__PURE__ */ jsx15("div", { className: "flex items-center justify-between px-3 py-2 border-b border-subtle", children: /* @__PURE__ */ jsx15(Typography, { variant: "label-sm-bold", children: title }) }),
+          /* @__PURE__ */ jsx15("div", { className: "pt-2 px-2", children: hasData ? /* @__PURE__ */ jsx15(
+            ResponsiveContainer,
+            {
+              width: "100%",
+              height: CHART_CONSTANTS.STANDARD_HEIGHT,
+              children: /* @__PURE__ */ jsxs11(
+                RechartsBarChart,
+                {
+                  data,
+                  margin: {
+                    ...CHART_CONSTANTS.MARGIN,
+                    left: 24,
+                    bottom: rotateXAxisLabels ? 60 : 50
+                  },
+                  onClick: handleClick,
+                  layout,
+                  children: [
+                    /* @__PURE__ */ jsx15(
+                      XAxis,
+                      {
+                        dataKey: xAxisKey,
+                        type: xAxisType,
+                        axisLine: false,
+                        tickLine: false,
+                        tick: rotateXAxisLabels ? customXAxisTickRotated : customXAxisTick,
+                        interval: 0,
+                        height: rotateXAxisLabels ? CHART_CONSTANTS.AXIS_HEIGHT_ROTATED : CHART_CONSTANTS.AXIS_HEIGHT_STANDARD,
+                        width: CHART_CONSTANTS.AXIS_WIDTH_STANDARD,
+                        label: xAxisLabel ? createCustomXAxisLabel(xAxisLabel, 80) : void 0
+                      }
+                    ),
+                    /* @__PURE__ */ jsx15(
+                      YAxis,
+                      {
+                        axisLine: false,
+                        tickLine: false,
+                        tick: customYAxisTick,
+                        label: yAxisLabel ? createCustomYAxisLabel(yAxisLabel, 40) : void 0,
+                        dataKey: yAxisKey,
+                        type: yAxisType
+                      }
+                    ),
+                    /* @__PURE__ */ jsx15(
+                      Tooltip,
+                      {
+                        content: ({
+                          active,
+                          payload,
+                          label
+                        }) => {
+                          if (active && payload && payload.length) {
+                            return /* @__PURE__ */ jsx15(
+                              GenericTooltip,
+                              {
+                                title: label?.toString(),
+                                items: payload.map((entry) => ({
+                                  color: entry.color || barColor,
+                                  label: entry.name || yAxisKey,
+                                  value: entry.value || 0
+                                }))
+                              }
+                            );
+                          }
+                          return null;
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx15(
+                      Bar,
+                      {
+                        dataKey: barDataKey || yAxisKey,
+                        fill: barColor,
+                        name: barDataKey || yAxisKey
+                      }
+                    ),
+                    showLegend && defaultLegendItems.length > 0 && /* @__PURE__ */ jsx15(ChartLegend, { items: defaultLegendItems })
+                  ]
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsx15("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ jsx15(Typography, { variant: "body-md", className: "text-secondary", children: "No data is available" }) }) })
+        ]
+      }
+    );
+  }
+);
+BarChart.displayName = "BarChart";
+
+// src/components/ui/charts/line-chart.tsx
+import { forwardRef as forwardRef13 } from "react";
+import {
+  LineChart as RechartsLineChart,
+  Line,
+  XAxis as XAxis2,
+  YAxis as YAxis2,
+  Tooltip as Tooltip2,
+  ResponsiveContainer as ResponsiveContainer2
+} from "recharts";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+var LineChart = forwardRef13(
+  ({
+    data,
+    xAxisKey,
+    series,
+    title,
+    xAxisLabel,
+    yAxisLabel,
+    onDataPointClick,
+    className = "",
+    showLegend = true,
+    legendItems = []
+  }, ref) => {
+    const handleClick = (data2) => {
+      if (onDataPointClick && data2 && typeof data2 === "object") {
+        onDataPointClick(data2);
+      }
+    };
+    const defaultLegendItems = legendItems.length > 0 ? legendItems : createLegendItems(
+      series.reduce(
+        (acc, s, index) => ({
+          ...acc,
+          [s.dataKey]: s.color || getSeriesColor(index)
+        }),
+        {}
+      )
+    );
+    const hasData = data && data.length > 0;
+    return /* @__PURE__ */ jsxs12(
+      "div",
+      {
+        ref,
+        className: `bg-light border border-subtle mx-6 ${className}`,
+        children: [
+          /* @__PURE__ */ jsx16("div", { className: "flex items-center justify-between px-3 py-2 border-b border-subtle", children: /* @__PURE__ */ jsx16(Typography, { variant: "label-sm-bold", children: title }) }),
+          /* @__PURE__ */ jsx16("div", { className: "pt-2 px-2", children: hasData ? /* @__PURE__ */ jsx16(
+            ResponsiveContainer2,
+            {
+              width: "100%",
+              height: CHART_CONSTANTS.STANDARD_HEIGHT,
+              children: /* @__PURE__ */ jsxs12(
+                RechartsLineChart,
+                {
+                  data,
+                  margin: {
+                    ...CHART_CONSTANTS.MARGIN,
+                    left: 24,
+                    bottom: 50
+                  },
+                  onClick: handleClick,
+                  children: [
+                    /* @__PURE__ */ jsx16(
+                      XAxis2,
+                      {
+                        dataKey: xAxisKey,
+                        axisLine: false,
+                        tickLine: false,
+                        tick: customXAxisTick,
+                        interval: 0,
+                        height: CHART_CONSTANTS.AXIS_HEIGHT_STANDARD,
+                        label: xAxisLabel ? createCustomXAxisLabel(xAxisLabel) : void 0
+                      }
+                    ),
+                    /* @__PURE__ */ jsx16(
+                      YAxis2,
+                      {
+                        axisLine: false,
+                        tickLine: false,
+                        tick: customYAxisTick,
+                        label: yAxisLabel ? createCustomYAxisLabel(yAxisLabel, 40) : void 0
+                      }
+                    ),
+                    /* @__PURE__ */ jsx16(
+                      Tooltip2,
+                      {
+                        content: ({
+                          active,
+                          payload,
+                          label
+                        }) => {
+                          if (active && payload && payload.length) {
+                            return /* @__PURE__ */ jsx16(
+                              GenericTooltip,
+                              {
+                                title: label?.toString(),
+                                items: payload.map((entry) => ({
+                                  color: entry.color || CHART_COLORS.PRIMARY,
+                                  label: entry.name || entry.dataKey || "",
+                                  value: entry.value || 0
+                                }))
+                              }
+                            );
+                          }
+                          return null;
+                        }
+                      }
+                    ),
+                    series.map((s, index) => /* @__PURE__ */ jsx16(
+                      Line,
+                      {
+                        type: "monotone",
+                        dataKey: s.dataKey,
+                        stroke: s.color || getSeriesColor(index),
+                        strokeWidth: s.strokeWidth || 2,
+                        dot: s.dot !== false ? { r: 4 } : false,
+                        activeDot: s.activeDot !== false ? { r: 6 } : false
+                      },
+                      s.dataKey
+                    )),
+                    showLegend && defaultLegendItems.length > 0 && /* @__PURE__ */ jsx16(ChartLegend, { items: defaultLegendItems })
+                  ]
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsx16("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ jsx16(Typography, { variant: "body-md", className: "text-secondary", children: "No data is available" }) }) })
+        ]
+      }
+    );
+  }
+);
+LineChart.displayName = "LineChart";
+
+// src/components/ui/charts/pie-chart.tsx
+import { forwardRef as forwardRef14 } from "react";
+import { PieChart as RechartsPieChart, Pie, Cell, Tooltip as Tooltip3 } from "recharts";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+var PieChart = forwardRef14(
+  ({
+    data,
+    title,
+    onDataPointClick,
+    className = "",
+    showLegend = true,
+    legendItems = [],
+    innerRadius = "40%",
+    outerRadius = "70%",
+    showLabels = true
+  }, ref) => {
+    const handleClick = (data2) => {
+      if (onDataPointClick && data2 && typeof data2 === "object") {
+        onDataPointClick(data2);
+      }
+    };
+    const defaultLegendItems = legendItems.length > 0 ? legendItems : createLegendItems(
+      data.reduce(
+        (acc, item, index) => ({
+          ...acc,
+          [item.name]: item.color || getSeriesColor(index)
+        }),
+        {}
+      )
+    );
+    const hasData = data && data.length > 0;
+    return /* @__PURE__ */ jsxs13(
+      "div",
+      {
+        ref,
+        className: `bg-light border border-subtle mx-6 ${className}`,
+        children: [
+          /* @__PURE__ */ jsx17("div", { className: "flex items-center justify-between px-3 py-2 border-b border-subtle", children: /* @__PURE__ */ jsx17(Typography, { variant: "label-sm-bold", children: title }) }),
+          /* @__PURE__ */ jsx17("div", { className: "pt-2 px-2", children: hasData ? /* @__PURE__ */ jsx17("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs13(
+            RechartsPieChart,
+            {
+              width: 600,
+              height: CHART_CONSTANTS.LARGE_HEIGHT,
+              children: [
+                /* @__PURE__ */ jsx17(
+                  Pie,
+                  {
+                    data,
+                    innerRadius,
+                    outerRadius,
+                    dataKey: "value",
+                    cy: CHART_CONSTANTS.PIE_CHART_CENTER_Y,
+                    cx: CHART_CONSTANTS.PIE_CHART_CENTER_X,
+                    label: showLabels,
+                    labelLine: false,
+                    onClick: handleClick,
+                    children: data.map((entry, index) => /* @__PURE__ */ jsx17(
+                      Cell,
+                      {
+                        fill: entry.color || getSeriesColor(index)
+                      },
+                      `cell-${index}`
+                    ))
+                  }
+                ),
+                /* @__PURE__ */ jsx17(
+                  Tooltip3,
+                  {
+                    content: ({
+                      active,
+                      payload
+                    }) => {
+                      if (active && payload && payload.length && payload[0]) {
+                        const data2 = payload[0].payload;
+                        return /* @__PURE__ */ jsx17(
+                          GenericTooltip,
+                          {
+                            title: data2.name,
+                            items: [
+                              {
+                                color: data2.color || CHART_COLORS.PRIMARY,
+                                label: "Value",
+                                value: data2.value
+                              }
+                            ]
+                          }
+                        );
+                      }
+                      return null;
+                    }
+                  }
+                ),
+                showLegend && defaultLegendItems.length > 0 && /* @__PURE__ */ jsx17(ChartLegend, { items: defaultLegendItems, y: 400 })
+              ]
+            }
+          ) }) : /* @__PURE__ */ jsx17("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ jsx17(Typography, { variant: "body-md", className: "text-secondary", children: "No data is available" }) }) })
+        ]
+      }
+    );
+  }
+);
+PieChart.displayName = "PieChart";
+
+// src/components/ui/table.tsx
+import { useCallback as useCallback2 } from "react";
+import {
+  flexRender
+} from "@tanstack/react-table";
+import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+function Table({
+  table,
+  className,
+  showPagination = false,
+  paginationClassName
+}) {
+  const currentPage = table.getState().pagination.pageIndex;
+  const pageSize = table.getState().pagination.pageSize;
+  const totalPages = table.getPageCount();
+  const totalRows = table.getFilteredRowModel().rows.length;
+  const showingText = totalRows > 0 ? "Showing " + (currentPage * pageSize + 1) + "-" + Math.min((currentPage + 1) * pageSize, totalRows) + " of " + totalRows + " results" : "No results found";
+  const handlePreviousPage = useCallback2(() => {
+    table.previousPage();
+  }, [table]);
+  const handleNextPage = useCallback2(() => {
+    table.nextPage();
+  }, [table]);
+  const handlePageChange = useCallback2(
+    (pageIndex) => {
+      table.setPageIndex(pageIndex);
+    },
+    [table]
+  );
+  const handlePageSizeChange = useCallback2(
+    (value) => {
+      table.setPageSize(Number(value));
+    },
+    [table]
+  );
+  return /* @__PURE__ */ jsxs14("div", { children: [
+    /* @__PURE__ */ jsx18("div", { className: cn("overflow-x-auto", className), children: /* @__PURE__ */ jsxs14("table", { className: "min-w-full divide-y divide-border", children: [
+      /* @__PURE__ */ jsx18("thead", { className: "bg-dark text-light", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx18("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx18("th", { className: "px-6 py-3 text-left", children: /* @__PURE__ */ jsxs14(
+        "div",
+        {
+          className: `flex items-center space-x-1 ${header.column.getCanSort() ? "cursor-pointer select-none" : ""}`,
+          onClick: header.column.getToggleSortingHandler(),
+          children: [
+            /* @__PURE__ */ jsx18(
+              Typography,
+              {
+                variant: "label-xs",
+                className: "text-light uppercase tracking-wider",
+                children: flexRender(
+                  header.column.columnDef.header,
+                  header.getContext()
+                )
+              }
+            ),
+            header.column.getCanSort() && /* @__PURE__ */ jsxs14("span", { className: "ml-1", children: [
+              header.column.getIsSorted() === "asc" && /* @__PURE__ */ jsx18(ChevronUp, { className: "w-4 h-4 text-light" }),
+              header.column.getIsSorted() === "desc" && /* @__PURE__ */ jsx18(ChevronDown, { className: "w-4 h-4 text-light" })
+            ] })
+          ]
+        }
+      ) }, header.id)) }, headerGroup.id)) }),
+      /* @__PURE__ */ jsx18("tbody", { className: "bg-light divide-y divide-border", children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx18("tr", { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx18("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsx18(Typography, { variant: "body-sm", children: flexRender(
+        cell.column.columnDef.cell,
+        cell.getContext()
+      ) }) }, cell.id)) }, row.id)) })
+    ] }) }),
+    showPagination && /* @__PURE__ */ jsxs14(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-between px-6 py-3 bg-light border-t border-subtle",
+          paginationClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsx18("div", { className: "flex items-center", children: /* @__PURE__ */ jsx18(Typography, { variant: "body-sm", className: "text-secondary", children: showingText }) }),
+          /* @__PURE__ */ jsxs14("div", { className: "flex items-center space-x-1", children: [
+            /* @__PURE__ */ jsx18(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                onClick: handlePreviousPage,
+                disabled: !table.getCanPreviousPage(),
+                className: "p-2",
+                children: /* @__PURE__ */ jsx18(ChevronLeft, { className: "w-4 h-4" })
+              }
+            ),
+            Array.from(
+              { length: Math.min(5, table.getPageCount()) },
+              (_, i) => {
+                let pageNumber;
+                if (totalPages <= 5) {
+                  pageNumber = i;
+                } else if (currentPage <= 2) {
+                  pageNumber = i;
+                } else if (currentPage >= totalPages - 3) {
+                  pageNumber = totalPages - 5 + i;
+                } else {
+                  pageNumber = currentPage - 2 + i;
+                }
+                const isActive = pageNumber === currentPage;
+                return /* @__PURE__ */ jsx18(
+                  Button,
+                  {
+                    variant: isActive ? "default" : "ghost",
+                    size: "sm",
+                    onClick: () => handlePageChange(pageNumber),
+                    className: "min-w-8 h-8 p-0",
+                    children: pageNumber + 1
+                  },
+                  pageNumber
+                );
+              }
+            ),
+            table.getPageCount() > 5 && currentPage < totalPages - 3 && /* @__PURE__ */ jsxs14(Fragment2, { children: [
+              /* @__PURE__ */ jsx18("span", { className: "px-1 text-secondary", children: "..." }),
+              /* @__PURE__ */ jsx18(Typography, { variant: "body-sm", className: "text-secondary", children: totalPages })
+            ] }),
+            /* @__PURE__ */ jsx18(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                onClick: handleNextPage,
+                disabled: !table.getCanNextPage(),
+                className: "p-2",
+                children: /* @__PURE__ */ jsx18(ChevronRight, { className: "w-4 h-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-3 w-48", children: [
+            /* @__PURE__ */ jsx18(
+              Typography,
+              {
+                variant: "body-sm",
+                className: "text-secondary whitespace-nowrap",
+                children: "Rows per page:"
+              }
+            ),
+            /* @__PURE__ */ jsxs14(
+              Select,
+              {
+                value: table.getState().pagination.pageSize.toString(),
+                onValueChange: handlePageSizeChange,
+                children: [
+                  /* @__PURE__ */ jsx18(SelectTrigger, { className: "min-w-0 h-8", children: /* @__PURE__ */ jsx18(SelectValue, {}) }),
+                  /* @__PURE__ */ jsx18(SelectContent, { children: [10, 20, 50, 100].map((size) => /* @__PURE__ */ jsx18(SelectItem, { value: size.toString(), children: size }, size)) })
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
 export {
   ArrowDown,
   ArrowLeft,
   ArrowRight,
   ArrowUp,
   Badge,
+  BarChart,
   Bell,
   Bookmark,
   Button,
+  CHART_COLORS,
+  CHART_CONSTANTS,
+  COLOR_SCHEMES,
   Calendar,
   CaretDown,
   CaretLeft,
   CaretRight,
   CaretUp,
+  ChartLegend,
   Chat,
   Check,
   CheckIcon,
@@ -3072,6 +3880,7 @@ export {
   Filter,
   FilterDescending,
   FormField,
+  GenericTooltip,
   GraphBar,
   GraphDonut,
   GraphLine,
@@ -3080,6 +3889,7 @@ export {
   Home,
   Information,
   TypedInput as Input,
+  LineChart,
   Location,
   Lock,
   Logout,
@@ -3087,6 +3897,7 @@ export {
   Minus,
   MoreMenu,
   Phone,
+  PieChart,
   Plus,
   QuestionCircle,
   Select,
@@ -3103,10 +3914,13 @@ export {
   Star,
   Statement,
   Table,
+  TableIcon,
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
+  TooltipContainer,
+  TooltipItem,
   Trash,
   Typography,
   Upload,
@@ -3117,7 +3931,20 @@ export {
   X,
   badgeVariants,
   buttonVariants,
+  calculateYAxisWidth,
   checkboxVariants,
+  createCustomXAxisLabel,
+  createCustomYAxisLabel,
+  createCustomYAxisRightLabel,
+  createLegendItems,
+  customXAxisTick,
+  customXAxisTickRotated,
+  customYAxisTick,
+  formatLargeNumber,
+  formatPercentage,
+  getHeatmapColor,
+  getPerformanceColor,
+  getSeriesColor,
   inputVariants,
   selectTriggerVariants,
   tabsVariants,