@clickhouse/click-ui 0.7.0 → 0.9.0

package/dist/cjs/components/FormContainer/FormElementContainer.css

@@ -0,0 +1,14 @@
+.form-element-container__cy-tb {
+  display: flex;
+  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same
+   width fallback chain (100% → -webkit-fill-available → fill-available →
+   stretch) so the container fills the available inline space. */
+  width: 100%;
+  width: -webkit-fill-available;
+  width: fill-available;
+  width: stretch;
+  /* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--click-field-space-gap);
+}

package/dist/cjs/components/FormContainer/FormElementContainer.module.css.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const styles = {
+	"form-element-container": "form-element-container__cy-tb"
+};
+
+exports.default = styles;
+//# sourceMappingURL=FormElementContainer.module.css.cjs.map

package/dist/cjs/components/FormContainer/FormElementContainer.module.css.cjs.map

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

package/dist/cjs/components/FormContainer/FormRoot.cjs

@@ -1,28 +1,42 @@
+require("./FormRoot.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const styledComponents = require('styled-components');
+const jsxRuntime = require('react/jsx-runtime');
+const cva = require('../../lib/cva.cjs');
+const FormRoot_module = require('./FormRoot.module.css.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
-const FormRoot = styledComponents.styled.div.withConfig({
-  componentId: "sc-hopzbg-0"
-})(["display:flex;width:100%;gap:", ";", " *{box-shadow:none;outline:none;}"], ({
-  theme
-}) => theme.click.field.space.gap, ({
-  theme,
+const formRootVariants = classVarianceAuthority.cva(FormRoot_module.default["form-root"], {
+  variants: {
+    direction: {
+      "column-reverse": FormRoot_module.default["form-root_direction_column-reverse"],
+      column: FormRoot_module.default["form-root_direction_column"],
+      "row-reverse": FormRoot_module.default["form-root_direction_row-reverse"],
+      row: FormRoot_module.default["form-root_direction_row"]
+    },
+    addLabelPadding: {
+      true: FormRoot_module.default["form-root_add-label-padding"],
+      false: ""
+    }
+  },
+  defaultVariants: {
+    direction: "column-reverse",
+    addLabelPadding: false
+  }
+});
+const getDirection = (orientation, dir) => orientation === "horizontal" ? dir === "start" ? "row-reverse" : "row" : dir === "start" ? "column-reverse" : "column";
+const FormRoot = ({
   $orientation = "vertical",
   $dir = "start",
-  $addLabelPadding = false
-}) => `
-    flex-direction: ${$orientation === "horizontal" ? $dir === "start" ? "row-reverse" : "row" : $dir === "start" ? "column-reverse" : "column"};
-    align-items: flex-start;
-    ${$addLabelPadding && $orientation === "horizontal" ? `
-    label {
-      padding-top: calc(${theme.click.field.space.y} + 1px);
-      line-height: 1lh;
-    }
-    ` : ""}
-  `);
+  $addLabelPadding = false,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: cva.cn(formRootVariants({
+  direction: getDirection($orientation, $dir),
+  addLabelPadding: $addLabelPadding && $orientation === "horizontal"
+}), className) });
 
 exports.FormRoot = FormRoot;
 //# sourceMappingURL=FormRoot.cjs.map

package/dist/cjs/components/FormContainer/FormRoot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormRoot.cjs","sources":["../../../../src/components/FormContainer/FormRoot.tsx"],"sourcesContent":["import { styled } from 'styled-components';\n\nexport const FormRoot = styled.div<{\n  $orientation?: 'horizontal' | 'vertical';\n  $dir?: 'start' | 'end';\n  $addLabelPadding?: boolean;\n}>`\n  display: flex;\n  width: 100%;\n  gap: ${({ theme }) => theme.click.field.space.gap};\n  ${({ theme, $orientation = 'vertical', $dir = 'start', $addLabelPadding = false }) => `\n    flex-direction: ${\n      $orientation === 'horizontal'\n        ? $dir === 'start'\n          ? 'row-reverse'\n          : 'row'\n        : $dir === 'start'\n          ? 'column-reverse'\n          : 'column'\n    };\n    align-items: flex-start;\n    ${\n      $addLabelPadding && $orientation === 'horizontal'\n        ? `\n    label {\n      padding-top: calc(${theme.click.field.space.y} + 1px);\n      line-height: 1lh;\n    }\n    `\n        : ''\n    }\n  `}\n  * {\n    box-shadow: none;\n    outline: none;\n  }\n`;\n"],"names":["FormRoot","styled","div","withConfig","componentId","theme","click","field","space","gap","$orientation","$dir","$addLabelPadding","y"],"mappings":";;;;;;AAEO,MAAMA,QAAAA,GAAWC,uBAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,EAAA,CAAA,8BAAA,EAAA,GAAA,EAAA,mCAAA,GAOzB,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAMA,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,KAC5C,CAAC;AAAA,EAAEJ,KAAAA;AAAAA,EAAOK,YAAAA,GAAe,UAAA;AAAA,EAAYC,IAAAA,GAAO,OAAA;AAAA,EAASC,gBAAAA,GAAmB;AAAM,CAAA,KAAM;AAAA,oBAAA,EAElFF,YAAAA,KAAiB,eACbC,IAAAA,KAAS,OAAA,GACP,gBACA,KAAA,GACFA,IAAAA,KAAS,OAAA,GACP,gBAAA,GACA,QAAQ,CAAA;AAAA;AAAA,IAAA,EAIdC,gBAAAA,IAAoBF,iBAAiB,YAAA,GACjC;AAAA;AAAA,wBAAA,EAEgBL,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMK,CAAC,CAAA;AAAA;AAAA;AAAA,IAAA,CAAA,GAIzC,EAAE;AAAA,EAAA,CAET;;;;"}
+{"version":3,"file":"FormRoot.cjs","sources":["../../../../src/components/FormContainer/FormRoot.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './FormRoot.module.css';\n\nconst formRootVariants = cva(styles['form-root'], {\n  variants: {\n    direction: {\n      'column-reverse': styles['form-root_direction_column-reverse'],\n      column: styles['form-root_direction_column'],\n      'row-reverse': styles['form-root_direction_row-reverse'],\n      row: styles['form-root_direction_row'],\n    },\n    addLabelPadding: {\n      true: styles['form-root_add-label-padding'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    direction: 'column-reverse',\n    addLabelPadding: false,\n  },\n});\n\nexport interface FormRootProps extends HTMLAttributes<HTMLDivElement> {\n  $orientation?: 'horizontal' | 'vertical';\n  $dir?: 'start' | 'end';\n  $addLabelPadding?: boolean;\n}\n\nconst getDirection = (\n  orientation: 'horizontal' | 'vertical',\n  dir: 'start' | 'end'\n): 'column-reverse' | 'column' | 'row-reverse' | 'row' =>\n  orientation === 'horizontal'\n    ? dir === 'start'\n      ? 'row-reverse'\n      : 'row'\n    : dir === 'start'\n      ? 'column-reverse'\n      : 'column';\n\nexport const FormRoot = ({\n  $orientation = 'vertical',\n  $dir = 'start',\n  $addLabelPadding = false,\n  className,\n  ...props\n}: FormRootProps) => (\n  <div\n    {...props}\n    className={cn(\n      formRootVariants({\n        direction: getDirection($orientation, $dir),\n        addLabelPadding: $addLabelPadding && $orientation === 'horizontal',\n      }),\n      className\n    )}\n  />\n);\n"],"names":["formRootVariants","cva","styles","variants","direction","column","row","addLabelPadding","true","false","defaultVariants","getDirection","orientation","dir","FormRoot","$orientation","$dir","$addLabelPadding","className","props","cn"],"mappings":";;;;;;;;;AAIA,MAAMA,gBAAAA,GAAmBC,0BAAAA,CAAIC,uBAAAA,CAAO,WAAW,CAAA,EAAG;AAAA,EAChDC,QAAAA,EAAU;AAAA,IACRC,SAAAA,EAAW;AAAA,MACT,gBAAA,EAAkBF,wBAAO,oCAAoC,CAAA;AAAA,MAC7DG,MAAAA,EAAQH,wBAAO,4BAA4B,CAAA;AAAA,MAC3C,aAAA,EAAeA,wBAAO,iCAAiC,CAAA;AAAA,MACvDI,GAAAA,EAAKJ,wBAAO,yBAAyB;AAAA,KACvC;AAAA,IACAK,eAAAA,EAAiB;AAAA,MACfC,IAAAA,EAAMN,wBAAO,6BAA6B,CAAA;AAAA,MAC1CO,KAAAA,EAAO;AAAA;AACT,GACF;AAAA,EACAC,eAAAA,EAAiB;AAAA,IACfN,SAAAA,EAAW,gBAAA;AAAA,IACXG,eAAAA,EAAiB;AAAA;AAErB,CAAC,CAAA;AAQD,MAAMI,YAAAA,GAAeA,CACnBC,WAAAA,EACAC,GAAAA,KAEAD,WAAAA,KAAgB,YAAA,GACZC,GAAAA,KAAQ,OAAA,GACN,aAAA,GACA,KAAA,GACFA,GAAAA,KAAQ,OAAA,GACN,gBAAA,GACA,QAAA;AAED,MAAMC,WAAWA,CAAC;AAAA,EACvBC,YAAAA,GAAe,UAAA;AAAA,EACfC,IAAAA,GAAO,OAAA;AAAA,EACPC,gBAAAA,GAAmB,KAAA;AAAA,EACnBC,SAAAA;AAAAA,EACA,GAAGC;AACU,CAAA,oCACZ,KAAA,EAAA,EACC,GAAIA,KAAAA,EACJ,SAAA,EAAWC,OACTpB,gBAAAA,CAAiB;AAAA,EACfI,SAAAA,EAAWO,YAAAA,CAAaI,YAAAA,EAAcC,IAAI,CAAA;AAAA,EAC1CT,eAAAA,EAAiBU,oBAAoBF,YAAAA,KAAiB;AACxD,CAAC,CAAA,EACDG,SACF,CAAA,EAAE;;;;"}

package/dist/cjs/components/FormContainer/FormRoot.css

@@ -0,0 +1,33 @@
+.form-root__BT-Th {
+  display: flex;
+  width: 100%;
+  flex-direction: column-reverse;
+  align-items: flex-start;
+  gap: var(--click-field-space-gap);
+}
+
+.form-root__BT-Th * {
+  outline: none;
+  box-shadow: none;
+}
+
+.form-root_direction_column-reverse__CqP8o {
+  flex-direction: column-reverse;
+}
+
+.form-root_direction_column__1qZoL {
+  flex-direction: column;
+}
+
+.form-root_direction_row-reverse__TlRP3 {
+  flex-direction: row-reverse;
+}
+
+.form-root_direction_row__D172C {
+  flex-direction: row;
+}
+
+.form-root_add-label-padding__-HfgB label {
+  padding-top: calc(var(--click-field-space-y) + 1px);
+  line-height: 1lh;
+}

package/dist/cjs/components/FormContainer/FormRoot.module.css.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const styles = {
+	"form-root": "form-root__BT-Th",
+	"form-root_direction_column-reverse": "form-root_direction_column-reverse__CqP8o",
+	"form-root_direction_column": "form-root_direction_column__1qZoL",
+	"form-root_direction_row-reverse": "form-root_direction_row-reverse__TlRP3",
+	"form-root_direction_row": "form-root_direction_row__D172C",
+	"form-root_add-label-padding": "form-root_add-label-padding__-HfgB"
+};
+
+exports.default = styles;
+//# sourceMappingURL=FormRoot.module.css.cjs.map

package/dist/cjs/components/FormContainer/FormRoot.module.css.cjs.map

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

package/dist/cjs/components/Grid/Cell.cjs

@@ -20,8 +20,6 @@ const Cell = react.memo(({
     focus,
     columnCount,
     rowCount,
-    showRowNumber,
-    showHeader,
     rowHeight,
     rowStart,
     rowAutoHeight,
@@ -66,7 +64,7 @@ const Cell = react.memo(({
     ...style,
     height: "auto"
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: styleWithHeight, "data-row": currentRowIndex, "data-column": columnIndex, ref: cellRef, children: /* @__PURE__ */ jsxRuntime.jsx(StyledCell.StyledCell, { as: CellData, rowIndex: currentRowIndex, columnIndex, type: "row-cell", "data-selected": isFocused || selectionType === "selectDirect", "data-focused": isFocused, $isSelectedTop: selectionBorderTop, $isSelectedLeft: selectionBorderLeft, $isFocused: isFocused, $isLastRow: rowCount - 1 === rowIndex, $isLastColumn: columnCount - 1 === columnIndex, $isFirstColumn: columnIndex === 0 && !showRowNumber, $isFirstRow: rowIndex === 0 && !showHeader, $selectionType: selectionType, $height: rowHeight, "data-grid-row": currentRowIndex, "data-grid-column": columnIndex, $showBorder: true, $rowAutoHeight: rowAutoHeight, ...props }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: styleWithHeight, "data-row": currentRowIndex, "data-column": columnIndex, ref: cellRef, children: /* @__PURE__ */ jsxRuntime.jsx(StyledCell.StyledCell, { as: CellData, rowIndex: currentRowIndex, columnIndex, type: "row-cell", "data-selected": isFocused || selectionType === "selectDirect", "data-focused": isFocused, $isSelectedTop: selectionBorderTop, $isSelectedLeft: selectionBorderLeft, $isFocused: isFocused, $isLastRow: rowCount - 1 === rowIndex, $isLastColumn: columnCount - 1 === columnIndex, $selectionType: selectionType, $height: rowHeight, "data-grid-row": currentRowIndex, "data-grid-column": columnIndex, $showBorder: true, $rowAutoHeight: rowAutoHeight, ...props }) });
 }, reactWindow.areEqual);
 
 exports.Cell = Cell;

package/dist/cjs/components/Grid/Cell.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Cell.cjs","sources":["../../../../src/components/Grid/Cell.tsx"],"sourcesContent":["import { memo, useEffect, useRef } from 'react';\nimport { GridChildComponentProps, areEqual } from 'react-window';\nimport { ItemDataType } from './types';\nimport { StyledCell } from './StyledCell';\n\ntype CellProps = GridChildComponentProps<ItemDataType> & {\n  width: number;\n};\n\nexport const Cell = memo(\n  ({ data, rowIndex, columnIndex, style, ...props }: CellProps) => {\n    const {\n      cell: CellData,\n      getSelectionType,\n      focus,\n      columnCount,\n      rowCount,\n      showRowNumber,\n      showHeader,\n      rowHeight,\n      rowStart,\n      rowAutoHeight,\n      updateRowHeight,\n    } = data;\n\n    const currentRowIndex = rowIndex + rowStart;\n    const { row: focusedRow, column: focusedColumn } = focus;\n    const isFocused = columnIndex === focusedColumn && currentRowIndex === focusedRow;\n    const rightOfFocus =\n      columnIndex - 1 === focusedColumn && currentRowIndex === focusedRow;\n    const belowFocus =\n      columnIndex === focusedColumn && currentRowIndex - 1 === focusedRow;\n\n    const selectionType = getSelectionType({\n      row: currentRowIndex,\n      column: columnIndex,\n      type: 'cell',\n    });\n    const rightSelection = getSelectionType({\n      row: currentRowIndex,\n      column: columnIndex - 1,\n      type: 'cell',\n    });\n    const belowSelection = getSelectionType({\n      row: currentRowIndex - 1,\n      column: columnIndex,\n      type: 'cell',\n    });\n    const rightOfSelectionBorder =\n      (selectionType === 'selectDirect' || rightSelection === 'selectDirect') &&\n      selectionType !== rightSelection;\n    const belowSelectionBorder =\n      (selectionType === 'selectDirect' || belowSelection === 'selectDirect') &&\n      selectionType !== belowSelection;\n\n    const selectionBorderLeft = rightOfSelectionBorder || rightOfFocus || isFocused;\n    const selectionBorderTop = belowSelectionBorder || belowFocus || isFocused;\n\n    const cellRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n      if (!rowAutoHeight || !cellRef.current) {\n        return;\n      }\n      const height = cellRef.current.getBoundingClientRect().height;\n      updateRowHeight(rowIndex, height);\n    }, [updateRowHeight, rowIndex, rowAutoHeight]);\n\n    const styleWithHeight = {\n      ...style,\n      height: 'auto',\n    };\n\n    return (\n      <div\n        style={styleWithHeight}\n        data-row={currentRowIndex}\n        data-column={columnIndex}\n        ref={cellRef}\n      >\n        <StyledCell\n          as={CellData}\n          rowIndex={currentRowIndex}\n          columnIndex={columnIndex}\n          type=\"row-cell\"\n          data-selected={isFocused || selectionType === 'selectDirect'}\n          data-focused={isFocused}\n          $isSelectedTop={selectionBorderTop}\n          $isSelectedLeft={selectionBorderLeft}\n          $isFocused={isFocused}\n          $isLastRow={rowCount - 1 === rowIndex}\n          $isLastColumn={columnCount - 1 === columnIndex}\n          $isFirstColumn={columnIndex === 0 && !showRowNumber}\n          $isFirstRow={rowIndex === 0 && !showHeader}\n          $selectionType={selectionType}\n          $height={rowHeight}\n          data-grid-row={currentRowIndex}\n          data-grid-column={columnIndex}\n          $showBorder\n          $rowAutoHeight={rowAutoHeight}\n          {...props}\n        />\n      </div>\n    );\n  },\n  areEqual\n);\n"],"names":["Cell","memo","data","rowIndex","columnIndex","style","props","cell","CellData","getSelectionType","focus","columnCount","rowCount","showRowNumber","showHeader","rowHeight","rowStart","rowAutoHeight","updateRowHeight","currentRowIndex","row","focusedRow","column","focusedColumn","isFocused","rightOfFocus","belowFocus","selectionType","type","rightSelection","belowSelection","rightOfSelectionBorder","belowSelectionBorder","selectionBorderLeft","selectionBorderTop","cellRef","useRef","useEffect","current","height","getBoundingClientRect","styleWithHeight","jsx","StyledCell","areEqual"],"mappings":"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"}
+{"version":3,"file":"Cell.cjs","sources":["../../../../src/components/Grid/Cell.tsx"],"sourcesContent":["import { memo, useEffect, useRef } from 'react';\nimport { GridChildComponentProps, areEqual } from 'react-window';\nimport { ItemDataType } from './types';\nimport { StyledCell } from './StyledCell';\n\ntype CellProps = GridChildComponentProps<ItemDataType> & {\n  width: number;\n};\n\nexport const Cell = memo(\n  ({ data, rowIndex, columnIndex, style, ...props }: CellProps) => {\n    const {\n      cell: CellData,\n      getSelectionType,\n      focus,\n      columnCount,\n      rowCount,\n      rowHeight,\n      rowStart,\n      rowAutoHeight,\n      updateRowHeight,\n    } = data;\n\n    const currentRowIndex = rowIndex + rowStart;\n    const { row: focusedRow, column: focusedColumn } = focus;\n    const isFocused = columnIndex === focusedColumn && currentRowIndex === focusedRow;\n    const rightOfFocus =\n      columnIndex - 1 === focusedColumn && currentRowIndex === focusedRow;\n    const belowFocus =\n      columnIndex === focusedColumn && currentRowIndex - 1 === focusedRow;\n\n    const selectionType = getSelectionType({\n      row: currentRowIndex,\n      column: columnIndex,\n      type: 'cell',\n    });\n    const rightSelection = getSelectionType({\n      row: currentRowIndex,\n      column: columnIndex - 1,\n      type: 'cell',\n    });\n    const belowSelection = getSelectionType({\n      row: currentRowIndex - 1,\n      column: columnIndex,\n      type: 'cell',\n    });\n    const rightOfSelectionBorder =\n      (selectionType === 'selectDirect' || rightSelection === 'selectDirect') &&\n      selectionType !== rightSelection;\n    const belowSelectionBorder =\n      (selectionType === 'selectDirect' || belowSelection === 'selectDirect') &&\n      selectionType !== belowSelection;\n\n    const selectionBorderLeft = rightOfSelectionBorder || rightOfFocus || isFocused;\n    const selectionBorderTop = belowSelectionBorder || belowFocus || isFocused;\n\n    const cellRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n      if (!rowAutoHeight || !cellRef.current) {\n        return;\n      }\n      const height = cellRef.current.getBoundingClientRect().height;\n      updateRowHeight(rowIndex, height);\n    }, [updateRowHeight, rowIndex, rowAutoHeight]);\n\n    const styleWithHeight = {\n      ...style,\n      height: 'auto',\n    };\n\n    return (\n      <div\n        style={styleWithHeight}\n        data-row={currentRowIndex}\n        data-column={columnIndex}\n        ref={cellRef}\n      >\n        <StyledCell\n          as={CellData}\n          rowIndex={currentRowIndex}\n          columnIndex={columnIndex}\n          type=\"row-cell\"\n          data-selected={isFocused || selectionType === 'selectDirect'}\n          data-focused={isFocused}\n          $isSelectedTop={selectionBorderTop}\n          $isSelectedLeft={selectionBorderLeft}\n          $isFocused={isFocused}\n          $isLastRow={rowCount - 1 === rowIndex}\n          $isLastColumn={columnCount - 1 === columnIndex}\n          $selectionType={selectionType}\n          $height={rowHeight}\n          data-grid-row={currentRowIndex}\n          data-grid-column={columnIndex}\n          $showBorder\n          $rowAutoHeight={rowAutoHeight}\n          {...props}\n        />\n      </div>\n    );\n  },\n  areEqual\n);\n"],"names":["Cell","memo","data","rowIndex","columnIndex","style","props","cell","CellData","getSelectionType","focus","columnCount","rowCount","rowHeight","rowStart","rowAutoHeight","updateRowHeight","currentRowIndex","row","focusedRow","column","focusedColumn","isFocused","rightOfFocus","belowFocus","selectionType","type","rightSelection","belowSelection","rightOfSelectionBorder","belowSelectionBorder","selectionBorderLeft","selectionBorderTop","cellRef","useRef","useEffect","current","height","getBoundingClientRect","styleWithHeight","jsx","StyledCell","areEqual"],"mappings":"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"}

package/dist/cjs/components/Grid/ColumnResizer.cjs

@@ -1,26 +1,24 @@
+require("./ColumnResizer.css");
 'use strict';
 
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
-const styledComponents = require('styled-components');
+const classVarianceAuthority = require('class-variance-authority');
+require('clsx');
+const ColumnResizer_module = require('./ColumnResizer.module.css.cjs');
 const lodashEs = require('lodash-es');
 const useResizingState = require('./useResizingState.cjs');
 
 const DOUBLE_CLICK_THRESHOLD_MSEC = 300;
-const ResizeSpan = styledComponents.styled.div.withConfig({
-  componentId: "sc-1r6e5v3-0"
-})(["top:", ";left:", ";z-index:1;position:absolute;height:", "px;cursor:col-resize;width:4px;overflow:auto;&:hover,&:active,&:hover{background:", ";}", ""], useResizingState.initialPosition.top, useResizingState.initialPosition.left, ({
-  $height
-}) => $height, ({
-  theme
-}) => theme.click.grid.header.cell.color.stroke.selectDirect, ({
-  $isPressed
-}) => $isPressed && `
-      height: 100%;
-      position: fixed;
-    `);
+const resizerVariants = classVarianceAuthority.cva(ColumnResizer_module.default["column-resizer"], {
+  variants: {
+    pressed: {
+      true: ColumnResizer_module.default["column-resizer_pressed"]
+    }
+  }
+});
 const ColumnResizer = ({
   height,
   onColumnResize: onColumnResizeProp,
@@ -86,7 +84,9 @@ const ColumnResizer = ({
       pointer.width = Math.max(width, 50);
     }
   }, [pointer, isPressed, columnWidth, getResizerPosition, columnIndex, setPosition]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ResizeSpan, { ref: resizeRef, $height: height, $isPressed: isPressed, onPointerDown, onPointerUp: (e) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: resizeRef, className: resizerVariants({
+    pressed: isPressed
+  }), onPointerDown, onPointerUp: (e) => {
     e.preventDefault();
     e.stopPropagation();
     if (resizeRef.current && // 0 is a valid pointerId in Firefox
@@ -105,7 +105,10 @@ const ColumnResizer = ({
     setPosition(useResizingState.initialPosition);
     setPointer(null);
     setIsPressed(columnIndex, false);
-  }, onClick: (e) => e.stopPropagation(), "data-resize": true, style: position });
+  }, onClick: (e) => e.stopPropagation(), "data-resize": true, style: {
+    "--column-resizer-height": `${height}px`,
+    ...position
+  } });
 };
 
 exports.default = ColumnResizer;

package/dist/cjs/components/Grid/ColumnResizer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnResizer.cjs","sources":["../../../../src/components/Grid/ColumnResizer.tsx"],"sourcesContent":["import { PointerEventHandler, useCallback, useEffect, useRef } from 'react';\nimport { styled } from 'styled-components';\nimport { ColumnResizeFn, GetResizerPositionFn } from './types';\nimport { throttle } from 'lodash-es';\nimport { initialPosition, ResizingState } from './useResizingState';\n\nconst DOUBLE_CLICK_THRESHOLD_MSEC = 300;\n\nconst ResizeSpan = styled.div<{ $height: number; $isPressed: boolean }>`\n  top: ${initialPosition.top};\n  left: ${initialPosition.left};\n  z-index: 1;\n  position: absolute;\n  height: ${({ $height }) => $height}px;\n  cursor: col-resize;\n  width: 4px;\n  overflow: auto;\n  &:hover,\n  &:active,\n  &:hover {\n    background: ${({ theme }) => theme.click.grid.header.cell.color.stroke.selectDirect};\n  }\n  ${({ $isPressed }) =>\n    $isPressed &&\n    `\n      height: 100%;\n      position: fixed;\n    `}\n`;\n\ninterface Props {\n  height: number;\n  onColumnResize: ColumnResizeFn;\n  columnIndex: number;\n  getResizerPosition: GetResizerPositionFn;\n  columnWidth: number;\n  resizingState: ResizingState;\n}\n\nconst ColumnResizer = ({\n  height,\n  onColumnResize: onColumnResizeProp,\n  columnIndex,\n  getResizerPosition,\n  columnWidth,\n  resizingState,\n}: Props) => {\n  const resizeRef = useRef<HTMLDivElement>(null);\n  const {\n    pointer,\n    setPointer,\n    getIsPressed,\n    setIsPressed,\n    getPosition,\n    setPosition,\n    lastPressedTimestamp,\n  } = resizingState;\n  const isPressed = getIsPressed(columnIndex);\n  const position = getPosition(columnIndex);\n  const onColumnResize = throttle(onColumnResizeProp, 1000);\n\n  useEffect(() => {\n    // Capture the pointer when pressed to ensure we receive move events outside the element.\n    // Capturing must be properly handled when the component unmounts and mounts again,\n    // based on its pressed state.\n    const control = resizeRef.current;\n    if (!isPressed || !control || !pointer) {\n      return;\n    }\n    const pointerId = pointer.pointerId;\n    try {\n      control.setPointerCapture(pointerId);\n      return () => {\n        if (control.hasPointerCapture(pointerId)) {\n          control.releasePointerCapture(pointerId);\n        }\n      };\n    } catch (e) {\n      console.error(e);\n    }\n  }, [pointer, isPressed, columnIndex]);\n\n  /**\n   * Handler for pointer down events to initiate resizing or auto-sizing on double-click.\n   * @type {PointerEventHandler<HTMLDivElement>}\n   */\n  const onPointerDown: PointerEventHandler<HTMLDivElement> = useCallback(\n    e => {\n      e.stopPropagation();\n      e.preventDefault();\n      if (resizeRef.current) {\n        // We cannot detect double-click with onDoubleClick event,\n        // because this component might be unmounted before the second click and mounted again.\n        // We keep track of the last click timestamp and check if it was a double-click.\n        if (lastPressedTimestamp > Date.now() - DOUBLE_CLICK_THRESHOLD_MSEC) {\n          // Auto-size the column on double click.\n          onColumnResize(columnIndex, 0, 'auto');\n        }\n        setPointer({\n          pointerId: e.pointerId,\n          initialClientX: e.clientX,\n          width: columnWidth,\n        });\n        setIsPressed(columnIndex, true);\n        const pos = getResizerPosition(e.clientX, columnWidth, columnIndex);\n        setPosition(pos);\n      }\n    },\n    [\n      lastPressedTimestamp,\n      setPointer,\n      columnWidth,\n      setIsPressed,\n      columnIndex,\n      getResizerPosition,\n      setPosition,\n      onColumnResize,\n    ]\n  );\n\n  /**\n   * Handler for pointer move events to update the column width as the user drags.\n   * @type {PointerEventHandler<HTMLDivElement>}\n   */\n  const onPointerMove: PointerEventHandler<HTMLDivElement> = useCallback(\n    e => {\n      e.stopPropagation();\n      e.preventDefault();\n      if (isPressed && pointer) {\n        const width = columnWidth + (e.clientX - pointer.initialClientX);\n        const pos = getResizerPosition(e.clientX, width, columnIndex);\n        setPosition(pos);\n        // Ensure minimum width of 50px\n        pointer.width = Math.max(width, 50);\n      }\n    },\n    [pointer, isPressed, columnWidth, getResizerPosition, columnIndex, setPosition]\n  );\n\n  return (\n    <ResizeSpan\n      ref={resizeRef}\n      $height={height}\n      $isPressed={isPressed}\n      onPointerDown={onPointerDown}\n      onPointerUp={e => {\n        e.preventDefault();\n        e.stopPropagation();\n        if (\n          resizeRef.current &&\n          // 0 is a valid pointerId in Firefox\n          (pointer?.pointerId || pointer?.pointerId === 0)\n        ) {\n          const shouldCallResize = e.clientX !== pointer.initialClientX;\n          if (shouldCallResize) {\n            onColumnResize(columnIndex, pointer.width, 'manual');\n          }\n          setPosition(initialPosition);\n          setPointer(null);\n          setIsPressed(columnIndex, false);\n        }\n      }}\n      onPointerMove={onPointerMove}\n      onPointerCancel={e => {\n        e.preventDefault();\n        e.stopPropagation();\n        setPosition(initialPosition);\n        setPointer(null);\n        setIsPressed(columnIndex, false);\n      }}\n      onClick={e => e.stopPropagation()}\n      data-resize\n      style={position}\n    />\n  );\n};\n\nexport default ColumnResizer;\n"],"names":["DOUBLE_CLICK_THRESHOLD_MSEC","ResizeSpan","styled","div","withConfig","componentId","initialPosition","top","left","$height","theme","click","grid","header","cell","color","stroke","selectDirect","$isPressed","ColumnResizer","height","onColumnResize","onColumnResizeProp","columnIndex","getResizerPosition","columnWidth","resizingState","resizeRef","useRef","pointer","setPointer","getIsPressed","setIsPressed","getPosition","setPosition","lastPressedTimestamp","isPressed","position","throttle","useEffect","control","current","pointerId","setPointerCapture","hasPointerCapture","releasePointerCapture","e","console","error","onPointerDown","useCallback","stopPropagation","preventDefault","Date","now","initialClientX","clientX","width","pos","onPointerMove","Math","max","jsx","shouldCallResize"],"mappings":"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"}
+{"version":3,"file":"ColumnResizer.cjs","sources":["../../../../src/components/Grid/ColumnResizer.tsx"],"sourcesContent":["import {\n  CSSProperties,\n  PointerEventHandler,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\nimport { cva } from '@/lib/cva';\nimport styles from './ColumnResizer.module.css';\nimport { ColumnResizeFn, GetResizerPositionFn } from './types';\nimport { throttle } from 'lodash-es';\nimport { initialPosition, ResizingState } from './useResizingState';\n\nconst DOUBLE_CLICK_THRESHOLD_MSEC = 300;\n\nconst resizerVariants = cva(styles['column-resizer'], {\n  variants: {\n    pressed: { true: styles['column-resizer_pressed'] },\n  },\n});\n\ninterface Props {\n  height: number;\n  onColumnResize: ColumnResizeFn;\n  columnIndex: number;\n  getResizerPosition: GetResizerPositionFn;\n  columnWidth: number;\n  resizingState: ResizingState;\n}\n\nconst ColumnResizer = ({\n  height,\n  onColumnResize: onColumnResizeProp,\n  columnIndex,\n  getResizerPosition,\n  columnWidth,\n  resizingState,\n}: Props) => {\n  const resizeRef = useRef<HTMLDivElement>(null);\n  const {\n    pointer,\n    setPointer,\n    getIsPressed,\n    setIsPressed,\n    getPosition,\n    setPosition,\n    lastPressedTimestamp,\n  } = resizingState;\n  const isPressed = getIsPressed(columnIndex);\n  const position = getPosition(columnIndex);\n  const onColumnResize = throttle(onColumnResizeProp, 1000);\n\n  useEffect(() => {\n    // Capture the pointer when pressed to ensure we receive move events outside the element.\n    // Capturing must be properly handled when the component unmounts and mounts again,\n    // based on its pressed state.\n    const control = resizeRef.current;\n    if (!isPressed || !control || !pointer) {\n      return;\n    }\n    const pointerId = pointer.pointerId;\n    try {\n      control.setPointerCapture(pointerId);\n      return () => {\n        if (control.hasPointerCapture(pointerId)) {\n          control.releasePointerCapture(pointerId);\n        }\n      };\n    } catch (e) {\n      console.error(e);\n    }\n  }, [pointer, isPressed, columnIndex]);\n\n  /**\n   * Handler for pointer down events to initiate resizing or auto-sizing on double-click.\n   * @type {PointerEventHandler<HTMLDivElement>}\n   */\n  const onPointerDown: PointerEventHandler<HTMLDivElement> = useCallback(\n    e => {\n      e.stopPropagation();\n      e.preventDefault();\n      if (resizeRef.current) {\n        // We cannot detect double-click with onDoubleClick event,\n        // because this component might be unmounted before the second click and mounted again.\n        // We keep track of the last click timestamp and check if it was a double-click.\n        if (lastPressedTimestamp > Date.now() - DOUBLE_CLICK_THRESHOLD_MSEC) {\n          // Auto-size the column on double click.\n          onColumnResize(columnIndex, 0, 'auto');\n        }\n        setPointer({\n          pointerId: e.pointerId,\n          initialClientX: e.clientX,\n          width: columnWidth,\n        });\n        setIsPressed(columnIndex, true);\n        const pos = getResizerPosition(e.clientX, columnWidth, columnIndex);\n        setPosition(pos);\n      }\n    },\n    [\n      lastPressedTimestamp,\n      setPointer,\n      columnWidth,\n      setIsPressed,\n      columnIndex,\n      getResizerPosition,\n      setPosition,\n      onColumnResize,\n    ]\n  );\n\n  /**\n   * Handler for pointer move events to update the column width as the user drags.\n   * @type {PointerEventHandler<HTMLDivElement>}\n   */\n  const onPointerMove: PointerEventHandler<HTMLDivElement> = useCallback(\n    e => {\n      e.stopPropagation();\n      e.preventDefault();\n      if (isPressed && pointer) {\n        const width = columnWidth + (e.clientX - pointer.initialClientX);\n        const pos = getResizerPosition(e.clientX, width, columnIndex);\n        setPosition(pos);\n        // Ensure minimum width of 50px\n        pointer.width = Math.max(width, 50);\n      }\n    },\n    [pointer, isPressed, columnWidth, getResizerPosition, columnIndex, setPosition]\n  );\n\n  return (\n    <div\n      ref={resizeRef}\n      className={resizerVariants({ pressed: isPressed })}\n      onPointerDown={onPointerDown}\n      onPointerUp={e => {\n        e.preventDefault();\n        e.stopPropagation();\n        if (\n          resizeRef.current &&\n          // 0 is a valid pointerId in Firefox\n          (pointer?.pointerId || pointer?.pointerId === 0)\n        ) {\n          const shouldCallResize = e.clientX !== pointer.initialClientX;\n          if (shouldCallResize) {\n            onColumnResize(columnIndex, pointer.width, 'manual');\n          }\n          setPosition(initialPosition);\n          setPointer(null);\n          setIsPressed(columnIndex, false);\n        }\n      }}\n      onPointerMove={onPointerMove}\n      onPointerCancel={e => {\n        e.preventDefault();\n        e.stopPropagation();\n        setPosition(initialPosition);\n        setPointer(null);\n        setIsPressed(columnIndex, false);\n      }}\n      onClick={e => e.stopPropagation()}\n      data-resize\n      style={\n        {\n          '--column-resizer-height': `${height}px`,\n          ...position,\n        } as CSSProperties\n      }\n    />\n  );\n};\n\nexport default ColumnResizer;\n"],"names":["DOUBLE_CLICK_THRESHOLD_MSEC","resizerVariants","cva","styles","variants","pressed","true","ColumnResizer","height","onColumnResize","onColumnResizeProp","columnIndex","getResizerPosition","columnWidth","resizingState","resizeRef","useRef","pointer","setPointer","getIsPressed","setIsPressed","getPosition","setPosition","lastPressedTimestamp","isPressed","position","throttle","useEffect","control","current","pointerId","setPointerCapture","hasPointerCapture","releasePointerCapture","e","console","error","onPointerDown","useCallback","stopPropagation","preventDefault","Date","now","initialClientX","clientX","width","pos","onPointerMove","Math","max","jsx","shouldCallResize","initialPosition"],"mappings":"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"}

package/dist/cjs/components/Grid/ColumnResizer.css

@@ -0,0 +1,22 @@
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. selectDirect) */
+
+.column-resizer__8f12T {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: calc(100% - 4px);
+  width: 4px;
+  height: var(--column-resizer-height);
+  overflow: auto;
+  cursor: col-resize;
+}
+
+.column-resizer__8f12T:hover,
+.column-resizer__8f12T:active {
+  background: var(--click-grid-header-cell-color-stroke-selectDirect);
+}
+
+.column-resizer_pressed__JGAln {
+  position: fixed;
+  height: 100%;
+}

package/dist/cjs/components/Grid/ColumnResizer.module.css.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const styles = {
+	"column-resizer": "column-resizer__8f12T",
+	"column-resizer_pressed": "column-resizer_pressed__JGAln"
+};
+
+exports.default = styles;
+//# sourceMappingURL=ColumnResizer.module.css.cjs.map

package/dist/cjs/components/Grid/ColumnResizer.module.css.cjs.map

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

package/dist/cjs/components/Grid/Grid.css

@@ -0,0 +1,34 @@
+/*
+ * `.grid` is the Grid's outer container. It is rendered as the ContextMenu.Trigger
+ * (the root element the whole grid mounts into), which is why the trigger carries
+ * the grid's own box styling rather than a context-menu-specific class.
+ */
+.grid__h49fk {
+  width: 100%;
+  height: var(--grid-height, 100%);
+  overflow: hidden;
+  border-radius: var(--grid-radius);
+  background: var(--click-grid-body-cell-color-background-default);
+  outline: none;
+}
+
+.grid_bordered__kFqF5 {
+  border: 1px solid var(--click-grid-header-cell-color-stroke-default);
+}
+
+/* react-window's inner element that lays out the scrolling cell grid */
+.grid__inner__IZhj9 {
+  display: flex;
+  flex-direction: column-reverse;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- the original styled rule used overflow-anchor */
+  overflow-anchor: none;
+  user-select: none;
+}
+
+.grid__data__Mn4TK {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin-top: var(--grid-data-top, 0);
+  margin-left: var(--grid-data-left, 0);
+}

package/dist/cjs/components/Grid/Grid.module.css.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const grid = "grid__h49fk";
+const grid_bordered = "grid_bordered__kFqF5";
+const grid__inner = "grid__inner__IZhj9";
+const grid__data = "grid__data__Mn4TK";
+const styles = {
+	grid: grid,
+	grid_bordered: grid_bordered,
+	grid__inner: grid__inner,
+	grid__data: grid__data
+};
+
+exports.default = styles;
+exports.grid = grid;
+exports.grid__data = grid__data;
+exports.grid__inner = grid__inner;
+exports.grid_bordered = grid_bordered;
+//# sourceMappingURL=Grid.module.css.cjs.map

package/dist/cjs/components/Grid/Grid.module.css.cjs.map

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

package/dist/cjs/components/Grid/Header.cjs

@@ -1,54 +1,21 @@
+require("./Header.css");
 'use strict';
 
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
 const jsxRuntime = require('react/jsx-runtime');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
+const Header_module = require('./Header.module.css.cjs');
 const StyledCell = require('./StyledCell.cjs');
 const ColumnResizer = require('./ColumnResizer.cjs');
 
-const HeaderContainer = styledComponents.styled.div.withConfig({
-  componentId: "sc-1oadqc8-0"
-})(["position:sticky;top:0;left:0;display:flex;flex-direction:row;height:", "px;", ""], ({
-  $height
-}) => $height, ({
-  $scrolledVertical,
-  theme
-}) => $scrolledVertical ? `box-shadow: 0px 0 0px 1px ${theme.click.grid.header.cell.color.stroke.default};` : "");
-const ScrollableHeaderContainer = styledComponents.styled.div.withConfig({
-  componentId: "sc-1oadqc8-1"
-})(["position:relative;left:", "px;"], ({
-  $left
-}) => $left);
-const HeaderCellContainer = styledComponents.styled.div.withConfig({
-  componentId: "sc-1oadqc8-2"
-})(["position:absolute;display:flex;width:", ";height:", "px;left:", "px;&:hover [data-resize]{background:", ";}"], ({
-  $width
-}) => typeof $width === "string" ? $width : `${$width}px`, ({
-  $height
-}) => $height, ({
-  $columnPosition
-}) => $columnPosition, ({
-  theme
-}) => theme.click.grid.header.cell.color.stroke.selectDirect);
-const RowColumnContainer = styledComponents.styled(HeaderCellContainer).withConfig({
-  componentId: "sc-1oadqc8-3"
-})(["position:sticky;top:0;left:0;width:", ";text-align:right;", ""], ({
-  $width
-}) => typeof $width === "string" ? $width : `${$width}px`, ({
-  $scrolledHorizontal,
-  theme
-}) => $scrolledHorizontal ? `box-shadow: 0px 0 0px 1px ${theme.click.grid.header.cell.color.stroke.default};` : "");
-const RowColumn = styledComponents.styled(StyledCell.StyledCell).withConfig({
-  componentId: "sc-1oadqc8-4"
-})(["width:100%;text-align:right;overflow:hidden;"]);
+const toCssSize = ($width) => typeof $width === "string" ? $width : `${$width}px`;
 const Column = ({
   columnIndex,
   cell,
   getColumnWidth,
   getColumnHorizontalPosition,
   getSelectionType,
-  isFirstColumn,
   isLastColumn,
   onColumnResize,
   height,
@@ -68,8 +35,12 @@ const Column = ({
   const isSelected = selectionType === "selectDirect";
   const isSelectedLeft = (leftSelectionType === "selectDirect" || isSelected) && leftSelectionType !== selectionType;
   const columnWidth = getColumnWidth(columnIndex);
-  return /* @__PURE__ */ jsxRuntime.jsxs(HeaderCellContainer, { $width: columnWidth, $columnPosition: columnPosition, $height: height, "data-header": columnIndex, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(StyledCell.StyledCell, { $type: "header", as: cell, columnIndex, type: "header-cell", $isFirstColumn: isFirstColumn, $selectionType: selectionType, $isLastColumn: isLastColumn, $isFocused: false, $isSelectedLeft: isSelectedLeft, $isSelectedTop: isSelected, $isLastRow: false, $isFirstRow: true, $height: height, "data-grid-row": -1, "data-grid-column": columnIndex, "data-selected": isSelected, $showBorder: showBorder, width: columnWidth }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Header_module.default["header__cell"], style: {
+    "--header-cell-width": toCssSize(columnWidth),
+    "--header-cell-height": `${height}px`,
+    "--header-cell-left": `${columnPosition}px`
+  }, "data-header": columnIndex, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(StyledCell.StyledCell, { $type: "header", as: cell, columnIndex, type: "header-cell", $selectionType: selectionType, $isLastColumn: isLastColumn, $isFocused: false, $isSelectedLeft: isSelectedLeft, $isSelectedTop: isSelected, $isLastRow: false, $height: height, "data-grid-row": -1, "data-grid-column": columnIndex, "data-selected": isSelected, $showBorder: showBorder, width: columnWidth }),
     /* @__PURE__ */ jsxRuntime.jsx(ColumnResizer.default, { height, onColumnResize, columnIndex, getResizerPosition, columnWidth, resizingState })
   ] });
 };
@@ -94,11 +65,19 @@ const Header = ({
   const selectedAllType = getSelectionType({
     type: "all"
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs(HeaderContainer, { $height: height, $scrolledVertical: scrolledVertical, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ScrollableHeaderContainer, { $left: rowNumberWidth, children: Array.from({
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cva.cn(Header_module.default["header"], scrolledVertical && Header_module.default["header_scrolled-vertical"]), style: {
+    "--header-height": `${height}px`
+  }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: Header_module.default["header__scroll-area"], style: {
+      "--header-scroll-area-left": `${rowNumberWidth}px`
+    }, children: Array.from({
       length: maxColumn - minColumn + 1
-    }, (_, index) => minColumn + index).map((columnIndex) => /* @__PURE__ */ jsxRuntime.jsx(Column, { getSelectionType, columnIndex, getColumnWidth, getColumnHorizontalPosition, cell, isFirstColumn: columnIndex === 0 && !showRowNumber, isLastColumn: columnIndex + 1 === columnCount, onColumnResize, height, getResizerPosition, showBorder, resizingState }, `header-${columnIndex}`)) }),
-    showRowNumber && /* @__PURE__ */ jsxRuntime.jsx(RowColumnContainer, { $width: rowNumberWidth, $height: height, $columnPosition: 0, $scrolledHorizontal: scrolledHorizontal, children: /* @__PURE__ */ jsxRuntime.jsx(RowColumn, { "data-selected": selectedAllType === "selectDirect", $type: "header", $isFirstRow: true, $isFirstColumn: true, $selectionType: selectedAllType, $isLastRow: false, $isLastColumn: false, $height: height, $isFocused: false, $isSelectedLeft: false, $isSelectedTop: false, "data-grid-row": -1, "data-grid-column": -1, $showBorder: showBorder, children: "#" }) })
+    }, (_, index) => minColumn + index).map((columnIndex) => /* @__PURE__ */ jsxRuntime.jsx(Column, { getSelectionType, columnIndex, getColumnWidth, getColumnHorizontalPosition, cell, isLastColumn: columnIndex + 1 === columnCount, onColumnResize, height, getResizerPosition, showBorder, resizingState }, `header-${columnIndex}`)) }),
+    showRowNumber && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cva.cn(Header_module.default["header__cell"], Header_module.default["header__row-column"], scrolledHorizontal && Header_module.default["header__row-column_scrolled-horizontal"]), style: {
+      "--header-cell-width": toCssSize(rowNumberWidth),
+      "--header-cell-height": `${height}px`,
+      "--header-cell-left": "0px"
+    }, children: /* @__PURE__ */ jsxRuntime.jsx(StyledCell.StyledCell, { "data-align": "right", "data-selected": selectedAllType === "selectDirect", $type: "header", $selectionType: selectedAllType, $isLastRow: false, $isLastColumn: false, $height: height, $isFocused: false, $isSelectedLeft: false, $isSelectedTop: false, "data-grid-row": -1, "data-grid-column": -1, $showBorder: showBorder, children: "#" }) })
   ] });
 };
 

package/dist/cjs/components/Grid/Header.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Header.cjs","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","jsxs","jsx","ColumnResizer","Header","scrolledVertical","scrolledHorizontal","showRowNumber","rowNumberWidth","minColumn","maxColumn","columnCount","selectedAllType","Array","from","length","_","index","map"],"mappings":"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"}
+{"version":3,"file":"Header.cjs","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","jsx","StyledCell","ColumnResizer","Header","scrolledVertical","scrolledHorizontal","showRowNumber","rowNumberWidth","minColumn","maxColumn","columnCount","selectedAllType","jsxs","cn","Array","from","length","_","index","map"],"mappings":"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"}