@spelyco/react-native 0.0.1-29c05d1e-alpha
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/README.md +58 -0
- package/dist/index.d.mts +11 -0
- package/dist/index.d.ts +11 -0
- package/dist/index.js +28 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +26 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +49 -0
package/README.md
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
# @spelyco/react-native
|
|
2
|
+
|
|
3
|
+
React Native UI components for Spelyco.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
bun add @spelyco/react-native react-native react
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Components
|
|
12
|
+
|
|
13
|
+
### Button
|
|
14
|
+
|
|
15
|
+
A customizable button built on `Pressable` with variant and size support.
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import { Button } from "@spelyco/react-native";
|
|
19
|
+
|
|
20
|
+
<Button label="Click me" />
|
|
21
|
+
<Button label="Secondary" variant="secondary" />
|
|
22
|
+
<Button label="Ghost" variant="ghost" size="lg" />
|
|
23
|
+
<Button label="Disabled" disabled />
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
| Prop | Type | Default | Description |
|
|
27
|
+
|---|---|---|---|
|
|
28
|
+
| `label` | `string` | — | Button text (required) |
|
|
29
|
+
| `variant` | `"primary" \| "secondary" \| "ghost"` | `"primary"` | Visual style |
|
|
30
|
+
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Padding size |
|
|
31
|
+
| `...props` | `PressableProps` | — | All React Native Pressable props |
|
|
32
|
+
|
|
33
|
+
**Variants**
|
|
34
|
+
|
|
35
|
+
| Variant | Background |
|
|
36
|
+
|---|---|
|
|
37
|
+
| `primary` | `#6366f1` (indigo) |
|
|
38
|
+
| `secondary` | `#e5e7eb` (light gray) |
|
|
39
|
+
| `ghost` | transparent |
|
|
40
|
+
|
|
41
|
+
**Sizes**
|
|
42
|
+
|
|
43
|
+
| Size | Padding |
|
|
44
|
+
|---|---|
|
|
45
|
+
| `sm` | `12×6` |
|
|
46
|
+
| `md` | `16×10` |
|
|
47
|
+
| `lg` | `24×14` |
|
|
48
|
+
|
|
49
|
+
## Peer Dependencies
|
|
50
|
+
|
|
51
|
+
| Package | Version |
|
|
52
|
+
|---|---|
|
|
53
|
+
| `react` | `>=18` |
|
|
54
|
+
| `react-native` | `>=0.73` |
|
|
55
|
+
|
|
56
|
+
## License
|
|
57
|
+
|
|
58
|
+
MIT
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { PressableProps } from 'react-native';
|
|
3
|
+
|
|
4
|
+
interface ButtonProps extends PressableProps {
|
|
5
|
+
variant?: "primary" | "secondary" | "ghost";
|
|
6
|
+
size?: "sm" | "md" | "lg";
|
|
7
|
+
label: string;
|
|
8
|
+
}
|
|
9
|
+
declare function Button({ variant, size, label, style, ...props }: ButtonProps): react.JSX.Element;
|
|
10
|
+
|
|
11
|
+
export { Button };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { PressableProps } from 'react-native';
|
|
3
|
+
|
|
4
|
+
interface ButtonProps extends PressableProps {
|
|
5
|
+
variant?: "primary" | "secondary" | "ghost";
|
|
6
|
+
size?: "sm" | "md" | "lg";
|
|
7
|
+
label: string;
|
|
8
|
+
}
|
|
9
|
+
declare function Button({ variant, size, label, style, ...props }: ButtonProps): react.JSX.Element;
|
|
10
|
+
|
|
11
|
+
export { Button };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var reactNative = require('react-native');
|
|
4
|
+
|
|
5
|
+
// src/components/Button/Button.tsx
|
|
6
|
+
function Button({ variant = "primary", size = "md", label, style, ...props }) {
|
|
7
|
+
return /* @__PURE__ */ React.createElement(reactNative.Pressable, { style: [styles.base, styles[variant], styles[size], style], ...props }, /* @__PURE__ */ React.createElement(reactNative.Text, { style: styles.label }, label));
|
|
8
|
+
}
|
|
9
|
+
var styles = reactNative.StyleSheet.create({
|
|
10
|
+
base: {
|
|
11
|
+
alignItems: "center",
|
|
12
|
+
justifyContent: "center",
|
|
13
|
+
borderRadius: 8
|
|
14
|
+
},
|
|
15
|
+
label: {
|
|
16
|
+
fontWeight: "600"
|
|
17
|
+
},
|
|
18
|
+
primary: { backgroundColor: "#6366f1" },
|
|
19
|
+
secondary: { backgroundColor: "#e5e7eb" },
|
|
20
|
+
ghost: { backgroundColor: "transparent" },
|
|
21
|
+
sm: { paddingHorizontal: 12, paddingVertical: 6 },
|
|
22
|
+
md: { paddingHorizontal: 16, paddingVertical: 10 },
|
|
23
|
+
lg: { paddingHorizontal: 24, paddingVertical: 14 }
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
exports.Button = Button;
|
|
27
|
+
//# sourceMappingURL=index.js.map
|
|
28
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Button/Button.tsx"],"names":["Pressable","Text","StyleSheet"],"mappings":";;;;;AASO,SAAS,MAAA,CAAO,EAAE,OAAA,GAAU,SAAA,EAAW,IAAA,GAAO,MAAM,KAAA,EAAO,KAAA,EAAO,GAAG,KAAA,EAAM,EAAgB;AAChG,EAAA,uBACE,KAAA,CAAA,aAAA,CAACA,yBAAU,KAAA,EAAO,CAAC,OAAO,IAAA,EAAM,MAAA,CAAO,OAAO,CAAA,EAAG,MAAA,CAAO,IAAI,GAAG,KAAkB,CAAA,EAAI,GAAG,KAAA,EAAA,kBACtF,KAAA,CAAA,aAAA,CAACC,oBAAK,KAAA,EAAO,MAAA,CAAO,KAAA,EAAA,EAAQ,KAAM,CACpC,CAAA;AAEJ;AAEA,IAAM,MAAA,GAASC,uBAAW,MAAA,CAAO;AAAA,EAC/B,IAAA,EAAM;AAAA,IACJ,UAAA,EAAY,QAAA;AAAA,IACZ,cAAA,EAAgB,QAAA;AAAA,IAChB,YAAA,EAAc;AAAA,GAChB;AAAA,EACA,KAAA,EAAO;AAAA,IACL,UAAA,EAAY;AAAA,GACd;AAAA,EACA,OAAA,EAAS,EAAE,eAAA,EAAiB,SAAA,EAAU;AAAA,EACtC,SAAA,EAAW,EAAE,eAAA,EAAiB,SAAA,EAAU;AAAA,EACxC,KAAA,EAAO,EAAE,eAAA,EAAiB,aAAA,EAAc;AAAA,EACxC,EAAA,EAAI,EAAE,iBAAA,EAAmB,EAAA,EAAI,iBAAiB,CAAA,EAAE;AAAA,EAChD,EAAA,EAAI,EAAE,iBAAA,EAAmB,EAAA,EAAI,iBAAiB,EAAA,EAAG;AAAA,EACjD,EAAA,EAAI,EAAE,iBAAA,EAAmB,EAAA,EAAI,iBAAiB,EAAA;AAChD,CAAC,CAAA","file":"index.js","sourcesContent":["import type { PressableProps, TextStyle, ViewStyle } from \"react-native\";\nimport { Pressable, StyleSheet, Text } from \"react-native\";\n\nexport interface ButtonProps extends PressableProps {\n variant?: \"primary\" | \"secondary\" | \"ghost\";\n size?: \"sm\" | \"md\" | \"lg\";\n label: string;\n}\n\nexport function Button({ variant = \"primary\", size = \"md\", label, style, ...props }: ButtonProps) {\n return (\n <Pressable style={[styles.base, styles[variant], styles[size], style as ViewStyle]} {...props}>\n <Text style={styles.label}>{label}</Text>\n </Pressable>\n );\n}\n\nconst styles = StyleSheet.create({\n base: {\n alignItems: \"center\",\n justifyContent: \"center\",\n borderRadius: 8,\n },\n label: {\n fontWeight: \"600\",\n } as TextStyle,\n primary: { backgroundColor: \"#6366f1\" } as ViewStyle,\n secondary: { backgroundColor: \"#e5e7eb\" } as ViewStyle,\n ghost: { backgroundColor: \"transparent\" } as ViewStyle,\n sm: { paddingHorizontal: 12, paddingVertical: 6 } as ViewStyle,\n md: { paddingHorizontal: 16, paddingVertical: 10 } as ViewStyle,\n lg: { paddingHorizontal: 24, paddingVertical: 14 } as ViewStyle,\n});\n"]}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { StyleSheet, Pressable, Text } from 'react-native';
|
|
2
|
+
|
|
3
|
+
// src/components/Button/Button.tsx
|
|
4
|
+
function Button({ variant = "primary", size = "md", label, style, ...props }) {
|
|
5
|
+
return /* @__PURE__ */ React.createElement(Pressable, { style: [styles.base, styles[variant], styles[size], style], ...props }, /* @__PURE__ */ React.createElement(Text, { style: styles.label }, label));
|
|
6
|
+
}
|
|
7
|
+
var styles = StyleSheet.create({
|
|
8
|
+
base: {
|
|
9
|
+
alignItems: "center",
|
|
10
|
+
justifyContent: "center",
|
|
11
|
+
borderRadius: 8
|
|
12
|
+
},
|
|
13
|
+
label: {
|
|
14
|
+
fontWeight: "600"
|
|
15
|
+
},
|
|
16
|
+
primary: { backgroundColor: "#6366f1" },
|
|
17
|
+
secondary: { backgroundColor: "#e5e7eb" },
|
|
18
|
+
ghost: { backgroundColor: "transparent" },
|
|
19
|
+
sm: { paddingHorizontal: 12, paddingVertical: 6 },
|
|
20
|
+
md: { paddingHorizontal: 16, paddingVertical: 10 },
|
|
21
|
+
lg: { paddingHorizontal: 24, paddingVertical: 14 }
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
export { Button };
|
|
25
|
+
//# sourceMappingURL=index.mjs.map
|
|
26
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Button/Button.tsx"],"names":[],"mappings":";;;AASO,SAAS,MAAA,CAAO,EAAE,OAAA,GAAU,SAAA,EAAW,IAAA,GAAO,MAAM,KAAA,EAAO,KAAA,EAAO,GAAG,KAAA,EAAM,EAAgB;AAChG,EAAA,uBACE,KAAA,CAAA,aAAA,CAAC,aAAU,KAAA,EAAO,CAAC,OAAO,IAAA,EAAM,MAAA,CAAO,OAAO,CAAA,EAAG,MAAA,CAAO,IAAI,GAAG,KAAkB,CAAA,EAAI,GAAG,KAAA,EAAA,kBACtF,KAAA,CAAA,aAAA,CAAC,QAAK,KAAA,EAAO,MAAA,CAAO,KAAA,EAAA,EAAQ,KAAM,CACpC,CAAA;AAEJ;AAEA,IAAM,MAAA,GAAS,WAAW,MAAA,CAAO;AAAA,EAC/B,IAAA,EAAM;AAAA,IACJ,UAAA,EAAY,QAAA;AAAA,IACZ,cAAA,EAAgB,QAAA;AAAA,IAChB,YAAA,EAAc;AAAA,GAChB;AAAA,EACA,KAAA,EAAO;AAAA,IACL,UAAA,EAAY;AAAA,GACd;AAAA,EACA,OAAA,EAAS,EAAE,eAAA,EAAiB,SAAA,EAAU;AAAA,EACtC,SAAA,EAAW,EAAE,eAAA,EAAiB,SAAA,EAAU;AAAA,EACxC,KAAA,EAAO,EAAE,eAAA,EAAiB,aAAA,EAAc;AAAA,EACxC,EAAA,EAAI,EAAE,iBAAA,EAAmB,EAAA,EAAI,iBAAiB,CAAA,EAAE;AAAA,EAChD,EAAA,EAAI,EAAE,iBAAA,EAAmB,EAAA,EAAI,iBAAiB,EAAA,EAAG;AAAA,EACjD,EAAA,EAAI,EAAE,iBAAA,EAAmB,EAAA,EAAI,iBAAiB,EAAA;AAChD,CAAC,CAAA","file":"index.mjs","sourcesContent":["import type { PressableProps, TextStyle, ViewStyle } from \"react-native\";\nimport { Pressable, StyleSheet, Text } from \"react-native\";\n\nexport interface ButtonProps extends PressableProps {\n variant?: \"primary\" | \"secondary\" | \"ghost\";\n size?: \"sm\" | \"md\" | \"lg\";\n label: string;\n}\n\nexport function Button({ variant = \"primary\", size = \"md\", label, style, ...props }: ButtonProps) {\n return (\n <Pressable style={[styles.base, styles[variant], styles[size], style as ViewStyle]} {...props}>\n <Text style={styles.label}>{label}</Text>\n </Pressable>\n );\n}\n\nconst styles = StyleSheet.create({\n base: {\n alignItems: \"center\",\n justifyContent: \"center\",\n borderRadius: 8,\n },\n label: {\n fontWeight: \"600\",\n } as TextStyle,\n primary: { backgroundColor: \"#6366f1\" } as ViewStyle,\n secondary: { backgroundColor: \"#e5e7eb\" } as ViewStyle,\n ghost: { backgroundColor: \"transparent\" } as ViewStyle,\n sm: { paddingHorizontal: 12, paddingVertical: 6 } as ViewStyle,\n md: { paddingHorizontal: 16, paddingVertical: 10 } as ViewStyle,\n lg: { paddingHorizontal: 24, paddingVertical: 14 } as ViewStyle,\n});\n"]}
|
package/package.json
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@spelyco/react-native",
|
|
3
|
+
"version": "0.0.1-29c05d1e-alpha",
|
|
4
|
+
"description": "React Native UI components for Spelyco",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"react-native",
|
|
7
|
+
"ui",
|
|
8
|
+
"components",
|
|
9
|
+
"spelyco"
|
|
10
|
+
],
|
|
11
|
+
"license": "MIT",
|
|
12
|
+
"main": "./dist/index.js",
|
|
13
|
+
"module": "./dist/index.mjs",
|
|
14
|
+
"types": "./dist/index.d.ts",
|
|
15
|
+
"exports": {
|
|
16
|
+
".": {
|
|
17
|
+
"types": "./dist/index.d.ts",
|
|
18
|
+
"import": "./dist/index.mjs",
|
|
19
|
+
"require": "./dist/index.js"
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
"files": [
|
|
23
|
+
"dist"
|
|
24
|
+
],
|
|
25
|
+
"scripts": {
|
|
26
|
+
"build": "tsup",
|
|
27
|
+
"dev": "tsup --watch",
|
|
28
|
+
"lint": "biome check src/",
|
|
29
|
+
"lint:fix": "biome check --write src/",
|
|
30
|
+
"test": "vitest run --passWithNoTests",
|
|
31
|
+
"test:watch": "vitest",
|
|
32
|
+
"clean": "rm -rf dist"
|
|
33
|
+
},
|
|
34
|
+
"peerDependencies": {
|
|
35
|
+
"react": ">=18",
|
|
36
|
+
"react-native": ">=0.73"
|
|
37
|
+
},
|
|
38
|
+
"dependencies": {
|
|
39
|
+
"@spelyco/react-lib": "0.0.1-alpha"
|
|
40
|
+
},
|
|
41
|
+
"devDependencies": {
|
|
42
|
+
"@spelyco/tsconfig": "*",
|
|
43
|
+
"@types/react": "^19.2.14",
|
|
44
|
+
"react": "^19.2.4",
|
|
45
|
+
"react-native": "^0.84.1",
|
|
46
|
+
"tsup": "^8.3.5",
|
|
47
|
+
"vitest": "^4.1.1"
|
|
48
|
+
}
|
|
49
|
+
}
|