@veracity/vui/dist/buttonGroup/buttonGroup.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

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)};
  }

  // Rounded variant base styles
  > .vui-button-variant-buttonGroupRounded {
    border-left-width: 1px !important;
    border-color: var(--vui-control-placeholder);
  }
`;
/**
* 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;
	const context = useMemo(() => filterUndefined({
		disabled,
		size,
		variant: variant === "default" ? "buttonGroupDefault" : "buttonGroupRounded"
	}), [
		disabled,
		size,
		variant
	]);
	return /* @__PURE__ */ jsx(ButtonGroupProvider, {
		value: context,
		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 { ButtonGroup, ButtonGroup as default, ButtonGroupBase };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=buttonGroup.js.map