@codeleap/mobile 2.3.4 → 2.3.6

package/dist/components/Text/index.js

@@ -95,7 +95,10 @@ exports.Text = (0, react_1.forwardRef)(function (textProps, ref) {
         hightlightPropertyOut: 'backgroundColor',
     }).getFeedbackStyle;
     var feedbackStyle = pressPolyfillEnabled ? getFeedbackStyle(pressed) : undefined;
-    return <Component {...props} onPressIn={handlePress(true)} onPressOut={handlePress(false)} style={[styles, colorStyle, feedbackStyle]} onPress={_onPress} 
+    var pressProps = !!onPress ? {
+        onPress: _onPress,
+    } : {};
+    return <Component {...props} onPressIn={handlePress(true)} onPressOut={handlePress(false)} style={[styles, colorStyle, feedbackStyle]} {...pressProps} 
     // @ts-ignore
     ref={ref}>
     {text}

package/dist/components/Text/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Text/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA8B;AAC9B,+BAA4D;AAC5D,2CAMyB;AACzB,6CAAwG;AACxG,6BAAuD;AACvD,qCAAmE;AAInE,2CAAwB;AAWxB,IAAM,QAAQ,GAAG,uBAAQ,CAAC,uBAAuB,CAAC,eAAS,CAAC,CAAA;AAE/C,QAAA,IAAI,GAAG,IAAA,kBAAU,EAAwB,UAAC,SAAS,EAAE,GAAG;IAC3D,IAAA,KAAgG,SAAS,SAA5F,EAAb,QAAQ,mBAAG,EAAE,KAAA,EAAE,IAAI,GAA6E,SAAS,KAAtF,EAAE,QAAQ,GAAmE,SAAS,SAA5E,EAAE,OAAO,GAA0D,SAAS,QAAnE,EAAE,KAAK,GAAmD,SAAS,MAA5D,EAAE,iBAAiB,GAAgC,SAAS,kBAAzC,EAAE,KAA8B,SAAS,SAAxB,EAAf,QAAQ,mBAAG,IAAI,KAAA,EAAK,KAAK,UAAK,SAAS,EAA3G,qFAA+F,CAAF,CAAc;IAEjH,IAAM,oBAAoB,GAAG,uBAAQ,CAAC,EAAE,KAAK,SAAS,IAAI,CAAC,CAAC,OAAO,CAAA;IAE7D,IAAA,KAAwB,IAAA,iBAAQ,EAAC,KAAK,CAAC,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAA;IAC7C,IAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IAEtC,IAAM,QAAQ,GAAwB,UAAC,CAAC;QACtC,IAAI,CAAC,OAAO;YAAE,OAAM;QAEpB,IAAI,mBAAU,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;YACjC,IAAI,UAAU,CAAC,OAAO,EAAE;gBACtB,OAAM;aACP;YAED,UAAU,CAAC,OAAO,GAAG,IAAI,CAAA;YACzB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAA;YACZ,UAAU,CAAC;gBACT,UAAU,CAAC,OAAO,GAAG,KAAK,CAAA;YAC5B,CAAC,EAAE,QAAQ,CAAC,CAAA;SAEb;aAAM;YACL,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAA;SACb;IACH,CAAC,CAAA;IAED,IAAM,WAAW,GAAG,UAAC,OAAO;QAC1B,IAAI,CAAC,oBAAoB;YAAE,OAAM;QACjC,OAAO;YACL,IAAI,OAAO,EAAE;gBACX,UAAU,CAAC,OAAO,CAAC,CAAA;aACpB;QACH,CAAC,CAAA;IACH,CAAC,CAAA;IACD,IAAM,aAAa,GAAG,IAAA,iCAAwB,EAA8B,QAAQ,EAAE;QACpF,QAAQ,UAAA;QACR,SAAS,EAAE,yBAAU,CAAC,OAAO;QAC7B,WAAW,EAAE,MAAM;KACpB,CAAC,CAAA;IAEF,IAAM,MAAM,GAAG,yBAAU,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAA;IAE9D,IAAM,aAAa,GAAG,IAAA,uBAAe,EAAC,MAAM,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAA;IAEtE,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,mBAAU,CAAC,QAAQ,CAAC,IAAI,CAAC;QAAE,OAAO,EAAE,CAAC,IAAI,CAAC,GAAG,CAAA;IAE5D,IAAM,SAAS,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,mBAAU,CAAA;IAE5D,IAAM,UAAU,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;IAEnE,IAAA,gBAAgB,GAAK,IAAA,4BAAoB,EAAC,MAAM,EAAE;QACxD,QAAQ,EAAE,CAAC,oBAAoB;QAC/B,cAAc,EAAE,aAAa,CAAC,aAAa;QAC3C,oBAAoB,EAAE,OAAO;QAC7B,qBAAqB,EAAE,iBAAiB;KACzC,CAAC,iBALsB,CAKtB;IACF,IAAM,aAAa,GAAG,oBAAoB,CAAC,CAAC,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAElF,OAAO,CAAC,SAAS,CAAC,IAAI,KAAK,CAAC,CAC1B,SAAS,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAC7D,KAAK,CAAC,CAAC,CAAC,MAAM,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC,CAC3C,OAAO,CAAC,CAAC,QAAQ,CAAC;IAClB,aAAa;IACb,GAAG,CAAC,CAAC,GAAG,CAAC,CAET;IAAA,CAAC,IAAI,CACL;IAAA,CAAC,QAAQ,CACX;EAAA,EAAE,SAAS,CAAC,CAAA;AAEd,CAAC,CAAC,CAAA;AAEF,4CAA4C;AAC5C,UAAU;AACV,cAAc;AACd,KAAK;AAEL,6CAA6C;AAC7C,MAAM;AACN,gCAAgC;AAChC,0CAA0C;AAC1C,wBAAwB;AACxB,kDAAkD;AAClD,oBAAoB;AACpB,uBAAuB;AAEvB,UAAU;AACV,qBAAqB;AACrB,SAAS;AACT,MAAM;AACN,UAAU"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Text/index.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "2.3.4",
+  "version": "2.3.6",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -17,7 +17,8 @@
   },
   "scripts": {
     "build": "tsc --build",
-    "lint": "eslint -c  .eslintrc.js --fix \"./src/**/*.{ts,tsx,js,jsx}\""
+    "lint": "eslint -c  .eslintrc.js --fix \"./src/**/*.{ts,tsx,js,jsx}\"",
+    "publish": "npm publish"
   },
   "peerDependencies": {
     "@codeleap/common": "*",

package/src/components/ActionIcon/index.tsx

@@ -1,32 +0,0 @@
-import { ComponentVariants, getNestedStylesByKey, useDefaultComponentStyle } from '@codeleap/common'
-import React from 'react'
-import { StyleSheet } from 'react-native'
-import { StylesOf } from '../../types'
-import { Icon, IconProps } from '../Icon'
-import { Touchable, TouchableProps } from '../Touchable'
-import { ActionIconComposition, ActionIconStyles } from './styles'
-
-export type ActionIconProps= {
-    iconProps?: Partial<IconProps>
-    icon?: IconProps['name']
-    styles?: StylesOf<ActionIconComposition>
-} & Omit<TouchableProps, 'styles' | 'variants'> & ComponentVariants<typeof ActionIconStyles>
-
-export const ActionIcon:React.FC<ActionIconProps> = (props) => {
-  const { icon, iconProps, variants, styles, children, ...touchableProps } = props
-  const variantStyles = useDefaultComponentStyle<'u:ActionIcon', typeof ActionIconStyles>('u:ActionIcon', {
-    variants, styles, transform: StyleSheet.flatten,
-  })
-  const touchableStyles = getNestedStylesByKey('touchable', variantStyles)
-
-  return <Touchable styles={touchableStyles} {...touchableProps}>
-    <Icon name={icon} style={
-      [
-        variantStyles.icon,
-        touchableProps?.disabled && variantStyles['icon:disabled'],
-      ]} {...iconProps}/>
-    {children}
-  </Touchable>
-}
-
-export * from './styles'

package/src/components/ActionIcon/styles.ts

@@ -1,97 +0,0 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
-import { TouchableComposition } from '../Touchable'
-
-export type ActionIconParts = 'icon' | `touchable${Capitalize<TouchableComposition>}`
-export type ActionIconStates = ':disabled' | ''
-export type ActionIconComposition = `${ActionIconParts}${ActionIconStates}`
-const createActionIconStyle = createDefaultVariantFactory<ActionIconComposition>()
-
-const presets = includePresets((style) => createActionIconStyle(() => ({ touchableWrapper: style })))
-
-export const ActionIconStyles = {
-  ...presets,
-  default: createActionIconStyle((theme) => {
-
-    return {
-      icon: {
-        color: theme.colors.icon,
-        ...theme.sized(5 * 0.6),
-
-      },
-      touchableWrapper: {
-        ...theme.sized(5),
-        borderRadius: theme.borderRadius.round,
-        ...theme.presets.center,
-      },
-      'icon:disabled': {
-        color: theme.colors.disabled,
-      },
-
-    }
-  }),
-  originalColor: createActionIconStyle(theme => ({
-    icon: {
-      color: 'auto',
-    },
-  })),
-  small: createActionIconStyle((theme) => ({
-    touchableWrapper: {
-      ...theme.sized(3.5),
-
-    },
-    icon: {
-      ...theme.sized(3.5 * 0.6),
-
-    },
-  })),
-  large: createActionIconStyle((theme) => ({
-    touchableWrapper: {
-      ...theme.sized(6.5),
-
-    },
-    icon: {
-      ...theme.sized(6.5 * 0.6),
-
-    },
-  })),
-  primary: createActionIconStyle((theme) => ({
-    icon: {
-      color: theme.colors.primary,
-
-    },
-
-  })),
-  negative: createActionIconStyle((theme) => ({
-    icon: {
-      color: theme.colors.negative,
-
-    },
-
-  })),
-  positive: createActionIconStyle((theme) => ({
-    icon: {
-      color: theme.colors.positive,
-
-    },
-
-  })),
-  black: createActionIconStyle((theme) => ({
-    icon: {
-      color: theme.colors.black,
-
-    },
-
-  })),
-  white: createActionIconStyle((theme) => ({
-    icon: {
-      color: theme.colors.white,
-
-    },
-
-  })),
-  neutral: createActionIconStyle((theme) => ({
-    icon: {
-      color: theme.colors.neutral,
-    },
-  })),
-}

package/src/components/ActivityIndicator/index.tsx

@@ -1,50 +0,0 @@
-import * as React from 'react'
-import { ComponentPropsWithoutRef, forwardRef } from 'react'
-import { ActivityIndicator as Indicator, StyleSheet } from 'react-native'
-import {
-
-  useDefaultComponentStyle,
-  ComponentVariants,
-  useCodeleapContext,
-} from '@codeleap/common'
-import { StylesOf } from '../../types'
-import {
-  ActivityIndicatorComposition,
-  ActivityIndicatorStyles,
-} from './styles'
-
-export * from './styles'
-export type ActivityIndicatorProps = ComponentPropsWithoutRef<
-  typeof Indicator
-> & {
-  variants?: ComponentVariants<typeof ActivityIndicatorStyles>['variants']
-  styles?: StylesOf<ActivityIndicatorComposition>
-}
-
-export const ActivityIndicator = forwardRef<Indicator, ActivityIndicatorProps>(
-  (activityIndicatorProps, ref) => {
-    const { variants = [], style, styles: propStyles, ...props } = activityIndicatorProps
-
-    const variantStyles = useDefaultComponentStyle('ActivityIndicator', {
-      variants,
-      transform: StyleSheet.flatten,
-      styles: propStyles,
-    })
-
-    const { Theme } = useCodeleapContext()
-
-    const styles = StyleSheet.flatten([variantStyles.wrapper, style])
-    const color = styles?.color || Theme.colors.gray
-    const size = styles?.height || styles?.width || 'large'
-
-    return (
-      <Indicator
-        size={size}
-        ref={ref}
-        color={color}
-        style={styles}
-        {...props}
-      />
-    )
-  },
-)

package/src/components/ActivityIndicator/styles.ts

@@ -1,68 +0,0 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
-
-export type ActivityIndicatorComposition =
-  | 'wrapper'
-  | 'backCircle'
-  | 'frontCircle'
-  | 'circle'
-
-const createActivityIndicatorStyle =
-  createDefaultVariantFactory<ActivityIndicatorComposition>()
-
-const presets = includePresets((styles) => createActivityIndicatorStyle(() => ({ wrapper: styles })),
-)
-
-export const getActivityIndicatorBaseStyles = (size:number) => {
-  const sizes = {
-    height: size,
-    width: size,
-    borderWidth: size * 0.25,
-  }
-
-  return {
-    wrapper: {
-      position: 'relative',
-      ...sizes,
-    } as any,
-    circle: {
-      borderRadius: 100,
-      position: 'absolute',
-      borderStyle: 'solid',
-      top: 0,
-      bottom: 0,
-      left: 0,
-      right: 0,
-    } as any,
-    backCircle: {
-
-      // borderColor: theme.colors.primary,
-      minWidth: '100%',
-      opacity: 0.5,
-    } as any,
-    frontCircle: {
-      position: 'absolute',
-      borderColor: 'transparent',
-      // borderTopColor: theme.colors.primary,
-    } as any,
-  }
-}
-
-export const ActivityIndicatorStyles = {
-  ...presets,
-  default: createActivityIndicatorStyle((theme) => {
-    const baseStyles = getActivityIndicatorBaseStyles(35)
-
-    return {
-      ...baseStyles,
-      backCircle: {
-        ...baseStyles.backCircle,
-        borderColor: theme.colors.primary,
-      },
-      frontCircle: {
-        ...baseStyles.frontCircle,
-        borderTopColor: theme.colors.primary,
-      },
-    }
-
-  }),
-}

package/src/components/Animated.tsx

@@ -1,34 +0,0 @@
-import { onUpdate } from '@codeleap/common'
-import React, { useRef } from 'react'
-
-import posed from 'react-native-pose'
-import { Touchable } from './Touchable'
-import { View } from './View'
-const Components = {
-  Touchable,
-  View,
-}
-
-const PosedComponents = Object.fromEntries(
-  Object.entries(Components).map(([key, Render]) => [key, posed(Render)]),
-)
-
-type AnimatedComponents = typeof Components
-type CP = keyof AnimatedComponents
-
-type AnimatedProps<T extends CP, CFG = Record<string, any>> = {
-  component: T
-  config: CFG
-  pose: keyof CFG
-  initialPose?: keyof CFG
-} & Omit<Parameters<AnimatedComponents[T]>[0], 'component'>
-
-export const Animated = <T extends CP, CFG = any>({
-  config,
-  component,
-  ...props
-}: AnimatedProps<T, CFG>) => {
-  const Component = useRef(PosedComponents[component](config)).current
-
-  return <Component withParent={false} {...props} />
-}

package/src/components/AutoComplete/index.tsx

@@ -1,163 +0,0 @@
-import * as React from 'react'
-import { ComponentVariants,
-  FormTypes,
-  getNestedStylesByKey,
-  IconPlaceholder,
-  onUpdate,
-  PropsOf,
-  ReactStateProps,
-  TypeGuards,
-  useDebounce,
-  useDefaultComponentStyle,
-  useMemo,
-  useState,
-} from '@codeleap/common'
-import { ModalHeaderProps } from '../Modal'
-import { TextInput, TextInputProps } from '../TextInput'
-import { View, ViewProps } from '../View'
-import { CustomSelectProps, Select } from '../Select'
-import { AutoCompleteStyles, AutoCompleteComposition } from './styles'
-import { StylesOf } from '../../types'
-import { StyleSheet } from 'react-native'
-import { Text } from '../Text'
-import { Button } from '../Button'
-
-export type AutoCompleteHeaderProps = ReactStateProps<'search', string> &
-  Omit<PropsOf<typeof View>, 'style'|'styles'|'variants'>
-& {
-    label: FormTypes.Label
-    searchInputProps?: Partial<TextInputProps>
-    styles: ModalHeaderProps['styles'] & { searchInput?: TextInputProps['styles']; titleWrapper?:ViewProps['style']}
-    debugName: string
-    icon?: IconPlaceholder
-    toggle: ModalHeaderProps['toggle']
-  }
-
-export const AutoCompleteHeader:React.FC<AutoCompleteHeaderProps> = (props) => {
-  const { search, setSearch, icon = 'search', debugName, label, styles, toggle, searchInputProps, ...viewProps } = props
-
-  return <View style={[styles.wrapper]} {...viewProps}>
-    <View style={styles.titleWrapper}>
-      <Text style={styles.title} text={label}/>
-      <Button
-        icon={'close' as IconPlaceholder}
-        debugName={`Close Autocomplete ${debugName} button`}
-        onPress={toggle} variants={['icon']}
-        styles={styles.closeButton}/>
-    </View>
-    <TextInput subtitle={() => null} leftIcon={{
-      icon: icon as IconPlaceholder,
-    }} debugName={`AutoComplete ${debugName} search input`} value={search} onChangeText={setSearch} styles={styles.searchInput} {...searchInputProps}/>
-  </View>
-}
-
-export type AutoCompleteOption<T> = CustomSelectProps<T>['options'][number] & {searchTerm?: string}
-
-export type AutoCompleteProps<
-    T,
-    Base extends CustomSelectProps<T> = CustomSelectProps<T>
-  > = Omit<Base, 'options'| 'variants' | 'styles'> & {
-    options: AutoCompleteOption<T>[]
-    caseSensitive?: boolean
-    debounce?: number
-    headerProps?: Partial<AutoCompleteHeaderProps>
-    styles?: StylesOf<AutoCompleteComposition>
-    filterFn?: (search?: string, option?:AutoCompleteOption<T>) => boolean
-  } & ComponentVariants<typeof AutoCompleteStyles>
-
-export const AutoComplete = <T extends string|number = string>(props: AutoCompleteProps<T>) => {
-  const {
-    options,
-    caseSensitive = false,
-    debounce = 200,
-    filterFn,
-    headerProps = {},
-    variants,
-    styles,
-    ...selectProps
-  } = props
-
-  const [search, setSearch] = useState('')
-  const [debouncedSearch, resetDebounce] = useDebounce(search, debounce)
-  const [filteredOptions, setFilteredOptions] = useState(options)
-
-  const [loading, setLoading] = useState(false)
-  const variantStyles = useDefaultComponentStyle<'u:AutoComplete', typeof AutoCompleteStyles>('u:AutoComplete', {
-    variants,
-    transform: StyleSheet.flatten,
-    styles,
-  })
-  const serialVariants = JSON.stringify(variantStyles)
-  const { searchInputStyles, closeButtonStyles } = useMemo(() => ({
-    searchInputStyles: getNestedStylesByKey('searchInput', variantStyles),
-    closeButtonStyles: getNestedStylesByKey('closeButton', variantStyles),
-
-  }), [serialVariants])
-
-  onUpdate(() => {
-    setLoading(true)
-    let persist = true
-    setTimeout(() => {
-
-      const newOpts = options.filter((option) => {
-        if (filterFn) {
-          return filterFn(debouncedSearch, option)
-        }
-        const { label, searchTerm, value } = option
-        let term = searchTerm || (TypeGuards.isString(label) ? label : value.toString())
-
-        if (!caseSensitive) {
-          term = term.toLowerCase()
-        }
-
-        return term.includes(debouncedSearch.toLowerCase())
-      })
-      if (persist) {
-        setFilteredOptions(newOpts)
-        setTimeout(() => {
-          if (persist) {
-            setLoading(false)
-          }
-        }, debounce * 1.5)
-      }
-
-    })
-    return () => {
-      persist = false
-      resetDebounce()
-    }
-  }, [debouncedSearch, caseSensitive, options.length, filterFn])
-  return <Select
-    styles={variantStyles}
-    options={ loading ? [] : filteredOptions}
-    header={
-      <AutoCompleteHeader
-        debugName={selectProps.debugName}
-        label={selectProps.label}
-        search={search}
-        setSearch={setSearch}
-        toggle={selectProps.toggle}
-        styles={{
-          wrapper: variantStyles.header,
-          closeButton: closeButtonStyles,
-          title: variantStyles.title,
-          searchInput: searchInputStyles,
-          titleWrapper: variantStyles.titleWrapper,
-        }}
-
-        {...headerProps}
-      />
-    }
-
-    {...selectProps}
-    listProps={{
-      ...selectProps?.listProps,
-      placeholder: {
-        loading,
-        ...selectProps?.listProps?.placeholder,
-      },
-    }}
-  />
-
-}
-export * from './styles'

package/src/components/AutoComplete/styles.ts

@@ -1,44 +0,0 @@
-import { assignTextStyle, createDefaultVariantFactory } from '@codeleap/common'
-import { SelectComposition, SelectStyles } from '../Select'
-import { TextInputComposition } from '../TextInput'
-
-export type AutoCompleteComposition = SelectComposition | `searchInput${Capitalize<TextInputComposition>}` | 'titleWrapper'
-
-const createAutoCompleteStyle = createDefaultVariantFactory<AutoCompleteComposition>()
-
-export const AutoCompleteStyles = {
-  ...SelectStyles,
-  default: createAutoCompleteStyle((theme) => {
-    const defaultStyle = SelectStyles.default(theme)
-
-    return {
-      ...defaultStyle,
-      header: {
-        ...theme.spacing.paddingHorizontal(2),
-        ...theme.spacing.paddingTop(1),
-        ...theme.presets.column,
-        ...theme.presets.alignStart,
-      },
-
-      searchInputWrapper: {
-        ...theme.presets.fullWidth,
-        ...theme.spacing.marginTop(2),
-      },
-
-      titleWrapper: {
-        ...theme.presets.row,
-        ...theme.presets.alignCenter,
-        ...theme.presets.fullWidth,
-        ...theme.presets.justifyCenter,
-      },
-      title: {
-        ...theme.presets.textCenter,
-        flex: 1,
-      },
-      closeButtonWrapper: {
-        position: 'absolute',
-        right: 0,
-      },
-    }
-  }),
-}

package/src/components/Backdrop/index.tsx

@@ -1,48 +0,0 @@
-import React from 'react'
-import { ComponentVariants, onUpdate, PropsOf, useDefaultComponentStyle } from '@codeleap/common'
-import { useDynamicAnimation } from 'moti'
-import { Touchable } from '../Touchable'
-import { View } from '../View'
-
-import { StylesOf } from '../../types/utility'
-import { StyleSheet } from 'react-native'
-import { useStaticAnimationStyles } from '../../utils'
-import { BackdropComposition, BackdropStyles } from './styles'
-
-export * from './styles'
-export type BackdropProps = PropsOf<typeof Touchable> & {
-    visible: boolean
-    wrapperProps?: PropsOf<typeof View>
-    variants?: ComponentVariants<typeof BackdropStyles>['variants']
-    styles?: StylesOf<BackdropComposition>
-}
-
-export const Backdrop = (backdropProps:BackdropProps) => {
-  const { variants = [], styles = {}, visible, children, wrapperProps = {}, ...props } = backdropProps
-
-  const variantStyles = useDefaultComponentStyle<'u:Backdrop', typeof BackdropStyles>('u:Backdrop', {
-    variants,
-    rootElement: 'wrapper',
-    styles,
-    transform: StyleSheet.flatten,
-  })
-
-  const animationStates = useStaticAnimationStyles(variantStyles, ['wrapper:hidden', 'wrapper:visible'])
-
-  const animation = useDynamicAnimation(() => {
-    return visible ? animationStates['wrapper:visible'] : animationStates['wrapper:hidden']
-  })
-
-  onUpdate(() => {
-    animation.animateTo(visible ? animationStates['wrapper:visible'] : animationStates['wrapper:hidden'])
-  }, [visible, animationStates])
-
-  return <View pointerEvents={visible ? 'auto' : 'none' } animated style={variantStyles.wrapper} state={animation} {...wrapperProps}>
-    {
-      props?.onPress ?
-        <Touchable style={variantStyles.touchable} {...props} noFeedback android_ripple={null}/>
-        : null
-    }
-    {children}
-  </View>
-}

package/src/components/Backdrop/styles.ts

@@ -1,33 +0,0 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
-
-export type BackdropComposition =
- 'wrapper'|
-'touchable' |
-'wrapper:visible' |
-'wrapper:hidden'
-
-const createBackdropVariant = createDefaultVariantFactory<BackdropComposition>()
-
-const presets = includePresets((style) => createBackdropVariant(() => ({ wrapper: style })))
-
-export const BackdropStyles = {
-  ...presets,
-  default: createBackdropVariant((theme) => ({
-    wrapper: {
-      backgroundColor: theme.colors.black,
-      ...theme.presets.whole,
-      ...theme.presets.absolute,
-    },
-    'wrapper:visible': {
-      opacity: 0.5,
-    },
-    'wrapper:hidden': {
-
-      opacity: 0,
-    },
-    touchable: {
-      ...theme.presets.whole,
-      ...theme.presets.absolute,
-    },
-  })),
-}