@versini/ui-button 12.0.4 → 12.1.0

package/dist/{287.js → 188.js}

@@ -1,11 +1,12 @@
 /*!
-  @versini/ui-button v12.0.4
+  @versini/ui-button v12.1.0
   © 2026 gizmette.com
 */
 
 import clsx from "clsx";
 
 
+
 const BUTTON_CLASSNAME = "av-button";
 
 
@@ -188,12 +189,17 @@ const getButtonTextCopyClasses = ({ mode, noBackground, truncate, variant })=>{
         return clsx(NOT_PLUME, TEXT_COPY_LIGHTER, truncateClass);
     }
 /* v8 ignore stop */ };
-const getButtonBackgroundClasses = ({ mode, noBackground, variant })=>{
+// Aqua-style split background overlay:
+// - Top half: flat white overlay (light, uniform)
+// - Bottom half: starts darker, gradually lightens toward the bottom edge
+const BG_SPLIT_OVERLAY = "bg-[linear-gradient(to_bottom,oklch(1_0_0/0.2)_50%,oklch(0_0_0/0.1)_50%,oklch(1_0_0/0.05)_100%)]";
+const getButtonBackgroundClasses = ({ mode, noBackground, variant, splitBackground })=>{
     if (noBackground) {
         return;
     }
+    const splitClass = splitBackground ? BG_SPLIT_OVERLAY : "";
     if (isPrimary(variant)) {
-        return clsx({
+        return clsx(splitClass, {
             [BG_ACTION_LIGHT]: isLight(mode),
             [BG_ACTION_DARK]: isDark(mode),
             [BG_LIGHT_DARK_DARK]: isSystem(mode),
@@ -201,7 +207,7 @@ const getButtonBackgroundClasses = ({ mode, noBackground, variant })=>{
         });
     }
     if (isSecondary(variant)) {
-        return clsx({
+        return clsx(splitClass, {
             [BG_ACTION_DARK]: isLight(mode),
             [BG_ACTION_LIGHT]: isDark(mode),
             [BG_DARK_DARK_LIGHT]: isSystem(mode),
@@ -209,7 +215,7 @@ const getButtonBackgroundClasses = ({ mode, noBackground, variant })=>{
         });
     }
     if (isDanger(variant)) {
-        return clsx({
+        return clsx(splitClass, {
             [BG_DANGER_DARK]: isDark(mode),
             [BG_DANGER_LIGHT]: isLight(mode),
             [BG_DANGER_DARK_DARK_LIGHT]: isSystem(mode),
@@ -217,7 +223,7 @@ const getButtonBackgroundClasses = ({ mode, noBackground, variant })=>{
         });
     }
     /* v8 ignore start - selected variant edge case */ if (isSelected(variant)) {
-        return "bg-action-selected-dark";
+        return clsx(splitClass, "bg-action-selected-dark");
     }
 /* v8 ignore stop */ };
 const getButtonRadiusClasses = ({ radius })=>{
@@ -412,7 +418,7 @@ const getBadgeClasses = ({ size, badge })=>{
         displayValue
     };
 };
-const getButtonClasses = ({ type, className, raw, mode, focusMode, disabled, fullWidth, size, noBorder, labelRight, labelLeft, noBackground, variant, truncate, align, radius, animated, badge })=>{
+const getButtonClasses = ({ type, className, raw, mode, focusMode, disabled, fullWidth, size, noBorder, labelRight, labelLeft, noBackground, variant, truncate, align, radius, animated, badge, splitBackground })=>{
     if (!variant) {
         variant = "primary";
     }
@@ -425,7 +431,8 @@ const getButtonClasses = ({ type, className, raw, mode, focusMode, disabled, ful
     }), getButtonBackgroundClasses({
         mode,
         noBackground,
-        variant
+        variant,
+        splitBackground
     }), getButtonRadiusClasses({
         radius
     }), getButtonSizesClasses({
@@ -464,4 +471,5 @@ const getButtonClasses = ({ type, className, raw, mode, focusMode, disabled, ful
     }), className);
 };
 
-export { TYPE_BUTTON, TYPE_ICON, TYPE_LINK, getBadgeClasses, getButtonClasses, getButtonIconLabelClasses, getIconClasses };
+export { TYPE_BUTTON, TYPE_ICON, TYPE_LINK, clsx, getBadgeClasses, getButtonClasses, getButtonIconLabelClasses, getIconClasses };
+export { jsx, jsxs } from "react/jsx-runtime";

package/dist/370.js

@@ -0,0 +1,220 @@
+/*!
+  @versini/ui-button v12.1.0
+  © 2026 gizmette.com
+*/
+
+import { useMergeRefs } from "@versini/ui-hooks/use-merge-refs";
+import { useResizeObserver } from "@versini/ui-hooks/use-resize-observer";
+import { jsxs, getButtonClasses, getIconClasses, getButtonIconLabelClasses, TYPE_ICON, getBadgeClasses, jsx } from "./188.js";
+import { useLayoutEffect, useRef, useEffect, BaseButton_private } from "./795.js";
+
+
+
+
+
+
+
+
+
+const WIDTH = {
+    small: 24,
+    medium: 32,
+    large: 48
+};
+const PADDINGS = {
+    small: 8 * 2,
+    medium: 12 * 2,
+    large: 16 * 2
+};
+const BORDERS = 2; // border x 2
+const ANIMATION_DURATION = 300; // ms - should match the CSS transition duration
+function ButtonIcon({ children, disabled = false, mode = "system", focusMode = "system", fullWidth = false, className, type = "button", raw = false, noBorder = false, "aria-label": ariaLabel, label, size = "medium", labelRight, labelLeft, noBackground = false, align = "center", radius = "large", variant = "secondary", iconClassName, animated = false, badge, splitBackground = false, ref, ...otherProps }) {
+    const buttonClass = getButtonClasses({
+        type: TYPE_ICON,
+        mode,
+        focusMode,
+        fullWidth,
+        disabled,
+        raw,
+        className,
+        noBorder,
+        size,
+        labelRight,
+        labelLeft,
+        noBackground,
+        align,
+        radius,
+        variant,
+        animated,
+        badge,
+        splitBackground
+    });
+    const iconClass = getIconClasses({
+        mode,
+        raw,
+        iconClassName,
+        variant
+    });
+    const labelClass = getButtonIconLabelClasses({
+        animated
+    });
+    // Create a combined class for the button content wrapper
+    const contentWrapperClass = "flex items-center justify-center relative w-full h-full overflow-hidden";
+    const [labelRightRef, rectR] = useResizeObserver();
+    const [labelLeftRef, rectL] = useResizeObserver();
+    const [iconRef, rectIcon] = useResizeObserver();
+    const bufferRef = useRef(0);
+    const buttonRef = useRef(null);
+    const timeoutRef = useRef(null);
+    const mergedRef = useMergeRefs([
+        ref,
+        buttonRef
+    ]);
+    /**
+	 * Effect to calculate the buffer to add to the width of the button to
+	 * account for the icon, paddings and borders.
+	 */ useLayoutEffect(()=>{
+        /* v8 ignore start */ if (iconRef && iconRef.current && animated) {
+            bufferRef.current = rectIcon.width + PADDINGS[size] + (noBorder ? 0 : BORDERS);
+            // Set initial button width if it hasn't been set yet
+            if (buttonRef.current && !buttonRef.current.style.width) {
+                buttonRef.current.style.width = `${WIDTH[size]}px`;
+            }
+        }
+    /* v8 ignore stop */ }, [
+        rectIcon,
+        iconRef,
+        size,
+        noBorder,
+        animated
+    ]);
+    /**
+	 * Effect to update the width of the button based on the visibility of
+	 * the right and left labels.
+	 */ useLayoutEffect(()=>{
+        /* v8 ignore start */ if (buttonRef && buttonRef.current && animated) {
+            // Calculate the target width first
+            let newWidth = WIDTH[size];
+            if (labelRight && labelRightRef && rectR.width > 0) {
+                newWidth = rectR.width + bufferRef.current;
+            } else if (labelLeft && labelLeftRef && rectL.width > 0) {
+                newWidth = rectL.width + bufferRef.current;
+            }
+            // Clear any existing timeout to prevent race conditions
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+            // Start transition - expand button first
+            if (newWidth !== parseInt(buttonRef.current.style.width || "0", 10)) {
+                // Make sure labels are hidden during width transition
+                if (labelRightRef.current) {
+                    labelRightRef.current.style.opacity = "0";
+                }
+                if (labelLeftRef.current) {
+                    labelLeftRef.current.style.opacity = "0";
+                }
+                // Set the width to trigger the transition
+                buttonRef.current.style.width = `${newWidth}px`;
+                // After button width transition completes, show the label
+                if (newWidth > WIDTH[size]) {
+                    timeoutRef.current = setTimeout(()=>{
+                        if (labelRightRef.current && labelRight) {
+                            labelRightRef.current.style.opacity = "1";
+                        }
+                        if (labelLeftRef.current && labelLeft) {
+                            labelLeftRef.current.style.opacity = "1";
+                        }
+                        timeoutRef.current = null;
+                    }, ANIMATION_DURATION * 0.8); // Wait for most of the width transition to complete
+                }
+            }
+            // If transitioning to icon-only state, hide labels immediately
+            if (newWidth === WIDTH[size]) {
+                if (labelRightRef.current) {
+                    labelRightRef.current.style.opacity = "0";
+                }
+                if (labelLeftRef.current) {
+                    labelLeftRef.current.style.opacity = "0";
+                }
+            }
+        }
+    /* v8 ignore stop */ }, [
+        rectR,
+        labelRight,
+        labelRightRef,
+        rectL,
+        labelLeft,
+        labelLeftRef,
+        size,
+        animated
+    ]);
+    // Clean up timeout on unmount
+    /* v8 ignore start */ useEffect(()=>{
+        return ()=>{
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    /* v8 ignore stop */ const badgeInfo = getBadgeClasses({
+        size,
+        badge
+    });
+    return /*#__PURE__*/ jsxs(BaseButton_private, {
+        ref: mergedRef,
+        className: buttonClass,
+        disabled: disabled,
+        type: type,
+        "aria-label": ariaLabel || label,
+        ...otherProps,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: contentWrapperClass,
+                children: [
+                    /*#__PURE__*/ jsx(ButtonLabel, {
+                        label: labelLeft,
+                        labelRef: labelLeftRef,
+                        labelClass: labelClass,
+                        labelInnerClass: "pr-2",
+                        initiallyHidden: animated
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        ref: iconRef,
+                        className: iconClass,
+                        children: children
+                    }),
+                    /*#__PURE__*/ jsx(ButtonLabel, {
+                        label: labelRight,
+                        labelRef: labelRightRef,
+                        labelClass: labelClass,
+                        labelInnerClass: "pl-2",
+                        initiallyHidden: animated
+                    })
+                ]
+            }),
+            badgeInfo && /*#__PURE__*/ jsx("span", {
+                className: badgeInfo.className,
+                "aria-hidden": "true",
+                children: badgeInfo.displayValue
+            })
+        ]
+    });
+}
+const ButtonLabel = ({ labelRef, labelClass, label, labelInnerClass, initiallyHidden = false })=>{
+    if (!label && !initiallyHidden) {
+        return null;
+    }
+    return /*#__PURE__*/ jsx("span", {
+        ref: labelRef,
+        className: labelClass,
+        style: initiallyHidden ? {
+            opacity: 0
+        } : undefined,
+        children: label && /*#__PURE__*/ jsx("span", {
+            className: labelInnerClass,
+            children: label
+        })
+    });
+};
+
+export { ButtonIcon };

package/dist/{285.js → 795.js}

@@ -1,11 +1,9 @@
 /*!
-  @versini/ui-button v12.0.4
+  @versini/ui-button v12.1.0
   © 2026 gizmette.com
 */
 
-import { jsx } from "react/jsx-runtime";
-import "react";
-
+import { jsx } from "./188.js";
 
 
 
@@ -42,3 +40,4 @@ import "react";
 }
 
 export { BaseButton_private };
+export { useEffect, useLayoutEffect, useRef, useState } from "react";

package/dist/components/Button/Button.d.ts

@@ -1,2 +1,2 @@
 import type { ButtonTypes } from "@versini/ui-types";
-export declare function Button({ children, disabled, mode, focusMode, fullWidth, className, size, raw, noBorder, variant, truncate, radius, ref, ...otherProps }: ButtonTypes.Props): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ children, disabled, mode, focusMode, fullWidth, className, size, raw, noBorder, variant, truncate, radius, splitBackground, ref, ...otherProps }: ButtonTypes.Props): import("react/jsx-runtime").JSX.Element;

package/dist/components/Button/Button.js

@@ -1,17 +1,15 @@
 /*!
-  @versini/ui-button v12.0.4
+  @versini/ui-button v12.1.0
   © 2026 gizmette.com
 */
 
-import { jsx } from "react/jsx-runtime";
-import { getButtonClasses, TYPE_BUTTON } from "../../287.js";
-import { BaseButton_private } from "../../285.js";
+import { getButtonClasses, TYPE_BUTTON, jsx } from "../../188.js";
+import { BaseButton_private } from "../../795.js";
 
 
 
 
-
-function Button({ children, disabled = false, mode = "system", focusMode = "system", fullWidth = false, className, size = "medium", raw = false, noBorder = false, variant = "primary", truncate = false, radius = "large", ref, ...otherProps }) {
+function Button({ children, disabled = false, mode = "system", focusMode = "system", fullWidth = false, className, size = "medium", raw = false, noBorder = false, variant = "primary", truncate = false, radius = "large", splitBackground = false, ref, ...otherProps }) {
     const buttonClass = getButtonClasses({
         type: TYPE_BUTTON,
         mode,
@@ -24,7 +22,8 @@ function Button({ children, disabled = false, mode = "system", focusMode = "syst
         noBorder,
         variant,
         truncate,
-        radius
+        radius,
+        splitBackground
     });
     return /*#__PURE__*/ jsx(BaseButton_private, {
         ref: ref,

package/dist/components/Button/ButtonCopy.js

@@ -1,14 +1,12 @@
 /*!
-  @versini/ui-button v12.0.4
+  @versini/ui-button v12.1.0
   © 2026 gizmette.com
 */
 
-import { jsx } from "react/jsx-runtime";
 import { IconCopied, IconCopy } from "@versini/ui-icons";
-import { useEffect, useState } from "react";
-import { ButtonIcon } from "./ButtonIcon.js";
-
-
+import { jsx } from "../../188.js";
+import { useState, useEffect } from "../../795.js";
+import { ButtonIcon } from "../../370.js";
 
 
 

package/dist/components/Button/ButtonIcon.d.ts

@@ -1,2 +1,2 @@
 import type { ButtonIconTypes } from "@versini/ui-types";
-export declare function ButtonIcon({ children, disabled, mode, focusMode, fullWidth, className, type, raw, noBorder, "aria-label": ariaLabel, label, size, labelRight, labelLeft, noBackground, align, radius, variant, iconClassName, animated, badge, ref, ...otherProps }: ButtonIconTypes.Props): import("react/jsx-runtime").JSX.Element;
+export declare function ButtonIcon({ children, disabled, mode, focusMode, fullWidth, className, type, raw, noBorder, "aria-label": ariaLabel, label, size, labelRight, labelLeft, noBackground, align, radius, variant, iconClassName, animated, badge, splitBackground, ref, ...otherProps }: ButtonIconTypes.Props): import("react/jsx-runtime").JSX.Element;

package/dist/components/Button/ButtonIcon.js

@@ -1,223 +1,7 @@
 /*!
-  @versini/ui-button v12.0.4
+  @versini/ui-button v12.1.0
   © 2026 gizmette.com
 */
 
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useMergeRefs } from "@versini/ui-hooks/use-merge-refs";
-import { useResizeObserver } from "@versini/ui-hooks/use-resize-observer";
-import { useEffect, useLayoutEffect, useRef } from "react";
-import { getButtonClasses, getIconClasses, getButtonIconLabelClasses, TYPE_ICON, getBadgeClasses } from "../../287.js";
-import { BaseButton_private } from "../../285.js";
 
-
-
-
-
-
-
-
-
-
-
-const WIDTH = {
-    small: 24,
-    medium: 32,
-    large: 48
-};
-const PADDINGS = {
-    small: 8 * 2,
-    medium: 12 * 2,
-    large: 16 * 2
-};
-const BORDERS = 2; // border x 2
-const ANIMATION_DURATION = 300; // ms - should match the CSS transition duration
-function ButtonIcon({ children, disabled = false, mode = "system", focusMode = "system", fullWidth = false, className, type = "button", raw = false, noBorder = false, "aria-label": ariaLabel, label, size = "medium", labelRight, labelLeft, noBackground = false, align = "center", radius = "large", variant = "secondary", iconClassName, animated = false, badge, ref, ...otherProps }) {
-    const buttonClass = getButtonClasses({
-        type: TYPE_ICON,
-        mode,
-        focusMode,
-        fullWidth,
-        disabled,
-        raw,
-        className,
-        noBorder,
-        size,
-        labelRight,
-        labelLeft,
-        noBackground,
-        align,
-        radius,
-        variant,
-        animated,
-        badge
-    });
-    const iconClass = getIconClasses({
-        mode,
-        raw,
-        iconClassName,
-        variant
-    });
-    const labelClass = getButtonIconLabelClasses({
-        animated
-    });
-    // Create a combined class for the button content wrapper
-    const contentWrapperClass = "flex items-center justify-center relative w-full h-full overflow-hidden";
-    const [labelRightRef, rectR] = useResizeObserver();
-    const [labelLeftRef, rectL] = useResizeObserver();
-    const [iconRef, rectIcon] = useResizeObserver();
-    const bufferRef = useRef(0);
-    const buttonRef = useRef(null);
-    const timeoutRef = useRef(null);
-    const mergedRef = useMergeRefs([
-        ref,
-        buttonRef
-    ]);
-    /**
-	 * Effect to calculate the buffer to add to the width of the button to
-	 * account for the icon, paddings and borders.
-	 */ useLayoutEffect(()=>{
-        /* v8 ignore start */ if (iconRef && iconRef.current && animated) {
-            bufferRef.current = rectIcon.width + PADDINGS[size] + (noBorder ? 0 : BORDERS);
-            // Set initial button width if it hasn't been set yet
-            if (buttonRef.current && !buttonRef.current.style.width) {
-                buttonRef.current.style.width = `${WIDTH[size]}px`;
-            }
-        }
-    /* v8 ignore stop */ }, [
-        rectIcon,
-        iconRef,
-        size,
-        noBorder,
-        animated
-    ]);
-    /**
-	 * Effect to update the width of the button based on the visibility of
-	 * the right and left labels.
-	 */ useLayoutEffect(()=>{
-        /* v8 ignore start */ if (buttonRef && buttonRef.current && animated) {
-            // Calculate the target width first
-            let newWidth = WIDTH[size];
-            if (labelRight && labelRightRef && rectR.width > 0) {
-                newWidth = rectR.width + bufferRef.current;
-            } else if (labelLeft && labelLeftRef && rectL.width > 0) {
-                newWidth = rectL.width + bufferRef.current;
-            }
-            // Clear any existing timeout to prevent race conditions
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-            // Start transition - expand button first
-            if (newWidth !== parseInt(buttonRef.current.style.width || "0", 10)) {
-                // Make sure labels are hidden during width transition
-                if (labelRightRef.current) {
-                    labelRightRef.current.style.opacity = "0";
-                }
-                if (labelLeftRef.current) {
-                    labelLeftRef.current.style.opacity = "0";
-                }
-                // Set the width to trigger the transition
-                buttonRef.current.style.width = `${newWidth}px`;
-                // After button width transition completes, show the label
-                if (newWidth > WIDTH[size]) {
-                    timeoutRef.current = setTimeout(()=>{
-                        if (labelRightRef.current && labelRight) {
-                            labelRightRef.current.style.opacity = "1";
-                        }
-                        if (labelLeftRef.current && labelLeft) {
-                            labelLeftRef.current.style.opacity = "1";
-                        }
-                        timeoutRef.current = null;
-                    }, ANIMATION_DURATION * 0.8); // Wait for most of the width transition to complete
-                }
-            }
-            // If transitioning to icon-only state, hide labels immediately
-            if (newWidth === WIDTH[size]) {
-                if (labelRightRef.current) {
-                    labelRightRef.current.style.opacity = "0";
-                }
-                if (labelLeftRef.current) {
-                    labelLeftRef.current.style.opacity = "0";
-                }
-            }
-        }
-    /* v8 ignore stop */ }, [
-        rectR,
-        labelRight,
-        labelRightRef,
-        rectL,
-        labelLeft,
-        labelLeftRef,
-        size,
-        animated
-    ]);
-    // Clean up timeout on unmount
-    /* v8 ignore start */ useEffect(()=>{
-        return ()=>{
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-        };
-    }, []);
-    /* v8 ignore stop */ const badgeInfo = getBadgeClasses({
-        size,
-        badge
-    });
-    return /*#__PURE__*/ jsxs(BaseButton_private, {
-        ref: mergedRef,
-        className: buttonClass,
-        disabled: disabled,
-        type: type,
-        "aria-label": ariaLabel || label,
-        ...otherProps,
-        children: [
-            /*#__PURE__*/ jsxs("div", {
-                className: contentWrapperClass,
-                children: [
-                    /*#__PURE__*/ jsx(ButtonLabel, {
-                        label: labelLeft,
-                        labelRef: labelLeftRef,
-                        labelClass: labelClass,
-                        labelInnerClass: "pr-2",
-                        initiallyHidden: animated
-                    }),
-                    /*#__PURE__*/ jsx("span", {
-                        ref: iconRef,
-                        className: iconClass,
-                        children: children
-                    }),
-                    /*#__PURE__*/ jsx(ButtonLabel, {
-                        label: labelRight,
-                        labelRef: labelRightRef,
-                        labelClass: labelClass,
-                        labelInnerClass: "pl-2",
-                        initiallyHidden: animated
-                    })
-                ]
-            }),
-            badgeInfo && /*#__PURE__*/ jsx("span", {
-                className: badgeInfo.className,
-                "aria-hidden": "true",
-                children: badgeInfo.displayValue
-            })
-        ]
-    });
-}
-const ButtonLabel = ({ labelRef, labelClass, label, labelInnerClass, initiallyHidden = false })=>{
-    if (!label && !initiallyHidden) {
-        return null;
-    }
-    return /*#__PURE__*/ jsx("span", {
-        ref: labelRef,
-        className: labelClass,
-        style: initiallyHidden ? {
-            opacity: 0
-        } : undefined,
-        children: label && /*#__PURE__*/ jsx("span", {
-            className: labelInnerClass,
-            children: label
-        })
-    });
-};
-
-export { ButtonIcon };
+export { ButtonIcon } from "../../370.js";

package/dist/components/Button/ButtonLink.d.ts

@@ -1,2 +1,2 @@
 import type { ButtonLinkTypes } from "@versini/ui-types";
-export declare function ButtonLink({ children, mode, focusMode, fullWidth, className, size, raw, noBorder, target, truncate, noNewWindowIcon, radius, ref, ...otherProps }: ButtonLinkTypes.Props): import("react/jsx-runtime").JSX.Element;
+export declare function ButtonLink({ children, mode, focusMode, fullWidth, className, size, raw, noBorder, target, truncate, noNewWindowIcon, radius, splitBackground, ref, ...otherProps }: ButtonLinkTypes.Props): import("react/jsx-runtime").JSX.Element;

package/dist/components/Button/ButtonLink.js

@@ -1,18 +1,14 @@
 /*!
-  @versini/ui-button v12.0.4
+  @versini/ui-button v12.1.0
   © 2026 gizmette.com
 */
 
-import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { getButtonClasses, TYPE_LINK } from "../../287.js";
+import { jsxs, getButtonClasses, TYPE_LINK, clsx, jsx } from "../../188.js";
 
 
 
 
-
-
-function ButtonLink({ children, mode = "system", focusMode = "system", fullWidth = false, className, size = "small", raw = false, noBorder = false, target, truncate = false, noNewWindowIcon = false, radius = "large", ref, ...otherProps }) {
+function ButtonLink({ children, mode = "system", focusMode = "system", fullWidth = false, className, size = "small", raw = false, noBorder = false, target, truncate = false, noNewWindowIcon = false, radius = "large", splitBackground = false, ref, ...otherProps }) {
     const buttonClass = getButtonClasses({
         type: TYPE_LINK,
         mode,
@@ -24,7 +20,8 @@ function ButtonLink({ children, mode = "system", focusMode = "system", fullWidth
         size,
         noBorder,
         truncate,
-        radius
+        radius,
+        splitBackground
     });
     const newWindow = target === "_blank";
     const extraProps = {

package/dist/components/Button/utilities.d.ts

@@ -13,5 +13,5 @@ export declare const getBadgeClasses: ({ size, badge, }: Pick<ButtonIconTypes.Pr
     className: string;
     displayValue: string | null;
 } | null;
-export declare const getButtonClasses: ({ type, className, raw, mode, focusMode, disabled, fullWidth, size, noBorder, labelRight, labelLeft, noBackground, variant, truncate, align, radius, animated, badge, }: GetButtonClassesProps) => string;
+export declare const getButtonClasses: ({ type, className, raw, mode, focusMode, disabled, fullWidth, size, noBorder, labelRight, labelLeft, noBackground, variant, truncate, align, radius, animated, badge, splitBackground, }: GetButtonClassesProps) => string;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-button",
-	"version": "12.0.4",
+	"version": "12.1.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -59,7 +59,7 @@
 	},
 	"devDependencies": {
 		"@testing-library/jest-dom": "6.9.1",
-		"@versini/ui-types": "8.3.0"
+		"@versini/ui-types": "8.4.0"
 	},
 	"dependencies": {
 		"@versini/ui-hooks": "6.1.1",
@@ -70,5 +70,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "6b50d466dbc1261a8539f469016ab438e4e8e51c"
+	"gitHead": "08f46d8b356d5cfbb4e58dca300428ed6bb03789"
 }