@react-fabric/core 1.0.0-beta.9 → 1.0.2

package/dist/cjs/components/button/Button.js

@@ -1,171 +1,233 @@
 'use strict';
 
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var utilities = require('@react-fabric/utilities');
-var classNames = require('classnames');
+var reactHotkeys = require('@tanstack/react-hotkeys');
 var react = require('react');
-var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
-var HotKey = require('../../hotkeys/HotKey.js');
-var HotKeyLabel = require('../../hotkeys/HotKeyLabel.js');
-var Tooltip = require('../../overlays/tooltip/Tooltip.js');
-var Animations = require('../animations/Animations.js');
-var Badge = require('../badge/Badge.js');
-var Icon = require('../icon/Icon.js');
-var Button_module = require('./Button.module.css');
+var Kbd = require('../../typography/Kbd.js');
 var jsxRuntime = require('react/jsx-runtime');
+var getIconProps = require('../../utils/getIconProps.js');
+var Indicator = require('../animations/Indicator.js');
+var StyleEffect = require('../effect/StyleEffect.js');
+var Icon = require('../icon/Icon.js');
 
-var _excluded = ["as", "ref", "children", "className", "active", "color", "icon", "iconBg", "iconColor", "iconAlign", "altIcon", "rtlFlip", "rounded", "size", "disabled", "loading", "variant", "badge", "fullWidth", "spinOnHover", "onClick", "actionMessage", "stopPropagation", "type", "hotKey", "showActionDone", "showActionDoneEvent", "tabIndex", "data-ref"];
+var _excluded = ["active", "altIcon", "as", "children", "className", "classNames", "color", "disabled", "icon", "loading", "onBlur", "onClick", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseOver", "onMouseUp", "activeClickable", "showActionDone", "showActionDoneEvent", "type", "ref", "rounded", "size", "variant", "width", "hotKey", "hideHotKeyLabel"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
- * Clickable action button
+ * A versatile button component that supports multiple variants, colors, sizes, and states.
+ * It can display icons, handle loading/action states, show keyboard shortcuts, and be
+ * polymorphic to render as different HTML elements or custom components.
+ *
+ * @example
+ * ```tsx
+ * // Basic button
+ * <Button variant="solid" color="primary" onClick={handleClick}>
+ *   Click me
+ * </Button>
+ *
+ * // Icon button with loading state
+ * <Button icon="icon-[mdi--floppy]" loading={saving}>
+ *   Save
+ * </Button>
+ *
+ * // Polymorphic: renders as a link
+ * <Button as="a" href="/dashboard" variant="soft">
+ *   Dashboard
+ * </Button>
+ *
+ * // Button with keyboard shortcut
+ * <Button hotKey="Ctrl+S" variant="dashed">
+ *   Save (Ctrl+S)
+ * </Button>
+ * ```
  */
-var Button = function Button(_ref) {
-  var as = _ref.as,
-    ref = _ref.ref,
+function Button(_ref) {
+  var active = _ref.active,
+    altIcon = _ref.altIcon,
+    as = _ref.as,
     children = _ref.children,
     className = _ref.className,
-    active = _ref.active,
+    classNames = _ref.classNames,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? "primary" : _ref$color,
-    icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
-    _ref$iconAlign = _ref.iconAlign,
-    iconAlign = _ref$iconAlign === void 0 ? "start" : _ref$iconAlign,
-    altIcon = _ref.altIcon,
-    rtlFlip = _ref.rtlFlip,
-    rounded = _ref.rounded,
-    size = _ref.size,
+    color = _ref$color === void 0 ? "default" : _ref$color,
     disabled = _ref.disabled,
+    icon = _ref.icon,
     loading = _ref.loading,
-    variant = _ref.variant,
-    badge = _ref.badge,
-    fullWidth = _ref.fullWidth,
-    spinOnHover = _ref.spinOnHover,
+    onBlur = _ref.onBlur,
     onClick = _ref.onClick,
-    actionMessage = _ref.actionMessage,
-    stopPropagation = _ref.stopPropagation,
+    onFocus = _ref.onFocus,
+    onMouseDown = _ref.onMouseDown,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave,
+    onMouseMove = _ref.onMouseMove,
+    onMouseOver = _ref.onMouseOver,
+    onMouseUp = _ref.onMouseUp,
+    activeClickable = _ref.activeClickable,
+    showActionDone = _ref.showActionDone,
+    showActionDoneEvent = _ref.showActionDoneEvent,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? "button" : _ref$type,
+    ref = _ref.ref,
+    rounded = _ref.rounded,
+    size = _ref.size,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "default" : _ref$variant,
+    width = _ref.width,
     hotKey = _ref.hotKey,
-    showActionDone = _ref.showActionDone,
-    _ref$showActionDoneEv = _ref.showActionDoneEvent,
-    showActionDoneEvent = _ref$showActionDoneEv === void 0 ? "click" : _ref$showActionDoneEv,
-    _ref$tabIndex = _ref.tabIndex,
-    tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
-    dataRef = _ref["data-ref"],
-    aria = _objectWithoutProperties(_ref, _excluded);
-  var refEl = react.useRef(null);
-  var _useState = react.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    busy = _useState2[0],
-    setBusy = _useState2[1];
-  var _useState3 = react.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    actionDone = _useState4[0],
-    setActionDone = _useState4[1];
-  var clickHandler = react.useCallback(function (e) {
-    setBusy(true);
-    stopPropagation && e.stopPropagation();
-    var ret = onClick === null || onClick === void 0 ? void 0 : onClick(e);
-    void Promise.resolve(ret).then(function (b) {
-      setBusy(false);
-      if (b !== false && actionMessage && showActionDoneEvent === "click") {
-        setActionDone(true);
+    hideHotKeyLabel = _ref.hideHotKeyLabel,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // Action state: tracks whether an action is running and whether to show the done overlay
+  var _useReducer = react.useReducer(function (state, action) {
+      // Start action: show spinner, hide done overlay
+      if (action.type === "actionStart") {
+        return {
+          isActionRunning: true,
+          showActionDone: false
+        };
+      }
+      // Action finished: hide spinner
+      if (action.type === "actionFinished") {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          isActionRunning: false
+        });
+      }
+      // Action done: show checkmark overlay
+      if (action.type === "actionDone") {
+        return {
+          isActionRunning: false,
+          showActionDone: true
+        };
       }
-    });
-  }, [onClick, disabled, actionMessage, showActionDoneEvent, stopPropagation]);
+      // Reset: hide everything
+      return {
+        isActionRunning: false,
+        showActionDone: false
+      };
+    }, {
+      isActionRunning: false,
+      showActionDone: false
+    }),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  // Handle button click: dispatch action start, run onClick, then dispatch finished
+  var handleAction = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            dispatch({
+              type: "actionStart"
+            });
+            _context.prev = 1;
+            _context.next = 2;
+            return Promise.resolve(onClick === null || onClick === void 0 ? void 0 : onClick(e));
+          case 2:
+            if (showActionDoneEvent === "click") {
+              dispatch({
+                type: "actionDone"
+              });
+              setTimeout(function () {
+                return dispatch({
+                  type: "actionReset"
+                });
+              }, 2000);
+            }
+          case 3:
+            _context.prev = 3;
+            dispatch({
+              type: "actionFinished"
+            });
+            return _context.finish(3);
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[1,, 3, 4]]);
+    }));
+    return function handleAction(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  reactHotkeys.useHotkeySequence(hotKey ? [hotKey].flat() : utilities.EMPTY_ARRAY, function () {
+    void handleAction();
+  }, {
+    enabled: !disabled
+  });
 
-  /** ***************** reset done state on timeout *******************/
+  // Manual mode: show/hide the done overlay based on showActionDone prop
   react.useEffect(function () {
-    actionMessage && showActionDone && setActionDone(true);
-  }, [showActionDone, actionMessage]);
-  useEffectDebugger.useEffectDebugger(function () {
-    if (actionDone) {
-      var timer = setTimeout(function () {
-        return setActionDone(false);
-      }, 2000);
+    if (showActionDoneEvent === "manual") {
+      if (showActionDone) dispatch({
+        type: "actionDone"
+      });
       return function () {
-        return clearTimeout(timer);
+        dispatch({
+          type: "actionFinished"
+        });
       };
     }
-  }, [actionDone], "ActionButton done handler");
-  var TooltipWrapper = react.useMemo(function () {
-    return actionMessage ? Tooltip.Tooltip : react.Fragment;
-  }, [actionMessage, actionDone]);
-  var tooltipProps = react.useMemo(function () {
-    if (actionDone && actionMessage) {
-      return {
-        content: actionMessage,
-        placement: "top",
-        color: color,
-        open: true
-      };
-    }
-  }, [actionDone, actionMessage, color]);
-  var badgeProps = react.useMemo(function () {
-    return Badge.getBadgeProps(badge);
-  }, [badge]);
+  }, [showActionDone, showActionDoneEvent]);
   var E = as !== null && as !== void 0 ? as : "button";
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classNames(Button_module.buttonWrapper, className, "relative align-text-top select-none focus-within:z-1", fullWidth ? "block w-full" : "inline-block"),
-    "data-ref": dataRef !== null && dataRef !== void 0 ? dataRef : "button",
-    "data-size": size,
-    "data-loading": busy || loading,
+    className: utilities.cn("fabric-buttonWrapper", "inline-flex relative is-disabled:cursor-not-allowed is-loading:cursor-wait", className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+    "data-loading": loading || state.isActionRunning,
     "data-disabled": disabled,
-    children: [hotKey && /*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
-      keyCombo: hotKey,
-      handler: function handler() {
-        var _refEl$current;
-        return !disabled && ((_refEl$current = refEl.current) === null || _refEl$current === void 0 ? void 0 : _refEl$current.click());
-      }
-    }), /*#__PURE__*/jsxRuntime.jsx(TooltipWrapper, _objectSpread(_objectSpread({}, tooltipProps), {}, {
-      children: /*#__PURE__*/jsxRuntime.jsxs(E, _objectSpread(_objectSpread({
-        ref: utilities.mergeRefs(ref, refEl),
-        role: "button",
-        className: classNames(Button_module.button, "pointer-events-auto cursor-pointer select-none flex flex-nowrap w-full h-full items-center border-0 -outline-offset-1 justify-center max-w-72 p-0 font-sans font-medium appearance-none", "focus-visible:ring-2 focus-visible:ring-offset-2 buttonInner", fullWidth && "max-w-full w-full", rounded && "rounded-full", spinOnHover && Button_module.spinOnHover),
-        type: type,
-        disabled: disabled,
-        tabIndex: tabIndex,
-        "data-inner-clickable": true,
-        onClick: clickHandler,
-        "data-color": color,
-        "data-active": active,
-        "data-variant": variant
-      }, aria), {}, {
-        children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-          className: Button_module.buttonIcon,
-          icon: icon,
-          bg: iconBg,
-          color: iconColor,
-          rtlFlip: rtlFlip,
-          "data-align": iconAlign
-        }), /*#__PURE__*/react.isValidElement(children) && /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: Button_module.buttonChild,
-          children: children
-        }), utilities.isString(children) && /*#__PURE__*/jsxRuntime.jsx("label", {
-          className: classNames(Button_module.buttonLabel, "truncate"),
-          "data-colored-icon": !!iconBg,
-          children: children
-        }), !utilities.isNil(badge) && /*#__PURE__*/jsxRuntime.jsx(Badge.Badge, _objectSpread({}, badgeProps)), hotKey && /*#__PURE__*/jsxRuntime.jsx(HotKeyLabel.HotKeyLabel, {
-          keyCombo: hotKey
-        }), altIcon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-          className: Button_module.altIcon,
-          icon: altIcon,
-          rtlFlip: true
-        })]
-      }))
-    })), actionDone && /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames("absolute inset-0 overflow-hidden flex justify-center items-center", "bg-".concat(color, "-300"), rounded ? "rounded-full" : "rounded"),
-      children: /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
-        type: "check",
-        color: color
+    "data-rounded": rounded,
+    "data-variant": variant,
+    "data-active": active,
+    "data-color": color,
+    "data-size": size,
+    style: {
+      width: width
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsxs(E, _objectSpread(_objectSpread({
+      ref: ref
+    }, props), {}, {
+      type: type,
+      className: utilities.cn("fabric-button", classNames === null || classNames === void 0 ? void 0 : classNames.button, "relative w-full appearance-none outline cursor-pointer overflow-hidden flex items-center justify-center has-[.fabric-buttonLabel]:px-[0.5em]", "rounded is-rounded:rounded-full", "is-loading:pointer-events-none is-loading:after:animate-progress is-disabled:pointer-events-none", "not-is-active:is-disabled:opacity-50 not-is-active:is-disabled:after:bg-tint-500/10", !activeClickable && "is-active:pointer-events-none"),
+      "data-clickable": true,
+      "data-ref": "button",
+      "data-testid": props["data-testid"],
+      "data-test-value": props["data-test-value"],
+      role: "button",
+      disabled: disabled,
+      "aria-label": props["aria-label"],
+      "aria-disabled": disabled,
+      onFocus: onFocus,
+      onBlur: onBlur
+      // eslint-disable-next-line @typescript-eslint/no-misused-promises
+      ,
+      onClick: handleAction,
+      onMouseDown: onMouseDown,
+      onMouseUp: onMouseUp,
+      onMouseOver: onMouseOver,
+      onMouseMove: onMouseMove,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      children: [variant !== "link" && /*#__PURE__*/jsxRuntime.jsx(StyleEffect.StyleEffect, {}), icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, _objectSpread({
+        className: utilities.cn("fabric-buttonIcon", classNames === null || classNames === void 0 ? void 0 : classNames.icon, "m-[0.375em] has-[~_.fabric-buttonLabel]:mx-0 inline-block size-fit flex-content pointer-events-none")
+      }, getIconProps.getIconProps(icon))), children && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: utilities.cn("fabric-buttonLabel", classNames === null || classNames === void 0 ? void 0 : classNames.label, "m-[0.25em] truncate flex-[0_1_auto] leading-tight pointer-events-none"),
+        children: children
+      }), !hideHotKeyLabel && hotKey && /*#__PURE__*/jsxRuntime.jsx(Kbd.Kbd, {
+        keys: hotKey
+      }), altIcon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, _objectSpread({
+        className: utilities.cn("fabric-buttonAltIcon", "my-[0.25em] size-fit inline-block flex-content pointer-events-none")
+      }, getIconProps.getIconProps(altIcon)))]
+    })), state.showActionDone && /*#__PURE__*/jsxRuntime.jsx("div", {
+      "data-testid": "doneOverlay",
+      className: "fabric-buttonDoneOverlay absolute inset-0 flex items-center justify-center z-1 border rounded is-rounded:rounded-full",
+      children: /*#__PURE__*/jsxRuntime.jsx(Indicator.AnimationIndicator, {
+        type: "check"
       })
     })]
   });
-};
+}
 
 exports.Button = Button;

package/dist/cjs/components/button/ButtonGroup.js

@@ -2,16 +2,67 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var classNames = require('classnames');
+var utilities = require('@react-fabric/utilities');
 var react = require('react');
-var Button_module = require('./Button.module.css');
+var cloneElement = require('../../utils/cloneElement.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["vertical", "className", "children", "variant", "rounded", "disabled", "fullWidth", "color", "size"];
+var _excluded = ["ref", "vertical", "className", "children", "variant", "rounded", "disabled", "fullWidth", "color", "size", "onClick"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var ButtonGroup = function ButtonGroup(_ref) {
-  var vertical = _ref.vertical,
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * A container component that renders a group of related buttons with shared styling and behavior.
+ *
+ * ButtonGroup propagates common button properties (variant, color, size, rounded, disabled)
+ * to all direct child `<Button>` elements, ensuring visual consistency across the group.
+ * It also coordinates click handling by intercepting each child's `onClick` and invoking
+ * the group-level `onClick` callback with the clicked button's `value` prop — making it
+ * ideal for toggle groups, radio-style selections, and multi-select toolbars.
+ *
+ * @template T - The type of the `value` prop expected by child buttons (defaults to `string`).
+ *
+ * @example
+ * ```tsx
+ * // Single-select toggle group
+ * const [mode, setMode] = useState<"day" | "week" | "month">("day");
+ *
+ * <ButtonGroup
+ *   value={mode}
+ *   onClick={(v) => setMode(v ?? "day")}
+ *   variant="outlined"
+ *   color="primary"
+ *   size="sm"
+ * >
+ *    <Button value="day">Day</Button>
+ *    <Button value="week">Week</Button>
+ *    <Button value="month">Month</Button>
+ * </ButtonGroup>
+ *
+ * @example
+ * ```tsx
+ * // Multi-select with vertical layout
+ * const [tags, setTags] = useState<string[]>([]);
+ *
+ * <ButtonGroup
+ *   vertical
+ *   variant="soft"
+ *   color="info"
+ *   onClick={(tag) =>
+ *     setTags((prev) =>
+ *       prev.includes(tag!) ? prev.filter((t) => t !== tag) : [...prev, tag!]
+ *       )
+ *     }
+ * >
+ *    <Button value="react">React</Button>
+ *    <Button value="typescript">TypeScript</Button>
+ *    <Button value="tailwind">Tailwind</Button>
+ * </ButtonGroup>
+ * ```
+ */
+function ButtonGroup(_ref) {
+  var _cloneChildren;
+  var ref = _ref.ref,
+    vertical = _ref.vertical,
     className = _ref.className,
     children = _ref.children,
     variant = _ref.variant,
@@ -20,22 +71,36 @@ var ButtonGroup = function ButtonGroup(_ref) {
     fullWidth = _ref.fullWidth,
     color = _ref.color,
     size = _ref.size,
-    aria = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
-    "data-ref": "buttonGroup",
-    className: classNames(Button_module.buttonGroup, className, fullWidth ? "flex" : "inline-flex", "flex-nowrap align-middle rounded", vertical && Button_module.vertical, vertical && "flex-col items-stretch")
-  }, aria), {}, {
-    children: react.Children.map(children, function (child) {
-      return /*#__PURE__*/react.cloneElement(child, _objectSpread({
-        color: color,
-        size: size,
-        variant: variant,
-        disabled: disabled,
-        rounded: rounded,
-        fullWidth: fullWidth
-      }, child.props));
+    onClick = _ref.onClick,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // Create a click handler that invokes both the group-level onClick and the child's own onClick
+  var clickHandler = function clickHandler(childValue, cb) {
+    return function (e) {
+      onClick === null || onClick === void 0 || onClick(childValue, e);
+      cb === null || cb === void 0 || cb(e);
+    };
+  };
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    className: utilities.cn("fabric-buttonGroup", className, "flex-nowrap align-middle is-vertical:flex-col", fullWidth ? "flex" : "inline-flex"),
+    "data-vertical": vertical,
+    children: (_cloneChildren = cloneElement.cloneChildren(children)) === null || _cloneChildren === void 0 ? void 0 : _cloneChildren.map(function (child) {
+      if (/*#__PURE__*/react.isValidElement(child)) {
+        // Cast to expected shape and clone with propagated group-level props
+        var childEl = child;
+        return /*#__PURE__*/react.cloneElement(childEl, _objectSpread(_objectSpread({
+          color: color,
+          size: size,
+          variant: variant,
+          disabled: disabled,
+          rounded: rounded
+        }, childEl.props), {}, {
+          onClick: clickHandler(childEl.props.value, childEl.props.onClick)
+        }));
+      }
+      return child;
     })
   }));
-};
+}
 
 exports.ButtonGroup = ButtonGroup;