@kopexa/button 8.0.10 → 10.0.0

package/dist/button.d.mts

@@ -33,7 +33,18 @@ type ButtonProps = ComponentProps<"button"> & ButtonVariantProps & {
      * @default false
      */
     isLoading?: boolean;
+    /**
+     *  You can provide shortcut keys
+     */
+    shortcutKeys?: string;
+    /**
+     * Allows to wrap a tooltip around the button
+     */
+    tooltip?: string;
 };
 declare const Button: (props: ButtonProps) => react_jsx_runtime.JSX.Element;
+declare const ShortcutDisplay: React.FC<{
+    shortcuts: string[];
+}>;
 
-export { Button, type ButtonProps };
+export { Button, type ButtonProps, ShortcutDisplay };

package/dist/button.d.ts

@@ -33,7 +33,18 @@ type ButtonProps = ComponentProps<"button"> & ButtonVariantProps & {
      * @default false
      */
     isLoading?: boolean;
+    /**
+     *  You can provide shortcut keys
+     */
+    shortcutKeys?: string;
+    /**
+     * Allows to wrap a tooltip around the button
+     */
+    tooltip?: string;
 };
 declare const Button: (props: ButtonProps) => react_jsx_runtime.JSX.Element;
+declare const ShortcutDisplay: React.FC<{
+    shortcuts: string[];
+}>;
 
-export { Button, type ButtonProps };
+export { Button, type ButtonProps, ShortcutDisplay };

package/dist/button.js

@@ -1,5 +1,6 @@
 "use client";
 "use strict";
+"use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -31,7 +32,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/button.tsx
 var button_exports = {};
 __export(button_exports, {
-  Button: () => Button
+  Button: () => Button,
+  ShortcutDisplay: () => ShortcutDisplay
 });
 module.exports = __toCommonJS(button_exports);
 var import_react_utils = require("@kopexa/react-utils");
@@ -39,6 +41,7 @@ var import_ripple = require("@kopexa/ripple");
 var import_shared_utils = require("@kopexa/shared-utils");
 var import_spinner = require("@kopexa/spinner");
 var import_theme = require("@kopexa/theme");
+var import_tooltip = require("@kopexa/tooltip");
 var Slot = __toESM(require("@radix-ui/react-slot"));
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -53,7 +56,7 @@ var Button = (props) => {
     ref,
     isLoading,
     variant,
-    size = "sm",
+    size = "md",
     className,
     color,
     radius,
@@ -62,9 +65,16 @@ var Button = (props) => {
     endContent,
     isIconOnly,
     spinnerPlacement = "start",
+    shortcutKeys,
+    tooltip,
+    spacing,
     ...rest
   } = props;
   const Comp = asChild ? Slot.Root : "button";
+  const shortcuts = (0, import_react.useMemo)(
+    () => (0, import_shared_utils.parseShortcutKeys)({ shortcutKeys }),
+    [shortcutKeys]
+  );
   const domRef = (0, import_react.useRef)(null);
   const isDisabled = disabled || isLoading;
   const {
@@ -80,9 +90,10 @@ var Button = (props) => {
       radius,
       fullWidth,
       isIconOnly,
-      className
+      className,
+      spacing
     });
-  }, [variant, size, color, radius, isIconOnly, fullWidth, className]);
+  }, [variant, size, color, radius, isIconOnly, fullWidth, className, spacing]);
   const handleClick = (0, import_react.useCallback)(
     (e) => {
       if (disableRipple || isDisabled) return;
@@ -103,7 +114,7 @@ var Button = (props) => {
     };
     return buttonSpinnerSizeMap[size];
   }, [size]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     Comp,
     {
       type,
@@ -124,8 +135,51 @@ var Button = (props) => {
       ]
     }
   );
+  if (!tooltip) {
+    return content;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_tooltip.Tooltip,
+    {
+      content: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        tooltip,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShortcutDisplay, { shortcuts })
+      ] }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        Comp,
+        {
+          type,
+          className: styles,
+          onClick: handleClick,
+          ref: (0, import_react_utils.mergeRefs)(domRef, ref),
+          disabled: isDisabled,
+          "data-disabled": (0, import_shared_utils.dataAttr)(isDisabled),
+          "data-loading": (0, import_shared_utils.dataAttr)(isLoading),
+          "aria-disabled": isDisabled,
+          tabIndex: isDisabled ? -1 : void 0,
+          ...rest,
+          children: [
+            isLoading && spinnerPlacement === "start" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_spinner.Spinner, { color: "current", size: spinnerSize }) : startContent,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slot.Slottable, { children }),
+            isLoading && spinnerPlacement === "end" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_spinner.Spinner, { color: "current", size: spinnerSize }) : endContent,
+            !disableRipple && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ripple.Ripple, { ...getRippleProps() })
+          ]
+        }
+      )
+    }
+  );
+};
+var ShortcutDisplay = ({
+  shortcuts
+}) => {
+  if (shortcuts.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: shortcuts.map((key, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+    index > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("kbd", { children: "+" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("kbd", { children: key })
+  ] }, index.toString())) });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Button
+  Button,
+  ShortcutDisplay
 });

package/dist/button.mjs

@@ -1,7 +1,10 @@
 "use client";
+"use client";
 import {
-  Button
-} from "./chunk-TWIY5JCA.mjs";
+  Button,
+  ShortcutDisplay
+} from "./chunk-SNQHD6JL.mjs";
 export {
-  Button
+  Button,
+  ShortcutDisplay
 };

package/dist/{chunk-6W2OCYRO.mjs → chunk-AKZB54J4.mjs}

@@ -1,10 +1,9 @@
 "use client";
 import {
   Button
-} from "./chunk-TWIY5JCA.mjs";
+} from "./chunk-SNQHD6JL.mjs";
 
 // src/icon-button.tsx
-import { Tooltip } from "@kopexa/tooltip";
 import { cloneElement, isValidElement, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 var IconButton = (props) => {
@@ -20,10 +19,7 @@ var IconButton = (props) => {
     // biome-ignore lint/suspicious/noExplicitAny: forcing type to any
     cloneElement(children, { "aria-hidden": true })
   ) : children;
-  if (toolip) {
-    return /* @__PURE__ */ jsx(Tooltip, { content: toolip, children: /* @__PURE__ */ jsx(Button, { ...rest, "aria-label": ariaLabel, isIconOnly: true, children: clonedChildren }) });
-  }
-  return /* @__PURE__ */ jsx(Button, { ...rest, "aria-label": ariaLabel, isIconOnly: true, children: clonedChildren });
+  return /* @__PURE__ */ jsx(Button, { ...rest, tooltip: toolip, "aria-label": ariaLabel, isIconOnly: true, children: clonedChildren });
 };
 
 export {

package/dist/{chunk-JU7NAIA6.mjs → chunk-IGA5FORT.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Button
-} from "./chunk-TWIY5JCA.mjs";
+} from "./chunk-SNQHD6JL.mjs";
 
 // src/copy-button.tsx
 import { CopyIcon } from "@kopexa/icons";

package/dist/{chunk-TWIY5JCA.mjs → chunk-SNQHD6JL.mjs}

@@ -3,16 +3,18 @@
 // src/button.tsx
 import { mergeRefs } from "@kopexa/react-utils";
 import { Ripple, useRipple } from "@kopexa/ripple";
-import { dataAttr } from "@kopexa/shared-utils";
+import { dataAttr, parseShortcutKeys } from "@kopexa/shared-utils";
 import { Spinner } from "@kopexa/spinner";
 import { button } from "@kopexa/theme";
+import { Tooltip } from "@kopexa/tooltip";
 import * as Slot from "@radix-ui/react-slot";
 import {
+  Fragment,
   useCallback,
   useMemo,
   useRef
 } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
 var Button = (props) => {
   const {
     type = "button",
@@ -24,7 +26,7 @@ var Button = (props) => {
     ref,
     isLoading,
     variant,
-    size = "sm",
+    size = "md",
     className,
     color,
     radius,
@@ -33,9 +35,16 @@ var Button = (props) => {
     endContent,
     isIconOnly,
     spinnerPlacement = "start",
+    shortcutKeys,
+    tooltip,
+    spacing,
     ...rest
   } = props;
   const Comp = asChild ? Slot.Root : "button";
+  const shortcuts = useMemo(
+    () => parseShortcutKeys({ shortcutKeys }),
+    [shortcutKeys]
+  );
   const domRef = useRef(null);
   const isDisabled = disabled || isLoading;
   const {
@@ -51,9 +60,10 @@ var Button = (props) => {
       radius,
       fullWidth,
       isIconOnly,
-      className
+      className,
+      spacing
     });
-  }, [variant, size, color, radius, isIconOnly, fullWidth, className]);
+  }, [variant, size, color, radius, isIconOnly, fullWidth, className, spacing]);
   const handleClick = useCallback(
     (e) => {
       if (disableRipple || isDisabled) return;
@@ -74,7 +84,7 @@ var Button = (props) => {
     };
     return buttonSpinnerSizeMap[size];
   }, [size]);
-  return /* @__PURE__ */ jsxs(
+  const content = /* @__PURE__ */ jsxs(
     Comp,
     {
       type,
@@ -95,8 +105,51 @@ var Button = (props) => {
       ]
     }
   );
+  if (!tooltip) {
+    return content;
+  }
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      content: /* @__PURE__ */ jsxs(Fragment2, { children: [
+        tooltip,
+        /* @__PURE__ */ jsx(ShortcutDisplay, { shortcuts })
+      ] }),
+      children: /* @__PURE__ */ jsxs(
+        Comp,
+        {
+          type,
+          className: styles,
+          onClick: handleClick,
+          ref: mergeRefs(domRef, ref),
+          disabled: isDisabled,
+          "data-disabled": dataAttr(isDisabled),
+          "data-loading": dataAttr(isLoading),
+          "aria-disabled": isDisabled,
+          tabIndex: isDisabled ? -1 : void 0,
+          ...rest,
+          children: [
+            isLoading && spinnerPlacement === "start" ? /* @__PURE__ */ jsx(Spinner, { color: "current", size: spinnerSize }) : startContent,
+            /* @__PURE__ */ jsx(Slot.Slottable, { children }),
+            isLoading && spinnerPlacement === "end" ? /* @__PURE__ */ jsx(Spinner, { color: "current", size: spinnerSize }) : endContent,
+            !disableRipple && /* @__PURE__ */ jsx(Ripple, { ...getRippleProps() })
+          ]
+        }
+      )
+    }
+  );
+};
+var ShortcutDisplay = ({
+  shortcuts
+}) => {
+  if (shortcuts.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { children: shortcuts.map((key, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    index > 0 && /* @__PURE__ */ jsx("kbd", { children: "+" }),
+    /* @__PURE__ */ jsx("kbd", { children: key })
+  ] }, index.toString())) });
 };
 
 export {
-  Button
+  Button,
+  ShortcutDisplay
 };

package/dist/copy-button.js

@@ -36,7 +36,7 @@ __export(copy_button_exports, {
 module.exports = __toCommonJS(copy_button_exports);
 var import_icons = require("@kopexa/icons");
 var import_shared_utils2 = require("@kopexa/shared-utils");
-var import_tooltip = require("@kopexa/tooltip");
+var import_tooltip2 = require("@kopexa/tooltip");
 var import_react2 = require("react");
 
 // src/button.tsx
@@ -45,6 +45,7 @@ var import_ripple = require("@kopexa/ripple");
 var import_shared_utils = require("@kopexa/shared-utils");
 var import_spinner = require("@kopexa/spinner");
 var import_theme = require("@kopexa/theme");
+var import_tooltip = require("@kopexa/tooltip");
 var Slot = __toESM(require("@radix-ui/react-slot"));
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -59,7 +60,7 @@ var Button = (props) => {
     ref,
     isLoading,
     variant,
-    size = "sm",
+    size = "md",
     className,
     color,
     radius,
@@ -68,9 +69,16 @@ var Button = (props) => {
     endContent,
     isIconOnly,
     spinnerPlacement = "start",
+    shortcutKeys,
+    tooltip,
+    spacing,
     ...rest
   } = props;
   const Comp = asChild ? Slot.Root : "button";
+  const shortcuts = (0, import_react.useMemo)(
+    () => (0, import_shared_utils.parseShortcutKeys)({ shortcutKeys }),
+    [shortcutKeys]
+  );
   const domRef = (0, import_react.useRef)(null);
   const isDisabled = disabled || isLoading;
   const {
@@ -86,9 +94,10 @@ var Button = (props) => {
       radius,
       fullWidth,
       isIconOnly,
-      className
+      className,
+      spacing
     });
-  }, [variant, size, color, radius, isIconOnly, fullWidth, className]);
+  }, [variant, size, color, radius, isIconOnly, fullWidth, className, spacing]);
   const handleClick = (0, import_react.useCallback)(
     (e) => {
       if (disableRipple || isDisabled) return;
@@ -109,7 +118,7 @@ var Button = (props) => {
     };
     return buttonSpinnerSizeMap[size];
   }, [size]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     Comp,
     {
       type,
@@ -130,6 +139,48 @@ var Button = (props) => {
       ]
     }
   );
+  if (!tooltip) {
+    return content;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_tooltip.Tooltip,
+    {
+      content: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        tooltip,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShortcutDisplay, { shortcuts })
+      ] }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        Comp,
+        {
+          type,
+          className: styles,
+          onClick: handleClick,
+          ref: (0, import_react_utils.mergeRefs)(domRef, ref),
+          disabled: isDisabled,
+          "data-disabled": (0, import_shared_utils.dataAttr)(isDisabled),
+          "data-loading": (0, import_shared_utils.dataAttr)(isLoading),
+          "aria-disabled": isDisabled,
+          tabIndex: isDisabled ? -1 : void 0,
+          ...rest,
+          children: [
+            isLoading && spinnerPlacement === "start" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_spinner.Spinner, { color: "current", size: spinnerSize }) : startContent,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slot.Slottable, { children }),
+            isLoading && spinnerPlacement === "end" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_spinner.Spinner, { color: "current", size: spinnerSize }) : endContent,
+            !disableRipple && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ripple.Ripple, { ...getRippleProps() })
+          ]
+        }
+      )
+    }
+  );
+};
+var ShortcutDisplay = ({
+  shortcuts
+}) => {
+  if (shortcuts.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: shortcuts.map((key, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+    index > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("kbd", { children: "+" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("kbd", { children: key })
+  ] }, index.toString())) });
 };
 
 // src/copy-button.tsx
@@ -223,7 +274,7 @@ var CopyButton = ({
     }
   };
   const isIconOnly = !children;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_tooltip.Tooltip, { content: tooltipContent, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_tooltip2.Tooltip, { content: tooltipContent, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Button,
     {
       "aria-label": isIconOnly ? (_a = translations == null ? void 0 : translations.copy) != null ? _a : "Copy" : void 0,

package/dist/copy-button.mjs

@@ -1,8 +1,8 @@
 "use client";
 import {
   CopyButton
-} from "./chunk-JU7NAIA6.mjs";
-import "./chunk-TWIY5JCA.mjs";
+} from "./chunk-IGA5FORT.mjs";
+import "./chunk-SNQHD6JL.mjs";
 export {
   CopyButton
 };

package/dist/icon-button.js

@@ -1,5 +1,6 @@
 "use client";
 "use strict";
+"use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -34,7 +35,6 @@ __export(icon_button_exports, {
   IconButton: () => IconButton
 });
 module.exports = __toCommonJS(icon_button_exports);
-var import_tooltip = require("@kopexa/tooltip");
 var import_react2 = require("react");
 
 // src/button.tsx
@@ -43,6 +43,7 @@ var import_ripple = require("@kopexa/ripple");
 var import_shared_utils = require("@kopexa/shared-utils");
 var import_spinner = require("@kopexa/spinner");
 var import_theme = require("@kopexa/theme");
+var import_tooltip = require("@kopexa/tooltip");
 var Slot = __toESM(require("@radix-ui/react-slot"));
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -57,7 +58,7 @@ var Button = (props) => {
     ref,
     isLoading,
     variant,
-    size = "sm",
+    size = "md",
     className,
     color,
     radius,
@@ -66,9 +67,16 @@ var Button = (props) => {
     endContent,
     isIconOnly,
     spinnerPlacement = "start",
+    shortcutKeys,
+    tooltip,
+    spacing,
     ...rest
   } = props;
   const Comp = asChild ? Slot.Root : "button";
+  const shortcuts = (0, import_react.useMemo)(
+    () => (0, import_shared_utils.parseShortcutKeys)({ shortcutKeys }),
+    [shortcutKeys]
+  );
   const domRef = (0, import_react.useRef)(null);
   const isDisabled = disabled || isLoading;
   const {
@@ -84,9 +92,10 @@ var Button = (props) => {
       radius,
       fullWidth,
       isIconOnly,
-      className
+      className,
+      spacing
     });
-  }, [variant, size, color, radius, isIconOnly, fullWidth, className]);
+  }, [variant, size, color, radius, isIconOnly, fullWidth, className, spacing]);
   const handleClick = (0, import_react.useCallback)(
     (e) => {
       if (disableRipple || isDisabled) return;
@@ -107,7 +116,7 @@ var Button = (props) => {
     };
     return buttonSpinnerSizeMap[size];
   }, [size]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     Comp,
     {
       type,
@@ -128,6 +137,48 @@ var Button = (props) => {
       ]
     }
   );
+  if (!tooltip) {
+    return content;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_tooltip.Tooltip,
+    {
+      content: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        tooltip,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShortcutDisplay, { shortcuts })
+      ] }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        Comp,
+        {
+          type,
+          className: styles,
+          onClick: handleClick,
+          ref: (0, import_react_utils.mergeRefs)(domRef, ref),
+          disabled: isDisabled,
+          "data-disabled": (0, import_shared_utils.dataAttr)(isDisabled),
+          "data-loading": (0, import_shared_utils.dataAttr)(isLoading),
+          "aria-disabled": isDisabled,
+          tabIndex: isDisabled ? -1 : void 0,
+          ...rest,
+          children: [
+            isLoading && spinnerPlacement === "start" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_spinner.Spinner, { color: "current", size: spinnerSize }) : startContent,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slot.Slottable, { children }),
+            isLoading && spinnerPlacement === "end" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_spinner.Spinner, { color: "current", size: spinnerSize }) : endContent,
+            !disableRipple && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ripple.Ripple, { ...getRippleProps() })
+          ]
+        }
+      )
+    }
+  );
+};
+var ShortcutDisplay = ({
+  shortcuts
+}) => {
+  if (shortcuts.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: shortcuts.map((key, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+    index > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("kbd", { children: "+" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("kbd", { children: key })
+  ] }, index.toString())) });
 };
 
 // src/icon-button.tsx
@@ -145,10 +196,7 @@ var IconButton = (props) => {
     // biome-ignore lint/suspicious/noExplicitAny: forcing type to any
     (0, import_react2.cloneElement)(children, { "aria-hidden": true })
   ) : children;
-  if (toolip) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_tooltip.Tooltip, { content: toolip, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Button, { ...rest, "aria-label": ariaLabel, isIconOnly: true, children: clonedChildren }) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Button, { ...rest, "aria-label": ariaLabel, isIconOnly: true, children: clonedChildren });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Button, { ...rest, tooltip: toolip, "aria-label": ariaLabel, isIconOnly: true, children: clonedChildren });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/icon-button.mjs

@@ -1,8 +1,9 @@
 "use client";
+"use client";
 import {
   IconButton
-} from "./chunk-6W2OCYRO.mjs";
-import "./chunk-TWIY5JCA.mjs";
+} from "./chunk-AKZB54J4.mjs";
+import "./chunk-SNQHD6JL.mjs";
 export {
   IconButton
 };

package/dist/index.js

@@ -43,6 +43,7 @@ var import_ripple = require("@kopexa/ripple");
 var import_shared_utils = require("@kopexa/shared-utils");
 var import_spinner = require("@kopexa/spinner");
 var import_theme = require("@kopexa/theme");
+var import_tooltip = require("@kopexa/tooltip");
 var Slot = __toESM(require("@radix-ui/react-slot"));
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -57,7 +58,7 @@ var Button = (props) => {
     ref,
     isLoading,
     variant,
-    size = "sm",
+    size = "md",
     className,
     color,
     radius,
@@ -66,9 +67,16 @@ var Button = (props) => {
     endContent,
     isIconOnly,
     spinnerPlacement = "start",
+    shortcutKeys,
+    tooltip,
+    spacing,
     ...rest
   } = props;
   const Comp = asChild ? Slot.Root : "button";
+  const shortcuts = (0, import_react.useMemo)(
+    () => (0, import_shared_utils.parseShortcutKeys)({ shortcutKeys }),
+    [shortcutKeys]
+  );
   const domRef = (0, import_react.useRef)(null);
   const isDisabled = disabled || isLoading;
   const {
@@ -84,9 +92,10 @@ var Button = (props) => {
       radius,
       fullWidth,
       isIconOnly,
-      className
+      className,
+      spacing
     });
-  }, [variant, size, color, radius, isIconOnly, fullWidth, className]);
+  }, [variant, size, color, radius, isIconOnly, fullWidth, className, spacing]);
   const handleClick = (0, import_react.useCallback)(
     (e) => {
       if (disableRipple || isDisabled) return;
@@ -107,7 +116,7 @@ var Button = (props) => {
     };
     return buttonSpinnerSizeMap[size];
   }, [size]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     Comp,
     {
       type,
@@ -128,12 +137,54 @@ var Button = (props) => {
       ]
     }
   );
+  if (!tooltip) {
+    return content;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_tooltip.Tooltip,
+    {
+      content: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        tooltip,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShortcutDisplay, { shortcuts })
+      ] }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        Comp,
+        {
+          type,
+          className: styles,
+          onClick: handleClick,
+          ref: (0, import_react_utils.mergeRefs)(domRef, ref),
+          disabled: isDisabled,
+          "data-disabled": (0, import_shared_utils.dataAttr)(isDisabled),
+          "data-loading": (0, import_shared_utils.dataAttr)(isLoading),
+          "aria-disabled": isDisabled,
+          tabIndex: isDisabled ? -1 : void 0,
+          ...rest,
+          children: [
+            isLoading && spinnerPlacement === "start" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_spinner.Spinner, { color: "current", size: spinnerSize }) : startContent,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slot.Slottable, { children }),
+            isLoading && spinnerPlacement === "end" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_spinner.Spinner, { color: "current", size: spinnerSize }) : endContent,
+            !disableRipple && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ripple.Ripple, { ...getRippleProps() })
+          ]
+        }
+      )
+    }
+  );
+};
+var ShortcutDisplay = ({
+  shortcuts
+}) => {
+  if (shortcuts.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: shortcuts.map((key, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+    index > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("kbd", { children: "+" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("kbd", { children: key })
+  ] }, index.toString())) });
 };
 
 // src/copy-button.tsx
 var import_icons = require("@kopexa/icons");
 var import_shared_utils2 = require("@kopexa/shared-utils");
-var import_tooltip = require("@kopexa/tooltip");
+var import_tooltip2 = require("@kopexa/tooltip");
 var import_react2 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var CopyButton = ({
@@ -225,7 +276,7 @@ var CopyButton = ({
     }
   };
   const isIconOnly = !children;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_tooltip.Tooltip, { content: tooltipContent, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_tooltip2.Tooltip, { content: tooltipContent, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Button,
     {
       "aria-label": isIconOnly ? (_a = translations == null ? void 0 : translations.copy) != null ? _a : "Copy" : void 0,
@@ -241,7 +292,6 @@ var CopyButton = ({
 };
 
 // src/icon-button.tsx
-var import_tooltip2 = require("@kopexa/tooltip");
 var import_react3 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var IconButton = (props) => {
@@ -257,10 +307,7 @@ var IconButton = (props) => {
     // biome-ignore lint/suspicious/noExplicitAny: forcing type to any
     (0, import_react3.cloneElement)(children, { "aria-hidden": true })
   ) : children;
-  if (toolip) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_tooltip2.Tooltip, { content: toolip, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { ...rest, "aria-label": ariaLabel, isIconOnly: true, children: clonedChildren }) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { ...rest, "aria-label": ariaLabel, isIconOnly: true, children: clonedChildren });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { ...rest, tooltip: toolip, "aria-label": ariaLabel, isIconOnly: true, children: clonedChildren });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -1,13 +1,13 @@
 "use client";
 import {
   CopyButton
-} from "./chunk-JU7NAIA6.mjs";
+} from "./chunk-IGA5FORT.mjs";
 import {
   IconButton
-} from "./chunk-6W2OCYRO.mjs";
+} from "./chunk-AKZB54J4.mjs";
 import {
   Button
-} from "./chunk-TWIY5JCA.mjs";
+} from "./chunk-SNQHD6JL.mjs";
 export {
   Button,
   CopyButton,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopexa/button",
-  "version": "8.0.10",
+  "version": "10.0.0",
   "description": "Buttons allow users to perform actions and choose with a single tap.",
   "keywords": [
     "button"
@@ -28,16 +28,16 @@
     "motion": ">=12.23.6",
     "react": ">=19.0.0-rc.0",
     "react-dom": ">=19.0.0-rc.0",
-    "@kopexa/theme": "1.7.7"
+    "@kopexa/theme": "2.1.0"
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.2.3",
-    "@kopexa/shared-utils": "1.1.7",
-    "@kopexa/react-utils": "2.0.8",
-    "@kopexa/spinner": "6.0.7",
-    "@kopexa/tooltip": "6.0.7",
-    "@kopexa/ripple": "10.0.7",
-    "@kopexa/icons": "10.0.10"
+    "@kopexa/shared-utils": "2.0.0",
+    "@kopexa/react-utils": "3.0.0",
+    "@kopexa/spinner": "8.0.0",
+    "@kopexa/tooltip": "8.0.0",
+    "@kopexa/ripple": "12.0.0",
+    "@kopexa/icons": "12.0.0"
   },
   "clean-package": "../../../clean-package.config.json",
   "module": "dist/index.mjs",