@edux-design/buttons 0.0.3 → 0.0.4

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @edux-design/buttons
 
+## 0.0.4
+
+### Patch Changes
+
+- b9d0d32: Added documentation
+- Updated dependencies [b9d0d32]
+- Updated dependencies
+  - @edux-design/utils@0.0.3
+
 ## 0.0.3
 
 ### Patch Changes

package/README.md

@@ -0,0 +1,110 @@
+# @edux-design/buttons
+
+Headless-ish button primitives wired to the Edux design tokens. The package ships four components:
+
+- `Button` – primary action button with size + variant helpers.
+- `IconButton` – circular/square icon surface that reuses the same states.
+- `MenuButton` – trigger wrapper that pairs nicely with popovers/menus.
+- `ButtonGroup` – segmented control with a sliding active state meant for contextual filters.
+
+Everything is built with Tailwind utilities via the shared `cx` helper so styling stays consistent with the rest of the system.
+
+---
+
+## Installation
+
+```bash
+pnpm add @edux-design/buttons @edux-design/utils
+# or
+npm install @edux-design/buttons @edux-design/utils
+```
+
+Peer deps: `react@^19.1.0`, `react-dom@^19.1.0`.
+
+---
+
+## Usage
+
+```jsx
+import { Button, IconButton, MenuButton } from "@edux-design/buttons";
+import { Close, Chevron } from "@edux-design/icons";
+
+export function Actions() {
+  return (
+    <div className="flex gap-4">
+      <Button size="small">Save</Button>
+      <Button isSecondary isStretched>
+        Cancel
+      </Button>
+      <Button isDanger disabled>
+        Delete
+      </Button>
+      <IconButton icon={<Close />} aria-label="Close dialog" />
+      <MenuButton caret={<Chevron />} onClick={() => null}>
+        Options
+      </MenuButton>
+    </div>
+  );
+}
+```
+
+### ButtonGroup
+
+```jsx
+import React from "react";
+import { ButtonGroup } from "@edux-design/buttons";
+import { Warning } from "@edux-design/icons";
+
+export function SegmentedFilter() {
+  const [value, setValue] = React.useState("inbox");
+
+  return (
+    <ButtonGroup
+      value={value}
+      onChange={(nextValue) => setValue(nextValue)}
+      options={[
+        { value: "inbox", label: "Label (11)" },
+        { value: "drafts", label: "Label (11)" },
+        {
+          value: "alerts",
+          label: "Label",
+          endAdornment: <Warning className="h-4 w-4 text-warning-600" />,
+        },
+      ]}
+    />
+  );
+}
+```
+
+Provide `options` as strings or objects (`{ value, label, startAdornment, endAdornment, disabled }`). The active pill animates over the newly selected option and the group behaves like an accessible radiogroup (arrow keys + home/end). Use `isStretched` when the control should fill the parent width.
+
+### Key props
+
+| Component     | Important props |
+| ------------- | --------------- |
+| `Button`      | `size="small"|"medium"|"large"`, `isSecondary`, `isDanger`, `isBare`, `isStretched`, `disabled` |
+| `IconButton`  | `icon`, `size`, `isBare`, `isDanger`, `disabled` |
+| `MenuButton`  | Accepts all `Button` props plus caret slot and ARIA attributes for menu triggers |
+| `ButtonGroup` | `options`, `value` / `defaultValue`, `onChange`, `size`, `isStretched`, per-option `startAdornment` / `endAdornment`, `disabled` |
+
+Buttons warn in development if you pass conflicting variant booleans so you know which style wins.
+
+---
+
+## Development
+
+```bash
+pnpm --filter @edux-design/buttons lint
+pnpm --filter @edux-design/buttons check-types
+pnpm --filter @edux-design/buttons build
+```
+
+Stories live under `src/demo` (e.g. `Button.stories.jsx`, `ButtonGroup.stories.jsx`) for quick visual verification.
+
+---
+
+## Notes
+
+- Variants map directly to the design tokens defined in `@edux-design/tokens`.
+- Hover/focus styles are already applied; avoid overriding unless you have a matching token.
+- If you need new variants (ghost, link, destructive-secondary, etc.), add them in `Button.jsx` and update the stories + README accordingly.

package/dist/index.d.mts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 
 /**
  * Props for the IconButton component.
@@ -129,4 +130,30 @@ declare function MenuButton({ children, size }: {
     size: any;
 }): react_jsx_runtime.JSX.Element;
 
-export { Button, IconButton, MenuButton };
+/**
+ * @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.
+ * @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;
+}
+
+export { Button, ButtonGroup, ButtonGroupItem, IconButton, MenuButton };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 
 /**
  * Props for the IconButton component.
@@ -129,4 +130,30 @@ declare function MenuButton({ children, size }: {
     size: any;
 }): react_jsx_runtime.JSX.Element;
 
-export { Button, IconButton, MenuButton };
+/**
+ * @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.
+ * @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;
+}
+
+export { Button, ButtonGroup, ButtonGroupItem, IconButton, MenuButton };

package/dist/index.js

@@ -30,6 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Button: () => Button,
+  ButtonGroup: () => ButtonGroup,
+  ButtonGroupItem: () => ButtonGroupItem,
   IconButton: () => IconButton,
   MenuButton: () => MenuButton
 });
@@ -1819,19 +1821,19 @@ var require_react_jsx_runtime_development = __commonJS({
       function validateChildKeys(node) {
         "object" === typeof node && null !== node && node.$$typeof === REACT_ELEMENT_TYPE && node._store && (node._store.validated = 1);
       }
-      var React5 = require_react(), REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler");
-      var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy"), REACT_ACTIVITY_TYPE = Symbol.for("react.activity"), REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"), ReactSharedInternals = React5.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, hasOwnProperty = Object.prototype.hasOwnProperty, isArrayImpl = Array.isArray, createTask = console.createTask ? console.createTask : function() {
+      var React7 = require_react(), REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler");
+      var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy"), REACT_ACTIVITY_TYPE = Symbol.for("react.activity"), REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"), ReactSharedInternals = React7.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, hasOwnProperty = Object.prototype.hasOwnProperty, isArrayImpl = Array.isArray, createTask = console.createTask ? console.createTask : function() {
         return null;
       };
-      React5 = {
+      React7 = {
         react_stack_bottom_frame: function(callStackForError) {
           return callStackForError();
         }
       };
       var specialPropKeyWarningShown;
       var didWarnAboutElementRef = {};
-      var unknownOwnerDebugStack = React5.react_stack_bottom_frame.bind(
-        React5,
+      var unknownOwnerDebugStack = React7.react_stack_bottom_frame.bind(
+        React7,
         UnknownOwner
       )();
       var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
@@ -1880,7 +1882,8 @@ var import_jsx_runtime22 = __toESM2(require_jsx_runtime());
 var import_jsx_runtime32 = __toESM2(require_jsx_runtime());
 var import_jsx_runtime4 = __toESM2(require_jsx_runtime());
 var import_jsx_runtime5 = __toESM2(require_jsx_runtime());
-var SvgChevron = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+var import_jsx_runtime6 = __toESM2(require_jsx_runtime());
+var SvgChevron = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1889,7 +1892,7 @@ var SvgChevron = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     fill: "none",
     viewBox: "0 0 24 24",
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "path",
       {
         fill: "currentColor",
@@ -1901,7 +1904,6 @@ var SvgChevron = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
   }
 );
 var Chevron_default = SvgChevron;
-var import_jsx_runtime6 = __toESM2(require_jsx_runtime());
 var import_jsx_runtime7 = __toESM2(require_jsx_runtime());
 var import_jsx_runtime8 = __toESM2(require_jsx_runtime());
 var import_jsx_runtime9 = __toESM2(require_jsx_runtime());
@@ -1944,9 +1946,16 @@ var import_jsx_runtime45 = __toESM2(require_jsx_runtime());
 var import_jsx_runtime46 = __toESM2(require_jsx_runtime());
 var import_jsx_runtime47 = __toESM2(require_jsx_runtime());
 var import_jsx_runtime48 = __toESM2(require_jsx_runtime());
+var import_jsx_runtime49 = __toESM2(require_jsx_runtime());
+var import_jsx_runtime50 = __toESM2(require_jsx_runtime());
+var import_jsx_runtime51 = __toESM2(require_jsx_runtime());
+var import_jsx_runtime52 = __toESM2(require_jsx_runtime());
+var import_jsx_runtime53 = __toESM2(require_jsx_runtime());
+var import_jsx_runtime54 = __toESM2(require_jsx_runtime());
+var import_jsx_runtime55 = __toESM2(require_jsx_runtime());
 
 // src/elements/MenuButton.jsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function MenuButton({ children, size }) {
   const SPLIT_BUTTON_STYLES = (0, import_utils3.cx)(
     "w-[36px] border-l-[1px] border-l-black flex flex-row justify-center items-center",
@@ -1955,14 +1964,321 @@ function MenuButton({ children, size }) {
       "h-[40px] py-2": size === "medium" || size === void 0
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(MenuButtonContext.Provider, { value: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: SPLIT_BUTTON_STYLES, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Chevron_default, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(MenuButtonContext.Provider, { value: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: SPLIT_BUTTON_STYLES, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Chevron_default, {})
   ] });
 }
+
+// src/elements/ButtonGroup.jsx
+var import_react5 = __toESM(require("react"));
+var import_utils4 = require("@edux-design/utils");
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var SIZE_STYLES = {
+  small: {
+    button: "text-xs px-12 py-6 rounded-md "
+  },
+  medium: {
+    button: "text-sm px-12 py-6 rounded-md "
+  },
+  large: {
+    button: "text-base px-12 py-6 rounded-md"
+  }
+};
+var isBrowser = typeof window !== "undefined";
+var useIsomorphicLayoutEffect = isBrowser ? import_react5.useLayoutEffect : import_react5.useEffect;
+var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
+  value,
+  defaultValue,
+  onChange,
+  size = "medium",
+  isStretched = false,
+  className,
+  children,
+  ...rest
+}, forwardedRef) {
+  const normalizedOptions = (0, import_react5.useMemo)(() => {
+    const childItems = (0, import_utils4.filterChildrenByDisplayName)(children, "ButtonGroupItem");
+    return childItems.map((child, index) => {
+      const props = child.props || {};
+      const hasValue = props.value !== void 0;
+      const safeValue = hasValue && props.value !== null ? props.value : index;
+      return {
+        ...props,
+        label: props.label ?? props.children ?? `Option ${index + 1}`,
+        value: safeValue
+      };
+    });
+  }, [children]);
+  const sizeStyles = SIZE_STYLES[size] ?? SIZE_STYLES.medium;
+  const initialValue = value ?? defaultValue ?? (normalizedOptions.length ? normalizedOptions[0].value : void 0);
+  const [internalValue, setInternalValue] = (0, import_react5.useState)(initialValue);
+  const isControlled = value !== void 0;
+  const selectedValue = isControlled ? value : internalValue;
+  (0, import_react5.useEffect)(() => {
+    if (!isControlled && defaultValue !== void 0) {
+      setInternalValue(defaultValue);
+    }
+  }, [defaultValue, isControlled]);
+  (0, import_react5.useEffect)(() => {
+    if (isControlled) return;
+    if (normalizedOptions.length && !normalizedOptions.some((option) => option.value === internalValue)) {
+      setInternalValue(normalizedOptions[0].value);
+    }
+  }, [internalValue, isControlled, normalizedOptions]);
+  const buttonRefs = (0, import_react5.useRef)(/* @__PURE__ */ new Map());
+  const containerRef = (0, import_react5.useRef)(null);
+  const indicatorRef = (0, import_react5.useRef)({ width: 0, height: 0, x: 0, y: 0 });
+  const [indicator, setIndicator] = (0, import_react5.useState)({
+    width: 0,
+    height: 0,
+    x: 0,
+    y: 0
+  });
+  const setContainerRef = (0, import_react5.useCallback)(
+    (node) => {
+      containerRef.current = node;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else if (forwardedRef) {
+        forwardedRef.current = node;
+      }
+    },
+    [forwardedRef]
+  );
+  const registerButtonRef = (0, import_react5.useCallback)((optionValue) => {
+    return (node) => {
+      if (!buttonRefs.current) return;
+      if (node) {
+        buttonRefs.current.set(optionValue, node);
+      } else {
+        buttonRefs.current.delete(optionValue);
+      }
+    };
+  }, []);
+  const updateIndicator = (0, import_react5.useCallback)(() => {
+    const container = containerRef.current;
+    const target = buttonRefs.current.get(selectedValue);
+    if (!container || !target) {
+      if (indicatorRef.current.width !== 0) {
+        indicatorRef.current = { width: 0, height: 0, x: 0, y: 0 };
+        setIndicator(indicatorRef.current);
+      }
+      return;
+    }
+    const containerRect = container.getBoundingClientRect();
+    const targetRect = target.getBoundingClientRect();
+    const next = {
+      width: targetRect.width,
+      height: targetRect.height,
+      x: targetRect.left - containerRect.left,
+      y: targetRect.top - containerRect.top
+    };
+    const prev = indicatorRef.current;
+    if (prev.width !== next.width || prev.height !== next.height || prev.x !== next.x || prev.y !== next.y) {
+      indicatorRef.current = next;
+      setIndicator(next);
+    }
+  }, [selectedValue]);
+  useIsomorphicLayoutEffect(() => {
+    updateIndicator();
+  }, [updateIndicator, normalizedOptions.length, size]);
+  (0, import_react5.useEffect)(() => {
+    if (!isBrowser) return;
+    const handleResize = () => updateIndicator();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [updateIndicator]);
+  (0, import_react5.useEffect)(() => {
+    if (!isBrowser) return;
+    const node = containerRef.current;
+    if (!node || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      updateIndicator();
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [updateIndicator]);
+  const focusOption = (0, import_react5.useCallback)((option) => {
+    const node = buttonRefs.current.get(option.value);
+    if (node) {
+      node.focus();
+    }
+  }, []);
+  const handleSelect = (0, import_react5.useCallback)(
+    (option) => {
+      if (option.disabled || option.value === selectedValue) {
+        return;
+      }
+      if (!isControlled) {
+        setInternalValue(option.value);
+      }
+      if (typeof onChange === "function") {
+        onChange(option.value, option);
+      }
+    },
+    [isControlled, onChange, selectedValue]
+  );
+  const getNextEnabledIndex = (0, import_react5.useCallback)(
+    (startIndex, direction) => {
+      if (!normalizedOptions.length) return -1;
+      let nextIndex = startIndex;
+      for (let i = 0; i < normalizedOptions.length; i += 1) {
+        nextIndex = (nextIndex + direction + normalizedOptions.length) % normalizedOptions.length;
+        if (!normalizedOptions[nextIndex].disabled) {
+          return nextIndex;
+        }
+      }
+      return startIndex;
+    },
+    [normalizedOptions]
+  );
+  const findFirstEnabledIndex = (0, import_react5.useCallback)(() => {
+    return normalizedOptions.findIndex((option) => !option.disabled);
+  }, [normalizedOptions]);
+  const findLastEnabledIndex = (0, import_react5.useCallback)(() => {
+    for (let i = normalizedOptions.length - 1; i >= 0; i -= 1) {
+      if (!normalizedOptions[i].disabled) {
+        return i;
+      }
+    }
+    return -1;
+  }, [normalizedOptions]);
+  const indicatorVisible = indicator.width > 0 && indicator.height > 0;
+  const rootClasses = (0, import_utils4.cx)(
+    "inline-flex h-[44px] rounded-lg border-2 border-border-subtle bg-bg-base/90 p-2 shadow-inner",
+    isStretched ? "w-full" : "w-auto",
+    className
+  );
+  const trackClasses = (0, import_utils4.cx)(
+    "relative isolate flex w-full items-center gap-8",
+    !isStretched && "w-auto"
+  );
+  const buttonBaseClasses = (0, import_utils4.cx)(
+    "relative z-10 h-[36px] inline-flex items-center justify-center gap-2 whitespace-nowrap font-semibold tracking-tight transition-colors duration-200 ease-out focus-visible:outline-none focus-visible:shadow-focus motion-reduce:duration-0",
+    sizeStyles.button,
+    isStretched ? "flex-1" : "w-auto"
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    "div",
+    {
+      ...rest,
+      ref: setContainerRef,
+      role: "radiogroup",
+      className: rootClasses,
+      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: trackClasses, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: (0, import_utils4.cx)(
+              "pointer-events-none h-[44px] absolute rounded-md border-2 border-border-primary-emphasis bg-bg-base shadow-[0_8px_20px_rgb(22_92_131/0.18)] transition-[transform,width,height] duration-300 ease-out motion-reduce:duration-0",
+              !indicatorVisible && "opacity-0"
+            ),
+            style: {
+              width: indicator.width || void 0,
+              height: indicator.height || void 0,
+              transform: `translate(${indicator.x - 4}px`
+            }
+          }
+        ),
+        normalizedOptions.map((option, index) => {
+          const isActive = option.value === selectedValue;
+          const handleKeyDown = (event) => {
+            if (option.disabled) return;
+            if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+              event.preventDefault();
+              const nextIndex = getNextEnabledIndex(index, 1);
+              const nextOption = normalizedOptions[nextIndex];
+              if (nextOption && nextOption !== option) {
+                focusOption(nextOption);
+                handleSelect(nextOption);
+              }
+            } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+              event.preventDefault();
+              const prevIndex = getNextEnabledIndex(index, -1);
+              const prevOption = normalizedOptions[prevIndex];
+              if (prevOption && prevOption !== option) {
+                focusOption(prevOption);
+                handleSelect(prevOption);
+              }
+            } else if (event.key === "Home") {
+              event.preventDefault();
+              const firstIndex = findFirstEnabledIndex();
+              const firstOption = firstIndex >= 0 ? normalizedOptions[firstIndex] : void 0;
+              if (firstOption && firstOption !== option) {
+                focusOption(firstOption);
+                handleSelect(firstOption);
+              }
+            } else if (event.key === "End") {
+              event.preventDefault();
+              const lastIndex = findLastEnabledIndex();
+              const lastOption = lastIndex >= 0 ? normalizedOptions[lastIndex] : void 0;
+              if (lastOption && lastOption !== option) {
+                focusOption(lastOption);
+                handleSelect(lastOption);
+              }
+            }
+          };
+          const buttonClasses = (0, import_utils4.cx)(
+            buttonBaseClasses,
+            option.disabled ? "cursor-not-allowed text-fg-inactive opacity-60" : "cursor-pointer text-fg-subtle hover:text-fg-base",
+            isActive && "text-fg-primary-emphasis",
+            !isActive && "hover:bg-bg-minimal-5 active:bg-bg-inactive"
+          );
+          const hasStartAdornment = option.startAdornment !== void 0 && option.startAdornment !== null;
+          const hasendIcon = option.endIcon !== void 0 && option.endIcon !== null;
+          return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+            "button",
+            {
+              ref: registerButtonRef(option.value),
+              type: "button",
+              role: "radio",
+              "aria-checked": isActive,
+              disabled: option.disabled,
+              className: buttonClasses,
+              onClick: () => handleSelect(option),
+              onKeyDown: handleKeyDown,
+              "data-state": isActive ? "active" : "inactive",
+              children: [
+                hasStartAdornment && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "flex items-center text-current",
+                    children: option.startAdornment
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "flex items-center gap-1 leading-none text-current", children: option.label ?? `Option ${index + 1}` }),
+                hasendIcon && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "flex items-center text-current",
+                    children: option.endIcon
+                  }
+                )
+              ]
+            },
+            String(option.value)
+          );
+        })
+      ] })
+    }
+  );
+});
+
+// src/elements/ButtonGroupItem.jsx
+var import_react6 = __toESM(require("react"));
+function ButtonGroupItem(_props) {
+  return null;
+}
+ButtonGroupItem.displayName = "ButtonGroupItem";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
+  ButtonGroup,
+  ButtonGroupItem,
   IconButton,
   MenuButton
 });