@neko-os/ui 0.0.7 → 0.0.9

package/src/components/presentation/ImageBackground.js

@@ -0,0 +1,38 @@
+import { pipe } from 'ramda'
+
+import { AbsImageBackground } from '../../abstractions/ImageBackground'
+import { useAnimationModifier } from '../../modifiers/animation'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
+import { useDisplayModifier } from '../../modifiers/display'
+import { useFlexModifier } from '../../modifiers/flex'
+import { useFlexWrapperModifier } from '../../modifiers/flexWrapper'
+import { useMarginModifier } from '../../modifiers/margin'
+import { useOverflowModifier } from '../../modifiers/overflow'
+import { usePaddingModifier } from '../../modifiers/padding'
+import { usePositionModifier } from '../../modifiers/position'
+import { useShadowModifier } from '../../modifiers/shadow'
+import { useSizeModifier } from '../../modifiers/size'
+import { useStateModifier } from '../../modifiers/state'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function ImageBackground({ ...rootProps }) {
+  const [_, props] = pipe(
+    useThemeComponentModifier('ImageBackground'),
+    useFlexWrapperModifier,
+    useDisplayModifier,
+    useAnimationModifier,
+    useStateModifier,
+    useSizeModifier,
+    usePositionModifier,
+    useOverflowModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+
+  return <AbsImageBackground className="neko-image-background" {...props} />
+}

package/src/components/presentation/Result.js

@@ -44,8 +44,8 @@ export function Result({
 
   return (
     <View className="neko-result" center padding="lg" {...props}>
-      <Icon name={icon} color={iconColor} size={42} primary {...iconProps} />
-      <Divider height={10} />
+      {!!icon && <Icon name={icon} color={iconColor} size={42} primary {...iconProps} />}
+      {!!icon && <Divider height={10} />}
       <Text h3 {...textProps} {...titleProps}>
         {title}
       </Text>

package/src/components/presentation/index.js

@@ -8,4 +8,5 @@ export * from './Badge'
 export * from './Avatar'
 export * from './AvatarLabel'
 export * from './Image'
+export * from './ImageBackground'
 export * from './LabelValue'

package/src/components/state/LoadingView.js

@@ -18,7 +18,16 @@ export function LoadingView({ active, children, size, color, replaceChildren, no
   return (
     <View className="neko-loading-view" relative {...props}>
       {children}
-      <View className="neko-laoding-view-overlay" bg="bg_op90" absolute top={0} left={0} right={0} bottom={0} center>
+      <View
+        className="neko-laoding-view-overlay"
+        bg="mainBG_op90"
+        absolute
+        top={0}
+        left={0}
+        right={0}
+        bottom={0}
+        center
+      >
         {loader}
       </View>
     </View>

package/src/components/structure/Accordion.js

@@ -43,7 +43,7 @@ export function Accordion({ children, title, open, onChange, ...rootProps }) {
         row
         gap={moveScale(sizeCode, -2)}
         borderB={open ? props.border || true : open}
-        borderColor={props.borderColor}
+        borderColor={props.borderColor || 'bg'}
         centerV
         {...headerProps}
         onPress={toggle}

package/src/components/structure/BlurView.js

@@ -0,0 +1,58 @@
+import tinycolor from 'tinycolor2'
+import { pipe } from 'ramda'
+
+import { AbsBlurView } from '../../abstractions/BlurView'
+import { useAnimationModifier } from '../../modifiers/animation'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
+import { useColors } from '../../theme'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useDisplayModifier } from '../../modifiers/display'
+import { useFlexModifier } from '../../modifiers/flex'
+import { useFlexWrapperModifier } from '../../modifiers/flexWrapper'
+import { useMarginModifier } from '../../modifiers/margin'
+import { useOverflowModifier } from '../../modifiers/overflow'
+import { usePaddingModifier } from '../../modifiers/padding'
+import { usePositionModifier } from '../../modifiers/position'
+import { useShadowModifier } from '../../modifiers/shadow'
+import { useSizeModifier } from '../../modifiers/size'
+import { useStateModifier } from '../../modifiers/state'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS =
+  (colors) =>
+  ([{}, {}]) => {
+    const isDark = tinycolor(colors?.overlayBG || colors?.bg).isDark()
+
+    return {
+      tint: isDark ? 'dark' : 'light',
+    }
+  }
+
+export function BlurView({ children, ...rootProps }) {
+  const colors = useColors()
+
+  const [{}, props] = pipe(
+    useThemeComponentModifier('BlurView'),
+    useDefaultModifier(DEFAULT_PROPS(colors)),
+    useFlexWrapperModifier,
+    useDisplayModifier,
+    useAnimationModifier,
+    useStateModifier,
+    useSizeModifier,
+    usePositionModifier,
+    useOverflowModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+
+  return (
+    <AbsBlurView className="neko-blur-view" {...props}>
+      {children}
+    </AbsBlurView>
+  )
+}

package/src/components/structure/GradientView.js

@@ -0,0 +1,42 @@
+import { pipe } from 'ramda'
+
+import { AbsGradientView } from '../../abstractions/GradientView'
+import { useAnimationModifier } from '../../modifiers/animation'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
+import { useDisplayModifier } from '../../modifiers/display'
+import { useFlexModifier } from '../../modifiers/flex'
+import { useFlexWrapperModifier } from '../../modifiers/flexWrapper'
+import { useMarginModifier } from '../../modifiers/margin'
+import { useOverflowModifier } from '../../modifiers/overflow'
+import { usePaddingModifier } from '../../modifiers/padding'
+import { usePositionModifier } from '../../modifiers/position'
+import { useShadowModifier } from '../../modifiers/shadow'
+import { useSizeModifier } from '../../modifiers/size'
+import { useStateModifier } from '../../modifiers/state'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function GradientView({ children, ...rootProps }) {
+  const [{ gradientColors }, props] = pipe(
+    useThemeComponentModifier('GradientView'),
+    useFlexWrapperModifier,
+    useDisplayModifier,
+    useAnimationModifier,
+    useStateModifier,
+    useSizeModifier,
+    usePositionModifier,
+    useOverflowModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+
+  return (
+    <AbsGradientView className="neko-gradient-view" colors={gradientColors} {...props}>
+      {children}
+    </AbsGradientView>
+  )
+}

package/src/components/structure/View.js

@@ -4,6 +4,7 @@ import { AbsView } from '../../abstractions/View'
 import { useAnimationModifier } from '../../modifiers/animation'
 import { useBackgroundModifier } from '../../modifiers/background'
 import { useBorderModifier } from '../../modifiers/border'
+import { useCursorModifier } from '../../modifiers/cursor'
 import { useDisplayModifier } from '../../modifiers/display'
 import { useFlexModifier } from '../../modifiers/flex'
 import { useFlexWrapperModifier } from '../../modifiers/flexWrapper'
@@ -21,6 +22,7 @@ export function View({ children, ...rootProps }) {
     useThemeComponentModifier('View'),
     useFlexWrapperModifier,
     useDisplayModifier,
+    useCursorModifier,
     useAnimationModifier,
     useStateModifier,
     useSizeModifier,

package/src/components/structure/bottomDrawer/index.js

@@ -0,0 +1 @@
+export { BottomDrawer } from './web/BottomDrawer'

package/src/components/structure/bottomDrawer/index.native.js

@@ -0,0 +1,4 @@
+export { BottomDrawer } from './native/BottomDrawer'
+export { DrawerScrollView } from './native/DrawerScrollView'
+export { DrawerHandle } from './native/DrawerHandle'
+export { DrawerProvider, useDrawerContext } from './native/DrawerContext'

package/src/components/structure/bottomDrawer/index.web.js

@@ -0,0 +1,4 @@
+export { BottomDrawer } from './native/BottomDrawer'
+export { DrawerScrollView } from './native/DrawerScrollView'
+export { DrawerHandle } from './native/DrawerHandle'
+export { DrawerProvider, useDrawerContext } from './native/DrawerContext'

package/src/components/structure/bottomDrawer/native/BottomDrawer.js

@@ -0,0 +1,242 @@
+import { GestureDetector, Gesture, GestureHandlerRootView } from 'react-native-gesture-handler'
+import { Modal, Dimensions, StyleSheet, BackHandler, Platform } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+  runOnJS,
+  useAnimatedReaction,
+} from 'react-native-reanimated'
+import React from 'react'
+
+import { DrawerHandle } from './DrawerHandle'
+import { DrawerProvider } from './DrawerContext'
+import { Pressable } from '../../../actions/Pressable'
+import { View } from '../../View'
+import { normalizeSnapPoints, findClosestSnapPoint } from './utils'
+import { useColors } from '../../../../theme/ThemeHandler'
+
+function InnerContent({
+  children,
+  render,
+  setRender,
+  open,
+  onClose,
+  snapPoints = ['50%'],
+  useSafeArea = true,
+  enableOverScroll = true,
+  enableHandlePanningGesture = true,
+  enableContentPanningGesture = true,
+  animationConfig = {
+    damping: 50,
+    stiffness: 500,
+    mass: 0.3,
+    overshootClamping: true,
+    restDisplacementThreshold: 10,
+    restSpeedThreshold: 10,
+  },
+  hideHandle,
+  contentProps,
+  ...props
+}) {
+  const { height: SCREEN_HEIGHT } = Dimensions.get('window')
+  const insets = useSafeAreaInsets()
+  const bottomInset = useSafeArea ? insets.bottom : 0
+
+  const colors = useColors()
+
+  const translateY = useSharedValue(SCREEN_HEIGHT)
+  const scrollOffset = useSharedValue(0)
+  const scrollEnabled = useSharedValue(false)
+  const isScrolling = useSharedValue(false)
+  const snapIndex = useSharedValue(0)
+  const velocityY = useSharedValue(0)
+
+  const normalizedSnapPoints = React.useMemo(() => normalizeSnapPoints(snapPoints, SCREEN_HEIGHT), [snapPoints])
+  const maxSnapPoint = React.useMemo(() => Math.max(...normalizedSnapPoints), [normalizedSnapPoints])
+  const minSnapPoint = React.useMemo(() => Math.min(...normalizedSnapPoints), [normalizedSnapPoints])
+
+  React.useEffect(() => {
+    if (open) {
+      const targetY = SCREEN_HEIGHT - normalizedSnapPoints[0]
+      translateY.value = withSpring(targetY, animationConfig)
+      snapIndex.value = 0
+    } else {
+      translateY.value = withSpring(SCREEN_HEIGHT, animationConfig, () => {
+        scrollOffset.value = 0
+        scrollEnabled.value = false
+        runOnJS(setRender)(false)
+      })
+      snapIndex.value = -1
+    }
+  }, [open])
+
+  React.useEffect(() => {
+    if (!onClose || !open || Platform.OS !== 'android') return
+    const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
+      onClose()
+      return true
+    })
+    return () => backHandler.remove()
+  }, [open, onClose])
+
+  useAnimatedReaction(
+    () => translateY.value,
+    (currentY) => {
+      const atMaxSnapPoint = currentY <= SCREEN_HEIGHT - maxSnapPoint
+      scrollEnabled.value = atMaxSnapPoint
+    },
+    []
+  )
+
+  let handleClose = React.useCallback(() => {
+    onClose?.()
+  }, [onClose])
+  if (!onClose) handleClose = false
+
+  const snapTo = React.useCallback(
+    (index) => {
+      'worklet'
+      const snapPoint = normalizedSnapPoints[index]
+      if (snapPoint !== undefined) {
+        translateY.value = withSpring(SCREEN_HEIGHT - snapPoint, animationConfig)
+        snapIndex.value = index
+      }
+    },
+    [normalizedSnapPoints]
+  )
+
+  // contexto manual para gesto
+  const gestureStartTranslateY = useSharedValue(0)
+
+  const panGesture = React.useMemo(() => {
+    return Gesture.Pan()
+      .enabled(enableHandlePanningGesture || enableContentPanningGesture)
+      .onStart(() => {
+        gestureStartTranslateY.value = translateY.value
+      })
+      .onUpdate((event) => {
+        const newTranslateY = gestureStartTranslateY.value + event.translationY
+        const maxPosition = SCREEN_HEIGHT - maxSnapPoint
+
+        if (enableOverScroll && newTranslateY >= maxPosition) {
+          translateY.value = newTranslateY
+        } else {
+          translateY.value = Math.max(maxPosition, Math.min(SCREEN_HEIGHT, newTranslateY))
+        }
+
+        velocityY.value = event.velocityY
+      })
+      .onEnd(() => {
+        const currentPosition = SCREEN_HEIGHT - translateY.value
+        const shouldClose =
+          !!handleClose &&
+          ((velocityY.value > 2000 && currentPosition < minSnapPoint * 0.75) || currentPosition < minSnapPoint * 0.25)
+
+        if (shouldClose) {
+          runOnJS(handleClose)()
+        } else {
+          const closestSnapIndex = findClosestSnapPoint(currentPosition, normalizedSnapPoints, velocityY.value)
+          const targetSnapPoint = normalizedSnapPoints[closestSnapIndex]
+          translateY.value = withSpring(SCREEN_HEIGHT - targetSnapPoint, animationConfig)
+          snapIndex.value = closestSnapIndex
+        }
+      })
+  }, [
+    enableHandlePanningGesture,
+    enableContentPanningGesture,
+    enableOverScroll,
+    maxSnapPoint,
+    minSnapPoint,
+    normalizedSnapPoints,
+    animationConfig,
+    handleClose,
+  ])
+
+  const animatedSheetStyle = useAnimatedStyle(() => {
+    const currentHeight = SCREEN_HEIGHT - translateY.value
+    return {
+      transform: [{ translateY: translateY.value }],
+      maxHeight: currentHeight,
+    }
+  })
+
+  const contextValue = React.useMemo(
+    () => ({
+      translateY,
+      scrollOffset,
+      scrollEnabled,
+      isScrolling,
+      snapIndex,
+      maxSnapPoint,
+      snapTo,
+      animationConfig,
+    }),
+    [maxSnapPoint]
+  )
+
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <Pressable
+        absoluteFill
+        bg="backdrop_op70"
+        onPress={() => {
+          if (!handleClose) return
+          runOnJS(handleClose)()
+        }}
+      />
+
+      <DrawerProvider value={contextValue}>
+        <GestureDetector gesture={panGesture}>
+          <Animated.View
+            style={[styles.container, { height: SCREEN_HEIGHT }, animatedSheetStyle]}
+            pointerEvents="box-none"
+          >
+            <View
+              flex
+              bg="overlayBG"
+              shadow
+              paddingB={useSafeArea && bottomInset}
+              borderRadiusT="xxxl"
+              marginL="auto"
+              marginR="auto"
+              fullW
+              {...props}
+            >
+              <DrawerHandle hide={hideHandle} />
+              <View flex {...contentProps}>
+                {children}
+              </View>
+            </View>
+          </Animated.View>
+        </GestureDetector>
+      </DrawerProvider>
+    </GestureHandlerRootView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+  },
+})
+
+export function BottomDrawer({ open, ...props }) {
+  const [render, setRender] = React.useState(open)
+
+  React.useEffect(() => {
+    if (open) {
+      setRender(true)
+    }
+  }, [open])
+
+  return (
+    <Modal visible={render} transparent statusBarTranslucent navigationBarTranslucent animationType="none">
+      <InnerContent {...props} open={open} render={render} setRender={setRender} />
+    </Modal>
+  )
+}

package/src/components/structure/bottomDrawer/native/DrawerContext.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const DrawerContext = React.createContext(null);
+
+export function DrawerProvider({ children, value }) {
+  return (
+    <DrawerContext.Provider value={value}>
+      {children}
+    </DrawerContext.Provider>
+  );
+}
+
+export function useDrawerContext() {
+  const context = React.useContext(DrawerContext);
+
+  if (!context) {
+    throw new Error('useDrawerContext must be used within a DrawerProvider');
+  }
+
+  return context;
+}

package/src/components/structure/bottomDrawer/native/DrawerHandle.js

@@ -0,0 +1,12 @@
+import { Divider } from '../../../helpers/Separator'
+import { View } from '../../View'
+
+export function DrawerHandle({ hide }) {
+  if (!!hide) return false
+
+  return (
+    <View center padding="sm">
+      <Divider maxWidth={35} line={4} color="text4_op30" height={4} />
+    </View>
+  )
+}

package/src/components/structure/bottomDrawer/native/DrawerScrollView.js

@@ -0,0 +1,83 @@
+import React from 'react'
+import { ScrollView } from 'react-native'
+import Animated, { useAnimatedScrollHandler, useAnimatedReaction, runOnJS } from 'react-native-reanimated'
+import { useDrawerContext } from './DrawerContext'
+
+const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView)
+
+export const DrawerScrollView = React.forwardRef((props, ref) => {
+  const {
+    children,
+    onScroll,
+    scrollEventThrottle = 16,
+    showsVerticalScrollIndicator = true,
+    bounces = true,
+    ...scrollViewProps
+  } = props
+
+  const { scrollOffset, scrollEnabled, isScrolling } = useDrawerContext()
+
+  const scrollRef = React.useRef(null)
+
+  // Convert shared value to React state for the component
+  const [isScrollEnabled, setIsScrollEnabled] = React.useState(true)
+
+  React.useImperativeHandle(ref, () => scrollRef.current)
+
+  // Handle scroll lock/unlock based on drawer position
+  useAnimatedReaction(
+    () => scrollEnabled.value,
+    (enabled) => {
+      if (!enabled && scrollOffset.value > 0) {
+        runOnJS(() => {
+          scrollRef.current?.scrollTo({ y: 0, animated: false })
+        })()
+        scrollOffset.value = 0
+      }
+      // Update React state
+      runOnJS(setIsScrollEnabled)(enabled)
+    },
+    []
+  )
+
+  const handleScrollBeginDrag = React.useCallback(() => {
+    isScrolling.value = true
+  }, [isScrolling])
+
+  const handleScrollEndDrag = React.useCallback(() => {
+    isScrolling.value = false
+  }, [isScrolling])
+
+  const animatedScrollHandler = useAnimatedScrollHandler({
+    onScroll: (event) => {
+      scrollOffset.value = event.contentOffset.y
+
+      if (onScroll) {
+        runOnJS(onScroll)(event)
+      }
+    },
+    onBeginDrag: () => {
+      runOnJS(handleScrollBeginDrag)()
+    },
+    onEndDrag: () => {
+      runOnJS(handleScrollEndDrag)()
+    },
+  })
+
+  return (
+    <AnimatedScrollView
+      ref={scrollRef}
+      style={{ flex: 1 }}
+      scrollEnabled={isScrollEnabled}
+      onScroll={animatedScrollHandler}
+      scrollEventThrottle={scrollEventThrottle}
+      showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+      bounces={bounces}
+      {...scrollViewProps}
+    >
+      {children}
+    </AnimatedScrollView>
+  )
+})
+
+DrawerScrollView.displayName = 'DrawerScrollView'

package/src/components/structure/bottomDrawer/native/utils.js

@@ -0,0 +1,58 @@
+export function normalizeSnapPoints(snapPoints, screenHeight) {
+  return snapPoints.map((point) => {
+    if (typeof point === 'string' && point.endsWith('%')) {
+      const percentage = parseFloat(point) / 100;
+      return screenHeight * percentage;
+    }
+    return point;
+  });
+}
+
+export function findClosestSnapPoint(currentPosition, snapPoints, velocity = 0) {
+  'worklet';
+  // Reduced velocity impact for more stable snapping
+  const velocityImpact = velocity * 0.03;
+  const adjustedPosition = currentPosition + velocityImpact;
+
+  let closestIndex = 0;
+  let minDistance = Math.abs(snapPoints[0] - adjustedPosition);
+
+  for (let i = 1; i < snapPoints.length; i++) {
+    const distance = Math.abs(snapPoints[i] - adjustedPosition);
+    if (distance < minDistance) {
+      minDistance = distance;
+      closestIndex = i;
+    }
+  }
+
+  // Increased velocity thresholds for more resistance
+  // Only change snap points with strong swipe gestures
+
+  // Bias towards opening more when swiping up very fast
+  if (velocity < -1500 && closestIndex < snapPoints.length - 1) {
+    closestIndex++;
+  }
+  // Bias towards closing when swiping down very fast
+  else if (velocity > 1500 && closestIndex > 0) {
+    closestIndex--;
+  }
+
+  // Add hysteresis: prefer staying at current position unless moved significantly
+  // This prevents accidental snap point changes
+  if (snapPoints.length > 1) {
+    const currentSnapDistance = minDistance;
+    // Require at least 20% of the distance between snap points to change
+    const snapPointSpacing = Math.abs(snapPoints[Math.min(closestIndex + 1, snapPoints.length - 1)] - snapPoints[closestIndex]);
+    if (currentSnapDistance < snapPointSpacing * 0.2) {
+      // Stay at current snap point unless moved significantly
+      return closestIndex;
+    }
+  }
+
+  return closestIndex;
+}
+
+export function clamp(value, min, max) {
+  'worklet';
+  return Math.min(Math.max(value, min), max);
+}

package/src/components/structure/bottomDrawer/web/BottomDrawer.js

@@ -0,0 +1,3 @@
+import { Drawer } from '../../drawer'
+
+export const BottomDrawer = (props) => <Drawer height={400} {...props} />

package/src/components/structure/drawer/Drawer.js

@@ -0,0 +1,5 @@
+import { Modal } from '../modal/Modal'
+
+export function Drawer(props) {
+  return <Modal position="bottom" {...props} />
+}

package/src/components/structure/drawer/Drawer.native.js

@@ -0,0 +1,3 @@
+import { BottomDrawer } from '../bottomDrawer/native/BottomDrawer'
+
+export const Drawer = BottomDrawer

package/src/components/structure/drawer/index.js

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

package/src/components/structure/index.js

@@ -1,8 +1,13 @@
 export * from './Accordion'
 export * from './AccordionGroup'
 export * from './View'
+export * from './GradientView'
+export * from './BlurView'
 export * from './SafeAreaView'
 export * from './Card'
 export * from './Row'
 export * from './Col'
+export * from './modal'
+export * from './drawer'
+export * from './bottomDrawer'
 export * from './popover/Popover'