@versini/ui-button 12.0.3 → 12.1.0

package/dist/188.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-button v12.0.3
+  @versini/ui-button v12.1.0
   © 2026 gizmette.com
 */
 
@@ -189,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),
@@ -202,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),
@@ -210,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),
@@ -218,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 })=>{
@@ -413,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";
     }
@@ -426,7 +431,8 @@ const getButtonClasses = ({ type, className, raw, mode, focusMode, disabled, ful
     }), getButtonBackgroundClasses({
         mode,
         noBackground,
-        variant
+        variant,
+        splitBackground
     }), getButtonRadiusClasses({
         radius
     }), getButtonSizesClasses({

package/dist/370.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-button v12.0.3
+  @versini/ui-button v12.1.0
   © 2026 gizmette.com
 */
 
@@ -28,7 +28,7 @@ const PADDINGS = {
 };
 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 }) {
+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,
@@ -46,7 +46,8 @@ function ButtonIcon({ children, disabled = false, mode = "system", focusMode = "
         radius,
         variant,
         animated,
-        badge
+        badge,
+        splitBackground
     });
     const iconClass = getIconClasses({
         mode,

package/dist/795.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-button v12.0.3
+  @versini/ui-button v12.1.0
   © 2026 gizmette.com
 */
 

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,5 +1,5 @@
 /*!
-  @versini/ui-button v12.0.3
+  @versini/ui-button v12.1.0
   © 2026 gizmette.com
 */
 
@@ -9,7 +9,7 @@ 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,
@@ -22,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,5 +1,5 @@
 /*!
-  @versini/ui-button v12.0.3
+  @versini/ui-button v12.1.0
   © 2026 gizmette.com
 */
 

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,5 +1,5 @@
 /*!
-  @versini/ui-button v12.0.3
+  @versini/ui-button v12.1.0
   © 2026 gizmette.com
 */
 

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,5 +1,5 @@
 /*!
-  @versini/ui-button v12.0.3
+  @versini/ui-button v12.1.0
   © 2026 gizmette.com
 */
 
@@ -8,7 +8,7 @@ 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,
@@ -20,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.3",
+	"version": "12.1.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -59,16 +59,16 @@
 	},
 	"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",
-		"@versini/ui-icons": "4.19.0",
+		"@versini/ui-icons": "4.19.2",
 		"clsx": "2.1.1",
 		"tailwindcss": "4.2.1"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "4031959707f3c3fd06007b28b07f77d7a7692516"
+	"gitHead": "08f46d8b356d5cfbb4e58dca300428ed6bb03789"
 }