@expcat/tigercat-react 0.1.8 → 0.2.0

package/dist/{chunk-TBIEWDY5.js → chunk-36RRHNZD.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkNEULKOYJ_js = require('./chunk-NEULKOYJ.js');
+var chunkZYPEO2KY_js = require('./chunk-ZYPEO2KY.js');
 var React = require('react');
 var reactDom = require('react-dom');
 var tigercatCore = require('@expcat/tigercat-core');
@@ -91,7 +91,17 @@ var Modal = ({
     if (visible) return;
     tigercatCore.restoreFocus(previousActiveElementRef.current);
   }, [visible]);
-  chunkNEULKOYJ_js.useEscapeKey({ enabled: visible, onEscape: handleClose });
+  chunkZYPEO2KY_js.useEscapeKey({ enabled: visible, onEscape: handleClose });
+  const handleKeyDown = React.useCallback((event) => {
+    if (event.key === "Tab" && dialogRef.current) {
+      const focusables = tigercatCore.getFocusableElements(dialogRef.current);
+      const result = tigercatCore.getFocusTrapNavigation(event.nativeEvent, focusables, document.activeElement);
+      if (result.shouldHandle && result.next) {
+        event.preventDefault();
+        result.next.focus();
+      }
+    }
+  }, []);
   const CloseIcon = /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
@@ -145,6 +155,7 @@ var Modal = ({
             "aria-labelledby": ariaLabelledby,
             tabIndex: -1,
             ref: dialogRef,
+            onKeyDown: handleKeyDown,
             "data-tiger-modal": "",
             children: [
               (title || titleContent || closable) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.modalHeaderClasses, children: [

package/dist/chunk-3CDAG4HD.mjs

@@ -0,0 +1,151 @@
+import { useState, useMemo, useCallback } from 'react';
+import { getChartElementOpacity, classNames } from '@expcat/tigercat-core';
+
+// src/hooks/useChartInteraction.ts
+function useChartInteraction(options) {
+  const {
+    hoverable,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    legendPosition = "bottom",
+    onHoveredIndexChange,
+    onSelectedIndexChange,
+    getData,
+    callbacks
+  } = options;
+  const [localHoveredIndex, setLocalHoveredIndex] = useState(null);
+  const [localSelectedIndex, setLocalSelectedIndex] = useState(null);
+  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+  const resolvedHoveredIndex = hoveredIndexProp !== void 0 ? hoveredIndexProp : localHoveredIndex;
+  const resolvedSelectedIndex = selectedIndexProp !== void 0 ? selectedIndexProp : localSelectedIndex;
+  const activeIndex = useMemo(() => {
+    if (resolvedSelectedIndex !== null) return resolvedSelectedIndex;
+    if (hoverable && resolvedHoveredIndex !== null) return resolvedHoveredIndex;
+    return null;
+  }, [resolvedSelectedIndex, hoverable, resolvedHoveredIndex]);
+  const getElementOpacity = useCallback(
+    (index) => {
+      return getChartElementOpacity(index, activeIndex, {
+        activeOpacity,
+        inactiveOpacity
+      });
+    },
+    [activeIndex, activeOpacity, inactiveOpacity]
+  );
+  const handleMouseEnter = useCallback(
+    (index, event) => {
+      if (!hoverable) return;
+      if (hoveredIndexProp === void 0) {
+        setLocalHoveredIndex(index);
+      }
+      setTooltipPosition({ x: event.clientX, y: event.clientY });
+      onHoveredIndexChange?.(index);
+      if (callbacks?.onHover && getData) {
+        callbacks.onHover(index, getData(index) ?? null);
+      }
+    },
+    [hoverable, hoveredIndexProp, onHoveredIndexChange, callbacks, getData]
+  );
+  const handleMouseMove = useCallback((event) => {
+    setTooltipPosition({ x: event.clientX, y: event.clientY });
+  }, []);
+  const handleMouseLeave = useCallback(() => {
+    if (!hoverable) return;
+    if (hoveredIndexProp === void 0) {
+      setLocalHoveredIndex(null);
+    }
+    onHoveredIndexChange?.(null);
+    callbacks?.onHover?.(null, null);
+  }, [hoverable, hoveredIndexProp, onHoveredIndexChange, callbacks]);
+  const handleClick = useCallback(
+    (index) => {
+      if (!selectable) return;
+      const nextIndex = resolvedSelectedIndex === index ? null : index;
+      if (selectedIndexProp === void 0) {
+        setLocalSelectedIndex(nextIndex);
+      }
+      onSelectedIndexChange?.(nextIndex);
+      if (callbacks?.onClick && getData) {
+        const datum = getData(index);
+        if (datum) callbacks.onClick(index, datum);
+      }
+    },
+    [
+      selectable,
+      resolvedSelectedIndex,
+      selectedIndexProp,
+      onSelectedIndexChange,
+      callbacks,
+      getData
+    ]
+  );
+  const handleKeyDown = useCallback(
+    (event, index) => {
+      if (!selectable) return;
+      if (event.key !== "Enter" && event.key !== " ") return;
+      event.preventDefault();
+      handleClick(index);
+    },
+    [selectable, handleClick]
+  );
+  const handleLegendClick = useCallback(
+    (index) => {
+      handleClick(index);
+    },
+    [handleClick]
+  );
+  const handleLegendHover = useCallback(
+    (index) => {
+      if (!hoverable) return;
+      if (hoveredIndexProp === void 0) {
+        setLocalHoveredIndex(index);
+      }
+      onHoveredIndexChange?.(index);
+    },
+    [hoverable, hoveredIndexProp, onHoveredIndexChange]
+  );
+  const handleLegendLeave = useCallback(() => {
+    handleMouseLeave();
+  }, [handleMouseLeave]);
+  const wrapperClasses = useMemo(() => {
+    return classNames(
+      "inline-flex",
+      legendPosition === "right" ? "flex-row items-start gap-4" : legendPosition === "left" ? "flex-row-reverse items-start gap-4" : legendPosition === "top" ? "flex-col-reverse gap-2" : "flex-col gap-2"
+    );
+  }, [legendPosition]);
+  const createLegendItems = useCallback(
+    (items, palette, labelFormatter) => {
+      return items.map((item, index) => ({
+        index,
+        label: labelFormatter ? labelFormatter(item, index) : item.label ?? String(item.x ?? index),
+        color: item.color ?? palette[index % palette.length],
+        active: activeIndex === null || activeIndex === index
+      }));
+    },
+    [activeIndex]
+  );
+  return {
+    localHoveredIndex,
+    localSelectedIndex,
+    tooltipPosition,
+    resolvedHoveredIndex,
+    resolvedSelectedIndex,
+    activeIndex,
+    getElementOpacity,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick,
+    handleKeyDown,
+    handleLegendClick,
+    handleLegendHover,
+    handleLegendLeave,
+    wrapperClasses,
+    createLegendItems
+  };
+}
+
+export { useChartInteraction };

package/dist/chunk-3QFHVAZT.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/ChartGrid.tsx
+var ChartGrid = ({
+  xScale,
+  yScale,
+  show = "both",
+  xTicks = 5,
+  yTicks = 5,
+  xTickValues,
+  yTickValues,
+  lineStyle = "solid",
+  strokeWidth = 1,
+  x = 0,
+  y = 0,
+  className,
+  ...props
+}) => {
+  const dasharray = react.useMemo(() => tigercatCore.getChartGridLineDasharray(lineStyle), [lineStyle]);
+  const resolvedXTicks = react.useMemo(() => {
+    if (!xScale) return [];
+    return tigercatCore.getChartAxisTicks(xScale, { tickCount: xTicks, tickValues: xTickValues });
+  }, [xScale, xTicks, xTickValues]);
+  const resolvedYTicks = react.useMemo(() => {
+    if (!yScale) return [];
+    return tigercatCore.getChartAxisTicks(yScale, { tickCount: yTicks, tickValues: yTickValues });
+  }, [yScale, yTicks, yTickValues]);
+  const shouldRenderX = show === "both" || show === "x";
+  const shouldRenderY = show === "both" || show === "y";
+  const xRange = xScale?.range;
+  const yRange = yScale?.range;
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { ...props, className: tigercatCore.classNames(className), transform: `translate(${x}, ${y})`, children: [
+    shouldRenderX && xScale && yRange ? resolvedXTicks.map((tick) => /* @__PURE__ */ jsxRuntime.jsx(
+      "line",
+      {
+        x1: tick.position,
+        y1: yRange[0],
+        x2: tick.position,
+        y2: yRange[1],
+        className: tigercatCore.chartGridLineClasses,
+        strokeWidth,
+        strokeDasharray: dasharray
+      },
+      `x-${tick.value}`
+    )) : null,
+    shouldRenderY && yScale && xRange ? resolvedYTicks.map((tick) => /* @__PURE__ */ jsxRuntime.jsx(
+      "line",
+      {
+        x1: xRange[0],
+        y1: tick.position,
+        x2: xRange[1],
+        y2: tick.position,
+        className: tigercatCore.chartGridLineClasses,
+        strokeWidth,
+        strokeDasharray: dasharray
+      },
+      `y-${tick.value}`
+    )) : null
+  ] });
+};
+var ChartGrid_default = ChartGrid;
+
+exports.ChartGrid = ChartGrid;
+exports.ChartGrid_default = ChartGrid_default;

package/dist/{chunk-ALP3KYYY.mjs → chunk-3XKBDV2Q.mjs}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { classNames, iconWrapperClasses, iconSvgBaseClasses, iconSizeClasses } from '@expcat/tigercat-core';
+import { classNames, iconWrapperClasses, SVG_DEFAULT_STROKE, SVG_DEFAULT_FILL, SVG_DEFAULT_VIEWBOX_24, SVG_DEFAULT_XMLNS, iconSvgBaseClasses, iconSizeClasses } from '@expcat/tigercat-core';
 import { jsx } from 'react/jsx-runtime';
 
 // src/components/Icon.tsx
@@ -23,10 +23,10 @@ var Icon = ({
     return React.cloneElement(child, {
       ...svgProps,
       className: classNames(iconSvgBaseClasses, iconSizeClasses[size], svgProps.className),
-      xmlns: svgProps.xmlns ?? "http://www.w3.org/2000/svg",
-      viewBox: svgProps.viewBox ?? "0 0 24 24",
-      fill: svgProps.fill ?? "none",
-      stroke: svgProps.stroke ?? "currentColor",
+      xmlns: svgProps.xmlns ?? SVG_DEFAULT_XMLNS,
+      viewBox: svgProps.viewBox ?? SVG_DEFAULT_VIEWBOX_24,
+      fill: svgProps.fill ?? SVG_DEFAULT_FILL,
+      stroke: svgProps.stroke ?? SVG_DEFAULT_STROKE,
       strokeWidth: svgProps.strokeWidth ?? 2,
       strokeLinecap: svgProps.strokeLinecap ?? "round",
       strokeLinejoin: svgProps.strokeLinejoin ?? "round"

package/dist/chunk-42UKIFFQ.js

@@ -0,0 +1,278 @@
+'use strict';
+
+var chunkKQZ4F7FZ_js = require('./chunk-KQZ4F7FZ.js');
+var chunkE5GD3H7L_js = require('./chunk-E5GD3H7L.js');
+var chunkDUWAV47E_js = require('./chunk-DUWAV47E.js');
+var chunk3QFHVAZT_js = require('./chunk-3QFHVAZT.js');
+var chunk6PBNFLM7_js = require('./chunk-6PBNFLM7.js');
+var chunkAX5XRD2Q_js = require('./chunk-AX5XRD2Q.js');
+var chunkM375I56K_js = require('./chunk-M375I56K.js');
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+var ScatterChart = ({
+  width = 320,
+  height = 200,
+  padding = 24,
+  data,
+  xScale,
+  yScale,
+  pointSize = 4,
+  pointColor = "var(--tiger-primary,#2563eb)",
+  pointOpacity,
+  showGrid = true,
+  showAxis = true,
+  showXAxis = true,
+  showYAxis = true,
+  includeZero = false,
+  xAxisLabel,
+  yAxisLabel,
+  xTicks = 5,
+  yTicks = 5,
+  xTickValues,
+  yTickValues,
+  xTickFormat,
+  yTickFormat,
+  gridLineStyle = "solid",
+  gridStrokeWidth = 1,
+  // Interaction props
+  hoverable = false,
+  hoveredIndex: hoveredIndexProp,
+  onHoveredIndexChange,
+  activeOpacity = 1,
+  inactiveOpacity = 0.25,
+  selectable = false,
+  selectedIndex: selectedIndexProp,
+  onSelectedIndexChange,
+  onPointClick,
+  onPointHover,
+  // Legend props
+  showLegend = false,
+  legendPosition = "bottom",
+  legendMarkerSize = 10,
+  legendGap = 8,
+  legendFormatter,
+  // Tooltip props
+  showTooltip = true,
+  tooltipFormatter,
+  // Other
+  colors,
+  title,
+  desc,
+  className
+}) => {
+  const {
+    tooltipPosition,
+    resolvedHoveredIndex,
+    activeIndex,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick,
+    handleKeyDown,
+    handleLegendClick,
+    handleLegendHover,
+    handleLegendLeave,
+    wrapperClasses
+  } = chunkKQZ4F7FZ_js.useChartInteraction({
+    hoverable,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    legendPosition,
+    getData: (index) => data[index],
+    onHoveredIndexChange: (index) => {
+      onHoveredIndexChange?.(index);
+      onPointHover?.(index, index !== null ? data[index] : null);
+    },
+    onSelectedIndexChange,
+    callbacks: {
+      onClick: onPointClick
+    }
+  });
+  const innerRect = react.useMemo(
+    () => tigercatCore.getChartInnerRect(width, height, padding),
+    [width, height, padding]
+  );
+  const xValues = react.useMemo(() => data.map((item) => item.x), [data]);
+  const yValues = react.useMemo(() => data.map((item) => item.y), [data]);
+  const resolvedXScale = react.useMemo(() => {
+    if (xScale) return xScale;
+    const extent = tigercatCore.getNumberExtent(xValues, { includeZero });
+    return tigercatCore.createLinearScale(extent, [0, innerRect.width]);
+  }, [xScale, xValues, includeZero, innerRect.width]);
+  const resolvedYScale = react.useMemo(() => {
+    if (yScale) return yScale;
+    const extent = tigercatCore.getNumberExtent(yValues, { includeZero });
+    return tigercatCore.createLinearScale(extent, [innerRect.height, 0]);
+  }, [yScale, yValues, includeZero, innerRect.height]);
+  const palette = react.useMemo(
+    () => colors && colors.length > 0 ? colors : pointColor ? [pointColor] : [...tigercatCore.DEFAULT_CHART_COLORS],
+    [colors, pointColor]
+  );
+  const points = react.useMemo(
+    () => data.map((item, index) => {
+      const color = item.color ?? palette[index % palette.length];
+      const opacity = tigercatCore.getChartElementOpacity(index, activeIndex, {
+        activeOpacity,
+        inactiveOpacity
+      });
+      return {
+        cx: resolvedXScale.map(item.x),
+        cy: resolvedYScale.map(item.y),
+        r: item.size ?? pointSize,
+        color,
+        opacity: pointOpacity ?? opacity,
+        datum: item
+      };
+    }),
+    [
+      data,
+      palette,
+      activeIndex,
+      activeOpacity,
+      inactiveOpacity,
+      resolvedXScale,
+      resolvedYScale,
+      pointSize,
+      pointOpacity
+    ]
+  );
+  const legendItems = react.useMemo(
+    () => data.map((item, index) => ({
+      index,
+      label: legendFormatter ? legendFormatter(item, index) : item.label ?? `(${item.x}, ${item.y})`,
+      color: item.color ?? palette[index % palette.length],
+      active: activeIndex === null || activeIndex === index
+    })),
+    [data, legendFormatter, palette, activeIndex]
+  );
+  const formatTooltip = react.useCallback(
+    (datum, index) => {
+      if (tooltipFormatter) return tooltipFormatter(datum, index);
+      const label = datum.label ?? `Point ${index + 1}`;
+      return `${label}: (${datum.x}, ${datum.y})`;
+    },
+    [tooltipFormatter]
+  );
+  const tooltipContent = react.useMemo(() => {
+    if (resolvedHoveredIndex === null) return "";
+    const datum = data[resolvedHoveredIndex];
+    return datum ? formatTooltip(datum, resolvedHoveredIndex) : "";
+  }, [resolvedHoveredIndex, data, formatTooltip]);
+  const shouldShowXAxis = showAxis && showXAxis;
+  const shouldShowYAxis = showAxis && showYAxis;
+  const chart = /* @__PURE__ */ jsxRuntime.jsxs(
+    chunkDUWAV47E_js.ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title,
+      desc,
+      className: tigercatCore.classNames(className),
+      children: [
+        showGrid && /* @__PURE__ */ jsxRuntime.jsx(
+          chunk3QFHVAZT_js.ChartGrid,
+          {
+            xScale: resolvedXScale,
+            yScale: resolvedYScale,
+            show: "both",
+            xTicks,
+            yTicks,
+            xTickValues,
+            yTickValues,
+            lineStyle: gridLineStyle,
+            strokeWidth: gridStrokeWidth
+          }
+        ),
+        shouldShowXAxis && /* @__PURE__ */ jsxRuntime.jsx(
+          chunkE5GD3H7L_js.ChartAxis,
+          {
+            scale: resolvedXScale,
+            orientation: "bottom",
+            y: innerRect.height,
+            ticks: xTicks,
+            tickValues: xTickValues,
+            tickFormat: xTickFormat,
+            label: xAxisLabel
+          }
+        ),
+        shouldShowYAxis && /* @__PURE__ */ jsxRuntime.jsx(
+          chunkE5GD3H7L_js.ChartAxis,
+          {
+            scale: resolvedYScale,
+            orientation: "left",
+            ticks: yTicks,
+            tickValues: yTickValues,
+            tickFormat: yTickFormat,
+            label: yAxisLabel
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkAX5XRD2Q_js.ChartSeries, { data, type: "scatter", children: points.map((point, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            cx: point.cx,
+            cy: point.cy,
+            r: point.r,
+            fill: point.color,
+            opacity: point.opacity,
+            className: tigercatCore.classNames(
+              "transition-opacity duration-150",
+              (hoverable || selectable) && "cursor-pointer"
+            ),
+            tabIndex: selectable ? 0 : void 0,
+            role: selectable ? "button" : "img",
+            "aria-label": point.datum.label ?? `Point ${index + 1}: (${point.datum.x}, ${point.datum.y})`,
+            "data-point-index": index,
+            onMouseEnter: (e) => handleMouseEnter(index, e),
+            onMouseMove: handleMouseMove,
+            onMouseLeave: handleMouseLeave,
+            onClick: () => handleClick(index),
+            onKeyDown: (e) => handleKeyDown(e, index)
+          },
+          `point-${index}`
+        )) })
+      ]
+    }
+  );
+  const tooltip = showTooltip && hoverable && /* @__PURE__ */ jsxRuntime.jsx(
+    chunkM375I56K_js.ChartTooltip,
+    {
+      content: tooltipContent,
+      visible: resolvedHoveredIndex !== null && tooltipContent !== "",
+      x: tooltipPosition.x,
+      y: tooltipPosition.y
+    }
+  );
+  if (!showLegend) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-block relative", children: [
+      chart,
+      tooltip
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, children: [
+    chart,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      chunk6PBNFLM7_js.ChartLegend,
+      {
+        items: legendItems,
+        position: legendPosition,
+        markerSize: legendMarkerSize,
+        gap: legendGap,
+        interactive: hoverable || selectable,
+        onItemClick: handleLegendClick,
+        onItemHover: handleLegendHover,
+        onItemLeave: handleLegendLeave
+      }
+    ),
+    tooltip
+  ] });
+};
+var ScatterChart_default = ScatterChart;
+
+exports.ScatterChart = ScatterChart;
+exports.ScatterChart_default = ScatterChart_default;

package/dist/{chunk-K7ZMB2TH.mjs → chunk-5XKYWZZZ.mjs}

@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo, useCallback } from 'react';
-import { getSpinnerSVG, getFixedColumnOffsets, filterData, sortData, paginateData, getRowKey, calculatePagination, getTableHeaderClasses, getCheckboxCellClasses, classNames, getTableHeaderCellClasses, tableEmptyStateClasses, getTableCellClasses, getTableRowClasses, tablePaginationContainerClasses, getTableWrapperClasses, tableBaseClasses, tableLoadingOverlayClasses, getSortIconClasses, getLoadingOverlaySpinnerClasses } from '@expcat/tigercat-core';
+import { getSpinnerSVG, getFixedColumnOffsets, filterData, sortData, paginateData, getRowKey, calculatePagination, getTableHeaderClasses, getCheckboxCellClasses, classNames, getTableHeaderCellClasses, tableEmptyStateClasses, getTableCellClasses, getTableRowClasses, getSimplePaginationContainerClasses, getSimplePaginationTotalClasses, getSimplePaginationControlsClasses, getSimplePaginationSelectClasses, getSimplePaginationButtonsWrapperClasses, getSimplePaginationButtonClasses, getSimplePaginationPageIndicatorClasses, getTableWrapperClasses, tableBaseClasses, tableLoadingOverlayClasses, icon24ViewBox, lockClosedIcon24PathD, lockOpenIcon24PathD, icon16ViewBox, getSortIconClasses, sortAscIcon16PathD, sortDescIcon16PathD, sortBothIcon16PathD, getLoadingOverlaySpinnerClasses } from '@expcat/tigercat-core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/components/Table.tsx
@@ -12,9 +12,9 @@ var SortIcon = ({ direction }) => {
         className: getSortIconClasses(true),
         width: "16",
         height: "16",
-        viewBox: "0 0 16 16",
+        viewBox: icon16ViewBox,
         fill: "currentColor",
-        children: /* @__PURE__ */ jsx("path", { d: "M8 3l4 4H4l4-4z" })
+        children: /* @__PURE__ */ jsx("path", { d: sortAscIcon16PathD })
       }
     );
   }
@@ -25,9 +25,9 @@ var SortIcon = ({ direction }) => {
         className: getSortIconClasses(true),
         width: "16",
         height: "16",
-        viewBox: "0 0 16 16",
+        viewBox: icon16ViewBox,
         fill: "currentColor",
-        children: /* @__PURE__ */ jsx("path", { d: "M8 13l-4-4h8l-4 4z" })
+        children: /* @__PURE__ */ jsx("path", { d: sortDescIcon16PathD })
       }
     );
   }
@@ -37,14 +37,14 @@ var SortIcon = ({ direction }) => {
       className: getSortIconClasses(false),
       width: "16",
       height: "16",
-      viewBox: "0 0 16 16",
+      viewBox: icon16ViewBox,
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx("path", { d: "M8 3l4 4H4l4-4zM8 13l-4-4h8l-4 4z" })
+      children: /* @__PURE__ */ jsx("path", { d: sortBothIcon16PathD })
     }
   );
 };
 var LockIcon = ({ locked }) => {
-  return /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: locked ? /* @__PURE__ */ jsx("path", { d: "M17 8h-1V6a4 4 0 10-8 0v2H7a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V10a2 2 0 00-2-2zm-7-2a2 2 0 114 0v2h-4V6z" }) : /* @__PURE__ */ jsx("path", { d: "M17 8h-1V6a4 4 0 00-7.75-1.41 1 1 0 101.9.62A2 2 0 0114 6v2H7a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V10a2 2 0 00-2-2zm0 12H7V10h10v10z" }) });
+  return /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: icon24ViewBox, fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: locked ? lockClosedIcon24PathD : lockOpenIcon24PathD }) });
 };
 var LoadingSpinner = () => /* @__PURE__ */ jsx(
   "svg",
@@ -586,13 +586,13 @@ function Table({
     const { totalPages, startIndex, endIndex, hasNext, hasPrev } = paginationInfo;
     const total = processedData.length;
     const paginationConfig2 = pagination;
-    return /* @__PURE__ */ jsxs("div", { className: tablePaginationContainerClasses, children: [
-      paginationConfig2.showTotal !== false && /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-700", children: paginationConfig2.totalText ? paginationConfig2.totalText(total, [startIndex, endIndex]) : `Showing ${startIndex} to ${endIndex} of ${total} results` }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    return /* @__PURE__ */ jsxs("div", { className: getSimplePaginationContainerClasses(), children: [
+      paginationConfig2.showTotal !== false && /* @__PURE__ */ jsx("div", { className: getSimplePaginationTotalClasses(), children: paginationConfig2.totalText ? paginationConfig2.totalText(total, [startIndex, endIndex]) : `Showing ${startIndex} to ${endIndex} of ${total} results` }),
+      /* @__PURE__ */ jsxs("div", { className: getSimplePaginationControlsClasses(), children: [
         paginationConfig2.showSizeChanger !== false && /* @__PURE__ */ jsx(
           "select",
           {
-            className: "px-3 py-1 border border-gray-300 rounded text-sm",
+            className: getSimplePaginationSelectClasses(),
             value: currentPageSize,
             onChange: (e) => handlePageSizeChange(Number(e.target.value)),
             children: (paginationConfig2.pageSizeOptions || [10, 20, 50, 100]).map((size2) => /* @__PURE__ */ jsxs("option", { value: size2, children: [
@@ -601,20 +601,17 @@ function Table({
             ] }, size2))
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: getSimplePaginationButtonsWrapperClasses(), children: [
           /* @__PURE__ */ jsx(
             "button",
             {
-              className: classNames(
-                "px-3 py-1 border border-gray-300 rounded text-sm",
-                hasPrev ? "hover:bg-gray-50 text-gray-700" : "text-gray-400 cursor-not-allowed"
-              ),
+              className: getSimplePaginationButtonClasses(!hasPrev),
               disabled: !hasPrev,
               onClick: () => handlePageChange(currentPage - 1),
               children: "Previous"
             }
           ),
-          /* @__PURE__ */ jsxs("span", { className: "px-3 py-1 text-sm text-gray-700", children: [
+          /* @__PURE__ */ jsxs("span", { className: getSimplePaginationPageIndicatorClasses(), children: [
             "Page ",
             currentPage,
             " of ",
@@ -623,10 +620,7 @@ function Table({
           /* @__PURE__ */ jsx(
             "button",
             {
-              className: classNames(
-                "px-3 py-1 border border-gray-300 rounded text-sm",
-                hasNext ? "hover:bg-gray-50 text-gray-700" : "text-gray-400 cursor-not-allowed"
-              ),
+              className: getSimplePaginationButtonClasses(!hasNext),
               disabled: !hasNext,
               onClick: () => handlePageChange(currentPage + 1),
               children: "Next"