@hina-ui/vue 1.1.0 → 1.2.0

package/src/components/combobox/ComboboxList.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends SelectOption = SelectOption">
   import { Check } from '@lucide/vue'
   import {
     ComboboxContent,
@@ -19,11 +19,11 @@
 
   defineOptions({ name: 'HnComboboxList' })
 
-  const props = defineProps<{ options: SelectItems; keyboard?: boolean }>()
+  const props = defineProps<{ options: SelectItems<T>; keyboard?: boolean }>()
 
   const fresh = ref(false)
 
-  defineSlots<{ option(props: { option: SelectOption }): unknown }>()
+  defineSlots<{ option?(props: { option: T }): unknown }>()
 
   const t = useUiLocale()
 </script>

package/src/components/dialog/Dialog.vue

@@ -15,8 +15,7 @@
   import Heading from '../heading/Heading.vue'
   import Text from '../text/Text.vue'
   import { cn } from '../../lib/cn'
-  import { useUiLocale } from '../../locale'
-  import { dialogWrapper, dialogCard } from './dialog.variants'
+  import { dialogWrapper, dialogCard, type DialogVariants } from './dialog.variants'
 
   defineOptions({ name: 'HnDialog' })
 
@@ -24,20 +23,30 @@
     defineProps<{
       title: string
       description?: string
-      size?: 'sm' | 'md' | 'lg'
-      placement?: 'center' | 'bottom'
+      size?: DialogVariants['size']
+      placement?: 'center' | 'top' | 'bottom'
+      header?: boolean
+      closable?: boolean
       locked?: boolean
       class?: string
     }>(),
-    { size: 'md', locked: false },
+    { size: 'md', header: true, closable: true, locked: false },
   )
 
+  const slots = defineSlots<{
+    default?(): unknown
+    icon?(): unknown
+    title?(): unknown
+    body?(props: { close: () => void }): unknown
+    content?(props: { close: () => void }): unknown
+    footer?(props: { close: () => void }): unknown
+  }>()
+
   function guard(e: Event) {
     if (props.locked) e.preventDefault()
   }
 
   const open = defineModel<boolean>('open')
-  const t = useUiLocale()
 
   function close() {
     open.value = false
@@ -51,50 +60,72 @@
     </DialogTrigger>
     <DialogPortal>
       <DialogOverlay class="hn-scrim" />
-      <div
-        :class="
-          cn(
-            'pointer-events-none fixed inset-0 z-(--hn-z-overlay) grid',
-            dialogWrapper({ placement: props.placement ?? 'auto' }),
-          )
-        "
-      >
+      <div :class="dialogWrapper({ placement: props.placement ?? 'auto' })">
         <DialogContent as-child @escape-key-down="guard" @interact-outside="guard">
           <Card
+            v-bind="props.description ? {} : { 'aria-describedby': undefined }"
             :padded="false"
             :class="
               cn(
-                'pointer-events-auto flex w-full flex-col gap-4 shadow-lg outline-none',
-                'max-h-[calc(100dvh-2rem)] py-(--hn-panel-p)',
-                dialogCard({ placement: props.placement ?? 'auto', size: props.size }),
+                dialogCard({
+                  placement: props.placement ?? 'auto',
+                  size: props.size,
+                  padded: !slots.body,
+                  fitViewport: true,
+                }),
                 props.class,
               )
             "
           >
-            <div class="flex shrink-0 items-start justify-between gap-4 px-(--hn-panel-p)">
-              <div class="flex min-w-0 flex-col gap-1.5">
-                <DialogTitle as-child>
-                  <Heading :level="2" size="lg">{{ props.title }}</Heading>
-                </DialogTitle>
-                <DialogDescription v-if="props.description" as-child>
-                  <Text tone="muted">{{ props.description }}</Text>
-                </DialogDescription>
+            <template v-if="!props.header || slots.body">
+              <DialogTitle as-child>
+                <Heading :level="2" class="sr-only">{{ props.title }}</Heading>
+              </DialogTitle>
+              <DialogDescription v-if="props.description" class="sr-only">
+                {{ props.description }}
+              </DialogDescription>
+            </template>
+            <slot v-if="slots.body" name="body" :close="close" />
+            <template v-else>
+              <div
+                v-if="props.header"
+                class="flex shrink-0 items-start justify-between gap-4 px-(--hn-panel-p)"
+              >
+                <div class="flex min-w-0 flex-col gap-1.5">
+                  <div class="flex min-w-0 items-center gap-2">
+                    <span
+                      v-if="slots.icon"
+                      class="text-muted flex shrink-0 [&_svg]:size-5"
+                      aria-hidden="true"
+                    >
+                      <slot name="icon" />
+                    </span>
+                    <DialogTitle as-child>
+                      <Heading :level="2" size="lg" class="min-w-0">
+                        <slot name="title">{{ props.title }}</slot>
+                      </Heading>
+                    </DialogTitle>
+                  </div>
+                  <DialogDescription v-if="props.description" as-child>
+                    <Text tone="muted">{{ props.description }}</Text>
+                  </DialogDescription>
+                </div>
+                <DialogClose v-if="props.closable" as-child>
+                  <CloseButton :disabled="props.locked" class="-mt-1.5 -me-1.5 shrink-0" />
+                </DialogClose>
               </div>
-              <DialogClose as-child>
-                <CloseButton :disabled="props.locked" class="-mt-1.5 -me-1.5 shrink-0" />
-              </DialogClose>
-            </div>
-            <ScrollArea v-if="$slots.content" class="min-h-0">
-              <div class="px-(--hn-panel-p) py-1">
-                <slot name="content" :close="close" />
+              <ScrollArea v-if="$slots.content" class="min-h-0">
+                <div class="px-(--hn-panel-p) py-1">
+                  <slot name="content" :close="close" />
+                </div>
+              </ScrollArea>
+              <div
+                v-if="$slots.footer"
+                class="flex shrink-0 justify-end gap-(--hn-inline-gap) px-(--hn-panel-p)"
+              >
+                <slot name="footer" :close="close" />
               </div>
-            </ScrollArea>
-            <div
-              v-if="$slots.footer"
-              class="flex shrink-0 justify-end gap-(--hn-inline-gap) px-(--hn-panel-p)"
-            >
-              <slot name="footer" :close="close" />
-            </div>
+            </template>
           </Card>
         </DialogContent>
       </div>

package/src/components/dialog/dialog.variants.ts

@@ -1,10 +1,11 @@
 import { tv, type VariantProps } from '../../lib/tv'
 
 export const dialogWrapper = tv({
-  base: '',
+  base: 'pointer-events-none fixed inset-0 z-(--hn-z-overlay) grid',
   variants: {
     placement: {
       center: 'place-items-center p-4',
+      top: 'items-start justify-items-center p-4',
       bottom: 'items-end justify-items-center p-4',
       auto: 'place-items-center p-4 max-sm:items-end max-sm:justify-items-stretch',
     },
@@ -13,10 +14,13 @@ export const dialogWrapper = tv({
 })
 
 export const dialogCard = tv({
-  base: '',
+  base: 'pointer-events-auto flex w-full flex-col shadow-lg outline-none',
   variants: {
+    padded: { true: 'gap-4 py-(--hn-panel-p)' },
+    fitViewport: { true: 'max-h-[calc(100dvh-2rem)]' },
     placement: {
       center: 'hn-anim-modal',
+      top: 'hn-anim-sheet-top',
       bottom: 'hn-anim-sheet-bottom',
       auto: 'hn-anim-modal max-sm:hn-anim-sheet-bottom max-sm:max-w-none',
     },
@@ -24,9 +28,11 @@ export const dialogCard = tv({
       sm: 'max-w-sm',
       md: 'max-w-md',
       lg: 'max-w-xl',
+      xl: 'max-w-2xl',
+      '2xl': 'max-w-4xl',
     },
   },
-  defaultVariants: { placement: 'auto', size: 'md' },
+  defaultVariants: { placement: 'auto', size: 'md', padded: true },
 })
 
 export type DialogVariants = VariantProps<typeof dialogCard>

package/src/components/image/ImageGroup.vue

@@ -1,40 +1,12 @@
 <script setup lang="ts">
-  import { computed, reactive, shallowRef } from 'vue'
   import Lightbox from '../lightbox/Lightbox.vue'
-  import type { LightboxItem } from '../lightbox/types'
-  import { provideImageGroup } from './context'
+  import { useImageGroupState } from './composables/useImageGroupState'
 
   defineOptions({ name: 'HnImageGroup' })
 
   const props = defineProps<{ loop?: boolean }>()
 
-  const registry = reactive(new Map<string, () => LightboxItem>())
-  const open = shallowRef(false)
-  const index = shallowRef(0)
-
-  function byDom(a: LightboxItem, b: LightboxItem): number {
-    const first = a.source?.()
-    const second = b.source?.()
-    if (!first || !second || first === second) return 0
-    return first.compareDocumentPosition(second) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
-  }
-
-  const items = computed(() => [...registry.values()].map(read => read()).sort(byDom))
-
-  provideImageGroup({
-    register: (id, item) => {
-      registry.set(id, item)
-    },
-    unregister: id => {
-      registry.delete(id)
-    },
-    open: id => {
-      const at = items.value.findIndex(item => item.id === id)
-      if (at < 0) return
-      index.value = at
-      open.value = true
-    },
-  })
+  const { items, open, index } = useImageGroupState()
 </script>
 
 <template>

package/src/components/image/composables/useImageGroupState.ts

@@ -0,0 +1,35 @@
+import { computed, reactive, shallowRef } from 'vue'
+import type { LightboxItem } from '../../lightbox/types'
+import { provideImageGroup } from '../context'
+
+export function useImageGroupState() {
+  const registry = reactive(new Map<string, () => LightboxItem>())
+  const open = shallowRef(false)
+  const index = shallowRef(0)
+
+  function byDom(a: LightboxItem, b: LightboxItem): number {
+    const first = a.source?.()
+    const second = b.source?.()
+    if (!first || !second || first === second) return 0
+    return first.compareDocumentPosition(second) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+  }
+
+  const items = computed(() => [...registry.values()].map(read => read()).sort(byDom))
+
+  provideImageGroup({
+    register: (id, item) => {
+      registry.set(id, item)
+    },
+    unregister: id => {
+      registry.delete(id)
+    },
+    open: id => {
+      const at = items.value.findIndex(item => item.id === id)
+      if (at < 0) return
+      index.value = at
+      open.value = true
+    },
+  })
+
+  return { items, open, index }
+}

package/src/components/input/Input.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
   import { shallowRef } from 'vue'
   import InputBase from './InputBase.vue'
-  import type { InputVariants } from './input.variants'
+  import type { TextInputVariants } from './input.variants'
 
   defineOptions({ name: 'HnInput', inheritAttrs: false })
 
   const props = defineProps<{
-    variant?: InputVariants['variant']
-    size?: InputVariants['size']
+    variant?: TextInputVariants['variant']
+    size?: TextInputVariants['size']
     clearable?: boolean
     loading?: boolean
     disabled?: boolean

package/src/components/input/InputBase.vue

@@ -14,15 +14,15 @@
     inputAdornment,
     inputControl,
     inputEmbedded,
-    inputHost,
-    type InputVariants,
+    textInputHost,
+    type TextInputVariants,
   } from './input.variants'
 
   defineOptions({ name: 'HnInputBase', inheritAttrs: false })
 
   const props = defineProps<{
-    variant?: InputVariants['variant']
-    size?: InputVariants['size']
+    variant?: TextInputVariants['variant']
+    size?: TextInputVariants['size']
     clearable?: boolean
     loading?: boolean
     disabled?: boolean
@@ -70,7 +70,7 @@
     :aria-busy="props.loading || undefined"
     :class="
       cn(
-        group ? inputEmbedded() : inputHost({ variant: props.variant, size: props.size }),
+        group ? inputEmbedded() : textInputHost({ variant: props.variant, size: props.size }),
         props.class,
       )
     "

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

@@ -2,14 +2,14 @@ import { tv, type VariantProps } from '../../lib/tv'
 
 export const inputHost = tv({
   base: [
-    'group/hn-field hn-field text-fg flex w-full min-w-0 cursor-text items-stretch overflow-hidden rounded-md border font-medium',
+    'group/hn-field text-fg flex w-full min-w-0 cursor-text items-stretch overflow-hidden rounded-md border font-medium',
     'data-disabled:cursor-not-allowed data-disabled:opacity-50',
   ],
   variants: {
     variant: {
       primary:
-        'border-line [--hn-field-bg:var(--hn-surface)] [--hn-field-shadow:var(--hn-shadow-sm)]',
-      secondary: 'border-transparent [--hn-field-bg:var(--hn-bg-inset)]',
+        'hn-field border-line [--hn-field-bg:var(--hn-surface)] [--hn-field-shadow:var(--hn-shadow-sm)]',
+      secondary: 'hn-field border-transparent [--hn-field-bg:var(--hn-bg-inset)]',
     },
     size: {
       sm: 'h-[var(--hn-control-h-sm)] text-sm [--hn-input-h:var(--hn-control-h-sm)] [--hn-input-px:var(--hn-control-px-sm)] [--hn-input-icon:0.875rem]',
@@ -23,6 +23,15 @@ export const inputHost = tv({
   },
 })
 
+export const textInputHost = tv({
+  extend: inputHost,
+  variants: {
+    variant: {
+      bare: 'rounded-none border-0 bg-transparent shadow-none outline-none',
+    },
+  },
+})
+
 export const inputControl = tv({
   base: [
     'h-full min-w-0 flex-1 bg-transparent px-[var(--hn-input-px)] text-inherit outline-none [font:inherit]',
@@ -62,6 +71,7 @@ export const inputActionSlot = tv({
 })
 
 export type InputVariants = VariantProps<typeof inputHost>
+export type TextInputVariants = VariantProps<typeof textInputHost>
 
 export const inputEmbedded = tv({
   base: [

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/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>