@rttui/skin-anocca 1.0.2 → 1.0.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @rttui/skin-anocca
 
+## 1.0.4
+
+### Patch Changes
+
+- new build method
+- Updated dependencies
+  - @rttui/core@1.0.4
+
+## 1.0.3
+
+### Patch Changes
+
+- 51c73d3: build with bun build instead
+- Updated dependencies [51c73d3]
+  - @rttui/core@1.0.3
+
 ## 1.0.2
 
 ### Patch Changes

package/dist/cjs/index.cjs

@@ -0,0 +1,314 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __moduleCache = /* @__PURE__ */ new WeakMap;
+var __toCommonJS = (from) => {
+  var entry = __moduleCache.get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function")
+    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    }));
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+
+// packages/skin-anocca/src/index.tsx
+var exports_src = {};
+__export(exports_src, {
+  AnoccaSkin: () => AnoccaSkin
+});
+module.exports = __toCommonJS(exports_src);
+var import_material = require("@mui/material");
+var import_core = require("@rttui/core");
+var import_react = __toESM(require("react"));
+var import_react_table = require("@tanstack/react-table");
+var jsx_dev_runtime = require("react/jsx-dev-runtime");
+var AnoccaSkin = {
+  rowHeight: 32,
+  headerRowHeight: 32,
+  footerRowHeight: 32,
+  OuterContainer: ({ children }) => {
+    const { width, height, tableContainerRef } = import_core.useTableContext();
+    const cssVars = import_core.useTableCssVars();
+    return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(import_material.Paper, {
+      ref: tableContainerRef,
+      className: "outer-container",
+      elevation: 2,
+      sx: {
+        overflow: "auto",
+        width: width + "px",
+        height: height + "px",
+        position: "relative",
+        contain: "paint",
+        willChange: "transform",
+        borderRadius: 1,
+        ...cssVars
+      },
+      children
+    }, undefined, false, undefined, this);
+  },
+  TableScroller: () => {
+    return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+      className: "table-scroller",
+      style: {
+        width: "var(--table-width)",
+        height: "calc(var(--table-height) + var(--header-height) + var(--footer-height))",
+        position: "absolute"
+      }
+    }, undefined, false, undefined, this);
+  },
+  TableHeader: ({ children }) => {
+    return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(import_material.TableHead, {
+      component: "div",
+      className: "thead",
+      sx: {
+        position: "sticky",
+        top: 0,
+        width: "var(--table-width)",
+        zIndex: 2,
+        backgroundColor: (theme) => theme.palette.background.paper,
+        boxShadow: (theme) => `0 1px 0 ${theme.palette.divider}`
+      },
+      children
+    }, undefined, false, undefined, this);
+  },
+  TableFooter: ({ children }) => {
+    return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(import_material.TableFooter, {
+      component: "div",
+      className: "table-footer",
+      sx: {
+        position: "sticky",
+        bottom: -1,
+        width: "var(--table-width)",
+        zIndex: 2,
+        backgroundColor: (theme) => theme.palette.background.paper,
+        boxShadow: (theme) => `0 -1px 0 ${theme.palette.divider}`
+      },
+      children
+    }, undefined, false, undefined, this);
+  },
+  HeaderRow: TableHeaderRow,
+  HeaderCell: (props) => {
+    return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(TableHeaderCell, {
+      ...props
+    }, undefined, false, undefined, this);
+  },
+  TableBody: ({ children }) => {
+    return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(import_material.TableBody, {
+      component: "div",
+      className: "table-body",
+      sx: { position: "relative", width: "var(--table-width)" },
+      children
+    }, undefined, false, undefined, this);
+  },
+  PinnedRows: ({ children, position, pinned }) => {
+    if (pinned.length === 0) {
+      return null;
+    }
+    const style = {
+      position: "sticky",
+      zIndex: 3
+    };
+    if (position === "top") {
+      style.top = "var(--header-height)";
+      style.borderBottom = (theme) => `1px solid ${theme.palette.divider}`;
+      style.boxShadow = "0 4px 8px -4px rgba(0, 0, 0, 0.15), 0 6px 12px -6px rgba(0, 0, 0, 0.1)";
+    } else if (position === "bottom") {
+      style.bottom = "var(--footer-height)";
+      style.borderTop = (theme) => `1px solid ${theme.palette.divider}`;
+      style.boxShadow = "0 -4px 8px -4px rgba(0, 0, 0, 0.15), 0 -6px 12px -6px rgba(0, 0, 0, 0.1)";
+    }
+    const Component = position === "top" ? import_material.TableHead : import_material.TableFooter;
+    return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Component, {
+      component: "div",
+      className: `sticky-${position}-rows`,
+      sx: style,
+      children
+    }, undefined, false, undefined, this);
+  },
+  PinnedCols: ({ children, position, pinned }) => {
+    if (pinned.length === 0) {
+      return null;
+    }
+    const style = {
+      position: "sticky",
+      zIndex: 3,
+      display: "flex"
+    };
+    if (position === "left") {
+      style.left = 0;
+      style.boxShadow = "4px 0 8px -4px rgba(0, 0, 0, 0.15), 6px 0 12px -6px rgba(0, 0, 0, 0.1)";
+    } else if (position === "right") {
+      style.right = 0;
+      style.borderLeft = (theme) => `1px solid ${theme.palette.divider}`;
+      style.boxShadow = "-4px 0 8px -4px rgba(0, 0, 0, 0.15), -6px 0 12px -6px rgba(0, 0, 0, 0.1)";
+    }
+    return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(import_material.Box, {
+      component: "div",
+      className: `sticky-${position}-cols`,
+      sx: style,
+      children
+    }, undefined, false, undefined, this);
+  },
+  TableRowWrapper: import_react.default.forwardRef(({ children, flatIndex, dndStyle }, ref) => {
+    const theme = import_material.useTheme();
+    const backgroundColor = (theme2) => {
+      const baseColor = flatIndex % 2 === 0 ? theme2.palette.background.paper : theme2.palette.mode === "dark" ? theme2.palette.grey[900] : theme2.palette.grey[100];
+      return baseColor;
+    };
+    const vars = {
+      "--row-background-color": backgroundColor(theme)
+    };
+    return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(import_material.Box, {
+      sx: {
+        ...dndStyle,
+        ...vars
+      },
+      "data-index": flatIndex,
+      ref,
+      children
+    }, undefined, false, undefined, this);
+  }),
+  TableRow: ({ children }) => {
+    return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(import_material.TableRow, {
+      component: "div",
+      className: "table-row",
+      sx: {
+        position: "relative",
+        width: "var(--table-width)",
+        display: "flex",
+        height: "var(--row-height)",
+        zIndex: 1,
+        boxSizing: "border-box",
+        backgroundColor: "var(--row-background-color)"
+      },
+      children
+    }, undefined, false, undefined, this);
+  },
+  TableRowExpandedContent: ({ children }) => {
+    const { table } = import_core.useTableContext();
+    return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(import_material.TableRow, {
+      component: "div",
+      className: "expanded-row",
+      sx: {
+        backgroundColor: (theme) => theme.palette.background.default
+      },
+      children: /* @__PURE__ */ jsx_dev_runtime.jsxDEV(import_material.TableCell, {
+        component: "div",
+        className: "expanded-cell",
+        colSpan: table.getAllLeafColumns().length,
+        sx: {
+          padding: 2
+        },
+        children
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  },
+  Cell: ({ children, header }) => {
+    const { isPinned } = header;
+    return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(import_material.TableCell, {
+      className: "td",
+      component: "div",
+      sx: {
+        height: "var(--row-height)",
+        width: header.width,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        zIndex: isPinned ? 5 : 0,
+        boxSizing: "border-box",
+        alignItems: "center",
+        gap: "8px",
+        display: "flex",
+        justifyContent: "flex-start",
+        alignContent: "center",
+        padding: "6px 12px",
+        backgroundColor: "var(--row-background-color)",
+        borderBottom: "none",
+        flexShrink: 0,
+        position: "relative",
+        borderRight: (theme) => `1px solid ${theme.palette.divider}`,
+        ".table-row:hover &": {
+          backgroundColor: (theme) => {
+            return theme.palette.mode === "dark" ? "#1e1e52" : "#E3F2FD";
+          },
+          zIndex: isPinned ? 2 : 0
+        }
+      },
+      children
+    }, undefined, false, undefined, this);
+  }
+};
+function TableHeaderCell({
+  headerId,
+  isPinned,
+  width,
+  header,
+  type
+}) {
+  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(import_material.TableCell, {
+    component: "div",
+    className: "th",
+    "data-header-id": headerId,
+    "data-is-pinned": isPinned,
+    sx: {
+      transition: "background-color 0.2s ease",
+      whiteSpace: "nowrap",
+      zIndex: isPinned ? 1 : 0,
+      display: "flex",
+      overflow: "hidden",
+      height: "var(--header-row-height)",
+      width,
+      position: "relative",
+      flexShrink: 0,
+      alignItems: "center",
+      gap: "8px",
+      justifyContent: "space-between",
+      padding: "6px 12px",
+      boxSizing: "border-box",
+      fontWeight: 600,
+      backgroundColor: isPinned ? (theme) => theme.palette.background.paper : "transparent",
+      borderRight: (theme) => `1px solid ${theme.palette.divider}`
+    },
+    children: /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+      style: { flex: 1, display: "flex", justifyContent: "flex-start" },
+      children: header && !header.isPlaceholder ? import_react_table.flexRender(header.column.columnDef[type], header.getContext()) : null
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function TableHeaderRow({ children }) {
+  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(import_material.TableRow, {
+    component: "div",
+    sx: { height: "var(--row-height)", display: "flex" },
+    children
+  }, undefined, false, undefined, this);
+}
+
+//# debugId=1B1A7D6C6A1CF7C164756E2164756E21

package/dist/cjs/index.cjs.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.tsx"],
+  "sourcesContent": [
+    "import {\n  Box,\n  Paper,\n  SxProps,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableRow,\n  Theme,\n  useTheme,\n} from \"@mui/material\";\nimport {\n  Skin,\n  useTableContext,\n  useTableCssVars,\n  VirtualHeader,\n} from \"@rttui/core\";\nimport React from \"react\";\nimport { flexRender } from \"@tanstack/react-table\";\n\nconst AnoccaSkin: Skin = {\n  rowHeight: 32,\n  headerRowHeight: 32,\n  footerRowHeight: 32,\n  OuterContainer: ({ children }) => {\n    const { width, height, tableContainerRef } = useTableContext();\n    const cssVars = useTableCssVars();\n\n    return (\n      <Paper\n        ref={tableContainerRef}\n        className=\"outer-container\"\n        elevation={2}\n        sx={{\n          overflow: \"auto\",\n          width: width + \"px\",\n          height: height + \"px\",\n          position: \"relative\",\n          contain: \"paint\",\n          willChange: \"transform\",\n          borderRadius: 1,\n          ...cssVars,\n        }}\n      >\n        {children}\n      </Paper>\n    );\n  },\n  TableScroller: () => {\n    return (\n      <div\n        className=\"table-scroller\"\n        style={{\n          width: \"var(--table-width)\",\n          height:\n            \"calc(var(--table-height) + var(--header-height) + var(--footer-height))\",\n          position: \"absolute\",\n        }}\n      ></div>\n    );\n  },\n  TableHeader: ({ children }) => {\n    return (\n      <TableHead\n        component=\"div\"\n        className=\"thead\"\n        sx={{\n          position: \"sticky\",\n          top: 0,\n          width: \"var(--table-width)\",\n          zIndex: 2,\n          backgroundColor: (theme) => theme.palette.background.paper,\n          boxShadow: (theme) => `0 1px 0 ${theme.palette.divider}`,\n        }}\n      >\n        {children}\n      </TableHead>\n    );\n  },\n  TableFooter: ({ children }) => {\n    return (\n      <TableFooter\n        component=\"div\"\n        className=\"table-footer\"\n        sx={{\n          position: \"sticky\",\n          bottom: -1,\n          width: \"var(--table-width)\",\n          zIndex: 2,\n          backgroundColor: (theme) => theme.palette.background.paper,\n          boxShadow: (theme) => `0 -1px 0 ${theme.palette.divider}`,\n        }}\n      >\n        {children}\n      </TableFooter>\n    );\n  },\n  HeaderRow: TableHeaderRow,\n  HeaderCell: (props) => {\n    return <TableHeaderCell {...props} />;\n  },\n  TableBody: ({ children }) => {\n    return (\n      <TableBody\n        component=\"div\"\n        className=\"table-body\"\n        sx={{ position: \"relative\", width: \"var(--table-width)\" }}\n      >\n        {children}\n      </TableBody>\n    );\n  },\n  PinnedRows: ({ children, position, pinned }) => {\n    if (pinned.length === 0) {\n      return null;\n    }\n\n    const style: SxProps<Theme> = {\n      position: \"sticky\",\n      zIndex: 3,\n    };\n    if (position === \"top\") {\n      style.top = \"var(--header-height)\";\n      style.borderBottom = (theme) => `1px solid ${theme.palette.divider}`;\n      style.boxShadow =\n        \"0 4px 8px -4px rgba(0, 0, 0, 0.15), 0 6px 12px -6px rgba(0, 0, 0, 0.1)\";\n    } else if (position === \"bottom\") {\n      style.bottom = \"var(--footer-height)\";\n      style.borderTop = (theme) => `1px solid ${theme.palette.divider}`;\n      style.boxShadow =\n        \"0 -4px 8px -4px rgba(0, 0, 0, 0.15), 0 -6px 12px -6px rgba(0, 0, 0, 0.1)\";\n    }\n\n    const Component = position === \"top\" ? TableHead : TableFooter;\n\n    return (\n      <Component\n        component=\"div\"\n        className={`sticky-${position}-rows`}\n        sx={style}\n      >\n        {children}\n      </Component>\n    );\n  },\n  PinnedCols: ({ children, position, pinned }) => {\n    if (pinned.length === 0) {\n      return null;\n    }\n\n    const style: SxProps<Theme> = {\n      position: \"sticky\",\n      zIndex: 3,\n      display: \"flex\",\n    };\n\n    if (position === \"left\") {\n      style.left = 0;\n      style.boxShadow =\n        \"4px 0 8px -4px rgba(0, 0, 0, 0.15), 6px 0 12px -6px rgba(0, 0, 0, 0.1)\";\n    } else if (position === \"right\") {\n      style.right = 0;\n      style.borderLeft = (theme) => `1px solid ${theme.palette.divider}`;\n      style.boxShadow =\n        \"-4px 0 8px -4px rgba(0, 0, 0, 0.15), -6px 0 12px -6px rgba(0, 0, 0, 0.1)\";\n    }\n\n    return (\n      <Box component=\"div\" className={`sticky-${position}-cols`} sx={style}>\n        {children}\n      </Box>\n    );\n  },\n\n  TableRowWrapper: React.forwardRef(\n    ({ children, flatIndex, dndStyle }, ref) => {\n      const theme = useTheme();\n      const backgroundColor = (theme: Theme) => {\n        const baseColor =\n          flatIndex % 2 === 0\n            ? theme.palette.background.paper\n            : theme.palette.mode === \"dark\"\n              ? theme.palette.grey[900]\n              : theme.palette.grey[100];\n        return baseColor;\n      };\n\n      const vars: Record<string, string> = {\n        \"--row-background-color\": backgroundColor(theme),\n      };\n\n      return (\n        <Box\n          sx={{\n            ...dndStyle,\n            ...vars,\n          }}\n          data-index={flatIndex}\n          ref={ref}\n        >\n          {children}\n        </Box>\n      );\n    },\n  ),\n  TableRow: ({ children }) => {\n    return (\n      <TableRow\n        component=\"div\"\n        className=\"table-row\"\n        sx={{\n          position: \"relative\",\n          width: \"var(--table-width)\",\n          display: \"flex\",\n          height: \"var(--row-height)\",\n          zIndex: 1,\n          boxSizing: \"border-box\",\n          backgroundColor: \"var(--row-background-color)\",\n        }}\n      >\n        {children}\n      </TableRow>\n    );\n  },\n  TableRowExpandedContent: ({ children }) => {\n    const { table } = useTableContext();\n    return (\n      <TableRow\n        component=\"div\"\n        className=\"expanded-row\"\n        sx={{\n          backgroundColor: (theme) => theme.palette.background.default,\n        }}\n      >\n        <TableCell\n          component=\"div\"\n          className=\"expanded-cell\"\n          colSpan={table.getAllLeafColumns().length}\n          sx={{\n            padding: 2,\n          }}\n        >\n          {children}\n        </TableCell>\n      </TableRow>\n    );\n  },\n  Cell: ({ children, header }) => {\n    const { isPinned } = header;\n    return (\n      <TableCell\n        className=\"td\"\n        component=\"div\"\n        sx={{\n          height: \"var(--row-height)\",\n          width: header.width,\n          overflow: \"hidden\",\n          textOverflow: \"ellipsis\",\n          whiteSpace: \"nowrap\",\n          zIndex: isPinned ? 5 : 0,\n          boxSizing: \"border-box\",\n          alignItems: \"center\",\n          gap: \"8px\",\n          display: \"flex\",\n          justifyContent: \"flex-start\",\n          alignContent: \"center\",\n          padding: \"6px 12px\",\n          backgroundColor: \"var(--row-background-color)\",\n          borderBottom: \"none\",\n          flexShrink: 0,\n          position: \"relative\",\n          borderRight: (theme) => `1px solid ${theme.palette.divider}`,\n          \".table-row:hover &\": {\n            backgroundColor: (theme) => {\n              // Always use solid background colors for all cells on hover\n              return theme.palette.mode === \"dark\"\n                ? \"#1e1e52\" // Dark blue solid color\n                : \"#E3F2FD\"; // Light blue solid color\n            },\n            zIndex: isPinned ? 2 : 0,\n          },\n        }}\n      >\n        {children}\n      </TableCell>\n    );\n  },\n};\n\nfunction TableHeaderCell({\n  headerId,\n  isPinned,\n  width,\n  header,\n  type,\n}: VirtualHeader & {\n  type: \"header\" | \"footer\";\n}) {\n  return (\n    <TableCell\n      component=\"div\"\n      className=\"th\"\n      data-header-id={headerId}\n      data-is-pinned={isPinned}\n      sx={{\n        transition: \"background-color 0.2s ease\",\n        whiteSpace: \"nowrap\",\n        zIndex: isPinned ? 1 : 0,\n        display: \"flex\",\n        overflow: \"hidden\",\n        height: \"var(--header-row-height)\",\n        width,\n        position: \"relative\",\n        flexShrink: 0,\n        alignItems: \"center\",\n        gap: \"8px\",\n        justifyContent: \"space-between\",\n        padding: \"6px 12px\",\n        boxSizing: \"border-box\",\n        fontWeight: 600,\n        backgroundColor: isPinned\n          ? (theme) => theme.palette.background.paper\n          : \"transparent\",\n        borderRight: (theme) => `1px solid ${theme.palette.divider}`,\n      }}\n    >\n      <div style={{ flex: 1, display: \"flex\", justifyContent: \"flex-start\" }}>\n        {header && !header.isPlaceholder\n          ? flexRender(header.column.columnDef[type], header.getContext())\n          : null}\n      </div>\n    </TableCell>\n  );\n}\n\nexport { AnoccaSkin };\n\nfunction TableHeaderRow({ children }: { children: React.ReactNode }) {\n  return (\n    <TableRow\n      component=\"div\"\n      sx={{ height: \"var(--row-height)\", display: \"flex\" }}\n    >\n      {children}\n    </TableRow>\n  );\n}\n"
+  ],
+  "mappings": "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",
+  "debugId": "1B1A7D6C6A1CF7C164756E2164756E21",
+  "names": []
+}

package/dist/cjs/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@rttui/skin-anocca",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "type": "commonjs"
 }

package/dist/mjs/index.mjs

@@ -0,0 +1,283 @@
+// packages/skin-anocca/src/index.tsx
+import {
+  Box,
+  Paper,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableRow,
+  useTheme
+} from "@mui/material";
+import {
+  useTableContext,
+  useTableCssVars
+} from "@rttui/core";
+import React from "react";
+import { flexRender } from "@tanstack/react-table";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var AnoccaSkin = {
+  rowHeight: 32,
+  headerRowHeight: 32,
+  footerRowHeight: 32,
+  OuterContainer: ({ children }) => {
+    const { width, height, tableContainerRef } = useTableContext();
+    const cssVars = useTableCssVars();
+    return /* @__PURE__ */ jsxDEV(Paper, {
+      ref: tableContainerRef,
+      className: "outer-container",
+      elevation: 2,
+      sx: {
+        overflow: "auto",
+        width: width + "px",
+        height: height + "px",
+        position: "relative",
+        contain: "paint",
+        willChange: "transform",
+        borderRadius: 1,
+        ...cssVars
+      },
+      children
+    }, undefined, false, undefined, this);
+  },
+  TableScroller: () => {
+    return /* @__PURE__ */ jsxDEV("div", {
+      className: "table-scroller",
+      style: {
+        width: "var(--table-width)",
+        height: "calc(var(--table-height) + var(--header-height) + var(--footer-height))",
+        position: "absolute"
+      }
+    }, undefined, false, undefined, this);
+  },
+  TableHeader: ({ children }) => {
+    return /* @__PURE__ */ jsxDEV(TableHead, {
+      component: "div",
+      className: "thead",
+      sx: {
+        position: "sticky",
+        top: 0,
+        width: "var(--table-width)",
+        zIndex: 2,
+        backgroundColor: (theme) => theme.palette.background.paper,
+        boxShadow: (theme) => `0 1px 0 ${theme.palette.divider}`
+      },
+      children
+    }, undefined, false, undefined, this);
+  },
+  TableFooter: ({ children }) => {
+    return /* @__PURE__ */ jsxDEV(TableFooter, {
+      component: "div",
+      className: "table-footer",
+      sx: {
+        position: "sticky",
+        bottom: -1,
+        width: "var(--table-width)",
+        zIndex: 2,
+        backgroundColor: (theme) => theme.palette.background.paper,
+        boxShadow: (theme) => `0 -1px 0 ${theme.palette.divider}`
+      },
+      children
+    }, undefined, false, undefined, this);
+  },
+  HeaderRow: TableHeaderRow,
+  HeaderCell: (props) => {
+    return /* @__PURE__ */ jsxDEV(TableHeaderCell, {
+      ...props
+    }, undefined, false, undefined, this);
+  },
+  TableBody: ({ children }) => {
+    return /* @__PURE__ */ jsxDEV(TableBody, {
+      component: "div",
+      className: "table-body",
+      sx: { position: "relative", width: "var(--table-width)" },
+      children
+    }, undefined, false, undefined, this);
+  },
+  PinnedRows: ({ children, position, pinned }) => {
+    if (pinned.length === 0) {
+      return null;
+    }
+    const style = {
+      position: "sticky",
+      zIndex: 3
+    };
+    if (position === "top") {
+      style.top = "var(--header-height)";
+      style.borderBottom = (theme) => `1px solid ${theme.palette.divider}`;
+      style.boxShadow = "0 4px 8px -4px rgba(0, 0, 0, 0.15), 0 6px 12px -6px rgba(0, 0, 0, 0.1)";
+    } else if (position === "bottom") {
+      style.bottom = "var(--footer-height)";
+      style.borderTop = (theme) => `1px solid ${theme.palette.divider}`;
+      style.boxShadow = "0 -4px 8px -4px rgba(0, 0, 0, 0.15), 0 -6px 12px -6px rgba(0, 0, 0, 0.1)";
+    }
+    const Component = position === "top" ? TableHead : TableFooter;
+    return /* @__PURE__ */ jsxDEV(Component, {
+      component: "div",
+      className: `sticky-${position}-rows`,
+      sx: style,
+      children
+    }, undefined, false, undefined, this);
+  },
+  PinnedCols: ({ children, position, pinned }) => {
+    if (pinned.length === 0) {
+      return null;
+    }
+    const style = {
+      position: "sticky",
+      zIndex: 3,
+      display: "flex"
+    };
+    if (position === "left") {
+      style.left = 0;
+      style.boxShadow = "4px 0 8px -4px rgba(0, 0, 0, 0.15), 6px 0 12px -6px rgba(0, 0, 0, 0.1)";
+    } else if (position === "right") {
+      style.right = 0;
+      style.borderLeft = (theme) => `1px solid ${theme.palette.divider}`;
+      style.boxShadow = "-4px 0 8px -4px rgba(0, 0, 0, 0.15), -6px 0 12px -6px rgba(0, 0, 0, 0.1)";
+    }
+    return /* @__PURE__ */ jsxDEV(Box, {
+      component: "div",
+      className: `sticky-${position}-cols`,
+      sx: style,
+      children
+    }, undefined, false, undefined, this);
+  },
+  TableRowWrapper: React.forwardRef(({ children, flatIndex, dndStyle }, ref) => {
+    const theme = useTheme();
+    const backgroundColor = (theme2) => {
+      const baseColor = flatIndex % 2 === 0 ? theme2.palette.background.paper : theme2.palette.mode === "dark" ? theme2.palette.grey[900] : theme2.palette.grey[100];
+      return baseColor;
+    };
+    const vars = {
+      "--row-background-color": backgroundColor(theme)
+    };
+    return /* @__PURE__ */ jsxDEV(Box, {
+      sx: {
+        ...dndStyle,
+        ...vars
+      },
+      "data-index": flatIndex,
+      ref,
+      children
+    }, undefined, false, undefined, this);
+  }),
+  TableRow: ({ children }) => {
+    return /* @__PURE__ */ jsxDEV(TableRow, {
+      component: "div",
+      className: "table-row",
+      sx: {
+        position: "relative",
+        width: "var(--table-width)",
+        display: "flex",
+        height: "var(--row-height)",
+        zIndex: 1,
+        boxSizing: "border-box",
+        backgroundColor: "var(--row-background-color)"
+      },
+      children
+    }, undefined, false, undefined, this);
+  },
+  TableRowExpandedContent: ({ children }) => {
+    const { table } = useTableContext();
+    return /* @__PURE__ */ jsxDEV(TableRow, {
+      component: "div",
+      className: "expanded-row",
+      sx: {
+        backgroundColor: (theme) => theme.palette.background.default
+      },
+      children: /* @__PURE__ */ jsxDEV(TableCell, {
+        component: "div",
+        className: "expanded-cell",
+        colSpan: table.getAllLeafColumns().length,
+        sx: {
+          padding: 2
+        },
+        children
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  },
+  Cell: ({ children, header }) => {
+    const { isPinned } = header;
+    return /* @__PURE__ */ jsxDEV(TableCell, {
+      className: "td",
+      component: "div",
+      sx: {
+        height: "var(--row-height)",
+        width: header.width,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        zIndex: isPinned ? 5 : 0,
+        boxSizing: "border-box",
+        alignItems: "center",
+        gap: "8px",
+        display: "flex",
+        justifyContent: "flex-start",
+        alignContent: "center",
+        padding: "6px 12px",
+        backgroundColor: "var(--row-background-color)",
+        borderBottom: "none",
+        flexShrink: 0,
+        position: "relative",
+        borderRight: (theme) => `1px solid ${theme.palette.divider}`,
+        ".table-row:hover &": {
+          backgroundColor: (theme) => {
+            return theme.palette.mode === "dark" ? "#1e1e52" : "#E3F2FD";
+          },
+          zIndex: isPinned ? 2 : 0
+        }
+      },
+      children
+    }, undefined, false, undefined, this);
+  }
+};
+function TableHeaderCell({
+  headerId,
+  isPinned,
+  width,
+  header,
+  type
+}) {
+  return /* @__PURE__ */ jsxDEV(TableCell, {
+    component: "div",
+    className: "th",
+    "data-header-id": headerId,
+    "data-is-pinned": isPinned,
+    sx: {
+      transition: "background-color 0.2s ease",
+      whiteSpace: "nowrap",
+      zIndex: isPinned ? 1 : 0,
+      display: "flex",
+      overflow: "hidden",
+      height: "var(--header-row-height)",
+      width,
+      position: "relative",
+      flexShrink: 0,
+      alignItems: "center",
+      gap: "8px",
+      justifyContent: "space-between",
+      padding: "6px 12px",
+      boxSizing: "border-box",
+      fontWeight: 600,
+      backgroundColor: isPinned ? (theme) => theme.palette.background.paper : "transparent",
+      borderRight: (theme) => `1px solid ${theme.palette.divider}`
+    },
+    children: /* @__PURE__ */ jsxDEV("div", {
+      style: { flex: 1, display: "flex", justifyContent: "flex-start" },
+      children: header && !header.isPlaceholder ? flexRender(header.column.columnDef[type], header.getContext()) : null
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function TableHeaderRow({ children }) {
+  return /* @__PURE__ */ jsxDEV(TableRow, {
+    component: "div",
+    sx: { height: "var(--row-height)", display: "flex" },
+    children
+  }, undefined, false, undefined, this);
+}
+export {
+  AnoccaSkin
+};
+
+//# debugId=10494150C3C4F7AF64756E2164756E21

package/dist/mjs/index.mjs.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.tsx"],
+  "sourcesContent": [
+    "import {\n  Box,\n  Paper,\n  SxProps,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableRow,\n  Theme,\n  useTheme,\n} from \"@mui/material\";\nimport {\n  Skin,\n  useTableContext,\n  useTableCssVars,\n  VirtualHeader,\n} from \"@rttui/core\";\nimport React from \"react\";\nimport { flexRender } from \"@tanstack/react-table\";\n\nconst AnoccaSkin: Skin = {\n  rowHeight: 32,\n  headerRowHeight: 32,\n  footerRowHeight: 32,\n  OuterContainer: ({ children }) => {\n    const { width, height, tableContainerRef } = useTableContext();\n    const cssVars = useTableCssVars();\n\n    return (\n      <Paper\n        ref={tableContainerRef}\n        className=\"outer-container\"\n        elevation={2}\n        sx={{\n          overflow: \"auto\",\n          width: width + \"px\",\n          height: height + \"px\",\n          position: \"relative\",\n          contain: \"paint\",\n          willChange: \"transform\",\n          borderRadius: 1,\n          ...cssVars,\n        }}\n      >\n        {children}\n      </Paper>\n    );\n  },\n  TableScroller: () => {\n    return (\n      <div\n        className=\"table-scroller\"\n        style={{\n          width: \"var(--table-width)\",\n          height:\n            \"calc(var(--table-height) + var(--header-height) + var(--footer-height))\",\n          position: \"absolute\",\n        }}\n      ></div>\n    );\n  },\n  TableHeader: ({ children }) => {\n    return (\n      <TableHead\n        component=\"div\"\n        className=\"thead\"\n        sx={{\n          position: \"sticky\",\n          top: 0,\n          width: \"var(--table-width)\",\n          zIndex: 2,\n          backgroundColor: (theme) => theme.palette.background.paper,\n          boxShadow: (theme) => `0 1px 0 ${theme.palette.divider}`,\n        }}\n      >\n        {children}\n      </TableHead>\n    );\n  },\n  TableFooter: ({ children }) => {\n    return (\n      <TableFooter\n        component=\"div\"\n        className=\"table-footer\"\n        sx={{\n          position: \"sticky\",\n          bottom: -1,\n          width: \"var(--table-width)\",\n          zIndex: 2,\n          backgroundColor: (theme) => theme.palette.background.paper,\n          boxShadow: (theme) => `0 -1px 0 ${theme.palette.divider}`,\n        }}\n      >\n        {children}\n      </TableFooter>\n    );\n  },\n  HeaderRow: TableHeaderRow,\n  HeaderCell: (props) => {\n    return <TableHeaderCell {...props} />;\n  },\n  TableBody: ({ children }) => {\n    return (\n      <TableBody\n        component=\"div\"\n        className=\"table-body\"\n        sx={{ position: \"relative\", width: \"var(--table-width)\" }}\n      >\n        {children}\n      </TableBody>\n    );\n  },\n  PinnedRows: ({ children, position, pinned }) => {\n    if (pinned.length === 0) {\n      return null;\n    }\n\n    const style: SxProps<Theme> = {\n      position: \"sticky\",\n      zIndex: 3,\n    };\n    if (position === \"top\") {\n      style.top = \"var(--header-height)\";\n      style.borderBottom = (theme) => `1px solid ${theme.palette.divider}`;\n      style.boxShadow =\n        \"0 4px 8px -4px rgba(0, 0, 0, 0.15), 0 6px 12px -6px rgba(0, 0, 0, 0.1)\";\n    } else if (position === \"bottom\") {\n      style.bottom = \"var(--footer-height)\";\n      style.borderTop = (theme) => `1px solid ${theme.palette.divider}`;\n      style.boxShadow =\n        \"0 -4px 8px -4px rgba(0, 0, 0, 0.15), 0 -6px 12px -6px rgba(0, 0, 0, 0.1)\";\n    }\n\n    const Component = position === \"top\" ? TableHead : TableFooter;\n\n    return (\n      <Component\n        component=\"div\"\n        className={`sticky-${position}-rows`}\n        sx={style}\n      >\n        {children}\n      </Component>\n    );\n  },\n  PinnedCols: ({ children, position, pinned }) => {\n    if (pinned.length === 0) {\n      return null;\n    }\n\n    const style: SxProps<Theme> = {\n      position: \"sticky\",\n      zIndex: 3,\n      display: \"flex\",\n    };\n\n    if (position === \"left\") {\n      style.left = 0;\n      style.boxShadow =\n        \"4px 0 8px -4px rgba(0, 0, 0, 0.15), 6px 0 12px -6px rgba(0, 0, 0, 0.1)\";\n    } else if (position === \"right\") {\n      style.right = 0;\n      style.borderLeft = (theme) => `1px solid ${theme.palette.divider}`;\n      style.boxShadow =\n        \"-4px 0 8px -4px rgba(0, 0, 0, 0.15), -6px 0 12px -6px rgba(0, 0, 0, 0.1)\";\n    }\n\n    return (\n      <Box component=\"div\" className={`sticky-${position}-cols`} sx={style}>\n        {children}\n      </Box>\n    );\n  },\n\n  TableRowWrapper: React.forwardRef(\n    ({ children, flatIndex, dndStyle }, ref) => {\n      const theme = useTheme();\n      const backgroundColor = (theme: Theme) => {\n        const baseColor =\n          flatIndex % 2 === 0\n            ? theme.palette.background.paper\n            : theme.palette.mode === \"dark\"\n              ? theme.palette.grey[900]\n              : theme.palette.grey[100];\n        return baseColor;\n      };\n\n      const vars: Record<string, string> = {\n        \"--row-background-color\": backgroundColor(theme),\n      };\n\n      return (\n        <Box\n          sx={{\n            ...dndStyle,\n            ...vars,\n          }}\n          data-index={flatIndex}\n          ref={ref}\n        >\n          {children}\n        </Box>\n      );\n    },\n  ),\n  TableRow: ({ children }) => {\n    return (\n      <TableRow\n        component=\"div\"\n        className=\"table-row\"\n        sx={{\n          position: \"relative\",\n          width: \"var(--table-width)\",\n          display: \"flex\",\n          height: \"var(--row-height)\",\n          zIndex: 1,\n          boxSizing: \"border-box\",\n          backgroundColor: \"var(--row-background-color)\",\n        }}\n      >\n        {children}\n      </TableRow>\n    );\n  },\n  TableRowExpandedContent: ({ children }) => {\n    const { table } = useTableContext();\n    return (\n      <TableRow\n        component=\"div\"\n        className=\"expanded-row\"\n        sx={{\n          backgroundColor: (theme) => theme.palette.background.default,\n        }}\n      >\n        <TableCell\n          component=\"div\"\n          className=\"expanded-cell\"\n          colSpan={table.getAllLeafColumns().length}\n          sx={{\n            padding: 2,\n          }}\n        >\n          {children}\n        </TableCell>\n      </TableRow>\n    );\n  },\n  Cell: ({ children, header }) => {\n    const { isPinned } = header;\n    return (\n      <TableCell\n        className=\"td\"\n        component=\"div\"\n        sx={{\n          height: \"var(--row-height)\",\n          width: header.width,\n          overflow: \"hidden\",\n          textOverflow: \"ellipsis\",\n          whiteSpace: \"nowrap\",\n          zIndex: isPinned ? 5 : 0,\n          boxSizing: \"border-box\",\n          alignItems: \"center\",\n          gap: \"8px\",\n          display: \"flex\",\n          justifyContent: \"flex-start\",\n          alignContent: \"center\",\n          padding: \"6px 12px\",\n          backgroundColor: \"var(--row-background-color)\",\n          borderBottom: \"none\",\n          flexShrink: 0,\n          position: \"relative\",\n          borderRight: (theme) => `1px solid ${theme.palette.divider}`,\n          \".table-row:hover &\": {\n            backgroundColor: (theme) => {\n              // Always use solid background colors for all cells on hover\n              return theme.palette.mode === \"dark\"\n                ? \"#1e1e52\" // Dark blue solid color\n                : \"#E3F2FD\"; // Light blue solid color\n            },\n            zIndex: isPinned ? 2 : 0,\n          },\n        }}\n      >\n        {children}\n      </TableCell>\n    );\n  },\n};\n\nfunction TableHeaderCell({\n  headerId,\n  isPinned,\n  width,\n  header,\n  type,\n}: VirtualHeader & {\n  type: \"header\" | \"footer\";\n}) {\n  return (\n    <TableCell\n      component=\"div\"\n      className=\"th\"\n      data-header-id={headerId}\n      data-is-pinned={isPinned}\n      sx={{\n        transition: \"background-color 0.2s ease\",\n        whiteSpace: \"nowrap\",\n        zIndex: isPinned ? 1 : 0,\n        display: \"flex\",\n        overflow: \"hidden\",\n        height: \"var(--header-row-height)\",\n        width,\n        position: \"relative\",\n        flexShrink: 0,\n        alignItems: \"center\",\n        gap: \"8px\",\n        justifyContent: \"space-between\",\n        padding: \"6px 12px\",\n        boxSizing: \"border-box\",\n        fontWeight: 600,\n        backgroundColor: isPinned\n          ? (theme) => theme.palette.background.paper\n          : \"transparent\",\n        borderRight: (theme) => `1px solid ${theme.palette.divider}`,\n      }}\n    >\n      <div style={{ flex: 1, display: \"flex\", justifyContent: \"flex-start\" }}>\n        {header && !header.isPlaceholder\n          ? flexRender(header.column.columnDef[type], header.getContext())\n          : null}\n      </div>\n    </TableCell>\n  );\n}\n\nexport { AnoccaSkin };\n\nfunction TableHeaderRow({ children }: { children: React.ReactNode }) {\n  return (\n    <TableRow\n      component=\"div\"\n      sx={{ height: \"var(--row-height)\", display: \"flex\" }}\n    >\n      {children}\n    </TableRow>\n  );\n}\n"
+  ],
+  "mappings": "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",
+  "debugId": "10494150C3C4F7AF64756E2164756E21",
+  "names": []
+}

package/dist/mjs/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@rttui/skin-anocca",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "type": "module"
 }

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@rttui/skin-anocca",
-  "version": "1.0.2",
-  "main": "./dist/cjs/index.js",
+  "version": "1.0.4",
+  "main": "./dist/cjs/index.cjs",
   "dependencies": {
-    "@rttui/core": "^1.0.2"
+    "@rttui/core": "^1.0.4"
   },
-  "module": "./dist/mjs/index.js",
+  "module": "./dist/mjs/index.mjs",
   "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
-      "require": "./dist/cjs/index.js",
-      "import": "./dist/mjs/index.js"
+      "require": "./dist/cjs/index.cjs",
+      "import": "./dist/mjs/index.mjs"
     }
   },
   "publishConfig": {

package/dist/cjs/index.d.ts

@@ -1,3 +0,0 @@
-import { Skin } from "@rttui/core";
-declare const AnoccaSkin: Skin;
-export { AnoccaSkin };

package/dist/cjs/index.js

@@ -1,207 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AnoccaSkin = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const core_1 = require("@rttui/core");
-const react_1 = __importDefault(require("react"));
-const react_table_1 = require("@tanstack/react-table");
-const AnoccaSkin = {
-    rowHeight: 32,
-    headerRowHeight: 32,
-    footerRowHeight: 32,
-    OuterContainer: ({ children }) => {
-        const { width, height, tableContainerRef } = (0, core_1.useTableContext)();
-        const cssVars = (0, core_1.useTableCssVars)();
-        return ((0, jsx_runtime_1.jsx)(material_1.Paper, { ref: tableContainerRef, className: "outer-container", elevation: 2, sx: {
-                overflow: "auto",
-                width: width + "px",
-                height: height + "px",
-                position: "relative",
-                contain: "paint",
-                willChange: "transform",
-                borderRadius: 1,
-                ...cssVars,
-            }, children: children }));
-    },
-    TableScroller: () => {
-        return ((0, jsx_runtime_1.jsx)("div", { className: "table-scroller", style: {
-                width: "var(--table-width)",
-                height: "calc(var(--table-height) + var(--header-height) + var(--footer-height))",
-                position: "absolute",
-            } }));
-    },
-    TableHeader: ({ children }) => {
-        return ((0, jsx_runtime_1.jsx)(material_1.TableHead, { component: "div", className: "thead", sx: {
-                position: "sticky",
-                top: 0,
-                width: "var(--table-width)",
-                zIndex: 2,
-                backgroundColor: (theme) => theme.palette.background.paper,
-                boxShadow: (theme) => `0 1px 0 ${theme.palette.divider}`,
-            }, children: children }));
-    },
-    TableFooter: ({ children }) => {
-        return ((0, jsx_runtime_1.jsx)(material_1.TableFooter, { component: "div", className: "table-footer", sx: {
-                position: "sticky",
-                bottom: -1,
-                width: "var(--table-width)",
-                zIndex: 2,
-                backgroundColor: (theme) => theme.palette.background.paper,
-                boxShadow: (theme) => `0 -1px 0 ${theme.palette.divider}`,
-            }, children: children }));
-    },
-    HeaderRow: TableHeaderRow,
-    HeaderCell: (props) => {
-        return (0, jsx_runtime_1.jsx)(TableHeaderCell, { ...props });
-    },
-    TableBody: ({ children }) => {
-        return ((0, jsx_runtime_1.jsx)(material_1.TableBody, { component: "div", className: "table-body", sx: { position: "relative", width: "var(--table-width)" }, children: children }));
-    },
-    PinnedRows: ({ children, position, pinned }) => {
-        if (pinned.length === 0) {
-            return null;
-        }
-        const style = {
-            position: "sticky",
-            zIndex: 3,
-        };
-        if (position === "top") {
-            style.top = "var(--header-height)";
-            style.borderBottom = (theme) => `1px solid ${theme.palette.divider}`;
-            style.boxShadow =
-                "0 4px 8px -4px rgba(0, 0, 0, 0.15), 0 6px 12px -6px rgba(0, 0, 0, 0.1)";
-        }
-        else if (position === "bottom") {
-            style.bottom = "var(--footer-height)";
-            style.borderTop = (theme) => `1px solid ${theme.palette.divider}`;
-            style.boxShadow =
-                "0 -4px 8px -4px rgba(0, 0, 0, 0.15), 0 -6px 12px -6px rgba(0, 0, 0, 0.1)";
-        }
-        const Component = position === "top" ? material_1.TableHead : material_1.TableFooter;
-        return ((0, jsx_runtime_1.jsx)(Component, { component: "div", className: `sticky-${position}-rows`, sx: style, children: children }));
-    },
-    PinnedCols: ({ children, position, pinned }) => {
-        if (pinned.length === 0) {
-            return null;
-        }
-        const style = {
-            position: "sticky",
-            zIndex: 3,
-            display: "flex",
-        };
-        if (position === "left") {
-            style.left = 0;
-            style.boxShadow =
-                "4px 0 8px -4px rgba(0, 0, 0, 0.15), 6px 0 12px -6px rgba(0, 0, 0, 0.1)";
-        }
-        else if (position === "right") {
-            style.right = 0;
-            style.borderLeft = (theme) => `1px solid ${theme.palette.divider}`;
-            style.boxShadow =
-                "-4px 0 8px -4px rgba(0, 0, 0, 0.15), -6px 0 12px -6px rgba(0, 0, 0, 0.1)";
-        }
-        return ((0, jsx_runtime_1.jsx)(material_1.Box, { component: "div", className: `sticky-${position}-cols`, sx: style, children: children }));
-    },
-    TableRowWrapper: react_1.default.forwardRef(({ children, flatIndex, dndStyle }, ref) => {
-        const theme = (0, material_1.useTheme)();
-        const backgroundColor = (theme) => {
-            const baseColor = flatIndex % 2 === 0
-                ? theme.palette.background.paper
-                : theme.palette.mode === "dark"
-                    ? theme.palette.grey[900]
-                    : theme.palette.grey[100];
-            return baseColor;
-        };
-        const vars = {
-            "--row-background-color": backgroundColor(theme),
-        };
-        return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                ...dndStyle,
-                ...vars,
-            }, "data-index": flatIndex, ref: ref, children: children }));
-    }),
-    TableRow: ({ children }) => {
-        return ((0, jsx_runtime_1.jsx)(material_1.TableRow, { component: "div", className: "table-row", sx: {
-                position: "relative",
-                width: "var(--table-width)",
-                display: "flex",
-                height: "var(--row-height)",
-                zIndex: 1,
-                boxSizing: "border-box",
-                backgroundColor: "var(--row-background-color)",
-            }, children: children }));
-    },
-    TableRowExpandedContent: ({ children }) => {
-        const { table } = (0, core_1.useTableContext)();
-        return ((0, jsx_runtime_1.jsx)(material_1.TableRow, { component: "div", className: "expanded-row", sx: {
-                backgroundColor: (theme) => theme.palette.background.default,
-            }, children: (0, jsx_runtime_1.jsx)(material_1.TableCell, { component: "div", className: "expanded-cell", colSpan: table.getAllLeafColumns().length, sx: {
-                    padding: 2,
-                }, children: children }) }));
-    },
-    Cell: ({ children, header }) => {
-        const { isPinned } = header;
-        return ((0, jsx_runtime_1.jsx)(material_1.TableCell, { className: "td", component: "div", sx: {
-                height: "var(--row-height)",
-                width: header.width,
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap",
-                zIndex: isPinned ? 5 : 0,
-                boxSizing: "border-box",
-                alignItems: "center",
-                gap: "8px",
-                display: "flex",
-                justifyContent: "flex-start",
-                alignContent: "center",
-                padding: "6px 12px",
-                backgroundColor: "var(--row-background-color)",
-                borderBottom: "none",
-                flexShrink: 0,
-                position: "relative",
-                borderRight: (theme) => `1px solid ${theme.palette.divider}`,
-                ".table-row:hover &": {
-                    backgroundColor: (theme) => {
-                        // Always use solid background colors for all cells on hover
-                        return theme.palette.mode === "dark"
-                            ? "#1e1e52" // Dark blue solid color
-                            : "#E3F2FD"; // Light blue solid color
-                    },
-                    zIndex: isPinned ? 2 : 0,
-                },
-            }, children: children }));
-    },
-};
-exports.AnoccaSkin = AnoccaSkin;
-function TableHeaderCell({ headerId, isPinned, width, header, type, }) {
-    return ((0, jsx_runtime_1.jsx)(material_1.TableCell, { component: "div", className: "th", "data-header-id": headerId, "data-is-pinned": isPinned, sx: {
-            transition: "background-color 0.2s ease",
-            whiteSpace: "nowrap",
-            zIndex: isPinned ? 1 : 0,
-            display: "flex",
-            overflow: "hidden",
-            height: "var(--header-row-height)",
-            width,
-            position: "relative",
-            flexShrink: 0,
-            alignItems: "center",
-            gap: "8px",
-            justifyContent: "space-between",
-            padding: "6px 12px",
-            boxSizing: "border-box",
-            fontWeight: 600,
-            backgroundColor: isPinned
-                ? (theme) => theme.palette.background.paper
-                : "transparent",
-            borderRight: (theme) => `1px solid ${theme.palette.divider}`,
-        }, children: (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, display: "flex", justifyContent: "flex-start" }, children: header && !header.isPlaceholder
-                ? (0, react_table_1.flexRender)(header.column.columnDef[type], header.getContext())
-                : null }) }));
-}
-function TableHeaderRow({ children }) {
-    return ((0, jsx_runtime_1.jsx)(material_1.TableRow, { component: "div", sx: { height: "var(--row-height)", display: "flex" }, children: children }));
-}

package/dist/mjs/index.d.ts

@@ -1,3 +0,0 @@
-import { Skin } from "@rttui/core";
-declare const AnoccaSkin: Skin;
-export { AnoccaSkin };

package/dist/mjs/index.js

@@ -1,201 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, Paper, TableBody, TableCell, TableFooter, TableHead, TableRow, useTheme, } from "@mui/material";
-import { useTableContext, useTableCssVars, } from "@rttui/core";
-import React from "react";
-import { flexRender } from "@tanstack/react-table";
-const AnoccaSkin = {
-    rowHeight: 32,
-    headerRowHeight: 32,
-    footerRowHeight: 32,
-    OuterContainer: ({ children }) => {
-        const { width, height, tableContainerRef } = useTableContext();
-        const cssVars = useTableCssVars();
-        return (_jsx(Paper, { ref: tableContainerRef, className: "outer-container", elevation: 2, sx: {
-                overflow: "auto",
-                width: width + "px",
-                height: height + "px",
-                position: "relative",
-                contain: "paint",
-                willChange: "transform",
-                borderRadius: 1,
-                ...cssVars,
-            }, children: children }));
-    },
-    TableScroller: () => {
-        return (_jsx("div", { className: "table-scroller", style: {
-                width: "var(--table-width)",
-                height: "calc(var(--table-height) + var(--header-height) + var(--footer-height))",
-                position: "absolute",
-            } }));
-    },
-    TableHeader: ({ children }) => {
-        return (_jsx(TableHead, { component: "div", className: "thead", sx: {
-                position: "sticky",
-                top: 0,
-                width: "var(--table-width)",
-                zIndex: 2,
-                backgroundColor: (theme) => theme.palette.background.paper,
-                boxShadow: (theme) => `0 1px 0 ${theme.palette.divider}`,
-            }, children: children }));
-    },
-    TableFooter: ({ children }) => {
-        return (_jsx(TableFooter, { component: "div", className: "table-footer", sx: {
-                position: "sticky",
-                bottom: -1,
-                width: "var(--table-width)",
-                zIndex: 2,
-                backgroundColor: (theme) => theme.palette.background.paper,
-                boxShadow: (theme) => `0 -1px 0 ${theme.palette.divider}`,
-            }, children: children }));
-    },
-    HeaderRow: TableHeaderRow,
-    HeaderCell: (props) => {
-        return _jsx(TableHeaderCell, { ...props });
-    },
-    TableBody: ({ children }) => {
-        return (_jsx(TableBody, { component: "div", className: "table-body", sx: { position: "relative", width: "var(--table-width)" }, children: children }));
-    },
-    PinnedRows: ({ children, position, pinned }) => {
-        if (pinned.length === 0) {
-            return null;
-        }
-        const style = {
-            position: "sticky",
-            zIndex: 3,
-        };
-        if (position === "top") {
-            style.top = "var(--header-height)";
-            style.borderBottom = (theme) => `1px solid ${theme.palette.divider}`;
-            style.boxShadow =
-                "0 4px 8px -4px rgba(0, 0, 0, 0.15), 0 6px 12px -6px rgba(0, 0, 0, 0.1)";
-        }
-        else if (position === "bottom") {
-            style.bottom = "var(--footer-height)";
-            style.borderTop = (theme) => `1px solid ${theme.palette.divider}`;
-            style.boxShadow =
-                "0 -4px 8px -4px rgba(0, 0, 0, 0.15), 0 -6px 12px -6px rgba(0, 0, 0, 0.1)";
-        }
-        const Component = position === "top" ? TableHead : TableFooter;
-        return (_jsx(Component, { component: "div", className: `sticky-${position}-rows`, sx: style, children: children }));
-    },
-    PinnedCols: ({ children, position, pinned }) => {
-        if (pinned.length === 0) {
-            return null;
-        }
-        const style = {
-            position: "sticky",
-            zIndex: 3,
-            display: "flex",
-        };
-        if (position === "left") {
-            style.left = 0;
-            style.boxShadow =
-                "4px 0 8px -4px rgba(0, 0, 0, 0.15), 6px 0 12px -6px rgba(0, 0, 0, 0.1)";
-        }
-        else if (position === "right") {
-            style.right = 0;
-            style.borderLeft = (theme) => `1px solid ${theme.palette.divider}`;
-            style.boxShadow =
-                "-4px 0 8px -4px rgba(0, 0, 0, 0.15), -6px 0 12px -6px rgba(0, 0, 0, 0.1)";
-        }
-        return (_jsx(Box, { component: "div", className: `sticky-${position}-cols`, sx: style, children: children }));
-    },
-    TableRowWrapper: React.forwardRef(({ children, flatIndex, dndStyle }, ref) => {
-        const theme = useTheme();
-        const backgroundColor = (theme) => {
-            const baseColor = flatIndex % 2 === 0
-                ? theme.palette.background.paper
-                : theme.palette.mode === "dark"
-                    ? theme.palette.grey[900]
-                    : theme.palette.grey[100];
-            return baseColor;
-        };
-        const vars = {
-            "--row-background-color": backgroundColor(theme),
-        };
-        return (_jsx(Box, { sx: {
-                ...dndStyle,
-                ...vars,
-            }, "data-index": flatIndex, ref: ref, children: children }));
-    }),
-    TableRow: ({ children }) => {
-        return (_jsx(TableRow, { component: "div", className: "table-row", sx: {
-                position: "relative",
-                width: "var(--table-width)",
-                display: "flex",
-                height: "var(--row-height)",
-                zIndex: 1,
-                boxSizing: "border-box",
-                backgroundColor: "var(--row-background-color)",
-            }, children: children }));
-    },
-    TableRowExpandedContent: ({ children }) => {
-        const { table } = useTableContext();
-        return (_jsx(TableRow, { component: "div", className: "expanded-row", sx: {
-                backgroundColor: (theme) => theme.palette.background.default,
-            }, children: _jsx(TableCell, { component: "div", className: "expanded-cell", colSpan: table.getAllLeafColumns().length, sx: {
-                    padding: 2,
-                }, children: children }) }));
-    },
-    Cell: ({ children, header }) => {
-        const { isPinned } = header;
-        return (_jsx(TableCell, { className: "td", component: "div", sx: {
-                height: "var(--row-height)",
-                width: header.width,
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap",
-                zIndex: isPinned ? 5 : 0,
-                boxSizing: "border-box",
-                alignItems: "center",
-                gap: "8px",
-                display: "flex",
-                justifyContent: "flex-start",
-                alignContent: "center",
-                padding: "6px 12px",
-                backgroundColor: "var(--row-background-color)",
-                borderBottom: "none",
-                flexShrink: 0,
-                position: "relative",
-                borderRight: (theme) => `1px solid ${theme.palette.divider}`,
-                ".table-row:hover &": {
-                    backgroundColor: (theme) => {
-                        // Always use solid background colors for all cells on hover
-                        return theme.palette.mode === "dark"
-                            ? "#1e1e52" // Dark blue solid color
-                            : "#E3F2FD"; // Light blue solid color
-                    },
-                    zIndex: isPinned ? 2 : 0,
-                },
-            }, children: children }));
-    },
-};
-function TableHeaderCell({ headerId, isPinned, width, header, type, }) {
-    return (_jsx(TableCell, { component: "div", className: "th", "data-header-id": headerId, "data-is-pinned": isPinned, sx: {
-            transition: "background-color 0.2s ease",
-            whiteSpace: "nowrap",
-            zIndex: isPinned ? 1 : 0,
-            display: "flex",
-            overflow: "hidden",
-            height: "var(--header-row-height)",
-            width,
-            position: "relative",
-            flexShrink: 0,
-            alignItems: "center",
-            gap: "8px",
-            justifyContent: "space-between",
-            padding: "6px 12px",
-            boxSizing: "border-box",
-            fontWeight: 600,
-            backgroundColor: isPinned
-                ? (theme) => theme.palette.background.paper
-                : "transparent",
-            borderRight: (theme) => `1px solid ${theme.palette.divider}`,
-        }, children: _jsx("div", { style: { flex: 1, display: "flex", justifyContent: "flex-start" }, children: header && !header.isPlaceholder
-                ? flexRender(header.column.columnDef[type], header.getContext())
-                : null }) }));
-}
-export { AnoccaSkin };
-function TableHeaderRow({ children }) {
-    return (_jsx(TableRow, { component: "div", sx: { height: "var(--row-height)", display: "flex" }, children: children }));
-}

package/tsconfig.cjs.json

@@ -1,7 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "module": "commonjs",
-    "outDir": "dist/cjs"
-  }
-}

package/tsconfig.mjs.json

@@ -1,7 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "module": "ESNext",
-    "outDir": "dist/mjs"
-  }
-}