@yahoo/uds-v5-wip 1.57.0 → 1.59.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yahoo/uds-v5-wip",
-  "version": "1.57.0",
+  "version": "1.59.0",
   "description": "Universal Design System",
   "license": "MIT",
   "type": "module",
@@ -85,12 +85,6 @@
       "types": "./dist/loader.d.ts",
       "default": "./dist/loader.js"
     },
-    "./remotion": {
-      "import": {
-        "types": "./dist/remotion.d.ts",
-        "default": "./dist/remotion.js"
-      }
-    },
     "./package.json": "./package.json",
     "./*.config": {
       "import": {
@@ -119,8 +113,8 @@
     "@babel/traverse": "^7.29.0",
     "@babel/types": "^7.29.0",
     "@modelcontextprotocol/sdk": "^1.27.1",
-    "@uds/cli": "npm:@yahoo/uds-v5-wip-cli@1.57.0",
-    "@uds/types": "npm:@yahoo/uds-v5-wip-types@1.57.0",
+    "@uds/cli": "npm:@yahoo/uds-v5-wip-cli@1.59.0",
+    "@uds/types": "npm:@yahoo/uds-v5-wip-types@1.59.0",
     "clsx": "^2.1.1",
     "react-day-picker": "^9.14.0",
     "unplugin": "^3.0.0",

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

@@ -1,43 +0,0 @@
-import { defaultFoundationPreset } from "../../../foundational-presets/dist/defaultPreset.js";
-import "../../../foundational-presets/dist/index.js";
-import { textVariants } from "../../../components/dist/text.config.js";
-//#region ../remotion/dist/components/image-slide.config.js
-const imageSlideConfig = defaultFoundationPreset.defineRemotionComponent("ImageSlide", ({ tokens }) => ({
-	type: "image",
-	defaultDuration: 150,
-	description: "Full-screen image slide with optional caption overlay",
-	config: {
-		base: {
-			root: {
-				position: "relative",
-				width: "100%",
-				height: "100%",
-				overflow: "hidden",
-				backgroundColor: tokens.bg.primary
-			},
-			image: {
-				width: "100%",
-				height: "100%",
-				objectFit: "cover"
-			},
-			caption: {
-				...textVariants.caption,
-				position: "absolute",
-				bottom: "0",
-				left: "0",
-				right: "0",
-				padding: tokens.spacing["6"],
-				color: tokens.color["on-inverse"],
-				backgroundColor: tokens.bg.inverse
-			}
-		},
-		variants: { fit: {
-			cover: { image: { objectFit: "cover" } },
-			contain: { image: { objectFit: "contain" } },
-			fill: { image: { objectFit: "fill" } }
-		} },
-		defaultVariants: { fit: "cover" }
-	}
-}));
-//#endregion
-export { imageSlideConfig };

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

@@ -1,20 +0,0 @@
-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
- */
-declare const ImageSlide: _$react.FC<_$_uds_types0.CreateComponentProps<string, {
-  src: string;
-  alt?: string;
-  caption?: string;
-  children?: React.ReactNode;
-}, {
-  root: "div";
-  image: "img";
-  caption: "div";
-}>>; //#endregion
-//#endregion
-export { ImageSlide };

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

@@ -1,24 +0,0 @@
-import { createComponent } from "../../../core/dist/createComponent.js";
-import "../../../core/dist/index.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region ../remotion/dist/components/image-slide.js
-/**
-* @description Full-screen image slide with optional caption overlay
-*/
-const ImageSlide = createComponent(({ props, src, alt, caption, children }) => /* @__PURE__ */ jsxs("div", {
-	...props.root,
-	children: [
-		/* @__PURE__ */ jsx("img", {
-			...props.image,
-			src,
-			alt: alt ?? ""
-		}),
-		caption && /* @__PURE__ */ jsx("div", {
-			...props.caption,
-			children: caption
-		}),
-		children
-	]
-}));
-//#endregion
-export { ImageSlide };

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

@@ -1,16 +0,0 @@
-import "./image-slide.js";
-import "./lower-third.js";
-import "./quote-card.js";
-import "./split-screen.js";
-import "./stat-card.js";
-import "./text-overlay.js";
-import "./title-card.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.config.js

@@ -1,54 +0,0 @@
-import { defaultFoundationPreset } from "../../../foundational-presets/dist/defaultPreset.js";
-import "../../../foundational-presets/dist/index.js";
-import { textVariants } from "../../../components/dist/text.config.js";
-//#region ../remotion/dist/components/lower-third.config.js
-const lowerThirdConfig = defaultFoundationPreset.defineRemotionComponent("LowerThird", ({ tokens }) => ({
-	type: "overlay",
-	defaultDuration: 120,
-	description: "Lower-third overlay with title and optional subtitle",
-	config: {
-		base: {
-			root: {
-				position: "absolute",
-				bottom: "0",
-				left: "0",
-				right: "0",
-				display: "flex",
-				flexDirection: "row",
-				alignItems: "stretch",
-				backgroundColor: tokens.bg.inverse
-			},
-			bar: {
-				width: "4px",
-				flexShrink: "0",
-				backgroundColor: tokens.color.brand
-			},
-			content: {
-				display: "flex",
-				flexDirection: "column",
-				gap: tokens.spacing["1"],
-				padding: `${tokens.spacing["4"]} ${tokens.spacing["8"]}`
-			},
-			title: {
-				...textVariants.display3,
-				fontWeight: tokens.fontWeight.bold,
-				color: tokens.color["on-inverse"]
-			},
-			subtitle: {
-				...textVariants.subtitle2,
-				opacity: "0.7",
-				color: tokens.color["on-inverse"]
-			}
-		},
-		variants: { layout: {
-			left: { root: {
-				right: "auto",
-				maxWidth: "60%"
-			} },
-			full: { root: {} }
-		} },
-		defaultVariants: { layout: "full" }
-	}
-}));
-//#endregion
-export { lowerThirdConfig };

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

@@ -1,21 +0,0 @@
-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
- */
-declare const LowerThird: _$react.FC<_$_uds_types0.CreateComponentProps<string, {
-  title: string;
-  subtitle?: string;
-  children?: React.ReactNode;
-}, {
-  root: "div";
-  bar: "div";
-  content: "div";
-  title: "div";
-  subtitle: "div";
-}>>; //#endregion
-//#endregion
-export { LowerThird };

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

@@ -1,26 +0,0 @@
-import { createComponent } from "../../../core/dist/createComponent.js";
-import "../../../core/dist/index.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region ../remotion/dist/components/lower-third.js
-/**
-* @description Lower-third overlay with title and optional subtitle
-*/
-const LowerThird = createComponent(({ props, title, subtitle, children }) => /* @__PURE__ */ jsxs("div", {
-	...props.root,
-	children: [
-		/* @__PURE__ */ jsx("div", { ...props.bar }),
-		/* @__PURE__ */ jsxs("div", {
-			...props.content,
-			children: [/* @__PURE__ */ jsx("div", {
-				...props.title,
-				children: title
-			}), subtitle && /* @__PURE__ */ jsx("div", {
-				...props.subtitle,
-				children: subtitle
-			})]
-		}),
-		children
-	]
-}));
-//#endregion
-export { LowerThird };

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

@@ -1,85 +0,0 @@
-import { defaultFoundationPreset } from "../../../foundational-presets/dist/defaultPreset.js";
-import "../../../foundational-presets/dist/index.js";
-import { textVariants } from "../../../components/dist/text.config.js";
-//#region ../remotion/dist/components/quote-card.config.js
-const quoteCardConfig = defaultFoundationPreset.defineRemotionComponent("QuoteCard", ({ tokens }) => ({
-	type: "scene",
-	defaultDuration: 150,
-	description: "Full-screen quote display with optional attribution",
-	config: {
-		base: {
-			root: {
-				display: "flex",
-				flexDirection: "column",
-				alignItems: "center",
-				justifyContent: "center",
-				height: "100%",
-				width: "100%",
-				padding: tokens.spacing["16"],
-				gap: tokens.spacing["6"],
-				backgroundColor: tokens.bg.primary,
-				color: tokens.color["on-primary"],
-				position: "relative"
-			},
-			mark: {
-				fontSize: "10rem",
-				lineHeight: "1",
-				fontFamily: tokens.fontFamily.serif,
-				opacity: "0.15",
-				position: "absolute",
-				top: tokens.spacing["8"],
-				left: tokens.spacing["12"],
-				userSelect: "none"
-			},
-			quote: {
-				...textVariants.display2,
-				fontFamily: tokens.fontFamily.serif,
-				fontStyle: "italic",
-				textAlign: "center",
-				lineHeight: tokens.lineHeight.relaxed,
-				maxWidth: "52rem",
-				position: "relative",
-				zIndex: "1"
-			},
-			divider: {
-				width: "5rem",
-				height: "3px",
-				backgroundColor: tokens.color["on-primary"],
-				opacity: "0.3",
-				borderRadius: tokens.radius.full
-			},
-			attribution: {
-				...textVariants.subtitle2,
-				opacity: "0.6",
-				textAlign: "center",
-				textTransform: "uppercase",
-				letterSpacing: tokens.letterSpacing.wide
-			}
-		},
-		variants: { variant: {
-			brand: {
-				root: {
-					backgroundColor: tokens.bg.brand,
-					color: tokens.color["on-brand"]
-				},
-				divider: { backgroundColor: tokens.color["on-brand"] }
-			},
-			accent: {
-				root: {
-					backgroundColor: tokens.bg.accent,
-					color: tokens.color["on-accent"]
-				},
-				divider: { backgroundColor: tokens.color["on-accent"] }
-			},
-			inverse: {
-				root: {
-					backgroundColor: tokens.bg.inverse,
-					color: tokens.color["on-inverse"]
-				},
-				divider: { backgroundColor: tokens.color["on-inverse"] }
-			}
-		} }
-	}
-}));
-//#endregion
-export { quoteCardConfig };

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

@@ -1,21 +0,0 @@
-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
- */
-declare const QuoteCard: _$react.FC<_$_uds_types0.CreateComponentProps<string, {
-  quote: string;
-  attribution?: string;
-  children?: React.ReactNode;
-}, {
-  root: "div";
-  mark: "div";
-  quote: "div";
-  divider: "div";
-  attribution: "div";
-}>>; //#endregion
-//#endregion
-export { QuoteCard };

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

@@ -1,27 +0,0 @@
-import { createComponent } from "../../../core/dist/createComponent.js";
-import "../../../core/dist/index.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region ../remotion/dist/components/quote-card.js
-/**
-* @description Full-screen quote display with optional attribution
-*/
-const QuoteCard = createComponent(({ props, quote, attribution, children }) => /* @__PURE__ */ jsxs("div", {
-	...props.root,
-	children: [
-		/* @__PURE__ */ jsx("div", {
-			...props.mark,
-			children: "“"
-		}),
-		/* @__PURE__ */ jsx("div", {
-			...props.quote,
-			children: quote
-		}),
-		attribution && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { ...props.divider }), /* @__PURE__ */ jsx("div", {
-			...props.attribution,
-			children: attribution
-		})] }),
-		children
-	]
-}));
-//#endregion
-export { QuoteCard };

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

@@ -1,90 +0,0 @@
-import { defaultFoundationPreset } from "../../../foundational-presets/dist/defaultPreset.js";
-import "../../../foundational-presets/dist/index.js";
-import { textVariants } from "../../../components/dist/text.config.js";
-//#region ../remotion/dist/components/split-screen.config.js
-const splitScreenConfig = defaultFoundationPreset.defineRemotionComponent("SplitScreen", ({ tokens }) => ({
-	type: "scene",
-	defaultDuration: 120,
-	description: "Side-by-side split screen layout for comparing content",
-	config: {
-		base: {
-			root: {
-				display: "flex",
-				flexDirection: "row",
-				width: "100%",
-				height: "100%"
-			},
-			left: {
-				display: "flex",
-				flexDirection: "column",
-				alignItems: "center",
-				justifyContent: "center",
-				flex: "1",
-				padding: tokens.spacing["12"],
-				gap: tokens.spacing["4"],
-				backgroundColor: tokens.bg.brand,
-				color: tokens.color["on-brand"]
-			},
-			right: {
-				display: "flex",
-				flexDirection: "column",
-				alignItems: "center",
-				justifyContent: "center",
-				flex: "1",
-				padding: tokens.spacing["12"],
-				gap: tokens.spacing["4"],
-				backgroundColor: tokens.bg.primary,
-				color: tokens.color["on-primary"]
-			},
-			leftTitle: {
-				...textVariants.display2,
-				fontWeight: tokens.fontWeight.bold,
-				textAlign: "center",
-				letterSpacing: tokens.letterSpacing.tight
-			},
-			leftBody: {
-				...textVariants.title2,
-				textAlign: "center",
-				opacity: "0.8",
-				maxWidth: "32rem"
-			},
-			rightTitle: {
-				...textVariants.display2,
-				fontWeight: tokens.fontWeight.bold,
-				textAlign: "center",
-				letterSpacing: tokens.letterSpacing.tight
-			},
-			rightBody: {
-				...textVariants.title2,
-				textAlign: "center",
-				opacity: "0.8",
-				maxWidth: "32rem"
-			}
-		},
-		variants: { variant: {
-			contrast: {
-				left: {
-					backgroundColor: tokens.bg.brand,
-					color: tokens.color["on-brand"]
-				},
-				right: {
-					backgroundColor: tokens.bg.primary,
-					color: tokens.color["on-primary"]
-				}
-			},
-			uniform: {
-				left: {
-					backgroundColor: tokens.bg.primary,
-					color: tokens.color["on-primary"]
-				},
-				right: {
-					backgroundColor: tokens.bg.secondary,
-					color: tokens.color["on-secondary"]
-				}
-			}
-		} },
-		defaultVariants: { variant: "contrast" }
-	}
-}));
-//#endregion
-export { splitScreenConfig };

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

@@ -1,25 +0,0 @@
-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
- */
-declare const SplitScreen: _$react.FC<_$_uds_types0.CreateComponentProps<string, {
-  leftTitle?: string;
-  leftBody?: string;
-  rightTitle?: string;
-  rightBody?: string;
-  children?: React.ReactNode;
-}, {
-  root: "div";
-  left: "div";
-  right: "div";
-  leftTitle: "div";
-  leftBody: "div";
-  rightTitle: "div";
-  rightBody: "div";
-}>>; //#endregion
-//#endregion
-export { SplitScreen };

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

@@ -1,35 +0,0 @@
-import { createComponent } from "../../../core/dist/createComponent.js";
-import "../../../core/dist/index.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region ../remotion/dist/components/split-screen.js
-/**
-* @description Side-by-side split screen layout for comparing content
-*/
-const SplitScreen = createComponent(({ props, leftTitle, leftBody, rightTitle, rightBody, children }) => /* @__PURE__ */ jsxs("div", {
-	...props.root,
-	children: [
-		/* @__PURE__ */ jsxs("div", {
-			...props.left,
-			children: [leftTitle && /* @__PURE__ */ jsx("div", {
-				...props.leftTitle,
-				children: leftTitle
-			}), leftBody && /* @__PURE__ */ jsx("div", {
-				...props.leftBody,
-				children: leftBody
-			})]
-		}),
-		/* @__PURE__ */ jsxs("div", {
-			...props.right,
-			children: [rightTitle && /* @__PURE__ */ jsx("div", {
-				...props.rightTitle,
-				children: rightTitle
-			}), rightBody && /* @__PURE__ */ jsx("div", {
-				...props.rightBody,
-				children: rightBody
-			})]
-		}),
-		children
-	]
-}));
-//#endregion
-export { SplitScreen };

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

@@ -1,55 +0,0 @@
-import { defaultFoundationPreset } from "../../../foundational-presets/dist/defaultPreset.js";
-import "../../../foundational-presets/dist/index.js";
-import { textVariants } from "../../../components/dist/text.config.js";
-//#region ../remotion/dist/components/stat-card.config.js
-const statCardConfig = defaultFoundationPreset.defineRemotionComponent("StatCard", ({ tokens }) => ({
-	type: "scene",
-	defaultDuration: 90,
-	description: "Full-screen statistic display with large value and label",
-	config: {
-		base: {
-			root: {
-				display: "flex",
-				flexDirection: "column",
-				alignItems: "center",
-				justifyContent: "center",
-				height: "100%",
-				width: "100%",
-				padding: tokens.spacing["12"],
-				gap: tokens.spacing["4"],
-				backgroundColor: tokens.bg.primary,
-				color: tokens.color["on-primary"]
-			},
-			value: {
-				...textVariants.superDisplay1,
-				fontFamily: tokens.fontFamily.mono,
-				textAlign: "center",
-				letterSpacing: tokens.letterSpacing.tight,
-				fontVariantNumeric: "tabular-nums"
-			},
-			label: {
-				...textVariants.subtitle1,
-				opacity: "0.5",
-				textAlign: "center",
-				textTransform: "uppercase",
-				letterSpacing: tokens.letterSpacing.widest
-			}
-		},
-		variants: { variant: {
-			brand: { root: {
-				backgroundColor: tokens.bg.brand,
-				color: tokens.color["on-brand"]
-			} },
-			accent: { root: {
-				backgroundColor: tokens.bg.accent,
-				color: tokens.color["on-accent"]
-			} },
-			inverse: { root: {
-				backgroundColor: tokens.bg.inverse,
-				color: tokens.color["on-inverse"]
-			} }
-		} }
-	}
-}));
-//#endregion
-export { statCardConfig };

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

@@ -1,19 +0,0 @@
-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
- */
-declare const StatCard: _$react.FC<_$_uds_types0.CreateComponentProps<string, {
-  value: string;
-  label?: string;
-  children?: React.ReactNode;
-}, {
-  root: "div";
-  value: "div";
-  label: "div";
-}>>; //#endregion
-//#endregion
-export { StatCard };

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

@@ -1,23 +0,0 @@
-import { createComponent } from "../../../core/dist/createComponent.js";
-import "../../../core/dist/index.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region ../remotion/dist/components/stat-card.js
-/**
-* @description Full-screen statistic display with large value and label
-*/
-const StatCard = createComponent(({ props, value, label, children }) => /* @__PURE__ */ jsxs("div", {
-	...props.root,
-	children: [
-		/* @__PURE__ */ jsx("div", {
-			...props.value,
-			children: value
-		}),
-		label && /* @__PURE__ */ jsx("div", {
-			...props.label,
-			children: label
-		}),
-		children
-	]
-}));
-//#endregion
-export { StatCard };

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

@@ -1,46 +0,0 @@
-import { defaultFoundationPreset } from "../../../foundational-presets/dist/defaultPreset.js";
-import "../../../foundational-presets/dist/index.js";
-import { textVariants } from "../../../components/dist/text.config.js";
-//#region ../remotion/dist/components/text-overlay.config.js
-const textOverlayConfig = defaultFoundationPreset.defineRemotionComponent("TextOverlay", ({ tokens }) => ({
-	type: "overlay",
-	defaultDuration: 90,
-	description: "Full-screen text overlay for displaying text over video or images",
-	config: {
-		base: {
-			root: {
-				position: "absolute",
-				top: "0",
-				left: "0",
-				right: "0",
-				bottom: "0",
-				display: "flex",
-				alignItems: "center",
-				justifyContent: "center",
-				padding: tokens.spacing["8"]
-			},
-			text: {
-				...textVariants.superDisplay3,
-				textAlign: "center",
-				color: tokens.color["on-inverse"]
-			}
-		},
-		variants: { align: {
-			center: { root: {
-				alignItems: "center",
-				justifyContent: "center"
-			} },
-			top: { root: {
-				alignItems: "flex-start",
-				justifyContent: "center"
-			} },
-			bottom: { root: {
-				alignItems: "flex-end",
-				justifyContent: "center"
-			} }
-		} },
-		defaultVariants: { align: "center" }
-	}
-}));
-//#endregion
-export { textOverlayConfig };