@hina-ui/vue 1.0.0

package/src/components/empty/Empty.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+  import { Inbox } from '@lucide/vue'
+  import { useSlots } from 'vue'
+  import { cn } from '../../lib/cn'
+  import {
+    empty,
+    emptyActions,
+    emptyDescription,
+    emptyIcon,
+    emptyText,
+    emptyTitle,
+    type EmptyVariants,
+  } from './empty.variants'
+
+  defineOptions({ name: 'HnEmpty' })
+
+  const props = withDefaults(
+    defineProps<{
+      title?: string
+      description?: string
+      icon?: boolean
+      size?: EmptyVariants['size']
+      class?: string
+    }>(),
+    { icon: true, size: 'md' },
+  )
+
+  const slots = useSlots()
+</script>
+
+<template>
+  <div data-hn-empty :class="cn(empty({ size: props.size }), props.class)">
+    <span v-if="slots.icon" aria-hidden="true" class="flex shrink-0 justify-center">
+      <slot name="icon" />
+    </span>
+    <span v-else-if="props.icon" aria-hidden="true" :class="emptyIcon({ size: props.size })">
+      <Inbox />
+    </span>
+    <div v-if="props.title || props.description" :class="emptyText()">
+      <p v-if="props.title" :class="emptyTitle({ size: props.size })">{{ props.title }}</p>
+      <p v-if="props.description" :class="emptyDescription({ size: props.size })">
+        {{ props.description }}
+      </p>
+    </div>
+    <slot />
+    <div v-if="slots.actions" :class="emptyActions()">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>

package/src/components/empty/empty.variants.ts

@@ -0,0 +1,67 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const empty = tv({
+  base: 'flex w-full min-w-0 flex-col items-center justify-center text-center',
+  variants: {
+    size: {
+      sm: 'gap-2 px-4 py-6',
+      md: 'gap-3 px-6 py-10',
+      lg: 'gap-4 px-8 py-14',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const emptyIcon = tv({
+  base: 'bg-subtle text-muted flex shrink-0 items-center justify-center rounded-full [&_svg]:shrink-0',
+  variants: {
+    size: {
+      sm: 'size-10 [&_svg]:size-5',
+      md: 'size-12 [&_svg]:size-6',
+      lg: 'size-14 [&_svg]:size-7',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const emptyText = tv({
+  base: 'flex max-w-sm flex-col items-center gap-1',
+})
+
+export const emptyTitle = tv({
+  base: 'text-fg font-medium text-balance',
+  variants: {
+    size: {
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const emptyDescription = tv({
+  base: 'text-muted text-balance',
+  variants: {
+    size: {
+      sm: 'text-xs',
+      md: 'text-sm',
+      lg: 'text-sm',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const emptyActions = tv({
+  base: 'flex flex-wrap items-center justify-center gap-2',
+})
+
+export type EmptyVariants = VariantProps<typeof empty>

package/src/components/file-upload/FileUpload.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+  import { computed, shallowRef } from 'vue'
+  import { File as FileIcon, Upload, X } from '@lucide/vue'
+  import { cn } from '../../lib/cn'
+  import { useFieldControl } from '../form-field/context'
+  import { useUiLocale } from '../../locale'
+  import Button from '../button/Button.vue'
+  import IconSlot from '../button/IconSlot.vue'
+  import IconButton from '../icon-button/IconButton.vue'
+  import Text from '../text/Text.vue'
+  import { useFileDrop } from './composables/useFileDrop'
+  import { useObjectUrls } from './composables/useObjectUrls'
+  import {
+    fileUploadArea,
+    fileUploadItem,
+    fileUploadList,
+    fileUploadMeta,
+    fileUploadRoot,
+    fileUploadThumb,
+  } from './file-upload.variants'
+  import { selectFiles, type FileUploadRejection } from './utils/select'
+  import { formatSize } from './utils/size'
+
+  defineOptions({ name: 'HnFileUpload', inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<{
+      multiple?: boolean
+      accept?: string
+      maxSize?: number
+      maxFiles?: number
+      variant?: 'area' | 'button'
+      list?: boolean
+      preview?: boolean
+      name?: string
+      loading?: boolean
+      disabled?: boolean
+      invalid?: boolean
+      class?: string
+    }>(),
+    { variant: 'area', list: true, preview: true },
+  )
+  const emit = defineEmits<{ reject: [rejections: FileUploadRejection[]] }>()
+
+  const model = defineModel<File | File[] | null>({ default: null })
+
+  const t = useUiLocale()
+  const input = shallowRef<HTMLInputElement | null>(null)
+
+  const {
+    field,
+    id: fieldId,
+    invalid,
+    disabled,
+    describedBy,
+  } = useFieldControl({
+    invalid: () => props.invalid,
+    disabled: () => !!props.disabled || !!props.loading,
+  })
+  const files = computed<File[]>(() =>
+    Array.isArray(model.value) ? model.value : model.value ? [model.value] : [],
+  )
+
+  function commit(next: File[]) {
+    model.value = props.multiple ? next : (next[0] ?? null)
+  }
+
+  function take(incoming: File[]) {
+    const { next, rejected } = selectFiles(files.value, incoming, {
+      accept: props.accept,
+      maxSize: props.maxSize,
+      maxFiles: props.maxFiles,
+      multiple: props.multiple,
+    })
+    if (rejected.length) emit('reject', rejected)
+    commit(next)
+  }
+
+  function remove(file: File) {
+    commit(files.value.filter(item => item !== file))
+  }
+
+  function browse() {
+    if (!disabled.value) input.value?.click()
+  }
+
+  const { dragging, onDragEnter, onDragOver, onDragLeave, onDrop, onChange } = useFileDrop(
+    disabled,
+    take,
+  )
+  const { urls } = useObjectUrls(
+    files,
+    computed(() => props.preview),
+  )
+</script>
+
+<template>
+  <div data-hn-file-upload :class="cn(fileUploadRoot(), props.class)">
+    <input
+      ref="input"
+      type="file"
+      class="hidden"
+      tabindex="-1"
+      aria-hidden="true"
+      :name="props.name"
+      :accept="props.accept"
+      :multiple="props.multiple"
+      :disabled="disabled"
+      @change="onChange"
+    />
+    <button
+      v-if="props.variant === 'area'"
+      v-bind="$attrs"
+      type="button"
+      data-hn-file-upload-area
+      :id="fieldId"
+      :aria-describedby="describedBy"
+      :aria-invalid="invalid || undefined"
+      :data-dragging="dragging ? '' : undefined"
+      :data-invalid="invalid ? '' : undefined"
+      :aria-busy="props.loading || undefined"
+      :disabled="disabled"
+      :class="fileUploadArea()"
+      @click="browse"
+      @dragenter="onDragEnter"
+      @dragover="onDragOver"
+      @dragleave="onDragLeave"
+      @drop="onDrop"
+    >
+      <IconSlot
+        box-class="relative inline-flex size-6 items-center justify-center [&>svg]:size-6"
+        :swapped="!!props.loading"
+        spinner-size="md"
+      >
+        <slot name="icon">
+          <Upload aria-hidden="true" />
+        </slot>
+      </IconSlot>
+      <slot>{{ t.upload.dropHint }}</slot>
+    </button>
+    <Button
+      v-else
+      v-bind="$attrs"
+      :id="fieldId"
+      :aria-describedby="describedBy"
+      :aria-invalid="invalid || undefined"
+      variant="outline"
+      tone="neutral"
+      :loading="props.loading"
+      :disabled="props.disabled || !!field?.disabled.value"
+      class="self-start"
+      @click="browse"
+    >
+      <slot name="icon">
+        <Upload />
+      </slot>
+      <slot>{{ t.upload.choose }}</slot>
+    </Button>
+    <ul v-if="props.list && files.length" :class="fileUploadList()">
+      <li
+        v-for="file in files"
+        :key="`${file.name}-${file.size}-${file.lastModified}`"
+        :class="fileUploadItem()"
+      >
+        <span :class="fileUploadThumb()">
+          <img v-if="urls.get(file)" :src="urls.get(file)" alt="" />
+          <FileIcon v-else aria-hidden="true" />
+        </span>
+        <span :class="fileUploadMeta()">
+          <Text as="span" size="sm" truncate>{{ file.name }}</Text>
+          <Text as="span" size="xs" tone="muted">{{ formatSize(t.tag, file.size) }}</Text>
+        </span>
+        <IconButton
+          variant="ghost"
+          tone="neutral"
+          size="sm"
+          :label="t.upload.removeFile(file.name)"
+          :disabled="disabled"
+          @click="remove(file)"
+        >
+          <X />
+        </IconButton>
+      </li>
+    </ul>
+  </div>
+</template>

package/src/components/file-upload/composables/useFileDrop.ts

@@ -0,0 +1,42 @@
+import { ref, type Ref } from 'vue'
+
+export function useFileDrop(disabled: Ref<boolean>, onFiles: (files: File[]) => void) {
+  const dragging = ref(false)
+  let depth = 0
+
+  function onDragEnter(event: DragEvent) {
+    if (disabled.value) return
+    event.preventDefault()
+    depth += 1
+    dragging.value = true
+  }
+
+  function onDragOver(event: DragEvent) {
+    if (disabled.value) return
+    event.preventDefault()
+  }
+
+  function onDragLeave() {
+    if (disabled.value) return
+    depth = Math.max(depth - 1, 0)
+    if (depth === 0) dragging.value = false
+  }
+
+  function onDrop(event: DragEvent) {
+    if (disabled.value) return
+    event.preventDefault()
+    depth = 0
+    dragging.value = false
+    const files = Array.from(event.dataTransfer?.files ?? [])
+    if (files.length) onFiles(files)
+  }
+
+  function onChange(event: Event) {
+    const input = event.target as HTMLInputElement
+    const files = Array.from(input.files ?? [])
+    input.value = ''
+    if (files.length) onFiles(files)
+  }
+
+  return { dragging, onDragEnter, onDragOver, onDragLeave, onDrop, onChange }
+}

package/src/components/file-upload/composables/useObjectUrls.ts

@@ -0,0 +1,33 @@
+import { onBeforeUnmount, shallowRef, watch, type Ref } from 'vue'
+
+export function useObjectUrls(files: Ref<File[]>, enabled: Ref<boolean>) {
+  const urls = shallowRef(new Map<File, string>())
+
+  function revokeAll() {
+    for (const url of urls.value.values()) URL.revokeObjectURL(url)
+    urls.value = new Map()
+  }
+
+  watch(
+    [files, enabled],
+    ([list, on]) => {
+      const supported = typeof URL !== 'undefined' && typeof URL.createObjectURL === 'function'
+      if (!on || !supported) {
+        if (urls.value.size) revokeAll()
+        return
+      }
+      const next = new Map<File, string>()
+      for (const file of list) {
+        if (!file.type.startsWith('image/')) continue
+        next.set(file, urls.value.get(file) ?? URL.createObjectURL(file))
+      }
+      for (const [file, url] of urls.value) if (!next.has(file)) URL.revokeObjectURL(url)
+      urls.value = next
+    },
+    { immediate: true },
+  )
+
+  onBeforeUnmount(revokeAll)
+
+  return { urls }
+}

package/src/components/file-upload/file-upload.variants.ts

@@ -0,0 +1,31 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const fileUploadRoot = tv({
+  base: 'flex w-full min-w-0 flex-col gap-2',
+})
+
+export const fileUploadArea = tv({
+  base: [
+    'hn-interactive hn-state-layer text-muted border-line flex w-full flex-1 flex-col items-center justify-center gap-2 rounded-md border border-dashed px-4 py-6 text-center text-sm',
+    'hover:border-line-strong data-[dragging]:border-accent data-[dragging]:text-accent-text',
+    'data-invalid:border-danger disabled:cursor-not-allowed disabled:opacity-50',
+  ],
+})
+
+export const fileUploadList = tv({
+  base: 'flex flex-col gap-1',
+})
+
+export const fileUploadItem = tv({
+  base: 'bg-subtle flex min-w-0 items-center gap-3 rounded-md px-3 py-2',
+})
+
+export const fileUploadThumb = tv({
+  base: 'text-muted flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-sm bg-inset [&>img]:size-full [&>img]:object-cover [&>svg]:size-5',
+})
+
+export const fileUploadMeta = tv({
+  base: 'flex min-w-0 flex-1 flex-col',
+})
+
+export type FileUploadVariants = VariantProps<typeof fileUploadArea>

package/src/components/file-upload/utils/select.ts

@@ -0,0 +1,58 @@
+export type FileUploadReason = 'type' | 'size' | 'count'
+
+export interface FileUploadRejection {
+  file: File
+  reason: FileUploadReason
+}
+
+interface Rules {
+  accept?: string
+  maxSize?: number
+  maxFiles?: number
+  multiple?: boolean
+}
+
+function matchesAccept(file: File, accept: string | undefined) {
+  if (!accept) return true
+  const name = file.name.toLowerCase()
+  const type = file.type.toLowerCase()
+  return accept
+    .split(',')
+    .map(rule => rule.trim().toLowerCase())
+    .filter(Boolean)
+    .some(rule => {
+      if (rule.startsWith('.')) return name.endsWith(rule)
+      if (rule.endsWith('/*')) return type.startsWith(rule.slice(0, -1))
+      return type === rule
+    })
+}
+
+function sameFile(a: File, b: File) {
+  return a.name === b.name && a.size === b.size && a.lastModified === b.lastModified
+}
+
+export function selectFiles(current: File[], incoming: File[], rules: Rules) {
+  const rejected: FileUploadRejection[] = []
+  const next = rules.multiple ? [...current] : current.slice(0, 1)
+  for (const file of incoming) {
+    if (!matchesAccept(file, rules.accept)) {
+      rejected.push({ file, reason: 'type' })
+      continue
+    }
+    if (rules.maxSize !== undefined && file.size > rules.maxSize) {
+      rejected.push({ file, reason: 'size' })
+      continue
+    }
+    if (next.some(existing => sameFile(existing, file))) continue
+    if (!rules.multiple) {
+      next.splice(0, next.length, file)
+      continue
+    }
+    if (rules.maxFiles !== undefined && next.length >= rules.maxFiles) {
+      rejected.push({ file, reason: 'count' })
+      continue
+    }
+    next.push(file)
+  }
+  return { next, rejected }
+}

package/src/components/file-upload/utils/size.ts

@@ -0,0 +1,16 @@
+const UNITS = ['byte', 'kilobyte', 'megabyte', 'gigabyte'] as const
+
+export function formatSize(tag: string, bytes: number) {
+  let value = bytes
+  let index = 0
+  while (value >= 1024 && index < UNITS.length - 1) {
+    value /= 1024
+    index += 1
+  }
+  return new Intl.NumberFormat(tag, {
+    style: 'unit',
+    unit: UNITS[index],
+    unitDisplay: 'narrow',
+    maximumFractionDigits: index === 0 ? 0 : 1,
+  }).format(value)
+}

package/src/components/flex/Flex.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+  import { flex, type FlexVariants } from './flex.variants'
+
+  defineOptions({ name: 'HnFlex' })
+
+  const props = withDefaults(
+    defineProps<{
+      as?: string
+      direction?: FlexVariants['direction']
+      gap?: FlexVariants['gap']
+      align?: FlexVariants['align']
+      justify?: FlexVariants['justify']
+      wrap?: boolean
+      class?: string
+    }>(),
+    { as: 'div' },
+  )
+</script>
+
+<template>
+  <component
+    :is="props.as"
+    :class="cn(flex({ direction, gap, align, justify, wrap }), props.class)"
+  >
+    <slot />
+  </component>
+</template>

package/src/components/flex/flex.variants.ts

@@ -0,0 +1,49 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const flex = tv({
+  base: 'flex',
+  variants: {
+    direction: {
+      row: 'flex-row',
+      col: 'flex-col',
+      'row-reverse': 'flex-row-reverse',
+      'col-reverse': 'flex-col-reverse',
+    },
+    gap: {
+      none: 'gap-0',
+      xs: 'gap-1',
+      sm: 'gap-2',
+      md: '',
+      lg: 'gap-6',
+      xl: 'gap-8',
+    },
+    align: {
+      start: 'items-start',
+      center: 'items-center',
+      end: 'items-end',
+      baseline: 'items-baseline',
+      stretch: 'items-stretch',
+    },
+    justify: {
+      start: 'justify-start',
+      center: 'justify-center',
+      end: 'justify-end',
+      between: 'justify-between',
+      around: 'justify-around',
+      evenly: 'justify-evenly',
+    },
+    wrap: {
+      true: 'flex-wrap',
+      false: 'flex-nowrap',
+    },
+  },
+  compoundVariants: [
+    { direction: ['row', 'row-reverse'], gap: 'md', class: 'gap-[var(--hn-inline-gap)]' },
+    { direction: ['col', 'col-reverse'], gap: 'md', class: 'gap-[var(--hn-stack-gap)]' },
+  ],
+  defaultVariants: {
+    direction: 'row',
+  },
+})
+
+export type FlexVariants = VariantProps<typeof flex>

package/src/components/form/Form.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+  import { computed, shallowRef, watch } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { useForm, type FormValidateOn } from './composables/useForm'
+  import { provideForm } from './context'
+  import { formRoot } from './form.variants'
+  import { focusFirstInvalid } from './utils/focus'
+  import type { FormErrors, FormRules, FormValues } from './standard-schema'
+
+  defineOptions({ name: 'HnForm' })
+
+  const props = withDefaults(
+    defineProps<{
+      values: FormValues
+      rules?: FormRules
+      validateOn?: FormValidateOn
+      disabled?: boolean
+      onSubmit?: (values: FormValues) => unknown
+      class?: string
+    }>(),
+    { validateOn: 'submit' },
+  )
+
+  const root = shallowRef<HTMLFormElement | null>(null)
+
+  const form = useForm({
+    values: () => props.values,
+    rules: () => props.rules,
+    validateOn: () => props.validateOn,
+  })
+
+  watch(() => props.values, form.onChange, { deep: true })
+
+  provideForm({
+    errors: form.errors,
+    disabled: computed(() => !!props.disabled || form.submitting.value),
+    touch: form.touch,
+  })
+
+  async function submit() {
+    if (props.disabled || form.submitting.value) return
+    const ok = await form.submit(props.onSubmit)
+    if (!ok && root.value) focusFirstInvalid(root.value)
+  }
+
+  function setErrors(errors: FormErrors) {
+    form.setErrors(errors)
+  }
+
+  defineExpose({ submit, validate: form.validate, reset: form.reset, setErrors })
+</script>
+
+<template>
+  <form
+    ref="root"
+    data-hn-form
+    novalidate
+    :aria-busy="form.submitting.value || undefined"
+    :class="cn(formRoot(), props.class)"
+    @submit.prevent="submit"
+  >
+    <slot
+      :errors="form.errors.value"
+      :error="form.formError.value"
+      :invalid="form.invalid.value"
+      :submitting="form.submitting.value"
+      :submitted="form.submitted.value"
+    />
+  </form>
+</template>