@soybeanjs/ui 0.16.0 → 0.18.0

package/README.md

@@ -35,15 +35,17 @@ SoybeanUI is built on a strict **two-layer separation** model:
 
 ### 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    |
+| Package                 | Role                              | Components                        |
+| ----------------------- | --------------------------------- | --------------------------------- |
+| **@soybeanjs/headless** | Logic, state, a11y. Zero styles.  | 95 component dirs, 25 composables |
+| **@soybeanjs/ui**       | Styled wrappers. UnoCSS + `tv()`. | 91 `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.
 
+Current Compact-style coverage also includes flows such as card, date-field, dialog, editable, hover-card, layout, navigation-menu, pagination, popover, and stepper, when those structures are stable enough to live in headless.
+
 ### Style Injection
 
 Every multi-slot headless component exposes a `provide{Name}Ui` function. The styled wrapper computes classes using `tailwind-variants` and injects them:
@@ -73,10 +75,12 @@ provideAccordionUi(ui); // headless reads this via useAccordionUi()
 
 ```ts
 import { AccordionRoot } from '@soybeanjs/headless'; // all components
-import { useControllableState } from '@soybeanjs/headless/composables'; // 26 composables
+import { useControllableState } from '@soybeanjs/headless/composables'; // 25 composables
 import { transformPropsToContext } from '@soybeanjs/headless/shared'; // pure TS utils
+import { createMonth } from '@soybeanjs/headless/date'; // shared date helpers
 import * as Headless from '@soybeanjs/headless/namespaced'; // namespace object
 import type { AccordionUiSlot } from '@soybeanjs/headless/accordion'; // per-component
+import type { UiClass } from '@soybeanjs/headless/types'; // shared type surface
 ```
 
 **@soybeanjs/ui** exports:
@@ -87,6 +91,24 @@ import '@soybeanjs/ui/styles.css'; // pre-built UnoCSS stylesheet
 // Also: @soybeanjs/ui/nuxt · @soybeanjs/ui/resolver
 ```
 
+## 🛠 Development Workflow
+
+If you contribute new public components, exports, or API descriptions, keep generated surfaces in sync through the official scripts instead of editing generated files by hand.
+
+```bash
+pnpm gen:headless     # sync headless component names and namespaced exports
+pnpm gen:ui           # sync ui component names
+pnpm gen:api          # regenerate docs api json and locale baseline data
+pnpm gen:api:i18n     # refresh api locale template data only
+pnpm gen:changelog    # regenerate docs changelog json and locale baseline data
+pnpm translate:api:i18n -- --locale zh-CN
+pnpm translate:changelog:i18n -- --locale zh-CN
+```
+
+The docs site now renders component docs through `UsageCode`, `PlaygroundGallery`, and `ComponentApi`. Component detail pages and `/releases` also read generated changelog data from `docs/src/generated/changelog/` and `docs/src/generated/changelog-locales/`.
+
+Public API or demo delivery changes should keep docs, playground examples, and generated API data aligned. Changelog mapping, release presentation, and changelog locale template changes should keep generated changelog data aligned as well.
+
 ## 📦 Installation
 
 ### Using the Styled UI Library (Recommended)

package/README.zh-CN.md

@@ -35,15 +35,17 @@ SoybeanUI 采用严格的**双层分离**设计：
 
 ### 包结构
 
-| 包                      | 职责                        | 组件数量                      |
-| ----------------------- | --------------------------- | ----------------------------- |
-| **@soybeanjs/headless** | 逻辑、状态、a11y，零样式    | 50 个原语件，26 个 composable |
-| **@soybeanjs/ui**       | 样式包装层。UnoCSS + `tv()` | 48 个带 `S` 前缀的组件        |
+| 包                      | 职责                        | 组件数量                        |
+| ----------------------- | --------------------------- | ------------------------------- |
+| **@soybeanjs/headless** | 逻辑、状态、a11y，零样式    | 95 个组件目录，25 个 composable |
+| **@soybeanjs/ui**       | 样式包装层。UnoCSS + `tv()` | 91 个带 `S` 前缀的组件          |
 
 **数据流严格单向**：`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` 函数。样式层通过 `tailwind-variants` 计算类名后注入：
@@ -73,10 +75,12 @@ provideAccordionUi(ui); // headless 通过 useAccordionUi() 读取
 
 ```ts
 import { AccordionRoot } from '@soybeanjs/headless'; // 所有组件
-import { useControllableState } from '@soybeanjs/headless/composables'; // 26 个 composable
+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** 导出：
@@ -87,6 +91,24 @@ import '@soybeanjs/ui/styles.css'; // 预构建的 UnoCSS 样式表
 // 同时提供：@soybeanjs/ui/nuxt · @soybeanjs/ui/resolver
 ```
 
+## 🛠 开发工作流
+
+如果您在仓库内新增公共组件、调整导出入口或修改 API 描述，请通过官方脚本同步生成产物，而不是手动编辑生成文件。
+
+```bash
+pnpm gen:headless     # 同步 headless 组件名称与命名空间导出
+pnpm gen:ui           # 同步 ui 组件名称
+pnpm gen:api          # 重新生成 docs api json 与 locale 英文基线数据
+pnpm gen:api:i18n     # 仅刷新 api locale 模板数据
+pnpm gen:changelog    # 重新生成 docs changelog json 与 locale 英文基线数据
+pnpm translate:api:i18n -- --locale zh-CN
+pnpm translate:changelog:i18n -- --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 库 (推荐)

package/dist/_virtual/_rolldown/runtime.js

@@ -0,0 +1 @@
+var e=Object.defineProperty,t=Object.getOwnPropertyDescriptor,n=Object.getOwnPropertyNames,r=Object.prototype.hasOwnProperty,i=(t,n)=>{let r={};for(var i in t)e(r,i,{get:t[i],enumerable:!0});return n||e(r,Symbol.toStringTag,{value:`Module`}),r},a=(i,a,o,s)=>{if(a&&typeof a==`object`||typeof a==`function`)for(var c=n(a),l=0,u=c.length,d;l<u;l++)d=c[l],!r.call(i,d)&&d!==o&&e(i,d,{get:(e=>a[e]).bind(null,d),enumerable:!(s=t(a,d))||s.enumerable});return i},o=(e,t,n)=>(a(e,t,`default`),n&&a(n,t,`default`));export{i as __exportAll,o as __reExport};

package/dist/components/accordion/accordion.js

@@ -1 +1 @@
-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:{},clearable:{type:Boolean},selectionBehavior:{}},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};
+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{AccordionCompact as g,provideAccordionUi as _}from"@soybeanjs/headless/accordion";import{useForwardListeners as v,useOmitProps as y}from"@soybeanjs/headless/composables";import{keysOf as b}from"@soybeanjs/utils";const x=a({name:`SAccordion`,__name:`accordion`,props:{class:{type:[Boolean,null,String,Object,Array]},size:{},ui:{},items:{},itemProps:{},headerProps:{},triggerProps:{},contentProps:{},descriptionProps:{},collapsible:{type:Boolean},dir:{},disabled:{type:Boolean},orientation:{},unmountOnHide:{type:Boolean},modelValue:{},defaultValue:{},multiple:{},clearable:{type:Boolean},selectionBehavior:{}},emits:[`update:modelValue`],setup(a,{emit:x}){let S=a,C=x,w=m(),T=y(S,[`class`,`size`,`ui`]),E=v(C),D=n(()=>b(w).filter(e=>e!==`item`));return _(n(()=>e(t({size:S.size}),S.ui,{root:S.class}))),(e,t)=>(l(),r(p(g),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,6 +1,6 @@
 import { AccordionProps, AccordionSlots } from "./types.js";
 import * as _$vue from "vue";
-import { AccordionOptionData } from "@soybeanjs/headless";
+import { AccordionOptionData } from "@soybeanjs/headless/accordion";
 
 //#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<{

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

@@ -1,4 +1,3 @@
 import { AccordionEmits, AccordionProps, AccordionSlots } from "./types.js";
 import { _default } from "./accordion.vue.js";
-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 };
+export * from "@soybeanjs/headless/accordion";

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

@@ -1,16 +1,32 @@
 import { ThemeSize } from "../../theme/types.js";
-import { AccordionCompactEmits, AccordionCompactProps, AccordionCompactSlots, AccordionOptionData, AccordionUi, ClassValue } from "@soybeanjs/headless";
+import { AccordionCompactEmits, AccordionCompactProps, AccordionCompactSlots, AccordionOptionData, AccordionUi } from "@soybeanjs/headless/accordion";
+import { ClassValue } from "@soybeanjs/headless/types";
 
 //#region src/components/accordion/types.d.ts
+/**
+ * Properties for the Accordion component.
+ */
 interface AccordionProps<T extends AccordionOptionData = AccordionOptionData, M extends boolean = false> extends AccordionCompactProps<T, M> {
   /**
    * root class
    */
   class?: ClassValue;
+  /**
+   * Visual size of the component.
+   */
   size?: ThemeSize;
+  /**
+   * Per-slot class overrides for the component.
+   */
   ui?: Partial<AccordionUi>;
 }
+/**
+ * Events for the Accordion component.
+ */
 type AccordionEmits<M extends boolean = false> = AccordionCompactEmits<M>;
+/**
+ * Slots for the Accordion component.
+ */
 type AccordionSlots<T extends AccordionOptionData = AccordionOptionData, M extends boolean = false> = AccordionCompactSlots<T, M>;
 //#endregion
 export { AccordionEmits, AccordionProps, AccordionSlots };

package/dist/components/affix/affix.js

@@ -1 +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,defineComponent as i,guardReactiveProps as a,mergeProps as o,normalizeProps as s,openBlock as c,renderSlot as l,toHandlers as u,unref as d,withCtx as f}from"vue";import{useForwardListeners as p,useOmitProps as m}from"@soybeanjs/headless/composables";import{AffixCompact as h,provideAffixUi as g}from"@soybeanjs/headless";const _=i({name:`SAffix`,__name:`affix`,props:{class:{},ui:{},placeholderProps:{},contentProps:{},offsetTop:{},offsetBottom:{},target:{type:[String,Function,null]}},emits:[`change`],setup(i,{emit:_}){let v=i,y=_,b=m(v,[`class`,`ui`]),x=p(y);return g(n(()=>e(t(),v.ui,{content:v.class}))),(e,t)=>(c(),r(d(h),o(d(b),u(d(x))),{default:f(t=>[l(e.$slots,`default`,s(a(t)))]),_:3},16))}});export{_ as default};
+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,defineComponent as i,guardReactiveProps as a,mergeProps as o,normalizeProps as s,openBlock as c,renderSlot as l,toHandlers as u,unref as d,withCtx as f}from"vue";import{useForwardListeners as p,useOmitProps as m}from"@soybeanjs/headless/composables";import{AffixCompact as h,provideAffixUi as g}from"@soybeanjs/headless/affix";const _=i({name:`SAffix`,__name:`affix`,props:{class:{type:[Boolean,null,String,Object,Array]},ui:{},placeholderProps:{},contentProps:{},offsetTop:{},offsetBottom:{},target:{type:[String,Function,null]}},emits:[`change`],setup(i,{emit:_}){let v=i,y=_,b=m(v,[`class`,`ui`]),x=p(y);return g(n(()=>e(t(),v.ui,{content:v.class}))),(e,t)=>(c(),r(d(h),o(d(b),u(d(x))),{default:f(t=>[l(e.$slots,`default`,s(a(t)))]),_:3},16))}});export{_ as default};

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

@@ -1,2 +1,3 @@
 import { AffixEmits, AffixProps } from "./types.js";
-import { _default } from "./affix.vue.js";
+import { _default } from "./affix.vue.js";
+export * from "@soybeanjs/headless/affix";

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

@@ -1,14 +1,23 @@
-import { ClassValue } from "@soybeanjs/headless";
 import { AffixCompactEmits, AffixCompactProps, AffixUi } from "@soybeanjs/headless/affix";
+import { ClassValue } from "@soybeanjs/headless/types";
 
 //#region src/components/affix/types.d.ts
+/**
+ * Properties for the Affix component.
+ */
 interface AffixProps extends AffixCompactProps {
   /**
    * Additional class names to apply to the content element.
    */
   class?: ClassValue;
+  /**
+   * Per-slot class overrides for the component.
+   */
   ui?: Partial<AffixUi>;
 }
+/**
+ * Events for the Affix component.
+ */
 type AffixEmits = AffixCompactEmits;
 //#endregion
 export { AffixEmits, AffixProps };

package/dist/components/alert/alert.js

@@ -1 +1 @@
-import{mergeBaseVariants as e,mergeSlotVariants as t}from"../../theme/shared.js";import{miniSizeMap as n}from"../../theme/config.js";import"../../theme/index.js";import{alertVariants as r}from"./variants.js";import{buttonVariants as i}from"../button/variants.js";import{computed as a,createBlock as o,createSlots as s,defineComponent as c,mergeProps as l,openBlock as u,renderList as d,renderSlot as f,unref as p,useSlots as m,withCtx as h}from"vue";import{useOmitProps as g}from"@soybeanjs/headless/composables";import{AlertCompact as _,provideAlertUi as v}from"@soybeanjs/headless";import{keysOf as y}from"@soybeanjs/utils";const b=c({name:`SAlert`,__name:`alert`,props:{class:{},size:{},color:{},variant:{},ui:{},title:{},description:{},icon:{},closable:{type:Boolean},contentProps:{},titleProps:{},descriptionProps:{},closeProps:{},open:{type:Boolean,default:void 0}},emits:[`update:open`],setup(c,{emit:b}){let x=c,S=b,C=m(),w=g(x,[`class`,`size`,`color`,`variant`,`ui`]),T=a(()=>y(C));return v(a(()=>t(e(r({size:x.size,color:x.color,variant:x.variant}),{close:i({variant:`ghost`,color:`accent`,size:n[x.size??`md`],shape:`square`,fitContent:!0})}),x.ui,{root:x.class}))),(e,t)=>(u(),o(p(_),l(p(w),{"onUpdate:open":t[0]||=e=>S(`update:open`,e)}),s({_:2},[d(T.value,t=>({name:t,fn:h(()=>[f(e.$slots,t)])}))]),1040))}});export{b as default};
+import{mergeBaseVariants as e,mergeSlotVariants as t}from"../../theme/shared.js";import{miniSizeMap as n}from"../../theme/config.js";import"../../theme/index.js";import{alertVariants as r}from"./variants.js";import{buttonVariants as i}from"../button/variants.js";import{computed as a,createBlock as o,createSlots as s,defineComponent as c,mergeProps as l,openBlock as u,renderList as d,renderSlot as f,unref as p,useSlots as m,withCtx as h}from"vue";import{useOmitProps as g}from"@soybeanjs/headless/composables";import{keysOf as _}from"@soybeanjs/utils";import{AlertCompact as v,provideAlertUi as y}from"@soybeanjs/headless/alert";const b=c({name:`SAlert`,__name:`alert`,props:{class:{type:[Boolean,null,String,Object,Array]},size:{},color:{},variant:{},ui:{},title:{},description:{},icon:{},closable:{type:Boolean},contentProps:{},titleProps:{},descriptionProps:{},closeProps:{},open:{type:Boolean,default:void 0}},emits:[`update:open`],setup(c,{emit:b}){let x=c,S=b,C=m(),w=g(x,[`class`,`size`,`color`,`variant`,`ui`]),T=a(()=>_(C));return y(a(()=>t(e(r({size:x.size,color:x.color,variant:x.variant}),{close:i({variant:`ghost`,color:`accent`,size:n[x.size??`md`],shape:`square`,fitContent:!0})}),x.ui,{root:x.class}))),(e,t)=>(u(),o(p(v),l(p(w),{"onUpdate:open":t[0]||=e=>S(`update:open`,e)}),s({_:2},[d(T.value,t=>({name:t,fn:h(()=>[f(e.$slots,t)])}))]),1040))}});export{b as default};

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

@@ -1,5 +1,4 @@
 import { AlertVariant } from "./variants.js";
 import { AlertEmits, AlertExtendedUi, AlertProps, AlertSlots } from "./types.js";
 import { _default } from "./alert.vue.js";
-import { AlertCloseProps, AlertContentProps, AlertDescriptionProps, AlertRootEmits, AlertRootProps, AlertTitleProps } from "@soybeanjs/headless/alert";
-export { type AlertCloseProps, type AlertContentProps, type AlertDescriptionProps, type AlertRootEmits, type AlertRootProps, type AlertTitleProps };
+export * from "@soybeanjs/headless/alert";

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

@@ -1,21 +1,45 @@
 import { ThemeColor, ThemeSize } from "../../theme/types.js";
 import { AlertVariant } from "./variants.js";
-import { ClassValue } from "@soybeanjs/headless";
 import { AlertCompactEmits, AlertCompactProps, AlertCompactSlots, AlertUi } from "@soybeanjs/headless/alert";
+import { ClassValue } from "@soybeanjs/headless/types";
 
 //#region src/components/alert/types.d.ts
+/**
+ * Extended UI class overrides for the Alert component.
+ */
 type AlertExtendedUi = AlertUi;
+/**
+ * Properties for the Alert component.
+ */
 interface AlertProps extends AlertCompactProps {
   /**
    * root class
    */
   class?: ClassValue;
+  /**
+   * Visual size of the component.
+   */
   size?: ThemeSize;
+  /**
+   * Theme color of the component.
+   */
   color?: ThemeColor;
+  /**
+   * Visual variant of the component.
+   */
   variant?: AlertVariant;
+  /**
+   * Per-slot class overrides for the component.
+   */
   ui?: Partial<AlertExtendedUi>;
 }
+/**
+ * Events for the Alert component.
+ */
 type AlertEmits = AlertCompactEmits;
+/**
+ * Slots for the Alert component.
+ */
 type AlertSlots = AlertCompactSlots;
 //#endregion
 export { AlertEmits, AlertExtendedUi, AlertProps, AlertSlots };

package/dist/components/anchor/anchor.js

@@ -1 +1 @@
-import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{anchorVariants as t}from"./variants.js";import{computed as n,createBlock as r,defineComponent as i,mergeProps as a,openBlock as o,toHandlers as s,unref as c}from"vue";import{useForwardListeners as l,useOmitProps as u}from"@soybeanjs/headless/composables";import{AnchorCompact as d,provideAnchorUi as f}from"@soybeanjs/headless";const p=i({name:`SAnchor`,__name:`anchor`,props:{color:{},size:{},ui:{},class:{},sticky:{type:Boolean,default:!0},items:{},linkProps:{},indicatorProps:{},titleProps:{},subProps:{},bounds:{},dir:{},getContainer:{},getCurrentAnchor:{},modelValue:{},offsetTop:{default:0},orientation:{},replace:{type:Boolean},targetOffset:{},asChild:{type:Boolean},as:{}},emits:[`update:modelValue`,`activeChange`,`itemSelect`],setup(i,{emit:p}){let m=i,h=p,g=u(m,[`color`,`size`,`ui`,`class`,`sticky`]),_=l(h),v=n(()=>({"--soybean-anchor-offset-top":`${m.offsetTop}px`}));return f(n(()=>e(t({color:m.color,orientation:m.orientation,size:m.size,sticky:m.sticky}),m.ui,{root:m.class}))),(e,t)=>(o(),r(c(d),a(c(g),{items:i.items,style:v.value},s(c(_))),null,16,[`items`,`style`]))}});export{p as default};
+import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{anchorVariants as t}from"./variants.js";import{computed as n,createBlock as r,defineComponent as i,mergeProps as a,openBlock as o,toHandlers as s,unref as c}from"vue";import{useForwardListeners as l,useOmitProps as u}from"@soybeanjs/headless/composables";import{AnchorCompact as d,provideAnchorUi as f}from"@soybeanjs/headless/anchor";const p=i({name:`SAnchor`,__name:`anchor`,props:{color:{},size:{},ui:{},class:{type:[Boolean,null,String,Object,Array]},sticky:{type:Boolean,default:!0},items:{},linkProps:{},indicatorProps:{},titleProps:{},subProps:{},bounds:{},dir:{},getContainer:{},getCurrentAnchor:{},modelValue:{},offsetTop:{default:0},orientation:{},replace:{type:Boolean},targetOffset:{},asChild:{type:Boolean},as:{}},emits:[`update:modelValue`,`activeChange`,`itemSelect`],setup(i,{emit:p}){let m=i,h=p,g=u(m,[`color`,`size`,`ui`,`class`,`sticky`]),_=l(h),v=n(()=>({"--soybean-anchor-offset-top":`${m.offsetTop}px`}));return f(n(()=>e(t({color:m.color,orientation:m.orientation,size:m.size,sticky:m.sticky}),m.ui,{root:m.class}))),(e,t)=>(o(),r(c(d),a(c(g),{items:i.items,style:v.value},s(c(_))),null,16,[`items`,`style`]))}});export{p as default};

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

@@ -15,8 +15,8 @@ declare const __VLS_export: _$vue.DefineComponent<AnchorProps, {}, {}, {}, {}, _
     href: string;
   }) => any) | undefined;
 }>, {
-  offsetTop: number;
   sticky: boolean;
+  offsetTop: number;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

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

@@ -1,4 +1,3 @@
-import { AnchorEmits, AnchorExtendedUi, AnchorExtraUiSlot, AnchorItemData, AnchorProps } from "./types.js";
+import { AnchorEmits, AnchorExtendedUi, AnchorExtraUiSlot, AnchorProps } from "./types.js";
 import { _default } from "./anchor.vue.js";
-import { AnchorContainer, AnchorLinkProps, AnchorRootEmits, AnchorRootProps, AnchorUi, AnchorUiSlot as AnchorUiSlot$1 } from "@soybeanjs/headless/anchor";
-export { type AnchorContainer, type AnchorLinkProps, type AnchorRootEmits, type AnchorRootProps, type AnchorUi, type AnchorUiSlot$1 as AnchorUiSlot };
+export * from "@soybeanjs/headless/anchor";

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

@@ -1,17 +1,44 @@
 import { ThemeColor, ThemeSize } from "../../theme/types.js";
-import { ClassValue, UiClass } from "@soybeanjs/headless";
-import { AnchorCompactEmits, AnchorCompactProps, AnchorItemData, AnchorUiSlot } from "@soybeanjs/headless/anchor";
+import { AnchorCompactEmits, AnchorCompactProps, AnchorUiSlot } from "@soybeanjs/headless/anchor";
+import { ClassValue, UiClass } from "@soybeanjs/headless/types";
 
 //#region src/components/anchor/types.d.ts
+/**
+ * Additional UI slots for the anchor component.
+ */
 type AnchorExtraUiSlot = Exclude<AnchorUiSlot, 'root' | 'link'>;
+/**
+ * Extended UI class overrides for the Anchor component.
+ */
 type AnchorExtendedUi = UiClass<AnchorUiSlot>;
+/**
+ * Properties for the Anchor component.
+ */
 interface AnchorProps extends AnchorCompactProps {
+  /**
+   * Theme color of the component.
+   */
   color?: ThemeColor;
+  /**
+   * Visual size of the component.
+   */
   size?: ThemeSize;
+  /**
+   * Per-slot class overrides for the component.
+   */
   ui?: Partial<AnchorExtendedUi>;
+  /**
+   * Additional class names applied to the root element.
+   */
   class?: ClassValue;
+  /**
+   * Whether sticky.
+   */
   sticky?: boolean;
 }
+/**
+ * Events for the Anchor component.
+ */
 type AnchorEmits = AnchorCompactEmits;
 //#endregion
-export { AnchorEmits, AnchorExtendedUi, AnchorExtraUiSlot, type AnchorItemData, AnchorProps };
+export { AnchorEmits, AnchorExtendedUi, AnchorExtraUiSlot, AnchorProps };

package/dist/components/autocomplete/autocomplete.js

@@ -1 +1 @@
-import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{autocompleteVariants as t}from"./variants.js";import{computed as n,createBlock as r,createCommentVNode as i,createSlots as a,defineComponent as o,guardReactiveProps as s,mergeProps as c,normalizeProps as l,openBlock as u,renderList as d,renderSlot as f,toHandlers as p,unref as m,useSlots as h,withCtx as g}from"vue";import{useForwardListeners as _,useOmitProps as v}from"@soybeanjs/headless/composables";import{AutocompleteCompact as y,provideAutocompleteUi as b}from"@soybeanjs/headless";import{keysOf as x}from"@soybeanjs/utils";const S=o({name:`SAutocomplete`,__name:`autocomplete`,props:{class:{},size:{},ui:{},modelValue:{default:void 0},defaultValue:{},items:{},placeholder:{},clearable:{type:Boolean,default:!1},clearLabel:{default:`Clear input`},emptyLabel:{default:`No results found.`},fuseOptions:{},anchorProps:{},inputProps:{},triggerProps:{},portalProps:{},contentProps:{},viewportProps:{},groupProps:{},groupLabelProps:{},itemProps:{},itemIndicatorProps:{},separatorProps:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean},dir:{},disabled:{type:Boolean},highlightOnHover:{type:Boolean},openOnFocus:{type:Boolean},openOnClick:{type:Boolean},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`update:open`,`highlight`,`select`],setup(o,{emit:S}){let C=o,w=S,T=h(),E=v(C,[`class`,`size`,`ui`]),D=_(w),O=n(()=>x(T));return b(n(()=>e(t({size:C.size}),C.ui,{root:C.class}))),(e,t)=>(u(),r(m(y),c(m(E),{items:o.items},p(m(D))),a({_:2},[d(O.value,t=>({name:t,fn:g(n=>[i(` @vue-ignore ignore vue slot props type `),f(e.$slots,t,l(s(n)))])}))]),1040,[`items`]))}});export{S as default};
+import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{autocompleteVariants as t}from"./variants.js";import{computed as n,createBlock as r,createCommentVNode as i,createSlots as a,defineComponent as o,guardReactiveProps as s,mergeProps as c,normalizeProps as l,openBlock as u,renderList as d,renderSlot as f,toHandlers as p,unref as m,useSlots as h,withCtx as g}from"vue";import{useForwardListeners as _,useOmitProps as v}from"@soybeanjs/headless/composables";import{keysOf as y}from"@soybeanjs/utils";import{AutocompleteCompact as b,provideAutocompleteUi as x}from"@soybeanjs/headless/autocomplete";const S=o({name:`SAutocomplete`,__name:`autocomplete`,props:{class:{type:[Boolean,null,String,Object,Array]},size:{},ui:{},modelValue:{default:void 0},defaultValue:{},items:{},placeholder:{},clearable:{type:Boolean,default:!1},clearLabel:{default:`Clear input`},emptyLabel:{default:`No results found.`},fuseOptions:{},anchorProps:{},inputProps:{},triggerProps:{},portalProps:{},contentProps:{},viewportProps:{},groupProps:{},groupLabelProps:{},itemProps:{},itemIndicatorProps:{},separatorProps:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean},dir:{},disabled:{type:Boolean},highlightOnHover:{type:Boolean},openOnFocus:{type:Boolean},openOnClick:{type:Boolean},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`update:open`,`highlight`,`select`],setup(o,{emit:S}){let C=o,w=S,T=h(),E=v(C,[`class`,`size`,`ui`]),D=_(w),O=n(()=>y(T));return x(n(()=>e(t({size:C.size}),C.ui,{root:C.class}))),(e,t)=>(u(),r(m(b),c(m(E),{items:o.items},p(m(D))),a({_:2},[d(O.value,t=>({name:t,fn:g(n=>[i(` @vue-ignore ignore vue slot props type `),f(e.$slots,t,l(s(n)))])}))]),1040,[`items`]))}});export{S as default};

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

@@ -1,5 +1,6 @@
-import { AutocompleteProps, AutocompleteSingleOptionData, AutocompleteSlots } from "./types.js";
+import { AutocompleteProps, AutocompleteSlots } from "./types.js";
 import * as _$vue from "vue";
+import { AutocompleteSingleOptionData } from "@soybeanjs/headless/autocomplete";
 import * as _$_soybeanjs_headless0 from "@soybeanjs/headless";
 
 //#region src/components/autocomplete/autocomplete.vue.d.ts

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

@@ -1,4 +1,3 @@
-import { AutocompleteEmits, AutocompleteGroupOptionData, AutocompleteOptionData, AutocompleteProps, AutocompleteSearchOptionData, AutocompleteSingleOptionData as AutocompleteSingleOptionData$1, AutocompleteSlots, AutocompleteUi } from "./types.js";
+import { AutocompleteEmits, AutocompleteProps, AutocompleteSlots } from "./types.js";
 import { _default } from "./autocomplete.vue.js";
-import { AutocompleteAnchorProps, AutocompleteContentProps, AutocompleteGroupLabelProps, AutocompleteGroupProps, AutocompleteHighlightPayload, AutocompleteInputProps, AutocompleteItemEmits, AutocompleteItemIndicatorProps, AutocompleteItemProps, AutocompletePortalProps, AutocompleteRootEmits, AutocompleteRootProps, AutocompleteSeparatorProps, AutocompleteTriggerProps, AutocompleteUi as HeadlessAutocompleteUi, AutocompleteUiSlot, AutocompleteViewportProps } from "@soybeanjs/headless/autocomplete";
-export { type AutocompleteAnchorProps, type AutocompleteContentProps, type AutocompleteGroupLabelProps, type AutocompleteGroupProps, type AutocompleteHighlightPayload, type AutocompleteInputProps, type AutocompleteItemEmits, type AutocompleteItemIndicatorProps, type AutocompleteItemProps, type AutocompletePortalProps, type AutocompleteRootEmits, type AutocompleteRootProps, type AutocompleteSeparatorProps, type AutocompleteTriggerProps, type AutocompleteUiSlot, type AutocompleteViewportProps, type HeadlessAutocompleteUi };
+export * from "@soybeanjs/headless/autocomplete";

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

@@ -1,16 +1,30 @@
 import { ThemeSize } from "../../theme/types.js";
-import { ClassValue } from "@soybeanjs/headless";
-import { AutocompleteCompactEmits, AutocompleteCompactProps, AutocompleteCompactSlots, AutocompleteGroupOptionData, AutocompleteOptionData, AutocompleteSearchOptionData, AutocompleteSingleOptionData, AutocompleteSingleOptionData as AutocompleteSingleOptionData$1, AutocompleteUi as HeadlessAutocompleteUi } from "@soybeanjs/headless/autocomplete";
+import { AutocompleteCompactEmits, AutocompleteCompactProps, AutocompleteCompactSlots, AutocompleteSingleOptionData, AutocompleteUi } from "@soybeanjs/headless/autocomplete";
+import { ClassValue } from "@soybeanjs/headless/types";
 
 //#region src/components/autocomplete/types.d.ts
-type AutocompleteUi = HeadlessAutocompleteUi;
+/**
+ * Properties for the Autocomplete component.
+ */
 interface AutocompleteProps<T extends AutocompleteSingleOptionData = AutocompleteSingleOptionData> extends AutocompleteCompactProps<T> {
   /** Root class. */
   class?: ClassValue;
+  /**
+   * Visual size of the component.
+   */
   size?: ThemeSize;
+  /**
+   * Per-slot class overrides for the component.
+   */
   ui?: Partial<AutocompleteUi>;
 }
+/**
+ * Events for the Autocomplete component.
+ */
 type AutocompleteEmits<T extends AutocompleteSingleOptionData = AutocompleteSingleOptionData> = AutocompleteCompactEmits<T>;
+/**
+ * Slots for the Autocomplete component.
+ */
 type AutocompleteSlots<T extends AutocompleteSingleOptionData = AutocompleteSingleOptionData> = AutocompleteCompactSlots<T>;
 //#endregion
-export { AutocompleteEmits, type AutocompleteGroupOptionData, type AutocompleteOptionData, AutocompleteProps, type AutocompleteSearchOptionData, type AutocompleteSingleOptionData$1 as AutocompleteSingleOptionData, AutocompleteSlots, AutocompleteUi };
+export { AutocompleteEmits, AutocompleteProps, AutocompleteSlots };

package/dist/components/avatar/avatar.js

@@ -1 +1 @@
-import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{avatarVariants as t}from"./variants.js";import{computed as n,createBlock as r,createTextVNode as i,createVNode as a,defineComponent as o,guardReactiveProps as s,mergeProps as c,normalizeProps as l,openBlock as u,renderSlot as d,toDisplayString as f,unref as p,withCtx as m}from"vue";import{useOmitProps as h}from"@soybeanjs/headless/composables";import{AvatarFallback as g,AvatarImage as _,AvatarRoot as v,provideAvatarUi as y}from"@soybeanjs/headless";const b=o({name:`SAvatar`,__name:`avatar`,props:{class:{},size:{},ui:{},src:{},delayMs:{},fallbackLabel:{},imageProps:{},fallbackProps:{}},emits:[`loadingStatusChange`],setup(o,{emit:b}){let x=o,S=b,C=h(x,[`class`,`size`,`ui`,`fallbackLabel`,`imageProps`,`fallbackProps`]);y(n(()=>e(t({size:x.size}),x.ui,{root:x.class})));let w=n(()=>({...x.imageProps,src:x.src})),T=n(()=>({...x.fallbackProps,delayMs:x.delayMs}));return(e,t)=>(u(),r(p(v),l(s(p(C))),{default:m(()=>[d(e.$slots,`default`,{},()=>[d(e.$slots,`image`,{},()=>[a(p(_),c(w.value,{onLoadingStatusChange:t[0]||=e=>S(`loadingStatusChange`,e)}),null,16)]),a(p(g),l(s(T.value)),{default:m(()=>[d(e.$slots,`fallback`,{},()=>[i(f(o.fallbackLabel),1)])]),_:3},16)])]),_:3},16))}});export{b as default};
+import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{avatarVariants as t}from"./variants.js";import{computed as n,createBlock as r,createSlots as i,defineComponent as a,mergeProps as o,openBlock as s,renderList as c,renderSlot as l,unref as u,useSlots as d,withCtx as f}from"vue";import{useOmitProps as p}from"@soybeanjs/headless/composables";import{keysOf as m}from"@soybeanjs/utils";import{AvatarCompact as h,provideAvatarUi as g}from"@soybeanjs/headless/avatar";const _=a({name:`SAvatar`,__name:`avatar`,props:{class:{type:[Boolean,null,String,Object,Array]},size:{},ui:{},src:{},delayMs:{},fallbackLabel:{},imageProps:{},fallbackProps:{}},emits:[`loadingStatusChange`],setup(a,{emit:_}){let v=a,y=_,b=d(),x=p(v,[`class`,`size`,`ui`]),S=n(()=>m(b));return g(n(()=>e(t({size:v.size}),v.ui,{root:v.class}))),(e,t)=>(s(),r(u(h),o(u(x),{onLoadingStatusChange:t[0]||=e=>y(`loadingStatusChange`,e)}),i({_:2},[c(S.value,t=>({name:t,fn:f(()=>[l(e.$slots,t)])}))]),1040))}});export{_ as default};

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

@@ -3,14 +3,8 @@ import * as _$vue from "vue";
 import * as _$_soybeanjs_headless0 from "@soybeanjs/headless";
 
 //#region src/components/avatar/avatar.vue.d.ts
-declare var __VLS_8: {}, __VLS_10: {}, __VLS_25: {};
-type __VLS_Slots = {} & {
-  default?: (props: typeof __VLS_8) => any;
-} & {
-  image?: (props: typeof __VLS_10) => any;
-} & {
-  fallback?: (props: typeof __VLS_25) => any;
-};
+declare var __VLS_12: string | number, __VLS_13: {};
+type __VLS_Slots = {} & { [K in NonNullable<typeof __VLS_12>]?: (props: typeof __VLS_13) => any };
 declare const __VLS_base: _$vue.DefineComponent<AvatarProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   loadingStatusChange: (status: _$_soybeanjs_headless0.ImageLoadingStatus) => any;
 }, string, _$vue.PublicProps, Readonly<AvatarProps> & Readonly<{

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

@@ -1,4 +1,3 @@
 import { AvatarEmits, AvatarProps } from "./types.js";
 import { _default } from "./avatar.vue.js";
-import { AvatarFallbackProps, AvatarImageEmits, AvatarImageProps, AvatarRootProps } from "@soybeanjs/headless/avatar";
-export { type AvatarFallbackProps, type AvatarImageEmits, type AvatarImageProps, type AvatarRootProps };
+export * from "@soybeanjs/headless/avatar";

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

@@ -1,26 +1,28 @@
 import { ThemeSize } from "../../theme/types.js";
-import { AvatarFallbackProps, AvatarImageEmits, AvatarImageProps, AvatarRootProps, AvatarUi, ClassValue } from "@soybeanjs/headless";
+import { AvatarCompactProps, AvatarImageEmits, AvatarUi } from "@soybeanjs/headless/avatar";
+import { ClassValue } from "@soybeanjs/headless/types";
 
 //#region src/components/avatar/types.d.ts
-interface AvatarProps extends AvatarRootProps {
+/**
+ * Properties for the Avatar component.
+ */
+interface AvatarProps extends AvatarCompactProps {
   /**
    * root class
    */
   class?: ClassValue;
+  /**
+   * Visual size of the component.
+   */
   size?: ThemeSize;
-  ui?: Partial<AvatarUi>;
-  /** The image source URL */
-  src: string;
   /**
-   * Useful for delaying rendering so it only appears for those with slower connections.
-   *
-   * @defaultValue undefined
+   * Per-slot class overrides for the component.
    */
-  delayMs?: number;
-  fallbackLabel?: string;
-  imageProps?: Omit<AvatarImageProps, 'src'>;
-  fallbackProps?: Omit<AvatarFallbackProps, 'delayMs'>;
+  ui?: Partial<AvatarUi>;
 }
+/**
+ * Events for the Avatar component.
+ */
 type AvatarEmits = AvatarImageEmits;
 //#endregion
 export { AvatarEmits, AvatarProps };

package/dist/components/backtop/backtop.js

@@ -1 +1 @@
-import{cn as e}from"../../theme/merge.js";import"../../theme/index.js";import{buttonVariants as t}from"../button/variants.js";import n from"../icon/icon.js";import{backtopVariants as r}from"./variants.js";import{computed as i,createBlock as a,createVNode as o,defineComponent as s,mergeProps as c,openBlock as l,renderSlot as u,toHandlers as d,unref as f,withCtx as p}from"vue";import{useForwardListeners as m,useOmitProps as h}from"@soybeanjs/headless/composables";import{Backtop as g}from"@soybeanjs/headless/backtop";const _=s({name:`SBacktop`,__name:`backtop`,props:{class:{},color:{default:`primary`},size:{default:`lg`},variant:{default:`solid`},shape:{default:`circle`},shadow:{default:`lg`},fitContent:{type:Boolean,default:!0},icon:{default:`lucide:arrow-up`},iconClass:{},iconProps:{},visibilityHeight:{},target:{},duration:{}},emits:[`change`,`click`],setup(s,{emit:_}){let v=s,y=_,b=h(v,[`class`,`color`,`size`,`variant`,`shape`,`shadow`,`fitContent`,`icon`,`iconClass`,`iconProps`]),x=m(y),S=i(()=>e(r(),t({color:v.color,size:v.size,variant:v.variant,shape:v.shape,shadow:v.shadow,fitContent:v.fitContent}),v.class));return(e,t)=>(l(),a(f(g),c(f(b),{class:S.value},d(f(x))),{default:p(()=>[u(e.$slots,`default`,{},()=>[o(n,c(s.iconProps,{icon:s.icon,class:s.iconClass}),null,16,[`icon`,`class`])])]),_:3},16,[`class`]))}});export{_ as default};
+import{cn as e}from"../../theme/merge.js";import"../../theme/index.js";import{buttonVariants as t}from"../button/variants.js";import n from"../icon/icon.js";import{backtopVariants as r}from"./variants.js";import{computed as i,createBlock as a,createVNode as o,defineComponent as s,mergeProps as c,openBlock as l,renderSlot as u,toHandlers as d,unref as f,withCtx as p}from"vue";import{useForwardListeners as m,useOmitProps as h}from"@soybeanjs/headless/composables";import{Backtop as g}from"@soybeanjs/headless/backtop";const _=s({name:`SBacktop`,__name:`backtop`,props:{class:{type:[Boolean,null,String,Object,Array]},color:{default:`primary`},size:{default:`lg`},variant:{default:`solid`},shape:{default:`circle`},shadow:{default:`lg`},fitContent:{type:Boolean,default:!0},icon:{default:`lucide:arrow-up`},iconClass:{type:[Boolean,null,String,Object,Array]},iconProps:{},visibilityHeight:{},target:{},duration:{}},emits:[`change`,`click`],setup(s,{emit:_}){let v=s,y=_,b=h(v,[`class`,`color`,`size`,`variant`,`shape`,`shadow`,`fitContent`,`icon`,`iconClass`,`iconProps`]),x=m(y),S=i(()=>{let n=r({size:v.size});return e(t({color:v.color,size:v.size,variant:v.variant,shape:v.shape,shadow:v.shadow,fitContent:v.fitContent}),n,v.class)});return(e,t)=>(l(),a(f(g),c(f(b),{class:S.value},d(f(x))),{default:p(()=>[u(e.$slots,`default`,{},()=>[o(n,c(s.iconProps,{icon:s.icon,class:s.iconClass}),null,16,[`icon`,`class`])])]),_:3},16,[`class`]))}});export{_ as default};

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

@@ -9,16 +9,16 @@ type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: _$vue.DefineComponent<BacktopProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+  click: (event: PointerEvent) => any;
   change: (visible: boolean) => any;
-  click: (event: MouseEvent) => any;
 }, string, _$vue.PublicProps, Readonly<BacktopProps> & Readonly<{
+  onClick?: ((event: PointerEvent) => any) | undefined;
   onChange?: ((visible: boolean) => any) | undefined;
-  onClick?: ((event: MouseEvent) => any) | undefined;
 }>, {
   icon: string;
+  color: ThemeColor;
   size: ThemeSize;
   variant: ButtonVariant;
-  color: ThemeColor;
   shape: ButtonShape;
   shadow: ButtonShadow;
   fitContent: boolean;

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

@@ -1,4 +1,4 @@
 import { BacktopEmits as BacktopEmits$1, BacktopProps as BacktopProps$1 } from "./types.js";
 import { _default } from "./backtop.vue.js";
-import { BacktopExposed, BacktopTarget } from "@soybeanjs/headless/backtop";
-export { type BacktopExposed, type BacktopTarget };
+import { BacktopState, BacktopTarget } from "@soybeanjs/headless/backtop";
+export { type BacktopState, type BacktopTarget };

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

@@ -1,17 +1,41 @@
 import { ThemeColor, ThemeSize } from "../../theme/types.js";
 import { IconProps } from "../icon/types.js";
 import { ButtonShadow, ButtonShape, ButtonVariant } from "../button/variants.js";
-import { ClassValue } from "@soybeanjs/headless";
 import { BacktopEmits, BacktopProps } from "@soybeanjs/headless/backtop";
+import { ClassValue } from "@soybeanjs/headless/types";
 
 //#region src/components/backtop/types.d.ts
+/**
+ * Properties for the Backtop component.
+ */
 interface BacktopProps$1 extends BacktopProps {
+  /**
+   * Additional class names applied to the root element.
+   */
   class?: ClassValue;
+  /**
+   * Theme color of the component.
+   */
   color?: ThemeColor;
+  /**
+   * Visual size of the component.
+   */
   size?: ThemeSize;
+  /**
+   * Visual variant of the component.
+   */
   variant?: ButtonVariant;
+  /**
+   * Shape of the component.
+   */
   shape?: ButtonShape;
+  /**
+   * Shadow style of the component.
+   */
   shadow?: ButtonShadow;
+  /**
+   * Whether the component should fit its content width.
+   */
   fitContent?: boolean;
   /**
    * The icon name of iconify.
@@ -28,6 +52,9 @@ interface BacktopProps$1 extends BacktopProps {
    */
   iconProps?: Partial<IconProps>;
 }
+/**
+ * Events for the Backtop component.
+ */
 type BacktopEmits$1 = BacktopEmits;
 //#endregion
 export { BacktopEmits$1 as BacktopEmits, BacktopProps$1 as BacktopProps };

package/dist/components/backtop/variants.js

@@ -1 +1 @@
-import{tv as e}from"tailwind-variants";const t=e({base:`fixed bottom-6 end-6 z-50`});export{t as backtopVariants};
+import{tv as e}from"tailwind-variants";const t=e({base:`fixed z-50`,variants:{size:{xs:`bottom-4 end-4`,sm:`bottom-5 end-5`,md:`bottom-6 end-6`,lg:`bottom-7 end-7`,xl:`bottom-8 end-8`,"2xl":`bottom-10 end-10`}},defaultVariants:{size:`md`}});export{t as backtopVariants};

package/dist/components/badge/badge.js

@@ -1 +1 @@
-import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{badgeVariants as t}from"./variants.js";import{computed as n,createBlock as r,createTextVNode as i,createVNode as a,defineComponent as o,guardReactiveProps as s,normalizeProps as c,openBlock as l,renderSlot as u,toDisplayString as d,unref as f,withCtx as p}from"vue";import{BadgeContent as m,BadgeRoot as h,provideBadgeUi as g}from"@soybeanjs/headless";const _=o({name:`SBadge`,__name:`badge`,props:{class:{},color:{},size:{},ui:{},position:{},content:{},contentProps:{},open:{type:Boolean,default:void 0}},emits:[`update:open`],setup(o,{emit:_}){let v=o,y=_;return g(n(()=>e(t({color:v.color,size:v.size,position:v.position}),v.ui,{root:v.class}))),(e,t)=>(l(),r(f(h),{open:o.open,"onUpdate:open":t[0]||=e=>y(`update:open`,e)},{default:p(()=>[u(e.$slots,`default`),a(f(m),c(s(o.contentProps)),{default:p(()=>[u(e.$slots,`content`,{},()=>[i(d(o.content),1)])]),_:3},16)]),_:3},8,[`open`]))}});export{_ as default};
+import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{badgeVariants as t}from"./variants.js";import{computed as n,createBlock as r,createSlots as i,defineComponent as a,mergeProps as o,openBlock as s,renderList as c,renderSlot as l,unref as u,useSlots as d,withCtx as f}from"vue";import{useOmitProps as p}from"@soybeanjs/headless/composables";import{keysOf as m}from"@soybeanjs/utils";import{BadgeCompact as h,provideBadgeUi as g}from"@soybeanjs/headless/badge";const _=a({name:`SBadge`,__name:`badge`,props:{class:{type:[Boolean,null,String,Object,Array]},color:{},size:{},ui:{},position:{},content:{},contentProps:{},open:{type:Boolean,default:void 0}},emits:[`update:open`],setup(a,{emit:_}){let v=a,y=_,b=d(),x=p(v,[`class`,`color`,`size`,`ui`,`position`]),S=n(()=>m(b));return g(n(()=>e(t({color:v.color,size:v.size,position:v.position}),v.ui,{root:v.class}))),(e,t)=>(s(),r(u(h),o(u(x),{"onUpdate:open":t[0]||=e=>y(`update:open`,e)}),i({_:2},[c(S.value,t=>({name:t,fn:f(()=>[l(e.$slots,t)])}))]),1040))}});export{_ as default};