open-index/open-npm huggingface dataset:
npm package: @k3vndev/tw-animations
Description: A lightweight set of customizable Tailwind CSS animations ready to drop into any project. Built for Tailwind v4+
Author: k3vndev
Latest version: 0.3.0

# 🌀 @k3vndev/tw-animations

A lightweight, fully customizable set of **Tailwind CSS animations** ready to drop into any project.
Built for **Tailwind v4+** and inspired by [Tailwind CSS Animated](https://www.tailwindcss-animated.com) & [easings.net](https://easings.net/).

---

### 🚀 Installation

```bash
npm install @k3vndev/tw-animations
```

---

### 🧩 Usage

Import it **after Tailwind** in your main CSS:

```css
@import "tailwindcss";
@import "@k3vndev/tw-animations";
```

Then apply the classes to your elements:

```html
<h1 class="animate-slide-in-b anim-blur-md">
  Hello there 👋
</h1>
```

---

### ⚡ Features

* **Atomic animation classes**: combine slide, fade, scale, blur, rotation, duration, easing, delay, and iteration however you want.

* Base animations include: `slide-in-*`, `slide-out-*`, `fade-in`, `fade-out`. From there, layer on custom properties.

* Avoids bloated “composite” names — just layer atomic classes for custom effects.

---

### ✨ Example

```html
<div class="animate-fade-in anim-opacity-10 anim-blur-2xl anim-scale-0 -anim-rotate-360 anim-ease-out-back anim-duration-1500">
  Cinematic entry 😎
</div>
```

Combine anything you want — the animation library adapts automatically.
npm package: @k4a_l/dirtreeist
Description: Create a directory Structure Diagram from a markdown lists.
Author: kasahala
Latest version: 0.3.3

# DirTreeist

Create a directory Structure Diagram from a markdown lists.

## Installation

#### yarn

```shell
yarn add @k4a_l/dirtreeist
```

### npm

```shell
npm install @k4a_l/dirtreeist
```

## Demo

https://www.k4a.me/tools/dirtreeist

## Example

### Basic

#### Input

```markdown
- /components
  　- App.tsx
  　- App.css
- config.json
- /utils
  　- converter.ts
  　- parser.ts
```

#### Output

```text
├─/components
│　├─App.tsx
│　└─App.css
├─config.json
└─/utils
　　└─converter.ts
　　└─parser.ts
```

### Only one top

#### Input

```markdown
- /root
  - /components
    　- App.tsx
    　- App.css
  - config.json
  - /utils
    　- converter.ts
    　- parser.ts
```

#### Output

```text
/root
├─/components
│　├─App.tsx
│　└─App.css
├─config.json
└─/utils
　　├─converter.ts
　　└─parser.ts
```

### Sequential listings

Consecutive lists are connected.

#### Input

```

- a
  - b
  - c
- d

- 1
  - 2
    - 3
      - 4

```

#### Output

```

├─ a
│ 　 ├─ b
│ 　 └─ c
├─ d
└─ 1
　　 └─ 2
　　　　 └─ 3
　　　　　　 └─ 4

```

### Another element comes in between

If another element is sandwiched in between, a "only" split lists is output.

#### Input

```dirtree
- a
  - b
  - c
- d

sometext

- 1
  - 2
    - 3
      - 4
```

#### Output

```
├─ a
│　├─ b
│　└─ c
└─ d
```

```
└─ 1
　　└─ 2
　　　　└─ 3
　　　　　　└─ 4
```

## How to use

### TypeScript

```ts
const markdown = `
- /components
　　- App.tsx
　　- App.css
- config.json
- /utils
　　- converter.ts
　　- parser.ts
`
```

```tsx
import dirtreeist, { Options } from '@k4a_l/dirtreeist'

const options: Options = {}
const outputs = dirtreeist(markdown, options) // DirTree[] => output[]

console.log(outputs)
```

or

```tsx
import { parse, convert, Options } from '@k4a_l/dirtreeist'

const dirTrees = parse(markdown) // markdown => DirTree[]

const options: Options = {}
const outputs = dirTrees.map((dirTree) => convert(dirTree, options)) // DirTree[] => output[]

console.log(outputs)
```

### Type

#### Structure

```ts
type DirNode = {
  name: string
  children: DirNode[]
}

type DirTree = DirNode[]
```

#### Options

```ts
type Options = {
  treeType?: 'normal' | 'bold' | 'ascii'
  emptyBeforeUpperHierarche?: boolean
  spaceBeforeName?: boolean
  spaceSize?: number
}
```

### Description of options

#### treeType

default:`normal`

##### normal

```
│
├─
│
└─
```

##### bold

```
┃
┣━
┃
┗━
```

##### ascii

```
|
+
|
+-
```

#### emptyLineBeforeUpperHierarchy : boolean

default:`false`

##### true

```text
(true)
├─/components
│　├─App.tsx
│　└─App.css
│
├─config.json
└─/utils
　　└─converter.ts
　　└─parser.ts
```

#### spaceBeforeName : boolean

default: `false`

##### true

```text
├─ /components
│　├─ App.tsx
│　└─ App.css
├─ config.json
└─ /utils
　　└─ converter.ts
　　└─ parser.ts
```

#### spaceSize : number

default:`2`

##### 4

```text
├──/components
│　　├──App.tsx
│　　└──App.css
├──config.json
└──/utils
　　　└──converter.ts
　　　└──parser.ts
```
npm package: @k4k3ru/i18n-json
Description: Utility for i18n for JSON
Author: k4k3ru
Latest version: 1.0.1

# i18n for JSON


## Installation

```console
npm i @k4k3ru/i18n-json
```


## Usage

1. Create localized JSON files

en.json:
```json
{
	"dictionary": {
		"login": "Login"
	}
}
```

ja.json:
```json
{
    "dictionary": {
        "login": "ログイン"
    }
}
```

2. Import the package.

```javascript
import { I18nJson } from 'YOUR_PROJECT_PATH/node_modules/@k4k3ru/i18n-json/dist/script.js';
```

3. Initialize the class.

```javascript
const locales = [{
    langCode: 'en',
    url: '/i18n/en.json'
},{
    langCode: 'ja',
    url: '/i18n/ja.json'
}]

await I18nJson.Load(ConfigI18n.Map);
```

4. Get the localized value.

```javascript
const loginTxt = I18nJson.String('ja', 'dictionary.login');
// loginTxt = 'ログイン';
```


## Support me
I am a Japanese developer, and your support is a great encouragement for my work!
In addition to support, feel free to reach out with comments, feature requests, or development inquiries!

Thank you for your support😊

[![Support on Ko-fi](https://img.shields.io/badge/Ko--fi-Support%20Me-blue?style=flat-square&logo=ko-fi)](https://ko-fi.com/k4k3ru)


## License
This repository is open-source and distributed under the MIT License.
npm package: @k4k3ru/toaster
Description: Utility for toaster notification
Author: k4k3ru
Latest version: 1.0.3

# Toaster

## Installation

```console
npm i @k4k3ru/toaster
```

## Usage

1. Import the package.

```javascript
import { Toaster } from 'YOUR_PROJECT_PATH/node_modules/@k4k3ru/toaster/dist/script.js';
```

2. Toast a notification.

Toast for information.
```
Toaster.Info('INFO');
```

Toast for success.
```
Toaster.Success('SUCCESS');
```

Toast for warning.
```
Toaster.Warning('WARNING');
```

Toast for error.
```
Toaster.Error('ERROR');
```