@lobehub/ui/es/base-ui/Button/SplitButton.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

"use client";
import DropdownMenu from "../DropdownMenu/DropdownMenu.mjs";
import Button from "./Button.mjs";
import { createContext, use, useMemo } from "react";
import { jsx } from "react/jsx-runtime";
import { createStaticStyles, cx } from "antd-style";
import { ChevronDownIcon } from "lucide-react";
//#region src/base-ui/Button/SplitButton.tsx
const SplitButtonContext = createContext({});
const styles = createStaticStyles(({ css, cssVar }) => ({
	interactionDisabled: css`
    opacity: 0.5;

    & > :where(button, a):disabled,
    & > :where(button, a)[aria-disabled='true'] {
      opacity: 1;
    }
  `,
	solid: css`
    & > :where(button, a):last-of-type::before {
      pointer-events: none;
      content: '';

      position: absolute;
      inset-block: 0;
      inset-inline-start: 0;

      width: 1px;

      opacity: 0.2;
      background: currentcolor;
    }
  `,
	solidDanger: css`
    &:has(> :where(button, a):hover:not(:disabled, [aria-disabled='true'])) > :where(button, a) {
      border-color: ${cssVar.colorErrorHover};
      background: ${cssVar.colorErrorHover};
    }

    &:has(> :where(button, a):active:not(:disabled, [aria-disabled='true'])) > :where(button, a) {
      border-color: ${cssVar.colorErrorActive};
      background: ${cssVar.colorErrorActive};
    }
  `,
	solidPrimary: css`
    &:has(> :where(button, a):hover:not(:disabled, [aria-disabled='true'])) > :where(button, a) {
      border-color: ${cssVar.colorPrimaryHover};
      background: ${cssVar.colorPrimaryHover};
    }

    &:has(> :where(button, a):active:not(:disabled, [aria-disabled='true'])) > :where(button, a) {
      border-color: ${cssVar.colorPrimaryActive};
      background: ${cssVar.colorPrimaryActive};
    }
  `,
	splitButton: css`
    display: inline-flex;
    flex-direction: row;

    & > :where(button, a):first-of-type {
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }

    & > :where(button, a):last-of-type {
      margin-inline-start: -1px;
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }
  `
}));
const SplitButton = ({ children, className, style, danger, disabled, loading, size, type }) => {
	const shared = useMemo(() => ({
		danger,
		disabled,
		loading,
		size,
		type
	}), [
		danger,
		disabled,
		loading,
		size,
		type
	]);
	return /* @__PURE__ */ jsx(SplitButtonContext, {
		value: shared,
		children: /* @__PURE__ */ jsx("div", {
			style,
			className: cx(styles.splitButton, type === "primary" && styles.solid, type === "primary" && (danger ? styles.solidDanger : styles.solidPrimary), (disabled || loading) && styles.interactionDisabled, className),
			children
		})
	});
};
const SplitButtonMain = (props) => {
	const shared = use(SplitButtonContext);
	return /* @__PURE__ */ jsx(Button, {
		...shared,
		...props
	});
};
const SplitButtonMenu = ({ icon = /* @__PURE__ */ jsx(ChevronDownIcon, { size: 14 }), disabled, ...menuProps }) => {
	const shared = use(SplitButtonContext);
	const interactionDisabled = disabled || shared.disabled || shared.loading;
	return /* @__PURE__ */ jsx(DropdownMenu, {
		...menuProps,
		disabled: interactionDisabled,
		children: /* @__PURE__ */ jsx(Button, {
			...shared,
			disabled: interactionDisabled,
			icon
		})
	});
};
SplitButton.Main = SplitButtonMain;
SplitButton.Menu = SplitButtonMenu;
//#endregion
export { SplitButton as default };

//# sourceMappingURL=SplitButton.mjs.map