app-studio 0.1.44 → 0.2.2

package/dist/components/Animation.d.ts

@@ -0,0 +1,633 @@
+export declare const fadeIn: (duration?: string, timingFunction?: string) => {
+    from: {
+        opacity: number;
+    };
+    enter: {
+        opacity: number;
+    };
+    duration: string;
+    timingFunction: string;
+};
+export declare const fadeOut: (duration?: string, timingFunction?: string) => {
+    from: {
+        opacity: number;
+    };
+    enter: {
+        opacity: number;
+    };
+    duration: string;
+    timingFunction: string;
+};
+export declare const slideInLeft: (duration?: string, timingFunction?: string) => {
+    from: {
+        transform: string;
+    };
+    enter: {
+        transform: string;
+    };
+    duration: string;
+    timingFunction: string;
+};
+export declare const slideInRight: (duration?: string, timingFunction?: string) => {
+    from: {
+        transform: string;
+    };
+    enter: {
+        transform: string;
+    };
+    duration: string;
+    timingFunction: string;
+};
+export declare const slideInDown: (duration?: string, timingFunction?: string) => {
+    from: {
+        transform: string;
+    };
+    enter: {
+        transform: string;
+    };
+    duration: string;
+    timingFunction: string;
+};
+export declare const slideInUp: (duration?: string, timingFunction?: string) => {
+    from: {
+        transform: string;
+    };
+    enter: {
+        transform: string;
+    };
+    duration: string;
+    timingFunction: string;
+};
+export declare const bounce: (duration?: string, timingFunction?: string, iterationCount?: string) => {
+    from: {
+        transform: string;
+    };
+    '20%': {
+        transform: string;
+    };
+    '40%': {
+        transform: string;
+    };
+    '60%': {
+        transform: string;
+    };
+    '80%': {
+        transform: string;
+    };
+    enter: {
+        transform: string;
+    };
+    duration: string;
+    timingFunction: string;
+    iterationCount: string;
+};
+export declare const rotate: (duration?: string, timingFunction?: string, iterationCount?: string) => {
+    from: {
+        transform: string;
+    };
+    enter: {
+        transform: string;
+    };
+    duration: string;
+    timingFunction: string;
+    iterationCount: string;
+};
+export declare const pulse: (duration?: string, timingFunction?: string, iterationCount?: string) => {
+    from: {
+        transform: string;
+    };
+    '50%': {
+        transform: string;
+    };
+    enter: {
+        transform: string;
+    };
+    duration: string;
+    timingFunction: string;
+    iterationCount: string;
+};
+export declare const zoomIn: (duration?: string, timingFunction?: string) => {
+    from: {
+        transform: string;
+    };
+    enter: {
+        transform: string;
+    };
+    duration: string;
+    timingFunction: string;
+};
+export declare const zoomOut: (duration?: string, timingFunction?: string) => {
+    from: {
+        transform: string;
+    };
+    enter: {
+        transform: string;
+    };
+    duration: string;
+    timingFunction: string;
+};
+export declare const flash: (duration?: string, iterationCount?: string) => {
+    from: {
+        opacity: number;
+    };
+    '50%': {
+        opacity: number;
+    };
+    enter: {
+        opacity: number;
+    };
+    duration: string;
+    iterationCount: string;
+};
+export declare const shake: (duration?: string, iterationCount?: string) => {
+    from: {
+        transform: string;
+    };
+    '10%': {
+        transform: string;
+    };
+    '20%': {
+        transform: string;
+    };
+    '30%': {
+        transform: string;
+    };
+    '40%': {
+        transform: string;
+    };
+    '50%': {
+        transform: string;
+    };
+    '60%': {
+        transform: string;
+    };
+    '70%': {
+        transform: string;
+    };
+    '80%': {
+        transform: string;
+    };
+    '90%': {
+        transform: string;
+    };
+    enter: {
+        transform: string;
+    };
+    duration: string;
+    iterationCount: string;
+};
+export declare const swing: (duration?: string, iterationCount?: string) => {
+    from: {
+        transform: string;
+    };
+    '20%': {
+        transform: string;
+    };
+    '40%': {
+        transform: string;
+    };
+    '60%': {
+        transform: string;
+    };
+    '80%': {
+        transform: string;
+    };
+    enter: {
+        transform: string;
+    };
+    duration: string;
+    iterationCount: string;
+};
+export declare const rubberBand: (duration?: string, timingFunction?: string) => {
+    from: {
+        transform: string;
+    };
+    '30%': {
+        transform: string;
+    };
+    '40%': {
+        transform: string;
+    };
+    '50%': {
+        transform: string;
+    };
+    '65%': {
+        transform: string;
+    };
+    '75%': {
+        transform: string;
+    };
+    enter: {
+        transform: string;
+    };
+    duration: string;
+    timingFunction: string;
+};
+export declare const wobble: (duration?: string) => {
+    from: {
+        transform: string;
+    };
+    '15%': {
+        transform: string;
+    };
+    '30%': {
+        transform: string;
+    };
+    '45%': {
+        transform: string;
+    };
+    '60%': {
+        transform: string;
+    };
+    '75%': {
+        transform: string;
+    };
+    enter: {
+        transform: string;
+    };
+    duration: string;
+};
+export declare const flip: (duration?: string) => {
+    from: {
+        transform: string;
+    };
+    '40%': {
+        transform: string;
+    };
+    enter: {
+        transform: string;
+    };
+    duration: string;
+};
+export declare const heartBeat: (duration?: string, iterationCount?: string) => {
+    from: {
+        transform: string;
+    };
+    '14%': {
+        transform: string;
+    };
+    '28%': {
+        transform: string;
+    };
+    '42%': {
+        transform: string;
+    };
+    '70%': {
+        transform: string;
+    };
+    enter: {
+        transform: string;
+    };
+    duration: string;
+    iterationCount: string;
+};
+export declare const rollIn: (duration?: string) => {
+    from: {
+        opacity: number;
+        transform: string;
+    };
+    enter: {
+        opacity: number;
+        transform: string;
+    };
+    duration: string;
+};
+export declare const rollOut: (duration?: string) => {
+    from: {
+        opacity: number;
+        transform: string;
+    };
+    enter: {
+        opacity: number;
+        transform: string;
+    };
+    duration: string;
+};
+export declare const lightSpeedIn: (duration?: string, timingFunction?: string) => {
+    from: {
+        transform: string;
+        opacity: number;
+    };
+    '60%': {
+        transform: string;
+        opacity: number;
+    };
+    '80%': {
+        transform: string;
+    };
+    enter: {
+        transform: string;
+        opacity: number;
+    };
+    duration: string;
+    timingFunction: string;
+};
+export declare const lightSpeedOut: (duration?: string, timingFunction?: string) => {
+    from: {
+        opacity: number;
+    };
+    '20%': {
+        opacity: number;
+        transform: string;
+    };
+    enter: {
+        opacity: number;
+        transform: string;
+    };
+    duration: string;
+    timingFunction: string;
+};
+export declare const hinge: (duration?: string, timingFunction?: string) => {
+    from: {
+        transform: string;
+        transformOrigin: string;
+        opacity: number;
+    };
+    '20%': {
+        transform: string;
+        opacity: number;
+    };
+    '40%': {
+        transform: string;
+        opacity: number;
+    };
+    '60%': {
+        transform: string;
+        opacity: number;
+    };
+    '80%': {
+        transform: string;
+        opacity: number;
+    };
+    enter: {
+        transform: string;
+        opacity: number;
+    };
+    duration: string;
+    timingFunction: string;
+};
+export declare const jackInTheBox: (duration?: string, timingFunction?: string) => {
+    from: {
+        opacity: number;
+        transform: string;
+        transformOrigin: string;
+    };
+    '50%': {
+        transform: string;
+    };
+    '70%': {
+        transform: string;
+    };
+    enter: {
+        opacity: number;
+        transform: string;
+    };
+    duration: string;
+    timingFunction: string;
+};
+export declare const flipInX: (duration?: string, timingFunction?: string) => {
+    from: {
+        transform: string;
+        opacity: number;
+    };
+    '40%': {
+        transform: string;
+        opacity: number;
+    };
+    enter: {
+        transform: string;
+    };
+    duration: string;
+    timingFunction: string;
+};
+export declare const flipInY: (duration?: string, timingFunction?: string) => {
+    from: {
+        transform: string;
+        opacity: number;
+    };
+    '40%': {
+        transform: string;
+        opacity: number;
+    };
+    enter: {
+        transform: string;
+    };
+    duration: string;
+    timingFunction: string;
+};
+export declare const headShake: (duration?: string, iterationCount?: string) => {
+    from: {
+        transform: string;
+    };
+    '6.5%': {
+        transform: string;
+    };
+    '18.5%': {
+        transform: string;
+    };
+    '31.5%': {
+        transform: string;
+    };
+    '43.5%': {
+        transform: string;
+    };
+    '50%': {
+        transform: string;
+    };
+    duration: string;
+    iterationCount: string;
+};
+export declare const tada: (duration?: string, iterationCount?: string) => {
+    from: {
+        transform: string;
+        opacity: number;
+    };
+    '10%, 20%': {
+        transform: string;
+    };
+    '30%, 50%, 70%, 90%': {
+        transform: string;
+    };
+    '40%, 60%, 80%': {
+        transform: string;
+    };
+    enter: {
+        transform: string;
+        opacity: number;
+    };
+    duration: string;
+    iterationCount: string;
+};
+export declare const jello: (duration?: string, iterationCount?: string) => {
+    from: {
+        transform: string;
+    };
+    '11.1%': {
+        transform: string;
+    };
+    '22.2%': {
+        transform: string;
+    };
+    '33.3%': {
+        transform: string;
+    };
+    '44.4%': {
+        transform: string;
+    };
+    '55.5%': {
+        transform: string;
+    };
+    '66.6%': {
+        transform: string;
+    };
+    '77.7%': {
+        transform: string;
+    };
+    '88.8%': {
+        transform: string;
+    };
+    enter: {
+        transform: string;
+    };
+    duration: string;
+    iterationCount: string;
+};
+export declare const fadeInDown: (duration?: string, timingFunction?: string) => {
+    from: {
+        opacity: number;
+        transform: string;
+    };
+    enter: {
+        opacity: number;
+        transform: string;
+    };
+    duration: string;
+    timingFunction: string;
+};
+export declare const fadeInUp: (duration?: string, timingFunction?: string) => {
+    from: {
+        opacity: number;
+        transform: string;
+    };
+    enter: {
+        opacity: number;
+        transform: string;
+    };
+    duration: string;
+    timingFunction: string;
+};
+export declare const bounceIn: (duration?: string, timingFunction?: string) => {
+    from: {
+        opacity: number;
+        transform: string;
+    };
+    '50%': {
+        opacity: number;
+        transform: string;
+    };
+    '70%': {
+        transform: string;
+    };
+    enter: {
+        transform: string;
+    };
+    duration: string;
+    timingFunction: string;
+};
+export declare const bounceOut: (duration?: string, timingFunction?: string) => {
+    from: {
+        transform: string;
+    };
+    '20%': {
+        transform: string;
+    };
+    '50%, 55%': {
+        opacity: number;
+        transform: string;
+    };
+    enter: {
+        opacity: number;
+        transform: string;
+    };
+    duration: string;
+    timingFunction: string;
+};
+export declare const slideOutLeft: (duration?: string, timingFunction?: string) => {
+    from: {
+        transform: string;
+    };
+    enter: {
+        transform: string;
+    };
+    duration: string;
+    timingFunction: string;
+};
+export declare const slideOutRight: (duration?: string, timingFunction?: string) => {
+    from: {
+        transform: string;
+    };
+    enter: {
+        transform: string;
+    };
+    duration: string;
+    timingFunction: string;
+};
+export declare const zoomInDown: (duration?: string, timingFunction?: string) => {
+    from: {
+        opacity: number;
+        transform: string;
+    };
+    '60%': {
+        opacity: number;
+        transform: string;
+    };
+    enter: {
+        transform: string;
+    };
+    duration: string;
+    timingFunction: string;
+};
+export declare const zoomOutUp: (duration?: string, timingFunction?: string) => {
+    from: {
+        opacity: number;
+        transform: string;
+    };
+    '40%': {
+        opacity: number;
+        transform: string;
+    };
+    enter: {
+        opacity: number;
+        transform: string;
+    };
+    duration: string;
+    timingFunction: string;
+};
+export declare const backInDown: (duration?: string, timingFunction?: string) => {
+    from: {
+        opacity: number;
+        transform: string;
+    };
+    enter: {
+        opacity: number;
+        transform: string;
+    };
+    duration: string;
+    timingFunction: string;
+};
+export declare const backOutUp: (duration?: string, timingFunction?: string) => {
+    from: {
+        opacity: number;
+        transform: string;
+    };
+    '80%': {
+        opacity: number;
+        transform: string;
+    };
+    enter: {
+        opacity: number;
+        transform: string;
+    };
+    duration: string;
+    timingFunction: string;
+};

package/dist/components/Element.d.ts

@@ -1,19 +1,23 @@
-import React from 'react';
-import { CSSProperties } from 'styled-components';
+import React, { CSSProperties } from 'react';
+import { AnimationProps } from '../utils/constants';
 import { Shadow } from '../utils/shadow';
-export interface ElementProps {
+export interface ElementProps extends CssProps {
+    on?: Record<string, CssProps>;
+    media?: Record<string, CssProps>;
+    only?: string[];
+    css?: CSSProperties;
+}
+export interface CssProps {
     children?: React.ReactNode;
     size?: number;
-    on?: Record<string, CSSProperties>;
-    media?: Record<string, CSSProperties>;
     paddingHorizontal?: number | string;
     marginHorizontal?: number | string;
     paddingVertical?: number | string;
     marginVertical?: number | string;
     shadow?: boolean | number | Shadow;
-    only?: string[];
-    css?: CSSProperties;
+    style?: CSSProperties;
+    animate?: AnimationProps;
+    onPress?: () => void;
+    [key: string]: any;
 }
-export declare const setSize: (newSize: string | number, styleProps: Record<string, any>) => void;
-export declare const applyStyle: (props: Record<string, any>) => CSSProperties & any;
-export declare const Element: React.FC<ElementProps & any>;
+export declare const Element: React.FC<ElementProps>;

package/dist/components/Form.d.ts

@@ -1,16 +1,16 @@
 import React from 'react';
 import { ElementProps } from './Element';
 import { ViewStyleProps } from '../types/style';
-import { CSSProperties } from 'styled-components';
+import { CSSProperties } from 'react';
 interface CommonProps extends Omit<ViewStyleProps, 'children' | 'style' | 'pointerEvents'> {
 }
 export interface FormProps extends CommonProps, Omit<Partial<HTMLFormElement>, 'width' | 'height' | 'children' | 'translate' | 'target' | 'border' | 'draggable'>, CSSProperties, ElementProps {
 }
-export interface ButtonProps extends CommonProps, Omit<Partial<HTMLButtonElement>, 'width' | 'height' | 'children' | 'translate' | 'type' | 'border' | 'draggable'>, CSSProperties, ElementProps {
+export interface ButtonProps extends CommonProps, Omit<Partial<HTMLButtonElement>, 'width' | 'height' | 'children' | 'translate' | 'type' | 'border' | 'animate' | 'style' | 'draggable'>, Omit<CSSProperties, 'animation'>, ElementProps {
     children?: React.ReactNode;
     onClick?: (..._args: any) => void;
 }
-export interface InputProps extends ElementProps, CommonProps, Omit<Partial<HTMLInputElement>, 'width' | 'height' | 'children'>, Omit<CSSProperties, 'style' | 'dir' | 'translate'> {
+export interface InputProps extends ElementProps, CommonProps, Omit<Partial<HTMLInputElement>, 'width' | 'height' | 'animate' | 'style' | 'children'>, Omit<CSSProperties, 'style' | 'dir' | 'translate'> {
 }
 export declare const Form: React.MemoExoticComponent<(props: FormProps) => React.JSX.Element>;
 export declare const Input: React.MemoExoticComponent<(props: InputProps) => React.JSX.Element>;

package/dist/components/Image.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { CSSProperties } from 'styled-components';
+import { CSSProperties } from 'react';
 import { ElementProps } from './Element';
 import { ImageStyleProps } from '../types/style';
-export interface ImageProps extends Omit<ImageStyleProps, 'children' | 'style' | 'pointerEvents'>, Omit<Partial<HTMLImageElement>, 'width' | 'height' | 'children' | 'translate' | 'target' | 'border' | 'draggable'>, CSSProperties, ElementProps {
+export interface ImageProps extends Omit<ImageStyleProps, 'children' | 'style' | 'pointerEvents'>, Omit<Partial<HTMLImageElement>, 'width' | 'height' | 'children' | 'translate' | 'target' | 'border' | 'animate' | 'draggable' | 'style'>, Omit<CSSProperties, 'animation'>, ElementProps {
 }
 export declare const Image: React.MemoExoticComponent<(props: ImageProps) => React.JSX.Element>;

package/dist/components/Text.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { CSSProperties } from 'styled-components';
+import { CSSProperties } from 'react';
 import { ElementProps } from './Element';
 import { TextStyleProps } from '../types/style';
-export interface TextProps extends Omit<TextStyleProps, 'children' | 'style' | 'pointerEvents'>, CSSProperties, ElementProps {
+export interface TextProps extends Omit<TextStyleProps, 'children' | 'style' | 'onPress' | 'pointerEvents'>, Omit<CSSProperties, 'animation'>, ElementProps {
     toUpperCase?: boolean;
 }
 export declare const Text: React.MemoExoticComponent<(props: TextProps) => React.JSX.Element>;