import React from 'react'; import { type InteractivitySchema } from './interactivity-schema.js'; import type { AbsoluteFillLayout, SequenceProps } from './Sequence.js'; import { type WithInteractivitySchemaOptions } from './with-interactivity-schema.js'; type InteractiveHtmlTag = 'a' | 'article' | 'aside' | 'button' | 'code' | 'div' | 'em' | 'footer' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'header' | 'label' | 'li' | 'main' | 'nav' | 'ol' | 'p' | 'pre' | 'section' | 'small' | 'span' | 'strong' | 'ul'; type InteractiveSvgTag = 'circle' | 'ellipse' | 'g' | 'line' | 'path' | 'rect' | 'svg' | 'text'; type InteractiveTag = InteractiveHtmlTag | InteractiveSvgTag; type ElementForTag = Tag extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[Tag] : Tag extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[Tag] : Element; export type InteractiveBaseProps = Pick; export type InteractiveTransformProps = Pick; export type InteractiveCropProps = Pick; export type InteractivePremountProps = Pick; type InteractiveManagedProps = InteractiveBaseProps & InteractiveCropProps; type InteractiveElementProps = Omit, keyof InteractiveManagedProps> & InteractiveManagedProps; type InteractiveElementComponent = React.ComponentType & React.RefAttributes>>; type RemotionComponentIdentityPackage = 'remotion' | `@remotion/${string}`; /** * @description HTML and SVG elements that are registered in the Remotion Studio timeline and can be visually edited. */ export declare const Interactive: { baseSchema: { readonly durationInFrames: { readonly type: "number"; readonly default: undefined; readonly min: 1; readonly step: 1; readonly hiddenFromList: true; }; readonly from: { readonly type: "number"; readonly default: 0; readonly step: 1; readonly hiddenFromList: true; }; readonly trimBefore: { readonly type: "number"; readonly default: 0; readonly min: 0; readonly step: 1; readonly hiddenFromList: true; }; readonly freeze: { readonly type: "number"; readonly default: null; readonly step: 1; readonly hiddenFromList: true; }; readonly hidden: import("./interactivity-schema.js").BooleanFieldSchema; readonly name: import("./interactivity-schema.js").HiddenFieldSchema; readonly showInTimeline: import("./interactivity-schema.js").HiddenFieldSchema; }; captionsSchema: { readonly captions: { readonly type: "remotion-captions"; readonly default: undefined; readonly description: "Captions"; readonly keyframable: false; }; }; transformSchema: { readonly 'style.transformOrigin': { readonly type: "transform-origin"; readonly step: 1; readonly default: "50% 50%"; readonly description: "Transform origin"; }; readonly 'style.translate': { readonly type: "translate"; readonly step: 1; readonly default: "0px 0px"; readonly description: "Offset"; }; readonly 'style.scale': { readonly type: "scale"; readonly max: 100; readonly step: 0.01; readonly default: 1; readonly description: "Scale"; readonly defaultKeyframeOutput: "perceptual-scale"; }; readonly 'style.rotate': { readonly type: "rotation-css"; readonly step: 1; readonly default: "0deg"; readonly description: "Rotation"; }; readonly 'style.opacity': { readonly type: "number"; readonly min: 0; readonly max: 1; readonly step: 0.01; readonly default: 1; readonly description: "Opacity"; readonly hiddenFromList: false; }; }; textSchema: { readonly 'style.color': { readonly type: "color"; readonly default: undefined; readonly description: "Color"; }; readonly 'style.fontFamily': { readonly type: "font-family"; readonly default: undefined; readonly description: "Font family"; readonly keyframable: false; }; readonly 'style.fontSize': { readonly type: "number"; readonly default: undefined; readonly min: 0; readonly step: 1; readonly description: "Font size"; readonly hiddenFromList: false; }; readonly 'style.lineHeight': { readonly type: "number"; readonly default: undefined; readonly min: 0; readonly step: 0.05; readonly description: "Line height"; readonly hiddenFromList: false; }; readonly 'style.fontWeight': { readonly type: "font-weight"; readonly default: 400; readonly description: "Font weight"; readonly keyframable: false; }; readonly 'style.fontStyle': { readonly type: "enum"; readonly default: "normal"; readonly description: "Font style"; readonly variants: { readonly normal: {}; readonly italic: {}; readonly oblique: {}; }; }; readonly 'style.textAlign': { readonly type: "enum"; readonly default: "left"; readonly description: "Text align"; readonly variants: { readonly left: {}; readonly center: {}; readonly right: {}; readonly justify: {}; readonly start: {}; readonly end: {}; }; }; readonly 'style.letterSpacing': { readonly type: "number"; readonly default: undefined; readonly step: 0.1; readonly description: "Letter spacing"; readonly hiddenFromList: false; }; }; backgroundSchema: { readonly 'style.backgroundColor': { readonly type: "color"; readonly default: "transparent"; readonly description: "Color"; }; }; borderSchema: { readonly 'style.borderWidth': { readonly type: "number"; readonly default: undefined; readonly min: 0; readonly step: 1; readonly description: "Border width"; readonly hiddenFromList: false; }; readonly 'style.borderStyle': { readonly type: "enum"; readonly default: "none"; readonly description: "Border style"; readonly variants: { readonly none: {}; readonly hidden: {}; readonly solid: {}; readonly dashed: {}; readonly dotted: {}; readonly double: {}; readonly groove: {}; readonly ridge: {}; readonly inset: {}; readonly outset: {}; }; }; readonly 'style.borderColor': { readonly type: "color"; readonly default: undefined; readonly description: "Border color"; }; }; borderRadiusSchema: { readonly 'style.borderRadius': { readonly type: "number"; readonly default: 0; readonly min: 0; readonly step: 1; readonly description: "Border radius"; readonly hiddenFromList: false; readonly keyframable: true; }; readonly 'style.borderTopLeftRadius': { readonly type: "number"; readonly default: 0; readonly min: 0; readonly step: 1; readonly description: "Top left radius"; readonly hiddenFromList: false; }; readonly 'style.borderTopRightRadius': { readonly type: "number"; readonly default: 0; readonly min: 0; readonly step: 1; readonly description: "Top right radius"; readonly hiddenFromList: false; }; readonly 'style.borderBottomRightRadius': { readonly type: "number"; readonly default: 0; readonly min: 0; readonly step: 1; readonly description: "Bottom right radius"; readonly hiddenFromList: false; }; readonly 'style.borderBottomLeftRadius': { readonly type: "number"; readonly default: 0; readonly min: 0; readonly step: 1; readonly description: "Bottom left radius"; readonly hiddenFromList: false; }; }; cropSchema: { readonly cropLeft: { readonly type: "number"; readonly default: 0; readonly description: "Crop left"; readonly min: 0; readonly max: 1; readonly step: 0.01; readonly hiddenFromList: false; readonly keyframable: true; }; readonly cropRight: { readonly type: "number"; readonly default: 0; readonly description: "Crop right"; readonly min: 0; readonly max: 1; readonly step: 0.01; readonly hiddenFromList: false; readonly keyframable: true; }; readonly cropTop: { readonly type: "number"; readonly default: 0; readonly description: "Crop top"; readonly min: 0; readonly max: 1; readonly step: 0.01; readonly hiddenFromList: false; readonly keyframable: true; }; readonly cropBottom: { readonly type: "number"; readonly default: 0; readonly description: "Crop bottom"; readonly min: 0; readonly max: 1; readonly step: 0.01; readonly hiddenFromList: false; readonly keyframable: true; }; }; svgPaintSchema: { readonly color: { readonly type: "color"; readonly default: undefined; readonly description: "Current color"; }; readonly stroke: { readonly type: "color"; readonly default: "none"; readonly description: "Stroke"; }; readonly strokeWidth: { readonly type: "number"; readonly default: 1; readonly description: "Stroke width"; readonly min: 0; readonly step: 1; readonly hiddenFromList: false; }; readonly fill: { readonly type: "color"; readonly default: undefined; readonly description: "Fill"; }; }; svgStrokeSchema: { readonly color: { readonly type: "color"; readonly default: undefined; readonly description: "Current color"; }; readonly stroke: { readonly type: "color"; readonly default: "none"; readonly description: "Stroke"; }; readonly strokeWidth: { readonly type: "number"; readonly default: 1; readonly description: "Stroke width"; readonly min: 0; readonly step: 1; readonly hiddenFromList: false; }; }; premountSchema: { readonly premountFor: { readonly type: "number"; readonly default: 0; readonly description: "Premount For"; readonly min: 0; readonly step: 1; readonly hiddenFromList: false; readonly keyframable: false; }; readonly postmountFor: { readonly type: "number"; readonly default: 0; readonly min: 0; readonly step: 1; readonly hiddenFromList: true; readonly keyframable: false; }; }; sequenceSchema: { readonly durationInFrames: { readonly type: "number"; readonly default: undefined; readonly min: 1; readonly step: 1; readonly hiddenFromList: true; }; readonly from: { readonly type: "number"; readonly default: 0; readonly step: 1; readonly hiddenFromList: true; }; readonly trimBefore: { readonly type: "number"; readonly default: 0; readonly min: 0; readonly step: 1; readonly hiddenFromList: true; }; readonly freeze: { readonly type: "number"; readonly default: null; readonly step: 1; readonly hiddenFromList: true; }; readonly hidden: import("./interactivity-schema.js").BooleanFieldSchema; readonly name: import("./interactivity-schema.js").HiddenFieldSchema; readonly showInTimeline: import("./interactivity-schema.js").HiddenFieldSchema; readonly layout: { readonly type: "enum"; readonly default: "absolute-fill"; readonly description: "Layout"; readonly variants: { readonly 'absolute-fill': { readonly 'style.transformOrigin': { readonly type: "transform-origin"; readonly step: 1; readonly default: "50% 50%"; readonly description: "Transform origin"; }; readonly 'style.translate': { readonly type: "translate"; readonly step: 1; readonly default: "0px 0px"; readonly description: "Offset"; }; readonly 'style.scale': { readonly type: "scale"; readonly max: 100; readonly step: 0.01; readonly default: 1; readonly description: "Scale"; readonly defaultKeyframeOutput: "perceptual-scale"; }; readonly 'style.rotate': { readonly type: "rotation-css"; readonly step: 1; readonly default: "0deg"; readonly description: "Rotation"; }; readonly 'style.opacity': { readonly type: "number"; readonly min: 0; readonly max: 1; readonly step: 0.01; readonly default: 1; readonly description: "Opacity"; readonly hiddenFromList: false; }; readonly 'style.borderWidth': { readonly type: "number"; readonly default: undefined; readonly min: 0; readonly step: 1; readonly description: "Border width"; readonly hiddenFromList: false; }; readonly 'style.borderStyle': { readonly type: "enum"; readonly default: "none"; readonly description: "Border style"; readonly variants: { readonly none: {}; readonly hidden: {}; readonly solid: {}; readonly dashed: {}; readonly dotted: {}; readonly double: {}; readonly groove: {}; readonly ridge: {}; readonly inset: {}; readonly outset: {}; }; }; readonly 'style.borderColor': { readonly type: "color"; readonly default: undefined; readonly description: "Border color"; }; readonly 'style.borderRadius': { readonly type: "number"; readonly default: 0; readonly min: 0; readonly step: 1; readonly description: "Border radius"; readonly hiddenFromList: false; readonly keyframable: true; }; readonly 'style.borderTopLeftRadius': { readonly type: "number"; readonly default: 0; readonly min: 0; readonly step: 1; readonly description: "Top left radius"; readonly hiddenFromList: false; }; readonly 'style.borderTopRightRadius': { readonly type: "number"; readonly default: 0; readonly min: 0; readonly step: 1; readonly description: "Top right radius"; readonly hiddenFromList: false; }; readonly 'style.borderBottomRightRadius': { readonly type: "number"; readonly default: 0; readonly min: 0; readonly step: 1; readonly description: "Bottom right radius"; readonly hiddenFromList: false; }; readonly 'style.borderBottomLeftRadius': { readonly type: "number"; readonly default: 0; readonly min: 0; readonly step: 1; readonly description: "Bottom left radius"; readonly hiddenFromList: false; }; readonly 'style.backgroundColor': { readonly type: "color"; readonly default: "transparent"; readonly description: "Color"; }; readonly premountFor: { readonly type: "number"; readonly default: 0; readonly description: "Premount For"; readonly min: 0; readonly step: 1; readonly hiddenFromList: false; readonly keyframable: false; }; readonly postmountFor: { readonly type: "number"; readonly default: 0; readonly min: 0; readonly step: 1; readonly hiddenFromList: true; readonly keyframable: false; }; readonly cropLeft: { readonly type: "number"; readonly default: 0; readonly description: "Crop left"; readonly min: 0; readonly max: 1; readonly step: 0.01; readonly hiddenFromList: false; readonly keyframable: true; }; readonly cropRight: { readonly type: "number"; readonly default: 0; readonly description: "Crop right"; readonly min: 0; readonly max: 1; readonly step: 0.01; readonly hiddenFromList: false; readonly keyframable: true; }; readonly cropTop: { readonly type: "number"; readonly default: 0; readonly description: "Crop top"; readonly min: 0; readonly max: 1; readonly step: 0.01; readonly hiddenFromList: false; readonly keyframable: true; }; readonly cropBottom: { readonly type: "number"; readonly default: 0; readonly description: "Crop bottom"; readonly min: 0; readonly max: 1; readonly step: 0.01; readonly hiddenFromList: false; readonly keyframable: true; }; }; readonly none: {}; }; }; }; withSchema: (options: WithInteractivitySchemaOptions) => React.ComponentType; _internalMakeRemotionComponentIdentity: ({ packageName, componentName, }: { readonly packageName: RemotionComponentIdentityPackage; readonly componentName: string; }) => string; A: InteractiveElementComponent<"a">; Article: InteractiveElementComponent<"article">; Aside: InteractiveElementComponent<"aside">; Button: InteractiveElementComponent<"button">; Circle: InteractiveElementComponent<"circle">; Code: InteractiveElementComponent<"code">; Div: InteractiveElementComponent<"div">; Ellipse: InteractiveElementComponent<"ellipse">; Em: InteractiveElementComponent<"em">; Footer: InteractiveElementComponent<"footer">; G: InteractiveElementComponent<"g">; H1: InteractiveElementComponent<"h1">; H2: InteractiveElementComponent<"h2">; H3: InteractiveElementComponent<"h3">; H4: InteractiveElementComponent<"h4">; H5: InteractiveElementComponent<"h5">; H6: InteractiveElementComponent<"h6">; Header: InteractiveElementComponent<"header">; Label: InteractiveElementComponent<"label">; Li: InteractiveElementComponent<"li">; Line: InteractiveElementComponent<"line">; Main: InteractiveElementComponent<"main">; Nav: InteractiveElementComponent<"nav">; Ol: InteractiveElementComponent<"ol">; P: InteractiveElementComponent<"p">; Path: InteractiveElementComponent<"path">; Pre: InteractiveElementComponent<"pre">; Rect: InteractiveElementComponent<"rect">; Section: InteractiveElementComponent<"section">; Small: InteractiveElementComponent<"small">; Span: InteractiveElementComponent<"span">; Strong: InteractiveElementComponent<"strong">; Svg: InteractiveElementComponent<"svg">; Text: InteractiveElementComponent<"text">; Ul: InteractiveElementComponent<"ul">; }; export type InteractiveProps = InteractiveElementProps; export {};