nuance-ui 0.1.7 → 0.1.9

package/dist/runtime/components/progress/progress-label.d.vue.ts

@@ -0,0 +1,14 @@
+import type { BoxProps } from '@nui/components';
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BoxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BoxProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/progress/progress-label.vue

@@ -0,0 +1,14 @@
+<script setup>
+import Box from "../box.vue";
+import css from "./progress.module.css";
+const props = defineProps({
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+</script>
+
+<template>
+	<Box v-bind='props' :class='css.label'>
+		<slot />
+	</Box>
+</template>

package/dist/runtime/components/progress/progress-label.vue.d.ts

@@ -0,0 +1,14 @@
+import type { BoxProps } from '@nui/components';
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BoxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BoxProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/progress/progress-root.d.vue.ts

@@ -0,0 +1,25 @@
+import type { BoxProps } from '@nui/components';
+import type { NuanceRadius, NuanceSize } from '@nui/types';
+export interface ProgressRootProps extends BoxProps {
+    /** Controls track height @default `'md'` */
+    size?: NuanceSize | string;
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default `theme.defaultRadius` */
+    radius?: NuanceRadius;
+    /** Controls sections width transition duration, value is specified in ms @default `100` */
+    transitionDuration?: number;
+    /** Controls orientation @default `'horizontal'` */
+    orientation?: 'horizontal' | 'vertical';
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ProgressRootProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProgressRootProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/progress/progress-root.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { getRadius, getSize } from "@nui/utils";
+import { computed } from "vue";
+import Box from "../box.vue";
+import css from "./progress.module.css";
+const {
+  orientation,
+  mod,
+  size,
+  radius,
+  transitionDuration
+} = defineProps({
+  size: { type: String, required: false },
+  radius: { type: [String, Number], required: false },
+  transitionDuration: { type: Number, required: false },
+  orientation: { type: String, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+const style = computed(() => ({
+  "--progress-size": getSize(size, "progress-size"),
+  "--progress-radius": radius === void 0 ? void 0 : getRadius(radius),
+  "--progress-transition-duration": typeof transitionDuration === "number" ? `${transitionDuration}ms` : void 0
+}));
+</script>
+
+<template>
+	<Box :style :class='css.root' :mod='[{ orientation }, mod]'>
+		<slot />
+	</Box>
+</template>

package/dist/runtime/components/progress/progress-root.vue.d.ts

@@ -0,0 +1,25 @@
+import type { BoxProps } from '@nui/components';
+import type { NuanceRadius, NuanceSize } from '@nui/types';
+export interface ProgressRootProps extends BoxProps {
+    /** Controls track height @default `'md'` */
+    size?: NuanceSize | string;
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default `theme.defaultRadius` */
+    radius?: NuanceRadius;
+    /** Controls sections width transition duration, value is specified in ms @default `100` */
+    transitionDuration?: number;
+    /** Controls orientation @default `'horizontal'` */
+    orientation?: 'horizontal' | 'vertical';
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ProgressRootProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProgressRootProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/progress/progress-section.d.vue.ts

@@ -0,0 +1,25 @@
+import type { BoxProps } from '@nui/components';
+import type { NuanceColor } from '@nui/types';
+export interface ProgressSectionProps extends BoxProps {
+    /** Determines whether `aria-*` props should be added to the root element @default `true` */
+    withAria?: boolean;
+    /** Key of `theme.colors` or any valid CSS value @default `theme.primaryColor` */
+    color?: NuanceColor;
+    /** If set, the section has stripes @default `false` */
+    striped?: boolean;
+    /** If set, the sections stripes are animated, `striped` prop is ignored @default `false` */
+    animated?: boolean;
+}
+type __VLS_Props = ProgressSectionProps;
+type __VLS_ModelProps = {
+    /** Value of the section in 0–100 range */
+    modelValue: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/progress/progress-section.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { useStyleResolver } from "@nui/composals";
+import { getThemeColor } from "@nui/utils";
+import { computed } from "vue";
+import Box from "../box.vue";
+import css from "./progress.module.css";
+const {
+  withAria,
+  animated,
+  striped,
+  color,
+  mod
+} = defineProps({
+  withAria: { type: Boolean, required: false },
+  color: { type: null, required: false },
+  striped: { type: Boolean, required: false },
+  animated: { type: Boolean, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+const value = defineModel({ type: Number, ...{ required: true } });
+const ariaAttributes = computed(() => withAria ? {
+  "role": "progressbar",
+  "aria-valuemax": 100,
+  "aria-valuemin": 0,
+  "aria-valuenow": value.value,
+  "aria-valuetext": `${value.value}%`
+} : {});
+const style = computed(() => useStyleResolver((theme) => ({
+  "--progress-section-size": `${value.value}%`,
+  "--progress-section-color": getThemeColor(color, theme)
+})));
+</script>
+
+<template>
+	<Box
+		:style
+		v-bind='ariaAttributes'
+		:class='css.section'
+		:mod='[{ striped: striped || animated, animated }, mod]'
+	/>
+</template>

package/dist/runtime/components/progress/progress-section.vue.d.ts

@@ -0,0 +1,25 @@
+import type { BoxProps } from '@nui/components';
+import type { NuanceColor } from '@nui/types';
+export interface ProgressSectionProps extends BoxProps {
+    /** Determines whether `aria-*` props should be added to the root element @default `true` */
+    withAria?: boolean;
+    /** Key of `theme.colors` or any valid CSS value @default `theme.primaryColor` */
+    color?: NuanceColor;
+    /** If set, the section has stripes @default `false` */
+    striped?: boolean;
+    /** If set, the sections stripes are animated, `striped` prop is ignored @default `false` */
+    animated?: boolean;
+}
+type __VLS_Props = ProgressSectionProps;
+type __VLS_ModelProps = {
+    /** Value of the section in 0–100 range */
+    modelValue: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/progress/progress.d.vue.ts

@@ -0,0 +1,16 @@
+import type { ProgressRootProps } from './progress-root.vue.js';
+import type { ProgressSectionProps } from './progress-section.vue.js';
+export interface ProgressProps extends ProgressRootProps, ProgressSectionProps {
+}
+type __VLS_Props = ProgressProps;
+type __VLS_ModelProps = {
+    modelValue: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/progress/progress.module.css

@@ -0,0 +1 @@
+.root{--progress-radius:var(--radius-default);--progress-size:var(--progress-size-md);--progress-size-xs:rem(8px);--progress-size-sm:rem(12px);--progress-size-md:rem(16px);--progress-size-lg:rem(20px);--progress-size-xl:rem(24px);border-radius:var(--progress-radius);display:flex;height:var(--progress-size);overflow:hidden;position:relative;@mixin where-light{background-color:var(--color-gray-2)}@mixin where-dark{background-color:var(--color-dark-4)}}.root:where([data-orientation=vertical]){flex-direction:column-reverse;height:auto;width:var(--progress-size)}.section{--progress-section-size:var(--progress-size-sm);--progress-section-color:var(--color-primary-4);--progress-transition-duration:100ms;align-items:center;background-color:var(--progress-section-color);background-size:20px 20px;display:flex;height:100%;justify-content:center;overflow:hidden;transition:width var(--progress-transition-duration) ease;width:var(--progress-section-size)}.section:where([data-striped]){background-image:linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent)}.section:where([data-animated]){animation:stripes-animation 1s linear infinite}.section:where(:last-of-type){border-radius:0;border-end-end-radius:var(--progress-radius);border-start-end-radius:var(--progress-radius)}.section:where(:first-of-type){border-radius:0;border-end-start-radius:var(--progress-radius);border-start-start-radius:var(--progress-radius)}.root:where([data-orientation=vertical]) .section{height:var(--progress-section-size);transition:height var(--progress-transition-duration,.1s) ease;width:100%}.root:where([data-orientation=vertical]) .section:where([data-striped]){background-image:linear-gradient(135deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent)}.root:where([data-orientation=vertical]) .section:where([data-animated]){animation:stripes-animation-vertical 1s linear infinite}.root:where([data-orientation=vertical]) .section:where(:last-of-type){border-radius:0;border-start-end-radius:var(--progress-radius);border-start-start-radius:var(--progress-radius)}.root:where([data-orientation=vertical]) .section:where(:first-of-type){border-radius:0;border-end-end-radius:var(--progress-radius);border-end-start-radius:var(--progress-radius)}.label{--progress-label-color:var(--color-white);color:var(--progress-label-color);font-size:min(calc(var(--progress-size)*.65));font-weight:700;line-height:1;overflow:hidden;padding-inline:4px;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.root:where([data-orientation=vertical]) .label{writing-mode:vertical-rl}@keyframes stripes-animation{0%{background-position:0 0}to{background-position:40px 0}}@keyframes stripes-animation-vertical{0%{background-position:0 0}to{background-position:0 40px}}

package/dist/runtime/components/progress/progress.vue

@@ -0,0 +1,39 @@
+<script setup>
+import ProgressRoot from "./progress-root.vue";
+import ProgressSection from "./progress-section.vue";
+const {
+  mod,
+  size,
+  color,
+  radius,
+  striped,
+  animated,
+  withAria,
+  orientation,
+  transitionDuration
+} = defineProps({
+  size: { type: String, required: false },
+  radius: { type: [String, Number], required: false },
+  transitionDuration: { type: Number, required: false },
+  orientation: { type: String, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false },
+  withAria: { type: Boolean, required: false },
+  color: { type: null, required: false },
+  striped: { type: Boolean, required: false },
+  animated: { type: Boolean, required: false }
+});
+const value = defineModel({ type: Number, ...{ required: true } });
+</script>
+
+<template>
+	<ProgressRoot :size :radius :orientation :transition-duration :mod>
+		<ProgressSection
+			v-model='value'
+			:striped
+			:animated
+			:color
+			:with-aria
+		/>
+	</ProgressRoot>
+</template>

package/dist/runtime/components/progress/progress.vue.d.ts

@@ -0,0 +1,16 @@
+import type { ProgressRootProps } from './progress-root.vue.js';
+import type { ProgressSectionProps } from './progress-section.vue.js';
+export interface ProgressProps extends ProgressRootProps, ProgressSectionProps {
+}
+type __VLS_Props = ProgressProps;
+type __VLS_ModelProps = {
+    modelValue: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/roving-focus/_lib/context.d.ts

@@ -0,0 +1,51 @@
+import type { ShallowRef } from 'vue';
+interface State {
+    /** Ref to the container that holds all roving items */
+    list: Readonly<ShallowRef<HTMLElement | null>>;
+    /** Whether focus should loop from last to first and vice versa */
+    loop?: boolean;
+    /** Keyboard navigation direction */
+    orientation?: 'vertical' | 'horizontal' | 'both';
+    /** Custom attribute to mark items instead of data-roving-item */
+    attr?: string;
+}
+/**
+ * Provides the roving focus context to descendants.
+ * Must be called in the parent component that wraps the roving items.
+ *
+ * @example
+ * const { init } = useProvideRovingFocus({ list: containerRef, loop: true })
+ */
+export declare const useProvideRovingFocus: (args_0: State) => {
+    attr: string;
+    list: Readonly<ShallowRef<HTMLElement | null>>;
+    loop: boolean | undefined;
+    orientation: "both" | "horizontal" | "vertical" | undefined;
+    init: () => number;
+    focus: {
+        (dir: "first" | "last"): void;
+        (dir: "prev" | "next", element: HTMLElement | undefined | null): void;
+    };
+    getItems: () => HTMLElement[];
+    focusElement: (element?: HTMLElement) => void;
+    onItemUnmount: (element: HTMLElement | null | undefined) => void;
+};
+/**
+ * Consumes the roving focus context.
+ * Use inside each roving focus item to get access to navigation methods.
+ */
+export declare const useRovingFocus: () => {
+    attr: string;
+    list: Readonly<ShallowRef<HTMLElement | null>>;
+    loop: boolean | undefined;
+    orientation: "both" | "horizontal" | "vertical" | undefined;
+    init: () => number;
+    focus: {
+        (dir: "first" | "last"): void;
+        (dir: "prev" | "next", element: HTMLElement | undefined | null): void;
+    };
+    getItems: () => HTMLElement[];
+    focusElement: (element?: HTMLElement) => void;
+    onItemUnmount: (element: HTMLElement | null | undefined) => void;
+};
+export {};

package/dist/runtime/components/roving-focus/_lib/context.js

@@ -0,0 +1,90 @@
+import { createStrictInjection } from "@nui/helpers";
+import { unrefElement } from "@vueuse/core";
+import { nextTick, ref, watch } from "vue";
+const SELECT_ATTR = "data-roving-item";
+const injectionKey = Symbol("roving-focus");
+const [useProvide, useState] = createStrictInjection(({ list, loop, orientation, attr = SELECT_ATTR }) => {
+  const activeIx = ref(-1);
+  const init = () => activeIx.value = 0;
+  const getItems = () => Array.from(
+    unrefElement(list)?.querySelectorAll(`[${attr}]:not(:disabled)`) ?? []
+  );
+  watch(activeIx, (ix, oldIx) => {
+    const items = getItems();
+    if (ix !== oldIx) {
+      items[oldIx]?.setAttribute("tabindex", "-1");
+      items[ix]?.setAttribute("tabindex", "0");
+    }
+  });
+  const focusElement = (element) => {
+    if (!element)
+      return;
+    activeIx.value = getItems().indexOf(element);
+    nextTick(() => element.focus());
+  };
+  function focus(dir, element) {
+    if (!element && dir !== "first" && dir !== "last")
+      return;
+    const items = getItems();
+    const ix = element ? items.indexOf(element) : -1;
+    let nextIndex = ix;
+    switch (dir) {
+      case "first":
+        nextIndex = 0;
+        break;
+      case "last":
+        nextIndex = items.length - 1;
+        break;
+      case "next": {
+        nextIndex = ix + 1;
+        if (nextIndex >= items.length)
+          nextIndex = loop ? 0 : items.length - 1;
+        break;
+      }
+      case "prev": {
+        nextIndex = ix - 1;
+        if (nextIndex < 0)
+          nextIndex = loop ? items.length - 1 : 0;
+        break;
+      }
+    }
+    if (nextIndex !== ix && items[nextIndex] !== void 0) {
+      activeIx.value = nextIndex;
+      focusElement(items[nextIndex]);
+    }
+  }
+  const onItemUnmount = (element) => {
+    if (!element)
+      return;
+    const items = getItems();
+    const currentIndex = items.indexOf(element);
+    if (currentIndex === activeIx.value) {
+      nextTick(() => {
+        const newItems = getItems();
+        if (newItems.length === 0)
+          return activeIx.value = -1;
+        const nextIndex = currentIndex < newItems.length ? currentIndex : newItems.length - 1;
+        activeIx.value = nextIndex;
+        newItems[nextIndex]?.focus();
+      });
+    } else if (currentIndex < activeIx.value) {
+      activeIx.value--;
+    }
+  };
+  return {
+    attr,
+    list,
+    loop,
+    orientation,
+    init,
+    focus,
+    getItems,
+    focusElement,
+    onItemUnmount
+  };
+}, {
+  injectionKey,
+  name: "RovingFocus"
+});
+export const useProvideRovingFocus = useProvide;
+export const useRovingFocus = useState;

package/dist/runtime/components/roving-focus/index.d.ts

@@ -0,0 +1 @@
+export { useRovingFocus } from './_lib/context.js';

package/dist/runtime/components/roving-focus/index.js

@@ -0,0 +1 @@
+export { useRovingFocus } from "./_lib/context.js";

package/dist/runtime/components/roving-focus/roving-focus-item.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_16: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/roving-focus/roving-focus-item.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { unrefElement } from "@vueuse/core";
+import { computed, onBeforeUnmount, useTemplateRef } from "vue";
+import Renderless from "../renderless/renderless.vue";
+import { useRovingFocus } from "./_lib/context";
+const { focus, focusElement, orientation, attr, onItemUnmount } = useRovingFocus();
+const isVertical = computed(() => orientation === "vertical" || orientation === "both");
+const isHorizontal = computed(() => orientation === "horizontal" || orientation === "both");
+const attrs = computed(() => ({ [attr]: "" }));
+const ref = useTemplateRef("item");
+onBeforeUnmount(() => {
+  const el = unrefElement(ref);
+  onItemUnmount(el);
+});
+</script>
+
+<template>
+	<Renderless
+		v-bind='attrs'
+		ref='item'
+		:tabindex='-1'
+		@keydown.up.prevent='isVertical && focus("prev", $event.currentTarget)'
+		@keydown.down.prevent='isVertical && focus("next", $event.currentTarget)'
+		@keydown.left.prevent='isHorizontal && focus("prev", $event.currentTarget)'
+		@keydown.right.prevent='isHorizontal && focus("next", $event.currentTarget)'
+		@keydown.home.prevent='focus("first")'
+		@keydown.end.prevent='focus("last")'
+		@click.prevent='focusElement($event.currentTarget)'
+	>
+		<slot />
+	</Renderless>
+</template>

package/dist/runtime/components/roving-focus/roving-focus-item.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_16: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/roving-focus/roving-focus.d.vue.ts

@@ -0,0 +1,21 @@
+export interface RovingFocusProps {
+    /** Loop focus from last to first and vice versa */
+    loop?: boolean;
+    /** Allowed arrow key directions */
+    orientation?: 'vertical' | 'horizontal' | 'both';
+    /** Custom attribute instead of data-roving-item */
+    attr?: string;
+}
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<RovingFocusProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<RovingFocusProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/roving-focus/roving-focus.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { nextTick, onMounted, useTemplateRef } from "vue";
+import Renderless from "../renderless/renderless.vue";
+import { useProvideRovingFocus } from "./_lib/context";
+const { loop = false, orientation = "vertical" } = defineProps({
+  loop: { type: Boolean, required: false },
+  orientation: { type: String, required: false },
+  attr: { type: String, required: false }
+});
+const list = useTemplateRef("list");
+const { init } = useProvideRovingFocus({
+  list,
+  loop,
+  orientation
+});
+onMounted(() => nextTick(() => init()));
+</script>
+
+<template>
+	<Renderless ref='list'>
+		<slot />
+	</Renderless>
+</template>

package/dist/runtime/components/roving-focus/roving-focus.vue.d.ts

@@ -0,0 +1,21 @@
+export interface RovingFocusProps {
+    /** Loop focus from last to first and vice versa */
+    loop?: boolean;
+    /** Allowed arrow key directions */
+    orientation?: 'vertical' | 'horizontal' | 'both';
+    /** Custom attribute instead of data-roving-item */
+    attr?: string;
+}
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<RovingFocusProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<RovingFocusProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/select/select.d.vue.ts

@@ -23,7 +23,7 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
         open?: boolean;
         modelValue?: ComboboxItem<Value, Ext> | null;
         search?: string;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("../combobox/index.js").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("../combobox/index.js").ComboboxDropdownEventSource) => void) & ((evt: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((evt: "update:search", value: string) => void) & ((evt: "update:open", value: boolean) => void)>>> & import("vue").PublicProps;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("..").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("..").ComboboxDropdownEventSource) => void) & ((evt: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((evt: "update:search", value: string) => void) & ((evt: "update:open", value: boolean) => void)>>> & import("vue").PublicProps;
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {
@@ -37,7 +37,7 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
     } & {
         rightSection?: (props: {}) => any;
     };
-    emit: (((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("../combobox/index.js").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("../combobox/index.js").ComboboxDropdownEventSource) => void)) & (((evt: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((evt: "update:search", value: string) => void) & ((evt: "update:open", value: boolean) => void));
+    emit: (((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("..").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("..").ComboboxDropdownEventSource) => void)) & (((evt: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((evt: "update:search", value: string) => void) & ((evt: "update:open", value: boolean) => void));
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/select/select.vue.d.ts

@@ -23,7 +23,7 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
         open?: boolean;
         modelValue?: ComboboxItem<Value, Ext> | null;
         search?: string;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("../combobox/index.js").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("../combobox/index.js").ComboboxDropdownEventSource) => void) & ((evt: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((evt: "update:search", value: string) => void) & ((evt: "update:open", value: boolean) => void)>>> & import("vue").PublicProps;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("..").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("..").ComboboxDropdownEventSource) => void) & ((evt: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((evt: "update:search", value: string) => void) & ((evt: "update:open", value: boolean) => void)>>> & import("vue").PublicProps;
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {
@@ -37,7 +37,7 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
     } & {
         rightSection?: (props: {}) => any;
     };
-    emit: (((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("../combobox/index.js").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("../combobox/index.js").ComboboxDropdownEventSource) => void)) & (((evt: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((evt: "update:search", value: string) => void) & ((evt: "update:open", value: boolean) => void));
+    emit: (((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("..").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("..").ComboboxDropdownEventSource) => void)) & (((evt: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((evt: "update:search", value: string) => void) & ((evt: "update:open", value: boolean) => void));
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/tabs/tabs-tab.d.vue.ts

@@ -1,4 +1,4 @@
-import type { Mod } from '@nui/composals';
+import type { Mod } from '@nui/utils';
 export interface TabsTabProps {
     value: string;
     mod?: Mod | Mod[];

package/dist/runtime/components/tabs/tabs-tab.vue.d.ts

@@ -1,4 +1,4 @@
-import type { Mod } from '@nui/composals';
+import type { Mod } from '@nui/utils';
 export interface TabsTabProps {
     value: string;
     mod?: Mod | Mod[];