open-index/open-npm huggingface dataset:
npm package: @srcube-ui/button
Description: 跨 React 与微信小程序的按钮组件。
Latest version: 0.0.1

# @srcube-ui/button

跨 React 与微信小程序的按钮组件。

## 包暴露

- `@srcube-ui/button` / `@srcube-ui/button/style`：基础样式与类型定义
- `@srcube-ui/button/react`：React 组件（`Button`、`ButtonGroup`）
- `@srcube-ui/button/mini`：微信小程序组件（`s-button`、`s-button-group`）

## React 快速上手

```tsx
import { Button, ButtonGroup } from '@srcube-ui/button/react';

function Example() {
  return (
    <div className="space-y-3">
      <Button onTap={() => console.log('tap')} variant="outline">
        Outline
      </Button>
      <Button isLoading="auto" onTap={() => new Promise((r) => setTimeout(r, 800))}>
        Auto Loading
      </Button>

      <ButtonGroup color="primary" radius="md">
        <Button color="danger">Danger</Button>
        <Button>Default</Button>
        <Button isIcon>
          <span className="i-[ion--heart]" />
        </Button>
      </ButtonGroup>
    </div>
  );
}
```

要点：
- 交互事件是 `onTap`（而非原生 `onClick`），支持 `isLoading="auto"` 自动等待 Promise。
- `ButtonGroup` 自动注入圆角/分隔样式，无需额外 class。

## 小程序使用

`page.json` / `index.json` 注册：

```json
{
  "usingComponents": {
    "s-button": "@srcube-ui/button/mini/index",
    "s-button-group": "@srcube-ui/button/mini/button-group/index"
  }
}
```

单独按钮：

```wxml
<s-button class="flex justify-center w-full" bind:tap="handleTap" variant="flat">
  点击
</s-button>
```

按钮组（注意：在小程序里每个 `s-button` 是独立节点，想要等分需要给子项加 `flex` 类）：

```wxml
<s-button-group class="flex justify-center w-full" color="primary" fullWidth="{{true}}">
  <s-button class="flex-1" bind:tap="handleTap" data-label="Left">Left</s-button>
  <s-button class="flex-1" bind:tap="handleTap" data-label="Middle">Middle</s-button>
  <s-button class="flex-1" bind:tap="handleTap" data-label="Right">Right</s-button>
</s-button-group>
```

自动 Loading（绑定事件时通过 `e.detail.wait` 注入 Promise）：

```wxml
<s-button isLoading="auto" bind:tap="handleAsyncTap">提交</s-button>
```

```ts
Page({
  async handleAsyncTap(e) {
    const task = new Promise((resolve) => setTimeout(resolve, 1200));
    e.detail.wait?.(task);
    await task;
  },
});
```

## 可用属性（核心）

- `color`: `default | primary | secondary | success | warning | danger`
- `variant`: `solid | outline | flat | text`
- `size`: `xs | sm | md | lg`
- `radius`: `none | sm | md | lg | full`
- `fullWidth`: `boolean`
- 状态：`isIcon`（去除左右 padding）、`isDisabled`、`isLoading`（`true | false | 'auto'`）

React 与小程序的属性命名保持一致；小程序事件前缀为 `bind:`，React 使用驼峰。
npm package: @srcube-ui/core
Description: 核心能力包：提供 Tailwind 主题插件与 React 侧工具。
Latest version: 0.0.1

# @srcube-ui/core

核心能力包：提供 Tailwind 主题插件与 React 侧工具。

## Exports

- `@srcube-ui/core/theme`：Tailwind 插件（小程序/移动端样式能力）
- `@srcube-ui/core/react`：React 工具（`createContext`）

## Usage

Tailwind 配置示例：

```ts
import { srcubeUI } from '@srcube-ui/core/theme';

export default {
  plugins: [srcubeUI()],
};
```

React 工具示例：

```ts
import { createContext } from '@srcube-ui/core/react';

const [ExampleProvider, useExampleContext] = createContext<{ value: number }>({
  name: 'ExampleContext',
});
```
npm package: @srcube-ui/scrollbox
Description: 跨 React 与微信小程序的滚动容器组件。
Latest version: 0.0.1

# @srcube-ui/scrollbox

跨 React 与微信小程序的滚动容器组件。

## 包暴露

- `@srcube-ui/scrollbox` / `@srcube-ui/scrollbox/style`：基础样式与类型定义
- `@srcube-ui/scrollbox/react`：React 组件（`Scrollbox`）
- `@srcube-ui/scrollbox/mini`：微信小程序组件（`s-scrollbox`）

## React 快速上手

```tsx
import { Scrollbox } from '@srcube-ui/scrollbox/react';

const items = Array.from({ length: 8 }, (_, index) => `Item ${index + 1}`);

function Example() {
  return (
    <div className="h-56">
      <Scrollbox orientation="y" showScrollbar>
        <div className="space-y-3 p-4">
          {items.map((item) => (
            <div
              key={item}
              className="h-12 rounded-xl bg-slate-100 px-4 text-sm font-semibold text-slate-700"
            >
              {item}
            </div>
          ))}
        </div>
      </Scrollbox>
    </div>
  );
}
```

要点：
- 父容器需要明确高度/宽度，否则不会产生滚动区域。
- `orientation` 支持 `y | x | xy`，默认 `y`。
- `hideMasks` 可隐藏遮罩提示，`showScrollbar` 可显式显示滚动条。

## 小程序使用

`page.json` / `index.json` 注册：

```json
{
  "usingComponents": {
    "s-scrollbox": "@srcube-ui/scrollbox/mini/index"
  }
}
```

基础用法：

```wxml
<view class="h-56">
  <s-scrollbox className="h-full rounded-2xl border border-slate-200 bg-white" orientation="y">
    <view class="space-y-3 p-4">
      <view wx:for="{{items}}" wx:key="key" class="h-12 rounded-xl bg-slate-100 px-4 text-sm font-semibold text-slate-700">
        {{item}}
      </view>
    </view>
  </s-scrollbox>
</view>
```

横向滚动（建议子项固定宽度）：

```wxml
<s-scrollbox className="h-28 rounded-2xl border border-slate-200 bg-white" orientation="x">
  <view class="flex gap-3 p-4">
    <view wx:for="{{items}}" wx:key="key" class="inline-flex h-16 w-32 items-center justify-center rounded-xl bg-slate-100 text-sm font-semibold text-slate-700">
      {{item}}
    </view>
  </view>
</s-scrollbox>
```

## 可用属性（核心）

- `orientation`: `y | x | xy`
- `hideMasks`: `boolean`
- `showScrollbar`: `boolean | null`
- 事件：React 使用 `onScroll` / `onScrollToUpper` / `onScrollToLower`，小程序使用 `bind:scroll` / `bind:scrolltoupper` / `bind:scrolltolower`