@hina-ui/vue 1.0.0

package/src/components/container/Container.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+  import { container, type ContainerVariants } from './container.variants'
+
+  defineOptions({ name: 'HnContainer' })
+
+  const props = withDefaults(
+    defineProps<{
+      as?: string
+      size?: ContainerVariants['size']
+      class?: string
+    }>(),
+    { as: 'div' },
+  )
+</script>
+
+<template>
+  <component :is="props.as" :class="cn(container({ size }), props.class)">
+    <slot />
+  </component>
+</template>

package/src/components/container/container.variants.ts

@@ -0,0 +1,18 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const container = tv({
+  base: 'mx-auto w-full px-4 sm:px-6',
+  variants: {
+    size: {
+      sm: 'max-w-3xl',
+      md: 'max-w-5xl',
+      lg: 'max-w-6xl',
+      xl: 'max-w-7xl',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export type ContainerVariants = VariantProps<typeof container>

package/src/components/context-menu/ContextMenu.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+  import {
+    ContextMenuContent,
+    ContextMenuPortal,
+    ContextMenuRoot,
+    ContextMenuTrigger,
+  } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import Card from '../card/Card.vue'
+
+  defineOptions({ name: 'HnContextMenu' })
+
+  const props = defineProps<{
+    label?: string
+    disabled?: boolean
+    class?: string
+  }>()
+
+  const open = defineModel<boolean>('open')
+</script>
+
+<template>
+  <ContextMenuRoot v-model:open="open" modal>
+    <ContextMenuTrigger as-child :disabled="props.disabled">
+      <slot />
+    </ContextMenuTrigger>
+    <ContextMenuPortal>
+      <ContextMenuContent as-child :aria-label="props.label">
+        <Card
+          :padded="false"
+          :class="
+            cn(
+              'hn-anim-pop z-(--hn-z-overlay) flex min-w-40 flex-col gap-0.5 p-1 shadow-md outline-none',
+              props.class,
+            )
+          "
+        >
+          <slot name="content" />
+        </Card>
+      </ContextMenuContent>
+    </ContextMenuPortal>
+  </ContextMenuRoot>
+</template>

package/src/components/context-menu/ContextMenuCheckboxItem.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+  import { Check } from '@lucide/vue'
+  import { ContextMenuCheckboxItem, ContextMenuItemIndicator } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { dropdownItem } from '../dropdown-menu/dropdown-menu.variants'
+
+  defineOptions({ name: 'HnContextMenuCheckboxItem', inheritAttrs: false })
+
+  const props = defineProps<{
+    disabled?: boolean
+    textValue?: string
+    class?: string
+  }>()
+
+  const checked = defineModel<boolean>('checked', { default: false })
+</script>
+
+<template>
+  <ContextMenuCheckboxItem
+    v-bind="$attrs"
+    v-model="checked"
+    :disabled="props.disabled"
+    :text-value="props.textValue"
+    :class="cn(dropdownItem(), props.class)"
+    @select="(event: Event) => event.preventDefault()"
+  >
+    <span class="min-w-0 flex-1"><slot /></span>
+    <slot name="trailing" />
+    <span class="flex size-4 shrink-0 items-center justify-center">
+      <ContextMenuItemIndicator>
+        <Check />
+      </ContextMenuItemIndicator>
+    </span>
+  </ContextMenuCheckboxItem>
+</template>

package/src/components/context-menu/ContextMenuGroup.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+  import { ContextMenuGroup } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+
+  defineOptions({ name: 'HnContextMenuGroup' })
+
+  const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <ContextMenuGroup :class="cn('flex flex-col gap-0.5', props.class)">
+    <slot />
+  </ContextMenuGroup>
+</template>

package/src/components/context-menu/ContextMenuItem.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+  import { ContextMenuItem } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { dropdownItem, type DropdownItemVariants } from '../dropdown-menu/dropdown-menu.variants'
+
+  defineOptions({ name: 'HnContextMenuItem', inheritAttrs: false })
+
+  const props = defineProps<{
+    tone?: DropdownItemVariants['tone']
+    disabled?: boolean
+    textValue?: string
+    class?: string
+  }>()
+
+  const emit = defineEmits<{ select: [event: Event] }>()
+</script>
+
+<template>
+  <ContextMenuItem
+    v-bind="$attrs"
+    :disabled="props.disabled"
+    :text-value="props.textValue"
+    :class="cn(dropdownItem({ tone: props.tone }), props.class)"
+    @select="emit('select', $event)"
+  >
+    <slot name="icon" />
+    <span class="min-w-0 flex-1"><slot /></span>
+    <slot name="trailing" />
+  </ContextMenuItem>
+</template>

package/src/components/context-menu/ContextMenuLabel.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+  import { ContextMenuLabel } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+
+  defineOptions({ name: 'HnContextMenuLabel' })
+
+  const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <ContextMenuLabel :class="cn('text-muted px-2.5 py-1.5 text-xs font-medium', props.class)">
+    <slot />
+  </ContextMenuLabel>
+</template>

package/src/components/context-menu/ContextMenuRadioGroup.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+  import { ContextMenuRadioGroup } from 'reka-ui'
+
+  defineOptions({ name: 'HnContextMenuRadioGroup' })
+
+  const value = defineModel<string>()
+</script>
+
+<template>
+  <ContextMenuRadioGroup v-model="value">
+    <slot />
+  </ContextMenuRadioGroup>
+</template>

package/src/components/context-menu/ContextMenuRadioItem.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+  import { Check } from '@lucide/vue'
+  import { ContextMenuItemIndicator, ContextMenuRadioItem } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { dropdownItem } from '../dropdown-menu/dropdown-menu.variants'
+
+  defineOptions({ name: 'HnContextMenuRadioItem', inheritAttrs: false })
+
+  const props = defineProps<{
+    value: string
+    disabled?: boolean
+    textValue?: string
+    class?: string
+  }>()
+</script>
+
+<template>
+  <ContextMenuRadioItem
+    v-bind="$attrs"
+    :value="props.value"
+    :disabled="props.disabled"
+    :text-value="props.textValue"
+    :class="cn(dropdownItem(), props.class)"
+  >
+    <span class="min-w-0 flex-1"><slot /></span>
+    <span class="flex size-4 shrink-0 items-center justify-center">
+      <ContextMenuItemIndicator>
+        <Check class="size-4" />
+      </ContextMenuItemIndicator>
+    </span>
+  </ContextMenuRadioItem>
+</template>

package/src/components/context-menu/ContextMenuSeparator.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+  import { ContextMenuSeparator } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+
+  defineOptions({ name: 'HnContextMenuSeparator' })
+
+  const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <ContextMenuSeparator :class="cn('bg-line -mx-1 my-1 h-px', props.class)" />
+</template>

package/src/components/context-menu/ContextMenuSub.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+  import { ChevronRight } from '@lucide/vue'
+  import {
+    ContextMenuPortal,
+    ContextMenuSub,
+    ContextMenuSubContent,
+    ContextMenuSubTrigger,
+  } from 'reka-ui'
+  import Card from '../card/Card.vue'
+  import { cn } from '../../lib/cn'
+  import { dropdownItem } from '../dropdown-menu/dropdown-menu.variants'
+
+  defineOptions({ name: 'HnContextMenuSub' })
+
+  const props = defineProps<{
+    label?: string
+    disabled?: boolean
+    textValue?: string
+    class?: string
+  }>()
+
+  const open = defineModel<boolean>('open')
+</script>
+
+<template>
+  <ContextMenuSub v-model:open="open">
+    <ContextMenuSubTrigger
+      :disabled="props.disabled"
+      :text-value="props.textValue ?? props.label"
+      :class="dropdownItem()"
+    >
+      <slot name="icon" />
+      <span class="min-w-0 flex-1">
+        <slot name="label">{{ props.label }}</slot>
+      </span>
+      <ChevronRight class="text-muted" />
+    </ContextMenuSubTrigger>
+    <ContextMenuPortal>
+      <ContextMenuSubContent as-child :side-offset="4">
+        <Card
+          :padded="false"
+          :class="
+            cn(
+              'hn-anim-pop z-(--hn-z-overlay) flex min-w-40 flex-col gap-0.5 p-1 shadow-md outline-none',
+              props.class,
+            )
+          "
+        >
+          <slot />
+        </Card>
+      </ContextMenuSubContent>
+    </ContextMenuPortal>
+  </ContextMenuSub>
+</template>

package/src/components/copy-button/CopyButton.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { Check, Copy } from '@lucide/vue'
+  import IconButton from '../icon-button/IconButton.vue'
+  import { useUiLocale } from '../../locale'
+  import { useCopy, COPIED_RESET_MS } from './composables/useCopy'
+  import type { ButtonVariants } from '../button/button.variants'
+
+  defineOptions({ name: 'HnCopyButton', inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<{
+      text: string
+      label?: string
+      size?: ButtonVariants['size']
+      timeout?: number
+      disabled?: boolean
+      tooltip?: boolean
+      class?: string
+    }>(),
+    { size: 'sm', timeout: COPIED_RESET_MS },
+  )
+
+  const emit = defineEmits<{ copied: [text: string] }>()
+
+  const t = useUiLocale()
+
+  const { copied, copy } = useCopy(
+    () => props.text,
+    value => emit('copied', value),
+    () => props.timeout,
+  )
+
+  const label = computed(() =>
+    copied.value ? t.value.common.copied : (props.label ?? t.value.common.copy),
+  )
+</script>
+
+<template>
+  <IconButton
+    v-bind="$attrs"
+    :label="label"
+    :tooltip="props.tooltip"
+    :size="props.size"
+    :disabled="props.disabled"
+    :class="props.class"
+    @click="copy"
+  >
+    <span class="relative inline-flex size-[1em]">
+      <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"
+      >
+        <Check v-if="copied" key="check" class="text-success-text absolute inset-0" />
+        <Copy v-else key="copy" class="absolute inset-0" />
+      </Transition>
+    </span>
+  </IconButton>
+</template>

package/src/components/copy-button/composables/useCopy.ts

@@ -0,0 +1,31 @@
+import { onBeforeUnmount, shallowRef } from 'vue'
+
+export const COPIED_RESET_MS = 2000
+
+export function useCopy(
+  text: () => string,
+  onCopied?: (value: string) => void,
+  resetAfter: () => number = () => COPIED_RESET_MS,
+) {
+  const copied = shallowRef(false)
+  let timer: ReturnType<typeof setTimeout> | undefined
+
+  async function copy() {
+    const value = text()
+    try {
+      await navigator.clipboard.writeText(value)
+    } catch {
+      return
+    }
+    copied.value = true
+    onCopied?.(value)
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      copied.value = false
+    }, resetAfter())
+  }
+
+  onBeforeUnmount(() => clearTimeout(timer))
+
+  return { copied, copy }
+}

package/src/components/date-field/DateField.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+  import { computed, shallowRef, useSlots } from 'vue'
+  import { DateFieldInput, DateFieldRoot } from 'reka-ui'
+  import type { DateValue } from '@internationalized/date'
+  import { cn } from '../../lib/cn'
+  import { formatDateValue, parseDateValue, type DateGranularity } 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 './composables/useSegmentFocus'
+  import { dateFieldControl, dateFieldHost, dateFieldSegment } from './date-field.variants'
+
+  defineOptions({ name: 'HnDateField', 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<string | null>({ default: null })
+
+  const slots = useSlots()
+  const t = useUiLocale()
+  const group = injectInputGroup()
+  const host = shallowRef<HTMLElement | null>(null)
+
+  const size = computed(() => (group ? group.size.value : props.size))
+  const { labelledBy, invalid, disabled, describedBy } = useFieldControl({
+    invalid: () => props.invalid || !!group?.invalid.value || outOfRange.value,
+    disabled: () => props.disabled || !!group?.disabled.value,
+  })
+
+  const value = computed(() => parseDateValue(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(
+    () =>
+      !!value.value &&
+      ((!!minValue.value && value.value.compare(minValue.value) < 0) ||
+        (!!maxValue.value && value.value.compare(maxValue.value) > 0)),
+  )
+  const clearing = computed(() => props.clearable && model.value != null && !disabled.value)
+
+  function segmentLabel(part: string) {
+    return (t.value.dateField as Record<string, string | undefined>)[part]
+  }
+
+  function update(next: DateValue | undefined) {
+    model.value = next ? formatDateValue(next, props.granularity) : null
+  }
+
+  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-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>
+    <DateFieldRoot
+      v-slot="{ segments: parts }"
+      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"
+    >
+      <DateFieldInput
+        v-for="part in parts"
+        :key="part.part"
+        :part="part.part"
+        data-hn-segment
+        :aria-label="part.part === 'literal' ? undefined : segmentLabel(part.part)"
+        :class="dateFieldSegment({ part: part.part === 'literal' ? 'literal' : 'editable' })"
+      >
+        {{ part.value }}
+      </DateFieldInput>
+    </DateFieldRoot>
+    <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-field/composables/useSegmentFocus.ts

@@ -0,0 +1,22 @@
+import type { Ref } from 'vue'
+
+export function useSegmentFocus(host: Ref<HTMLElement | null>) {
+  function segments() {
+    return Array.from(
+      host.value?.querySelectorAll<HTMLElement>('[data-hn-segment]:not([aria-hidden="true"])') ??
+        [],
+    )
+  }
+
+  function focus() {
+    const all = segments()
+    ;(all.find(segment => segment.hasAttribute('data-placeholder')) ?? all[0])?.focus()
+  }
+
+  function onHostClick(event: MouseEvent) {
+    if ((event.target as Element).closest('[data-hn-segment], button')) return
+    focus()
+  }
+
+  return { focus, onHostClick }
+}

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

@@ -0,0 +1,33 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const dateFieldHost = tv({
+  base: 'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+})
+
+export const dateFieldControl = tv({
+  base: 'flex h-full min-w-0 flex-1 items-center px-[var(--hn-input-px)] tabular-nums select-none',
+  variants: {
+    leading: {
+      true: 'ps-0',
+    },
+    trailing: {
+      true: 'pe-0',
+    },
+  },
+})
+
+export const dateFieldSegment = tv({
+  base: 'hn-transition rounded-xs outline-none',
+  variants: {
+    part: {
+      literal: 'text-faint px-px',
+      editable: [
+        'px-0.5 focus:bg-accent-soft focus:text-accent-text',
+        'data-placeholder:text-faint data-placeholder:font-normal data-disabled:cursor-not-allowed',
+      ],
+    },
+  },
+  defaultVariants: { part: 'editable' },
+})
+
+export type DateFieldVariants = VariantProps<typeof dateFieldSegment>