@spelyco/react-native 0.0.1-alpha

package/README.md

@@ -0,0 +1,58 @@
+# @spelyco/react-native
+
+React Native UI components for Spelyco.
+
+## Installation
+
+```bash
+bun add @spelyco/react-native react-native react
+```
+
+## Components
+
+### Button
+
+A customizable button built on `Pressable` with variant and size support.
+
+```tsx
+import { Button } from "@spelyco/react-native";
+
+<Button label="Click me" />
+<Button label="Secondary" variant="secondary" />
+<Button label="Ghost" variant="ghost" size="lg" />
+<Button label="Disabled" disabled />
+```
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `label` | `string` | — | Button text (required) |
+| `variant` | `"primary" \| "secondary" \| "ghost"` | `"primary"` | Visual style |
+| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Padding size |
+| `...props` | `PressableProps` | — | All React Native Pressable props |
+
+**Variants**
+
+| Variant | Background |
+|---|---|
+| `primary` | `#6366f1` (indigo) |
+| `secondary` | `#e5e7eb` (light gray) |
+| `ghost` | transparent |
+
+**Sizes**
+
+| Size | Padding |
+|---|---|
+| `sm` | `12×6` |
+| `md` | `16×10` |
+| `lg` | `24×14` |
+
+## Peer Dependencies
+
+| Package | Version |
+|---|---|
+| `react` | `>=18` |
+| `react-native` | `>=0.73` |
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import { PressableProps } from 'react-native';
+
+interface ButtonProps extends PressableProps {
+    variant?: "primary" | "secondary" | "ghost";
+    size?: "sm" | "md" | "lg";
+    label: string;
+}
+declare function Button({ variant, size, label, style, ...props }: ButtonProps): react.JSX.Element;
+
+export { Button };

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import { PressableProps } from 'react-native';
+
+interface ButtonProps extends PressableProps {
+    variant?: "primary" | "secondary" | "ghost";
+    size?: "sm" | "md" | "lg";
+    label: string;
+}
+declare function Button({ variant, size, label, style, ...props }: ButtonProps): react.JSX.Element;
+
+export { Button };

package/dist/index.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var reactNative = require('react-native');
+
+// src/components/Button/Button.tsx
+function Button({ variant = "primary", size = "md", label, style, ...props }) {
+  return /* @__PURE__ */ React.createElement(reactNative.Pressable, { style: [styles.base, styles[variant], styles[size], style], ...props }, /* @__PURE__ */ React.createElement(reactNative.Text, { style: styles.label }, label));
+}
+var styles = reactNative.StyleSheet.create({
+  base: {
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 8
+  },
+  label: {
+    fontWeight: "600"
+  },
+  primary: { backgroundColor: "#6366f1" },
+  secondary: { backgroundColor: "#e5e7eb" },
+  ghost: { backgroundColor: "transparent" },
+  sm: { paddingHorizontal: 12, paddingVertical: 6 },
+  md: { paddingHorizontal: 16, paddingVertical: 10 },
+  lg: { paddingHorizontal: 24, paddingVertical: 14 }
+});
+
+exports.Button = Button;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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

@@ -0,0 +1,26 @@
+import { StyleSheet, Pressable, Text } from 'react-native';
+
+// src/components/Button/Button.tsx
+function Button({ variant = "primary", size = "md", label, style, ...props }) {
+  return /* @__PURE__ */ React.createElement(Pressable, { style: [styles.base, styles[variant], styles[size], style], ...props }, /* @__PURE__ */ React.createElement(Text, { style: styles.label }, label));
+}
+var styles = StyleSheet.create({
+  base: {
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 8
+  },
+  label: {
+    fontWeight: "600"
+  },
+  primary: { backgroundColor: "#6366f1" },
+  secondary: { backgroundColor: "#e5e7eb" },
+  ghost: { backgroundColor: "transparent" },
+  sm: { paddingHorizontal: 12, paddingVertical: 6 },
+  md: { paddingHorizontal: 16, paddingVertical: 10 },
+  lg: { paddingHorizontal: 24, paddingVertical: 14 }
+});
+
+export { Button };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +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

@@ -0,0 +1,49 @@
+{
+  "name": "@spelyco/react-native",
+  "version": "0.0.1-alpha",
+  "description": "React Native UI components for Spelyco",
+  "keywords": [
+    "react-native",
+    "ui",
+    "components",
+    "spelyco"
+  ],
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "biome check src/",
+    "lint:fix": "biome check --write src/",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest",
+    "clean": "rm -rf dist"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.73"
+  },
+  "dependencies": {
+    "@spelyco/react-lib": "0.0.1-alpha"
+  },
+  "devDependencies": {
+    "@spelyco/tsconfig": "*",
+    "@types/react": "^19.2.14",
+    "react": "^19.2.4",
+    "react-native": "^0.84.1",
+    "tsup": "^8.3.5",
+    "vitest": "^4.1.1"
+  }
+}