@versini/ui-button 12.3.1 → 13.1.0

package/README.md

@@ -16,7 +16,7 @@ The Button package provides a complete set of button components including standa
 
 ## Features
 
-- **🎯 Multiple Button Types**: Button, ButtonIcon, ButtonLink, ButtonCopy
+- **🎯 Multiple Button Types**: Button, ButtonIcon, ButtonLink, ButtonCopy, ButtonGroup
 - **♿ Accessible**: WCAG compliant with proper ARIA support and keyboard navigation
 - **🎨 Customizable**: Multiple variants, sizes, and styling options
 - **🌲 Tree-shakeable**: Import only the components you need
@@ -89,6 +89,39 @@ function App() {
 }
 ```
 
+### Button Group
+
+```tsx
+import { Button } from "@versini/ui-button/button";
+import { ButtonGroup } from "@versini/ui-button/button-group";
+
+function App() {
+  return (
+    <ButtonGroup gap="medium">
+      <Button>OK</Button>
+      <Button>Cancel and go back</Button>
+    </ButtonGroup>
+  );
+}
+```
+
+### Vertical Button Group
+
+```tsx
+import { Button } from "@versini/ui-button/button";
+import { ButtonGroup } from "@versini/ui-button/button-group";
+
+function App() {
+  return (
+    <ButtonGroup orientation="vertical">
+      <Button>Save changes</Button>
+      <Button variant="secondary">Cancel</Button>
+      <Button variant="danger">Delete account</Button>
+    </ButtonGroup>
+  );
+}
+```
+
 ### Different Variants
 
 ```tsx
@@ -175,7 +208,6 @@ function ThemeExamples() {
 | disabled  | `boolean`                                            | `false`     | Whether or not the Button is disabled              |
 | fullWidth | `boolean`                                            | `false`     | Whether or not the Button is full width            |
 | mode      | `"dark" \| "light" \| "system" \| "alt-system"`      | `"system"`  | The mode of Button                                 |
-| focusMode | `"dark" \| "light" \| "system" \| "alt-system"`      | `"system"`  | The type of focus for the Button                   |
 | noBorder  | `boolean`                                            | `false`     | Whether or not to render the Button with a border  |
 | raw       | `boolean`                                            | `false`     | Whether or not to render the Button with styles    |
 | radius    | `"small" \| "medium" \| "large"`                     | `"large"`   | The rounded style of the Button                    |
@@ -198,7 +230,7 @@ function ThemeExamples() {
 | animated      | `boolean`                                            | `false`     | Whether or not to animate the label when displayed              |
 | iconClassName | `string`                                             | -           | The extra class name to pass to the icon itself                 |
 
-_Inherits all common button props (mode, focusMode, disabled, etc.)_
+_Inherits all common button props (mode, disabled, etc.)_
 
 ### ButtonLink Props
 
@@ -217,3 +249,15 @@ _Inherits all Button props_
 | copyToClipboard | `string \| (() => string)` | -       | What text to copy to the clipboard |
 
 _Inherits all ButtonIcon props except children, align, label, fullWidth, size_
+
+### ButtonGroup Props
+
+| Prop        | Type                               | Default        | Description                                        |
+| ----------- | ---------------------------------- | -------------- | -------------------------------------------------- |
+| children    | `React.ReactNode`                  | -              | The buttons to render in the group                 |
+| gap         | `"small" \| "medium" \| "large"`   | `"medium"`     | The spacing between buttons in the group           |
+| orientation | `"horizontal" \| "vertical"`       | `"horizontal"` | The layout direction of the button group           |
+| className   | `string`                           | -              | CSS class(es) to add to the main component wrapper |
+| aria-label  | `string`                           | -              | Accessible label for the button group              |
+
+_Renders with `role="group"`. All buttons share equal width via CSS Grid._

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

@@ -1,11 +1,9 @@
 /*!
-  @versini/ui-button v12.3.1
+  @versini/ui-button v13.1.0
   © 2026 gizmette.com
 */
 
-import clsx from "clsx";
-
-
+import { clsx } from "./726.js";
 
 const BUTTON_CLASSNAME = "av-button";
 
@@ -70,12 +68,6 @@ const BORDER_DANGER_DARK = "border-border-danger-dark";
 const BORDER_DARK_MEDIUM = "border-border-medium dark:border-border-medium";
 const BORDER_DANGER_DARK_DARK_MEDIUM = "border-border-danger-dark dark:border-border-danger-medium";
 const BORDER_DANGER_MEDIUM_DARK_DARK = "border-border-danger-medium dark:border-border-danger-dark";
-// Focus classes
-const FOCUS_LIGHT = "focus:outline-focus-light";
-const FOCUS_DARK = "focus:outline-focus-dark";
-// System mode compound focus classes
-const FOCUS_LIGHT_DARK_DARK = "focus:outline-focus-light dark:focus:outline-focus-dark";
-const FOCUS_DARK_DARK_LIGHT = "focus:outline-focus-dark dark:focus:outline-focus-light";
 // Common utility classes
 const NOT_PLUME = "not-plume";
 // Size classes
@@ -339,13 +331,8 @@ const getButtonBorderClasses = ({ mode, noBorder, variant })=>{
         return "border border-border-selected-dark";
     }
 /* v8 ignore stop */ };
-const getButtonFocusClasses = ({ focusMode })=>{
-    return clsx("focus:outline-2 focus:outline-offset-2", {
-        [FOCUS_DARK]: isDark(focusMode),
-        [FOCUS_LIGHT]: isLight(focusMode),
-        [FOCUS_LIGHT_DARK_DARK]: isAltSystem(focusMode),
-        [FOCUS_DARK_DARK_LIGHT]: isSystem(focusMode)
-    });
+const getButtonFocusClasses = ()=>{
+    return clsx("focus:outline-2 focus:outline-offset-2 focus:outline-focus-dark");
 };
 const getIconClasses = ({ mode, raw, iconClassName, variant = "primary" })=>{
     if (raw) {
@@ -412,7 +399,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, splitBackground })=>{
+const getButtonClasses = ({ type, className, raw, mode, disabled, fullWidth, size, noBorder, labelRight, labelLeft, noBackground, variant, truncate, align, radius, animated, badge, splitBackground })=>{
     if (!variant) {
         variant = "primary";
     }
@@ -445,9 +432,7 @@ const getButtonClasses = ({ type, className, raw, mode, focusMode, disabled, ful
         mode,
         variant,
         noBorder
-    }), getButtonFocusClasses({
-        focusMode
-    }), getButtonHoverClasses({
+    }), getButtonFocusClasses(), getButtonHoverClasses({
         mode,
         variant,
         disabled
@@ -465,5 +450,4 @@ const getButtonClasses = ({ type, className, raw, mode, focusMode, disabled, ful
     }), className);
 };
 
-export { TYPE_BUTTON, TYPE_ICON, TYPE_LINK, clsx, getBadgeClasses, getButtonClasses, getButtonIconLabelClasses, getIconClasses };
-export { jsx, jsxs } from "react/jsx-runtime";
+export { TYPE_BUTTON, TYPE_ICON, TYPE_LINK, getBadgeClasses, getButtonClasses, getButtonIconLabelClasses, getIconClasses };

package/dist/370.js

@@ -1,12 +1,14 @@
 /*!
-  @versini/ui-button v12.3.1
+  @versini/ui-button v13.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";
+import { jsxs, jsx } from "./726.js";
+import { useRef, useLayoutEffect, useEffect } from "./946.js";
+import { getButtonClasses, getIconClasses, getButtonIconLabelClasses, TYPE_ICON, getBadgeClasses } from "./277.js";
+import { BaseButton_private } from "./795.js";
 
 
 
@@ -28,11 +30,10 @@ 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, splitBackground = false, ref, ...otherProps }) {
+function ButtonIcon({ children, disabled = false, mode = "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,

package/dist/726.js

@@ -0,0 +1,9 @@
+/*!
+  @versini/ui-button v13.1.0
+  © 2026 gizmette.com
+*/
+
+
+
+export { jsx, jsxs } from "react/jsx-runtime";
+export { default as clsx } from "clsx";

package/dist/795.js

@@ -1,10 +1,10 @@
 /*!
-  @versini/ui-button v12.3.1
+  @versini/ui-button v13.1.0
   © 2026 gizmette.com
 */
 
-import { jsx } from "./188.js";
-
+import { jsx } from "./726.js";
+import "./946.js";
 
 
 
@@ -40,4 +40,3 @@ import { jsx } from "./188.js";
 }
 
 export { BaseButton_private };
-export { useEffect, useLayoutEffect, useRef, useState } from "react";

package/dist/946.js

@@ -0,0 +1,7 @@
+/*!
+  @versini/ui-button v13.1.0
+  © 2026 gizmette.com
+*/
+
+
+export { default as react, 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, splitBackground, ref, ...otherProps }: ButtonTypes.Props): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ children, disabled, mode, 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,19 +1,19 @@
 /*!
-  @versini/ui-button v12.3.1
+  @versini/ui-button v13.1.0
   © 2026 gizmette.com
 */
 
-import { getButtonClasses, TYPE_BUTTON, jsx } from "../../188.js";
+import { jsx } from "../../726.js";
+import { getButtonClasses, TYPE_BUTTON } from "../../277.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", splitBackground = false, ref, ...otherProps }) {
+function Button({ children, disabled = false, mode = "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,
-        focusMode,
         fullWidth,
         disabled,
         raw,

package/dist/components/Button/ButtonCopy.js

@@ -1,11 +1,11 @@
 /*!
-  @versini/ui-button v12.3.1
+  @versini/ui-button v13.1.0
   © 2026 gizmette.com
 */
 
 import { IconCopied, IconCopy } from "@versini/ui-icons";
-import { jsx } from "../../188.js";
-import { useState, useEffect } from "../../795.js";
+import { jsx } from "../../726.js";
+import { useState, useEffect } from "../../946.js";
 import { ButtonIcon } from "../../370.js";
 
 

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

@@ -0,0 +1,2 @@
+import type { ButtonGroupTypes } from "@versini/ui-types";
+export declare function ButtonGroup({ children, gap, orientation, className, ...otherProps }: ButtonGroupTypes.Props): import("react/jsx-runtime").JSX.Element;

package/dist/components/Button/ButtonGroup.js

@@ -0,0 +1,53 @@
+/*!
+  @versini/ui-button v13.1.0
+  © 2026 gizmette.com
+*/
+
+import { clsx, jsx } from "../../726.js";
+import { react } from "../../946.js";
+
+
+const getButtonGroupClasses = ({ gap = "medium", className })=>{
+    return clsx("grid", {
+        "gap-1": gap === "small",
+        "gap-2": gap === "medium",
+        "gap-4": gap === "large"
+    }, className);
+};
+const getButtonGroupStyle = ({ orientation = "horizontal", childCount })=>{
+    if (orientation === "vertical") {
+        return {
+            gridTemplateColumns: "1fr"
+        };
+    }
+    return {
+        gridTemplateColumns: `repeat(${childCount}, minmax(0, 1fr))`
+    };
+};
+
+
+
+
+const getValidChildCount = (children)=>{
+    return react.Children.toArray(children).length;
+};
+function ButtonGroup({ children, gap = "medium", orientation = "horizontal", className, ...otherProps }) {
+    const childCount = getValidChildCount(children);
+    const groupClass = getButtonGroupClasses({
+        gap,
+        className
+    });
+    const groupStyle = getButtonGroupStyle({
+        orientation,
+        childCount
+    });
+    return /*#__PURE__*/ jsx("div", {
+        role: "group",
+        className: groupClass,
+        style: groupStyle,
+        ...otherProps,
+        children: children
+    });
+}
+
+export { ButtonGroup };

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

@@ -0,0 +1,6 @@
+import type { ButtonGroupTypes } from "@versini/ui-types";
+export declare const getButtonGroupClasses: ({ gap, className, }: Pick<ButtonGroupTypes.Props, "gap" | "className">) => string;
+export declare const getButtonGroupStyle: ({ orientation, childCount, }: {
+    orientation?: ButtonGroupTypes.Props["orientation"];
+    childCount: number;
+}) => React.CSSProperties;

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, splitBackground, ref, ...otherProps }: ButtonIconTypes.Props): import("react/jsx-runtime").JSX.Element;
+export declare function ButtonIcon({ children, disabled, mode, 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.3.1
+  @versini/ui-button v13.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, splitBackground, ref, ...otherProps }: ButtonLinkTypes.Props): import("react/jsx-runtime").JSX.Element;
+export declare function ButtonLink({ children, mode, 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,18 @@
 /*!
-  @versini/ui-button v12.3.1
+  @versini/ui-button v13.1.0
   © 2026 gizmette.com
 */
 
-import { jsxs, getButtonClasses, TYPE_LINK, clsx, jsx } from "../../188.js";
+import { jsxs, clsx, jsx } from "../../726.js";
+import { getButtonClasses, TYPE_LINK } from "../../277.js";
 
 
 
 
-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 }) {
+function ButtonLink({ children, mode = "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,
-        focusMode,
         fullWidth,
         disabled: false,
         raw,

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, splitBackground, }: GetButtonClassesProps) => string;
+export declare const getButtonClasses: ({ type, className, raw, mode, 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.3.1",
+	"version": "13.1.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -25,6 +25,10 @@
 			"types": "./dist/components/Button/ButtonIcon.d.ts",
 			"import": "./dist/components/Button/ButtonIcon.js"
 		},
+		"./button-group": {
+			"types": "./dist/components/Button/ButtonGroup.d.ts",
+			"import": "./dist/components/Button/ButtonGroup.js"
+		},
 		"./button-link": {
 			"types": "./dist/components/Button/ButtonLink.d.ts",
 			"import": "./dist/components/Button/ButtonLink.js"
@@ -59,7 +63,7 @@
 	},
 	"devDependencies": {
 		"@testing-library/jest-dom": "6.9.1",
-		"@versini/ui-types": "8.4.0"
+		"@versini/ui-types": "9.1.0"
 	},
 	"dependencies": {
 		"@versini/ui-hooks": "6.1.1",
@@ -70,5 +74,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "2b4b581f8eb4e12cf4a2d6e0c40583f0f86d3b4c"
+	"gitHead": "e1d07ef9f8c39af8e1cf471a2d1688f4bca1771c"
 }