@retray-dev/ui-kit 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 (12) hide show
  1. package/dist/index.d.mts +29 -0
  2. package/dist/index.d.ts +29 -0
  3. package/dist/index.js +165 -0
  4. package/dist/index.mjs +157 -0
  5. package/package.json +43 -0
  6. package/src/components/Button/Button.tsx +105 -0
  7. package/src/components/Button/index.ts +2 -0
  8. package/src/components/Input/Input.tsx +80 -0
  9. package/src/components/Input/index.ts +2 -0
  10. package/src/components/Text/Text.tsx +29 -0
  11. package/src/components/Text/index.ts +2 -0
  12. package/src/index.ts +3 -0
package/dist/index.d.mts ADDED
@@ -0,0 +1,29 @@
1
+ import React from 'react';
2
+ import { TouchableOpacityProps, TextProps as TextProps$1, TextInputProps } from 'react-native';
3
+
4
+ type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
5
+ type ButtonSize = 'sm' | 'md' | 'lg';
6
+ interface ButtonProps extends TouchableOpacityProps {
7
+ label: string;
8
+ variant?: ButtonVariant;
9
+ size?: ButtonSize;
10
+ loading?: boolean;
11
+ fullWidth?: boolean;
12
+ }
13
+ declare function Button({ label, variant, size, loading, fullWidth, disabled, style, ...props }: ButtonProps): React.JSX.Element;
14
+
15
+ type TextVariant = 'h1' | 'h2' | 'h3' | 'body' | 'caption' | 'label';
16
+ interface TextProps extends TextProps$1 {
17
+ variant?: TextVariant;
18
+ color?: string;
19
+ }
20
+ declare function Text({ variant, color, style, children, ...props }: TextProps): React.JSX.Element;
21
+
22
+ interface InputProps extends TextInputProps {
23
+ label?: string;
24
+ error?: string;
25
+ hint?: string;
26
+ }
27
+ declare function Input({ label, error, hint, style, onFocus, onBlur, ...props }: InputProps): React.JSX.Element;
28
+
29
+ export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, Input, type InputProps, Text, type TextProps, type TextVariant };
package/dist/index.d.ts ADDED
@@ -0,0 +1,29 @@
1
+ import React from 'react';
2
+ import { TouchableOpacityProps, TextProps as TextProps$1, TextInputProps } from 'react-native';
3
+
4
+ type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
5
+ type ButtonSize = 'sm' | 'md' | 'lg';
6
+ interface ButtonProps extends TouchableOpacityProps {
7
+ label: string;
8
+ variant?: ButtonVariant;
9
+ size?: ButtonSize;
10
+ loading?: boolean;
11
+ fullWidth?: boolean;
12
+ }
13
+ declare function Button({ label, variant, size, loading, fullWidth, disabled, style, ...props }: ButtonProps): React.JSX.Element;
14
+
15
+ type TextVariant = 'h1' | 'h2' | 'h3' | 'body' | 'caption' | 'label';
16
+ interface TextProps extends TextProps$1 {
17
+ variant?: TextVariant;
18
+ color?: string;
19
+ }
20
+ declare function Text({ variant, color, style, children, ...props }: TextProps): React.JSX.Element;
21
+
22
+ interface InputProps extends TextInputProps {
23
+ label?: string;
24
+ error?: string;
25
+ hint?: string;
26
+ }
27
+ declare function Input({ label, error, hint, style, onFocus, onBlur, ...props }: InputProps): React.JSX.Element;
28
+
29
+ export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, Input, type InputProps, Text, type TextProps, type TextVariant };
package/dist/index.js ADDED
@@ -0,0 +1,165 @@
1
+ 'use strict';
2
+
3
+ var React3 = require('react');
4
+ var reactNative = require('react-native');
5
+
6
+ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
7
+
8
+ var React3__default = /*#__PURE__*/_interopDefault(React3);
9
+
10
+ // src/components/Button/Button.tsx
11
+ var containerVariantStyles = {
12
+ primary: { backgroundColor: "#000" },
13
+ secondary: { backgroundColor: "#6B7280" },
14
+ outline: { backgroundColor: "transparent", borderWidth: 1.5, borderColor: "#000" },
15
+ ghost: { backgroundColor: "transparent" }
16
+ };
17
+ var containerSizeStyles = {
18
+ sm: { paddingHorizontal: 12, paddingVertical: 6 },
19
+ md: { paddingHorizontal: 16, paddingVertical: 10 },
20
+ lg: { paddingHorizontal: 24, paddingVertical: 14 }
21
+ };
22
+ var labelVariantStyles = {
23
+ primary: { color: "#fff" },
24
+ secondary: { color: "#fff" },
25
+ outline: { color: "#000" },
26
+ ghost: { color: "#000" }
27
+ };
28
+ var labelSizeStyles = {
29
+ sm: { fontSize: 13 },
30
+ md: { fontSize: 15 },
31
+ lg: { fontSize: 17 }
32
+ };
33
+ function Button({
34
+ label,
35
+ variant = "primary",
36
+ size = "md",
37
+ loading = false,
38
+ fullWidth = false,
39
+ disabled,
40
+ style,
41
+ ...props
42
+ }) {
43
+ const isDisabled = disabled || loading;
44
+ return /* @__PURE__ */ React3__default.default.createElement(
45
+ reactNative.TouchableOpacity,
46
+ {
47
+ style: [
48
+ styles.base,
49
+ containerVariantStyles[variant],
50
+ containerSizeStyles[size],
51
+ fullWidth && styles.fullWidth,
52
+ isDisabled && styles.disabled,
53
+ style
54
+ ],
55
+ disabled: isDisabled,
56
+ activeOpacity: 0.75,
57
+ ...props
58
+ },
59
+ loading ? /* @__PURE__ */ React3__default.default.createElement(
60
+ reactNative.ActivityIndicator,
61
+ {
62
+ size: "small",
63
+ color: variant === "outline" || variant === "ghost" ? "#000" : "#fff"
64
+ }
65
+ ) : /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles.label, labelVariantStyles[variant], labelSizeStyles[size]] }, label)
66
+ );
67
+ }
68
+ var styles = reactNative.StyleSheet.create({
69
+ base: {
70
+ borderRadius: 8,
71
+ alignItems: "center",
72
+ justifyContent: "center",
73
+ flexDirection: "row"
74
+ },
75
+ fullWidth: {
76
+ width: "100%"
77
+ },
78
+ disabled: {
79
+ opacity: 0.45
80
+ },
81
+ label: {
82
+ fontWeight: "600"
83
+ }
84
+ });
85
+ var variantStyles = {
86
+ h1: { fontSize: 32, fontWeight: "700", lineHeight: 40 },
87
+ h2: { fontSize: 24, fontWeight: "700", lineHeight: 32 },
88
+ h3: { fontSize: 20, fontWeight: "600", lineHeight: 28 },
89
+ body: { fontSize: 16, fontWeight: "400", lineHeight: 24 },
90
+ caption: { fontSize: 12, fontWeight: "400", lineHeight: 18, color: "#6B7280" },
91
+ label: { fontSize: 14, fontWeight: "500", lineHeight: 20 }
92
+ };
93
+ function Text2({ variant = "body", color, style, children, ...props }) {
94
+ return /* @__PURE__ */ React3__default.default.createElement(
95
+ reactNative.Text,
96
+ {
97
+ style: [variantStyles[variant], color ? { color } : void 0, style],
98
+ ...props
99
+ },
100
+ children
101
+ );
102
+ }
103
+ function Input({ label, error, hint, style, onFocus, onBlur, ...props }) {
104
+ const [focused, setFocused] = React3.useState(false);
105
+ return /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles2.container }, label ? /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: styles2.label }, label) : null, /* @__PURE__ */ React3__default.default.createElement(
106
+ reactNative.TextInput,
107
+ {
108
+ style: [
109
+ styles2.input,
110
+ focused && styles2.inputFocused,
111
+ error ? styles2.inputError : void 0,
112
+ style
113
+ ],
114
+ onFocus: (e) => {
115
+ setFocused(true);
116
+ onFocus?.(e);
117
+ },
118
+ onBlur: (e) => {
119
+ setFocused(false);
120
+ onBlur?.(e);
121
+ },
122
+ placeholderTextColor: "#9CA3AF",
123
+ ...props
124
+ }
125
+ ), error ? /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: styles2.errorText }, error) : null, !error && hint ? /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: styles2.hintText }, hint) : null);
126
+ }
127
+ var styles2 = reactNative.StyleSheet.create({
128
+ container: {
129
+ gap: 4
130
+ },
131
+ label: {
132
+ fontSize: 14,
133
+ fontWeight: "500",
134
+ color: "#111827",
135
+ marginBottom: 2
136
+ },
137
+ input: {
138
+ borderWidth: 1.5,
139
+ borderColor: "#D1D5DB",
140
+ borderRadius: 8,
141
+ paddingHorizontal: 12,
142
+ paddingVertical: 10,
143
+ fontSize: 15,
144
+ color: "#111827",
145
+ backgroundColor: "#fff"
146
+ },
147
+ inputFocused: {
148
+ borderColor: "#000"
149
+ },
150
+ inputError: {
151
+ borderColor: "#EF4444"
152
+ },
153
+ errorText: {
154
+ fontSize: 12,
155
+ color: "#EF4444"
156
+ },
157
+ hintText: {
158
+ fontSize: 12,
159
+ color: "#6B7280"
160
+ }
161
+ });
162
+
163
+ exports.Button = Button;
164
+ exports.Input = Input;
165
+ exports.Text = Text2;
package/dist/index.mjs ADDED
@@ -0,0 +1,157 @@
1
+ import React3, { useState } from 'react';
2
+ import { StyleSheet, TouchableOpacity, ActivityIndicator, Text, View, TextInput } from 'react-native';
3
+
4
+ // src/components/Button/Button.tsx
5
+ var containerVariantStyles = {
6
+ primary: { backgroundColor: "#000" },
7
+ secondary: { backgroundColor: "#6B7280" },
8
+ outline: { backgroundColor: "transparent", borderWidth: 1.5, borderColor: "#000" },
9
+ ghost: { backgroundColor: "transparent" }
10
+ };
11
+ var containerSizeStyles = {
12
+ sm: { paddingHorizontal: 12, paddingVertical: 6 },
13
+ md: { paddingHorizontal: 16, paddingVertical: 10 },
14
+ lg: { paddingHorizontal: 24, paddingVertical: 14 }
15
+ };
16
+ var labelVariantStyles = {
17
+ primary: { color: "#fff" },
18
+ secondary: { color: "#fff" },
19
+ outline: { color: "#000" },
20
+ ghost: { color: "#000" }
21
+ };
22
+ var labelSizeStyles = {
23
+ sm: { fontSize: 13 },
24
+ md: { fontSize: 15 },
25
+ lg: { fontSize: 17 }
26
+ };
27
+ function Button({
28
+ label,
29
+ variant = "primary",
30
+ size = "md",
31
+ loading = false,
32
+ fullWidth = false,
33
+ disabled,
34
+ style,
35
+ ...props
36
+ }) {
37
+ const isDisabled = disabled || loading;
38
+ return /* @__PURE__ */ React3.createElement(
39
+ TouchableOpacity,
40
+ {
41
+ style: [
42
+ styles.base,
43
+ containerVariantStyles[variant],
44
+ containerSizeStyles[size],
45
+ fullWidth && styles.fullWidth,
46
+ isDisabled && styles.disabled,
47
+ style
48
+ ],
49
+ disabled: isDisabled,
50
+ activeOpacity: 0.75,
51
+ ...props
52
+ },
53
+ loading ? /* @__PURE__ */ React3.createElement(
54
+ ActivityIndicator,
55
+ {
56
+ size: "small",
57
+ color: variant === "outline" || variant === "ghost" ? "#000" : "#fff"
58
+ }
59
+ ) : /* @__PURE__ */ React3.createElement(Text, { style: [styles.label, labelVariantStyles[variant], labelSizeStyles[size]] }, label)
60
+ );
61
+ }
62
+ var styles = StyleSheet.create({
63
+ base: {
64
+ borderRadius: 8,
65
+ alignItems: "center",
66
+ justifyContent: "center",
67
+ flexDirection: "row"
68
+ },
69
+ fullWidth: {
70
+ width: "100%"
71
+ },
72
+ disabled: {
73
+ opacity: 0.45
74
+ },
75
+ label: {
76
+ fontWeight: "600"
77
+ }
78
+ });
79
+ var variantStyles = {
80
+ h1: { fontSize: 32, fontWeight: "700", lineHeight: 40 },
81
+ h2: { fontSize: 24, fontWeight: "700", lineHeight: 32 },
82
+ h3: { fontSize: 20, fontWeight: "600", lineHeight: 28 },
83
+ body: { fontSize: 16, fontWeight: "400", lineHeight: 24 },
84
+ caption: { fontSize: 12, fontWeight: "400", lineHeight: 18, color: "#6B7280" },
85
+ label: { fontSize: 14, fontWeight: "500", lineHeight: 20 }
86
+ };
87
+ function Text2({ variant = "body", color, style, children, ...props }) {
88
+ return /* @__PURE__ */ React3.createElement(
89
+ Text,
90
+ {
91
+ style: [variantStyles[variant], color ? { color } : void 0, style],
92
+ ...props
93
+ },
94
+ children
95
+ );
96
+ }
97
+ function Input({ label, error, hint, style, onFocus, onBlur, ...props }) {
98
+ const [focused, setFocused] = useState(false);
99
+ return /* @__PURE__ */ React3.createElement(View, { style: styles2.container }, label ? /* @__PURE__ */ React3.createElement(Text, { style: styles2.label }, label) : null, /* @__PURE__ */ React3.createElement(
100
+ TextInput,
101
+ {
102
+ style: [
103
+ styles2.input,
104
+ focused && styles2.inputFocused,
105
+ error ? styles2.inputError : void 0,
106
+ style
107
+ ],
108
+ onFocus: (e) => {
109
+ setFocused(true);
110
+ onFocus?.(e);
111
+ },
112
+ onBlur: (e) => {
113
+ setFocused(false);
114
+ onBlur?.(e);
115
+ },
116
+ placeholderTextColor: "#9CA3AF",
117
+ ...props
118
+ }
119
+ ), error ? /* @__PURE__ */ React3.createElement(Text, { style: styles2.errorText }, error) : null, !error && hint ? /* @__PURE__ */ React3.createElement(Text, { style: styles2.hintText }, hint) : null);
120
+ }
121
+ var styles2 = StyleSheet.create({
122
+ container: {
123
+ gap: 4
124
+ },
125
+ label: {
126
+ fontSize: 14,
127
+ fontWeight: "500",
128
+ color: "#111827",
129
+ marginBottom: 2
130
+ },
131
+ input: {
132
+ borderWidth: 1.5,
133
+ borderColor: "#D1D5DB",
134
+ borderRadius: 8,
135
+ paddingHorizontal: 12,
136
+ paddingVertical: 10,
137
+ fontSize: 15,
138
+ color: "#111827",
139
+ backgroundColor: "#fff"
140
+ },
141
+ inputFocused: {
142
+ borderColor: "#000"
143
+ },
144
+ inputError: {
145
+ borderColor: "#EF4444"
146
+ },
147
+ errorText: {
148
+ fontSize: 12,
149
+ color: "#EF4444"
150
+ },
151
+ hintText: {
152
+ fontSize: 12,
153
+ color: "#6B7280"
154
+ }
155
+ });
156
+
157
+ export { Button, Input, Text2 as Text };
package/package.json ADDED
@@ -0,0 +1,43 @@
1
+ {
2
+ "name": "@retray-dev/ui-kit",
3
+ "version": "0.1.0",
4
+ "description": "Personal UI Kit for React Native / Expo",
5
+ "main": "./dist/index.js",
6
+ "module": "./dist/index.mjs",
7
+ "types": "./dist/index.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "types": "./dist/index.d.ts",
11
+ "import": "./dist/index.mjs",
12
+ "require": "./dist/index.js"
13
+ }
14
+ },
15
+ "files": [
16
+ "dist",
17
+ "src"
18
+ ],
19
+ "scripts": {
20
+ "build": "tsup",
21
+ "dev": "tsup --watch",
22
+ "typecheck": "tsc --noEmit",
23
+ "release": "npm run typecheck && npm run build && npm publish --access public"
24
+ },
25
+ "keywords": [
26
+ "react-native",
27
+ "expo",
28
+ "ui-kit",
29
+ "components"
30
+ ],
31
+ "license": "MIT",
32
+ "peerDependencies": {
33
+ "react": ">=17",
34
+ "react-native": ">=0.70"
35
+ },
36
+ "devDependencies": {
37
+ "@types/react": "^18.3.0",
38
+ "react": "18.2.0",
39
+ "react-native": "0.74.0",
40
+ "tsup": "^8.0.0",
41
+ "typescript": "^5.4.0"
42
+ }
43
+ }
package/src/components/Button/Button.tsx ADDED
@@ -0,0 +1,105 @@
1
+ import React from 'react'
2
+ import {
3
+ TouchableOpacity,
4
+ Text,
5
+ ActivityIndicator,
6
+ StyleSheet,
7
+ TouchableOpacityProps,
8
+ ViewStyle,
9
+ TextStyle,
10
+ } from 'react-native'
11
+
12
+ export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost'
13
+ export type ButtonSize = 'sm' | 'md' | 'lg'
14
+
15
+ export interface ButtonProps extends TouchableOpacityProps {
16
+ label: string
17
+ variant?: ButtonVariant
18
+ size?: ButtonSize
19
+ loading?: boolean
20
+ fullWidth?: boolean
21
+ }
22
+
23
+ const containerVariantStyles: Record<ButtonVariant, ViewStyle> = {
24
+ primary: { backgroundColor: '#000' },
25
+ secondary: { backgroundColor: '#6B7280' },
26
+ outline: { backgroundColor: 'transparent', borderWidth: 1.5, borderColor: '#000' },
27
+ ghost: { backgroundColor: 'transparent' },
28
+ }
29
+
30
+ const containerSizeStyles: Record<ButtonSize, ViewStyle> = {
31
+ sm: { paddingHorizontal: 12, paddingVertical: 6 },
32
+ md: { paddingHorizontal: 16, paddingVertical: 10 },
33
+ lg: { paddingHorizontal: 24, paddingVertical: 14 },
34
+ }
35
+
36
+ const labelVariantStyles: Record<ButtonVariant, TextStyle> = {
37
+ primary: { color: '#fff' },
38
+ secondary: { color: '#fff' },
39
+ outline: { color: '#000' },
40
+ ghost: { color: '#000' },
41
+ }
42
+
43
+ const labelSizeStyles: Record<ButtonSize, TextStyle> = {
44
+ sm: { fontSize: 13 },
45
+ md: { fontSize: 15 },
46
+ lg: { fontSize: 17 },
47
+ }
48
+
49
+ export function Button({
50
+ label,
51
+ variant = 'primary',
52
+ size = 'md',
53
+ loading = false,
54
+ fullWidth = false,
55
+ disabled,
56
+ style,
57
+ ...props
58
+ }: ButtonProps) {
59
+ const isDisabled = disabled || loading
60
+
61
+ return (
62
+ <TouchableOpacity
63
+ style={[
64
+ styles.base,
65
+ containerVariantStyles[variant],
66
+ containerSizeStyles[size],
67
+ fullWidth && styles.fullWidth,
68
+ isDisabled && styles.disabled,
69
+ style,
70
+ ]}
71
+ disabled={isDisabled}
72
+ activeOpacity={0.75}
73
+ {...props}
74
+ >
75
+ {loading ? (
76
+ <ActivityIndicator
77
+ size="small"
78
+ color={variant === 'outline' || variant === 'ghost' ? '#000' : '#fff'}
79
+ />
80
+ ) : (
81
+ <Text style={[styles.label, labelVariantStyles[variant], labelSizeStyles[size]]}>
82
+ {label}
83
+ </Text>
84
+ )}
85
+ </TouchableOpacity>
86
+ )
87
+ }
88
+
89
+ const styles = StyleSheet.create({
90
+ base: {
91
+ borderRadius: 8,
92
+ alignItems: 'center',
93
+ justifyContent: 'center',
94
+ flexDirection: 'row',
95
+ },
96
+ fullWidth: {
97
+ width: '100%',
98
+ },
99
+ disabled: {
100
+ opacity: 0.45,
101
+ },
102
+ label: {
103
+ fontWeight: '600',
104
+ },
105
+ })
package/src/components/Button/index.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { Button } from './Button'
2
+ export type { ButtonProps, ButtonVariant, ButtonSize } from './Button'
package/src/components/Input/Input.tsx ADDED
@@ -0,0 +1,80 @@
1
+ import React, { useState } from 'react'
2
+ import {
3
+ TextInput,
4
+ View,
5
+ Text,
6
+ StyleSheet,
7
+ TextInputProps,
8
+ } from 'react-native'
9
+
10
+ export interface InputProps extends TextInputProps {
11
+ label?: string
12
+ error?: string
13
+ hint?: string
14
+ }
15
+
16
+ export function Input({ label, error, hint, style, onFocus, onBlur, ...props }: InputProps) {
17
+ const [focused, setFocused] = useState(false)
18
+
19
+ return (
20
+ <View style={styles.container}>
21
+ {label ? <Text style={styles.label}>{label}</Text> : null}
22
+ <TextInput
23
+ style={[
24
+ styles.input,
25
+ focused && styles.inputFocused,
26
+ error ? styles.inputError : undefined,
27
+ style,
28
+ ]}
29
+ onFocus={(e) => {
30
+ setFocused(true)
31
+ onFocus?.(e)
32
+ }}
33
+ onBlur={(e) => {
34
+ setFocused(false)
35
+ onBlur?.(e)
36
+ }}
37
+ placeholderTextColor="#9CA3AF"
38
+ {...props}
39
+ />
40
+ {error ? <Text style={styles.errorText}>{error}</Text> : null}
41
+ {!error && hint ? <Text style={styles.hintText}>{hint}</Text> : null}
42
+ </View>
43
+ )
44
+ }
45
+
46
+ const styles = StyleSheet.create({
47
+ container: {
48
+ gap: 4,
49
+ },
50
+ label: {
51
+ fontSize: 14,
52
+ fontWeight: '500',
53
+ color: '#111827',
54
+ marginBottom: 2,
55
+ },
56
+ input: {
57
+ borderWidth: 1.5,
58
+ borderColor: '#D1D5DB',
59
+ borderRadius: 8,
60
+ paddingHorizontal: 12,
61
+ paddingVertical: 10,
62
+ fontSize: 15,
63
+ color: '#111827',
64
+ backgroundColor: '#fff',
65
+ },
66
+ inputFocused: {
67
+ borderColor: '#000',
68
+ },
69
+ inputError: {
70
+ borderColor: '#EF4444',
71
+ },
72
+ errorText: {
73
+ fontSize: 12,
74
+ color: '#EF4444',
75
+ },
76
+ hintText: {
77
+ fontSize: 12,
78
+ color: '#6B7280',
79
+ },
80
+ })
package/src/components/Input/index.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { Input } from './Input'
2
+ export type { InputProps } from './Input'
package/src/components/Text/Text.tsx ADDED
@@ -0,0 +1,29 @@
1
+ import React from 'react'
2
+ import { Text as RNText, StyleSheet, TextProps as RNTextProps, TextStyle } from 'react-native'
3
+
4
+ export type TextVariant = 'h1' | 'h2' | 'h3' | 'body' | 'caption' | 'label'
5
+
6
+ export interface TextProps extends RNTextProps {
7
+ variant?: TextVariant
8
+ color?: string
9
+ }
10
+
11
+ const variantStyles: Record<TextVariant, TextStyle> = {
12
+ h1: { fontSize: 32, fontWeight: '700', lineHeight: 40 },
13
+ h2: { fontSize: 24, fontWeight: '700', lineHeight: 32 },
14
+ h3: { fontSize: 20, fontWeight: '600', lineHeight: 28 },
15
+ body: { fontSize: 16, fontWeight: '400', lineHeight: 24 },
16
+ caption: { fontSize: 12, fontWeight: '400', lineHeight: 18, color: '#6B7280' },
17
+ label: { fontSize: 14, fontWeight: '500', lineHeight: 20 },
18
+ }
19
+
20
+ export function Text({ variant = 'body', color, style, children, ...props }: TextProps) {
21
+ return (
22
+ <RNText
23
+ style={[variantStyles[variant], color ? { color } : undefined, style]}
24
+ {...props}
25
+ >
26
+ {children}
27
+ </RNText>
28
+ )
29
+ }
package/src/components/Text/index.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { Text } from './Text'
2
+ export type { TextProps, TextVariant } from './Text'
package/src/index.ts ADDED
@@ -0,0 +1,3 @@
1
+ export * from './components/Button'
2
+ export * from './components/Text'
3
+ export * from './components/Input'