feat(InputTime): new component

[hywax]

🔗 Linked issue

Resolves #3089
Closes #3969

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

TimeField, to have an option to create a time field instead of setting input type time.
Uses: https://reka-ui.com/docs/components/time-field as I saw usage of this in other components.

Also based styling and attributes based on the UInput

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@5302

commit: 1666d70

[hywax]

@benjamincanac, you can take a look, there are two issues:

1. I think I did everything right with CSS, but there is no space between :, I don't know if it's needed.
2. It's not very clear how placeholder works. Even the documentation doesn't say anything about it. But I added props.

[hywax]

I think it can be removed, I'll do it tomorrow.

[benjamincanac]

@hywax So what I did is remove the Primitive (which was useless here since there is already flex on base) and the root slot to only use base and updated the theme:

• removed root slot
• removed inherited class on base slot
• improve segment focus in different variants
• cleaned segment slot classes (data-focused doesn't exist: https://reka-ui.com/docs/components/time-field#input)
• added a smaller gap than input for each size instead of relying on important

Let me know what you think!

[hywax]

@benjamincanac thank you very much! I will use your efforts in #5387

[benjamincanac]

Thanks @hywax! 😊

[benjamincanac]

Hey @hywax, just noticed when reviewing the InputDate component that only InputTime and InputNumber have a locale prop. Are those really necessary since we inherit from global locale? 🤔

[hywax]

@benjamincanac Hi! When I was making InputTime, I peeked at InputNumber. I think we can remove locale from props.