@hina-ui/vue 1.7.11 → 1.7.13

package/src/primitives/utils/useGraceArea.ts

@@ -0,0 +1,85 @@
+import { ref, watchEffect, type Ref } from 'vue'
+import { createEventHook, refAutoReset, tryOnScopeDispose } from '@vueuse/core'
+import {
+  exitSideFromRect,
+  hull,
+  isPointInPolygon,
+  paddedExitPoints,
+  pointsFromRect,
+  type Polygon,
+} from '../../../../shared/src/primitives/grace-area'
+
+export function useGraceArea(
+  triggerElement: Ref<HTMLElement | undefined>,
+  containerElement: Ref<HTMLElement | undefined>,
+) {
+  const isPointerInTransit = refAutoReset(false, 300)
+  tryOnScopeDispose(() => {
+    isPointerInTransit.value = false
+  })
+
+  const pointerGraceArea = ref<Polygon | null>(null)
+  const pointerExit = createEventHook<void>()
+
+  function handleRemoveGraceArea() {
+    pointerGraceArea.value = null
+    isPointerInTransit.value = false
+  }
+
+  function handleCreateGraceArea(event: PointerEvent, hoverTarget: HTMLElement | undefined) {
+    if (!hoverTarget) return
+    const currentTarget = event.currentTarget as HTMLElement
+    const exitPoint = { x: event.clientX, y: event.clientY }
+    const exitSide = exitSideFromRect(exitPoint, currentTarget.getBoundingClientRect())
+    pointerGraceArea.value = hull([
+      ...paddedExitPoints(exitPoint, exitSide, 1),
+      ...pointsFromRect(hoverTarget.getBoundingClientRect()),
+    ])
+    isPointerInTransit.value = true
+  }
+
+  watchEffect(onCleanup => {
+    const trigger = triggerElement.value
+    const container = containerElement.value
+    if (!trigger || !container) return
+    const handleTriggerLeave = (event: PointerEvent) =>
+      handleCreateGraceArea(event, containerElement.value)
+    const handleContentLeave = (event: PointerEvent) =>
+      handleCreateGraceArea(event, triggerElement.value)
+    trigger.addEventListener('pointerleave', handleTriggerLeave)
+    container.addEventListener('pointerleave', handleContentLeave)
+    onCleanup(() => {
+      triggerElement.value?.removeEventListener('pointerleave', handleTriggerLeave)
+      containerElement.value?.removeEventListener('pointerleave', handleContentLeave)
+    })
+  })
+
+  watchEffect(onCleanup => {
+    if (!pointerGraceArea.value) return
+    const handleTrackPointerGrace = (event: PointerEvent) => {
+      if (!pointerGraceArea.value || !(event.target instanceof Element)) return
+      const target = event.target
+      const hasEnteredTarget =
+        triggerElement.value?.contains(target) || containerElement.value?.contains(target)
+      const isPointerOutsideGraceArea = !isPointInPolygon(
+        { x: event.clientX, y: event.clientY },
+        pointerGraceArea.value,
+      )
+      const isAnotherGraceAreaTrigger = !!target.closest('[data-grace-area-trigger]')
+      if (hasEnteredTarget) handleRemoveGraceArea()
+      else if (isPointerOutsideGraceArea || isAnotherGraceAreaTrigger) {
+        handleRemoveGraceArea()
+        void pointerExit.trigger()
+      }
+    }
+    triggerElement.value?.ownerDocument.addEventListener('pointermove', handleTrackPointerGrace)
+    onCleanup(() =>
+      triggerElement.value?.ownerDocument.removeEventListener(
+        'pointermove',
+        handleTrackPointerGrace,
+      ),
+    )
+  })
+
+  return { isPointerInTransit, onPointerExit: pointerExit.on }
+}

package/src/primitives/utils/useHideOthers.ts

@@ -0,0 +1,18 @@
+import { onUnmounted, watch, type MaybeRefOrGetter } from 'vue'
+import { unrefElement, type MaybeElement } from '@vueuse/core'
+import { hideOutside } from '../../../../shared/src/primitives/dialog'
+
+export function useHideOthers(target: MaybeRefOrGetter<MaybeElement>) {
+  let undo: (() => void) | undefined
+  watch(
+    () => unrefElement(target),
+    element => {
+      const next = element ? hideOutside(element) : undefined
+      if (next) undo = next
+      else if (undo) undo()
+    },
+  )
+  onUnmounted(() => {
+    if (undo) undo()
+  })
+}

package/src/primitives/utils/useIsUsingKeyboard.ts

@@ -0,0 +1,25 @@
+import { onMounted, ref } from 'vue'
+import { createSharedComposable, useEventListener } from '@vueuse/core'
+
+function useIsUsingKeyboardImpl() {
+  const isUsingKeyboard = ref(false)
+  onMounted(() => {
+    useEventListener(
+      'keydown',
+      () => {
+        isUsingKeyboard.value = true
+      },
+      { capture: true, passive: true },
+    )
+    useEventListener(
+      ['pointerdown', 'pointermove'],
+      () => {
+        isUsingKeyboard.value = false
+      },
+      { capture: true, passive: true },
+    )
+  })
+  return isUsingKeyboard
+}
+
+export const useIsUsingKeyboard = createSharedComposable(useIsUsingKeyboardImpl)

package/src/primitives/utils/useLocale.ts

@@ -0,0 +1,7 @@
+import { computed, ref, type Ref } from 'vue'
+import { injectConfigProviderContext } from './config'
+
+export function useLocale(locale?: Ref<string | undefined>) {
+  const context = injectConfigProviderContext({ locale: ref('en') })
+  return computed(() => locale?.value || context.locale?.value || 'en')
+}

package/src/primitives/utils/useVModel.ts

@@ -3,6 +3,7 @@ import { computed, nextTick, ref, watch, type Ref } from 'vue'
 export interface VModelOptions<V> {
   defaultValue?: V
   passive?: boolean
+  deep?: boolean
 }
 
 export function useVModel<P extends object, K extends keyof P & string, V = P[K]>(
@@ -30,8 +31,12 @@ export function useVModel<P extends object, K extends keyof P & string, V = P[K]
       void nextTick(() => (updating = false))
     },
   )
-  watch(proxy, value => {
-    if (!updating && value !== (props[key] as unknown)) emit(event, value)
-  })
+  watch(
+    proxy,
+    value => {
+      if (!updating && (value !== (props[key] as unknown) || options.deep)) emit(event, value)
+    },
+    { deep: options.deep },
+  )
   return proxy
 }

package/src/singletons.ts

@@ -1,3 +1,3 @@
-export const REQUIRED_SINGLETONS = ['vue', 'reka-ui', '@hina-ui/vue'] as const
+export const REQUIRED_SINGLETONS = ['vue', '@hina-ui/vue'] as const
 
 export type RequiredSingleton = (typeof REQUIRED_SINGLETONS)[number]

package/dist/types/vue/src/primitives/pin-input/PinInputInput.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PinInputInput.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/pin-input/PinInputInput.ts"],"names":[],"mappings":"AAAA,OAAO,EAWL,KAAK,QAAQ,EACd,MAAM,KAAK,CAAA;AAcZ,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAA;AAK7D,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,EAAE,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;CAC1B;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;cAOK,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;cAA9B,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;;;;;;;;4EA4K3D,CAAA"}

package/dist/types/vue/src/primitives/pin-input/PinInputRoot.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PinInputRoot.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/pin-input/PinInputRoot.ts"],"names":[],"mappings":"AAAA,OAAO,EAUL,KAAK,QAAQ,EACd,MAAM,KAAK,CAAA;AACZ,OAAO,EAGL,KAAK,aAAa,EACnB,MAAM,6CAA6C,CAAA;AACpD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAA;AAC7D,OAAO,EAAgB,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAIpE,OAAO,EAA8B,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AAEzE,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,aAAa,GAAG,IAAI,CAAA;IACjC,YAAY,CAAC,EAAE,aAAa,CAAA;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,GAAG,CAAC,EAAE,SAAS,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,EAAE,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;IACzB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,mBAAmB,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAA;IAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAA;CACjC,CAAA;AAED,eAAO,MAAM,YAAY;;cAIkB,QAAQ,CAAC,aAAa,GAAG,IAAI,CAAC;;;;cAC5B,QAAQ,CAAC,aAAa,CAAC;;;;;;;;;;;;;;;;;cAI/B,QAAQ,CAAC,YAAY,CAAC;;;;;cAChC,QAAQ,CAAC,SAAS,CAAC;;;;;;;;;;;;;;;;cAIX,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;;;;;;;;;;;;;;;cAVtB,QAAQ,CAAC,aAAa,GAAG,IAAI,CAAC;;;;cAC5B,QAAQ,CAAC,aAAa,CAAC;;;;;;;;;;;;;;;;;cAI/B,QAAQ,CAAC,YAAY,CAAC;;;;;cAChC,QAAQ,CAAC,SAAS,CAAC;;;;;;;;;;;;;;;;cAIX,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;4EA4E/D,CAAA"}

package/dist/types/vue/src/primitives/pin-input/context.d.ts

@@ -1,20 +0,0 @@
-import type { ComputedRef, Ref } from 'vue';
-import type { PinInputValue } from '../../../../shared/src/primitives/pin-input';
-import type { Direction } from '../utils/useDirection';
-export type PinInputType = 'text' | 'number';
-export interface PinInputRootContext {
-    modelValue: Ref<PinInputValue>;
-    currentModelValue: ComputedRef<PinInputValue>;
-    mask: Ref<boolean>;
-    otp: Ref<boolean>;
-    placeholder: Ref<string>;
-    type: Ref<PinInputType>;
-    dir: Ref<Direction>;
-    disabled: Ref<boolean>;
-    isCompleted: ComputedRef<boolean>;
-    inputElements?: Ref<Set<HTMLInputElement>>;
-    onInputElementChange: (element: HTMLInputElement) => void;
-    isNumericMode: ComputedRef<boolean>;
-}
-export declare const injectPinInputRootContext: <T extends PinInputRootContext | null | undefined = PinInputRootContext>(fallback?: T | undefined) => T extends null ? PinInputRootContext | null : PinInputRootContext, providePinInputRootContext: (value: PinInputRootContext) => PinInputRootContext;
-//# sourceMappingURL=context.d.ts.map

package/dist/types/vue/src/primitives/pin-input/context.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/pin-input/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6CAA6C,CAAA;AAEhF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAEtD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,QAAQ,CAAA;AAE5C,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,GAAG,CAAC,aAAa,CAAC,CAAA;IAC9B,iBAAiB,EAAE,WAAW,CAAC,aAAa,CAAC,CAAA;IAC7C,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAClB,GAAG,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACjB,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACxB,IAAI,EAAE,GAAG,CAAC,YAAY,CAAC,CAAA;IACvB,GAAG,EAAE,GAAG,CAAC,SAAS,CAAC,CAAA;IACnB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACtB,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IACjC,aAAa,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC,CAAA;IAC1C,oBAAoB,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,IAAI,CAAA;IACzD,aAAa,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;CACpC;AAED,eAAO,MAAO,yBAAyB,2KAAE,0BAA0B,qDACf,CAAA"}

package/dist/types/vue/src/primitives/pin-input/index.d.ts

@@ -1,4 +0,0 @@
-export { injectPinInputRootContext, type PinInputRootContext, type PinInputType } from './context';
-export { PinInputInput, type PinInputInputProps } from './PinInputInput';
-export { PinInputRoot, type PinInputRootEmits, type PinInputRootProps } from './PinInputRoot';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/vue/src/primitives/pin-input/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/pin-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,KAAK,mBAAmB,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AAClG,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACxE,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAA"}

package/src/primitives/pin-input/PinInputInput.ts

@@ -1,218 +0,0 @@
-import {
-  computed,
-  defineComponent,
-  h,
-  nextTick,
-  onMounted,
-  onUnmounted,
-  renderSlot,
-  watch,
-  withCtx,
-  withKeys,
-  type PropType,
-} from 'vue'
-import { getActiveElement } from '../../../../shared/src/primitives/focus-scope'
-import {
-  navigatePin,
-  pinFocusRedirect,
-  pinInputLabel,
-  pinPlaceholder,
-  resolvePinComposition,
-  resolvePinInput,
-  resolvePinPaste,
-  setPinValueAt,
-  spreadPinValue,
-  type PinTextAction,
-} from '../../../../shared/src/primitives/pin-input'
-import { Primitive, type PrimitiveProps } from '../primitive'
-import { useComposing } from '../utils/useComposing'
-import { usePrimitiveElement } from '../utils/usePrimitiveElement'
-import { injectPinInputRootContext } from './context'
-
-export interface PinInputInputProps {
-  index: number
-  disabled?: boolean
-  asChild?: boolean
-  as?: PrimitiveProps['as']
-}
-
-export const PinInputInput = defineComponent({
-  name: 'PinInputInput',
-  props: {
-    index: { type: Number, required: true },
-    disabled: { type: Boolean, required: false },
-    asChild: { type: Boolean, required: false },
-    as: {
-      type: null as unknown as PropType<PrimitiveProps['as']>,
-      required: false,
-      default: 'input',
-    },
-  },
-  setup(props, { slots }) {
-    const context = injectPinInputRootContext()
-    const inputElements = computed(() => [...context.inputElements!.value])
-    const currentValue = computed(() => context.currentModelValue.value[props.index])
-    const disabled = computed(() => props.disabled || context.disabled.value)
-    const isOtpMode = computed(() => context.otp.value)
-    const isPasswordMode = computed(() => context.mask.value)
-    const { primitiveElement, currentElement } = usePrimitiveElement()
-
-    function updateModelValueAt(index: number, value: string) {
-      context.modelValue.value = setPinValueAt(
-        context.currentModelValue.value,
-        index,
-        value,
-        context.isNumericMode.value,
-      )
-    }
-
-    function handleMultipleCharacter(characters: string) {
-      const { values, filled, end } = spreadPinValue(
-        context.currentModelValue.value,
-        characters,
-        props.index,
-        inputElements.value.length,
-        context.isNumericMode.value,
-      )
-      for (const at of filled) inputElements.value[at]!.focus()
-      context.modelValue.value = values
-      inputElements.value[end]?.focus()
-    }
-
-    function apply(target: HTMLInputElement, action: PinTextAction) {
-      if (action.kind === 'clear') target.value = ''
-      else if (action.kind === 'filter') target.value = action.value
-      else if (action.kind === 'spread') handleMultipleCharacter(action.characters)
-      else {
-        target.value = action.character
-        updateModelValueAt(props.index, target.value)
-        inputElements.value[props.index + 1]?.focus()
-      }
-    }
-
-    const { isComposing, handleCompositionStart, handleCompositionEnd } = useComposing(event => {
-      const target = event.target as HTMLInputElement
-      apply(target, resolvePinComposition(event.data || target.value, context.isNumericMode.value))
-    })
-
-    function handleInput(event: InputEvent) {
-      if (isComposing.value || event.isComposing) return
-      const target = event.target as HTMLInputElement
-      apply(target, resolvePinInput(event.data, target.value, context.isNumericMode.value))
-    }
-
-    function updatePlaceholder() {
-      void nextTick(() => {
-        const target = currentElement.value as HTMLInputElement | undefined
-        if (!target) return
-        pinPlaceholder(target, getActiveElement(), context.placeholder.value)
-      })
-    }
-
-    function handleKeydown(event: KeyboardEvent) {
-      if (isComposing.value || event.isComposing) return
-      navigatePin(
-        event,
-        getActiveElement() as HTMLElement | null,
-        inputElements.value,
-        context.dir.value,
-      )
-    }
-
-    function handleBackspace(event: KeyboardEvent) {
-      event.preventDefault()
-      const target = event.target as HTMLInputElement
-      if (target.value) updateModelValueAt(props.index, '')
-      else {
-        const previous = inputElements.value[props.index - 1]
-        if (previous) {
-          previous.focus()
-          updateModelValueAt(props.index - 1, '')
-        }
-      }
-    }
-
-    function handleDelete(event: KeyboardEvent) {
-      if (event.key === 'Delete') {
-        event.preventDefault()
-        updateModelValueAt(props.index, '')
-      }
-    }
-
-    function handleFocus(event: FocusEvent) {
-      if (context.otp.value) {
-        const redirect = pinFocusRedirect(
-          context.currentModelValue.value,
-          inputElements.value.length,
-          props.index,
-        )
-        if (redirect !== -1) {
-          inputElements.value[redirect]!.focus()
-          return
-        }
-      }
-      ;(event.target as HTMLInputElement).setSelectionRange(1, 1)
-      updatePlaceholder()
-    }
-
-    function handlePaste(event: ClipboardEvent) {
-      event.preventDefault()
-      const clipboardData = event.clipboardData
-      if (!clipboardData) return
-      handleMultipleCharacter(
-        resolvePinPaste(clipboardData.getData('text'), context.isNumericMode.value),
-      )
-    }
-
-    watch(currentValue, updatePlaceholder)
-    onMounted(() => {
-      context.onInputElementChange(currentElement.value as HTMLInputElement)
-    })
-    onUnmounted(() => {
-      context.inputElements?.value.delete(currentElement.value as HTMLInputElement)
-    })
-
-    const onInput = (event: Event) => handleInput(event as InputEvent)
-    const onKeydown = [
-      withKeys(handleKeydown as (event: Event) => void, [
-        'left',
-        'right',
-        'up',
-        'down',
-        'home',
-        'end',
-      ]),
-      withKeys(handleBackspace as (event: Event) => void, ['backspace']),
-      withKeys(handleDelete as (event: Event) => void, ['delete']),
-    ]
-
-    return () =>
-      h(
-        Primitive,
-        {
-          ref: primitiveElement,
-          autocapitalize: 'none',
-          as: props.as,
-          'as-child': props.asChild,
-          autocomplete: isOtpMode.value ? 'one-time-code' : 'false',
-          type: isPasswordMode.value ? 'password' : 'text',
-          inputmode: context.isNumericMode.value ? 'numeric' : 'text',
-          pattern: context.isNumericMode.value ? '[0-9]*' : undefined,
-          placeholder: context.placeholder.value,
-          value: currentValue.value,
-          disabled: disabled.value,
-          'data-disabled': disabled.value ? '' : undefined,
-          'data-complete': context.isCompleted.value ? '' : undefined,
-          'aria-label': pinInputLabel(props.index, inputElements.value.length),
-          onInput,
-          onKeydown,
-          onFocus: handleFocus,
-          onBlur: updatePlaceholder,
-          onPaste: handlePaste,
-          onCompositionstart: handleCompositionStart,
-          onCompositionend: handleCompositionEnd,
-        },
-        { default: withCtx(() => [renderSlot(slots, 'default')]) },
-      )
-  },
-})

package/src/primitives/pin-input/PinInputRoot.ts

@@ -1,136 +0,0 @@
-import {
-  computed,
-  defineComponent,
-  h,
-  mergeProps,
-  ref,
-  renderSlot,
-  toRefs,
-  watch,
-  withCtx,
-  type PropType,
-} from 'vue'
-import {
-  isPinInputComplete,
-  pinInputValues,
-  type PinInputValue,
-} from '../../../../shared/src/primitives/pin-input'
-import { Primitive, type PrimitiveProps } from '../primitive'
-import { useDirection, type Direction } from '../utils/useDirection'
-import { useForwardExpose } from '../utils/useForwardExpose'
-import { useVModel } from '../utils/useVModel'
-import { VisuallyHiddenInput } from '../visually-hidden'
-import { providePinInputRootContext, type PinInputType } from './context'
-
-export interface PinInputRootProps {
-  modelValue?: PinInputValue | null
-  defaultValue?: PinInputValue
-  placeholder?: string
-  mask?: boolean
-  otp?: boolean
-  type?: PinInputType
-  dir?: Direction
-  disabled?: boolean
-  id?: string
-  asChild?: boolean
-  as?: PrimitiveProps['as']
-  name?: string
-  required?: boolean
-}
-
-export type PinInputRootEmits = {
-  'update:modelValue': [value: PinInputValue]
-  complete: [value: PinInputValue]
-}
-
-export const PinInputRoot = defineComponent({
-  name: 'PinInputRoot',
-  inheritAttrs: false,
-  props: {
-    modelValue: { type: null as unknown as PropType<PinInputValue | null>, required: false },
-    defaultValue: { type: null as unknown as PropType<PinInputValue>, required: false },
-    placeholder: { type: String, required: false, default: '' },
-    mask: { type: Boolean, required: false },
-    otp: { type: Boolean, required: false },
-    type: { type: null as unknown as PropType<PinInputType>, required: false, default: 'text' },
-    dir: { type: String as PropType<Direction>, required: false },
-    disabled: { type: Boolean, required: false },
-    id: { type: String, required: false },
-    asChild: { type: Boolean, required: false },
-    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
-    name: { type: String, required: false },
-    required: { type: Boolean, required: false },
-  },
-  emits: ['update:modelValue', 'complete'],
-  setup(props, { emit, attrs, slots }) {
-    const { mask, otp, placeholder, type, disabled, dir: propDir } = toRefs(props)
-    const { forwardRef } = useForwardExpose()
-    const dir = useDirection(propDir)
-    const modelValue = useVModel(
-      props,
-      'modelValue',
-      (_, value) => emit('update:modelValue', value as PinInputValue),
-      { defaultValue: props.defaultValue ?? [], passive: true },
-    )
-    const currentModelValue = computed(() => pinInputValues(modelValue.value))
-    const inputElements = ref(new Set<HTMLInputElement>())
-    function onInputElementChange(element: HTMLInputElement) {
-      inputElements.value.add(element)
-    }
-    const isNumericMode = computed(() => props.type === 'number')
-    const isCompleted = computed(() =>
-      isPinInputComplete(currentModelValue.value, inputElements.value.size, isNumericMode.value),
-    )
-    watch(
-      modelValue,
-      () => {
-        if (isCompleted.value) emit('complete', modelValue.value as PinInputValue)
-      },
-      { deep: true },
-    )
-
-    providePinInputRootContext({
-      modelValue: modelValue as never,
-      currentModelValue,
-      mask,
-      otp,
-      placeholder,
-      type,
-      dir,
-      disabled,
-      isCompleted,
-      inputElements: inputElements as never,
-      onInputElementChange,
-      isNumericMode,
-    })
-
-    const onFocus = () => Array.from(inputElements.value)?.[0]?.focus()
-
-    return () =>
-      h(
-        Primitive,
-        mergeProps(attrs, {
-          ref: forwardRef,
-          dir: dir.value,
-          'data-complete': isCompleted.value ? '' : undefined,
-          'data-disabled': disabled.value ? '' : undefined,
-        }),
-        {
-          default: withCtx(() => [
-            renderSlot(slots, 'default', { modelValue: modelValue.value }),
-            h(VisuallyHiddenInput, {
-              id: props.id,
-              as: 'input',
-              feature: 'focusable',
-              tabindex: '-1',
-              value: currentModelValue.value.join(''),
-              name: props.name ?? '',
-              disabled: disabled.value,
-              required: props.required,
-              onFocus,
-            }),
-          ]),
-        },
-      )
-  },
-})

package/src/primitives/pin-input/context.ts

@@ -1,24 +0,0 @@
-import type { ComputedRef, Ref } from 'vue'
-import type { PinInputValue } from '../../../../shared/src/primitives/pin-input'
-import { createContext } from '../utils/createContext'
-import type { Direction } from '../utils/useDirection'
-
-export type PinInputType = 'text' | 'number'
-
-export interface PinInputRootContext {
-  modelValue: Ref<PinInputValue>
-  currentModelValue: ComputedRef<PinInputValue>
-  mask: Ref<boolean>
-  otp: Ref<boolean>
-  placeholder: Ref<string>
-  type: Ref<PinInputType>
-  dir: Ref<Direction>
-  disabled: Ref<boolean>
-  isCompleted: ComputedRef<boolean>
-  inputElements?: Ref<Set<HTMLInputElement>>
-  onInputElementChange: (element: HTMLInputElement) => void
-  isNumericMode: ComputedRef<boolean>
-}
-
-export const [injectPinInputRootContext, providePinInputRootContext] =
-  createContext<PinInputRootContext>('PinInputRoot')

package/src/primitives/pin-input/index.ts

@@ -1,3 +0,0 @@
-export { injectPinInputRootContext, type PinInputRootContext, type PinInputType } from './context'
-export { PinInputInput, type PinInputInputProps } from './PinInputInput'
-export { PinInputRoot, type PinInputRootEmits, type PinInputRootProps } from './PinInputRoot'