@tamagui/web 2.7.7 → 3.0.0-beta.643.1

package/dist/esm/helpers/directStyle.mjs

@@ -0,0 +1,907 @@
+import { isAndroid, isIos, isTV, isWeb, supportsDynamicColorIOS } from "@tamagui/constants";
+import { StyleObjectIdentifier, StyleObjectRules, tokenCategories } from "@tamagui/helpers";
+import { canonicalClauseModifier, clauseConditionSetKey, clauseSubjectClassRepetitions, compareClausePrecedence, createClausePrecedenceOrder, getClausePrecedenceKeyFromKinds, isRootThemeName, scanFlatValue } from "@tamagui/style-grammar/runtime";
+import { isVariable } from "../createVariable.mjs";
+import { mediaKeyMatch } from "../hooks/useMedia.mjs";
+import { warnOnce, warnRefusedValue } from "./warnOnce.mjs";
+import { expandStyle } from "./expandStyle.mjs";
+import { getCSSStyleAtomic } from "./getCSSStylesAtomic.mjs";
+import { isColorStyleKey } from "./getDynamicVal.mjs";
+import { shouldInsertStyleRules, updateRules } from "./insertStyleRule.mjs";
+import { mediaObjectToString } from "./mediaObjectToString.mjs";
+import { normalizeColor } from "./normalizeColor.mjs";
+import { getTokenCategoryForProperty, tokenCategoryByProperty } from "./tokenCategories.mjs";
+import { resolveSafeAreaVariable } from "./resolveSafeAreaVariable.mjs";
+import { expandSafeAreaValue, isSafeAreaKey } from "./resolveSafeArea.mjs";
+import { resolveVariableValue } from "./resolveVariableValue.mjs";
+import { THEME_REF_PREFIX } from "./themeRef.mjs";
+import { transformsToString } from "./transformsToString.mjs";
+
+const baseClausePrecedence = [
+	0,
+	0,
+	0,
+	0
+];
+const stateSelectors = {
+	hover: ":hover",
+	press: ":active",
+	focus: ":focus",
+	"focus-visible": ":focus-visible",
+	"focus-within": ":focus-within",
+	disabled: "[aria-disabled]",
+	open: "[data-state=\"open\"]",
+	checked: "[data-state=\"checked\"]",
+	highlighted: "[data-highlighted]",
+	selected: "[data-state=\"active\"]",
+	invalid: "[aria-invalid=\"true\"]"
+};
+const legacyTransformParts = /* @__PURE__ */ new Set([
+	"matrix",
+	"perspective",
+	"rotateX",
+	"rotateY",
+	"rotateZ",
+	"scaleZ",
+	"skewX",
+	"skewY"
+]);
+const webShadowParts = /* @__PURE__ */ new Set([
+	"shadowColor",
+	"shadowOffset",
+	"shadowOpacity",
+	"shadowRadius"
+]);
+const webTextShadowParts = /* @__PURE__ */ new Set([
+	"textShadowColor",
+	"textShadowOffset",
+	"textShadowRadius"
+]);
+const lineStyles = /* @__PURE__ */ new Set([
+	"none",
+	"hidden",
+	"dotted",
+	"dashed",
+	"solid",
+	"double",
+	"groove",
+	"ridge",
+	"inset",
+	"outset"
+]);
+const borderTargets = {
+	border: {
+		width: [
+			"borderTopWidth",
+			"borderRightWidth",
+			"borderBottomWidth",
+			"borderLeftWidth"
+		],
+		style: [
+			"borderTopStyle",
+			"borderRightStyle",
+			"borderBottomStyle",
+			"borderLeftStyle"
+		],
+		color: [
+			"borderTopColor",
+			"borderRightColor",
+			"borderBottomColor",
+			"borderLeftColor"
+		]
+	},
+	borderTop: {
+		width: ["borderTopWidth"],
+		style: ["borderTopStyle"],
+		color: ["borderTopColor"]
+	},
+	borderRight: {
+		width: ["borderRightWidth"],
+		style: ["borderRightStyle"],
+		color: ["borderRightColor"]
+	},
+	borderBottom: {
+		width: ["borderBottomWidth"],
+		style: ["borderBottomStyle"],
+		color: ["borderBottomColor"]
+	},
+	borderLeft: {
+		width: ["borderLeftWidth"],
+		style: ["borderLeftStyle"],
+		color: ["borderLeftColor"]
+	},
+	outline: {
+		width: ["outlineWidth"],
+		style: ["outlineStyle"],
+		color: ["outlineColor"]
+	},
+	borderBlock: {
+		width: ["borderBlockStartWidth", "borderBlockEndWidth"],
+		style: ["borderBlockStartStyle", "borderBlockEndStyle"],
+		color: ["borderBlockStartColor", "borderBlockEndColor"]
+	},
+	borderInline: {
+		width: ["borderInlineStartWidth", "borderInlineEndWidth"],
+		style: ["borderInlineStartStyle", "borderInlineEndStyle"],
+		color: ["borderInlineStartColor", "borderInlineEndColor"]
+	}
+};
+const borderStyleDefaults = {
+	borderWidth: "borderStyle",
+	borderTopWidth: "borderTopStyle",
+	borderRightWidth: "borderRightStyle",
+	borderBottomWidth: "borderBottomStyle",
+	borderLeftWidth: "borderLeftStyle"
+};
+const mediaQueries = /* @__PURE__ */ new WeakMap();
+const clausePrecedenceOrders = /* @__PURE__ */ new WeakMap();
+function queryFor(state, name) {
+	let queries = mediaQueries.get(state.conf);
+	if (!queries) {
+		queries = {};
+		const media = state.conf.media || {};
+		for (const key in media) queries[key] = mediaObjectToString(media[key]);
+		mediaQueries.set(state.conf, queries);
+	}
+	return queries[name];
+}
+function precedenceOrderFor(state) {
+	let order = clausePrecedenceOrders.get(state.conf);
+	if (!order) {
+		order = createClausePrecedenceOrder(state.conf.media);
+		clausePrecedenceOrders.set(state.conf, order);
+	}
+	return order;
+}
+function stateIsActive(state, name) {
+	const component = state.componentState;
+	if (name === "hover") return !!component.hover;
+	if (name === "press") return !!(component.press || component.pressIn);
+	if (name === "focus") return !!component.focus;
+	if (name === "focus-visible") return !!component.focusVisible;
+	if (name === "focus-within") return !!component.focusWithin;
+	if (name === "disabled") return !!(component.disabled || state.props.disabled);
+	if (name === "enter") return !!component.unmounted;
+	if (name === "exit") return !!state.styleProps.isExiting;
+	return false;
+}
+function platformMatches(name) {
+	if (name === "web") return isWeb;
+	if (name === "native") return !isWeb;
+	if (name === "ios") return isIos;
+	if (name === "android") return isAndroid;
+	if (name === "tvos") return isIos && isTV;
+	if (name === "androidtv") return isAndroid && isTV;
+	return name === "tv" && isTV;
+}
+function groupCondition(state, modifier, out) {
+	const slash = modifier.indexOf("/");
+	const stateName = modifier.slice(6, slash === -1 ? void 0 : slash);
+	const groupName = slash === -1 ? "true" : modifier.slice(slash + 1);
+	const selector = stateSelectors[stateName];
+	if (!selector || !groupName) return false;
+	out.selector += `:where(.t_group_${groupName}${selector} *)`;
+	if (stateName === "hover") (out.wrappers ||= []).push("@media (hover: hover)");
+	const component = state.componentState.group?.[groupName];
+	const context = state.flatGroupContext?.[groupName];
+	out.active &&= !!(component?.pseudo ?? context?.state.pseudo)?.[stateName];
+	(state.flatGroupKeys ||= /* @__PURE__ */ new Set()).add(groupName);
+	return true;
+}
+function containerCondition(state, modifier, out) {
+	const slash = modifier.indexOf("/");
+	const size = modifier.slice(1, slash === -1 ? void 0 : slash);
+	const name = slash === -1 ? null : modifier.slice(slash + 1);
+	const query = queryFor(state, size);
+	if (!query || name !== null && !name) return false;
+	const key = name === null ? "@" : `@${name}`;
+	(out.wrappers ||= []).push(name === null ? `@container ${query}` : `@container ${name} ${query}`);
+	const component = state.componentState.group?.[key];
+	const context = state.flatGroupContext?.[key];
+	const active = component?.media?.[size];
+	out.active &&= active === void 0 ? !!(context?.state.layout && mediaKeyMatch(size, context.state.layout)) : !!active;
+	(state.flatGroupKeys ||= /* @__PURE__ */ new Set()).add(key);
+	(state.flatGroupMedia ||= /* @__PURE__ */ new Set()).add(size);
+	return true;
+}
+function getCondition(state, source) {
+	const out = {
+		key: "",
+		active: true,
+		emit: true,
+		selector: ""
+	};
+	const canonical = [];
+	const kinds = [];
+	const seenModifiers = /* @__PURE__ */ new Set();
+	let selfStateSpecificity = 0;
+	let start = 0;
+	for (let index = 0; index <= source.length; index++) {
+		if (index !== source.length && source.charCodeAt(index) !== 58) continue;
+		let modifier = canonicalClauseModifier(source.slice(start, index));
+		start = index + 1;
+		if (!modifier) return null;
+		if (seenModifiers.has(modifier)) continue;
+		seenModifiers.add(modifier);
+		if (modifier.startsWith("group-")) {
+			if (!groupCondition(state, modifier, out)) return null;
+			canonical.push(modifier);
+			kinds.push("group");
+			continue;
+		}
+		if (modifier.charCodeAt(0) === 64) {
+			if (!containerCondition(state, modifier, out)) return null;
+			canonical.push(modifier);
+			kinds.push("container");
+			continue;
+		}
+		if (modifier in stateSelectors || modifier === "enter" || modifier === "exit") {
+			canonical.push(modifier);
+			kinds.push("state");
+			selfStateSpecificity++;
+			const selector = stateSelectors[modifier];
+			if (!isWeb && modifier !== "hover" && modifier !== "press" && modifier !== "focus" && modifier !== "focus-visible" && modifier !== "focus-within" && modifier !== "disabled" && modifier !== "enter" && modifier !== "exit") out.unsupportedState = modifier;
+			if (modifier === "enter" || modifier === "exit") {
+				const cls = modifier === "enter" ? ".t_unmounted" : ".t_exiting";
+				out.selector += `:is(${cls}, ${cls} *)`;
+				out[modifier] = true;
+			} else if (selector) out.selector += selector;
+			if (modifier === "hover") (out.wrappers ||= []).push("@media (hover: hover)");
+			out.active &&= stateIsActive(state, modifier);
+			if (modifier === "hover" || modifier === "press" || modifier === "focus" || modifier === "focus-visible" || modifier === "focus-within") (state.flatStateKeys ||= /* @__PURE__ */ new Set()).add(modifier);
+			continue;
+		}
+		if (modifier in (state.conf.media || {})) {
+			const query = queryFor(state, modifier);
+			if (!query) return null;
+			canonical.push(modifier);
+			kinds.push("media");
+			(out.wrappers ||= []).push(`@media ${query}`);
+			out.active &&= !!state.flatMediaState?.[modifier];
+			(state.flatMediaKeys ||= /* @__PURE__ */ new Set()).add(modifier);
+			continue;
+		}
+		if (isRootThemeName(modifier) && modifier in (state.conf.themes || {})) {
+			canonical.push(modifier);
+			kinds.push("theme");
+			out.theme = modifier;
+			out.selector += `:where(.t_${modifier}, .t_${modifier} *)`;
+			out.active &&= state.flatThemeName === modifier || state.flatThemeName?.startsWith(`${modifier}_`) === true;
+			continue;
+		}
+		if (modifier === "web" || modifier === "native" || modifier === "ios" || modifier === "android" || modifier === "tv" || modifier === "tvos" || modifier === "androidtv") {
+			canonical.push(modifier);
+			kinds.push("platform");
+			const matches = platformMatches(modifier);
+			out.active &&= matches;
+			out.emit &&= matches;
+			continue;
+		}
+		return null;
+	}
+	out.key = clauseConditionSetKey(canonical);
+	out.precedence = getClausePrecedenceKeyFromKinds(canonical, kinds, precedenceOrderFor(state));
+	out.classRepetitions = clauseSubjectClassRepetitions(out.precedence, selfStateSpecificity);
+	return out;
+}
+const tokenLookup = {
+	value: void 0,
+	fromTheme: false,
+	themeKey: ""
+};
+function fillTokenLookup(value, fromTheme, themeKey) {
+	tokenLookup.value = value;
+	tokenLookup.fromTheme = fromTheme;
+	tokenLookup.themeKey = themeKey;
+	return tokenLookup;
+}
+function tokenVariable(state, property, name) {
+	let lookupName = name.charCodeAt(0) === 36 ? name.slice(1) : name;
+	if (property === "fontFamily") {
+		const family = state.conf.fontsParsed[lookupName]?.family;
+		return family ? fillTokenLookup(family, false, lookupName) : void 0;
+	}
+	const fontKey = property === "fontSize" ? "size" : property === "fontWeight" ? "weight" : property === "lineHeight" || property === "letterSpacing" ? property : void 0;
+	if (fontKey) {
+		const value = (state.conf.fontsParsed[state.fontFamily || state.conf.defaultFontToken] || state.conf.fontsParsed[state.conf.defaultFontToken])?.[fontKey]?.[lookupName];
+		return value ? fillTokenLookup(value, false, lookupName) : void 0;
+	}
+	const category = getTokenCategoryForProperty(property);
+	const dot = lookupName.indexOf(".");
+	if (dot !== -1) {
+		const prefix = lookupName.slice(0, dot);
+		if (!category || prefix === category || prefix === "color") lookupName = lookupName.slice(dot + 1);
+	}
+	if (category) {
+		const own = state.conf.tokensParsed[category]?.[lookupName];
+		if (own) return fillTokenLookup(own, false, lookupName);
+		for (const sibling of [
+			"color",
+			"space",
+			"size",
+			"radius",
+			"zIndex"
+		]) if (sibling !== category && state.conf.tokensParsed[sibling]?.[lookupName]) return;
+	} else {
+		const first = lookupName.charCodeAt(0);
+		if (first >= 48 && first <= 57 || first === 43 || first === 45 || first === 46) return;
+	}
+	const theme = state.theme?.[lookupName] || state.conf.themes?.[state.flatThemeName || ""]?.[lookupName];
+	if (theme) return fillTokenLookup(theme, true, lookupName);
+	if (category) return;
+	const token = state.conf.tokensParsed.space?.[lookupName] || state.conf.tokensParsed.color?.[lookupName];
+	return token ? fillTokenLookup(token, false, lookupName) : void 0;
+}
+function configuredValue(state, property, raw) {
+	let name = raw;
+	let opacity;
+	const slash = raw.lastIndexOf("/");
+	if (slash > 0) {
+		const amount = Number(raw.slice(slash + 1));
+		if (Number.isInteger(amount) && amount >= 0 && amount <= 100) {
+			name = raw.slice(0, slash);
+			opacity = amount;
+		}
+	}
+	const safeArea = resolveSafeAreaVariable(name);
+	if (safeArea !== void 0) {
+		state.flatUsesSafeArea = true;
+		return safeArea;
+	}
+	const lookup = tokenVariable(state, property, name);
+	if (!lookup || !isVariable(lookup.value)) {
+		if (process.env.NODE_ENV === "development" && tokenCategoryByProperty[property] && state.conf.tokensParsed.color?.[name]) warnOnce(`"${name}" contributes to "color", not "${property}"; keeping it literal`);
+		return raw;
+	}
+	const resolveValues = isWeb && !state.flatShouldDoClasses && state.styleProps.resolveValues === "auto" ? "value" : state.styleProps.resolveValues;
+	if (resolveValues === "except-theme" && lookup.fromTheme) return `${THEME_REF_PREFIX}${lookup.themeKey}${opacity !== void 0 ? `/${opacity}` : ""}`;
+	let value = resolveVariableValue(property, lookup.value, resolveValues);
+	if (opacity !== void 0) value = isWeb ? `color-mix(in srgb, ${value} ${opacity}%, transparent)` : normalizeColor(value, opacity / 100);
+	return value;
+}
+const letterFreeCallPattern = /^[A-Za-z-]+\([^A-Za-z]*\)$/;
+function resolveEmbeddedTokens(state, property, raw) {
+	if (letterFreeCallPattern.test(raw)) return raw;
+	return raw.replace(/[$A-Za-z_][\w.$-]*(?:\/\d+)?/g, (word, index) => {
+		if (word.charCodeAt(0) !== 36) {
+			const before = raw.charCodeAt(index - 1);
+			if (before >= 48 && before <= 57 || before === 35 || before === 45 && raw.charCodeAt(index - 2) === 45 || raw.charCodeAt(index + word.length) === 40) return word;
+		}
+		const value = configuredValue(state, property, word);
+		return value === word ? word : String(value);
+	});
+}
+function normalizeTransitionNames(state, raw) {
+	let quote = 0;
+	let depth = 0;
+	let copyFrom = 0;
+	let out = "";
+	for (let index = 0; index < raw.length; index++) {
+		const code = raw.charCodeAt(index);
+		if (quote) {
+			if (code === 92) index++;
+			else if (code === quote) quote = 0;
+			continue;
+		}
+		if (code === 34 || code === 39) {
+			quote = code;
+			continue;
+		}
+		if (code === 40) {
+			depth++;
+			continue;
+		}
+		if (code === 41) {
+			depth--;
+			continue;
+		}
+		if (depth || !(code >= 65 && code <= 90 || code >= 97 && code <= 122 || code === 95) || index > 1 && raw.charCodeAt(index - 1) === 45 && raw.charCodeAt(index - 2) === 45) continue;
+		let end = index + 1;
+		while (end < raw.length) {
+			const next = raw.charCodeAt(end);
+			if (next >= 48 && next <= 57 || next >= 65 && next <= 90 || next >= 97 && next <= 122 || next === 45 || next === 95) end++;
+			else break;
+		}
+		if (raw.charCodeAt(end) !== 40) {
+			const authored = raw.slice(index, end);
+			let property = state.conf.shorthands[authored] || authored;
+			if (property === "x" || property === "y") property = "translate";
+			else if (property === "scaleX" || property === "scaleY") property = "scale";
+			else if (legacyTransformParts.has(property)) property = "transform";
+			if (property !== authored || /[A-Z]/.test(property)) {
+				out += raw.slice(copyFrom, index);
+				out += property.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+				copyFrom = end;
+			}
+		}
+		index = end - 1;
+	}
+	return copyFrom ? out + raw.slice(copyFrom) : raw;
+}
+function directStyleSignature(property, value, conditionKey = "") {
+	return `${property}${conditionKey}${String(value)}`;
+}
+function directAtomic(state, property, value, condition, isDefault = false) {
+	const atomics = state.flatAtomics ||= {};
+	const atomicKey = property.startsWith("transition") ? "transition" : property;
+	const existing = atomics[atomicKey];
+	const contribution = directStyleSignature(property, value, condition?.key || "");
+	const signature = existing ? existing.signature + contribution : contribution;
+	const next = getCSSStyleAtomic(property, value, condition?.selector, condition?.wrappers, signature, true, atomicKey, condition?.classRepetitions);
+	if (!next) return;
+	const identifier = next[StyleObjectIdentifier];
+	const nextRules = next[StyleObjectRules];
+	const slotted = condition || atomicKey === "transition";
+	if (!existing) {
+		const atomic = {
+			baseRules: slotted ? 0 : nextRules.length,
+			conditions: void 0,
+			signature,
+			styleObject: next
+		};
+		if (slotted) atomic.conditions = { [atomicKey === "transition" ? `${condition?.key || ""}\0${property}` : condition.key]: {
+			count: nextRules.length,
+			index: 0,
+			precedence: condition?.precedence ?? baseClausePrecedence,
+			default: isDefault
+		} };
+		atomics[atomicKey] = atomic;
+	} else {
+		const previousIdentifier = existing.styleObject[StyleObjectIdentifier];
+		const rules = existing.styleObject[StyleObjectRules];
+		if (!condition && !isDefault && existing.conditions) for (const key in existing.conditions) {
+			const entry = existing.conditions[key];
+			if (!entry.default) continue;
+			rules.splice(entry.index, entry.count);
+			delete existing.conditions[key];
+			for (const otherKey in existing.conditions) {
+				const other = existing.conditions[otherKey];
+				if (other.index > entry.index) other.index -= entry.count;
+			}
+		}
+		if (previousIdentifier !== identifier) {
+			const oldSelector = `.${previousIdentifier}`;
+			const newSelector = `.${identifier}`;
+			for (let index = 0; index < rules.length; index++) rules[index] = rules[index].replaceAll(oldSelector, newSelector);
+		}
+		if (slotted) {
+			const slot = atomicKey === "transition" ? `${condition?.key || ""}\0${property}` : condition.key;
+			const previous = existing.conditions?.[slot];
+			if (previous) {
+				rules.splice(previous.index, previous.count);
+				if (existing.conditions) for (const key in existing.conditions) {
+					const entry = existing.conditions[key];
+					if (entry !== previous && entry.index > previous.index) entry.index -= previous.count;
+				}
+				delete existing.conditions[slot];
+			}
+			const precedence = condition?.precedence ?? baseClausePrecedence;
+			let insertionIndex = rules.length;
+			if (existing.conditions) {
+				for (const key in existing.conditions) {
+					const entry = existing.conditions[key];
+					if (compareClausePrecedence(entry.precedence, precedence) > 0 && entry.index < insertionIndex) insertionIndex = entry.index;
+				}
+				for (const key in existing.conditions) {
+					const entry = existing.conditions[key];
+					if (entry.index >= insertionIndex) entry.index += nextRules.length;
+				}
+			}
+			(existing.conditions ||= {})[slot] = {
+				count: nextRules.length,
+				index: insertionIndex,
+				precedence,
+				default: isDefault
+			};
+			rules.splice(insertionIndex, 0, ...nextRules);
+		} else {
+			const difference = nextRules.length - existing.baseRules;
+			rules.splice(0, existing.baseRules, ...nextRules);
+			if (difference && existing.conditions) for (const key in existing.conditions) existing.conditions[key].index += difference;
+			existing.baseRules = nextRules.length;
+		}
+		existing.signature = signature;
+		existing.styleObject[StyleObjectIdentifier] = identifier;
+		existing.styleObject[1] = next[1];
+	}
+	state.classNames[atomicKey] = identifier;
+}
+function emitBorderStyleDefault(state, property, condition) {
+	if (!isWeb || !state.flatShouldDoClasses || state.styleProps.noNormalize === false) return;
+	const target = borderStyleDefaults[property];
+	if (!target) return;
+	const atomic = state.flatAtomics?.[target];
+	if (atomic?.baseRules || state.classNames[target] && !atomic || condition && atomic?.conditions?.[condition.key]) return;
+	directAtomic(state, target, "solid", condition, true);
+}
+function flushDirectStyles(state, clear = false) {
+	const direct = state;
+	const atomics = direct.flatAtomics;
+	if (!atomics) return;
+	for (const property in atomics) {
+		const styleObject = atomics[property].styleObject;
+		const identifier = styleObject[StyleObjectIdentifier];
+		if (shouldInsertStyleRules(identifier)) {
+			updateRules(identifier, styleObject[StyleObjectRules]);
+			state.flatRulesToInsert[identifier] = styleObject;
+		}
+	}
+	if (clear) direct.flatAtomics = void 0;
+}
+function getDirectDynamicThemeAccess(state) {
+	return state.flatDynamicThemeAccess;
+}
+function emitProperty(state, property, value, condition, merge, originalValue, contextOnly) {
+	const direct = state;
+	if (condition?.enter) (state.flatEnterKeys ||= /* @__PURE__ */ new Set()).add(property);
+	if (condition?.exit) (state.flatExitKeys ||= /* @__PURE__ */ new Set()).add(property);
+	if (!isWeb && condition?.theme) {
+		if (supportsDynamicColorIOS && isColorStyleKey(property)) {
+			const schemes = (direct.flatDynamicColors ||= {})[property] ||= {};
+			schemes[condition.theme] = typeof originalValue === "string" && /^[a-z]+$/i.test(originalValue) ? originalValue : value;
+			merge(state, property, { dynamic: { ...schemes } }, 1, false, originalValue);
+			return;
+		}
+		direct.flatDynamicThemeAccess = true;
+	}
+	if (contextOnly) {
+		if (!condition || condition.active) (state.overriddenContextProps ||= {})[property] = originalValue;
+		return;
+	}
+	if (isWeb && state.flatShouldDoClasses) {
+		if (!condition) {
+			if (state.style) delete state.style[property];
+		}
+		directAtomic(state, property, value, condition);
+		return;
+	}
+	if (condition) {
+		if (!condition.active) return;
+		const previous = direct.flatPrecedence?.[property];
+		if (previous && compareClausePrecedence(condition.precedence, previous) < 0) return;
+		(direct.flatPrecedence ||= {})[property] = condition.precedence;
+		(state.flatActiveConditions ||= {})[property] = true;
+	} else if (state.flatActiveConditions?.[property]) return;
+	merge(state, property, value, 1, true, originalValue);
+}
+function splitComponents(value) {
+	const parts = [];
+	let start = 0;
+	let quote = 0;
+	let depth = 0;
+	for (let index = 0; index <= value.length; index++) {
+		const code = index === value.length ? 32 : value.charCodeAt(index);
+		if (quote) {
+			if (code === 92) index++;
+			else if (code === quote) quote = 0;
+			continue;
+		}
+		if (code === 34 || code === 39) quote = code;
+		else if (code === 40) depth++;
+		else if (code === 41) depth--;
+		else if (!depth && code <= 32) {
+			if (index > start) parts.push(value.slice(start, index));
+			start = index + 1;
+		}
+	}
+	return parts;
+}
+function emitBorder(state, property, raw, condition, merge, originalValue, contextOnly) {
+	if (!isWeb && (property === "borderBlock" || property === "borderInline")) {
+		if (process.env.NODE_ENV === "development") warnOnce(`RN has no logical border shorthand "${property}"; dropping it`);
+		return;
+	}
+	const targets = borderTargets[property];
+	let width;
+	let style;
+	let color;
+	for (const part of splitComponents(raw)) {
+		const lower = part.toLowerCase();
+		if (lineStyles.has(lower) || property === "outline" && lower === "auto") style = part;
+		else if (lower === "thin" || lower === "medium" || lower === "thick" || /^-?(?:\d+\.?\d*|\.\d+)(?:[a-z%]+)?$/i.test(part) || /^(?:calc|var|min|max|clamp)\(/i.test(part)) width = part;
+		else color = part;
+	}
+	if (style === "none" && width === void 0) width = "0";
+	if (width !== void 0) for (const target of targets.width) emitResolved(state, target, width, condition, merge, originalValue, contextOnly);
+	if (style !== void 0) {
+		const styleTargets = !isWeb && property === "border" ? ["borderStyle"] : targets.style;
+		for (const target of styleTargets) emitProperty(state, target, style, condition, merge, originalValue, contextOnly);
+	}
+	if (color !== void 0) for (const target of targets.color) emitResolved(state, target, color, condition, merge, originalValue, contextOnly);
+}
+function emitTextDecoration(state, raw, condition, merge, originalValue, contextOnly) {
+	for (const part of splitComponents(raw)) emitResolved(state, part === "solid" || part === "double" || part === "dotted" || part === "dashed" || part === "wavy" ? "textDecorationStyle" : part === "underline" || part === "overline" || part === "line-through" || part === "none" ? "textDecorationLine" : "textDecorationColor", part, condition, merge, originalValue, contextOnly);
+}
+function addComposition(state, property) {
+	if (state.classNames[property]) return;
+	const value = property === "translate" ? "var(--t-x, 0px) var(--t-y, 0px)" : "var(--t-scale-x, 1) var(--t-scale-y, 1)";
+	const defaults = property === "translate" ? "--t-x:0px;--t-y:0px" : "--t-scale-x:1;--t-scale-y:1";
+	const styleObject = getCSSStyleAtomic(property, value, "", void 0, void 0, true);
+	const identifier = styleObject[StyleObjectIdentifier];
+	styleObject[StyleObjectRules].unshift(`:where(.${identifier}){${defaults}}`);
+	if (shouldInsertStyleRules(identifier)) {
+		updateRules(identifier, styleObject[StyleObjectRules]);
+		state.flatRulesToInsert[identifier] = styleObject;
+	}
+	state.classNames[property] = identifier;
+}
+function emitTransform(state, property, value, condition, merge, originalValue, contextOnly) {
+	if (!isWeb || !state.flatShouldDoClasses) {
+		if (!isWeb && property === "scale") {
+			emitProperty(state, "scaleX", value, condition, merge, originalValue, contextOnly);
+			emitProperty(state, "scaleY", value, condition, merge, originalValue, contextOnly);
+		} else emitProperty(state, property, value, condition, merge, originalValue, contextOnly);
+		return;
+	}
+	const targets = property === "scale" ? ["--t-scale-x", "--t-scale-y"] : [property === "x" ? "--t-x" : property === "y" ? "--t-y" : property === "scaleX" ? "--t-scale-x" : property === "scaleY" ? "--t-scale-y" : "rotate"];
+	for (const target of targets) {
+		let targetValue = value;
+		if (typeof targetValue === "number") {
+			if (target === "--t-x" || target === "--t-y") targetValue = `${targetValue}px`;
+			else if (target === "rotate") targetValue = `${targetValue}deg`;
+		}
+		emitProperty(state, target, targetValue, condition, merge, originalValue, contextOnly);
+		if (target === "--t-x" || target === "--t-y") addComposition(state, "translate");
+		else if (target.startsWith("--t-scale")) addComposition(state, "scale");
+	}
+}
+function emitResolved(state, property, raw, condition, merge, originalValue, contextOnly) {
+	let value = configuredValue(state, property, raw);
+	if (value === raw && /[\s,(]/.test(raw)) value = resolveEmbeddedTokens(state, property, raw);
+	if ((!isWeb || !state.flatShouldDoClasses) && typeof value === "string") {
+		if (/^-?(?:\d+\.?\d*|\.\d+)(?:px|dp)$/i.test(value)) value = Number.parseFloat(value);
+		else if (value !== "" && Number.isFinite(Number(value))) value = Number(value);
+	}
+	emitProperty(state, property, value, condition, merge, originalValue, contextOnly);
+}
+function shadowUnit(part) {
+	return typeof part === "number" ? `${part}px` : part || "0px";
+}
+function emitWebShadow(state, property, value, merge, originalValue, contextOnly) {
+	const shadow = state.flatWebShadow ||= {};
+	shadow[property] = value;
+	const offset = shadow.shadowOffset || {
+		width: 0,
+		height: 0
+	};
+	const color = normalizeColor(shadow.shadowColor, shadow.shadowOpacity ?? 1);
+	if (!color) return;
+	const next = `${shadowUnit(offset.width)} ${shadowUnit(offset.height)} ${shadowUnit(shadow.shadowRadius)} ${color}`;
+	emitProperty(state, "boxShadow", state.flatBoxShadow ? `${state.flatBoxShadow}, ${next}` : next, null, merge, originalValue, contextOnly);
+}
+function emitWebTextShadow(state, property, value, merge, originalValue, contextOnly) {
+	const shadow = state.flatTextShadow ||= {};
+	shadow[property] = value;
+	const offset = shadow.textShadowOffset || {
+		width: 0,
+		height: 0
+	};
+	if (!shadow.textShadowColor) return;
+	emitProperty(state, "textShadow", `${shadowUnit(offset.width)} ${shadowUnit(offset.height)} ${shadowUnit(shadow.textShadowRadius)} ${shadow.textShadowColor}`, null, merge, originalValue, contextOnly);
+}
+function emitValue(state, property, raw, condition, merge, originalValue, contextOnly) {
+	if (typeof raw === "string") raw = raw.trim();
+	if (isVariable(raw)) raw = resolveVariableValue(property, raw, isWeb && !state.flatShouldDoClasses && state.styleProps.resolveValues === "auto" ? "value" : state.styleProps.resolveValues);
+	emitBorderStyleDefault(state, property, condition);
+	if (typeof raw === "string" && (property === "transition" || property === "transitionProperty")) raw = normalizeTransitionNames(state, raw);
+	if (legacyTransformParts.has(property)) {
+		if (isWeb && state.flatShouldDoClasses && state.classNames.transform) {
+			if (process.env.NODE_ENV === "development") warnOnce(`legacy transform part "${property}" is dropped because "transform" owns the property`);
+			return;
+		}
+		const value2 = typeof raw === "string" ? configuredValue(state, property, raw) : raw;
+		if (isWeb && state.flatShouldDoClasses && !condition) {
+			const direct = state;
+			(direct.flatLegacyTransforms ||= {})[property] = value2;
+			emitProperty(state, "transform", transformsToString(Object.keys(direct.flatLegacyTransforms).sort().map((key) => ({ [key]: direct.flatLegacyTransforms[key] }))), null, merge, originalValue, contextOnly);
+		} else if (condition && isWeb && state.flatShouldDoClasses) emitProperty(state, "transform", `${property}(${value2})`, condition, merge, originalValue, contextOnly);
+		else merge(state, property, value2, 1, false, originalValue);
+		return;
+	}
+	if (isWeb && webShadowParts.has(property)) {
+		const value2 = typeof raw === "string" ? configuredValue(state, property, raw) : raw;
+		if (state.flatShouldDoClasses) emitWebShadow(state, property, value2, merge, originalValue, contextOnly);
+		else merge(state, property, value2, 1, false, originalValue);
+		return;
+	}
+	if (isWeb && webTextShadowParts.has(property)) {
+		const value2 = typeof raw === "string" ? configuredValue(state, property, raw) : raw;
+		if (state.flatShouldDoClasses) emitWebTextShadow(state, property, value2, merge, originalValue, contextOnly);
+		else merge(state, property, value2, 1, false, originalValue);
+		return;
+	}
+	if (isWeb && state.flatShouldDoClasses) {
+		if (property === "transform") {
+			const direct = state;
+			if (process.env.NODE_ENV === "development" && direct.flatLegacyTransforms) for (const part in direct.flatLegacyTransforms) warnOnce(`legacy transform part "${part}" is dropped because "transform" owns the property`);
+			direct.flatLegacyTransforms = void 0;
+			if (state.flatTransforms) {
+				if (process.env.NODE_ENV === "development") for (const part in state.flatTransforms) warnOnce(`legacy transform part "${part}" is dropped because "transform" owns the property`);
+				state.flatTransforms = void 0;
+			}
+		}
+	}
+	if (isWeb && state.flatShouldDoClasses && property === "transform" && Array.isArray(raw)) raw = transformsToString(raw);
+	if (typeof raw === "string" && property in borderTargets) {
+		emitBorder(state, property, raw, condition, merge, originalValue, contextOnly);
+		return;
+	}
+	if (typeof raw === "string" && property === "textDecoration") {
+		emitTextDecoration(state, raw, condition, merge, originalValue, contextOnly);
+		return;
+	}
+	if (typeof raw === "string" && property === "background") {
+		const parts = splitComponents(raw);
+		if (parts.length === 1 && !/^(?:url|image-set|.*gradient)\(/i.test(parts[0])) {
+			emitResolved(state, "backgroundColor", parts[0], condition, merge, originalValue, contextOnly);
+			return;
+		}
+		if (!isWeb) {
+			if (process.env.NODE_ENV === "development") warnOnce(`native background cannot represent "${raw}"; dropping it`);
+			return;
+		}
+	}
+	if (property === "x" || property === "y" || property === "scale" || property === "scaleX" || property === "scaleY" || property === "rotate") {
+		let value2 = typeof raw === "string" ? configuredValue(state, property, raw) : raw;
+		if ((!isWeb || !state.flatShouldDoClasses) && typeof value2 === "string" && !value2.startsWith(THEME_REF_PREFIX)) {
+			if (property === "rotate" && !/^-?(?:\d+\.?\d*|\.\d+)(?:deg|rad)$/i.test(value2)) {
+				if (process.env.NODE_ENV === "development") warnOnce(`native transform "${property}" cannot represent "${value2}"; dropping it`);
+				if (condition?.active && state.flatTransforms) delete state.flatTransforms[property];
+				return;
+			}
+			if (/^-?(?:\d+\.?\d*|\.\d+)(?:px|dp)$/i.test(value2)) value2 = Number.parseFloat(value2);
+			else if (Number.isFinite(Number(value2))) value2 = Number(value2);
+		}
+		emitTransform(state, property, value2, condition, merge, originalValue, contextOnly);
+		return;
+	}
+	if (isWeb && !state.flatShouldDoClasses && !condition && property === "borderRadius") {
+		if (typeof raw === "string") emitResolved(state, property, raw, condition, merge, originalValue, contextOnly);
+		else emitProperty(state, property, raw, condition, merge, originalValue, contextOnly);
+		return;
+	}
+	let value = raw;
+	if (typeof raw === "string") {
+		value = configuredValue(state, property, raw);
+		if (value === raw && /[\s,(]/.test(raw)) value = resolveEmbeddedTokens(state, property, raw);
+	}
+	if ((!isWeb || !state.flatShouldDoClasses) && typeof value === "string") {
+		if (/^-?(?:\d+\.?\d*|\.\d+)(?:px|dp)$/i.test(value)) value = Number.parseFloat(value);
+		else if (value !== "" && Number.isFinite(Number(value))) value = Number(value);
+	}
+	if (isWeb && state.flatShouldDoClasses && property === "boxShadow" && !condition) state.flatBoxShadow = value;
+	if (!isWeb && property === "fontVariant" && typeof value === "string") value = value.split(/[,\s]+/).filter(Boolean);
+	const expanded = state.styleProps.noExpand ? null : expandStyle(property, value, state.conf.settings.styleCompat || "web");
+	if (!expanded) {
+		emitProperty(state, property, value, condition, merge, originalValue, contextOnly);
+		return;
+	}
+	if (typeof raw === "string" && expanded.length > 1) {
+		const parts = splitComponents(raw);
+		if (parts.length > 0 && parts.length <= (expanded.length === 4 ? 4 : 2)) {
+			for (let index = 0; index < expanded.length; index++) {
+				const partIndex = index === 0 || parts.length === 1 ? 0 : index === 1 || index === 3 && parts.length < 4 ? 1 : index === 2 && parts.length < 3 ? 0 : index;
+				emitResolved(state, expanded[index][0], parts[partIndex], condition, merge, originalValue, contextOnly);
+			}
+			return;
+		}
+	}
+	for (let index = 0; index < expanded.length; index++) emitProperty(state, expanded[index][0], expanded[index][1], condition, merge, originalValue, contextOnly);
+}
+function emitSegment(state, property, source, start, end, condition, merge, originalValue, contextOnly) {
+	while (start < end && source.charCodeAt(start) <= 32) start++;
+	while (end > start && source.charCodeAt(end - 1) <= 32) end--;
+	if (start === end) return false;
+	if (!condition || condition.emit && (condition.active || isWeb && state.flatShouldDoClasses || !isWeb && condition.theme && supportsDynamicColorIOS && isColorStyleKey(property))) {
+		const value = source.slice(start, end);
+		emitValue(state, property, value, condition, merge, value, contextOnly);
+	}
+	return true;
+}
+function contributeStyleString(state, property, source, merge, originalValue, contextOnly = false) {
+	if (isWeb && source.indexOf(":") !== -1 && (webShadowParts.has(property) || legacyTransformParts.has(property))) {
+		if (process.env.NODE_ENV === "development") warnOnce(`conditional "${property}" needs its composite property; dropping it`);
+		return true;
+	}
+	if (source.indexOf(":") === -1) {
+		emitValue(state, property, source, null, merge, originalValue ?? source, contextOnly);
+		return true;
+	}
+	const conditions = [];
+	const starts = [];
+	const ends = [];
+	let pending = null;
+	let refused = "";
+	let lifecycle = false;
+	scanFlatValue(source, {
+		segment(start, end, isBase) {
+			if (start === end) {
+				if (!isBase && !refused) refused = "a conditional clause has no value";
+				return;
+			}
+			conditions.push(pending);
+			starts.push(start);
+			ends.push(end);
+		},
+		chain(start, end) {
+			if (refused) return false;
+			const next = getCondition(state, source.slice(start, end));
+			if (!next) {
+				refused = `unknown modifier "${source.slice(start, end)}"`;
+				return false;
+			}
+			if (process.env.NODE_ENV === "development" && next.unsupportedState) warnOnce(`${property}: "${next.unsupportedState}:" has no native component-state source; dropping the clause`);
+			pending = next;
+			lifecycle ||= !!(next.enter || next.exit);
+			return true;
+		},
+		error(code, index) {
+			if (refused) return;
+			refused = code === "invalid-character" ? `"${source[index]}" would end the declaration or rule` : code === "unterminated-string" ? "an unterminated string" : code === "unterminated-comment" ? "an unterminated \"/*\" comment" : code === "stray-comment-close" ? "a stray \"*/\"" : "an unterminated \"(\"";
+		}
+	});
+	if (refused) {
+		if (property === "aspectRatio") {
+			emitValue(state, property, source, null, merge, originalValue ?? source, contextOnly);
+			return true;
+		}
+		if (process.env.NODE_ENV === "development") warnRefusedValue(property, source, refused);
+		return true;
+	}
+	let hasBase = false;
+	let lastPayloadStart = 0;
+	for (let index = 0; index < conditions.length; index++) {
+		const condition = conditions[index];
+		lastPayloadStart = starts[index];
+		const emitted = emitSegment(state, property, source, starts[index], ends[index], condition, merge, originalValue, contextOnly);
+		if (!condition && emitted) hasBase = true;
+	}
+	if (process.env.NODE_ENV === "development" && !hasBase && conditions.length > 0 && (property in tokenCategories.color || property in tokenCategoryByProperty) && splitComponents(source.slice(lastPayloadStart)).length > 1) warnOnce(`${property}="${source}" has multiple values after its first conditional. Write the base value before the first conditional.`);
+	if ((!isWeb || !state.flatShouldDoClasses) && lifecycle && !hasBase) {
+		const value = property === "opacity" ? 1 : property === "scale" || property === "scaleX" || property === "scaleY" ? 1 : property === "rotate" ? "0deg" : property === "x" || property === "y" ? 0 : null;
+		if (value !== null) emitValue(state, property, value, null, merge, value, contextOnly);
+	}
+	return true;
+}
+function contributeFrontendValue(state, property, value, merge, contextOnly = false) {
+	if (value.base !== null) emitValue(state, property, value.base, null, merge, value.base, contextOnly);
+	for (const clause of value.clauses) {
+		const condition = getCondition(state, clause.modifiers.join(":"));
+		if (condition && condition.emit && (condition.active || isWeb && state.flatShouldDoClasses)) emitValue(state, property, clause.payload, condition, merge, clause.payload, contextOnly);
+	}
+	return true;
+}
+function contributeVariantClauseValue(state, property, value, conditionSource, merge, originalValue, contextOnly = false) {
+	const condition = getCondition(state, conditionSource);
+	if (!condition) {
+		if (process.env.NODE_ENV === "development") warnRefusedValue(property, value, `unknown modifier "${conditionSource}"`);
+		return;
+	}
+	if (process.env.NODE_ENV === "development" && condition.unsupportedState) warnOnce(`${property}: "${condition.unsupportedState}:" has no native component-state source; dropping the clause`);
+	if (condition.emit && (condition.active || isWeb && state.flatShouldDoClasses)) emitValue(state, property, value, condition, merge, originalValue, contextOnly);
+}
+function contributeStyleValue(state, property, value, merge, originalValue, contextOnly = false) {
+	if (value === "safe" && isSafeAreaKey(property)) {
+		const expanded = expandSafeAreaValue(property);
+		if (expanded) {
+			state.flatUsesSafeArea = true;
+			for (const [key, resolved] of expanded) emitValue(state, key, resolved, null, merge, originalValue ?? value, contextOnly);
+			return true;
+		}
+	}
+	if (typeof value === "string") return contributeStyleString(state, property, value, merge, originalValue, contextOnly);
+	if (value != null) {
+		emitValue(state, property, value, null, merge, originalValue ?? value, contextOnly);
+		return true;
+	}
+	return false;
+}
+function clearDirectStyle(state, property) {
+	const direct = state;
+	const atomicKey = property.startsWith("transition") ? "transition" : webShadowParts.has(property) ? "boxShadow" : webTextShadowParts.has(property) ? "textShadow" : legacyTransformParts.has(property) ? "transform" : property;
+	if (direct.flatAtomics) delete direct.flatAtomics[atomicKey];
+	delete state.classNames[atomicKey];
+}
+
+export { clearDirectStyle, contributeFrontendValue, contributeStyleString, contributeStyleValue, contributeVariantClauseValue, directStyleSignature, flushDirectStyles, getCondition, getDirectDynamicThemeAccess, platformMatches };
+//# sourceMappingURL=directStyle.mjs.map