@eightshift/ui-components 6.3.0 → 7.0.0

package/dist/checkbox-D0AWkLhp.js

@@ -0,0 +1,338 @@
+import { t as clsx } from "./clsx-BUU5J41u.js";
+import { AnimatedVisibility } from "./components/animated-visibility/animated-visibility.js";
+import { i as $4e85f108e88277b8$export$b085522c77523c51 } from "./RSPContexts-C_z0bI8W.js";
+import { c as $64fa3d84918910a7$export$fabf2dc03a41866e, d as $5dc95899b306f630$export$c9058316764c140e, l as $df56164dff5785e2$export$4338b53315abf666, n as $64fa3d84918910a7$export$29f1550f4b0d4415, o as $64fa3d84918910a7$export$df3a06d6289f983e, r as $64fa3d84918910a7$export$4d86445c2cf5e3, s as $64fa3d84918910a7$export$ef03459518577ad4, u as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "./utils-B_uiqNa4.js";
+import { t as $6179b936705e76d3$export$ae780daf29e6d456 } from "./useHover-qaMm3XFO.js";
+import { t as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps-_2_3GD-K.js";
+import { t as $f6c31cce2adf654f$export$45712eceda6fad21 } from "./usePress-ZP1TjkFf.js";
+import { t as $f7dceffc5ad7768b$export$4e328f61c538687f } from "./useFocusRing-DuYL4cdO.js";
+import { t as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "./VisuallyHidden-CfsnJHZb.js";
+import { a as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, i as $e5be200c675c3b3a$export$dad6ae84456c676a, n as $e93e671b31057976$export$b8473d3665f3a75a, r as $e5be200c675c3b3a$export$a763b9476acd3eb } from "./FieldError-BWDbP5Db.js";
+import { t as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "./useToggle-ecIirvIM.js";
+import { t as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "./useToggleState-IIDbiKPl.js";
+import { n as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "./Label-DFXXxMKY.js";
+import { t as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "./Form-DTMkbrQY.js";
+import { RichLabel } from "./components/rich-label/rich-label.js";
+import { t as cva } from "./dist-DIK9pFxO.js";
+import { check } from "./icons/ui-icons/check.js";
+import React, { createContext, forwardRef, useContext, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region node_modules/@react-aria/checkbox/dist/useCheckbox.mjs
+function $406796ff087fe49b$export$e375f10ce42261c5(props, state, inputRef) {
+	let validationState = $e5be200c675c3b3a$export$fc1a364ae1f3ff10({
+		...props,
+		value: state.isSelected
+	});
+	let { isInvalid, validationErrors, validationDetails } = validationState.displayValidation;
+	let { labelProps, inputProps, isSelected, isPressed, isDisabled, isReadOnly } = $d2c8e2b0480f3f34$export$cbe85ee05b554577({
+		...props,
+		isInvalid
+	}, state, inputRef);
+	$e93e671b31057976$export$b8473d3665f3a75a(props, validationState, inputRef);
+	let { isIndeterminate, isRequired, validationBehavior = "aria" } = props;
+	useEffect(() => {
+		if (inputRef.current) inputRef.current.indeterminate = !!isIndeterminate;
+	});
+	let { pressProps } = $f6c31cce2adf654f$export$45712eceda6fad21({
+		isDisabled: isDisabled || isReadOnly,
+		onPress() {
+			let { [$e5be200c675c3b3a$export$a763b9476acd3eb]: groupValidationState } = props;
+			let { commitValidation } = groupValidationState ? groupValidationState : validationState;
+			commitValidation();
+		}
+	});
+	return {
+		labelProps: $3ef42575df84b30b$export$9d1611c77c2fe928(labelProps, pressProps, useMemo(() => ({ onMouseDown: (e) => e.preventDefault() }), [])),
+		inputProps: {
+			...inputProps,
+			checked: isSelected,
+			"aria-required": isRequired && validationBehavior === "aria" || void 0,
+			required: isRequired && validationBehavior === "native"
+		},
+		isSelected,
+		isPressed,
+		isDisabled,
+		isReadOnly,
+		isInvalid,
+		validationErrors,
+		validationDetails
+	};
+}
+//#endregion
+//#region node_modules/@react-aria/checkbox/dist/utils.mjs
+var $1ae600c947479353$export$ec98120685d4f57d = new WeakMap();
+//#endregion
+//#region node_modules/@react-aria/checkbox/dist/useCheckboxGroupItem.mjs
+function $fba3e38d5ca8983f$export$353b32fc6898d37d(props, state, inputRef) {
+	const toggleState = $3017fa7ffdddec74$export$8042c6c013fd5226({
+		isReadOnly: props.isReadOnly || state.isReadOnly,
+		isSelected: state.isSelected(props.value),
+		defaultSelected: state.defaultValue.includes(props.value),
+		onChange(isSelected) {
+			if (isSelected) state.addValue(props.value);
+			else state.removeValue(props.value);
+			if (props.onChange) props.onChange(isSelected);
+		}
+	});
+	let { name, form, descriptionId, errorMessageId, validationBehavior } = $1ae600c947479353$export$ec98120685d4f57d.get(state);
+	var _props_validationBehavior;
+	validationBehavior = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : validationBehavior;
+	let { realtimeValidation } = $e5be200c675c3b3a$export$fc1a364ae1f3ff10({
+		...props,
+		value: toggleState.isSelected,
+		name: void 0,
+		validationBehavior: "aria"
+	});
+	let nativeValidation = useRef($e5be200c675c3b3a$export$dad6ae84456c676a);
+	let updateValidation = () => {
+		state.setInvalid(props.value, realtimeValidation.isInvalid ? realtimeValidation : nativeValidation.current);
+	};
+	useEffect(updateValidation);
+	let combinedRealtimeValidation = state.realtimeValidation.isInvalid ? state.realtimeValidation : realtimeValidation;
+	let displayValidation = validationBehavior === "native" ? state.displayValidation : combinedRealtimeValidation;
+	var _props_isRequired;
+	let res = $406796ff087fe49b$export$e375f10ce42261c5({
+		...props,
+		isReadOnly: props.isReadOnly || state.isReadOnly,
+		isDisabled: props.isDisabled || state.isDisabled,
+		name: props.name || name,
+		form: props.form || form,
+		isRequired: (_props_isRequired = props.isRequired) !== null && _props_isRequired !== void 0 ? _props_isRequired : state.isRequired,
+		validationBehavior,
+		[$e5be200c675c3b3a$export$a763b9476acd3eb]: {
+			realtimeValidation: combinedRealtimeValidation,
+			displayValidation,
+			resetValidation: state.resetValidation,
+			commitValidation: state.commitValidation,
+			updateValidation(v) {
+				nativeValidation.current = v;
+				updateValidation();
+			}
+		}
+	}, toggleState, inputRef);
+	return {
+		...res,
+		inputProps: {
+			...res.inputProps,
+			"aria-describedby": [
+				props["aria-describedby"],
+				state.isInvalid ? errorMessageId : null,
+				descriptionId
+			].filter(Boolean).join(" ") || void 0
+		}
+	};
+}
+//#endregion
+//#region node_modules/react-aria-components/dist/Checkbox.mjs
+var $bc237834342dbd75$export$139c5b8563afc1fc = createContext(null);
+var $bc237834342dbd75$export$48513f6b9f8ce62d = forwardRef(function Checkbox(props, ref) {
+	let { inputRef: userProvidedInputRef = null, ...otherProps } = props;
+	[props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(otherProps, ref, $4e85f108e88277b8$export$b085522c77523c51);
+	let { validationBehavior: formValidationBehavior } = $64fa3d84918910a7$export$fabf2dc03a41866e($d3e0e05bdfcf66bd$export$c24727297075ec6a) || {};
+	var _props_validationBehavior, _ref;
+	let validationBehavior = (_ref = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : formValidationBehavior) !== null && _ref !== void 0 ? _ref : "native";
+	let groupState = useContext($bc237834342dbd75$export$139c5b8563afc1fc);
+	let inputRef = $df56164dff5785e2$export$4338b53315abf666(useMemo(() => $5dc95899b306f630$export$c9058316764c140e(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null), [userProvidedInputRef, props.inputRef]));
+	let { labelProps, inputProps, isSelected, isDisabled, isReadOnly, isPressed, isInvalid } = groupState ? $fba3e38d5ca8983f$export$353b32fc6898d37d({
+		...$64fa3d84918910a7$export$ef03459518577ad4(props),
+		value: props.value,
+		children: typeof props.children === "function" ? true : props.children
+	}, groupState, inputRef) : $406796ff087fe49b$export$e375f10ce42261c5({
+		...$64fa3d84918910a7$export$ef03459518577ad4(props),
+		children: typeof props.children === "function" ? true : props.children,
+		validationBehavior
+	}, $3017fa7ffdddec74$export$8042c6c013fd5226(props), inputRef);
+	let { isFocused, isFocusVisible, focusProps } = $f7dceffc5ad7768b$export$4e328f61c538687f();
+	let isInteractionDisabled = isDisabled || isReadOnly;
+	let { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456({
+		...props,
+		isDisabled: isInteractionDisabled
+	});
+	let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+		...props,
+		defaultClassName: "react-aria-Checkbox",
+		values: {
+			isSelected,
+			isIndeterminate: props.isIndeterminate || false,
+			isPressed,
+			isHovered,
+			isFocused,
+			isFocusVisible,
+			isDisabled,
+			isReadOnly,
+			isInvalid,
+			isRequired: props.isRequired || false
+		}
+	});
+	let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, { global: true });
+	delete DOMProps.id;
+	delete DOMProps.onClick;
+	return React.createElement($64fa3d84918910a7$export$df3a06d6289f983e.label, {
+		...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, labelProps, hoverProps, renderProps),
+		ref,
+		slot: props.slot || void 0,
+		"data-selected": isSelected || void 0,
+		"data-indeterminate": props.isIndeterminate || void 0,
+		"data-pressed": isPressed || void 0,
+		"data-hovered": isHovered || void 0,
+		"data-focused": isFocused || void 0,
+		"data-focus-visible": isFocusVisible || void 0,
+		"data-disabled": isDisabled || void 0,
+		"data-readonly": isReadOnly || void 0,
+		"data-invalid": isInvalid || void 0,
+		"data-required": props.isRequired || void 0
+	}, React.createElement($5c3e21d68f1c4674$export$439d29a4e110a164, { elementType: "span" }, React.createElement("input", {
+		...$3ef42575df84b30b$export$9d1611c77c2fe928(inputProps, focusProps),
+		ref: inputRef
+	})), renderProps.children);
+});
+//#endregion
+//#region lib/components/checkbox/checkbox.jsx
+var checkboxClasses = cva([
+	"es:size-5 es:shrink-0",
+	"es:grid es:place-items-center es:grid-cols-1 es:grid-rows-1",
+	"es:*:row-start-1 es:*:col-start-1",
+	"es:rounded-sm",
+	"es:transition-plus es:duration-300 es:ease-spring-smooth",
+	"es:inset-ring",
+	"es:any-focus:outline-hidden",
+	"es:group-focus-visible:ring-2 es:group-focus-visible:ring-accent-500/30"
+], {
+	variants: { disabled: {
+		true: "es:cursor-not-allowed",
+		false: "es:inset-shadow-xs es:bg-linear-to-b es:from-25%"
+	} },
+	compoundVariants: [
+		{
+			flat: false,
+			disabled: false,
+			class: "es:shadow-xs es:shadow-black/5"
+		},
+		{
+			active: false,
+			disabled: false,
+			class: [
+				"es:bg-secondary-50 es:inset-ring-secondary-300/80",
+				"es:from-black/1 es:to-black/5",
+				"es:hover:bg-surface-100 es:hover:inset-ring-surface-300/60",
+				"es:inset-shadow-white/50",
+				"es:group-focus-visible:inset-ring-accent-500"
+			]
+		},
+		{
+			active: true,
+			disabled: false,
+			class: [
+				"es:bg-accent-600 es:inset-ring-accent-800/5 es:text-white",
+				"es:from-accent-50/10 es:to-accent-50/2",
+				"es:inset-shadow-accent-50/35",
+				"es:group-focus-visible:inset-ring-accent-950"
+			]
+		},
+		{
+			active: true,
+			disabled: true,
+			class: ["es:bg-secondary-400 es:inset-ring-secondary-400 es:text-white"]
+		},
+		{
+			active: false,
+			disabled: true,
+			class: ["es:bg-white es:inset-ring-secondary-300 es:text-secondary-50", "es:bg-linear-to-b es:from-secondary-800/0 es:to-secondary-800/3"]
+		}
+	],
+	defaultVariants: {
+		flat: false,
+		active: false,
+		indeterminate: false,
+		checked: false,
+		disabled: false
+	}
+});
+/**
+* A simple checkbox.
+*
+* @component
+* @param {Object} props - Component props.
+* @param {JSX.Element} [props.icon] - The checkbox icon.
+* @param {string} [props.label] - The checkbox label.
+* @param {string} [props.subtitle] - The checkbox subtitle.
+* @param {boolean} props.checked - Whether the checkbox is checked.
+* @param {boolean} [props.disabled] - Whether the checkbox is disabled.
+* @param {boolean} [props.readOnly] - Whether the checkbox is read-only.
+* @param {boolean} [props.indeterminate] - Whether the checkbox is in an indeterminate state.
+* @param {Function} props.onChange - The function to call when the checkbox is changed.
+* @param {string} [props.className] - Additional classes to add to the checkbox container.
+* @param {string} [props.labelClassName] - Additional classes to add to the label container.
+* @param {boolean} [props.alignEnd] - Whether the label should be aligned to the end.
+* @param {boolean} [props.inlineSubtitle] - If `true`, the subtitle is shown after the label instead of below it.
+* @param {boolean} [props.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
+* @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+*
+* @returns {JSX.Element} The Checkbox component.
+*
+* @example
+* <Checkbox
+*  label='My label'
+*  checked={myValue}
+*  onChange={(value) => setMyValue(value)}
+* />
+*/
+var Checkbox = (props) => {
+	const { icon, label, subtitle, checked, disabled, readOnly, indeterminate, onChange, className, labelClassName, inlineSubtitle, flat, alignEnd, children, hidden, ...other } = props;
+	if (hidden) return null;
+	return jsxs($bc237834342dbd75$export$48513f6b9f8ce62d, {
+		isDisabled: disabled,
+		isIndeterminate: indeterminate,
+		isReadOnly: readOnly,
+		isSelected: checked ?? false,
+		onChange,
+		className: clsx("es:group es:flex es:w-full es:items-center es:gap-2", className),
+		...other,
+		children: [
+			!alignEnd && (label || subtitle) && jsx(RichLabel, {
+				icon,
+				label,
+				subtitle,
+				className: labelClassName,
+				inlineSubtitle,
+				fullSizeSubtitle: true,
+				fullWidth: true,
+				as: $01b77f81d0f07f68$export$b04be29aa201d4f5,
+				noColor: true
+			}),
+			jsxs("div", {
+				className: checkboxClasses({
+					active: checked || indeterminate,
+					indeterminate,
+					checked,
+					disabled,
+					flat
+				}),
+				children: [jsx(AnimatedVisibility, {
+					transition: "scaleRotateFade",
+					visible: indeterminate,
+					className: "es:transition-none",
+					children: jsx("div", { className: clsx("es:h-0.5 es:w-3 es:rounded-full es:bg-white", !disabled && "es:shadow-xs es:shadow-accent-950/30") })
+				}), jsx(AnimatedVisibility, {
+					transition: "scaleRotateFade",
+					visible: !indeterminate && checked,
+					className: clsx("es:transition-none es:icon:size-3.5 es:icon:stroke-[2.5]", !disabled && "es:icon:drop-shadow-xs es:icon:drop-shadow-accent-950/30"),
+					noInitial: true,
+					children: check
+				})]
+			}),
+			alignEnd && (label || subtitle) && jsx(RichLabel, {
+				label,
+				subtitle,
+				className: clsx(subtitle && "es:mt-1.25", labelClassName),
+				inlineSubtitle,
+				fullSizeSubtitle: true,
+				as: $01b77f81d0f07f68$export$b04be29aa201d4f5,
+				noColor: true
+			}),
+			!(icon || label || subtitle) && children
+		]
+	});
+};
+//#endregion
+export { Checkbox as t };

package/dist/clsx-BUU5J41u.js

@@ -0,0 +1,16 @@
+//#region node_modules/clsx/dist/clsx.mjs
+function r(e) {
+	var t, f, n = "";
+	if ("string" == typeof e || "number" == typeof e) n += e;
+	else if ("object" == typeof e) if (Array.isArray(e)) {
+		var o = e.length;
+		for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+	} else for (f in e) e[f] && (n && (n += " "), n += f);
+	return n;
+}
+function clsx() {
+	for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+	return n;
+}
+//#endregion
+export { clsx as t };