@edux-design/buttons 0.1.2 → 0.1.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @edux-design/buttons
 
+## 0.1.3
+
+### Patch Changes
+
+- Add shared control height tokens and update Button to use token-backed size classes.
+
 ## 0.1.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edux-design/buttons",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": false,
   "sideEffects": [
     "**/*.css"

package/src/elements/Button.jsx

@@ -85,16 +85,16 @@ export const Button = forwardRef(
       "text-bold tracking-normal hover:underline hover:underline-offset-(--underline-offset-btn) active:underline active:underline-offset-(--underline-offset-btn)";
 
     const sizes = {
-      small: "h-[36px] py-8 px-16 rounded-lg text-sm",
-      medium: "h-[44px] py-8 px-16 rounded-lg text-base",
-      large: "h-[56px] py-8 px-16 rounded-lg text-lg",
+      small: "h-control-sm py-8 px-16 rounded-lg text-sm",
+      medium: "h-control-md py-8 px-16 rounded-lg text-base",
+      large: "h-control-lg py-8 px-16 rounded-lg text-lg",
     };
 
     const width = isStretched ? "w-full" : "w-fit-content";
 
     const variants = {
       primary:
-        "border-2 border-border-primary-emphasis bg-bg-primary-base text-white hover:bg-border-focus  hover:text-fg-base hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-base",
+        "border-2 border-border-primary-emphasis bg-bg-primary-base text-white hover:bg-border-focus hover:text-fg-focus hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-focus",
       secondary:
         "border-2 border-border-primary-base bg-bg-base text-fg-primary-emphasis hover:shadow-md hover:bg-bg-primary-subtle active:bg-bg-primary-subtle-90",
       bare: "bg-bg-base text-fg-primary-emphasis hover:bg-bg-minimal active:bg-bg-minimal-5",

package/src/elements/Button.test.jsx

@@ -11,17 +11,17 @@ describe("Button", () => {
   it("applies medium size by default", () => {
     render(<Button>Default size</Button>);
     const btn = screen.getByRole("button");
-    expect(btn.className).toMatch(/h-\[44px\]/); // medium height
+    expect(btn.className).toMatch(/h-control-md/);
   });
 
   it("applies small size when size='small'", () => {
     render(<Button size="small">Small</Button>);
-    expect(screen.getByRole("button").className).toMatch(/h-\[36px\]/);
+    expect(screen.getByRole("button").className).toMatch(/h-control-sm/);
   });
 
   it("applies large size when size='large'", () => {
     render(<Button size="large">Large</Button>);
-    expect(screen.getByRole("button").className).toMatch(/h-\[56px\]/);
+    expect(screen.getByRole("button").className).toMatch(/h-control-lg/);
   });
 
   it("uses stretched width when isStretched=true", () => {

package/src/elements/ButtonCounter.jsx

@@ -147,7 +147,7 @@ export const ButtonCounter = forwardRef(function ButtonCounter(
   const variants = {
     primary: {
       button:
-        "border-2 border-border-primary-emphasis bg-bg-primary-base text-white hover:bg-border-focus hover:text-fg-base hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-base",
+        "border-2 border-border-primary-emphasis bg-bg-primary-base text-white hover:bg-border-focus hover:text-fg-focus hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-focus",
       display:
         "border-y-2 border-x-2 border-border-primary-emphasis bg-bg-primary-base text-white",
     },

package/src/elements/IconButton.jsx

@@ -75,7 +75,7 @@ export const IconButton = forwardRef(
 
     const variants = {
       primary:
-        "border-2 border-border-primary-emphasis bg-bg-primary-base text-white hover:bg-border-focus hover:text-fg-base hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-base",
+        "border-2 border-border-primary-emphasis bg-bg-primary-base text-white hover:bg-border-focus hover:text-fg-focus hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-focus",
       secondary:
         "border-2 border-border-primary-base bg-bg-base text-fg-primary-emphasis hover:shadow-md hover:bg-bg-primary-subtle active:bg-bg-primary-subtle-90",
       bare: "bg-bg-base text-fg-primary-emphasis hover:bg-bg-minimal active:bg-bg-minimal-5",

package/dist/chevron-EVM4GL6D.svg

@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
-    xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.5858 12L9.29289 7.70711C8.90237 7.31658 8.90237 6.68342 9.29289 6.29289C9.68342 5.90237 10.3166 5.90237 10.7071 6.29289L15.7071 11.2929C16.0976 11.6834 16.0976 12.3166 15.7071 12.7071L10.7071 17.7071C10.3166 18.0976 9.68342 18.0976 9.29289 17.7071C8.90237 17.3166 8.90237 16.6834 9.29289 16.2929L13.5858 12Z" fill="currentColor"/>
-</svg>

package/dist/chunk-M47FNL4P.mjs

@@ -1,10 +0,0 @@
-// src/elements/Button.jsx
-import React from "react";
-function Button() {
-  return /* @__PURE__ */ React.createElement("div", { className: "border-2 border-primary-700" }, "Button");
-}
-var Button_default = Button;
-
-export {
-  Button_default
-};

package/dist/elements/Button.js

@@ -1,39 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/elements/Button.jsx
-var Button_exports = {};
-__export(Button_exports, {
-  default: () => Button_default
-});
-module.exports = __toCommonJS(Button_exports);
-var import_react = __toESM(require("react"));
-function Button() {
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "border-2 border-primary-700" }, "Button");
-}
-var Button_default = Button;

package/dist/elements/Button.mjs

@@ -1,6 +0,0 @@
-import {
-  Button_default
-} from "../chunk-M47FNL4P.mjs";
-export {
-  Button_default as default
-};

package/dist/index.d.mts

@@ -1,230 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
-
-/**
- * Props for the IconButton component.
- *
- * Extends all native HTML `<button>` attributes and accepts an icon prop.
- * Designed for circular icon-only buttons that follow the same
- * design-system patterns as the regular Button.
- *
- * @typedef {React.ButtonHTMLAttributes<HTMLButtonElement> & {
- *   icon: React.ReactNode,
- *   size?: "small"|"medium"|"large",
- *   isSecondary?: boolean,
- *   isDanger?: boolean,
- *   isBare?: boolean,
- *   disabled?: boolean,
- *   className?: string
- * }} IconButtonProps
- */
-/**
- * IconButton component.
- *
- * Provides a circular button used for icon-only actions, matching
- * the design-system variants and states of the main Button component.
- *
- * @component
- * @type {React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>}
- *
- * @example
- * ```jsx
- * <IconButton icon={<XIcon />} aria-label="Close" />
- * <IconButton icon={<EditIcon />} isSecondary />
- * <IconButton icon={<TrashIcon />} isDanger disabled />
- * ```
- */
-declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
-/**
- * Props for the IconButton component.
- *
- * Extends all native HTML `<button>` attributes and accepts an icon prop.
- * Designed for circular icon-only buttons that follow the same
- * design-system patterns as the regular Button.
- */
-type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    icon: React.ReactNode;
-    size?: "small" | "medium" | "large";
-    isSecondary?: boolean;
-    isDanger?: boolean;
-    isBare?: boolean;
-    disabled?: boolean;
-    className?: string;
-};
-
-/**
- * Props for the Button component.
- *
- * Extends all native HTML `<button>` attributes, while adding
- * design-system variants and state controls.
- *
- * @typedef {React.ButtonHTMLAttributes<HTMLButtonElement> & {
- *   children?: React.ReactNode,
- *   startIcon?: React.ReactNode,
- *   endIcon?: React.ReactNode,
- *   size?: "small"|"medium"|"large",
- *   isSecondary?: boolean,
- *   isDanger?: boolean,
- *   isBare?: boolean,
- *   isStretched?: boolean,
- *   disabled?: boolean,
- *   className?: string
- * }} ButtonProps
- */
-/**
- * Button component.
- *
- * Provides design-system styled button with support for
- * multiple visual variants, sizing, and states.
- *
- * @component
- * @type {React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>}
- *
- * @example
- * ```jsx
- * <Button size="small">Save</Button>
- * <Button isSecondary>Cancel</Button>
- * <Button isDanger disabled>Delete</Button>
- * ```
- */
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-/**
- * Props for the Button component.
- *
- * Extends all native HTML `<button>` attributes, while adding
- * design-system variants and state controls.
- */
-type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    children?: React.ReactNode;
-    startIcon?: React.ReactNode;
-    endIcon?: React.ReactNode;
-    size?: "small" | "medium" | "large";
-    isSecondary?: boolean;
-    isDanger?: boolean;
-    isBare?: boolean;
-    isStretched?: boolean;
-    disabled?: boolean;
-    className?: string;
-};
-
-/**
- * Props for the MenuButton component.
- *
- * @typedef {Object} MenuButtonProps
- * @property {React.ReactNode} [children] - Content to display inside the button (usually label or icon).
- * @property {"small"|"medium"} [size="medium"] - Size variant controlling button height.
- */
-/**
- * MenuButton component.
- *
- * Provides a styled menu trigger button with optional sizing.
- * It uses a `MenuButtonContext` provider to share internal state
- * with child menu items.
- *
- * @component
- * @type {React.FC<MenuButtonProps>}
- *
- * @example
- * ```jsx
- * <MenuButton size="small">Options</MenuButton>
- * ```
- */
-declare function MenuButton({ children, size }: {
-    children: any;
-    size: any;
-}): react_jsx_runtime.JSX.Element;
-
-/**
- * @typedef {Object} ButtonGroupOption
- * @property {React.ReactNode} [label] - Main label for the option.
- * @property {React.ReactNode} [startAdornment] - Optional leading element (icon, badge, etc.).
- * @property {React.ReactNode} [endIcon] - Optional trailing element (legacy alias).
- * @property {React.ReactNode} [endAdornment] - Optional trailing element.
- * @property {string|number} [value] - Unique value used for selection.
- * @property {boolean} [disabled] - Whether the option is disabled.
- */
-/**
- * Segmented button group with animated active state.
- *
- * @typedef {React.HTMLAttributes<HTMLDivElement> & {
- *   value?: string|number,
- *   defaultValue?: string|number,
- *   onChange?: (value: string|number, option: ButtonGroupOption) => void,
- *   size?: "small"|"medium"|"large",
- *   isStretched?: boolean,
- * }} ButtonGroupProps
- */
-declare const ButtonGroup: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
-
-declare function ButtonGroupItem(_props: any): any;
-declare namespace ButtonGroupItem {
-    let displayName: string;
-}
-
-/**
- * ButtonCounter (stepper) component.
- *
- * Renders decrement/increment buttons with a central value display.
- * Supports the same size + variant flags as the main Button.
- *
- * @typedef {React.HTMLAttributes<HTMLDivElement> & {
- *   value?: number,
- *   defaultValue?: number,
- *   onChange?: (value: number) => void,
- *   min?: number,
- *   max?: number,
- *   step?: number,
- *   children?: React.ReactNode,
- *   size?: "small"|"medium"|"large",
- *   isSecondary?: boolean,
- *   isDanger?: boolean,
- *   isBare?: boolean,
- *   isStretched?: boolean,
- *   disabled?: boolean,
- *   isEditable?: boolean,
- *   inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "value"|"defaultValue"|"onChange"|"type">,
- *   decrementIcon?: React.ReactNode,
- *   incrementIcon?: React.ReactNode,
- *   startIcon?: React.ReactNode,
- *   endIcon?: React.ReactNode,
- *   decrementButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>,
- *   incrementButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>,
- *   className?: string,
- * }} ButtonCounterProps
- */
-/**
- * @type {React.ForwardRefExoticComponent<ButtonCounterProps & React.RefAttributes<HTMLDivElement>>}
- */
-declare const ButtonCounter: React.ForwardRefExoticComponent<ButtonCounterProps & React.RefAttributes<HTMLDivElement>>;
-/**
- * ButtonCounter (stepper) component.
- *
- * Renders decrement/increment buttons with a central value display.
- * Supports the same size + variant flags as the main Button.
- */
-type ButtonCounterProps = React.HTMLAttributes<HTMLDivElement> & {
-    value?: number;
-    defaultValue?: number;
-    onChange?: (value: number) => void;
-    min?: number;
-    max?: number;
-    step?: number;
-    children?: React.ReactNode;
-    size?: "small" | "medium" | "large";
-    isSecondary?: boolean;
-    isDanger?: boolean;
-    isBare?: boolean;
-    isStretched?: boolean;
-    disabled?: boolean;
-    isEditable?: boolean;
-    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type">;
-    decrementIcon?: React.ReactNode;
-    incrementIcon?: React.ReactNode;
-    startIcon?: React.ReactNode;
-    endIcon?: React.ReactNode;
-    decrementButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
-    incrementButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
-    className?: string;
-};
-
-export { Button, ButtonCounter, ButtonGroup, ButtonGroupItem, IconButton, MenuButton };

package/dist/index.d.ts

@@ -1,230 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
-
-/**
- * Props for the IconButton component.
- *
- * Extends all native HTML `<button>` attributes and accepts an icon prop.
- * Designed for circular icon-only buttons that follow the same
- * design-system patterns as the regular Button.
- *
- * @typedef {React.ButtonHTMLAttributes<HTMLButtonElement> & {
- *   icon: React.ReactNode,
- *   size?: "small"|"medium"|"large",
- *   isSecondary?: boolean,
- *   isDanger?: boolean,
- *   isBare?: boolean,
- *   disabled?: boolean,
- *   className?: string
- * }} IconButtonProps
- */
-/**
- * IconButton component.
- *
- * Provides a circular button used for icon-only actions, matching
- * the design-system variants and states of the main Button component.
- *
- * @component
- * @type {React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>}
- *
- * @example
- * ```jsx
- * <IconButton icon={<XIcon />} aria-label="Close" />
- * <IconButton icon={<EditIcon />} isSecondary />
- * <IconButton icon={<TrashIcon />} isDanger disabled />
- * ```
- */
-declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
-/**
- * Props for the IconButton component.
- *
- * Extends all native HTML `<button>` attributes and accepts an icon prop.
- * Designed for circular icon-only buttons that follow the same
- * design-system patterns as the regular Button.
- */
-type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    icon: React.ReactNode;
-    size?: "small" | "medium" | "large";
-    isSecondary?: boolean;
-    isDanger?: boolean;
-    isBare?: boolean;
-    disabled?: boolean;
-    className?: string;
-};
-
-/**
- * Props for the Button component.
- *
- * Extends all native HTML `<button>` attributes, while adding
- * design-system variants and state controls.
- *
- * @typedef {React.ButtonHTMLAttributes<HTMLButtonElement> & {
- *   children?: React.ReactNode,
- *   startIcon?: React.ReactNode,
- *   endIcon?: React.ReactNode,
- *   size?: "small"|"medium"|"large",
- *   isSecondary?: boolean,
- *   isDanger?: boolean,
- *   isBare?: boolean,
- *   isStretched?: boolean,
- *   disabled?: boolean,
- *   className?: string
- * }} ButtonProps
- */
-/**
- * Button component.
- *
- * Provides design-system styled button with support for
- * multiple visual variants, sizing, and states.
- *
- * @component
- * @type {React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>}
- *
- * @example
- * ```jsx
- * <Button size="small">Save</Button>
- * <Button isSecondary>Cancel</Button>
- * <Button isDanger disabled>Delete</Button>
- * ```
- */
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-/**
- * Props for the Button component.
- *
- * Extends all native HTML `<button>` attributes, while adding
- * design-system variants and state controls.
- */
-type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    children?: React.ReactNode;
-    startIcon?: React.ReactNode;
-    endIcon?: React.ReactNode;
-    size?: "small" | "medium" | "large";
-    isSecondary?: boolean;
-    isDanger?: boolean;
-    isBare?: boolean;
-    isStretched?: boolean;
-    disabled?: boolean;
-    className?: string;
-};
-
-/**
- * Props for the MenuButton component.
- *
- * @typedef {Object} MenuButtonProps
- * @property {React.ReactNode} [children] - Content to display inside the button (usually label or icon).
- * @property {"small"|"medium"} [size="medium"] - Size variant controlling button height.
- */
-/**
- * MenuButton component.
- *
- * Provides a styled menu trigger button with optional sizing.
- * It uses a `MenuButtonContext` provider to share internal state
- * with child menu items.
- *
- * @component
- * @type {React.FC<MenuButtonProps>}
- *
- * @example
- * ```jsx
- * <MenuButton size="small">Options</MenuButton>
- * ```
- */
-declare function MenuButton({ children, size }: {
-    children: any;
-    size: any;
-}): react_jsx_runtime.JSX.Element;
-
-/**
- * @typedef {Object} ButtonGroupOption
- * @property {React.ReactNode} [label] - Main label for the option.
- * @property {React.ReactNode} [startAdornment] - Optional leading element (icon, badge, etc.).
- * @property {React.ReactNode} [endIcon] - Optional trailing element (legacy alias).
- * @property {React.ReactNode} [endAdornment] - Optional trailing element.
- * @property {string|number} [value] - Unique value used for selection.
- * @property {boolean} [disabled] - Whether the option is disabled.
- */
-/**
- * Segmented button group with animated active state.
- *
- * @typedef {React.HTMLAttributes<HTMLDivElement> & {
- *   value?: string|number,
- *   defaultValue?: string|number,
- *   onChange?: (value: string|number, option: ButtonGroupOption) => void,
- *   size?: "small"|"medium"|"large",
- *   isStretched?: boolean,
- * }} ButtonGroupProps
- */
-declare const ButtonGroup: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
-
-declare function ButtonGroupItem(_props: any): any;
-declare namespace ButtonGroupItem {
-    let displayName: string;
-}
-
-/**
- * ButtonCounter (stepper) component.
- *
- * Renders decrement/increment buttons with a central value display.
- * Supports the same size + variant flags as the main Button.
- *
- * @typedef {React.HTMLAttributes<HTMLDivElement> & {
- *   value?: number,
- *   defaultValue?: number,
- *   onChange?: (value: number) => void,
- *   min?: number,
- *   max?: number,
- *   step?: number,
- *   children?: React.ReactNode,
- *   size?: "small"|"medium"|"large",
- *   isSecondary?: boolean,
- *   isDanger?: boolean,
- *   isBare?: boolean,
- *   isStretched?: boolean,
- *   disabled?: boolean,
- *   isEditable?: boolean,
- *   inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "value"|"defaultValue"|"onChange"|"type">,
- *   decrementIcon?: React.ReactNode,
- *   incrementIcon?: React.ReactNode,
- *   startIcon?: React.ReactNode,
- *   endIcon?: React.ReactNode,
- *   decrementButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>,
- *   incrementButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>,
- *   className?: string,
- * }} ButtonCounterProps
- */
-/**
- * @type {React.ForwardRefExoticComponent<ButtonCounterProps & React.RefAttributes<HTMLDivElement>>}
- */
-declare const ButtonCounter: React.ForwardRefExoticComponent<ButtonCounterProps & React.RefAttributes<HTMLDivElement>>;
-/**
- * ButtonCounter (stepper) component.
- *
- * Renders decrement/increment buttons with a central value display.
- * Supports the same size + variant flags as the main Button.
- */
-type ButtonCounterProps = React.HTMLAttributes<HTMLDivElement> & {
-    value?: number;
-    defaultValue?: number;
-    onChange?: (value: number) => void;
-    min?: number;
-    max?: number;
-    step?: number;
-    children?: React.ReactNode;
-    size?: "small" | "medium" | "large";
-    isSecondary?: boolean;
-    isDanger?: boolean;
-    isBare?: boolean;
-    isStretched?: boolean;
-    disabled?: boolean;
-    isEditable?: boolean;
-    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type">;
-    decrementIcon?: React.ReactNode;
-    incrementIcon?: React.ReactNode;
-    startIcon?: React.ReactNode;
-    endIcon?: React.ReactNode;
-    decrementButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
-    incrementButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
-    className?: string;
-};
-
-export { Button, ButtonCounter, ButtonGroup, ButtonGroupItem, IconButton, MenuButton };