@hina-ui/vue 1.0.0

package/src/components/table/table.variants.ts

@@ -0,0 +1,56 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const tableWrapper = tv({
+  base: [
+    'max-w-full rounded-lg',
+    '[&_th]:h-(--hn-row-h) [&_td]:h-(--hn-row-h)',
+    '[&_th]:py-0 [&_td]:py-0',
+    '[&_caption>span]:sticky [&_caption>span]:start-[0.75em] [&_caption>span]:inline-block',
+    '[&_tbody_tr:last-child_td]:border-b-0',
+  ],
+  variants: {
+    variant: {
+      primary:
+        'bg-surface border-line border shadow-sm [&_thead_th]:bg-subtle [--hn-table-bg:var(--hn-surface)] [--hn-table-head-bg:var(--hn-bg-subtle)]',
+      secondary:
+        '[&_thead_th]:bg-inset [&_thead_th:first-child]:rounded-ss-md [&_thead_th:last-child]:rounded-se-md [--hn-table-bg:var(--hn-bg-canvas)] [--hn-table-head-bg:var(--hn-bg-inset)]',
+    },
+    hover: {
+      true: '[&_tbody_tr]:hn-state-layer',
+      false: '',
+    },
+    stickyHeader: {
+      true: '[&_thead_th]:sticky [&_thead_th]:top-0 [&_thead_th]:z-[2]',
+      false: '',
+    },
+  },
+  defaultVariants: { variant: 'primary', hover: true, stickyHeader: false },
+})
+
+export type TableVariants = VariantProps<typeof tableWrapper>
+
+export const tableCell = tv({
+  base: '',
+  variants: {
+    align: {
+      start: '',
+      center: 'text-center',
+      end: 'text-end',
+    },
+    sticky: {
+      true: 'border-line sticky start-0 z-[1] border-e',
+      false: '',
+    },
+    head: {
+      true: '',
+      false: '',
+    },
+  },
+  compoundVariants: [
+    { sticky: true, head: false, class: 'bg-(--hn-table-bg)' },
+    { sticky: true, head: true, class: 'bg-(--hn-table-head-bg) z-[3]!' },
+  ],
+  defaultVariants: { align: 'start', sticky: false, head: false },
+})
+
+export type TableCellVariants = VariantProps<typeof tableCell>

package/src/components/tabs/Tabs.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+  import { TabsRoot } from 'reka-ui'
+  import { useId } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { provideTabsStyle } from './context'
+
+  defineOptions({ name: 'HnTabs' })
+
+  const props = withDefaults(
+    defineProps<{
+      defaultValue?: string
+      variant?: 'underline' | 'soft'
+      size?: 'sm' | 'md' | 'lg'
+      orientation?: 'horizontal' | 'vertical'
+      class?: string
+    }>(),
+    { variant: 'underline', size: 'md', orientation: 'horizontal' },
+  )
+
+  const modelValue = defineModel<string>()
+
+  provideTabsStyle({
+    variant: props.variant,
+    size: props.size,
+    orientation: props.orientation,
+    highlightId: useId(),
+  })
+</script>
+
+<template>
+  <TabsRoot
+    v-model="modelValue"
+    :default-value="props.defaultValue"
+    :orientation="props.orientation"
+    :class="
+      cn('flex', props.orientation === 'vertical' ? 'flex-row gap-4' : 'flex-col', props.class)
+    "
+  >
+    <slot />
+  </TabsRoot>
+</template>

package/src/components/tabs/TabsContent.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+  import { TabsContent } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+
+  defineOptions({ name: 'HnTabsContent' })
+
+  const props = defineProps<{
+    value: string
+    class?: string
+  }>()
+</script>
+
+<template>
+  <TabsContent :value="props.value" :class="cn('hn-focus-ring outline-none', props.class)">
+    <slot />
+  </TabsContent>
+</template>

package/src/components/tabs/TabsList.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+  import { TabsList } from 'reka-ui'
+  import ScrollArea from '../scroll-area/ScrollArea.vue'
+  import { cn } from '../../lib/cn'
+  import { useTabsStyle } from './context'
+  import { tabsList, tabsScroll } from './tabs.variants'
+
+  defineOptions({ name: 'HnTabsList' })
+
+  const props = defineProps<{
+    label?: string
+    class?: string
+  }>()
+
+  const { variant, orientation } = useTabsStyle()
+</script>
+
+<template>
+  <ScrollArea
+    :direction="orientation"
+    :scrollbar="false"
+    :class="cn(tabsScroll({ variant, orientation }), props.class)"
+  >
+    <TabsList :aria-label="props.label" :class="cn(tabsList({ variant, orientation }))">
+      <slot />
+    </TabsList>
+  </ScrollArea>
+</template>

package/src/components/tabs/TabsTrigger.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+  import { TabsTrigger, injectTabsRootContext } from 'reka-ui'
+  import { computed } from 'vue'
+  import Highlight from '../highlight/Highlight.vue'
+  import Ripple from '../ripple/Ripple.vue'
+  import { cn } from '../../lib/cn'
+  import { useTabsStyle } from './context'
+  import { tabsHighlight, tabsTrigger } from './tabs.variants'
+
+  defineOptions({ name: 'HnTabsTrigger' })
+
+  const props = defineProps<{
+    value: string
+    disabled?: boolean
+    class?: string
+  }>()
+
+  const { variant, size, orientation, highlightId } = useTabsStyle()
+  const root = injectTabsRootContext()
+  const active = computed(() => root.modelValue.value === props.value)
+</script>
+
+<template>
+  <TabsTrigger
+    :value="props.value"
+    :disabled="props.disabled"
+    :class="cn(tabsTrigger({ variant, size, orientation }), props.class)"
+  >
+    <Highlight v-if="active" :id="highlightId" :class="tabsHighlight({ variant, orientation })" />
+    <Ripple />
+    <slot />
+  </TabsTrigger>
+</template>

package/src/components/tabs/context.ts

@@ -0,0 +1,24 @@
+import { inject, provide, type InjectionKey } from 'vue'
+import type { TabsVariants } from './tabs.variants'
+
+export interface TabsStyleContext {
+  variant: NonNullable<TabsVariants['variant']>
+  size: NonNullable<TabsVariants['size']>
+  orientation: NonNullable<TabsVariants['orientation']>
+  highlightId: string
+}
+
+const TABS_STYLE_KEY: InjectionKey<TabsStyleContext> = Symbol('hn-tabs-style')
+
+export function provideTabsStyle(ctx: TabsStyleContext) {
+  provide(TABS_STYLE_KEY, ctx)
+}
+
+export function useTabsStyle(): TabsStyleContext {
+  return inject(TABS_STYLE_KEY, {
+    variant: 'underline',
+    size: 'md',
+    orientation: 'horizontal',
+    highlightId: '',
+  })
+}

package/src/components/tabs/tabs.variants.ts

@@ -0,0 +1,95 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const tabsList = tv({
+  base: 'relative isolate flex',
+  variants: {
+    variant: {
+      underline: 'border-line gap-1',
+      soft: 'bg-subtle gap-1 rounded-lg p-1',
+    },
+    orientation: {
+      horizontal: 'flex-row items-center',
+      vertical: 'flex-col items-stretch',
+    },
+  },
+  compoundVariants: [
+    { variant: 'underline', orientation: 'horizontal', class: 'border-b' },
+    { variant: 'underline', orientation: 'vertical', class: 'border-e' },
+    { variant: 'soft', orientation: 'horizontal', class: 'inline-flex w-fit' },
+    { variant: 'soft', orientation: 'vertical', class: 'h-fit' },
+  ],
+  defaultVariants: { variant: 'underline', orientation: 'horizontal' },
+})
+
+export const tabsScroll = tv({
+  base: '',
+  variants: {
+    variant: {
+      underline: '',
+      soft: '',
+    },
+    orientation: {
+      horizontal: 'max-w-full',
+      vertical: 'max-h-full',
+    },
+  },
+  compoundVariants: [{ variant: 'soft', orientation: 'horizontal', class: 'w-fit' }],
+  defaultVariants: { variant: 'underline', orientation: 'horizontal' },
+})
+
+export const tabsHighlight = tv({
+  base: 'absolute -z-10',
+  variants: {
+    variant: {
+      underline: 'bg-accent rounded-full',
+      soft: 'bg-surface inset-0 rounded-md shadow-sm',
+    },
+    orientation: {
+      horizontal: '',
+      vertical: '',
+    },
+  },
+  compoundVariants: [
+    { variant: 'underline', orientation: 'horizontal', class: 'inset-x-0 bottom-px h-0.5' },
+    { variant: 'underline', orientation: 'vertical', class: 'inset-y-0 end-px w-0.5' },
+  ],
+  defaultVariants: { variant: 'underline', orientation: 'horizontal' },
+})
+
+export const tabsTrigger = tv({
+  base: [
+    'hn-interactive hn-state-layer hn-press-none hn-focus-ring text-muted relative z-[1] inline-flex shrink-0 items-center gap-1.5 text-sm font-medium whitespace-nowrap select-none',
+    '[--hn-state-selected-opacity:0] [--hn-state-selected-color:var(--hn-fg-muted)]',
+    'data-[state=active]:z-0',
+    'disabled:pointer-events-none disabled:opacity-50',
+    '[&_svg]:size-4',
+  ],
+  variants: {
+    variant: {
+      underline: 'data-[state=active]:text-accent-text [--hn-ripple-color:var(--hn-accent)]',
+      soft: 'rounded-md data-[state=active]:text-fg',
+    },
+    orientation: {
+      horizontal: '',
+      vertical: 'justify-start',
+    },
+    size: {
+      sm: '',
+      md: '',
+      lg: '',
+    },
+  },
+  compoundVariants: [
+    { variant: 'underline', orientation: 'horizontal', class: '-mb-px rounded-t-sm' },
+    { variant: 'underline', orientation: 'vertical', class: '-me-px rounded-s-sm' },
+    { variant: 'underline', size: 'sm', class: 'h-8 px-2.5' },
+    { variant: 'underline', size: 'md', class: 'h-9 px-3' },
+    { variant: 'underline', size: 'lg', class: 'h-10 px-3.5' },
+    { variant: 'soft', size: 'sm', class: 'h-7 px-2.5' },
+    { variant: 'soft', size: 'md', class: 'h-8 px-3' },
+    { variant: 'soft', size: 'lg', class: 'h-9 px-3.5' },
+  ],
+  defaultVariants: { variant: 'underline', orientation: 'horizontal', size: 'md' },
+})
+
+export type TabsVariants = VariantProps<typeof tabsTrigger>

package/src/components/tag/Tag.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+  import { Primitive, type PrimitiveProps } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { tag, type TagVariants } from './tag.variants'
+
+  defineOptions({ name: 'HnTag' })
+
+  const props = withDefaults(
+    defineProps<
+      PrimitiveProps & {
+        variant?: TagVariants['variant']
+        tone?: TagVariants['tone']
+        size?: TagVariants['size']
+        pill?: boolean
+        class?: string
+      }
+    >(),
+    { as: 'span' },
+  )
+</script>
+
+<template>
+  <Primitive
+    :as="props.as"
+    :as-child="props.asChild"
+    :class="
+      cn(
+        tag({
+          variant: props.variant,
+          tone: props.tone,
+          size: props.size,
+          pill: props.pill,
+        }),
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Primitive>
+</template>

package/src/components/tag/tag.variants.ts

@@ -0,0 +1,57 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const tag = tv({
+  base: [
+    'inline-flex shrink-0 items-center gap-1 rounded-sm border border-transparent',
+    'font-medium whitespace-nowrap select-none',
+  ],
+  variants: {
+    variant: {
+      soft: '',
+      solid: '',
+      outline: 'border-line',
+    },
+    tone: {
+      accent: '',
+      neutral: '',
+      success: '',
+      warning: '',
+      danger: '',
+      info: '',
+    },
+    size: {
+      sm: 'h-5 px-1.5 text-xs [&_svg]:size-3',
+      md: 'h-6 px-2 text-sm [&_svg]:size-3.5',
+    },
+    pill: {
+      true: 'rounded-full',
+    },
+  },
+  compoundVariants: [
+    { variant: 'soft', tone: 'accent', class: 'bg-accent-soft text-accent-text' },
+    { variant: 'soft', tone: 'neutral', class: 'bg-subtle text-fg' },
+    { variant: 'soft', tone: 'success', class: 'bg-success-soft text-success-text' },
+    { variant: 'soft', tone: 'warning', class: 'bg-warning-soft text-warning-text' },
+    { variant: 'soft', tone: 'danger', class: 'bg-danger-soft text-danger-text' },
+    { variant: 'soft', tone: 'info', class: 'bg-info-soft text-info-text' },
+    { variant: 'solid', tone: 'accent', class: 'bg-accent text-accent-on' },
+    { variant: 'solid', tone: 'neutral', class: 'bg-neutral-solid text-neutral-solid-on' },
+    { variant: 'solid', tone: 'success', class: 'bg-success text-success-on' },
+    { variant: 'solid', tone: 'warning', class: 'bg-warning text-warning-on' },
+    { variant: 'solid', tone: 'danger', class: 'bg-danger text-danger-on' },
+    { variant: 'solid', tone: 'info', class: 'bg-info text-info-on' },
+    { variant: 'outline', tone: 'accent', class: 'text-accent-text' },
+    { variant: 'outline', tone: 'neutral', class: 'text-muted' },
+    { variant: 'outline', tone: 'success', class: 'text-success-text' },
+    { variant: 'outline', tone: 'warning', class: 'text-warning-text' },
+    { variant: 'outline', tone: 'danger', class: 'text-danger-text' },
+    { variant: 'outline', tone: 'info', class: 'text-info-text' },
+  ],
+  defaultVariants: {
+    variant: 'soft',
+    tone: 'neutral',
+    size: 'sm',
+  },
+})
+
+export type TagVariants = VariantProps<typeof tag>

package/src/components/tags-input/TagsInput.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+  import { TagsInputInput, TagsInputItem, TagsInputRoot } from 'reka-ui'
+  import { computed } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { useFieldControl } from '../form-field/context'
+  import { focusFieldFrom } from '../../lib/field-focus'
+  import { useUiLocale } from '../../locale'
+  import { X } from '@lucide/vue'
+  import InputAction from '../input/InputAction.vue'
+  import { inputActionSlot, inputHost, type InputVariants } from '../input/input.variants'
+  import TagsInputChip from './TagsInputChip.vue'
+  import { tagsInputControl, tagsInputHost, tagsInputList } from './tags-input.variants'
+
+  defineOptions({ name: 'HnTagsInput', inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<{
+      placeholder?: string
+      max?: number
+      duplicate?: boolean
+      delimiter?: string | RegExp
+      addOnPaste?: boolean
+      addOnBlur?: boolean
+      clearable?: boolean
+      name?: string
+      variant?: InputVariants['variant']
+      size?: InputVariants['size']
+      disabled?: boolean
+      invalid?: boolean
+      class?: string
+    }>(),
+    { max: 0, delimiter: ',', addOnPaste: true, addOnBlur: false, clearable: false },
+  )
+
+  const emit = defineEmits<{ invalid: [value: string]; clear: [] }>()
+
+  const model = defineModel<string[]>({ default: () => [] })
+
+  const t = useUiLocale()
+
+  const {
+    id: fieldId,
+    invalid,
+    disabled,
+    describedBy,
+  } = useFieldControl({
+    invalid: () => props.invalid,
+    disabled: () => props.disabled,
+  })
+
+  const chipSize = computed(() => (props.size === 'sm' ? 'sm' : 'md'))
+  const clearing = computed(() => props.clearable && model.value.length > 0 && !disabled.value)
+
+  function remove(tag: string) {
+    if (disabled.value) return
+    model.value = model.value.filter(item => item !== tag)
+  }
+
+  function clear() {
+    if (!model.value.length) return
+    model.value = []
+    emit('clear')
+  }
+
+  function onInputKeydown(event: KeyboardEvent) {
+    if (event.isComposing || (event.target as HTMLInputElement).value !== '') return
+    if (event.key === 'Backspace') {
+      event.preventDefault()
+      event.stopImmediatePropagation()
+      if (model.value.length) model.value = model.value.slice(0, -1)
+    } else if (event.key === 'Delete' || event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+      event.stopImmediatePropagation()
+    }
+  }
+</script>
+
+<template>
+  <div
+    data-hn-tags-input
+    :data-invalid="invalid ? '' : undefined"
+    @click="focusFieldFrom($event.currentTarget as HTMLElement, $event.target as HTMLElement)"
+    :class="
+      cn(
+        inputHost({ variant: props.variant, size: props.size }),
+        tagsInputHost({ size: props.size, trailing: clearing }),
+        props.class,
+      )
+    "
+  >
+    <TagsInputRoot
+      v-model="model"
+      :max="props.max"
+      :duplicate="props.duplicate"
+      :delimiter="props.delimiter"
+      :add-on-paste="props.addOnPaste"
+      :add-on-blur="props.addOnBlur"
+      :name="props.name"
+      :disabled="disabled"
+      :class="tagsInputList()"
+      @invalid="value => emit('invalid', String(value))"
+    >
+      <TagsInputItem v-for="tag in model" :key="tag" :value="tag" as-child>
+        <TagsInputChip :tag="tag" :size="chipSize" :disabled="disabled" @remove="remove(tag)" />
+      </TagsInputItem>
+      <TagsInputInput
+        v-bind="$attrs"
+        @keydown.capture="onInputKeydown"
+        :id="fieldId"
+        :placeholder="props.placeholder"
+        :aria-invalid="invalid || undefined"
+        :aria-describedby="describedBy"
+        :class="tagsInputControl({ size: props.size })"
+      />
+    </TagsInputRoot>
+    <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="clearing"
+        data-hn-tags-input-clear
+        :class="cn(inputActionSlot(), 'absolute inset-y-0 end-0')"
+      >
+        <InputAction :label="t.common.clear" @click.stop="clear">
+          <X />
+        </InputAction>
+      </span>
+    </Transition>
+  </div>
+</template>

package/src/components/tags-input/TagsInputChip.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+  import { TagsInputItemText } from 'reka-ui'
+  import Chip from '../chip/Chip.vue'
+  import type { ChipVariants } from '../chip/chip.variants'
+  import { tagsInputChip } from './tags-input.variants'
+
+  defineOptions({ name: 'HnTagsInputChip', inheritAttrs: false })
+
+  const props = defineProps<{ tag: string; size: ChipVariants['size']; disabled?: boolean }>()
+
+  const emit = defineEmits<{ remove: [] }>()
+</script>
+
+<template>
+  <Chip
+    v-bind="$attrs"
+    :size="props.size"
+    removable
+    :disabled="props.disabled"
+    :class="tagsInputChip()"
+    :data-state="undefined"
+    :aria-current="undefined"
+    @remove="emit('remove')"
+  >
+    <TagsInputItemText as-child>
+      <span class="min-w-0 truncate">{{ props.tag }}</span>
+    </TagsInputItemText>
+  </Chip>
+</template>

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

@@ -0,0 +1,47 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const tagsInputHost = tv({
+  base: 'relative h-auto min-h-[var(--hn-input-h)] gap-1 ps-[var(--hn-input-px)]',
+  variants: {
+    size: {
+      sm: 'py-[calc((0.25rem-2px)/2)]',
+      md: 'py-[calc((var(--hn-control-h-md)-var(--hn-control-h-sm)-2px)/2)]',
+      lg: 'py-[calc((var(--hn-control-h-lg)-var(--hn-control-h-sm)-2px)/2)]',
+    },
+    trailing: {
+      true: 'pe-[var(--hn-input-h)]',
+      false: 'pe-[var(--hn-input-px)]',
+    },
+  },
+  defaultVariants: { size: 'md', trailing: false },
+})
+
+export const tagsInputList = tv({
+  base: 'flex min-w-0 flex-1 flex-wrap items-center gap-1',
+})
+
+export const tagsInputRow = tv({
+  base: 'h-[var(--hn-control-h-sm)]',
+  variants: {
+    size: {
+      sm: 'h-[calc(var(--hn-control-h-sm)-0.25rem)]',
+      md: '',
+      lg: '',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export const tagsInputControl = tv({
+  extend: tagsInputRow,
+  base: [
+    'min-w-20 flex-1 bg-transparent text-inherit outline-none [font:inherit]',
+    'placeholder:text-faint placeholder:font-normal disabled:cursor-not-allowed',
+  ],
+})
+
+export const tagsInputChip = tv({
+  base: 'max-w-full min-w-0 shrink data-disabled:opacity-100',
+})
+
+export type TagsInputVariants = VariantProps<typeof tagsInputHost>

package/src/components/text/Text.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+  import { Primitive, type PrimitiveProps } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { text, type TextVariants } from './text.variants'
+
+  defineOptions({ name: 'HnText' })
+
+  const props = withDefaults(
+    defineProps<
+      PrimitiveProps & {
+        size?: TextVariants['size']
+        tone?: TextVariants['tone']
+        weight?: TextVariants['weight']
+        truncate?: boolean
+        class?: string
+      }
+    >(),
+    { as: 'p' },
+  )
+</script>
+
+<template>
+  <Primitive
+    :as="props.as"
+    :as-child="props.asChild"
+    :class="
+      cn(
+        text({
+          size: props.size,
+          tone: props.tone,
+          weight: props.weight,
+          truncate: props.truncate,
+        }),
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Primitive>
+</template>