@clickhouse/click-ui 0.0.217 → 0.0.220

package/dist/click-ui.bundled.es.js

@@ -10614,33 +10614,29 @@ const Title$3 = pt.div.withConfig({
 const ButtonGroup = ({
   options,
   selected,
-  fillWidth,
+  fillWidth = false,
   onClick,
-  type,
+  type = "default",
   ...props
 }) => {
-  const lastIndex = options.length - 1;
-  const btns = options.map(({
+  const buttons = options.map(({
     value,
     label,
     ...props2
-  }, index2) => {
-    const position2 = index2 === 0 ? "left" : index2 === lastIndex ? "right" : "center";
-    return /* @__PURE__ */ jsx(Button$1, { $active: value === selected, $position: position2, $fillWidth: fillWidth, $type: type, onClick: () => onClick == null ? void 0 : onClick(value), role: "button", ...props2, children: label }, value);
-  });
-  return /* @__PURE__ */ jsx(ButtonGroupWrapper, { $fillWidth: fillWidth, $type: type, ...props, children: btns });
+  }) => /* @__PURE__ */ jsx(Button$1, { $active: value === selected, $fillWidth: fillWidth, $type: type, onClick: () => onClick == null ? void 0 : onClick(value), role: "button", ...props2, children: label }, value));
+  return /* @__PURE__ */ jsx(ButtonGroupWrapper, { $fillWidth: fillWidth, $type: type, ...props, children: buttons });
 };
 const ButtonGroupWrapper = pt.div.withConfig({
   componentId: "sc-ukgugp-0"
 })(["display:inline-flex;box-sizing:border-box;flex-direction:row;justify-content:center;align-items:center;padding:", ";gap:", ";border:", ";background:", ";border-radius:", ";width:", ";"], ({
   theme: theme2,
-  $type = "default"
+  $type
 }) => `${theme2.click.button.group.space.panel[$type].x} ${theme2.click.button.group.space.panel[$type].y}`, ({
   theme: theme2,
-  $type = "default"
+  $type
 }) => theme2.click.button.group.space.panel[$type].gap, ({
   theme: theme2,
-  $type = "default"
+  $type
 }) => $type === "default" ? `1px solid ${theme2.click.button.group.color.panel.stroke[$type]}` : "none", ({
   theme: theme2
 }) => theme2.click.button.group.color.background.panel, ({
@@ -10661,12 +10657,12 @@ const Button$1 = pt.button.attrs((props) => ({
   theme: theme2
 }) => theme2.click.button.group.typography.label.default, ({
   theme: theme2,
-  $type = "default"
+  $type
 }) => `${theme2.click.button.group.space.button[$type].y} ${theme2.click.button.group.space.button[$type].x}`, ({
-  $fillWidth = false
+  $fillWidth
 }) => $fillWidth ? "flex: 1;" : "", ({
   theme: theme2,
-  $type = "default"
+  $type
 }) => theme2.click.button.group.radii.button[$type].all, ({
   theme: theme2
 }) => theme2.click.button.group.color.background.hover, ({
@@ -35685,7 +35681,9 @@ const SelectValue = pt.div.withConfig({
 })(["text-align:left;flex:1;gap:inherit;color:inherit;font:inherit;overflow:hidden;"]);
 const StyledSelectTrigger = pt($cb5cc270b50c6fcd$export$41fb9f06171c75f4).withConfig({
   componentId: "sc-oudbwg-2"
-})(["width:100%;display:flex;align-items:center;justify-content:space-between;align-items:center;cursor:pointer;span:first-of-type{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}", " [data-hide-in-trigger]{display:none;}"], ({
+})(["width:100%;display:flex;align-items:center;justify-content:space-between;align-items:center;cursor:pointer;min-height:", ";span:first-of-type{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}", " [data-hide-in-trigger]{display:none;}"], ({
+  theme: theme2
+}) => theme2.click.genericMenu.panel.size.height, ({
   theme: theme2,
   $error
 }) => `
@@ -45876,6 +45874,10 @@ const click$2 = {
         },
         label: {
           "default": "#b3b6bd"
+        },
+        barChart: {
+          "default": "#414141",
+          hover: "#606060"
         }
       }
     },
@@ -47687,6 +47689,10 @@ const click$1 = {
         },
         label: {
           "default": "#696e79"
+        },
+        barChart: {
+          "default": "#dfdfdf",
+          hover: "#c0c0c0"
         }
       }
     },
@@ -49950,6 +49956,9 @@ const click = {
       shadow: {
         "default": "0 4px 6px -1px lch(6.77 0 0 / 0.15), 0 2px 4px -1px lch(6.77 0 0 / 0.15)"
       },
+      size: {
+        height: "2rem"
+      },
       color: {
         background: {
           "default": "#ffffff"
@@ -50907,6 +50916,10 @@ const click = {
         },
         label: {
           "default": "#696e79"
+        },
+        barChart: {
+          "default": "#dfdfdf",
+          hover: "#c0c0c0"
         }
       }
     },

package/dist/click-ui.bundled.umd.js

@@ -10630,33 +10630,29 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const ButtonGroup = ({
     options: options2,
     selected,
-    fillWidth,
+    fillWidth = false,
     onClick,
-    type,
+    type = "default",
     ...props
   }) => {
-    const lastIndex = options2.length - 1;
-    const btns = options2.map(({
+    const buttons = options2.map(({
       value,
       label,
       ...props2
-    }, index2) => {
-      const position2 = index2 === 0 ? "left" : index2 === lastIndex ? "right" : "center";
-      return /* @__PURE__ */ jsxRuntime.jsx(Button$1, { $active: value === selected, $position: position2, $fillWidth: fillWidth, $type: type, onClick: () => onClick == null ? void 0 : onClick(value), role: "button", ...props2, children: label }, value);
-    });
-    return /* @__PURE__ */ jsxRuntime.jsx(ButtonGroupWrapper, { $fillWidth: fillWidth, $type: type, ...props, children: btns });
+    }) => /* @__PURE__ */ jsxRuntime.jsx(Button$1, { $active: value === selected, $fillWidth: fillWidth, $type: type, onClick: () => onClick == null ? void 0 : onClick(value), role: "button", ...props2, children: label }, value));
+    return /* @__PURE__ */ jsxRuntime.jsx(ButtonGroupWrapper, { $fillWidth: fillWidth, $type: type, ...props, children: buttons });
   };
   const ButtonGroupWrapper = pt.div.withConfig({
     componentId: "sc-ukgugp-0"
   })(["display:inline-flex;box-sizing:border-box;flex-direction:row;justify-content:center;align-items:center;padding:", ";gap:", ";border:", ";background:", ";border-radius:", ";width:", ";"], ({
     theme: theme2,
-    $type = "default"
+    $type
   }) => `${theme2.click.button.group.space.panel[$type].x} ${theme2.click.button.group.space.panel[$type].y}`, ({
     theme: theme2,
-    $type = "default"
+    $type
   }) => theme2.click.button.group.space.panel[$type].gap, ({
     theme: theme2,
-    $type = "default"
+    $type
   }) => $type === "default" ? `1px solid ${theme2.click.button.group.color.panel.stroke[$type]}` : "none", ({
     theme: theme2
   }) => theme2.click.button.group.color.background.panel, ({
@@ -10677,12 +10673,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     theme: theme2
   }) => theme2.click.button.group.typography.label.default, ({
     theme: theme2,
-    $type = "default"
+    $type
   }) => `${theme2.click.button.group.space.button[$type].y} ${theme2.click.button.group.space.button[$type].x}`, ({
-    $fillWidth = false
+    $fillWidth
   }) => $fillWidth ? "flex: 1;" : "", ({
     theme: theme2,
-    $type = "default"
+    $type
   }) => theme2.click.button.group.radii.button[$type].all, ({
     theme: theme2
   }) => theme2.click.button.group.color.background.hover, ({
@@ -35701,7 +35697,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   })(["text-align:left;flex:1;gap:inherit;color:inherit;font:inherit;overflow:hidden;"]);
   const StyledSelectTrigger = pt($cb5cc270b50c6fcd$export$41fb9f06171c75f4).withConfig({
     componentId: "sc-oudbwg-2"
-  })(["width:100%;display:flex;align-items:center;justify-content:space-between;align-items:center;cursor:pointer;span:first-of-type{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}", " [data-hide-in-trigger]{display:none;}"], ({
+  })(["width:100%;display:flex;align-items:center;justify-content:space-between;align-items:center;cursor:pointer;min-height:", ";span:first-of-type{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}", " [data-hide-in-trigger]{display:none;}"], ({
+    theme: theme2
+  }) => theme2.click.genericMenu.panel.size.height, ({
     theme: theme2,
     $error
   }) => `
@@ -45892,6 +45890,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           },
           label: {
             "default": "#b3b6bd"
+          },
+          barChart: {
+            "default": "#414141",
+            hover: "#606060"
           }
         }
       },
@@ -47703,6 +47705,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           },
           label: {
             "default": "#696e79"
+          },
+          barChart: {
+            "default": "#dfdfdf",
+            hover: "#c0c0c0"
           }
         }
       },
@@ -49966,6 +49972,9 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         shadow: {
           "default": "0 4px 6px -1px lch(6.77 0 0 / 0.15), 0 2px 4px -1px lch(6.77 0 0 / 0.15)"
         },
+        size: {
+          height: "2rem"
+        },
         color: {
           background: {
             "default": "#ffffff"
@@ -50923,6 +50932,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           },
           label: {
             "default": "#696e79"
+          },
+          barChart: {
+            "default": "#dfdfdf",
+            hover: "#c0c0c0"
           }
         }
       },

package/dist/click-ui.es.js

@@ -9418,33 +9418,29 @@ const Title$3 = styled.div.withConfig({
 const ButtonGroup = ({
   options,
   selected,
-  fillWidth,
+  fillWidth = false,
   onClick,
-  type,
+  type = "default",
   ...props
 }) => {
-  const lastIndex = options.length - 1;
-  const btns = options.map(({
+  const buttons = options.map(({
     value,
     label,
     ...props2
-  }, index2) => {
-    const position = index2 === 0 ? "left" : index2 === lastIndex ? "right" : "center";
-    return /* @__PURE__ */ jsx(Button$1, { $active: value === selected, $position: position, $fillWidth: fillWidth, $type: type, onClick: () => onClick == null ? void 0 : onClick(value), role: "button", ...props2, children: label }, value);
-  });
-  return /* @__PURE__ */ jsx(ButtonGroupWrapper, { $fillWidth: fillWidth, $type: type, ...props, children: btns });
+  }) => /* @__PURE__ */ jsx(Button$1, { $active: value === selected, $fillWidth: fillWidth, $type: type, onClick: () => onClick == null ? void 0 : onClick(value), role: "button", ...props2, children: label }, value));
+  return /* @__PURE__ */ jsx(ButtonGroupWrapper, { $fillWidth: fillWidth, $type: type, ...props, children: buttons });
 };
 const ButtonGroupWrapper = styled.div.withConfig({
   componentId: "sc-ukgugp-0"
 })(["display:inline-flex;box-sizing:border-box;flex-direction:row;justify-content:center;align-items:center;padding:", ";gap:", ";border:", ";background:", ";border-radius:", ";width:", ";"], ({
   theme: theme2,
-  $type = "default"
+  $type
 }) => `${theme2.click.button.group.space.panel[$type].x} ${theme2.click.button.group.space.panel[$type].y}`, ({
   theme: theme2,
-  $type = "default"
+  $type
 }) => theme2.click.button.group.space.panel[$type].gap, ({
   theme: theme2,
-  $type = "default"
+  $type
 }) => $type === "default" ? `1px solid ${theme2.click.button.group.color.panel.stroke[$type]}` : "none", ({
   theme: theme2
 }) => theme2.click.button.group.color.background.panel, ({
@@ -9465,12 +9461,12 @@ const Button$1 = styled.button.attrs((props) => ({
   theme: theme2
 }) => theme2.click.button.group.typography.label.default, ({
   theme: theme2,
-  $type = "default"
+  $type
 }) => `${theme2.click.button.group.space.button[$type].y} ${theme2.click.button.group.space.button[$type].x}`, ({
-  $fillWidth = false
+  $fillWidth
 }) => $fillWidth ? "flex: 1;" : "", ({
   theme: theme2,
-  $type = "default"
+  $type
 }) => theme2.click.button.group.radii.button[$type].all, ({
   theme: theme2
 }) => theme2.click.button.group.color.background.hover, ({
@@ -34517,7 +34513,9 @@ const SelectValue = styled.div.withConfig({
 })(["text-align:left;flex:1;gap:inherit;color:inherit;font:inherit;overflow:hidden;"]);
 const StyledSelectTrigger = styled($cb5cc270b50c6fcd$export$41fb9f06171c75f4).withConfig({
   componentId: "sc-oudbwg-2"
-})(["width:100%;display:flex;align-items:center;justify-content:space-between;align-items:center;cursor:pointer;span:first-of-type{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}", " [data-hide-in-trigger]{display:none;}"], ({
+})(["width:100%;display:flex;align-items:center;justify-content:space-between;align-items:center;cursor:pointer;min-height:", ";span:first-of-type{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}", " [data-hide-in-trigger]{display:none;}"], ({
+  theme: theme2
+}) => theme2.click.genericMenu.panel.size.height, ({
   theme: theme2,
   $error
 }) => `
@@ -44708,6 +44706,10 @@ const click$2 = {
         },
         label: {
           "default": "#b3b6bd"
+        },
+        barChart: {
+          "default": "#414141",
+          hover: "#606060"
         }
       }
     },
@@ -46519,6 +46521,10 @@ const click$1 = {
         },
         label: {
           "default": "#696e79"
+        },
+        barChart: {
+          "default": "#dfdfdf",
+          hover: "#c0c0c0"
         }
       }
     },
@@ -48782,6 +48788,9 @@ const click = {
       shadow: {
         "default": "0 4px 6px -1px lch(6.77 0 0 / 0.15), 0 2px 4px -1px lch(6.77 0 0 / 0.15)"
       },
+      size: {
+        height: "2rem"
+      },
       color: {
         background: {
           "default": "#ffffff"
@@ -49739,6 +49748,10 @@ const click = {
         },
         label: {
           "default": "#696e79"
+        },
+        barChart: {
+          "default": "#dfdfdf",
+          hover: "#c0c0c0"
         }
       }
     },

package/dist/click-ui.umd.js

@@ -9433,33 +9433,29 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const ButtonGroup = ({
     options: options2,
     selected,
-    fillWidth,
+    fillWidth = false,
     onClick,
-    type,
+    type = "default",
     ...props
   }) => {
-    const lastIndex = options2.length - 1;
-    const btns = options2.map(({
+    const buttons = options2.map(({
       value,
       label,
       ...props2
-    }, index2) => {
-      const position = index2 === 0 ? "left" : index2 === lastIndex ? "right" : "center";
-      return /* @__PURE__ */ jsxRuntime.jsx(Button$1, { $active: value === selected, $position: position, $fillWidth: fillWidth, $type: type, onClick: () => onClick == null ? void 0 : onClick(value), role: "button", ...props2, children: label }, value);
-    });
-    return /* @__PURE__ */ jsxRuntime.jsx(ButtonGroupWrapper, { $fillWidth: fillWidth, $type: type, ...props, children: btns });
+    }) => /* @__PURE__ */ jsxRuntime.jsx(Button$1, { $active: value === selected, $fillWidth: fillWidth, $type: type, onClick: () => onClick == null ? void 0 : onClick(value), role: "button", ...props2, children: label }, value));
+    return /* @__PURE__ */ jsxRuntime.jsx(ButtonGroupWrapper, { $fillWidth: fillWidth, $type: type, ...props, children: buttons });
   };
   const ButtonGroupWrapper = styled.styled.div.withConfig({
     componentId: "sc-ukgugp-0"
   })(["display:inline-flex;box-sizing:border-box;flex-direction:row;justify-content:center;align-items:center;padding:", ";gap:", ";border:", ";background:", ";border-radius:", ";width:", ";"], ({
     theme: theme2,
-    $type = "default"
+    $type
   }) => `${theme2.click.button.group.space.panel[$type].x} ${theme2.click.button.group.space.panel[$type].y}`, ({
     theme: theme2,
-    $type = "default"
+    $type
   }) => theme2.click.button.group.space.panel[$type].gap, ({
     theme: theme2,
-    $type = "default"
+    $type
   }) => $type === "default" ? `1px solid ${theme2.click.button.group.color.panel.stroke[$type]}` : "none", ({
     theme: theme2
   }) => theme2.click.button.group.color.background.panel, ({
@@ -9480,12 +9476,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     theme: theme2
   }) => theme2.click.button.group.typography.label.default, ({
     theme: theme2,
-    $type = "default"
+    $type
   }) => `${theme2.click.button.group.space.button[$type].y} ${theme2.click.button.group.space.button[$type].x}`, ({
-    $fillWidth = false
+    $fillWidth
   }) => $fillWidth ? "flex: 1;" : "", ({
     theme: theme2,
-    $type = "default"
+    $type
   }) => theme2.click.button.group.radii.button[$type].all, ({
     theme: theme2
   }) => theme2.click.button.group.color.background.hover, ({
@@ -34532,7 +34528,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   })(["text-align:left;flex:1;gap:inherit;color:inherit;font:inherit;overflow:hidden;"]);
   const StyledSelectTrigger = styled.styled($cb5cc270b50c6fcd$export$41fb9f06171c75f4).withConfig({
     componentId: "sc-oudbwg-2"
-  })(["width:100%;display:flex;align-items:center;justify-content:space-between;align-items:center;cursor:pointer;span:first-of-type{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}", " [data-hide-in-trigger]{display:none;}"], ({
+  })(["width:100%;display:flex;align-items:center;justify-content:space-between;align-items:center;cursor:pointer;min-height:", ";span:first-of-type{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}", " [data-hide-in-trigger]{display:none;}"], ({
+    theme: theme2
+  }) => theme2.click.genericMenu.panel.size.height, ({
     theme: theme2,
     $error
   }) => `
@@ -44723,6 +44721,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           },
           label: {
             "default": "#b3b6bd"
+          },
+          barChart: {
+            "default": "#414141",
+            hover: "#606060"
           }
         }
       },
@@ -46534,6 +46536,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           },
           label: {
             "default": "#696e79"
+          },
+          barChart: {
+            "default": "#dfdfdf",
+            hover: "#c0c0c0"
           }
         }
       },
@@ -48797,6 +48803,9 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         shadow: {
           "default": "0 4px 6px -1px lch(6.77 0 0 / 0.15), 0 2px 4px -1px lch(6.77 0 0 / 0.15)"
         },
+        size: {
+          height: "2rem"
+        },
         color: {
           background: {
             "default": "#ffffff"
@@ -49754,6 +49763,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           },
           label: {
             "default": "#696e79"
+          },
+          barChart: {
+            "default": "#dfdfdf",
+            hover: "#c0c0c0"
           }
         }
       },

package/dist/styles/types.d.ts

@@ -1943,6 +1943,9 @@ export interface Theme {
                 "shadow": {
                     "default": string;
                 };
+                "size": {
+                    "height": string;
+                };
                 "color": {
                     "background": {
                         "default": string;
@@ -2901,6 +2904,10 @@ export interface Theme {
                     "label": {
                         "default": string;
                     };
+                    "barChart": {
+                        "default": string;
+                        "hover": string;
+                    };
                 };
             };
             "global": {

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

@@ -1505,6 +1505,10 @@ declare const _default: {
           },
           "label": {
             "default": "#b3b6bd"
+          },
+          "barChart": {
+            "default": "#414141",
+            "hover": "#606060"
           }
         }
       },

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

@@ -1943,6 +1943,9 @@ declare const _default: {
         "shadow": {
           "default": "0 4px 6px -1px lch(6.77 0 0 / 0.15), 0 2px 4px -1px lch(6.77 0 0 / 0.15)"
         },
+        "size": {
+          "height": "2rem"
+        },
         "color": {
           "background": {
             "default": "#ffffff"
@@ -2900,6 +2903,10 @@ declare const _default: {
           },
           "label": {
             "default": "#696e79"
+          },
+          "barChart": {
+            "default": "#dfdfdf",
+            "hover": "#c0c0c0"
           }
         }
       },

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

@@ -1492,6 +1492,10 @@ declare const _default: {
           },
           "label": {
             "default": "#696e79"
+          },
+          "barChart": {
+            "default": "#dfdfdf",
+            "hover": "#c0c0c0"
           }
         }
       },

package/package.json

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