@clickhouse/click-ui 0.0.217 → 0.0.219

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
 }) => `
@@ -49950,6 +49948,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"

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
   }) => `
@@ -49966,6 +49964,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"

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
 }) => `
@@ -48782,6 +48780,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"

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
   }) => `
@@ -48797,6 +48795,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"

package/dist/styles/types.d.ts

@@ -1943,6 +1943,9 @@ export interface Theme {
                 "shadow": {
                     "default": string;
                 };
+                "size": {
+                    "height": string;
+                };
                 "color": {
                     "background": {
                         "default": string;

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"

package/package.json

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