@eightshift/ui-components 6.3.0 → 7.0.0

package/dist/modal-DbVLYMkH.js

@@ -0,0 +1,318 @@
+import { t as clsx } from "./clsx-BUU5J41u.js";
+import { d as $5dc95899b306f630$export$c9058316764c140e, h as $b5e257d569688ac6$export$535bd6ca7f90a273, l as $df56164dff5785e2$export$4338b53315abf666, n as $64fa3d84918910a7$export$29f1550f4b0d4415, o as $64fa3d84918910a7$export$df3a06d6289f983e, r as $64fa3d84918910a7$export$4d86445c2cf5e3, t as $64fa3d84918910a7$export$2881499e37b75b9a, u as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "./utils-B_uiqNa4.js";
+import { H as $d4ee10de306f2510$export$e58f029f0fbfdb29, L as $c87311424ea30a05$export$fedb369cb70207f1, V as $d4ee10de306f2510$export$cd4e5573fbe2b576 } from "./useHover-qaMm3XFO.js";
+import { t as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps-_2_3GD-K.js";
+import { A as $21f1aa98acb08317$export$c57958e35f31ed73, j as $cc38e7bd3fc7b213$export$2bb74740c4e19def } from "./SelectionManager-B8lLv6Ue.js";
+import { r as $fc909762b330b746$export$61c6a8c84e605fb6 } from "./OverlayArrow-BoloUPQM.js";
+import { C as $49c51c25361d4cd2$export$ee0f7cc6afcd1c18, S as $86ea4cb521eb2e37$export$2317d149ed6f78c4, b as $337b884510726a0d$export$c6fdb837b070b4ff, n as $de32f1b87079253c$export$3ddf2d174ce01153, r as $de32f1b87079253c$export$d2f961adcb0afbe, t as $de32f1b87079253c$export$2e1e1122cf0cba88, w as $a11501f3d1d39e6c$export$ea8f71083e90600f, x as $5e3802645cc19319$export$1c3ebcada18427bf, y as $337b884510726a0d$export$14c98a7594375490 } from "./Dialog-i5VLQw1o.js";
+import { n as $d3f049242431219c$export$6d3443f2c48bfc20, t as $d3f049242431219c$export$45fda7c47f93fd48 } from "./animation-Bd2peown.js";
+import { t as Button } from "./button-COTeluL8.js";
+import { t as $5cb03073d3f54797$export$a8a3e93435678ff9 } from "./Heading-Hol-wS_B.js";
+import { t as __ } from "./build-module-sxK3nxOK.js";
+import { clear } from "./icons/ui-icons/clear.js";
+import { HStack } from "./components/layout/hstack.js";
+import React, { createContext, forwardRef, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region node_modules/@react-aria/utils/dist/useViewportSize.mjs
+var $5df64b3807dc15ee$var$visualViewport = typeof document !== "undefined" && window.visualViewport;
+function $5df64b3807dc15ee$export$d699905dd57c73ca() {
+	let isSSR = $b5e257d569688ac6$export$535bd6ca7f90a273();
+	let [size, setSize] = useState(() => isSSR ? {
+		width: 0,
+		height: 0
+	} : $5df64b3807dc15ee$var$getViewportSize());
+	useEffect(() => {
+		let updateSize = (newSize) => {
+			setSize((size) => {
+				if (newSize.width === size.width && newSize.height === size.height) return size;
+				return newSize;
+			});
+		};
+		let onResize = () => {
+			if ($5df64b3807dc15ee$var$visualViewport && $5df64b3807dc15ee$var$visualViewport.scale > 1) return;
+			updateSize($5df64b3807dc15ee$var$getViewportSize());
+		};
+		let frame;
+		let onBlur = (e) => {
+			if ($5df64b3807dc15ee$var$visualViewport && $5df64b3807dc15ee$var$visualViewport.scale > 1) return;
+			if ($21f1aa98acb08317$export$c57958e35f31ed73($d4ee10de306f2510$export$e58f029f0fbfdb29(e))) frame = requestAnimationFrame(() => {
+				let activeElement = $d4ee10de306f2510$export$cd4e5573fbe2b576();
+				if (!activeElement || !$21f1aa98acb08317$export$c57958e35f31ed73(activeElement)) updateSize({
+					width: document.documentElement.clientWidth,
+					height: document.documentElement.clientHeight
+				});
+			});
+		};
+		updateSize($5df64b3807dc15ee$var$getViewportSize());
+		if ($c87311424ea30a05$export$fedb369cb70207f1()) window.addEventListener("blur", onBlur, true);
+		if (!$5df64b3807dc15ee$var$visualViewport) window.addEventListener("resize", onResize);
+		else $5df64b3807dc15ee$var$visualViewport.addEventListener("resize", onResize);
+		return () => {
+			cancelAnimationFrame(frame);
+			if ($c87311424ea30a05$export$fedb369cb70207f1()) window.removeEventListener("blur", onBlur, true);
+			if (!$5df64b3807dc15ee$var$visualViewport) window.removeEventListener("resize", onResize);
+			else $5df64b3807dc15ee$var$visualViewport.removeEventListener("resize", onResize);
+		};
+	}, []);
+	return size;
+}
+function $5df64b3807dc15ee$var$getViewportSize() {
+	return {
+		width: $5df64b3807dc15ee$var$visualViewport ? $5df64b3807dc15ee$var$visualViewport.width * $5df64b3807dc15ee$var$visualViewport.scale : document.documentElement.clientWidth,
+		height: $5df64b3807dc15ee$var$visualViewport ? $5df64b3807dc15ee$var$visualViewport.height * $5df64b3807dc15ee$var$visualViewport.scale : document.documentElement.clientHeight
+	};
+}
+//#endregion
+//#region node_modules/@react-aria/overlays/dist/useModalOverlay.mjs
+function $8ac8429251c45e4b$export$dbc0f175b25fb0fb(props, state, ref) {
+	let { overlayProps, underlayProps } = $a11501f3d1d39e6c$export$ea8f71083e90600f({
+		...props,
+		isOpen: state.isOpen,
+		onClose: state.close
+	}, ref);
+	$49c51c25361d4cd2$export$ee0f7cc6afcd1c18({ isDisabled: !state.isOpen });
+	$337b884510726a0d$export$14c98a7594375490();
+	useEffect(() => {
+		if (state.isOpen && ref.current) return $5e3802645cc19319$export$1c3ebcada18427bf([ref.current], { shouldUseInert: true });
+	}, [state.isOpen, ref]);
+	return {
+		modalProps: $3ef42575df84b30b$export$9d1611c77c2fe928(overlayProps),
+		underlayProps
+	};
+}
+//#endregion
+//#region node_modules/react-aria-components/dist/Modal.mjs
+var $f3f84453ead64de5$export$ab57792b9b6974a6 = createContext(null);
+var $f3f84453ead64de5$var$InternalModalContext = createContext(null);
+var $f3f84453ead64de5$export$2b77a92f1a5ad772 = forwardRef(function Modal(props, ref) {
+	if (useContext($f3f84453ead64de5$var$InternalModalContext)) {
+		if (process.env.NODE_ENV !== "production" && (props.onOpenChange || props.defaultOpen !== void 0 || props.isOpen !== void 0)) {
+			const invalidSet = new Set([
+				"isDismissable",
+				"isKeyboardDismissDisabled",
+				"isOpen",
+				"defaultOpen",
+				"onOpenChange",
+				"isEntering",
+				"isExiting",
+				"UNSTABLE_portalContainer",
+				"shouldCloseOnInteractOutside"
+			]);
+			const invalidProps = Object.keys(props).filter((key) => invalidSet.has(key));
+			console.warn(`This modal is already wrapped in a ModalOverlay, props [${invalidProps.join(", ")}] should be placed on the ModalOverlay instead.`);
+		}
+		return React.createElement($f3f84453ead64de5$var$ModalContent, {
+			...props,
+			modalRef: ref
+		}, props.children);
+	}
+	let { isDismissable, isKeyboardDismissDisabled, isOpen, defaultOpen, onOpenChange, children, isEntering, isExiting, UNSTABLE_portalContainer, shouldCloseOnInteractOutside, ...otherProps } = props;
+	return React.createElement($f3f84453ead64de5$export$8948f78d83984c69, {
+		isDismissable,
+		isKeyboardDismissDisabled,
+		isOpen,
+		defaultOpen,
+		onOpenChange,
+		isEntering,
+		isExiting,
+		UNSTABLE_portalContainer,
+		shouldCloseOnInteractOutside
+	}, React.createElement($f3f84453ead64de5$var$ModalContent, {
+		...otherProps,
+		modalRef: ref
+	}, children));
+});
+function $f3f84453ead64de5$var$ModalOverlayWithForwardRef(props, ref) {
+	[props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $f3f84453ead64de5$export$ab57792b9b6974a6);
+	let contextState = useContext($de32f1b87079253c$export$d2f961adcb0afbe);
+	let localState = $fc909762b330b746$export$61c6a8c84e605fb6(props);
+	let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
+	if (state === contextState) {
+		if (process.env.NODE_ENV !== "production" && (props.onOpenChange || props.defaultOpen !== void 0 || props.isOpen !== void 0)) console.warn("This modals state is controlled by a trigger, place onOpenChange on the trigger instead.");
+	}
+	let objectRef = $df56164dff5785e2$export$4338b53315abf666(ref);
+	let modalRef = useRef(null);
+	let isOverlayExiting = $d3f049242431219c$export$45fda7c47f93fd48(objectRef, state.isOpen);
+	let isModalExiting = $d3f049242431219c$export$45fda7c47f93fd48(modalRef, state.isOpen);
+	let isExiting = isOverlayExiting || isModalExiting || props.isExiting || false;
+	let isSSR = $b5e257d569688ac6$export$535bd6ca7f90a273();
+	if (!state.isOpen && !isExiting || isSSR) return null;
+	return React.createElement($f3f84453ead64de5$var$ModalOverlayInner, {
+		...props,
+		state,
+		isExiting,
+		overlayRef: objectRef,
+		modalRef
+	});
+}
+var $f3f84453ead64de5$export$8948f78d83984c69 = forwardRef($f3f84453ead64de5$var$ModalOverlayWithForwardRef);
+function $f3f84453ead64de5$var$ModalOverlayInner({ UNSTABLE_portalContainer, ...props }) {
+	let modalRef = props.modalRef;
+	let { state } = props;
+	let { modalProps, underlayProps } = $8ac8429251c45e4b$export$dbc0f175b25fb0fb(props, state, modalRef);
+	let entering = $d3f049242431219c$export$6d3443f2c48bfc20(props.overlayRef) || props.isEntering || false;
+	let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+		...props,
+		defaultClassName: "react-aria-ModalOverlay",
+		values: {
+			isEntering: entering,
+			isExiting: props.isExiting,
+			state
+		}
+	});
+	let viewport = $5df64b3807dc15ee$export$d699905dd57c73ca();
+	let pageHeight = void 0;
+	if (typeof document !== "undefined") {
+		let scrollingElement = $cc38e7bd3fc7b213$export$2bb74740c4e19def(document.body) ? document.body : document.scrollingElement || document.documentElement;
+		let fractionalHeightDifference = scrollingElement.getBoundingClientRect().height % 1;
+		pageHeight = scrollingElement.scrollHeight - fractionalHeightDifference;
+	}
+	let style = {
+		...renderProps.style,
+		"--visual-viewport-height": viewport.height + "px",
+		"--page-height": pageHeight !== void 0 ? pageHeight + "px" : void 0
+	};
+	return React.createElement($337b884510726a0d$export$c6fdb837b070b4ff, {
+		isExiting: props.isExiting,
+		portalContainer: UNSTABLE_portalContainer
+	}, React.createElement($64fa3d84918910a7$export$df3a06d6289f983e.div, {
+		...$3ef42575df84b30b$export$9d1611c77c2fe928($65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, { global: true }), underlayProps),
+		...renderProps,
+		style,
+		ref: props.overlayRef,
+		"data-entering": entering || void 0,
+		"data-exiting": props.isExiting || void 0
+	}, React.createElement($64fa3d84918910a7$export$2881499e37b75b9a, { values: [[$f3f84453ead64de5$var$InternalModalContext, {
+		modalProps,
+		modalRef,
+		isExiting: props.isExiting,
+		isDismissable: props.isDismissable
+	}], [$de32f1b87079253c$export$d2f961adcb0afbe, state]] }, renderProps.children)));
+}
+function $f3f84453ead64de5$var$ModalContent(props) {
+	let { modalProps, modalRef, isExiting, isDismissable } = useContext($f3f84453ead64de5$var$InternalModalContext);
+	let state = useContext($de32f1b87079253c$export$d2f961adcb0afbe);
+	let ref = $df56164dff5785e2$export$4338b53315abf666(useMemo(() => $5dc95899b306f630$export$c9058316764c140e(props.modalRef, modalRef), [props.modalRef, modalRef]));
+	let entering = $d3f049242431219c$export$6d3443f2c48bfc20(ref);
+	let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+		...props,
+		defaultClassName: "react-aria-Modal",
+		values: {
+			isEntering: entering,
+			isExiting,
+			state
+		}
+	});
+	return React.createElement($64fa3d84918910a7$export$df3a06d6289f983e.div, {
+		...$3ef42575df84b30b$export$9d1611c77c2fe928($65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, { global: true }), modalProps),
+		...renderProps,
+		ref,
+		"data-entering": entering || void 0,
+		"data-exiting": isExiting || void 0
+	}, isDismissable && React.createElement($86ea4cb521eb2e37$export$2317d149ed6f78c4, { onDismiss: state.close }), renderProps.children);
+}
+//#endregion
+//#region lib/components/modal/modal.jsx
+/**
+* @typedef {import('../button/button').ButtonProps} ButtonProps
+* */
+/**
+* Modal dialog.
+*
+* @component
+* @param {Object} props - Component props.
+* @param {boolean} [props.open] - **Controlled mode ** - whether the modal is open.
+* @param {boolean} [props.defaultOpen] - **Uncontrolled mode ** - whether the modal is initially open.
+* @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display in the modal footer, typically buttons.
+* @param {JSX.Element|JSX.Element[]} [props.headerActions] - Actions to display in the modal header, next to the close button (if enabled).
+* @param {string|JSX.Element} [props.triggerLabel] - Label for the trigger button.
+* @param {JSX.Element} [props.triggerIcon] - Trigger button icon.
+* @param {ButtonProps} [props.triggerProps] - Props to pass to the trigger button.
+* @param {ReactNode} [props.customTrigger] - If provided, replaces the default trigger button. The passed component should be something button-related that can open the modal.
+* @param {string|JSX.Element} [props.title] - Title of the modal.
+* @param {boolean} [props.noCloseButton] - If `true`, the close button will not be displayed.
+* @param {boolean} [props.noClickToDismiss] - If `true`, the modal will not close when clicking outside of it.
+* @param {boolean} [props.noKeyboardDismiss] - If `true`, the modal will not close when pressing the `Esc` key.
+* @param {boolean} [props.noBackdrop] - If `true`, the modal will not have a visible backdrop. Functionally, it'll still be there. For an experience without a backdrop, consider using the `Popover` component instead.
+* @param {string} [props.className] - Classes to pass to the modal container.
+* @param {string} [props.overlayClassName] - Classes to pass to the modal backdrop.
+* @param {string} [props.actionsClassName] - Classes to pass to the modal footer (actions) container.
+* @param {string} [props.headerClassName] - Classes to pass to the modal header container.
+* @param {string} [props.contentContainerClassName] - Classes to pass to the modal content container.
+* @param {Function} [props.shouldCloseOnInteractOutside=() => true] - Allows ignoring close events for certain elements. `(element: HTMLElement) => boolean`.
+* @param {Function} [props.onOpenChange] - Function called when the modal's open state changes. `(isOpen: boolean) => void`
+* @param {ModalWidth} [props.width='default'] - Determines the modal width.
+*
+* @typedef {'default' | 'wide'} ModalWidth
+*
+* @returns {JSX.Element} The Modal component.
+*
+* @example
+* <Modal>
+*  <p>Modal content</p>
+* </Modal>
+*/
+var Modal = (props) => {
+	const { triggerLabel, triggerIcon, triggerProps, customTrigger, open } = props;
+	if (typeof open !== "undefined") return jsx(ModalInternal, { ...props });
+	return jsxs($de32f1b87079253c$export$2e1e1122cf0cba88, { children: [
+		!customTrigger && jsx(Button, {
+			icon: triggerIcon,
+			...triggerProps,
+			children: triggerLabel ?? (!triggerIcon && __("Open", "eightshift-ui-components"))
+		}),
+		customTrigger,
+		jsx(ModalInternal, { ...props })
+	] });
+};
+var ModalInternal = (props) => {
+	const { children, shouldCloseOnInteractOutside, open, defaultOpen, onOpenChange, title, actions, headerActions, noCloseButton, noClickToDismiss, noKeyboardDismiss, noBackdrop, "aria-label": ariaLabel, className, headerClassName, actionsClassName, overlayClassName, contentContainerClassName, width = "default", ...rest } = props;
+	return jsx($f3f84453ead64de5$export$8948f78d83984c69, {
+		isDismissable: !noClickToDismiss,
+		defaultOpen,
+		isOpen: open,
+		shouldCloseOnInteractOutside,
+		onOpenChange,
+		isKeyboardDismissDisabled: noKeyboardDismiss,
+		className: ({ isEntering, isExiting }) => clsx("es:font-sans", "es:fixed es:inset-0 es:z-9999 es:flex es:min-h-full es:items-center es:justify-center es:overflow-hidden es:p-4", !noBackdrop && "es:bg-accent-950/20 es:backdrop-blur-xs", isEntering && "es:motion-opacity-in es:motion-duration-150", isExiting && "es:motion-opacity-out es:motion-duration-150", overlayClassName),
+		...rest,
+		children: jsx($f3f84453ead64de5$export$2b77a92f1a5ad772, {
+			className: ({ isEntering, isExiting }) => clsx("es:w-full es:overflow-y-hidden es:rounded-3xl es:inset-ring es:inset-ring-surface-400/30 es:bg-white es:bg-linear-to-b es:from-accent-300/3 es:to-accent-300/1 es:text-left es:align-middle es:shadow-xl es:text-surface-900", width === "default" && "es:max-w-lg", width === "wide" && "es:max-w-[80vw]", isEntering && "es:motion-scale-in-95 es:motion-fade-in es:motion-translate-y-in-[2rem] es:motion-duration-300 es:motion-ease-spring-smooth/scale", isExiting && "es:motion-scale-out-95 es:motion-fade-out es:motion-translate-y-out-[2rem] es:motion-duration-250 es:motion-ease-spring-smooth/scale", className),
+			children: jsx($de32f1b87079253c$export$3ddf2d174ce01153, {
+				className: clsx("es:relative es:text-sm es:outline-hidden", (!title || headerActions) && "es:pt-8"),
+				"aria-label": ariaLabel,
+				children: ({ close }) => jsxs(Fragment$1, { children: [
+					jsxs(HStack, {
+						className: clsx(title && "es:p-6 es:pb-3 es:justify-between", headerClassName),
+						children: [title && jsx($5cb03073d3f54797$export$a8a3e93435678ff9, {
+							className: "es:text-balance es:text-3xl! es:my-0! es:text-accent-800 es:font-variation-[\"wdth\"_40,\"wght\"_425,\"slnt\"_-3,\"ROND\"_100]",
+							slot: "title",
+							children: title
+						}), (!noCloseButton || headerActions) && jsxs(HStack, {
+							className: !title && "es:absolute es:top-3 es:right-3 es:z-20",
+							children: [headerActions, !noCloseButton && jsx(Button, {
+								className: !title && "es:bg-surface-50/60 es:backdrop-blur-lg",
+								onPress: close,
+								type: "ghost",
+								size: "small",
+								icon: clear,
+								"aria-label": __("Close", "eightshift-ui-components"),
+								tooltip: true
+							})]
+						})]
+					}),
+					children && jsx("div", {
+						className: clsx("es:px-6 es:space-y-2.5 es:overflow-y-auto es:max-h-[70vh]", !actions && "es:mb-6", contentContainerClassName),
+						children
+					}),
+					actions && jsx(HStack, {
+						className: clsx("es:justify-end es:px-6 es:py-4", actionsClassName),
+						children: actions
+					})
+				] })
+			})
+		})
+	});
+};
+//#endregion
+export { Modal as t };

package/dist/number-ZZIxJukn.js

@@ -0,0 +1,40 @@
+//#region node_modules/@react-stately/utils/dist/number.mjs
+/**
+* Takes a value and forces it to the closest min/max if it's outside. Also forces it to the closest valid step.
+*/ function $9446cca9a3875146$export$7d15b64cf5a3a4c4(value, min = -Infinity, max = Infinity) {
+	return Math.min(Math.max(value, min), max);
+}
+function $9446cca9a3875146$export$e1a7b8e69ef6c52f(value, step) {
+	let roundedValue = value;
+	let precision = 0;
+	let stepString = step.toString();
+	let eIndex = stepString.toLowerCase().indexOf("e-");
+	if (eIndex > 0) precision = Math.abs(Math.floor(Math.log10(Math.abs(step)))) + eIndex;
+	else {
+		let pointIndex = stepString.indexOf(".");
+		if (pointIndex >= 0) precision = stepString.length - pointIndex;
+	}
+	if (precision > 0) {
+		let pow = Math.pow(10, precision);
+		roundedValue = Math.round(roundedValue * pow) / pow;
+	}
+	return roundedValue;
+}
+function $9446cca9a3875146$export$cb6e0bb50bc19463(value, min, max, step) {
+	min = Number(min);
+	max = Number(max);
+	let remainder = (value - (isNaN(min) ? 0 : min)) % step;
+	let snappedValue = $9446cca9a3875146$export$e1a7b8e69ef6c52f(Math.abs(remainder) * 2 >= step ? value + Math.sign(remainder) * (step - Math.abs(remainder)) : value - remainder, step);
+	if (!isNaN(min)) {
+		if (snappedValue < min) snappedValue = min;
+		else if (!isNaN(max) && snappedValue > max) snappedValue = min + Math.floor($9446cca9a3875146$export$e1a7b8e69ef6c52f((max - min) / step, step)) * step;
+	} else if (!isNaN(max) && snappedValue > max) snappedValue = Math.floor($9446cca9a3875146$export$e1a7b8e69ef6c52f(max / step, step)) * step;
+	snappedValue = $9446cca9a3875146$export$e1a7b8e69ef6c52f(snappedValue, step);
+	return snappedValue;
+}
+function $9446cca9a3875146$export$b6268554fba451f(value, digits, base = 10) {
+	const pow = Math.pow(base, digits);
+	return Math.round(value * pow) / pow;
+}
+//#endregion
+export { $9446cca9a3875146$export$b6268554fba451f as n, $9446cca9a3875146$export$cb6e0bb50bc19463 as r, $9446cca9a3875146$export$7d15b64cf5a3a4c4 as t };

package/dist/number-picker-CkA1iJNZ.js

@@ -0,0 +1,268 @@
+import { t as clsx } from "./clsx-BUU5J41u.js";
+import { c as $64fa3d84918910a7$export$fabf2dc03a41866e, i as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, n as $64fa3d84918910a7$export$29f1550f4b0d4415, o as $64fa3d84918910a7$export$df3a06d6289f983e, r as $64fa3d84918910a7$export$4d86445c2cf5e3, s as $64fa3d84918910a7$export$ef03459518577ad4, t as $64fa3d84918910a7$export$2881499e37b75b9a } from "./utils-B_uiqNa4.js";
+import { t as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps-_2_3GD-K.js";
+import { t as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "./Button-h6xF_WrP.js";
+import { t as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./context-C-XNeJ_l.js";
+import { r as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, t as $81397a9303501bda$export$23f548e970bdf099 } from "./useNumberField-2xbi3jRV.js";
+import { t as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "./FieldError-BWDbP5Db.js";
+import { i as $a049562f99e7db0e$export$f9c6924e160136d1, n as $3985021b0ad6602f$export$f5b8910cec6cf069, r as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4, t as $3985021b0ad6602f$export$37fb8590cf2c088c } from "./Input-BURqyJXW.js";
+import { n as ButtonGroup, t as Button } from "./button-COTeluL8.js";
+import { n as $01b77f81d0f07f68$export$b04be29aa201d4f5, t as $01b77f81d0f07f68$export$75b6ee27786ba447 } from "./Label-DFXXxMKY.js";
+import { n as $514c0188e459b4c0$export$9afb8bc826b033ea } from "./Text-O6VBBDlP.js";
+import { t as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "./Form-DTMkbrQY.js";
+import { BaseControl } from "./components/base-control/base-control.js";
+import { t as cva } from "./dist-DIK9pFxO.js";
+import { chevronDown } from "./icons/ui-icons/chevron-down.js";
+import { chevronUp } from "./icons/ui-icons/chevron-up.js";
+import React, { createContext, forwardRef, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region node_modules/react-aria-components/dist/NumberField.mjs
+var $b91743d66a0ed188$export$b414a48cf5dcbc11 = createContext(null);
+var $b91743d66a0ed188$export$6cc906c6cff9bec5 = createContext(null);
+var $b91743d66a0ed188$export$63c5fa0b2fdccd2e = forwardRef(function NumberField(props, ref) {
+	[props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $b91743d66a0ed188$export$b414a48cf5dcbc11);
+	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 { locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
+	let state = $de67e98908f0c6ee$export$7f629e9dc1ecf37c({
+		...props,
+		locale,
+		validationBehavior
+	});
+	let inputRef = useRef(null);
+	let [labelRef, label] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(!props["aria-label"] && !props["aria-labelledby"]);
+	let { labelProps, groupProps, inputProps, incrementButtonProps, decrementButtonProps, descriptionProps, errorMessageProps, ...validation } = $81397a9303501bda$export$23f548e970bdf099({
+		...$64fa3d84918910a7$export$ef03459518577ad4(props),
+		label,
+		validationBehavior
+	}, state, inputRef);
+	let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+		...props,
+		values: {
+			state,
+			isDisabled: props.isDisabled || false,
+			isInvalid: validation.isInvalid || false,
+			isRequired: props.isRequired || false
+		},
+		defaultClassName: "react-aria-NumberField"
+	});
+	let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, { global: true });
+	delete DOMProps.id;
+	return React.createElement($64fa3d84918910a7$export$2881499e37b75b9a, { values: [
+		[$b91743d66a0ed188$export$6cc906c6cff9bec5, state],
+		[$a049562f99e7db0e$export$f9c6924e160136d1, groupProps],
+		[$3985021b0ad6602f$export$37fb8590cf2c088c, {
+			...inputProps,
+			ref: inputRef
+		}],
+		[$01b77f81d0f07f68$export$75b6ee27786ba447, {
+			...labelProps,
+			ref: labelRef
+		}],
+		[$d2b4bc8c273e7be6$export$24d547caef80ccd1, { slots: {
+			increment: incrementButtonProps,
+			decrement: decrementButtonProps
+		} }],
+		[$514c0188e459b4c0$export$9afb8bc826b033ea, { slots: {
+			description: descriptionProps,
+			errorMessage: errorMessageProps
+		} }],
+		[$ee014567cb39d3f0$export$ff05c3ac10437e03, validation]
+	] }, React.createElement($64fa3d84918910a7$export$df3a06d6289f983e.div, {
+		...DOMProps,
+		...renderProps,
+		ref,
+		slot: props.slot || void 0,
+		"data-disabled": props.isDisabled || void 0,
+		"data-required": props.isRequired || void 0,
+		"data-invalid": validation.isInvalid || void 0
+	}), props.name && React.createElement("input", {
+		type: "hidden",
+		name: props.name,
+		form: props.form,
+		value: isNaN(state.numberValue) ? "" : state.numberValue,
+		disabled: props.isDisabled || void 0
+	}));
+});
+//#endregion
+//#region lib/components/number-picker/number-picker.jsx
+var inputClass = cva([
+	"es:group",
+	"es:overflow-clip",
+	"es:flex es:items-center",
+	"es:leading-none",
+	"es:w-fit",
+	"es:rounded-lg es:focus-within:rounded-xl",
+	"es:transition-plus",
+	"es:inset-ring",
+	"es:focus-visible-within:ring-2 es:focus-visible-within:ring-accent-500/30",
+	"es:focus-visible-within:text-accent-950 es:focus-visible-within:inset-ring-accent-500",
+	"es:focus:placeholder:text-surface-400",
+	"es:text-13"
+], {
+	variants: {
+		size: {
+			small: ["es:min-h-8", "es:px-2.5 es:py-1"],
+			medium: ["es:min-h-9", "es:px-3 es:py-1"],
+			default: ["es:min-h-10", "es:px-3 es:py-1.5"],
+			large: ["es:min-h-12", "es:px-4 es:py-1.5"]
+		},
+		disabled: {
+			false: "es:selection:bg-surface-100 es:selection:text-accent-800",
+			true: "es:selection:bg-secondary-200 es:selection:text-secondary-600"
+		}
+	},
+	compoundVariants: [
+		{
+			flat: false,
+			disabled: false,
+			readOnly: false,
+			class: [
+				"es:bg-white",
+				"es:bg-linear-to-b es:from-secondary-100/0 es:to-secondary-100/50 es:from-25%",
+				"es:hover:from-surface-100/0 es:hover:to-surface-100/50",
+				"es:inset-ring-secondary-400/50 es:hover:inset-ring-surface-300 es:focus-within:inset-ring-surface-400",
+				"es:inset-shadow-sm es:inset-shadow-secondary-100/50",
+				"es:hover:placeholder:text-surface-400",
+				"es:placeholder:text-secondary-400",
+				"es:shadow-xs es:shadow-black/5"
+			]
+		},
+		{
+			flat: true,
+			disabled: false,
+			readOnly: false,
+			class: [
+				"es:inset-ring-secondary-100",
+				"es:focus-within:text-accent-950",
+				"es:placeholder:text-secondary-500/80",
+				"es:bg-secondary-100 es:focus-within:bg-surface-50",
+				"es:inset-ring-secondary-200/15 es:hover:inset-ring-secondary-200/65 es:focus-within:inset-ring-surface-200"
+			]
+		},
+		{
+			disabled: true,
+			class: ["es:bg-secondary-50 es:inset-ring-secondary-200 es:text-secondary-400"]
+		},
+		{
+			readOnly: true,
+			flat: false,
+			class: ["es:bg-secondary-50 es:inset-ring-secondary-300 es:text-secondary-400"]
+		},
+		{
+			readOnly: true,
+			flat: true,
+			class: ["es:bg-secondary-50 es:inset-ring-secondary-300/60 es:text-secondary-400"]
+		}
+	],
+	defaultVariants: {
+		disabled: false,
+		flat: false,
+		size: "default",
+		readOnly: false
+	}
+});
+/**
+* A number picker component.
+*
+* @component
+* @param {Object} props - Component props.
+* @param {number} props.value - The current value of the number picker.
+* @param {Function} props.onChange - Function to run when the value changes.
+* @param {number} [props.min=0] - The minimum value of the number picker.
+* @param {number} [props.max] - The maximum value of the number picker.
+* @param {number} [props.step=1] - The step value of the number picker.
+* @param {string} [props.label] - The label of the number picker.
+* @param {JSX.Element} [props.icon] - Icon to display within the number picker.
+* @param {string} [props.subtitle] - The subtitle of the number picker.
+* @param {string} [props.help] - The help text shown below the number picker.
+* @param {boolean} [props.readOnly] - If `true`, the number picker is read-only.
+* @param {boolean} [props.disabled] - If `true`, the number picker is disabled.
+* @param {string} [props.placeholder] - Placeholder text to display in the number picker.
+* @param {JSX.Element} [props.prefix] - Element to display to the left of the number picker.
+* @param {JSX.Element} [props.suffix] - Element to display to the right of the number picker.
+* @param {number} [props.fixedWidth] - If passed, sets the width of the input field to the provided number of characters. Useful if you have e.g. value from 1 to 1000, but you don't want the input field to change size when on lower values.
+* @param {boolean} [props.inline] - If `true`, the number picker is displayed inline.
+* @param {boolean} [props.noScrollToChange=false] - If `true`, the number picker does not change value when scrolling.
+* @param {InputSize} [props.size='default'] - Determines the input field size.
+* @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 NumberPicker component.
+*
+* @typedef {'small' | 'medium' | 'default' | 'large'} InputSize
+*
+* @example
+* <NumberPicker
+* 	value={value}
+* 	onChange={setValue}
+* />
+*/
+var NumberPicker = ({ value, onChange, min = 0, max, step = 1, label, icon, subtitle, help, readOnly, disabled, placeholder, prefix, fixedWidth = null, suffix, children, inline, noScrollToChange = false, size = "default", flat, className, hidden, ...props }) => {
+	if (hidden) return null;
+	return jsx($b91743d66a0ed188$export$63c5fa0b2fdccd2e, {
+		value,
+		onChange,
+		isDisabled: disabled,
+		isReadOnly: readOnly,
+		minValue: min,
+		maxValue: max,
+		step,
+		isWheelDisabled: noScrollToChange,
+		...props,
+		children: jsx(BaseControl, {
+			labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
+			icon,
+			label,
+			subtitle,
+			help,
+			inline,
+			children: jsxs("div", {
+				className: "es:flex es:gap-1",
+				children: [jsxs($a049562f99e7db0e$export$eb2fcfdbd7ba97d4, {
+					className: clsx(inputClass({
+						disabled,
+						flat,
+						size,
+						readOnly
+					}), className),
+					children: [
+						prefix && jsx("span", {
+							slot: "prefix",
+							className: "es:mr-1 es:-translate-y-px es:select-none es:leading-none es:text-current/65 es:font-variation-[\"wdth\"_76,\"wght\"_325,\"slnt\"_-2,\"ROND\"_100] es:group-focus-within:text-surface-500",
+							children: prefix
+						}),
+						jsx($3985021b0ad6602f$export$f5b8910cec6cf069, {
+							className: "es:font-variation-[\"wdth\"_80,\"wght\"_325,\"slnt\"_0,\"ROND\"_100] es:placeholder-shown:font-variation-[\"wdth\"_60,\"wght\"_300,\"slnt\"_-10,\"ROND\"_0] es:any-focus:outline-hidden! es:p-px! es:border-none! es:shadow-none! es:bg-transparent es:text-13!",
+							placeholder,
+							style: { width: fixedWidth ? `calc(${fixedWidth}ch + 2px)` : `calc(${min < 0 ? "1ch + " : "0.75ch + "}${Math.max((max ?? 1e3)?.toString()?.length, (placeholder ?? "")?.length)} * 1ch)` }
+						}),
+						jsxs(ButtonGroup, {
+							className: clsx("es:hidden es:transition-discrete es:gap-0! es:transition es:pl-0.5 es:ease-spring-smooth es:duration-300 es:origin-left", "es:starting:opacity-0 es:starting:translate-x-2", "es:opacity-100 es:translate-x-0", !disabled && !readOnly && "es:group-hover:flex es:group-focus-within:flex", disabled && "es:hidden"),
+							vertical: true,
+							children: [jsx(Button, {
+								type: "ghost",
+								className: clsx("es:col-start-4 es:w-4 es:disabled:opacity-40 es:text-current/80 es:group-focus-within:text-surface-500 es:icon:size-[0.65rem] es:icon:stroke-2", size === "small" ? "es:h-3" : "es:h-3.5"),
+								slot: "increment",
+								icon: chevronUp
+							}), jsx(Button, {
+								type: "ghost",
+								className: clsx("es:col-start-4 es:w-4 es:disabled:opacity-40 es:text-current/80 es:group-focus-within:text-surface-500 es:icon:size-[0.65rem] es:icon:stroke-2", size === "small" ? "es:h-3" : "es:h-3.5"),
+								slot: "decrement",
+								icon: chevronDown
+							})]
+						}),
+						suffix && jsx("span", {
+							slot: "suffix",
+							className: "es:ml-1 es:-translate-y-px es:select-none es:leading-none es:text-current/60 es:font-variation-[\"wdth\"_76,\"wght\"_325,\"slnt\"_-2,\"ROND\"_100] es:group-focus-within:text-surface-500",
+							children: suffix
+						})
+					]
+				}), children]
+			})
+		})
+	});
+};
+//#endregion
+export { NumberPicker as t };