@uwayss/lightui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 uwayss
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,26 @@
+# lightui
+
+Lightweight native SwiftUI and Jetpack Compose components for React Native and Expo.
+
+```sh
+npm install @uwayss/lightui
+```
+
+```tsx
+import { Button, Picker, Slider } from '@uwayss/lightui';
+
+export function Example() {
+  return (
+    <>
+      <Picker items={['Small', 'Medium', 'Large']} selectedIndex={1} style={{ width: 220 }} />
+      <Slider value={0.5} minimumValue={0} maximumValue={1} style={{ width: 220 }} />
+      <Button title="Continue" disabled={false} />
+    </>
+  );
+}
+```
+
+## Documentation
+
+- [Usage](docs/usage.md)
+- [Development](docs/development.md)

package/android/build.gradle

@@ -0,0 +1,36 @@
+buildscript {
+  repositories {
+    mavenCentral()
+  }
+  dependencies {
+    classpath("org.jetbrains.kotlin.plugin.compose:org.jetbrains.kotlin.plugin.compose.gradle.plugin:${kotlinVersion}")
+  }
+}
+
+plugins {
+  id 'com.android.library'
+  id 'expo-module-gradle-plugin'
+}
+
+apply plugin: 'org.jetbrains.kotlin.plugin.compose'
+
+group = 'com.uwayss.lightui'
+version = '0.1.0'
+
+android {
+  namespace "com.uwayss.lightui"
+  defaultConfig {
+    versionCode 1
+    versionName "0.1.0"
+  }
+  lintOptions {
+    abortOnError false
+  }
+  buildFeatures {
+    compose true
+  }
+}
+
+dependencies {
+  implementation 'androidx.compose.material3:material3:1.3.1'
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest>
+</manifest>

package/android/src/main/java/com/uwayss/lightui/LightUIButtonView.kt

@@ -0,0 +1,45 @@
+package com.uwayss.lightui
+
+import android.content.Context
+import androidx.compose.material3.Button
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.platform.ComposeView
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.viewevent.EventDispatcher
+import expo.modules.kotlin.views.ExpoView
+
+class LightUIButtonView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
+  private val onButtonPress by EventDispatcher()
+  private var buttonTitle by mutableStateOf("")
+  private var buttonDisabled by mutableStateOf(false)
+
+  init {
+    addView(
+      ComposeView(context).apply {
+        layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
+        setContent {
+          MaterialTheme {
+            Button(
+              enabled = !buttonDisabled,
+              onClick = { onButtonPress(emptyMap<String, Any>()) }
+            ) {
+              Text(buttonTitle)
+            }
+          }
+        }
+      }
+    )
+  }
+
+  fun setTitle(nextTitle: String) {
+    buttonTitle = nextTitle
+  }
+
+  fun setDisabled(nextDisabled: Boolean) {
+    buttonDisabled = nextDisabled
+  }
+}

package/android/src/main/java/com/uwayss/lightui/LightUIModule.kt

@@ -0,0 +1,53 @@
+package com.uwayss.lightui
+
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+class LightUIModule : Module() {
+  override fun definition() = ModuleDefinition {
+    Name("LightUI")
+
+    View(LightUISliderView::class) {
+      Name("Slider")
+      Events("onValueChange")
+
+      Prop("value") { view: LightUISliderView, value: Double? ->
+        view.setValue(value?.toFloat() ?: 0f)
+      }
+
+      Prop("minimumValue") { view: LightUISliderView, value: Double? ->
+        view.setRange(minimumValue = value?.toFloat() ?: 0f)
+      }
+
+      Prop("maximumValue") { view: LightUISliderView, value: Double? ->
+        view.setRange(maximumValue = value?.toFloat() ?: 1f)
+      }
+    }
+
+    View(LightUIPickerView::class) {
+      Name("Picker")
+      Events("onSelectionChange")
+
+      Prop("items") { view: LightUIPickerView, value: List<String>? ->
+        view.setItems(value.orEmpty())
+      }
+
+      Prop("selectedIndex") { view: LightUIPickerView, value: Int? ->
+        view.setSelectedIndex(value ?: 0)
+      }
+    }
+
+    View(LightUIButtonView::class) {
+      Name("Button")
+      Events("onButtonPress")
+
+      Prop("title") { view: LightUIButtonView, value: String? ->
+        view.setTitle(value.orEmpty())
+      }
+
+      Prop("disabled") { view: LightUIButtonView, value: Boolean? ->
+        view.setDisabled(value ?: false)
+      }
+    }
+  }
+}

package/android/src/main/java/com/uwayss/lightui/LightUIPickerView.kt

@@ -0,0 +1,115 @@
+package com.uwayss.lightui
+
+import android.content.Context
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.material3.DropdownMenuItem
+import androidx.compose.material3.DropdownMenu
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.viewevent.EventDispatcher
+import expo.modules.kotlin.views.ExpoView
+
+class LightUIPickerView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
+  private val onSelectionChange by EventDispatcher()
+  private var expanded by mutableStateOf(false)
+  private var pickerItems by mutableStateOf(listOf<String>())
+  private var pickerSelectedIndex by mutableStateOf(0)
+
+  init {
+    addView(
+      ComposeView(context).apply {
+        layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
+        setContent {
+          MaterialTheme {
+            Box(
+              contentAlignment = Alignment.Center,
+              modifier = Modifier.fillMaxWidth()
+            ) {
+              Row(
+                verticalAlignment = Alignment.CenterVertically,
+                modifier = Modifier
+                  .height(44.dp)
+                  .wrapContentSize()
+                  .clickable { expanded = true }
+              ) {
+                Text(
+                  text = pickerItems.getOrNull(pickerSelectedIndex).orEmpty(),
+                  color = MaterialTheme.colorScheme.primary,
+                  fontWeight = FontWeight.SemiBold,
+                  style = MaterialTheme.typography.headlineSmall
+                )
+
+                val arrowColor = MaterialTheme.colorScheme.primary
+                Canvas(
+                  modifier = Modifier
+                    .size(24.dp)
+                    .rotate(if (expanded) 180f else 0f)
+                ) {
+                  val strokeWidth = 2.5.dp.toPx()
+                  drawLine(
+                    arrowColor,
+                    Offset(size.width * 0.28f, size.height * 0.4f),
+                    Offset(size.width * 0.5f, size.height * 0.62f),
+                    strokeWidth,
+                    StrokeCap.Round
+                  )
+                  drawLine(
+                    arrowColor,
+                    Offset(size.width * 0.72f, size.height * 0.4f),
+                    Offset(size.width * 0.5f, size.height * 0.62f),
+                    strokeWidth,
+                    StrokeCap.Round
+                  )
+                }
+              }
+
+              DropdownMenu(
+                expanded = expanded,
+                onDismissRequest = { expanded = false }
+              ) {
+                pickerItems.forEachIndexed { index, item ->
+                  DropdownMenuItem(
+                    text = { Text(item) },
+                    onClick = {
+                      pickerSelectedIndex = index
+                      expanded = false
+                      onSelectionChange(mapOf("index" to index, "value" to item))
+                    }
+                  )
+                }
+              }
+            }
+          }
+        }
+      }
+    )
+  }
+
+  fun setItems(nextItems: List<String>) {
+    pickerItems = nextItems
+    pickerSelectedIndex = pickerSelectedIndex.coerceIn(0, (nextItems.size - 1).coerceAtLeast(0))
+  }
+
+  fun setSelectedIndex(nextSelectedIndex: Int) {
+    pickerSelectedIndex = nextSelectedIndex.coerceIn(0, (pickerItems.size - 1).coerceAtLeast(0))
+  }
+}

package/android/src/main/java/com/uwayss/lightui/LightUISliderView.kt

@@ -0,0 +1,58 @@
+package com.uwayss.lightui
+
+import android.content.Context
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Slider
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.platform.ComposeView
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.viewevent.EventDispatcher
+import expo.modules.kotlin.views.ExpoView
+
+class LightUISliderView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
+  private val onValueChange by EventDispatcher()
+  private var value by mutableFloatStateOf(0f)
+  private var minimumValue by mutableFloatStateOf(0f)
+  private var maximumValue by mutableFloatStateOf(1f)
+
+  init {
+    addView(
+      ComposeView(context).apply {
+        layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
+        setContent {
+          MaterialTheme {
+            Slider(
+              value = value.coerceIn(minimumValue, maximumValue),
+              onValueChange = { setValue(it, notify = true) },
+              valueRange = minimumValue..maximumValue
+            )
+          }
+        }
+      }
+    )
+  }
+
+  fun setValue(nextValue: Float, notify: Boolean = false) {
+    val clampedValue = nextValue.coerceIn(minimumValue, maximumValue)
+    if (value == clampedValue) {
+      return
+    }
+
+    value = clampedValue
+    if (notify) {
+      onValueChange(mapOf("value" to clampedValue.toDouble()))
+    }
+  }
+
+  fun setRange(minimumValue: Float = this.minimumValue, maximumValue: Float = this.maximumValue) {
+    if (minimumValue > maximumValue) {
+      return
+    }
+
+    this.minimumValue = minimumValue
+    this.maximumValue = maximumValue
+    setValue(value)
+  }
+}

package/docs/development.md

@@ -0,0 +1,31 @@
+# Development
+
+## Checks
+
+Run the first-commit quality gate with:
+
+```sh
+npm run check
+```
+
+This runs:
+
+- `npm run format:check`
+- `npm run lint`
+- `npm run typecheck`
+- `npm run pack:dry`
+
+## Formatting
+
+```sh
+npm run format
+```
+
+Prettier uses the project options in `.prettierrc.json`.
+
+## Native Builds
+
+Native Android and iOS build checks should be added once the repository has an
+example app or CI fixture that can consume the package. For now, the baseline keeps
+the package publish surface honest with formatting, linting, TypeScript, and
+`npm pack --dry-run`.

package/docs/usage.md

@@ -0,0 +1,59 @@
+# Usage
+
+`@uwayss/lightui` ships small React components backed by native SwiftUI views on iOS
+and Jetpack Compose views on Android.
+
+## Install
+
+```sh
+npm install @uwayss/lightui
+```
+
+## Components
+
+### Button
+
+```tsx
+import { Button } from '@uwayss/lightui';
+
+export function SaveButton() {
+  return <Button title="Save" disabled={false} onPress={() => {}} />;
+}
+```
+
+### Picker
+
+```tsx
+import { Picker } from '@uwayss/lightui';
+
+export function SizePicker() {
+  return (
+    <Picker
+      items={['Small', 'Medium', 'Large']}
+      selectedIndex={1}
+      onSelectionChange={(event) => {
+        console.log(event.nativeEvent.index, event.nativeEvent.value);
+      }}
+    />
+  );
+}
+```
+
+### Slider
+
+```tsx
+import { Slider } from '@uwayss/lightui';
+
+export function VolumeSlider() {
+  return (
+    <Slider
+      value={0.5}
+      minimumValue={0}
+      maximumValue={1}
+      onValueChange={(event) => {
+        console.log(event.nativeEvent.value);
+      }}
+    />
+  );
+}
+```

package/expo-module.config.json

@@ -0,0 +1,10 @@
+{
+  "coreFeatures": ["compose"],
+  "platforms": ["apple", "android"],
+  "apple": {
+    "modules": ["LightUIModule"]
+  },
+  "android": {
+    "modules": ["com.uwayss.lightui.LightUIModule"]
+  }
+}

package/ios/LightUI.podspec

@@ -0,0 +1,23 @@
+Pod::Spec.new do |s|
+  s.name           = 'LightUI'
+  s.version        = '0.1.0'
+  s.summary        = 'Lightweight native SwiftUI components for React Native and Expo.'
+  s.description    = 'LightUI renders small native components through Expo Modules.'
+  s.author         = 'uwayss'
+  s.homepage       = 'https://github.com/uwayss/lightui'
+  s.license        = 'MIT'
+  s.platforms      = {
+    :ios => '16.4',
+    :tvos => '16.4'
+  }
+  s.source         = { git: 'https://github.com/uwayss/lightui.git', tag: s.version.to_s }
+  s.static_framework = true
+
+  s.dependency 'ExpoModulesCore'
+
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES',
+  }
+
+  s.source_files = "**/*.{h,m,mm,swift,hpp,cpp}"
+end

package/ios/LightUIButtonView.swift

@@ -0,0 +1,52 @@
+import ExpoModulesCore
+import SwiftUI
+
+final class LightUIButtonView: ExpoView {
+  private let hostingController = UIHostingController(rootView: AnyView(EmptyView()))
+  private let onButtonPress = EventDispatcher()
+  private var title = ""
+  private var disabled = false
+
+  required init(appContext: AppContext? = nil) {
+    super.init(appContext: appContext)
+    clipsToBounds = false
+    hostingController.view.backgroundColor = .clear
+    addSubview(hostingController.view)
+    render()
+  }
+
+  override func layoutSubviews() {
+    super.layoutSubviews()
+    hostingController.view.frame = bounds
+  }
+
+  func setTitle(_ nextTitle: String) {
+    title = nextTitle
+    render()
+  }
+
+  func setDisabled(_ nextDisabled: Bool) {
+    disabled = nextDisabled
+    render()
+  }
+
+  private func render() {
+    if #available(iOS 26.0, *) {
+      hostingController.rootView = AnyView(
+        Button(title) {
+          self.onButtonPress([:])
+        }
+        .buttonStyle(.glass)
+        .disabled(disabled)
+      )
+    } else {
+      hostingController.rootView = AnyView(
+        Button(title) {
+          self.onButtonPress([:])
+        }
+        .buttonStyle(.bordered)
+        .disabled(disabled)
+      )
+    }
+  }
+}

package/ios/LightUIModule.swift

@@ -0,0 +1,50 @@
+import ExpoModulesCore
+
+public class LightUIModule: Module {
+  public func definition() -> ModuleDefinition {
+    Name("LightUI")
+
+    View(LightUISliderView.self) {
+      ViewName("Slider")
+      Events("onValueChange")
+
+      Prop("value") { (view, value: Double?) in
+        view.setValue(value ?? 0)
+      }
+
+      Prop("minimumValue") { (view, value: Double?) in
+        view.setRange(minimumValue: value ?? 0)
+      }
+
+      Prop("maximumValue") { (view, value: Double?) in
+        view.setRange(maximumValue: value ?? 1)
+      }
+    }
+
+    View(LightUIPickerView.self) {
+      ViewName("Picker")
+      Events("onSelectionChange")
+
+      Prop("items") { (view, value: [String]?) in
+        view.setItems(value ?? [])
+      }
+
+      Prop("selectedIndex") { (view, value: Int?) in
+        view.setSelectedIndex(value ?? 0)
+      }
+    }
+
+    View(LightUIButtonView.self) {
+      ViewName("Button")
+      Events("onButtonPress")
+
+      Prop("title") { (view, value: String?) in
+        view.setTitle(value ?? "")
+      }
+
+      Prop("disabled") { (view, value: Bool?) in
+        view.setDisabled(value ?? false)
+      }
+    }
+  }
+}

package/ios/LightUIPickerView.swift

@@ -0,0 +1,55 @@
+import ExpoModulesCore
+import SwiftUI
+
+final class LightUIPickerView: ExpoView {
+  private let hostingController = UIHostingController(rootView: AnyView(EmptyView()))
+  private let onSelectionChange = EventDispatcher()
+  private var items: [String] = []
+  private var selectedIndex = 0
+
+  required init(appContext: AppContext? = nil) {
+    super.init(appContext: appContext)
+    clipsToBounds = false
+    hostingController.view.backgroundColor = .clear
+    addSubview(hostingController.view)
+    render()
+  }
+
+  override func layoutSubviews() {
+    super.layoutSubviews()
+    hostingController.view.frame = bounds
+  }
+
+  func setItems(_ nextItems: [String]) {
+    items = nextItems
+    selectedIndex = min(selectedIndex, max(nextItems.count - 1, 0))
+    render()
+  }
+
+  func setSelectedIndex(_ nextSelectedIndex: Int) {
+    selectedIndex = min(max(nextSelectedIndex, 0), max(items.count - 1, 0))
+    render()
+  }
+
+  private func render() {
+    let selection = Binding<Int>(
+      get: { self.selectedIndex },
+      set: { nextIndex in
+        self.selectedIndex = nextIndex
+        self.onSelectionChange([
+          "index": nextIndex,
+          "value": self.items.indices.contains(nextIndex) ? self.items[nextIndex] : ""
+        ])
+      }
+    )
+
+    hostingController.rootView = AnyView(
+      Picker(items.indices.contains(selectedIndex) ? items[selectedIndex] : "", selection: selection) {
+        ForEach(Array(items.enumerated()), id: \.offset) { index, item in
+          Text(item).tag(index)
+        }
+      }
+      .pickerStyle(.menu)
+    )
+  }
+}

package/ios/LightUISliderView.swift

@@ -0,0 +1,65 @@
+import ExpoModulesCore
+import SwiftUI
+
+final class LightUISliderView: ExpoView {
+  private let hostingController = UIHostingController(rootView: AnyView(EmptyView()))
+  private let onValueChange = EventDispatcher()
+  private var value = 0.0
+  private var minimumValue = 0.0
+  private var maximumValue = 1.0
+
+  required init(appContext: AppContext? = nil) {
+    super.init(appContext: appContext)
+    clipsToBounds = true
+    hostingController.view.backgroundColor = .clear
+    addSubview(hostingController.view)
+    render()
+  }
+
+  override func layoutSubviews() {
+    super.layoutSubviews()
+    hostingController.view.frame = bounds
+  }
+
+  func setValue(_ nextValue: Double, notify: Bool = false) {
+    let clampedValue = min(max(nextValue, minimumValue), maximumValue)
+    guard value != clampedValue else {
+      return
+    }
+
+    value = clampedValue
+    render()
+
+    if notify {
+      onValueChange([
+        "value": clampedValue
+      ])
+    }
+  }
+
+  func setRange(minimumValue: Double? = nil, maximumValue: Double? = nil) {
+    let nextMinimumValue = minimumValue ?? self.minimumValue
+    let nextMaximumValue = maximumValue ?? self.maximumValue
+    guard nextMinimumValue <= nextMaximumValue else {
+      return
+    }
+
+    self.minimumValue = nextMinimumValue
+    self.maximumValue = nextMaximumValue
+    setValue(value)
+    render()
+  }
+
+  private func render() {
+    hostingController.rootView = AnyView(
+      Slider(
+        value: Binding(
+          get: { [weak self] in self?.value ?? 0 },
+          set: { [weak self] newValue in self?.setValue(newValue, notify: true) }
+        ),
+        in: minimumValue...maximumValue
+      )
+      .padding(.horizontal, 2)
+    )
+  }
+}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@uwayss/lightui",
+  "version": "0.1.0",
+  "description": "Lightweight native SwiftUI and Jetpack Compose components for React Native and Expo.",
+  "license": "MIT",
+  "homepage": "https://github.com/uwayss/lightui#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/uwayss/lightui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/uwayss/lightui/issues"
+  },
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "LICENSE",
+    "android/build.gradle",
+    "android/src",
+    "docs",
+    "ios",
+    "src",
+    "expo-module.config.json",
+    "README.md"
+  ],
+  "scripts": {
+    "check": "npm run format:check && npm run lint && npm run typecheck && npm run pack:dry",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "lint": "expo lint",
+    "typecheck": "tsc --noEmit",
+    "pack:dry": "npm pack --dry-run --cache ./.npm-cache"
+  },
+  "keywords": [
+    "expo",
+    "react-native",
+    "swiftui",
+    "jetpack-compose",
+    "ui"
+  ],
+  "peerDependencies": {
+    "expo": ">=56.0.0",
+    "react": ">=19.0.0",
+    "react-native": ">=0.85.0"
+  },
+  "devDependencies": {
+    "@types/react": "~19.2.2",
+    "eslint": "^9.39.4",
+    "eslint-config-expo": "^56.0.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-import-resolver-typescript": "^4.4.5",
+    "eslint-plugin-prettier": "^5.5.6",
+    "eslint-plugin-react-compiler": "^19.1.0-rc.2",
+    "expo": "~56.0.12",
+    "expo-modules-core": "~56.0.17",
+    "prettier": "^3.8.4",
+    "react": "19.2.3",
+    "react-native": "0.85.3",
+    "typescript": "~6.0.3",
+    "zod-validation-error": "^4.0.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/Button.tsx

@@ -0,0 +1,24 @@
+import { requireNativeViewManager } from 'expo-modules-core';
+import * as React from 'react';
+import type { NativeSyntheticEvent, ViewProps } from 'react-native';
+
+export type ButtonPressEvent = Record<never, never>;
+
+export type ButtonProps = ViewProps & {
+  title: string;
+  disabled?: boolean;
+  onPress?: (event: NativeSyntheticEvent<ButtonPressEvent>) => void;
+};
+
+type NativeButtonProps = Omit<ButtonProps, 'onPress'> & {
+  onButtonPress?: ButtonProps['onPress'];
+};
+
+const NativeButton: React.ComponentType<NativeButtonProps> = requireNativeViewManager(
+  'LightUI',
+  'Button',
+);
+
+export function Button({ onPress, ...props }: ButtonProps) {
+  return <NativeButton {...props} onButtonPress={onPress} />;
+}

package/src/Picker.tsx

@@ -0,0 +1,23 @@
+import { requireNativeViewManager } from 'expo-modules-core';
+import * as React from 'react';
+import type { NativeSyntheticEvent, ViewProps } from 'react-native';
+
+export type PickerSelectionChangeEvent = {
+  index: number;
+  value: string;
+};
+
+export type PickerProps = ViewProps & {
+  items: string[];
+  selectedIndex?: number;
+  onSelectionChange?: (event: NativeSyntheticEvent<PickerSelectionChangeEvent>) => void;
+};
+
+const NativePicker: React.ComponentType<PickerProps> = requireNativeViewManager(
+  'LightUI',
+  'Picker',
+);
+
+export function Picker(props: PickerProps) {
+  return <NativePicker {...props} />;
+}

package/src/Slider.tsx

@@ -0,0 +1,23 @@
+import { requireNativeViewManager } from 'expo-modules-core';
+import * as React from 'react';
+import type { NativeSyntheticEvent, ViewProps } from 'react-native';
+
+export type SliderValueChangeEvent = {
+  value: number;
+};
+
+export type SliderProps = ViewProps & {
+  value?: number;
+  minimumValue?: number;
+  maximumValue?: number;
+  onValueChange?: (event: NativeSyntheticEvent<SliderValueChangeEvent>) => void;
+};
+
+const NativeSlider: React.ComponentType<SliderProps> = requireNativeViewManager(
+  'LightUI',
+  'Slider',
+);
+
+export function Slider(props: SliderProps) {
+  return <NativeSlider {...props} />;
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+export { Button } from './Button';
+export type { ButtonPressEvent, ButtonProps } from './Button';
+export { Picker } from './Picker';
+export type { PickerProps, PickerSelectionChangeEvent } from './Picker';
+export { Slider } from './Slider';
+export type { SliderProps, SliderValueChangeEvent } from './Slider';