@synerise/ds-button 1.5.26 → 1.5.27

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.27](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@1.5.26...@synerise/ds-button@1.5.27) (2026-05-11)
+
+**Note:** Version bump only for package @synerise/ds-button
+
 ## [1.5.26](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@1.5.25...@synerise/ds-button@1.5.26) (2026-05-04)
 
 ### Bug Fixes

package/README.md

@@ -15,7 +15,7 @@ import { version } from './package.json';
 
 Buttons allow users to take actions, and make choices, with a single tap. Buttons communicate actions that users can take. They are typically placed throughout your UI, in places such as dialogs, modal windows, forms, cards, and toolbars.
 
-Inspired by [Ant Design Button](https://ant.design/components/button/)
+Standalone button component for the Synerise Design System.
 
 ## When to use it
 

package/dist/BaseButton.d.ts

@@ -0,0 +1,22 @@
+import { default as React, ReactNode } from 'react';
+/**
+ * Base button component.
+ *
+ * Produces CSS class names:
+ *   ant-btn ant-btn-{type} [ant-btn-lg] [ant-btn-sm] [ant-btn-block] [ant-btn-loading]
+ */
+declare const BaseButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick"> & {
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    type?: string;
+    size?: import('./BaseButton.types').ButtonSize;
+    loading?: boolean | {
+        delay?: number;
+    };
+    block?: boolean;
+    htmlType?: import('./BaseButton.types').ButtonHTMLType;
+    href?: string;
+    target?: string;
+    download?: string | boolean;
+    children?: ReactNode;
+} & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export default BaseButton;

package/dist/BaseButton.js

@@ -0,0 +1,89 @@
+import { jsx } from "react/jsx-runtime";
+import React, { forwardRef, useState, useEffect } from "react";
+import { Button } from "./BaseButton.styles.js";
+const sizeClassMap = {
+  large: "ant-btn-lg",
+  small: "ant-btn-sm"
+};
+function isFragment(child) {
+  return React.isValidElement(child) && child.type === React.Fragment;
+}
+function wrapChildren(children) {
+  return React.Children.map(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") {
+      return /* @__PURE__ */ jsx("span", { children: child });
+    }
+    if (isFragment(child)) {
+      return /* @__PURE__ */ jsx("span", { children: child });
+    }
+    return child;
+  });
+}
+const BaseButton = forwardRef(({
+  type = "default",
+  size,
+  loading = false,
+  block = false,
+  htmlType = "button",
+  href,
+  target,
+  download,
+  className,
+  children,
+  disabled,
+  onClick,
+  ...rest
+}, ref) => {
+  const [innerLoading, setInnerLoading] = useState(false);
+  useEffect(() => {
+    let delayTimer = null;
+    if (typeof loading === "object" && loading.delay) {
+      delayTimer = setTimeout(() => {
+        delayTimer = null;
+        setInnerLoading(true);
+      }, loading.delay);
+    } else {
+      setInnerLoading(!!loading);
+    }
+    return () => {
+      if (delayTimer) {
+        clearTimeout(delayTimer);
+        delayTimer = null;
+      }
+    };
+  }, [loading]);
+  const handleClick = (e) => {
+    if (innerLoading || disabled) {
+      e.preventDefault();
+      return;
+    }
+    onClick?.(e);
+  };
+  const classes = ["ant-btn", type && `ant-btn-${type}`, size && sizeClassMap[size], block && "ant-btn-block", innerLoading && "ant-btn-loading", className].filter(Boolean).join(" ");
+  const sharedProps = {
+    className: classes,
+    "aria-disabled": innerLoading || disabled || void 0,
+    tabIndex: innerLoading ? -1 : void 0,
+    onClick: handleClick,
+    ...rest
+  };
+  if (href) {
+    const anchorProps = {
+      ...sharedProps,
+      as: "a",
+      ref,
+      href: disabled ? void 0 : href,
+      target,
+      download
+    };
+    return (
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      /* @__PURE__ */ jsx(Button, { ...anchorProps, children: wrapChildren(children) })
+    );
+  }
+  return /* @__PURE__ */ jsx(Button, { ref, type: htmlType, disabled, ...sharedProps, children: wrapChildren(children) });
+});
+BaseButton.displayName = "BaseButton";
+export {
+  BaseButton as default
+};

package/dist/BaseButton.styles.d.ts

@@ -0,0 +1 @@
+export declare const Button: import('styled-components').StyledComponent<"button", any, {}, never>;

package/dist/BaseButton.styles.js

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+const dsProps = /* @__PURE__ */ new Set(["mode", "justifyContent", "groupVariant", "customColor", "pressed", "iconColor", "error", "readOnly", "expanderSize", "expanded", "htmlType", "loading"]);
+const Button = /* @__PURE__ */ styled.button.withConfig({
+  shouldForwardProp: (prop) => !dsProps.has(prop)
+}).withConfig({
+  displayName: "BaseButtonstyles__Button",
+  componentId: "sc-tbau7c-0"
+})(["&{position:relative;font-weight:500;white-space:nowrap;text-align:center;background-image:none;border:0 solid transparent;box-shadow:none;text-shadow:none;cursor:pointer;transition:all 0.3s cubic-bezier(0.645,0.045,0.355,1);user-select:none;touch-action:manipulation;height:32px;font-size:13px;border-radius:3px;outline:0;text-decoration:none;&:not([disabled]):hover{text-decoration:none;}&:not([disabled]):active{outline:0;}&[disabled]{cursor:not-allowed;}> span{display:contents;}&.ant-btn-lg{height:48px;font-size:14px;}&.ant-btn-sm{height:28px;padding:0 12px;font-size:13px;}&.ant-btn-block{width:100%;}&.ant-btn-loading{cursor:default;pointer-events:none;}}"]);
+export {
+  Button
+};

package/dist/BaseButton.types.d.ts

@@ -0,0 +1,29 @@
+import { ButtonHTMLAttributes, MouseEvent, ReactNode } from 'react';
+export type ButtonSize = 'small' | 'middle' | 'large';
+export type ButtonHTMLType = 'submit' | 'button' | 'reset';
+export type BaseButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'onClick'> & {
+    /** Click handler — typed with HTMLElement to support both button and anchor rendering */
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    /** Any string — becomes `ant-btn-{type}` CSS class */
+    type?: string;
+    /** Button size — affects height and padding */
+    size?: ButtonSize;
+    /** Shows a spinning overlay. Pass `{ delay: ms }` to debounce short loading states */
+    loading?: boolean | {
+        delay?: number;
+    };
+    /** Stretches the button to full width of its container */
+    block?: boolean;
+    /** HTML type attribute for the underlying button element
+     * @default button
+     */
+    htmlType?: ButtonHTMLType;
+    /** When provided, renders as an `<a>` element instead of `<button>` */
+    href?: string;
+    /** Link target — only used when `href` is set */
+    target?: string;
+    /** Download filename — only used when `href` is set */
+    download?: string | boolean;
+    /** Button content — text label, icons, or any ReactNode */
+    children?: ReactNode;
+};

package/dist/BaseButton.types.js

@@ -0,0 +1 @@
+

package/dist/Button.d.ts

@@ -1,20 +1,14 @@
 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;
-    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">;
+import { ButtonMode } from './Button.types';
+declare const Button: React.ForwardRefExoticComponent<Omit<import('./BaseButton.types').BaseButtonProps, "type"> & {
+    type?: import('./Button.types').ButtonType;
+    mode?: import('@synerise/ds-utils').LiteralStringUnion<ButtonMode>;
     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;
     };
+    icon?: React.ReactNode;
     onClick?: (event: MouseEvent<HTMLElement>) => void;
     iconColor?: import('@synerise/ds-utils').LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
     error?: boolean;

package/dist/Button.js

@@ -3,28 +3,28 @@ 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 { RIPPLE_ANIMATION_TIME, ButtonLabel, Tag, StyledButton, RippleEffect, Spinner, ButtonFocus, ACTIVE_DELAY } from "./Button.styles.js";
 import { ButtonMode } from "./Button.types.js";
-import "./style/index.css";
 const RIPPLE_ANIMATION_OFFSET = 50;
 const Button = forwardRef(({
   type = "secondary",
   mode,
-  justifyContent = "center",
   groupVariant,
   loading = false,
   onClick,
   className,
   color = "red",
   error,
+  icon,
   tagProps,
   children,
   tooltipProps,
-  ...antdProps
+  ...restProps
 }, forwardedRef) => {
   const rippleRef = useRef(null);
   const [rippleClassName, setRippleClassName] = useState("");
   const [pressed, setPressed] = useState(false);
+  const activeTimerRef = useRef(null);
   useEffect(() => {
     let rippleAnimation;
     if (rippleClassName !== "") {
@@ -36,7 +36,14 @@ const Button = forwardRef(({
       rippleAnimation && clearTimeout(rippleAnimation);
     };
   }, [rippleClassName]);
-  const handleClick = (event) => {
+  const clearActiveTimer = () => {
+    if (activeTimerRef.current) {
+      clearTimeout(activeTimerRef.current);
+      activeTimerRef.current = null;
+    }
+    setPressed(false);
+  };
+  const handleMouseDown = (event) => {
     const button = event.currentTarget.closest(".ant-btn");
     if (button) {
       const buttonBoundingRect = button.getBoundingClientRect();
@@ -46,36 +53,35 @@ const Button = forwardRef(({
         rippleRef.current.style.cssText = `top: ${y}px; left: ${x}px`;
       }
       setRippleClassName("animate");
-      onClick && onClick(event);
     }
+    clearActiveTimer();
+    activeTimerRef.current = setTimeout(() => {
+      setPressed(true);
+    }, ACTIVE_DELAY);
+  };
+  const handleClick = (event) => {
+    onClick && onClick(event);
   };
   const classNameString = useMemo(() => {
     const modeStringifed = mode || "";
-    const readOnlyStringifed = antdProps.readOnly ? "read-only" : "";
+    const readOnlyStringifed = restProps.readOnly ? "read-only" : "";
     const classNameStringifed = className || "";
-    return `ds-button ${modeStringifed} ${classNameStringifed} ${readOnlyStringifed}`;
-  }, [mode, className, antdProps.readOnly]);
+    const pressedStringified = pressed ? "pressed" : "";
+    return `ds-button ${modeStringifed} ${classNameStringifed} ${readOnlyStringifed} ${pressedStringified}`;
+  }, [mode, className, restProps.readOnly, pressed]);
+  const iconBefore = icon && mode !== ButtonMode.LABEL_ICON ? icon : null;
+  const iconAfter = icon && mode === ButtonMode.LABEL_ICON ? icon : null;
   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 })
-        ]
-      }
-    );
+    const label = /* @__PURE__ */ jsxs(ButtonLabel, { withTooltip: !!tooltipProps, "data-testid": "ds-button-label", className: "ds-button-label", children: [
+      iconBefore,
+      children,
+      iconAfter,
+      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__ */ 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}` }),
+  }, [children, tagProps, mode, tooltipProps, iconBefore, iconAfter]);
+  return /* @__PURE__ */ jsxs(StyledButton, { ref: forwardedRef, type: type || "secondary", mode, error, groupVariant, loading, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: clearActiveTimer, onMouseLeave: clearActiveTimer, className: classNameString, customColor: color, ...restProps, children: [
+    !restProps.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" })

package/dist/Button.styles.d.ts

@@ -1,10 +1,9 @@
-import { default as React } from 'react';
-import { ButtonProps } from './Button.types';
 export declare const RIPPLE_ANIMATION_TIME = 500;
+export declare const ACTIVE_DELAY = 200;
 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 Tag: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<{
     id?: string | number;
     name?: string;
     textColor?: string;
@@ -22,20 +21,35 @@ export declare const Tag: import('styled-components').StyledComponent<React.Forw
     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>;
+} & Omit<import('react').HTMLAttributes<HTMLDivElement>, "image" | "name" | "className" | "color" | "id" | "onClick" | "shape" | "disabled" | "textColor" | "removable" | "onRemove" | "prefixel" | "suffixel" | "texts" | "asPill" | "dashed" | "tooltipProps"> & import('@synerise/ds-utils').DataAttributes & import('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<{
-    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;
-    onClick?: React.MouseEventHandler<HTMLElement>;
-} & Omit<React.ButtonHTMLAttributes<any>, "type" | "onClick">>, "type"> & Pick<ButtonProps, "mode" | "justifyContent" | "groupVariant" | "iconColor" | "error"> & {
-    pressed: boolean;
-    customColor: string;
+type StyledButtonProps = {
+    mode?: string;
+    groupVariant?: string;
+    iconColor?: string;
+    error?: boolean;
+    customColor?: string;
     readOnly?: boolean;
     type: string;
-} & React.RefAttributes<HTMLButtonElement>>, any, {}, never>;
+    size?: string;
+    loading?: boolean | {
+        delay?: number;
+    };
+};
+export declare const StyledButton: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick"> & {
+    onClick?: (event: import('react').MouseEvent<HTMLElement>) => void;
+    type?: string;
+    size?: import('./BaseButton.types').ButtonSize;
+    loading?: boolean | {
+        delay?: number;
+    };
+    block?: boolean;
+    htmlType?: import('./BaseButton.types').ButtonHTMLType;
+    href?: string;
+    target?: string;
+    download?: string | boolean;
+    children?: import('react').ReactNode;
+} & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, any, StyledButtonProps, never>;
+export {};

package/dist/Button.styles.js

@@ -1,14 +1,13 @@
-import { jsx } from "react/jsx-runtime";
-import { Button } from "antd";
-import { forwardRef } from "react";
 import styled, { css, keyframes } from "styled-components";
 import { IconContainer } from "@synerise/ds-icon";
 import DSTag from "@synerise/ds-tag";
+import BaseButton from "./BaseButton.js";
+import { getVariantStyles } from "./Button.variants.js";
 const RIPPLE_ANIMATION_TIME = 500;
+const ACTIVE_DELAY = 200;
 const leftIcon = "0 4px 0 8px";
 const rightIcon = "0 8px 0 4px";
 const rippleInitialSize = 20;
-const buttonTypes = ["secondary", "tertiary", "ghost"];
 const splitTypes = ["secondary", "tertiary"];
 const pressedStyles = (props) => css(["color:", ";background:", ";&.ant-btn .btn-focus{box-shadow:inset 0 0 0 1px ", ";}", " > .ds-icon:before{background-color:", ";}"], props.theme.palette["blue-600"], props.theme.palette["blue-100"], props.theme.palette["blue-300"], ButtonLabel, props.theme.palette["blue-200"]);
 const spinnerAnimation = /* @__PURE__ */ keyframes(["from{transform:rotateZ(0deg);}to{transform:rotateZ(360deg);}"]);
@@ -32,42 +31,21 @@ const Tag = /* @__PURE__ */ styled(DSTag).withConfig({
 const ButtonLabel = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Buttonstyles__ButtonLabel",
   componentId: "sc-3lgta1-4"
-})(["display:flex;align-items:center;flex-grow:1;min-width:0;justify-content:center;", ""], (props) => props.withTooltip && `
+})(["display:flex;align-items:center;flex-grow:1;min-width:0;z-index:1;position:relative;justify-content:center;", ""], (props) => props.withTooltip && `
     && {
       pointer-events: all;
     }`);
-const AntdButton = /* @__PURE__ */ styled(forwardRef(({
-  mode,
-  type,
-  loading,
-  justifyContent,
-  groupVariant,
-  customColor,
-  pressed,
-  size,
-  iconColor,
-  error,
-  ...rest
-}, ref) => {
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      ref,
-      type: type === "custom-color-ghost" ? "ghost-primary" : type,
-      size,
-      ...rest
-    }
-  );
-})).withConfig({
-  displayName: "Buttonstyles__AntdButton",
+const StyledButton = /* @__PURE__ */ styled(BaseButton).withConfig({
+  displayName: "Buttonstyles__StyledButton",
   componentId: "sc-3lgta1-5"
-})(["   &&{-webkit-mask-image:-webkit-radial-gradient(white,black);display:inline-flex;align-items:center;padding:0 12px;position:relative;overflow:hidden;justify-content:", ";", ";&:not(:disabled):not(:focus){", " span{color:inherit;}}", " > *:not(.btn-focus){position:relative;}", " > .ds-icon,> .ds-icon{display:flex;align-items:center;justify-content:center;margin:0;width:24px;height:24px;svg{transition:all .3s cubic-bezier(.645,.045,.355,1);}}", " &&.ant-btn-default:not(.ds-expander):not(.ds-button-creator):not(.read-only):not([disabled]),&&.ant-btn-secondary:not(.ds-expander):not(.ds-button-creator):not(.read-only):not([disabled]){&:active{", "}&:focus:not(:active){color:", ";svg{fill:currentColor;}background:", ";}&:hover:not(:disabled):not(:focus){background-color:", ";&.ant-btn .btn-focus{box-shadow:inset 0 0 0 1px ", ";}", " > .ds-icon:before{background-color:", ";}}&:active{color:", ";svg{fill:", ";!important;}}}", " ", ";", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " &:hover:not(:disabled):not(:focus){", " span{color:", ";cursor:inherit;}}}"], (props) => props.justifyContent, (props) => props.shape && props.shape === "circle" && css(["border-radius:50%;"]), ButtonLabel, ButtonLabel, ButtonLabel, (props) => props.mode !== "single-icon" && css(["&.ant-btn:not(.ds-expander):not(.ds-button-creator):not( .btn-search ):not(.btn-search-open){min-width:54px;}"]), (props) => pressedStyles(props), (props) => props.error ? props.theme.palette["red-600"] : props.theme.palette["grey-600"], (props) => props.theme.palette["grey-050"], (props) => props.theme.palette["blue-050"], (props) => props.theme.palette["blue-300"], ButtonLabel, (props) => props.theme.palette["blue-200"], (props) => props.theme.palette["blue-600"], (props) => props.theme.palette["blue-600"], (props) => props.readOnly && props.type !== "custom-color-ghost" && css(["&&.ant-btn{cursor:default;transition:none;}&&.ant-btn-secondary{&:hover,&:focus{background:", ";.btn-focus{box-shadow:inset 0 0 0 1px ", ";}", ",svg{color:", ";}svg{fill:", " !important;}}}&&.ant-btn-primary{&:hover,&:focus{background:", ";.btn-focus{box-shadow:inset 0 0 0 1px ", ";}", ",svg{color:", ";}svg{fill:", " !important;}}}&&.ant-btn-tertiary{&:hover,&:focus{background:", ";.btn-focus{box-shadow:inset 0 0 0 0 ", ";}", ",svg{color:", ";}svg{fill:", " !important;}}}&&.ant-btn-tertiary-white{&:hover,&:focus{background:rgba(219,224,227,0.15);.btn-focus{box-shadow:inset 0 0 0 0 rgba(219,224,227,0.15);}", ",svg{color:", ";}svg{fill:", " !important;}}}&&.ant-btn-ghost-primary{&:hover,&:focus{background:", ";.btn-focus{box-shadow:inset 0 0 0 0 ", ";}", ",svg{color:", ";}svg{fill:", " !important;}}}&&.ant-btn-ghost{&:hover,&:focus{background:", ";.btn-focus{box-shadow:inset 0 0 0 0 ", ";}", ",svg{color:", ";}svg{fill:", " !important;}}}&&.ant-btn-ghost-white{&:hover,&:focus{background:", ";.btn-focus{box-shadow:inset 0 0 0 0 ", ";}", ",svg{color:", ";}svg{fill:", " !important;}}}"], props.theme.palette["grey-050"], props.theme.palette["grey-300"], ButtonLabel, props.theme.palette["grey-700"], props.theme.palette["grey-700"], props.theme.palette["blue-600"], props.theme.palette["blue-600"], ButtonLabel, props.theme.palette["grey-050"], props.theme.palette["grey-050"], props.theme.palette["grey-100"], props.theme.palette["grey-100"], ButtonLabel, props.theme.palette["grey-700"], props.theme.palette["grey-700"], ButtonLabel, props.theme.palette["grey-050"], props.theme.palette["grey-050"], props.theme.palette.white, props.theme.palette.white, ButtonLabel, props.theme.palette["blue-600"], props.theme.palette["blue-600"], props.theme.palette.white, props.theme.palette.white, ButtonLabel, props.theme.palette["grey-600"], props.theme.palette["grey-600"], props.theme.palette["grey-600"], props.theme.palette["grey-600"], ButtonLabel, props.theme.palette["grey-050"], props.theme.palette["grey-050"]), (props) => props.loading && css(["> *:not(.btn-focus){opacity:0;visibility:hidden;}", "{opacity:1;visibility:visible;}"], Spinner), (props) => buttonTypes.includes(props.type) && !props.error && css(["&.ant-btn{&:not(:disabled){svg{fill:", ";}&:hover{svg{fill:currentColor;}}}}"], props.iconColor ? props.theme.palette[`${props.iconColor}-600`] : "currentColor"), (props) => props.mode === "split" && css(["&.ant-btn{padding-right:0;transition:0s;", "{position:relative;}", " > .ds-icon{margin:0 4px 0 15px;position:relative;&:before{content:'';background-color:", ";top:", ";height:", ";width:1px;left:-4px;position:absolute;transition:all 0.3s ease;}}}"], ButtonLabel, ButtonLabel, !splitTypes.includes(props.type) ? `rgba(255, 255, 255, 0.15);` : props.theme.palette["grey-300"], props.size === "large" ? "-12px" : "-4px", props.size === "large" ? "48px" : "32px"), (props) => props.mode === "two-icons" && css(["&.ant-btn{padding:0;transition:0s;", " > ", ":first-of-type,", " > .ds-icon:first-of-type,& > ", ":first-of-type,& > .ds-icon:first-of-type{margin:", ";}", " > ", ":nth-of-type(2),", " > .ds-icon:nth-of-type(2),& > ", ":nth-of-type(2),& > .ds-icon:nth-of-type(2){margin:", ";}}", "{margin:0 12px 0 0;}"], ButtonLabel, IconContainer, ButtonLabel, IconContainer, leftIcon, ButtonLabel, IconContainer, ButtonLabel, IconContainer, rightIcon, Tag), (props) => props.mode === "label-icon" && css(["&.ant-btn{padding-right:0;transition:0s;", " > ", ",", " > .ds-icon,& > ", ",& > .ds-icon{margin:", ";}}", "{margin:0 12px 0 0;}"], ButtonLabel, IconContainer, ButtonLabel, IconContainer, rightIcon, Tag), (props) => props.mode === "icon-label" && css(["&.ant-btn{padding-left:0;transition:0s;", " > ", ",", " > .ds-icon,& > ", ",& > .ds-icon{margin:", ";}}"], ButtonLabel, IconContainer, ButtonLabel, IconContainer, leftIcon), (props) => props.mode === "single-icon" && css(["&.ant-btn:not(.ds-expander){display:flex;align-items:center;justify-content:center;padding:0;transition:0s;width:32px;", " > ", ",", " > .ds-icon,& > ", ",& > .ds-icon{margin:0 4px 0 4px;}}"], ButtonLabel, IconContainer, ButtonLabel, IconContainer), (props) => props.mode === "single-icon" && props.size === "large" && css(["&.ant-btn{width:48px;}"]), (props) => props.groupVariant === "squared" && css(["&.ant-btn{border-radius:0;}"]), (props) => props.groupVariant === "left-rounded" && css(["&.ant-btn{border-radius:3px 0 0 3px;}"]), (props) => props.groupVariant === "right-rounded" && css(["&.ant-btn{border-radius:0 3px 3px 0;}"]), (props) => props.error && css(["&.ant-btn{background-color:", ";box-shadow:inset 0 0 0 1px ", ";", "{color:", ";}svg{fill:", ";}.btn-focus{box-shadow:none;}&&&:hover:not(:disabled):not(:focus){background-color:", ";box-shadow:inset 0 0 0 1px ", ";", "{color:", ";}svg{fill:", " !important;}}&:active{background-color:", ";box-shadow:none;", "{color:", ";}svg{fill:", ";}}&&&:focus:not(:active){border:none !important;background-color:", ";", "{color:", ";}.btn-focus{box-shadow:inset 0 0 0 2px ", ";}}svg{fill:", ";}}", "{background-color:", ";}"], props.theme.palette[`red-100`], props.theme.palette["red-600"], ButtonLabel, props.theme.palette[`red-600`], props.theme.palette[`red-600`], props.theme.palette[`red-200`], props.theme.palette["red-600"], ButtonLabel, props.theme.palette[`red-600`], props.theme.palette[`red-600`], props.theme.palette[`red-700`], ButtonLabel, props.theme.palette.white, props.theme.palette.white, props.theme.palette[`red-100`], ButtonLabel, props.theme.palette[`red-600`], props.theme.palette["blue-600"], props.theme.palette[`red-600`], RippleEffect, props.theme.palette[`red-700`]), (props) => props.error && props.type === "secondary" && css(["&&&.ant-btn{", "{color:", ";}svg{fill:", ";}.btn-focus{box-shadow:none;}&&&:hover{background-color:", ";.btn-focus{box-shadow:none;}}&&&:focus:not(:active){.btn-focus{box-shadow:inset 0 0 0 2px ", ";}}&&&:active{background-color:", ";", "{color:", ";}svg{fill:", ";}}", "{background-color:", ";}}"], ButtonLabel, props.theme.palette[`red-600`], props.theme.palette[`red-600`], props.theme.palette[`red-200`], props.theme.palette["blue-600"], props.theme.palette[`red-700`], ButtonLabel, props.theme.palette.white, props.theme.palette.white, RippleEffect, props.theme.palette[`red-700`]), (props) => props.type === "custom-color" && !props.error && css(["&.ant-btn{background-color:", ";border:0 solid transparent;color:", ";", "{color:", ";}svg{color:", ";fill:", ";}", "{box-shadow:inset 0 0 0 0px transparent;}", "{background-color:", ";}&:focus:not(.read-only){", "{box-shadow:inset 0 0 0 2px ", ";}}&:hover:not(:disabled):not(:focus){background-color:", ";", "{color:", ";}svg{color:", " !important;fill:", " !important;}}&:disabled{opacity:0.4;background-color:", ";", "{color:", ";}svg{color:", " !important;fill:", " !important;}}}"], props.theme.palette[`${props.customColor}-600`], props.theme.palette.white, ButtonLabel, props.theme.palette.white, props.theme.palette.white, props.theme.palette.white, ButtonFocus, RippleEffect, props.theme.palette[`${props.customColor}-700`], ButtonFocus, props.theme.palette["blue-600"], props.theme.palette[props.readOnly ? `${props.customColor}-600` : `${props.customColor}-500`], ButtonLabel, props.theme.palette.white, props.theme.palette.white, props.theme.palette.white, props.theme.palette[`${props.customColor}-600`], ButtonLabel, props.theme.palette.white, props.theme.palette.white, props.theme.palette.white), (props) => props.type === "custom-color-ghost" && !props.error && css(["&&&{color:", ";.ds-icon > svg{fill:", ";}&:disabled{opacity:0.4;color:", ";.ds-icon > svg{fill:", " !important;}}}"], props.theme.palette[`${props.customColor}-600`], props.theme.palette[`${props.customColor}-600`], props.theme.palette[`${props.customColor}-600`], props.theme.palette[`${props.customColor}-600`]), (props) => props.readOnly && props.type === "custom-color-ghost" && css(["&&.ant-btn{cursor:default;transition:none;}&&.ant-btn-ghost-primary{&:hover,&:focus{background:", ";.btn-focus{box-shadow:inset 0 0 0 0 ", ";}", ",svg{color:", ";}svg{fill:", ";!important;}}}"], props.theme.palette.white, props.theme.palette.white, ButtonLabel, props.theme.palette[`${props.customColor}-600`], props.theme.palette[`${props.customColor}-600`]), Tag, (props) => props.theme.palette.white);
+})(["&&{", " -webkit-mask-image:-webkit-radial-gradient(white,black);display:inline-flex;align-items:center;padding:0 12px;position:relative;overflow:hidden;&:not(:disabled):not(:focus-visible){", " span{color:inherit;}}", " > *:not(.btn-focus){position:relative;z-index:1;}", " > .ds-icon,> .ds-icon{display:flex;align-items:center;justify-content:center;margin:0;width:24px;height:24px;}", " &&.ant-btn-default:not(.ds-expander):not(.ds-button-creator):not(.read-only):not([disabled]),&&.ant-btn-secondary:not(.ds-expander):not(.ds-button-creator):not(.read-only):not([disabled]){.btn-ripple{background-color:", ";}&.pressed{", " color:", ";}&:focus-visible:not(.pressed){color:", ";background:", ";}&:hover:not(:disabled):not(:focus-visible):not(.pressed){background-color:", ";&.ant-btn .btn-focus{box-shadow:inset 0 0 0 1px ", ";}", " > .ds-icon:before{background-color:", ";}}}", " ", ";", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " &:hover:not(:disabled):not(:focus-visible):not(.pressed){", " span{color:", ";cursor:inherit;}}}"], (props) => getVariantStyles(props.type, props.theme.palette), ButtonLabel, ButtonLabel, ButtonLabel, (props) => props.mode !== "single-icon" && css(["&.ant-btn:not(.ds-expander):not(.ds-button-creator):not( .btn-search ):not(.btn-search-open){min-width:54px;}"]), (props) => props.theme.palette["blue-100"], (props) => pressedStyles(props), (props) => props.theme.palette["blue-600"], (props) => props.error ? props.theme.palette["red-600"] : props.theme.palette["grey-600"], (props) => props.theme.palette["grey-050"], (props) => props.theme.palette["blue-050"], (props) => props.theme.palette["blue-300"], ButtonLabel, (props) => props.theme.palette["blue-200"], (props) => props.readOnly && props.type !== "custom-color-ghost" && css(["&&.ant-btn{cursor:default;transition:none;}&&.ant-btn-secondary{&:hover,&:focus-visible{background:", ";.btn-focus{box-shadow:inset 0 0 0 1px ", ";}color:", ";}}&&.ant-btn-primary{&:hover,&:focus-visible{background:", ";.btn-focus{box-shadow:inset 0 0 0 1px ", ";}color:", ";}}&&.ant-btn-tertiary{&:hover,&:focus-visible{background:", ";.btn-focus{box-shadow:none;}color:", ";}}&&.ant-btn-tertiary-white{&:hover,&:focus-visible{background:rgba(219,224,227,0.15);.btn-focus{box-shadow:none;}color:", ";}}&&.ant-btn-ghost-primary{&:hover,&:focus-visible{background:", ";.btn-focus{box-shadow:none;}color:", ";}}&&.ant-btn-ghost{&:hover,&:focus-visible{background:", ";.btn-focus{box-shadow:none;}color:", ";}}&&.ant-btn-ghost-white{&:hover,&:focus-visible{background:", ";.btn-focus{box-shadow:none;}color:", ";}}&&.ant-btn-danger{&:hover,&:focus-visible{background:", ";.btn-focus{box-shadow:none;}color:", ";}}&&.ant-btn-success{&:hover,&:focus-visible{background:", ";.btn-focus{box-shadow:none;}color:", ";}}&&.ant-btn-warning{&:hover,&:focus-visible{background:", ";.btn-focus{box-shadow:none;}color:", ";}}"], props.theme.palette["grey-050"], props.theme.palette["grey-300"], props.theme.palette["grey-700"], props.theme.palette["blue-600"], props.theme.palette["blue-600"], props.theme.palette["grey-050"], props.theme.palette["grey-100"], props.theme.palette["grey-700"], props.theme.palette["grey-050"], props.theme.palette.white, props.theme.palette["blue-600"], props.theme.palette.white, props.theme.palette["grey-600"], props.theme.palette["grey-600"], props.theme.palette["grey-050"], props.theme.palette["red-600"], props.theme.palette.white, props.theme.palette["green-600"], props.theme.palette.white, props.theme.palette["yellow-600"], props.theme.palette.white), (props) => props.loading && css(["> *:not(.btn-focus){opacity:0;visibility:hidden;}", "{opacity:1;visibility:visible;}"], Spinner), (props) => props.iconColor && css(["&.ant-btn:not(:disabled){color:", ";&:hover{color:inherit;}}"], props.theme.palette[`${props.iconColor}-600`]), (props) => props.mode === "split" && css(["&.ant-btn{padding-right:0;transition:0s;", "{position:relative;}", " > .ds-icon{margin:0 4px 0 15px;position:relative;&:before{content:'';background-color:", ";top:", ";height:", ";width:1px;left:-4px;position:absolute;transition:all 0.3s ease;}}}"], ButtonLabel, ButtonLabel, !splitTypes.includes(props.type) ? `rgba(255, 255, 255, 0.15);` : props.theme.palette["grey-300"], props.size === "large" ? "-12px" : "-4px", props.size === "large" ? "48px" : "32px"), (props) => props.mode === "two-icons" && css(["&.ant-btn{padding:0;transition:0s;", " > ", ":first-of-type,", " > .ds-icon:first-of-type,& > ", ":first-of-type,& > .ds-icon:first-of-type{margin:", ";}", " > ", ":nth-of-type(2),", " > .ds-icon:nth-of-type(2),& > ", ":nth-of-type(2),& > .ds-icon:nth-of-type(2){margin:", ";}}", "{margin:0 12px 0 0;}"], ButtonLabel, IconContainer, ButtonLabel, IconContainer, leftIcon, ButtonLabel, IconContainer, ButtonLabel, IconContainer, rightIcon, Tag), (props) => props.mode === "label-icon" && css(["&.ant-btn{padding-right:0;transition:0s;", " > ", ",", " > .ds-icon,& > ", ",& > .ds-icon{margin:", ";}}", "{margin:0 12px 0 0;}"], ButtonLabel, IconContainer, ButtonLabel, IconContainer, rightIcon, Tag), (props) => props.mode === "icon-label" && css(["&.ant-btn{padding-left:0;transition:0s;", " > ", ",", " > .ds-icon,& > ", ",& > .ds-icon{margin:", ";}}"], ButtonLabel, IconContainer, ButtonLabel, IconContainer, leftIcon), (props) => props.mode === "single-icon" && css(["&.ant-btn:not(.ds-expander){display:flex;align-items:center;justify-content:center;padding:0;transition:0s;width:32px;", " > ", ",", " > .ds-icon,& > ", ",& > .ds-icon{margin:0 4px 0 4px;}}"], ButtonLabel, IconContainer, ButtonLabel, IconContainer), (props) => props.mode === "single-icon" && props.size === "large" && css(["&.ant-btn{width:48px;}"]), (props) => props.groupVariant === "squared" && css(["&.ant-btn{border-radius:0;}"]), (props) => props.groupVariant === "left-rounded" && css(["&.ant-btn{border-radius:3px 0 0 3px;}"]), (props) => props.groupVariant === "right-rounded" && css(["&.ant-btn{border-radius:0 3px 3px 0;}"]), (props) => props.error && css(["&.ant-btn{background-color:", ";box-shadow:inset 0 0 0 1px ", ";color:", ";.btn-focus{box-shadow:none;}&&:hover:not(:disabled):not(:focus-visible):not(.pressed){background-color:", ";box-shadow:inset 0 0 0 1px ", ";color:", ";}&.pressed{background-color:", ";box-shadow:none;color:", ";}&&:focus-visible:not(.pressed){border:none !important;background-color:", ";color:", ";.btn-focus{box-shadow:inset 0 0 0 2px ", ";}}}", "{background-color:", ";}"], props.theme.palette[`red-100`], props.theme.palette["red-600"], props.theme.palette[`red-600`], props.theme.palette[`red-200`], props.theme.palette["red-600"], props.theme.palette[`red-600`], props.theme.palette[`red-700`], props.theme.palette.white, props.theme.palette[`red-100`], props.theme.palette[`red-600`], props.theme.palette["blue-600"], RippleEffect, props.theme.palette[`red-700`]), (props) => props.error && props.type === "secondary" && css(["&&.ant-btn{color:", ";.btn-focus{box-shadow:none;}&&:hover{background-color:", ";.btn-focus{box-shadow:none;}}&&:focus-visible:not(.pressed){.btn-focus{box-shadow:inset 0 0 0 2px ", ";}}&&.pressed{background-color:", ";color:", ";}", "{background-color:", ";}}"], props.theme.palette[`red-600`], props.theme.palette[`red-200`], props.theme.palette["blue-600"], props.theme.palette[`red-700`], props.theme.palette.white, RippleEffect, props.theme.palette[`red-700`]), (props) => props.type === "custom-color" && !props.error && css(["&.ant-btn{background-color:", ";border:0 solid transparent;color:", ";", "{box-shadow:inset 0 0 0 0px transparent;}", "{background-color:", ";}&:focus-visible:not(.read-only){", "{box-shadow:inset 0 0 0 2px ", ";}}&:hover:not(:disabled):not(:focus-visible):not(.pressed){background-color:", ";color:", ";}&.pressed{background-color:", ";color:", ";}&:disabled{opacity:0.4;background-color:", ";color:", ";}}"], props.theme.palette[`${props.customColor}-600`], props.theme.palette.white, ButtonFocus, RippleEffect, props.theme.palette[`${props.customColor}-700`], ButtonFocus, props.theme.palette["blue-600"], props.theme.palette[props.readOnly ? `${props.customColor}-600` : `${props.customColor}-500`], props.theme.palette.white, props.theme.palette[`${props.customColor}-700`], props.theme.palette.white, props.theme.palette[`${props.customColor}-600`], props.theme.palette.white), (props) => props.type === "custom-color-ghost" && !props.error && css(["&&{color:", ";&:hover:not(:disabled){color:", ";}&:disabled{opacity:0.4;color:", ";}}"], props.theme.palette[`${props.customColor}-600`], props.theme.palette[`${props.customColor}-600`], props.theme.palette[`${props.customColor}-600`]), (props) => props.readOnly && props.type === "custom-color-ghost" && css(["&&.ant-btn{cursor:default;transition:none;}&&.ant-btn-custom-color-ghost{&:hover,&:focus-visible{background:", ";.btn-focus{box-shadow:inset 0 0 0 0 ", ";}color:", ";}}"], props.theme.palette.white, props.theme.palette.white, props.theme.palette[`${props.customColor}-600`]), Tag, (props) => props.theme.palette.white);
 export {
-  AntdButton,
+  ACTIVE_DELAY,
   ButtonFocus,
   ButtonLabel,
   RIPPLE_ANIMATION_TIME,
   RippleEffect,
   Spinner,
+  StyledButton,
   Tag
 };

package/dist/Button.types.d.ts

@@ -1,32 +1,25 @@
-import { ButtonProps as AntdButtonProps } from 'antd';
-import { JustifyContentProperty } from 'csstype';
-import { ForwardRefExoticComponent, MouseEvent, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, MouseEvent, ReactNode, RefAttributes } from 'react';
 import { StyledComponent } from 'styled-components';
 import { TagProps } from '@synerise/ds-tag';
 import { TooltipProps } from '@synerise/ds-tooltip';
 import { LiteralStringUnion } from '@synerise/ds-utils';
-export declare enum ButtonMode {
-    SINGLE_ICON = "single-icon",
-    SPLIT = "split",
-    TWO_ICONS = "two-icons",
-    LABEL_ICON = "label-icon",
-    ICON_LABEL = "icon-label"
-}
-type ButtonModes = `${ButtonMode}`;
-export type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'tertiary-white' | 'ghost-primary' | 'ghost' | 'ghost-white' | 'custom-color' | 'custom-color-ghost';
-export type ButtonProps = Omit<AntdButtonProps, 'type' | 'ghost'> & {
+import { BaseButtonProps } from './BaseButton.types';
+export declare const ButtonMode: Record<string, ButtonMode>;
+export type ButtonMode = 'single-icon' | 'split' | 'two-icons' | 'label-icon' | 'icon-label';
+export type ButtonType = LiteralStringUnion<'primary' | 'secondary' | 'tertiary' | 'tertiary-white' | 'ghost-primary' | 'ghost' | 'ghost-white' | 'custom-color' | 'custom-color-ghost' | 'danger' | 'success' | 'warning'>;
+export type ButtonProps = Omit<BaseButtonProps, 'type'> & {
     /**
      * Defines the type of the button. It affects the button color
      *
      * @default secondary
      */
-    type?: LiteralStringUnion<ButtonType>;
+    type?: ButtonType;
     /**
      * Defines the type of the button content. It affects content inside the button
      *
      * @default simple
      */
-    mode?: LiteralStringUnion<ButtonModes>;
+    mode?: LiteralStringUnion<ButtonMode>;
     /**
      * Defines color of `custom-color` button.
      *
@@ -37,10 +30,6 @@ export type ButtonProps = Omit<AntdButtonProps, 'type' | 'ghost'> & {
      * Defines shape of the button.
      */
     groupVariant?: LiteralStringUnion<'left-rounded' | 'squared' | 'right-rounded'>;
-    /**
-     * Defines justify of content in button.
-     */
-    justifyContent?: JustifyContentProperty;
     /**
      * Set the loading status of button
      * @default false
@@ -48,17 +37,26 @@ export type ButtonProps = Omit<AntdButtonProps, 'type' | 'ghost'> & {
     loading?: boolean | {
         delay?: number;
     };
+    /**
+     * Icon element rendered inside the button label.
+     * Placed before text in `icon-label` / `single-icon` modes, after text in `label-icon` mode.
+     */
+    icon?: ReactNode;
     /**
      * Sets the handler to handle `click` event
      */
     onClick?: (event: MouseEvent<HTMLElement>) => void;
+    /** Overrides the icon color on secondary, tertiary, and ghost variants */
     iconColor?: LiteralStringUnion<'blue' | 'grey' | 'red' | 'green' | 'yellow' | 'pink' | 'mars' | 'orange' | 'fern' | 'cyan' | 'purple' | 'violet'>;
+    /** Applies red error styling to the button */
     error?: boolean;
+    /** Disables hover and focus visual changes while keeping the button visually enabled */
     readOnly?: boolean;
+    /** Renders a pill tag after the button label */
     tagProps?: TagProps;
+    /** Wraps the button label in a tooltip */
     tooltipProps?: TooltipProps;
 };
 /** @deprecated - use ButtonProps instead */
 export type Props = ButtonProps;
 export type StyledButton<CustomProps extends object = object> = StyledComponent<ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>, object, CustomProps, never>;
-export {};

package/dist/Button.types.js

@@ -1,11 +1,10 @@
-var ButtonMode = /* @__PURE__ */ ((ButtonMode2) => {
-  ButtonMode2["SINGLE_ICON"] = "single-icon";
-  ButtonMode2["SPLIT"] = "split";
-  ButtonMode2["TWO_ICONS"] = "two-icons";
-  ButtonMode2["LABEL_ICON"] = "label-icon";
-  ButtonMode2["ICON_LABEL"] = "icon-label";
-  return ButtonMode2;
-})(ButtonMode || {});
+const ButtonMode = {
+  SINGLE_ICON: "single-icon",
+  SPLIT: "split",
+  TWO_ICONS: "two-icons",
+  LABEL_ICON: "label-icon",
+  ICON_LABEL: "icon-label"
+};
 export {
   ButtonMode
 };

package/dist/Button.variants.d.ts

@@ -0,0 +1,16 @@
+import { FlattenSimpleInterpolation } from 'styled-components';
+/**
+ * Button variant styles — direct port of button.mixin.less to styled-components.
+ *
+ * Icons use currentColor for fill/stroke and inherit the button's color property,
+ * so we only set `color` on the button — no direct svg fill/color overrides needed.
+ */
+type Palette = {
+    [key: string]: string;
+};
+/**
+ * Returns the variant-specific CSS for a given button type.
+ * Falls back to the default/secondary variant for unknown types.
+ */
+export declare const getVariantStyles: (type: string | undefined, palette: Palette) => FlattenSimpleInterpolation;
+export {};