open-index/open-npm huggingface dataset:
npm package: @kamrade/svelte-dynamic-button
Description: A simple button template that supports a flexible set of themes, variants, sizes and shapes. You can find usage examples (MagicButton and SimpleButton components) in the repository.
Latest version: 0.0.17

# Basic extensible button component.

A simple button template that supports a flexible set of themes, variants, sizes and shapes.
You can find usage examples (MagicButton and SimpleButton components) in the repository.

```bash
npm i -S @kamrade/svelte-dynamic-button
```

### ToDo List

- [x] --hoverBorderColor
- [x] --activeBorderColor
- [x] --hoverColor (text)
- [x] --activeColor (text)
- [x] --disabledColor
- [x] --disabledBackgroundColor
- [x] --disabledBorderColor
- [x] Better preloader
- [x] Custom preloader

- [ ] Better way to provide Custom Preloader
- [ ] Check both way to provide props

- [ ] InlineFlex button content
- [ ] LineHeight for prefix and suffix icons
npm package: @kamran.zigron/hsl-to-hex
Description: Convert HSL colors to RGB colors in hex format
Author: Zigron
Latest version: 1.0.1

# hsl-to-hex

Convert HSL colors to RGB colors in hex format.

## Install 

```sh
npm install --save @kamran.zigron/hsl-to-hex
```
 
## API

```
require('hsl-to-hex') => Function
hsl(hue, saturation, luminosity)` => String
```

## Example

```js
var hsl = require('hsl-to-hex')
var hue = 133
var saturation = 40
var luminosity = 60
var hex = hsl(hue, saturation, luminosity)
console.log(hex) // #70c282
```

## License

ISC
npm package: @kamranahmedse/claude-statusline
Description: A status line for Claude Code CLI showing model, context usage, rate limits, and more
Author: Kamran Ahmed
Latest version: 1.0.6

# claude-statusline

Configure your Claude Code statusline to show limits, directory and git info

![demo](./.github/demo.png)

## Install

Run the command below to set it up

```bash
npx @kamranahmedse/claude-statusline
```

It backups your old status line if any and copies the status line script to `~/.claude/statusline.sh` and configures your Claude Code settings.

## Requirements

- [jq](https://jqlang.github.io/jq/) — for parsing JSON
- curl — for fetching rate limit data
- git — for branch info

On macOS:

```bash
brew install jq
```

## Uninstall

```bash
npx @kamranahmedse/claude-statusline --uninstall
```

If you had a previous statusline, it restores it from the backup. Otherwise it removes the script and cleans up your settings.

## License

MIT
npm package: @kamrankhatti/vue3-virtual-scroll-list
Description: A vue3 lazy virtual scroll component ideal for large amount of data
Author: kamrankhatti
Latest version: 1.0.0

# vue3-virtual-scroll-list

⚡️A vue3 lazy load virtual scroll component ideal for large amount of data cloned from https://github.com/reactjser/vue3-virtual-scroll-list

## Live Demo

https://github.com/tangbc/vue-virtual-scroll-list/?tab=readme-ov-file#live-demo
npm package: @kamrany92/test-org-repo
Description: test npm package for organization based repo
Author: kamrankhankhail
Latest version: 0.0.3

<!-- Bootstrapped with make-react-native-package v0.60.3 -->

# test-org-repo
[![npm version](https://badge.fury.io/js/test-org-repo.svg)](https://badge.fury.io/js/test-org-repo)
[![CircleCI](https://circleci.com/gh/com/test-org-repo.svg?style=svg)](https://circleci.com/gh/com/test-org-repo)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](https://github.com/standard/standard)
[![Dependency Status](https://david-dm.org/kamrankhankhail/test-org-repo.svg)](https://david-dm.org/kamrankhankhail/test-org-repo)
[![devDependencies Status](https://david-dm.org/kamrankhankhail/test-org-repo/dev-status.svg)](https://david-dm.org/kamrankhankhail/test-org-repo?type=dev)
[![typings included](https://img.shields.io/badge/typings-included-brightgreen.svg?t=1495378566925)](package.json)
[![npm](https://img.shields.io/npm/l/express.svg)](https://www.npmjs.com/package/test-org-repo)

test npm package for organization based repo

## Status

- iOS & Android:
  - ???
- react-native:
  - supported versions "<strong>&gt;= 0.60.5</strong>"

## Installation

<table>
<td>
<details style="border: 1px solid; border-radius: 5px; padding: 5px">
  <summary>with react-native "<strong>&gt;=0.60.5</strong>"</summary>

### 0. Setup Swift and Kotlin

- Open your iOS project in Xcode and create empty Swift file and bridging header to enable Swift support
- Modify `android/build.gradle`:

  ```diff
  buildscript {
    ext {
      ...
  +   kotlinVersion = "1.3.50"
    }
  ...

    dependencies {
  +   classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:${kotlinVersion}")
      ...
  ```

### 1. Install latest version from npm

`$ npm i test-org-repo -S`

### 2. Install pods

`$ cd ios && pod install && cd ..`

</details>
</td>
</table>

## Demo

 Android                                       |  iOS
:---------------------------------------------:|:---------------------------------------------:
???  |  ???

## Example

```jsx
import * as React from 'react'
import { View } from 'react-native'
import {
  PassbaseModule,
  PassbaseComponent
} from 'test-org-repo'

```

## Reference

<table>
  <tr>
    <th>prop</th>
    <th>type</th>
    <th>default</th>
    <th>desc</th>
  </tr>
  <tr>
    <td>color</td>
    <td><code>string</code></td>
    <td><code>'red'</code></td>
    <td>-</td>
  </tr>
</table>
npm package: @kamrucci/components
Description: A demo on how to create a React UI component library using React, Typescript, Rollup, Storybook, Jest and React testing library.
Author: Lukasz Kamrowski
Latest version: 0.3.5

# My Demo UI Library

This is a demo UI component library created using React, TypeScript, Rollup, Storybook, Jest, and React Testing Library. It was created for an article update for [LogRocket](https://blog.logrocket.com/author/pelumiakintokun/) on how to create a UI component library in React. You can read the article [here](https://blog.logrocket.com/build-component-library-react-typescript/).

Visit my blog, [Timonwa's Notes](https://blog.timonwa.com), for awesome technical contents like articles, codesnippets, tech goodies, community projects and more.

## Installation

You can install this demo UI library using npm:

```
npm install @timonwa/demo-ui-library
```

## Usage

To use this demo UI library in your project, import the components you need from the library and use them in your React components.

```jsx
import React from "react";
import { Input, Button } from "@timonwa/demo-ui-library";

function App() {
  return (
    <div>
      <Input
        id="name"
        disabled={false}
        label="Enter your name"
        message="This field is required"
        error={false}
        success={false}
        onChange={(e) => console.log(e.target.value)}
        placeholder="Enter your name here"
      />
      <Button
        size="medium"
        primary={true}
        disabled={false}
        text="Click me!"
        onClick={() => alert("Button clicked!")}
      />
    </div>
  );
}

export default App;
```

## Contributing

This library is a demo for learning purposes only and is not intended to be contributed to. You can fork the repository and use the code for your personal use or learning.

### Steps

- Fork the repository.
- Clone the repository to your local machine.
- Install the dependencies using `npm install`.
- View the components in the browser using `npm run storybook`.
- Make your changes.
- Test the changes using `npm test`.
- Build the library using `npm run build`.
- Commit the changes and push them to your forked repository.
- Publish the package on [npm](https://www.npmjs.com/).
- Install and use the package in your project.

## License

This demo UI library is licensed under the [MIT License](https://github.com/Timonwa/demo-ui-library/blob/main/license).

## Connect

More of my articles can be found in [Timonwa's Notes](https://blog.timonwa.com). Connect with me on Twitter: [@timonwa\_](https://twitter.com/timonwa_)
npm package: @kamrucci/components-ui
Description: A demo on how to create a React UI component library using React, Typescript, Rollup, Storybook, Jest and React testing library.
Author: Lukasz Kamrowski
Latest version: 0.1.7

# My Demo UI Library

This is a demo UI component library created using React, TypeScript, Rollup, Storybook, Jest, and React Testing Library. It was created for an article update for [LogRocket](https://blog.logrocket.com/author/pelumiakintokun/) on how to create a UI component library in React. You can read the article [here](https://blog.logrocket.com/build-component-library-react-typescript/).

Visit my blog, [Timonwa's Notes](https://blog.timonwa.com), for awesome technical contents like articles, codesnippets, tech goodies, community projects and more.

## Installation

You can install this demo UI library using npm:

```
npm install @timonwa/demo-ui-library
```

## Usage

To use this demo UI library in your project, import the components you need from the library and use them in your React components.

```jsx
import React from "react";
import { Input, Button } from "@timonwa/demo-ui-library";

function App() {
  return (
    <div>
      <Input
        id="name"
        disabled={false}
        label="Enter your name"
        message="This field is required"
        error={false}
        success={false}
        onChange={(e) => console.log(e.target.value)}
        placeholder="Enter your name here"
      />
      <Button
        size="medium"
        primary={true}
        disabled={false}
        text="Click me!"
        onClick={() => alert("Button clicked!")}
      />
    </div>
  );
}

export default App;
```

## Contributing

This library is a demo for learning purposes only and is not intended to be contributed to. You can fork the repository and use the code for your personal use or learning.

### Steps

- Fork the repository.
- Clone the repository to your local machine.
- Install the dependencies using `npm install`.
- View the components in the browser using `npm run storybook`.
- Make your changes.
- Test the changes using `npm test`.
- Build the library using `npm run build`.
- Commit the changes and push them to your forked repository.
- Publish the package on [npm](https://www.npmjs.com/).
- Install and use the package in your project.

## License

This demo UI library is licensed under the [MIT License](https://github.com/Timonwa/demo-ui-library/blob/main/license).

## Connect

More of my articles can be found in [Timonwa's Notes](https://blog.timonwa.com). Connect with me on Twitter: [@timonwa\_](https://twitter.com/timonwa_)
npm package: @kamrulhassan2015/nextjs-login-widget
Description: A customizable login widget for Next.js 14 applications with app router
Author: Kamrul Hassan
Latest version: 2.0.2

Next.js 14 Login Widget
A customizable login widget for Next.js 14 applications using the app router.
Installation
bashCopynpm install @kamrulhassan2015/nextjs-login-widget
Usage with Next.js 14 App Router
In your app directory, create a new file (e.g., app/login/page.js) and use the components as follows:
jsxCopy'use client';

import { AuthWrapper } from '@kamrulhassan2015/nextjs-login-widget';

export default function LoginPage() {
  return (
    <main>
      <h1>Welcome to My App</h1>
      <AuthWrapper />
    </main>
  )
}
For more control, you can use the LoginComponent and DisplayComponent separately:
jsxCopy'use client';

import { useState } from 'react';
import { LoginComponent, DisplayComponent } from '@kamrulhassan2015/nextjs-login-widget';

export default function LoginPage() {
  const [loggedInUser, setLoggedInUser] = useState(null);

  const handleLogin = (username) => {
    setLoggedInUser(username);
  };

  const handleLogout = () => {
    setLoggedInUser(null);
  };

  return (
    <main>
      <h1>Welcome to My App</h1>
      {loggedInUser ? (
        <DisplayComponent username={loggedInUser} onLogout={handleLogout} />
      ) : (
        <LoginComponent onLogin={handleLogin} />
      )}
    </main>
  );
}
Note: Make sure to add 'use client'; at the top of your file when using these components in a Next.js app directory.
Customization
You can customize the appearance of the components by overriding the Tailwind CSS classes in your own stylesheet.
TypeScript Support
This package includes TypeScript definitions. No additional setup is required to use it with TypeScript projects.
License
MIT