@clickhouse/click-ui 0.0.216 → 0.0.219

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

@@ -10614,46 +10614,41 @@ 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"
-})(["box-sizing:border-box;display:inline-flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:", ";border:1px solid ", ";background:", ";border-radius:", ";width:", ";"], ({
+})(["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"
-}) => theme2.click.button.group.space.gap[$type], ({
+  $type
+}) => `${theme2.click.button.group.space.panel[$type].x} ${theme2.click.button.group.space.panel[$type].y}`, ({
   theme: theme2,
-  $type = "default"
-}) => theme2.click.button.group.color.panel.stroke[$type], ({
+  $type
+}) => theme2.click.button.group.space.panel[$type].gap, ({
+  theme: theme2,
+  $type
+}) => $type === "default" ? `1px solid ${theme2.click.button.group.color.panel.stroke[$type]}` : "none", ({
   theme: theme2
 }) => theme2.click.button.group.color.background.panel, ({
   theme: theme2
-}) => theme2.click.button.group.radii.all, ({
+}) => theme2.click.button.group.radii.panel.all, ({
   $fillWidth
 }) => $fillWidth ? "100%" : "auto");
-const endRadii = "var(--click-button-button-group-radii-end)";
-const leftBorderRadius = `${endRadii} 0px 0px ${endRadii}`;
-const rightBorderRadius = `0px ${endRadii} ${endRadii} 0px`;
-const centerBorderRadius = "var(--click-button-button-group-radii-center)";
 const Button$1 = pt.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:", ";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:", ";"], ({
+})(["box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;background:", ";color:", ";font:", ";padding:", ";", ";border-radius:", ";cursor:pointer;border:none;&: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:", ";}}"], ({
   $active,
   theme: theme2
 }) => $active ? theme2.click.button.group.color.background.active : theme2.click.button.group.color.background.default, ({
@@ -10661,14 +10656,14 @@ const Button$1 = pt.button.attrs((props) => ({
 }) => theme2.click.button.group.color.text.default, ({
   theme: theme2
 }) => theme2.click.button.group.typography.label.default, ({
-  theme: theme2
-}) => theme2.click.button.basic.space.y, ({
-  theme: theme2
-}) => theme2.click.button.basic.space.x, ({
-  theme: theme2
-}) => theme2.click.button.basic.space.group, ({
-  $fillWidth = false
+  theme: theme2,
+  $type
+}) => `${theme2.click.button.group.space.button[$type].y} ${theme2.click.button.group.space.button[$type].x}`, ({
+  $fillWidth
 }) => $fillWidth ? "flex: 1;" : "", ({
+  theme: theme2,
+  $type
+}) => theme2.click.button.group.radii.button[$type].all, ({
   theme: theme2
 }) => theme2.click.button.group.color.background.hover, ({
   theme: theme2
@@ -10691,11 +10686,7 @@ const Button$1 = pt.button.attrs((props) => ({
   theme: theme2
 }) => theme2.click.button.group.color.text.active, ({
   theme: theme2
-}) => theme2.click.button.group.color.background["disabled-active"], ({
-  theme: theme2,
-  $type,
-  $position
-}) => $type === "borderless" ? theme2.click.button.group.radii.all : $position === "left" ? leftBorderRadius : $position === "right" ? rightBorderRadius : centerBorderRadius);
+}) => theme2.click.button.group.color.background["disabled-active"]);
 const Button = ({
   type = "primary",
   iconLeft,
@@ -35690,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
 }) => `
@@ -44795,7 +44788,7 @@ const click$2 = {
         background: {
           "default": "rgba(0,0,0,0)",
           hover: "#282828",
-          active: "rgb(17.8% 17.8% 17.8%)",
+          active: "#414141",
           disabled: "rgba(0,0,0,0)",
           "disabled-active": "lch(0 0 0 / 0)",
           panel: "rgba(0,0,0,0)"
@@ -46619,9 +46612,9 @@ const click$1 = {
         background: {
           "default": "rgba(0,0,0,0)",
           hover: "#f6f7fa",
-          active: "lch(97.3 1.53 272)",
+          active: "lch(95.3 1.54 272)",
           disabled: "rgba(0,0,0,0)",
-          "disabled-active": "lch(77.8 1.22 272)",
+          "disabled-active": "lch(76.2 1.23 272)",
           panel: "rgba(0,0,0,0)"
         },
         text: {
@@ -48723,8 +48716,17 @@ const click = {
     },
     group: {
       radii: {
-        all: "0.25rem",
-        end: "0"
+        button: {
+          "default": {
+            all: "2px"
+          },
+          borderless: {
+            all: "0.25rem"
+          }
+        },
+        panel: {
+          all: "0.25rem"
+        }
       },
       typography: {
         label: {
@@ -48742,18 +48744,36 @@ const click = {
         }
       },
       space: {
-        gap: {
-          "default": "0",
-          borderless: "0.25rem"
+        panel: {
+          "default": {
+            x: "3px",
+            y: "3px",
+            gap: "3px"
+          },
+          borderless: {
+            x: "0",
+            y: "0",
+            gap: "0.25rem"
+          }
+        },
+        button: {
+          "default": {
+            y: "1.5px",
+            x: "0.75rem"
+          },
+          borderless: {
+            y: "5.5px",
+            x: "1rem"
+          }
         }
       },
       color: {
         background: {
           "default": "rgba(0,0,0,0)",
           hover: "#f6f7fa",
-          active: "lch(97.3 1.53 272)",
+          active: "lch(95.3 1.54 272)",
           disabled: "rgba(0,0,0,0)",
-          "disabled-active": "lch(77.8 1.22 272)",
+          "disabled-active": "lch(76.2 1.23 272)",
           panel: "rgba(0,0,0,0)"
         },
         text: {
@@ -49928,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,46 +10630,41 @@ 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"
-  })(["box-sizing:border-box;display:inline-flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:", ";border:1px solid ", ";background:", ";border-radius:", ";width:", ";"], ({
+  })(["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"
-  }) => theme2.click.button.group.space.gap[$type], ({
+    $type
+  }) => `${theme2.click.button.group.space.panel[$type].x} ${theme2.click.button.group.space.panel[$type].y}`, ({
     theme: theme2,
-    $type = "default"
-  }) => theme2.click.button.group.color.panel.stroke[$type], ({
+    $type
+  }) => theme2.click.button.group.space.panel[$type].gap, ({
+    theme: theme2,
+    $type
+  }) => $type === "default" ? `1px solid ${theme2.click.button.group.color.panel.stroke[$type]}` : "none", ({
     theme: theme2
   }) => theme2.click.button.group.color.background.panel, ({
     theme: theme2
-  }) => theme2.click.button.group.radii.all, ({
+  }) => theme2.click.button.group.radii.panel.all, ({
     $fillWidth
   }) => $fillWidth ? "100%" : "auto");
-  const endRadii = "var(--click-button-button-group-radii-end)";
-  const leftBorderRadius = `${endRadii} 0px 0px ${endRadii}`;
-  const rightBorderRadius = `0px ${endRadii} ${endRadii} 0px`;
-  const centerBorderRadius = "var(--click-button-button-group-radii-center)";
   const Button$1 = pt.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:", ";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:", ";"], ({
+  })(["box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;background:", ";color:", ";font:", ";padding:", ";", ";border-radius:", ";cursor:pointer;border:none;&: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:", ";}}"], ({
     $active,
     theme: theme2
   }) => $active ? theme2.click.button.group.color.background.active : theme2.click.button.group.color.background.default, ({
@@ -10677,14 +10672,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }) => theme2.click.button.group.color.text.default, ({
     theme: theme2
   }) => theme2.click.button.group.typography.label.default, ({
-    theme: theme2
-  }) => theme2.click.button.basic.space.y, ({
-    theme: theme2
-  }) => theme2.click.button.basic.space.x, ({
-    theme: theme2
-  }) => theme2.click.button.basic.space.group, ({
-    $fillWidth = false
+    theme: theme2,
+    $type
+  }) => `${theme2.click.button.group.space.button[$type].y} ${theme2.click.button.group.space.button[$type].x}`, ({
+    $fillWidth
   }) => $fillWidth ? "flex: 1;" : "", ({
+    theme: theme2,
+    $type
+  }) => theme2.click.button.group.radii.button[$type].all, ({
     theme: theme2
   }) => theme2.click.button.group.color.background.hover, ({
     theme: theme2
@@ -10707,11 +10702,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     theme: theme2
   }) => theme2.click.button.group.color.text.active, ({
     theme: theme2
-  }) => theme2.click.button.group.color.background["disabled-active"], ({
-    theme: theme2,
-    $type,
-    $position
-  }) => $type === "borderless" ? theme2.click.button.group.radii.all : $position === "left" ? leftBorderRadius : $position === "right" ? rightBorderRadius : centerBorderRadius);
+  }) => theme2.click.button.group.color.background["disabled-active"]);
   const Button = ({
     type = "primary",
     iconLeft,
@@ -35706,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
   }) => `
@@ -44811,7 +44804,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           background: {
             "default": "rgba(0,0,0,0)",
             hover: "#282828",
-            active: "rgb(17.8% 17.8% 17.8%)",
+            active: "#414141",
             disabled: "rgba(0,0,0,0)",
             "disabled-active": "lch(0 0 0 / 0)",
             panel: "rgba(0,0,0,0)"
@@ -46635,9 +46628,9 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           background: {
             "default": "rgba(0,0,0,0)",
             hover: "#f6f7fa",
-            active: "lch(97.3 1.53 272)",
+            active: "lch(95.3 1.54 272)",
             disabled: "rgba(0,0,0,0)",
-            "disabled-active": "lch(77.8 1.22 272)",
+            "disabled-active": "lch(76.2 1.23 272)",
             panel: "rgba(0,0,0,0)"
           },
           text: {
@@ -48739,8 +48732,17 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       },
       group: {
         radii: {
-          all: "0.25rem",
-          end: "0"
+          button: {
+            "default": {
+              all: "2px"
+            },
+            borderless: {
+              all: "0.25rem"
+            }
+          },
+          panel: {
+            all: "0.25rem"
+          }
         },
         typography: {
           label: {
@@ -48758,18 +48760,36 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           }
         },
         space: {
-          gap: {
-            "default": "0",
-            borderless: "0.25rem"
+          panel: {
+            "default": {
+              x: "3px",
+              y: "3px",
+              gap: "3px"
+            },
+            borderless: {
+              x: "0",
+              y: "0",
+              gap: "0.25rem"
+            }
+          },
+          button: {
+            "default": {
+              y: "1.5px",
+              x: "0.75rem"
+            },
+            borderless: {
+              y: "5.5px",
+              x: "1rem"
+            }
           }
         },
         color: {
           background: {
             "default": "rgba(0,0,0,0)",
             hover: "#f6f7fa",
-            active: "lch(97.3 1.53 272)",
+            active: "lch(95.3 1.54 272)",
             disabled: "rgba(0,0,0,0)",
-            "disabled-active": "lch(77.8 1.22 272)",
+            "disabled-active": "lch(76.2 1.23 272)",
             panel: "rgba(0,0,0,0)"
           },
           text: {
@@ -49944,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,46 +9418,41 @@ 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"
-})(["box-sizing:border-box;display:inline-flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:", ";border:1px solid ", ";background:", ";border-radius:", ";width:", ";"], ({
+})(["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"
-}) => theme2.click.button.group.space.gap[$type], ({
+  $type
+}) => `${theme2.click.button.group.space.panel[$type].x} ${theme2.click.button.group.space.panel[$type].y}`, ({
   theme: theme2,
-  $type = "default"
-}) => theme2.click.button.group.color.panel.stroke[$type], ({
+  $type
+}) => theme2.click.button.group.space.panel[$type].gap, ({
+  theme: theme2,
+  $type
+}) => $type === "default" ? `1px solid ${theme2.click.button.group.color.panel.stroke[$type]}` : "none", ({
   theme: theme2
 }) => theme2.click.button.group.color.background.panel, ({
   theme: theme2
-}) => theme2.click.button.group.radii.all, ({
+}) => theme2.click.button.group.radii.panel.all, ({
   $fillWidth
 }) => $fillWidth ? "100%" : "auto");
-const endRadii = "var(--click-button-button-group-radii-end)";
-const leftBorderRadius = `${endRadii} 0px 0px ${endRadii}`;
-const rightBorderRadius = `0px ${endRadii} ${endRadii} 0px`;
-const centerBorderRadius = "var(--click-button-button-group-radii-center)";
 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:", ";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:", ";"], ({
+})(["box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;background:", ";color:", ";font:", ";padding:", ";", ";border-radius:", ";cursor:pointer;border:none;&: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:", ";}}"], ({
   $active,
   theme: theme2
 }) => $active ? theme2.click.button.group.color.background.active : theme2.click.button.group.color.background.default, ({
@@ -9465,14 +9460,14 @@ const Button$1 = styled.button.attrs((props) => ({
 }) => theme2.click.button.group.color.text.default, ({
   theme: theme2
 }) => theme2.click.button.group.typography.label.default, ({
-  theme: theme2
-}) => theme2.click.button.basic.space.y, ({
-  theme: theme2
-}) => theme2.click.button.basic.space.x, ({
-  theme: theme2
-}) => theme2.click.button.basic.space.group, ({
-  $fillWidth = false
+  theme: theme2,
+  $type
+}) => `${theme2.click.button.group.space.button[$type].y} ${theme2.click.button.group.space.button[$type].x}`, ({
+  $fillWidth
 }) => $fillWidth ? "flex: 1;" : "", ({
+  theme: theme2,
+  $type
+}) => theme2.click.button.group.radii.button[$type].all, ({
   theme: theme2
 }) => theme2.click.button.group.color.background.hover, ({
   theme: theme2
@@ -9495,11 +9490,7 @@ const Button$1 = styled.button.attrs((props) => ({
   theme: theme2
 }) => theme2.click.button.group.color.text.active, ({
   theme: theme2
-}) => theme2.click.button.group.color.background["disabled-active"], ({
-  theme: theme2,
-  $type,
-  $position
-}) => $type === "borderless" ? theme2.click.button.group.radii.all : $position === "left" ? leftBorderRadius : $position === "right" ? rightBorderRadius : centerBorderRadius);
+}) => theme2.click.button.group.color.background["disabled-active"]);
 const Button = ({
   type = "primary",
   iconLeft,
@@ -34522,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
 }) => `
@@ -43627,7 +43620,7 @@ const click$2 = {
         background: {
           "default": "rgba(0,0,0,0)",
           hover: "#282828",
-          active: "rgb(17.8% 17.8% 17.8%)",
+          active: "#414141",
           disabled: "rgba(0,0,0,0)",
           "disabled-active": "lch(0 0 0 / 0)",
           panel: "rgba(0,0,0,0)"
@@ -45451,9 +45444,9 @@ const click$1 = {
         background: {
           "default": "rgba(0,0,0,0)",
           hover: "#f6f7fa",
-          active: "lch(97.3 1.53 272)",
+          active: "lch(95.3 1.54 272)",
           disabled: "rgba(0,0,0,0)",
-          "disabled-active": "lch(77.8 1.22 272)",
+          "disabled-active": "lch(76.2 1.23 272)",
           panel: "rgba(0,0,0,0)"
         },
         text: {
@@ -47555,8 +47548,17 @@ const click = {
     },
     group: {
       radii: {
-        all: "0.25rem",
-        end: "0"
+        button: {
+          "default": {
+            all: "2px"
+          },
+          borderless: {
+            all: "0.25rem"
+          }
+        },
+        panel: {
+          all: "0.25rem"
+        }
       },
       typography: {
         label: {
@@ -47574,18 +47576,36 @@ const click = {
         }
       },
       space: {
-        gap: {
-          "default": "0",
-          borderless: "0.25rem"
+        panel: {
+          "default": {
+            x: "3px",
+            y: "3px",
+            gap: "3px"
+          },
+          borderless: {
+            x: "0",
+            y: "0",
+            gap: "0.25rem"
+          }
+        },
+        button: {
+          "default": {
+            y: "1.5px",
+            x: "0.75rem"
+          },
+          borderless: {
+            y: "5.5px",
+            x: "1rem"
+          }
         }
       },
       color: {
         background: {
           "default": "rgba(0,0,0,0)",
           hover: "#f6f7fa",
-          active: "lch(97.3 1.53 272)",
+          active: "lch(95.3 1.54 272)",
           disabled: "rgba(0,0,0,0)",
-          "disabled-active": "lch(77.8 1.22 272)",
+          "disabled-active": "lch(76.2 1.23 272)",
           panel: "rgba(0,0,0,0)"
         },
         text: {
@@ -48760,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,46 +9433,41 @@ 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"
-  })(["box-sizing:border-box;display:inline-flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:", ";border:1px solid ", ";background:", ";border-radius:", ";width:", ";"], ({
+  })(["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"
-  }) => theme2.click.button.group.space.gap[$type], ({
+    $type
+  }) => `${theme2.click.button.group.space.panel[$type].x} ${theme2.click.button.group.space.panel[$type].y}`, ({
     theme: theme2,
-    $type = "default"
-  }) => theme2.click.button.group.color.panel.stroke[$type], ({
+    $type
+  }) => theme2.click.button.group.space.panel[$type].gap, ({
+    theme: theme2,
+    $type
+  }) => $type === "default" ? `1px solid ${theme2.click.button.group.color.panel.stroke[$type]}` : "none", ({
     theme: theme2
   }) => theme2.click.button.group.color.background.panel, ({
     theme: theme2
-  }) => theme2.click.button.group.radii.all, ({
+  }) => theme2.click.button.group.radii.panel.all, ({
     $fillWidth
   }) => $fillWidth ? "100%" : "auto");
-  const endRadii = "var(--click-button-button-group-radii-end)";
-  const leftBorderRadius = `${endRadii} 0px 0px ${endRadii}`;
-  const rightBorderRadius = `0px ${endRadii} ${endRadii} 0px`;
-  const centerBorderRadius = "var(--click-button-button-group-radii-center)";
   const Button$1 = styled.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:", ";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:", ";"], ({
+  })(["box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;background:", ";color:", ";font:", ";padding:", ";", ";border-radius:", ";cursor:pointer;border:none;&: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:", ";}}"], ({
     $active,
     theme: theme2
   }) => $active ? theme2.click.button.group.color.background.active : theme2.click.button.group.color.background.default, ({
@@ -9480,14 +9475,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }) => theme2.click.button.group.color.text.default, ({
     theme: theme2
   }) => theme2.click.button.group.typography.label.default, ({
-    theme: theme2
-  }) => theme2.click.button.basic.space.y, ({
-    theme: theme2
-  }) => theme2.click.button.basic.space.x, ({
-    theme: theme2
-  }) => theme2.click.button.basic.space.group, ({
-    $fillWidth = false
+    theme: theme2,
+    $type
+  }) => `${theme2.click.button.group.space.button[$type].y} ${theme2.click.button.group.space.button[$type].x}`, ({
+    $fillWidth
   }) => $fillWidth ? "flex: 1;" : "", ({
+    theme: theme2,
+    $type
+  }) => theme2.click.button.group.radii.button[$type].all, ({
     theme: theme2
   }) => theme2.click.button.group.color.background.hover, ({
     theme: theme2
@@ -9510,11 +9505,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     theme: theme2
   }) => theme2.click.button.group.color.text.active, ({
     theme: theme2
-  }) => theme2.click.button.group.color.background["disabled-active"], ({
-    theme: theme2,
-    $type,
-    $position
-  }) => $type === "borderless" ? theme2.click.button.group.radii.all : $position === "left" ? leftBorderRadius : $position === "right" ? rightBorderRadius : centerBorderRadius);
+  }) => theme2.click.button.group.color.background["disabled-active"]);
   const Button = ({
     type = "primary",
     iconLeft,
@@ -34537,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
   }) => `
@@ -43642,7 +43635,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           background: {
             "default": "rgba(0,0,0,0)",
             hover: "#282828",
-            active: "rgb(17.8% 17.8% 17.8%)",
+            active: "#414141",
             disabled: "rgba(0,0,0,0)",
             "disabled-active": "lch(0 0 0 / 0)",
             panel: "rgba(0,0,0,0)"
@@ -45466,9 +45459,9 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           background: {
             "default": "rgba(0,0,0,0)",
             hover: "#f6f7fa",
-            active: "lch(97.3 1.53 272)",
+            active: "lch(95.3 1.54 272)",
             disabled: "rgba(0,0,0,0)",
-            "disabled-active": "lch(77.8 1.22 272)",
+            "disabled-active": "lch(76.2 1.23 272)",
             panel: "rgba(0,0,0,0)"
           },
           text: {
@@ -47570,8 +47563,17 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       },
       group: {
         radii: {
-          all: "0.25rem",
-          end: "0"
+          button: {
+            "default": {
+              all: "2px"
+            },
+            borderless: {
+              all: "0.25rem"
+            }
+          },
+          panel: {
+            all: "0.25rem"
+          }
         },
         typography: {
           label: {
@@ -47589,18 +47591,36 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           }
         },
         space: {
-          gap: {
-            "default": "0",
-            borderless: "0.25rem"
+          panel: {
+            "default": {
+              x: "3px",
+              y: "3px",
+              gap: "3px"
+            },
+            borderless: {
+              x: "0",
+              y: "0",
+              gap: "0.25rem"
+            }
+          },
+          button: {
+            "default": {
+              y: "1.5px",
+              x: "0.75rem"
+            },
+            borderless: {
+              y: "5.5px",
+              x: "1rem"
+            }
           }
         },
         color: {
           background: {
             "default": "rgba(0,0,0,0)",
             hover: "#f6f7fa",
-            active: "lch(97.3 1.53 272)",
+            active: "lch(95.3 1.54 272)",
             disabled: "rgba(0,0,0,0)",
-            "disabled-active": "lch(77.8 1.22 272)",
+            "disabled-active": "lch(76.2 1.23 272)",
             panel: "rgba(0,0,0,0)"
           },
           text: {
@@ -48775,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

@@ -711,8 +711,17 @@ export interface Theme {
             };
             "group": {
                 "radii": {
-                    "all": string;
-                    "end": string;
+                    "button": {
+                        "default": {
+                            "all": string;
+                        };
+                        "borderless": {
+                            "all": string;
+                        };
+                    };
+                    "panel": {
+                        "all": string;
+                    };
                 };
                 "typography": {
                     "label": {
@@ -730,9 +739,27 @@ export interface Theme {
                     };
                 };
                 "space": {
-                    "gap": {
-                        "default": string;
-                        "borderless": string;
+                    "panel": {
+                        "default": {
+                            "x": string;
+                            "y": string;
+                            "gap": string;
+                        };
+                        "borderless": {
+                            "x": string;
+                            "y": string;
+                            "gap": string;
+                        };
+                    };
+                    "button": {
+                        "default": {
+                            "y": string;
+                            "x": string;
+                        };
+                        "borderless": {
+                            "y": string;
+                            "x": string;
+                        };
                     };
                 };
                 "color": {
@@ -1916,6 +1943,9 @@ export interface Theme {
                 "shadow": {
                     "default": string;
                 };
+                "size": {
+                    "height": string;
+                };
                 "color": {
                     "background": {
                         "default": string;

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

@@ -419,7 +419,7 @@ declare const _default: {
           "background": {
             "default": "rgba(0,0,0,0)",
             "hover": "#282828",
-            "active": "rgb(17.8% 17.8% 17.8%)",
+            "active": "#414141",
             "disabled": "rgba(0,0,0,0)",
             "disabled-active": "lch(0 0 0 / 0)",
             "panel": "rgba(0,0,0,0)"

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

@@ -711,8 +711,17 @@ declare const _default: {
       },
       "group": {
         "radii": {
-          "all": "0.25rem",
-          "end": "0"
+          "button": {
+            "default": {
+              "all": "2px"
+            },
+            "borderless": {
+              "all": "0.25rem"
+            }
+          },
+          "panel": {
+            "all": "0.25rem"
+          }
         },
         "typography": {
           "label": {
@@ -730,18 +739,36 @@ declare const _default: {
           }
         },
         "space": {
-          "gap": {
-            "default": "0",
-            "borderless": "0.25rem"
+          "panel": {
+            "default": {
+              "x": "3px",
+              "y": "3px",
+              "gap": "3px"
+            },
+            "borderless": {
+              "x": "0",
+              "y": "0",
+              "gap": "0.25rem"
+            }
+          },
+          "button": {
+            "default": {
+              "y": "1.5px",
+              "x": "0.75rem"
+            },
+            "borderless": {
+              "y": "5.5px",
+              "x": "1rem"
+            }
           }
         },
         "color": {
           "background": {
             "default": "rgba(0,0,0,0)",
             "hover": "#f6f7fa",
-            "active": "lch(97.3 1.53 272)",
+            "active": "lch(95.3 1.54 272)",
             "disabled": "rgba(0,0,0,0)",
-            "disabled-active": "lch(77.8 1.22 272)",
+            "disabled-active": "lch(76.2 1.23 272)",
             "panel": "rgba(0,0,0,0)"
           },
           "text": {
@@ -1916,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/dist/styles/variables.light.json.d.ts

@@ -419,9 +419,9 @@ declare const _default: {
           "background": {
             "default": "rgba(0,0,0,0)",
             "hover": "#f6f7fa",
-            "active": "lch(97.3 1.53 272)",
+            "active": "lch(95.3 1.54 272)",
             "disabled": "rgba(0,0,0,0)",
-            "disabled-active": "lch(77.8 1.22 272)",
+            "disabled-active": "lch(76.2 1.23 272)",
             "panel": "rgba(0,0,0,0)"
           },
           "text": {

package/package.json

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