@soybeanjs/ui 0.14.0 → 0.15.0-beta.2

package/README.md

@@ -15,10 +15,77 @@ SoybeanUI is an elegant, modern, accessible and high-quality UI component librar
 
 ## 📚 Architecture
 
-SoybeanUI consists of two main packages:
+SoybeanUI is built on a strict **two-layer separation** model:
 
-- **@soybeanjs/headless**: The logic layer. It handles state management, accessibility (A11y), keyboard interactions, and focus management. It is completely unstyled, giving you maximum control if you want to build your own design system.
-- **@soybeanjs/ui**: The presentation layer. It wraps the headless components with beautiful, customizable styles using UnoCSS (via `tailwind-variants`). It is ready to use out of the box.
+```
+┌─────────────────────────────────────────┐
+│           @soybeanjs/ui (src/)          │
+│  S-prefixed components   (SButton…)     │
+│  UnoCSS classes · tailwind-variants     │
+│  provideXUi(ui)  ──────────────────┐    │
+└────────────────────────────────────┼────┘
+                                     │ style injection
+┌────────────────────────────────────▼────┐
+│        @soybeanjs/headless (headless/)  │
+│  Logic · State · A11y · Keyboard nav    │
+│  useUiContext() reads injected classes  │
+│  Zero styles — works with any CSS       │
+└─────────────────────────────────────────┘
+```
+
+### Packages
+
+| Package                 | Role                              | Components                    |
+| ----------------------- | --------------------------------- | ----------------------------- |
+| **@soybeanjs/headless** | Logic, state, a11y. Zero styles.  | 50 primitives, 26 composables |
+| **@soybeanjs/ui**       | Styled wrappers. UnoCSS + `tv()`. | 48 `S`-prefixed components    |
+
+**Data flow is strictly one-way**: `headless` → `src`. The styled layer never imports from headless's internals — it injects style tokens via `provideXUi(computedUi)` which headless components read through `useUiContext()`.
+
+Some multi-slot headless components also expose `Compact` aggregators, such as `AccordionCompact` and `TableCompact`. They keep item iteration and default content/icon composition inside headless, while the UI layer stays focused on styling and prop forwarding.
+
+### Style Injection
+
+Every multi-slot headless component exposes a `provide{Name}Ui` function. The styled wrapper computes classes using `tailwind-variants` and injects them:
+
+```ts
+// In the styled wrapper (src/)
+const ui = computed(() =>
+  mergeSlotVariants(
+    accordionVariants({ size: props.size }), // tv() output
+    props.ui, // user overrides
+    { root: props.class } // class prop
+  )
+);
+provideAccordionUi(ui); // headless reads this via useAccordionUi()
+```
+
+### Theme System
+
+- **`ThemeColor`** — 8 semantic colors: `primary` · `destructive` · `success` · `warning` · `info` · `carbon` · `secondary` · `accent`
+- **`ThemeSize`** — 6 sizes: `xs` · `sm` · `md` · `lg` · `xl` · `2xl` (base 16px at `md`)
+- **`ConfigProvider`** — sets global `dir`, `locale`, `nonce`, and default `tooltip` config for the entire component tree
+- **`cn()`** — Tailwind-aware class merge (`clsx` + `tailwind-merge`), used for conflict-free class composition
+
+### Package Exports
+
+**@soybeanjs/headless** ships fine-grained sub-paths:
+
+```ts
+import { AccordionRoot } from '@soybeanjs/headless'; // all components
+import { useControllableState } from '@soybeanjs/headless/composables'; // 26 composables
+import { transformPropsToContext } from '@soybeanjs/headless/shared'; // pure TS utils
+import * as Headless from '@soybeanjs/headless/namespaced'; // namespace object
+import type { AccordionUiSlot } from '@soybeanjs/headless/accordion'; // per-component
+```
+
+**@soybeanjs/ui** exports:
+
+```ts
+import { SButton, SAccordion } from '@soybeanjs/ui'; // all components
+import '@soybeanjs/ui/styles.css'; // pre-built UnoCSS stylesheet
+// Also: @soybeanjs/ui/nuxt · @soybeanjs/ui/resolver
+```
 
 ## 📦 Installation
 
@@ -85,6 +152,8 @@ export default defineNuxtConfig({
 
 The headless components provide the functionality without the styles.
 
+For data-driven multi-slot patterns, prefer the exported `Compact` variant when it exists. It is the headless entry point for opinionated composition, while the regular parts remain available for fully manual assembly.
+
 ```vue
 <script setup>
 import { AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent } from '@soybeanjs/headless';
@@ -102,11 +171,13 @@ import { AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent } from
 
 ## ✨ Features
 
-- **Accessible**: Follows WAI-ARIA patterns for accessibility.
-- **Headless**: Logic and styles are separated.
-- **Type Safe**: Written in TypeScript with full type support.
-- **Customizable**: Built with UnoCSS and `tailwind-variants` for easy theming.
-- **Lightweight**: Tree-shakable components.
+- **Accessible**: Follows WAI-ARIA patterns for roles, focus management, and keyboard navigation.
+- **Headless-first**: Logic and styles are fully separated — use `@soybeanjs/headless` alone to build any design system.
+- **Type Safe**: Written in strict TypeScript. All props, emits, slots, and context values are typed.
+- **Customizable at every level**: Override individual slot classes via the `ui` prop, or swap the entire style layer.
+- **Lightweight & Tree-shakable**: Import only the components you use. Each component is individually tree-shakable.
+- **Nuxt ready**: First-class Nuxt module with auto-registration (`@soybeanjs/ui/nuxt`).
+- **unplugin support**: Auto-import resolver for `unplugin-vue-components` (`@soybeanjs/ui/resolver`).
 
 ## 💝 Credits
 
@@ -116,142 +187,3 @@ import { AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent } from
 - [shadcn/ui](https://github.com/shadcn/ui)
 - [nuxt-ui](https://github.com/nuxt/ui)
 - [unocss](https://github.com/unocss/unocss)
-
-## 🗺️ Roadmap
-
-### Components
-
-✅: Completed ✨: Implemented
-
-✅ 49 / total: 108
-
-| No  | Priority | Name            | Status       | Alias                    | 📝 Note                  |
-| --- | -------- | --------------- | ------------ | ------------------------ | ------------------------ |
-| 1   | 1        | Accordion       | ✅ Completed |                          |                          |
-| 2   | 1        | Alert           | ✅ Completed |                          |                          |
-| 3   | 1        | AlertDialog     | ✅ Completed |                          |                          |
-| 4   | 1        | Arrow           | ✅ Completed |                          |                          |
-| 5   | 1        | AspectRatio     | ✅ Completed |                          |                          |
-| 6   | 1        | Avatar          | ✅ Completed |                          |                          |
-| 7   | 1        | Badge           | ✅ Completed | Chip                     |                          |
-| 8   | 1        | Breadcrumb      | ✅ Completed |                          |                          |
-| 9   | 1        | Button          | ✅ Completed |                          | ✨ support loading       |
-| 10  | 1        | Card            | ✅ Completed |                          |                          |
-| 11  | 1        | Checkbox        | ✅ Completed |                          | ✨ support checkbox card |
-| 12  | 1        | Collapsible     | ✅ Completed |                          |                          |
-| 13  | 1        | Command         | ✅ Completed |                          |                          |
-| 14  | 1        | ConfigProvider  | ✅ Completed |                          |                          |
-| 15  | 1        | ContextMenu     | ✅ Completed |                          |                          |
-| 16  | 1        | Dialog          | ✅ Completed |                          |                          |
-| 17  | 1        | Drawer          | ✅ Completed | Sheet                    |                          |
-| 18  | 1        | DropdownMenu    | ✅ Completed |                          | ✨ support hover trigger |
-| 19  | 1        | Form            | ✅ Completed |                          |                          |
-| 20  | 1        | Icon            | ✅ Completed |                          | ✨ based on iconify      |
-| 21  | 1        | Input           | ✅ Completed |                          |                          |
-| 22  | 1        | InputNumber     | ✅ Completed | NumberField, NumberInput |                          |
-| 23  | 1        | Kbd             | ✅ Completed |                          |                          |
-| 24  | 1        | Label           | ✅ Completed |                          |                          |
-| 25  | 1        | Layout          | ✅ Completed |                          |                          |
-| 26  | 1        | Link            | ✅ Completed |                          |                          |
-| 27  | 1        | List            | ✅ Completed |                          |                          |
-| 28  | 1        | Listbox         | ✅ Completed |                          |                          |
-| 29  | 1        | Menu            | ✅ Completed |                          |                          |
-| 30  | 1        | NavigationMenu  | ✅ Completed |                          |                          |
-| 31  | 1        | Pagination      | ✅ Completed |                          |                          |
-| 32  | 1        | Password        | ✅ Completed |                          |                          |
-| 33  | 1        | Popover         | ✅ Completed |                          |                          |
-| 34  | 1        | RadioGroup      | ✅ Completed |                          | ✨ support radio card    |
-| 35  | 1        | Segment         | ✅ Completed |                          |                          |
-| 36  | 1        | Select          | ✅ Completed |                          |                          |
-| 37  | 1        | Separator       | ✅ Completed | Divider                  |                          |
-| 38  | 1        | Switch          | ✅ Completed |                          | ✨ support switch card   |
-| 39  | 1        | Tabs            | ✅ Completed |                          |                          |
-| 40  | 1        | Tag             | ✅ Completed | Badge(shadcn-ui)         |                          |
-| 41  | 1        | Textarea        | ✅ Completed |                          | ✨ support auto size     |
-| 42  | 1        | Toast           | ✅ Completed | Sonner                   | migrate from vue-sonner  |
-| 43  | 1        | Tooltip         | ✅ Completed |                          |                          |
-| 44  | 1        | Tree            | ✅ Completed |                          | ✨ support virtualized   |
-| 45  | 1        | TreeMenu        | ✅ Completed |                          |                          |
-| 46  | 1        | Virtualizer     | ✅ Completed |                          |                          |
-| 47  | 1        | VisuallyHidden  | ✅ Completed |                          |                          |
-| 48  | 2        | PageTabs        | ✅ Completed |                          |                          |
-| 49  | 2        | Popconfirm      | ✅ Completed |                          |                          |
-| 50  | 2        | ColorPicker     |              |                          |                          |
-| 51  | 2        | Combobox        |              |                          | support virtualized      |
-| 52  | 2        | DataTable       |              |                          | support virtualized      |
-| 53  | 2        | Menubar         |              |                          |                          |
-| 54  | 2        | PinInput        |              | InputOPT, OPTInput       |                          |
-| 55  | 2        | Progress        |              |                          | include circle           |
-| 56  | 2        | ScrollArea      |              |                          |                          |
-| 57  | 2        | Skeleton        |              |                          |                          |
-| 58  | 2        | Slider          |              |                          |                          |
-| 59  | 2        | Table           |              |                          |                          |
-| 60  | 2        | Toggle          |              |                          |                          |
-| 61  | 2        | ToggleGroup     |              |                          |                          |
-| 62  | 3        | BottomSheet     |              | Drawer(shadcn-ui)        |                          |
-| 63  | 3        | Calendar        |              |                          | v-calendar               |
-| 64  | 3        | Carousel        |              |                          |                          |
-| 65  | 3        | DateField       |              |                          |                          |
-| 66  | 3        | DatePicker      |              |                          |                          |
-| 67  | 3        | DateRangeField  |              |                          |                          |
-| 68  | 3        | DateRangePicker |              |                          |                          |
-| 69  | 3        | Editable        |              |                          |                          |
-| 70  | 3        | HoverCard       |              |                          |                          |
-| 71  | 3        | RangeCalendar   |              |                          | v-calendar               |
-| 72  | 3        | Resizable       |              |                          |                          |
-| 73  | 3        | Splitter        |              |                          |                          |
-| 74  | 3        | Stepper         |              |                          |                          |
-| 75  | 3        | TagsInput       |              |                          |                          |
-| 76  | 3        | TimeField       |              |                          |                          |
-| 77  | 3        | Timeline        |              |                          | ui things                |
-| 78  | 3        | TimePicker      |              |                          | element-plus             |
-| 79  | 3        | Toolbar         |              |                          |                          |
-| 80  | 4        | Affix           |              |                          |                          |
-| 81  | 4        | Anchor          |              |                          |                          |
-| 82  | 4        | AutoComplete    |              |                          | support virtualized      |
-| 83  | 4        | Backtop         |              |                          |                          |
-| 84  | 4        | Cascader        |              |                          | support virtualized      |
-| 85  | 4        | Clipboard       |              |                          |                          |
-| 86  | 4        | Code            |              |                          |                          |
-| 87  | 4        | Comment         |              |                          |                          |
-| 88  | 4        | Countdown       |              |                          |                          |
-| 89  | 4        | CurrencyInput   |              |                          |                          |
-| 90  | 4        | Descriptions    |              |                          |                          |
-| 91  | 4        | Ellipsis        |              |                          |                          |
-| 92  | 4        | Empty           |              |                          |                          |
-| 93  | 4        | Equation        |              |                          | based on katex           |
-| 94  | 4        | InfiniteScroll  |              |                          |                          |
-| 95  | 4        | Mention         |              |                          | element-plus             |
-| 96  | 4        | Navbar          |              |                          |                          |
-| 97  | 4        | NumberAnimation |              |                          | naive-ui                 |
-| 98  | 4        | QRCode          |              |                          |                          |
-| 99  | 4        | Rating          |              | Rate                     | element-plus             |
-| 100 | 4        | Result          |              |                          |                          |
-| 101 | 4        | Spinner         |              | Loader, Spin             | github ldrs              |
-| 102 | 4        | Statistic       |              |                          |                          |
-| 103 | 4        | Tour            |              |                          |                          |
-| 104 | 4        | Transfer        |              |                          |                          |
-| 105 | 4        | TreeSelect      |              |                          |                          |
-| 106 | 4        | Typography      |              |                          | shadcn-ui                |
-| 107 | 4        | Upload          |              | FileUpload, Dropfile     |                          |
-| 108 | 4        | Watermark       |              |                          |                          |
-
-### Utilities
-
-✅ 12 / total: 13
-
-| No. | Priority | Name                | Status       | 📝 Note        |
-| --- | -------- | ------------------- | ------------ | -------------- |
-| 1   | 1        | Popper              | ✅ Completed |                |
-| 2   | 1        | Portal              | ✅ Completed | alias Teleport |
-| 3   | 1        | Primitive           | ✅ Completed |                |
-| 4   | 1        | RovingFocus         | ✅ Completed |                |
-| 5   | 1        | Slot                | ✅ Completed |                |
-| 6   | 1        | useCollection       | ✅ Completed |                |
-| 7   | 1        | useDismissableLayer | ✅ Completed |                |
-| 8   | 1        | useFocusGuards      | ✅ Completed |                |
-| 9   | 1        | useFocusScope       | ✅ Completed |                |
-| 10  | 1        | usePresence         | ✅ Completed |                |
-| 11  | 1        | useDialog           | ✅ Completed |                |
-| 12  | 1        | useToast            | ✅ Completed |                |
-| 13  | 2        | useLoadingBar       |              |                |

package/README.zh-CN.md

@@ -15,10 +15,77 @@ SoybeanUI 是一个优雅、现代、可访问且高质量的 UI 组件库，具
 
 ## 📚 架构
 
-SoybeanUI 由两个主要包组成：
+SoybeanUI 采用严格的**双层分离**设计：
 
-- **@soybeanjs/headless**: 逻辑层。它处理状态管理、可访问性 (A11y)、键盘交互和焦点管理。它完全不包含样式，如果您想构建自己的设计系统，它能为您提供最大的控制权。
-- **@soybeanjs/ui**: 表现层。它使用 UnoCSS (通过 `tailwind-variants`) 为 Headless 组件包装了美观、可定制的样式。它开箱即用。
+```
+┌─────────────────────────────────────────┐
+│           @soybeanjs/ui (src/)          │
+│  S 前缀组件   (SButton、SDialog…)        │
+│  UnoCSS 类名 · tailwind-variants         │
+│  provideXUi(ui)  ──────────────────┐    │
+└────────────────────────────────────┼────┘
+                                     │ 样式注入
+┌────────────────────────────────────▼────┐
+│     @soybeanjs/headless (headless/)     │
+│  逻辑 · 状态 · A11y · 键盘导航             │
+│  useUiContext() 读取注入的样式类名      │
+│  零样式 — 可配合任意 CSS 方案         │
+└─────────────────────────────────────────┘
+```
+
+### 包结构
+
+| 包                      | 职责                        | 组件数量                      |
+| ----------------------- | --------------------------- | ----------------------------- |
+| **@soybeanjs/headless** | 逻辑、状态、a11y，零样式    | 50 个原语件，26 个 composable |
+| **@soybeanjs/ui**       | 样式包装层。UnoCSS + `tv()` | 48 个带 `S` 前缀的组件        |
+
+**数据流严格单向**：`headless` → `src`。样式层不会导入 headless 的内部实现，而是通过 `provideXUi(computedUi)` 注入样式 token，headless 组件再通过 `useUiContext()` 读取。
+
+部分多插槽 headless 组件还会暴露 `Compact` 聚合层，例如 `AccordionCompact` 和 `TableCompact`。它们把条目遍历以及默认内容 / 图标组合放在 headless 层完成，而 UI 层只负责样式和 props 转发。
+
+### 样式注入机制
+
+每个多橪位的 headless 组件都有对应的 `provide{Name}Ui` 函数。样式层通过 `tailwind-variants` 计算类名后注入：
+
+```ts
+// 样式包装层 (src/) 中
+const ui = computed(() =>
+  mergeSlotVariants(
+    accordionVariants({ size: props.size }), // tv() 计算结果
+    props.ui, // 用户自定义覆盖
+    { root: props.class } // class prop 合并
+  )
+);
+provideAccordionUi(ui); // headless 通过 useAccordionUi() 读取
+```
+
+### 主题系统
+
+- **`ThemeColor`** — 8 种语义色：`primary` · `destructive` · `success` · `warning` · `info` · `carbon` · `secondary` · `accent`
+- **`ThemeSize`** — 6 种尺寸：`xs` · `sm` · `md` · `lg` · `xl` · `2xl`（基准尺寸 `md` = 16px）
+- **`ConfigProvider`** — 全局设置 `dir`、`locale`、`nonce` 及默认 `tooltip` 配置，应用于整个组件树
+- **`cn()`** — Tailwind 感知的类名合并工具（`clsx` + `tailwind-merge`），解决类名冲突
+
+### 包导出
+
+**@soybeanjs/headless** 提供精细化子路径导出：
+
+```ts
+import { AccordionRoot } from '@soybeanjs/headless'; // 所有组件
+import { useControllableState } from '@soybeanjs/headless/composables'; // 26 个 composable
+import { transformPropsToContext } from '@soybeanjs/headless/shared'; // 纯 TS 工具
+import * as Headless from '@soybeanjs/headless/namespaced'; // 命名空间导入
+import type { AccordionUiSlot } from '@soybeanjs/headless/accordion'; // 单组件类型
+```
+
+**@soybeanjs/ui** 导出：
+
+```ts
+import { SButton, SAccordion } from '@soybeanjs/ui'; // 所有组件
+import '@soybeanjs/ui/styles.css'; // 预构建的 UnoCSS 样式表
+// 同时提供：@soybeanjs/ui/nuxt · @soybeanjs/ui/resolver
+```
 
 ## 📦 安装
 
@@ -85,6 +152,8 @@ export default defineNuxtConfig({
 
 Headless 组件提供功能但不包含样式。
 
+对于数据驱动的多插槽场景，如果组件提供了 `Compact` 版本，优先使用它。它是 headless 层的约定式组合入口，而基础分片仍然保留给需要完全手动拼装的场景。
+
 ```vue
 <script setup>
 import { AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent } from '@soybeanjs/headless';
@@ -102,11 +171,13 @@ import { AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent } from
 
 ## ✨ 特性
 
-- **可访问性**: 遵循 WAI-ARIA 模式以实现可访问性。
-- **Headless**: 逻辑与样式分离。
-- **类型安全**: 使用 TypeScript 编写，提供完整的类型支持。
-- **可定制**: 基于 UnoCSS 和 `tailwind-variants` 构建，易于主题化。
-- **轻量级**: 支持 Tree-shaking 的组件。
+- **可访问性**：遵循 WAI-ARIA 模式，内置角色、焦点管理与键盘导航。
+- **Headless 优先**：逻辑与样式完全分离—单独使用 `@soybeanjs/headless` 可构建任意设计系统。
+- **类型安全**：严格 TypeScript 编写，所有 props、emits、slot 及 context 均有完整类型。
+- **多级自定义**：通过 `ui` prop 覆盖单个橪位类名，也可替换整个样式层。
+- **轻量可摇树**：每个组件独立 Tree-shakable，按需引入。
+- **Nuxt 就绪**：提供官方 Nuxt 模块，支持组件自动注册（`@soybeanjs/ui/nuxt`）。
+- **unplugin 支持**：提供 `unplugin-vue-components` 自动导入解析器（`@soybeanjs/ui/resolver`）。
 
 ## 💝 致谢
 
@@ -116,142 +187,3 @@ import { AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent } from
 - [shadcn/ui](https://github.com/shadcn/ui)
 - [nuxt-ui](https://github.com/nuxt/ui)
 - [unocss](https://github.com/unocss/unocss)
-
-## 🗺️ 路线图
-
-### 组件
-
-✅: 已完成 ✨: 已实现
-
-✅ 49 / 总计: 108
-
-| No  | Priority | Name            | Status       | Alias                    | 📝 Note                  |
-| --- | -------- | --------------- | ------------ | ------------------------ | ------------------------ |
-| 1   | 1        | Accordion       | ✅ Completed |                          |                          |
-| 2   | 1        | Alert           | ✅ Completed |                          |                          |
-| 3   | 1        | AlertDialog     | ✅ Completed |                          |                          |
-| 4   | 1        | Arrow           | ✅ Completed |                          |                          |
-| 5   | 1        | AspectRatio     | ✅ Completed |                          |                          |
-| 6   | 1        | Avatar          | ✅ Completed |                          |                          |
-| 7   | 1        | Badge           | ✅ Completed | Chip                     |                          |
-| 8   | 1        | Breadcrumb      | ✅ Completed |                          |                          |
-| 9   | 1        | Button          | ✅ Completed |                          | ✨ support loading       |
-| 10  | 1        | Card            | ✅ Completed |                          |                          |
-| 11  | 1        | Checkbox        | ✅ Completed |                          | ✨ support checkbox card |
-| 12  | 1        | Collapsible     | ✅ Completed |                          |                          |
-| 13  | 1        | Command         | ✅ Completed |                          |                          |
-| 14  | 1        | ConfigProvider  | ✅ Completed |                          |                          |
-| 15  | 1        | ContextMenu     | ✅ Completed |                          |                          |
-| 16  | 1        | Dialog          | ✅ Completed |                          |                          |
-| 17  | 1        | Drawer          | ✅ Completed | Sheet                    |                          |
-| 18  | 1        | DropdownMenu    | ✅ Completed |                          | ✨ support hover trigger |
-| 19  | 1        | Form            | ✅ Completed |                          |                          |
-| 20  | 1        | Icon            | ✅ Completed |                          | ✨ based on iconify      |
-| 21  | 1        | Input           | ✅ Completed |                          |                          |
-| 22  | 1        | InputNumber     | ✅ Completed | NumberField, NumberInput |                          |
-| 23  | 1        | Kbd             | ✅ Completed |                          |                          |
-| 24  | 1        | Label           | ✅ Completed |                          |                          |
-| 25  | 1        | Layout          | ✅ Completed |                          |                          |
-| 26  | 1        | Link            | ✅ Completed |                          |                          |
-| 27  | 1        | List            | ✅ Completed |                          |                          |
-| 28  | 1        | Listbox         | ✅ Completed |                          |                          |
-| 29  | 1        | Menu            | ✅ Completed |                          |                          |
-| 30  | 1        | NavigationMenu  | ✅ Completed |                          |                          |
-| 31  | 1        | Pagination      | ✅ Completed |                          |                          |
-| 32  | 1        | Password        | ✅ Completed |                          |                          |
-| 33  | 1        | Popover         | ✅ Completed |                          |                          |
-| 34  | 1        | RadioGroup      | ✅ Completed |                          | ✨ support radio card    |
-| 35  | 1        | Segment         | ✅ Completed |                          |                          |
-| 36  | 1        | Select          | ✅ Completed |                          |                          |
-| 37  | 1        | Separator       | ✅ Completed | Divider                  |                          |
-| 38  | 1        | Switch          | ✅ Completed |                          | ✨ support switch card   |
-| 39  | 1        | Tabs            | ✅ Completed |                          |                          |
-| 40  | 1        | Tag             | ✅ Completed | Badge(shadcn-ui)         |                          |
-| 41  | 1        | Textarea        | ✅ Completed |                          | ✨ support auto size     |
-| 42  | 1        | Toast           | ✅ Completed | Sonner                   | migrate from vue-sonner  |
-| 43  | 1        | Tooltip         | ✅ Completed |                          |                          |
-| 44  | 1        | Tree            | ✅ Completed |                          | ✨ support virtualized   |
-| 45  | 1        | TreeMenu        | ✅ Completed |                          |                          |
-| 46  | 1        | Virtualizer     | ✅ Completed |                          |                          |
-| 47  | 1        | VisuallyHidden  | ✅ Completed |                          |                          |
-| 48  | 2        | PageTabs        | ✅ Completed |                          |                          |
-| 49  | 2        | Popconfirm      | ✅ Completed |                          |                          |
-| 50  | 2        | ColorPicker     |              |                          |                          |
-| 51  | 2        | Combobox        |              |                          | support virtualized      |
-| 52  | 2        | DataTable       |              |                          | support virtualized      |
-| 53  | 2        | Menubar         |              |                          |                          |
-| 54  | 2        | PinInput        |              | InputOPT, OPTInput       |                          |
-| 55  | 2        | Progress        |              |                          | include circle           |
-| 56  | 2        | ScrollArea      |              |                          |                          |
-| 57  | 2        | Skeleton        |              |                          |                          |
-| 58  | 2        | Slider          |              |                          |                          |
-| 59  | 2        | Table           |              |                          |                          |
-| 60  | 2        | Toggle          |              |                          |                          |
-| 61  | 2        | ToggleGroup     |              |                          |                          |
-| 62  | 3        | BottomSheet     |              | Drawer(shadcn-ui)        |                          |
-| 63  | 3        | Calendar        |              |                          | v-calendar               |
-| 64  | 3        | Carousel        |              |                          |                          |
-| 65  | 3        | DateField       |              |                          |                          |
-| 66  | 3        | DatePicker      |              |                          |                          |
-| 67  | 3        | DateRangeField  |              |                          |                          |
-| 68  | 3        | DateRangePicker |              |                          |                          |
-| 69  | 3        | Editable        |              |                          |                          |
-| 70  | 3        | HoverCard       |              |                          |                          |
-| 71  | 3        | RangeCalendar   |              |                          | v-calendar               |
-| 72  | 3        | Resizable       |              |                          |                          |
-| 73  | 3        | Splitter        |              |                          |                          |
-| 74  | 3        | Stepper         |              |                          |                          |
-| 75  | 3        | TagsInput       |              |                          |                          |
-| 76  | 3        | TimeField       |              |                          |                          |
-| 77  | 3        | Timeline        |              |                          | ui things                |
-| 78  | 3        | TimePicker      |              |                          | element-plus             |
-| 79  | 3        | Toolbar         |              |                          |                          |
-| 80  | 4        | Affix           |              |                          |                          |
-| 81  | 4        | Anchor          |              |                          |                          |
-| 82  | 4        | AutoComplete    |              |                          | support virtualized      |
-| 83  | 4        | Backtop         |              |                          |                          |
-| 84  | 4        | Cascader        |              |                          | support virtualized      |
-| 85  | 4        | Clipboard       |              |                          |                          |
-| 86  | 4        | Code            |              |                          |                          |
-| 87  | 4        | Comment         |              |                          |                          |
-| 88  | 4        | Countdown       |              |                          |                          |
-| 89  | 4        | CurrencyInput   |              |                          |                          |
-| 90  | 4        | Descriptions    |              |                          |                          |
-| 91  | 4        | Ellipsis        |              |                          |                          |
-| 92  | 4        | Empty           |              |                          |                          |
-| 93  | 4        | Equation        |              |                          | based on katex           |
-| 94  | 4        | InfiniteScroll  |              |                          |                          |
-| 95  | 4        | Mention         |              |                          | element-plus             |
-| 96  | 4        | Navbar          |              |                          |                          |
-| 97  | 4        | NumberAnimation |              |                          | naive-ui                 |
-| 98  | 4        | QRCode          |              |                          |                          |
-| 99  | 4        | Rating          |              | Rate                     | element-plus             |
-| 100 | 4        | Result          |              |                          |                          |
-| 101 | 4        | Spinner         |              | Loader, Spin             | github ldrs              |
-| 102 | 4        | Statistic       |              |                          |                          |
-| 103 | 4        | Tour            |              |                          |                          |
-| 104 | 4        | Transfer        |              |                          |                          |
-| 105 | 4        | TreeSelect      |              |                          |                          |
-| 106 | 4        | Typography      |              |                          | shadcn-ui                |
-| 107 | 4        | Upload          |              | FileUpload, Dropfile     |                          |
-| 108 | 4        | Watermark       |              |                          |                          |
-
-### Utilities
-
-✅ 12 / 总计: 13
-
-| No. | Priority | Name                | Status       | 📝 Note        |
-| --- | -------- | ------------------- | ------------ | -------------- |
-| 1   | 1        | Popper              | ✅ Completed |                |
-| 2   | 1        | Portal              | ✅ Completed | alias Teleport |
-| 3   | 1        | Primitive           | ✅ Completed |                |
-| 4   | 1        | RovingFocus         | ✅ Completed |                |
-| 5   | 1        | Slot                | ✅ Completed |                |
-| 6   | 1        | useCollection       | ✅ Completed |                |
-| 7   | 1        | useDismissableLayer | ✅ Completed |                |
-| 8   | 1        | useFocusGuards      | ✅ Completed |                |
-| 9   | 1        | useFocusScope       | ✅ Completed |                |
-| 10  | 1        | usePresence         | ✅ Completed |                |
-| 11  | 1        | useDialog           | ✅ Completed |                |
-| 12  | 1        | useToast            | ✅ Completed |                |
-| 13  | 2        | useLoadingBar       |              |                |

package/dist/components/accordion/accordion.js

@@ -1 +1 @@
-import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import t from"../icon/icon.js";import{accordionVariants as n}from"./variants.js";import{Fragment as r,computed as i,createBlock as a,createElementBlock as o,createElementVNode as s,createTextVNode as c,createVNode as l,defineComponent as u,mergeProps as d,normalizeClass as f,openBlock as p,renderList as m,renderSlot as h,toDisplayString as g,toHandlers as _,unref as v,withCtx as y}from"vue";import{useForwardListeners as b,useOmitProps as x}from"@soybeanjs/headless/composables";import{AccordionContent as S,AccordionHeader as C,AccordionItem as w,AccordionRoot as T,AccordionTrigger as E,provideAccordionUi as D}from"@soybeanjs/headless";const O=u({name:`SAccordion`,__name:`accordion`,props:{class:{},size:{},ui:{},items:{},itemProps:{},headerProps:{},triggerProps:{},contentProps:{},collapsible:{type:Boolean},dir:{},disabled:{type:Boolean},orientation:{},unmountOnHide:{type:Boolean},modelValue:{},defaultValue:{},multiple:{},singleClearable:{type:Boolean}},emits:[`update:modelValue`],setup(u,{emit:O}){let k=u,A=O,j=x(k,[`class`,`size`,`ui`,`items`,`itemProps`,`headerProps`,`triggerProps`,`contentProps`]),M=b(A),N=i(()=>e(n({size:k.size}),k.ui,{root:k.class}));return D(N),(e,n)=>(p(),a(v(T),d(v(j),_(v(M))),{default:y(()=>[(p(!0),o(r,null,m(u.items,n=>h(e.$slots,`item`,{key:n.value,item:n,modelValue:u.modelValue},()=>[l(v(w),d({ref_for:!0},u.itemProps,{value:n.value,disabled:n.disabled}),{default:y(({open:r})=>[l(v(C),d({ref_for:!0},u.headerProps),{default:y(()=>[l(v(E),d({ref_for:!0},u.triggerProps),{default:y(()=>[h(e.$slots,`leading`,{item:n,modelValue:u.modelValue,open:r},()=>[l(t,{icon:n.icon,class:f(N.value.triggerLeadingIcon)},null,8,[`icon`,`class`])]),h(e.$slots,`title`,{item:n,modelValue:u.modelValue,open:r},()=>[c(g(n.title),1)]),h(e.$slots,`trigger-icon`,{item:n,modelValue:u.modelValue,open:r},()=>[l(t,{icon:`lucide:chevron-down`,class:f(N.value.triggerIcon)},null,8,[`class`])])]),_:2},1040)]),_:2},1040),l(v(S),d({ref_for:!0},u.contentProps),{default:y(()=>[h(e.$slots,`content`,{item:n,modelValue:u.modelValue,open:r},()=>[s(`p`,{class:f(N.value.description)},g(n.description),3)])]),_:2},1040)]),_:2},1040,[`value`,`disabled`])])),128))]),_:3},16))}});export{O as default};
+import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{accordionVariants as t}from"./variants.js";import{computed as n,createBlock as r,createSlots as i,defineComponent as a,guardReactiveProps as o,mergeProps as s,normalizeProps as c,openBlock as l,renderList as u,renderSlot as d,toHandlers as f,unref as p,useSlots as m,withCtx as h}from"vue";import{useForwardListeners as g,useOmitProps as _}from"@soybeanjs/headless/composables";import{AccordionCompact as v,provideAccordionUi as y}from"@soybeanjs/headless";import{keysOf as b}from"@soybeanjs/utils";const x=a({name:`SAccordion`,__name:`accordion`,props:{class:{},size:{},ui:{},items:{},itemProps:{},headerProps:{},triggerProps:{},contentProps:{},descriptionProps:{},collapsible:{type:Boolean},dir:{},disabled:{type:Boolean},orientation:{},unmountOnHide:{type:Boolean},modelValue:{},defaultValue:{},multiple:{},singleClearable:{type:Boolean}},emits:[`update:modelValue`],setup(a,{emit:x}){let S=a,C=x,w=m(),T=_(S,[`class`,`size`,`ui`]),E=g(C),D=n(()=>b(w).filter(e=>e!==`item`));return y(n(()=>e(t({size:S.size}),S.ui,{root:S.class}))),(e,t)=>(l(),r(p(v),s(p(T),f(p(E))),i({item:h(t=>[d(e.$slots,`item`,c(o(t)))]),_:2},[u(D.value,t=>({name:t,fn:h(n=>[d(e.$slots,t,c(o(n)))])}))]),1040))}});export{x as default};

package/dist/components/accordion/accordion.vue.d.ts

@@ -1,5 +1,6 @@
-import { AccordionOptionData, AccordionProps } from "./types.js";
+import { AccordionProps, AccordionSlots } from "./types.js";
 import * as _$vue from "vue";
+import { AccordionOptionData } from "@soybeanjs/headless";
 
 //#region src/components/accordion/accordion.vue.d.ts
 declare const __VLS_export: <T extends AccordionOptionData = AccordionOptionData, M extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
@@ -10,36 +11,7 @@ declare const __VLS_export: <T extends AccordionOptionData = AccordionOptionData
   } ? P : {});
   expose: (exposed: {}) => void;
   attrs: any;
-  slots: {
-    item?: (props: {
-      item: T;
-      modelValue: (M extends true ? string[] : string) | undefined;
-    }) => any;
-  } & {
-    leading?: (props: {
-      item: T;
-      modelValue: (M extends true ? string[] : string) | undefined;
-      open: boolean;
-    }) => any;
-  } & {
-    title?: (props: {
-      item: T;
-      modelValue: (M extends true ? string[] : string) | undefined;
-      open: boolean;
-    }) => any;
-  } & {
-    'trigger-icon'?: (props: {
-      item: T;
-      modelValue: (M extends true ? string[] : string) | undefined;
-      open: boolean;
-    }) => any;
-  } & {
-    content?: (props: {
-      item: T;
-      modelValue: (M extends true ? string[] : string) | undefined;
-      open: boolean;
-    }) => any;
-  };
+  slots: AccordionSlots<T, M>;
   emit: (evt: "update:modelValue", value: M extends true ? string[] : string) => void;
 }>) => _$vue.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;

package/dist/components/accordion/index.d.ts

@@ -1,4 +1,4 @@
-import { AccordionEmits, AccordionExtendedUi, AccordionExtraUiSlot, AccordionOptionData, AccordionProps } from "./types.js";
+import { AccordionEmits, AccordionProps, AccordionSlots } from "./types.js";
 import { _default } from "./accordion.vue.js";
-import { AccordionContentProps, AccordionHeaderProps, AccordionItemProps, AccordionRootEmits, AccordionRootProps, AccordionTriggerProps } from "@soybeanjs/headless/accordion";
-export { type AccordionContentProps, type AccordionHeaderProps, type AccordionItemProps, type AccordionRootEmits, type AccordionRootProps, type AccordionTriggerProps };
+import { AccordionContentProps, AccordionHeaderProps, AccordionItemProps, AccordionOptionData, AccordionRootEmits, AccordionRootProps, AccordionTriggerProps } from "@soybeanjs/headless/accordion";
+export { type AccordionContentProps, type AccordionHeaderProps, type AccordionItemProps, type AccordionOptionData, type AccordionRootEmits, type AccordionRootProps, type AccordionTriggerProps };

package/dist/components/accordion/types.d.ts

@@ -1,35 +1,16 @@
 import { ThemeSize } from "../../theme/types.js";
-import { IconValue } from "../icon/types.js";
-import { AccordionContentProps, AccordionHeaderProps, AccordionItemProps, AccordionRootEmits, AccordionRootProps, AccordionTriggerProps, AccordionUiSlot, ClassValue, UiClass } from "@soybeanjs/headless";
+import { AccordionCompactEmits, AccordionCompactProps, AccordionCompactSlots, AccordionOptionData, AccordionUi, ClassValue } from "@soybeanjs/headless";
 
 //#region src/components/accordion/types.d.ts
-interface AccordionOptionData extends Pick<AccordionItemProps, 'value' | 'disabled'> {
-  /** The title of the accordion item. */
-  title?: string;
-  /** The description of the accordion content. */
-  description?: string;
-  /**
-   * The icon of the accordion item.
-   *
-   * if it is a string, it will be used as the icon name of the iconify.
-   */
-  icon?: IconValue;
-}
-type AccordionExtraUiSlot = 'triggerLeadingIcon' | 'triggerIcon';
-type AccordionExtendedUi = UiClass<AccordionUiSlot | AccordionExtraUiSlot>;
-interface AccordionProps<T extends AccordionOptionData = AccordionOptionData, M extends boolean = false> extends AccordionRootProps<M> {
+interface AccordionProps<T extends AccordionOptionData = AccordionOptionData, M extends boolean = false> extends AccordionCompactProps<T, M> {
   /**
    * root class
    */
   class?: ClassValue;
   size?: ThemeSize;
-  ui?: Partial<AccordionExtendedUi>;
-  items: T[];
-  itemProps?: AccordionItemProps;
-  headerProps?: AccordionHeaderProps;
-  triggerProps?: AccordionTriggerProps;
-  contentProps?: AccordionContentProps;
+  ui?: Partial<AccordionUi>;
 }
-type AccordionEmits<M extends boolean = false> = AccordionRootEmits<M>;
+type AccordionEmits<M extends boolean = false> = AccordionCompactEmits<M>;
+type AccordionSlots<T extends AccordionOptionData = AccordionOptionData, M extends boolean = false> = AccordionCompactSlots<T, M>;
 //#endregion
-export { AccordionEmits, AccordionExtendedUi, AccordionExtraUiSlot, AccordionOptionData, AccordionProps };
+export { AccordionEmits, AccordionProps, AccordionSlots };

package/dist/components/affix/affix.js

@@ -0,0 +1 @@
+import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{affixVariants as t}from"./variants.js";import{computed as n,createBlock as r,createVNode as i,defineComponent as a,mergeProps as o,openBlock as s,renderSlot as c,toHandlers as l,unref as u,withCtx as d}from"vue";import{useForwardListeners as f,useOmitProps as p}from"@soybeanjs/headless/composables";import{AffixContent as m,AffixPlaceholder as h,AffixRoot as g,provideAffixUi as _}from"@soybeanjs/headless";const v=a({name:`SAffix`,__name:`affix`,props:{class:{},ui:{},placeholderProps:{},contentProps:{},offsetTop:{},offsetBottom:{},target:{type:[String,Function,null]}},emits:[`change`],setup(a,{emit:v}){let y=a,b=v,x=p(y,[`class`,`ui`,`placeholderProps`,`contentProps`]),S=f(b);return _(n(()=>e(t(),y.ui,{content:y.class}))),(e,t)=>(s(),r(u(g),o(u(x),l(u(S))),{default:d(()=>[i(u(h)),i(u(m),null,{default:d(()=>[c(e.$slots,`default`)]),_:3})]),_:3},16))}});export{v as default};