framer
Version:
The Framer library is the code that drives Framer projects and components. It helps you build from simple interactive components to whole apps.
1,607 lines (1,525 loc) • 115 kB
TypeScript
/// <reference types="react" />
import { HTMLMotionProps } from 'framer-motion';
import { List } from 'immutable';
import { ListenerFn } from 'eventemitter3';
import { MotionStyle } from 'framer-motion';
import { MotionTransform } from 'framer-motion';
import { MotionValue } from 'framer-motion';
import { PanInfo } from 'framer-motion';
import * as React from 'react';
import { ReactNode } from 'react';
import { Record } from 'immutable';
/**
* 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.ComponentType<Props>, propertyControls: PropertyControls<Props>): void;
/* Excluded from this release type: addServerUrlToResourceProps */
/**
* Creates a Animatable object that can be animated. These objects can be passed into a {@link DeprecatedFrame} instead of a primitive like number
* and afterwards animated with {@link (animate:function)}.
* @remarks
* ```jsx
* const value = Animatable(0)
* animate(value, 100)
* ```
* @param value - Value to animate
* @returns Animatable value
* @public
* @deprecated Use {@link useMotionValue} instead
*/
export declare function Animatable<Value>(value: Value | Animatable<Value>): Animatable<Value>;
/**
* @public
* @deprecated Use {@link useMotionValue} instead
*/
export declare interface Animatable<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<Value>): void;
/**
* @public
*/
set(value: Value | Animatable<Value>, transaction?: TransactionId): void;
/* Excluded from this release type: finishTransaction */
}
/**
* @public
*/
export declare namespace Animatable {
/* Excluded from this release type: transaction */
/**
* @public
*/
export function getNumber(value: number | Animatable<number> | null | undefined, defaultValue?: number): number;
/* Excluded from this release type: get */
/* Excluded from this release type: objectToValues */
}
/** @public */
export declare type AnimatableObject<T> = {
[K in keyof T]: ToAnimatableOrValue<T[K]>;
};
/**
* Animate an {@link (Animatable:interface)} value to a new value.
* @remarks
* Recommended use is to use convenience functions from the `animate` namespace
* instead of passing an animator. Only use this for low-level animation tweaking.
*
* ```jsx
* const value = Animatable(0)
* animate(value, 100)
*
* const value = Animatable({x: 0, y: 0})
* animate(value, {x: 100, y: 100})
* ```
*
* @param from - The animatable value or object to start from
* @param to - Value to animate to
* @param animator - Animator class to use.
* @param options - Animation options
* @returns Instance of {@link FramerAnimation} that can be used to control the animation
* @public
* @deprecated Use the {@link MotionProps.animate} prop on {@link Frame} instead.
*/
export declare function animate<Value, Options>(from: Animatable<Value> | AnimatableObject<Value>, to: Value, animator?: AnimatorClass<Value, Options>, options?: Partial<Options & AnimationOptions<Value>>): FramerAnimation<Value, Options>;
/**
* @public
* @deprecated Use the {@link MotionProps.animate} prop on {@link Frame} instead.
*/
export declare namespace animate {
/**
* Animate value with a spring curve
* @remarks
* ```jsx
* const value = Animatable(0)
* animate.spring(value, 100, {tension: 100, friction: 100})
*
* animate.spring(value, 100, {dampingRatio: 0.5, duration: 1})
* ```
* @param from - Value to animate
* @param to - Value to animate to
* @param options - Options for the spring
* These can be either `tension`, `friction`, `velocity` and `tolerance` _or_ `dampingRatio`, `duration`, `velocity` and `mass`
* @returns Instance of {@link FramerAnimation} that can be used to control the animation
* @deprecated Use {@link MotionProps.animate} on {@link Frame} instead.
*/
export function spring<Value>(from: Animatable<Value> | AnimatableObject<Value>, to: Value, options?: Partial<SpringOptions & AnimationOptions<Value>>): FramerAnimation<Value, SpringOptions>;
/**
* Animate value with a bezier curve
* @remarks
* ```jsx
* const value = Animatable(0)
* animate.bezier(value, 100, {duration: 1, curve: Bezier.EaseIn})
*
* animate.bezier(value, 100, {duration: 1, curve: [0.3, 0.1, 0.4, 1]})
* ```
* @param from - Value to animate
* @param to - Value to animate to
* @param options - Options for the bezier curve
*
* - `duration` Duration of the animation
* - `curve` One of the `Bezier` enum values or an array with 4 control points
*
* @returns Instance of {@link FramerAnimation} that can be used to control the animation
* @deprecated Use {@link MotionProps.animate} on {@link Frame} instead.
*/
export function bezier<Value>(from: Animatable<Value> | AnimatableObject<Value>, to: Value, options?: Partial<BezierOptions & AnimationOptions<Value>>): FramerAnimation<Value, BezierOptions>;
/**
* Animate value with a linear animation
* @remarks
* ```jsx
* const value = Animatable(0)
* animate.linear(value, 100)
*
* animate.linear(value, 100, {duration: 1})
* ```
* @param from - Value to animate
* @param to - Value to animate to
* @param options - The options for the animation
*
* - `duration` - Duration of the animation
*
* @returns Instance of {@link FramerAnimation} that can be used to control the animation
* @deprecated Use {@link MotionProps.animate} on {@link Frame} instead.
*/
export function linear<Value>(from: Animatable<Value> | AnimatableObject<Value>, to: Value, options?: Partial<EaseOptions & AnimationOptions<Value>>): FramerAnimation<Value, BezierOptions>;
/**
* Animate value with a ease animation
* @remarks
* ```jsx
* const value = Animatable(0)
* animate.ease(value, 100)
*
* animate.ease(value, 100, {duration: 1})
* ```
* @param from - Value to animate
* @param to - Value to animate to
* @param options - The options for the animation
*
* - `duration` - Duration of the animation
*
* @returns Instance of {@link FramerAnimation} that can be used to control the animation
* @deprecated Use {@link MotionProps.animate} on {@link Frame} instead.
*/
export function ease<Value>(from: Animatable<Value> | AnimatableObject<Value>, to: Value, options?: Partial<EaseOptions & AnimationOptions<Value>>): FramerAnimation<Value, BezierOptions>;
/**
* Animate value with a ease in animation
* @remarks
* ```jsx
* const value = Animatable(0)
* animate.easeIn(value, 100)
*
* animate.easeIn(value, 100, {duration: 1})
* ```
* @param from - Value to animate
* @param to - Value to animate to
* @param options - The options for the animation
*
* - `duration` - Duration of the animation
*
* @returns Instance of {@link FramerAnimation} that can be used to control the animation
* @deprecated Use {@link MotionProps.animate} on {@link Frame} instead.
*/
export function easeIn<Value>(from: Animatable<Value> | AnimatableObject<Value>, to: Value, options?: Partial<EaseOptions & AnimationOptions<Value>>): FramerAnimation<Value, BezierOptions>;
/**
* Animate value with a ease out animation
* @remarks
* ```jsx
* const value = Animatable(0)
* animate.easeOut(value, 100)
*
* animate.easeOUt(value, 100, {duration: 1})
* ```
* @param from - Value to animate
* @param to - Value to animate to
* @param options - The options for the animation
*
* - `duration` - Duration of the animation
*
* @returns Instance of {@link FramerAnimation} that can be used to control the animation
* @deprecated Use {@link MotionProps.animate} on {@link Frame} instead.
*/
export function easeOut<Value>(from: Animatable<Value> | AnimatableObject<Value>, to: Value, options?: Partial<EaseOptions & AnimationOptions<Value>>): FramerAnimation<Value, BezierOptions>;
/**
* Animate value with a ease in out animation
* @remarks
* ```jsx
* const value = Animatable(0)
* animate.easeInOut(value, 100)
*
* animate.easeInOut(value, 100, {duration: 1})
* ```
* @param from - Value to animate
* @param to - Value to animate to
* @param options - The options for the animation
*
* - `duration` - Duration of the animation
*
* @returns Instance of {@link FramerAnimation} that can be used to control the animation
* @deprecated Use {@link MotionProps.animate} on {@link Frame} instead.
*/
export function easeInOut<Value>(from: Animatable<Value> | AnimatableObject<Value>, to: Value, options?: Partial<EaseOptions & AnimationOptions<Value>>): FramerAnimation<Value, BezierOptions>;
}
/* Excluded from this release type: AnimationDriver */
/**
* @public
*/
declare interface AnimationInterface {
/* Excluded from this release type: play */
cancel(): void;
/* Excluded from this release type: finish */
isFinished(): boolean;
}
/**
* @deprecated Use {@link FrameProps.transition} instead
*/
declare interface AnimationOptions<Value> extends InterpolationOptions {
/* Excluded from this release type: customInterpolation */
/* Excluded from this release type: precalculate */
}
/* Excluded from this release type: Animator */
/**
* @public
* @deprecated Use the `transition` prop instead
*/
declare interface AnimatorClass<Value, Options = any> {
/* Excluded from this release type: __new */
}
/* Excluded from this release type: AnyInterpolation */
/** @public */
export declare interface ArrayControlDescription<P = any> extends BaseControlDescription<P> {
type: ControlType.Array;
propertyControl: FlatControlDescription<P>;
maxCount?: number;
defaultValue?: any[];
}
/* Excluded from this release type: Axis */
declare type Background = Color | Gradient | BackgroundImage | MotionValue<string> | string;
declare interface BackgroundFilterProperties {
backgroundBlur: number;
}
declare interface BackgroundImage {
src: string;
pixelWidth?: number;
pixelHeight?: number;
intrinsicWidth?: number;
intrinsicHeight?: number;
fit?: ImageFit;
}
declare namespace BackgroundImage {
const isImageObject: (image: any) => image is object & 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;
}
declare interface BaseControlDescription<P = any> {
title?: string;
hidden?(props: P): 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;
/* Excluded from this release type: _border */
/* Excluded from this release type: _initialStyle */
/* Excluded from this release type: _overrideForwardingDescription */
}
/**
* @public
*/
declare enum Bezier {
Linear = "linear",
Ease = "ease",
EaseIn = "ease-in",
EaseOut = "ease-out",
EaseInOut = "ease-in-out"
}
/* Excluded from this release type: BezierAnimator */
declare interface BezierOptions {
curve: Curve;
duration: number;
}
declare type BlendingMode = "normal" | "multiply" | "screen" | "overlay" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "difference" | "exclusion" | "hue" | "saturation" | "color" | "luminosity";
declare interface BlendingProperties {
blendingMode: BlendingMode;
}
declare interface BooleanControlDescription<P = any> extends BaseControlDescription<P> {
type: ControlType.Boolean;
defaultValue?: boolean;
disabledTitle?: string;
enabledTitle?: string;
}
declare type BorderProperties = {
borderWidth: number | Partial<{
top: number;
bottom: number;
left: number;
right: number;
}>;
borderColor: string;
borderStyle: BorderStyle;
border?: string | MotionValue<string>;
};
declare type BorderStyle = "solid" | "dashed" | "dotted" | "double";
declare interface BoxShadow {
inset: boolean;
color: string;
x: number;
y: number;
blur: number;
spread: number;
}
declare namespace BoxShadow {
function is(shadow: any): shadow is BoxShadow;
function toCSS(shadow: BoxShadow): string;
}
declare interface BoxShadowProperties {
shadows: BoxShadow[];
}
/* Excluded from this release type: calcChildLayoutRects */
/** @public */
export declare type Cancel = () => void;
/* Excluded from this release type: CanvasStore */
declare interface Change<Value> {
value: Value;
oldValue?: Value;
}
/**
* 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: 100, l: 50})
* const blue = Color({h: 204, s: 100, l: 50, a: 1})
* ```
* @public
*/
export declare function Color(color: IncomingColor | Color | number, r?: number, g?: number, b?: number): Color;
/**
* @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;
}
/**
* @public
*/
export declare namespace Color {
/**
* Formats a Color object into a readable string for debugging.
*
* @remarks
* ```jsx
* const blue = Color("#0099FF")
*
* Color.inspect(blue)
* ```
*
* @param color - The Color object to format
* @param initialValue - A canonical hex string to be used instead of an rgba() value.
*/
export function inspect(color: Color, initialValue?: string): string;
/**
* Checks if the value is a valid color object or color string. Returns true or false.
*
* @remarks
* ```jsx
* Color.isColor("#0099FF") // true
* Color.isColor(Color("#0099FF")) // true
* ```
*
* @param color - The potential color value to validate
*/
export function isColor(color: string | Color): boolean;
/**
* Checks if the value is a valid color string. Returns true or false.
*
* @remarks
* ```jsx
* Color.isColorString("#0099FF") // true
* ```
*
* @param color - A string representing a color
*/
export function isColorString(colorString: string | object): boolean;
/**
* Checks if the value is a valid Color object. Returns true or false.
*
* @remarks
* ```jsx
* const blue = Color("#0099FF")
*
* Color.isColorObject(blue) // true
* Color.isColorObject("#0099FF") // false
* ```
*
* @param color - An object representing a color.
*/
export function isColorObject(color: any): color is object & Color;
/**
* Formats a Color instance into an RGB string.
*
* @remarks
* ```jsx
* const blue = Color("#0099FF")
*
* Color.toString(blue) // "rgb(0, 153, 255)"
* ```
*
* @param color - The color to format
*/
export function toString(color: Color): string;
/**
* Formats a Color instance into an hexidecimal value.
*
* @remarks
* ```jsx
* const blue = Color("#0099FF")
*
* Color.toHex(blue) // "0099FF"
* Color.toHex(Color("#FFAAFF"), true) // "FAF"
* ```
*
* @param color - The color to format
* @param allow3Char - If true will return short hand colors if possible (defaults to false).
*/
export function toHex(color: Color, allow3Char?: boolean): string;
/**
* Formats a Color instance into an hexidecimal string.
*
* @remarks
* ```jsx
* const blue = Color("#0099FF")
*
* Color.toHexString(blue) // "#0099FF"
* Color.toHexString(Color("#FFAAFF"), true) // "#FAF"
* ```
*
* @param color - The color to format
* @param allow3Char - If true will return short hand colors if possible (defaults to false).
*/
export function toHexString(color: Color, allow3Char?: boolean): string;
/**
* Formats a Color instance into an RGB string.
*
* @remarks
* ```jsx
* const blue = Color("#0099FF")
*
* Color.toRgbString(blue) // "rgb(0, 153, 255)"
* ```
*
* @param color - The color to format
*/
export function toRgbString(color: Color): string;
/**
* Formats a Color instance into an HUSL object.
*
* @remarks
* ```jsx
* const blue = Color("#0099FF")
*
* Color.toHusl(blue) // {h: 250, s: 100, l: 50, a: 1}
* ```
*
* @param color - The color to format
*/
export function toHusl(color: Color): ColorHSLA;
/**
* Formats a Color instance into an HSL string.
*
* @remarks
* ```jsx
* const blue = Color("#0099FF")
*
* Color.toHslString(blue) // "hsl(204, 100%, 50%)"
* ```
*
* @param color - The color to format
*/
export function toHslString(color: Color): string;
/**
* Formats a Color instance into an HSV object.
*
* @remarks
* ```jsx
* const blue = Color("#0099FF")
*
* Color.toHsv(blue) // {h: 204, s: 1, v: 1, a: 1}"
* ```
*
* @param color - The color to format
*/
export function toHsv(color: Color): ColorHSVA;
/**
* Formats a Color instance into an HSV string.
*
* @remarks
* ```jsx
* const blue = Color("#0099FF")
*
* Color.toHslString(blue) // "hsv(204, 100%, 50%)"
* ```
*
* @param color - The color to format
*/
export function toHsvString(color: Color): string;
/**
* Formats a Color instance into {@link https://css-tricks.com/snippets/css/named-colors-and-hex-equivalents/ | CSS name}
* or returns false if unspecified.
*
* @remarks
* ```jsx
* const green = Color("#8FBC8F")
*
* Color.toName(green) // "darkseagreen"
* ```
*
* @param color - The color to format
*/
export function toName(color: Color): string | false;
/**
* Formats a color into an HSL object.
*
* @remarks
* ```jsx
* const blue = Color("#0099FF")
*
* Color.toHsl(blue) // {h: 204, s: 1, l: 0.5, a: 1}
* ```
*
* @param color - The color to format
*/
export function toHsl(color: Color): ColorHSLA;
/**
* Formats a color into an RGB object.
*
* @remarks
* ```jsx
* const blue = Color("#0099FF")
*
* Color.toRgb(blue) // {r: 40, g: 175, b: 250, a: 1}
* ```
*
* @param color - The color to format
*/
export function toRgb(color: Color): ColorRGBA;
/**
* Returns a brightened color.
*
* @remarks
* ```jsx
* const blue = Color("#0099FF")
* const brightblue = Color.lighten(blue, 20)
* ```
*
* @param color - The color to brighten
* @param amount - A number, from 0 to 100. Set to 10 by default.
*/
export function brighten(color: Color, amount?: number): Color;
/**
* Add white and return a lightened color.
*
* @remarks
* ```jsx
* const blue = Color("#0099FF")
* const lightblue = Color.lighten(blue, 20)
* ```
*
* @param color - The color to lighten
* @param amount - A number, from 0 to 100. Set to 10 by default.
*/
export function lighten(color: Color, amount?: number): Color;
/**
* Add black and return a darkened color.
*
* @remarks
* ```jsx
* const blue = Color("#0099FF")
* const darkblue = Color.darken(blue, 20)
* ```
* @param color - The color to darken.
* @param amount - A number, from 0 to 100. Set to 10 by default.
*/
export function darken(color: Color, amount?: number): Color;
/**
* Increase the saturation of a color.
*
* @remarks
* ```jsx
* const blue = Color("#0099FF")
* const saturated = Color.saturate(blue, 100)
* ```
* @param color - The color to modify
* @param amount - A number from 0 to 100. Set to 10 by default.
*/
export function saturate(color: Color, amount?: number): Color;
/**
* Decrease the saturation of a color.
*
* @remarks
* ```jsx
* const blue = Color("#0099FF")
* const desaturated = Color.desaturate(blue, 100)
* ```
* @param color - The color to modify
* @param amount - A number from 0 to 100. Set to 10 by default.
*/
export function desaturate(color: Color, amount?: number): Color;
/**
* Return a fully desaturated color.
*
* @remarks
* ```jsx
* const blue = Color("#0099FF")
* const gray = Color.grayscale(blue)
* ```
* @param color - The color to convert.
*/
export function grayscale(color: Color): Color;
/**
* Returns a new color for the rotated hue.
* @param color - The color to manipulate
* @param angle - The angle in degrees in which to rotate the hue.
*/
export function hueRotate(color: Color, angle: number): Color;
/**
* Set the alpha value, also known as opacity, of the color.
*
* @remarks
* ```jsx
* const blue = Color("#0099FF")
*
* const transparent = Color.alpha(blue, 0.1)
* ```
* @param color - The original color to modify.
* @param alpha - A number from 1 to 0. Set to 1 by default.
*/
export function alpha(color: Color, a?: number): Color;
/**
* Set the alpha value, also known as opacity, of the color to zero.
*
* @remarks
* ```jsx
* const blue = Color("#0099FF")
*
* const transparent = Color.alpha(blue)
* ```
* @param color - The original color to modify.
*/
export function transparent(color: Color): Color;
/**
* Change the alpha value, also know as opacity, by a multiplier.
*
* @remarks
* ```jsx
* const blue = Color("#0099FF")
* const transparent = Color.multiplyAlpha(blue, 0.5)
* ```
* @param color - The original color to modify.
* @param alphaValue - A number between 1 and 0, defaults to 1,
*/
export function multiplyAlpha(color: Color, alphaValue?: number): Color;
/**
* Returns a function that can be used to transition a color from one value
* to another. By default this will use the RGB `mix` model. Useful for providing to animation tools.
*
* ```jsx
* const blend = Color.interpolate(Color("red"), Color("blue"))
*
* blend(0) // Initial state (red)
* blend(0.5) // Mid state (purple)
* blend(1) // Final state (blue)
* ```
* @param colorA - The starting color
* @param colorB - The final color
* @param model - The model to use for the mix. One of {@link ColorMixModelType}
*/
export function interpolate(colorA: Color, colorB: Color, model?: ColorMixModelType): (progress: number) => Color;
/**
* Create a function that will mix two colors together and output the result as an rgb string.
*
* @param colorA - The starting color
* @param colorB - The final color
* @param options - Options for the color mixer
*
* - `model`: The model to use for the mix. One of {@link ColorMixModelType}
*
* @public
*/
export function mix(from: Color, toColor: Color, { model }?: {
model?: ColorMixModelType | undefined;
}): (p: number) => string;
/**
* Blend two colors together, optionally based on user input. The fraction defines the
* distribution between the two colors, and is set to 0.5 by default.
* The `limit` defines if the color can transition beyond its range.
* @remarks
* ```jsx
* // Mix red with yellow
* const orange = Color.mix("red", "yellow", 0.5)
* ```
*
* ```jsx
* Color.mix("red", "yellow", 0.5, true, "husl")
* ```
*
* @param colorA - A color, the first one.
* @param colorB - A color, the second one.
* @param fraction - An optional number, from 0 to 1, set to 0.5 by default.
* @param limit - An optional boolean, set to false by default.
* @param model - The model to use for the mix. One of {@link ColorMixModelType}
*/
export function mixAsColor(colorA: Color, colorB: Color, fraction?: number, limit?: boolean, model?: ColorMixModelType): Color | null;
/**
* Returns a Color instance with a random color value set.
*
* @remarks
* ```jsx
* const random = Color.random()
* ```
*
* @param alphaValue - An optional alpha value, set to 1 by default.
*/
export function random(alphaValue?: number): Color;
/**
* Creates a greyscale color.
*
* @remarks
* ```jsx
* const gray = Color.gray(0.5)
* ```
*
* @param amount - A number from 0 to 1 representing the amount of white.
* @param alphaValue - A number from 0 to 1 representing the alpha. Set to 1 by default.
*/
export function grey(amount?: number, alphaValue?: number): Color;
/* Excluded from this release type: gray */
/* Excluded from this release type: rgbToHsl */
/* Excluded from this release type: isValidColorProperty */
/**
* Calculates the color difference using {@link https://en.wikipedia.org/wiki/Color_difference#Euclidean |
* Euclidean distance fitting human perception}. Returns a value between 0 and 765
* @param colorA - A first color.
* @param colorB - A second color.
*/
export function difference(colorA: Color, colorB: Color): number;
/**
* Checks whether two Color objects are equal.
*
* @remarks
* ```jsx
* Color.equal(Color("red"), Color("red")) // true
* Color.equal(Color("red"), Color("blue")) // false
*
* Color.equal(Color("#0099FF"), Color("009AFF")) // false
* Color.equal(Color("#0099FF"), Color("009AFF"), 2) // true
* ```
*
* @param colorA - The first color
* @param colorB - The second color
* @param tolerance - A tolerance for the difference between rgba values. Set to 0.1 by default.
*/
export function equal(colorA: Color, colorB: Color, tolerance?: number): boolean;
}
declare interface ColorControlDescription<P = any> extends BaseControlDescription<P> {
type: ControlType.Color;
defaultValue?: string;
}
declare enum ColorFormat {
RGB = "rgb",
HSL = "hsl",
HSV = "hsv",
HEX = "hex",
NAME = "name"
}
declare interface ColorHSL {
h: number;
s: number;
l: number;
}
declare type ColorHSLA = ColorHSL & {
a: number;
};
declare interface ColorHSV {
h: number;
s: number;
v: number;
}
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"
}
declare interface ColorMixOptions {
model?: ColorMixModelType;
}
declare interface ColorRGB {
r: number;
g: number;
b: number;
}
declare type ColorRGBA = ColorRGB & {
a: number;
};
/* Excluded from this release type: ComponentContainer */
/* Excluded from this release type: ComponentContainerProperties */
/* Excluded from this release type: ComponentContainerProps */
/* Excluded from this release type: ComponentContainerState */
/* Excluded from this release type: ComponentDefinition */
/* Excluded from this release type: ComponentIdentifier */
declare interface ComponentInstanceDescription<P = any> extends BaseControlDescription<P> {
type: ControlType.ComponentInstance;
}
/* Excluded from this release type: ComponentLoader */
/* Excluded from this release type: componentLoader */
/* Excluded from this release type: ComponentMap */
/* Excluded from this release type: ComponentType */
declare type ConstraintAuto = "auto";
declare interface ConstraintConfiguration {
/* Excluded from this release type: _constraints */
}
/**
* Dimensions can be numbers or strings: percentages, fractions of free space (fr), or auto
* @public
*/
declare type ConstraintDimension = Animatable<number> | number | ConstraintPercentage | ConstraintAuto | ConstraintFreespaceFraction;
declare type ConstraintFreespaceFraction = string;
declare type ConstraintPercentage = string;
/**
* These properties are used to layout elements within Framer’s constraint system.
* @internalRemarks Represents model property values for layout constraints. These may be internally inconsistent. Mask and Values are generated from these.
* @public
* */
declare interface ConstraintProperties extends Partial<WithFractionOfFreeSpace> {
/* Excluded from this release type: parentSize */
/**
* Pinned position from left
* @public
*/
left: Animatable<number> | number | null;
/**
* Pinned position from right
* @public
*/
right: Animatable<number> | number | null;
/**
* Pinned position from top
* @public
*/
top: Animatable<number> | number | null;
/**
* Pinned position from bottom
* @public
*/
bottom: Animatable<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;
}
/* Excluded from this release type: constraintsEnabled */
/** @public */
export declare type ControlDescription<P = any> = NumberControlDescription<P> | EnumControlDescription<P> | BooleanControlDescription<P> | StringControlDescription<P> | ColorControlDescription<P> | FusedNumberControlDescription<P> | SegmentedEnumControlDescription<P> | ImageControlDescription<P> | FileControlDescription<P> | ComponentInstanceDescription<P> | ArrayControlDescription<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
* addPropertyControls(MyComponent, {
* text: {
* type: ControlType.String,
* title: "Text",
* hidden: (props) => true
* },
* }
* ```
* @public
*/
export declare const enum ControlType {
/**
* A property 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
* addPropertyControls(MyComponent, {
* isCentered: {
* type: ControlType.Boolean,
* title: "Center",
* defaultValue: true,
* enabledTitle: "On",
* disabledTitle: "Off",
* },
* })
* ```
*/
Boolean = "boolean",
/**
* A property 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 provided to include a stepper control instead.
*
* @remarks
* ```javascript
* addPropertyControls(MyComponent, {
* offset: {
* type: ControlType.Number,
* defaultValue: 5,
* min: 0,
* max: 10,
* unit: "px",
* step: 0.1,
* displayStepper: true,
* },
* })
* ```
*/
Number = "number",
/**
* A property control that accepts plain text values. This will be provided directly as a property.
* Will display an input field with an optional placeholder value.
*
* @remarks
* ```javascript
* addPropertyControls(MyComponent, {
* offset: {
* type: ControlType.String,
* defaultValue: "Framer X",
* placeholder: "Type something…",
* },
* }
* ```
*/
String = "string",
/**
* A property 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.
*
* ```javascript
* addPropertyControls(MyComponent, {
* title: {
* type: ControlType.FusedNumber,
* defaultValue: 0,
* toggleKey: "isPerSide",
* valueKeys: ["top", "left", "right", "bottom"],
* valueLabels: ["T", "L", "R", "B"],
* min: 0,
* },
* })
* ```
*/
FusedNumber = "fusednumber",
/**
* A property control that represents a list of options. 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.
*
* ```javascript
* addPropertyControls(MyComponent, {
* value: {
* type: ControlType.Enum,
* defaultValue: "a",
* options: ["a", "b", "c"],
* optionTitles: ["Option A", "Option B", "Option C"],
* },
* })
* ```
*/
Enum = "enum",
/**
* A property control that represents a list of option. The selected option will be provided as a property.
* This control is displayed as a segmented control. Otherwise, it behaves exactly the
* same as {@link ControlType.Enum}.
*
* @remarks
* ```javascript
* addPropertyControls(MyComponent, {
* value: {
* type: ControlType.SegmentedEnum,
* defaultValue: "a",
* options: ["a", "b", "c"],
* optionTitles: ["Option A", "Option B", "Option C"],
* },
* })
* ```
*/
SegmentedEnum = "segmentedenum",
/**
* A property control that represents a color value. It will be provided as a string via properties.
* 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
* addPropertyControls(MyComponent, {
* background: {
* type: ControlType.Color,
* defaultValue: "#fff",
* },
* })
* ```
*/
Color = "color",
/**
* A property control that represents an image resource. It will be provided as an URL via properties.
* Displayed as an image picker with associated file picker. The chosen asset
* will be provided as a fully qualified URL.
*
* @remarks
* ```jsx
* addPropertyControls(MyComponent, {
* avatar: {
* type: ControlType.Image,
* }
* })
* ```
*/
Image = "image",
/**
* A property control that represents a resource. It will be provided as an URL via properties.
* 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
* addPropertyControls(MyComponent, {
* asset: {
* type: ControlType.File,
* allowedFileTypes: ["pdf"],
* },
* })
* ```
*/
File = "file",
/**
* A property control that references to another components on the canvas, provided via a property.
* The component will have an outlet to allow linking to other Frames.
* Available Frames will also be displayed in a dropdown menu in the
* properties panel. The component reference will be provided as a property.
* As a convention, the name for the property is usually just `children`.
*
* Multiple components can be linked by combining the `ComponentInstance`
* type with the {@link ControlType.Array}.
*
* ```javascript
* addPropertyControls(MyComponent, {
* children: {
* type: ControlType.ComponentInstance,
* },
* })
* ```
*/
ComponentInstance = "componentinstance",
/**
* A property 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.
*
* ```javascript
* addPropertyControls(MyComponent, {
* images: {
* type: ControlType.Array,
* propertyControl: {
* type: ControlType.Image
* }
* },
* children: {
* type: ControlType.Array,
* propertyControl: {
* type: ControlType.ComponentInstance
* }
* },
* })
* ```
*/
Array = "array"
}
/* Excluded from this release type: ConvertColor */
/* Excluded from this release type: createDesignComponent */
/**
* @internalremarks 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 `translateZ` property.
* @remarks
* ```jsx
* <Frame z={100} />
* ```
* @public
*/
z: number | string | MotionValue<number | string>;
/**
* Set the CSS transform `rotate` property in degrees.
* @remarks
* ```jsx
* <Frame rotate={45}/>
* ```
* @public
*/
rotate: number | string | MotionValue<number | string>;
/**
* Set the CSS transform `rotateX` property in degrees.
* @remarks
* ```jsx
* <Frame rotateX={45}/>
* ```
* @public
*/
rotateX: number | string | MotionValue<number | string>;
/**
* Set the CSS transform `rotateY` property in degrees.
* @remarks
* ```jsx
* <Frame rotateY={45}/>
* ```
* @public
*/
rotateY: number | string | MotionValue<number | string>;
/**
* Set the CSS transform `rotateZ` property in degrees.
* @remarks
* ```jsx
* <Frame rotateZ={45}/>
* ```
* @public
*/
rotateZ: number | string | MotionValue<number | string>;
/**
* Set the CSS transform `scale` property.
* @remarks
* ```jsx
* <Frame scale={1.5} />
* ```
* @public
*/
scale: number | string | MotionValue<number | string>;
/**
* Set the CSS transform `scaleX` property.
* @remarks
* ```jsx
* <Frame scaleX={1.5} />
* ```
* @public
*/
scaleX: number | string | MotionValue<number | string>;
/**
* Set the CSS transform `scaleY` property.
* @remarks
* ```jsx
* <Frame scaleY={2} />
* ```
* @public
*/
scaleY: number | string | MotionValue<number | string>;
/**
* Set the CSS transform `skew` property in degrees.
* @remarks
* ```jsx
* <Frame skew={15} />
* ```
* @public
*/
skew: number | string | MotionValue<number | string>;
/**
* Set the CSS transform `skewX` property in degrees.
* @remarks
* ```jsx
* <Frame skewX={15} />
* ```
* @public
*/
skewX: number | string | MotionValue<number | string>;
/**
* Set the CSS transform `skewY` property in degrees.
* @remarks
* ```jsx
* <Frame skewY={15} />
* ```
* @public
*/
skewY: number | string | MotionValue<number | string>;
/**
* Set the CSS transform `originX` property.
* @remarks
* ```jsx
* <Frame originX={0.5} />
* ```
* @public
*/
originX: number | string | MotionValue<number | string>;
/**
* Set the CSS transform `originY` property.
* @remarks
* ```jsx
* <Frame originY={0.5} />
* ```
* @public
*/
originY: number | string | MotionValue<number | string>;
/**
* Set the CSS transform `originZ` property. Defaults to `px` units.
* @remarks
* ```jsx
* <Frame originZ={100} />
* ```
* @public
*/
originZ: number | string | MotionValue<number | string>;
/**
* Set the CSS perspective property.
* @remarks
* ```jsx
* <Frame perspective={500} />
* ```
* @public
*/
perspective: number | string | MotionValue<number | string>;
}
declare type Curve = ControlPoints | Bezier;
declare interface CustomConstraintProperties {
/**
* Aspect Ratio to keep when resizing
* @public
*/
aspectRatio?: number | null;
/**
* Used for Text and Graphics containers
* @public
*/
autoSize?: boolean;
/**
* Use Vekter constraint layout system, disable DOM layout
* @public
*/
enabled: boolean;
intrinsicWidth?: number;
intrinsicHeight?: number;
}
/* Excluded from this release type: CustomProperties */
/* Excluded from this release type: CustomPropertiesContext */
/**
* Takes a CSS variable and attempts to lookup the value. Useful for retrieving
* the original value when provided with a variable for animations or manipulation.
* @returns the value string or null if not found.
*/
declare type CustomPropertiesLookup = (variable: string) => string | null;
declare interface DampingDurationSpringOptions {
dampingRatio: number;
duration: number;
velocity: number;
mass: number;
}
/**
* Allows data to be shared between Frames using Code Overrides.
* Any changes to the `Data` instance will cause the preview to update and code
* overrides will re-render. In this example, we’re updating the `scale` property on `press`, setting it to `0.5`.
* ```jsx
* import { Data, Override } from "framer"
*
* const data = Data({
* scale: 0.5,
* })
*
* export function WhileTap(): Override {
* return {
* whileTap: {
* scale: data.scale,
* },
* }
* }
*
* ```
* @param initial - The initial value of the data to be set.
* @returns the data object for use across compon