/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d4ad2ea | Cube Dev Team */
import { extractStyles } from "../utils/styles.js";
import { EventBusProvider } from "../utils/react/useEventBus.js";
import { PortalProvider } from "./portal/PortalProvider.js";
import { VERSION } from "../version.js";
import { Provider } from "../provider.js";
import { TrackingProvider } from "../providers/TrackingProvider.js";
import { GlobalStyles } from "./GlobalStyles.js";
import { AlertDialogApiProvider } from "./overlays/AlertDialog/AlertDialogApiProvider.js";
import { OverlayProvider } from "./overlays/Notifications/OverlayProvider.js";
import { BASE_STYLES, BLOCK_STYLES, configure, filterBaseProps, tasty } from "@tenphi/tasty";
import { useEffect, useRef, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { ModalProvider } from "react-aria";

//#region src/components/Root.tsx
configure({
	colorSpace: "rgb",
	units: {
		x: "var(--gap)",
		r: "var(--radius)",
		cr: "var(--card-radius)",
		bw: "var(--border-width)",
		ow: "var(--outline-width)"
	},
	recipes: {
		reset: {
			margin: 0,
			padding: 0,
			border: 0,
			outline: 0,
			boxSizing: "border-box"
		},
		button: {
			appearance: "none",
			touchAction: "manipulation",
			textDecoration: "none",
			"-webkit-tap-highlight-color": "transparent",
			fill: "#clear",
			color: "inherit",
			cursor: {
				"": "default",
				":is(a)": "pointer",
				":is(button)": "$pointer",
				disabled: "not-allowed"
			}
		},
		input: {
			appearance: "none",
			wordSpacing: "initial",
			color: "inherit",
			fill: "#clear"
		},
		"input-autofill": {
			"@autofill": ":-webkit-autofill",
			"-webkit-text-fill-color": {
				"": "currentColor",
				"@autofill | (@autofill & :hover) | (@autofill & :focus)": "#primary"
			},
			caretColor: { "@autofill | (@autofill & :hover) | (@autofill & :focus)": "#primary" },
			shadow: { "@autofill | (@autofill & :hover) | (@autofill & :focus)": "0 0 0 9999rem rgb(255 255 255) inset" },
			preset: { "@autofill | (@autofill & :hover) | (@autofill & :focus)": "inherit" },
			"-webkit-opacity": {
				"": false,
				"[disabled]": "1"
			}
		},
		"input-placeholder": {
			"-webkit-text-fill-color": "#placeholder",
			color: "#placeholder"
		},
		"input-search-cancel-button": {
			hide: true,
			appearance: "none"
		}
	}
});
const RootElement = tasty({
	id: "cube-ui-kit-root",
	styles: {
		display: "contents",
		color: "#dark-02",
		preset: "t3"
	}
});
const STYLES = [...BASE_STYLES, ...BLOCK_STYLES];
function Root(allProps) {
	let { children, bodyStyles, fontDisplay = "swap", fonts, publicUrl, navigation, font, monospaceFont, applyLegacyTokens: _applyLegacyTokens, tracking, cursorStrategy = "web", style, tokens, ...props } = allProps;
	const ref = useRef(null);
	const [rootRef, setRootRef] = useState();
	useEffect(() => {
		if (!rootRef) setRootRef(ref?.current);
	}, []);
	const styles = extractStyles(props, STYLES);
	return /* @__PURE__ */ jsx(Provider, {
		navigation,
		root: rootRef,
		children: /* @__PURE__ */ jsx(TrackingProvider, {
			event: tracking?.event,
			children: /* @__PURE__ */ jsxs(RootElement, {
				ref,
				"data-tasty": VERSION,
				"data-font-display": fontDisplay,
				...filterBaseProps(props, { eventProps: true }),
				styles,
				style: {
					"--pointer": cursorStrategy === "web" ? "pointer" : "default",
					...style
				},
				tokens,
				children: [/* @__PURE__ */ jsx(GlobalStyles, {
					bodyStyles,
					publicUrl,
					fonts,
					font,
					monospaceFont,
					fontDisplay
				}), /* @__PURE__ */ jsx(ModalProvider, { children: /* @__PURE__ */ jsx(PortalProvider, {
					value: ref,
					children: /* @__PURE__ */ jsx(EventBusProvider, { children: /* @__PURE__ */ jsx(OverlayProvider, { children: /* @__PURE__ */ jsx(AlertDialogApiProvider, { children }) }) })
				}) })]
			})
		})
	});
}

//#endregion
export { Root };
//# sourceMappingURL=Root.js.map