@synerise/ds-button-group 1.1.51 → 1.1.53

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.53](https://github.com/Synerise/synerise-design/compare/@synerise/ds-button-group@1.1.52...@synerise/ds-button-group@1.1.53) (2026-05-13)
+
+**Note:** Version bump only for package @synerise/ds-button-group
+
+## [1.1.52](https://github.com/Synerise/synerise-design/compare/@synerise/ds-button-group@1.1.51...@synerise/ds-button-group@1.1.52) (2026-05-11)
+
+**Note:** Version bump only for package @synerise/ds-button-group
+
 ## [1.1.51](https://github.com/Synerise/synerise-design/compare/@synerise/ds-button-group@1.1.50...@synerise/ds-button-group@1.1.51) (2026-05-04)
 
 ### Bug Fixes

package/dist/ButtonGroup.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { ButtonGroupProps } from './ButtonGroup.types';
-declare const ButtonGroup: ({ className, children, title, description, size, fullWidth, buttonsPosition, disabled, splitMode, compact, error, }: ButtonGroupProps) => React.JSX.Element;
+declare const ButtonGroup: ({ className, style, children, title, description, size, fullWidth, buttonsPosition, disabled, splitMode, compact, error, }: ButtonGroupProps) => React.JSX.Element;
 export default ButtonGroup;

package/dist/ButtonGroup.js

@@ -1,8 +1,13 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Button } from "antd";
+import React from "react";
 import { Container, Title, Description } from "./ButtonGroup.styles.js";
+const sizeClassMap = {
+  large: "lg",
+  small: "sm"
+};
 const ButtonGroup = ({
   className,
+  style,
   children,
   title,
   description,
@@ -13,11 +18,18 @@ const ButtonGroup = ({
   splitMode,
   compact = true,
   error
-}) => /* @__PURE__ */ jsxs(Container, { className: `ds-button-group ${className || ""}`, fullWidth, buttonsPosition, disabled, splitMode, compact, error, children: [
-  title && /* @__PURE__ */ jsx(Title, { children: title }),
-  /* @__PURE__ */ jsx(Button.Group, { size, children }),
-  description && /* @__PURE__ */ jsx(Description, { children: description })
-] });
+}) => {
+  const sizeCls = size ? sizeClassMap[size] || "" : "";
+  const groupClass = ["ant-btn-group", sizeCls && `ant-btn-group-${sizeCls}`].filter(Boolean).join(" ");
+  const sizedChildren = size ? React.Children.map(children, (child) => React.isValidElement(child) ? React.cloneElement(child, {
+    size
+  }) : child) : children;
+  return /* @__PURE__ */ jsxs(Container, { className: `ds-button-group ${className || ""}`, style, fullWidth, buttonsPosition, disabled, splitMode, compact, error, children: [
+    title && /* @__PURE__ */ jsx(Title, { children: title }),
+    /* @__PURE__ */ jsx("div", { className: groupClass, children: sizedChildren }),
+    description && /* @__PURE__ */ jsx(Description, { children: description })
+  ] });
+};
 export {
   ButtonGroup as default
 };

package/dist/ButtonGroup.styles.js

@@ -20,7 +20,7 @@ const focusAnimation = ({
 const Container = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ButtonGroupstyles__Container",
   componentId: "sc-1jzk068-0"
-})(["", ";.ant-btn-group{width:100%;display:flex;gap:", ";flex-direction:row;align-items:stretch;justify-content:", ";", ";", ";& > .ant-btn{width:auto;flex:", ";border-radius:", ";&.ant-btn-primary{&:focus{z-index:99999;}}}}"], (props) => props.fullWidth ? "width: 100%;" : "", (props) => props.compact ? "0px" : "8px", (props) => getButtonsPosition(props.buttonsPosition), (props) => !!props.splitMode && !props.error && css(["*:not(:first-child).ds-button.single-icon,.ds-button.single-icon.ant-btn-custom-color,.ds-button.single-icon.ant-btn-tertiary-white{border-left:1px solid rgba(255,255,255,0.15);&:disabled.ds-button.single-icon{&.ant-btn-tertiary-white{border-left:1px solid rgba(255,255,255,0.2) !important;}&.ant-btn-tertiary{border-left:1px solid rgba(106,117,128,0.1) !important;}&.ant-btn-custom-color{border-left:1px solid rgba(255,255,255,0.8) !important;}&.ant-btn-primary{border-left:1px solid rgba(255,255,255,0.5) !important;}}}*:not(:first-child).ds-button.single-icon.ant-btn-ghost-primary,.ds-button.single-icon.ant-btn-ghost,.ds-button.single-icon.ant-btn-ghost-white,.ds-button.single-icon.ant-btn-secondary{border-left:0px;padding-left:1px;}*:not(:first-child).ds-button.single-icon.ant-btn-tertiary{border-left:1px solid rgba(106,117,128,0.2);}.ds-button.label.ant-btn-tertiary[disabled]{color:", " !important;}&:hover:not(:disabled){*:not(:first-child).ds-button.single-icon{&.ant-btn-tertiary,&.ant-btn-tertiary-white,&.ant-btn-primary,&.ant-btn-custom-color{border-left:transparent !important;}}}.ds-button:focus{&.ant-btn-primary,&.ant-btn-tertiary,&.ant-btn-tertiary-white,&.ant-btn-custom-color{border-color:transparent !important;&:active{border-color:transparent !important;}}}"], props.theme.palette["grey-500"]), (props) => !!props.splitMode && !!props.error && css(["*:not(:first-child).ds-button.single-icon,.ds-button.single-icon.ant-btn-custom-color,.ds-button.single-icon.ant-btn-tertiary-white,.ds-button.single-icon.ant-btn-ghost,.ds-button.single-icon.ant-btn-ghost-white{border-left:1px solid ", ";}.ds-button:focus{&.ant-btn-primary,&.ant-btn-tertiary,&.ant-btn-tertiary-white,&.ant-btn-custom-color,&.ant-btn-ghost-primary,&.ant-btn-ghost-white,&.ant-btn-ghost{border-left:0px;&:active{border-left:0px;}}}*:not(:first-child).ds-button.single-icon.ant-btn-ghost-primary,.ds-button.single-icon.ant-btn-ghost,.ds-button.single-icon.ant-btn-ghost-white,.ds-button.single-icon.ant-btn-secondary,.ds-button.single-icon.ant-btn-tertiary,.ds-button.single-icon.ant-btn-tertiary-white,.ds-button.single-icon.ant-btn-primary,.ds-button.single-icon.ant-btn-custom-color{border-left:0px;padding-left:1px;}.ds-button:hover:not(:focus){&.ant-btn-tertiary,&.ant-btn-ghost,&.ant-btn-tertiary-white,&.ant-btn-ghost-white{box-shadow:inset 0 0 0 1px ", ";}}"], props.theme.palette["red-600"], props.theme.palette["red-600"]), (props) => props.fullWidth ? "1" : "none", (props) => props.compact ? "0px" : "3px");
+})(["", ";.ant-btn-group{width:100%;display:flex;gap:", ";flex-direction:row;align-items:stretch;justify-content:", ";", ";", ";& > .ant-btn{width:auto;flex:", ";border-radius:", ";&.ant-btn-primary{&:focus{z-index:99999;}}}", "}"], (props) => props.fullWidth ? "width: 100%;" : "", (props) => props.compact ? "0px" : "8px", (props) => getButtonsPosition(props.buttonsPosition), (props) => !!props.splitMode && !props.error && css(["*:not(:first-child).ds-button.single-icon,.ds-button.single-icon.ant-btn-custom-color,.ds-button.single-icon.ant-btn-tertiary-white{border-left:1px solid rgba(255,255,255,0.15);&:disabled.ds-button.single-icon{&.ant-btn-tertiary-white{border-left:1px solid rgba(255,255,255,0.2) !important;}&.ant-btn-tertiary{border-left:1px solid rgba(106,117,128,0.1) !important;}&.ant-btn-custom-color{border-left:1px solid rgba(255,255,255,0.8) !important;}&.ant-btn-primary{border-left:1px solid rgba(255,255,255,0.5) !important;}}}*:not(:first-child).ds-button.single-icon.ant-btn-ghost-primary,.ds-button.single-icon.ant-btn-ghost,.ds-button.single-icon.ant-btn-ghost-white,.ds-button.single-icon.ant-btn-secondary{border-left:0px;padding-left:1px;}*:not(:first-child).ds-button.single-icon.ant-btn-tertiary{border-left:1px solid rgba(106,117,128,0.2);}.ds-button.label.ant-btn-tertiary[disabled]{color:", " !important;}&:hover:not(:disabled){*:not(:first-child).ds-button.single-icon{&.ant-btn-tertiary,&.ant-btn-tertiary-white,&.ant-btn-primary,&.ant-btn-custom-color{border-left:transparent !important;}}}.ds-button:focus{&.ant-btn-primary,&.ant-btn-tertiary,&.ant-btn-tertiary-white,&.ant-btn-custom-color{border-color:transparent !important;&:active{border-color:transparent !important;}}}"], props.theme.palette["grey-500"]), (props) => !!props.splitMode && !!props.error && css(["*:not(:first-child).ds-button.single-icon,.ds-button.single-icon.ant-btn-custom-color,.ds-button.single-icon.ant-btn-tertiary-white,.ds-button.single-icon.ant-btn-ghost,.ds-button.single-icon.ant-btn-ghost-white{border-left:1px solid ", ";}.ds-button:focus{&.ant-btn-primary,&.ant-btn-tertiary,&.ant-btn-tertiary-white,&.ant-btn-custom-color,&.ant-btn-ghost-primary,&.ant-btn-ghost-white,&.ant-btn-ghost{border-left:0px;&:active{border-left:0px;}}}*:not(:first-child).ds-button.single-icon.ant-btn-ghost-primary,.ds-button.single-icon.ant-btn-ghost,.ds-button.single-icon.ant-btn-ghost-white,.ds-button.single-icon.ant-btn-secondary,.ds-button.single-icon.ant-btn-tertiary,.ds-button.single-icon.ant-btn-tertiary-white,.ds-button.single-icon.ant-btn-primary,.ds-button.single-icon.ant-btn-custom-color{border-left:0px;padding-left:1px;}.ds-button:hover:not(:focus){&.ant-btn-tertiary,&.ant-btn-ghost,&.ant-btn-tertiary-white,&.ant-btn-ghost-white{box-shadow:inset 0 0 0 1px ", ";}}"], props.theme.palette["red-600"], props.theme.palette["red-600"]), (props) => props.fullWidth ? "1" : "none", (props) => props.compact ? "0px" : "3px", (props) => props.compact && css(["& > .ant-btn + .ant-btn{margin-left:-1px;}& > button.ant-btn:first-of-type{border-radius:3px 0 0 3px;}& > button.ant-btn:last-of-type{border-radius:0 3px 3px 0;}& > button.ant-btn:first-of-type:last-of-type{border-radius:3px;}"]));
 const Title = /* @__PURE__ */ styled.h4.withConfig({
   displayName: "ButtonGroupstyles__Title",
   componentId: "sc-1jzk068-1"

package/dist/ButtonGroup.types.d.ts

@@ -1,14 +1,32 @@
-import { ButtonGroupProps as AntButtonGroupProps } from 'antd/lib/button/button-group';
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { LiteralStringUnion } from '@synerise/ds-utils';
-export type ButtonGroupProps = AntButtonGroupProps & {
+export type ButtonGroupProps = {
+    /** Size class applied to the group container */
+    size?: 'small' | 'middle' | 'large';
+    /** Additional CSS class name */
+    className?: string;
+    /** overwrite with inline styles */
+    style?: CSSProperties;
+    /** Button elements to render inside the group */
     children?: ReactNode;
+    /** Heading displayed above the button row */
     title?: string;
+    /** Helper text displayed below the button row */
     description?: string;
+    /** Stretches the container and buttons to full width */
     fullWidth?: boolean;
+    /** Horizontal alignment of the button row
+     * @default center
+     */
     buttonsPosition?: LiteralStringUnion<'left' | 'center' | 'right'>;
+    /** CSS-only disabled state — suppresses hover effects in splitMode. Disable buttons individually for true disabled behavior. */
     disabled?: boolean;
+    /** Adds 1px borders between adjacent single-icon buttons */
     splitMode?: boolean;
+    /** In splitMode, switches borders to red error color */
     error?: boolean;
+    /** Zero gap with shared corners (true) or 8px gap with individual rounded corners (false)
+     * @default true
+     */
     compact?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-button-group",
-  "version": "1.1.51",
+  "version": "1.1.53",
   "description": "Button-Group UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,22 +35,18 @@
     "check:circular-dependencies": "madge --circular --extensions ts,tsx,js,jsx --ts-config tsconfig.json src/ --exclude '/dist/'",
     "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
   },
-  "sideEffects": [
-    "dist/style/*",
-    "*.less"
-  ],
+  "sideEffects": false,
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.5.26",
-    "@synerise/ds-divider": "^1.3.10",
+    "@synerise/ds-button": "^1.5.28",
+    "@synerise/ds-divider": "^1.3.11",
     "@synerise/ds-utils": "^1.8.1"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
-    "antd": "4.24.16",
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "c5eee882509cbeb4544cb45939620881b829d4d9"
+  "gitHead": "1132c21afce924c3e3b8e75e2ebd5e7b5db69bd2"
 }