nuance-ui 0.3.0 → 0.3.2

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

@@ -0,0 +1,65 @@
+import type { Classes } from '@nui/types';
+import type { BoxProps } from './box.vue.js';
+export type CollapseClasses = 'root' | 'trigger' | 'content';
+/** Props passed to the trigger slot, spread onto a custom toggle element for a11y. */
+export interface CollapseTriggerProps {
+    'aria-controls': string;
+    'aria-expanded': boolean;
+    'disabled': boolean | undefined;
+    'data-state': 'open' | 'closed';
+    'data-disabled': '' | undefined;
+}
+export interface CollapseProps {
+    /**
+     * The open state of the collapsible when it is initially rendered.
+     * Use when you do not need to control its open state.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /** Disables the component */
+    disabled?: boolean;
+    /**
+     * If set, the content stays mounted when collapsed.
+     * When `false`, content is unmounted after the exit transition.
+     * @default true
+     */
+    keepMounted?: boolean;
+    /** Transition duration in ms @default 200 */
+    transitionDuration?: number;
+    /** Transition timing function @default 'ease' */
+    transitionTimingFunction?: string;
+    /** If set, opacity is animated alongside height @default true */
+    animateOpacity?: boolean;
+    /** Element modifiers transformed into `data-` attributes, falsy values are removed */
+    mod?: BoxProps['mod'];
+    /** Styles API */
+    classes?: Classes<CollapseClasses>;
+}
+export interface CollapseSlots {
+    /** Collapsible content */
+    default?: (props: {
+        open: boolean;
+    }) => any;
+    /** Toggle control. Spread `props` onto a button to get a11y wiring. */
+    trigger?: (props: {
+        open: boolean;
+        toggle: () => void;
+        props: CollapseTriggerProps;
+    }) => any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CollapseProps & {
+    open?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<CollapseProps & {
+    open?: boolean;
+}> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CollapseSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/collapse.vue

@@ -0,0 +1,144 @@
+<script>
+import Box from "./box.vue";
+</script>
+
+<script setup>
+import { unrefElement, usePreferredReducedMotion } from "@vueuse/core";
+import { computed, nextTick, onMounted, ref, useId, useTemplateRef, watch } from "vue";
+const {
+  disabled,
+  keepMounted = true,
+  transitionDuration = 200,
+  transitionTimingFunction = "ease",
+  animateOpacity = true,
+  mod,
+  classes
+} = defineProps({
+  defaultOpen: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  keepMounted: { type: Boolean, required: false },
+  transitionDuration: { type: Number, required: false },
+  transitionTimingFunction: { type: String, required: false },
+  animateOpacity: { type: Boolean, required: false },
+  mod: { type: [Object, Array, null], required: false },
+  classes: { type: Object, required: false }
+});
+defineSlots();
+const opened = defineModel("open", { type: Boolean, ...{ default: (p) => p.defaultOpen } });
+const contentId = useId();
+const reducedMotion = usePreferredReducedMotion();
+const duration = computed(() => reducedMotion.value === "reduce" ? 0 : transitionDuration);
+function toggle() {
+  if (disabled)
+    return;
+  opened.value = !opened.value;
+}
+const dataState = computed(() => opened.value ? "open" : "closed");
+const triggerProps = computed(() => ({
+  "aria-controls": contentId,
+  "aria-expanded": opened.value,
+  "disabled": disabled || void 0,
+  "data-state": dataState.value,
+  "data-disabled": disabled ? "" : void 0
+}));
+const el = useTemplateRef("content");
+const mounted = ref(keepMounted || opened.value);
+let timer;
+function transitionStyle() {
+  const opacity = animateOpacity ? `, opacity ${duration.value}ms ${transitionTimingFunction}` : "";
+  return `height ${duration.value}ms ${transitionTimingFunction}${opacity}`;
+}
+function expand(node, instant) {
+  clearTimeout(timer);
+  node.style.overflow = "hidden";
+  if (instant) {
+    node.style.height = "";
+    node.style.opacity = "";
+    node.style.transition = "";
+    node.style.overflow = "";
+    return;
+  }
+  node.style.height = "0px";
+  if (animateOpacity)
+    node.style.opacity = "0";
+  void node.offsetHeight;
+  node.style.transition = transitionStyle();
+  node.style.height = `${node.scrollHeight}px`;
+  if (animateOpacity)
+    node.style.opacity = "1";
+  timer = setTimeout(() => {
+    node.style.transition = "";
+    node.style.height = "";
+    node.style.overflow = "";
+    node.style.opacity = "";
+  }, duration.value);
+}
+function collapse(node, instant) {
+  clearTimeout(timer);
+  node.style.overflow = "hidden";
+  node.style.height = `${node.scrollHeight}px`;
+  void node.offsetHeight;
+  if (instant) {
+    node.style.transition = "";
+    node.style.height = "0px";
+    if (animateOpacity)
+      node.style.opacity = "0";
+    if (!keepMounted)
+      mounted.value = false;
+    return;
+  }
+  node.style.transition = transitionStyle();
+  node.style.height = "0px";
+  if (animateOpacity)
+    node.style.opacity = "0";
+  timer = setTimeout(() => {
+    if (!keepMounted)
+      mounted.value = false;
+  }, duration.value);
+}
+onMounted(() => {
+  const node = unrefElement(el);
+  if (!node || opened.value)
+    return;
+  node.style.height = "0px";
+  node.style.overflow = "hidden";
+  if (animateOpacity)
+    node.style.opacity = "0";
+});
+watch(opened, async (value) => {
+  if (value) {
+    if (!mounted.value) {
+      mounted.value = true;
+      await nextTick();
+    }
+    if (el.value)
+      expand(unrefElement(el), duration.value === 0);
+  } else if (el.value) {
+    collapse(unrefElement(el), duration.value === 0);
+  }
+});
+</script>
+
+<template>
+	<Box
+		:mod='[{ disabled, state: dataState }, mod]'
+		:class='classes?.root'
+	>
+		<slot
+			name='trigger'
+			:open='opened'
+			:toggle='toggle'
+			:props='triggerProps'
+		/>
+
+		<Box
+			v-if='mounted'
+			:id='contentId'
+			ref='content'
+			:class='classes?.content'
+			:mod='{ disabled, open: opened }'
+		>
+			<slot :open='opened' />
+		</Box>
+	</box>
+</template>

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

@@ -0,0 +1,65 @@
+import type { Classes } from '@nui/types';
+import type { BoxProps } from './box.vue.js';
+export type CollapseClasses = 'root' | 'trigger' | 'content';
+/** Props passed to the trigger slot, spread onto a custom toggle element for a11y. */
+export interface CollapseTriggerProps {
+    'aria-controls': string;
+    'aria-expanded': boolean;
+    'disabled': boolean | undefined;
+    'data-state': 'open' | 'closed';
+    'data-disabled': '' | undefined;
+}
+export interface CollapseProps {
+    /**
+     * The open state of the collapsible when it is initially rendered.
+     * Use when you do not need to control its open state.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /** Disables the component */
+    disabled?: boolean;
+    /**
+     * If set, the content stays mounted when collapsed.
+     * When `false`, content is unmounted after the exit transition.
+     * @default true
+     */
+    keepMounted?: boolean;
+    /** Transition duration in ms @default 200 */
+    transitionDuration?: number;
+    /** Transition timing function @default 'ease' */
+    transitionTimingFunction?: string;
+    /** If set, opacity is animated alongside height @default true */
+    animateOpacity?: boolean;
+    /** Element modifiers transformed into `data-` attributes, falsy values are removed */
+    mod?: BoxProps['mod'];
+    /** Styles API */
+    classes?: Classes<CollapseClasses>;
+}
+export interface CollapseSlots {
+    /** Collapsible content */
+    default?: (props: {
+        open: boolean;
+    }) => any;
+    /** Toggle control. Spread `props` onto a button to get a11y wiring. */
+    trigger?: (props: {
+        open: boolean;
+        toggle: () => void;
+        props: CollapseTriggerProps;
+    }) => any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CollapseProps & {
+    open?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<CollapseProps & {
+    open?: boolean;
+}> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CollapseSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/date-time-picker.d.vue.ts

@@ -41,16 +41,16 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     next: () => any;
     "update:modelValue": (value: string | Date | null | undefined) => any;
     prev: () => any;
-    level: () => any;
     open: () => any;
+    level: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSelect?: ((date: import("./calendar/index.js").Selection) => any) | undefined;
     onClose?: (() => any) | undefined;
     onNext?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | Date | null | undefined) => any) | undefined;
     onPrev?: (() => any) | undefined;
-    onLevel?: (() => any) | undefined;
     onOpen?: (() => any) | undefined;
+    onLevel?: (() => 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;

package/dist/runtime/components/date-time-picker.vue.d.ts

@@ -41,16 +41,16 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     next: () => any;
     "update:modelValue": (value: string | Date | null | undefined) => any;
     prev: () => any;
-    level: () => any;
     open: () => any;
+    level: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSelect?: ((date: import("./calendar/index.js").Selection) => any) | undefined;
     onClose?: (() => any) | undefined;
     onNext?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | Date | null | undefined) => any) | undefined;
     onPrev?: (() => any) | undefined;
-    onLevel?: (() => any) | undefined;
     onOpen?: (() => any) | undefined;
+    onLevel?: (() => 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;

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

@@ -1,4 +1,4 @@
-export type * from './accordion.vue';
+export * from './accordion/index.js';
 export * from './action-icon/index.js';
 export * from './app-shell/index.js';
 export * from './avatar/index.js';
@@ -11,7 +11,7 @@ export * from './calendar/index.js';
 export * from './card/index.js';
 export * from './checkbox/index.js';
 export * from './chip/index.js';
-export * from './collapsible/index.js';
+export type * from './collapse.vue';
 export * from './combobox/index.js';
 export type * from './container.vue';
 export type * from './date-time-picker.vue';
@@ -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

@@ -1,3 +1,4 @@
+export * from "./accordion/index.js";
 export * from "./action-icon/index.js";
 export * from "./app-shell/index.js";
 export * from "./avatar/index.js";
@@ -6,7 +7,6 @@ export * from "./calendar/index.js";
 export * from "./card/index.js";
 export * from "./checkbox/index.js";
 export * from "./chip/index.js";
-export * from "./collapsible/index.js";
 export * from "./combobox/index.js";
 export * from "./dialog/index.js";
 export * from "./drawer/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/input/date-picker.d.vue.ts

@@ -20,8 +20,8 @@ declare const __VLS_export: <Mode extends SelectionMode>(__VLS_props: NonNullabl
         onNext?: (() => any) | undefined;
         "onUpdate:modelValue"?: ((value: DateSelection<Mode> | undefined) => any) | undefined;
         onPrev?: (() => any) | undefined;
-        onLevel?: (() => any) | undefined;
         onOpen?: (() => any) | undefined;
+        onLevel?: (() => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -38,7 +38,7 @@ declare const __VLS_export: <Mode extends SelectionMode>(__VLS_props: NonNullabl
     } & {
         description?: (props: {}) => any;
     };
-    emit: (((evt: "select", date: DateSelection<Mode>) => void) & ((evt: "close") => void) & ((evt: "next") => void) & ((evt: "prev") => void) & ((evt: "level") => void) & ((evt: "open") => void)) & ((event: "update:modelValue", value: DateSelection<Mode> | undefined) => void);
+    emit: (((evt: "select", date: DateSelection<Mode>) => void) & ((evt: "close") => void) & ((evt: "next") => void) & ((evt: "prev") => void) & ((evt: "open") => void) & ((evt: "level") => void)) & ((event: "update:modelValue", value: DateSelection<Mode> | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/input/date-picker.vue.d.ts

@@ -20,8 +20,8 @@ declare const __VLS_export: <Mode extends SelectionMode>(__VLS_props: NonNullabl
         onNext?: (() => any) | undefined;
         "onUpdate:modelValue"?: ((value: DateSelection<Mode> | undefined) => any) | undefined;
         onPrev?: (() => any) | undefined;
-        onLevel?: (() => any) | undefined;
         onOpen?: (() => any) | undefined;
+        onLevel?: (() => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -38,7 +38,7 @@ declare const __VLS_export: <Mode extends SelectionMode>(__VLS_props: NonNullabl
     } & {
         description?: (props: {}) => any;
     };
-    emit: (((evt: "select", date: DateSelection<Mode>) => void) & ((evt: "close") => void) & ((evt: "next") => void) & ((evt: "prev") => void) & ((evt: "level") => void) & ((evt: "open") => void)) & ((event: "update:modelValue", value: DateSelection<Mode> | undefined) => void);
+    emit: (((evt: "select", date: DateSelection<Mode>) => void) & ((evt: "close") => void) & ((evt: "next") => void) & ((evt: "prev") => void) & ((evt: "open") => void) & ((evt: "level") => void)) & ((event: "update:modelValue", value: DateSelection<Mode> | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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/link/lib.d.ts

@@ -1,5 +1,5 @@
 import type { NuxtLinkProps } from '#app';
 export declare function pickLinkProps<T extends NuxtLinkProps>(props: T): {
-    link: Pick<T, "replace" | "target" | "to" | "external" | "rel" | "noRel" | "prefetch" | "noPrefetch" | "prefetchOn" | "trailingSlash" | "activeClass" | "ariaCurrentValue" | "exactActiveClass" | "prefetchedClass" | "viewTransition">;
-    rest: Omit<T, "replace" | "target" | "to" | "external" | "rel" | "noRel" | "prefetch" | "noPrefetch" | "prefetchOn" | "trailingSlash" | "activeClass" | "ariaCurrentValue" | "exactActiveClass" | "prefetchedClass" | "viewTransition">;
+    link: Pick<T, "replace" | "to" | "target" | "external" | "rel" | "noRel" | "prefetch" | "noPrefetch" | "prefetchOn" | "trailingSlash" | "activeClass" | "ariaCurrentValue" | "exactActiveClass" | "prefetchedClass" | "viewTransition">;
+    rest: Omit<T, "replace" | "to" | "target" | "external" | "rel" | "noRel" | "prefetch" | "noPrefetch" | "prefetchOn" | "trailingSlash" | "activeClass" | "ariaCurrentValue" | "exactActiveClass" | "prefetchedClass" | "viewTransition">;
 };

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;
+    };
+};