@lobehub/ui/es/LobeSwitch/LobeSwitch.mjs

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

'use client';

import Icon_default from "../Icon/Icon.mjs";
import { styles } from "./style.mjs";
import { LobeSwitchIcon, LobeSwitchRoot, LobeSwitchThumb } from "./atoms.mjs";
import { memo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { cx } from "antd-style";
import { Loader2 } from "lucide-react";

//#region src/LobeSwitch/LobeSwitch.tsx
const LobeSwitch = memo(({ autoFocus, checked, checkedChildren, className, classNames, defaultChecked, defaultValue, disabled, id, loading, name, onChange, onClick, ref, rootClassName, size = "default", style, styles: customStyles, tabIndex, title, unCheckedChildren, value }) => {
	const isDisabled = disabled || loading;
	const resolvedChecked = value ?? checked;
	const resolvedDefaultChecked = defaultValue ?? defaultChecked;
	return /* @__PURE__ */ jsxs(LobeSwitchRoot, {
		autoFocus,
		checked: resolvedChecked,
		className: cx(className, rootClassName, classNames?.root),
		defaultChecked: resolvedDefaultChecked,
		disabled: isDisabled,
		id,
		name,
		onCheckedChange: onChange,
		onClick,
		ref,
		size,
		style: {
			...style,
			...customStyles?.root
		},
		tabIndex,
		title,
		children: [
			checkedChildren && /* @__PURE__ */ jsx(LobeSwitchIcon, {
				className: classNames?.content,
				position: "left",
				size,
				style: customStyles?.content,
				children: checkedChildren
			}),
			unCheckedChildren && /* @__PURE__ */ jsx(LobeSwitchIcon, {
				className: classNames?.content,
				position: "right",
				size,
				style: customStyles?.content,
				children: unCheckedChildren
			}),
			/* @__PURE__ */ jsx(LobeSwitchThumb, {
				className: classNames?.thumb,
				size,
				style: customStyles?.thumb,
				children: loading && /* @__PURE__ */ jsx(Icon_default, {
					className: styles.loading,
					icon: Loader2,
					size: size === "small" ? 8 : 12,
					style: { color: "var(--lobe-color-primary)" }
				})
			})
		]
	});
});
LobeSwitch.displayName = "LobeSwitch";
var LobeSwitch_default = LobeSwitch;

//#endregion
export { LobeSwitch_default as default };
//# sourceMappingURL=LobeSwitch.mjs.map