import { activeClassName } from "../utils/consts.js";
import { filterUndefined } from "../utils/object.js";
import { cs } from "../utils/styles.js";
import { th } from "../core/theme.js";
import styled from "../core/styled.js";
import vui from "../core/vui.js";
import { ButtonGroupProvider } from "./context.js";
import { getInnerBorderColor } from "./helpers.js";
import { useMemo } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/buttonGroup/buttonGroup.tsx
const ButtonGroupBase = styled.divBox`
  display: flex;

  // Border color between Buttons
  > *:not(:last-of-type):not(:focus) {
    border-right-color: ${(p) => th.color(p.innerBorderColor)};
  }

  // First Button
  > *:first-of-type:not(:last-of-type) {
    border-right-width: 1px;
  }

  // Middle Buttons
  > *:not(:first-of-type):not(:last-of-type) {
    border-left-width: 0px;
    border-right-width: 1px;
  }

  // Last Button
  > *:not(:first-of-type):last-of-type {
    border-left-width: 0px;
    margin-right: 0;
  }

  // Border color
  > *,
  *:hover {
    border-color: ${(p) => th.color(p.innerBorderColor)};
  }

  //
  > .${activeClassName}.vui-button-variant-secondaryDark {
    background-color: ${th.color("skyBlue.90")};
  }

  > .${activeClassName}.vui-button-variant-buttonGroupRounded {
    background-color: ${th.color("seaBlue.main")};
    color: ${th.color("white")};
  }

  > .vui-button-variant-buttonGroupRounded {
    border-left-width: 1px !important;
  }

  > .${activeClassName}.vui-button-variant-buttonGroupRounded:hover {
    background-color: ${th.color("seaBlue.20")};
  }

  > .${activeClassName}.vui-button-variant-buttonGroupRounded:active {
    background-color: ${th.color("seaBlue.35")};
  }
`;
/**
* Organizes layout and display of multiple buttons. Controls border visual around and between the buttons.
* Exposes some props to the children via context.
*/
const ButtonGroup = vui((props, ref) => {
	const { className, disabled, innerBorderColor, size, variant = "default", ...rest } = props;
	return /* @__PURE__ */ jsx(ButtonGroupProvider, {
		value: useMemo(() => filterUndefined({
			disabled,
			size,
			variant: variant === "default" ? "buttonGroupDefault" : "buttonGroupRounded"
		}), [
			disabled,
			size,
			variant
		]),
		children: /* @__PURE__ */ jsx(ButtonGroupBase, {
			className: cs("vui-buttonGroup", className, `vui-buttonGroup-variant-${variant}`),
			innerBorderColor: innerBorderColor ? innerBorderColor : getInnerBorderColor(props),
			ref,
			...rest
		})
	});
});
ButtonGroup.displayName = "ButtonGroup";

//#endregion
export { ButtonGroupBase, ButtonGroup as default };
globalThis.__vuiVersion__ = "4.0.0"
//# sourceMappingURL=buttonGroup.js.map