open-index/open-npm huggingface dataset:
npm package: @flexiui/svelte-blocks-editor
Description: A lightweight and flexible blocks editor component for Svelte
Author: alexgipi
Latest version: 0.0.1

Un componente de cita, 'Quote' o 'Blockquote' para Svelte.
## Instalación

Para instalar el componente `Quote` en tu proyecto de Svelte, puedes usar npm o yarn.

Con npm:

```bash
npm install @flexiui/svelte-quote
```

Con yarn:

```bash
yarn add @flexiui/svelte-quote
```

## Uso

Una vez instalado, puedes usar el componente `Quote` en tu aplicación de Svelte.

```svelte
<script>
  import { Quote } from '@flexiui/svelte-quote';
  let content = `This is a quote component example with editable mode enabled.`
</script>

<Quote
className="my-quote"
id="flexi-quote"
bgColor="transparent" 
editable={true}
bind:value={content}
on:focus={handleFocus}
on:keydown={handleKeyDown}
on:input={handleInput}
>
</Quote>
```
npm package: @flexiui/svelte-cssvars
Description: A lightweight and flexible CSS Vars editor component for Svelte
Author: alexgipi
Latest version: 0.8.0

# @flexiui/svelte-cssvars

Un componente para Svelte que facilita la creación y gestión de variables CSS de manera cómoda, eficiente y personalizable. Permite definir, editar y visualizar variables dinámicamente, con opciones como validación, valores predeterminados, labels en múltiples idiomas, y una serie de campos predefinidos para facilitar la edición de variables.

## Instalación

Para instalar el componente `CSSVars` en tu proyecto de Svelte, puedes usar npm o yarn.

Con npm:

```bash
npm install @flexiui/svelte-cssvars
```

Con yarn:

```bash
yarn add @flexiui/svelte-cssvars
```

## Uso

Una vez instalado, puedes usar el componente `TagsInput` en tu aplicación de Svelte.

```svelte
<script>
  import CSSVars from '@flexiui/svelte-cssvars';
  let field = {
    labels: {
      plural: 'CSS Variables',
      singular: 'CSS Variable',
    }
  };
</script>

<CSSVars 
    name="tags" 
    field={field}
    labels={field.labels}
    tags={[]} 
    min={1} 
    max={20} 
    allowDuplicates={false} 
    placeholder={"Presiona 'Enter' para añadir una variable"}
    required={false} />
```
npm package: @flexiui/svelte-input
Description: A lightweight and flexible input component for Svelte.
Author: alexgipi
Latest version: 1.0.7

# `@flexiui/svelte-input`

Un componente de entrada para Svelte. Permite la entrada de datos con opciones de personalización como tipo de campo, valor, marcadores de posición, y validaciones como mínimo y máximo.

## Instalación

Para instalar el componente `Input` en tu proyecto de Svelte, puedes usar npm o yarn.

Con npm:

```bash
npm install @flexiui/svelte-input
```

Con yarn:

```bash
yarn add @flexiui/svelte-input
```

## Uso

Una vez instalado, puedes usar el componente `Input` en tu aplicación de Svelte.

```svelte
<script>
  import MyInputField from '@flexiui/svelte-input';
  let field = {
    name: 'exampleField',
    placeholder: {
      es: 'Introduce un valor'
    },
    readonly: false
  };
</script>

<MyInputField
    name={field.name}
    id={field.name}
    type="text"
    value={''} 
    placeholder={field.placeholder}
    readonly={field.readonly} />
```

### Propiedades del Componente

| Propiedad | Tipo | Descripción |
| --- | --- | --- |
| `name` | `string` | El nombre del campo para el componente de entrada. |
| `id` | `string` | El identificador único del campo. |
| `type` | `string` | El tipo de entrada (por ejemplo, `text`, `number`, etc.). |
| `value` | `any` | El valor actual del campo de entrada. |
| `placeholder` | `string` | El texto de marcador de posición en el campo de entrada. |
| `min` | `number` | Número mínimo permitido (solo para tipos numéricos). |
| `max` | `number` | Número máximo permitido (solo para tipos numéricos). |
| `step` | `number` | El incremento permitido (solo para tipos numéricos). |
| `required` | `boolean` | Indica si el campo es obligatorio. |
| `readonly` | `boolean` | Indica si el campo es de solo lectura. |

### Ejemplo de Uso

```svelte
<script>
  import MyInputField from '@flexiui/svelte-input';
  let field = {
    name: 'createdAt',
    placeholder: {
      es: 'Introduce la fecha'
    },
    readonly: true
  };
</script>

<MyInputField
    name={field.name}
    id={field.name}
    type="date"
    value={new Date().toISOString().split('T')[0]} 
    placeholder={field.placeholder}
    readonly={field.readonly} />
```

### Personalización

Puedes personalizar aún más el comportamiento del componente mediante el uso de estilos CSS. Los estilos predeterminados pueden ser sobreescritos fácilmente mediante clases CSS.

#### Ejemplo de estilos

```css
/* Puedes personalizar los estilos en tu propio archivo CSS */
.input-field {
  background-color: #f0f0f0;
  border-radius: 5px;
  padding: 10px;
}
```

### Contribuciones

Si deseas contribuir a este proyecto, puedes hacerlo mediante un **Pull Request** en el repositorio de GitHub. Por favor, sigue las mejores prácticas y asegúrate de que tu código pase las pruebas antes de hacer un PR.

### Licencia

Este proyecto está bajo la licencia **MIT**.
npm package: @flexiui/svelte-prism-code-editor
Description: A lightweight and flexible Svelte component that wraps Prism Code Editor, providing syntax highlighting with ease of integration
Author: alexgipi
Latest version: 0.0.16

# `@flexiui/svelte-prism-code-editor`

A lightweight and flexible Svelte component that wraps Prism Code Editor, providing syntax highlighting with ease of integration

## Instalación

Para instalar el componente `PrismCodeEditor` en tu proyecto de Svelte, puedes usar npm o yarn.

Con npm:

```bash
npm install @flexiui/svelte-prism-code-editor
```

Con yarn:

```bash
yarn add @flexiui/svelte-prism-code-editor
```

## Uso

Una vez instalado, puedes usar el componente `TagsInput` en tu aplicación de Svelte.

```svelte
<script lang="ts">
  import { PrismCodeEditor } from '@flexiui/svelte-prism-code-editor';
  
  let value = null; // If value is null provides a sample code
  
  function onUpdate(e){
    const { eventType, code } = e.detail;

    if(eventType === 'update'){
        value = code;
    }
  }
</script>

<PrismCodeEditor 
on:update={e => onUpdate(e)}
language="css" 
id="example-code-editor" 
{value}
className='no-drag'
/>
```

### Propiedades del Componente

| Propiedad | Tipo | Descripción |
| --- | --- | --- |
| `language` | `string` | El lenguaje de sintaxis del editor de código. | 
| `id` | `string` | El identificador del editor de código.
| `value` | `string` | El valor del editor de código.
| `className` | `string` | Clase de CSS personalizada del editor de código.

### Eventos

| Evento | Tipo | Descripción |
| --- | --- | --- |
| `update` | `{ eventType: 'update', code: string }` | Se emite cuando el código se actualiza.

### Personalización

Puedes personalizar aún más el comportamiento del componente mediante el uso de estilos CSS. Los estilos predeterminados pueden ser sobreescritos fácilmente mediante clases CSS.

#### Ejemplo de estilos

```css
/* Puedes personalizar los estilos en tu propio archivo CSS */
.tag-input {
  background-color: #f0f0f0;
  border-radius: 5px;
  padding: 10px;
}

.tag-input .tag {
  display: inline-block;
  margin: 5px;
  padding: 5px;
  background-color: #007bff;
  color: white;
  border-radius: 3px;
}
```

### Referencias/Creditos
 - [Prism Code Editor](https://github.com/FIameCaster/prism-code-editor)

### Contribuciones

Si deseas contribuir a este proyecto, puedes hacerlo mediante un **Pull Request** en el repositorio de GitHub. Por favor, sigue las mejores prácticas y asegúrate de que tu código pase las pruebas antes de hacer un PR.

### Licencia

Este proyecto está bajo la licencia **MIT**.
npm package: @flexiui/svelte-quote
Description: A lightweight and flexible quote component for Svelte
Author: alexgipi
Latest version: 1.0.11

<br/>
<p align="center">
  <img src="https://raw.githubusercontent.com/withastro/astro/HEAD/.github/assets/banner.jpg" alt="Build the web you want">
  <br/><br/>
  <a href="https://astro.build">Astro</a> is the all-in-one web framework designed for speed.
  <br/>
  Pull your content from anywhere and deploy everywhere, all powered by your favorite UI components and libraries.
  <br/><br/>
</p>

Un componente de cita, 'Quote' o 'Blockquote' para Svelte.
## Instalación

Para instalar el componente `Quote` en tu proyecto de Svelte, puedes usar npm o yarn.

Con npm:

```bash
npm install @flexiui/svelte-quote
```

Con yarn:

```bash
yarn add @flexiui/svelte-quote
```

## Uso

Una vez instalado, puedes usar el componente `Quote` en tu aplicación de Svelte.

```svelte
<script>
  import { Quote } from '@flexiui/svelte-quote';
  let content = `This is a quote component example with editable mode enabled.`
</script>

<Quote
className="my-quote"
id="flexi-quote"
bgColor="transparent" 
editable={true}
bind:value={content}
on:focus={handleFocus}
on:keydown={handleKeyDown}
on:input={handleInput}
>
</Quote>
```
npm package: @flexkit/cli
Description: Flexkit CLI is the command-line interface for managing Flexkit projects from your terminal.
Latest version: 0.0.6

<div align="center">
  <a href="https://flexkit.io">
    <picture>
      <source media="(prefers-color-scheme: dark)" srcset="https://flexkit.io/public/logos/icon-dark-background.png">
      <img alt="Flexkit logo" src="https://flexkit.io/public/logos/icon-light-background.png" height="128">
    </picture>
  </a>
  <h1>Flexkit CLI</h1>

<a href="https://www.npmjs.com/package/@flexkit/cli"><img alt="NPM version" src="https://img.shields.io/npm/v/%40flexkit%2Fcli?style=for-the-badge&labelColor=%23000000&color=%232563eb"></a>
<a href="https://github.com/flexkit-io/flexkit/blob/main/LICENSE"><img alt="License" src="https://img.shields.io/npm/l/%40flexkit%2Fcli?style=for-the-badge&labelColor=%23000000&color=%230ccf6a"></a>
<a href="https://github.com/orgs/flexkit-io/discussions"><img alt="Join the community on GitHub" src="https://img.shields.io/badge/Join%20the%20comunity-blue.svg?style=for-the-badge&logo=data:image/svg%2bxml;base64,PHN2ZyBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgNDggNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTcgOEg0MVY0MEg3VjhaIiBmaWxsPSIjMDIwODE3Ij48L3BhdGg+PHBhdGggZD0iTTI0IDBDNDIgMCA0OCA2IDQ4IDI0QzQ4IDQyIDQyIDQ4IDI0IDQ4QzYgNDggMCA0MiAwIDI0QzAgNiA2IDAgMjQgMFpNMTcuNzQ5NCA5LjUyMzgxSDguNzYxOUwxOS4yODMzIDIzLjgzMTNMOC43NjE5IDM4LjcwNzhIMTcuNzQ5NEwyMS4wNDk5IDMzLjY2MzlWMTQuMjU0OUwxNy43NDk0IDkuNTIzODFaTTM4Ljk1NzcgOS41MjM4MUgyOS45NTQyTDI2LjI4NTcgMTQuODIyOVYzMy4wNDA2TDI5Ljk1NDIgMzguNzA3OEgzOC45NTc3TDI4LjM5MDggMjMuODMxM0wzOC45NTc3IDkuNTIzODFaIiBmaWxsPSJ3aGl0ZSI+PC9wYXRoPjwvc3ZnPg==&labelColor=%23000000"></a>

</div>

**Flexkit CLI is the command-line interface for managing Flexkit projects from your terminal.**

Use it to authenticate, deploy schemas, and run day-to-day project operations without leaving your development workflow.

## Usage

Install the CLI globally with npm:

```shell
npm install --global @flexkit/cli
```

Example commands:

```shell
flexkit login
flexkit deploy
```

## Documentation

For details on how to use Flexkit CLI, check out our [documentation](https://flexkit.io/docs/cli).

## Contributing

Contributions to Flexkit are welcome and highly appreciated. However, before you jump right into it, we would like you to review our [Contribution Guidelines](/contributing.md) to make sure you have a smooth experience contributing to Flexkit.

## Reporting Issues

Found a bug? Have a feature request?

Open an issue with:
• Repro steps
• Expected vs actual behavior
• Screenshots when helpful
• Schema snippet (if relevant)

## License

This project is licensed under the **MIT license**.

See [LICENSE](https://github.com/flexkit-io/flexkit/blob/main/LICENSE) for more information.

---

## Security

If you believe you have found a security vulnerability in Flexkit, we encourage you to **_responsibly disclose this and NOT open a public issue_**.

Please email us at security@flexkit.io to report any security vulnerabilities.
npm package: @flexmatch-dev/interface
Description: Shared API interfaces and constants for FlexMatch platform services.
Latest version: 0.1.9

# @flexmatch-dev/interface

FlexMatch 프로젝트의 프론트엔드와 백엔드가 공유하는 API 타입, 페이로드, 상수를 관리하는 경량 패키지입니다.

## 스크립트

- `npm run build` – TypeScript를 `dist/` 폴더로 컴파일합니다.
- `npm run build:watch` – 변경 사항을 감지하며 빌드를 실행합니다.

패키지는 `prepare` 스크립트에 `build`가 연결되어 있으므로 다른 프로젝트(예: `frontend`, `backend`)에서 `npm install` 시 자동으로 빌드됩니다.

## 사용 방법

```ts
import { USER_ROLES, type LoginRequest } from '@flexmatch-dev/interface';

const request: LoginRequest = {
  email: 'user@example.com',
  password: 'secret',
  targetRole: USER_ROLES.ADMIN,
};
```

### 설치

```bash
npm install @flexmatch-dev/interface
```

## 규칙

- `constant` – 공통으로 사용하는 상수
- `request` – API request에 사용하는 body 혹은 query셋
- `response` – API response에 사용하는 body
- `error` – HTTP exception에 사용하는 에러 코드 및 response의 body
- `message` – 소켓 통신에 사용하는 메시지 페이로드
- `interface` – 그 외에 공통 인터페이스

## 배포 가이드

1. 버전 태깅  
   ```bash
   npm version <major|minor|patch>
   ```
2. 빌드 확인  
   ```bash
   npm run build
   ```
3. 패키지 발행  
   ```bash
   npm publish --access public
   ```

패키지에는 `dist/` 산출물만 포함되며, 불필요한 파일은 `.npmignore` 및 `package.json`의 `files` 필드를 통해 제외됩니다.
npm package: @flexmq/redis
Description: Redis storage adapter for flexmq job queue
Author: Vikas Rathod
Latest version: 0.1.1

# @flexmq/redis

Redis storage adapter for [`flexmq`](https://www.npmjs.com/package/flexmq).

It provides persistent queue storage, delayed job scheduling, processing recovery, and safe multi-worker coordination using Redis + Lua scripts.

## Installation

```bash
npm install flexmq @flexmq/redis ioredis
```

## Requirements

- Node.js `>=16`
- Redis `>=6`
- `ioredis` `^5`

## Quick start

```ts
import { Queue, Worker } from "flexmq";
import { RedisStorageAdapter } from "@flexmq/redis";

type Payload = { message: string };

const storage = new RedisStorageAdapter<Payload>({
  host: "127.0.0.1",
  port: 6379,
  queueName: "emails",
});

const queue = new Queue<Payload>("emails", {
  storage,
  capacity: 1000,
});

const worker = new Worker<Payload>("emails", {
  storage,
  concurrency: 2,
  processor: async (job) => {
    console.log("Processing:", job.payload.message);
  },
});

async function main() {
  await storage.connect();
  await queue.connect();

  await queue.add({ message: "Welcome email" }, { maxAttempts: 3 });
  await queue.add({ message: "Password reset" }, { maxAttempts: 5 });

  await worker.start();

}

main().catch(console.error);
```

## Configuration

`RedisStorageAdapter` accepts a Redis config object (typed in package exports).  
Common fields:

- `host`
- `port`
- `queueName`
- optional auth/db/prefix fields (if needed by your Redis setup)

## Runtime behavior

- Jobs are stored in Redis hashes.
- Pending jobs are consumed with blocking pop semantics.
- Delayed jobs are promoted when due.
- Stuck processing jobs can be recovered and retried.
- Payload is serialized/deserialized safely for object payloads.

## Production notes

- Use a dedicated Redis DB/key prefix per environment.
- Run multiple workers for horizontal scaling.
- Monitor retry/failure rates.
- Ensure clocks are reasonably synchronized across worker machines.
- Use graceful shutdown in workers to avoid duplicate processing windows.

## Related packages

- Core queue: [`flexmq`](https://www.npmjs.com/package/flexmq)

## License

MIT
npm package: @flexn/assets-compose-outline
Description: Flexn Assets for Compose projects
Author: Flexn
Latest version: 0.3.2

# @flexn/assets-compose-outline


Example usage:

`./appConfigs/**/renative.json`

```
{
    "assetSources": [
        "{{resolvePackage(@flexn/assets-compose-outline)}}/assets"
    ]
}
```
npm package: @flexn/assets-renative-outline
Description: Flexn Assets for ReNative projects
Author: Flexn
Latest version: 0.3.5

# @flexn/assets-renative-outline


Example usage:

`./appConfigs/**/renative.json`

```
{
    "assetSources": [
        "{{resolvePackage(@flexn/assets-renative-outline)}}/assets"
    ]
}
```
npm package: @flexn/eslint-config
Description: Flexn ESLint config
Author: Flexn
Latest version: 1.0.0

# @flexn/eslint-config

Example usage:

`.eslintrc.js`

```
module.exports = {
    extends: ['@flexn/eslint-config'],
    settings: {
        'import/core-modules': ['@flexn/eslint-config'],
    },
};
```
npm package: @flexn/plugins
Description: Flexn Renative Plugins
Author: Flexn
Latest version: 1.0.13

# @flexn/plugins

Example usage:

`./renative.json`

```
{
    "paths": {
        "pluginTemplates": {
            "flexn": {
                "npm": "@flexn/plugins",
                "path": "./pluginTemplates"
            }
        }
    },
    "plugins": {
        "plugin-name": "source:flexn"
    }
}
```
npm package: @flexn/shopify-flash-list
Description: FlashList is a more performant FlatList replacement
Author: shopify
Latest version: 1.4.9

![FlashList Image](./FlashList.png)

<div align="center">
  <a href="https://shopify.github.io/flash-list/">Website</a> •
  <a href="https://discord.gg/k2gzABTfav">Discord</a> •
  <a href="https://shopify.github.io/flash-list/docs/">Getting started</a> •
  <a href="https://shopify.github.io/flash-list/docs/usage">Usage</a> •
  <a href="https://shopify.github.io/flash-list/docs/performance-troubleshooting">Performance</a> •
  <a href="https://shopify.github.io/flash-list/docs/fundamentals/performant-components">Writing performant components</a> •
  <a href="https://shopify.github.io/flash-list/docs/known-issues">Known Issues</a>
<br><br>

**Fast & performant React Native list. No more blank cells.**

Swap from FlatList in seconds. Get instant performance.

</div>

## Installation

Add the package to your project via `yarn add @shopify/flash-list` and run `pod install` in the `ios` directory.

## Usage

We recommend reading the detailed documentation for using `FlashList` [here](https://shopify.github.io/flash-list/docs/usage).

But if you are familiar with [FlatList](https://reactnative.dev/docs/flatlist), you already know how to use `FlashList`. You can try out `FlashList` by changing the component name and adding the `estimatedItemSize` prop or refer to the example below:

```jsx
import React from "react";
import { View, Text } from "react-native";
import { FlashList } from "@shopify/flash-list";

const DATA = [
  {
    title: "First Item",
  },
  {
    title: "Second Item",
  },
];

const MyList = () => {
  return (
    <FlashList
      data={DATA}
      renderItem={({ item }) => <Text>{item.title}</Text>}
      estimatedItemSize={200}
    />
  );
};
```

To avoid common pitfalls, you can also follow these steps for migrating from `FlatList`, based on our own experiences:

1. Switch from `FlatList` to `FlashList` and render the list once. You should see a warning about missing `estimatedItemSize` and a suggestion. Set this value as the prop directly.
2. **Important**: Scan your [`renderItem`](https://shopify.github.io/flash-list/docs/usage/#renderitem) hierarchy for explicit `key` prop definitions and remove them. If you’re doing a `.map()` use indices as keys.
3. Check your [`renderItem`](https://shopify.github.io/flash-list/docs/usage/#renderitem) hierarchy for components that make use of `useState` and verify whether that state would need to be reset if a different item is passed to that component (see [Recycling](https://shopify.github.io/flash-list/docs/recycling))
4. If your list has heterogenous views, pass their types to `FlashList` using [`getItemType`](https://shopify.github.io/flash-list/docs/usage/#getitemtype) prop to improve performance.
5. Do not test performance with JS dev mode on. Make sure you’re in release mode. `FlashList` can appear slower while in dev mode due to a small render buffer.

## App / Playground

The [fixture](https://github.com/Shopify/flash-list/tree/main/fixture) is an example app showing how to use the library.
npm package: @flexn/typescript
Description: Flexn Typescript configs
Author: Flexn Team
Latest version: 0.1.6

# @flexn/typescript

Example usage:

`tsconfig.json`

```
{
    "extends": "@flexn/typescript/tsconfig.lib.react.json",
    "compilerOptions": {
        "outDir": "./lib",
        "rootDir": "./src"
    }
}
```
npm package: @flexn/typescript-config
Description: Flexn Typescript configs
Author: Flexn
Latest version: 1.0.0

# @flexn/typescript-config

Example usage:

`tsconfig.json`

```
{
    "extends": "@flexn/typescript-config/tsconfig.lib.react.json",
    "compilerOptions": {
        "outDir": "./lib",
        "rootDir": "./src"
    }
}
```
npm package: @flexnative/avatar
Description: React Native Avatar
Author: Redon Alla
Latest version: 0.0.7

Avatars can be used to represent people or objects. It supports images, Icons, or letters.

The **FlexNative Avatar** is part of the `FlexNative Framework` and is available under the `@flexnative/avatar` NPM package.

## Dependencies
- [`@flexnative/theme-context`](https://www.npmjs.com/package/@flexnative/theme-context)
- [`@flexnative/icons`](https://www.npmjs.com/package/@flexnative/icons)
- [`expo-image`](https://docs.expo.dev/versions/latest/sdk/image/)


For more details on how to start and how to use read the [documentation](https://redonalla.github.io/flexnative/).
npm package: @flexnative/badges
Description: React Native Badges
Author: Redon Alla
Latest version: 0.0.6

The **FlexNative Badges** is part of the `FlexNative Framework` and is available under the `@flexnative/badges` NPM package.

## Dependencies
- [`@flexnative/theme-context`](https://www.npmjs.com/package/@flexnative/theme-context)


For more details on how to start and how to use read the [documentation](https://redonalla.github.io/flexnative/).
npm package: @flexnative/bottom-sheet
Description: React Native Bottom Sheet
Author: Redon Alla
Latest version: 0.0.4

Bottom sheets are surfaces containing supplementary content, anchored to the bottom of the screen.
They can provide users with quick access to contextual information, actions, or settings without interrupting their current workflow.

The Bottom Sheet Package is part of **FlexNative** for React Native, and is available under the `@flexnative/bottom-sheet` NPM package.

A performant interactive bottom sheet with fully configurable options.

## Dependencies
- [`expo-blur`](https://docs.expo.dev/versions/latest/sdk/blur-view/)
- [`@flexnative/theme-context`](https://www.npmjs.com/package/@flexnative/theme-context)

For more details on how to start and how to use read the [documentation](https://redonalla.github.io/flexnative/).
npm package: @flexnative/buttons
Description: React Native Buttons
Author: Redon Alla
Latest version: 0.0.8

**FlexNative Buttons** package is part of **FlexNative** for React Native, it provides a clickable UI library and functionality.

The package include a variety of button types and styles that have extensive styles options.
This flexibility allows you to quickly and easily create the exact button you need to fit your specific requirements for functionality and appearance.


## Dependencies
- [`@flexnative/theme-context`](https://www.npmjs.com/package/@flexnative/theme-context)
- [`@flexnative/icons`](https://www.npmjs.com/package/@flexnative/icons)
- [`@flexnative/ui-constants`](https://www.npmjs.com/package/@flexnative/ui-constants)


For more details on how to start and how to use read the [documentation](https://redonalla.github.io/flexnative/).
npm package: @flexnative/inputs
Description: React Native Inputs
Author: Redon Alla
Latest version: 0.0.21

**FlexNative Inputs** package is part of **FlexNative** for React Native, it provides a same base inputs UI library and functionality.

## Dependencies
- [`@flexnative/theme-context`](https://www.npmjs.com/package/@flexnative/theme-context)
- [`@flexnative/icons`](https://www.npmjs.com/package/@flexnative/icons)
- [`@flexnative/ui-constants`](https://www.npmjs.com/package/@flexnative/ui-constants)


For more details on how to start and how to use read the [documentation](https://redonalla.github.io/flexnative/).
npm package: @flexnative/messages
Description: Display warning messages that require attention.
Author: Redon Alla
Latest version: 0.0.12

## Messages

Display warning messages that require attention with colored message blocks, to emphasize part of your page.

### Dependencies
- [`@flexnative/theme-context`](https://www.npmjs.com/package/@flexnative/theme-context)

For more details on how to start and how to use read the [documentation](https://redonalla.github.io/flexnative/).
npm package: @flexnative/skeleton-loading
Description: React Native Skeleton loadings
Author: Redon Alla
Latest version: 0.0.3

The **FlexNative Skeleton Loading** is part of the `FlexNative` and is available under the `@flexnative/skeleton-loading` NPM package.

## Dependencies
- [`@flexnative/theme-context`](https://www.npmjs.com/package/@flexnative/theme-context)
- [`react-native-svg`](https://github.com/software-mansion/react-native-svg)


For more details on how to start and how to use read the [documentation](https://redonalla.github.io/flexnative/).
npm package: @flexnative/tags
Description: React Native Tags
Author: Redon Alla
Latest version: 0.0.4

The **FlexNative Skeleton Loading** is part of the `FlexNative` and is available under the `@flexnative/skeleton-loading` NPM package.

## Dependencies
- [`@flexnative/theme-context`](https://www.npmjs.com/package/@flexnative/theme-context)
- [`@flexnative/icons`](https://www.npmjs.com/package/@flexnative/icons)
- [`@flexnative/ui-constants`](https://www.npmjs.com/package/@flexnative/ui-constants)



For more details on how to start and how to use read the [documentation](https://redonalla.github.io/flexnative/).
npm package: @flexnative/ui-constants
Description: **FlexNative Utilities** are part of **FlexNatives framework** witch provides some utilities methods.
Author: Redon Alla
Latest version: 0.0.2

# 🛠 Utilities

**FlexNative Utilities** are part of **FlexNatives framework** witch provides some utilities methods.

- ui-constants
- local-storage

## UI Constants

`ui-constants` Packages is part of **FlexNative**, that provides core constants related with UI Components.

### Values

|  Name   | Type | Value |
| ------- | ---- | ----- |
| <span id='basesize'>BASE_SIZE</span> | `number` | 16 |
| DISABLED_OPACITY | `number` | 0.4 |
| GHOST_TRANSPARENCY | `string` | 40 |
| GHOST_ACTIVE_TRANSPARENCY | `string` | 73 |
| WHITE_TEXT_COLOR | [`ColorValue`](https://reactnative.dev/docs/colors) | <ColorView color={'#FFFFFF'}/> #FFFFFF |
| BLACK_TEXT_COLOR | [`ColorValue`](https://reactnative.dev/docs/colors) | <ColorView color={'#424242'}/> #424242 |
| DARK_OVERLAY | [`ColorValue`](https://reactnative.dev/docs/colors) | <ColorView color={'#00000021'}/> #00000021 |
| LIGHT_OVERLAY | [`ColorValue`](https://reactnative.dev/docs/colors) | <ColorView color={'#FFFFFF21'}/> #FFFFFF21 |
| BUTTON_PADDING_VERTICAL_MULTIPLIER | `number` | 0.16 |
| BUTTON_PADDING_HORIZONTAL_MULTIPLIER | `number` | 1 |
| [FONT_SIZE](#font_size) | `Enum` | |
| [BORDER_RADIUS](#border_radius) | `Enum` | |
| [BORDER_WIDTH](#border_width) | `Enum` | |

#### FONT_SIZE
|  Name   | Type | Value |
| ------- | ---- | ----- |
| small | `number` | [BASE_SIZE](#basesize) * 0.75 |
| default | `number` | [BASE_SIZE](#basesize) |
| medium | `number` | [BASE_SIZE](#basesize) * 1.25 |
| large | `number` | [BASE_SIZE](#basesize) * 1.5 |

#### BORDER_RADIUS
|  Name   | Type | Value |
| ------- | ---- | ----- |
| none | `number` | 0 |
| small | `number` | 2 |
| medium | `number` | 4 |
| large | `number` | 6 |
| full | `number` | 99999 |


#### BORDER_WIDTH
|  Name  | Type | Value |
| ------- | ---- | ----- |
| none | `number` | 0 |
| hairline | `number` | [`StyleSheet.hairlineWidth`](https://reactnative.dev/docs/stylesheet#hairlinewidth) |
| thin | `number` | 1 |
| base | `number` | 2 |
| thick | `number` | 3 |

For more details on how to start and how to use read the [documentation](https://redonalla.github.io/ra-framework-docks/).

## Local Storage

The Local Storage Packages is part of **FlexNative**, that provides an asynchronous, unencrypted, persistent, key-value storage API.

Local Storage can only store string data. In order to store object data, you need to serialize it first.
For data that can be serialized to JSON, you can use JSON.stringify() when saving the data and JSON.parse() when loading the data.

With `@flexnative/local-storage` you don't needs to serialize and deserialize strings to save or get object from local storage,
`@flexnative/local-storage` does it for you.

### Dependencies
- [`@react-native-async-storage/async-storage`](https://docs.expo.dev/versions/latest/sdk/async-storage/)

For more details on how to start and how to use read the [documentation](https://redonalla.github.io/ra-framework-docks/).