@hina-ui/vue 1.7.6 → 1.7.7

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

@@ -0,0 +1,3 @@
+import { type Ref } from 'vue';
+export declare function useNonce(nonce?: Ref<string | undefined>): import("vue").ComputedRef<string | undefined>;
+//# sourceMappingURL=useNonce.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useNonce.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/utils/useNonce.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AAG7C,wBAAgB,QAAQ,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC,MAAM,GAAG,SAAS,CAAC,iDAGvD"}

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

@@ -0,0 +1,12 @@
+import { type SingleOrMultipleType } from '../../../../shared/src/primitives/value';
+export interface SingleOrMultipleProps<T = unknown> {
+    type?: SingleOrMultipleType;
+    modelValue?: T | T[];
+    defaultValue?: T | T[];
+}
+export declare function useSingleOrMultipleValue<T, P extends SingleOrMultipleProps<T>>(props: P, emits: (name: 'update:modelValue', value: T | T[] | undefined) => void): {
+    modelValue: import("vue").Ref<P["modelValue"], P["modelValue"]>;
+    changeModelValue: (value: T) => void;
+    isSingle: import("vue").ComputedRef<boolean>;
+};
+//# sourceMappingURL=useSingleOrMultipleValue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSingleOrMultipleValue.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/utils/useSingleOrMultipleValue.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,oBAAoB,EAC1B,MAAM,yCAAyC,CAAA;AAGhD,MAAM,WAAW,qBAAqB,CAAC,CAAC,GAAG,OAAO;IAChD,IAAI,CAAC,EAAE,oBAAoB,CAAA;IAC3B,UAAU,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAA;IACpB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAA;CACvB;AAED,wBAAgB,wBAAwB,CAAC,CAAC,EAAE,CAAC,SAAS,qBAAqB,CAAC,CAAC,CAAC,EAC5E,KAAK,EAAE,CAAC,EACR,KAAK,EAAE,CAAC,IAAI,EAAE,mBAAmB,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,EAAE,GAAG,SAAS,KAAK,IAAI;;8BAQrC,CAAC;;EAUnC"}

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

@@ -0,0 +1,7 @@
+import { type MaybeRefOrGetter } from 'vue';
+import { type MaybeElement } from '@vueuse/core';
+export declare function useSize(element: MaybeRefOrGetter<MaybeElement>): {
+    width: import("vue").ComputedRef<number>;
+    height: import("vue").ComputedRef<number>;
+};
+//# sourceMappingURL=useSize.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSize.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/utils/useSize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyC,KAAK,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAClF,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,cAAc,CAAA;AAG9D,wBAAgB,OAAO,CAAC,OAAO,EAAE,gBAAgB,CAAC,YAAY,CAAC;;;EAoB9D"}

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

@@ -0,0 +1,19 @@
+import { type VisuallyHiddenFeature } from '../../../../shared/src/primitives/visually-hidden';
+import { type PrimitiveProps } from '../primitive';
+export interface VisuallyHiddenProps extends PrimitiveProps {
+    feature?: VisuallyHiddenFeature;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<VisuallyHiddenProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VisuallyHiddenProps> & Readonly<{}>, {
+    as: import("../primitive").AsTag | import("vue").Component;
+    feature: VisuallyHiddenFeature;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=VisuallyHidden.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden.vue.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/visually-hidden/VisuallyHidden.vue"],"names":[],"mappings":"AAiCE,OAAO,EAIL,KAAK,qBAAqB,EAC3B,MAAM,mDAAmD,CAAA;AAC1D,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAA;AAG7D,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IACzD,OAAO,CAAC,EAAE,qBAAqB,CAAA;CAChC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;;aAHJ,qBAAqB;;cA0DrB,CAAC,KAAK,IAAgB,KAAK,GAAG;EAUxC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -1,5 +1,5 @@
 import { type PropType } from 'vue';
-import type { VisuallyHiddenProps } from 'reka-ui';
+import type { VisuallyHiddenProps } from './VisuallyHidden.vue';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     name: {
         type: StringConstructor;
@@ -60,7 +60,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     required: boolean;
     disabled: boolean;
     checked: boolean;
-    feature: "focusable" | "fully-hidden" | undefined;
+    feature: import("../../../../shared/src/primitives/visually-hidden/index.js").VisuallyHiddenFeature | 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

@@ -1 +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"}
+{"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,sBAAsB,CAAA;;;;;;;cAYzB,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

@@ -1,4 +1,4 @@
-import type { VisuallyHiddenProps } from 'reka-ui';
+import type { VisuallyHiddenProps } from './VisuallyHidden.vue';
 export interface VisuallyHiddenInputBubbleProps<T> {
     name: string;
     value: T;

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

@@ -1 +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"}
+{"version":3,"file":"VisuallyHiddenInputBubble.vue.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/visually-hidden/VisuallyHiddenInputBubble.vue"],"names":[],"mappings":"AAyDE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAE/D,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;WAqEO,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/dist/types/vue/src/primitives/visually-hidden/index.d.ts

@@ -0,0 +1,3 @@
+export { default as VisuallyHidden, type VisuallyHiddenProps } from './VisuallyHidden.vue';
+export { default as VisuallyHiddenInput } from './VisuallyHiddenInput';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/visually-hidden/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAC1F,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hina-ui/vue",
-  "version": "1.7.6",
+  "version": "1.7.7",
   "description": "The design system behind Hikarinagi: Vue 3 components built on Reka UI and Tailwind CSS v4.",
   "keywords": [
     "vue",

package/src/components/accordion/Accordion.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-  import { AccordionRoot, useForwardPropsEmits, type AccordionRootEmits } from 'reka-ui'
+  import { AccordionRoot, type AccordionRootEmits } from '../../primitives/accordion'
+  import { useForwardPropsEmits } from '../../primitives/utils/useForwardPropsEmits'
   import { cn } from '../../lib/cn'
   import { accordion } from './accordion.variants'
 

package/src/components/accordion/AccordionContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { AccordionContent as RekaAccordionContent } from 'reka-ui'
+  import { AccordionContent as RekaAccordionContent } from '../../primitives/accordion'
   import { cn } from '../../lib/cn'
   import { rekaAccordionStyle } from '../../lib/reka/styles'
   import { useCollapseGap } from '../../lib/collapse'

package/src/components/accordion/AccordionItem.vue

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

package/src/components/accordion/AccordionTrigger.vue

@@ -2,9 +2,9 @@
   import {
     AccordionHeader,
     AccordionTrigger as RekaAccordionTrigger,
-    injectCollapsibleRootContext,
-    useId,
-  } from 'reka-ui'
+  } from '../../primitives/accordion'
+  import { injectCollapsibleRootContext } from '../../primitives/collapsible'
+  import { useId } from '../../primitives/utils/useId'
   import { cn } from '../../lib/cn'
   import Ripple from '../ripple/Ripple.vue'
   import DisclosureIcon from '../disclosure-icon/DisclosureIcon.vue'

package/src/components/aspect-ratio/AspectRatio.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { AspectRatio as RekaAspectRatio } from 'reka-ui'
+  import { AspectRatio as RekaAspectRatio } from '../../primitives/aspect-ratio'
   import { cn } from '../../lib/cn'
 
   defineOptions({ name: 'HnAspectRatio' })

package/src/components/breadcrumb/BreadcrumbItem.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: 'HnBreadcrumbItem', inheritAttrs: false })
 

package/src/components/button/Button.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
   import { computed, useSlots } from 'vue'
-  import { Primitive, type PrimitiveProps } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { useAccessibleName } from '../../lib/a11y'
   import { button, buttonIconBox, type ButtonVariants } from './button.variants'
   import IconSlot from './IconSlot.vue'
   import Ripple from '../ripple/Ripple.vue'
   import Spinner from '../spinner/Spinner.vue'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnButton' })
 

package/src/components/card/Card.vue

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

package/src/components/checkbox/Checkbox.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { Check, Minus } from '@lucide/vue'
-  import { CheckboxRoot } from 'reka-ui'
+  import { CheckboxRoot } from '../../primitives/checkbox'
   import { useSlots } from 'vue'
   import { cn } from '../../lib/cn'
   import { useFieldControl } from '../form-field/context'

package/src/components/checkbox-group/CheckboxGroup.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="T extends SelectOption = SelectOption">
-  import { CheckboxGroupRoot } from 'reka-ui'
+  import { CheckboxGroupRoot } from '../../primitives/checkbox'
   import { cn } from '../../lib/cn'
   import { shieldFormField, useFieldControl } from '../form-field/context'
   import Checkbox from '../checkbox/Checkbox.vue'

package/src/components/chip/Chip.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
   import { computed, useSlots } from 'vue'
-  import { Primitive, type PrimitiveProps } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { devWarn } from '../../lib/dev'
   import { useUiLocale } from '../../locale'
@@ -9,6 +8,8 @@
   import IconSlot from './IconSlot.vue'
   import { useChipRoot } from './composables/useChipRoot'
   import { chip, chipRemove, type ChipVariants } from './chip.variants'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnChip' })
 

package/src/components/chip/composables/useChipRoot.ts

@@ -1,5 +1,5 @@
 import { computed } from 'vue'
-import type { PrimitiveProps } from 'reka-ui'
+import type { PrimitiveProps } from '../../../primitives/primitive'
 
 export function useChipRoot(props: PrimitiveProps & { selectable?: boolean; disabled?: boolean }) {
   const tag = computed(() => props.as ?? (props.selectable ? 'button' : 'span'))

package/src/components/collapsible/Collapsible.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-  import { CollapsibleRoot, useForwardPropsEmits, type CollapsibleRootEmits } from 'reka-ui'
+  import { CollapsibleRoot, type CollapsibleRootEmits } from '../../primitives/collapsible'
+  import { useForwardPropsEmits } from '../../primitives/utils/useForwardPropsEmits'
   import { cn } from '../../lib/cn'
 
   defineOptions({ name: 'HnCollapsible' })

package/src/components/collapsible/CollapsibleContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { CollapsibleContent as RekaCollapsibleContent } from 'reka-ui'
+  import { CollapsibleContent as RekaCollapsibleContent } from '../../primitives/collapsible'
   import { cn } from '../../lib/cn'
   import { rekaCollapsibleStyle } from '../../lib/reka/styles'
   import { useCollapseGap } from '../../lib/collapse'

package/src/components/collapsible/CollapsibleTrigger.vue

@@ -2,8 +2,8 @@
   import {
     CollapsibleTrigger as RekaCollapsibleTrigger,
     injectCollapsibleRootContext,
-    useId,
-  } from 'reka-ui'
+  } from '../../primitives/collapsible'
+  import { useId } from '../../primitives/utils/useId'
   import { cn } from '../../lib/cn'
   import Button from '../button/Button.vue'
   import DisclosureIcon from '../disclosure-icon/DisclosureIcon.vue'

package/src/components/divider/Divider.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { useSlots } from 'vue'
-  import { Separator } from 'reka-ui'
+  import { Separator } from '../../primitives/separator'
   import { cn } from '../../lib/cn'
 
   defineOptions({ name: 'HnDivider' })

package/src/components/float-button/FloatButton.vue

@@ -4,6 +4,7 @@
   import Button from '../button/Button.vue'
   import { vTooltip } from '../tooltip/directive'
   import { floatButton } from './float-button.variants'
+  import { floatButtonOffset } from '../../../../shared/src/lib/float-button'
   import type { FloatButtonProps } from './types'
 
   defineOptions({ name: 'HnFloatButton', inheritAttrs: false })
@@ -26,15 +27,7 @@
   const tooltip = computed(() =>
     props.tooltip && !props.extended ? { content: props.label, side: props.tooltipSide } : false,
   )
-  const offset = computed(() =>
-    props.offset === undefined
-      ? undefined
-      : typeof props.offset === 'number'
-        ? Number.isFinite(props.offset)
-          ? `${Math.max(0, props.offset)}px`
-          : undefined
-        : props.offset,
-  )
+  const offset = computed(() => floatButtonOffset(props.offset))
   const element = computed(() => button.value?.$el as HTMLElement | undefined)
   function focus() {
     if (!props.disabled && !props.loading) element.value?.focus({ preventScroll: true })
@@ -52,7 +45,7 @@
   <Transition
     enter-active-class="hn-transition-base"
     enter-from-class="scale-90 opacity-0"
-    leave-active-class="hn-transition pointer-events-none"
+    leave-active-class="hn-float-button-leave"
     leave-to-class="scale-90 opacity-0"
     @before-enter="enter"
     @before-leave="leave"
@@ -87,7 +80,7 @@
           props.class,
         )
       "
-      :style="[{ '--hn-float-offset': offset }, props.style]"
+      :style="[offset, props.style]"
     >
       <template v-if="props.extended" #icon><slot /></template>
       <span v-if="props.extended" class="min-w-0 truncate">{{ props.label }}</span>

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

@@ -1,6 +1,7 @@
 import type { StyleValue } from 'vue'
-import type { PrimitiveProps } from 'reka-ui'
 import type { ButtonVariants } from '../button/button.variants'
+import type { PrimitiveProps } from '../../primitives/primitive'
+import type { FloatButtonOffset } from '../../../../shared/src/lib/float-button'
 
 export interface FloatButtonProps {
   label: string
@@ -9,7 +10,7 @@ export interface FloatButtonProps {
   type?: 'button' | 'submit' | 'reset'
   position?: 'fixed' | 'absolute' | 'static'
   placement?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'
-  offset?: number | string
+  offset?: FloatButtonOffset
   size?: 'sm' | 'md' | 'lg'
   shape?: 'circle' | 'square'
   extended?: boolean

package/src/components/heading/Heading.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
   import { computed } from 'vue'
-  import { Primitive } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { heading, type HeadingVariants } from './heading.variants'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnHeading' })
 

package/src/components/icon-button/IconButton.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-  import { injectTooltipProviderContext, type PrimitiveProps } from 'reka-ui'
+  import { injectTooltipProviderContext } from 'reka-ui'
   import Button from '../button/Button.vue'
   import Tooltip from '../tooltip/Tooltip.vue'
   import { Passthrough } from '../../lib/passthrough'
   import type { ButtonVariants } from '../button/button.variants'
+  import type { PrimitiveProps } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnIconButton', inheritAttrs: false })
 

package/src/components/image/Image.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
   import { computed, onBeforeUnmount, shallowRef, useId, watch, type StyleValue } from 'vue'
-  import { Primitive } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { useRequiredLabel } from '../../lib/a11y'
   import Skeleton from '../skeleton/Skeleton.vue'
@@ -10,6 +9,7 @@
   import { useImage } from './composables/useImage'
   import { useImageGroup } from './context'
   import { useImageResolver } from './resolver'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnImage', inheritAttrs: false })
 

package/src/components/indicator/Indicator.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-  import { Primitive, type PrimitiveProps } from 'reka-ui'
   import VisuallyHidden from '../visually-hidden/VisuallyHidden.vue'
   import { cn } from '../../lib/cn'
   import { indicator, type IndicatorVariants } from './indicator.variants'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnIndicator' })
 

package/src/components/input/InputAction.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-  import { Primitive } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { inputAction, inputAdornment } from './input.variants'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnInputAction' })
 

package/src/components/link/Link.vue

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

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

@@ -1,6 +1,7 @@
 <script setup lang="ts" generic="T extends SelectOption = SelectOption">
   import { computed, ref } from 'vue'
-  import { SelectRoot, SelectTrigger, VisuallyHidden } from 'reka-ui'
+  import { SelectRoot, SelectTrigger } from 'reka-ui'
+  import { VisuallyHidden } from '../../primitives/visually-hidden'
   import { cn } from '../../lib/cn'
   import type { VirtualizeOptions } from '../../lib/virtual/types'
   import { useUiLocale } from '../../locale'
@@ -55,6 +56,7 @@
   const size = computed(() => (group ? group.size.value : props.size))
   const {
     id: fieldId,
+    labelledBy,
     invalid,
     disabled,
     describedBy,
@@ -101,6 +103,7 @@
       v-bind="$attrs"
       as="div"
       :id="fieldId"
+      :aria-labelledby="labelledBy"
       :aria-describedby="describedBy"
       data-hn-multi-select
       @keydown="keyboard = true"

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

@@ -1,11 +1,13 @@
 <script setup lang="ts">
   import { computed } from 'vue'
-  import { Primitive, type PrimitiveProps } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { Passthrough } from '../../lib/passthrough'
   import Tooltip from '../tooltip/Tooltip.vue'
-  import { useSidebar } from '../sidebar/context'
+  import { useInSidebar, useSidebar } from '../sidebar/context'
   import { navLink, navLinkLabel } from './nav-link.variants'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
+  import NavLinkChild from './NavLinkChild'
 
   defineOptions({ name: 'HnNavLink', inheritAttrs: false })
 
@@ -21,18 +23,45 @@
     { as: 'a', active: false, disabled: false },
   )
 
-  const sidebar = useSidebar()
+  const sidebar = useInSidebar() ? useSidebar() : null
   const rail = computed(() => sidebar?.state.value === 'rail')
 
   const Wrapper = sidebar ? Tooltip : Passthrough
+
+  const linkProps = computed(() => ({
+    'aria-current': props.active ? ('page' as const) : undefined,
+    'data-state': props.active ? 'selected' : undefined,
+    'aria-disabled': props.disabled ? ('true' as const) : undefined,
+    'data-disabled': props.disabled ? '' : undefined,
+    tabindex: props.disabled ? -1 : undefined,
+    'aria-label': rail.value ? props.label : undefined,
+    class: cn(navLink({ active: props.active }), props.class),
+  }))
+
+  const labelProps = computed(() => ({
+    'aria-hidden': rail.value ? ('true' as const) : undefined,
+    inert: rail.value,
+    'data-collapsed': rail.value ? '' : undefined,
+    'data-hn-label': '',
+    class: navLinkLabel(),
+  }))
 </script>
 
 <template>
   <Wrapper :disabled="!rail || !props.label" :content="props.label" side="right">
+    <NavLinkChild
+      v-if="props.asChild"
+      v-bind="{ ...$attrs, ...linkProps }"
+      :as="props.as"
+      :label-props="labelProps"
+    >
+      <template v-if="$slots.icon" #icon><slot name="icon" /></template>
+      <slot />
+    </NavLinkChild>
     <Primitive
+      v-else
       v-bind="$attrs"
       :as="props.as"
-      :as-child="props.asChild"
       :aria-current="props.active ? 'page' : undefined"
       :data-state="props.active ? 'selected' : undefined"
       :aria-disabled="props.disabled ? 'true' : undefined"

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

@@ -0,0 +1,57 @@
+import {
+  Comment,
+  defineComponent,
+  h,
+  mergeProps,
+  Text,
+  type PropType,
+  type Slots,
+  type VNode,
+  type VNodeArrayChildren,
+} from 'vue'
+import { Primitive, type PrimitiveProps } from '../../primitives/primitive'
+import { renderSlotFragments } from '../../primitives/utils/renderSlotFragments'
+
+type Content = string | VNodeArrayChildren | null | undefined
+
+const CHILDREN_FLAGS = 8 | 16 | 32
+
+export default defineComponent({
+  name: 'HnNavLinkChild',
+  inheritAttrs: false,
+  props: {
+    as: { type: [String, Object] as PropType<PrimitiveProps['as']>, default: 'a' },
+    labelProps: { 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),
+    ]
+
+    return () => {
+      const children = renderSlotFragments(slots.default?.())
+      const child = children.find(node => node.type !== Comment && node.type !== Text)
+      if (!child) return h(Primitive, mergeProps(attrs, { as: props.as }), () => inner(children))
+
+      const { ref: _, ...own } = child.props ?? {}
+      const merged = mergeProps(attrs, own)
+      const bare = {
+        ...child,
+        props: {},
+        children: null,
+        shapeFlag: child.shapeFlag & ~CHILDREN_FLAGS,
+      } as VNode
+      if (typeof child.type === 'string') return h(bare, merged, inner(child.children as Content))
+
+      const given = (child.children ?? {}) as Slots
+      const forwarded = Object.fromEntries(
+        Object.entries(given).filter(([name]) => !name.startsWith('_') && name !== 'default'),
+      )
+      return h(bare, merged, {
+        ...forwarded,
+        default: (...args: unknown[]) => inner(given.default?.(...(args as [])) as Content),
+      })
+    }
+  },
+})

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

@@ -2,7 +2,6 @@
   import {
     NavigationMenuLink as RekaNavigationMenuLink,
     type NavigationMenuLinkEmits,
-    type PrimitiveProps,
   } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { useNavigationMenu } from './context'
@@ -11,6 +10,7 @@
     navigationMenuLink,
     navigationMenuIcon,
   } from './navigation-menu.variants'
+  import type { PrimitiveProps } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnNavigationMenuLink', inheritAttrs: false })
   const props = withDefaults(

package/src/components/pagination/Pagination.vue

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

package/src/components/pagination/PaginationContent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { shallowRef } from 'vue'
-  import { PaginationList } from 'reka-ui'
+  import { PaginationList } from '../../primitives/pagination'
   import { cn } from '../../lib/cn'
   import PaginationPages from './PaginationPages.vue'
   import { paginationList } from './pagination.variants'

package/src/components/pagination/PaginationControl.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
   import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from '@lucide/vue'
-  import { PaginationFirst, PaginationPrev, PaginationNext, PaginationLast } from 'reka-ui'
+  import {
+    PaginationFirst,
+    PaginationPrev,
+    PaginationNext,
+    PaginationLast,
+  } from '../../primitives/pagination'
   import { useUiLocale } from '../../locale'
   import Button from '../button/Button.vue'
   import type { ButtonVariants } from '../button/button.variants'

package/src/components/pagination/PaginationPage.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { useTemplateRef } from 'vue'
-  import { PaginationListItem } from 'reka-ui'
+  import { PaginationListItem } from '../../primitives/pagination'
   import Button from '../button/Button.vue'
   import { vTooltip } from '../tooltip/directive'
   import { useUiLocale } from '../../locale'