@lobehub/ui/es/base-ui/ToggleGroup/ToggleGroup.mjs

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

"use client";
import { ToggleGroupItem, ToggleGroupItemIcon, ToggleGroupItemLabel, ToggleGroupRoot } from "./atoms.mjs";
import { useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { cx } from "antd-style";
import useMergeState from "use-merge-value";
//#region src/base-ui/ToggleGroup/ToggleGroup.tsx
const normalizeOption = (option) => typeof option === "string" ? { value: option } : option;
const ToggleGroup = ({ className, classNames, defaultValue, disabled = false, onChange, options, ref, size = "middle", style, styles: customStyles, value, variant = "outlined" }) => {
	const [innerValue, setInnerValue] = useMergeState(defaultValue, {
		defaultValue,
		onChange: (next) => {
			if (next != null) onChange?.(next);
		},
		value
	});
	const normalizedOptions = useMemo(() => (options ?? []).map((o) => normalizeOption(o)), [options]);
	const groupValue = useMemo(() => innerValue != null ? [innerValue] : [], [innerValue]);
	return /* @__PURE__ */ jsx(ToggleGroupRoot, {
		className: cx(classNames?.root, className),
		disabled,
		ref,
		style: {
			...style,
			...customStyles?.root
		},
		value: groupValue,
		variant,
		onValueChange: (next) => {
			const picked = next[0];
			if (picked != null) setInnerValue(picked);
		},
		children: normalizedOptions.map((opt) => /* @__PURE__ */ jsxs(ToggleGroupItem, {
			"aria-label": typeof opt.label === "string" ? opt.label : opt.title,
			className: cx(classNames?.item, opt.className),
			disabled: disabled || opt.disabled,
			size,
			style: customStyles?.item,
			title: opt.title,
			value: opt.value,
			variant,
			children: [opt.icon != null && /* @__PURE__ */ jsx(ToggleGroupItemIcon, {
				className: classNames?.itemIcon,
				style: customStyles?.itemIcon,
				children: opt.icon
			}), opt.label != null && /* @__PURE__ */ jsx(ToggleGroupItemLabel, {
				className: classNames?.itemLabel,
				style: customStyles?.itemLabel,
				children: opt.label
			})]
		}, opt.value))
	});
};
ToggleGroup.displayName = "ToggleGroup";
//#endregion
export { ToggleGroup as default };

//# sourceMappingURL=ToggleGroup.mjs.map