@niibase/uniwind 1.0.0

package/readme.md

@@ -0,0 +1,71 @@
+[<img alt="uniwind" src="assets/banner.png">](https://uniwind.dev/)
+
+<div align="center">
+    <p align="center">
+        <a href="https://uniwind.dev/" target="_blank">
+            <h1 align="center" style="color:red;">Uniwind</h1>
+            <span>The fastest Tailwind bindings for React Native</span>
+        </a>
+    </p>
+</div>
+<br />
+
+![npm version](https://img.shields.io/npm/v/uniwind?style=for-the-badge)
+[![npm downloads](https://img.shields.io/npm/dm/uniwind?style=for-the-badge)](https://www.npmjs.com/package/uniwind)
+[![npm downloads](https://img.shields.io/npm/dt/uniwind?style=for-the-badge)](https://www.npmjs.com/package/uniwind)
+[![License: MIT](https://img.shields.io/badge/License-MIT-44CD11.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)
+
+> **Note:** This is a fork of uniwind that makes pro subscription features available for free (except for Unistyles support). Install from `@niibase/uniwind` to get these features.
+
+## Installation
+
+```sh
+# Install from the fork (recommended - includes pro features for free)
+bun add @niibase/uniwind tailwindcss
+
+# Or install from the original package
+bun add uniwind tailwindcss
+```
+
+Then follow [installation guides](https://docs.uniwind.dev/quickstart)
+
+## Documentation
+
+- [Start here](https://docs.uniwind.dev/)
+- [Theming Basics](https://docs.uniwind.dev/theming/basics)
+- [Supported classNames](https://docs.uniwind.dev/class-names)
+- [Pro Version](https://docs.uniwind.dev/pro-version)
+
+## Features
+
+- ⚛️ Out‑of‑the‑box `className` bindings for every React Native component  
+- ⚡ Styles are computed at build time for maximum performance  
+- 🌙 Dark mode and 🎨 fully customizable themes
+- 🧩 Pseudo‑classes support — `focus`, `active`, `disabled`, and more
+- 📱 Responsive design with media queries
+- 🧰 Use custom CSS properties directly in React Native
+- 🔥 And [much more](https://docs.uniwind.dev/api/use-uniwind)
+
+## Roadmap
+
+- [ ] **Reanimated 4 support** - Full compatibility with React Native Reanimated v4
+- [ ] **Babel support to extend beyond React Native components** - Enable className support for custom components and third-party libraries
+- [ ] **Unistyles (future)** - Integration with Unistyles for enhanced styling capabilities
+
+> **Note:** Once Babel support is completed, the likelihood of adding Unistyles support is high.
+
+## Contributing
+
+Contributions are welcome!
+
+### How to contribute
+
+- Bug Fixes: Check our [Issues](https://github.com/uni-stack/uniwind/issues) for any bugs that need fixing. Make sure to ask before working on an issue.
+- New Features: If you have an idea for a new feature, please open discussion first to get feedback from the community.
+- Refactor and Improvements: If you see areas of the code that could be improved or refactored, open discussion or reach out to the maintainers before making significant changes.
+
+Pull Request that do not follow these guidelines may be closed or not reviewed.
+
+## License
+
+MIT

package/src/components/index.ts

@@ -0,0 +1,313 @@
+module.exports = {
+    get ActivityIndicator() {
+        return require('./native/ActivityIndicator').ActivityIndicator
+    },
+    get Button() {
+        return require('./native/Button').Button
+    },
+    get FlatList() {
+        return require('./native/FlatList').FlatList
+    },
+    get Image() {
+        return require('./native/Image').Image
+    },
+    get ImageBackground() {
+        return require('./native/ImageBackground').ImageBackground
+    },
+    get InputAccessoryView() {
+        return require('./native/InputAccessoryView').InputAccessoryView
+    },
+    get KeyboardAvoidingView() {
+        return require('./native/KeyboardAvoidingView').KeyboardAvoidingView
+    },
+    get Modal() {
+        return require('./native/Modal').Modal
+    },
+    get Pressable() {
+        return require('./native/Pressable').Pressable
+    },
+    get RefreshControl() {
+        return require('./native/RefreshControl').RefreshControl
+    },
+    get SafeAreaView() {
+        return require('./native/SafeAreaView').SafeAreaView
+    },
+    get ScrollView() {
+        return require('./native/ScrollView').ScrollView
+    },
+    get SectionList() {
+        return require('./native/SectionList').SectionList
+    },
+    get Switch() {
+        return require('./native/Switch').Switch
+    },
+    get Text() {
+        return require('./native/Text').Text
+    },
+    get TextInput() {
+        return require('./native/TextInput').TextInput
+    },
+    get TouchableHighlight() {
+        return require('./native/TouchableHighlight').TouchableHighlight
+    },
+    get TouchableNativeFeedback() {
+        return require('./native/TouchableNativeFeedback').TouchableNativeFeedback
+    },
+    get TouchableOpacity() {
+        return require('./native/TouchableOpacity').TouchableOpacity
+    },
+    get TouchableWithoutFeedback() {
+        return require('./native/TouchableWithoutFeedback').TouchableWithoutFeedback
+    },
+    get View() {
+        return require('./native/View').View
+    },
+    get VirtualizedList() {
+        return require('./native/VirtualizedList').VirtualizedList
+    },
+
+    // Unsupported
+    get DrawerLayoutAndroid() {
+        return require('react-native').DrawerLayoutAndroid
+    },
+    get experimental_LayoutConformance() {
+        return require('react-native').experimental_LayoutConformance
+    },
+    get ProgressBarAndroid() {
+        return require('react-native').ProgressBarAndroid
+    },
+    get StatusBar() {
+        return require('react-native').StatusBar
+    },
+    get unstable_TextAncestorContext() {
+        return require('react-native').unstable_TextAncestorContext
+    },
+    get Touchable() {
+        return require('react-native').Touchable
+    },
+    get VirtualizedSectionList() {
+        return require('react-native').VirtualizedSectionList
+    },
+    get unstable_VirtualView() {
+        return require('react-native').unstable_VirtualView
+    },
+    get AccessibilityInfo() {
+        return require('react-native').AccessibilityInfo
+    },
+    get ActionSheetIOS() {
+        return require('react-native').ActionSheetIOS
+    },
+    get Alert() {
+        return require('react-native').Alert
+    },
+    get Animated() {
+        return require('react-native').Animated
+    },
+    get Appearance() {
+        return require('react-native').Appearance
+    },
+    get AppRegistry() {
+        return require('react-native').AppRegistry
+    },
+    get AppState() {
+        return require('react-native').AppState
+    },
+    get BackHandler() {
+        return require('react-native').BackHandler
+    },
+    get Clipboard() {
+        return require('react-native').Clipboard
+    },
+    get codegenNativeCommands() {
+        return require('react-native').codegenNativeCommands
+    },
+    get codegenNativeComponent() {
+        return require('react-native').codegenNativeComponent
+    },
+    get DeviceEventEmitter() {
+        return require('react-native').DeviceEventEmitter
+    },
+    get DeviceInfo() {
+        return require('react-native').DeviceInfo
+    },
+    get DevMenu() {
+        return require('react-native').DevMenu
+    },
+    get DevSettings() {
+        return require('react-native').DevSettings
+    },
+    get Dimensions() {
+        return require('react-native').Dimensions
+    },
+    get DynamicColorIOS() {
+        return require('react-native').DynamicColorIOS
+    },
+    get Easing() {
+        return require('react-native').Easing
+    },
+    get findNodeHandle() {
+        return require('react-native').findNodeHandle
+    },
+    get I18nManager() {
+        return require('react-native').I18nManager
+    },
+    get InteractionManager() {
+        return require('react-native').InteractionManager
+    },
+    get Keyboard() {
+        return require('react-native').Keyboard
+    },
+    get LayoutAnimation() {
+        return require('react-native').LayoutAnimation
+    },
+    get Linking() {
+        return require('react-native').Linking
+    },
+    get LogBox() {
+        return require('react-native').LogBox
+    },
+    get NativeAppEventEmitter() {
+        return require('react-native').NativeAppEventEmitter
+    },
+    get NativeDialogManagerAndroid() {
+        return require('react-native').NativeDialogManagerAndroid
+    },
+    get NativeEventEmitter() {
+        return require('react-native').NativeEventEmitter
+    },
+    get NativeModules() {
+        return require('react-native').NativeModules
+    },
+    get Networking() {
+        return require('react-native').Networking
+    },
+    get PanResponder() {
+        return require('react-native').PanResponder
+    },
+    get PermissionsAndroid() {
+        return require('react-native').PermissionsAndroid
+    },
+    get PixelRatio() {
+        return require('react-native').PixelRatio
+    },
+    get Platform() {
+        return require('react-native').Platform
+    },
+    get PlatformColor() {
+        return require('react-native').PlatformColor
+    },
+    get PushNotificationIOS() {
+        return require('react-native').PushNotificationIOS
+    },
+    get processColor() {
+        return require('react-native').processColor
+    },
+    get registerCallableModule() {
+        return require('react-native').registerCallableModule
+    },
+    get requireNativeComponent() {
+        return require('react-native').requireNativeComponent
+    },
+    get RootTagContext() {
+        return require('react-native').RootTagContext
+    },
+    get Settings() {
+        return require('react-native').Settings
+    },
+    get Share() {
+        return require('react-native').Share
+    },
+    get StyleSheet() {
+        return require('react-native').StyleSheet
+    },
+    get Systrace() {
+        return require('react-native').Systrace
+    },
+    get ToastAndroid() {
+        return require('react-native').ToastAndroid
+    },
+    get TurboModuleRegistry() {
+        return require('react-native').TurboModuleRegistry
+    },
+    get UIManager() {
+        return require('react-native').UIManager
+    },
+    get unstable_batchedUpdates() {
+        return require('react-native').unstable_batchedUpdates
+    },
+    get useAnimatedValue() {
+        return require('react-native').useAnimatedValue
+    },
+    get useColorScheme() {
+        return require('react-native').useColorScheme
+    },
+    get useWindowDimensions() {
+        return require('react-native').useWindowDimensions
+    },
+    get UTFSequence() {
+        return require('react-native').UTFSequence
+    },
+    get Vibration() {
+        return require('react-native').Vibration
+    },
+    get VirtualViewMode() {
+        return require('react-native').VirtualViewMode
+    },
+    get NativeComponentRegistry() {
+        return require('react-native').NativeComponentRegistry
+    },
+    get ReactNativeVersion() {
+        return require('react-native').ReactNativeVersion
+    },
+    get TVEventControl() {
+        return require('react-native').TVEventControl
+    },
+    get TVEventHandler() {
+        return require('react-native').TVEventHandler
+    },
+    get useTVEventHandler() {
+        return require('react-native').useTVEventHandler
+    },
+    get TVFocusGuideView() {
+        return require('react-native').TVFocusGuideView
+    },
+    get TVMenuControl() {
+        return require('react-native').TVMenuControl
+    },
+    get TVTextScrollView() {
+        return require('react-native').TVTextScrollView
+    },
+    get DynamicColorMacOS() {
+        return require('react-native').DynamicColorMacOS
+    },
+    get ColorWithSystemEffectMacOS() {
+        return require('react-native').ColorWithSystemEffectMacOS
+    },
+    get Flyout() {
+        return require('react-native').Flyout
+    },
+    get Glyph() {
+        return require('react-native').Glyph
+    },
+    get Popup() {
+        return require('react-native').Popup
+    },
+    get supportKeyboard() {
+        return require('react-native').supportKeyboard
+    },
+    get EventPhase() {
+        return require('react-native').EventPhase
+    },
+    get HandledEventPhase() {
+        return require('react-native').HandledEventPhase
+    },
+    get ViewWindows() {
+        return require('react-native').ViewWindows
+    },
+    get AppTheme() {
+        return require('react-native').AppTheme
+    },
+    get XamlHost() {
+        return require('react-native').XamlHost
+    },
+}

package/src/components/native/ActivityIndicator.tsx

@@ -0,0 +1,19 @@
+import { ActivityIndicator as RNActivityIndicator, ActivityIndicatorProps } from 'react-native'
+import { useUniwindAccent } from '../../hooks'
+import { copyComponentProperties } from '../utils'
+import { useStyle } from './useStyle'
+
+export const ActivityIndicator = copyComponentProperties(RNActivityIndicator, (props: ActivityIndicatorProps) => {
+    const style = useStyle(props.className)
+    const color = useUniwindAccent(props.colorClassName)
+
+    return (
+        <RNActivityIndicator
+            {...props}
+            style={[style, props.style]}
+            color={props.color ?? color}
+        />
+    )
+})
+
+export default ActivityIndicator

package/src/components/native/Button.tsx

@@ -0,0 +1,16 @@
+import { Button as RNButton, ButtonProps } from 'react-native'
+import { useUniwindAccent } from '../../hooks'
+import { copyComponentProperties } from '../utils'
+
+export const Button = copyComponentProperties(RNButton, (props: ButtonProps) => {
+    const color = useUniwindAccent(props.colorClassName)
+
+    return (
+        <RNButton
+            {...props}
+            color={props.color ?? color}
+        />
+    )
+})
+
+export default Button

package/src/components/native/FlatList.tsx

@@ -0,0 +1,28 @@
+import { FlatList as RNFlatList, FlatListProps } from 'react-native'
+import { useUniwindAccent } from '../../hooks'
+import { copyComponentProperties } from '../utils'
+import { useStyle } from './useStyle'
+
+export const FlatList = copyComponentProperties(RNFlatList, (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 (
+        <RNFlatList
+            {...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/Image.tsx

@@ -0,0 +1,19 @@
+import { Image as RNImage, ImageProps } from 'react-native'
+import { useUniwindAccent } from '../../hooks'
+import { copyComponentProperties } from '../utils'
+import { useStyle } from './useStyle'
+
+export const Image = copyComponentProperties(RNImage, (props: ImageProps) => {
+    const style = useStyle(props.className)
+    const tintColor = useUniwindAccent(props.tintColorClassName)
+
+    return (
+        <RNImage
+            {...props}
+            style={[style, props.style]}
+            tintColor={props.tintColor ?? tintColor}
+        />
+    )
+})
+
+export default Image

package/src/components/native/ImageBackground.tsx

@@ -0,0 +1,21 @@
+import { ImageBackground as RNImageBackground, ImageBackgroundProps } from 'react-native'
+import { useUniwindAccent } from '../../hooks'
+import { copyComponentProperties } from '../utils'
+import { useStyle } from './useStyle'
+
+export const ImageBackground = copyComponentProperties(RNImageBackground, (props: ImageBackgroundProps) => {
+    const style = useStyle(props.className)
+    const imageStyle = useStyle(props.imageClassName)
+    const tintColor = useUniwindAccent(props.tintColorClassName)
+
+    return (
+        <RNImageBackground
+            {...props}
+            style={[style, props.style]}
+            imageStyle={[imageStyle, props.imageStyle]}
+            tintColor={props.tintColor ?? tintColor}
+        />
+    )
+})
+
+export default ImageBackground

package/src/components/native/InputAccessoryView.tsx

@@ -0,0 +1,23 @@
+import { ForwardedRef } from 'react'
+import { InputAccessoryView as RNInputAccessoryView, InputAccessoryViewProps } from 'react-native'
+import { useUniwindAccent } from '../../hooks'
+import { copyComponentProperties } from '../utils'
+import { useStyle } from './useStyle'
+
+export const InputAccessoryView = copyComponentProperties(
+    RNInputAccessoryView,
+    (props: InputAccessoryViewProps & { ref?: ForwardedRef<RNInputAccessoryView> }) => {
+        const style = useStyle(props.className)
+        const backgroundColor = useUniwindAccent(props.backgroundColorClassName)
+
+        return (
+            <RNInputAccessoryView
+                {...props}
+                backgroundColor={props.backgroundColor ?? backgroundColor}
+                style={[style, props.style]}
+            />
+        )
+    },
+)
+
+export default InputAccessoryView

package/src/components/native/KeyboardAvoidingView.tsx

@@ -0,0 +1,18 @@
+import { KeyboardAvoidingView as RNKeyboardAvoidingView, KeyboardAvoidingViewProps } from 'react-native'
+import { copyComponentProperties } from '../utils'
+import { useStyle } from './useStyle'
+
+export const KeyboardAvoidingView = copyComponentProperties(RNKeyboardAvoidingView, (props: KeyboardAvoidingViewProps) => {
+    const style = useStyle(props.className)
+    const contentContainerStyle = useStyle(props.contentContainerClassName)
+
+    return (
+        <RNKeyboardAvoidingView
+            {...props}
+            style={[style, props.style]}
+            contentContainerStyle={[contentContainerStyle, props.contentContainerStyle]}
+        />
+    )
+})
+
+export default KeyboardAvoidingView

package/src/components/native/Modal.tsx

@@ -0,0 +1,19 @@
+import { Modal as RNModal, ModalProps } from 'react-native'
+import { useUniwindAccent } from '../../hooks'
+import { copyComponentProperties } from '../utils'
+import { useStyle } from './useStyle'
+
+export const Modal = copyComponentProperties(RNModal, (props: ModalProps) => {
+    const style = useStyle(props.className)
+    const backdropColor = useUniwindAccent(props.backdropColorClassName)
+
+    return (
+        <RNModal
+            {...props}
+            style={[style, props.style]}
+            backdropColor={props.backdropColor ?? backdropColor}
+        />
+    )
+})
+
+export default Modal

package/src/components/native/Pressable.tsx

@@ -0,0 +1,31 @@
+import { Pressable as RNPressable, PressableProps } from 'react-native'
+import { UniwindStore } from '../../core/native'
+import { copyComponentProperties } from '../utils'
+import { useStyle } from './useStyle'
+
+export const Pressable = copyComponentProperties(RNPressable, (props: PressableProps) => {
+    const style = useStyle(props.className, {
+        isDisabled: Boolean(props.disabled),
+    })
+
+    return (
+        <RNPressable
+            {...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/RefreshControl.tsx

@@ -0,0 +1,25 @@
+import { RefreshControl as RNRefreshControl, RefreshControlProps } from 'react-native'
+import { useUniwindAccent } from '../../hooks'
+import { copyComponentProperties } from '../utils'
+import { useStyle } from './useStyle'
+
+export const RefreshControl = copyComponentProperties(RNRefreshControl, (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 (
+        <RNRefreshControl
+            {...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/SafeAreaView.tsx

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

package/src/components/native/ScrollView.tsx

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

package/src/components/native/SectionList.tsx

@@ -0,0 +1,25 @@
+import { SectionList as RNSectionList, SectionListProps } from 'react-native'
+import { useUniwindAccent } from '../../hooks'
+import { copyComponentProperties } from '../utils'
+import { useStyle } from './useStyle'
+
+export const SectionList = copyComponentProperties(RNSectionList, (props: SectionListProps<unknown, unknown>) => {
+    const style = useStyle(props.className)
+    const contentContainerStyle = useStyle(props.contentContainerClassName)
+    const listFooterComponentStyle = useStyle(props.ListFooterComponentClassName)
+    const listHeaderComponentStyle = useStyle(props.ListHeaderComponentClassName)
+    const endFillColor = useUniwindAccent(props.endFillColorClassName)
+
+    return (
+        <RNSectionList
+            {...props}
+            style={[style, props.style]}
+            contentContainerStyle={[contentContainerStyle, props.contentContainerStyle]}
+            ListFooterComponentStyle={[listFooterComponentStyle, props.ListFooterComponentStyle]}
+            ListHeaderComponentStyle={[listHeaderComponentStyle, props.ListHeaderComponentStyle]}
+            endFillColor={props.endFillColor ?? endFillColor}
+        />
+    )
+})
+
+export default SectionList