open-index/open-npm huggingface dataset:
npm package: @raxeraditya/beautiful-toast
Description: A beautiful, modern toast component for React applications
Author: Aditya
Latest version: 1.0.4

## Beautiful Toast

A beautiful, modern toast component for React applications with TailwindCSS.

### Installation

```bash
npm install @raxeraditya/beautiful-toast
```

### Usage

1. First, ensure you have TailwindCSS set up in your project and add the following to your tailwind.config.js:

```js
module.exports = {
  content: [
    // ... your content configuration
    "./node_modules/@aditya/beautiful-toast/**/*.{js,ts,jsx,tsx}",
  ],
};
```

2. Import and use the toast component:

```tsx
import { showToast } from "@aditya/beautiful-toast";

// Show a success toast
showToast({
  message: "Successfully saved!",
  variant: "success",
  onUndo: () => console.log("Undo clicked"),
});

// Show an error toast
showToast({
  message: "Something went wrong!",
  variant: "error",
});

// Show an info toast
showToast({
  message: "New update available",
  variant: "info",
});
```

3. Add the Toaster component to your app:

```tsx
import { Toaster } from "sonner";

function App() {
  return (
    <>
      {/* Your app content */}
      <Toaster position="bottom-right" />
    </>
  );
}
```

### API

#### showToast Options

| Property | Type                                        | Default    | Description              |
| -------- | ------------------------------------------- | ---------- | ------------------------ |
| message  | string                                      | (required) | Toast message content    |
| variant  | 'default' \| 'success' \| 'error' \| 'info' | 'default'  | Toast variant style      |
| duration | number                                      | 4000       | Duration in milliseconds |
| onUndo   | () => void                                  | undefined  | Optional undo callback   |
| icon     | React.ReactNode                             | undefined  | Optional custom icon     |

### License

MIT
npm package: @raxium/mcp
Description: Maxium UI MCP server with stdio transport
Latest version: 0.1.1

# rui-ark-mcp

一个通过 `stdio` 提供能力的 MCP Server，支持以下工具：

- `list-components`
- `list-examples`
- `get-example`
- `list-documents`
- `get-document`

当前首版仅支持 `framework=vue`。

## 安装与运行

### 本地开发

```bash
pnpm install
pnpm --filter rui-ark-mcp build
pnpm --filter rui-ark-mcp start
```

### 快速验 5 个工具真实返回（Inspector 风格）

```bash
pnpm --filter rui-ark-mcp build
pnpm --filter rui-ark-mcp smoke:inspector
```

该脚本会通过 `stdio` 启动本地 `dist/cli.js`，并按顺序调用：

- `list-components`
- `list-examples`
- `list-documents`
- `get-example`
- `get-document`

输出为每个 tool 的原始 MCP `callTool` 返回，便于快速检查远程/本地回退结果。

### 通过 npx 启动

发布到 npm 后，可直接通过：

```bash
npx rui-ark-mcp
```

## MCP Client 配置（stdio）

```json
{
  "mcpServers": {
    "rui-ark-mcp": {
      "command": "npx",
      "args": ["-y", "rui-ark-mcp"],
      "env": {
        "MCP_REMOTE_BASE_URL": "https://your-api.example.com",
        "MCP_REMOTE_TOKEN": "your-token",
        "MCP_TIMEOUT_MS": "8000",
        "MCP_REMOTE_RETRIES": "1",
        "MCP_REPO_ROOT": "C:/workspace/rui-ark"
      }
    }
  }
}
```

## 远程优先策略

工具执行时按以下顺序查数据：

1. 远程接口（`MCP_REMOTE_BASE_URL`）
2. 本地回退（默认扫描 `MCP_REPO_ROOT/packages/vue/core/src/components`）

返回结果包含 `source` 字段，取值为 `remote` 或 `local`。

## 远程接口约定

默认会使用以下 GET 端点（可通过环境变量覆盖）：

- `MCP_REMOTE_ENDPOINT_LIST_COMPONENTS`，默认 `/mcp/components`
- `MCP_REMOTE_ENDPOINT_LIST_EXAMPLES`，默认 `/mcp/examples`
- `MCP_REMOTE_ENDPOINT_GET_EXAMPLE`，默认 `/mcp/example`
- `MCP_REMOTE_ENDPOINT_LIST_DOCUMENTS`，默认 `/mcp/documents`
- `MCP_REMOTE_ENDPOINT_GET_DOCUMENT`，默认 `/mcp/document`

公共 query 参数：

- `framework`（首版仅 `vue`）
- `componentName`（在 `get-example`、`get-document` 中传入）

响应支持两种格式：

- 直接返回结果数据
- 包一层 `{ "data": ... }` 或 `{ "result": ... }`
npm package: @raxuk/rangeslider-js
Description: lightweight range slider
Author: Raxuk
Latest version: 3.2.5-5

# rangeslider-js

[![Build Status](https://travis-ci.org/stbaer/rangeslider-js.svg?branch=master)](https://travis-ci.org/stbaer/rangeslider-js)
[![Inline docs](http://inch-ci.org/github/stbaer/rangeslider-js.svg?branch=master)](http://inch-ci.org/github/stbaer/rangeslider-js)
[![Dependency Status](https://david-dm.org/stbaer/rangeslider-js.svg)](https://david-dm.org/stbaer/rangeslider-js)

> Simple, fast and lightweight slider, touch friendly

Forked from: https://github.com/stbaer/rangeslider-js

[Docs and Examples](http://stbaer.github.io/rangeslider-js/)

- v1 was based on [rangeslider.js](https://github.com/andreruffert/rangeslider.js), main differences:
    - no jQuery
    - raf to throttle window resize, transform to set the handle position
    - fewer and only basic styles

## Install

`npm i rangeslider-js --save`

## Usage

```html
<input id="slider1" type="range">

<input id="slider2" type="range" min="0" max="5" value="1" step="1">
```

Vertical mode:
```html
<input id="slider1" type="range" class="vertical">
```

```js
import rangesliderJs from 'rangeslider-js'

// single, options via js 
rangesliderJs.create(document.getElementById('slider1'), {min:0, max: 1, value: 0.5, step: 0.1})

// or single, options via html attributes 
rangesliderJs.create(document.getElementById('slider2'))

// or initialize multiple
rangesliderJs.create(document.querySelectorAll('input[type="range"]'))
```

### Options

```js
{
    min: 0,
    max: 100,
    value: 50,
    step: 1,
    vertical: true,
    // callbacks
    onInit: (value, percent, position) => {},
    onSlideStart: (value, percent, position) => {},
    onSlide: (value, percent, position) => {},
    onSlideEnd: (value, percent, position) => {}
}
```

### Events



## Contribute or Report Issue

Pull requests should target the **develop** branch.

For bugs and feature requests, [please create an issue][10].

[10]: https://github.com/stbaer/rangeslider-js/issues

## Licence

MIT, see [LICENSE.md](http://github.com/stbaer/rangeslider-js/blob/master/LICENSE.md) for details.
npm package: @ray-core/babel-preset-remax
Description: remax babel preset
Latest version: 0.4.13

# babel-preset-remax

Babel preset for remax app.

```bash
  yarn add babel-preset-remax --dev
```

## Options

### react

configure react preset. https://babeljs.io/docs/en/babel-preset-react

### typescript

configure typescript preset. https://babeljs.io/docs/en/babel-preset-typescript

### decorators

configure babel proposal decorators. https://babeljs.io/docs/en/babel-plugin-proposal-decorators

### class-properties

configure babel proposal class properties. https://babeljs.io/docs/en/babel-plugin-proposal-class-properties

### throw-if-namespace

configure react preset throwIfNamespace option. https://babeljs.io/docs/en/babel-preset-react#throwifnamespace

```js
{
  presets: [
    [
      'remax',
      {
        react: {
          runtime: 'classic',
        },
        typescript: {
          allowNamespaces: true,
        },
        'class-properties': {
          loose: true,
        },
        decorators: {
          legacy: true,
        },
        'throw-if-namespace': false,
      },
    ],
  ];
}
```
npm package: @ray-core/redbox-react
Description: A redbox (rsod) component to display your errors.
Latest version: 0.4.13

# redbox-react

[![Build Status](https://travis-ci.org/commissure/redbox-react.svg?branch=master)](https://travis-ci.org/commissure/redbox-react)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

The red box (aka red screen of death) renders an error in this “pretty” format:

<img src="http://i.imgur.com/9Jhlibk.png" alt="red screen of death" width="700" />

## Usage

Catch an error and give it to `redbox-react`. Works great with

- [react-transform-catch-errors]
  - [Example][react-transform-example]
  - [react-transform-boilerplate]
- [react-hot-loader]
  - :warning: ️ based on `3.0.0-beta.2`! This depends on `ErrorBoundaries` which
    will likely not land in react! You should probably not use this
    before 3.0.0 comes out.
  - [Example][react-hot-loader-example]
npm package: @ray-d-song/naive-ui-fork
Description: A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast
Author: 07akioni
Latest version: 2.42.0

<p align="center">
  <img width="144px" src="https://naiveui.oss-cn-hongkong.aliyuncs.com/naivelogo.svg" />
</p>

<h1 align="center">Naive UI</h1>
<p align="center">一个 Vue 3 组件库</p>
<p align="center"><b>比较完整，主题可调，使用 TypeScript，快</b></p>
<p align="center">有点意思</p>

<p align="center"><a href="README.md">English</a> | 中文</p>

## 文档

[www.naiveui.com](http://www.naiveui.com)

## 社区

- [Discord](https://discord.gg/Pqv7Mev5Dd)
- 钉钉一群 33482509 (已满)
- 钉钉二群 35886835 (已满)
- 钉钉三群 32377370 (已满)
- 钉钉四群 8165002788 (已满)
- 钉钉五群 31205022250 (已满)
- 钉钉六群 62720001971

- [Awesome Naive UI](https://github.com/naive-ui/awesome-naive)

钉钉群加入方法：在**搜索框**中搜索群号，点击下拉框中更多分组内的**网络查找公开群组**

## 特性

### 比较完整

有超过 90 个组件，希望能帮你少写点代码。

顺便一提，它们全都可以 treeshaking。

### 主题可调

我们提供了一个使用 TypeScript 构建的先进的类型安全主题系统。你只需要提供一个样式覆盖的对象，剩下的都交给我们。

顺便一提，不用 less、sass、css 变量，也不用 webpack 的 loaders。以及你可以试试右下角的主题编辑器。

### 使用 TypeScript

Naive UI 全量使用 TypeScript 编写，和你的 TypeScript 项目无缝衔接。

顺便一提，你不需要导入任何 CSS 就能让组件正常工作。

### 快

我尽力让它不要太慢。至少 select、tree、transfer、table、cascader 都可以用虚拟列表。

顺便一提，...，没有顺便了。祝你使用愉快。

## 安装

### npm

使用 npm 安装。

```bash
npm i -D naive-ui
```

### 字体

```bash
npm i -D vfonts
```

### 图标

naive-ui 建议使用 [xicons](https://www.xicons.org) 作为图标库。

### 设计资源

[Naive UI (Sketch)](https://naive-ui.oss-accelerate.aliyuncs.com/NaiveUI-Design-Library-zh-CN.sketch)

## 贡献

请参考 [CONTRIBUTING.zh-CN.md](https://github.com/tusen-ai/naive-ui/blob/main/CONTRIBUTING.zh-CN.md)

## 许可

Naive UI 使用 [MIT license](https://opensource.org/licenses/MIT) 许可证书。

`result` 组件的图像资源来自于 [Twemoji](https://github.com/twitter/twemoji)，遵守 [CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/) 许可。
npm package: @ray-js/aes-image
Description: AES 加密图片展示组件
Latest version: 0.0.8

English | [简体中文](./README-zh_CN.md)

# @ray-js/aes-image

## Installation

```shell
$ npm install @ray-js/aes-image
# or
$ yarn add @ray-js/aes-image
```

## Props

This component use [Image](https://developer.tuya.com/cn/ray/components/image) which from @ray-js/component as image container, so all of Image props except 'src' can be used.

```typescript
import { ImageProps } from '@ray-js/components/lib/Image/props';
export interface AESImageProps extends Omit<ImageProps, 'src'> {
  /**
   * @description.en AES key
   * @description.zh AES 密码
   */
   encryptKey: string
  /**
   * @description.en Encryption image url
   * @description.zh 加密图片 url
   */
   imagePath?: string

   /**
    * @description.en Base64 encrypt data
    * @description.zh base64 加密数据
    */
   base64Data?: string

   /**
    * @description.en Loading component
    * @description.zh 加载中组件
    */
   loading: React.ComponentType
   
   /**
    * @description.en Placeholder component
    * @description.zh 占位组件
    */
   placeHolder: React.ComponentType
   
   /**
    * @description.en Error component
    * @description.zh 错误组件
    */
   renderError: React.ComponentType<{error: Error}>

    /**
      * @description.en Error callback
      * @description.zh 错误回调
      */
    onError?: (event: GenericEvent) => any;
}

```

## Usage

```jsx
    import { AESImage, decryptImage  } from '@ray/aes-image';

    decryptImage(imagePath, encryptKey).then((result) => {
        //todo: result is decrypted base64 string
        }).catch(error => {
        //todo: decrypt fail
        })
    <AESImage
        imagePath="https://domain/path/to/crypto_image.jpeg" // encrypted image url
        encryptKey="90ac52259387534f" // encrypt key
        style={{ width: 160, height: 160, backgroundColor: 'white' }}
      />
    <AESImage
        encryptKey="OQMpT3obElFmXzBMBGgoPw=="
        base64Data={base64Data}
        style={{ width: '300px', height: '200px' }}
    />
```
npm package: @ray-js/alipay-ap-sdk
Description: 支付宝ap配网sdk
Latest version: 1.0.6

## 支付宝wifi设备配网SDK使用说明

本文介绍了涂鸦 IoT 支付宝小程序AP-SDK，该 SDK 提供了一些UDP及WiFi模块功能性封装，方便支付宝小程序开发者更加快速地连接涂鸦生态中的智能硬件产品。您可以基于该 SDK 快速实现支付宝小程序环境下的wifi设备配网。

### AP SDK

该 SDK 基于局域网协议提供高度封装的 API，方便小程序开发者快速实现支付宝小程序环境下WiFi设备配网。

#### 安装SDK

使用npm包管理器下载SDK：

```
npm install @ray-js/alipay-ap-sdk
```

#### API调用

##### TuyaAPCloud

##### 引入

```
import {TuyaAPCloud} from '@ray-js/alipay-ap-sdk'
```

TuyaAPCloud是一个实例对象，该实例维护了下文所提到的涂鸦服务登录、环境确认、wifi信息提交、ap设备配网、停止配网等API。

##### 涂鸦服务登录

TuyaAPCloud.signIn({ticket,clientId})

- 参数说明

| 字段     | 数据类型 | 说明         |
| -------- | -------- | ------------ |
| ticket   | String   | 用户临时票据 |
| clientId | String   | 应用程序id   |
| gid      | String   | 家庭id       |

- 返回值：成功或错误信息

引入SDK后请在全局入口或首页调用此API作为你的SDK鉴权，客户端在进行接口请求时所必须携带的用户鉴权校验信息将通过临时票据进行校验和处理，我们将在SDK内部维护你的用户鉴权并在请求时主动塞入。

注意：同一个ticket无法二次消费调用。

##### 环境确认

TuyaAPCloud.checkWeappEnv(wifiName)

- 参数说明

| 字段     | 数据类型 | 说明                                |
| -------- | -------- | ----------------------------------- |
| wifiName | String   | 设备热点前缀（默认请传'SmartLife'） |

- 返回值：成功或错误信息

校验当前小程序是否为支付宝WiFi环境下。

##### 提交家庭信息

TuyaAPCloud.setApGroup(gid)

- 参数说明

| 字段 | 数据类型 | 说明   |
| ---- | -------- | ------ |
| gid  | String   | 家庭id |

- 返回值：成功或错误信息

提交当前需要配网的家庭信息。

注意：家庭管理员唯一，创建homeid的uid为管理员即owner，仅owner有权限进行设备配网。

##### 提交WiFi信息

TuyaAPCloud.submitWifiInfo({ssid, passwd})

- 参数说明

| 字段   | 数据类型 | 说明     |
| ------ | -------- | -------- |
| Ssid   | String   | WiFi名称 |
| passwd | String   | WiFi密码 |

- 返回值：成功或错误信息

当前WiFi环境下的名称和密码将加密后向云端请求公钥作为后续设备配网发包的部分包体。

##### 设备配网

TuyaAPCloud.distribution(wifiName)

- 参数说明

| 字段     | 数据类型 | 说明                                |
| -------- | -------- | ----------------------------------- |
| wifiName | String   | 设备热点前缀（默认请传'SmartLife'） |

- 返回值：成功或错误信息

再次切换至设备热点后调用进行设备配网，客户端将持续发包并轮训获得配网结果。

##### 停止ap配网

TuyaAPCloud.stopDistribution()

- 返回值：成功卸载

页面卸载时调用，避免socket损耗；停止ap配网，销毁各实例。

##### TuyaRequest

##### 引入

```
import {TuyaRequest} from '@ray-js/alipay-ap-sdk'
```

TuyaRequest是一个请求封装，封装了包括签名、参数和安全处理。

- 调用规则可参考IoT云函数请求文档：https://developer.tuya.com/cn/docs/iot/device-manger?id=K9wj0vb68htna

- 示例：

  ```
  const getDeviceDetail = (device_id) => {
    return TuyaRequest({
      data: { 
      	action: 'device.details', 
        params: { device_id }
      }
    });
  };
  ```

  注意：若文档中传参携带access_token可传空或不传，SDK已在鉴权时维护。
npm package: @ray-js/audit-rate-utils
Description: Utility library with dual CJS and ESM support
Latest version: 1.9.2

# @ray-js/audit-rate-utils

小程序性能评分工具库，提供了一套完整的性能评分机制，支持多种性能指标的评估和打分。

## 功能特性

- 支持 CJS 和 ESM 双模块系统
- 提供多项性能评分指标
- 灵活的评分配置
- 支持自定义评分钩子

## 安装

```bash
npm install @ray-js/audit-rate-utils
```

## 主要评分指标

该工具库支持以下性能指标的评估：

- 图片并发请求检查
- TTT 并发调用检查
- HTTPS 合规性检查
- 启动时间评估
- 页面渲染性能
- 网络请求性能
- 暗黑模式支持
- 多语言使用情况
- 安全区域兼容性
- 包体积检查
- 图片资源优化
- JS 错误日志
- 等等

## 使用方法

```typescript
import { calcAudit } from '@ray-js/audit-rate-utils';

// 计算性能评分
const result = calcAudit(sourceData, {
  // 可选的钩子函数
  onCalcAuditTask: (task) => {
    // 处理单个评分任务结果
  },
  onCalcCategoryiesScore: (categories) => {
    // 处理分类评分结果
  },
  onCalcTotalScore: (total) => {
    // 处理总评分结果
  }
});
```

## API 说明

### calcAudit(sourceData, hooks?)

主要评分函数，用于计算小程序的综合性能评分。

#### 参数

- `sourceData`: 评分所需的原始数据
- `hooks`: 可选的钩子函数对象
  - `onCalcAuditTask`: 计算单个评分任务时的回调
  - `onCalcCategoryiesScore`: 计算分类评分时的回调
  - `onCalcTotalScore`: 计算总评分时的回调

#### 返回值

返回包含以下信息的评分结果：

- 任务评分详情
- 分类评分
- 总评分和等级

## 许可证

MIT
npm package: @ray-js/badge
Description: 徽标
Latest version: 1.1.0

English | [简体中文](./README-zh_CN.md)

# @ray/ty-badge

[![latest](https://img.shields.io/npm/v/@ray-js/badge/latest.svg)](https://www.npmjs.com/package/@ray-js/badge) [![download](https://img.shields.io/npm/dt/@ray-js/badge.svg)](https://www.npmjs.com/package/@ray-js/badge)

> 徽标

## Installation

```sh
$ npm install @ray-js/badge
# or
$ yarn add @ray-js/badge
```

## Usage

```tsx
import Badge from '@ray-js/badge';
export default () => (
  <Badge content={5}>
    <View className={styles.content} />
  </Badge>
);
```

## Quick Start

```sh
yarn build    # Compile

yarn watch    # Real-time compilation

yarn start:tuya      # Start the Tuya mini
```
npm package: @ray-js/battery
Description: 电池组件
Latest version: 0.0.5

English | [简体中文](./README-zh_CN.md)

# @ray-js/battery

[![latest](https://img.shields.io/npm/v/@ray-js/battery/latest.svg)](https://www.npmjs.com/package/@ray-js/battery) [![download](https://img.shields.io/npm/dt/@ray-js/battery.svg)](https://www.npmjs.com/package/@ray-js/battery)

> Universal battery pack

## Installation

```sh
$ npm install @ray-js/battery
# or
$ yarn add @ray-js/battery
```

## Usage

### Battery Demo

```tsx
import Battery from '@ray-js/battery';

<Battery value={100} />;
```
npm package: @ray-js/brandlist
Description: 品牌选择页，页面级组件
Latest version: 1.0.3

English | [简体中文](./README-zh_CN.md)

# @ray-js/brandlist

> SearchLetterBrand

## Installation

```sh
$ npm install @ray-js/brandlist
# or
$ yarn add @ray-js/brandlist
```

## Usage

```tsx
import SearchLetterBrand from '@ray-js/brandlist';
export default () => (
  <SearchLetterBrand
    countryCode="CN"
    pid="0npnc53d6dzb9jxb"
    vender="3"
    devTypeId={2}
    onPress={item => console.log(item)}
  />
);
```
npm package: @ray-js/circlehandle
Description: 方向盘
Latest version: 1.0.2

English | [简体中文](./README-zh_CN.md)

# @ray-js/circlehandle

> Circlehandle

## Installation

```sh
$ npm install @ray-js/circlehandle
# or
$ yarn add @ray-js/circlehandle
```

## Usage

```tsx
import CircleHandle from '@ray-js/circlehandle';
export default () => (
  <CircleHandle
    onPress={type => console.log('click type:', type)}
    onLongPress={type => console.log('click type:', type)}
    pointColor={{
      top: '#000',
      right: '#000',
      bottom: '#000',
      left: '#000',
    }}
    status={{
      top: true,
      bottom: true,
      left: true,
      right: true,
      center: true,
    }}
    tip={{
      top: 'top',
      right: 'right',
      bottom: 'bottom',
      left: 'left',
    }}
  />
);
```
npm package: @ray-js/components-ty
Description: 涂鸦风格跨端组件库
Latest version: 0.2.0

English | [简体中文](./README-zh_CN.md)

# @ray-js/components-ty

[![latest](https://img.shields.io/npm/v/@ray-js/components-ty/latest.svg)](https://www.npmjs.com/package/@ray-js/components-ty) [![download](https://img.shields.io/npm/dt/@ray-js/components-ty.svg)](https://www.npmjs.com/package/@ray-js/components-ty)

> 涂鸦风格跨端组件库

To provide a superior development experience and more powerful feature support, we recommend switching from the current extension component library to the new [SmartUI Component Library](https://developer.tuya.com/material/smartui?comId=help-getting-started). SmartUI is not only actively maintained but also offers numerous advantages for MiniApp development:

- **Cross-Platform Preview**: Easily view the performance of components across different platforms to ensure consistency and high quality.
- **Online Editing**: Achieve real-time online editing and preview through Codesandbox, accelerating the development process and enhancing efficiency.

## Installation

```sh
$ npm install @ray-js/components-ty
// or
$ yarn add @ray-js/components-ty
```

## Usage

<!--START_SECTION:txp-usage-->
```ts
import { TyDialog, TyTypography, TyAlert, TyPicker, TyTimePicker, TySwipeout, TyInput, TyActionsheet, TyCell, TyPopover, TySlider, TySwitch, TyProgressBar, TyProgressCircle } from '@ray-js/components-ty';
```
<!--END_SECTION:txp-usage-->

**Note:** Some components have child components or methods that need to be invoked through static properties or static methods，e.g. `TyDialog.useDialog`、`TyPopover.Item`、`TyCell.Item`.

## Design

See [MiniProgram UI Specification](https://www.figma.com/file/z6TDUyCo2Q6ov9nhh3guSd/%E5%B0%8F%E7%A8%8B%E5%BA%8FUI%E8%A7%84%E8%8C%83%E5%92%8C%E7%BB%84%E4%BB%B6?node-id=1%3A2483)
npm package: @ray-js/components-ty-actionsheet
Description: 涂鸦风格动作面板
Latest version: 0.0.26

English | [简体中文](./README-zh_CN.md)

# @ray-js/components-ty-actionsheet

[![latest](https://img.shields.io/npm/v/@ray-js/components-ty-actionsheet/latest.svg)](https://www.npmjs.com/package/@ray-js/components-ty-actionsheet) [![download](https://img.shields.io/npm/dt/@ray-js/components-ty-actionsheet.svg)](https://www.npmjs.com/package/@ray-js/components-ty-actionsheet)

> Tuya Style ActionSheet, the client has an API to provide actionsheet. If there is no special customization requirements, it is recommended to give priority to [showActionSheet](https://developer.tuya.com/cn/ray/api/base-kit/show-action-sheet)

## Installation

```sh
$ npm install @ray-js/components-ty-actionsheet
# or
$ yarn add @ray-js/components-ty-actionsheet
```

## Usage

### Hooks

```tsx
import ActionSheet from '@ray-js/components-ty-actionsheet';
import TimerPicker from '@ray-js/components-ty-time-picker';

const [time, setTime] = React.useState({
  hour: new Date().getHours(),
  minute: new Date().getMinutes(),
});

const handleTimeChange = (value: any) => {
  setTime(value);
};

const { modal, setVisible } = ActionSheet.useActionSheet({
  header: '请选择时间',
  content: () => <TimerPicker value={time} onChange={handleTimeChange} />,
});

<>
  <Button onClick={() => setVisible(true)}>选择时间</Button>
  {modal}
</>;
```

### Control State

```tsx
const [visible, setVisible] = React.useState(false);

<ActionSheet
  // overlayCloseable={false}
  show={visible}
  header="Title"
  onCancel={() => setVisible(false)}
>
  <SilderDemo />
</ActionSheet>;
```

### Functional

```tsx
const Popup = ActionSheet.createPopup();

<Button onClick={() =>
  Popup.open({
    header: 'Functional Popup',
    content: (
      <View style={{ padding: 16 }}>
         content
      </View>
    ),
  })
}>Open Popup</Button>

<Popup.Container />
```
npm package: @ray-js/components-ty-alert
Description: 涂鸦风格警告提示组件
Latest version: 0.1.0

English | [简体中文](./README-zh_CN.md)

# @ray-js/components-ty-alert

[![latest](https://img.shields.io/npm/v/@ray-js/components-ty-alert/latest.svg)](https://www.npmjs.com/package/@ray-js/components-ty-alert) [![download](https://img.shields.io/npm/dt/@ray-js/components-ty-alert.svg)](https://www.npmjs.com/package/@ray-js/components-ty-alert)

> 涂鸦风格警告提示组件

## Installation

```sh
$ npm install @ray-js/components-ty-alert
# or
$ yarn add @ray-js/components-ty-alert
```

## Usage

### Basic Usage

```tsx
import Alert from '@ray-js/components-ty-alert';

export default () => <Alert message="Alert message" />;
```

### Three kinds of style

```tsx
import Alert from '@ray-js/components-ty-alert';

export default () => (
  <>
    <Alert type="info" message="Alert message" />
    <Alert type="warning" message="Alert message" />
    <Alert type="error" message="Alert message" />
  </>
);
```

### Custom Content

```tsx
import Alert from '@ray-js/components-ty-alert';

export default () => (
  <Alert
    type="info"
    message={
      <>
        <Text className={styles.text}>
          如果是家中常住成员，建议您将他设为家庭成员，共享家中所有设备和智能场景。
        </Text>
        <Button type="default" size="mini" onClick={handleClick}>
          家庭设置
        </Button>
      </>
    }
  />
);
```

### Custom Icon

```tsx
import Alert from '@ray-js/components-ty-alert';
import Icon from '@ray-js/components';

export default () => (
  <>
    <Alert
      showIcon
      type="info"
      message="如果是家中常住成员，建议您将他设为家庭成员，共享家中所有设备和智能场景。"
    />
    <Alert
      showIcon
      icon={<Icon type="icon-wifi" size={16} color="#83abff" />}
      type="warning"
      message="如果是家中常住成员，建议您将他设为家庭成员，共享家中所有设备和智能场景。"
    />
  </>
);
```
npm package: @ray-js/components-ty-config-provider
Description: 可以使用js设置组件主题色
Latest version: 0.0.10

English | [简体中文](./README-zh_CN.md)

# @ray-js/components-ty-config-provider

[![latest](https://img.shields.io/npm/v/@ray-js/components-ty-config-provider/latest.svg)](https://www.npmjs.com/package/@ray-js/components-ty-config-provider) [![download](https://img.shields.io/npm/dt/@ray-js/components-ty-config-provider.svg)](https://www.npmjs.com/package/@ray-js/components-ty-config-provider)

> Config Provider.

## Installation

```sh
$ npm install @ray-js/components-ty-config-provider
# or
$ yarn add @ray-js/components-ty-config-provider
```

## Usage

```tsx
import ConfigProvider, { useConfig } from '@ray-js/components-ty-config-provider';

const Button = () => {
  const config = useConfig();
  return <View style={{ background: config?.global?.background }}>Click</View>;
};

export default () => (
  <ConfigProvider config={{ global: { background: 'blue' } }}>
    <Button />
  </ConfigProvider>
);
```
npm package: @ray-js/components-ty-empty
Description: 空页面
Latest version: 0.0.3

English | [简体中文](./README-zh_CN.md)

# @ray/components-ty-empty

[![latest](https://img.shields.io/npm/v/@ray/components-ty-empty/latest.svg)](https://www.npmjs.com/package/@ray/components-ty-empty) [![download](https://img.shields.io/npm/dt/@ray/components-ty-empty.svg)](https://www.npmjs.com/package/@ray/components-ty-empty)

> 空页面

## Installation

```sh
$ npm install @ray/components-ty-empty
# or
$ yarn add @ray/components-ty-empty
```

## Usage

```tsx
import Empty from '@ray/components-ty-empty';

<Empty title="标题" subTitle="服务器异常" type="serverError" />
```
npm package: @ray-js/components-ty-input
Description: 涂鸦风格输入框
Latest version: 0.0.5

English | [简体中文](./README-zh_CN.md)

# @ray-js/components-ty-input

[![latest](https://img.shields.io/npm/v/@ray-js/components-ty-input/latest.svg)](https://www.npmjs.com/package/@ray-js/components-ty-input) [![download](https://img.shields.io/npm/dt/@ray-js/components-ty-input.svg)](https://www.npmjs.com/package/@ray-js/components-ty-input)

> Tuya Style Input

## Installation

```sh
$ npm install @ray-js/components-ty-input
# or
$ yarn add @ray-js/components-ty-input
```

## Usage

```tsx
import Input from '@ray-js/components-ty-input';

const [value, setValue] = useState('2000');

<Input placeholder="Input" value={value} onInput={e => setValue(e.value)} addonAfter="W" />;
```
npm package: @ray-js/components-ty-ipc
Description: IPC业务组件聚合包
Latest version: 2.2.4

English | [简体中文](./README-zh_CN.md)

# @ray-js/components-ty-ipc

> IPC业务组件聚合包

## Installation

```sh
$ npm install @ray-js/components-ty-ipc
// or
$ yarn add @ray-js/components-ty-ipc
```

## Usage

<!--START_SECTION:txp-usage-->
```ts
import { IpcPlayer } from '@ray-js/components-ty-ipc';
```
<!--END_SECTION:txp-usage-->
npm package: @ray-js/components-ty-keyboard
Description: 门锁自定义数字键盘
Latest version: 1.0.4

English | [简体中文](./README-zh_CN.md)


# @ray-js/components-ty-keyboard

[![latest](https://img.shields.io/npm/v/@ray-js/components-ty-keyboard/latest.svg)](https://www.npmjs.com/package/@ray-js/components-ty-keyboard) [![download](https://img.shields.io/npm/dt/@ray-js/components-ty-keyboard.svg)](https://www.npmjs.com/package/@ray-js/components-ty-keyboard)

> Customize the numeric keyboard

## Installation

```sh
$ npm install @ray-js/components-ty-keyboard
// or
$ yarn add @ray-js/components-ty-keyboard
```

## Usage

### CustomKeyboard Demo

```tsx
import CustomKeyboard from '@ray-js/components-ty-keyboard';

    <CustomKeyboard
        inputContainerStyle={{
          marginLeft: '56rpx',
          marginTop: '16rpx',
          marginBottom: '56rpx'
        }}
        onChange={(value) => console.log('onChange value =====>', value)}
        onConfirm={(value) => console.log('onConfirm value ====>', value)}
      />;
```
npm package: @ray-js/components-ty-lamp
Description: 照明业务组件聚合包
Latest version: 2.0.4

English | [简体中文](./README-zh_CN.md)

# @ray-js/components-ty-lamp

> 照明业务组件聚合包

## Installation

```sh
$ npm install @ray-js/components-ty-lamp
// or
$ yarn add @ray-js/components-ty-lamp
```

## Usage

<!--START_SECTION:txp-usage-->
```ts
import { LampPercentSlider, LampColorCollection, LampRhythmCircle, LampColorCard, LampTouchSlider, LampRectPickerColor, LampCirclePicker, LampCirclePickerColor, LampStripLightSmear, LampMusicCard, LampModuleSchedule, LampColorWheel, LampVerticalPercentSlider, LampVerticalTouchSlider, LampStyleSlider, LampBrightSlider, LampTempSlider, LampSaturationSlider, LampColorSlider, LampRectWhitePicker, LampHuePicker, LampCirclePickerWhite, TySlider } from '@ray-js/components-ty-lamp';
```
<!--END_SECTION:txp-usage-->
npm package: @ray-js/components-ty-loading
Description: Tuya Ray Loading
Latest version: 0.1.1

English | [简体中文](./README-zh_CN.md)

# @ray-js/components-ty-loading

[![latest](https://img.shields.io/npm/v/@ray-js/components-ty-loading/latest.svg)](https://www.npmjs.com/package/@ray-js/components-ty-loading) [![download](https://img.shields.io/npm/dt/@ray-js/components-ty-loading.svg)](https://www.npmjs.com/package/@ray-js/components-ty-loading)

> Tuya Ray Loading

## Installation

```sh
$ npm install @ray-js/components-ty-loading
# or
$ yarn add @ray-js/components-ty-loading
```

## Usage

### Basic Usage

```tsx
import React from 'react';
import { View, Text } from '@ray-js/components';
import Loading from '@ray-js/components-ty-loading';

export default function Home() {
  return (
    <View>
      <Loading />
    </View>
  );
}
```

### Custom Color

```tsx
import React from 'react';
import { View, Text } from '@ray-js/components';
import Loading from '@ray-js/components-ty-loading';

export default function Home() {
  return (
    <View>
      <Loading color="red" />
    </View>
  );
}
```

### Custom Size

```tsx
import React from 'react';
import { View, Text } from '@ray-js/components';
import Loading from '@ray-js/components-ty-loading';

export default function Home() {
  return (
    <View>
      <Loading size="100rpx" />
    </View>
  );
}
```
npm package: @ray-js/components-ty-perf-text
Description: 用于Slider实时拖动显示数值
Latest version: 0.0.9

English | [简体中文](./README-zh_CN.md)

# @ray-js/components-ty-perf-text

[![latest](https://img.shields.io/npm/v/@ray-js/components-ty-perf-text/latest.svg)](https://www.npmjs.com/package/@ray-js/components-ty-perf-text) [![download](https://img.shields.io/npm/dt/@ray-js/components-ty-perf-text.svg)](https://www.npmjs.com/package/@ray-js/components-ty-perf-text)

> Used for slider real -time drag display value

Introduce articles：https://www.tuyaos.com/viewtopic.php?t=3413

## Installation

```sh
$ npm install @ray-js/components-ty-perf-text
# or
$ yarn add @ray-js/components-ty-perf-text
```

## Develop

```sh
# watch compile component code
yarn watch
# watch compile demo
yarn start:tuya
```

## Usage

```tsx
import PerfText from '@ray-js/components-ty-perf-text';
import Slider from '@ray-js/components-ty-slider';

function App() {
  return (
    <View>
      <View style={{ marginBottom: 48 }}>
        Value：
        <PerfText eventName="sliderMove" />%
      </View>
      <Slider moveEventName="sliderMove" />
    </View>
  );
}
```
npm package: @ray-js/components-ty-picker
Description: 涂鸦风格选择器
Latest version: 0.1.5

English | [简体中文](./README-zh_CN.md)

# @ray-js/components-ty-picker

[![latest](https://img.shields.io/npm/v/@ray-js/components-ty-picker/latest.svg)](https://www.npmjs.com/package/@ray-js/components-ty-picker) [![download](https://img.shields.io/npm/dt/@ray-js/components-ty-picker.svg)](https://www.npmjs.com/package/@ray-js/components-ty-picker)

> Tuya picker. Base library version 2.3.0 and above available

## Installation

```sh
$ npm install @ray-js/components-ty-picker
# or
$ yarn add @ray-js/components-ty-picker
```

### Basic Usage

```tsx
import React from 'react';
import TyPicker from '@ray-js/components-ty-picker';

export default function Template() {
  const [value, setValue] = React.useState(0);
  const handleChange = (e: Event) => {
    setValue(e.value);
  };
  return (
    <TyPicker
      dataSource={['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']}
      value={value}
      onChange={handleChange}
    />
  );
}
```

### Two Column

```tsx
import React from 'react';
import TyPicker from '@ray-js/components-ty-picker';

export default function Template() {
  const [value, setValue] = React.useState([0, 1]);
  const handleChange = (e: Event) => {
    setValue(e.value);
  };
  return (
    <TyPicker
      dataSource={[
        ['Brazil', 'China', 'Japan', 'United States'],
        ['orange', 'apple', 'banana', 'watermelon'],
      ]}
      value={value}
      onChange={handleChange}
    />
  );
}
```

### Custom dataSource

```tsx
import { View, Text, Icon } from '@ray-js/components';
import TyPicker from '@ray-js/components-ty-picker';

const IconArr = ['giftfill', 'cloudfogfill', 'moonstarsfill', 'sunhazefill', 'tramfill'];

export default function Template() {
  const [value, setValue] = React.useState(0);
  const handleChange = (e: Event) => {
    setValue(e.value);
  };

  const iconEleMap = IconArr.map(key => (
    <View
      key={key}
      style={{
        width: '100%',
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        whiteSpace: 'nowrap',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
      }}
    >
      {/* @ts-ignore */}
      <Icon type={`icon-a-${key}`} size={30} color="#007aff" />
      <Text style={{ marginLeft: '4px' }}>{key}</Text>
    </View>
  ));

  return (
    <TyPicker dataSource={iconEleMap} value={value} onChange={handleChange} />;
  );
}
```
npm package: @ray-js/components-ty-popover
Description: 涂鸦风格气泡卡片组件
Latest version: 0.1.0

English | [简体中文](./README-zh_CN.md)

# @ray-js/components-ty-popover

[![latest](https://img.shields.io/npm/v/@ray-js/components-ty-popover/latest.svg)](https://www.npmjs.com/package/@ray-js/components-ty-popover) [![download](https://img.shields.io/npm/dt/@ray-js/components-ty-popover.svg)](https://www.npmjs.com/package/@ray-js/components-ty-popover)

> 涂鸦风格气泡卡片组件

## Installation

```sh
$ npm install @ray-js/components-ty-popover
# or
$ yarn add @ray-js/components-ty-popover
```

## Usage

### Basic Usage

```tsx
import React from 'react';
import Popover from '@ray-js/components-ty-popover';

const [visibleBase, setVisibleBase] = React.useState(false);

const contentBase = (
  <View>
    <Text style={{ fontSize: '30rpx' }}>Hi!</Text>
  </View>
);

const handleClickBase = () => {
  setVisibleBase(!visibleBase);
};

<Popover visible={visibleBase} content={contentBase} placement="right">
  <View className={styles.demoBtn} onClick={handleClickBase}>
    右侧
  </View>
</Popover>;
```

### PopoverItem-Without Icon

```tsx
import React from 'react';
import Popover from '@ray-js/components-ty-popover';

const [visibleItem, setVisibleItem] = React.useState(false);

const handleClickItem = () => {
  setVisibleItem(!visibleItem);
};

const contentItem = (
  <View>
    <Popover.Item onItemClick={handleTap} text="文案一" />
    <Popover.Item disabled text="文案二" />
    <Popover.Item text="文案三" />
  </View>
);

<Popover visible={visibleItem} content={contentItem} placement="bottom-left">
  <View className={styles.demoBtn} onClick={handleClickItem}>
    无图标
  </View>
</Popover>
```
npm package: @ray-js/components-ty-popup
Description: 弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。
Latest version: 2.0.0

English | [简体中文](./README-zh_CN.md)

# @ray-js/components-ty-popup

[![latest](https://img.shields.io/npm/v/@ray-js/components-ty-popup/latest.svg)](https://www.npmjs.com/package/@ray-js/components-ty-popup) [![download](https://img.shields.io/npm/dt/@ray-js/components-ty-popup.svg)](https://www.npmjs.com/package/@ray-js/components-ty-popup)

> Popup container for displaying modals, information prompts, and other content. It supports stacking multiple popups for display.

To provide a better development experience and more powerful features, we recommend switching from the current component to the new [SmartUI Component Library](https://developer.tuya.com/material/smartui?comId=help-getting-started), which includes a built-in Popup component. SmartUI is not only actively maintained but also offers numerous advantages for applet development:

- **Cross-Platform Preview**: Easily view component performance across different platforms to ensure consistency and high quality.
- **Online Editing**: Achieve real-time online editing and preview through Codesandbox, accelerating the development process and improving efficiency.


## Installation

```sh
$ npm install @ray-js/components-ty-popup
# or
$ yarn add @ray-js/components-ty-popup
```

## Usage

```tsx
import Foo from '@ray-js/components-ty-popup';
export default () => <Foo />;
```

### Basic Usage

```tsx
import React, { useState } from 'react';
import Popup from '@ray-js/components-ty-popup';
import { View, Button } from '@ray-js/ray';

export default function Demo() {
  const [show, setShow] = useState(false);

  return (
    <View>
      <Popup
        show={show}
        onClickOverlay={() => setShow(false)}
        position="bottom"
        round
        customStyle={{
          height: '30%',
          width: '100%',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        Content
      </Popup>
      <Button type="primary" onClick={() => setShow(true)}>
        Show Popup
      </Button>
    </View>
  );
}
```
npm package: @ray-js/components-ty-progress-bar
Description: 涂鸦风格进度条
Latest version: 0.1.1

English | [简体中文](./README-zh_CN.md)

# @ray-js/components-ty-progress-bar

[![latest](https://img.shields.io/npm/v/@ray-js/components-ty-progress-bar/latest.svg)](https://www.npmjs.com/package/@ray-js/components-ty-progress-bar) [![download](https://img.shields.io/npm/dt/@ray-js/components-ty-progress-bar.svg)](https://www.npmjs.com/package/@ray-js/components-ty-progress-bar)

> 涂鸦风格进度条

## Installation

```sh
$ npm install @ray-js/components-ty-progress-bar
# or
$ yarn add @ray-js/components-ty-progress-bar
```

## Usage

```tsx
import ProgressBar from '@ray-js/components-ty-progress-bar';
export default () => <ProgressBar />;
```

### Base Usage

```jsx
<ProgressBar percent={20} />
```

### Specify Line Height

```jsx
<ProgressBar percent={40} height="8px" />
```

### Specify Line Width

```jsx
<ProgressBar percent={70} width="40%" />
```

### Specify Color

```jsx
<ProgressBar
  style={{ marginBottom: '18rpx' }}
  percent={70}
  fillColor="linear-gradient(to right, #FA709A 0%, #FEDD44 100%)"
/>
```
npm package: @ray-js/components-ty-progress-circle
Description: 涂鸦风格圆形进度条
Latest version: 0.1.6

English | [简体中文](./README-zh_CN.md)

# @ray-js/components-ty-progress-circle

[![latest](https://img.shields.io/npm/v/@ray-js/components-ty-progress-circle/latest.svg)](https://www.npmjs.com/package/@ray-js/components-ty-progress-circle) [![download](https://img.shields.io/npm/dt/@ray-js/components-ty-progress-circle.svg)](https://www.npmjs.com/package/@ray-js/components-ty-progress-circle)

> 涂鸦风格圆形进度条

## Installation

```sh
$ npm install @ray-js/components-ty-progress-circle
# or
$ yarn add @ray-js/components-ty-progress-circle
```

## Usage

```tsx
import ProgressCircle from '@ray-js/components-ty-progress-circle';
export default () => <ProgressCircle />;
```

### Base Usage

```jsx
<ProgressCircle percent={percent} />
```

### Color Gradient

```jsx
<ProgressCircle percent={percent} fillColor="linear-gradient(90deg, #FA709A 0%, #FEDD44 100%)" />
```

### Countdown

```jsx
<ProgressCircle percent={percent} fillColor="linear-gradient(90deg, #FA709A 0%, #FEDD44 100%)">
  <Text>{percent}%</Text>
</ProgressCircle>
```

### Custom Track

```jsx
<ProgressCircle
  percent={percent}
  trackColor="#000000"
  trackWidth="5px"
  fillColor="linear-gradient(90deg, #FA709A 0%, #FEDD44 100%)"
>
  <Text>{percent}%</Text>
</ProgressCircle>
```
npm package: @ray-js/components-ty-swipeout
Description: 涂鸦风格侧滑
Latest version: 0.0.18

English | [简体中文](./README-zh_CN.md)

# @ray-js/components-ty-swipeout

> Tuya Style Swipeout

## Installation

```sh
$ npm install @ray-js/components-ty-swipeout
# or
$ yarn add @ray-js/components-ty-swipeout
```

## Usage

```tsx
import { Icon, View } from '@ray-js/components';
import TyCell from '@ray-js/components-ty-cell';
import Swipeout from '@ray-js/components-ty-swipeout';

<Swipeout
  autoClose
  right={[
    {
      text: 'Action',
      onPress: () => console.log('Action3'),
      style: { backgroundColor: 'red', color: 'white' },
    },
  ]}
>
  <TyCell.Item
    className={styles.title}
    title={
      <>
        <Icon type="icon-a-sunmaxfill" size={24} color="#2B7AFF" />
        Left
      </>
    }
  />
</Swipeout>;
```

### Swipeout.Group

only one swipeout active at same time.

```tsx
<Swipeout.Group>
  <Swipeout
    autoClose
    right={[
      {
        text: 'Action',
        onPress: () => console.log('Action3'),
        style: { backgroundColor: 'red', color: 'white' },
      },
    ]}
  >
    <TyCell.Item
      className={styles.title}
      title={
        <>
          <Icon type="icon-a-sunmaxfill" size={24} color="#2B7AFF" />
          Left
        </>
      }
    />
  </Swipeout>
  ;
  <Swipeout
    autoClose
    right={[
      {
        text: 'Action',
        onPress: () => console.log('Action3'),
        style: { backgroundColor: 'red', color: 'white' },
      },
    ]}
  >
    <TyCell.Item
      className={styles.title}
      title={
        <>
          <Icon type="icon-a-sunmaxfill" size={24} color="#2B7AFF" />
          Right
        </>
      }
    />
  </Swipeout>
  ;
</Swipeout.Group>
```
npm package: @ray-js/components-ty-switch
Description: 涂鸦风格开关
Latest version: 0.1.2-beta-3

English | [简体中文](./README-zh_CN.md)

# @ray-js/components-ty-switch

[![latest](https://img.shields.io/npm/v/@ray-js/components-ty-switch/latest.svg)](https://www.npmjs.com/package/@ray-js/components-ty-switch) [![download](https://img.shields.io/npm/dt/@ray-js/components-ty-switch.svg)](https://www.npmjs.com/package/@ray-js/components-ty-switch)

> 涂鸦风格开关

## Installation

```sh
$ npm install @ray-js/components-ty-switch
# or
$ yarn add @ray-js/components-ty-switch
```

## Usage

```tsx
import Switch from '@ray-js/components-ty-switch';
export default () => <Switch />;
```
npm package: @ray-js/components-ty-tabbar
Description:  涂鸦风格 Tabbar
Latest version: 0.1.0

English | [简体中文](./README-zh_CN.md)

# @ray-js/components-ty-tabbar

[![latest](https://img.shields.io/npm/v/@ray-js/components-ty-tabbar/latest.svg)](https://www.npmjs.com/package/@ray-js/components-ty-tabbar) [![download](https://img.shields.io/npm/dt/@ray-js/components-ty-tabbar.svg)](https://www.npmjs.com/package/@ray-js/components-ty-tabbar)

> 涂鸦风格 Tabbar

## Installation

```sh
$ npm install @ray-js/components-ty-tabbar
# or
$ yarn add @ray-js/components-ty-tabbar
```

## Usage

### Basic Usage

```tsx
import Tabbar from '@ray-js/components-ty-tabbar';
export default () => {
  return (
    <Tabbar>
      <Tabbar.TabItem icon={<Icon type="icon-a-sunmaxfill" />}>标签</Tabbar.TabItem>
      <Tabbar.TabItem icon={<Icon type="icon-a-cloudhailfill" />}>标签</Tabbar.TabItem>
      <Tabbar.TabItem icon={<Icon type="icon-a-cloudsunrainfill" />}>标签</Tabbar.TabItem>
      <Tabbar.TabItem icon={<Icon type="icon-a-moonstarsfill" />}>标签</Tabbar.TabItem>
    </Tabbar>
  );
};
```
npm package: @ray-js/components-ty-theme-provider
Description: 可以使用js设置组件主题色
Latest version: 0.0.3
Deprecated: please use @ray-js/components-ty-config-provider instead

English | [简体中文](./README-zh_CN.md)

# @ray-js/components-ty-theme-provider

[![latest](https://img.shields.io/npm/v/@ray-js/components-ty-theme-provider/latest.svg)](https://www.npmjs.com/package/@ray-js/components-ty-theme-provider) [![download](https://img.shields.io/npm/dt/@ray-js/components-ty-theme-provider.svg)](https://www.npmjs.com/package/@ray-js/components-ty-theme-provider)

> Theme Config Provider.

## Installation

```sh
$ npm install @ray-js/components-ty-theme-provider
# or
$ yarn add @ray-js/components-ty-theme-provider
```

## Usage

```tsx
import Theme, { useTheme } from '@ray-js/components-ty-theme-provider';

const Button = () => {
  const theme = useTheme()
  return <View style={{ background: theme?.global?.background }}>Click</View>
}

export default () => <Theme theme={{ background: 'blue' }}>
  <Button />
</Theme>
```
npm package: @ray-js/components-ty-typography
Description: Tuya typography component
Latest version: 0.0.11

English | [简体中文](./README-zh_CN.md)

# @ray/components-ty-typography

> tuya Typography

## Installation

```sh
$ npm install @ray/components-ty-typography
// or
$ yarn add @ray/components-ty-typography
```

## Usage

```less
// index.module.less
:root {
  --rayui-native-color-B1: #f6f7fb; /* 背景色 */
}

:root[theme='dark'] {
  --rayui-native-color-B1: #000000; /* 背景色 */
}

.view {
  color: brown;
  padding: 16px;
  background-color: var(--rayui-native-color-B1);
}

.text {
  display: block;
  margin-bottom: 16px;
}
```

### Basic Usage

```tsx
import Typography from '@ray/components-ty-typography';

<Typography text='标题28' type='title' size={28} className={styles.text} />
<Typography text='标题24' type='title' size={24} className={styles.text} />
<Typography text='标题22' type='title' size={22} className={styles.text} />
<Typography text='标题20' type='title' size={20} className={styles.text} />
<Typography text='标题18' type='title' size={18} className={styles.text} />
<Typography text='标题17' type='title' size={17} className={styles.text} />
<Typography text='标题16' type='title' size={16} className={styles.text} />

<Typography text='正文17' type='body' size={17} className={styles.text} />
<Typography text='正文16' type='body' size={16} className={styles.text} />
<Typography text='正文15' type='body' size={15} className={styles.text} />
<Typography text='正文14' type='body' size={14} className={styles.text} />

<Typography text='说明14' type='caption' size={14} className={styles.text} />
<Typography text='说明13' type='caption' size={13} className={styles.text} />
<Typography text='说明12' type='caption' size={12} className={styles.text} />
<Typography text='说明11' type='caption' size={11} className={styles.text} />
```

### Customize color、type

```tsx
<Typography
  text='标题28,color:red'
  type='title'
  size={28}
  color='red'
  className={styles.text}
/>
```

### Customize style

```tsx
<Typography
  text='标题28,color:red,style{color: blue,fontSize:50}'
  type='title'
  size={28}
  color='red'
  style={{
    color: 'blue',
    fontSize: '13px',
  }}
  className={styles.text}
/>
```
npm package: @ray-js/controll-bar
Description: 控制栏
Latest version: 0.0.1

English | [简体中文](./README-zh_CN.md)

# @ray-js/controll-bar

[![latest](https://img.shields.io/npm/v/@ray-js/controll-bar/latest.svg)](https://www.npmjs.com/package/@ray-js/controll-bar) [![download](https://img.shields.io/npm/dt/@ray-js/controll-bar.svg)](https://www.npmjs.com/package/@ray-js/controll-bar)

> 控制栏

## Installation

```sh
$ npm install @ray-js/controll-bar
# or
$ yarn add @ray-js/controll-bar
```

## Usage

```tsx
import Foo from '@ray-js/controll-bar';
export default () => <Foo />;
```
npm package: @ray-js/delay-loading
Description: 默认300ms延迟显示loading
Latest version: 0.0.2

English | [简体中文](./README-zh_CN.md)

# @ray/delay-loading

[![latest](https://img.shields.io/npm/v/@ray/delay-loading/latest.svg)](https://www.npmjs.com/package/@ray/delay-loading) [![download](https://img.shields.io/npm/dt/@ray/delay-loading.svg)](https://www.npmjs.com/package/@ray/delay-loading)

> 默认 300ms 延迟显示 loading

## Installation

```sh
$ npm install @ray/delay-loading
# or
$ yarn add @ray/delay-loading
```

## Develop

```sh
# install deps
yarn

# watch compile demo
yarn start:tuya
```

## Usage

```tsx
import DelayLoading from '@ray/delay-loading';

export default () => (

    const [isShow, setIsShow] = useState(true);

    return (
        <DelayLoading
            isShow={isShow}
            timeout={3000}
            // loadingView={
            //   <View>
            //     <View>111</View>
            //     <View>222</View>
            //   </View>
            // }
            loadingText={<View style={{ marginTop: 20 }}>正在努力加载中…</View>}
        >
            <View>请求完成</View>
        </DelayLoading>
    )
);
```
npm package: @ray-js/direction-control
Description: Ray方向组件-支持4向、8向、360度方向控制
Author: 罗恩（苏博）
Latest version: 0.0.12

English | [简体中文](./README-zh_CN.md)

# @ray-js/direction-control

[![latest](https://img.shields.io/npm/v/@ray-js/direction-control/latest.svg)](https://www.npmjs.com/package/@ray-js/direction-control) [![download](https://img.shields.io/npm/dt/@ray-js/direction-control.svg)](https://www.npmjs.com/package/@ray-js/direction-control)

> 支持4向、8向、360度控制

## Installation

```sh
$ npm install @ray-js/direction-control
# or
$ yarn add @ray-js/direction-control
```

## Develop

```sh
# install deps
yarn

# watch compile demo
yarn start:tuya
```

## Usage

```tsx
import Foo from '@ray-js/direction-control';
export default () => <Foo />;
```