@soybeanjs/ui 0.0.9 → 0.0.11

package/dist/components/accordion/accordion.js

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

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

@@ -1,9 +1,9 @@
 import { AccordionOptionData, AccordionProps } from "./types.js";
-import * as vue10 from "vue";
+import * as vue0 from "vue";
 
 //#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<{
-  props: vue10.PublicProps & __VLS_PrettifyLocal<AccordionProps<T, M> & {
+  props: vue0.PublicProps & __VLS_PrettifyLocal<AccordionProps<T, M> & {
     "onUpdate:modelValue"?: ((value: M extends true ? string[] : string) => any) | undefined;
   }> & (typeof globalThis extends {
     __VLS_PROPS_FALLBACK: infer P;
@@ -41,7 +41,7 @@ declare const __VLS_export: <T extends AccordionOptionData = AccordionOptionData
     }) => any;
   };
   emit: (evt: "update:modelValue", value: M extends true ? string[] : string) => void;
-}>) => vue10.VNode & {
+}>) => vue0.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };
 declare const _default: typeof __VLS_export;

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

@@ -1,4 +1,4 @@
-import { AccordionEmits, AccordionExtendedUi, AccordionExtraThemeSlot, AccordionOptionData, AccordionProps } from "./types.js";
+import { AccordionEmits, AccordionExtendedUi, AccordionExtraUiSlot, AccordionOptionData, AccordionProps } 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 };

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

@@ -1,7 +1,7 @@
 import { ThemeSize } from "../../theme/types.js";
 import "../../theme/index.js";
 import { IconValue } from "../icon/types.js";
-import { AccordionContentProps, AccordionHeaderProps, AccordionItemProps, AccordionRootEmits, AccordionRootProps, AccordionTriggerProps, AccordionUi, ClassValue } from "@soybeanjs/headless";
+import { AccordionContentProps, AccordionHeaderProps, AccordionItemProps, AccordionRootEmits, AccordionRootProps, AccordionTriggerProps, AccordionUiSlot, ClassValue, UiClass } from "@soybeanjs/headless";
 
 //#region src/components/accordion/types.d.ts
 interface AccordionOptionData extends Pick<AccordionItemProps, 'value' | 'disabled'> {
@@ -16,9 +16,13 @@ interface AccordionOptionData extends Pick<AccordionItemProps, 'value' | 'disabl
    */
   icon?: IconValue;
 }
-type AccordionExtraThemeSlot = 'triggerLeadingIcon' | 'triggerIcon';
-type AccordionExtendedUi = AccordionUi & Record<AccordionExtraThemeSlot, ClassValue>;
-type AccordionProps<T extends AccordionOptionData = AccordionOptionData, M extends boolean = false> = AccordionRootProps<M> & {
+type AccordionExtraUiSlot = 'triggerLeadingIcon' | 'triggerIcon';
+type AccordionExtendedUi = UiClass<AccordionUiSlot | AccordionExtraUiSlot>;
+interface AccordionProps<T extends AccordionOptionData = AccordionOptionData, M extends boolean = false> extends AccordionRootProps<M> {
+  /**
+   * root class
+   */
+  class?: ClassValue;
   size?: ThemeSize;
   ui?: Partial<AccordionExtendedUi>;
   items: T[];
@@ -26,7 +30,7 @@ type AccordionProps<T extends AccordionOptionData = AccordionOptionData, M exten
   headerProps?: AccordionHeaderProps;
   triggerProps?: AccordionTriggerProps;
   contentProps?: AccordionContentProps;
-};
+}
 type AccordionEmits<M extends boolean = false> = AccordionRootEmits<M>;
 //#endregion
-export { AccordionEmits, AccordionExtendedUi, AccordionExtraThemeSlot, AccordionOptionData, AccordionProps };
+export { AccordionEmits, AccordionExtendedUi, AccordionExtraUiSlot, AccordionOptionData, AccordionProps };

package/dist/components/alert/alert.js

@@ -1 +1 @@
-import{mergeSlotVariants as e}from"../../theme/shared.js";import t from"../button/button-icon.js";import n from"../icon/icon.js";import{alertVariants as r}from"../../variants/alert.js";import{computed as i,createBlock as a,createCommentVNode as o,createTextVNode as s,createVNode as c,defineComponent as l,guardReactiveProps as u,mergeProps as d,normalizeClass as f,normalizeProps as p,openBlock as m,renderSlot as h,toDisplayString as g,unref as _,useSlots as v,withCtx as y}from"vue";import{AlertClose as b,AlertContent as x,AlertDescription as S,AlertRoot as C,AlertTitle as w,provideAlertThemeContext as T}from"@soybeanjs/headless";var E=l({name:`SAlert`,__name:`alert`,props:{size:{},color:{},variant:{},ui:{},title:{},description:{},icon:{},closable:{type:Boolean},contentProps:{},titleProps:{},descriptionProps:{},closeProps:{},open:{type:Boolean,default:void 0}},emits:[`update:open`],setup(l,{emit:E}){let D=l,O=E,k=v(),A=i(()=>e(r({size:D.size,color:D.color,variant:D.variant}),D.ui));return T({ui:A}),(e,r)=>(m(),a(_(C),{open:l.open,"onUpdate:open":r[0]||=e=>O(`update:open`,e)},{default:y(()=>[h(e.$slots,`leading`,{},()=>[l.icon?(m(),a(n,{key:0,icon:l.icon,class:f(A.value.icon)},null,8,[`icon`,`class`])):o(`v-if`,!0)]),c(_(x),p(u(l.contentProps)),{default:y(()=>[_(k).title||l.title?(m(),a(_(w),p(d({key:0},l.titleProps)),{default:y(()=>[h(e.$slots,`title`,{},()=>[s(g(l.title),1)])]),_:3},16)):o(`v-if`,!0),_(k).description||l.description?(m(),a(_(S),p(d({key:1},l.descriptionProps)),{default:y(()=>[h(e.$slots,`description`,{},()=>[s(g(l.description),1)])]),_:3},16)):o(`v-if`,!0),h(e.$slots,`default`)]),_:3},16),h(e.$slots,`trailing`),l.closable?(m(),a(_(b),d({key:0},l.closeProps,{"as-child":``}),{default:y(()=>[h(e.$slots,`close`,{},()=>[c(t,{icon:`lucide:x`,size:l.size},null,8,[`size`])])]),_:3},16)):o(`v-if`,!0)]),_:3},8,[`open`]))}});export{E as default};
+import{mergeSlotVariants as e}from"../../theme/shared.js";import t from"../button/button-icon.js";import n from"../icon/icon.js";import{alertVariants as r}from"../../variants/alert.js";import{computed as i,createBlock as a,createCommentVNode as o,createTextVNode as s,createVNode as c,defineComponent as l,guardReactiveProps as u,mergeProps as d,normalizeClass as f,normalizeProps as p,openBlock as m,renderSlot as h,toDisplayString as g,unref as _,useSlots as v,withCtx as y}from"vue";import{AlertClose as b,AlertContent as x,AlertDescription as S,AlertRoot as C,AlertTitle as w,provideAlertUi as T}from"@soybeanjs/headless";var E=l({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(l,{emit:E}){let D=l,O=E,k=v(),A=i(()=>e(r({size:D.size,color:D.color,variant:D.variant}),D.ui,{root:D.class}));return T(A),(e,r)=>(m(),a(_(C),{open:l.open,"onUpdate:open":r[0]||=e=>O(`update:open`,e)},{default:y(()=>[h(e.$slots,`leading`,{},()=>[l.icon?(m(),a(n,{key:0,icon:l.icon,class:f(A.value.icon)},null,8,[`icon`,`class`])):o(`v-if`,!0)]),c(_(x),p(u(l.contentProps)),{default:y(()=>[_(k).title||l.title?(m(),a(_(w),p(d({key:0},l.titleProps)),{default:y(()=>[h(e.$slots,`title`,{},()=>[s(g(l.title),1)])]),_:3},16)):o(`v-if`,!0),_(k).description||l.description?(m(),a(_(S),p(d({key:1},l.descriptionProps)),{default:y(()=>[h(e.$slots,`description`,{},()=>[s(g(l.description),1)])]),_:3},16)):o(`v-if`,!0),h(e.$slots,`default`)]),_:3},16),h(e.$slots,`trailing`),l.closable?(m(),a(_(b),d({key:0},l.closeProps,{"as-child":``}),{default:y(()=>[h(e.$slots,`close`,{},()=>[c(t,{icon:`lucide:x`,size:l.size},null,8,[`size`])])]),_:3},16)):o(`v-if`,!0)]),_:3},8,[`open`]))}});export{E as default};

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

@@ -1,5 +1,5 @@
 import { AlertProps } from "./types.js";
-import * as vue12 from "vue";
+import * as vue93 from "vue";
 
 //#region src/components/alert/alert.vue.d.ts
 declare var __VLS_10: {}, __VLS_29: {}, __VLS_37: {}, __VLS_39: {}, __VLS_41: {}, __VLS_49: {};
@@ -16,13 +16,13 @@ type __VLS_Slots = {} & {
 } & {
   close?: (props: typeof __VLS_49) => any;
 };
-declare const __VLS_base: vue12.DefineComponent<AlertProps, {}, {}, {}, {}, vue12.ComponentOptionsMixin, vue12.ComponentOptionsMixin, {
+declare const __VLS_base: vue93.DefineComponent<AlertProps, {}, {}, {}, {}, vue93.ComponentOptionsMixin, vue93.ComponentOptionsMixin, {
   "update:open": (open: boolean) => any;
-}, string, vue12.PublicProps, Readonly<AlertProps> & Readonly<{
+}, string, vue93.PublicProps, Readonly<AlertProps> & Readonly<{
   "onUpdate:open"?: ((open: boolean) => any) | undefined;
 }>, {
   open: boolean;
-}, {}, {}, {}, string, vue12.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, vue93.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -2,12 +2,16 @@ import { ThemeColor, ThemeSize } from "../../theme/types.js";
 import "../../theme/index.js";
 import { IconValue } from "../icon/types.js";
 import { AlertVariant } from "../../variants/alert.js";
-import { AlertCloseProps, AlertContentProps, AlertDescriptionProps, AlertRootEmits, AlertRootProps, AlertTitleProps, AlertUi, ClassValue } from "@soybeanjs/headless";
+import { AlertCloseProps, AlertContentProps, AlertDescriptionProps, AlertRootEmits, AlertRootProps, AlertTitleProps, AlertUiSlot, ClassValue, UiClass } from "@soybeanjs/headless";
 
 //#region src/components/alert/types.d.ts
-type AlertExtraThemeSlot = 'icon';
-type AlertExtendedUi = AlertUi & Record<AlertExtraThemeSlot, ClassValue>;
+type AlertExtraUiSlot = 'icon';
+type AlertExtendedUi = UiClass<AlertUiSlot | AlertExtraUiSlot>;
 interface AlertProps extends AlertRootProps {
+  /**
+   * root class
+   */
+  class?: ClassValue;
   size?: ThemeSize;
   color?: ThemeColor;
   variant?: AlertVariant;

package/dist/components/alert-dialog/alert-dialog-action.js

@@ -1 +1 @@
-import{useSizeContext as e}from"../../theme/context.js";import t from"../button/button.js";import{createBlock as n,createTextVNode as r,createVNode as i,defineComponent as a,mergeProps as o,openBlock as s,renderSlot as c,toDisplayString as l,unref as u,withCtx as d}from"vue";import{useOmitProps as f}from"@soybeanjs/headless/composables";import{AlertDialogClose as p}from"@soybeanjs/headless";var m=a({name:`SAlertDialogAction`,__name:`alert-dialog-action`,props:{text:{default:`Confirm`},beforeClose:{},color:{},size:{},variant:{},shape:{},shadow:{},fitContent:{type:Boolean},disabled:{type:Boolean},asChild:{type:Boolean},as:{}},setup(a){let m=f(a,[`text`]),{size:h}=e(`AlertDialogAction`);return(e,f)=>(s(),n(u(p),{"as-child":``,"before-close":a.beforeClose},{default:d(()=>[c(e.$slots,`content`,{},()=>[i(t,o(u(m),{size:u(h)}),{default:d(()=>[c(e.$slots,`default`,{},()=>[r(l(a.text),1)])]),_:3},16,[`size`])])]),_:3},8,[`before-close`]))}});export{m as default};
+import{useSizeContext as e}from"../../theme/context.js";import t from"../button/button.js";import{createBlock as n,createTextVNode as r,createVNode as i,defineComponent as a,mergeProps as o,openBlock as s,renderSlot as c,toDisplayString as l,unref as u,withCtx as d}from"vue";import{useOmitProps as f}from"@soybeanjs/headless/composables";import{AlertDialogClose as p}from"@soybeanjs/headless";var m=a({name:`SAlertDialogAction`,__name:`alert-dialog-action`,props:{text:{default:`Confirm`},beforeClose:{},class:{},color:{},size:{},variant:{},shape:{},shadow:{},fitContent:{type:Boolean},disabled:{type:Boolean},asChild:{type:Boolean},as:{}},setup(a){let m=f(a,[`text`]),{size:h}=e(`AlertDialogAction`);return(e,f)=>(s(),n(u(p),{"as-child":``,"before-close":a.beforeClose},{default:d(()=>[c(e.$slots,`content`,{},()=>[i(t,o(u(m),{size:u(h)}),{default:d(()=>[c(e.$slots,`default`,{},()=>[r(l(a.text),1)])]),_:3},16,[`size`])])]),_:3},8,[`before-close`]))}});export{m as default};

package/dist/components/alert-dialog/alert-dialog-action.vue.d.ts

@@ -1,5 +1,5 @@
 import { AlertDialogActionProps } from "./types.js";
-import * as vue27 from "vue";
+import * as vue103 from "vue";
 
 //#region src/components/alert-dialog/alert-dialog-action.vue.d.ts
 declare var __VLS_8: {}, __VLS_16: {};
@@ -8,9 +8,9 @@ type __VLS_Slots = {} & {
 } & {
   default?: (props: typeof __VLS_16) => any;
 };
-declare const __VLS_base: vue27.DefineComponent<AlertDialogActionProps, {}, {}, {}, {}, vue27.ComponentOptionsMixin, vue27.ComponentOptionsMixin, {}, string, vue27.PublicProps, Readonly<AlertDialogActionProps> & Readonly<{}>, {
+declare const __VLS_base: vue103.DefineComponent<AlertDialogActionProps, {}, {}, {}, {}, vue103.ComponentOptionsMixin, vue103.ComponentOptionsMixin, {}, string, vue103.PublicProps, Readonly<AlertDialogActionProps> & Readonly<{}>, {
   text: string;
-}, {}, {}, {}, string, vue27.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, vue103.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/alert-dialog/alert-dialog-cancel.js

@@ -1 +1 @@
-import{useSizeContext as e}from"../../theme/context.js";import t from"../button/button.js";import{createBlock as n,createTextVNode as r,createVNode as i,defineComponent as a,mergeProps as o,openBlock as s,renderSlot as c,toDisplayString as l,unref as u,withCtx as d}from"vue";import{useOmitProps as f}from"@soybeanjs/headless/composables";import{AlertDialogClose as p}from"@soybeanjs/headless";var m=a({name:`SAlertDialogCancel`,__name:`alert-dialog-cancel`,props:{text:{default:`Cancel`},beforeClose:{},color:{},size:{},variant:{default:`plain`},shape:{},shadow:{},fitContent:{type:Boolean},disabled:{type:Boolean},asChild:{type:Boolean},as:{}},setup(a){let m=f(a,[`text`]),{size:h}=e(`AlertDialogCancel`);return(e,f)=>(s(),n(u(p),{"as-child":``,"before-close":a.beforeClose},{default:d(()=>[c(e.$slots,`content`,{},()=>[i(t,o(u(m),{size:u(h)}),{default:d(()=>[c(e.$slots,`default`,{},()=>[r(l(a.text),1)])]),_:3},16,[`size`])])]),_:3},8,[`before-close`]))}});export{m as default};
+import{useSizeContext as e}from"../../theme/context.js";import t from"../button/button.js";import{createBlock as n,createTextVNode as r,createVNode as i,defineComponent as a,mergeProps as o,openBlock as s,renderSlot as c,toDisplayString as l,unref as u,withCtx as d}from"vue";import{useOmitProps as f}from"@soybeanjs/headless/composables";import{AlertDialogClose as p}from"@soybeanjs/headless";var m=a({name:`SAlertDialogCancel`,__name:`alert-dialog-cancel`,props:{text:{default:`Cancel`},beforeClose:{},class:{},color:{},size:{},variant:{default:`plain`},shape:{},shadow:{},fitContent:{type:Boolean},disabled:{type:Boolean},asChild:{type:Boolean},as:{}},setup(a){let m=f(a,[`text`]),{size:h}=e(`AlertDialogCancel`);return(e,f)=>(s(),n(u(p),{"as-child":``,"before-close":a.beforeClose},{default:d(()=>[c(e.$slots,`content`,{},()=>[i(t,o(u(m),{size:u(h)}),{default:d(()=>[c(e.$slots,`default`,{},()=>[r(l(a.text),1)])]),_:3},16,[`size`])])]),_:3},8,[`before-close`]))}});export{m as default};

package/dist/components/alert-dialog/alert-dialog-cancel.vue.d.ts

@@ -1,7 +1,7 @@
 import { ButtonVariant } from "../../variants/button.js";
 import { AlertDialogCancelProps } from "./types.js";
 import "../button/index.js";
-import * as vue22 from "vue";
+import * as vue108 from "vue";
 
 //#region src/components/alert-dialog/alert-dialog-cancel.vue.d.ts
 declare var __VLS_8: {}, __VLS_16: {};
@@ -10,10 +10,10 @@ type __VLS_Slots = {} & {
 } & {
   default?: (props: typeof __VLS_16) => any;
 };
-declare const __VLS_base: vue22.DefineComponent<AlertDialogCancelProps, {}, {}, {}, {}, vue22.ComponentOptionsMixin, vue22.ComponentOptionsMixin, {}, string, vue22.PublicProps, Readonly<AlertDialogCancelProps> & Readonly<{}>, {
+declare const __VLS_base: vue108.DefineComponent<AlertDialogCancelProps, {}, {}, {}, {}, vue108.ComponentOptionsMixin, vue108.ComponentOptionsMixin, {}, string, vue108.PublicProps, Readonly<AlertDialogCancelProps> & Readonly<{}>, {
   text: string;
   variant: ButtonVariant;
-}, {}, {}, {}, string, vue22.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, vue108.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/alert-dialog/alert-dialog.js

@@ -1 +1 @@
-import{mergeSlotVariants as e}from"../../theme/shared.js";import{provideSizeContext as t}from"../../theme/context.js";import{dialogVariants as n}from"../../variants/dialog.js";import r from"../icon/icon.js";import{computed as i,createBlock as a,createCommentVNode as o,createTextVNode as s,createVNode as c,defineComponent as l,guardReactiveProps as u,mergeProps as d,normalizeClass as f,normalizeProps as p,openBlock as m,renderSlot as h,toDisplayString as g,toHandlers as _,unref as v,useSlots as y,withCtx as b}from"vue";import{useForwardListeners as x,useOmitProps as S}from"@soybeanjs/headless/composables";import{AlertDialogContent as C,AlertDialogDescription as w,AlertDialogFooter as T,AlertDialogHeader as E,AlertDialogOverlay as D,AlertDialogPortal as O,AlertDialogRoot as k,AlertDialogTitle as A,AlertDialogTrigger as j,provideDialogThemeContext as M}from"@soybeanjs/headless";var N=l({name:`SAlertDialog`,__name:`alert-dialog`,props:{type:{},showIcon:{type:Boolean,default:!0},size:{},ui:{},title:{},description:{},triggerProps:{},contentProps:{},headerProps:{},footerProps:{},titleProps:{},descriptionProps:{},overlayProps:{},portalProps:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1}},emits:[`update:open`],setup(l,{emit:N}){let P=l,F=S(P,[`size`,`ui`,`type`,`title`,`description`,`triggerProps`,`contentProps`,`headerProps`,`footerProps`,`titleProps`,`descriptionProps`,`overlayProps`,`portalProps`]),I=N,L=y(),R=x(I),z=i(()=>e(n({size:P.size}),P.ui)),B={destructive:{icon:`lucide:circle-x`,class:`text-destructive`},success:{icon:`lucide:circle-check`,class:`text-success`},warning:{icon:`lucide:circle-alert`,class:`text-warning`},info:{icon:`lucide:info`,class:`text-info`}},V=i(()=>P.type?B[P.type]:null);return M({ui:z}),t(()=>P.size),(e,t)=>(m(),a(v(k),d(v(F),{"onUpdate:open":t[0]||=e=>I(`update:open`,e)}),{default:b(t=>[c(v(j),d(l.triggerProps,{size:l.size,"as-child":``}),{default:b(()=>[h(e.$slots,`trigger`)]),_:3},16,[`size`]),c(v(O),p(u(l.portalProps)),{default:b(()=>[c(v(D),p(u(l.overlayProps)),null,16),c(v(C),d(l.contentProps,_(v(R))),{default:b(()=>[c(v(E),p(u(l.headerProps)),{default:b(()=>[c(v(A),p(u(l.titleProps)),{default:b(()=>[l.showIcon&&V.value?(m(),a(r,{key:0,icon:V.value.icon,class:f(V.value.class)},null,8,[`icon`,`class`])):o(`v-if`,!0),h(e.$slots,`title`,p(u(t)),()=>[s(g(l.title),1)])]),_:2},1040),v(L).description||l.description?(m(),a(v(w),p(d({key:0},l.descriptionProps)),{default:b(()=>[h(e.$slots,`description`,p(u(t)),()=>[s(g(l.description),1)])]),_:2},1040)):o(`v-if`,!0)]),_:2},1040),h(e.$slots,`default`,p(u(t))),v(L).footer?(m(),a(v(T),p(d({key:0},l.footerProps)),{default:b(()=>[h(e.$slots,`footer`,p(u(t)))]),_:2},1040)):o(`v-if`,!0)]),_:2},1040)]),_:2},1040)]),_:3},16))}});export{N as default};
+import{mergeSlotVariants as e}from"../../theme/shared.js";import{provideSizeContext as t}from"../../theme/context.js";import{dialogVariants as n}from"../../variants/dialog.js";import r from"../icon/icon.js";import{computed as i,createBlock as a,createCommentVNode as o,createTextVNode as s,createVNode as c,defineComponent as l,guardReactiveProps as u,mergeProps as d,normalizeClass as f,normalizeProps as p,openBlock as m,renderSlot as h,toDisplayString as g,toHandlers as _,unref as v,useSlots as y,withCtx as b}from"vue";import{useForwardListeners as x,useOmitProps as S}from"@soybeanjs/headless/composables";import{AlertDialogContent as C,AlertDialogDescription as w,AlertDialogFooter as T,AlertDialogHeader as E,AlertDialogOverlay as D,AlertDialogPortal as O,AlertDialogRoot as k,AlertDialogTitle as A,AlertDialogTrigger as j,provideAlertDialogUi as M}from"@soybeanjs/headless";var N=l({name:`SAlertDialog`,__name:`alert-dialog`,props:{type:{},showIcon:{type:Boolean,default:!0},size:{},ui:{},title:{},description:{},triggerProps:{},contentProps:{},headerProps:{},footerProps:{},titleProps:{},descriptionProps:{},overlayProps:{},portalProps:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1}},emits:[`update:open`],setup(l,{emit:N}){let P=l,F=S(P,[`size`,`ui`,`type`,`title`,`description`,`triggerProps`,`contentProps`,`headerProps`,`footerProps`,`titleProps`,`descriptionProps`,`overlayProps`,`portalProps`]),I=N,L=y(),R=x(I),z=i(()=>e(n({size:P.size}),P.ui)),B={destructive:{icon:`lucide:circle-x`,class:`text-destructive`},success:{icon:`lucide:circle-check`,class:`text-success`},warning:{icon:`lucide:circle-alert`,class:`text-warning`},info:{icon:`lucide:info`,class:`text-info`}},V=i(()=>P.type?B[P.type]:null);return M(z),t(()=>P.size),(e,t)=>(m(),a(v(k),d(v(F),{"onUpdate:open":t[0]||=e=>I(`update:open`,e)}),{default:b(t=>[c(v(j),d(l.triggerProps,{size:l.size,"as-child":``}),{default:b(()=>[h(e.$slots,`trigger`)]),_:3},16,[`size`]),c(v(O),p(u(l.portalProps)),{default:b(()=>[c(v(D),p(u(l.overlayProps)),null,16),c(v(C),d(l.contentProps,_(v(R))),{default:b(()=>[c(v(E),p(u(l.headerProps)),{default:b(()=>[c(v(A),p(u(l.titleProps)),{default:b(()=>[l.showIcon&&V.value?(m(),a(r,{key:0,icon:V.value.icon,class:f(V.value.class)},null,8,[`icon`,`class`])):o(`v-if`,!0),h(e.$slots,`title`,p(u(t)),()=>[s(g(l.title),1)])]),_:2},1040),v(L).description||l.description?(m(),a(v(w),p(d({key:0},l.descriptionProps)),{default:b(()=>[h(e.$slots,`description`,p(u(t)),()=>[s(g(l.description),1)])]),_:2},1040)):o(`v-if`,!0)]),_:2},1040),h(e.$slots,`default`,p(u(t))),v(L).footer?(m(),a(v(T),p(d({key:0},l.footerProps)),{default:b(()=>[h(e.$slots,`footer`,p(u(t)))]),_:2},1040)):o(`v-if`,!0)]),_:2},1040)]),_:2},1040)]),_:3},16))}});export{N as default};

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

@@ -1,5 +1,5 @@
 import { AlertDialogProps } from "./types.js";
-import * as vue17 from "vue";
+import * as vue98 from "vue";
 
 //#region src/components/alert-dialog/alert-dialog.vue.d.ts
 declare var __VLS_16: {}, __VLS_52: {
@@ -26,15 +26,15 @@ type __VLS_Slots = {} & {
 } & {
   footer?: (props: typeof __VLS_70) => any;
 };
-declare const __VLS_base: vue17.DefineComponent<AlertDialogProps, {}, {}, {}, {}, vue17.ComponentOptionsMixin, vue17.ComponentOptionsMixin, {
+declare const __VLS_base: vue98.DefineComponent<AlertDialogProps, {}, {}, {}, {}, vue98.ComponentOptionsMixin, vue98.ComponentOptionsMixin, {
   "update:open": (value: boolean) => any;
-}, string, vue17.PublicProps, Readonly<AlertDialogProps> & Readonly<{
+}, string, vue98.PublicProps, Readonly<AlertDialogProps> & Readonly<{
   "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
   open: boolean;
   defaultOpen: boolean;
   showIcon: boolean;
-}, {}, {}, {}, string, vue17.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, vue98.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/avatar/avatar.js

@@ -1 +1 @@
-import{mergeSlotVariants as e}from"../../theme/shared.js";import{avatarVariants as t}from"../../variants/avatar.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,provideAvatarThemeContext as y}from"@soybeanjs/headless";var b=o({name:`SAvatar`,__name:`avatar`,props:{size:{},ui:{},src:{},delayMs:{},fallbackLabel:{},imageProps:{},fallbackProps:{}},emits:[`loadingStatusChange`],setup(o,{emit:b}){let x=o,S=b,C=h(x,[`size`,`ui`,`fallbackLabel`,`imageProps`,`fallbackProps`]);y({ui:n(()=>e(t({size:x.size}),x.ui))});let w=n(()=>({src:x.src,...x.imageProps})),T=n(()=>({delayMs:x.delayMs,...x.fallbackProps}));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{avatarVariants as t}from"../../variants/avatar.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";var 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};

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

@@ -1,6 +1,6 @@
 import { AvatarProps } from "./types.js";
-import * as vue162 from "vue";
-import * as _soybeanjs_headless83 from "@soybeanjs/headless";
+import * as vue1 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: {};
@@ -11,11 +11,11 @@ type __VLS_Slots = {} & {
 } & {
   fallback?: (props: typeof __VLS_25) => any;
 };
-declare const __VLS_base: vue162.DefineComponent<AvatarProps, {}, {}, {}, {}, vue162.ComponentOptionsMixin, vue162.ComponentOptionsMixin, {
-  loadingStatusChange: (status: _soybeanjs_headless83.ImageLoadingStatus) => any;
-}, string, vue162.PublicProps, Readonly<AvatarProps> & Readonly<{
-  onLoadingStatusChange?: ((status: _soybeanjs_headless83.ImageLoadingStatus) => any) | undefined;
-}>, {}, {}, {}, {}, string, vue162.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: vue1.DefineComponent<AvatarProps, {}, {}, {}, {}, vue1.ComponentOptionsMixin, vue1.ComponentOptionsMixin, {
+  loadingStatusChange: (status: _soybeanjs_headless0.ImageLoadingStatus) => any;
+}, string, vue1.PublicProps, Readonly<AvatarProps> & Readonly<{
+  onLoadingStatusChange?: ((status: _soybeanjs_headless0.ImageLoadingStatus) => any) | undefined;
+}>, {}, {}, {}, {}, string, vue1.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -1,9 +1,13 @@
 import { ThemeSize } from "../../theme/types.js";
 import "../../theme/index.js";
-import { AvatarFallbackProps, AvatarImageEmits, AvatarImageProps, AvatarRootProps, AvatarUi } from "@soybeanjs/headless";
+import { AvatarFallbackProps, AvatarImageEmits, AvatarImageProps, AvatarRootProps, AvatarUi, ClassValue } from "@soybeanjs/headless";
 
 //#region src/components/avatar/types.d.ts
 interface AvatarProps extends AvatarRootProps {
+  /**
+   * root class
+   */
+  class?: ClassValue;
   size?: ThemeSize;
   ui?: Partial<AvatarUi>;
   /** The image source URL */

package/dist/components/badge/badge.js

@@ -1 +1 @@
-import{mergeSlotVariants as e}from"../../theme/shared.js";import{badgeVariants as t}from"../../variants/badge.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,useAttrs as p,withCtx as m}from"vue";import{BadgeContent as h,BadgeRoot as g,provideBadgeThemeContext as _}from"@soybeanjs/headless";var v=o({name:`SBadge`,__name:`badge`,props:{color:{},size:{},ui:{},position:{},content:{},contentProps:{},open:{type:Boolean,default:void 0}},emits:[`update:open`],setup(o,{emit:v}){let y=o,b=v,x=p();return _({ui:n(()=>e(t({color:y.color,size:y.size,position:y.position}),y.ui,x.class))}),(e,t)=>(l(),r(f(g),{open:o.open,"onUpdate:open":t[0]||=e=>b(`update:open`,e)},{default:m(()=>[u(e.$slots,`default`),a(f(h),c(s(o.contentProps)),{default:m(()=>[u(e.$slots,`content`,{},()=>[i(d(o.content),1)])]),_:3},16)]),_:3},8,[`open`]))}});export{v as default};
+import{mergeSlotVariants as e}from"../../theme/shared.js";import{badgeVariants as t}from"../../variants/badge.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";var _=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};

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

@@ -1,5 +1,5 @@
 import { BadgeProps } from "./types.js";
-import * as vue5 from "vue";
+import * as vue113 from "vue";
 
 //#region src/components/badge/badge.vue.d.ts
 declare var __VLS_10: {}, __VLS_18: {};
@@ -8,13 +8,13 @@ type __VLS_Slots = {} & {
 } & {
   content?: (props: typeof __VLS_18) => any;
 };
-declare const __VLS_base: vue5.DefineComponent<BadgeProps, {}, {}, {}, {}, vue5.ComponentOptionsMixin, vue5.ComponentOptionsMixin, {
+declare const __VLS_base: vue113.DefineComponent<BadgeProps, {}, {}, {}, {}, vue113.ComponentOptionsMixin, vue113.ComponentOptionsMixin, {
   "update:open": (open: boolean) => any;
-}, string, vue5.PublicProps, Readonly<BadgeProps> & Readonly<{
+}, string, vue113.PublicProps, Readonly<BadgeProps> & Readonly<{
   "onUpdate:open"?: ((open: boolean) => any) | undefined;
 }>, {
   open: boolean;
-}, {}, {}, {}, string, vue5.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, vue113.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -1,10 +1,14 @@
 import { ThemeColor, ThemeSize } from "../../theme/types.js";
 import "../../theme/index.js";
 import { BadgePosition } from "../../variants/badge.js";
-import { BadgeContentProps, BadgeRootEmits, BadgeRootProps, BadgeUi } from "@soybeanjs/headless";
+import { BadgeContentProps, BadgeRootEmits, BadgeRootProps, BadgeUi, ClassValue } from "@soybeanjs/headless";
 
 //#region src/components/badge/types.d.ts
 interface BadgeProps extends BadgeRootProps {
+  /**
+   * root class
+   */
+  class?: ClassValue;
   color?: ThemeColor;
   size?: ThemeSize;
   ui?: Partial<BadgeUi>;

package/dist/components/breadcrumb/breadcrumb.js

@@ -1 +1 @@
-import{mergeSlotVariants as e}from"../../theme/shared.js";import t from"../icon/icon.js";import{breadcrumbVariants as n}from"../../variants/breadcrumb.js";import{getEllipsisRange as r}from"./shared.js";import{Fragment as i,computed as a,createBlock as o,createCommentVNode as s,createElementBlock as c,createTextVNode as l,createVNode as u,defineComponent as d,guardReactiveProps as f,mergeProps as p,normalizeProps as m,openBlock as h,renderList as g,renderSlot as _,toDisplayString as v,unref as y,withCtx as b}from"vue";import{useOmitProps as x}from"@soybeanjs/headless/composables";import{BreadcrumbEllipsis as S,BreadcrumbItem as C,BreadcrumbLink as w,BreadcrumbList as T,BreadcrumbPage as E,BreadcrumbRoot as D,BreadcrumbSeparator as O,provideBreadcrumbThemeContext as k}from"@soybeanjs/headless";var A=d({name:`SBreadcrumb`,__name:`breadcrumb`,props:{size:{},ui:{},items:{},ellipsis:{type:[Boolean,Array,null]},listProps:{},itemProps:{},pageProps:{},separatorProps:{},ellipsisProps:{}},emits:[`click`],setup(d,{emit:A}){let j=d,M=A,N=x(j,[`size`,`ui`,`items`,`ellipsis`,`listProps`,`itemProps`,`pageProps`,`separatorProps`,`ellipsisProps`]),P=a(()=>e(n({size:j.size}),j.ui)),F=a(()=>r(j.items,j.ellipsis)),I=a(()=>F.value?.[0]),L=a(()=>{if(!F.value)return j.items;let[e,t]=F.value;return[...j.items.slice(0,e),...j.items.slice(t)]}),R=a(()=>{if(!F.value)return[];let[e,t]=F.value;return j.items.slice(e,t)});function z(e){M(`click`,e)}return k({ui:P}),(e,n)=>(h(),o(y(D),m(f(y(N))),{default:b(()=>[u(y(T),m(f(d.listProps)),{default:b(()=>[(h(!0),c(i,null,g(L.value,(n,r)=>(h(),c(i,{key:n.value||r},[I.value&&r===I.value?(h(),c(i,{key:0},[_(e.$slots,`ellipsis`,{ellipsisItems:R.value},()=>[u(y(S),p({ref_for:!0},d.ellipsisProps),{default:b(()=>[_(e.$slots,`ellipsis-icon`,{},()=>[u(t,{icon:`lucide:ellipsis`})])]),_:3},16)]),u(y(O),p({ref_for:!0},d.separatorProps),{default:b(()=>[_(e.$slots,`separator`,{},()=>[u(t,{icon:`lucide:chevron-right`})])]),_:3},16)],64)):s(`v-if`,!0),u(y(C),p({ref_for:!0},d.itemProps,{onClick:e=>z(n)}),{default:b(()=>[_(e.$slots,`item-leading`,{item:n},()=>[n.icon?(h(),o(t,{key:0,icon:n.icon},null,8,[`icon`])):s(`v-if`,!0)]),_(e.$slots,`default`,{item:n},()=>[n.linkProps?(h(),o(y(w),p({key:0,ref_for:!0},n.linkProps),{default:b(()=>[_(e.$slots,`item-link`,{item:n},()=>[l(v(n.label),1)])]),_:2},1040)):(h(),o(y(E),p({key:1,ref_for:!0},d.pageProps),{default:b(()=>[_(e.$slots,`item-label`,{item:n},()=>[l(v(n.label),1)])]),_:2},1040))]),_(e.$slots,`item-trailing`,{item:n})]),_:2},1040,[`onClick`]),r<L.value.length-1?(h(),o(y(O),p({key:1,ref_for:!0},d.separatorProps),{default:b(()=>[_(e.$slots,`separator`,{},()=>[u(t,{icon:`lucide:chevron-right`})])]),_:3},16)):s(`v-if`,!0)],64))),128))]),_:3},16)]),_:3},16))}});export{A as default};
+import{mergeSlotVariants as e}from"../../theme/shared.js";import t from"../icon/icon.js";import{breadcrumbVariants as n}from"../../variants/breadcrumb.js";import{getEllipsisRange as r}from"./shared.js";import{Fragment as i,computed as a,createBlock as o,createCommentVNode as s,createElementBlock as c,createTextVNode as l,createVNode as u,defineComponent as d,guardReactiveProps as f,mergeProps as p,normalizeProps as m,openBlock as h,renderList as g,renderSlot as _,toDisplayString as v,unref as y,withCtx as b}from"vue";import{useOmitProps as x}from"@soybeanjs/headless/composables";import{BreadcrumbEllipsis as S,BreadcrumbItem as C,BreadcrumbLink as w,BreadcrumbList as T,BreadcrumbPage as E,BreadcrumbRoot as D,BreadcrumbSeparator as O,provideBreadcrumbUi as k}from"@soybeanjs/headless";var A=d({name:`SBreadcrumb`,__name:`breadcrumb`,props:{class:{},size:{},ui:{},items:{},ellipsis:{type:[Boolean,Array,null]},listProps:{},itemProps:{},pageProps:{},separatorProps:{},ellipsisProps:{}},emits:[`click`],setup(d,{emit:A}){let j=d,M=A,N=x(j,[`class`,`size`,`ui`,`items`,`ellipsis`,`listProps`,`itemProps`,`pageProps`,`separatorProps`,`ellipsisProps`]),P=a(()=>e(n({size:j.size}),j.ui,{root:j.class})),F=a(()=>r(j.items,j.ellipsis)),I=a(()=>F.value?.[0]),L=a(()=>{if(!F.value)return j.items;let[e,t]=F.value;return[...j.items.slice(0,e),...j.items.slice(t)]}),R=a(()=>{if(!F.value)return[];let[e,t]=F.value;return j.items.slice(e,t)});function z(e){M(`click`,e)}return k(P),(e,n)=>(h(),o(y(D),m(f(y(N))),{default:b(()=>[u(y(T),m(f(d.listProps)),{default:b(()=>[(h(!0),c(i,null,g(L.value,(n,r)=>(h(),c(i,{key:n.value||r},[I.value&&r===I.value?(h(),c(i,{key:0},[_(e.$slots,`ellipsis`,{ellipsisItems:R.value},()=>[u(y(S),p({ref_for:!0},d.ellipsisProps),{default:b(()=>[_(e.$slots,`ellipsis-icon`,{},()=>[u(t,{icon:`lucide:ellipsis`})])]),_:3},16)]),u(y(O),p({ref_for:!0},d.separatorProps),{default:b(()=>[_(e.$slots,`separator`,{},()=>[u(t,{icon:`lucide:chevron-right`})])]),_:3},16)],64)):s(`v-if`,!0),u(y(C),p({ref_for:!0},d.itemProps,{onClick:e=>z(n)}),{default:b(()=>[_(e.$slots,`item-leading`,{item:n},()=>[n.icon?(h(),o(t,{key:0,icon:n.icon},null,8,[`icon`])):s(`v-if`,!0)]),_(e.$slots,`default`,{item:n},()=>[n.linkProps?(h(),o(y(w),p({key:0,ref_for:!0},n.linkProps),{default:b(()=>[_(e.$slots,`item-link`,{item:n},()=>[l(v(n.label),1)])]),_:2},1040)):(h(),o(y(E),p({key:1,ref_for:!0},d.pageProps),{default:b(()=>[_(e.$slots,`item-label`,{item:n},()=>[l(v(n.label),1)])]),_:2},1040))]),_(e.$slots,`item-trailing`,{item:n})]),_:2},1040,[`onClick`]),r<L.value.length-1?(h(),o(y(O),p({key:1,ref_for:!0},d.separatorProps),{default:b(()=>[_(e.$slots,`separator`,{},()=>[u(t,{icon:`lucide:chevron-right`})])]),_:3},16)):s(`v-if`,!0)],64))),128))]),_:3},16)]),_:3},16))}});export{A as default};

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

@@ -1,9 +1,9 @@
 import { BreadcrumbEmits, BreadcrumbOptionData, BreadcrumbProps } from "./types.js";
-import * as vue32 from "vue";
+import * as vue118 from "vue";
 
 //#region src/components/breadcrumb/breadcrumb.vue.d.ts
 declare const __VLS_export: <T extends BreadcrumbOptionData = BreadcrumbOptionData>(__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: vue32.PublicProps & __VLS_PrettifyLocal<BreadcrumbProps<T> & {
+  props: vue118.PublicProps & __VLS_PrettifyLocal<BreadcrumbProps<T> & {
     onClick?: ((item: T) => any) | undefined;
   }> & (typeof globalThis extends {
     __VLS_PROPS_FALLBACK: infer P;
@@ -42,7 +42,7 @@ declare const __VLS_export: <T extends BreadcrumbOptionData = BreadcrumbOptionDa
     separator?: (props: {}) => any;
   };
   emit: BreadcrumbEmits<T>;
-}>) => vue32.VNode & {
+}>) => vue118.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };
 declare const _default: typeof __VLS_export;

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

@@ -1,7 +1,7 @@
 import { ThemeSize } from "../../theme/types.js";
 import "../../theme/index.js";
 import { IconValue } from "../icon/types.js";
-import { BreadcrumbEllipsisProps, BreadcrumbItemProps, BreadcrumbLinkProps, BreadcrumbListProps, BreadcrumbPageProps, BreadcrumbRootProps, BreadcrumbSeparatorProps, BreadcrumbUi } from "@soybeanjs/headless";
+import { BreadcrumbEllipsisProps, BreadcrumbItemProps, BreadcrumbLinkProps, BreadcrumbListProps, BreadcrumbPageProps, BreadcrumbRootProps, BreadcrumbSeparatorProps, BreadcrumbUi, ClassValue } from "@soybeanjs/headless";
 
 //#region src/components/breadcrumb/types.d.ts
 interface BreadcrumbOptionData {
@@ -25,6 +25,10 @@ interface BreadcrumbOptionData {
   linkProps?: BreadcrumbLinkProps;
 }
 interface BreadcrumbProps<T extends BreadcrumbOptionData = BreadcrumbOptionData> extends Omit<BreadcrumbRootProps, 'onClick'> {
+  /**
+   * root class
+   */
+  class?: ClassValue;
   size?: ThemeSize;
   ui?: Partial<BreadcrumbUi>;
   items: T[];

package/dist/components/button/button-group.js

@@ -1 +1 @@
-import{buttonGroupVariants as e}from"../../variants/button.js";import{provideButtonGroupContext as t}from"./context.js";import{useConfigProvider as n}from"../config-provider/context.js";import{computed as r,createBlock as i,defineComponent as a,mergeProps as o,openBlock as s,renderSlot as c,unref as l,withCtx as u}from"vue";import{useOmitProps as d}from"@soybeanjs/headless/composables";import{Primitive as f}from"@soybeanjs/headless";import{transformPropsToContext as p}from"@soybeanjs/headless/shared";var m=a({name:`SButtonGroup`,__name:`button-group`,props:{orientation:{default:`horizontal`},dir:{default:`ltr`},color:{},size:{},variant:{},shape:{},shadow:{},fitContent:{type:Boolean},disabled:{type:Boolean},asChild:{type:Boolean},as:{}},setup(a){let m=a,h=d(m,[`orientation`,`color`,`size`,`variant`,`shape`,`shadow`,`disabled`]),g=n(`ButtonGroup`),_=r(()=>e({orientation:m.orientation})),v=r(()=>m.dir??g.dir.value);return t(p(m,[`color`,`size`,`variant`,`shape`,`shadow`,`fitContent`,`disabled`])),(e,t)=>(s(),i(l(f),o(l(h),{class:_.value,dir:v.value}),{default:u(()=>[c(e.$slots,`default`)]),_:3},16,[`class`,`dir`]))}});export{m as default};
+import{cn as e}from"../../theme/merge.js";import{buttonGroupVariants as t}from"../../variants/button.js";import{provideButtonGroupContext as n}from"./context.js";import{useConfigProvider as r}from"../config-provider/context.js";import{computed as i,createBlock as a,defineComponent as o,mergeProps as s,openBlock as c,renderSlot as l,unref as u,withCtx as d}from"vue";import{useOmitProps as f}from"@soybeanjs/headless/composables";import{Primitive as p}from"@soybeanjs/headless";import{transformPropsToContext as m}from"@soybeanjs/headless/shared";var h=o({name:`SButtonGroup`,__name:`button-group`,props:{orientation:{default:`horizontal`},dir:{default:`ltr`},class:{},color:{},size:{},variant:{},shape:{},shadow:{},fitContent:{type:Boolean},disabled:{type:Boolean},asChild:{type:Boolean},as:{}},setup(o){let h=o,g=f(h,[`class`,`orientation`,`color`,`size`,`variant`,`shape`,`shadow`,`disabled`]),_=r(`ButtonGroup`),v=i(()=>e(t({orientation:h.orientation}),h.class)),y=i(()=>h.dir??_.dir.value);return n(m(h,[`color`,`size`,`variant`,`shape`,`shadow`,`fitContent`,`disabled`])),(e,t)=>(c(),a(u(p),s(u(g),{class:v.value,dir:y.value}),{default:d(()=>[l(e.$slots,`default`)]),_:3},16,[`class`,`dir`]))}});export{h as default};

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

@@ -1,16 +1,16 @@
 import { ButtonGroupProps } from "./types.js";
-import * as vue54 from "vue";
-import * as _soybeanjs_headless1 from "@soybeanjs/headless";
+import * as vue130 from "vue";
+import * as _soybeanjs_headless44 from "@soybeanjs/headless";
 
 //#region src/components/button/button-group.vue.d.ts
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: vue54.DefineComponent<ButtonGroupProps, {}, {}, {}, {}, vue54.ComponentOptionsMixin, vue54.ComponentOptionsMixin, {}, string, vue54.PublicProps, Readonly<ButtonGroupProps> & Readonly<{}>, {
-  dir: _soybeanjs_headless1.Direction;
-  orientation: _soybeanjs_headless1.DataOrientation;
-}, {}, {}, {}, string, vue54.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: vue130.DefineComponent<ButtonGroupProps, {}, {}, {}, {}, vue130.ComponentOptionsMixin, vue130.ComponentOptionsMixin, {}, string, vue130.PublicProps, Readonly<ButtonGroupProps> & Readonly<{}>, {
+  dir: _soybeanjs_headless44.Direction;
+  orientation: _soybeanjs_headless44.DataOrientation;
+}, {}, {}, {}, string, vue130.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/button/button-icon.js

@@ -1 +1 @@
-import e from"./button.js";import t from"../icon/icon.js";import{createBlock as n,createVNode as r,defineComponent as i,guardReactiveProps as a,mergeProps as o,normalizeProps as s,openBlock as c,unref as l,withCtx as u}from"vue";import{useOmitProps as d}from"@soybeanjs/headless/composables";var f=i({name:`SButtonIcon`,__name:`button-icon`,props:{icon:{},iconProps:{},color:{default:`accent`},size:{},variant:{default:`ghost`},shape:{default:`square`},shadow:{},fitContent:{type:Boolean,default:!0},disabled:{type:Boolean},asChild:{type:Boolean},as:{}},setup(i){let f=d(i,[`icon`,`iconProps`]);return(d,p)=>(c(),n(e,s(a(l(f))),{default:u(()=>[r(t,o({icon:i.icon},i.iconProps),null,16,[`icon`])]),_:1},16))}});export{f as default};
+import e from"./button.js";import t from"../icon/icon.js";import{createBlock as n,createVNode as r,defineComponent as i,guardReactiveProps as a,mergeProps as o,normalizeProps as s,openBlock as c,unref as l,withCtx as u}from"vue";import{useOmitProps as d}from"@soybeanjs/headless/composables";var f=i({name:`SButtonIcon`,__name:`button-icon`,props:{icon:{},iconProps:{},class:{},color:{default:`accent`},size:{},variant:{default:`ghost`},shape:{default:`square`},shadow:{},fitContent:{type:Boolean,default:!0},disabled:{type:Boolean},asChild:{type:Boolean},as:{}},setup(i){let f=d(i,[`icon`,`iconProps`]);return(d,p)=>(c(),n(e,s(a(l(f))),{default:u(()=>[r(t,o({icon:i.icon},i.iconProps),null,16,[`icon`])]),_:1},16))}});export{f as default};

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

@@ -2,15 +2,15 @@ import { ThemeColor } from "../../theme/types.js";
 import { ButtonShape, ButtonVariant } from "../../variants/button.js";
 import { ButtonIconProps } from "./types.js";
 import "../../index.js";
-import * as vue49 from "vue";
+import * as vue125 from "vue";
 
 //#region src/components/button/button-icon.vue.d.ts
-declare const __VLS_export: vue49.DefineComponent<ButtonIconProps, {}, {}, {}, {}, vue49.ComponentOptionsMixin, vue49.ComponentOptionsMixin, {}, string, vue49.PublicProps, Readonly<ButtonIconProps> & Readonly<{}>, {
+declare const __VLS_export: vue125.DefineComponent<ButtonIconProps, {}, {}, {}, {}, vue125.ComponentOptionsMixin, vue125.ComponentOptionsMixin, {}, string, vue125.PublicProps, Readonly<ButtonIconProps> & Readonly<{}>, {
   color: ThemeColor;
   variant: ButtonVariant;
   shape: ButtonShape;
   fitContent: boolean;
-}, {}, {}, {}, string, vue49.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, vue125.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion
 export { _default };

package/dist/components/button/button-link.js

@@ -1 +1 @@
-import e from"./button.js";import t from"../link/link.js";import{createBlock as n,createVNode as r,defineComponent as i,guardReactiveProps as a,mergeProps as o,normalizeProps as s,openBlock as c,renderSlot as l,unref as u,withCtx as d}from"vue";import{useOmitProps as f,usePickProps as p}from"@soybeanjs/headless/composables";var m=i({name:`SButtonLink`,__name:`button-link`,props:{color:{},size:{},variant:{default:`link`},shape:{},shadow:{},fitContent:{type:Boolean},disabled:{type:Boolean,default:void 0},asChild:{type:Boolean},as:{},to:{},href:{},inactiveClass:{},external:{type:Boolean,default:void 0},target:{},rel:{},noRel:{type:Boolean,default:void 0},prefetchedClass:{},prefetch:{type:Boolean,default:void 0},prefetchOn:{},noPrefetch:{type:Boolean,default:void 0},trailingSlash:{},custom:{type:Boolean},activeClass:{},exactActiveClass:{},ariaCurrentValue:{},viewTransition:{type:Boolean,default:void 0},replace:{type:Boolean,default:void 0}},setup(i){let m=i,h=p(m,[`color`,`size`,`variant`,`shape`,`shadow`,`fitContent`]),g=f(m,[`color`,`size`,`variant`,`shape`,`shadow`,`fitContent`]);return(i,f)=>(c(),n(e,o(u(h),{"as-child":``}),{default:d(()=>[r(t,s(a(u(g))),{default:d(e=>[l(i.$slots,`default`,s(a(e)))]),_:3},16)]),_:3},16))}});export{m as default};
+import e from"./button.js";import t from"../link/link.js";import{createBlock as n,createVNode as r,defineComponent as i,guardReactiveProps as a,mergeProps as o,normalizeProps as s,openBlock as c,renderSlot as l,unref as u,withCtx as d}from"vue";import{useOmitProps as f,usePickProps as p}from"@soybeanjs/headless/composables";var m=i({name:`SButtonLink`,__name:`button-link`,props:{class:{},color:{},size:{},variant:{default:`link`},shape:{},shadow:{},fitContent:{type:Boolean},disabled:{type:Boolean,default:void 0},asChild:{type:Boolean},as:{},to:{},href:{},inactiveClass:{},external:{type:Boolean,default:void 0},target:{},rel:{},noRel:{type:Boolean,default:void 0},prefetchedClass:{},prefetch:{type:Boolean,default:void 0},prefetchOn:{},noPrefetch:{type:Boolean,default:void 0},trailingSlash:{},custom:{type:Boolean},activeClass:{},exactActiveClass:{},ariaCurrentValue:{},viewTransition:{type:Boolean,default:void 0},replace:{type:Boolean,default:void 0}},setup(i){let m=i,h=[`class`,`color`,`size`,`variant`,`shape`,`shadow`,`fitContent`],g=p(m,[...h]),_=f(m,[...h]);return(i,f)=>(c(),n(e,o(u(g),{"as-child":``}),{default:d(()=>[r(t,s(a(u(_))),{default:d(e=>[l(i.$slots,`default`,s(a(e)))]),_:3},16)]),_:3},16))}});export{m as default};

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

@@ -1,6 +1,6 @@
 import { ButtonVariant } from "../../variants/button.js";
 import { ButtonLinkProps } from "./types.js";
-import * as vue59 from "vue";
+import * as vue120 from "vue";
 
 //#region src/components/button/button-link.vue.d.ts
 declare var __VLS_14: {
@@ -9,16 +9,16 @@ declare var __VLS_14: {
 type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_14) => any;
 };
-declare const __VLS_base: vue59.DefineComponent<ButtonLinkProps, {}, {}, {}, {}, vue59.ComponentOptionsMixin, vue59.ComponentOptionsMixin, {}, string, vue59.PublicProps, Readonly<ButtonLinkProps> & Readonly<{}>, {
+declare const __VLS_base: vue120.DefineComponent<ButtonLinkProps, {}, {}, {}, {}, vue120.ComponentOptionsMixin, vue120.ComponentOptionsMixin, {}, string, vue120.PublicProps, Readonly<ButtonLinkProps> & Readonly<{}>, {
   disabled: boolean;
-  replace: boolean;
   variant: ButtonVariant;
+  replace: boolean;
   viewTransition: boolean;
   external: boolean;
   noRel: boolean;
   prefetch: boolean;
   noPrefetch: boolean;
-}, {}, {}, {}, string, vue59.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, vue120.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/button/button-loading.js

@@ -1 +1 @@
-import e from"./button.js";import t from"../icon/icon.js";import{computed as n,createBlock as r,createCommentVNode as i,createElementBlock as a,createElementVNode as o,createVNode as s,defineComponent as c,mergeProps as l,openBlock as u,ref as d,renderSlot as f,toDisplayString as p,unref as m,useAttrs as h,watchEffect as g,withCtx as _}from"vue";import{useOmitProps as v}from"@soybeanjs/headless/composables";const y={key:0,style:{display:`contents`}},b={style:{position:`absolute`,inset:`0`,"justify-content":`center`,"align-items":`center`,display:`flex`,gap:`0.25rem`,"z-index":`1`}},x={key:0},S={style:{visibility:`hidden`,display:`contents`}};var C=c({name:`SButtonLoading`,inheritAttrs:!1,__name:`button-loading`,props:{loading:{type:Boolean},loadingText:{},loadingDuration:{},autoLoading:{type:Boolean},loadingIcon:{default:`svg-spinners:270-ring`},loadingIconProps:{},loadingPosition:{default:`start`},color:{},size:{},variant:{},shape:{},shadow:{},fitContent:{type:Boolean},disabled:{type:Boolean},asChild:{type:Boolean},as:{}},setup(c){let C=c,w=h(),T=d(!1),E=n(()=>C.disabled||T.value),D=async e=>{C.autoLoading&&(T.value=!0);try{(Array.isArray(w.onClick)?w.onClick:[w.onClick]).forEach(t=>t?.(e))}finally{C.autoLoading&&(C.loadingDuration&&await new Promise(e=>{setTimeout(e,C.loadingDuration)}),T.value=!1)}},O=v(C,[`loading`,`loadingText`,`loadingDuration`,`autoLoading`,`loadingIcon`,`loadingIconProps`,`loadingPosition`],w,{onClick:D});return g(()=>{T.value=C.loading}),(n,d)=>(u(),r(e,l(m(O),{disabled:E.value,style:{position:`relative`},onClick:D}),{leading:_(()=>[T.value&&c.loadingPosition===`start`?(u(),r(t,l({key:0,icon:c.loadingIcon},c.loadingIconProps),null,16,[`icon`])):f(n.$slots,`leading`,{key:1})]),trailing:_(()=>[T.value&&c.loadingPosition===`end`?(u(),r(t,l({key:0,icon:c.loadingIcon},c.loadingIconProps),null,16,[`icon`])):f(n.$slots,`trailing`,{key:1})]),default:_(()=>[T.value&&c.loadingPosition===`center`?(u(),a(`span`,y,[o(`span`,b,[s(t,l({icon:c.loadingIcon},c.loadingIconProps),null,16,[`icon`]),c.loadingText?(u(),a(`span`,x,p(c.loadingText),1)):i(`v-if`,!0)]),o(`span`,S,[f(n.$slots,`default`,{loading:T.value})])])):f(n.$slots,`default`,{key:1,loading:T.value})]),_:3},16,[`disabled`]))}});export{C as default};
+import e from"./button.js";import t from"../icon/icon.js";import{computed as n,createBlock as r,createCommentVNode as i,createElementBlock as a,createElementVNode as o,createVNode as s,defineComponent as c,mergeProps as l,openBlock as u,ref as d,renderSlot as f,toDisplayString as p,unref as m,useAttrs as h,watchEffect as g,withCtx as _}from"vue";import{useOmitProps as v}from"@soybeanjs/headless/composables";const y={key:0,style:{display:`contents`}},b={style:{position:`absolute`,inset:`0`,"justify-content":`center`,"align-items":`center`,display:`flex`,gap:`0.25rem`,"z-index":`1`}},x={key:0},S={style:{visibility:`hidden`,display:`contents`}};var C=c({name:`SButtonLoading`,inheritAttrs:!1,__name:`button-loading`,props:{loading:{type:Boolean},loadingText:{},loadingDuration:{},autoLoading:{type:Boolean},loadingIcon:{default:`svg-spinners:270-ring`},loadingIconProps:{},loadingPosition:{default:`start`},class:{},color:{},size:{},variant:{},shape:{},shadow:{},fitContent:{type:Boolean},disabled:{type:Boolean},asChild:{type:Boolean},as:{}},setup(c){let C=c,w=h(),T=d(!1),E=n(()=>C.disabled||T.value),D=async e=>{C.autoLoading&&(T.value=!0);try{(Array.isArray(w.onClick)?w.onClick:[w.onClick]).forEach(t=>t?.(e))}finally{C.autoLoading&&(C.loadingDuration&&await new Promise(e=>{setTimeout(e,C.loadingDuration)}),T.value=!1)}},O=v(C,[`loading`,`loadingText`,`loadingDuration`,`autoLoading`,`loadingIcon`,`loadingIconProps`,`loadingPosition`],w,{onClick:D});return g(()=>{T.value=C.loading}),(n,d)=>(u(),r(e,l(m(O),{disabled:E.value,style:{position:`relative`},onClick:D}),{leading:_(()=>[T.value&&c.loadingPosition===`start`?(u(),r(t,l({key:0,icon:c.loadingIcon},c.loadingIconProps),null,16,[`icon`])):f(n.$slots,`leading`,{key:1})]),trailing:_(()=>[T.value&&c.loadingPosition===`end`?(u(),r(t,l({key:0,icon:c.loadingIcon},c.loadingIconProps),null,16,[`icon`])):f(n.$slots,`trailing`,{key:1})]),default:_(()=>[T.value&&c.loadingPosition===`center`?(u(),a(`span`,y,[o(`span`,b,[s(t,l({icon:c.loadingIcon},c.loadingIconProps),null,16,[`icon`]),c.loadingText?(u(),a(`span`,x,p(c.loadingText),1)):i(`v-if`,!0)]),o(`span`,S,[f(n.$slots,`default`,{loading:T.value})])])):f(n.$slots,`default`,{key:1,loading:T.value})]),_:3},16,[`disabled`]))}});export{C as default};

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

@@ -1,5 +1,5 @@
 import { ButtonLoadingProps } from "./types.js";
-import * as vue44 from "vue";
+import * as vue135 from "vue";
 import { Align } from "@soybeanjs/headless";
 
 //#region src/components/button/button-loading.vue.d.ts
@@ -17,10 +17,10 @@ type __VLS_Slots = {} & {
 } & {
   trailing?: (props: typeof __VLS_33) => any;
 };
-declare const __VLS_base: vue44.DefineComponent<ButtonLoadingProps, {}, {}, {}, {}, vue44.ComponentOptionsMixin, vue44.ComponentOptionsMixin, {}, string, vue44.PublicProps, Readonly<ButtonLoadingProps> & Readonly<{}>, {
+declare const __VLS_base: vue135.DefineComponent<ButtonLoadingProps, {}, {}, {}, {}, vue135.ComponentOptionsMixin, vue135.ComponentOptionsMixin, {}, string, vue135.PublicProps, Readonly<ButtonLoadingProps> & Readonly<{}>, {
   loadingIcon: string;
   loadingPosition: Align;
-}, {}, {}, {}, string, vue44.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, vue135.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/button/button.js

@@ -1 +1 @@
-import{cn as e}from"../../theme/merge.js";import{buttonVariants as t}from"../../variants/button.js";import{useButtonGroupContext as n}from"./context.js";import{computed as r,createBlock as i,defineComponent as a,mergeProps as o,openBlock as s,renderSlot as c,unref as l,withCtx as u}from"vue";import{useOmitProps as d}from"@soybeanjs/headless/composables";import{Button as f}from"@soybeanjs/headless";var p=a({name:`SButton`,__name:`button`,props:{color:{},size:{},variant:{},shape:{},shadow:{},fitContent:{type:Boolean},disabled:{type:Boolean},asChild:{type:Boolean},as:{}},emits:[`click`],setup(a,{emit:p}){let m=a,h=p,g=n(),_=d(m,[`size`,`color`,`variant`,`shape`,`shadow`,`disabled`,`fitContent`]),v=r(()=>{let{size:n,color:r,variant:i,shape:a,shadow:o,fitContent:s}=g||{};return e(t({size:m.size||n?.value,color:m.color||r?.value,variant:m.variant||i?.value,shape:m.shape||a?.value,shadow:m.shadow||o?.value,fitContent:m.fitContent||s?.value}),m.class)}),y=r(()=>m.disabled||g?.disabled.value);return(e,t)=>(s(),i(l(f),o(l(_),{class:v.value,disabled:y.value,onClick:t[0]||=e=>h(`click`,e)}),{default:u(()=>[c(e.$slots,`leading`),c(e.$slots,`default`),c(e.$slots,`trailing`)]),_:3},16,[`class`,`disabled`]))}});export{p as default};
+import{cn as e}from"../../theme/merge.js";import{buttonVariants as t}from"../../variants/button.js";import{useButtonGroupContext as n}from"./context.js";import{computed as r,createBlock as i,defineComponent as a,mergeProps as o,openBlock as s,renderSlot as c,unref as l,withCtx as u}from"vue";import{useOmitProps as d}from"@soybeanjs/headless/composables";import{Button as f}from"@soybeanjs/headless";var p=a({name:`SButton`,__name:`button`,props:{class:{},color:{},size:{},variant:{},shape:{},shadow:{},fitContent:{type:Boolean},disabled:{type:Boolean},asChild:{type:Boolean},as:{}},emits:[`click`],setup(a,{emit:p}){let m=a,h=p,g=n(),_=d(m,[`class`,`size`,`color`,`variant`,`shape`,`shadow`,`disabled`,`fitContent`]),v=r(()=>{let{size:n,color:r,variant:i,shape:a,shadow:o,fitContent:s}=g||{};return e(t({size:m.size||n?.value,color:m.color||r?.value,variant:m.variant||i?.value,shape:m.shape||a?.value,shadow:m.shadow||o?.value,fitContent:m.fitContent||s?.value}),m.class)}),y=r(()=>m.disabled||g?.disabled.value);return(e,t)=>(s(),i(l(f),o(l(_),{class:v.value,disabled:y.value,onClick:t[0]||=e=>h(`click`,e)}),{default:u(()=>[c(e.$slots,`leading`),c(e.$slots,`default`),c(e.$slots,`trailing`)]),_:3},16,[`class`,`disabled`]))}});export{p as default};

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

@@ -1,5 +1,5 @@
 import { ButtonProps } from "./types.js";
-import * as vue39 from "vue";
+import * as vue140 from "vue";
 
 //#region src/components/button/button.vue.d.ts
 declare var __VLS_10: {}, __VLS_12: {}, __VLS_14: {};
@@ -10,11 +10,11 @@ type __VLS_Slots = {} & {
 } & {
   trailing?: (props: typeof __VLS_14) => any;
 };
-declare const __VLS_base: vue39.DefineComponent<ButtonProps, {}, {}, {}, {}, vue39.ComponentOptionsMixin, vue39.ComponentOptionsMixin, {
+declare const __VLS_base: vue140.DefineComponent<ButtonProps, {}, {}, {}, {}, vue140.ComponentOptionsMixin, vue140.ComponentOptionsMixin, {
   click: (event: MouseEvent) => any;
-}, string, vue39.PublicProps, Readonly<ButtonProps> & Readonly<{
+}, string, vue140.PublicProps, Readonly<ButtonProps> & Readonly<{
   onClick?: ((event: MouseEvent) => any) | undefined;
-}>, {}, {}, {}, {}, string, vue39.ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, vue140.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -2,11 +2,12 @@ import { ThemeColor, ThemeSize } from "../../theme/types.js";
 import "../../theme/index.js";
 import { IconProps } from "../icon/types.js";
 import { ButtonShadow, ButtonShape, ButtonVariant } from "../../variants/button.js";
-import { LinkProps } from "../link/types.js";
-import { Align, ButtonEmits, ButtonProps, DataOrientation, Direction, PropsToContext } from "@soybeanjs/headless";
+import { LinkProps as LinkProps$1 } from "../link/types.js";
+import { Align, ButtonEmits, ButtonProps, ClassValue, DataOrientation, Direction, PropsToContext } from "@soybeanjs/headless";
 
 //#region src/components/button/types.d.ts
 interface ButtonProps$1 extends ButtonProps {
+  class?: ClassValue;
   color?: ThemeColor;
   size?: ThemeSize;
   variant?: ButtonVariant;
@@ -61,7 +62,7 @@ interface ButtonLoadingProps extends ButtonProps$1 {
    */
   loadingPosition?: Align;
 }
-type ButtonLinkProps = ButtonProps$1 & LinkProps;
+type ButtonLinkProps = ButtonProps$1 & LinkProps$1;
 interface ButtonGroupProps extends ButtonProps$1 {
   /**
    * The orientation of the button group.