@byyuurin/ui 0.2.0 → 0.3.0

package/dist/runtime/components/DropdownMenuContent.vue.d.ts

@@ -29,14 +29,18 @@ export type DropdownMenuContentSlots<A extends ArrayOrNested<DropdownMenuItem> =
     index: number;
     ui: ComponentStyler<typeof theme>;
 }>;
-declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<DropdownMenuContentProps<T> & {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<DropdownMenuContentProps<T> & {
         onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
         onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
         onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
         onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
         onCloseAutoFocus?: ((event: Event) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: DropdownMenuContentSlots<T, NestedItem<T>>;
@@ -44,8 +48,8 @@ declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_pr
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/FieldGroup.vue

@@ -27,7 +27,7 @@ provideFieldGroup(computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="ui.base({ class: props.class })" :data-orientation="props.orientation" data-part="base">
-    <slot></slot>
-  </Primitive>
+  <Primitive :as="props.as" :class="ui.base({ class: props.class })" :data-orientation="props.orientation" data-part="base">
+    <slot></slot>
+  </Primitive>
 </template>

package/dist/runtime/components/FieldGroup.vue.d.ts

@@ -21,11 +21,11 @@ export interface FieldGroupProps extends ComponentBaseProps {
 export interface FieldGroupSlots {
     default: StaticSlot;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FieldGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FieldGroupProps> & Readonly<{}>, {
     orientation: "horizontal" | "vertical";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FieldGroupSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Form.vue

@@ -269,13 +269,13 @@ const ui = computed(() => {
 </script>
 
 <template>
-  <component
-    :is="parentBus ? 'div' : 'form'"
-    :id="formId"
-    :class="ui.base({ class: props.class })"
-    data-part="base"
-    @submit.prevent="onSubmitWrapper"
-  >
-    <slot :errors="errors" :loading="loading"></slot>
-  </component>
+  <component
+    :is="parentBus ? 'div' : 'form'"
+    :id="formId"
+    :class="ui.base({ class: props.class })"
+    data-part="base"
+    @submit.prevent="onSubmitWrapper"
+  >
+    <slot :errors="errors" :loading="loading"></slot>
+  </component>
 </template>

package/dist/runtime/components/Form.vue.d.ts

@@ -1,6 +1,7 @@
 import type { ComponentBaseProps, FormData, FormError, FormErrorEvent, FormErrorWithId, FormInputEvents, FormSchema, FormSubmitEvent, InferInput } from '../types';
+import type { FormHTMLAttributes } from '../types/html';
 import type { StaticSlot } from '../types/utils';
-export interface FormProps<S extends FormSchema, T extends boolean = true, N extends boolean = false> extends ComponentBaseProps {
+export interface FormProps<S extends FormSchema, T extends boolean = true, N extends boolean = false> extends ComponentBaseProps, /** @vue-ignore */ Omit<FormHTMLAttributes, 'name'> {
     id?: string | number;
     /** Schema to validate the form state. Supports Standard Schema objects, Yup, Joi, and Superstructs. */
     schema?: S;
@@ -59,11 +60,15 @@ export interface FormSlots {
         loading: boolean;
     }>;
 }
-declare const __VLS_export: <S extends FormSchema, T extends boolean = true, N 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_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<FormProps<S, T, N> & {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <S extends FormSchema, T extends boolean = true, N extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<FormProps<S, T, N> & {
         onError?: ((event: FormErrorEvent) => any) | undefined;
         onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         validate: any;
         errors: import("vue").Ref<{
@@ -96,8 +101,8 @@ declare const __VLS_export: <S extends FormSchema, T extends boolean = true, N e
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/FormField.vue

@@ -15,8 +15,9 @@ const props = defineProps({
   label: { type: String, required: false },
   description: { type: String, required: false },
   help: { type: String, required: false },
-  error: { type: [String, Boolean], required: false },
+  error: { type: [String, Boolean], required: false, default: void 0 },
   hint: { type: String, required: false },
+  orientation: { type: null, required: false },
   size: { type: null, required: false },
   required: { type: Boolean, required: false },
   eagerValidation: { type: Boolean, required: false },
@@ -68,41 +69,41 @@ const ui = computed(() => {
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <div :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
-      <div v-if="props.label || !!slots.label" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })" data-part="labelWrapper">
-        <Label :for="id" :class="ui.label({ class: props.ui?.label })" data-part="label">
-          <slot name="label" :label="props.label">
-            {{ props.label }}
-          </slot>
-        </Label>
-        <span v-if="props.hint || !!slots.hint" :id="`${ariaId}-hint`" :class="ui.hint({ class: props.ui?.hint })" data-part="hint">
-          <slot name="hint" :hint="props.hint">
-            {{ props.hint }}
-          </slot>
-        </span>
-      </div>
-
-      <p v-if="props.description || !!slots.description" :id="`${ariaId}-description`" :class="ui.description({ class: props.ui?.description })" data-part="description">
-        <slot name="description" :description="props.description">
-          {{ props.description }}
-        </slot>
-      </p>
-    </div>
-
-    <div :class="(props.label || !!slots.label || props.description || !!slots.description) && ui.container({ class: props.ui?.container })" data-part="container">
-      <slot :error="error"></slot>
-
-      <div v-if="typeof error === 'string' && error || !!slots.error" :id="`${ariaId}-error`" :class="ui.error({ class: props.ui?.error })" data-part="error">
-        <slot name="error" :error="error">
-          {{ error }}
-        </slot>
-      </div>
-      <div v-else-if="props.help || !!slots.help" :class="ui.help({ class: props.ui?.help })" data-part="help">
-        <slot name="help" :help="props.help">
-          {{ props.help }}
-        </slot>
-      </div>
-    </div>
-  </Primitive>
+  <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" :data-orientation="props.orientation" data-part="root">
+    <div :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
+      <div v-if="props.label || !!slots.label" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })" data-part="labelWrapper">
+        <Label :for="id" :class="ui.label({ class: props.ui?.label })" data-part="label">
+          <slot name="label" :label="props.label">
+            {{ props.label }}
+          </slot>
+        </Label>
+        <span v-if="props.hint || !!slots.hint" :id="`${ariaId}-hint`" :class="ui.hint({ class: props.ui?.hint })" data-part="hint">
+          <slot name="hint" :hint="props.hint">
+            {{ props.hint }}
+          </slot>
+        </span>
+      </div>
+
+      <p v-if="props.description || !!slots.description" :id="`${ariaId}-description`" :class="ui.description({ class: props.ui?.description })" data-part="description">
+        <slot name="description" :description="props.description">
+          {{ props.description }}
+        </slot>
+      </p>
+    </div>
+
+    <div :class="(props.label || !!slots.label || props.description || !!slots.description) && ui.container({ class: props.ui?.container })" data-part="container">
+      <slot :error="error"></slot>
+
+      <div v-if="props.error !== false && (typeof error === 'string' && error || !!slots.error)" :id="`${ariaId}-error`" :class="ui.error({ class: props.ui?.error })" data-part="error">
+        <slot name="error" :error="error">
+          {{ error }}
+        </slot>
+      </div>
+      <div v-else-if="props.help || !!slots.help" :class="ui.help({ class: props.ui?.help })" data-part="help">
+        <slot name="help" :help="props.help">
+          {{ props.help }}
+        </slot>
+      </div>
+    </div>
+  </Primitive>
 </template>

package/dist/runtime/components/FormField.vue.d.ts

@@ -20,8 +20,11 @@ export interface FormFieldProps extends ComponentBaseProps {
     error?: string | boolean;
     hint?: string;
     /**
-     * @default "md"
+     * The orientation of the form field.
+     * @default "vertical"
      */
+    orientation?: ThemeVariants['orientation'];
+    /** @default "md" */
     size?: ThemeVariants['size'];
     required?: boolean;
     /** If true, validation on input will be active immediately instead of waiting for a blur event. */
@@ -53,9 +56,11 @@ export interface FormFieldSlots {
         error?: boolean | string;
     }>;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FormFieldSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldProps> & Readonly<{}>, {
+    error: string | boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FormFieldSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Icon.vue

@@ -15,6 +15,6 @@ const iconProps = useForwardProps(reactivePick(props, "name", "mode", "size", "c
 </script>
 
 <template>
-  <Icon v-if="typeof props.name === 'string'" v-bind="iconProps" />
-  <component :is="props.name" v-else />
+  <Icon v-if="typeof props.name === 'string'" v-bind="iconProps" />
+  <component :is="props.name" v-else />
 </template>

package/dist/runtime/components/Icon.vue.d.ts

@@ -4,6 +4,6 @@ export interface IconProps {
     size?: string | number;
     customize?: (content: string, name?: string, prefix?: string, provider?: string) => string;
 }
-declare const __VLS_export: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/Input.vue

@@ -107,52 +107,52 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <span v-if="isLeading || !!props.avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })" data-part="leading">
-      <slot name="leading" :ui="ui">
-        <Icon
-          v-if="isLeading && leadingIconName"
-          :name="leadingIconName"
-          :class="ui.leadingIcon({ class: props.ui?.leadingIcon })"
-          data-part="leadingIcon"
-        />
-        <Avatar
-          v-else-if="props.avatar"
-          :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()"
-          v-bind="props.avatar"
-          :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })"
-          data-part="leadingAvatar"
-        />
-      </slot>
-    </span>
-
-    <input
-      ref="inputRef"
-      :type="props.type"
-      :value="modelValue"
-      :placeholder="props.placeholder"
-      :required="props.required"
-      :autocomplete="props.autocomplete"
-      v-bind="{ id, name, disabled, ...$attrs, ...ariaAttrs }"
-      :class="ui.base({ class: props.ui?.base })"
-      data-part="base"
-      @input="onInput"
-      @blur="onBlur"
-      @change="onChange"
-      @focus="emitFormFocus"
-    />
-
-    <slot :ui="ui"></slot>
-
-    <span v-if="isTrailing || slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })" data-part="trailing">
-      <slot name="trailing" :ui="ui">
-        <Icon
-          v-if="trailingIconName"
-          :name="trailingIconName"
-          :class="ui.trailingIcon({ class: props.ui?.trailingIcon })"
-          data-part="trailingIcon"
-        />
-      </slot>
-    </span>
-  </Primitive>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <span v-if="isLeading || !!props.avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })" data-part="leading">
+      <slot name="leading" :ui="ui">
+        <Icon
+          v-if="isLeading && leadingIconName"
+          :name="leadingIconName"
+          :class="ui.leadingIcon({ class: props.ui?.leadingIcon })"
+          data-part="leadingIcon"
+        />
+        <Avatar
+          v-else-if="props.avatar"
+          :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()"
+          v-bind="props.avatar"
+          :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })"
+          data-part="leadingAvatar"
+        />
+      </slot>
+    </span>
+
+    <input
+      ref="inputRef"
+      :type="props.type"
+      :value="modelValue"
+      :placeholder="props.placeholder"
+      :required="props.required"
+      :autocomplete="props.autocomplete"
+      v-bind="{ id, name, disabled, ...$attrs, ...ariaAttrs }"
+      :class="ui.base({ class: props.ui?.base })"
+      data-part="base"
+      @input="onInput"
+      @blur="onBlur"
+      @change="onChange"
+      @focus="emitFormFocus"
+    />
+
+    <slot :ui="ui"></slot>
+
+    <span v-if="isTrailing || slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })" data-part="trailing">
+      <slot name="trailing" :ui="ui">
+        <Icon
+          v-if="trailingIconName"
+          :name="trailingIconName"
+          :class="ui.trailingIcon({ class: props.ui?.trailingIcon })"
+          data-part="trailingIcon"
+        />
+      </slot>
+    </span>
+  </Primitive>
 </template>

package/dist/runtime/components/Input.vue.d.ts

@@ -1,14 +1,14 @@
 import type { VariantProps } from '@byyuurin/ui-kit';
 import type { PrimitiveProps } from 'reka-ui';
-import type { InputHTMLAttributes } from 'vue';
 import theme from '#build/ui/input';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { ComponentBaseProps, ComponentStyler, ComponentUIProps } from '../types';
+import type { InputHTMLAttributes } from '../types/html';
 import type { ModelModifiers } from '../types/input';
 import type { AcceptableValue, MaybeNull, StaticSlot } from '../types/utils';
 export type InputValue = AcceptableValue;
 type ThemeVariants = VariantProps<typeof theme>;
-export interface InputProps<T extends InputValue = InputValue> extends ComponentBaseProps, UseComponentIconsProps {
+export interface InputProps<T extends InputValue = InputValue> extends ComponentBaseProps, UseComponentIconsProps, /** @vue-ignore */ Omit<InputHTMLAttributes, 'name' | 'type' | 'placeholder' | 'required' | 'autocomplete' | 'autofocus' | 'disabled'> {
     /**
      * The element or component this component should render as.
      * @default "div"
@@ -35,7 +35,7 @@ export interface InputProps<T extends InputValue = InputValue> extends Component
     disabled?: boolean;
     defaultValue?: T;
     modelValue?: T;
-    modelModifiers?: ModelModifiers;
+    modelModifiers?: ModelModifiers<T>;
     ui?: ComponentUIProps<typeof theme>;
 }
 export interface InputEmits<T extends InputValue> {
@@ -54,23 +54,27 @@ export interface InputSlots {
         ui: ComponentStyler<typeof theme>;
     }>;
 }
-declare const __VLS_export: <T extends InputValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<InputProps<T> & {
-        onChange?: ((event: Event) => any) | undefined;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends InputValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<InputProps<T> & {
         onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((event: Event) => any) | undefined;
         "onUpdate:modelValue"?: ((value: T) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         inputRef: import("vue").Ref<MaybeNull<HTMLInputElement>, MaybeNull<HTMLInputElement>>;
     }>) => void;
     attrs: any;
     slots: InputSlots;
-    emit: ((evt: "change", event: Event) => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "update:modelValue", value: T) => void);
+    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/InputNumber.vue

@@ -95,51 +95,51 @@ defineExpose({
 </script>
 
 <template>
-  <NumberFieldRoot
-    v-bind="{ ...rootProps, id, name, disabled, modelValue }"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    data-part="root"
-    @update:model-value="onUpdate"
-  >
-    <NumberFieldInput
-      v-bind="{ ...$attrs, ...ariaAttrs }"
-      ref="inputRef"
-      :placeholder="props.placeholder"
-      :required="props.required"
-      :class="ui.base({ class: props.ui?.base })"
-      data-part="base"
-      @blur="onBlur"
-      @focus="emitFormFocus"
-    />
-
-    <div v-if="props.increment" :class="ui.increment({ class: props.ui?.increment })" data-part="increment">
-      <NumberFieldIncrement :disabled="disabled || incrementDisabled" as-child>
-        <slot name="increment">
-          <Button
-            :icon="incrementIcon"
-            :size="props.size"
-            :color="color"
-            variant="link"
-            :aria-label="t('inputNumber.increment')"
-            v-bind="typeof props.increment === 'object' ? props.increment : void 0"
-          />
-        </slot>
-      </NumberFieldIncrement>
-    </div>
-
-    <div v-if="props.decrement" :class="ui.decrement({ class: props.ui?.decrement })" data-part="decrement">
-      <NumberFieldDecrement :disabled="disabled || decrementDisabled" as-child>
-        <slot name="decrement">
-          <Button
-            :icon="decrementIcon"
-            :size="props.size"
-            :color="color"
-            variant="link"
-            :aria-label="t('inputNumber.decrement')"
-            v-bind="typeof props.decrement === 'object' ? props.decrement : void 0"
-          />
-        </slot>
-      </NumberFieldDecrement>
-    </div>
-  </NumberFieldRoot>
+  <NumberFieldRoot
+    v-bind="{ ...rootProps, id, name, disabled, modelValue }"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    data-part="root"
+    @update:model-value="onUpdate"
+  >
+    <NumberFieldInput
+      v-bind="{ ...$attrs, ...ariaAttrs }"
+      ref="inputRef"
+      :placeholder="props.placeholder"
+      :required="props.required"
+      :class="ui.base({ class: props.ui?.base })"
+      data-part="base"
+      @blur="onBlur"
+      @focus="emitFormFocus"
+    />
+
+    <div v-if="props.increment" :class="ui.increment({ class: props.ui?.increment })" data-part="increment">
+      <NumberFieldIncrement :disabled="disabled || incrementDisabled" as-child>
+        <slot name="increment">
+          <Button
+            :icon="incrementIcon"
+            :size="props.size"
+            :color="color"
+            variant="link"
+            :aria-label="t('inputNumber.increment')"
+            v-bind="typeof props.increment === 'object' ? props.increment : void 0"
+          />
+        </slot>
+      </NumberFieldIncrement>
+    </div>
+
+    <div v-if="props.decrement" :class="ui.decrement({ class: props.ui?.decrement })" data-part="decrement">
+      <NumberFieldDecrement :disabled="disabled || decrementDisabled" as-child>
+        <slot name="decrement">
+          <Button
+            :icon="decrementIcon"
+            :size="props.size"
+            :color="color"
+            variant="link"
+            :aria-label="t('inputNumber.decrement')"
+            v-bind="typeof props.decrement === 'object' ? props.decrement : void 0"
+          />
+        </slot>
+      </NumberFieldDecrement>
+    </div>
+  </NumberFieldRoot>
 </template>