open-index/open-npm huggingface dataset:
npm package: @infiniteluke/babel-preset-react-app
Description: Babel preset used by Create React App
Latest version: 3.1.1

# babel-preset-react-app

This package includes the Babel preset used by [Create React App](https://github.com/facebook/create-react-app).<br>
Please refer to its documentation:

* [Getting Started](https://github.com/facebook/create-react-app/blob/master/README.md#getting-started) – How to create a new app.
* [User Guide](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App.

## Usage in Create React App Projects

The easiest way to use this configuration is with [Create React App](https://github.com/facebook/create-react-app), which includes it by default. **You don’t need to install it separately in Create React App projects.**

## Usage Outside of Create React App

If you want to use this Babel preset in a project not built with Create React App, you can install it with following steps.

First, [install Babel](https://babeljs.io/docs/setup/).

Then install babel-preset-react-app.

```sh
npm install babel-preset-react-app --save-dev
```

Then create a file named `.babelrc` with following contents in the root folder of your project:

```js
{
  "presets": ["react-app"]
}
```

This preset uses the `useBuiltIns` option with [transform-object-rest-spread](http://babeljs.io/docs/plugins/transform-object-rest-spread/) and [transform-react-jsx](http://babeljs.io/docs/plugins/transform-react-jsx/), which assumes that `Object.assign` is available or polyfilled.

## Usage with TypeScript

To use this package with [`@babel/preset-typescript`](https://www.npmjs.com/package/@babel/preset-typescript), you need to disable `@babel/preset-flow` first.

You can achieve this by doing:

```
{
  "presets": [
    ["react-app", {
        "flow": false
    }],
    "@babel/typescript"
  ]
}
```
npm package: @infiniteluke/react-scripts
Description: Configuration and scripts for Create React App.
Latest version: 1.1.0

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
Please refer to its documentation:

* [Getting Started](https://github.com/facebook/create-react-app/blob/master/README.md#getting-started) – How to create a new app.
* [User Guide](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App.
npm package: @infinitepay/js
Description: SDK JavaScript para integração com o InfinitePay Checkout
Author: InfinitePay
Latest version: 1.0.2

# @infinitepay/js

SDK JavaScript para integração com o InfinitePay Checkout.

## Instalação

```bash
npm install @infinitepay/js
```

## Uso

```typescript
import { InfinityJS } from "@infinitepay/js";

const infinity = new InfinityJS("seu-handle");

const url = infinity.buildUrl({
  items: [{ name: "Produto 1", price: 1000, quantity: 1 }],
  order_nsu: "123456",
  redirect_url: "https://seusite.com/sucesso",
  customer: {
    customer_name: "João Silva",
    customer_email: "joao@email.com",
  },
});
```

## Documentação

Para mais informações, visite [a documentação oficial](https://www.infinitepay.io/checkout).
npm package: @infinitered/react-native-mlkit-core
Description: Shared Library for RNMLKit
Author: Trevor Coleman
Latest version: 5.0.0

# @infinitered/react-native-mlkit-core

## Description

This is a shared library for RNMLKit that contains helper functions and shared code for various packages. It offers
some helpful methods that are used by many apps on the React Native (JS) side and includes functionality to work with
images and bounding boxes.

## Installation

Use the following command to install the package:

```bash
npm install @infinitered/react-native-mlkit-core
```

## Usage

### RNMLKitImage

#### Swift

Use this class in Swift to create and manage images with MLKitVision. It provides utility methods for loading images and
managing their vision representations.

```swift
import RNMLKitCore
let image = RNMLKitImage(imagePath: imagePath)
// ...
```

- `imagePath` - should be the localUri of the image to process. i.e. `Asset.localUri` from an Expo Asset or `Image.uri`
  from
  an ImagePickerAsset.

#### Kotlin

Use this class in Kotlin to create and manage images with MLKitVision. It provides utility methods for loading images
and managing their vision representations.

```kotlin
import com.infinitered.reactnativemlkitcore.RNMLKitImage

val imageUri = Uri.parse(imagePath)
var image:InputImage = RNMLKitImage(imagePath, appContext.reactContext!!).image
// ...
```

- `imagePath` is the localUri of the image to process. `Asset.localUri` from an Expo Asset or `Image.uri` from an Expo
  ImagePickerAsset.
- `appContext` is the AppContext from your expo module -- it's accessible as a property on the Module class.

### React Components

#### BoundingBoxView

Renders a bounding box based on the specified dimensions and scale.

```jsx
import { BoundingBoxView } from "@infinitered/react-native-mlkit-core";
// ...
<BoundingBoxView box={box} scale={scale} />;
```

- `box` is the bounding box to render of type `BoundingBox`

```ts
/**
 * Represents a bounding box with origin, size, color, label, and width properties.
 */
export interface BoundingBox {
  origin: { x: number; y: number };
  size: { x: number; y: number };
  color?: string;
  label?: string;
  width?: number;
}
```

#### ImageWithBoundingBoxes

Renders an image with bounding boxes drawn over specified regions.

```jsx
import { ImageWithBoundingBoxes } from "@infinitered/react-native-mlkit-core";
// ...
<ImageWithBoundingBoxes image={image} boundingBoxes={boundingBoxes} />;
```

- `boundingBoxes` is an array of `BoundingBox` objects to render over the image.
- `image` is the image to render. Accepts an `Image` from `expo-image`

### Hooks

Several hooks are included to assist with layout and scaling:

- `useBoundingBoxStyle`: Calculates the style object for a bounding box.
- `useImageScale`: Calculates the image scale based on the provided parameters.
- `useLayout`: Handles layout change events.
npm package: @infinitered/react-native-mlkit-document-scanner
Description: MLKit Document Scanner for Expo
Author: Frank Calise
Latest version: 5.0.0

# react-native-mlkit-document-scanner

MLKit Document Scanner for Expo

# API documentation

### [Check the friendly docs here! 📖](https://docs.infinite.red/react-native-mlkit/document-scanner)

# Installation in managed Expo projects

For [managed](https://docs.expo.dev/archive/managed-vs-bare/) Expo projects, please follow the installation instructions
in the [API documentation for the latest stable release](#api-documentation). If you follow the link and there is no
documentation available then this library is not yet usable within managed projects &mdash; it is likely to be included
in an upcoming Expo SDK release.

# Installation in bare React Native projects

For bare React Native projects, you must ensure that you
have [installed and configured the `expo` package](https://docs.expo.dev/bare/installing-expo-modules/) before
continuing.

### Add the package to your npm dependencies

```
npm install @infinitered/react-native-mlkit-document-scanner
```

### Configure for iOS

Run `npx pod-install` after installing the npm package.

### Configure for Android

# Contributing

Contributions are very welcome! Please refer to guidelines described in
the [contributing guide](https://github.com/expo/expo#contributing).
npm package: @infinitered/react-native-mlkit-face-detection
Description: MLKit Face Detection for Expo
Author: Trevor Coleman
Latest version: 5.0.0

# @infinitered/react-native-mlkit-face-detection

MLKit Face Detection for Expo apps.

# API documentation

### [Check the friendly docs here! 📖](https://docs.infinite.red/react-native-mlkit/face-detection)

# Installation in managed Expo projects

For [managed](https://docs.expo.dev/archive/managed-vs-bare/) Expo projects, please follow the installation instructions
in the [API documentation for the latest stable release](#api-documentation). If you follow the link and there is no
documentation available then this library is not yet usable within managed projects &mdash; it is likely to be included
in an upcoming Expo SDK release.

# Installation in bare React Native projects

For bare React Native projects, you must ensure that you
have [installed and configured the `expo` package](https://docs.expo.dev/bare/installing-expo-modules/) before
continuing.

### Add the package to your npm dependencies

```
npm install @infinitered/react-native-mlkit-face-detection
```

### Configure for iOS

Run `npx pod-install` after installing the npm package.

### Configure for Android

# Contributing

Contributions are very welcome! Please refer to guidelines described in
the [contributing guide](https://github.com/expo/expo#contributing).
npm package: @infinitered/react-native-mlkit-image-labeling
Description: MLKit Image Labeling for React Native with Expo
Author: Trevor Coleman
Latest version: 5.0.0

# @infinitered/react-native-mlkit-image-labeling

### [Check the friendly docs here! 📖](https://docs.infinite.red/react-native-mlkit/image-labeling)

# Getting Started with react-native-mlkit-image-labeling

## Overview

`react-native-mlkit-image-labeling` provides utilities for image classification using ML Kit in React Native apps. It
allows for the classification of images using either ML Kit's built-in models or custom TensorFlow Lite models.

## Installation

```shell
npm install @infinitered/react-native-mlkit-image-labeling expo-asset
```

## Usage

### 1. Import necessary hooks and types:

```tsx
import {
  useImageLabeling,
  useImageLabelingProvider,
  useImageLabelingModels,
  ImageLabelingConfig,
  ClassificationResult
} from "@infinitered/react-native-mlkit-image-labeling";
```

### 2. Define your models configuration:

Create an `ImageLabelingConfig` object that identifies your model files and options:

```tsx
const MODELS: ImageLabelingConfig = {
  nsfw: {
    model: require("./path/to/model.tflite"),
    options: {
      maxResultCount: 5,
      confidenceThreshold: 0.5,
    },
  },
};
```

### 3. Set up the Provider:

The image labeling functionality requires a provider at the root of your app or where you plan to use the models:

```tsx
function App() {
  const models = useImageLabelingModels(MODELS);
  const { ImageLabelingModelProvider } = useImageLabelingProvider(models);

  return (
    <ImageLabelingModelProvider>
      <YourApp />
    </ImageLabelingModelProvider>
  );
}

```

### 4. Using the image labeler in your components:

```tsx
function ImageClassifier() {
// Get the classifier instance for your model
  const classifier = useImageLabeling("nsfw");

  const classifyImage = async (imageUri: string) => {
    try {
      const result = await classifier.classifyImage(imageUri);
      console.log(result);
    } catch (error) {
      console.error("Classification failed:", error);
    }
  };

  return (
    <View>
      // ....your component
    </View>
  );
}

```
npm package: @infiniterp/cli
Description: A CLI to quickly scaffold and boilerplate FiveM resources
Author: Project Error
Latest version: 0.1.1

# @infiniterp/cli

CLI Tools for @infiniterp

## Refs

https://github.com/project-error/pe-cli

## Getting Started

All you have to do is run `npm i @infiniterp/cli -g` and it will add it gloabally. Then just run `inf-create` to get started.
npm package: @infinitetoolbox/bmi-calculator
Description: BMI calculator
Latest version: 0.2.89

# BMI Calculator

[![Build Status](https://travis-ci.org/infinitetoolbox/calculators.svg?branch=master)](https://travis-ci.org/infinitetoolbox/calculators)

> Body Mass Index (BMI) calculator module

## Install

```
$ npm install @infinitetoolbox/bmi-calculator
```

## Usage
```js
import bmiCalculator from '@infinitetoolbox/bmi-calculator';

const bmi = bmiCalculator(mass, height);
```

## Maintainers

[![Emmanuel Gautier](https://avatars0.githubusercontent.com/u/2765366?s=144)](https://www.emmanuelgautier.com) |
--- |
[Emmanuel Gautier](https://www.emmanuelgautier.com) |

## License

MIT © [InfiniteToolbox](https://calculators.infinitetoolbox.org)
npm package: @infinitetoolbox/sudoku
Description: Sudoku solver
Latest version: 0.1.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Sudoku Solver

[![Build Status](https://travis-ci.org/infinitetoolbox/sudoku.svg?branch=master)](https://travis-ci.org/infinitetoolbox/sudoku)
[![codecov](https://codecov.io/gh/infinitetoolbox/sudoku/branch/master/graph/badge.svg)](https://codecov.io/gh/infinitetoolbox/sudoku)

> This project is a pure javascript Sudoku solver library.

## Install

```
$ npm install @infinitetoolbox/sudoku
```

## Usage
```js
import linkedinImport from '@infinitetoolbox/sudoku';

```

[API](https://knohime.github.io/linkedin-import/)

## Maintainers

[![Emmanuel Gautier](https://avatars0.githubusercontent.com/u/2765366?s=144)](https://www.emmanuelgautier.fr) |
--- |
[Emmanuel Gautier](https://www.emmanuelgautier.fr) |

## License

MIT © [Infinitetoolbox](https://infinitetoolbox.org)
npm package: @infinitetoolbox/vat-calculator
Description: VAT Number calculator
Latest version: 0.2.90

# VAT Number Calculator

[![Build Status](https://travis-ci.org/infinitetoolbox/calculators.svg?branch=master)](https://travis-ci.org/infinitetoolbox/calculators)

> VAT number calculator module

## Install

```
$ npm install @infinitetoolbox/vat-calculator
```

## Usage
```js
import { frenchVatCalculator } from '@infinitetoolbox/vat-calculator';

const vatNumber = frenchVatCalculator(siretOrSiren);
```

## Maintainers

[![Emmanuel Gautier](https://avatars0.githubusercontent.com/u/2765366?s=144)](https://www.emmanuelgautier.com) |
--- |
[Emmanuel Gautier](https://www.emmanuelgautier.com) |

## License

MIT © [Infinitetoolbox](https://calculators.infinitetoolbox.org)
npm package: @infinitex/autocomplete
Description: A Simple React Autocomplete Component
Author: Yiyang Xu
Latest version: 0.0.2

# @infinitex/autocomplete

@infinitex/autocomplete is a Simple React Component library, with a small size.

## Installation

Use the package manager yarn/npm to install @infinitex/autocomplete.

```bash
yarn add @infinitex/autocomplete
# npm i @infinitex/autocomplete
```

## Props

```ts
type Props = {
  // it's a controlled input component
  value: string;
  // use this callback to update value
  onChange(input: string): void;
  // when click item or press "Enter", this callback will be triggered
  onSelect(option: string): void;
  // a list of dropdown items
  options: string[];
  // custom function to render dropdown item
  optionRenderer?(option: string, active: boolean): JSX.Element;
  // custom function to match option to value
  optionKeyExtractor?(option: string): string;
  // show a red message on bottom-right, when it's a valid string
  error?: string;
  // show a spinner at center of dropdown
  isLoading?: boolean;
  // input placeholder
  placeholder?: string;
  styles?: {
    input: CSSProperties;
    dropdown: CSSProperties;
  };
};
```

## 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: @infinitex/fundamental-react-typing
Description: TypeScript definitions for fundamental-react
Latest version: 0.14.1-beta.1

# Notes
This repo is a fork of `@types/fundamental-react`, including some type improvement for newer version of fundamental-react. To be able to use the new type repository before DefinitelyTyped merges, I created this repository

# Installation
add this line in `package.json`
```json
{
  "@types/fundamental-react": "npm:@infinitex/fundamental-react-typing"
}
```

# Summary
This package contains type definitions for fundamental-react (https://sap.github.io/fundamental-react).

# Details
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/fundamental-react.

### Additional Details
 * Last updated: Fri, 28 Jan 2022 16:31:26 GMT
 * Dependencies: [@types/react](https://npmjs.com/package/@types/react)
 * Global values: none

# Credits
These definitions were written by [Frank Feinbube](https://github.com/Feinbube), [Milan Proell](https://github.com/milanpro), [Sam Kvale](https://github.com/skvale), and [Auryn Engel](https://github.com/auryn31).
npm package: @infinitex/micro-use
Description: Another composition API plugin for ZEIT's Micro
Latest version: 0.0.1

# `@infinitex/micro-use`

Another simple [Micro](https://github.com/zeit/micro) plugin, to make it run with composition API.

## Example

```js
import micro from "micro";
import { hooked, useBody } from "@infinitex/micro-use";

const handler = () => {
  const { name } = useBody();
  return "hello " + name;
};

micro(hooked(handler)).listen(3000);
```

There is no middleware, you can create your own hook to do the stuff such as permission verification.

```js
import micro from "micro";
import {
  hooked,
  sendReject,
  useContext,
  useHeader,
} from "@infinitex/micro-use";

const useAuth = async () => {
  const { res } = useContext();
  const headers = useHeaders();
  const user = await verify(headers.token);
  if (!user) {
    sendError(res, 403, "unauthorized");
  }
  return user;
};

const handler = async () => {
  const user = await useAuth();
  // do anything with user
  return { msg: "..." };
};

micro(hooked(handler)).listen(3000);
```

## Install

```bash
yarn add micro
yarn add @infinitex/micro-use
```

## Note

I use global variables to keep the request parameters. To avoid conflicts, the useContext function should be placed at the beginning of the synchronization function.

```js
const handler = async () => {
  const project = await useProject();
  DB.findAll();
  const user = await useAuth(); // Wrong! may lead to strange problems
};

const handler = async () => {
  const project = await useProject();
  const user = await useAuth(); // Correct! useContext should beyond all async functions
  DB.findAll();
};
```

## Principle

The library is very lightweight and offers only a few functional approaches, so it can work well with other micro libraries.
npm package: @infinitex/tiny-carousel
Description: A `0.6kb` simple carousel headless component
Author: Yiyang Xu
Latest version: 0.1.1

## Tiny React Carousel

A `0.6kb` simple carousel headless component

demo: https://tiny-carousel.vercel.app/

### Quick Start

```sh
npm install @infinitex/tiny-carousel
```

### Usage

```tsx
import { useCarousel } from '@infinitex/tiny-carousel';

export default function() {
  const { element, index, onNext, onPrev, jump } = useCarousel({
    width: 250,
    children: [1, 2, 3].map(i => <div key={i} className="item" />),
  });

  return element;
}
```

### Options

```ts
interface CarouselOptions {
  width: number;                   // Carousel Container Width
  transition: number;              // Custom slide transition. eg: "200ms ease"
  children: React.ReactNode[];     // Carousel Item List
}

interface CarouselReturn {
  onNext: (step?: number) => void; // Trigger next
  onPrev: (step?: number) => void; // Trigger previous
  jump: (index: number) => void;   // Jump to target index
  index: number;                   // Current index
  element: JSX.Element;            // Carousel JSX Element
}
```

#### Todo List

- [ ] add drag gesture support
- [ ] add custom props support
npm package: @infinito/music
Description: Music Library/Player
Author: Alex Joss
Latest version: 0.0.1

# Music Library Module

** WIP **
To view current build visit:\
http://www.infiniteadaptability.org/music/

### Currently Working On:
* reorganizing/integrating with node/npm

### Bugs:

### Plan:
See notes.txt

### Tests:

### Summary:

### License:
I, Alex Joss, the sole author of this project, waive all my rights to it and release it under the [Public
Domain](http://creativecommons.org/publicdomain/zero/1.0/). Do with it what you
will.
npm package: @infinitoui/infinito-button
Description: button
Author: WUSO01
Latest version: 1.7.7


<!-- ⚠️ This README has been generated from the file(s) "readme.blueprint.md" ⚠️--><h1 align="center">@infinitoui/infinito-button</h1>

<p align="center">
		<a href="https://npmcharts.com/compare/@infinitoui/infinito-button?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@infinitoui/infinito-button.svg" height="20"/></a>
<a href="https://www.npmjs.com/package/@infinitoui/infinito-button"><img alt="NPM Version" src="https://img.shields.io/npm/v/@infinitoui/infinito-button.svg" height="20"/></a>
<a href="https://github.com/badges/shields"><img alt="TypeScript" src="https://img.shields.io/npm/types/@infinitoui/infinito-button" height="20"/></a>
	</p>


[](#preview)

## Preview

![preview](./images/preview.png)

[](#demo)

## Demo

## Install

> npm install @infinitoui/infinito-button

[](#usage)

## Usage

引入组件：

```js
import '@infinitoui/infinito-button'
```

使用：

```html
<infinito-button>default</infinito-button>
<infinito-button primary>primary</infinito-button>
```

[](#properties)

## Properties

| Property   | Attribute  | Type      | Default | Description |
|------------|------------|-----------|---------|-------------|
| `disabled` | `disabled` | `boolean` | false   | 是否禁用按钮      |
| `label`    | `label`    | `string`  | ""      | 按钮文字        |

[](#events)

## Events

| Event   | Description |
|---------|-------------|
| `click` | 按钮点击事件      |


[](#slots)

## Slots

| Name | Description         |
|------|---------------------|
|      | 默认插槽，按钮文字或者其他html标签 |


[](#css-custom-properties)

## CSS Custom Properties

| Property             | Default | Description  |
|----------------------|---------|--------------|
| `--border-color`     | "#333"  | border颜色     |
| `--border-radis`     | "6px"   | 圆角           |
| `--button-color`     | "#fff"  | 背景颜色         |
| `--button-padding`   | "0 8px" | 内间距          |
| `--fonts-size`       | "14px"  | 字体大小         |
| `--hover-color`      | "#333"  | hover时按钮背景颜色 |
| `--hover-font-color` | "#fff"  | hover时文字颜色   |
npm package: @infinitoui/infinito-card
Description: infinito card component
Author: WUSO01
Latest version: 1.7.7

<!-- ⚠️ This README has been generated from the file(s) "readme.blueprint.md" ⚠️--><h1 align="center">@infinitoui/infinito-card</h1>

<p align="center">
		<a href="https://npmcharts.com/compare/@infinitoui/infinito-card?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@infinitoui/infinito-card.svg" height="20"/></a>
<a href="https://www.npmjs.com/package/@infinitoui/infinito-card"><img alt="NPM Version" src="https://img.shields.io/npm/v/@infinitoui/infinito-card.svg" height="20"/></a>
<a href="https://github.com/badges/shields"><img alt="TypeScript" src="https://img.shields.io/npm/types/@infinitoui/infinito-card" height="20"/></a>
	</p>



[](#preview)

## Preview

![preview](./images/preview.png)



[](#demo)

## Demo



[](#install)

## Install

> npm install @infinitoui/infinito-card



[](#usage)

## Usage

引入组件：

```js
import '@infinitoui/infinito-card'
```

使用：

```html
<infinito-card title="标题">
  <p>这是有标题的card，并且可以折叠</p>
</infinito-card>

<infinito-card>
  <p>这是没有标题的card</p>
</infinito-card>
```

[](#properties)

## Properties

| Property | Attribute | Type      | Default | Description   |
|----------|-----------|-----------|---------|---------------|
| `open`   | `open`    | `boolean` | false   | 默认是否关闭        |
| `title`  | `title`   | `string`  | ""      | 卡片标题，没有标题不能折叠 |


[](#slots)

## Slots

| Name | Description  |
|------|--------------|
|      | 卡片主体内容（默认插槽） |


[](#css-custom-properties)

## CSS Custom Properties

| Property          | Default | Description |
|-------------------|---------|-------------|
| `--border-radius` | "0"     | 卡片圆角        |
| `--card-color`    | "#fff"  | 卡片背景颜色      |
| `--padding-width` | "20px"  | 卡片内边距       |
npm package: @infinitoui/infinito-modal
Description: modal component
Author: WUSO01
Latest version: 1.7.7

<!-- ⚠️ This README has been generated from the file(s) "readme.blueprint.md" ⚠️--><h1 align="center">@infinitoui/infinito-modal</h1>

<p align="center">
		<a href="https://npmcharts.com/compare/@infinitoui/infinito-switch?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@infinitoui/infinito-switch.svg" height="20"/></a>
<a href="https://www.npmjs.com/package/@infinitoui/infinito-switch"><img alt="NPM Version" src="https://img.shields.io/npm/v/@infinitoui/infinito-switch.svg" height="20"/></a>
<a href="https://github.com/badges/shields"><img alt="TypeScript" src="https://img.shields.io/npm/types/@infinitoui/infinito-switch" height="20"/></a>
	</p>



[](#preview)

## Preview

![preview](./images/preview.png)



[](#demo)

## Demo



[](#install)

## Install

> npm install @infinitoui/infinito-modal



[](#usage)

## Usage

引入组件：

```js
import '@infinitoui/infinito-modal'
```

使用：

```js
import { LitElement, html, css } from 'lit-element'
import '@infinitoui/infinito-button'
import '@infinitoui/infinito-modal'

class ModalWrapper extends LitElement {

  static get properties() {
    return {
      open: { type: Boolean }
    }
  }

  constructor() {
    super()
    this.open = false
  }

  static styles = css`
    div {
      padding: 30px;
    }
  `

  render() {
    return html`
      <div>
        <infinito-button @click=${this.openModal}>弹窗</infinito-button>
        <infinito-modal .open=${this.open} .onCancel=${this.handleCancel}>
          <div slot="body">
            这是弹窗的内容
          </div>
        </infinito-modal>
      </div>
      `
  }

  openModal() {
    this.open = true
  }

  handleCancel = () => {
    this.open = false
  }
}

```


[](#properties)

## Properties

| Property    | Attribute   | Type       | Default | Description |
|-------------|-------------|------------|---------|-------------|
| `closeable` | `closeable` | `boolean`  | true    | 是否显示左上角关闭按钮 |
| `onCancel`  | `onCancel`  | `function` |         | 关闭弹窗的回调函数   |
| `open`      | `open`      | `boolean`  | false   | 默认是否打开弹窗    |


[](#slots)

## Slots

| Name   | Description |
|--------|-------------|
| `body` | 弹窗主体内容      |
| `foot` | footer      |


[](#css-custom-properties)

## CSS Custom Properties

| Property          | Default | Description |
|-------------------|---------|-------------|
| `--border-radius` | "6px"   | 弹窗圆角        |
| `--modal-padding` | "20px"  | 弹窗的那边距      |
npm package: @infinitoui/infinito-radio
Description: radio
Author: WUSO01
Latest version: 1.6.4

<!-- ⚠️ This README has been generated from the file(s) "readme.blueprint.md" ⚠️--><h1 align="center">@infinitoui/infinito-radio</h1>

<p align="center">
		<a href="https://npmcharts.com/compare/@infinitoui/infinito-switch?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@infinitoui/infinito-switch.svg" height="20"/></a>
<a href="https://www.npmjs.com/package/@infinitoui/infinito-switch"><img alt="NPM Version" src="https://img.shields.io/npm/v/@infinitoui/infinito-switch.svg" height="20"/></a>
<a href="https://github.com/badges/shields"><img alt="TypeScript" src="https://img.shields.io/npm/types/@infinitoui/infinito-switch" height="20"/></a>
	</p>



[](#preview)

## Preview

![preview](./images/preview.png)



[](#demo)

## Demo



[](#install)

## Install

> npm install @infinitoui/infinito-radio



[](#usage)

## Usage

引入组件：

```js
import '@infinitoui/infinito-radio'
```

使用：

```html
<infinito-radio value="boy">Boy</infinito-radio>
<infinito-radio value="girl" checked>Girl</infinito-radio>
<infinito-radio value="male" disabled>Male</infinito-radio>
```

[](#properties)

## Properties

| Property   | Attribute  | Type      | Default | Description |
|------------|------------|-----------|---------|-------------|
| `checked`  | `checked`  | `boolean` | false   | 默认是否选中      |
| `disabled` | `disabled` | `boolean` | false   | 是否禁用        |
| `value`    | `value`    | `string`  | ""      | 单选框的值       |


[](#events)

## Events

| Event    | Description |
|----------|-------------|
| `change` | 单选框点击事件     |


[](#slots)

## Slots

| Name | Description |
|------|-------------|
|      | 默认插槽        |


[](#css-custom-properties)

## CSS Custom Properties

| Property         | Default | Description |
|------------------|---------|-------------|
| `--border-color` | "#333"  | 主体颜色        |
npm package: @infinitoui/infinito-slider
Description: slider
Author: WUSO01
Latest version: 1.7.8

# Slider 滑动输入条

> 鼠标点击和拖动输入，展示当前值。

## How to use

> yarn add @infinitoui/infinito-slider

```javascript
import '@infinitoui/infinito-slider';
```

```html
<infinito-slider .value></infinito-slider>
```

### property

| property    | type     | 默认值                                | 描述       |
| ----------- | -------- | ------------------------------------- | ---------- |
| value?      | Number   | 0                                     | 值         |
| min?        | Number   | 0                                     | 最小值     |
| max?        | Number   | 10                                    | 最大值     |
| step?       | Number   | 1                                     | 步长精度   |
| suffix?     | String   | ''                                    | 显示后缀   |
| translator? | Function | (value:number)=>value:value \| string | 格式化函数 |

### event

| event     | event 参数     | 是否冒泡 | 描述               |
| --------- | -------------- | -------- | ------------------ |
| on-change | detail:{value} | 否       | 值发生变化时触发   |
| on-start  | detail:{value} | 否       | 点击小球的时候触发 |
| on-end    | detail:{value} | 否       | 拖动完毕的时候触发 |
npm package: @infinitoui/infinito-spin
Description: spin
Author: WUSO01
Latest version: 1.7.7

<!-- ⚠️ This README has been generated from the file(s) "readme.blueprint.md" ⚠️--><h1 align="center">@infinitoui/infinito-spin</h1>

<p align="center">
		<a href="https://npmcharts.com/compare/@infinitoui/infinito-button?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@infinitoui/infinito-button.svg" height="20"/></a>
<a href="https://www.npmjs.com/package/@infinitoui/infinito-button"><img alt="NPM Version" src="https://img.shields.io/npm/v/@infinitoui/infinito-button.svg" height="20"/></a>
<a href="https://github.com/badges/shields"><img alt="TypeScript" src="https://img.shields.io/npm/types/@infinitoui/infinito-button" height="20"/></a>
	</p>



[](#preview)

## Preview

<!-- ![preview](./images/preview.png) -->


[](#demo)

## Demo


[](#install)

## Install

> npm install @infinitoui/infinito-spin


[](#useage)

## Useage

引入组件：

```js
import '@infinitoui/infinito-spin'
```

使用：

```html
<infinito-spin spinning></infinito-spin>
```


[](#properties)

## Properties

| Property   | Attribute  | Type      | Default |
|------------|------------|-----------|---------|
| `delay`    | `delay`    | `number`  | 0       |
| `spinning` | `spinning` | `boolean` | false   |
| `tip`      | `tip`      | `string`  | ""      |


[](#css-custom-properties)

## CSS Custom Properties

| Property       | Default   | Description |
|----------------|-----------|-------------|
| `--spin-color` | "#e7e7e7" | spin图标颜色    |
| `--tip-color`  | "#e7e7e7" | 文字颜色        |
npm package: @infinitoui/infinito-switch
Description: switch
Author: WUSO01
Latest version: 1.5.0

<!-- ⚠️ This README has been generated from the file(s) "readme.blueprint.md" ⚠️--><h1 align="center">@infinitoui/infinito-switch</h1>

<p align="center">
		<a href="https://npmcharts.com/compare/@infinitoui/infinito-switch?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@infinitoui/infinito-switch.svg" height="20"/></a>
<a href="https://www.npmjs.com/package/@infinitoui/infinito-switch"><img alt="NPM Version" src="https://img.shields.io/npm/v/@infinitoui/infinito-switch.svg" height="20"/></a>
<a href="https://github.com/badges/shields"><img alt="TypeScript" src="https://img.shields.io/npm/types/@infinitoui/infinito-switch" height="20"/></a>
	</p>



[](#preview)

## Preview

![preview](./images/preview.png)



[](#demo)

## Demo



[](#install)

## Install

> npm install @infinitoui/infinito-switch



[](#usage)

## Usage

引入组件：

```js
import '@infinitoui/infinito-switch'
```

使用：

```html
<infinito-switch></infinito-switch>
<infinito-switch checked></infinito-switch>
<infinito-switch disabled></infinito-switch>
```


[](#properties)

## Properties

| Property   | Attribute  | Type      | Default | Description |
|------------|------------|-----------|---------|-------------|
| `checked`  | `checked`  | `boolean` | false   | 默认是否选中      |
| `disabled` | `disabled` | `boolean` | false   | 是否禁用        |


[](#events)

## Events

| Event    | Description |
|----------|-------------|
| `change` | 状态改变事件      |


[](#css-custom-properties)

## CSS Custom Properties

| Property         | Default | Description      |
|------------------|---------|------------------|
| `--switch-color` | "#333"  | 主体颜色，未选中状态透明度 .2 |
npm package: @infinity-payments/checkout-js
Description: Infinity Checkout JavaScript SDK
Latest version: 0.1.4

# @infinity/checkout-js

Browser checkout SDK for Infinity.

## Install

```bash
npm install @infinity/checkout-js
```

## Vanilla JavaScript

```ts
import { Checkout } from "@infinity/checkout-js";

const checkout = new Checkout({
  publishableKey: "pk_test_123",
  environment: "sandbox"
});

const session = await checkout.createSession({
  paymentLinkId: "plink_123",
  customerEmail: "customer@example.com"
});

checkout.open(session.url, {
  onSuccess: (event) => {
    console.log("checkout event", event);
  },
  onClose: () => {
    console.log("checkout closed");
  }
});
```

## React (no React dependency in this package)

```tsx
import { useMemo } from "react";
import { Checkout } from "@infinity/checkout-js";

export function PayButton() {
  const checkout = useMemo(
    () =>
      new Checkout({
        publishableKey: "pk_test_123",
        environment: "sandbox"
      }),
    []
  );

  const handleClick = async () => {
    const session = await checkout.createSession({
      paymentLinkId: "plink_123"
    });

    checkout.open(session.url, {
      onSuccess: (event) => {
        console.log(event);
      }
    });
  };

  return <button onClick={handleClick}>Pay now</button>;
}
```