@neko-os/ui 0.0.9 → 0.0.11

package/src/components/actions/FloatingButton.js

@@ -0,0 +1,87 @@
+import { pipe } from 'ramda'
+
+import { AbsTouchableOpacity } from '../../abstractions/TouchableOpacity'
+import { Icon } from '../presentation'
+import { Loading } from '../state'
+import { moveScale } from '../../theme/helpers/sizeScale'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useCursorModifier } from '../../modifiers/cursor'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useDisplayModifier } from '../../modifiers/display'
+import { useFlexModifier } from '../../modifiers/flex'
+import { useFlexWrapperModifier } from '../../modifiers/flexWrapper'
+import { useFullColorModifier } from '../../modifiers/fullColor'
+import { useHoverConverter } from '../../modifiers/hover'
+import { useMarginModifier } from '../../modifiers/margin'
+import { usePaddingModifier } from '../../modifiers/padding'
+import { usePositionModifier } from '../../modifiers/position'
+import { useSafeAreaInsets } from '../../abstractions/helpers/useSafeAreaInsets'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useSizeModifier } from '../../modifiers/size'
+import { useStateModifier } from '../../modifiers/state'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS =
+  ({ bottomInset }) =>
+  ([{ sizeCode }, { square }]) => {
+    sizeCode = moveScale(sizeCode, 1)
+
+    return {
+      absolute: true,
+      shadow: true,
+      bottom: 'md',
+      marginB: bottomInset,
+      right: 'md',
+      round: !square,
+      ration: 1,
+      padding: 'xxxs',
+      height: sizeCode,
+      width: sizeCode,
+      br: sizeCode,
+      border: 1,
+      center: true,
+      pointer: true,
+      hover: {
+        opacity: 0.7,
+      },
+    }
+  }
+
+export function FloatingButton({ useSafeArea = true, ...rootProps }) {
+  const insets = useSafeAreaInsets()
+  const bottomInset = useSafeArea ? insets.bottom : 0
+
+  let [{ loading, fontColor, color, sizeCode }, formattedProps] = pipe(
+    useColorConverter('primary'),
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('FloatingButton'),
+    useDefaultModifier(DEFAULT_PROPS({ bottomInset })),
+    useHoverConverter,
+    useCursorModifier,
+    useFullColorModifier,
+    useDisplayModifier,
+    useStateModifier,
+    useSizeModifier,
+    usePositionModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexModifier,
+    useFlexWrapperModifier,
+    useBackgroundModifier,
+    useBorderModifier
+  )([{}, rootProps])
+  sizeCode = moveScale(sizeCode, 1)
+
+  const { icon, iconProps, size, ...props } = formattedProps
+
+  let content = <Icon flex color={fontColor} size={sizeCode} name={icon} loading={loading} {...iconProps} />
+  if (loading) content = <Loading size={sizeCode} color={fontColor} />
+
+  return (
+    <AbsTouchableOpacity className="neko-floating-button neko-wave-click-effect" type="button" {...props}>
+      {content}
+    </AbsTouchableOpacity>
+  )
+}

package/src/components/actions/index.js

@@ -1,4 +1,5 @@
 export * from './Button'
+export * from './FloatingButton'
 export * from './Link'
 export * from './Pressable'
 export * from './Dropdown'

package/src/components/actions/menu/VerticalMenu.js

@@ -5,9 +5,11 @@ import tinycolor from 'tinycolor2'
 import { Divider } from '../../helpers/Separator'
 import { IconText } from '../../presentation/IconLabel'
 import { Link } from '../Link'
+import { List } from '../../list/FlatList'
 import { SubmenuWrapper } from './SubmenuWrapper'
 import { Text } from '../../text/Text'
 import { View } from '../../structure/View'
+import { moveScale } from '../../../theme/helpers/sizeScale'
 import { useColorConverter } from '../../../modifiers/colorConverter'
 import { useSizeConverter } from '../../../modifiers/sizeConverter'
 import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
@@ -15,7 +17,8 @@ import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
 function LinkItem({
   item,
   linkPaddingH = 'md',
-  linkPaddingV = 'sm',
+  linkPaddingV = 'xs',
+  linkMinHeight,
   handlePress,
   linkProps,
   activeIndex,
@@ -31,6 +34,7 @@ function LinkItem({
   if (!active && activeIndex >= 0) active = activeIndex === index
   if (!active && activeKey !== undefined) active = activeKey === item.key
   const bg = active && tinycolor(color).setAlpha(0.03).toString()
+  linkMinHeight = linkMinHeight || moveScale(sizeCode, 1)
 
   return (
     <SubmenuWrapper item={item} onChange={handlePress} activeKey={activeKey} color={color}>
@@ -39,9 +43,9 @@ function LinkItem({
         center
         paddingH={linkPaddingH}
         paddingV={linkPaddingV}
+        minHeight={linkMinHeight}
         marginR={3}
         borderL={3}
-        marginV={-4}
         brColor={active ? activeColor : 'transparent'}
         bg={bg}
         transition="border-color 0.5s ease, background 0.3s ease"
@@ -61,7 +65,7 @@ function DividerItem({ linkPaddingH = 'md', item }) {
   return (
     <>
       {content}
-      <Text size="xs" color="text4" paddingH={linkPaddingH || 'md'} strong {...item} />
+      <Text size="xs" color="text4" paddingV="xs" paddingH={linkPaddingH || 'md'} strong {...item} />
     </>
   )
 }
@@ -78,7 +82,7 @@ export function VerticalMenu(rootProps) {
     useThemeComponentModifier('VerticalMenu') //
   )([{}, rootProps])
 
-  let { gap = 'sm', items, onChange, onChangeIndex, ...props } = formattedProps
+  let { gap = 'sm', items, onChange, onChangeIndex, withDivider, ...props } = formattedProps
 
   const handlePress = React.useCallback(
     (item, index) => {
@@ -90,6 +94,27 @@ export function VerticalMenu(rootProps) {
     [onChange, onChangeIndex]
   )
 
+  return (
+    <View className="neko-vertical-menu" gap={gap} width="100%" {...props}>
+      <List
+        data={items}
+        keyExtractor={(item, index) => item.key || index}
+        divider={withDivider}
+        renderItem={({ item, index }) => (
+          <Item
+            key={item.key || index}
+            item={item}
+            handlePress={handlePress}
+            color={color}
+            sizeCode={sizeCode}
+            index={index}
+            {...props}
+          />
+        )}
+      />
+    </View>
+  )
+
   return (
     <View className="neko-vertical-menu" gap={gap} width="100%" {...props}>
       {items.map((item, index) => (

package/src/components/calendar/_helpers/calendarDays.js

@@ -1,7 +1,9 @@
+import dayjs from 'dayjs'
 import React from 'react'
 
 export function useCalendarDays(currentMonth) {
   return React.useMemo(() => {
+    if (!currentMonth?.isValid?.()) currentMonth = dayjs()
     const startWeekday = currentMonth.startOf('month').day()
     const daysInMonth = currentMonth.daysInMonth()
 

package/src/components/feedback/alerter.js

@@ -16,7 +16,7 @@ export function useAlerter() {
       footer: !hideClose && (
         <Button sm label={closeLabel || 'Close'} outline color="text_op40" onPress={onClose} fullW />
       ),
-      footerProps: { borderT: false },
+      footerProps: { borderT: false, paddingV: 'md' },
       width: width || 350,
     }))
   }

package/src/components/feedback/confirmer.js

@@ -12,7 +12,7 @@ function Footer({ cancelLabel, confirmLabel, onConfirm, type, onClose }) {
   const color = RESULT_TYPES[type]?.color || 'primary'
 
   return (
-    <View row gap="sm" centerV>
+    <View row gap="xs" centerV>
       <Button sm label={cancelLabel || 'Cancel'} outline color="text_op40" onPress={onClose} flex disabled={loading} />
       <Button
         disabled={loading}
@@ -55,7 +55,7 @@ export function useConfirmer() {
           onClose={onClose}
         />
       ),
-      footerProps: { borderT: false },
+      footerProps: { borderT: false, paddingV: 'md' },
       width: width || 350,
     }))
   }

package/src/components/helpers/ConditionalLazyRender.js

@@ -0,0 +1,6 @@
+import { LazyRender } from './LazyRender'
+
+export function ConditionalLazyRender({ children, ...props }) {
+  if (!props.delay && !props.whenVisible && !props.destroyOffScreen) return children
+  return <LazyRender {...props}>{children}</LazyRender>
+}

package/src/components/helpers/LazyAction.js

@@ -0,0 +1,22 @@
+import { is } from 'ramda'
+import React from 'react'
+
+import { LazyRender } from './LazyRender'
+
+function InnerContent({ action }) {
+  React.useEffect(() => {
+    action?.()
+  }, [])
+
+  return false
+}
+
+export function LazyAction({ children, disabled, action, minHeight: initMinHeight, ...props }) {
+  if (!action || !is(Function, action) || !!disabled) return false
+
+  return (
+    <LazyRender whenVisible minHeight={2} {...props}>
+      <InnerContent action={action} />
+    </LazyRender>
+  )
+}

package/src/components/helpers/LazyRender.js

@@ -42,13 +42,13 @@ export function LazyRender({
   }, [])
 
   React.useEffect(() => {
-    if (ref.current && open) {
+    if (ref.current) {
       setMinHeight(ref.current.offsetHeight)
     }
   }, [open])
 
   return (
-    <View className="neko-lazy-render" {...props} minHeight={minHeight} ref={ref}>
+    <View className="neko-lazy-render" flex="0 0 auto" {...props} minHeight={minHeight} ref={ref}>
       {open ? children : null}
     </View>
   )

package/src/components/helpers/LazyRender.native.js

@@ -51,7 +51,7 @@ export function LazyRender({
   }, [open])
 
   return (
-    <View className="neko-lazy-render" {...props} minHeight={minHeight} ref={ref}>
+    <View className="neko-lazy-render" flex="0 0 auto" {...props} minHeight={minHeight} ref={ref}>
       {open ? children : null}
     </View>
   )

package/src/components/helpers/index.js

@@ -4,3 +4,4 @@ export * from './VerticalView'
 export * from './PortalHandler'
 export * from './Portal'
 export * from './LazyRender'
+export * from './ConditionalLazyRender'

package/src/components/index.js

@@ -12,4 +12,5 @@ export * from './table'
 export * from './feedback'
 export * from './calendar'
 export * from './list'
+export * from './tabs'
 export * from './theme'

package/src/components/inputs/DateInput.js

@@ -30,6 +30,14 @@ export function getDateInputDefaultFormat(type) {
   }
 }
 
+function FullWidthInputWrapper({ ref, ...props }) {
+  return (
+    <View fullW ref={ref}>
+      <MaskInput {...props} />
+    </View>
+  )
+}
+
 export function DateInput({
   value,
   onChange,
@@ -75,7 +83,7 @@ export function DateInput({
     setInputValue(!!value ? dayjs(value).format(format) : '')
   }, [value])
 
-  const Input = useBottomDrawer ? LinkInput : MaskInput
+  const Input = useBottomDrawer ? LinkInput : FullWidthInputWrapper
 
   return (
     <Popover
@@ -83,6 +91,8 @@ export function DateInput({
       placement={placement || 'bottomLeft'}
       snapPoints={[350]}
       useBottomDrawer={useBottomDrawer}
+      bottomDrawerProps={{ contentProps: { padding: 'md' } }}
+      watch={[value?.format?.('YYYYMMDD')]}
       renderContent={({ onClose }) => (
         <View flex centerH>
           <DatePicker

package/src/components/inputs/InputWrapper.js

@@ -10,7 +10,6 @@ import { useSizeConverter } from '../../modifiers/sizeConverter'
 import { useThemeComponentModifier } from '../../modifiers/themeComponent'
 
 const DEFAULT_PROPS = {
-  fullW: '100%', //
   paddingH: 'sm',
   bg: 'overlayBG',
   border: true,

package/src/components/inputs/LinkInput.js

@@ -4,12 +4,12 @@ import { Text } from '../text/Text'
 import { View } from '../structure/View'
 import { useColors } from '../../theme/ThemeHandler'
 
-export function LinkInput({ onPress, onClick, placeholder, value, disabled, ...props }) {
+export function LinkInput({ ref, onPress, onClick, placeholder, value, disabled, ...props }) {
   return (
-    <Link onPress={!props.loading ? onPress || onClick : undefined} flex fullW centerV disabled={disabled}>
+    <Link ref={ref} onPress={!props.loading ? onPress || onClick : undefined} flex fullW centerV disabled={disabled}>
       <InputWrapper {...props}>
         <View centerV flex fullW>
-          <Text color={!!value ? 'text' : 'text_op30'} label={value || placeholder} />
+          <Text color={!!value ? 'text' : 'text_op30'} label={value || placeholder} numberOfLines={1} />
         </View>
       </InputWrapper>
     </Link>

package/src/components/inputs/NumberInput.js

@@ -0,0 +1,105 @@
+import { endsWith, is } from 'ramda'
+import React from 'react'
+
+import { TextInput } from './TextInput'
+
+function isValidNumber(stringValue, options = {}) {
+  const { min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, useInt, precision } = options
+
+  if (stringValue === null || stringValue === undefined || stringValue === '') return true
+
+  if (isNaN(stringValue)) return false
+  const numericValue = parseFloat(stringValue)
+
+  if (numericValue < min) return false
+  if (numericValue > max) return false
+
+  const decimalPart = stringValue?.toString()?.split?.('.')[1]
+
+  if (decimalPart && is(Number, precision)) {
+    if (decimalPart.length > precision) return false
+  }
+
+  return true
+}
+
+export function formatNumericValue(newValue, prevValue, options = {}) {
+  const { min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, useInt, precision } = options
+  let numericValue = newValue
+
+  // Handle number to string conversion
+  if (is(Number, newValue)) newValue = newValue.toString()
+
+  // Handle null/undefined/empty
+  if (newValue === null || newValue === undefined || newValue === '') return null
+
+  // Normalize decimal separator (comma to dot)
+  if (is(String, newValue)) newValue = newValue.replace(',', '.')
+
+  // Allow negative sign as intermediate state
+  if (newValue === '-') return newValue
+
+  if (useInt) {
+    // For integers, don't allow decimal points
+    if (newValue.includes('.')) return prevValue
+    numericValue = parseInt(newValue, 10)
+  } else {
+    // For floats, handle decimal points
+    const dotsCount = newValue.split('.').length
+    if (dotsCount > 2) return prevValue
+
+    // Allow "1." as intermediate state
+    if (endsWith('.', newValue)) return newValue
+
+    numericValue = parseFloat(newValue)
+  }
+
+  if (isNaN(numericValue)) return prevValue
+
+  // Check min/max
+  if (numericValue < min) return min
+  if (numericValue > max) return max
+
+  // Handle decimal precision
+  const decimalPart = newValue.split('.')[1]
+  if (decimalPart && !!precision) {
+    // Exceeded precision, reject
+    if (decimalPart.length > precision) return prevValue
+    // Within precision, keep as string to preserve "1.0" while typing "1.05"
+    return newValue
+  }
+
+  // No decimals, return as number
+  return numericValue
+}
+
+export function NumberInput({ onChange, value, useInt, precision, min, max, error, ...props }) {
+  const [hasError, setHasError] = React.useState(false)
+  const [inputValue, setInputValue] = React.useState(value)
+  const [localValue, setLocalValue] = React.useState(value)
+  React.useEffect(() => setInputValue(value), [value])
+
+  if (useInt) precision = 0
+  if (!useInt && precision === 0) useInt = true
+  const opts = { useInt, precision, min, max }
+
+  return (
+    <TextInput
+      onChange={(newValue) => {
+        const numericValue = formatNumericValue(newValue, localValue, opts)
+        setInputValue(newValue?.toString() || '')
+        setLocalValue(numericValue)
+        onChange?.(numericValue)
+        setHasError(!isValidNumber(newValue, opts))
+      }}
+      onBlur={() => {
+        setInputValue(localValue)
+        setHasError(!isValidNumber(localValue, opts))
+      }}
+      value={inputValue}
+      keyboardType={useInt ? 'number-pad' : 'decimal-pad'}
+      error={error || hasError}
+      {...props}
+    />
+  )
+}

package/src/components/inputs/Picker.js

@@ -1,10 +1,35 @@
+import { is } from 'ramda'
 import React from 'react'
 
 import { Col } from '../structure/Col'
+import { FlatList } from '../list/FlatList'
 import { LoadingView } from '../state/LoadingView'
 import { Row } from '../structure/Row'
+import { normalizeString } from '../../helpers/string'
 import { useOptions } from '../../helpers/options'
 
+export function getOption(options, value, config = {}) {
+  if (!options?.length) return value
+  const option = options.find((option) => compareOptionsValues(option, value, config))
+  return option || value
+}
+
+export function getOptionLabel(options, value, config = {}) {
+  if (!options?.length) return ''
+  const { labelKey } = config
+  const selectedOption = getOption(options, value, config)
+  const label = selectedOption?.[labelKey] || value
+  if (!is(String, label)) return ''
+  return label
+}
+
+export function searchOptions(options, search, config = {}) {
+  const { labelKey } = config
+  if (!options?.length) return options
+  if (!search) return options
+  return options.filter((item) => normalizeString(item?.[labelKey])?.includes(normalizeString(search)))
+}
+
 function isSelected(value, option, config = {}) {
   return !!config.multiple
     ? value?.some?.((item) => compareOptionsValues(item, option, config))
@@ -53,12 +78,33 @@ function PickerItem({ option, onChange, value, renderOption, useRawOption, multi
   const handleChange = () => {
     const formatChangeValueFunc = multiple ? formatMultipleChangeValue : formatSingleChangeValue
     const formattedValue = formatChangeValueFunc(option, value, { selected, useRawOption, valueKey })
-    onChange(formattedValue)
+    onChange(formattedValue, option)
   }
 
   return <Col {...props}>{renderOption({ option, selected, onChange: handleChange, valueKey, labelKey })}</Col>
 }
 
+function DefaultPickerWrapper({ renderItem, options, ...props }) {
+  return (
+    <Row className="neko-picker" gap="md" {...props}>
+      {options?.map?.((option) => renderItem(option))}
+    </Row>
+  )
+}
+
+function FlatListPickerWrapper({ renderItem, options, valueKey, ...props }) {
+  return (
+    <FlatList
+      keyExtractor={(i) => i[valueKey]}
+      data={options}
+      divider
+      fullH
+      renderItem={({ item: option }) => renderItem(option)}
+      {...props}
+    />
+  )
+}
+
 export function Picker({
   value,
   initialValue,
@@ -68,23 +114,24 @@ export function Picker({
   renderOption,
   colProps,
   useRawOption,
+  useFlatList,
   multiple,
   valueKey,
   labelKey,
+  Wrapper,
   ...rootProps
 }) {
   const [localValue, setLocalValue] = React.useState(initialValue)
   value = value === undefined ? localValue : value
   onChange = onChange || setLocalValue
+  const { options: finalOptions, isFirstLoad } = useOptions(options, {})
 
-  const handleChange = (v) => {
+  const handleChange = (v, option) => {
     if (!!disabled) return
     setLocalValue(v)
-    onChange?.(v)
+    onChange?.(v, option)
   }
 
-  const { options: finalOptions, isFirstLoad } = useOptions(options, {})
-
   valueKey = valueKey || 'value'
   labelKey = labelKey || 'label'
 
@@ -93,10 +140,15 @@ export function Picker({
     return false
   }
 
+  Wrapper = Wrapper || (useFlatList ? FlatListPickerWrapper : DefaultPickerWrapper)
+
   return (
     <LoadingView active={isFirstLoad} replaceChildren>
-      <Row className="neko-picker" gap="md" {...rootProps}>
-        {finalOptions?.map?.((option) => (
+      <Wrapper
+        {...rootProps}
+        valueKey={valueKey}
+        options={finalOptions}
+        renderItem={(option) => (
           <PickerItem
             key={option.value}
             option={option}
@@ -109,8 +161,8 @@ export function Picker({
             labelKey={labelKey}
             {...colProps}
           />
-        ))}
-      </Row>
+        )}
+      />
     </LoadingView>
   )
 }

package/src/components/inputs/Radio.js

@@ -33,7 +33,7 @@ export function Radio({ value, onChange, disabled, initialValue, ...rootProps })
         size={sizeCode}
         gap={8}
         content={
-          <View height={size * 0.65} ratio={1} border={2} padding={3} borderColor={color} br={size} center>
+          <View height={size * 0.65} ratio={1} border={2} padding={2} borderColor={color} br={size} center>
             {!!value && <View bg={color} br={size} flex fullW fullH />}
           </View>
         }

package/src/components/inputs/RateInput.js

@@ -0,0 +1,62 @@
+import { pipe, range, is } from 'ramda'
+import React from 'react'
+
+import { Icon } from '../presentation'
+import { Link } from '../actions/Link'
+import { LoadingView } from '../state'
+import { View } from '../structure/View'
+import { moveScale } from '../../theme/helpers/sizeScale'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = {
+  color: 'primary',
+  inactiveColor: 'text4_op50',
+  max: 5,
+  icon: 'star-fill',
+}
+
+export function RateInput({ value, onChange, disabled, loading, ...rootProps }) {
+  let [{ size, sizeCode, color }, formattedProps] = pipe(
+    useColorConverter('primary'),
+    useSizeConverter('icons', 'md'),
+    useThemeComponentModifier('RateInput'),
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  const [localValue, setLocalValue] = React.useState(value)
+  React.useEffect(() => setLocalValue(value), [value])
+
+  const { icon, max, inactiveColor, ...props } = formattedProps
+
+  const handleChange = (v) => {
+    if (!!disabled) return
+    const newValue = v === localValue ? null : v
+    setLocalValue(newValue)
+    onChange?.(newValue)
+  }
+
+  return (
+    <LoadingView active={loading} width="fit-content">
+      <View className="neko-rate-input" row gap="xs" centerV minHeight={sizeCode} {...props}>
+        {range(1, max + 1).map((i) => {
+          const active = localValue >= i
+
+          let finalIcon = icon
+          if (is(Function, icon)) finalIcon = icon?.({ value: localValue, optionValue: i, active })
+
+          let finalColor = color
+          if (is(Function, color)) finalColor = color?.({ value: localValue, optionValue: i, active })
+
+          return (
+            <Link onPress={() => handleChange(i)} disabled={disabled} center key={i}>
+              <Icon name={finalIcon} size={moveScale(sizeCode, 1)} color={active ? finalColor : inactiveColor} />
+            </Link>
+          )
+        })}
+      </View>
+    </LoadingView>
+  )
+}