open-index/open-npm huggingface dataset:
npm package: @spiral-toolkit/toolkit
Description: Compilation of SF-JS scripts for forms and inputs
Author: Spiral Scout
Latest version: 1.2.1

Spiral toolkit includes set of virtual tags, frontend library and resource manager.

Elements included
-----------------
* ajax forms
    * input
    * static
    * selectbox
    * switch
    * textarea
    * radios and check boxes
* paginator element
* simple grid element with paginator
    * simple cell
    * numeric cell
    * boolean cell
    * bytes (size) cell
    
Toolkit JS and CSS:
--------
To enable Toolkit widgets in your views and connect appropriate CSS/JS files use following code:

```html
<dark:use bundle="spiral:bundle"/>
<toolkit:styles/>
<toolkit:scripts/>
```

Examples
--------

Grids:

```html
<spiral:grid source="<?= $selector ?>" as="sample" style="margin-top: 20px;">
    <!-- Simple grids only need column title and value-->
    <grid.cell title="ID" value="<?= $sample->id ?>"/>

    <!-- Custom classes, styles and etc are still possible and behave as in regular tags -->
    <grid.cell title="Status" value="<?= $sample->status ?>" style="font-weight: bold;"/>

    <!-- We can use short function e() to escape unsafe values -->
    <grid.cell title="Name" value="<?= e($sample->name) ?>"/>

    <!-- Size of property "content" in bytes, this is prepared cell type (see bool, bytes and number) -->
    <grid.cell.bytes title="Content Size" value="<?= strlen($sample->content) ?>"/>

    <!-- Most of elements can be used by multiple aliases (grid: vs grid.) -->
    <grid:cell.number title="Sample value" value="<?= $sample->child->value ?>"/>

    <!-- Some cells can be defined using tag context -->
    <grid:cell>
        <a href="<?= uri('sample::edit', ['id' => $sample->id]) ?>">Edit element</a>
    </grid:cell>
</spiral:grid>
```

Forms:

```html
<spiral:form action="/sample/save/<?= $entity->id ?>" style="margin-top: 20px;">
    <form.input label="Name" name="name" value="<?= e($entity->name) ?>"/>

    <form.select label="Status" name="status" values="<?= [
        'active'   => 'Active',
        'disabled' => 'Disabled'
    ] ?>" value="<?= $entity->status ?>"/>

    <form.textarea label="Content" name="content" value="<?= e($entity->content) ?>"/>
    <form.input label="Value" name="value" value="<?= $entity->child->value ?>"/>

    <input type="submit" class="btn btn-default" value=" <?= $entity->isLoaded() ? 'Update' : 'Create' ?>"/>
</spiral:form>
```

Make sure to import toolkit bundle and styles to your views:

```html
<dark:use bundle="spiral:bundle"/>
<toolkit:styles/>
<toolkit:scripts/>
```
npm package: @spiretechnology/js-timecode
Description: A TypeScript / JavaScript library for parsing and manipulating SMPTE timecodes and frame rates.
Author: Spire Technology Inc.
Latest version: 1.3.0

# js-timecode

A TypeScript / JavaScript library for parsing and manipulating SMPTE timecodes and frame rates.

Development of this library is very test-driven to ensure accuracy of the frame and timecode calculations. If you'd like to contribute to this library, adding additional useful test cases is a great place to start!

## Installation

```sh
npm install --save @spiretechnology/js-timecode
```

## Usage Examples

### Parse a timecode (drop frame)

```ts
import { Parse, Rate_29_97 } from '@spiretechnology/js-timecode';

const tc = Parse('00:01:02;23', Rate_29_97);
tc.toString(); // => 00:01:02;23
tc.frame; // => 1881
```

### Parse a timecode (non-drop frame)

```ts
const tc = Parse('00:01:02:23', Rate_24);
tc.toString(); // => 00:01:02:23
tc.frame; // => 1511
```

### Create a timecode from a frame count

```ts
const tc = new Timecode(1511, Rate_24, false /* non-drop frame */);
tc.toString(); // => 00:01:02:23
tc.frame; // => 1511
```

### Algebra with timecodes and frames

```ts
let tc = Parse('00:01:02:23', Rate_24);
tc = tc.add(3);
tc.toString(); // => 00:01:03:02
tc.frame; // => 1514
```

## Note: parsing timecodes that don't exist in drop frame

Drop frame timecodes skip the first 2 frames of each minute, unless the minute is a multiple of 10. This changes to the first 4 frames of each minute if the frame rate is 59.94.

For instance, in `29.97`, the timecode `00:00:59:29` is immediately followed by `00:01:00:02`. Two timecodes were dropped: `00:01:00:00` and `00:01:00:01`

Those dropped timecodes don't correspond to any actual frame number, and so we need to choose how to resolve those frames. The choice we have made with this library is to round up the next valid frame. If you try to parse `00:01:00:00`, the result will be rounded up to `00:01:00:02`, which is the next valid frame in the sequence.

## Contributing

We welcome contributions that make this library more reliable. To add test cases, fix bugs, or anything else, please submit a pull request.

## Other resources

-   [spiretechnology/go-timecode](https://github.com/spiretechnology/go-timecode) - A Go library for parsing and manipulating SMPTE timecodes and frame rates.
npm package: @spiretechnology/js-webauthn
Description: A TypeScript / JavaScript library for registering and authenticating with WebAuthn.
Author: Spire Technology Inc.
Latest version: 1.1.5

# js-webauthn

A TypeScript / JavaScript library for registering and authenticating with WebAuthn.

This library is intended to integrate with the Go backend library [spiretechnology/go-webauthn](https://github.com/spiretechnology/go-webauthn). Together, these two libraries will abstract away the complexities of WebAuthn encoding, decoding, verification, etc.

## Installation

```sh
npm install --save @spiretechnology/js-webauthn
```

## Example usage

```ts
import { WebAuthnClient } from '@spiretechnology/js-webauthn';

const client = new WebAuthnClient();

async function register() {
    // Request a challenge from the server
    const challenge = //...

    // Register a device with the WebAuthn client
    const response = await client.register(challenge);

    // Send the response to the server
    // ...
}

async function authenticate() {
    // Request a challenge from the server
    const challenge = //...

    // Authenticate with the WebAuthn client
    const response = await client.authenticate(challenge);

    // Send the response to the server
    // ...
}
```

## Other resources

-   [spiretechnology/go-webauthn](https://github.com/spiretechnology/go-webauthn) - WebAuthn backend library for Go.
npm package: @spirex/di-config
Description: A middleware for @spirex/di that configures services right after they are created.
Author: Artem Sobolenkov
Latest version: 1.0.0

# SpireX/DI Config

`@spired/di-config `

A middleware for `@spirex/di` that configures services right after they are created. Configure lets you apply post-construction initialization logic without modifying the service factory or class itself, making it easier to extend and reuse modules.

![NPM Type Definitions](https://img.shields.io/npm/types/%40spirex%2Fdi-config?style=for-the-badge)
[![NPM Version](https://img.shields.io/npm/v/%40spirex%2Fdi-config?style=for-the-badge)](https://www.npmjs.com/package/@spirex/di-config)
[![Codecov](https://img.shields.io/codecov/c/github/spirex64/spirex-di?token=VXQZK5WDSY&flag=di-config&style=for-the-badge)](https://codecov.io/github/SpireX64/spirex-di)
![GitHub License](https://img.shields.io/github/license/spirex64/spirex-di?style=for-the-badge)

```ts
import { Config } from '@spirex/di-config';

const container = diBuilder()
    .include(SQLiteModule)
    .use(Config({
        sqlite: (sqlite) => { sqlite.file = "db.sqlite" }
    }));
```
npm package: @spirex/di-dynamic
Description: @spirex/di extension. Adds support for dynamic modules, allowing you to load parts of your DI container asynchronously at runtime.
Author: Artem Sobolenkov
Latest version: 1.0.1

# SpireX/DI Dynamic Modules
`@spirex/di-dynamic` 

Adds support for **dynamic modules**, allowing you to load parts of your container asynchronously at runtime. Perfect for *code-splitting* and modular applications.

![NPM Type Definitions](https://img.shields.io/npm/types/%40spirex%2Fdi-dynamic?style=for-the-badge)
[![NPM Version](https://img.shields.io/npm/v/%40spirex%2Fdi-dynamic?style=for-the-badge)](https://www.npmjs.com/package/@spirex/di-dynamic)
[![Codecov](https://img.shields.io/codecov/c/github/spirex64/spirex-di?token=VXQZK5WDSY&flag=di-dynamic&style=for-the-badge)](https://codecov.io/github/SpireX64/spirex-di)
![GitHub License](https://img.shields.io/github/license/spirex64/spirex-di?style=for-the-badge)

```ts
import type { CartService } from "./features/cart"

const CartModule = dynamicModule(
    "CartModule",
    () => import("./features/cart/index.ts"),
).create<{
    cart: CartService,
}>((binder, { CartService }) => {
    binder.bindFactory("cart", factoryOf(CartService));
});
npm package: @spiriit/vite-plugin-svg-spritemap
Description: Generates symbol-based SVG spritemap from all .svg files in a directory
Author: Spiriit
Latest version: 7.0.0

[![npm](https://img.shields.io/npm/v/@spiriit/vite-plugin-svg-spritemap)](https://www.npmjs.com/package/@spiriit/vite-plugin-svg-spritemap) [![node-current](https://img.shields.io/node/v/@spiriit/vite-plugin-svg-spritemap)](https://nodejs.org/) [![Coverage Status](https://coveralls.io/repos/github/SpiriitLabs/vite-plugin-svg-spritemap/badge.svg?branch=main)](https://coveralls.io/github/SpiriitLabs/vite-plugin-svg-spritemap?branch=main)

# [vite-plugin-svg-spritemap](https://spiriitlabs.github.io/vite-plugin-svg-spritemap)

> This plugin supports Vite 7 and 8.

This ViteJS plugin generates a single SVG [spritemap](https://css-tricks.com/svg-sprites-use-better-icon-fonts/) with `<symbol>`/`<view>`/`<use>` for each SVG file. It can also generate a stylesheet (CSS/SCSS/Stylus/Less) containing the sprites to be used directly (via a Data URI or SVG fragments).

> [!NOTE]
> This plugin is inspired by [svg-spritemap-webpack-plugin](https://github.com/cascornelissen/svg-spritemap-webpack-plugin) for Webpack.

## 🚀 Features

- ⚡ Fully integrated in your ViteJS environment
- 📦 Pack your SVG files in one ([spritemap](https://css-tricks.com/svg-sprites-use-better-icon-fonts/)) file
- ✨ Use your SVG in `<svg>` or `<img>` tags and also directly in your CSS/SCSS/Stylus/Less
- 🍕 Import SVG fragments as VueJS components
- 🔥 HMR support
- ⚙️ Optimize your SVGs with SVGO or OXVG

## 📦 Install

```shell
npm i -D @spiriit/vite-plugin-svg-spritemap

# yarn
yarn add -D @spiriit/vite-plugin-svg-spritemap

# pnpm
pnpm add -D @spiriit/vite-plugin-svg-spritemap

# bun
bun add -D @spiriit/vite-plugin-svg-spritemap
```

## 👨‍💻 Quick start

Add all your SVGs icons in one folder (like below `/src/icons` folder for example) and pass the first argument as a glob path including your svg files.

```ts
// vite.config.js / vite.config.ts
import VitePluginSvgSpritemap from '@spiriit/vite-plugin-svg-spritemap'

export default {
  plugins: [VitePluginSvgSpritemap('./src/icons/*.svg')]
}
```

You can access the spritemap via the route `/__spritemap`. All files processed by ViteJS will transform the path of the file on build. The prefix is `sprite-` by default.

The plugin will generate a spritemap to support all methods described below (files populated with `<view>` for fragments and `<use>` for sprite). This can be configured through options.

**SVG**

```html
<svg>
  <use xlink:href="/__spritemap#sprite-spiriit"></use>
</svg>
```

**Img**

You need to add the suffix `-view` to access the fragment.

```html
<img src="/__spritemap#sprite-spiriit-view" />
```

## 📚 Documentation

For more information, check the [vite-plugin-svg-spritemap documentation](https://spiriitlabs.github.io/vite-plugin-svg-spritemap). It covers everything from getting started to advanced topics.

## 🏃 What's next

- Add variable supports inspired by [svg-spritemap-webpack-plugin](https://github.com/cascornelissen/svg-spritemap-webpack-plugin/blob/master/docs/variables.md)

## 👨‍💼 License

MIT
npm package: @spirit-ui/react
Description: React component library built with Tailwindcss, Typescript, and Vite.
Author: Tayte Stokes
Latest version: 0.0.18

# Spirit UI React

Spirit UI React is a React component library that is built with Typescript, Tailwindcss, and Vite.

## Development

Spirit UI uses Storybook to develop components.

Run the Storybook development server

```bash
npm run dev
```

## Publishing

Spirit UI utilizes (changesets)[https://github.com/changesets/changesets] to manage package versioning and changelog documentation for releases.

1. Create a new changeset and decide what package should be version bumped (@spirit-ui/react), what kind of version bump is happening (major, minor, path), and add a summary for what the release changes entail.

```bash
npx changeset add
```

2. Consume the new changeset to bump the package version and write the changes made in the release to the changelog files.

```bash
npx changeset version
```

3. Publish the release.

```bash
npx changeset publish
```