nuance-ui 0.3.1 → 0.3.2

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^4.0.0"
   },
-  "version": "0.3.1",
+  "version": "0.3.2",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -108,7 +108,8 @@ const module$1 = defineNuxtModule({
       form: resolve("./runtime/form"),
       utils: resolve("./runtime/utils"),
       types: resolve("./runtime/types"),
-      modals: resolve("./runtime/modals")
+      modals: resolve("./runtime/modals"),
+      notifications: resolve("./runtime/notifications")
     };
     for (const key in aliases) {
       nuxt.options.alias[`@nui/${key}`] = aliases[key];

package/dist/runtime/components/dialog/ui/dialog-root.d.vue.ts

@@ -1,7 +1,7 @@
 import type { Classes, NuanceRadius, NuanceShadow, NuanceSize, NuanceSpacing } from '@nui/types';
 import type { CSSProperties, RendererElement } from 'vue';
 import type { BoxProps } from '../../box.vue.js';
-import type { TransitionName } from '../../transition.vue.js';
+import type { TransitionName } from '../../transition/transition.vue.js';
 import type { DialogModel } from '../types.js';
 interface StyleProps {
     /** Top/bottom modal offset @default `5dvh` */

package/dist/runtime/components/dialog/ui/dialog-root.vue

@@ -3,7 +3,7 @@ import { getRadius, getShadow, getSize, getSpacing, rem } from "@nui/utils";
 import { unrefElement } from "@vueuse/core";
 import { computed, shallowRef, watch } from "vue";
 import Box from "../../box.vue";
-import NTransition from "../../transition.vue";
+import NTransition from "../../transition/transition.vue";
 import { useProvideDialogState } from "../lib";
 import css from "./dialog.module.css";
 defineOptions({ inheritAttrs: false });

package/dist/runtime/components/dialog/ui/dialog-root.vue.d.ts

@@ -1,7 +1,7 @@
 import type { Classes, NuanceRadius, NuanceShadow, NuanceSize, NuanceSpacing } from '@nui/types';
 import type { CSSProperties, RendererElement } from 'vue';
 import type { BoxProps } from '../../box.vue.js';
-import type { TransitionName } from '../../transition.vue.js';
+import type { TransitionName } from '../../transition/transition.vue.js';
 import type { DialogModel } from '../types.js';
 interface StyleProps {
     /** Top/bottom modal offset @default `5dvh` */

package/dist/runtime/components/index.d.ts

@@ -21,10 +21,12 @@ export * from './drawer/index.js';
 export * from './files/index.js';
 export type * from './floating-indicator.vue';
 export * from './input/index.js';
+export type * from './kbd.vue';
 export * from './link/index.js';
 export * from './loader/index.js';
 export * from './modal/index.js';
 export * from './nav-link/index.js';
+export type * from './notification.vue';
 export type * from './paper.vue';
 export * from './popover/index.js';
 export * from './progress/index.js';
@@ -39,6 +41,6 @@ export type * from './textarea.vue';
 export * from './time-picker/index.js';
 export type * from './timeline.vue';
 export type * from './title.vue';
-export type * from './transition.vue';
+export * from './transition/index.js';
 export * from './tree/index.js';
 export * from './visually-hidden/index.js';

package/dist/runtime/components/index.js

@@ -23,5 +23,6 @@ export * from "./switch/index.js";
 export * from "./table/index.js";
 export * from "./tabs/index.js";
 export * from "./time-picker/index.js";
+export * from "./transition/index.js";
 export * from "./tree/index.js";
 export * from "./visually-hidden/index.js";

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

@@ -0,0 +1,25 @@
+import type { AnyString, NuanceSize } from '@nui/types';
+import type { BoxProps } from './box.vue.js';
+export interface KbdVars {
+    root: '--kbd-fz';
+}
+export interface KbdProps extends BoxProps {
+    /**
+     * Controls `font-size` and `padding`
+     * @default `'sm'`
+     */
+    size?: NuanceSize | AnyString;
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<KbdProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KbdProps> & 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/kbd.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { useVarsResolver } from "@nui/composables";
+import { getSize } from "@nui/utils";
+import Box from "./box.vue";
+const { size } = defineProps({
+  size: { type: [String, Object], required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+const style = useVarsResolver(() => ({
+  root: { "--kbd-fz": getSize(size, "kbd-fz") }
+}));
+</script>
+
+<template>
+	<Box
+		is='kbd'
+		:style='style.root'
+		:class='$style.root'
+		:mod
+	>
+		<slot />
+	</Box>
+</template>
+
+<style module>
+.root{--kbd-fz-xs:10px;--kbd-fz-sm:12px;--kbd-fz-md:14px;--kbd-fz-lg:16px;--kbd-fz-xl:20px;--kbd-fz:var(--kbd-fz-sm);border:solid;border-radius:var(--radius-sm);border-width:1px 1px 3px;font-family:var(--font-family-monospace);font-size:var(--kbd-fz);font-weight:var(--font-weight-bold);line-height:var(--line-height);padding:.12em .45em;text-align:center;unicode-bidi:embed;@mixin where-light{background-color:var(--color-gray-0);border-color:var(--color-gray-3);color:var(--color-gray-7)}@mixin where-dark{background-color:var(--color-dark-6);border-color:var(--color-dark-4);color:var(--color-dark-0)}}
+</style>

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

@@ -0,0 +1,25 @@
+import type { AnyString, NuanceSize } from '@nui/types';
+import type { BoxProps } from './box.vue.js';
+export interface KbdVars {
+    root: '--kbd-fz';
+}
+export interface KbdProps extends BoxProps {
+    /**
+     * Controls `font-size` and `padding`
+     * @default `'sm'`
+     */
+    size?: NuanceSize | AnyString;
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<KbdProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KbdProps> & 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/notification.d.vue.ts

@@ -0,0 +1,82 @@
+import type { HTMLAttributes } from 'vue';
+import type { Classes, NuanceColor, NuanceRadius, StringOrVNode } from '../types/index.js';
+import type { ActionIconProps } from './action-icon/action-icon.vue.js';
+import type { BoxProps } from './box.vue.js';
+import type { ButtonProps } from './button/button.vue.js';
+import type { LoaderProps } from './loader/index.js';
+export type NotificationOrientation = 'vertical' | 'horizontal';
+export interface NotificationAction extends ButtonProps {
+    /** Button label */
+    label: string;
+    /** Click handler */
+    onClick?: (event: MouseEvent) => void;
+}
+type NotificationClasses = 'root' | 'icon' | 'loader' | 'body' | 'title' | 'description' | 'actions' | 'closeButton';
+export interface NotificationProps extends BoxProps {
+    /**
+    * Controls icon background color or notification accent line color, key of `theme.colors` or any valid CSS color.
+    * When `icon` is provided, sets the icon background color.
+    * When no icon is provided, sets the colored accent line on the left.
+    *  @default theme.primaryColor
+    */
+    color?: NuanceColor;
+    /**
+     * Key of `theme.radius` or any valid CSS value to set `border-radius`
+     * @default theme.defaultRadius
+     */
+    radius?: NuanceRadius;
+    /** Notification icon, replaces color line */
+    icon?: string;
+    /** Notification title, displayed above the message body */
+    title?: StringOrVNode;
+    /** Notification body. When no title is provided, this is the main message. */
+    message?: StringOrVNode;
+    /** Action buttons */
+    actions?: NotificationAction[];
+    /** Actions/close layout @default 'vertical' */
+    orientation?: NotificationOrientation;
+    /** If set, displays a `Loader` component instead of the icon. Takes precedence over the `icon` prop if both are provided. */
+    loading?: boolean;
+    /** Shows the auto-close progress bar @default false */
+    withProgress?: boolean;
+    /** Adds border to the root element */
+    withBorder?: boolean;
+    /** If set, the close button is visible @default true */
+    withCloseButton?: boolean;
+    /** Props passed down to the close button */
+    closeButtonProps?: ActionIconProps;
+    /** Props passed down to the `Loader` component */
+    loaderProps?: LoaderProps & HTMLAttributes;
+    role?: string;
+    classes?: Classes<NotificationClasses>;
+}
+type __VLS_Props = NotificationProps;
+type __VLS_ModelProps = {
+    'progress'?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_8: {}, __VLS_20: {}, __VLS_38: {}, __VLS_61: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_8) => any;
+} & {
+    title?: (props: typeof __VLS_20) => any;
+} & {
+    default?: (props: typeof __VLS_38) => any;
+} & {
+    actions?: (props: typeof __VLS_61) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    "update:progress": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onUpdate:progress"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, 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/notification.vue

@@ -0,0 +1,144 @@
+<script setup>
+import { getRadius, getThemeColor, useVarsResolver } from "#imports";
+import ActionIcon from "./action-icon/action-icon.vue";
+import Box from "./box.vue";
+import Button from "./button/button.vue";
+import Loader from "./loader/loader.vue";
+import Progress from "./progress/progress.vue";
+const {
+  withCloseButton = true,
+  radius,
+  color,
+  mod,
+  loading,
+  withBorder,
+  role = "alert",
+  icon,
+  loaderProps,
+  title,
+  message,
+  actions,
+  orientation = "horizontal",
+  closeButtonProps,
+  classes,
+  withProgress = false
+} = defineProps({
+  color: { type: null, required: false },
+  radius: { type: [String, Number], required: false },
+  icon: { type: String, required: false },
+  title: { type: [String, Object, Function], required: false },
+  message: { type: [String, Object, Function], required: false },
+  actions: { type: Array, required: false },
+  orientation: { type: String, required: false },
+  loading: { type: Boolean, required: false },
+  withProgress: { type: Boolean, required: false },
+  withBorder: { type: Boolean, required: false },
+  withCloseButton: { type: Boolean, required: false },
+  closeButtonProps: { type: Object, required: false },
+  loaderProps: { type: Object, required: false },
+  role: { type: String, required: false },
+  classes: { type: Object, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+defineEmits(["close"]);
+const progress = defineModel("progress", { type: Number, ...{ default: 0 } });
+const style = useVarsResolver((theme) => ({
+  root: {
+    "--notification-radius": radius === void 0 ? void 0 : getRadius(radius),
+    "--notification-color": color ? getThemeColor(color, theme) : void 0
+  }
+}));
+</script>
+
+<template>
+	<Box
+		:style='style.root'
+		:class='[$style.root, classes?.root]'
+		:role
+		:mod='[{
+  "with-icon": !!icon || !!$slots.icon || loading,
+  "with-border": withBorder,
+  orientation
+}, mod]'
+	>
+		<div v-if='icon && !loading' :class='[$style.icon, classes?.icon]'>
+			<slot name='icon'>
+				<Icon :name='icon' />
+			</slot>
+		</div>
+
+		<Loader
+			v-if='loading'
+			size='28px'
+			:color
+			v-bind='loaderProps'
+			:class='[$style.loader, loaderProps?.class, classes?.loader]'
+		/>
+
+		<div :class='[$style.body, classes?.body]'>
+			<div v-if='title || $slots.title' :class='[$style.title, classes?.title]'>
+				<slot name='title'>
+					<component :is='title()' v-if='typeof title === "function"' />
+					<component :is='title' v-else-if='title && typeof title === "object"' />
+					<template v-else>
+						{{ title }}
+					</template>
+				</slot>
+			</div>
+
+			<Box
+				:class='[$style.description, classes?.description]'
+				:mod='{ "with-title": !!title || !!$slots.title }'
+			>
+				<slot>
+					<component :is='message()' v-if='typeof message === "function"' />
+					<component :is='message' v-else-if='message && typeof message === "object"' />
+					<template v-else>
+						{{ message }}
+					</template>
+				</slot>
+			</Box>
+
+			<div v-if='withProgress' :class='$style.progress'>
+				<Progress
+					v-model='progress'
+					:class='$style.progressInput'
+					:color
+					size='4px'
+				/>
+			</div>
+
+			<Box
+				v-if='actions?.length || $slots.actions'
+				:class='[$style.actions, classes?.actions]'
+				:mod='{ orientation }'
+			>
+				<slot name='actions'>
+					<Button
+						v-for='({ label, ...action }, index) in actions'
+						:key='index'
+						size='compact-sm'
+						:color
+						v-bind='action'
+					>
+						{{ label }}
+					</Button>
+				</slot>
+			</Box>
+		</div>
+
+		<ActionIcon
+			v-if='withCloseButton'
+			icon='lucide:x'
+			variant='subtle'
+			:class='[$style.closeButton, classes?.closeButton]'
+			v-bind='closeButtonProps'
+			@click='$emit("close")'
+		/>
+	</Box>
+</template>
+
+<style module>
+.root{--notification-radius:var(--radius-default);--notification-color:var(--color-primary-filled);align-items:center;box-shadow:var(--shadow-lg);box-sizing:border-box;display:flex;overflow:hidden;padding-bottom:var(--spacing-xs);padding-inline-end:var(--spacing-xs);padding-top:var(--spacing-xs);padding-inline-start:22px;position:relative}.root,.root:before{border-radius:var(--notification-radius)}.root:before{background-color:var(--notification-color);bottom:var(--notification-radius);content:"";display:block;inset-inline-start:4px;position:absolute;top:var(--notification-radius);width:6px}.root{@mixin where-light{background-color:var(--color-white)}}.root{@mixin where-dark{background-color:var(--color-dark-6)}}.root:where([data-with-icon]):before{display:none}.root:where([data-with-border]){@mixin where-light{border-bottom-color:var(--color-gray-3);border-bottom-style:solid;border-bottom-width:1px;border-left-color:var(--color-gray-3);border-left-style:solid;border-left-width:1px;border-right-color:var(--color-gray-3);border-right-style:solid;border-right-width:1px;border-top-color:var(--color-gray-3);border-top-style:solid;border-top-width:1px}@mixin where-dark{border-bottom-color:var(--color-dark-4);border-bottom-style:solid;border-bottom-width:1px;border-left-color:var(--color-dark-4);border-left-style:solid;border-left-width:1px;border-right-color:var(--color-dark-4);border-right-style:solid;border-right-width:1px;border-top-color:var(--color-dark-4);border-top-style:solid;border-top-width:1px}}.icon{align-items:center;background-color:var(--notification-color);border-radius:28px;box-sizing:border-box;color:var(--color-white);display:flex;height:28px;justify-content:center;width:28px}.icon,.loader{margin-inline-end:var(--spacing-md)}.body{flex:1;margin-inline-end:var(--spacing-xs);overflow:hidden}.title{font-size:var(--font-size-sm);font-weight:500;line-height:var(--line-height-sm);margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;@mixin where-light{color:var(--color-gray-9)}@mixin where-dark{color:var(--color-white)}}.description{font-size:var(--font-size-sm);line-height:var(--line-height-sm);overflow:hidden;text-overflow:ellipsis;@mixin where-light{color:var(--color-black)}@mixin where-dark{color:var(--color-dark-0)}}.description:where([data-with-title]){@mixin where-light{color:var(--color-gray-6)}@mixin where-dark{color:var(--color-dark-2)}}.actions{align-items:center;display:flex;gap:var(--spacing-xs);margin-top:var(--spacing-xs)}.actions[data-orientation=horizontal],.closeButton{margin-inline-start:var(--spacing-xs)}.progress{bottom:0;left:0;position:absolute;right:0}.progress .progressInput{border-radius:0 0 var(--radius-md) var(--radius-md)}
+</style>

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

@@ -0,0 +1,82 @@
+import type { HTMLAttributes } from 'vue';
+import type { Classes, NuanceColor, NuanceRadius, StringOrVNode } from '../types/index.js';
+import type { ActionIconProps } from './action-icon/action-icon.vue.js';
+import type { BoxProps } from './box.vue.js';
+import type { ButtonProps } from './button/button.vue.js';
+import type { LoaderProps } from './loader/index.js';
+export type NotificationOrientation = 'vertical' | 'horizontal';
+export interface NotificationAction extends ButtonProps {
+    /** Button label */
+    label: string;
+    /** Click handler */
+    onClick?: (event: MouseEvent) => void;
+}
+type NotificationClasses = 'root' | 'icon' | 'loader' | 'body' | 'title' | 'description' | 'actions' | 'closeButton';
+export interface NotificationProps extends BoxProps {
+    /**
+    * Controls icon background color or notification accent line color, key of `theme.colors` or any valid CSS color.
+    * When `icon` is provided, sets the icon background color.
+    * When no icon is provided, sets the colored accent line on the left.
+    *  @default theme.primaryColor
+    */
+    color?: NuanceColor;
+    /**
+     * Key of `theme.radius` or any valid CSS value to set `border-radius`
+     * @default theme.defaultRadius
+     */
+    radius?: NuanceRadius;
+    /** Notification icon, replaces color line */
+    icon?: string;
+    /** Notification title, displayed above the message body */
+    title?: StringOrVNode;
+    /** Notification body. When no title is provided, this is the main message. */
+    message?: StringOrVNode;
+    /** Action buttons */
+    actions?: NotificationAction[];
+    /** Actions/close layout @default 'vertical' */
+    orientation?: NotificationOrientation;
+    /** If set, displays a `Loader` component instead of the icon. Takes precedence over the `icon` prop if both are provided. */
+    loading?: boolean;
+    /** Shows the auto-close progress bar @default false */
+    withProgress?: boolean;
+    /** Adds border to the root element */
+    withBorder?: boolean;
+    /** If set, the close button is visible @default true */
+    withCloseButton?: boolean;
+    /** Props passed down to the close button */
+    closeButtonProps?: ActionIconProps;
+    /** Props passed down to the `Loader` component */
+    loaderProps?: LoaderProps & HTMLAttributes;
+    role?: string;
+    classes?: Classes<NotificationClasses>;
+}
+type __VLS_Props = NotificationProps;
+type __VLS_ModelProps = {
+    'progress'?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_8: {}, __VLS_20: {}, __VLS_38: {}, __VLS_61: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_8) => any;
+} & {
+    title?: (props: typeof __VLS_20) => any;
+} & {
+    default?: (props: typeof __VLS_38) => any;
+} & {
+    actions?: (props: typeof __VLS_61) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    "update:progress": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onUpdate:progress"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, 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/transition/index.d.ts

@@ -0,0 +1,2 @@
+export type * from './transition-group.vue';
+export type * from './transition.vue';

package/dist/runtime/components/transition/transition-group.d.vue.ts

@@ -0,0 +1,35 @@
+import type { TransitionName } from './transition.vue.js';
+export interface TransitionGroupProps {
+    /**
+     * Transition animation name
+     * @default `'pop-bottom-left'`
+     */
+    name?: TransitionName;
+    /**
+     * Transition duration in ms
+     * @default `250`
+     */
+    duration?: number;
+    /**
+     * Transition delay in ms
+     * @default `0`
+     */
+    delay?: number;
+    /** Wrapper element/component rendered around the list @default `'div'` */
+    tag?: string;
+    /** Whether to apply transition on initial render @default `false` */
+    appear?: boolean;
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TransitionGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TransitionGroupProps> & 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/transition/transition-group.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { computed } from "vue";
+const {
+  name = "pop-bottom-left",
+  duration = 250,
+  delay,
+  tag = "div",
+  appear
+} = defineProps({
+  name: { type: String, required: false },
+  duration: { type: Number, required: false },
+  delay: { type: Number, required: false },
+  tag: { type: String, required: false },
+  appear: { type: Boolean, required: false }
+});
+const style = computed(() => ({
+  "--transition-duration": `${duration}ms`,
+  "--transition-delay": delay ? `${delay}ms` : void 0
+}));
+</script>
+
+<template>
+	<TransitionGroup
+		:style
+		:name
+		:tag
+		:appear
+		move-class='transition-move'
+	>
+		<slot />
+	</TransitionGroup>
+</template>

package/dist/runtime/components/transition/transition-group.vue.d.ts

@@ -0,0 +1,35 @@
+import type { TransitionName } from './transition.vue.js';
+export interface TransitionGroupProps {
+    /**
+     * Transition animation name
+     * @default `'pop-bottom-left'`
+     */
+    name?: TransitionName;
+    /**
+     * Transition duration in ms
+     * @default `250`
+     */
+    duration?: number;
+    /**
+     * Transition delay in ms
+     * @default `0`
+     */
+    delay?: number;
+    /** Wrapper element/component rendered around the list @default `'div'` */
+    tag?: string;
+    /** Whether to apply transition on initial render @default `false` */
+    appear?: boolean;
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TransitionGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TransitionGroupProps> & 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/transition/transition.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { computed } from "vue";
+const {
+  name = "pop-bottom-left",
+  duration = 250,
+  delay,
+  appear,
+  mode
+} = defineProps({
+  name: { type: String, required: false },
+  duration: { type: Number, required: false },
+  delay: { type: Number, required: false },
+  mode: { type: String, required: false },
+  appear: { type: Boolean, required: false }
+});
+const emit = defineEmits(["afterLeave"]);
+const style = computed(() => ({
+  "--transition-duration": `${duration}ms`,
+  "--transition-delay": delay ? `${delay}ms` : void 0
+}));
+</script>
+
+<template>
+	<Transition
+		:style
+		:name
+		:mode
+		:appear
+		@after-leave='() => emit("afterLeave")'
+	>
+		<slot />
+	</Transition>
+</template>

package/dist/runtime/components/tree/_ui/tree-item.vue

@@ -6,7 +6,7 @@ import ActionIcon from "../../action-icon/action-icon.vue";
 import Button from "../../button/button.vue";
 import Loader from "../../loader/loader.vue";
 import RovingFocusItem from "../../roving-focus/roving-focus-item.vue";
-import UTransition from "../../transition.vue";
+import NTransition from "../../transition/transition.vue";
 import { useTreeState } from "../lib/context";
 import { filterTreeItems } from "../lib/filter-tree-items";
 import { useTreeItemHandlers } from "../lib/item-handlers";
@@ -106,7 +106,7 @@ const { handleClick, handleKeyDown } = useTreeItemHandlers(path, isFolder, expan
 			</Button>
 		</RovingFocusItem>
 
-		<UTransition name='scale-y'>
+		<NTransition name='scale-y'>
 			<ul
 				v-if='expanded && data && data.length > 0'
 				:class='$style.list'
@@ -120,7 +120,7 @@ const { handleClick, handleKeyDown } = useTreeItemHandlers(path, isFolder, expan
 					:level='level + 1'
 				/>
 			</ul>
-		</UTransition>
+		</NTransition>
 	</li>
 </template>
 

package/dist/runtime/composables/index.d.ts

@@ -1,6 +1,7 @@
 export * from './create-strict-injection.js';
 export * from './use-active-link.js';
 export * from './use-config.js';
+export * from './use-countdown.js';
 export * from './use-date-config.js';
 export * from './use-floating-indicator.js';
 export * from './use-selectable-group.js';

package/dist/runtime/composables/index.js

@@ -1,6 +1,7 @@
 export * from "./create-strict-injection.js";
 export * from "./use-active-link.js";
 export * from "./use-config.js";
+export * from "./use-countdown.js";
 export * from "./use-date-config.js";
 export * from "./use-floating-indicator.js";
 export * from "./use-selectable-group.js";