@neko-os/ui 0.0.4 → 0.0.6

package/src/theme/default/hackerTheme.js

@@ -0,0 +1,40 @@
+import { mergeDeepRight } from 'ramda'
+
+import { BASE_THEME } from './base'
+
+export const 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/src/theme/default/lightTheme.js

@@ -12,6 +12,7 @@ export const DEFAULT_LIGHT_THEME = mergeDeepRight(BASE_THEME, {
     bg: '#F4F5FE',
     overlayBG: '#FFFFFF',
     shadow: 'rgba(39, 45, 52, 0.15)',
+    divider: '#e0e0e0',
 
     blue: '#4DA3FF',
     yellow: '#FFD93B',

package/src/theme/default/midnightTheme.js

@@ -12,6 +12,7 @@ export const MIDNIGHT_NEON_THEME = mergeDeepRight(BASE_THEME, {
     bg: '#0D0D0D',
     overlayBG: '#1A1A1A',
     shadow: 'rgba(39, 45, 52, 0.6)',
+    divider: 'rgba(255,255,255, 0.2)',
 
     blue: '#3B82F6',
     yellow: '#FACC15',

package/src/theme/default/msdosTheme.js

@@ -0,0 +1,40 @@
+import { mergeDeepRight } from 'ramda'
+
+import { BASE_THEME } from './base'
+
+export const 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/src/theme/default/oceanTheme.js

@@ -12,6 +12,7 @@ export const OCEAN_BREEZE_THEME = mergeDeepRight(BASE_THEME, {
     bg: '#E6F7FF',
     overlayBG: '#FFFFFF',
     shadow: 'rgba(39, 45, 52, 0.15)',
+    divider: 'rgba(0,0,0, 0.1)',
 
     blue: '#1D4ED8',
     yellow: '#FACC15',

package/src/theme/default/pastelTheme.js

@@ -12,6 +12,7 @@ export const PASTEL_DREAM_THEME = mergeDeepRight(BASE_THEME, {
     bg: '#FFF7FA',
     overlayBG: '#FFFFFF',
     shadow: 'rgba(39, 45, 52, 0.15)',
+    divider: 'rgba(255,255,255, 0.2)',
 
     blue: '#A5B4FC',
     yellow: '#FDE68A',

package/src/theme/default/sunsetTheme.js

@@ -13,6 +13,7 @@ export const SUNSET_GLOW_THEME = mergeDeepRight(BASE_THEME, {
     bg: '#FFF5E6',
     overlayBG: '#FFFFFF',
     shadow: 'rgba(39, 45, 52, 0.15)',
+    divider: 'rgba(255,255,255, 0.2)',
 
     blue: '#3B82F6',
     yellow: '#FBBF24',

package/src/theme/default/themes.js

@@ -2,6 +2,8 @@ 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'
@@ -18,4 +20,6 @@ export const DEFAULT_THEMES = {
   forest: FOREST_MIST_THEME,
   cyberpunk: CYBERPUNK_DARK_THEME,
   deepWoods: DEEP_WOODS_DARK_THEME,
+  hacker: DEFAULT_MATRIX_THEME,
+  msdos: DEFAULT_MSDOS_THEME,
 }

package/src/theme/helpers/colorScale.js

@@ -0,0 +1,11 @@
+import { omit, keys } from 'ramda'
+
+import { DEFAULT_DARK_THEME } from '../default/darkTheme'
+
+const SCALE = keys(DEFAULT_DARK_THEME.colors)
+
+export function getColorFromProps({ color, ...props }, defaultValue) {
+  if (!!color) return [color, props]
+  color = SCALE.find((key) => !!props[key]) || defaultValue
+  return [color, omit(SCALE, props)]
+}

package/src/theme/helpers/contrastColor.js

@@ -0,0 +1,20 @@
+import tinycolor from 'tinycolor2'
+
+export function getContrastColor(bg, options = ['#FFFFFF', '#666666'], tolerance = 2.5) {
+  if (!options.length) return '#666666'
+
+  return tinycolor.mostReadable(bg, options).toHexString()
+
+  // const contrasts = options.map((color) => ({
+  // color,
+  // contrast: tinycolor.readability(bg, color),
+  // }))
+
+  // contrasts.sort((a, b) => b.contrast - a.contrast)
+
+  // if (contrasts.length > 1 && Math.abs(contrasts[0].contrast - contrasts[1].contrast) < tolerance) {
+  // return options[0]
+  // }
+
+  // return contrasts[0].color
+}

package/src/theme/helpers/dynamicColor.js

@@ -0,0 +1,32 @@
+const BASE_COLORS = [
+  'text3',
+  'blue',
+  'yellow',
+  'green',
+  'purple',
+  'orange',
+  'cyan',
+  'red',
+  'navy',
+  'indigo',
+  'gray',
+  'brown',
+  'lylac',
+  'pink',
+]
+
+const COLORS = [...BASE_COLORS, ...BASE_COLORS.map((c) => `${c}+10`), ...BASE_COLORS.map((c) => `${c}-10`)]
+
+export function getDynamicColor(id) {
+  let num
+  if (typeof id === 'number') {
+    num = id
+  } else {
+    num = String(id)
+      .split('')
+      .reduce((acc, char) => acc + char.charCodeAt(0), 0)
+  }
+
+  const index = num % COLORS.length
+  return COLORS[index]
+}

package/src/theme/helpers/mergePreset.js

@@ -0,0 +1,7 @@
+import { getThemeValue } from './relatedScales'
+
+export function mergePreset(presets, key, props, defaultKey) {
+  if (!key) return props
+  const preset = getThemeValue(presets, key, false) || getThemeValue(presets, defaultKey, {})
+  return { ...props, ...preset }
+}

package/src/theme/helpers/relatedScales.js

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

package/src/theme/helpers/sizeScale.js

@@ -1,7 +1,20 @@
-const SCALES = ['xxxsm', 'xxsm', 'xsm', 'sm', 'md', 'lg', 'xlg', 'xxlg', 'xxxlg']
+import { omit } from 'ramda'
 
-export function moveScaleDown(value, unit = 1) {
-  const index = SCALES.indexOf(value)
+const SCALE = ['xxxs', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl']
+
+export function moveScale(value, unit = 1) {
+  const index = SCALE.indexOf(value)
   if (!index) return value
-  return SCALES[index - unit] || value
+  const movedIndex = index + unit
+  let movedValue = SCALE[index + unit]
+  if (!movedValue) {
+    movedValue = unit > 0 ? 'xxxl' : 'xxxs'
+  }
+  return movedValue
+}
+
+export function getSizeFromProps({ size, ...props }, defaultValue) {
+  if (!!size) return [size, props]
+  size = SCALE.find((key) => !!props[key]) || defaultValue
+  return [size, omit(SCALE, props)]
 }

package/src/theme/helpers/textScale.js

@@ -0,0 +1,15 @@
+import { omit } from 'ramda'
+
+const SCALE = ['xxxs', 'xxs', 'xs', 'sm', 'p', 'h6', 'h5', 'h4', 'h3', 'h2', 'h1']
+
+export function moveTextScale(value, unit = 1) {
+  const index = SCALE.indexOf(value)
+  if (!index) return value
+  return SCALE[index + unit] || value
+}
+
+export function getTextFromProps({ size, ...props }, defaultValue) {
+  if (!!size) return [size, props]
+  size = SCALE.find((key) => !!props[key]) || defaultValue
+  return [size, omit(SCALE, props)]
+}

package/dist/actions/Button.js

@@ -1 +0,0 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/actions/Button.js";var _excluded=["label","style","textProps","size"];import{pipe}from'ramda';import{AbsTouchableOpacity}from"../abstractions/TouchableOpacity";import{Text}from"../text/Text";import{useBackgroundModifier}from"../modifiers/background";import{useBorderModifier}from"../modifiers/border";import{useFlexModifier}from"../modifiers/flex";import{useFlexWrapperModifier}from"../modifiers/flexWrapper";import{useFullColorModifier}from"../modifiers/fullColor.js";import{useMarginModifier}from"../modifiers/margin";import{useMergeThemeComponent}from"../theme/ThemeHandler";import{usePaddingModifier}from"../modifiers/padding";import{usePositionModifier}from"../modifiers/position";import{useSizeModifier}from"../modifiers/size";import{jsx as _jsx}from"react/jsx-runtime";export function Button(rootProps){var _useMergeThemeCompone=useMergeThemeComponent('Button',rootProps),label=_useMergeThemeCompone.label,style=_useMergeThemeCompone.style,textProps=_useMergeThemeCompone.textProps,_useMergeThemeCompone2=_useMergeThemeCompone.size,size=_useMergeThemeCompone2===void 0?'md':_useMergeThemeCompone2,props=_objectWithoutProperties(_useMergeThemeCompone,_excluded);var defaultProps={paddingH:size,paddingV:2,height:size,br:size,borderWidth:1,color:'primary',center:true,row:true};var _useFullColorModifier=useFullColorModifier(Object.assign({},defaultProps,props,{style:style})),_useFullColorModifier2=_slicedToArray(_useFullColorModifier,2),fontColor=_useFullColorModifier2[0],formattedProps=_useFullColorModifier2[1];props=pipe(useSizeModifier,usePositionModifier,usePaddingModifier,useMarginModifier,useFlexModifier,useFlexWrapperModifier,useBackgroundModifier,useBorderModifier)(formattedProps);return _jsx(AbsTouchableOpacity,Object.assign({className:"neko-button neko-wave-click-effect"},props,{children:_jsx(Text,Object.assign({center:true,color:fontColor,strong:true,size:size},textProps,{children:label}))}));}

package/dist/actions/index.js

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

package/dist/form/Form.js

@@ -1 +0,0 @@
-var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/form/Form.js";import React from'react';import{FormWrapperComponent}from"./FormWrapperComponent";import{jsx as _jsx}from"react/jsx-runtime";var FormContext=React.createContext(null);export var useFormInstance=function useFormInstance(){return React.useContext(FormContext);};export function Form(_ref){var form=_ref.form,children=_ref.children;return _jsx(FormContext.Provider,{value:form,children:_jsx(FormWrapperComponent,{form:form,children:children})});}

package/dist/form/FormGroup.js

@@ -1 +0,0 @@
-import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/form/FormGroup.js";import React from'react';import{jsx as _jsx}from"react/jsx-runtime";var FormGroupContext=React.createContext(null);var useGroupPath=function useGroupPath(){var _React$useContext;return((_React$useContext=React.useContext(FormGroupContext))==null?void 0:_React$useContext.path)||[];};export function useRelativePath(name,opts){var relative=opts.relative;var listPath=!!name?Array.isArray(name)?name:[name]:[];var parentPath=useGroupPath();if(!relative)return listPath;return[].concat(_toConsumableArray(parentPath),_toConsumableArray(listPath));}export function FormGroup(_ref){var name=_ref.name;var path=useRelativePath(name,{relative:true});var value={path:path};return _jsx(FormGroupContext.Provider,{value:value,children:children});}

package/dist/form/FormItem.js

@@ -1 +0,0 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/form/FormItem.js";import{Text}from"react-native-web";import React from'react';import{FormGroup,useRelativePath}from"./FormGroup";import{useFormInstance}from"./Form";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export function FormItem(_ref){var name=_ref.name,relative=_ref.relative,children=_ref.children;var form=useFormInstance();var listPath=useRelativePath(name,{relative:relative});var _React$useState=React.useState(form.getFieldValue(listPath)),_React$useState2=_slicedToArray(_React$useState,2),value=_React$useState2[0],setValue=_React$useState2[1];var error=form.getError(listPath);React.useEffect(function(){return form.registerListener(listPath,function(val){return setValue(val);});},[listPath.join('$NEKOJOIN$')]);var handleChange=function handleChange(e){var _e$target$value,_e$target;var val=(_e$target$value=e==null?void 0:(_e$target=e.target)==null?void 0:_e$target.value)!=null?_e$target$value:e;form.setFieldValue(listPath,val);};var child=React.Children.only(children);var childWithProps=React.cloneElement(child,{value:value,onChange:handleChange});return _jsxs(FormGroup,{name:listPath,children:[childWithProps,error&&_jsx(Text,{style:{color:'red'},children:error})]});}

package/dist/form/FormList.js

@@ -1 +0,0 @@
-import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/form/FormList.js";import{Text}from"react-native-web";import React from'react';import{FormGroup,useRelativePath}from"./FormGroup";import{useFormInstance}from"./Form";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";var FormListContext=React.createContext(null);var useFormList=function useFormList(){return React.useContext(FormListContext);};export function FormList(_ref){var name=_ref.name,relative=_ref.relative,children=_ref.children;var form=useFormInstance();var listPath=useRelativePath(name,{relative:relative});var listPathStr=listPath.join('$NEKOJOIN$');var error=form.getError(listPath);var _React$useState=React.useState(function(){var initial=form.getFieldValue(listPath)||[];return initial.map(function(_,index){return{key:index,name:index};});}),_React$useState2=_slicedToArray(_React$useState,2),fields=_React$useState2[0],setFields=_React$useState2[1];React.useEffect(function(){return form.registerListener(listPath,function(val){if(Array.isArray(val)){setFields(val.map(function(_,index){return{key:index,name:index};}));}});},[listPathStr]);var add=function add(){var defaultValue=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var current=form.getFieldValue(listPath)||[];form.setFieldValue(listPath,[].concat(_toConsumableArray(current),[defaultValue]));};var addOn=function addOn(index){var defaultValue=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var current=form.getFieldValue(listPath)||[];form.setFieldValue(listPath,[].concat(_toConsumableArray(current.slice(0,index)),[defaultValue],_toConsumableArray(current.slice(index))));};var replace=function replace(index,value){var current=form.getFieldValue(listPath)||[];form.setFieldValue(listPath,current.map(function(item,i){return i===index?value:item;}));};var move=function move(fromIndex,toIndex){var current=form.getFieldValue(listPath)||[];if(fromIndex<0||fromIndex>=current.length)return;if(toIndex<0||toIndex>=current.length)return;var item=current[fromIndex];var updated=_toConsumableArray(current);updated.splice(fromIndex,1);updated.splice(toIndex,0,item);form.setFieldValue(listPath,updated);};var remove=function remove(index){var current=form.getFieldValue(listPath)||[];form.setFieldValue(listPath,current.filter(function(_,i){return i!==index;}));};var actions=React.useMemo(function(){return{add:add,addOn:addOn,replace:replace,remove:remove,move:move};},[listPathStr]);return _jsx(FormGroup,{name:listPath,children:_jsxs(FormListContext.Provider,{value:actions,children:[typeof children==='function'?children(fields,actions):React.cloneElement(React.Children.only(children),Object.assign({fields:fields},actions)),error&&_jsx(Text,{style:{color:'red'},children:error})]})});}

package/dist/form/FormWrapperComponent.js

@@ -1 +0,0 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/form/FormWrapperComponent.js";var _excluded=["children","form"];import{jsx as _jsx}from"react/jsx-runtime";export function FormWrapperComponent(_ref){var children=_ref.children,form=_ref.form,props=_objectWithoutProperties(_ref,_excluded);var handleSubmit=function handleSubmit(e){e.preventDefault();form.handleSubmit();};return _jsx("form",{onSubmit:handleSubmit,children:children});}

package/dist/form/FormWrapperComponent.native.js

@@ -1 +0,0 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["children"];import React from'react';export function FormWrapperComponent(_ref){var children=_ref.children,props=_objectWithoutProperties(_ref,_excluded);return children;}

package/dist/form/useForm.js

@@ -1 +0,0 @@
-import{assocPath,path}from'ramda';import React from'react';export function useForm(){var _ref=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{},_ref$initialValues=_ref.initialValues,initialValues=_ref$initialValues===void 0?{}:_ref$initialValues,validate=_ref.validate;var valuesRef=React.useRef(Object.assign({},initialValues));var errorsRef=React.useRef({});var listenersRef=React.useRef({});var notify=function notify(name){var key=Array.isArray(name)?name.join('.'):name;if(listenersRef.current[key]){listenersRef.current[key].forEach(function(cb){return cb(path(name,valuesRef.current));});}};var setFieldValue=function setFieldValue(name,value){valuesRef.current=assocPath(name,value,valuesRef.current);notify(name);};var getFieldValue=function getFieldValue(name){return path(name,valuesRef.current);};var getError=function getError(name){return path(name,errorsRef.current);};var setError=function setError(name,error){errorsRef.current=assocPath(name,error,errorsRef.current);};var registerListener=function registerListener(name,cb){var key=Array.isArray(name)?name.join('.'):name;if(!listenersRef.current[key]){listenersRef.current[key]=[];}listenersRef.current[key].push(cb);return function(){listenersRef.current[key]=listenersRef.current[key].filter(function(fn){return fn!==cb;});};};var validateForm=function validateForm(){if(!validate)return true;var newErrors=validate(valuesRef.current)||{};errorsRef.current=newErrors;return Object.keys(newErrors).length===0;};var handleSubmit=function handleSubmit(onValid){return function(){var isValid=validateForm();if(isValid){onValid(valuesRef.current);}};};return{setFieldValue:setFieldValue,getFieldValue:getFieldValue,getError:getError,setError:setError,registerListener:registerListener,handleSubmit:handleSubmit,valuesRef:valuesRef};}

package/dist/modifiers/fullColor.js.js

@@ -1 +0,0 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["color","outline"];import tinycolor from'tinycolor2';import{useGetColor}from"../theme/ThemeHandler";export function useFullColorModifier(props){var getColor=useGetColor();var color=props.color,outline=props.outline,restProps=_objectWithoutProperties(props,_excluded);var bg=color;var bgObj=tinycolor(getColor(bg));var borderColor=color;var textColor='text';var textColorObj=tinycolor(getColor('text'));if(!!outline){bg='transparent';textColor=color;}else if(bgObj.isDark()===textColorObj.isDark()){textColor='overlayBG';}return[textColor,Object.assign({},restProps,{bg:bg,borderColor:borderColor})];}

package/dist/presentation/Icon.js

@@ -1 +0,0 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/presentation/Icon.js";var _excluded=["name","color"];import{AbsIcon}from"../abstractions/Icon";import{useGetColor,useMergeThemeComponent}from"../theme/ThemeHandler";import{jsx as _jsx}from"react/jsx-runtime";export function Icon(_ref){var name=_ref.name,color=_ref.color,rootProps=_objectWithoutProperties(_ref,_excluded);var getColor=useGetColor();var props=useMergeThemeComponent('Icon',rootProps);return _jsx(AbsIcon,Object.assign({className:"neko-icon",name:name,color:getColor(color||'text')},props));}

package/dist/presentation/Tag.js

@@ -1 +0,0 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/presentation/Tag.js";var _excluded=["label","style","textProps","size"];import{Text}from"../text/Text";import{View}from"../structure/View";import{moveScaleDown}from"../theme/helpers/sizeScale";import{useFullColorModifier}from"../modifiers/fullColor.js";import{useMergeThemeComponent}from"../theme/ThemeHandler";import{jsx as _jsx}from"react/jsx-runtime";export function Tag(rootProps){var _useMergeThemeCompone=useMergeThemeComponent('Button',rootProps),label=_useMergeThemeCompone.label,style=_useMergeThemeCompone.style,textProps=_useMergeThemeCompone.textProps,_useMergeThemeCompone2=_useMergeThemeCompone.size,size=_useMergeThemeCompone2===void 0?'md':_useMergeThemeCompone2,props=_objectWithoutProperties(_useMergeThemeCompone,_excluded);var oneSizeDown=moveScaleDown(size,1);var twoSizeDown=moveScaleDown(size,2);var threeSizeDown=moveScaleDown(size,3);var defaultProps={paddingH:twoSizeDown,padding:threeSizeDown,outline:true,br:threeSizeDown,borderWidth:1,color:'primary',center:true};var _useFullColorModifier=useFullColorModifier(Object.assign({},defaultProps,props,{style:style})),_useFullColorModifier2=_slicedToArray(_useFullColorModifier,2),fontColor=_useFullColorModifier2[0],formattedProps=_useFullColorModifier2[1];return _jsx(View,{className:"neko-tag",row:true,children:_jsx(View,Object.assign({className:"neko-tag-inner"},formattedProps,{children:_jsx(Text,Object.assign({strong:true,center:true,color:fontColor,size:oneSizeDown},textProps,{children:label}))}))});}

package/dist/presentation/index.js

@@ -1 +0,0 @@
-export*from"./Tag";export*from"./Icon";

package/dist/structure/Card.js

@@ -1 +0,0 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/structure/Card.js";var _excluded=["children"];import{pipe}from'ramda';import{AbsView}from"../abstractions/View";import{useBackgroundModifier}from"../modifiers/background";import{useBorderModifier}from"../modifiers/border";import{useFlexModifier}from"../modifiers/flex";import{useFlexWrapperModifier}from"../modifiers/flexWrapper";import{useMarginModifier}from"../modifiers/margin";import{useMergeThemeComponent}from"../theme/ThemeHandler";import{usePaddingModifier}from"../modifiers/padding";import{usePositionModifier}from"../modifiers/position";import{useShadowModifier}from"../modifiers/shadow";import{useSizeModifier}from"../modifiers/size";import{jsx as _jsx}from"react/jsx-runtime";export function Card(_ref){var children=_ref.children,rootProps=_objectWithoutProperties(_ref,_excluded);var props=useMergeThemeComponent('Card',rootProps);var defaultProps={padding:'md',br:'xlg',bg:'overlayBG'};props=pipe(useSizeModifier,usePositionModifier,usePaddingModifier,useMarginModifier,useFlexWrapperModifier,useFlexModifier,useBackgroundModifier,useBorderModifier,useShadowModifier)(Object.assign({},defaultProps,props));return _jsx(AbsView,Object.assign({className:"neko-card"},props,{children:children}));}

package/dist/structure/View.js

@@ -1 +0,0 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/structure/View.js";var _excluded=["children"];import{pipe}from'ramda';import{AbsView}from"../abstractions/View";import{useBackgroundModifier}from"../modifiers/background";import{useBorderModifier}from"../modifiers/border";import{useFlexModifier}from"../modifiers/flex";import{useFlexWrapperModifier}from"../modifiers/flexWrapper";import{useMarginModifier}from"../modifiers/margin";import{useMergeThemeComponent}from"../theme/ThemeHandler";import{usePaddingModifier}from"../modifiers/padding";import{usePositionModifier}from"../modifiers/position";import{useShadowModifier}from"../modifiers/shadow";import{useSizeModifier}from"../modifiers/size";import{jsx as _jsx}from"react/jsx-runtime";export function View(_ref){var children=_ref.children,rootProps=_objectWithoutProperties(_ref,_excluded);var props=useMergeThemeComponent('View',rootProps);props=pipe(useSizeModifier,usePositionModifier,usePaddingModifier,useMarginModifier,useFlexWrapperModifier,useFlexModifier,useBackgroundModifier,useBorderModifier,useShadowModifier)(props);return _jsx(AbsView,Object.assign({className:"neko-view"},props,{children:children}));}

package/dist/structure/index.js

@@ -1 +0,0 @@
-export*from"./View";export*from"./Card";

package/dist/text/Text.js

@@ -1 +0,0 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/text/Text.js";var _excluded=["children"];import{pipe}from'ramda';import{AbsText}from"../abstractions/Text";import{useFlexModifier}from"../modifiers/flex";import{useMarginModifier}from"../modifiers/margin";import{usePaddingModifier}from"../modifiers/padding";import{useSizeModifier}from"../modifiers/size";import{useTextModifier}from"../modifiers/text";import{jsx as _jsx}from"react/jsx-runtime";export function Text(_ref){var children=_ref.children,props=_objectWithoutProperties(_ref,_excluded);props=pipe(useSizeModifier,usePaddingModifier,useMarginModifier,useFlexModifier,useTextModifier)(props);return _jsx(AbsText,Object.assign({},props,{children:children}));}

package/dist/text/index.js

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

package/dist/theme/default/base.native.js

@@ -1 +0,0 @@
-export var BASE_THEME={spaces:{xxsm:3,xsm:5,sm:10,md:15,lg:20,xlg:30},radius:{xsm:5,sm:7,md:8,lg:10,xlg:12},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}}};

package/dist/theme/default/base.web.js

@@ -1 +0,0 @@
-import{BASE_THEME as MOBILE_BASE_THEME}from"./base.native";export var BASE_THEME=MOBILE_BASE_THEME;

package/src/actions/Button.js

@@ -1,48 +0,0 @@
-import { pipe } from 'ramda'
-
-import { AbsTouchableOpacity } from '../abstractions/TouchableOpacity'
-import { Text } from '../text/Text'
-import { useBackgroundModifier } from '../modifiers/background'
-import { useBorderModifier } from '../modifiers/border'
-import { useFlexModifier } from '../modifiers/flex'
-import { useFlexWrapperModifier } from '../modifiers/flexWrapper'
-import { useFullColorModifier } from '../modifiers/fullColor.js'
-import { useMarginModifier } from '../modifiers/margin'
-import { useMergeThemeComponent } from '../theme/ThemeHandler'
-import { usePaddingModifier } from '../modifiers/padding'
-import { usePositionModifier } from '../modifiers/position'
-import { useSizeModifier } from '../modifiers/size'
-
-export function Button(rootProps) {
-  let { label, style, textProps, size = 'md', ...props } = useMergeThemeComponent('Button', rootProps)
-  const defaultProps = {
-    paddingH: size,
-    paddingV: 2,
-    height: size,
-    br: size,
-    borderWidth: 1,
-    color: 'primary',
-    center: true,
-    row: true,
-  }
-  const [fontColor, formattedProps] = useFullColorModifier({ ...defaultProps, ...props, style })
-
-  props = pipe(
-    useSizeModifier, //
-    usePositionModifier,
-    usePaddingModifier,
-    useMarginModifier,
-    useFlexModifier,
-    useFlexWrapperModifier,
-    useBackgroundModifier,
-    useBorderModifier
-  )(formattedProps)
-
-  return (
-    <AbsTouchableOpacity className="neko-button neko-wave-click-effect" {...props}>
-      <Text center color={fontColor} strong size={size} {...textProps}>
-        {label}
-      </Text>
-    </AbsTouchableOpacity>
-  )
-}

package/src/actions/index.js

@@ -1 +0,0 @@
-export * from './Button'

package/src/form/Form.js

@@ -1,14 +0,0 @@
-import React from 'react'
-
-import { FormWrapperComponent } from './FormWrapperComponent'
-
-const FormContext = React.createContext(null)
-export const useFormInstance = () => React.useContext(FormContext)
-
-export function Form({ form, children }) {
-  return (
-    <FormContext.Provider value={form}>
-      <FormWrapperComponent form={form}>{children}</FormWrapperComponent>
-    </FormContext.Provider>
-  )
-}

package/src/form/FormItem.js

@@ -1,34 +0,0 @@
-import { Text } from 'react-native'
-import React from 'react'
-
-import { FormGroup, useRelativePath } from './FormGroup'
-import { useFormInstance } from './Form'
-
-export function FormItem({ name, relative, children }) {
-  const form = useFormInstance()
-  const listPath = useRelativePath(name, { relative })
-  const [value, setValue] = React.useState(form.getFieldValue(listPath))
-  const error = form.getError(listPath)
-
-  React.useEffect(() => {
-    return form.registerListener(listPath, (val) => setValue(val))
-  }, [listPath.join('$NEKOJOIN$')])
-
-  const handleChange = (e) => {
-    const val = e?.target?.value ?? e
-    form.setFieldValue(listPath, val)
-  }
-
-  const child = React.Children.only(children)
-  const childWithProps = React.cloneElement(child, {
-    value,
-    onChange: handleChange,
-  })
-
-  return (
-    <FormGroup name={listPath}>
-      {childWithProps}
-      {error && <Text style={{ color: 'red' }}>{error}</Text>}
-    </FormGroup>
-  )
-}

package/src/form/FormWrapperComponent.js

@@ -1,8 +0,0 @@
-export function FormWrapperComponent({ children, form, ...props }) {
-  const handleSubmit = (e) => {
-    e.preventDefault()
-    form.handleSubmit()
-  }
-
-  return <form onSubmit={handleSubmit}>{children}</form>
-}

package/src/form/FormWrapperComponent.native.js

@@ -1,5 +0,0 @@
-import React from 'react'
-
-export function FormWrapperComponent({ children, ...props }) {
-  return children
-}

package/src/form/useForm.js

@@ -1,65 +0,0 @@
-import { assocPath, path } from 'ramda'
-import React from 'react'
-
-export function useForm({ initialValues = {}, validate } = {}) {
-  const valuesRef = React.useRef({ ...initialValues })
-  const errorsRef = React.useRef({})
-  const listenersRef = React.useRef({})
-
-  const notify = (name) => {
-    const key = Array.isArray(name) ? name.join('.') : name
-    if (listenersRef.current[key]) {
-      listenersRef.current[key].forEach((cb) => cb(path(name, valuesRef.current)))
-    }
-  }
-
-  const setFieldValue = (name, value) => {
-    valuesRef.current = assocPath(name, value, valuesRef.current)
-    notify(name)
-  }
-
-  const getFieldValue = (name) => path(name, valuesRef.current)
-
-  const getError = (name) => path(name, errorsRef.current)
-
-  const setError = (name, error) => {
-    errorsRef.current = assocPath(name, error, errorsRef.current)
-  }
-
-  const registerListener = (name, cb) => {
-    const key = Array.isArray(name) ? name.join('.') : name
-    if (!listenersRef.current[key]) {
-      listenersRef.current[key] = []
-    }
-    listenersRef.current[key].push(cb)
-    return () => {
-      listenersRef.current[key] = listenersRef.current[key].filter((fn) => fn !== cb)
-    }
-  }
-
-  const validateForm = () => {
-    if (!validate) return true
-    const newErrors = validate(valuesRef.current) || {}
-    errorsRef.current = newErrors
-    return Object.keys(newErrors).length === 0
-  }
-
-  const handleSubmit = (onValid) => {
-    return () => {
-      const isValid = validateForm()
-      if (isValid) {
-        onValid(valuesRef.current)
-      }
-    }
-  }
-
-  return {
-    setFieldValue,
-    getFieldValue,
-    getError,
-    setError,
-    registerListener,
-    handleSubmit,
-    valuesRef,
-  }
-}

package/src/modifiers/fullColor.js.js

@@ -1,30 +0,0 @@
-import tinycolor from 'tinycolor2'
-
-import { useGetColor } from '../theme/ThemeHandler'
-
-export function useFullColorModifier(props) {
-  const getColor = useGetColor()
-  let { color, outline, ...restProps } = props
-
-  let bg = color
-  const bgObj = tinycolor(getColor(bg))
-  let borderColor = color
-  let textColor = 'text'
-  let textColorObj = tinycolor(getColor('text'))
-
-  if (!!outline) {
-    bg = 'transparent'
-    textColor = color
-  } else if (bgObj.isDark() === textColorObj.isDark()) {
-    textColor = 'overlayBG'
-  }
-
-  return [
-    textColor,
-    {
-      ...restProps,
-      bg,
-      borderColor,
-    },
-  ]
-}

package/src/presentation/Icon.js

@@ -1,14 +0,0 @@
-import { AbsIcon } from '../abstractions/Icon'
-import { useGetColor, useMergeThemeComponent } from '../theme/ThemeHandler'
-
-export function Icon({ name, color, ...rootProps }) {
-  const getColor = useGetColor()
-  let props = useMergeThemeComponent('Icon', rootProps)
-
-  // props = pipe(
-  // useSizeModifier, //
-  // usePositionModifier,
-  // )(props)
-
-  return <AbsIcon className="neko-icon" name={name} color={getColor(color || 'text')} {...props} />
-}