@soybeanjs/ui 0.28.2 → 0.29.0-beta.2

package/README.zh-CN.md

@@ -1,10 +1,4 @@
-<p align="center">
-  <a href="https://github.com/soybeanjs/soybean-ui">
-    <img src="./public/logo.svg" alt="Logo" width="150" />
-  </a>
-</p>
-
-# SoybeanUI
+# @soybeanjs/ui
 
 [English](./README.md) | 中文
 
@@ -13,180 +7,37 @@
 [![npm downloads](https://img.shields.io/npm/dt/@soybeanjs/ui)](https://www.npmjs.com/package/@soybeanjs/ui)
 [![github stars](https://img.shields.io/github/stars/soybeanjs/soybean-ui)](https://github.com/soybeanjs/soybean-ui)
 
-SoybeanUI 是一个优雅、现代、可访问且高质量的 UI 组件库，具有 shadcn-like 设计，适用于 Vue 3，构建在强大的 Headless 基础之上。它提供了一套全面、可访问、可定制且高性能的组件。
-
-## 📚 架构
-
-SoybeanUI 采用严格的**双层分离**设计：
-
-```
-┌─────────────────────────────────────────┐
-│           @soybeanjs/ui (src/)          │
-│  S 前缀组件   (SButton、SDialog…)        │
-│  UnoCSS 类名 · @soybeanjs/cva            │
-│  provideXUi(ui)  ──────────────────┐    │
-└────────────────────────────────────┼────┘
-                                     │ 样式注入
-┌────────────────────────────────────▼────┐
-│     @soybeanjs/headless (headless/)     │
-│  逻辑 · 状态 · A11y · 键盘导航             │
-│  useUiContext() 读取注入的样式类名      │
-│  零样式 — 可配合任意 CSS 方案         │
-└─────────────────────────────────────────┘
-```
-
-### 包结构
-
-| 包                      | 职责                                         | 组件数量                        |
-| ----------------------- | -------------------------------------------- | ------------------------------- |
-| **@soybeanjs/headless** | 逻辑、状态、a11y，零样式                     | 95 个组件目录，25 个 composable |
-| **@soybeanjs/ui**       | 样式包装层。UnoCSS + `@soybeanjs/cva` recipe | 91 个带 `S` 前缀的组件          |
+一套优雅、现代、可访问的、具有 shadcn 风格设计的 Vue 3 UI 组件库，基于 `@soybeanjs/headless` 构建。
 
-**数据流严格单向**：`headless` → `src`。样式层不会导入 headless 的内部实现，而是通过 `provideXUi(computedUi)` 注入样式 token，headless 组件再通过 `useUiContext()` 读取。
+## 📖 简介
 
-部分多插槽 headless 组件还会暴露 `Compact` 聚合层，例如 `AccordionCompact` 和 `TableCompact`。它们把条目遍历以及默认内容 / 图标组合放在 headless 层完成，而 UI 层只负责样式和 props 转发。
-
-目前采用这类 Compact 约定式组合的能力还覆盖了 card、date-field、dialog、editable、hover-card、layout、navigation-menu、pagination、popover、stepper 等稳定结构场景。
-
-### 样式注入机制
-
-每个多插槽的 headless 组件都有对应的 `provide{Name}Ui` 函数。样式层通过 `@soybeanjs/cva` 的 recipe 计算类名后注入：
+`@soybeanjs/ui` 提供开箱即用的带样式组件，由 UnoCSS 和 `@soybeanjs/cva` class-variance 配方驱动。每个组件都是对应 `@soybeanjs/headless` 原语的 `S`-前缀包装层，遵循 **样式注入** 模式：样式包装层计算类名并通过 `provide{Name}Ui` 注入，headless 组件通过 `useUiContext()` 读取。
 
 ```ts
-// 样式包装层 (src/) 中
+// 样式注入 — 单向数据流
 const ui = computed(() => accordionVariants({ size: props.size }, props.ui, { root: props.class }));
 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` 配置，应用于整个组件树，并支持 RTL 布局切换
-
-### 语言支持
-
-`ConfigProvider` 当前支持以下 locale 文案包：
-
-| 代码    | 语言         |
-| ------- | ------------ |
-| `zh-CN` | 简体中文     |
-| `zh-TW` | 繁體中文     |
-| `en`    | 英语         |
-| `ar`    | 阿拉伯语     |
-| `ja`    | 日语         |
-| `ko`    | 韩语         |
-| `de`    | 德语         |
-| `fr`    | 法语         |
-| `es`    | 西班牙语     |
-| `pt-BR` | 巴西葡萄牙语 |
-| `ru`    | 俄语         |
-| `tr`    | 土耳其语     |
-| `id`    | 印度尼西亚语 |
-
-默认只有 `en` 和 `zh-CN` 会被预注册。`registerLocale` 支持两种注册方式：
-
-- 直接传入 `LocaleRegistry` 对象。`@soybeanjs/headless/locale/{code}` 导出的内置语言文件已经是这种结构，并且自带 `dir` 元数据。
-- 传入 locale key 和 `LocaleMessages`，用于快速注册一个轻量自定义语言。
-
-简写形式 `registerLocale(key, messages)` 会将 key 作为语言名，并在未显式提供方向时回退到 `ltr`。如果你需要像 `ar` 这样的 `rtl` 元数据，请优先使用对象形式。
-
-```ts
-import { en, registerLocale } from '@soybeanjs/headless/locale';
-import type { LocaleMessages } from '@soybeanjs/headless/locale';
-import ar from '@soybeanjs/headless/locale/ar';
-
-registerLocale(ar);
-
-const customMessages: LocaleMessages = {
-  ...en.messages,
-  pagination: {
-    ...en.messages.pagination,
-    nextPage: '下一页 →',
-    prevPage: '← 上一页'
-  }
-};
-
-registerLocale('custom', customMessages);
-```
-
-### 包导出
-
-**@soybeanjs/headless** 提供精细化子路径导出：
-
-```ts
-import { AccordionRoot } from '@soybeanjs/headless'; // 所有组件
-import { useControllableState } from '@soybeanjs/headless/composables'; // 25 个 composable
-import { transformPropsToContext } from '@soybeanjs/headless/shared'; // 纯 TS 工具
-import { createMonth } from '@soybeanjs/headless/date'; // 日期工具
-import * as Headless from '@soybeanjs/headless/namespaced'; // 命名空间导入
-import type { AccordionUiSlot } from '@soybeanjs/headless/accordion'; // 单组件类型
-import type { UiClass } from '@soybeanjs/headless/types'; // 共享类型导出
-```
-
-**@soybeanjs/ui** 导出：
-
-```ts
-import { SButton, SAccordion } from '@soybeanjs/ui'; // 所有组件
-import '@soybeanjs/ui/styles.css'; // 预构建的 UnoCSS 样式表
-// 同时提供：@soybeanjs/ui/nuxt · @soybeanjs/ui/resolver
-```
-
-## 🛠 开发工作流
-
-如果您在仓库内新增公共组件、调整导出入口或修改 API 描述，请通过官方脚本同步生成产物，而不是手动编辑生成文件。
-
-```bash
-pnpm sui headless                 # 同步 headless 组件名称与命名空间导出
-pnpm sui ui                       # 同步 ui 组件名称
-pnpm sui api                      # 重新生成 docs api json 与 locale 英文基线数据
-pnpm sui api-locales              # 仅刷新 api locale 模板数据
-pnpm sui changelog                # 重新生成 docs changelog json 与 locale 英文基线数据
-pnpm sui api-translate -- --locale zh-CN
-pnpm sui changelog-translate -- --locale zh-CN
-```
-
-当前文档站默认通过 `UsageCode`、`PlaygroundGallery` 与 `ComponentApi` 渲染组件文档；组件详情页与 `/releases` 还会消费 `docs/src/generated/changelog/` 和 `docs/src/generated/changelog-locales/` 下的版本日志生成数据。
-
-因此，一旦公共 API 或示例交付面变化，也要同步维护 docs、playground 示例和 API 生成数据；如果调整了 changelog 映射、发布页展示或 changelog locale 模板，也要同步更新 changelog 生成数据。
-
 ## 📦 安装
 
-### 使用带样式的 UI 库 (推荐)
-
-如果您想要具有现代设计的现成组件：
-
 ```bash
 pnpm add @soybeanjs/ui
 ```
 
-### 使用 Headless 库
-
-如果您想从头开始构建自己的设计系统：
-
-```bash
-pnpm add @soybeanjs/headless
-```
-
 ## 🚀 使用方法
 
-### @soybeanjs/ui
-
-1. **引入样式**
+### 1. 引入样式
 
-   在您的主入口文件 (例如 `main.ts`) 中引入 CSS 文件：
+在主入口文件（如 `main.ts`）中引入预构建的 UnoCSS 样式表：
 
 ```ts
 import '@soybeanjs/ui/styles.css';
 ```
 
-2. **全局注册 (可选)**
+### 2. 按需引入（推荐）
 
-   您可以全局注册组件，也可以按需引入。
-
-3. **按需引入 (推荐)**
-
-   我们推荐使用 `unplugin-vue-components` 来自动引入组件。
+使用 `unplugin-vue-components` 配合内置解析器实现自动导入：
 
 ```ts
 // vite.config.ts
@@ -202,7 +53,7 @@ export default defineConfig({
 });
 ```
 
-4. **Nuxt 模块**
+### 3. Nuxt 模块
 
 ```ts
 // nuxt.config.ts
@@ -211,37 +62,152 @@ export default defineNuxtConfig({
 });
 ```
 
-### @soybeanjs/headless
+### 4. 直接引入
 
-Headless 组件提供功能但不包含样式。
+```vue
+<script setup>
+import { SButton, SDialog } from '@soybeanjs/ui';
+</script>
+
+<template>
+  <SDialog>
+    <SButton>打开对话框</SButton>
+  </SDialog>
+</template>
+```
+
+## ✨ 特性
 
-对于数据驱动的多插槽场景，如果组件提供了 `Compact` 版本，优先使用它。它是 headless 层的约定式组合入口，而基础分片仍然保留给需要完全手动拼装的场景。
+- **shadcn 风格设计**: 现代、简洁的美学，受 shadcn/ui 启发。
+- **可访问性**: 基于 `@soybeanjs/headless` 原语构建，全面支持 WAI-ARIA。
+- **RTL 就绪**: 通过 `ConfigProvider` 即可切换 LTR / RTL 布局。
+- **多级自定义**: 通过 `ui` prop 覆盖单个插槽类名，也可替换整个样式层。
+- **主题系统**: 8 种语义色彩和 6 种尺寸，通过 `ConfigProvider` 控制。
+- **轻量可摇树**: 按需引入，每个组件独立 Tree-shakable。
+- **类型安全**: 严格 TypeScript 编写，完整类型支持。
+- **Nuxt 就绪**: 提供官方 Nuxt 模块，支持自动注册。
+- **unplugin 支持**: 提供 `unplugin-vue-components` 自动导入解析器。
+
+## 🎨 主题系统
+
+### 主题色彩
+
+| 色彩            | Token         | 用途                 |
+| --------------- | ------------- | -------------------- |
+| **Primary**     | `primary`     | 主要操作、激活状态   |
+| **Destructive** | `destructive` | 删除、错误、危险操作 |
+| **Success**     | `success`     | 确认、成功状态       |
+| **Warning**     | `warning`     | 警告、待处理状态     |
+| **Info**        | `info`        | 信息提示             |
+| **Carbon**      | `carbon`      | 中性背景、表面色     |
+| **Secondary**   | `secondary`   | 次要操作、弱化元素   |
+| **Accent**      | `accent`      | 高亮、徽章           |
+
+### 主题尺寸
+
+| 尺寸  | 基准 (rem) | 像素对照     |
+| ----- | ---------- | ------------ |
+| `xs`  | 0.75       | 12px         |
+| `sm`  | 0.875      | 14px         |
+| `md`  | 1          | 16px（默认） |
+| `lg`  | 1.125      | 18px         |
+| `xl`  | 1.25       | 20px         |
+| `2xl` | 1.5        | 24px         |
 
 ```vue
 <script setup>
-import { AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent } from '@soybeanjs/headless';
+import { SConfigProvider, SButton } from '@soybeanjs/ui';
 </script>
 
 <template>
-  <AccordionRoot>
-    <AccordionItem value="item-1">
-      <AccordionTrigger>Is it accessible?</AccordionTrigger>
-      <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
-    </AccordionItem>
-  </AccordionRoot>
+  <SConfigProvider :theme="{ color: 'primary', size: 'md' }">
+    <SButton>点击我</SButton>
+  </SConfigProvider>
 </template>
 ```
 
-## ✨ 特性
+## 🌐 语言支持
+
+`@soybeanjs/ui` 通过 `ConfigProvider` 继承 `@soybeanjs/headless` 的国际化支持：
+
+| 代码    | 语言         |
+| ------- | ------------ |
+| `zh-CN` | 简体中文     |
+| `zh-TW` | 繁體中文     |
+| `en`    | 英语         |
+| `ar`    | 阿拉伯语     |
+| `ja`    | 日语         |
+| `ko`    | 韩语         |
+| `de`    | 德语         |
+| `fr`    | 法语         |
+| `es`    | 西班牙语     |
+| `pt-BR` | 巴西葡萄牙语 |
+| `ru`    | 俄语         |
+| `tr`    | 土耳其语     |
+| `id`    | 印度尼西亚语 |
+
+```vue
+<template>
+  <SConfigProvider :locale="zhCN">
+    <App />
+  </SConfigProvider>
+</template>
+```
+
+## 📚 包结构
+
+```
+packages/ui/src/
+├── components/    # 86 个样式组件目录（SButton、SDialog、SSelect…）
+├── styles/        # UnoCSS 样式配方和层级定义
+├── theme/         # 主题 Token、色彩梯度和尺寸映射
+├── constants/     # 组件和主题常量
+├── nuxt/          # Nuxt 模块入口
+├── resolver/      # unplugin-vue-components 解析器
+└── index.ts       # 主 barrel 导出
+```
+
+### 包导出
+
+```ts
+import { SButton, SAccordion } from '@soybeanjs/ui'; // 所有组件
+import '@soybeanjs/ui/styles.css'; // 预构建 UnoCSS 样式表
+// 另见: @soybeanjs/ui/nuxt · @soybeanjs/ui/resolver
+```
+
+## 🧩 组件
+
+`@soybeanjs/ui` 提供 86 个 `S`-前缀样式组件，每个都包装一个 `@soybeanjs/headless` 原语：
+
+| 分类         | 组件                                                                |
+| ------------ | ------------------------------------------------------------------- |
+| **布局**     | `SAccordion`、`SCard`、`SDialog`、`SDrawer`、`SPopover`、`STooltip` |
+| **表单**     | `SButton`、`SCheckbox`、`SInput`、`SSelect`、`SSwitch`、`STextarea` |
+| **导航**     | `SBreadcrumb`、`SPagination`、`SStepper`、`STabs`                   |
+| **数据**     | `STable`、`SDataList`、`STree`                                      |
+| **反馈**     | `SAlert`、`SBadge`、`SToast`、`SProgress`                           |
+| **排版**     | `SHeading`、`SText`、`SCode`、`SKbd`                                |
+| **日期时间** | `SCalendar`、`SDatePicker`、`STimePicker`                           |
+| **媒体**     | `SAvatar`、`SCarousel`、`SImage`                                    |
+
+## 🔧 自定义组件
+
+通过 `ui` prop 覆盖单个插槽的类名：
+
+```vue
+<template>
+  <SAccordion :ui="{ trigger: 'bg-blue-100 hover:bg-blue-200 rounded-lg' }">
+    <SAccordionItem value="item-1">
+      <SAccordionTrigger>自定义样式的触发器</SAccordionTrigger>
+      <SAccordionContent>这里是内容</SAccordionContent>
+    </SAccordionItem>
+  </SAccordion>
+</template>
+```
+
+## 📖 文档
 
-- **可访问性**：遵循 WAI-ARIA 模式，内置角色、焦点管理与键盘导航。
-- **RTL 就绪**：通过 `ConfigProvider` 即可在已支持组件间切换 LTR / RTL 布局。
-- **Headless 优先**：逻辑与样式完全分离—单独使用 `@soybeanjs/headless` 可构建任意设计系统。
-- **类型安全**：严格 TypeScript 编写，所有 props、emits、slot 及 context 均有完整类型。
-- **多级自定义**：通过 `ui` prop 覆盖单个橪位类名，也可替换整个样式层。
-- **轻量可摇树**：每个组件独立 Tree-shakable，按需引入。
-- **Nuxt 就绪**：提供官方 Nuxt 模块，支持组件自动注册（`@soybeanjs/ui/nuxt`）。
-- **unplugin 支持**：提供 `unplugin-vue-components` 自动导入解析器（`@soybeanjs/ui/resolver`）。
+完整文档、Playground 示例和组件 API 参考，请访问 [SoybeanUI 文档站点](https://soybeanjs.github.io/soybean-ui)。
 
 ## 💝 致谢
 

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

@@ -3,11 +3,11 @@ import { AlertProps, AlertSlots } from "./types.js";
 //#region src/components/alert/alert.vue.d.ts
 type __VLS_Slots = AlertSlots;
 declare const __VLS_base: import("vue").DefineComponent<AlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-  "update:open": (open: boolean) => any;
   close: (event: PointerEvent) => any;
+  "update:open": (open: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<AlertProps> & Readonly<{
-  "onUpdate:open"?: ((open: boolean) => any) | undefined;
   onClose?: ((event: PointerEvent) => any) | undefined;
+  "onUpdate:open"?: ((open: boolean) => any) | undefined;
 }>, {
   open: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -5,8 +5,8 @@ import { AutocompleteSingleOptionData } from "@soybeanjs/headless/autocomplete";
 declare const __VLS_export: <T extends AutocompleteSingleOptionData = AutocompleteSingleOptionData>(__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<{
   props: import("vue").PublicProps & __VLS_PrettifyLocal<AutocompleteProps<T> & {
     onSelect?: ((item: T) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     onHighlight?: ((payload?: import("@soybeanjs/headless").AutocompleteHighlightPayload | undefined) => any) | undefined;
   }> & (typeof globalThis extends {
     __VLS_PROPS_FALLBACK: infer P;
@@ -14,7 +14,7 @@ declare const __VLS_export: <T extends AutocompleteSingleOptionData = Autocomple
   expose: (exposed: {}) => void;
   attrs: any;
   slots: AutocompleteSlots<T>;
-  emit: ((evt: "select", item: T) => void) & ((evt: "update:modelValue", value: string) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "highlight", payload?: import("@soybeanjs/headless").AutocompleteHighlightPayload | undefined) => void);
+  emit: ((evt: "select", item: T) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: string) => void) & ((evt: "highlight", payload?: import("@soybeanjs/headless").AutocompleteHighlightPayload | undefined) => void);
 }>) => import("vue").VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -16,8 +16,8 @@ declare const __VLS_base: import("vue").DefineComponent<BacktopProps, {}, {}, {}
   icon: string;
   size: ThemeSize;
   color: ThemeColor;
-  shape: ButtonShape;
   variant: ButtonVariant;
+  shape: ButtonShape;
   shadow: ButtonShadow;
   fitContent: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/button/button-icon.vue.d.ts

@@ -4,8 +4,8 @@ import { ButtonIconProps } from "./types.js";
 //#region src/components/button/button-icon.vue.d.ts
 declare const __VLS_export: import("vue").DefineComponent<ButtonIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonIconProps> & Readonly<{}>, {
   color: ThemeColor;
-  shape: ButtonShape;
   variant: ButtonVariant;
+  shape: ButtonShape;
   fitContent: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/button/button-link.vue.d.ts

@@ -11,9 +11,9 @@ type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ButtonLinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonLinkProps> & Readonly<{}>, {
-  replace: boolean;
   variant: ButtonVariant;
   disabled: boolean;
+  replace: boolean;
   external: boolean;
   viewTransition: boolean;
   noRel: boolean;

package/dist/components/button/button-loading.vue.d.ts

@@ -17,9 +17,9 @@ type __VLS_Slots = {} & {
   trailing?: (props: typeof __VLS_33) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ButtonLoadingProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonLoadingProps> & Readonly<{}>, {
-  loadingIcon: string | import("vue").Component | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  loadingIcon: string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-  }> | null;
+  }> | import("vue").Component | null;
   loadingPosition: Align;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/color-picker/color-picker.vue.d.ts

@@ -2,7 +2,6 @@ import { ColorPickerProps } from "./types.js";
 
 //#region src/components/color-picker/color-picker.vue.d.ts
 declare const __VLS_export: import("vue").DefineComponent<ColorPickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-  "update:modelValue": (value: string) => any;
   "update:open": (value: boolean) => any;
   escapeKeyDown: (event: KeyboardEvent) => any;
   pointerDownOutside: (event: import("@soybeanjs/headless").PointerDownOutsideEvent) => any;
@@ -10,11 +9,11 @@ declare const __VLS_export: import("vue").DefineComponent<ColorPickerProps, {},
   interactOutside: (event: import("@soybeanjs/headless").PointerDownOutsideEvent | import("@soybeanjs/headless").FocusOutsideEvent) => any;
   openAutoFocus: (event: Event) => any;
   closeAutoFocus: (event: Event) => any;
+  "update:modelValue": (value: string) => any;
   change: (value: string) => any;
   "update:color": (value: import("@soybeanjs/headless/types").NormalizedColor) => any;
   "update:format": (value: import("@soybeanjs/headless/types").ColorFormat) => any;
 }, string, import("vue").PublicProps, Readonly<ColorPickerProps> & Readonly<{
-  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
   "onUpdate:open"?: ((value: boolean) => any) | undefined;
   onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
   onPointerDownOutside?: ((event: import("@soybeanjs/headless").PointerDownOutsideEvent) => any) | undefined;
@@ -22,15 +21,16 @@ declare const __VLS_export: import("vue").DefineComponent<ColorPickerProps, {},
   onInteractOutside?: ((event: import("@soybeanjs/headless").PointerDownOutsideEvent | import("@soybeanjs/headless").FocusOutsideEvent) => any) | undefined;
   onOpenAutoFocus?: ((event: Event) => any) | undefined;
   onCloseAutoFocus?: ((event: Event) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
   onChange?: ((value: string) => any) | undefined;
   "onUpdate:color"?: ((value: import("@soybeanjs/headless/types").NormalizedColor) => any) | undefined;
   "onUpdate:format"?: ((value: import("@soybeanjs/headless/types").ColorFormat) => any) | undefined;
 }>, {
   open: boolean;
+  showArrow: boolean;
   showAlpha: boolean;
   showFields: boolean;
   showSwatches: boolean;
-  showArrow: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

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

@@ -4,7 +4,6 @@ import { ComboboxProps, ComboboxSlots } from "./types.js";
 declare const __VLS_export: <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<{
   props: import("vue").PublicProps & __VLS_PrettifyLocal<ComboboxProps<M> & {
     onSelect?: ((event: import("@soybeanjs/headless").SelectEvent<string>) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: M extends true ? string[] : string) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("@soybeanjs/headless").PointerDownOutsideEvent) => any) | undefined;
@@ -12,6 +11,7 @@ declare const __VLS_export: <M extends boolean = false>(__VLS_props: NonNullable
     onInteractOutside?: ((event: import("@soybeanjs/headless").PointerDownOutsideEvent | import("@soybeanjs/headless").FocusOutsideEvent) => any) | undefined;
     onOpenAutoFocus?: ((event: Event) => any) | undefined;
     onCloseAutoFocus?: ((event: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: M extends true ? string[] : string) => any) | undefined;
     onHighlight?: ((payload?: import("@soybeanjs/headless/composables").CollectionItemData<import("@soybeanjs/headless").ListboxCollectionItemData> | undefined) => any) | undefined;
     onPlaced?: (() => any) | undefined;
   }> & (typeof globalThis extends {
@@ -20,7 +20,7 @@ declare const __VLS_export: <M extends boolean = false>(__VLS_props: NonNullable
   expose: (exposed: {}) => void;
   attrs: any;
   slots: ComboboxSlots<M>;
-  emit: ((evt: "select", event: import("@soybeanjs/headless").SelectEvent<string>) => void) & ((evt: "update:modelValue", value: M extends true ? string[] : string) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: import("@soybeanjs/headless").PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: import("@soybeanjs/headless").FocusOutsideEvent) => void) & ((evt: "interactOutside", event: import("@soybeanjs/headless").PointerDownOutsideEvent | import("@soybeanjs/headless").FocusOutsideEvent) => void) & ((evt: "openAutoFocus", event: Event) => void) & ((evt: "closeAutoFocus", event: Event) => void) & ((evt: "highlight", payload?: import("@soybeanjs/headless/composables").CollectionItemData<import("@soybeanjs/headless").ListboxCollectionItemData> | undefined) => void) & ((evt: "placed") => void);
+  emit: ((evt: "select", event: import("@soybeanjs/headless").SelectEvent<string>) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: import("@soybeanjs/headless").PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: import("@soybeanjs/headless").FocusOutsideEvent) => void) & ((evt: "interactOutside", event: import("@soybeanjs/headless").PointerDownOutsideEvent | import("@soybeanjs/headless").FocusOutsideEvent) => void) & ((evt: "openAutoFocus", event: Event) => void) & ((evt: "closeAutoFocus", event: Event) => void) & ((evt: "update:modelValue", value: M extends true ? string[] : string) => void) & ((evt: "highlight", payload?: import("@soybeanjs/headless/composables").CollectionItemData<import("@soybeanjs/headless").ListboxCollectionItemData> | undefined) => void) & ((evt: "placed") => void);
 }>) => import("vue").VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/components/config-provider/config-provider.js

@@ -1 +1 @@
-import{themeSizeMap as e}from"../../theme/config.js";import"../../theme/index.js";import t from"../dialog/dialog-provider.js";import n from"../progress/progress-provider.js";import r from"../toast/toast-provider.js";import{provideConfigProviderContext as i}from"./context.js";import a from"../icon/icon.js";import{createBlock as o,createCommentVNode as s,createVNode as c,defineComponent as l,guardReactiveProps as u,h as d,mergeProps as f,normalizeProps as p,openBlock as m,renderSlot as h,shallowRef as g,unref as _,watch as v,watchEffect as y,withCtx as b}from"vue";import{useOmitProps as x}from"@soybeanjs/headless/composables";import{useStyleTag as S}from"@vueuse/core";import{ConfigProvider as C}from"@soybeanjs/headless/config-provider";import{isClient as w,isNuxt as T,transformPropsToContext as E}from"@soybeanjs/headless/shared";import{createShadcnTheme as D,isDefaultPresetOptions as O}from"@soybeanjs/shadcn-theme";const k=l({name:`SConfigProvider`,__name:`config-provider`,props:{theme:{default:()=>({})},size:{default:`md`},iconify:{default:()=>({width:`1.25em`,height:`1.25em`})},progress:{},toast:{},customToast:{type:Boolean},dir:{},locale:{},nonce:{},tooltip:{},iconRender:{},messages:{}},setup(l){let k=l,A=x(k,[`iconRender`,`theme`,`size`,`iconify`,`progress`,`toast`,`customToast`]),j=k.iconRender??(e=>d(a,{icon:e,ssr:T}));i({...E(k),iconRender:j});let M=g(``),N=()=>{let{getCss:e}=D(k.theme);M.value=e(k.theme,k.theme.radius)};return S(M,{id:`__SoybeanUI_theme`}),y(()=>{if(!w)return;let t=e[k.size??`md`];document.documentElement.style.fontSize=`${t}px`},{flush:`post`}),v(()=>k.theme,()=>{w&&(O(k.theme)||N())},{deep:!0,flush:`post`,immediate:!0}),(e,i)=>(m(),o(_(C),f(_(A),{"icon-render":_(j)}),{default:b(()=>[h(e.$slots,`default`),k.customToast?s(`v-if`,!0):(m(),o(r,p(f({key:0},k.toast)),null,16)),c(t),c(n,p(u(k.progress)),null,16)]),_:3},16,[`icon-render`]))}});export{k as default};
+import{themeSizeMap as e}from"../../theme/config.js";import"../../theme/index.js";import t from"../dialog/dialog-provider.js";import n from"../progress/progress-provider.js";import r from"../toast/toast-provider.js";import{provideConfigProviderContext as i}from"./context.js";import a from"../icon/icon.js";import{createBlock as o,createCommentVNode as s,createVNode as c,defineComponent as l,guardReactiveProps as u,h as d,mergeProps as f,normalizeProps as p,openBlock as m,renderSlot as h,shallowRef as g,unref as _,watch as v,watchEffect as y,withCtx as b}from"vue";import{useOmitProps as x}from"@soybeanjs/headless/composables";import{useStyleTag as S}from"@vueuse/core";import{ConfigProvider as C}from"@soybeanjs/headless/config-provider";import{isClient as w,transformPropsToContext as T}from"@soybeanjs/headless/shared";import{createShadcnTheme as E}from"@soybeanjs/shadcn-theme";const D=l({name:`SConfigProvider`,__name:`config-provider`,props:{theme:{default:()=>({})},size:{default:`md`},iconify:{default:()=>({width:`1.25em`,height:`1.25em`})},progress:{},toast:{},customToast:{type:Boolean},dir:{},locale:{},nonce:{},tooltip:{},iconRender:{},messages:{}},setup(l){let D=l,O=x(D,[`iconRender`,`theme`,`size`,`iconify`,`progress`,`toast`,`customToast`]),k=D.iconRender??(e=>d(a,{icon:e,ssr:import.meta.env.SSR}));i({...T(D),iconRender:k});let A=g(``),j=()=>{let{getCss:e}=E(D.theme);A.value=e(D.theme,D.theme.radius)};return S(A,{id:`__SoybeanUI_theme`}),y(()=>{if(!w)return;let t=e[D.size??`md`];document.documentElement.style.fontSize=`${t}px`},{flush:`post`}),v(()=>D.theme,()=>{w&&j()},{deep:!0,flush:`post`,immediate:!0}),(e,i)=>(m(),o(_(C),f(_(O),{"icon-render":_(k)}),{default:b(()=>[h(e.$slots,`default`),D.customToast?s(`v-if`,!0):(m(),o(r,p(f({key:0},D.toast)),null,16)),c(t),c(n,p(u(D.progress)),null,16)]),_:3},16,[`icon-render`]))}});export{D as default};

package/dist/components/context-menu/context-menu-checkbox.vue.d.ts

@@ -5,7 +5,6 @@ import { DefinedValue } from "@soybeanjs/headless/types";
 declare const __VLS_export: <T extends DefinedValue = DefinedValue>(__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<{
   props: import("vue").PublicProps & __VLS_PrettifyLocal<ContextMenuCheckboxProps<T> & {
     onSelect?: ((item: import("@soybeanjs/headless").MenuCheckboxOptionData<T>, event: Event) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("@soybeanjs/headless").PointerDownOutsideEvent) => any) | undefined;
@@ -13,6 +12,7 @@ declare const __VLS_export: <T extends DefinedValue = DefinedValue>(__VLS_props:
     onInteractOutside?: ((event: import("@soybeanjs/headless").PointerDownOutsideEvent | import("@soybeanjs/headless").FocusOutsideEvent) => any) | undefined;
     onOpenAutoFocus?: ((event: Event) => any) | undefined;
     onCloseAutoFocus?: ((event: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
     onEntryFocus?: ((event: Event) => any) | undefined;
   }> & (typeof globalThis extends {
     __VLS_PROPS_FALLBACK: infer P;
@@ -20,7 +20,7 @@ declare const __VLS_export: <T extends DefinedValue = DefinedValue>(__VLS_props:
   expose: (exposed: {}) => void;
   attrs: any;
   slots: ContextMenuCheckboxSlots<T>;
-  emit: ((evt: "select", item: import("@soybeanjs/headless").MenuCheckboxOptionData<T>, event: Event) => void) & ((evt: "update:modelValue", value: T[]) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: import("@soybeanjs/headless").PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: import("@soybeanjs/headless").FocusOutsideEvent) => void) & ((evt: "interactOutside", event: import("@soybeanjs/headless").PointerDownOutsideEvent | import("@soybeanjs/headless").FocusOutsideEvent) => void) & ((evt: "openAutoFocus", event: Event) => void) & ((evt: "closeAutoFocus", event: Event) => void) & ((evt: "entryFocus", event: Event) => void);
+  emit: ((evt: "select", item: import("@soybeanjs/headless").MenuCheckboxOptionData<T>, event: Event) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: import("@soybeanjs/headless").PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: import("@soybeanjs/headless").FocusOutsideEvent) => void) & ((evt: "interactOutside", event: import("@soybeanjs/headless").PointerDownOutsideEvent | import("@soybeanjs/headless").FocusOutsideEvent) => void) & ((evt: "openAutoFocus", event: Event) => void) & ((evt: "closeAutoFocus", event: Event) => void) & ((evt: "update:modelValue", value: T[]) => void) & ((evt: "entryFocus", event: Event) => void);
 }>) => import("vue").VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/components/context-menu/context-menu-radio.vue.d.ts

@@ -5,7 +5,6 @@ import { AcceptableBooleanValue } from "@soybeanjs/headless/types";
 declare const __VLS_export: <T extends AcceptableBooleanValue = AcceptableBooleanValue>(__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<{
   props: import("vue").PublicProps & __VLS_PrettifyLocal<ContextMenuRadioProps<T> & {
     onSelect?: ((item: import("@soybeanjs/headless").MenuRadioOptionData<T>, event: Event) => any) | undefined;
-    "onUpdate:modelValue"?: ((payload: Exclude<T, undefined>) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("@soybeanjs/headless").PointerDownOutsideEvent) => any) | undefined;
@@ -13,6 +12,7 @@ declare const __VLS_export: <T extends AcceptableBooleanValue = AcceptableBoolea
     onInteractOutside?: ((event: import("@soybeanjs/headless").PointerDownOutsideEvent | import("@soybeanjs/headless").FocusOutsideEvent) => any) | undefined;
     onOpenAutoFocus?: ((event: Event) => any) | undefined;
     onCloseAutoFocus?: ((event: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((payload: Exclude<T, undefined>) => any) | undefined;
     onEntryFocus?: ((event: Event) => any) | undefined;
   }> & (typeof globalThis extends {
     __VLS_PROPS_FALLBACK: infer P;
@@ -20,7 +20,7 @@ declare const __VLS_export: <T extends AcceptableBooleanValue = AcceptableBoolea
   expose: (exposed: {}) => void;
   attrs: any;
   slots: ContextMenuRadioSlots<T>;
-  emit: ((evt: "select", item: import("@soybeanjs/headless").MenuRadioOptionData<T>, event: Event) => void) & ((evt: "update:modelValue", payload: Exclude<T, undefined>) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: import("@soybeanjs/headless").PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: import("@soybeanjs/headless").FocusOutsideEvent) => void) & ((evt: "interactOutside", event: import("@soybeanjs/headless").PointerDownOutsideEvent | import("@soybeanjs/headless").FocusOutsideEvent) => void) & ((evt: "openAutoFocus", event: Event) => void) & ((evt: "closeAutoFocus", event: Event) => void) & ((evt: "entryFocus", event: Event) => void);
+  emit: ((evt: "select", item: import("@soybeanjs/headless").MenuRadioOptionData<T>, event: Event) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: import("@soybeanjs/headless").PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: import("@soybeanjs/headless").FocusOutsideEvent) => void) & ((evt: "interactOutside", event: import("@soybeanjs/headless").PointerDownOutsideEvent | import("@soybeanjs/headless").FocusOutsideEvent) => void) & ((evt: "openAutoFocus", event: Event) => void) & ((evt: "closeAutoFocus", event: Event) => void) & ((evt: "update:modelValue", payload: Exclude<T, undefined>) => void) & ((evt: "entryFocus", event: Event) => void);
 }>) => import("vue").VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/components/date-picker/date-picker.js

@@ -1 +1 @@
-import e from"../calendar/calendar.js";import{datePickerVariants as t}from"../../styles/date-picker.js";import{computed as n,createBlock as r,createVNode as i,defineComponent as a,mergeProps as o,openBlock as s,toHandlers as c,unref as l,withCtx as u}from"vue";import{useForwardListeners as d,useOmitProps as f}from"@soybeanjs/headless/composables";import{DatePickerCompact as p,provideDatePickerUi as m}from"@soybeanjs/headless/date-picker";const h=a({name:`SDatePicker`,__name:`date-picker`,props:{class:{type:[Boolean,null,String,Object,Array]},size:{},ui:{},calendarUi:{},dateFieldProps:{},placement:{},showArrow:{type:Boolean},triggerProps:{},portalProps:{},positionerProps:{},popupProps:{},arrowProps:{},closeProps:{},disabled:{type:Boolean},dir:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean},modal:{type:Boolean},headerProps:{},headingProps:{},prevProps:{},nextProps:{},gridProps:{},gridHeadProps:{},gridBodyProps:{},gridRowProps:{},headCellProps:{},cellProps:{},cellTriggerProps:{},locale:{},modelValue:{},defaultValue:{},multiple:{},placeholder:{},defaultPlaceholder:{},readonly:{type:Boolean},pagedNavigation:{type:Boolean},preventDeselect:{type:Boolean},weekStartsOn:{},weekdayFormat:{},calendarLabel:{},fixedWeeks:{type:Boolean},maxValue:{},minValue:{},numberOfMonths:{},initialFocus:{type:Boolean},isDateDisabled:{},isDateUnavailable:{},nextPage:{},prevPage:{},disableDaysOutsideCurrentView:{type:Boolean},asChild:{type:Boolean},as:{}},emits:[`update:open`,`escapeKeyDown`,`pointerDownOutside`,`focusOutside`,`interactOutside`,`openAutoFocus`,`closeAutoFocus`,`update:modelValue`,`update:placeholder`],setup(a,{emit:h}){let g=a,_=h,v=f(g,[`class`,`size`,`ui`]),y=d(_);return m(n(()=>t({size:g.size},g.ui,{root:g.class}))),(t,n)=>(s(),r(l(p),o(l(v),c(l(y))),{default:u(({calendarProps:t,close:n,onUpdateModelValue:r,onUpdatePlaceholder:s})=>[i(e,o(t,{size:a.size,ui:a.calendarUi,"onUpdate:modelValue":e=>{r(e),n()},"onUpdate:placeholder":s}),null,16,[`size`,`ui`,`onUpdate:modelValue`,`onUpdate:placeholder`])]),_:1},16))}});export{h as default};
+import e from"../calendar/calendar.js";import{datePickerVariants as t}from"../../styles/date-picker.js";import{computed as n,createBlock as r,createVNode as i,defineComponent as a,mergeProps as o,openBlock as s,toHandlers as c,unref as l,withCtx as u}from"vue";import{useForwardListeners as d,useOmitProps as f}from"@soybeanjs/headless/composables";import{DatePickerCompact as p,provideDatePickerUi as m}from"@soybeanjs/headless/date-picker";const h=a({name:`SDatePicker`,__name:`date-picker`,props:{class:{type:[Boolean,null,String,Object,Array]},size:{},ui:{},calendarUi:{},dateFieldProps:{},placement:{},showArrow:{type:Boolean},triggerProps:{},portalProps:{},positionerProps:{},popupProps:{},arrowProps:{},closeProps:{},disabled:{type:Boolean},dir:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean},modal:{type:Boolean},headerProps:{},headingProps:{},prevProps:{},nextProps:{},gridProps:{},gridHeadProps:{},gridBodyProps:{},gridRowProps:{},headCellProps:{},cellProps:{},cellTriggerProps:{},locale:{},modelValue:{},defaultValue:{},multiple:{type:Boolean},placeholder:{},defaultPlaceholder:{},readonly:{type:Boolean},pagedNavigation:{type:Boolean},preventDeselect:{type:Boolean},weekStartsOn:{},weekdayFormat:{},calendarLabel:{},fixedWeeks:{type:Boolean},maxValue:{},minValue:{},numberOfMonths:{},initialFocus:{type:Boolean},isDateDisabled:{},isDateUnavailable:{},nextPage:{},prevPage:{},disableDaysOutsideCurrentView:{type:Boolean},asChild:{type:Boolean},as:{}},emits:[`update:open`,`escapeKeyDown`,`pointerDownOutside`,`focusOutside`,`interactOutside`,`openAutoFocus`,`closeAutoFocus`,`update:modelValue`,`update:placeholder`],setup(a,{emit:h}){let g=a,_=h,v=f(g,[`class`,`size`,`ui`]),y=d(_);return m(n(()=>t({size:g.size},g.ui,{root:g.class}))),(t,n)=>(s(),r(l(p),o(l(v),c(l(y))),{default:u(({calendarProps:t,close:n,onUpdateModelValue:r,onUpdatePlaceholder:s})=>[i(e,o(t,{size:a.size,ui:a.calendarUi,"onUpdate:modelValue":e=>{r(e),n()},"onUpdate:placeholder":s}),null,16,[`size`,`ui`,`onUpdate:modelValue`,`onUpdate:placeholder`])]),_:1},16))}});export{h as default};

package/dist/components/date-picker/date-picker.vue.d.ts

@@ -2,7 +2,6 @@ import { DatePickerProps } from "./types.js";
 
 //#region src/components/date-picker/date-picker.vue.d.ts
 declare const __VLS_export: import("vue").DefineComponent<DatePickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-  "update:modelValue": (date: import("@internationalized/date").DateValue | undefined) => any;
   "update:open": (value: boolean) => any;
   escapeKeyDown: (event: KeyboardEvent) => any;
   pointerDownOutside: (event: import("@soybeanjs/headless").PointerDownOutsideEvent) => any;
@@ -10,9 +9,9 @@ declare const __VLS_export: import("vue").DefineComponent<DatePickerProps, {}, {
   interactOutside: (event: import("@soybeanjs/headless").PointerDownOutsideEvent | import("@soybeanjs/headless").FocusOutsideEvent) => any;
   openAutoFocus: (event: Event) => any;
   closeAutoFocus: (event: Event) => any;
+  "update:modelValue": (date: import("@internationalized/date").DateValue | undefined) => any;
   "update:placeholder": (date: import("@internationalized/date").DateValue) => any;
 }, string, import("vue").PublicProps, Readonly<DatePickerProps> & Readonly<{
-  "onUpdate:modelValue"?: ((date: import("@internationalized/date").DateValue | undefined) => any) | undefined;
   "onUpdate:open"?: ((value: boolean) => any) | undefined;
   onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
   onPointerDownOutside?: ((event: import("@soybeanjs/headless").PointerDownOutsideEvent) => any) | undefined;
@@ -20,6 +19,7 @@ declare const __VLS_export: import("vue").DefineComponent<DatePickerProps, {}, {
   onInteractOutside?: ((event: import("@soybeanjs/headless").PointerDownOutsideEvent | import("@soybeanjs/headless").FocusOutsideEvent) => any) | undefined;
   onOpenAutoFocus?: ((event: Event) => any) | undefined;
   onCloseAutoFocus?: ((event: Event) => any) | undefined;
+  "onUpdate:modelValue"?: ((date: import("@internationalized/date").DateValue | undefined) => any) | undefined;
   "onUpdate:placeholder"?: ((date: import("@internationalized/date").DateValue) => any) | undefined;
 }>, {
   open: boolean;