@yahoo/uds-v5-wip 0.0.1

package/dist/core/dist/getComponentStyles.js

@@ -0,0 +1,85 @@
+import { componentSlotClass, componentVariantClass } from "../../utils/dist/string-utils/componentClassName.js";
+import "../../utils/dist/index.js";
+import { cx, processStyleProps } from "./getStyles.js";
+import { ELEMENT_HTML_PROPS, classifyResolvedProps } from "./resolveProps.boundaries.js";
+//#region ../core/dist/getComponentStyles.js
+function getRuntimeMap() {
+	if (!("document" in globalThis)) return null;
+	if (!globalThis.__UDS_META__) globalThis.__UDS_META__ = {};
+	return globalThis.__UDS_META__;
+}
+function nextRuntimeId() {
+	const current = globalThis.__UDS_ID_COUNTER__ ?? 1e5;
+	globalThis.__UDS_ID_COUNTER__ = current + 1;
+	return String(current);
+}
+function registerRuntimeMeta(id, meta) {
+	const map = getRuntimeMap();
+	if (!map) return;
+	map[id] = meta;
+}
+/**
+* Create a type-safe style resolver for a slot-based component.
+*
+* Returns a function that maps variant selections to per-slot class names.
+* Pure string concatenation — no hooks, no context, no side effects.
+*
+* The returned function also has a `.resolve()` method that handles
+* the full prop separation pipeline for configurable components.
+*
+* @param componentName - Registry component name
+* @param slots - Array of slot names
+* @param element - Optional HTML element tag for element-specific prop forwarding
+*/
+function createComponentStyler(componentName, slots, element, variants) {
+	const elementProps = element ? ELEMENT_HTML_PROPS[element] : void 0;
+	const variantSet = variants ? new Set(variants) : null;
+	const styler = ((variants = {}) => {
+		const passed = variants;
+		const result = {};
+		for (const slot of slots) {
+			const parts = [componentSlotClass(componentName, slot)];
+			for (const [axis, value] of Object.entries(passed)) {
+				if (axis.startsWith("data-uds")) continue;
+				if (value) parts.push(componentVariantClass(componentName, slot, axis, value));
+			}
+			result[slot] = parts.join(" ");
+		}
+		return result;
+	});
+	styler.resolve = (allProps) => {
+		const { _html, className: userClassName, ...rest } = allProps;
+		const internalUdsId = typeof rest["data-uds-id"] === "string" ? rest["data-uds-id"] : void 0;
+		const internalUdsSource = typeof rest["data-uds-source"] === "string" ? rest["data-uds-source"] : void 0;
+		delete rest["data-uds-id"];
+		delete rest["data-uds-source"];
+		const [styleClassName, remaining] = processStyleProps(rest, { extractNativeProps: true });
+		const { htmlProps, variantProps } = classifyResolvedProps({
+			remaining,
+			variantSet,
+			elementProps
+		});
+		const classes = styler(variantProps);
+		if (_html && typeof _html === "object") Object.assign(htmlProps, _html);
+		const rootClass = classes.root;
+		const merged = cx(rootClass, styleClassName, remaining.className, userClassName) || void 0;
+		const udsId = internalUdsId ?? nextRuntimeId();
+		htmlProps["data-uds-slot"] = "root";
+		htmlProps["data-uds-component"] = String(componentName);
+		htmlProps["data-uds-id"] = udsId;
+		registerRuntimeMeta(udsId, {
+			c: String(componentName),
+			s: "root",
+			v: variantProps,
+			src: internalUdsSource
+		});
+		return {
+			classes,
+			htmlProps,
+			className: merged
+		};
+	};
+	return styler;
+}
+//#endregion
+export { createComponentStyler };

package/dist/core/dist/getStyles.d.ts

@@ -0,0 +1,43 @@
+import { ClassValue } from "clsx";
+import { ModifierProp, ModifierProps, StyleAndModifierProps, StyleProps } from "@uds/types";
+
+//#region ../core/dist/getStyles.d.ts
+//#region src/getStyles.d.ts
+/** Convert kebab-case CSS property to camelCase for React inline styles.
+ *  CSS custom properties (--*) are kept as-is since React supports them verbatim. */
+declare function toCamelCase(str: string): string;
+declare function createVariants<K extends Record<string, StyleAndModifierProps>>(variants: K): K;
+declare function cx(...inputs: ClassValue[]): string;
+interface ProcessStylesParams {
+  extractNativeProps?: boolean;
+  modifier?: ModifierProp;
+  /**
+   * Existing className string. When provided, any style prop that is already
+   * represented by a class in this string will be skipped. This prevents
+   * component defaults from conflicting with user-provided values
+   * (e.g. HStack defaulting alignItems='center' when user set 'end').
+   */
+  existingClassName?: string;
+  /**
+   * Config-driven modifier prefix → CSS selector map.
+   * Used by ensureArbitraryRule to generate correct CSS for custom modifiers
+   * (e.g. { "dark:": ".dark", "sm:": "@media (min-width: 640px)" }).
+   *
+   * Built-in pseudo modifiers (hover:, focus:, etc.) are handled automatically.
+   * Only needed for config modes and custom modifiers.
+   */
+  modifierSelectors?: Record<string, string>;
+}
+declare function processStyleProps(props?: StyleProps, opts?: ProcessStylesParams): readonly [string, Record<string, unknown>];
+interface GetStylesParams extends StyleProps, ModifierProps {
+  className?: string;
+}
+/** Consumer facing function that takes style props and returns a className.
+ *  Unlike processStyleProps (runtime), this produces Tailwind-compatible
+ *  class names for arbitrary bracket values (e.g. `[768px]` → `max-w-[768px]`)
+ *  so they can be included in the CSS safelist.
+ */
+declare function getStyles(props: GetStylesParams): string;
+declare function getVariantClassName(componentName: string, variant: string | undefined): string; //#endregion
+//#endregion
+export { createVariants, cx, getStyles, getVariantClassName, processStyleProps, toCamelCase };

package/dist/core/dist/getStyles.js

@@ -0,0 +1,305 @@
+import { stylePropsTwMap } from "./generated/stylePropsTwMap.js";
+import { componentSlotClass } from "../../utils/dist/string-utils/componentClassName.js";
+import "../../utils/dist/index.js";
+import { expandMacros, getMacroConfig } from "./macros.js";
+import { colorPropToOpacityProp, modifierMappings, propMappings } from "./propMappings.js";
+import { clsx } from "clsx";
+//#region ../core/dist/getStyles.js
+/** Convert kebab-case CSS property to camelCase for React inline styles.
+*  CSS custom properties (--*) are kept as-is since React supports them verbatim. */
+function toCamelCase(str) {
+	if (str.startsWith("--")) return str;
+	return str.replace(/-([a-z])/g, (_match, letter) => letter.toUpperCase());
+}
+const _dynRuleCache = /* @__PURE__ */ new Set();
+let _dynSheet = null;
+/**
+* Built-in modifier prefix → CSS pseudo-selector, derived from modifierMappings.
+* e.g. "hover:" → ":hover", "focus-visible:" → ":focus-visible"
+*
+* Complex modifiers (data attributes, pseudo-elements, at-rules) are excluded —
+* they're unlikely to appear with arbitrary values at runtime.
+*/
+const _builtinPseudoMap = {};
+for (const prefix of Object.values(modifierMappings)) {
+	if (prefix.startsWith("data-[") || prefix.startsWith("aria-") || prefix.includes("::") || prefix.includes("*")) continue;
+	_builtinPseudoMap[prefix] = `:${prefix.slice(0, -1)}`;
+}
+/**
+* Resolve a single modifier part to its CSS selector contribution.
+*
+* @param modifierSelectors - Config-driven map of custom modifier prefix → CSS selector
+*   (e.g. { "dark:": ".dark", "sm:": "@media (min-width: 640px)" }).
+*   Passed through from processStyleProps opts.
+*/
+/** @internal Exported for testing only. */
+function resolveModifierPart(part, modifierSelectors) {
+	const pseudo = _builtinPseudoMap[part];
+	if (pseudo) return {
+		type: "pseudo",
+		selector: pseudo
+	};
+	const custom = modifierSelectors?.[part];
+	if (custom) return {
+		type: "ancestor",
+		selector: custom
+	};
+	const name = part.slice(0, -1);
+	if (name) return {
+		type: "ancestor",
+		selector: `.${name}`
+	};
+	return null;
+}
+/**
+* Inject a CSS rule for an arbitrary value class if it doesn't already exist.
+* Handles both top-level (bg-[#ff0000]) and modifier (hover:bg-[#00cc6e]) classes.
+*
+* @param modifierSelectors - Config-driven modifier → CSS selector map, threaded
+*   from processStyleProps. Enables config-aware CSS rule generation.
+*/
+function ensureArbitraryRule(className, modifier, cssProperty, cssValue, modifierSelectors) {
+	if (_dynRuleCache.has(className)) return;
+	_dynRuleCache.add(className);
+	if (typeof document === "undefined") return;
+	if (!_dynSheet) {
+		const el = document.createElement("style");
+		el.setAttribute("data-uds-dynamic-arb", "");
+		document.head.appendChild(el);
+		_dynSheet = el.sheet;
+	}
+	let ancestorParts = "";
+	let pseudoParts = "";
+	if (modifier) {
+		const parts = modifier.split(":").filter(Boolean).map((p) => `${p}:`);
+		for (const part of parts) {
+			const resolved = resolveModifierPart(part, modifierSelectors);
+			if (!resolved) continue;
+			if (resolved.type === "ancestor") ancestorParts += `${resolved.selector} `;
+			else pseudoParts += resolved.selector;
+		}
+	}
+	const escaped = CSS.escape(className);
+	const rule = `${ancestorParts}.${escaped}${pseudoParts} { ${cssProperty}: ${cssValue}; }`;
+	try {
+		_dynSheet.insertRule(rule, _dynSheet.cssRules.length);
+	} catch {}
+}
+/** Detect arbitrary values like `[#ff0000]` or `[250px]` */
+function parseArbitraryValue(val, propName) {
+	if (typeof val !== "string") return null;
+	const match = val.match(/^\[(.+)\]$/);
+	if (!match) return null;
+	const mapping = propMappings[propName];
+	if (!mapping?.cssProperty && !mapping?.arbitraryValueTemplate) return null;
+	const rawValue = match[1];
+	if (mapping.arbitraryValueTemplate) {
+		const { cssProperty, valueTemplate } = mapping.arbitraryValueTemplate;
+		return {
+			cssValue: valueTemplate.replace("%s", rawValue),
+			cssProperty: toCamelCase(cssProperty)
+		};
+	}
+	return {
+		cssValue: rawValue,
+		cssProperty: toCamelCase(mapping.cssProperty ?? "")
+	};
+}
+/** Set of opacity prop names — these are consumed by their parent color prop, not processed independently */
+const opacityPropSet = new Set(Object.values(colorPropToOpacityProp));
+function createVariants(variants) {
+	return variants;
+}
+const parse = (prefix, value) => {
+	if (value === "") return prefix;
+	return (prefix === value ? String(value) : `${prefix}-${value}`).replace(/[./]/g, "_");
+};
+const classnames = {};
+const styleOptionsByProp = {};
+for (const entry of Object.values(stylePropsTwMap)) {
+	const [propName, option] = Object.entries(entry)[0] ?? [];
+	if (!propName || typeof option !== "string") continue;
+	if (!styleOptionsByProp[propName]) styleOptionsByProp[propName] = /* @__PURE__ */ new Set();
+	styleOptionsByProp[propName].add(option);
+}
+for (const [propName, mapping] of Object.entries(propMappings)) {
+	const options = styleOptionsByProp[propName] ?? /* @__PURE__ */ new Set();
+	const hasBoolean = options.has("boolean");
+	const isNoPrefix = mapping.classPrefix === "no-prefix";
+	const handler = (val) => {
+		if (hasBoolean && options.size === 1) return val === true ? mapping.classPrefix : "";
+		if (hasBoolean) return val === true ? mapping.classPrefix : parse(mapping.classPrefix, val);
+		if (isNoPrefix) return String(val);
+		return parse(mapping.classPrefix, val);
+	};
+	classnames[propName] = handler;
+}
+const colorPropCssInfo = {};
+for (const [colorProp] of Object.entries(colorPropToOpacityProp)) {
+	const mapping = propMappings[colorProp];
+	if (mapping?.cssProperty && mapping.defaultVarPrefix) colorPropCssInfo[colorProp] = {
+		cssProperty: mapping.cssProperty,
+		varPrefix: mapping.defaultVarPrefix
+	};
+}
+function cx(...inputs) {
+	return clsx(inputs);
+}
+function processStyleProps(props = {}, opts = {}) {
+	const macroConfig = getMacroConfig();
+	const hasMacros = Object.keys(macroConfig).length > 0;
+	let effectiveProps = props;
+	let macroMarkerClasses;
+	if (hasMacros && !opts.modifier) {
+		const { expanded, markerClasses } = expandMacros(props, macroConfig);
+		effectiveProps = expanded;
+		if (markerClasses.length > 0) macroMarkerClasses = markerClasses;
+	}
+	const coveredProps = opts.existingClassName ? getPropsFromClassName(opts.existingClassName) : void 0;
+	const classnameParts = [];
+	const nativeProps = {};
+	let inlineStyles;
+	if (macroMarkerClasses) classnameParts.push(...macroMarkerClasses);
+	for (const propKey in effectiveProps) {
+		if (!Object.hasOwn(effectiveProps, propKey)) continue;
+		const propValue = effectiveProps[propKey];
+		if (propValue === void 0) continue;
+		const modifierName = modifierMappings[propKey];
+		if (modifierName) {
+			const combinedModifier = opts.modifier ? `${opts.modifier}${modifierName}` : modifierName;
+			const [newClassName] = processStyleProps(propValue, {
+				...opts,
+				modifier: combinedModifier
+			});
+			if (newClassName) classnameParts.push(newClassName);
+			continue;
+		}
+		if (propKey.startsWith("_")) {
+			const customModifierName = `${propKey.slice(1)}:`;
+			const combinedModifier = opts.modifier ? `${opts.modifier}${customModifierName}` : customModifierName;
+			const [newClassName] = processStyleProps(propValue, {
+				...opts,
+				modifier: combinedModifier
+			});
+			if (newClassName) classnameParts.push(newClassName);
+			continue;
+		}
+		if (coveredProps?.has(propKey)) continue;
+		{
+			const arbitrary = parseArbitraryValue(propValue, propKey);
+			if (arbitrary) {
+				const opacityPropName = colorPropToOpacityProp[propKey];
+				if (opacityPropName) {
+					const opacityValue = effectiveProps[opacityPropName];
+					if (opacityValue !== void 0) arbitrary.cssValue = `color-mix(in srgb, ${arbitrary.cssValue} ${opacityValue}%, transparent)`;
+				}
+				const handler = classnames[propKey];
+				if (handler) {
+					const baseClass = handler(propValue);
+					if (baseClass) {
+						const opacityPropName = colorPropToOpacityProp[propKey];
+						const opacityValue = opacityPropName ? effectiveProps[opacityPropName] : void 0;
+						const classWithOpacity = `${baseClass}${opacityValue !== void 0 ? `/${opacityValue}` : ""}`;
+						const fullClass = opts.modifier ? `${opts.modifier}${classWithOpacity}` : classWithOpacity;
+						const kebabProp = arbitrary.cssProperty.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+						ensureArbitraryRule(fullClass, opts.modifier ?? null, kebabProp, arbitrary.cssValue, opts.modifierSelectors);
+						classnameParts.push(fullClass);
+					}
+				}
+				continue;
+			}
+		}
+		if (opacityPropSet.has(propKey)) continue;
+		const handler = classnames[propKey];
+		if (handler) {
+			const opacityPropName = colorPropToOpacityProp[propKey];
+			if (opacityPropName && !opts.modifier && typeof propValue === "string") {
+				let opacityValue = effectiveProps[opacityPropName];
+				let baseToken = propValue;
+				if (opacityValue === void 0) {
+					const slashIdx = propValue.lastIndexOf("/");
+					if (slashIdx > 0 && /^\d{1,3}$/.test(propValue.slice(slashIdx + 1))) {
+						baseToken = propValue.slice(0, slashIdx);
+						opacityValue = propValue.slice(slashIdx + 1);
+					}
+				}
+				if (opacityValue !== void 0) {
+					const cssInfo = colorPropCssInfo[propKey];
+					if (cssInfo) {
+						const safeToken = baseToken.replace(/[./]/g, "_");
+						const varName = `--uds-${cssInfo.varPrefix}-${safeToken}`;
+						const cssProp = toCamelCase(cssInfo.cssProperty);
+						inlineStyles ??= {};
+						inlineStyles[cssProp] = `color-mix(in srgb, var(${varName}) ${opacityValue}%, transparent)`;
+						continue;
+					}
+				}
+			}
+			const propClassname = String(handler(propValue));
+			if (propClassname) {
+				const finalClassname = opts.modifier ? `${opts.modifier}${propClassname}` : propClassname;
+				classnameParts.push(finalClassname);
+			}
+			continue;
+		}
+		if (opts.extractNativeProps) nativeProps[propKey] = propValue;
+	}
+	if (inlineStyles && opts.extractNativeProps) nativeProps.style = nativeProps.style ? {
+		...nativeProps.style,
+		...inlineStyles
+	} : inlineStyles;
+	return [clsx(classnameParts.join(" ")), nativeProps];
+}
+/**
+* Extract the set of style prop names represented by classes in a className string.
+* Uses the reverse map (stylePropsTwMap) to identify which props are covered.
+*/
+function getPropsFromClassName(className) {
+	const props = /* @__PURE__ */ new Set();
+	for (const token of className.split(" ")) {
+		if (!token) continue;
+		const entry = stylePropsTwMap[token];
+		if (!entry) continue;
+		const propName = Object.keys(entry)[0];
+		if (propName) props.add(propName);
+	}
+	return props;
+}
+/** Consumer facing function that takes style props and returns a className.
+*  Unlike processStyleProps (runtime), this produces Tailwind-compatible
+*  class names for arbitrary bracket values (e.g. `[768px]` → `max-w-[768px]`)
+*  so they can be included in the CSS safelist.
+*/
+function getStyles(props) {
+	const processed = {};
+	const arbitraryParts = [];
+	for (const key in props) {
+		if (!Object.hasOwn(props, key)) continue;
+		const val = props[key];
+		if (typeof val === "string" && /^\[.+\](?:\/\d+)?$/.test(val)) {
+			const mapping = propMappings[key];
+			if (mapping?.classPrefix && mapping.classPrefix !== "no-prefix") {
+				arbitraryParts.push(`${mapping.classPrefix}-${val}`);
+				continue;
+			}
+		}
+		processed[key] = val;
+	}
+	for (const [colorProp, opacityPropName] of Object.entries(colorPropToOpacityProp)) {
+		const opacityValue = processed[opacityPropName];
+		if (opacityValue !== void 0 && processed[colorProp] !== void 0) {
+			processed[colorProp] = `${processed[colorProp]}/${opacityValue}`;
+			delete processed[opacityPropName];
+		}
+	}
+	const [finalClassName] = processStyleProps(processed, { extractNativeProps: false });
+	if (arbitraryParts.length === 0) return finalClassName;
+	return [finalClassName, ...arbitraryParts].filter(Boolean).join(" ");
+}
+function getVariantClassName(componentName, variant) {
+	const base = componentSlotClass(componentName, "root");
+	if (!variant) return base;
+	return `${base} ${base}--variant-${variant}`;
+}
+//#endregion
+export { createVariants, cx, getStyles, getVariantClassName, processStyleProps, toCamelCase };

package/dist/core/dist/index.d.ts

@@ -0,0 +1,11 @@
+import { createComponent } from "./createComponent.js";
+import { ComponentExample, createComponentExample } from "./createComponentExample.js";
+import { createProvider } from "./createProvider.js";
+import { stylePropsTwMap } from "./generated/stylePropsTwMap.js";
+import { createComponentStyler } from "./getComponentStyles.js";
+import { createVariants, cx, getStyles, getVariantClassName, processStyleProps, toCamelCase } from "./getStyles.js";
+import { expandMacros, getMacroConfig, setMacroConfig } from "./macros.js";
+import { ConfigurablePropertyEntry, CssVariablePrefixEntry, ModifierEntry, PropMapping, colorPropToOpacityProp, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes, modifierMappings, propMappings } from "./propMappings.js";
+import { resolveMotionState } from "./resolveMotionState.js";
+import { TransformedMotionProps, transformPreset } from "./transformPreset.js";
+import { withDefaultStyleProps } from "./withDefaultStyleProps.js";

package/dist/core/dist/index.js

@@ -0,0 +1,11 @@
+import "./generated/stylePropsTwMap.js";
+import "./macros.js";
+import "./propMappings.js";
+import "./getStyles.js";
+import "./getComponentStyles.js";
+import "./createComponent.js";
+import "./createComponentExample.js";
+import "./createProvider.js";
+import "./resolveMotionState.js";
+import "./transformPreset.js";
+import "./withDefaultStyleProps.js";

package/dist/core/dist/macros.d.ts

@@ -0,0 +1,22 @@
+import { MacroConfig } from "@uds/types";
+
+//#region ../core/dist/macros.d.ts
+//#region src/macros.d.ts
+/** Set the macro config (called by loader at build time) */
+declare function setMacroConfig(config: MacroConfig): void;
+/** Get the current macro config */
+declare function getMacroConfig(): MacroConfig;
+/**
+ * Expand macro props into their constituent style props + marker classes.
+ *
+ * - Macros are lowest priority: explicit props always win
+ * - Nested macros are supported (a macro value can reference another macro)
+ * - Circular references are detected and throw
+ * - Marker classes (e.g. "elevation-elevation_1") are returned for modifier targeting
+ */
+declare function expandMacros(props: Record<string, unknown>, config?: MacroConfig): {
+  expanded: Record<string, unknown>;
+  markerClasses: string[];
+}; //#endregion
+//#endregion
+export { expandMacros, getMacroConfig, setMacroConfig };

package/dist/core/dist/macros.js

@@ -0,0 +1,49 @@
+import { safeTokenName } from "../../utils/dist/string-utils/cssVar.js";
+import "../../utils/dist/index.js";
+//#region ../core/dist/macros.js
+/**
+* Runtime macro config — set by the loader/codegen at build time.
+* Maps macro prop names to their value → style-bag definitions.
+*/
+let macroConfig = {};
+/** Set the macro config (called by loader at build time) */
+function setMacroConfig(config) {
+	macroConfig = config;
+}
+/** Get the current macro config */
+function getMacroConfig() {
+	return macroConfig;
+}
+/**
+* Expand macro props into their constituent style props + marker classes.
+*
+* - Macros are lowest priority: explicit props always win
+* - Nested macros are supported (a macro value can reference another macro)
+* - Circular references are detected and throw
+* - Marker classes (e.g. "elevation-elevation_1") are returned for modifier targeting
+*/
+function expandMacros(props, config = macroConfig) {
+	const expanded = {};
+	const markers = [];
+	const seen = /* @__PURE__ */ new Set();
+	function expand(key, value) {
+		if (key in config && typeof value === "string") {
+			if (seen.has(key)) throw new Error(`Circular macro: ${[...seen, key].join(" → ")}`);
+			seen.add(key);
+			markers.push(`${key}-${safeTokenName(value)}`);
+			const bag = config[key][value];
+			if (bag) {
+				for (const [k, v] of Object.entries(bag)) if (!(k in expanded)) expand(k, v);
+			}
+			seen.delete(key);
+		} else if (!(key in expanded)) expanded[key] = value;
+	}
+	for (const [key, value] of Object.entries(props)) if (key in config) expand(key, value);
+	for (const [key, value] of Object.entries(props)) if (!(key in config)) expanded[key] = value;
+	return {
+		expanded,
+		markerClasses: markers
+	};
+}
+//#endregion
+export { expandMacros, getMacroConfig, setMacroConfig };

package/dist/core/dist/propMappings.d.ts

@@ -0,0 +1,77 @@
+import { ConfigurableProp, ModifierProp, StyleProp } from "@uds/types";
+
+//#region ../core/dist/propMappings.d.ts
+//#region src/propMappings.d.ts
+interface PropMapping {
+  /** Class name prefix for runtime class generation. 'no-prefix' means value IS the class. */
+  classPrefix: string;
+  /** CSS property name (for @utility directive generation). Only needed for token-based props. */
+  cssProperty?: string;
+  /** CSS variable namespace for tokens. Only needed for token-based (configurable) props. */
+  defaultVarPrefix?: string;
+  /** Module augmentation interface name. Only needed for configurable props. */
+  augmentType?: string;
+  /** Known literal values for functional @utility generation. Used for props with cssProperty but no defaultVarPrefix. */
+  literalValues?: string[];
+  /** Alternate CSS property for component configs (directValues mode).
+   *  Use when the utility cssProperty differs from the CSS shorthand needed for direct values.
+   *  e.g. transition utility maps to 'transition-property', but direct values need 'transition'. */
+  directCssProperty?: string;
+  /** Template for generating inline style values from arbitrary bracket values.
+   *  When present, arbitrary values like `[3.5px]` produce inline styles instead of Tailwind classes.
+   *  `cssProperty` is the CSS property name (kebab-case), `valueTemplate` uses `%s` as value placeholder.
+   *  e.g. { cssProperty: 'transform', valueTemplate: 'translateX(%s)' } */
+  arbitraryValueTemplate?: {
+    cssProperty: string;
+    valueTemplate: string;
+  };
+}
+/** Exclude className — it's passed through, not mapped to a utility class */
+type MappedStyleProp = Exclude<StyleProp, 'className'>;
+declare const propMappings: Record<MappedStyleProp, PropMapping>;
+/**
+ * Built-in modifier mappings (pseudo-classes, pseudo-elements, etc.).
+ * Custom modifiers from defineModes() are handled dynamically in the runtime.
+ */
+declare const modifierMappings: Record<ModifierProp, string>;
+/** Look up a PropMapping by ConfigurableProp name */
+declare function getConfigurablePropMapping(prop: ConfigurableProp): PropMapping | undefined;
+interface ConfigurablePropertyEntry {
+  property: string;
+  subProperties: string[];
+  augmentType: string;
+}
+/**
+ * Derives the configurable properties table from propMappings.
+ * Groups props by augmentType — the primary prop is the one matching
+ * a ConfigurableProp name, the rest are sub-properties.
+ */
+declare function getConfigurableProperties(): ConfigurablePropertyEntry[];
+interface CssVariablePrefixEntry {
+  property: string;
+  cssPrefix: string;
+  exampleVariable: string;
+  exampleUtility: string;
+}
+/**
+ * Derives the CSS variable prefix table from propMappings.
+ * Only includes props that have both cssProperty and defaultVarPrefix.
+ * Deduplicates by defaultVarPrefix so each namespace appears once.
+ */
+declare function getCssVariablePrefixes(): CssVariablePrefixEntry[];
+interface ModifierEntry {
+  prop: string;
+  cssSelector: string;
+  category: string;
+  description: string;
+}
+/**
+ * Maps each color prop name to its corresponding opacity prop name.
+ * Used by runtime (getStyles) and loader (style-transform) to merge
+ * a color value with its opacity before class generation.
+ *
+ * e.g. `bg="primary"` + `bgOpacity="75"` → class `bg-primary_75`
+ */
+declare const colorPropToOpacityProp: Record<string, string>; //#endregion
+//#endregion
+export { ConfigurablePropertyEntry, CssVariablePrefixEntry, ModifierEntry, PropMapping, colorPropToOpacityProp, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes, modifierMappings, propMappings };