@hopline/ux4g-react-native 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Hopline Pvt Ltd
+
+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,110 @@
+# @hopline/ux4g-react-native
+
+React Native components for **UX4G** — India's government design system (NeGD · MeitY · [ux4g.gov.in](https://ux4g.gov.in)). Unofficial, community packaging by [Hopline](https://hopline.co).
+
+**41 components**, genuinely native (RN primitives + `react-native-svg` — no WebView, no DOM), strict TypeScript (no `any`), themeable, and driven by a single design-token source of truth.
+
+```sh
+npm install @hopline/ux4g-react-native react-native-svg
+# or: pnpm add / yarn add
+```
+
+> Peer deps: `react >=18`, `react-native >=0.73`, `react-native-svg >=15`. Works in bare RN and Expo.
+
+## Quick start
+
+Wrap your app in `ThemeProvider`, then use components:
+
+```tsx
+import { ThemeProvider, Button, Input, Card } from "@hopline/ux4g-react-native";
+
+export default function App() {
+  return (
+    <ThemeProvider>
+      <Card title="Apply for a scheme">
+        <Input label="Full name" required />
+        <Button onPress={submit}>Submit</Button>
+      </Card>
+    </ThemeProvider>
+  );
+}
+```
+
+## Theming
+
+The whole system re-skins from two ramps + the font families ("Theme Craft"). Pass a full
+50–900 colour ramp:
+
+```tsx
+import { ThemeProvider, ramp } from "@hopline/ux4g-react-native";
+
+<ThemeProvider primary={{ ...ramp.violet, 600: "#0EA5E9" }}>
+  {/* every component now uses your brand colour */}
+</ThemeProvider>;
+```
+
+Or build a theme object once with `makeTheme({ primary, secondary, fontFamily })` and pass it
+as the `theme` prop. Read the active theme anywhere with `useUX4GTheme()`. Every component also
+accepts an optional `theme` prop override.
+
+### Fonts
+
+The default theme references `NotoSans` (body/display), `Roboto-Medium` (UI labels) and
+`RedHatMono` (mono). Register these in your app (e.g. `expo-font` / `@expo-google-fonts`), or
+override `fontFamily` to use your own.
+
+## Components (41)
+
+| Group | Components |
+|---|---|
+| **Actions** | Button, IconButton |
+| **Forms** | Input, Textarea, Select, Checkbox, Radio, Switch, Search, DatePicker, RangeSlider, ColorPicker, FileUpload |
+| **Display** | Card, Badge, Chip, Avatar, Comment |
+| **Feedback** | Alert, Progress, Spinner, EmptyState, FeedbackWidget |
+| **Overlay** | Modal, Tooltip, Menu, Toast, Popover |
+| **Data** | Table, Accordion, Pagination, List, Chart, IndiaMap |
+| **Navigation** | Tabs, Breadcrumb, Stepper, Navbar, Footer |
+| **Media** | Carousel |
+| **Accessibility** | AccessibilityWidget |
+
+Plus `IndiaGeo` (the SVG geography data behind `IndiaMap`).
+
+## Design tokens (single source of truth)
+
+The raw token primitives (colour ramps, spacing, radius, border) live in
+[`tokens/ux4g.primitives.tokens.json`](./tokens/ux4g.primitives.tokens.json) in the
+[DTCG](https://tr.designtokens.org/) format and are emitted to `src/tokens.generated.ts` by
+`node scripts/gen-tokens.mjs`. The semantic theme (aliases, shadows, type scale) is assembled
+in `theme.ts`. Edit the JSON, not the generated file — the same DTCG source can feed web
+(CSS), Compose, and SwiftUI via Style Dictionary.
+
+## Native performance
+
+These are real React Native components, so on the **New Architecture** (Fabric + Hermes, the
+default on RN 0.76+/recent Expo) they render at native speed.
+
+**Lists & virtualization.** `Select` virtualizes its dropdown with `FlatList`, so long option
+lists (countries, currencies) mount only the visible window. Components that render inherently
+**bounded** collections — `Tabs`, `Breadcrumb`, `Pagination`, `Accordion`, `Chart`, `IndiaMap`
+(37 fixed regions), `Carousel` — use `Array.map` deliberately; virtualizing them would be wrong.
+
+`Table` and `List` render the rows/items you give them **eagerly** (no windowing). They're
+designed to sit inside your page layout, so for **large datasets paginate** them with the
+`Pagination` component (render a page of rows at a time) rather than handing them thousands of
+rows — or wrap your data in your own `FlatList`.
+
+**Dropping to native.** For genuine performance hot-paths (heavy compute, a platform-native
+view, camera/ML), drop to Kotlin/Swift via the [Expo Modules API](https://docs.expo.dev/modules/)
+and call it from JS — you stay in React Native to do it.
+
+## Accessibility
+
+Components ship sensible roles, labels and states (e.g. `Checkbox` exposes `accessibilityState`,
+`Button` exposes `disabled`, overlays trap and label their controls). The `AccessibilityWidget`
+provides an in-app a11y panel (text scaling, contrast, dyslexia/ADHD aids, etc.). On native,
+prefer cooperating with OS settings (Dynamic Type, Reduce Motion, screen readers) for the
+features the OS already owns.
+
+## License
+
+MIT © Hopline. UX4G is © NeGD · MeitY, Government of India; this is unofficial community packaging.