@wireservers-ui/react-natives 0.1.0 → 1.0.0-rc.0

package/README.md

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

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@wireservers-ui/react-natives",
-  "version": "0.1.0",
+  "version": "1.0.0-rc.0",
   "description": "70+ production-ready React Native components — TypeScript-first, themeable, accessible. Created by WireServers-UI.",
   "main": "src/index.ts",
   "types": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./tailwind-preset": "./tailwind-preset.js"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -31,7 +35,7 @@
   },
   "files": [
     "src",
-    "assets",
+    "tailwind-preset.js",
     "README.md"
   ],
   "peerDependencies": {

package/tailwind-preset.js

@@ -0,0 +1,203 @@
+const path = require('path');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: 'class',
+  content: [
+    path.join(__dirname, 'src/**/*.{ts,tsx}'),
+  ],
+  presets: [require('nativewind/preset')],
+  safelist: [
+    {
+      pattern:
+        /(bg|border|text|stroke|fill)-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background|indicator)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark|primary)/,
+    },
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          0: 'rgb(var(--color-primary-0)/<alpha-value>)',
+          50: 'rgb(var(--color-primary-50)/<alpha-value>)',
+          100: 'rgb(var(--color-primary-100)/<alpha-value>)',
+          200: 'rgb(var(--color-primary-200)/<alpha-value>)',
+          300: 'rgb(var(--color-primary-300)/<alpha-value>)',
+          400: 'rgb(var(--color-primary-400)/<alpha-value>)',
+          500: 'rgb(var(--color-primary-500)/<alpha-value>)',
+          600: 'rgb(var(--color-primary-600)/<alpha-value>)',
+          700: 'rgb(var(--color-primary-700)/<alpha-value>)',
+          800: 'rgb(var(--color-primary-800)/<alpha-value>)',
+          900: 'rgb(var(--color-primary-900)/<alpha-value>)',
+          950: 'rgb(var(--color-primary-950)/<alpha-value>)',
+        },
+        secondary: {
+          0: 'rgb(var(--color-secondary-0)/<alpha-value>)',
+          50: 'rgb(var(--color-secondary-50)/<alpha-value>)',
+          100: 'rgb(var(--color-secondary-100)/<alpha-value>)',
+          200: 'rgb(var(--color-secondary-200)/<alpha-value>)',
+          300: 'rgb(var(--color-secondary-300)/<alpha-value>)',
+          400: 'rgb(var(--color-secondary-400)/<alpha-value>)',
+          500: 'rgb(var(--color-secondary-500)/<alpha-value>)',
+          600: 'rgb(var(--color-secondary-600)/<alpha-value>)',
+          700: 'rgb(var(--color-secondary-700)/<alpha-value>)',
+          800: 'rgb(var(--color-secondary-800)/<alpha-value>)',
+          900: 'rgb(var(--color-secondary-900)/<alpha-value>)',
+          950: 'rgb(var(--color-secondary-950)/<alpha-value>)',
+        },
+        tertiary: {
+          50: 'rgb(var(--color-tertiary-50)/<alpha-value>)',
+          100: 'rgb(var(--color-tertiary-100)/<alpha-value>)',
+          200: 'rgb(var(--color-tertiary-200)/<alpha-value>)',
+          300: 'rgb(var(--color-tertiary-300)/<alpha-value>)',
+          400: 'rgb(var(--color-tertiary-400)/<alpha-value>)',
+          500: 'rgb(var(--color-tertiary-500)/<alpha-value>)',
+          600: 'rgb(var(--color-tertiary-600)/<alpha-value>)',
+          700: 'rgb(var(--color-tertiary-700)/<alpha-value>)',
+          800: 'rgb(var(--color-tertiary-800)/<alpha-value>)',
+          900: 'rgb(var(--color-tertiary-900)/<alpha-value>)',
+          950: 'rgb(var(--color-tertiary-950)/<alpha-value>)',
+        },
+        error: {
+          0: 'rgb(var(--color-error-0)/<alpha-value>)',
+          50: 'rgb(var(--color-error-50)/<alpha-value>)',
+          100: 'rgb(var(--color-error-100)/<alpha-value>)',
+          200: 'rgb(var(--color-error-200)/<alpha-value>)',
+          300: 'rgb(var(--color-error-300)/<alpha-value>)',
+          400: 'rgb(var(--color-error-400)/<alpha-value>)',
+          500: 'rgb(var(--color-error-500)/<alpha-value>)',
+          600: 'rgb(var(--color-error-600)/<alpha-value>)',
+          700: 'rgb(var(--color-error-700)/<alpha-value>)',
+          800: 'rgb(var(--color-error-800)/<alpha-value>)',
+          900: 'rgb(var(--color-error-900)/<alpha-value>)',
+          950: 'rgb(var(--color-error-950)/<alpha-value>)',
+        },
+        success: {
+          0: 'rgb(var(--color-success-0)/<alpha-value>)',
+          50: 'rgb(var(--color-success-50)/<alpha-value>)',
+          100: 'rgb(var(--color-success-100)/<alpha-value>)',
+          200: 'rgb(var(--color-success-200)/<alpha-value>)',
+          300: 'rgb(var(--color-success-300)/<alpha-value>)',
+          400: 'rgb(var(--color-success-400)/<alpha-value>)',
+          500: 'rgb(var(--color-success-500)/<alpha-value>)',
+          600: 'rgb(var(--color-success-600)/<alpha-value>)',
+          700: 'rgb(var(--color-success-700)/<alpha-value>)',
+          800: 'rgb(var(--color-success-800)/<alpha-value>)',
+          900: 'rgb(var(--color-success-900)/<alpha-value>)',
+          950: 'rgb(var(--color-success-950)/<alpha-value>)',
+        },
+        warning: {
+          0: 'rgb(var(--color-warning-0)/<alpha-value>)',
+          50: 'rgb(var(--color-warning-50)/<alpha-value>)',
+          100: 'rgb(var(--color-warning-100)/<alpha-value>)',
+          200: 'rgb(var(--color-warning-200)/<alpha-value>)',
+          300: 'rgb(var(--color-warning-300)/<alpha-value>)',
+          400: 'rgb(var(--color-warning-400)/<alpha-value>)',
+          500: 'rgb(var(--color-warning-500)/<alpha-value>)',
+          600: 'rgb(var(--color-warning-600)/<alpha-value>)',
+          700: 'rgb(var(--color-warning-700)/<alpha-value>)',
+          800: 'rgb(var(--color-warning-800)/<alpha-value>)',
+          900: 'rgb(var(--color-warning-900)/<alpha-value>)',
+          950: 'rgb(var(--color-warning-950)/<alpha-value>)',
+        },
+        info: {
+          0: 'rgb(var(--color-info-0)/<alpha-value>)',
+          50: 'rgb(var(--color-info-50)/<alpha-value>)',
+          100: 'rgb(var(--color-info-100)/<alpha-value>)',
+          200: 'rgb(var(--color-info-200)/<alpha-value>)',
+          300: 'rgb(var(--color-info-300)/<alpha-value>)',
+          400: 'rgb(var(--color-info-400)/<alpha-value>)',
+          500: 'rgb(var(--color-info-500)/<alpha-value>)',
+          600: 'rgb(var(--color-info-600)/<alpha-value>)',
+          700: 'rgb(var(--color-info-700)/<alpha-value>)',
+          800: 'rgb(var(--color-info-800)/<alpha-value>)',
+          900: 'rgb(var(--color-info-900)/<alpha-value>)',
+          950: 'rgb(var(--color-info-950)/<alpha-value>)',
+        },
+        typography: {
+          0: 'rgb(var(--color-typography-0)/<alpha-value>)',
+          50: 'rgb(var(--color-typography-50)/<alpha-value>)',
+          100: 'rgb(var(--color-typography-100)/<alpha-value>)',
+          200: 'rgb(var(--color-typography-200)/<alpha-value>)',
+          300: 'rgb(var(--color-typography-300)/<alpha-value>)',
+          400: 'rgb(var(--color-typography-400)/<alpha-value>)',
+          500: 'rgb(var(--color-typography-500)/<alpha-value>)',
+          600: 'rgb(var(--color-typography-600)/<alpha-value>)',
+          700: 'rgb(var(--color-typography-700)/<alpha-value>)',
+          800: 'rgb(var(--color-typography-800)/<alpha-value>)',
+          900: 'rgb(var(--color-typography-900)/<alpha-value>)',
+          950: 'rgb(var(--color-typography-950)/<alpha-value>)',
+          white: '#FFFFFF',
+          gray: '#D4D4D4',
+          black: '#181718',
+        },
+        outline: {
+          0: 'rgb(var(--color-outline-0)/<alpha-value>)',
+          50: 'rgb(var(--color-outline-50)/<alpha-value>)',
+          100: 'rgb(var(--color-outline-100)/<alpha-value>)',
+          200: 'rgb(var(--color-outline-200)/<alpha-value>)',
+          300: 'rgb(var(--color-outline-300)/<alpha-value>)',
+          400: 'rgb(var(--color-outline-400)/<alpha-value>)',
+          500: 'rgb(var(--color-outline-500)/<alpha-value>)',
+          600: 'rgb(var(--color-outline-600)/<alpha-value>)',
+          700: 'rgb(var(--color-outline-700)/<alpha-value>)',
+          800: 'rgb(var(--color-outline-800)/<alpha-value>)',
+          900: 'rgb(var(--color-outline-900)/<alpha-value>)',
+          950: 'rgb(var(--color-outline-950)/<alpha-value>)',
+        },
+        background: {
+          0: 'rgb(var(--color-background-0)/<alpha-value>)',
+          50: 'rgb(var(--color-background-50)/<alpha-value>)',
+          100: 'rgb(var(--color-background-100)/<alpha-value>)',
+          200: 'rgb(var(--color-background-200)/<alpha-value>)',
+          300: 'rgb(var(--color-background-300)/<alpha-value>)',
+          400: 'rgb(var(--color-background-400)/<alpha-value>)',
+          500: 'rgb(var(--color-background-500)/<alpha-value>)',
+          600: 'rgb(var(--color-background-600)/<alpha-value>)',
+          700: 'rgb(var(--color-background-700)/<alpha-value>)',
+          800: 'rgb(var(--color-background-800)/<alpha-value>)',
+          900: 'rgb(var(--color-background-900)/<alpha-value>)',
+          950: 'rgb(var(--color-background-950)/<alpha-value>)',
+          error: 'rgb(var(--color-background-error)/<alpha-value>)',
+          warning: 'rgb(var(--color-background-warning)/<alpha-value>)',
+          muted: 'rgb(var(--color-background-muted)/<alpha-value>)',
+          success: 'rgb(var(--color-background-success)/<alpha-value>)',
+          info: 'rgb(var(--color-background-info)/<alpha-value>)',
+          light: '#FBFBFB',
+          dark: '#181719',
+        },
+        indicator: {
+          primary: 'rgb(var(--color-indicator-primary)/<alpha-value>)',
+          info: 'rgb(var(--color-indicator-info)/<alpha-value>)',
+          error: 'rgb(var(--color-indicator-error)/<alpha-value>)',
+        },
+      },
+      fontFamily: {
+        heading: undefined,
+        body: undefined,
+        mono: undefined,
+        jakarta: ['var(--font-plus-jakarta-sans)'],
+        roboto: ['var(--font-roboto)'],
+        code: ['var(--font-source-code-pro)'],
+        inter: ['var(--font-inter)'],
+        'space-mono': ['var(--font-space-mono)'],
+      },
+      fontWeight: {
+        extrablack: '950',
+      },
+      fontSize: {
+        '2xs': '10px',
+      },
+      boxShadow: {
+        'hard-1': '-2px 2px 8px 0px rgba(38, 38, 38, 0.20)',
+        'hard-2': '0px 3px 10px 0px rgba(38, 38, 38, 0.20)',
+        'hard-3': '2px 2px 8px 0px rgba(38, 38, 38, 0.20)',
+        'hard-4': '0px -3px 10px 0px rgba(38, 38, 38, 0.20)',
+        'hard-5': '0px 2px 10px 0px rgba(38, 38, 38, 0.10)',
+        'soft-1': '0px 0px 10px rgba(38, 38, 38, 0.1)',
+        'soft-2': '0px 0px 20px rgba(38, 38, 38, 0.2)',
+        'soft-3': '0px 0px 30px rgba(38, 38, 38, 0.1)',
+        'soft-4': '0px 0px 40px rgba(38, 38, 38, 0.1)',
+      },
+    },
+  },
+};

package/assets/logos/react-natives-logo.svg

@@ -1,45 +0,0 @@
-<svg width="1980" height="600" viewBox="0 60 1980 500" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc">
-  <title id="title">React-Natives logo</title>
-  <desc id="desc">High-resolution React-Natives horizontal logo with plus signs, italic wordmark, and tilted mobile-device icon.</desc>
-  <defs>
-    <linearGradient id="orbGradient" x1="84" y1="108" x2="434" y2="458" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#61DBFB"/>
-      <stop offset="1" stop-color="#2BA8CC"/>
-    </linearGradient>
-    <linearGradient id="phoneBody" x1="156" y1="154" x2="344" y2="408" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#F8FBFF"/>
-      <stop offset="1" stop-color="#D9E8F5"/>
-    </linearGradient>
-    <linearGradient id="phoneScreen" x1="174" y1="184" x2="302" y2="362" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#F9FCFF"/>
-      <stop offset="1" stop-color="#E4EDF6"/>
-    </linearGradient>
-  </defs>
-
-  <circle cx="250" cy="304" r="224" fill="url(#orbGradient)"/>
-  <circle cx="250" cy="304" r="224" stroke="#2BA8CC" stroke-width="10"/>
-  <circle cx="250" cy="304" r="160" fill="none" stroke="#E8F9FE" stroke-width="10"/>
-
-  <path d="M162 120H194" stroke="#E8F9FE" stroke-width="10" stroke-linecap="round"/>
-  <path d="M178 104V136" stroke="#E8F9FE" stroke-width="10" stroke-linecap="round"/>
-  <path d="M204 96H230" stroke="#E8F9FE" stroke-width="8" stroke-linecap="round"/>
-  <path d="M217 83V109" stroke="#E8F9FE" stroke-width="8" stroke-linecap="round"/>
-  <path d="M130 146H150" stroke="#61DBFB" stroke-width="6" stroke-linecap="round"/>
-  <path d="M140 136V156" stroke="#61DBFB" stroke-width="6" stroke-linecap="round"/>
-
-  <g transform="rotate(-16 246 324)">
-    <rect x="154" y="152" width="188" height="282" rx="34" fill="url(#phoneBody)" stroke="#8FA7BA" stroke-width="10"/>
-    <rect x="176" y="182" width="144" height="206" rx="20" fill="url(#phoneScreen)"/>
-    <rect x="194" y="208" width="108" height="8" rx="4" fill="#C8D4E0"/>
-    <rect x="194" y="234" width="96" height="8" rx="4" fill="#C8D4E0"/>
-    <rect x="194" y="260" width="102" height="8" rx="4" fill="#C8D4E0"/>
-    <rect x="220" y="166" width="56" height="6" rx="3" fill="#C0D2E1"/>
-    <circle cx="248" cy="408" r="8" fill="#C0D2E1"/>
-    <path d="M188 222L304 350" stroke="#ECF3FA" stroke-width="7" stroke-linecap="round"/>
-  </g>
-
-  <g transform="skewX(-9)">
-    <text x="620" y="266" fill="#2BA8CC" font-size="132" font-family="Inter, Segoe UI, Roboto, Helvetica, Arial, sans-serif" font-style="italic" font-weight="800" letter-spacing="16">REACT-NATIVES</text>
-    <text x="620" y="376" fill="#61DBFB" font-size="58" font-family="Inter, Segoe UI, Roboto, Helvetica, Arial, sans-serif" font-style="italic" font-weight="600" letter-spacing="14">WIRED FOR SPEED</text>
-  </g>
-</svg>

package/assets/logos/react-natives-mark.svg

@@ -1,42 +0,0 @@
-<svg width="1024" height="1024" viewBox="100 100 560 560" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc">
-  <title id="title">React-Natives icon</title>
-  <desc id="desc">High-resolution React-Natives icon with plus signs and tilted mobile-device symbol.</desc>
-  <defs>
-    <linearGradient id="orb" x1="120" y1="120" x2="590" y2="610" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#61DBFB"/>
-      <stop offset="1" stop-color="#2BA8CC"/>
-    </linearGradient>
-    <linearGradient id="phoneBody" x1="226" y1="208" x2="500" y2="564" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#F8FBFF"/>
-      <stop offset="1" stop-color="#D9E8F5"/>
-    </linearGradient>
-    <linearGradient id="phoneScreen" x1="254" y1="254" x2="430" y2="500" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#F9FCFF"/>
-      <stop offset="1" stop-color="#E4EDF6"/>
-    </linearGradient>
-  </defs>
-
-  <g transform="translate(50 0)">
-  <circle cx="330" cy="378" r="268" fill="url(#orb)"/>
-  <circle cx="330" cy="378" r="268" stroke="#2BA8CC" stroke-width="12"/>
-  <circle cx="330" cy="378" r="194" fill="none" stroke="#E8F9FE" stroke-width="10"/>
-
-  <path d="M208 154H248" stroke="#E8F9FE" stroke-width="12" stroke-linecap="round"/>
-  <path d="M228 134V174" stroke="#E8F9FE" stroke-width="12" stroke-linecap="round"/>
-  <path d="M262 124H292" stroke="#E8F9FE" stroke-width="10" stroke-linecap="round"/>
-  <path d="M277 109V139" stroke="#E8F9FE" stroke-width="10" stroke-linecap="round"/>
-  <path d="M170 186H194" stroke="#61DBFB" stroke-width="8" stroke-linecap="round"/>
-  <path d="M182 174V198" stroke="#61DBFB" stroke-width="8" stroke-linecap="round"/>
-
-  <g transform="rotate(-17 332 412)">
-    <rect x="222" y="216" width="232" height="360" rx="42" fill="url(#phoneBody)" stroke="#8FA7BA" stroke-width="12"/>
-    <rect x="250" y="252" width="176" height="262" rx="26" fill="url(#phoneScreen)"/>
-    <rect x="272" y="286" width="132" height="10" rx="5" fill="#C8D4E0"/>
-    <rect x="272" y="320" width="118" height="10" rx="5" fill="#C8D4E0"/>
-    <rect x="272" y="354" width="126" height="10" rx="5" fill="#C8D4E0"/>
-    <rect x="306" y="232" width="64" height="8" rx="4" fill="#C0D2E1"/>
-    <circle cx="338" cy="542" r="10" fill="#C0D2E1"/>
-    <path d="M266 302L410 464" stroke="#ECF3FA" stroke-width="8" stroke-linecap="round"/>
-  </g>
-  </g>
-</svg>