@hina-ui/vue 1.7.6 → 1.7.8

package/src/components/panel/Panel.vue

@@ -25,7 +25,7 @@
 
 <template>
   <Card data-hn-panel :padded="false" :class="cn('flex flex-col', props.class)">
-    <div :class="panelHeader()">
+    <div :class="panelHeader({ bodiless: !slots.default })">
       <div class="flex min-w-0 flex-col gap-1">
         <div :class="panelTitle()">
           <span v-if="slots.icon" :class="panelIcon()" aria-hidden="true">

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

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

package/src/components/prev-next/PrevNextLink.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-  import { Primitive, type PrimitiveProps } from 'reka-ui'
   import { ArrowLeft, ArrowRight } from '@lucide/vue'
   import Ripple from '../ripple/Ripple.vue'
   import { cn } from '../../lib/cn'
   import { useUiLocale } from '../../locale'
   import { prevNextLink, prevNextEyebrow, type PrevNextVariants } from './prev-next.variants'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnPrevNextLink', inheritAttrs: false })
 

package/src/components/progress/Progress.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { ProgressIndicator, ProgressRoot } from 'reka-ui'
+  import { ProgressIndicator, ProgressRoot } from '../../primitives/progress'
   import { cn } from '../../lib/cn'
   import { useProgressValue, type ProgressFormat } from './composables/useProgressValue'
   import {

package/src/components/prose/Prose.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-  import { Primitive, type PrimitiveProps } from 'reka-ui'
   import { cn } from '../../lib/cn'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnProse' })
 

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

@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="T extends SelectOption = SelectOption">
-  import { RadioGroupItem, RadioGroupRoot } from 'reka-ui'
+  import { RadioGroupItem, RadioGroupRoot } from '../../primitives/radio-group'
   import { cn } from '../../lib/cn'
   import { useFieldControl } from '../form-field/context'
   import {

package/src/components/range-slider/RangeSlider.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { SliderRoot, SliderTrack } from 'reka-ui'
+  import { SliderRoot, SliderTrack } from '../../primitives/slider'
   import { computed, toRef } from 'vue'
   import { cn } from '../../lib/cn'
   import { useFieldControl } from '../form-field/context'

package/src/components/rating/Rating.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { RatingItem, RatingItemIndicator, RatingRoot } from 'reka-ui'
+  import { RatingItem, RatingItemIndicator, RatingRoot } from '../../primitives/rating'
   import { Star } from '@lucide/vue'
   import { cn } from '../../lib/cn'
   import { rekaRatingStepStyle } from '../../lib/reka/styles'

package/src/components/ring-progress/RingProgress.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { ProgressRoot } from 'reka-ui'
+  import { ProgressRoot } from '../../primitives/progress'
   import { computed, useSlots } from 'vue'
   import { cn } from '../../lib/cn'
   import { useProgressValue, type ProgressFormat } from '../progress/composables/useProgressValue'

package/src/components/section/Section.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import { computed, useAttrs, useId } from 'vue'
   import { cn } from '../../lib/cn'
   import Heading from '../heading/Heading.vue'
 
@@ -9,11 +10,21 @@
     id?: string
     class?: string
   }>()
+
+  const attrs = useAttrs()
+  const headingId = useId()
+  const labelledBy = computed(() =>
+    props.title && !attrs['aria-label'] && !attrs['aria-labelledby'] ? headingId : undefined,
+  )
 </script>
 
 <template>
-  <section :id="props.id" :class="cn('flex scroll-mt-6 flex-col gap-4', props.class)">
-    <Heading v-if="props.title" :level="2">{{ props.title }}</Heading>
+  <section
+    :id="props.id"
+    :aria-labelledby="labelledBy"
+    :class="cn('flex scroll-mt-6 flex-col gap-4', props.class)"
+  >
+    <Heading v-if="props.title" :id="headingId" :level="2">{{ props.title }}</Heading>
     <slot />
   </section>
 </template>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts" generic="T extends SelectOption = SelectOption">
-  import { ToggleGroupItem, ToggleGroupRoot, type AcceptableValue } from 'reka-ui'
+  import { ToggleGroupItem, ToggleGroupRoot } from '../../primitives/toggle-group'
+  import type { AcceptableValue } from '../../primitives/utils/types'
   import { computed, useId, useSlots } from 'vue'
   import { cn } from '../../lib/cn'
   import { useFieldControl } from '../form-field/context'

package/src/components/sheet/Sheet.vue

@@ -13,6 +13,7 @@
   import { useOverlayPortal } from '../../lib/overlay-portal'
   import { useScrollViewport } from '../../lib/scroll-viewport'
   import { cn } from '../../lib/cn'
+  import { provideFormScope } from '../form/scope'
   import Card from '../card/Card.vue'
   import CloseButton from '../close-button/CloseButton.vue'
   import Heading from '../heading/Heading.vue'
@@ -36,13 +37,16 @@
     { header: true, closable: true, handle: true, locked: false },
   )
 
+  const submitting = provideFormScope()
+  const locked = computed(() => props.locked || submitting.value)
+
   const slots = defineSlots<{
     default?(): unknown
     icon?(): unknown
     title?(): unknown
-    body?(props: { close: () => void }): unknown
-    content?(props: { close: () => void }): unknown
-    footer?(props: { close: () => void }): unknown
+    body?(props: { close: () => void; submitting: boolean }): unknown
+    content?(props: { close: () => void; submitting: boolean }): unknown
+    footer?(props: { close: () => void; submitting: boolean }): unknown
   }>()
 
   const { scrollArea, viewport } = useScrollViewport()
@@ -52,7 +56,7 @@
   const { content: panel, present } = useOverlayPortal(open)
 
   const { dragging, offset, onPointerDown } = useDragToDismiss(() => panel.value?.$el ?? null, {
-    enabled: () => !props.locked,
+    enabled: () => !locked.value,
     open,
     dismiss: () => (open.value = false),
   })
@@ -64,7 +68,7 @@
   )
 
   function guard(event: Event) {
-    if (props.locked) event.preventDefault()
+    if (locked.value) event.preventDefault()
   }
 
   function close() {
@@ -109,7 +113,7 @@
             <div
               v-if="props.handle"
               aria-hidden="true"
-              :data-disabled="props.locked ? '' : undefined"
+              :data-disabled="locked ? '' : undefined"
               :class="sheetHandle({ header: props.header && !slots.body })"
             />
             <div
@@ -136,22 +140,22 @@
                 </DialogDescription>
               </div>
               <DialogClose v-if="!props.handle && props.closable" as-child>
-                <CloseButton :disabled="props.locked" class="-mt-1.5 -me-1.5 shrink-0" />
+                <CloseButton :disabled="locked" class="-mt-1.5 -me-1.5 shrink-0" />
               </DialogClose>
             </div>
           </div>
-          <slot v-if="slots.body" name="body" :close="close" />
+          <slot v-if="slots.body" name="body" :close="close" :submitting="submitting" />
           <template v-else>
             <ScrollArea v-if="$slots.content" ref="scrollArea" class="min-h-0 grow">
               <div class="px-(--hn-panel-p) py-1">
-                <slot name="content" :close="close" />
+                <slot name="content" :close="close" :submitting="submitting" />
               </div>
             </ScrollArea>
             <div
               v-if="$slots.footer"
               class="flex shrink-0 justify-end gap-(--hn-inline-gap) px-(--hn-panel-p)"
             >
-              <slot name="footer" :close="close" />
+              <slot name="footer" :close="close" :submitting="submitting" />
             </div>
           </template>
         </Card>

package/src/components/sidebar/Sidebar.vue

@@ -4,7 +4,7 @@
   import { useUiLocale } from '../../locale'
   import CloseButton from '../close-button/CloseButton.vue'
   import ScrollArea from '../scroll-area/ScrollArea.vue'
-  import { useSidebar, type SidebarState } from './context'
+  import { provideSidebarScope, useSidebar, type SidebarState } from './context'
   import SidebarLabel from './SidebarLabel.vue'
   import {
     sidebarRoot,
@@ -35,6 +35,7 @@
 
   const t = useUiLocale()
   const sidebar = useSidebar()
+  provideSidebarScope()
   const state = computed(() => sidebar?.state.value ?? 'expanded')
   const inDrawer = computed(() => sidebar?.inDrawer ?? false)
 </script>

package/src/components/sidebar/context.ts

@@ -11,6 +11,7 @@ export interface SidebarContext {
 }
 
 const SIDEBAR_KEY = Symbol('hn-sidebar') as InjectionKey<SidebarContext>
+const SIDEBAR_SCOPE_KEY = Symbol('hn-sidebar-scope') as InjectionKey<boolean>
 
 export function provideSidebar(context: SidebarContext) {
   provide(SIDEBAR_KEY, context)
@@ -19,3 +20,11 @@ export function provideSidebar(context: SidebarContext) {
 export function useSidebar() {
   return inject(SIDEBAR_KEY, null)
 }
+
+export function provideSidebarScope() {
+  provide(SIDEBAR_SCOPE_KEY, true)
+}
+
+export function useInSidebar() {
+  return inject(SIDEBAR_SCOPE_KEY, false)
+}

package/src/components/slider/Slider.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { SliderRoot, SliderTrack } from 'reka-ui'
+  import { SliderRoot, SliderTrack } from '../../primitives/slider'
   import { computed, toRef } from 'vue'
   import { cn } from '../../lib/cn'
   import { useFieldControl } from '../form-field/context'

package/src/components/slider/SliderHandle.vue

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

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

@@ -1,6 +1,6 @@
 import type { StyleValue } from 'vue'
-import type { PrimitiveProps } from 'reka-ui'
 import type { ButtonVariants } from '../button/button.variants'
+import type { PrimitiveProps } from '../../primitives/primitive'
 
 export interface SplitButtonProps {
   as?: PrimitiveProps['as']

package/src/components/splitter/Splitter.vue

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

package/src/components/splitter/SplitterHandle.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { SplitterResizeHandle } from 'reka-ui'
+  import { SplitterResizeHandle } from '../../primitives/splitter'
   import { cn } from '../../lib/cn'
   import { useUiLocale } from '../../locale'
 

package/src/components/splitter/SplitterPanel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { SplitterPanel as RekaSplitterPanel } from 'reka-ui'
+  import { SplitterPanel as RekaSplitterPanel } from '../../primitives/splitter'
   import { cn } from '../../lib/cn'
 
   defineOptions({ name: 'HnSplitterPanel' })

package/src/components/statistic/Statistic.vue

@@ -60,7 +60,7 @@
     <div :class="statisticBody()">
       <span :class="statisticLabel()">{{ props.label }}</span>
       <span :class="statisticValue({ size: props.size })">
-        <Skeleton v-if="props.loading" class="h-[1.25em] w-24" />
+        <Skeleton v-if="props.loading" class="h-[1lh] w-24" />
         <template v-else>
           <span v-if="props.prefix" :class="statisticAffix()">{{ props.prefix }}</span>
           <NumberFormat
@@ -75,7 +75,7 @@
         </template>
       </span>
       <span v-if="deltaText" :class="statisticDelta({ tone: deltaTone })">
-        <Skeleton v-if="props.loading" class="h-[1.25em] w-16" />
+        <Skeleton v-if="props.loading" class="h-[1lh] w-16" />
         <template v-else>
           <TrendingUp v-if="props.delta! > 0" aria-hidden="true" />
           <TrendingDown v-else-if="props.delta! < 0" aria-hidden="true" />

package/src/components/stepper/Stepper.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="T extends StepperItem = StepperItem">
-  import { StepperRoot } from 'reka-ui'
+  import { StepperRoot } from '../../primitives/stepper'
   import { useId } from 'vue'
   import { cn } from '../../lib/cn'
   import { useDirection } from '../../lib/useDirection'

package/src/components/stepper/StepperStep.vue

@@ -7,7 +7,7 @@
     StepperDescription,
     StepperIndicator,
     StepperSeparator,
-  } from 'reka-ui'
+  } from '../../primitives/stepper'
   import { useUiLocale } from '../../locale'
   import Spinner from '../spinner/Spinner.vue'
   import { stepperIndicator, stepperTrigger } from './stepper.variants'

package/src/components/switch/Switch.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { SwitchRoot } from 'reka-ui'
+  import { SwitchRoot } from '../../primitives/switch'
   import { useSlots } from 'vue'
   import { cn } from '../../lib/cn'
   import { useFieldControl } from '../form-field/context'

package/src/components/tabs/Tabs.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { TabsRoot } from 'reka-ui'
+  import { TabsRoot } from '../../primitives/tabs'
   import { useId } from 'vue'
   import { cn } from '../../lib/cn'
   import { provideTabsStyle } from './context'

package/src/components/tabs/TabsContent.vue

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

package/src/components/tabs/TabsList.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { computed, shallowRef } from 'vue'
-  import { TabsList } from 'reka-ui'
+  import { TabsList } from '../../primitives/tabs'
   import ScrollArea from '../scroll-area/ScrollArea.vue'
   import { cn } from '../../lib/cn'
   import { useTabsStyle } from './context'

package/src/components/tabs/TabsTrigger.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { TabsTrigger, injectTabsRootContext } from 'reka-ui'
+  import { TabsTrigger, injectTabsRootContext } from '../../primitives/tabs'
   import { computed } from 'vue'
   import Highlight from '../highlight/Highlight.vue'
   import Ripple from '../ripple/Ripple.vue'

package/src/components/tag/Tag.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-  import { Primitive, type PrimitiveProps } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { tag, type TagVariants } from './tag.variants'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnTag' })
 

package/src/components/text/Text.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-  import { Primitive, type PrimitiveProps } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { text, type TextVariants } from './text.variants'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnText' })
 

package/src/components/time/Time.vue

@@ -1,20 +1,23 @@
 <script setup lang="ts">
   import { computed } from 'vue'
+  import { injectTooltipProviderContext } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { devWarn } from '../../lib/dev'
   import { useUiLocale } from '../../locale'
+  import Tooltip from '../tooltip/Tooltip.vue'
   import { relativeTime } from './utils/relativeTime'
   import { useNow } from './composables/useNow'
 
-  defineOptions({ name: 'HnTime' })
+  defineOptions({ name: 'HnTime', inheritAttrs: false })
 
   const props = withDefaults(
     defineProps<{
       value?: string | number | Date | null
       format?: 'datetime' | 'date' | 'time' | 'relative'
+      tooltip?: boolean
       class?: string
     }>(),
-    { format: 'datetime' },
+    { format: 'datetime', tooltip: true },
   )
 
   const t = useUiLocale()
@@ -49,16 +52,30 @@
       ? new Intl.DateTimeFormat(t.value.tag, absoluteOptions.datetime).format(date.value)
       : undefined,
   )
+
+  const provider = injectTooltipProviderContext(null)
+  const hint = computed(() => !!provider && props.tooltip && props.format === 'relative')
 </script>
 
 <template>
+  <Tooltip v-if="date && hint" :content="absolute">
+    <time
+      :datetime="date.toISOString()"
+      data-allow-mismatch="text"
+      :class="cn(props.class)"
+      v-bind="$attrs"
+    >
+      {{ text }}
+    </time>
+  </Tooltip>
   <time
-    v-if="date"
+    v-else-if="date"
     :datetime="date.toISOString()"
-    :title="format === 'relative' ? absolute : undefined"
+    data-allow-mismatch="text"
     :class="cn(props.class)"
+    v-bind="$attrs"
   >
     {{ text }}
   </time>
-  <span v-else :class="cn(props.class)">{{ text }}</span>
+  <span v-else :class="cn(props.class)" v-bind="$attrs">{{ text }}</span>
 </template>

package/src/components/toast/Toaster.vue

@@ -154,6 +154,7 @@
     </ToastRoot>
     <ToastPortal>
       <ToastViewport
+        aria-live="off"
         :label="props.label ?? t.toast.regionLabel"
         :data-pos="props.position ?? 'auto'"
         :data-expanded="expanded ? '' : undefined"

package/src/components/toggle/Toggle.vue

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

package/src/components/toolbar/Toolbar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { toRef } from 'vue'
-  import { ToolbarRoot } from 'reka-ui'
+  import { ToolbarRoot } from '../../primitives/toolbar'
   import { cn } from '../../lib/cn'
   import { useAccessibleName } from '../../lib/a11y'
   import { useDirection } from '../../lib/useDirection'

package/src/components/toolbar/ToolbarButton.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { computed } from 'vue'
-  import { ToolbarButton as RekaToolbarButton } from 'reka-ui'
+  import { ToolbarButton as RekaToolbarButton } from '../../primitives/toolbar'
   import ToolbarControl from './ToolbarControl.vue'
   import { useToolbar } from './context'
   import type { ToolbarControlProps } from './types'

package/src/components/toolbar/ToolbarLink.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { computed } from 'vue'
-  import { ToolbarButton as RekaToolbarButton } from 'reka-ui'
+  import { ToolbarButton as RekaToolbarButton } from '../../primitives/toolbar'
   import ToolbarControl from './ToolbarControl.vue'
   import { useToolbar } from './context'
   import type { ToolbarControlProps } from './types'

package/src/components/toolbar/ToolbarSeparator.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { Separator } from 'reka-ui'
+  import { Separator } from '../../primitives/separator'
   import { cn } from '../../lib/cn'
   import { useToolbar } from './context'
   import { toolbarSeparator } from './toolbar.variants'

package/src/components/toolbar/ToolbarToggleGroup.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts" generic="T extends string | string[] = string | string[]">
   import { computed } from 'vue'
-  import { ToolbarToggleGroup as RekaToolbarToggleGroup, type AcceptableValue } from 'reka-ui'
+  import { ToolbarToggleGroup as RekaToolbarToggleGroup } from '../../primitives/toolbar'
+  import type { AcceptableValue } from '../../primitives/utils/types'
   import { cn } from '../../lib/cn'
   import { useToolbar, provideToolbarGroup } from './context'
   import { toolbarGroup } from './toolbar.variants'

package/src/components/toolbar/ToolbarToggleItem.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { computed } from 'vue'
-  import { ToolbarToggleItem as RekaToolbarToggleItem } from 'reka-ui'
+  import { ToolbarToggleItem as RekaToolbarToggleItem } from '../../primitives/toolbar'
   import { cn } from '../../lib/cn'
   import ToolbarControl from './ToolbarControl.vue'
   import { useToolbar, useToolbarGroup } from './context'

package/src/components/toolbar/types.ts

@@ -1,5 +1,5 @@
-import type { PrimitiveProps } from 'reka-ui'
 import type { ButtonVariants } from '../button/button.variants'
+import type { PrimitiveProps } from '../../primitives/primitive'
 
 export type ToolbarOrientation = 'horizontal' | 'vertical'
 export type ToolbarSize = 'sm' | 'md' | 'lg'

package/src/components/visually-hidden/VisuallyHidden.vue

@@ -1,29 +1,15 @@
 <script setup lang="ts">
-  import { Primitive, type PrimitiveProps } from 'reka-ui'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
+  import { VISUALLY_HIDDEN_STYLE } from '../../../../shared/src/primitives/visually-hidden'
 
   defineOptions({ name: 'HnVisuallyHidden' })
 
   const props = withDefaults(defineProps<PrimitiveProps>(), { as: 'span' })
-
-  const hidden = {
-    position: 'absolute',
-    border: 0,
-    width: '1px',
-    height: '1px',
-    padding: 0,
-    margin: '-1px',
-    overflow: 'hidden',
-    clip: 'rect(0, 0, 0, 0)',
-    clipPath: 'inset(50%)',
-    whiteSpace: 'nowrap',
-    wordWrap: 'normal',
-    top: '-1px',
-    left: '-1px',
-  } as const
 </script>
 
 <template>
-  <Primitive :as="props.as" :as-child="props.asChild" :style="hidden">
+  <Primitive :as="props.as" :as-child="props.asChild" :style="VISUALLY_HIDDEN_STYLE">
     <slot />
   </Primitive>
 </template>

package/src/index.ts

@@ -5,7 +5,7 @@ export type { VariantProps } from './lib/tv'
 export { EASE, DURATION, TRAVEL, STAGGER, TRANSITION, cssEase } from './motion'
 export type { Bezier, TransitionName } from './motion'
 
-export { provideUiLocale, useUiLocale, zhCN, enUS } from './locale'
+export { provideUiLocale, useUiLocale, zhCN, enUS, jaJP } from './locale'
 export type { UiMessages, PartialUiMessages } from './locale'
 
 export { REQUIRED_SINGLETONS } from './singletons'
@@ -74,7 +74,15 @@ export type {
   CompletionEdit,
 } from './components/autocomplete/types'
 export { default as CommandPalette } from './components/command-palette/CommandPalette.vue'
-export type { CommandItem, CommandGroup, CommandItems } from './components/command-palette/types'
+export { default as CommandPaletteInput } from './components/command-palette/CommandPaletteInput.vue'
+export type {
+  CommandItem,
+  CommandGroup,
+  CommandItems,
+  CommandItemMatch,
+  CommandItemSlotProps,
+  CommandEmptySlotProps,
+} from './components/command-palette/types'
 export { default as Listbox } from './components/listbox/Listbox.vue'
 export type { ListboxVariants } from './components/listbox/listbox.variants'
 export { default as Tree } from './components/tree/Tree.vue'
@@ -274,6 +282,7 @@ export { default as Toaster } from './components/toast/Toaster.vue'
 export { toast } from './components/toast/store'
 export type { ToastTone, ToastOptions, ToasterPosition } from './components/toast/store'
 export { default as Spoiler } from './components/spoiler/Spoiler.vue'
+export { default as LineClamp } from './components/line-clamp/LineClamp.vue'
 export { default as Skeleton } from './components/skeleton/Skeleton.vue'
 export { default as Image } from './components/image/Image.vue'
 export { default as ImageGroup } from './components/image/ImageGroup.vue'
@@ -297,11 +306,15 @@ export {
   readScrollRecord,
   writeScrollRecord,
   createScrollRestorer,
+  createScrollRestoreSession,
+  scrollRestoreScript,
 } from './components/scroll-area/scroll-restore'
 export type {
   ScrollRecord,
   ScrollRestorer,
   ScrollRestorerPorts,
+  ScrollRestoreSession,
+  ScrollRestoreSessionOptions,
 } from './components/scroll-area/scroll-restore'
 
 export { default as DataTable } from './components/data-table/DataTable.vue'

package/src/lib/useDirection.ts

@@ -1,5 +1,6 @@
 import { computed, shallowRef, watchEffect } from 'vue'
-import { injectConfigProviderContext, type Direction } from 'reka-ui'
+import { injectConfigProviderContext } from '../primitives/utils/config'
+import type { Direction } from '../primitives/utils/useDirection'
 
 export function useDirection(dir: () => Direction | undefined) {
   const root = shallowRef<HTMLElement>()