open-index/open-npm huggingface dataset:
npm package: @formixru/b2b-ui
Description: [Storybook](http://www.master.b2b-ui.dev.optiweb.ru/)
Latest version: 3.4.1

# b2b-ui

[Storybook](http://www.master.b2b-ui.dev.optiweb.ru/)

## Подключение компонентов

### JS/SCSS

```js
import { init } from '@formixru/b2b-ui/components/input';

// Если Vue-компонент
import ExampleInput from '@formixru/b2b-ui/components/example-input/vue';
```

```scss
@use 'pkg:@formixru/b2b-ui/components/input/scss';
```

При подключении Vue-компонента подключать SCSS не нужно - он подключается автоматически.

## Подключение вспомогательных функций

```js
import { cssVar } from '@formixru/b2b-ui/utils/css-var';
```

## Разработка

[CONTRIBUTING.md](./CONTRIBUTING.md)
npm package: @formiz/core
Description: Core package for the [Formiz](https://formiz-react.com) library.
Latest version: 2.4.6

# @formiz/core

Core package for the [Formiz](https://formiz-react.com) library.

## 📚 Full documentation

Full documentation: [formiz-react.com](https://formiz-react.com)

## Install

Using npm:

```
npm install @formiz/core
```

Using yarn:

```
yarn add @formiz/core
```

Using pnpm:

```
pnpm i @formiz/core
```
npm package: @formiz/validations
Description: Validations package for the [Formiz](https://formiz-react.com) library.
Latest version: 2.0.1

# @formiz/validations

Validations package for the [Formiz](https://formiz-react.com) library.

## 📚 Full documentation

Full documentation & demos: [formiz-react.com](https://formiz-react.com)

## Install

Using npm:

```
npm install @formiz/validations
```

or using yarn:

```
yarn add @formiz/validations
```

Using pnpm:

```
pnpm i @formiz/validations
```
npm package: @formkit/auto-animate
Description: Add motion to your apps with a single line of code.
Author: Justin Schroeder
Latest version: 0.9.0

<img width="300" height="37" alt="AutoAnimate Logo" src="https://cdn.formk.it/web-assets/logo-auto-animate.svg" >

![Latest Build](https://github.com/formkit/auto-animate/actions/workflows/main.yml/badge.svg) ![GitHub Sponsors](https://img.shields.io/github/sponsors/formkit)

# Add motion to your apps with a single line of code.

AutoAnimate is a zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with Vue, React, Solid or any other JavaScript application.

<a href="https://auto-animate.formkit.com"><img width="180" height="42" src="https://cdn.formk.it/web-assets/read-docs-auto-animate-v2.svg" alt="Examples & Docs"></a>

With one line of code, you can improve your interfaces, for example:

<a href="https://auto-animate.formkit.com">
  <img src="https://cdn.formk.it/web-assets/motion.gif" alt="Simple example of AutoAnimation motion">
</a>

## Installation

Install using your package manager of choice.

```bash
# yarn
yarn add @formkit/auto-animate
# npm
npm install @formkit/auto-animate
# pnpm
pnpm add @formkit/auto-animate
```

Boom! Done. That was fast! 🐇

## Usage

📖 [View the documentation site for usage instructions](https://auto-animate.formkit.com#usage).

## Examples

📖 [View the documentation site for examples](https://auto-animate.formkit.com#examples).

## Plugins

📖 [View the documentation site for plugin instructions](https://auto-animate.formkit.com#plugins).

## Support us

Is AutoAnimate saving you time?

Please consider [supporting us with a recurring or one-time donation](https://github.com/sponsors/formkit)! 🙏

## Contributing

Thank you for your willingness to contribute to this free and open source project! When contributing, consider first discussing your desired change with the core team via <a href="https://github.com/formkit/auto-animate/issues">GitHub issues</a>, <a href="https://discord.gg/SHYT8pyeNm">Discord</a>, or other method.
npm package: @formkit/barcode
Description: Barcode reader input for FormKit.
Latest version: 1.0.5

<p align="center"><a href="https://www.formkit.com" target="_blank" rel="noopener noreferrer"><img width="200" src="https://cdn.formk.it/brand-assets/formkit-logo.png" alt="FormKit Logo"></a></p>

# @formkit/barcode

<p align="center"><img width="547" src="https://cdn.formk.it/web-assets/github-barcode-example-2.gif" alt="FormKit barcode input"></p>

The official FormKit barcode input.

Read the input documentation at [FormKit.com](https://formkit.com/plugins/barcode)
npm package: @formkit/cli
Description: FormKit command line interface.
Latest version: 2.0.0

<p align="center"><a href="https://www.formkit.com" target="_blank" rel="noopener noreferrer"><img width="200" src="https://cdn.formk.it/brand-assets/formkit-logo.png" alt="FormKit Logo"></a></p>

# @formkit/cli

The official FormKit command line tool.

## Usage

To use this command line tool, simply run:

```sh
$ npx formkit
```
npm package: @formkit/core
Description: The framework agnostic core of FormKit
Latest version: 2.0.0

<p align="center"><a href="https://www.formkit.com" target="_blank" rel="noopener noreferrer"><img width="200" src="https://cdn.formk.it/brand-assets/formkit-logo.png" alt="FormKit Logo"></a></p>

# @formkit/core

The official FormKit core library. This package is responsible for most of FormKit’s internal functionality. You can read documentation specifically on how it works at [formkit.com](https://www.formkit.com/advanced/core).
npm package: @formkit/dev
Description: Development tools for FormKit.
Latest version: 2.0.0

<p align="center"><a href="https://www.formkit.com" target="_blank" rel="noopener noreferrer"><img width="200" src="https://cdn.formk.it/brand-assets/formkit-logo.png" alt="FormKit Logo"></a></p>

# @formkit/dev

The official FormKit development tools. This is automatically included when using `defaultConfig`. If you would like to include it when using your own config simply import that package:

```js
import '@formkit/dev'
```
npm package: @formkit/drag-and-drop
Description: Drag and drop package.
Author: Sasha Milenkovic
Latest version: 0.5.3

<img src="https://s3.amazonaws.com/cdn.formk.it/web-assets/drag-and-drop.gif" alt="FormKit Drag & Drop" width="250" height="250">

[![Tests](https://github.com/formkit/drag-and-drop/actions/workflows/ci.yml/badge.svg)](https://github.com/formkit/drag-and-drop/actions/workflows/ci.yml)![GitHub Sponsors](https://img.shields.io/github/sponsors/formkit)
![NPM Version](https://img.shields.io/npm/v/%40formkit%2Ftempo)

## Introduction

FormKit’s Drag and Drop is a small library for adding data-first drag and drop sorting and transferring for lists in your app. It’s simple, flexible, framework agnostic, and clocks in at only ~4Kb gzipped.

<a href="https://drag-and-drop.formkit.com">
Check out the docs here!
</a>

---

Created by the <a href="https://formkit.com">FormKit team</a>.

> [!NOTE]  
> Unlike many projects this repository includes the `dist` directory since the documentation extracts TypeScript types from the build source code.

## About this repository
npm package: @formkit/i18n
Description: Internationalization layer for FormKit.
Latest version: 2.0.0

<p align="center"><a href="https://www.formkit.com" target="_blank" rel="noopener noreferrer"><img width="200" src="https://cdn.formk.it/brand-assets/formkit-logo.png" alt="FormKit Logo"></a></p>

# @formkit/i18n

The official FormKit internationalization (i18n) plugin. This package contains the locales and plugin that integrates FormKit with these locales. Read the [internationalization documentation](https://www.formkit.com/essentials/internationalization) for usage instructions.

If you would like to contribute a locale, please use the locale builder available at [i18n.formkit.com](https://i18n.formkit.com).
npm package: @formkit/inputs
Description: Commonly shared types for FormKit
Latest version: 2.0.0

<p align="center"><a href="https://www.formkit.com" target="_blank" rel="noopener noreferrer"><img width="200" src="https://cdn.formk.it/brand-assets/formkit-logo.png" alt="FormKit Logo"></a></p>

# @formkit/inputs

The official FormKit inputs plugin. This package contains the source code for all native HTML input types. Read the [inputs documentation](https://formkit.com/essentials/inputs) for usage instructions.
npm package: @formkit/nuxt
Description: The official Nuxt module for FormKit.
Latest version: 2.0.0

<p align="center"><a href="https://www.formkit.com" target="_blank" rel="noopener noreferrer"><img width="200" src="https://cdn.formk.it/brand-assets/formkit-logo.png" alt="FormKit Logo"></a></p>

# @formkit/nuxt

The official nuxt module of FormKit. Read the [installation documentation](https://formkit.com/getting-started/installation#with-nuxt) for usage instructions.
npm package: @formkit/tailwindcss
Description: A FormKit plugin for Tailwind that supplies custom variants based on input state
Latest version: 2.0.0

<p align="center"><a href="https://www.formkit.com" target="_blank" rel="noopener noreferrer"><img width="200" src="https://cdn.formk.it/brand-assets/formkit-logo.png" alt="FormKit Logo"></a></p>

# @formkit/tailwindcss

> **Deprecated**: This package is deprecated. Use `@formkit/themes/tailwindcss` instead, which provides the same functionality with additional features like `checked`, `prefix-icon`, and `suffix-icon` variants.

This package contains tooling to assist with building a comprehensive Tailwind theme for FormKit.

## Installation

```bash
npm install @formkit/tailwindcss
```

```js
// tailwind.config.js
module.exports {
  ...
  plugins: [
    require('@formkit/tailwindcss')
  ]
  ...
}
```

```js
// app.js (or your main entry file)
import { createApp } from 'vue'
import App from './App.vue'
import { plugin, defaultConfig } from '@formkit/vue'
import { generateClasses } from '@formkit/tailwindcss'
import './index.css' // wherever your Tailwind styles exist

createApp(App)
  .use(
    plugin,
    defaultConfig({
      config: {
        classes: generateClasses({
          // Your theme will go here.
          // ...
          // text: {
          //   label: 'font-bold text-gray-300 formkit-invalid:text-red-500',
          //   ...
          // }
          // ...
        }),
      },
    })
  )
  .mount('#app')
```

## Variants

The `@formkit/tailwindcss` package provides a number of variants you can use in your class lists to dynamically respond to input and form state.

The currently provided variants are:

- `formkit-disabled:`
- `formkit-invalid:`
- `formkit-errors:`
- `formkit-complete:`
- `formkit-loading:`
- `formkit-submitted:`
- `formkit-multiple:`
- `formkit-action:`
- `formkit-message-validation:`
- `formkit-message-error:`

## Guide

For a walkthrough on creating a full Tailwind theme for FormKit [read the guide](https://formkit.com/guides/create-a-tailwind-theme) on the official FormKit.com docs.
npm package: @formkit/tempo
Description: The easiest way to work with dates in JavaScript and TypeScript.
Author: Justin Schroeder
Latest version: 1.0.0

<img src="docs/public/tempo.png" alt="TEMPO" width="500" height="195">

[![Vitest](https://github.com/formkit/tempo/actions/workflows/tests.yml/badge.svg)](https://github.com/formkit/tempo/actions/workflows/tests.yml)
![GitHub Sponsors](https://img.shields.io/github/sponsors/formkit)
![NPM Version](https://img.shields.io/npm/v/%40formkit%2Ftempo)

# Tempo — The easiest way to work with dates in JavaScript (and TypeScript)

Tempo is a new library in a proud tradition of JavaScript date and time libraries. Inspired by the likes of moment.js, day.js, and date-fns Tempo is built from the ground up to be as small and easy to use as possible.

Tempo is best thought of as a collection of utilities for working with `Date` objects — an important distinction from other libraries that provide custom date primitives. Under the hood, Tempo mines JavaScript's `Intl.DateTimeFormat` to extract complex data like timezones offsets and locale aware date formats giving you a simple API to format, parse, and manipulates dates.

Tempo is tiny tree-shakable framework, you can only take what you need. All functionality is available in **5.2 kB for esm** and **5.5 kB for cjs** modules (minified and brotlied). [Size Limit](https://github.com/ai/size-limit) controls the size.

<a href="https://tempo.formkit.com">
<img src="docs/public/read-the-docs.png" alt="Read the docs" width="200" height="43">
</a>

---

Created by the <a href="https://formkit.com">FormKit team</a>.
npm package: @formkit/theme-editor
Description: 🖌️ Official theme editor for FormKit themes.
Author: Justin Schroeder
Latest version: 0.6.2

# Theme Editor

[![CI](https://github.com/formkit/editor/actions/workflows/ci.yml/badge.svg)](https://github.com/formkit/editor/actions/workflows/ci.yml)
![Discord](https://img.shields.io/discord/793529058377072650?logo=discord&color=%23727CF8)

The official GUI theme editor for FormKit themes. Themes created with `@formkit/theme-creator` can be loaded and manipulated with this editor.

The quickest way to use the theme editor is by visiting FormKit’s official theme website [themes.formkit.co](https://themes.formkit.co).

> [!WARNING]  
> This project is still in development and is not ready for production use.

## Installation

For the bravest of souls, you can install and use the theme editor on your own projects (it will require some as of yet undocumented configuration):

```bash
npm install @formkit/theme-editor
```

Then in your codebase, simply call import the `createEditor()` function.

```js
// main.ts
import { createEditor } from '@formkit/theme-editor'

createEditor()
```
npm package: @formkit/theme-starter
Description: This is a starter theme for FormKit. It is an intentionally bare-bones and heavily commented. It is intended to be used as a starting point for authors seeking to create their own FormKit themes.
Latest version: 2.0.4

# FormKit Starter Theme

This is a starter theme for FormKit. It is an intentionally bare-bones and heavily commented. It is intended to be used as a starting point for authors seeking to create their own FormKit themes.

## Getting Started

To get started quickly you can run the following command which will provide a copy of this starter theme configured with your desired theme name.

```bash
npx formkit create-theme ThemeName
```

## Additional Documentation

Read the documentation at [https://formkit.com/guides/create-a-tailwind-theme](https://formkit.com/guides/create-a-tailwind-theme) for a comprehensive overview of how to create your own FormKit theme.
npm package: @formkit/utils
Description: Shared utilities for FormKit packages
Latest version: 2.0.0

<p align="center"><a href="https://www.formkit.com" target="_blank" rel="noopener noreferrer"><img width="200" src="https://cdn.formk.it/brand-assets/formkit-logo.png" alt="FormKit Logo"></a></p>

# @formkit/utils

Commonly shared utility functions between official FormKit packages. This is not a public API so it is not officially documented, but the source code is an easy read.
npm package: @formkit/zod
Description: Zod validation for FormKit.
Latest version: 2.0.0

<p align="center"><a href="https://www.formkit.com" target="_blank" rel="noopener noreferrer"><img width="200" src="https://cdn.formk.it/brand-assets/formkit-logo.png" alt="FormKit Logo"></a></p>

# @formkit/zod

The official FormKit Zod plugin. Read the [documentation](https://www.formkit.com/essentials/zod) for usage instructions.