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.
Files changed (72) hide show
  1. package/LICENSE +20 -0
  2. package/README.md +102 -0
  3. package/Rangaat.podspec +20 -0
  4. package/android/build.gradle +67 -0
  5. package/android/src/main/AndroidManifest.xml +2 -0
  6. package/android/src/main/java/com/rangaat/RangaatPackage.kt +17 -0
  7. package/android/src/main/java/com/rangaat/RangaatView.kt +15 -0
  8. package/android/src/main/java/com/rangaat/RangaatViewManager.kt +41 -0
  9. package/ios/RangaatView.h +14 -0
  10. package/ios/RangaatView.mm +48 -0
  11. package/lib/module/RangaatView.js +17 -0
  12. package/lib/module/RangaatView.js.map +1 -0
  13. package/lib/module/RangaatView.native.js +5 -0
  14. package/lib/module/RangaatView.native.js.map +1 -0
  15. package/lib/module/RangaatViewNativeComponent.ts +11 -0
  16. package/lib/module/components/Button/Button.js +53 -0
  17. package/lib/module/components/Button/Button.js.map +1 -0
  18. package/lib/module/components/Button/index.js +4 -0
  19. package/lib/module/components/Button/index.js.map +1 -0
  20. package/lib/module/components/Button/styles.js +113 -0
  21. package/lib/module/components/Button/styles.js.map +1 -0
  22. package/lib/module/components/Button/types.js +4 -0
  23. package/lib/module/components/Button/types.js.map +1 -0
  24. package/lib/module/hooks/useTheme.js +20 -0
  25. package/lib/module/hooks/useTheme.js.map +1 -0
  26. package/lib/module/index.js +13 -0
  27. package/lib/module/index.js.map +1 -0
  28. package/lib/module/package.json +1 -0
  29. package/lib/module/theme/ThemeProvider.js +31 -0
  30. package/lib/module/theme/ThemeProvider.js.map +1 -0
  31. package/lib/module/theme/defaultTheme.js +118 -0
  32. package/lib/module/theme/defaultTheme.js.map +1 -0
  33. package/lib/module/theme/types.js +2 -0
  34. package/lib/module/theme/types.js.map +1 -0
  35. package/lib/typescript/package.json +1 -0
  36. package/lib/typescript/src/RangaatView.d.ts +7 -0
  37. package/lib/typescript/src/RangaatView.d.ts.map +1 -0
  38. package/lib/typescript/src/RangaatView.native.d.ts +3 -0
  39. package/lib/typescript/src/RangaatView.native.d.ts.map +1 -0
  40. package/lib/typescript/src/RangaatViewNativeComponent.d.ts +7 -0
  41. package/lib/typescript/src/RangaatViewNativeComponent.d.ts.map +1 -0
  42. package/lib/typescript/src/components/Button/Button.d.ts +4 -0
  43. package/lib/typescript/src/components/Button/Button.d.ts.map +1 -0
  44. package/lib/typescript/src/components/Button/index.d.ts +3 -0
  45. package/lib/typescript/src/components/Button/index.d.ts.map +1 -0
  46. package/lib/typescript/src/components/Button/styles.d.ts +37 -0
  47. package/lib/typescript/src/components/Button/styles.d.ts.map +1 -0
  48. package/lib/typescript/src/components/Button/types.d.ts +25 -0
  49. package/lib/typescript/src/components/Button/types.d.ts.map +1 -0
  50. package/lib/typescript/src/hooks/useTheme.d.ts +7 -0
  51. package/lib/typescript/src/hooks/useTheme.d.ts.map +1 -0
  52. package/lib/typescript/src/index.d.ts +8 -0
  53. package/lib/typescript/src/index.d.ts.map +1 -0
  54. package/lib/typescript/src/theme/ThemeProvider.d.ts +17 -0
  55. package/lib/typescript/src/theme/ThemeProvider.d.ts.map +1 -0
  56. package/lib/typescript/src/theme/defaultTheme.d.ts +4 -0
  57. package/lib/typescript/src/theme/defaultTheme.d.ts.map +1 -0
  58. package/lib/typescript/src/theme/types.d.ts +95 -0
  59. package/lib/typescript/src/theme/types.d.ts.map +1 -0
  60. package/package.json +182 -0
  61. package/src/RangaatView.native.tsx +2 -0
  62. package/src/RangaatView.tsx +9 -0
  63. package/src/RangaatViewNativeComponent.ts +11 -0
  64. package/src/components/Button/Button.tsx +78 -0
  65. package/src/components/Button/index.ts +2 -0
  66. package/src/components/Button/styles.ts +114 -0
  67. package/src/components/Button/types.ts +26 -0
  68. package/src/hooks/useTheme.ts +12 -0
  69. package/src/index.tsx +13 -0
  70. package/src/theme/ThemeProvider.tsx +43 -0
  71. package/src/theme/defaultTheme.ts +79 -0
  72. 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
+ ![NPM Version](https://img.shields.io/npm/v/rangaat)
6
+ ![License](https://img.shields.io/npm/l/rangaat)
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
@@ -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,2 @@
1
+ <manifest xmlns:android="http://schemas.android.com/apk/res/android">
2
+ </manifest>
@@ -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,5 @@
1
+ "use strict";
2
+
3
+ export { default as RangaatView } from './RangaatViewNativeComponent';
4
+ export * from './RangaatViewNativeComponent';
5
+ //# sourceMappingURL=RangaatView.native.js.map
@@ -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,11 @@
1
+ import {
2
+ codegenNativeComponent,
3
+ type ColorValue,
4
+ type ViewProps,
5
+ } from 'react-native';
6
+
7
+ interface NativeProps extends ViewProps {
8
+ color?: ColorValue;
9
+ }
10
+
11
+ export default codegenNativeComponent<NativeProps>('RangaatView');
@@ -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,4 @@
1
+ "use strict";
2
+
3
+ export { Button } from "./Button.js";
4
+ //# sourceMappingURL=index.js.map
@@ -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,4 @@
1
+ "use strict";
2
+
3
+ export {};
4
+ //# sourceMappingURL=types.js.map
@@ -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"}