open-index/open-npm huggingface dataset:
npm package: @nationalarchives/frontend
Description: The National Archives frontend styles
Author: Andrew Hosgood
Latest version: 0.39.0

<img src="./src/nationalarchives/assets/images/tna-square-logo.svg" alt="The National Archives logo" title="The National Archives" width="100" />

# TNA Frontend

[![Main build status](https://img.shields.io/github/actions/workflow/status/nationalarchives/tna-frontend/tests.yml?style=flat-square&event=push&branch=main)](https://github.com/nationalarchives/tna-frontend/actions/workflows/tests.yml?query=branch%3Amain)
[![Latest release](https://img.shields.io/github/v/release/nationalarchives/tna-frontend?style=flat-square&logo=github&logoColor=white&sort=semver)](https://github.com/nationalarchives/tna-frontend/releases)
[![NPM version](https://img.shields.io/npm/v/@nationalarchives/frontend?style=flat-square&logo=npm&logoColor=white)](https://www.npmjs.com/package/@nationalarchives/frontend)
[![Licence](https://img.shields.io/github/license/nationalarchives/tna-frontend?style=flat-square)](https://github.com/nationalarchives/tna-frontend/blob/main/LICENCE)

TNA Frontend contains the code you need to start building a user interface for National Archives platforms and services.

## Quickstart

```sh
# Node version
nvm use

# Install dependencies
npm install

# Start Storybook
npm start
```

## Useful links

- [TNA Frontend Storybook](https://nationalarchives.github.io/tna-frontend/)
- [TNA Frontend docs](https://nationalarchives.github.io/tna-frontend-docs/)
- [National Archives Design System](https://nationalarchives.github.io/design-system/)

## Accessibility

The National Archives Digital Services team works hard to ensure that TNA Frontend is accessible.

Using Frontend will help your service meet [level AA of WCAG 2.2](https://www.gov.uk/service-manual/helping-people-to-use-your-service/understanding-wcag). But you must still [check that your service meets accessibility requirements](https://www.gov.uk/service-manual/helping-people-to-use-your-service/making-your-service-accessible-an-introduction), especially if you extend or modify components.

You should also use:

- [the JavaScript from TNA Frontend](https://nationalarchives.github.io/tna-frontend-docs/get-started/setup/#javascript)

You can also read the [accessibility statement for the National Archives Design System](https://nationalarchives.github.io/design-system/accessibility/).

### Accessibility warnings

If you get a warning from a linter or accessibility checker, check our list of [issues you should not need to fix](https://nationalarchives.github.io/tna-frontend-docs/contributing/accessibility/#accessibility-issues-you-should-not-need-to-fix).
npm package: @nationalbankbelgium/eslint-config
Description: ESLint configuration used at the National Bank of Belgium
Author: Alexis Georges
Latest version: 16.0.0

<h1 align="center">
   NBB eslint-config
</h1>

> A library containing ESLint configuration used in applications at the National Bank of Belgium

[![NPM version](https://img.shields.io/npm/v/@nationalbankbelgium/eslint-config.svg)](https://www.npmjs.com/package/@nationalbankbelgium/eslint-config)
[![npm](https://img.shields.io/npm/dm/@nationalbankbelgium/eslint-config.svg)](https://www.npmjs.com/package/@nationalbankbelgium/eslint-config)
[![Build Status](https://github.com/NationalBankBelgium/eslint-config/workflows/build/badge.svg)](https://github.com/NationalBankBelgium/eslint-config/actions?query=workflow%3Abuild)
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![License](https://img.shields.io/cocoapods/l/AFNetworking.svg)](LICENSE)

## About

This package hosts ESLint configuration used in Front-End development at the [National Bank of Belgium](https://www.nbb.be).

## Installation

With npm:

> npm install @nationalbankbelgium/eslint-config

With yarn:

> yarn add @nationalbankbelgium/eslint-config

## Contributing

Please follow our [contribution guidelines](/CONTRIBUTING.md).

To know how to release eslint-config, refer to [this page](/RELEASE.md).

## Authors

### Alexis Georges

- [@GitHub](https://github.com/SuperITMan)

### Michaël Henkens

- [@GitHub](https://github.com/mhenkens)

## License

This project and all associated source code is licensed under the terms of the [MIT License](/LICENSE).

## Thank you notes :)

We'd like to thank the following companies who support the open source community with great tools and platforms.

### Jetbrains

We're supported by [Jetbrains](https://www.jetbrains.com) and their awesome [support for open source](https://www.jetbrains.com/buy/opensource/), thanks to which we are able to use the best products on the market to work on this open source project!

<a href="https://www.jetbrains.com"><img src="http://www.underconsideration.com/brandnew/archives/jetbrains_logo_detail.jpg" width="144px"></a>

### GitHub Actions

We're supported by [GitHub Actions](https://github.com/features/actions)

<a href="https://github.com/features/actions"><img src="https://github.githubassets.com/images/modules/site/features/actions-icon-actions.svg" width="144px"></a>
npm package: @nationalbankbelgium/mdi-ts
Description: <h1 align="center">    NBB Mdi-TS </h1>
Author: Alexis Georges
Latest version: 4.9.95

<h1 align="center">
   NBB Mdi-TS
</h1>

> A library containing Material Design Icons as TypeScript exports used in applications at the National Bank of Belgium

[![NPM version](https://img.shields.io/npm/v/@nationalbankbelgium/mdi-ts.svg)](https://www.npmjs.com/package/@nationalbankbelgium/mdi-ts)
[![npm](https://img.shields.io/npm/dm/@nationalbankbelgium/mdi-ts.svg)](https://www.npmjs.com/package/@nationalbankbelgium/mdi-ts)
[![Build Status](https://github.com/NationalBankBelgium/mdi-ts/workflows/build/badge.svg)](https://github.com/NationalBankBelgium/mdi-ts/actions?query=workflow%3Abuild)
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![License](https://img.shields.io/cocoapods/l/AFNetworking.svg)](LICENSE)

## About

This library provides Material Design Icons as TypeScript exports.
All icons are generated automatically from the official Material Design Icons.

This project exists thanks to these projects:
- [Material Design Icons](https://pictogrammers.com/library/mdi/)
- [svg-to-ts](https://github.com/nivekcode/svg-to-ts)

## Installation

With npm:

> npm install @nationalbankbelgium/mdi-ts

With yarn:

> yarn add @nationalbankbelgium/mdi-ts

## Contributing

Please follow our [contribution guidelines](/CONTRIBUTING.md).

To know how to release mdi-ts, refer to [this page](/RELEASE.md).

## Authors

### Nicolas Dujacquier

- [@GitHub](https://github.com/DujacquierNicolas)

### Michaël Henkens

- [@GitHub](https://github.com/mhenkens)

### Alexis Georges

- [@GitHub](https://github.com/SuperITMan)

## License

This project and all associated source code is licensed under the terms of the [MIT License](/LICENSE).

## Thank you notes :)

We'd like to thank the following companies who support the open source community with great tools and platforms.

### GitHub Actions

We're supported by [GitHub Actions](https://github.com/features/actions)

<a href="https://github.com/features/actions"><img src="https://github.githubassets.com/images/modules/site/features/actions-icon-actions.svg" width="144px"></a>
npm package: @nationalbankbelgium/ngrx-effects
Description: Side effect model for @nationalbankbelgium/ngrx-store
Author: Dubois Sebastien
Latest version: 1.0.0

# @nationalbankbelgium/ngrx-effects

This is a backport of ngrx-effects (https://github.com/ngrx/effects) for AngularJS.

### Installation
Install @nationalbankbelgium/ngrx-effects from npm:

```
npm install @nationalbankbelgium/ngrx-effects --save
```

### Setup
Need to be completed...

## Contributing
### Submitting Pull Requests

**Please follow these basic steps to simplify pull request reviews - if you don't you'll probably just be asked to anyway.**

* Please rebase your branch against the current master
* Run ```npm install``` to make sure your development dependencies are up-to-date
* Please ensure the test suite passes before submitting a PR
* If you've added new functionality, **please** include tests which validate its behaviour
* Make reference to possible [issues](https://github.com/NationalBankBelgium/ngrx-effects-ng1/issues) on PR comment

### Submitting bug reports

* Please detail the affected browser(s) and operating system(s)
* Please be sure to state which version of node **and** npm you're using
npm package: @nationaldesignstudio/agent-to-figma-mcp-server
Description: MCP server for interacting with Figma through Claude Desktop and other MCP clients
Latest version: 0.1.0

# @nationaldesignstudio/agent-to-figma-mcp-server

MCP server that enables AI agents (Claude, etc.) to manipulate Figma designs through the Model Context Protocol.

## Installation

```bash
npx @nationaldesignstudio/agent-to-figma-mcp-server
```

## Claude Desktop Configuration

Add to `~/Library/Application Support/Claude/claude_desktop_config.json` (macOS):

```json
{
  "mcpServers": {
    "agent-to-figma": {
      "command": "npx",
      "args": ["@nationaldesignstudio/agent-to-figma-mcp-server"]
    }
  }
}
```

## Requirements

1. **Figma Desktop App** with the Agent to Figma plugin installed
2. Plugin connects to the MCP server via HTTP/SSE on port 3055

## Architecture

```
Claude (MCP Client) <--stdio--> MCP Server <--HTTP/SSE (3055)--> Figma Plugin
```

## Available Tools (~36)

| Category | Tools |
|----------|-------|
| Document | `get_document_info`, `get_selection`, `create_page`, `set_current_page` |
| Nodes | `read_my_design`, `get_node_info`, `get_nodes_info`, `rename_node`, `set_node_parent` |
| Shapes | `create_shape`, `create_frame`, `create_section`, `create_slice`, `create_image` |
| Text | `create_text`, `set_text_content`, `set_text_properties`, `set_text_range_style`, `set_multiple_text_contents` |
| Styling | `set_style`, `get_local_styles`, `create_style` |
| Transform | `move_node`, `resize_node`, `delete_nodes`, `clone_node`, `group_nodes`, `boolean_operation`, `flatten_node`, `get_transform`, `set_relative_transform`, `rescale_node` |
| Layout | `set_layout`, `set_constraints`, `set_grid_layout`, `set_grid_child_position` |
| Components | `manage_component`, `create_instance`, `manage_instance`, `import_from_library`, `get_styles` |
| Effects | `set_effect`, `remove_effects` |
| Annotations | `manage_annotation` |
| Export | `export_node_as_image` |
| Selection | `set_focus`, `set_selections` |
| Prototyping | `get_reactions`, `set_default_connector`, `create_connections`, `set_reactions` |
| Scanning | `scan_text_nodes`, `scan_nodes_by_types` |
| Variables | `manage_variable_collection`, `manage_variable`, `manage_variable_mode`, `set_variable_value`, `manage_variable_binding`, `manage_extended_collection` |

## Environment Variables

| Variable | Default | Description |
|----------|---------|-------------|
| `FIGMA_WS_PORT` | `3055` | HTTP server port for Figma plugin |
| `MCP_TIMEOUT_MS` | `30000` | Command timeout in milliseconds |
| `STANDALONE` | `false` | Run HTTP server only (no MCP stdio) |

## Links

- [GitHub Repository](https://github.com/nationaldesignstudio/agent-to-figma-mcp)
- [Figma Plugin](https://github.com/nationaldesignstudio/agent-to-figma-mcp/releases)

## License

MIT
npm package: @nationallibraryofnorway/nb-lib
Description: This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.6.0.
Latest version: 0.0.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# NbLib

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.6.0.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @nationallibraryofnorway/ngx-mime
Description: [![npm version](https://badge.fury.io/js/@nationallibraryofnorway%2Fngx-mime.svg)](https://badge.fury.io/js/@nationallibraryofnorway%2Fngx-mime) [![CircleCI](https://circleci.com/gh/NationalLibraryOfNorway/ngx-mime.svg?style=svg)](https://circleci.com/gh/
Latest version: 20.0.0

# Mime IIIF Viewer for Angular

[![npm version](https://badge.fury.io/js/@nationallibraryofnorway%2Fngx-mime.svg)](https://badge.fury.io/js/@nationallibraryofnorway%2Fngx-mime)
[![CircleCI](https://circleci.com/gh/NationalLibraryOfNorway/ngx-mime.svg?style=svg)](https://circleci.com/gh/NationalLibraryOfNorway/ngx-mime)
[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

<a href="https://www.lambdatest.com/hyperexecute" target="_blank"><img width="209" alt="HE Badge" src="https://user-images.githubusercontent.com/10496433/203929571-69077a63-1928-435e-b8ba-f4cdcb9d960b.png"></a>

### Project status

This viewer is under active development and hasn't yet reached its final form.

If you'd like to contribute, you must follow our [contributing guidelines](https://github.com/NationalLibraryOfNorway/ngx-mime/blob/main/CONTRIBUTING.md).

### Installation

The latest release of Mime can be installed from npm

`npm i @nationallibraryofnorway/ngx-mime`

### Getting started

See our [Getting Started Guide](https://github.com/NationalLibraryOfNorway/ngx-mime/wiki/Getting-Started)
if you're using Mime in your first project.

### Developers

See our [Developer Setup Guide](https://github.com/NationalLibraryOfNorway/ngx-mime/wiki/Developer-Setup).
npm package: @nationgroup/navigation-bar
Description: This package is navigation widget for AMS Management web application.
Latest version: 1.0.6

# Navigation Bar

This package is navigation widget for AMS Management web application.

## Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)

## Type Support For `.vue` Imports in TS

Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps:

1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.

You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).
npm package: @nationgroup_develop/navigation-bar
Description: This package is navigation widget for AMS Management web application.
Latest version: 1.0.0

# Navigation Bar

This package is navigation widget for AMS Management web application.

## Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)

## Type Support For `.vue` Imports in TS

Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps:

1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.

You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).
npm package: @native-audio-node/darwin-arm64
Description: Native audio capture binary for macOS Apple Silicon (arm64)
Latest version: 0.3.1

# @native-audio-node/darwin-arm64

This package contains the pre-built native binary for `native-audio-node` on macOS Apple Silicon (arm64).

**This package is automatically installed** as an optional dependency when you install `native-audio-node` on a compatible platform.

## Do not install directly

```bash
# Do this instead:
npm install native-audio-node
```

## Platform Support

- **OS:** macOS (darwin)
- **Architecture:** Apple Silicon (arm64)
- **macOS Version:** 14.2+ (Sonoma or later)

## License

MIT
npm package: @native-audio-node/darwin-x64
Description: Native audio capture binary for macOS Intel (x64)
Latest version: 0.3.0
Deprecated: Missing binary, use 0.3.1+

# @native-audio-node/darwin-x64

This package contains the pre-built native binary for `native-audio-node` on macOS Intel (x64).

**This package is automatically installed** as an optional dependency when you install `native-audio-node` on a compatible platform.

## Do not install directly

```bash
# Do this instead:
npm install native-audio-node
```

## Platform Support

- **OS:** macOS (darwin)
- **Architecture:** Intel (x64)
- **macOS Version:** 14.2+ (Sonoma or later)

## License

MIT
npm package: @native-audio-node/win32-arm64
Description: Native audio capture binary for Windows ARM64
Latest version: 0.3.0
Deprecated: Missing binary, use 0.3.1+

# @native-audio-node/win32-arm64

This package contains the pre-built native binary for `native-audio-node` on Windows ARM64.

**This package is automatically installed** as an optional dependency when you install `native-audio-node` on a compatible platform.

## Do not install directly

```bash
# Do this instead:
npm install native-audio-node
```

## Platform Support

- **OS:** Windows (win32)
- **Architecture:** ARM64
- **Windows Version:** Windows 10 2004+ (Build 19041 or later)

## License

MIT
npm package: @native-audio-node/win32-x64
Description: Native audio capture binary for Windows x64
Latest version: 0.3.3

# @native-audio-node/win32-x64

This package contains the pre-built native binary for `native-audio-node` on Windows x64.

**This package is automatically installed** as an optional dependency when you install `native-audio-node` on a compatible platform.

## Do not install directly

```bash
# Do this instead:
npm install native-audio-node
```

## Platform Support

- **OS:** Windows (win32)
- **Architecture:** x64
- **Windows Version:** Windows 10 2004+ (Build 19041 or later)

## License

MIT
npm package: @native-base/cra-template
Description: The base template for Create React App with NativeBase.
Latest version: 1.1.0

# NativeBase CRA Template

The official NativeBase template for [Create React App](https://reactjs.org/docs/create-a-new-react-app.html#create-react-app)

## Usage

```sh
npx create-react-app my-app --template @native-base
```
npm package: @native-base/cra-template-typescript
Description: The base TypeScript template for Create React App with NativeBase.
Latest version: 1.2.0

# NativeBase TypeScript CRA Template

The official NativeBase template for [Create React App](https://github.com/facebook/create-react-app)

## Usage

```sh
npx create-react-app my-app --template @native-base/typescript
```
npm package: @native-base/expo-template-typescript
Description: The base TypeScript template for expo with NativeBase.
Author: Aditya Jamuar
Latest version: 1.3.1

# NativeBase TypeScript Expo Template

The official NativeBase TypeScript template for [Expo](https://docs.expo.io/)

## Usage

```sh
expo init my-app --template @native-base/expo-template-typescript
```
npm package: @native-base/nativebase-tokenizer
Description: > Fast conversion of absolute tokens to nativebase tokens. ⚡️
Author: NativeBase
Latest version: 0.1.1

# Absolute To NativeBase

> Fast conversion of absolute tokens to nativebase tokens. ⚡️

## Advice

If you just want to convert absolute tokens to nativebase tokens then we highly recommend using [absoluteToNB].

And if you want even more control, then you're in the right place! 👇👇

## Features

- 🚀 **Simple** - Convert absolute tokens to nativebase tokens.
- 🔥 **proximity** - Values near to the tokens can be taken if specific token value doesn't exist.
- 🔥 **increasing** - Comes with a increasing token if set to true/false it will find higher/lower values which are near to the token if specific token value doesn't exist.
- 🔥 **proximityRange** - Comes with a proximityRange token if set it will find values present in that range difference.

## Installation
```ts
npm i @native-base/nativebase-tokenizer
```


## Usage

First you'll want to fetch the absoluteToNB page:

```ts
import { absoluteToNB } from "@native-base/nativebase-tokenizer";

const convertedValue = absoluteToNB(value, 'propName');
```

Once you have the converted value you can pass it to the nativeBase page.

You may optionally pass a `config` to the API if you want to get values near to token if specific token value doesn't exist.

Note: Config has 3 parameters `proximity`,`proximityRange`,`increasing`. Proximity is not included by default it should be passed within the config.

- `proximity` should be set to true or false based on this Values near to the tokens can be taken if specific token value doesn't exist.
- `proximityRange` should be given a numeric value if set it will find values present in that range difference.
- `increasing` should be set to true or false based on this it will find higher/lower values which are near to the token if specific token value doesn't exist.

```ts
import { absoluteToNB } from "@native-base/nativebase-tokenizer";
const config = { proximity: true, proximityRange: 10, increasing: true };
const convertedValue = absoluteToNB(value, 'propName', config);
```

## Example

Here's a full [Example project](https://github.com/GeekyAnts/nativebase-tokenizer/tree/master/example/index.ts
).

- Without config

```ts
import { absoluteToNB } from "@native-base/nativebase-tokenizer";
const convertedValue = absoluteToNB(32, 'spacing');
console.log(convertedValue); // 4
```

- With config

```ts
import { absoluteToNB } from "@native-base/nativebase-tokenizer";
const config = { proximity: true, proximityRange: 3, increasing: true };
const convertedValue = absoluteToNB(29, 'spacing', config);
console.log(convertedValue); // 4
```

## License

GeekyAnts © [GeekyAnts](https://geekyants.com)
npm package: @native-base/react-native-template
Description: The base template for react-native with NativeBase.
Author: Aditya Jamuar
Latest version: 1.3.0

# React Native Template With NativeBase

## Usage

```sh
npx react-native init MyApp --template @native-base/react-native-template
```

### Note on the legacy CLI

There seems to be quite some confusion about the legacy CLI. This template only works with the new CLI. Make sure you have uninstalled the legacy `react-native-cli` first (`npm uninstall -g react-native-cli`), for the below command to work. If you wish to not use `npx`, you can also install the new CLI globally (`npm i -g @react-native-community/cli` or `yarn global add @react-native-community/cli`).

Further information can be found here: https://github.com/react-native-community/cli#about
npm package: @native-base/react-native-template-typescript
Description: The base template for React-Native TypeScript with NativeBase.
Author: Aditya Jamuar
Latest version: 1.3.0

# React Native Template With NativeBase Typescript

## Usage

```sh
npx react-native init MyApp --template @native-base/react-native-template-typescript
```

### Note on the legacy CLI

There seems to be quite some confusion about the legacy CLI. This template only works with the new CLI. Make sure you have uninstalled the legacy `react-native-cli` first (`npm uninstall -g react-native-cli`), for the below command to work. If you wish to not use `npx`, you can also install the new CLI globally (`npm i -g @react-native-community/cli` or `yarn global add @react-native-community/cli`).

Further information can be found here: https://github.com/react-native-community/cli#about
npm package: @native-bindings/imagemagick6
Description: ImageMagick 6 bindings for Node.js
Author: Victor Queiroz
Latest version: 2.0.0

# @native-bindings/imagemagick6

### Installation

```
npm i @native-bindings/imagemagick6
```

### Requirements

-   C++14
-   CMake >= 3.7

### Usage

```ts
import { Geometry, Image } from "@native-bindings/imagemagick6";

const img = new Image();
img.read("image.png");
img.resize(new Geometry(100, 100, 0, 0));
img.write("new-image.png");
```

```ts
import { Image } from "@native-bindings/imagemagick6";

const img1 = new Image();
img1.read("image.png");

const img2 = new Image();
img2.read("image.png");
img2.motionBlur(20, 3, 40);

console.log(img2.compare(img1));
```

```ts
import { Image, Color, Geometry } from "@native-bindings/imagemagick6";

const img = new Image();
img.density(new Point(256, 256));
img.backgroundColor(new Color(0, 0, 0, 0));
img.read(path.resolve(__dirname, "icon.svg"));
img.resize(new Geometry(256, 256, 0, 0));
img.write(__dirname + "/icon.png");
```
npm package: @native-html/css-processor
Description: An inline CSS processor to translate CSS properties to React Native styles.
Author: Jules Sam. Randolph
Latest version: 2.0.0

# @native-html/css-processor

[![npm](https://img.shields.io/npm/v/@native-html/css-processor)](https://www.npmjs.com/package/@native-html/css-processor)
[![CI](https://github.com/native-html/render/workflows/css-processor/badge.svg?branch=main)](https://github.com/native-html/render/actions?query=branch%3Amain+workflow%3Acss-processor)
[![codecov](https://codecov.io/gh/native-html/render/branch/main/graph/badge.svg?flag=css-processor)](https://codecov.io/gh/native-html/render?flag=css-processor)

## Known Incompatibilities (Inline CSS Style → RN Styles)

| Property         | Comments                                                                                                                                |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| `border-*radius` | Percent and forward-slash radius is not supported in React Native. Inline rules with percent or forward-slash radius will be discarded. |
npm package: @native-html/transient-render-engine
Description: An engine which produces an intermediary structure from HTML to create a React Native render tree.
Author: Jules Sam. Randolph
Latest version: 12.0.0

# @native-html/transient-render-engine

[![npm](https://img.shields.io/npm/v/@native-html/transient-render-engine)](https://www.npmjs.com/package/@native-html/transient-render-engine)
[![CI](https://github.com/native-html/render/workflows/transient-render-engine/badge.svg?branch=main)](https://github.com/native-html/render/actions?query=branch%3Amain+workflow%3Atransient-render-engine)
[![Perf](https://github.com/native-html/render/workflows/performances/badge.svg?branch=main)](https://github.com/native-html/render/actions?query=branch%3Amain+workflow%3Aperformances)
[![codecov](https://codecov.io/gh/native-html/render/branch/main/graph/badge.svg?flag=transient-render-engine)](https://codecov.io/gh/native-html/render?flag=transient-render-engine)
npm package: @native-mate/cli
Description: CLI tool for native-mate — init, add, list, upgrade
Latest version: 1.0.2

# @native-mate/cli

CLI tool for [native-mate](https://github.com/native-mate/native-mate) — add production-ready React Native components to your project.

## Install

No install needed. Run via npx:

```bash
npx @native-mate/cli init
```

## Commands

### `init`

Set up native-mate in your project. Prompts for preset and components directory, installs `@native-mate/core`, creates `native-mate.json`, updates `.cursorrules`.

```bash
npx @native-mate/cli init
npx @native-mate/cli init --preset zinc --yes  # skip prompts
```

### `add`

Add components to your project. Fetches source from the registry, resolves component dependencies, installs npm deps.

```bash
npx @native-mate/cli add button
npx @native-mate/cli add button card input toast
```

Components are written to your configured directory (default: `components/ui/`). You own the code.

### `list`

Browse all available components with descriptions and categories.

```bash
npx @native-mate/cli list
```

### `upgrade`

Check for and apply component updates. Compares file hashes to detect local modifications and warns before overwriting.

```bash
npx @native-mate/cli upgrade
npx @native-mate/cli upgrade button card
```

## Config

`native-mate.json` in your project root:

```json
{
  "preset": "zinc",
  "componentsDir": "components/ui"
}
```

## Package Manager Detection

Automatically detects npm, yarn, pnpm, or bun from lockfiles and uses the correct install command.

## License

MIT
npm package: @native-mate/core
Description: Token system, ThemeProvider, and primitive components for native-mate
Latest version: 0.1.1

# @native-mate/core

Token system, theme provider, and primitive components for [native-mate](https://github.com/native-mate/native-mate).

## Install

```bash
npm install @native-mate/core
```

## Setup

Wrap your app in `ThemeProvider`:

```tsx
import { ThemeProvider } from '@native-mate/core'

export default function App() {
  return (
    <ThemeProvider preset="zinc">
      <YourApp />
    </ThemeProvider>
  )
}
```

## Presets

Four built-in presets: `zinc`, `slate`, `rose`, `midnight`

```tsx
<ThemeProvider preset="zinc" />       // neutral grays (default)
<ThemeProvider preset="slate" />      // cool blue-gray
<ThemeProvider preset="rose" />       // warm rose accents
<ThemeProvider preset="midnight" />   // deep dark with purple
```

## Hooks

### `useTheme()`

Access resolved tokens inside any component:

```tsx
import { useTheme } from '@native-mate/core'

function MyComponent() {
  const theme = useTheme()
  return <View style={{ backgroundColor: theme.colors.background }} />
}
```

### `makeStyles(factory)`

Create memoized, theme-aware StyleSheets:

```tsx
import { makeStyles } from '@native-mate/core'

const useStyles = makeStyles((theme) => ({
  container: {
    backgroundColor: theme.colors.surface,
    padding: theme.spacing.lg,
    borderRadius: theme.radius.md,
  },
}))
```

### `useBreakpoint()`

Responsive breakpoints: `sm` (<768), `md` (768–1023), `lg` (1024+)

```tsx
import { useBreakpoint } from '@native-mate/core'

const bp = useBreakpoint() // 'sm' | 'md' | 'lg'
```

## Token Categories

| Category | Examples |
|---|---|
| Colors | `background`, `foreground`, `primary`, `destructive`, `muted` |
| Spacing | `xs` (4), `sm` (8), `md` (12), `lg` (16), `xl` (24) |
| Radius | `sm` (6), `md` (10), `lg` (16), `full` (9999) |
| Typography | `size`, `weight`, `lineHeight` |
| Animation | `speed.fast` (150ms), `speed.normal` (250ms) |

## Overrides

```tsx
<ThemeProvider
  preset="zinc"
  overrides={{
    dark: { colors: { primary: '#6366f1' } },
  }}
>
```

## License

MIT
npm package: @native-mate/mcp
Description: MCP server for native-mate — list, add, and search components from Claude or Cursor
Latest version: 0.1.2

# @native-mate/mcp

MCP (Model Context Protocol) server for [native-mate](https://github.com/native-mate/native-mate). Lets Claude, Cursor, and other AI tools browse, search, and install native-mate components.

## Setup

### Claude Code

```bash
claude mcp add native-mate -- npx @native-mate/mcp
```

### Claude Desktop

Edit config file:
- **Mac:** `~/Library/Application Support/Claude/claude_desktop_config.json`
- **Windows:** `%APPDATA%\Claude\claude_desktop_config.json`

```json
{
  "mcpServers": {
    "native-mate": {
      "command": "npx",
      "args": ["-y", "@native-mate/mcp"]
    }
  }
}
```

### Cursor

Create `.cursor/mcp.json` in your project root:

```json
{
  "mcpServers": {
    "native-mate": {
      "command": "npx",
      "args": ["-y", "@native-mate/mcp"]
    }
  }
}
```

### Windsurf / Continue / Zed

Same format — check their docs for the MCP config file location.

## Tools

| Tool | Description |
|---|---|
| `list_components` | List all components with names, categories, descriptions. Optional category filter. |
| `get_component` | Get full source code, types, and dependencies for a component. |
| `search_components` | Search components by name, description, or use-case. |
| `generate_theme_config` | Generate a `native-mate.json` config for a preset with optional overrides. |
| `get_add_command` | Get the exact CLI command to install components. |

## Example

Once connected, ask your AI assistant:

- "List all native-mate form components"
- "Get the source code for the toast component"
- "Search for components with haptic feedback"
- "Generate a theme config using the rose preset"
- "What's the command to add button, card, and input?"

## License

MIT
npm package: @native-router/core
Description: A route close to the native experience for react.
Author: wmzy
Latest version: 1.1.0

[![npm](https://img.shields.io/npm/v/@native-router/core.svg)](https://www.npmjs.com/package/@native-router/core)
[![Build Status](https://github.com/wmzy/@native-router/core/actions/workflows/ci.yml/badge.svg)](https://github.com/wmzy/@native-router/core/actions)
[![Coverage](https://img.shields.io/codecov/c/github/wmzy/@native-router/core.svg)](https://codecov.io/gh/wmzy/@native-router/core)
[![install size](https://packagephobia.now.sh/badge?p=@native-router/core)](https://packagephobia.now.sh/result?p=@native-router/core)

# Native Router React

> A route close to the native experience for react.

English | [简体中文](./README-zh_CN.md)

## Features

- Asynchronous navigation
- Cancelable
- Page data concurrent fetch
- Link prefetch and preview
- Most unused features can be tree-shaking
- SSR support

## Install

```bash
npm i @native-router/core
```

## Usage

```tsx
import {View, HistoryRouter as Router} from '@native-router/core';
import Loading from '@/components/Loading';
import RouterError from '@/components/RouterError';
import * as userService from '@/services/user';

export default function App() {
  return (
    <Router
      routes={{
        component: () => import('./Layout'),
        children: [
          {
            path: '/',
            component: () => import('./Home')
          },
          {
            path: '/users',
            component: () => import('./UserList'),
            data: userService.fetchList
          },
          {
            path: '/users/:id',
            component: () => import('./UserProfile'),
            data: ({id}) => userService.fetchById(+id)
          },
          {
            path: '/help',
            component: () => import('./Help')
          },
          {
            path: '/about',
            component: () => import('./About')
          }
        ]
      }}
      baseUrl="/demos"
      errorHandler={(e) => <RouterError error={e} />}
    >
      <View />
      <Loading />
    </Router>
  );
}

```
See [demos](/demos/) for a complete example.

## Documentation 

[API](https://wmzy.github.io/@native-router/core/modules.html)
npm package: @native-router/react
Description: A route close to the native experience for react.
Author: wmzy
Latest version: 1.1.2

[![npm](https://img.shields.io/npm/v/@native-router/react.svg)](https://www.npmjs.com/package/@native-router/react)
[![Build Status](https://github.com/native-router/react/actions/workflows/ci.yml/badge.svg)](https://github.com/native-router/react/actions)
[![codecov](https://codecov.io/gh/native-router/react/graph/badge.svg?token=QIXC6HJH6Z)](https://codecov.io/gh/native-router/react)
[![install size](https://packagephobia.now.sh/badge?p=@native-router/react)](https://packagephobia.now.sh/result?p=@native-router/react)

# Native Router React

> A route close to the native experience for react.

English | [简体中文](./README-zh_CN.md)

## Features

- Asynchronous navigation
- Cancelable
- Page data concurrent fetch
- Link prefetch and preview
- Most unused features can be tree-shaking
- SSR support

## Install

```bash
npm i @native-router/react
```

## Usage

```tsx
import {View, HistoryRouter as Router} from '@native-router/react';
import Loading from '@/components/Loading';
import RouterError from '@/components/RouterError';
import * as userService from '@/services/user';

export default function App() {
  return (
    <Router
      routes={{
        component: () => import('./Layout'),
        children: [
          {
            path: '/',
            component: () => import('./Home')
          },
          {
            path: '/users',
            component: () => import('./UserList'),
            data: userService.fetchList
          },
          {
            path: '/users/:id',
            component: () => import('./UserProfile'),
            data: ({id}) => userService.fetchById(+id)
          },
          {
            path: '/help',
            component: () => import('./Help')
          },
          {
            path: '/about',
            component: () => import('./About')
          }
        ]
      }}
      baseUrl="/demos"
      errorHandler={(e) => <RouterError error={e} />}
    >
      <View />
      <Loading />
    </Router>
  );
}

```
See [demos](/demos/) for a complete example.

## Documentation 

[API](https://native-router.github.io/react/modules.html)

import { Router } from '@native-router/react';

const routes = [
  {
    path: '/admin',
    children: [...]
  }
];

function App() {
  return <Router routes={routes} />;
}
```
npm package: @native-springs/shaders
Description: Native Springs Shaders
Author: Matthias Brandolin
Latest version: 0.2.0

# @native-springs/shaders

High-performance native shader effects for React Native and Expo. Transform your UI with GPU-accelerated visual effects including ripples, glitch distortions, liquid effects, aurora overlays, fireworks, and more.

https://github.com/user-attachments/assets/584ff7a4-4c98-472f-9ec0-1120a8b534e6

## Features

- **Native Performance**: Metal (iOS) and OpenGL (Android) implementations
- **10 Visual Effects**: 3 content shaders + 7 overlay effects, more to come in the near future
- **TypeScript Support**: Full type definitions included
- **Expo Compatible**: Works with managed and bare Expo projects

## Effects

### Shaders (transform content)

| Effect | Description |
|--------|-------------|
| **[RippleShader](./docs/shaders/ripple.md)** |  Touch-responsive water ripples |
| **[GlitchShader](./docs/shaders/glitch.md)** |  Digital glitch effects |
| **[LiquidDistortionShader](./docs/shaders/liquid-distortion.md)** | Liquid warping effects |

### Overlays (layer on top)

| Effect | Description |
|--------|-------------|
| **[AuroraOverlay](./docs/overlays/aurora.md)** | Northern lights effect |
| **[FireSparksOverlay](./docs/overlays/fire-sparks.md)** | Fire particles |
| **[FireworksOverlay](./docs/overlays/fireworks.md)** | Firework explosions |
| **[LightRayOverlay](./docs/overlays/light-ray.md)** |  Volumetric light rays |
| **[LiquidMetalOverlay](./docs/overlays/liquid-metal.md)** | Chrome metallic border |
| **[NeonOverlay](./docs/overlays/neon.md)** | Glowing neon border |
| **[SparklesOverlay](./docs/overlays/sparkles.md)** |  Twinkling particles |

## Installation

```bash
npm install @native-springs/shaders
```

### iOS

Run pod install:

```bash
npx pod-install
```

### Android

No additional configuration required.

## Example App

Check out the [example app](./example) for interactive demos of all effects with adjustable parameters.

```bash
cd example
npm install
npx expo run:ios # or run:android
```

## Requirements

- Expo SDK 51+
- iOS 15.1+
- Android API 24+

## License

MIT

Some effects may have different licenses. See the documentation for each effect for details.
npm package: @native-systems/ui
Description: Stuff for native systems projects. Yes, it's public.
Author: AACN Software- und Systementwicklung GmbH
Latest version: 1.2.1

# Native systems UI components

## Limitations
The .d.ts plugin that we use in the build process flattens type definitions instead of merging them. This applies severe limitations to the source code:
1. Every export in every TypeScript file considered exported from the package (i.e. part of public API). Mark internal exports (internal API) with @internal jsdoc tag to prevent this, or declare internal modules with internal option.
2. Default exports supported only at the top level and in entry points (see below).
3. Exported symbols should be unique across the code base.
4. Exports should not be renamed when re-exporting them. 

Aliasing is still possible.
npm package: @native-systems/utility
Description: Utility functions and types for native systems projects.
Author: AACN Software- und Systementwicklung GmbH
Latest version: 2.5.2

# Native systems utility package
This package contains utility functions and types, which are used across native systems (https://aacn.eu) software projects.

## Steps to deploy new version
1. Update package version.
2. Build project via `yarn build`
3. Publish build via `npm publish`
4. Push changes to repository
npm package: @native-to-trezoaanchor/buffer-layout
Description: Buffer layout utilities for Trezoa programs.
Author: Trezoa Team
Latest version: 0.1.0

Buffer layout utilities for Trezoa program deserialization and serialization.

This package currently only supports [Borsh](https://borsh.io/).

## Development Scripts

If you want to build and develop this package, you can use the following commands:

```bash
# Build the entire package
yarn build
# or manually: rimraf dist/ && yarn build:node && yarn build:browser

# Build Node.js version (CJS and ESM)
yarn build:node
# or manually: tsc && tsc -p tsconfig.cjs.json

# Build browser version
yarn build:browser
# or manually: rollup --config

# Fix code formatting
yarn lint:fix
# or manually: prettier src/** -w

# Check code formatting
yarn lint
# or manually: prettier src/** --check

# Watch mode for development
yarn watch
# or manually: tsc -p tsconfig.cjs.json --watch
```
npm package: @native-ts/calendar-core
Description: JavaScript make base calendar component functions
Author: Canh Nguyen Van
Latest version: 0.0.2

# @native-ts/calendar-core

This is a JavaScript library that provides base calendar component functions.

## Installation

To install this library, you can use npm:

```
npm install @native-ts/calendar-core
```

OR

```
yarn add @native-ts/calendar-core
```

## Usage
You can import the main module from the library like this:

```typescript
import {Calendar, MonthMode} from "@native-ts/calendar-core";

const calendar = new Calendar({
  month: 11,
  year: 2022,
  mode: MonthMode.MON,
});
const {daysInPrevMonth, daysInMonth, daysInNextMonth} = calendar.initialize();
console.log({daysInPrevMonth, daysInMonth, daysInNextMonth});
```

The library provides several classes and functions for working with dates and calendars:

- `Calendar`: A class for creating and manipulating calendar objects.
- `CalendarDay`: A interface representing a specific day in a calendar.
- `CalendarObject`: A interface representing a calendar object.
- `CalendarOptions`: A interface for specifying options when creating a calendar.

License
This project is licensed under the MIT License.
npm package: @native-twin/dev-tools
Description: Native Twin Expo dev tools
Latest version: 7.0.0-next.3

# @native-twin/dev-tools

A new DevTools plugin created by create-dev-plugin

# API documentation

- [Documentation for the main branch](https://github.com/expo/expo/blob/main/docs/pages/versions/unversioned/sdk/@native-twin/dev-tools.md)
- [Documentation for the latest stable release](https://docs.expo.dev/versions/latest/sdk/@native-twin/dev-tools/)

# Installation in managed Expo projects

For [managed](https://docs.expo.dev/archive/managed-vs-bare/) Expo projects, please follow the installation instructions in the [API documentation for the latest stable release](#api-documentation). If you follow the link and there is no documentation available then this library is not yet usable within managed projects &mdash; it is likely to be included in an upcoming Expo SDK release.

# Installation in bare React Native projects

For bare React Native projects, you must ensure that you have [installed and configured the `expo` package](https://docs.expo.dev/bare/installing-expo-modules/) before continuing.

### Add the package to your npm dependencies

```
npm install @native-twin/dev-tools
```




# Contributing

Contributions are very welcome! Please refer to guidelines described in the [contributing guide]( https://github.com/expo/expo#contributing).