@hina-ui/vue 1.0.0

package/dist/types/motion.d.ts

@@ -0,0 +1,53 @@
+export type Bezier = readonly [number, number, number, number];
+export declare const EASE: {
+    readonly enter: readonly [0, 0, 0.2, 1];
+    readonly enterStrong: readonly [0.05, 0.7, 0.1, 1];
+    readonly exit: readonly [0.4, 0, 1, 1];
+    readonly move: readonly [0.4, 0, 0.2, 1];
+    readonly press: readonly [0.3, 1.2, 0.6, 1];
+};
+export declare const DURATION: {
+    readonly fast: 0.2;
+    readonly base: 0.3;
+    readonly slow: 0.45;
+    readonly exit: 0.2;
+};
+export declare const TRAVEL: {
+    readonly sm: 4;
+    readonly md: 10;
+};
+export declare const STAGGER = 0.024;
+export declare const cssEase: (bezier: Bezier) => string;
+export declare const TRANSITION: {
+    readonly fast: {
+        readonly duration: 0.2;
+        readonly ease: readonly [0.4, 0, 0.2, 1];
+    };
+    readonly base: {
+        readonly duration: 0.3;
+        readonly ease: readonly [0.4, 0, 0.2, 1];
+    };
+    readonly enter: {
+        readonly duration: 0.3;
+        readonly ease: readonly [0, 0, 0.2, 1];
+    };
+    readonly enterStrong: {
+        readonly duration: 0.45;
+        readonly ease: readonly [0.05, 0.7, 0.1, 1];
+    };
+    readonly exit: {
+        readonly duration: 0.2;
+        readonly ease: readonly [0.4, 0, 1, 1];
+    };
+    readonly press: {
+        readonly duration: 0.2;
+        readonly ease: readonly [0.3, 1.2, 0.6, 1];
+    };
+    readonly layout: {
+        readonly duration: 0.3;
+        readonly ease: readonly [0.4, 0, 0.2, 1];
+    };
+};
+export type TransitionName = keyof typeof TRANSITION;
+export declare function prefersReducedMotion(): boolean;
+//# sourceMappingURL=motion.d.ts.map

package/dist/types/motion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.d.ts","sourceRoot":"","sources":["../../src/motion.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAE9D,eAAO,MAAM,IAAI;;;;;;CAM0B,CAAA;AAE3C,eAAO,MAAM,QAAQ;;;;;CAKX,CAAA;AAEV,eAAO,MAAM,MAAM;;;CAGT,CAAA;AAEV,eAAO,MAAM,OAAO,QAAQ,CAAA;AAE5B,eAAO,MAAM,OAAO,GAAI,QAAQ,MAAM,WAAwC,CAAA;AAE9E,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQb,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,UAAU,CAAA;AAEpD,wBAAgB,oBAAoB,IAAI,OAAO,CAE9C"}

package/dist/types/singletons.d.ts

@@ -0,0 +1,3 @@
+export declare const REQUIRED_SINGLETONS: readonly ["vue", "reka-ui", "@hina-ui/vue"];
+export type RequiredSingleton = (typeof REQUIRED_SINGLETONS)[number];
+//# sourceMappingURL=singletons.d.ts.map

package/dist/types/singletons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"singletons.d.ts","sourceRoot":"","sources":["../../src/singletons.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,6CAA8C,CAAA;AAE9E,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA"}

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@hina-ui/vue",
+  "version": "1.0.0",
+  "description": "An elegant, restrained Vue 3 component library built on Reka UI and Tailwind CSS v4.",
+  "keywords": [
+    "vue",
+    "vue3",
+    "component-library",
+    "design-system",
+    "ui",
+    "tailwindcss",
+    "reka-ui",
+    "accessibility"
+  ],
+  "homepage": "https://hinaui.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Hikarinagi/ui.git",
+    "directory": "packages/vue"
+  },
+  "bugs": "https://github.com/Hikarinagi/ui/issues",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "module": "./dist/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles/tokens.css": "./src/styles/tokens.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "!src/**/*.test.ts"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@internationalized/date": "^3.12.4",
+    "@lucide/vue": "^1.37.0",
+    "@vueuse/core": "^12.8.2",
+    "clsx": "^2.1.1",
+    "motion-v": "^2.2.1",
+    "overlayscrollbars": "^2.16.0",
+    "reka-ui": "^2.9.10",
+    "shiki": "4.0.2",
+    "tailwind-merge": "^3.6.0",
+    "tailwind-variants": "^3.3.1"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@floating-ui/dom": "1.7.6",
+    "@tailwindcss/vite": "^4.3.0",
+    "@tanstack/vue-virtual": "^3.13.36",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vitest/browser": "^4.1.11",
+    "@vitest/browser-playwright": "^4.1.11",
+    "@vue/test-utils": "^2.4.10",
+    "axe-core": "^4.13.0",
+    "happy-dom": "^20.9.0",
+    "playwright": "^1.62.1",
+    "tailwindcss": "^4.3.0",
+    "typescript": "^5.8.0",
+    "vite": "^8.2.2",
+    "vitest": "^4.1.11",
+    "vue": "^3.5.33",
+    "vue-tsc": "^3.3.1"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "vite build && vue-tsc -p tsconfig.build.json",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:browser": "vitest run -c vitest.browser.config.ts"
+  }
+}

package/src/components/accordion/Accordion.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+  import { AccordionRoot, useForwardPropsEmits, type AccordionRootEmits } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { accordion } from './accordion.variants'
+
+  defineOptions({ name: 'HnAccordion' })
+
+  const props = withDefaults(
+    defineProps<{
+      type?: 'single' | 'multiple'
+      collapsible?: boolean
+      modelValue?: string | string[]
+      defaultValue?: string | string[]
+      disabled?: boolean
+      class?: string
+    }>(),
+    { type: 'single' },
+  )
+  const emits = defineEmits<AccordionRootEmits>()
+
+  const forwarded = useForwardPropsEmits(
+    () => ({
+      type: props.type,
+      collapsible: props.collapsible,
+      modelValue: props.modelValue,
+      defaultValue: props.defaultValue,
+      disabled: props.disabled,
+    }),
+    emits,
+  )
+</script>
+
+<template>
+  <AccordionRoot v-bind="forwarded" :class="cn(accordion(), props.class)">
+    <slot />
+  </AccordionRoot>
+</template>

package/src/components/accordion/AccordionContent.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+  import { onBeforeUpdate, onMounted, shallowRef, type ComponentPublicInstance } from 'vue'
+  import { AccordionContent as RekaAccordionContent } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { writeCollapseGap } from '../../lib/collapse'
+  import { accordionContent } from './accordion.variants'
+
+  defineOptions({ name: 'HnAccordionContent' })
+
+  const props = defineProps<{ class?: string }>()
+
+  const content = shallowRef<ComponentPublicInstance | null>(null)
+
+  function measure() {
+    const el = content.value?.$el as Element | undefined
+    if (el instanceof Element) writeCollapseGap(el, el.parentElement)
+  }
+
+  onMounted(measure)
+  onBeforeUpdate(measure)
+</script>
+
+<template>
+  <RekaAccordionContent ref="content" :class="cn(accordionContent(), props.class)">
+    <div class="pb-4">
+      <slot />
+    </div>
+  </RekaAccordionContent>
+</template>

package/src/components/accordion/AccordionItem.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+  import { AccordionItem as RekaAccordionItem } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+
+  defineOptions({ name: 'HnAccordionItem' })
+
+  const props = defineProps<{
+    value: string
+    disabled?: boolean
+    class?: string
+  }>()
+</script>
+
+<template>
+  <RekaAccordionItem :value="props.value" :disabled="props.disabled" :class="cn(props.class)">
+    <slot />
+  </RekaAccordionItem>
+</template>

package/src/components/accordion/AccordionTrigger.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+  import { AccordionHeader, AccordionTrigger as RekaAccordionTrigger } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import Ripple from '../ripple/Ripple.vue'
+  import DisclosureIcon from '../disclosure-icon/DisclosureIcon.vue'
+  import { accordionTrigger } from './accordion.variants'
+
+  defineOptions({ name: 'HnAccordionTrigger' })
+
+  const props = withDefaults(
+    defineProps<{
+      level?: 2 | 3 | 4 | 5 | 6
+      icon?: boolean
+      class?: string
+    }>(),
+    { level: 3, icon: true },
+  )
+
+  const slots = defineSlots<{
+    default?: () => unknown
+    icon?: () => unknown
+  }>()
+</script>
+
+<template>
+  <AccordionHeader :as="`h${props.level}`" class="m-0">
+    <RekaAccordionTrigger :class="cn(accordionTrigger(), props.class)">
+      <Ripple />
+      <span class="min-w-0 flex-1">
+        <slot />
+      </span>
+      <template v-if="props.icon">
+        <DisclosureIcon v-if="!slots.icon" />
+        <DisclosureIcon v-else>
+          <slot name="icon" />
+        </DisclosureIcon>
+      </template>
+    </RekaAccordionTrigger>
+  </AccordionHeader>
+</template>

package/src/components/accordion/accordion.variants.ts

@@ -0,0 +1,19 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const accordion = tv({
+  base: 'divide-line flex flex-col divide-y',
+})
+
+export const accordionTrigger = tv({
+  base: [
+    'group/hn-disclosure hn-interactive hn-state-layer hn-press-none',
+    'text-fg -mx-3 flex w-[calc(100%+--spacing(6))] items-center justify-between gap-3 rounded-md px-3 py-3 text-start text-base font-medium',
+    'disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4',
+  ],
+})
+
+export const accordionContent = tv({
+  base: 'hn-anim-collapse [--hn-collapse-h:var(--reka-accordion-content-height)]',
+})
+
+export type AccordionVariants = VariantProps<typeof accordion>

package/src/components/alert/Alert.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+  import { computed, useSlots } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { useCollapseHooks } from '../../lib/collapse'
+  import CloseButton from '../close-button/CloseButton.vue'
+  import { callout, calloutIcon, type CalloutVariants } from '../callout/callout.variants'
+  import { calloutIcons } from '../callout/icons'
+
+  defineOptions({ name: 'HnAlert' })
+
+  const props = withDefaults(
+    defineProps<{
+      tone?: CalloutVariants['tone']
+      title?: string
+      icon?: boolean
+      closable?: boolean
+      class?: string
+    }>(),
+    { tone: 'neutral', icon: true },
+  )
+
+  const open = defineModel<boolean>('open', { default: true })
+
+  const emit = defineEmits<{ close: [] }>()
+
+  const slots = useSlots()
+  const hooks = useCollapseHooks()
+
+  const role = computed(() =>
+    props.tone === 'danger' || props.tone === 'warning' ? 'alert' : 'status',
+  )
+
+  function close() {
+    open.value = false
+    emit('close')
+  }
+</script>
+
+<template>
+  <Transition
+    enter-from-class="hn-collapse-closed"
+    enter-to-class="hn-collapse-open"
+    leave-from-class="hn-collapse-open"
+    leave-to-class="hn-collapse-closed"
+    v-on="hooks"
+  >
+    <div v-if="open" data-hn-alert class="hn-collapse">
+      <div class="hn-collapse-body">
+        <div :role="role" :class="cn(callout({ tone: props.tone }), props.class)">
+          <slot name="icon">
+            <component
+              :is="calloutIcons[props.tone]"
+              v-if="props.icon"
+              :class="calloutIcon({ tone: props.tone })"
+              aria-hidden="true"
+            />
+          </slot>
+          <div class="flex min-w-0 flex-1 flex-col gap-1">
+            <p v-if="props.title" class="text-fg font-medium">{{ props.title }}</p>
+            <slot />
+          </div>
+          <div v-if="slots.actions" class="flex shrink-0 items-center gap-2 self-center">
+            <slot name="actions" />
+          </div>
+          <CloseButton v-if="props.closable" size="sm" class="-my-0.5 -me-1" @click="close" />
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>

package/src/components/alert-dialog/AlertDialog.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import {
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogOverlay,
+    AlertDialogPortal,
+    AlertDialogRoot,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+  } 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 { dialogCard, dialogWrapper } from '../dialog/dialog.variants'
+  import Heading from '../heading/Heading.vue'
+  import Text from '../text/Text.vue'
+
+  defineOptions({ name: 'HnAlertDialog' })
+
+  const props = withDefaults(
+    defineProps<{
+      title: string
+      description?: string
+      confirmText?: string
+      cancelText?: string
+      tone?: 'accent' | 'danger'
+      size?: 'sm' | 'md'
+      placement?: 'center' | 'bottom'
+      onConfirm?: () => unknown
+      class?: string
+    }>(),
+    { tone: 'accent', size: 'sm' },
+  )
+  const emit = defineEmits<{ cancel: [] }>()
+
+  const open = defineModel<boolean>('open')
+  const busy = ref(false)
+  const t = useUiLocale()
+
+  function guard(event: Event) {
+    if (busy.value) event.preventDefault()
+  }
+
+  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>
+  <AlertDialogRoot v-model:open="open">
+    <AlertDialogTrigger v-if="$slots.default" as-child>
+      <slot />
+    </AlertDialogTrigger>
+    <AlertDialogPortal>
+      <AlertDialogOverlay class="hn-scrim" />
+      <div
+        :class="
+          cn(
+            'pointer-events-none fixed inset-0 z-(--hn-z-overlay) grid',
+            dialogWrapper({ placement: props.placement ?? 'auto' }),
+          )
+        "
+      >
+        <AlertDialogContent as-child @escape-key-down="guard">
+          <Card
+            :padded="false"
+            data-hn-alert-dialog
+            :aria-busy="busy || undefined"
+            :class="
+              cn(
+                'pointer-events-auto flex w-full flex-col gap-4 shadow-lg outline-none',
+                'py-(--hn-panel-p)',
+                dialogCard({ placement: props.placement ?? 'auto', size: props.size }),
+                props.class,
+              )
+            "
+          >
+            <div class="flex min-w-0 flex-col gap-1.5 px-(--hn-panel-p)">
+              <AlertDialogTitle as-child>
+                <Heading :level="2" size="lg">{{ props.title }}</Heading>
+              </AlertDialogTitle>
+              <AlertDialogDescription v-if="props.description" as-child>
+                <Text tone="muted">{{ props.description }}</Text>
+              </AlertDialogDescription>
+            </div>
+            <div v-if="$slots.content" class="px-(--hn-panel-p)">
+              <slot name="content" />
+            </div>
+            <div class="flex justify-end gap-(--hn-inline-gap) px-(--hn-panel-p)">
+              <AlertDialogCancel as-child>
+                <Button variant="soft" tone="neutral" :disabled="busy" @click="emit('cancel')">
+                  {{ props.cancelText ?? t.common.cancel }}
+                </Button>
+              </AlertDialogCancel>
+              <Button :tone="props.tone" :loading="busy" @click="confirm">
+                {{ props.confirmText ?? t.common.confirm }}
+              </Button>
+            </div>
+          </Card>
+        </AlertDialogContent>
+      </div>
+    </AlertDialogPortal>
+  </AlertDialogRoot>
+</template>

package/src/components/anchor/Anchor.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import Highlight from '../highlight/Highlight.vue'
+  import { useScrollSpy } from './composables/useScrollSpy'
+
+  export interface AnchorItem {
+    id: string
+    label: string
+    children?: AnchorItem[]
+  }
+
+  defineOptions({ name: 'HnAnchor' })
+
+  const props = defineProps<{
+    items: AnchorItem[]
+    label?: string
+    class?: string
+  }>()
+
+  const t = useUiLocale()
+
+  const entries = computed(() =>
+    props.items.flatMap(item => [
+      { id: item.id, label: item.label, depth: 0 },
+      ...(item.children ?? []).map(child => ({ id: child.id, label: child.label, depth: 1 })),
+    ]),
+  )
+
+  const { visible, current, span, jump } = useScrollSpy(() => entries.value)
+</script>
+
+<template>
+  <nav :aria-label="props.label ?? t.anchor.navLabel" :class="cn(props.class)">
+    <ul class="border-line relative grid grid-cols-1 border-s">
+      <Transition
+        enter-active-class="hn-transition-base"
+        enter-from-class="opacity-0"
+        leave-active-class="hn-transition"
+        leave-to-class="opacity-0"
+      >
+        <Highlight
+          v-if="span"
+          as="li"
+          role="presentation"
+          :style="{ gridRow: span }"
+          class="bg-accent col-start-1 -ms-px w-0.5 self-stretch justify-self-start rounded-full"
+        />
+      </Transition>
+      <li
+        v-for="(entry, index) in entries"
+        :key="entry.id"
+        class="col-start-1"
+        :style="{ gridRow: index + 1 }"
+      >
+        <a
+          :href="`#${entry.id}`"
+          :aria-current="current === entry.id ? 'location' : undefined"
+          :class="
+            cn(
+              'hn-link block py-1 text-sm',
+              entry.depth === 0 ? 'ps-3' : 'ps-6',
+              visible.has(entry.id)
+                ? 'font-medium [--hn-link-color:var(--hn-fg-default)]'
+                : '[--hn-link-color:var(--hn-fg-muted)]',
+            )
+          "
+          @click="jump($event, entry.id)"
+        >
+          {{ entry.label }}
+        </a>
+      </li>
+    </ul>
+  </nav>
+</template>

package/src/components/anchor/composables/useScrollSpy.ts

@@ -0,0 +1,69 @@
+import { useIntersectionObserver } from '@vueuse/core'
+import { computed, onMounted, shallowRef, watch } from 'vue'
+import { prefersReducedMotion } from '../../../motion'
+
+export interface SpyEntry {
+  id: string
+  label: string
+  depth: number
+}
+
+export function useScrollSpy(entries: () => SpyEntry[]) {
+  const visible = shallowRef<ReadonlySet<string>>(new Set())
+  const targets = shallowRef<Array<HTMLElement | null>>([])
+  const seen = new Set<string>()
+
+  const covered = computed(() => entries().filter(entry => visible.value.has(entry.id)))
+  const current = computed(() => covered.value[0]?.id)
+  const span = computed(() => {
+    const rows = entries().flatMap((entry, index) => (visible.value.has(entry.id) ? [index] : []))
+    return rows.length ? `${rows[0]! + 1} / ${rows.at(-1)! + 2}` : undefined
+  })
+
+  useIntersectionObserver(
+    targets,
+    observed => {
+      const next = new Set(visible.value)
+      for (const entry of observed) {
+        if (entry.isIntersecting) {
+          seen.add(entry.target.id)
+          next.add(entry.target.id)
+        } else if (seen.has(entry.target.id)) {
+          next.delete(entry.target.id)
+        }
+      }
+      if (next.size) visible.value = next
+    },
+    { rootMargin: '0px 0px -15% 0px' },
+  )
+
+  function targetOf(id: string) {
+    return document.getElementById(id)
+  }
+
+  function locate() {
+    seen.clear()
+    targets.value = entries().map(({ id }) => targetOf(id))
+  }
+
+  onMounted(() => {
+    const hash = decodeURIComponent(location.hash.slice(1))
+    if (hash && entries().some(entry => entry.id === hash)) visible.value = new Set([hash])
+    locate()
+    watch(entries, () => {
+      visible.value = new Set()
+      locate()
+    })
+  })
+
+  function jump(event: MouseEvent, id: string) {
+    const el = targetOf(id)
+    if (!el) return
+    event.preventDefault()
+    el.scrollIntoView({ behavior: prefersReducedMotion() ? 'auto' : 'smooth', block: 'start' })
+    history.replaceState(history.state, '', `#${id}`)
+    visible.value = new Set([id])
+  }
+
+  return { visible, covered, current, span, jump }
+}