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,581 lines (1,480 loc) • 139 kB
TypeScript
/// <reference types="google.fonts" />
/// <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';
import { RefObject } from 'react';
import { Spring } from 'framer-motion';
import { Transition } from 'framer-motion';
import { Tween } from 'framer-motion';
import { useDeprecatedInvertedScale as useInvertedScale } from 'framer-motion';
import { Variants } from 'framer-motion';
/* Excluded from this release type: Action */
/* Excluded from this release type: ActionControlDescription */
/* Excluded from this release type: ActionControls */
/* Excluded from this release type: ActionHandler */
/* Excluded from this release type: ActionInfo */
declare interface ActionMap<State> {
[key: string]: (state: State, data?: any) => State;
}
/* Excluded from this release type: addActionControls */
/**
* 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;
/**
* 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 a single value or a `MotionValue`.
*
* The first argument is either a `MotionValue` to animate, or an initial animation value.
*
* The second is either a value to animate to, or an array of keyframes to animate through.
*
* The third argument can be either tween or spring options, and optional lifecycle methods: `onUpdate`, `onPlay`, `onComplete`, `onRepeat` and `onStop`.
*
* Returns `PlaybackControls`, currently just a `stop` method.
*
* ```javascript
* const x = useMotionValue(0)
*
* useEffect(() => {
* const controls = animate(x, 100, {
* type: "spring",
* stiffness: 2000,
* onComplete: v => {}
* })
*
* return controls.stop
* })
* ```
*
* @public
*
* @deprecated
*/
export declare function animate<Value, Options>(from: DeprecatedAnimationTarget<Value>, to: Value, animator?: AnimatorClass<Value, Options>, options?: Partial<Options & DeprecatedAnimationOptions<Value>>): FramerAnimation<Value, Options>;
/** @public */
export declare function animate<V>(from: MotionValue<V> | V, to: V | V[], transition?: AnimationOptions<V>): PlaybackControls;
/**
* @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: DeprecatedAnimationTarget<Value>, to: Value, options?: Partial<SpringOptions & DeprecatedAnimationOptions<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: DeprecatedAnimationTarget<Value>, to: Value, options?: Partial<BezierOptions & DeprecatedAnimationOptions<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: DeprecatedAnimationTarget<Value>, to: Value, options?: Partial<EaseOptions & DeprecatedAnimationOptions<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: DeprecatedAnimationTarget<Value>, to: Value, options?: Partial<EaseOptions & DeprecatedAnimationOptions<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: DeprecatedAnimationTarget<Value>, to: Value, options?: Partial<EaseOptions & DeprecatedAnimationOptions<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: DeprecatedAnimationTarget<Value>, to: Value, options?: Partial<EaseOptions & DeprecatedAnimationOptions<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: DeprecatedAnimationTarget<Value>, to: Value, options?: Partial<EaseOptions & DeprecatedAnimationOptions<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;
}
declare type AnimationOptions<V> = (Tween | Spring) & PlaybackLifecycles<V> & {
delay?: number;
type?: "tween" | "spring";
};
declare type AnimationOptions_2 = (Tween | Spring) & {
delay?: number;
type?: "tween" | "spring";
};
/* 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: annotateTypeOnStringify */
/* Excluded from this release type: AnyInterpolation */
/** @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
*/
export declare type ArrayItemControlDescription<P = any> = Omit<NumberControlDescription<P>, "hidden"> | Omit<EnumControlDescription<P>, "hidden"> | Omit<BooleanControlDescription<P>, "hidden"> | Omit<StringControlDescription<P>, "hidden"> | Omit<ColorControlDescription<P>, "hidden"> | Omit<FusedNumberControlDescription<P>, "hidden"> | Omit<SegmentedEnumControlDescription<P>, "hidden"> | Omit<ImageControlDescription<P>, "hidden"> | Omit<FileControlDescription<P>, "hidden"> | Omit<ComponentInstanceDescription<P>, "hidden"> | Omit<TransitionControlDescription<P>, "hidden"> | Omit<ObjectControlDescription<P>, "hidden">;
/* Excluded from this release type: Asset */
/* Excluded from this release type: AssetContext */
/* Excluded from this release type: AssetProperties */
/* Excluded from this release type: AssetResolver */
/**
* 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.PropsWithChildren<{
enabled?: boolean;
}>): JSX.Element;
/* Excluded from this release type: Axis */
/** @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;
pixelWidth?: number;
pixelHeight?: number;
intrinsicWidth?: number;
intrinsicHeight?: number;
fit?: ImageFit;
}
/** @public */
export declare namespace BackgroundImage {
const isImageObject: (image: any) => image is object & BackgroundImage;
}
/* Excluded from this release type: backgroundImageFromProps */
/* Excluded from this release type: BackgroundImageProps */
/** @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;
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;
}
/** @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> {
type: ControlType.Boolean;
defaultValue?: boolean;
disabledTitle?: string;
enabledTitle?: string;
}
/* Excluded from this release type: BorderProperties */
/** @public */
export declare type BorderStyle = "solid" | "dashed" | "dotted" | "double";
declare type BoundActionMap<State, Actions extends ActionMap<State>> = {
[K in keyof Actions]: (data?: Parameters<Actions[K]>[1]) => void;
};
/** @public */
export declare interface BoxShadow {
inset: boolean;
color: string;
x: number;
y: number;
blur: number;
spread: number;
}
/** @public */
export declare namespace BoxShadow {
export function is(shadow: any): shadow is BoxShadow;
export function toCSS(shadow: BoxShadow): string;
}
/** @public */
export declare interface BoxShadowProperties {
shadows: Readonly<BoxShadow[]>;
}
declare interface BoxShadowProperties_2 {
shadows: Readonly<BoxShadow[]>;
}
/* Excluded from this release type: calculateRect */
/* Excluded from this release type: callEach */
/** @public */
export declare type Cancel = () => void;
/* Excluded from this release type: CanvasStore */
declare interface Change<Value> {
value: Value;
oldValue?: Value;
}
declare type ClassName = string | false | void | null | 0;
/* Excluded from this release type: CodeComponentPresentation */
/* Excluded from this release type: collectVisualStyleFromProps */
/**
* 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 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;
}
/** @public */
export declare interface ColorControlDescription<P = any> extends BaseControlDescription<P> {
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;
};
/* Excluded from this release type: ColorStop */
/* Excluded from this release type: CompactControlsDescription */
/* Excluded from this release type: ComponentContainer */
/* Excluded from this release type: ComponentContainerContext */
/* Excluded from this release type: ComponentContainerProperties */
/* Excluded from this release type: ComponentContainerProps */
/* Excluded from this release type: ComponentDefinition */
/* Excluded from this release type: ComponentIdentifier */
/** @public */
export declare interface ComponentInstanceDescription<P = any> extends BaseControlDescription<P> {
type: ControlType.ComponentInstance;
}
/* 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;
/* Excluded from this release type: ConstraintMask */
/** @public */
export 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
* */
export 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 */
/* Excluded from this release type: ConstraintValues */
/* Excluded from this release type: ConstraintValuesBase */
/* Excluded from this release type: ContainerKey */
/** @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> | EventHandlerControlDescription<P> | TransitionControlDescription<P> | ObjectControlDescription<P>;
/* Excluded from this release type: ControlIcon */
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 <Frame size={"100%"}>{title}</Frame>
* }
*
* addPropertyControls(MyComponent, {
* title: {
* type: ControlType.String,
* title: "Title",
* hidden: (props) => true
* },
* }
* ```
* @public
*/
export declare const 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 <Frame size={"100%"}>{props.showText ? "Hello World" : null}</Frame>
* }
*
* 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 <Frame rotateZ={props.rotation} size={"100%"}>{rotation}</Frame>
* }
*
* 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 <Frame>{props.title} — {props.body}</Frame>
* }
*
* 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",
/**
* 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`.
*
*
* ```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 <Frame background={"red"} borderRadius={borderRadius} size={"100%"}></Frame>
* }
*
* 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 <Frame background={colors[value]} size={"100%"}>{value}</Frame>
* }
*
* 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 <Frame background={colors[value]} size={"100%"}>{value}</Frame>
* }
*
* 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 <Frame background={props.background} size={"100%"} />
* }
*
* addPropertyControls(MyComponent, {
* background: {
* type: ControlType.Color,
* defaultValue: "#fff",
* },
* })
* ```
*/
Color = "color",
/**
* A control that allows the user to pick an image resource. It will
* be included in the component props as an URL string.
* Displayed as an image picker with associated file picker. The chosen asset
* will be provided as a fully qualified URL.
*
* @remarks
* ```jsx
* function MyComponent(props) {
* return <Frame image={props.image} size={"100%"} />
* }
*
* addPropertyControls(MyComponent, {
* image: {
* type: ControlType.Image,
* }
* })
* ```
*/
Image = "image",
/**
* 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 (
* <Frame size={"100%"}>
* <video
* style={{ objectFit: "contain", props.width, props.height }}
* src={props.filepath}
* controls
* />
* </Frame>
* )
* }
*
* addPropertyControls(MyComponent, {
* filepath: {
* type: ControlType.File,
* allowedFileTypes: ["mov"],
* },
* })
* ```
*/
File = "file",
/**
* A control that references to another component on the canvas,
* included in the component props as a React node.
* 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
* export function MyComponent(props) {
* return <Stack size={"100%"}>{props.children}</Stack>
* }
*
* addPropertyControls(MyComponent, {
* children: {
* type: ControlType.ComponentInstance,
* },
* })
* ```
*/
ComponentInstance = "componentinstance",
/**
* 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.
*
* 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 => <Frame image={image} width={"1fr"} height={"1fr"} />)
* return