@hina-ui/vue 1.0.0

package/src/components/calendar/CalendarHeader.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+  import type { Component } from 'vue'
+  import { ChevronLeft, ChevronRight } from '@lucide/vue'
+  import Button from '../button/Button.vue'
+  import IconButton from '../icon-button/IconButton.vue'
+  import { calendarHeader, calendarHeading, type CalendarVariants } from './calendar.variants'
+
+  defineOptions({ name: 'HnCalendarHeader' })
+
+  const props = defineProps<{
+    prev: Component
+    next: Component
+    prevLabel: string
+    nextLabel: string
+    heading: string
+    pickLabel?: string
+    size?: CalendarVariants['size']
+    disabled?: boolean
+  }>()
+  const emit = defineEmits<{ pick: [] }>()
+</script>
+
+<template>
+  <div :class="calendarHeader()">
+    <component :is="props.prev" as-child>
+      <IconButton :label="props.prevLabel" :size="props.size">
+        <ChevronLeft />
+      </IconButton>
+    </component>
+    <Button
+      v-if="props.pickLabel"
+      variant="ghost"
+      tone="neutral"
+      :size="props.size"
+      :class="calendarHeading()"
+      :aria-label="props.pickLabel"
+      :disabled="props.disabled"
+      @click="emit('pick')"
+    >
+      {{ props.heading }}
+    </Button>
+    <span v-else :class="calendarHeading({ still: true })">
+      {{ props.heading }}
+    </span>
+    <component :is="props.next" as-child>
+      <IconButton :label="props.nextLabel" :size="props.size">
+        <ChevronRight />
+      </IconButton>
+    </component>
+  </div>
+</template>

package/src/components/calendar/CalendarLevels.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import {
+    MonthPickerCell,
+    MonthPickerCellTrigger,
+    MonthPickerGrid,
+    MonthPickerGridBody,
+    MonthPickerGridRow,
+    MonthPickerNext,
+    MonthPickerPrev,
+    MonthPickerRoot,
+    YearPickerCell,
+    YearPickerCellTrigger,
+    YearPickerGrid,
+    YearPickerGridBody,
+    YearPickerGridRow,
+    YearPickerNext,
+    YearPickerPrev,
+    YearPickerRoot,
+  } from 'reka-ui'
+  import type { DateValue } from '@internationalized/date'
+  import { useUiLocale } from '../../locale'
+  import CalendarHeader from './CalendarHeader.vue'
+  import type { CalendarLevel } from './composables/useCalendarLevels'
+  import {
+    formatDigits,
+    formatMonthName,
+    formatYearHeading,
+    formatYearsHeading,
+  } from './utils/format'
+  import {
+    calendarGrid,
+    calendarPicker,
+    calendarUnit,
+    calendarUnitCell,
+    calendarUnits,
+    type CalendarVariants,
+  } from './calendar.variants'
+
+  defineOptions({ name: 'HnCalendarLevels' })
+
+  type Picked = DateValue | DateValue[] | undefined
+
+  const props = defineProps<{
+    view: DateValue
+    size?: CalendarVariants['size']
+    minValue?: DateValue
+    maxValue?: DateValue
+    disabled?: boolean
+  }>()
+  const emit = defineEmits<{
+    pickMonth: [value: Picked]
+    pickYear: [value: Picked]
+    followYear: [date: DateValue]
+    back: []
+    entered: []
+  }>()
+
+  const level = defineModel<CalendarLevel>('level', { required: true })
+
+  const t = useUiLocale()
+  const yearHeading = computed(() => formatYearHeading(t.value.tag, props.view))
+</script>
+
+<template>
+  <Transition
+    mode="out-in"
+    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"
+    @after-enter="emit('entered')"
+  >
+    <div v-if="level === 'day'" key="day" :class="calendarPicker()">
+      <slot />
+    </div>
+
+    <MonthPickerRoot
+      v-else-if="level === 'month'"
+      key="month"
+      v-slot="{ grid: months }"
+      :placeholder="props.view"
+      :model-value="props.view"
+      :min-value="props.minValue"
+      :max-value="props.maxValue"
+      :locale="t.tag"
+      :calendar-label="t.calendar.label"
+      :disabled="props.disabled"
+      prevent-deselect
+      initial-focus
+      :class="calendarPicker()"
+      @update:model-value="emit('pickMonth', $event)"
+      @update:placeholder="emit('followYear', $event)"
+      @keydown.esc.stop.prevent="emit('back')"
+    >
+      <CalendarHeader
+        :prev="MonthPickerPrev"
+        :next="MonthPickerNext"
+        :prev-label="t.calendar.prevYear"
+        :next-label="t.calendar.nextYear"
+        :heading="yearHeading"
+        :pick-label="t.calendar.pickYear"
+        :size="props.size"
+        :disabled="props.disabled"
+        @pick="level = 'year'"
+      />
+      <div :class="calendarUnits()">
+        <MonthPickerGrid :class="calendarGrid({ units: true })">
+          <MonthPickerGridBody>
+            <MonthPickerGridRow v-for="(row, index) in months.rows" :key="index">
+              <MonthPickerCell
+                v-for="month in row"
+                :key="month.toString()"
+                :date="month"
+                :class="calendarUnitCell()"
+              >
+                <MonthPickerCellTrigger :month="month" :class="calendarUnit()">
+                  {{ formatMonthName(t.tag, month) }}
+                </MonthPickerCellTrigger>
+              </MonthPickerCell>
+            </MonthPickerGridRow>
+          </MonthPickerGridBody>
+        </MonthPickerGrid>
+      </div>
+    </MonthPickerRoot>
+
+    <YearPickerRoot
+      v-else
+      key="year"
+      v-slot="{ grid: years }"
+      :placeholder="props.view"
+      :model-value="props.view"
+      :min-value="props.minValue"
+      :max-value="props.maxValue"
+      :locale="t.tag"
+      :calendar-label="t.calendar.label"
+      :disabled="props.disabled"
+      :years-per-page="12"
+      prevent-deselect
+      initial-focus
+      :class="calendarPicker()"
+      @update:model-value="emit('pickYear', $event)"
+      @update:placeholder="emit('followYear', $event)"
+      @keydown.esc.stop.prevent="emit('back')"
+    >
+      <CalendarHeader
+        :prev="YearPickerPrev"
+        :next="YearPickerNext"
+        :prev-label="t.calendar.prevYears"
+        :next-label="t.calendar.nextYears"
+        :heading="formatYearsHeading(t.tag, years.cells)"
+        :size="props.size"
+      />
+      <div :class="calendarUnits()">
+        <YearPickerGrid :class="calendarGrid({ units: true })">
+          <YearPickerGridBody>
+            <YearPickerGridRow v-for="(row, index) in years.rows" :key="index">
+              <YearPickerCell
+                v-for="year in row"
+                :key="year.toString()"
+                :date="year"
+                :class="calendarUnitCell()"
+              >
+                <YearPickerCellTrigger :year="year" :class="calendarUnit()">
+                  {{ formatDigits(t.tag, year.year) }}
+                </YearPickerCellTrigger>
+              </YearPickerCell>
+            </YearPickerGridRow>
+          </YearPickerGridBody>
+        </YearPickerGrid>
+      </div>
+    </YearPickerRoot>
+  </Transition>
+</template>

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

@@ -0,0 +1,83 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const calendarRoot = tv({
+  base: 'text-fg inline-flex flex-col select-none [--hn-calendar-row-gap:--spacing(0.5)] data-disabled:pointer-events-none data-disabled:opacity-50',
+  variants: {
+    size: {
+      sm: 'text-sm [--hn-calendar-cell:var(--hn-control-h-sm)]',
+      md: 'text-base [--hn-calendar-cell:var(--hn-control-h-md)]',
+      lg: 'text-md [--hn-calendar-cell:var(--hn-control-h-lg)]',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export const calendarPicker = tv({
+  base: 'flex w-[calc(7*var(--hn-calendar-cell))] flex-col gap-2 outline-none',
+})
+
+export const calendarHeader = tv({
+  base: 'flex items-center justify-between gap-2',
+})
+
+export const calendarHeading = tv({
+  base: 'min-w-0 flex-1 justify-center font-medium whitespace-nowrap tabular-nums',
+  variants: {
+    still: {
+      true: 'inline-flex h-[var(--hn-calendar-cell)] items-center px-[var(--hn-control-px-sm)]',
+    },
+  },
+})
+
+export const calendarGrid = tv({
+  base: 'w-full border-separate [border-spacing:0_var(--hn-calendar-row-gap)]',
+  variants: {
+    units: {
+      true: 'table-fixed border-spacing-0',
+    },
+  },
+})
+
+export const calendarUnits = tv({
+  base: 'flex h-[calc(7*var(--hn-calendar-cell)+8*var(--hn-calendar-row-gap))] flex-col justify-center',
+})
+
+export const calendarHeadCell = tv({
+  base: 'text-muted size-[var(--hn-calendar-cell)] p-0 text-center align-middle font-normal',
+  variants: {
+    size: {
+      sm: 'text-xs',
+      md: 'text-sm',
+      lg: 'text-sm',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export const calendarCell = tv({
+  base: 'p-0 text-center align-middle',
+})
+
+export const calendarDay = tv({
+  base: [
+    'hn-interactive hn-state-layer relative inline-flex size-[var(--hn-calendar-cell)] items-center justify-center rounded-md tabular-nums',
+    'data-[outside-view]:text-faint data-[today]:not-[[data-selected]]:text-accent-text data-[today]:not-[[data-selected]]:font-semibold',
+    'data-[selected]:bg-accent data-[selected]:text-accent-on data-[selected]:font-medium',
+    'data-disabled:text-faint data-disabled:pointer-events-none data-[unavailable]:text-faint data-[unavailable]:line-through data-[unavailable]:pointer-events-none',
+  ],
+})
+
+export const calendarUnitCell = tv({
+  base: 'p-1 align-middle',
+})
+
+export const calendarUnit = tv({
+  base: [
+    'hn-interactive hn-state-layer relative flex h-[var(--hn-calendar-cell)] w-full items-center justify-center rounded-md whitespace-nowrap tabular-nums',
+    'data-[today]:not-[[data-selected]]:text-accent-text data-[today]:not-[[data-selected]]:font-semibold',
+    'data-[selected]:bg-accent data-[selected]:text-accent-on data-[selected]:font-medium',
+    'data-disabled:text-faint data-disabled:pointer-events-none data-[unavailable]:text-faint data-[unavailable]:pointer-events-none',
+  ],
+})
+
+export type CalendarVariants = VariantProps<typeof calendarRoot>

package/src/components/calendar/composables/useCalendarLevels.ts

@@ -0,0 +1,52 @@
+import { ref, shallowRef, type Ref } from 'vue'
+import type { DateValue } from '@internationalized/date'
+
+export type CalendarLevel = 'day' | 'month' | 'year'
+
+export function useCalendarLevels(initial: DateValue, root: Ref<{ $el: HTMLElement } | null>) {
+  const level = ref<CalendarLevel>('day')
+  const view = shallowRef<DateValue>(initial)
+  const returning = ref(false)
+
+  function first(next: DateValue | DateValue[] | undefined) {
+    return Array.isArray(next) ? next[0] : next
+  }
+
+  function toDay() {
+    returning.value = true
+    level.value = 'day'
+  }
+
+  function onEntered() {
+    if (level.value !== 'day' || !returning.value) return
+    returning.value = false
+    root.value?.$el
+      .querySelector<HTMLElement>('[data-reka-calendar-cell-trigger][tabindex="0"]')
+      ?.focus()
+  }
+
+  function pickMonth(next: DateValue | DateValue[] | undefined) {
+    const picked = first(next)
+    if (!picked) return
+    view.value = view.value.set({ year: picked.year, month: picked.month })
+    toDay()
+  }
+
+  function pickYear(next: DateValue | DateValue[] | undefined) {
+    const picked = first(next)
+    if (!picked) return
+    view.value = view.value.set({ year: picked.year })
+    level.value = 'month'
+  }
+
+  function followYear(date: DateValue) {
+    view.value = view.value.set({ year: date.year })
+  }
+
+  function back() {
+    if (level.value === 'year') level.value = 'month'
+    else if (level.value === 'month') toDay()
+  }
+
+  return { level, view, pickMonth, pickYear, followYear, back, onEntered }
+}

package/src/components/calendar/utils/format.ts

@@ -0,0 +1,23 @@
+import { getLocalTimeZone, type DateValue } from '@internationalized/date'
+
+const local = (date: DateValue) => date.toDate(getLocalTimeZone())
+
+export function formatMonthHeading(tag: string, date: DateValue) {
+  return new Intl.DateTimeFormat(tag, { year: 'numeric', month: 'long' }).format(local(date))
+}
+
+export function formatYearHeading(tag: string, date: DateValue) {
+  return new Intl.DateTimeFormat(tag, { year: 'numeric' }).format(local(date))
+}
+
+export function formatMonthName(tag: string, date: DateValue) {
+  return new Intl.DateTimeFormat(tag, { month: 'short' }).format(local(date))
+}
+
+export function formatDigits(tag: string, value: number) {
+  return new Intl.NumberFormat(tag, { useGrouping: false }).format(value)
+}
+
+export function formatYearsHeading(tag: string, cells: DateValue[]) {
+  return `${formatDigits(tag, cells[0]!.year)} – ${formatDigits(tag, cells.at(-1)!.year)}`
+}

package/src/components/callout/Callout.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+  import { callout, calloutIcon, type CalloutVariants } from './callout.variants'
+  import { calloutIcons } from './icons'
+
+  defineOptions({ name: 'HnCallout' })
+
+  const props = withDefaults(
+    defineProps<{
+      tone?: CalloutVariants['tone']
+      title?: string
+      icon?: boolean
+      class?: string
+    }>(),
+    { tone: 'neutral', icon: true },
+  )
+</script>
+
+<template>
+  <div role="note" :class="cn(callout({ tone: props.tone }), props.class)">
+    <slot name="icon">
+      <component
+        :is="calloutIcons[props.tone]"
+        v-if="props.icon"
+        :class="calloutIcon({ tone: props.tone })"
+        aria-hidden="true"
+      />
+    </slot>
+    <div class="flex min-w-0 flex-1 flex-col gap-1">
+      <p v-if="props.title" class="text-fg font-medium">{{ props.title }}</p>
+      <slot />
+    </div>
+  </div>
+</template>

package/src/components/callout/callout.variants.ts

@@ -0,0 +1,33 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const callout = tv({
+  base: 'flex gap-3 rounded-lg p-4',
+  variants: {
+    tone: {
+      neutral: 'bg-subtle',
+      accent: 'bg-accent-soft',
+      info: 'bg-info-soft',
+      success: 'bg-success-soft',
+      warning: 'bg-warning-soft',
+      danger: 'bg-danger-soft',
+    },
+  },
+  defaultVariants: { tone: 'neutral' },
+})
+
+export const calloutIcon = tv({
+  base: 'mt-0.5 size-5 shrink-0',
+  variants: {
+    tone: {
+      neutral: 'text-muted',
+      accent: 'text-accent-text',
+      info: 'text-info-text',
+      success: 'text-success-text',
+      warning: 'text-warning-text',
+      danger: 'text-danger-text',
+    },
+  },
+  defaultVariants: { tone: 'neutral' },
+})
+
+export type CalloutVariants = VariantProps<typeof callout>

package/src/components/callout/icons.ts

@@ -0,0 +1,10 @@
+import { Info, Lightbulb, CircleCheck, TriangleAlert, CircleX } from '@lucide/vue'
+
+export const calloutIcons = {
+  neutral: Info,
+  accent: Lightbulb,
+  info: Info,
+  success: CircleCheck,
+  warning: TriangleAlert,
+  danger: CircleX,
+} as const

package/src/components/card/Card.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+  import { Primitive, type PrimitiveProps } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { card } from './card.variants'
+
+  defineOptions({ name: 'HnCard' })
+
+  const props = withDefaults(
+    defineProps<
+      PrimitiveProps & {
+        padded?: boolean
+        class?: string
+      }
+    >(),
+    { as: 'div', padded: true },
+  )
+</script>
+
+<template>
+  <Primitive
+    :as="props.as"
+    :as-child="props.asChild"
+    :class="cn(card({ padded: props.padded }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

package/src/components/card/card.variants.ts

@@ -0,0 +1,16 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const card = tv({
+  base: 'bg-surface border-line block rounded-lg border shadow-sm',
+  variants: {
+    padded: {
+      true: 'p-[var(--hn-panel-p)]',
+      false: 'overflow-hidden',
+    },
+  },
+  defaultVariants: {
+    padded: true,
+  },
+})
+
+export type CardVariants = VariantProps<typeof card>

package/src/components/center/Center.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+
+  defineOptions({ name: 'HnCenter' })
+
+  const props = withDefaults(
+    defineProps<{
+      as?: string
+      inline?: boolean
+      class?: string
+    }>(),
+    { as: 'div', inline: false },
+  )
+</script>
+
+<template>
+  <component
+    :is="props.as"
+    :class="cn(props.inline ? 'inline-flex' : 'flex', 'items-center justify-center', props.class)"
+  >
+    <slot />
+  </component>
+</template>

package/src/components/checkbox/Checkbox.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+  import { Check, Minus } from '@lucide/vue'
+  import { CheckboxRoot } from 'reka-ui'
+  import { useSlots } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { useFieldControl } from '../form-field/context'
+  import {
+    checkbox,
+    checkboxBox,
+    checkboxDescription,
+    checkboxTitle,
+    checkboxTitleText,
+    type CheckboxVariants,
+  } from './checkbox.variants'
+
+  defineOptions({ name: 'HnCheckbox', inheritAttrs: false })
+
+  const props = defineProps<{
+    size?: CheckboxVariants['size']
+    description?: string
+    disabled?: boolean
+    invalid?: boolean
+    class?: string
+  }>()
+
+  const model = defineModel<boolean | 'indeterminate'>({ default: false })
+
+  const slots = useSlots()
+
+  const {
+    id: fieldId,
+    invalid,
+    disabled,
+    describedBy,
+  } = useFieldControl({
+    invalid: () => props.invalid,
+    disabled: () => props.disabled,
+  })
+</script>
+
+<template>
+  <label
+    data-hn-checkbox
+    data-hn-state-group
+    :data-disabled="disabled ? '' : undefined"
+    :class="cn(checkbox({ size: props.size }), props.class)"
+  >
+    <CheckboxRoot
+      v-slot="{ state }"
+      v-bind="$attrs"
+      v-model="model"
+      :id="fieldId"
+      :disabled="disabled"
+      :aria-invalid="invalid || undefined"
+      :aria-describedby="describedBy"
+      :data-invalid="invalid ? '' : undefined"
+      :class="checkboxBox({ size: props.size })"
+    >
+      <Transition
+        enter-active-class="hn-transition-press"
+        enter-from-class="scale-50 opacity-0"
+        leave-active-class="hn-transition"
+        leave-to-class="scale-50 opacity-0"
+      >
+        <Check v-if="state === true" aria-hidden="true" />
+      </Transition>
+      <Transition
+        enter-active-class="hn-transition-press"
+        enter-from-class="scale-50 opacity-0"
+        leave-active-class="hn-transition"
+        leave-to-class="scale-50 opacity-0"
+      >
+        <Minus v-if="state === 'indeterminate'" aria-hidden="true" />
+      </Transition>
+    </CheckboxRoot>
+    <span v-if="slots.default" :class="checkboxTitle()">
+      <span :class="checkboxTitleText()"><slot /></span>
+    </span>
+    <span v-if="props.description" :class="checkboxDescription({ size: props.size })">
+      {{ props.description }}
+    </span>
+  </label>
+</template>

package/src/components/checkbox/checkbox.variants.ts

@@ -0,0 +1,70 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const checkbox = tv({
+  base: [
+    'text-fg grid w-fit max-w-full cursor-pointer grid-cols-[auto_minmax(0,1fr)] items-center gap-x-[var(--hn-field-gap)] select-none',
+    'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+  ],
+  variants: {
+    size: {
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-md',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const checkboxBox = tv({
+  base: [
+    'hn-focus-ring hn-state-layer hn-transition-base relative grid shrink-0 cursor-pointer place-items-center',
+    'size-[var(--hn-checkbox-size)] border',
+    'border-line bg-surface shadow-sm disabled:cursor-not-allowed',
+    '[--hn-state-selected-color:var(--hn-accent-on)] [--hn-state-selected-opacity:0]',
+    'data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=checked]:text-surface',
+    'data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent data-[state=indeterminate]:text-surface',
+    'data-invalid:border-danger data-invalid:focus-visible:outline-danger',
+    '[&_svg]:col-start-1 [&_svg]:row-start-1 [&_svg]:size-[var(--hn-checkbox-icon)] [&_svg]:stroke-[3]',
+  ],
+  variants: {
+    shape: {
+      square: 'rounded-xs',
+      round: 'rounded-full',
+    },
+    size: {
+      sm: '[--hn-checkbox-icon:0.625rem] [--hn-checkbox-size:0.875rem]',
+      md: '[--hn-checkbox-icon:0.75rem] [--hn-checkbox-size:1rem]',
+      lg: '[--hn-checkbox-icon:0.875rem] [--hn-checkbox-size:1.125rem]',
+    },
+  },
+  defaultVariants: {
+    shape: 'square',
+    size: 'md',
+  },
+})
+
+export const checkboxTitle = tv({
+  base: 'flex min-h-[1lh] min-w-0 items-center',
+})
+
+export const checkboxTitleText = tv({
+  base: 'block [text-box:trim-both_cap_alphabetic]',
+})
+
+export const checkboxDescription = tv({
+  base: 'text-muted col-start-2 block',
+  variants: {
+    size: {
+      sm: 'text-xs',
+      md: 'text-sm',
+      lg: 'text-base',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export type CheckboxVariants = VariantProps<typeof checkbox>