syzygy-ui-rn 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ayush Kumar Sethi
+
+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

@@ -0,0 +1,151 @@
+# syzygy-ui-rn
+
+[![TypeScript](https://img.shields.io/badge/TypeScript-5-3178C6?logo=typescript&logoColor=white)](https://www.typescriptlang.org)
+[![npm](https://img.shields.io/npm/v/syzygy-ui-rn)](https://www.npmjs.com/package/syzygy-ui-rn)
+[![Platform](https://img.shields.io/badge/Platform-iOS%20%7C%20Android%20%7C%20Web-lightgrey)](https://reactnative.dev)
+[![License](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
+[![CI](https://github.com/Syzygy-Hub/syzygy-ui-rn/actions/workflows/node.yml/badge.svg)](https://github.com/Syzygy-Hub/syzygy-ui-rn/actions/workflows/node.yml)
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/Syzygy-Hub/syzygy-brand-assets/main/Assets/syzygy-banner-dark-2400.png">
+  <img src="https://raw.githubusercontent.com/Syzygy-Hub/syzygy-brand-assets/main/Assets/syzygy-banner-light-2400.png" alt="Syzygy" width="500">
+</picture>
+
+Production-ready React Native component library with design tokens, Dark Mode, and zero third-party dependencies.
+
+## Requirements
+- React Native 0.70+
+- React 18+
+- TypeScript 5+
+
+## Installation
+```sh
+npm install syzygy-ui-rn
+```
+
+## Components
+- **Buttons:** PrimaryButton, SecondaryButton, DestructiveButton, GhostButton, IconButton
+- **Inputs:** TextInput, SecureInput, SearchInput (debounced, with clear button), ToggleSwitch, CheckboxInput, RadioButtonInput, SliderInput, Dropdown, SegmentedControl, QuantityStepper
+- **Display:** Avatar, DividerLine, Chip, ListRow, SectionHeader, LazyImageView, StarRatingView, CountBadge, PagerView (swipeable paged content, not navigation chrome; `onPageChange` reports the current page index for you to use as local state — e.g. a carousel — or feed into a navigator, as needed)
+- **Feedback:** LoadingView, EmptyStateView, ToastView, ShimmerView, ProgressBar, PullToRefresh, ErrorStateView
+- **Overlay:** ModalDialog, BottomSheet, CollapsibleView
+- **Navigation:** BackButton, TabBar, BottomNavigationBar, AppBar — presentational only; this library has no navigation dependency, so wire `onPress`/`onSelectionChange` into your own navigator
+- **Cards:** CardView
+- **Badges:** Badge
+- **Transitions:** `slideTransition`, `crossFadeTransition`, `slideVerticalTransition`, `modalPresentationTransition` — `Animated`-driven style helpers
+
+See [CHANGELOG.md](CHANGELOG.md) for version history.
+
+## Design Tokens
+
+All tokens live under `src/tokens/` and are consumed as plain objects — e.g. `spacing.md`, `getColors(scheme).primary`.
+
+### Colors (`getColors`)
+`getColors(scheme)` returns a full `ColorPalette` for `'light'` or `'dark'` (falls back to light for `'unspecified'`/`null`/`undefined`):
+
+| Token | Light | Dark |
+|---|---|---|
+| `background` | `#FFFFFF` | `#101012` |
+| `surface` | `#F5F5F7` | `#1C1C1F` |
+| `surfaceAlt` | `#ECECEE` | `#27272B` |
+| `border` | `#D8D8DC` | `#3A3A3F` |
+| `textPrimary` | `#1A1A1E` | `#F5F5F7` |
+| `textSecondary` | `#6B6B72` | `#A5A5AC` |
+| `primary` | `#2F6FED` | `#5C8DF6` |
+| `secondary` | `#ECECEE` | `#27272B` |
+| `destructive` / `error` | `#E5484D` | `#F2555A` |
+| `success` | `#1F9254` | `#3DD68C` |
+| `warning` | `#B7791F` | `#E3A008` |
+| `disabled` | `#D8D8DC` | `#3A3A3F` |
+
+Each color also has a matching `*Text` counterpart (e.g. `primaryText`) for text placed on top of it.
+
+### Typography (`fontSizes`, `fontWeights`, `lineHeights`)
+
+| `fontSizes` | Value | | `lineHeights` | Value |
+|---|---|---|---|---|
+| `xs` | 12 | | `xs` | 16 |
+| `sm` | 14 | | `sm` | 20 |
+| `md` | 16 | | `md` | 22 |
+| `lg` | 18 | | `lg` | 24 |
+| `xl` | 22 | | `xl` | 28 |
+| `xxl` | 28 | | `xxl` | 34 |
+
+`fontWeights`: `regular` (400) · `medium` (500) · `semibold` (600) · `bold` (700)
+
+### Spacing (`spacing`)
+
+| Token | Value |
+|---|---|
+| `xs` | 4 |
+| `sm` | 8 |
+| `md` | 16 |
+| `lg` | 24 |
+| `xl` | 32 |
+| `xxl` | 48 |
+
+### Corner Radius (`radius`)
+
+| Token | Value |
+|---|---|
+| `sm` | 4 |
+| `md` | 8 |
+| `lg` | 16 |
+| `full` | 9999 (pill/capsule shapes) |
+
+## Usage
+
+```tsx
+import { PrimaryButton, TextInput, Badge } from 'syzygy-ui-rn';
+
+<PrimaryButton title="Get Started" onPress={() => {}} />
+<TextInput label="Email" value={email} onChangeText={setEmail} />
+<Badge text="New" variant="primary" />
+```
+
+See the [Components](#components) list above for everything else available.
+
+## Contributing & Releases
+
+### Making a release
+Releases are fully automated. To publish a new version:
+
+1. Make your changes and ensure all tests pass:
+```sh
+   npm test
+   npm run typecheck
+   npm run lint
+```
+
+2. Commit with the release prefix:
+```sh
+   git commit -m "release: v1.2.0 — description of changes"
+   git push origin main
+```
+
+3. The CI pipeline will automatically:
+   - Run all tests
+   - Sync package.json version to match the commit message
+   - Publish to npm via OIDC trusted publishing (no tokens needed)
+   - Create a GitHub release with the version tag
+
+### Version format
+Follow semver: `v{major}.{minor}.{patch}`
+- Patch: `v1.0.1` — bug fixes
+- Minor: `v1.1.0` — new components or features
+- Major: `v2.0.0` — breaking changes
+
+### Scripts
+
+| Script | Description |
+|--------|-------------|
+| `npm run build` | Compile TypeScript to dist/ |
+| `npm test` | Run Jest test suite |
+| `npm run lint` | Run ESLint |
+| `npm run lint:fix` | Run ESLint with auto-fix |
+| `npm run typecheck` | Type check without emitting files |
+| `npm run clean` | Remove dist/ and node_modules/ |
+| `npm run reinstall` | Clean and reinstall all dependencies |
+
+## License
+MIT

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "syzygy-ui-rn",
+  "version": "2.0.0",
+  "description": "Production-ready React Native component library with design tokens, Dark Mode, and zero third-party dependencies",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "author": "Ayush Kumar Sethi <aks5686@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Syzygy-Hub/syzygy-ui-rn"
+  },
+  "scripts": {
+    "build": "tsc",
+    "test": "jest",
+    "clean": "rm -rf dist node_modules",
+    "reinstall": "npm run clean && npm install",
+    "prebuild": "rm -rf dist",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "typecheck": "tsc --noEmit",
+    "prepare": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.70.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.4.0",
+    "@types/react": "^18.2.0",
+    "@types/react-native": "^0.72.0",
+    "jest": "^29.7.0",
+    "@types/jest": "^29.5.0",
+    "ts-jest": "^29.1.0",
+    "metro-react-native-babel-preset": "^0.77.0",
+    "react": "18.2.0",
+    "react-native": "^0.73.0",
+    "react-test-renderer": "18.2.0",
+    "@types/react-test-renderer": "^18.0.0",
+    "eslint": "^8.57.0",
+    "@typescript-eslint/parser": "^7.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-native": "^4.1.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-config-prettier": "^9.1.0",
+    "prettier": "^3.2.0"
+  },
+  "files": [
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/__tests__/components.test.tsx

@@ -0,0 +1,368 @@
+import React from 'react';
+import { Text } from 'react-native';
+import renderer from 'react-test-renderer';
+
+import { CardView } from '../components/cards/CardView';
+import { Badge } from '../components/badges/Badge';
+import { DestructiveButton } from '../components/buttons/DestructiveButton';
+import { GhostButton } from '../components/buttons/GhostButton';
+import { IconButton } from '../components/buttons/IconButton';
+import { PrimaryButton } from '../components/buttons/PrimaryButton';
+import { SecondaryButton } from '../components/buttons/SecondaryButton';
+import { SliderInput } from '../components/inputs/SliderInput';
+import { Dropdown } from '../components/inputs/Dropdown';
+import { SegmentedControl } from '../components/inputs/SegmentedControl';
+import { QuantityStepper } from '../components/inputs/QuantityStepper';
+import { Avatar } from '../components/display/Avatar';
+import { DividerLine } from '../components/display/DividerLine';
+import { Chip } from '../components/display/Chip';
+import { ListRow } from '../components/display/ListRow';
+import { SectionHeader } from '../components/display/SectionHeader';
+import { LazyImageView } from '../components/display/LazyImageView';
+import { StarRatingView } from '../components/display/StarRatingView';
+import { CountBadge } from '../components/display/CountBadge';
+import { EmptyStateView } from '../components/feedback/EmptyStateView';
+import { ShimmerView } from '../components/feedback/ShimmerView';
+import { PullToRefresh } from '../components/feedback/PullToRefresh';
+import { ErrorStateView } from '../components/feedback/ErrorStateView';
+import { LoadingView } from '../components/feedback/LoadingView';
+import { ProgressBar } from '../components/feedback/ProgressBar';
+import { ToastView } from '../components/feedback/ToastView';
+import { CheckboxInput } from '../components/inputs/CheckboxInput';
+import { RadioButtonInput } from '../components/inputs/RadioButtonInput';
+import { SearchInput } from '../components/inputs/SearchInput';
+import { SecureInput } from '../components/inputs/SecureInput';
+import { TextInput } from '../components/inputs/TextInput';
+import { ToggleSwitch } from '../components/inputs/ToggleSwitch';
+import { KeyboardAvoidingScrollView } from '../components/layout/KeyboardAvoidingScrollView';
+import { AppBar } from '../components/navigation/AppBar';
+import { BackButton } from '../components/navigation/BackButton';
+import { BottomNavigationBar } from '../components/navigation/BottomNavigationBar';
+import { PagerView } from '../components/navigation/PagerView';
+import { TabBar } from '../components/navigation/TabBar';
+import { BottomSheet } from '../components/overlay/BottomSheet';
+import { CollapsibleView } from '../components/overlay/CollapsibleView';
+import { ModalDialog } from '../components/overlay/ModalDialog';
+
+describe('component smoke tests', () => {
+  it('renders PrimaryButton', () => {
+    const tree = renderer.create(
+      <PrimaryButton title="Continue" onPress={() => {}} />
+    );
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders SecondaryButton', () => {
+    const tree = renderer.create(
+      <SecondaryButton title="Cancel" onPress={() => {}} />
+    );
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders DestructiveButton', () => {
+    const tree = renderer.create(
+      <DestructiveButton title="Delete" onPress={() => {}} />
+    );
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders GhostButton', () => {
+    const tree = renderer.create(<GhostButton title="Skip" onPress={() => {}} />);
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders IconButton', () => {
+    const tree = renderer.create(
+      <IconButton
+        icon={<Text>+</Text>}
+        onPress={() => {}}
+        accessibilityLabel="Add"
+      />
+    );
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders TextInput', () => {
+    const tree = renderer.create(
+      <TextInput label="Email" value="" onChangeText={() => {}} />
+    );
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders TextInput with error', () => {
+    const tree = renderer.create(
+      <TextInput
+        label="Email"
+        value=""
+        onChangeText={() => {}}
+        error="Required"
+      />
+    );
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders TextInput with maxLength counter', () => {
+    const tree = renderer.create(
+      <TextInput
+        label="Bio"
+        value="Hello"
+        onChangeText={() => {}}
+        maxLength={100}
+      />
+    );
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders SecureInput', () => {
+    const tree = renderer.create(
+      <SecureInput label="Password" value="" onChangeText={() => {}} />
+    );
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders LoadingView', () => {
+    const tree = renderer.create(<LoadingView message="Loading data" />);
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders EmptyStateView', () => {
+    const tree = renderer.create(
+      <EmptyStateView
+        title="Nothing here"
+        subtitle="Try again later"
+        ctaLabel="Retry"
+        onCtaPress={() => {}}
+      />
+    );
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders ToastView', () => {
+    const tree = renderer.create(<ToastView message="Saved!" variant="success" />);
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders CardView', () => {
+    const tree = renderer.create(
+      <CardView>
+        <Text>Card content</Text>
+      </CardView>
+    );
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders Badge', () => {
+    const tree = renderer.create(<Badge text="New" variant="primary" />);
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders BackButton', () => {
+    const tree = renderer.create(<BackButton onPress={() => {}} />);
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders SearchInput', () => {
+    const tree = renderer.create(<SearchInput value="" onChangeText={() => {}} />);
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders ToggleSwitch', () => {
+    const tree = renderer.create(
+      <ToggleSwitch label="Notifications" value={true} onValueChange={() => {}} />
+    );
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders CheckboxInput', () => {
+    const tree = renderer.create(
+      <CheckboxInput label="Remember me" checked={false} onValueChange={() => {}} />
+    );
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders RadioButtonInput', () => {
+    const tree = renderer.create(
+      <RadioButtonInput label="Option A" selected={true} onPress={() => {}} />
+    );
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders SliderInput', () => {
+    const tree = renderer.create(
+      <SliderInput label="Volume" value={0.5} onValueChange={() => {}} />
+    );
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders Dropdown', () => {
+    const tree = renderer.create(
+      <Dropdown
+        label="Country"
+        selection="USA"
+        options={['USA', 'Canada']}
+        onSelectionChange={() => {}}
+        optionTitle={(o) => o}
+      />
+    );
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders SegmentedControl', () => {
+    const tree = renderer.create(
+      <SegmentedControl
+        options={['Day', 'Week']}
+        selection="Day"
+        onSelectionChange={() => {}}
+        optionTitle={(o) => o}
+      />
+    );
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders QuantityStepper', () => {
+    const tree = renderer.create(<QuantityStepper value={1} onValueChange={() => {}} />);
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders Avatar', () => {
+    const tree = renderer.create(<Avatar initials="AK" />);
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders DividerLine', () => {
+    const tree = renderer.create(<DividerLine />);
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders Chip', () => {
+    const tree = renderer.create(<Chip text="Swift" onRemove={() => {}} />);
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders ListRow', () => {
+    const tree = renderer.create(<ListRow title="Settings" subtitle="Manage preferences" />);
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders SectionHeader', () => {
+    const tree = renderer.create(<SectionHeader title="Recent Activity" />);
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders LazyImageView', () => {
+    const tree = renderer.create(<LazyImageView uri={null} />);
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders StarRatingView', () => {
+    const tree = renderer.create(<StarRatingView rating={3} />);
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders CountBadge', () => {
+    const tree = renderer.create(<CountBadge count={3} />);
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders ShimmerView', () => {
+    const tree = renderer.create(<ShimmerView />);
+    expect(tree.toJSON()).toBeTruthy();
+    // ShimmerView runs an infinite Animated.loop; unmount to stop it,
+    // otherwise its timers keep firing after the Jest environment tears down.
+    tree.unmount();
+  });
+
+  it('renders ProgressBar', () => {
+    const tree = renderer.create(<ProgressBar progress={0.5} />);
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders PullToRefresh', () => {
+    const tree = renderer.create(
+      <PullToRefresh refreshing={false} onRefresh={() => {}}>
+        <Text>Content</Text>
+      </PullToRefresh>
+    );
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders ErrorStateView', () => {
+    const tree = renderer.create(
+      <ErrorStateView title="Something went wrong" onRetryPress={() => {}} />
+    );
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders ModalDialog', () => {
+    const tree = renderer.create(
+      <ModalDialog visible={true} onDismiss={() => {}}>
+        <Text>Content</Text>
+      </ModalDialog>
+    );
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders BottomSheet', () => {
+    const tree = renderer.create(
+      <BottomSheet visible={true} onDismiss={() => {}}>
+        <Text>Content</Text>
+      </BottomSheet>
+    );
+    expect(tree.toJSON()).toBeTruthy();
+    tree.unmount();
+  });
+
+  it('renders CollapsibleView', () => {
+    const tree = renderer.create(
+      <CollapsibleView title="Details">
+        <Text>Content</Text>
+      </CollapsibleView>
+    );
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders TabBar', () => {
+    const tree = renderer.create(
+      <TabBar
+        items={[{ tag: 'home', icon: <Text>H</Text>, label: 'Home' }]}
+        selection="home"
+        onSelectionChange={() => {}}
+      />
+    );
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders BottomNavigationBar', () => {
+    const tree = renderer.create(
+      <BottomNavigationBar
+        items={[{ tag: 'home', icon: <Text>H</Text>, label: 'Home' }]}
+        selection="home"
+        onSelectionChange={() => {}}
+      />
+    );
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders AppBar', () => {
+    const tree = renderer.create(<AppBar title="Settings" />);
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders PagerView', () => {
+    const tree = renderer.create(
+      <PagerView>
+        <Text>Page 1</Text>
+      </PagerView>
+    );
+    expect(tree.toJSON()).toBeTruthy();
+  });
+
+  it('renders KeyboardAvoidingScrollView', () => {
+    const tree = renderer.create(
+      <KeyboardAvoidingScrollView>
+        <Text>Content</Text>
+      </KeyboardAvoidingScrollView>
+    );
+    expect(tree.toJSON()).toBeTruthy();
+  });
+});

package/src/__tests__/tokens.test.ts

@@ -0,0 +1,47 @@
+import { spacing, radius, lightColors, darkColors, fontSizes } from '../tokens';
+
+describe('spacing tokens', () => {
+  it('defines the expected scale', () => {
+    expect(spacing).toEqual({
+      xs: 4,
+      sm: 8,
+      md: 16,
+      lg: 24,
+      xl: 32,
+      xxl: 48,
+    });
+  });
+});
+
+describe('radius tokens', () => {
+  it('defines the expected scale', () => {
+    expect(radius).toEqual({
+      sm: 4,
+      md: 8,
+      lg: 16,
+      full: 9999,
+    });
+  });
+});
+
+describe('color tokens', () => {
+  it('defines matching keys for light and dark palettes', () => {
+    expect(Object.keys(lightColors).sort()).toEqual(Object.keys(darkColors).sort());
+  });
+
+  it('has core semantic colors defined', () => {
+    ['background', 'primary', 'destructive', 'success', 'warning', 'error'].forEach(
+      (key) => {
+        expect(lightColors).toHaveProperty(key);
+        expect(darkColors).toHaveProperty(key);
+      }
+    );
+  });
+});
+
+describe('typography tokens', () => {
+  it('defines the expected font sizes', () => {
+    expect(fontSizes.md).toBe(16);
+    expect(fontSizes.xxl).toBeGreaterThan(fontSizes.xs);
+  });
+});