@yahoo/uds-create-config 1.29.1 → 2.0.0

package/dist/types.d.ts

@@ -327,35 +327,104 @@ interface MotionTransition {
 interface MotionStateKeyframe {
   [key: string]: unknown;
 }
-interface CssMotionDefinition {
-  runtime: 'css';
-  keyframes: MotionKeyframes;
+/**
+ * A time-ish CSS motion value: a raw string (`'300ms'`), a number (seconds), or
+ * a `token('...')` ref resolved to a `var(...)` at build time — so durations and
+ * easings stay token-aware like every other config value, not raw literals.
+ */
+type MotionCssValue = string | number | TokenRef;
+/** Per-side box a framer drag prop accepts (`dragConstraints`/`dragElastic`). */
+type MotionDragBox = Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>;
+/**
+ * Named animation targets a JS motion can animate between, keyed by variant
+ * name (framer's `Variants`). `initial`/`animate`/`while*` may reference a
+ * variant by name (a `string`) instead of an inline keyframe.
+ */
+type MotionVariants = Record<string, MotionStateKeyframe>;
+/** A JS-motion state: inline keyframes or the name of a declared variant. */
+type MotionState = MotionStateKeyframe | string;
+/** `whileInView` viewport options (framer's `ViewportOptions`). */
+interface MotionViewportOptions {
+  once?: boolean;
+  margin?: string;
+  amount?: number | 'some' | 'all';
+}
+/**
+ * The CSS timing/playback surface shared by a registered CSS motion
+ * ({@link CssMotionDefinition}) and an inline CSS slot motion
+ * ({@link CssSlotMotion}). No `keyframes` here — a definition requires them
+ * while a slot motion doesn't, so each declares its own.
+ */
+interface CssMotionFields {
   transition?: MotionTransition;
   /**
-   * Open index signature for `animation-*` CSS shorthand fields the
-   * old `@yahoo/uds-create-config` placed directly on the motion def
-   * (`animationDuration`, `animationTimingFunction`, etc.). Codegen
-   * reads them off the toJSON'd shape and folds them into the emitted
-   * `animation: ...` declaration alongside the keyframes/transition.
+   * Timing / playback knobs folded into the emitted `animation: …` declaration
+   * alongside the keyframes. No `animation` prefix — it's redundant inside a
+   * motion def, and these are motion-def config, not registered style props.
+   * Explicitly typed (not an open index signature) so they autocomplete, reject
+   * typos, and accept `token(...)` refs where a value can be tokenized
+   * (duration / timing-function / delay).
    */
-  [key: string]: unknown;
+  duration?: MotionCssValue;
+  timingFunction?: string | TokenRef;
+  delay?: MotionCssValue;
+  iterationCount?: number | 'infinite';
+  direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
+  fillMode?: 'none' | 'forwards' | 'backwards' | 'both';
+  playState?: 'running' | 'paused';
+  /** `'none'` disables the animation under `prefers-reduced-motion: reduce`. */
+  reducedMotion?: 'none';
 }
-interface JsMotionDefinition {
-  runtime: 'js';
-  initial?: MotionStateKeyframe;
-  animate?: MotionStateKeyframe;
+interface CssMotionDefinition extends CssMotionFields {
+  runtime: 'css';
+  keyframes: MotionKeyframes;
+}
+/**
+ * The framer-motion `motion`-prop surface shared by a registered JS motion
+ * ({@link JsMotionDefinition}) and an inline JS slot motion
+ * ({@link JsSlotMotion}) — a preset and an inline motion accept the same
+ * fields; they differ only in whether `runtime` is required. Typed to the
+ * config-serializable subset of framer's API: no element `ref` constraints or
+ * event callbacks, which can't round-trip through JSON.
+ */
+interface JsMotionFields {
+  /** Named targets `initial`/`animate`/`while*` may reference by name. */
+  variants?: MotionVariants;
+  initial?: MotionState | boolean;
+  animate?: MotionState;
   /**
    * Exit keyframes — applied when the host element unmounts. Requires
    * the consumer to render the slot conditionally so the JS runtime
    * (`motion/react`'s `<AnimatePresence>`) can play the exit before the
    * node detaches.
    */
-  exit?: MotionStateKeyframe;
+  exit?: MotionState;
   transition?: MotionTransition;
   /** Keyframes applied while the element is hovered. */
-  whileHover?: MotionStateKeyframe;
+  whileHover?: MotionState;
   /** Keyframes applied while the element is actively pressed. */
-  whileTap?: MotionStateKeyframe;
+  whileTap?: MotionState;
+  /** Keyframes applied while the element holds keyboard focus. */
+  whileFocus?: MotionState;
+  /** Keyframes applied while the element is being dragged. */
+  whileDrag?: MotionState;
+  /** Keyframes applied while the element is in the viewport. */
+  whileInView?: MotionState;
+  viewport?: MotionViewportOptions;
+  drag?: boolean | 'x' | 'y';
+  dragConstraints?: boolean | MotionDragBox;
+  dragElastic?: boolean | number | MotionDragBox;
+  dragMomentum?: boolean;
+  dragSnapToOrigin?: boolean;
+  dragPropagation?: boolean;
+  dragDirectionLock?: boolean;
+  dragTransition?: MotionTransition;
+  layout?: boolean | 'position' | 'size';
+  layoutId?: string;
+  layoutDependency?: string | number;
+}
+interface JsMotionDefinition extends JsMotionFields {
+  runtime: 'js';
 }
 type MotionDefinitionInput = CssMotionDefinition | JsMotionDefinition;
 /**
@@ -400,24 +469,32 @@ interface CompoundPropsEntry {
   layers: Record<string, unknown>;
 }
 /**
- * Per-layer framer-motion spec a component carries inline. Mirrors
- * main's `SlotMotion`: every field is `unknown` because the framer-
- * motion API surface is wide and we don't want to lock authoring to
- * a particular `motion/react` version. Codegen passes the value
- * through to the runtime renderer.
+ * JS-runtime inline slot motion — a `motion/react` config the component
+ * carries inline and codegen spreads onto the hoisted `motion.create`
+ * wrapper. Shares {@link JsMotionFields} with a `registerMotion({ runtime:
+ * 'js' })` preset (identical field set); the only difference is that
+ * `runtime` is optional here (absent ⇒ JS).
  */
-interface SlotMotion {
-  readonly runtime?: 'js' | 'css';
-  readonly initial?: unknown;
-  readonly animate?: unknown;
-  readonly exit?: unknown;
-  readonly transition?: unknown;
-  readonly whileHover?: unknown;
-  readonly whileTap?: unknown;
-  readonly drag?: unknown;
-  readonly dragConstraints?: unknown;
-  readonly dragElastic?: unknown;
+interface JsSlotMotion extends JsMotionFields {
+  readonly runtime?: 'js';
 }
+/**
+ * CSS-runtime inline slot motion — mirrors the timing/playback knobs of a
+ * `registerMotion({ runtime: 'css' })` definition via the shared
+ * {@link CssMotionFields}, so an inline CSS motion emits an `animation: …`
+ * declaration from its own keyframes instead of pulling in `motion/react`.
+ */
+interface CssSlotMotion extends CssMotionFields {
+  readonly runtime: 'css';
+  readonly keyframes?: MotionKeyframes;
+}
+/**
+ * Per-layer motion spec a component carries inline, discriminated on
+ * `runtime`. Absent/`'js'` → {@link JsSlotMotion} (framer-motion config);
+ * `'css'` → {@link CssSlotMotion} (emitted `animation` declaration). Codegen
+ * branches on `runtime` and passes the value through to the runtime renderer.
+ */
+type SlotMotion = JsSlotMotion | CssSlotMotion;
 /**
  * Component-level motion field. Three shapes:
  *  - `string` — alias of a `registerMotion({...})` preset.
@@ -884,4 +961,4 @@ interface SerializedConfig {
   playgroundOptions?: SerializedPlaygroundOptions;
 }
 //#endregion
-export { AnyStylePropDefinition, ArbitraryEntry, ArbitrarySpec, BaseStyles, BuildOptions, CanvasRole, CanvasRoleEntry, CanvasRoleEntryInput, CanvasRolesDefinition, CanvasRolesDefinitionInput, CanvasRolesInputConstraint, ComponentDefinition, ComponentGroupDefinition, ComponentMetadata, ComponentMotionValue, CompositeStyleDefinition, CompositeStyleObject, CompoundPropsEntry, CssMotionDefinition, FontAssetMember, GlobalStylesDef, JsMotionDefinition, LayerInput, LiteralFor, ModeDefinition, ModeOptionDefinition, ModifierDefinition, MotionDefinitionInput, MotionKeyframes, MotionStateKeyframe, MotionTransition, OpacityPairSpec, PlaygroundOptions, PlaygroundPage, PlaygroundSpec, PreviewDefinition, PropBinding, RefElement, RefTag, RootTag, SerializedAssetGroup, SerializedComponent, SerializedComponentGroup, SerializedConfig, SerializedFontAssetGroup, SerializedIconAssetGroup, SerializedPlaygroundOptions, SerializedTokenGroup, SlotMotion, StylePropDefinition, StylePropMetadata, StylePropProperty, TokenDefinition, TokenGroupDefinition, TokenModifierKey, TokenModifierValue, TokenType, TokenValue, ValuesEntry };
+export { AnyStylePropDefinition, ArbitraryEntry, ArbitrarySpec, BaseStyles, BuildOptions, CanvasRole, CanvasRoleEntry, CanvasRoleEntryInput, CanvasRolesDefinition, CanvasRolesDefinitionInput, CanvasRolesInputConstraint, ComponentDefinition, ComponentGroupDefinition, ComponentMetadata, ComponentMotionValue, CompositeStyleDefinition, CompositeStyleObject, CompoundPropsEntry, CssMotionDefinition, CssMotionFields, CssSlotMotion, FontAssetMember, GlobalStylesDef, JsMotionDefinition, JsMotionFields, JsSlotMotion, LayerInput, LiteralFor, ModeDefinition, ModeOptionDefinition, ModifierDefinition, MotionDefinitionInput, MotionDragBox, MotionKeyframes, MotionState, MotionStateKeyframe, MotionTransition, MotionVariants, MotionViewportOptions, OpacityPairSpec, PlaygroundOptions, PlaygroundPage, PlaygroundSpec, PreviewDefinition, PropBinding, RefElement, RefTag, RootTag, SerializedAssetGroup, SerializedComponent, SerializedComponentGroup, SerializedConfig, SerializedFontAssetGroup, SerializedIconAssetGroup, SerializedPlaygroundOptions, SerializedTokenGroup, SlotMotion, StylePropDefinition, StylePropMetadata, StylePropProperty, TokenDefinition, TokenGroupDefinition, TokenModifierKey, TokenModifierValue, TokenType, TokenValue, ValuesEntry };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yahoo/uds-create-config",
-  "version": "1.29.1",
+  "version": "2.0.0",
   "type": "module",
   "private": false,
   "files": [
@@ -68,7 +68,7 @@
   "dependencies": {
     "@babel/parser": "^7.29.0",
     "motion": "^12.35.0",
-    "@yahoo/uds-create-utils": "1.29.1"
+    "@yahoo/uds-create-utils": "2.0.0"
   },
   "devDependencies": {
     "@babel/types": "^7.29.0",