@hina-ui/vue 1.7.3 → 1.7.5

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

@@ -1,32 +1 @@
-import { tv } from '../../lib/tv'
-
-export const numberInputStepper = tv({
-  base: 'flex shrink-0 flex-col',
-  variants: {
-    divided: {
-      true: 'border-line border-s',
-    },
-    size: {
-      sm: '[&_svg]:size-3',
-      md: '[&_svg]:size-3',
-      lg: '[&_svg]:size-3.5',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-    divided: true,
-  },
-})
-
-export const numberInputStep = tv({
-  base: [
-    'hn-interactive hn-state-layer hn-press-none text-muted',
-    'flex min-h-0 flex-1 basis-0 items-center justify-center px-1.5 outline-none',
-    'disabled:pointer-events-none disabled:opacity-40',
-  ],
-  variants: {
-    divided: {
-      true: 'border-line border-t',
-    },
-  },
-})
+export * from '../../../../shared/src/variants/number-input'

package/src/components/pagination/pagination.variants.ts

@@ -1,32 +1 @@
-import { tv } from '../../lib/tv'
-
-export const pagination = tv({
-  base: 'flex w-full shrink-0 flex-wrap items-center gap-x-4 gap-y-3',
-  variants: {
-    align: {
-      start: 'justify-start',
-      center: 'justify-center',
-      end: 'justify-end',
-      between: 'justify-between',
-    },
-  },
-})
-
-export const paginationList = tv({
-  base: 'relative isolate flex max-w-full flex-wrap items-center gap-1',
-})
-
-export const paginationItem = tv({
-  base: 'min-w-0 px-0 tabular-nums [&>span]:min-w-0',
-  variants: {
-    size: {
-      sm: 'size-[var(--hn-control-h-sm)]',
-      md: 'size-[var(--hn-control-h-md)]',
-      lg: 'size-[var(--hn-control-h-lg)]',
-    },
-    selected: { true: 'bg-accent text-accent-on' },
-  },
-  defaultVariants: { size: 'md' },
-})
-
-export const paginationArrow = tv({ variants: { dir: { ltr: '', rtl: 'rotate-180' } } })
+export * from '../../../../shared/src/variants/pagination'

package/src/components/panel/panel.variants.ts

@@ -1,29 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const panelHeader = tv({
-  base: 'flex items-start justify-between gap-4 px-(--hn-panel-p) pt-(--hn-panel-p)',
-})
-
-export const panelTitle = tv({
-  base: 'flex min-w-0 items-center gap-2',
-})
-
-export const panelIcon = tv({
-  base: 'text-muted flex shrink-0 [&_svg]:size-4.5',
-})
-
-export const panelActions = tv({
-  base: 'flex shrink-0 items-center gap-2',
-})
-
-export const panelBody = tv({
-  base: 'pt-4',
-  variants: {
-    padded: {
-      true: 'px-(--hn-panel-p) pb-(--hn-panel-p)',
-    },
-  },
-  defaultVariants: { padded: true },
-})
-
-export type PanelVariants = VariantProps<typeof panelBody>
+export * from '../../../../shared/src/variants/panel'

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

@@ -1,31 +1 @@
-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>
+export * from '../../../../shared/src/variants/pin-input'

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

@@ -15,7 +15,7 @@
 <template>
   <nav
     :aria-label="props.label ?? t.pagination.navLabel"
-    :class="cn('grid gap-4 sm:grid-cols-2', props.class)"
+    :class="cn('grid grid-cols-1 gap-4 sm:grid-cols-2', props.class)"
   >
     <slot />
   </nav>

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

@@ -37,7 +37,7 @@
       <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">
+    <span class="text-fg max-w-full font-medium">
       <slot />
     </span>
   </Primitive>

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

@@ -1,28 +1 @@
-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>
+export * from '../../../../shared/src/variants/prev-next'

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

@@ -1,46 +1 @@
-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>
+export * from '../../../../shared/src/variants/progress'

package/src/components/qr-code/QRCode.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+  import { computed, ref, watch } from 'vue'
+  import { Check, QrCode, RefreshCw, CircleAlert } from '@lucide/vue'
+  import { qrCodeGeometry, qrCodeSize } from '../../../../shared/src/lib/qr-code'
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import Button from '../button/Button.vue'
+  import Spinner from '../spinner/Spinner.vue'
+  import { qrCode, qrCodeSvg, qrCodeStatus } from './qr-code.variants'
+  import { exportQRCode } from './export'
+  import type { QRCodeProps, QRCodeExportOptions, QRCodeStatusSlot, QRCodeState } from './types'
+
+  defineOptions({ name: 'HnQRCode' })
+  const props = withDefaults(defineProps<QRCodeProps>(), {
+    size: 192,
+    margin: 4,
+    logoSize: 32,
+    logoMargin: 2,
+    status: 'active',
+    bordered: true,
+  })
+  const emit = defineEmits<{ refresh: []; error: [error: Error]; logoError: [event: Event] }>()
+  defineSlots<{ status?(props: QRCodeStatusSlot): unknown }>()
+  const t = useUiLocale()
+  const element = ref<HTMLElement>()
+  const svg = ref<SVGSVGElement>()
+  const logoFailed = ref(false)
+  watch(
+    () => props.logo,
+    () => {
+      logoFailed.value = false
+    },
+  )
+  const size = computed(() => qrCodeSize(props.size))
+  const result = computed(() => {
+    if (!props.value) return {}
+    try {
+      return {
+        geometry: qrCodeGeometry(
+          props.value,
+          props.level ?? (props.logo ? 'H' : 'M'),
+          props.margin,
+        ),
+      }
+    } catch (error) {
+      return { error: error instanceof Error ? error : new Error(String(error)) }
+    }
+  })
+  const state = computed<QRCodeState>(() =>
+    props.status !== 'active'
+      ? props.status
+      : result.value.error
+        ? 'error'
+        : result.value.geometry
+          ? 'active'
+          : 'empty',
+  )
+  const inactive = computed(() => (state.value === 'active' ? 'empty' : state.value))
+  watch(
+    () => result.value.error,
+    error => {
+      if (error) emit('error', error)
+    },
+    { immediate: true },
+  )
+  const refresh = () => emit('refresh')
+  function onLogoError(event: Event) {
+    logoFailed.value = true
+    emit('logoError', event)
+  }
+  const logo = computed(() => {
+    if (!props.logo || logoFailed.value || !result.value.geometry) return
+    const dimension = result.value.geometry.size
+    const pixels = Number.isFinite(props.logoSize) ? Math.max(0, props.logoSize) : 32
+    if (!pixels) return
+    const padding = Number.isFinite(props.logoMargin) ? Math.max(0, props.logoMargin) : 2
+    const side = Math.min((pixels / size.value) * dimension, dimension / 4)
+    const gap = Math.min((padding / size.value) * dimension, dimension / 32)
+    return { side, gap, start: (dimension - side) / 2 }
+  })
+  async function toBlob(options?: QRCodeExportOptions) {
+    if (state.value !== 'active' || !svg.value) throw new Error('No active QR code to export')
+    return exportQRCode(svg.value, size.value, options)
+  }
+  defineExpose({ element, svg, toBlob })
+</script>
+
+<template>
+  <div
+    ref="element"
+    data-hn-qr-code
+    :data-state="state"
+    :aria-busy="state === 'loading' || undefined"
+    :class="cn(qrCode({ bordered: props.bordered }), props.class)"
+    :style="{
+      '--hn-qr-size': `${size}px`,
+      '--hn-qr-foreground': props.color,
+      '--hn-qr-background': props.background,
+    }"
+  >
+    <svg
+      v-if="state === 'active' && result.geometry"
+      ref="svg"
+      xmlns="http://www.w3.org/2000/svg"
+      :width="size"
+      :height="size"
+      :viewBox="`0 0 ${result.geometry.size} ${result.geometry.size}`"
+      role="img"
+      :aria-label="props.label ?? t.qrCode.label"
+      :class="qrCodeSvg()"
+      shape-rendering="crispEdges"
+    >
+      <rect width="100%" height="100%" fill="var(--hn-qr-background)" />
+      <path :d="result.geometry.path" fill="var(--hn-qr-foreground)" />
+      <template v-if="logo">
+        <rect
+          :x="logo.start - logo.gap"
+          :y="logo.start - logo.gap"
+          :width="logo.side + logo.gap * 2"
+          :height="logo.side + logo.gap * 2"
+          fill="var(--hn-qr-background)"
+        />
+        <image
+          :href="props.logo"
+          :x="logo.start"
+          :y="logo.start"
+          :width="logo.side"
+          :height="logo.side"
+          preserveAspectRatio="xMidYMid meet"
+          aria-hidden="true"
+          @error="onLogoError"
+        />
+      </template>
+    </svg>
+    <div v-else :class="qrCodeStatus()" role="status" aria-live="polite">
+      <slot name="status" :status="inactive" :error="result.error" :refresh="refresh">
+        <Spinner v-if="state === 'loading'" size="sm" aria-hidden="true" />
+        <Check v-else-if="state === 'scanned'" class="text-success size-6" aria-hidden="true" />
+        <CircleAlert v-else-if="state === 'error'" class="size-6" aria-hidden="true" />
+        <QrCode v-else class="size-6" aria-hidden="true" />
+        <span>{{ inactive === 'loading' ? t.common.loading : t.qrCode[inactive] }}</span>
+        <Button
+          v-if="state === 'expired'"
+          size="sm"
+          variant="outline"
+          tone="neutral"
+          @click="refresh"
+        >
+          <template #icon><RefreshCw /></template>
+          {{ t.qrCode.refresh }}
+        </Button>
+      </slot>
+    </div>
+  </div>
+</template>

package/src/components/qr-code/export.ts

@@ -0,0 +1,65 @@
+import type { QRCodeExportOptions } from './types'
+
+function dataURL(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(reader.result as string)
+    reader.onerror = () => reject(reader.error)
+    reader.readAsDataURL(blob)
+  })
+}
+
+export async function exportQRCode(
+  svg: SVGSVGElement,
+  size: number,
+  { type = 'image/png', scale = 2 }: QRCodeExportOptions = {},
+): Promise<Blob> {
+  const clone = svg.cloneNode(true) as SVGSVGElement
+  const source = [svg, ...svg.querySelectorAll('*')]
+  const target = [clone, ...clone.querySelectorAll('*')]
+  target.forEach((el, index) => {
+    const style = getComputedStyle(source[index]!)
+    el.removeAttribute('class')
+    el.removeAttribute('style')
+    el.setAttribute('fill', style.fill)
+  })
+  clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
+  clone.setAttribute('width', String(size))
+  clone.setAttribute('height', String(size))
+  for (const image of clone.querySelectorAll('image')) {
+    const href = image.getAttribute('href')
+    if (!href) continue
+    let embedded = href
+    if (!href.startsWith('data:')) {
+      const response = await fetch(new URL(href, svg.ownerDocument.baseURI))
+      if (!response.ok) throw new Error('Unable to export the QR code logo')
+      embedded = await dataURL(await response.blob())
+    }
+    const decoded = new Image()
+    decoded.src = embedded
+    await decoded.decode()
+    image.setAttribute('href', embedded)
+  }
+  const blob = new Blob([new XMLSerializer().serializeToString(clone)], { type: 'image/svg+xml' })
+  if (type === 'image/svg+xml') return blob
+  const url = URL.createObjectURL(blob)
+  try {
+    const image = new Image()
+    image.src = url
+    await image.decode()
+    const factor = Number.isFinite(scale) ? Math.max(1, Math.min(8, scale)) : 2
+    const canvas = svg.ownerDocument.createElement('canvas')
+    canvas.width = canvas.height = Math.min(8192, Math.round(size * factor))
+    const context = canvas.getContext('2d')
+    if (!context) throw new Error('Canvas is unavailable')
+    context.drawImage(image, 0, 0, canvas.width, canvas.height)
+    return await new Promise<Blob>((resolve, reject) => {
+      canvas.toBlob(
+        result => (result ? resolve(result) : reject(new Error('Unable to export the QR code'))),
+        'image/png',
+      )
+    })
+  } finally {
+    URL.revokeObjectURL(url)
+  }
+}

package/src/components/qr-code/qr-code.variants.ts

@@ -0,0 +1 @@
+export { qrCode, qrCodeSvg, qrCodeStatus } from '../../../../shared/src/variants/qr-code'

package/src/components/qr-code/types.ts

@@ -0,0 +1,35 @@
+import type { QRCodeLevel } from '../../../../shared/src/lib/qr-code'
+export type { QRCodeLevel }
+
+export type QRCodeStatus = 'active' | 'loading' | 'expired' | 'scanned'
+export type QRCodeState = QRCodeStatus | 'empty' | 'error'
+
+export interface QRCodeProps {
+  value: string
+  label?: string
+  size?: number
+  level?: QRCodeLevel
+  margin?: number
+  color?: string
+  background?: string
+  bordered?: boolean
+  logo?: string
+  logoSize?: number
+  logoMargin?: number
+  status?: QRCodeStatus
+  class?: string
+}
+export interface QRCodeStatusSlot {
+  status: Exclude<QRCodeState, 'active'>
+  error: Error | undefined
+  refresh: () => void
+}
+export interface QRCodeExportOptions {
+  type?: 'image/svg+xml' | 'image/png'
+  scale?: number
+}
+export interface QRCodeExpose {
+  element: HTMLElement | undefined
+  svg: SVGSVGElement | undefined
+  toBlob: (options?: QRCodeExportOptions) => Promise<Blob>
+}

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

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

package/src/components/range-calendar/range-calendar.variants.ts

@@ -1,24 +1 @@
-import { tv } from '../../lib/tv'
-import { calendarCell, calendarDay } from '../calendar/calendar.variants'
-
-export const rangeCalendarCell = tv({
-  extend: calendarCell,
-  base: [
-    'first:rounded-s-md last:rounded-e-md',
-    'has-[[data-selected]]:bg-accent-soft has-[[data-highlighted]]:bg-accent-soft',
-    'has-[[data-selection-start]]:rounded-s-md has-[[data-highlighted-start]]:rounded-s-md',
-    'has-[[data-selection-end]]:rounded-e-md has-[[data-highlighted-end]]:rounded-e-md',
-  ],
-})
-
-export const rangeCalendarDay = tv({
-  extend: calendarDay,
-  base: [
-    'data-[highlighted]:text-accent-text',
-    'data-[highlighted]:not-[[data-highlighted-end]]:[--hn-state-hover-opacity:0]',
-    'data-[selected]:not-[[data-selection-start]]:not-[[data-selection-end]]:bg-transparent',
-    'data-[selected]:not-[[data-selection-start]]:not-[[data-selection-end]]:text-accent-text',
-    'data-[selected]:not-[[data-selection-start]]:not-[[data-selection-end]]:font-normal',
-    'data-[selected]:[--hn-state-selected-opacity:0]',
-  ],
-})
+export * from '../../../../shared/src/variants/range-calendar'

package/src/components/rating/Rating.vue

@@ -2,6 +2,7 @@
   import { RatingItem, RatingItemIndicator, RatingRoot } from 'reka-ui'
   import { Star } from '@lucide/vue'
   import { cn } from '../../lib/cn'
+  import { rekaRatingStepStyle } from '../../lib/reka/styles'
   import { useFieldControl } from '../form-field/context'
   import { useUiLocale } from '../../locale'
   import {
@@ -95,6 +96,7 @@
         :step="step"
         :aria-label="scaled ? t.rating.score(toScore(step), props.max) : t.rating.star(step)"
         :class="ratingStep()"
+        :style="rekaRatingStepStyle"
       >
         <Star :class="ratingStar()" />
       </RatingItemIndicator>

package/src/components/rating/rating.variants.ts

@@ -1,46 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const ratingRoot = tv({
-  base: 'inline-flex items-center gap-0.5 data-disabled:pointer-events-none data-disabled:opacity-50',
-  variants: {
-    size: {
-      sm: '[--hn-rating-size:--spacing(4)]',
-      md: '[--hn-rating-size:--spacing(5)]',
-      lg: '[--hn-rating-size:--spacing(6)]',
-    },
-  },
-  defaultVariants: { size: 'md' },
-})
-
-export const ratingItem = tv({
-  base: [
-    'relative inline-flex size-[var(--hn-rating-size)] shrink-0 rounded-xs',
-    'has-[:focus-visible]:[outline:var(--hn-focus-ring-width)_solid_var(--hn-focus-ring)] has-[:focus-visible]:[outline-offset:var(--hn-focus-ring-offset)]',
-  ],
-})
-
-export const ratingStep = tv({
-  base: [
-    'group/hn-rating-step absolute inset-y-0 start-0 cursor-pointer overflow-hidden outline-none',
-    '[width:var(--reka-rating-item-step-width)] [opacity:var(--reka-rating-item-step-opacity)] [z-index:var(--reka-rating-item-step-z-index)]',
-    'disabled:cursor-not-allowed',
-  ],
-})
-
-export const ratingStar = tv({
-  base: 'text-line-strong size-[var(--hn-rating-size)] shrink-0 fill-transparent transition-[color,fill] duration-(--hn-duration-fast) ease-(--hn-ease-enter)',
-  variants: {
-    active: {
-      true: 'text-warning fill-current',
-      false:
-        'group-data-[state=active]/hn-rating-step:text-warning group-data-[state=active]/hn-rating-step:fill-current',
-    },
-  },
-  defaultVariants: { active: false },
-})
-
-export const ratingFill = tv({
-  base: 'absolute inset-y-0 start-0 overflow-hidden',
-})
-
-export type RatingVariants = VariantProps<typeof ratingRoot>
+export * from '../../../../shared/src/variants/rating'

package/src/components/result/result.variants.ts

@@ -1,24 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const resultIcon = tv({
-  base: 'flex shrink-0 items-center justify-center rounded-full [&_svg]:shrink-0',
-  variants: {
-    status: {
-      success: 'bg-success-soft text-success-text',
-      error: 'bg-danger-soft text-danger-text',
-      warning: 'bg-warning-soft text-warning-text',
-      info: 'bg-info-soft text-info-text',
-    },
-    size: {
-      sm: 'size-12 [&_svg]:size-6',
-      md: 'size-14 [&_svg]:size-7',
-      lg: 'size-18 [&_svg]:size-9',
-    },
-  },
-  defaultVariants: {
-    status: 'info',
-    size: 'md',
-  },
-})
-
-export type ResultVariants = VariantProps<typeof resultIcon>
+export * from '../../../../shared/src/variants/result'

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

@@ -1,55 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const ringProgress = tv({
-  base: 'inline-flex flex-col items-center gap-1.5',
-})
-
-export const ringProgressRoot = tv({
-  base: 'relative shrink-0',
-  variants: {
-    size: {
-      sm: 'size-10 text-xs',
-      md: 'size-16 text-sm',
-      lg: 'size-24 text-lg',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-})
-
-export const ringProgressSvg = tv({
-  base: 'hn-ring-spin size-full -rotate-90',
-})
-
-export const ringProgressTrack = tv({
-  base: 'stroke-line-strong fill-none',
-})
-
-export const ringProgressArc = tv({
-  base: 'hn-ring-arc fill-none',
-  variants: {
-    tone: {
-      accent: 'stroke-accent',
-      neutral: 'stroke-neutral-solid',
-      success: 'stroke-success',
-      warning: 'stroke-warning',
-      danger: 'stroke-danger',
-      info: 'stroke-info',
-    },
-  },
-  defaultVariants: {
-    tone: 'accent',
-  },
-})
-
-export const ringProgressCenter = tv({
-  base: 'text-fg absolute inset-0 flex items-center justify-center tabular-nums',
-})
-
-export const ringProgressLabel = tv({
-  base: 'text-muted text-sm',
-})
-
-export type RingProgressVariants = VariantProps<typeof ringProgressRoot> &
-  VariantProps<typeof ringProgressArc>
+export * from '../../../../shared/src/variants/ring-progress'