@hina-ui/vue 1.0.0

package/src/components/toast/composables/useToastLayout.ts

@@ -0,0 +1,84 @@
+import { computed, onBeforeUnmount, reactive, watch } from 'vue'
+import { toastState, type ToastItem } from '../store'
+
+export const VISIBLE_STACK = 3
+
+const GAP = 12
+const CARD_CHROME_BLOCK = 34
+
+export function useToastLayout() {
+  const heights = reactive(new Map<number | string, number>())
+  const observers = new Map<number | string, { observer: ResizeObserver; el: HTMLElement }>()
+  const lastLayout = new Map<number | string, { index: number; offset: number }>()
+
+  const openItems = computed(() => toastState.items.filter(item => item.open))
+
+  const layout = computed(() => {
+    const map = new Map<number | string, { index: number; offset: number }>()
+    const open = openItems.value
+    let offset = 0
+    for (let i = open.length - 1; i >= 0; i -= 1) {
+      const item = open[i]!
+      const index = open.length - 1 - i
+      map.set(item.id, { index, offset })
+      offset += (heights.get(item.id) ?? 0) + GAP
+    }
+    for (const [id, slot] of map) lastLayout.set(id, slot)
+    return map
+  })
+
+  const frontHeight = computed(() => {
+    const front = openItems.value.at(-1)
+    return front ? (heights.get(front.id) ?? 0) : 0
+  })
+
+  function slotOf(item: ToastItem) {
+    return layout.value.get(item.id) ?? lastLayout.get(item.id) ?? { index: 0, offset: 0 }
+  }
+
+  function itemStyle(item: ToastItem) {
+    const slot = slotOf(item)
+    const selfHeight = heights.get(item.id)
+    return {
+      '--hn-t-index': String(slot.index),
+      '--hn-t-offset': `${slot.offset}px`,
+      ...(selfHeight ? { '--hn-t-self-h': `${selfHeight}px` } : {}),
+      ...(frontHeight.value > 0 ? { '--hn-t-front-h': `${frontHeight.value}px` } : {}),
+    }
+  }
+
+  function setItemRef(id: number | string, refValue: unknown) {
+    const el = refValue
+    if (!(el instanceof HTMLElement)) return
+    const existing = observers.get(id)
+    if (existing?.el === el) return
+    existing?.observer.disconnect()
+    const observer = new ResizeObserver(() => {
+      heights.set(id, el.offsetHeight + CARD_CHROME_BLOCK)
+    })
+    observer.observe(el)
+    heights.set(id, el.offsetHeight + CARD_CHROME_BLOCK)
+    observers.set(id, { observer, el })
+  }
+
+  watch(
+    () => toastState.items.length,
+    () => {
+      const alive = new Set(toastState.items.map(item => item.id))
+      for (const [id, entry] of observers) {
+        if (alive.has(id)) continue
+        entry.observer.disconnect()
+        observers.delete(id)
+        heights.delete(id)
+        lastLayout.delete(id)
+      }
+    },
+  )
+
+  onBeforeUnmount(() => {
+    for (const entry of observers.values()) entry.observer.disconnect()
+    observers.clear()
+  })
+
+  return { slotOf, itemStyle, setItemRef }
+}

package/src/components/toast/store.ts

@@ -0,0 +1,234 @@
+import { markRaw, reactive, type Component } from 'vue'
+import { DURATION } from '../../motion'
+
+export type ToastTone = 'neutral' | 'success' | 'danger' | 'warning' | 'info' | 'loading'
+
+export type ToasterPosition =
+  'bottom-end' | 'bottom-start' | 'bottom-center' | 'top-end' | 'top-start' | 'top-center'
+
+export interface ToastAction {
+  label: string
+  onClick?: () => void
+}
+
+export interface ToastItem {
+  id: number | string
+  tone: ToastTone
+  message: string
+  description?: string
+  duration: number
+  open: boolean
+  action?: ToastAction
+  cancel?: ToastAction
+  component?: Component
+  componentProps?: Record<string, unknown>
+  onDismiss?: (id: number | string) => void
+  onAutoClose?: (id: number | string) => void
+}
+
+export interface ToastOptions {
+  id?: number | string
+  tone?: ToastTone
+  description?: string
+  duration?: number
+  action?: ToastAction
+  cancel?: ToastAction
+  onDismiss?: (id: number | string) => void
+  onAutoClose?: (id: number | string) => void
+}
+
+type MessageInput<T> = string | { message: string; description?: string } | T
+
+export interface ToastPromiseMessages<T> {
+  loading: string
+  success: MessageInput<(value: T) => string | { message: string; description?: string }>
+  error: MessageInput<(reason: unknown) => string | { message: string; description?: string }>
+}
+
+const MAX_VISIBLE = 5
+const SETTLE_DELAY = (DURATION.exit + 0.06) * 1000
+
+let seed = 0
+
+export const toastState: { items: ToastItem[] } = reactive({ items: [] })
+
+interface Timer {
+  handle: ReturnType<typeof setTimeout> | undefined
+  remaining: number
+  startedAt: number
+}
+
+const timers = new Map<number | string, Timer>()
+const pauseReasons = new Set<string>()
+
+function fire(id: number | string) {
+  timers.delete(id)
+  const item = toastState.items.find(t => t.id === id)
+  if (item) close(item, 'auto')
+}
+
+function startTimer(item: ToastItem) {
+  stopTimer(item.id)
+  if (item.duration <= 0) return
+  const timer: Timer = { handle: undefined, remaining: item.duration, startedAt: Date.now() }
+  timers.set(item.id, timer)
+  if (pauseReasons.size === 0) timer.handle = setTimeout(() => fire(item.id), timer.remaining)
+}
+
+function stopTimer(id: number | string) {
+  const timer = timers.get(id)
+  if (timer?.handle) clearTimeout(timer.handle)
+  timers.delete(id)
+}
+
+export function pauseTimers(reason: string) {
+  if (pauseReasons.has(reason)) return
+  const wasRunning = pauseReasons.size === 0
+  pauseReasons.add(reason)
+  if (!wasRunning) return
+  for (const timer of timers.values()) {
+    if (!timer.handle) continue
+    clearTimeout(timer.handle)
+    timer.handle = undefined
+    timer.remaining = Math.max(0, timer.remaining - (Date.now() - timer.startedAt))
+  }
+}
+
+export function resumeTimers(reason: string) {
+  pauseReasons.delete(reason)
+  if (pauseReasons.size > 0) return
+  for (const [id, timer] of timers) {
+    if (timer.handle) continue
+    timer.startedAt = Date.now()
+    timer.handle = setTimeout(() => fire(id), timer.remaining)
+  }
+}
+
+function settle(item: ToastItem) {
+  const index = toastState.items.indexOf(item)
+  if (index >= 0) toastState.items.splice(index, 1)
+}
+
+function close(item: ToastItem, source: 'manual' | 'auto') {
+  if (!item.open) return
+  item.open = false
+  stopTimer(item.id)
+  if (source === 'auto') item.onAutoClose?.(item.id)
+  item.onDismiss?.(item.id)
+  setTimeout(() => settle(item), SETTLE_DELAY)
+}
+
+export function dismiss(id?: number | string) {
+  for (const item of toastState.items) {
+    if (id !== undefined && item.id !== id) continue
+    close(item, 'manual')
+  }
+}
+
+function defaultDuration(tone: ToastTone) {
+  return tone === 'loading' ? 0 : 4000
+}
+
+interface InternalOptions extends ToastOptions {
+  component?: Component
+  componentProps?: Record<string, unknown>
+}
+
+function push(message: string, options: InternalOptions = {}) {
+  const tone = options.tone ?? 'neutral'
+  const existing =
+    options.id !== undefined ? toastState.items.find(t => t.id === options.id) : undefined
+
+  if (existing && existing.open) {
+    existing.tone = tone
+    existing.message = message
+    existing.description = options.description
+    existing.duration = options.duration ?? defaultDuration(tone)
+    existing.action = options.action
+    existing.cancel = options.cancel
+    existing.component = options.component ? markRaw(options.component) : undefined
+    existing.componentProps = options.componentProps
+    if (options.onDismiss) existing.onDismiss = options.onDismiss
+    if (options.onAutoClose) existing.onAutoClose = options.onAutoClose
+    startTimer(existing)
+    return existing.id
+  }
+
+  if (existing) settle(existing)
+
+  const item: ToastItem = {
+    id: options.id ?? ++seed,
+    tone,
+    message,
+    description: options.description,
+    duration: options.duration ?? defaultDuration(tone),
+    open: true,
+    action: options.action,
+    cancel: options.cancel,
+    component: options.component ? markRaw(options.component) : undefined,
+    componentProps: options.componentProps,
+    onDismiss: options.onDismiss,
+    onAutoClose: options.onAutoClose,
+  }
+  toastState.items.push(item)
+  startTimer(item)
+
+  const visible = toastState.items.filter(t => t.open)
+  for (const stale of visible.slice(0, Math.max(0, visible.length - MAX_VISIBLE))) {
+    close(stale, 'manual')
+  }
+  return item.id
+}
+
+function resolveMessage(
+  input: MessageInput<(v: never) => string | { message: string; description?: string }>,
+  value: unknown,
+): { message: string; description?: string } {
+  const raw = typeof input === 'function' ? (input as (v: unknown) => unknown)(value) : input
+  if (typeof raw === 'string') return { message: raw }
+  return raw as { message: string; description?: string }
+}
+
+type TonedOptions = Omit<ToastOptions, 'tone'>
+
+function promiseToast<T>(
+  promise: Promise<T>,
+  messages: ToastPromiseMessages<T>,
+  options: TonedOptions = {},
+): Promise<T> {
+  const id = push(messages.loading, { ...options, tone: 'loading', duration: 0 })
+  promise
+    .then(value => {
+      const done = resolveMessage(messages.success, value)
+      push(done.message, { ...options, id, tone: 'success', description: done.description })
+    })
+    .catch(reason => {
+      const done = resolveMessage(messages.error, reason)
+      push(done.message, { ...options, id, tone: 'danger', description: done.description })
+    })
+  return promise
+}
+
+export const toast = Object.assign(
+  (message: string, options?: ToastOptions) => push(message, options),
+  {
+    success: (message: string, options?: TonedOptions) =>
+      push(message, { ...options, tone: 'success' }),
+    danger: (message: string, options?: TonedOptions) =>
+      push(message, { ...options, tone: 'danger' }),
+    warning: (message: string, options?: TonedOptions) =>
+      push(message, { ...options, tone: 'warning' }),
+    info: (message: string, options?: TonedOptions) => push(message, { ...options, tone: 'info' }),
+    loading: (message: string, options?: TonedOptions) =>
+      push(message, { ...options, tone: 'loading' }),
+    custom: (
+      component: Component,
+      options?: TonedOptions & { props?: Record<string, unknown> },
+    ) => {
+      const { props: componentProps, ...rest } = options ?? {}
+      return push('', { ...rest, component, componentProps })
+    },
+    promise: promiseToast,
+    dismiss,
+  },
+)

package/src/components/toggle/Toggle.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+  import { Toggle as ToggleRoot, injectTooltipProviderContext } from 'reka-ui'
+  import { computed, useSlots } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { useFieldControl } from '../form-field/context'
+  import { useAccessibleName } from '../../lib/a11y'
+  import { Passthrough } from '../../lib/passthrough'
+  import { buttonIconBox } from '../button/button.variants'
+  import Ripple from '../ripple/Ripple.vue'
+  import Tooltip from '../tooltip/Tooltip.vue'
+  import { toggle, type ToggleVariants } from './toggle.variants'
+
+  defineOptions({ name: 'HnToggle', inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<{
+      label?: string
+      tooltip?: boolean
+      side?: 'top' | 'right' | 'bottom' | 'left'
+      variant?: Extract<ToggleVariants['variant'], 'ghost' | 'outline'>
+      size?: ToggleVariants['size']
+      pill?: boolean
+      disabled?: boolean
+      ripple?: boolean
+      class?: string
+    }>(),
+    { tooltip: true, side: 'top', variant: 'ghost', ripple: true },
+  )
+
+  const pressed = defineModel<boolean>({ default: false })
+
+  const slots = useSlots()
+
+  const {
+    id: fieldId,
+    disabled,
+    describedBy,
+  } = useFieldControl({
+    disabled: () => props.disabled,
+  })
+
+  defineSlots<{
+    default(): unknown
+    icon(props: { pressed: boolean }): unknown
+    'pressed-icon'(): unknown
+  }>()
+
+  useAccessibleName('Toggle', () => !props.label && !slots.default)
+
+  const provider = injectTooltipProviderContext(null)
+  const Wrapper = provider ? Tooltip : Passthrough
+
+  const iconBox = computed(() => buttonIconBox({ size: props.size }))
+  const swapped = computed(() => pressed.value && !!slots['pressed-icon'])
+</script>
+
+<template>
+  <Wrapper
+    :disabled="!props.tooltip || !props.label"
+    :content="props.label ?? ''"
+    :side="props.side"
+  >
+    <ToggleRoot
+      v-bind="$attrs"
+      v-model="pressed"
+      :id="fieldId"
+      :disabled="disabled"
+      :aria-describedby="describedBy"
+      :aria-label="props.label"
+      data-hn-toggle
+      :class="
+        cn(
+          toggle({
+            variant: props.variant,
+            size: props.size,
+            iconOnly: !!props.label,
+            pill: props.pill,
+          }),
+          props.class,
+        )
+      "
+    >
+      <Ripple v-if="props.ripple" :disabled="disabled" />
+      <span v-if="slots.icon" :class="iconBox">
+        <Transition
+          enter-active-class="hn-transition-base"
+          enter-from-class="scale-90 opacity-0"
+          leave-active-class="hn-transition absolute"
+          leave-to-class="scale-90 opacity-0"
+        >
+          <span v-if="swapped" key="on" class="inline-flex items-center justify-center">
+            <slot name="pressed-icon" />
+          </span>
+          <span v-else key="off" class="inline-flex items-center justify-center">
+            <slot name="icon" :pressed="pressed" />
+          </span>
+        </Transition>
+      </span>
+      <span v-if="slots.default" class="inline-flex items-center"><slot /></span>
+    </ToggleRoot>
+  </Wrapper>
+</template>

package/src/components/toggle/toggle.variants.ts

@@ -0,0 +1,10 @@
+import { tv, type VariantProps } from '../../lib/tv'
+import { button } from '../button/button.variants'
+
+export const toggle = tv({
+  extend: button,
+  base: 'aria-pressed:text-accent-text',
+  defaultVariants: { variant: 'ghost', tone: 'neutral', size: 'md' },
+})
+
+export type ToggleVariants = VariantProps<typeof toggle>

package/src/components/tooltip/Tooltip.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+  import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+
+  defineOptions({ name: 'HnTooltip' })
+
+  const props = withDefaults(
+    defineProps<{
+      content?: string
+      side?: 'top' | 'right' | 'bottom' | 'left'
+      align?: 'start' | 'center' | 'end'
+      sideOffset?: number
+      open?: boolean
+      disabled?: boolean
+      class?: string
+    }>(),
+    { side: 'top', align: 'center', sideOffset: 8, open: undefined, disabled: false },
+  )
+</script>
+
+<template>
+  <TooltipRoot :open="props.open" :disabled="props.disabled" ignore-non-keyboard-focus>
+    <TooltipTrigger as-child>
+      <slot />
+    </TooltipTrigger>
+    <TooltipPortal>
+      <TooltipContent
+        :side="props.side"
+        :align="props.align"
+        :side-offset="props.sideOffset"
+        :aria-label="props.content"
+        :update-position-strategy="props.open === undefined ? 'optimized' : 'always'"
+        :class="
+          cn(
+            'hn-anim-pop [--hn-pop-in:var(--hn-duration-fast)] bg-neutral-solid text-neutral-solid-on z-(--hn-z-overlay)',
+            'max-w-xs rounded-md px-2.5 py-1 text-xs shadow-md',
+            props.class,
+          )
+        "
+      >
+        <slot name="content">{{ props.content }}</slot>
+        <TooltipArrow :width="10" :height="5" class="fill-neutral-solid" />
+      </TooltipContent>
+    </TooltipPortal>
+  </TooltipRoot>
+</template>

package/src/components/tooltip/TooltipProvider.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+  import { TooltipProvider as RekaTooltipProvider } from 'reka-ui'
+
+  defineOptions({ name: 'HnTooltipProvider' })
+
+  const props = withDefaults(
+    defineProps<{
+      delayDuration?: number
+      skipDelayDuration?: number
+    }>(),
+    { delayDuration: 150, skipDelayDuration: 300 },
+  )
+</script>
+
+<template>
+  <RekaTooltipProvider
+    :delay-duration="props.delayDuration"
+    :skip-delay-duration="props.skipDelayDuration"
+  >
+    <slot />
+  </RekaTooltipProvider>
+</template>

package/src/components/tree-select/TreeSelect.vue

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+  import { computed, ref, watch } from 'vue'
+  import { Check } from '@lucide/vue'
+  import {
+    PopoverContent,
+    PopoverPortal,
+    PopoverRoot,
+    PopoverTrigger,
+    TreeItem,
+    TreeRoot,
+  } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import Card from '../card/Card.vue'
+  import DisclosureIcon from '../disclosure-icon/DisclosureIcon.vue'
+  import { useFieldControl } from '../form-field/context'
+  import { injectInputGroup } from '../input-group/context'
+  import {
+    inputAdornment,
+    inputEmbedded,
+    inputHost,
+    type InputVariants,
+  } from '../input/input.variants'
+  import ScrollArea from '../scroll-area/ScrollArea.vue'
+  import { selectEmpty, selectTrigger } from '../select/select.variants'
+  import {
+    treeSelectContent,
+    treeSelectList,
+    treeSelectRow,
+    treeSelectToggle,
+  } from './tree-select.variants'
+  import { findNode, pathTo, type TreeSelectNode } from './types'
+
+  defineOptions({ name: 'HnTreeSelect', inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<{
+      items: TreeSelectNode[]
+      placeholder?: string
+      defaultExpanded?: Array<string | number>
+      variant?: InputVariants['variant']
+      size?: InputVariants['size']
+      disabled?: boolean
+      invalid?: boolean
+      class?: string
+    }>(),
+    { defaultExpanded: () => [] },
+  )
+
+  const model = defineModel<string | number | null>()
+  const open = defineModel<boolean>('open', { default: false })
+
+  defineSlots<{ node(props: { node: TreeSelectNode }): unknown }>()
+
+  const t = useUiLocale()
+  const group = injectInputGroup()
+
+  const {
+    id: fieldId,
+    invalid,
+    disabled,
+    describedBy,
+  } = useFieldControl({
+    invalid: () => props.invalid || !!group?.invalid.value,
+    disabled: () => props.disabled || !!group?.disabled.value,
+  })
+  const selected = computed(() => findNode(props.items, model.value))
+  const expanded = ref<string[]>([])
+
+  watch(
+    open,
+    isOpen => {
+      if (!isOpen) return
+      const path = pathTo(props.items, model.value) ?? []
+      expanded.value = Array.from(
+        new Set([...props.defaultExpanded, ...path].map(value => String(value))),
+      )
+    },
+    { immediate: true },
+  )
+
+  function key(node: TreeSelectNode) {
+    return String(node.value)
+  }
+
+  function choose(node: TreeSelectNode | undefined) {
+    if (!node || node.disabled) return
+    model.value = node.value
+    open.value = false
+  }
+
+  function keepRowClick(event: CustomEvent<{ originalEvent: Event }>) {
+    if (event.detail.originalEvent.type === 'click') event.preventDefault()
+  }
+</script>
+
+<template>
+  <PopoverRoot v-model:open="open" modal>
+    <PopoverTrigger
+      v-bind="$attrs"
+      :id="fieldId"
+      :aria-describedby="describedBy"
+      data-hn-tree-select
+      role="combobox"
+      :aria-expanded="open"
+      :disabled="disabled"
+      :data-placeholder="selected ? undefined : ''"
+      :data-invalid="invalid ? '' : undefined"
+      :aria-invalid="invalid || undefined"
+      :class="
+        cn(
+          group ? inputEmbedded() : inputHost({ variant: props.variant, size: props.size }),
+          selectTrigger(),
+          props.class,
+        )
+      "
+    >
+      <span class="min-w-0 flex-1 truncate">
+        {{ selected ? selected.label : (props.placeholder ?? t.select.placeholder) }}
+      </span>
+      <span :class="inputAdornment()">
+        <DisclosureIcon />
+      </span>
+    </PopoverTrigger>
+    <PopoverPortal>
+      <PopoverContent as-child align="start" :side-offset="8">
+        <Card :padded="false" data-hn-tree-select-content :class="treeSelectContent()">
+          <ScrollArea :class="treeSelectList()">
+            <TreeRoot
+              v-slot="{ flattenItems }"
+              v-model:expanded="expanded"
+              :items="props.items"
+              :get-key="key"
+              :get-children="node => node.children"
+              :model-value="selected"
+              class="flex flex-col p-1 outline-none"
+              @update:model-value="choose"
+            >
+              <TreeItem
+                v-for="item in flattenItems"
+                v-slot="{ isExpanded, isSelected, handleToggle }"
+                :key="item._id"
+                v-bind="item.bind"
+                :value="item.value"
+                :level="item.level"
+                :disabled="item.value.disabled"
+                :class="treeSelectRow()"
+                :style="{ paddingInlineStart: `calc(0.375rem + ${(item.level - 1) * 1.25}rem)` }"
+                @toggle="keepRowClick"
+              >
+                <span
+                  v-if="item.hasChildren"
+                  :class="treeSelectToggle()"
+                  @click.stop="handleToggle()"
+                >
+                  <DisclosureIcon direction="end" :open="isExpanded" />
+                </span>
+                <span v-else class="size-5 shrink-0" />
+                <span class="min-w-0 flex-1">
+                  <slot name="node" :node="item.value">
+                    <span class="block truncate">{{ item.value.label }}</span>
+                    <span v-if="item.value.description" class="text-muted block truncate text-xs">
+                      {{ item.value.description }}
+                    </span>
+                  </slot>
+                </span>
+                <span class="flex size-4 shrink-0 items-center justify-center">
+                  <Check v-if="isSelected" />
+                </span>
+              </TreeItem>
+              <div v-if="props.items.length === 0" :class="selectEmpty()">{{ t.select.empty }}</div>
+            </TreeRoot>
+          </ScrollArea>
+        </Card>
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
+</template>