@soybeanjs/ui 0.9.1 → 0.9.2

package/dist/components/accordion/accordion.js

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

package/dist/components/command/command.js

@@ -1 +1 @@
-import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import t from"../icon/icon.js";import{provideCommandExtraUi as n}from"./context.js";import{commandVariants as r}from"./variants.js";import i from"./command-option.js";import{getCommandHighlightSearchOption as a,getCommandItemOptions as o,getCommandSearchOptions as s}from"./shared.js";import{Fragment as c,computed as l,createBlock as u,createCommentVNode as d,createElementBlock as f,createTextVNode as p,createVNode as m,defineComponent as h,guardReactiveProps as g,isRef as _,mergeProps as v,normalizeClass as y,normalizeProps as b,openBlock as x,renderList as S,renderSlot as C,toDisplayString as w,toHandlers as T,unref as E,withCtx as D}from"vue";import{useControllableState as O,useForwardListeners as k,useOmitProps as A,usePickProps as j}from"@soybeanjs/headless/composables";import{ListboxContent as M,ListboxFilter as N,ListboxRoot as P,provideListboxUi as F}from"@soybeanjs/headless";import{useFuse as I}from"@vueuse/integrations/useFuse";import{defu as L}from"defu";const R=h({name:`SCommand`,__name:`command`,props:{class:{},size:{},ui:{},items:{},placeholder:{},searchTerm:{},clearable:{type:Boolean},fuseOptions:{},listProps:{},itemProps:{},itemLabelProps:{},groupProps:{},groupLabelProps:{},shortcutProps:{},separatorProps:{},inputProps:{},emptyProps:{},emptyLabel:{},orientation:{},dir:{},disabled:{type:Boolean},selectionBehavior:{},highlightOnHover:{type:Boolean},modelValue:{},defaultValue:{},multiple:{},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`highlight`,`entryFocus`,`leave`,`select`,`update:searchTerm`],setup(h,{emit:R}){let z=h,B=R,V=A(z,[`class`,`size`,`ui`,`items`,`placeholder`,`searchTerm`,`fuseOptions`,`emptyLabel`,`listProps`,`itemProps`,`itemLabelProps`,`groupProps`,`groupLabelProps`,`shortcutProps`,`separatorProps`,`inputProps`,`emptyProps`]),H=k(B),U=j(z,[`itemProps`,`itemLabelProps`,`groupProps`,`groupLabelProps`,`shortcutProps`,`separatorProps`]),W=O(()=>z.searchTerm,e=>{B(`update:searchTerm`,e)},z.inputProps?.defaultValue||``),G=l(()=>L(z.fuseOptions,{fuseOptions:{ignoreLocation:!0,threshold:.1,keys:[`label`,`groupLabel`]},resultLimit:12,matchAllWhenSearchEmpty:!0})),{results:K}=I(W,l(()=>s(z.items)),G),q=l(()=>o(K.value.map(e=>a(e.item,W.value)))),J=l(()=>e(r({size:z.size}),z.ui,{root:z.class})),Y=l(()=>({...J.value,content:J.value.list,filterRoot:J.value.inputRoot,filterControl:J.value.inputControl,itemIndicator:``,virtualizer:``})),X=l(()=>({...z.inputProps,placeholder:z.placeholder??z.inputProps?.placeholder}));return F(Y),n(J),(e,n)=>(x(),u(E(P),v(E(V),T(E(H))),{default:D(()=>[m(E(N),v(X.value,{modelValue:E(W),"onUpdate:modelValue":n[0]||=e=>_(W)?W.value=e:null,autofocus:``}),{leading:D(()=>[C(e.$slots,`input-leading`,{},()=>[m(t,{icon:`lucide:search`,class:y(J.value.inputIcon)},null,8,[`class`])])]),trailing:D(({clear:n})=>[h.clearable?(x(),u(t,{key:0,icon:`lucide:x`,class:y(J.value.inputClearable),onClick:n},null,8,[`class`,`onClick`])):d(`v-if`,!0),C(e.$slots,`input-trailing`)]),_:3},16,[`modelValue`]),m(E(M),b(g(h.listProps)),{default:D(()=>[q.value.length?d(`v-if`,!0):(x(),f(`div`,{key:0,class:y(J.value.empty)},[C(e.$slots,`empty`,{},()=>[p(w(h.emptyLabel),1)])],2)),(x(!0),f(c,null,S(q.value,(t,r)=>(x(),u(i,v({ref_for:!0},E(U),{key:r,item:t,onSelect:n[1]||=e=>B(`select`,e)}),{"item-leading":D(t=>[C(e.$slots,`item-leading`,{item:t.item})]),"item-trailing":D(t=>[C(e.$slots,`item-trailing`,{item:t.item})]),"item-label":D(t=>[C(e.$slots,`item-label`,{item:t.item})]),_:2},1040,[`item`]))),128))]),_:3},16),C(e.$slots,`bottom`)]),_:3},16))}});export{R as default};
+import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import t from"../icon/icon.js";import{provideCommandExtraUi as n}from"./context.js";import{commandVariants as r}from"./variants.js";import i from"./command-option.js";import{getCommandHighlightSearchOption as a,getCommandItemOptions as o,getCommandSearchOptions as s}from"./shared.js";import{Fragment as c,computed as l,createBlock as u,createCommentVNode as d,createElementBlock as f,createTextVNode as p,createVNode as m,defineComponent as h,guardReactiveProps as g,isRef as _,mergeProps as v,normalizeClass as y,normalizeProps as b,openBlock as x,renderList as S,renderSlot as C,toDisplayString as w,toHandlers as T,unref as E,withCtx as D}from"vue";import{useControllableState as O,useForwardListeners as k,useOmitProps as A,usePickProps as j}from"@soybeanjs/headless/composables";import{ListboxContent as M,ListboxFilter as N,ListboxRoot as P,provideListboxUi as F}from"@soybeanjs/headless";import{useFuse as I}from"@vueuse/integrations/useFuse";import{defu as L}from"defu";const R=h({name:`SCommand`,__name:`command`,props:{class:{},size:{},ui:{},items:{},placeholder:{},searchTerm:{},clearable:{type:Boolean},fuseOptions:{},listProps:{},itemProps:{},itemLabelProps:{},groupProps:{},groupLabelProps:{},shortcutProps:{},separatorProps:{},inputProps:{},emptyProps:{},emptyLabel:{},orientation:{},dir:{},disabled:{type:Boolean},selectionBehavior:{},highlightOnHover:{type:Boolean},modelValue:{},defaultValue:{},multiple:{},singleClearable:{type:Boolean},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`highlight`,`entryFocus`,`leave`,`select`,`update:searchTerm`],setup(h,{emit:R}){let z=h,B=R,V=A(z,[`class`,`size`,`ui`,`items`,`placeholder`,`searchTerm`,`fuseOptions`,`emptyLabel`,`listProps`,`itemProps`,`itemLabelProps`,`groupProps`,`groupLabelProps`,`shortcutProps`,`separatorProps`,`inputProps`,`emptyProps`]),H=k(B),U=j(z,[`itemProps`,`itemLabelProps`,`groupProps`,`groupLabelProps`,`shortcutProps`,`separatorProps`]),W=O(()=>z.searchTerm,e=>{B(`update:searchTerm`,e)},z.inputProps?.defaultValue||``),G=l(()=>L(z.fuseOptions,{fuseOptions:{ignoreLocation:!0,threshold:.1,keys:[`label`,`groupLabel`]},resultLimit:12,matchAllWhenSearchEmpty:!0})),{results:K}=I(W,l(()=>s(z.items)),G),q=l(()=>o(K.value.map(e=>a(e.item,W.value)))),J=l(()=>e(r({size:z.size}),z.ui,{root:z.class})),Y=l(()=>({...J.value,content:J.value.list,filterRoot:J.value.inputRoot,filterControl:J.value.inputControl,itemIndicator:``,virtualizer:``})),X=l(()=>({...z.inputProps,placeholder:z.placeholder??z.inputProps?.placeholder}));return F(Y),n(J),(e,n)=>(x(),u(E(P),v(E(V),T(E(H))),{default:D(()=>[m(E(N),v(X.value,{modelValue:E(W),"onUpdate:modelValue":n[0]||=e=>_(W)?W.value=e:null,autofocus:``}),{leading:D(()=>[C(e.$slots,`input-leading`,{},()=>[m(t,{icon:`lucide:search`,class:y(J.value.inputIcon)},null,8,[`class`])])]),trailing:D(({clear:n})=>[h.clearable?(x(),u(t,{key:0,icon:`lucide:x`,class:y(J.value.inputClearable),onClick:n},null,8,[`class`,`onClick`])):d(`v-if`,!0),C(e.$slots,`input-trailing`)]),_:3},16,[`modelValue`]),m(E(M),b(g(h.listProps)),{default:D(()=>[q.value.length?d(`v-if`,!0):(x(),f(`div`,{key:0,class:y(J.value.empty)},[C(e.$slots,`empty`,{},()=>[p(w(h.emptyLabel),1)])],2)),(x(!0),f(c,null,S(q.value,(t,r)=>(x(),u(i,v({ref_for:!0},E(U),{key:r,item:t,onSelect:n[1]||=e=>B(`select`,e)}),{"item-leading":D(t=>[C(e.$slots,`item-leading`,{item:t.item})]),"item-trailing":D(t=>[C(e.$slots,`item-trailing`,{item:t.item})]),"item-label":D(t=>[C(e.$slots,`item-label`,{item:t.item})]),_:2},1040,[`item`]))),128))]),_:3},16),C(e.$slots,`bottom`)]),_:3},16))}});export{R as default};

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

@@ -8,8 +8,8 @@ declare const __VLS_export: <T extends CommandBaseOptionData = CommandBaseOption
   props: vue.PublicProps & __VLS_PrettifyLocal<CommandProps<T> & {
     onSelect?: ((event: _soybeanjs_headless0.SelectEvent<string>) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-    onHighlight?: ((payload?: _soybeanjs_headless_composables0.CollectionItemData<_soybeanjs_headless0.ListboxCollectionItemData> | undefined) => any) | undefined;
     onEntryFocus?: ((event: CustomEvent<any>) => any) | undefined;
+    onHighlight?: ((payload?: _soybeanjs_headless_composables0.CollectionItemData<_soybeanjs_headless0.ListboxCollectionItemData> | undefined) => any) | undefined;
     onLeave?: ((event: Event) => any) | undefined;
     "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
   }> & (typeof globalThis extends {
@@ -38,7 +38,7 @@ declare const __VLS_export: <T extends CommandBaseOptionData = CommandBaseOption
   } & {
     bottom?: (props: {}) => any;
   };
-  emit: ((evt: "select", event: _soybeanjs_headless0.SelectEvent<string>) => void) & ((evt: "update:modelValue", value: string) => void) & ((evt: "highlight", payload?: _soybeanjs_headless_composables0.CollectionItemData<_soybeanjs_headless0.ListboxCollectionItemData> | undefined) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void) & ((evt: "update:searchTerm", value: string) => void);
+  emit: ((evt: "select", event: _soybeanjs_headless0.SelectEvent<string>) => void) & ((evt: "update:modelValue", value: string) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "highlight", payload?: _soybeanjs_headless_composables0.CollectionItemData<_soybeanjs_headless0.ListboxCollectionItemData> | undefined) => void) & ((evt: "leave", event: Event) => void) & ((evt: "update:searchTerm", value: string) => void);
 }>) => vue.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -8,8 +8,8 @@ import { DefinedValue } from "@soybeanjs/headless";
 declare const __VLS_export: <T extends DefinedValue = DefinedValue, S extends MenuCheckboxOptionData<T> = MenuCheckboxOptionData<T>>(__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: vue.PublicProps & __VLS_PrettifyLocal<ContextMenuCheckboxProps<T, S> & {
     onSelect?: ((item: S, event: Event) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
     onEntryFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: _soybeanjs_headless0.PointerDownOutsideEvent) => any) | undefined;
@@ -29,7 +29,7 @@ declare const __VLS_export: <T extends DefinedValue = DefinedValue, S extends Me
     'item-trailing': (props: S) => any;
     'item-indicator-icon': (props: S) => any;
   };
-  emit: ((evt: "select", item: S, event: Event) => void) & ((evt: "update:modelValue", value: T[]) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "entryFocus", event: Event) => void) & ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: _soybeanjs_headless0.PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: _soybeanjs_headless0.FocusOutsideEvent) => void) & ((evt: "interactOutside", event: _soybeanjs_headless0.PointerDownOutsideEvent | _soybeanjs_headless0.FocusOutsideEvent) => void) & ((evt: "openAutoFocus", event: Event) => void) & ((evt: "closeAutoFocus", event: Event) => void);
+  emit: ((evt: "select", item: S, event: Event) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: T[]) => void) & ((evt: "entryFocus", event: Event) => void) & ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: _soybeanjs_headless0.PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: _soybeanjs_headless0.FocusOutsideEvent) => void) & ((evt: "interactOutside", event: _soybeanjs_headless0.PointerDownOutsideEvent | _soybeanjs_headless0.FocusOutsideEvent) => void) & ((evt: "openAutoFocus", event: Event) => void) & ((evt: "closeAutoFocus", event: Event) => void);
 }>) => vue.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -8,8 +8,8 @@ import { AcceptableBooleanValue } from "@soybeanjs/headless";
 declare const __VLS_export: <T extends AcceptableBooleanValue = AcceptableBooleanValue, S extends MenuRadioOptionData<T> = MenuRadioOptionData<T>>(__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: vue.PublicProps & __VLS_PrettifyLocal<ContextMenuRadioProps<T, S> & {
     onSelect?: ((item: S, event: Event) => any) | undefined;
-    "onUpdate:modelValue"?: ((payload: NonNullable<T>) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((payload: NonNullable<T>) => any) | undefined;
     onEntryFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: _soybeanjs_headless0.PointerDownOutsideEvent) => any) | undefined;
@@ -29,7 +29,7 @@ declare const __VLS_export: <T extends AcceptableBooleanValue = AcceptableBoolea
     'item-trailing': (props: S) => any;
     'item-indicator-icon': (props: S) => any;
   };
-  emit: ((evt: "select", item: S, event: Event) => void) & ((evt: "update:modelValue", payload: NonNullable<T>) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "entryFocus", event: Event) => void) & ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: _soybeanjs_headless0.PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: _soybeanjs_headless0.FocusOutsideEvent) => void) & ((evt: "interactOutside", event: _soybeanjs_headless0.PointerDownOutsideEvent | _soybeanjs_headless0.FocusOutsideEvent) => void) & ((evt: "openAutoFocus", event: Event) => void) & ((evt: "closeAutoFocus", event: Event) => void);
+  emit: ((evt: "select", item: S, event: Event) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", payload: NonNullable<T>) => void) & ((evt: "entryFocus", event: Event) => void) & ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: _soybeanjs_headless0.PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: _soybeanjs_headless0.FocusOutsideEvent) => void) & ((evt: "interactOutside", event: _soybeanjs_headless0.PointerDownOutsideEvent | _soybeanjs_headless0.FocusOutsideEvent) => void) & ((evt: "openAutoFocus", event: Event) => void) & ((evt: "closeAutoFocus", event: Event) => void);
 }>) => vue.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -31,9 +31,9 @@ declare const __VLS_base: vue.DefineComponent<DialogPureProps, {}, {}, {}, {}, v
   onOpenAutoFocus?: ((event: Event) => any) | undefined;
   onCloseAutoFocus?: ((event: Event) => any) | undefined;
 }>, {
+  closable: boolean;
   open: boolean;
   defaultOpen: boolean;
-  closable: boolean;
   modal: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -46,9 +46,9 @@ declare const __VLS_base: vue.DefineComponent<DialogProps, {}, {}, {}, {}, vue.C
   onOpenAutoFocus?: ((event: Event) => any) | undefined;
   onCloseAutoFocus?: ((event: Event) => any) | undefined;
 }>, {
+  closable: boolean;
   open: boolean;
   defaultOpen: boolean;
-  closable: boolean;
   modal: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -46,9 +46,9 @@ declare const __VLS_base: vue.DefineComponent<DrawerProps, {}, {}, {}, {}, vue.C
   onOpenAutoFocus?: ((event: Event) => any) | undefined;
   onCloseAutoFocus?: ((event: Event) => any) | undefined;
 }>, {
+  closable: boolean;
   open: boolean;
   defaultOpen: boolean;
-  closable: boolean;
   modal: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -8,8 +8,8 @@ import { DefinedValue } from "@soybeanjs/headless";
 declare const __VLS_export: <T extends DefinedValue = DefinedValue, S extends MenuCheckboxOptionData<T> = MenuCheckboxOptionData<T>>(__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: vue.PublicProps & __VLS_PrettifyLocal<DropdownMenuCheckboxProps<T, S> & {
     onSelect?: ((item: S, event: Event) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
     onEntryFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: _soybeanjs_headless0.PointerDownOutsideEvent) => any) | undefined;
@@ -29,7 +29,7 @@ declare const __VLS_export: <T extends DefinedValue = DefinedValue, S extends Me
     'item-trailing': (props: S) => any;
     'item-indicator-icon': (props: S) => any;
   };
-  emit: ((evt: "select", item: S, event: Event) => void) & ((evt: "update:modelValue", value: T[]) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "entryFocus", event: Event) => void) & ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: _soybeanjs_headless0.PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: _soybeanjs_headless0.FocusOutsideEvent) => void) & ((evt: "interactOutside", event: _soybeanjs_headless0.PointerDownOutsideEvent | _soybeanjs_headless0.FocusOutsideEvent) => void) & ((evt: "openAutoFocus", event: Event) => void) & ((evt: "closeAutoFocus", event: Event) => void);
+  emit: ((evt: "select", item: S, event: Event) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: T[]) => void) & ((evt: "entryFocus", event: Event) => void) & ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: _soybeanjs_headless0.PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: _soybeanjs_headless0.FocusOutsideEvent) => void) & ((evt: "interactOutside", event: _soybeanjs_headless0.PointerDownOutsideEvent | _soybeanjs_headless0.FocusOutsideEvent) => void) & ((evt: "openAutoFocus", event: Event) => void) & ((evt: "closeAutoFocus", event: Event) => void);
 }>) => vue.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -8,8 +8,8 @@ import { AcceptableBooleanValue } from "@soybeanjs/headless";
 declare const __VLS_export: <T extends AcceptableBooleanValue = AcceptableBooleanValue, S extends MenuRadioOptionData<T> = MenuRadioOptionData<T>>(__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: vue.PublicProps & __VLS_PrettifyLocal<DropdownMenuRadioProps<T, S> & {
     onSelect?: ((item: S, event: Event) => any) | undefined;
-    "onUpdate:modelValue"?: ((payload: NonNullable<T>) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((payload: NonNullable<T>) => any) | undefined;
     onEntryFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: _soybeanjs_headless0.PointerDownOutsideEvent) => any) | undefined;
@@ -29,7 +29,7 @@ declare const __VLS_export: <T extends AcceptableBooleanValue = AcceptableBoolea
     'item-trailing': (props: S) => any;
     'item-indicator-icon': (props: S) => any;
   };
-  emit: ((evt: "select", item: S, event: Event) => void) & ((evt: "update:modelValue", payload: NonNullable<T>) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "entryFocus", event: Event) => void) & ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: _soybeanjs_headless0.PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: _soybeanjs_headless0.FocusOutsideEvent) => void) & ((evt: "interactOutside", event: _soybeanjs_headless0.PointerDownOutsideEvent | _soybeanjs_headless0.FocusOutsideEvent) => void) & ((evt: "openAutoFocus", event: Event) => void) & ((evt: "closeAutoFocus", event: Event) => void);
+  emit: ((evt: "select", item: S, event: Event) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", payload: NonNullable<T>) => void) & ((evt: "entryFocus", event: Event) => void) & ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: _soybeanjs_headless0.PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: _soybeanjs_headless0.FocusOutsideEvent) => void) & ((evt: "interactOutside", event: _soybeanjs_headless0.PointerDownOutsideEvent | _soybeanjs_headless0.FocusOutsideEvent) => void) & ((evt: "openAutoFocus", event: Event) => void) & ((evt: "closeAutoFocus", event: Event) => void);
 }>) => vue.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/components/form/form-field-base.js

@@ -1 +1 @@
-import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{formVariants as t}from"./variants.js";import{useFormContext as n}from"./context.js";import{computed as r,createBlock as i,createCommentVNode as a,createTextVNode as o,defineComponent as s,guardReactiveProps as c,mergeProps as l,normalizeProps as u,openBlock as d,renderSlot as f,toDisplayString as p,unref as m,useSlots as h,withCtx as g,withDirectives as _}from"vue";import{useOmitProps as v}from"@soybeanjs/headless/composables";import{FormDescription as y,FormError as b,FormField as x,FormLabel as S,provideFormFieldUi as C}from"@soybeanjs/headless";import{vAutoAnimate as w}from"@formkit/auto-animate";const T=s({name:`SFormFieldBase`,__name:`form-field-base`,props:{class:{},size:{},ui:{},label:{},description:{},labelProps:{},descriptionProps:{},errorProps:{},error:{},isFieldArray:{type:Boolean}},setup(s){let T=s,E=h(),D=v(T,[`class`,`size`,`ui`,`label`,`description`,`labelProps`,`descriptionProps`,`errorProps`]),O=n(`FormField`),k=r(()=>T.size??O.size.value),A=r(()=>e(t({size:k.value}),O.ui.value,T.ui,{field:T.isFieldArray?void 0:T.class,fieldArray:T.isFieldArray?T.class:void 0})),j=r(()=>({...O.labelProps.value,...T.labelProps})),M=r(()=>({...O.descriptionProps.value,...T.descriptionProps})),N=r(()=>({...O.errorProps.value,...T.errorProps}));return C(A),(e,t)=>_((d(),i(m(x),u(c(m(D))),{default:g(t=>[m(E).label||s.label?(d(),i(m(S),u(l({key:0},j.value)),{default:g(()=>[f(e.$slots,`label`,{},()=>[o(p(s.label),1)])]),_:3},16)):a(`v-if`,!0),f(e.$slots,`default`,u(c(t))),m(E).description||s.description?(d(),i(m(y),u(l({key:1},M.value)),{default:g(()=>[f(e.$slots,`description`,{},()=>[o(p(s.description),1)])]),_:3},16)):a(`v-if`,!0),s.error?(d(),i(m(b),u(l({key:2},N.value)),{default:g(()=>[o(p(s.error),1)]),_:1},16)):a(`v-if`,!0)]),_:3},16)),[[m(w)]])}});export{T as default};
+import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{formVariants as t}from"./variants.js";import{useFormContext as n}from"./context.js";import{computed as r,createBlock as i,createCommentVNode as a,createTextVNode as o,defineComponent as s,guardReactiveProps as c,mergeProps as l,normalizeProps as u,openBlock as d,renderSlot as f,toDisplayString as p,unref as m,useSlots as h,withCtx as g,withDirectives as _}from"vue";import{useOmitProps as v}from"@soybeanjs/headless/composables";import{FormControl as y,FormDescription as b,FormError as x,FormField as S,FormLabel as C,provideFormFieldUi as w}from"@soybeanjs/headless";import{vAutoAnimate as T}from"@formkit/auto-animate";const E=s({name:`SFormFieldBase`,__name:`form-field-base`,props:{class:{},size:{},ui:{},inline:{type:Boolean,default:void 0},label:{},description:{},labelProps:{},controlProps:{},descriptionProps:{},errorProps:{},error:{},isFieldArray:{type:Boolean}},setup(s){let E=s,D=h(),O=v(E,[`class`,`size`,`ui`,`inline`,`label`,`description`,`labelProps`,`descriptionProps`,`errorProps`]),k=n(`FormField`),A=r(()=>E.size??k.size.value),j=r(()=>e(t({size:A.value,inline:E.inline??k.inline.value}),k.ui.value,E.ui,{field:E.isFieldArray?void 0:E.class,fieldArray:E.isFieldArray?E.class:void 0})),M=r(()=>({...k.labelProps.value,...E.labelProps})),N=r(()=>({...k.controlProps.value,...E.controlProps})),P=r(()=>({...k.descriptionProps.value,...E.descriptionProps})),F=r(()=>({...k.errorProps.value,...E.errorProps}));return w(j),(e,t)=>(d(),i(m(S),u(c(m(O))),{default:g(t=>[m(D).label||s.label?(d(),i(m(C),u(l({key:0},M.value)),{default:g(()=>[f(e.$slots,`label`,{},()=>[o(p(s.label),1)])]),_:3},16)):a(`v-if`,!0),_((d(),i(m(y),u(c(N.value)),{default:g(()=>[f(e.$slots,`default`,u(c(t))),s.error?(d(),i(m(x),u(l({key:0},F.value)),{default:g(()=>[o(p(s.error),1)]),_:1},16)):a(`v-if`,!0)]),_:2},1040)),[[m(T)]]),m(D).description||s.description?(d(),i(m(b),u(l({key:1},P.value)),{default:g(()=>[f(e.$slots,`description`,{},()=>[o(p(s.description),1)])]),_:3},16)):a(`v-if`,!0)]),_:3},16))}});export{E as default};

package/dist/components/form/form.js

@@ -1 +1 @@
-import{cn as e}from"../../theme/merge.js";import"../../theme/index.js";import{formVariants as t}from"./variants.js";import{provideFormContext as n}from"./context.js";import{computed as r,createElementBlock as i,defineComponent as a,normalizeClass as o,openBlock as s,renderSlot as c}from"vue";import{transformPropsToContext as l}from"@soybeanjs/headless/shared";const u=a({name:`SForm`,__name:`form`,props:{class:{},size:{},ui:{},fieldProps:{},fieldArrayProps:{},labelProps:{},descriptionProps:{},errorProps:{}},setup(a){let u=a,d=r(()=>{let{form:n}=t({size:u.size});return e(n(),u.class)});return n(l(u)),(e,t)=>(s(),i(`form`,{class:o(d.value)},[c(e.$slots,`default`)],2))}});export{u as default};
+import{cn as e}from"../../theme/merge.js";import"../../theme/index.js";import{formVariants as t}from"./variants.js";import{provideFormContext as n}from"./context.js";import{computed as r,createElementBlock as i,defineComponent as a,normalizeClass as o,openBlock as s,renderSlot as c}from"vue";import{transformPropsToContext as l}from"@soybeanjs/headless/shared";const u=[`data-inline`],d=a({name:`SForm`,__name:`form`,props:{class:{},size:{},ui:{},inline:{type:Boolean},fieldProps:{},fieldArrayProps:{},labelProps:{},controlProps:{},descriptionProps:{},errorProps:{}},setup(a){let d=a,f=r(()=>{let{form:n}=t({size:d.size});return e(n(),d.class)});return n(l(d)),(e,t)=>(s(),i(`form`,{"data-inline":a.inline?``:void 0,class:o(f.value)},[c(e.$slots,`default`)],10,u))}});export{d as default};

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

@@ -1,16 +1,21 @@
 import { ThemeSize } from "../../theme/types.js";
 import "../../theme/index.js";
 import { ComponentOptionsMixin, CreateComponentPublicInstanceWithMixins, EmitsOptions, FormHTMLAttributes, PublicProps, SlotsType } from "vue";
-import { ClassValue, FormDescriptionProps, FormErrorProps, FormFieldArrayStates, FormFieldProps, FormFieldState, FormFieldUi, FormLabelProps, FormRegisterOptions, FormValues, Path, PathValue, PropsToContext } from "@soybeanjs/headless";
+import { ClassValue, FormControlProps, FormDescriptionProps, FormErrorProps, FormFieldArrayStates, FormFieldProps, FormFieldState, FormFieldUi, FormLabelProps, FormRegisterOptions, FormValues, Path, PathValue, PropsToContext } from "@soybeanjs/headless";
 
 //#region src/components/form/types.d.ts
 interface FormFieldBaseProps extends Omit<FormFieldProps, 'class'> {
   class?: ClassValue;
   size?: ThemeSize;
   ui?: Partial<FormFieldUi>;
+  /**
+   * Whether the label is inline with the control.
+   */
+  inline?: boolean;
   label?: string;
   description?: string;
   labelProps?: FormLabelProps;
+  controlProps?: FormControlProps;
   descriptionProps?: FormDescriptionProps;
   errorProps?: FormErrorProps;
 }
@@ -39,9 +44,14 @@ interface FormProps extends /** @vue-ignore */FormHTMLAttributes {
   class?: ClassValue;
   size?: ThemeSize;
   ui?: Partial<FormFieldUi>;
+  /**
+   * Whether the label is inline with the control.
+   */
+  inline?: boolean;
   fieldProps?: FormFieldBaseProps;
   fieldArrayProps?: FormFieldBaseProps;
   labelProps?: FormLabelProps;
+  controlProps?: FormControlProps;
   descriptionProps?: FormDescriptionProps;
   errorProps?: FormErrorProps;
 }

package/dist/components/form/use-form.js

@@ -1 +1 @@
-import e from"./form-field-base.js";import{defineComponent as t,h as n}from"vue";import{Slot as r,useForm as i}from"@soybeanjs/headless";function a(a){let o=i(a),s=t((t,{slots:i})=>{let a=o.useField(t.name,{validate:t.validate,reset:t.reset});return()=>n(e,{error:a.value.meta.error,...t},{label:()=>i.label?.(a.value),description:()=>i.description?.(a.value),default:e=>n(r,{size:t.size,id:e.formFieldId,ariaDescribedBy:e.ariaDescribedBy,ariaInvalid:e.ariaInvalid,name:t.name,modelValue:a.value.value,"onUpdate:modelValue":e=>o.setFieldValue(t.name,e),onBlur:e=>a.value.onBlur(e,t.name),onChange:()=>a.value.onChange(),onInput:()=>a.value.onInput()},{default:()=>i.default?.(a.value)})})},{name:`SFormField`,props:[`name`]}),c=t((t,{slots:r})=>{let i=o.useFieldArray(t.name,{validate:t.validate,reset:t.reset});return()=>n(e,{error:i.value.meta.error,...t,isFieldArray:!0},{label:()=>r.label?.(i.value),description:()=>r.description?.(i.value),default:()=>r.default?.(i.value)})},{name:`SFormFieldArray`,props:[`name`]});return{...o,SFormField:s,SFormFieldArray:c}}export{a as useForm};
+import e from"./form-field-base.js";import{defineComponent as t,h as n}from"vue";import{Slot as r,useForm as i}from"@soybeanjs/headless";function a(a){let o=i(a),s=t((t,{slots:i})=>{let a=o.useField(t.name,{validate:t.validate,reset:t.reset});return()=>n(e,{error:a.value.meta.error,...t},{label:()=>i.label?.(a.value),description:i.description?()=>i.description(a.value):void 0,default:e=>n(r,{size:t.size,id:e.formFieldId,ariaDescribedBy:e.ariaDescribedBy,ariaInvalid:e.ariaInvalid,name:t.name,modelValue:a.value.value,"onUpdate:modelValue":e=>o.setFieldValue(t.name,e),onBlur:e=>a.value.onBlur(e,t.name),onChange:()=>a.value.onChange(),onInput:()=>a.value.onInput()},{default:()=>i.default?.(a.value)})})},{name:`SFormField`,props:[`name`]}),c=t((t,{slots:r})=>{let i=o.useFieldArray(t.name,{validate:t.validate,reset:t.reset});return()=>n(e,{error:i.value.meta.error,...t,isFieldArray:!0},{label:()=>r.label?.(i.value),description:r.description?()=>r.description(i.value):void 0,default:()=>r.default?.(i.value)})},{name:`SFormFieldArray`,props:[`name`]});return{...o,SFormField:s,SFormFieldArray:c}}export{a as useForm};

package/dist/components/form/variants.js

@@ -1 +1 @@
-import{tv as e}from"tailwind-variants";const t=e({slots:{form:``,field:``,fieldArray:``,label:`flex items-center`,description:`text-muted-foreground m-0`,error:`font-medium text-destructive m-0`},variants:{size:{xs:{field:`text-2xs space-y-1.5`,fieldArray:`text-2xs space-y-1.5`,label:`gap-1.5`},sm:{field:`text-xs space-y-1.75`,fieldArray:`text-xs space-y-1.75`,label:`gap-1.75`},md:{field:`text-sm space-y-2`,fieldArray:`text-sm space-y-2`,label:`gap-2`},lg:{field:`text-base space-y-2.5`,fieldArray:`text-base space-y-2.5`,label:`gap-2.5`},xl:{field:`text-lg space-y-3`,fieldArray:`text-lg space-y-3`,label:`gap-3`},"2xl":{field:`text-xl space-y-3.5`,fieldArray:`text-xl space-y-3.5`,label:`gap-3.5`}}},defaultVariants:{size:`md`}});export{t as formVariants};
+import{tv as e}from"tailwind-variants";const t=e({slots:{form:``,field:`flex`,fieldArray:`flex`,label:`flex items-center`,control:``,description:`text-muted-foreground m-0`,error:`font-medium text-destructive m-0`},variants:{size:{xs:{form:`space-y-3 data-[inline]:space-y-4.5`,field:`text-2xs gap-x-2.25 gap-y-1.5`,fieldArray:`text-2xs gap-x-2.25 gap-y-1.5`,label:`gap-1.5`},sm:{form:`space-y-3.5 data-[inline]:space-y-5.5`,field:`text-xs gap-x-2.5 gap-y-1.75`,fieldArray:`text-xs gap-x-2.5 gap-y-1.75`,label:`gap-1.75`},md:{form:`space-y-4 data-[inline]:space-y-6`,field:`text-sm gap-x-3 gap-y-2`,fieldArray:`text-sm gap-x-3 gap-y-2`,label:`gap-2`},lg:{form:`space-y-4.5 data-[inline]:space-y-6.75`,field:`text-base gap-x-3.75 gap-y-2.5`,fieldArray:`text-base gap-x-3.75 gap-y-2.5`,label:`gap-2.5`},xl:{form:`space-y-5 data-[inline]:space-y-7.5`,field:`text-lg gap-x-4.5 gap-y-3`,fieldArray:`text-lg gap-x-4.5 gap-y-3`,label:`gap-3`},"2xl":{form:`space-y-6 data-[inline]:space-y-8`,field:`text-xl gap-x-5.25 gap-y-3.5`,fieldArray:`text-xl gap-x-5.25 gap-y-3.5`,label:`gap-3.5`}},inline:{true:{field:`flex-wrap justify-between items-center`,fieldArray:`flex-wrap justify-between items-center`,label:`justify-end`,control:`flex-1`,description:`w-full`,error:`absolute left-0 top-full w-full`},false:{field:`flex-col`,fieldArray:`flex-col`}}},defaultVariants:{size:`md`,inline:!1}});export{t as formVariants};

package/dist/components/page-tabs/page-tabs.vue.d.ts

@@ -5,8 +5,8 @@ import * as vue from "vue";
 declare const __VLS_export: <T extends PageTabsOptionData>(__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: vue.PublicProps & __VLS_PrettifyLocal<PageTabsProps<T> & {
     onContextmenu?: ((tab: T) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     onClose?: ((tab: T) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     onClick?: ((tab: T) => any) | undefined;
     onPin?: ((tab: T) => any) | undefined;
     "onUpdate:items"?: ((items: T[]) => any) | undefined;

package/dist/components/select/select.js

@@ -1 +1 @@
-import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import t from"../icon/icon.js";import{selectVariants as n}from"./variants.js";import{isGroupOption as r}from"./shared.js";import i from"./select-option.js";import{Fragment as a,computed as o,createBlock as s,createCommentVNode as c,createElementBlock as l,createSlots as u,createVNode as d,defineComponent as f,guardReactiveProps as p,mergeProps as m,normalizeProps as h,openBlock as g,renderList as _,renderSlot as v,toHandlers as y,unref as b,useSlots as x,withCtx as S}from"vue";import{useForwardListeners as C,useOmitProps as w}from"@soybeanjs/headless/composables";import{SelectArrow as T,SelectContent as E,SelectPortal as D,SelectRoot as O,SelectScrollDownButton as k,SelectScrollUpButton as A,SelectTrigger as j,SelectTriggerIcon as M,SelectValue as N,SelectViewport as P,provideSelectUi as F}from"@soybeanjs/headless";const I=f({name:`SSelect`,inheritAttrs:!1,__name:`select`,props:{class:{},ui:{},size:{},items:{},showArrow:{type:Boolean},triggerProps:{},triggerIconProps:{},placeholder:{},valueProps:{},portalProps:{},contentProps:{},placement:{},popupProps:{},viewportProps:{},scrollDownButtonProps:{},scrollUpButtonProps:{},groupProps:{},groupLabelProps:{},itemProps:{},itemTextProps:{},itemIndicatorProps:{},separatorProps:{},arrowProps:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean},dir:{},autocomplete:{},disabled:{type:Boolean},modelValue:{},defaultValue:{},multiple:{},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`update:open`,`closeAutoFocus`,`escapeKeyDown`,`pointerDownOutside`,`select`],setup(f,{emit:I}){let L=f,R=I,z=x(),B=o(()=>Object.keys(z).filter(e=>e.startsWith(`item-`)||e===`group-label`)),V=w(L,[`class`,`ui`,`size`,`items`,`triggerProps`,`triggerIconProps`,`placeholder`,`valueProps`,`portalProps`,`contentProps`,`popupProps`,`placement`,`viewportProps`,`scrollDownButtonProps`,`scrollUpButtonProps`,`groupProps`,`groupLabelProps`,`itemProps`,`itemTextProps`,`itemIndicatorProps`,`separatorProps`,`arrowProps`]),H=C(R),U=e=>r(e)?`group-${e.label}`:e.value,W=o(()=>e(n({size:L.size}),L.ui,{trigger:L.class})),G=o(()=>({...L.valueProps,placeholder:L.placeholder??L.valueProps?.placeholder})),K=o(()=>({...L.contentProps,placement:L.placement??L.contentProps?.placement,popupProps:L.popupProps??L.contentProps?.popupProps}));return F(W),(e,n)=>(g(),s(b(O),m(b(V),{"onUpdate:modelValue":n[1]||=e=>R(`update:modelValue`,e)}),{default:S(()=>[d(b(j),h(p(f.triggerProps)),{default:S(()=>[v(e.$slots,`trigger-leading`),d(b(N),h(p(G.value)),{default:S(t=>[v(e.$slots,`trigger-value`,h(p(t)))]),_:3},16),v(e.$slots,`trigger-trailing`),d(b(M),h(p(f.triggerIconProps)),{default:S(()=>[v(e.$slots,`trigger-icon`,{},()=>[d(t,{icon:`lucide:chevrons-up-down`})])]),_:3},16)]),_:3},16),d(b(D),h(p(f.portalProps)),{default:S(()=>[d(b(E),m(K.value,y(b(H))),{default:S(()=>[d(b(A),h(p(f.scrollUpButtonProps)),{default:S(()=>[v(e.$slots,`scroll-up-button`,{},()=>[d(t,{icon:`lucide:chevron-up`})])]),_:3},16),d(b(P),h(p(f.viewportProps)),{default:S(()=>[(g(!0),l(a,null,_(f.items,t=>(g(),s(i,{key:U(t),item:t,"group-props":f.groupProps,"group-label-props":f.groupLabelProps,"item-props":f.itemProps,"item-text-props":f.itemTextProps,"item-indicator-props":f.itemIndicatorProps,"separator-props":f.separatorProps,onSelect:n[0]||=e=>R(`select`,e)},u({_:2},[_(B.value,t=>({name:t,fn:S(n=>[v(e.$slots,t,m({ref_for:!0},n))])}))]),1032,[`item`,`group-props`,`group-label-props`,`item-props`,`item-text-props`,`item-indicator-props`,`separator-props`]))),128))]),_:3},16),d(b(k),h(p(f.scrollDownButtonProps)),{default:S(()=>[v(e.$slots,`scroll-down-button`,{},()=>[d(t,{icon:`lucide:chevron-down`})])]),_:3},16),f.showArrow?(g(),s(b(T),h(m({key:0},f.arrowProps)),null,16)):c(`v-if`,!0)]),_:3},16)]),_:3},16)]),_:3},16))}});export{I as default};
+import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import t from"../icon/icon.js";import{selectVariants as n}from"./variants.js";import{isGroupOption as r}from"./shared.js";import i from"./select-option.js";import{Fragment as a,computed as o,createBlock as s,createCommentVNode as c,createElementBlock as l,createSlots as u,createVNode as d,defineComponent as f,guardReactiveProps as p,mergeProps as m,normalizeProps as h,openBlock as g,renderList as _,renderSlot as v,toHandlers as y,unref as b,useSlots as x,withCtx as S}from"vue";import{useForwardListeners as C,useOmitProps as w}from"@soybeanjs/headless/composables";import{SelectArrow as T,SelectContent as E,SelectPortal as D,SelectRoot as O,SelectScrollDownButton as k,SelectScrollUpButton as A,SelectTrigger as j,SelectTriggerIcon as M,SelectValue as N,SelectViewport as P,provideSelectUi as F}from"@soybeanjs/headless";const I=f({name:`SSelect`,inheritAttrs:!1,__name:`select`,props:{class:{},ui:{},size:{},items:{},showArrow:{type:Boolean},triggerProps:{},triggerIconProps:{},placeholder:{},valueProps:{},portalProps:{},contentProps:{},placement:{},popupProps:{},viewportProps:{},scrollDownButtonProps:{},scrollUpButtonProps:{},groupProps:{},groupLabelProps:{},itemProps:{},itemTextProps:{},itemIndicatorProps:{},separatorProps:{},arrowProps:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean},dir:{},autocomplete:{},disabled:{type:Boolean},modelValue:{},defaultValue:{},multiple:{},singleClearable:{type:Boolean},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`update:open`,`closeAutoFocus`,`escapeKeyDown`,`pointerDownOutside`,`select`],setup(f,{emit:I}){let L=f,R=I,z=x(),B=o(()=>Object.keys(z).filter(e=>e.startsWith(`item-`)||e===`group-label`)),V=w(L,[`class`,`ui`,`size`,`items`,`triggerProps`,`triggerIconProps`,`placeholder`,`valueProps`,`portalProps`,`contentProps`,`popupProps`,`placement`,`viewportProps`,`scrollDownButtonProps`,`scrollUpButtonProps`,`groupProps`,`groupLabelProps`,`itemProps`,`itemTextProps`,`itemIndicatorProps`,`separatorProps`,`arrowProps`]),H=C(R),U=e=>r(e)?`group-${e.label}`:e.value,W=o(()=>e(n({size:L.size}),L.ui,{trigger:L.class})),G=o(()=>({...L.valueProps,placeholder:L.placeholder??L.valueProps?.placeholder})),K=o(()=>({...L.contentProps,placement:L.placement??L.contentProps?.placement,popupProps:L.popupProps??L.contentProps?.popupProps}));return F(W),(e,n)=>(g(),s(b(O),m(b(V),{"onUpdate:modelValue":n[1]||=e=>R(`update:modelValue`,e)}),{default:S(()=>[d(b(j),h(p(f.triggerProps)),{default:S(()=>[v(e.$slots,`trigger-leading`),d(b(N),h(p(G.value)),{default:S(t=>[v(e.$slots,`trigger-value`,h(p(t)))]),_:3},16),v(e.$slots,`trigger-trailing`),d(b(M),h(p(f.triggerIconProps)),{default:S(()=>[v(e.$slots,`trigger-icon`,{},()=>[d(t,{icon:`lucide:chevrons-up-down`})])]),_:3},16)]),_:3},16),d(b(D),h(p(f.portalProps)),{default:S(()=>[d(b(E),m(K.value,y(b(H))),{default:S(()=>[d(b(A),h(p(f.scrollUpButtonProps)),{default:S(()=>[v(e.$slots,`scroll-up-button`,{},()=>[d(t,{icon:`lucide:chevron-up`})])]),_:3},16),d(b(P),h(p(f.viewportProps)),{default:S(()=>[(g(!0),l(a,null,_(f.items,t=>(g(),s(i,{key:U(t),item:t,"group-props":f.groupProps,"group-label-props":f.groupLabelProps,"item-props":f.itemProps,"item-text-props":f.itemTextProps,"item-indicator-props":f.itemIndicatorProps,"separator-props":f.separatorProps,onSelect:n[0]||=e=>R(`select`,e)},u({_:2},[_(B.value,t=>({name:t,fn:S(n=>[v(e.$slots,t,m({ref_for:!0},n))])}))]),1032,[`item`,`group-props`,`group-label-props`,`item-props`,`item-text-props`,`item-indicator-props`,`separator-props`]))),128))]),_:3},16),d(b(k),h(p(f.scrollDownButtonProps)),{default:S(()=>[v(e.$slots,`scroll-down-button`,{},()=>[d(t,{icon:`lucide:chevron-down`})])]),_:3},16),f.showArrow?(g(),s(b(T),h(m({key:0},f.arrowProps)),null,16)):c(`v-if`,!0)]),_:3},16)]),_:3},16)]),_:3},16))}});export{I as default};

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

@@ -7,8 +7,8 @@ import { DefinedValue } from "@soybeanjs/headless";
 declare const __VLS_export: <T extends DefinedValue, 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: vue.PublicProps & __VLS_PrettifyLocal<SelectProps<T, M> & {
     onSelect?: ((event: _soybeanjs_headless0.SelectItemEvent<T>) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: M extends true ? T[] : T) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: M extends true ? T[] : T) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: _soybeanjs_headless0.PointerDownOutsideEvent) => any) | undefined;
     onCloseAutoFocus?: ((event: Event) => any) | undefined;
@@ -44,7 +44,7 @@ declare const __VLS_export: <T extends DefinedValue, M extends boolean = false>(
       item: SelectSingleOptionData<T>;
     }) => any;
   };
-  emit: ((evt: "select", event: _soybeanjs_headless0.SelectItemEvent<T>) => void) & ((evt: "update:modelValue", value: M extends true ? T[] : T) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: _soybeanjs_headless0.PointerDownOutsideEvent) => void) & ((evt: "closeAutoFocus", event: Event) => void);
+  emit: ((evt: "select", event: _soybeanjs_headless0.SelectItemEvent<T>) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: M extends true ? T[] : T) => void) & ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: _soybeanjs_headless0.PointerDownOutsideEvent) => void) & ((evt: "closeAutoFocus", event: Event) => void);
 }>) => vue.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/styles.css

@@ -212,6 +212,7 @@
 .mt-3{margin-top:0.75rem;}
 .mt-3\.5{margin-top:0.875rem;}
 .mt-4{margin-top:1rem;}
+.inline{display:inline;}
 .group:hover .group-hover\:block{display:block;}
 .inline-block{display:inline-block;}
 .contents{display:contents;}
@@ -424,6 +425,7 @@
 .self-start{align-self:flex-start;}
 .self-stretch{align-self:stretch;}
 .justify-start{justify-content:flex-start;}
+.justify-end{justify-content:flex-end;}
 .justify-center{justify-content:center;}
 .justify-between{justify-content:space-between;}
 .gap-0{gap:0;}
@@ -447,11 +449,14 @@
 .gap-x-1\.5{column-gap:0.375rem;}
 .gap-x-1\.75{column-gap:0.4375rem;}
 .gap-x-2{column-gap:0.5rem;}
+.gap-x-2\.25{column-gap:0.5625rem;}
 .gap-x-2\.5{column-gap:0.625rem;}
 .gap-x-3{column-gap:0.75rem;}
 .gap-x-3\.5{column-gap:0.875rem;}
+.gap-x-3\.75{column-gap:0.9375rem;}
 .gap-x-4{column-gap:1rem;}
 .gap-x-4\.5{column-gap:1.125rem;}
+.gap-x-5\.25{column-gap:1.3125rem;}
 .gap-y-1\.5{row-gap:0.375rem;}
 .gap-y-1\.75{row-gap:0.4375rem;}
 .gap-y-2{row-gap:0.5rem;}
@@ -461,12 +466,18 @@
 .gap-y-4{row-gap:1rem;}
 .gap-y-5{row-gap:1.25rem;}
 .gap-y-6{row-gap:1.5rem;}
-.space-y-1\.5>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.375rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.375rem * var(--un-space-y-reverse));}
-.space-y-1\.75>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.4375rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.4375rem * var(--un-space-y-reverse));}
-.space-y-2\.5>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.625rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.625rem * var(--un-space-y-reverse));}
-.space-y-2>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.5rem * var(--un-space-y-reverse));}
+.data-\[inline\]\:space-y-4\.5[data-inline]>:not([hidden])~:not([hidden]),
+.space-y-4\.5>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1.125rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1.125rem * var(--un-space-y-reverse));}
+.data-\[inline\]\:space-y-5\.5[data-inline]>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1.375rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1.375rem * var(--un-space-y-reverse));}
+.data-\[inline\]\:space-y-6[data-inline]>:not([hidden])~:not([hidden]),
+.space-y-6>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1.5rem * var(--un-space-y-reverse));}
+.data-\[inline\]\:space-y-6\.75[data-inline]>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1.6875rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1.6875rem * var(--un-space-y-reverse));}
+.data-\[inline\]\:space-y-7\.5[data-inline]>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1.875rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1.875rem * var(--un-space-y-reverse));}
+.data-\[inline\]\:space-y-8[data-inline]>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(2rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(2rem * var(--un-space-y-reverse));}
 .space-y-3\.5>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.875rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.875rem * var(--un-space-y-reverse));}
 .space-y-3>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.75rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.75rem * var(--un-space-y-reverse));}
+.space-y-4>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1rem * var(--un-space-y-reverse));}
+.space-y-5>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1.25rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1.25rem * var(--un-space-y-reverse));}
 .divide-y>:not([hidden])~:not([hidden]){--un-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--un-divide-y-reverse)));border-bottom-width:calc(1px * var(--un-divide-y-reverse));}
 .divide-border>:not([hidden])~:not([hidden]){--un-divide-opacity:var(--border-alpha, 1);border-color:hsl(var(--border) / var(--un-divide-opacity)) /* hsl(var(--border) / var(--border-alpha, 1)) */;}
 .group[data-state=collapsed] .group-data-\[state\=collapsed\]\:overflow-hidden,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soybeanjs/ui",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "SoybeanUI is built on top of SoybeanHeadless, providing a collection of styled components for Vue 3.",
   "homepage": "https://github.com/soybeanjs/soybean-ui",
   "bugs": {
@@ -54,7 +54,7 @@
     "tailwind-variants": "^3.2.2",
     "valibot": "^1.2.0",
     "zod": "^4.3.6",
-    "@soybeanjs/headless": "^0.9.1"
+    "@soybeanjs/headless": "^0.9.2"
   },
   "devDependencies": {
     "@soybeanjs/cli": "^1.5.0",
@@ -81,6 +81,7 @@
     "unplugin-vue-components": "^31.0.0",
     "unplugin-vue-jsx": "^0.8.1",
     "vite": "^7.3.1",
+    "vite-plugin-vue-devtools": "^8.0.7",
     "vite-plugin-vue-meta-layouts": "^0.6.1",
     "vitest": "^4.0.18",
     "vue": "^3.5.29",