@veracity/vui/dist/selectionControl/selectionControl.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { selectionControlColors, selectionControlDisabled } from "./consts.js";
import styled from "../core/styled.js";
import { useEffect, useId } from "react";

//#region src/selectionControl/selectionControl.tsx
const SelectionControlInput = styled.input`
  cursor: inherit;
  height: 100%;
  left: 0;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
`;
/** Warns once per size change when the deprecated `lg` size alias is used. */
function useDeprecatedLgSize(size, componentName) {
	useEffect(() => {
		if (size === "lg") console.warn(`[${componentName}] size='lg' is deprecated and matches 'md'. Use size='md' instead.`);
	}, [size, componentName]);
}
/** Resolves the `id`/description pairing shared by Checkbox and Radio's `helpText`/`errorText` sockets. */
function useSelectionControlDescription(idProp, helpText, errorText, isActive) {
	const generatedId = useId();
	const id = idProp ?? generatedId;
	const effectiveErrorText = isActive ? void 0 : errorText;
	const description = effectiveErrorText ?? helpText;
	return {
		description,
		descriptionId: description ? `${id}-description` : void 0,
		errorText: effectiveErrorText,
		id
	};
}
/** Priority for a selection control's border/fill colour: disabled, then error state, then checked/readOnly, then default. */
function resolveControlColor(args) {
	const { checkedColor, controlColor, disabled, disabledColor, errorColor, errorText, isActive, readOnly, readOnlyColor } = args;
	if (disabled) return disabledColor;
	if (errorText) return errorColor;
	if (isActive) return readOnly ? readOnlyColor : checkedColor;
	return controlColor;
}
/** Priority for a selection control's label colour: disabled greys it out, otherwise the default label colour. */
function resolveLabelColor(args) {
	const { disabled, disabledColor, labelColor } = args;
	return disabled ? disabledColor : labelColor;
}
/** Priority for a selection control's helper/error description colour: disabled, then error state, then helper. */
function resolveDescriptionColor(args) {
	const { disabled, disabledColor, errorColor, errorText, helperColor } = args;
	if (disabled) return disabledColor;
	if (errorText) return errorColor;
	return helperColor;
}
/**
* Error state always wins (the theme's baseStyle bakes in a non-undefined hover/pressed default, so it can't
* be treated as an opt-in override); otherwise explicit wins, then the active/inactive state colour.
*/
function resolveStateColor(args) {
	const { activeColor, errorColor, errorText, explicit, inactiveColor = activeColor, isActive } = args;
	if (errorText && errorColor) return errorColor;
	return explicit ?? (isActive ? activeColor : inactiveColor);
}
/**
* Bundles every colour computation shared by Checkbox and Radio — control border/fill, hover/pressed state,
* label and helper/error description — so both stay in lockstep with a single disabled/error/checked priority.
*/
function useSelectionControlColors(args) {
	const { controlColor, differentiateUnchecked, disabled, errorText, hoverColor, isActive, pressedColor, readOnly } = args;
	const inactiveStateColor = differentiateUnchecked ? selectionControlColors.uncheckedHover : void 0;
	const color = resolveControlColor({
		checkedColor: selectionControlColors.checked,
		controlColor,
		disabled,
		disabledColor: selectionControlDisabled.icon,
		errorColor: selectionControlColors.error,
		errorText,
		isActive,
		readOnly,
		readOnlyColor: selectionControlColors.readOnly
	});
	const controlHoverColor = resolveStateColor({
		activeColor: selectionControlColors.hover,
		errorColor: selectionControlColors.error,
		errorText,
		explicit: hoverColor,
		inactiveColor: inactiveStateColor,
		isActive
	});
	const controlPressedColor = resolveStateColor({
		activeColor: selectionControlColors.pressed,
		errorColor: selectionControlColors.error,
		errorText,
		explicit: pressedColor,
		inactiveColor: inactiveStateColor,
		isActive
	});
	const labelColor = resolveLabelColor({
		disabled,
		disabledColor: selectionControlDisabled.text,
		labelColor: selectionControlColors.label
	});
	return {
		color,
		controlHoverColor,
		controlPressedColor,
		descriptionColor: resolveDescriptionColor({
			disabled,
			disabledColor: selectionControlDisabled.text,
			errorColor: selectionControlColors.error,
			errorText,
			helperColor: selectionControlColors.helper
		}),
		labelColor
	};
}

//#endregion
export { SelectionControlInput, useDeprecatedLgSize, useSelectionControlColors, useSelectionControlDescription };
globalThis.__vuiVersion__ = "5.4.0"
//# sourceMappingURL=selectionControl.js.map