@mantine/core/esm/components/Switch/Switch.mjs

React components library focused on usability, accessibility and developer experience

"use client";
import { getRadius, getSize } from "../../core/utils/get-size/get-size.mjs";
import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
import { getThemeColor } from "../../core/MantineProvider/color-functions/get-theme-color/get-theme-color.mjs";
import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
import { extractStyleProps } from "../../core/Box/style-props/extract-style-props/extract-style-props.mjs";
import { factory } from "../../core/factory/factory.mjs";
import { Box } from "../../core/Box/Box.mjs";
import { InlineInput, InlineInputClasses } from "../../utils/InlineInput/InlineInput.mjs";
import { SwitchGroup, SwitchGroupContext } from "./SwitchGroup/SwitchGroup.mjs";
import Switch_module_default from "./Switch.module.mjs";
import { use } from "react";
import { useId as useId$1, useUncontrolled } from "@mantine/hooks";
import { jsx, jsxs } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Switch/Switch.tsx
const defaultProps = {
	labelPosition: "right",
	withThumbIndicator: true
};
const varsResolver = createVarsResolver((theme, { radius, color, size }) => ({ root: {
	"--switch-radius": radius === void 0 ? void 0 : getRadius(radius),
	"--switch-height": getSize(size, "switch-height"),
	"--switch-width": getSize(size, "switch-width"),
	"--switch-thumb-size": getSize(size, "switch-thumb-size"),
	"--switch-label-font-size": getSize(size, "switch-label-font-size"),
	"--switch-track-label-padding": getSize(size, "switch-track-label-padding"),
	"--switch-color": color ? getThemeColor(color, theme) : void 0
} }));
const Switch = factory((_props) => {
	const props = useProps("Switch", defaultProps, _props);
	const { classNames, className, style, styles, unstyled, vars, color, label, offLabel, onLabel, id, size, radius, wrapperProps, thumbIcon, checked, defaultChecked, onChange, labelPosition, description, error, disabled, variant, rootRef, mod, withThumbIndicator, attributes, ...others } = props;
	const ctx = use(SwitchGroupContext);
	const _size = size || ctx?.size;
	const getStyles = useStyles({
		name: "Switch",
		props,
		classes: Switch_module_default,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		vars,
		varsResolver
	});
	const { styleProps, rest } = extractStyleProps(others);
	const uuid = useId$1(id);
	const withContextProps = {
		checked: ctx?.value.includes(rest.value) ?? checked,
		onChange: (event) => {
			ctx?.onChange(event);
			onChange?.(event);
		}
	};
	const _disabled = disabled || ctx?.isDisabled?.(rest.value);
	const [_checked, handleChange] = useUncontrolled({
		value: withContextProps.checked ?? checked,
		defaultValue: defaultChecked,
		finalValue: false
	});
	return /* @__PURE__ */ jsxs(InlineInput, {
		...getStyles("root"),
		__staticSelector: "Switch",
		__stylesApiProps: props,
		id: uuid,
		size: _size,
		labelPosition,
		label,
		description,
		error,
		disabled: _disabled,
		bodyElement: "label",
		labelElement: "span",
		classNames,
		styles,
		unstyled,
		"data-checked": withContextProps.checked,
		variant,
		ref: rootRef,
		mod,
		attributes,
		inert: rest.inert,
		...styleProps,
		...wrapperProps,
		children: [/* @__PURE__ */ jsx("input", {
			...rest,
			...withContextProps,
			disabled: _disabled,
			checked: _checked,
			"data-checked": withContextProps.checked,
			onChange: (event) => {
				withContextProps.onChange?.(event);
				handleChange(event.currentTarget.checked);
			},
			id: uuid,
			type: "checkbox",
			role: "switch",
			inert: rest.inert,
			...getStyles("input")
		}), /* @__PURE__ */ jsxs(Box, {
			"aria-hidden": "true",
			component: "span",
			mod: {
				error,
				"label-position": labelPosition,
				"without-labels": !onLabel && !offLabel
			},
			...getStyles("track"),
			children: [/* @__PURE__ */ jsx(Box, {
				component: "span",
				mod: {
					"reduce-motion": true,
					"with-thumb-indicator": withThumbIndicator && !thumbIcon
				},
				...getStyles("thumb"),
				children: thumbIcon
			}), /* @__PURE__ */ jsx("span", {
				...getStyles("trackLabel"),
				children: _checked ? onLabel : offLabel
			})]
		})]
	});
});
Switch.classes = {
	...Switch_module_default,
	...InlineInputClasses
};
Switch.varsResolver = varsResolver;
Switch.displayName = "@mantine/core/Switch";
Switch.Group = SwitchGroup;
//#endregion
export { Switch };

//# sourceMappingURL=Switch.mjs.map