framer
Version:
Type definitions from the Framer code editor
1,520 lines (1,416 loc) • 156 kB
TypeScript
import type { AnimationPlaybackControls } from 'framer-motion';
import type { CSSProperties } from 'react';
import { DOMAttributes } from 'react';
import { ForwardRefExoticComponent } from 'react';
import type { HTMLMotionProps } from 'framer-motion';
import { JSX as JSX_2 } from 'react/jsx-runtime';
import { DeprecatedLayoutGroupContext as LayoutGroupContext } from 'framer-motion';
import { MotionProps } from 'framer-motion';
import type { MotionStyle } from 'framer-motion';
import type { MotionTransform } from 'framer-motion';
import type { MotionValue } from 'framer-motion';
import { PanInfo } from 'framer-motion';
import type { PropsWithChildren } from 'react';
import { PropsWithoutRef } from 'react';
import { default as React_2 } from 'react';
import type { ReactNode } from 'react';
import { RefAttributes } from 'react';
import type { SpringOptions as SpringOptions_2 } from 'framer-motion';
import type { TapHandlers } from 'framer-motion';
import { Transition } from 'framer-motion';
import { useDeprecatedAnimatedState as useAnimatedState } from 'framer-motion';
import { useDeprecatedInvertedScale as useInvertedScale } from 'framer-motion';
import { ValueAnimationTransition } from 'framer-motion';
/** @public */
export declare function addFonts(component: React_2.ComponentType<unknown>, fontsOrBundles: (ComponentFontV1 | ComponentFontBundle<ComponentFontV2 | ComponentFont>)[], flags?: {
supportsExplicitInterCodegen?: boolean;
}): void;
/**
* Attaches a loader function to a component for data preloading.
*
* @example
* ```tsx
* addLoader(ParentComponent, async (props, context) => {
* return Promise.allSettled([
* forwardLoader(ChildComponent, {
* ...props,
* url: "https://api.example.com/data"
* }, context),
* fetch(props.url ?? "https://api.example.com/data", { signal: context.signal, cache: "force-cache" })
* ])
* })
* ```
*
* @public
*/
export declare function addLoader<P>(component: React.ComponentType<P>, loaderFn: ComponentLoader<P>["load"]): void;
/**
* Extends component with property controls
*
* ```typescript
* export const MyComponent = props => <h1>{props.header}</h1>
*
* addPropertyControls(MyComponent, {
* header: { type: ControlType.String, title: "Header" },
* })
*
* ```
* @public
*/
export declare function addPropertyControls<Props = any>(component: React_2.ComponentType<Props> | React_2.ForwardRefExoticComponent<Props> | HigherOrderComponent<Props>, propertyControls: PropertyControls<Props>): void;
declare type Alignment = "start" | "center" | "end";
/**
* Supported types are:
* 1. Valid media types (`"image/png"`, `"audio/*"`, `"✱/✱"`)
* 2. File extensions with a leading dot (`".png"`)
* 3. `"*"` (`.*` as a pseudo file extension was confirmed to allow everything in file pickers of all three major browser engines)
* 4. File extensions WITHOUT a leading dot (`"png"`) – unlike in browser APIs – for backward compatibility and in case something doesn't parse as a media type
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/file#unique_file_type_specifiers
*/
declare type AllowedFileTypes = readonly string[];
/**
* @public
*/
declare type AlphaNumericChar = "a" | "b" | "c" | "d" | "e" | "f" | "g" | "h" | "i" | "j" | "k" | "l" | "m" | "n" | "o" | "p" | "q" | "r" | "s" | "t" | "u" | "v" | "w" | "x" | "y" | "z" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";
/**
* @public
* @deprecated Use {@link useMotionValue} instead
*/
declare interface Animatable_2<Value> extends UpdateObserver<Value> {
/**
* Get the current value out of this Animatable object
* @remarks
* ```jsx
* const a = Animatable(0)
* a.get() // returns 0
* await animate(a, 42)
* a.get() // returns 42
* ```
* @returns Current value
* @public
*/
get(): Value;
/**
* Set a new value to a animatable object
* @remarks
* The passed value can be an Animatable value too
* ```jsx
* const a = Animatable(0)
* const b = Animatable(100)
* a.set(42)
* a.get() // returns 42
* a.set(b)
* a.get() // returns 100
* ```
* @param value - New value to set to the animatable
* @public
*/
set(value: Value | Animatable_2<Value>): void;
/**
* @public
*/
set(value: Value | Animatable_2<Value>, transaction?: TransactionId): void;
}
/**
* @public
*/
declare const Animatable_2: {
<Value>(value: Value | Animatable_2<Value>): Animatable_2<Value>;
transaction(update: (updater: (animatable: Animatable_2<any>, value: any) => void, transactionId: TransactionId) => void): void;
getNumber(value: number | Animatable_2<number> | null | undefined, defaultValue?: number): number;
get<Value>(value: Value | Animatable_2<Value> | null | undefined, defaultValue: Value): Value;
objectToValues<Object>(object: AnimatableObject<Object>): Object;
};
export { Animatable_2 as Animatable }
/** @public */
export declare type AnimatableObject<T> = {
[K in keyof T]: ToAnimatableOrValue<T[K]>;
};
/**
* @public
* @deprecated Use the {@link MotionProps.animate} prop on {@link Frame} instead.
*/
export declare const animate: {
<Value, Options>(from: Animatable_2<Value>, to: Value, animator?: AnimatorClass<Value, Options>, options?: Partial<Options & DeprecatedAnimationOptions<Value>>): FramerAnimation<Value, Options>;
<V>(from: MotionValue<V> | V, to: V | V[], transition?: Transition & AnimationPlaybackLifecycles<V>): AnimationPlaybackControls;
spring<Value>(from: Animatable_2<Value>, to: Value, options?: Partial<SpringOptions & DeprecatedAnimationOptions<Value>>): FramerAnimation<Value, SpringOptions>;
bezier<Value>(from: Animatable_2<Value>, to: Value, options?: Partial<BezierOptions & DeprecatedAnimationOptions<Value>>): FramerAnimation<Value, BezierOptions>;
linear<Value>(from: Animatable_2<Value>, to: Value, options?: Partial<EaseOptions & DeprecatedAnimationOptions<Value>>): FramerAnimation<Value, BezierOptions>;
ease<Value>(from: Animatable_2<Value>, to: Value, options?: Partial<EaseOptions & DeprecatedAnimationOptions<Value>>): FramerAnimation<Value, BezierOptions>;
easeIn<Value>(from: Animatable_2<Value>, to: Value, options?: Partial<EaseOptions & DeprecatedAnimationOptions<Value>>): FramerAnimation<Value, BezierOptions>;
easeOut<Value>(from: Animatable_2<Value>, to: Value, options?: Partial<EaseOptions & DeprecatedAnimationOptions<Value>>): FramerAnimation<Value, BezierOptions>;
easeInOut<Value>(from: Animatable_2<Value>, to: Value, options?: Partial<EaseOptions & DeprecatedAnimationOptions<Value>>): FramerAnimation<Value, BezierOptions>;
};
/**
* @public
* @deprecated Since Framer Motion 5 AnimateSharedLayout is no longer required for shared layout transitions.
* You can use the `layoutId` prop and components will animate from one to another.
* If you need to group components that affect each other's layout or scope shared layout animation, consider using `LayoutGroup` instead.
*/
export declare const AnimateSharedLayout: (props: any) => any;
/**
* @public
*/
declare interface AnimationInterface {
cancel(): void;
isFinished(): boolean;
}
declare interface AnimationPlaybackLifecycles<V> {
onUpdate?: (latest: V) => void;
onPlay?: () => void;
onComplete?: () => void;
onRepeat?: () => void;
onStop?: () => void;
}
/**
* @public
* @deprecated Use the `transition` prop instead
*/
declare interface AnimatorClass<Value, Options = any> {
}
/** @public */
export declare interface ArrayControlDescription<P = any> extends BaseControlDescription<P> {
type: ControlType.Array;
control: ArrayItemControlDescription<P>;
/** @deprecated This property has been renamed to control. */
propertyControl?: ArrayItemControlDescription<P>;
maxCount?: number;
defaultValue?: any[];
}
/**
* Array sub type (public types only)
* @public
*/
export declare type ArrayItemControlDescription<P = any> = Omit<NumberControlDescription<P>, "hidden" | "description" | "optional" | "section"> | Omit<EnumControlDescription<P>, "hidden" | "description" | "section"> | Omit<BooleanControlDescription<P>, "hidden" | "description" | "optional" | "section"> | Omit<StringControlDescription<P>, "hidden" | "description" | "optional" | "section"> | Omit<ColorControlDescription<P>, "hidden" | "description" | "optional" | "section"> | Omit<SegmentedEnumControlDescription<P>, "hidden" | "description" | "section"> | Omit<ImageControlDescription<P>, "hidden" | "description" | "section"> | Omit<ResponsiveImageControlDescription<P>, "hidden" | "description" | "section"> | Omit<FileControlDescription<P>, "hidden" | "description" | "section"> | Omit<ComponentInstanceDescription<P>, "hidden" | "description" | "section"> | Omit<TransitionControlDescription<P>, "hidden" | "description" | "section"> | Omit<LinkControlDescription<P>, "hidden" | "description" | "section"> | Omit<DateControlDescription<P>, "hidden" | "description" | "section"> | Omit<ObjectControlDescription<P>, "hidden" | "description" | "optional" | "section"> | Omit<BorderControlDescription<P>, "hidden" | "description" | "optional" | "section"> | Omit<CursorControlDescription<P>, "hidden" | "description" | "section">;
declare type AssetSize = "auto" | "lossless" | "small" | "medium" | "large" | "full"
/**
* Enable or disable the automatic generation of layout ids for canvas layers.
* By default layout ids are generated for all layers created on the Framer
* canvas. However, layout ids are not generated for any layer that is a
* descendant of a code component. Sometimes you will want to enable layout id
* generation for descendants of your code components when they use children,
* slots, or import design components, and you want those layers to animate with
* magic motion transitions.
*
* You can enable that behavior by wrapping your code component like this
* ```typescript
* <AutomaticLayoutIds enabled>
* <YourComponent/>
* </AutomaticLayoutIds>
* ```
* @public
*/
export declare function AutomaticLayoutIds({ enabled, ...props }: React_2.PropsWithChildren<{
enabled?: boolean;
}>): JSX_2.Element;
/** @public */
export declare type Background = Color | Gradient | BackgroundImage | MotionValue<string> | string;
/** @public */
export declare interface BackgroundFilterProperties {
backgroundBlur: number;
}
/** @public */
export declare interface BackgroundImage {
src: string | undefined;
alt?: string;
/** @deprecated - only be present in code generated before ~Nov 2025; Image components generate `srcSet`s now */
srcSet?: string | undefined;
nodeFixedSize?: {
width: number;
height: number;
} | undefined;
preferredSize?: AssetSize;
sizes?: string;
pixelWidth?: number;
pixelHeight?: number;
intrinsicWidth?: number;
intrinsicHeight?: number;
positionX?: "left" | "center" | "right" | RelativeNumber;
positionY?: "top" | "center" | "bottom" | RelativeNumber;
fit?: ImageFit;
backgroundSize?: number;
loading?: "lazy" | "eager";
fetchPriority?: "high" | "low";
}
/** @public */
export declare const BackgroundImage: {
isImageObject: (image: unknown) => image is object & BackgroundImage;
};
/** @public */
declare interface BackgroundImageProps extends ImageAltProps {
background: BackgroundImage;
}
/** @public */
export declare interface BackgroundProperties {
/**
* Set the background of a `Frame`. Supports color strings, color objects and images by using `src`. Set to a semi-transparent blue color by default.
* This will override the values set by the `image` property. To use a color and a image, use `backgroundColor` instead
* ```jsx
* <Frame background="#09F"/>
* <Frame background={Color({r: 255, g: 0, b: 102})} />
* <Frame background={{ alpha: 1, angle: 75, start: "#09F", end: "#F09"}} />
* <Frame background={{ src: "https://example.com/logo.png"}} />
* ```
* @public
*/
background: Background | null;
/**
* Set the background color of a `Frame`. Supports color strings and objects. Use this property to set a background color alongside the `image` property.
* ```jsx
* <Frame backgroundColor="#09F"/>
* <Frame backgroundColor={Color({r: 255, g: 0, b: 102})} />
* ```
* @public
*/
backgroundColor: string | Color;
/**
* Sets a background image of a `Frame`. Will wrap the passed value in a `url('')` if needed.
* @remarks
* ```jsx
* <Frame image="https://source.unsplash.com/random" />
* ```
* @public
*/
image: string;
}
/** @public */
export declare interface BaseControlDescription<P = any> {
title?: string;
description?: string;
hidden?: ((props: P, rootProps: any) => boolean) | boolean;
}
/**
* @remarks do no use separately from FrameProps
* @public
* */
export declare interface BaseFrameProps {
/**
* Add a name to the Frame. This property does not change the behaviour of a Frame, but makes it easier to identify it in your code.
* @remarks
* The name will be rendered in the `data-framer-name` attribute of the outputted div, so the Frame is recognizable in the HTML DOM too.
* ```jsx
* <Frame name={"Button"} />
* ```
* @public
*/
name: string;
}
/**
* @public
*/
declare enum Bezier {
Linear = "linear",
Ease = "ease",
EaseIn = "ease-in",
EaseOut = "ease-out",
EaseInOut = "ease-in-out"
}
declare interface BezierOptions {
curve: Curve;
duration: number;
}
/** @public */
export declare type BlendingMode = "normal" | "multiply" | "screen" | "overlay" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "difference" | "exclusion" | "hue" | "saturation" | "color" | "luminosity";
/** @public */
export declare interface BlendingProperties {
blendingMode: BlendingMode;
}
/** @public */
export declare interface BooleanControlDescription<P = any> extends BaseControlDescription<P>, WithOptional, WithHiddenWhenUnset {
type: ControlType.Boolean;
defaultValue?: boolean;
/**
* @deprecated No longer recommended because it should be clear what happens when assigning a
* boolean variable.
*/
disabledTitle?: string;
/**
* @deprecated No longer recommended because it should be clear what happens when assigning a
* boolean variable.
*/
enabledTitle?: string;
}
/**
* @public
* Represents a border style.
* Either borderWidth or the equivalent per-side
* values (e.g borderTopWidth, borderLeftWidth, borderRightWidth, borderBottomWidth)
* will be provided.
*/
declare interface Border {
borderColor?: string;
borderStyle?: BorderStyle;
borderWidth?: number;
borderTopWidth?: number;
borderLeftWidth?: number;
borderRightWidth?: number;
borderBottomWidth?: number;
}
/**
* @public
*/
export declare interface BorderControlDescription<P = any> extends BaseControlDescription<P>, WithOptional, WithHiddenWhenUnset {
type: ControlType.Border;
defaultValue?: Border;
}
declare interface BorderRadiusControlDescription<P = any> extends BaseControlDescription<P> {
type: ControlType.BorderRadius;
defaultValue?: string;
}
/** @public */
export declare type BorderStyle = "solid" | "dashed" | "dotted" | "double";
/** @public */
export declare interface BoxShadow {
type?: "box" | "realistic";
inset: boolean;
color: string;
x: number;
y: number;
blur: number;
spread: number;
diffusion: number;
focus: number;
}
/** @public */
export declare const BoxShadow: {
is: (shadow: any) => shadow is BoxShadow;
toCSS: (shadow: BoxShadow) => string;
};
/** @public */
export declare interface BoxShadowControlDescription<P = any> extends BaseControlDescription<P> {
type: ControlType.BoxShadow;
defaultValue?: string | readonly BoxShadow[];
}
/** @public */
export declare interface BoxShadowProperties {
shadows: readonly BoxShadow[];
}
declare interface BoxShadowProperties_2 {
shadows: readonly BoxShadow[];
}
declare type CallbackMap = Record<string, (() => void) | undefined>;
/** @public */
export declare type Cancel = () => void;
declare interface Change<Value> {
value: Value;
oldValue?: Value;
}
export declare function clampRGB<T>(color: T): T | string;
declare type ClassName = string | false | void | null | 0;
declare interface CollectionUtils {
getSlugByRecordId: (id: string, locale: Locale | undefined) => Promise<string | undefined>;
getRecordIdBySlug: (slug: string, locale: Locale | undefined) => Promise<string | undefined>;
}
/**
* Manages collection utils caches and makes the CollectionUtils functions server-client-handover aware.
* When updating the implementation, keep in mind the collection utils generation in `exportToHTML`.
*
* Every instance manages its own slug/recordId cache, but they share a global collection utils
* import cache.
*/
declare class CollectionUtilsCache implements ICollectionUtilsCache {
private readonly collectionId;
private readonly module;
/**
* Stores returned values from CollectionUtils.
* The values must be cached so that they can be returned synchronously when a React component unsuspends.
*/
private readonly cacheMap;
constructor(utilFactory: () => Promise<CollectionUtils> | undefined, collectionId: string);
private callUtilsMethod;
getSlugByRecordId(recordId: string, locale: Locale | undefined): MaybePromise<string | undefined>;
getRecordIdBySlug(slug: string, locale: Locale | undefined): MaybePromise<string | undefined>;
}
declare type CollectionUtilsCacheContextValue = {
get: ReturnType<typeof getCollectionUtilsCache>;
} | undefined;
/**
* @public
*/
export declare interface Color {
r: number;
g: number;
b: number;
h: number;
s: number;
l: number;
a: number;
roundA: number;
format: ColorFormat;
initialValue?: string;
isValid?: boolean;
mix: Mixer | MixerStateful;
toValue: () => string;
}
/**
* The Color function can be used to define colors, either as a string value or as an object. All colors
* are converted to a Color object with `r, g, b`, `h, s, l` and an `a` value.
* There are also various helpers on the Color function for working with,
* modifying and detecting colors.
*
* ```jsx
* // HEX
* const blue = Color("#0099FF")
*
* // RGB
* const blue = Color("rgb(0, 153, 255)")
* const blue = Color(0, 153, 255)
* const blue = Color({r: 0, g: 153, b: 255})
* const blue = Color({r: 0, g: 153, b: 255, a: 1})
*
* // HSL
* const blue = Color("hsl(204, 100%, 50%)")
* const blue = Color({h: 204, s: 1, l: 0.5})
* const blue = Color({h: 204, s: 1, l: 0.5, a: 1})
* ```
* @public
*/
export declare const Color: {
(color: IncomingColor | Color | number, r?: number, g?: number, b?: number): Color;
inspect(color: Color, initialValue?: string): string;
isColor(color: string | Color): boolean;
isColorString(colorString: string | object): boolean;
isColorObject(color: unknown): color is object & Color;
toString(color: Color): string;
toHex(color: Color, allow3Char?: boolean): string;
toHexString(color: Color, allow3Char?: boolean): string;
isP3String(color: unknown): color is string;
toRgbString(color: Color): string;
toHusl(color: Color): ColorHSLA;
toHslString(color: Color): string;
toHsv(color: Color): ColorHSVA;
toHsvString(color: Color): string;
toName(color: Color): string | false;
toHsl(color: Color): ColorHSLA;
toRgb(color: Color): ColorRGBA;
brighten(color: Color, amount?: number): Color;
lighten(color: Color, amount?: number): Color;
darken(color: Color, amount?: number): Color;
saturate(color: Color, amount?: number): Color;
desaturate(color: Color, amount?: number): Color;
grayscale(color: Color): Color;
hueRotate(color: Color, angle: number): Color;
alpha(color: Color, a?: number): Color;
transparent(color: Color): Color;
multiplyAlpha(color: Color, alphaValue?: number): Color;
interpolate(colorA: Color, colorB: Color, model?: ColorMixModelType): ((progress: number) => Color);
mix(from: Color, toColor: Color, { model }?: {
model?: ColorMixModelType | undefined;
}): (p: number) => string;
mixAsColor(colorA: Color, colorB: Color, fraction?: number, limit?: boolean, model?: ColorMixModelType): Color | null;
random(alphaValue?: number): Color;
grey(amount?: number, alphaValue?: number): Color;
rgbToHsl(r: number, g: number, b: number): ColorHSL;
isValidColorProperty(name: string, value: string): boolean;
difference(colorA: Color, colorB: Color): number;
equal(colorA: Color, colorB: Color, tolerance?: number): boolean;
luminance(color: Color): number;
contrast(a: Color, b: Color): number;
};
/** @public */
export declare interface ColorControlDescription<P = any> extends BaseControlDescription<P>, WithOptional, WithHiddenWhenUnset {
type: ControlType.Color;
defaultValue?: string;
}
/** @public */
export declare enum ColorFormat {
RGB = "rgb",
HSL = "hsl",
HSV = "hsv",
HEX = "hex",
NAME = "name"
}
/** @public */
export declare interface ColorHSL {
h: number;
s: number;
l: number;
}
/** @public */
export declare type ColorHSLA = ColorHSL & {
a: number;
};
/** @public */
declare interface ColorHSV {
h: number;
s: number;
v: number;
}
/** @public */
export declare type ColorHSVA = ColorHSV & {
a: number;
};
/**
* Various Color functions, such as {@link (Color:namespace).mix} and {@link
* (Color:namespace).interpolate}, take an optional color model that
* determines how two colors are mixed together.
*
* @remarks
*
* ```javascript
* const newColor = Color.mix(Color("red"), Color("blue"), {model: ColorMixModelType.HSL})
* ```
*
* @public
*/
export declare enum ColorMixModelType {
/**
* Use the {@link https://en.wikipedia.org/wiki/RGB_color_model | RGB color space} without an alpha value
*
* @remarks
*
* ```javascript
* const newColor = Color.mix(Color("red"), Color("blue"), {model: ColorMixModelType.RGB})
* ```
*
* @public
*/
RGB = "rgb",
/**
* Use the {@link https://en.wikipedia.org/wiki/RGB_color_model | RGB color space} color space with an alpha value
*
* @remarks
*
* ```javascript
* const newColor = Color.mix(Color("red"), Color("blue"), {model: ColorMixModelType.RGBA})
* ```
*
* @public
*/
RGBA = "rgba",
/**
* Use the {@link https://en.wikipedia.org/wiki/HSL_and_HSV | HSL} color space with an alpha value
*
* @remarks
*
* ```javascript
* const newColor = Color.mix(Color("red"), Color("blue"), {model: ColorMixModelType.HSL})
* ```
*
* @public
*/
HSL = "hsl",
/**
* Use the {@link https://en.wikipedia.org/wiki/HSL_and_HSV | HSL} color space with an alpha value
*
* @remarks
*
* ```javascript
* const newColor = Color.mix(Color("red"), Color("blue"), {model: ColorMixModelType.HSLA})
* ```
*
* @public
*/
HSLA = "hsla",
/**
* Use the {@link http://www.hsluv.org | HSLuv } human friendly color model
*
* @remarks
*
* ```javascript
* const newColor = Color.mix(Color("red"), Color("blue"), {model: ColorMixModelType.HUSL})
* ```
*
* @public
*/
HUSL = "husl"
}
/** @public */
export declare interface ColorMixOptions {
model?: ColorMixModelType;
}
declare interface ColorRGB {
r: number;
g: number;
b: number;
}
/** @public */
export declare type ColorRGBA = ColorRGB & {
a: number;
};
/**
* Describes a single font used by a component. Unlike [Font](../render/fonts/types.ts) objects
* which are fetched from the Google/Fontshare/etc APIs every time the canvas is loaded (and die
* when the canvas is unloaded), these objects get serialized into codegenerated web pages and
* components.
*
* @public
*/
export declare interface ComponentFont extends Omit<ComponentFontV2, "family"> {
}
/**
* Describes a bundle of fonts used by a single component, together with feature
* flags to indicate which font features that component supported at the time of
* codegen.
*/
declare interface ComponentFontBundle<T extends ComponentFontV2 | ComponentFont = ComponentFont> {
/**
* This flag specifies whether the font bundle includes the specific font
* weights of Framer’s Inter font that the component uses. New smart
* components do that (which means we can emit CSS only for Inter fonts that
* are actually used); older smart components don’t (which means some places
* will emit CSS for all Inter fonts if this flag is not set).
* https://www.notion.so/framer/RFC-ComponentFont-v2-d5fd3e822fb049ffb6971554ab0e4e42
*/
explicitInter: boolean;
fonts: T[];
}
/**
* An older (pre-Feb 2024) version of ComponentFont that doesn’t include the `source` field. This
* version was introduced in the same PR that introduced ComponentFontBundle, thus upgrading from
* ComponentFontV1 to ComponentFontV2 also involves wrapping ComponentFontV1s into a
* ComponentFontBundle.
*
* While this version of ComponentFont is not used internally, it may still be passed into
* `addFonts()` by older versions of smart components.
*/
declare interface ComponentFontV1 {
url: string;
family: string;
style?: string;
weight?: string;
stretch?: string;
unicodeRange?: string;
}
/**
* An older (pre-Sep 2025) version of ComponentFont that doesn’t include the `cssFontFamily` field.
*
* While this version of ComponentFont is not used internally, it may still be passed into
* `addFonts()` by older versions of smart components.
*/
declare interface ComponentFontV2 extends ComponentFontV1 {
source: FontSourceName;
variationAxes?: ReadonlyFontVariationAxes;
}
/**
* @deprecated Use {@link SlotControlDescription} instead.
* @public
*/
export declare interface ComponentInstanceDescription<P = any> extends BaseControlDescription<P> {
type: ControlType.ComponentInstance;
}
/**
* A loader attached to a component for data preloading.
* @public
*/
declare interface ComponentLoader<P = unknown> {
load: (props: P, context: LoaderContext) => Promise<unknown>;
}
/**
* @public
*/
declare type ComponentWithPreload<T extends React.ComponentType<any>> = T & {
preload: () => Promise<void | T>;
getStatus: () => RouteStatus;
cacheHash?: string;
};
declare type ConstraintAuto = "auto";
declare interface ConstraintConfiguration {
}
/**
* Dimensions can be numbers or strings: percentages, fractions of free space (fr), or auto
* @public
*/
declare type ConstraintDimension = Animatable_2<number> | number | ConstraintPercentage | ConstraintAuto | ConstraintFreespaceFraction;
declare type ConstraintFreespaceFraction = string;
/** @public */
export declare type ConstraintPercentage = string;
/**
* These properties are used to layout elements within Framer’s constraint system.
* @privateRemarks Represents model property values for layout constraints. These may be internally inconsistent. Mask and Values are generated from these.
* @public
* */
export declare interface ConstraintProperties extends Partial<WithFractionOfFreeSpace> {
/**
* Pinned position from left
* @public
*/
left: Animatable_2<number> | number | null;
/**
* Pinned position from right
* @public
*/
right: Animatable_2<number> | number | null;
/**
* Pinned position from top
* @public
*/
top: Animatable_2<number> | number | null;
/**
* Pinned position from bottom
* @public
*/
bottom: Animatable_2<number> | number | null;
/**
* Center of horizontal position (X axis)
* @public
*/
centerX: ConstraintPercentage;
/**
* Center of vertical position (Y axis)
* @public
*/
centerY: ConstraintPercentage;
/**
* Element width
* @public
*/
width: ConstraintDimension;
/**
* Element height
* @public
*/
height: ConstraintDimension;
/**
* Aspect Ratio to keep when resizing
* @public
*/
aspectRatio: number | null;
/**
* //TODO What is autoSize for? Internal?
* @public
*/
autoSize?: boolean;
}
declare const ConstraintsContext: React_2.Context<{
parentSize: ParentSize;
}>;
/** @public */
export declare type ControlDescription<P = any> = NumberControlDescription<P> | EnumControlDescription<P> | BooleanControlDescription<P> | StringControlDescription<P> | ColorControlDescription<P> | FusedNumberControlDescription<P> | SegmentedEnumControlDescription<P> | ImageControlDescription<P> | ResponsiveImageControlDescription<P> | FileControlDescription<P> | ComponentInstanceDescription<P> | ArrayControlDescription<P> | EventHandlerControlDescription<P> | TransitionControlDescription<P> | BoxShadowControlDescription<P> | LinkControlDescription<P> | DateControlDescription<P> | ObjectControlDescription<P> | FontControlDescription<P> | BorderControlDescription<P> | CursorControlDescription<P> | PaddingControlDescription<P> | BorderRadiusControlDescription<P> | GapControlDescription<P> | TrackingIdControlDescription<P> | SlotControlDescription<P>;
declare type ControlPoints = [number, number, number, number];
/**
* Used by the {@link PropertyControls} and specifies the type of user interface for receiving
* input. Each field has a distinct set of properties though they all accept `title` and `hidden`
* properties.
*
* @remarks
* ```javascript
* export function MyComponent({ title }) {
* return <div>{title}</div>
* }
*
* addPropertyControls(MyComponent, {
* title: {
* type: ControlType.String,
* title: "Title",
* hidden: (props) => true
* },
* }
* ```
* @public
*/
export declare enum ControlType {
/**
* A control that displays an on / off checkbox. The associated property will be `true` or `false`,
* depending on the state of the checkbox. Includes an optional `defaultValue`, which is set to `true` by default. You can also customize the labels displayed in the property panel with the `enabledTitle` and `disabledTitle` properties.
*
* @remarks
* ```javascript
* export function MyComponent(props) {
* return <div>{props.showText ? "Hello World" : null}</div>
* }
*
* addPropertyControls(MyComponent, {
* showText: {
* type: ControlType.Boolean,
* title: "Show Text",
* defaultValue: true,
* enabledTitle: "On",
* disabledTitle: "Off",
* },
* })
* ```
*/
Boolean = "boolean",
/**
* A control that accepts any numeric value. This will be provided directly as a property.
* Will display an input field with a range slider by default. The
* `displayStepper` option can be enabled to include a stepper control instead.
*
* @remarks
* ```javascript
* export function MyComponent(props) {
* return <motion.div style={{ rotate: props.rotation }}>{props.rotation}</motion.div>
* }
*
* addPropertyControls(MyComponent, {
* rotation: {
* type: ControlType.Number,
* defaultValue: 0,
* min: 0,
* max: 360,
* unit: "deg",
* step: 0.1,
* displayStepper: true,
* },
* })
* ```
*/
Number = "number",
/**
* A control that accepts plain text values. This will be provided directly as a property.
* Will display an input field with an optional placeholder value.
* If `obscured` attribute is set to true a password input field will be used instead of a regular text input
* so that the value in the input will be visually obscured, yet still be available as plain text inside the component.
* `displayTextArea` can be enabled to display a multi-line input area instead.
*
* @remarks
* ```javascript
* export function MyComponent(props) {
* return <div>{props.title} — {props.body}</div>
* }
*
* addPropertyControls(MyComponent, {
* title: {
* type: ControlType.String,
* defaultValue: "Framer",
* placeholder: "Type something…",
* },
* body: {
* type: ControlType.String,
* defaultValue: "Lorem ipsum dolor sit amet.",
* placeholder: "Type something…",
* displayTextArea: true,
* },
* })
* ```
*/
String = "string",
/**
* Deprecated, please use ControlType.Padding and ControlType.BorderRadius. You should be able
* to switch to the new control type without data loss. Be aware that these new controls only
* have a single value (e.g. `10px` or `10px 20px 30px 40px`).
*
* A control that can be used to take a single number or four distinct numeric input fields. The
* typical use case for this control is for visual properties like border, padding or margin. It
* will display an input field to accept a single value, alongside a segmented control allowing
* four distinct values to be provided.
*
* You can also set the default value for each valueKey as well as the toggleKey by setting
* their values on `defaultProps`.
*
* @deprecated Please use {@link ControlType.Padding} and ${@link ControlType.BorderRadius}. You
* should be able to switch to the new control type without data loss. Be aware that these new controls only
* have a single value (e.g. `10px` or `10px 20px 30px 40px`).
* @remarks
* ```javascript
* export function MyComponent({
* radius = 50,
* topLeft,
* topRight,
* bottomRight,
* bottomLeft,
* isMixed = false,
* }) {
* const borderRadius = isMixed
* ? `${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px`
* : `${radius}px`
* return <div style={{ background: "red", borderRadius }}></div>
* }
*
* addPropertyControls(MyComponent, {
* radius: {
* type: ControlType.FusedNumber,
* title: "Radius",
* defaultValue: 50,
* toggleKey: "isMixed",
* toggleTitles: ["All", "Individual"],
* valueKeys: ["topLeft", "topRight", "bottomRight", "bottomLeft"],
* valueLabels: ["NW", "NE", "SE", "SW"],
* min: 0,
* },
* })
*
* // Set the default value for each valueKey as well as the toggleKey by setting their values on `defaultProps`:
* MyComponent.defaultProps = {
* radius: 10,
* isMixed: true,
* topLeft: 5,
* topRight: 15,
* bottomRight: 5,
* bottomLeft: 15,
* }
* ```
*/
FusedNumber = "fusednumber",
/**
* A property control that represents a list of options. The list contains primitive values and each
* value has to be unique. The selected option will be provided as a property. This control is displayed
* as a dropdown menu in which a user can select one of the items.
* `displaySegmentedControl` can be enabled to display a segmented control instead.
*
* ```javascript
* export function MyComponent(props) {
* const value = props.value || "a"
* const colors = { a: "red", b: "green", c: "blue" }
* return <div style={{ background: colors[value] }}>{value}</div>
* }
*
* addPropertyControls(MyComponent, {
* value: {
* type: ControlType.Enum,
* defaultValue: "a",
* options: ["a", "b", "c"],
* optionTitles: ["Option A", "Option B", "Option C"],
* },
* })
* ```
*/
Enum = "enum",
/**
* Deprecated, please use {@link ControlType.Enum} and enable displaySegmentedControl.
*
* @deprecated Please use {@link ControlType.Enum} and enable displaySegmentedControl.
* @remarks
* ```javascript
* export function MyComponent(props) {
* const value = props.value || "a"
* const colors = { a: "red", b: "green", c: "blue" }
* return <div style={{ background: colors[value] }}>{value}</div>
* }
*
* addPropertyControls(MyComponent, {
* value: {
* type: ControlType.SegmentedEnum,
* defaultValue: "a",
* options: ["a", "b", "c"],
* optionTitles: ["A", "B", "C"],
* },
* })
* ```
*/
SegmentedEnum = "segmentedenum",
/**
* A control that represents a color value. It will be included in the component props as a string.
* This control is displayed as a color field and will provide the selected color in either
* HEX (`"#fff"`) or HSL (`hsla(203, 87%, 50%, 0.5)`) notation, depending on
* whether there is an alpha channel.
*
* @remarks
* ```javascript
* function MyComponent(props) {
* return <div style={{ background: props.background }} />
* }
*
* addPropertyControls(MyComponent, {
* background: {
* type: ControlType.Color,
* defaultValue: "#fff",
* },
* })
* ```
*/
Color = "color",
/**
* @deprecated Please use {@link ControlType.ResponsiveImage}’s `src` field instead.
*/
Image = "image",
/**
* A control that allows the user to pick an image resource. Displayed as an image picker
* with associated file picker.
*
* The chosen image will be provided in the component props as an object with `src` and `srcSet` properties:
* - `src`: a string containing the URL of a full resolution image
* - `srcSet`: an optional string with scaled down image variants. This is typically passed into [`<img srcSet>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset)
* and helps the browser to load a smaller image when a full-size one isn’t necessary.
* - `alt`: an optional description of the image.
*
* @remarks
* ```javascript
* function MyComponent(props) {
* return <img src={props.image.src} srcSet={props.image.srcSet} alt={props.image.alt} />
* }
*
* addPropertyControls(MyComponent, {
* image: {
* type: ControlType.ResponsiveImage,
* }
* })
* ```
*/
ResponsiveImage = "responsiveimage",
/**
* A control that allows the user to pick a file resource. It will be
* included in the component props as an URL string.
* Displayed as an file picker that will open a native file browser. The
* selected file will be provided as a fully qualified URL. The
* `allowedFileTypes` property must be provided to specify acceptable file
* types.
*
* @remarks
* ```javascript
* export function MyComponent(props) {
* return (
* <div>
* <video
* style={{ objectFit: "contain", props.width, props.height }}
* src={props.filepath}
* controls
* />
* </div>
* )
* }
*
* addPropertyControls(MyComponent, {
* filepath: {
* type: ControlType.File,
* allowedFileTypes: ["mov"],
* },
* })
* ```
*/
File = "file",
/**
* Deprecated, please use {@link ControlType.Slot} instead. The new slot type doesn't need to be
* nested within an array control if you want to allow for multiple slot items to be connected.
* By default the new slot type allows for an infinite amount of items. You can limit the amount
* of items by setting the `maxCount` property.
*
* @deprecated Please use {@link ControlType.Slot} instead.
*/
ComponentInstance = "componentinstance",
/**
* A control that references 1 to many other components on the canvas, included in the component
* props as a React node. This control by default allows any number of components to be linked,
* but this can be limited by setting the `maxCount` property.
*
* ```javascript
* export function MyComponent(props) {
* return <div>{props.children}</div>
* }
*
* addPropertyControls(MyComponent, {
* children: {
* type: ControlType.Slot,
* maxCount: 5,
* },
* })
* ```
*/
Slot = "slot",
/**
* A control that allows multiple values per `ControlType`, provided as an
* array via properties. For most control types this will be displayed as an
* additional section in the properties panel allowing as many fields to be
* provided as required.
*
* For a {@link ControlType.ComponentInstance} the Frame will also gain an
* additional outlet control on the Canvas that allows links to be created
* between frames.
*
* Group properties together by using an object control.
*
* For multiple {@link ControlType.FusedNumber} values, you can pass in an
* array of single values as the React default prop.
*
* ```javascript
* export function MyComponent(props) {
* const frames = props.images.map(image => <img src={image.src} style={{ width: "100%", height: "100%" }} />)
* return <div>{frames}</div>
* }
*
* // Add a repeatable image property control
* addPropertyControls(MyComponent, {
* images: {
* type: ControlType.Array,
* control: {
* type: ControlType.ResponsiveImage
* }
* },
* // Allow up to five items
* maxCount: 5,
* })
*
* // Add a multi-connector to your component to connect components on the canvas
* addPropertyControls(MyComponent, {
* children: {
* type: ControlType.Array,
* control: {
* type: ControlType.ComponentInstance
* },
* maxCount: 5,
* },
* })
*
* // Add a list of objects
* addPropertyControls(MyComponent, {
* myArray: {
* type: ControlType.Array,
* control: {
* type: ControlType.Object,
* controls: {
* title: { type: ControlType.String, defaultValue: "Employee" },
* avatar: { type: ControlType.ResponsiveImage },
* },
* },
* defaultValue: [
* { title: "Jorn" },
* { title: "Koen" },
* ],
* },
* })
*
* // For multiple values, you can pass in an array of single values as the React default prop.
* MyComponent.defaultProps = {
* paddings: [5, 10, 15],
* }
* ```
*
*/
Array = "array",
/**
* A control that exposes events in the prototyping panel within the Framer UI. When choosing an event from the prototyping panel, you can select from a list of actions to trigger.
*
* ```javascript
* export function MyComponent(props) {
* return <motion.div onTap={props.onTap} />
* }
*
* addPropertyControls(MyComponent, {
* onTap: {
* type: ControlType.EventHandler,
* },
* })
* ```
*/
EventHandler = "eventhandler",
/**
* A control that allows for editing Framer Motion transition options within the Framer UI.
*
* ```javascript
* export function MyComponent(props) {
* return (
* <motion.div
* animate={{ scale: 2 }}
* transition={props.transition}
* />
* )
* }
*
* addPropertyControls(MyComponent, {
* transition: {
* type: ControlType.Transition,
* },
* })
* ```
*/
Transition = "transition",
/**
* A control that allows for exposing shadows. The value will be provided as
* a string with valid CSS box-shadow values.
*
* ```javascript
* export function MyComponent(props) {
* return <motion.div style={{boxShadow: props.shadow}} />
* }
*
* addPropertyControls(MyComponent, {
* shadow: {
* type: ControlType.BoxShadow,
* }
* })
*/
BoxShadow = "boxshadow",
/**
* A control that allows for exposing web links.
*
* ```javascript
* export function MyComponent(props) {
* return <a href={props.link}>My Link</a>
* }
*
* addPropertyControls(MyComponent, {
* link: {
* type: ControlType.Link,
* }
* })
* ```
*/
Link = "link",
/**
* A control that allows for exposing dates. The value will be provided in toJSON() string format.
*
* ```javascript
* export function MyComponent(props) {
* const formattedDate = React.useMemo(() => {
* return new Date(props.date).toLocaleDateString()
* }, [props.date])
* return <div>{formattedDate}</div>
* }
*
* addPropertyControls(MyComponent, {
* date: {
* type: ControlType.Date,
* displayTime: true
* }
* })
* ```
*/
Date = "date",
/**
* A control that allows for grouping multiple properties as an object.
*
* ```javascript
* export function MyComponent(props) {
* return <div style={{ opacity: props.myObject.opacity, background: props.myObject.tint }} />
* }
*
* addPropertyControls(MyComponent, {
* myObject: {
* type: ControlType.Object,
* controls: {
* opacity: { type: ControlType.Number },
* tint: { type: ControlType.Color },
* }
* }
* })
* ```
*/
Object = "object",
/**
* A control that allows for selecting a font to be used in the component.
*
* ```javascript
* export function MyComponent(props) {
* return <div style={props.customFont} />
* }
*
* addPropertyControls(MyComponent, {
* customFont: {
* type: ControlType.Font,
* title: "Custom Font",
* defaultValue: {
* textAlign: "left", // or "right", or "center", or "justify"
* fontSize: 16, // or "16px", or "16rem"
* letterSpacing: 0.1, // or "0.1em", or "1px"
* lineHeight: 1.5, // or "1.5em", or "20px", or "150%"
* },
* defaultFontType: "sans-serif", // or "serif", or "monospace"
* defaultFontSize: "16px", // or "16rem", or "16pt"
* displayTextAlignment: true,
* displayFontSize: true,
* controls: "basic", // or "extended", to show more options
* }
* })
* ```
*/
Font = "font",
/**
* @public
* A control that represents a border.
*
* @remarks
* ```javascript
* function MyComponent(props) {
* return <div style={props.border} />
* }
*
* addPropertyControls(MyComponent, {
* border: {
* type: ControlType.Border,
* defaultValue: {
* borderWidth: 1,
* borderStyle: "solid",
* borderColor: "rgba(0, 0, 0, 0.5)",
* },
* }
* })
* ```
*/
Border = "border",
/**
* @public
* A control that allows specifying a web cursor that should be shown
* when mousing over the element assigned.
*/
Cursor = "cursor",
/**
* @public
* A control that represents CSS padding.
*
* @remarks
* ```javascript
* function MyComponent({ padding }) {
* return <div style={{ padding }} />
* }
*
* addPropertyControls(MyComponent, {
* padding: {
* type: ControlType.Padding,
* defaultValue: "8px",
* }
* })
*/
Padding = "padding",
/**
* @public
* A control that represents CSS border radius.
*
* @remarks
* ```javascript
* function MyComponent({ borderRadius }) {
* return <div style={{ borderRadius }} />
* }
*
* addPropertyControls(MyComponent, {
* borderRadius: {
* type: ControlType.BorderRadius,
* defaultValue: "16px",
* title: "Radius",
* }
* })
*/
BorderRadius = "borderradius",
/**
* A control that represents CSS gap.
*
* @remarks
* ```javascript
* function MyComponent({ gap }) {
* return <div style={{ gap, display: "grid" }} />
* }
*
* addPropertyControls(MyComponent, {
* gap: {
* type: ControlType.Gap,
* defaultValue: "8px",
* }
* })
*/
Gap = "gap",
/**
* @public
* A control that represents an id of a tracking event:
* - Lowercase letters (a-z) and numbers (0-9) only
* - Hyphens (-) as separators (no leading/trailing or consecutive hyphens)
* - Valid: "button-click", "form-submit", "video-play", "nav-item-1"
* - Invalid: "Button-Click", "form--submit", "-button-click", "button_utils"
*
*/
TrackingId = "trackingid",
}
/**
* @privateRemarks do no use separately from FrameProps
* @public
* */
export declare interface CSSTransformProperties extends MotionTransform {
/**
* Set the CSS transform `translateX` property.
* @remarks
* ```jsx
* <Frame x={100} />
* ```
* @public
*/
x: number | string | MotionValue<number | string>;
/**
* Set the CSS transform `translateY` property.
* @remarks
* ```jsx
* <Frame y={100} />
* ```
* @public
*/
y: number | string | MotionValue<number | string>;
/**
* Set the CSS transform `trans