@clickhouse/click-ui 0.0.146 → 0.0.148

package/dist/click-ui.es.js

@@ -1494,6 +1494,12 @@ const Bell = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "
   /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M13.833 5.751V4.833C13.833 3.821 13.013 3 12 3V3C10.987 3 10.167 3.821 10.167 4.833V5.751", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
   /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.563 10.1882V10.1882C6.563 7.68523 8.592 5.65723 11.094 5.65723H12.907C15.41 5.65723 17.438 7.68623 17.438 10.1882V10.1882V12.9852C17.438 13.5152 17.649 14.0242 18.024 14.3992L18.665 15.0402C19.04 15.4152 19.251 15.9242 19.251 16.4542V16.4542C19.251 17.4982 18.405 18.3442 17.361 18.3442H6.64C5.596 18.3442 4.75 17.4982 4.75 16.4542V16.4542C4.75 15.9242 4.961 15.4152 5.336 15.0402L5.977 14.3992C6.352 14.0242 6.563 13.5152 6.563 12.9852V10.1882Z", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
 ] });
+const DoubleCheckIcon = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M8 12L13 17", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M17 7L12.5 11.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M8 17L3 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M21 9L13 17L7 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
 const ICONS_MAP = {
   activity: Activity,
   alarm: Alarm,
@@ -1546,6 +1552,7 @@ const ICONS_MAP = {
   "dots-triangle": DotsTriangle,
   "dots-vertical": DotsVertical,
   "dots-vertical-double": DotsVerticalDouble,
+  "double-check": DoubleCheckIcon,
   download: Download,
   "download-in-circle": DownloadInCircle,
   email: Email,
@@ -10034,7 +10041,7 @@ const Button$1 = styled.button.attrs((props) => ({
   "aria-pressed": props.$active
 })).withConfig({
   componentId: "sc-ukgugp-1"
-})(["box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;border:none;background:", ";color:", ";font:", ";padding:", " ", ";gap:", ";", " cursor:pointer;&:hover{background:", ";font:", ";}&:disabled{cursor:not-allowed;font:", ";background:", ";}&:active,&:focus{background:", ";font:", ";&:disabled{background:", ";}}border-radius:", ";"], ({
+})(["box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;border:none;background:", ";color:", ";font:", ";padding:", " ", ";gap:", ";", ";cursor:pointer;&:hover{background:", ";font:", ";color:", ";}&:disabled{cursor:not-allowed;font:", ";color:", ";background:", ';&:active,&:focus,&[aria-pressed="true"]{color:', ';}}&:active,&:focus,&[aria-pressed="true"]{background:', ";font:", ";color:", ";&:disabled{background:", ";}}border-radius:", ";"], ({
   $active,
   theme: theme2
 }) => $active ? theme2.click.button.group.color.background.active : theme2.click.button.group.color.background.default, ({
@@ -10055,15 +10062,23 @@ const Button$1 = styled.button.attrs((props) => ({
   theme: theme2
 }) => theme2.click.button.group.typography.label.hover, ({
   theme: theme2
+}) => theme2.click.button.group.color.text.hover, ({
+  theme: theme2
 }) => theme2.click.button.group.typography.label.disabled, ({
+  theme: theme2
+}) => theme2.click.button.group.color.text.disabled, ({
   theme: theme2,
   $active
 }) => theme2.click.button.group.color.background[$active ? "disabled-active" : "disabled"], ({
   theme: theme2
+}) => theme2.click.button.group.color.text.disabled, ({
+  theme: theme2
 }) => theme2.click.button.group.color.background.active, ({
   theme: theme2
 }) => theme2.click.button.group.typography.label.active, ({
   theme: theme2
+}) => theme2.click.button.group.color.text.active, ({
+  theme: theme2
 }) => theme2.click.button.group.color.background["disabled-active"], ({
   theme: theme2,
   $type,
@@ -16972,7 +16987,7 @@ const Column = ({
   const isSelected = selectionType === "selectDirect";
   const isSelectedLeft = (leftSelectionType === "selectDirect" || isSelected) && leftSelectionType !== selectionType;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(HeaderCellContainer, { $width: columnWidth(columnIndex), $columnPosition: columnPosition, $height: height, "data-header": columnIndex, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(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 }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(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(columnIndex) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(ColumnResizer, { height, onColumnResize, columnIndex, setResizeCursorPosition })
   ] });
 };
@@ -31344,6 +31359,7 @@ const addCellToRow = (row, cell, rowIndex, columnIndex) => {
   const html = renderToStaticMarkup(createElement$1(cell, {
     rowIndex,
     columnIndex,
+    width: 1e3,
     type: "row-cell"
   }));
   td.innerHTML = html;
@@ -32057,11 +32073,15 @@ const Grid = forwardRef(({
       lastRowStart.current = rowStart;
     }
   }, [rowStart, onItemsRendered]);
+  const CellWithWidth = (args) => {
+    const width = columnWidth(args.columnIndex);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Cell, { ...args, width });
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(ContextMenu, { modal: false, onOpenChange: setContextMenuOpen, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(ContextMenuTrigger, { as: ContextMenu.Trigger, ref: mergeRefs([forwardedRef, containerRef]), tabIndex: 0, onMouseDown, onMouseMove, onKeyDown, onPointerDown, onPointerUp, onPointerLeave: setPointerCapture, onPointerEnter: setPointerCapture, onContextMenu, $rounded: rounded, $height: autoHeight ? rowCount * rowHeight + (showHeader ? headerHeight : 0) + elementBorderRef.current.scrollBarHeight : void 0, $showBorder: showBorder, children: /* @__PURE__ */ jsxRuntimeExports.jsx(AutoSizer, { onResize, children: ({
       height,
       width
-    }) => /* @__PURE__ */ jsxRuntimeExports.jsx(VariableSizeGrid, { ref: forwardedGridRef ? mergeRefs([forwardedGridRef, gridRef]) : gridRef, height, width, columnCount, rowHeight: () => rowHeight, useIsScrolling, innerElementType: InnerElementType, itemData: data, initialScrollTop: focus.row < rowStart ? focus.row * rowHeight : (focus.row - rowStart) * rowHeight, initialScrollLeft: getColumnHorizontalPosition(focus.column), columnWidth, rowCount, onScroll, outerRef, outerElementType: OuterElementType, onItemsRendered, ...props, children: Cell }) }) }),
+    }) => /* @__PURE__ */ jsxRuntimeExports.jsx(VariableSizeGrid, { ref: forwardedGridRef ? mergeRefs([forwardedGridRef, gridRef]) : gridRef, height, width, columnCount, rowHeight: () => rowHeight, useIsScrolling, innerElementType: InnerElementType, itemData: data, initialScrollTop: focus.row < rowStart ? focus.row * rowHeight : (focus.row - rowStart) * rowHeight, initialScrollLeft: getColumnHorizontalPosition(focus.column), columnWidth, rowCount, onScroll, outerRef, outerElementType: OuterElementType, onItemsRendered, ...props, children: CellWithWidth }) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(ContextMenu.Content, { children: menuOptions.map((option2, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(ContextMenu.Item, { onSelect: option2.onSelect, children: option2.label }, `grid-${index2}`)) })
   ] });
 });
@@ -32482,6 +32502,11 @@ const InputElement = styled.input.withConfig({
     &::placeholder {
       color: ${theme2.click.field.color.placeholder.default};
     }
+
+    &:disabled, &.disabled {
+      &::placeholder {
+      color: ${theme2.click.field.color.placeholder.disabled};
+    }
   `);
 const NumberInputElement = styled(InputElement).withConfig({
   componentId: "sc-1pvd2nj-2"
@@ -42231,15 +42256,15 @@ const click$2 = {
           "default": "rgba(0,0,0,0)",
           hover: "#282828",
           active: "lch(18.2 0 0)",
-          disabled: "#414141",
-          "disabled-active": "lch(22 0 0)",
+          disabled: "rgba(0,0,0,0)",
+          "disabled-active": "lch(0 0 0 / 0)",
           panel: "rgba(0,0,0,0)"
         },
         text: {
-          "default": "#ffffff",
-          hover: "#ffffff",
+          "default": "#c0c0c0",
+          hover: "#c0c0c0",
           active: "#ffffff",
-          disabled: "#808080",
+          disabled: "#414141",
           "disabled-active": "#808080"
         },
         stroke: {
@@ -42449,7 +42474,7 @@ const click$2 = {
         "default": "#ffffff",
         hover: "#ffffff",
         active: "#ffffff",
-        disabled: "#a0a0a0"
+        disabled: "#606060"
       }
     }
   },
@@ -42551,21 +42576,25 @@ const click$2 = {
         "default": "#b3b6bd",
         hover: "#b3b6bd",
         active: "#ffffff",
-        disabled: "#a0a0a0",
+        disabled: "#606060",
         error: "#ffbaba"
       },
       format: {
-        "default": "lch(72 4.18 268)",
-        hover: "lch(72 4.18 268)",
-        active: "lch(72 4.18 268)",
+        "default": "lch(62.9 0 0)",
+        hover: "lch(62.9 0 0)",
+        active: "lch(62.9 0 0)",
         disabled: "#808080",
-        error: "lch(72 4.18 268)"
+        error: "lch(62.9 0 0)"
       },
       genericLabel: {
         "default": "#ffffff",
         hover: "#ffffff",
         active: "#ffffff",
         disabled: "#a0a0a0"
+      },
+      placeholder: {
+        "default": "#808080",
+        disabled: "#606060"
       }
     }
   },
@@ -42586,11 +42615,11 @@ const click$2 = {
           disabled: "#414141"
         },
         format: {
-          "default": "lch(72 4.18 268)",
-          hover: "lch(72 4.18 268)",
-          active: "lch(72 4.18 268)",
+          "default": "lch(62.9 0 0)",
+          hover: "lch(62.9 0 0)",
+          active: "lch(62.9 0 0)",
           disabled: "#808080",
-          error: "lch(72 4.18 268)"
+          error: "lch(62.9 0 0)"
         },
         stroke: {
           "default": "#323232"
@@ -42629,7 +42658,7 @@ const click$2 = {
     autocomplete: {
       color: {
         placeholder: {
-          "default": "#9a9ea7"
+          "default": "#808080"
         },
         searchTerm: {
           "default": "#ffffff"
@@ -43701,16 +43730,16 @@ const click$1 = {
           "default": "rgba(0,0,0,0)",
           hover: "#f6f7fa",
           active: "lch(97.3 1.53 272)",
-          disabled: "#dfdfdf",
-          "disabled-active": "lch(71.1 0 0)",
+          disabled: "rgba(0,0,0,0)",
+          "disabled-active": "lch(77.8 1.22 272)",
           panel: "rgba(0,0,0,0)"
         },
         text: {
-          "default": "#161517",
-          hover: "#161517",
+          "default": "#505050",
+          hover: "#505050",
           active: "#161517",
           disabled: "#a0a0a0",
-          "disabled-active": "#808080"
+          "disabled-active": "#a0a0a0"
         },
         stroke: {
           "default": "rgba(0,0,0,0)",
@@ -44032,7 +44061,8 @@ const click$1 = {
         disabled: "#a0a0a0"
       },
       placeholder: {
-        "default": "#9a9ea7"
+        "default": "#9a9ea7",
+        disabled: "#b3b6bd"
       }
     }
   },
@@ -45487,16 +45517,16 @@ const click = {
           "default": "rgba(0,0,0,0)",
           hover: "#f6f7fa",
           active: "lch(97.3 1.53 272)",
-          disabled: "#dfdfdf",
-          "disabled-active": "lch(71.1 0 0)",
+          disabled: "rgba(0,0,0,0)",
+          "disabled-active": "lch(77.8 1.22 272)",
           panel: "rgba(0,0,0,0)"
         },
         text: {
-          "default": "#161517",
-          hover: "#161517",
+          "default": "#505050",
+          hover: "#505050",
           active: "#161517",
           disabled: "#a0a0a0",
-          "disabled-active": "#808080"
+          "disabled-active": "#a0a0a0"
         },
         stroke: {
           "default": "rgba(0,0,0,0)",
@@ -46088,7 +46118,8 @@ const click = {
         disabled: "#a0a0a0"
       },
       placeholder: {
-        "default": "#9a9ea7"
+        "default": "#9a9ea7",
+        disabled: "#b3b6bd"
       }
     }
   },
@@ -47636,6 +47667,7 @@ const palette = {
     "400": "#a0a0a0",
     "500": "#808080",
     "600": "#606060",
+    "650": "#505050",
     "700": "#414141",
     "712": "#323232",
     "725": "#282828",
@@ -47948,8 +47980,9 @@ const themes = {
 const useCUITheme = () => {
   const theme2 = useTheme();
   return {
-    name: theme2.name,
+    breakpoint: theme2.breakpoint,
     global: theme2.global,
+    name: theme2.name,
     sizes: theme2.sizes
   };
 };

package/dist/click-ui.umd.js

@@ -1511,6 +1511,12 @@ var __publicField = (obj, key, value) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M13.833 5.751V4.833C13.833 3.821 13.013 3 12 3V3C10.987 3 10.167 3.821 10.167 4.833V5.751", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.563 10.1882V10.1882C6.563 7.68523 8.592 5.65723 11.094 5.65723H12.907C15.41 5.65723 17.438 7.68623 17.438 10.1882V10.1882V12.9852C17.438 13.5152 17.649 14.0242 18.024 14.3992L18.665 15.0402C19.04 15.4152 19.251 15.9242 19.251 16.4542V16.4542C19.251 17.4982 18.405 18.3442 17.361 18.3442H6.64C5.596 18.3442 4.75 17.4982 4.75 16.4542V16.4542C4.75 15.9242 4.961 15.4152 5.336 15.0402L5.977 14.3992C6.352 14.0242 6.563 13.5152 6.563 12.9852V10.1882Z", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
   ] });
+  const DoubleCheckIcon = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M8 12L13 17", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M17 7L12.5 11.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M8 17L3 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M21 9L13 17L7 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] });
   const ICONS_MAP = {
     activity: Activity,
     alarm: Alarm,
@@ -1563,6 +1569,7 @@ var __publicField = (obj, key, value) => {
     "dots-triangle": DotsTriangle,
     "dots-vertical": DotsVertical,
     "dots-vertical-double": DotsVerticalDouble,
+    "double-check": DoubleCheckIcon,
     download: Download,
     "download-in-circle": DownloadInCircle,
     email: Email,
@@ -10051,7 +10058,7 @@ var __publicField = (obj, key, value) => {
     "aria-pressed": props.$active
   })).withConfig({
     componentId: "sc-ukgugp-1"
-  })(["box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;border:none;background:", ";color:", ";font:", ";padding:", " ", ";gap:", ";", " cursor:pointer;&:hover{background:", ";font:", ";}&:disabled{cursor:not-allowed;font:", ";background:", ";}&:active,&:focus{background:", ";font:", ";&:disabled{background:", ";}}border-radius:", ";"], ({
+  })(["box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;border:none;background:", ";color:", ";font:", ";padding:", " ", ";gap:", ";", ";cursor:pointer;&:hover{background:", ";font:", ";color:", ";}&:disabled{cursor:not-allowed;font:", ";color:", ";background:", ';&:active,&:focus,&[aria-pressed="true"]{color:', ';}}&:active,&:focus,&[aria-pressed="true"]{background:', ";font:", ";color:", ";&:disabled{background:", ";}}border-radius:", ";"], ({
     $active,
     theme: theme2
   }) => $active ? theme2.click.button.group.color.background.active : theme2.click.button.group.color.background.default, ({
@@ -10072,15 +10079,23 @@ var __publicField = (obj, key, value) => {
     theme: theme2
   }) => theme2.click.button.group.typography.label.hover, ({
     theme: theme2
+  }) => theme2.click.button.group.color.text.hover, ({
+    theme: theme2
   }) => theme2.click.button.group.typography.label.disabled, ({
+    theme: theme2
+  }) => theme2.click.button.group.color.text.disabled, ({
     theme: theme2,
     $active
   }) => theme2.click.button.group.color.background[$active ? "disabled-active" : "disabled"], ({
     theme: theme2
+  }) => theme2.click.button.group.color.text.disabled, ({
+    theme: theme2
   }) => theme2.click.button.group.color.background.active, ({
     theme: theme2
   }) => theme2.click.button.group.typography.label.active, ({
     theme: theme2
+  }) => theme2.click.button.group.color.text.active, ({
+    theme: theme2
   }) => theme2.click.button.group.color.background["disabled-active"], ({
     theme: theme2,
     $type,
@@ -16989,7 +17004,7 @@ var __publicField = (obj, key, value) => {
     const isSelected = selectionType === "selectDirect";
     const isSelectedLeft = (leftSelectionType === "selectDirect" || isSelected) && leftSelectionType !== selectionType;
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(HeaderCellContainer, { $width: columnWidth(columnIndex), $columnPosition: columnPosition, $height: height, "data-header": columnIndex, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(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 }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(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(columnIndex) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(ColumnResizer, { height, onColumnResize, columnIndex, setResizeCursorPosition })
     ] });
   };
@@ -31361,6 +31376,7 @@ var __publicField = (obj, key, value) => {
     const html = renderToStaticMarkup(React.createElement(cell, {
       rowIndex,
       columnIndex,
+      width: 1e3,
       type: "row-cell"
     }));
     td.innerHTML = html;
@@ -32074,11 +32090,15 @@ var __publicField = (obj, key, value) => {
         lastRowStart.current = rowStart;
       }
     }, [rowStart, onItemsRendered]);
+    const CellWithWidth = (args) => {
+      const width = columnWidth(args.columnIndex);
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Cell, { ...args, width });
+    };
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(ContextMenu, { modal: false, onOpenChange: setContextMenuOpen, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(ContextMenuTrigger, { as: ContextMenu.Trigger, ref: mergeRefs([forwardedRef, containerRef]), tabIndex: 0, onMouseDown, onMouseMove, onKeyDown, onPointerDown, onPointerUp, onPointerLeave: setPointerCapture, onPointerEnter: setPointerCapture, onContextMenu, $rounded: rounded, $height: autoHeight ? rowCount * rowHeight + (showHeader ? headerHeight : 0) + elementBorderRef.current.scrollBarHeight : void 0, $showBorder: showBorder, children: /* @__PURE__ */ jsxRuntimeExports.jsx(AutoSizer, { onResize, children: ({
         height,
         width
-      }) => /* @__PURE__ */ jsxRuntimeExports.jsx(VariableSizeGrid, { ref: forwardedGridRef ? mergeRefs([forwardedGridRef, gridRef]) : gridRef, height, width, columnCount, rowHeight: () => rowHeight, useIsScrolling, innerElementType: InnerElementType, itemData: data, initialScrollTop: focus.row < rowStart ? focus.row * rowHeight : (focus.row - rowStart) * rowHeight, initialScrollLeft: getColumnHorizontalPosition(focus.column), columnWidth, rowCount, onScroll, outerRef, outerElementType: OuterElementType, onItemsRendered, ...props, children: Cell }) }) }),
+      }) => /* @__PURE__ */ jsxRuntimeExports.jsx(VariableSizeGrid, { ref: forwardedGridRef ? mergeRefs([forwardedGridRef, gridRef]) : gridRef, height, width, columnCount, rowHeight: () => rowHeight, useIsScrolling, innerElementType: InnerElementType, itemData: data, initialScrollTop: focus.row < rowStart ? focus.row * rowHeight : (focus.row - rowStart) * rowHeight, initialScrollLeft: getColumnHorizontalPosition(focus.column), columnWidth, rowCount, onScroll, outerRef, outerElementType: OuterElementType, onItemsRendered, ...props, children: CellWithWidth }) }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(ContextMenu.Content, { children: menuOptions.map((option, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(ContextMenu.Item, { onSelect: option.onSelect, children: option.label }, `grid-${index2}`)) })
     ] });
   });
@@ -32499,6 +32519,11 @@ var __publicField = (obj, key, value) => {
     &::placeholder {
       color: ${theme2.click.field.color.placeholder.default};
     }
+
+    &:disabled, &.disabled {
+      &::placeholder {
+      color: ${theme2.click.field.color.placeholder.disabled};
+    }
   `);
   const NumberInputElement = styled(InputElement).withConfig({
     componentId: "sc-1pvd2nj-2"
@@ -42248,15 +42273,15 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
             "default": "rgba(0,0,0,0)",
             hover: "#282828",
             active: "lch(18.2 0 0)",
-            disabled: "#414141",
-            "disabled-active": "lch(22 0 0)",
+            disabled: "rgba(0,0,0,0)",
+            "disabled-active": "lch(0 0 0 / 0)",
             panel: "rgba(0,0,0,0)"
           },
           text: {
-            "default": "#ffffff",
-            hover: "#ffffff",
+            "default": "#c0c0c0",
+            hover: "#c0c0c0",
             active: "#ffffff",
-            disabled: "#808080",
+            disabled: "#414141",
             "disabled-active": "#808080"
           },
           stroke: {
@@ -42466,7 +42491,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           "default": "#ffffff",
           hover: "#ffffff",
           active: "#ffffff",
-          disabled: "#a0a0a0"
+          disabled: "#606060"
         }
       }
     },
@@ -42568,21 +42593,25 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           "default": "#b3b6bd",
           hover: "#b3b6bd",
           active: "#ffffff",
-          disabled: "#a0a0a0",
+          disabled: "#606060",
           error: "#ffbaba"
         },
         format: {
-          "default": "lch(72 4.18 268)",
-          hover: "lch(72 4.18 268)",
-          active: "lch(72 4.18 268)",
+          "default": "lch(62.9 0 0)",
+          hover: "lch(62.9 0 0)",
+          active: "lch(62.9 0 0)",
           disabled: "#808080",
-          error: "lch(72 4.18 268)"
+          error: "lch(62.9 0 0)"
         },
         genericLabel: {
           "default": "#ffffff",
           hover: "#ffffff",
           active: "#ffffff",
           disabled: "#a0a0a0"
+        },
+        placeholder: {
+          "default": "#808080",
+          disabled: "#606060"
         }
       }
     },
@@ -42603,11 +42632,11 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
             disabled: "#414141"
           },
           format: {
-            "default": "lch(72 4.18 268)",
-            hover: "lch(72 4.18 268)",
-            active: "lch(72 4.18 268)",
+            "default": "lch(62.9 0 0)",
+            hover: "lch(62.9 0 0)",
+            active: "lch(62.9 0 0)",
             disabled: "#808080",
-            error: "lch(72 4.18 268)"
+            error: "lch(62.9 0 0)"
           },
           stroke: {
             "default": "#323232"
@@ -42646,7 +42675,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       autocomplete: {
         color: {
           placeholder: {
-            "default": "#9a9ea7"
+            "default": "#808080"
           },
           searchTerm: {
             "default": "#ffffff"
@@ -43718,16 +43747,16 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
             "default": "rgba(0,0,0,0)",
             hover: "#f6f7fa",
             active: "lch(97.3 1.53 272)",
-            disabled: "#dfdfdf",
-            "disabled-active": "lch(71.1 0 0)",
+            disabled: "rgba(0,0,0,0)",
+            "disabled-active": "lch(77.8 1.22 272)",
             panel: "rgba(0,0,0,0)"
           },
           text: {
-            "default": "#161517",
-            hover: "#161517",
+            "default": "#505050",
+            hover: "#505050",
             active: "#161517",
             disabled: "#a0a0a0",
-            "disabled-active": "#808080"
+            "disabled-active": "#a0a0a0"
           },
           stroke: {
             "default": "rgba(0,0,0,0)",
@@ -44049,7 +44078,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           disabled: "#a0a0a0"
         },
         placeholder: {
-          "default": "#9a9ea7"
+          "default": "#9a9ea7",
+          disabled: "#b3b6bd"
         }
       }
     },
@@ -45504,16 +45534,16 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
             "default": "rgba(0,0,0,0)",
             hover: "#f6f7fa",
             active: "lch(97.3 1.53 272)",
-            disabled: "#dfdfdf",
-            "disabled-active": "lch(71.1 0 0)",
+            disabled: "rgba(0,0,0,0)",
+            "disabled-active": "lch(77.8 1.22 272)",
             panel: "rgba(0,0,0,0)"
           },
           text: {
-            "default": "#161517",
-            hover: "#161517",
+            "default": "#505050",
+            hover: "#505050",
             active: "#161517",
             disabled: "#a0a0a0",
-            "disabled-active": "#808080"
+            "disabled-active": "#a0a0a0"
           },
           stroke: {
             "default": "rgba(0,0,0,0)",
@@ -46105,7 +46135,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           disabled: "#a0a0a0"
         },
         placeholder: {
-          "default": "#9a9ea7"
+          "default": "#9a9ea7",
+          disabled: "#b3b6bd"
         }
       }
     },
@@ -47653,6 +47684,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       "400": "#a0a0a0",
       "500": "#808080",
       "600": "#606060",
+      "650": "#505050",
       "700": "#414141",
       "712": "#323232",
       "725": "#282828",
@@ -47965,8 +47997,9 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   const useCUITheme = () => {
     const theme2 = styled.useTheme();
     return {
-      name: theme2.name,
+      breakpoint: theme2.breakpoint,
       global: theme2.global,
+      name: theme2.name,
       sizes: theme2.sizes
     };
   };

package/dist/components/Grid/Cell.d.ts

@@ -1,4 +1,8 @@
 import { GridChildComponentProps } from 'react-window';
 import { ItemDataType } from './types';
 
-export declare const Cell: import('react').MemoExoticComponent<({ data, rowIndex, columnIndex, style, ...props }: GridChildComponentProps<ItemDataType>) => import("react/jsx-runtime").JSX.Element>;
+type CellProps = GridChildComponentProps<ItemDataType> & {
+    width: number;
+};
+export declare const Cell: import('react').MemoExoticComponent<({ data, rowIndex, columnIndex, style, ...props }: CellProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/components/Grid/types.d.ts

@@ -9,10 +9,12 @@ interface CellCommonProps extends HTMLAttributes<HTMLElement> {
 interface CellHeaderProps extends CellCommonProps {
     rowIndex?: never;
     type: "header-cell";
+    width: number;
 }
 interface CellBodyProps extends CellCommonProps {
     rowIndex: number;
     type: "row-cell";
+    width: number;
 }
 type CellComponentProps = CellHeaderProps | CellBodyProps;
 export type CellProps = ComponentType<CellComponentProps>;

package/dist/components/Icon/IconCommon.d.ts

@@ -51,6 +51,7 @@ export declare const ICONS_MAP: {
     "dots-triangle": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     "dots-vertical": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     "dots-vertical-double": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "double-check": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     download: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     "download-in-circle": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     email: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/types.d.ts

@@ -5,7 +5,7 @@ import { LogoName } from '../Logos/types';
 import { PaymentName, PaymentProps } from '../icons/Payments';
 
 export type IconSize = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
-export declare const ICON_NAMES: readonly ["activity", "alarm", "arrow-down", "arrow-left", "arrow-right", "arrow-triangle", "arrow-directions", "arrow-up", "auth-app", "auth-sms", "backups", "bar-chart", "bell", "beta", "blog", "book", "brackets", "briefcase", "building", "burger-menu", "cards", "cell-tower", "chat", "check", "check-in-circle", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle", "clock", "cloud", "cloud-keys", "code", "code-in-square", "connect", "connect-alt", "console", "copy", "cross", "credit-card", "data", "database", "disk", "display", "document", "dot", "dots-horizontal", "dots-triangle", "dots-vertical", "dots-vertical-double", "download", "download-in-circle", "email", "empty", "enter", "eye", "eye-closed", "filter", "fire", "flag", "flask", "folder-closed", "folder-open", "gear", "gift", "git-merge", "history", "horizontal-loading", "home", "http", "http-monitoring", "info-in-circle", "information", "insert-row", "integrations", "key", "keys", "lifebuoy", "light-bulb", "lightening", "line-in-circle", "loading", "loading-animated", "lock", "metrics", "metrics-alt", "no-cloud", "pause", "payment", "pencil", "pie-chart", "play", "play-in-circle", "plus", "popout", "puzzle-piece", "query", "question", "refresh", "rocket", "search", "secure", "server", "services", "settings", "share", "share-arrow", "share-network", "slide-in", "slide-out", "sort-alt", "sort", "sparkle", "speaker", "speed", "star", "stop", "support", "table", "taxi", "trash", "upload", "url", "user", "users", "warning", "waves"];
+export declare const ICON_NAMES: readonly ["activity", "alarm", "arrow-down", "arrow-left", "arrow-right", "arrow-triangle", "arrow-directions", "arrow-up", "auth-app", "auth-sms", "backups", "bar-chart", "bell", "beta", "blog", "book", "brackets", "briefcase", "building", "burger-menu", "cards", "cell-tower", "chat", "check", "check-in-circle", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle", "clock", "cloud", "cloud-keys", "code", "code-in-square", "connect", "connect-alt", "console", "copy", "cross", "credit-card", "data", "database", "disk", "display", "document", "dot", "dots-horizontal", "dots-triangle", "dots-vertical", "dots-vertical-double", "double-check", "download", "download-in-circle", "email", "empty", "enter", "eye", "eye-closed", "filter", "fire", "flag", "flask", "folder-closed", "folder-open", "gear", "gift", "git-merge", "history", "horizontal-loading", "home", "http", "http-monitoring", "info-in-circle", "information", "insert-row", "integrations", "key", "keys", "lifebuoy", "light-bulb", "lightening", "line-in-circle", "loading", "loading-animated", "lock", "metrics", "metrics-alt", "no-cloud", "pause", "payment", "pencil", "pie-chart", "play", "play-in-circle", "plus", "popout", "puzzle-piece", "query", "question", "refresh", "rocket", "search", "secure", "server", "services", "settings", "share", "share-arrow", "share-network", "slide-in", "slide-out", "sort-alt", "sort", "sparkle", "speaker", "speed", "star", "stop", "support", "table", "taxi", "trash", "upload", "url", "user", "users", "warning", "waves"];
 export type IconName = (typeof ICON_NAMES)[number];
 export interface IconProps extends SVGAttributes<HTMLOrSVGElement> {
     name: IconName;

package/dist/components/icons/DoubleCheckIcon.d.ts

@@ -0,0 +1,4 @@
+import { SVGAttributes } from 'react';
+
+declare const DoubleCheckIcon: (props: SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default DoubleCheckIcon;

package/dist/styles/types.d.ts

@@ -1309,6 +1309,7 @@ export interface Theme {
                 };
                 "placeholder": {
                     "default": string;
+                    "disabled": string;
                 };
             };
         };
@@ -2856,6 +2857,7 @@ export interface Theme {
             "400": string;
             "500": string;
             "600": string;
+            "650": string;
             "700": string;
             "712": string;
             "725": string;

package/dist/styles/variables.dark.json.d.ts

@@ -387,15 +387,15 @@ declare const _default: {
             "default": "rgba(0,0,0,0)",
             "hover": "#282828",
             "active": "lch(18.2 0 0)",
-            "disabled": "#414141",
-            "disabled-active": "lch(22 0 0)",
+            "disabled": "rgba(0,0,0,0)",
+            "disabled-active": "lch(0 0 0 / 0)",
             "panel": "rgba(0,0,0,0)"
           },
           "text": {
-            "default": "#ffffff",
-            "hover": "#ffffff",
+            "default": "#c0c0c0",
+            "hover": "#c0c0c0",
             "active": "#ffffff",
-            "disabled": "#808080",
+            "disabled": "#414141",
             "disabled-active": "#808080"
           },
           "stroke": {
@@ -605,7 +605,7 @@ declare const _default: {
           "default": "#ffffff",
           "hover": "#ffffff",
           "active": "#ffffff",
-          "disabled": "#a0a0a0"
+          "disabled": "#606060"
         }
       }
     },
@@ -707,21 +707,25 @@ declare const _default: {
           "default": "#b3b6bd",
           "hover": "#b3b6bd",
           "active": "#ffffff",
-          "disabled": "#a0a0a0",
+          "disabled": "#606060",
           "error": "#ffbaba"
         },
         "format": {
-          "default": "lch(72 4.18 268)",
-          "hover": "lch(72 4.18 268)",
-          "active": "lch(72 4.18 268)",
+          "default": "lch(62.9 0 0)",
+          "hover": "lch(62.9 0 0)",
+          "active": "lch(62.9 0 0)",
           "disabled": "#808080",
-          "error": "lch(72 4.18 268)"
+          "error": "lch(62.9 0 0)"
         },
         "genericLabel": {
           "default": "#ffffff",
           "hover": "#ffffff",
           "active": "#ffffff",
           "disabled": "#a0a0a0"
+        },
+        "placeholder": {
+          "default": "#808080",
+          "disabled": "#606060"
         }
       }
     },
@@ -742,11 +746,11 @@ declare const _default: {
             "disabled": "#414141"
           },
           "format": {
-            "default": "lch(72 4.18 268)",
-            "hover": "lch(72 4.18 268)",
-            "active": "lch(72 4.18 268)",
+            "default": "lch(62.9 0 0)",
+            "hover": "lch(62.9 0 0)",
+            "active": "lch(62.9 0 0)",
             "disabled": "#808080",
-            "error": "lch(72 4.18 268)"
+            "error": "lch(62.9 0 0)"
           },
           "stroke": {
             "default": "#323232"
@@ -785,7 +789,7 @@ declare const _default: {
       "autocomplete": {
         "color": {
           "placeholder": {
-            "default": "#9a9ea7"
+            "default": "#808080"
           },
           "searchTerm": {
             "default": "#ffffff"

package/dist/styles/variables.json.d.ts

@@ -707,16 +707,16 @@ declare const _default: {
             "default": "rgba(0,0,0,0)",
             "hover": "#f6f7fa",
             "active": "lch(97.3 1.53 272)",
-            "disabled": "#dfdfdf",
-            "disabled-active": "lch(71.1 0 0)",
+            "disabled": "rgba(0,0,0,0)",
+            "disabled-active": "lch(77.8 1.22 272)",
             "panel": "rgba(0,0,0,0)"
           },
           "text": {
-            "default": "#161517",
-            "hover": "#161517",
+            "default": "#505050",
+            "hover": "#505050",
             "active": "#161517",
             "disabled": "#a0a0a0",
-            "disabled-active": "#808080"
+            "disabled-active": "#a0a0a0"
           },
           "stroke": {
             "default": "rgba(0,0,0,0)",
@@ -1308,7 +1308,8 @@ declare const _default: {
           "disabled": "#a0a0a0"
         },
         "placeholder": {
-          "default": "#9a9ea7"
+          "default": "#9a9ea7",
+          "disabled": "#b3b6bd"
         }
       }
     },
@@ -2856,6 +2857,7 @@ declare const _default: {
       "400": "#a0a0a0",
       "500": "#808080",
       "600": "#606060",
+      "650": "#505050",
       "700": "#414141",
       "712": "#323232",
       "725": "#282828",

package/dist/styles/variables.light.json.d.ts

@@ -387,16 +387,16 @@ declare const _default: {
             "default": "rgba(0,0,0,0)",
             "hover": "#f6f7fa",
             "active": "lch(97.3 1.53 272)",
-            "disabled": "#dfdfdf",
-            "disabled-active": "lch(71.1 0 0)",
+            "disabled": "rgba(0,0,0,0)",
+            "disabled-active": "lch(77.8 1.22 272)",
             "panel": "rgba(0,0,0,0)"
           },
           "text": {
-            "default": "#161517",
-            "hover": "#161517",
+            "default": "#505050",
+            "hover": "#505050",
             "active": "#161517",
             "disabled": "#a0a0a0",
-            "disabled-active": "#808080"
+            "disabled-active": "#a0a0a0"
           },
           "stroke": {
             "default": "rgba(0,0,0,0)",
@@ -718,7 +718,8 @@ declare const _default: {
           "disabled": "#a0a0a0"
         },
         "placeholder": {
-          "default": "#9a9ea7"
+          "default": "#9a9ea7",
+          "disabled": "#b3b6bd"
         }
       }
     },

package/dist/theme/index.d.ts

@@ -6,7 +6,7 @@ declare module "styled-components" {
     interface DefaultTheme extends Theme {
     }
 }
-type CUIThemeType = Pick<Theme, "global" | "sizes" | "name">;
+type CUIThemeType = Pick<Theme, "breakpoint" | "global" | "name" | "sizes">;
 declare const useCUITheme: () => CUIThemeType;
 export type { ThemeName, CUIThemeType };
 export { useCUITheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.146",
+  "version": "v0.0.148",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",
@@ -32,6 +32,7 @@
     "test": "vitest",
     "dev": "vite",
     "generate-tokens": "node build-tokens.js",
+    "typecheck": "tsc --noEmit",
     "build": "tsc && vite build",
     "build:watch": "watch 'npm run build' ./src",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",