@neko-os/ui 0.0.11 → 0.0.13

package/dist/abstractions/AnimatedView.native.js

@@ -1 +1 @@
-import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/abstractions/AnimatedView.native.js";import{map,prop}from'ramda';import Animated,{useAnimatedStyle}from'react-native-reanimated';import{jsx as _jsx}from"react/jsx-runtime";export function AbsAnimatedView(_ref){var children=_ref.children,style=_ref.style,_ref$animatedStyles=_ref.animatedStyles,animatedStyles=_ref$animatedStyles===void 0?[]:_ref$animatedStyles;return _jsx(Animated.View,{style:[style].concat(_toConsumableArray(animatedStyles)),children:children});}
+import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/abstractions/AnimatedView.native.js";import Animated from'react-native-reanimated';import{jsx as _jsx}from"react/jsx-runtime";export function AbsAnimatedView(_ref){var children=_ref.children,style=_ref.style,_ref$animatedStyles=_ref.animatedStyles,animatedStyles=_ref$animatedStyles===void 0?[]:_ref$animatedStyles;return _jsx(Animated.View,{style:[style].concat(_toConsumableArray(animatedStyles)),children:children});}

package/dist/components/actions/Dropdown.js

@@ -1 +1 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/actions/Dropdown.js";var _excluded=["items"],_excluded2=["onChange","label","trigger","icon","strong","color","popoverProps","iconLabelProps","children","placement","gap","useBottomDrawer"];import{pipe}from'ramda';import{IconLabel}from"../presentation/IconLabel";import{Link}from"./Link";import{Menu}from"./menu/Menu";import{Popover}from"../structure/popover/Popover";import{View}from"../structure/View";import{useResponsiveValue}from"../../responsive";import{useThemeComponentModifier}from"../../modifiers/themeComponent";import{jsx as _jsx}from"react/jsx-runtime";export function Dropdown(_ref){var _this=this;var items=_ref.items,rootProps=_objectWithoutProperties(_ref,_excluded);var _pipe=pipe(useThemeComponentModifier('Dropdown'))([{},rootProps]),_pipe2=_slicedToArray(_pipe,2),_=_pipe2[0],formattedProps=_pipe2[1];var onChange=formattedProps.onChange,label=formattedProps.label,_formattedProps$trigg=formattedProps.trigger,trigger=_formattedProps$trigg===void 0?'click':_formattedProps$trigg,icon=formattedProps.icon,strong=formattedProps.strong,color=formattedProps.color,popoverProps=formattedProps.popoverProps,iconLabelProps=formattedProps.iconLabelProps,children=formattedProps.children,placement=formattedProps.placement,gap=formattedProps.gap,useBottomDrawer=formattedProps.useBottomDrawer,props=_objectWithoutProperties(formattedProps,_excluded2);useBottomDrawer=useResponsiveValue(useBottomDrawer||{native:true,sm:true,md:true});return _jsx(View,Object.assign({className:"neko-dropdown"},props,{children:_jsx(Popover,Object.assign({useParentMinWidth:true,placement:placement||'bottomLeft',trigger:trigger,padding:0,contentProps:{padding:0},useBottomDrawer:useBottomDrawer},popoverProps,{renderContent:function renderContent(_ref2){var onClose=_ref2.onClose;var handleChange=function handleChange(){if(onChange)onChange.apply(void 0,arguments);onClose();};return _jsx(Menu,{vertical:true,items:items,onChange:handleChange,linkPaddingH:useBottomDrawer?'md':'sm',linkMinHeight:useBottomDrawer?'xl':'md',withDivider:useBottomDrawer});},children:children||_jsx(Link,{children:_jsx(IconLabel,Object.assign({label:label||'---',icon:icon||'arrow-down-s-fill',strong:strong,color:color,invert:true,gap:gap},iconLabelProps))})}))}));}
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/actions/Dropdown.js";var _excluded=["items"],_excluded2=["onChange","label","trigger","icon","strong","color","popoverProps","iconLabelProps","children","placement","gap","useBottomDrawer"];import{pipe}from'ramda';import{IconLabel}from"../presentation/IconLabel";import{Link}from"./Link";import{Menu}from"./menu/Menu";import{Popover}from"../structure/popover/Popover";import{ScrollView}from"../list";import{View}from"../structure/View";import{useResponsiveValue}from"../../responsive";import{useThemeComponentModifier}from"../../modifiers/themeComponent";import{jsx as _jsx}from"react/jsx-runtime";export function Dropdown(_ref){var _this=this;var items=_ref.items,rootProps=_objectWithoutProperties(_ref,_excluded);var _pipe=pipe(useThemeComponentModifier('Dropdown'))([{},rootProps]),_pipe2=_slicedToArray(_pipe,2),_=_pipe2[0],formattedProps=_pipe2[1];var onChange=formattedProps.onChange,label=formattedProps.label,_formattedProps$trigg=formattedProps.trigger,trigger=_formattedProps$trigg===void 0?'click':_formattedProps$trigg,icon=formattedProps.icon,strong=formattedProps.strong,color=formattedProps.color,popoverProps=formattedProps.popoverProps,iconLabelProps=formattedProps.iconLabelProps,children=formattedProps.children,placement=formattedProps.placement,gap=formattedProps.gap,useBottomDrawer=formattedProps.useBottomDrawer,props=_objectWithoutProperties(formattedProps,_excluded2);useBottomDrawer=useResponsiveValue(useBottomDrawer||{native:true,sm:true,md:true});return _jsx(View,Object.assign({className:"neko-dropdown"},props,{children:_jsx(Popover,Object.assign({useParentMinWidth:true,placement:placement||'bottomLeft',trigger:trigger,padding:0,contentProps:{padding:0},useBottomDrawer:useBottomDrawer},popoverProps,{renderContent:function renderContent(_ref2){var onClose=_ref2.onClose;var handleChange=function handleChange(){if(onChange)onChange.apply(void 0,arguments);onClose();};return _jsx(ScrollView,{children:_jsx(Menu,{vertical:true,items:items,onChange:handleChange,linkPaddingH:useBottomDrawer?'md':'sm',linkMinHeight:useBottomDrawer?'xl':'md',withDivider:useBottomDrawer})});},children:children||_jsx(Link,{children:_jsx(IconLabel,Object.assign({label:label||'---',icon:icon||'arrow-down-s-fill',strong:strong,color:color,invert:true,gap:gap},iconLabelProps))})}))}));}

package/dist/components/actions/menu/VerticalMenu.js

@@ -1 +1 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/actions/menu/VerticalMenu.js";var _excluded=["item","linkPaddingH","linkPaddingV","linkMinHeight","handlePress","linkProps","activeIndex","activeKey","activeColor","color","sizeCode","index"],_excluded2=["active","key"],_excluded3=["item"],_excluded4=["gap","items","onChange","onChangeIndex","withDivider"];import{omit,pipe}from'ramda';import React from'react';import tinycolor from'tinycolor2';import{Divider}from"../../helpers/Separator";import{IconText}from"../../presentation/IconLabel";import{Link}from"../Link";import{List}from"../../list/FlatList";import{SubmenuWrapper}from"./SubmenuWrapper";import{Text}from"../../text/Text";import{View}from"../../structure/View";import{moveScale}from"../../../theme/helpers/sizeScale";import{useColorConverter}from"../../../modifiers/colorConverter";import{useSizeConverter}from"../../../modifiers/sizeConverter";import{useThemeComponentModifier}from"../../../modifiers/themeComponent";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";function LinkItem(_ref){var item=_ref.item,_ref$linkPaddingH=_ref.linkPaddingH,linkPaddingH=_ref$linkPaddingH===void 0?'md':_ref$linkPaddingH,_ref$linkPaddingV=_ref.linkPaddingV,linkPaddingV=_ref$linkPaddingV===void 0?'xs':_ref$linkPaddingV,linkMinHeight=_ref.linkMinHeight,handlePress=_ref.handlePress,linkProps=_ref.linkProps,activeIndex=_ref.activeIndex,activeKey=_ref.activeKey,_ref$activeColor=_ref.activeColor,activeColor=_ref$activeColor===void 0?'primary':_ref$activeColor,color=_ref.color,sizeCode=_ref.sizeCode,index=_ref.index,props=_objectWithoutProperties(_ref,_excluded);activeColor=activeColor||'primary';var _omit=omit(['onClick','onPress'],item),active=_omit.active,key=_omit.key,childProps=_objectWithoutProperties(_omit,_excluded2);if(!active&&activeIndex>=0)active=activeIndex===index;if(!active&&activeKey!==undefined)active=activeKey===item.key;var bg=active&&tinycolor(color).setAlpha(0.03).toString();linkMinHeight=linkMinHeight||moveScale(sizeCode,1);return _jsx(SubmenuWrapper,{item:item,onChange:handlePress,activeKey:activeKey,color:color,children:_jsx(Link,Object.assign({fullW:true,center:true,paddingH:linkPaddingH,paddingV:linkPaddingV,minHeight:linkMinHeight,marginR:3,borderL:3,brColor:active?activeColor:'transparent',bg:bg,transition:"border-color 0.5s ease, background 0.3s ease",hover:{br:0}},linkProps,{onPress:function onPress(){return handlePress(item,index);},children:_jsx(IconText,Object.assign({addingV:active&&4,color:active?activeColor:color,fullW:true,size:sizeCode},childProps))}))});}function DividerItem(_ref2){var _ref2$linkPaddingH=_ref2.linkPaddingH,linkPaddingH=_ref2$linkPaddingH===void 0?'md':_ref2$linkPaddingH,item=_ref2.item;var content=_jsx(Divider,Object.assign({height:"xxs",line:true},item));if(!item.label)return content;return _jsxs(_Fragment,{children:[content,_jsx(Text,Object.assign({size:"xs",color:"text4",paddingV:"xs",paddingH:linkPaddingH||'md',strong:true},item))]});}function Item(_ref3){var item=_ref3.item,props=_objectWithoutProperties(_ref3,_excluded3);if(item.type==='divider')return _jsx(DividerItem,Object.assign({item:item},props));return _jsx(LinkItem,Object.assign({item:item},props));}export function VerticalMenu(rootProps){var _this=this;var _pipe=pipe(useColorConverter('text'),useSizeConverter('icons','md'),useThemeComponentModifier('VerticalMenu'))([{},rootProps]),_pipe2=_slicedToArray(_pipe,2),_pipe2$=_pipe2[0],sizeCode=_pipe2$.sizeCode,color=_pipe2$.color,formattedProps=_pipe2[1];var _formattedProps$gap=formattedProps.gap,gap=_formattedProps$gap===void 0?'sm':_formattedProps$gap,items=formattedProps.items,onChange=formattedProps.onChange,onChangeIndex=formattedProps.onChangeIndex,withDivider=formattedProps.withDivider,props=_objectWithoutProperties(formattedProps,_excluded4);var handlePress=React.useCallback(function(item,index){if(!!onChange)onChange(item,index);if(!!onChangeIndex)onChangeIndex(index);if(!!item.onPress)item.onPress();if(!!item.onClick)item.onClick();},[onChange,onChangeIndex]);return _jsx(View,Object.assign({className:"neko-vertical-menu",gap:gap,width:"100%"},props,{children:_jsx(List,{data:items,keyExtractor:function keyExtractor(item,index){return item.key||index;},divider:withDivider,renderItem:function renderItem(_ref4){var item=_ref4.item,index=_ref4.index;return _jsx(Item,Object.assign({item:item,handlePress:handlePress,color:color,sizeCode:sizeCode,index:index},props),item.key||index);}})}));return _jsx(View,Object.assign({className:"neko-vertical-menu",gap:gap,width:"100%"},props,{children:items.map(function(item,index){return _jsx(Item,Object.assign({item:item,handlePress:handlePress,color:color,sizeCode:sizeCode,index:index},props),item.key||index);})}));}
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/actions/menu/VerticalMenu.js";var _excluded=["item","linkPaddingH","linkPaddingV","linkMinHeight","handlePress","linkProps","activeIndex","activeKey","activeColor","color","sizeCode","index"],_excluded2=["active","key"],_excluded3=["item"],_excluded4=["gap","items","onChange","onChangeIndex","withDivider"];import{omit,pipe}from'ramda';import React from'react';import tinycolor from'tinycolor2';import{Divider}from"../../helpers/Separator";import{IconText}from"../../presentation/IconLabel";import{Link}from"../Link";import{List}from"../../list/FlatList";import{SubmenuWrapper}from"./SubmenuWrapper";import{Text}from"../../text/Text";import{View}from"../../structure/View";import{moveScale}from"../../../theme/helpers/sizeScale";import{useColorConverter}from"../../../modifiers/colorConverter";import{useSizeConverter}from"../../../modifiers/sizeConverter";import{useThemeComponentModifier}from"../../../modifiers/themeComponent";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";function LinkItem(_ref){var item=_ref.item,_ref$linkPaddingH=_ref.linkPaddingH,linkPaddingH=_ref$linkPaddingH===void 0?'md':_ref$linkPaddingH,_ref$linkPaddingV=_ref.linkPaddingV,linkPaddingV=_ref$linkPaddingV===void 0?'xs':_ref$linkPaddingV,linkMinHeight=_ref.linkMinHeight,handlePress=_ref.handlePress,linkProps=_ref.linkProps,activeIndex=_ref.activeIndex,activeKey=_ref.activeKey,_ref$activeColor=_ref.activeColor,activeColor=_ref$activeColor===void 0?'primary':_ref$activeColor,color=_ref.color,sizeCode=_ref.sizeCode,index=_ref.index,props=_objectWithoutProperties(_ref,_excluded);activeColor=activeColor||'primary';var _omit=omit(['onClick','onPress'],item),active=_omit.active,key=_omit.key,childProps=_objectWithoutProperties(_omit,_excluded2);if(!active&&activeIndex>=0)active=activeIndex===index;if(!active&&activeKey!==undefined)active=activeKey===item.key;var bg=active&&tinycolor(color).setAlpha(0.03).toString();linkMinHeight=linkMinHeight||moveScale(sizeCode,1);return _jsx(SubmenuWrapper,{item:item,onChange:handlePress,activeKey:activeKey,color:color,children:_jsx(Link,Object.assign({flex:true,center:true,paddingH:linkPaddingH,paddingV:linkPaddingV,minHeight:linkMinHeight,borderL:3,brColor:active?activeColor:'transparent',bg:bg,transition:"border-color 0.5s ease, background 0.3s ease",hover:{br:0}},linkProps,{onPress:function onPress(){return handlePress(item,index);},children:_jsx(IconText,Object.assign({addingV:active&&4,color:active?activeColor:color,fullW:true,size:sizeCode},childProps))}))});}function DividerItem(_ref2){var _ref2$linkPaddingH=_ref2.linkPaddingH,linkPaddingH=_ref2$linkPaddingH===void 0?'md':_ref2$linkPaddingH,item=_ref2.item;var content=_jsx(Divider,Object.assign({height:"xxs",line:true},item));if(!item.label)return content;return _jsxs(_Fragment,{children:[content,_jsx(Text,Object.assign({size:"xs",color:"text4",paddingV:"xs",paddingH:linkPaddingH||'md',strong:true},item))]});}function Item(_ref3){var item=_ref3.item,props=_objectWithoutProperties(_ref3,_excluded3);if(item.type==='divider')return _jsx(DividerItem,Object.assign({item:item},props));return _jsx(LinkItem,Object.assign({item:item},props));}export function VerticalMenu(rootProps){var _this=this;var _pipe=pipe(useColorConverter('text'),useSizeConverter('icons','md'),useThemeComponentModifier('VerticalMenu'))([{},rootProps]),_pipe2=_slicedToArray(_pipe,2),_pipe2$=_pipe2[0],sizeCode=_pipe2$.sizeCode,color=_pipe2$.color,formattedProps=_pipe2[1];var _formattedProps$gap=formattedProps.gap,gap=_formattedProps$gap===void 0?'sm':_formattedProps$gap,items=formattedProps.items,onChange=formattedProps.onChange,onChangeIndex=formattedProps.onChangeIndex,withDivider=formattedProps.withDivider,props=_objectWithoutProperties(formattedProps,_excluded4);var handlePress=React.useCallback(function(item,index){if(!!onChange)onChange(item,index);if(!!onChangeIndex)onChangeIndex(index);if(!!item.onPress)item.onPress();if(!!item.onClick)item.onClick();},[onChange,onChangeIndex]);return _jsx(View,Object.assign({className:"neko-vertical-menu",gap:gap,width:"100%"},props,{children:_jsx(List,{data:items,keyExtractor:function keyExtractor(item,index){return item.key||index;},divider:withDivider,renderItem:function renderItem(_ref4){var item=_ref4.item,index=_ref4.index;return _jsx(Item,Object.assign({item:item,handlePress:handlePress,color:color,sizeCode:sizeCode,index:index},props),item.key||index);}})}));return _jsx(View,Object.assign({className:"neko-vertical-menu",gap:gap,width:"100%"},props,{children:items.map(function(item,index){return _jsx(Item,Object.assign({item:item,handlePress:handlePress,color:color,sizeCode:sizeCode,index:index},props),item.key||index);})}));}

package/dist/components/structure/drawer/Drawer.web.js

@@ -0,0 +1 @@
+import{BottomDrawer}from"../bottomDrawer/native/BottomDrawer";export var Drawer=BottomDrawer;

package/dist/modifiers/animations/animatedEffects.web.js

@@ -1 +1 @@
-import{useAnimatedEffect as useAnimatedEffectNative}from"./animatedEffects.native";export var useAnimatedEffects=useAnimatedEffectNative;
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["open","onClose","lazy","unmountOnClose"];import{pipe}from'ramda';import{useSharedValue}from'react-native-reanimated';import React from'react';import{useFadeEffect}from"./fadeEffect";import{useScaleEffect}from"./scaleEffect";import{useSlideEffect}from"./slideEffect";export function useAnimatedEffects(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],_ref2$=_ref2[1],_ref2$$open=_ref2$.open,open=_ref2$$open===void 0?true:_ref2$$open,onClose=_ref2$.onClose,_ref2$$lazy=_ref2$.lazy,lazy=_ref2$$lazy===void 0?false:_ref2$$lazy,_ref2$$unmountOnClose=_ref2$.unmountOnClose,unmountOnClose=_ref2$$unmountOnClose===void 0?false:_ref2$$unmountOnClose,props=_objectWithoutProperties(_ref2$,_excluded);var unmountTimerRef=React.useRef();var _React$useState=React.useState(0),_React$useState2=_slicedToArray(_React$useState,2),totalDuration=_React$useState2[0],setTotalDuration=_React$useState2[1];var _React$useState3=React.useState(open||!lazy),_React$useState4=_slicedToArray(_React$useState3,2),hasOpened=_React$useState4[0],setHasOpened=_React$useState4[1];var _React$useState5=React.useState(open||!lazy),_React$useState6=_slicedToArray(_React$useState5,2),render=_React$useState6[0],setRender=_React$useState6[1];var useRegisterEffect=function useRegisterEffect(effect){React.useEffect(function(){if(!(effect!=null&&effect.duration))return;setTotalDuration(function(v){return v>effect.duration?v:effect.duration;});},[]);};var translate=useSharedValue(0);React.useEffect(function(){if(open){clearTimeout(unmountTimerRef==null?void 0:unmountTimerRef.current);setHasOpened(true);setRender(true);}else if(unmountOnClose){unmountTimerRef.current=setTimeout(function(){return setRender(false);},totalDuration);}},[open]);return pipe(useFadeEffect,useSlideEffect,useScaleEffect)([Object.assign({},values,{animatedStyles:[],useRegisterEffect:useRegisterEffect,useAddTransition:function useAddTransition(){},open:open,onClose:onClose,lazy:lazy,unmountOnClose:unmountOnClose,hasOpened:hasOpened,setHasOpened:setHasOpened,render:render,setRender:setRender}),Object.assign({},props,{animatedStyles:[]})]);}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neko-os/ui",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "author": "Christian Storch <ccstorch@gmail.com>",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/abstractions/AnimatedView.native.js

@@ -1,5 +1,4 @@
-import { map, prop } from 'ramda'
-import Animated, { useAnimatedStyle } from 'react-native-reanimated'
+import Animated from 'react-native-reanimated'
 
 export function AbsAnimatedView({ children, style, animatedStyles = [] }) {
   return <Animated.View style={[style, ...animatedStyles]}>{children}</Animated.View>

package/src/components/actions/Dropdown.js

@@ -4,6 +4,7 @@ import { IconLabel } from '../presentation/IconLabel'
 import { Link } from './Link'
 import { Menu } from './menu/Menu'
 import { Popover } from '../structure/popover/Popover'
+import { ScrollView } from '../list'
 import { View } from '../structure/View'
 import { useResponsiveValue } from '../../responsive'
 import { useThemeComponentModifier } from '../../modifiers/themeComponent'
@@ -58,14 +59,16 @@ export function Dropdown({ items, ...rootProps }) {
             onClose()
           }
           return (
-            <Menu
-              vertical
-              items={items}
-              onChange={handleChange}
-              linkPaddingH={useBottomDrawer ? 'md' : 'sm'}
-              linkMinHeight={useBottomDrawer ? 'xl' : 'md'}
-              withDivider={useBottomDrawer}
-            />
+            <ScrollView>
+              <Menu
+                vertical
+                items={items}
+                onChange={handleChange}
+                linkPaddingH={useBottomDrawer ? 'md' : 'sm'}
+                linkMinHeight={useBottomDrawer ? 'xl' : 'md'}
+                withDivider={useBottomDrawer}
+              />
+            </ScrollView>
           )
         }}
       >

package/src/components/actions/menu/VerticalMenu.js

@@ -39,12 +39,11 @@ function LinkItem({
   return (
     <SubmenuWrapper item={item} onChange={handlePress} activeKey={activeKey} color={color}>
       <Link
-        fullW
+        flex
         center
         paddingH={linkPaddingH}
         paddingV={linkPaddingV}
         minHeight={linkMinHeight}
-        marginR={3}
         borderL={3}
         brColor={active ? activeColor : 'transparent'}
         bg={bg}

package/src/components/structure/drawer/Drawer.web.js

@@ -0,0 +1,3 @@
+import { BottomDrawer } from '../bottomDrawer/native/BottomDrawer'
+
+export const Drawer = BottomDrawer

package/src/modifiers/animations/animatedEffects.js

@@ -24,7 +24,6 @@ export function useAnimatedEffects([values, { open, onClose, lazy = false, unmou
   const useAddTransition = (effect, transition) => {
     React.useEffect(() => {
       if (!effect?.duration) return
-
       setTransitions((v) => [...v, transition])
     }, [])
   }

package/src/modifiers/animations/animatedEffects.web.js

@@ -1,3 +1,55 @@
-import { useAnimatedEffect as useAnimatedEffectNative } from './animatedEffects.native'
+import { pipe } from 'ramda'
+import { useSharedValue } from 'react-native-reanimated'
+import React from 'react'
 
-export const useAnimatedEffects = useAnimatedEffectNative
+import { useFadeEffect } from './fadeEffect'
+import { useScaleEffect } from './scaleEffect'
+import { useSlideEffect } from './slideEffect'
+
+export function useAnimatedEffects([values, { open = true, onClose, lazy = false, unmountOnClose = false, ...props }]) {
+  const unmountTimerRef = React.useRef()
+  const [totalDuration, setTotalDuration] = React.useState(0)
+  const [hasOpened, setHasOpened] = React.useState(open || !lazy)
+  const [render, setRender] = React.useState(open || !lazy)
+
+  const useRegisterEffect = (effect) => {
+    React.useEffect(() => {
+      if (!effect?.duration) return
+      setTotalDuration((v) => (v > effect.duration ? v : effect.duration))
+    }, [])
+  }
+
+  const translate = useSharedValue(0)
+
+  React.useEffect(() => {
+    if (open) {
+      clearTimeout(unmountTimerRef?.current)
+      setHasOpened(true)
+      setRender(true)
+    } else if (unmountOnClose) {
+      unmountTimerRef.current = setTimeout(() => setRender(false), totalDuration)
+    }
+  }, [open])
+
+  return pipe(
+    useFadeEffect, //
+    useSlideEffect,
+    useScaleEffect
+  )([
+    {
+      ...values,
+      animatedStyles: [],
+      useRegisterEffect,
+      useAddTransition: () => {},
+      open,
+      onClose,
+      lazy,
+      unmountOnClose,
+      hasOpened,
+      setHasOpened,
+      render,
+      setRender,
+    },
+    { ...props, animatedStyles: [] },
+  ])
+}