@neko-os/ui 0.0.4 → 0.0.5

package/src/modifiers/sizeConverter.js

@@ -0,0 +1,12 @@
+import { getSizeFromProps } from '../theme/helpers/sizeScale'
+import { useGetThemeValue } from '../theme/ThemeHandler'
+
+export function useSizeConverter(groupKey, defaultValue) {
+  const getSizeValue = useGetThemeValue(groupKey)
+
+  return ([values, props]) => {
+    const [sizeCode, formattedProps] = getSizeFromProps(props, defaultValue)
+    const size = getSizeValue(sizeCode)
+    return [{ ...values, size, sizeCode }, formattedProps]
+  }
+}

package/src/modifiers/text.js

@@ -1,14 +1,14 @@
 import { clearProps } from './_helpers'
-import { mergePreset, useGetColor, useTexts } from '../theme/ThemeHandler'
+import { mergePreset } from '../theme/helpers/mergePreset'
+import { useGetColor, useTexts } from '../theme/ThemeHandler'
 
-export function useTextModifier({ size, ...props }) {
+export function useTextModifier([{ color, textCode, ...values }, { ...props }]) {
   const getColor = useGetColor()
   const texts = useTexts()
 
-  if (!size && !props.inherit) size = 'p'
+  if (!textCode && !props.inherit) textCode = 'p'
 
   let {
-    color,
     opacity,
     bold,
     strong,
@@ -23,7 +23,7 @@ export function useTextModifier({ size, ...props }) {
     inherit,
     fontSize,
     ...restProps
-  } = mergePreset(texts, size, props, 'p')
+  } = mergePreset(texts, textCode, props, 'p')
 
   let fontStyle
   if (italic) fontStyle = 'italic'
@@ -38,8 +38,6 @@ export function useTextModifier({ size, ...props }) {
   fontWeight = fontWeight || weight
   if (bold || strong) fontWeight = 600
 
-  if (!inherit) color = getColor(color || 'text')
-
   const style = clearProps({
     fontWeight,
     fontStyle,
@@ -51,11 +49,14 @@ export function useTextModifier({ size, ...props }) {
     fontSize,
   })
 
-  return {
-    ...restProps,
-    style: {
-      ...props.style,
-      ...style,
+  return [
+    values,
+    {
+      ...restProps,
+      style: {
+        ...props.style,
+        ...style,
+      },
     },
-  }
+  ]
 }

package/src/modifiers/textConverter.js

@@ -0,0 +1,12 @@
+import { getTextFromProps } from '../theme/helpers/textScale'
+import { useGetThemeValue } from '../theme/ThemeHandler'
+
+export function useTextConverter(defaultValue) {
+  const getTextValue = useGetThemeValue('texts')
+
+  return ([values, props]) => {
+    const [textCode, formattedProps] = getTextFromProps(props, defaultValue)
+    const text = getTextValue(textCode)
+    return [{ ...values, text, textCode }, formattedProps]
+  }
+}

package/src/modifiers/themeComponent.js

@@ -0,0 +1,11 @@
+import { mergeDeepRight } from 'ramda'
+import { useThemeComponent } from '../theme/ThemeHandler'
+
+export function useThemeComponentModifier(componentName) {
+  const themeProps = useThemeComponent(componentName)
+
+  return ([values, props]) => {
+    props = mergeDeepRight(themeProps, props)
+    return [values, props]
+  }
+}

package/src/theme/ThemeHandler.js

@@ -2,50 +2,48 @@ import { mergeDeepRight } from 'ramda'
 import React from 'react'
 
 import { DEFAULT_LIGHT_THEME } from './default/lightTheme'
-import { DEFAULT_THEMES } from './default/themes'
+import { getThemeValue } from './helpers/relatedScales'
 import { useFormattedTheme } from './format/formatTheme'
 
+const DEFAULT_BREAKPOINTS = [
+  { name: 'sm', value: 768 },
+  { name: 'md', value: 1024 },
+  { name: 'lg', value: 1440 },
+  { name: 'xlg', value: 10000 },
+]
+
 const ThemeContext = React.createContext(null)
 export const useThemeHandler = () => React.useContext(ThemeContext) || {}
-export const useTheme = () => useThemeHandler().theme || DEFAULT_LIGHT_THEME
 
-export const useColors = () => useTheme().colors || {}
-const getColor = (colors, key) => colors[key] || key
-export const useGetColor = () => {
-  const colors = useColors()
-  return (key) => getColor(colors, key)
-}
+export const useBreakpoints = () => useThemeHandler()?.breakpoints || DEFAULT_BREAKPOINTS
 
-export const useSpaces = () => useTheme().spaces || {}
-const getSpace = (spaces, key) => spaces[key] || key
-export const useGetSpace = () => {
-  const spaces = useSpaces()
-  return (key) => getSpace(spaces, key)
+export const useTheme = (groupKey) => {
+  const theme = useThemeHandler().theme || DEFAULT_LIGHT_THEME
+  if (!groupKey) return theme
+  return theme?.[groupKey] || {}
 }
 
-export const useRadius = () => useTheme().radius || {}
-const getRadius = (radius, key) => radius[key] || key
-export const useGetRadius = () => {
-  const radius = useRadius()
-  return (key) => getRadius(radius, key)
+export const useGetThemeValue = (groupKey) => {
+  const group = useTheme(groupKey)
+  return (key) => getThemeValue(group, key)
 }
 
-export const useTexts = () => useTheme().texts || {}
+export const useColors = () => useTheme('colors')
+export const useGetColor = () => useGetThemeValue('colors')
 
-export function mergePreset(presets, key, props, defaultKey) {
-  if (!key) return props
-  const preset = presets[key] || presets[defaultKey]
-  return { ...props, ...preset }
-}
+export const useSpaces = () => useTheme('spaces')
+export const useGetSpace = () => useGetThemeValue('spaces')
 
-export const useElementHeights = () => useTheme().elementHeights || {}
-const getElementHeight = (elementHeights, key) => elementHeights[key] || key
-export const useGetElementHeight = () => {
-  const elementHeights = useElementHeights()
-  return (key) => getElementHeight(elementHeights, key)
-}
+export const useRadius = () => useTheme('radius')
+export const useGetRadius = () => useGetThemeValue('radius')
+
+export const useElementHeights = () => useTheme('elementHeights')
+export const useGetElementHeight = () => useGetThemeValue('elementHeights')
+
+export const useTexts = () => useTheme('texts')
+export const useGetText = () => useGetThemeValue('text')
 
-export const useThemeComponents = () => useTheme().components || {}
+export const useThemeComponents = () => useTheme('components')
 export function useThemeComponent(name) {
   const components = useThemeComponents()
   return components[name] || {}
@@ -55,10 +53,10 @@ export function useMergeThemeComponent(name, props) {
   return mergeDeepRight(themeProps, props)
 }
 
-export function ThemeHandler({ themes, initTheme, children }) {
+export function ThemeHandler({ breakpoints, themes, initTheme, children }) {
   const [activeThemeKey, setActiveThemeKey] = React.useState(initTheme || 'light')
   const theme = useFormattedTheme(themes, activeThemeKey)
-  const value = { theme, themes, activeThemeKey, setActiveThemeKey }
+  const value = { theme, themes, activeThemeKey, setActiveThemeKey, breakpoints: breakpoints || DEFAULT_BREAKPOINTS }
 
   return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
 }

package/src/theme/default/base.js

@@ -23,7 +23,19 @@ export const BASE_THEME = {
     xxxlg: 18,
   },
 
-  // Buttons, inputs, tags
+  icons: {
+    xxxsm: 10,
+    xxsm: 12,
+    xsm: 14,
+    sm: 16,
+    md: 18,
+    lg: 22,
+    xlg: 26,
+    xxlg: 28,
+    xxxlg: 32,
+  },
+
+  // Buttons, inputs, etc.
   elementHeights: {
     xsm: 20,
     sm: 30,

package/src/theme/default/cyberpunkTheme.js

@@ -12,6 +12,7 @@ export const CYBERPUNK_DARK_THEME = mergeDeepRight(BASE_THEME, {
     bg: '#0A0A0F',
     overlayBG: '#14141F',
     shadow: 'rgba(39, 45, 52, 0.6)',
+    divider: 'rgba(255,255,255, 0.2)',
 
     blue: '#00E5FF',
     yellow: '#FFD600',

package/src/theme/default/darkTheme.js

@@ -12,6 +12,7 @@ export const DEFAULT_DARK_THEME = mergeDeepRight(BASE_THEME, {
     bg: '#383E44',
     overlayBG: '#272D34',
     shadow: 'rgba(39, 45, 52, 0.6)',
+    divider: 'rgba(255,255,255, 0.2)',
 
     blue: '#4DA3FF',
     yellow: '#FFD93B',

package/src/theme/default/deepWoodsTheme.js

@@ -12,6 +12,7 @@ export const DEEP_WOODS_DARK_THEME = mergeDeepRight(BASE_THEME, {
     bg: '#0D1B14',
     overlayBG: '#16281F',
     shadow: 'rgba(39, 45, 52, 0.6)',
+    divider: 'rgba(255,255,255, 0.2)',
 
     blue: '#64B5F6',
     yellow: '#FBC02D',

package/src/theme/default/forestTheme.js

@@ -12,6 +12,7 @@ export const FOREST_MIST_THEME = mergeDeepRight(BASE_THEME, {
     bg: '#E9F5EC',
     overlayBG: '#FFFFFF',
     shadow: 'rgba(39, 45, 52, 0.15)',
+    divider: 'rgba(0,0,0, 0.1)',
 
     blue: '#2563EB',
     yellow: '#F59E0B',

package/src/theme/default/hackerTheme.js

@@ -0,0 +1,32 @@
+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',
+  },
+})

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: 'rgba(0,0,0, 0.1)',
 
     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: {
+      borderWidth: 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/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 = [
+  ['xxxsm'],
+  ['xxsm'],
+  ['xsm'],
+  ['sm', 'small'],
+  ['md', 'p'],
+  ['lg', 'h6'],
+  ['xlg', 'h5'],
+  ['xxlg', 'h4'],
+  ['xxxlg', '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,15 @@
-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 = ['xxxsm', 'xxsm', 'xsm', 'sm', 'md', 'lg', 'xlg', 'xxlg', 'xxxlg']
+
+export function moveScale(value, unit = 1) {
+  const index = SCALE.indexOf(value)
   if (!index) return value
-  return SCALES[index - unit] || value
+  return SCALE[index + unit] || value
+}
+
+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 = ['xxxsm', 'xxsm', 'xsm', '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/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/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/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/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} />
-}