@hina-ui/vue 1.1.0 → 1.3.0

package/src/components/input-group/InputGroup.vue

@@ -3,15 +3,15 @@
   import { cn } from '../../lib/cn'
   import { focusFieldFrom } from '../../lib/field-focus'
   import { useFieldControl } from '../form-field/context'
-  import { inputHost, type InputVariants } from '../input/input.variants'
+  import { textInputHost, type TextInputVariants } from '../input/input.variants'
   import { provideInputGroup } from './context'
   import { inputGroup } from './input-group.variants'
 
   defineOptions({ name: 'HnInputGroup' })
 
   const props = defineProps<{
-    variant?: InputVariants['variant']
-    size?: InputVariants['size']
+    variant?: TextInputVariants['variant']
+    size?: TextInputVariants['size']
     disabled?: boolean
     invalid?: boolean
     class?: string
@@ -20,6 +20,7 @@
   const { disabled } = useFieldControl({ disabled: () => props.disabled })
 
   provideInputGroup({
+    variant: computed(() => props.variant),
     size: computed(() => props.size),
     disabled,
     invalid: computed(() => !!props.invalid),
@@ -31,7 +32,13 @@
     data-hn-input-group
     :data-invalid="props.invalid ? '' : undefined"
     :data-disabled="disabled ? '' : undefined"
-    :class="cn(inputHost({ variant: props.variant, size: props.size }), inputGroup(), props.class)"
+    :class="
+      cn(
+        textInputHost({ variant: props.variant, size: props.size }),
+        inputGroup({ divided: props.variant !== 'bare' }),
+        props.class,
+      )
+    "
     @click="focusFieldFrom($event.currentTarget as HTMLElement, $event.target as HTMLElement)"
   >
     <slot />

package/src/components/input-group/context.ts

@@ -1,7 +1,8 @@
 import { inject, provide, type ComputedRef, type InjectionKey } from 'vue'
-import type { InputVariants } from '../input/input.variants'
+import type { InputVariants, TextInputVariants } from '../input/input.variants'
 
 export interface InputGroupContext {
+  variant?: ComputedRef<TextInputVariants['variant']>
   size: ComputedRef<InputVariants['size']>
   disabled: ComputedRef<boolean>
   invalid: ComputedRef<boolean>

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

@@ -2,10 +2,17 @@ import { tv } from '../../lib/tv'
 
 export const inputGroup = tv({
   base: [
-    '[&>*+*]:border-s [&>*+*]:border-s-line',
     '[&>button]:h-auto [&>button]:rounded-none [&>button]:[--hn-press-scale:1]',
     '[&>button:focus-visible]:-outline-offset-2',
   ],
+  variants: {
+    divided: {
+      true: '[&>*+*]:border-s [&>*+*]:border-s-line',
+    },
+  },
+  defaultVariants: {
+    divided: true,
+  },
 })
 
 export const inputGroupAddon = tv({

package/src/components/lightbox/LightboxThumbs.vue

@@ -65,6 +65,7 @@
         <Highlight
           v-if="at === props.index"
           :id="highlightId"
+          axis="x"
           class="ring-accent absolute inset-0 rounded-md ring-2 ring-inset"
         />
       </button>

package/src/components/listbox/Listbox.vue

@@ -1,11 +1,9 @@
-<script setup lang="ts">
-  import { Check } from '@lucide/vue'
+<script setup lang="ts" generic="T extends SelectOption = SelectOption">
   import {
     ListboxContent,
     ListboxGroup,
     ListboxGroupLabel,
     ListboxItem,
-    ListboxItemIndicator,
     ListboxRoot,
   } from 'reka-ui'
   import { cn } from '../../lib/cn'
@@ -14,25 +12,30 @@
   import ScrollArea from '../scroll-area/ScrollArea.vue'
   import { selectEmpty, selectItem, selectLabel } from '../select/select.variants'
   import { isOptionGroup, type SelectItems, type SelectOption } from '../select/types'
+  import ListboxOptionContent from './ListboxOptionContent.vue'
   import { listbox, listboxContent, type ListboxVariants } from './listbox.variants'
 
   defineOptions({ name: 'HnListbox', inheritAttrs: false })
 
   const props = withDefaults(
     defineProps<{
-      options: SelectItems
+      options: SelectItems<T>
       multiple?: boolean
       maxHeight?: string
+      padded?: boolean
       variant?: ListboxVariants['variant']
       disabled?: boolean
       class?: string
     }>(),
-    { maxHeight: '20rem' },
+    { maxHeight: '20rem', padded: true },
   )
 
   const model = defineModel<string | number | null | Array<string | number>>()
 
-  defineSlots<{ option(props: { option: SelectOption }): unknown }>()
+  const slots = defineSlots<{
+    option?(props: { option: T; selected: boolean }): unknown
+    trailing?(props: { option: T; selected: boolean }): unknown
+  }>()
 
   const t = useUiLocale()
 
@@ -55,7 +58,7 @@
     :class="cn(listbox({ variant: props.variant }), props.class)"
   >
     <ScrollArea :style="{ maxHeight: props.maxHeight }">
-      <ListboxContent v-bind="$attrs" :class="listboxContent()">
+      <ListboxContent v-bind="$attrs" :class="listboxContent({ padded: props.padded })">
         <template
           v-for="item in props.options"
           :key="isOptionGroup(item) ? item.label : item.value"
@@ -69,31 +72,25 @@
               :disabled="option.disabled"
               :class="selectItem()"
             >
-              <span class="min-w-0 flex-1">
-                <slot name="option" :option="option">
-                  <span class="block truncate">{{ option.label }}</span>
-                  <span v-if="option.description" class="text-muted block truncate text-xs">
-                    {{ option.description }}
-                  </span>
-                </slot>
-              </span>
-              <span class="flex size-4 shrink-0 items-center justify-center">
-                <ListboxItemIndicator><Check /></ListboxItemIndicator>
-              </span>
+              <ListboxOptionContent :option="option">
+                <template v-if="slots.option" #option="slotProps">
+                  <slot name="option" v-bind="slotProps" />
+                </template>
+                <template v-if="slots.trailing" #trailing="slotProps">
+                  <slot name="trailing" v-bind="slotProps" />
+                </template>
+              </ListboxOptionContent>
             </ListboxItem>
           </ListboxGroup>
           <ListboxItem v-else :value="item.value" :disabled="item.disabled" :class="selectItem()">
-            <span class="min-w-0 flex-1">
-              <slot name="option" :option="item">
-                <span class="block truncate">{{ item.label }}</span>
-                <span v-if="item.description" class="text-muted block truncate text-xs">
-                  {{ item.description }}
-                </span>
-              </slot>
-            </span>
-            <span class="flex size-4 shrink-0 items-center justify-center">
-              <ListboxItemIndicator><Check /></ListboxItemIndicator>
-            </span>
+            <ListboxOptionContent :option="item">
+              <template v-if="slots.option" #option="slotProps">
+                <slot name="option" v-bind="slotProps" />
+              </template>
+              <template v-if="slots.trailing" #trailing="slotProps">
+                <slot name="trailing" v-bind="slotProps" />
+              </template>
+            </ListboxOptionContent>
           </ListboxItem>
         </template>
         <div v-if="props.options.length === 0" :class="selectEmpty()">{{ t.select.empty }}</div>

package/src/components/listbox/ListboxOptionContent.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts" generic="T extends SelectOption = SelectOption">
+  import { Check } from '@lucide/vue'
+  import { injectListboxItemContext, ListboxItemIndicator } from 'reka-ui'
+  import type { SelectOption } from '../select/types'
+
+  defineOptions({ name: 'HnListboxOptionContent', inheritAttrs: false })
+  const props = defineProps<{ option: T }>()
+  const slots = defineSlots<{
+    option?(props: { option: T; selected: boolean }): unknown
+    trailing?(props: { option: T; selected: boolean }): unknown
+  }>()
+  const { isSelected: selected } = injectListboxItemContext()
+</script>
+
+<template>
+  <span class="min-w-0 flex-1">
+    <slot name="option" :option="props.option" :selected="selected">
+      <span class="block truncate">{{ props.option.label }}</span>
+      <span v-if="props.option.description" class="text-muted block truncate text-xs">
+        {{ props.option.description }}
+      </span>
+    </slot>
+  </span>
+  <slot v-if="slots.trailing" name="trailing" :option="props.option" :selected="selected" />
+  <span v-else class="flex size-4 shrink-0 items-center justify-center">
+    <ListboxItemIndicator><Check /></ListboxItemIndicator>
+  </span>
+</template>

package/src/components/listbox/listbox.variants.ts

@@ -9,6 +9,7 @@ export const listbox = tv({
     variant: {
       primary: 'border-line bg-surface border shadow-sm',
       secondary: 'bg-inset',
+      bare: 'rounded-none border-0 bg-transparent shadow-none',
     },
   },
   defaultVariants: {
@@ -17,7 +18,11 @@ export const listbox = tv({
 })
 
 export const listboxContent = tv({
-  base: 'flex flex-col p-1 outline-none',
+  base: 'flex flex-col outline-none',
+  variants: {
+    padded: { true: 'p-1', false: 'p-0' },
+  },
+  defaultVariants: { padded: true },
 })
 
 export type ListboxVariants = VariantProps<typeof listbox>

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

@@ -1,9 +1,8 @@
-<script setup lang="ts">
-  import { computed, reactive, ref, shallowRef, watch } from 'vue'
+<script setup lang="ts" generic="T extends SelectOption = SelectOption">
+  import { computed } 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'
@@ -19,7 +18,8 @@
     inputIndicator,
     type InputVariants,
   } from '../input/input.variants'
-  import { flattenOptions, type SelectItems, type SelectOption } from '../select/types'
+  import type { SelectItems, SelectOption } from '../select/types'
+  import { useMultiCombobox } from './composables/useMultiCombobox'
   import {
     tagsInputChip,
     tagsInputControl,
@@ -32,7 +32,7 @@
 
   const props = withDefaults(
     defineProps<{
-      options: SelectItems
+      options: SelectItems<T>
       placeholder?: string
       ignoreFilter?: boolean
       loading?: boolean
@@ -52,11 +52,9 @@
   const search = defineModel<string>('search', { default: '' })
   const open = defineModel<boolean>('open', { default: false })
 
-  defineSlots<{ option(props: { option: SelectOption }): unknown }>()
+  defineSlots<{ option?(props: { option: T }): unknown }>()
 
   const t = useUiLocale()
-  const keyboard = ref(false)
-  const input = shallowRef<{ $el: HTMLInputElement } | null>(null)
 
   const {
     id: fieldId,
@@ -68,52 +66,16 @@
     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 { selected, keyboard, input, remove, clear, onHostClick, onInputKeydown } =
+    useMultiCombobox({
+      options: () => props.options,
+      model,
+      open,
+      disabled: () => disabled.value,
+      onClear: () => emit('clear'),
+    })
   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>

package/src/components/multi-combobox/composables/useMultiCombobox.ts

@@ -0,0 +1,63 @@
+import { computed, reactive, ref, shallowRef, watch, type Ref } from 'vue'
+import { focusFieldFrom } from '../../../lib/field-focus'
+import { flattenOptions, type SelectItems, type SelectOption } from '../../select/types'
+
+interface MultiComboboxOptions<T extends SelectOption> {
+  options: () => SelectItems<T>
+  model: Ref<Array<string | number>>
+  open: Ref<boolean>
+  disabled: () => boolean
+  onClear: () => void
+}
+
+export function useMultiCombobox<T extends SelectOption>(options: MultiComboboxOptions<T>) {
+  const { model, open } = options
+  const keyboard = ref(false)
+  const input = shallowRef<{ $el: HTMLInputElement } | null>(null)
+  const labels = reactive(new Map<string | number, string>())
+  watch(
+    options.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) })),
+  )
+
+  watch(open, value => {
+    if (!value) keyboard.value = false
+  })
+
+  function remove(value: string | number) {
+    if (options.disabled()) return
+    model.value = model.value.filter(item => item !== value)
+  }
+
+  function clear() {
+    if (!model.value.length) return
+    model.value = []
+    options.onClear()
+    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)
+  }
+
+  return { selected, keyboard, input, remove, clear, onHostClick, onInputKeydown }
+}

package/src/components/multi-select/MultiSelect.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends SelectOption = SelectOption">
   import { computed, ref } from 'vue'
   import { SelectRoot, SelectTrigger } from 'reka-ui'
   import { cn } from '../../lib/cn'
@@ -25,7 +25,7 @@
 
   const props = withDefaults(
     defineProps<{
-      options: SelectItems
+      options: SelectItems<T>
       placeholder?: string
       name?: string
       required?: boolean
@@ -45,7 +45,7 @@
   const model = defineModel<Array<string | number>>({ default: () => [] })
   const open = defineModel<boolean>('open', { default: false })
 
-  defineSlots<{ option(props: { option: SelectOption }): unknown }>()
+  defineSlots<{ option?(props: { option: T }): unknown }>()
 
   const t = useUiLocale()
   const group = injectInputGroup()
@@ -157,7 +157,6 @@
         <DisclosureIcon />
       </span>
     </SelectTrigger>
-    <!-- Reka 2.10 BubbleSelect assigns arrays to select.value, which loses multiple values. -->
     <VisuallyHidden v-if="props.name" as-child>
       <select
         v-model="model"

package/src/components/number-input/NumberInput.vue

@@ -16,8 +16,8 @@
   import {
     inputControl,
     inputEmbedded,
-    inputHost,
-    type InputVariants,
+    textInputHost,
+    type TextInputVariants,
   } from '../input/input.variants'
   import { numberInputStep, numberInputStepper } from './number-input.variants'
 
@@ -34,8 +34,8 @@
       formatOptions?: Intl.NumberFormatOptions
       locale?: string
       controls?: boolean
-      variant?: InputVariants['variant']
-      size?: InputVariants['size']
+      variant?: TextInputVariants['variant']
+      size?: TextInputVariants['size']
       disabled?: boolean
       readonly?: boolean
       invalid?: boolean
@@ -47,6 +47,7 @@
 
   const t = useUiLocale()
   const group = injectInputGroup()
+  const divided = computed(() => (group ? group.variant?.value : props.variant) !== 'bare')
   const size = computed(() => (group ? group.size.value : props.size))
   const {
     id: fieldId,
@@ -83,7 +84,7 @@
     :data-disabled="disabled ? '' : undefined"
     :class="
       cn(
-        group ? inputEmbedded() : inputHost({ variant: props.variant, size: props.size }),
+        group ? inputEmbedded() : textInputHost({ variant: props.variant, size: props.size }),
         props.class,
       )
     "
@@ -95,13 +96,13 @@
       :aria-describedby="describedBy"
       :class="cn(inputControl(), 'tabular-nums')"
     />
-    <div v-if="props.controls" :class="numberInputStepper({ size })">
+    <div v-if="props.controls" :class="numberInputStepper({ size, divided })">
       <NumberFieldIncrement :aria-label="t.numberInput.increase" :class="numberInputStep()">
         <ChevronUp />
       </NumberFieldIncrement>
       <NumberFieldDecrement
         :aria-label="t.numberInput.decrease"
-        :class="numberInputStep({ divided: true })"
+        :class="numberInputStep({ divided })"
       >
         <ChevronDown />
       </NumberFieldDecrement>

package/src/components/number-input/number-input.variants.ts

@@ -1,8 +1,11 @@
 import { tv } from '../../lib/tv'
 
 export const numberInputStepper = tv({
-  base: 'border-line flex shrink-0 flex-col border-s',
+  base: 'flex shrink-0 flex-col',
   variants: {
+    divided: {
+      true: 'border-line border-s',
+    },
     size: {
       sm: '[&_svg]:size-3',
       md: '[&_svg]:size-3',
@@ -11,6 +14,7 @@ export const numberInputStepper = tv({
   },
   defaultVariants: {
     size: 'md',
+    divided: true,
   },
 })
 

package/src/components/password-input/PasswordInput.vue

@@ -4,13 +4,13 @@
   import { useUiLocale } from '../../locale'
   import InputBase from '../input/InputBase.vue'
   import InputAction from '../input/InputAction.vue'
-  import type { InputVariants } from '../input/input.variants'
+  import type { TextInputVariants } from '../input/input.variants'
 
   defineOptions({ name: 'HnPasswordInput', inheritAttrs: false })
 
   const props = defineProps<{
-    variant?: InputVariants['variant']
-    size?: InputVariants['size']
+    variant?: TextInputVariants['variant']
+    size?: TextInputVariants['size']
     disabled?: boolean
     invalid?: boolean
     class?: string

package/src/components/popover/Popover.vue

@@ -1,23 +1,32 @@
 <script setup lang="ts">
   import { computed } from 'vue'
-  import { PopoverRoot, PopoverTrigger, PopoverPortal, PopoverContent } from 'reka-ui'
+  import { PopoverRoot, PopoverTrigger, PopoverPortal, type PopoverContentEmits } from 'reka-ui'
+  import PopoverContent from './PopoverContent.vue'
+  import { useAnchoredOverlay } from '../../lib/anchored-overlay'
   import Card from '../card/Card.vue'
   import { cn } from '../../lib/cn'
 
-  defineOptions({ name: 'HnPopover' })
+  defineOptions({ name: 'HnPopover', inheritAttrs: false })
 
   const props = withDefaults(
     defineProps<{
+      anchor?: HTMLElement | null
+      modal?: boolean
       side?: 'top' | 'right' | 'bottom' | 'left'
       align?: 'start' | 'center' | 'end'
       sideOffset?: number
       padded?: boolean
       class?: string
     }>(),
-    { side: 'bottom', align: 'center', sideOffset: 8, padded: true },
+    { side: 'bottom', align: 'center', sideOffset: 8, padded: true, modal: true },
   )
 
   const open = defineModel<boolean>('open')
+  const emit = defineEmits<PopoverContentEmits>()
+  defineSlots<{ default?(): unknown; content?(): unknown }>()
+  const { trigger, reference, visible, events } = useAnchoredOverlay(props, open, emit, event =>
+    emit('openAutoFocus', event),
+  )
 
   const pressOrigin = computed(() => {
     if (props.side === 'left') return 'right'
@@ -29,12 +38,19 @@
 </script>
 
 <template>
-  <PopoverRoot v-model:open="open" modal>
-    <PopoverTrigger as-child :style="{ transformOrigin: pressOrigin }">
+  <PopoverRoot v-model:open="visible" :modal="props.modal">
+    <PopoverTrigger
+      v-if="$slots.default"
+      ref="trigger"
+      as-child
+      :style="{ transformOrigin: pressOrigin }"
+    >
       <slot />
     </PopoverTrigger>
     <PopoverPortal>
       <PopoverContent
+        v-bind="{ ...$attrs, ...events }"
+        :reference="reference"
         as-child
         :side="props.side"
         :align="props.align"

package/src/components/popover/PopoverContent.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+  import {
+    PopoverContent,
+    useForwardPropsEmits,
+    type PopoverContentProps,
+    type PopoverContentEmits,
+  } from 'reka-ui'
+  import { usePopoverCloseFocus } from './composables/usePopoverCloseFocus'
+
+  defineOptions({ name: 'HnPopoverContent' })
+
+  const props = defineProps<PopoverContentProps>()
+  const emit = defineEmits<PopoverContentEmits>()
+  const forwarded = useForwardPropsEmits(props, emit)
+  const closeAutoFocus = usePopoverCloseFocus(emit)
+</script>
+
+<template>
+  <PopoverContent
+    v-bind="{ ...forwarded, onCloseAutoFocus: closeAutoFocus }"
+    :reference="props.reference"
+  >
+    <slot />
+  </PopoverContent>
+</template>

package/src/components/popover/composables/usePopoverCloseFocus.ts

@@ -0,0 +1,17 @@
+import { nextTick } from 'vue'
+import { injectPopoverRootContext } from 'reka-ui'
+
+export function usePopoverCloseFocus(emit: (event: 'closeAutoFocus', value: Event) => void) {
+  const root = injectPopoverRootContext()
+
+  return (event: Event) => {
+    emit('closeAutoFocus', event)
+    if (!event.defaultPrevented || !root.triggerElement.value) return
+
+    const trigger = root.triggerElement.value
+    root.triggerElement.value = undefined
+    nextTick(() => {
+      root.triggerElement.value ??= trigger
+    })
+  }
+}

package/src/components/radio-group/RadioGroup.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends SelectOption = SelectOption">
   import { RadioGroupItem, RadioGroupRoot } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { useFieldControl } from '../form-field/context'
@@ -22,7 +22,7 @@
   defineOptions({ name: 'HnRadioGroup' })
 
   const props = defineProps<{
-    options: SelectOption[]
+    options: T[]
     orientation?: CheckboxGroupVariants['orientation']
     size?: CheckboxVariants['size']
     controlPlacement?: CheckboxVariants['controlPlacement']
@@ -39,7 +39,7 @@
     disabled: () => props.disabled,
   })
 
-  defineSlots<{ option(props: { option: SelectOption }): unknown }>()
+  defineSlots<{ option?(props: { option: T }): unknown }>()
 </script>
 
 <template>