nuance-ui 0.3.1 → 0.3.3

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;

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

@@ -0,0 +1,117 @@
+<script setup>
+import { computed, onMounted, ref, useTemplateRef, watch } from "vue";
+import { useVarsResolver } from "#imports";
+import NotificationContainer from "./notification-container.vue";
+import { $notifications } from "./notifications-store";
+import { useNotifications } from "./use-notifications";
+const {
+  position = "bottom-right",
+  autoClose = 4e3,
+  limit = 5,
+  zIndex = 1,
+  containerWidth = 440,
+  transitionDuration = 250,
+  pauseOnHover = "all"
+} = defineProps({
+  position: { type: String, required: false },
+  autoClose: { type: [Number, Boolean], required: false },
+  limit: { type: Number, required: false },
+  zIndex: { type: [Number, String], required: false },
+  containerWidth: { type: [Number, String], required: false },
+  transitionDuration: { type: Number, required: false },
+  pauseOnHover: { type: String, required: false },
+  classes: { type: Object, required: false }
+});
+const POSITIONS = [
+  "top-left",
+  "top-center",
+  "top-right",
+  "bottom-left",
+  "bottom-center",
+  "bottom-right"
+];
+const { notifications } = useNotifications();
+const hoveredId = ref(null);
+const grouped = computed(() => {
+  const acc = Object.fromEntries(
+    POSITIONS.map((p) => [p, []])
+  );
+  for (const n of notifications.value)
+    acc[n.position ?? position].push(n);
+  return acc;
+});
+function isPaused(id) {
+  if (pauseOnHover === "all")
+    return hoveredId.value !== null;
+  return hoveredId.value === id;
+}
+function transitionName(position2) {
+  if (position2.startsWith("top"))
+    return "slide-down";
+  return "slide-up";
+}
+const style = useVarsResolver(() => ({
+  root: {
+    "--notifications-z-index": String(zIndex),
+    "--notifications-width": typeof containerWidth === "number" ? `${containerWidth}px` : containerWidth,
+    "--transition-duration": `${transitionDuration}ms`
+  }
+}));
+const viewportRefs = useTemplateRef("viewports");
+function showPopovers() {
+  for (const el of viewportRefs.value ?? []) {
+    if (el && "showPopover" in el && !el.matches(":popover-open")) {
+      try {
+        el.showPopover();
+      } catch {
+      }
+    }
+  }
+}
+onMounted(() => {
+  $notifications.updateState({
+    limit,
+    defaultPosition: position
+  });
+  showPopovers();
+});
+watch(() => limit, (limit2) => $notifications.updateState({ limit: limit2 }));
+watch(() => position, (position2) => $notifications.updateState({ defaultPosition: position2 }));
+</script>
+
+<template>
+	<div
+		v-for='viewportPosition in POSITIONS'
+		:key='viewportPosition'
+		ref='viewports'
+		popover='manual'
+		role='region'
+		aria-label='Notifications'
+		aria-live='polite'
+		aria-atomic='false'
+		:data-position='viewportPosition'
+		:class='[$style.viewport, classes?.root]'
+		:style='style.root'
+	>
+		<TransitionGroup
+			:name='transitionName(viewportPosition)'
+			:duration='transitionDuration'
+		>
+			<NotificationContainer
+				v-for='n in grouped[viewportPosition]'
+				:key='n.id'
+				:data='n'
+				:auto-close
+				:paused='isPaused(n.id)'
+				:class='classes?.notification'
+				@hide='$notifications.hide($event)'
+				@hover-start='hoveredId = n.id'
+				@hover-end='hoveredId = null'
+			/>
+		</TransitionGroup>
+	</div>
+</template>
+
+<style module>
+.viewport{background:transparent;border:0;display:flex;flex-direction:column-reverse;gap:var(--spacing-sm);inset:auto;margin:0;max-width:100%;overflow:visible;padding:var(--spacing-md);position:fixed;width:var(--notifications-width);z-index:var(--notifications-z-index)}.viewport[data-position=top-left]{left:0;top:0}.viewport[data-position=top-center]{left:50%;top:0;transform:translateX(-50%)}.viewport[data-position=top-right]{right:0;top:0}.viewport[data-position=bottom-left]{bottom:0;flex-direction:column;left:0}.viewport[data-position=bottom-center]{bottom:0;flex-direction:column;left:50%;transform:translateX(-50%)}.viewport[data-position=bottom-right]{bottom:0;flex-direction:column;right:0}.viewport:not(:popover-open){display:none}
+</style>

package/dist/runtime/notifications/notifications-provider.vue.d.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;

package/dist/runtime/notifications/notifications-store.d.ts

@@ -0,0 +1,25 @@
+import type { NotificationInput, NotificationsState } from './types.js';
+/**
+ * Global notifications store.
+ *
+ * Holds a reactive list of visible notifications plus an overflow queue.
+ * Shows, updates, and removes notifications from any context.
+ */
+export declare class NotificationsStore {
+    readonly state: NotificationsState;
+    private constructor();
+    static get instance(): NotificationsStore;
+    /** Shows a notification, or queues it past the limit. Returns its id. */
+    show(data: NotificationInput): string;
+    /** Removes a notification and promotes the next queued one. */
+    hide(id: string): void;
+    /** Patches an existing notification in place. Noop if absent. */
+    update(id: string, data: Partial<NotificationInput>): void;
+    /** Removes everything. */
+    clean(): void;
+    /** Removes only queued notifications. */
+    cleanQueue(): void;
+    /** Patches store configuration (limit / defaultPosition). */
+    updateState(patch: Partial<Pick<NotificationsState, 'limit' | 'defaultPosition'>>): void;
+}
+export declare const $notifications: import("vue").Raw<NotificationsStore>;

package/dist/runtime/notifications/notifications-store.js

@@ -0,0 +1,80 @@
+import { markRaw, reactive } from "vue";
+import { createId } from "./lib.js";
+const GLOBAL_KEY = "__nui_notifications_store__";
+export class NotificationsStore {
+  state = reactive({
+    notifications: [],
+    queue: [],
+    limit: 5,
+    defaultPosition: "bottom-right"
+  });
+  constructor() {
+  }
+  static get instance() {
+    if (!globalThis[GLOBAL_KEY])
+      globalThis[GLOBAL_KEY] = new NotificationsStore();
+    return globalThis[GLOBAL_KEY];
+  }
+  /** Shows a notification, or queues it past the limit. Returns its id. */
+  show(data) {
+    const id = data.id ?? createId();
+    const visible = this.state.notifications.find((n) => n.id === id);
+    if (visible) {
+      Object.assign(visible, data, { id });
+      return id;
+    }
+    const queued = this.state.queue.find((n) => n.id === id);
+    if (queued) {
+      Object.assign(queued, data, { id });
+      return id;
+    }
+    const next = { ...data, id };
+    if (this.state.notifications.length < this.state.limit)
+      this.state.notifications.push(next);
+    else
+      this.state.queue.push(next);
+    return id;
+  }
+  /** Removes a notification and promotes the next queued one. */
+  hide(id) {
+    const index = this.state.notifications.findIndex((n) => n.id === id);
+    if (index === -1) {
+      const queuedIndex = this.state.queue.findIndex((n) => n.id === id);
+      if (queuedIndex !== -1)
+        this.state.queue.splice(queuedIndex, 1);
+      return;
+    }
+    this.state.notifications.splice(index, 1);
+    const next = this.state.queue.shift();
+    if (next)
+      this.state.notifications.push(next);
+  }
+  /** Patches an existing notification in place. Noop if absent. */
+  update(id, data) {
+    const visible = this.state.notifications.find((n) => n.id === id);
+    if (visible) {
+      Object.assign(visible, data, { id });
+      return;
+    }
+    const queued = this.state.queue.find((n) => n.id === id);
+    if (queued)
+      Object.assign(queued, data, { id });
+  }
+  /** Removes everything. */
+  clean() {
+    this.state.notifications = [];
+    this.state.queue = [];
+  }
+  /** Removes only queued notifications. */
+  cleanQueue() {
+    this.state.queue = [];
+  }
+  /** Patches store configuration (limit / defaultPosition). */
+  updateState(patch) {
+    if (patch.limit !== void 0)
+      this.state.limit = patch.limit;
+    if (patch.defaultPosition !== void 0)
+      this.state.defaultPosition = patch.defaultPosition;
+  }
+}
+export const $notifications = markRaw(NotificationsStore.instance);

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

@@ -0,0 +1,50 @@
+import type { StringOrVNode } from '@nui/types';
+import type { ButtonProps } from '../components/button/button.vue.js';
+import type { NotificationProps } from '../components/notification.vue.js';
+/** Notification placement on screen. */
+export type NotificationPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+/** Actions/close layout. */
+export type NotificationOrientation = 'vertical' | 'horizontal';
+/** Action button rendered inside a notification. */
+export interface NotificationAction extends ButtonProps {
+    /** Button label */
+    label: string;
+    /** Click handler */
+    onClick?: (event: MouseEvent) => void;
+}
+/** Argument of `$notifications.show()`. */
+export interface NotificationInput extends Omit<NotificationProps, 'title' | 'message'> {
+    /** Stable id. Reusing an existing id updates that notification in place. */
+    id?: string;
+    /** Notification title */
+    title?: StringOrVNode;
+    /** Notification body */
+    message?: StringOrVNode;
+    /** Action buttons */
+    actions?: NotificationAction[];
+    /** Actions/close layout @default 'vertical' */
+    orientation?: NotificationOrientation;
+    /** Overrides the provider position */
+    position?: NotificationPosition;
+    /** Auto-close in ms, or `false` to keep open. Overrides the provider value */
+    autoClose?: number | false;
+    /** Called after the notification is removed */
+    onClose?: (id: string) => void;
+    /** Called once when the notification mounts */
+    onOpen?: (id: string) => void;
+}
+/** Stored notification — always has an id. */
+export interface NotificationData extends NotificationInput {
+    id: string;
+}
+/** Reactive store state. */
+export interface NotificationsState {
+    /** Currently visible notifications (<= limit) */
+    notifications: NotificationData[];
+    /** Notifications waiting for a free slot */
+    queue: NotificationData[];
+    /** Max visible at once */
+    limit: number;
+    /** Position used when a notification has none */
+    defaultPosition: NotificationPosition;
+}

package/dist/runtime/notifications/use-notifications.d.ts

@@ -0,0 +1,7 @@
+/** Reactive access to the global notifications state. */
+export declare function useNotifications(): {
+    /** Currently visible notifications. */
+    notifications: import("vue").ComputedRef<import("./types.js").NotificationData[]>;
+    /** Queued notifications waiting for a free slot. */
+    queue: import("vue").ComputedRef<import("./types.js").NotificationData[]>;
+};

package/dist/runtime/notifications/use-notifications.js

@@ -0,0 +1,10 @@
+import { computed } from "vue";
+import { $notifications } from "./notifications-store.js";
+export function useNotifications() {
+  return {
+    /** Currently visible notifications. */
+    notifications: computed(() => $notifications.state.notifications),
+    /** Queued notifications waiting for a free slot. */
+    queue: computed(() => $notifications.state.queue)
+  };
+}

package/dist/runtime/styles/global.css

@@ -1 +1 @@
-@import url(./baseline.css);@import url(./const.css);@import url(./colors.css);@import url(./dark-theme.css);@import url(./light-theme.css);.light-hidden{@mixin light{display:none}}.dark-hidden{@mixin dark{display:none}}.focus-auto:focus-visible{outline:2px solid var(--color-primary-filled);outline-offset:2px}.focus-always:focus{outline:2px solid var(--color-primary-filled);outline-offset:2px}.focus-never:focus{outline:none}.active:active{transform:translateY(rem(1px))}fieldset:disabled .active:active{transform:none}.rotate-rtl{@mixin where-rtl{transform:rotate(180deg)}}[data-v-hidden]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}
+@import url(./baseline.css);@import url(./const.css);@import url(./colors.css);@import url(./dark-theme.css);@import url(./light-theme.css);@import url(./transitions.css);.light-hidden{@mixin light{display:none}}.dark-hidden{@mixin dark{display:none}}.focus-auto:focus-visible{outline:2px solid var(--color-primary-filled);outline-offset:2px}.focus-always:focus{outline:2px solid var(--color-primary-filled);outline-offset:2px}.focus-never:focus{outline:none}.active:active{transform:translateY(rem(1px))}fieldset:disabled .active:active{transform:none}.rotate-rtl{@mixin where-rtl{transform:rotate(180deg)}}[data-v-hidden]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}

package/dist/runtime/styles/transitions.css

@@ -0,0 +1 @@
+:root{--transition-delay:0ms;--transition-duration:250ms}.transition-move{transition:transform var(--transition-duration) var(--transition-delay) ease}.fade-enter-active,.fade-leave-active{transition:opacity var(--transition-duration) var(--transition-delay) ease}.fade-enter-from,.fade-leave-to{opacity:0}.fade-up-enter-active,.fade-up-leave-active{transform:translateY(0);transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.fade-up-enter-from,.fade-up-leave-to{opacity:0;transform:translateY(30px)}.fade-down-enter-active,.fade-down-leave-active{transform:translateY(0);transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.fade-down-enter-from,.fade-down-leave-to{opacity:0;transform:translateY(-30px)}.fade-left-enter-active,.fade-left-leave-active{transform:translateX(0);transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.fade-left-enter-from,.fade-left-leave-to{opacity:0;transform:translateX(30px)}.fade-right-enter-active,.fade-right-leave-active{transform:translateX(0);transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.fade-right-enter-from,.fade-right-leave-to{opacity:0;transform:translateX(-30px)}.scale-enter-active,.scale-leave-active{transform:scale(1);transform-origin:top;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.scale-enter-from,.scale-leave-to{opacity:0;transform:scale(0)}.scale-y-enter-active,.scale-y-leave-active{transform:scaleY(1);transform-origin:top;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.scale-y-enter-from,.scale-y-leave-to{opacity:0;transform:scaleY(0)}.scale-x-enter-active,.scale-x-leave-active{transform:scaleX(1);transform-origin:top;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.scale-x-enter-from,.scale-x-leave-to{opacity:0;transform:scaleX(0)}.skew-up-enter-active,.skew-up-leave-active{transform:translateY(0) skew(0deg,0deg);transform-origin:top;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.skew-up-enter-from,.skew-up-leave-to{opacity:0;transform:translateY(-20px) skew(-10deg,-5deg)}.skew-down-enter-active,.skew-down-leave-active{transform:translateY(0) skew(0deg,0deg);transform-origin:bottom;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.skew-down-enter-from,.skew-down-leave-to{opacity:0;transform:translateY(20px) skew(-10deg,-5deg)}.rotate-left-enter-active,.rotate-left-leave-active{transform:translateY(0) rotate(0deg);transform-origin:bottom;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.rotate-left-enter-from,.rotate-left-leave-to{opacity:0;transform:translateY(20px) rotate(-5deg)}.rotate-right-enter-active,.rotate-right-leave-active{transform:translateY(0) rotate(0deg);transform-origin:bottom;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.rotate-right-enter-from,.rotate-right-leave-to{opacity:0;transform:translateY(20px) rotate(5deg)}.slide-down-enter-active,.slide-down-leave-active{transform:translateY(0);transform-origin:top;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.slide-down-enter-from,.slide-down-leave-to{opacity:0;transform:translateY(-100%)}.slide-up-enter-active,.slide-up-leave-active{transform:translateY(0);transform-origin:top;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.slide-up-enter-from,.slide-up-leave-to{opacity:0;transform:translateY(100%)}.slide-left-enter-active,.slide-left-leave-active{transform:translateX(0);transform-origin:top;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.slide-left-enter-from,.slide-left-leave-to{opacity:0;transform:translateX(100%)}.slide-right-enter-active,.slide-right-leave-active{transform:translateX(0);transform-origin:top;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.slide-right-enter-from,.slide-right-leave-to{opacity:0;transform:translateX(-100%)}.pop-enter-active,.pop-leave-active{transform:scale(1);transform-origin:center center;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.pop-enter-from,.pop-leave-to{opacity:0;transform:scale(.9) translateY(10px);transform-origin:center center}.pop-bottom-left-enter-active,.pop-bottom-left-leave-active{transform:scale(1);transform-origin:bottom left;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.pop-bottom-left-enter-from,.pop-bottom-left-leave-to{opacity:0;transform:scale(.9) translateY(10px);transform-origin:bottom left}.pop-bottom-right-enter-active,.pop-bottom-right-leave-active{transform:scale(1);transform-origin:bottom right;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.pop-bottom-right-enter-from,.pop-bottom-right-leave-to{opacity:0;transform:scale(.9) translateY(10px);transform-origin:bottom right}.pop-top-left-enter-active,.pop-top-left-leave-active{transform:scale(1);transform-origin:top left;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.pop-top-left-enter-from,.pop-top-left-leave-to{opacity:0;transform:scale(.9) translateY(-10px);transform-origin:top left}.pop-top-right-enter-active,.pop-top-right-leave-active{transform:scale(1);transform-origin:top right;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.pop-top-right-enter-from,.pop-top-right-leave-to{opacity:0;transform:scale(.9) translateY(-10px);transform-origin:top right}

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

@@ -4,6 +4,8 @@ export type * from './styling';
 export type * from './theme';
 /** Value that may be synchronous or wrapped in a promise. */
 export type MaybePromise<T = unknown> = T | Promise<T>;
+/** String, VNode, or a render function producing a VNode. */
+export type StringOrVNode = string | VNode | (() => VNode);
 export type AnyString = string & {};
 export type DynamicSlotsKeys<Name extends string | undefined, Suffix extends string | undefined = undefined> = (Name extends string ? Suffix extends string ? Name | `${Name}-${Suffix}` : Name : never);
 export type SlotProps<T extends {