rangaat 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +20 -0
- package/README.md +102 -0
- package/Rangaat.podspec +20 -0
- package/android/build.gradle +67 -0
- package/android/src/main/AndroidManifest.xml +2 -0
- package/android/src/main/java/com/rangaat/RangaatPackage.kt +17 -0
- package/android/src/main/java/com/rangaat/RangaatView.kt +15 -0
- package/android/src/main/java/com/rangaat/RangaatViewManager.kt +41 -0
- package/ios/RangaatView.h +14 -0
- package/ios/RangaatView.mm +48 -0
- package/lib/module/RangaatView.js +17 -0
- package/lib/module/RangaatView.js.map +1 -0
- package/lib/module/RangaatView.native.js +5 -0
- package/lib/module/RangaatView.native.js.map +1 -0
- package/lib/module/RangaatViewNativeComponent.ts +11 -0
- package/lib/module/components/Button/Button.js +53 -0
- package/lib/module/components/Button/Button.js.map +1 -0
- package/lib/module/components/Button/index.js +4 -0
- package/lib/module/components/Button/index.js.map +1 -0
- package/lib/module/components/Button/styles.js +113 -0
- package/lib/module/components/Button/styles.js.map +1 -0
- package/lib/module/components/Button/types.js +4 -0
- package/lib/module/components/Button/types.js.map +1 -0
- package/lib/module/hooks/useTheme.js +20 -0
- package/lib/module/hooks/useTheme.js.map +1 -0
- package/lib/module/index.js +13 -0
- package/lib/module/index.js.map +1 -0
- package/lib/module/package.json +1 -0
- package/lib/module/theme/ThemeProvider.js +31 -0
- package/lib/module/theme/ThemeProvider.js.map +1 -0
- package/lib/module/theme/defaultTheme.js +118 -0
- package/lib/module/theme/defaultTheme.js.map +1 -0
- package/lib/module/theme/types.js +2 -0
- package/lib/module/theme/types.js.map +1 -0
- package/lib/typescript/package.json +1 -0
- package/lib/typescript/src/RangaatView.d.ts +7 -0
- package/lib/typescript/src/RangaatView.d.ts.map +1 -0
- package/lib/typescript/src/RangaatView.native.d.ts +3 -0
- package/lib/typescript/src/RangaatView.native.d.ts.map +1 -0
- package/lib/typescript/src/RangaatViewNativeComponent.d.ts +7 -0
- package/lib/typescript/src/RangaatViewNativeComponent.d.ts.map +1 -0
- package/lib/typescript/src/components/Button/Button.d.ts +4 -0
- package/lib/typescript/src/components/Button/Button.d.ts.map +1 -0
- package/lib/typescript/src/components/Button/index.d.ts +3 -0
- package/lib/typescript/src/components/Button/index.d.ts.map +1 -0
- package/lib/typescript/src/components/Button/styles.d.ts +37 -0
- package/lib/typescript/src/components/Button/styles.d.ts.map +1 -0
- package/lib/typescript/src/components/Button/types.d.ts +25 -0
- package/lib/typescript/src/components/Button/types.d.ts.map +1 -0
- package/lib/typescript/src/hooks/useTheme.d.ts +7 -0
- package/lib/typescript/src/hooks/useTheme.d.ts.map +1 -0
- package/lib/typescript/src/index.d.ts +8 -0
- package/lib/typescript/src/index.d.ts.map +1 -0
- package/lib/typescript/src/theme/ThemeProvider.d.ts +17 -0
- package/lib/typescript/src/theme/ThemeProvider.d.ts.map +1 -0
- package/lib/typescript/src/theme/defaultTheme.d.ts +4 -0
- package/lib/typescript/src/theme/defaultTheme.d.ts.map +1 -0
- package/lib/typescript/src/theme/types.d.ts +95 -0
- package/lib/typescript/src/theme/types.d.ts.map +1 -0
- package/package.json +182 -0
- package/src/RangaatView.native.tsx +2 -0
- package/src/RangaatView.tsx +9 -0
- package/src/RangaatViewNativeComponent.ts +11 -0
- package/src/components/Button/Button.tsx +78 -0
- package/src/components/Button/index.ts +2 -0
- package/src/components/Button/styles.ts +114 -0
- package/src/components/Button/types.ts +26 -0
- package/src/hooks/useTheme.ts +12 -0
- package/src/index.tsx +13 -0
- package/src/theme/ThemeProvider.tsx +43 -0
- package/src/theme/defaultTheme.ts +79 -0
- package/src/theme/types.ts +59 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Abdul Majeed
|
|
4
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
5
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
6
|
+
in the Software without restriction, including without limitation the rights
|
|
7
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
8
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
9
|
+
furnished to do so, subject to the following conditions:
|
|
10
|
+
|
|
11
|
+
The above copyright notice and this permission notice shall be included in all
|
|
12
|
+
copies or substantial portions of the Software.
|
|
13
|
+
|
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
15
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
16
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
17
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
18
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
19
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
20
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
# Rangaat 🎨
|
|
2
|
+
|
|
3
|
+
Bring color and life to your mobile apps with customizable, Material-Expressive React Native UI components.
|
|
4
|
+
|
|
5
|
+

|
|
6
|
+

|
|
7
|
+
|
|
8
|
+
**Rangaat** is a premium, beautifully crafted React Native component library designed around Material Expressive principles. It provides highly customizable components, a robust theming engine, and built-in hooks to create stunning, dynamic user interfaces for iOS, Android, and Web.
|
|
9
|
+
|
|
10
|
+
## Features ✨
|
|
11
|
+
|
|
12
|
+
- 🎨 **Material Expressive Design**: Modern, fully rounded pill shapes, vibrant colors, and dynamic interaction states.
|
|
13
|
+
- 🌓 **Theming Engine**: Built-in Light and Dark themes, with full customization via `ThemeProvider`.
|
|
14
|
+
- 🧩 **Comprehensive Button Library**: Support for 5 variants (`filled`, `tonal`, `elevated`, `outlined`, `text`), sizes, icons, and more.
|
|
15
|
+
- 🪝 **Helpful Hooks**: Easily access the active theme and colors anywhere in your app using `useTheme`.
|
|
16
|
+
- 📱 **Cross-Platform**: Seamlessly works on iOS, Android, and Web.
|
|
17
|
+
|
|
18
|
+
## Installation 📦
|
|
19
|
+
|
|
20
|
+
```sh
|
|
21
|
+
npm install rangaat
|
|
22
|
+
# or
|
|
23
|
+
yarn add rangaat
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Quick Start 🚀
|
|
27
|
+
|
|
28
|
+
To use Rangaat, you need to wrap your application in the `ThemeProvider`. This injects the theme context into all underlying components.
|
|
29
|
+
|
|
30
|
+
```tsx
|
|
31
|
+
import React from 'react';
|
|
32
|
+
import { View } from 'react-native';
|
|
33
|
+
import { ThemeProvider, Button, useTheme } from 'rangaat';
|
|
34
|
+
|
|
35
|
+
const AppContent = () => {
|
|
36
|
+
const theme = useTheme();
|
|
37
|
+
|
|
38
|
+
return (
|
|
39
|
+
<View style={{ flex: 1, backgroundColor: theme.colors.background, justifyContent: 'center', alignItems: 'center' }}>
|
|
40
|
+
<Button variant="elevated" size="large">
|
|
41
|
+
Get Started
|
|
42
|
+
</Button>
|
|
43
|
+
</View>
|
|
44
|
+
);
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
export default function App() {
|
|
48
|
+
return (
|
|
49
|
+
<ThemeProvider>
|
|
50
|
+
<AppContent />
|
|
51
|
+
</ThemeProvider>
|
|
52
|
+
);
|
|
53
|
+
}
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## Components 🧱
|
|
57
|
+
|
|
58
|
+
### `Button`
|
|
59
|
+
A highly interactive, expressive button component.
|
|
60
|
+
|
|
61
|
+
**Props:**
|
|
62
|
+
- `variant` (`'filled' | 'tonal' | 'elevated' | 'outlined' | 'text'`): The visual style of the button. Default is `filled`.
|
|
63
|
+
- `size` (`'small' | 'medium' | 'large'`): The button size. Default is `medium`.
|
|
64
|
+
- `color` (`string`): Override the default theme color for this specific button.
|
|
65
|
+
- `fullWidth` (`boolean`): If true, the button stretches to fill its container's width.
|
|
66
|
+
- `disabled` (`boolean`): Disables the button and applies disabled styling.
|
|
67
|
+
- `iconLeft` / `iconRight` (`ReactNode`): Add icons to either side of the button text.
|
|
68
|
+
|
|
69
|
+
### `ThemeProvider`
|
|
70
|
+
The context provider for the Rangaat theme.
|
|
71
|
+
|
|
72
|
+
**Props:**
|
|
73
|
+
- `initialTheme` (`RangaatTheme`): Provide your own custom theme object. Defaults to the built-in `lightTheme`.
|
|
74
|
+
|
|
75
|
+
## Hooks 🪝
|
|
76
|
+
|
|
77
|
+
### `useTheme`
|
|
78
|
+
Returns the current active `RangaatTheme` object, granting access to `colors`, `typography`, `spacing`, and `shapes`.
|
|
79
|
+
|
|
80
|
+
```tsx
|
|
81
|
+
const theme = useTheme();
|
|
82
|
+
console.log(theme.colors.primary);
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### `useThemeActions`
|
|
86
|
+
Returns functions to update the theme dynamically.
|
|
87
|
+
|
|
88
|
+
```tsx
|
|
89
|
+
const { toggleTheme, setTheme } = useThemeActions();
|
|
90
|
+
|
|
91
|
+
// Toggle between light and dark mode
|
|
92
|
+
<Button onPress={toggleTheme}>Toggle Theme</Button>
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
## Contributing 🤝
|
|
96
|
+
|
|
97
|
+
We welcome contributions! See our [Contributing Guide](CONTRIBUTING.md) to get started with the development workflow.
|
|
98
|
+
- [Code of Conduct](CODE_OF_CONDUCT.md)
|
|
99
|
+
|
|
100
|
+
## License 📄
|
|
101
|
+
|
|
102
|
+
MIT
|
package/Rangaat.podspec
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
require "json"
|
|
2
|
+
|
|
3
|
+
package = JSON.parse(File.read(File.join(__dir__, "package.json")))
|
|
4
|
+
|
|
5
|
+
Pod::Spec.new do |s|
|
|
6
|
+
s.name = "Rangaat"
|
|
7
|
+
s.version = package["version"]
|
|
8
|
+
s.summary = package["description"]
|
|
9
|
+
s.homepage = package["homepage"]
|
|
10
|
+
s.license = package["license"]
|
|
11
|
+
s.authors = package["author"]
|
|
12
|
+
|
|
13
|
+
s.platforms = { :ios => min_ios_version_supported }
|
|
14
|
+
s.source = { :git => "https://github.com/abdulmajeed-dev0x/rangaat.git", :tag => "#{s.version}" }
|
|
15
|
+
|
|
16
|
+
s.source_files = "ios/**/*.{h,m,mm,swift,cpp}"
|
|
17
|
+
s.private_header_files = "ios/**/*.h"
|
|
18
|
+
|
|
19
|
+
install_modules_dependencies(s)
|
|
20
|
+
end
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
buildscript {
|
|
2
|
+
ext.Rangaat = [
|
|
3
|
+
kotlinVersion: "2.0.21",
|
|
4
|
+
minSdkVersion: 24,
|
|
5
|
+
compileSdkVersion: 36,
|
|
6
|
+
targetSdkVersion: 36
|
|
7
|
+
]
|
|
8
|
+
|
|
9
|
+
ext.getExtOrDefault = { prop ->
|
|
10
|
+
if (rootProject.ext.has(prop)) {
|
|
11
|
+
return rootProject.ext.get(prop)
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
return Rangaat[prop]
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
repositories {
|
|
18
|
+
google()
|
|
19
|
+
mavenCentral()
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
dependencies {
|
|
23
|
+
classpath "com.android.tools.build:gradle:8.7.2"
|
|
24
|
+
// noinspection DifferentKotlinGradleVersion
|
|
25
|
+
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}"
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
apply plugin: "com.android.library"
|
|
31
|
+
apply plugin: "kotlin-android"
|
|
32
|
+
|
|
33
|
+
apply plugin: "com.facebook.react"
|
|
34
|
+
|
|
35
|
+
android {
|
|
36
|
+
namespace "com.rangaat"
|
|
37
|
+
|
|
38
|
+
compileSdkVersion getExtOrDefault("compileSdkVersion")
|
|
39
|
+
|
|
40
|
+
defaultConfig {
|
|
41
|
+
minSdkVersion getExtOrDefault("minSdkVersion")
|
|
42
|
+
targetSdkVersion getExtOrDefault("targetSdkVersion")
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
buildFeatures {
|
|
46
|
+
buildConfig true
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
buildTypes {
|
|
50
|
+
release {
|
|
51
|
+
minifyEnabled false
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
lint {
|
|
56
|
+
disable "GradleCompatible"
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
compileOptions {
|
|
60
|
+
sourceCompatibility JavaVersion.VERSION_1_8
|
|
61
|
+
targetCompatibility JavaVersion.VERSION_1_8
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
dependencies {
|
|
66
|
+
implementation "com.facebook.react:react-android"
|
|
67
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
package com.rangaat
|
|
2
|
+
|
|
3
|
+
import com.facebook.react.BaseReactPackage
|
|
4
|
+
import com.facebook.react.bridge.NativeModule
|
|
5
|
+
import com.facebook.react.bridge.ReactApplicationContext
|
|
6
|
+
import com.facebook.react.module.model.ReactModuleInfoProvider
|
|
7
|
+
import com.facebook.react.uimanager.ViewManager
|
|
8
|
+
|
|
9
|
+
class RangaatViewPackage : BaseReactPackage() {
|
|
10
|
+
override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
|
|
11
|
+
return listOf(RangaatViewManager())
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? = null
|
|
15
|
+
|
|
16
|
+
override fun getReactModuleInfoProvider() = ReactModuleInfoProvider { emptyMap() }
|
|
17
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
package com.rangaat
|
|
2
|
+
|
|
3
|
+
import android.content.Context
|
|
4
|
+
import android.util.AttributeSet
|
|
5
|
+
import android.view.View
|
|
6
|
+
|
|
7
|
+
class RangaatView : View {
|
|
8
|
+
constructor(context: Context?) : super(context)
|
|
9
|
+
constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
|
|
10
|
+
constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(
|
|
11
|
+
context,
|
|
12
|
+
attrs,
|
|
13
|
+
defStyleAttr
|
|
14
|
+
)
|
|
15
|
+
}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
package com.rangaat
|
|
2
|
+
|
|
3
|
+
import android.graphics.Color
|
|
4
|
+
import com.facebook.react.module.annotations.ReactModule
|
|
5
|
+
import com.facebook.react.uimanager.SimpleViewManager
|
|
6
|
+
import com.facebook.react.uimanager.ThemedReactContext
|
|
7
|
+
import com.facebook.react.uimanager.ViewManagerDelegate
|
|
8
|
+
import com.facebook.react.uimanager.annotations.ReactProp
|
|
9
|
+
import com.facebook.react.viewmanagers.RangaatViewManagerInterface
|
|
10
|
+
import com.facebook.react.viewmanagers.RangaatViewManagerDelegate
|
|
11
|
+
|
|
12
|
+
@ReactModule(name = RangaatViewManager.NAME)
|
|
13
|
+
class RangaatViewManager : SimpleViewManager<RangaatView>(),
|
|
14
|
+
RangaatViewManagerInterface<RangaatView> {
|
|
15
|
+
private val mDelegate: ViewManagerDelegate<RangaatView>
|
|
16
|
+
|
|
17
|
+
init {
|
|
18
|
+
mDelegate = RangaatViewManagerDelegate(this)
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
override fun getDelegate(): ViewManagerDelegate<RangaatView>? {
|
|
22
|
+
return mDelegate
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
override fun getName(): String {
|
|
26
|
+
return NAME
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
public override fun createViewInstance(context: ThemedReactContext): RangaatView {
|
|
30
|
+
return RangaatView(context)
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@ReactProp(name = "color")
|
|
34
|
+
override fun setColor(view: RangaatView?, color: Int?) {
|
|
35
|
+
view?.setBackgroundColor(color ?: Color.TRANSPARENT)
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
companion object {
|
|
39
|
+
const val NAME = "RangaatView"
|
|
40
|
+
}
|
|
41
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
#import <React/RCTViewComponentView.h>
|
|
2
|
+
#import <UIKit/UIKit.h>
|
|
3
|
+
|
|
4
|
+
#ifndef RangaatViewNativeComponent_h
|
|
5
|
+
#define RangaatViewNativeComponent_h
|
|
6
|
+
|
|
7
|
+
NS_ASSUME_NONNULL_BEGIN
|
|
8
|
+
|
|
9
|
+
@interface RangaatView : RCTViewComponentView
|
|
10
|
+
@end
|
|
11
|
+
|
|
12
|
+
NS_ASSUME_NONNULL_END
|
|
13
|
+
|
|
14
|
+
#endif /* RangaatViewNativeComponent_h */
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
#import "RangaatView.h"
|
|
2
|
+
|
|
3
|
+
#import <React/RCTConversions.h>
|
|
4
|
+
|
|
5
|
+
#import <react/renderer/components/RangaatViewSpec/ComponentDescriptors.h>
|
|
6
|
+
#import <react/renderer/components/RangaatViewSpec/Props.h>
|
|
7
|
+
#import <react/renderer/components/RangaatViewSpec/RCTComponentViewHelpers.h>
|
|
8
|
+
|
|
9
|
+
#import "RCTFabricComponentsPlugins.h"
|
|
10
|
+
|
|
11
|
+
using namespace facebook::react;
|
|
12
|
+
|
|
13
|
+
@implementation RangaatView {
|
|
14
|
+
UIView * _view;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
+ (ComponentDescriptorProvider)componentDescriptorProvider
|
|
18
|
+
{
|
|
19
|
+
return concreteComponentDescriptorProvider<RangaatViewComponentDescriptor>();
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
- (instancetype)initWithFrame:(CGRect)frame
|
|
23
|
+
{
|
|
24
|
+
if (self = [super initWithFrame:frame]) {
|
|
25
|
+
static const auto defaultProps = std::make_shared<const RangaatViewProps>();
|
|
26
|
+
_props = defaultProps;
|
|
27
|
+
|
|
28
|
+
_view = [[UIView alloc] init];
|
|
29
|
+
|
|
30
|
+
self.contentView = _view;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
return self;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
|
|
37
|
+
{
|
|
38
|
+
const auto &oldViewProps = *std::static_pointer_cast<RangaatViewProps const>(_props);
|
|
39
|
+
const auto &newViewProps = *std::static_pointer_cast<RangaatViewProps const>(props);
|
|
40
|
+
|
|
41
|
+
if (oldViewProps.color != newViewProps.color) {
|
|
42
|
+
[_view setBackgroundColor: RCTUIColorFromSharedColor(newViewProps.color)];
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
[super updateProps:props oldProps:oldProps];
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
@end
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { View } from 'react-native';
|
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
+
export function RangaatView({
|
|
6
|
+
color,
|
|
7
|
+
style,
|
|
8
|
+
...rest
|
|
9
|
+
}) {
|
|
10
|
+
return /*#__PURE__*/_jsx(View, {
|
|
11
|
+
...rest,
|
|
12
|
+
style: [style, {
|
|
13
|
+
backgroundColor: color
|
|
14
|
+
}]
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
//# sourceMappingURL=RangaatView.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["View","jsx","_jsx","RangaatView","color","style","rest","backgroundColor"],"sourceRoot":"../../src","sources":["RangaatView.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAyC,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAMrE,OAAO,SAASC,WAAWA,CAAC;EAAEC,KAAK;EAAEC,KAAK;EAAE,GAAGC;AAAY,CAAC,EAAE;EAC5D,oBAAOJ,IAAA,CAACF,IAAI;IAAA,GAAKM,IAAI;IAAED,KAAK,EAAE,CAACA,KAAK,EAAE;MAAEE,eAAe,EAAEH;IAAM,CAAC;EAAE,CAAE,CAAC;AACvE","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["default","RangaatView"],"sourceRoot":"../../src","sources":["RangaatView.native.tsx"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,WAAW,QAAQ,8BAA8B;AACrE,cAAc,8BAA8B","ignoreList":[]}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { Pressable, Text } from 'react-native';
|
|
5
|
+
import { useTheme } from "../../hooks/useTheme.js";
|
|
6
|
+
import { getButtonStyles } from "./styles.js";
|
|
7
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
+
export const Button = /*#__PURE__*/React.forwardRef(({
|
|
9
|
+
children,
|
|
10
|
+
variant = 'filled',
|
|
11
|
+
size = 'medium',
|
|
12
|
+
color,
|
|
13
|
+
fullWidth = false,
|
|
14
|
+
iconLeft,
|
|
15
|
+
iconRight,
|
|
16
|
+
style,
|
|
17
|
+
textStyle,
|
|
18
|
+
disabled = false,
|
|
19
|
+
...rest
|
|
20
|
+
}, ref) => {
|
|
21
|
+
const theme = useTheme();
|
|
22
|
+
return /*#__PURE__*/_jsx(Pressable, {
|
|
23
|
+
ref: ref,
|
|
24
|
+
disabled: disabled,
|
|
25
|
+
accessibilityRole: "button",
|
|
26
|
+
accessibilityState: {
|
|
27
|
+
disabled
|
|
28
|
+
},
|
|
29
|
+
style: ({
|
|
30
|
+
pressed
|
|
31
|
+
}) => {
|
|
32
|
+
const styles = getButtonStyles(theme, variant, size, pressed, disabled, color);
|
|
33
|
+
return [styles.container, fullWidth && {
|
|
34
|
+
width: '100%'
|
|
35
|
+
}, style];
|
|
36
|
+
},
|
|
37
|
+
...rest,
|
|
38
|
+
children: ({
|
|
39
|
+
pressed
|
|
40
|
+
}) => {
|
|
41
|
+
const styles = getButtonStyles(theme, variant, size, pressed, disabled, color);
|
|
42
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
43
|
+
children: [iconLeft, typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
|
|
44
|
+
style: [styles.text, textStyle],
|
|
45
|
+
numberOfLines: 1,
|
|
46
|
+
children: children
|
|
47
|
+
}) : children, iconRight]
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
});
|
|
51
|
+
});
|
|
52
|
+
Button.displayName = 'Button';
|
|
53
|
+
//# sourceMappingURL=Button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","Pressable","Text","useTheme","getButtonStyles","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","Button","forwardRef","children","variant","size","color","fullWidth","iconLeft","iconRight","style","textStyle","disabled","rest","ref","theme","accessibilityRole","accessibilityState","pressed","styles","container","width","text","numberOfLines","displayName"],"sourceRoot":"../../../../src","sources":["components/Button/Button.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,EAAEC,IAAI,QAAQ,cAAc;AAC9C,SAASC,QAAQ,QAAQ,yBAAsB;AAC/C,SAASC,eAAe,QAAQ,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAG3C,OAAO,MAAMC,MAAM,gBAAGX,KAAK,CAACY,UAAU,CACpC,CACE;EACEC,QAAQ;EACRC,OAAO,GAAG,QAAQ;EAClBC,IAAI,GAAG,QAAQ;EACfC,KAAK;EACLC,SAAS,GAAG,KAAK;EACjBC,QAAQ;EACRC,SAAS;EACTC,KAAK;EACLC,SAAS;EACTC,QAAQ,GAAG,KAAK;EAChB,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAMC,KAAK,GAAGtB,QAAQ,CAAC,CAAC;EAExB,oBACEG,IAAA,CAACL,SAAS;IACRuB,GAAG,EAAEA,GAAI;IACTF,QAAQ,EAAEA,QAAS;IACnBI,iBAAiB,EAAC,QAAQ;IAC1BC,kBAAkB,EAAE;MAAEL;IAAS,CAAE;IACjCF,KAAK,EAAEA,CAAC;MAAEQ;IAAQ,CAAC,KAAK;MACtB,MAAMC,MAAM,GAAGzB,eAAe,CAC5BqB,KAAK,EACLX,OAAO,EACPC,IAAI,EACJa,OAAO,EACPN,QAAQ,EACRN,KACF,CAAC;MACD,OAAO,CACLa,MAAM,CAACC,SAAS,EAChBb,SAAS,IAAI;QAAEc,KAAK,EAAE;MAAO,CAAC,EAC9BX,KAAK,CACN;IACH,CAAE;IAAA,GACEG,IAAI;IAAAV,QAAA,EAEPA,CAAC;MAAEe;IAAQ,CAAC,KAAK;MAChB,MAAMC,MAAM,GAAGzB,eAAe,CAC5BqB,KAAK,EACLX,OAAO,EACPC,IAAI,EACJa,OAAO,EACPN,QAAQ,EACRN,KACF,CAAC;MAED,oBACEN,KAAA,CAAAF,SAAA;QAAAK,QAAA,GACGK,QAAQ,EACR,OAAOL,QAAQ,KAAK,QAAQ,gBAC3BP,IAAA,CAACJ,IAAI;UAACkB,KAAK,EAAE,CAACS,MAAM,CAACG,IAAI,EAAEX,SAAS,CAAE;UAACY,aAAa,EAAE,CAAE;UAAApB,QAAA,EACrDA;QAAQ,CACL,CAAC,GAEPA,QACD,EACAM,SAAS;MAAA,CACV,CAAC;IAEP;EAAC,CACQ,CAAC;AAEhB,CACF,CAAC;AAEDR,MAAM,CAACuB,WAAW,GAAG,QAAQ","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["Button"],"sourceRoot":"../../../../src","sources":["components/Button/index.ts"],"mappings":";;AAAA,SAASA,MAAM,QAAQ,aAAU","ignoreList":[]}
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { StyleSheet } from 'react-native';
|
|
4
|
+
export const getButtonStyles = (theme, variant, size, isPressed, isDisabled, customColor) => {
|
|
5
|
+
const {
|
|
6
|
+
colors,
|
|
7
|
+
spacing,
|
|
8
|
+
shapes,
|
|
9
|
+
typography
|
|
10
|
+
} = theme;
|
|
11
|
+
|
|
12
|
+
// 1. Determine base colors based on variant
|
|
13
|
+
let backgroundColor = 'transparent';
|
|
14
|
+
let textColor = colors.primary;
|
|
15
|
+
let borderColor = 'transparent';
|
|
16
|
+
let elevation = 0;
|
|
17
|
+
switch (variant) {
|
|
18
|
+
case 'filled':
|
|
19
|
+
backgroundColor = customColor || colors.primary;
|
|
20
|
+
textColor = colors.onPrimary;
|
|
21
|
+
break;
|
|
22
|
+
case 'tonal':
|
|
23
|
+
backgroundColor = colors.secondaryContainer;
|
|
24
|
+
textColor = colors.onSecondaryContainer;
|
|
25
|
+
break;
|
|
26
|
+
case 'elevated':
|
|
27
|
+
backgroundColor = colors.surface;
|
|
28
|
+
textColor = colors.primary;
|
|
29
|
+
elevation = isPressed ? 2 : 4; // Shadow
|
|
30
|
+
break;
|
|
31
|
+
case 'outlined':
|
|
32
|
+
borderColor = colors.outline;
|
|
33
|
+
textColor = customColor || colors.primary;
|
|
34
|
+
break;
|
|
35
|
+
case 'text':
|
|
36
|
+
textColor = customColor || colors.primary;
|
|
37
|
+
break;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// 2. Handle disabled state (Material Design 3 specs usually apply opacity or specific disabled colors)
|
|
41
|
+
if (isDisabled) {
|
|
42
|
+
if (variant === 'filled' || variant === 'tonal' || variant === 'elevated') {
|
|
43
|
+
backgroundColor = colors.disabled;
|
|
44
|
+
textColor = colors.onDisabled;
|
|
45
|
+
elevation = 0;
|
|
46
|
+
} else if (variant === 'outlined') {
|
|
47
|
+
borderColor = colors.disabled;
|
|
48
|
+
textColor = colors.onDisabled;
|
|
49
|
+
} else {
|
|
50
|
+
textColor = colors.onDisabled;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
// 3. Handle pressed state (visual feedback)
|
|
55
|
+
let opacity = 1;
|
|
56
|
+
if (isPressed && !isDisabled) {
|
|
57
|
+
if (variant === 'filled' || variant === 'tonal' || variant === 'elevated') {
|
|
58
|
+
opacity = 0.85; // Simple opacity feedback
|
|
59
|
+
} else {
|
|
60
|
+
backgroundColor = `${textColor}1A`; // 10% opacity of text color for background
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
// 4. Determine sizing and typography
|
|
65
|
+
let paddingVertical = spacing.sm;
|
|
66
|
+
let paddingHorizontal = spacing.lg;
|
|
67
|
+
let textVariant = typography.labelLarge;
|
|
68
|
+
if (size === 'small') {
|
|
69
|
+
paddingVertical = spacing.xs;
|
|
70
|
+
paddingHorizontal = spacing.md;
|
|
71
|
+
textVariant = typography.labelMedium;
|
|
72
|
+
} else if (size === 'large') {
|
|
73
|
+
paddingVertical = spacing.md;
|
|
74
|
+
paddingHorizontal = spacing.xl;
|
|
75
|
+
textVariant = typography.labelLarge; // Could be larger if needed
|
|
76
|
+
}
|
|
77
|
+
return StyleSheet.create({
|
|
78
|
+
container: {
|
|
79
|
+
backgroundColor,
|
|
80
|
+
borderColor,
|
|
81
|
+
borderWidth: variant === 'outlined' ? 1 : 0,
|
|
82
|
+
borderRadius: shapes.pill,
|
|
83
|
+
// Fully rounded for expressive
|
|
84
|
+
paddingVertical,
|
|
85
|
+
paddingHorizontal,
|
|
86
|
+
flexDirection: 'row',
|
|
87
|
+
alignItems: 'center',
|
|
88
|
+
justifyContent: 'center',
|
|
89
|
+
opacity,
|
|
90
|
+
elevation,
|
|
91
|
+
shadowColor: colors.outline,
|
|
92
|
+
shadowOffset: {
|
|
93
|
+
width: 0,
|
|
94
|
+
height: elevation / 2
|
|
95
|
+
},
|
|
96
|
+
shadowOpacity: elevation > 0 ? 0.15 : 0,
|
|
97
|
+
shadowRadius: elevation,
|
|
98
|
+
gap: spacing.sm // Gap between icon and text
|
|
99
|
+
},
|
|
100
|
+
text: {
|
|
101
|
+
color: textColor,
|
|
102
|
+
fontSize: textVariant.fontSize,
|
|
103
|
+
fontWeight: textVariant.fontWeight,
|
|
104
|
+
lineHeight: textVariant.lineHeight,
|
|
105
|
+
letterSpacing: textVariant.letterSpacing,
|
|
106
|
+
textAlign: 'center'
|
|
107
|
+
},
|
|
108
|
+
disabled: {
|
|
109
|
+
opacity: 0.8 // Overall container opacity adjustment if needed, but handled above
|
|
110
|
+
}
|
|
111
|
+
});
|
|
112
|
+
};
|
|
113
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["StyleSheet","getButtonStyles","theme","variant","size","isPressed","isDisabled","customColor","colors","spacing","shapes","typography","backgroundColor","textColor","primary","borderColor","elevation","onPrimary","secondaryContainer","onSecondaryContainer","surface","outline","disabled","onDisabled","opacity","paddingVertical","sm","paddingHorizontal","lg","textVariant","labelLarge","xs","md","labelMedium","xl","create","container","borderWidth","borderRadius","pill","flexDirection","alignItems","justifyContent","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","gap","text","color","fontSize","fontWeight","lineHeight","letterSpacing","textAlign"],"sourceRoot":"../../../../src","sources":["components/Button/styles.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/Button/types.ts"],"mappings":"","ignoreList":[]}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useThemeContext } from "../theme/ThemeProvider.js";
|
|
4
|
+
export const useTheme = () => {
|
|
5
|
+
const {
|
|
6
|
+
theme
|
|
7
|
+
} = useThemeContext();
|
|
8
|
+
return theme;
|
|
9
|
+
};
|
|
10
|
+
export const useThemeActions = () => {
|
|
11
|
+
const {
|
|
12
|
+
setTheme,
|
|
13
|
+
toggleTheme
|
|
14
|
+
} = useThemeContext();
|
|
15
|
+
return {
|
|
16
|
+
setTheme,
|
|
17
|
+
toggleTheme
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=useTheme.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useThemeContext","useTheme","theme","useThemeActions","setTheme","toggleTheme"],"sourceRoot":"../../../src","sources":["hooks/useTheme.ts"],"mappings":";;AAAA,SAASA,eAAe,QAAQ,2BAAwB;AAGxD,OAAO,MAAMC,QAAQ,GAAGA,CAAA,KAAoB;EAC1C,MAAM;IAAEC;EAAM,CAAC,GAAGF,eAAe,CAAC,CAAC;EACnC,OAAOE,KAAK;AACd,CAAC;AAED,OAAO,MAAMC,eAAe,GAAGA,CAAA,KAAM;EACnC,MAAM;IAAEC,QAAQ;IAAEC;EAAY,CAAC,GAAGL,eAAe,CAAC,CAAC;EACnD,OAAO;IAAEI,QAAQ;IAAEC;EAAY,CAAC;AAClC,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
export { RangaatView } from './RangaatView';
|
|
4
|
+
|
|
5
|
+
// Theme Architecture
|
|
6
|
+
export { ThemeProvider, useThemeContext } from "./theme/ThemeProvider.js";
|
|
7
|
+
export { lightTheme, darkTheme } from "./theme/defaultTheme.js";
|
|
8
|
+
// Hooks
|
|
9
|
+
export { useTheme, useThemeActions } from "./hooks/useTheme.js";
|
|
10
|
+
|
|
11
|
+
// Components
|
|
12
|
+
export { Button } from "./components/Button/index.js";
|
|
13
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["RangaatView","ThemeProvider","useThemeContext","lightTheme","darkTheme","useTheme","useThemeActions","Button"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,WAAW,QAAQ,eAAe;;AAE3C;AACA,SAASC,aAAa,EAAEC,eAAe,QAAQ,0BAAuB;AACtE,SAASC,UAAU,EAAEC,SAAS,QAAQ,yBAAsB;AAG5D;AACA,SAASC,QAAQ,EAAEC,eAAe,QAAQ,qBAAkB;;AAE5D;AACA,SAASC,MAAM,QAAQ,8BAAqB","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"type":"module"}
|