open-index/open-npm huggingface dataset:
npm package: @salamander.be/blog
Description: A VueJS blog component
Author: Asef
Latest version: 0.1.1
Deprecated: This package has been deprecated.

# blog-salamander
Blog component made with VueJS

## Installation
npm

```bash
npm i @salamander.be/blog
```

## Getting started

```python
import Vue from 'vue';
import Blog from '@salamander.be/blog'
 
Vue.use(Blog);
```

## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.

## License
[MIT](https://choosealicense.com/licenses/mit/)
npm package: @salamander.be/vue-blog
Description: A VueJS blog component
Author: Asef
Latest version: 0.1.1

# blog-salamander
Blog component made with VueJS

## Installation
npm

```bash
npm i @salamander.be/blog
```

## Getting started

```python
import Vue from 'vue';
import blog-list from '@salamander.be/blog'
 
Vue.use(blog);
```

## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.

## License
[MIT](https://choosealicense.com/licenses/mit/)
npm package: @salamander.be/vue-image-previewer
Description: A VueJs previewer for images that are not included in the component.
Author: Frederiek
Latest version: 0.0.4

# Vue Image previewer

### Features & characteristics:

-   Showcase images that are not inside a vue component

### Example

## Install & basic usage
The component will create a gallery of a given image set.
When clicked on an image outside the component, the gallery will open at the given image.

```bash
npm install @salamander.be/vue-image-previewer
```

```vue
<template>
    <div id="app">
        <image-previewer :images="images" targetClass="viewable-img"></image-previewer>

        <!-- Content that is not inside the image-previewer component -->
        <div>
            <img style="width: 300px; height: 300px; object-fit: cover; margin: 15px;" v-for="(image, key) in images" :key="key" :src="image" class="viewable-img">
        </div>

    </div>
</template>

<script>
import ImagePreviewer from '@salamander.be/vue-image-previewer'
import '@salamander.be/vue-image-previewer/dist/vue-image-previewer.css'

export default {
	name: 'app',
	components: {
	  ImagePreviewer
	},
	data() {
	  return {
	    // Example: A list of random images
	    images: [
              'https://picsum.photos/500/600', 
              'https://picsum.photos/700/500', 
              'https://picsum.photos/800/600', 
              'https://picsum.photos/800/700'
	          'https://picsum.photos/900/500', 
              'https://picsum.photos/800/900', 
              'https://picsum.photos/700/900',
              'https://picsum.photos/500/900',
            ]
	  }
	}
}
</script>
```

## Configuration

### Props

```js
images: ['/image-1.png', '/image-2.png'] // the items shown on the board
tergetClass: 'viewable-img' // The placeholder of the create option
```
```
npm package: @salamander.be/vue-table
Description: A VueJs table component.
Author: Frederiek
Latest version: 0.0.17

# Vue table
A simple styled table for Vue

### Features & characteristics:

-  Customizable columns
-  Customizable theme
-  Sortable tables

### Demo

https://salamanderbe.github.io/vue-table


## Install & basic usage

```bash
npm install @salamander.be/vue-table
```

```vue
<template>
  <div id="app" style="padding: 100px;">
    <el-table :rows="rows" :structure="structure"></el-table>
  </div>
</template>

<script>
import ElTable from @salamander.be/vue-table
import '@salamander.be/vue-table/dist/vue-table.css'

export default {
name: 'app',

components: { ElTable },

data: () => ({
  rows: [
    { first_name: 'Alexander', last_name: 'Salamander', email: 'alexander@salamander.be', active: true, labels: ['label 1'], registered: '2019-01-08' },
    { first_name: 'Mr.', last_name: 'Salamander', email: 'mr@salamander.be', active: false, labels: ['label 1', 'label 2', 'label 3'], registered: '2019-01-08' },
    { first_name: 'Mr.', last_name: 'Baldwin', email: 'baldwin@salamander.be', active: false, labels: ['label 1', 'label 2'], registered: '2019-01-08' },
  ],
  structure: [
    { visible: true, label: null, type: 'select', sortable: false },
    { visible: true, label: 'User', type: 'user', sortable: true },
    { visible: true, label: 'Email', type: 'text', key: 'email', sortable: true },
    { visible: true, label: 'Active.', type: 'boolean', key: 'active', sortable: true, size: 'xsmall' },
    { visible: true, label: 'Labels.', type: 'labels', key: 'labels', sortable: true, size: 'normal' },
    { visible: true, label: 'Registered', type: 'date', key: 'registered', sortable: true, size: 'small' },
  ]
})
}
</script>
```

## Configuration

### Props

```js

```
npm package: @salamander.be/vue-tour
Description: A VueJs tour component.
Author: Frederiek
Latest version: 0.1.26

# Vue tour

### Features & characteristics:

-  Customizable steps
-  Customizable styles
-  Customizable text

### Example

![Vue-tour-example](https://github.com/salamanderbe/vue-tour/blob/master/public/Tour-example.gif)

### Demo

https://salamanderbe.github.io/vue-tour

## Install & basic usage

```bash
npm install @salamander.be/vue-tour
```

```vue
<template>
  <div id="app">
    <tour :steps="steps" :text="text" :theme="theme"></tour>
  </div>
</template>

<script>
import Tour from '@salamander.be/vue-tour'
import '@salamander.be/vue-tour/dist/vue-tour.css'

export default {
  name: 'app',
  components: { Tour },
  data: () => ({
    steps: [
      {
        preview: '/example-1.png',
        title: 'Step 1',
        description: 'I am an example step, click in the top right corner to enlarge me. Click next if you no longer want to see me. '
        next_cta: 'Next custom',
        prev_cta: 'Previous custom',
      },
      {
        preview: '/example-1.png',
        title: 'Step 2',
        description: 'Congratz, I am the second step in this 2 step tuturial. If you reached me that means you have reached the end.'
      }
    ],
    text: {
      next_cta: 'Next',
      prev_cta: 'Previous',
      restart_cta: 'Restart'
    },
    theme: {
      color: '#009de0',
      radius: '2px'
    },
    blurEl: '.can-tour-blur',
    debug: true
  })
}
</script>
```

## Configuration

### Props

```js
steps: [
  {
    preview: '/example-1.png', // The preview image shown for each step
    title: 'Step 1', // The title of the step
    description: 'Description for step 1' // The description of the step
    next_cta: 'Next custom', // Override the default next text
    prev_cta: 'Previous custom', // Override the default prev text
  }
]
theme: { color: '#color', radius: 'px' } // the theme use while rendering the component
text: { next_cta: '', prev_cta: '', restart_cta: '' } // The fixed texts used in the component
storage: 'custom-storage-key' // Set a custom localstorage key
```
npm package: @salamanders/material-ui
Description: @salamanders/material-ui/lib React component
Latest version: 3.33.35

# @salamanders/material-ui/lib

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]

Describe @salamanders/material-ui/lib here.

[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo

[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package

[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo
npm package: @salamanders/shell
Description: React template with Material UI, Firebase, routing...
Latest version: 3.33.38

# my-component

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]

Describe my-component here.

[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo

[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package

[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo
npm package: @salamandery/eslint-config
Description: ESLint configuration used by Rodolfo M F Abreu.
Author: salamandery
Latest version: 1.0.0

# Salamandery ESLint config

## Whats included?

- Standard config base;
- React plugin;
- React Hooks plugin;
- JSX a11y plugin;
- Prettier;

## Setup

### React (with Next.js)

Install dependencies:
```
npm i -D eslint @salamandery/eslint-config
```
Inside `.eslintrc.json`
```
{
  "extends": [
    "@salamandery/eslint-config/next", 
    "next/core-web-vitals"
  ]
}
```

### React (without Next.js)

Install dependencies:
```
npm i -D eslint @salamandery/eslint-config
```
Inside `.eslintrc.json`
```
{
  "extends": "@salamandery/eslint-config/react"
}
```

### Node.js

Install dependencies:
```
npm i -D eslint @salamandery/eslint-config
```
Inside `.eslintrc.json`
```
{
  "extends": "@salamandery/eslint-config/node"
}
```
npm package: @salamtam/ncrypt-js
Description: simple encryption in NodeJS
Author: Salamtam
Latest version: 0.0.2

# ncrypt-js

Simple encryption in NodeJS.

## Install

Install with [npm](https://www.npmjs.com/):

```sh
$ npm install --save @salamtam/ncrypt-js
```

## Usage

```js
const ncrypt = require('ncrypt-js');

const key = 'unlocking secrets let find power';
const raw = 'this is plain text';
const encryptedText = ncrypt.EncryptAES(raw, Buffer.from(key));
const decryptedText = ncrypt.DecryptAES(encryptedText, Buffer.from(key));

console.log('raw:', raw);
console.log('encrypted:', encryptedText);
console.log('decrypted:', decryptedText);
```
npm package: @salamtam/risk-score-calculator
Description: Risk Score Calculator Component
Author: Salamtam
Latest version: 1.0.1

# risk-score-calculator

Simple risk score calculation tool.

## Install

Install with [npm](https://www.npmjs.com/):

```bash
npm install @salamtam/risk-score-calculator
```

## Usage

```tsx
import { Calculator } from '@salamtam/risk-score-calculator';

<Calculator />
```
npm package: @salarizadi/capacitor-cafebazaar-poolakey
Description: A Capacitor plugin for implementing Cafebazaar in-app billing using the Poolakey library.
Author: Salar Izadi
Latest version: 1.1.0

# @salarizadi/capacitor-cafebazaar-poolakey

[![npm version](https://badge.fury.io/js/%40salarizadi%2Fcapacitor-cafebazaar-poolakey.svg)](https://www.npmjs.com/package/@salarizadi/capacitor-cafebazaar-poolakey)
![Downloads](https://img.shields.io/npm/dt/@salarizadi/capacitor-cafebazaar-poolakey)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

A Capacitor plugin for implementing Cafebazaar (Iranian Android App Store) in-app billing using the Poolakey library.

## Features

- 🔒 Secure payment integration with Cafebazaar
- 💰 Support for in-app purchases and consumables
- 🔄 Purchase verification and consumption
- 📦 Easy integration with Capacitor projects
- ⚡ Built on Poolakey library
- 🛡️ RSA signature verification support

## Installation

```bash
npm install @salarizadi/capacitor-cafebazaar-poolakey
npx cap sync
```

## Basic Usage

```typescript
import { CafebazaarPoolakey } from '@salarizadi/capacitor-cafebazaar-poolakey';

// OR
// const { CafebazaarPoolakey } = window.Capacitor.Plugins;

// Initialize connection
await CafebazaarPoolakey.initialize({
    rsaPublicKey: 'YOUR_RSA_PUBLIC_KEY'
});

// Listen to purchase state changes
CafebazaarPoolakey.addListener('purchaseStateChanged', (state) => {
    console.log('Purchase state:', state);
    // state.state can be: 'PURCHASE_BEGAN', 'PURCHASED', 'CANCELLED', 'FAILED'
});

// Get products
const products = await CafebazaarPoolakey.getProducts({
    skus: ['product_id_1', 'product_id_2']
});

// Make a purchase
const result = await CafebazaarPoolakey.purchaseProduct({
    productId: 'product_id_1',
    payload: 'developer_payload' // optional
});

// Consume the purchase
if (result.state === 'PURCHASED') {
    await CafebazaarPoolakey.consumeProduct({
        token: result.purchase.purchaseToken
    });
}
```

## API Overview

- `initialize()` - Connect to Cafebazaar service
- `getProducts()` - Get product details by SKUs
- `purchaseProduct()` - Start purchase flow
- `consumeProduct()` - Consume purchased item
- `getPurchaseInfo()` - Get purchase history
- `getConnectionState()` - Check connection status
- `disconnect()` - Disconnect from service

## Documentation

For detailed documentation, examples, and best practices, please visit our [Wiki](https://github.com/salarizadi/capacitor-cafebazaar-poolakey/wiki).

## Platform Support

- ✅ Android
- ❌ iOS
- ❌ Web

## License

MIT License © 2025 [Salar Izadi](https://github.com/salarizadi)

## Acknowledgments

This plugin is built using Cafebazaar's [Poolakey](https://github.com/cafebazaar/Poolakey) library.
npm package: @salas-ds/angular
Description: Salas Design System - Angular components
Latest version: 0.1.0

# @salas-ds/angular

Componentes Angular do Salas Design System.

## Instalação

```bash
npm install @salas-ds/angular @salas-ds/core lucide-angular
# ou
pnpm add @salas-ds/angular @salas-ds/core lucide-angular
```

## Uso

### Standalone Components

```typescript
import { SalasButtonComponent } from '@salas-ds/angular';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [SalasButtonComponent],
  template: `
    <salas-button variant="default" size="md">
      Click me
    </salas-button>
  `,
})
export class ExampleComponent {}
```

### Modules

```typescript
import { SalasButtonModule } from '@salas-ds/angular';

@NgModule({
  imports: [SalasButtonModule],
})
export class AppModule {}
```

## Componentes Disponíveis

- `SalasButtonComponent` - Botões com múltiplas variantes
- `SalasInputComponent` - Inputs de texto
- `SalasSelectComponent` - Select dropdown
- `SalasAutocompleteComponent` - Autocomplete com busca
- `SalasDatepickerComponent` - Seletor de datas

## CSS Variables

Certifique-se de incluir as CSS variables do design system:

```css
@import '@salas-ds/core/tokens';
```

Ou copie o arquivo `styles.css` gerado pelo CLI.
npm package: @salas-ds/cli
Description: CLI para adicionar componentes do Salas Design System ao projeto (estilo shadcn)
Latest version: 0.2.15

# @salas-ds/cli

CLI para adicionar componentes do Salas Design System ao seu projeto Angular.

## Instalação

```bash
npx @salas-ds/cli@latest init
```

## Uso

### Inicializar projeto

```bash
npx @salas-ds/cli@latest init
```

Isso criará:
- Diretório de componentes (`src/app/ui` por padrão)
- Arquivo `styles.css` com CSS variables

### Adicionar componentes

```bash
npx @salas-ds/cli@latest add button
npx @salas-ds/cli@latest add input
npx @salas-ds/cli@latest add select
npx @salas-ds/cli@latest add autocomplete
npx @salas-ds/cli@latest add datepicker
```

### Opções

```bash
# Especificar caminho customizado
npx @salas-ds/cli@latest init --path src/components/ui
npx @salas-ds/cli@latest add button --path src/components/ui
```

## Componentes Disponíveis

- `button` - Botões
- `input` - Inputs de texto
- `select` - Select dropdown
- `autocomplete` - Autocomplete
- `datepicker` - Datepicker

## Próximos Passos

Após adicionar um componente:

1. Importe o módulo no seu componente ou módulo Angular
2. Use o componente no template
3. Customize conforme necessário (o código é seu!)
npm package: @salas-ds/core
Description: Core agnóstico do Salas Design System - tokens, tipos e lógica headless
Latest version: 0.1.0

# @salas-ds/core

Core agnóstico do Salas Design System - tokens, tipos e utilitários.

## Instalação

```bash
npm install @salas-ds/core
# ou
pnpm add @salas-ds/core
# ou
yarn add @salas-ds/core
```

## Uso

```typescript
import { colors, spacing, ButtonProps } from '@salas-ds/core';

// Tokens
const primaryColor = colors.primary[500];
const padding = spacing[4];

// Tipos
const buttonProps: ButtonProps = {
  variant: 'default',
  size: 'md',
};
```

## White Label

Todos os tokens de cores podem ser customizados via CSS variables:

```css
:root {
  --salas-primary-500: #your-color;
  --salas-primary-600: #your-darker-color;
}
```
npm package: @salaxer/random-messages
Description: I don't know what to write for the first commit
Author: Hector Salazar
Latest version: 1.0.1

# random-messages

Whenever I start a new project, I don't know what to write for the first commit. After doing a “git init” there is technically nothing there...

## Install

```npm
npm install -g @salaxer/random-msg
```

# Usage

```bash
random-msg
```

# Contributing
If someone wants to add or improve something, I invite you to collaborate directly in this repository: [random-msg](https://github.com/platzi/npm-random-msg)

# License
random-msg is released under the [MIT License](https://opensource.org/licenses/MIT).
# random-msg