@hina-ui/vue 1.7.3 → 1.7.4

package/src/components/float-button/FloatButton.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+  import { computed, shallowRef } from 'vue'
+  import { cn } from '../../lib/cn'
+  import Button from '../button/Button.vue'
+  import { vTooltip } from '../tooltip/directive'
+  import { floatButton } from './float-button.variants'
+  import type { FloatButtonProps } from './types'
+
+  defineOptions({ name: 'HnFloatButton', inheritAttrs: false })
+  const props = withDefaults(defineProps<FloatButtonProps>(), {
+    as: 'button',
+    type: 'button',
+    position: 'fixed',
+    placement: 'bottom-end',
+    size: 'md',
+    shape: 'circle',
+    variant: 'solid',
+    tone: 'accent',
+    tooltip: true,
+    tooltipSide: 'top',
+    ripple: true,
+    visible: true,
+  })
+  defineSlots<{ default(): unknown }>()
+  const button = shallowRef<InstanceType<typeof Button>>()
+  const tooltip = computed(() =>
+    props.tooltip && !props.extended ? { content: props.label, side: props.tooltipSide } : false,
+  )
+  const offset = computed(() =>
+    props.offset === undefined
+      ? undefined
+      : typeof props.offset === 'number'
+        ? Number.isFinite(props.offset)
+          ? `${Math.max(0, props.offset)}px`
+          : undefined
+        : props.offset,
+  )
+  const element = computed(() => button.value?.$el as HTMLElement | undefined)
+  function focus() {
+    if (!props.disabled && !props.loading) element.value?.focus({ preventScroll: true })
+  }
+  function enter(element: Element) {
+    element.removeAttribute('inert')
+  }
+  function leave(element: Element) {
+    element.setAttribute('inert', '')
+  }
+  defineExpose({ element, focus })
+</script>
+
+<template>
+  <Transition
+    enter-active-class="hn-transition-base"
+    enter-from-class="scale-90 opacity-0"
+    leave-active-class="hn-transition pointer-events-none"
+    leave-to-class="scale-90 opacity-0"
+    @before-enter="enter"
+    @before-leave="leave"
+    @leave-cancelled="enter"
+  >
+    <Button
+      v-if="props.visible"
+      v-tooltip="tooltip"
+      ref="button"
+      v-bind="$attrs"
+      data-hn-float-button
+      :as="props.as"
+      :type="props.type"
+      :icon-only="!props.extended"
+      :aria-label="props.label"
+      :variant="props.variant"
+      :tone="props.tone"
+      :loading="props.loading"
+      :disabled="props.disabled || !props.visible"
+      :ripple="props.ripple"
+      :data-position="props.position"
+      :data-placement="props.placement"
+      :class="
+        cn(
+          floatButton({
+            position: props.position,
+            size: props.size,
+            shape: props.shape,
+            extended: props.extended,
+            variant: props.variant,
+          }),
+          props.class,
+        )
+      "
+      :style="[{ '--hn-float-offset': offset }, props.style]"
+    >
+      <template v-if="props.extended" #icon><slot /></template>
+      <span v-if="props.extended" class="min-w-0 truncate">{{ props.label }}</span>
+      <slot v-else />
+    </Button>
+  </Transition>
+</template>

package/src/components/float-button/float-button.variants.ts

@@ -0,0 +1 @@
+export * from '@hina-ui/shared/variants/float-button'

package/src/components/float-button/types.ts

@@ -0,0 +1,25 @@
+import type { StyleValue } from 'vue'
+import type { PrimitiveProps } from 'reka-ui'
+import type { ButtonVariants } from '../button/button.variants'
+
+export interface FloatButtonProps {
+  label: string
+  visible?: boolean
+  as?: PrimitiveProps['as']
+  type?: 'button' | 'submit' | 'reset'
+  position?: 'fixed' | 'absolute' | 'static'
+  placement?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'
+  offset?: number | string
+  size?: 'sm' | 'md' | 'lg'
+  shape?: 'circle' | 'square'
+  extended?: boolean
+  variant?: 'solid' | 'soft' | 'outline'
+  tone?: ButtonVariants['tone']
+  tooltip?: boolean
+  tooltipSide?: 'top' | 'right' | 'bottom' | 'left'
+  loading?: boolean
+  disabled?: boolean
+  ripple?: boolean
+  class?: string
+  style?: StyleValue
+}

package/src/components/form/form.variants.ts

@@ -1,5 +1 @@
-import { tv } from '../../lib/tv'
-
-export const formRoot = tv({
-  base: 'flex flex-col gap-4',
-})
+export * from '../../../../shared/src/variants/form'

package/src/components/form-field/form-field.variants.ts

@@ -1,65 +1 @@
-import { tv } from '../../lib/tv'
-
-export const formFieldRoot = tv({
-  base: 'min-w-0',
-  variants: {
-    orientation: {
-      vertical: '',
-      horizontal: '',
-      responsive: '@container/hn-form-field',
-    },
-  },
-})
-
-export const formFieldLayout = tv({
-  base: 'grid min-w-0 grid-cols-1 items-start gap-x-6 gap-y-1.5',
-  variants: {
-    orientation: {
-      vertical: '',
-      horizontal: 'grid-cols-[var(--hn-form-label-width)_minmax(0,1fr)]',
-      responsive: '@min-[32rem]/hn-form-field:grid-cols-[var(--hn-form-label-width)_minmax(0,1fr)]',
-    },
-  },
-})
-
-export const formFieldContent = tv({
-  base: 'flex min-w-0 flex-col gap-1.5',
-})
-
-export const formFieldControl = tv({
-  base: 'min-w-0',
-  variants: {
-    orientation: {
-      vertical: '',
-      horizontal: 'grid min-h-[var(--hn-control-h-md)] items-center',
-      responsive:
-        '@min-[32rem]/hn-form-field:grid @min-[32rem]/hn-form-field:min-h-[var(--hn-control-h-md)] @min-[32rem]/hn-form-field:items-center',
-    },
-  },
-})
-
-export const formFieldLabel = tv({
-  base: 'text-fg inline-flex items-center gap-1 text-sm font-medium',
-  variants: {
-    orientation: {
-      vertical: '',
-      horizontal: 'min-h-[var(--hn-control-h-md)]',
-      responsive: '@min-[32rem]/hn-form-field:min-h-[var(--hn-control-h-md)]',
-    },
-    disabled: {
-      true: 'text-disabled',
-    },
-  },
-})
-
-export const formFieldMark = tv({
-  base: 'text-danger-text',
-})
-
-export const formFieldDescription = tv({
-  base: 'text-muted text-sm',
-})
-
-export const formFieldMessage = tv({
-  base: 'text-danger-text text-sm',
-})
+export * from '../../../../shared/src/variants/form-field'

package/src/components/form-layout/form-layout.variants.ts

@@ -1,33 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const formLayoutRoot = tv({
-  base: 'm-0 min-w-0 border-0 p-0',
-})
-
-export const formLayoutLegend = tv({
-  base: 'text-fg p-0 text-base font-medium',
-})
-
-export const formLayoutDescription = tv({
-  base: 'text-muted mt-1 text-sm',
-})
-
-export const formLayoutGrid = tv({
-  base: 'grid gap-4',
-  variants: {
-    columns: {
-      1: 'grid-cols-1',
-      2: 'grid-cols-1 sm:grid-cols-2',
-      3: 'grid-cols-1 sm:grid-cols-3',
-      4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
-    },
-    headed: {
-      true: 'mt-4',
-    },
-  },
-  defaultVariants: {
-    columns: 1,
-  },
-})
-
-export type FormLayoutVariants = VariantProps<typeof formLayoutGrid>
+export * from '../../../../shared/src/variants/form-layout'

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

@@ -1,35 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const grid = tv({
-  base: 'grid',
-  variants: {
-    cols: {
-      1: 'grid-cols-1',
-      2: 'grid-cols-2',
-      3: 'grid-cols-3',
-      4: 'grid-cols-4',
-      5: 'grid-cols-5',
-      6: 'grid-cols-6',
-      7: 'grid-cols-7',
-      8: 'grid-cols-8',
-      9: 'grid-cols-9',
-      10: 'grid-cols-10',
-      11: 'grid-cols-11',
-      12: 'grid-cols-12',
-    },
-    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: {
-    cols: 1,
-    gap: 'md',
-  },
-})
-
-export type GridVariants = VariantProps<typeof grid>
+export * from '../../../../shared/src/variants/grid'

package/src/components/heading/heading.variants.ts

@@ -1,30 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const heading = tv({
-  base: 'text-fg',
-  variants: {
-    size: {
-      xs: 'text-xs',
-      sm: 'text-sm',
-      base: 'text-base',
-      md: 'text-md',
-      lg: 'text-lg',
-      xl: 'text-xl',
-      '2xl': 'text-2xl',
-    },
-    weight: {
-      normal: 'font-normal',
-      medium: 'font-medium',
-      semibold: 'font-semibold',
-    },
-    truncate: {
-      true: 'truncate',
-    },
-  },
-  compoundVariants: [{ size: ['xl', '2xl'], class: 'tracking-tight' }],
-  defaultVariants: {
-    weight: 'semibold',
-  },
-})
-
-export type HeadingVariants = VariantProps<typeof heading>
+export * from '../../../../shared/src/variants/heading'

package/src/components/image/image.variants.ts

@@ -1,29 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const imageRoot = tv({
-  base: 'relative isolate block w-full overflow-hidden',
-  variants: {
-    preview: {
-      true: 'hn-focus-ring cursor-zoom-in',
-    },
-  },
-})
-
-export const image = tv({
-  base: 'relative z-10 block size-full',
-  variants: {
-    lazy: {
-      true: 'transition-opacity duration-(--hn-duration-base) ease-enter motion-reduce:transition-none',
-    },
-    fit: {
-      cover: 'object-cover',
-      contain: 'object-contain',
-      fill: 'object-fill',
-      none: 'object-none',
-      'scale-down': 'object-scale-down',
-    },
-  },
-  defaultVariants: { fit: 'cover' },
-})
-
-export type ImageVariants = VariantProps<typeof image>
+export * from '../../../../shared/src/variants/image'

package/src/components/indicator/indicator.variants.ts

@@ -1,26 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const indicator = tv({
-  base: 'relative inline-flex shrink-0 rounded-full align-middle',
-  variants: {
-    tone: {
-      accent: 'bg-accent',
-      neutral: 'bg-neutral-solid',
-      success: 'bg-success',
-      warning: 'bg-warning',
-      danger: 'bg-danger',
-      info: 'bg-info',
-    },
-    size: {
-      sm: 'size-1.5',
-      md: 'size-2',
-      lg: 'size-2.5',
-    },
-  },
-  defaultVariants: {
-    tone: 'neutral',
-    size: 'md',
-  },
-})
-
-export type IndicatorVariants = VariantProps<typeof indicator>
+export * from '../../../../shared/src/variants/indicator'

package/src/components/inline/Inline.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import type { Component } from 'vue'
   import { cn } from '../../lib/cn'
   import { inline, type InlineVariants } from './inline.variants'
 
@@ -6,7 +7,7 @@
 
   const props = withDefaults(
     defineProps<{
-      as?: string
+      as?: string | Component
       gap?: InlineVariants['gap']
       align?: InlineVariants['align']
       justify?: InlineVariants['justify']

package/src/components/inline/inline.variants.ts

@@ -1,41 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const inline = tv({
-  base: 'flex',
-  variants: {
-    gap: {
-      none: 'gap-0',
-      xs: 'gap-1',
-      sm: 'gap-2',
-      md: 'gap-[var(--hn-inline-gap)]',
-      lg: 'gap-6',
-      xl: 'gap-8',
-    },
-    align: {
-      start: 'items-start',
-      center: 'items-center',
-      end: 'items-end',
-      baseline: 'items-baseline',
-      stretch: 'items-stretch',
-    },
-    justify: {
-      start: 'justify-start',
-      center: 'justify-center',
-      end: 'justify-end',
-      between: 'justify-between',
-      around: 'justify-around',
-      evenly: 'justify-evenly',
-    },
-    wrap: {
-      true: 'flex-wrap',
-      false: 'flex-nowrap',
-    },
-  },
-  defaultVariants: {
-    gap: 'md',
-    align: 'center',
-    wrap: true,
-  },
-})
-
-export type InlineVariants = VariantProps<typeof inline>
+export * from '../../../../shared/src/variants/inline'

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

@@ -1,82 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const inputHost = tv({
-  base: [
-    'group/hn-field text-fg flex w-full min-w-0 cursor-text items-stretch overflow-hidden rounded-md border font-medium',
-    'data-disabled:cursor-not-allowed data-disabled:opacity-50',
-  ],
-  variants: {
-    variant: {
-      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: 'h-[var(--hn-control-h-sm)] text-sm [--hn-input-h:var(--hn-control-h-sm)] [--hn-input-px:var(--hn-control-px-sm)] [--hn-input-icon:0.875rem]',
-      md: 'h-[var(--hn-control-h-md)] text-base [--hn-input-h:var(--hn-control-h-md)] [--hn-input-px:var(--hn-control-px-md)] [--hn-input-icon:1rem]',
-      lg: 'h-[var(--hn-control-h-lg)] text-md [--hn-input-h:var(--hn-control-h-lg)] [--hn-input-px:var(--hn-control-px-lg)] [--hn-input-icon:1.125rem]',
-    },
-  },
-  defaultVariants: {
-    variant: 'primary',
-    size: 'md',
-  },
-})
-
-export const textInputHost = tv({
-  extend: inputHost,
-  variants: {
-    variant: {
-      bare: 'rounded-none border-0 bg-transparent shadow-none outline-none',
-    },
-  },
-})
-
-export const inputControl = tv({
-  base: [
-    'h-full min-w-0 flex-1 bg-transparent px-[var(--hn-input-px)] text-inherit outline-none [font:inherit]',
-    'placeholder:text-faint placeholder:font-normal disabled:cursor-not-allowed',
-  ],
-  variants: {
-    leading: {
-      true: 'ps-0',
-    },
-    trailing: {
-      true: 'pe-0',
-    },
-  },
-})
-
-export const inputAdornment = tv({
-  base: [
-    'text-muted relative flex min-w-[var(--hn-input-h)] shrink-0 items-center justify-center self-stretch px-1',
-    '[&>svg]:size-[var(--hn-input-icon)] [&>span_svg]:size-[var(--hn-input-icon)]',
-  ],
-})
-
-export const inputAction = tv({
-  base: [
-    'hn-interactive hn-state-layer text-fg cursor-pointer outline-none',
-    'focus-visible:[outline-offset:calc(var(--hn-focus-ring-offset)*-1)]',
-    'disabled:pointer-events-none',
-  ],
-})
-
-export const inputIndicator = tv({
-  base: 'cursor-pointer outline-none',
-})
-
-export const inputActionSlot = tv({
-  base: 'flex shrink-0 items-stretch self-stretch',
-})
-
-export type InputVariants = VariantProps<typeof inputHost>
-export type TextInputVariants = VariantProps<typeof textInputHost>
-
-export const inputEmbedded = tv({
-  base: [
-    'group/hn-field flex min-w-0 flex-1 items-stretch',
-    'data-disabled:cursor-not-allowed data-disabled:opacity-50',
-    'group-data-disabled/hn-field:data-disabled:opacity-100',
-  ],
-})
+export * from '../../../../shared/src/variants/input'

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

@@ -1,20 +1 @@
-import { tv } from '../../lib/tv'
-
-export const inputGroup = tv({
-  base: [
-    '[&>button]:h-auto [&>button]:rounded-none [&>button]:[--hn-press-scale:1]',
-    '[&>button:focus-visible]:-outline-offset-2',
-  ],
-  variants: {
-    divided: {
-      true: '[&>*+*]:border-s [&>*+*]:border-s-line',
-    },
-  },
-  defaultVariants: {
-    divided: true,
-  },
-})
-
-export const inputGroupAddon = tv({
-  base: 'text-muted flex shrink-0 items-center gap-2 px-[var(--hn-input-px)] whitespace-nowrap [&>svg]:size-[var(--hn-input-icon)]',
-})
+export * from '../../../../shared/src/variants/input-group'

package/src/components/lightbox/lightbox.variants.ts

@@ -1,5 +1 @@
-import { tv } from '../../lib/tv'
-
-export const lightboxStage = tv({
-  base: 'dark fixed inset-0 z-(--hn-z-overlay) touch-none p-4 outline-none select-none sm:p-6',
-})
+export * from '../../../../shared/src/variants/lightbox'

package/src/components/link/link.variants.ts

@@ -1,14 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const link = tv({
-  base: 'hn-link cursor-pointer',
-  variants: {
-    tone: {
-      accent: '[--hn-link-color:var(--hn-accent-text)]',
-      neutral: '[--hn-link-color:var(--hn-fg-default)]',
-    },
-  },
-  defaultVariants: { tone: 'accent' },
-})
-
-export type LinkVariants = VariantProps<typeof link>
+export * from '../../../../shared/src/variants/link'

package/src/components/listbox/Listbox.vue

@@ -10,6 +10,8 @@
   import { useFieldControl } from '../form-field/context'
   import { useUiLocale } from '../../locale'
   import ScrollArea from '../scroll-area/ScrollArea.vue'
+  import VirtualChoices from '../virtual-list/VirtualChoices.vue'
+  import type { VirtualizeOptions } from '../../lib/virtual/types'
   import { selectEmpty, selectItem, selectLabel } from '../select/select.variants'
   import { isOptionGroup, type SelectItems, type SelectOption } from '../select/types'
   import ListboxOptionContent from './ListboxOptionContent.vue'
@@ -20,6 +22,7 @@
   const props = withDefaults(
     defineProps<{
       options: SelectItems<T>
+      virtualize?: VirtualizeOptions
       multiple?: boolean
       maxHeight?: string
       padded?: boolean
@@ -57,7 +60,33 @@
     :data-invalid="invalid ? '' : undefined"
     :class="cn(listbox({ variant: props.variant }), props.class)"
   >
-    <ScrollArea :style="{ maxHeight: props.maxHeight }">
+    <ListboxContent v-if="props.virtualize" as-child v-bind="$attrs">
+      <VirtualChoices
+        v-slot="{ option, attrs }"
+        :options="props.options"
+        :virtualize="props.virtualize"
+        kind="listbox"
+        :padded="props.padded"
+        :max-height="props.maxHeight"
+      >
+        <ListboxItem
+          v-bind="attrs"
+          :value="option.value"
+          :disabled="option.disabled"
+          :class="selectItem()"
+        >
+          <ListboxOptionContent :option="option">
+            <template v-if="slots.option" #option="slotProps">
+              <slot name="option" v-bind="slotProps" />
+            </template>
+            <template v-if="slots.trailing" #trailing="slotProps">
+              <slot name="trailing" v-bind="slotProps" />
+            </template>
+          </ListboxOptionContent>
+        </ListboxItem>
+      </VirtualChoices>
+    </ListboxContent>
+    <ScrollArea v-else :style="{ maxHeight: props.maxHeight }">
       <ListboxContent v-bind="$attrs" :class="listboxContent({ padded: props.padded })">
         <template
           v-for="item in props.options"

package/src/components/listbox/listbox.variants.ts

@@ -1,28 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const listbox = tv({
-  base: [
-    'flex w-full min-w-0 flex-col overflow-hidden rounded-md data-disabled:opacity-50',
-    '[&:not(:focus-within)_[data-highlighted]:not(:hover)]:[--hn-state-hover-opacity:0]',
-  ],
-  variants: {
-    variant: {
-      primary: 'border-line bg-surface border shadow-sm',
-      secondary: 'bg-inset',
-      bare: 'rounded-none border-0 bg-transparent shadow-none',
-    },
-  },
-  defaultVariants: {
-    variant: 'primary',
-  },
-})
-
-export const listboxContent = tv({
-  base: 'flex flex-col outline-none',
-  variants: {
-    padded: { true: 'p-1', false: 'p-0' },
-  },
-  defaultVariants: { padded: true },
-})
-
-export type ListboxVariants = VariantProps<typeof listbox>
+export * from '../../../../shared/src/variants/listbox'

package/src/components/loading-overlay/loading-overlay.variants.ts

@@ -1,25 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const loadingOverlay = tv({
-  base: 'bg-veil flex flex-col items-center justify-center gap-3',
-  variants: {
-    fixed: {
-      true: 'fixed inset-0 z-(--hn-z-overlay)',
-      false: 'absolute inset-0 z-10',
-    },
-  },
-  defaultVariants: { fixed: false },
-})
-
-export const loadingBlocker = tv({
-  base: '',
-  variants: {
-    fixed: {
-      true: 'fixed inset-0 z-(--hn-z-overlay)',
-      false: 'absolute inset-0 z-10',
-    },
-  },
-  defaultVariants: { fixed: false },
-})
-
-export type LoadingOverlayVariants = VariantProps<typeof loadingOverlay>
+export * from '../../../../shared/src/variants/loading-overlay'