@neko-os/ui 0.2.0 → 0.2.2

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{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))})}))}));}
+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{DrawerScrollView}from"../modals";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(DrawerScrollView,{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/modals/bottomDrawer/native/DrawerContext.js

@@ -1 +1 @@
-var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/modals/bottomDrawer/native/DrawerContext.js";import React from'react';import{jsx as _jsx}from"react/jsx-runtime";var DrawerContext=React.createContext(null);export function DrawerProvider(_ref){var children=_ref.children,value=_ref.value;return _jsx(DrawerContext.Provider,{value:value,children:children});}export function useDrawerContext(){var context=React.useContext(DrawerContext);if(!context){throw new Error('useDrawerContext must be used within a DrawerProvider');}return context;}
+var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/modals/bottomDrawer/native/DrawerContext.js";import React from'react';import{jsx as _jsx}from"react/jsx-runtime";var DrawerContext=React.createContext(null);export function DrawerProvider(_ref){var children=_ref.children,value=_ref.value;return _jsx(DrawerContext.Provider,{value:value,children:children});}export function useDrawerContext(){var context=React.useContext(DrawerContext);if(!context){return{outOfContext:true};}return context;}

package/dist/components/modals/bottomDrawer/native/createDrawerScrollComponent.js

@@ -1 +1 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/modals/bottomDrawer/native/createDrawerScrollComponent.js";var _excluded=["ref","onScroll"];import{Gesture,GestureDetector}from'react-native-gesture-handler';import Animated,{useSharedValue,useAnimatedScrollHandler,useAnimatedRef,scrollTo,withSpring,runOnJS}from'react-native-reanimated';import React from'react';import{findClosestSnapPoint,clamp}from"./utils";import{useDrawerContext}from"./DrawerContext";import{jsx as _jsx}from"react/jsx-runtime";export function createDrawerScrollComponent(Component){var AnimatedComponent=Animated.createAnimatedComponent(Component);function DrawerScrollComponent(_ref){var ref=_ref.ref,_onScroll=_ref.onScroll,props=_objectWithoutProperties(_ref,_excluded);var _useDrawerContext=useDrawerContext(),translateY=_useDrawerContext.translateY,panRef=_useDrawerContext.panRef,normalizedSnapPoints=_useDrawerContext.normalizedSnapPoints,SCREEN_HEIGHT=_useDrawerContext.SCREEN_HEIGHT,maxSnapPoint=_useDrawerContext.maxSnapPoint,minSnapPoint=_useDrawerContext.minSnapPoint,handleClose=_useDrawerContext.handleClose,animationConfig=_useDrawerContext.animationConfig,snapIndex=_useDrawerContext.snapIndex;var scrollRef=useAnimatedRef();var scrollOffset=useSharedValue(0);var prevTranslationY=useSharedValue(0);var drawerMoved=useSharedValue(false);React.useImperativeHandle(ref,function(){return scrollRef.current;});var maxPosition=SCREEN_HEIGHT-maxSnapPoint;var panGesture=React.useMemo(function(){return Gesture.Pan().activeOffsetY([-10,10]).blocksExternalGesture(panRef).onStart(function(){prevTranslationY.value=0;drawerMoved.value=false;}).onUpdate(function(event){var delta=event.translationY-prevTranslationY.value;prevTranslationY.value=event.translationY;var currentY=translateY.value;var atMaxSnap=currentY<=maxPosition+1;var atScrollTop=scrollOffset.value<=0;if(drawerMoved.value){var newY=clamp(currentY+delta,maxPosition,SCREEN_HEIGHT);translateY.value=newY;scrollTo(scrollRef,0,0,false);if(newY<=maxPosition+1&&delta<0){drawerMoved.value=false;}}else if(!atMaxSnap){drawerMoved.value=true;var _newY=clamp(currentY+delta,maxPosition,SCREEN_HEIGHT);translateY.value=_newY;scrollTo(scrollRef,0,0,false);}else if(atScrollTop&&delta>0){drawerMoved.value=true;var _newY2=clamp(currentY+delta,maxPosition,SCREEN_HEIGHT);translateY.value=_newY2;scrollTo(scrollRef,0,0,false);}}).onEnd(function(event){if(!drawerMoved.value)return;var currentPosition=SCREEN_HEIGHT-translateY.value;var velocity=event.velocityY;var shouldClose=!!handleClose&&(velocity>1500||velocity>800&&currentPosition<minSnapPoint||currentPosition<minSnapPoint*0.35);if(shouldClose){runOnJS(handleClose)();}else{var closestSnapIndex=findClosestSnapPoint(currentPosition,normalizedSnapPoints,velocity);var targetSnapPoint=normalizedSnapPoints[closestSnapIndex];translateY.value=withSpring(SCREEN_HEIGHT-targetSnapPoint,animationConfig);snapIndex.value=closestSnapIndex;}});},[panRef,maxPosition,normalizedSnapPoints,minSnapPoint,handleClose,animationConfig]);var nativeGesture=React.useMemo(function(){return Gesture.Native();},[]);var composedGesture=React.useMemo(function(){return Gesture.Simultaneous(panGesture,nativeGesture);},[panGesture,nativeGesture]);var animatedScrollHandler=useAnimatedScrollHandler({onScroll:function onScroll(event){scrollOffset.value=event.contentOffset.y;if(_onScroll){runOnJS(_onScroll)(event);}}});return _jsx(GestureDetector,{gesture:composedGesture,children:_jsx(AnimatedComponent,Object.assign({ref:scrollRef,style:{flex:1},onScroll:animatedScrollHandler,scrollEventThrottle:16,bounces:false,overScrollMode:"never"},props))});}return DrawerScrollComponent;}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/modals/bottomDrawer/native/createDrawerScrollComponent.js";var _excluded=["ref","onScroll"];import{Gesture,GestureDetector}from'react-native-gesture-handler';import Animated,{useSharedValue,useAnimatedScrollHandler,useAnimatedRef,scrollTo,withSpring,runOnJS}from'react-native-reanimated';import React from'react';import{findClosestSnapPoint,clamp}from"./utils";import{useDrawerContext}from"./DrawerContext";import{jsx as _jsx}from"react/jsx-runtime";export function createDrawerScrollComponent(Component){var AnimatedComponent=Animated.createAnimatedComponent(Component);function DrawerScrollComponent(_ref){var ref=_ref.ref,_onScroll=_ref.onScroll,props=_objectWithoutProperties(_ref,_excluded);var _useDrawerContext=useDrawerContext(),translateY=_useDrawerContext.translateY,panRef=_useDrawerContext.panRef,normalizedSnapPoints=_useDrawerContext.normalizedSnapPoints,SCREEN_HEIGHT=_useDrawerContext.SCREEN_HEIGHT,maxSnapPoint=_useDrawerContext.maxSnapPoint,minSnapPoint=_useDrawerContext.minSnapPoint,handleClose=_useDrawerContext.handleClose,animationConfig=_useDrawerContext.animationConfig,snapIndex=_useDrawerContext.snapIndex;var scrollRef=useAnimatedRef();var scrollOffset=useSharedValue(0);var prevTranslationY=useSharedValue(0);var drawerMoved=useSharedValue(false);React.useImperativeHandle(ref,function(){return scrollRef.current;});var maxPosition=SCREEN_HEIGHT-maxSnapPoint;var panGesture=React.useMemo(function(){return Gesture.Pan().activeOffsetY([-10,10]).blocksExternalGesture(panRef).onStart(function(){prevTranslationY.value=0;drawerMoved.value=false;}).onUpdate(function(event){var delta=event.translationY-prevTranslationY.value;prevTranslationY.value=event.translationY;var currentY=translateY.value;var atMaxSnap=currentY<=maxPosition+1;var atScrollTop=scrollOffset.value<=0;if(drawerMoved.value){var newY=clamp(currentY+delta,maxPosition,SCREEN_HEIGHT);translateY.value=newY;scrollTo(scrollRef,0,0,false);if(newY<=maxPosition+1&&delta<0){drawerMoved.value=false;}}else if(!atMaxSnap){drawerMoved.value=true;var _newY=clamp(currentY+delta,maxPosition,SCREEN_HEIGHT);translateY.value=_newY;scrollTo(scrollRef,0,0,false);}else if(atScrollTop&&delta>0){drawerMoved.value=true;var _newY2=clamp(currentY+delta,maxPosition,SCREEN_HEIGHT);translateY.value=_newY2;scrollTo(scrollRef,0,0,false);}}).onEnd(function(event){if(!drawerMoved.value)return;var currentPosition=SCREEN_HEIGHT-translateY.value;var velocity=event.velocityY;var shouldClose=!!handleClose&&(velocity>1500||velocity>800&&currentPosition<minSnapPoint||currentPosition<minSnapPoint*0.35);if(shouldClose){runOnJS(handleClose)();}else{var closestSnapIndex=findClosestSnapPoint(currentPosition,normalizedSnapPoints,velocity);var targetSnapPoint=normalizedSnapPoints[closestSnapIndex];translateY.value=withSpring(SCREEN_HEIGHT-targetSnapPoint,animationConfig);snapIndex.value=closestSnapIndex;}});},[panRef,maxPosition,normalizedSnapPoints,minSnapPoint,handleClose,animationConfig]);var nativeGesture=React.useMemo(function(){return Gesture.Native();},[]);var composedGesture=React.useMemo(function(){return Gesture.Simultaneous(panGesture,nativeGesture);},[panGesture,nativeGesture]);var animatedScrollHandler=useAnimatedScrollHandler({onScroll:function onScroll(event){scrollOffset.value=event.contentOffset.y;if(_onScroll){runOnJS(_onScroll)(event);}}});return _jsx(GestureDetector,{gesture:composedGesture,children:_jsx(AnimatedComponent,Object.assign({ref:scrollRef,style:{flex:1},onScroll:animatedScrollHandler,scrollEventThrottle:16,bounces:false,overScrollMode:"never"},props))});}function ConditionalDrawerScrollComponent(props){var _useDrawerContext2=useDrawerContext(),outOfContext=_useDrawerContext2.outOfContext;if(outOfContext)return _jsx(Component,Object.assign({},props));return _jsx(DrawerScrollComponent,Object.assign({},props));}return ConditionalDrawerScrollComponent;}

package/dist/modifiers/_helpers.js

@@ -1 +1 @@
-import{pickBy}from'ramda';export var clearProps=pickBy(function(item){return item!==undefined;});
+import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import{pickBy}from'ramda';export var clearProps=pickBy(function(item){return item!==undefined;});export var flattenStyle=function flattenStyle(style){return Array.isArray(style)?Object.assign.apply(Object,[{}].concat(_toConsumableArray(style))):style;};

package/dist/modifiers/animation.js

@@ -1 +1 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["transition"];import{clearProps}from"./_helpers";export function useAnimationModifier(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var transition=props.transition,restProps=_objectWithoutProperties(props,_excluded);var style=clearProps({transition:transition});return[values,Object.assign({},restProps,{style:Object.assign({},props.style,style)})];}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["transition"];import{clearProps,flattenStyle}from"./_helpers";export function useAnimationModifier(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var transition=props.transition,restProps=_objectWithoutProperties(props,_excluded);var style=clearProps({transition:transition});return[values,Object.assign({},restProps,{style:Object.assign({},flattenStyle(props.style),style)})];}

package/dist/modifiers/animations/fadeEffect.js

@@ -1 +1 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["fade"];import React from'react';var DEFAULT_EFFECT={duration:300};export function useFadeEffect(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],_ref2$=_ref2[1],fade=_ref2$.fade,props=_objectWithoutProperties(_ref2$,_excluded);if(fade===true)fade=DEFAULT_EFFECT;if(!!fade)fade=Object.assign({},DEFAULT_EFFECT,fade);var _ref3=fade||{},duration=_ref3.duration;var open=values.open,useRegisterEffect=values.useRegisterEffect,useAddTransition=values.useAddTransition;var _React$useState=React.useState(0),_React$useState2=_slicedToArray(_React$useState,2),opacity=_React$useState2[0],setOpacity=_React$useState2[1];useRegisterEffect(fade);useAddTransition(fade,`opacity ${duration}ms ease-in-out`);React.useEffect(function(){if(!fade)return;if(open){setOpacity(0);requestAnimationFrame(function(){requestAnimationFrame(function(){setOpacity(1);});});}else{setOpacity(0);}},[open]);if(!fade)return[values,props];var style={opacity:opacity};return[values,Object.assign({},props,{style:Object.assign({},props.style,style)})];}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["fade"];import React from'react';import{flattenStyle}from"../_helpers";var DEFAULT_EFFECT={duration:300};export function useFadeEffect(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],_ref2$=_ref2[1],fade=_ref2$.fade,props=_objectWithoutProperties(_ref2$,_excluded);if(fade===true)fade=DEFAULT_EFFECT;if(!!fade)fade=Object.assign({},DEFAULT_EFFECT,fade);var _ref3=fade||{},duration=_ref3.duration;var open=values.open,useRegisterEffect=values.useRegisterEffect,useAddTransition=values.useAddTransition;var _React$useState=React.useState(0),_React$useState2=_slicedToArray(_React$useState,2),opacity=_React$useState2[0],setOpacity=_React$useState2[1];useRegisterEffect(fade);useAddTransition(fade,`opacity ${duration}ms ease-in-out`);React.useEffect(function(){if(!fade)return;if(open){setOpacity(0);requestAnimationFrame(function(){requestAnimationFrame(function(){setOpacity(1);});});}else{setOpacity(0);}},[open]);if(!fade)return[values,props];var style={opacity:opacity};return[values,Object.assign({},props,{style:Object.assign({},flattenStyle(props.style),style)})];}

package/dist/modifiers/animations/scaleEffect.js

@@ -1 +1 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["scale"];import React from'react';var DEFAULT_EFFECT={duration:300,initialScale:0};export function useScaleEffect(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],_ref2$=_ref2[1],scale=_ref2$.scale,props=_objectWithoutProperties(_ref2$,_excluded);if(scale===true)scale=DEFAULT_EFFECT;if(!!scale)scale=Object.assign({},DEFAULT_EFFECT,scale);var _ref3=scale||{},duration=_ref3.duration,initialScale=_ref3.initialScale;var open=values.open,useRegisterEffect=values.useRegisterEffect,useAddTransition=values.useAddTransition;var _React$useState=React.useState(`scale(${initialScale})`),_React$useState2=_slicedToArray(_React$useState,2),transform=_React$useState2[0],setTransform=_React$useState2[1];useRegisterEffect(scale);useAddTransition(scale,`transform ${duration}ms ease-in-out`);React.useEffect(function(){if(!scale)return;if(open){setTransform(`scale(${initialScale})`);requestAnimationFrame(function(){requestAnimationFrame(function(){setTransform('scale(1)');});});}else{setTransform(`scale(${initialScale})`);}},[open]);if(!scale)return[values,props];var style={transform:transform};return[values,Object.assign({},props,{style:Object.assign({},props.style,style)})];}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["scale"];import React from'react';import{flattenStyle}from"../_helpers";var DEFAULT_EFFECT={duration:300,initialScale:0};export function useScaleEffect(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],_ref2$=_ref2[1],scale=_ref2$.scale,props=_objectWithoutProperties(_ref2$,_excluded);if(scale===true)scale=DEFAULT_EFFECT;if(!!scale)scale=Object.assign({},DEFAULT_EFFECT,scale);var _ref3=scale||{},duration=_ref3.duration,initialScale=_ref3.initialScale;var open=values.open,useRegisterEffect=values.useRegisterEffect,useAddTransition=values.useAddTransition;var _React$useState=React.useState(`scale(${initialScale})`),_React$useState2=_slicedToArray(_React$useState,2),transform=_React$useState2[0],setTransform=_React$useState2[1];useRegisterEffect(scale);useAddTransition(scale,`transform ${duration}ms ease-in-out`);React.useEffect(function(){if(!scale)return;if(open){setTransform(`scale(${initialScale})`);requestAnimationFrame(function(){requestAnimationFrame(function(){setTransform('scale(1)');});});}else{setTransform(`scale(${initialScale})`);}},[open]);if(!scale)return[values,props];var style={transform:transform};return[values,Object.assign({},props,{style:Object.assign({},flattenStyle(props.style),style)})];}

package/dist/modifiers/animations/slideEffect.js

@@ -1 +1 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["slide"];import React from'react';var DEFAULT_EFFECT={duration:400,from:'top'};export function useSlideEffect(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],_ref2$=_ref2[1],slide=_ref2$.slide,props=_objectWithoutProperties(_ref2$,_excluded);if(slide===true)slide=DEFAULT_EFFECT;if(!!slide)slide=Object.assign({},DEFAULT_EFFECT,slide);var _ref3=slide||{},duration=_ref3.duration,from=_ref3.from,distance=_ref3.distance;var open=values.open,useRegisterEffect=values.useRegisterEffect,useAddTransition=values.useAddTransition;var initialValue=React.useMemo(function(){var w=window.innerWidth;var h=window.innerHeight;switch(from){case'left':return`translateX(-${distance||w}px)`;case'right':return`translateX(${distance||w}px)`;case'top':return`translateY(-${distance||h}px)`;case'bottom':return`translateY(${distance||h}px)`;default:return`translateX(-${distance||w}px)`;}},[distance,from]);var _React$useState=React.useState(initialValue),_React$useState2=_slicedToArray(_React$useState,2),transform=_React$useState2[0],setTransform=_React$useState2[1];useRegisterEffect(slide);useAddTransition(slide,`transform ${duration}ms ease-in-out`);React.useLayoutEffect(function(){if(!slide)return;if(open){setTransform(initialValue);requestAnimationFrame(function(){requestAnimationFrame(function(){setTransform('translateY(0)');});});}else{setTransform(initialValue);}},[open]);if(!slide)return[values,props];var style={transform:transform};return[values,Object.assign({},props,{style:Object.assign({},props.style,style)})];}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["slide"];import React from'react';import{flattenStyle}from"../_helpers";var DEFAULT_EFFECT={duration:400,from:'top'};export function useSlideEffect(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],_ref2$=_ref2[1],slide=_ref2$.slide,props=_objectWithoutProperties(_ref2$,_excluded);if(slide===true)slide=DEFAULT_EFFECT;if(!!slide)slide=Object.assign({},DEFAULT_EFFECT,slide);var _ref3=slide||{},duration=_ref3.duration,from=_ref3.from,distance=_ref3.distance;var open=values.open,useRegisterEffect=values.useRegisterEffect,useAddTransition=values.useAddTransition;var initialValue=React.useMemo(function(){var w=window.innerWidth;var h=window.innerHeight;switch(from){case'left':return`translateX(-${distance||w}px)`;case'right':return`translateX(${distance||w}px)`;case'top':return`translateY(-${distance||h}px)`;case'bottom':return`translateY(${distance||h}px)`;default:return`translateX(-${distance||w}px)`;}},[distance,from]);var _React$useState=React.useState(initialValue),_React$useState2=_slicedToArray(_React$useState,2),transform=_React$useState2[0],setTransform=_React$useState2[1];useRegisterEffect(slide);useAddTransition(slide,`transform ${duration}ms ease-in-out`);React.useLayoutEffect(function(){if(!slide)return;if(open){setTransform(initialValue);requestAnimationFrame(function(){requestAnimationFrame(function(){setTransform('translateY(0)');});});}else{setTransform(initialValue);}},[open]);if(!slide)return[values,props];var style={transform:transform};return[values,Object.assign({},props,{style:Object.assign({},flattenStyle(props.style),style)})];}

package/dist/modifiers/background.js

@@ -1 +1 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["bg","colors","background","backgroundColor"];import{is}from'ramda';import{clearProps}from"./_helpers";import{useGetColor}from"../theme/ThemeHandler";export function useBackgroundModifier(_ref){var _colors;var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var getColor=useGetColor();var bg=props.bg,colors=props.colors,background=props.background,backgroundColor=props.backgroundColor,restProps=_objectWithoutProperties(props,_excluded);var gradientColors=[];if(is(Array,bg)||!!((_colors=colors)!=null&&_colors.length)){colors=colors||bg||[];gradientColors=colors.map(getColor);var angle=restProps.angle||45;background=`linear-gradient(${angle}deg, ${gradientColors.join(', ')})`;}else{var _ref3;backgroundColor=getColor((_ref3=bg!=null?bg:background)!=null?_ref3:backgroundColor);}var pointerEvents=props.pointerEvents;var style=clearProps({background:background,backgroundColor:backgroundColor,pointerEvents:pointerEvents});return[Object.assign({gradientColors:gradientColors},values),Object.assign({},restProps,{style:Object.assign({},props.style,style)})];}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["bg","colors","background","backgroundColor"];import{is}from'ramda';import{clearProps,flattenStyle}from"./_helpers";import{useGetColor}from"../theme/ThemeHandler";export function useBackgroundModifier(_ref){var _colors;var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var getColor=useGetColor();var bg=props.bg,colors=props.colors,background=props.background,backgroundColor=props.backgroundColor,restProps=_objectWithoutProperties(props,_excluded);var gradientColors=[];if(is(Array,bg)||!!((_colors=colors)!=null&&_colors.length)){colors=colors||bg||[];gradientColors=colors.map(getColor);var angle=restProps.angle||45;background=`linear-gradient(${angle}deg, ${gradientColors.join(', ')})`;}else{var _ref3;backgroundColor=getColor((_ref3=bg!=null?bg:background)!=null?_ref3:backgroundColor);}var pointerEvents=props.pointerEvents;var style=clearProps({background:background,backgroundColor:backgroundColor,pointerEvents:pointerEvents});return[Object.assign({gradientColors:gradientColors},values),Object.assign({},restProps,{style:Object.assign({},flattenStyle(props.style),style)})];}

package/dist/modifiers/border.js

@@ -1 +1 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["br","brT","borderRadiusT","brB","borderRadiusB","brL","borderRadiusL","brR","borderRadiusR","borderRadius","borderStyle","borderT","borderB","borderL","borderR","border","borderColor","brColor","round"];import{clearProps}from"./_helpers";import{useGetColor,useGetRadius}from"../theme/ThemeHandler";export function useBorderModifier(_ref){var _ref3,_ref4,_ref5,_ref6,_ref7,_ref8,_ref9,_ref0,_ref1,_ref10,_ref11,_ref12,_ref13,_ref14,_ref15,_ref16,_borderColor;var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var getRadius=useGetRadius();var getColor=useGetColor();var br=props.br,brT=props.brT,borderRadiusT=props.borderRadiusT,brB=props.brB,borderRadiusB=props.borderRadiusB,brL=props.brL,borderRadiusL=props.borderRadiusL,brR=props.brR,borderRadiusR=props.borderRadiusR,borderRadius=props.borderRadius,borderStyle=props.borderStyle,borderT=props.borderT,borderB=props.borderB,borderL=props.borderL,borderR=props.borderR,border=props.border,borderColor=props.borderColor,brColor=props.brColor,round=props.round,restProps=_objectWithoutProperties(props,_excluded);if(!!round)br=1000;var borderTopRightRadius=getRadius((_ref3=(_ref4=(_ref5=(_ref6=brT!=null?brT:borderRadiusT)!=null?_ref6:brR)!=null?_ref5:borderRadiusR)!=null?_ref4:borderRadius)!=null?_ref3:br);var borderTopLeftRadius=getRadius((_ref7=(_ref8=(_ref9=(_ref0=brT!=null?brT:borderRadiusT)!=null?_ref0:brL)!=null?_ref9:borderRadiusL)!=null?_ref8:borderRadius)!=null?_ref7:br);var borderBottomRightRadius=getRadius((_ref1=(_ref10=(_ref11=(_ref12=brB!=null?brB:borderRadiusB)!=null?_ref12:brR)!=null?_ref11:borderRadiusR)!=null?_ref10:borderRadius)!=null?_ref1:br);var borderBottomLeftRadius=getRadius((_ref13=(_ref14=(_ref15=(_ref16=brB!=null?brB:borderRadiusB)!=null?_ref16:brL)!=null?_ref15:borderRadiusL)!=null?_ref14:borderRadius)!=null?_ref13:br);borderStyle=borderStyle;if(border===true)border=1;if(borderT===true)borderT=1;if(borderR===true)borderR=1;if(borderB===true)borderB=1;if(borderL===true)borderL=1;var borderTopWidth=borderT||border||0;var borderBottomWidth=borderB||border||0;var borderLeftWidth=borderL||border||0;var borderRightWidth=borderR||border||0;var hasBorder=borderTopWidth||borderBottomWidth||borderLeftWidth||borderRightWidth;if(!!hasBorder){borderStyle='solid';if(!borderColor&&!brColor)brColor='divider';}if(!!borderColor||!!brColor)borderColor=getColor((_borderColor=borderColor)!=null?_borderColor:brColor);var style=clearProps({borderStyle:borderStyle,borderTopRightRadius:borderTopRightRadius,borderTopLeftRadius:borderTopLeftRadius,borderBottomRightRadius:borderBottomRightRadius,borderBottomLeftRadius:borderBottomLeftRadius,borderColor:borderColor,borderTopWidth:borderTopWidth,borderBottomWidth:borderBottomWidth,borderLeftWidth:borderLeftWidth,borderRightWidth:borderRightWidth});return[values,Object.assign({},restProps,{style:Object.assign({},props.style,style)})];}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["br","brT","borderRadiusT","brB","borderRadiusB","brL","borderRadiusL","brR","borderRadiusR","borderRadius","borderStyle","borderT","borderB","borderL","borderR","border","borderColor","brColor","round"];import{clearProps,flattenStyle}from"./_helpers";import{useGetColor,useGetRadius}from"../theme/ThemeHandler";export function useBorderModifier(_ref){var _ref3,_ref4,_ref5,_ref6,_ref7,_ref8,_ref9,_ref0,_ref1,_ref10,_ref11,_ref12,_ref13,_ref14,_ref15,_ref16,_borderColor;var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var getRadius=useGetRadius();var getColor=useGetColor();var br=props.br,brT=props.brT,borderRadiusT=props.borderRadiusT,brB=props.brB,borderRadiusB=props.borderRadiusB,brL=props.brL,borderRadiusL=props.borderRadiusL,brR=props.brR,borderRadiusR=props.borderRadiusR,borderRadius=props.borderRadius,borderStyle=props.borderStyle,borderT=props.borderT,borderB=props.borderB,borderL=props.borderL,borderR=props.borderR,border=props.border,borderColor=props.borderColor,brColor=props.brColor,round=props.round,restProps=_objectWithoutProperties(props,_excluded);if(!!round)br=1000;var borderTopRightRadius=getRadius((_ref3=(_ref4=(_ref5=(_ref6=brT!=null?brT:borderRadiusT)!=null?_ref6:brR)!=null?_ref5:borderRadiusR)!=null?_ref4:borderRadius)!=null?_ref3:br);var borderTopLeftRadius=getRadius((_ref7=(_ref8=(_ref9=(_ref0=brT!=null?brT:borderRadiusT)!=null?_ref0:brL)!=null?_ref9:borderRadiusL)!=null?_ref8:borderRadius)!=null?_ref7:br);var borderBottomRightRadius=getRadius((_ref1=(_ref10=(_ref11=(_ref12=brB!=null?brB:borderRadiusB)!=null?_ref12:brR)!=null?_ref11:borderRadiusR)!=null?_ref10:borderRadius)!=null?_ref1:br);var borderBottomLeftRadius=getRadius((_ref13=(_ref14=(_ref15=(_ref16=brB!=null?brB:borderRadiusB)!=null?_ref16:brL)!=null?_ref15:borderRadiusL)!=null?_ref14:borderRadius)!=null?_ref13:br);borderStyle=borderStyle;if(border===true)border=1;if(borderT===true)borderT=1;if(borderR===true)borderR=1;if(borderB===true)borderB=1;if(borderL===true)borderL=1;var borderTopWidth=borderT||border||0;var borderBottomWidth=borderB||border||0;var borderLeftWidth=borderL||border||0;var borderRightWidth=borderR||border||0;var hasBorder=borderTopWidth||borderBottomWidth||borderLeftWidth||borderRightWidth;if(!!hasBorder){borderStyle='solid';if(!borderColor&&!brColor)brColor='divider';}if(!!borderColor||!!brColor)borderColor=getColor((_borderColor=borderColor)!=null?_borderColor:brColor);var style=clearProps({borderStyle:borderStyle,borderTopRightRadius:borderTopRightRadius,borderTopLeftRadius:borderTopLeftRadius,borderBottomRightRadius:borderBottomRightRadius,borderBottomLeftRadius:borderBottomLeftRadius,borderColor:borderColor,borderTopWidth:borderTopWidth,borderBottomWidth:borderBottomWidth,borderLeftWidth:borderLeftWidth,borderRightWidth:borderRightWidth});return[values,Object.assign({},restProps,{style:Object.assign({},flattenStyle(props.style),style)})];}

package/dist/modifiers/cursor.js

@@ -1 +1 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["pointer","cursor","move"];import{clearProps}from"./_helpers";export function useCursorModifier(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var pointer=props.pointer,cursor=props.cursor,move=props.move,restProps=_objectWithoutProperties(props,_excluded);if(pointer===true)cursor='pointer';if(move===true)cursor='move';var style=clearProps({cursor:cursor});return[values,Object.assign({},restProps,{style:Object.assign({},props.style,style)})];}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["pointer","cursor","move"];import{clearProps,flattenStyle}from"./_helpers";export function useCursorModifier(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var pointer=props.pointer,cursor=props.cursor,move=props.move,restProps=_objectWithoutProperties(props,_excluded);if(pointer===true)cursor='pointer';if(move===true)cursor='move';var style=clearProps({cursor:cursor});return[values,Object.assign({},restProps,{style:Object.assign({},flattenStyle(props.style),style)})];}

package/dist/modifiers/display.js

@@ -1 +1 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["opacity","hidden","display","inline","block"];import{clearProps}from"./_helpers";export function useDisplayModifier(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var opacity=props.opacity,hidden=props.hidden,display=props.display,inline=props.inline,block=props.block,restProps=_objectWithoutProperties(props,_excluded);if(!!hidden)display='hidden';if(!!inline)display='inline';if(!!block)display='block';var style=clearProps({display:display,opacity:opacity});return[values,Object.assign({},restProps,{style:Object.assign({},props.style,style)})];}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["opacity","hidden","display","inline","block"];import{clearProps,flattenStyle}from"./_helpers";export function useDisplayModifier(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var opacity=props.opacity,hidden=props.hidden,display=props.display,inline=props.inline,block=props.block,restProps=_objectWithoutProperties(props,_excluded);if(!!hidden)display='hidden';if(!!inline)display='inline';if(!!block)display='block';var style=clearProps({display:display,opacity:opacity});return[values,Object.assign({},restProps,{style:Object.assign({},flattenStyle(props.style),style)})];}

package/dist/modifiers/flex.js

@@ -1 +1 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["flex"];import{clearProps}from"./_helpers";export function useFlexModifier(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var flex=props.flex,restProps=_objectWithoutProperties(props,_excluded);if(flex===true)flex=1;var style=clearProps({flex:flex,minWidth:0});return[values,Object.assign({},restProps,{style:Object.assign({},props.style,style)})];}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["flex"];import{clearProps,flattenStyle}from"./_helpers";export function useFlexModifier(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var flex=props.flex,restProps=_objectWithoutProperties(props,_excluded);if(flex===true)flex=1;var style=clearProps({flex:flex,minWidth:0});return[values,Object.assign({},restProps,{style:Object.assign({},flattenStyle(props.style),style)})];}

package/dist/modifiers/flexWrapper.js

@@ -1 +1 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["justify","align","center","centerV","centerH","toRight","toBottom","toLeft","toTop","direction","row","wrap","gap","noGap"];import{clearProps}from"./_helpers";import{useGetSpace}from"../theme/ThemeHandler";export function useFlexWrapperModifier(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var getSpace=useGetSpace();var justify=props.justify,align=props.align,center=props.center,centerV=props.centerV,centerH=props.centerH,toRight=props.toRight,toBottom=props.toBottom,toLeft=props.toLeft,toTop=props.toTop,direction=props.direction,row=props.row,wrap=props.wrap,gap=props.gap,noGap=props.noGap,restProps=_objectWithoutProperties(props,_excluded);var flexDirection=direction||(row?'row':'column');var justifyContent=justify;var alignItems=align;var flexWrap;gap=getSpace(gap);if(noGap)gap=undefined;var isRow=flexDirection==='row';var mainAxis=isRow?'horizontal':'vertical';var crossAxis=isRow?'vertical':'horizontal';if(center){justifyContent='center';alignItems='center';}else{if(centerH){if(mainAxis==='horizontal')justifyContent='center';else alignItems='center';}if(centerV){if(mainAxis==='vertical')justifyContent='center';else alignItems='center';}if(toRight){if(mainAxis==='horizontal')justifyContent='flex-end';else alignItems='flex-end';}if(toLeft){if(mainAxis==='horizontal')justifyContent='flex-start';else alignItems='flex-start';}if(toBottom){if(mainAxis==='vertical')justifyContent='flex-end';else alignItems='flex-end';}if(toTop){if(mainAxis==='vertical')justifyContent='flex-start';else alignItems='flex-start';}}if(wrap)flexWrap='wrap';var style=clearProps({display:'flex',justifyContent:justifyContent,alignItems:alignItems,flexDirection:flexDirection,flexWrap:flexWrap,gap:gap});return[values,Object.assign({},restProps,{style:Object.assign({},props.style,style)})];}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["justify","align","center","centerV","centerH","toRight","toBottom","toLeft","toTop","direction","row","wrap","gap","noGap"];import{clearProps,flattenStyle}from"./_helpers";import{useGetSpace}from"../theme/ThemeHandler";export function useFlexWrapperModifier(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var getSpace=useGetSpace();var justify=props.justify,align=props.align,center=props.center,centerV=props.centerV,centerH=props.centerH,toRight=props.toRight,toBottom=props.toBottom,toLeft=props.toLeft,toTop=props.toTop,direction=props.direction,row=props.row,wrap=props.wrap,gap=props.gap,noGap=props.noGap,restProps=_objectWithoutProperties(props,_excluded);var flexDirection=direction||(row?'row':'column');var justifyContent=justify;var alignItems=align;var flexWrap;gap=getSpace(gap);if(noGap)gap=undefined;var isRow=flexDirection==='row';var mainAxis=isRow?'horizontal':'vertical';var crossAxis=isRow?'vertical':'horizontal';if(center){justifyContent='center';alignItems='center';}else{if(centerH){if(mainAxis==='horizontal')justifyContent='center';else alignItems='center';}if(centerV){if(mainAxis==='vertical')justifyContent='center';else alignItems='center';}if(toRight){if(mainAxis==='horizontal')justifyContent='flex-end';else alignItems='flex-end';}if(toLeft){if(mainAxis==='horizontal')justifyContent='flex-start';else alignItems='flex-start';}if(toBottom){if(mainAxis==='vertical')justifyContent='flex-end';else alignItems='flex-end';}if(toTop){if(mainAxis==='vertical')justifyContent='flex-start';else alignItems='flex-start';}}if(wrap)flexWrap='wrap';var style=clearProps({display:'flex',justifyContent:justifyContent,alignItems:alignItems,flexDirection:flexDirection,flexWrap:flexWrap,gap:gap});return[values,Object.assign({},restProps,{style:Object.assign({},flattenStyle(props.style),style)})];}

package/dist/modifiers/margin.js

@@ -1 +1 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["marginT","marginB","marginL","marginR","marginV","marginH","margin"];import{clearProps}from"./_helpers";import{useGetSpace}from"../theme/ThemeHandler";export function useMarginModifier(_ref){var _ref3,_ref4,_ref5,_ref6;var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var getSpace=useGetSpace();var marginT=props.marginT,marginB=props.marginB,marginL=props.marginL,marginR=props.marginR,marginV=props.marginV,marginH=props.marginH,margin=props.margin,restProps=_objectWithoutProperties(props,_excluded);var marginTop=getSpace((_ref3=marginT!=null?marginT:marginV)!=null?_ref3:margin);var marginBottom=getSpace((_ref4=marginB!=null?marginB:marginV)!=null?_ref4:margin);var marginRight=getSpace((_ref5=marginR!=null?marginR:marginH)!=null?_ref5:margin);var marginLeft=getSpace((_ref6=marginL!=null?marginL:marginH)!=null?_ref6:margin);var style=clearProps({marginTop:marginTop,marginBottom:marginBottom,marginRight:marginRight,marginLeft:marginLeft});return[values,Object.assign({},restProps,{style:Object.assign({},props.style,style)})];}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["marginT","marginB","marginL","marginR","marginV","marginH","margin"];import{clearProps,flattenStyle}from"./_helpers";import{useGetSpace}from"../theme/ThemeHandler";export function useMarginModifier(_ref){var _ref3,_ref4,_ref5,_ref6;var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var getSpace=useGetSpace();var marginT=props.marginT,marginB=props.marginB,marginL=props.marginL,marginR=props.marginR,marginV=props.marginV,marginH=props.marginH,margin=props.margin,restProps=_objectWithoutProperties(props,_excluded);var marginTop=getSpace((_ref3=marginT!=null?marginT:marginV)!=null?_ref3:margin);var marginBottom=getSpace((_ref4=marginB!=null?marginB:marginV)!=null?_ref4:margin);var marginRight=getSpace((_ref5=marginR!=null?marginR:marginH)!=null?_ref5:margin);var marginLeft=getSpace((_ref6=marginL!=null?marginL:marginH)!=null?_ref6:margin);var style=clearProps({marginTop:marginTop,marginBottom:marginBottom,marginRight:marginRight,marginLeft:marginLeft});return[values,Object.assign({},restProps,{style:Object.assign({},flattenStyle(props.style),style)})];}

package/dist/modifiers/overflow.js

@@ -1 +1 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["hiddenOverflow","scroll","noScroll","scrollY","scrollX","overflow","overflowY","overflowX"];import{clearProps}from"./_helpers";export function useOverflowModifier(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var hiddenOverflow=props.hiddenOverflow,scroll=props.scroll,noScroll=props.noScroll,scrollY=props.scrollY,scrollX=props.scrollX,overflow=props.overflow,overflowY=props.overflowY,overflowX=props.overflowX,restProps=_objectWithoutProperties(props,_excluded);if(hiddenOverflow)overflow='hidden';if(scroll)overflow='scroll';if(scrollY)overflowY='scroll';if(scrollX)overflowX='scroll';if(noScroll){if(overflow==='scroll')overflow=undefined;if(overflowY==='scroll')overflowY=undefined;if(overflowX==='scroll')overflowX=undefined;}var style=clearProps({overflow:overflow,overflowY:overflowY,overflowX:overflowX});return[values,Object.assign({},restProps,{style:Object.assign({},props.style,style)})];}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["hiddenOverflow","scroll","noScroll","scrollY","scrollX","overflow","overflowY","overflowX"];import{clearProps,flattenStyle}from"./_helpers";export function useOverflowModifier(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var hiddenOverflow=props.hiddenOverflow,scroll=props.scroll,noScroll=props.noScroll,scrollY=props.scrollY,scrollX=props.scrollX,overflow=props.overflow,overflowY=props.overflowY,overflowX=props.overflowX,restProps=_objectWithoutProperties(props,_excluded);if(hiddenOverflow)overflow='hidden';if(scroll)overflow='scroll';if(scrollY)overflowY='scroll';if(scrollX)overflowX='scroll';if(noScroll){if(overflow==='scroll')overflow=undefined;if(overflowY==='scroll')overflowY=undefined;if(overflowX==='scroll')overflowX=undefined;}var style=clearProps({overflow:overflow,overflowY:overflowY,overflowX:overflowX});return[values,Object.assign({},restProps,{style:Object.assign({},flattenStyle(props.style),style)})];}

package/dist/modifiers/padding.js

@@ -1 +1 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["paddingT","paddingB","paddingL","paddingR","paddingV","paddingH","padding"];import{clearProps}from"./_helpers";import{useGetSpace}from"../theme/ThemeHandler";export function usePaddingModifier(_ref){var _ref3,_ref4,_ref5,_ref6;var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var getSpace=useGetSpace();var paddingT=props.paddingT,paddingB=props.paddingB,paddingL=props.paddingL,paddingR=props.paddingR,paddingV=props.paddingV,paddingH=props.paddingH,padding=props.padding,restProps=_objectWithoutProperties(props,_excluded);var paddingTop=getSpace((_ref3=paddingT!=null?paddingT:paddingV)!=null?_ref3:padding);var paddingBottom=getSpace((_ref4=paddingB!=null?paddingB:paddingV)!=null?_ref4:padding);var paddingRight=getSpace((_ref5=paddingR!=null?paddingR:paddingH)!=null?_ref5:padding);var paddingLeft=getSpace((_ref6=paddingL!=null?paddingL:paddingH)!=null?_ref6:padding);var style=clearProps({paddingTop:paddingTop,paddingBottom:paddingBottom,paddingRight:paddingRight,paddingLeft:paddingLeft});return[values,Object.assign({},restProps,{style:Object.assign({},props.style,style)})];}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["paddingT","paddingB","paddingL","paddingR","paddingV","paddingH","padding"];import{clearProps,flattenStyle}from"./_helpers";import{useGetSpace}from"../theme/ThemeHandler";export function usePaddingModifier(_ref){var _ref3,_ref4,_ref5,_ref6;var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var getSpace=useGetSpace();var paddingT=props.paddingT,paddingB=props.paddingB,paddingL=props.paddingL,paddingR=props.paddingR,paddingV=props.paddingV,paddingH=props.paddingH,padding=props.padding,restProps=_objectWithoutProperties(props,_excluded);var paddingTop=getSpace((_ref3=paddingT!=null?paddingT:paddingV)!=null?_ref3:padding);var paddingBottom=getSpace((_ref4=paddingB!=null?paddingB:paddingV)!=null?_ref4:padding);var paddingRight=getSpace((_ref5=paddingR!=null?paddingR:paddingH)!=null?_ref5:padding);var paddingLeft=getSpace((_ref6=paddingL!=null?paddingL:paddingH)!=null?_ref6:padding);var style=clearProps({paddingTop:paddingTop,paddingBottom:paddingBottom,paddingRight:paddingRight,paddingLeft:paddingLeft});return[values,Object.assign({},restProps,{style:Object.assign({},flattenStyle(props.style),style)})];}

package/dist/modifiers/position.js

@@ -1 +1 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["position","absolute","absoluteFill","fixedFill","relative","fixed","sticky","top","bottom","left","right","zIndex"];import{Platform}from"../abstractions/Platform";import{clearProps}from"./_helpers";import{useGetSpace}from"../theme";export function usePositionModifier(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var getSpace=useGetSpace();var position=props.position,absolute=props.absolute,absoluteFill=props.absoluteFill,fixedFill=props.fixedFill,relative=props.relative,fixed=props.fixed,sticky=props.sticky,top=props.top,bottom=props.bottom,left=props.left,right=props.right,zIndex=props.zIndex,restProps=_objectWithoutProperties(props,_excluded);if(!zIndex&&!!absolute)zIndex=10;if(absolute||absoluteFill)position='absolute';if(relative)position='relative';if(fixed||fixedFill)position='fixed';if(sticky)position='sticky';top=getSpace(top);bottom=getSpace(bottom);right=getSpace(right);left=getSpace(left);if(absoluteFill||fixedFill){top=0;bottom=0;left=0;right=0;}if(Platform.OS!=='web'&&['fixed','sticky'].includes(position)){position='absolute';}var style=clearProps({position:position,top:top,bottom:bottom,left:left,right:right,zIndex:zIndex});return[values,Object.assign({},restProps,{style:Object.assign({},props.style,style)})];}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["position","absolute","absoluteFill","fixedFill","relative","fixed","sticky","top","bottom","left","right","zIndex"];import{Platform}from"../abstractions/Platform";import{clearProps,flattenStyle}from"./_helpers";import{useGetSpace}from"../theme";export function usePositionModifier(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var getSpace=useGetSpace();var position=props.position,absolute=props.absolute,absoluteFill=props.absoluteFill,fixedFill=props.fixedFill,relative=props.relative,fixed=props.fixed,sticky=props.sticky,top=props.top,bottom=props.bottom,left=props.left,right=props.right,zIndex=props.zIndex,restProps=_objectWithoutProperties(props,_excluded);if(!zIndex&&!!absolute)zIndex=10;if(absolute||absoluteFill)position='absolute';if(relative)position='relative';if(fixed||fixedFill)position='fixed';if(sticky)position='sticky';top=getSpace(top);bottom=getSpace(bottom);right=getSpace(right);left=getSpace(left);if(absoluteFill||fixedFill){top=0;bottom=0;left=0;right=0;}if(Platform.OS!=='web'&&['fixed','sticky'].includes(position)){position='absolute';}var style=clearProps({position:position,top:top,bottom:bottom,left:left,right:right,zIndex:zIndex});return[values,Object.assign({},restProps,{style:Object.assign({},flattenStyle(props.style),style)})];}

package/dist/modifiers/shadow.js

@@ -1 +1 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["shadow"];import{clearProps}from"./_helpers";import{useGetColor}from"../theme/ThemeHandler";export function useShadowModifier(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var getColor=useGetColor();var shadow=props.shadow,restProps=_objectWithoutProperties(props,_excluded);var boxShadow,shadowRadius,shadowOffset,shadowOpacity,shadowColor,elevation;if(shadow===true){shadow=getColor('shadow');}else if(!!shadow){shadow=getColor(shadow);}if(!!shadow){boxShadow=`0 1px 10px ${shadow}`;shadowRadius=10;shadowOffset={width:0,height:1};shadowOpacity=1;elevation=10;shadowColor=shadow;}var style=clearProps({boxShadow:boxShadow,shadowRadius:shadowRadius,shadowOffset:shadowOffset,shadowOpacity:shadowOpacity,shadowColor:shadowColor,elevation:elevation});return[values,Object.assign({},restProps,{style:Object.assign({},props.style,style)})];}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["shadow"];import{clearProps,flattenStyle}from"./_helpers";import{useGetColor}from"../theme/ThemeHandler";export function useShadowModifier(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var getColor=useGetColor();var shadow=props.shadow,restProps=_objectWithoutProperties(props,_excluded);var boxShadow,shadowRadius,shadowOffset,shadowOpacity,shadowColor,elevation;if(shadow===true){shadow=getColor('shadow');}else if(!!shadow){shadow=getColor(shadow);}if(!!shadow){boxShadow=`0 1px 10px ${shadow}`;shadowRadius=10;shadowOffset={width:0,height:1};shadowOpacity=1;elevation=10;shadowColor=shadow;}var style=clearProps({boxShadow:boxShadow,shadowRadius:shadowRadius,shadowOffset:shadowOffset,shadowOpacity:shadowOpacity,shadowColor:shadowColor,elevation:elevation});return[values,Object.assign({},restProps,{style:Object.assign({},flattenStyle(props.style),style)})];}

package/dist/modifiers/size.js

@@ -1 +1 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["width","height","minH","minHeight","maxH","maxHeight","minWidth","minW","maxWidth","maxW","fullWidth","fullW","fullHeight","fullH","ratio","square","span","parentSpan"];import{Platform}from"../abstractions/Platform";import{clearProps}from"./_helpers";import{useGetElementHeight}from"../theme/ThemeHandler";export function useSizeModifier(_ref){var _span;var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var getHeight=useGetElementHeight();var _ref3=props||{},width=_ref3.width,height=_ref3.height,minH=_ref3.minH,minHeight=_ref3.minHeight,maxH=_ref3.maxH,maxHeight=_ref3.maxHeight,minWidth=_ref3.minWidth,minW=_ref3.minW,maxWidth=_ref3.maxWidth,maxW=_ref3.maxW,fullWidth=_ref3.fullWidth,fullW=_ref3.fullW,fullHeight=_ref3.fullHeight,fullH=_ref3.fullH,ratio=_ref3.ratio,square=_ref3.square,span=_ref3.span,parentSpan=_ref3.parentSpan,restProps=_objectWithoutProperties(_ref3,_excluded);minHeight=getHeight(minHeight||minH);minWidth=getHeight(minWidth||minW);maxHeight=getHeight(maxHeight||maxH);maxWidth=getHeight(maxWidth||maxW);height=getHeight(height);width=getHeight(width);span=(_span=span)!=null?_span:parentSpan;if(span)width=span/24*100+'%';if(fullWidth||fullW)width='100%';if((fullHeight||fullH)&&Platform.OS==='web')height='100%';var aspectRatio=ratio;if(!!square)aspectRatio=1;var style=clearProps({height:height,width:width,minHeight:minHeight,minHeight:minHeight,maxHeight:maxHeight,minWidth:minWidth,maxWidth:maxWidth,aspectRatio:aspectRatio});return[values,Object.assign({},restProps,{style:Object.assign({},props.style,style)})];}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["width","height","minH","minHeight","maxH","maxHeight","minWidth","minW","maxWidth","maxW","fullWidth","fullW","fullHeight","fullH","ratio","square","span","parentSpan"];import{Platform}from"../abstractions/Platform";import{clearProps,flattenStyle}from"./_helpers";import{useGetElementHeight}from"../theme/ThemeHandler";export function useSizeModifier(_ref){var _span;var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var getHeight=useGetElementHeight();var _ref3=props||{},width=_ref3.width,height=_ref3.height,minH=_ref3.minH,minHeight=_ref3.minHeight,maxH=_ref3.maxH,maxHeight=_ref3.maxHeight,minWidth=_ref3.minWidth,minW=_ref3.minW,maxWidth=_ref3.maxWidth,maxW=_ref3.maxW,fullWidth=_ref3.fullWidth,fullW=_ref3.fullW,fullHeight=_ref3.fullHeight,fullH=_ref3.fullH,ratio=_ref3.ratio,square=_ref3.square,span=_ref3.span,parentSpan=_ref3.parentSpan,restProps=_objectWithoutProperties(_ref3,_excluded);minHeight=getHeight(minHeight||minH);minWidth=getHeight(minWidth||minW);maxHeight=getHeight(maxHeight||maxH);maxWidth=getHeight(maxWidth||maxW);height=getHeight(height);width=getHeight(width);span=(_span=span)!=null?_span:parentSpan;if(span)width=span/24*100+'%';if(fullWidth||fullW)width='100%';if((fullHeight||fullH)&&Platform.OS==='web')height='100%';var aspectRatio=ratio;if(!!square)aspectRatio=1;var style=clearProps({height:height,width:width,minHeight:minHeight,minHeight:minHeight,maxHeight:maxHeight,minWidth:minWidth,maxWidth:maxWidth,aspectRatio:aspectRatio});return[values,Object.assign({},restProps,{style:Object.assign({},flattenStyle(props.style),style)})];}

package/dist/modifiers/state.js

@@ -1 +1 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["disabled","loading","onClick","onPress","onChange"];import{clearProps}from"./_helpers";export function useStateModifier(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var disabled=props.disabled,loading=props.loading,onClick=props.onClick,onPress=props.onPress,onChange=props.onChange,restProps=_objectWithoutProperties(props,_excluded);var cursor=undefined;var opacity=props.opacity;if(!!disabled){opacity=0.3;onChange=undefined;cursor='not-allowed';}if(!!disabled||!!loading){onPress=undefined;onClick=undefined;}var style=clearProps({opacity:opacity,cursor:cursor});var newProps=clearProps({onPress:onPress,onClick:onClick,onChange:onChange});return[Object.assign({disabled:disabled,loading:loading},values),Object.assign({},newProps,restProps,{style:Object.assign({},props.style,style)})];}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["disabled","loading","onClick","onPress","onChange"];import{clearProps,flattenStyle}from"./_helpers";export function useStateModifier(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var disabled=props.disabled,loading=props.loading,onClick=props.onClick,onPress=props.onPress,onChange=props.onChange,restProps=_objectWithoutProperties(props,_excluded);var cursor=undefined;var opacity=props.opacity;if(!!disabled){opacity=0.3;onChange=undefined;cursor='not-allowed';}if(!!disabled||!!loading){onPress=undefined;onClick=undefined;}var style=clearProps({opacity:opacity,cursor:cursor});var newProps=clearProps({onPress:onPress,onClick:onClick,onChange:onChange});return[Object.assign({disabled:disabled,loading:loading},values),Object.assign({},newProps,restProps,{style:Object.assign({},flattenStyle(props.style),style)})];}

package/dist/modifiers/text.js

@@ -1 +1 @@
-import _objectDestructuringEmpty from"@babel/runtime/helpers/objectDestructuringEmpty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["color","textCode"],_excluded2=["opacity","bold","strong","fontWeight","weight","italic","underline","lineHeight","align","center","toRight","inherit","fontSize"];import{clearProps}from"./_helpers";import{mergePreset}from"../theme/helpers/mergePreset";import{useGetColor,useTexts}from"../theme/ThemeHandler";export function useTextModifier(_ref){var _ref2=_slicedToArray(_ref,2),_ref2$=_ref2[0],color=_ref2$.color,textCode=_ref2$.textCode,values=_objectWithoutProperties(_ref2$,_excluded),props=Object.assign({},(_objectDestructuringEmpty(_ref2[1]),_ref2[1]));var getColor=useGetColor();var texts=useTexts();if(!textCode&&!props.inherit)textCode='p';var _mergePreset=mergePreset(texts,textCode,props,'p'),opacity=_mergePreset.opacity,bold=_mergePreset.bold,strong=_mergePreset.strong,fontWeight=_mergePreset.fontWeight,weight=_mergePreset.weight,italic=_mergePreset.italic,underline=_mergePreset.underline,lineHeight=_mergePreset.lineHeight,align=_mergePreset.align,center=_mergePreset.center,toRight=_mergePreset.toRight,inherit=_mergePreset.inherit,fontSize=_mergePreset.fontSize,restProps=_objectWithoutProperties(_mergePreset,_excluded2);var fontStyle;if(italic)fontStyle='italic';var textDecorationLine;if(underline)textDecorationLine='underline';var textAlign=align;if(center)textAlign='center';if(toRight)textAlign='right';fontWeight=fontWeight||weight;if(bold||strong)fontWeight=600;var style=clearProps({fontWeight:fontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine,lineHeight:lineHeight,textAlign:textAlign,opacity:opacity,color:color,fontSize:fontSize});return[values,Object.assign({},restProps,{style:Object.assign({},props.style,style)})];}
+import _objectDestructuringEmpty from"@babel/runtime/helpers/objectDestructuringEmpty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["color","textCode"],_excluded2=["opacity","bold","strong","fontWeight","weight","italic","underline","lineHeight","align","center","toRight","inherit","fontSize"];import{clearProps,flattenStyle}from"./_helpers";import{mergePreset}from"../theme/helpers/mergePreset";import{useGetColor,useTexts}from"../theme/ThemeHandler";export function useTextModifier(_ref){var _ref2=_slicedToArray(_ref,2),_ref2$=_ref2[0],color=_ref2$.color,textCode=_ref2$.textCode,values=_objectWithoutProperties(_ref2$,_excluded),props=Object.assign({},(_objectDestructuringEmpty(_ref2[1]),_ref2[1]));var getColor=useGetColor();var texts=useTexts();if(!textCode&&!props.inherit)textCode='p';var _mergePreset=mergePreset(texts,textCode,props,'p'),opacity=_mergePreset.opacity,bold=_mergePreset.bold,strong=_mergePreset.strong,fontWeight=_mergePreset.fontWeight,weight=_mergePreset.weight,italic=_mergePreset.italic,underline=_mergePreset.underline,lineHeight=_mergePreset.lineHeight,align=_mergePreset.align,center=_mergePreset.center,toRight=_mergePreset.toRight,inherit=_mergePreset.inherit,fontSize=_mergePreset.fontSize,restProps=_objectWithoutProperties(_mergePreset,_excluded2);var fontStyle;if(italic)fontStyle='italic';var textDecorationLine;if(underline)textDecorationLine='underline';var textAlign=align;if(center)textAlign='center';if(toRight)textAlign='right';fontWeight=fontWeight||weight;if(bold||strong)fontWeight=600;var style=clearProps({fontWeight:fontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine,lineHeight:lineHeight,textAlign:textAlign,opacity:opacity,color:color,fontSize:fontSize});return[values,Object.assign({},restProps,{style:Object.assign({},flattenStyle(props.style),style)})];}

package/package.json

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

package/src/components/actions/Dropdown.js

@@ -1,10 +1,10 @@
 import { pipe } from 'ramda'
 
+import { DrawerScrollView } from '../modals'
 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'
@@ -59,7 +59,7 @@ export function Dropdown({ items, ...rootProps }) {
             onClose()
           }
           return (
-            <ScrollView>
+            <DrawerScrollView>
               <Menu
                 vertical
                 items={items}
@@ -68,7 +68,7 @@ export function Dropdown({ items, ...rootProps }) {
                 linkMinHeight={useBottomDrawer ? 'xl' : 'md'}
                 withDivider={useBottomDrawer}
               />
-            </ScrollView>
+            </DrawerScrollView>
           )
         }}
       >

package/src/components/modals/bottomDrawer/native/DrawerContext.js

@@ -1,21 +1,17 @@
-import React from 'react';
+import React from 'react'
 
-const DrawerContext = React.createContext(null);
+const DrawerContext = React.createContext(null)
 
 export function DrawerProvider({ children, value }) {
-  return (
-    <DrawerContext.Provider value={value}>
-      {children}
-    </DrawerContext.Provider>
-  );
+  return <DrawerContext.Provider value={value}>{children}</DrawerContext.Provider>
 }
 
 export function useDrawerContext() {
-  const context = React.useContext(DrawerContext);
+  const context = React.useContext(DrawerContext)
 
   if (!context) {
-    throw new Error('useDrawerContext must be used within a DrawerProvider');
+    return { outOfContext: true }
   }
 
-  return context;
-}
+  return context
+}

package/src/components/modals/bottomDrawer/native/createDrawerScrollComponent.js

@@ -127,5 +127,13 @@ export function createDrawerScrollComponent(Component) {
     )
   }
 
-  return DrawerScrollComponent
+  function ConditionalDrawerScrollComponent(props) {
+    const { outOfContext } = useDrawerContext()
+
+    if (outOfContext) return <Component {...props} />
+
+    return <DrawerScrollComponent {...props} />
+  }
+
+  return ConditionalDrawerScrollComponent
 }

package/src/modifiers/_helpers.js

@@ -1,3 +1,6 @@
 import { pickBy } from 'ramda'
 
 export const clearProps = pickBy((item) => item !== undefined)
+
+export const flattenStyle = (style) =>
+  Array.isArray(style) ? Object.assign({}, ...style) : style

package/src/modifiers/animation.js

@@ -1,4 +1,4 @@
-import { clearProps } from './_helpers'
+import { clearProps, flattenStyle } from './_helpers'
 
 export function useAnimationModifier([values, props]) {
   let { transition, ...restProps } = props
@@ -10,7 +10,7 @@ export function useAnimationModifier([values, props]) {
     {
       ...restProps,
       style: {
-        ...props.style,
+        ...flattenStyle(props.style),
         ...style,
       },
     },

package/src/modifiers/animations/fadeEffect.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import { flattenStyle } from '../_helpers'
 
 const DEFAULT_EFFECT = { duration: 300 }
 
@@ -37,7 +38,7 @@ export function useFadeEffect([values, { fade, ...props }]) {
     {
       ...props,
       style: {
-        ...props.style,
+        ...flattenStyle(props.style),
         ...style,
       },
     },

package/src/modifiers/animations/scaleEffect.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import { flattenStyle } from '../_helpers'
 
 const DEFAULT_EFFECT = { duration: 300, initialScale: 0 }
 
@@ -37,7 +38,7 @@ export function useScaleEffect([values, { scale, ...props }]) {
     {
       ...props,
       style: {
-        ...props.style,
+        ...flattenStyle(props.style),
         ...style,
       },
     },

package/src/modifiers/animations/slideEffect.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import { flattenStyle } from '../_helpers'
 
 const DEFAULT_EFFECT = { duration: 400, from: 'top' }
 
@@ -55,7 +56,7 @@ export function useSlideEffect([values, { slide, ...props }]) {
     {
       ...props,
       style: {
-        ...props.style,
+        ...flattenStyle(props.style),
         ...style,
       },
     },

package/src/modifiers/background.js

@@ -1,6 +1,6 @@
 import { is } from 'ramda'
 
-import { clearProps } from './_helpers'
+import { clearProps, flattenStyle } from './_helpers'
 import { useGetColor } from '../theme/ThemeHandler'
 
 export function useBackgroundModifier([values, props]) {
@@ -26,7 +26,7 @@ export function useBackgroundModifier([values, props]) {
     {
       ...restProps,
       style: {
-        ...props.style,
+        ...flattenStyle(props.style),
         ...style,
       },
     },

package/src/modifiers/border.js

@@ -1,4 +1,4 @@
-import { clearProps } from './_helpers'
+import { clearProps, flattenStyle } from './_helpers'
 import { useGetColor, useGetRadius } from '../theme/ThemeHandler'
 
 export function useBorderModifier([values, props]) {
@@ -72,7 +72,7 @@ export function useBorderModifier([values, props]) {
     {
       ...restProps,
       style: {
-        ...props.style,
+        ...flattenStyle(props.style),
         ...style,
       },
     },

package/src/modifiers/cursor.js

@@ -1,4 +1,4 @@
-import { clearProps } from './_helpers'
+import { clearProps, flattenStyle } from './_helpers'
 
 export function useCursorModifier([values, props]) {
   let { pointer, cursor, move, ...restProps } = props
@@ -13,7 +13,7 @@ export function useCursorModifier([values, props]) {
     {
       ...restProps,
       style: {
-        ...props.style,
+        ...flattenStyle(props.style),
         ...style,
       },
     },

package/src/modifiers/display.js

@@ -1,4 +1,4 @@
-import { clearProps } from './_helpers'
+import { clearProps, flattenStyle } from './_helpers'
 
 export function useDisplayModifier([values, props]) {
   let { opacity, hidden, display, inline, block, ...restProps } = props
@@ -14,7 +14,7 @@ export function useDisplayModifier([values, props]) {
     {
       ...restProps,
       style: {
-        ...props.style,
+        ...flattenStyle(props.style),
         ...style,
       },
     },

package/src/modifiers/flex.js

@@ -1,4 +1,4 @@
-import { clearProps } from './_helpers'
+import { clearProps, flattenStyle } from './_helpers'
 
 export function useFlexModifier([values, props]) {
   let { flex, ...restProps } = props
@@ -12,7 +12,7 @@ export function useFlexModifier([values, props]) {
     {
       ...restProps,
       style: {
-        ...props.style,
+        ...flattenStyle(props.style),
         ...style,
       },
     },

package/src/modifiers/flexWrapper.js

@@ -1,4 +1,4 @@
-import { clearProps } from './_helpers'
+import { clearProps, flattenStyle } from './_helpers'
 import { useGetSpace } from '../theme/ThemeHandler'
 
 export function useFlexWrapperModifier([values, props]) {
@@ -79,7 +79,7 @@ export function useFlexWrapperModifier([values, props]) {
     {
       ...restProps,
       style: {
-        ...props.style,
+        ...flattenStyle(props.style),
         ...style,
       },
     },

package/src/modifiers/margin.js

@@ -1,4 +1,4 @@
-import { clearProps } from './_helpers'
+import { clearProps, flattenStyle } from './_helpers'
 import { useGetSpace } from '../theme/ThemeHandler'
 
 export function useMarginModifier([values, props]) {
@@ -17,7 +17,7 @@ export function useMarginModifier([values, props]) {
     {
       ...restProps,
       style: {
-        ...props.style,
+        ...flattenStyle(props.style),
         ...style,
       },
     },

package/src/modifiers/overflow.js

@@ -1,4 +1,4 @@
-import { clearProps } from './_helpers'
+import { clearProps, flattenStyle } from './_helpers'
 
 export function useOverflowModifier([values, props]) {
   let { hiddenOverflow, scroll, noScroll, scrollY, scrollX, overflow, overflowY, overflowX, ...restProps } = props
@@ -20,7 +20,7 @@ export function useOverflowModifier([values, props]) {
     {
       ...restProps,
       style: {
-        ...props.style,
+        ...flattenStyle(props.style),
         ...style,
       },
     },

package/src/modifiers/padding.js

@@ -1,4 +1,4 @@
-import { clearProps } from './_helpers'
+import { clearProps, flattenStyle } from './_helpers'
 import { useGetSpace } from '../theme/ThemeHandler'
 
 export function usePaddingModifier([values, props]) {
@@ -17,7 +17,7 @@ export function usePaddingModifier([values, props]) {
     {
       ...restProps,
       style: {
-        ...props.style,
+        ...flattenStyle(props.style),
         ...style,
       },
     },

package/src/modifiers/position.js

@@ -1,5 +1,5 @@
 import { Platform } from '../abstractions/Platform'
-import { clearProps } from './_helpers'
+import { clearProps, flattenStyle } from './_helpers'
 import { useGetSpace } from '../theme'
 
 export function usePositionModifier([values, props]) {
@@ -49,7 +49,7 @@ export function usePositionModifier([values, props]) {
     {
       ...restProps,
       style: {
-        ...props.style,
+        ...flattenStyle(props.style),
         ...style,
       },
     },

package/src/modifiers/shadow.js

@@ -1,4 +1,4 @@
-import { clearProps } from './_helpers'
+import { clearProps, flattenStyle } from './_helpers'
 import { useGetColor } from '../theme/ThemeHandler'
 
 export function useShadowModifier([values, props]) {
@@ -27,7 +27,7 @@ export function useShadowModifier([values, props]) {
     {
       ...restProps,
       style: {
-        ...props.style,
+        ...flattenStyle(props.style),
         ...style,
       },
     },

package/src/modifiers/size.js

@@ -1,5 +1,5 @@
 import { Platform } from '../abstractions/Platform'
-import { clearProps } from './_helpers'
+import { clearProps, flattenStyle } from './_helpers'
 import { useGetElementHeight } from '../theme/ThemeHandler'
 
 export function useSizeModifier([values, props]) {
@@ -50,7 +50,7 @@ export function useSizeModifier([values, props]) {
     values,
     {
       ...restProps,
-      style: { ...props.style, ...style },
+      style: { ...flattenStyle(props.style), ...style },
     },
   ]
 }

package/src/modifiers/state.js

@@ -1,4 +1,4 @@
-import { clearProps } from './_helpers'
+import { clearProps, flattenStyle } from './_helpers'
 
 export function useStateModifier([values, props]) {
   let { disabled, loading, onClick, onPress, onChange, ...restProps } = props
@@ -25,7 +25,7 @@ export function useStateModifier([values, props]) {
       ...newProps,
       ...restProps,
       style: {
-        ...props.style,
+        ...flattenStyle(props.style),
         ...style,
       },
     },

package/src/modifiers/text.js

@@ -1,4 +1,4 @@
-import { clearProps } from './_helpers'
+import { clearProps, flattenStyle } from './_helpers'
 import { mergePreset } from '../theme/helpers/mergePreset'
 import { useGetColor, useTexts } from '../theme/ThemeHandler'
 
@@ -54,7 +54,7 @@ export function useTextModifier([{ color, textCode, ...values }, { ...props }])
     {
       ...restProps,
       style: {
-        ...props.style,
+        ...flattenStyle(props.style),
         ...style,
       },
     },