@hina-ui/vue 1.7.12 → 1.7.13

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/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'

package/src/components/toast/Toaster.vue

@@ -7,7 +7,7 @@
     ToastTitle,
     ToastDescription,
     ToastClose,
-  } from 'reka-ui'
+  } from '../../primitives/toast'
   import { CircleCheck, CircleX, TriangleAlert, Info } from '@lucide/vue'
   import Button from '../button/Button.vue'
   import CloseButton from '../close-button/CloseButton.vue'

package/src/components/toggle/Toggle.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { injectTooltipProviderContext } from 'reka-ui'
+  import { injectTooltipProviderContext } from '../../primitives/tooltip'
   import { Toggle as ToggleRoot } from '../../primitives/toggle'
   import { computed, useSlots } from 'vue'
   import { cn } from '../../lib/cn'

package/src/components/toolbar/ToolbarControl.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { injectTooltipProviderContext } from 'reka-ui'
+  import { injectTooltipProviderContext } from '../../primitives/tooltip'
   import { Passthrough } from '../../lib/passthrough'
   import Button from '../button/Button.vue'
   import Tooltip from '../tooltip/Tooltip.vue'

package/src/components/tooltip/Tooltip.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { TooltipRoot, TooltipTrigger } from 'reka-ui'
+  import { TooltipRoot, TooltipTrigger } from '../../primitives/tooltip'
   import TooltipBubble from './TooltipBubble.vue'
   import type { TooltipProps } from './types'
 

package/src/components/tooltip/TooltipBubble.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { TooltipPortal, TooltipContent, TooltipArrow } from 'reka-ui'
+  import { TooltipPortal, TooltipContent, TooltipArrow } from '../../primitives/tooltip'
   import { cn } from '../../lib/cn'
   import type { TooltipProps } from './types'
 

package/src/components/tooltip/TooltipDirectiveRoot.ts

@@ -4,7 +4,7 @@ import {
   TooltipRoot,
   injectTooltipProviderContext,
   injectTooltipRootContext,
-} from 'reka-ui'
+} from '../../primitives/tooltip'
 import TooltipBubble from './TooltipBubble.vue'
 import { useTooltipTarget } from './composables/useTooltipTarget'
 import type { TooltipDirectiveOptions } from './types'

package/src/components/tooltip/TooltipProvider.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { TooltipProvider as RekaTooltipProvider } from 'reka-ui'
+  import { TooltipProvider as RekaTooltipProvider } from '../../primitives/tooltip'
 
   defineOptions({ name: 'HnTooltipProvider' })
 

package/src/components/tooltip/composables/useTooltipTarget.ts

@@ -1,6 +1,6 @@
 import { onScopeDispose, watch, watchPostEffect } from 'vue'
 import { useEventListener } from '@vueuse/core'
-import { injectTooltipProviderContext, injectTooltipRootContext } from 'reka-ui'
+import { injectTooltipProviderContext, injectTooltipRootContext } from '../../../primitives/tooltip'
 
 type Handler = (event: Event) => void