@hina-ui/vue 1.0.0

package/src/components/slider/composables/useSliderChrome.ts

@@ -0,0 +1,44 @@
+import { useEventListener } from '@vueuse/core'
+import { computed, ref, type Ref } from 'vue'
+
+export function useSliderChrome(disabled: Ref<boolean>, label: Ref<'auto' | 'always' | 'none'>) {
+  const dragging = ref(false)
+  const hovered = ref(false)
+  const ring = ref(false)
+  let pointer = false
+
+  const labelOpen = computed(
+    () =>
+      label.value === 'always' ||
+      (!disabled.value && (hovered.value || ring.value || dragging.value)),
+  )
+
+  function release() {
+    dragging.value = false
+  }
+
+  useEventListener(['pointerup', 'pointercancel'], release, { passive: true })
+
+  function onPointerDown(event: PointerEvent) {
+    pointer = true
+    if (disabled.value) return
+    const root = event.currentTarget as HTMLElement
+    if (!root.firstElementChild?.contains(event.target as Node)) return
+    dragging.value = true
+  }
+
+  function onFocusIn() {
+    ring.value = !pointer
+    pointer = false
+  }
+
+  const listeners = {
+    keydown: () => (ring.value = true),
+    focusin: onFocusIn,
+    focusout: () => (ring.value = false),
+    pointerenter: (event: PointerEvent) => (hovered.value = event.pointerType === 'mouse'),
+    pointerleave: () => (hovered.value = false),
+  }
+
+  return { dragging, hovered, ring, labelOpen, onPointerDown, listeners }
+}

package/src/components/slider/slider.variants.ts

@@ -0,0 +1,64 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const slider = tv({
+  base: 'group/hn-slider relative flex w-full min-w-0 flex-col data-disabled:cursor-not-allowed data-disabled:opacity-50',
+  variants: {
+    size: {
+      sm: '[--hn-slider-h:1.25rem] [--hn-slider-thumb:0.75rem]',
+      md: '[--hn-slider-h:1.5rem] [--hn-slider-thumb:1rem]',
+      lg: '[--hn-slider-h:1.75rem] [--hn-slider-thumb:1.25rem]',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const sliderRoot = tv({
+  base: [
+    'bg-line-strong relative flex h-[var(--hn-slider-h)] w-full cursor-pointer touch-none rounded-full select-none',
+    'data-disabled:pointer-events-none',
+  ],
+})
+
+export const sliderTrack = tv({
+  base: 'absolute inset-0 overflow-hidden rounded-full',
+})
+
+export const sliderRange = tv({
+  base: [
+    'hn-slider-move bg-accent absolute inset-y-0 start-0 rounded-full group-data-dragging/hn-slider:transition-none',
+    'w-[calc((100%-var(--hn-slider-thumb)-0.5rem)*var(--hn-slider-p)+var(--hn-slider-thumb)+0.5rem)]',
+  ],
+})
+
+export const sliderRangeBetween = tv({
+  base: [
+    'hn-slider-move bg-accent absolute inset-y-0 rounded-full group-data-dragging/hn-slider:transition-none',
+    'start-[calc(var(--hn-slider-p)*(100%-var(--hn-slider-thumb)-0.5rem))]',
+    'w-[calc((var(--hn-slider-q)-var(--hn-slider-p))*(100%-var(--hn-slider-thumb)-0.5rem)+var(--hn-slider-thumb)+0.5rem)]',
+  ],
+})
+
+export const sliderThumb = tv({
+  base: [
+    'hn-state-layer hn-slider-move border-line bg-surface text-fg top-1 !block size-[var(--hn-slider-thumb)] cursor-grab rounded-full border shadow-sm outline-none',
+    '!start-[calc(0.25rem+var(--hn-slider-thumb)/2+var(--hn-slider-p)*(100%-0.5rem-var(--hn-slider-thumb)))]',
+    'data-focus-ring:outline-2 data-focus-ring:outline-offset-2 data-focus-ring:outline-solid data-focus-ring:outline-(--hn-focus-ring)',
+    'group-data-dragging/hn-slider:cursor-grabbing group-data-dragging/hn-slider:transition-none data-disabled:cursor-not-allowed',
+  ],
+})
+
+export const sliderMarks = tv({
+  base: 'pointer-events-none absolute inset-x-[calc(var(--hn-slider-thumb)/2+0.25rem)] top-1/2 h-0',
+})
+
+export const sliderMark = tv({
+  base: 'border-line-strong bg-surface block size-1.5 shrink-0 rounded-full border',
+})
+
+export const sliderMarkLabels = tv({
+  base: 'text-muted relative mx-[calc(var(--hn-slider-thumb)/2+0.25rem)] h-4 text-xs',
+})
+
+export type SliderVariants = VariantProps<typeof slider>

package/src/components/space/Space.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+  import { space, type SpaceVariants } from './space.variants'
+
+  defineOptions({ name: 'HnSpace' })
+
+  const props = defineProps<{
+    size?: SpaceVariants['size']
+    class?: string
+  }>()
+</script>
+
+<template>
+  <div aria-hidden="true" :class="cn(space({ size: props.size }), props.class)" />
+</template>

package/src/components/space/space.variants.ts

@@ -0,0 +1,18 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const space = tv({
+  base: 'shrink-0',
+  variants: {
+    size: {
+      xs: 'size-1',
+      sm: 'size-2',
+      md: 'size-4',
+      lg: 'size-6',
+      xl: 'size-8',
+      flex: 'flex-1 self-stretch',
+    },
+  },
+  defaultVariants: { size: 'flex' },
+})
+
+export type SpaceVariants = VariantProps<typeof space>

package/src/components/spinner/Spinner.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import { spinner, type SpinnerVariants } from './spinner.variants'
+
+  defineOptions({ name: 'HnSpinner', inheritAttrs: false })
+
+  const props = withDefaults(defineProps<{ size?: SpinnerVariants['size']; label?: string }>(), {
+    size: 'md',
+  })
+
+  const t = useUiLocale()
+</script>
+
+<template>
+  <span
+    v-bind="$attrs"
+    role="status"
+    :aria-label="props.label ?? t.common.loading"
+    :class="cn(spinner({ size: props.size }))"
+    :style="{
+      animation: 'hn-spin var(--hn-spin-duration) var(--hn-ease-linear) infinite',
+    }"
+  />
+</template>

package/src/components/spinner/spinner.variants.ts

@@ -0,0 +1,15 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const spinner = tv({
+  base: 'inline-block shrink-0 rounded-full border-current border-e-transparent align-[-0.125em]',
+  variants: {
+    size: {
+      sm: 'size-3.5 border-[1.5px]',
+      md: 'size-4 border-2',
+      lg: 'size-5 border-2',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export type SpinnerVariants = VariantProps<typeof spinner>

package/src/components/splitter/Splitter.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+  import { SplitterGroup } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+
+  defineOptions({ name: 'HnSplitter' })
+
+  const props = withDefaults(
+    defineProps<{
+      direction?: 'horizontal' | 'vertical'
+      autoSaveId?: string
+      class?: string
+    }>(),
+    { direction: 'horizontal' },
+  )
+</script>
+
+<template>
+  <div :class="cn(props.class)">
+    <SplitterGroup :direction="props.direction" :auto-save-id="props.autoSaveId">
+      <slot />
+    </SplitterGroup>
+  </div>
+</template>

package/src/components/splitter/SplitterHandle.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+  import { SplitterResizeHandle } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+
+  defineOptions({ name: 'HnSplitterHandle' })
+
+  const props = defineProps<{
+    label?: string
+    class?: string
+  }>()
+
+  const t = useUiLocale()
+</script>
+
+<template>
+  <SplitterResizeHandle
+    :aria-label="props.label ?? t.splitter.handleLabel"
+    :class="
+      cn(
+        'hn-focus-ring group/handle relative flex shrink-0 items-center justify-center',
+        'data-[orientation=horizontal]:w-2 data-[orientation=vertical]:h-2',
+        props.class,
+      )
+    "
+  >
+    <div
+      class="border-line group-hover/handle:border-line-strong group-data-[resize-handle-state=drag]/handle:border-line-strong group-data-[orientation=horizontal]/handle:h-full group-data-[orientation=horizontal]/handle:border-s group-data-[orientation=vertical]/handle:w-full group-data-[orientation=vertical]/handle:border-t"
+    />
+  </SplitterResizeHandle>
+</template>

package/src/components/splitter/SplitterPanel.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+  import { SplitterPanel as RekaSplitterPanel } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+
+  defineOptions({ name: 'HnSplitterPanel' })
+
+  const props = defineProps<{
+    defaultSize?: number
+    minSize?: number
+    maxSize?: number
+    collapsible?: boolean
+    collapsedSize?: number
+    class?: string
+  }>()
+</script>
+
+<template>
+  <RekaSplitterPanel
+    :default-size="props.defaultSize"
+    :min-size="props.minSize"
+    :max-size="props.maxSize"
+    :collapsible="props.collapsible"
+    :collapsed-size="props.collapsedSize"
+    :class="cn('min-h-0 min-w-0', props.class)"
+  >
+    <slot />
+  </RekaSplitterPanel>
+</template>

package/src/components/spoiler/LICENSE

@@ -0,0 +1,19 @@
+The noise painter and paint worklet are forked from spoiled
+(https://github.com/molefrog/spoiled), ported from React to Vue.
+
+spoiled is released into the public domain under the Unlicense:
+
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.

package/src/components/spoiler/Spoiler.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+  import { computed, ref } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import { useSpoiler } from './composables/useSpoiler'
+  import { useReveal } from './composables/useReveal'
+
+  defineOptions({ name: 'HnSpoiler' })
+
+  const props = withDefaults(
+    defineProps<{
+      revealOn?: 'click' | 'hover'
+      forceFallback?: boolean
+      class?: string
+    }>(),
+    { revealOn: 'click' },
+  )
+
+  const hidden = defineModel<boolean>('hidden', { default: true })
+
+  const t = useUiLocale()
+  const host = ref<HTMLElement | null>(null)
+  const { usesFallback } = useSpoiler(host, hidden, () => !!props.forceFallback)
+
+  const label = computed(() =>
+    hidden.value ? t.value.spoiler.revealLabel : t.value.spoiler.hideLabel,
+  )
+
+  const handlers = useReveal(host, hidden, () => props.revealOn)
+</script>
+
+<template>
+  <span
+    ref="host"
+    :class="cn(usesFallback ? 'hn-spoiler-fb' : 'hn-spoiler', props.class)"
+    :data-hidden="hidden ? '' : undefined"
+    :role="props.revealOn === 'click' ? 'button' : undefined"
+    tabindex="0"
+    :aria-label="label"
+    :aria-expanded="!hidden"
+    v-on="handlers"
+  >
+    <span class="hn-spoiler-inner"><slot /></span>
+  </span>
+</template>

package/src/components/spoiler/SpoilerPainter.ts

@@ -0,0 +1,197 @@
+import { workletSource } from './worklet'
+import { prefersReducedMotion } from '../../motion'
+
+export const isPaintWorkletSupported =
+  typeof CSS !== 'undefined' && (CSS as { paintWorklet?: unknown }).paintWorklet !== undefined
+
+let workletRegistered = false
+
+export function registerSpoilerWorklet() {
+  if (workletRegistered || !isPaintWorkletSupported) return
+  workletRegistered = true
+  const paintWorklet = (CSS as unknown as { paintWorklet: { addModule(url: string): void } })
+    .paintWorklet
+  paintWorklet.addModule(
+    URL.createObjectURL(new Blob([workletSource], { type: 'application/javascript' })),
+  )
+}
+
+export interface SpoilerPainterOptions {
+  fps?: number
+  gap?: number
+  density?: number
+  mimicWords?: boolean
+  accent?: string
+}
+
+const DEFAULTS = {
+  fps: 24,
+  gap: 6,
+  density: 0.12,
+  mimicWords: true,
+  accent: '0 0% 20%',
+} as const
+
+const BLOCK_MAX_TILE = 293
+const INLINE_MAX_TILE = 333
+const GAP_RATIO = 8
+const DEFAULT_FADE_S = 1.5
+
+export class SpoilerPainter {
+  readonly el: HTMLElement
+  maxFPS: number = DEFAULTS.fps
+
+  private t = 0
+  private t0 = 0
+  private tstop: number | null = null
+  private raf: number | null = null
+  private fadeS = 0
+  private hidden = false
+  private destroyed = false
+
+  constructor(el: HTMLElement, options: SpoilerPainterOptions = {}) {
+    registerSpoilerWorklet()
+    this.el = el
+    this.update(options)
+  }
+
+  get isHidden() {
+    return this.hidden
+  }
+
+  update({
+    fps = DEFAULTS.fps,
+    gap = DEFAULTS.gap,
+    density = DEFAULTS.density,
+    mimicWords = DEFAULTS.mimicWords,
+    accent = DEFAULTS.accent,
+  }: SpoilerPainterOptions = {}) {
+    if (this.destroyed) return
+
+    this.maxFPS = prefersReducedMotion() ? 0 : fps
+
+    this.el.style.setProperty('--hn-nz-density', String(density))
+    this.el.style.setProperty('--hn-nz-accent', accent)
+
+    const isBlockElement = getComputedStyle(this.el).getPropertyValue('display') !== 'inline'
+    this.useBackgroundStyle('auto', 'auto', false)
+
+    if (isBlockElement) {
+      this.el.style.setProperty('--hn-nz-words', 'false')
+      const rect = this.el.getBoundingClientRect()
+
+      if (rect.width * rect.height > BLOCK_MAX_TILE * BLOCK_MAX_TILE) {
+        this.useBackgroundStyle(
+          Math.min(rect.width, BLOCK_MAX_TILE),
+          Math.min(rect.height, BLOCK_MAX_TILE),
+          true,
+        )
+      } else {
+        const capGap = Math.floor(Math.min(gap, rect.width / GAP_RATIO, rect.height / GAP_RATIO))
+        this.el.style.setProperty('--hn-nz-gap', `${capGap}px ${capGap}px`)
+      }
+      return
+    }
+
+    this.el.style.setProperty('--hn-nz-words', String(mimicWords))
+    const rects = [...this.el.getClientRects()]
+    const heightOfLine = Math.min(...rects.map(r => r.height))
+
+    this.useBackgroundStyle(INLINE_MAX_TILE, heightOfLine, true)
+    const capGap = Math.floor(Math.min(heightOfLine / GAP_RATIO, gap))
+    this.el.style.setProperty('--hn-nz-gap', `0 ${capGap}px`)
+  }
+
+  private useBackgroundStyle(ws: string | number, hs: string | number, tile: boolean) {
+    const w = typeof ws === 'number' ? `${ws}px` : ws
+    const h = typeof hs === 'number' ? `${hs}px` : hs
+    const repeatAndPosition = tile ? 'repeat left center' : 'no-repeat center center'
+    this.el.style.background = `paint(hn-spoiler) ${repeatAndPosition} / ${w} ${h}`
+  }
+
+  private setFade(value: number) {
+    this.fadeS = value
+    this.el.style.setProperty('--hn-nz-fade', `${value}s`)
+  }
+
+  private setT(value: number) {
+    this.t = value
+    this.el.style.setProperty('--hn-nz-t', value.toFixed(3))
+  }
+
+  private setTstop(value: number | null) {
+    this.tstop = value
+    if (value !== null) {
+      this.el.style.setProperty('--hn-nz-stop', value.toFixed(3))
+    } else {
+      this.el.style.removeProperty('--hn-nz-stop')
+    }
+  }
+
+  private parseFade(value: number | boolean | undefined) {
+    if (this.maxFPS <= 0) return 0
+    return value === true || value === undefined ? DEFAULT_FADE_S : Number(value)
+  }
+
+  hide(animate?: number | boolean) {
+    if (this.destroyed) return
+    this.hidden = true
+    this.setFade(this.parseFade(animate))
+    this.setTstop(null)
+    this.setT(0)
+    this.startAnimation()
+  }
+
+  reveal(animate?: number | boolean) {
+    if (this.destroyed) return
+    this.hidden = false
+    const duration = this.parseFade(animate)
+    this.setFade(duration)
+    this.setTstop(this.t)
+    if (duration <= 0) this.stopAnimation()
+  }
+
+  private frame = (now: DOMHighResTimeStamp) => {
+    if (this.destroyed) return
+    const shouldStop = this.tstop !== null && this.t > this.tstop + this.fadeS
+
+    if (this.maxFPS > 0 && !shouldStop) {
+      this.raf = requestAnimationFrame(this.frame)
+    }
+
+    const dt = now - this.t0
+    if (dt > 0 && dt < 1000 / this.maxFPS) return
+
+    this.setT(this.t + dt / 1000)
+    this.t0 = now
+  }
+
+  private startAnimation() {
+    this.t0 = performance.now()
+    this.frame(this.t0)
+  }
+
+  private stopAnimation() {
+    if (this.raf !== null) {
+      cancelAnimationFrame(this.raf)
+      this.raf = null
+    }
+  }
+
+  destroy() {
+    this.destroyed = true
+    this.stopAnimation()
+    this.el.style.removeProperty('background')
+    for (const prop of [
+      '--hn-nz-t',
+      '--hn-nz-stop',
+      '--hn-nz-fade',
+      '--hn-nz-gap',
+      '--hn-nz-words',
+      '--hn-nz-density',
+      '--hn-nz-accent',
+    ]) {
+      this.el.style.removeProperty(prop)
+    }
+  }
+}

package/src/components/spoiler/composables/useReveal.ts

@@ -0,0 +1,53 @@
+import { computed, type Ref } from 'vue'
+import { irisOrigin } from '../utils/irisOrigin'
+
+export function useReveal(
+  host: Ref<HTMLElement | null>,
+  hidden: Ref<boolean>,
+  revealOn: () => 'click' | 'hover',
+) {
+  function setOrigin(event?: MouseEvent) {
+    const el = host.value
+    if (!el) return
+    if (!event || !hidden.value) return
+
+    const origin = irisOrigin([...el.getClientRects()], event.clientX, event.clientY)
+    if (!origin) {
+      el.style.removeProperty('--hn-iris-x')
+      el.style.removeProperty('--hn-iris-y')
+      return
+    }
+    el.style.setProperty('--hn-iris-x', `${origin.x.toFixed(1)}%`)
+    el.style.setProperty('--hn-iris-y', `${origin.y.toFixed(1)}%`)
+  }
+
+  function toggle(event?: MouseEvent) {
+    setOrigin(event)
+    hidden.value = !hidden.value
+  }
+
+  const handlers = computed(() => {
+    if (revealOn() === 'hover') {
+      return {
+        mouseenter: (event: MouseEvent) => {
+          setOrigin(event)
+          hidden.value = false
+        },
+        mouseleave: () => (hidden.value = true),
+        focus: () => (hidden.value = false),
+        blur: () => (hidden.value = true),
+      }
+    }
+    return {
+      click: toggle,
+      keydown: (event: KeyboardEvent) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault()
+          toggle()
+        }
+      },
+    }
+  })
+
+  return handlers
+}

package/src/components/spoiler/composables/useSpoiler.ts

@@ -0,0 +1,68 @@
+import { onBeforeUnmount, onMounted, ref, watch, type Ref } from 'vue'
+import { isPaintWorkletSupported, SpoilerPainter } from '../SpoilerPainter'
+
+const ACCENT_LIGHT = '0 0% 20%'
+const ACCENT_DARK = '0 0% 100%'
+
+export function useSpoiler(
+  host: Ref<HTMLElement | null>,
+  hidden: Ref<boolean>,
+  forceFallback: () => boolean,
+) {
+  const usesFallback = ref(true)
+
+  let painter: SpoilerPainter | undefined
+  let themeObserver: MutationObserver | undefined
+  let resizeObserver: ResizeObserver | undefined
+  const isDark = ref(false)
+
+  const accent = () => (isDark.value ? ACCENT_DARK : ACCENT_LIGHT)
+
+  onMounted(() => {
+    usesFallback.value = !isPaintWorkletSupported || forceFallback()
+    if (usesFallback.value || !host.value) return
+
+    const readTheme = () => {
+      isDark.value = document.documentElement.classList.contains('dark')
+    }
+    readTheme()
+    themeObserver = new MutationObserver(readTheme)
+    themeObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class'],
+    })
+
+    painter = new SpoilerPainter(host.value, { accent: accent() })
+
+    resizeObserver = new ResizeObserver(() => {
+      painter?.update({ accent: accent() })
+    })
+    resizeObserver.observe(host.value)
+
+    watch(
+      hidden,
+      value => {
+        if (!painter) return
+        if (value !== painter.isHidden) {
+          if (value) {
+            painter.hide()
+          } else {
+            painter.reveal()
+          }
+        }
+      },
+      { immediate: true },
+    )
+
+    watch(isDark, () => painter?.update({ accent: accent() }))
+  })
+
+  onBeforeUnmount(() => {
+    painter?.destroy()
+    painter = undefined
+    themeObserver?.disconnect()
+    resizeObserver?.disconnect()
+  })
+
+  return { usesFallback }
+}