@yahoo/uds-v5-wip 1.54.0 → 1.56.0

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

@@ -13,8 +13,20 @@ type EmptyMotion = {};
 type EmptyCompositeStyles = {};
 /**
  * Transform composite-styles config type into the reference shape passed to
- * defineModifiers. Walks `T[K]['styles'][V]` so the modifier callback can
+ * `defineModifiers`. Walks `T[K]['styles'][V]` so the modifier callback can
  * write `compositeStyles.elevation['1'].className` (flat for ergonomics).
+ *
+ * Kept for the legacy callback API. New code should prefer the brace-ref
+ * form for selector authoring:
+ *
+ *   ```ts
+ *   .defineModifiers([
+ *     { modifier: '_onElevated', selector: '{composite/elevation/1}' },
+ *   ])
+ *   ```
+ *
+ * The `{composite/<group>/<value>}` ref expands to a container style query
+ * at `defineModifiers` time. See [[UDS-1644]].
  */
 type CompositeStylesReference<T> = { [K in keyof T]: T[K] extends {
   styles: infer S;

package/dist/config/dist/createConfig.js

@@ -75,6 +75,26 @@ function buildCompositeStylesReference(compositeStyles) {
 	return result;
 }
 /**
+* Resolve `{composite/<group>/<value>}` brace-refs in a modifier `selector`
+* string. Each ref expands to a CSS container style query targeting the
+* composite's custom-property marker:
+*
+*   `{composite/elevation/1}`
+*   →  `@container style(--uds-composite-elevation: 1)`
+*
+* Multiple refs in the same string are supported. Unknown refs (composite
+* group not in config, or value not in that group's styles) pass through
+* unchanged so the caller can spot the typo at use time. See [[UDS-1644]].
+*/
+const COMPOSITE_REF_PATTERN = /\{composite\/([^/{}]+)\/([^/{}]+)\}/g;
+function resolveCompositeRefsInSelector(selector, compositeStyles) {
+	return selector.replace(COMPOSITE_REF_PATTERN, (raw, groupName, valueName) => {
+		const def = compositeStyles[groupName];
+		if (!def || !def.styles[valueName]) return raw;
+		return `@container style(--uds-composite-${safeTokenName(groupName)}: ${safeTokenName(valueName)})`;
+	});
+}
+/**
 * Migrate legacy `macros` JSON (the pre-rename shape) into the new
 * `compositeStyles` shape. Each old key (`elevation`) becomes a `{ label,
 * styles }` def so older serialized configs (in `uds.config.json`,
@@ -370,13 +390,16 @@ function createConfigBuilder(data, extensions) {
 			}, extensions);
 		},
 		defineModifiers(params) {
-			const resolved = typeof params === "function" ? params({
+			const resolvedWithComposites = (typeof params === "function" ? params({
 				tokens: buildTokenReference(data.atomic, data.prefix),
 				compositeStyles: buildCompositeStylesReference(data.compositeStyles)
-			}) : params;
+			}) : params).map((def) => ({
+				...def,
+				selector: resolveCompositeRefsInSelector(def.selector, data.compositeStyles)
+			}));
 			return createConfigBuilder({
 				...data,
-				modifiers: [...data.modifiers, ...resolved]
+				modifiers: [...data.modifiers, ...resolvedWithComposites]
 			}, extensions);
 		},
 		defineCompositeStyles(params) {

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

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

package/dist/presets/dist/defaultPreset.d.ts

@@ -1,5 +1,6 @@
 import { defaultFoundationPreset } from "../../foundational-presets/dist/defaultPreset.js";
 //#region ../presets/dist/defaultPreset.d.ts
-declare const defaultPreset: typeof defaultFoundationPreset;
+//#region src/defaultPreset.d.ts
+declare const defaultPreset: typeof defaultFoundationPreset; //#endregion
 //#endregion
 export { defaultPreset };

package/dist/remotion/dist/components/image-slide.d.ts

@@ -2,6 +2,7 @@ import * as _$react from "react";
 import * as _$_uds_types0 from "@uds/types";
 
 //#region ../remotion/dist/components/image-slide.d.ts
+//#region src/components/image-slide.d.ts
 /**
  * @description Full-screen image slide with optional caption overlay
  */
@@ -14,6 +15,6 @@ declare const ImageSlide: _$react.FC<_$_uds_types0.CreateComponentProps<string,
   root: "div";
   image: "img";
   caption: "div";
-}>>;
+}>>; //#endregion
 //#endregion
 export { ImageSlide };

package/dist/remotion/dist/components/image-slide.js

@@ -5,15 +5,15 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /**
 * @description Full-screen image slide with optional caption overlay
 */
-const ImageSlide = createComponent(({ props, src, alt, caption, children }) => jsxs("div", {
+const ImageSlide = createComponent(({ props, src, alt, caption, children }) => /* @__PURE__ */ jsxs("div", {
 	...props.root,
 	children: [
-		jsx("img", {
+		/* @__PURE__ */ jsx("img", {
 			...props.image,
 			src,
 			alt: alt ?? ""
 		}),
-		caption && jsx("div", {
+		caption && /* @__PURE__ */ jsx("div", {
 			...props.caption,
 			children: caption
 		}),

package/dist/remotion/dist/components/index.js

@@ -1,16 +1,16 @@
 import "./image-slide.js";
-import "./image-slide.config.js";
 import "./lower-third.js";
-import "./lower-third.config.js";
 import "./quote-card.js";
-import "./quote-card.config.js";
 import "./split-screen.js";
-import "./split-screen.config.js";
 import "./stat-card.js";
-import "./stat-card.config.js";
 import "./text-overlay.js";
-import "./text-overlay.config.js";
 import "./title-card.js";
-import "./title-card.config.js";
 import "./typing-text.js";
+import "./image-slide.config.js";
+import "./lower-third.config.js";
+import "./quote-card.config.js";
+import "./split-screen.config.js";
+import "./stat-card.config.js";
+import "./text-overlay.config.js";
+import "./title-card.config.js";
 import "./typing-text.config.js";

package/dist/remotion/dist/components/lower-third.d.ts

@@ -2,6 +2,7 @@ import * as _$react from "react";
 import * as _$_uds_types0 from "@uds/types";
 
 //#region ../remotion/dist/components/lower-third.d.ts
+//#region src/components/lower-third.d.ts
 /**
  * @description Lower-third overlay with title and optional subtitle
  */
@@ -15,6 +16,6 @@ declare const LowerThird: _$react.FC<_$_uds_types0.CreateComponentProps<string,
   content: "div";
   title: "div";
   subtitle: "div";
-}>>;
+}>>; //#endregion
 //#endregion
 export { LowerThird };

package/dist/remotion/dist/components/lower-third.js

@@ -5,16 +5,16 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /**
 * @description Lower-third overlay with title and optional subtitle
 */
-const LowerThird = createComponent(({ props, title, subtitle, children }) => jsxs("div", {
+const LowerThird = createComponent(({ props, title, subtitle, children }) => /* @__PURE__ */ jsxs("div", {
 	...props.root,
 	children: [
-		jsx("div", { ...props.bar }),
-		jsxs("div", {
+		/* @__PURE__ */ jsx("div", { ...props.bar }),
+		/* @__PURE__ */ jsxs("div", {
 			...props.content,
-			children: [jsx("div", {
+			children: [/* @__PURE__ */ jsx("div", {
 				...props.title,
 				children: title
-			}), subtitle && jsx("div", {
+			}), subtitle && /* @__PURE__ */ jsx("div", {
 				...props.subtitle,
 				children: subtitle
 			})]

package/dist/remotion/dist/components/quote-card.d.ts

@@ -2,6 +2,7 @@ import * as _$react from "react";
 import * as _$_uds_types0 from "@uds/types";
 
 //#region ../remotion/dist/components/quote-card.d.ts
+//#region src/components/quote-card.d.ts
 /**
  * @description Full-screen quote display with optional attribution
  */
@@ -15,6 +16,6 @@ declare const QuoteCard: _$react.FC<_$_uds_types0.CreateComponentProps<string, {
   quote: "div";
   divider: "div";
   attribution: "div";
-}>>;
+}>>; //#endregion
 //#endregion
 export { QuoteCard };

package/dist/remotion/dist/components/quote-card.js

@@ -5,18 +5,18 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 /**
 * @description Full-screen quote display with optional attribution
 */
-const QuoteCard = createComponent(({ props, quote, attribution, children }) => jsxs("div", {
+const QuoteCard = createComponent(({ props, quote, attribution, children }) => /* @__PURE__ */ jsxs("div", {
 	...props.root,
 	children: [
-		jsx("div", {
+		/* @__PURE__ */ jsx("div", {
 			...props.mark,
 			children: "“"
 		}),
-		jsx("div", {
+		/* @__PURE__ */ jsx("div", {
 			...props.quote,
 			children: quote
 		}),
-		attribution && jsxs(Fragment, { children: [jsx("div", { ...props.divider }), jsx("div", {
+		attribution && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { ...props.divider }), /* @__PURE__ */ jsx("div", {
 			...props.attribution,
 			children: attribution
 		})] }),

package/dist/remotion/dist/components/split-screen.d.ts

@@ -2,6 +2,7 @@ import * as _$react from "react";
 import * as _$_uds_types0 from "@uds/types";
 
 //#region ../remotion/dist/components/split-screen.d.ts
+//#region src/components/split-screen.d.ts
 /**
  * @description Side-by-side split screen layout for comparing content
  */
@@ -19,6 +20,6 @@ declare const SplitScreen: _$react.FC<_$_uds_types0.CreateComponentProps<string,
   leftBody: "div";
   rightTitle: "div";
   rightBody: "div";
-}>>;
+}>>; //#endregion
 //#endregion
 export { SplitScreen };

package/dist/remotion/dist/components/split-screen.js

@@ -5,25 +5,25 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /**
 * @description Side-by-side split screen layout for comparing content
 */
-const SplitScreen = createComponent(({ props, leftTitle, leftBody, rightTitle, rightBody, children }) => jsxs("div", {
+const SplitScreen = createComponent(({ props, leftTitle, leftBody, rightTitle, rightBody, children }) => /* @__PURE__ */ jsxs("div", {
 	...props.root,
 	children: [
-		jsxs("div", {
+		/* @__PURE__ */ jsxs("div", {
 			...props.left,
-			children: [leftTitle && jsx("div", {
+			children: [leftTitle && /* @__PURE__ */ jsx("div", {
 				...props.leftTitle,
 				children: leftTitle
-			}), leftBody && jsx("div", {
+			}), leftBody && /* @__PURE__ */ jsx("div", {
 				...props.leftBody,
 				children: leftBody
 			})]
 		}),
-		jsxs("div", {
+		/* @__PURE__ */ jsxs("div", {
 			...props.right,
-			children: [rightTitle && jsx("div", {
+			children: [rightTitle && /* @__PURE__ */ jsx("div", {
 				...props.rightTitle,
 				children: rightTitle
-			}), rightBody && jsx("div", {
+			}), rightBody && /* @__PURE__ */ jsx("div", {
 				...props.rightBody,
 				children: rightBody
 			})]

package/dist/remotion/dist/components/stat-card.d.ts

@@ -2,6 +2,7 @@ import * as _$react from "react";
 import * as _$_uds_types0 from "@uds/types";
 
 //#region ../remotion/dist/components/stat-card.d.ts
+//#region src/components/stat-card.d.ts
 /**
  * @description Full-screen statistic display with large value and label
  */
@@ -13,6 +14,6 @@ declare const StatCard: _$react.FC<_$_uds_types0.CreateComponentProps<string, {
   root: "div";
   value: "div";
   label: "div";
-}>>;
+}>>; //#endregion
 //#endregion
 export { StatCard };

package/dist/remotion/dist/components/stat-card.js

@@ -5,14 +5,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /**
 * @description Full-screen statistic display with large value and label
 */
-const StatCard = createComponent(({ props, value, label, children }) => jsxs("div", {
+const StatCard = createComponent(({ props, value, label, children }) => /* @__PURE__ */ jsxs("div", {
 	...props.root,
 	children: [
-		jsx("div", {
+		/* @__PURE__ */ jsx("div", {
 			...props.value,
 			children: value
 		}),
-		label && jsx("div", {
+		label && /* @__PURE__ */ jsx("div", {
 			...props.label,
 			children: label
 		}),

package/dist/remotion/dist/components/text-overlay.d.ts

@@ -2,6 +2,7 @@ import * as _$react from "react";
 import * as _$_uds_types0 from "@uds/types";
 
 //#region ../remotion/dist/components/text-overlay.d.ts
+//#region src/components/text-overlay.d.ts
 /**
  * @description Full-screen text overlay for displaying text over video or images
  */
@@ -11,6 +12,6 @@ declare const TextOverlay: _$react.FC<_$_uds_types0.CreateComponentProps<string,
 }, {
   root: "div";
   text: "div";
-}>>;
+}>>; //#endregion
 //#endregion
 export { TextOverlay };

package/dist/remotion/dist/components/text-overlay.js

@@ -5,9 +5,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /**
 * @description Full-screen text overlay for displaying text over video or images
 */
-const TextOverlay = createComponent(({ props, text, children }) => jsxs("div", {
+const TextOverlay = createComponent(({ props, text, children }) => /* @__PURE__ */ jsxs("div", {
 	...props.root,
-	children: [jsx("div", {
+	children: [/* @__PURE__ */ jsx("div", {
 		...props.text,
 		children: text
 	}), children]

package/dist/remotion/dist/components/title-card.d.ts

@@ -2,6 +2,7 @@ import * as _$react from "react";
 import * as _$_uds_types0 from "@uds/types";
 
 //#region ../remotion/dist/components/title-card.d.ts
+//#region src/components/title-card.d.ts
 /**
  * @description Full-screen title card with optional subtitle for video scenes
  */
@@ -13,6 +14,6 @@ declare const TitleCard: _$react.FC<_$_uds_types0.CreateComponentProps<string, {
   root: "div";
   title: "div";
   subtitle: "div";
-}>>;
+}>>; //#endregion
 //#endregion
 export { TitleCard };

package/dist/remotion/dist/components/title-card.js

@@ -5,14 +5,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /**
 * @description Full-screen title card with optional subtitle for video scenes
 */
-const TitleCard = createComponent(({ props, title, subtitle, children }) => jsxs("div", {
+const TitleCard = createComponent(({ props, title, subtitle, children }) => /* @__PURE__ */ jsxs("div", {
 	...props.root,
 	children: [
-		jsx("div", {
+		/* @__PURE__ */ jsx("div", {
 			...props.title,
 			children: title
 		}),
-		subtitle && jsx("div", {
+		subtitle && /* @__PURE__ */ jsx("div", {
 			...props.subtitle,
 			children: subtitle
 		}),

package/dist/remotion/dist/components/typing-text.d.ts

@@ -2,6 +2,7 @@ import * as _$react from "react";
 import * as _$_uds_types0 from "@uds/types";
 
 //#region ../remotion/dist/components/typing-text.d.ts
+//#region src/components/typing-text.d.ts
 /**
  * @description Typing text animation that reveals characters frame by frame
  */
@@ -15,6 +16,6 @@ declare const TypingText: _$react.FC<_$_uds_types0.CreateComponentProps<string,
   root: "div";
   text: "div";
   cursor: "div";
-}>>;
+}>>; //#endregion
 //#endregion
 export { TypingText };

package/dist/remotion/dist/components/typing-text.js

@@ -11,11 +11,11 @@ const TypingText = createComponent(({ props, text, speed = 1, delay = 0, frame,
 	const charsToShow = isAnimating ? Math.min(Math.floor(effectiveFrame * speed), text.length) : text.length;
 	const visibleText = text.slice(0, charsToShow);
 	const showCursor = isAnimating && charsToShow < text.length;
-	return jsxs("div", {
+	return /* @__PURE__ */ jsxs("div", {
 		...props.root,
-		children: [jsxs("div", {
+		children: [/* @__PURE__ */ jsxs("div", {
 			...props.text,
-			children: [visibleText, showCursor && jsx("span", { ...props.cursor })]
+			children: [visibleText, showCursor && /* @__PURE__ */ jsx("span", { ...props.cursor })]
 		}), children]
 	});
 });