@clickhouse/click-ui 0.8.0 → 0.9.1-rc1

package/dist/esm/components/Grid/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../../src/components/Grid/Header.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport {\n  CellProps,\n  ColumnResizeFn,\n  GetResizerPositionFn,\n  SelectionTypeFn,\n} from './types';\nimport { StyledCell } from './StyledCell';\nimport ColumnResizer from './ColumnResizer';\nimport { ResizingState } from './useResizingState';\n\ninterface HeaderProps {\n  showRowNumber: boolean;\n  rowNumberWidth: number;\n  minColumn: number;\n  maxColumn: number;\n  height: number;\n  getColumnWidth: (index: number) => number;\n  cell: CellProps;\n  getSelectionType: SelectionTypeFn;\n  columnCount: number;\n  onColumnResize: ColumnResizeFn;\n  getColumnHorizontalPosition: (columnIndex: number) => number;\n  scrolledVertical: boolean;\n  getResizerPosition: GetResizerPositionFn;\n  showBorder: boolean;\n  scrolledHorizontal: boolean;\n  resizingState: ResizingState;\n}\n\nconst HeaderContainer = styled.div<{ $height: number; $scrolledVertical: boolean }>`\n  position: sticky;\n  top: 0;\n  left: 0;\n  display: flex;\n  flex-direction: row;\n  height: ${({ $height }) => $height}px;\n  ${({ $scrolledVertical, theme }) =>\n    $scrolledVertical\n      ? `box-shadow: 0px 0 0px 1px ${theme.click.grid.header.cell.color.stroke.default};`\n      : ''}\n`;\n\nconst ScrollableHeaderContainer = styled.div<{\n  $left: number;\n}>`\n  position: relative;\n  left: ${({ $left }) => $left}px;\n`;\n\ninterface ColumnProps extends Pick<\n  HeaderProps,\n  | 'cell'\n  | 'getSelectionType'\n  | 'onColumnResize'\n  | 'getColumnWidth'\n  | 'height'\n  | 'getResizerPosition'\n  | 'showBorder'\n  | 'getColumnHorizontalPosition'\n  | 'resizingState'\n> {\n  columnIndex: number;\n  isFirstColumn: boolean;\n  isLastColumn: boolean;\n}\n\nconst HeaderCellContainer = styled.div<{\n  $width: string | number;\n  $height: number;\n  $columnPosition: number;\n}>`\n  position: absolute;\n  display: flex;\n  width: ${({ $width }) => (typeof $width === 'string' ? $width : `${$width}px`)};\n  height: ${({ $height }) => $height}px;\n  left: ${({ $columnPosition }) => $columnPosition}px;\n  &:hover [data-resize] {\n    background: ${({ theme }) => theme.click.grid.header.cell.color.stroke.selectDirect};\n  }\n`;\n\nconst RowColumnContainer = styled(HeaderCellContainer)<{\n  $width: string | number;\n  $scrolledHorizontal: boolean;\n}>`\n  position: sticky;\n  top: 0;\n  left: 0;\n  width: ${({ $width }) => (typeof $width === 'string' ? $width : `${$width}px`)};\n  text-align: right;\n  ${({ $scrolledHorizontal, theme }) =>\n    $scrolledHorizontal\n      ? `box-shadow: 0px 0 0px 1px ${theme.click.grid.header.cell.color.stroke.default};`\n      : ''}\n`;\n\nconst RowColumn = styled(StyledCell)`\n  width: 100%;\n  text-align: right;\n  overflow: hidden;\n`;\n\nconst Column = ({\n  columnIndex,\n  cell,\n  getColumnWidth,\n  getColumnHorizontalPosition,\n  getSelectionType,\n  isFirstColumn,\n  isLastColumn,\n  onColumnResize,\n  height,\n  getResizerPosition,\n  showBorder,\n  resizingState,\n}: ColumnProps) => {\n  const selectionType = getSelectionType({\n    column: columnIndex,\n    type: 'column',\n  });\n  const leftSelectionType = getSelectionType({\n    column: columnIndex - 1,\n    type: 'column',\n  });\n  const columnPosition = getColumnHorizontalPosition(columnIndex);\n\n  const isSelected = selectionType === 'selectDirect';\n  const isSelectedLeft =\n    (leftSelectionType === 'selectDirect' || isSelected) &&\n    leftSelectionType !== selectionType;\n\n  const columnWidth = getColumnWidth(columnIndex);\n  return (\n    <HeaderCellContainer\n      $width={columnWidth}\n      $columnPosition={columnPosition}\n      $height={height}\n      data-header={columnIndex}\n    >\n      <StyledCell\n        $type=\"header\"\n        as={cell}\n        columnIndex={columnIndex}\n        type=\"header-cell\"\n        $isFirstColumn={isFirstColumn}\n        $selectionType={selectionType}\n        $isLastColumn={isLastColumn}\n        $isFocused={false}\n        $isSelectedLeft={isSelectedLeft}\n        $isSelectedTop={isSelected}\n        $isLastRow={false}\n        $isFirstRow\n        $height={height}\n        data-grid-row={-1}\n        data-grid-column={columnIndex}\n        data-selected={isSelected}\n        $showBorder={showBorder}\n        width={columnWidth}\n      />\n      <ColumnResizer\n        height={height}\n        onColumnResize={onColumnResize}\n        columnIndex={columnIndex}\n        getResizerPosition={getResizerPosition}\n        columnWidth={columnWidth}\n        resizingState={resizingState}\n      />\n    </HeaderCellContainer>\n  );\n};\n\nconst Header = ({\n  scrolledVertical,\n  scrolledHorizontal,\n  showRowNumber,\n  rowNumberWidth,\n  minColumn,\n  maxColumn,\n  height,\n  getColumnWidth,\n  cell,\n  columnCount,\n  getSelectionType,\n  onColumnResize,\n  getColumnHorizontalPosition,\n  getResizerPosition,\n  showBorder,\n  resizingState,\n}: HeaderProps) => {\n  const selectedAllType = getSelectionType({\n    type: 'all',\n  });\n  return (\n    <HeaderContainer\n      $height={height}\n      $scrolledVertical={scrolledVertical}\n    >\n      <ScrollableHeaderContainer $left={rowNumberWidth}>\n        {Array.from(\n          { length: maxColumn - minColumn + 1 },\n          (_, index) => minColumn + index\n        ).map(columnIndex => (\n          <Column\n            key={`header-${columnIndex}`}\n            getSelectionType={getSelectionType}\n            columnIndex={columnIndex}\n            getColumnWidth={getColumnWidth}\n            getColumnHorizontalPosition={getColumnHorizontalPosition}\n            cell={cell}\n            isFirstColumn={columnIndex === 0 && !showRowNumber}\n            isLastColumn={columnIndex + 1 === columnCount}\n            onColumnResize={onColumnResize}\n            height={height}\n            getResizerPosition={getResizerPosition}\n            showBorder={showBorder}\n            resizingState={resizingState}\n          />\n        ))}\n      </ScrollableHeaderContainer>\n      {showRowNumber && (\n        <RowColumnContainer\n          $width={rowNumberWidth}\n          $height={height}\n          $columnPosition={0}\n          $scrolledHorizontal={scrolledHorizontal}\n        >\n          <RowColumn\n            data-selected={selectedAllType === 'selectDirect'}\n            $type=\"header\"\n            $isFirstRow\n            $isFirstColumn\n            $selectionType={selectedAllType}\n            $isLastRow={false}\n            $isLastColumn={false}\n            $height={height}\n            $isFocused={false}\n            $isSelectedLeft={false}\n            $isSelectedTop={false}\n            data-grid-row={-1}\n            data-grid-column={-1}\n            $showBorder={showBorder}\n          >\n            #\n          </RowColumn>\n        </RowColumnContainer>\n      )}\n    </HeaderContainer>\n  );\n};\n\nexport default Header;\n"],"names":["HeaderContainer","styled","div","withConfig","componentId","$height","$scrolledVertical","theme","click","grid","header","cell","color","stroke","default","ScrollableHeaderContainer","$left","HeaderCellContainer","$width","$columnPosition","selectDirect","RowColumnContainer","$scrolledHorizontal","RowColumn","StyledCell","Column","columnIndex","getColumnWidth","getColumnHorizontalPosition","getSelectionType","isFirstColumn","isLastColumn","onColumnResize","height","getResizerPosition","showBorder","resizingState","selectionType","column","type","leftSelectionType","columnPosition","isSelected","isSelectedLeft","columnWidth","Header","scrolledVertical","scrolledHorizontal","showRowNumber","rowNumberWidth","minColumn","maxColumn","columnCount","selectedAllType","Array","from","length","_","index","map"],"mappings":"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"}
+{"version":3,"file":"Header.js","sources":["../../../../src/components/Grid/Header.tsx"],"sourcesContent":["import { CSSProperties } from 'react';\nimport { cn } from '@/lib/cva';\nimport styles from './Header.module.css';\nimport {\n  CellProps,\n  ColumnResizeFn,\n  GetResizerPositionFn,\n  SelectionTypeFn,\n} from './types';\nimport { StyledCell } from './StyledCell';\nimport ColumnResizer from './ColumnResizer';\nimport { ResizingState } from './useResizingState';\n\ninterface HeaderProps {\n  showRowNumber: boolean;\n  rowNumberWidth: number;\n  minColumn: number;\n  maxColumn: number;\n  height: number;\n  getColumnWidth: (index: number) => number;\n  cell: CellProps;\n  getSelectionType: SelectionTypeFn;\n  columnCount: number;\n  onColumnResize: ColumnResizeFn;\n  getColumnHorizontalPosition: (columnIndex: number) => number;\n  scrolledVertical: boolean;\n  getResizerPosition: GetResizerPositionFn;\n  showBorder: boolean;\n  scrolledHorizontal: boolean;\n  resizingState: ResizingState;\n}\n\ninterface ColumnProps extends Pick<\n  HeaderProps,\n  | 'cell'\n  | 'getSelectionType'\n  | 'onColumnResize'\n  | 'getColumnWidth'\n  | 'height'\n  | 'getResizerPosition'\n  | 'showBorder'\n  | 'getColumnHorizontalPosition'\n  | 'resizingState'\n> {\n  columnIndex: number;\n  isLastColumn: boolean;\n}\n\nconst toCssSize = ($width: string | number): string =>\n  typeof $width === 'string' ? $width : `${$width}px`;\n\nconst Column = ({\n  columnIndex,\n  cell,\n  getColumnWidth,\n  getColumnHorizontalPosition,\n  getSelectionType,\n  isLastColumn,\n  onColumnResize,\n  height,\n  getResizerPosition,\n  showBorder,\n  resizingState,\n}: ColumnProps) => {\n  const selectionType = getSelectionType({\n    column: columnIndex,\n    type: 'column',\n  });\n  const leftSelectionType = getSelectionType({\n    column: columnIndex - 1,\n    type: 'column',\n  });\n  const columnPosition = getColumnHorizontalPosition(columnIndex);\n\n  const isSelected = selectionType === 'selectDirect';\n  const isSelectedLeft =\n    (leftSelectionType === 'selectDirect' || isSelected) &&\n    leftSelectionType !== selectionType;\n\n  const columnWidth = getColumnWidth(columnIndex);\n  return (\n    <div\n      className={styles['header__cell']}\n      style={\n        {\n          '--header-cell-width': toCssSize(columnWidth),\n          '--header-cell-height': `${height}px`,\n          '--header-cell-left': `${columnPosition}px`,\n        } as CSSProperties\n      }\n      data-header={columnIndex}\n    >\n      <StyledCell\n        $type=\"header\"\n        as={cell}\n        columnIndex={columnIndex}\n        type=\"header-cell\"\n        $selectionType={selectionType}\n        $isLastColumn={isLastColumn}\n        $isFocused={false}\n        $isSelectedLeft={isSelectedLeft}\n        $isSelectedTop={isSelected}\n        $isLastRow={false}\n        $height={height}\n        data-grid-row={-1}\n        data-grid-column={columnIndex}\n        data-selected={isSelected}\n        $showBorder={showBorder}\n        width={columnWidth}\n      />\n      <ColumnResizer\n        height={height}\n        onColumnResize={onColumnResize}\n        columnIndex={columnIndex}\n        getResizerPosition={getResizerPosition}\n        columnWidth={columnWidth}\n        resizingState={resizingState}\n      />\n    </div>\n  );\n};\n\nconst Header = ({\n  scrolledVertical,\n  scrolledHorizontal,\n  showRowNumber,\n  rowNumberWidth,\n  minColumn,\n  maxColumn,\n  height,\n  getColumnWidth,\n  cell,\n  columnCount,\n  getSelectionType,\n  onColumnResize,\n  getColumnHorizontalPosition,\n  getResizerPosition,\n  showBorder,\n  resizingState,\n}: HeaderProps) => {\n  const selectedAllType = getSelectionType({\n    type: 'all',\n  });\n  return (\n    <div\n      className={cn(\n        styles['header'],\n        scrolledVertical && styles['header_scrolled-vertical']\n      )}\n      style={{ '--header-height': `${height}px` } as CSSProperties}\n    >\n      <div\n        className={styles['header__scroll-area']}\n        style={{ '--header-scroll-area-left': `${rowNumberWidth}px` } as CSSProperties}\n      >\n        {Array.from(\n          { length: maxColumn - minColumn + 1 },\n          (_, index) => minColumn + index\n        ).map(columnIndex => (\n          <Column\n            key={`header-${columnIndex}`}\n            getSelectionType={getSelectionType}\n            columnIndex={columnIndex}\n            getColumnWidth={getColumnWidth}\n            getColumnHorizontalPosition={getColumnHorizontalPosition}\n            cell={cell}\n            isLastColumn={columnIndex + 1 === columnCount}\n            onColumnResize={onColumnResize}\n            height={height}\n            getResizerPosition={getResizerPosition}\n            showBorder={showBorder}\n            resizingState={resizingState}\n          />\n        ))}\n      </div>\n      {showRowNumber && (\n        <div\n          className={cn(\n            styles['header__cell'],\n            styles['header__row-column'],\n            scrolledHorizontal && styles['header__row-column_scrolled-horizontal']\n          )}\n          style={\n            {\n              '--header-cell-width': toCssSize(rowNumberWidth),\n              '--header-cell-height': `${height}px`,\n              '--header-cell-left': '0px',\n            } as CSSProperties\n          }\n        >\n          <StyledCell\n            data-align=\"right\"\n            data-selected={selectedAllType === 'selectDirect'}\n            $type=\"header\"\n            $selectionType={selectedAllType}\n            $isLastRow={false}\n            $isLastColumn={false}\n            $height={height}\n            $isFocused={false}\n            $isSelectedLeft={false}\n            $isSelectedTop={false}\n            data-grid-row={-1}\n            data-grid-column={-1}\n            $showBorder={showBorder}\n          >\n            #\n          </StyledCell>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Header;\n"],"names":["toCssSize","$width","Column","columnIndex","cell","getColumnWidth","getColumnHorizontalPosition","getSelectionType","isLastColumn","onColumnResize","height","getResizerPosition","showBorder","resizingState","selectionType","column","type","leftSelectionType","columnPosition","isSelected","isSelectedLeft","columnWidth","styles","Header","scrolledVertical","scrolledHorizontal","showRowNumber","rowNumberWidth","minColumn","maxColumn","columnCount","selectedAllType","cn","Array","from","length","_","index","map"],"mappings":"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"}

package/dist/esm/components/Grid/Header.module.css.js

@@ -0,0 +1,13 @@
+const header = "header__hXzAE";
+const header__cell = "header__cell__ZCE9p";
+const styles = {
+	header: header,
+	"header_scrolled-vertical": "header_scrolled-vertical__mIp2-",
+	"header__scroll-area": "header__scroll-area__Nok8G",
+	header__cell: header__cell,
+	"header__row-column": "header__row-column__ceu5w",
+	"header__row-column_scrolled-horizontal": "header__row-column_scrolled-horizontal__QZO4p"
+};
+
+export { styles as default, header, header__cell };
+//# sourceMappingURL=Header.module.css.js.map

package/dist/esm/components/Grid/Header.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/dist/esm/components/Grid/RowNumberColumn.css

@@ -0,0 +1,22 @@
+.row-number-column__n-aQm {
+  position: sticky;
+  top: var(--row-number-column-top);
+  left: 0;
+  width: var(--row-number-column-width);
+  height: 100%;
+}
+
+.row-number-column_scrolled-horizontal__L9fAB {
+  box-shadow: 0 0 0 1px var(--click-grid-header-cell-color-stroke-default);
+}
+
+.row-number-column__cell__00w03 {
+  position: absolute;
+  top: var(--row-number-cell-top);
+  left: 0;
+  width: 100%;
+  height: var(--row-number-cell-height);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/dist/esm/components/Grid/RowNumberColumn.js

@@ -1,36 +1,14 @@
+import "./RowNumberColumn.css";
 import { jsx } from 'react/jsx-runtime';
-import { styled } from 'styled-components';
+import { cn } from '../../lib/cva.js';
+import styles from './RowNumberColumn.module.css.js';
 import { StyledCell } from './StyledCell.js';
 
-const RowNumberColumnContainer = styled.div.withConfig({
-  componentId: "sc-7gbi4d-0"
-})(["position:sticky;left:0;", " ", ""], ({
-  $height,
-  $width
-}) => `
-    top: ${$height}px;
-    width: ${$width}px;
-    height: 100%;
-  `, ({
-  $scrolledHorizontal,
-  theme
-}) => $scrolledHorizontal ? `box-shadow: 0px 0 0px 1px ${theme.click.grid.header.cell.color.stroke.default};` : "");
-const RowNumberCell = styled.div.withConfig({
-  componentId: "sc-7gbi4d-1"
-})(["position:absolute;left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;", ""], ({
-  $height,
-  $rowNumber,
-  $rowAutoHeight
-}) => `
-    top: ${$height * $rowNumber}px;
-    height: ${$rowAutoHeight ? "100%" : `${$height}px`};
-  `);
 const RowNumber = ({
   rowIndex,
   rowHeight,
   getSelectionType,
   isLastRow,
-  isFirstRow,
   showBorder,
   rowStart,
   rowAutoHeight
@@ -46,7 +24,10 @@ const RowNumber = ({
     type: "row"
   });
   const isSelectedTop = (topSelectionType === "selectDirect" || isSelected) && topSelectionType !== selectionType;
-  return /* @__PURE__ */ jsx(RowNumberCell, { $rowNumber: rowIndex, $height: rowHeight, $rowAutoHeight: rowAutoHeight, children: /* @__PURE__ */ jsx(StyledCell, { $height: rowHeight, $isLastColumn: false, $selectionType: selectionType, $isFirstColumn: true, $type: "header", $isFirstRow: isFirstRow, $isFocused: false, $isLastRow: isLastRow, $isSelectedLeft: isSelected, $isSelectedTop: isSelectedTop, $rowAutoHeight: rowAutoHeight, "data-selected": isSelected, "data-grid-row": currentRowIndex, "data-grid-column": -1, "data-testid": `header-cell-${currentRowIndex}-x`, $showBorder: showBorder, "data-align": "right", children: currentRowIndex }) });
+  return /* @__PURE__ */ jsx("div", { className: styles["row-number-column__cell"], style: {
+    "--row-number-cell-top": `${rowHeight * rowIndex}px`,
+    "--row-number-cell-height": rowAutoHeight ? "100%" : `${rowHeight}px`
+  }, children: /* @__PURE__ */ jsx(StyledCell, { $height: rowHeight, $isLastColumn: false, $selectionType: selectionType, $type: "header", $isFocused: false, $isLastRow: isLastRow, $isSelectedLeft: isSelected, $isSelectedTop: isSelectedTop, $rowAutoHeight: rowAutoHeight, "data-selected": isSelected, "data-grid-row": currentRowIndex, "data-grid-column": -1, "data-testid": `header-cell-${currentRowIndex}-x`, $showBorder: showBorder, "data-align": "right", children: currentRowIndex }) });
 };
 const RowNumberColumn = ({
   minRow,
@@ -56,15 +37,17 @@ const RowNumberColumn = ({
   rowWidth,
   getSelectionType,
   rowCount,
-  showHeader,
   scrolledHorizontal,
   rowStart = 0,
   showBorder,
   rowAutoHeight
 }) => {
-  return /* @__PURE__ */ jsx(RowNumberColumnContainer, { $height: headerHeight, $width: rowWidth, $scrolledHorizontal: scrolledHorizontal, $rowAutoHeight: rowAutoHeight, children: Array.from({
+  return /* @__PURE__ */ jsx("div", { className: cn(styles["row-number-column"], scrolledHorizontal && styles["row-number-column_scrolled-horizontal"]), style: {
+    "--row-number-column-top": `${headerHeight}px`,
+    "--row-number-column-width": `${rowWidth}px`
+  }, children: Array.from({
     length: maxRow - minRow + 1
-  }, (_, index) => minRow + index).map((rowIndex) => /* @__PURE__ */ jsx(RowNumber, { getSelectionType, rowHeight, rowIndex, isLastRow: rowIndex === rowCount, isFirstRow: !showHeader && rowIndex === 0, showBorder, rowStart, rowAutoHeight }, `row-number-${rowIndex}`)) });
+  }, (_, index) => minRow + index).map((rowIndex) => /* @__PURE__ */ jsx(RowNumber, { getSelectionType, rowHeight, rowIndex, isLastRow: rowIndex === rowCount, showBorder, rowStart, rowAutoHeight }, `row-number-${rowIndex}`)) });
 };
 
 export { RowNumberColumn as default };

package/dist/esm/components/Grid/RowNumberColumn.js.map

@@ -1 +1 @@
-{"version":3,"file":"RowNumberColumn.js","sources":["../../../../src/components/Grid/RowNumberColumn.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport { SelectionTypeFn } from './types';\nimport { StyledCell } from './StyledCell';\nconst RowNumberColumnContainer = styled.div<{\n  $height: number;\n  $width: number;\n  $scrolledHorizontal: boolean;\n  $rowAutoHeight?: boolean;\n}>`\n  position: sticky;\n  left: 0;\n  ${({ $height, $width }) => `\n    top: ${$height}px;\n    width: ${$width}px;\n    height: 100%;\n  `}\n\n  ${({ $scrolledHorizontal, theme }) =>\n    $scrolledHorizontal\n      ? `box-shadow: 0px 0 0px 1px ${theme.click.grid.header.cell.color.stroke.default};`\n      : ''}\n`;\n\nconst RowNumberCell = styled.div<{\n  $height: number;\n  $rowNumber: number;\n  $rowAutoHeight?: boolean;\n}>`\n  position: absolute;\n  left: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n  ${({ $height, $rowNumber, $rowAutoHeight }) => `\n    top: ${$height * $rowNumber}px;\n    height: ${$rowAutoHeight ? '100%' : `${$height}px`};\n  `}\n`;\ninterface RowNumberColumnProps {\n  minRow: number;\n  maxRow: number;\n  rowHeight: number;\n  headerHeight: number;\n  rowWidth: number;\n  getSelectionType: SelectionTypeFn;\n  rowCount: number;\n  showHeader: boolean;\n  scrolledHorizontal: boolean;\n  rowStart: number;\n  showBorder: boolean;\n  rowAutoHeight?: boolean;\n}\ninterface RowNumberProps extends Pick<\n  RowNumberColumnProps,\n  'rowHeight' | 'getSelectionType' | 'showBorder' | 'rowStart'\n> {\n  rowIndex: number;\n  isLastRow: boolean;\n  isFirstRow: boolean;\n  rowAutoHeight?: boolean;\n}\nconst RowNumber = ({\n  rowIndex,\n  rowHeight,\n  getSelectionType,\n  isLastRow,\n  isFirstRow,\n  showBorder,\n  rowStart,\n  rowAutoHeight,\n}: RowNumberProps) => {\n  const currentRowIndex = rowIndex + rowStart;\n  const selectionType = getSelectionType({\n    row: currentRowIndex,\n    type: 'row',\n  });\n  const isSelected = selectionType === 'selectDirect';\n  const topSelectionType = getSelectionType({\n    row: currentRowIndex - 1,\n    type: 'row',\n  });\n  const isSelectedTop =\n    (topSelectionType === 'selectDirect' || isSelected) &&\n    topSelectionType !== selectionType;\n\n  return (\n    <RowNumberCell\n      $rowNumber={rowIndex}\n      $height={rowHeight}\n      $rowAutoHeight={rowAutoHeight}\n    >\n      <StyledCell\n        $height={rowHeight}\n        $isLastColumn={false}\n        $selectionType={selectionType}\n        $isFirstColumn\n        $type=\"header\"\n        $isFirstRow={isFirstRow}\n        $isFocused={false}\n        $isLastRow={isLastRow}\n        $isSelectedLeft={isSelected}\n        $isSelectedTop={isSelectedTop}\n        $rowAutoHeight={rowAutoHeight}\n        data-selected={isSelected}\n        data-grid-row={currentRowIndex}\n        data-grid-column={-1}\n        data-testid={`header-cell-${currentRowIndex}-x`}\n        $showBorder={showBorder}\n        data-align=\"right\"\n      >\n        {currentRowIndex}\n      </StyledCell>\n    </RowNumberCell>\n  );\n};\n\nconst RowNumberColumn = ({\n  minRow,\n  maxRow,\n  rowHeight,\n  headerHeight,\n  rowWidth,\n  getSelectionType,\n  rowCount,\n  showHeader,\n  scrolledHorizontal,\n  rowStart = 0,\n  showBorder,\n  rowAutoHeight,\n}: RowNumberColumnProps) => {\n  return (\n    <RowNumberColumnContainer\n      $height={headerHeight}\n      $width={rowWidth}\n      $scrolledHorizontal={scrolledHorizontal}\n      $rowAutoHeight={rowAutoHeight}\n    >\n      {Array.from({ length: maxRow - minRow + 1 }, (_, index) => minRow + index).map(\n        rowIndex => (\n          <RowNumber\n            key={`row-number-${rowIndex}`}\n            getSelectionType={getSelectionType}\n            rowHeight={rowHeight}\n            rowIndex={rowIndex}\n            isLastRow={rowIndex === rowCount}\n            isFirstRow={!showHeader && rowIndex === 0}\n            showBorder={showBorder}\n            rowStart={rowStart}\n            rowAutoHeight={rowAutoHeight}\n          />\n        )\n      )}\n    </RowNumberColumnContainer>\n  );\n};\n\nexport default RowNumberColumn;\n"],"names":["RowNumberColumnContainer","styled","div","withConfig","componentId","$height","$width","$scrolledHorizontal","theme","click","grid","header","cell","color","stroke","default","RowNumberCell","$rowNumber","$rowAutoHeight","RowNumber","rowIndex","rowHeight","getSelectionType","isLastRow","isFirstRow","showBorder","rowStart","rowAutoHeight","currentRowIndex","selectionType","row","type","isSelected","topSelectionType","isSelectedTop","RowNumberColumn","minRow","maxRow","headerHeight","rowWidth","rowCount","showHeader","scrolledHorizontal","Array","from","length","_","index","map"],"mappings":"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"}
+{"version":3,"file":"RowNumberColumn.js","sources":["../../../../src/components/Grid/RowNumberColumn.tsx"],"sourcesContent":["import { CSSProperties } from 'react';\nimport { cn } from '@/lib/cva';\nimport styles from './RowNumberColumn.module.css';\nimport { SelectionTypeFn } from './types';\nimport { StyledCell } from './StyledCell';\n\ninterface RowNumberColumnProps {\n  minRow: number;\n  maxRow: number;\n  rowHeight: number;\n  headerHeight: number;\n  rowWidth: number;\n  getSelectionType: SelectionTypeFn;\n  rowCount: number;\n  scrolledHorizontal: boolean;\n  rowStart: number;\n  showBorder: boolean;\n  rowAutoHeight?: boolean;\n}\ninterface RowNumberProps extends Pick<\n  RowNumberColumnProps,\n  'rowHeight' | 'getSelectionType' | 'showBorder' | 'rowStart'\n> {\n  rowIndex: number;\n  isLastRow: boolean;\n  rowAutoHeight?: boolean;\n}\nconst RowNumber = ({\n  rowIndex,\n  rowHeight,\n  getSelectionType,\n  isLastRow,\n  showBorder,\n  rowStart,\n  rowAutoHeight,\n}: RowNumberProps) => {\n  const currentRowIndex = rowIndex + rowStart;\n  const selectionType = getSelectionType({\n    row: currentRowIndex,\n    type: 'row',\n  });\n  const isSelected = selectionType === 'selectDirect';\n  const topSelectionType = getSelectionType({\n    row: currentRowIndex - 1,\n    type: 'row',\n  });\n  const isSelectedTop =\n    (topSelectionType === 'selectDirect' || isSelected) &&\n    topSelectionType !== selectionType;\n\n  return (\n    <div\n      className={styles['row-number-column__cell']}\n      style={\n        {\n          '--row-number-cell-top': `${rowHeight * rowIndex}px`,\n          '--row-number-cell-height': rowAutoHeight ? '100%' : `${rowHeight}px`,\n        } as CSSProperties\n      }\n    >\n      <StyledCell\n        $height={rowHeight}\n        $isLastColumn={false}\n        $selectionType={selectionType}\n        $type=\"header\"\n        $isFocused={false}\n        $isLastRow={isLastRow}\n        $isSelectedLeft={isSelected}\n        $isSelectedTop={isSelectedTop}\n        $rowAutoHeight={rowAutoHeight}\n        data-selected={isSelected}\n        data-grid-row={currentRowIndex}\n        data-grid-column={-1}\n        data-testid={`header-cell-${currentRowIndex}-x`}\n        $showBorder={showBorder}\n        data-align=\"right\"\n      >\n        {currentRowIndex}\n      </StyledCell>\n    </div>\n  );\n};\n\nconst RowNumberColumn = ({\n  minRow,\n  maxRow,\n  rowHeight,\n  headerHeight,\n  rowWidth,\n  getSelectionType,\n  rowCount,\n  scrolledHorizontal,\n  rowStart = 0,\n  showBorder,\n  rowAutoHeight,\n}: RowNumberColumnProps) => {\n  return (\n    <div\n      className={cn(\n        styles['row-number-column'],\n        scrolledHorizontal && styles['row-number-column_scrolled-horizontal']\n      )}\n      style={\n        {\n          '--row-number-column-top': `${headerHeight}px`,\n          '--row-number-column-width': `${rowWidth}px`,\n        } as CSSProperties\n      }\n    >\n      {Array.from({ length: maxRow - minRow + 1 }, (_, index) => minRow + index).map(\n        rowIndex => (\n          <RowNumber\n            key={`row-number-${rowIndex}`}\n            getSelectionType={getSelectionType}\n            rowHeight={rowHeight}\n            rowIndex={rowIndex}\n            isLastRow={rowIndex === rowCount}\n            showBorder={showBorder}\n            rowStart={rowStart}\n            rowAutoHeight={rowAutoHeight}\n          />\n        )\n      )}\n    </div>\n  );\n};\n\nexport default RowNumberColumn;\n"],"names":["RowNumber","rowIndex","rowHeight","getSelectionType","isLastRow","showBorder","rowStart","rowAutoHeight","currentRowIndex","selectionType","row","type","isSelected","topSelectionType","isSelectedTop","styles","RowNumberColumn","minRow","maxRow","headerHeight","rowWidth","rowCount","scrolledHorizontal","cn","Array","from","length","_","index","map"],"mappings":"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"}

package/dist/esm/components/Grid/RowNumberColumn.module.css.js

@@ -0,0 +1,8 @@
+const styles = {
+	"row-number-column": "row-number-column__n-aQm",
+	"row-number-column_scrolled-horizontal": "row-number-column_scrolled-horizontal__L9fAB",
+	"row-number-column__cell": "row-number-column__cell__00w03"
+};
+
+export { styles as default };
+//# sourceMappingURL=RowNumberColumn.module.css.js.map

package/dist/esm/components/Grid/RowNumberColumn.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowNumberColumn.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/esm/components/Grid/StyledCell.css

@@ -0,0 +1,146 @@
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. selectDirect) */
+
+/*
+ * The original styled-component dispatches background / text colour / border
+ * colour off `$type` (body|header) and `$selectionType`, and toggles individual
+ * borders / a `::before` overlay off boolean flags. Colours are aliased to local
+ * custom properties (set by the type + selection modifiers) so the shared border
+ * / overlay rules can reference them once.
+ */
+
+.cell__OXAxg {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--cell-space-y) var(--cell-space-x);
+  overflow: hidden;
+  border-top: 1px solid var(--cell-stroke-default);
+  border-left: 1px solid var(--cell-stroke-default);
+  background: var(--cell-background);
+  color: var(--cell-color);
+  font: var(--click-grid-cell-text-default);
+  text-align: left;
+  white-space: nowrap;
+  cursor: default;
+  text-overflow: ellipsis;
+}
+
+.cell__OXAxg[data-align='right'] {
+  text-align: right;
+}
+
+.cell_type_body__SohuF {
+  --cell-stroke-default: var(--click-grid-body-cell-color-stroke-default);
+  --cell-stroke-select-direct: var(--click-grid-body-cell-color-stroke-selectDirect);
+  --cell-stroke-last: var(--click-grid-body-cell-color-stroke-default);
+  --cell-space-y: var(--click-grid-body-cell-space-y);
+  --cell-space-x: var(--click-grid-body-cell-space-x);
+  --cell-background: var(--click-grid-body-cell-color-background-default);
+  --cell-color: var(--click-grid-body-cell-color-text-default);
+}
+
+.cell_type_body__SohuF.cell_selection_indirect__6e6yy {
+  --cell-stroke-last: var(--click-grid-body-cell-color-stroke-selectIndirect);
+  --cell-background: var(--click-grid-body-cell-color-background-selectIndirect);
+  --cell-color: var(--click-grid-body-cell-color-text-selectIndirect);
+}
+
+.cell_type_body__SohuF.cell_selection_direct__QEL9m {
+  --cell-stroke-last: var(--click-grid-body-cell-color-stroke-selectDirect);
+  --cell-background: var(--click-grid-body-cell-color-background-selectDirect);
+  --cell-color: var(--click-grid-body-cell-color-text-selectDirect);
+}
+
+.cell_type_header__3tsr- {
+  --cell-stroke-default: var(--click-grid-header-cell-color-stroke-default);
+  --cell-stroke-select-direct: var(--click-grid-header-cell-color-stroke-selectDirect);
+  --cell-stroke-last: var(--click-grid-header-cell-color-stroke-default);
+  --cell-space-y: var(--click-grid-header-cell-space-y);
+  --cell-space-x: var(--click-grid-header-cell-space-x);
+  --cell-background: var(--click-grid-header-cell-color-background-default);
+  --cell-color: var(--click-grid-header-cell-color-title-default);
+}
+
+.cell_type_header__3tsr-.cell_selection_indirect__6e6yy {
+  --cell-stroke-last: var(--click-grid-header-cell-color-stroke-selectIndirect);
+  --cell-background: var(--click-grid-header-cell-color-background-selectIndirect);
+  --cell-color: var(--click-grid-header-cell-color-title-selectIndirect);
+}
+
+.cell_type_header__3tsr-.cell_selection_direct__QEL9m {
+  --cell-stroke-last: var(--click-grid-header-cell-color-stroke-selectDirect);
+  --cell-background: var(--click-grid-header-cell-color-background-selectDirect);
+  --cell-color: var(--click-grid-header-cell-color-title-selectDirect);
+}
+
+/* header cell with no border removes top/left edges on the corner cells */
+.cell_type_header__3tsr-.cell_no-border__9gXDK[data-grid-row='-1'] {
+  border-top: none;
+}
+
+.cell_type_header__3tsr-.cell_no-border__9gXDK[data-grid-column='-1'] {
+  border-left: none;
+}
+
+/* a focused cell draws its last-edge borders with the select-direct stroke */
+.cell_focused__cmh-b {
+  box-shadow: inset 0 0 0 1px var(--cell-stroke-select-direct);
+}
+
+/*
+ * Focus must win the last-edge stroke colour over any selection state. The
+ * original styled-component resolved the last-row / last-column border colour
+ * inline as `stroke[$isFocused ? 'selectDirect' : $selectionType]`, so focus
+ * always overrode the selection stroke. The `.cell_type_*.cell_selection_*`
+ * rules above set `--cell-stroke-last` at (0,2,0) specificity, so the focus
+ * override is qualified with the type class to match that specificity and,
+ * coming later in source order, take precedence. `.cell_focused` always
+ * co-occurs with a type class.
+ */
+.cell_type_body__SohuF.cell_focused__cmh-b,
+.cell_type_header__3tsr-.cell_focused__cmh-b {
+  --cell-stroke-last: var(--cell-stroke-select-direct);
+}
+
+/* only the last row/column draw the closing border, colored by focus/selection */
+.cell_last-row__DoJdk {
+  border-bottom: 1px solid var(--cell-stroke-last);
+}
+
+.cell_last-column__LgKM7 {
+  border-right: 1px solid var(--cell-stroke-last);
+}
+
+/* rowAutoHeight resets the entire border last, overriding every rule above */
+.cell_row-auto-height__yzQUR {
+  min-height: auto;
+  overflow-y: auto;
+  border: none;
+}
+
+/* selection / focus overlay drawn on top of the cell so adjacent borders meet */
+.cell__overlay__U9XGO::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+}
+
+.cell__overlay_selected_top__OMUJB::before {
+  border-top: 1px solid var(--cell-stroke-select-direct);
+}
+
+.cell__overlay_selected_left__MiimG::before {
+  border-left: 1px solid var(--cell-stroke-select-direct);
+}
+
+.cell__overlay_selected_bottom__2ra9F::before {
+  border-bottom: 1px solid var(--cell-stroke-select-direct);
+}
+
+.cell__overlay_selected_right__Dt-g5::before {
+  border-right: 1px solid var(--cell-stroke-select-direct);
+}
+
+.cell__overlay_row-auto-height__teKk1::before {
+  border: none;
+}

package/dist/esm/components/Grid/StyledCell.js

@@ -1,66 +1,94 @@
-import { styled } from 'styled-components';
+import "./StyledCell.css";
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../lib/cva.js';
+import styles from './StyledCell.module.css.js';
+import { cva } from 'class-variance-authority';
 
-const StyledCell = styled.div.withConfig({
-  componentId: "sc-30izhw-0"
-})(["display:block;text-align:left;&[data-align='right']{text-align:right;}overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default;width:100%;box-sizing:border-box;", " ", ";"], ({
-  theme,
+const cellVariants = cva(styles.cell, {
+  variants: {
+    type: {
+      body: styles.cell_type_body,
+      header: styles.cell_type_header
+    },
+    selection: {
+      default: null,
+      selectDirect: styles["cell_selection_direct"],
+      selectIndirect: styles["cell_selection_indirect"]
+    },
+    noBorder: {
+      true: styles["cell_no-border"]
+    },
+    focused: {
+      true: styles.cell_focused
+    },
+    lastRow: {
+      true: styles["cell_last-row"]
+    },
+    lastColumn: {
+      true: styles["cell_last-column"]
+    },
+    rowAutoHeight: {
+      true: styles["cell_row-auto-height"]
+    },
+    overlay: {
+      true: styles.cell__overlay
+    },
+    overlayTop: {
+      true: styles["cell__overlay_selected_top"]
+    },
+    overlayLeft: {
+      true: styles["cell__overlay_selected_left"]
+    },
+    overlayBottom: {
+      true: styles["cell__overlay_selected_bottom"]
+    },
+    overlayRight: {
+      true: styles["cell__overlay_selected_right"]
+    },
+    overlayAutoHeight: {
+      true: styles["cell__overlay_row-auto-height"]
+    }
+  }
+});
+const StyledCell = ({
+  as,
   $isFocused,
+  $selectionType,
+  $isSelectedTop,
+  $isSelectedLeft,
   $isLastRow,
   $isLastColumn,
-  $selectionType,
   $height,
   $type = "body",
   $showBorder,
-  $rowAutoHeight
-}) => `
-    height: ${$rowAutoHeight ? "100%" : `${$height}px`};
-    min-height: ${$rowAutoHeight ? "auto" : ""};
-    overflow-y: ${$rowAutoHeight ? "auto" : ""};
-    background: ${theme.click.grid[$type].cell.color.background[$selectionType]};
-    color: ${$type === "header" ? theme.click.grid.header.cell.color.title[$selectionType] : theme.click.grid.body.cell.color.text[$selectionType]};
-    font: ${theme.click.grid.cell.text.default};
-    padding: ${theme.click.grid[$type].cell.space.y} ${theme.click.grid[$type].cell.space.x};
-    border: 1px solid ${theme.click.grid[$type].cell.color.stroke.default};
-    ${$type === "header" && !$showBorder ? `
-      &[data-grid-row="-1"] {
-        border-top: none;
-      }
-      &[data-grid-column="-1"] {
-        border-left: none;
-      }
-    ` : ""}
-    ${$isFocused ? `box-shadow: inset 0 0 0 1px ${theme.click.grid[$type].cell.color.stroke.selectDirect};` : ""}
-    ${$isLastRow ? `
-        border-bottom-color: ${theme.click.grid[$type].cell.color.stroke[$isFocused ? "selectDirect" : $selectionType]};
-    ` : "border-bottom: none;"}
-    ${$isLastColumn ? `
-        border-right-color: ${theme.click.grid[$type].cell.color.stroke[$isFocused ? "selectDirect" : $selectionType]};
-    ` : "border-right: none;"}
-    ${$rowAutoHeight && "border: none;"}
-  `, ({
-  theme,
-  $isLastRow,
-  $isLastColumn,
-  $selectionType,
-  $type = "body",
-  $isSelectedTop,
-  $isSelectedLeft,
-  $rowAutoHeight
-}) => $isSelectedTop || $isSelectedLeft || $selectionType === "selectDirect" && ($isLastRow || $isLastColumn) || $rowAutoHeight ? `
-          &::before {
-            content: "";
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            right: 0;
-            left: 0;
-            ${$isSelectedTop ? `border-top: 1px solid ${theme.click.grid[$type].cell.color.stroke.selectDirect};` : ""}
-            ${$isSelectedLeft ? `border-left: 1px solid ${theme.click.grid[$type].cell.color.stroke.selectDirect};` : ""}
-            ${$selectionType === "selectDirect" && $isLastRow ? `border-bottom: 1px solid ${theme.click.grid[$type].cell.color.stroke.selectDirect};` : ""}
-            ${$selectionType === "selectDirect" && $isLastColumn ? `border-right: 1px solid ${theme.click.grid[$type].cell.color.stroke.selectDirect};` : ""}
-            ${$rowAutoHeight && "border: none;"}
-          }
-        ` : "");
+  $rowAutoHeight,
+  className,
+  style,
+  children,
+  ...props
+}) => {
+  const Component = as ?? "div";
+  const hasOverlay = $isSelectedTop || $isSelectedLeft || $selectionType === "selectDirect" && ($isLastRow || $isLastColumn) || !!$rowAutoHeight;
+  const mergedStyle = {
+    height: $rowAutoHeight ? "100%" : `${$height}px`,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(Component, { className: cn(cellVariants({
+    type: $type,
+    selection: $selectionType,
+    noBorder: $type === "header" && !$showBorder,
+    focused: $isFocused,
+    lastRow: $isLastRow,
+    lastColumn: $isLastColumn,
+    rowAutoHeight: !!$rowAutoHeight,
+    overlay: hasOverlay,
+    overlayTop: $isSelectedTop,
+    overlayLeft: $isSelectedLeft,
+    overlayBottom: $selectionType === "selectDirect" && $isLastRow,
+    overlayRight: $selectionType === "selectDirect" && $isLastColumn,
+    overlayAutoHeight: !!$rowAutoHeight
+  }), className), style: mergedStyle, ...props, children });
+};
 
 export { StyledCell };
 //# sourceMappingURL=StyledCell.js.map

package/dist/esm/components/Grid/StyledCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"StyledCell.js","sources":["../../../../src/components/Grid/StyledCell.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport { SelectionType } from './types';\n\nexport const StyledCell = styled.div<{\n  $isFocused: boolean;\n  $selectionType: SelectionType;\n  $isSelectedTop: boolean;\n  $isSelectedLeft: boolean;\n  $isLastRow: boolean;\n  $isLastColumn: boolean;\n  $isFirstRow: boolean;\n  $isFirstColumn: boolean;\n  $height: number;\n  $type?: 'body' | 'header';\n  $showBorder: boolean;\n  $rowAutoHeight?: boolean;\n}>`\n  display: block;\n  text-align: left;\n  &[data-align='right'] {\n    text-align: right;\n  }\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  cursor: default;\n  width: 100%;\n  box-sizing: border-box;\n  ${({\n    theme,\n    $isFocused,\n    $isLastRow,\n    $isLastColumn,\n    $selectionType,\n    $height,\n    $type = 'body',\n    $showBorder,\n    $rowAutoHeight,\n  }) => `\n    height: ${$rowAutoHeight ? '100%' : `${$height}px`};\n    min-height: ${$rowAutoHeight ? 'auto' : ''};\n    overflow-y: ${$rowAutoHeight ? 'auto' : ''};\n    background: ${theme.click.grid[$type].cell.color.background[$selectionType]};\n    color: ${\n      $type === 'header'\n        ? theme.click.grid.header.cell.color.title[$selectionType]\n        : theme.click.grid.body.cell.color.text[$selectionType]\n    };\n    font: ${theme.click.grid.cell.text.default};\n    padding: ${theme.click.grid[$type].cell.space.y} ${\n      theme.click.grid[$type].cell.space.x\n    };\n    border: 1px solid ${theme.click.grid[$type].cell.color.stroke.default};\n    ${\n      $type === 'header' && !$showBorder\n        ? `\n      &[data-grid-row=\"-1\"] {\n        border-top: none;\n      }\n      &[data-grid-column=\"-1\"] {\n        border-left: none;\n      }\n    `\n        : ''\n    }\n    ${\n      $isFocused\n        ? `box-shadow: inset 0 0 0 1px ${theme.click.grid[$type].cell.color.stroke.selectDirect};`\n        : ''\n    }\n    ${\n      $isLastRow\n        ? `\n        border-bottom-color: ${\n          theme.click.grid[$type].cell.color.stroke[\n            $isFocused ? 'selectDirect' : $selectionType\n          ]\n        };\n    `\n        : 'border-bottom: none;'\n    }\n    ${\n      $isLastColumn\n        ? `\n        border-right-color: ${\n          theme.click.grid[$type].cell.color.stroke[\n            $isFocused ? 'selectDirect' : $selectionType\n          ]\n        };\n    `\n        : 'border-right: none;'\n    }\n    ${$rowAutoHeight && 'border: none;'}\n  `}\n  ${({\n    theme,\n    $isLastRow,\n    $isLastColumn,\n    $selectionType,\n    $type = 'body',\n    $isSelectedTop,\n    $isSelectedLeft,\n    $rowAutoHeight,\n  }) =>\n    $isSelectedTop ||\n    $isSelectedLeft ||\n    ($selectionType === 'selectDirect' && ($isLastRow || $isLastColumn)) ||\n    $rowAutoHeight\n      ? `\n          &::before {\n            content: \"\";\n            position: absolute;\n            top: 0;\n            bottom: 0;\n            right: 0;\n            left: 0;\n            ${\n              $isSelectedTop\n                ? `border-top: 1px solid ${theme.click.grid[$type].cell.color.stroke.selectDirect};`\n                : ''\n            }\n            ${\n              $isSelectedLeft\n                ? `border-left: 1px solid ${theme.click.grid[$type].cell.color.stroke.selectDirect};`\n                : ''\n            }\n            ${\n              $selectionType === 'selectDirect' && $isLastRow\n                ? `border-bottom: 1px solid ${theme.click.grid[$type].cell.color.stroke.selectDirect};`\n                : ''\n            }\n            ${\n              $selectionType === 'selectDirect' && $isLastColumn\n                ? `border-right: 1px solid ${theme.click.grid[$type].cell.color.stroke.selectDirect};`\n                : ''\n            }\n            ${$rowAutoHeight && 'border: none;'}\n          }\n        `\n      : ''};\n`;\n"],"names":["StyledCell","styled","div","withConfig","componentId","theme","$isFocused","$isLastRow","$isLastColumn","$selectionType","$height","$type","$showBorder","$rowAutoHeight","click","grid","cell","color","background","header","title","body","text","default","space","y","x","stroke","selectDirect","$isSelectedTop","$isSelectedLeft"],"mappings":"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"}
+{"version":3,"file":"StyledCell.js","sources":["../../../../src/components/Grid/StyledCell.tsx"],"sourcesContent":["import { ComponentProps, CSSProperties, ElementType, ReactNode } from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './StyledCell.module.css';\nimport { SelectionType } from './types';\n\ninterface StyledCellOwnProps {\n  $isFocused: boolean;\n  $selectionType: SelectionType;\n  $isSelectedTop: boolean;\n  $isSelectedLeft: boolean;\n  $isLastRow: boolean;\n  $isLastColumn: boolean;\n  $height: number;\n  $type?: 'body' | 'header';\n  $showBorder: boolean;\n  $rowAutoHeight?: boolean;\n}\n\nconst cellVariants = cva(styles.cell, {\n  variants: {\n    type: {\n      body: styles.cell_type_body,\n      header: styles.cell_type_header,\n    },\n    selection: {\n      default: null,\n      selectDirect: styles['cell_selection_direct'],\n      selectIndirect: styles['cell_selection_indirect'],\n    },\n    noBorder: { true: styles['cell_no-border'] },\n    focused: { true: styles.cell_focused },\n    lastRow: { true: styles['cell_last-row'] },\n    lastColumn: { true: styles['cell_last-column'] },\n    rowAutoHeight: { true: styles['cell_row-auto-height'] },\n    overlay: { true: styles.cell__overlay },\n    overlayTop: { true: styles['cell__overlay_selected_top'] },\n    overlayLeft: { true: styles['cell__overlay_selected_left'] },\n    overlayBottom: { true: styles['cell__overlay_selected_bottom'] },\n    overlayRight: { true: styles['cell__overlay_selected_right'] },\n    overlayAutoHeight: { true: styles['cell__overlay_row-auto-height'] },\n  },\n});\n\ntype StyledCellProps<T extends ElementType> = StyledCellOwnProps & {\n  as?: T;\n  children?: ReactNode;\n} & Omit<ComponentProps<T>, keyof StyledCellOwnProps | 'as' | 'children'>;\n\nexport const StyledCell = <T extends ElementType = 'div'>({\n  as,\n  $isFocused,\n  $selectionType,\n  $isSelectedTop,\n  $isSelectedLeft,\n  $isLastRow,\n  $isLastColumn,\n  $height,\n  $type = 'body',\n  $showBorder,\n  $rowAutoHeight,\n  className,\n  style,\n  children,\n  ...props\n}: StyledCellProps<T>) => {\n  const Component = (as ?? 'div') as ElementType;\n  // A single overlay `::before` is drawn whenever any selection/focus edge or\n  // auto-height needs to paint on top of the cell (see Grid.module.css).\n  const hasOverlay =\n    $isSelectedTop ||\n    $isSelectedLeft ||\n    ($selectionType === 'selectDirect' && ($isLastRow || $isLastColumn)) ||\n    !!$rowAutoHeight;\n  const mergedStyle = {\n    height: $rowAutoHeight ? '100%' : `${$height}px`,\n    ...style,\n  } as CSSProperties;\n  return (\n    <Component\n      className={cn(\n        cellVariants({\n          type: $type,\n          selection: $selectionType,\n          noBorder: $type === 'header' && !$showBorder,\n          focused: $isFocused,\n          lastRow: $isLastRow,\n          lastColumn: $isLastColumn,\n          rowAutoHeight: !!$rowAutoHeight,\n          overlay: hasOverlay,\n          overlayTop: $isSelectedTop,\n          overlayLeft: $isSelectedLeft,\n          overlayBottom: $selectionType === 'selectDirect' && $isLastRow,\n          overlayRight: $selectionType === 'selectDirect' && $isLastColumn,\n          overlayAutoHeight: !!$rowAutoHeight,\n        }),\n        className\n      )}\n      style={mergedStyle}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"names":["cellVariants","cva","styles","cell","variants","type","body","cell_type_body","header","cell_type_header","selection","default","selectDirect","selectIndirect","noBorder","true","focused","cell_focused","lastRow","lastColumn","rowAutoHeight","overlay","cell__overlay","overlayTop","overlayLeft","overlayBottom","overlayRight","overlayAutoHeight","StyledCell","as","$isFocused","$selectionType","$isSelectedTop","$isSelectedLeft","$isLastRow","$isLastColumn","$height","$type","$showBorder","$rowAutoHeight","className","style","children","props","Component","hasOverlay","mergedStyle","height","cn"],"mappings":";;;;;AAkBA,MAAMA,YAAAA,GAAeC,GAAAA,CAAIC,MAAAA,CAAOC,IAAAA,EAAM;AAAA,EACpCC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,MAAMJ,MAAAA,CAAOK,cAAAA;AAAAA,MACbC,QAAQN,MAAAA,CAAOO;AAAAA,KACjB;AAAA,IACAC,SAAAA,EAAW;AAAA,MACTC,OAAAA,EAAS,IAAA;AAAA,MACTC,YAAAA,EAAcV,OAAO,uBAAuB,CAAA;AAAA,MAC5CW,cAAAA,EAAgBX,OAAO,yBAAyB;AAAA,KAClD;AAAA,IACAY,QAAAA,EAAU;AAAA,MAAEC,IAAAA,EAAMb,OAAO,gBAAgB;AAAA,KAAE;AAAA,IAC3Cc,OAAAA,EAAS;AAAA,MAAED,MAAMb,MAAAA,CAAOe;AAAAA,KAAa;AAAA,IACrCC,OAAAA,EAAS;AAAA,MAAEH,IAAAA,EAAMb,OAAO,eAAe;AAAA,KAAE;AAAA,IACzCiB,UAAAA,EAAY;AAAA,MAAEJ,IAAAA,EAAMb,OAAO,kBAAkB;AAAA,KAAE;AAAA,IAC/CkB,aAAAA,EAAe;AAAA,MAAEL,IAAAA,EAAMb,OAAO,sBAAsB;AAAA,KAAE;AAAA,IACtDmB,OAAAA,EAAS;AAAA,MAAEN,MAAMb,MAAAA,CAAOoB;AAAAA,KAAc;AAAA,IACtCC,UAAAA,EAAY;AAAA,MAAER,IAAAA,EAAMb,OAAO,4BAA4B;AAAA,KAAE;AAAA,IACzDsB,WAAAA,EAAa;AAAA,MAAET,IAAAA,EAAMb,OAAO,6BAA6B;AAAA,KAAE;AAAA,IAC3DuB,aAAAA,EAAe;AAAA,MAAEV,IAAAA,EAAMb,OAAO,+BAA+B;AAAA,KAAE;AAAA,IAC/DwB,YAAAA,EAAc;AAAA,MAAEX,IAAAA,EAAMb,OAAO,8BAA8B;AAAA,KAAE;AAAA,IAC7DyB,iBAAAA,EAAmB;AAAA,MAAEZ,IAAAA,EAAMb,OAAO,+BAA+B;AAAA;AAAE;AAEvE,CAAC,CAAA;AAOM,MAAM0B,aAAa,CAAgC;AAAA,EACxDC,EAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,KAAAA,GAAQ,MAAA;AAAA,EACRC,WAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACA,GAAGC;AACe,CAAA,KAAM;AACxB,EAAA,MAAMC,YAAaf,EAAAA,IAAM,KAAA;AAGzB,EAAA,MAAMgB,UAAAA,GACJb,kBACAC,eAAAA,IACCF,cAAAA,KAAmB,mBAAmBG,UAAAA,IAAcC,aAAAA,CAAAA,IACrD,CAAC,CAACI,cAAAA;AACJ,EAAA,MAAMO,WAAAA,GAAc;AAAA,IAClBC,MAAAA,EAAQR,cAAAA,GAAiB,MAAA,GAAS,CAAA,EAAGH,OAAO,CAAA,EAAA,CAAA;AAAA,IAC5C,GAAGK;AAAAA,GACL;AACA,EAAA,uBACE,GAAA,CAAC,SAAA,EAAA,EACC,SAAA,EAAWO,EAAAA,CACThD,YAAAA,CAAa;AAAA,IACXK,IAAAA,EAAMgC,KAAAA;AAAAA,IACN3B,SAAAA,EAAWqB,cAAAA;AAAAA,IACXjB,QAAAA,EAAUuB,KAAAA,KAAU,QAAA,IAAY,CAACC,WAAAA;AAAAA,IACjCtB,OAAAA,EAASc,UAAAA;AAAAA,IACTZ,OAAAA,EAASgB,UAAAA;AAAAA,IACTf,UAAAA,EAAYgB,aAAAA;AAAAA,IACZf,aAAAA,EAAe,CAAC,CAACmB,cAAAA;AAAAA,IACjBlB,OAAAA,EAASwB,UAAAA;AAAAA,IACTtB,UAAAA,EAAYS,cAAAA;AAAAA,IACZR,WAAAA,EAAaS,eAAAA;AAAAA,IACbR,aAAAA,EAAeM,mBAAmB,cAAA,IAAkBG,UAAAA;AAAAA,IACpDR,YAAAA,EAAcK,mBAAmB,cAAA,IAAkBI,aAAAA;AAAAA,IACnDR,iBAAAA,EAAmB,CAAC,CAACY;AAAAA,GACtB,GACDC,SACF,CAAA,EACA,OAAOM,WAAAA,EACP,GAAIH,OAEHD,QAAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/esm/components/Grid/StyledCell.module.css.js

@@ -0,0 +1,32 @@
+const cell = "cell__OXAxg";
+const cell_type_body = "cell_type_body__SohuF";
+const cell_selection_indirect = "cell_selection_indirect__6e6yy";
+const cell_selection_direct = "cell_selection_direct__QEL9m";
+const cell_type_header = "cell_type_header__3tsr-";
+const cell_focused = "cell_focused__cmh-b";
+const cell__overlay = "cell__overlay__U9XGO";
+const cell__overlay_selected_top = "cell__overlay_selected_top__OMUJB";
+const cell__overlay_selected_left = "cell__overlay_selected_left__MiimG";
+const cell__overlay_selected_bottom = "cell__overlay_selected_bottom__2ra9F";
+const cell__overlay_selected_right = "cell__overlay_selected_right__Dt-g5";
+const styles = {
+	cell: cell,
+	cell_type_body: cell_type_body,
+	cell_selection_indirect: cell_selection_indirect,
+	cell_selection_direct: cell_selection_direct,
+	cell_type_header: cell_type_header,
+	"cell_no-border": "cell_no-border__9gXDK",
+	cell_focused: cell_focused,
+	"cell_last-row": "cell_last-row__DoJdk",
+	"cell_last-column": "cell_last-column__LgKM7",
+	"cell_row-auto-height": "cell_row-auto-height__yzQUR",
+	cell__overlay: cell__overlay,
+	cell__overlay_selected_top: cell__overlay_selected_top,
+	cell__overlay_selected_left: cell__overlay_selected_left,
+	cell__overlay_selected_bottom: cell__overlay_selected_bottom,
+	cell__overlay_selected_right: cell__overlay_selected_right,
+	"cell__overlay_row-auto-height": "cell__overlay_row-auto-height__teKk1"
+};
+
+export { cell, cell__overlay, cell__overlay_selected_bottom, cell__overlay_selected_left, cell__overlay_selected_right, cell__overlay_selected_top, cell_focused, cell_selection_direct, cell_selection_indirect, cell_type_body, cell_type_header, styles as default };
+//# sourceMappingURL=StyledCell.module.css.js.map

package/dist/esm/components/Grid/StyledCell.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledCell.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}