nuance-ui 0.1.1

package/dist/runtime/components/dialog/dialog-close-button.vue.d.ts

@@ -0,0 +1,14 @@
+import type { ActionIconProps } from '../action-icon/index.js';
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ActionIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ActionIconProps> & 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/dialog/dialog-header.d.vue.ts

@@ -0,0 +1,16 @@
+import type { BoxProps } from '../box.vue.js';
+export interface DialogHeaderProps extends /* @vue-ignore */ Omit<BoxProps, 'is'> {
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DialogHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogHeaderProps> & 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/dialog/dialog-header.vue

@@ -0,0 +1,11 @@
+<script setup>
+import Box from "../box.vue";
+import css from "./dialog.module.css";
+const props = defineProps({});
+</script>
+
+<template>
+	<Box is='header' :class='css.header' v-bind='props'>
+		<slot />
+	</Box>
+</template>

package/dist/runtime/components/dialog/dialog-header.vue.d.ts

@@ -0,0 +1,16 @@
+import type { BoxProps } from '../box.vue.js';
+export interface DialogHeaderProps extends /* @vue-ignore */ Omit<BoxProps, 'is'> {
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DialogHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogHeaderProps> & 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/dialog/dialog-root.d.vue.ts

@@ -0,0 +1,54 @@
+import type { UiKitRadius, UiKitShadow, UiKitSize, UiKitSpacing } from '@nui/types';
+import type { CSSProperties } from 'vue';
+import type { BoxProps } from '../box.vue.js';
+import type { TransitionName } from '../transition/index.js';
+import type { DialogModel } from './types/index.js';
+export interface DialogRootProps extends /* @vue-ignore */ Omit<BoxProps, 'is'> {
+    /** If set, the dialog is closed when user clicks on the overlay @default `true` */
+    closeOnClickOutside?: boolean;
+    /** If set, the component is rendered inside `Portal` @default `true` */
+    withinPortal?: boolean;
+    /** If set, the component is rendered with `Overlay` @default `true` */
+    withoutOverlay?: boolean;
+    /** Top/bottom modal offset @default `5dvh` */
+    yOffset?: CSSProperties['marginTop'];
+    /** Left/right modal offset @default `5vw` */
+    xOffset?: CSSProperties['marginLeft'];
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default `theme.defaultRadius` */
+    radius?: UiKitRadius;
+    /** Controls width of the content area @default `'md'` */
+    size?: UiKitSize;
+    /** Key of `theme.shadows` or any valid CSS box-shadow value @default `'xl'` */
+    shadow?: UiKitShadow;
+    /** Key of `theme.spacing` or any valid CSS value to set content, header and footer padding @default `'md'` */
+    padding?: UiKitSpacing;
+    /** Passes a class to root element */
+    rootClass?: string;
+    transition?: TransitionName;
+}
+type __VLS_Props = DialogRootProps;
+type __VLS_ModelProps = {
+    'open'?: DialogModel['open'];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_25: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_25) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    open: () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,93 @@
+<script setup>
+import { getRadius, getShadow, getSize, getSpacing, rem } from "@nui/utils";
+import { onClickOutside, unrefElement } from "@vueuse/core";
+import { computed, onMounted, shallowRef, watch } from "vue";
+import Box from "../box.vue";
+import NTransition from "../transition/transition.vue";
+import css from "./dialog.module.css";
+import { useProvideDialogState } from "./lib";
+const {
+  withinPortal = true,
+  closeOnClickOutside = true,
+  mod,
+  xOffset,
+  yOffset,
+  radius,
+  padding,
+  size,
+  shadow,
+  rootClass,
+  transition = "fade-down",
+  withoutOverlay = false
+} = defineProps({
+  closeOnClickOutside: { type: Boolean, required: false },
+  withinPortal: { type: Boolean, required: false },
+  withoutOverlay: { type: Boolean, required: false },
+  yOffset: { type: null, required: false },
+  xOffset: { type: null, required: false },
+  radius: { type: [String, Number], required: false },
+  size: { type: String, required: false },
+  shadow: { type: String, required: false },
+  padding: { type: [String, Number], required: false },
+  rootClass: { type: String, required: false },
+  transition: { type: String, required: false }
+});
+const emit = defineEmits(["open", "close"]);
+const opened = defineModel("open", { type: Boolean, ...{ default: false } });
+useProvideDialogState(() => opened.value = false);
+function overlayClick(event) {
+  if (event.target === event.currentTarget && closeOnClickOutside && !withoutOverlay)
+    opened.value = false;
+}
+function open(dialog) {
+  emit("open");
+  dialog?.showModal();
+}
+const dialogRef = shallowRef(null);
+if (closeOnClickOutside) {
+  onClickOutside(dialogRef, () => opened.value = false);
+}
+watch(opened, (isOpen) => {
+  const dialog = unrefElement(dialogRef);
+  if (!dialog)
+    return;
+  if (isOpen)
+    open(dialog);
+  else
+    dialog?.close();
+}, { flush: "post" });
+onMounted(() => {
+  if (!opened.value)
+    return;
+  open(unrefElement(dialogRef));
+});
+const style = computed(() => ({
+  "--dialog-size": getSize(size, "dialog-size"),
+  "--dialog-radius": radius ? getRadius(radius) : void 0,
+  "--dialog-padding": getSpacing(padding),
+  "--dialog-y-offset": yOffset ? rem(yOffset) : void 0,
+  "--dialog-x-offset": xOffset ? rem(xOffset) : void 0,
+  "--dialog-shadow": getShadow(shadow)
+}));
+</script>
+
+<template>
+	<Teleport :disabled='!withinPortal' to='body'>
+		<Box
+			is='dialog'
+			ref='dialogRef'
+			:class='[css.root, rootClass]'
+			:mod='[{ "without-overlay": withoutOverlay }, mod]'
+			:style
+			@click='overlayClick'
+			@close='$emit("close")'
+			@cancel.prevent='() => closeOnClickOutside && (opened = false)'
+		>
+			<NTransition :name='transition'>
+				<Box is='section' v-if='opened' :class='css.content' v-bind='$attrs'>
+					<slot />
+				</Box>
+			</NTransition>
+		</Box>
+	</Teleport>
+</template>

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

@@ -0,0 +1,54 @@
+import type { UiKitRadius, UiKitShadow, UiKitSize, UiKitSpacing } from '@nui/types';
+import type { CSSProperties } from 'vue';
+import type { BoxProps } from '../box.vue.js';
+import type { TransitionName } from '../transition/index.js';
+import type { DialogModel } from './types/index.js';
+export interface DialogRootProps extends /* @vue-ignore */ Omit<BoxProps, 'is'> {
+    /** If set, the dialog is closed when user clicks on the overlay @default `true` */
+    closeOnClickOutside?: boolean;
+    /** If set, the component is rendered inside `Portal` @default `true` */
+    withinPortal?: boolean;
+    /** If set, the component is rendered with `Overlay` @default `true` */
+    withoutOverlay?: boolean;
+    /** Top/bottom modal offset @default `5dvh` */
+    yOffset?: CSSProperties['marginTop'];
+    /** Left/right modal offset @default `5vw` */
+    xOffset?: CSSProperties['marginLeft'];
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default `theme.defaultRadius` */
+    radius?: UiKitRadius;
+    /** Controls width of the content area @default `'md'` */
+    size?: UiKitSize;
+    /** Key of `theme.shadows` or any valid CSS box-shadow value @default `'xl'` */
+    shadow?: UiKitShadow;
+    /** Key of `theme.spacing` or any valid CSS value to set content, header and footer padding @default `'md'` */
+    padding?: UiKitSpacing;
+    /** Passes a class to root element */
+    rootClass?: string;
+    transition?: TransitionName;
+}
+type __VLS_Props = DialogRootProps;
+type __VLS_ModelProps = {
+    'open'?: DialogModel['open'];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_25: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_25) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    open: () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/dialog/dialog-title.d.vue.ts

@@ -0,0 +1,16 @@
+import type { TitleProps } from '../title.vue.js';
+export interface DialogTitleProps extends /* @vue-ignore */ TitleProps {
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DialogTitleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogTitleProps> & 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/dialog/dialog-title.vue

@@ -0,0 +1,11 @@
+<script setup>
+import Title from "../title.vue";
+import css from "./dialog.module.css";
+const { size = "md", lh = "1", ...props } = defineProps({});
+</script>
+
+<template>
+	<Title :class='css.title' :lh :size v-bind='props'>
+		<slot />
+	</Title>
+</template>

package/dist/runtime/components/dialog/dialog-title.vue.d.ts

@@ -0,0 +1,16 @@
+import type { TitleProps } from '../title.vue.js';
+export interface DialogTitleProps extends /* @vue-ignore */ TitleProps {
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DialogTitleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogTitleProps> & 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/dialog/dialog.module.css

@@ -0,0 +1 @@
+.root{--dialog-size-xs:rem(320px);--dialog-size-sm:rem(380px);--dialog-size-md:rem(440px);--dialog-size-lg:rem(620px);--dialog-size-xl:rem(780px);--dialog-size:var(--dialog-size-md);--dialog-y-offset:0;--dialog-x-offset:0;--dialog-shadow:var(--shadow-md);--dialog-radius:var(--radius-default);--overlay-bg:rgba(0,0,0,.4);--overlay-filter:blur(.1rem);background:none;border:none;box-shadow:var(--dialog-shadow);display:grid;left:var(--dialog-x-offset);max-height:100%;max-width:100%;opacity:0;overflow:hidden;padding:0;top:var(--dialog-y-offset);transition:opacity .3s ease,overlay allow-discrete .3s ease,display allow-discrete .3s ease;width:var(--dialog-size)}.root::backdrop{backdrop-filter:var(--overlay-filter);background:var(--overlay-bg,rgba(0,0,0,.6));opacity:0;transition:opacity .3s ease,overlay allow-discrete .3s ease,display allow-discrete .3s ease}.root[open]{opacity:1}@starting-style{.root[open]{opacity:0}}.root[open]::backdrop{opacity:1}@starting-style{.root[open]::backdrop{opacity:0}}.root:not([open]){opacity:0;pointer-events:none}.root:not([open])::backdrop{opacity:0}.root[data-without-overlay]::backdrop{display:none}.content{background-color:var(--color-body);border-radius:var(--dialog-radius);color:var(--color-text);height:100%;padding:var(--spacing-sm);width:100%}.header{align-items:center;display:flex;justify-content:space-between}.title{font-weight:400}

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

@@ -0,0 +1,5 @@
+export type * from './dialog-header.vue';
+export type * from './dialog-root.vue';
+export type * from './dialog-title.vue';
+export { useDialogState } from './lib.js';
+export type * from './types';

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

@@ -0,0 +1 @@
+export { useDialogState } from "./lib.js";

package/dist/runtime/components/dialog/lib.d.ts

@@ -0,0 +1,2 @@
+export declare const useProvideDialogState: (close: () => void) => () => void;
+export declare const useDialogState: () => () => void;

package/dist/runtime/components/dialog/lib.js

@@ -0,0 +1,8 @@
+import { createStrictInjection } from "@nui/helpers";
+const injectionKey = Symbol("DrawerState");
+const [useProvide, useState] = createStrictInjection((close) => close, {
+  injectionKey,
+  name: "DrawerState"
+});
+export const useProvideDialogState = useProvide;
+export const useDialogState = useState;

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

@@ -0,0 +1,9 @@
+export interface DialogEmits {
+    /** Event handler called when the dialog open */
+    open: [];
+    /** Event handler called when the dialog closed */
+    close: [];
+}
+export interface DialogModel {
+    open: boolean;
+}

package/dist/runtime/components/drawer/drawer-close-button.d.vue.ts

@@ -0,0 +1,14 @@
+import type { ActionIconProps } from '../action-icon/index.js';
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ActionIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ActionIconProps> & 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/drawer/drawer-close-button.vue

@@ -0,0 +1,20 @@
+<script setup>
+import DialogCloseButton from "../dialog/dialog-close-button.vue";
+const props = defineProps({
+  size: { type: null, required: false },
+  variant: { type: String, required: false },
+  gradient: { type: Object, required: false },
+  loading: { type: Boolean, required: false },
+  color: { type: null, required: false },
+  radius: { type: [String, Number], required: false },
+  classes: { type: Object, required: false },
+  mod: { type: [Object, Array, null], required: false },
+  icon: { type: String, required: false }
+});
+</script>
+
+<template>
+	<DialogCloseButton v-bind='props'>
+		<slot />
+	</DialogCloseButton>
+</template>

package/dist/runtime/components/drawer/drawer-close-button.vue.d.ts

@@ -0,0 +1,14 @@
+import type { ActionIconProps } from '../action-icon/index.js';
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ActionIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ActionIconProps> & 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/drawer/drawer-header.d.vue.ts

@@ -0,0 +1,16 @@
+import type { DialogHeaderProps } from '../dialog/index.js';
+export interface DrawerHeaderProps extends /* @vue-ignore */ DialogHeaderProps {
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DrawerHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DrawerHeaderProps> & 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/drawer/drawer-header.vue

@@ -0,0 +1,10 @@
+<script setup>
+import DialogHeader from "../dialog/dialog-header.vue";
+const props = defineProps({});
+</script>
+
+<template>
+	<DialogHeader v-bind='props'>
+		<slot />
+	</DialogHeader>
+</template>

package/dist/runtime/components/drawer/drawer-header.vue.d.ts

@@ -0,0 +1,16 @@
+import type { DialogHeaderProps } from '../dialog/index.js';
+export interface DrawerHeaderProps extends /* @vue-ignore */ DialogHeaderProps {
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DrawerHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DrawerHeaderProps> & 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/drawer/drawer-root.d.vue.ts

@@ -0,0 +1,31 @@
+import type { DialogModel, DialogRootProps } from '../dialog/index.js';
+export interface DrawerRootProps extends /* @vue-ignore */ Omit<DialogRootProps, 'modal' | 'closeOnClickOutside' | 'rootClass' | 'transition'> {
+    /** Side of the screen on which drawer will be opened @default `'left'` */
+    position?: 'bottom' | 'left' | 'right' | 'top';
+}
+type __VLS_Props = DrawerRootProps;
+type __VLS_ModelProps = {
+    'open'?: DialogModel['open'];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    open: () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/drawer/drawer-root.vue

@@ -0,0 +1,45 @@
+<script setup>
+import { computed } from "vue";
+import DialogRoot from "../dialog/dialog-root.vue";
+import css from "./drawer.module.css";
+const {
+  position = "left",
+  withoutOverlay = true,
+  mod,
+  withinPortal = true,
+  ...rest
+} = defineProps({
+  position: { type: String, required: false }
+});
+defineEmits(["open", "close"]);
+const opened = defineModel("open", { type: Boolean, ...{ default: false } });
+const transition = computed(() => {
+  switch (position) {
+    case "right":
+      return "fade-left";
+    case "top":
+      return "fade-down";
+    case "bottom":
+      return "fade-up";
+    default:
+      return "fade-right";
+  }
+});
+</script>
+
+<template>
+	<DialogRoot
+		v-model:open='opened'
+		:mod='[{ position }, mod]'
+		:root-class='css.root'
+		:class='css.content'
+		:within-portal
+		:without-overlay
+		:transition
+		v-bind='rest'
+		@open='$emit("open")'
+		@close='$emit("close")'
+	>
+		<slot />
+	</DialogRoot>
+</template>

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

@@ -0,0 +1,31 @@
+import type { DialogModel, DialogRootProps } from '../dialog/index.js';
+export interface DrawerRootProps extends /* @vue-ignore */ Omit<DialogRootProps, 'modal' | 'closeOnClickOutside' | 'rootClass' | 'transition'> {
+    /** Side of the screen on which drawer will be opened @default `'left'` */
+    position?: 'bottom' | 'left' | 'right' | 'top';
+}
+type __VLS_Props = DrawerRootProps;
+type __VLS_ModelProps = {
+    'open'?: DialogModel['open'];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    open: () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/drawer/drawer-title.d.vue.ts

@@ -0,0 +1,16 @@
+import type { DialogTitleProps } from '../dialog/index.js';
+export interface DrawerTitleProps extends /* @vue-ignore */ DialogTitleProps {
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DrawerTitleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DrawerTitleProps> & 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/drawer/drawer-title.vue

@@ -0,0 +1,10 @@
+<script setup>
+import DialogTitle from "../dialog/dialog-title.vue";
+const props = defineProps({});
+</script>
+
+<template>
+	<DialogTitle v-bind='props'>
+		<slot />
+	</DialogTitle>
+</template>

package/dist/runtime/components/drawer/drawer-title.vue.d.ts

@@ -0,0 +1,16 @@
+import type { DialogTitleProps } from '../dialog/index.js';
+export interface DrawerTitleProps extends /* @vue-ignore */ DialogTitleProps {
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DrawerTitleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DrawerTitleProps> & 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/drawer/drawer.module.css

@@ -0,0 +1 @@
+.root{height:100%;overflow-y:auto}.root[data-position=left] .content{border-radius:0 var(--dialog-radius) var(--dialog-radius) 0}.root[data-position=right]{left:unset;right:var(--dialog-x-offset)}.root[data-position=right] .content{border-radius:var(--dialog-radius) 0 0 var(--dialog-radius)}.root[data-position=top]{height:var(--dialog-size);top:var(--dialog-y-offset);width:100%}.root[data-position=top] .content{border-radius:0 0 var(--dialog-radius) var(--dialog-radius)}.root[data-position=bottom]{bottom:var(--dialog-y-offset);height:var(--dialog-size);top:unset;width:100%}.root[data-position=bottom] .content{border-radius:var(--dialog-radius) var(--dialog-radius) 0 0}

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

@@ -0,0 +1,3 @@
+export type * from './drawer-header.vue';
+export type * from './drawer-root.vue';
+export type * from './drawer-title.vue';