@mantine/core/cjs/components/Switch/Switch.cjs

React components library focused on usability, accessibility and developer experience

"use client";
require("../../_virtual/_rolldown/runtime.cjs");
const require_get_size = require("../../core/utils/get-size/get-size.cjs");
const require_create_vars_resolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
const require_get_theme_color = require("../../core/MantineProvider/color-functions/get-theme-color/get-theme-color.cjs");
const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
const require_extract_style_props = require("../../core/Box/style-props/extract-style-props/extract-style-props.cjs");
const require_factory = require("../../core/factory/factory.cjs");
const require_Box = require("../../core/Box/Box.cjs");
const require_InlineInput = require("../../utils/InlineInput/InlineInput.cjs");
const require_SwitchGroup = require("./SwitchGroup/SwitchGroup.cjs");
const require_Switch_module = require("./Switch.module.cjs");
let react = require("react");
let _mantine_hooks = require("@mantine/hooks");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/Switch/Switch.tsx
const defaultProps = {
	labelPosition: "right",
	withThumbIndicator: true
};
const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { radius, color, size }) => ({ root: {
	"--switch-radius": radius === void 0 ? void 0 : require_get_size.getRadius(radius),
	"--switch-height": require_get_size.getSize(size, "switch-height"),
	"--switch-width": require_get_size.getSize(size, "switch-width"),
	"--switch-thumb-size": require_get_size.getSize(size, "switch-thumb-size"),
	"--switch-label-font-size": require_get_size.getSize(size, "switch-label-font-size"),
	"--switch-track-label-padding": require_get_size.getSize(size, "switch-track-label-padding"),
	"--switch-color": color ? require_get_theme_color.getThemeColor(color, theme) : void 0
} }));
const Switch = require_factory.factory((_props) => {
	const props = require_use_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 = (0, react.use)(require_SwitchGroup.SwitchGroupContext);
	const _size = size || ctx?.size;
	const getStyles = require_use_styles.useStyles({
		name: "Switch",
		props,
		classes: require_Switch_module.default,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		vars,
		varsResolver
	});
	const { styleProps, rest } = require_extract_style_props.extractStyleProps(others);
	const uuid = (0, _mantine_hooks.useId)(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] = (0, _mantine_hooks.useUncontrolled)({
		value: withContextProps.checked ?? checked,
		defaultValue: defaultChecked,
		finalValue: false
	});
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_InlineInput.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
			"aria-hidden": "true",
			component: "span",
			mod: {
				error,
				"label-position": labelPosition,
				"without-labels": !onLabel && !offLabel
			},
			...getStyles("track"),
			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
				component: "span",
				mod: {
					"reduce-motion": true,
					"with-thumb-indicator": withThumbIndicator && !thumbIcon
				},
				...getStyles("thumb"),
				children: thumbIcon
			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
				...getStyles("trackLabel"),
				children: _checked ? onLabel : offLabel
			})]
		})]
	});
});
Switch.classes = {
	...require_Switch_module.default,
	...require_InlineInput.InlineInputClasses
};
Switch.varsResolver = varsResolver;
Switch.displayName = "@mantine/core/Switch";
Switch.Group = require_SwitchGroup.SwitchGroup;
//#endregion
exports.Switch = Switch;

//# sourceMappingURL=Switch.cjs.map