// packages/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx
import { useInstanceId } from "@wordpress/compose";
import { forwardRef, useMemo } from "@wordpress/element";
import { View } from "../../view/index.js";
import { useControlledValue } from "../../utils/index.js";
import ToggleGroupControlContext from "../context.js";
import { useComputeControlledOrUncontrolledValue } from "./utils.js";
import { jsx as _jsx } from "react/jsx-runtime";
function UnforwardedToggleGroupControlAsButtonGroup({
  children,
  isAdaptiveWidth,
  label,
  onChange,
  size,
  value: valueProp,
  id: idProp,
  setSelectedElement,
  ...otherProps
}, forwardedRef) {
  const generatedId = useInstanceId(ToggleGroupControlAsButtonGroup, "toggle-group-control-as-button-group");
  const baseId = idProp || generatedId;
  const {
    value,
    defaultValue
  } = useComputeControlledOrUncontrolledValue(valueProp);
  const [selectedValue, setSelectedValue] = useControlledValue({
    defaultValue,
    value,
    onChange
  });
  const groupContextValue = useMemo(() => ({
    baseId,
    value: selectedValue,
    setValue: setSelectedValue,
    isBlock: !isAdaptiveWidth,
    isDeselectable: true,
    size,
    setSelectedElement
  }), [baseId, selectedValue, setSelectedValue, isAdaptiveWidth, size, setSelectedElement]);
  return /* @__PURE__ */ _jsx(ToggleGroupControlContext.Provider, {
    value: groupContextValue,
    children: /* @__PURE__ */ _jsx(View, {
      "aria-label": label,
      ...otherProps,
      ref: forwardedRef,
      role: "group",
      children
    })
  });
}
var ToggleGroupControlAsButtonGroup = forwardRef(UnforwardedToggleGroupControlAsButtonGroup);
export {
  ToggleGroupControlAsButtonGroup
};
//# sourceMappingURL=as-button-group.js.map
