@hina-ui/vue 1.0.0

package/src/components/scroll-area/scroll-restore.ts

@@ -0,0 +1,153 @@
+export const SCROLL_STATE_FIELD = 'hnScroll'
+export const RESTORE_DEADLINE_MS = 3000
+export const SAVE_THROTTLE_MS = 500
+export const SCROLL_RESTORE_ATTR = 'data-scroll-restore'
+export const SCROLL_ATOP_ATTR = 'data-scroll-atop'
+export const SCROLL_AT_ATTR = 'data-scroll-at'
+export const SCROLL_ATOP_HIDE_PX = 8
+
+export function atopOff(top: number, off: boolean) {
+  if (top > SCROLL_ATOP_HIDE_PX) return true
+  if (top <= 0) return false
+  return off
+}
+
+export function firstPaintRestoreScript() {
+  return `(function(){try{if(document.readyState!=="loading")return;
+var r=(history.state&&history.state.${SCROLL_STATE_FIELD})||{};
+var coarse=!!(window.matchMedia&&matchMedia("(pointer: coarse)").matches);
+var cs=
+document.querySelectorAll('[${SCROLL_ATOP_ATTR}]');
+var mark=function(c,t){if(!coarse){c.style.marginTop=-Math.round(Math.max(0,t))+"px";return;}
+if(t>${SCROLL_ATOP_HIDE_PX})c.setAttribute("data-off","true");else if(t<=0)c.setAttribute("data-off","false");};
+for(var i=0;i<cs.length;i++){mark(cs[i],Math.max(0,r[cs[i].getAttribute("${SCROLL_ATOP_ATTR}")]||0));}
+for(var k in r){var t=Math.max(0,r[k]);var e=
+document.querySelector('[${SCROLL_RESTORE_ATTR}="'+k+'"]');if(e){e.scrollTop=t;e.setAttribute("${SCROLL_AT_ATTR}",String(e.scrollTop));}}
+for(var i=0;i<cs.length;i++){(function(c){
+var e=
+document.querySelector('[${SCROLL_RESTORE_ATTR}="'+c.getAttribute("${SCROLL_ATOP_ATTR}")+'"]');
+if(!e)return;
+var sync=function(){if(e.scrollHeight<=e.clientHeight){e.removeEventListener("scroll",sync);return;}mark(c,e.scrollTop);};
+e.addEventListener("scroll",sync,{passive:true});
+})(cs[i]);}
+}catch{}})()`.replace(/\n/g, '')
+}
+
+export type ScrollRecord = Record<string, number>
+
+export interface ScrollRestorerPorts {
+  getViewport: () => HTMLElement | null
+  /** Where the first-paint script left the scroller, read once and cleared. */
+  takeFirstPaintTop: () => number | undefined
+  readState: () => unknown
+  writeState: (state: Record<string, unknown>) => void
+  setTimer: (fn: () => void, ms: number) => () => void
+}
+
+export interface ScrollRestorer {
+  restore: (initial?: boolean) => void
+  settle: () => void
+  abandon: () => void
+  save: () => void
+  saveSoon: () => void
+  dispose: () => void
+  isPending: () => boolean
+}
+
+export function readScrollRecord(state: unknown): ScrollRecord {
+  if (!state || typeof state !== 'object') return {}
+  const record = (state as Record<string, unknown>)[SCROLL_STATE_FIELD]
+  if (!record || typeof record !== 'object') return {}
+  return record as ScrollRecord
+}
+
+export function writeScrollRecord(state: unknown, key: string, top: number) {
+  const base = state && typeof state === 'object' ? (state as Record<string, unknown>) : {}
+  return {
+    ...base,
+    [SCROLL_STATE_FIELD]: { ...readScrollRecord(base), [key]: top },
+  }
+}
+
+function readEntryId(state: unknown) {
+  if (!state || typeof state !== 'object') return undefined
+  return (state as Record<string, unknown>).position
+}
+
+export function createScrollRestorer(key: string, ports: ScrollRestorerPorts): ScrollRestorer {
+  let pending: number | null = null
+  let clearDeadline: (() => void) | null = null
+  let clearThrottle: (() => void) | null = null
+  let entry: unknown
+
+  function stopWaiting() {
+    pending = null
+    clearDeadline?.()
+    clearDeadline = null
+  }
+
+  function apply(top: number) {
+    const el = ports.getViewport()
+    if (!el) return false
+    el.scrollTop = top
+    return el.scrollHeight - el.clientHeight + 1 >= top
+  }
+
+  function save() {
+    if (pending !== null) return
+    if (readEntryId(ports.readState()) !== entry) return
+    const el = ports.getViewport()
+    if (!el) return
+    ports.writeState(writeScrollRecord(ports.readState(), key, el.scrollTop))
+  }
+
+  return {
+    restore(initial) {
+      stopWaiting()
+      entry = readEntryId(ports.readState())
+
+      const saved = readScrollRecord(ports.readState())[key]
+      const firstPaintTop = ports.takeFirstPaintTop()
+
+      if (initial) {
+        // The first-paint script already put the scroller where this entry
+        // wants it, so anything else means the reader moved it while the page
+        // was still hydrating — the wheel listener that would have cancelled a
+        // restore is only attached from here on.
+        if (saved === undefined) return
+        const el = ports.getViewport()
+        if (firstPaintTop !== undefined && el && el.scrollTop !== firstPaintTop) return
+      }
+
+      const top = saved ?? 0
+      if (apply(top)) return
+      pending = top
+      clearDeadline = ports.setTimer(stopWaiting, RESTORE_DEADLINE_MS)
+    },
+
+    settle() {
+      if (pending === null) return
+      if (apply(pending)) stopWaiting()
+    },
+
+    abandon: stopWaiting,
+
+    isPending: () => pending !== null,
+
+    save,
+
+    saveSoon() {
+      if (clearThrottle) return
+      clearThrottle = ports.setTimer(() => {
+        clearThrottle = null
+        save()
+      }, SAVE_THROTTLE_MS)
+    },
+
+    dispose() {
+      stopWaiting()
+      clearThrottle?.()
+      clearThrottle = null
+    },
+  }
+}

package/src/components/search-input/SearchInput.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+  import { Search } from '@lucide/vue'
+  import { cn } from '../../lib/cn'
+  import InputBase from '../input/InputBase.vue'
+  import type { InputVariants } from '../input/input.variants'
+
+  defineOptions({ name: 'HnSearchInput', inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<{
+      variant?: InputVariants['variant']
+      size?: InputVariants['size']
+      clearable?: boolean
+      loading?: boolean
+      disabled?: boolean
+      class?: string
+    }>(),
+    { clearable: true },
+  )
+  const emit = defineEmits<{ search: [value: string]; clear: [] }>()
+
+  const model = defineModel<string>({ default: '' })
+
+  function onEscape(event: KeyboardEvent) {
+    if (!model.value) return
+    event.preventDefault()
+    model.value = ''
+    emit('clear')
+  }
+</script>
+
+<template>
+  <InputBase
+    type="search"
+    enterkeyhint="search"
+    v-bind="$attrs"
+    v-model="model"
+    :variant="props.variant"
+    :size="props.size"
+    :clearable="props.clearable"
+    :loading="props.loading"
+    :disabled="props.disabled"
+    :class="
+      cn(
+        '[&_input]:appearance-none [&_input::-webkit-search-cancel-button]:appearance-none [&_input::-webkit-search-decoration]:appearance-none',
+        props.class,
+      )
+    "
+    @keydown.enter="emit('search', model)"
+    @keydown.esc="onEscape"
+    @clear="emit('clear')"
+  >
+    <template #leading>
+      <Search />
+    </template>
+  </InputBase>
+</template>

package/src/components/section/Section.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+  import Heading from '../heading/Heading.vue'
+
+  defineOptions({ name: 'HnSection' })
+
+  const props = defineProps<{
+    title?: string
+    id?: string
+    class?: string
+  }>()
+</script>
+
+<template>
+  <section :id="props.id" :class="cn('flex scroll-mt-6 flex-col gap-4', props.class)">
+    <Heading v-if="props.title" :level="2">{{ props.title }}</Heading>
+    <slot />
+  </section>
+</template>

package/src/components/segmented-control/SegmentedControl.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+  import { ToggleGroupItem, ToggleGroupRoot, type AcceptableValue } from 'reka-ui'
+  import { computed, useId, useSlots } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { useFieldControl } from '../form-field/context'
+  import Highlight from '../highlight/Highlight.vue'
+  import Ripple from '../ripple/Ripple.vue'
+  import type { SelectOption } from '../select/types'
+  import {
+    segmentedControl,
+    segmentedItem,
+    segmentedThumb,
+    type SegmentedControlVariants,
+    type SegmentedItemVariants,
+  } from './segmented-control.variants'
+
+  defineOptions({ name: 'HnSegmentedControl' })
+
+  const props = withDefaults(
+    defineProps<{
+      options: SelectOption[]
+      size?: SegmentedItemVariants['size']
+      orientation?: SegmentedControlVariants['orientation']
+      block?: boolean
+      disabled?: boolean
+      class?: string
+    }>(),
+    { orientation: 'horizontal', block: false },
+  )
+
+  const model = defineModel<string | number>()
+
+  defineSlots<{ option(props: { option: SelectOption }): unknown }>()
+
+  const slots = useSlots()
+
+  const { labelledBy, disabled, describedBy } = useFieldControl({
+    disabled: () => props.disabled,
+  })
+  const highlightId = useId()
+
+  const current = computed(
+    () => model.value ?? props.options.find(option => !option.disabled)?.value,
+  )
+
+  function select(value: AcceptableValue | AcceptableValue[] | undefined) {
+    if (typeof value === 'string' || typeof value === 'number') model.value = value
+  }
+</script>
+
+<template>
+  <ToggleGroupRoot
+    type="single"
+    :model-value="current"
+    :disabled="disabled"
+    :aria-labelledby="labelledBy"
+    :aria-describedby="describedBy"
+    :orientation="props.orientation"
+    data-hn-segmented-control
+    :data-disabled="disabled ? '' : undefined"
+    :class="
+      cn(segmentedControl({ orientation: props.orientation, block: props.block }), props.class)
+    "
+    @update:model-value="select"
+  >
+    <ToggleGroupItem
+      v-for="option in props.options"
+      :key="option.value"
+      :value="option.value"
+      :disabled="option.disabled"
+      :aria-label="slots.option ? option.label : undefined"
+      :class="segmentedItem({ size: props.size, block: props.block })"
+    >
+      <Highlight v-if="option.value === current" :id="highlightId" :class="segmentedThumb()" />
+      <Ripple />
+      <slot name="option" :option="option">{{ option.label }}</slot>
+    </ToggleGroupItem>
+  </ToggleGroupRoot>
+</template>

package/src/components/segmented-control/segmented-control.variants.ts

@@ -0,0 +1,46 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const segmentedControl = tv({
+  base: [
+    'group/hn-segmented bg-inset relative isolate max-w-full rounded-md p-1 select-none',
+    'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+  ],
+  variants: {
+    orientation: {
+      horizontal: 'flex-row',
+      vertical: 'flex-col',
+    },
+    block: {
+      true: 'flex w-full',
+      false: 'inline-flex w-fit',
+    },
+  },
+  defaultVariants: { orientation: 'horizontal', block: false },
+})
+
+export const segmentedItem = tv({
+  base: [
+    'hn-interactive hn-state-layer hn-press-none text-muted relative z-[1] inline-flex shrink-0 items-center justify-center',
+    'gap-[var(--hn-control-gap)] rounded-xs font-medium whitespace-nowrap',
+    '[--hn-state-selected-opacity:0] [--hn-state-selected-color:var(--hn-fg-muted)] aria-pressed:z-0 aria-pressed:text-fg',
+    'disabled:pointer-events-none disabled:not-in-data-disabled:opacity-50',
+  ],
+  variants: {
+    size: {
+      sm: 'h-[calc(var(--hn-control-h-sm)-(--spacing(2)))] px-[var(--hn-control-px-sm)] text-sm [&_svg]:size-3.5',
+      md: 'h-[calc(var(--hn-control-h-md)-(--spacing(2)))] px-[var(--hn-control-px-md)] text-base [&_svg]:size-4',
+      lg: 'h-[calc(var(--hn-control-h-lg)-(--spacing(2)))] px-[var(--hn-control-px-lg)] text-md [&_svg]:size-[1.125rem]',
+    },
+    block: {
+      true: 'flex-1 basis-0',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export const segmentedThumb = tv({
+  base: 'bg-surface absolute inset-0 -z-10 rounded-xs shadow-sm',
+})
+
+export type SegmentedControlVariants = VariantProps<typeof segmentedControl>
+export type SegmentedItemVariants = VariantProps<typeof segmentedItem>

package/src/components/select/Select.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+  import { computed, ref } from 'vue'
+  import { SelectRoot, SelectTrigger } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import DisclosureIcon from '../disclosure-icon/DisclosureIcon.vue'
+  import { useFieldControl } from '../form-field/context'
+  import { injectInputGroup } from '../input-group/context'
+  import {
+    inputAdornment,
+    inputEmbedded,
+    inputHost,
+    type InputVariants,
+  } from '../input/input.variants'
+  import SelectList from './SelectList.vue'
+  import { selectTrigger } from './select.variants'
+  import { flattenOptions, type SelectItems, type SelectOption } from './types'
+
+  defineOptions({ name: 'HnSelect', inheritAttrs: false })
+
+  const props = defineProps<{
+    options: SelectItems
+    placeholder?: string
+    name?: string
+    required?: boolean
+    autocomplete?: string
+    variant?: InputVariants['variant']
+    size?: InputVariants['size']
+    disabled?: boolean
+    invalid?: boolean
+    class?: string
+  }>()
+
+  const model = defineModel<string | number | null>()
+  const open = defineModel<boolean>('open', { default: false })
+
+  defineSlots<{
+    value(props: { option: SelectOption }): unknown
+    option(props: { option: SelectOption }): unknown
+  }>()
+
+  const t = useUiLocale()
+  const group = injectInputGroup()
+  const keyboard = ref(false)
+
+  const {
+    id: fieldId,
+    invalid,
+    disabled,
+    describedBy,
+  } = useFieldControl({
+    invalid: () => props.invalid || !!group?.invalid.value,
+    disabled: () => props.disabled || !!group?.disabled.value,
+  })
+  const selected = computed(() =>
+    flattenOptions(props.options).find(option => option.value === model.value),
+  )
+</script>
+
+<template>
+  <SelectRoot
+    v-model="model"
+    v-model:open="open"
+    :disabled="disabled"
+    :name="props.name"
+    :required="props.required"
+    :autocomplete="props.autocomplete"
+  >
+    <SelectTrigger
+      v-bind="$attrs"
+      :id="fieldId"
+      :aria-describedby="describedBy"
+      data-hn-select
+      @keydown="keyboard = true"
+      @pointerdown="keyboard = false"
+      :data-invalid="invalid ? '' : undefined"
+      :aria-invalid="invalid || undefined"
+      :class="
+        cn(
+          group ? inputEmbedded() : inputHost({ variant: props.variant, size: props.size }),
+          selectTrigger(),
+          props.class,
+        )
+      "
+    >
+      <span class="min-w-0 flex-1 truncate">
+        <template v-if="selected">
+          <slot name="value" :option="selected">{{ selected.label }}</slot>
+        </template>
+        <template v-else>{{ props.placeholder ?? t.select.placeholder }}</template>
+      </span>
+      <span :class="inputAdornment()">
+        <DisclosureIcon />
+      </span>
+    </SelectTrigger>
+    <SelectList :options="props.options" :keyboard="keyboard">
+      <template #option="slotProps">
+        <slot name="option" v-bind="slotProps" />
+      </template>
+    </SelectList>
+  </SelectRoot>
+</template>

package/src/components/select/SelectList.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+  import { Check } from '@lucide/vue'
+  import {
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectItemIndicator,
+    SelectItemText,
+    SelectLabel,
+    SelectPortal,
+  } from 'reka-ui'
+  import { ref } from 'vue'
+  import { useUiLocale } from '../../locale'
+  import Card from '../card/Card.vue'
+  import ScrollArea from '../scroll-area/ScrollArea.vue'
+  import {
+    selectContent,
+    selectEmpty,
+    selectItem,
+    selectLabel,
+    selectList,
+    selectListBody,
+  } from './select.variants'
+  import { isOptionGroup, type SelectItems, type SelectOption } from './types'
+
+  defineOptions({ name: 'HnSelectList' })
+
+  const props = defineProps<{ options: SelectItems; keyboard?: boolean }>()
+
+  const fresh = ref(false)
+
+  defineSlots<{ option(props: { option: SelectOption }): unknown }>()
+
+  const t = useUiLocale()
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent as-child position="popper" align="start" :side-offset="8">
+      <Card
+        :padded="false"
+        data-hn-select-content
+        :data-hn-fresh="fresh ? '' : undefined"
+        :class="selectContent()"
+        @vue:mounted="fresh = !props.keyboard"
+        @keydown="fresh = false"
+        @pointermove="fresh = false"
+      >
+        <ScrollArea :class="selectList()">
+          <div :class="selectListBody()">
+            <template
+              v-for="item in props.options"
+              :key="isOptionGroup(item) ? item.label : item.value"
+            >
+              <SelectGroup v-if="isOptionGroup(item)">
+                <SelectLabel :class="selectLabel()">{{ item.label }}</SelectLabel>
+                <SelectItem
+                  v-for="option in item.options"
+                  :key="option.value"
+                  :value="option.value"
+                  :disabled="option.disabled"
+                  :text-value="option.label"
+                  :class="selectItem()"
+                >
+                  <SelectItemText as-child>
+                    <span class="min-w-0 flex-1">
+                      <slot name="option" :option="option">
+                        <span class="block truncate">{{ option.label }}</span>
+                        <span v-if="option.description" class="text-muted block truncate text-xs">
+                          {{ option.description }}
+                        </span>
+                      </slot>
+                    </span>
+                  </SelectItemText>
+                  <span class="flex size-4 shrink-0 items-center justify-center">
+                    <SelectItemIndicator><Check /></SelectItemIndicator>
+                  </span>
+                </SelectItem>
+              </SelectGroup>
+              <SelectItem
+                v-else
+                :value="item.value"
+                :disabled="item.disabled"
+                :text-value="item.label"
+                :class="selectItem()"
+              >
+                <SelectItemText as-child>
+                  <span class="min-w-0 flex-1">
+                    <slot name="option" :option="item">
+                      <span class="block truncate">{{ item.label }}</span>
+                      <span v-if="item.description" class="text-muted block truncate text-xs">
+                        {{ item.description }}
+                      </span>
+                    </slot>
+                  </span>
+                </SelectItemText>
+                <span class="flex size-4 shrink-0 items-center justify-center">
+                  <SelectItemIndicator><Check /></SelectItemIndicator>
+                </span>
+              </SelectItem>
+            </template>
+            <div v-if="props.options.length === 0" :class="selectEmpty()">{{ t.select.empty }}</div>
+          </div>
+        </ScrollArea>
+      </Card>
+    </SelectContent>
+  </SelectPortal>
+</template>

package/src/components/select/select.variants.ts

@@ -0,0 +1,42 @@
+import { tv } from '../../lib/tv'
+
+export const selectTrigger = tv({
+  base: [
+    'group/hn-disclosure cursor-pointer items-center ps-[var(--hn-input-px)] pe-0 text-start',
+    'data-placeholder:text-faint data-placeholder:font-normal',
+    'disabled:cursor-not-allowed disabled:opacity-50',
+    '[&_svg]:size-[var(--hn-input-icon)] [&_svg]:shrink-0',
+  ],
+})
+
+export const selectContent = tv({
+  base: [
+    'hn-anim-pop z-(--hn-z-overlay) flex w-[var(--reka-select-trigger-width)] min-w-40 flex-col overflow-hidden shadow-md outline-none',
+    '[&[data-hn-fresh]_[data-highlighted]:not(:hover)]:[--hn-state-hover-opacity:0]',
+  ],
+})
+
+export const selectList = tv({
+  base: 'max-h-[min(20rem,var(--reka-select-content-available-height))]',
+})
+
+export const selectItem = tv({
+  base: [
+    'hn-interactive hn-state-layer hn-press-none relative isolate flex w-full cursor-pointer',
+    'items-center gap-[var(--hn-control-gap)] rounded-md px-2.5 py-2 text-start text-sm select-none',
+    'text-fg outline-none [&_svg]:size-4 [&_svg]:shrink-0',
+    'data-disabled:pointer-events-none data-disabled:opacity-50',
+  ],
+})
+
+export const selectLabel = tv({
+  base: 'text-muted px-2.5 py-1.5 text-xs font-medium',
+})
+
+export const selectEmpty = tv({
+  base: 'text-muted px-2.5 py-2 text-sm',
+})
+
+export const selectListBody = tv({
+  base: 'flex flex-col p-1',
+})

package/src/components/select/types.ts

@@ -0,0 +1,21 @@
+export interface SelectOption {
+  value: string | number
+  label: string
+  description?: string
+  disabled?: boolean
+}
+
+export interface SelectOptionGroup {
+  label: string
+  options: SelectOption[]
+}
+
+export type SelectItems = Array<SelectOption | SelectOptionGroup>
+
+export function isOptionGroup(item: SelectOption | SelectOptionGroup): item is SelectOptionGroup {
+  return 'options' in item
+}
+
+export function flattenOptions(items: SelectItems): SelectOption[] {
+  return items.flatMap(item => (isOptionGroup(item) ? item.options : [item]))
+}