@hina-ui/vue 1.7.3 → 1.7.4

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

@@ -1,47 +1 @@
-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>
+export * from '../../../../shared/src/variants/tags-input'

package/src/components/text/text.variants.ts

@@ -1,41 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const text = tv({
-  variants: {
-    size: {
-      xs: 'text-xs',
-      sm: 'text-sm',
-      base: 'text-base',
-      md: 'text-md',
-      lg: 'text-lg',
-      xl: 'text-xl',
-      '2xl': 'text-2xl',
-    },
-    tone: {
-      default: 'text-fg',
-      muted: 'text-muted',
-      faint: 'text-faint',
-      disabled: 'text-disabled',
-      accent: 'text-accent-text',
-      success: 'text-success-text',
-      warning: 'text-warning-text',
-      danger: 'text-danger-text',
-      info: 'text-info-text',
-    },
-    weight: {
-      normal: 'font-normal',
-      medium: 'font-medium',
-      semibold: 'font-semibold',
-    },
-    truncate: {
-      true: 'truncate',
-    },
-  },
-  defaultVariants: {
-    size: 'base',
-    tone: 'default',
-    weight: 'normal',
-  },
-})
-
-export type TextVariants = VariantProps<typeof text>
+export * from '../../../../shared/src/variants/text'

package/src/components/textarea/Textarea.vue

@@ -34,6 +34,8 @@
   const model = defineModel<string>()
 
   const { el, area, bounds, fit, focus } = useTextareaSizing(props, model)
+
+  defineExpose({ input: el, focus: () => el.value?.focus({ preventScroll: true }) })
 </script>
 
 <template>

package/src/components/textarea/textarea.variants.ts

@@ -1,48 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const textarea = tv({
-  base: [
-    'text-fg flex w-full min-w-0 cursor-text flex-col overflow-hidden rounded-md border font-medium',
-    'data-disabled:cursor-not-allowed data-disabled:opacity-50',
-  ],
-  variants: {
-    variant: {
-      bare: 'rounded-none border-0 bg-transparent shadow-none outline-none [--hn-textarea-border-w:0px]',
-      primary:
-        'hn-field border-line [--hn-field-bg:var(--hn-surface)] [--hn-field-shadow:var(--hn-shadow-sm)]',
-      secondary: 'hn-field border-transparent [--hn-field-bg:var(--hn-bg-inset)]',
-    },
-    size: {
-      sm: 'text-sm [--hn-textarea-h:var(--hn-control-h-sm)] [--hn-textarea-px:var(--hn-control-px-sm)]',
-      md: 'text-base [--hn-textarea-h:var(--hn-control-h-md)] [--hn-textarea-px:var(--hn-control-px-md)]',
-      lg: 'text-md [--hn-textarea-h:var(--hn-control-h-lg)] [--hn-textarea-px:var(--hn-control-px-lg)]',
-    },
-    autosize: {
-      true: [
-        'min-h-[calc((var(--hn-textarea-rows)_-_1)_*_1lh_+_var(--hn-textarea-h))]',
-        'max-h-[calc((var(--hn-textarea-max-rows)_-_1)_*_1lh_+_var(--hn-textarea-h))]',
-      ],
-      false: 'h-[calc((var(--hn-textarea-rows)_-_1)_*_1lh_+_var(--hn-textarea-h))]',
-    },
-    resize: {
-      none: 'resize-none',
-      vertical: 'resize-y',
-    },
-  },
-  defaultVariants: {
-    variant: 'primary',
-    size: 'md',
-    autosize: false,
-    resize: 'vertical',
-  },
-})
-
-export const textareaField = tv({
-  base: [
-    'block w-full resize-none overflow-hidden bg-transparent text-inherit outline-none [font:inherit]',
-    'px-[var(--hn-textarea-px)] py-[calc((var(--hn-textarea-h)_-_1lh)/2_-_var(--hn-textarea-border-w,1px))]',
-    'placeholder:text-faint placeholder:font-normal disabled:cursor-not-allowed',
-  ],
-})
-
-export type TextareaVariants = VariantProps<typeof textarea>
+export * from '../../../../shared/src/variants/textarea'

package/src/components/timeline/timeline.variants.ts

@@ -1,31 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const timeline = tv({
-  base: 'hn-timeline text-fg m-0 grid w-full min-w-0 list-none p-0',
-  variants: {
-    size: {
-      sm: 'text-xs [--hn-timeline-gap:var(--hn-stack-gap)]',
-      md: 'text-sm [--hn-timeline-gap:calc(var(--hn-stack-gap)*1.5)]',
-      lg: 'text-base [--hn-timeline-gap:calc(var(--hn-stack-gap)*2)]',
-    },
-  },
-  defaultVariants: { size: 'md' },
-})
-
-export const timelineMarker = tv({
-  base: 'hn-timeline-marker flex shrink-0 items-center justify-center [&_svg]:size-[1em]',
-  variants: {
-    tone: {
-      accent: 'text-accent-text',
-      neutral: 'text-muted',
-      success: 'text-success-text',
-      warning: 'text-warning-text',
-      danger: 'text-danger-text',
-      info: 'text-info-text',
-    },
-  },
-  defaultVariants: { tone: 'accent' },
-})
-
-export type TimelineVariants = VariantProps<typeof timeline>
-export type TimelineMarkerVariants = VariantProps<typeof timelineMarker>
+export * from '../../../../shared/src/variants/timeline'

package/src/components/toast/Toaster.vue

@@ -13,6 +13,7 @@
   import CloseButton from '../close-button/CloseButton.vue'
   import Spinner from '../spinner/Spinner.vue'
   import { cn } from '../../lib/cn'
+  import { rekaToastStyle } from '../../lib/reka/styles'
   import { useUiLocale } from '../../locale'
   import {
     toastState,
@@ -75,7 +76,7 @@
       :open="true"
       :duration="Infinity"
       class="hn-toast-item group/toast outline-none"
-      :style="itemStyle(item)"
+      :style="[rekaToastStyle, itemStyle(item)]"
       :data-hn-behind="slotOf(item).index > 0 ? '' : undefined"
       :data-hn-hidden="slotOf(item).index >= VISIBLE_STACK ? '' : undefined"
       :data-hn-removed="item.open ? undefined : ''"

package/src/components/toggle/Toggle.vue

@@ -73,7 +73,7 @@
           toggle({
             variant: props.variant,
             size: props.size,
-            iconOnly: !!props.label,
+            iconOnly: !!props.label && !slots.default,
             pill: props.pill,
           }),
           props.class,

package/src/components/toggle/toggle.variants.ts

@@ -1,10 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-import { button } from '../button/button.variants'
-
-export const toggle = tv({
-  extend: button,
-  base: 'aria-pressed:text-accent-text',
-  defaultVariants: { variant: 'ghost', tone: 'neutral', size: 'md' },
-})
-
-export type ToggleVariants = VariantProps<typeof toggle>
+export * from '../../../../shared/src/variants/toggle'

package/src/components/toolbar/toolbar.variants.ts

@@ -1,37 +1 @@
-import { tv } from '../../lib/tv'
-
-export const toolbar = tv({
-  base: 'inline-flex max-w-full gap-(--hn-control-gap) rounded-lg',
-  variants: {
-    orientation: {
-      horizontal: 'flex-row flex-wrap items-center',
-      vertical: 'flex-col items-stretch',
-    },
-    variant: {
-      primary: 'border-line bg-surface border p-1',
-      secondary: 'bg-inset p-1',
-      bare: '',
-    },
-  },
-  defaultVariants: { orientation: 'horizontal', variant: 'primary' },
-})
-
-export const toolbarGroup = tv({
-  base: 'inline-flex gap-(--hn-control-gap)',
-  variants: {
-    orientation: {
-      horizontal: 'flex-wrap items-center',
-      vertical: 'flex-col items-stretch',
-    },
-  },
-})
-
-export const toolbarSeparator = tv({
-  base: 'bg-line shrink-0 self-stretch',
-  variants: {
-    orientation: {
-      horizontal: 'mx-1 my-1 w-px',
-      vertical: 'mx-1 my-1 h-px',
-    },
-  },
-})
+export * from '../../../../shared/src/variants/toolbar'

package/src/components/tree/Tree.vue

@@ -5,6 +5,8 @@
   import { useFieldControl } from '../form-field/context'
   import DisclosureIcon from '../disclosure-icon/DisclosureIcon.vue'
   import TreeCheck from './TreeCheck.vue'
+  import TreeRows from './TreeRows.vue'
+  import type { VirtualizeOptions } from '../../lib/virtual/types'
   import { useTree } from './composables/useTree'
   import { tree, treeEmpty, treeRow, treeToggle } from './tree.variants'
   import type { TreeNode, TreeNodeSlot, TreeValue } from './types'
@@ -17,9 +19,11 @@
       defaultExpanded?: TreeValue[]
       disabled?: boolean
       invalid?: boolean
+      virtualize?: VirtualizeOptions
+      maxHeight?: string | number
       class?: string
     }>(),
-    { defaultExpanded: () => [] },
+    { defaultExpanded: () => [], maxHeight: 320 },
   )
   const model = defineModel<TreeValue | TreeValue[] | null>()
   const expandedModel = defineModel<TreeValue[]>('expanded')
@@ -61,6 +65,7 @@
     v-slot="{ flattenItems }"
     v-model:expanded="expanded"
     :items="props.items"
+    :as="props.virtualize ? 'div' : 'ul'"
     :get-key="key"
     :get-children="getChildren"
     :model-value="props.multiple ? selected : selected[0]"
@@ -75,58 +80,66 @@
     :data-invalid="invalid ? '' : undefined"
     :class="cn(tree(), props.class)"
   >
-    <TreeItem
-      v-for="item in flattenItems"
-      :key="item._id"
-      v-slot="{ isExpanded }"
-      v-bind="item.bind"
-      :disabled="state(item.value).disabled"
-      as-child
-      @select="select"
-      @toggle="keepRowClick"
+    <TreeRows
+      :items="flattenItems"
+      :virtualize="props.virtualize"
+      :max-height="props.virtualize ? props.maxHeight : undefined"
+      :disabled="node => state(node).disabled"
+      v-slot="{ item }"
     >
-      <li
-        :aria-selected="props.multiple ? undefined : state(item.value).selected"
-        :aria-checked="
-          props.multiple
-            ? state(item.value).indeterminate
-              ? 'mixed'
-              : state(item.value).selected
-            : undefined
-        "
-        :style="{ '--hn-tree-level': item.level - 1 }"
-        :class="treeRow()"
+      <TreeItem
+        :key="item._id"
+        v-slot="{ isExpanded }"
+        v-bind="item.bind"
+        :disabled="state(item.value).disabled"
+        as-child
+        @select="select"
+        @toggle="keepRowClick"
       >
-        <span
-          v-if="item.hasChildren"
-          :class="treeToggle()"
-          aria-hidden="true"
-          data-hn-tree-toggle
-          @click.stop="toggle(item.value)"
+        <component
+          :is="props.virtualize ? 'div' : 'li'"
+          :aria-selected="props.multiple ? undefined : state(item.value).selected"
+          :aria-checked="
+            props.multiple
+              ? state(item.value).indeterminate
+                ? 'mixed'
+                : state(item.value).selected
+              : undefined
+          "
+          :style="{ '--hn-tree-level': item.level - 1 }"
+          :class="treeRow()"
         >
-          <DisclosureIcon direction="end" :open="isExpanded" />
-        </span>
-        <span v-else class="size-5 shrink-0" aria-hidden="true" />
-        <TreeCheck
-          v-if="props.multiple"
-          :selected="state(item.value).selected"
-          :indeterminate="state(item.value).indeterminate"
-        />
-        <span class="min-w-0 flex-1">
-          <slot name="node" :node="item.value" :expanded="isExpanded" v-bind="state(item.value)">
-            <span class="block truncate">{{ item.value.label }}</span>
-            <span v-if="item.value.description" class="text-muted block truncate text-xs">
-              {{ item.value.description }}
-            </span>
-          </slot>
-        </span>
-        <slot
-          name="trailing"
-          :node="item.value"
-          :expanded="isExpanded"
-          v-bind="state(item.value)"
-        />
-      </li>
-    </TreeItem>
+          <span
+            v-if="item.hasChildren"
+            :class="treeToggle()"
+            aria-hidden="true"
+            data-hn-tree-toggle
+            @click.stop="toggle(item.value)"
+          >
+            <DisclosureIcon direction="end" :open="isExpanded" />
+          </span>
+          <span v-else class="size-5 shrink-0" aria-hidden="true" />
+          <TreeCheck
+            v-if="props.multiple"
+            :selected="state(item.value).selected"
+            :indeterminate="state(item.value).indeterminate"
+          />
+          <span class="min-w-0 flex-1">
+            <slot name="node" :node="item.value" :expanded="isExpanded" v-bind="state(item.value)">
+              <span class="block truncate">{{ item.value.label }}</span>
+              <span v-if="item.value.description" class="text-muted block truncate text-xs">
+                {{ item.value.description }}
+              </span>
+            </slot>
+          </span>
+          <slot
+            name="trailing"
+            :node="item.value"
+            :expanded="isExpanded"
+            v-bind="state(item.value)"
+          />
+        </component>
+      </TreeItem>
+    </TreeRows>
   </TreeRoot>
 </template>

package/src/components/tree/TreeRows.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts" generic="T extends { label: string; disabled?: boolean }">
+  import { shallowRef, watch } from 'vue'
+  import type { FlattenedItem } from 'reka-ui'
+  import type { VirtualizeOptions } from '../../lib/virtual/types'
+  import ScrollArea from '../scroll-area/ScrollArea.vue'
+  import VirtualTreeWindow from './VirtualTreeWindow.vue'
+
+  const props = defineProps<{
+    items: FlattenedItem<T>[]
+    virtualize?: VirtualizeOptions
+    initialScrollToSelected?: boolean
+    maxHeight?: string | number
+    scrollable?: boolean
+    class?: string
+    disabled?: (node: T) => boolean
+  }>()
+  defineSlots<{ default(props: { item: FlattenedItem<T> }): unknown; empty?(): unknown }>()
+  const area = shallowRef<InstanceType<typeof ScrollArea>>()
+  watch(
+    () => area.value?.viewport,
+    viewport => viewport?.setAttribute('role', 'group'),
+    { flush: 'post' },
+  )
+  const window = shallowRef<{
+    focusFirst(): void
+    focusLast(): void
+    isFirst(element: EventTarget | null): boolean
+  }>()
+  defineExpose({
+    focusFirst: () => window.value?.focusFirst(),
+    focusLast: () => window.value?.focusLast(),
+    isFirst: (element: EventTarget | null) => window.value?.isFirst(element) ?? false,
+  })
+</script>
+
+<template>
+  <ScrollArea
+    v-if="props.virtualize || props.scrollable"
+    ref="area"
+    :class="props.class"
+    :style="{
+      maxHeight: typeof props.maxHeight === 'number' ? `${props.maxHeight}px` : props.maxHeight,
+    }"
+  >
+    <VirtualTreeWindow
+      v-if="props.virtualize"
+      ref="window"
+      :items="props.items"
+      :virtualize="props.virtualize"
+      :initial-scroll-to-selected="props.initialScrollToSelected"
+      :viewport="area?.viewport"
+      :disabled="props.disabled"
+      v-slot="{ item }"
+    >
+      <slot :item="item" />
+    </VirtualTreeWindow>
+    <template v-else v-for="item in props.items" :key="item._id"><slot :item="item" /></template>
+    <slot v-if="!props.items.length" name="empty" />
+  </ScrollArea>
+  <template v-else v-for="item in props.items" :key="item._id"><slot :item="item" /></template>
+</template>

package/src/components/tree/VirtualTreeWindow.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts" generic="T extends { label: string; disabled?: boolean }">
+  import { toRef } from 'vue'
+  import type { FlattenedItem } from 'reka-ui'
+  import type { VirtualizeOptions } from '../../lib/virtual/types'
+  import { useVirtualTree } from '../../lib/reka/useVirtualTree'
+  import { virtualListContent, virtualListItem } from '../virtual-list/virtual-list.variants'
+
+  const props = defineProps<{
+    items: FlattenedItem<T>[]
+    virtualize?: VirtualizeOptions
+    initialScrollToSelected?: boolean
+    viewport?: HTMLElement
+    disabled?: (node: T) => boolean
+  }>()
+  defineSlots<{ default(props: { item: FlattenedItem<T> }): unknown }>()
+  const { body, entries, bodyStyle, measure, focusFirst, focusLast, isFirst } = useVirtualTree(
+    props,
+    toRef(props, 'viewport'),
+  )
+  defineExpose({ focusFirst, focusLast, isFirst })
+</script>
+
+<template>
+  <div
+    ref="body"
+    data-hn-virtual-tree
+    role="presentation"
+    :class="virtualListContent({ orientation: 'vertical' })"
+    :style="bodyStyle"
+  >
+    <div
+      v-for="entry in entries"
+      :key="entry.key"
+      :ref="measure"
+      :data-index="entry.index"
+      role="presentation"
+      :class="virtualListItem({ orientation: 'vertical' })"
+      :style="{ marginBlockStart: `${entry.gapBefore}px` }"
+    >
+      <slot :item="props.items[entry.index]!" />
+    </div>
+  </div>
+</template>

package/src/components/tree/tree.variants.ts

@@ -1,22 +1 @@
-import { tv } from '../../lib/tv'
-
-export const tree = tv({
-  base: 'flex w-full min-w-0 flex-col outline-none',
-})
-
-export const treeRow = tv({
-  base: [
-    'hn-interactive hn-state-layer hn-press-none relative isolate flex w-full cursor-pointer',
-    'items-center gap-(--hn-control-gap) rounded-md py-2 pe-2.5 text-start text-sm select-none',
-    'ps-[calc(0.375rem+var(--hn-tree-level)*1.25rem)] text-fg outline-none',
-    'data-disabled:pointer-events-none data-disabled:opacity-50',
-  ],
-})
-
-export const treeToggle = tv({
-  base: 'text-muted flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm rtl:-scale-x-100 [&>span>svg]:size-3.5',
-})
-
-export const treeEmpty = tv({
-  base: 'text-muted px-2.5 py-2 text-sm',
-})
+export * from '../../../../shared/src/variants/tree'