open-index/open-npm huggingface dataset:
npm package: @netnix/leaflet-sveltekit
Description: Easy to use Leaflet components for SvelteKit
Author: Máximo Álvarez Arceci marceci@netnix.net
Latest version: 1.0.7

# create-svelte

Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).

Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.

## Building

To build your library:

```bash
npm run package
```

To create a production version of your showcase app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

## Publishing

Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).

To publish your library to [npm](https://www.npmjs.com):

```bash
npm publish
```
npm package: @netojose/react-modal
Description: A lightweight dialog component for React
Author: José neto
Latest version: 1.0.4

# A lightweight dialog component for React

## Demo

https://codesandbox.io/s/react-modal-example-3km0w

## Install

```
npm i @netojose/react-modal
```

or

```
yarn add @netojose/react-modal
```

## Basic usage

```js
import React, { useState, useCallback } from 'react'
import Modal from '@netojose/react-modal'

function App() {
    const [isOpen, setIsOpen] = useState(false)
    const openModal = useCallback(() => setIsOpen(true), [])
    const closeModal = useCallback(() => setIsOpen(false), [])
    return (
        <div>
            <input type="button" value="Open modal" onClick={openModal} />
            <Modal isOpen={isOpen} onRequestClose={closeModal}>
                <p>This is the modal content</p>
                <input type="button" value="Close modal" onClick={closeModal} />
            </Modal>
        </div>
    )
}

export default App
```

## API

| prop                | Description                                     | type     | default value         | required |
| ------------------- | ----------------------------------------------- | -------- | --------------------- | -------- |
| isOpen              | Flag to render or not the modal                 | boolean  | false                 | Yes      |
| ariaLabelledby      | `aria-labelledby` modal attribute               | string   | null                  | No       |
| ariaDescribedby     | `aria-describedby` modal attribute              | string   | null                  | No       |
| onAfterOpen         | Callback after modal open                       | function | () => null            | No       |
| onAfterClose        | Callback after modal close                      | function | () => null            | No       |
| onRequestClose      | Callback when a close modal action is triggered | function | () => null            | No       |
| closeOnOverlayClick | Flag to request close modal on overlay click    | boolean  | true                  | No       |
| closeOnEsc          | Flag to request close modal on press esc key    | boolean  | true                  | No       |
| focusAfterRender    | Flag to modal should be focused after render    | boolean  | true                  | No       |
| portalClassName     | Portal div class name                           | string   | ReactModal\_\_Portal  | No       |
| overlayClassName    | Overlay div class name                          | string   | ReactModal\_\_Overlay | No       |
| modalClassName      | Modal div class name                            | string   | ReactModal\_\_Modal   | No       |
| overlayStyles       | Extra overlay styles                            | object   | {}                    | No       |
| modalStyles         | Extra modal styles                              | object   | {}                    | No       |
| container           | Query selector to append portal                 | string   | body                  | No       |
npm package: @netology-group/account
Description: account client
Author: OLC Netology group LLC
Latest version: 2.5.1

Account client

[![](https://data.jsdelivr.com/v1/package/npm/@netology-group/account/badge?style=rounded)](https://www.jsdelivr.com/package/npm/@netology-group/account)
![](https://img.shields.io/npm/dt/@netology-group/account.svg)
![](https://img.shields.io/npm/dm/@netology-group/account.svg)

## How to use

### Import module

```javascript
import { Account, IdP as Provider } from 'account'
```

### Initialize

```javascript
const config = {
  label: '<account_label>'
}

const provider = new Provider({
  endpoint: 'http://domain.name'
})
// You can write your own provider or use default IdP provider

const account = new Account(config, provider, window.localStorage)
// You can bypass any storage provider which implements [Provider](./src/identity-provider.js.flow#14) interface
```

### Modes

`Account` supports two modes: `id` & `label`.

These modes are pretty the same. Main difference is that in `id` mode `Account` [uses `audience`](./test/account/account.test.js#L105-L131) suffix at any request.

#### Clarify label

`id` & `label` modes require a label to be known. But you actually may not.

There is special `fetchLabel` method which allows to request actual `label` for the account.
It uses `me` placeholer for the request's URL. For instance:

```javascript
Account.fetchLabel(
  { refresh_token: '<token>' },
  new IdP(/* idp config */),
  /* here you may use your own placeholder. `me` by default */
).then(({ id: acc_label }) => {
  /* do stuff here */
})
```

#### Request access token

- `access_token` will be automatically refreshed if applicable.

```javascript
account.tokenData()
  .then((_: /*: TokenData */) => { /* do something */ })
```

#### Revoke refresh token

```javascript
account.revokeRefreshToken()
  .then((_: /*: TokenData */) => { /* do something */ })
```

#### Store token

```javascript
const tokenData /*: TokenData */ = {}
account
  .store(tokenData)
  .then((_ /*: TokenData */) => { /* do something */ })
```

#### Load token

```javascript
account
  .load()
  .then((_ /*: TokenData */) => { /* do something */ })
```

#### Remove token

```javascript
account
  .remove()
  .then((_ /*: TokenData */) => { /* do something */ })
```

## Utilities

### TokenProvider

`TokenProvider` is used to provide an interface to access the valid token on each request. Valid `refresh_token` is needed to initialize `TokenProvider` properly.

```javascript
const { Account, TokenProvider } = Account
const account = new Account(/* proper configuration */)

let provider = new TokenProvider({ refresh_token: '<refresh_token>' }, account)
// or
provider = new TokenProvider({ refresh_token: '<refresh_token>' })
provider
  .iEngine(account)
  .initialize()

provider.token().then(access_token => {/* do smth */})
```
npm package: @netology-group/mqtt-client
Description: MQTT client implementation for JavaScript
Author: netology-group
Latest version: 0.4.2

# MQTT client
MQTT client implementation for JavaScript

## Installation

```sh
npm install --save @netology-group/mqtt-client
```

## Example

```js
const client = new MQTTClient('ws://iot.eclipse.org:80/ws')

client.connect()

client.on(MQTTClient.events.MESSAGE, function (topic, message) {
  console.log('[message]', topic, message.toString())
  client.disconnect()
})

client.on(MQTTClient.events.CONNECT, function (event) {
  client.subscribe('test/topic/1/#', null, function (err, data) {
    client.publish('test/topic/1/2/3', 'Hello, MQTT!')
  })
})
```

## Documentation

* [API](docs/API.md)
npm package: @netology-group/storage
Description: JavaScript API-client for Storage service
Author: netology-group
Latest version: 0.2.0

# StorageJS
JavaScript API-client for Storage service

## Installation

```sh
npm install --save @netology-group/storage
```

## Example

```js
import {
  AxiosHttpClient,
  SimpleTokenProvider,
  HttpStorageResource
} from '@netology-group/storage'

const TOKEN = 'jwt-token'
const bucket = 'example-bucket'
const set = '123'
const object = 'example.json'
const headers = {
  'cache-control': 'max-age=31536000',
  'content-type': 'application/json'
}
const data = {foo: 'bar'}

const storage = new HttpStorageResource(
  'https://example.com',
  'api/v1',
  new AxiosHttpClient(),
  new SimpleTokenProvider(TOKEN)
)

// signing request params
storage.sign({ method: 'PUT', bucket, set, object, headers })
  .then((response) => {
    console.log('[response]', response)
  })
  .catch((error) => {
    console.log('[error]', error)
  })
  
// uploading data
storage.upload({ bucket, set, object, headers }, data, {})
  .then((response) => {
    console.log('[response]', response)
  })
  .catch((error) => {
    console.log('[error]', error)
  })
```
npm package: @netology-group/wc-link
Description: `wc-link` web component
Author: Aleksey Konstantinov
Latest version: 0.1.3

# wc-link
`<wc-link>` web component

## How to

### Demo
```bash
npm start
```

### Use
```html
<script>window.customElements.define('wc-link', WCLink.Link)</script>
<body>
  <wc-link></wc-link>
</body>
```
npm package: @netology-group/wc-reaction
Description: ### Define module
Latest version: 0.2.0

## Usage

### Define module

#### ES
```html
<script type="module">
  import { ReactionList } from '@netology-group/wc-reaction/es/index.js';
  window.customElements.define('reaction-list', ReactionList);
</script>
```

#### UMD
```html
<script src="path/to/dist/index.js"></script>
<script>window.customElements.define('reaction-list', window.WCReactions.ReactionList);</script>
```

### In HTML

### Generic usage
```html
<reaction-list></reaction-list>
```

## How to

### Demo
```sh
npm start
```

### Run for development
```sh
npm run build -- --w
```

### Build for production
```sh
NODE_ENV=production npm run build
```
npm package: @netology-group/wc-ui
Description: UI components
Latest version: 0.2.2

## Usage

### Define module

#### ES
```html
  <script type="module">
    import { TabList, TabItem } from './es/index.js';
    window.customElements.define('tab-list', TabList);
    window.customElements.define('tab-item', TabItem);
  </script>
```

#### UMD
```html
<script src="path/to/dist/index.js"></script>
<script>
  window.addEventListener('DOMContentLoaded',  function()  {
    window.customElements.define('tab-list', window.WCUI.TabList);
    window.customElements.define('tab-item', window.WCUI.TabItem);
  })
</script>
```

### In HTML

#### Tabs

##### Tabs with generated bars
```html
  <tab-list selected="Tab 1">
    <tab-item title="Tab 1">Tab 1 content</tab-item>
    <tab-item title="Tab 2">Tab 2 content</tab-item>
  </tab-list>
```

##### Headless tabs
```html
  <tab-list selected="Tab 2" headless>
    <tab-item title="Tab 1">Tab 1 content</tab-item>
    <tab-item title="Tab 2">Tab 2 content</tab-item>
  </tab-list>
```
npm package: @netology-group/webcomponents-ui
Description: ## Tabs
Latest version: 0.1.9
Deprecated: WARNING: moved to @netology-group/wc-ui

# webcomponents-ui components

## Tabs

### Tabs with generated bars
```html
  <tab-list selected="Tab 1">
    <tab-item title="Tab 1">Tab 1 content</tab-item>
    <tab-item title="Tab 2">Tab 2 content</tab-item>
  </tab-list>
```

## Headless tabs
```html
  <tab-list selected="Tab 2" headless>
    <tab-item title="Tab 1">Tab 1 content</tab-item>
    <tab-item title="Tab 2">Tab 2 content</tab-item>
  </tab-list>
```
npm package: @netomi-test/netomi-chat-react-native
Description: A React Native wrapper for the Netomi Mobile Chat SDK, enabling seamless integration of Netomi’s AI Chat Interface into Android and iOS applications
Author: Netomi
Latest version: 0.1.0

# @netomi-test/netomi-chat-react-native

A React Native wrapper for the Netomi Mobile Chat SDK, enabling seamless integration of Netomi’s AI Chat Interface into Android and iOS applications

## Installation

```sh
npm install @netomi-test/netomi-chat-react-native
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---
npm package: @netoum/corex
Description: Accessible and unstyled UI components in Vanilla JavaScript. An implementation of ZagJS for building modern and flexible web interfaces.
Author: Netoum
Latest version: 0.0.4

# @netoum/corex

Accessible and unstyled UI components in Vanilla JavaScript — a flexible and modern implementation of [ZagJS](https://zagjs.com), designed to help you build accessible UI logic independently of styling.

---

## 🚀 Features

- ✅ Built with [ZagJS](https://zagjs.com)
- 🧩 Component logic only — bring your own styles
- 🧠 Accessible by default (WAI-ARIA)
- 🔌 Use in plain HTML
- 🧑‍💻 TypeScript-friendly API

---

## 📚 Documentation

Full documentation and usage guides for each component:

👉 [netoum.com/corex](https://netoum.com/corex)  

---

## 🛠️ Development

### Lint code
pnpm run lint

### Check types
pnpm run check-types

#### Build
pnpm run build

---

## 📜 License

MIT © [Netoum](https://netoum.com)

---

## 🤝 Built by Netoum

Corex is build by [Netoum](https://netoum.com) – a web agency specializing in modern applications with HTML, Vanilla JS, TypeScript, Elixir/Phoenix, and accessibility-first development.

Creating exceptional web experiences for clients worldwide. **Get in touch:** <info@netoum.com>
npm package: @netoum/corex-css
Description: Corex default CSS template providing global design tokens and component-level utility styles for scalable UI development.
Author: Netoum
Latest version: 0.0.4

# @netoum/corex-css

[Corex](https://www.npmjs.com/package/@netoum/corex) default CSS package providing global design tokens and component-level utility styles for scalable UI development.

---

## 📦 About

This package provides precompiled CSS styles for the [Corex](https://netoum.com/corex) UI system. It includes:

- 🎨 Global design tokens (colors, spacing, typography, etc.)
- 🧩 Component-level utility styles
- 🔧 Built from design tokens compatible with Tokens Studio files 
- 🌗 Multiple themes (Neo, Revo, Uno) with light/dark modes
- 🚀 Ready-to-use CSS for scalable design systems and modern UIs
---

## 📦 Installation

```bash
npm install @netoum/corex-css
```

## 💡 Usage

### Import a full theme stylesheet:

```css
@import "@netoum/corex-css/neo.css";   /* or revo.css, uno.css */
/* or */
@import "@netoum/corex-css/neo/light.css";   /* or dark.css*/
/* or */
@import "@netoum/corex-css/revo/light.css";   /* or dark.css*/
/* or */
@import "@netoum/corex-css/uno/light.css";   /* or dark.css*/

```

### Import component-level styles:

```css
@import "@netoum/corex-css/components/button.css";
```

### Import token-based styles directly:

```css
@import "@netoum/corex-css/tokens/global/color.css";
@import "@netoum/corex-css/tokens/neo/light/semantic/color.css";
```

💡 You can explore all available paths in the exports section of package.json.

## 🛠️ Development

### 🔧 Full Build (from design tokens)

Build all themes and modes (light/dark) using token configurations:

```bash
npm run build
```

### ⚡ CSS Build Only (skip design tokens)

Skip token processing and rebuild only the final output CSS:

```bash
npm run build:from:css
```

### 🔍 Lint

```bash
npm run lint
```

## 📜 License

MIT © Netoum

## 🤝 Built by Netoum

Corex is built by Netoum — a web agency specializing in modern applications using HTML, Vanilla JS, TypeScript, Elixir/Phoenix, and accessibility-first development.

Creating exceptional web experiences for clients worldwide.

**Get in touch:** info@netoum.com
npm package: @netoum/corex-tailwind
Description: Corex default tailwind template providing global design tokens and component-level utility styles for scalable UI development.
Author: Netoum
Latest version: 0.0.4

# @netoum/corex-tailwind

[Corex](https://www.npmjs.com/package/@netoum/corex) default Tailwind package providing global design tokens and component-level utility styles for scalable UI development.

---

## 📦 About

This package provides precompiled CSS styles for the [Corex](https://netoum.com/corex) UI system. It includes:

- 🎨 Global design tokens (colors, spacing, typography, etc.)
- 🧩 Component-level utility styles
- 🔧 Built from design tokens compatible with Tokens Studio files 
- 🌗 Multiple themes (Neo, Revo, Uno) with light/dark modes
- 🚀 Ready-to-use CSS for scalable design systems and modern UIs
---

## 📦 Installation

```bash
npm install @netoum/corex-tailwind
```

## 💡 Usage

### Import a full theme stylesheet:

```css
@import "@netoum/corex-tailwind/neo.css";   /* or revo.css, uno.css */
/* or */
@import "@netoum/corex-tailwind/neo/light.css";   /* or dark.css*/
/* or */
@import "@netoum/corex-tailwind/revo/light.css";   /* or dark.css*/
/* or */
@import "@netoum/corex-tailwind/uno/light.css";   /* or dark.css*/

```

### Import component-level styles:

```css
@import "@netoum/corex-tailwind/components/button.css";
```

### Import token-based styles directly:

```css
@import "@netoum/corex-tailwind/tokens/global/color.css";
@import "@netoum/corex-tailwind/tokens/neo/light/semantic/color.css";
```

💡 You can explore all available paths in the exports section of package.json.

## 🛠️ Development

### 🔧 Full Build (from design tokens)

Build all themes and modes (light/dark) using token configurations:

```bash
npm run build
```

### ⚡ CSS Build Only (skip design tokens)

Skip token processing and rebuild only the final output CSS:

```bash
npm run build:from:css
```

### 🔍 Lint

```bash
npm run lint
```

## 📜 License

MIT © Netoum

## 🤝 Built by Netoum

Corex is built by Netoum — a web agency specializing in modern applications using HTML, Vanilla JS, TypeScript, Elixir/Phoenix, and accessibility-first development.

Creating exceptional web experiences for clients worldwide.

**Get in touch:** info@netoum.com
npm package: @netoum/modex-css
Description: Corex Modex CSS template providing global design tokens and component-level utility styles for scalable UI development.
Author: Netoum
Latest version: 0.0.4

# @netoum/modex-css

[Corex](https://www.npmjs.com/package/@netoum/corex) Modex CSS package providing global design tokens and component-level utility styles for scalable UI development.

---

## 📦 About

This package provides precompiled CSS styles for the [Corex](https://netoum.com/corex) UI system. It includes:

- 🎨 Global design tokens (colors, spacing, typography, etc.)
- 🧩 Component-level utility styles
- 🔧 Built from design tokens compatible with Tokens Studio files 
- 🌗 Multiple themes (Neo, Revo, Uno) with light/dark modes
- 🚀 Ready-to-use CSS for scalable design systems and modern UIs
---

## 📦 Installation

```bash
npm install @netoum/corex-css
```

## 💡 Usage

### Import a full theme stylesheet:

```css
@import "@netoum/corex-css/neo.css";   /* or revo.css, uno.css */

```

### Import component-level styles:

```css
@import "@netoum/corex-css/components/button.css";
```

### Import token-based styles directly:

```css
@import "@netoum/corex-css/tokens/global/color.css";
@import "@netoum/corex-css/tokens/neo/semantic/color.css";
```

💡 You can explore all available paths in the exports section of package.json.

## 🛠️ Development

### 🔧 Full Build (from design tokens)

Build all themes and modes (light/dark) using token configurations:

```bash
npm run build
```

### ⚡ CSS Build Only (skip design tokens)

Skip token processing and rebuild only the final output CSS:

```bash
npm run build:from:css
```

### 🔍 Lint

```bash
npm run lint
```

## 📜 License

MIT © Netoum

## 🤝 Built by Netoum

Corex is built by Netoum — a web agency specializing in modern applications using HTML, Vanilla JS, TypeScript, Elixir/Phoenix, and accessibility-first development.

Creating exceptional web experiences for clients worldwide.

**Get in touch:** info@netoum.com
npm package: @netoum/modex-tailwind
Description: The Modex template for Tailwind. Provides global design tokens and Corex component styles.
Author: Netoum
Latest version: 0.0.4

# @netoum/modex-tailwind

[Corex](https://www.npmjs.com/package/@netoum/corex) Modex Tailwind package providing global design tokens and component-level utility styles for scalable UI development.

---

## 📦 About

This package provides precompiled Tailwind styles for the [Corex](https://netoum.com/corex) UI system. It includes:

- 🎨 Global design tokens (colors, spacing, typography, etc.)
- 🧩 Component-level utility styles
- 🔧 Built from design tokens compatible with Tokens Studio files 
- 🌗 Multiple themes (Neo, Revo, Uno) with light/dark modes
- 🚀 Ready-to-use CSS for scalable design systems and modern UIs
---

## 📦 Installation

```bash
npm install @netoum/corex-tailwind
```

## 💡 Usage

### Import a full theme stylesheet:

```css
@import "@netoum/corex-tailwind/neo.css";   /* or revo.css, uno.css */

```

### Import component-level styles:

```css
@import "@netoum/corex-tailwind/components/button.css";
```

### Import token-based styles directly:

```css
@import "@netoum/corex-tailwind/tokens/global/color.css";
@import "@netoum/corex-tailwind/tokens/neo/semantic/color.css";
```

💡 You can explore all available paths in the exports section of package.json.

## 🛠️ Development

### 🔧 Full Build (from design tokens)

Build all themes and modes (light/dark) using token configurations:

```bash
npm run build
```

### ⚡ CSS Build Only (skip design tokens)

Skip token processing and rebuild only the final output CSS:

```bash
npm run build:from:css
```

### 🔍 Lint

```bash
npm run lint
```

## 📜 License

MIT © Netoum

## 🤝 Built by Netoum

Corex is built by Netoum — a web agency specializing in modern applications using HTML, Vanilla JS, TypeScript, Elixir/Phoenix, and accessibility-first development.

Creating exceptional web experiences for clients worldwide.

**Get in touch:** info@netoum.com
npm package: @netoum/signature-pad
Description: Framer compatible @zag-js/signature-pad
Author: Karim Semmoud
Latest version: 0.0.2

# @zag-js/signature-pad

Core logic for the signature-pad widget implemented as a state machine

## Installation

```sh
yarn add @zag-js/signature-pad
# or
npm i @zag-js/signature-pad
```

## Contribution

Yes please! See the [contributing guidelines](https://github.com/chakra-ui/zag/blob/main/CONTRIBUTING.md) for details.

## Licence

This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/zag/blob/main/LICENSE).
npm package: @netoum/themex-css
Description: The Corex Themex template for CSS. Provides global design tokens and Corex component styles.
Author: Netoum
Latest version: 0.0.4

# @netoum/themex-css

[Corex](https://www.npmjs.com/package/@netoum/corex) Themex CSS template package providing global design tokens and component-level utility styles for scalable UI development.

---

## 📦 About

This package provides precompiled CSS styles for the [Corex](https://netoum.com/corex) UI system. It includes:

- 🎨 Global design tokens (colors, spacing, typography, etc.)
- 🧩 Component-level utility styles
- 🔧 Built from design tokens compatible with Tokens Studio files 
- 🌗 Multiple themes (Neo, Revo, Uno) with light/dark modes
- 🚀 Ready-to-use CSS for scalable design systems and modern UIs
---

## 📦 Installation

```bash
npm install @netoum/themex-css
```

## 💡 Usage

### Import a full theme stylesheet:

```css
@import "@netoum/themex-css";
```

### Import component-level styles:

```css
@import "@netoum/themex-css/components/button.css";
```

### Import token-based styles directly:

```css
@import "@netoum/themex-css/tokens/global/color.css";
@import "@netoum/themex-css/tokens/semantic/color.css";
```

### Theme and Mode data attributes
You must then add of the theme and mode data attribute

- data-theme="neo" data-mode="light"
- data-theme="neo" data-mode="dark"
- data-theme="revo" data-mode="light"
- data-theme="revo" data-mode="dark"
- data-theme="uno" data-mode="light"
- data-theme="uno" data-mode="dark"


💡 You can explore all available paths in the exports section of package.json.

## 🛠️ Development

### 🔧 Full Build (from design tokens)

Build all themes and modes (light/dark) using token configurations:

```bash
npm run build
```

### ⚡ CSS Build Only (skip design tokens)

Skip token processing and rebuild only the final output CSS:

```bash
npm run build:from:css
```

## 📜 License

MIT © Netoum

## 🤝 Built by Netoum

Corex is built by Netoum — a web agency specializing in modern applications using HTML, Vanilla JS, TypeScript, Elixir/Phoenix, and accessibility-first development.

Creating exceptional web experiences for clients worldwide.

**Get in touch:** info@netoum.com
npm package: @netoum/themex-tailwind
Description: The Corex Themex template for Tailwind. Provides global design tokens and Corex component styles.
Author: Netoum
Latest version: 0.0.4

# @netoum/themex-tailwind

[Corex](https://www.npmjs.com/package/@netoum/corex) Themex Tailwind template package providing global design tokens and component-level utility styles for scalable UI development.

---

## 📦 About

This package provides precompiled tailwind styles for the [Corex](https://netoum.com/corex) UI system. It includes:

- 🎨 Global design tokens (colors, spacing, typography, etc.)
- 🧩 Component-level utility styles
- 🔧 Built from design tokens compatible with Tokens Studio files 
- 🌗 Multiple themes (Neo, Revo, Uno) with light/dark modes
- 🚀 Ready-to-use tailwind for scalable design systems and modern UIs
---

## 📦 Installation

```bash
npm install @netoum/themex-tailwind
```

## 💡 Usage

### Import a full theme stylesheet:

```css
@import "@netoum/themex-tailwind";
```

### Import component-level styles:

```css
@import "@netoum/themex-tailwind/components/button.css";
```

### Import token-based styles directly:

```css
@import "@netoum/themex-tailwind/tokens/global/color.css";
@import "@netoum/themex-tailwind/tokens/semantic/color.css";
```

### Theme and Mode data attributes
You must then add of the theme and mode data attribute

- data-theme="neo" data-mode="light"
- data-theme="neo" data-mode="dark"
- data-theme="revo" data-mode="light"
- data-theme="revo" data-mode="dark"
- data-theme="uno" data-mode="light"
- data-theme="uno" data-mode="dark"


💡 You can explore all available paths in the exports section of package.json.

## 🛠️ Development

### 🔧 Full Build (from design tokens)

Build all themes and modes (light/dark) using token configurations:

```bash
npm run build
```

### ⚡ CSS Build Only (skip design tokens)

Skip token processing and rebuild only the final output tailwind:

```bash
npm run build:from:css
```

## 📜 License

MIT © Netoum

## 🤝 Built by Netoum

Corex is built by Netoum — a web agency specializing in modern applications using HTML, Vanilla JS, TypeScript, Elixir/Phoenix, and accessibility-first development.

Creating exceptional web experiences for clients worldwide.

**Get in touch:** info@netoum.com