@wireservers-ui/react-natives 1.0.0 → 1.0.1-rc2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Wireservers
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,98 +1,214 @@
-# @wireservers-ui/react-natives
-
-70+ production-ready React Native components — TypeScript-first, themeable, accessible.
-
-Built with [NativeWind](https://www.nativewind.dev/) and [Tailwind Variants](https://www.tailwind-variants.org/).
-
-## Installation
-
-```bash
-npm install @wireservers-ui/react-natives
-```
-
-### Peer Dependencies
-
-Make sure you have the following installed in your project:
-
-```bash
-npm install nativewind tailwind-variants react-native-reanimated react-native-gesture-handler react-native-svg
-```
-
-`react-native-reanimated`, `react-native-gesture-handler`, and `react-native-svg` are optional — only needed if you use components that depend on them.
-
-## Setup
-
-Add the preset to your `tailwind.config.js`:
-
-```js
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./app/**/*.{js,jsx,ts,tsx}",
-    // ...your other content paths
-  ],
-  presets: [require("@wireservers-ui/react-natives/tailwind-preset")],
-};
-```
-
-The preset includes the NativeWind preset, the full color/theme system, and automatic content scanning of the component library — no additional configuration needed.
-
-### Theme Variables
-
-Components use CSS variables for theming. Define them in your global CSS to customize colors:
-
-```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --color-primary-500: 80 70 230;
-  --color-background-0: 255 255 255;
-  --color-typography-900: 23 23 23;
-  /* ... */
-}
-
-.dark {
-  --color-primary-500: 120 110 255;
-  --color-background-0: 24 23 25;
-  --color-typography-900: 245 245 245;
-  /* ... */
-}
-```
-
-## Usage
-
-```tsx
-import { Button, ButtonText } from "@wireservers-ui/react-natives";
-
-export function MyComponent() {
-  return (
-    <Button action="primary" variant="solid" size="md">
-      <ButtonText>Get Started</ButtonText>
-    </Button>
-  );
-}
-```
-
-## Components
-
-Includes 70+ components across these categories:
-
-**Core** — Text, Heading, Icon, Divider, Badge, Spinner, Image, Avatar, Card, Button, Kbd, Code, Blockquote
-
-**Form Controls** — Input, Textarea, Switch, Checkbox, Radio, Slider, Select, FormControl, NumberInput, PasswordInput, SearchInput, Rating, TagsInput, DatePicker, PinInput, ColorPicker
-
-**Feedback & Overlay** — Alert, Progress, CircularProgress, Modal, Toast, Tooltip, Drawer, ActionSheet, AlertDialog, Popover, Snackbar, Overlay
-
-**Navigation** — Tabs, Accordion, Breadcrumb, Menu, Pagination, Stepper, SegmentedControl, Fab, Link
-
-**Data Display** — Tag, Skeleton, Empty, Stat, Table, List, Timeline, Carousel
-
-**Layout** — Box, Stack (VStack, HStack), Center, AspectRatio, Container, Pressable, Portal, VisuallyHidden
-
-**Interactive** — Toggle, ToggleGroup, Collapsible, Calendar
-
-## License
-
-MIT
+# React-Natives
+
+**A comprehensive React Native component library built with NativeWind and Tailwind Variants.**
+
+> **Note:** This project is in early development (v0.1.0). We're actively building out components, documentation, and tooling. Expect breaking changes as we iterate toward a stable release. Contributions and feedback are welcome!
+
+[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
+[![npm version](https://img.shields.io/npm/v/@wireservers-ui/react-natives.svg)](https://www.npmjs.com/package/@wireservers-ui/react-natives)
+
+---
+
+## What is React-Natives?
+
+React-Natives is a collection of 70+ production-ready, accessible React Native components. Every component is TypeScript-first, themeable via CSS variables, and styled with NativeWind (Tailwind CSS for React Native).
+
+**Live Demo:** [reactnatives.azurewebsites.net](https://reactnatives.azurewebsites.net)
+
+### Key Features
+
+- **70+ Components** — Buttons, forms, modals, tables, calendars, color pickers, and more
+- **TypeScript First** — Fully typed with excellent IDE autocomplete
+- **NativeWind + Tailwind Variants** — Utility-first styling with type-safe variant APIs
+- **Themeable** — CSS variable-based color system with light/dark mode support
+- **Accessible** — Built with accessibility in mind
+- **Cross Platform** — iOS, Android, and Web via React Native
+
+### Tech Stack
+
+| Layer | Technology |
+| --- | --- |
+| Components | React Native |
+| Styling | NativeWind v4, Tailwind CSS 3, Tailwind Variants |
+| Types | TypeScript |
+
+---
+
+## Quick Start
+
+### Install
+
+```bash
+npm install @wireservers-ui/react-natives
+```
+
+### Peer Dependencies
+
+```bash
+npm install nativewind tailwind-variants react-native-reanimated react-native-gesture-handler react-native-svg
+```
+
+`react-native-reanimated`, `react-native-gesture-handler`, and `react-native-svg` are optional — only required by components that use them.
+
+### Configure Tailwind
+
+Add the preset to your `tailwind.config.js`:
+
+```js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./app/**/*.{js,jsx,ts,tsx}",
+    // ...your content paths
+  ],
+  presets: [require("@wireservers-ui/react-natives/tailwind-preset")],
+};
+```
+
+The preset includes the NativeWind preset, the full color/theme system, content scanning of the library, and safelist rules — no additional configuration needed.
+
+### Use Components
+
+```tsx
+import { Button, ButtonText, Card, CardHeader, CardBody } from "@wireservers-ui/react-natives";
+
+export default function App() {
+  return (
+    <Card>
+      <CardHeader>
+        <Text variant="h2">Welcome</Text>
+      </CardHeader>
+      <CardBody>
+        <Button action="primary" variant="solid" size="md">
+          <ButtonText>Get Started</ButtonText>
+        </Button>
+      </CardBody>
+    </Card>
+  );
+}
+```
+
+---
+
+## Components
+
+### Core Primitives
+
+Text, Heading, Icon, Divider, Badge, Spinner, Image, Avatar, Card, Button, Kbd, Code, Blockquote
+
+### Form Controls
+
+Input, Textarea, Switch, Checkbox, Radio, Slider, Select, FormControl, NumberInput, PasswordInput, SearchInput, Rating, TagsInput, DatePicker, PinInput, ColorPicker
+
+### Feedback & Overlay
+
+Alert, Progress, CircularProgress, Modal, Toast, Tooltip, Drawer, ActionSheet, AlertDialog, Popover, Snackbar, Overlay
+
+### Navigation & Disclosure
+
+Tabs, Accordion, Breadcrumb, Menu, Pagination, Stepper, SegmentedControl, Fab, Link
+
+### Data Display
+
+Tag, Skeleton, Empty, Stat, Table, List, Timeline, Carousel
+
+### Layout
+
+Box, Stack (VStack, HStack), Center, AspectRatio, Container, Pressable, Portal, VisuallyHidden
+
+### Interactive
+
+Toggle, ToggleGroup, Collapsible, Calendar
+
+---
+
+## Theming
+
+Components use CSS variables for theming. Define them in your global CSS:
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --color-primary-500: 80 70 230;
+  --color-background-0: 255 255 255;
+  --color-typography-900: 23 23 23;
+  /* ... */
+}
+
+.dark {
+  --color-primary-500: 120 110 255;
+  --color-background-0: 24 23 25;
+  --color-typography-900: 245 245 245;
+  /* ... */
+}
+```
+
+The color system includes semantic scales (`primary`, `secondary`, `error`, `success`, `warning`, `info`) each with shades from 0–950, plus `typography`, `outline`, `background`, and `indicator` tokens.
+
+---
+
+## Repository Structure
+
+```text
+react-natives/
+├── src/                     # TypeScript source — ships as-is (no build step)
+├── tailwind-preset.js       # Tailwind CSS preset for consumers
+├── tsconfig.json
+└── package.json             # npm package definition
+```
+
+## Development
+
+### Prerequisites
+
+- Node.js 18+
+
+### Setup
+
+```bash
+# Clone the repository
+git clone https://github.com/wireservers/wireservers-ui.git
+cd wireservers-ui/packages/react-natives
+
+# Install dependencies
+npm install
+```
+
+No build step — the library ships TypeScript source directly.
+
+### Branches
+
+| Branch | Purpose |
+| --- | --- |
+| `sot` | Source of truth (main) |
+| `dev` | Development |
+| `prod` | Production |
+
+---
+
+## Roadmap
+
+This project just started — here's what's ahead:
+
+- [ ] Comprehensive documentation for every component
+- [ ] Prop tables and interactive examples
+- [ ] CLI scaffolding tool (`npx create-react-natives`)
+- [ ] More theme presets (Material, iOS native, etc.)
+- [ ] Component testing suite
+- [ ] Storybook integration
+- [ ] Animation presets with Reanimated
+
+---
+
+## Contributing
+
+See [CONTRIBUTING.md](CONTRIBUTING.md) for development setup and guidelines.
+
+We're in the early stages and welcome contributions of all kinds — bug reports, component requests, documentation improvements, and code contributions.
+
+## License
+
+[MIT](LICENSE) — Copyright (c) 2026 Wireservers