open-index/open-npm huggingface dataset:
npm package: @sxo/design
Description: Core design tokens and headless logic for SXO Design System.
Author: sxo team
Latest version: 0.1.1

<div align="center">
  <h1>@sxo/design</h1>
  <p><b>The core logic engine and design token foundation for the SXO design system.</b></p>

  <p>
    <a href="https://www.npmjs.com/package/@sxo/design"><img src="https://img.shields.io/npm/v/@sxo/design.svg?style=flat-square" alt="npm version"></a>
    <img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square" alt="license">
    <img src="https://img.shields.io/bundlephobia/minzip/@sxo/design?style=flat-square" alt="bundle size">
    <img src="https://img.shields.io/npm/dm/@sxo/design.svg?style=flat-square" alt="downloads">
  </p>
</div>

---

`@sxo/design` is the heart of the SXO ecosystem. It provides the complex state management, accessibility (A11y), and behavioral logic of UI components without being tied to any specific markup or styling implementation.

## 🧩 The Headless Philosophy

- **Zero Style Coupling**: Logic is completely separated from CSS. Use our atomic engine or your own CSS-in-JS/Sass solutions.
- **Framework Agnostic**: Core logic is written in vanilla TypeScript, making it portable across any framework adaptor.
- **Full Creative Control**: You have 100% control over the rendered HTML structure while we handle the "heavy lifting".
- **Maximum Reusability**: Share complex component behaviors across different projects with entirely different visual identities.

## ✨ Features

- ♿ **A11y First**: Built-in ARIA support and keyboard interaction logic.
- 🛡️ **Type Safe**: First-class TypeScript support for all tokens and logic.
- 📦 **Modular**: Only import the logic you need. Tree-shakable by design.
- 🎨 **Token Driven**: Centralized design tokens for colors, spacing, typography, and more.

## 🚀 Quick Start

### Installation

```bash
pnpm add @sxo/design
```

### 1. Using Headless Logic Hooks

Stateful logic for complex components like Menus, Dialogs, and Comboboxes.

```typescript
import { useAccordion } from '@sxo/design';

// The hook returns state and event handlers, but NO UI components.
const { expandedItems, toggleItem, getHeaderProps, getPanelProps } = useAccordion({
    allowMultiple: true
});
```

### 2. Using Design Tokens

The atomic design language of the system.

```typescript
import { defaultTokens } from '@sxo/design';

// Use as a single source of truth for colors, spacing, etc.
const primaryColor = defaultTokens.color.primary.DEFAULT;
```

## 📖 Documentation

For full documentation and examples, visit the [Design Tokens Documentation](https://sxo-engine.pages.dev/zh-CN/guide/tokens.html).

## 📄 License

MIT License.
npm package: @sxo/plugin-uniapp
Description: UniApp adaptor for SXO Design System.
Author: sxo team
Latest version: 0.1.1

<div align="center">
  <h1>@sxo/uniapp</h1>
  <p><b>UniApp (Mini Program & App) implementation of the SXO design system.</b></p>

  <p>
    <a href="https://www.npmjs.com/package/@sxo/uniapp"><img src="https://img.shields.io/npm/v/@sxo/uniapp.svg?style=flat-square" alt="npm version"></a>
    <img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square" alt="license">
    <img src="https://img.shields.io/npm/dm/@sxo/uniapp.svg?style=flat-square" alt="downloads">
  </p>
</div>

---

`@sxo/uniapp` is an adaptor specifically designed for the UniApp ecosystem (Mini Programs, APP, H5). It resolves various display and interaction anomalies of standard Web components in restricted environments like WeChat Mini Programs.

## ✨ Key Features

- 🚀 **Compile-time Optimization**: Runtime style scanning is removed. All atomic classes are generated by `vite-plugin-sxo` during the build phase.
- 🎨 **Mini Program Compatibility**: Fixes icon rendering (Data URI conversion), button border reset, and `scroll-view` height collapse for Mini Programs.
- 📦 **Lightweight Implementation**: Special redundant code for Web is removed, focusing on UniApp's cross-platform capabilities.
- 🛡️ **Type Safe**: Inherits full TypeScript definitions from the SXO ecosystem.

## 🚀 Quick Start

### Installation

```bash
pnpm add @sxo/uniapp @sxo/theme-antd @sxo/design
```

### 1. Register the Plugin (main.ts)

```typescript
import { createSSRApp } from 'vue';
import { createSxo } from '@sxo/uniapp';
import { antdTheme } from '@sxo/theme-antd';
import App from './App.vue';
import 'virtual:sxo.css'; // Must import styles generated during compilation

export function createApp() {
  const app = createSSRApp(App);
  app.use(createSxo({ theme: antdTheme }));
  return { app };
}
```

### 2. Basic Usage

```vue
<template>
  <view class="p-4">
    <SxoIcon name="Link2" color="#228AFF" size="48rpx" />
    <text>Hello SXO UniApp!</text>
  </view>
</template>

<script setup lang="ts">
import { SxoIcon } from '@sxo/uniapp';
</script>
```

## 📄 License

MIT License.
npm package: @sxo/react
Description: React adaptor for SXO Design System.
Author: sxo team
Latest version: 0.1.1

<div align="center">
  <h1>@sxo/react</h1>
  <p><b>React implementation of the SXO design system, powered by Headless UI principles.</b></p>

  <p>
    <a href="https://www.npmjs.com/package/@sxo/react"><img src="https://img.shields.io/npm/v/@sxo/react.svg?style=flat-square" alt="npm version"></a>
    <img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square" alt="license">
    <img src="https://img.shields.io/bundlephobia/minzip/@sxo/react?style=flat-square" alt="bundle size">
    <img src="https://img.shields.io/npm/dm/@sxo/react.svg?style=flat-square" alt="downloads">
  </p>
</div>

---

`@sxo/react` provides a set of robust, accessible, and highly customizable React components built on the foundation of the SXO design system.

## ✨ Key Features

- 🧩 **Headless Power**: Leverages `@sxo/design` logic hooks for complex behaviors.
- 🎨 **Atomic Styling**: Consumes `@sxo/ui` generators for consistent visual language.
- ⚡ **Framework Native**: Optimized for React's reconciliation and hook system.
- ♿ **Accessible**: Built-in ARIA support and keyboard interaction.
- 🛡️ **Type Safe**: First-class TypeScript support for props and state.

## 🚀 Quick Start

### Installation

```bash
pnpm add @sxo/react @sxo/ui @sxo/engine @sxo/design
```

### Basic Usage

Use our pre-built components for rapid development.

```tsx
import { Button, SxoProvider } from '@sxo/react';
import antdTheme from '@sxo/theme-antd';

function App() {
  return (
    <SxoProvider tokens={antdTheme}>
      <Button variant="primary" onClick={() => console.log('Clicked!')}>
        Click Me
      </Button>
    </SxoProvider>
  );
}
```

### The Headless Way

Build your own components using our underlying logic hooks.

```tsx
import { useAccordion } from '@sxo/react';

function CustomAccordion() {
  const { expandedItems, toggleItem } = useAccordion({ allowMultiple: false });

  return (
    <div className="custom-accordion">
      <button onClick={() => toggleItem('item-1')}>Toggle Item 1</button>
      {expandedItems.includes('item-1') && <div>Content 1</div>}
    </div>
  );
}
```

## 📖 Documentation

For full documentation and examples, visit the [React Adaptor Documentation](https://sxo-engine.pages.dev/zh-CN/adaptors/react.html).

## 📄 License

MIT License.
npm package: @sxo/solid
Description: SolidJS adaptor for SXO Design System.
Author: sxo team
Latest version: 0.1.1

<div align="center">
  <h1>@sxo/solid</h1>
  <p><b>SolidJS implementation of the SXO design system, built for speed and fine-grained reactivity.</b></p>

  <p>
    <a href="https://www.npmjs.com/package/@sxo/solid"><img src="https://img.shields.io/npm/v/@sxo/solid.svg?style=flat-square" alt="npm version"></a>
    <img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square" alt="license">
    <img src="https://img.shields.io/bundlephobia/minzip/@sxo/solid?style=flat-square" alt="bundle size">
    <img src="https://img.shields.io/npm/dm/@sxo/solid.svg?style=flat-square" alt="downloads">
  </p>
</div>

---

`@sxo/solid` brings the power of the SXO design system to SolidJS, combining high-performance fine-grained reactivity with robust headless logic.

## ✨ Key Features

- 🧩 **Headless Logic**: Integrated with `@sxo/design` logic for state management.
- ⚡ **High Performance**: Optimized for SolidJS's fine-grained reactivity system.
- 🎨 **Atomic Styling**: Seamlessly integrates with `@sxo/ui` generators.
- ♿ **Accessible**: Built-in ARIA support and keyboard interaction.
- 🛡️ **Type Safe**: Full TypeScript support.

## 🚀 Quick Start

### Installation

```bash
pnpm add @sxo/solid @sxo/ui @sxo/engine @sxo/design
```

### Basic Usage

```tsx
import { Button, SxoProvider } from '@sxo/solid';
import antdTheme from '@sxo/theme-antd';

function App() {
  return (
    <SxoProvider tokens={antdTheme}>
      <Button variant="primary" onClick={() => console.log('Solid SXO!')}>
        Click Me
      </Button>
    </SxoProvider>
  );
}
```

## 📖 Documentation

For full documentation and examples, visit the [SolidJS Adaptor Documentation](https://sxo-engine.pages.dev/zh-CN/adaptors/solid.html).

## 📄 License

MIT License.
npm package: @sxo/svelte
Description: Svelte adaptor for SXO Design System.
Author: sxo team
Latest version: 0.1.1

<div align="center">
  <h1>@sxo/svelte</h1>
  <p><b>Svelte implementation of the SXO design system, offering a native and lightweight experience.</b></p>

  <p>
    <a href="https://www.npmjs.com/package/@sxo/svelte"><img src="https://img.shields.io/npm/v/@sxo/svelte.svg?style=flat-square" alt="npm version"></a>
    <img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square" alt="license">
    <img src="https://img.shields.io/bundlephobia/minzip/@sxo/svelte?style=flat-square" alt="bundle size">
    <img src="https://img.shields.io/npm/dm/@sxo/svelte.svg?style=flat-square" alt="downloads">
  </p>
</div>

---

`@sxo/svelte` integrates the SXO design system seamlessly into Svelte projects, providing a native developer experience with zero runtime bloat.

## ✨ Key Features

- 🧩 **Headless Logic**: Leverages `@sxo/design` logic for component behavior.
- ⚡ **Svelte Native**: Designed specifically for Svelte's compiler and reactivity model.
- 🎨 **Atomic Styling**: Works perfectly with `@sxo/ui` generators.
- ♿ **Accessible**: Built-in ARIA support and keyboard interaction.
- 🛡️ **Type Safe**: First-class TypeScript support.

## 🚀 Quick Start

### Installation

```bash
pnpm add @sxo/svelte @sxo/ui @sxo/engine @sxo/design
```

### Basic Usage

```svelte
<script>
  import { Button, SxoProvider } from '@sxo/svelte';
  import antdTheme from '@sxo/theme-antd';
</script>

<SxoProvider tokens={antdTheme}>
  <Button variant="primary" on:click={() => console.log('Svelte SXO!')}>
    Click Me
  </Button>
</SxoProvider>
```

## 📖 Documentation

For full documentation and examples, visit the [Svelte Adaptor Documentation](https://sxo-engine.pages.dev/zh-CN/adaptors/svelte.html).

## 📄 License

MIT License.
npm package: @sxo/theme-antd
Description: Antd theme for SXO Design System.
Author: sxo team
Latest version: 0.1.1

<div align="center">
  <h1>@sxo/theme-antd</h1>
  <p><b>Ant Design style theme for the SXO design system.</b></p>

  <p>
    <a href="https://www.npmjs.com/package/@sxo/theme-antd"><img src="https://img.shields.io/npm/v/@sxo/theme-antd.svg?style=flat-square" alt="npm version"></a>
    <img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square" alt="license">
    <img src="https://img.shields.io/npm/dm/@sxo/theme-antd.svg?style=flat-square" alt="downloads">
  </p>
</div>

---

`@sxo/theme-antd` provides a set of design tokens that replicate the clean, professional, and technical look of Ant Design 5.0 for your SXO-powered application.

## ✨ Features

- 💼 **Professional UI**: Based on Ant Design 5.0 specifications.
- 🎨 **Balanced Palette**: Uses the classic "Technical Blue" as the primary color.
- 📐 **Precise Spacing**: Follows the 8px grid system for layout and typography.
- 🧩 **Drop-in Integration**: Works seamlessly with all SXO framework adaptors.

## 🚀 Quick Start

### Installation

```bash
pnpm add @sxo/theme-antd
```

### Usage (Vue 3 Example)

```typescript
import { createSxo } from '@sxo/plugin-vue';
import antdTheme from '@sxo/theme-antd';

app.use(createSxo({
    tokens: antdTheme
}));
```

## 📄 License

MIT License.
npm package: @sxo/theme-carbon
Description: Carbon theme for SXO Design System.
Author: sxo team
Latest version: 0.1.1

<div align="center">
  <h1>@sxo/theme-carbon</h1>
  <p><b>IBM Carbon style theme for the SXO design system. A modern, industrial, and high-precision aesthetic.</b></p>

  <p>
    <a href="https://www.npmjs.com/package/@sxo/theme-carbon"><img src="https://img.shields.io/npm/v/@sxo/theme-carbon.svg?style=flat-square" alt="npm version"></a>
    <img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square" alt="license">
    <img src="https://img.shields.io/npm/dm/@sxo/theme-carbon.svg?style=flat-square" alt="downloads">
  </p>
</div>

---

`@sxo/theme-carbon` brings the high-precision, data-driven visual language of IBM Carbon to the SXO ecosystem.

## ✨ Features

- 🏗️ **Enterprise Ready**: Based on IBM's Carbon Design System specifications.
- 🎨 **Industrial Palette**: Focused on clarity with a neutral-heavy color system.
- 📐 **Grid Optimized**: Follows the 2x grid for precise alignment and spacing.
- 🧩 **Universal**: Compatible with all SXO framework adaptors.

## 🚀 Quick Start

### Installation

```bash
pnpm add @sxo/theme-carbon
```

### Usage (Vue 3 Example)

```typescript
import { createSxo } from '@sxo/plugin-vue';
import carbonTheme from '@sxo/theme-carbon';

app.use(createSxo({
    tokens: carbonTheme
}));
```

## 📖 Documentation

For full documentation and theme customization, visit the [Theme Documentation](https://sxo-engine.pages.dev/zh-CN/guide/tokens.html).

## 📄 License

MIT License.
npm package: @sxo/theme-fate
Description: Fate theme for SXO Design System.
Author: sxo team
Latest version: 0.1.1

<div align="center">
  <h1>@sxo/theme-fate</h1>
  <p><b>Intertwined Fate style theme for the SXO design system. A dreamy, celestial, and high-impact aesthetic.</b></p>

  <p>
    <a href="https://www.npmjs.com/package/@sxo/theme-fate"><img src="https://img.shields.io/npm/v/@sxo/theme-fate.svg?style=flat-square" alt="npm version"></a>
    <img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square" alt="license">
    <img src="https://img.shields.io/npm/dm/@sxo/theme-fate.svg?style=flat-square" alt="downloads">
  </p>
</div>

---

`@sxo/theme-fate` is a high-impact, artistic theme inspired by the celestial aesthetics of "Intertwined Fate". It brings a unique, dreamy atmosphere to your applications.

## ✨ Features

- 🌌 **Celestial Aesthetic**: Dreamy gradients and cosmic-inspired visual elements.
- 🎨 **Dreamy Palette**: Soft pinks, deep purples, and ethereal golds.
- 🪄 **Unique Animations**: Pre-configured transition effects that match the celestial theme.
- 🧩 **Universal**: Fully compatible with all SXO framework adaptors.

## 🚀 Quick Start

### Installation

```bash
pnpm add @sxo/theme-fate
```

### Usage (Vue 3 Example)

```typescript
import { createSxo } from '@sxo/plugin-vue';
import fateTheme from '@sxo/theme-fate';

app.use(createSxo({
    tokens: fateTheme
}));
```

## 📄 License

MIT License.
npm package: @sxo/theme-fluent
Description: Fluent theme for SXO Design System.
Author: sxo team
Latest version: 0.1.1

<div align="center">
  <h1>@sxo/theme-fluent</h1>
  <p><b>Microsoft Fluent style theme for the SXO design system. A modern, multi-layered, and accessible aesthetic.</b></p>

  <p>
    <a href="https://www.npmjs.com/package/@sxo/theme-fluent"><img src="https://img.shields.io/npm/v/@sxo/theme-fluent.svg?style=flat-square" alt="npm version"></a>
    <img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square" alt="license">
    <img src="https://img.shields.io/npm/dm/@sxo/theme-fluent.svg?style=flat-square" alt="downloads">
  </p>
</div>

---

`@sxo/theme-fluent` brings the modern, accessible, and multi-layered visual language of Microsoft's Fluent Design System to the SXO ecosystem.

## ✨ Features

- 💎 **Acrylic & Mica**: Signature translucent and layered effects for depth and focus.
- 🎨 **Inclusive Design**: High-contrast support and accessibility-first color choices.
- 📐 **Adaptive Layout**: Designed to work across different screen sizes and input methods.
- 🧩 **Universal**: Fully compatible with all SXO framework adaptors.

## 🚀 Quick Start

### Installation

```bash
pnpm add @sxo/theme-fluent
```

### Usage (Vue 3 Example)

```typescript
import { createSxo } from '@sxo/plugin-vue';
import fluentTheme from '@sxo/theme-fluent';

app.use(createSxo({
    tokens: fluentTheme
}));
```

## 📄 License

MIT License.
npm package: @sxo/ui
Description: Framework-agnostic UI component logic and style generators for SXO.
Author: sxo team
Latest version: 0.1.1

<div align="center">
  <h1>@sxo/ui</h1>
  <p><b>The style contract and layout layer for the SXO design system.</b></p>

  <p>
    <a href="https://www.npmjs.com/package/@sxo/ui"><img src="https://img.shields.io/npm/v/@sxo/ui.svg?style=flat-square" alt="npm version"></a>
    <img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square" alt="license">
    <img src="https://img.shields.io/bundlephobia/minzip/@sxo/ui?style=flat-square" alt="bundle size">
    <img src="https://img.shields.io/npm/dm/@sxo/ui.svg?style=flat-square" alt="downloads">
  </p>
</div>

---

`@sxo/ui` bridges the gap between **Headless Logic** and **Visual Design**. It provides the "Style Contract" that defines how components should look by translating design tokens and states into atomic CSS classes.

## 🌉 Bridging the Gap

While `@sxo/design` handles behavior, `@sxo/ui` handles the visual identity:

1.  **Contract Definition**: Defines standard Props and interfaces for all framework adaptors.
2.  **Style Generation**: Provides pure functions that map component states (e.g., `variant`, `size`, `isOpen`) to atomic CSS classes.
3.  **Unopinionated Layout**: It doesn't render HTML directly, allowing adaptors to maintain their own rendering optimizations.

## ✨ Key Features

- 🎨 **Atomic Generators**: High-performance functions to generate utility-first classes.
- 📐 **Strict Typing**: Full TypeScript interfaces for every component prop and state.
- 🧩 **Framework Independent**: Use the same style logic in React, Vue, Solid, or even vanilla JS.
- 🚀 **AOT Ready**: Designed for both runtime generation and ahead-of-time compilation.

## 🚀 Quick Start

### Installation

```bash
pnpm add @sxo/ui @sxo/engine
```

### Using Class Generators

Generate atomic styles based on component state. This is how we keep the UI consistent while remaining headless at the logic level.

```typescript
import { getButtonClasses } from '@sxo/ui';

// Map component state to atomic classes
const classes = getButtonClasses({
    variant: 'primary',
    size: 'md',
    loading: true
});
// Result: "inline-flex bg-primary-DEFAULT px-4 py-2 opacity-50 cursor-wait ..."
```

### Component Contracts

Ensures that every framework implementation (React, Vue, etc.) adheres to the same API.

```typescript
import type { ButtonProps } from '@sxo/ui';
```

## 📖 Documentation

For full documentation and examples, visit the [Components Index](https://sxo-engine.pages.dev/zh-CN/components/button.html).

## 📄 License

MIT License.
npm package: @sxwy/cli
Description: cli
Author: chenjie
Latest version: 1.0.1

# @sxwy/cli

前端项目脚手架

## 技术栈

- 运行环境：Node >= 16
- 开发框架：TypeScript + Babel
- 依赖管理：Yarn

## 项目结构

```shell
├── .husky                            # git hooks 执行脚本
├── .vscode                           # vscode 配置
├── es                                # bebal 编译文件
├── example                           # 测试用例
├── src                               # 源代码
│   ├── index.ts                      # 入口
├── .babelrc.cjs                      # babel 配置
├── .cicd                             # cicd 触发文件
├── .commitlintrc.cjs                 # commitlint 配置
├── .editorconfig                     # 编辑器配置
├── .eslintignore                     # eslint 忽略配置
├── .eslintrc.cjs                     # eslint 配置
├── .gitignore                        # git 忽略配置
├── .lintstagedrc.cjs                 # git 提交校验配置
├── .npmrc                            # npm 配置
├── .nvmrc                            # nvm 配置
├── .prettierignore                   # prettier 忽略配置
├── .prettierrc.cjs                   # prettier 配置
├── .releaserc.cjs                    # release 配置
├── .stylelintignore                  # stylelint 忽略配置
├── .stylelintrc.cjs                  # stylelint 配置
├── CHANGELOG.md                      # 版本变更记录
├── LICENSE                           # 许可证
├── package.json                      # 项目配置
├── README.md                         # 开发说明
├── tsconfig.json                     # typescript 配置
├── tsconfig.types.json               # typescript 类型配置
└── yarn.lock                         # 项目版本锁
```

## 开发规范

请严格遵循 [前端开发规范](https://sxwy.github.io/standard/)

## 开发说明

- 运行 SDK
  ```shell
  yarn
  yarn dev
  ```

## 发布说明

- 发布 npm 需合并到 beta/master 分支，请参照 [前端版本管理](https://sxwy.github.io/standard/rules/project/version.html) 中的基础库版本，再执行以下命令

  ```shell
  yarn release
  ```

## 相关链接

- [使用文档](https://sxwy.github.io/standard/rules/project/template.html#脚手架)
npm package: @sxwy/eslint-config-vue
Description: eslint-config-vue
Author: chenjie
Latest version: 2.0.0

# Vue.js 编码规范配置，在 @sxwy/eslint-config-base 基础上增加了 Vue.js 相关的插件和规则

## 使用示例

```js
module.exports = {
  extends: ['@sxwy/eslint-config-vue']
}
```