@niibase/uniwind 1.0.0 → 1.0.10

package/src/components/native/react-native-gesture-handler/BaseButton.tsx

@@ -0,0 +1,18 @@
+import { BaseButton as RNGHBaseButton, BaseButtonProps } from 'react-native-gesture-handler'
+import { copyComponentProperties } from '../../utils'
+import { useStyle } from '../useStyle'
+
+type BaseButtonPropsWithClassName = BaseButtonProps & { className?: string }
+
+export const BaseButton = copyComponentProperties(RNGHBaseButton, (props: BaseButtonPropsWithClassName) => {
+    const style = useStyle(props.className)
+
+    return (
+        <RNGHBaseButton
+            {...props}
+            style={[style, props.style]}
+        />
+    )
+})
+
+export default BaseButton

package/src/components/native/react-native-gesture-handler/BorderlessButton.tsx

@@ -0,0 +1,19 @@
+import { BorderlessButton as RNGHBorderlessButton, BorderlessButtonProps } from 'react-native-gesture-handler'
+import { copyComponentProperties } from '../../utils'
+import { useStyle } from '../useStyle'
+
+export const BorderlessButton = copyComponentProperties(
+    RNGHBorderlessButton,
+    (props: BorderlessButtonProps) => {
+        const style = useStyle(props.className)
+
+        return (
+            <RNGHBorderlessButton
+                {...props}
+                style={[style, props.style]}
+            />
+        )
+    },
+)
+
+export default BorderlessButton

package/src/components/native/react-native-gesture-handler/DrawerLayoutAndroid.tsx

@@ -0,0 +1,20 @@
+import { DrawerLayoutAndroidProps } from 'react-native'
+import { DrawerLayoutAndroid as RNGHDrawerLayoutAndroid } from 'react-native-gesture-handler'
+import { copyComponentProperties } from '../../utils'
+import { useStyle } from '../useStyle'
+
+export const DrawerLayoutAndroid = copyComponentProperties(
+    RNGHDrawerLayoutAndroid,
+    (props: DrawerLayoutAndroidProps) => {
+        const style = useStyle(props.className)
+
+        return (
+            <RNGHDrawerLayoutAndroid
+                {...props}
+                style={[style, props.style]}
+            />
+        )
+    },
+)
+
+export default DrawerLayoutAndroid

package/src/components/native/react-native-gesture-handler/FlatList.tsx

@@ -0,0 +1,29 @@
+import { FlatListProps } from 'react-native'
+import { FlatList as RNGHFlatList } from 'react-native-gesture-handler'
+import { useUniwindAccent } from '../../../hooks'
+import { copyComponentProperties } from '../../utils'
+import { useStyle } from '../useStyle'
+
+export const FlatList = copyComponentProperties(RNGHFlatList, (props: FlatListProps<unknown>) => {
+    const style = useStyle(props.className)
+    const styleColumnWrapper = useStyle(props.columnWrapperClassName)
+    const styleContentContainer = useStyle(props.contentContainerClassName)
+    const styleListFooterComponent = useStyle(props.ListFooterComponentClassName)
+    const styleListHeaderComponent = useStyle(props.ListHeaderComponentClassName)
+    const endFillColor = useUniwindAccent(props.endFillColorClassName)
+    const hasSingleColumn = !('numColumns' in props) || props.numColumns === 1
+
+    return (
+        <RNGHFlatList
+            {...props}
+            style={[style, props.style]}
+            columnWrapperStyle={hasSingleColumn ? undefined : [styleColumnWrapper, props.columnWrapperStyle]}
+            contentContainerStyle={[styleContentContainer, props.contentContainerStyle]}
+            ListFooterComponentStyle={[styleListFooterComponent, props.ListFooterComponentStyle]}
+            ListHeaderComponentStyle={[styleListHeaderComponent, props.ListHeaderComponentStyle]}
+            endFillColor={props.endFillColor ?? endFillColor}
+        />
+    )
+})
+
+export default FlatList

package/src/components/native/react-native-gesture-handler/GestureHandlerRootView.tsx

@@ -0,0 +1,20 @@
+import { GestureHandlerRootView as RNGestureHandlerRootView } from 'react-native-gesture-handler'
+import { GestureHandlerRootViewProps } from 'react-native-gesture-handler/lib/typescript/components/GestureHandlerRootView'
+import { copyComponentProperties } from '../../utils'
+import { useStyle } from '../useStyle'
+
+export const GestureHandlerRootView = copyComponentProperties(
+    RNGestureHandlerRootView,
+    (props: GestureHandlerRootViewProps) => {
+        const style = useStyle(props.className)
+
+        return (
+            <RNGestureHandlerRootView
+                {...props}
+                style={[style, props.style]}
+            />
+        )
+    },
+)
+
+export default GestureHandlerRootView

package/src/components/native/react-native-gesture-handler/Pressable.tsx

@@ -0,0 +1,31 @@
+import { Pressable as RNGHPressable, PressableProps } from 'react-native-gesture-handler'
+import { UniwindStore } from '../../../core/native'
+import { copyComponentProperties } from '../../utils'
+import { useStyle } from '../useStyle'
+
+export const Pressable = copyComponentProperties(RNGHPressable, (props: PressableProps) => {
+    const style = useStyle(props.className, {
+        isDisabled: Boolean(props.disabled),
+    })
+
+    return (
+        <RNGHPressable
+            {...props}
+            style={state => {
+                if (state.pressed) {
+                    return [
+                        UniwindStore.getStyles(
+                            props.className,
+                            { isDisabled: Boolean(props.disabled), isPressed: true },
+                        ).styles,
+                        typeof props.style === 'function' ? props.style(state) : props.style,
+                    ]
+                }
+
+                return [style, typeof props.style === 'function' ? props.style(state) : props.style]
+            }}
+        />
+    )
+})
+
+export default Pressable

package/src/components/native/react-native-gesture-handler/PureNativeButton.tsx

@@ -0,0 +1,16 @@
+import { PureNativeButton as RNGHPureNativeButton, RawButtonProps } from 'react-native-gesture-handler'
+import { copyComponentProperties } from '../../utils'
+import { useStyle } from '../useStyle'
+
+export const PureNativeButton = copyComponentProperties(RNGHPureNativeButton, (props: RawButtonProps) => {
+    const style = useStyle(props.className)
+
+    return (
+        <RNGHPureNativeButton
+            {...props}
+            style={[style, props.style]}
+        />
+    )
+})
+
+export default PureNativeButton

package/src/components/native/react-native-gesture-handler/RawButton.tsx

@@ -0,0 +1,16 @@
+import { RawButton as RNGHRawButton, RawButtonProps } from 'react-native-gesture-handler'
+import { copyComponentProperties } from '../../utils'
+import { useStyle } from '../useStyle'
+
+export const RawButton = copyComponentProperties(RNGHRawButton, (props: RawButtonProps) => {
+    const style = useStyle(props.className)
+
+    return (
+        <RNGHRawButton
+            {...props}
+            style={[style, props.style]}
+        />
+    )
+})
+
+export default RawButton

package/src/components/native/react-native-gesture-handler/RectButton.tsx

@@ -0,0 +1,16 @@
+import { RectButton as RNGHRectButton, RectButtonProps } from 'react-native-gesture-handler'
+import { copyComponentProperties } from '../../utils'
+import { useStyle } from '../useStyle'
+
+export const RectButton = copyComponentProperties(RNGHRectButton, (props: RectButtonProps) => {
+    const style = useStyle(props.className)
+
+    return (
+        <RNGHRectButton
+            {...props}
+            style={[style, props.style]}
+        />
+    )
+})
+
+export default RectButton

package/src/components/native/react-native-gesture-handler/RefreshControl.tsx

@@ -0,0 +1,26 @@
+import { RefreshControlProps } from 'react-native'
+import { RefreshControl as RNGHRefreshControl } from 'react-native-gesture-handler'
+import { useUniwindAccent } from '../../../hooks'
+import { copyComponentProperties } from '../../utils'
+import { useStyle } from '../useStyle'
+
+export const RefreshControl = copyComponentProperties(RNGHRefreshControl, (props: RefreshControlProps) => {
+    const style = useStyle(props.className)
+    const color = useUniwindAccent(props.colorsClassName)
+    const tintColor = useUniwindAccent(props.tintColorClassName)
+    const titleColor = useUniwindAccent(props.titleColorClassName)
+    const progressBackgroundColor = useUniwindAccent(props.progressBackgroundColorClassName)
+
+    return (
+        <RNGHRefreshControl
+            {...props}
+            style={[style, props.style]}
+            colors={props.colors ?? (color !== undefined ? [color] : undefined)}
+            tintColor={props.tintColor ?? tintColor}
+            titleColor={props.titleColor ?? titleColor}
+            progressBackgroundColor={props.progressBackgroundColor ?? progressBackgroundColor}
+        />
+    )
+})
+
+export default RefreshControl

package/src/components/native/react-native-gesture-handler/ScrollView.tsx

@@ -0,0 +1,22 @@
+import { ScrollViewProps } from 'react-native'
+import { ScrollView as RNGHScrollView } from 'react-native-gesture-handler'
+import { useUniwindAccent } from '../../../hooks'
+import { copyComponentProperties } from '../../utils'
+import { useStyle } from '../useStyle'
+
+export const ScrollView = copyComponentProperties(RNGHScrollView, (props: ScrollViewProps) => {
+    const style = useStyle(props.className)
+    const contentContainerStyle = useStyle(props.contentContainerClassName)
+    const endFillColor = useUniwindAccent(props.endFillColorClassName)
+
+    return (
+        <RNGHScrollView
+            {...props}
+            style={[style, props.style]}
+            contentContainerStyle={[contentContainerStyle, props.contentContainerStyle]}
+            endFillColor={props.endFillColor ?? endFillColor}
+        />
+    )
+})
+
+export default ScrollView

package/src/components/native/react-native-gesture-handler/Switch.tsx

@@ -0,0 +1,29 @@
+import { SwitchProps } from 'react-native'
+import { Switch as RNGHSwitch } from 'react-native-gesture-handler'
+import { ComponentState } from '../../../core/types'
+import { useUniwindAccent } from '../../../hooks/useUniwindAccent.native'
+import { copyComponentProperties } from '../../utils'
+import { useStyle } from '../useStyle'
+
+export const Switch = copyComponentProperties(RNGHSwitch, (props: SwitchProps) => {
+    const state = {
+        isDisabled: Boolean(props.disabled),
+    } satisfies ComponentState
+    const style = useStyle(props.className, state)
+    const trackColorOn = useUniwindAccent(props.trackColorOnClassName, state)
+    const trackColorOff = useUniwindAccent(props.trackColorOffClassName, state)
+    const thumbColor = useUniwindAccent(props.thumbColorClassName, state)
+    const ios_backgroundColor = useUniwindAccent(props.ios_backgroundColorClassName, state)
+
+    return (
+        <RNGHSwitch
+            {...props}
+            style={[style, props.style]}
+            thumbColor={props.thumbColor ?? thumbColor}
+            trackColor={{ true: props.trackColor?.true ?? trackColorOn, false: props.trackColor?.false ?? trackColorOff }}
+            ios_backgroundColor={props.ios_backgroundColor ?? ios_backgroundColor}
+        />
+    )
+})
+
+export default Switch

package/src/components/native/react-native-gesture-handler/Text.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react'
+import { TextProps } from 'react-native'
+import { Text as RNGHText } from 'react-native-gesture-handler'
+import { ComponentState } from '../../../core/types'
+import { useUniwindAccent } from '../../../hooks/useUniwindAccent.native'
+import { copyComponentProperties } from '../../utils'
+import { useStyle } from '../useStyle'
+
+type StyleWithWebkitLineClamp = {
+    WebkitLineClamp?: number
+}
+
+export const Text = copyComponentProperties(RNGHText, (props: TextProps) => {
+    const [isPressed, setIsPressed] = useState(false)
+    const state = {
+        isPressed,
+        isDisabled: Boolean(props.disabled),
+    } satisfies ComponentState
+    const style = useStyle(props.className, state)
+    const selectionColor = useUniwindAccent(props.selectionColorClassName, state)
+
+    return (
+        <RNGHText
+            {...props}
+            style={[style, props.style]}
+            selectionColor={props.selectionColor ?? selectionColor}
+            numberOfLines={(style as StyleWithWebkitLineClamp).WebkitLineClamp ?? props.numberOfLines}
+            onPressIn={event => {
+                setIsPressed(true)
+                props.onPressIn?.(event)
+            }}
+            onPressOut={event => {
+                setIsPressed(false)
+                props.onPressOut?.(event)
+            }}
+        />
+    )
+})
+
+export default Text

package/src/components/native/react-native-gesture-handler/TextInput.tsx

@@ -0,0 +1,53 @@
+import { useState } from 'react'
+import { TextInputProps } from 'react-native'
+import { TextInput as RNGHTextInput } from 'react-native-gesture-handler'
+import { ComponentState } from '../../../core/types'
+import { useUniwindAccent } from '../../../hooks/useUniwindAccent.native'
+import { copyComponentProperties } from '../../utils'
+import { useStyle } from '../useStyle'
+
+export const TextInput = copyComponentProperties(RNGHTextInput, (props: TextInputProps) => {
+    const [isFocused, setIsFocused] = useState(false)
+    const [isPressed, setIsPressed] = useState(false)
+    const state = {
+        isDisabled: props.editable === false,
+        isFocused,
+        isPressed,
+    } satisfies ComponentState
+    const style = useStyle(props.className, state)
+    const cursorColor = useUniwindAccent(props.cursorColorClassName, state)
+    const selectionColor = useUniwindAccent(props.selectionColorClassName, state)
+    const placeholderTextColor = useUniwindAccent(props.placeholderTextColorClassName, state)
+    const selectionHandleColor = useUniwindAccent(props.selectionHandleColorClassName, state)
+    const underlineColorAndroid = useUniwindAccent(props.underlineColorAndroidClassName, state)
+
+    return (
+        <RNGHTextInput
+            {...props}
+            style={[style, props.style]}
+            cursorColor={props.cursorColor ?? cursorColor}
+            selectionColor={props.selectionColor ?? selectionColor}
+            placeholderTextColor={props.placeholderTextColor ?? placeholderTextColor}
+            selectionHandleColor={props.selectionHandleColor ?? selectionHandleColor}
+            underlineColorAndroid={props.underlineColorAndroid ?? underlineColorAndroid}
+            onFocus={event => {
+                setIsFocused(true)
+                props.onFocus?.(event)
+            }}
+            onBlur={event => {
+                setIsFocused(false)
+                props.onBlur?.(event)
+            }}
+            onPressIn={event => {
+                setIsPressed(true)
+                props.onPressIn?.(event)
+            }}
+            onPressOut={event => {
+                setIsPressed(false)
+                props.onPressOut?.(event)
+            }}
+        />
+    )
+})
+
+export default TextInput

package/src/components/native/react-native-gesture-handler/TouchableNativeFeedback.tsx

@@ -0,0 +1,35 @@
+import { useState } from 'react'
+import { TouchableNativeFeedbackProps } from 'react-native'
+import { TouchableNativeFeedback as RNGHTouchableNativeFeedback } from 'react-native-gesture-handler'
+import { ComponentState } from '../../../core/types'
+import { copyComponentProperties } from '../../utils'
+import { useStyle } from '../useStyle'
+
+export const TouchableNativeFeedback = copyComponentProperties(
+    RNGHTouchableNativeFeedback,
+    (props: TouchableNativeFeedbackProps) => {
+        const [isPressed, setIsPressed] = useState(false)
+        const state = {
+            isDisabled: Boolean(props.disabled),
+            isPressed,
+        } satisfies ComponentState
+        const style = useStyle(props.className, state)
+
+        return (
+            <RNGHTouchableNativeFeedback
+                {...props}
+                style={[style, props.style]}
+                onPressIn={event => {
+                    setIsPressed(true)
+                    props.onPressIn?.(event)
+                }}
+                onPressOut={event => {
+                    setIsPressed(false)
+                    props.onPressOut?.(event)
+                }}
+            />
+        )
+    },
+)
+
+export default TouchableNativeFeedback

package/src/components/native/react-native-gesture-handler/TouchableOpacity.tsx

@@ -0,0 +1,34 @@
+import { useState } from 'react'
+import { TouchableOpacity as RNGHTouchableOpacity, TouchableOpacityProps } from 'react-native-gesture-handler'
+import { ComponentState } from '../../../core/types'
+import { copyComponentProperties } from '../../utils'
+import { useStyle } from '../useStyle'
+
+export const TouchableOpacity = copyComponentProperties(
+    RNGHTouchableOpacity,
+    (props: TouchableOpacityProps) => {
+        const [isPressed, setIsPressed] = useState(false)
+        const state = {
+            isDisabled: Boolean(props.disabled),
+            isPressed,
+        } satisfies ComponentState
+        const style = useStyle(props.className, state)
+
+        return (
+            <RNGHTouchableOpacity
+                {...props}
+                style={[style, props.style]}
+                onPressIn={() => {
+                    setIsPressed(true)
+                    props.onPressIn?.()
+                }}
+                onPressOut={() => {
+                    setIsPressed(false)
+                    props.onPressOut?.()
+                }}
+            />
+        )
+    },
+)
+
+export default TouchableOpacity

package/src/components/native/react-native-gesture-handler/TouchableWithoutFeedback.tsx

@@ -0,0 +1,37 @@
+import { useState } from 'react'
+import {
+    TouchableWithoutFeedback as RNGHTouchableWithoutFeedback,
+    TouchableWithoutFeedbackProps,
+} from 'react-native-gesture-handler'
+import { ComponentState } from '../../../core/types'
+import { copyComponentProperties } from '../../utils'
+import { useStyle } from '../useStyle'
+
+export const TouchableWithoutFeedback = copyComponentProperties(
+    RNGHTouchableWithoutFeedback,
+    (props: TouchableWithoutFeedbackProps) => {
+        const [isPressed, setIsPressed] = useState(false)
+        const state = {
+            isDisabled: Boolean(props.disabled),
+            isPressed,
+        } satisfies ComponentState
+        const style = useStyle(props.className, state)
+
+        return (
+            <RNGHTouchableWithoutFeedback
+                {...props}
+                style={[style, props.style]}
+                onPressIn={() => {
+                    setIsPressed(true)
+                    props.onPressIn?.()
+                }}
+                onPressOut={() => {
+                    setIsPressed(false)
+                    props.onPressOut?.()
+                }}
+            />
+        )
+    },
+)
+
+export default TouchableWithoutFeedback

package/src/components/native/react-native-gesture-handler/index.ts

@@ -0,0 +1,121 @@
+module.exports = {
+    get BaseButton() {
+        return require('./BaseButton').BaseButton
+    },
+    get BorderlessButton() {
+        return require('./BorderlessButton').BorderlessButton
+    },
+    get DrawerLayoutAndroid() {
+        return require('./DrawerLayoutAndroid').DrawerLayoutAndroid
+    },
+    get FlatList() {
+        return require('./FlatList').FlatList
+    },
+    get GestureHandlerRootView() {
+        return require('./GestureHandlerRootView').GestureHandlerRootView
+    },
+    get Pressable() {
+        return require('./Pressable').Pressable
+    },
+    get PureNativeButton() {
+        return require('./PureNativeButton').PureNativeButton
+    },
+    get RawButton() {
+        return require('./RawButton').RawButton
+    },
+    get RectButton() {
+        return require('./RectButton').RectButton
+    },
+    get RefreshControl() {
+        return require('./RefreshControl').RefreshControl
+    },
+    get ScrollView() {
+        return require('./ScrollView').ScrollView
+    },
+    get Switch() {
+        return require('./Switch').Switch
+    },
+    get Text() {
+        return require('./Text').Text
+    },
+    get TextInput() {
+        return require('./TextInput').TextInput
+    },
+    get TouchableNativeFeedback() {
+        return require('./TouchableNativeFeedback').TouchableNativeFeedback
+    },
+    get TouchableOpacity() {
+        return require('./TouchableOpacity').TouchableOpacity
+    },
+    get TouchableWithoutFeedback() {
+        return require('./TouchableWithoutFeedback').TouchableWithoutFeedback
+    },
+
+    // Re-export non-component exports from react-native-gesture-handler
+    get DrawerLayout() {
+        return require('react-native-gesture-handler').DrawerLayout
+    },
+    get Swipeable() {
+        return require('react-native-gesture-handler').Swipeable
+    },
+    get TouchableHighlight() {
+        return require('react-native-gesture-handler').TouchableHighlight
+    },
+    get Directions() {
+        return require('react-native-gesture-handler').Directions
+    },
+    get State() {
+        return require('react-native-gesture-handler').State
+    },
+    get PointerType() {
+        return require('react-native-gesture-handler').PointerType
+    },
+    get gestureHandlerRootHOC() {
+        return require('react-native-gesture-handler').gestureHandlerRootHOC
+    },
+    get GestureDetector() {
+        return require('react-native-gesture-handler').GestureDetector
+    },
+    get Gesture() {
+        return require('react-native-gesture-handler').Gesture
+    },
+    get TapGestureHandler() {
+        return require('react-native-gesture-handler').TapGestureHandler
+    },
+    get ForceTouchGestureHandler() {
+        return require('react-native-gesture-handler').ForceTouchGestureHandler
+    },
+    get LongPressGestureHandler() {
+        return require('react-native-gesture-handler').LongPressGestureHandler
+    },
+    get PanGestureHandler() {
+        return require('react-native-gesture-handler').PanGestureHandler
+    },
+    get PinchGestureHandler() {
+        return require('react-native-gesture-handler').PinchGestureHandler
+    },
+    get RotationGestureHandler() {
+        return require('react-native-gesture-handler').RotationGestureHandler
+    },
+    get FlingGestureHandler() {
+        return require('react-native-gesture-handler').FlingGestureHandler
+    },
+    get createNativeWrapper() {
+        return require('react-native-gesture-handler').createNativeWrapper
+    },
+    get NativeViewGestureHandler() {
+        return require('react-native-gesture-handler').NativeViewGestureHandler
+    },
+    get HoverEffect() {
+        return require('react-native-gesture-handler').HoverEffect
+    },
+    get MouseButton() {
+        return require('react-native-gesture-handler').MouseButton
+    },
+    get enableExperimentalWebImplementation() {
+        return require('react-native-gesture-handler').enableExperimentalWebImplementation
+    },
+    get enableLegacyWebImplementation() {
+        return require('react-native-gesture-handler').enableLegacyWebImplementation
+    },
+}

package/src/components/native/react-native-svg/Svg.tsx

@@ -0,0 +1,16 @@
+import { Svg as RNSvg, SvgProps } from 'react-native-svg'
+import { copyComponentProperties } from '../../utils'
+import { useStyle } from '../useStyle'
+
+export const Svg = copyComponentProperties(RNSvg, (props: SvgProps) => {
+    const style = useStyle(props.className)
+
+    return (
+        <RNSvg
+            {...props}
+            style={[style, props.style]}
+        />
+    )
+})
+
+export default Svg

package/src/components/native/react-native-svg/index.ts

@@ -0,0 +1,5 @@
+// Re-export everything from react-native-svg
+export * from 'react-native-svg'
+
+export { Svg } from './Svg'
+export { default } from './Svg'

package/src/core/native/runtime.ts

@@ -1,4 +1,5 @@
 import { Appearance, Dimensions, I18nManager, PixelRatio, StyleSheet } from 'react-native'
+import { initialWindowMetrics } from 'react-native-safe-area-context'
 import { ColorScheme, Orientation } from '../../types'
 import type { UniwindRuntime as UniwindRuntimeType } from '../types'
 import { colorMix, lightDark } from './native-utils'
@@ -17,12 +18,7 @@ export const UniwindRuntime = {
     fontScale: value => value * PixelRatio.getFontScale(),
     hairlineWidth: StyleSheet.hairlineWidth,
     rtl: I18nManager.isRTL,
-    insets: {
-        top: 0,
-        left: 0,
-        bottom: 0,
-        right: 0,
-    },
+    insets: initialWindowMetrics?.insets ?? { top: 0, left: 0, bottom: 0, right: 0 },
     colorMix,
     pixelRatio: value => value * PixelRatio.get(),
     cubicBezier: () => '',