@neko-os/ui 0.0.4 → 0.0.6

package/dist/modifiers/size.js

@@ -1 +1 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["width","height","minH","minHeight","maxH","maxHeight","minWidth","minW","maxWidth","maxW","fullWidth","fullW","fullHeight","fullH","ratio","square"];import{clearProps}from"./_helpers";import{useGetElementHeight}from"../theme/ThemeHandler";export function useSizeModifier(props){var getHeight=useGetElementHeight();var _ref=props||{},width=_ref.width,height=_ref.height,minH=_ref.minH,minHeight=_ref.minHeight,maxH=_ref.maxH,maxHeight=_ref.maxHeight,minWidth=_ref.minWidth,minW=_ref.minW,maxWidth=_ref.maxWidth,maxW=_ref.maxW,fullWidth=_ref.fullWidth,fullW=_ref.fullW,fullHeight=_ref.fullHeight,fullH=_ref.fullH,ratio=_ref.ratio,square=_ref.square,restProps=_objectWithoutProperties(_ref,_excluded);minHeight=getHeight(minHeight||minH);minWidth=minWidth||minW;maxHeight=maxHeight||maxH;maxWidth=maxWidth||maxW;height=getHeight(height);if(fullWidth||fullW)width='100%';if(fullHeight||fullH)height='100%';var aspectRatio=ratio;if(!!square)aspectRatio=1;var style=clearProps({height:height,width:width,minHeight:minHeight,minHeight:minHeight,maxHeight:maxHeight,maxWidth:maxWidth,aspectRatio:aspectRatio});return 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{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)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)})];}

package/dist/modifiers/sizeConverter.js

@@ -0,0 +1 @@
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{getSizeFromProps}from"../theme/helpers/sizeScale";import{useGetThemeValue}from"../theme/ThemeHandler";export function useSizeConverter(groupKey,defaultValue){var getSizeValue=useGetThemeValue(groupKey);return function(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var _getSizeFromProps=getSizeFromProps(props,defaultValue),_getSizeFromProps2=_slicedToArray(_getSizeFromProps,2),sizeCode=_getSizeFromProps2[0],formattedProps=_getSizeFromProps2[1];var size=getSizeValue(sizeCode);return[Object.assign({},values,{size:size,sizeCode:sizeCode}),formattedProps];};}

package/dist/modifiers/state.js

@@ -0,0 +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=props.style;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)})];}

package/dist/modifiers/text.js

@@ -1 +1 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size"],_excluded2=["color","opacity","bold","strong","fontWeight","weight","italic","underline","lineHeight","align","center","toRight","inherit","fontSize"];import{clearProps}from"./_helpers";import{mergePreset,useGetColor,useTexts}from"../theme/ThemeHandler";export function useTextModifier(_ref){var size=_ref.size,props=_objectWithoutProperties(_ref,_excluded);var getColor=useGetColor();var texts=useTexts();if(!size&&!props.inherit)size='p';var _mergePreset=mergePreset(texts,size,props,'p'),color=_mergePreset.color,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;if(!inherit)color=getColor(color||'text');var style=clearProps({fontWeight:fontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine,lineHeight:lineHeight,textAlign:textAlign,opacity:opacity,color:color,fontSize:fontSize});return 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}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)})];}

package/dist/modifiers/textConverter.js

@@ -0,0 +1 @@
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{getTextFromProps}from"../theme/helpers/textScale";import{useGetThemeValue}from"../theme/ThemeHandler";export function useTextConverter(defaultValue){var getTextValue=useGetThemeValue('texts');return function(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var _getTextFromProps=getTextFromProps(props,defaultValue),_getTextFromProps2=_slicedToArray(_getTextFromProps,2),textCode=_getTextFromProps2[0],formattedProps=_getTextFromProps2[1];var text=getTextValue(textCode);return[Object.assign({},values,{text:text,textCode:textCode}),formattedProps];};}

package/dist/modifiers/themeComponent.js

@@ -0,0 +1 @@
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{mergeDeepRight}from'ramda';import{useThemeComponent}from"../theme/ThemeHandler";export function useThemeComponentModifier(componentName){var themeProps=useThemeComponent(componentName);return function(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];props=mergeDeepRight(themeProps,props);return[values,props];};}

package/dist/responsive/ResponsiveHandler.js

@@ -0,0 +1 @@
+var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/responsive/ResponsiveHandler.js";import React from'react';import{useBreakpoints}from"../theme/ThemeHandler";import{useWindowWidth}from"../abstractions/helpers/windowWidth";import{jsx as _jsx}from"react/jsx-runtime";var ResponsiveContext=React.createContext(null);export var useResponsive=function useResponsive(){return React.useContext(ResponsiveContext);};export function ResponsiveHandler(_ref){var children=_ref.children;var width=useWindowWidth();var breakpoints=useBreakpoints();var screen=React.useMemo(function(){var _breakpoints;if(!(breakpoints!=null&&breakpoints.length))return false;for(var i=0;i<breakpoints.length;i++){if(width<breakpoints[i].value){return breakpoints[i].name;}}return(_breakpoints=breakpoints[breakpoints.length-1])==null?void 0:_breakpoints.name;},[width,breakpoints]);var value=React.useMemo(function(){return{width:width,screen:screen};},[width,screen]);return _jsx(ResponsiveContext.Provider,{value:value,children:children});}

package/dist/responsive/index.js

@@ -0,0 +1 @@
+export*from"./responsiveHooks";export*from"./ResponsiveHandler";

package/dist/responsive/responsiveHooks.js

@@ -0,0 +1 @@
+import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import{is}from'ramda';import React from'react';import{useBreakpoints}from"../theme/ThemeHandler";import{useResponsive}from"../responsive/ResponsiveHandler";export function useGetResponsiveValue(){var breakpoints=useBreakpoints();var _useResponsive=useResponsive(),width=_useResponsive.width,screen=_useResponsive.screen;return React.useCallback(function(value){var isObj=is(Object,value);if(!isObj)return value;if(value[screen])return value[screen];var keys=Object.keys(value);var _loop=function _loop(){var match=k.match(/^(\w+)([du])$/);if(!match)return 0;var bpName=match[1];var mode=match[2];var bpIndex=breakpoints.findIndex(function(b){return b.name===bpName;});if(bpIndex===-1)return 0;if(mode==='u'){var lowerBound=bpIndex>0?breakpoints[bpIndex-1].value:0;if(width>=lowerBound)return{v:value[k]};}if(mode==='d'){if(width<breakpoints[bpIndex].value)return{v:value[k]};}},_ret;for(var k of keys){_ret=_loop();if(_ret===0)continue;if(_ret)return _ret.v;}return value==null?void 0:value.df;},[screen]);}export function useResponsiveValue(value){var getValue=useGetResponsiveValue();var isObj=is(Object,value);var valueWatch=isObj?Object.keys(value).map(function(k){return`${k}:${value[k]}`;}):[value];return React.useMemo(function(){return getValue(value);},[getValue].concat(_toConsumableArray(valueWatch)));}

package/dist/theme/ThemeHandler.js

@@ -1 +1 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/theme/ThemeHandler.js";import{mergeDeepRight}from'ramda';import React from'react';import{DEFAULT_LIGHT_THEME}from"./default/lightTheme";import{DEFAULT_THEMES}from"./default/themes";import{useFormattedTheme}from"./format/formatTheme";import{jsx as _jsx}from"react/jsx-runtime";var ThemeContext=React.createContext(null);export var useThemeHandler=function useThemeHandler(){return React.useContext(ThemeContext)||{};};export var useTheme=function useTheme(){return useThemeHandler().theme||DEFAULT_LIGHT_THEME;};export var useColors=function useColors(){return useTheme().colors||{};};var getColor=function getColor(colors,key){return colors[key]||key;};export var useGetColor=function useGetColor(){var colors=useColors();return function(key){return getColor(colors,key);};};export var useSpaces=function useSpaces(){return useTheme().spaces||{};};var getSpace=function getSpace(spaces,key){return spaces[key]||key;};export var useGetSpace=function useGetSpace(){var spaces=useSpaces();return function(key){return getSpace(spaces,key);};};export var useRadius=function useRadius(){return useTheme().radius||{};};var getRadius=function getRadius(radius,key){return radius[key]||key;};export var useGetRadius=function useGetRadius(){var radius=useRadius();return function(key){return getRadius(radius,key);};};export var useTexts=function useTexts(){return useTheme().texts||{};};export function mergePreset(presets,key,props,defaultKey){if(!key)return props;var preset=presets[key]||presets[defaultKey];return Object.assign({},props,preset);}export var useElementHeights=function useElementHeights(){return useTheme().elementHeights||{};};var getElementHeight=function getElementHeight(elementHeights,key){return elementHeights[key]||key;};export var useGetElementHeight=function useGetElementHeight(){var elementHeights=useElementHeights();return function(key){return getElementHeight(elementHeights,key);};};export var useThemeComponents=function useThemeComponents(){return useTheme().components||{};};export function useThemeComponent(name){var components=useThemeComponents();return components[name]||{};}export function useMergeThemeComponent(name,props){var themeProps=useThemeComponent(name);return mergeDeepRight(themeProps,props);}export function ThemeHandler(_ref){var themes=_ref.themes,initTheme=_ref.initTheme,children=_ref.children;var _React$useState=React.useState(initTheme||'light'),_React$useState2=_slicedToArray(_React$useState,2),activeThemeKey=_React$useState2[0],setActiveThemeKey=_React$useState2[1];var theme=useFormattedTheme(themes,activeThemeKey);var value={theme:theme,themes:themes,activeThemeKey:activeThemeKey,setActiveThemeKey:setActiveThemeKey};return _jsx(ThemeContext.Provider,{value:value,children:children});}
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/theme/ThemeHandler.js";import{mergeDeepRight}from'ramda';import React from'react';import{DEFAULT_LIGHT_THEME}from"./default/lightTheme";import{getThemeValue}from"./helpers/relatedScales";import{useFormattedTheme}from"./format/formatTheme";import{jsx as _jsx}from"react/jsx-runtime";var DEFAULT_BREAKPOINTS=[{name:'sm',value:768},{name:'md',value:1024},{name:'lg',value:1440},{name:'xl',value:10000}];var ThemeContext=React.createContext(null);export var useThemeHandler=function useThemeHandler(){return React.useContext(ThemeContext)||{};};export var useBreakpoints=function useBreakpoints(){var _useThemeHandler;return((_useThemeHandler=useThemeHandler())==null?void 0:_useThemeHandler.breakpoints)||DEFAULT_BREAKPOINTS;};export var useTheme=function useTheme(groupKey){var theme=useThemeHandler().theme||DEFAULT_LIGHT_THEME;if(!groupKey)return theme;return(theme==null?void 0:theme[groupKey])||{};};export var useGetThemeValue=function useGetThemeValue(groupKey){var group=useTheme(groupKey);return function(key){return getThemeValue(group,key);};};export var useColors=function useColors(){return useTheme('colors');};export var useGetColor=function useGetColor(){return useGetThemeValue('colors');};export var useSpaces=function useSpaces(){return useTheme('spaces');};export var useGetSpace=function useGetSpace(){return useGetThemeValue('spaces');};export var useRadius=function useRadius(){return useTheme('radius');};export var useGetRadius=function useGetRadius(){return useGetThemeValue('radius');};export var useElementHeights=function useElementHeights(){return useTheme('elementHeights');};export var useGetElementHeight=function useGetElementHeight(){return useGetThemeValue('elementHeights');};export var useTexts=function useTexts(){return useTheme('texts');};export var useGetText=function useGetText(){return useGetThemeValue('text');};export var useThemeComponents=function useThemeComponents(){return useTheme('components');};export function useThemeComponent(name){var components=useThemeComponents();return components[name]||{};}export function useMergeThemeComponent(name,props){var themeProps=useThemeComponent(name);return mergeDeepRight(themeProps,props);}export function ThemeHandler(_ref){var breakpoints=_ref.breakpoints,themes=_ref.themes,initTheme=_ref.initTheme,children=_ref.children;var _React$useState=React.useState(initTheme||'light'),_React$useState2=_slicedToArray(_React$useState,2),activeThemeKey=_React$useState2[0],setActiveThemeKey=_React$useState2[1];var theme=useFormattedTheme(themes,activeThemeKey);var value={theme:theme,themes:themes,activeThemeKey:activeThemeKey,setActiveThemeKey:setActiveThemeKey,breakpoints:breakpoints||DEFAULT_BREAKPOINTS};return _jsx(ThemeContext.Provider,{value:value,children:children});}

package/dist/theme/default/base.js

@@ -1 +1 @@
-export var BASE_THEME={spaces:{xxxsm:1,xxsm:3,xsm:5,sm:10,md:15,lg:20,xlg:30,xxlg:40,xxxlg:50},radius:{xxxsm:4,xxsm:5,xsm:5,sm:7,md:8,lg:10,xlg:12,xxlg:15,xxxlg:18},elementHeights:{xsm:20,sm:30,md:35,lg:50,xlg:60},texts:{h1:{fontSize:32,strong:true},h2:{fontSize:26,strong:true},h3:{fontSize:22,strong:true},h4:{fontSize:18,strong:true},h5:{fontSize:16,strong:true},h6:{fontSize:14,strong:true},p:{fontSize:14},sm:{fontSize:12},xsm:{fontSize:10},xxsm:{fontSize:8}}};
+export var BASE_THEME={spaces:{xxxs:1,xxs:3,xs:5,sm:10,md:15,lg:20,xl:30,xxl:40,xxxl:50},radius:{xxxs:4,xxs:5,xs:5,sm:7,md:8,lg:10,xl:12,xxl:15,xxxl:18},icons:{xxxs:10,xxs:12,xs:14,sm:16,md:18,lg:22,xl:26,xxl:28,xxxl:32},elementHeights:{xs:20,sm:30,md:35,lg:50,xl:60},texts:{h1:{fontSize:32,strong:true},h2:{fontSize:26,strong:true},h3:{fontSize:22,strong:true},h4:{fontSize:18,strong:true},h5:{fontSize:16,strong:true},h6:{fontSize:14,strong:true},p:{fontSize:14},sm:{fontSize:12},xs:{fontSize:10},xxs:{fontSize:8}}};

package/dist/theme/default/cyberpunkTheme.js

@@ -1 +1 @@
-import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var CYBERPUNK_DARK_THEME=mergeDeepRight(BASE_THEME,{colors:{primary:'#FCEE09',text:'#FFFFFF',text2:'#B3B3B3',text3:'#8C8C8C',text4:'#666666',bg:'#0A0A0F',overlayBG:'#14141F',shadow:'rgba(39, 45, 52, 0.6)',blue:'#00E5FF',yellow:'#FFD600',green:'#00FF9D',purple:'#D500F9',orange:'#FF9100',cyan:'#00B8D4',red:'#FF1744',navy:'#1E2A38',indigo:'#651FFF',gray:'#757575',brown:'#6D4C41',lylac:'#B388FF',pink:'#FF80AB'}});
+import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var CYBERPUNK_DARK_THEME=mergeDeepRight(BASE_THEME,{colors:{primary:'#FCEE09',text:'#FFFFFF',text2:'#B3B3B3',text3:'#8C8C8C',text4:'#666666',bg:'#0A0A0F',overlayBG:'#14141F',shadow:'rgba(39, 45, 52, 0.6)',divider:'rgba(255,255,255, 0.2)',blue:'#00E5FF',yellow:'#FFD600',green:'#00FF9D',purple:'#D500F9',orange:'#FF9100',cyan:'#00B8D4',red:'#FF1744',navy:'#1E2A38',indigo:'#651FFF',gray:'#757575',brown:'#6D4C41',lylac:'#B388FF',pink:'#FF80AB'}});

package/dist/theme/default/darkTheme.js

@@ -1 +1 @@
-import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_DARK_THEME=mergeDeepRight(BASE_THEME,{colors:{primary:'#818DF9',text:'#FFFFFF',text2:'#E0E0E0',text3:'#B0B0B0',text4:'#8A8A8A',bg:'#383E44',overlayBG:'#272D34',shadow:'rgba(39, 45, 52, 0.6)',blue:'#4DA3FF',yellow:'#FFD93B',green:'#4CAF50',purple:'#9B59B6',orange:'#FF7F50',cyan:'#00BCD4',red:'#E74C3C',navy:'#34495E',indigo:'#5C6BC0',gray:'#9E9E9E',brown:'#8D6E63',lylac:'#B39DDB',pink:'#F48FB1'}});
+import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_DARK_THEME=mergeDeepRight(BASE_THEME,{colors:{primary:'#818DF9',text:'#FFFFFF',text2:'#E0E0E0',text3:'#B0B0B0',text4:'#8A8A8A',bg:'#383E44',overlayBG:'#272D34',shadow:'rgba(216, 210, 203, 0.1)',divider:'#383E44',blue:'#4DA3FF',yellow:'#FFD93B',green:'#4CAF50',purple:'#9B59B6',orange:'#FF7F50',cyan:'#00BCD4',red:'#E74C3C',navy:'#34495E',indigo:'#5C6BC0',gray:'#9E9E9E',brown:'#8D6E63',lylac:'#B39DDB',pink:'#F48FB1'}});

package/dist/theme/default/deepWoodsTheme.js

@@ -1 +1 @@
-import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEEP_WOODS_DARK_THEME=mergeDeepRight(BASE_THEME,{colors:{primary:'#4CAF50',text:'#F0F8F2',text2:'#C8E6C9',text3:'#A5D6A7',text4:'#81C784',bg:'#0D1B14',overlayBG:'#16281F',shadow:'rgba(39, 45, 52, 0.6)',blue:'#64B5F6',yellow:'#FBC02D',green:'#81C784',purple:'#9575CD',orange:'#FFB74D',cyan:'#4DD0E1',red:'#E57373',navy:'#1B263B',indigo:'#5C6BC0',gray:'#9E9E9E',brown:'#8D6E63',lylac:'#B39DDB',pink:'#F48FB1'}});
+import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEEP_WOODS_DARK_THEME=mergeDeepRight(BASE_THEME,{colors:{primary:'#4CAF50',text:'#F0F8F2',text2:'#C8E6C9',text3:'#A5D6A7',text4:'#81C784',bg:'#0D1B14',overlayBG:'#16281F',shadow:'rgba(39, 45, 52, 0.6)',divider:'rgba(255,255,255, 0.2)',blue:'#64B5F6',yellow:'#FBC02D',green:'#81C784',purple:'#9575CD',orange:'#FFB74D',cyan:'#4DD0E1',red:'#E57373',navy:'#1B263B',indigo:'#5C6BC0',gray:'#9E9E9E',brown:'#8D6E63',lylac:'#B39DDB',pink:'#F48FB1'}});

package/dist/theme/default/forestTheme.js

@@ -1 +1 @@
-import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var FOREST_MIST_THEME=mergeDeepRight(BASE_THEME,{colors:{primary:'#4CAF50',text:'#0B2414',text2:'#14532D',text3:'#1B5E20',text4:'#388E3C',bg:'#E9F5EC',overlayBG:'#FFFFFF',shadow:'rgba(39, 45, 52, 0.15)',blue:'#2563EB',yellow:'#F59E0B',green:'#15803D',purple:'#7C3AED',orange:'#EA580C',cyan:'#0891B2',red:'#B91C1C',navy:'#1E3A8A',indigo:'#4338CA',gray:'#94A3B8',brown:'#78350F',lylac:'#A78BFA',pink:'#F472B6'}});
+import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var FOREST_MIST_THEME=mergeDeepRight(BASE_THEME,{colors:{primary:'#4CAF50',text:'#0B2414',text2:'#14532D',text3:'#1B5E20',text4:'#388E3C',bg:'#E9F5EC',overlayBG:'#FFFFFF',shadow:'rgba(39, 45, 52, 0.15)',divider:'rgba(0,0,0, 0.1)',blue:'#2563EB',yellow:'#F59E0B',green:'#15803D',purple:'#7C3AED',orange:'#EA580C',cyan:'#0891B2',red:'#B91C1C',navy:'#1E3A8A',indigo:'#4338CA',gray:'#94A3B8',brown:'#78350F',lylac:'#A78BFA',pink:'#F472B6'}});

package/dist/theme/default/hackerTheme.js

@@ -0,0 +1 @@
+import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_MATRIX_THEME=mergeDeepRight(BASE_THEME,{colors:{primary:'#00FF41',text:'#00FF41',text2:'#00CC33',text3:'#009926',text4:'#00661A',bg:'#000000',overlayBG:'#0A0A0A',shadow:'rgba(0, 255, 65, 0.2)',divider:'rgba(0,255,65, 0.3)',blue:'#0087BD',yellow:'#AEBF00',green:'#00FF41',purple:'#7A1FA2',orange:'#FF6D00',cyan:'#00BFA5',red:'#D50000',navy:'#003366',indigo:'#303F9F',gray:'#4A4A4A',brown:'#5D4037',lylac:'#8E24AA',pink:'#C51162'},components:{Card:{border:1,br:5,borderColor:'divider'}}});

package/dist/theme/default/lightTheme.js

@@ -1 +1 @@
-import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_LIGHT_THEME=mergeDeepRight(BASE_THEME,{colors:{primary:'#818DF9',text:'#272D34',text2:'#4A5159',text3:'#6E7680',text4:'#9AA1AC',bg:'#F4F5FE',overlayBG:'#FFFFFF',shadow:'rgba(39, 45, 52, 0.15)',blue:'#4DA3FF',yellow:'#FFD93B',green:'#4CAF50',purple:'#9B59B6',orange:'#FF7F50',cyan:'#00BCD4',red:'#E74C3C',navy:'#34495E',indigo:'#5C6BC0',gray:'#B0BEC5',brown:'#8D6E63',lylac:'#B39DDB',pink:'#F48FB1'}});
+import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_LIGHT_THEME=mergeDeepRight(BASE_THEME,{colors:{primary:'#818DF9',text:'#272D34',text2:'#4A5159',text3:'#6E7680',text4:'#9AA1AC',bg:'#F4F5FE',overlayBG:'#FFFFFF',shadow:'rgba(39, 45, 52, 0.15)',divider:'#e0e0e0',blue:'#4DA3FF',yellow:'#FFD93B',green:'#4CAF50',purple:'#9B59B6',orange:'#FF7F50',cyan:'#00BCD4',red:'#E74C3C',navy:'#34495E',indigo:'#5C6BC0',gray:'#B0BEC5',brown:'#8D6E63',lylac:'#B39DDB',pink:'#F48FB1'}});

package/dist/theme/default/midnightTheme.js

@@ -1 +1 @@
-import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var MIDNIGHT_NEON_THEME=mergeDeepRight(BASE_THEME,{colors:{primary:'#FF00FF',text:'#F0F0F0',text2:'#D4D4D4',text3:'#A3A3A3',text4:'#7A7A7A',bg:'#0D0D0D',overlayBG:'#1A1A1A',shadow:'rgba(39, 45, 52, 0.6)',blue:'#3B82F6',yellow:'#FACC15',green:'#22C55E',purple:'#A855F7',orange:'#FB923C',cyan:'#06B6D4',red:'#F87171',navy:'#1E3A8A',indigo:'#6366F1',gray:'#9CA3AF',brown:'#92400E',lylac:'#C084FC',pink:'#F472B6'}});
+import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var MIDNIGHT_NEON_THEME=mergeDeepRight(BASE_THEME,{colors:{primary:'#FF00FF',text:'#F0F0F0',text2:'#D4D4D4',text3:'#A3A3A3',text4:'#7A7A7A',bg:'#0D0D0D',overlayBG:'#1A1A1A',shadow:'rgba(39, 45, 52, 0.6)',divider:'rgba(255,255,255, 0.2)',blue:'#3B82F6',yellow:'#FACC15',green:'#22C55E',purple:'#A855F7',orange:'#FB923C',cyan:'#06B6D4',red:'#F87171',navy:'#1E3A8A',indigo:'#6366F1',gray:'#9CA3AF',brown:'#92400E',lylac:'#C084FC',pink:'#F472B6'}});

package/dist/theme/default/msdosTheme.js

@@ -0,0 +1 @@
+import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_MSDOS_THEME=mergeDeepRight(BASE_THEME,{colors:{primary:'#FFFF00',text:'#FFFFFF',text2:'#FFD700',text3:'#CCCCCC',text4:'#999999',bg:'#0000AA',overlayBG:'#000088',shadow:'rgba(0, 0, 0, 0.6)',divider:'rgba(255,255,255,0.3)',blue:'#0000FF',yellow:'#FFFF00',green:'#00FF00',purple:'#AA00FF',orange:'#FF7700',cyan:'#00FFFF',red:'#FF0000',navy:'#000080',indigo:'#4B0082',gray:'#B0B0B0',brown:'#8B4513',lylac:'#9370DB',pink:'#FF69B4'},components:{Card:{border:1,br:5,borderColor:'divider'}}});

package/dist/theme/default/oceanTheme.js

@@ -1 +1 @@
-import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var OCEAN_BREEZE_THEME=mergeDeepRight(BASE_THEME,{colors:{primary:'#2B90D9',text:'#04364A',text2:'#065A82',text3:'#0B84B4',text4:'#3ABEFF',bg:'#E6F7FF',overlayBG:'#FFFFFF',shadow:'rgba(39, 45, 52, 0.15)',blue:'#1D4ED8',yellow:'#FACC15',green:'#10B981',purple:'#8B5CF6',orange:'#FB923C',cyan:'#06B6D4',red:'#EF4444',navy:'#1E3A8A',indigo:'#6366F1',gray:'#9CA3AF',brown:'#A16207',lylac:'#C4B5FD',pink:'#F472B6'}});
+import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var OCEAN_BREEZE_THEME=mergeDeepRight(BASE_THEME,{colors:{primary:'#2B90D9',text:'#04364A',text2:'#065A82',text3:'#0B84B4',text4:'#3ABEFF',bg:'#E6F7FF',overlayBG:'#FFFFFF',shadow:'rgba(39, 45, 52, 0.15)',divider:'rgba(0,0,0, 0.1)',blue:'#1D4ED8',yellow:'#FACC15',green:'#10B981',purple:'#8B5CF6',orange:'#FB923C',cyan:'#06B6D4',red:'#EF4444',navy:'#1E3A8A',indigo:'#6366F1',gray:'#9CA3AF',brown:'#A16207',lylac:'#C4B5FD',pink:'#F472B6'}});

package/dist/theme/default/pastelTheme.js

@@ -1 +1 @@
-import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var PASTEL_DREAM_THEME=mergeDeepRight(BASE_THEME,{colors:{primary:'#FFB6C1',text:'#4B4453',text2:'#6D6875',text3:'#A093A6',text4:'#C9BBCF',bg:'#FFF7FA',overlayBG:'#FFFFFF',shadow:'rgba(39, 45, 52, 0.15)',blue:'#A5B4FC',yellow:'#FDE68A',green:'#BBF7D0',purple:'#E9D5FF',orange:'#FED7AA',cyan:'#BAE6FD',red:'#FCA5A5',navy:'#A5B4FC',indigo:'#C7D2FE',gray:'#E5E7EB',brown:'#E0B084',lylac:'#E9D5FF',pink:'#FBCFE8'}});
+import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var PASTEL_DREAM_THEME=mergeDeepRight(BASE_THEME,{colors:{primary:'#FFB6C1',text:'#4B4453',text2:'#6D6875',text3:'#A093A6',text4:'#C9BBCF',bg:'#FFF7FA',overlayBG:'#FFFFFF',shadow:'rgba(39, 45, 52, 0.15)',divider:'rgba(255,255,255, 0.2)',blue:'#A5B4FC',yellow:'#FDE68A',green:'#BBF7D0',purple:'#E9D5FF',orange:'#FED7AA',cyan:'#BAE6FD',red:'#FCA5A5',navy:'#A5B4FC',indigo:'#C7D2FE',gray:'#E5E7EB',brown:'#E0B084',lylac:'#E9D5FF',pink:'#FBCFE8'}});

package/dist/theme/default/sunsetTheme.js

@@ -1 +1 @@
-import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var SUNSET_GLOW_THEME=mergeDeepRight(BASE_THEME,{colors:{primary:'#FF6B6B',text:'#331E0A',text2:'#5C4033',text3:'#8C5A43',text4:'#B97A57',bg:'#FFF5E6',overlayBG:'#FFFFFF',shadow:'rgba(39, 45, 52, 0.15)',blue:'#3B82F6',yellow:'#FBBF24',green:'#22C55E',purple:'#A855F7',orange:'#FB923C',cyan:'#06B6D4',red:'#DC2626',navy:'#1E3A8A',indigo:'#4F46E5',gray:'#9CA3AF',brown:'#92400E',lylac:'#C084FC',pink:'#F472B6'}});
+import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var SUNSET_GLOW_THEME=mergeDeepRight(BASE_THEME,{colors:{primary:'#FF6B6B',text:'#331E0A',text2:'#5C4033',text3:'#8C5A43',text4:'#B97A57',bg:'#FFF5E6',overlayBG:'#FFFFFF',shadow:'rgba(39, 45, 52, 0.15)',divider:'rgba(255,255,255, 0.2)',blue:'#3B82F6',yellow:'#FBBF24',green:'#22C55E',purple:'#A855F7',orange:'#FB923C',cyan:'#06B6D4',red:'#DC2626',navy:'#1E3A8A',indigo:'#4F46E5',gray:'#9CA3AF',brown:'#92400E',lylac:'#C084FC',pink:'#F472B6'}});

package/dist/theme/default/themes.js

@@ -1 +1 @@
-import{CYBERPUNK_DARK_THEME}from"./cyberpunkTheme";import{DEEP_WOODS_DARK_THEME}from"./deepWoodsTheme";import{DEFAULT_DARK_THEME}from"./darkTheme";import{DEFAULT_LIGHT_THEME}from"./lightTheme";import{FOREST_MIST_THEME}from"./forestTheme";import{MIDNIGHT_NEON_THEME}from"./midnightTheme";import{OCEAN_BREEZE_THEME}from"./oceanTheme";import{PASTEL_DREAM_THEME}from"./pastelTheme";import{SUNSET_GLOW_THEME}from"./sunsetTheme";export var DEFAULT_THEMES={light:DEFAULT_LIGHT_THEME,dark:DEFAULT_DARK_THEME,pastel:PASTEL_DREAM_THEME,midnight:MIDNIGHT_NEON_THEME,sunset:SUNSET_GLOW_THEME,ocean:OCEAN_BREEZE_THEME,forest:FOREST_MIST_THEME,cyberpunk:CYBERPUNK_DARK_THEME,deepWoods:DEEP_WOODS_DARK_THEME};
+import{CYBERPUNK_DARK_THEME}from"./cyberpunkTheme";import{DEEP_WOODS_DARK_THEME}from"./deepWoodsTheme";import{DEFAULT_DARK_THEME}from"./darkTheme";import{DEFAULT_LIGHT_THEME}from"./lightTheme";import{DEFAULT_MATRIX_THEME}from"./hackerTheme";import{DEFAULT_MSDOS_THEME}from"./msdosTheme";import{FOREST_MIST_THEME}from"./forestTheme";import{MIDNIGHT_NEON_THEME}from"./midnightTheme";import{OCEAN_BREEZE_THEME}from"./oceanTheme";import{PASTEL_DREAM_THEME}from"./pastelTheme";import{SUNSET_GLOW_THEME}from"./sunsetTheme";export var DEFAULT_THEMES={light:DEFAULT_LIGHT_THEME,dark:DEFAULT_DARK_THEME,pastel:PASTEL_DREAM_THEME,midnight:MIDNIGHT_NEON_THEME,sunset:SUNSET_GLOW_THEME,ocean:OCEAN_BREEZE_THEME,forest:FOREST_MIST_THEME,cyberpunk:CYBERPUNK_DARK_THEME,deepWoods:DEEP_WOODS_DARK_THEME,hacker:DEFAULT_MATRIX_THEME,msdos:DEFAULT_MSDOS_THEME};

package/dist/theme/helpers/colorScale.js

@@ -0,0 +1 @@
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["color"];import{omit,keys}from'ramda';import{DEFAULT_DARK_THEME}from"../default/darkTheme";var SCALE=keys(DEFAULT_DARK_THEME.colors);export function getColorFromProps(_ref,defaultValue){var color=_ref.color,props=_objectWithoutProperties(_ref,_excluded);if(!!color)return[color,props];color=SCALE.find(function(key){return!!props[key];})||defaultValue;return[color,omit(SCALE,props)];}

package/dist/theme/helpers/contrastColor.js

@@ -0,0 +1 @@
+import tinycolor from'tinycolor2';export function getContrastColor(bg){var options=arguments.length>1&&arguments[1]!==undefined?arguments[1]:['#FFFFFF','#666666'];var tolerance=arguments.length>2&&arguments[2]!==undefined?arguments[2]:2.5;if(!options.length)return'#666666';return tinycolor.mostReadable(bg,options).toHexString();}

package/dist/theme/helpers/dynamicColor.js

@@ -0,0 +1 @@
+import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";var BASE_COLORS=['text3','blue','yellow','green','purple','orange','cyan','red','navy','indigo','gray','brown','lylac','pink'];var COLORS=[].concat(BASE_COLORS,_toConsumableArray(BASE_COLORS.map(function(c){return`${c}+10`;})),_toConsumableArray(BASE_COLORS.map(function(c){return`${c}-10`;})));export function getDynamicColor(id){var num;if(typeof id==='number'){num=id;}else{num=String(id).split('').reduce(function(acc,char){return acc+char.charCodeAt(0);},0);}var index=num%COLORS.length;return COLORS[index];}

package/dist/theme/helpers/mergePreset.js

@@ -0,0 +1 @@
+import{getThemeValue}from"./relatedScales";export function mergePreset(presets,key,props,defaultKey){if(!key)return props;var preset=getThemeValue(presets,key,false)||getThemeValue(presets,defaultKey,{});return Object.assign({},props,preset);}

package/dist/theme/helpers/relatedScales.js

@@ -0,0 +1 @@
+import{is}from'ramda';var SCALES=[['xxxs'],['xxs'],['xs'],['sm','small'],['md','p'],['lg','h6'],['xl','h5'],['xxl','h4'],['xxxl','h3']];export function getScaleSynonyms(key){return SCALES.find(function(list){return list.includes(key);})||[];}export function getThemeValue(group,key,defaultValue){defaultValue=defaultValue===undefined?key:defaultValue;if(!key)return defaultValue;var value=group[key];if(!!value||!is(String,key))return value||defaultValue;var synonyms=getScaleSynonyms(key);for(var synonym of synonyms){if(group!=null&&group[synonym]){value=group[synonym];break;}}return value||defaultValue;}

package/dist/theme/helpers/sizeScale.js

@@ -1 +1 @@
-var SCALES=['xxxsm','xxsm','xsm','sm','md','lg','xlg','xxlg','xxxlg'];export function moveScaleDown(value){var unit=arguments.length>1&&arguments[1]!==undefined?arguments[1]:1;var index=SCALES.indexOf(value);if(!index)return value;return SCALES[index-unit]||value;}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size"];import{omit}from'ramda';var SCALE=['xxxs','xxs','xs','sm','md','lg','xl','xxl','xxxl'];export function moveScale(value){var unit=arguments.length>1&&arguments[1]!==undefined?arguments[1]:1;var index=SCALE.indexOf(value);if(!index)return value;var movedIndex=index+unit;var movedValue=SCALE[index+unit];if(!movedValue){movedValue=unit>0?'xxxl':'xxxs';}return movedValue;}export function getSizeFromProps(_ref,defaultValue){var size=_ref.size,props=_objectWithoutProperties(_ref,_excluded);if(!!size)return[size,props];size=SCALE.find(function(key){return!!props[key];})||defaultValue;return[size,omit(SCALE,props)];}

package/dist/theme/helpers/textScale.js

@@ -0,0 +1 @@
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size"];import{omit}from'ramda';var SCALE=['xxxs','xxs','xs','sm','p','h6','h5','h4','h3','h2','h1'];export function moveTextScale(value){var unit=arguments.length>1&&arguments[1]!==undefined?arguments[1]:1;var index=SCALE.indexOf(value);if(!index)return value;return SCALE[index+unit]||value;}export function getTextFromProps(_ref,defaultValue){var size=_ref.size,props=_objectWithoutProperties(_ref,_excluded);if(!!size)return[size,props];size=SCALE.find(function(key){return!!props[key];})||defaultValue;return[size,omit(SCALE,props)];}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neko-os/ui",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "author": "Christian Storch <ccstorch@gmail.com>",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -21,16 +21,20 @@
     "access": "public"
   },
   "peerDependencies": {
+    "@remixicon/react": "^4.6.0",
     "dayjs": "^1.11.13",
     "ramda": "^0.31.3",
     "react": "*",
     "react-native": "*",
-    "react-native-web": "*",
-    "@remixicon/react": "^4.6.0",
-    "react-native-remix-icon": "^4.6.3"
+    "react-native-gesture-handler": "^2.28.0",
+    "react-native-reanimated": "^4.1.0",
+    "react-native-remix-icon": "^4.6.3",
+    "react-native-web": "*"
   },
   "dependencies": {
+    "dayjs": "^1.11.13",
     "prop-types": "^15.8.1",
+    "react-native-safe-area-context": "^5.6.1",
     "react-native-web": "^0.21.0",
     "tinycolor2": "^1.6.0"
   },

package/src/NekoUI.js

@@ -1,5 +1,19 @@
+import { NotificationsHandler } from './components/feedback/notifications/NotificationsHandler'
+import { OverlayHandler } from './components/structure/overlay/OverlayHandler'
+import { PortalHandler } from './components/helpers/PortalHandler'
+import { ResponsiveHandler } from './responsive/ResponsiveHandler'
 import { ThemeHandler } from './theme/ThemeHandler'
 
 export function NekoUI({ children, ...props }) {
-  return <ThemeHandler {...props}>{children}</ThemeHandler>
+  return (
+    <ThemeHandler {...props}>
+      <ResponsiveHandler>
+        <PortalHandler>
+          <NotificationsHandler>
+            <OverlayHandler>{children}</OverlayHandler>
+          </NotificationsHandler>
+        </PortalHandler>
+      </ResponsiveHandler>
+    </ThemeHandler>
+  )
 }

package/src/abstractions/ActivityIndicator.js

@@ -0,0 +1,31 @@
+import tinycolor from 'tinycolor2'
+
+export function AbsActivityIndicator({ size = 20, color, style }) {
+  const bg = tinycolor(color).setAlpha(0.2).toString()
+
+  return (
+    <div
+      style={{
+        width: size,
+        height: size,
+        border: `${size / 8}px solid ${bg}`, // light transparent border
+        borderTop: `${size / 8}px solid ${color}`, // colored border for spinner effect
+        borderRadius: '50%',
+        animation: 'spin 1s linear infinite',
+        ...style,
+      }}
+    ></div>
+  )
+}
+
+// Add global CSS for animation
+// const styleSheet = document.styleSheets[0]
+// styleSheet.insertRule(
+// `
+// @keyframes spin {
+// 0% { transform: rotate(0deg); }
+// 100% { transform: rotate(360deg); }
+// }
+// `,
+// styleSheet.cssRules.length
+// )

package/src/abstractions/ActivityIndicator.native.js

@@ -0,0 +1,44 @@
+import tinycolor from 'tinycolor2'
+import { Animated, Easing } from 'react-native'
+import React from 'react'
+
+export function AbsActivityIndicator({ size = 20, color, style }) {
+  const spinValue = React.useRef(new Animated.Value(0)).current
+  const bg = tinycolor(color).setAlpha(0.2).toString()
+
+  React.useEffect(() => {
+    const spinAnimation = Animated.loop(
+      Animated.timing(spinValue, {
+        toValue: 1,
+        duration: 1000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      })
+    )
+    spinAnimation.start()
+    return () => spinAnimation.stop()
+  }, [spinValue])
+
+  const spin = spinValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  })
+
+  const borderWidth = size / 8
+
+  console.log(color, bg)
+  return (
+    <Animated.View
+      style={{
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        borderWidth: borderWidth,
+        borderColor: `${bg}`,
+        borderTopColor: color,
+        transform: [{ rotate: spin }],
+        ...style,
+      }}
+    />
+  )
+}

package/src/abstractions/AnimatedView.js

@@ -0,0 +1,3 @@
+export function AbsAnimatedView({ children, style, ...props }) {
+  return <div style={style}>{children}</div>
+}

package/src/abstractions/AnimatedView.native.js

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

package/src/abstractions/BKTouchableOpacity.js

@@ -0,0 +1,12 @@
+// import React from 'react'
+
+// let AbsTouchableOpacity
+
+// try {
+// const { Platform, TouchableOpacity: RNTouchableOpacity } = require('react-native')
+// AbsTouchableOpacity = (props) => <RNTouchableOpacity {...props} />
+// } catch {
+// AbsTouchableOpacity = (props) => <button {...props} />
+// }
+
+// export { AbsTouchableOpacity }

package/src/abstractions/DraggableSlideView.js

@@ -0,0 +1,85 @@
+export function AbsDraggableSlideView({ children }) {
+  return children
+}
+// export function AbsDraggableSlideView({
+// from = 'left',
+// distance,
+// open,
+// onClose,
+// style,
+// threshold = 0.3,
+// children,
+// resetOnOpen = true,
+// }) {
+// const [dragging, setDragging] = React.useState(false)
+// const [startPos, setStartPos] = React.useState(0)
+// const [translate, setTranslate] = React.useState(0)
+
+// const ref = React.useRef()
+
+// Reset on open
+// React.useEffect(() => {
+// if (resetOnOpen && open) setTranslate(0)
+// }, [open, resetOnOpen])
+
+// Handle pointer down
+// const handlePointerDown = (e) => {
+// setDragging(true)
+// const pos = from === 'left' || from === 'right' ? e.clientX : e.clientY
+// setStartPos(pos)
+// e.target.setPointerCapture(e.pointerId)
+// }
+
+// const handlePointerMove = (e) => {
+// if (!dragging) return
+// const pos = from === 'left' || from === 'right' ? e.clientX : e.clientY
+// let delta = pos - startPos
+
+// if (from === 'left') delta = Math.min(delta, 0)
+// else if (from === 'right') delta = Math.max(delta, 0)
+// else if (from === 'top') delta = Math.min(delta, 0)
+// else delta = Math.max(delta, 0)
+
+// setTranslate(delta)
+// }
+
+// const handlePointerUp = (e) => {
+// if (!dragging) return
+// setDragging(false)
+
+// Determine progress and if should close
+// const size = from === 'left' || from === 'right' ? window.innerWidth : window.innerHeight
+// const delta = translate
+// let progress
+// if (from === 'left') progress = -delta / (distance || size)
+// else if (from === 'right') progress = delta / (distance || size)
+// else if (from === 'top') progress = -delta / (distance || size)
+// else progress = delta / (distance || size)
+
+// const shouldClose = progress > threshold
+
+// Animate to final position
+// const finalValue = shouldClose ? (from === 'left' || from === 'top' ? -(distance || size) : distance || size) : 0
+
+// setTranslate(finalValue)
+
+// if (shouldClose && onClose) onClose()
+// }
+
+// const transformStyle =
+// from === 'left' || from === 'right'
+// ? { transform: `translateX(${translate}px)`, transition: dragging ? 'none' : 'transform 0.2s' }
+// : { transform: `translateY(${translate}px)`, transition: dragging ? 'none' : 'transform 0.2s' }
+
+// return (
+// <div
+// ref={ref}
+// style={{ ...style, ...transformStyle, touchAction: 'none', cursor: 'grab' }}
+// onPointerDown={handlePointerDown}
+// onPointerMove={handlePointerMove}
+// onPointerUp={handlePointerUp}
+// >
+// {children}
+// </div>
+// )
+// }

package/src/abstractions/DraggableSlideView.native.js

@@ -0,0 +1,62 @@
+import { Dimensions } from 'react-native'
+import { Gesture, GestureDetector } from 'react-native-gesture-handler'
+import Animated, { useSharedValue, useAnimatedStyle, withSpring, withTiming, runOnJS } from 'react-native-reanimated'
+import React from 'react'
+
+export function AbsDraggableSlideView({
+  from = 'left',
+  distance,
+  open,
+  onClose,
+  style,
+  threshold = 0.3,
+  children,
+  resetOnOpen = true,
+}) {
+  const { width, height } = Dimensions.get('window')
+  const maxDistance = from === 'left' || from === 'right' ? distance || width : distance || height
+  const gestureTranslation = useSharedValue(0)
+
+  React.useEffect(() => {
+    if (resetOnOpen && open) {
+      gestureTranslation.value = 0
+    }
+  }, [open, resetOnOpen, gestureTranslation])
+
+  const panGesture = Gesture.Pan()
+    .onUpdate((e) => {
+      if (from === 'left') gestureTranslation.value = Math.min(e.translationX, 0)
+      else if (from === 'right') gestureTranslation.value = Math.max(e.translationX, 0)
+      else if (from === 'top') gestureTranslation.value = Math.min(e.translationY, 0)
+      else gestureTranslation.value = Math.max(e.translationY, 0)
+    })
+    .onEnd((e) => {
+      let progress
+      if (from === 'left') progress = -e.translationX / maxDistance
+      else if (from === 'right') progress = e.translationX / maxDistance
+      else if (from === 'top') progress = -e.translationY / maxDistance
+      else progress = e.translationY / maxDistance
+
+      const shouldClose = progress > threshold
+      let finalValue = from === 'left' || from === 'top' ? -maxDistance : maxDistance
+      if (!shouldClose) finalValue = 0
+
+      gestureTranslation.value = withTiming(finalValue, { duration: 200 }, (finished) => {
+        if (finished && onClose && shouldClose) runOnJS(onClose)()
+      })
+    })
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const transform =
+      from === 'left' || from === 'right'
+        ? [{ translateX: gestureTranslation.value }]
+        : [{ translateY: gestureTranslation.value }]
+    return { transform }
+  })
+
+  return (
+    <GestureDetector gesture={panGesture}>
+      <Animated.View style={[style, animatedStyle]}>{children}</Animated.View>
+    </GestureDetector>
+  )
+}

package/src/abstractions/HiddenInput.js

@@ -0,0 +1,3 @@
+export function AbsHiddenInput(props) {
+  return <input style={{ width: 0, height: 0, position: 'absolute', opacity: 0 }} {...props} />
+}

package/src/abstractions/HiddenInput.native.js

@@ -0,0 +1,3 @@
+export function AbsHiddenInput() {
+  return false
+}

package/src/abstractions/Icon.js

@@ -1,26 +1,10 @@
-import React from 'react'
+import * as Icons from '@remixicon/react'
 
 import { capitalizeFirstLetter, toCamelCase } from '../helpers/string'
 
 export function AbsIcon({ name, ...props }) {
-  const [loading, setLoading] = React.useState(true)
-  const ref = React.useRef()
-  const Component = ref?.current || (() => false)
+  if (!!name && !name.startsWith('Ri')) name = 'Ri' + capitalizeFirstLetter(toCamelCase(name))
+  const IconComponent = Icons[name] || Icons['RiCircleFill']
 
-  React.useEffect(() => {
-    try {
-      import('@remixicon/react').then((module) => {
-        if (!!name && !name.startsWith('Ri')) name = 'Ri' + capitalizeFirstLetter(toCamelCase(name))
-        let IconComponent = module[name] || module['RiCircleFill']
-        ref.current = IconComponent
-        setLoading(false)
-      })
-    } catch {
-      console.error('Error loading AbsIcon component')
-    }
-  }, [])
-
-  if (loading) return false
-
-  return <Component {...props} />
+  return <IconComponent {...props} />
 }

package/src/abstractions/Icon.native.js

@@ -1,2 +1,11 @@
-import RmIcon from 'react-native-remix-icon'
-export const AbsIcon = RmIcon
+let AbsIcon
+
+try {
+  const RmIcon = require('react-native-remix-icon')?.default
+  console.log(RmIcon)
+  AbsIcon = (props) => <RmIcon {...props} />
+} catch {
+  AbsIcon = () => false
+}
+
+export { AbsIcon }

package/src/abstractions/Icon.web.js

@@ -1,2 +1,11 @@
-import RmIcon from 'react-native-remix-icon'
-export const AbsIcon = RmIcon
+let AbsIcon
+
+try {
+  const RmIcon = require('react-native-remix-icon')?.default
+  console.log(RmIcon)
+  AbsIcon = (props) => <RmIcon {...props} />
+} catch {
+  AbsIcon = () => false
+}
+
+export { AbsIcon }

package/src/abstractions/Image.js

@@ -0,0 +1,12 @@
+export function AbsImage({ src, resizeMode = 'cover', style, ...props }) {
+  const objectFitMap = {
+    cover: 'cover',
+    contain: 'contain',
+    stretch: 'fill',
+    center: 'none',
+  }
+
+  const objectFit = objectFitMap[resizeMode] || 'cover'
+
+  return <img src={src} style={{ objectFit, objectPosition: 'center', ...style }} {...props} />
+}

package/src/abstractions/Image.native.js

@@ -0,0 +1,7 @@
+import { Image as RNImage } from 'react-native'
+
+export function AbsImage({ src, source, resizeMode = 'cover', ...props }) {
+  if (!source && !!src) source = { uri: src }
+
+  return <RNImage source={source} resizeMode={resizeMode} {...props} />
+}

package/src/abstractions/Image.web.js

@@ -0,0 +1,7 @@
+import { Image as RNImage } from 'react-native'
+
+export function AbsImage({ src, source, resizeMode = 'cover', ...props }) {
+  if (!source && !!src) source = { uri: src }
+
+  return <RNImage source={source} resizeMode={resizeMode} {...props} />
+}

package/src/abstractions/Platform.js

@@ -0,0 +1 @@
+export const Platform = { OS: 'web' }

package/src/abstractions/Platform.native.js

@@ -0,0 +1,3 @@
+import { Platform as RNPlatform } from 'react-native'
+
+export const Platform = RNPlatform

package/src/abstractions/Platform.web.js

@@ -0,0 +1,3 @@
+import { Platform as RNPlatform } from 'react-native'
+
+export const Platform = RNPlatform