@hitachivantara/uikit-react-core/dist/ToggleButton/ToggleButton.js

UI Kit Core React components.

import { useControlled } from "../hooks/useControlled.js";
import { HvButton } from "../Button/Button.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { forwardRef } from "react";
import { jsx } from "react/jsx-runtime";
//#region src/ToggleButton/ToggleButton.tsx
/**
* Use when two opposing states are represented and the on/off analogy doesn’t fit.
*
* Only use well-known icons—otherwise, prefer a single checkbox instead.
*/
var HvToggleButton = forwardRef(function HvToggleButton(props, ref) {
	const { defaultSelected, selected, notSelectedIcon, selectedIcon = null, onClick, children, ...others } = useDefaultProps("HvToggleButton", props);
	const [isSelected, setIsSelected] = useControlled(selected, Boolean(defaultSelected));
	return /* @__PURE__ */ jsx(HvButton, {
		ref,
		icon: true,
		selected: isSelected,
		onClick: (event) => {
			setIsSelected(!isSelected);
			onClick?.(event, !isSelected);
		},
		...others,
		children: children || (!isSelected ? notSelectedIcon : selectedIcon)
	});
});
//#endregion
export { HvToggleButton };