@soybeanjs/ui 0.0.8 → 0.0.10

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

@@ -1,6 +1,6 @@
 import { DropdownMenuWrapperProps } from "./types.js";
-import * as vue155 from "vue";
-import * as _soybeanjs_headless92 from "@soybeanjs/headless";
+import * as vue162 from "vue";
+import * as _soybeanjs_headless91 from "@soybeanjs/headless";
 
 //#region src/components/dropdown-menu/dropdown-menu-wrapper.vue.d.ts
 declare var __VLS_16: {}, __VLS_30: {};
@@ -9,28 +9,28 @@ type __VLS_Slots = {} & {
 } & {
   default?: (props: typeof __VLS_30) => any;
 };
-declare const __VLS_base: vue155.DefineComponent<DropdownMenuWrapperProps, {}, {}, {}, {}, vue155.ComponentOptionsMixin, vue155.ComponentOptionsMixin, {
+declare const __VLS_base: vue162.DefineComponent<DropdownMenuWrapperProps, {}, {}, {}, {}, vue162.ComponentOptionsMixin, vue162.ComponentOptionsMixin, {
   "update:open": (value: boolean) => any;
+  entryFocus: (event: Event) => any;
   escapeKeyDown: (event: KeyboardEvent) => any;
-  pointerDownOutside: (event: _soybeanjs_headless92.PointerDownOutsideEvent) => any;
-  focusOutside: (event: _soybeanjs_headless92.FocusOutsideEvent) => any;
-  interactOutside: (event: _soybeanjs_headless92.PointerDownOutsideEvent | _soybeanjs_headless92.FocusOutsideEvent) => any;
+  pointerDownOutside: (event: _soybeanjs_headless91.PointerDownOutsideEvent) => any;
+  focusOutside: (event: _soybeanjs_headless91.FocusOutsideEvent) => any;
+  interactOutside: (event: _soybeanjs_headless91.PointerDownOutsideEvent | _soybeanjs_headless91.FocusOutsideEvent) => any;
   openAutoFocus: (event: Event) => any;
   closeAutoFocus: (event: Event) => any;
-  entryFocus: (event: Event) => any;
-}, string, vue155.PublicProps, Readonly<DropdownMenuWrapperProps> & Readonly<{
+}, string, vue162.PublicProps, Readonly<DropdownMenuWrapperProps> & Readonly<{
   "onUpdate:open"?: ((value: boolean) => any) | undefined;
+  onEntryFocus?: ((event: Event) => any) | undefined;
   onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
-  onPointerDownOutside?: ((event: _soybeanjs_headless92.PointerDownOutsideEvent) => any) | undefined;
-  onFocusOutside?: ((event: _soybeanjs_headless92.FocusOutsideEvent) => any) | undefined;
-  onInteractOutside?: ((event: _soybeanjs_headless92.PointerDownOutsideEvent | _soybeanjs_headless92.FocusOutsideEvent) => any) | undefined;
+  onPointerDownOutside?: ((event: _soybeanjs_headless91.PointerDownOutsideEvent) => any) | undefined;
+  onFocusOutside?: ((event: _soybeanjs_headless91.FocusOutsideEvent) => any) | undefined;
+  onInteractOutside?: ((event: _soybeanjs_headless91.PointerDownOutsideEvent | _soybeanjs_headless91.FocusOutsideEvent) => any) | undefined;
   onOpenAutoFocus?: ((event: Event) => any) | undefined;
   onCloseAutoFocus?: ((event: Event) => any) | undefined;
-  onEntryFocus?: ((event: Event) => any) | undefined;
 }>, {
-  open: boolean;
   modal: boolean;
-}, {}, {}, {}, string, vue155.ComponentProvideOptions, false, {}, any>;
+  open: boolean;
+}, {}, {}, {}, string, vue162.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/dropdown-menu/dropdown-menu.js

@@ -1 +1 @@
-import e from"../menu/menu-options.js";import t from"./dropdown-menu-wrapper.js";import{computed as n,createBlock as r,createSlots as i,createVNode as a,defineComponent as o,guardReactiveProps as s,mergeProps as c,normalizeProps as l,openBlock as u,renderList as d,renderSlot as f,toHandlers as p,unref as m,useSlots as h,withCtx as g}from"vue";import{useForwardListeners as _,useOmitProps as v,usePickProps as y}from"@soybeanjs/headless/composables";var b=o({name:`SDropdownMenu`,__name:`dropdown-menu`,props:{size:{},ui:{},disabled:{type:Boolean},showArrow:{type:Boolean},triggerProps:{},portalProps:{},contentProps:{},popupProps:{},arrowProps:{},trigger:{},delayDuration:{},skipDelayDuration:{},dir:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean},modal:{type:Boolean,default:!0},items:{},itemProps:{},groupProps:{},groupLabelProps:{},subProps:{},subTriggerProps:{},subContentProps:{},separatorProps:{},shortcutProps:{}},emits:[`update:open`,`escapeKeyDown`,`pointerDownOutside`,`focusOutside`,`interactOutside`,`openAutoFocus`,`closeAutoFocus`,`entryFocus`,`select`],setup(o,{emit:b}){let x=o,S=b,C=h(),w=[`defaultOpen`,`open`,`dir`,`modal`,`trigger`,`delayDuration`,`skipDelayDuration`,`size`,`ui`,`disabled`,`showArrow`,`triggerProps`,`portalProps`,`contentProps`,`popupProps`,`arrowProps`],T=y(x,w),E=v(x,w),D=_(S),O=n(()=>Object.keys(C).filter(e=>e!==`trigger`));return(n,h)=>(u(),r(t,c(m(T),p(m(D))),{trigger:g(()=>[f(n.$slots,`trigger`)]),default:g(()=>[a(e,c(m(E),{"portal-props":o.portalProps},p(m(D))),i({_:2},[d(O.value,e=>({name:e,fn:g(t=>[f(n.$slots,e,l(s(t)))])}))]),1040,[`portal-props`])]),_:3},16))}});export{b as default};
+import e from"../menu/menu-options.js";import t from"./dropdown-menu-wrapper.js";import{computed as n,createBlock as r,createSlots as i,createVNode as a,defineComponent as o,guardReactiveProps as s,mergeProps as c,normalizeProps as l,openBlock as u,renderList as d,renderSlot as f,toHandlers as p,unref as m,useSlots as h,withCtx as g}from"vue";import{useForwardListeners as _,useOmitProps as v,usePickProps as y}from"@soybeanjs/headless/composables";var b=o({name:`SDropdownMenu`,__name:`dropdown-menu`,props:{class:{},size:{},ui:{},disabled:{type:Boolean},placement:{},showArrow:{type:Boolean},triggerProps:{},portalProps:{},contentProps:{},popupProps:{},arrowProps:{},trigger:{},delayDuration:{},skipDelayDuration:{},dir:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean},modal:{type:Boolean,default:!0},items:{},itemProps:{},groupProps:{},groupLabelProps:{},subProps:{},subTriggerProps:{},subContentProps:{},separatorProps:{},shortcutProps:{}},emits:[`update:open`,`escapeKeyDown`,`pointerDownOutside`,`focusOutside`,`interactOutside`,`openAutoFocus`,`closeAutoFocus`,`entryFocus`,`select`],setup(o,{emit:b}){let x=o,S=b,C=h(),w=[`class`,`defaultOpen`,`open`,`dir`,`modal`,`trigger`,`delayDuration`,`skipDelayDuration`,`size`,`ui`,`disabled`,`placement`,`showArrow`,`triggerProps`,`portalProps`,`contentProps`,`popupProps`,`arrowProps`],T=y(x,[...w]),E=v(x,[...w]),D=_(S),O=n(()=>Object.keys(C).filter(e=>e!==`trigger`));return(n,h)=>(u(),r(t,c(m(T),p(m(D))),{trigger:g(()=>[f(n.$slots,`trigger`)]),default:g(()=>[a(e,c(m(E),{"portal-props":o.portalProps},p(m(D))),i({_:2},[d(O.value,e=>({name:e,fn:g(t=>[f(n.$slots,e,l(s(t)))])}))]),1040,[`portal-props`])]),_:3},16))}});export{b as default};

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

@@ -1,21 +1,21 @@
 import { MenuOptionData } from "../menu/types.js";
 import { DropdownMenuProps } from "./types.js";
-import * as vue149 from "vue";
-import * as _soybeanjs_headless68 from "@soybeanjs/headless";
+import * as vue156 from "vue";
+import * as _soybeanjs_headless67 from "@soybeanjs/headless";
 import { DefinedValue } from "@soybeanjs/headless";
 
 //#region src/components/dropdown-menu/dropdown-menu.vue.d.ts
 declare const __VLS_export: <T extends DefinedValue = DefinedValue, S extends MenuOptionData<T> = MenuOptionData<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: vue149.PublicProps & __VLS_PrettifyLocal<DropdownMenuProps<T, S> & {
+  props: vue156.PublicProps & __VLS_PrettifyLocal<DropdownMenuProps<T, S> & {
     onSelect?: ((item: S, event: Event) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onEntryFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
-    onPointerDownOutside?: ((event: _soybeanjs_headless68.PointerDownOutsideEvent) => any) | undefined;
-    onFocusOutside?: ((event: _soybeanjs_headless68.FocusOutsideEvent) => any) | undefined;
-    onInteractOutside?: ((event: _soybeanjs_headless68.PointerDownOutsideEvent | _soybeanjs_headless68.FocusOutsideEvent) => any) | undefined;
+    onPointerDownOutside?: ((event: _soybeanjs_headless67.PointerDownOutsideEvent) => any) | undefined;
+    onFocusOutside?: ((event: _soybeanjs_headless67.FocusOutsideEvent) => any) | undefined;
+    onInteractOutside?: ((event: _soybeanjs_headless67.PointerDownOutsideEvent | _soybeanjs_headless67.FocusOutsideEvent) => any) | undefined;
     onOpenAutoFocus?: ((event: Event) => any) | undefined;
     onCloseAutoFocus?: ((event: Event) => any) | undefined;
-    onEntryFocus?: ((event: Event) => any) | undefined;
   }> & (typeof globalThis extends {
     __VLS_PROPS_FALLBACK: infer P;
   } ? P : {});
@@ -29,8 +29,8 @@ declare const __VLS_export: <T extends DefinedValue = DefinedValue, S extends Me
     'item-trigger': (props: MenuOptionData<T>) => any;
     'item-trigger-icon': (props: MenuOptionData<T>) => any;
   };
-  emit: ((evt: "select", item: S, event: Event) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: _soybeanjs_headless68.PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: _soybeanjs_headless68.FocusOutsideEvent) => void) & ((evt: "interactOutside", event: _soybeanjs_headless68.PointerDownOutsideEvent | _soybeanjs_headless68.FocusOutsideEvent) => void) & ((evt: "openAutoFocus", event: Event) => void) & ((evt: "closeAutoFocus", event: Event) => void) & ((evt: "entryFocus", event: Event) => void);
-}>) => vue149.VNode & {
+  emit: ((evt: "select", item: S, event: Event) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "entryFocus", event: Event) => void) & ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: _soybeanjs_headless67.PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: _soybeanjs_headless67.FocusOutsideEvent) => void) & ((evt: "interactOutside", event: _soybeanjs_headless67.PointerDownOutsideEvent | _soybeanjs_headless67.FocusOutsideEvent) => void) & ((evt: "openAutoFocus", event: Event) => void) & ((evt: "closeAutoFocus", event: Event) => void);
+}>) => vue156.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };
 declare const _default: typeof __VLS_export;

package/dist/components/dropdown-menu/types.d.ts

@@ -1,13 +1,18 @@
 import { ThemeSize } from "../../theme/types.js";
 import "../../theme/index.js";
 import { MenuCheckboxOptionData, MenuCheckboxOptionsEmits, MenuCheckboxOptionsProps, MenuExtendedUi, MenuOptionData, MenuOptionsEmits, MenuOptionsProps, MenuRadioOptionData, MenuRadioOptionsEmits, MenuRadioOptionsProps } from "../menu/types.js";
-import { AcceptableBooleanValue, DefinedValue, DropdownMenuArrowProps, DropdownMenuContentEmits, DropdownMenuContentProps, DropdownMenuPopupProps, DropdownMenuPortalProps, DropdownMenuRootEmits, DropdownMenuRootProps, DropdownMenuTriggerProps } from "@soybeanjs/headless";
+import { AcceptableBooleanValue, ClassValue, DefinedValue, DropdownMenuArrowProps, DropdownMenuContentEmits, DropdownMenuContentProps, DropdownMenuPopupProps, DropdownMenuPortalProps, DropdownMenuRootEmits, DropdownMenuRootProps, DropdownMenuTriggerProps, Placement } from "@soybeanjs/headless";
 
 //#region src/components/dropdown-menu/types.d.ts
 interface DropdownMenuWrapperProps extends DropdownMenuRootProps {
+  /**
+   * class of menu popup
+   */
+  class?: ClassValue;
   size?: ThemeSize;
   ui?: Partial<MenuExtendedUi>;
   disabled?: boolean;
+  placement?: Placement;
   showArrow?: boolean;
   triggerProps?: DropdownMenuTriggerProps;
   portalProps?: DropdownMenuPortalProps;
@@ -18,9 +23,19 @@ interface DropdownMenuWrapperProps extends DropdownMenuRootProps {
 type DropdownMenuWrapperEmits = DropdownMenuRootEmits & DropdownMenuContentEmits;
 interface DropdownMenuProps<T extends DefinedValue = DefinedValue, S extends MenuOptionData<T> = MenuOptionData<T>> extends DropdownMenuWrapperProps, MenuOptionsProps<T, S> {}
 type DropdownMenuEmits<T extends MenuOptionData = MenuOptionData> = DropdownMenuWrapperEmits & MenuOptionsEmits<T>;
-interface DropdownMenuCheckboxProps<T extends DefinedValue = DefinedValue, S extends MenuCheckboxOptionData<T> = MenuCheckboxOptionData<T>> extends DropdownMenuWrapperProps, MenuCheckboxOptionsProps<T, S> {}
+interface DropdownMenuCheckboxProps<T extends DefinedValue = DefinedValue, S extends MenuCheckboxOptionData<T> = MenuCheckboxOptionData<T>> extends DropdownMenuWrapperProps, MenuCheckboxOptionsProps<T, S> {
+  /**
+   * class of menu popup
+   */
+  class?: ClassValue;
+}
 type DropdownMenuCheckboxEmits<T extends DefinedValue = DefinedValue, S extends MenuCheckboxOptionData<T> = MenuCheckboxOptionData<T>> = DropdownMenuWrapperEmits & MenuCheckboxOptionsEmits<T, S>;
-interface DropdownMenuRadioProps<T extends AcceptableBooleanValue = AcceptableBooleanValue, S extends MenuRadioOptionData<T> = MenuRadioOptionData<T>> extends DropdownMenuWrapperProps, MenuRadioOptionsProps<T, S> {}
+interface DropdownMenuRadioProps<T extends AcceptableBooleanValue = AcceptableBooleanValue, S extends MenuRadioOptionData<T> = MenuRadioOptionData<T>> extends DropdownMenuWrapperProps, MenuRadioOptionsProps<T, S> {
+  /**
+   * class of menu popup
+   */
+  class?: ClassValue;
+}
 type DropdownMenuRadioEmits<T extends AcceptableBooleanValue = AcceptableBooleanValue, S extends MenuRadioOptionData<T> = MenuRadioOptionData<T>> = DropdownMenuWrapperEmits & MenuRadioOptionsEmits<T, S>;
 //#endregion
 export { DropdownMenuCheckboxEmits, DropdownMenuCheckboxProps, DropdownMenuEmits, DropdownMenuProps, DropdownMenuRadioEmits, DropdownMenuRadioProps, DropdownMenuWrapperEmits, DropdownMenuWrapperProps };

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

@@ -0,0 +1 @@
+import{mergeSlotVariants as e}from"../../theme/shared.js";import{formVariants as t}from"../../variants/form.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";var 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};

package/dist/components/form/form.js

@@ -1 +1 @@
-import{cn as e}from"../../theme/merge.js";import{formVariants as t}from"../../variants/form.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";var u=a({name:`SForm`,__name:`form`,props:{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{formVariants as t}from"../../variants/form.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";var 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};

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

@@ -1,12 +1,12 @@
 import { FormProps } from "./types.js";
-import * as vue55 from "vue";
+import * as vue115 from "vue";
 
 //#region src/components/form/form.vue.d.ts
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: vue55.DefineComponent<FormProps, {}, {}, {}, {}, vue55.ComponentOptionsMixin, vue55.ComponentOptionsMixin, {}, string, vue55.PublicProps, Readonly<FormProps> & Readonly<{}>, {}, {}, {}, {}, string, vue55.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: vue115.DefineComponent<FormProps, {}, {}, {}, {}, vue115.ComponentOptionsMixin, vue115.ComponentOptionsMixin, {}, string, vue115.PublicProps, Readonly<FormProps> & Readonly<{}>, {}, {}, {}, {}, string, vue115.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/form/index.d.ts

@@ -1,6 +1,5 @@
-import { FormContextParams, FormFieldArrayProps, FormFieldProps, FormProps } from "./types.js";
+import { FormContextParams, FormFieldArrayComponent, FormFieldArrayProps, FormFieldArraySlots, FormFieldBaseProps, FormFieldBaseSlotProps, FormFieldComponent, FormFieldProps, FormFieldSlots, FormProps } from "./types.js";
 import { _default } from "./form.vue.js";
-import { _default as _default$1 } from "./form-field.vue.js";
-import { _default as _default$2 } from "./form-field-array.vue.js";
+import { useForm } from "./use-form.js";
 import { FormDescriptionProps, FormErrorProps, FormLabelProps } from "@soybeanjs/headless/form";
 export { type FormDescriptionProps, type FormErrorProps, type FormLabelProps };

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

@@ -1,10 +1,11 @@
 import { ThemeSize } from "../../theme/types.js";
 import "../../theme/index.js";
-import { FormHTMLAttributes } from "vue";
-import { FormDescriptionProps, FormErrorProps, FormFieldArrayProps, FormFieldProps, FormFieldUi, FormLabelProps, PropsToContext } from "@soybeanjs/headless";
+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";
 
 //#region src/components/form/types.d.ts
-interface FormFieldProps$1 extends FormFieldProps {
+interface FormFieldBaseProps extends Omit<FormFieldProps, 'class'> {
+  class?: ClassValue;
   size?: ThemeSize;
   ui?: Partial<FormFieldUi>;
   label?: string;
@@ -13,24 +14,37 @@ interface FormFieldProps$1 extends FormFieldProps {
   descriptionProps?: FormDescriptionProps;
   errorProps?: FormErrorProps;
 }
-interface FormFieldArrayProps$1 extends FormFieldArrayProps {
-  size?: ThemeSize;
-  ui?: Partial<FormFieldUi>;
-  label?: string;
-  description?: string;
-  labelProps?: FormLabelProps;
-  descriptionProps?: FormDescriptionProps;
-  errorProps?: FormErrorProps;
+interface FormFieldBaseSlotProps {
+  formFieldId: string;
+  ariaDescribedBy: string;
+  ariaInvalid: boolean;
+}
+interface FormFieldProps$1<Values extends FormValues, Name extends Path<Values>> extends Omit<FormFieldBaseProps, 'error' | 'fieldArray'>, FormRegisterOptions<PathValue<Values, Name>> {
+  name: Name;
 }
+type FormFieldSlots<Values extends FormValues, Name extends Path<Values>> = SlotsType<{
+  default: (props: FormFieldState<Values, Name>) => any;
+  label: (props: FormFieldState<Values, Name>) => any;
+  description: (props: FormFieldState<Values, Name>) => any;
+}>;
+type FormFieldComponent<Values extends FormValues> = new <Name extends Path<Values>>(props: FormFieldProps$1<Values, Name> & PublicProps) => CreateComponentPublicInstanceWithMixins<FormFieldProps$1<Values, Name>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, PublicProps, {}, false, {}, FormFieldSlots<Values, Name>>;
+type FormFieldArrayProps<Values extends FormValues, Name extends Path<Values>> = FormFieldProps$1<Values, Name>;
+type FormFieldArraySlots<Values extends FormValues, Name extends Path<Values>> = SlotsType<{
+  default: (props: FormFieldArrayStates<Values, Name>) => any;
+  label: (props: FormFieldArrayStates<Values, Name>) => any;
+  description: (props: FormFieldArrayStates<Values, Name>) => any;
+}>;
+type FormFieldArrayComponent<Values extends FormValues> = new <Name extends Path<Values>>(props: FormFieldArrayProps<Values, Name> & PublicProps) => CreateComponentPublicInstanceWithMixins<FormFieldArrayProps<Values, Name>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, PublicProps, {}, false, {}, FormFieldArraySlots<Values, Name>>;
 interface FormProps extends /** @vue-ignore */FormHTMLAttributes {
+  class?: ClassValue;
   size?: ThemeSize;
   ui?: Partial<FormFieldUi>;
-  fieldProps?: FormFieldProps$1;
-  fieldArrayProps?: FormFieldArrayProps$1;
+  fieldProps?: FormFieldBaseProps;
+  fieldArrayProps?: FormFieldBaseProps;
   labelProps?: FormLabelProps;
   descriptionProps?: FormDescriptionProps;
   errorProps?: FormErrorProps;
 }
 interface FormContextParams extends PropsToContext<FormProps> {}
 //#endregion
-export { FormContextParams, FormFieldArrayProps$1 as FormFieldArrayProps, FormFieldProps$1 as FormFieldProps, FormProps };
+export { FormContextParams, FormFieldArrayComponent, FormFieldArrayProps, FormFieldArraySlots, FormFieldBaseProps, FormFieldBaseSlotProps, FormFieldComponent, FormFieldProps$1 as FormFieldProps, FormFieldSlots, FormProps };

package/dist/components/form/use-form.d.ts

@@ -0,0 +1,48 @@
+import { FormFieldArrayComponent, FormFieldComponent } from "./types.js";
+import * as vue120 from "vue";
+import * as _soybeanjs_headless28 from "@soybeanjs/headless";
+import { FormValues, InferStandardSchemaInput, Path, StandardSchemaV1, UseFormOptions } from "@soybeanjs/headless";
+
+//#region src/components/form/use-form.d.ts
+declare function useForm$1<S extends StandardSchemaV1<FormValues, FormValues>>(options: UseFormOptions<S>): {
+  SFormField: FormFieldComponent<InferStandardSchemaInput<S>>;
+  SFormFieldArray: FormFieldArrayComponent<InferStandardSchemaInput<S>>;
+  handleSubmit: (event?: Event) => void;
+  handleReset: (event?: Event) => void;
+  useFieldArray: <Name extends Path<InferStandardSchemaInput<S>>>(name: Name, opts?: _soybeanjs_headless28.FormRegisterOptions<_soybeanjs_headless28.PathValue<InferStandardSchemaInput<S>, Name>> | undefined) => vue120.Ref<_soybeanjs_headless28.FormFieldArrayStates<InferStandardSchemaInput<S>, Name>, _soybeanjs_headless28.FormFieldArrayStates<InferStandardSchemaInput<S>, Name>>;
+  useField: <Name extends Path<InferStandardSchemaInput<S>>>(name: Name, opts?: _soybeanjs_headless28.FormRegisterOptions<_soybeanjs_headless28.PathValue<InferStandardSchemaInput<S>, Name>> | undefined) => vue120.Ref<_soybeanjs_headless28.FormFieldState<InferStandardSchemaInput<S>, Name>, _soybeanjs_headless28.FormFieldState<InferStandardSchemaInput<S>, Name>>;
+  dirty: vue120.ComputedRef<boolean>;
+  setSubmitting: (isSubmitting: boolean) => void;
+  registerField: <Name extends Path<InferStandardSchemaInput<S>>>(name: Name, opts?: _soybeanjs_headless28.FormRegisterOptions<_soybeanjs_headless28.PathValue<InferStandardSchemaInput<S>, Name>> | undefined) => vue120.Ref<_soybeanjs_headless28.FormFieldState<InferStandardSchemaInput<S>, Name>, _soybeanjs_headless28.FormFieldState<InferStandardSchemaInput<S>, Name>>;
+  registerFieldArray: <Name extends Path<InferStandardSchemaInput<S>>>(name: Name, opts?: _soybeanjs_headless28.FormRegisterOptions<_soybeanjs_headless28.PathValue<InferStandardSchemaInput<S>, Name>> | undefined) => vue120.Ref<_soybeanjs_headless28.FormFieldState<InferStandardSchemaInput<S>, Name>, _soybeanjs_headless28.FormFieldState<InferStandardSchemaInput<S>, Name>>;
+  validateField: <Name extends Path<InferStandardSchemaInput<S>>>(name: Name) => Promise<string | undefined | void>;
+  getFieldValue: <Name extends Path<InferStandardSchemaInput<S>>>(name: Name) => vue120.WritableComputedRef<_soybeanjs_headless28.PathValue<InferStandardSchemaInput<S>, Name>, _soybeanjs_headless28.PathValue<InferStandardSchemaInput<S>, Name>>;
+  getFieldMeta: <Name extends Path<InferStandardSchemaInput<S>>>(name: Name) => vue120.Ref<{
+    dirty: boolean;
+    error: string | undefined;
+    touched: boolean | undefined;
+  }>;
+  getFieldError: <Name extends Path<InferStandardSchemaInput<S>>>(name: Name) => string | undefined;
+  getFieldTouched: <Name extends Path<InferStandardSchemaInput<S>>>(name: Name) => boolean | undefined;
+  getFieldDirty: <Name extends Path<InferStandardSchemaInput<S>>>(name: Name) => boolean;
+  getFieldState: <Name extends Path<InferStandardSchemaInput<S>>>(name: Name) => vue120.Ref<_soybeanjs_headless28.FormFieldState<InferStandardSchemaInput<S>, Name>, _soybeanjs_headless28.FormFieldState<InferStandardSchemaInput<S>, Name>>;
+  setValues: (values: InferStandardSchemaInput<S>, shouldValidate?: boolean) => Promise<void> | Promise<{ [K in keyof Path<InferStandardSchemaInput<S>>]?: string | undefined }>;
+  setErrors: (errors: { [K in keyof Path<InferStandardSchemaInput<S>>]?: string | undefined }) => void;
+  setFieldValue: <Name extends Path<InferStandardSchemaInput<S>>>(name: Name, value: _soybeanjs_headless28.PathValue<InferStandardSchemaInput<S>, Name>, shouldValidate?: boolean) => Promise<void> | Promise<{ [K in keyof Path<InferStandardSchemaInput<S>>]?: string | undefined }>;
+  setFieldTouched: <Name extends Path<InferStandardSchemaInput<S>>>(name: Name, touched: boolean) => void;
+  setFieldError: <Name extends Path<InferStandardSchemaInput<S>>>(name: Name, error: string | undefined) => void;
+  setFieldArrayValue: <Name extends Path<InferStandardSchemaInput<S>>, Method extends (...args: any) => any>(name: Name, value: _soybeanjs_headless28.PathValue<InferStandardSchemaInput<S>, Name>, method: Method, args?: Partial<{
+    argA: Parameters<Method>[1];
+    argB: Parameters<Method>[2];
+  }> | undefined, shouldSetValue?: boolean) => Promise<void> | Promise<{ [K in keyof Path<InferStandardSchemaInput<S>>]?: string | undefined }>;
+  validateForm: (values?: InferStandardSchemaInput<S> | undefined) => Promise<{ [K in keyof Path<InferStandardSchemaInput<S>>]?: string | undefined }>;
+  resetForm: (nextState?: _soybeanjs_headless28.FormResetState<InferStandardSchemaInput<S>> | undefined) => void;
+  values: InferStandardSchemaInput<S>;
+  touched: vue120.Ref<{ [K in keyof Path<InferStandardSchemaInput<S>>]?: boolean | undefined }, { [K in keyof Path<InferStandardSchemaInput<S>>]?: boolean | undefined }>;
+  errors: vue120.Ref<{ [K_1 in keyof Path<InferStandardSchemaInput<S>>]?: string | undefined }, { [K_1 in keyof Path<InferStandardSchemaInput<S>>]?: string | undefined }>;
+  submitCount: vue120.ShallowRef<number>;
+  isSubmitting: vue120.ShallowRef<boolean>;
+  isValidating: vue120.ShallowRef<boolean>;
+};
+//#endregion
+export { useForm$1 as useForm };

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

@@ -0,0 +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};

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

@@ -1,12 +1,12 @@
 import { IconProps as IconProps$1 } from "./types.js";
-import * as vue160 from "vue";
+import * as vue110 from "vue";
 import * as _iconify_vue0 from "@iconify/vue";
 
 //#region src/components/icon/icon.vue.d.ts
-declare const __VLS_export: vue160.DefineComponent<IconProps$1, {}, {}, {}, {}, vue160.ComponentOptionsMixin, vue160.ComponentOptionsMixin, {}, string, vue160.PublicProps, Readonly<IconProps$1> & Readonly<{}>, {
+declare const __VLS_export: vue110.DefineComponent<IconProps$1, {}, {}, {}, {}, vue110.ComponentOptionsMixin, vue110.ComponentOptionsMixin, {}, string, vue110.PublicProps, Readonly<IconProps$1> & Readonly<{}>, {
   width: _iconify_vue0.IconifyIconSize;
   height: _iconify_vue0.IconifyIconSize;
-}, {}, {}, {}, string, vue160.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, vue110.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion
 export { _default };

package/dist/components/input/input.js

@@ -1 +1 @@
-import{mergeSlotVariants as e}from"../../theme/shared.js";import t from"../icon/icon.js";import{inputVariants as n}from"../../variants/input.js";import{computed as r,createBlock as i,createCommentVNode as a,createVNode as o,defineComponent as s,mergeProps as c,normalizeClass as l,openBlock as u,renderSlot as d,unref as f,withCtx as p}from"vue";import{useForwardElement as m,useOmitProps as h}from"@soybeanjs/headless/composables";import{InputControl as g,InputRoot as _,provideInputThemeContext as v}from"@soybeanjs/headless";var y=s({name:`SInput`,__name:`input`,props:{size:{},ui:{},clearable:{type:Boolean},inputRef:{type:Function},controlProps:{},defaultValue:{},modelValue:{},id:{},autofocus:{type:Boolean},disabled:{type:Boolean},maxlength:{},minlength:{},pattern:{},placeholder:{},readonly:{type:Boolean},name:{},required:{type:Boolean}},emits:[`update:modelValue`],setup(s,{emit:y}){let b=s,x=y,[S,C]=m(e=>b.inputRef?.(e)),w=h(b,[`inputRef`,`size`,`ui`,`controlProps`,`clearable`]),T=r(()=>e(n({size:b.size}),b.ui));return v({ui:T}),(e,n)=>(u(),i(f(_),c(f(w),{"onUpdate:modelValue":n[0]||=e=>x(`update:modelValue`,e)}),{default:p(({clear:n})=>[d(e.$slots,`leading`),o(f(g),c(s.controlProps,{ref:f(C)}),null,16),s.clearable?(u(),i(t,{key:0,icon:`lucide:x`,class:l(T.value.clearable),onClick:n},null,8,[`class`,`onClick`])):a(`v-if`,!0),d(e.$slots,`trailing`)]),_:3},16))}});export{y as default};
+import{mergeSlotVariants as e}from"../../theme/shared.js";import t from"../icon/icon.js";import{inputVariants as n}from"../../variants/input.js";import{computed as r,createBlock as i,createCommentVNode as a,createVNode as o,defineComponent as s,mergeProps as c,normalizeClass as l,openBlock as u,renderSlot as d,unref as f,useAttrs as p,withCtx as m}from"vue";import{useForwardElement as h,useOmitProps as g}from"@soybeanjs/headless/composables";import{InputControl as _,InputRoot as v,provideInputUi as y}from"@soybeanjs/headless";var b=s({name:`SInput`,inheritAttrs:!1,__name:`input`,props:{class:{},size:{},ui:{},clearable:{type:Boolean},inputRef:{type:Function},controlProps:{},defaultValue:{},modelValue:{},id:{},autofocus:{type:Boolean},disabled:{type:Boolean},maxlength:{},minlength:{},pattern:{},placeholder:{},readonly:{type:Boolean},name:{},required:{type:Boolean}},emits:[`update:modelValue`],setup(s,{emit:b}){let x=s,S=b,C=p(),w=g(x,[`class`,`inputRef`,`size`,`ui`,`controlProps`,`clearable`]),[T,E]=h(e=>x.inputRef?.(e)),D=r(()=>e(n({size:x.size}),x.ui,{root:x.class}));return y(D),(e,n)=>(u(),i(f(v),c(f(w),{"onUpdate:modelValue":n[0]||=e=>S(`update:modelValue`,e)}),{default:m(({clear:n})=>[d(e.$slots,`leading`),o(f(_),c({...s.controlProps,...f(C)},{ref:f(E)}),null,16),s.clearable?(u(),i(t,{key:0,icon:`lucide:x`,class:l(D.value.clearable),onClick:n},null,8,[`class`,`onClick`])):a(`v-if`,!0),d(e.$slots,`trailing`)]),_:3},16))}});export{b as default};

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

@@ -1,5 +1,5 @@
 import { InputProps } from "./types.js";
-import * as vue50 from "vue";
+import * as vue172 from "vue";
 
 //#region src/components/input/input.vue.d.ts
 declare var __VLS_10: {}, __VLS_24: {};
@@ -8,11 +8,11 @@ type __VLS_Slots = {} & {
 } & {
   trailing?: (props: typeof __VLS_24) => any;
 };
-declare const __VLS_base: vue50.DefineComponent<InputProps, {}, {}, {}, {}, vue50.ComponentOptionsMixin, vue50.ComponentOptionsMixin, {
+declare const __VLS_base: vue172.DefineComponent<InputProps, {}, {}, {}, {}, vue172.ComponentOptionsMixin, vue172.ComponentOptionsMixin, {
   "update:modelValue": (value: string) => any;
-}, string, vue50.PublicProps, Readonly<InputProps> & Readonly<{
+}, string, vue172.PublicProps, Readonly<InputProps> & Readonly<{
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, vue50.ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, vue172.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/input/types.d.ts

@@ -3,9 +3,13 @@ import "../../theme/index.js";
 import { ClassValue, InputControlProps, InputRootEmits, InputRootProps, InputUi } from "@soybeanjs/headless";
 
 //#region src/components/input/types.d.ts
-type InputExtraThemeSlot = 'clearable';
-type InputExtendedUi = InputUi & Record<InputExtraThemeSlot, ClassValue>;
+type InputExtraUiSlot = 'clearable';
+type InputExtendedUi = InputUi & Record<InputExtraUiSlot, ClassValue>;
 interface InputProps extends InputRootProps {
+  /**
+   * root class
+   */
+  class?: ClassValue;
   size?: ThemeSize;
   ui?: Partial<InputExtendedUi>;
   /** Whether to show the clear icon */

package/dist/components/kbd/kbd.js

@@ -1 +1 @@
-import{kbdVariants as e}from"../../variants/kbd.js";import{computed as t,createBlock as n,defineComponent as r,mergeProps as i,openBlock as a,unref as o}from"vue";import{useOmitProps as s}from"@soybeanjs/headless/composables";import{Kbd as c}from"@soybeanjs/headless";var l=r({name:`SKbd`,__name:`kbd`,props:{size:{},variant:{},value:{},symbolize:{type:Boolean,default:!0}},setup(r){let l=r,u=s(l,[`class`,`size`,`variant`]),d=t(()=>e({size:l.size,variant:l.variant}));return(e,t)=>(a(),n(o(c),i(o(u),{class:d.value}),null,16,[`class`]))}});export{l as default};
+import{cn as e}from"../../theme/merge.js";import{kbdVariants as t}from"../../variants/kbd.js";import{computed as n,createBlock as r,defineComponent as i,mergeProps as a,openBlock as o,unref as s}from"vue";import{useOmitProps as c}from"@soybeanjs/headless/composables";import{Kbd as l}from"@soybeanjs/headless";var u=i({name:`SKbd`,__name:`kbd`,props:{class:{},size:{},variant:{},value:{},symbolize:{type:Boolean,default:!0}},setup(i){let u=i,d=c(u,[`class`,`size`,`variant`]),f=n(()=>e(t({size:u.size,variant:u.variant}),u.class));return(e,t)=>(o(),r(s(l),a(s(d),{class:f.value}),null,16,[`class`]))}});export{u as default};

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

@@ -1,10 +1,10 @@
 import { KbdProps } from "./types.js";
-import * as vue175 from "vue";
+import * as vue167 from "vue";
 
 //#region src/components/kbd/kbd.vue.d.ts
-declare const __VLS_export: vue175.DefineComponent<KbdProps, {}, {}, {}, {}, vue175.ComponentOptionsMixin, vue175.ComponentOptionsMixin, {}, string, vue175.PublicProps, Readonly<KbdProps> & Readonly<{}>, {
+declare const __VLS_export: vue167.DefineComponent<KbdProps, {}, {}, {}, {}, vue167.ComponentOptionsMixin, vue167.ComponentOptionsMixin, {}, string, vue167.PublicProps, Readonly<KbdProps> & Readonly<{}>, {
   symbolize: boolean;
-}, {}, {}, {}, string, vue175.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, vue167.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion
 export { _default };

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

@@ -1,10 +1,11 @@
 import { ThemeSize } from "../../theme/types.js";
 import "../../theme/index.js";
 import { KbdVariant } from "../../variants/kbd.js";
-import { KbdProps, KbdValue as KbdValue$1 } from "@soybeanjs/headless";
+import { ClassValue, KbdProps, KbdValue as KbdValue$1 } from "@soybeanjs/headless";
 
 //#region src/components/kbd/types.d.ts
 interface KbdProps$1 extends KbdProps {
+  class?: ClassValue;
   size?: ThemeSize;
   variant?: KbdVariant;
 }

package/dist/components/label/label.js

@@ -1 +1 @@
-import{cn as e}from"../../theme/merge.js";import{labelVariants as t}from"../../variants/label.js";import{computed as n,createBlock as r,defineComponent as i,normalizeClass as a,openBlock as o,renderSlot as s,unref as c,withCtx as l}from"vue";import{Label as u}from"@soybeanjs/headless";var d=i({name:`SLabel`,__name:`label`,props:{size:{},for:{}},setup(i){let d=i,f=n(()=>e(t({size:d.size}),d.class));return(e,t)=>(o(),r(c(u),{for:d.for,class:a(f.value)},{default:l(()=>[s(e.$slots,`default`)]),_:3},8,[`for`,`class`]))}});export{d as default};
+import{cn as e}from"../../theme/merge.js";import{labelVariants as t}from"../../variants/label.js";import{computed as n,createBlock as r,defineComponent as i,normalizeClass as a,openBlock as o,renderSlot as s,unref as c,withCtx as l}from"vue";import{Label as u}from"@soybeanjs/headless";var d=i({name:`SLabel`,__name:`label`,props:{class:{},size:{},for:{}},setup(i){let d=i,f=n(()=>e(t({size:d.size}),d.class));return(e,t)=>(o(),r(c(u),{for:d.for,class:a(f.value)},{default:l(()=>[s(e.$slots,`default`)]),_:3},8,[`for`,`class`]))}});export{d as default};

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

@@ -1,12 +1,12 @@
 import { LabelProps } from "./types.js";
-import * as vue190 from "vue";
+import * as vue58 from "vue";
 
 //#region src/components/label/label.vue.d.ts
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: vue190.DefineComponent<LabelProps, {}, {}, {}, {}, vue190.ComponentOptionsMixin, vue190.ComponentOptionsMixin, {}, string, vue190.PublicProps, Readonly<LabelProps> & Readonly<{}>, {}, {}, {}, {}, string, vue190.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: vue58.DefineComponent<LabelProps, {}, {}, {}, {}, vue58.ComponentOptionsMixin, vue58.ComponentOptionsMixin, {}, string, vue58.PublicProps, Readonly<LabelProps> & Readonly<{}>, {}, {}, {}, {}, string, vue58.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/label/types.d.ts

@@ -1,9 +1,10 @@
 import { ThemeSize } from "../../theme/types.js";
 import "../../theme/index.js";
-import { LabelProps } from "@soybeanjs/headless";
+import { ClassValue, LabelProps } from "@soybeanjs/headless";
 
 //#region src/components/label/types.d.ts
 interface LabelProps$1 extends LabelProps {
+  class?: ClassValue;
   size?: ThemeSize;
 }
 //#endregion

package/dist/components/layout/layout-trigger.vue.d.ts

@@ -1,4 +1,4 @@
-import * as vue200 from "vue";
+import * as vue193 from "vue";
 import { LayoutTriggerProps } from "@soybeanjs/headless";
 
 //#region src/components/layout/layout-trigger.vue.d.ts
@@ -6,7 +6,7 @@ declare var __VLS_8: {};
 type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: vue200.DefineComponent<LayoutTriggerProps, {}, {}, {}, {}, vue200.ComponentOptionsMixin, vue200.ComponentOptionsMixin, {}, string, vue200.PublicProps, Readonly<LayoutTriggerProps> & Readonly<{}>, {}, {}, {}, {}, string, vue200.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: vue193.DefineComponent<LayoutTriggerProps, {}, {}, {}, {}, vue193.ComponentOptionsMixin, vue193.ComponentOptionsMixin, {}, string, vue193.PublicProps, Readonly<LayoutTriggerProps> & Readonly<{}>, {}, {}, {}, {}, string, vue193.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/layout/layout.js

@@ -1 +1 @@
-import{mergeSlotVariants as e}from"../../theme/shared.js";import{themeSizeRatio as t}from"../../theme/config.js";import{provideSizeContext as n}from"../../theme/context.js";import{drawerContentVariants as r}from"../../variants/drawer.js";import{layoutVariants as i}from"../../variants/layout.js";import{computed as a,createBlock as o,createVNode as s,defineComponent as c,guardReactiveProps as l,mergeProps as u,normalizeProps as d,openBlock as f,renderSlot as p,unref as m,withCtx as h}from"vue";import{useOmitProps as g}from"@soybeanjs/headless/composables";import{LayoutFooter as _,LayoutHeader as v,LayoutMain as y,LayoutRail as b,LayoutRoot as x,LayoutSidebar as S,LayoutTab as C,provideLayoutThemeContext as w}from"@soybeanjs/headless";var T=c({name:`SLayout`,__name:`layout`,props:{size:{},ui:{},sidebarProps:{},headerProps:{},mainProps:{},tabProps:{},footerProps:{},railProps:{},mobileProps:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean},side:{},variant:{},collapsible:{},sidebarWidth:{},collapsedSidebarWidth:{},mobileMediaQuery:{},mobileSidebarWidth:{},sizeRatio:{}},emits:[`update:open`],setup(c,{emit:T}){let E=c,D=T,O=g(E,[`size`,`ui`,`sidebarProps`,`headerProps`,`mainProps`,`tabProps`,`footerProps`,`railProps`,`mobileProps`]),k=a(()=>t[E.size||`md`]);return w({ui:a(()=>{let t=i({size:E.size,variant:E.variant,side:E.side,collapsible:E.collapsible}),n=r({size:E.size,side:E.side});return t.mobileDrawer=()=>n,e(t,E.ui)})}),n(()=>E.size),(e,t)=>(f(),o(m(x),u(m(O),{"size-ratio":k.value,"onUpdate:open":t[0]||=e=>D(`update:open`,e)}),{default:h(t=>[s(m(S),d(l(c.sidebarProps)),{default:h(()=>[p(e.$slots,`sidebar`,d(l(t))),s(m(b),d(l(c.railProps)),null,16)]),_:2},1040),s(m(y),d(l(c.mainProps)),{default:h(()=>[s(m(v),d(l(c.headerProps)),{default:h(()=>[p(e.$slots,`header`)]),_:3},16),s(m(C),d(l(c.tabProps)),{default:h(()=>[p(e.$slots,`tab`)]),_:3},16),p(e.$slots,`default`),s(m(_),d(l(c.footerProps)),{default:h(()=>[p(e.$slots,`footer`)]),_:3},16)]),_:3},16)]),_:3},16,[`size-ratio`]))}});export{T as default};
+import{mergeSlotVariants as e}from"../../theme/shared.js";import{themeSizeMap as t,themeSizeRatio as n}from"../../theme/config.js";import{provideSizeContext as r}from"../../theme/context.js";import{drawerVariants as i}from"../../variants/drawer.js";import{layoutVariants as a}from"../../variants/layout.js";import{computed as o,createBlock as s,createVNode as c,defineComponent as l,guardReactiveProps as u,mergeProps as d,normalizeProps as f,openBlock as p,renderSlot as m,unref as h,withCtx as g}from"vue";import{useOmitProps as _}from"@soybeanjs/headless/composables";import{LayoutFooter as v,LayoutHeader as y,LayoutMain as b,LayoutRail as x,LayoutRoot as S,LayoutSidebar as C,LayoutTab as w,provideLayoutUi as T}from"@soybeanjs/headless";var E=l({name:`SLayout`,__name:`layout`,props:{class:{},size:{default:`md`},ui:{},sidebarProps:{},headerProps:{},mainProps:{},tabProps:{},footerProps:{},railProps:{},mobileProps:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean},side:{},variant:{},collapsible:{},sidebarWidth:{},collapsedSidebarWidth:{},mobileMediaQuery:{},mobileSidebarWidth:{},pxToRem:{}},emits:[`update:open`],setup(l,{emit:E}){let D=l,O=E,k=_(D,[`class`,`size`,`ui`,`pxToRem`,`sidebarProps`,`headerProps`,`mainProps`,`tabProps`,`footerProps`,`railProps`,`mobileProps`]),A=e=>D.pxToRem?D.pxToRem(e):e*n[D.size]/t.md;return T(o(()=>{let t=a({size:D.size,variant:D.variant,side:D.side,collapsible:D.collapsible}),n=i({size:D.size,side:D.side});return e({...t,mobileDrawer:n.content},D.ui,{root:D.class})})),r(()=>D.size),(e,t)=>(p(),s(h(S),d(h(k),{"px-to-rem":A,"onUpdate:open":t[0]||=e=>O(`update:open`,e)}),{default:g(t=>[c(h(C),f(u(l.sidebarProps)),{default:g(()=>[m(e.$slots,`sidebar`,f(u(t))),c(h(x),f(u(l.railProps)),null,16)]),_:2},1040),c(h(b),f(u(l.mainProps)),{default:g(()=>[c(h(y),f(u(l.headerProps)),{default:g(()=>[m(e.$slots,`header`)]),_:3},16),c(h(w),f(u(l.tabProps)),{default:g(()=>[m(e.$slots,`tab`)]),_:3},16),m(e.$slots,`default`),c(h(v),f(u(l.footerProps)),{default:g(()=>[m(e.$slots,`footer`)]),_:3},16)]),_:3},16)]),_:3},16))}});export{E as default};

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

@@ -1,5 +1,7 @@
+import { ThemeSize } from "../../theme/types.js";
+import "../../theme/index.js";
 import { LayoutProps } from "./types.js";
-import * as vue195 from "vue";
+import * as vue188 from "vue";
 
 //#region src/components/layout/layout.vue.d.ts
 declare var __VLS_16: {
@@ -17,13 +19,14 @@ type __VLS_Slots = {} & {
 } & {
   footer?: (props: typeof __VLS_53) => any;
 };
-declare const __VLS_base: vue195.DefineComponent<LayoutProps, {}, {}, {}, {}, vue195.ComponentOptionsMixin, vue195.ComponentOptionsMixin, {
+declare const __VLS_base: vue188.DefineComponent<LayoutProps, {}, {}, {}, {}, vue188.ComponentOptionsMixin, vue188.ComponentOptionsMixin, {
   "update:open": (open: boolean) => any;
-}, string, vue195.PublicProps, Readonly<LayoutProps> & Readonly<{
+}, string, vue188.PublicProps, Readonly<LayoutProps> & Readonly<{
   "onUpdate:open"?: ((open: boolean) => any) | undefined;
 }>, {
+  size: ThemeSize;
   open: boolean;
-}, {}, {}, {}, string, vue195.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, vue188.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/layout/types.d.ts

@@ -1,9 +1,10 @@
 import { ThemeSize } from "../../theme/types.js";
 import "../../theme/index.js";
-import { LayoutFooterProps, LayoutHeaderProps, LayoutMainProps, LayoutMobileProps, LayoutRailProps, LayoutRootEmits, LayoutRootProps, LayoutSidebarProps, LayoutTabProps, LayoutUi } from "@soybeanjs/headless";
+import { ClassValue, LayoutFooterProps, LayoutHeaderProps, LayoutMainProps, LayoutMobileProps, LayoutRailProps, LayoutRootEmits, LayoutRootProps, LayoutSidebarProps, LayoutTabProps, LayoutUi } from "@soybeanjs/headless";
 
 //#region src/components/layout/types.d.ts
 interface LayoutProps extends LayoutRootProps {
+  class?: ClassValue;
   size?: ThemeSize;
   ui?: Partial<LayoutUi>;
   sidebarProps?: LayoutSidebarProps;

package/dist/components/link/link.js

@@ -1 +1 @@
-import{cn as e}from"../../theme/merge.js";import{linkVariants as t}from"../../variants/link.js";import{computed as n,createBlock as r,defineComponent as i,mergeProps as a,openBlock as o,renderSlot as s,unref as c,withCtx as l}from"vue";import{Link as u}from"@soybeanjs/headless";var d=i({name:`SLink`,__name:`link`,props:{to:{},href:{},disabled:{type:Boolean,default:void 0},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:{},asChild:{type:Boolean},as:{},custom:{type:Boolean},activeClass:{},exactActiveClass:{},ariaCurrentValue:{},viewTransition:{type:Boolean,default:void 0},replace:{type:Boolean,default:void 0}},setup(i){let d=i,f=t(),p=n(()=>e(f,d.class));return(e,t)=>(o(),r(c(u),a(d,{class:p.value}),{default:l(({isHref:t})=>[s(e.$slots,`default`,{isHref:t})]),_:3},16,[`class`]))}});export{d as default};
+import{cn as e}from"../../theme/merge.js";import{linkVariants as t}from"../../variants/link.js";import{computed as n,createBlock as r,defineComponent as i,mergeProps as a,openBlock as o,renderSlot as s,unref as c,withCtx as l}from"vue";import{Link as u}from"@soybeanjs/headless";var d=i({name:`SLink`,__name:`link`,props:{class:{},to:{},href:{},disabled:{type:Boolean,default:void 0},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:{},asChild:{type:Boolean},as:{},custom:{type:Boolean,default:void 0},activeClass:{},exactActiveClass:{},ariaCurrentValue:{},viewTransition:{type:Boolean,default:void 0},replace:{type:Boolean,default:void 0}},setup(i){let d=i,f=t(),p=n(()=>e(f,d.class));return(e,t)=>(o(),r(c(u),a(d,{class:p.value}),{default:l(({isHref:t})=>[s(e.$slots,`default`,{isHref:t})]),_:3},16,[`class`]))}});export{d as default};

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

@@ -1,5 +1,5 @@
 import { LinkProps } from "./types.js";
-import * as vue75 from "vue";
+import * as vue198 from "vue";
 
 //#region src/components/link/link.vue.d.ts
 declare var __VLS_8: {
@@ -8,15 +8,16 @@ declare var __VLS_8: {
 type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: vue75.DefineComponent<LinkProps, {}, {}, {}, {}, vue75.ComponentOptionsMixin, vue75.ComponentOptionsMixin, {}, string, vue75.PublicProps, Readonly<LinkProps> & Readonly<{}>, {
-  viewTransition: boolean;
-  replace: boolean;
+declare const __VLS_base: vue198.DefineComponent<LinkProps, {}, {}, {}, {}, vue198.ComponentOptionsMixin, vue198.ComponentOptionsMixin, {}, string, vue198.PublicProps, Readonly<LinkProps> & Readonly<{}>, {
   disabled: boolean;
+  replace: boolean;
+  custom: boolean;
+  viewTransition: boolean;
   external: boolean;
   noRel: boolean;
   prefetch: boolean;
   noPrefetch: boolean;
-}, {}, {}, {}, string, vue75.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, vue198.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/link/types.d.ts

@@ -1,2 +1,8 @@
-import { LinkProps as LinkProps$1 } from "@soybeanjs/headless";
-export { type LinkProps$1 as LinkProps };
+import { ClassValue, LinkProps } from "@soybeanjs/headless";
+
+//#region src/components/link/types.d.ts
+interface LinkProps$1 extends LinkProps {
+  class?: ClassValue;
+}
+//#endregion
+export { LinkProps$1 as LinkProps };

package/dist/components/list/list-item.vue.d.ts

@@ -1,5 +1,5 @@
 import { ListItemProps } from "./types.js";
-import * as vue185 from "vue";
+import * as vue218 from "vue";
 
 //#region src/components/list/list-item.vue.d.ts
 declare var __VLS_8: {}, __VLS_22: {}, __VLS_30: {}, __VLS_32: {}, __VLS_34: {};
@@ -14,7 +14,7 @@ type __VLS_Slots = {} & {
 } & {
   trailing?: (props: typeof __VLS_34) => any;
 };
-declare const __VLS_base: vue185.DefineComponent<ListItemProps, {}, {}, {}, {}, vue185.ComponentOptionsMixin, vue185.ComponentOptionsMixin, {}, string, vue185.PublicProps, Readonly<ListItemProps> & Readonly<{}>, {}, {}, {}, {}, string, vue185.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: vue218.DefineComponent<ListItemProps, {}, {}, {}, {}, vue218.ComponentOptionsMixin, vue218.ComponentOptionsMixin, {}, string, vue218.PublicProps, Readonly<ListItemProps> & Readonly<{}>, {}, {}, {}, {}, string, vue218.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/list/list.js

@@ -1 +1 @@
-import{mergeSlotVariants as e}from"../../theme/shared.js";import{listVariants as t}from"../../variants/list.js";import{computed as n,createBlock as r,defineComponent as i,openBlock as a,renderSlot as o,unref as s,withCtx as c}from"vue";import{ListRoot as l,provideListThemeContext as u}from"@soybeanjs/headless";var d=i({name:`SList`,__name:`list`,props:{size:{},ui:{}},setup(i){let d=i;return u({ui:n(()=>e(t({size:d.size}),d.ui))}),(e,t)=>(a(),r(s(l),null,{default:c(()=>[o(e.$slots,`default`)]),_:3}))}});export{d as default};
+import{mergeSlotVariants as e}from"../../theme/shared.js";import{listVariants as t}from"../../variants/list.js";import{computed as n,createBlock as r,defineComponent as i,openBlock as a,renderSlot as o,unref as s,withCtx as c}from"vue";import{ListRoot as l,provideListUi as u}from"@soybeanjs/headless";var d=i({name:`SList`,__name:`list`,props:{class:{},size:{},ui:{}},setup(i){let d=i;return u(n(()=>e(t({size:d.size}),d.ui,{root:d.class}))),(e,t)=>(a(),r(s(l),null,{default:c(()=>[o(e.$slots,`default`)]),_:3}))}});export{d as default};