@hina-ui/vue 1.0.0

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

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+  import { Eye, EyeOff } from '@lucide/vue'
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import InputBase from '../input/InputBase.vue'
+  import InputAction from '../input/InputAction.vue'
+  import type { InputVariants } from '../input/input.variants'
+
+  defineOptions({ name: 'HnPasswordInput', inheritAttrs: false })
+
+  const props = defineProps<{
+    variant?: InputVariants['variant']
+    size?: InputVariants['size']
+    disabled?: boolean
+    invalid?: boolean
+    class?: string
+  }>()
+
+  const model = defineModel<string>()
+  const visible = defineModel<boolean>('visible', { default: false })
+
+  const t = useUiLocale()
+</script>
+
+<template>
+  <InputBase
+    v-bind="$attrs"
+    v-model="model"
+    :type="visible ? 'text' : 'password'"
+    :variant="props.variant"
+    :size="props.size"
+    :disabled="props.disabled"
+    :invalid="props.invalid"
+    :class="cn('[&_input::-ms-reveal]:hidden', props.class)"
+  >
+    <template #action>
+      <InputAction
+        :label="visible ? t.passwordInput.hide : t.passwordInput.show"
+        :disabled="props.disabled"
+        @click="visible = !visible"
+      >
+        <span class="relative inline-flex">
+          <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"
+          >
+            <EyeOff v-if="visible" key="hide" />
+            <Eye v-else key="show" />
+          </Transition>
+        </span>
+      </InputAction>
+    </template>
+  </InputBase>
+</template>

package/src/components/pin-input/PinInput.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+  import { PinInputInput, PinInputRoot } from 'reka-ui'
+  import { computed } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { useFieldControl } from '../form-field/context'
+  import { useUiLocale } from '../../locale'
+  import { pinInput, pinInputCell, type PinInputVariants } from './pin-input.variants'
+
+  defineOptions({ name: 'HnPinInput' })
+
+  const props = withDefaults(
+    defineProps<{
+      length?: number
+      type?: 'text' | 'number'
+      mask?: boolean
+      otp?: boolean
+      placeholder?: string
+      name?: string
+      variant?: PinInputVariants['variant']
+      size?: PinInputVariants['size']
+      disabled?: boolean
+      invalid?: boolean
+      class?: string
+    }>(),
+    { length: 6, type: 'text', placeholder: '' },
+  )
+
+  const emit = defineEmits<{ complete: [value: string] }>()
+
+  const model = defineModel<string>({ default: '' })
+
+  const t = useUiLocale()
+
+  const { labelledBy, invalid, disabled, describedBy } = useFieldControl({
+    invalid: () => props.invalid,
+    disabled: () => props.disabled,
+  })
+
+  const cells = computed(() => Array.from({ length: props.length }, (_, i) => model.value[i] ?? ''))
+
+  function update(value: (string | number)[] | undefined) {
+    const next = (value ?? []).map(cell => (cell === undefined ? '' : String(cell))).join('')
+    if (next !== model.value) model.value = next
+  }
+</script>
+
+<template>
+  <PinInputRoot
+    role="group"
+    :aria-labelledby="labelledBy"
+    :aria-describedby="describedBy"
+    :model-value="cells"
+    :type="props.type"
+    :mask="props.mask"
+    :otp="props.otp"
+    :placeholder="props.placeholder"
+    :name="props.name"
+    :disabled="disabled"
+    data-hn-pin-input
+    :data-invalid="invalid ? '' : undefined"
+    :class="cn(pinInput(), props.class)"
+    @update:model-value="update"
+    @complete="value => emit('complete', value.map(String).join(''))"
+  >
+    <PinInputInput
+      v-for="index in props.length"
+      :key="index"
+      :index="index - 1"
+      :aria-label="t.pinInput.cellLabel(index, props.length)"
+      :aria-invalid="invalid || undefined"
+      :data-invalid="invalid ? '' : undefined"
+      :class="pinInputCell({ variant: props.variant, size: props.size })"
+    />
+  </PinInputRoot>
+</template>

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

@@ -0,0 +1,31 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const pinInput = tv({
+  base: 'inline-flex max-w-full gap-2',
+})
+
+export const pinInputCell = tv({
+  base: [
+    'hn-field text-fg shrink-0 rounded-md border text-center font-medium tabular-nums outline-none [font-family:inherit]',
+    'placeholder:text-faint placeholder:font-normal',
+    'disabled:cursor-not-allowed 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)]',
+    },
+    size: {
+      sm: 'size-[var(--hn-control-h-sm)] text-sm',
+      md: 'size-[var(--hn-control-h-md)] text-base',
+      lg: 'size-[var(--hn-control-h-lg)] text-md',
+    },
+  },
+  defaultVariants: {
+    variant: 'primary',
+    size: 'md',
+  },
+})
+
+export type PinInputVariants = VariantProps<typeof pinInputCell>

package/src/components/popconfirm/Popconfirm.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+  import { computed, ref, useId } from 'vue'
+  import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import Button from '../button/Button.vue'
+  import Card from '../card/Card.vue'
+  import Text from '../text/Text.vue'
+
+  defineOptions({ name: 'HnPopconfirm' })
+
+  const props = withDefaults(
+    defineProps<{
+      title: string
+      description?: string
+      confirmText?: string
+      cancelText?: string
+      tone?: 'accent' | 'danger'
+      side?: 'top' | 'right' | 'bottom' | 'left'
+      align?: 'start' | 'center' | 'end'
+      sideOffset?: number
+      onConfirm?: () => unknown
+      class?: string
+    }>(),
+    { tone: 'accent', side: 'bottom', align: 'center', sideOffset: 8 },
+  )
+  const emit = defineEmits<{ cancel: [] }>()
+
+  const open = defineModel<boolean>('open')
+  const busy = ref(false)
+  const t = useUiLocale()
+  const titleId = useId()
+  const descriptionId = useId()
+
+  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'
+  })
+
+  function guard(event: Event) {
+    if (busy.value) event.preventDefault()
+  }
+
+  function cancel() {
+    emit('cancel')
+    open.value = false
+  }
+
+  async function confirm() {
+    if (busy.value) return
+    const result = props.onConfirm?.()
+    if (result instanceof Promise) {
+      busy.value = true
+      try {
+        await result
+      } finally {
+        busy.value = false
+      }
+    }
+    open.value = false
+  }
+</script>
+
+<template>
+  <PopoverRoot v-model:open="open" modal>
+    <PopoverTrigger as-child :style="{ transformOrigin: pressOrigin }">
+      <slot />
+    </PopoverTrigger>
+    <PopoverPortal>
+      <PopoverContent
+        as-child
+        :side="props.side"
+        :align="props.align"
+        :side-offset="props.sideOffset"
+        :aria-describedby="props.description ? `${titleId} ${descriptionId}` : titleId"
+        @escape-key-down="guard"
+        @interact-outside="guard"
+      >
+        <Card
+          data-hn-popconfirm
+          :padded="false"
+          :aria-busy="busy || undefined"
+          :class="
+            cn(
+              'hn-anim-pop z-(--hn-z-overlay) flex w-max max-w-xs min-w-56 flex-col gap-2.5 p-3 shadow-md outline-none',
+              props.class,
+            )
+          "
+        >
+          <div class="flex flex-col gap-0.5">
+            <Text :id="titleId" weight="medium">{{ props.title }}</Text>
+            <Text v-if="props.description" :id="descriptionId" tone="muted" size="sm">
+              {{ props.description }}
+            </Text>
+          </div>
+          <slot name="content" />
+          <div class="flex justify-end gap-2">
+            <Button size="sm" variant="soft" tone="neutral" :disabled="busy" @click="cancel">
+              {{ props.cancelText ?? t.common.cancel }}
+            </Button>
+            <Button size="sm" :tone="props.tone" :loading="busy" @click="confirm">
+              {{ props.confirmText ?? t.common.confirm }}
+            </Button>
+          </div>
+        </Card>
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
+</template>

package/src/components/popover/Popover.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { PopoverRoot, PopoverTrigger, PopoverPortal, PopoverContent } from 'reka-ui'
+  import Card from '../card/Card.vue'
+  import { cn } from '../../lib/cn'
+
+  defineOptions({ name: 'HnPopover' })
+
+  const props = withDefaults(
+    defineProps<{
+      side?: 'top' | 'right' | 'bottom' | 'left'
+      align?: 'start' | 'center' | 'end'
+      sideOffset?: number
+      padded?: boolean
+      class?: string
+    }>(),
+    { side: 'bottom', align: 'center', sideOffset: 8, padded: true },
+  )
+
+  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>
+  <PopoverRoot v-model:open="open" modal>
+    <PopoverTrigger as-child :style="{ transformOrigin: pressOrigin }">
+      <slot />
+    </PopoverTrigger>
+    <PopoverPortal>
+      <PopoverContent
+        as-child
+        :side="props.side"
+        :align="props.align"
+        :side-offset="props.sideOffset"
+      >
+        <Card
+          :padded="props.padded"
+          :class="cn('hn-anim-pop z-(--hn-z-overlay) max-w-sm shadow-md outline-none', props.class)"
+        >
+          <slot name="content" />
+        </Card>
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
+</template>

package/src/components/prev-next/PrevNext.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+
+  defineOptions({ name: 'HnPrevNext' })
+
+  const props = defineProps<{
+    label?: string
+    class?: string
+  }>()
+
+  const t = useUiLocale()
+</script>
+
+<template>
+  <nav
+    :aria-label="props.label ?? t.pagination.navLabel"
+    :class="cn('grid gap-4 sm:grid-cols-2', props.class)"
+  >
+    <slot />
+  </nav>
+</template>

package/src/components/prev-next/PrevNextLink.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+  import { Primitive, type PrimitiveProps } from 'reka-ui'
+  import { ArrowLeft, ArrowRight } from '@lucide/vue'
+  import Ripple from '../ripple/Ripple.vue'
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import { prevNextLink, prevNextEyebrow, type PrevNextVariants } from './prev-next.variants'
+
+  defineOptions({ name: 'HnPrevNextLink', inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<
+      PrimitiveProps & {
+        direction: NonNullable<PrevNextVariants['direction']>
+        label?: string
+        class?: string
+      }
+    >(),
+    { as: 'a' },
+  )
+
+  const t = useUiLocale()
+</script>
+
+<template>
+  <Primitive
+    v-bind="$attrs"
+    :as="props.as"
+    :as-child="props.asChild"
+    :rel="props.direction"
+    :data-direction="props.direction"
+    :class="cn(prevNextLink({ direction: props.direction }), props.class)"
+  >
+    <Ripple />
+    <span :class="prevNextEyebrow({ direction: props.direction })">
+      <ArrowLeft v-if="props.direction === 'prev'" class="size-4" aria-hidden="true" />
+      <ArrowRight v-else class="size-4" aria-hidden="true" />
+      {{ props.label ?? (props.direction === 'prev' ? t.pagination.prev : t.pagination.next) }}
+    </span>
+    <span class="text-fg font-medium">
+      <slot />
+    </span>
+  </Primitive>
+</template>

package/src/components/prev-next/prev-next.variants.ts

@@ -0,0 +1,28 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const prevNextLink = tv({
+  base: [
+    'hn-interactive hn-state-layer hn-press-lg flex flex-col gap-1 rounded-lg p-4 text-start',
+    'bg-surface border-line border shadow-sm',
+  ],
+  variants: {
+    direction: {
+      prev: 'items-start',
+      next: 'items-end text-end sm:col-start-2',
+    },
+  },
+  defaultVariants: { direction: 'next' },
+})
+
+export const prevNextEyebrow = tv({
+  base: 'text-muted inline-flex items-center gap-1 text-sm',
+  variants: {
+    direction: {
+      prev: '',
+      next: 'flex-row-reverse',
+    },
+  },
+  defaultVariants: { direction: 'next' },
+})
+
+export type PrevNextVariants = VariantProps<typeof prevNextLink>

package/src/components/progress/Progress.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+  import { ProgressIndicator, ProgressRoot } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { useProgressValue, type ProgressFormat } from './composables/useProgressValue'
+  import {
+    progress,
+    progressBar,
+    progressHeader,
+    progressTrack,
+    progressValue,
+    type ProgressVariants,
+  } from './progress.variants'
+
+  defineOptions({ name: 'HnProgress', inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<{
+      value?: number | null
+      max?: number
+      label?: string
+      showValue?: boolean
+      format?: ProgressFormat
+      tone?: ProgressVariants['tone']
+      size?: ProgressVariants['size']
+      class?: string
+    }>(),
+    { value: null, max: 100, showValue: false },
+  )
+
+  const { current, ratio, text, name } = useProgressValue({
+    value: () => props.value,
+    max: () => props.max,
+    label: () => props.label,
+    format: () => props.format,
+  })
+</script>
+
+<template>
+  <div
+    data-hn-progress
+    :class="cn(progress(), props.class)"
+    :style="{ '--hn-progress-p': String(ratio) }"
+  >
+    <div v-if="props.label || (props.showValue && text)" :class="progressHeader()">
+      <span v-if="props.label">{{ props.label }}</span>
+      <span v-if="props.showValue && text" :class="progressValue()">{{ text }}</span>
+    </div>
+    <ProgressRoot
+      v-bind="$attrs"
+      :model-value="current"
+      :max="props.max"
+      :get-value-label="() => name"
+      :get-value-text="props.format ? () => text : undefined"
+      :class="progressTrack({ size: props.size })"
+    >
+      <ProgressIndicator :class="progressBar({ tone: props.tone })" />
+    </ProgressRoot>
+  </div>
+</template>

package/src/components/progress/composables/useProgressValue.ts

@@ -0,0 +1,40 @@
+import { computed, toValue, type MaybeRefOrGetter } from 'vue'
+import { useUiLocale } from '../../../locale'
+
+export type ProgressFormat = (value: number, max: number) => string
+
+interface Options {
+  value: MaybeRefOrGetter<number | null | undefined>
+  max: MaybeRefOrGetter<number>
+  label: MaybeRefOrGetter<string | undefined>
+  format: MaybeRefOrGetter<ProgressFormat | undefined>
+}
+
+export function useProgressValue(options: Options) {
+  const t = useUiLocale()
+
+  const current = computed(() => {
+    const value = toValue(options.value)
+    if (typeof value !== 'number') return null
+    return Math.min(Math.max(value, 0), toValue(options.max))
+  })
+
+  const ratio = computed(() => {
+    const max = toValue(options.max)
+    return current.value === null || max <= 0 ? 0 : current.value / max
+  })
+
+  const text = computed(() => {
+    if (current.value === null) return undefined
+    const format = toValue(options.format)
+    if (format) return format(current.value, toValue(options.max))
+    return new Intl.NumberFormat(t.value.tag, {
+      style: 'percent',
+      maximumFractionDigits: 0,
+    }).format(ratio.value)
+  })
+
+  const name = computed(() => toValue(options.label) ?? text.value ?? t.value.common.loading)
+
+  return { current, ratio, text, name }
+}

package/src/components/progress/progress.variants.ts

@@ -0,0 +1,46 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const progress = tv({
+  base: 'flex w-full min-w-0 flex-col gap-1.5',
+})
+
+export const progressHeader = tv({
+  base: 'text-fg flex items-baseline justify-between gap-3 text-sm',
+})
+
+export const progressValue = tv({
+  base: 'text-muted ms-auto tabular-nums',
+})
+
+export const progressTrack = tv({
+  base: 'bg-line-strong relative w-full overflow-hidden rounded-full rtl:[--hn-progress-dir:-1]',
+  variants: {
+    size: {
+      sm: 'h-1',
+      md: 'h-2',
+      lg: 'h-3',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const progressBar = tv({
+  base: 'hn-progress-bar block h-full w-[calc(var(--hn-progress-p,0)*100%)] rounded-full',
+  variants: {
+    tone: {
+      accent: 'bg-accent',
+      neutral: 'bg-neutral-solid',
+      success: 'bg-success',
+      warning: 'bg-warning',
+      danger: 'bg-danger',
+      info: 'bg-info',
+    },
+  },
+  defaultVariants: {
+    tone: 'accent',
+  },
+})
+
+export type ProgressVariants = VariantProps<typeof progressTrack> & VariantProps<typeof progressBar>

package/src/components/prose/Prose.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+  import { Primitive, type PrimitiveProps } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+
+  defineOptions({ name: 'HnProse' })
+
+  const props = withDefaults(defineProps<PrimitiveProps & { class?: string }>(), { as: 'div' })
+</script>
+
+<template>
+  <Primitive :as="props.as" :as-child="props.asChild" :class="cn('hn-prose', props.class)">
+    <slot />
+  </Primitive>
+</template>

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

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+  import { RadioGroupItem, RadioGroupRoot } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { useFieldControl } from '../form-field/context'
+  import {
+    checkbox,
+    checkboxBox,
+    checkboxDescription,
+    checkboxTitle,
+    checkboxTitleText,
+    type CheckboxVariants,
+  } from '../checkbox/checkbox.variants'
+  import {
+    checkboxGroup,
+    type CheckboxGroupVariants,
+  } from '../checkbox-group/checkbox-group.variants'
+  import type { SelectOption } from '../select/types'
+  import { radioDot } from './radio-group.variants'
+
+  defineOptions({ name: 'HnRadioGroup' })
+
+  const props = defineProps<{
+    options: SelectOption[]
+    orientation?: CheckboxGroupVariants['orientation']
+    size?: CheckboxVariants['size']
+    disabled?: boolean
+    invalid?: boolean
+    class?: string
+  }>()
+
+  const model = defineModel<string | number | null>()
+
+  const { labelledBy, invalid, disabled, describedBy } = useFieldControl({
+    invalid: () => props.invalid,
+    disabled: () => props.disabled,
+  })
+
+  defineSlots<{ option(props: { option: SelectOption }): unknown }>()
+</script>
+
+<template>
+  <RadioGroupRoot
+    v-model="model"
+    :disabled="disabled"
+    :aria-labelledby="labelledBy"
+    :aria-describedby="describedBy"
+    :aria-invalid="invalid || undefined"
+    data-hn-radio-group
+    :class="cn(checkboxGroup({ orientation: props.orientation }), props.class)"
+  >
+    <label
+      v-for="option in props.options"
+      :key="option.value"
+      data-hn-radio
+      data-hn-state-group
+      :data-disabled="disabled || option.disabled ? '' : undefined"
+      :class="checkbox({ size: props.size })"
+    >
+      <RadioGroupItem
+        v-slot="{ checked }"
+        :value="option.value"
+        :disabled="option.disabled"
+        :aria-invalid="invalid || undefined"
+        :data-invalid="invalid ? '' : undefined"
+        :class="checkboxBox({ shape: 'round', size: props.size })"
+      >
+        <Transition
+          enter-active-class="hn-transition-press"
+          enter-from-class="scale-50 opacity-0"
+          leave-active-class="hn-transition"
+          leave-to-class="scale-50 opacity-0"
+        >
+          <span v-if="checked" :class="radioDot()" />
+        </Transition>
+      </RadioGroupItem>
+      <span :class="checkboxTitle()">
+        <span :class="checkboxTitleText()">
+          <slot name="option" :option="option">{{ option.label }}</slot>
+        </span>
+      </span>
+      <span v-if="option.description" :class="checkboxDescription({ size: props.size })">
+        {{ option.description }}
+      </span>
+    </label>
+  </RadioGroupRoot>
+</template>

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

@@ -0,0 +1,5 @@
+import { tv } from '../../lib/tv'
+
+export const radioDot = tv({
+  base: 'block size-[calc(var(--hn-checkbox-size)/2)] bg-surface rounded-full',
+})