@clickhouse/click-ui 0.0.165 → 0.0.167

package/dist/click-ui.es.js

@@ -38627,11 +38627,15 @@ const TableRow = styled.tr.withConfig({
   theme: theme2,
   $isDeleted,
   $isDisabled,
+  $isActive,
   $rowHeight
 }) => `
     ${$rowHeight ? `height: ${$rowHeight};` : ""}
     background-color: ${theme2.click.table.row.color.background.default};
     border-bottom: ${theme2.click.table.cell.stroke} solid ${theme2.click.table.row.color.stroke.default};
+
+    ${$isActive && `background-color: ${theme2.click.table.row.color.background.active};`}
+
     &:active {
       background-color: ${theme2.click.table.row.color.background.active};
     }
@@ -38754,6 +38758,7 @@ const TableBodyRow = ({
   onDelete,
   onEdit,
   isDeleted,
+  isActive,
   isDisabled,
   size: size2,
   actionsList,
@@ -38762,7 +38767,7 @@ const TableBodyRow = ({
 }) => {
   const isDeletable = typeof onDelete === "function";
   const isEditable = typeof onEdit === "function";
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(TableRow, { $isSelectable: isSelectable, $isDeleted: isDeleted, $isDisabled: isDisabled, $showActions: isDeletable || isEditable, $rowHeight: rowHeight, ...rowProps, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(TableRow, { $isSelectable: isSelectable, $isDeleted: isDeleted, $isDisabled: isDisabled, $isActive: isActive, $showActions: isDeletable || isEditable, $rowHeight: rowHeight, ...rowProps, children: [
     isSelectable && /* @__PURE__ */ jsxRuntimeExports.jsx(SelectData, { $size: size2, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Checkbox, { checked: isSelected, onCheckedChange: onSelect }) }),
     items.map(({
       label,
@@ -43553,6 +43558,9 @@ const global$3 = {
         foreground: "#1d1d1d",
         background: "#FAFF69"
       }
+    },
+    icon: {
+      background: "linear-gradient(132deg, #FAFF69 7.59%, #292929 30.01%);"
     }
   }
 };
@@ -44072,7 +44080,7 @@ const click$1 = {
           background: {
             "default": "#ffffff",
             hover: "#f6f7fa",
-            active: "#f6f7fa",
+            active: "#ffffff",
             disabled: "#dfdfdf"
           },
           title: {
@@ -44985,7 +44993,8 @@ const global$2 = {
       "default": "#ffffff",
       muted: "#f6f7fa",
       sidebar: "#ffffff",
-      split: "#f6f7fa"
+      split: "#f6f7fa",
+      muted_a: "lch(49.8 30.5 277 / 0.06)"
     },
     text: {
       "default": "#161517",
@@ -45048,6 +45057,9 @@ const global$2 = {
         foreground: "#135be6",
         background: "#dae6fc"
       }
+    },
+    icon: {
+      background: "linear-gradient(132deg, #FFFFFF 7.59%, #292929 30.01%);"
     }
   }
 };
@@ -46004,7 +46016,7 @@ const click = {
           background: {
             "default": "#ffffff",
             hover: "#f6f7fa",
-            active: "#f6f7fa",
+            active: "#ffffff",
             disabled: "#dfdfdf"
           },
           title: {
@@ -47886,7 +47898,8 @@ const global$1 = {
       "default": "#ffffff",
       muted: "#f6f7fa",
       sidebar: "#ffffff",
-      split: "#f6f7fa"
+      split: "#f6f7fa",
+      muted_a: "lch(49.8 30.5 277 / 0.06)"
     },
     text: {
       "default": "#161517",
@@ -47949,6 +47962,9 @@ const global$1 = {
         foreground: "#135be6",
         background: "#dae6fc"
       }
+    },
+    icon: {
+      background: "linear-gradient(132deg, #FFFFFF 7.59%, #292929 30.01%);"
     }
   }
 };
@@ -47994,7 +48010,8 @@ const palette = {
     "700": "#53575f",
     "800": "#302e32",
     "900": "#161517",
-    base: "#373439"
+    base: "#373439",
+    "50a": "lch(49.8 30.5 277 / 0.06)"
   },
   indigo: {
     "50": "#f4f1fc",
@@ -48065,6 +48082,8 @@ const palette = {
   },
   gradients: {
     base: "linear-gradient(229.65deg, #292924 15.78%, #0F0F0F 88.39%)",
+    yellowToblack: "linear-gradient(132deg, #FAFF69 7.59%, #292929 30.01%);",
+    whiteToblack: "linear-gradient(132deg, #FFFFFF 7.59%, #292929 30.01%);",
     transparent: "rgba(0,0,0,0)"
   },
   utility: {

package/dist/click-ui.umd.js

@@ -38644,11 +38644,15 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     theme: theme2,
     $isDeleted,
     $isDisabled,
+    $isActive,
     $rowHeight
   }) => `
     ${$rowHeight ? `height: ${$rowHeight};` : ""}
     background-color: ${theme2.click.table.row.color.background.default};
     border-bottom: ${theme2.click.table.cell.stroke} solid ${theme2.click.table.row.color.stroke.default};
+
+    ${$isActive && `background-color: ${theme2.click.table.row.color.background.active};`}
+
     &:active {
       background-color: ${theme2.click.table.row.color.background.active};
     }
@@ -38771,6 +38775,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     onDelete,
     onEdit,
     isDeleted,
+    isActive,
     isDisabled,
     size: size2,
     actionsList,
@@ -38779,7 +38784,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   }) => {
     const isDeletable = typeof onDelete === "function";
     const isEditable = typeof onEdit === "function";
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(TableRow, { $isSelectable: isSelectable, $isDeleted: isDeleted, $isDisabled: isDisabled, $showActions: isDeletable || isEditable, $rowHeight: rowHeight, ...rowProps, children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(TableRow, { $isSelectable: isSelectable, $isDeleted: isDeleted, $isDisabled: isDisabled, $isActive: isActive, $showActions: isDeletable || isEditable, $rowHeight: rowHeight, ...rowProps, children: [
       isSelectable && /* @__PURE__ */ jsxRuntimeExports.jsx(SelectData, { $size: size2, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Checkbox, { checked: isSelected, onCheckedChange: onSelect }) }),
       items.map(({
         label,
@@ -43570,6 +43575,9 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           foreground: "#1d1d1d",
           background: "#FAFF69"
         }
+      },
+      icon: {
+        background: "linear-gradient(132deg, #FAFF69 7.59%, #292929 30.01%);"
       }
     }
   };
@@ -44089,7 +44097,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
             background: {
               "default": "#ffffff",
               hover: "#f6f7fa",
-              active: "#f6f7fa",
+              active: "#ffffff",
               disabled: "#dfdfdf"
             },
             title: {
@@ -45002,7 +45010,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         "default": "#ffffff",
         muted: "#f6f7fa",
         sidebar: "#ffffff",
-        split: "#f6f7fa"
+        split: "#f6f7fa",
+        muted_a: "lch(49.8 30.5 277 / 0.06)"
       },
       text: {
         "default": "#161517",
@@ -45065,6 +45074,9 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           foreground: "#135be6",
           background: "#dae6fc"
         }
+      },
+      icon: {
+        background: "linear-gradient(132deg, #FFFFFF 7.59%, #292929 30.01%);"
       }
     }
   };
@@ -46021,7 +46033,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
             background: {
               "default": "#ffffff",
               hover: "#f6f7fa",
-              active: "#f6f7fa",
+              active: "#ffffff",
               disabled: "#dfdfdf"
             },
             title: {
@@ -47903,7 +47915,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         "default": "#ffffff",
         muted: "#f6f7fa",
         sidebar: "#ffffff",
-        split: "#f6f7fa"
+        split: "#f6f7fa",
+        muted_a: "lch(49.8 30.5 277 / 0.06)"
       },
       text: {
         "default": "#161517",
@@ -47966,6 +47979,9 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           foreground: "#135be6",
           background: "#dae6fc"
         }
+      },
+      icon: {
+        background: "linear-gradient(132deg, #FFFFFF 7.59%, #292929 30.01%);"
       }
     }
   };
@@ -48011,7 +48027,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       "700": "#53575f",
       "800": "#302e32",
       "900": "#161517",
-      base: "#373439"
+      base: "#373439",
+      "50a": "lch(49.8 30.5 277 / 0.06)"
     },
     indigo: {
       "50": "#f4f1fc",
@@ -48082,6 +48099,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     },
     gradients: {
       base: "linear-gradient(229.65deg, #292924 15.78%, #0F0F0F 88.39%)",
+      yellowToblack: "linear-gradient(132deg, #FAFF69 7.59%, #292929 30.01%);",
+      whiteToblack: "linear-gradient(132deg, #FFFFFF 7.59%, #292929 30.01%);",
       transparent: "rgba(0,0,0,0)"
     },
     utility: {

package/dist/components/Table/Table.d.ts

@@ -19,6 +19,7 @@ export interface TableRowType extends Omit<HTMLAttributes<HTMLTableRowElement>,
     items: Array<TableCellType>;
     isDisabled?: boolean;
     isDeleted?: boolean;
+    isActive?: boolean;
 }
 interface CommonTableProps extends Omit<HTMLAttributes<HTMLTableElement>, "children" | "onSelect"> {
     headers: Array<TableHeaderType>;

package/dist/components/types.d.ts

@@ -18,7 +18,7 @@ import { ContextMenuProps } from '@radix-ui/react-context-menu';
 import { CheckboxProps } from './Checkbox/Checkbox';
 import { CardPrimaryProps } from './CardPrimary/CardPrimary';
 import { CardSecondaryProps, BadgeState } from './CardSecondary/CardSecondary';
-import { ButtonProps } from './Button/Button';
+import { ButtonProps, ButtonType } from './Button/Button';
 import { ButtonGroupProps } from './ButtonGroup/ButtonGroup';
 import { BadgeProps } from './Badge/Badge';
 import { AvatarProps } from './Avatar/Avatar';
@@ -62,7 +62,7 @@ export type { AlertProps };
 export type { AvatarProps };
 export type { BadgeProps };
 export type { ButtonGroupProps };
-export type { ButtonProps };
+export type { ButtonProps, ButtonType };
 export type { CardSecondaryProps, BadgeState };
 export type { CardPrimaryProps };
 export type { CheckboxProps };

package/dist/styles/types.d.ts

@@ -2823,6 +2823,7 @@ export interface Theme {
                 "muted": string;
                 "sidebar": string;
                 "split": string;
+                "muted_a": string;
             };
             "text": {
                 "default": string;
@@ -2886,6 +2887,9 @@ export interface Theme {
                     "background": string;
                 };
             };
+            "icon": {
+                "background": string;
+            };
         };
     };
     "palette": {
@@ -2931,6 +2935,7 @@ export interface Theme {
             "800": string;
             "900": string;
             "base": string;
+            "50a": string;
         };
         "indigo": {
             "50": string;
@@ -3001,6 +3006,8 @@ export interface Theme {
         };
         "gradients": {
             "base": string;
+            "yellowToblack": string;
+            "whiteToblack": string;
             "transparent": string;
         };
         "utility": {

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

@@ -1486,6 +1486,9 @@ declare const _default: {
           "foreground": "#1d1d1d",
           "background": "#FAFF69"
         }
+      },
+      "icon": {
+        "background": "linear-gradient(132deg, #FAFF69 7.59%, #292929 30.01%);"
       }
     }
   }

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

@@ -940,7 +940,7 @@ declare const _default: {
             "background": {
               "default": "#ffffff",
               "hover": "#f6f7fa",
-              "active": "#f6f7fa",
+              "active": "#ffffff",
               "disabled": "#dfdfdf"
             },
             "title": {
@@ -2822,7 +2822,8 @@ declare const _default: {
         "default": "#ffffff",
         "muted": "#f6f7fa",
         "sidebar": "#ffffff",
-        "split": "#f6f7fa"
+        "split": "#f6f7fa",
+        "muted_a": "lch(49.8 30.5 277 / 0.06)"
       },
       "text": {
         "default": "#161517",
@@ -2885,6 +2886,9 @@ declare const _default: {
           "foreground": "#135be6",
           "background": "#dae6fc"
         }
+      },
+      "icon": {
+        "background": "linear-gradient(132deg, #FFFFFF 7.59%, #292929 30.01%);"
       }
     }
   },
@@ -2930,7 +2934,8 @@ declare const _default: {
       "700": "#53575f",
       "800": "#302e32",
       "900": "#161517",
-      "base": "#373439"
+      "base": "#373439",
+      "50a": "lch(49.8 30.5 277 / 0.06)"
     },
     "indigo": {
       "50": "#f4f1fc",
@@ -3001,6 +3006,8 @@ declare const _default: {
     },
     "gradients": {
       "base": "linear-gradient(229.65deg, #292924 15.78%, #0F0F0F 88.39%)",
+      "yellowToblack": "linear-gradient(132deg, #FAFF69 7.59%, #292929 30.01%);",
+      "whiteToblack": "linear-gradient(132deg, #FFFFFF 7.59%, #292929 30.01%);",
       "transparent": "rgba(0,0,0,0)"
     },
     "utility": {

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

@@ -503,7 +503,7 @@ declare const _default: {
             "background": {
               "default": "#ffffff",
               "hover": "#f6f7fa",
-              "active": "#f6f7fa",
+              "active": "#ffffff",
               "disabled": "#dfdfdf"
             },
             "title": {
@@ -1416,7 +1416,8 @@ declare const _default: {
         "default": "#ffffff",
         "muted": "#f6f7fa",
         "sidebar": "#ffffff",
-        "split": "#f6f7fa"
+        "split": "#f6f7fa",
+        "muted_a": "lch(49.8 30.5 277 / 0.06)"
       },
       "text": {
         "default": "#161517",
@@ -1479,6 +1480,9 @@ declare const _default: {
           "foreground": "#135be6",
           "background": "#dae6fc"
         }
+      },
+      "icon": {
+        "background": "linear-gradient(132deg, #FFFFFF 7.59%, #292929 30.01%);"
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.165",
+  "version": "0.0.167",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",