@hina-ui/vue 1.0.0

package/src/components/spoiler/utils/irisOrigin.ts

@@ -0,0 +1,40 @@
+export interface IrisOrigin {
+  x: number
+  y: number
+}
+
+export function irisOrigin(
+  rects: readonly DOMRect[],
+  clientX: number,
+  clientY: number,
+): IrisOrigin | null {
+  const valid = rects.filter(r => r.width > 0 && r.height > 0)
+  if (valid.length === 0) return null
+
+  const totalWidth = valid.reduce((sum, r) => sum + r.width, 0)
+  const lineHeight = valid[0]!.height
+
+  let virtualX: number | null = null
+  let virtualY = 0
+  let walked = 0
+  for (const r of valid) {
+    const inside =
+      clientY >= r.top - 2 &&
+      clientY <= r.bottom + 2 &&
+      clientX >= r.left - 2 &&
+      clientX <= r.right + 2
+    if (inside) {
+      virtualX = walked + (clientX - r.left)
+      virtualY = clientY - r.top
+      break
+    }
+    walked += r.width
+  }
+
+  if (virtualX === null || totalWidth === 0 || lineHeight === 0) return null
+
+  return {
+    x: (virtualX / totalWidth) * 100,
+    y: (virtualY / lineHeight) * 100,
+  }
+}

package/src/components/spoiler/worklet.ts

@@ -0,0 +1,199 @@
+declare function registerPaint(name: string, painter: unknown): void
+
+const workletMain = () => {
+  const M = Math
+
+  const lcgrand =
+    (seed = 1) =>
+    (a = 0, b = 1) =>
+      a +
+      (M.abs(b - a) * (M.imul(48271, (seed = M.imul(214013, seed) + 2531011)) & 0x7fffffff)) /
+        0x7fffffff
+
+  const pol2vec = (l: number, a = 0) => [l * M.cos(a), l * M.sin(a)] as const
+  const vecmag = ([x, y]: readonly number[]) => M.sqrt(x! * x! + y! * y!)
+  const vecnorm = ([x, y]: readonly number[], l = vecmag([x!, y!])) =>
+    l === 0 ? ([0, 0] as const) : ([x! / l, y! / l] as const)
+
+  const trapezoidalWave = (l: number, a: number, b: number) => {
+    const s = M.max(a, l - b)
+    return (t: number) => {
+      if (t < a) return M.max(0, t / a)
+      if (t > s) return M.max(0, 1 - (t - s) / (l - s))
+      return 1
+    }
+  }
+
+  const cycle = (x: number, n: number) => ((x % n) + n) % n
+  const mirror = (x: number, n: number, r: number) => (x < r ? n + x : x > n - r ? x - n : x)
+  const clamp = (min: number, x: number, max: number) => M.max(min, M.min(x, max))
+
+  const cycleBounds = ([x, y]: readonly number[], [w, h]: readonly number[], r: number) => {
+    const tx = cycle(x!, w!)
+    const ty = cycle(y!, h!)
+    return [
+      [tx, ty],
+      [mirror(tx, w!, r), mirror(ty, h!, r)],
+    ] as const
+  }
+
+  const easeOutCubic = (t: number) => --t * t * t + 1
+
+  type World = { t: number; tStop: number; tStart: number; n: number }
+
+  const animateFadeInOut = (world: World, idx: number, duration: number) => {
+    const direction = world.tStop <= world.t ? 'out' : 'in'
+    const animationStartT = direction === 'in' ? world.tStart : world.tStop
+    const t = animationStartT + ((2 / 3) * duration * idx) / world.n
+    const fadeFor = (1 / 3) * duration
+
+    let progress = 0
+    if (direction === 'in') {
+      progress = (fadeFor + t - world.t) / fadeFor || 0
+    } else {
+      progress = (world.t - t) / fadeFor || 1
+    }
+
+    return easeOutCubic(1 - clamp(0, progress, 1))
+  }
+
+  const FAKE_WORDS = [5, 3, 4, 4, 2, 4, 7, 6, 8, 6, 3, 1, 6]
+
+  const makeWordDistribution = (line: number, em: number, space: number) => {
+    let marker = 0
+    let i = 0
+    let wordslen = 0
+    const chunks: [number, number][] = []
+
+    do {
+      const endOfWord = M.min(line, marker + FAKE_WORDS[i++ % FAKE_WORDS.length]! * em)
+      wordslen += endOfWord - marker
+      chunks.push([marker, (marker = endOfWord)])
+    } while ((marker += space) < line)
+
+    if (chunks.length >= 0) chunks[chunks.length - 1]![1] = line
+
+    return (t: number) => {
+      const w = t * wordslen
+      let m = 0
+      for (const [start, end] of chunks) {
+        const wordLength = end - start
+        if (m < w && w <= m + wordLength) return start + w - m
+        m += wordLength
+      }
+      return 0
+    }
+  }
+
+  const getVar = (props: { get(name: string): unknown }, name: string) => {
+    const val = props.get(name)
+    if (typeof val === 'string') return val
+    return String(val ?? '')
+  }
+
+  class HnSpoilerWorklet {
+    static get contextOptions() {
+      return { alpha: true }
+    }
+
+    static get inputProperties() {
+      return [
+        '--hn-nz-t',
+        '--hn-nz-stop',
+        '--hn-nz-fade',
+        '--hn-nz-gap',
+        '--hn-nz-accent',
+        '--hn-nz-words',
+        '--hn-nz-density',
+      ]
+    }
+
+    paint(
+      ctx: CanvasRenderingContext2D,
+      size: { width: number; height: number },
+      props: { get(name: string): unknown },
+    ) {
+      const rand = lcgrand(4011505)
+
+      const accent = (getVar(props, '--hn-nz-accent') || '0 0% 0%').split(' ')
+      const mimicWords = getVar(props, '--hn-nz-words').trim() === 'true'
+      const vmin = 2
+      const vmax = 12
+      const width = size.width
+      const height = size.height
+      const gaps = (getVar(props, '--hn-nz-gap') || '0px 0px').split(' ').map(parseFloat)
+      const hgap = gaps[0] ?? 0
+      const vgap = gaps[1] ?? 0
+      const density = parseFloat(getVar(props, '--hn-nz-density')) || 0.08
+      const sizedev = (globalThis as { devicePixelRatio?: number }).devicePixelRatio! > 1 ? 0.5 : 0
+      const fadeDuration = parseFloat(getVar(props, '--hn-nz-fade')) || 0
+
+      const world: World = {
+        t: parseFloat(getVar(props, '--hn-nz-t') || '0'),
+        tStop: parseFloat(getVar(props, '--hn-nz-stop') || 'Infinity'),
+        tStart: 0,
+        n: M.round(M.min(5000, density * (width - 2 * hgap) * (height - 2 * vgap))),
+      }
+
+      const lineWidth = width - 2 * hgap
+      const lineHeight = height - 2 * vgap
+
+      const wordDist = mimicWords
+        ? makeWordDistribution(lineWidth, lineHeight, M.max(12, lineHeight / 4))
+        : (x: number) => x * (width - 2 * hgap)
+
+      ctx.clearRect(0, 0, size.width, size.height)
+
+      for (let i = 0; i < world.n; ++i) {
+        const x0 = hgap + wordDist(rand())
+        const y0 = rand(vgap, height - vgap)
+        const v0mag = rand(vmin, vmax)
+        const size0 = rand(1, 1 + sizedev)
+
+        const l = parseInt(accent[2] ?? '0')
+        const ldir = l > 50 ? -1 : 1
+        const lightness = M.floor(clamp(0, l + ldir * rand(0, 30), 100))
+
+        const v0 = pol2vec(v0mag, rand(0, M.PI * 2))
+        const vx0 = v0[0]
+        const vy0 = v0[1]
+        vecnorm(v0)
+
+        const shape = rand() > 0.5 ? 'square' : 'circle'
+        const lifetime = rand(0.3, 1.5)
+        const respawn = rand(0, 1)
+        const visibilityFn = trapezoidalWave(lifetime, 0.15, 0.3)
+        const phase = rand(0, lifetime + respawn)
+
+        const cantSpawnNoMore =
+          M.floor((world.tStop + phase) / (lifetime + respawn)) <
+          M.floor((world.t + phase) / (lifetime + respawn))
+        if (cantSpawnNoMore) continue
+
+        const t = M.min(lifetime, (world.t + phase) % (lifetime + respawn))
+        const x = x0 + vx0 * t
+        const y = y0 + vy0 * t
+
+        const fade = animateFadeInOut(world, i, fadeDuration)
+        const alpha = fade * (1 - t / lifetime)
+        const psize = fade * (size0 * visibilityFn(t))
+
+        for (const [wx, wy] of cycleBounds([x, y], [width, height], psize / 2)) {
+          ctx.beginPath()
+          ctx.fillStyle = `hsl(${accent[0]} ${accent[1]} ${lightness}% / ${M.round(alpha * 100)}%)`
+          if (shape === 'square') {
+            ctx.rect(wx!, wy!, psize, psize)
+          } else {
+            ctx.arc(wx!, wy!, psize / 2, 0, M.PI * 2)
+          }
+          ctx.closePath()
+          ctx.fill()
+        }
+      }
+    }
+  }
+
+  registerPaint('hn-spoiler', HnSpoilerWorklet)
+}
+
+export const workletSource = `(${workletMain.toString()})()`

package/src/components/stack/Stack.vue

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

package/src/components/stack/stack.variants.ts

@@ -0,0 +1,34 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const stack = tv({
+  base: 'flex flex-col',
+  variants: {
+    gap: {
+      none: 'gap-0',
+      xs: 'gap-1',
+      sm: 'gap-2',
+      md: 'gap-[var(--hn-stack-gap)]',
+      lg: 'gap-6',
+      xl: 'gap-8',
+    },
+    align: {
+      start: 'items-start',
+      center: 'items-center',
+      end: 'items-end',
+      stretch: 'items-stretch',
+    },
+    justify: {
+      start: 'justify-start',
+      center: 'justify-center',
+      end: 'justify-end',
+      between: 'justify-between',
+      around: 'justify-around',
+      evenly: 'justify-evenly',
+    },
+  },
+  defaultVariants: {
+    gap: 'md',
+  },
+})
+
+export type StackVariants = VariantProps<typeof stack>

package/src/components/statistic/Statistic.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+  import { TrendingDown, TrendingUp } from '@lucide/vue'
+  import { computed, useSlots } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import NumberFormat from '../number-format/NumberFormat.vue'
+  import Skeleton from '../skeleton/Skeleton.vue'
+  import {
+    statistic,
+    statisticAffix,
+    statisticBody,
+    statisticDelta,
+    statisticIcon,
+    statisticLabel,
+    statisticValue,
+    type StatisticVariants,
+  } from './statistic.variants'
+
+  defineOptions({ name: 'HnStatistic' })
+
+  const props = withDefaults(
+    defineProps<{
+      label: string
+      value?: number | string | null
+      format?: 'decimal' | 'compact' | 'percent' | 'currency'
+      currency?: string
+      precision?: number
+      prefix?: string
+      suffix?: string
+      delta?: number
+      deltaLabel?: string
+      invert?: boolean
+      loading?: boolean
+      size?: StatisticVariants['size']
+      class?: string
+    }>(),
+    { format: 'decimal', invert: false, loading: false, size: 'md' },
+  )
+
+  const slots = useSlots()
+  const t = useUiLocale()
+
+  const deltaText = computed(() => {
+    if (props.delta === undefined) return undefined
+    return new Intl.NumberFormat(t.value.tag, {
+      style: 'percent',
+      maximumFractionDigits: 1,
+      signDisplay: 'exceptZero',
+    }).format(props.delta)
+  })
+
+  const deltaTone = computed(() => {
+    if (!props.delta) return 'neutral'
+    return props.delta > 0 !== props.invert ? 'success' : 'danger'
+  })
+</script>
+
+<template>
+  <div data-hn-statistic :class="cn(statistic(), props.class)">
+    <div :class="statisticBody()">
+      <span :class="statisticLabel()">{{ props.label }}</span>
+      <span :class="statisticValue({ size: props.size })">
+        <Skeleton v-if="props.loading" class="h-[1.25em] w-24" />
+        <template v-else>
+          <span v-if="props.prefix" :class="statisticAffix()">{{ props.prefix }}</span>
+          <NumberFormat
+            v-if="typeof props.value === 'number'"
+            :value="props.value"
+            :format="props.format"
+            :currency="props.currency"
+            :precision="props.precision"
+          />
+          <span v-else>{{ props.value ?? '—' }}</span>
+          <span v-if="props.suffix" :class="statisticAffix()">{{ props.suffix }}</span>
+        </template>
+      </span>
+      <span v-if="deltaText" :class="statisticDelta({ tone: deltaTone })">
+        <Skeleton v-if="props.loading" class="h-[1.25em] w-16" />
+        <template v-else>
+          <TrendingUp v-if="props.delta! > 0" aria-hidden="true" />
+          <TrendingDown v-else-if="props.delta! < 0" aria-hidden="true" />
+          <span>{{ deltaText }}</span>
+          <span v-if="props.deltaLabel" class="text-muted">{{ props.deltaLabel }}</span>
+        </template>
+      </span>
+      <slot />
+    </div>
+    <span v-if="slots.icon" aria-hidden="true" :class="statisticIcon()">
+      <slot name="icon" />
+    </span>
+  </div>
+</template>

package/src/components/statistic/statistic.variants.ts

@@ -0,0 +1,51 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const statistic = tv({
+  base: 'flex min-w-0 items-start justify-between gap-4',
+})
+
+export const statisticBody = tv({
+  base: 'flex min-w-0 flex-col gap-1',
+})
+
+export const statisticLabel = tv({
+  base: 'text-muted text-sm',
+})
+
+export const statisticValue = tv({
+  base: 'text-fg flex items-baseline gap-1 font-semibold tracking-tight tabular-nums',
+  variants: {
+    size: {
+      sm: 'text-xl',
+      md: 'text-2xl',
+      lg: 'text-3xl',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const statisticAffix = tv({
+  base: 'text-muted text-sm font-normal',
+})
+
+export const statisticDelta = tv({
+  base: 'flex flex-wrap items-center gap-x-1 text-sm whitespace-nowrap [&_svg]:size-4 [&_svg]:shrink-0',
+  variants: {
+    tone: {
+      success: 'text-success-text',
+      danger: 'text-danger-text',
+      neutral: 'text-muted',
+    },
+  },
+  defaultVariants: {
+    tone: 'neutral',
+  },
+})
+
+export const statisticIcon = tv({
+  base: 'bg-subtle text-muted flex size-10 shrink-0 items-center justify-center rounded-md [&_svg]:size-5',
+})
+
+export type StatisticVariants = VariantProps<typeof statisticValue>

package/src/components/switch/Switch.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+  import { SwitchRoot } from 'reka-ui'
+  import { useSlots } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { useFieldControl } from '../form-field/context'
+  import {
+    checkbox,
+    checkboxDescription,
+    checkboxTitle,
+    checkboxTitleText,
+  } from '../checkbox/checkbox.variants'
+  import { switchThumb, switchTrack, type SwitchVariants } from './switch.variants'
+
+  defineOptions({ name: 'HnSwitch', inheritAttrs: false })
+
+  const props = defineProps<{
+    size?: SwitchVariants['size']
+    description?: string
+    disabled?: boolean
+    invalid?: boolean
+    class?: string
+  }>()
+
+  const model = defineModel<boolean>({ default: false })
+
+  const slots = useSlots()
+
+  const {
+    id: fieldId,
+    invalid,
+    disabled,
+    describedBy,
+  } = useFieldControl({
+    invalid: () => props.invalid,
+    disabled: () => props.disabled,
+  })
+</script>
+
+<template>
+  <label
+    data-hn-switch
+    data-hn-state-group
+    :data-disabled="disabled ? '' : undefined"
+    :class="cn(checkbox({ size: props.size }), props.class)"
+  >
+    <SwitchRoot
+      v-bind="$attrs"
+      v-model="model"
+      :id="fieldId"
+      :disabled="disabled"
+      :aria-invalid="invalid || undefined"
+      :aria-describedby="describedBy"
+      :data-invalid="invalid ? '' : undefined"
+      :data-hn-on="model ? '' : undefined"
+      :class="switchTrack({ size: props.size })"
+    >
+      <span data-hn-thumb aria-hidden="true" :class="switchThumb()" />
+    </SwitchRoot>
+    <span v-if="slots.default" :class="checkboxTitle()">
+      <span :class="checkboxTitleText()"><slot /></span>
+    </span>
+    <span v-if="props.description" :class="checkboxDescription({ size: props.size })">
+      {{ props.description }}
+    </span>
+  </label>
+</template>

package/src/components/switch/switch.variants.ts

@@ -0,0 +1,34 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const switchTrack = tv({
+  base: [
+    'hn-focus-ring hn-state-layer hn-transition-base group/hn-switch relative box-border shrink-0 cursor-pointer',
+    'h-[var(--hn-switch-h)] w-[var(--hn-switch-w)] rounded-full border border-transparent',
+    'bg-line-strong text-fg disabled:cursor-not-allowed',
+    '[--hn-state-selected-color:currentColor] [--hn-state-selected-opacity:0]',
+    '[--hn-switch-p:0] [--hn-switch-travel:calc(var(--hn-switch-w)-var(--hn-switch-thumb)-8px)] rtl:[--hn-switch-dir:-1]',
+    'data-hn-on:bg-accent data-hn-on:text-accent-on data-hn-on:[--hn-switch-p:1]',
+    'data-invalid:border-danger data-invalid:focus-visible:outline-danger',
+  ],
+  variants: {
+    size: {
+      sm: '[--hn-switch-h:1.25rem] [--hn-switch-thumb:0.75rem] [--hn-switch-w:2rem]',
+      md: '[--hn-switch-h:1.5rem] [--hn-switch-thumb:1rem] [--hn-switch-w:2.5rem]',
+      lg: '[--hn-switch-h:1.75rem] [--hn-switch-thumb:1.25rem] [--hn-switch-w:3rem]',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const switchThumb = tv({
+  base: [
+    'hn-switch-thumb pointer-events-none absolute top-0.75 start-0.75 box-border block rounded-full',
+    'size-[var(--hn-switch-thumb)]',
+    '[translate:calc(var(--hn-switch-p)*var(--hn-switch-travel)*var(--hn-switch-dir,1))_0]',
+    'border-line bg-surface border shadow-sm',
+  ],
+})
+
+export type SwitchVariants = VariantProps<typeof switchTrack>

package/src/components/table/Table.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+  import ScrollArea from '../scroll-area/ScrollArea.vue'
+  import { cn } from '../../lib/cn'
+  import { tableWrapper, type TableVariants } from './table.variants'
+
+  defineOptions({ name: 'HnTable' })
+
+  const props = withDefaults(
+    defineProps<{
+      variant?: TableVariants['variant']
+      hover?: boolean
+      stickyHeader?: boolean
+      caption?: string
+      class?: string
+    }>(),
+    { variant: 'primary', hover: true, stickyHeader: false },
+  )
+</script>
+
+<template>
+  <ScrollArea
+    :direction="props.stickyHeader ? 'both' : 'horizontal'"
+    :class="
+      cn(
+        tableWrapper({
+          variant: props.variant,
+          hover: props.hover,
+          stickyHeader: props.stickyHeader,
+        }),
+        props.class,
+      )
+    "
+  >
+    <table class="hn-table">
+      <caption v-if="props.caption">
+        <span>{{ props.caption }}</span>
+      </caption>
+      <slot />
+    </table>
+  </ScrollArea>
+</template>

package/src/components/table/TableBody.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+
+  defineOptions({ name: 'HnTableBody' })
+
+  const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <tbody :class="cn(props.class)">
+    <slot />
+  </tbody>
+</template>

package/src/components/table/TableCell.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+  import { tableCell, type TableCellVariants } from './table.variants'
+
+  defineOptions({ name: 'HnTableCell' })
+
+  const props = withDefaults(
+    defineProps<{
+      align?: TableCellVariants['align']
+      sticky?: boolean
+      class?: string
+    }>(),
+    { sticky: false },
+  )
+</script>
+
+<template>
+  <td :class="cn(tableCell({ align: props.align, sticky: props.sticky }), props.class)">
+    <slot />
+  </td>
+</template>

package/src/components/table/TableHead.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+  import { tableCell, type TableCellVariants } from './table.variants'
+
+  defineOptions({ name: 'HnTableHead' })
+
+  const props = withDefaults(
+    defineProps<{
+      scope?: 'col' | 'row'
+      align?: TableCellVariants['align']
+      sticky?: boolean
+      class?: string
+    }>(),
+    { scope: 'col', sticky: false },
+  )
+</script>
+
+<template>
+  <th
+    :scope="props.scope"
+    :class="cn(tableCell({ align: props.align, sticky: props.sticky, head: true }), props.class)"
+  >
+    <slot />
+  </th>
+</template>

package/src/components/table/TableHeader.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+
+  defineOptions({ name: 'HnTableHeader' })
+
+  const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <thead :class="cn(props.class)">
+    <slot />
+  </thead>
+</template>

package/src/components/table/TableRow.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+
+  defineOptions({ name: 'HnTableRow' })
+
+  const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <tr :class="cn(props.class)">
+    <slot />
+  </tr>
+</template>