@hina-ui/vue 1.0.0 → 1.2.0

package/src/components/multi-select/MultiSelect.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends SelectOption = SelectOption">
   import { computed, ref } from 'vue'
   import { SelectRoot, SelectTrigger } from 'reka-ui'
   import { cn } from '../../lib/cn'
@@ -25,7 +25,7 @@
 
   const props = withDefaults(
     defineProps<{
-      options: SelectItems
+      options: SelectItems<T>
       placeholder?: string
       name?: string
       required?: boolean
@@ -45,7 +45,7 @@
   const model = defineModel<Array<string | number>>({ default: () => [] })
   const open = defineModel<boolean>('open', { default: false })
 
-  defineSlots<{ option(props: { option: SelectOption }): unknown }>()
+  defineSlots<{ option?(props: { option: T }): unknown }>()
 
   const t = useUiLocale()
   const group = injectInputGroup()
@@ -105,6 +105,7 @@
       :tabindex="disabled ? -1 : 0"
       :aria-disabled="disabled || undefined"
       :data-invalid="invalid ? '' : undefined"
+      :data-disabled="disabled ? '' : undefined"
       :aria-invalid="invalid || undefined"
       :class="
         cn(
@@ -156,7 +157,6 @@
         <DisclosureIcon />
       </span>
     </SelectTrigger>
-    <!-- Reka 2.10 BubbleSelect assigns arrays to select.value, which loses multiple values. -->
     <VisuallyHidden v-if="props.name" as-child>
       <select
         v-model="model"

package/src/components/number-input/NumberInput.vue

@@ -16,8 +16,8 @@
   import {
     inputControl,
     inputEmbedded,
-    inputHost,
-    type InputVariants,
+    textInputHost,
+    type TextInputVariants,
   } from '../input/input.variants'
   import { numberInputStep, numberInputStepper } from './number-input.variants'
 
@@ -34,8 +34,8 @@
       formatOptions?: Intl.NumberFormatOptions
       locale?: string
       controls?: boolean
-      variant?: InputVariants['variant']
-      size?: InputVariants['size']
+      variant?: TextInputVariants['variant']
+      size?: TextInputVariants['size']
       disabled?: boolean
       readonly?: boolean
       invalid?: boolean
@@ -47,6 +47,7 @@
 
   const t = useUiLocale()
   const group = injectInputGroup()
+  const divided = computed(() => (group ? group.variant?.value : props.variant) !== 'bare')
   const size = computed(() => (group ? group.size.value : props.size))
   const {
     id: fieldId,
@@ -80,9 +81,10 @@
     :disabled="disabled"
     data-hn-number-input
     :data-invalid="invalid ? '' : undefined"
+    :data-disabled="disabled ? '' : undefined"
     :class="
       cn(
-        group ? inputEmbedded() : inputHost({ variant: props.variant, size: props.size }),
+        group ? inputEmbedded() : textInputHost({ variant: props.variant, size: props.size }),
         props.class,
       )
     "
@@ -94,13 +96,13 @@
       :aria-describedby="describedBy"
       :class="cn(inputControl(), 'tabular-nums')"
     />
-    <div v-if="props.controls" :class="numberInputStepper({ size })">
+    <div v-if="props.controls" :class="numberInputStepper({ size, divided })">
       <NumberFieldIncrement :aria-label="t.numberInput.increase" :class="numberInputStep()">
         <ChevronUp />
       </NumberFieldIncrement>
       <NumberFieldDecrement
         :aria-label="t.numberInput.decrease"
-        :class="numberInputStep({ divided: true })"
+        :class="numberInputStep({ divided })"
       >
         <ChevronDown />
       </NumberFieldDecrement>

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

@@ -1,8 +1,11 @@
 import { tv } from '../../lib/tv'
 
 export const numberInputStepper = tv({
-  base: 'border-line flex shrink-0 flex-col border-s',
+  base: 'flex shrink-0 flex-col',
   variants: {
+    divided: {
+      true: 'border-line border-s',
+    },
     size: {
       sm: '[&_svg]:size-3',
       md: '[&_svg]:size-3',
@@ -11,6 +14,7 @@ export const numberInputStepper = tv({
   },
   defaultVariants: {
     size: 'md',
+    divided: true,
   },
 })
 

package/src/components/password-input/PasswordInput.vue

@@ -4,13 +4,13 @@
   import { useUiLocale } from '../../locale'
   import InputBase from '../input/InputBase.vue'
   import InputAction from '../input/InputAction.vue'
-  import type { InputVariants } from '../input/input.variants'
+  import type { TextInputVariants } from '../input/input.variants'
 
   defineOptions({ name: 'HnPasswordInput', inheritAttrs: false })
 
   const props = defineProps<{
-    variant?: InputVariants['variant']
-    size?: InputVariants['size']
+    variant?: TextInputVariants['variant']
+    size?: TextInputVariants['size']
     disabled?: boolean
     invalid?: boolean
     class?: string

package/src/components/radio-group/RadioGroup.vue

@@ -1,9 +1,10 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends SelectOption = SelectOption">
   import { RadioGroupItem, RadioGroupRoot } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { useFieldControl } from '../form-field/context'
   import {
     checkbox,
+    checkboxControl,
     checkboxBox,
     checkboxDescription,
     checkboxTitle,
@@ -12,6 +13,7 @@
   } from '../checkbox/checkbox.variants'
   import {
     checkboxGroup,
+    checkboxGroupItem,
     type CheckboxGroupVariants,
   } from '../checkbox-group/checkbox-group.variants'
   import type { SelectOption } from '../select/types'
@@ -20,9 +22,11 @@
   defineOptions({ name: 'HnRadioGroup' })
 
   const props = defineProps<{
-    options: SelectOption[]
+    options: T[]
     orientation?: CheckboxGroupVariants['orientation']
     size?: CheckboxVariants['size']
+    controlPlacement?: CheckboxVariants['controlPlacement']
+    block?: boolean
     disabled?: boolean
     invalid?: boolean
     class?: string
@@ -35,7 +39,7 @@
     disabled: () => props.disabled,
   })
 
-  defineSlots<{ option(props: { option: SelectOption }): unknown }>()
+  defineSlots<{ option?(props: { option: T }): unknown }>()
 </script>
 
 <template>
@@ -46,7 +50,7 @@
     :aria-describedby="describedBy"
     :aria-invalid="invalid || undefined"
     data-hn-radio-group
-    :class="cn(checkboxGroup({ orientation: props.orientation }), props.class)"
+    :class="cn(checkboxGroup({ orientation: props.orientation, block: props.block }), props.class)"
   >
     <label
       v-for="option in props.options"
@@ -54,7 +58,16 @@
       data-hn-radio
       data-hn-state-group
       :data-disabled="disabled || option.disabled ? '' : undefined"
-      :class="checkbox({ size: props.size })"
+      :class="
+        cn(
+          checkbox({
+            size: props.size,
+            controlPlacement: props.controlPlacement,
+            block: props.block,
+          }),
+          checkboxGroupItem({ orientation: props.orientation, block: props.block }),
+        )
+      "
     >
       <RadioGroupItem
         v-slot="{ checked }"
@@ -62,7 +75,12 @@
         :disabled="option.disabled"
         :aria-invalid="invalid || undefined"
         :data-invalid="invalid ? '' : undefined"
-        :class="checkboxBox({ shape: 'round', size: props.size })"
+        :class="
+          cn(
+            checkboxBox({ shape: 'round', size: props.size }),
+            checkboxControl({ controlPlacement: props.controlPlacement }),
+          )
+        "
       >
         <Transition
           enter-active-class="hn-transition-press"
@@ -73,12 +91,15 @@
           <span v-if="checked" :class="radioDot()" />
         </Transition>
       </RadioGroupItem>
-      <span :class="checkboxTitle()">
+      <span :class="checkboxTitle({ controlPlacement: props.controlPlacement })">
         <span :class="checkboxTitleText()">
           <slot name="option" :option="option">{{ option.label }}</slot>
         </span>
       </span>
-      <span v-if="option.description" :class="checkboxDescription({ size: props.size })">
+      <span
+        v-if="option.description"
+        :class="checkboxDescription({ size: props.size, controlPlacement: props.controlPlacement })"
+      >
         {{ option.description }}
       </span>
     </label>

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

@@ -37,7 +37,6 @@ 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
@@ -110,10 +109,6 @@ export function createScrollRestorer(key: string, ports: ScrollRestorerPorts): S
       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

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

@@ -2,14 +2,14 @@
   import { Search } from '@lucide/vue'
   import { cn } from '../../lib/cn'
   import InputBase from '../input/InputBase.vue'
-  import type { InputVariants } from '../input/input.variants'
+  import type { TextInputVariants } from '../input/input.variants'
 
   defineOptions({ name: 'HnSearchInput', inheritAttrs: false })
 
   const props = withDefaults(
     defineProps<{
-      variant?: InputVariants['variant']
-      size?: InputVariants['size']
+      variant?: TextInputVariants['variant']
+      size?: TextInputVariants['size']
       clearable?: boolean
       loading?: boolean
       disabled?: boolean

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

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends SelectOption = SelectOption">
   import { ToggleGroupItem, ToggleGroupRoot, type AcceptableValue } from 'reka-ui'
   import { computed, useId, useSlots } from 'vue'
   import { cn } from '../../lib/cn'
@@ -18,7 +18,7 @@
 
   const props = withDefaults(
     defineProps<{
-      options: SelectOption[]
+      options: T[]
       size?: SegmentedItemVariants['size']
       orientation?: SegmentedControlVariants['orientation']
       block?: boolean
@@ -30,7 +30,7 @@
 
   const model = defineModel<string | number>()
 
-  defineSlots<{ option(props: { option: SelectOption }): unknown }>()
+  defineSlots<{ option?(props: { option: T }): unknown }>()
 
   const slots = useSlots()
 

package/src/components/select/Select.vue

@@ -1,8 +1,10 @@
-<script setup lang="ts">
-  import { computed, ref } from 'vue'
-  import { SelectRoot, SelectTrigger } from 'reka-ui'
+<script setup lang="ts" generic="T extends SelectOption = SelectOption">
+  import { computed, ref, shallowRef } from 'vue'
+  import { SelectRoot, SelectTrigger, useDirection } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { useUiLocale } from '../../locale'
+  import { X } from '@lucide/vue'
+  import InputAction from '../input/InputAction.vue'
   import DisclosureIcon from '../disclosure-icon/DisclosureIcon.vue'
   import { useFieldControl } from '../form-field/context'
   import { injectInputGroup } from '../input-group/context'
@@ -13,14 +15,16 @@
     type InputVariants,
   } from '../input/input.variants'
   import SelectList from './SelectList.vue'
-  import { selectTrigger } from './select.variants'
+  import { selectButton, selectClearSlot, selectHost, selectValue } from './select.variants'
+  import { useClearTransition } from './composables/useClearTransition'
   import { flattenOptions, type SelectItems, type SelectOption } from './types'
 
   defineOptions({ name: 'HnSelect', inheritAttrs: false })
 
   const props = defineProps<{
-    options: SelectItems
+    options: SelectItems<T>
     placeholder?: string
+    clearable?: boolean
     name?: string
     required?: boolean
     autocomplete?: string
@@ -31,17 +35,22 @@
     class?: string
   }>()
 
+  const emit = defineEmits<{ clear: [] }>()
+
   const model = defineModel<string | number | null>()
   const open = defineModel<boolean>('open', { default: false })
 
   defineSlots<{
-    value(props: { option: SelectOption }): unknown
-    option(props: { option: SelectOption }): unknown
+    value?(props: { option: T }): unknown
+    option?(props: { option: T }): unknown
   }>()
 
   const t = useUiLocale()
   const group = injectInputGroup()
+  const direction = useDirection()
   const keyboard = ref(false)
+  const host = shallowRef<HTMLElement | null>(null)
+  const trigger = shallowRef<{ $el: HTMLElement } | null>(null)
 
   const {
     id: fieldId,
@@ -55,6 +64,18 @@
   const selected = computed(() =>
     flattenOptions(props.options).find(option => option.value === model.value),
   )
+  const clearing = computed(
+    () => !!props.clearable && model.value != null && model.value !== '' && !disabled.value,
+  )
+
+  const { reserved: clearSpace, hooks: clearTransition } = useClearTransition(() => clearing.value)
+
+  function clear() {
+    if (disabled.value || model.value == null || model.value === '') return
+    model.value = null
+    emit('clear')
+    trigger.value?.$el.focus()
+  }
 </script>
 
 <template>
@@ -66,33 +87,56 @@
     :required="props.required"
     :autocomplete="props.autocomplete"
   >
-    <SelectTrigger
-      v-bind="$attrs"
-      :id="fieldId"
-      :aria-describedby="describedBy"
+    <div
+      ref="host"
+      :dir="direction"
       data-hn-select
-      @keydown="keyboard = true"
-      @pointerdown="keyboard = false"
       :data-invalid="invalid ? '' : undefined"
-      :aria-invalid="invalid || undefined"
+      :data-disabled="disabled ? '' : undefined"
       :class="
         cn(
           group ? inputEmbedded() : inputHost({ variant: props.variant, size: props.size }),
-          selectTrigger(),
+          selectHost(),
           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>
+      <SelectTrigger
+        ref="trigger"
+        v-bind="$attrs"
+        :reference="host ?? undefined"
+        :id="fieldId"
+        :aria-describedby="describedBy"
+        :aria-invalid="invalid || undefined"
+        data-hn-select-trigger
+        @keydown="keyboard = true"
+        @pointerdown="keyboard = false"
+        :class="selectButton()"
+      >
+        <span :class="selectValue({ clearing: clearSpace })">
+          <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>
+      <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"
+        v-on="clearTransition"
+      >
+        <span v-if="clearing" :class="selectClearSlot()">
+          <InputAction data-hn-select-clear :label="t.common.clear" @click="clear">
+            <X />
+          </InputAction>
+        </span>
+      </Transition>
+    </div>
     <SelectList :options="props.options" :keyboard="keyboard">
       <template #option="slotProps">
         <slot name="option" v-bind="slotProps" />

package/src/components/select/SelectList.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends SelectOption = SelectOption">
   import { Check } from '@lucide/vue'
   import {
     SelectContent,
@@ -25,11 +25,11 @@
 
   defineOptions({ name: 'HnSelectList' })
 
-  const props = defineProps<{ options: SelectItems; keyboard?: boolean }>()
+  const props = defineProps<{ options: SelectItems<T>; keyboard?: boolean }>()
 
   const fresh = ref(false)
 
-  defineSlots<{ option(props: { option: SelectOption }): unknown }>()
+  defineSlots<{ option?(props: { option: T }): unknown }>()
 
   const t = useUiLocale()
 </script>

package/src/components/select/composables/useClearTransition.ts

@@ -0,0 +1,25 @@
+import { computed, ref } from 'vue'
+
+export function useClearTransition(visible: () => boolean) {
+  const leaving = ref(false)
+  const reserved = computed(() => visible() || leaving.value)
+
+  function beforeEnter(element: Element) {
+    leaving.value = false
+    element.removeAttribute('inert')
+  }
+
+  function beforeLeave(element: Element) {
+    leaving.value = true
+    element.setAttribute('inert', '')
+  }
+
+  function finishLeave() {
+    leaving.value = false
+  }
+
+  return {
+    reserved,
+    hooks: { beforeEnter, beforeLeave, afterLeave: finishLeave, leaveCancelled: finishLeave },
+  }
+}

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

@@ -1,4 +1,5 @@
 import { tv } from '../../lib/tv'
+import { inputActionSlot } from '../input/input.variants'
 
 export const selectTrigger = tv({
   base: [
@@ -9,6 +10,14 @@ export const selectTrigger = tv({
   ],
 })
 
+export const selectButton = tv({
+  base: [
+    'group/hn-disclosure flex h-full min-w-0 flex-1 cursor-pointer items-center bg-transparent ps-[var(--hn-input-px)] pe-0 text-start text-inherit outline-none [font:inherit]',
+    'data-placeholder:text-faint data-placeholder:font-normal disabled:cursor-not-allowed',
+    '[&_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',
@@ -40,3 +49,18 @@ export const selectEmpty = tv({
 export const selectListBody = tv({
   base: 'flex flex-col p-1',
 })
+
+export const selectHost = tv({
+  base: 'relative cursor-pointer',
+})
+
+export const selectValue = tv({
+  base: 'min-w-0 flex-1 truncate',
+  variants: {
+    clearing: { true: 'pe-[var(--hn-input-h)]' },
+  },
+})
+
+export const selectClearSlot = tv({
+  base: [inputActionSlot(), 'absolute inset-y-0 end-[var(--hn-input-h)]'],
+})

package/src/components/select/types.ts

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

package/src/components/switch/Switch.vue

@@ -5,9 +5,11 @@
   import { useFieldControl } from '../form-field/context'
   import {
     checkbox,
+    checkboxControl,
     checkboxDescription,
     checkboxTitle,
     checkboxTitleText,
+    type CheckboxVariants,
   } from '../checkbox/checkbox.variants'
   import { switchThumb, switchTrack, type SwitchVariants } from './switch.variants'
 
@@ -16,6 +18,8 @@
   const props = defineProps<{
     size?: SwitchVariants['size']
     description?: string
+    controlPlacement?: CheckboxVariants['controlPlacement']
+    block?: boolean
     disabled?: boolean
     invalid?: boolean
     class?: string
@@ -41,7 +45,17 @@
     data-hn-switch
     data-hn-state-group
     :data-disabled="disabled ? '' : undefined"
-    :class="cn(checkbox({ size: props.size }), props.class)"
+    :class="
+      cn(
+        checkbox({
+          size: props.size,
+          controlPlacement: props.controlPlacement,
+          block: props.block,
+          bare: !slots.default && !props.description,
+        }),
+        props.class,
+      )
+    "
   >
     <SwitchRoot
       v-bind="$attrs"
@@ -52,14 +66,22 @@
       :aria-describedby="describedBy"
       :data-invalid="invalid ? '' : undefined"
       :data-hn-on="model ? '' : undefined"
-      :class="switchTrack({ size: props.size })"
+      :class="
+        cn(
+          switchTrack({ size: props.size }),
+          checkboxControl({ controlPlacement: props.controlPlacement }),
+        )
+      "
     >
       <span data-hn-thumb aria-hidden="true" :class="switchThumb()" />
     </SwitchRoot>
-    <span v-if="slots.default" :class="checkboxTitle()">
+    <span v-if="slots.default" :class="checkboxTitle({ controlPlacement: props.controlPlacement })">
       <span :class="checkboxTitleText()"><slot /></span>
     </span>
-    <span v-if="props.description" :class="checkboxDescription({ size: props.size })">
+    <span
+      v-if="props.description"
+      :class="checkboxDescription({ size: props.size, controlPlacement: props.controlPlacement })"
+    >
       {{ props.description }}
     </span>
   </label>

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

@@ -78,6 +78,7 @@
   <div
     data-hn-tags-input
     :data-invalid="invalid ? '' : undefined"
+    :data-disabled="disabled ? '' : undefined"
     @click="focusFieldFrom($event.currentTarget as HTMLElement, $event.target as HTMLElement)"
     :class="
       cn(