feat(InputTime): new component

docs/app/components/content/ComponentCode.vue

@@ -4,7 +4,7 @@ import type { ChipProps } from '@nuxt/ui'
 import json5 from 'json5'
 import { upperFirst, camelCase, kebabCase } from 'scule'
 import { hash } from 'ohash'
-import { CalendarDate } from '@internationalized/date'
+import { CalendarDate, Time } from '@internationalized/date'
 import * as theme from '#build/ui'
 import { get, set } from '#ui/utils'
 
@@ -14,6 +14,7 @@ interface Cast {
 }
 
 type CastDateValue = [number, number, number]
+type CastTimeValue = [number, number, number]
 
 const castMap: Record<string, Cast> = {
   'DateValue': {
@@ -37,6 +38,12 @@ const castMap: Record<string, Cast> = {
 
       return `{ start: new CalendarDate(${value.start.year}, ${value.start.month}, ${value.start.day}), end: new CalendarDate(${value.end.year}, ${value.end.month}, ${value.end.day}) }`
     }
+  },
+  'TimeValue': {
+    get: (args: CastTimeValue) => new Time(...args),
+    template: (value: Time) => {
+      return value ? `new Time(${value.hour}, ${value.minute}, ${value.second})` : 'null'
+    }
   }
 }
 

docs/app/components/content/examples/input-time/InputTimeFormFieldExample.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Time } from '@internationalized/date'
+
+const time = shallowRef(new Time(12, 30, 0))
+</script>
+
+<template>
+  <UFormField label="Time" help="Specify the time" required>
+    <UInputTime v-model="time" />
+  </UFormField>
+</template>

docs/content/docs/2.components/input-time.md

@@ -0,0 +1,181 @@
+---
+title: InputTime
+description: 'An input for selecting a time.'
+category: form
+links:
+  - label: TimeField
+    icon: i-custom-reka-ui
+    to: https://reka-ui.com/docs/components/time-field
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/InputTime.vue
+navigation.badge: Soon
+---
+
+## Usage
+
+Use the `v-model` directive to control the selected date.
+
+::component-code
+---
+cast:
+  modelValue: TimeValue
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: [12, 30, 0]
+---
+::
+
+Use the `default-value` prop to set the initial value when you do not need to control its state.
+
+::component-code
+---
+cast:
+  defaultValue: TimeValue
+ignore:
+  - defaultValue
+external:
+  - defaultValue
+props:
+  defaultValue: [12, 30, 0]
+---
+::
+
+::note
+This component relies on the [`@internationalized/date`](https://react-spectrum.adobe.com/internationalized/date/index.html) package which provides objects and functions for representing and manipulating dates and times in a locale-aware manner.
+::
+
+### Hour Cycle
+
+Use the `hour-cycle` prop to change the hour cycle of the InputTime. Defaults to `12`.
+
+::component-code
+---
+cast:
+  defaultValue: TimeValue
+ignore:
+  - hourCycle
+  - defaultValue
+external:
+  - defaultValue
+props:
+  hourCycle: 24
+  defaultValue: [16, 30, 0]
+---
+::
+
+### Color
+
+Use the `color` prop to change the color of the InputTime.
+
+::component-code
+---
+props:
+  color: neutral
+  highlight: true
+---
+::
+
+::note
+The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.
+::
+
+### Variant
+
+Use the `variant` prop to change the variant of the InputTime.
+
+::component-code
+---
+props:
+  variant: subtle
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the InputTime.
+
+::component-code
+---
+props:
+  size: xl
+---
+::
+
+### Icon
+
+Use the `icon` prop to show an [Icon](/docs/components/icon) inside the InputTime.
+
+::component-code
+---
+props:
+  icon: 'i-lucide-clock'
+---
+::
+
+::note
+Use the `leading` and `trailing` props to set the icon position or the `leading-icon` and `trailing-icon` props to set a different icon for each position.
+::
+
+### Avatar
+
+Use the `avatar` prop to show an [Avatar](/docs/components/avatar) inside the InputTime.
+
+::component-code
+---
+prettier: true
+props:
+  avatar:
+    src: 'https://github.com/vuejs.png'
+  size: md
+  variant: outline
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the InputTime.
+
+::component-code
+---
+props:
+  disabled: true
+---
+::
+
+## Examples
+
+### Within a FormField
+
+You can use the InputTime within a [FormField](/docs/components/form-field) component to display a label, help text, required indicator, etc.
+
+::component-example
+---
+name: 'input-time-form-field-example'
+---
+::
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Emits
+
+:component-emits
+
+## Theme
+
+:component-theme
+
+## Changelog
+
+:component-changelog

playgrounds/nuxt/app/composables/useNavigation.ts

@@ -38,6 +38,7 @@ const components = [
   'input-menu',
   'input-number',
   'input-tags',
+  'input-time',
   'input',
   'kbd',
   'link',

playgrounds/nuxt/app/pages/components/input-time.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { Time } from '@internationalized/date'
+import theme from '#build/ui/input-time'
+
+const colors = Object.keys(theme.variants.color)
+const sizes = Object.keys(theme.variants.size)
+const variants = Object.keys(theme.variants.variant)
+
+const attrs = reactive({
+  color: [theme.defaultVariants.color],
+  size: [theme.defaultVariants.size],
+  variant: [theme.defaultVariants.variant]
+})
+
+const value = shallowRef(new Time(12, 30))
+</script>
+
+<template>
+  <Navbar>
+    <USelect v-model="attrs.color" :items="colors" multiple />
+    <USelect v-model="attrs.variant" :items="variants" multiple />
+    <USelect v-model="attrs.size" :items="sizes" multiple />
+  </Navbar>
+
+  <Matrix v-slot="props" :attrs="attrs">
+    <UInputTime v-model="value" autofocus v-bind="props" />
+    <UInputTime :default-value="new Time(12, 30)" v-bind="props" />
+    <UInputTime highlight v-bind="props" />
+    <UInputTime disabled v-bind="props" />
+    <UInputTime required v-bind="props" />
+    <UInputTime icon="i-lucide-clock" v-bind="props" />
+    <UInputTime icon="i-lucide-clock" trailing v-bind="props" />
+    <UInputTime :avatar="{ src: 'https://github.com/benjamincanac.png' }" icon="i-lucide-clock" trailing v-bind="props" />
+    <UInputTime loading v-bind="props" />
+    <UInputTime loading trailing v-bind="props" />
+    <UInputTime loading icon="i-lucide-clock" trailing-icon="i-lucide-chevron-down" v-bind="props" />
+  </Matrix>
+</template>