@hina-ui/vue 1.0.0

package/src/components/checkbox-group/CheckboxGroup.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+  import { CheckboxGroupRoot } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { shieldFormField, useFieldControl } from '../form-field/context'
+  import Checkbox from '../checkbox/Checkbox.vue'
+  import type { CheckboxVariants } from '../checkbox/checkbox.variants'
+  import type { SelectOption } from '../select/types'
+  import { checkboxGroup, type CheckboxGroupVariants } from './checkbox-group.variants'
+
+  defineOptions({ name: 'HnCheckboxGroup' })
+
+  const props = defineProps<{
+    options: SelectOption[]
+    orientation?: CheckboxGroupVariants['orientation']
+    size?: CheckboxVariants['size']
+    disabled?: boolean
+    invalid?: boolean
+    class?: string
+  }>()
+
+  const model = defineModel<Array<string | number>>({ default: () => [] })
+
+  const { labelledBy, invalid, disabled, describedBy } = useFieldControl({
+    invalid: () => props.invalid,
+    disabled: () => props.disabled,
+  })
+  shieldFormField()
+
+  defineSlots<{ option(props: { option: SelectOption }): unknown }>()
+</script>
+
+<template>
+  <CheckboxGroupRoot
+    v-model="model"
+    :disabled="disabled"
+    :roving-focus="false"
+    role="group"
+    :aria-labelledby="labelledBy"
+    :aria-describedby="describedBy"
+    :aria-invalid="invalid || undefined"
+    data-hn-checkbox-group
+    :data-orientation="props.orientation ?? 'vertical'"
+    :data-disabled="disabled ? '' : undefined"
+    :class="cn(checkboxGroup({ orientation: props.orientation }), props.class)"
+  >
+    <Checkbox
+      v-for="option in props.options"
+      :key="option.value"
+      :value="option.value"
+      :size="props.size"
+      :disabled="disabled || option.disabled"
+      :invalid="invalid"
+      :description="option.description"
+    >
+      <slot name="option" :option="option">{{ option.label }}</slot>
+    </Checkbox>
+  </CheckboxGroupRoot>
+</template>

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

@@ -0,0 +1,16 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const checkboxGroup = tv({
+  base: 'flex min-w-0',
+  variants: {
+    orientation: {
+      vertical: 'flex-col gap-2',
+      horizontal: 'flex-row flex-wrap gap-x-[var(--hn-inline-gap)] gap-y-2',
+    },
+  },
+  defaultVariants: {
+    orientation: 'vertical',
+  },
+})
+
+export type CheckboxGroupVariants = VariantProps<typeof checkboxGroup>

package/src/components/chip/Chip.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+  import { computed, useSlots } from 'vue'
+  import { Primitive, type PrimitiveProps } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { devWarn } from '../../lib/dev'
+  import { useUiLocale } from '../../locale'
+  import Ripple from '../ripple/Ripple.vue'
+  import CloseButton from '../close-button/CloseButton.vue'
+  import IconSlot from './IconSlot.vue'
+  import { useChipRoot } from './composables/useChipRoot'
+  import { chip, chipRemove, type ChipVariants } from './chip.variants'
+
+  defineOptions({ name: 'HnChip' })
+
+  const props = withDefaults(
+    defineProps<
+      PrimitiveProps & {
+        variant?: ChipVariants['variant']
+        tone?: ChipVariants['tone']
+        size?: ChipVariants['size']
+        selectable?: boolean
+        removable?: boolean
+        disabled?: boolean
+        ripple?: boolean
+        class?: string
+      }
+    >(),
+    { ripple: true },
+  )
+
+  const selected = defineModel<boolean>('selected', { default: false })
+
+  const emit = defineEmits<{ remove: [] }>()
+
+  const slots = useSlots()
+  const t = useUiLocale()
+
+  if (props.selectable && props.removable) {
+    devWarn('Chip', 'selectable 与 removable 不能同时使用，removable 已忽略')
+  }
+
+  const { tag, interactive, attrs } = useChipRoot(props)
+  const removable = computed(() => props.removable && !props.selectable)
+  const showCheck = computed(() => props.selectable && selected.value)
+
+  function guard(event: MouseEvent) {
+    if (!props.disabled) return
+    event.preventDefault()
+    event.stopImmediatePropagation()
+  }
+
+  function toggle() {
+    if (props.selectable) selected.value = !selected.value
+  }
+
+  function onRemoveKeydown(event: KeyboardEvent) {
+    if (event.key !== 'Backspace' && event.key !== 'Delete') return
+    event.preventDefault()
+    emit('remove')
+  }
+</script>
+
+<template>
+  <Primitive
+    :as="tag"
+    data-hn-chip
+    :as-child="props.asChild"
+    v-bind="attrs"
+    :aria-pressed="props.selectable ? selected : undefined"
+    :data-state="showCheck ? 'selected' : undefined"
+    :class="
+      cn(
+        chip({
+          variant: props.variant,
+          tone: props.tone,
+          size: props.size,
+          interactive,
+          selected: showCheck,
+          disabled: props.disabled,
+        }),
+        props.class,
+      )
+    "
+    @click.capture="guard"
+    @click="toggle"
+  >
+    <Ripple v-if="interactive && props.ripple" :disabled="props.disabled" />
+    <IconSlot
+      v-if="props.selectable || slots.icon"
+      :size="props.size"
+      :checked="showCheck"
+      :icon="!!slots.icon"
+    >
+      <slot name="icon" />
+    </IconSlot>
+    <slot />
+    <CloseButton
+      v-if="removable"
+      size="xs"
+      :label="t.chip.remove"
+      :disabled="props.disabled"
+      :class="chipRemove({ size: props.size })"
+      @click.stop="emit('remove')"
+      @keydown="onRemoveKeydown"
+    />
+  </Primitive>
+</template>

package/src/components/chip/IconSlot.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+  import { Check } from '@lucide/vue'
+  import { chipIcon, type ChipVariants } from './chip.variants'
+
+  defineOptions({ name: 'HnChipIconSlot' })
+
+  const props = defineProps<{
+    size?: ChipVariants['size']
+    checked: boolean
+    icon: boolean
+  }>()
+</script>
+
+<template>
+  <span
+    data-hn-icon
+    class="hn-collapse-x"
+    :class="props.icon || props.checked ? 'hn-collapse-open' : 'hn-collapse-closed'"
+  >
+    <span class="hn-collapse-body">
+      <span :class="chipIcon({ size: props.size })">
+        <span
+          v-if="props.icon"
+          class="hn-transition inline-flex items-center justify-center"
+          :class="props.checked ? 'scale-90 opacity-0' : 'scale-100 opacity-100'"
+        >
+          <slot />
+        </span>
+        <Transition
+          enter-active-class="hn-transition-base"
+          enter-from-class="scale-90 opacity-0"
+          leave-active-class="hn-transition"
+          leave-to-class="scale-90 opacity-0"
+        >
+          <span
+            v-if="props.checked"
+            aria-hidden="true"
+            class="absolute inset-0 inline-flex items-center justify-center"
+          >
+            <Check />
+          </span>
+        </Transition>
+      </span>
+    </span>
+  </span>
+</template>

package/src/components/chip/chip.variants.ts

@@ -0,0 +1,67 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const chip = tv({
+  base: [
+    'relative inline-flex shrink-0 items-center rounded-full border border-transparent',
+    'font-medium whitespace-nowrap select-none',
+  ],
+  variants: {
+    variant: {
+      soft: '',
+      outline: 'border-line',
+    },
+    tone: {
+      neutral: '',
+      accent: '',
+    },
+    size: {
+      sm: 'h-[calc(var(--hn-control-h-sm)-0.25rem)] px-2 text-xs [&_svg]:size-3',
+      md: 'h-[var(--hn-control-h-sm)] px-2.5 text-sm [&_svg]:size-3.5',
+    },
+    interactive: {
+      true: 'hn-interactive hn-state-layer',
+    },
+    selected: {
+      true: '',
+    },
+    disabled: {
+      true: 'pointer-events-none opacity-50',
+    },
+  },
+  compoundVariants: [
+    { variant: 'soft', tone: 'neutral', class: 'bg-subtle text-fg' },
+    { variant: 'soft', tone: 'accent', class: 'bg-accent-soft text-accent-text' },
+    { variant: 'outline', tone: 'neutral', class: 'text-fg' },
+    { variant: 'outline', tone: 'accent', class: 'text-accent-text' },
+    { selected: true, class: 'text-accent-text' },
+  ],
+  defaultVariants: {
+    variant: 'soft',
+    tone: 'neutral',
+    size: 'md',
+  },
+})
+
+export const chipIcon = tv({
+  base: 'relative inline-flex shrink-0 items-center justify-center',
+  variants: {
+    size: {
+      sm: 'me-1 size-3',
+      md: 'me-1.5 size-3.5',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export const chipRemove = tv({
+  base: 'hn-press-none disabled:opacity-100',
+  variants: {
+    size: {
+      sm: 'ms-1 -me-1 size-4 [&_svg]:size-3',
+      md: 'ms-1 -me-1.5 [&_svg]:size-3.5',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export type ChipVariants = VariantProps<typeof chip>

package/src/components/chip/composables/useChipRoot.ts

@@ -0,0 +1,20 @@
+import { computed } from 'vue'
+import type { PrimitiveProps } from 'reka-ui'
+
+export function useChipRoot(props: PrimitiveProps & { selectable?: boolean; disabled?: boolean }) {
+  const tag = computed(() => props.as ?? (props.selectable ? 'button' : 'span'))
+  const nativeButton = computed(() => tag.value === 'button' && !props.asChild)
+  const interactive = computed(
+    () => !!props.selectable || tag.value === 'button' || tag.value === 'a' || !!props.asChild,
+  )
+
+  const attrs = computed(() => {
+    if (nativeButton.value) return { type: 'button', disabled: props.disabled }
+    if (interactive.value && props.disabled) {
+      return { 'data-disabled': '', 'aria-disabled': 'true', tabindex: -1 }
+    }
+    return props.disabled ? { 'data-disabled': '' } : undefined
+  })
+
+  return { tag, interactive, attrs }
+}

package/src/components/close-button/CloseButton.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { X } from '@lucide/vue'
+  import IconButton from '../icon-button/IconButton.vue'
+  import { useUiLocale } from '../../locale'
+  import { cn } from '../../lib/cn'
+  import type { ButtonVariants } from '../button/button.variants'
+
+  defineOptions({ name: 'HnCloseButton', inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<{
+      label?: string
+      size?: 'xs' | ButtonVariants['size']
+      disabled?: boolean
+      tooltip?: boolean
+      class?: string
+    }>(),
+    { size: 'sm', tooltip: false },
+  )
+
+  const t = useUiLocale()
+
+  const buttonSize = computed(() => (props.size === 'xs' ? 'sm' : props.size))
+</script>
+
+<template>
+  <IconButton
+    v-bind="$attrs"
+    :label="props.label ?? t.common.close"
+    :tooltip="props.tooltip"
+    :size="buttonSize"
+    pill
+    :disabled="props.disabled"
+    variant="ghost"
+    tone="neutral"
+    :class="cn(props.size === 'xs' && 'size-5 [&_svg]:size-3', props.class)"
+  >
+    <X />
+  </IconButton>
+</template>

package/src/components/code/Code.vue

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

package/src/components/code-block/CodeBlock.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+  import { computed, onMounted, shallowRef, watch } from 'vue'
+  import type { ThemedToken } from 'shiki/core'
+  import { cn } from '../../lib/cn'
+  import { devWarn } from '../../lib/dev'
+  import { useUiLocale } from '../../locale'
+  import CopyButton from '../copy-button/CopyButton.vue'
+  import ScrollArea from '../scroll-area/ScrollArea.vue'
+  import { tokenize } from './highlighter'
+
+  defineOptions({ name: 'HnCodeBlock' })
+
+  const props = withDefaults(
+    defineProps<{
+      code: string
+      lang?: string
+      label?: string
+      html?: string
+      copyable?: boolean
+      class?: string
+    }>(),
+    { copyable: true },
+  )
+
+  const t = useUiLocale()
+  const tag = computed(() => props.label ?? props.lang)
+
+  const tokens = shallowRef<ThemedToken[][] | null>(null)
+
+  onMounted(() => {
+    watch(
+      () => [props.code, props.lang, props.html] as const,
+      async ([code, lang, html]) => {
+        if (html || !lang) {
+          tokens.value = null
+          return
+        }
+        try {
+          const result = await tokenize(code, lang)
+          if (code === props.code && lang === props.lang) tokens.value = result
+        } catch (error) {
+          tokens.value = null
+          devWarn('CodeBlock', `着色管线失败,已退回素文本(lang="${lang}"):${String(error)}`, lang)
+        }
+      },
+      { immediate: true },
+    )
+  })
+</script>
+
+<template>
+  <div :data-lang="props.lang" :class="cn('relative', props.class)">
+    <ScrollArea direction="horizontal" focusable :label="tag" class="hn-pre">
+      <pre
+        class="m-0"
+      ><code v-if="props.html" v-html="props.html"></code><code v-else-if="tokens"><template v-for="(line, i) of tokens" :key="i">{{ i ? '\n' : '' }}<span v-for="(tk, j) of line" :key="j" :style="tk.htmlStyle">{{ tk.content }}</span></template></code><code v-else>{{ code }}</code></pre>
+    </ScrollArea>
+    <div class="absolute top-2 end-2 flex items-center gap-2">
+      <span v-if="tag" class="text-faint font-mono text-xs select-none">{{ tag }}</span>
+      <CopyButton v-if="copyable" :text="props.code" :label="t.codeblock.copy" />
+    </div>
+  </div>
+</template>

package/src/components/code-block/highlighter.ts

@@ -0,0 +1,98 @@
+import type { HighlighterCore, ThemedToken } from 'shiki/core'
+
+const langLoaders: Record<string, () => Promise<{ default: unknown }>> = {
+  typescript: () => import('shiki/langs/typescript.mjs'),
+  tsx: () => import('shiki/langs/tsx.mjs'),
+  javascript: () => import('shiki/langs/javascript.mjs'),
+  jsx: () => import('shiki/langs/jsx.mjs'),
+  vue: () => import('shiki/langs/vue.mjs'),
+  html: () => import('shiki/langs/html.mjs'),
+  css: () => import('shiki/langs/css.mjs'),
+  json: () => import('shiki/langs/json.mjs'),
+  bash: () => import('shiki/langs/bash.mjs'),
+  markdown: () => import('shiki/langs/markdown.mjs'),
+  yaml: () => import('shiki/langs/yaml.mjs'),
+  sql: () => import('shiki/langs/sql.mjs'),
+  prisma: () => import('shiki/langs/prisma.mjs'),
+  diff: () => import('shiki/langs/diff.mjs'),
+}
+
+const langAliases: Record<string, string> = {
+  ts: 'typescript',
+  js: 'javascript',
+  sh: 'bash',
+  shell: 'bash',
+  zsh: 'bash',
+  md: 'markdown',
+  yml: 'yaml',
+}
+
+let core: Promise<HighlighterCore> | undefined
+const loadedLangs = new Set<string>()
+
+function getCore() {
+  core ??= (async () => {
+    const [{ createHighlighterCore }, { createJavaScriptRegexEngine }, light, dark] =
+      await Promise.all([
+        import('shiki/core'),
+        import('shiki/engine/javascript'),
+        import('shiki/themes/vitesse-light.mjs'),
+        import('shiki/themes/vitesse-dark.mjs'),
+      ])
+    return createHighlighterCore({
+      themes: [light.default, dark.default],
+      langs: [],
+      engine: createJavaScriptRegexEngine({ forgiving: true }),
+    })
+  })()
+  return core
+}
+
+function escape(text: string): string {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+function inlineStyle(style: ThemedToken['htmlStyle']): string {
+  if (!style) return ''
+  if (typeof style === 'string') return style
+  return Object.entries(style)
+    .map(([key, value]) => `${key}:${value}`)
+    .join(';')
+}
+
+export function tokensToHtml(lines: ThemedToken[][]): string {
+  return lines
+    .map(line =>
+      line
+        .map(
+          token =>
+            `<span style="${escape(inlineStyle(token.htmlStyle))}">${escape(token.content)}</span>`,
+        )
+        .join(''),
+    )
+    .join('\n')
+}
+
+export async function tokenize(code: string, lang: string): Promise<ThemedToken[][] | null> {
+  const resolved = langAliases[lang] ?? lang
+  const load = langLoaders[resolved]
+  if (!load) return null
+
+  const highlighter = await getCore()
+  if (!loadedLangs.has(resolved)) {
+    await highlighter.loadLanguage(
+      (await load()).default as Parameters<HighlighterCore['loadLanguage']>[0],
+    )
+    loadedLangs.add(resolved)
+  }
+
+  return highlighter.codeToTokens(code, {
+    lang: resolved,
+    themes: { light: 'vitesse-light', dark: 'vitesse-dark' },
+    defaultColor: false,
+  }).tokens
+}

package/src/components/collapsible/Collapsible.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+  import { CollapsibleRoot, useForwardPropsEmits, type CollapsibleRootEmits } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+
+  defineOptions({ name: 'HnCollapsible' })
+
+  const props = defineProps<{
+    open?: boolean
+    defaultOpen?: boolean
+    disabled?: boolean
+    class?: string
+  }>()
+  const emits = defineEmits<CollapsibleRootEmits>()
+
+  const forwarded = useForwardPropsEmits(
+    () => ({ open: props.open, defaultOpen: props.defaultOpen, disabled: props.disabled }),
+    emits,
+  )
+</script>
+
+<template>
+  <CollapsibleRoot v-bind="forwarded" :class="cn(props.class)">
+    <slot />
+  </CollapsibleRoot>
+</template>

package/src/components/collapsible/CollapsibleContent.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+  import { onBeforeUpdate, onMounted, shallowRef, type ComponentPublicInstance } from 'vue'
+  import { CollapsibleContent as RekaCollapsibleContent } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { writeCollapseGap } from '../../lib/collapse'
+
+  defineOptions({ name: 'HnCollapsibleContent' })
+
+  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>
+  <RekaCollapsibleContent
+    ref="content"
+    :class="
+      cn('hn-anim-collapse [--hn-collapse-h:var(--reka-collapsible-content-height)]', props.class)
+    "
+  >
+    <slot />
+  </RekaCollapsibleContent>
+</template>

package/src/components/collapsible/CollapsibleTrigger.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+  import { CollapsibleTrigger as RekaCollapsibleTrigger } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import Button from '../button/Button.vue'
+  import DisclosureIcon from '../disclosure-icon/DisclosureIcon.vue'
+
+  defineOptions({ name: 'HnCollapsibleTrigger' })
+
+  const props = withDefaults(
+    defineProps<{
+      asChild?: boolean
+      icon?: boolean
+      class?: string
+    }>(),
+    { icon: true },
+  )
+
+  const slots = defineSlots<{
+    default?: () => unknown
+    icon?: () => unknown
+  }>()
+</script>
+
+<template>
+  <RekaCollapsibleTrigger as-child :class="cn('group/hn-disclosure', props.class)">
+    <slot v-if="props.asChild" />
+    <Button v-else variant="ghost" tone="neutral">
+      <slot />
+      <template v-if="props.icon" #trailing>
+        <DisclosureIcon v-if="!slots.icon" />
+        <DisclosureIcon v-else>
+          <slot name="icon" />
+        </DisclosureIcon>
+      </template>
+    </Button>
+  </RekaCollapsibleTrigger>
+</template>