@hina-ui/vue 1.0.0

package/src/components/date-picker/DatePicker.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+  import { computed, shallowRef, useSlots } from 'vue'
+  import {
+    PopoverAnchor,
+    PopoverContent,
+    PopoverPortal,
+    PopoverRoot,
+    PopoverTrigger,
+  } from 'reka-ui'
+  import { CalendarDays } from '@lucide/vue'
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import Calendar from '../calendar/Calendar.vue'
+  import type { CalendarVariants } from '../calendar/calendar.variants'
+  import Card from '../card/Card.vue'
+  import DateField from '../date-field/DateField.vue'
+  import { useFieldControl } from '../form-field/context'
+  import { injectInputGroup } from '../input-group/context'
+  import InputGroupScope from '../input-group/InputGroupScope.vue'
+  import InputAction from '../input/InputAction.vue'
+  import { inputEmbedded, inputHost, type InputVariants } from '../input/input.variants'
+  import { datePickerContent } from './date-picker.variants'
+
+  defineOptions({ name: 'HnDatePicker', inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<{
+      placeholder?: string
+      min?: string
+      max?: string
+      unavailable?: (date: string) => boolean
+      weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
+      weekdayFormat?: 'narrow' | 'short'
+      fixedWeeks?: boolean
+      clearable?: boolean
+      readonly?: boolean
+      name?: string
+      variant?: InputVariants['variant']
+      size?: InputVariants['size']
+      disabled?: boolean
+      invalid?: boolean
+      class?: string
+    }>(),
+    { clearable: false, fixedWeeks: true },
+  )
+  const emit = defineEmits<{ clear: [] }>()
+
+  const model = defineModel<string | null>({ default: null })
+  const open = defineModel<boolean>('open', { default: false })
+
+  const slots = useSlots()
+  const t = useUiLocale()
+  const outer = injectInputGroup()
+  const host = shallowRef<HTMLElement | null>(null)
+
+  const size = computed(() => (outer ? outer.size.value : props.size))
+  const { invalid, disabled } = useFieldControl({
+    invalid: () => props.invalid || !!outer?.invalid.value,
+    disabled: () => props.disabled || !!outer?.disabled.value,
+  })
+  const calendarSize = computed<CalendarVariants['size']>(() => size.value ?? 'md')
+
+  function pick(next: string | null) {
+    model.value = next
+    if (next) open.value = false
+  }
+</script>
+
+<template>
+  <PopoverRoot v-model:open="open" modal>
+    <PopoverAnchor as-child>
+      <div
+        ref="host"
+        data-hn-date-picker
+        :data-invalid="invalid ? '' : undefined"
+        :class="
+          cn(
+            outer ? inputEmbedded() : inputHost({ variant: props.variant, size: props.size }),
+            props.class,
+          )
+        "
+      >
+        <InputGroupScope :size="size" :disabled="disabled" :invalid="invalid">
+          <DateField
+            v-bind="$attrs"
+            :model-value="model"
+            :placeholder="props.placeholder"
+            :min="props.min"
+            :max="props.max"
+            :clearable="props.clearable"
+            :readonly="props.readonly"
+            :name="props.name"
+            @update:model-value="model = $event"
+            @clear="emit('clear')"
+          >
+            <template v-if="slots.leading" #leading>
+              <slot name="leading" />
+            </template>
+          </DateField>
+        </InputGroupScope>
+        <PopoverTrigger as-child>
+          <InputAction :label="t.datePicker.open" :disabled="disabled">
+            <CalendarDays />
+          </InputAction>
+        </PopoverTrigger>
+      </div>
+    </PopoverAnchor>
+    <PopoverPortal>
+      <PopoverContent
+        as-child
+        side="bottom"
+        align="start"
+        :side-offset="8"
+        @open-auto-focus.prevent
+      >
+        <Card :padded="false" :class="datePickerContent()">
+          <Calendar
+            :model-value="model"
+            :placeholder="props.placeholder"
+            :min="props.min"
+            :max="props.max"
+            :unavailable="props.unavailable"
+            :week-starts-on="props.weekStartsOn"
+            :weekday-format="props.weekdayFormat"
+            :fixed-weeks="props.fixedWeeks"
+            :size="calendarSize"
+            :readonly="props.readonly"
+            autofocus
+            @update:model-value="pick"
+          />
+        </Card>
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
+</template>

package/src/components/date-picker/date-picker.variants.ts

@@ -0,0 +1,5 @@
+import { tv } from '../../lib/tv'
+
+export const datePickerContent = tv({
+  base: 'hn-anim-pop z-(--hn-z-overlay) p-2 shadow-md outline-none',
+})

package/src/components/date-range-field/DateRangeField.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+  import { computed, shallowRef, useSlots } from 'vue'
+  import { DateRangeFieldInput, DateRangeFieldRoot, type DateRange } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import {
+    formatDateRange,
+    parseDateRange,
+    parseDateValue,
+    type DateGranularity,
+    type DateRangeValue,
+  } from '../../lib/date'
+  import { useUiLocale } from '../../locale'
+  import { X } from '@lucide/vue'
+  import InputAction from '../input/InputAction.vue'
+  import { useFieldControl } from '../form-field/context'
+  import { injectInputGroup } from '../input-group/context'
+  import {
+    inputActionSlot,
+    inputAdornment,
+    inputEmbedded,
+    inputHost,
+    type InputVariants,
+  } from '../input/input.variants'
+  import { useSegmentFocus } from '../date-field/composables/useSegmentFocus'
+  import {
+    dateFieldControl,
+    dateFieldHost,
+    dateFieldSegment,
+  } from '../date-field/date-field.variants'
+  import { dateRangeFieldSeparator } from './date-range-field.variants'
+  import { isRangeInvalid } from './utils/validity'
+
+  defineOptions({ name: 'HnDateRangeField', inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<{
+      placeholder?: string
+      min?: string
+      max?: string
+      granularity?: DateGranularity
+      hourCycle?: 12 | 24
+      clearable?: boolean
+      readonly?: boolean
+      name?: string
+      variant?: InputVariants['variant']
+      size?: InputVariants['size']
+      disabled?: boolean
+      invalid?: boolean
+      class?: string
+    }>(),
+    { granularity: 'day', clearable: false },
+  )
+  const emit = defineEmits<{ clear: [] }>()
+
+  const model = defineModel<DateRangeValue | null>({ default: null })
+
+  const slots = useSlots()
+  const t = useUiLocale()
+  const group = injectInputGroup()
+  const host = shallowRef<HTMLElement | null>(null)
+
+  const { labelledBy, invalid, disabled, describedBy } = useFieldControl({
+    invalid: () => props.invalid || !!group?.invalid.value || outOfRange.value,
+    disabled: () => props.disabled || !!group?.disabled.value,
+  })
+
+  const value = computed(() => parseDateRange(model.value, props.granularity))
+  const placeholder = computed(() => parseDateValue(props.placeholder, props.granularity))
+  const minValue = computed(() => parseDateValue(props.min, props.granularity))
+  const maxValue = computed(() => parseDateValue(props.max, props.granularity))
+  const outOfRange = computed(() =>
+    isRangeInvalid(value.value, { min: minValue.value, max: maxValue.value }),
+  )
+  const clearing = computed(() => props.clearable && model.value != null && !disabled.value)
+
+  const sides = ['start', 'end'] as const
+
+  function segmentLabel(side: 'start' | 'end', part: string) {
+    const name = (t.value.dateField as Record<string, string | undefined>)[part]
+    return `${t.value.dateRangeField[side]} ${name}`
+  }
+
+  function update(next: DateRange) {
+    model.value = formatDateRange(next, props.granularity)
+  }
+
+  const { focus, onHostClick } = useSegmentFocus(host)
+
+  function clear() {
+    if (model.value == null) return
+    model.value = null
+    emit('clear')
+    focus()
+  }
+
+  defineExpose({ clear, focus })
+</script>
+
+<template>
+  <div
+    ref="host"
+    data-hn-date-range-field
+    :data-invalid="invalid ? '' : undefined"
+    :data-disabled="disabled ? '' : undefined"
+    :class="
+      cn(
+        group ? inputEmbedded() : inputHost({ variant: props.variant, size: props.size }),
+        dateFieldHost(),
+        props.class,
+      )
+    "
+    @click="onHostClick"
+  >
+    <span v-if="slots.leading" :class="inputAdornment()">
+      <slot name="leading" />
+    </span>
+    <DateRangeFieldRoot
+      v-slot="{ segments }"
+      v-bind="$attrs"
+      :aria-labelledby="labelledBy"
+      :aria-describedby="describedBy"
+      :model-value="value"
+      :placeholder="placeholder"
+      :min-value="minValue"
+      :max-value="maxValue"
+      :granularity="props.granularity"
+      :hour-cycle="props.hourCycle"
+      :locale="t.tag"
+      :disabled="disabled"
+      :readonly="props.readonly"
+      :name="props.name"
+      :aria-invalid="invalid || undefined"
+      :class="
+        dateFieldControl({ leading: !!slots.leading, trailing: clearing || !!slots.trailing })
+      "
+      @update:model-value="update"
+    >
+      <template v-for="(side, index) in sides" :key="side">
+        <span v-if="index" aria-hidden="true" :class="dateRangeFieldSeparator()">
+          {{ t.dateRangeField.separator }}
+        </span>
+        <DateRangeFieldInput
+          v-for="part in segments[side]"
+          :key="`${side}-${part.part}`"
+          :type="side"
+          :part="part.part"
+          data-hn-segment
+          :aria-label="part.part === 'literal' ? undefined : segmentLabel(side, part.part)"
+          :class="dateFieldSegment({ part: part.part === 'literal' ? 'literal' : 'editable' })"
+        >
+          {{ part.value }}
+        </DateRangeFieldInput>
+      </template>
+    </DateRangeFieldRoot>
+    <Transition
+      enter-active-class="hn-transition-base"
+      enter-from-class="scale-90 opacity-0"
+      leave-active-class="hn-transition"
+      leave-to-class="scale-90 opacity-0"
+    >
+      <span v-if="clearing" :class="inputActionSlot()">
+        <InputAction :label="t.common.clear" @click="clear">
+          <X />
+        </InputAction>
+      </span>
+    </Transition>
+    <span v-if="slots.trailing" :class="inputAdornment()">
+      <slot name="trailing" />
+    </span>
+  </div>
+</template>

package/src/components/date-range-field/date-range-field.variants.ts

@@ -0,0 +1,5 @@
+import { tv } from '../../lib/tv'
+
+export const dateRangeFieldSeparator = tv({
+  base: 'text-faint shrink-0 px-1 select-none',
+})

package/src/components/date-range-field/utils/validity.ts

@@ -0,0 +1,21 @@
+import type { DateValue } from '@internationalized/date'
+
+interface Bounds {
+  min?: DateValue
+  max?: DateValue
+}
+
+interface Parts {
+  start?: DateValue
+  end?: DateValue
+}
+
+function outside(value: DateValue | undefined, { min, max }: Bounds) {
+  if (!value) return false
+  return (!!min && value.compare(min) < 0) || (!!max && value.compare(max) > 0)
+}
+
+export function isRangeInvalid({ start, end }: Parts, bounds: Bounds) {
+  if (outside(start, bounds) || outside(end, bounds)) return true
+  return !!start && !!end && start.compare(end) > 0
+}

package/src/components/date-range-picker/DateRangePicker.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+  import { computed, shallowRef, useSlots } from 'vue'
+  import {
+    PopoverAnchor,
+    PopoverContent,
+    PopoverPortal,
+    PopoverRoot,
+    PopoverTrigger,
+  } from 'reka-ui'
+  import { CalendarRange } from '@lucide/vue'
+  import { cn } from '../../lib/cn'
+  import type { DateRangeValue } from '../../lib/date'
+  import { useUiLocale } from '../../locale'
+  import type { CalendarVariants } from '../calendar/calendar.variants'
+  import Card from '../card/Card.vue'
+  import DateRangeField from '../date-range-field/DateRangeField.vue'
+  import { datePickerContent } from '../date-picker/date-picker.variants'
+  import { useFieldControl } from '../form-field/context'
+  import { injectInputGroup } from '../input-group/context'
+  import InputGroupScope from '../input-group/InputGroupScope.vue'
+  import InputAction from '../input/InputAction.vue'
+  import { inputEmbedded, inputHost, type InputVariants } from '../input/input.variants'
+  import RangeCalendar from '../range-calendar/RangeCalendar.vue'
+
+  defineOptions({ name: 'HnDateRangePicker', inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<{
+      placeholder?: string
+      min?: string
+      max?: string
+      maximumDays?: number
+      unavailable?: (date: string) => boolean
+      weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
+      weekdayFormat?: 'narrow' | 'short'
+      fixedWeeks?: boolean
+      clearable?: boolean
+      readonly?: boolean
+      name?: string
+      variant?: InputVariants['variant']
+      size?: InputVariants['size']
+      disabled?: boolean
+      invalid?: boolean
+      class?: string
+    }>(),
+    { clearable: false, fixedWeeks: true },
+  )
+  const emit = defineEmits<{ clear: [] }>()
+
+  const model = defineModel<DateRangeValue | null>({ default: null })
+  const open = defineModel<boolean>('open', { default: false })
+
+  const slots = useSlots()
+  const t = useUiLocale()
+  const outer = injectInputGroup()
+  const host = shallowRef<HTMLElement | null>(null)
+
+  const size = computed(() => (outer ? outer.size.value : props.size))
+  const { invalid, disabled } = useFieldControl({
+    invalid: () => props.invalid || !!outer?.invalid.value,
+    disabled: () => props.disabled || !!outer?.disabled.value,
+  })
+  const calendarSize = computed<CalendarVariants['size']>(() => size.value ?? 'md')
+
+  function pick(next: DateRangeValue | null) {
+    model.value = next
+    if (next?.start && next.end) open.value = false
+  }
+</script>
+
+<template>
+  <PopoverRoot v-model:open="open" modal>
+    <PopoverAnchor as-child>
+      <div
+        ref="host"
+        data-hn-date-range-picker
+        :data-invalid="invalid ? '' : undefined"
+        :class="
+          cn(
+            outer ? inputEmbedded() : inputHost({ variant: props.variant, size: props.size }),
+            props.class,
+          )
+        "
+      >
+        <InputGroupScope :size="size" :disabled="disabled" :invalid="invalid">
+          <DateRangeField
+            v-bind="$attrs"
+            :model-value="model"
+            :placeholder="props.placeholder"
+            :min="props.min"
+            :max="props.max"
+            :clearable="props.clearable"
+            :readonly="props.readonly"
+            :name="props.name"
+            @update:model-value="model = $event"
+            @clear="emit('clear')"
+          >
+            <template v-if="slots.leading" #leading>
+              <slot name="leading" />
+            </template>
+          </DateRangeField>
+        </InputGroupScope>
+        <PopoverTrigger as-child>
+          <InputAction :label="t.datePicker.open" :disabled="disabled">
+            <CalendarRange />
+          </InputAction>
+        </PopoverTrigger>
+      </div>
+    </PopoverAnchor>
+    <PopoverPortal>
+      <PopoverContent
+        as-child
+        side="bottom"
+        align="start"
+        :side-offset="8"
+        @open-auto-focus.prevent
+      >
+        <Card :padded="false" :class="datePickerContent()">
+          <RangeCalendar
+            :model-value="model"
+            :placeholder="props.placeholder"
+            :min="props.min"
+            :max="props.max"
+            :maximum-days="props.maximumDays"
+            :unavailable="props.unavailable"
+            :week-starts-on="props.weekStartsOn"
+            :weekday-format="props.weekdayFormat"
+            :fixed-weeks="props.fixedWeeks"
+            :size="calendarSize"
+            :readonly="props.readonly"
+            autofocus
+            @update:model-value="pick"
+          />
+        </Card>
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
+</template>

package/src/components/date-time-picker/DateTimePicker.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+  import { computed, shallowRef, useSlots } from 'vue'
+  import {
+    PopoverAnchor,
+    PopoverContent,
+    PopoverPortal,
+    PopoverRoot,
+    PopoverTrigger,
+  } from 'reka-ui'
+  import { CalendarClock } from '@lucide/vue'
+  import { cn } from '../../lib/cn'
+  import { joinDateTime, splitDateTime, type TimeGranularity } from '../../lib/date'
+  import { useUiLocale } from '../../locale'
+  import Button from '../button/Button.vue'
+  import Calendar from '../calendar/Calendar.vue'
+  import type { CalendarVariants } from '../calendar/calendar.variants'
+  import Card from '../card/Card.vue'
+  import DateField from '../date-field/DateField.vue'
+  import { datePickerContent } from '../date-picker/date-picker.variants'
+  import { useFieldControl } from '../form-field/context'
+  import { injectInputGroup } from '../input-group/context'
+  import InputGroupScope from '../input-group/InputGroupScope.vue'
+  import InputAction from '../input/InputAction.vue'
+  import { inputEmbedded, inputHost, type InputVariants } from '../input/input.variants'
+  import TimeField from '../time-field/TimeField.vue'
+  import { dateTimePickerFooter } from './date-time-picker.variants'
+
+  defineOptions({ name: 'HnDateTimePicker', inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<{
+      placeholder?: string
+      min?: string
+      max?: string
+      granularity?: Exclude<TimeGranularity, 'hour'>
+      hourCycle?: 12 | 24
+      minuteStep?: number
+      unavailable?: (date: string) => boolean
+      weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
+      weekdayFormat?: 'narrow' | 'short'
+      fixedWeeks?: boolean
+      clearable?: boolean
+      readonly?: boolean
+      name?: string
+      variant?: InputVariants['variant']
+      size?: InputVariants['size']
+      disabled?: boolean
+      invalid?: boolean
+      class?: string
+    }>(),
+    { granularity: 'minute', clearable: false, fixedWeeks: true },
+  )
+  const emit = defineEmits<{ clear: [] }>()
+
+  const model = defineModel<string | null>({ default: null })
+  const open = defineModel<boolean>('open', { default: false })
+
+  const slots = useSlots()
+  const t = useUiLocale()
+  const outer = injectInputGroup()
+  const host = shallowRef<HTMLElement | null>(null)
+
+  const size = computed(() => (outer ? outer.size.value : props.size))
+  const { invalid, disabled } = useFieldControl({
+    invalid: () => props.invalid || !!outer?.invalid.value,
+    disabled: () => props.disabled || !!outer?.disabled.value,
+  })
+  const calendarSize = computed<CalendarVariants['size']>(() => size.value ?? 'md')
+
+  const parts = computed(() => splitDateTime(model.value))
+  const fallbackTime = computed(
+    () =>
+      splitDateTime(props.placeholder).time ??
+      (props.granularity === 'second' ? '00:00:00' : '00:00'),
+  )
+  const minDate = computed(() => splitDateTime(props.min).date ?? undefined)
+  const maxDate = computed(() => splitDateTime(props.max).date ?? undefined)
+
+  function pickDate(date: string | null) {
+    model.value = joinDateTime(date, parts.value.time ?? fallbackTime.value)
+  }
+
+  function pickTime(time: string | null) {
+    model.value = joinDateTime(parts.value.date, time)
+  }
+
+  function done() {
+    open.value = false
+  }
+</script>
+
+<template>
+  <PopoverRoot v-model:open="open" modal>
+    <PopoverAnchor as-child>
+      <div
+        ref="host"
+        data-hn-date-time-picker
+        :data-invalid="invalid ? '' : undefined"
+        :class="
+          cn(
+            outer ? inputEmbedded() : inputHost({ variant: props.variant, size: props.size }),
+            props.class,
+          )
+        "
+      >
+        <InputGroupScope :size="size" :disabled="disabled" :invalid="invalid">
+          <DateField
+            v-bind="$attrs"
+            :model-value="model"
+            :placeholder="props.placeholder"
+            :min="props.min"
+            :max="props.max"
+            :granularity="props.granularity"
+            :hour-cycle="props.hourCycle"
+            :clearable="props.clearable"
+            :readonly="props.readonly"
+            :name="props.name"
+            @update:model-value="model = $event"
+            @clear="emit('clear')"
+          >
+            <template v-if="slots.leading" #leading>
+              <slot name="leading" />
+            </template>
+          </DateField>
+        </InputGroupScope>
+        <PopoverTrigger as-child>
+          <InputAction :label="t.datePicker.open" :disabled="disabled">
+            <CalendarClock />
+          </InputAction>
+        </PopoverTrigger>
+      </div>
+    </PopoverAnchor>
+    <PopoverPortal>
+      <PopoverContent
+        as-child
+        side="bottom"
+        align="start"
+        :side-offset="8"
+        @open-auto-focus.prevent
+      >
+        <Card :padded="false" :class="datePickerContent()">
+          <Calendar
+            :model-value="parts.date"
+            :placeholder="splitDateTime(props.placeholder).date ?? undefined"
+            :min="minDate"
+            :max="maxDate"
+            :unavailable="props.unavailable"
+            :week-starts-on="props.weekStartsOn"
+            :weekday-format="props.weekdayFormat"
+            :fixed-weeks="props.fixedWeeks"
+            :size="calendarSize"
+            :readonly="props.readonly"
+            autofocus
+            @update:model-value="pickDate"
+          />
+          <div :class="dateTimePickerFooter()">
+            <TimeField
+              :model-value="parts.time"
+              :placeholder="fallbackTime"
+              :granularity="props.granularity"
+              :hour-cycle="props.hourCycle"
+              :minute-step="props.minuteStep"
+              :size="calendarSize"
+              :readonly="props.readonly"
+              :aria-label="t.dateTimePicker.time"
+              @update:model-value="pickTime"
+            />
+            <Button :size="calendarSize" @click="done">{{ t.common.confirm }}</Button>
+          </div>
+        </Card>
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
+</template>

package/src/components/date-time-picker/date-time-picker.variants.ts

@@ -0,0 +1,5 @@
+import { tv } from '../../lib/tv'
+
+export const dateTimePickerFooter = tv({
+  base: 'mt-2 flex items-center justify-between gap-2',
+})

package/src/components/description-list/DescriptionDetails.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+
+  defineOptions({ name: 'HnDescriptionDetails' })
+
+  const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <dd :class="cn(props.class)">
+    <slot />
+  </dd>
+</template>

package/src/components/description-list/DescriptionList.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+
+  defineOptions({ name: 'HnDescriptionList' })
+
+  const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <dl :class="cn('hn-dl', props.class)">
+    <slot />
+  </dl>
+</template>