@synerise/ds-button 1.5.17 → 1.5.18

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.5.18](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@1.5.17...@synerise/ds-button@1.5.18) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-button
+
 ## [1.5.17](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@1.5.16...@synerise/ds-button@1.5.17) (2026-03-20)
 
 **Note:** Version bump only for package @synerise/ds-button

package/dist/Button.d.ts

@@ -1,27 +1,25 @@
-import React, { type MouseEvent } from 'react';
-import '@synerise/ds-core/dist/js/style';
-import './style/index.less';
+import { default as React, MouseEvent } from 'react';
 declare const Button: React.ForwardRefExoticComponent<Omit<Partial<{
     href: string;
     target?: string;
     onClick?: React.MouseEventHandler<HTMLElement>;
-} & import("antd/lib/button/button").BaseButtonProps & Omit<React.AnchorHTMLAttributes<any>, "type" | "onClick"> & {
-    htmlType?: import("antd/lib/button/button").ButtonHTMLType;
+} & import('antd/lib/button/button').BaseButtonProps & Omit<React.AnchorHTMLAttributes<any>, "type" | "onClick"> & {
+    htmlType?: import('antd/lib/button/button').ButtonHTMLType;
     onClick?: React.MouseEventHandler<HTMLElement>;
 } & Omit<React.ButtonHTMLAttributes<any>, "type" | "onClick">>, "ghost" | "type"> & {
-    type?: import("@synerise/ds-utils").LiteralStringUnion<import("./Button.types").ButtonType>;
-    mode?: import("@synerise/ds-utils").LiteralStringUnion<"single-icon" | "split" | "two-icons" | "label-icon" | "icon-label">;
-    color?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
-    groupVariant?: import("@synerise/ds-utils").LiteralStringUnion<"left-rounded" | "squared" | "right-rounded">;
-    justifyContent?: import("csstype").JustifyContentProperty;
+    type?: import('@synerise/ds-utils').LiteralStringUnion<import('./Button.types').ButtonType>;
+    mode?: import('@synerise/ds-utils').LiteralStringUnion<"single-icon" | "split" | "two-icons" | "label-icon" | "icon-label">;
+    color?: import('@synerise/ds-utils').LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
+    groupVariant?: import('@synerise/ds-utils').LiteralStringUnion<"left-rounded" | "squared" | "right-rounded">;
+    justifyContent?: import('csstype').JustifyContentProperty;
     loading?: boolean | {
         delay?: number;
     };
     onClick?: (event: MouseEvent<HTMLElement>) => void;
-    iconColor?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
+    iconColor?: import('@synerise/ds-utils').LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
     error?: boolean;
     readOnly?: boolean;
-    tagProps?: import("@synerise/ds-tag").TagProps;
-    tooltipProps?: import("@synerise/ds-tooltip").TooltipProps;
+    tagProps?: import('@synerise/ds-tag').TagProps;
+    tooltipProps?: import('@synerise/ds-tooltip').TooltipProps;
 } & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/Button.figma.js

@@ -1,66 +1,56 @@
-import figma from '@figma/code-connect';
-import Button from './Button';
-import { ButtonMode } from './Button.types';
-var FIGMA_URL = 'https://www.figma.com/design/fsSZONXpVvtrDsCgtu01Jb/Synerise-Design-System?node-id=139:4694&m=dev';
-var typeMapping = figma["enum"]('Variant', {
-  Primary: 'primary',
-  Secondary: 'secondary',
-  Tertiary: 'tertiary',
-  'Tetriary White': 'tertiary-white',
-  'Ghost Primary': 'ghost-primary',
-  'Ghost Secondary': 'ghost',
-  'Ghost Secondary White': 'ghost-white'
+import { jsx } from "react/jsx-runtime";
+import figma from "@figma/code-connect";
+import Button from "./Button.js";
+import { ButtonMode } from "./Button.types.js";
+const FIGMA_URL = "https://www.figma.com/design/fsSZONXpVvtrDsCgtu01Jb/Synerise-Design-System?node-id=139:4694&m=dev";
+const typeMapping = figma.enum("Variant", {
+  Primary: "primary",
+  Secondary: "secondary",
+  Tertiary: "tertiary",
+  "Tetriary White": "tertiary-white",
+  "Ghost Primary": "ghost-primary",
+  "Ghost Secondary": "ghost",
+  "Ghost Secondary White": "ghost-white"
 });
-var modeMapping = figma["enum"]('Content Type', {
-  Simple: undefined,
-  'Icon left': ButtonMode.ICON_LABEL,
-  'Icon right': ButtonMode.LABEL_ICON,
-  'Icon solo': ButtonMode.SINGLE_ICON,
-  '2 icons': ButtonMode.TWO_ICONS,
+const modeMapping = figma.enum("Content Type", {
+  Simple: void 0,
+  "Icon left": ButtonMode.ICON_LABEL,
+  "Icon right": ButtonMode.LABEL_ICON,
+  "Icon solo": ButtonMode.SINGLE_ICON,
+  "2 icons": ButtonMode.TWO_ICONS,
   Split: ButtonMode.SPLIT
 });
-var sizeMapping = figma["enum"]('Size', {
-  Normal: undefined,
-  Large: 'large'
+const sizeMapping = figma.enum("Size", {
+  Normal: void 0,
+  Large: "large"
 });
-var baseProps = {
+const baseProps = {
   type: typeMapping,
   mode: modeMapping,
   size: sizeMapping,
-  label: figma.string('✏️Text')
+  label: figma.string("✏️Text")
 };
 figma.connect(Button, FIGMA_URL, {
   variant: {
-    State: 'Default'
+    State: "Default"
   },
   props: baseProps,
-  example: function example(_ref) {
-    var type = _ref.type,
-      mode = _ref.mode,
-      size = _ref.size,
-      label = _ref.label;
-    return /*#__PURE__*/React.createElement(Button, {
-      type: type,
-      mode: mode,
-      size: size
-    }, label);
-  }
+  example: ({
+    type,
+    mode,
+    size,
+    label
+  }) => /* @__PURE__ */ jsx(Button, { type, mode, size, children: label })
 });
 figma.connect(Button, FIGMA_URL, {
   variant: {
-    State: 'Disabled'
+    State: "Disabled"
   },
   props: baseProps,
-  example: function example(_ref2) {
-    var type = _ref2.type,
-      mode = _ref2.mode,
-      size = _ref2.size,
-      label = _ref2.label;
-    return /*#__PURE__*/React.createElement(Button, {
-      type: type,
-      mode: mode,
-      size: size,
-      disabled: true
-    }, label);
-  }
-});
+  example: ({
+    type,
+    mode,
+    size,
+    label
+  }) => /* @__PURE__ */ jsx(Button, { type, mode, size, disabled: true, children: label })
+});

package/dist/Button.js

@@ -1,110 +1,86 @@
-var _excluded = ["type", "mode", "justifyContent", "groupVariant", "loading", "onClick", "className", "color", "error", "tagProps", "children", "tooltipProps"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
-import '@synerise/ds-core/dist/js/style';
-import Icon, { SpinnerM } from '@synerise/ds-icon';
-import { TagShape } from '@synerise/ds-tag';
-import Tooltip from '@synerise/ds-tooltip';
-import * as S from './Button.styles';
-import { ButtonMode } from './Button.types';
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, useEffect, useMemo } from "react";
+import Icon, { SpinnerM } from "@synerise/ds-icon";
+import { TagShape } from "@synerise/ds-tag";
+import Tooltip from "@synerise/ds-tooltip";
+import { RIPPLE_ANIMATION_TIME, ButtonLabel, Tag, AntdButton, RippleEffect, Spinner, ButtonFocus } from "./Button.styles.js";
+import { ButtonMode } from "./Button.types.js";
 import "./style/index.css";
-var RIPPLE_ANIMATION_OFFSET = 50;
-var Button = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
-  var _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'secondary' : _ref$type,
-    mode = _ref.mode,
-    _ref$justifyContent = _ref.justifyContent,
-    justifyContent = _ref$justifyContent === void 0 ? 'center' : _ref$justifyContent,
-    groupVariant = _ref.groupVariant,
-    _ref$loading = _ref.loading,
-    loading = _ref$loading === void 0 ? false : _ref$loading,
-    onClick = _ref.onClick,
-    className = _ref.className,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'red' : _ref$color,
-    error = _ref.error,
-    tagProps = _ref.tagProps,
-    children = _ref.children,
-    tooltipProps = _ref.tooltipProps,
-    antdProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var rippleRef = useRef(null);
-  var _useState = useState(''),
-    rippleClassName = _useState[0],
-    setRippleClassName = _useState[1];
-  var _useState2 = useState(false),
-    pressed = _useState2[0],
-    setPressed = _useState2[1];
-  useEffect(function () {
-    var rippleAnimation;
-    if (rippleClassName !== '') {
-      rippleAnimation = setTimeout(function () {
-        setRippleClassName('');
-      }, S.RIPPLE_ANIMATION_TIME - RIPPLE_ANIMATION_OFFSET);
+const RIPPLE_ANIMATION_OFFSET = 50;
+const Button = forwardRef(({
+  type = "secondary",
+  mode,
+  justifyContent = "center",
+  groupVariant,
+  loading = false,
+  onClick,
+  className,
+  color = "red",
+  error,
+  tagProps,
+  children,
+  tooltipProps,
+  ...antdProps
+}, forwardedRef) => {
+  const rippleRef = useRef(null);
+  const [rippleClassName, setRippleClassName] = useState("");
+  const [pressed, setPressed] = useState(false);
+  useEffect(() => {
+    let rippleAnimation;
+    if (rippleClassName !== "") {
+      rippleAnimation = setTimeout(() => {
+        setRippleClassName("");
+      }, RIPPLE_ANIMATION_TIME - RIPPLE_ANIMATION_OFFSET);
     }
-    return function () {
+    return () => {
       rippleAnimation && clearTimeout(rippleAnimation);
     };
   }, [rippleClassName]);
-  var handleClick = function handleClick(event) {
-    var button = event.currentTarget.closest('.ant-btn');
+  const handleClick = (event) => {
+    const button = event.currentTarget.closest(".ant-btn");
     if (button) {
-      var buttonBoundingRect = button.getBoundingClientRect();
-      var x = event.clientX - buttonBoundingRect.left;
-      var y = event.clientY - buttonBoundingRect.top;
+      const buttonBoundingRect = button.getBoundingClientRect();
+      const x = event.clientX - buttonBoundingRect.left;
+      const y = event.clientY - buttonBoundingRect.top;
       if (rippleRef.current) {
-        rippleRef.current.style.cssText = "top: " + y + "px; left: " + x + "px";
+        rippleRef.current.style.cssText = `top: ${y}px; left: ${x}px`;
       }
-      setRippleClassName('animate');
+      setRippleClassName("animate");
       onClick && onClick(event);
     }
   };
-  var classNameString = useMemo(function () {
-    var modeStringifed = mode || '';
-    var readOnlyStringifed = antdProps.readOnly ? 'read-only' : '';
-    var classNameStringifed = className || '';
-    return "ds-button " + modeStringifed + " " + classNameStringifed + " " + readOnlyStringifed;
+  const classNameString = useMemo(() => {
+    const modeStringifed = mode || "";
+    const readOnlyStringifed = antdProps.readOnly ? "read-only" : "";
+    const classNameStringifed = className || "";
+    return `ds-button ${modeStringifed} ${classNameStringifed} ${readOnlyStringifed}`;
   }, [mode, className, antdProps.readOnly]);
-  var buttonLabel = useMemo(function () {
-    var label = /*#__PURE__*/React.createElement(S.ButtonLabel, {
-      // ref={forwardedRef}
-      withTooltip: !!tooltipProps,
-      "data-testid": "ds-button-label",
-      className: "ds-button-label"
-    }, children, tagProps && mode !== ButtonMode.SINGLE_ICON && /*#__PURE__*/React.createElement(S.Tag, _extends({}, tagProps, {
-      shape: TagShape.MEDIUM_ROUND,
-      asPill: true
-    })));
-    return tooltipProps ? /*#__PURE__*/React.createElement(Tooltip, tooltipProps, label) : label;
+  const buttonLabel = useMemo(() => {
+    const label = /* @__PURE__ */ jsxs(
+      ButtonLabel,
+      {
+        withTooltip: !!tooltipProps,
+        "data-testid": "ds-button-label",
+        className: "ds-button-label",
+        children: [
+          children,
+          tagProps && mode !== ButtonMode.SINGLE_ICON && /* @__PURE__ */ jsx(Tag, { ...tagProps, shape: TagShape.MEDIUM_ROUND, asPill: true })
+        ]
+      }
+    );
+    return tooltipProps ? /* @__PURE__ */ jsx(Tooltip, { ...tooltipProps, children: label }) : label;
   }, [children, tagProps, mode, tooltipProps]);
-  return /*#__PURE__*/React.createElement(S.AntdButton, _extends({
-    ref: forwardedRef,
-    justifyContent: justifyContent,
-    type: type || 'secondary',
-    mode: mode,
-    error: error,
-    groupVariant: groupVariant,
-    loading: loading,
-    onClick: handleClick,
-    onMouseDown: function onMouseDown() {
-      setPressed(true);
-    },
-    onMouseUp: function onMouseUp() {
-      setPressed(false);
-    },
-    pressed: pressed,
-    className: classNameString,
-    customColor: color
-  }, antdProps), !antdProps.readOnly && /*#__PURE__*/React.createElement(S.RippleEffect, {
-    ref: rippleRef,
-    className: "btn-ripple " + rippleClassName
-  }), buttonLabel, loading && /*#__PURE__*/React.createElement(S.Spinner, {
-    className: "btn-spinner",
-    "data-testid": "button-spinner"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(SpinnerM, null)
-  })), /*#__PURE__*/React.createElement(S.ButtonFocus, {
-    className: "btn-focus"
-  }));
+  return /* @__PURE__ */ jsxs(AntdButton, { ref: forwardedRef, justifyContent, type: type || "secondary", mode, error, groupVariant, loading, onClick: handleClick, onMouseDown: () => {
+    setPressed(true);
+  }, onMouseUp: () => {
+    setPressed(false);
+  }, pressed, className: classNameString, customColor: color, ...antdProps, children: [
+    !antdProps.readOnly && /* @__PURE__ */ jsx(RippleEffect, { ref: rippleRef, className: `btn-ripple ${rippleClassName}` }),
+    buttonLabel,
+    loading && /* @__PURE__ */ jsx(Spinner, { className: "btn-spinner", "data-testid": "button-spinner", children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(SpinnerM, {}) }) }),
+    /* @__PURE__ */ jsx(ButtonFocus, { className: "btn-focus" })
+  ] });
 });
-export default Button;
+export {
+  Button as default
+};

package/dist/Button.styles.d.ts

@@ -1,16 +1,16 @@
-import React from 'react';
-import { type ButtonProps } from './Button.types';
+import { default as React } from 'react';
+import { ButtonProps } from './Button.types';
 export declare const RIPPLE_ANIMATION_TIME = 500;
-export declare const Spinner: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const RippleEffect: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const ButtonFocus: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Tag: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<{
+export declare const Spinner: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const RippleEffect: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const ButtonFocus: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Tag: import('styled-components').StyledComponent<React.ForwardRefExoticComponent<{
     id?: string | number;
     name?: string;
     textColor?: string;
     color?: string;
     image?: string;
-    shape?: import("@synerise/ds-tag").TagShape;
+    shape?: import('@synerise/ds-tag').TagShape;
     removable?: boolean;
     className?: string;
     disabled?: boolean;
@@ -18,20 +18,20 @@ export declare const Tag: import("styled-components").StyledComponent<React.Forw
     onRemove?: (tag: string | number) => void;
     prefixel?: React.ReactNode;
     suffixel?: React.ReactNode;
-    texts?: import("@synerise/ds-tag").TagTexts;
+    texts?: import('@synerise/ds-tag').TagTexts;
     asPill?: boolean;
     dashed?: boolean;
-    tooltipProps?: import("@synerise/ds-tooltip").TooltipProps;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "onClick" | "className" | "id" | "color" | "disabled" | "name" | "shape" | "textColor" | "image" | "removable" | "onRemove" | "prefixel" | "suffixel" | "texts" | "asPill" | "dashed" | "tooltipProps"> & import("@synerise/ds-utils").DataAttributes & React.RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const ButtonLabel: import("styled-components").StyledComponent<"div", any, {
+    tooltipProps?: import('@synerise/ds-tooltip').TooltipProps;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "onClick" | "className" | "id" | "color" | "disabled" | "name" | "shape" | "textColor" | "image" | "removable" | "onRemove" | "prefixel" | "suffixel" | "texts" | "asPill" | "dashed" | "tooltipProps"> & import('@synerise/ds-utils').DataAttributes & React.RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const ButtonLabel: import('styled-components').StyledComponent<"div", any, {
     withTooltip?: boolean;
 }, never>;
-export declare const AntdButton: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Omit<Partial<{
+export declare const AntdButton: import('styled-components').StyledComponent<React.ForwardRefExoticComponent<Omit<Partial<{
     href: string;
     target?: string;
     onClick?: React.MouseEventHandler<HTMLElement>;
-} & import("antd/lib/button/button").BaseButtonProps & Omit<React.AnchorHTMLAttributes<any>, "type" | "onClick"> & {
-    htmlType?: import("antd/lib/button/button").ButtonHTMLType;
+} & import('antd/lib/button/button').BaseButtonProps & Omit<React.AnchorHTMLAttributes<any>, "type" | "onClick"> & {
+    htmlType?: import('antd/lib/button/button').ButtonHTMLType;
     onClick?: React.MouseEventHandler<HTMLElement>;
 } & Omit<React.ButtonHTMLAttributes<any>, "type" | "onClick">>, "type"> & Pick<ButtonProps, "mode" | "justifyContent" | "groupVariant" | "iconColor" | "error"> & {
     pressed: boolean;