@hina-ui/vue 1.0.0

package/src/components/range-calendar/RangeCalendar.vue

@@ -0,0 +1,184 @@
+<script setup lang="ts">
+  import { computed, shallowRef, watch } from 'vue'
+  import {
+    RangeCalendarCell,
+    RangeCalendarCellTrigger,
+    RangeCalendarGrid,
+    RangeCalendarGridBody,
+    RangeCalendarGridHead,
+    RangeCalendarGridRow,
+    RangeCalendarHeadCell,
+    RangeCalendarNext,
+    RangeCalendarPrev,
+    RangeCalendarRoot,
+    type DateRange,
+  } from 'reka-ui'
+  import { getLocalTimeZone, today, type DateValue } from '@internationalized/date'
+  import { cn } from '../../lib/cn'
+  import {
+    formatDateRange,
+    formatDateValue,
+    parseDateRange,
+    parseDateValue,
+    type DateRangeValue,
+  } from '../../lib/date'
+  import { useUiLocale } from '../../locale'
+  import CalendarHeader from '../calendar/CalendarHeader.vue'
+  import CalendarLevels from '../calendar/CalendarLevels.vue'
+  import { useCalendarLevels } from '../calendar/composables/useCalendarLevels'
+  import { formatMonthHeading } from '../calendar/utils/format'
+  import {
+    calendarGrid,
+    calendarHeadCell,
+    calendarRoot,
+    type CalendarVariants,
+  } from '../calendar/calendar.variants'
+  import { useRangeAnchor } from './composables/useRangeAnchor'
+  import { rangeCalendarCell, rangeCalendarDay } from './range-calendar.variants'
+  import { maximumDaysMatcher } from './utils/limit'
+
+  defineOptions({ name: 'HnRangeCalendar' })
+
+  const props = withDefaults(
+    defineProps<{
+      min?: string
+      max?: string
+      maximumDays?: number
+      unavailable?: (date: string) => boolean
+      weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
+      weekdayFormat?: 'narrow' | 'short'
+      fixedWeeks?: boolean
+      size?: CalendarVariants['size']
+      autofocus?: boolean
+      readonly?: boolean
+      disabled?: boolean
+      class?: string
+    }>(),
+    { weekdayFormat: 'narrow', fixedWeeks: true, size: 'md' },
+  )
+
+  const model = defineModel<DateRangeValue | null>({ default: null })
+  const shown = defineModel<string>('placeholder')
+
+  const t = useUiLocale()
+  const root = shallowRef<{ $el: HTMLElement } | null>(null)
+
+  const value = computed(() => parseDateRange(model.value))
+  const placeholder = computed(() => parseDateValue(shown.value))
+  const minValue = computed(() => parseDateValue(props.min))
+  const maxValue = computed(() => parseDateValue(props.max))
+  const weekStartsOn = computed(() => props.weekStartsOn ?? t.value.calendar.weekStartsOn)
+  const unavailable = computed(() =>
+    props.unavailable ? (date: DateValue) => props.unavailable!(formatDateValue(date)) : undefined,
+  )
+  const { anchor, onStartValue } = useRangeAnchor(computed(() => value.value.start))
+  const limited = computed(() =>
+    maximumDaysMatcher(anchor.value, value.value.end, props.maximumDays),
+  )
+  function isDateDisabled(date: DateValue) {
+    return limited.value ? limited.value(date) : false
+  }
+
+  const { level, view, pickMonth, pickYear, followYear, back, onEntered } = useCalendarLevels(
+    value.value.start ?? placeholder.value ?? today(getLocalTimeZone()),
+    root,
+  )
+  watch(placeholder, next => {
+    if (next && next.compare(view.value) !== 0) view.value = next
+  })
+  watch(view, next => {
+    shown.value = formatDateValue(next)
+  })
+
+  const monthHeading = computed(() => formatMonthHeading(t.value.tag, view.value))
+
+  function update(next: DateRange) {
+    model.value = formatDateRange(next)
+  }
+</script>
+
+<template>
+  <RangeCalendarRoot
+    ref="root"
+    v-slot="{ weekDays, grid }"
+    data-hn-range-calendar
+    :data-level="level"
+    :model-value="value"
+    :placeholder="view"
+    :min-value="minValue"
+    :max-value="maxValue"
+    :is-date-disabled="isDateDisabled"
+    :is-date-unavailable="unavailable"
+    :week-starts-on="weekStartsOn"
+    :weekday-format="props.weekdayFormat"
+    :fixed-weeks="props.fixedWeeks"
+    :initial-focus="props.autofocus"
+    :locale="t.tag"
+    :calendar-label="t.calendar.label"
+    :disabled="props.disabled"
+    :readonly="props.readonly"
+    :class="cn(calendarRoot({ size: props.size }), props.class)"
+    @update:model-value="update"
+    @update:start-value="onStartValue"
+    @update:placeholder="view = $event"
+  >
+    <CalendarLevels
+      v-model:level="level"
+      :view="view"
+      :size="props.size"
+      :min-value="minValue"
+      :max-value="maxValue"
+      :disabled="props.disabled"
+      @pick-month="pickMonth"
+      @pick-year="pickYear"
+      @follow-year="followYear"
+      @back="back"
+      @entered="onEntered"
+    >
+      <CalendarHeader
+        :prev="RangeCalendarPrev"
+        :next="RangeCalendarNext"
+        :prev-label="t.calendar.prev"
+        :next-label="t.calendar.next"
+        :heading="monthHeading"
+        :pick-label="t.calendar.pickMonth"
+        :size="props.size"
+        :disabled="props.disabled"
+        @pick="level = 'month'"
+      />
+      <RangeCalendarGrid
+        v-for="month in grid"
+        :key="month.value.toString()"
+        :class="calendarGrid()"
+      >
+        <RangeCalendarGridHead>
+          <RangeCalendarGridRow>
+            <RangeCalendarHeadCell
+              v-for="day in weekDays"
+              :key="day"
+              :class="calendarHeadCell({ size: props.size })"
+            >
+              {{ day }}
+            </RangeCalendarHeadCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridHead>
+        <RangeCalendarGridBody>
+          <RangeCalendarGridRow v-for="(week, index) in month.rows" :key="index">
+            <RangeCalendarCell
+              v-for="day in week"
+              :key="day.toString()"
+              :date="day"
+              :class="rangeCalendarCell()"
+            >
+              <RangeCalendarCellTrigger
+                :day="day"
+                :month="month.value"
+                :class="rangeCalendarDay()"
+              />
+            </RangeCalendarCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridBody>
+      </RangeCalendarGrid>
+    </CalendarLevels>
+  </RangeCalendarRoot>
+</template>

package/src/components/range-calendar/composables/useRangeAnchor.ts

@@ -0,0 +1,16 @@
+import { shallowRef, watch, type Ref } from 'vue'
+import type { DateValue } from '@internationalized/date'
+
+export function useRangeAnchor(start: Ref<DateValue | undefined>) {
+  const anchor = shallowRef<DateValue | undefined>(start.value)
+
+  watch(start, next => {
+    anchor.value = next
+  })
+
+  function onStartValue(next: DateValue | undefined) {
+    anchor.value = next
+  }
+
+  return { anchor, onStartValue }
+}

package/src/components/range-calendar/range-calendar.variants.ts

@@ -0,0 +1,24 @@
+import { tv } from '../../lib/tv'
+import { calendarCell, calendarDay } from '../calendar/calendar.variants'
+
+export const rangeCalendarCell = tv({
+  extend: calendarCell,
+  base: [
+    'first:rounded-s-md last:rounded-e-md',
+    'has-[[data-selected]]:bg-accent-soft has-[[data-highlighted]]:bg-accent-soft',
+    'has-[[data-selection-start]]:rounded-s-md has-[[data-highlighted-start]]:rounded-s-md',
+    'has-[[data-selection-end]]:rounded-e-md has-[[data-highlighted-end]]:rounded-e-md',
+  ],
+})
+
+export const rangeCalendarDay = tv({
+  extend: calendarDay,
+  base: [
+    'data-[highlighted]:text-accent-text',
+    'data-[highlighted]:not-[[data-highlighted-end]]:[--hn-state-hover-opacity:0]',
+    'data-[selected]:not-[[data-selection-start]]:not-[[data-selection-end]]:bg-transparent',
+    'data-[selected]:not-[[data-selection-start]]:not-[[data-selection-end]]:text-accent-text',
+    'data-[selected]:not-[[data-selection-start]]:not-[[data-selection-end]]:font-normal',
+    'data-[selected]:[--hn-state-selected-opacity:0]',
+  ],
+})

package/src/components/range-calendar/utils/limit.ts

@@ -0,0 +1,11 @@
+import type { DateValue } from '@internationalized/date'
+
+export function maximumDaysMatcher(
+  start: DateValue | undefined,
+  end: DateValue | undefined,
+  maximumDays: number | undefined,
+) {
+  if (!start || end || !maximumDays) return undefined
+  const reach = maximumDays - 1
+  return (date: DateValue) => Math.abs(date.compare(start)) > reach
+}

package/src/components/range-slider/RangeSlider.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+  import { SliderRoot, SliderTrack } from 'reka-ui'
+  import { computed, toRef } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { useFieldControl } from '../form-field/context'
+  import { useUiLocale } from '../../locale'
+  import { useSliderChrome } from '../slider/composables/useSliderChrome'
+  import SliderHandle from '../slider/SliderHandle.vue'
+  import SliderMarks from '../slider/SliderMarks.vue'
+  import {
+    slider,
+    sliderRangeBetween,
+    sliderRoot,
+    sliderTrack,
+    type SliderVariants,
+  } from '../slider/slider.variants'
+
+  defineOptions({ name: 'HnRangeSlider', inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<{
+      min?: number
+      max?: number
+      step?: number
+      minSteps?: number
+      marks?: Array<{ value: number; label?: string }>
+      label?: 'auto' | 'always' | 'none'
+      format?: (value: number) => string
+      size?: SliderVariants['size']
+      disabled?: boolean
+      class?: string
+    }>(),
+    { min: 0, max: 100, step: 1, minSteps: 0, label: 'auto' },
+  )
+
+  const emit = defineEmits<{ commit: [value: [number, number]] }>()
+
+  const model = defineModel<[number, number]>()
+
+  const t = useUiLocale()
+  const { labelledBy, invalid, disabled, describedBy } = useFieldControl({
+    disabled: () => props.disabled,
+  })
+  const { dragging, ring, labelOpen, onPointerDown, listeners } = useSliderChrome(
+    disabled,
+    toRef(props, 'label'),
+  )
+
+  const values = computed<[number, number]>(() => model.value ?? [props.min, props.max])
+  const hasMarkLabels = computed(() => !!props.marks?.some(mark => mark.label))
+
+  function fraction(value: number) {
+    const span = props.max - props.min
+    return span > 0 ? (value - props.min) / span : 0
+  }
+
+  function text(value: number) {
+    return props.format ? props.format(value) : new Intl.NumberFormat(t.value.tag).format(value)
+  }
+
+  const position = computed(() => ({
+    '--hn-slider-p': String(fraction(values.value[0])),
+    '--hn-slider-q': String(fraction(values.value[1])),
+  }))
+</script>
+
+<template>
+  <span
+    data-hn-range-slider
+    data-hn-state-group
+    role="group"
+    v-bind="$attrs"
+    :aria-labelledby="labelledBy"
+    :aria-describedby="describedBy"
+    :aria-invalid="invalid || undefined"
+    :data-disabled="disabled ? '' : undefined"
+    :data-dragging="dragging ? '' : undefined"
+    :style="position"
+    :class="cn(slider({ size: props.size }), props.class)"
+    @pointerdown.capture="onPointerDown"
+    v-on="listeners"
+  >
+    <SliderRoot
+      :model-value="values"
+      :min="props.min"
+      :max="props.max"
+      :step="props.step"
+      :min-steps-between-thumbs="props.minSteps"
+      :disabled="disabled"
+      :class="sliderRoot()"
+      @update:model-value="value => (model = [value![0]!, value![1]!])"
+      @value-commit="value => emit('commit', [value[0]!, value[1]!])"
+    >
+      <SliderTrack :class="sliderTrack()">
+        <span :class="sliderRangeBetween()" />
+      </SliderTrack>
+      <SliderMarks
+        v-if="props.marks?.length"
+        :marks="props.marks"
+        :min="props.min"
+        :max="props.max"
+      />
+      <SliderHandle
+        :aria-label="t.slider.minimum"
+        :style="{ '--hn-slider-p': String(fraction(values[0])) }"
+        :text="text(values[0])"
+        :open="labelOpen"
+        :ring="ring"
+        :tooltip="props.label !== 'none'"
+      />
+      <SliderHandle
+        :aria-label="t.slider.maximum"
+        :style="{ '--hn-slider-p': String(fraction(values[1])) }"
+        :text="text(values[1])"
+        :open="labelOpen"
+        :ring="ring"
+        :tooltip="props.label !== 'none'"
+      />
+    </SliderRoot>
+    <SliderMarks
+      v-if="hasMarkLabels"
+      :marks="props.marks!"
+      :min="props.min"
+      :max="props.max"
+      labels
+    />
+  </span>
+</template>

package/src/components/rating/Rating.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+  import { RatingItem, RatingItemIndicator, RatingRoot } from 'reka-ui'
+  import { Star } from '@lucide/vue'
+  import { cn } from '../../lib/cn'
+  import { useFieldControl } from '../form-field/context'
+  import { useUiLocale } from '../../locale'
+  import {
+    ratingFill,
+    ratingItem,
+    ratingRoot,
+    ratingStar,
+    ratingStep,
+    type RatingVariants,
+  } from './rating.variants'
+  import { starFill } from './utils/fill'
+
+  defineOptions({ name: 'HnRating', inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<{
+      max?: number
+      step?: 1 | 0.5
+      clearable?: boolean
+      readonly?: boolean
+      name?: string
+      size?: RatingVariants['size']
+      disabled?: boolean
+      class?: string
+    }>(),
+    { max: 5, step: 1, clearable: true },
+  )
+
+  const model = defineModel<number>({ default: 0 })
+
+  const t = useUiLocale()
+
+  const { labelledBy, invalid, disabled, describedBy } = useFieldControl({
+    disabled: () => props.disabled,
+  })
+</script>
+
+<template>
+  <span
+    v-if="props.readonly"
+    v-bind="$attrs"
+    data-hn-rating
+    data-readonly
+    role="img"
+    :aria-label="t.rating.label(model, props.max)"
+    :class="cn(ratingRoot({ size: props.size }), props.class)"
+  >
+    <span v-for="index in props.max" :key="index" :class="ratingItem()">
+      <Star :class="ratingStar()" />
+      <span :class="ratingFill()" :style="{ width: starFill(model, index) }">
+        <Star :class="ratingStar({ active: true })" />
+      </span>
+    </span>
+  </span>
+  <RatingRoot
+    v-else
+    v-slot="{ items }"
+    v-bind="$attrs"
+    data-hn-rating
+    :data-disabled="disabled ? '' : undefined"
+    :data-invalid="invalid ? '' : undefined"
+    :aria-labelledby="labelledBy"
+    :aria-describedby="describedBy"
+    :aria-invalid="invalid || undefined"
+    :model-value="model"
+    :length="props.max"
+    :step="props.step"
+    :clearable="props.clearable"
+    hoverable
+    :disabled="disabled"
+    :name="props.name"
+    :class="cn(ratingRoot({ size: props.size }), props.class)"
+    @update:model-value="model = $event"
+  >
+    <RatingItem
+      v-for="item in items"
+      :key="item"
+      v-slot="{ steps }"
+      :item="item"
+      :class="ratingItem()"
+    >
+      <RatingItemIndicator
+        v-for="step in steps"
+        :key="step"
+        :step="step"
+        :aria-label="t.rating.star(step)"
+        :class="ratingStep()"
+      >
+        <Star :class="ratingStar()" />
+      </RatingItemIndicator>
+    </RatingItem>
+  </RatingRoot>
+</template>

package/src/components/rating/rating.variants.ts

@@ -0,0 +1,46 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const ratingRoot = tv({
+  base: 'inline-flex items-center gap-0.5 data-disabled:pointer-events-none data-disabled:opacity-50',
+  variants: {
+    size: {
+      sm: '[--hn-rating-size:--spacing(4)]',
+      md: '[--hn-rating-size:--spacing(5)]',
+      lg: '[--hn-rating-size:--spacing(6)]',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export const ratingItem = tv({
+  base: [
+    'relative inline-flex size-[var(--hn-rating-size)] shrink-0 rounded-xs',
+    'has-[:focus-visible]:[outline:var(--hn-focus-ring-width)_solid_var(--hn-focus-ring)] has-[:focus-visible]:[outline-offset:var(--hn-focus-ring-offset)]',
+  ],
+})
+
+export const ratingStep = tv({
+  base: [
+    'group/hn-rating-step absolute inset-y-0 start-0 cursor-pointer overflow-hidden outline-none',
+    '[width:var(--reka-rating-item-step-width)] [opacity:var(--reka-rating-item-step-opacity)] [z-index:var(--reka-rating-item-step-z-index)]',
+    'disabled:cursor-not-allowed',
+  ],
+})
+
+export const ratingStar = tv({
+  base: 'text-line-strong size-[var(--hn-rating-size)] shrink-0 fill-transparent transition-[color,fill] duration-(--hn-duration-fast) ease-(--hn-ease-enter)',
+  variants: {
+    active: {
+      true: 'text-warning fill-current',
+      false:
+        'group-data-[state=active]/hn-rating-step:text-warning group-data-[state=active]/hn-rating-step:fill-current',
+    },
+  },
+  defaultVariants: { active: false },
+})
+
+export const ratingFill = tv({
+  base: 'absolute inset-y-0 start-0 overflow-hidden',
+})
+
+export type RatingVariants = VariantProps<typeof ratingRoot>

package/src/components/rating/utils/fill.ts

@@ -0,0 +1,4 @@
+export function starFill(value: number, index: number) {
+  const portion = Math.min(Math.max(value - (index - 1), 0), 1)
+  return `${Math.round(portion * 1000) / 10}%`
+}

package/src/components/result/Result.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+  import { CircleCheck, CircleX, Info, TriangleAlert } from '@lucide/vue'
+  import { useSlots } from 'vue'
+  import Empty from '../empty/Empty.vue'
+  import { resultIcon, type ResultVariants } from './result.variants'
+
+  defineOptions({ name: 'HnResult' })
+
+  const props = withDefaults(
+    defineProps<{
+      status?: ResultVariants['status']
+      title?: string
+      description?: string
+      size?: ResultVariants['size']
+      class?: string
+    }>(),
+    { status: 'info', size: 'md' },
+  )
+
+  const slots = useSlots()
+
+  const icons = {
+    success: CircleCheck,
+    error: CircleX,
+    warning: TriangleAlert,
+    info: Info,
+  }
+</script>
+
+<template>
+  <Empty
+    data-hn-result
+    :data-status="props.status"
+    :title="props.title"
+    :description="props.description"
+    :size="props.size"
+    :class="props.class"
+  >
+    <template #icon>
+      <slot name="icon">
+        <span :class="resultIcon({ status: props.status, size: props.size })">
+          <component :is="icons[props.status]" />
+        </span>
+      </slot>
+    </template>
+    <slot />
+    <template v-if="slots.actions" #actions>
+      <slot name="actions" />
+    </template>
+  </Empty>
+</template>

package/src/components/result/result.variants.ts

@@ -0,0 +1,24 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const resultIcon = tv({
+  base: 'flex shrink-0 items-center justify-center rounded-full [&_svg]:shrink-0',
+  variants: {
+    status: {
+      success: 'bg-success-soft text-success-text',
+      error: 'bg-danger-soft text-danger-text',
+      warning: 'bg-warning-soft text-warning-text',
+      info: 'bg-info-soft text-info-text',
+    },
+    size: {
+      sm: 'size-12 [&_svg]:size-6',
+      md: 'size-14 [&_svg]:size-7',
+      lg: 'size-18 [&_svg]:size-9',
+    },
+  },
+  defaultVariants: {
+    status: 'info',
+    size: 'md',
+  },
+})
+
+export type ResultVariants = VariantProps<typeof resultIcon>

package/src/components/ring-progress/RingProgress.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+  import { ProgressRoot } from 'reka-ui'
+  import { computed, useSlots } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { useProgressValue, type ProgressFormat } from '../progress/composables/useProgressValue'
+  import {
+    ringProgress,
+    ringProgressArc,
+    ringProgressCenter,
+    ringProgressLabel,
+    ringProgressRoot,
+    ringProgressSvg,
+    ringProgressTrack,
+    type RingProgressVariants,
+  } from './ring-progress.variants'
+
+  defineOptions({ name: 'HnRingProgress', inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<{
+      value?: number | null
+      max?: number
+      label?: string
+      showValue?: boolean
+      format?: ProgressFormat
+      tone?: RingProgressVariants['tone']
+      size?: RingProgressVariants['size']
+      class?: string
+    }>(),
+    { value: null, max: 100, showValue: false },
+  )
+
+  const slots = useSlots()
+  const { current, text, name } = useProgressValue({
+    value: () => props.value,
+    max: () => props.max,
+    label: () => props.label,
+    format: () => props.format,
+  })
+  const offset = computed(() => {
+    if (current.value === null) return 75
+    return props.max > 0 ? 100 - (current.value * 100) / props.max : 100
+  })
+</script>
+
+<template>
+  <div data-hn-ring-progress :class="cn(ringProgress(), props.class)">
+    <ProgressRoot
+      v-bind="$attrs"
+      :model-value="current"
+      :max="props.max"
+      :get-value-label="() => name"
+      :get-value-text="props.format ? () => text : undefined"
+      :class="ringProgressRoot({ size: props.size })"
+    >
+      <svg viewBox="0 0 100 100" aria-hidden="true" :class="ringProgressSvg()">
+        <circle cx="50" cy="50" r="45" stroke-width="10" :class="ringProgressTrack()" />
+        <circle
+          cx="50"
+          cy="50"
+          r="45"
+          stroke-width="10"
+          pathLength="100"
+          stroke-dasharray="100"
+          :stroke-dashoffset="offset"
+          :stroke-linecap="offset < 100 ? 'round' : undefined"
+          :class="ringProgressArc({ tone: props.tone })"
+        />
+      </svg>
+      <div v-if="slots.default || (props.showValue && text)" :class="ringProgressCenter()">
+        <slot>{{ text }}</slot>
+      </div>
+    </ProgressRoot>
+    <span v-if="props.label" :class="ringProgressLabel()">{{ props.label }}</span>
+  </div>
+</template>