@chem-po/react-native 0.0.29 → 0.0.30

package/src/components/form/view/styles.ts

@@ -9,7 +9,4 @@ export const inputViewStyles = StyleSheet.create({
   value: {
     opacity: 1,
   },
-  valueEmpty: {
-    opacity: 0.6,
-  },
 })

package/src/components/layout/CollapseHorizontal.tsx

@@ -0,0 +1,82 @@
+import React, { useCallback } from 'react'
+import { LayoutChangeEvent, StyleProp, View, ViewStyle } from 'react-native'
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated'
+
+export const CollapseHorizontal = ({
+  children,
+  in: isIn,
+  duration = 200,
+  style,
+}: {
+  children: React.ReactNode
+  in: boolean
+  duration?: number
+  style?: StyleProp<ViewStyle>
+}) => {
+  const contentWidth = useSharedValue(0)
+  const width = useSharedValue(0)
+  const opacity = useSharedValue(0)
+
+  const handleLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      contentWidth.value = event.nativeEvent.layout.width
+      // Initialize width if component is initially visible
+      if (isIn && width.value === 0) {
+        width.value = contentWidth.value
+        opacity.value = 1
+      }
+    },
+    [isIn, contentWidth, width, opacity],
+  )
+
+  React.useEffect(() => {
+    if (isIn) {
+      // Fade in: width first, then opacity
+      width.value = withTiming(contentWidth.value, {
+        duration,
+      })
+      opacity.value = withSequence(
+        withTiming(0, { duration: 0 }), // Reset opacity
+        withTiming(1, {
+          duration,
+        }),
+      )
+    } else {
+      // Fade out: opacity first, then width
+      opacity.value = withTiming(0, {
+        duration,
+      })
+      width.value = withSequence(
+        withTiming(width.value, { duration: 0 }), // Ensure we start from current width
+        withTiming(0, {
+          duration,
+        }),
+      )
+    }
+  }, [isIn, contentWidth.value, duration, width, opacity])
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    width: width.value,
+    opacity: opacity.value,
+  }))
+
+  return (
+    <Animated.View
+      style={[
+        {
+          overflow: 'hidden',
+          pointerEvents: isIn ? 'auto' : 'none',
+        },
+        animatedStyle,
+      ]}>
+      <View style={[{ position: 'absolute' }, style]} onLayout={handleLayout}>
+        {children}
+      </View>
+    </Animated.View>
+  )
+}

package/src/contexts/root.tsx

@@ -28,14 +28,14 @@ const createPaperTheme = (
   return {
     dark: colorMode === 'dark',
     colors: {
-      primary: colors.accent[200],
+      primary: colors.accent[300],
       onPrimary: colors.text[900],
-      primaryContainer: colors.accent[500],
-      onPrimaryContainer: colors.text[300],
+      primaryContainer: colors.accent[800],
+      onPrimaryContainer: colors.text[150],
 
       secondary: colors.background[150],
       onSecondary: colors.text[100],
-      secondaryContainer: colors.background[50],
+      secondaryContainer: colors.accent[950],
       onSecondaryContainer: colors.text[150],
 
       tertiary: colors.accent[600],
@@ -53,7 +53,7 @@ const createPaperTheme = (
       surface: colors.background[100],
       onSurface: colors.text[100],
       surfaceVariant: colors.background[200],
-      onSurfaceVariant: colors.text[250],
+      onSurfaceVariant: colors.text[300],
       outline: colors.text[500],
       outlineVariant: colors.accent[300],
 
@@ -92,7 +92,7 @@ const createPaperTheme = (
           ...fonts?.bodyMedium,
         },
         bodySmall: {
-          fontSize: 15,
+          fontSize: 16,
           ...fonts?.bodySmall,
         },
       },

package/src/index.ts

@@ -3,3 +3,4 @@ export * from './constants'
 export * from './contexts'
 export * from './hooks'
 export * from './store'
+export * from './types'

package/src/types/forms.ts

@@ -0,0 +1,14 @@
+import { BaseCustomInput, BaseCustomInputProps } from '@chem-po/react'
+import { TextStyle, ViewStyle } from 'react-native'
+
+export type CustomInput<Value, InputStyle = TextStyle> = BaseCustomInput<
+  Value,
+  ViewStyle,
+  InputStyle
+>
+
+export type CustomInputProps<Value, InputStyle = TextStyle> = BaseCustomInputProps<
+  Value,
+  ViewStyle,
+  InputStyle
+>

package/src/types/index.ts

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