@yahoo/uds-v5-wip 1.60.0 → 1.61.0

package/dist/config/dist/defineCompositeStyle.js

@@ -0,0 +1,18 @@
+//#region ../config/dist/defineCompositeStyle.js
+/**
+* Author a composite style. Returns a branded value the consumer
+* passes to `.registerComposites({...})` on the UDS builder.
+*
+* Pure — no global registration happens here; the builder's
+* `.registerComposites({...})` is the registration step.
+*/
+function defineCompositeStyle(input) {
+	return {
+		__kind: "compositeStyle",
+		label: input.label,
+		...input.description !== void 0 ? { description: input.description } : {},
+		styles: input.styles
+	};
+}
+//#endregion
+export { defineCompositeStyle };

package/dist/config/dist/defineMotionConfig.d.ts

@@ -0,0 +1,152 @@
+import { CSSProperties } from "react";
+
+//#region ../config/dist/defineMotionConfig.d.ts
+//#region src/defineMotionConfig.d.ts
+/** Augmented by codegen with motion preset names from uds.config.ts */
+interface CustomMotionPreset {}
+/** Union of all configured motion preset names */
+type MotionPresetName = keyof CustomMotionPreset;
+/**
+ * Animatable properties for motion keyframes.
+ *
+ * Values can be numbers, strings, or CSS var() references from tokens.
+ * motion/react supports animating CSS custom properties directly, so
+ * token references like `var(--uds-color-brand)` work here.
+ */
+interface MotionKeyframe {
+  opacity?: number | number[];
+  scale?: number | number[];
+  scaleX?: number | number[];
+  scaleY?: number | number[];
+  z?: number | string | (number | string)[];
+  rotate?: number | number[];
+  x?: number | string | (number | string)[];
+  y?: number | string | (number | string)[];
+  rotateX?: number | number[];
+  rotateY?: number | number[];
+  skewX?: number | number[];
+  skewY?: number | number[];
+  width?: number | string | (number | string)[];
+  height?: number | string | (number | string)[];
+  /** Animate background color (supports token var() references) */
+  backgroundColor?: string | string[];
+  /** Animate text color (supports token var() references) */
+  color?: string | string[];
+  /** Animate border color (supports token var() references) */
+  borderColor?: string | string[];
+  /** Animate border radius */
+  borderRadius?: number | string | (number | string)[];
+  /** Arbitrary CSS custom properties to animate */
+  [cssVar: `--${string}`]: string | number | (string | number)[];
+}
+/** Transition configuration for a motion preset */
+interface MotionTransition {
+  /** Framer Motion transition type */
+  type?: 'tween' | 'spring' | 'inertia';
+  duration?: number;
+  delay?: number;
+  ease?: string | [number, number, number, number];
+  stiffness?: number;
+  damping?: number;
+  mass?: number;
+  bounce?: number;
+  velocity?: number;
+  restDelta?: number;
+  restSpeed?: number;
+  repeat?: number;
+  repeatType?: 'loop' | 'reverse' | 'mirror';
+  repeatDelay?: number;
+}
+interface JsMotionPreset {
+  runtime: 'js';
+  initial?: MotionKeyframe;
+  animate?: MotionKeyframe;
+  exit?: MotionKeyframe;
+  transition?: MotionTransition;
+  whileHover?: MotionKeyframe;
+  whileTap?: MotionKeyframe;
+  reducedMotion?: 'none' | Partial<JsMotionPreset>;
+}
+/**
+ * Inline motion/react config without uds runtime discriminators.
+ * Allows arbitrary motion/react props beyond the typed subset.
+ */
+interface MotionInlineConfig {
+  initial?: Record<string, unknown>;
+  animate?: Record<string, unknown>;
+  exit?: Record<string, unknown>;
+  transition?: Record<string, unknown>;
+  whileHover?: Record<string, unknown>;
+  whileTap?: Record<string, unknown>;
+  [key: string]: unknown;
+}
+interface CssMotionPreset {
+  runtime: 'css';
+  /** CSS @keyframes map (e.g. `{ from: { opacity: 0 }, to: { opacity: 1 } }`). */
+  keyframes: {
+    from?: MotionKeyframe;
+    to?: MotionKeyframe;
+    [offset: `${number}%`]: MotionKeyframe | undefined;
+  };
+  animationDuration?: CSSProperties['animationDuration'];
+  animationTimingFunction?: CSSProperties['animationTimingFunction'];
+  animationDelay?: CSSProperties['animationDelay'];
+  animationIterationCount?: CSSProperties['animationIterationCount'];
+  animationDirection?: CSSProperties['animationDirection'];
+  animationFillMode?: CSSProperties['animationFillMode'];
+  animationPlayState?: CSSProperties['animationPlayState'];
+  reducedMotion?: 'none';
+}
+/** A named motion preset definition */
+type MotionPreset = JsMotionPreset | CssMotionPreset;
+/** Animate value with optional data-attribute conditional keyframes */
+type SlotMotionAnimate = MotionKeyframe & {
+  /**
+   * Conditional keyframes keyed by data-attribute value.
+   * The key is the HTML data attribute name (e.g. `'data-state'`),
+   * and the value maps attribute values to keyframes.
+   *
+   * Example:
+   * ```ts
+   * animate: {
+   *   'data-state': { open: { rotate: 180 }, closed: { rotate: 0 } }
+   * }
+   * ```
+   */
+  [dataAttr: `data-${string}`]: Record<string, MotionStateKeyframe> | undefined;
+};
+/** Motion config for a single slot */
+interface SlotMotionConfig {
+  initial?: MotionKeyframe;
+  animate?: MotionKeyframe;
+  exit?: MotionKeyframe;
+  transition?: MotionTransition;
+  /** Gesture: animate while hovered (JS runtime only) */
+  whileHover?: MotionKeyframe;
+  /** Gesture: animate while pressed (JS runtime only) */
+  whileTap?: MotionKeyframe;
+  /** Enable drag on this element (JS runtime only) */
+  drag?: boolean | 'x' | 'y';
+  /** Constrain drag movement */
+  dragConstraints?: {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+  };
+  /** Elasticity of drag beyond constraints (0 = rigid, 1 = full elastic) */
+  dragElastic?: number;
+  /** Snap back to origin on drag release */
+  dragSnapToOrigin?: boolean;
+  /** Enable layout animations (JS runtime only) */
+  layout?: boolean | 'position' | 'size';
+}
+interface InterpolateMarker {
+  __type: 'interpolate';
+  output: number[];
+  extrapolate: 'clamp' | 'extend' | 'identity';
+}
+/** A keyframe where values may include InterpolateMarker for index-based interpolation */
+type MotionStateKeyframe = { [K in keyof MotionKeyframe]?: MotionKeyframe[K] | InterpolateMarker }; //#endregion
+//#endregion
+export { CssMotionPreset, CustomMotionPreset, InterpolateMarker, JsMotionPreset, MotionInlineConfig, MotionKeyframe, MotionPreset, MotionPresetName, MotionStateKeyframe, MotionTransition, SlotMotionAnimate, SlotMotionConfig };

package/dist/config/dist/definePreview.d.ts

@@ -0,0 +1,45 @@
+import { ReactElement } from "react";
+
+//#region ../config/dist/definePreview.d.ts
+//#region src/definePreview.d.ts
+/**
+ * Authoring metadata attached via `.metadata({ ... })` on a preview.
+ * Optional; codegen reads these slots when emitting `manifest.preview[name]`.
+ */
+interface PreviewMetadata {
+  /** Free-form description used by docs / catalog tile tooltips. */
+  description?: string;
+  /** Icon SVG path or identifier used by the catalog tile. */
+  icon?: string;
+  /** Minimum container width hint for the preview render surface. */
+  minWidth?: number;
+}
+/**
+ * The value `definePreview(jsx)` produces — a branded object whose
+ * `element` field carries the authored JSX. The `.metadata({...})`
+ * chain attaches authoring metadata non-enumerably on `__metadata`.
+ */
+interface DefinedPreview<E extends ReactElement = ReactElement> {
+  readonly __kind: 'preview';
+  readonly element: E;
+  /** Non-enumerable runtime slot populated by `.metadata({...})`. */
+  readonly __metadata?: PreviewMetadata;
+  /**
+   * Chainable: attach authoring metadata. Returns a new `DefinedPreview`
+   * carrying the merged metadata (last call wins on collision).
+   */
+  metadata(meta: PreviewMetadata): DefinedPreview<E>;
+}
+/**
+ * Wrap an authored JSX expression as a `DefinedPreview`. The element is
+ * captured as-is; codegen reads its source via ts-morph and converts
+ * to a canvas `Spec` for rendering.
+ *
+ * `definePreview` is a typed identity at runtime — it doesn't render
+ * the element or eagerly evaluate it. The branded shape exists so
+ * `registerPreviews` can require that every value is a preview (not
+ * just any ReactElement) and so codegen can find call sites by name.
+ */
+declare function definePreview<E extends ReactElement>(element: E): DefinedPreview<E>; //#endregion
+//#endregion
+export { DefinedPreview, PreviewMetadata, definePreview };

package/dist/config/dist/definePreview.js

@@ -0,0 +1,35 @@
+//#region ../config/dist/definePreview.js
+/**
+* Wrap an authored JSX expression as a `DefinedPreview`. The element is
+* captured as-is; codegen reads its source via ts-morph and converts
+* to a canvas `Spec` for rendering.
+*
+* `definePreview` is a typed identity at runtime — it doesn't render
+* the element or eagerly evaluate it. The branded shape exists so
+* `registerPreviews` can require that every value is a preview (not
+* just any ReactElement) and so codegen can find call sites by name.
+*/
+function definePreview(element) {
+	return makePreview(element);
+}
+function makePreview(element, metadata) {
+	const value = {
+		__kind: "preview",
+		element,
+		metadata(meta) {
+			return makePreview(element, {
+				...metadata ?? {},
+				...meta
+			});
+		}
+	};
+	if (metadata !== void 0) Object.defineProperty(value, "__metadata", {
+		enumerable: false,
+		configurable: true,
+		writable: false,
+		value: metadata
+	});
+	return value;
+}
+//#endregion
+export { definePreview };

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

@@ -1,6 +1,29 @@
+import { TokenGroupMarker, TokenMarker } from "./component-config.js";
 import { CssValueTypeName } from "./types/css-values.js";
+import { ColorCssProperty, CssPropertyName, CssPropertyValues } from "./types/css-properties.js";
 
 //#region ../config/dist/defineStyleProp.d.ts
+//#region src/defineStyleProp.d.ts
+/**
+ * Registry of token groups available in the active UDS config. **Empty by
+ * default** — populated via module augmentation by `uds build`'s codegen.
+ */
+interface RegisteredTokenGroups {}
+/**
+ * Companion registry to {@link RegisteredTokenGroups} — each key is a group
+ * namespace, value is a union of its tokens' CSS value types
+ * ({@link CssValueTypeName}). Codegen populates both interfaces.
+ */
+interface RegisteredTokenGroupMeta {}
+/**
+ * Object form pairing a `tokenGroup(...)` marker with an explicit
+ * namespace — disambiguates when two groups share token keys and the
+ * consumer needs to write `'bg.brand'` / `'line.brand'` in JSX.
+ */
+interface NamespacedTokenGroup {
+  ref: TokenGroupMarker;
+  namespace: string;
+}
 /** Runtime input type for `toCss` based on the entry's `type`. */
 type ArbitraryRuntimeValue<T extends CssValueTypeName> = T extends 'integer' | 'number' ? number : string;
 /**
@@ -28,6 +51,113 @@ type ArbitrarySpec = CssValueTypeName | readonly ArbitraryEntry[];
  * type is governed by the required `cssType` field instead, so any string
  * is accepted at the type level.
  */
+type LiteralFor<P extends CssPropertyName | `--${string}`> = [P] extends [CssPropertyName] ? Extract<CssPropertyValues[P], string> : string;
+/**
+ * `{ alias: 'col', value: 'column' }` — an author-facing keyword (`alias`)
+ * that maps to a CSS-valid value (`value`) at emission time. Lets us keep
+ * legacy Tailwind-shorthand parity (`flexDirection='col'` → `flex-direction: column`)
+ * without spelling out the CSS keyword in JSX.
+ *
+ * `value` may be either a CSS literal (`'column'`) or a token ref
+ * (`'{borderWidth/default}'`). When it's a token ref, the resolver looks
+ * up the referenced token and uses its resolved CSS value.
+ *
+ * Type level: codegen emits the `alias` into `RegisteredStyleProps[<prop>]`.
+ * CSS level: the resolver carries the alias→value mapping through to the
+ * CSS emitter so the generated stylesheet uses real CSS keywords.
+ */
+/**
+ * Multi-property CSS map for composite-style aliases. Keys are
+ * camelCase CSS property names (or registered style-prop names);
+ * values are CSS literals or token refs.
+ *
+ * Example: Tailwind's `truncate` sets three properties at once —
+ * `{ overflow: 'hidden', textOverflow: 'ellipsis', whitespace: 'nowrap' }`.
+ */
+type CompositeValueMap = Readonly<Record<string, string>>;
+type ValueAlias<P extends CssPropertyName | `--${string}`> = {
+  readonly alias: string | number | boolean;
+  /** The CSS-emitted value. Accepts:
+   *   - a `token('namespace/name')` marker for design-token references,
+   *   - a property-typed literal,
+   *   - any CSS-valid string, OR
+   *   - a `CompositeValueMap` (inline multi-property style — `truncate=true`
+   *     setting `overflow`, `textOverflow`, `whitespace` all at once).
+   */
+  readonly value: LiteralFor<P> | TokenMarker | (string & {}) | CompositeValueMap;
+};
+/**
+ * A single entry in the `values` array — one of:
+ *  - a token-group ref (`'{group}'` or `{ ref, namespace }`)
+ *  - a CSS-literal keyword constrained by `cssProperty`
+ *  - a bare `number` (shorthand for `{ alias: n, value: String(n) }`) —
+ *    valid where CSS itself accepts numbers (e.g. `line-clamp: 3`)
+ *  - a `{ alias, value }` mapping for shorthand-to-CSS rewrites
+ *
+ * Bare `boolean` is *not* a valid CSS value, so booleans must use the
+ * `{ alias: true, value: '...' }` form (e.g. `border={true}` →
+ * `border-width: 1px`).
+ *
+ * Group refs are narrowed by `P` so suggestions show only groups whose
+ * value type fits the property.
+ */
+type ValuesEntry<P extends CssPropertyName | `--${string}`> = TokenGroupMarker | NamespacedTokenGroup | LiteralFor<P> | number | ValueAlias<P>;
+type StyleSpecBase<P extends CssPropertyName | `--${string}`> = {
+  values?: readonly ValuesEntry<P>[];
+  arbitrary?: ArbitrarySpec;
+  /**
+   * The CSS property (or properties) this style prop writes. Single
+   * string is the common case; arrays fan out to "side shorthand"
+   * props (e.g. `borderRadiusStart` covering both
+   * `border-start-start-radius` and `border-end-start-radius`). The
+   * output `StyleProp.cssProperty` exposes the original input;
+   * normalize at the call site (`Array.isArray(p) ? p : [p]`) when
+   * iterating.
+   *
+   * Arrays are restricted to standard CSS properties — `--*` custom
+   * properties must use the single-string form so `cssType` can pair
+   * with them unambiguously.
+   */
+  cssProperty: P | readonly P[];
+  classPrefix: string;
+  /**
+   * Optional CSS-value computer. Applied to bare-literal entries in
+   * `values` (numbers and plain string keywords) when the resolver
+   * builds the alias→CSS map. The author-facing alias stays as
+   * authored; the transform's return becomes the emitted CSS.
+   *
+   * Skipped for token-group refs (`'{group}'`, `{ ref, namespace }`)
+   * and `{ alias, value }` entries — those already carry their own
+   * value mapping.
+   *
+   * Pattern: a style prop with a regular shape that's tedious to spell
+   * out as `{ alias, value }` rows can list the bare aliases inline
+   * and let the transform produce the CSS:
+   *
+   *     defineStyleProp({
+   *       cssProperty: 'grid-template-columns',
+   *       classPrefix: 'grid-cols',
+   *       values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'none', 'subgrid'],
+   *       transform: (v) =>
+   *         typeof v === 'number' ? `repeat(${v}, minmax(0, 1fr))` : v,
+   *       arbitrary: 'string',
+   *     });
+   */
+  transform?: (value: string | number) => string;
+};
+/**
+ * Conditional spec shape:
+ *  - For custom CSS properties (`--*`), `cssType` is REQUIRED.
+ *  - For known CSS properties, `cssType` is FORBIDDEN.
+ *  - Fan-out arrays (`cssProperty: [...]`) are restricted to standard
+ *    properties and never carry `cssType`.
+ */
+type StyleSpec<P extends CssPropertyName | `--${string}`> = [P] extends [`--${string}`] ? StyleSpecBase<P> & {
+  cssType: CssValueTypeName;
+  cssProperty: P;
+} : StyleSpecBase<P> & {
+  cssType?: never;
+};
 type StylePropMetadata = {
   label?: string;
   description?: string;
@@ -47,6 +177,24 @@ type StylePropMetadata = {
  * (`Array.isArray(p) ? p : [p]`); readers that only need the primary
  * use the string directly or `Array.isArray(p) ? p[0] : p`.
  */
+type StyleProp<P extends CssPropertyName | `--${string}` = CssPropertyName | `--${string}`> = {
+  readonly kind: 'styleProp';
+  readonly cssProperty: P | readonly P[];
+  readonly classPrefix: string;
+  readonly values: readonly ValuesEntry<P>[];
+  readonly arbitrary?: ArbitrarySpec;
+  readonly cssType?: CssValueTypeName;
+  readonly metadata: StylePropMetadata;
+  readonly transform?: (value: string | number) => string;
+  /**
+   * Set by `.withOpacity({...})` on color-typed props — names the
+   * paired opacity sibling so the resolver registers a second
+   * `ResolvedStyleProp` alongside the parent. Consumers (codegen,
+   * runtime, loader) read `pairedWith` on the resolved sibling to know
+   * which color prop it composes with.
+   */
+  readonly opacityPair?: OpacityPairSpec;
+};
 /**
  * Internal shape attached to a {@link StyleProp} by `.withOpacity()`.
  * The resolver inspects this at `resolveConfig` time to synthesize a
@@ -55,8 +203,8 @@ type StylePropMetadata = {
 interface OpacityPairSpec {
   /** JSX-prop name for the opacity sibling, e.g. `'bgOpacity'`. */
   readonly as: string;
-  /** Token-group refs the opacity sibling accepts as values. */
-  readonly values: readonly unknown[];
+  /** Token group the opacity sibling pulls its values from. */
+  readonly values: TokenGroupMarker;
   /**
    * Separator between the parent's value-token suffix and the opacity
    * value in the emitted class name (`bg-primary_75` vs.
@@ -79,6 +227,7 @@ interface AnyStyleProp {
   readonly cssType?: CssValueTypeName;
   readonly metadata: StylePropMetadata;
   readonly opacityPair?: OpacityPairSpec;
+  readonly transform?: (value: string | number) => string;
 }
 /**
  * Return shape of {@link defineStyleProp}. The `metadata` field doubles as
@@ -89,5 +238,52 @@ interface AnyStyleProp {
  * {@link StylePropMetadata} structural shape because both fields are
  * optional, so the dual nature is type-safe.
  */
+type StylePropWithBuilder<P extends CssPropertyName | `--${string}`> = Omit<StyleProp<P>, 'metadata'> & {
+  readonly metadata: StylePropMetadata & ((meta?: StylePropMetadata) => StyleProp<P>);
+} & (P extends ColorCssProperty | `--${string}` ? WithOpacityBuilder<P> : Record<never, never>);
+/**
+ * Conditional method exposed on `defineStyleProp(...)` results when the
+ * authored `cssProperty` is a standard CSS color property (see
+ * {@link ColorCssProperty}) or a custom property (`--*`). Calling it
+ * names a paired opacity sibling that's auto-registered alongside the
+ * parent at `resolveConfig` time.
+ *
+ * ```ts
+ * const bg = defineStyleProp({ cssProperty: 'background-color', ... })
+ *   .withOpacity({ as: 'bgOpacity', values: [{ ref: 'opacity' }] });
+ * // registerStyleProps({ bg }) now registers BOTH `bg` and `bgOpacity`.
+ * ```
+ *
+ * The method is absent from the type when `cssProperty` is anything
+ * else — `defineStyleProp({ cssProperty: 'width' }).withOpacity(...)`
+ * is a compile-time error.
+ */
+interface WithOpacityBuilder<P extends CssPropertyName | `--${string}`> {
+  withOpacity(spec: {
+    /** JSX-prop name for the opacity sibling, e.g. `'bgOpacity'`. */as: string; /** Token group the opacity sibling pulls its values from. */
+    values: TokenGroupMarker;
+    /**
+     * Class-name separator between the parent's token suffix and the
+     * opacity value (`bg-primary_75` vs. `bg-primary/75`). Defaults to
+     * `'_'` — no CSS-selector escape required. Pass `'/'` for the
+     * Tailwind-flavored output.
+     */
+    separator?: string;
+  }): StylePropWithBuilder<P>;
+}
+/**
+ * Author a style prop. Returns a {@link StyleProp} directly so callers can
+ * skip the `.metadata({...})` chain when there's nothing to attach:
+ *
+ * ```ts
+ * defineStyleProp({ cssProperty: 'flex-direction', classPrefix: 'flex', values: ['row', 'col'] })
+ * ```
+ *
+ * The returned object still supports `.metadata({...})` for the common
+ * case where you want to attach a label/description — the chain returns a
+ * plain {@link StyleProp} with the metadata baked in. Pure — no global
+ * registration.
+ */
+declare function defineStyleProp<const P extends CssPropertyName | `--${string}`>(spec: StyleSpec<P>): StylePropWithBuilder<P>; //#endregion
 //#endregion
-export { AnyStyleProp, ArbitraryEntry, ArbitrarySpec, StylePropMetadata };
+export { AnyStyleProp, ArbitraryEntry, ArbitrarySpec, NamespacedTokenGroup, RegisteredTokenGroupMeta, RegisteredTokenGroups, StyleProp, StylePropMetadata, StylePropWithBuilder, StyleSpec, ValuesEntry, defineStyleProp };

package/dist/config/dist/defineStyleProp.js

@@ -14,7 +14,7 @@ const CUSTOM_PROPERTY_PREFIX = "--";
 * registration.
 */
 function defineStyleProp(spec) {
-	const { cssProperty: cssPropertyInput, classPrefix, values, arbitrary, cssType } = spec;
+	const { cssProperty: cssPropertyInput, classPrefix, values, arbitrary, cssType, transform } = spec;
 	let cssProperty;
 	if (Array.isArray(cssPropertyInput)) {
 		const deduped = Array.from(new Set(cssPropertyInput));
@@ -33,7 +33,8 @@ function defineStyleProp(spec) {
 		classPrefix,
 		values: values ?? [],
 		arbitrary,
-		cssType
+		cssType,
+		transform
 	};
 	const buildChainable = (fields) => {
 		const metadata = (meta = {}) => ({

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

@@ -1,13 +1,22 @@
-import { ComponentRef, CompositeRef, RegisteredComponents, RegisteredComposites, RegisteredStyleProps, StylePropRef } from "./component-refs.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 { ComponentRef, CompositeRef, MotionRef, RegisteredComponents, RegisteredComposites, RegisteredModifiers, RegisteredMotion, RegisteredStyleProps, StylePropRef } from "./component-refs.js";
+import { CssMotionPreset, CustomMotionPreset, InterpolateMarker, JsMotionPreset, MotionInlineConfig, MotionKeyframe, MotionPreset, MotionPresetName, MotionStateKeyframe, MotionTransition, SlotMotionAnimate, SlotMotionConfig } from "./defineMotionConfig.js";
+import { BoolMarker, ComponentConfigInput, ComponentConfigValue, ComponentMotionValue, ComponentSlotStyles, CompositeBinding, CompositeMarker, CompoundPropsEntry, EnumMarker, HiddenMarker, HtmlTag, LayerBundle, LayerInput, LayerOverride, PrimitiveLayer, PrimitivePropBinding, PropBinding, RenderArgs, RootTag, SingleLayerCompositeBinding, SlotMarker, SlotMotion, SplitSlotPath, StringMarker, StylePropBinding, StylePropMarker, StylePropShorthand, TokenGroupMarker, TokenMarker, VerbosePropBinding, WhenClause, bool, composite, enums, hidden, slot, string, styleProp, token, tokenGroup } from "./component-config.js";
+import { Props, PropsOf } from "./Props.js";
+import { CreateComponentRenderArgs } from "./bindRender.js";
+import { buildStylePropClassName } from "./className.js";
+import { DefinedPreview, PreviewMetadata, definePreview } from "./definePreview.js";
+import { CompositeStyleDef, CompositeStyleInput, CompositeStyleObject, CompositeStylesConfig, DefinedCompositeStyle, defineCompositeStyle } from "./defineCompositeStyle.js";
+import { BoundComponent, DefineHelpers, DefinedComponent, PrimitiveComponentInput, defineComponent } from "./defineComponent.js";
+import { ColorFn, ColorKeyword, CssAngle, CssColor, CssLength, CssPercentage, CssRatio, CssTime, CssValue, CssValueTypeName, CssVarRef, HexColor, HslColor, RgbColor } from "./types/css-values.js";
+import { CssGlobalKeyword, CssPropertyName, CssPropertyValues } from "./types/css-properties.js";
+import { AnyStyleProp, ArbitraryEntry, ArbitrarySpec, NamespacedTokenGroup, RegisteredTokenGroupMeta, RegisteredTokenGroups, StyleProp, StylePropMetadata, StylePropWithBuilder, StyleSpec, ValuesEntry, defineStyleProp } from "./defineStyleProp.js";
+import { PROPERTY_ACCEPTED_TYPES, PropertyAccept, isTokenAcceptedByProperty } from "./propertyAcceptedTypes.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 { defaultColors } from "./consts/defaultColors.js";
+import { AtomicToken, BuildOptions, CheckForReservedModifiersInput, ComponentConfigMergeStrategy, ExampleDef, ExampleEntryDef, ExampleLayoutStyles, GetModifierFromInput, GlobalStylesDef, ModeGroup, ModeOption, ModeOptionInput, ModeSetInput, ModesInput, ModifierDef, MotionPresetsDef, PresetMergeMode, UdsConfig, UdsConfigData, buildCompositeStylesReference, buildTokenReference, convertModesInputToGroups, createConfigBuilder, darker, interpolate, lighter, rem, resolveConfig, uds } from "./createConfig.js";
+import { DetectTokenValueTypeGroup, DetectTokenValueTypeInput, ResolvedStyleProp, ResolvedToken, detectTokenValueType, getColorOpacityMap, resolveStyleProp } from "./resolveStyleProp.js";
+import { Styler, createStyler } from "./createStyler.js";
+import { TokenWithModifier, darken, isTokenWithModifier, lighten, resolveTokenValue, resolveTokenWithModifier } from "./refs.js";
+import { ResolvedCompoundOverrides, ResolvedLayerOverride, applyCompoundProps, isLayerHidden, resolveCompoundProps } from "./resolveCompoundProps.js";
 import { SerializedConfig, TokenRef, buildReverseMap, deserializeConfig, serializeConfig } from "./serialize.js";
-import { ComponentsConfig as ComponentsConfig$1 } from "@uds/types";
-export { type ComponentsConfig$1 as ComponentsConfig };
+import { sniffTokenTypeFromValue } from "./sniffTokenType.js";
+import { BUILT_IN_PSEUDO, DynamicRule, ProcessStylePropsOpts, ProcessStylePropsResult, ResolvedModifier, StylePropEntry, StylePropRuntimeData, buildStylePropRuntime, processStyleProps } from "./style-prop-runtime.js";

package/dist/config/dist/index.js

@@ -1,11 +1,15 @@
-import "./component-resolution.js";
-import "./consts/defaultColors.js";
+import "./className.js";
+import "./component-config.js";
 import "./propertyAcceptedTypes.js";
 import "./refs.js";
-import "./resolveTokenTypes.js";
+import "./sniffTokenType.js";
 import "./resolveStyleProp.js";
 import "./createConfig.js";
+import "./createStyler.js";
 import "./defineComponent.js";
+import "./defineCompositeStyle.js";
+import "./definePreview.js";
 import "./defineStyleProp.js";
-import "./propertyGroups.js";
+import "./resolveCompoundProps.js";
 import "./serialize.js";
+import "./style-prop-runtime.js";

package/dist/config/dist/merge-utils.js

@@ -0,0 +1,51 @@
+//#region ../config/dist/merge-utils.js
+function flattenAtomic(atomic) {
+	const entries = [];
+	for (const group of atomic) for (const property of group.properties) for (const token of group.tokens) entries.push({
+		property,
+		cssPrefix: group.cssPrefix,
+		namespace: group.namespace,
+		groupType: group.type,
+		groupDescription: group.description,
+		token
+	});
+	return entries;
+}
+function tokenKey(entry) {
+	return `${entry.property}|${entry.cssPrefix ?? ""}|${entry.token.name}`;
+}
+function mergeAtomic(base, incoming, mode) {
+	if (incoming.length === 0) return base;
+	if (base.length === 0) return incoming;
+	const baseEntries = flattenAtomic(base);
+	const incomingEntries = flattenAtomic(incoming);
+	const merged = /* @__PURE__ */ new Map();
+	for (const entry of baseEntries) merged.set(tokenKey(entry), entry);
+	for (const entry of incomingEntries) {
+		const key = tokenKey(entry);
+		if (mode === "preserve" && merged.has(key)) continue;
+		merged.set(key, entry);
+	}
+	const regrouped = /* @__PURE__ */ new Map();
+	for (const entry of merged.values()) {
+		const groupKey = `${entry.property}|${entry.cssPrefix ?? ""}`;
+		const existing = regrouped.get(groupKey);
+		if (existing) {
+			existing.tokens.push(entry.token);
+			if (entry.groupType) existing.type = entry.groupType;
+			if (entry.groupDescription) existing.description = entry.groupDescription;
+			continue;
+		}
+		regrouped.set(groupKey, {
+			properties: [entry.property],
+			...entry.namespace ? { namespace: entry.namespace } : {},
+			...entry.cssPrefix ? { cssPrefix: entry.cssPrefix } : {},
+			...entry.groupType ? { type: entry.groupType } : {},
+			...entry.groupDescription ? { description: entry.groupDescription } : {},
+			tokens: [entry.token]
+		});
+	}
+	return Array.from(regrouped.values());
+}
+//#endregion
+export { mergeAtomic };

package/dist/config/dist/propertyAcceptedTypes.d.ts

@@ -0,0 +1,19 @@
+import { CssValueTypeName } from "./types/css-values.js";
+
+//#region ../config/dist/propertyAcceptedTypes.d.ts
+//#region src/propertyAcceptedTypes.d.ts
+interface PropertyAccept {
+  /** CSS value types accepted by the property (e.g. `'length-percentage'`). */
+  readonly types?: readonly CssValueTypeName[];
+  /** Literal keyword values accepted by the property (e.g. `'auto'`). */
+  readonly literals?: readonly string[];
+}
+declare const PROPERTY_ACCEPTED_TYPES: ReadonlyMap<string, PropertyAccept>;
+/**
+ * Whether a token with the given detected value type AND raw string value
+ * is accepted by the CSS property. Returns `true` for any property not in
+ * the table.
+ */
+declare function isTokenAcceptedByProperty(cssProperty: string, valueType: CssValueTypeName | undefined, rawValue: string): boolean; //#endregion
+//#endregion
+export { PROPERTY_ACCEPTED_TYPES, PropertyAccept, isTokenAcceptedByProperty };