@hina-ui/vue 1.7.4 → 1.7.6

package/dist/types/vue/src/primitives/number-field/context.d.ts

@@ -0,0 +1,41 @@
+import { type Ref } from 'vue';
+import { type NumberFieldBound, type NumberFieldFormat, type NumberFieldInputMode, type NumberFieldRange, type NumberFieldStep } from '../../../../shared/src/primitives/number-field';
+export interface NumberFieldRootContext {
+    modelValue: Ref<number | null | undefined>;
+    step: (direction: NumberFieldStep, multiplier?: number) => void;
+    jump: (bound: NumberFieldBound) => void;
+    commit: (text: string) => void;
+    inputEl: Ref<HTMLInputElement | undefined>;
+    onInputElement: (element: HTMLInputElement) => void;
+    inputMode: Ref<NumberFieldInputMode>;
+    textValue: Ref<string>;
+    range: Ref<NumberFieldRange>;
+    format: Ref<NumberFieldFormat>;
+    disabled: Ref<boolean>;
+    readonly: Ref<boolean>;
+    disableWheelChange: Ref<boolean>;
+    invertWheelChange: Ref<boolean>;
+    isDecreaseDisabled: Ref<boolean>;
+    isIncreaseDisabled: Ref<boolean>;
+    id: Ref<string | undefined>;
+}
+export declare function provideNumberFieldRootContext(context: NumberFieldRootContext): NumberFieldRootContext;
+export declare function injectNumberFieldRootContext(): NumberFieldRootContext;
+export declare function useNumberFieldStep(direction: NumberFieldStep, props: {
+    as?: unknown;
+    disabled?: boolean;
+}): {
+    primitiveElement: Ref<import("vue").ComponentPublicInstance | undefined, import("vue").ComponentPublicInstance | undefined>;
+    attributes: import("vue").ComputedRef<{
+        readonly tabindex: "-1";
+        readonly 'aria-label': "Increase" | "Decrease";
+        readonly type: "button" | undefined;
+        readonly style: {
+            readonly userSelect: "none" | undefined;
+        };
+        readonly disabled: "" | undefined;
+        readonly 'data-disabled': "" | undefined;
+        readonly 'data-pressed': "true" | undefined;
+    }>;
+};
+//# sourceMappingURL=context.d.ts.map

package/dist/types/vue/src/primitives/number-field/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/number-field/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,GAAG,EACT,MAAM,KAAK,CAAA;AACZ,OAAO,EAIL,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACrB,MAAM,gDAAgD,CAAA;AAIvD,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,GAAG,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAA;IAC1C,IAAI,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/D,IAAI,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAA;IACvC,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,OAAO,EAAE,GAAG,CAAC,gBAAgB,GAAG,SAAS,CAAC,CAAA;IAC1C,cAAc,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,IAAI,CAAA;IACnD,SAAS,EAAE,GAAG,CAAC,oBAAoB,CAAC,CAAA;IACpC,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACtB,KAAK,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;IAC5B,MAAM,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;IAC9B,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACtB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACtB,kBAAkB,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAChC,iBAAiB,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAC/B,kBAAkB,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAChC,kBAAkB,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAChC,EAAE,EAAE,GAAG,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;CAC5B;AAID,wBAAgB,6BAA6B,CAAC,OAAO,EAAE,sBAAsB,0BAG5E;AAED,wBAAgB,4BAA4B,2BAO3C;AAED,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE;IAAE,EAAE,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE;;;;;;;;;;;;;EAiD5C"}

package/dist/types/vue/src/primitives/number-field/index.d.ts

@@ -0,0 +1,5 @@
+export { default as NumberFieldRoot, type NumberFieldRootEmits, type NumberFieldRootProps, } from './NumberFieldRoot.vue';
+export { default as NumberFieldInput, type NumberFieldInputProps } from './NumberFieldInput.vue';
+export { default as NumberFieldIncrement, type NumberFieldIncrementProps, } from './NumberFieldIncrement.vue';
+export { default as NumberFieldDecrement, type NumberFieldDecrementProps, } from './NumberFieldDecrement.vue';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/vue/src/primitives/number-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/number-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,IAAI,eAAe,EAC1B,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,GAC1B,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAA;AAChG,OAAO,EACL,OAAO,IAAI,oBAAoB,EAC/B,KAAK,yBAAyB,GAC/B,MAAM,4BAA4B,CAAA;AACnC,OAAO,EACL,OAAO,IAAI,oBAAoB,EAC/B,KAAK,yBAAyB,GAC/B,MAAM,4BAA4B,CAAA"}

package/dist/types/vue/src/primitives/utils/timers.d.ts

@@ -0,0 +1,6 @@
+export declare const windowTimers: {
+    setTimeout: (callback: () => void, delay: number) => number;
+    clearTimeout: (handle: unknown) => void;
+};
+export declare const isClient: boolean;
+//# sourceMappingURL=timers.d.ts.map

package/dist/types/vue/src/primitives/utils/timers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timers.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/utils/timers.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY;2BACA,MAAM,IAAI,SAAS,MAAM;2BACzB,OAAO;CAC/B,CAAA;AAED,eAAO,MAAM,QAAQ,SAAmE,CAAA"}

package/dist/types/vue/src/primitives/utils/usePrimitiveElement.d.ts

@@ -0,0 +1,6 @@
+import { type ComponentPublicInstance } from 'vue';
+export declare function usePrimitiveElement<T extends ComponentPublicInstance>(): {
+    primitiveElement: import("vue").Ref<T | undefined, T | undefined>;
+    currentElement: import("vue").ComputedRef<HTMLElement | undefined>;
+};
+//# sourceMappingURL=usePrimitiveElement.d.ts.map

package/dist/types/vue/src/primitives/utils/usePrimitiveElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrimitiveElement.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/utils/usePrimitiveElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,uBAAuB,EAAE,MAAM,KAAK,CAAA;AAEjE,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,uBAAuB;;;EASpE"}

package/dist/types/vue/src/primitives/utils/useVModel.d.ts

@@ -0,0 +1,7 @@
+import { type Ref } from 'vue';
+export interface VModelOptions<V> {
+    defaultValue?: V;
+    passive?: boolean;
+}
+export declare function useVModel<P extends object, K extends keyof P & string, V = P[K]>(props: P, key: K, emit: (event: `update:${K}`, value: V) => void, options?: VModelOptions<V>): Ref<V>;
+//# sourceMappingURL=useVModel.d.ts.map

package/dist/types/vue/src/primitives/utils/useVModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVModel.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/utils/useVModel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkC,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AAE9D,MAAM,WAAW,aAAa,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,CAAC,GAAG,MAAM,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAC9E,KAAK,EAAE,CAAC,EACR,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,EAAE,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,EAC9C,OAAO,GAAE,aAAa,CAAC,CAAC,CAAM,GAC7B,GAAG,CAAC,CAAC,CAAC,CAwBR"}

package/dist/types/vue/src/primitives/visually-hidden/VisuallyHiddenInput.d.ts

@@ -0,0 +1,66 @@
+import { type PropType } from 'vue';
+import type { VisuallyHiddenProps } from 'reka-ui';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    value: {
+        type: PropType<unknown>;
+        required: true;
+    };
+    checked: {
+        type: BooleanConstructor;
+        required: false;
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    feature: {
+        type: PropType<VisuallyHiddenProps["feature"]>;
+        required: false;
+        default: string;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    value: {
+        type: PropType<unknown>;
+        required: true;
+    };
+    checked: {
+        type: BooleanConstructor;
+        required: false;
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    feature: {
+        type: PropType<VisuallyHiddenProps["feature"]>;
+        required: false;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    required: boolean;
+    disabled: boolean;
+    checked: boolean;
+    feature: "focusable" | "fully-hidden" | undefined;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;
+//# sourceMappingURL=VisuallyHiddenInput.d.ts.map

package/dist/types/vue/src/primitives/visually-hidden/VisuallyHiddenInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHiddenInput.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/visually-hidden/VisuallyHiddenInput.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,QAAQ,EACd,MAAM,KAAK,CAAA;AACZ,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;;;;;;;cAYZ,QAAQ,CAAC,OAAO,CAAC;;;;;;;;;;;;;;;;;cAKjC,QAAQ,CAAC,mBAAmB,CAAC,SAAS,CAAC,CAAC;;;;;;;;;;;;cALxB,QAAQ,CAAC,OAAO,CAAC;;;;;;;;;;;;;;;;;cAKjC,QAAQ,CAAC,mBAAmB,CAAC,SAAS,CAAC,CAAC;;;;;;;;;;AAV9D,wBAgFE"}

package/dist/types/vue/src/primitives/visually-hidden/VisuallyHiddenInputBubble.vue.d.ts

@@ -0,0 +1,28 @@
+import type { VisuallyHiddenProps } from 'reka-ui';
+export interface VisuallyHiddenInputBubbleProps<T> {
+    name: string;
+    value: T;
+    checked?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    feature?: VisuallyHiddenProps['feature'];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<VisuallyHiddenInputBubbleProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};
+//# sourceMappingURL=VisuallyHiddenInputBubble.vue.d.ts.map

package/dist/types/vue/src/primitives/visually-hidden/VisuallyHiddenInputBubble.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHiddenInputBubble.vue.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/visually-hidden/VisuallyHiddenInputBubble.vue"],"names":[],"mappings":"AAyDE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAElD,MAAM,WAAW,8BAA8B,CAAC,CAAC;IAC/C,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,CAAC,CAAA;IACR,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAA;CACzC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY,GAAK,CAAC,EACvB,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WA2EO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,mCAAmB,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC1I,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;WACH,EAAE;UACH,EAAE;EAEL,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;AACzF,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hina-ui/vue",
-  "version": "1.7.4",
-  "description": "An elegant, restrained Vue 3 component library built on Reka UI and Tailwind CSS v4.",
+  "version": "1.7.6",
+  "description": "The design system behind Hikarinagi: Vue 3 components built on Reka UI and Tailwind CSS v4.",
   "keywords": [
     "vue",
     "vue3",
@@ -50,6 +50,7 @@
   },
   "dependencies": {
     "@internationalized/date": "^3.12.4",
+    "@internationalized/number": "^3.6.8",
     "@lucide/vue": "^1.37.0",
     "@tanstack/vue-table": "^9.2.4",
     "@tanstack/vue-virtual": "^3.13.36",

package/src/components/accordion/AccordionTrigger.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
-  import { AccordionHeader, AccordionTrigger as RekaAccordionTrigger } from 'reka-ui'
+  import {
+    AccordionHeader,
+    AccordionTrigger as RekaAccordionTrigger,
+    injectCollapsibleRootContext,
+    useId,
+  } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import Ripple from '../ripple/Ripple.vue'
   import DisclosureIcon from '../disclosure-icon/DisclosureIcon.vue'
@@ -7,6 +12,9 @@
 
   defineOptions({ name: 'HnAccordionTrigger' })
 
+  const root = injectCollapsibleRootContext()
+  root.contentId ||= useId(undefined, 'reka-collapsible-content')
+
   const props = withDefaults(
     defineProps<{
       level?: 2 | 3 | 4 | 5 | 6

package/src/components/anchor/Anchor.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="T extends AnchorItem = AnchorItem">
-  import { useTemplateRef, watch } from 'vue'
+  import { computed, useTemplateRef, watch } from 'vue'
   import { cn } from '../../lib/cn'
   import { useUiLocale } from '../../locale'
   import Highlight from '../highlight/Highlight.vue'
@@ -11,12 +11,15 @@
 
   defineOptions({ name: 'HnAnchor' })
 
-  const props = defineProps<{
-    items: T[]
-    label?: string
-    autoScroll?: boolean
-    class?: string
-  }>()
+  const props = withDefaults(
+    defineProps<{
+      items: T[]
+      label?: string
+      autoScroll?: boolean
+      class?: string
+    }>(),
+    { autoScroll: true },
+  )
 
   const emit = defineEmits<{ change: [current: string | undefined] }>()
 
@@ -26,9 +29,10 @@
 
   const t = useUiLocale()
 
-  const { entries, visible, current, span, jump } = useAnchor(() => props.items)
+  const { entries, visible, covered, current, span, jump } = useAnchor(() => props.items)
+  const lastCovered = computed(() => covered.value.at(-1)?.id)
   const root = useTemplateRef<HTMLElement>('root')
-  useAnchorFollow(root, current, () => props.autoScroll !== false)
+  useAnchorFollow(root, current, lastCovered, () => props.autoScroll)
   watch(current, id => emit('change', id), { flush: 'post' })
   defineExpose({ current })
 </script>

package/src/components/anchor/composables/useAnchor.ts

@@ -1,19 +1,10 @@
 import { computed } from 'vue'
-import type { AnchorItem, AnchorSlotItem } from '../types'
+import { anchorEntries } from '../../../../../shared/src/lib/anchor'
+import type { AnchorItem } from '../types'
 import { useScrollSpy } from './useScrollSpy'
 
 export function useAnchor<T extends AnchorItem>(items: () => T[]) {
-  const entries = computed(() =>
-    items().flatMap(item => [
-      { id: item.id, label: item.label, depth: 0, item: item as AnchorSlotItem<T> },
-      ...(item.children ?? []).map(child => ({
-        id: child.id,
-        label: child.label,
-        depth: 1,
-        item: child as AnchorSlotItem<T>,
-      })),
-    ]),
-  )
+  const entries = computed(() => anchorEntries(items()))
 
   return { entries, ...useScrollSpy(() => entries.value) }
 }

package/src/components/anchor/composables/useAnchorFollow.ts

@@ -1,87 +1,34 @@
 import { useResizeObserver } from '@vueuse/core'
 import { onBeforeUnmount, onMounted, shallowRef, watch, type Ref } from 'vue'
-import { prefersReducedMotion } from '../../../motion'
+import { createAnchorFollow } from '../../../../../shared/src/behavior/anchor-follow'
 
 export function useAnchorFollow(
   root: Readonly<Ref<HTMLElement | null>>,
   current: Readonly<Ref<string | undefined>>,
+  lastCovered: Readonly<Ref<string | undefined>>,
   enabled: () => boolean,
 ) {
   const viewport = shallowRef<HTMLElement>()
+  const follower = createAnchorFollow()
   let mounted = false
   let frame = 0
-  let lastCurrent: string | undefined
-
-  function findViewport(nav: HTMLElement, target: HTMLElement) {
-    const doc = nav.ownerDocument
-    const view = doc.defaultView!
-    for (
-      let node: HTMLElement | null = nav;
-      node && node !== doc.body && node !== doc.documentElement;
-      node = node.parentElement
-    ) {
-      // A shared page/content scroller is not the directory's own viewport.
-      if (node.contains(target)) break
-      if (/^(auto|scroll|overlay)$/.test(view.getComputedStyle(node).overflowY)) return node
-    }
-  }
 
   function follow() {
     frame = 0
-    const nav = root.value
-    const id = current.value
-    if (!enabled() || !nav || !id) return
-    const target = nav.ownerDocument.getElementById(id)
-    const link = nav.querySelector<HTMLElement>('a[aria-current="location"]')
-    if (!target || !link || !link.getClientRects().length) return
-    const port = findViewport(nav, target)
-    viewport.value = port
-    const changed = lastCurrent !== undefined && lastCurrent !== id
-    lastCurrent = id
-    if (!port || port.clientHeight <= 0 || port.scrollHeight <= port.clientHeight) return
-
-    const box = port.getBoundingClientRect()
-    const row = link.getBoundingClientRect()
-    const scale = port.offsetHeight ? box.height / port.offsetHeight : 1
-    if (scale <= 0) return
-    const top = box.top + port.clientTop * scale
-    const bottom = top + port.clientHeight * scale
-    if (row.top >= top && row.bottom <= bottom) return
-    // A wrapped item taller than the viewport cannot be fully visible. Avoid
-    // alternating between its top and bottom when resize observers run again.
-    if (row.top <= top && row.bottom >= bottom) return
-
-    const style = port.ownerDocument.defaultView!.getComputedStyle(port)
-    const margin = Math.min(row.height / scale / 2, port.clientHeight / 4)
-    const padding = (value: string) =>
-      Math.min(
-        Math.max(0, (port.clientHeight - row.height / scale) / 2),
-        value === 'auto'
-          ? margin
-          : (parseFloat(value) || 0) * (value.endsWith('%') ? port.clientHeight / 100 : 1),
-      )
-    const before = padding(style.scrollPaddingTop)
-    const after = padding(style.scrollPaddingBottom)
-    const delta =
-      row.height > bottom - top || row.top < top
-        ? (row.top - top) / scale - before
-        : (row.bottom - bottom) / scale + after
-    const next = Math.max(
-      0,
-      Math.min(port.scrollHeight - port.clientHeight, port.scrollTop + delta),
-    )
-    if (Math.abs(next - port.scrollTop) < 1) return
-    port.scrollTo({
-      top: next,
-      behavior: changed && !prefersReducedMotion() ? 'smooth' : 'instant',
+    const result = follower.follow({
+      nav: root.value,
+      current: current.value,
+      lastCovered: lastCovered.value,
+      enabled: enabled(),
     })
+    if (result) viewport.value = result.viewport
   }
 
   function schedule() {
     if (mounted && !frame) frame = requestAnimationFrame(follow)
   }
 
-  watch([root, current, enabled], schedule, { flush: 'post' })
+  watch([root, current, lastCovered, enabled], schedule, { flush: 'post' })
   useResizeObserver(
     () =>
       [root.value, root.value?.parentElement, viewport.value].filter(

package/src/components/anchor/composables/useScrollSpy.ts

@@ -1,70 +1,54 @@
 import { useIntersectionObserver } from '@vueuse/core'
 import { computed, onMounted, shallowRef, watch } from 'vue'
-import { prefersReducedMotion } from '../../../motion'
-
-export interface SpyEntry {
-  id: string
-  label: string
-  depth: number
-}
+import {
+  SCROLL_SPY_OPTIONS,
+  applyIntersections,
+  coveredEntries,
+  coveredSpan,
+  hashTarget,
+  jumpToAnchor,
+  sameTargets,
+  spyTargets,
+  type SpyEntry,
+} from '../../../../../shared/src/lib/anchor'
+
+export type { SpyEntry }
 
 export function useScrollSpy(entries: () => SpyEntry[]) {
   const visible = shallowRef<ReadonlySet<string>>(new Set())
   const targets = shallowRef<Array<HTMLElement | null>>([])
   const intersecting = new Set<string>()
 
-  const covered = computed(() => entries().filter(entry => visible.value.has(entry.id)))
+  const covered = computed(() => coveredEntries(entries(), visible.value))
   const current = computed(() => covered.value[0]?.id)
-  const span = computed(() => {
-    const rows = entries().flatMap((entry, index) => (visible.value.has(entry.id) ? [index] : []))
-    return rows.length ? `${rows[0]! + 1} / ${rows.at(-1)! + 2}` : undefined
-  })
+  const span = computed(() => coveredSpan(entries(), visible.value))
 
   useIntersectionObserver(
     targets,
     observed => {
-      for (const entry of observed) {
-        if (entry.isIntersecting && entry.intersectionRatio > 0) intersecting.add(entry.target.id)
-        else intersecting.delete(entry.target.id)
-      }
-      visible.value = intersecting.size
-        ? new Set(intersecting)
-        : new Set(current.value ? [current.value] : [])
+      visible.value = applyIntersections(intersecting, observed, current.value)
     },
-    { rootMargin: '0px 0px -15% 0px', threshold: [0, Number.EPSILON] },
+    SCROLL_SPY_OPTIONS,
   )
 
-  function targetOf(id: string) {
-    return document.getElementById(id)
-  }
-
   function locate() {
     intersecting.clear()
-    targets.value = entries().map(({ id }) => targetOf(id))
+    targets.value = spyTargets(entries())
   }
 
   onMounted(() => {
-    const hash = decodeURIComponent(location.hash.slice(1))
-    if (hash && entries().some(entry => entry.id === hash)) visible.value = new Set([hash])
+    const hash = hashTarget(entries())
+    if (hash) visible.value = new Set([hash])
     locate()
     watch(entries, (next, previous) => {
-      if (
-        next.length === previous.length &&
-        next.every((entry, index) => entry.id === previous[index]?.id)
-      )
-        return
+      if (sameTargets(next, previous)) return
       visible.value = new Set()
       locate()
     })
   })
 
   function jump(event: MouseEvent, id: string) {
-    const el = targetOf(id)
-    if (!el) return
-    event.preventDefault()
-    el.scrollIntoView({ behavior: prefersReducedMotion() ? 'auto' : 'smooth', block: 'start' })
-    history.replaceState(history.state, '', `#${id}`)
-    visible.value = new Set([id])
+    if (jumpToAnchor(event, id)) visible.value = new Set([id])
   }
 
   return { visible, covered, current, span, jump }

package/src/components/anchor/types.ts

@@ -1,8 +1 @@
-export interface AnchorItem {
-  id: string
-  label: string
-  children?: AnchorItem[]
-}
-
-export type AnchorSlotItem<T extends AnchorItem> =
-  T | (T extends { children?: AnchorItem[] } ? NonNullable<T['children']>[number] : never)
+export type { AnchorItem, AnchorSlotItem } from '../../../../shared/src/lib/anchor'

package/src/components/autocomplete/autocomplete.variants.ts

@@ -1 +1 @@
-export { autocompleteContent, autocompleteList } from '@hina-ui/shared/variants/autocomplete'
+export { autocompleteContent, autocompleteList } from '../../../../shared/src/variants/autocomplete'

package/src/components/autocomplete/composables/useAutocomplete.ts

@@ -1,6 +1,6 @@
 import { computed, nextTick, shallowRef, useId, watch, type Ref } from 'vue'
 import { useEventListener } from '@vueuse/core'
-import { applyCompletion } from '@hina-ui/shared/lib/completion'
+import { applyCompletion } from '../../../../../shared/src/lib/completion'
 import type {
   AutocompleteOption,
   AutocompleteSelection,

package/src/components/autocomplete/types.ts

@@ -1,16 +1 @@
-import type { CompletionContext, CompletionEdit } from '../../../../shared/src/lib/completion'
-
-export type { CompletionContext, CompletionEdit } from '../../../../shared/src/lib/completion'
-
-export interface AutocompleteOption {
-  value: string | number
-  label: string
-  description?: string
-  disabled?: boolean
-}
-
-export interface AutocompleteSelection<T extends AutocompleteOption = AutocompleteOption> {
-  option: T
-  context: CompletionContext
-  edit: CompletionEdit
-}
+export * from '../../../../shared/src/types/autocomplete'

package/src/components/banner/utils/direction.ts

@@ -1,10 +1 @@
-export type SlideDirection = 1 | -1
-
-export function stepBetween(previous: number, next: number, count: number): SlideDirection {
-  if (count < 2) return 1
-  const from = ((previous % count) + count) % count
-  const to = ((next % count) + count) % count
-  if (to === (from + 1) % count) return 1
-  if (to === (from - 1 + count) % count) return -1
-  return to > from ? 1 : -1
-}
+export * from '../../../../../shared/src/lib/banner'

package/src/components/calendar/utils/format.ts

@@ -1,23 +1 @@
-import { getLocalTimeZone, type DateValue } from '@internationalized/date'
-
-const local = (date: DateValue) => date.toDate(getLocalTimeZone())
-
-export function formatMonthHeading(tag: string, date: DateValue) {
-  return new Intl.DateTimeFormat(tag, { year: 'numeric', month: 'long' }).format(local(date))
-}
-
-export function formatYearHeading(tag: string, date: DateValue) {
-  return new Intl.DateTimeFormat(tag, { year: 'numeric' }).format(local(date))
-}
-
-export function formatMonthName(tag: string, date: DateValue) {
-  return new Intl.DateTimeFormat(tag, { month: 'short' }).format(local(date))
-}
-
-export function formatDigits(tag: string, value: number) {
-  return new Intl.NumberFormat(tag, { useGrouping: false }).format(value)
-}
-
-export function formatYearsHeading(tag: string, cells: DateValue[]) {
-  return `${formatDigits(tag, cells[0]!.year)} – ${formatDigits(tag, cells.at(-1)!.year)}`
-}
+export * from '../../../../../shared/src/lib/calendar/format'