@synerise/ds-button 1.4.16 → 1.5.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.5.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@1.4.16...@synerise/ds-button@1.5.0) (2025-11-06)
+
+
+### Features
+
+* **dropdown:** dropdownMenu component ([f0ec827](https://github.com/synerise/synerise-design/commit/f0ec82792cdcb021fa9a454912f6e7a892e53895))
+
+
+
+
+
 ## [1.4.16](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@1.4.15...@synerise/ds-button@1.4.16) (2025-10-22)
 
 

package/README.md

@@ -113,7 +113,7 @@ It behaves like checkbox input due to `role="checkbox"` and `aria-checked` attri
 
 ### Props
 
-It inherits all `Button`'s props excluding `type`, `block`, `color`, `groupVariant`, `icon`, `iconColor`, `leftIconSize`, `mode`, `rightIconSize`, `size`, `onChange`.
+It inherits all `Button`'s props excluding `type`, `block`, `color`, `groupVariant`, `icon`, `iconColor`, `mode`, `size`, `onChange`.
 
 | Property       | Description                                                | Type                         | Default     |
 | -------------- | ---------------------------------------------------------- | ---------------------------- | ----------- |

package/dist/Button.d.ts

@@ -1,6 +1,27 @@
-import React from 'react';
+import React, { type MouseEvent } from 'react';
 import '@synerise/ds-core/dist/js/style';
-import { type ButtonProps } from './Button.types';
 import './style/index.less';
-declare const Button: ({ type, mode, justifyContent, groupVariant, loading, onClick, className, color, error, tagProps, children, tooltipProps, ...antdProps }: ButtonProps) => React.JSX.Element;
+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">;
+    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">;
+    error?: boolean;
+    readOnly?: boolean;
+    tagProps?: import("@synerise/ds-tag").TagProps;
+    tooltipProps?: import("@synerise/ds-tooltip").TooltipProps;
+} & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/Button.js

@@ -1,7 +1,7 @@
 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, { useEffect, useMemo, useRef, useState } from 'react';
+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';
@@ -10,7 +10,7 @@ import * as S from './Button.styles';
 import { ButtonMode } from './Button.types';
 import "./style/index.css";
 var RIPPLE_ANIMATION_OFFSET = 50;
-var Button = function Button(_ref) {
+var Button = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   var _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'secondary' : _ref$type,
     mode = _ref.mode,
@@ -67,6 +67,7 @@ var Button = function Button(_ref) {
   }, [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"
@@ -77,6 +78,7 @@ var Button = function Button(_ref) {
     return tooltipProps ? /*#__PURE__*/React.createElement(Tooltip, tooltipProps, label) : label;
   }, [children, tagProps, mode, tooltipProps]);
   return /*#__PURE__*/React.createElement(S.AntdButton, _extends({
+    ref: forwardedRef,
     justifyContent: justifyContent,
     type: type || 'secondary',
     mode: mode,
@@ -104,5 +106,5 @@ var Button = function Button(_ref) {
   })), /*#__PURE__*/React.createElement(S.ButtonFocus, {
     className: "btn-focus"
   }));
-};
+});
 export default Button;

package/dist/Button.styles.d.ts

@@ -1,10 +1,41 @@
 import React from 'react';
+import { type 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<({ id, name, className, disabled, removable, image, shape, color, textColor, onRemove, onClick, prefixel, suffixel, texts, asPill, dashed, tooltipProps, ...htmlAttributes }: import("@synerise/ds-tag").TagProps) => React.JSX.Element, 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;
+    removable?: boolean;
+    className?: string;
+    disabled?: boolean;
+    onClick?: () => void;
+    onRemove?: (tag: string | number) => void;
+    prefixel?: React.ReactNode;
+    suffixel?: React.ReactNode;
+    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, {
     withTooltip?: boolean;
 }, never>;
-export declare const AntdButton: import("styled-components").StyledComponent<({ mode, type, loading, justifyContent, groupVariant, customColor, rightIconSize, leftIconSize, pressed, size, iconColor, error, ...rest }: any) => React.JSX.Element, any, {}, 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;
+    readOnly?: boolean;
+    type: string;
+} & React.RefAttributes<HTMLButtonElement>>, any, {}, never>;

package/dist/Button.styles.js

@@ -1,8 +1,8 @@
-var _excluded = ["mode", "type", "loading", "justifyContent", "groupVariant", "customColor", "rightIconSize", "leftIconSize", "pressed", "size", "iconColor", "error"];
+var _excluded = ["mode", "type", "loading", "justifyContent", "groupVariant", "customColor", "pressed", "size", "iconColor", "error"];
 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 Button from 'antd/lib/button';
-import React from 'react';
+import React, { forwardRef } from 'react';
 import styled, { css, keyframes } from 'styled-components';
 import { IconContainer } from '@synerise/ds-icon';
 import DSTag from '@synerise/ds-tag';
@@ -39,25 +39,26 @@ export var ButtonLabel = styled.div.withConfig({
 })(["display:flex;align-items:center;flex-grow:1;min-width:0;justify-content:center;", ""], function (props) {
   return props.withTooltip && "\n    && {\n      pointer-events: all;\n    }";
 });
-export var AntdButton = styled(function (_ref) {
+export var AntdButton = styled(/*#__PURE__*/forwardRef(function (_ref, ref) {
   var mode = _ref.mode,
     type = _ref.type,
     loading = _ref.loading,
     justifyContent = _ref.justifyContent,
     groupVariant = _ref.groupVariant,
     customColor = _ref.customColor,
-    rightIconSize = _ref.rightIconSize,
-    leftIconSize = _ref.leftIconSize,
     pressed = _ref.pressed,
     size = _ref.size,
     iconColor = _ref.iconColor,
     error = _ref.error,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/React.createElement(Button, _extends({
+    ref: ref
+    // @ts-expect-error type type mismatch
+    ,
     type: type === 'custom-color-ghost' ? 'ghost-primary' : type,
     size: size
   }, rest));
-}).withConfig({
+})).withConfig({
   displayName: "Buttonstyles__AntdButton",
   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;}}}"], function (props) {

package/dist/Button.types.d.ts

@@ -1,6 +1,6 @@
 import type { ButtonProps as AntdButtonProps } from 'antd/lib/button';
 import type { JustifyContentProperty } from 'csstype';
-import type { ElementType, MouseEvent } from 'react';
+import type { MouseEvent } from 'react';
 import type { TagProps } from '@synerise/ds-tag';
 import type { TooltipProps } from '@synerise/ds-tooltip';
 import type { LiteralStringUnion } from '@synerise/ds-utils';
@@ -57,9 +57,6 @@ export type ButtonProps = Omit<AntdButtonProps, 'type' | 'ghost'> & {
     tagProps?: TagProps;
     tooltipProps?: TooltipProps;
 };
+/** @deprecated - use ButtonProps instead */
 export type Props = ButtonProps;
-export type ButtonSubComponents = {
-    Expander: ElementType;
-    Creator: ElementType;
-};
 export {};

package/dist/Button.types.js

@@ -7,4 +7,4 @@ export var ButtonMode = /*#__PURE__*/function (ButtonMode) {
   return ButtonMode;
 }({});
 
-// @deprecated - use ButtonProps instead
+/** @deprecated - use ButtonProps instead */

package/dist/Checkbox/Checkbox.types.d.ts

@@ -1,5 +1,5 @@
 import { type Props as ButtonProps } from '../Button.types';
-type ButtonPropsOmitted = Omit<ButtonProps, 'type' | 'block' | 'color' | 'groupVariant' | 'icon' | 'iconColor' | 'leftIconSize' | 'mode' | 'rightIconSize' | 'size' | 'onChange'>;
+type ButtonPropsOmitted = Omit<ButtonProps, 'type' | 'block' | 'color' | 'groupVariant' | 'icon' | 'iconColor' | 'mode' | 'size' | 'onChange'>;
 export type CheckboxButtonProps = ButtonPropsOmitted & {
     checked?: boolean;
     defaultChecked?: boolean;

package/dist/Creator/Creator.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type CreatorProps } from './Creator.types';
-declare const Creator: ({ onClick, disabled, label, block, status, className, labelAlign, ...htmlAttributes }: CreatorProps) => React.JSX.Element;
+declare const Creator: React.ForwardRefExoticComponent<Omit<CreatorProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default Creator;

package/dist/Creator/Creator.js

@@ -2,10 +2,10 @@ var _excluded = ["onClick", "disabled", "label", "block", "status", "className",
 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 classnames from 'classnames';
-import React, { useCallback, useState } from 'react';
+import React, { forwardRef, useCallback, useState } from 'react';
 import Icon, { AddM } from '@synerise/ds-icon';
 import * as S from './Creator.styles';
-var Creator = function Creator(_ref) {
+var Creator = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var onClick = _ref.onClick,
     disabled = _ref.disabled,
     label = _ref.label,
@@ -25,6 +25,7 @@ var Creator = function Creator(_ref) {
     setPressed(false);
   }, []);
   return /*#__PURE__*/React.createElement(S.Creator, _extends({
+    ref: ref,
     block: block,
     labelAlign: labelAlign,
     className: classnames([className, 'ds-button-creator']),
@@ -41,5 +42,5 @@ var Creator = function Creator(_ref) {
   }), label && /*#__PURE__*/React.createElement(S.CreatorLabel, {
     "data-testid": "ds-add-button-label"
   }, label)));
-};
+});
 export default Creator;

package/dist/Creator/Creator.styles.d.ts

@@ -1,7 +1,32 @@
 import React from 'react';
 export declare const CreatorLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const Creator: import("styled-components").StyledComponent<({ status, pressed, withLabel, ...rest }: any) => React.JSX.Element, any, {
+type StyledCreatorProps = {
     withLabel: boolean;
     pressed: boolean;
-    status: string;
-}, never>;
+    status?: string;
+    labelAlign: 'left' | 'center';
+};
+export declare const Creator: 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">>, "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;
+    loading?: boolean | {
+        delay?: number;
+    };
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    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;
+} & StyledCreatorProps & React.RefAttributes<HTMLButtonElement>>, any, StyledCreatorProps, never>;
+export {};

package/dist/Creator/Creator.styles.js

@@ -1,6 +1,7 @@
 var _excluded = ["status", "pressed", "withLabel"];
+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 from 'react';
+import React, { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { IconContainer } from '@synerise/ds-icon';
 import { hexToRgba } from '@synerise/ds-utils';
@@ -21,13 +22,15 @@ var uploadStyles = function uploadStyles(_ref2) {
   var theme = _ref2.theme;
   return css(["&{border:1px dashed ", ";background-color:", ";", "{svg{transition:all 0.3s ease;fill:", ";}}&:hover:not(:disabled){", "{svg{fill:", " !important;}}", "{color:", ";}}", "{color:", ";}&:hover:not(:disabled):not(:focus){border:1px dashed ", ";background-color:", ";}&:focus:active{border:1px dashed ", ";background-color:", ";box-shadow:none;}&:focus{border:1px dashed ", ";box-shadow:none;}&:disabled{", "{margin:12px;svg{transition:all 0.3s ease;color:", ";fill:", ";}}", "{color:", ";}}}"], theme.palette['blue-300'], theme.palette['blue-050'], IconContainer, theme.palette['blue-500'], IconContainer, theme.palette['blue-500'], CreatorLabel, theme.palette['blue-500'], CreatorLabel, theme.palette['blue-500'], theme.palette['blue-300'], theme.palette['blue-050'], theme.palette['blue-600'], theme.palette['blue-050'], theme.palette['blue-600'], IconContainer, theme.palette['grey-500'], theme.palette['grey-500'], CreatorLabel, theme.palette['grey-500']);
 };
-export var Creator = styled(function (_ref3) {
+export var Creator = styled(/*#__PURE__*/forwardRef(function (_ref3, ref) {
   var status = _ref3.status,
     pressed = _ref3.pressed,
     withLabel = _ref3.withLabel,
     rest = _objectWithoutPropertiesLoose(_ref3, _excluded);
-  return /*#__PURE__*/React.createElement(Button, rest);
-}).withConfig({
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    ref: ref
+  }, rest));
+})).withConfig({
   displayName: "Creatorstyles__Creator",
   componentId: "sc-1w96u6h-1"
 })(["&&&{width:", ";opacity:", ";height:48px;padding:", ";border-radius:3px;border:1px dashed ", ";background:transparent;transition:all 0.3s ease;justify-content:", ";align-items:center;&.ant-btn{& .ds-button-label{justify-content:", ";}}&.ant-btn > span{display:flex;align-items:center;}", "{margin:auto 12px;svg{transition:all 0.3s ease;color:", ";fill:", ";}}", "{background-color:", ";}", "{display:none;}&:hover:not(:disabled){", "{svg{color:", " !important;fill:", " !important;}}", "{color:", ";}}&:hover:not(:disabled):not(:focus){border:1px dashed ", ";background-color:", ";}", " &:focus:active{border:1px dashed ", " !important;box-shadow:none;background-color:", ";}&:focus{border:1px dashed ", ";box-shadow:none;}&:disabled{border-color:", ";background-color:", ";}", " ", "}"], function (props) {

package/dist/Creator/Creator.types.d.ts

@@ -1,4 +1,4 @@
-import type { MouseEvent, ReactNode } from 'react';
+import type { MouseEvent, ReactNode, RefObject } from 'react';
 import type { WithHTMLAttributes } from '@synerise/ds-utils';
 export declare enum CreatorStatus {
     Default = "default",
@@ -13,4 +13,5 @@ export type CreatorProps = WithHTMLAttributes<HTMLButtonElement, {
     labelAlign?: 'left' | 'center';
     status?: CreatorStatus;
     className?: string;
+    ref?: RefObject<HTMLDivElement>;
 }>;

package/dist/Star/Star.types.d.ts

@@ -1,5 +1,5 @@
 import { type Props as ButtonProps } from '../Button.types';
-type ButtonPropsOmitted = Omit<ButtonProps, 'type' | 'block' | 'color' | 'groupVariant' | 'icon' | 'iconColor' | 'leftIconSize' | 'mode' | 'rightIconSize' | 'size' | 'onChange'>;
+type ButtonPropsOmitted = Omit<ButtonProps, 'type' | 'block' | 'color' | 'groupVariant' | 'icon' | 'iconColor' | 'mode' | 'size' | 'onChange'>;
 export type StarButtonProps = ButtonPropsOmitted & {
     active?: boolean;
     hasError?: boolean;

package/dist/index.d.ts

@@ -1,18 +1,14 @@
-import React from 'react';
 import * as MainButtonStyles from './Button.styles';
 import { type Props } from './Button.types';
+import CheckboxButton from './Checkbox/Checkbox';
 import * as CheckboxStyles from './Checkbox/Checkbox.styles';
+import Creator from './Creator/Creator';
 import * as CreatorStyles from './Creator/Creator.styles';
+import Expander from './Expander/Expander';
 import * as ExpanderStyles from './Expander/Expander.styles';
+import StarButton from './Star/Star';
 import * as StarStyles from './Star/Star.styles';
-declare class Button extends React.Component<Props> {
-    static readonly Checkbox: (props: import("./Checkbox/Checkbox.types").CheckboxButtonProps) => React.ReactElement;
-    static readonly Creator: ({ onClick, disabled, label, block, status, className, labelAlign, ...htmlAttributes }: import("./Creator/Creator.types").CreatorProps) => React.JSX.Element;
-    static readonly Expander: ({ size, expanded, disabled, onClick, className, }: import("./Expander/Expander.types").ExpanderProps) => React.JSX.Element;
-    static readonly Star: (props: import("./Star/Star.types").StarButtonProps) => React.ReactElement;
-    render(): React.JSX.Element;
-}
-export default Button;
+export { Expander, Creator, StarButton as Star, CheckboxButton as Checkbox };
 export { default as ButtonToggle } from './ButtonToggle/ButtonToggle';
 export type { ButtonToggleProps } from './ButtonToggle/ButtonToggle.types';
 export { type CreatorProps, CreatorStatus } from './Creator/Creator.types';
@@ -27,3 +23,36 @@ export declare const ButtonStyles: {
     Expander: typeof ExpanderStyles;
     Star: typeof StarStyles;
 };
+declare const _default: import("react").ForwardRefExoticComponent<Omit<Partial<{
+    href: string;
+    target?: string;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+} & import("antd/lib/button/button").BaseButtonProps & Omit<import("react").AnchorHTMLAttributes<any>, "type" | "onClick"> & {
+    htmlType?: import("antd/lib/button/button").ButtonHTMLType;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+} & Omit<import("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;
+    loading?: boolean | {
+        delay?: number;
+    };
+    onClick?: (event: import("react").MouseEvent<HTMLElement>) => void;
+    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;
+} & import("react").RefAttributes<HTMLButtonElement>> & {
+    /** @deprecated - use named export `Creator` */
+    Creator: import("react").ForwardRefExoticComponent<Omit<import("./Creator/Creator.types").CreatorProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    /** @deprecated - use named export `Expander` */
+    Expander: ({ size, expanded, disabled, onClick, className, }: import("./Expander/Expander.types").ExpanderProps) => import("react").JSX.Element;
+    /** @deprecated - use named export `Star` */
+    Star: (props: import("./Star/Star.types").StarButtonProps) => React.ReactElement;
+    /** @deprecated - use named export `Checkbox` */
+    Checkbox: (props: import("./Checkbox/Checkbox.types").CheckboxButtonProps) => React.ReactElement;
+};
+export default _default;

package/dist/index.js

@@ -1,7 +1,4 @@
-function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
-function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
-import React from 'react';
-import MainButton from './Button';
+import Button from './Button';
 import * as MainButtonStyles from './Button.styles';
 import CheckboxButton from './Checkbox/Checkbox';
 import * as CheckboxStyles from './Checkbox/Checkbox.styles';
@@ -11,22 +8,7 @@ import Expander from './Expander/Expander';
 import * as ExpanderStyles from './Expander/Expander.styles';
 import StarButton from './Star/Star';
 import * as StarStyles from './Star/Star.styles';
-var Button = /*#__PURE__*/function (_React$Component) {
-  function Button() {
-    return _React$Component.apply(this, arguments) || this;
-  }
-  _inheritsLoose(Button, _React$Component);
-  var _proto = Button.prototype;
-  _proto.render = function render() {
-    return /*#__PURE__*/React.createElement(MainButton, this.props);
-  };
-  return Button;
-}(React.Component);
-Button.Checkbox = CheckboxButton;
-Button.Creator = Creator;
-Button.Expander = Expander;
-Button.Star = StarButton;
-export default Button;
+export { Expander, Creator, StarButton as Star, CheckboxButton as Checkbox };
 export { default as ButtonToggle } from './ButtonToggle/ButtonToggle';
 export { CreatorStatus } from './Creator/Creator.types';
 export { ExpanderSize } from './Expander/Expander.types';
@@ -36,4 +18,15 @@ export var ButtonStyles = {
   Checkbox: CheckboxStyles,
   Expander: ExpanderStyles,
   Star: StarStyles
-};
+};
+var staticComponents = {
+  /** @deprecated - use named export `Creator` */
+  Creator: Creator,
+  /** @deprecated - use named export `Expander` */
+  Expander: Expander,
+  /** @deprecated - use named export `Star` */
+  Star: StarButton,
+  /** @deprecated - use named export `Checkbox` */
+  Checkbox: CheckboxButton
+};
+export default Object.assign(Button, staticComponents);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-button",
-  "version": "1.4.16",
+  "version": "1.5.0",
   "description": "Button UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -35,9 +35,9 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^1.7.3",
-    "@synerise/ds-tag": "^1.3.3",
-    "@synerise/ds-tooltip": "^1.2.1",
+    "@synerise/ds-icon": "^1.8.0",
+    "@synerise/ds-tag": "^1.4.0",
+    "@synerise/ds-tooltip": "^1.3.0",
     "@synerise/ds-utils": "^1.5.0",
     "classnames": "^2.5.1",
     "csstype": "^2.6.9"
@@ -48,5 +48,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "a40fca2cc78eda64afa96d18dc4d177538a22404"
+  "gitHead": "cbbb7d9f155735bcc4035d8fd8a7813878d6e051"
 }