@neko-os/ui 0.0.5 → 0.0.7

package/src/modifiers/overflow.js

@@ -0,0 +1,23 @@
+import { clearProps } from './_helpers'
+
+export function useOverflowModifier([values, props]) {
+  let { hiddenOverflow, scroll, scrollY, scrollX, overflow, overflowY, overflowX, ...restProps } = props
+
+  if (hiddenOverflow) overflow = 'hidden'
+  if (scroll) overflow = 'scroll'
+  if (scrollY) overflowY = 'scroll'
+  if (scrollX) overflowX = 'scroll'
+
+  const style = clearProps({ overflow, overflowY, overflowX })
+
+  return [
+    values,
+    {
+      ...restProps,
+      style: {
+        ...props.style,
+        ...style,
+      },
+    },
+  ]
+}

package/src/modifiers/position.js

@@ -1,12 +1,20 @@
+import { Platform } from '../abstractions/Platform'
 import { clearProps } from './_helpers'
 
 export function usePositionModifier([values, props]) {
-  let { position, absolute, relative, top, bottom, left, right, ...restProps } = props
+  let { position, absolute, relative, fixed, sticky, top, bottom, left, right, zIndex, ...restProps } = props
 
+  if (!zIndex && !!absolute) zIndex = 10
   if (absolute) position = 'absolute'
   if (relative) position = 'relative'
+  if (fixed) position = 'fixed'
+  if (sticky) position = 'sticky'
 
-  const style = clearProps({ position, top, bottom, left, right })
+  if (Platform.OS !== 'web' && ['fixed', 'sticky'].includes(position)) {
+    position = 'absolute'
+  }
+
+  const style = clearProps({ position, top, bottom, left, right, zIndex })
 
   return [
     values,

package/src/modifiers/responsiveConverter.js

@@ -0,0 +1,19 @@
+import { curry } from 'ramda'
+import React from 'react'
+
+import { useGetResponsiveValue } from '../responsive/responsiveHooks'
+
+export const useResponsiveConverter = curry(function (keys, [values, props]) {
+  const getValue = useGetResponsiveValue()
+
+  return React.useMemo(() => {
+    const formattedProps = Object.keys(props).reduce((acc, k) => {
+      let v = props[k]
+      if (!keys?.length || keys.includes(k)) v = getValue(v)
+      acc[k] = v
+      return acc
+    }, {})
+
+    return [values, formattedProps]
+  }, [getValue])
+})

package/src/modifiers/size.js

@@ -20,16 +20,22 @@ export function useSizeModifier([values, props]) {
     fullH,
     ratio,
     square,
+    span,
+    parentSpan,
     ...restProps
   } = props || {}
 
   minHeight = getHeight(minHeight || minH)
-  minWidth = minWidth || minW
+  minWidth = getHeight(minWidth || minW)
 
-  maxHeight = maxHeight || maxH
-  maxWidth = maxWidth || maxW
+  maxHeight = getHeight(maxHeight || maxH)
+  maxWidth = getHeight(maxWidth || maxW)
 
   height = getHeight(height)
+  width = getHeight(width)
+
+  span = span ?? parentSpan
+  if (span) width = (span / 24) * 100 + '%'
 
   if (fullWidth || fullW) width = '100%'
   if (fullHeight || fullH) height = '100%'
@@ -37,7 +43,7 @@ export function useSizeModifier([values, props]) {
   let aspectRatio = ratio
   if (!!square) aspectRatio = 1
 
-  const style = clearProps({ height, width, minHeight, minHeight, maxHeight, maxWidth, aspectRatio })
+  const style = clearProps({ height, width, minHeight, minHeight, maxHeight, minWidth, maxWidth, aspectRatio })
 
   return [
     values,

package/src/modifiers/state.js

@@ -0,0 +1,33 @@
+import { clearProps } from './_helpers'
+
+export function useStateModifier([values, props]) {
+  let { disabled, loading, onClick, onPress, onChange, ...restProps } = props
+
+  let cursor = props.style
+  let opacity = props.opacity
+
+  if (!!disabled) {
+    opacity = 0.3
+    onChange = undefined
+    cursor = 'not-allowed'
+  }
+  if (!!disabled || !!loading) {
+    onPress = undefined
+    onClick = undefined
+  }
+
+  const style = clearProps({ opacity, cursor })
+  const newProps = clearProps({ onPress, onClick, onChange })
+
+  return [
+    { disabled, loading, ...values },
+    {
+      ...newProps,
+      ...restProps,
+      style: {
+        ...props.style,
+        ...style,
+      },
+    },
+  ]
+}

package/src/responsive/ResponsiveHandler.js

@@ -0,0 +1,28 @@
+import React from 'react'
+
+import { useBreakpoints } from '../theme/ThemeHandler'
+import { useWindowWidth } from '../abstractions/helpers/windowWidth'
+
+const ResponsiveContext = React.createContext(null)
+
+export const useResponsive = () => React.useContext(ResponsiveContext)
+
+export function ResponsiveHandler({ children }) {
+  const width = useWindowWidth()
+
+  const breakpoints = useBreakpoints()
+
+  const screen = React.useMemo(() => {
+    if (!breakpoints?.length) return false
+    for (let i = 0; i < breakpoints.length; i++) {
+      if (width < breakpoints[i].value) {
+        return breakpoints[i].name
+      }
+    }
+    return breakpoints[breakpoints.length - 1]?.name
+  }, [width, breakpoints])
+
+  const value = React.useMemo(() => ({ width, screen }), [width, screen])
+
+  return <ResponsiveContext.Provider value={value}>{children}</ResponsiveContext.Provider>
+}

package/src/responsive/index.js

@@ -0,0 +1,2 @@
+export * from './responsiveHooks'
+export * from './ResponsiveHandler'

package/src/responsive/responsiveHooks.js

@@ -0,0 +1,54 @@
+import { is } from 'ramda'
+import React from 'react'
+
+import { useBreakpoints } from '../theme/ThemeHandler'
+import { useResponsive } from '../responsive/ResponsiveHandler'
+
+export function useGetResponsiveValue() {
+  const breakpoints = useBreakpoints()
+  const { width, screen } = useResponsive()
+
+  return React.useCallback(
+    (value) => {
+      const isObj = is(Object, value)
+
+      if (!isObj) return value
+
+      if (value[screen]) return value[screen]
+
+      const keys = Object.keys(value)
+      for (let k of keys) {
+        const match = k.match(/^(\w+)([du])$/)
+        if (!match) continue
+
+        const bpName = match[1]
+        const mode = match[2]
+
+        const bpIndex = breakpoints.findIndex((b) => b.name === bpName)
+        if (bpIndex === -1) continue
+
+        // For "up", use the lower boundary of the range (previous breakpoint value)
+        // For "down", use the upper boundary of the range (current breakpoint value)
+        if (mode === 'u') {
+          const lowerBound = bpIndex > 0 ? breakpoints[bpIndex - 1].value : 0
+          if (width >= lowerBound) return value[k]
+        }
+        if (mode === 'd') {
+          if (width < breakpoints[bpIndex].value) return value[k]
+        }
+      }
+
+      return value?.df
+    },
+    [screen]
+  )
+}
+
+export function useResponsiveValue(value) {
+  const getValue = useGetResponsiveValue()
+
+  const isObj = is(Object, value)
+  const valueWatch = isObj ? Object.keys(value).map((k) => `${k}:${value[k]}`) : [value]
+
+  return React.useMemo(() => getValue(value), [getValue, ...valueWatch])
+}

package/src/theme/ThemeHandler.js

@@ -9,7 +9,7 @@ const DEFAULT_BREAKPOINTS = [
   { name: 'sm', value: 768 },
   { name: 'md', value: 1024 },
   { name: 'lg', value: 1440 },
-  { name: 'xlg', value: 10000 },
+  { name: 'xl', value: 10000 },
 ]
 
 const ThemeContext = React.createContext(null)

package/src/theme/default/base.js

@@ -1,47 +1,47 @@
 export const BASE_THEME = {
   spaces: {
-    xxxsm: 1,
-    xxsm: 3,
-    xsm: 5,
+    xxxs: 1,
+    xxs: 3,
+    xs: 5,
     sm: 10,
     md: 15,
     lg: 20,
-    xlg: 30,
-    xxlg: 40,
-    xxxlg: 50,
+    xl: 30,
+    xxl: 40,
+    xxxl: 50,
   },
 
   radius: {
-    xxxsm: 4,
-    xxsm: 5,
-    xsm: 5,
+    xxxs: 4,
+    xxs: 5,
+    xs: 5,
     sm: 7,
     md: 8,
     lg: 10,
-    xlg: 12,
-    xxlg: 15,
-    xxxlg: 18,
+    xl: 12,
+    xxl: 15,
+    xxxl: 18,
   },
 
   icons: {
-    xxxsm: 10,
-    xxsm: 12,
-    xsm: 14,
+    xxxs: 10,
+    xxs: 12,
+    xs: 14,
     sm: 16,
     md: 18,
     lg: 22,
-    xlg: 26,
-    xxlg: 28,
-    xxxlg: 32,
+    xl: 26,
+    xxl: 28,
+    xxxl: 32,
   },
 
   // Buttons, inputs, etc.
   elementHeights: {
-    xsm: 20,
+    xs: 20,
     sm: 30,
     md: 35,
     lg: 50,
-    xlg: 60,
+    xl: 60,
   },
 
   texts: {
@@ -71,7 +71,7 @@ export const BASE_THEME = {
     },
     p: { fontSize: 14 },
     sm: { fontSize: 12 },
-    xsm: { fontSize: 10 },
-    xxsm: { fontSize: 8 },
+    xs: { fontSize: 10 },
+    xxs: { fontSize: 8 },
   },
 }

package/src/theme/default/darkTheme.js

@@ -11,8 +11,8 @@ 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)',
+    shadow: 'rgba(216, 210, 203, 0.1)',
+    divider: '#383E44',
 
     blue: '#4DA3FF',
     yellow: '#FFD93B',

package/src/theme/default/hackerTheme.js

@@ -29,4 +29,12 @@ export const DEFAULT_MATRIX_THEME = mergeDeepRight(BASE_THEME, {
     lylac: '#8E24AA',
     pink: '#C51162',
   },
+
+  components: {
+    Card: {
+      border: 1,
+      br: 5,
+      borderColor: 'divider',
+    },
+  },
 })

package/src/theme/default/lightTheme.js

@@ -12,7 +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)',
+    divider: '#e0e0e0',
 
     blue: '#4DA3FF',
     yellow: '#FFD93B',

package/src/theme/default/msdosTheme.js

@@ -32,7 +32,7 @@ export const DEFAULT_MSDOS_THEME = mergeDeepRight(BASE_THEME, {
 
   components: {
     Card: {
-      borderWidth: 1,
+      border: 1,
       br: 5,
       borderColor: 'divider',
     },

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/relatedScales.js

@@ -1,15 +1,15 @@
 import { is } from 'ramda'
 
 const SCALES = [
-  ['xxxsm'],
-  ['xxsm'],
-  ['xsm'],
+  ['xxxs'],
+  ['xxs'],
+  ['xs'],
   ['sm', 'small'],
   ['md', 'p'],
   ['lg', 'h6'],
-  ['xlg', 'h5'],
-  ['xxlg', 'h4'],
-  ['xxxlg', 'h3'],
+  ['xl', 'h5'],
+  ['xxl', 'h4'],
+  ['xxxl', 'h3'],
 ]
 
 export function getScaleSynonyms(key) {

package/src/theme/helpers/sizeScale.js

@@ -1,11 +1,16 @@
 import { omit } from 'ramda'
 
-const SCALE = ['xxxsm', 'xxsm', 'xsm', 'sm', 'md', 'lg', 'xlg', 'xxlg', 'xxxlg']
+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 SCALE[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) {

package/src/theme/helpers/textScale.js

@@ -1,6 +1,6 @@
 import { omit } from 'ramda'
 
-const SCALE = ['xxxsm', 'xxsm', 'xsm', 'sm', 'p', 'h6', 'h5', 'h4', 'h3', 'h2', 'h1']
+const SCALE = ['xxxs', 'xxs', 'xs', 'sm', 'p', 'h6', 'h5', 'h4', 'h3', 'h2', 'h1']
 
 export function moveTextScale(value, unit = 1) {
   const index = SCALE.indexOf(value)

package/dist/components/form/inputs/Checkbox.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/components/form/inputs/Checkbox.js";var _excluded=["value","onChange","disabled"];import{pipe}from'ramda';import React from'react';import{AbsHiddenInput}from"../../../abstractions/HiddenInput";import{ContentLabel}from"../../presentation/ContentLabel";import{Link}from"../../actions/Link";import{View}from"../../structure/View";import{useColorConverter}from"../../../modifiers/colorConverter";import{useSizeConverter}from"../../../modifiers/sizeConverter";import{useThemeComponentModifier}from"../../../modifiers/themeComponent";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export function Checkbox(_ref){var value=_ref.value,onChange=_ref.onChange,disabled=_ref.disabled,rootProps=_objectWithoutProperties(_ref,_excluded);var _pipe=pipe(useColorConverter('primary'),useSizeConverter('elementHeights','md'),useThemeComponentModifier('Checkbox'))([{},rootProps]),_pipe2=_slicedToArray(_pipe,2),_pipe2$=_pipe2[0],size=_pipe2$.size,sizeCode=_pipe2$.sizeCode,color=_pipe2$.color,props=_pipe2[1];var _React$useState=React.useState(value),_React$useState2=_slicedToArray(_React$useState,2),checked=_React$useState2[0],setChecked=_React$useState2[1];var toggle=function toggle(){if(!!disabled)return;setChecked(!checked);if(onChange)onChange(!checked);};return _jsxs(Link,{onPress:toggle,className:"neko-checkbox",disabled:disabled,children:[_jsx(AbsHiddenInput,{checked:checked,onChange:toggle,type:"checkbox",disabled:disabled}),_jsx(ContentLabel,Object.assign({size:sizeCode,gap:8,content:_jsx(View,{height:size*0.75,ratio:1,borderWidth:2,padding:3,borderColor:color,br:3,center:true,children:checked&&_jsx(View,{bg:color,br:2,flex:true,fullW:true,fullH:true})})},props))]});}

package/dist/components/form/inputs/Radio.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/components/form/inputs/Radio.js";var _excluded=["value","onChange","disabled"];import{pipe}from'ramda';import React from'react';import{AbsHiddenInput}from"../../../abstractions/HiddenInput";import{ContentLabel}from"../../presentation/ContentLabel";import{Link}from"../../actions/Link";import{View}from"../../structure/View";import{useColorConverter}from"../../../modifiers/colorConverter";import{useSizeConverter}from"../../../modifiers/sizeConverter";import{useThemeComponentModifier}from"../../../modifiers/themeComponent";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export function Radio(_ref){var value=_ref.value,onChange=_ref.onChange,disabled=_ref.disabled,rootProps=_objectWithoutProperties(_ref,_excluded);var _pipe=pipe(useColorConverter('primary'),useSizeConverter('elementHeights','md'),useThemeComponentModifier('Radio'))([{},rootProps]),_pipe2=_slicedToArray(_pipe,2),_pipe2$=_pipe2[0],size=_pipe2$.size,sizeCode=_pipe2$.sizeCode,color=_pipe2$.color,props=_pipe2[1];var _React$useState=React.useState(value),_React$useState2=_slicedToArray(_React$useState,2),checked=_React$useState2[0],setChecked=_React$useState2[1];var toggle=function toggle(){if(!!disabled)return;setChecked(!checked);if(onChange)onChange(!checked);};return _jsxs(Link,{onPress:toggle,className:"neko-radio",disabled:disabled,children:[_jsx(AbsHiddenInput,{checked:checked,onChange:toggle,type:"radio",disabled:disabled}),_jsx(ContentLabel,Object.assign({size:sizeCode,gap:8,content:_jsx(View,{height:size*0.75,ratio:1,borderWidth:2,padding:3,borderColor:color,br:size,center:true,children:checked&&_jsx(View,{bg:color,br:size,flex:true,fullW:true,fullH:true})})},props))]});}

package/dist/components/form/inputs/Switch.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/components/form/inputs/Switch.js";var _excluded=["value","onChange","disabled"];import{pipe}from'ramda';import React from'react';import{AbsSwitch}from"../../../abstractions/Switch";import{ContentLabel}from"../../presentation/ContentLabel";import{useColorConverter}from"../../../modifiers/colorConverter";import{useSizeConverter}from"../../../modifiers/sizeConverter";import{useThemeComponentModifier}from"../../../modifiers/themeComponent";import{jsx as _jsx}from"react/jsx-runtime";export function Switch(_ref){var value=_ref.value,onChange=_ref.onChange,disabled=_ref.disabled,rootProps=_objectWithoutProperties(_ref,_excluded);var _pipe=pipe(useColorConverter('primary'),useSizeConverter('elementHeights','md'),useThemeComponentModifier('Switch'))([{},rootProps]),_pipe2=_slicedToArray(_pipe,2),_pipe2$=_pipe2[0],size=_pipe2$.size,sizeCode=_pipe2$.sizeCode,color=_pipe2$.color,props=_pipe2[1];var _React$useState=React.useState(value),_React$useState2=_slicedToArray(_React$useState,2),checked=_React$useState2[0],setChecked=_React$useState2[1];var toggle=function toggle(){if(!!disabled)return;setChecked(!checked);if(onChange)onChange(!checked);};return _jsx(ContentLabel,Object.assign({className:"neko-checkbox",size:sizeCode,gap:8,disabled:disabled,content:_jsx(AbsSwitch,{color:color,value:checked,onValueChange:toggle,trackColor:{true:color},disabled:disabled,height:size*0.75})},props));}

package/dist/components/form/inputs/index.js

@@ -1 +0,0 @@
-export*from"./Checkbox";export*from"./Radio";export*from"./Switch";

package/dist/components/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/helpers/responsive.js

@@ -1 +0,0 @@
-import{is}from'ramda';import{useBreakpoints}from"../theme/ThemeHandler";import{useWindowWidth}from"../abstractions/windowWidth";export function useResponsiveScreen(){var _breakpoints;var breakpoints=useBreakpoints();var width=useWindowWidth();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;}export function useResponsiveValue(value){var breakpoints=useBreakpoints();var width=useWindowWidth();var screen=useResponsiveScreen();if(!is(Object,value))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;}

package/src/components/form/inputs/Checkbox.js

@@ -1,42 +0,0 @@
-import { pipe } from 'ramda'
-import React from 'react'
-
-import { AbsHiddenInput } from '../../../abstractions/HiddenInput'
-import { ContentLabel } from '../../presentation/ContentLabel'
-import { Link } from '../../actions/Link'
-import { View } from '../../structure/View'
-import { useColorConverter } from '../../../modifiers/colorConverter'
-import { useSizeConverter } from '../../../modifiers/sizeConverter'
-import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
-
-export function Checkbox({ value, onChange, disabled, ...rootProps }) {
-  const [{ size, sizeCode, color }, props] = pipe(
-    useColorConverter('primary'),
-    useSizeConverter('elementHeights', 'md'),
-    useThemeComponentModifier('Checkbox') //
-  )([{}, rootProps])
-
-  const [checked, setChecked] = React.useState(value)
-
-  const toggle = () => {
-    if (!!disabled) return
-    setChecked(!checked)
-    if (onChange) onChange(!checked)
-  }
-
-  return (
-    <Link onPress={toggle} className="neko-checkbox" disabled={disabled}>
-      <AbsHiddenInput checked={checked} onChange={toggle} type="checkbox" disabled={disabled} />
-      <ContentLabel
-        size={sizeCode}
-        gap={8}
-        content={
-          <View height={size * 0.75} ratio={1} borderWidth={2} padding={3} borderColor={color} br={3} center>
-            {checked && <View bg={color} br={2} flex fullW fullH />}
-          </View>
-        }
-        {...props}
-      />
-    </Link>
-  )
-}

package/src/components/form/inputs/Radio.js

@@ -1,42 +0,0 @@
-import { pipe } from 'ramda'
-import React from 'react'
-
-import { AbsHiddenInput } from '../../../abstractions/HiddenInput'
-import { ContentLabel } from '../../presentation/ContentLabel'
-import { Link } from '../../actions/Link'
-import { View } from '../../structure/View'
-import { useColorConverter } from '../../../modifiers/colorConverter'
-import { useSizeConverter } from '../../../modifiers/sizeConverter'
-import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
-
-export function Radio({ value, onChange, disabled, ...rootProps }) {
-  const [{ size, sizeCode, color }, props] = pipe(
-    useColorConverter('primary'),
-    useSizeConverter('elementHeights', 'md'),
-    useThemeComponentModifier('Radio') //
-  )([{}, rootProps])
-
-  const [checked, setChecked] = React.useState(value)
-
-  const toggle = () => {
-    if (!!disabled) return
-    setChecked(!checked)
-    if (onChange) onChange(!checked)
-  }
-
-  return (
-    <Link onPress={toggle} className="neko-radio" disabled={disabled}>
-      <AbsHiddenInput checked={checked} onChange={toggle} type="radio" disabled={disabled} />
-      <ContentLabel
-        size={sizeCode}
-        gap={8}
-        content={
-          <View height={size * 0.75} ratio={1} borderWidth={2} padding={3} borderColor={color} br={size} center>
-            {checked && <View bg={color} br={size} flex fullW fullH />}
-          </View>
-        }
-        {...props}
-      />
-    </Link>
-  )
-}

package/src/components/form/inputs/Switch.js

@@ -1,44 +0,0 @@
-import { pipe } from 'ramda'
-import React from 'react'
-
-import { AbsSwitch } from '../../../abstractions/Switch'
-import { ContentLabel } from '../../presentation/ContentLabel'
-import { useColorConverter } from '../../../modifiers/colorConverter'
-import { useSizeConverter } from '../../../modifiers/sizeConverter'
-import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
-
-export function Switch({ value, onChange, disabled, ...rootProps }) {
-  const [{ size, sizeCode, color }, props] = pipe(
-    useColorConverter('primary'),
-    useSizeConverter('elementHeights', 'md'),
-    useThemeComponentModifier('Switch') //
-  )([{}, rootProps])
-
-  const [checked, setChecked] = React.useState(value)
-
-  const toggle = () => {
-    if (!!disabled) return
-    setChecked(!checked)
-    if (onChange) onChange(!checked)
-  }
-
-  return (
-    <ContentLabel
-      className="neko-checkbox"
-      size={sizeCode}
-      gap={8}
-      disabled={disabled}
-      content={
-        <AbsSwitch
-          color={color}
-          value={checked}
-          onValueChange={toggle}
-          trackColor={{ true: color }}
-          disabled={disabled}
-          height={size * 0.75}
-        />
-      }
-      {...props}
-    />
-  )
-}

package/src/components/form/inputs/index.js

@@ -1,3 +0,0 @@
-export * from './Checkbox'
-export * from './Radio'
-export * from './Switch'