@yahoo/uds-v5-wip 1.56.0 → 1.58.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_virtual/_rolldown/runtime.js +7 -0
- package/dist/config/dist/createConfig.d.ts +1 -22
- package/dist/config/dist/createConfig.js +3 -87
- package/dist/config/dist/preset-merge.js +0 -19
- package/dist/config/dist/serialize.js +0 -1
- package/dist/core/dist/compositeStyles.d.ts +1 -2
- package/dist/core/dist/configurable-prop-helpers.d.ts +1 -2
- package/dist/core/dist/createComponent.d.ts +1 -2
- package/dist/core/dist/createComponentExample.d.ts +1 -2
- package/dist/core/dist/createProvider.d.ts +1 -2
- package/dist/core/dist/generated/stylePropsTwMap.d.ts +1 -2
- package/dist/core/dist/getComponentStyles.d.ts +1 -2
- package/dist/core/dist/getStyles.d.ts +1 -2
- package/dist/core/dist/modifier-mappings.d.ts +1 -2
- package/dist/core/dist/resolveMotionState.d.ts +1 -2
- package/dist/core/dist/style-prop-data.d.ts +1 -2
- package/dist/core/dist/transformPreset.d.ts +1 -2
- package/dist/core/dist/withDefaultStyleProps.d.ts +1 -2
- package/dist/loader/dist/loader/create-component-lowering.js +1 -1
- package/dist/loader/dist/loader/data-attr-transform.js +1 -1
- package/dist/loader/dist/loader/lower-new-api-primitive.js +28 -0
- package/dist/loader/dist/loader/style-transform.js +4 -4
- package/dist/loader/dist/loader.d.ts +1 -2
- package/dist/loader/dist/loader.js +3 -3
- package/dist/loader/dist/next.d.ts +1 -2
- package/dist/loader/dist/next.js +1 -1
- package/dist/loader.js +1 -1
- package/dist/presets/dist/defaultPreset.js +1 -18
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -9
- package/dist/loader/dist/_virtual/_rolldown/runtime.js +0 -6
- package/dist/loader/dist/node_modules/react/cjs/react-jsx-runtime.development.js +0 -203
- package/dist/loader/dist/node_modules/react/cjs/react-jsx-runtime.production.js +0 -25
- package/dist/loader/dist/node_modules/react/cjs/react.development.js +0 -762
- package/dist/loader/dist/node_modules/react/cjs/react.production.js +0 -351
- package/dist/loader/dist/node_modules/react/index.js +0 -10
- package/dist/loader/dist/node_modules/react/jsx-runtime.js +0 -10
- package/dist/loader/dist/packages/core/dist/color-opacity-map.js +0 -33
- package/dist/loader/dist/packages/core/dist/compositeStyles.js +0 -43
- package/dist/loader/dist/packages/core/dist/createComponent.js +0 -6
- package/dist/loader/dist/packages/core/dist/createProvider.js +0 -7
- package/dist/loader/dist/packages/core/dist/generated/stylePropsTwMap.js +0 -570
- package/dist/loader/dist/packages/core/dist/getComponentStyles.js +0 -2
- package/dist/loader/dist/packages/core/dist/getStyles.js +0 -60
- package/dist/loader/dist/packages/core/dist/index.js +0 -6
- package/dist/loader/dist/packages/core/dist/modifier-mappings.js +0 -61
- package/dist/loader/dist/packages/core/dist/style-prop-data.js +0 -1257
- package/dist/loader/dist/packages/core/dist/withDefaultStyleProps.js +0 -1
- package/dist/remotion/dist/components/image-slide.config.js +0 -43
- package/dist/remotion/dist/components/image-slide.d.ts +0 -20
- package/dist/remotion/dist/components/image-slide.js +0 -24
- package/dist/remotion/dist/components/index.js +0 -16
- package/dist/remotion/dist/components/lower-third.config.js +0 -54
- package/dist/remotion/dist/components/lower-third.d.ts +0 -21
- package/dist/remotion/dist/components/lower-third.js +0 -26
- package/dist/remotion/dist/components/quote-card.config.js +0 -85
- package/dist/remotion/dist/components/quote-card.d.ts +0 -21
- package/dist/remotion/dist/components/quote-card.js +0 -27
- package/dist/remotion/dist/components/split-screen.config.js +0 -90
- package/dist/remotion/dist/components/split-screen.d.ts +0 -25
- package/dist/remotion/dist/components/split-screen.js +0 -35
- package/dist/remotion/dist/components/stat-card.config.js +0 -55
- package/dist/remotion/dist/components/stat-card.d.ts +0 -19
- package/dist/remotion/dist/components/stat-card.js +0 -23
- package/dist/remotion/dist/components/text-overlay.config.js +0 -46
- package/dist/remotion/dist/components/text-overlay.d.ts +0 -17
- package/dist/remotion/dist/components/text-overlay.js +0 -16
- package/dist/remotion/dist/components/title-card.config.js +0 -56
- package/dist/remotion/dist/components/title-card.d.ts +0 -19
- package/dist/remotion/dist/components/title-card.js +0 -23
- package/dist/remotion/dist/components/typing-text.config.js +0 -57
- package/dist/remotion/dist/components/typing-text.d.ts +0 -21
- package/dist/remotion/dist/components/typing-text.js +0 -23
- package/dist/remotion/dist/index.d.ts +0 -8
- package/dist/remotion/dist/index.js +0 -8
- package/dist/remotion/dist/transitions/fade.js +0 -19
- package/dist/remotion/dist/transitions/index.js +0 -7
- package/dist/remotion/dist/transitions/slide-down.js +0 -21
- package/dist/remotion/dist/transitions/slide-left.js +0 -21
- package/dist/remotion/dist/transitions/slide-right.js +0 -21
- package/dist/remotion/dist/transitions/slide-up.js +0 -21
- package/dist/remotion/dist/transitions/wipe.js +0 -21
- package/dist/remotion/dist/transitions/zoom.js +0 -19
- package/dist/remotion.d.ts +0 -9
- package/dist/remotion.js +0 -10
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import "../../../../../utils/dist/index.js";
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { defaultFoundationPreset } from "../../../foundational-presets/dist/defaultPreset.js";
|
|
2
|
-
import "../../../foundational-presets/dist/index.js";
|
|
3
|
-
import { textVariants } from "../../../components/dist/text.config.js";
|
|
4
|
-
//#region ../remotion/dist/components/image-slide.config.js
|
|
5
|
-
const imageSlideConfig = defaultFoundationPreset.defineRemotionComponent("ImageSlide", ({ tokens }) => ({
|
|
6
|
-
type: "image",
|
|
7
|
-
defaultDuration: 150,
|
|
8
|
-
description: "Full-screen image slide with optional caption overlay",
|
|
9
|
-
config: {
|
|
10
|
-
base: {
|
|
11
|
-
root: {
|
|
12
|
-
position: "relative",
|
|
13
|
-
width: "100%",
|
|
14
|
-
height: "100%",
|
|
15
|
-
overflow: "hidden",
|
|
16
|
-
backgroundColor: tokens.bg.primary
|
|
17
|
-
},
|
|
18
|
-
image: {
|
|
19
|
-
width: "100%",
|
|
20
|
-
height: "100%",
|
|
21
|
-
objectFit: "cover"
|
|
22
|
-
},
|
|
23
|
-
caption: {
|
|
24
|
-
...textVariants.caption,
|
|
25
|
-
position: "absolute",
|
|
26
|
-
bottom: "0",
|
|
27
|
-
left: "0",
|
|
28
|
-
right: "0",
|
|
29
|
-
padding: tokens.spacing["6"],
|
|
30
|
-
color: tokens.color["on-inverse"],
|
|
31
|
-
backgroundColor: tokens.bg.inverse
|
|
32
|
-
}
|
|
33
|
-
},
|
|
34
|
-
variants: { fit: {
|
|
35
|
-
cover: { image: { objectFit: "cover" } },
|
|
36
|
-
contain: { image: { objectFit: "contain" } },
|
|
37
|
-
fill: { image: { objectFit: "fill" } }
|
|
38
|
-
} },
|
|
39
|
-
defaultVariants: { fit: "cover" }
|
|
40
|
-
}
|
|
41
|
-
}));
|
|
42
|
-
//#endregion
|
|
43
|
-
export { imageSlideConfig };
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import * as _$react from "react";
|
|
2
|
-
import * as _$_uds_types0 from "@uds/types";
|
|
3
|
-
|
|
4
|
-
//#region ../remotion/dist/components/image-slide.d.ts
|
|
5
|
-
//#region src/components/image-slide.d.ts
|
|
6
|
-
/**
|
|
7
|
-
* @description Full-screen image slide with optional caption overlay
|
|
8
|
-
*/
|
|
9
|
-
declare const ImageSlide: _$react.FC<_$_uds_types0.CreateComponentProps<string, {
|
|
10
|
-
src: string;
|
|
11
|
-
alt?: string;
|
|
12
|
-
caption?: string;
|
|
13
|
-
children?: React.ReactNode;
|
|
14
|
-
}, {
|
|
15
|
-
root: "div";
|
|
16
|
-
image: "img";
|
|
17
|
-
caption: "div";
|
|
18
|
-
}>>; //#endregion
|
|
19
|
-
//#endregion
|
|
20
|
-
export { ImageSlide };
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { createComponent } from "../../../core/dist/createComponent.js";
|
|
2
|
-
import "../../../core/dist/index.js";
|
|
3
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
-
//#region ../remotion/dist/components/image-slide.js
|
|
5
|
-
/**
|
|
6
|
-
* @description Full-screen image slide with optional caption overlay
|
|
7
|
-
*/
|
|
8
|
-
const ImageSlide = createComponent(({ props, src, alt, caption, children }) => /* @__PURE__ */ jsxs("div", {
|
|
9
|
-
...props.root,
|
|
10
|
-
children: [
|
|
11
|
-
/* @__PURE__ */ jsx("img", {
|
|
12
|
-
...props.image,
|
|
13
|
-
src,
|
|
14
|
-
alt: alt ?? ""
|
|
15
|
-
}),
|
|
16
|
-
caption && /* @__PURE__ */ jsx("div", {
|
|
17
|
-
...props.caption,
|
|
18
|
-
children: caption
|
|
19
|
-
}),
|
|
20
|
-
children
|
|
21
|
-
]
|
|
22
|
-
}));
|
|
23
|
-
//#endregion
|
|
24
|
-
export { ImageSlide };
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import "./image-slide.js";
|
|
2
|
-
import "./lower-third.js";
|
|
3
|
-
import "./quote-card.js";
|
|
4
|
-
import "./split-screen.js";
|
|
5
|
-
import "./stat-card.js";
|
|
6
|
-
import "./text-overlay.js";
|
|
7
|
-
import "./title-card.js";
|
|
8
|
-
import "./typing-text.js";
|
|
9
|
-
import "./image-slide.config.js";
|
|
10
|
-
import "./lower-third.config.js";
|
|
11
|
-
import "./quote-card.config.js";
|
|
12
|
-
import "./split-screen.config.js";
|
|
13
|
-
import "./stat-card.config.js";
|
|
14
|
-
import "./text-overlay.config.js";
|
|
15
|
-
import "./title-card.config.js";
|
|
16
|
-
import "./typing-text.config.js";
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { defaultFoundationPreset } from "../../../foundational-presets/dist/defaultPreset.js";
|
|
2
|
-
import "../../../foundational-presets/dist/index.js";
|
|
3
|
-
import { textVariants } from "../../../components/dist/text.config.js";
|
|
4
|
-
//#region ../remotion/dist/components/lower-third.config.js
|
|
5
|
-
const lowerThirdConfig = defaultFoundationPreset.defineRemotionComponent("LowerThird", ({ tokens }) => ({
|
|
6
|
-
type: "overlay",
|
|
7
|
-
defaultDuration: 120,
|
|
8
|
-
description: "Lower-third overlay with title and optional subtitle",
|
|
9
|
-
config: {
|
|
10
|
-
base: {
|
|
11
|
-
root: {
|
|
12
|
-
position: "absolute",
|
|
13
|
-
bottom: "0",
|
|
14
|
-
left: "0",
|
|
15
|
-
right: "0",
|
|
16
|
-
display: "flex",
|
|
17
|
-
flexDirection: "row",
|
|
18
|
-
alignItems: "stretch",
|
|
19
|
-
backgroundColor: tokens.bg.inverse
|
|
20
|
-
},
|
|
21
|
-
bar: {
|
|
22
|
-
width: "4px",
|
|
23
|
-
flexShrink: "0",
|
|
24
|
-
backgroundColor: tokens.color.brand
|
|
25
|
-
},
|
|
26
|
-
content: {
|
|
27
|
-
display: "flex",
|
|
28
|
-
flexDirection: "column",
|
|
29
|
-
gap: tokens.spacing["1"],
|
|
30
|
-
padding: `${tokens.spacing["4"]} ${tokens.spacing["8"]}`
|
|
31
|
-
},
|
|
32
|
-
title: {
|
|
33
|
-
...textVariants.display3,
|
|
34
|
-
fontWeight: tokens.fontWeight.bold,
|
|
35
|
-
color: tokens.color["on-inverse"]
|
|
36
|
-
},
|
|
37
|
-
subtitle: {
|
|
38
|
-
...textVariants.subtitle2,
|
|
39
|
-
opacity: "0.7",
|
|
40
|
-
color: tokens.color["on-inverse"]
|
|
41
|
-
}
|
|
42
|
-
},
|
|
43
|
-
variants: { layout: {
|
|
44
|
-
left: { root: {
|
|
45
|
-
right: "auto",
|
|
46
|
-
maxWidth: "60%"
|
|
47
|
-
} },
|
|
48
|
-
full: { root: {} }
|
|
49
|
-
} },
|
|
50
|
-
defaultVariants: { layout: "full" }
|
|
51
|
-
}
|
|
52
|
-
}));
|
|
53
|
-
//#endregion
|
|
54
|
-
export { lowerThirdConfig };
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import * as _$react from "react";
|
|
2
|
-
import * as _$_uds_types0 from "@uds/types";
|
|
3
|
-
|
|
4
|
-
//#region ../remotion/dist/components/lower-third.d.ts
|
|
5
|
-
//#region src/components/lower-third.d.ts
|
|
6
|
-
/**
|
|
7
|
-
* @description Lower-third overlay with title and optional subtitle
|
|
8
|
-
*/
|
|
9
|
-
declare const LowerThird: _$react.FC<_$_uds_types0.CreateComponentProps<string, {
|
|
10
|
-
title: string;
|
|
11
|
-
subtitle?: string;
|
|
12
|
-
children?: React.ReactNode;
|
|
13
|
-
}, {
|
|
14
|
-
root: "div";
|
|
15
|
-
bar: "div";
|
|
16
|
-
content: "div";
|
|
17
|
-
title: "div";
|
|
18
|
-
subtitle: "div";
|
|
19
|
-
}>>; //#endregion
|
|
20
|
-
//#endregion
|
|
21
|
-
export { LowerThird };
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { createComponent } from "../../../core/dist/createComponent.js";
|
|
2
|
-
import "../../../core/dist/index.js";
|
|
3
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
-
//#region ../remotion/dist/components/lower-third.js
|
|
5
|
-
/**
|
|
6
|
-
* @description Lower-third overlay with title and optional subtitle
|
|
7
|
-
*/
|
|
8
|
-
const LowerThird = createComponent(({ props, title, subtitle, children }) => /* @__PURE__ */ jsxs("div", {
|
|
9
|
-
...props.root,
|
|
10
|
-
children: [
|
|
11
|
-
/* @__PURE__ */ jsx("div", { ...props.bar }),
|
|
12
|
-
/* @__PURE__ */ jsxs("div", {
|
|
13
|
-
...props.content,
|
|
14
|
-
children: [/* @__PURE__ */ jsx("div", {
|
|
15
|
-
...props.title,
|
|
16
|
-
children: title
|
|
17
|
-
}), subtitle && /* @__PURE__ */ jsx("div", {
|
|
18
|
-
...props.subtitle,
|
|
19
|
-
children: subtitle
|
|
20
|
-
})]
|
|
21
|
-
}),
|
|
22
|
-
children
|
|
23
|
-
]
|
|
24
|
-
}));
|
|
25
|
-
//#endregion
|
|
26
|
-
export { LowerThird };
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
import { defaultFoundationPreset } from "../../../foundational-presets/dist/defaultPreset.js";
|
|
2
|
-
import "../../../foundational-presets/dist/index.js";
|
|
3
|
-
import { textVariants } from "../../../components/dist/text.config.js";
|
|
4
|
-
//#region ../remotion/dist/components/quote-card.config.js
|
|
5
|
-
const quoteCardConfig = defaultFoundationPreset.defineRemotionComponent("QuoteCard", ({ tokens }) => ({
|
|
6
|
-
type: "scene",
|
|
7
|
-
defaultDuration: 150,
|
|
8
|
-
description: "Full-screen quote display with optional attribution",
|
|
9
|
-
config: {
|
|
10
|
-
base: {
|
|
11
|
-
root: {
|
|
12
|
-
display: "flex",
|
|
13
|
-
flexDirection: "column",
|
|
14
|
-
alignItems: "center",
|
|
15
|
-
justifyContent: "center",
|
|
16
|
-
height: "100%",
|
|
17
|
-
width: "100%",
|
|
18
|
-
padding: tokens.spacing["16"],
|
|
19
|
-
gap: tokens.spacing["6"],
|
|
20
|
-
backgroundColor: tokens.bg.primary,
|
|
21
|
-
color: tokens.color["on-primary"],
|
|
22
|
-
position: "relative"
|
|
23
|
-
},
|
|
24
|
-
mark: {
|
|
25
|
-
fontSize: "10rem",
|
|
26
|
-
lineHeight: "1",
|
|
27
|
-
fontFamily: tokens.fontFamily.serif,
|
|
28
|
-
opacity: "0.15",
|
|
29
|
-
position: "absolute",
|
|
30
|
-
top: tokens.spacing["8"],
|
|
31
|
-
left: tokens.spacing["12"],
|
|
32
|
-
userSelect: "none"
|
|
33
|
-
},
|
|
34
|
-
quote: {
|
|
35
|
-
...textVariants.display2,
|
|
36
|
-
fontFamily: tokens.fontFamily.serif,
|
|
37
|
-
fontStyle: "italic",
|
|
38
|
-
textAlign: "center",
|
|
39
|
-
lineHeight: tokens.lineHeight.relaxed,
|
|
40
|
-
maxWidth: "52rem",
|
|
41
|
-
position: "relative",
|
|
42
|
-
zIndex: "1"
|
|
43
|
-
},
|
|
44
|
-
divider: {
|
|
45
|
-
width: "5rem",
|
|
46
|
-
height: "3px",
|
|
47
|
-
backgroundColor: tokens.color["on-primary"],
|
|
48
|
-
opacity: "0.3",
|
|
49
|
-
borderRadius: tokens.radius.full
|
|
50
|
-
},
|
|
51
|
-
attribution: {
|
|
52
|
-
...textVariants.subtitle2,
|
|
53
|
-
opacity: "0.6",
|
|
54
|
-
textAlign: "center",
|
|
55
|
-
textTransform: "uppercase",
|
|
56
|
-
letterSpacing: tokens.letterSpacing.wide
|
|
57
|
-
}
|
|
58
|
-
},
|
|
59
|
-
variants: { variant: {
|
|
60
|
-
brand: {
|
|
61
|
-
root: {
|
|
62
|
-
backgroundColor: tokens.bg.brand,
|
|
63
|
-
color: tokens.color["on-brand"]
|
|
64
|
-
},
|
|
65
|
-
divider: { backgroundColor: tokens.color["on-brand"] }
|
|
66
|
-
},
|
|
67
|
-
accent: {
|
|
68
|
-
root: {
|
|
69
|
-
backgroundColor: tokens.bg.accent,
|
|
70
|
-
color: tokens.color["on-accent"]
|
|
71
|
-
},
|
|
72
|
-
divider: { backgroundColor: tokens.color["on-accent"] }
|
|
73
|
-
},
|
|
74
|
-
inverse: {
|
|
75
|
-
root: {
|
|
76
|
-
backgroundColor: tokens.bg.inverse,
|
|
77
|
-
color: tokens.color["on-inverse"]
|
|
78
|
-
},
|
|
79
|
-
divider: { backgroundColor: tokens.color["on-inverse"] }
|
|
80
|
-
}
|
|
81
|
-
} }
|
|
82
|
-
}
|
|
83
|
-
}));
|
|
84
|
-
//#endregion
|
|
85
|
-
export { quoteCardConfig };
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import * as _$react from "react";
|
|
2
|
-
import * as _$_uds_types0 from "@uds/types";
|
|
3
|
-
|
|
4
|
-
//#region ../remotion/dist/components/quote-card.d.ts
|
|
5
|
-
//#region src/components/quote-card.d.ts
|
|
6
|
-
/**
|
|
7
|
-
* @description Full-screen quote display with optional attribution
|
|
8
|
-
*/
|
|
9
|
-
declare const QuoteCard: _$react.FC<_$_uds_types0.CreateComponentProps<string, {
|
|
10
|
-
quote: string;
|
|
11
|
-
attribution?: string;
|
|
12
|
-
children?: React.ReactNode;
|
|
13
|
-
}, {
|
|
14
|
-
root: "div";
|
|
15
|
-
mark: "div";
|
|
16
|
-
quote: "div";
|
|
17
|
-
divider: "div";
|
|
18
|
-
attribution: "div";
|
|
19
|
-
}>>; //#endregion
|
|
20
|
-
//#endregion
|
|
21
|
-
export { QuoteCard };
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { createComponent } from "../../../core/dist/createComponent.js";
|
|
2
|
-
import "../../../core/dist/index.js";
|
|
3
|
-
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
-
//#region ../remotion/dist/components/quote-card.js
|
|
5
|
-
/**
|
|
6
|
-
* @description Full-screen quote display with optional attribution
|
|
7
|
-
*/
|
|
8
|
-
const QuoteCard = createComponent(({ props, quote, attribution, children }) => /* @__PURE__ */ jsxs("div", {
|
|
9
|
-
...props.root,
|
|
10
|
-
children: [
|
|
11
|
-
/* @__PURE__ */ jsx("div", {
|
|
12
|
-
...props.mark,
|
|
13
|
-
children: "“"
|
|
14
|
-
}),
|
|
15
|
-
/* @__PURE__ */ jsx("div", {
|
|
16
|
-
...props.quote,
|
|
17
|
-
children: quote
|
|
18
|
-
}),
|
|
19
|
-
attribution && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { ...props.divider }), /* @__PURE__ */ jsx("div", {
|
|
20
|
-
...props.attribution,
|
|
21
|
-
children: attribution
|
|
22
|
-
})] }),
|
|
23
|
-
children
|
|
24
|
-
]
|
|
25
|
-
}));
|
|
26
|
-
//#endregion
|
|
27
|
-
export { QuoteCard };
|
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
import { defaultFoundationPreset } from "../../../foundational-presets/dist/defaultPreset.js";
|
|
2
|
-
import "../../../foundational-presets/dist/index.js";
|
|
3
|
-
import { textVariants } from "../../../components/dist/text.config.js";
|
|
4
|
-
//#region ../remotion/dist/components/split-screen.config.js
|
|
5
|
-
const splitScreenConfig = defaultFoundationPreset.defineRemotionComponent("SplitScreen", ({ tokens }) => ({
|
|
6
|
-
type: "scene",
|
|
7
|
-
defaultDuration: 120,
|
|
8
|
-
description: "Side-by-side split screen layout for comparing content",
|
|
9
|
-
config: {
|
|
10
|
-
base: {
|
|
11
|
-
root: {
|
|
12
|
-
display: "flex",
|
|
13
|
-
flexDirection: "row",
|
|
14
|
-
width: "100%",
|
|
15
|
-
height: "100%"
|
|
16
|
-
},
|
|
17
|
-
left: {
|
|
18
|
-
display: "flex",
|
|
19
|
-
flexDirection: "column",
|
|
20
|
-
alignItems: "center",
|
|
21
|
-
justifyContent: "center",
|
|
22
|
-
flex: "1",
|
|
23
|
-
padding: tokens.spacing["12"],
|
|
24
|
-
gap: tokens.spacing["4"],
|
|
25
|
-
backgroundColor: tokens.bg.brand,
|
|
26
|
-
color: tokens.color["on-brand"]
|
|
27
|
-
},
|
|
28
|
-
right: {
|
|
29
|
-
display: "flex",
|
|
30
|
-
flexDirection: "column",
|
|
31
|
-
alignItems: "center",
|
|
32
|
-
justifyContent: "center",
|
|
33
|
-
flex: "1",
|
|
34
|
-
padding: tokens.spacing["12"],
|
|
35
|
-
gap: tokens.spacing["4"],
|
|
36
|
-
backgroundColor: tokens.bg.primary,
|
|
37
|
-
color: tokens.color["on-primary"]
|
|
38
|
-
},
|
|
39
|
-
leftTitle: {
|
|
40
|
-
...textVariants.display2,
|
|
41
|
-
fontWeight: tokens.fontWeight.bold,
|
|
42
|
-
textAlign: "center",
|
|
43
|
-
letterSpacing: tokens.letterSpacing.tight
|
|
44
|
-
},
|
|
45
|
-
leftBody: {
|
|
46
|
-
...textVariants.title2,
|
|
47
|
-
textAlign: "center",
|
|
48
|
-
opacity: "0.8",
|
|
49
|
-
maxWidth: "32rem"
|
|
50
|
-
},
|
|
51
|
-
rightTitle: {
|
|
52
|
-
...textVariants.display2,
|
|
53
|
-
fontWeight: tokens.fontWeight.bold,
|
|
54
|
-
textAlign: "center",
|
|
55
|
-
letterSpacing: tokens.letterSpacing.tight
|
|
56
|
-
},
|
|
57
|
-
rightBody: {
|
|
58
|
-
...textVariants.title2,
|
|
59
|
-
textAlign: "center",
|
|
60
|
-
opacity: "0.8",
|
|
61
|
-
maxWidth: "32rem"
|
|
62
|
-
}
|
|
63
|
-
},
|
|
64
|
-
variants: { variant: {
|
|
65
|
-
contrast: {
|
|
66
|
-
left: {
|
|
67
|
-
backgroundColor: tokens.bg.brand,
|
|
68
|
-
color: tokens.color["on-brand"]
|
|
69
|
-
},
|
|
70
|
-
right: {
|
|
71
|
-
backgroundColor: tokens.bg.primary,
|
|
72
|
-
color: tokens.color["on-primary"]
|
|
73
|
-
}
|
|
74
|
-
},
|
|
75
|
-
uniform: {
|
|
76
|
-
left: {
|
|
77
|
-
backgroundColor: tokens.bg.primary,
|
|
78
|
-
color: tokens.color["on-primary"]
|
|
79
|
-
},
|
|
80
|
-
right: {
|
|
81
|
-
backgroundColor: tokens.bg.secondary,
|
|
82
|
-
color: tokens.color["on-secondary"]
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
} },
|
|
86
|
-
defaultVariants: { variant: "contrast" }
|
|
87
|
-
}
|
|
88
|
-
}));
|
|
89
|
-
//#endregion
|
|
90
|
-
export { splitScreenConfig };
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import * as _$react from "react";
|
|
2
|
-
import * as _$_uds_types0 from "@uds/types";
|
|
3
|
-
|
|
4
|
-
//#region ../remotion/dist/components/split-screen.d.ts
|
|
5
|
-
//#region src/components/split-screen.d.ts
|
|
6
|
-
/**
|
|
7
|
-
* @description Side-by-side split screen layout for comparing content
|
|
8
|
-
*/
|
|
9
|
-
declare const SplitScreen: _$react.FC<_$_uds_types0.CreateComponentProps<string, {
|
|
10
|
-
leftTitle?: string;
|
|
11
|
-
leftBody?: string;
|
|
12
|
-
rightTitle?: string;
|
|
13
|
-
rightBody?: string;
|
|
14
|
-
children?: React.ReactNode;
|
|
15
|
-
}, {
|
|
16
|
-
root: "div";
|
|
17
|
-
left: "div";
|
|
18
|
-
right: "div";
|
|
19
|
-
leftTitle: "div";
|
|
20
|
-
leftBody: "div";
|
|
21
|
-
rightTitle: "div";
|
|
22
|
-
rightBody: "div";
|
|
23
|
-
}>>; //#endregion
|
|
24
|
-
//#endregion
|
|
25
|
-
export { SplitScreen };
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { createComponent } from "../../../core/dist/createComponent.js";
|
|
2
|
-
import "../../../core/dist/index.js";
|
|
3
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
-
//#region ../remotion/dist/components/split-screen.js
|
|
5
|
-
/**
|
|
6
|
-
* @description Side-by-side split screen layout for comparing content
|
|
7
|
-
*/
|
|
8
|
-
const SplitScreen = createComponent(({ props, leftTitle, leftBody, rightTitle, rightBody, children }) => /* @__PURE__ */ jsxs("div", {
|
|
9
|
-
...props.root,
|
|
10
|
-
children: [
|
|
11
|
-
/* @__PURE__ */ jsxs("div", {
|
|
12
|
-
...props.left,
|
|
13
|
-
children: [leftTitle && /* @__PURE__ */ jsx("div", {
|
|
14
|
-
...props.leftTitle,
|
|
15
|
-
children: leftTitle
|
|
16
|
-
}), leftBody && /* @__PURE__ */ jsx("div", {
|
|
17
|
-
...props.leftBody,
|
|
18
|
-
children: leftBody
|
|
19
|
-
})]
|
|
20
|
-
}),
|
|
21
|
-
/* @__PURE__ */ jsxs("div", {
|
|
22
|
-
...props.right,
|
|
23
|
-
children: [rightTitle && /* @__PURE__ */ jsx("div", {
|
|
24
|
-
...props.rightTitle,
|
|
25
|
-
children: rightTitle
|
|
26
|
-
}), rightBody && /* @__PURE__ */ jsx("div", {
|
|
27
|
-
...props.rightBody,
|
|
28
|
-
children: rightBody
|
|
29
|
-
})]
|
|
30
|
-
}),
|
|
31
|
-
children
|
|
32
|
-
]
|
|
33
|
-
}));
|
|
34
|
-
//#endregion
|
|
35
|
-
export { SplitScreen };
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import { defaultFoundationPreset } from "../../../foundational-presets/dist/defaultPreset.js";
|
|
2
|
-
import "../../../foundational-presets/dist/index.js";
|
|
3
|
-
import { textVariants } from "../../../components/dist/text.config.js";
|
|
4
|
-
//#region ../remotion/dist/components/stat-card.config.js
|
|
5
|
-
const statCardConfig = defaultFoundationPreset.defineRemotionComponent("StatCard", ({ tokens }) => ({
|
|
6
|
-
type: "scene",
|
|
7
|
-
defaultDuration: 90,
|
|
8
|
-
description: "Full-screen statistic display with large value and label",
|
|
9
|
-
config: {
|
|
10
|
-
base: {
|
|
11
|
-
root: {
|
|
12
|
-
display: "flex",
|
|
13
|
-
flexDirection: "column",
|
|
14
|
-
alignItems: "center",
|
|
15
|
-
justifyContent: "center",
|
|
16
|
-
height: "100%",
|
|
17
|
-
width: "100%",
|
|
18
|
-
padding: tokens.spacing["12"],
|
|
19
|
-
gap: tokens.spacing["4"],
|
|
20
|
-
backgroundColor: tokens.bg.primary,
|
|
21
|
-
color: tokens.color["on-primary"]
|
|
22
|
-
},
|
|
23
|
-
value: {
|
|
24
|
-
...textVariants.superDisplay1,
|
|
25
|
-
fontFamily: tokens.fontFamily.mono,
|
|
26
|
-
textAlign: "center",
|
|
27
|
-
letterSpacing: tokens.letterSpacing.tight,
|
|
28
|
-
fontVariantNumeric: "tabular-nums"
|
|
29
|
-
},
|
|
30
|
-
label: {
|
|
31
|
-
...textVariants.subtitle1,
|
|
32
|
-
opacity: "0.5",
|
|
33
|
-
textAlign: "center",
|
|
34
|
-
textTransform: "uppercase",
|
|
35
|
-
letterSpacing: tokens.letterSpacing.widest
|
|
36
|
-
}
|
|
37
|
-
},
|
|
38
|
-
variants: { variant: {
|
|
39
|
-
brand: { root: {
|
|
40
|
-
backgroundColor: tokens.bg.brand,
|
|
41
|
-
color: tokens.color["on-brand"]
|
|
42
|
-
} },
|
|
43
|
-
accent: { root: {
|
|
44
|
-
backgroundColor: tokens.bg.accent,
|
|
45
|
-
color: tokens.color["on-accent"]
|
|
46
|
-
} },
|
|
47
|
-
inverse: { root: {
|
|
48
|
-
backgroundColor: tokens.bg.inverse,
|
|
49
|
-
color: tokens.color["on-inverse"]
|
|
50
|
-
} }
|
|
51
|
-
} }
|
|
52
|
-
}
|
|
53
|
-
}));
|
|
54
|
-
//#endregion
|
|
55
|
-
export { statCardConfig };
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import * as _$react from "react";
|
|
2
|
-
import * as _$_uds_types0 from "@uds/types";
|
|
3
|
-
|
|
4
|
-
//#region ../remotion/dist/components/stat-card.d.ts
|
|
5
|
-
//#region src/components/stat-card.d.ts
|
|
6
|
-
/**
|
|
7
|
-
* @description Full-screen statistic display with large value and label
|
|
8
|
-
*/
|
|
9
|
-
declare const StatCard: _$react.FC<_$_uds_types0.CreateComponentProps<string, {
|
|
10
|
-
value: string;
|
|
11
|
-
label?: string;
|
|
12
|
-
children?: React.ReactNode;
|
|
13
|
-
}, {
|
|
14
|
-
root: "div";
|
|
15
|
-
value: "div";
|
|
16
|
-
label: "div";
|
|
17
|
-
}>>; //#endregion
|
|
18
|
-
//#endregion
|
|
19
|
-
export { StatCard };
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { createComponent } from "../../../core/dist/createComponent.js";
|
|
2
|
-
import "../../../core/dist/index.js";
|
|
3
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
-
//#region ../remotion/dist/components/stat-card.js
|
|
5
|
-
/**
|
|
6
|
-
* @description Full-screen statistic display with large value and label
|
|
7
|
-
*/
|
|
8
|
-
const StatCard = createComponent(({ props, value, label, children }) => /* @__PURE__ */ jsxs("div", {
|
|
9
|
-
...props.root,
|
|
10
|
-
children: [
|
|
11
|
-
/* @__PURE__ */ jsx("div", {
|
|
12
|
-
...props.value,
|
|
13
|
-
children: value
|
|
14
|
-
}),
|
|
15
|
-
label && /* @__PURE__ */ jsx("div", {
|
|
16
|
-
...props.label,
|
|
17
|
-
children: label
|
|
18
|
-
}),
|
|
19
|
-
children
|
|
20
|
-
]
|
|
21
|
-
}));
|
|
22
|
-
//#endregion
|
|
23
|
-
export { StatCard };
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { defaultFoundationPreset } from "../../../foundational-presets/dist/defaultPreset.js";
|
|
2
|
-
import "../../../foundational-presets/dist/index.js";
|
|
3
|
-
import { textVariants } from "../../../components/dist/text.config.js";
|
|
4
|
-
//#region ../remotion/dist/components/text-overlay.config.js
|
|
5
|
-
const textOverlayConfig = defaultFoundationPreset.defineRemotionComponent("TextOverlay", ({ tokens }) => ({
|
|
6
|
-
type: "overlay",
|
|
7
|
-
defaultDuration: 90,
|
|
8
|
-
description: "Full-screen text overlay for displaying text over video or images",
|
|
9
|
-
config: {
|
|
10
|
-
base: {
|
|
11
|
-
root: {
|
|
12
|
-
position: "absolute",
|
|
13
|
-
top: "0",
|
|
14
|
-
left: "0",
|
|
15
|
-
right: "0",
|
|
16
|
-
bottom: "0",
|
|
17
|
-
display: "flex",
|
|
18
|
-
alignItems: "center",
|
|
19
|
-
justifyContent: "center",
|
|
20
|
-
padding: tokens.spacing["8"]
|
|
21
|
-
},
|
|
22
|
-
text: {
|
|
23
|
-
...textVariants.superDisplay3,
|
|
24
|
-
textAlign: "center",
|
|
25
|
-
color: tokens.color["on-inverse"]
|
|
26
|
-
}
|
|
27
|
-
},
|
|
28
|
-
variants: { align: {
|
|
29
|
-
center: { root: {
|
|
30
|
-
alignItems: "center",
|
|
31
|
-
justifyContent: "center"
|
|
32
|
-
} },
|
|
33
|
-
top: { root: {
|
|
34
|
-
alignItems: "flex-start",
|
|
35
|
-
justifyContent: "center"
|
|
36
|
-
} },
|
|
37
|
-
bottom: { root: {
|
|
38
|
-
alignItems: "flex-end",
|
|
39
|
-
justifyContent: "center"
|
|
40
|
-
} }
|
|
41
|
-
} },
|
|
42
|
-
defaultVariants: { align: "center" }
|
|
43
|
-
}
|
|
44
|
-
}));
|
|
45
|
-
//#endregion
|
|
46
|
-
export { textOverlayConfig };
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import * as _$react from "react";
|
|
2
|
-
import * as _$_uds_types0 from "@uds/types";
|
|
3
|
-
|
|
4
|
-
//#region ../remotion/dist/components/text-overlay.d.ts
|
|
5
|
-
//#region src/components/text-overlay.d.ts
|
|
6
|
-
/**
|
|
7
|
-
* @description Full-screen text overlay for displaying text over video or images
|
|
8
|
-
*/
|
|
9
|
-
declare const TextOverlay: _$react.FC<_$_uds_types0.CreateComponentProps<string, {
|
|
10
|
-
text: string;
|
|
11
|
-
children?: React.ReactNode;
|
|
12
|
-
}, {
|
|
13
|
-
root: "div";
|
|
14
|
-
text: "div";
|
|
15
|
-
}>>; //#endregion
|
|
16
|
-
//#endregion
|
|
17
|
-
export { TextOverlay };
|