@yahoo/uds-v5-wip 1.53.0 → 1.55.0

package/dist/config/dist/Props.d.ts

@@ -3,7 +3,6 @@ import { ComponentConfigValue, HtmlTag, LayerInput, PropBinding } from "./compon
 import { ComponentPropsWithoutRef, HTMLAttributes, JSX } from "react";
 
 //#region ../config/dist/Props.d.ts
-//#region src/Props.d.ts
 /**
  * Resolve the native HTML-attribute surface for the config's root tag.
  *
@@ -66,9 +65,5 @@ interface DataAttrs {
 type Props<TConfig extends ComponentConfigValue<Record<string, LayerInput>, Record<string, PropBinding>, HtmlTag | undefined>> = TConfig extends ComponentConfigValue<Record<string, LayerInput>, infer TProps extends Record<string, PropBinding>, infer TTag extends HtmlTag | undefined> ? Prettify<PropsFromConfig<TProps> & Omit<ElementProps<TTag>, keyof TProps> & DataAttrs & {
   as?: string;
 }> : never;
-/**
- * `Props<typeof boxConfig>` for the common 'use the config's inferred
- * type' invocation. Keeps `box.tsx` from having to repeat the generic.
- */
 //#endregion
 export { Props };

package/dist/config/dist/component-config.d.ts

@@ -1,8 +1,8 @@
 import { ComponentRef, CompositeRef, RegisteredComponents, StylePropRef } from "./component-refs.js";
+import * as React$1 from "react";
 import { ReactNode } from "react";
 
 //#region ../config/dist/component-config.d.ts
-//#region src/component-config.d.ts
 /**
  * HTML tag literal. The TypeScript type is `string` (any tag name);
  * runtime renders it via `React.createElement(tag, ...)`.
@@ -15,14 +15,28 @@ type HtmlTag = string;
 /**
  * Object form for a primitive (HTML-tag) layer that needs locked attrs
  * or default CSS-property values.
+ *
+ * Distributive mapped union over `keyof React.JSX.IntrinsicElements` so
+ * `attrs` is narrowed to the HTML props valid for the chosen `tag` at
+ * the call site — `{ tag: 'a', attrs: { href: '/x' } }` type-checks;
+ * `{ tag: 'div', attrs: { href: '/x' } }` does not. `defaultProps`
+ * stays loosely typed: it carries style-prop-keyed CSS declarations
+ * (incl. `_hover`/`_focus`/etc. modifier keys) that feed the @utility
+ * codegen, NOT HTML props.
  */
-interface PrimitiveLayer {
-  tag: HtmlTag;
-  /** HTML attributes always applied to this layer (e.g. `role="alert"`). */
-  attrs?: Record<string, unknown>;
-  /** Default style-prop values for this layer. */
+type PrimitiveLayer = { [T in keyof React$1.JSX.IntrinsicElements]: {
+  tag: T; /** HTML attributes always applied to this layer (e.g. `role="alert"`). */
+  attrs?: Partial<React$1.ComponentPropsWithoutRef<T>>;
+  /**
+   * Default per-layer CSS declarations. Keys are style-prop names (or
+   * raw CSS properties when no registered style prop applies); values
+   * are token refs (`'{spacing/4}'`), alias names, or literal CSS.
+   * Modifier keys (`_hover`, `_focus`, `_dataDisabled`, ...) nest the
+   * same shape recursively. Codegen compiles this into a single
+   * `@utility componentName-layerName { ... }` block.
+   */
   defaultProps?: Record<string, unknown>;
-}
+} }[keyof React$1.JSX.IntrinsicElements];
 /**
  * Object form for a layer that's a composed React component (registered
  * via `.registerComponents({...})`). The `component` field is a brace-ref
@@ -95,19 +109,28 @@ interface CompositeBinding {
   layers: Record<string, string>;
 }
 /**
- * Forward a JSX prop value to one of the component's layers as an
- * existing surface key. If the target layer is a primitive, `from` is
- * an HTML attr / event name; if it's a composed component, `from` is
- * one of that component's existing props.
+ * Authoring-site form of `ForwardBinding`, narrowed against the
+ * component's own layer map. Distributes over `keyof TLayers` so:
  *
- * `from` is a bare string (no braces) — the absence of `styleProp` /
- * `composite` keys is how the framework discriminates this shape from
- * the registered-binding shapes.
+ *  - `layer` is constrained to one of the declared layer names.
+ *  - `from` is constrained by the target layer's shape:
+ *      • **ComposedLayer** (`{ component: '{Box}' }`) → one of the
+ *        wrapped component's exposed JSX props (looked up against
+ *        `RegisteredComponents['Box']`), so `{ layer: 'label', from:
+ *        'variant' }` only type-checks if Text registers `variant`.
+ *      • **PrimitiveLayer / bare HTML tag** → any string (HTML attr or
+ *        event name; type-precision here would require pulling
+ *        `JSX.IntrinsicElements[tag]`, deferred).
+ *
+ * Structurally extends `ForwardBinding` so the runtime's type-guard
+ * (`isForwardBinding`) still recognizes typed entries.
  */
-interface ForwardBinding {
-  layer: string;
-  from: string;
-}
+type TypedForwardBinding<TLayers extends Record<string, LayerInput>> = { [K in keyof TLayers & string]: {
+  layer: K;
+  from: TLayers[K] extends {
+    component: `{${infer C}}`;
+  } ? C extends keyof RegisteredComponents ? keyof RegisteredComponents[C] & string : string : string;
+} }[keyof TLayers & string];
 /**
  * Boolean prop — toggled on/off, no value beyond presence. Useful for
  * `loading`, `disabled`, `selected`. Each layer's bundle gets a
@@ -143,30 +166,28 @@ type StylePropShorthand = StylePropRef;
  * `{ layer, styleProp }` binding — no shorthand. The shorthand
  * `'{bg}'` is allowed only in the primitive form's props (see
  * `PrimitivePropBinding`).
+ *
+ * Generic over `TLayers` so `TypedForwardBinding` can narrow the
+ * `layer` + `from` fields against the component's own layer map.
+ * Consumers that don't know the layer map (read-side helpers,
+ * `bindRender`) parameterize with the wide default
+ * `Record<string, LayerInput>` and get the loose `ForwardBinding`.
  */
-type VerbosePropBinding = StylePropBinding | SingleLayerCompositeBinding | CompositeBinding | ForwardBinding | BoolMarker | EnumMarker<any>;
+type VerbosePropBinding<TLayers extends Record<string, LayerInput> = Record<string, LayerInput>> = StylePropBinding | SingleLayerCompositeBinding | CompositeBinding | TypedForwardBinding<TLayers> | BoolMarker | EnumMarker<any>;
 /**
  * All allowed shapes for a single entry in the primitive form's `props`
  * block. Primitive form adds the `StylePropShorthand` brace-ref
  * (`'{bg}'`) on top of every verbose form — the root layer is
  * unambiguous so the shorthand resolves trivially.
  */
-type PrimitivePropBinding = StylePropShorthand | VerbosePropBinding;
+type PrimitivePropBinding<TLayers extends Record<string, LayerInput> = Record<string, LayerInput>> = StylePropShorthand | VerbosePropBinding<TLayers>;
 /**
  * Union of every legal prop-binding shape across both forms. Read-side
  * helpers (`Props<TConfig>`, runtime resolution) accept this widest
  * union; authoring-side input types (`ComponentConfigInput`) take the
  * tighter `VerbosePropBinding`.
  */
-type PropBinding = PrimitivePropBinding;
-/**
- * Marker for a boolean JSX prop. Use inside the `props` block:
- *
- *     props: {
- *       loading: bool(),
- *       disabled: bool(),
- *     }
- */
+type PropBinding<TLayers extends Record<string, LayerInput> = Record<string, LayerInput>> = PrimitivePropBinding<TLayers>;
 /**
  * Names of prop bindings that participate in matrix/strip iteration —
  * i.e. props authored as `enums({...})` or `bool()`. Other prop bindings
@@ -231,14 +252,29 @@ type Examples<TProps extends Record<string, unknown> = Record<string, unknown>>
   default: ExampleEntry<IterableAxisOf<TProps>>;
 } & Record<string, ExampleEntry<IterableAxisOf<TProps>>>;
 /**
- * The architecture-doc-target component config. Distinct from today's
- * `SingleComponentDef` (`base` + `variants` shape) — this is the
- * pure-data, layers-first shape the new `defineComponent` accepts.
+ * A compound-variant entry — applies a per-layer style override when
+ * *all* `conditions` match the incoming JSX props. Mirrors the legacy
+ * `compoundVariants: [{ conditions, styles }]` shape (see
+ * `componentCompoundClass()` for the emitted class name).
+ *
+ *     compoundVariants: [
+ *       {
+ *         conditions: { size: 'sm', variant: 'brand' },
+ *         styles: { root: { boxShadow: '{shadow/sm}' } },
+ *       },
+ *     ]
  *
- * `TLayers` is inferred from the `layers` block so prop bindings can
- * narrow their `layer` field against the component's actual layer
- * names; typos surface at the authoring site.
+ * `conditions` keys are JSX-prop names that resolve to `enums()` /
+ * `bool()` markers in the `props` block; values are the variant values
+ * (or `'true'` / `'false'` for bools) that must all match for the entry
+ * to apply. Codegen emits one `@utility componentName-layerName--<sorted
+ * conditions>` block per (layer); runtime appends that class when
+ * conditions match.
  */
+interface CompoundVariant {
+  conditions: Record<string, string>;
+  styles: Record<string, Record<string, unknown>>;
+}
 /**
  * Branded shape returned by `defineComponent({...})`. Carries `layers`,
  * `props`, AND a phantom `__tag` slot as const-narrowed types so
@@ -255,24 +291,25 @@ type Examples<TProps extends Record<string, unknown> = Record<string, unknown>>
  * When the root isn't a literal tag (brace-ref / composed layer), it's
  * `undefined` and `Props<TConfig>` falls back to `HTMLAttributes<HTMLElement>`.
  *
- * The component's name is supplied at registration time, not here.
+ * `__componentName` is a non-enumerable runtime slot assigned by
+ * `.registerComponents({ Name: config })` — the key becomes the name.
+ * The renderer reads it to emit `componentName-layerName` @utility
+ * classes onto each layer's bundle (matching the classes codegen emits
+ * from the same `defaultProps`). Absent until registered.
  */
 interface ComponentConfigValue<TLayers extends Record<string, LayerInput>, TProps extends Record<string, PropBinding> = Record<string, PropBinding>, TTag extends HtmlTag | undefined = RootTag<TLayers>> {
   readonly __kind: 'componentConfig';
   readonly __tag?: TTag;
+  readonly __componentName?: string;
   readonly layers: TLayers;
   readonly props?: TProps;
   readonly defaultProps?: Record<string, unknown>;
+  readonly compoundVariants?: CompoundVariant[];
   /**
    * Component examples — see {@link Examples}. Carried through from
    * `ComponentConfigInput.examples`.
    */
   readonly examples?: Examples<TProps>;
 }
-/**
- * The bundle passed to the render function for each layer — a ready-to-
- * spread object with `className` and any forwarded attrs. The render
- * function destructures `props.<layerName>` into the JSX position.
- */
 //#endregion
-export { BoolMarker, ComponentConfigValue, ComposedLayer, CompositeBinding, EnumMarker, ForwardBinding, HtmlTag, LayerInput, PrimitiveLayer, PrimitivePropBinding, PropBinding, RootTag, SingleLayerCompositeBinding, StylePropBinding, StylePropShorthand, VerbosePropBinding };
+export { BoolMarker, ComponentConfigValue, ComposedLayer, CompositeBinding, CompoundVariant, EnumMarker, HtmlTag, LayerInput, PrimitiveLayer, PrimitivePropBinding, PropBinding, RootTag, SingleLayerCompositeBinding, StylePropBinding, StylePropShorthand, VerbosePropBinding };

package/dist/config/dist/component-refs.d.ts

@@ -1,5 +1,4 @@
 //#region ../config/dist/component-refs.d.ts
-//#region src/component-refs.d.ts
 /**
  * Augmentable registries + template-literal ref types for the
  * component-API surface.
@@ -64,14 +63,6 @@ interface RegisteredStyleProps {}
  * call.
  */
 interface RegisteredComposites {}
-/**
- * Registered motion-preset names. Each key is the preset identifier
- * (`'{fadeIn}'`); value is `void`.
- *
- * Populated by codegen from `uds.config.ts`'s `.defineMotion({...})`
- * (motion has no separate `.registerMotion` step today; the entries
- * come directly from `defineMotion` keys).
- */
 /**
  * Brace-wrapped reference to a registered React component. Falls open
  * to `'{${string}}'` when the registry is unaugmented (e.g. inside
@@ -90,9 +81,5 @@ type StylePropRef = [keyof RegisteredStyleProps] extends [never] ? `{${string}}`
  * when unaugmented.
  */
 type CompositeRef = [keyof RegisteredComposites] extends [never] ? `{${string}}` : `{${Extract<keyof RegisteredComposites, string>}}`;
-/**
- * Brace-wrapped reference to a registered motion preset. Falls open
- * when unaugmented.
- */
 //#endregion
 export { ComponentRef, CompositeRef, RegisteredComponents, RegisteredComposites, RegisteredStyleProps, StylePropRef };

package/dist/config/dist/component-resolution.d.ts

@@ -1 +1 @@
-export { };
+import { ComponentsConfig } from "@uds/types";

package/dist/config/dist/consts/defaultColors.d.ts

@@ -1,5 +1,4 @@
 //#region ../config/dist/consts/defaultColors.d.ts
-//#region src/consts/defaultColors.d.ts
 declare const defaultColors: {
   inherit: string;
   current: string;
@@ -248,6 +247,6 @@ declare const defaultColors: {
   'rose-800': string;
   'rose-900': string;
   'rose-950': string;
-}; //#endregion
+};
 //#endregion
 export { defaultColors };

package/dist/config/dist/createComponent.js

@@ -1 +1 @@
-import "react";
+import "../../utils/dist/index.js";

package/dist/config/dist/createConfig.d.ts

@@ -6,7 +6,6 @@ import { ResolvedStyleProp } from "./resolveStyleProp.js";
 import { BaseModifierProp, ComponentsConfig, CompositeStylesConfig, ConfigurableProp, ModifierProp, MotionPreset, RemotionComponentDef, RemotionConfig, RemotionTransitionDef } from "@uds/types";
 
 //#region ../config/dist/createConfig.d.ts
-//#region src/createConfig.d.ts
 type MotionPresetsDef = Record<string, MotionPreset>;
 type MotionAliasValue<TMotion> = TMotion extends Record<string, infer V> ? Extract<V, string> : never;
 type EmptyMotion = {};
@@ -79,12 +78,6 @@ type GetModifierFromInput<I extends ModesInput> = { [SetKey in keyof I]: { [OptK
 } ? M extends ModifierNameShape ? M : never : OptKey extends string ? `_${OptKey}` : never }[keyof I[SetKey]['options']] }[keyof I];
 /** Reject any input whose derived/explicit modifiers collide with reserved names. */
 type CheckForReservedModifiersInput<I extends ModesInput> = true extends HasReservedModifier<GetModifierFromInput<I>> ? 'ERROR: Cannot use reserved modifier names from ModifierProp. Please use a different modifier name.' : I;
-/**
- * Convert the authored object-keyed input into the internal `ModeGroup[]` shape.
- * Derives `_${optionKey}` modifiers when no explicit `modifier` is provided.
- * Never sets `default: true` — the new API has no concept of a default option;
- * downstream consumers treat "no option active" as the implicit default.
- */
 interface ModifierDef {
   modifier: ModifierNameShape;
   selector: string;
@@ -164,7 +157,6 @@ type VarsToTokens<TVars extends VarsConfig> = { [K in keyof TVars]: { [T in Excl
 type MergeTokens<A, B> = { [K in keyof A | keyof B]: K extends keyof B ? K extends keyof A ? A[K] & B[K] : B[K] : K extends keyof A ? A[K] : never };
 /** Build a structured token reference object from atomic tokens */
 declare function buildTokenReference(atomic: AtomicToken<ModifierNameShape>[], configPrefix: string): Record<string, Record<string, string>>;
-/** Build a structured composite-styles reference object for use in defineModifiers context */
 /** Global styles definition — CSS selector → style props */
 type GlobalStylesDef = Record<string, Record<string, any>>;
 /** CSS properties for the example wrapper element */
@@ -368,10 +360,6 @@ interface UdsConfig<TModifier extends ModifierNameShape = ModifierProp, TTokens
 type AnyUdsConfig = UdsConfig<ModifierNameShape, any, any, any, any, any, any>;
 /** Extract the raw config data from a builder instance */
 declare function resolveConfig(config: AnyUdsConfig): UdsConfigData;
-/**
- * Resolve configuration with all token references replaced by their raw values.
- * Useful for tools that need the actual values (e.g. anatomy generation).
- */
 declare function createConfigBuilder<TModifier extends ModifierNameShape = ModifierProp, TTokens = EmptyTokens, TMotion = EmptyMotion, TExt extends Record<string, any> = {}, TCompositeStyles = EmptyCompositeStyles, TModeModifiers extends ModifierNameShape = never, TVars extends VarsConfig = EmptyVars>(data: UdsConfigData, extensions?: TExt): UdsConfig<TModifier, TTokens, TMotion, TExt, TCompositeStyles, TModeModifiers, TVars> & TExt;
 interface InterpolateMarker {
   __type: 'interpolate';

package/dist/config/dist/createConfig.js

@@ -4,10 +4,10 @@ import "../../utils/dist/index.js";
 import { getConfigurablePropMapping } from "../../core/dist/configurable-prop-helpers.js";
 import "../../core/dist/index.js";
 import { buildMotionReference, resolveComponentMotionAliases, validateComponentVariants } from "./component-resolution.js";
-import { setRegisteredStyleProps } from "./runtime-registry.js";
 import { applyPresetToData, deepMerge, mergeAtomic } from "./preset-merge.js";
 import { resolveTokenType, sniffTokenTypeFromValue } from "./resolveTokenTypes.js";
 import { resolveStyleProp } from "./resolveStyleProp.js";
+import { setRegisteredStyleProps } from "./runtime-registry.js";
 //#region ../config/dist/createConfig.js
 /** biome-ignore-all lint/suspicious/noExplicitAny: necessary for dynamic builder to work correctly */
 /**
@@ -449,8 +449,16 @@ function createConfigBuilder(data, extensions) {
 		},
 		registerComponents(configs) {
 			const normalized = {};
-			for (const [name, entry] of Object.entries(configs)) if (typeof entry === "function" && "__config" in entry) normalized[name] = entry.__config;
-			else normalized[name] = entry;
+			for (const [name, entry] of Object.entries(configs)) {
+				const config = typeof entry === "function" && "__config" in entry ? entry.__config : entry;
+				Object.defineProperty(config, "__componentName", {
+					enumerable: false,
+					configurable: true,
+					writable: true,
+					value: name
+				});
+				normalized[name] = config;
+			}
 			return next({ componentConfigs: {
 				...data.componentConfigs ?? {},
 				...normalized

package/dist/config/dist/defineComponent.d.ts

@@ -3,7 +3,6 @@ import { Props } from "./Props.js";
 import { ReactNode } from "react";
 
 //#region ../config/dist/defineComponent.d.ts
-//#region src/defineComponent.d.ts
 /**
  * A React component bound to a `defineComponent` config, with the
  * source config attached as a phantom type slot. Tools (codegen,
@@ -14,11 +13,5 @@ import { ReactNode } from "react";
 type BoundComponent<TConfig extends ComponentConfigValue<Record<string, LayerInput>, any, HtmlTag | undefined>, TExtra extends Record<string, unknown> = {}> = React.FC<Props<TConfig> & TExtra> & {
   readonly __config: TConfig;
 };
-/**
- * A `defineComponent({...})` config value with a `.render(fn)` builder
- * method bolted on. The builder is non-enumerable so JSON serialization
- * still produces pure data — codegen can read `__kind`, `layers`,
- * `props`, and `defaultProps` without seeing the render hook.
- */
 //#endregion
 export { BoundComponent };

package/dist/config/dist/defineStyleProp.d.ts

@@ -1,4 +1,4 @@
-import { CssValueTypeName } from "./types/css-values.js";
+import { CssValue, CssValueTypeName } from "./types/css-values.js";
 
 //#region ../config/dist/defineStyleProp.d.ts
 /** Runtime input type for `toCss` based on the entry's `type`. */
@@ -22,31 +22,10 @@ type ArbitraryEntry = { [T in CssValueTypeName]: {
  *  - An array of {@link ArbitraryEntry} for multi-shape acceptance.
  */
 type ArbitrarySpec = CssValueTypeName | readonly ArbitraryEntry[];
-/**
- * The literal-keyword subset of values a property accepts, derived from
- * {@link CssPropertyValues}[P]. For custom CSS properties (`--*`) the value
- * type is governed by the required `cssType` field instead, so any string
- * is accepted at the type level.
- */
 type StylePropMetadata = {
   label?: string;
   description?: string;
 };
-/**
- * A finalized style prop. Returned by `defineStyleProp(spec)` (or the
- * `.metadata({...})` chain). Consumers wrap these in
- * `uds.registerStyleProps({ <propName>: ... })`.
- *
- * `cssProperty` is passed through verbatim from the authored input:
- *  - **string** — a direct prop writing one CSS property.
- *  - **`readonly string[]`** — a fan-out prop writing every CSS
- *    property in the list (e.g. `borderRadiusStart` covering both
- *    start-side corners).
- *
- * Readers that need iteration normalize at the call site
- * (`Array.isArray(p) ? p : [p]`); readers that only need the primary
- * use the string directly or `Array.isArray(p) ? p[0] : p`.
- */
 /**
  * Internal shape attached to a {@link StyleProp} by `.withOpacity()`.
  * The resolver inspects this at `resolveConfig` time to synthesize a
@@ -80,14 +59,5 @@ interface AnyStyleProp {
   readonly metadata: StylePropMetadata;
   readonly opacityPair?: OpacityPairSpec;
 }
-/**
- * Return shape of {@link defineStyleProp}. The `metadata` field doubles as
- * a callable chain: read it to access `{ label?, description? }` (both
- * optional, so an unset metadata reads `undefined` for either field) or
- * call it as `.metadata({ label, description })` to attach metadata and
- * get back a plain {@link StyleProp}. A function satisfies the
- * {@link StylePropMetadata} structural shape because both fields are
- * optional, so the dual nature is type-safe.
- */
 //#endregion
 export { AnyStyleProp, ArbitraryEntry, ArbitrarySpec, StylePropMetadata };

package/dist/config/dist/index.d.ts

@@ -1,12 +1,12 @@
 import { ComponentRef, CompositeRef, RegisteredComponents, RegisteredComposites, RegisteredStyleProps, StylePropRef } from "./component-refs.js";
-import { BoolMarker, ComponentConfigValue, ComposedLayer, CompositeBinding, EnumMarker, ForwardBinding, HtmlTag, LayerInput, PrimitiveLayer, PrimitivePropBinding, PropBinding, RootTag, SingleLayerCompositeBinding, StylePropBinding, StylePropShorthand, VerbosePropBinding } from "./component-config.js";
+import { BoolMarker, ComponentConfigValue, ComposedLayer, CompositeBinding, CompoundVariant, EnumMarker, HtmlTag, LayerInput, PrimitiveLayer, PrimitivePropBinding, PropBinding, RootTag, SingleLayerCompositeBinding, StylePropBinding, StylePropShorthand, VerbosePropBinding } from "./component-config.js";
 import { Props } from "./Props.js";
 import { BoundComponent } from "./defineComponent.js";
 import { ColorFn, ColorKeyword, CssAngle, CssColor, CssLength, CssPercentage, CssRatio, CssTime, CssValue, CssValueTypeName, HexColor, HslColor, RgbColor } from "./types/css-values.js";
 import { AnyStyleProp, ArbitraryEntry, ArbitrarySpec, StylePropMetadata } from "./defineStyleProp.js";
 import { TokenType, VarGroupDef, VarTokenDef, VarsConfig } from "./types.js";
-import { AtomicToken, BuildOptions, CheckForReservedModifiersInput, ComponentConfig, DefineComponentInput, DefineComponentMotionInput, ExampleDef, ExampleEntryDef, ExampleLayoutStyles, GetModifierFromInput, GlobalStylesDef, InterpolateMarker, ModeGroup, ModeOption, ModeOptionInput, ModeSetInput, ModesInput, ModifierDef, MotionPresetsDef, SingleComponentDef, UdsConfig, UdsConfigData, buildTokenReference, createConfigBuilder, darker, lighter, resolveConfig } from "./createConfig.js";
 import { ResolvedStyleProp, ResolvedToken } from "./resolveStyleProp.js";
+import { AtomicToken, BuildOptions, CheckForReservedModifiersInput, ComponentConfig, DefineComponentInput, DefineComponentMotionInput, ExampleDef, ExampleEntryDef, ExampleLayoutStyles, GetModifierFromInput, GlobalStylesDef, InterpolateMarker, ModeGroup, ModeOption, ModeOptionInput, ModeSetInput, ModesInput, ModifierDef, MotionPresetsDef, SingleComponentDef, UdsConfig, UdsConfigData, buildTokenReference, createConfigBuilder, darker, lighter, resolveConfig } from "./createConfig.js";
 import { defaultColors } from "./consts/defaultColors.js";
 import { SerializedConfig, TokenRef, buildReverseMap, deserializeConfig, serializeConfig } from "./serialize.js";
 import { ComponentsConfig as ComponentsConfig$1 } from "@uds/types";

package/dist/config/dist/index.js

@@ -1,6 +1,5 @@
 import "./component-resolution.js";
 import "./consts/defaultColors.js";
-import "./createComponent.js";
 import "./propertyAcceptedTypes.js";
 import "./refs.js";
 import "./resolveTokenTypes.js";

package/dist/config/dist/refs.js

@@ -27,22 +27,30 @@ import "../../utils/dist/index.js";
 * still resolves to `var(--uds-color-brand)`, regardless of whether the
 * brand value itself is a literal or a ref.
 */
-const REF_PATTERN = /^\{([^/{}]+)\/([^{}]+)\}$/;
+const REF_PATTERN = /^\{([^{}]+)\}$/;
 /**
 * Parse a value as a token ref. Returns `null` when the value isn't a
 * brace-wrapped ref of the form `{namespace/name}`. The `name` portion
 * may contain additional slashes — only the first slash is treated as
 * the namespace separator.
+*
+* Color-modifier values (`darken` / `lighten`) are a structured object
+* form, not a string-encoded suffix. See {@link TokenWithModifier}.
 */
 function parseTokenRef(value) {
-	const match = REF_PATTERN.exec(value);
-	if (!match) return null;
-	const namespace = match[1];
-	const name = match[2];
-	if (!namespace || !name) return null;
+	const outer = REF_PATTERN.exec(value);
+	if (!outer) return null;
+	const body = outer[1];
+	if (!body) return null;
+	return parseRefBody(body);
+}
+function parseRefBody(body) {
+	if (body.includes("{") || body.includes("}")) return null;
+	const slashIdx = body.indexOf("/");
+	if (slashIdx <= 0 || slashIdx >= body.length - 1) return null;
 	return {
-		namespace,
-		name
+		namespace: body.slice(0, slashIdx),
+		name: body.slice(slashIdx + 1)
 	};
 }
 /**

package/dist/config/dist/resolveStyleProp.d.ts

@@ -1,7 +1,6 @@
 import { CssValueTypeName } from "./types/css-values.js";
 import { ArbitrarySpec, StylePropMetadata } from "./defineStyleProp.js";
 //#region ../config/dist/resolveStyleProp.d.ts
-//#region src/resolveStyleProp.d.ts
 interface ResolvedToken {
   /** The token's raw key, e.g. `'brand'`. */
   readonly name: string;
@@ -78,11 +77,5 @@ interface ResolvedStyleProp {
   readonly arbitrary: ArbitrarySpec | undefined;
   readonly metadata: StylePropMetadata;
 }
-/**
- * Structurally-loose input shape for the resolver. Any `StyleProp<P>` from
- * `defineStyleProp` is assignable to this. Defined locally so the
- * resolver's signature doesn't expand `ValuesEntry<P>` over the full CSS
- * property union (TS2590).
- */
 //#endregion
 export { ResolvedStyleProp, ResolvedToken };

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

@@ -3,7 +3,6 @@ import { AtomicToken, ExampleDef, ModeGroup, ModifierDef, MotionPresetsDef, UdsC
 import { CompositeStylesConfig } from "@uds/types";
 
 //#region ../config/dist/serialize.d.ts
-//#region src/serialize.d.ts
 type ModifierNameShape = `_${string}`;
 type TokenRef = {
   $ref: string;
@@ -68,6 +67,6 @@ declare function serializeConfig(config: UdsConfig): SerializedConfig;
  * Resolves `$ref` markers back to `var()` strings using the atomic token
  * definitions, then reconstructs the builder chain.
  */
-declare function deserializeConfig(data: SerializedConfig): UdsConfig; //#endregion
+declare function deserializeConfig(data: SerializedConfig): UdsConfig;
 //#endregion
 export { SerializedConfig, TokenRef, buildReverseMap, deserializeConfig, serializeConfig };

package/dist/config/dist/style-prop-runtime.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/config/dist/types/css-values.d.ts

@@ -1,5 +1,4 @@
 //#region ../config/dist/types/css-values.d.ts
-//#region src/types/css-values.d.ts
 /**
  * CSS value-type primitives — building blocks used by {@link CssPropertyValues}
  * in `./css-properties` and by `defineStyleProp` to constrain authored values.
@@ -56,6 +55,6 @@ type CssValue = {
   ident: string;
   string: string;
 };
-type CssValueTypeName = keyof CssValue; //#endregion
+type CssValueTypeName = keyof CssValue;
 //#endregion
 export { ColorFn, ColorKeyword, CssAngle, CssColor, CssLength, CssPercentage, CssRatio, CssTime, CssValue, CssValueTypeName, HexColor, HslColor, RgbColor };

package/dist/config/dist/types.d.ts

@@ -1,5 +1,4 @@
 //#region ../config/dist/types.d.ts
-//#region src/types.d.ts
 /**
  * Scalar DTCG-aligned token types. Composite types (shadow, gradient,
  * typography, border, transition, cubicBezier) are intentionally deferred
@@ -67,6 +66,6 @@ type VarGroupDef<M extends `_${string}` = `_${string}`> = {
  *   spacing: { $type: 'dimension', 1: { value: '0.25rem' }, 2: { value: '0.5rem' } },
  * }
  */
-type VarsConfig<M extends `_${string}` = `_${string}`> = Record<string, VarGroupDef<M>>; //#endregion
+type VarsConfig<M extends `_${string}` = `_${string}`> = Record<string, VarGroupDef<M>>;
 //#endregion
 export { TokenType, VarGroupDef, VarTokenDef, VarsConfig };