@yahoo/uds-v5-wip 1.36.0 → 1.37.0

package/dist/config/dist/resolveStyleProp.js

@@ -69,8 +69,17 @@ function detectTokenValueType(token, group) {
 		const sniffed = sniffTokenTypeFromValue(token.value);
 		resolved = sniffed ? tokenTypeToValueType(sniffed) : void 0;
 	}
-	if (resolved === "length-percentage") return token.value.trim().endsWith("%") ? "percentage" : "length";
-	if (resolved === "string" && looksLikeShadow(token.value)) return "shadow";
+	if (resolved === "length-percentage") {
+		const trimmed = token.value.trim();
+		if (trimmed.endsWith("%")) return "percentage";
+		if (/(deg|rad|grad|turn)$/.test(trimmed)) return "angle";
+		if (/(ms|s)$/.test(trimmed)) return "time";
+		return "length";
+	}
+	if (resolved === "string") {
+		if (looksLikeShadow(token.value)) return "shadow";
+		if (/^\d+(?:\.\d+)?\s*\/\s*\d+(?:\.\d+)?$/.test(token.value.trim())) return "ratio";
+	}
 	return resolved;
 }
 const REF_RE = /^\{([^.{}]+)(?:\.([^.{}]+))?\}$/;

package/dist/config/dist/serialize.d.ts

@@ -1,4 +1,5 @@
-import { ArbitraryTokenGroup, AtomicToken, ExampleDef, ModeGroup, ModifierDef, MotionPresetsDef, UdsConfig } from "./createConfig.js";
+import { VarsConfig } from "./types.js";
+import { AtomicToken, ExampleDef, ModeGroup, ModifierDef, MotionPresetsDef, UdsConfig } from "./createConfig.js";
 import { CompositeStylesConfig } from "@uds/types";
 
 //#region ../config/dist/serialize.d.ts
@@ -10,6 +11,14 @@ type TokenRef = {
 interface SerializedConfig {
   modes: ModeGroup[];
   modifiers?: ModifierDef[];
+  /**
+   * Verbatim `defineVars` input. Authoritative source for CSS variable
+   * declarations downstream. `atomic` carries derived (property × token)
+   * data for utility-class generation; `vars` carries the original
+   * namespace-keyed input. New code should rely on `vars`; `atomic` is
+   * still emitted for legacy consumers.
+   */
+  vars?: VarsConfig;
   atomic: AtomicToken<ModifierNameShape>[];
   compositeStyles?: CompositeStylesConfig;
   /**
@@ -18,7 +27,6 @@ interface SerializedConfig {
    * until they're rewritten. New code should populate `compositeStyles`.
    */
   macros?: Record<string, Record<string, Record<string, unknown>>>;
-  arbitraryTokens?: ArbitraryTokenGroup[];
   motion?: MotionPresetsDef;
   components: SerializedComponentsDef;
   globalStyles?: Record<string, Record<string, SerializedValue>>;

package/dist/config/dist/serialize.js

@@ -1,6 +1,6 @@
 import { safeTokenName } from "../../utils/dist/string-utils/cssVar.js";
 import "../../utils/dist/index.js";
-import { getConfigurablePropMapping } from "../../core/dist/propMappings.js";
+import { getConfigurablePropMapping } from "../../core/dist/configurable-prop-helpers.js";
 import "../../core/dist/index.js";
 import { buildTokenReference, createConfigBuilder, resolveConfig } from "./createConfig.js";
 //#region ../config/dist/serialize.js
@@ -107,9 +107,9 @@ function serializeConfig(config) {
 	return {
 		modes: data.modes,
 		modifiers: data.modifiers.length > 0 ? data.modifiers : void 0,
+		vars: data.vars && Object.keys(data.vars).length > 0 ? data.vars : void 0,
 		atomic: data.atomic,
 		compositeStyles: Object.keys(data.compositeStyles).length > 0 ? data.compositeStyles : void 0,
-		arbitraryTokens: data.arbitraryTokens && data.arbitraryTokens.length > 0 ? data.arbitraryTokens : void 0,
 		motion: Object.keys(data.motion).length > 0 ? data.motion : void 0,
 		components,
 		globalStyles: Object.keys(globalStyles).length > 0 ? globalStyles : void 0,
@@ -150,13 +150,13 @@ function deserializeConfig(data) {
 	let config = createConfigBuilder({
 		modes: data.modes,
 		modifiers: data.modifiers ?? [],
+		vars: data.vars,
 		atomic: data.atomic,
 		compositeStyles: data.compositeStyles ?? upgradeLegacyMacros(data.macros),
 		motion: data.motion ?? {},
 		components,
 		preflight: data.preflight,
 		prefix: data.prefix ?? "uds",
-		arbitraryTokens: data.arbitraryTokens,
 		remotion: void 0,
 		globalStyles: {},
 		presetTokenNames: data.presetTokenNames

package/dist/config.d.ts

@@ -78,8 +78,8 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | GetModifierF
   };
   color: {
     inherit: string;
-    current: string;
     transparent: string;
+    current: string;
     "always/black": string;
     "always/white": string;
     brand: string;

package/dist/core/dist/color-opacity-map.d.ts

@@ -0,0 +1,13 @@
+//#region ../core/dist/color-opacity-map.d.ts
+//#region src/color-opacity-map.d.ts
+/**
+ * Maps each color prop name to its corresponding opacity prop name.
+ * Used by the runtime (`getStyles`) and loader (`style-transform`) to merge
+ * a color value with its opacity before class generation.
+ *
+ * @example
+ * `bg="primary"` + `bgOpacity="75"` → class `bg-primary_75`
+ */
+declare const colorPropToOpacityProp: Record<string, string>; //#endregion
+//#endregion
+export { colorPropToOpacityProp };

package/dist/core/dist/color-opacity-map.js

@@ -0,0 +1,33 @@
+//#region ../core/dist/color-opacity-map.js
+/**
+* Maps each color prop name to its corresponding opacity prop name.
+* Used by the runtime (`getStyles`) and loader (`style-transform`) to merge
+* a color value with its opacity before class generation.
+*
+* @example
+* `bg="primary"` + `bgOpacity="75"` → class `bg-primary_75`
+*/
+const colorPropToOpacityProp = {
+	bg: "bgOpacity",
+	color: "colorOpacity",
+	textDecorationColor: "textDecorationColorOpacity",
+	borderColor: "borderColorOpacity",
+	borderYColor: "borderYColorOpacity",
+	borderXColor: "borderXColorOpacity",
+	borderStartColor: "borderStartColorOpacity",
+	borderLeftColor: "borderLeftColorOpacity",
+	borderEndColor: "borderEndColorOpacity",
+	borderRightColor: "borderRightColorOpacity",
+	borderTopColor: "borderTopColorOpacity",
+	borderBottomColor: "borderBottomColorOpacity",
+	divideColor: "divideColorOpacity",
+	outlineColor: "outlineColorOpacity",
+	ringColor: "ringColorOpacity",
+	ringOffsetColor: "ringOffsetColorOpacity",
+	fillColor: "fillColorOpacity",
+	strokeColor: "strokeColorOpacity",
+	shadowColor: "shadowColorOpacity",
+	caretColor: "caretColorOpacity"
+};
+//#endregion
+export { colorPropToOpacityProp };

package/dist/core/dist/compositeStyles.d.ts

@@ -1,6 +1,7 @@
 import { CompositeStylesConfig } from "@uds/types";
 
 //#region ../core/dist/compositeStyles.d.ts
+//#region src/compositeStyles.d.ts
 /** Set the composite-styles config (called by loader at build time) */
 declare function setCompositeStylesConfig(config: CompositeStylesConfig): void;
 /** Get the current composite-styles config */
@@ -16,6 +17,6 @@ declare function getCompositeStylesConfig(): CompositeStylesConfig;
 declare function expandCompositeStyles(props: Record<string, unknown>, config?: CompositeStylesConfig): {
   expanded: Record<string, unknown>;
   markerClasses: string[];
-};
+}; //#endregion
 //#endregion
 export { expandCompositeStyles, getCompositeStylesConfig, setCompositeStylesConfig };

package/dist/core/dist/configurable-prop-helpers.d.ts

@@ -0,0 +1,32 @@
+import { PropMapping } from "./style-prop-data.js";
+import { ConfigurableProp } from "@uds/types";
+
+//#region ../core/dist/configurable-prop-helpers.d.ts
+//#region src/configurable-prop-helpers.d.ts
+/** Look up a {@link 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 {@link 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 {@link propMappings}.
+ * Only includes props that have both `cssProperty` and `defaultVarPrefix`.
+ * Deduplicates by `defaultVarPrefix` so each namespace appears once.
+ */
+declare function getCssVariablePrefixes(): CssVariablePrefixEntry[]; //#endregion
+//#endregion
+export { ConfigurablePropertyEntry, CssVariablePrefixEntry, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes };

package/dist/core/dist/configurable-prop-helpers.js

@@ -0,0 +1,61 @@
+import { propMappings } from "./style-prop-data.js";
+//#region ../core/dist/configurable-prop-helpers.js
+/** Maps ConfigurableProp names to propMappings keys when they differ. */
+const configurablePropAliases = {};
+/** Look up a {@link PropMapping} by ConfigurableProp name. */
+function getConfigurablePropMapping(prop) {
+	return propMappings[configurablePropAliases[prop] ?? prop];
+}
+/**
+* Derives the configurable properties table from {@link propMappings}.
+* Groups props by augmentType — the primary prop is the one matching
+* a ConfigurableProp name, the rest are sub-properties.
+*/
+function getConfigurableProperties() {
+	const byAugment = {};
+	for (const [prop, mapping] of Object.entries(propMappings)) {
+		if (!mapping.augmentType) continue;
+		const aug = mapping.augmentType;
+		if (!byAugment[aug]) byAugment[aug] = [];
+		byAugment[aug].push(prop);
+	}
+	const entries = [];
+	for (const [augmentType, props] of Object.entries(byAugment)) {
+		const sorted = [...props].sort((a, b) => a.length - b.length);
+		const primary = sorted[0];
+		const subs = sorted.slice(1);
+		entries.push({
+			property: primary,
+			subProperties: subs,
+			augmentType
+		});
+	}
+	return entries;
+}
+/**
+* Derives the CSS variable prefix table from {@link propMappings}.
+* Only includes props that have both `cssProperty` and `defaultVarPrefix`.
+* Deduplicates by `defaultVarPrefix` so each namespace appears once.
+*/
+function getCssVariablePrefixes() {
+	const seen = /* @__PURE__ */ new Set();
+	const entries = [];
+	for (const [prop, mapping] of Object.entries(propMappings)) {
+		if (!mapping.defaultVarPrefix || !mapping.cssProperty) continue;
+		if (seen.has(mapping.defaultVarPrefix)) continue;
+		seen.add(mapping.defaultVarPrefix);
+		const prefix = `--uds-${mapping.defaultVarPrefix}-*`;
+		const exampleToken = mapping.defaultVarPrefix.includes("color") ? "brand" : mapping.defaultVarPrefix === "spacing" ? "4" : mapping.defaultVarPrefix === "radius" ? "lg" : mapping.defaultVarPrefix === "border-width" ? "2" : "value";
+		const exampleVar = `--uds-${mapping.defaultVarPrefix}-${exampleToken}`;
+		const exampleUtility = `${mapping.classPrefix}-${exampleToken}`;
+		entries.push({
+			property: prop,
+			cssPrefix: prefix,
+			exampleVariable: exampleVar,
+			exampleUtility
+		});
+	}
+	return entries;
+}
+//#endregion
+export { getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes };

package/dist/core/dist/createComponent.d.ts

@@ -1,6 +1,7 @@
 import { CreateComponentConfig, CreateComponentProps, CreateComponentRenderFn, CreateComponentSlotTagConfig, CreateComponentTypeInput } from "@uds/types";
 
 //#region ../core/dist/createComponent.d.ts
+//#region src/createComponent.d.ts
 type PrimitiveTag = keyof React.JSX.IntrinsicElements;
 type SpecConfig<TSpec> = TSpec extends {
   config: infer TConfig extends CreateComponentTypeInput;
@@ -51,6 +52,6 @@ declare function createComponent<TSpecOrProps = {}>(tag: PrimitiveTag): React.FC
   props: infer TOwnProps;
 } ? CreateComponentProps<TConfig, TOwnProps, PrimitiveTag> : PrimitiveOwnProps<TSpecOrProps>>;
 declare function createComponent<TSpec>(renderFn: CreateComponentRenderFn<SpecConfig<TSpec>, SpecOwnProps<TSpec>, SpecSlotConfig<TSpec>>): React.FC<CreateComponentProps<SpecConfig<TSpec>, SpecOwnProps<TSpec>, SpecSlotConfig<TSpec>>>;
-declare function createComponent(config: CreateComponentConfig<string>, renderFn: CreateComponentRenderFn<any, any, any>): React.FC<any>;
+declare function createComponent(config: CreateComponentConfig<string>, renderFn: CreateComponentRenderFn<any, any, any>): React.FC<any>; //#endregion
 //#endregion
 export { createComponent };

package/dist/core/dist/createComponentExample.d.ts

@@ -1,6 +1,7 @@
 import { ComponentProps, ComponentType } from "react";
 
 //#region ../core/dist/createComponentExample.d.ts
+//#region src/createComponentExample.d.ts
 /**
  * Extracts variant fixtures from a Component's props type.
  * If Button has `variant?: 'brand' | 'outline'` and `size?: 'sm' | 'md'`,
@@ -36,6 +37,6 @@ type ExamplesResult<TComponent extends ComponentType<any>> = {
  * }));
  * ```
  */
-declare function createComponentExample<TComponent extends ComponentType<any>, T extends Record<string, ExampleFn<TComponent>>>(Component: TComponent, examplesFn: (fixtures: VariantFixtures<TComponent>) => ExamplesResult<TComponent>): ComponentExample<T>;
+declare function createComponentExample<TComponent extends ComponentType<any>, T extends Record<string, ExampleFn<TComponent>>>(Component: TComponent, examplesFn: (fixtures: VariantFixtures<TComponent>) => ExamplesResult<TComponent>): ComponentExample<T>; //#endregion
 //#endregion
 export { ComponentExample, createComponentExample };

package/dist/core/dist/createProvider.d.ts

@@ -1,4 +1,5 @@
 //#region ../core/dist/createProvider.d.ts
+//#region src/createProvider.d.ts
 type ProviderRenderFn<TContext, TProps = Record<never, never>> = (props: {
   children: React.ReactNode;
 } & TProps) => {
@@ -7,6 +8,6 @@ type ProviderRenderFn<TContext, TProps = Record<never, never>> = (props: {
 };
 declare function createProvider<TContext, TProps = Record<never, never>>(name: string, renderFn: ProviderRenderFn<TContext, TProps>): [React.FC<{
   children: React.ReactNode;
-} & TProps>, () => TContext];
+} & TProps>, () => TContext]; //#endregion
 //#endregion
 export { createProvider };

package/dist/core/dist/generated/stylePropsTwMap.d.ts

@@ -1,4 +1,5 @@
 //#region ../core/dist/generated/stylePropsTwMap.d.ts
+//#region src/generated/stylePropsTwMap.d.ts
 declare const stylePropsTwMap: {
   readonly "border-boolean": {
     readonly border: "boolean";
@@ -1695,6 +1696,6 @@ declare const stylePropsTwMap: {
   readonly "hyphens-manual": {
     readonly hyphens: "manual";
   };
-};
+}; //#endregion
 //#endregion
 export { stylePropsTwMap };

package/dist/core/dist/getComponentStyles.d.ts

@@ -1,6 +1,7 @@
 import { ComponentRegistry, ComponentSlotsOf, ComponentVariantsOf } from "@uds/types";
 
 //#region ../core/dist/getComponentStyles.d.ts
+//#region src/getComponentStyles.d.ts
 type ResolveSlots<Name extends string> = Name extends keyof ComponentRegistry ? ComponentSlotsOf<Name> : string;
 type ResolveVariants<Name extends string> = Name extends keyof ComponentRegistry ? ComponentVariantsOf<Name> : Record<string, string>;
 interface UdsRuntimeMeta {
@@ -44,6 +45,6 @@ interface ComponentStyler<Name extends string> {
  * @param slots - Array of slot names
  * @param element - Optional HTML element tag for element-specific prop forwarding
  */
-declare function createComponentStyler<Name extends string>(componentName: Name, slots: readonly string[], element?: string, variants?: readonly string[]): ComponentStyler<Name>;
+declare function createComponentStyler<Name extends string>(componentName: Name, slots: readonly string[], element?: string, variants?: readonly string[]): ComponentStyler<Name>; //#endregion
 //#endregion
 export { createComponentStyler };

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

@@ -2,6 +2,7 @@ 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;
@@ -37,6 +38,6 @@ interface GetStylesParams extends StyleProps, ModifierProps {
  *  so they can be included in the CSS safelist.
  */
 declare function getStyles(props: GetStylesParams): string;
-declare function getVariantClassName(componentName: string, variant: string | undefined): 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

@@ -1,8 +1,10 @@
+import { colorPropToOpacityProp } from "./color-opacity-map.js";
 import { componentSlotClass } from "../../utils/dist/string-utils/componentClassName.js";
 import "../../utils/dist/index.js";
 import { expandCompositeStyles, getCompositeStylesConfig } from "./compositeStyles.js";
+import { propMappings } from "./style-prop-data.js";
 import { stylePropsTwMap } from "./generated/stylePropsTwMap.js";
-import { colorPropToOpacityProp, modifierMappings, propMappings } from "./propMappings.js";
+import { modifierMappings } from "./modifier-mappings.js";
 import { clsx } from "clsx";
 //#region ../core/dist/getStyles.js
 /** Convert kebab-case CSS property to camelCase for React inline styles.

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

@@ -1,11 +1,14 @@
+import { colorPropToOpacityProp } from "./color-opacity-map.js";
 import { expandCompositeStyles, getCompositeStylesConfig, setCompositeStylesConfig } from "./compositeStyles.js";
+import { PropMapping, propMappings } from "./style-prop-data.js";
+import { ConfigurablePropertyEntry, CssVariablePrefixEntry, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes } from "./configurable-prop-helpers.js";
 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 { ConfigurablePropertyEntry, CssVariablePrefixEntry, ModifierEntry, PropMapping, colorPropToOpacityProp, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes, modifierMappings, propMappings } from "./propMappings.js";
+import { ModifierEntry, modifierMappings } from "./modifier-mappings.js";
 import { resolveMotionState } from "./resolveMotionState.js";
 import { TransformedMotionProps, transformPreset } from "./transformPreset.js";
 import { withDefaultStyleProps } from "./withDefaultStyleProps.js";

package/dist/core/dist/index.js

@@ -1,6 +1,9 @@
+import "./color-opacity-map.js";
 import "./compositeStyles.js";
+import "./style-prop-data.js";
+import "./configurable-prop-helpers.js";
 import "./generated/stylePropsTwMap.js";
-import "./propMappings.js";
+import "./modifier-mappings.js";
 import "./getStyles.js";
 import "./getComponentStyles.js";
 import "./createComponent.js";

package/dist/core/dist/modifier-mappings.d.ts

@@ -0,0 +1,13 @@
+import { ModifierProp } from "@uds/types";
+
+//#region ../core/dist/modifier-mappings.d.ts
+//#region src/modifier-mappings.d.ts
+declare const modifierMappings: Record<ModifierProp, string>;
+interface ModifierEntry {
+  prop: string;
+  cssSelector: string;
+  category: string;
+  description: string;
+} //#endregion
+//#endregion
+export { ModifierEntry, modifierMappings };

package/dist/core/dist/modifier-mappings.js

@@ -0,0 +1,61 @@
+//#region ../core/dist/modifier-mappings.js
+const modifierMappings = {
+	_after: "after:",
+	_hover: "hover:",
+	_focus: "focus:",
+	_focusWithin: "focus-within:",
+	_focusVisible: "focus-visible:",
+	_active: "active:",
+	_visited: "visited:",
+	_target: "target:",
+	_first: "first:",
+	_last: "last:",
+	_only: "only:",
+	_odd: "odd:",
+	_even: "even:",
+	_firstOfType: "first-of-type:",
+	_lastOfType: "last-of-type:",
+	_onlyOfType: "only-of-type:",
+	_empty: "empty:",
+	_disabled: "disabled:",
+	_enabled: "enabled:",
+	_checked: "checked:",
+	_indeterminate: "indeterminate:",
+	_default: "default:",
+	_required: "required:",
+	_valid: "valid:",
+	_invalid: "invalid:",
+	_inRange: "in-range:",
+	_outOfRange: "out-of-range:",
+	_placeholderShown: "placeholder-shown:",
+	_autofill: "autofill:",
+	_readonly: "read-only:",
+	_file: "file:",
+	_selection: "selection:",
+	_backdrop: "backdrop:",
+	_motionReduce: "motion-reduce:",
+	_motionSafe: "motion-safe:",
+	_contrastMore: "contrast-more:",
+	_contrastLess: "contrast-less:",
+	_forcedColors: "forced-colors:",
+	_placeholder: "placeholder:",
+	_ariaBusy: "aria-busy:",
+	_ariaChecked: "aria-checked:",
+	_ariaHidden: "aria-hidden:",
+	_ariaPressed: "aria-pressed:",
+	_ariaReadonly: "aria-readonly:",
+	_ariaRequired: "aria-required:",
+	_ariaSelected: "aria-selected:",
+	_ariaCurrent: "aria-[current]:",
+	_ariaDisabled: "aria-disabled:",
+	_ariaExpanded: "aria-expanded:",
+	_dataDisabled: "data-[disabled=true]:",
+	_dataStateOpen: "data-[state=open]:",
+	_dataStateClosed: "data-[state=closed]:",
+	_startingStyle: "starting-style:",
+	_scrollbar: "*::-webkit-scrollbar:",
+	_scrollbarThumb: "*::-webkit-scrollbar-thumb:",
+	_scrollbarTrack: "*::-webkit-scrollbar-track:"
+};
+//#endregion
+export { modifierMappings };

package/dist/core/dist/resolveMotionState.d.ts

@@ -1,4 +1,5 @@
 //#region ../core/dist/resolveMotionState.d.ts
-declare function resolveMotionState(stateKeyframe: Record<string, unknown>, index: number): Record<string, number>;
+//#region src/resolveMotionState.d.ts
+declare function resolveMotionState(stateKeyframe: Record<string, unknown>, index: number): Record<string, number>; //#endregion
 //#endregion
 export { resolveMotionState };

package/dist/core/dist/style-prop-data.d.ts

@@ -0,0 +1,33 @@
+import { StyleProp } from "@uds/types";
+
+//#region ../core/dist/style-prop-data.d.ts
+//#region src/style-prop-data.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>; //#endregion
+//#endregion
+export { PropMapping, propMappings };

package/dist/{loader/dist/packages/core/dist/propMappings.js → core/dist/style-prop-data.js}

@@ -1,4 +1,4 @@
-//#region ../loader/dist/packages/core/dist/propMappings.js
+//#region ../core/dist/style-prop-data.js
 const propMappings = {
 	animation: {
 		classPrefix: "animation",
@@ -1253,96 +1253,5 @@ const propMappings = {
 		augmentType: "CustomTextShadow"
 	}
 };
-/**
-* Built-in modifier mappings (pseudo-classes, pseudo-elements, etc.).
-* Custom modifiers from defineModes() are handled dynamically in the runtime.
-*/
-const modifierMappings = {
-	_after: "after:",
-	_hover: "hover:",
-	_focus: "focus:",
-	_focusWithin: "focus-within:",
-	_focusVisible: "focus-visible:",
-	_active: "active:",
-	_visited: "visited:",
-	_target: "target:",
-	_first: "first:",
-	_last: "last:",
-	_only: "only:",
-	_odd: "odd:",
-	_even: "even:",
-	_firstOfType: "first-of-type:",
-	_lastOfType: "last-of-type:",
-	_onlyOfType: "only-of-type:",
-	_empty: "empty:",
-	_disabled: "disabled:",
-	_enabled: "enabled:",
-	_checked: "checked:",
-	_indeterminate: "indeterminate:",
-	_default: "default:",
-	_required: "required:",
-	_valid: "valid:",
-	_invalid: "invalid:",
-	_inRange: "in-range:",
-	_outOfRange: "out-of-range:",
-	_placeholderShown: "placeholder-shown:",
-	_autofill: "autofill:",
-	_readonly: "read-only:",
-	_file: "file:",
-	_selection: "selection:",
-	_backdrop: "backdrop:",
-	_motionReduce: "motion-reduce:",
-	_motionSafe: "motion-safe:",
-	_contrastMore: "contrast-more:",
-	_contrastLess: "contrast-less:",
-	_forcedColors: "forced-colors:",
-	_placeholder: "placeholder:",
-	_ariaBusy: "aria-busy:",
-	_ariaChecked: "aria-checked:",
-	_ariaHidden: "aria-hidden:",
-	_ariaPressed: "aria-pressed:",
-	_ariaReadonly: "aria-readonly:",
-	_ariaRequired: "aria-required:",
-	_ariaSelected: "aria-selected:",
-	_ariaCurrent: "aria-[current]:",
-	_ariaDisabled: "aria-disabled:",
-	_ariaExpanded: "aria-expanded:",
-	_dataDisabled: "data-[disabled=true]:",
-	_dataStateOpen: "data-[state=open]:",
-	_dataStateClosed: "data-[state=closed]:",
-	_startingStyle: "starting-style:",
-	_scrollbar: "*::-webkit-scrollbar:",
-	_scrollbarThumb: "*::-webkit-scrollbar-thumb:",
-	_scrollbarTrack: "*::-webkit-scrollbar-track:"
-};
-/**
-* 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`
-*/
-const colorPropToOpacityProp = {
-	bg: "bgOpacity",
-	color: "colorOpacity",
-	textDecorationColor: "textDecorationColorOpacity",
-	borderColor: "borderColorOpacity",
-	borderYColor: "borderYColorOpacity",
-	borderXColor: "borderXColorOpacity",
-	borderStartColor: "borderStartColorOpacity",
-	borderLeftColor: "borderLeftColorOpacity",
-	borderEndColor: "borderEndColorOpacity",
-	borderRightColor: "borderRightColorOpacity",
-	borderTopColor: "borderTopColorOpacity",
-	borderBottomColor: "borderBottomColorOpacity",
-	divideColor: "divideColorOpacity",
-	outlineColor: "outlineColorOpacity",
-	ringColor: "ringColorOpacity",
-	ringOffsetColor: "ringOffsetColorOpacity",
-	fillColor: "fillColorOpacity",
-	strokeColor: "strokeColorOpacity",
-	shadowColor: "shadowColorOpacity",
-	caretColor: "caretColorOpacity"
-};
 //#endregion
-export { colorPropToOpacityProp, modifierMappings, propMappings };
+export { propMappings };

package/dist/core/dist/transformPreset.d.ts

@@ -1,6 +1,7 @@
 import { MotionPreset } from "@uds/types";
 
 //#region ../core/dist/transformPreset.d.ts
+//#region src/transformPreset.d.ts
 interface TransformedMotionProps {
   initial?: Record<string, unknown>;
   animate?: Record<string, unknown>;
@@ -12,6 +13,6 @@ interface TransformedMotionProps {
 /**
  * Convert a JS-runtime MotionPreset to a motion/react-compatible props object.
  */
-declare function transformPreset(preset: MotionPreset): TransformedMotionProps;
+declare function transformPreset(preset: MotionPreset): TransformedMotionProps; //#endregion
 //#endregion
 export { TransformedMotionProps, transformPreset };

package/dist/core/dist/withDefaultStyleProps.d.ts

@@ -1,6 +1,7 @@
 import { BorderRadius, GridSpan, GridStartEnd, GridTemplate, StyleAndModifierProps } from "@uds/types";
 
 //#region ../core/dist/withDefaultStyleProps.d.ts
+//#region src/withDefaultStyleProps.d.ts
 interface StackDefaultsInput extends StyleAndModifierProps {
   gap?: StyleAndModifierProps['gap'];
 }
@@ -38,6 +39,6 @@ declare const withDefaultStyleProps: {
     shape?: BorderRadius;
   }) => StyleAndModifierProps;
   Svg: (props: SvgDefaultsInput) => StyleAndModifierProps;
-};
+}; //#endregion
 //#endregion
 export { withDefaultStyleProps };