nuance-ui 0.3.0 → 0.3.2

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/tabs/tabs-root.d.vue.ts

@@ -62,8 +62,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
 }>, {
-    orientation: "vertical" | "horizontal";
     variant: TabsVariant;
+    orientation: "vertical" | "horizontal";
     placement: "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -62,8 +62,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
 }>, {
-    orientation: "vertical" | "horizontal";
     variant: TabsVariant;
+    orientation: "vertical" | "horizontal";
     placement: "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/text.vue

@@ -45,7 +45,7 @@ const _mod = computed(() => [{
 const style = useVarsResolver((theme) => ({
   root: {
     "--text-fz": getFontSize(fz || size),
-    "--text-ff": ff ? `var(--font-family${ff === "text" ? "" : ff})` : void 0,
+    "--text-ff": ff ? `var(--font-family-${ff === "text" ? "" : ff})` : void 0,
     "--text-fw": fw?.toString(),
     "--text-lh": getLineHeight(lh || size),
     "--text-gradient": variant === "gradient" ? getGradient(gradient, theme) : void 0,

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";

package/dist/runtime/composables/use-countdown.d.ts

@@ -0,0 +1,19 @@
+import type { Ref } from 'vue';
+export interface UseCountdownOptions {
+    /** Countdown duration in ms, `0` disables the timer */
+    duration: number;
+    /** Interval step in ms @default 16 */
+    step?: number;
+    /** Whether the timer is currently paused */
+    paused?: Ref<boolean>;
+    /** Called when the countdown reaches 0 */
+    onComplete: () => void;
+}
+export interface UseCountdownReturn {
+    /** Remaining time in ms */
+    remaining: Ref<number>;
+    /** Remaining time as a percentage of the total duration, `0` if duration is `0` */
+    progress: Ref<number>;
+}
+/** Countdown timer driven by `useIntervalFn`, pausable via an external ref. */
+export declare function useCountdown({ duration, step, paused, onComplete, }: UseCountdownOptions): UseCountdownReturn;

package/dist/runtime/composables/use-countdown.js

@@ -0,0 +1,30 @@
+import { useIntervalFn } from "@vueuse/core";
+import { computed, ref, watch } from "vue";
+export function useCountdown({
+  duration,
+  step = 16,
+  paused,
+  onComplete
+}) {
+  const active = duration > 0;
+  const remaining = ref(duration);
+  const progress = computed(() => active ? remaining.value / duration * 100 : 0);
+  const { pause, resume } = useIntervalFn(() => {
+    remaining.value -= step;
+    if (remaining.value <= 0) {
+      pause();
+      onComplete();
+    }
+  }, step, { immediate: active && !paused?.value });
+  if (paused) {
+    watch(paused, (isPaused) => {
+      if (!active)
+        return;
+      if (isPaused)
+        pause();
+      else
+        resume();
+    });
+  }
+  return { remaining, progress };
+}

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

@@ -0,0 +1,4 @@
+export { default as NNotificationsProvider } from './notifications-provider.vue.js';
+export { $notifications } from './notifications-store.js';
+export type * from './types';
+export { useNotifications } from './use-notifications.js';

package/dist/runtime/notifications/index.js

@@ -0,0 +1,3 @@
+export { default as NNotificationsProvider } from "./notifications-provider.vue";
+export { $notifications } from "./notifications-store.js";
+export { useNotifications } from "./use-notifications.js";

package/dist/runtime/notifications/lib.d.ts

@@ -0,0 +1,4 @@
+/** Unique id for a notification. */
+export declare function createId(): string;
+/** Resolves the effective auto-close: a notification number/false wins, else the global value. */
+export declare function getAutoClose(global: number | false, notification: number | false | undefined): number | false;

package/dist/runtime/notifications/lib.js

@@ -0,0 +1,14 @@
+let counter = 0;
+export function createId() {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto)
+    return crypto.randomUUID();
+  counter += 1;
+  return `notification-${Date.now()}-${counter}`;
+}
+export function getAutoClose(global, notification) {
+  if (typeof notification === "number")
+    return notification;
+  if (notification === false || global === false)
+    return false;
+  return global;
+}

package/dist/runtime/notifications/notification-container.d.vue.ts

@@ -0,0 +1,20 @@
+import type { NotificationData } from './types.js';
+type __VLS_Props = {
+    /** Notification data object */
+    data: NotificationData;
+    /** Global auto-close duration in ms, or false to disable */
+    autoClose: number | false;
+    /** Whether the timer is currently paused */
+    paused: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    hide: (id: string) => any;
+    hoverStart: () => any;
+    hoverEnd: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onHide?: ((id: string) => any) | undefined;
+    onHoverStart?: (() => any) | undefined;
+    onHoverEnd?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/notifications/notification-container.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { onBeforeUnmount, onMounted, toRef } from "vue";
+import Notification from "../components/notification.vue";
+import { useCountdown } from "../composables";
+import { getAutoClose } from "./lib";
+const props = defineProps({
+  data: { type: Object, required: true },
+  autoClose: { type: [Number, Boolean], required: true },
+  paused: { type: Boolean, required: true }
+});
+const emit = defineEmits(["hide", "hoverStart", "hoverEnd"]);
+const duration = getAutoClose(props.autoClose, props.data.autoClose);
+const { progress } = useCountdown({
+  duration: typeof duration === "number" ? duration : 0,
+  paused: toRef(props, "paused"),
+  onComplete: () => emit("hide", props.data.id)
+});
+onMounted(() => {
+  props.data.onOpen?.(props.data.id);
+});
+onBeforeUnmount(() => {
+  props.data.onClose?.(props.data.id);
+});
+</script>
+
+<template>
+	<Notification
+		v-bind='props.data'
+		v-model:progress='progress'
+		:with-progress='props.data.withProgress && !!duration'
+		@close="emit('hide', props.data.id)"
+		@mouseenter='$emit("hoverStart")'
+		@mouseleave='$emit("hoverEnd")'
+	/>
+</template>

package/dist/runtime/notifications/notification-container.vue.d.ts

@@ -0,0 +1,20 @@
+import type { NotificationData } from './types.js';
+type __VLS_Props = {
+    /** Notification data object */
+    data: NotificationData;
+    /** Global auto-close duration in ms, or false to disable */
+    autoClose: number | false;
+    /** Whether the timer is currently paused */
+    paused: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    hide: (id: string) => any;
+    hoverStart: () => any;
+    hoverEnd: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onHide?: ((id: string) => any) | undefined;
+    onHoverStart?: (() => any) | undefined;
+    onHoverEnd?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/notifications/notifications-provider.d.vue.ts

@@ -0,0 +1,22 @@
+import type { Classes } from '@nui/types';
+import type { NotificationPosition } from './types.js';
+export interface NotificationProviderProps {
+    /** Default notification position @default 'bottom-right' */
+    position?: NotificationPosition;
+    /** Auto-close in ms, or `false` to disable @default 4000 */
+    autoClose?: number | false;
+    /** Max visible at once @default 5 */
+    limit?: number;
+    /** Viewport z-index @default 1 */
+    zIndex?: number | string;
+    /** Container width @default 440 */
+    containerWidth?: number | string;
+    /** Transition duration in ms @default 250 */
+    transitionDuration?: number;
+    /** Which notifications pause auto-close on hover @default 'all' */
+    pauseOnHover?: 'all' | 'notification';
+    classes?: Classes<'root' | 'notification'>;
+}
+declare const __VLS_export: import("vue").DefineComponent<NotificationProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NotificationProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;