@rttui/skin-anocca 0.0.0 → 1.0.1

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# @rttui/skin-anocca
+
+## 1.0.1
+
+### Patch Changes
+
+- Fix dependencies
+- Updated dependencies
+  - @rttui/core@1.0.1
+
+## 1.0.0
+
+### Major Changes
+
+- First release

package/dist/cjs/index.d.ts

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

package/dist/cjs/index.js

@@ -0,0 +1,207 @@
+"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/cjs/package.json

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

package/dist/mjs/index.d.ts

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

package/dist/mjs/index.js

@@ -0,0 +1,201 @@
+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/dist/mjs/package.json

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

package/dist/types/index.d.ts

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

package/package.json

@@ -1,6 +1,20 @@
 {
   "name": "@rttui/skin-anocca",
-  "version": "0.0.0",
-  "private": false,
-  "type": "module"
+  "version": "1.0.1",
+  "main": "./dist/cjs/index.js",
+  "dependencies": {
+    "@rttui/core": "1.0.1"
+  },
+  "module": "./dist/mjs/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "require": "./dist/cjs/index.js",
+      "import": "./dist/mjs/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/src/index.tsx

@@ -0,0 +1,348 @@
+import {
+  Box,
+  Paper,
+  SxProps,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableRow,
+  Theme,
+  useTheme,
+} from "@mui/material";
+import {
+  Skin,
+  useTableContext,
+  useTableCssVars,
+  VirtualHeader,
+} from "@rttui/core";
+import React from "react";
+import { flexRender } from "@tanstack/react-table";
+
+const AnoccaSkin: Skin = {
+  rowHeight: 32,
+  headerRowHeight: 32,
+  footerRowHeight: 32,
+  OuterContainer: ({ children }) => {
+    const { width, height, tableContainerRef } = useTableContext();
+    const cssVars = useTableCssVars();
+
+    return (
+      <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}
+      </Paper>
+    );
+  },
+  TableScroller: () => {
+    return (
+      <div
+        className="table-scroller"
+        style={{
+          width: "var(--table-width)",
+          height:
+            "calc(var(--table-height) + var(--header-height) + var(--footer-height))",
+          position: "absolute",
+        }}
+      ></div>
+    );
+  },
+  TableHeader: ({ children }) => {
+    return (
+      <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}
+      </TableHead>
+    );
+  },
+  TableFooter: ({ children }) => {
+    return (
+      <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}
+      </TableFooter>
+    );
+  },
+  HeaderRow: TableHeaderRow,
+  HeaderCell: (props) => {
+    return <TableHeaderCell {...props} />;
+  },
+  TableBody: ({ children }) => {
+    return (
+      <TableBody
+        component="div"
+        className="table-body"
+        sx={{ position: "relative", width: "var(--table-width)" }}
+      >
+        {children}
+      </TableBody>
+    );
+  },
+  PinnedRows: ({ children, position, pinned }) => {
+    if (pinned.length === 0) {
+      return null;
+    }
+
+    const style: SxProps<Theme> = {
+      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 (
+      <Component
+        component="div"
+        className={`sticky-${position}-rows`}
+        sx={style}
+      >
+        {children}
+      </Component>
+    );
+  },
+  PinnedCols: ({ children, position, pinned }) => {
+    if (pinned.length === 0) {
+      return null;
+    }
+
+    const style: SxProps<Theme> = {
+      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 (
+      <Box component="div" className={`sticky-${position}-cols`} sx={style}>
+        {children}
+      </Box>
+    );
+  },
+
+  TableRowWrapper: React.forwardRef(
+    ({ children, flatIndex, dndStyle }, ref) => {
+      const theme = useTheme();
+      const backgroundColor = (theme: 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: Record<string, string> = {
+        "--row-background-color": backgroundColor(theme),
+      };
+
+      return (
+        <Box
+          sx={{
+            ...dndStyle,
+            ...vars,
+          }}
+          data-index={flatIndex}
+          ref={ref}
+        >
+          {children}
+        </Box>
+      );
+    },
+  ),
+  TableRow: ({ children }) => {
+    return (
+      <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}
+      </TableRow>
+    );
+  },
+  TableRowExpandedContent: ({ children }) => {
+    const { table } = useTableContext();
+    return (
+      <TableRow
+        component="div"
+        className="expanded-row"
+        sx={{
+          backgroundColor: (theme) => theme.palette.background.default,
+        }}
+      >
+        <TableCell
+          component="div"
+          className="expanded-cell"
+          colSpan={table.getAllLeafColumns().length}
+          sx={{
+            padding: 2,
+          }}
+        >
+          {children}
+        </TableCell>
+      </TableRow>
+    );
+  },
+  Cell: ({ children, header }) => {
+    const { isPinned } = header;
+    return (
+      <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}
+      </TableCell>
+    );
+  },
+};
+
+function TableHeaderCell({
+  headerId,
+  isPinned,
+  width,
+  header,
+  type,
+}: VirtualHeader & {
+  type: "header" | "footer";
+}) {
+  return (
+    <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}`,
+      }}
+    >
+      <div style={{ flex: 1, display: "flex", justifyContent: "flex-start" }}>
+        {header && !header.isPlaceholder
+          ? flexRender(header.column.columnDef[type], header.getContext())
+          : null}
+      </div>
+    </TableCell>
+  );
+}
+
+export { AnoccaSkin };
+
+function TableHeaderRow({ children }: { children: React.ReactNode }) {
+  return (
+    <TableRow
+      component="div"
+      sx={{ height: "var(--row-height)", display: "flex" }}
+    >
+      {children}
+    </TableRow>
+  );
+}

package/tsconfig.cjs.json

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

package/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": "src",
+    "target": "ESNext",
+    "declaration": true,
+    "esModuleInterop": true,
+    "inlineSourceMap": false,
+    "lib": [
+      "esnext",
+      "dom"
+    ],
+    "listEmittedFiles": false,
+    "jsx": "react-jsx",
+    "listFiles": false,
+    "moduleResolution": "node",
+    "noFallthroughCasesInSwitch": true,
+    "pretty": true,
+    "resolveJsonModule": true,
+    "rootDir": "src",
+    "skipLibCheck": true,
+    "strict": true,
+    "traceResolution": false
+  },
+  "compileOnSave": false,
+  "exclude": [
+    "node_modules",
+    "dist"
+  ],
+  "include": [
+    "src"
+  ]
+}

package/tsconfig.mjs.json

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

package/tsconfig.types.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "outDir": "dist/types",
+    "emitDeclarationOnly": true,
+    "declarationDir": "dist/types"
+  }
+}

package/README.md

@@ -1,2 +0,0 @@
-# @rttui/skin-anocca
-Published soon