@synerise/ds-button-group 1.1.41 → 1.1.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/README.md +4 -1
  3. package/dist/ButtonDivider/ButtonDivider.d.ts +1 -1
  4. package/dist/ButtonDivider/ButtonDivider.js +7 -7
  5. package/dist/ButtonDivider/ButtonDivider.styles.d.ts +1 -1
  6. package/dist/ButtonDivider/ButtonDivider.styles.js +7 -6
  7. package/dist/ButtonGroup.d.ts +2 -2
  8. package/dist/ButtonGroup.js +22 -29
  9. package/dist/ButtonGroup.styles.d.ts +6 -6
  10. package/dist/ButtonGroup.styles.js +24 -35
  11. package/dist/ButtonGroup.types.d.ts +3 -3
  12. package/dist/ButtonGroup.types.js +1 -1
  13. package/dist/index.js +6 -2
  14. package/dist/modules.d.js +1 -1
  15. package/dist/modules.d.ts +0 -0
  16. package/package.json +9 -9
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.1.43](https://github.com/Synerise/synerise-design/compare/@synerise/ds-button-group@1.1.42...@synerise/ds-button-group@1.1.43) (2026-03-24)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-button-group
9
+
10
+ ## [1.1.42](https://github.com/Synerise/synerise-design/compare/@synerise/ds-button-group@1.1.41...@synerise/ds-button-group@1.1.42) (2026-03-20)
11
+
12
+ **Note:** Version bump only for package @synerise/ds-button-group
13
+
6
14
  ## [1.1.41](https://github.com/Synerise/synerise-design/compare/@synerise/ds-button-group@1.1.40...@synerise/ds-button-group@1.1.41) (2026-03-09)
7
15
 
8
16
  **Note:** Version bump only for package @synerise/ds-button-group
package/README.md CHANGED
@@ -54,8 +54,11 @@ import ButtonGroup from '@synerise/ds-button-group'
54
54
  | --------------- | -------------------------------------------------------- | --------------------------- | -------- |
55
55
  | title | The title of the group | string | - |
56
56
  | description | The description of the group | string | - |
57
- | size | Defines the size of the button. | `small`/ `middle` / `large` | `middle` |
57
+ | size | Defines the size of the button. | `small`/ `middle` / `large` | - |
58
58
  | buttonsPosition | Defines the horizontal position of buttons. | `left` / `center` / `right` | `center` |
59
59
  | fullWidth | Set buttons width to fill all available space | boolean | `false` |
60
60
  | children | Buttons used in the group | React.ReactNode | - |
61
61
  | splitMode | Enables split mode - adds borders to single-icon buttons | boolean | `false` |
62
+ | compact | Zero gap between buttons with square corners (true) or 8px gap with rounded corners (false) | boolean | `true` |
63
+ | error | In splitMode, switches divider borders to red and adjusts hover shadows | boolean | - |
64
+ | disabled | Passed to the container; suppresses hover effects in splitMode via CSS selectors | boolean | - |
package/dist/ButtonDivider/ButtonDivider.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import React from 'react';
1
+ import { default as React } from 'react';
2
2
  declare const ButtonDivider: () => React.JSX.Element;
3
3
  export default ButtonDivider;
package/dist/ButtonDivider/ButtonDivider.js CHANGED
@@ -1,8 +1,8 @@
1
- import React from 'react';
2
- import * as S from './ButtonDivider.styles';
3
- var ButtonDivider = function ButtonDivider() {
4
- return /*#__PURE__*/React.createElement(S.ButtonDivider, {
5
- type: "vertical"
6
- });
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { ButtonDivider as ButtonDivider$1 } from "./ButtonDivider.styles.js";
3
+ const ButtonDivider = () => {
4
+ return /* @__PURE__ */ jsx(ButtonDivider$1, { type: "vertical" });
5
+ };
6
+ export {
7
+ ButtonDivider as default
7
8
  };
8
- export default ButtonDivider;
package/dist/ButtonDivider/ButtonDivider.styles.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const ButtonDivider: import("styled-components").StyledComponent<(props: import("@synerise/ds-divider").DividerProps) => React.JSX.Element, any, {}, never>;
1
+ export declare const ButtonDivider: import('styled-components').StyledComponent<(props: import('@synerise/ds-divider').DividerProps) => React.JSX.Element, any, {}, never>;
package/dist/ButtonDivider/ButtonDivider.styles.js CHANGED
@@ -1,8 +1,9 @@
1
- import styled from 'styled-components';
2
- import Divider from '@synerise/ds-divider';
3
- export var ButtonDivider = styled(Divider).withConfig({
1
+ import styled from "styled-components";
2
+ import Divider from "@synerise/ds-divider";
3
+ const ButtonDivider = /* @__PURE__ */ styled(Divider).withConfig({
4
4
  displayName: "ButtonDividerstyles__ButtonDivider",
5
5
  componentId: "sc-1ntx1ba-0"
6
- })(["&&{border-color:", ";height:auto;margin:0px;top:0;}"], function (props) {
7
- return props.theme.palette['grey-300'];
8
- });
6
+ })(["&&{border-color:", ";height:auto;margin:0px;top:0;}"], (props) => props.theme.palette["grey-300"]);
7
+ export {
8
+ ButtonDivider
9
+ };
package/dist/ButtonGroup.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
2
- import { type ButtonGroupProps } from './ButtonGroup.types';
1
+ import { default as React } from 'react';
2
+ import { ButtonGroupProps } from './ButtonGroup.types';
3
3
  declare const ButtonGroup: ({ className, children, title, description, size, fullWidth, buttonsPosition, disabled, splitMode, compact, error, }: ButtonGroupProps) => React.JSX.Element;
4
4
  export default ButtonGroup;
package/dist/ButtonGroup.js CHANGED
@@ -1,30 +1,23 @@
1
- import Button from 'antd/lib/button';
2
- import React from 'react';
3
- import * as S from './ButtonGroup.styles';
4
- var ButtonGroup = function ButtonGroup(_ref) {
5
- var className = _ref.className,
6
- children = _ref.children,
7
- title = _ref.title,
8
- description = _ref.description,
9
- size = _ref.size,
10
- fullWidth = _ref.fullWidth,
11
- _ref$buttonsPosition = _ref.buttonsPosition,
12
- buttonsPosition = _ref$buttonsPosition === void 0 ? 'center' : _ref$buttonsPosition,
13
- disabled = _ref.disabled,
14
- splitMode = _ref.splitMode,
15
- _ref$compact = _ref.compact,
16
- compact = _ref$compact === void 0 ? true : _ref$compact,
17
- error = _ref.error;
18
- return /*#__PURE__*/React.createElement(S.Container, {
19
- className: "ds-button-group " + (className || ''),
20
- fullWidth: fullWidth,
21
- buttonsPosition: buttonsPosition,
22
- disabled: disabled,
23
- splitMode: splitMode,
24
- compact: compact,
25
- error: error
26
- }, title && /*#__PURE__*/React.createElement(S.Title, null, title), /*#__PURE__*/React.createElement(Button.Group, {
27
- size: size
28
- }, children), description && /*#__PURE__*/React.createElement(S.Description, null, description));
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
+ import Button from "antd/lib/button";
3
+ import { Container, Title, Description } from "./ButtonGroup.styles.js";
4
+ const ButtonGroup = ({
5
+ className,
6
+ children,
7
+ title,
8
+ description,
9
+ size,
10
+ fullWidth,
11
+ buttonsPosition = "center",
12
+ disabled,
13
+ splitMode,
14
+ compact = true,
15
+ error
16
+ }) => /* @__PURE__ */ jsxs(Container, { className: `ds-button-group ${className || ""}`, fullWidth, buttonsPosition, disabled, splitMode, compact, error, children: [
17
+ title && /* @__PURE__ */ jsx(Title, { children: title }),
18
+ /* @__PURE__ */ jsx(Button.Group, { size, children }),
19
+ description && /* @__PURE__ */ jsx(Description, { children: description })
20
+ ] });
21
+ export {
22
+ ButtonGroup as default
29
23
  };
30
- export default ButtonGroup;
package/dist/ButtonGroup.styles.d.ts CHANGED
@@ -1,8 +1,8 @@
1
- import { type Keyframes } from 'styled-components';
2
- import { type ThemeProps } from '@synerise/ds-core';
3
- import { type LiteralStringUnion } from '@synerise/ds-utils';
1
+ import { Keyframes } from 'styled-components';
2
+ import { ThemeProps } from '@synerise/ds-core';
3
+ import { LiteralStringUnion } from '@synerise/ds-utils';
4
4
  export declare const focusAnimation: ({ theme }: ThemeProps) => Keyframes;
5
- export declare const Container: import("styled-components").StyledComponent<"div", any, {
5
+ export declare const Container: import('styled-components').StyledComponent<"div", any, {
6
6
  options?: boolean;
7
7
  fullWidth?: boolean;
8
8
  buttonsPosition: LiteralStringUnion<"left" | "center" | "right">;
@@ -11,5 +11,5 @@ export declare const Container: import("styled-components").StyledComponent<"div
11
11
  compact?: boolean;
12
12
  error?: boolean;
13
13
  }, never>;
14
- export declare const Title: import("styled-components").StyledComponent<"h4", any, {}, never>;
15
- export declare const Description: import("styled-components").StyledComponent<"p", any, {}, never>;
14
+ export declare const Title: import('styled-components').StyledComponent<"h4", any, {}, never>;
15
+ export declare const Description: import('styled-components').StyledComponent<"p", any, {}, never>;
package/dist/ButtonGroup.styles.js CHANGED
@@ -1,48 +1,37 @@
1
- import styled, { css, keyframes } from 'styled-components';
2
- var getButtonsPosition = function getButtonsPosition(position) {
3
- var mapButtonsPosition = {
4
- left: 'flex-start',
5
- right: 'flex-end',
6
- center: 'center'
1
+ import styled, { css, keyframes } from "styled-components";
2
+ const getButtonsPosition = (position) => {
3
+ const mapButtonsPosition = {
4
+ left: "flex-start",
5
+ right: "flex-end",
6
+ center: "center"
7
7
  };
8
8
  switch (position) {
9
- case 'left':
10
- case 'right':
11
- case 'center':
9
+ case "left":
10
+ case "right":
11
+ case "center":
12
12
  return mapButtonsPosition[position];
13
13
  default:
14
- return '';
14
+ return "";
15
15
  }
16
16
  };
17
- export var focusAnimation = function focusAnimation(_ref) {
18
- var theme = _ref.theme;
19
- return keyframes(["0%{box-shadow:inset 0 0 0 1px inherit;}50%{box-shadow:inset 0 0 0 1px ", ";}100%{box-shadow:inset 0 0 0 1px inherit;}"], theme.palette['blue-600']);
20
- };
21
- export var Container = styled.div.withConfig({
17
+ const focusAnimation = ({
18
+ theme
19
+ }) => keyframes(["0%{box-shadow:inset 0 0 0 1px inherit;}50%{box-shadow:inset 0 0 0 1px ", ";}100%{box-shadow:inset 0 0 0 1px inherit;}"], theme.palette["blue-600"]);
20
+ const Container = /* @__PURE__ */ styled.div.withConfig({
22
21
  displayName: "ButtonGroupstyles__Container",
23
22
  componentId: "sc-1jzk068-0"
24
- })(["", ";.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;}}}}"], function (props) {
25
- return props.fullWidth ? 'width: 100%;' : '';
26
- }, function (props) {
27
- return props.compact ? '0px' : '8px';
28
- }, function (props) {
29
- return getButtonsPosition(props.buttonsPosition);
30
- }, function (props) {
31
- return !!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']);
32
- }, function (props) {
33
- return !!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']);
34
- }, function (props) {
35
- return props.fullWidth ? '1' : 'none';
36
- }, function (props) {
37
- return props.compact ? '0px' : '3px';
38
- });
39
- export var Title = styled.h4.withConfig({
23
+ })(["", ";.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");
24
+ const Title = /* @__PURE__ */ styled.h4.withConfig({
40
25
  displayName: "ButtonGroupstyles__Title",
41
26
  componentId: "sc-1jzk068-1"
42
27
  })(["margin:0 0 8px;"]);
43
- export var Description = styled.p.withConfig({
28
+ const Description = /* @__PURE__ */ styled.p.withConfig({
44
29
  displayName: "ButtonGroupstyles__Description",
45
30
  componentId: "sc-1jzk068-2"
46
- })(["margin:8px 0 0;color:", ";"], function (props) {
47
- return props.theme.palette['grey-500'];
48
- });
31
+ })(["margin:8px 0 0;color:", ";"], (props) => props.theme.palette["grey-500"]);
32
+ export {
33
+ Container,
34
+ Description,
35
+ Title,
36
+ focusAnimation
37
+ };
package/dist/ButtonGroup.types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- import { type ButtonGroupProps as AntButtonGroupProps } from 'antd/lib/button/button-group';
2
- import { type ReactNode } from 'react';
3
- import { type LiteralStringUnion } from '@synerise/ds-utils';
1
+ import { ButtonGroupProps as AntButtonGroupProps } from 'antd/lib/button/button-group';
2
+ import { ReactNode } from 'react';
3
+ import { LiteralStringUnion } from '@synerise/ds-utils';
4
4
  export type ButtonGroupProps = AntButtonGroupProps & {
5
5
  children?: ReactNode;
6
6
  title?: string;
package/dist/ButtonGroup.types.js CHANGED
@@ -1 +1 @@
1
- export {};
1
+
package/dist/index.js CHANGED
@@ -1,2 +1,6 @@
1
- export { default } from './ButtonGroup';
2
- export { default as ButtonDivider } from './ButtonDivider/ButtonDivider';
1
+ import { default as default2 } from "./ButtonGroup.js";
2
+ import { default as default3 } from "./ButtonDivider/ButtonDivider.js";
3
+ export {
4
+ default3 as ButtonDivider,
5
+ default2 as default
6
+ };
package/dist/modules.d.js CHANGED
@@ -1 +1 @@
1
- import '@testing-library/jest-dom';
1
+ import "@testing-library/jest-dom";
package/dist/modules.d.ts ADDED
File without changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-button-group",
3
- "version": "1.1.41",
3
+ "version": "1.1.43",
4
4
  "description": "Button-Group UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -16,15 +16,15 @@
16
16
  "access": "public"
17
17
  },
18
18
  "scripts": {
19
- "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
19
+ "build": "vite build",
20
20
  "build:css": "node ../../../scripts/style/less.js",
21
21
  "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
22
- "build:watch": "pnpm run build:js -- --watch",
22
+ "build:watch": "vite build --watch",
23
23
  "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
24
24
  "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
25
25
  "prepublish": "pnpm run build",
26
- "test": "vitest",
27
- "test:watch": "pnpm run test -- --watch",
26
+ "test": "vitest run",
27
+ "test:watch": "vitest",
28
28
  "types": "tsc --noEmit",
29
29
  "check:circular-dependencies": "madge --circular --extensions ts,tsx,js,jsx --ts-config tsconfig.json src/ --exclude '/dist/'",
30
30
  "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
@@ -35,9 +35,9 @@
35
35
  ],
36
36
  "types": "dist/index.d.ts",
37
37
  "dependencies": {
38
- "@synerise/ds-button": "^1.5.16",
39
- "@synerise/ds-divider": "^1.3.0",
40
- "@synerise/ds-utils": "^1.6.0"
38
+ "@synerise/ds-button": "^1.5.18",
39
+ "@synerise/ds-divider": "^1.3.2",
40
+ "@synerise/ds-utils": "^1.7.1"
41
41
  },
42
42
  "peerDependencies": {
43
43
  "@synerise/ds-core": "*",
@@ -46,5 +46,5 @@
46
46
  "styled-components": "^5.3.3",
47
47
  "vitest": "4"
48
48
  },
49
- "gitHead": "8dfafc5d7278f09d430f1e7499782d05c76b47c0"
49
+ "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
50
50
  }