@mantine/core/cjs/components/SegmentedControl/SegmentedControl.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_primitive = require("../../core/utils/primitive/primitive.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_get_contrast_color = require("../../core/MantineProvider/color-functions/get-contrast-color/get-contrast-color.cjs");
const require_MantineThemeProvider = require("../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.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_factory = require("../../core/factory/factory.cjs");
const require_Box = require("../../core/Box/Box.cjs");
const require_FloatingIndicator = require("../FloatingIndicator/FloatingIndicator.cjs");
const require_SegmentedControl_module = require("./SegmentedControl.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/SegmentedControl/SegmentedControl.tsx
const defaultProps = { withItemsBorders: true };
const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { radius, color, transitionDuration, size, transitionTimingFunction }) => ({ root: {
	"--sc-radius": radius === void 0 ? void 0 : require_get_size.getRadius(radius),
	"--sc-color": color ? require_get_theme_color.getThemeColor(color, theme) : void 0,
	"--sc-shadow": color ? void 0 : "var(--mantine-shadow-xs)",
	"--sc-transition-duration": transitionDuration === void 0 ? void 0 : `${transitionDuration}ms`,
	"--sc-transition-timing-function": transitionTimingFunction,
	"--sc-padding": require_get_size.getSize(size, "sc-padding"),
	"--sc-font-size": require_get_size.getFontSize(size)
} }));
const SegmentedControl = require_factory.genericFactory((_props) => {
	const props = require_use_props.useProps("SegmentedControl", defaultProps, _props);
	const { classNames, className, style, styles, unstyled, vars, data, value, defaultValue, onChange, size, name, disabled, readOnly, fullWidth, orientation, radius, color, transitionDuration, transitionTimingFunction, variant, autoContrast, withItemsBorders, mod, attributes, ref, ...others } = props;
	const getStyles = require_use_styles.useStyles({
		name: "SegmentedControl",
		props,
		classes: require_SegmentedControl_module.default,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		vars,
		varsResolver
	});
	const theme = require_MantineThemeProvider.useMantineTheme();
	const _data = data.map((item) => require_primitive.isPrimitive(item) ? {
		label: `${item}`,
		value: item
	} : item);
	const initialized = (0, _mantine_hooks.useMounted)();
	const [key, setKey] = (0, react.useState)((0, _mantine_hooks.randomId)());
	const [parent, setParent] = (0, react.useState)(null);
	const [refs, setRefs] = (0, react.useState)({});
	const setElementRef = (element, val) => {
		refs[val] = element;
		setRefs(refs);
	};
	const [_value, handleValueChange] = (0, _mantine_hooks.useUncontrolled)({
		value,
		defaultValue,
		finalValue: Array.isArray(data) ? _data.find((item) => !item.disabled)?.value ?? data[0]?.value ?? null : null,
		onChange
	});
	const uuid = (0, _mantine_hooks.useId)(name);
	const controls = _data.map((item) => /* @__PURE__ */ (0, react.createElement)(require_Box.Box, {
		...getStyles("control"),
		mod: {
			active: _value === item.value,
			orientation
		},
		key: `${item.value}`
	}, /* @__PURE__ */ (0, react.createElement)("input", {
		...getStyles("input"),
		disabled: disabled || item.disabled,
		type: "radio",
		name: uuid,
		value: `${item.value}`,
		id: `${uuid}-${item.value}`,
		checked: _value === item.value,
		onChange: () => !readOnly && handleValueChange(item.value),
		"data-focus-ring": theme.focusRing,
		key: `${item.value}-input`
	}), /* @__PURE__ */ (0, react.createElement)(require_Box.Box, {
		component: "label",
		...getStyles("label"),
		mod: {
			active: _value === item.value && !(disabled || item.disabled),
			disabled: disabled || item.disabled,
			"read-only": readOnly
		},
		htmlFor: `${uuid}-${item.value}`,
		ref: (node) => setElementRef(node, `${item.value}`),
		__vars: { "--sc-label-color": color !== void 0 ? require_get_contrast_color.getContrastColor({
			color,
			theme,
			autoContrast
		}) : void 0 },
		key: `${item.value}-label`
	}, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
		...getStyles("innerLabel"),
		children: item.label
	}))));
	const mergedRef = (0, _mantine_hooks.useMergedRef)(ref, (node) => setParent(node));
	(0, _mantine_hooks.useShallowEffect)(() => {
		setKey((0, _mantine_hooks.randomId)());
	}, [data.length]);
	if (data.length === 0) return null;
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
		...getStyles("root"),
		variant,
		size,
		ref: mergedRef,
		mod: [{
			"full-width": fullWidth,
			orientation,
			initialized,
			"with-items-borders": withItemsBorders
		}, mod],
		...others,
		role: "radiogroup",
		"data-disabled": disabled,
		children: [typeof _value !== "undefined" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FloatingIndicator.FloatingIndicator, {
			target: refs[`${_value}`],
			parent,
			component: "span",
			transitionDuration: "var(--sc-transition-duration)",
			...getStyles("indicator")
		}, key), controls]
	});
});
SegmentedControl.classes = require_SegmentedControl_module.default;
SegmentedControl.varsResolver = varsResolver;
SegmentedControl.displayName = "@mantine/core/SegmentedControl";
//#endregion
exports.SegmentedControl = SegmentedControl;

//# sourceMappingURL=SegmentedControl.cjs.map