@hina-ui/vue 1.0.0

package/src/components/menubar/MenubarItem.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+  import { MenubarItem } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { dropdownItem, type DropdownItemVariants } from '../dropdown-menu/dropdown-menu.variants'
+
+  defineOptions({ name: 'HnMenubarItem', inheritAttrs: false })
+
+  const props = defineProps<{
+    tone?: DropdownItemVariants['tone']
+    disabled?: boolean
+    textValue?: string
+    class?: string
+  }>()
+
+  const emit = defineEmits<{ select: [event: Event] }>()
+</script>
+
+<template>
+  <MenubarItem
+    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" />
+  </MenubarItem>
+</template>

package/src/components/menubar/MenubarLabel.vue

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

package/src/components/menubar/MenubarMenu.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+  import { shallowRef } from 'vue'
+  import { MenubarContent, MenubarMenu, MenubarPortal, MenubarTrigger } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import Card from '../card/Card.vue'
+  import { menubarContent, menubarTrigger } from './menubar.variants'
+
+  defineOptions({ name: 'HnMenubarMenu' })
+
+  const props = defineProps<{
+    label?: string
+    value?: string
+    disabled?: boolean
+    class?: string
+  }>()
+
+  const panel = shallowRef<{ $el: HTMLElement } | null>(null)
+
+  function ignoreWhileClosing(event: Event) {
+    if (panel.value?.$el.dataset.state === 'closed') event.preventDefault()
+  }
+</script>
+
+<template>
+  <MenubarMenu :value="props.value">
+    <MenubarTrigger :disabled="props.disabled" :class="menubarTrigger()">
+      <slot name="label">{{ props.label }}</slot>
+    </MenubarTrigger>
+    <MenubarPortal>
+      <MenubarContent
+        as-child
+        align="start"
+        :side-offset="4"
+        @focus-outside="ignoreWhileClosing"
+        @interact-outside="ignoreWhileClosing"
+      >
+        <Card ref="panel" :padded="false" :class="cn(menubarContent(), props.class)">
+          <slot />
+        </Card>
+      </MenubarContent>
+    </MenubarPortal>
+  </MenubarMenu>
+</template>

package/src/components/menubar/MenubarRadioGroup.vue

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

package/src/components/menubar/MenubarRadioItem.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+  import { Check } from '@lucide/vue'
+  import { MenubarItemIndicator, MenubarRadioItem } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { dropdownItem } from '../dropdown-menu/dropdown-menu.variants'
+
+  defineOptions({ name: 'HnMenubarRadioItem', inheritAttrs: false })
+
+  const props = defineProps<{
+    value: string
+    disabled?: boolean
+    textValue?: string
+    class?: string
+  }>()
+</script>
+
+<template>
+  <MenubarRadioItem
+    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">
+      <MenubarItemIndicator>
+        <Check class="size-4" />
+      </MenubarItemIndicator>
+    </span>
+  </MenubarRadioItem>
+</template>

package/src/components/menubar/MenubarSeparator.vue

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

package/src/components/menubar/MenubarSub.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+  import { ChevronRight } from '@lucide/vue'
+  import { MenubarPortal, MenubarSub, MenubarSubContent, MenubarSubTrigger } from 'reka-ui'
+  import Card from '../card/Card.vue'
+  import { cn } from '../../lib/cn'
+  import { dropdownItem } from '../dropdown-menu/dropdown-menu.variants'
+  import { menubarContent } from './menubar.variants'
+
+  defineOptions({ name: 'HnMenubarSub' })
+
+  const props = defineProps<{
+    label?: string
+    disabled?: boolean
+    textValue?: string
+    class?: string
+  }>()
+
+  const open = defineModel<boolean>('open')
+</script>
+
+<template>
+  <MenubarSub v-model:open="open">
+    <MenubarSubTrigger
+      :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" />
+    </MenubarSubTrigger>
+    <MenubarPortal>
+      <MenubarSubContent as-child :side-offset="4">
+        <Card :padded="false" :class="cn(menubarContent(), props.class)">
+          <slot />
+        </Card>
+      </MenubarSubContent>
+    </MenubarPortal>
+  </MenubarSub>
+</template>

package/src/components/menubar/menubar.variants.ts

@@ -0,0 +1,17 @@
+import { tv } from '../../lib/tv'
+
+export const menubarRoot = tv({
+  base: 'bg-surface border-line inline-flex items-center gap-0.5 rounded-lg border p-1',
+})
+
+export const menubarTrigger = tv({
+  base: [
+    'hn-interactive hn-state-layer hn-press-none relative isolate inline-flex h-8 shrink-0 items-center',
+    'text-fg gap-1.5 rounded-md px-2.5 text-sm font-medium outline-none select-none',
+    'data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0',
+  ],
+})
+
+export const menubarContent = tv({
+  base: 'hn-anim-pop z-(--hn-z-overlay) flex min-w-40 flex-col gap-0.5 p-1 shadow-md outline-none',
+})

package/src/components/meter-group/MeterGroup.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import Indicator from '../indicator/Indicator.vue'
+  import type { ProgressFormat } from '../progress/composables/useProgressValue'
+  import { progressTrack, type ProgressVariants } from '../progress/progress.variants'
+  import {
+    meterGroup,
+    meterHeader,
+    meterLegend,
+    meterLegendItem,
+    meterSegment,
+    meterValue,
+  } from './meter-group.variants'
+  import type { MeterItem } from './types'
+  import { toneAt } from './utils/tones'
+
+  defineOptions({ name: 'HnMeterGroup', inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<{
+      items: MeterItem[]
+      max?: number
+      label?: string
+      legend?: boolean
+      format?: ProgressFormat
+      size?: ProgressVariants['size']
+      class?: string
+    }>(),
+    { max: 100, legend: true },
+  )
+
+  const t = useUiLocale()
+
+  const percent = computed(
+    () => new Intl.NumberFormat(t.value.tag, { style: 'percent', maximumFractionDigits: 0 }),
+  )
+
+  function text(value: number) {
+    if (props.format) return props.format(value, props.max)
+    return percent.value.format(props.max > 0 ? value / props.max : 0)
+  }
+
+  const entries = computed(() =>
+    props.items.map((item, index) => {
+      const value = Math.min(Math.max(item.value, 0), props.max)
+      const ratio = props.max > 0 ? value / props.max : 0
+      return {
+        ...item,
+        value,
+        tone: item.tone ?? toneAt(index),
+        width: `${ratio * 100}%`,
+        text: text(value),
+      }
+    }),
+  )
+
+  const total = computed(() =>
+    text(
+      Math.min(
+        entries.value.reduce((sum, entry) => sum + entry.value, 0),
+        props.max,
+      ),
+    ),
+  )
+</script>
+
+<template>
+  <div data-hn-meter-group :class="cn(meterGroup(), props.class)">
+    <div v-if="props.label" :class="meterHeader()">
+      <span>{{ props.label }}</span>
+      <span :class="meterValue()">{{ total }}</span>
+    </div>
+    <div
+      v-bind="$attrs"
+      role="group"
+      :aria-label="props.label"
+      :class="cn(progressTrack({ size: props.size }), 'flex')"
+    >
+      <span
+        v-for="entry in entries"
+        :key="entry.label"
+        role="meter"
+        :aria-label="entry.label"
+        :aria-valuenow="entry.value"
+        aria-valuemin="0"
+        :aria-valuemax="props.max"
+        :aria-valuetext="props.format ? entry.text : undefined"
+        :class="meterSegment({ tone: entry.tone })"
+        :style="{ width: entry.width }"
+      />
+    </div>
+    <div v-if="props.legend" :class="meterLegend()">
+      <span v-for="entry in entries" :key="entry.label" :class="meterLegendItem()">
+        <Indicator :tone="entry.tone" size="sm" />
+        <span>{{ entry.label }}</span>
+        <span :class="meterValue()">{{ entry.text }}</span>
+      </span>
+    </div>
+  </div>
+</template>

package/src/components/meter-group/meter-group.variants.ts

@@ -0,0 +1,38 @@
+import { tv } from '../../lib/tv'
+
+export const meterGroup = tv({
+  base: 'flex w-full min-w-0 flex-col gap-2',
+})
+
+export const meterHeader = tv({
+  base: 'text-fg flex items-baseline justify-between gap-3 text-sm',
+})
+
+export const meterSegment = tv({
+  base: 'hn-progress-bar block h-full shrink-0',
+  variants: {
+    tone: {
+      accent: 'bg-accent',
+      neutral: 'bg-neutral-solid',
+      success: 'bg-success',
+      warning: 'bg-warning',
+      danger: 'bg-danger',
+      info: 'bg-info',
+    },
+  },
+  defaultVariants: {
+    tone: 'accent',
+  },
+})
+
+export const meterLegend = tv({
+  base: 'flex flex-wrap gap-x-4 gap-y-1 text-sm',
+})
+
+export const meterLegendItem = tv({
+  base: 'inline-flex items-center gap-1.5',
+})
+
+export const meterValue = tv({
+  base: 'text-muted tabular-nums',
+})

package/src/components/meter-group/types.ts

@@ -0,0 +1,9 @@
+import type { IndicatorVariants } from '../indicator/indicator.variants'
+
+export type MeterTone = NonNullable<IndicatorVariants['tone']>
+
+export interface MeterItem {
+  label: string
+  value: number
+  tone?: MeterTone
+}

package/src/components/meter-group/utils/tones.ts

@@ -0,0 +1,14 @@
+import type { MeterTone } from '../types'
+
+export const METER_TONES: MeterTone[] = [
+  'accent',
+  'info',
+  'success',
+  'warning',
+  'danger',
+  'neutral',
+]
+
+export function toneAt(index: number): MeterTone {
+  return METER_TONES[index % METER_TONES.length]!
+}

package/src/components/multi-combobox/MultiCombobox.vue

@@ -0,0 +1,207 @@
+<script setup lang="ts">
+  import { computed, reactive, ref, shallowRef, watch } from 'vue'
+  import { ComboboxAnchor, ComboboxInput, ComboboxRoot, ComboboxTrigger } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { useFieldControl } from '../form-field/context'
+  import { focusFieldFrom } from '../../lib/field-focus'
+  import { useUiLocale } from '../../locale'
+  import { buttonIconBox } from '../button/button.variants'
+  import IconSlot from '../button/IconSlot.vue'
+  import Chip from '../chip/Chip.vue'
+  import { X } from '@lucide/vue'
+  import InputAction from '../input/InputAction.vue'
+  import ComboboxList from '../combobox/ComboboxList.vue'
+  import DisclosureIcon from '../disclosure-icon/DisclosureIcon.vue'
+  import {
+    inputActionSlot,
+    inputAdornment,
+    inputHost,
+    inputIndicator,
+    type InputVariants,
+  } from '../input/input.variants'
+  import { flattenOptions, type SelectItems, type SelectOption } from '../select/types'
+  import {
+    tagsInputChip,
+    tagsInputControl,
+    tagsInputHost,
+    tagsInputList,
+  } from '../tags-input/tags-input.variants'
+  import { multiComboboxEnd, multiComboboxHost } from './multi-combobox.variants'
+
+  defineOptions({ name: 'HnMultiCombobox', inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<{
+      options: SelectItems
+      placeholder?: string
+      ignoreFilter?: boolean
+      loading?: boolean
+      clearable?: boolean
+      name?: string
+      variant?: InputVariants['variant']
+      size?: InputVariants['size']
+      disabled?: boolean
+      invalid?: boolean
+      class?: string
+    }>(),
+    { clearable: false },
+  )
+  const emit = defineEmits<{ clear: [] }>()
+
+  const model = defineModel<Array<string | number>>({ default: () => [] })
+  const search = defineModel<string>('search', { default: '' })
+  const open = defineModel<boolean>('open', { default: false })
+
+  defineSlots<{ option(props: { option: SelectOption }): unknown }>()
+
+  const t = useUiLocale()
+  const keyboard = ref(false)
+  const input = shallowRef<{ $el: HTMLInputElement } | null>(null)
+
+  const {
+    id: fieldId,
+    invalid,
+    disabled,
+    describedBy,
+  } = useFieldControl({
+    invalid: () => props.invalid,
+    disabled: () => props.disabled,
+  })
+
+  const labels = reactive(new Map<string | number, string>())
+  watch(
+    () => props.options,
+    options => {
+      for (const option of flattenOptions(options)) labels.set(option.value, option.label)
+    },
+    { immediate: true, deep: true },
+  )
+
+  const selected = computed(() =>
+    model.value.map(value => ({ value, label: labels.get(value) ?? String(value) })),
+  )
+  const chipSize = computed(() => (props.size === 'sm' ? 'sm' : 'md'))
+  const clearing = computed(() => props.clearable && selected.value.length > 0 && !disabled.value)
+
+  watch(open, value => {
+    if (!value) keyboard.value = false
+  })
+
+  function remove(value: string | number) {
+    if (disabled.value) return
+    model.value = model.value.filter(item => item !== value)
+  }
+
+  function clear() {
+    if (!model.value.length) return
+    model.value = []
+    emit('clear')
+    input.value?.$el.focus()
+  }
+
+  function onHostClick(event: MouseEvent) {
+    const focused = focusFieldFrom(event.currentTarget as HTMLElement, event.target as HTMLElement)
+    if (focused && !open.value) open.value = true
+  }
+
+  function onInputKeydown(event: KeyboardEvent) {
+    keyboard.value = true
+    if (
+      event.key !== 'Backspace' ||
+      (event.target as HTMLInputElement).value !== '' ||
+      !model.value.length
+    )
+      return
+    model.value = model.value.slice(0, -1)
+  }
+</script>
+
+<template>
+  <ComboboxRoot
+    v-model="model"
+    v-model:open="open"
+    :disabled="disabled"
+    :ignore-filter="props.ignoreFilter"
+    :name="props.name"
+    multiple
+    open-on-click
+  >
+    <ComboboxAnchor as-child>
+      <div
+        data-hn-multi-combobox
+        :data-invalid="invalid ? '' : undefined"
+        :aria-busy="props.loading || undefined"
+        :class="
+          cn(
+            inputHost({ variant: props.variant, size: props.size }),
+            tagsInputHost({ size: props.size, trailing: true }),
+            multiComboboxHost({ clearing }),
+            props.class,
+          )
+        "
+        @click="onHostClick"
+      >
+        <div :class="tagsInputList()">
+          <Chip
+            v-for="option in selected"
+            :key="option.value"
+            :size="chipSize"
+            removable
+            :disabled="disabled"
+            :class="tagsInputChip()"
+            @remove="remove(option.value)"
+          >
+            <span class="min-w-0 truncate">{{ option.label }}</span>
+          </Chip>
+          <ComboboxInput
+            ref="input"
+            v-bind="$attrs"
+            v-model="search"
+            :placeholder="
+              selected.length ? undefined : (props.placeholder ?? t.combobox.placeholder)
+            "
+            :disabled="disabled"
+            :id="fieldId"
+            :aria-invalid="invalid || undefined"
+            :aria-describedby="describedBy"
+            :class="tagsInputControl({ size: props.size })"
+            @keydown="onInputKeydown"
+          />
+        </div>
+        <span :class="multiComboboxEnd()">
+          <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" data-hn-multi-combobox-clear :class="inputActionSlot()">
+              <InputAction :label="t.common.clear" @click="clear">
+                <X />
+              </InputAction>
+            </span>
+          </Transition>
+          <ComboboxTrigger
+            :aria-label="t.combobox.toggle"
+            :disabled="disabled"
+            :class="cn(inputAdornment(), inputIndicator())"
+            @mousedown.prevent
+          >
+            <IconSlot
+              :box-class="buttonIconBox({ size: props.size })"
+              :swapped="!!props.loading"
+              spinner-size="sm"
+            >
+              <DisclosureIcon :open="open" />
+            </IconSlot>
+          </ComboboxTrigger>
+        </span>
+      </div>
+    </ComboboxAnchor>
+    <ComboboxList :options="props.options" :keyboard="keyboard">
+      <template #option="slotProps">
+        <slot name="option" v-bind="slotProps" />
+      </template>
+    </ComboboxList>
+  </ComboboxRoot>
+</template>

package/src/components/multi-combobox/multi-combobox.variants.ts

@@ -0,0 +1,14 @@
+import { tv } from '../../lib/tv'
+
+export const multiComboboxHost = tv({
+  base: '',
+  variants: {
+    clearing: {
+      true: 'pe-[calc(2*var(--hn-input-h))]',
+    },
+  },
+})
+
+export const multiComboboxEnd = tv({
+  base: 'absolute inset-y-0 end-0 flex items-stretch',
+})