@hina-ui/vue 1.7.11 → 1.7.13

package/src/components/image/composables/useImage.ts

@@ -1,5 +1,6 @@
 import { computed, nextTick, onMounted, shallowRef, watch, type ComponentPublicInstance } from 'vue'
 import { useIntersectionObserver } from '@vueuse/core'
+import { cssTimeToMs } from '../../../../../shared/src/lib/css-time'
 import { useImageResolver } from '../resolver'
 
 function ready(img: HTMLImageElement): Promise<void> {
@@ -75,7 +76,7 @@ export function useImage(
     const style = getComputedStyle(el)
     try {
       return el.animate(frames, {
-        duration: Number.parseFloat(style.getPropertyValue('--hn-duration-fast')) || 0,
+        duration: cssTimeToMs(style.getPropertyValue('--hn-duration-fast')),
         easing: style.getPropertyValue('--hn-ease-enter').trim() || 'linear',
         fill: 'forwards',
       })

package/src/components/lightbox/Lightbox.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
   import { computed, onMounted, shallowRef, watch } from 'vue'
-  import { DialogRoot, DialogPortal, DialogContent, DialogTitle, useBodyScrollLock } from 'reka-ui'
+  import { DialogRoot, DialogPortal, DialogContent, DialogTitle } from '../../primitives/dialog'
+  import { useBodyScrollLock } from '../../primitives/utils/useBodyScrollLock'
   import { Motion } from 'motion-v'
   import { cn } from '../../lib/cn'
   import VisuallyHidden from '../visually-hidden/VisuallyHidden.vue'

package/src/components/lightbox/LightboxChrome.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { DialogClose } from 'reka-ui'
+  import { DialogClose } from '../../primitives/dialog'
   import { Motion, type MotionValue } from 'motion-v'
   import { ChevronLeft, ChevronRight } from '@lucide/vue'
   import { useUiLocale } from '../../locale'

package/src/components/listbox/Listbox.vue

@@ -5,7 +5,7 @@
     ListboxGroupLabel,
     ListboxItem,
     ListboxRoot,
-  } from 'reka-ui'
+  } from '../../primitives/listbox'
   import { cn } from '../../lib/cn'
   import { useFieldControl } from '../form-field/context'
   import { useUiLocale } from '../../locale'

package/src/components/listbox/ListboxOptionContent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts" generic="T extends SelectOption = SelectOption">
   import { Check } from '@lucide/vue'
-  import { injectListboxItemContext, ListboxItemIndicator } from 'reka-ui'
+  import { injectListboxItemContext, ListboxItemIndicator } from '../../primitives/listbox'
   import type { SelectOption } from '../select/types'
 
   defineOptions({ name: 'HnListboxOptionContent', inheritAttrs: false })

package/src/components/menubar/Menubar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { MenubarRoot } from 'reka-ui'
+  import { MenubarRoot } from '../../primitives/menubar'
   import { cn } from '../../lib/cn'
   import { menubarRoot } from './menubar.variants'
 

package/src/components/menubar/MenubarCheckboxItem.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { Check } from '@lucide/vue'
-  import { MenubarCheckboxItem, MenubarItemIndicator } from 'reka-ui'
+  import { MenubarCheckboxItem, MenubarItemIndicator } from '../../primitives/menubar'
   import { cn } from '../../lib/cn'
   import { dropdownItem } from '../dropdown-menu/dropdown-menu.variants'
 

package/src/components/menubar/MenubarGroup.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { MenubarGroup } from 'reka-ui'
+  import { MenubarGroup } from '../../primitives/menubar'
   import { cn } from '../../lib/cn'
 
   defineOptions({ name: 'HnMenubarGroup' })

package/src/components/menubar/MenubarItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { MenubarItem } from 'reka-ui'
+  import { MenubarItem } from '../../primitives/menubar'
   import { cn } from '../../lib/cn'
   import { dropdownItem, type DropdownItemVariants } from '../dropdown-menu/dropdown-menu.variants'
 

package/src/components/menubar/MenubarLabel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { MenubarLabel } from 'reka-ui'
+  import { MenubarLabel } from '../../primitives/menubar'
   import { cn } from '../../lib/cn'
 
   defineOptions({ name: 'HnMenubarLabel' })

package/src/components/menubar/MenubarMenu.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
   import { shallowRef } from 'vue'
-  import { MenubarContent, MenubarMenu, MenubarPortal, MenubarTrigger } from 'reka-ui'
+  import {
+    MenubarContent,
+    MenubarMenu,
+    MenubarPortal,
+    MenubarTrigger,
+  } from '../../primitives/menubar'
   import { cn } from '../../lib/cn'
   import Card from '../card/Card.vue'
   import { menubarContent, menubarTrigger } from './menubar.variants'

package/src/components/menubar/MenubarRadioGroup.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { MenubarRadioGroup } from 'reka-ui'
+  import { MenubarRadioGroup } from '../../primitives/menubar'
 
   defineOptions({ name: 'HnMenubarRadioGroup' })
 

package/src/components/menubar/MenubarRadioItem.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { Check } from '@lucide/vue'
-  import { MenubarItemIndicator, MenubarRadioItem } from 'reka-ui'
+  import { MenubarItemIndicator, MenubarRadioItem } from '../../primitives/menubar'
   import { cn } from '../../lib/cn'
   import { dropdownItem } from '../dropdown-menu/dropdown-menu.variants'
 

package/src/components/menubar/MenubarSeparator.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { MenubarSeparator } from 'reka-ui'
+  import { MenubarSeparator } from '../../primitives/menubar'
   import { cn } from '../../lib/cn'
 
   defineOptions({ name: 'HnMenubarSeparator' })

package/src/components/menubar/MenubarSub.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
   import { ChevronRight } from '@lucide/vue'
-  import { MenubarPortal, MenubarSub, MenubarSubContent, MenubarSubTrigger } from 'reka-ui'
+  import {
+    MenubarPortal,
+    MenubarSub,
+    MenubarSubContent,
+    MenubarSubTrigger,
+  } from '../../primitives/menubar'
   import Card from '../card/Card.vue'
   import { cn } from '../../lib/cn'
   import { dropdownItem } from '../dropdown-menu/dropdown-menu.variants'

package/src/components/multi-combobox/MultiCombobox.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts" generic="T extends SelectOption = SelectOption">
   import { computed } from 'vue'
-  import { ComboboxAnchor, ComboboxInput, ComboboxRoot, ComboboxTrigger } from 'reka-ui'
+  import {
+    ComboboxAnchor,
+    ComboboxInput,
+    ComboboxRoot,
+    ComboboxTrigger,
+  } from '../../primitives/combobox'
   import { cn } from '../../lib/cn'
   import type { VirtualizeOptions } from '../../lib/virtual/types'
   import { useFieldControl } from '../form-field/context'

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

@@ -1,6 +1,6 @@
 <script setup lang="ts" generic="T extends SelectOption = SelectOption">
   import { computed, ref } from 'vue'
-  import { SelectRoot, SelectTrigger } from 'reka-ui'
+  import { SelectRoot, SelectTrigger } from '../../primitives/select'
   import { VisuallyHidden } from '../../primitives/visually-hidden'
   import { cn } from '../../lib/cn'
   import type { VirtualizeOptions } from '../../lib/virtual/types'

package/src/components/nav-link/NavLink.vue

@@ -4,12 +4,17 @@
   import { Passthrough } from '../../lib/passthrough'
   import Tooltip from '../tooltip/Tooltip.vue'
   import { useInSidebar, useSidebar } from '../sidebar/context'
-  import { navLink, navLinkLabel } from './nav-link.variants'
+  import { navLink, navLinkLabel, navLinkTrailing } from './nav-link.variants'
   import type { PrimitiveProps } from '../../primitives/primitive'
   import { Primitive } from '../../primitives/primitive'
   import NavLinkChild from './NavLinkChild'
 
   defineOptions({ name: 'HnNavLink', inheritAttrs: false })
+  defineSlots<{
+    default?(): unknown
+    icon?(): unknown
+    trailing?(): unknown
+  }>()
 
   const props = withDefaults(
     defineProps<
@@ -38,13 +43,22 @@
     class: cn(navLink({ active: props.active }), props.class),
   }))
 
-  const labelProps = computed(() => ({
+  const collapsedProps = computed(() => ({
     'aria-hidden': rail.value ? ('true' as const) : undefined,
     inert: rail.value,
     'data-collapsed': rail.value ? '' : undefined,
+  }))
+
+  const labelProps = computed(() => ({
+    ...collapsedProps.value,
     'data-hn-label': '',
     class: navLinkLabel(),
   }))
+
+  const trailingProps = computed(() => ({
+    ...collapsedProps.value,
+    class: navLinkTrailing(),
+  }))
 </script>
 
 <template>
@@ -54,8 +68,10 @@
       v-bind="{ ...$attrs, ...linkProps }"
       :as="props.as"
       :label-props="labelProps"
+      :trailing-props="trailingProps"
     >
       <template v-if="$slots.icon" #icon><slot name="icon" /></template>
+      <template v-if="$slots.trailing" #trailing><slot name="trailing" /></template>
       <slot />
     </NavLinkChild>
     <Primitive
@@ -80,6 +96,9 @@
       >
         <slot />
       </span>
+      <span v-if="$slots.trailing" v-bind="trailingProps">
+        <slot name="trailing" />
+      </span>
     </Primitive>
   </Wrapper>
 </template>

package/src/components/nav-link/NavLinkChild.ts

@@ -22,11 +22,13 @@ export default defineComponent({
   props: {
     as: { type: [String, Object] as PropType<PrimitiveProps['as']>, default: 'a' },
     labelProps: { type: Object as PropType<Record<string, unknown>>, required: true },
+    trailingProps: { type: Object as PropType<Record<string, unknown>>, required: true },
   },
   setup(props, { attrs, slots }) {
     const inner = (content: Content) => [
       ...(slots.icon?.() ?? []),
       h('span', props.labelProps, content ?? undefined),
+      ...(slots.trailing ? [h('span', props.trailingProps, slots.trailing())] : []),
     ]
 
     return () => {

package/src/components/navigation-menu/NavigationMenu.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
   import { computed, toRef } from 'vue'
-  import { NavigationMenuRoot, NavigationMenuList, NavigationMenuViewport } from 'reka-ui'
+  import {
+    NavigationMenuRoot,
+    NavigationMenuList,
+    NavigationMenuViewport,
+  } from '../../primitives/navigation-menu'
   import { cn } from '../../lib/cn'
   import { rekaNavigationViewportStyle } from '../../lib/reka/styles'
   import { useRekaNavigationViewport } from '../../lib/reka/navigation-viewport'

package/src/components/navigation-menu/NavigationMenuContent.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
   import {
     NavigationMenuContent as RekaNavigationMenuContent,
-    useForwardPropsEmits,
     type NavigationMenuContentEmits,
-  } from 'reka-ui'
+  } from '../../primitives/navigation-menu'
+  import { useForwardPropsEmits } from '../../primitives/utils/useForwardPropsEmits'
   import { cn } from '../../lib/cn'
   import { navigationMenuContent } from './navigation-menu.variants'
 

package/src/components/navigation-menu/NavigationMenuItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { NavigationMenuItem as RekaNavigationMenuItem } from 'reka-ui'
+  import { NavigationMenuItem as RekaNavigationMenuItem } from '../../primitives/navigation-menu'
 
   defineOptions({ name: 'HnNavigationMenuItem' })
   const props = defineProps<{ value?: string }>()

package/src/components/navigation-menu/NavigationMenuLink.vue

@@ -2,7 +2,7 @@
   import {
     NavigationMenuLink as RekaNavigationMenuLink,
     type NavigationMenuLinkEmits,
-  } from 'reka-ui'
+  } from '../../primitives/navigation-menu'
   import { cn } from '../../lib/cn'
   import { useNavigationMenu } from './context'
   import {

package/src/components/navigation-menu/NavigationMenuTrigger.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { NavigationMenuTrigger as RekaNavigationMenuTrigger } from 'reka-ui'
+  import { NavigationMenuTrigger as RekaNavigationMenuTrigger } from '../../primitives/navigation-menu'
   import { cn } from '../../lib/cn'
   import DisclosureIcon from '../disclosure-icon/DisclosureIcon.vue'
   import { useNavigationMenu } from './context'

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
   import { computed } from 'vue'
   import { ChevronDown, ChevronUp } from '@lucide/vue'
-  import { useForwardPropsEmits } from 'reka-ui'
+  import { useForwardPropsEmits } from '../../primitives/utils/useForwardPropsEmits'
   import {
     NumberFieldDecrement,
     NumberFieldIncrement,

package/src/components/pagination/PaginationPopup.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { type ComponentPublicInstance } from 'vue'
-  import { PopoverRoot, PopoverPortal } from 'reka-ui'
+  import { PopoverRoot, PopoverPortal } from '../../primitives/popover'
   import PopoverContent from '../popover/PopoverContent.vue'
   import Card from '../card/Card.vue'
   import Button from '../button/Button.vue'

package/src/components/pin-input/PinInput.vue

@@ -1,12 +1,24 @@
 <script setup lang="ts">
-  import { PinInputInput, PinInputRoot } from '../../primitives/pin-input'
-  import { computed } from 'vue'
+  import { computed, onBeforeUnmount, onMounted, shallowRef, toRef, useAttrs, watch } from 'vue'
   import { cn } from '../../lib/cn'
   import { useFieldControl } from '../form-field/context'
-  import { useUiLocale } from '../../locale'
-  import { pinInput, pinInputCell, type PinInputVariants } from './pin-input.variants'
+  import { useDirection } from '../../primitives/utils/useDirection'
+  import {
+    createPinInput,
+    pinCells,
+    pinInputValue,
+    type PinInputController,
+    type PinInputSelection,
+  } from '../../../../shared/src/primitives/pin-input'
+  import {
+    pinInput,
+    pinInputCaret,
+    pinInputCell,
+    pinInputNative,
+    type PinInputVariants,
+  } from './pin-input.variants'
 
-  defineOptions({ name: 'HnPinInput' })
+  defineOptions({ name: 'HnPinInput', inheritAttrs: false })
 
   const props = withDefaults(
     defineProps<{
@@ -20,6 +32,8 @@
       size?: PinInputVariants['size']
       disabled?: boolean
       invalid?: boolean
+      required?: boolean
+      dir?: 'ltr' | 'rtl'
       class?: string
     }>(),
     { length: 6, type: 'text', placeholder: '' },
@@ -29,47 +43,103 @@
 
   const model = defineModel<string>({ default: '' })
 
-  const t = useUiLocale()
-
-  const { labelledBy, invalid, disabled, describedBy } = useFieldControl({
+  const attrs = useAttrs()
+  const dir = useDirection(toRef(props, 'dir'))
+  const { id, labelledBy, invalid, disabled, describedBy } = useFieldControl({
     invalid: () => props.invalid,
     disabled: () => props.disabled,
   })
 
-  const cells = computed(() => Array.from({ length: props.length }, (_, i) => model.value[i] ?? ''))
+  const root = shallowRef<HTMLElement | null>(null)
+  const input = shallowRef<HTMLInputElement | null>(null)
+  const selection = shallowRef<PinInputSelection>({ focused: false, start: 0, end: 0 })
+  const shown = computed(() => pinInputValue(model.value ?? '', props.length))
+  const cells = computed(() => pinCells(shown.value, props.length, selection.value))
+  const rest = computed(() => {
+    const {
+      id: _id,
+      autofocus: _autofocus,
+      'aria-label': _label,
+      'aria-labelledby': _labelledBy,
+      'aria-describedby': _describedBy,
+      ...other
+    } = attrs
+    return other
+  })
+
+  let controller: PinInputController | undefined
+
+  onMounted(() => {
+    controller = createPinInput(input.value!, {
+      length: () => props.length,
+      numeric: () => props.type === 'number',
+      value: () => model.value ?? '',
+      rtl: () => dir.value === 'rtl',
+      cells: () => root.value!.querySelectorAll('[data-hn-pin-cell]'),
+      change: value => {
+        model.value = value
+      },
+      select: value => {
+        selection.value = value
+      },
+    })
+  })
+  onBeforeUnmount(() => controller?.dispose())
 
-  function update(value: (string | number)[] | undefined) {
-    const next = (value ?? []).map(cell => (cell === undefined ? '' : String(cell))).join('')
-    if (next !== model.value) model.value = next
-  }
+  watch([shown, () => props.type], () => controller?.sync(), { flush: 'post' })
+  watch(model, value => {
+    if ((value ?? '').length >= props.length) emit('complete', pinInputValue(value, props.length))
+  })
 </script>
 
 <template>
-  <PinInputRoot
-    role="group"
-    :aria-labelledby="labelledBy"
-    :aria-describedby="describedBy"
-    :model-value="cells"
-    :type="props.type"
-    :mask="props.mask"
-    :otp="props.otp"
-    :placeholder="props.placeholder"
-    :name="props.name"
-    :disabled="disabled"
+  <div
+    v-bind="rest"
+    ref="root"
+    :dir="dir"
     data-hn-pin-input
+    data-hn-field-group
+    :data-complete="shown.length >= props.length ? '' : undefined"
+    :data-disabled="disabled ? '' : undefined"
     :data-invalid="invalid ? '' : undefined"
-    :class="cn(pinInput(), props.class)"
-    @update:model-value="update"
-    @complete="value => emit('complete', value.map(String).join(''))"
+    :class="cn(pinInput({ size: props.size }), props.class)"
   >
-    <PinInputInput
-      v-for="index in props.length"
+    <div
+      v-for="(cell, index) in cells"
       :key="index"
-      :index="index - 1"
-      :aria-label="t.pinInput.cellLabel(index, props.length)"
-      :aria-invalid="invalid || undefined"
+      data-hn-pin-cell
+      aria-hidden="true"
+      :data-filled="cell.char ? '' : undefined"
+      :data-state="cell.active ? 'active' : undefined"
+      :data-disabled="disabled ? '' : undefined"
       :data-invalid="invalid ? '' : undefined"
       :class="pinInputCell({ variant: props.variant, size: props.size })"
+    >
+      <span v-if="cell.caret" :class="pinInputCaret()" />
+      <template v-else>
+        {{ cell.char ? (props.mask ? '•' : cell.char) : props.placeholder }}
+      </template>
+    </div>
+    <input
+      :id="id"
+      ref="input"
+      :type="props.mask ? 'password' : 'text'"
+      :name="props.name"
+      :value.attr="shown"
+      :inputmode="props.type === 'number' ? 'numeric' : 'text'"
+      :pattern="props.type === 'number' ? '[0-9]*' : undefined"
+      :autocomplete="props.otp ? 'one-time-code' : 'off'"
+      autocapitalize="none"
+      autocorrect="off"
+      spellcheck="false"
+      :autofocus="(attrs.autofocus as boolean | undefined) || undefined"
+      :disabled="disabled"
+      :required="props.required || undefined"
+      :aria-label="attrs['aria-label'] as string | undefined"
+      :aria-labelledby="labelledBy"
+      :aria-describedby="describedBy"
+      :aria-invalid="invalid || undefined"
+      :class="pinInputNative()"
     />
-  </PinInputRoot>
+  </div>
 </template>

package/src/components/popconfirm/Popconfirm.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
   import { computed, ref, useId } from 'vue'
-  import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka-ui'
+  import {
+    PopoverContent,
+    PopoverPortal,
+    PopoverRoot,
+    PopoverTrigger,
+  } from '../../primitives/popover'
   import { cn } from '../../lib/cn'
   import { useUiLocale } from '../../locale'
   import Button from '../button/Button.vue'

package/src/components/popover/Popover.vue

@@ -1,7 +1,12 @@
 <script setup lang="ts">
   import type { OverlayAnchor, OverlayPositionStrategy } from '../../lib/overlay-anchor'
   import { computed } from 'vue'
-  import { PopoverRoot, PopoverTrigger, PopoverPortal, type PopoverContentEmits } from 'reka-ui'
+  import {
+    PopoverRoot,
+    PopoverTrigger,
+    PopoverPortal,
+    type PopoverContentEmits,
+  } from '../../primitives/popover'
   import PopoverContent from './PopoverContent.vue'
   import { useAnchoredOverlay } from '../../lib/anchored-overlay'
   import Card from '../card/Card.vue'

package/src/components/popover/PopoverContent.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
   import {
     PopoverContent,
-    useForwardPropsEmits,
     type PopoverContentProps,
     type PopoverContentEmits,
-  } from 'reka-ui'
+  } from '../../primitives/popover'
+  import { useForwardPropsEmits } from '../../primitives/utils/useForwardPropsEmits'
   import { usePopoverCloseFocus } from './composables/usePopoverCloseFocus'
 
   defineOptions({ name: 'HnPopoverContent' })

package/src/components/popover/composables/usePopoverCloseFocus.ts

@@ -1,5 +1,5 @@
 import { nextTick } from 'vue'
-import { injectPopoverRootContext } from 'reka-ui'
+import { injectPopoverRootContext } from '../../../primitives/popover'
 
 export function usePopoverCloseFocus(emit: (event: 'closeAutoFocus', value: Event) => void) {
   const root = injectPopoverRootContext()

package/src/components/range-calendar/RangeCalendar.vue

@@ -12,7 +12,7 @@
     RangeCalendarPrev,
     RangeCalendarRoot,
     type DateRange,
-  } from 'reka-ui'
+  } from '../../primitives/range-calendar'
   import { getLocalTimeZone, today, type DateValue } from '@internationalized/date'
   import { cn } from '../../lib/cn'
   import {

package/src/components/select/Select.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts" generic="T extends SelectOption = SelectOption">
   import { computed, ref, shallowRef } from 'vue'
-  import { SelectRoot, SelectTrigger, useDirection } from 'reka-ui'
+  import { SelectRoot, SelectTrigger } from '../../primitives/select'
+  import { useDirection } from '../../primitives/utils/useDirection'
   import { cn } from '../../lib/cn'
   import type { VirtualizeOptions } from '../../lib/virtual/types'
   import { useUiLocale } from '../../locale'

package/src/components/select/SelectList.vue

@@ -8,7 +8,7 @@
     SelectItemText,
     SelectLabel,
     SelectPortal,
-  } from 'reka-ui'
+  } from '../../primitives/select'
   import { ref } from 'vue'
   import VirtualChoices from '../virtual-list/VirtualChoices.vue'
   import type { VirtualizeOptions } from '../../lib/virtual/types'

package/src/components/sheet/Sheet.vue

@@ -9,7 +9,7 @@
     DialogRoot,
     DialogTitle,
     DialogTrigger,
-  } from 'reka-ui'
+  } from '../../primitives/dialog'
   import { useOverlayPortal } from '../../lib/overlay-portal'
   import { useScrollViewport } from '../../lib/scroll-viewport'
   import { cn } from '../../lib/cn'

package/src/components/slider/SliderHandle.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { injectTooltipProviderContext } from 'reka-ui'
+  import { injectTooltipProviderContext } from '../../primitives/tooltip'
   import { SliderThumb } from '../../primitives/slider'
   import { rekaSliderThumbStyle } from '../../lib/reka/styles'
   import Tooltip from '../tooltip/Tooltip.vue'

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { TagsInputInput, TagsInputItem, TagsInputRoot } from 'reka-ui'
+  import { TagsInputInput, TagsInputItem, TagsInputRoot } from '../../primitives/tags-input'
   import { computed } from 'vue'
   import { cn } from '../../lib/cn'
   import { useFieldControl } from '../form-field/context'

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { TagsInputItemText } from 'reka-ui'
+  import { TagsInputItemText } from '../../primitives/tags-input'
   import Chip from '../chip/Chip.vue'
   import type { ChipVariants } from '../chip/chip.variants'
   import { tagsInputChip } from './tags-input.variants'

package/src/components/time/Time.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { computed } from 'vue'
-  import { injectTooltipProviderContext } from 'reka-ui'
+  import { injectTooltipProviderContext } from '../../primitives/tooltip'
   import { cn } from '../../lib/cn'
   import { devWarn } from '../../lib/dev'
   import { useUiLocale } from '../../locale'

package/src/components/time-field/TimeField.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { computed, shallowRef, useSlots } from 'vue'
-  import { TimeFieldInput, TimeFieldRoot, type TimeValue } from 'reka-ui'
+  import { TimeFieldInput, TimeFieldRoot, type TimeValue } from '../../primitives/time-field'
   import { cn } from '../../lib/cn'
   import { formatTimeValue, parseTimeValue, type TimeGranularity } from '../../lib/date'
   import { useUiLocale } from '../../locale'