@hina-ui/vue 1.0.0

package/src/components/sheet/Sheet.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+  import { computed, shallowRef } from 'vue'
+  import {
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogOverlay,
+    DialogPortal,
+    DialogRoot,
+    DialogTitle,
+    DialogTrigger,
+  } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import Card from '../card/Card.vue'
+  import CloseButton from '../close-button/CloseButton.vue'
+  import Heading from '../heading/Heading.vue'
+  import ScrollArea from '../scroll-area/ScrollArea.vue'
+  import Text from '../text/Text.vue'
+  import { useDragToDismiss } from './composables/useDragToDismiss'
+  import { sheetGrip, sheetHandle, sheetPanel } from './sheet.variants'
+
+  defineOptions({ name: 'HnSheet' })
+
+  const props = withDefaults(
+    defineProps<{
+      title: string
+      description?: string
+      handle?: boolean
+      locked?: boolean
+      class?: string
+    }>(),
+    { handle: true, locked: false },
+  )
+
+  const open = defineModel<boolean>('open')
+  const t = useUiLocale()
+  const panel = shallowRef<{ $el: HTMLElement } | null>(null)
+
+  const { dragging, offset, onPointerDown } = useDragToDismiss(() => panel.value?.$el ?? null, {
+    enabled: () => !props.locked,
+    open,
+    dismiss: () => (open.value = false),
+  })
+
+  const style = computed(() =>
+    offset.value
+      ? { transform: `translateY(${offset.value}px)`, '--hn-sheet-from-y': `${offset.value}px` }
+      : undefined,
+  )
+
+  function guard(event: Event) {
+    if (props.locked) event.preventDefault()
+  }
+
+  function close() {
+    open.value = false
+  }
+</script>
+
+<template>
+  <DialogRoot v-model:open="open">
+    <DialogTrigger v-if="$slots.default" as-child>
+      <slot />
+    </DialogTrigger>
+    <DialogPortal>
+      <DialogOverlay class="hn-scrim" />
+      <DialogContent as-child @escape-key-down="guard" @interact-outside="guard">
+        <Card
+          ref="panel"
+          data-hn-sheet
+          :data-dragging="dragging ? '' : undefined"
+          :padded="false"
+          :style="style"
+          :class="cn(sheetPanel(), props.class)"
+        >
+          <div
+            data-hn-sheet-grip
+            :data-dragging="dragging ? '' : undefined"
+            :class="sheetGrip()"
+            @pointerdown="onPointerDown"
+          >
+            <div
+              v-if="props.handle"
+              aria-hidden="true"
+              :data-disabled="props.locked ? '' : undefined"
+              :class="sheetHandle()"
+            />
+            <div class="flex items-start justify-between gap-4 px-(--hn-panel-p)">
+              <div class="flex min-w-0 flex-col gap-1.5">
+                <DialogTitle as-child>
+                  <Heading :level="2" size="lg">{{ props.title }}</Heading>
+                </DialogTitle>
+                <DialogDescription v-if="props.description" as-child>
+                  <Text tone="muted">{{ props.description }}</Text>
+                </DialogDescription>
+              </div>
+              <DialogClose v-if="!props.handle" as-child>
+                <CloseButton :disabled="props.locked" class="-mt-1.5 -me-1.5 shrink-0" />
+              </DialogClose>
+            </div>
+          </div>
+          <ScrollArea v-if="$slots.content" class="min-h-0 grow">
+            <div class="px-(--hn-panel-p) py-1">
+              <slot name="content" :close="close" />
+            </div>
+          </ScrollArea>
+          <div
+            v-if="$slots.footer"
+            class="flex shrink-0 justify-end gap-(--hn-inline-gap) px-(--hn-panel-p)"
+          >
+            <slot name="footer" :close="close" />
+          </div>
+        </Card>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>

package/src/components/sheet/composables/useDragToDismiss.ts

@@ -0,0 +1,64 @@
+import { onBeforeUnmount, shallowRef, watch, type Ref } from 'vue'
+
+interface Options {
+  enabled: () => boolean
+  open: Ref<boolean | undefined>
+  dismiss: () => void
+}
+
+const DISTANCE_RATIO = 0.3
+const FLICK_VELOCITY = 0.6
+
+export function useDragToDismiss(panel: () => HTMLElement | null, options: Options) {
+  const dragging = shallowRef(false)
+  const offset = shallowRef(0)
+  let startY = 0
+  let startTime = 0
+  let pointerId: number | null = null
+
+  function onPointerMove(event: PointerEvent) {
+    if (event.pointerId !== pointerId) return
+    offset.value = Math.max(0, event.clientY - startY)
+  }
+
+  function detach() {
+    window.removeEventListener('pointermove', onPointerMove)
+    window.removeEventListener('pointerup', finish)
+    window.removeEventListener('pointercancel', finish)
+    pointerId = null
+    dragging.value = false
+  }
+
+  function finish(event: PointerEvent) {
+    if (event.pointerId !== pointerId) return
+    detach()
+    const height = panel()?.offsetHeight ?? 0
+    const elapsed = Math.max(1, performance.now() - startTime)
+    const velocity = offset.value / elapsed
+    const far = height > 0 && offset.value > height * DISTANCE_RATIO
+    if (offset.value > 0 && (far || velocity > FLICK_VELOCITY)) {
+      options.dismiss()
+      return
+    }
+    offset.value = 0
+  }
+
+  function onPointerDown(event: PointerEvent) {
+    if (!options.enabled() || pointerId !== null || event.button !== 0) return
+    pointerId = event.pointerId
+    startY = event.clientY
+    startTime = performance.now()
+    dragging.value = true
+    window.addEventListener('pointermove', onPointerMove)
+    window.addEventListener('pointerup', finish)
+    window.addEventListener('pointercancel', finish)
+  }
+
+  watch(options.open, value => {
+    if (value) offset.value = 0
+  })
+
+  onBeforeUnmount(detach)
+
+  return { dragging, offset, onPointerDown }
+}

package/src/components/sheet/sheet.variants.ts

@@ -0,0 +1,19 @@
+import { tv } from '../../lib/tv'
+
+export const sheetPanel = tv({
+  base: [
+    'hn-anim-sheet-bottom hn-transition pointer-events-auto fixed inset-x-0 bottom-0 z-(--hn-z-overlay)',
+    'mx-auto flex max-h-[calc(100dvh-3rem)] w-full flex-col gap-4 sm:max-w-xl',
+    'rounded-t-xl rounded-b-none border-b-0 pt-2 shadow-lg outline-none',
+    'pb-[max(var(--hn-panel-p),env(safe-area-inset-bottom))]',
+    'data-dragging:transition-none',
+  ],
+})
+
+export const sheetGrip = tv({
+  base: 'flex shrink-0 cursor-grab touch-none flex-col select-none data-dragging:cursor-grabbing',
+})
+
+export const sheetHandle = tv({
+  base: 'bg-line-strong hn-transition-base mx-auto mb-3 h-1.5 w-10 rounded-full data-disabled:opacity-50',
+})

package/src/components/sidebar/DrawerScope.ts

@@ -0,0 +1,15 @@
+import { defineComponent, h, ref } from 'vue'
+import { provideSidebar, type SidebarState } from './context'
+
+export default defineComponent({
+  name: 'HnSidebarDrawerScope',
+  setup(_, { slots }) {
+    provideSidebar({
+      state: ref<SidebarState>('expanded'),
+      toggle: () => {},
+      openMobile: () => {},
+      inDrawer: true,
+    })
+    return () => h('div', { class: 'contents' }, slots.default?.())
+  },
+})

package/src/components/sidebar/Sidebar.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { Motion } from 'motion-v'
+  import { cn } from '../../lib/cn'
+  import { TRANSITION, prefersReducedMotion } from '../../motion'
+  import { useUiLocale } from '../../locale'
+  import ScrollArea from '../scroll-area/ScrollArea.vue'
+  import { useSidebar } from './context'
+
+  defineOptions({ name: 'HnSidebar' })
+
+  const props = defineProps<{
+    label?: string
+    class?: string
+  }>()
+
+  const t = useUiLocale()
+  const sidebar = useSidebar()
+  const state = computed(() => sidebar?.state.value ?? 'expanded')
+  const inDrawer = computed(() => sidebar?.inDrawer ?? false)
+
+  const width = computed(() => {
+    if (state.value === 'rail') return 56
+    if (state.value === 'hidden') return 0
+    return 256
+  })
+
+  const transition = computed(() => (prefersReducedMotion() ? { duration: 0 } : TRANSITION.layout))
+</script>
+
+<template>
+  <Motion
+    as="aside"
+    :initial="false"
+    :animate="inDrawer ? undefined : { width }"
+    :transition="transition"
+    :data-state="state"
+    :class="
+      cn(
+        'flex h-full min-h-0 shrink-0 flex-col overflow-hidden',
+        inDrawer
+          ? 'w-full'
+          : 'border-line border-e [transition:border-color_var(--hn-duration-base)_var(--hn-ease-move)]',
+        !inDrawer && state === 'hidden' && 'border-e-transparent',
+        props.class,
+      )
+    "
+  >
+    <div v-if="$slots.header" :class="cn('shrink-0', !inDrawer && 'px-3 py-3')">
+      <slot name="header" :state="state" />
+    </div>
+    <ScrollArea class="min-h-0 flex-1">
+      <nav
+        :aria-label="props.label ?? t.sidebar.navLabel"
+        :class="cn('flex flex-col gap-1', !inDrawer && 'px-2.5 py-2')"
+      >
+        <slot />
+      </nav>
+    </ScrollArea>
+    <div
+      v-if="$slots.footer"
+      :class="cn('border-line shrink-0 border-t', !inDrawer && 'px-3 py-3')"
+    >
+      <slot name="footer" :state="state" />
+    </div>
+  </Motion>
+</template>

package/src/components/sidebar/SidebarGroup.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+  import { computed, ref } from 'vue'
+  import { cn } from '../../lib/cn'
+  import Button from '../button/Button.vue'
+  import DisclosureIcon from '../disclosure-icon/DisclosureIcon.vue'
+  import Collapsible from '../collapsible/Collapsible.vue'
+  import CollapsibleTrigger from '../collapsible/CollapsibleTrigger.vue'
+  import CollapsibleContent from '../collapsible/CollapsibleContent.vue'
+  import { useSidebar } from './context'
+
+  defineOptions({ name: 'HnSidebarGroup' })
+
+  const props = withDefaults(
+    defineProps<{
+      label: string
+      defaultOpen?: boolean
+      class?: string
+    }>(),
+    { defaultOpen: true },
+  )
+
+  const sidebar = useSidebar()
+  const rail = computed(() => sidebar?.state.value === 'rail')
+
+  const open = ref(props.defaultOpen)
+</script>
+
+<template>
+  <Collapsible
+    :open="rail || open"
+    :class="cn(props.class)"
+    @update:open="v => (rail ? undefined : (open = v))"
+  >
+    <div class="hn-collapse" :class="rail ? 'hn-collapse-closed' : 'hn-collapse-open'">
+      <div class="hn-collapse-body">
+        <CollapsibleTrigger as-child>
+          <Button
+            variant="ghost"
+            tone="neutral"
+            size="sm"
+            block
+            :tabindex="rail ? -1 : undefined"
+            class="text-muted justify-between font-medium"
+          >
+            {{ props.label }}
+            <template #trailing>
+              <DisclosureIcon direction="end" />
+            </template>
+          </Button>
+        </CollapsibleTrigger>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      class="hn-collapse"
+      :class="rail ? 'hn-collapse-open' : 'hn-collapse-closed'"
+    >
+      <div class="hn-collapse-body">
+        <div class="border-line mx-2 my-1.5 border-t" />
+      </div>
+    </div>
+    <CollapsibleContent>
+      <div class="flex flex-col gap-0.5 pt-1">
+        <slot />
+      </div>
+    </CollapsibleContent>
+  </Collapsible>
+</template>

package/src/components/sidebar/SidebarTrigger.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+  import { PanelLeft } from '@lucide/vue'
+  import Button from '../button/Button.vue'
+  import { useUiLocale } from '../../locale'
+  import { useSidebar } from './context'
+
+  defineOptions({ name: 'HnSidebarTrigger' })
+
+  const props = defineProps<{ class?: string }>()
+
+  const t = useUiLocale()
+  const sidebar = useSidebar()
+</script>
+
+<template>
+  <Button
+    v-if="sidebar"
+    icon-only
+    variant="ghost"
+    tone="neutral"
+    :aria-label="t.sidebar.toggleLabel"
+    :class="props.class"
+    @click="sidebar.toggle()"
+  >
+    <PanelLeft />
+  </Button>
+</template>

package/src/components/sidebar/context.ts

@@ -0,0 +1,20 @@
+import { inject, provide, type InjectionKey, type Ref } from 'vue'
+
+export type SidebarState = 'expanded' | 'rail' | 'hidden'
+
+export interface SidebarContext {
+  state: Readonly<Ref<SidebarState>>
+  toggle: () => void
+  openMobile: () => void
+  inDrawer?: boolean
+}
+
+const SIDEBAR_KEY = Symbol('hn-sidebar') as InjectionKey<SidebarContext>
+
+export function provideSidebar(context: SidebarContext) {
+  provide(SIDEBAR_KEY, context)
+}
+
+export function useSidebar() {
+  return inject(SIDEBAR_KEY, null)
+}

package/src/components/simple-grid/SimpleGrid.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+  import { simpleGrid, type SimpleGridVariants } from './simple-grid.variants'
+
+  defineOptions({ name: 'HnSimpleGrid' })
+
+  const props = withDefaults(
+    defineProps<{
+      as?: string
+      min?: string
+      fit?: boolean
+      gap?: SimpleGridVariants['gap']
+      class?: string
+    }>(),
+    { as: 'div', min: '14rem', fit: false },
+  )
+</script>
+
+<template>
+  <component
+    :is="props.as"
+    :style="{ '--hn-simple-grid-min': props.min }"
+    :class="cn(simpleGrid({ fit, gap }), props.class)"
+  >
+    <slot />
+  </component>
+</template>

package/src/components/simple-grid/simple-grid.variants.ts

@@ -0,0 +1,25 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const simpleGrid = tv({
+  base: 'grid',
+  variants: {
+    fit: {
+      false: 'grid-cols-[repeat(auto-fill,minmax(var(--hn-simple-grid-min),1fr))]',
+      true: 'grid-cols-[repeat(auto-fit,minmax(var(--hn-simple-grid-min),1fr))]',
+    },
+    gap: {
+      none: 'gap-0',
+      xs: 'gap-1',
+      sm: 'gap-2',
+      md: 'gap-x-[var(--hn-inline-gap)] gap-y-[var(--hn-stack-gap)]',
+      lg: 'gap-6',
+      xl: 'gap-8',
+    },
+  },
+  defaultVariants: {
+    fit: false,
+    gap: 'md',
+  },
+})
+
+export type SimpleGridVariants = VariantProps<typeof simpleGrid>

package/src/components/skeleton/Skeleton.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+
+  defineOptions({ name: 'HnSkeleton' })
+
+  const props = withDefaults(
+    defineProps<{
+      loading?: boolean
+      as?: string
+      class?: string
+    }>(),
+    { loading: true, as: 'span' },
+  )
+</script>
+
+<template>
+  <slot v-if="!props.loading" />
+  <component
+    :is="props.as"
+    v-else
+    aria-hidden="true"
+    inert
+    tabindex="-1"
+    :class="cn('hn-skeleton block', props.class)"
+  >
+    <slot />
+  </component>
+</template>

package/src/components/slider/Slider.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+  import { SliderRoot, SliderTrack } from 'reka-ui'
+  import { computed, toRef } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { useFieldControl } from '../form-field/context'
+  import { useUiLocale } from '../../locale'
+  import { useSliderChrome } from './composables/useSliderChrome'
+  import SliderHandle from './SliderHandle.vue'
+  import SliderMarks from './SliderMarks.vue'
+  import {
+    slider,
+    sliderRange,
+    sliderRoot,
+    sliderTrack,
+    type SliderVariants,
+  } from './slider.variants'
+
+  defineOptions({ name: 'HnSlider', inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<{
+      min?: number
+      max?: number
+      step?: number
+      marks?: Array<{ value: number; label?: string }>
+      label?: 'auto' | 'always' | 'none'
+      format?: (value: number) => string
+      size?: SliderVariants['size']
+      disabled?: boolean
+      class?: string
+    }>(),
+    { min: 0, max: 100, step: 1, label: 'auto' },
+  )
+
+  const emit = defineEmits<{ commit: [value: number] }>()
+
+  const model = defineModel<number>()
+
+  const t = useUiLocale()
+  const { labelledBy, invalid, disabled, describedBy } = useFieldControl({
+    disabled: () => props.disabled,
+  })
+  const { dragging, ring, labelOpen, onPointerDown, listeners } = useSliderChrome(
+    disabled,
+    toRef(props, 'label'),
+  )
+
+  const values = computed(() => [model.value ?? props.min])
+  const text = computed(() => {
+    const value = values.value[0]!
+    return props.format ? props.format(value) : new Intl.NumberFormat(t.value.tag).format(value)
+  })
+  const hasMarkLabels = computed(() => !!props.marks?.some(mark => mark.label))
+  const position = computed(() => {
+    const span = props.max - props.min
+    const p = span > 0 ? (values.value[0]! - props.min) / span : 0
+    return { '--hn-slider-p': String(p) }
+  })
+</script>
+
+<template>
+  <span
+    data-hn-slider
+    data-hn-state-group
+    :data-disabled="disabled ? '' : undefined"
+    :data-dragging="dragging ? '' : undefined"
+    :style="position"
+    :class="cn(slider({ size: props.size }), props.class)"
+    @pointerdown.capture="onPointerDown"
+    v-on="listeners"
+  >
+    <SliderRoot
+      :model-value="values"
+      :min="props.min"
+      :max="props.max"
+      :step="props.step"
+      :disabled="disabled"
+      :class="sliderRoot()"
+      @update:model-value="value => (model = value?.[0])"
+      @value-commit="value => emit('commit', value[0]!)"
+    >
+      <SliderTrack :class="sliderTrack()">
+        <span :class="sliderRange()" />
+      </SliderTrack>
+      <SliderMarks
+        v-if="props.marks?.length"
+        :marks="props.marks"
+        :min="props.min"
+        :max="props.max"
+      />
+      <SliderHandle
+        v-bind="$attrs"
+        :aria-labelledby="labelledBy"
+        :aria-describedby="describedBy"
+        :aria-invalid="invalid || undefined"
+        :text="text"
+        :open="labelOpen"
+        :ring="ring"
+        :tooltip="props.label !== 'none'"
+      />
+    </SliderRoot>
+    <SliderMarks
+      v-if="hasMarkLabels"
+      :marks="props.marks!"
+      :min="props.min"
+      :max="props.max"
+      labels
+    />
+  </span>
+</template>

package/src/components/slider/SliderHandle.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+  import { injectTooltipProviderContext, SliderThumb } from 'reka-ui'
+  import Tooltip from '../tooltip/Tooltip.vue'
+  import { sliderThumb } from './slider.variants'
+
+  defineOptions({ name: 'HnSliderHandle', inheritAttrs: false })
+
+  const props = defineProps<{ text: string; open: boolean; ring: boolean; tooltip: boolean }>()
+
+  const tooltips = !!injectTooltipProviderContext(null)
+</script>
+
+<template>
+  <Tooltip v-if="props.tooltip && tooltips" :open="props.open" :content="props.text">
+    <SliderThumb
+      v-bind="$attrs"
+      :data-focus-ring="props.ring ? '' : undefined"
+      :class="sliderThumb()"
+    />
+  </Tooltip>
+  <SliderThumb
+    v-else
+    v-bind="$attrs"
+    :data-focus-ring="props.ring ? '' : undefined"
+    :class="sliderThumb()"
+  />
+</template>

package/src/components/slider/SliderMarks.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+  import { sliderMark, sliderMarkLabels, sliderMarks } from './slider.variants'
+
+  defineOptions({ name: 'HnSliderMarks' })
+
+  const props = defineProps<{
+    marks: Array<{ value: number; label?: string }>
+    min: number
+    max: number
+    labels?: boolean
+  }>()
+
+  function percent(value: number) {
+    const span = props.max - props.min
+    return span > 0 ? ((value - props.min) / span) * 100 : 0
+  }
+</script>
+
+<template>
+  <span v-if="props.labels" aria-hidden="true" :class="sliderMarkLabels()">
+    <span
+      v-for="mark in props.marks"
+      :key="mark.value"
+      class="absolute top-0 flex w-0 justify-center whitespace-nowrap"
+      :style="{ insetInlineStart: `${percent(mark.value)}%` }"
+    >
+      {{ mark.label }}
+    </span>
+  </span>
+  <span v-else aria-hidden="true" :class="sliderMarks()">
+    <span
+      v-for="mark in props.marks"
+      :key="mark.value"
+      class="absolute top-0 flex h-0 w-0 items-center justify-center"
+      :style="{ insetInlineStart: `${percent(mark.value)}%` }"
+    >
+      <span :class="sliderMark()" />
+    </span>
+  </span>
+</template>