@synerise/ds-button 2.0.3 → 2.1.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.1.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@2.0.4...@synerise/ds-button@2.1.0) (2026-09-22)
+
+
+### Bug Fixes
+
+* **core:** move test helpers to a ./testing subpath export ([b38cd82](https://github.com/synerise/synerise-design/commit/b38cd82c956111d2331d5c1e0efd1935366f1139))
+
+
+### Features
+
+* add @synerise/ds-condition-blocks — building blocks for filtering-condition layouts ([ed332ce](https://github.com/synerise/synerise-design/commit/ed332cefddd418a293a73c51c57e9a4c1ed4f22f))
+
+
+
+
+
+## [2.0.4](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@2.0.3...@synerise/ds-button@2.0.4) (2026-09-18)
+
+**Note:** Version bump only for package @synerise/ds-button
+
+
+
+
+
 ## [2.0.3](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@2.0.2...@synerise/ds-button@2.0.3) (2026-09-16)
 
 **Note:** Version bump only for package @synerise/ds-button

package/dist/BaseButton.js

@@ -77,7 +77,7 @@ const BaseButton = forwardRef(({
       download
     };
     return (
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      // biome-ignore lint/suspicious/noExplicitAny: upstream type is not expressible here
       /* @__PURE__ */ jsx(Button, { ...anchorProps, children: wrapChildren(children) })
     );
   }

package/dist/BaseButton.styles.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-const dsProps = /* @__PURE__ */ new Set(["mode", "justifyContent", "groupVariant", "customColor", "pressed", "iconColor", "error", "readOnly", "expanderSize", "expanded", "htmlType", "loading"]);
+const dsProps = /* @__PURE__ */ new Set(["mode", "justifyContent", "groupVariant", "customColor", "pressed", "iconColor", "error", "readOnly", "expanderSize", "expanded", "htmlType", "loading", "fluidMinWidth"]);
 const Button = /* @__PURE__ */ styled.button.withConfig({
   shouldForwardProp: (prop) => !dsProps.has(prop)
 }).withConfig({

package/dist/Button.d.ts

@@ -15,5 +15,6 @@ declare const Button: React.ForwardRefExoticComponent<Omit<import('./BaseButton.
     readOnly?: boolean;
     tagProps?: import('@synerise/ds-tag').TagProps;
     tooltipProps?: import('@synerise/ds-tooltip').TooltipProps;
+    fluidMinWidth?: string | number;
 } & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/Button.styles.d.ts

@@ -37,6 +37,7 @@ type StyledButtonProps = {
     loading?: boolean | {
         delay?: number;
     };
+    fluidMinWidth?: string | 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;

package/dist/Button.styles.js

@@ -1,6 +1,7 @@
 import styled, { css, keyframes } from "styled-components";
 import { IconContainer } from "@synerise/ds-icon";
 import DSTag from "@synerise/ds-tag";
+import { toCssSize } from "@synerise/ds-utils";
 import BaseButton from "./BaseButton.js";
 import { getVariantStyles } from "./Button.variants.js";
 const RIPPLE_ANIMATION_TIME = 500;
@@ -38,7 +39,7 @@ const ButtonLabel = /* @__PURE__ */ styled.div.withConfig({
 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;", " > *: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, (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);
+})(["&&{", " -webkit-mask-image:-webkit-radial-gradient(white,black);display:inline-flex;align-items:center;padding:0 12px;position:relative;overflow:hidden;", " > *: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, (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, (props) => props.fluidMinWidth !== void 0 && css(["", "{min-width:", ";max-width:none;}"], ButtonLabel, toCssSize(props.fluidMinWidth)));
 export {
   ACTIVE_DELAY,
   ButtonFocus,

package/dist/Button.types.d.ts

@@ -56,6 +56,12 @@ export type ButtonProps = Omit<BaseButtonProps, 'type'> & {
     tagProps?: TagProps;
     /** Wraps the button label in a tooltip */
     tooltipProps?: TooltipProps;
+    /**
+     * Lets the label stretch instead of clipping at a fixed max-width, floored at this min width
+     * (a number is treated as px). For buttons whose label must grow to fill the available space
+     * (e.g. filter parameter buttons) while never collapsing below this width.
+     */
+    fluidMinWidth?: string | number;
 };
 /** @deprecated - use ButtonProps instead */
 export type Props = ButtonProps;

package/dist/index.d.ts

@@ -7,14 +7,14 @@ import * as CheckboxStyles from './Checkbox/Checkbox.styles';
 import * as CreatorStyles from './Creator/Creator.styles';
 import * as ExpanderStyles from './Expander/Expander.styles';
 import * as StarStyles from './Star/Star.styles';
-export { Expander, Creator, StarButton as Star, CheckboxButton as Checkbox };
+export type { ButtonProps, ButtonType, StyledButton } from './Button.types';
 export { default as ButtonToggle } from './ButtonToggle/ButtonToggle';
 export type { ButtonToggleProps } from './ButtonToggle/ButtonToggle.types';
+export type { CheckboxButtonProps } from './Checkbox/Checkbox.types';
 export { type CreatorProps, CreatorStatus } from './Creator/Creator.types';
+export { type ExpanderProps, ExpanderSize } from './Expander/Expander.types';
 export type { StarButtonProps } from './Star/Star.types';
-export type { CheckboxButtonProps } from './Checkbox/Checkbox.types';
-export { ExpanderSize, type ExpanderProps } from './Expander/Expander.types';
-export type { ButtonProps, ButtonType, StyledButton } from './Button.types';
+export { CheckboxButton as Checkbox, Creator, Expander, StarButton as Star };
 export declare const ButtonStyles: {
     Button: typeof MainButtonStyles;
     Creator: typeof CreatorStyles;
@@ -37,6 +37,7 @@ declare const _default: import('react').ForwardRefExoticComponent<Omit<import('.
     readOnly?: boolean;
     tagProps?: import('@synerise/ds-tag').TagProps;
     tooltipProps?: import('@synerise/ds-tooltip').TooltipProps;
+    fluidMinWidth?: string | number;
 } & import('react').RefAttributes<HTMLButtonElement>> & {
     /** @deprecated - use named export `Creator` */
     Creator: import('react').ForwardRefExoticComponent<Omit<import('./Creator/Creator.types').CreatorProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-button",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "description": "Button UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -39,10 +39,10 @@
   "sideEffects": false,
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^2.1.1",
-    "@synerise/ds-tag": "^2.0.3",
-    "@synerise/ds-tooltip": "^2.0.3",
-    "@synerise/ds-utils": "^2.1.0",
+    "@synerise/ds-icon": "^2.1.3",
+    "@synerise/ds-tag": "^2.0.5",
+    "@synerise/ds-tooltip": "^2.0.5",
+    "@synerise/ds-utils": "^2.2.0",
     "classnames": "^2.5.1",
     "csstype": "^2.6.9"
   },
@@ -52,5 +52,5 @@
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "71f08fdaba8e7b80731e29a03883dc6a33f2b9db"
+  "gitHead": "5e795fa4fd23f6b07277edb517a84bb9b5b6d256"
 }