nuance-ui 0.1.49 → 0.1.51

package/dist/module.json

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

package/dist/runtime/components/app-shell/app-shell-main.vue

@@ -14,6 +14,9 @@ const { mod } = defineProps({
 
 <style module lang="postcss">
 .root {
+	display: flex;
+	flex-direction: column;
+
 	min-height: 100dvh;
 	padding-top: calc(var(--app-shell-header-offset, 0rem) + var(--app-shell-padding));
 	padding-bottom: calc(var(--app-shell-footer-offset, 0rem) + var(--app-shell-padding));

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

@@ -25,15 +25,15 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    select: (args_0: number) => any;
     clear: () => any;
+    select: (args_0: number) => any;
     close: (args_0: import("./types/index.js").ComboboxDropdownEventSource) => any;
     submit: (args_0: string, args_1: import("./types/index.js").ComboboxItem) => any;
     open: (args_0: import("./types/index.js").ComboboxDropdownEventSource) => any;
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onSelect?: ((args_0: number) => any) | undefined;
     onClear?: (() => any) | undefined;
+    onSelect?: ((args_0: number) => any) | undefined;
     onClose?: ((args_0: import("./types/index.js").ComboboxDropdownEventSource) => any) | undefined;
     onSubmit?: ((args_0: string, args_1: import("./types/index.js").ComboboxItem) => any) | undefined;
     onOpen?: ((args_0: import("./types/index.js").ComboboxDropdownEventSource) => any) | undefined;

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

@@ -25,15 +25,15 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    select: (args_0: number) => any;
     clear: () => any;
+    select: (args_0: number) => any;
     close: (args_0: import("./types/index.js").ComboboxDropdownEventSource) => any;
     submit: (args_0: string, args_1: import("./types/index.js").ComboboxItem) => any;
     open: (args_0: import("./types/index.js").ComboboxDropdownEventSource) => any;
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onSelect?: ((args_0: number) => any) | undefined;
     onClear?: (() => any) | undefined;
+    onSelect?: ((args_0: number) => any) | undefined;
     onClose?: ((args_0: import("./types/index.js").ComboboxDropdownEventSource) => any) | undefined;
     onSubmit?: ((args_0: string, args_1: import("./types/index.js").ComboboxItem) => any) | undefined;
     onOpen?: ((args_0: import("./types/index.js").ComboboxDropdownEventSource) => any) | undefined;

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

@@ -20,6 +20,7 @@ export * from './input/index.js';
 export * from './link/index.js';
 export * from './loader/index.js';
 export * from './modal/index.js';
+export * from './modals/index.js';
 export * from './nav-link/index.js';
 export * from './paper.vue.js';
 export * from './popover/index.js';

package/dist/runtime/components/index.js

@@ -18,6 +18,7 @@ export * from "./input/index.js";
 export * from "./link/index.js";
 export * from "./loader/index.js";
 export * from "./modal/index.js";
+export * from "./modals/index.js";
 export * from "./nav-link/index.js";
 export * from "./paper.vue";
 export * from "./popover/index.js";

package/dist/runtime/components/modals/_confirm-modal/confirm-modal.d.vue.ts

@@ -0,0 +1,28 @@
+import type { MaybePromise } from '@nui/types';
+import type { ButtonProps } from '../../button/button.vue.js';
+import type { ModalRootProps } from '../../modal/modal-root.vue.js';
+type ConfirmLabels = Record<'confirm' | 'cancel', string>;
+export interface ConfirmModalProps extends ModalRootProps {
+    /** Modal title */
+    title: string;
+    /** Description text displayed below the title */
+    description?: string;
+    /**
+     * Custom button labels.
+     * @default { confirm: 'Confirm', cancel: 'Cancel' }
+     */
+    labels?: ConfirmLabels;
+    /** Display variant. When `'danger'`, the confirm button turns red */
+    variant?: 'default' | 'danger';
+    /** Callback invoked on cancel */
+    onCancel?: () => void;
+    /** Callback invoked on confirm */
+    onConfirm?: () => MaybePromise<void>;
+    /** Additional props for the cancel button */
+    cancelProps?: Partial<ButtonProps>;
+    /** Additional props for the confirm button */
+    confirmProps?: Partial<ButtonProps>;
+}
+declare const __VLS_export: import("vue").DefineComponent<ConfirmModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ConfirmModalProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/modals/_confirm-modal/confirm-modal.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { useModal } from "@nui/composals";
+import { ref } from "vue";
+import Button from "../../button/button.vue";
+import ModalCloseButton from "../../modal/modal-close-button.vue";
+import ModalHeader from "../../modal/modal-header.vue";
+import ModalRoot from "../../modal/modal-root.vue";
+import Title from "../../title.vue";
+const {
+  title,
+  description: body,
+  labels,
+  variant = "default",
+  cancelProps,
+  confirmProps,
+  onConfirm,
+  onCancel,
+  ...rest
+} = defineProps({
+  title: { type: String, required: true },
+  description: { type: String, required: false },
+  labels: { type: Object, required: false },
+  variant: { type: String, required: false },
+  onCancel: { type: Function, required: false },
+  onConfirm: { type: Function, required: false },
+  cancelProps: { type: Object, required: false },
+  confirmProps: { type: Object, required: false },
+  centered: { type: Boolean, required: false },
+  fullScreen: { type: Boolean, required: false },
+  withinPortal: { type: Boolean, required: false },
+  yOffset: { type: void 0, required: false },
+  xOffset: { type: void 0, required: false },
+  radius: { type: [String, Number], required: false },
+  size: { type: String, required: false },
+  shadow: { type: String, required: false },
+  padding: { type: [String, Number], required: false },
+  transition: { type: String, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+const { opened, resolve: hide } = useModal("confirm");
+const loading = ref(false);
+function handleCancel() {
+  hide(false);
+  onCancel?.();
+}
+async function hanleConfirm() {
+  try {
+    loading.value = true;
+    await onConfirm?.();
+  } finally {
+    loading.value = false;
+    hide(true);
+  }
+}
+</script>
+
+<template>
+	<ModalRoot v-model:open='opened' v-bind='rest' size='sm'>
+		<ModalHeader>
+			<Title order='4'>
+				{{ title }}
+			</Title>
+			<ModalCloseButton />
+		</ModalHeader>
+
+		<p v-if='body' :class='$style.body'>
+			{{ body }}
+		</p>
+
+		<footer :class='$style.footer'>
+			<Button
+				variant='default'
+				v-bind='cancelProps'
+				@click='handleCancel()'
+			>
+				{{ labels?.cancel ?? "Cancel" }}
+			</Button>
+			<Button
+				variant='filled'
+				v-bind='confirmProps'
+				:color="variant === 'danger' ? 'red' : void 0"
+				:loading
+				@click='hanleConfirm()'
+			>
+				{{ labels?.confirm ?? "Confirm" }}
+			</Button>
+		</footer>
+	</ModalRoot>
+</template>
+
+<style module>
+.body{color:var(--color-dimmed);margin:0}.footer{display:flex;gap:var(--spacing-sm);justify-content:flex-end;margin-top:var(--spacing-md)}
+</style>

package/dist/runtime/components/modals/_confirm-modal/confirm-modal.vue.d.ts

@@ -0,0 +1,28 @@
+import type { MaybePromise } from '@nui/types';
+import type { ButtonProps } from '../../button/button.vue.js';
+import type { ModalRootProps } from '../../modal/modal-root.vue.js';
+type ConfirmLabels = Record<'confirm' | 'cancel', string>;
+export interface ConfirmModalProps extends ModalRootProps {
+    /** Modal title */
+    title: string;
+    /** Description text displayed below the title */
+    description?: string;
+    /**
+     * Custom button labels.
+     * @default { confirm: 'Confirm', cancel: 'Cancel' }
+     */
+    labels?: ConfirmLabels;
+    /** Display variant. When `'danger'`, the confirm button turns red */
+    variant?: 'default' | 'danger';
+    /** Callback invoked on cancel */
+    onCancel?: () => void;
+    /** Callback invoked on confirm */
+    onConfirm?: () => MaybePromise<void>;
+    /** Additional props for the cancel button */
+    cancelProps?: Partial<ButtonProps>;
+    /** Additional props for the confirm button */
+    confirmProps?: Partial<ButtonProps>;
+}
+declare const __VLS_export: import("vue").DefineComponent<ConfirmModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ConfirmModalProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/modals/_confirm-modal/index.d.ts

@@ -0,0 +1,8 @@
+import type { ConfirmModalProps } from './confirm-modal.vue.js';
+/**
+ * Opens the confirm modal from any context.
+ *
+ * Resolves with `true` if the user confirmed, rejects if cancelled.
+ */
+export declare const openConfirmModal: (props?: ConfirmModalProps | undefined) => Promise<boolean>;
+export type { ConfirmModalProps };

package/dist/runtime/components/modals/_confirm-modal/index.js

@@ -0,0 +1,6 @@
+import { $modals } from "@nui/composals";
+import ConfirmModal from "./confirm-modal.vue";
+export const openConfirmModal = $modals.create(
+  "confirm",
+  ConfirmModal
+);

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

@@ -0,0 +1 @@
+export * from './_confirm-modal/index.js';

package/dist/runtime/components/modals/index.js

@@ -0,0 +1 @@
+export * from "./_confirm-modal/index.js";

package/dist/runtime/components/modals/modal-provider.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/modals/modal-provider.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { $modals } from "@nui/composals";
+const activeModals = $modals.modals;
+</script>
+
+<template>
+	<div id='nui-modals-root'>
+		<component
+			:is='entry.component'
+			v-for='[id, entry] in activeModals'
+			:key='id'
+			v-bind='entry.props'
+		/>
+	</div>
+</template>

package/dist/runtime/components/modals/modal-provider.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -24,8 +24,8 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
         modelValue?: ComboboxItem<Value, Ext> | null;
         search?: string;
     }) & {
-        onSelect?: ((args_0: number) => any) | undefined;
         onClear?: (() => any) | undefined;
+        onSelect?: ((args_0: number) => any) | undefined;
         onClose?: ((args_0: import("..").ComboboxDropdownEventSource) => any) | undefined;
         onSubmit?: ((args_0: string, args_1: ComboboxItem) => any) | undefined;
         "onUpdate:modelValue"?: ((value: ComboboxItem<Value, Ext> | null) => any) | undefined;
@@ -48,7 +48,7 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
     } & {
         rightSection?: (props: {}) => any;
     };
-    emit: (((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("..").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("..").ComboboxDropdownEventSource) => void)) & (((event: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((event: "update:search", value: string) => void) & ((event: "update:open", value: boolean) => void));
+    emit: (((evt: "clear") => void) & ((evt: "select", args_0: number) => void) & ((evt: "close", args_0: import("..").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("..").ComboboxDropdownEventSource) => void)) & (((event: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((event: "update:search", value: string) => void) & ((event: "update:open", value: boolean) => void));
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -24,8 +24,8 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
         modelValue?: ComboboxItem<Value, Ext> | null;
         search?: string;
     }) & {
-        onSelect?: ((args_0: number) => any) | undefined;
         onClear?: (() => any) | undefined;
+        onSelect?: ((args_0: number) => any) | undefined;
         onClose?: ((args_0: import("..").ComboboxDropdownEventSource) => any) | undefined;
         onSubmit?: ((args_0: string, args_1: ComboboxItem) => any) | undefined;
         "onUpdate:modelValue"?: ((value: ComboboxItem<Value, Ext> | null) => any) | undefined;
@@ -48,7 +48,7 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
     } & {
         rightSection?: (props: {}) => any;
     };
-    emit: (((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("..").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("..").ComboboxDropdownEventSource) => void)) & (((event: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((event: "update:search", value: string) => void) & ((event: "update:open", value: boolean) => void));
+    emit: (((evt: "clear") => void) & ((evt: "select", args_0: number) => void) & ((evt: "close", args_0: import("..").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("..").ComboboxDropdownEventSource) => void)) & (((event: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((event: "update:search", value: string) => void) & ((event: "update:open", value: boolean) => void));
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,4 +1,5 @@
 export * from './use-active-link.js';
 export * from './use-date-config.js';
+export * from './use-modal/index.js';
 export * from './use-style-resolver.js';
 export * from './use-theme.js';

package/dist/runtime/composals/index.js

@@ -1,4 +1,5 @@
 export * from "./use-active-link.js";
 export * from "./use-date-config.js";
+export * from "./use-modal/index.js";
 export * from "./use-style-resolver.js";
 export * from "./use-theme.js";

package/dist/runtime/composals/use-modal/docs.md

@@ -0,0 +1,302 @@
+# Modal System
+
+Система управления модальными окнами на основе промисов. Позволяет открывать модалки императивно из любого места приложения и получать результат через `await`.
+
+## Архитектура
+
+```
+ModalManager (singleton)        — хранит состояния всех модалок, управляет жизненным циклом
+  ├─ create() / createLazy()    — регистрирует компонент модалки и возвращает функцию-открывашку
+  ├─ show() / hide() / reject() — императивное управление
+  └─ state()                    — реактивное состояние для использования внутри компонента
+
+useModal(id)                    — composable для компонента модалки (opened + resolve)
+
+ModalProvider                   — рендерит все активные модалки в DOM
+```
+
+## Быстрый старт
+
+### 1. Регистрация модалки
+
+```ts
+// src/runtime/components/modals/_my-modal/index.ts
+import { $modals } from '@nui/composals'
+
+import MyModal from './my-modal.vue'
+
+
+export const openMyModal = $modals.create<MyModalProps, string>(
+	'my-modal',
+	MyModal,
+)
+```
+
+### 2. Компонент модалки
+
+```vue
+<!-- my-modal.vue -->
+<script setup lang="ts">
+import { useModal } from '@nui/composals'
+
+
+defineProps<{ message: string }>()
+
+const { opened, resolve } = useModal('my-modal')
+</script>
+
+<template>
+	<ModalRoot v-model:open='opened'>
+		<p>{{ message }}</p>
+		<button @click="resolve('ok')">
+			OK
+		</button>
+	</ModalRoot>
+</template>
+```
+
+### 3. Вызов из любого места
+
+```ts
+const result = await openMyModal({ message: 'Hello!' })
+// result: 'ok'
+```
+
+---
+
+## API
+
+### `ModalManager`
+
+> Файл: `modal-manager.ts`
+
+Singleton-класс, управляющий реестром и жизненным циклом модальных окон. Экспортируется как `$modals`.
+
+```ts
+import { $modals } from '@nui/composals'
+```
+
+#### `create<TProps, TResult>(id, component)`
+
+Регистрирует компонент модалки и возвращает типизированную функцию для её открытия.
+
+```ts
+const openModal = $modals.create<{ name: string }, boolean>(
+	'greeting',
+	GreetingModal,
+)
+
+const confirmed = await openModal({ name: 'World' })
+```
+
+- **id** — уникальный строковый идентификатор модалки
+- **component** — Vue-компонент
+- **Возвращает** — `(props?) => Promise<TResult>`
+
+#### `createLazy<TProps, TResult>(id, loader)`
+
+Аналогичен `create`, но компонент загружается лениво при первом открытии.
+
+```ts
+const openHeavyModal = $modals.createLazy<HeavyProps, void>(
+	'heavy',
+	() => import('./heavy-modal.vue'),
+)
+```
+
+#### `show<T>(id, props?)`
+
+Открывает ранее зарегистрированную модалку по `id`. Возвращает `Promise<T>`.
+
+#### `hide(id, result?)`
+
+Закрывает модалку, резолвит промис переданным `result`.
+
+#### `reject(id, reason?)`
+
+Закрывает модалку, реджектит промис переданным `reason`.
+
+#### `state<Props, Resolve, Reject>(id)`
+
+Возвращает `ComputedRef<ModalState>` — реактивное состояние модалки. Используется внутри компонента модалки через `useModal`.
+
+#### `modals` (getter)
+
+`ShallowRef<Map<string, ModalState>>` — реактивная карта всех активных модалок. Используется в `ModalProvider` для рендеринга.
+
+#### Интерфейс `ModalState`
+
+```ts
+interface ModalState<Props, Resolve, Reject> {
+	id: string
+	component: Component
+	props: Props
+	opened: boolean
+	resolve: (value?: Resolve) => void
+	reject: (reason?: Reject) => void
+}
+```
+
+---
+
+### `useModal(id)`
+
+> Файл: `use-modal.ts`
+
+Composable для использования **внутри** компонента модалки. Связывает компонент с `ModalManager` по `id`.
+
+```ts
+const { opened, resolve } = useModal<MyProps, ResultType>('my-modal')
+```
+
+#### Возвращает
+
+| Поле | Тип | Описание |
+|------|-----|----------|
+| `opened` | `WritableComputedRef<boolean>` | Двусторонний binding для открытия/закрытия. При установке в `false` вызывает `reject`. |
+| `resolve` | `(reason: Resolve) => void` | Закрывает модалку и резолвит промис переданным значением. |
+
+#### Типизация
+
+```ts
+function useModal<
+	Props extends Record<string, unknown>,
+	Resolve = unknown,
+	Reject = unknown,
+>(id: string): { opened: WritableComputedRef<boolean>, resolve: (reason: Resolve) => void }
+```
+
+> **Важно:** `id` должен совпадать с тем, что передан в `$modals.create()`.
+
+---
+
+### `ModalProvider`
+
+> Файл: `modal-provider.vue`
+
+Компонент-контейнер, который рендерит все активные модалки. Должен быть размещён один раз в корне приложения (обычно в `app.vue` или layout).
+
+```vue
+<template>
+	<NuxtPage />
+	<ModalProvider />
+</template>
+```
+
+Внутри итерирует `$modals.modals` и рендерит каждую модалку через `<component :is="..." v-bind="props" />`.
+
+---
+
+## Встроенные модалки
+
+### `ConfirmModal`
+
+> Файл: `_confirm-modal/confirm-modal.vue`
+
+Модалка подтверждения с кнопками «Confirm» / «Cancel». Зарегистрирована с `id = 'confirm'`.
+
+#### Props (`ConfirmModalProps`)
+
+| Prop | Тип | По умолчанию | Описание |
+|------|-----|-------------|----------|
+| `title` | `string` | — | Заголовок модалки (обязательный) |
+| `body` | `string` | — | Текст описания |
+| `labels` | `{ confirm: string, cancel: string }` | `{ confirm: 'Confirm', cancel: 'Cancel' }` | Тексты кнопок |
+| `variant` | `'default' \| 'danger'` | `'default'` | При `'danger'` кнопка подтверждения становится красной |
+| `onCancel` | `() => void` | — | Колбэк при отмене |
+| `onConfirm` | `() => MaybePromise<void>` | — | Колбэк при подтверждении (поддерживает async) |
+| `cancelProps` | `Partial<ButtonProps>` | — | Дополнительные props для кнопки отмены |
+| `confirmProps` | `Partial<ButtonProps>` | — | Дополнительные props для кнопки подтверждения |
+
+Также принимает все props от `ModalRootProps` (например `size`).
+
+#### Использование
+
+```ts
+import { openConfirmModal } from '@nui/components'
+
+// Простое подтверждение
+const confirmed = await openConfirmModal({
+	title: 'Удалить запись?',
+	body: 'Это действие нельзя отменить.',
+	variant: 'danger',
+	labels: { confirm: 'Удалить', cancel: 'Отмена' },
+})
+
+if (confirmed) {
+	// пользователь подтвердил
+}
+```
+
+#### Результат
+
+- **Resolve** → `true` — пользователь нажал «Confirm»
+- **Reject** → промис реджектится — пользователь нажал «Cancel» или закрыл модалку
+
+> **Совет:** оборачивайте вызов в `try/catch`, чтобы обработать отмену:
+> ```ts
+> try {
+> 	const confirmed = await openConfirmModal({ title: '...' })
+> }
+> catch {
+> 	// пользователь отменил
+> }
+> ```
+
+---
+
+## Паттерны
+
+### Wizard (пошаговые модалки)
+
+Можно вызывать `openConfirmModal` последовательно для реализации пошагового сценария:
+
+```ts
+const steps = [
+	{ title: 'Шаг 1', body: 'Начать?' },
+	{ title: 'Шаг 2', body: 'Продолжить?' },
+	{ title: 'Шаг 3', body: 'Завершить?', variant: 'danger' },
+]
+
+let current = 0
+while (current < steps.length) {
+	try {
+		const confirmed = await openConfirmModal(steps[current])
+		confirmed ? current++ : current--
+	}
+	catch {
+		break // отмена
+	}
+}
+```
+
+### Создание кастомной модалки
+
+1. Создайте компонент в `src/runtime/components/modals/_my-modal/`
+2. Внутри компонента используйте `useModal(id)` для получения `opened` и `resolve`
+3. В `index.ts` зарегистрируйте через `$modals.create()` и экспортируйте функцию-открывашку
+4. Реэкспортируйте из `src/runtime/components/modals/index.ts`
+
+### Lazy-модалки
+
+Для тяжёлых модалок используйте `createLazy`, чтобы компонент загружался только при первом открытии:
+
+```ts
+export const openHeavyModal = $modals.createLazy<HeavyProps, void>(
+	'heavy',
+	() => import('./heavy-modal.vue'),
+)
+```
+
+### Асинхронный onConfirm
+
+`ConfirmModal` поддерживает асинхронный `onConfirm` — кнопка показывает loading-состояние до завершения:
+
+```ts
+await openConfirmModal({
+	title: 'Сохранить?',
+	onConfirm: async () => {
+		await api.save(data)
+	},
+})
+```

package/dist/runtime/composals/use-modal/index.d.ts

@@ -0,0 +1,2 @@
+export { $modals } from './modal-manager.js';
+export * from './use-modal.js';

package/dist/runtime/composals/use-modal/index.js

@@ -0,0 +1,2 @@
+export { $modals } from "./modal-manager.js";
+export * from "./use-modal.js";

package/dist/runtime/composals/use-modal/modal-manager.d.ts

@@ -0,0 +1,83 @@
+import type { Component } from 'vue';
+/**
+ * Reactive state of a single modal within {@link ModalManager}.
+ */
+export interface ModalState<Props extends object = object, Resolve = unknown, Reject = unknown> {
+    /** Unique modal identifier */
+    id: string;
+    /** Vue component rendered as the modal */
+    component: Component;
+    /** Props passed when calling `show` or the opener function */
+    props: Props;
+    /** Current visibility state */
+    opened: boolean;
+    /** Resolves the promise created when the modal was opened */
+    resolve: (value?: Resolve) => void;
+    /** Rejects the promise created when the modal was opened */
+    reject: (reason?: Reject) => void;
+}
+/**
+ * Singleton modal manager.
+ *
+ * Maintains a component registry and a reactive map of active modals.
+ * Opening a modal returns a `Promise` that resolves via `hide`
+ * or rejects via `reject` / user dismissal.
+ *
+ * @example
+ * ```ts
+ * const open = $modals.create<MyProps, string>('my-modal', MyModal)
+ * const result = await open({ foo: 'bar' }) // result: string
+ * ```
+ */
+export declare class ModalManager {
+    #private;
+    private constructor();
+    /** Returns the singleton instance (creates on first access) */
+    static get instance(): ModalManager;
+    /** Reactive map of all active modals. Used by `ModalProvider` for rendering */
+    get modals(): import("vue").ShallowRef<Map<string, ModalState<object, unknown, unknown>>, Map<string, ModalState<object, unknown, unknown>>>;
+    /**
+     * Registers a modal component and returns a typed function to open it.
+     */
+    create<TProps extends object = object, TResult = void>(
+    /** unique modal identifier */
+    id: string, 
+    /** Vue component for the modal */
+    component: Component): (props?: TProps) => Promise<TResult>;
+    /**
+     * Registers a lazy modal — the component is loaded on first open.
+     */
+    createLazy<TProps extends object = object, TResult = void>(
+    /** unique modal identifier */
+    id: string, 
+    /** dynamic import function (`() => import('./my-modal.vue')`) */
+    loader: () => Promise<{
+        default: Component;
+    }>): (props?: Omit<TProps, 'modalId'>) => Promise<TResult>;
+    /**
+     * Opens a previously registered modal by its identifier.
+     */
+    show<T = unknown>(id: string, props?: object): Promise<T>;
+    /**
+     * Closes the modal and resolves its promise with the given result.
+     *
+     * @param id     — modal identifier
+     * @param result — value the promise resolves with
+     */
+    hide(id: string, result?: any): void;
+    /**
+     * Closes the modal and rejects its promise with the given reason.
+     *
+     * @param id     — modal identifier
+     * @param reason — rejection reason
+     */
+    reject(id: string, reason?: any): void;
+    /**
+     * Returns the reactive state of a specific modal as `ComputedRef<ModalState>`.
+     *
+     * Used inside a modal component (via {@link useModal}).
+     */
+    state<Props extends object = object, Resolve = unknown, Reject = unknown>(id: string): import("vue").ComputedRef<ModalState<Props, Resolve, Reject>>;
+}
+/** Global {@link ModalManager} instance for use throughout the application */
+export declare const $modals: ModalManager;

package/dist/runtime/composals/use-modal/modal-manager.js

@@ -0,0 +1,134 @@
+import { computed, nextTick, shallowRef, triggerRef } from "vue";
+export class ModalManager {
+  static #instance = null;
+  /** Reactive map of active modals */
+  #modals = shallowRef(/* @__PURE__ */ new Map());
+  /** Eagerly registered components (id → Component) */
+  #registered = /* @__PURE__ */ new Map();
+  /** Lazily registered loaders (id → loader) */
+  #lazy = /* @__PURE__ */ new Map();
+  constructor() {
+  }
+  /** Returns the singleton instance (creates on first access) */
+  static get instance() {
+    if (!ModalManager.#instance)
+      ModalManager.#instance = new ModalManager();
+    return ModalManager.#instance;
+  }
+  /** Reactive map of all active modals. Used by `ModalProvider` for rendering */
+  get modals() {
+    return ModalManager.instance.#modals;
+  }
+  // ── Facade ──
+  /**
+   * Registers a modal component and returns a typed function to open it.
+   */
+  create(id, component) {
+    this.#registered.set(id, component);
+    return (props) => this.#show(id, props ?? {});
+  }
+  /**
+   * Registers a lazy modal — the component is loaded on first open.
+   */
+  createLazy(id, loader) {
+    this.#lazy.set(id, loader);
+    return (props) => this.#show(id, props ?? {});
+  }
+  /**
+   * Opens a previously registered modal by its identifier.
+   */
+  async show(id, props = {}) {
+    return this.#show(id, props);
+  }
+  /**
+   * Closes the modal and resolves its promise with the given result.
+   *
+   * @param id     — modal identifier
+   * @param result — value the promise resolves with
+   */
+  hide(id, result) {
+    this.#hide(id, result);
+  }
+  /**
+   * Closes the modal and rejects its promise with the given reason.
+   *
+   * @param id     — modal identifier
+   * @param reason — rejection reason
+   */
+  reject(id, reason) {
+    this.#reject(id, reason);
+  }
+  /**
+   * Returns the reactive state of a specific modal as `ComputedRef<ModalState>`.
+   *
+   * Used inside a modal component (via {@link useModal}).
+   */
+  state(id) {
+    return computed(() => this.#modals.value.get(id));
+  }
+  // ── Private implementation ──
+  async #show(id, props = {}) {
+    if (!this.#registered.has(id) && this.#lazy.has(id)) {
+      const loader = this.#lazy.get(id);
+      try {
+        const loaded = await loader();
+        this.#registered.set(id, loaded.default);
+      } catch (err) {
+        return Promise.reject(err);
+      }
+    }
+    const component = this.#registered.get(id);
+    if (!component)
+      return Promise.reject(new Error(`Modal "${id}" is not registered`));
+    const existing = this.#modals.value.get(id);
+    return new Promise((resolve, reject) => {
+      if (existing) {
+        existing.props = props;
+        existing.opened = true;
+        existing.resolve = resolve;
+        existing.reject = reject;
+      } else {
+        this.#modals.value.set(id, {
+          id,
+          component,
+          props,
+          opened: true,
+          resolve,
+          reject
+        });
+      }
+      triggerRef(this.#modals);
+    });
+  }
+  #hide(id, result) {
+    const modal = this.#modals.value.get(id);
+    if (!modal)
+      return;
+    modal.opened = false;
+    modal.resolve?.(result);
+    triggerRef(this.#modals);
+    nextTick(() => {
+      const current = this.#modals.value.get(id);
+      if (current && !current.opened) {
+        this.#modals.value.delete(id);
+        triggerRef(this.#modals);
+      }
+    });
+  }
+  #reject(id, reason) {
+    const modal = this.#modals.value.get(id);
+    if (!modal)
+      return;
+    modal.opened = false;
+    modal.reject?.(reason);
+    triggerRef(this.#modals);
+    nextTick(() => {
+      const current = this.#modals.value.get(id);
+      if (current && !current.opened) {
+        this.#modals.value.delete(id);
+        triggerRef(this.#modals);
+      }
+    });
+  }
+}
+export const $modals = ModalManager.instance;

package/dist/runtime/composals/use-modal/use-modal.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Composable for use inside a modal component.
+ * Binds the component to {@link ModalManager} by identifier.
+ *
+ * @example
+ * ```ts
+ * const { opened, resolve } = useModal<MyProps, string>('my-modal')
+ * // template: <ModalRoot v-model:open="opened">
+ * // on confirm: resolve('ok')
+ * ```
+ */
+export declare function useModal<Props extends Record<string, unknown> = Record<string, unknown>, Resolve = unknown, Reject = unknown>(
+/**
+ * modal identifier
+ *
+ * must match the `id` passed to `$modals.create()`
+ */
+id: string): {
+    /**
+     * Two-way binding for `v-model:open`.
+     *
+     * Setting to `true` reopens the modal, setting to `false` calls `reject`
+     */
+    opened: import("vue").WritableComputedRef<boolean, boolean>;
+    /** closes the modal and resolves the promise */
+    resolve: (reason: Resolve) => void;
+};

package/dist/runtime/composals/use-modal/use-modal.js

@@ -0,0 +1,21 @@
+import { computed } from "vue";
+import { $modals } from "./modal-manager.js";
+export function useModal(id) {
+  const state = $modals.state(id);
+  const opened = computed({
+    get: () => state.value.opened,
+    set: (opened2) => opened2 ? $modals.show(id, state.value.props) : $modals.reject(id)
+  });
+  if (!state)
+    throw new Error(`Modal ${id} is not exist`);
+  return {
+    /**
+     * Two-way binding for `v-model:open`.
+     *
+     * Setting to `true` reopens the modal, setting to `false` calls `reject`
+     */
+    opened,
+    /** closes the modal and resolves the promise */
+    resolve: (reason) => $modals.hide(id, reason)
+  };
+}

package/dist/runtime/helpers/date/get-week-number.js

@@ -1,8 +1,9 @@
 import { addDay, weekStart, yearStart } from "@formkit/tempo";
+import { round } from "es-toolkit";
 export function getWeekNumber(day, firstDayOfWeek) {
   const firstDayOfYear = yearStart(day);
   const firstWeekStart = weekStart(firstDayOfYear, firstDayOfWeek);
   const yearFirstWeek = firstWeekStart < firstDayOfYear ? addDay(firstWeekStart, 7) : firstWeekStart;
   const currentWeek = weekStart(day, firstDayOfWeek);
-  return Math.round((+currentWeek - +yearFirstWeek) / 6048e5) + 1;
+  return round((+currentWeek - +yearFirstWeek) / 6048e5) + 1;
 }

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

@@ -1,2 +1,3 @@
 export type * from './theme';
 export type Classes<Key extends string, Value = string | string[]> = Partial<Record<Key, Value>>;
+export type MaybePromise<T = unknown> = T | Promise<T>;

package/dist/runtime/utils/parse-theme-color/parse-theme-color.js

@@ -1,4 +1,4 @@
-import { getColorVar } from "../../utils/get-color-var.js";
+import { getColorVar } from "../get-color-var.js";
 const themeColors = [
   "dark",
   "slate",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nuance-ui",
-	"version": "0.1.49",
+	"version": "0.1.51",
 	"description": "A UI Library for Modern Web Apps, powered by Vue.",
 	"repository": {
 		"type": "git",
@@ -74,6 +74,7 @@
 		"@nuxtjs/stylelint-module": "^5.2.1",
 		"@types/node": "latest",
 		"changelogen": "^0.6.2",
+		"es-toolkit": "^1.45.1",
 		"eslint": "^9.39.2",
 		"nuxt": "^4.3.0",
 		"stylelint": "^17.1.1",