@hina-ui/vue 1.0.0

package/src/components/description-list/DescriptionTerm.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+
+  defineOptions({ name: 'HnDescriptionTerm' })
+
+  const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <dt :class="cn(props.class)">
+    <slot />
+  </dt>
+</template>

package/src/components/dialog/Dialog.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+  import {
+    DialogRoot,
+    DialogTrigger,
+    DialogPortal,
+    DialogOverlay,
+    DialogContent,
+    DialogTitle,
+    DialogDescription,
+    DialogClose,
+  } from 'reka-ui'
+  import CloseButton from '../close-button/CloseButton.vue'
+  import Card from '../card/Card.vue'
+  import ScrollArea from '../scroll-area/ScrollArea.vue'
+  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'
+
+  defineOptions({ name: 'HnDialog' })
+
+  const props = withDefaults(
+    defineProps<{
+      title: string
+      description?: string
+      size?: 'sm' | 'md' | 'lg'
+      placement?: 'center' | 'bottom'
+      locked?: boolean
+      class?: string
+    }>(),
+    { size: 'md', locked: false },
+  )
+
+  function guard(e: Event) {
+    if (props.locked) e.preventDefault()
+  }
+
+  const open = defineModel<boolean>('open')
+  const t = useUiLocale()
+
+  function close() {
+    open.value = false
+  }
+</script>
+
+<template>
+  <DialogRoot v-model:open="open">
+    <DialogTrigger v-if="$slots.default" as-child>
+      <slot />
+    </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' }),
+          )
+        "
+      >
+        <DialogContent as-child @escape-key-down="guard" @interact-outside="guard">
+          <Card
+            :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 }),
+                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>
+              </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" />
+              </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>
+          </Card>
+        </DialogContent>
+      </div>
+    </DialogPortal>
+  </DialogRoot>
+</template>

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

@@ -0,0 +1,32 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const dialogWrapper = tv({
+  base: '',
+  variants: {
+    placement: {
+      center: 'place-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',
+    },
+  },
+  defaultVariants: { placement: 'auto' },
+})
+
+export const dialogCard = tv({
+  base: '',
+  variants: {
+    placement: {
+      center: 'hn-anim-modal',
+      bottom: 'hn-anim-sheet-bottom',
+      auto: 'hn-anim-modal max-sm:hn-anim-sheet-bottom max-sm:max-w-none',
+    },
+    size: {
+      sm: 'max-w-sm',
+      md: 'max-w-md',
+      lg: 'max-w-xl',
+    },
+  },
+  defaultVariants: { placement: 'auto', size: 'md' },
+})
+
+export type DialogVariants = VariantProps<typeof dialogCard>

package/src/components/disclosure-icon/DisclosureIcon.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { ChevronDown, ChevronRight } from '@lucide/vue'
+  import { cn } from '../../lib/cn'
+  import { disclosureIcon, type DisclosureIconVariants } from './disclosure-icon.variants'
+
+  defineOptions({ name: 'HnDisclosureIcon' })
+
+  const props = withDefaults(
+    defineProps<{
+      direction?: DisclosureIconVariants['direction']
+      open?: boolean
+      class?: string
+    }>(),
+    { direction: 'down', open: undefined },
+  )
+
+  const classes = computed(() =>
+    cn(
+      'inline-flex',
+      disclosureIcon({
+        direction: props.direction,
+        state: props.open === undefined ? 'auto' : props.open ? 'open' : 'closed',
+      }),
+      props.class,
+    ),
+  )
+</script>
+
+<template>
+  <span aria-hidden="true" :class="classes">
+    <slot>
+      <component :is="props.direction === 'end' ? ChevronRight : ChevronDown" />
+    </slot>
+  </span>
+</template>

package/src/components/disclosure-icon/disclosure-icon.variants.ts

@@ -0,0 +1,25 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const disclosureIcon = tv({
+  base: 'hn-transition shrink-0',
+  variants: {
+    direction: {
+      down: '',
+      end: '',
+    },
+    state: {
+      auto: '',
+      open: '',
+      closed: '',
+    },
+  },
+  compoundVariants: [
+    { direction: 'down', state: 'auto', class: 'group-data-open/hn-disclosure:rotate-180' },
+    { direction: 'end', state: 'auto', class: 'group-data-open/hn-disclosure:rotate-90' },
+    { direction: 'down', state: 'open', class: 'rotate-180' },
+    { direction: 'end', state: 'open', class: 'rotate-90' },
+  ],
+  defaultVariants: { direction: 'down', state: 'auto' },
+})
+
+export type DisclosureIconVariants = VariantProps<typeof disclosureIcon>

package/src/components/divider/Divider.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+  import { useSlots } from 'vue'
+  import { Separator } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+
+  defineOptions({ name: 'HnDivider' })
+
+  const props = withDefaults(
+    defineProps<{
+      orientation?: 'horizontal' | 'vertical'
+      decorative?: boolean
+      class?: string
+    }>(),
+    { orientation: 'horizontal', decorative: false },
+  )
+
+  const slots = useSlots()
+</script>
+
+<template>
+  <div
+    v-if="slots.default && props.orientation === 'horizontal'"
+    :class="cn('flex w-full items-center gap-3', props.class)"
+  >
+    <Separator decorative class="bg-line h-px flex-1" />
+    <span class="text-faint shrink-0 text-sm">
+      <slot />
+    </span>
+    <Separator decorative class="bg-line h-px flex-1" />
+  </div>
+  <Separator
+    v-else
+    :orientation="props.orientation"
+    :decorative="props.decorative"
+    :class="
+      cn(
+        'bg-line',
+        props.orientation === 'horizontal' ? 'h-px w-full' : 'w-px self-stretch',
+        props.class,
+      )
+    "
+  />
+</template>

package/src/components/drawer/Drawer.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+  import {
+    DialogRoot,
+    DialogTrigger,
+    DialogPortal,
+    DialogOverlay,
+    DialogContent,
+    DialogTitle,
+    DialogDescription,
+    DialogClose,
+  } from 'reka-ui'
+  import CloseButton from '../close-button/CloseButton.vue'
+  import Card from '../card/Card.vue'
+  import ScrollArea from '../scroll-area/ScrollArea.vue'
+  import Heading from '../heading/Heading.vue'
+  import Text from '../text/Text.vue'
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import { drawerCard } from './drawer.variants'
+
+  defineOptions({ name: 'HnDrawer' })
+
+  const props = withDefaults(
+    defineProps<{
+      title: string
+      description?: string
+      side?: 'start' | 'end'
+      size?: 'sm' | 'md' | 'lg'
+      locked?: boolean
+      class?: string
+    }>(),
+    { side: 'end', size: 'md', locked: false },
+  )
+
+  function guard(e: Event) {
+    if (props.locked) e.preventDefault()
+  }
+
+  const open = defineModel<boolean>('open')
+  const t = useUiLocale()
+
+  function close() {
+    open.value = false
+  }
+</script>
+
+<template>
+  <DialogRoot v-model:open="open">
+    <DialogTrigger v-if="$slots.default" as-child>
+      <slot />
+    </DialogTrigger>
+    <DialogPortal>
+      <DialogOverlay class="hn-scrim" />
+      <DialogContent as-child @escape-key-down="guard" @interact-outside="guard">
+        <Card
+          :data-hn-side="props.side"
+          :padded="false"
+          :class="
+            cn(
+              'hn-anim-drawer pointer-events-auto fixed inset-y-0 z-(--hn-z-overlay) flex flex-col gap-4',
+              'max-w-[calc(100vw-3rem)] rounded-none py-(--hn-panel-p) shadow-lg outline-none',
+              drawerCard({ side: props.side, size: props.size }),
+              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>
+            </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 grow">
+            <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>
+        </Card>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>

package/src/components/drawer/drawer.variants.ts

@@ -0,0 +1,19 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const drawerCard = tv({
+  base: '',
+  variants: {
+    side: {
+      start: 'start-0',
+      end: 'end-0',
+    },
+    size: {
+      sm: 'w-72',
+      md: 'w-90',
+      lg: 'w-120',
+    },
+  },
+  defaultVariants: { side: 'end', size: 'md' },
+})
+
+export type DrawerVariants = VariantProps<typeof drawerCard>

package/src/components/dropdown-menu/DropdownMenu.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import {
+    DropdownMenuRoot,
+    DropdownMenuTrigger,
+    DropdownMenuPortal,
+    DropdownMenuContent,
+  } from 'reka-ui'
+  import Card from '../card/Card.vue'
+  import { cn } from '../../lib/cn'
+
+  defineOptions({ name: 'HnDropdownMenu' })
+
+  const props = withDefaults(
+    defineProps<{
+      label?: string
+      side?: 'top' | 'right' | 'bottom' | 'left'
+      align?: 'start' | 'center' | 'end'
+      sideOffset?: number
+      class?: string
+    }>(),
+    { side: 'bottom', align: 'center', sideOffset: 8 },
+  )
+
+  const open = defineModel<boolean>('open')
+
+  const pressOrigin = computed(() => {
+    if (props.side === 'left') return 'right'
+    if (props.side === 'right') return 'left'
+    if (props.align === 'start') return 'left'
+    if (props.align === 'end') return 'right'
+    return 'center'
+  })
+</script>
+
+<template>
+  <DropdownMenuRoot v-model:open="open" modal>
+    <DropdownMenuTrigger
+      as-child
+      class="group/hn-disclosure"
+      :style="{ transformOrigin: pressOrigin }"
+    >
+      <slot />
+    </DropdownMenuTrigger>
+    <DropdownMenuPortal>
+      <DropdownMenuContent
+        as-child
+        :aria-label="props.label"
+        :side="props.side"
+        :align="props.align"
+        :side-offset="props.sideOffset"
+      >
+        <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>
+      </DropdownMenuContent>
+    </DropdownMenuPortal>
+  </DropdownMenuRoot>
+</template>

package/src/components/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+  import { Check } from '@lucide/vue'
+  import { DropdownMenuCheckboxItem, DropdownMenuItemIndicator } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { dropdownItem } from './dropdown-menu.variants'
+
+  defineOptions({ name: 'HnDropdownMenuCheckboxItem', inheritAttrs: false })
+
+  const props = defineProps<{
+    disabled?: boolean
+    textValue?: string
+    class?: string
+  }>()
+
+  const checked = defineModel<boolean>('checked', { default: false })
+</script>
+
+<template>
+  <DropdownMenuCheckboxItem
+    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">
+      <DropdownMenuItemIndicator>
+        <Check />
+      </DropdownMenuItemIndicator>
+    </span>
+  </DropdownMenuCheckboxItem>
+</template>

package/src/components/dropdown-menu/DropdownMenuGroup.vue

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

package/src/components/dropdown-menu/DropdownMenuItem.vue

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

package/src/components/dropdown-menu/DropdownMenuLabel.vue

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

package/src/components/dropdown-menu/DropdownMenuRadioGroup.vue

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

package/src/components/dropdown-menu/DropdownMenuRadioItem.vue

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

package/src/components/dropdown-menu/DropdownMenuSeparator.vue

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

package/src/components/dropdown-menu/DropdownMenuSub.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+  import { ChevronRight } from '@lucide/vue'
+  import {
+    DropdownMenuSub,
+    DropdownMenuSubTrigger,
+    DropdownMenuPortal,
+    DropdownMenuSubContent,
+  } from 'reka-ui'
+  import Card from '../card/Card.vue'
+  import { cn } from '../../lib/cn'
+  import { dropdownItem } from './dropdown-menu.variants'
+
+  defineOptions({ name: 'HnDropdownMenuSub' })
+
+  const props = defineProps<{
+    label?: string
+    disabled?: boolean
+    textValue?: string
+    class?: string
+  }>()
+
+  const open = defineModel<boolean>('open')
+</script>
+
+<template>
+  <DropdownMenuSub v-model:open="open">
+    <DropdownMenuSubTrigger
+      :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" />
+    </DropdownMenuSubTrigger>
+    <DropdownMenuPortal>
+      <DropdownMenuSubContent 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>
+      </DropdownMenuSubContent>
+    </DropdownMenuPortal>
+  </DropdownMenuSub>
+</template>

package/src/components/dropdown-menu/dropdown-menu.variants.ts

@@ -0,0 +1,19 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const dropdownItem = tv({
+  base: [
+    'hn-interactive hn-state-layer hn-press-none relative isolate flex w-full cursor-pointer',
+    'items-center gap-[var(--hn-control-gap)] rounded-md px-2.5 py-2 text-start text-sm select-none',
+    'outline-none [&_svg]:size-4 [&_svg]:shrink-0',
+    'data-disabled:pointer-events-none data-disabled:opacity-50',
+  ],
+  variants: {
+    tone: {
+      neutral: 'text-fg',
+      danger: 'text-danger-text [--hn-state-color:var(--hn-danger)]',
+    },
+  },
+  defaultVariants: { tone: 'neutral' },
+})
+
+export type DropdownItemVariants = VariantProps<typeof dropdownItem>