nuance-ui 0.1.1

package/dist/runtime/components/input/ui/input-wrapper.vue

@@ -0,0 +1,96 @@
+<script setup>
+import { getFontSize } from "@nui/utils";
+import { computed, useId } from "vue";
+import { useProvideInputWrapper } from "../lib/input-wrapper.context";
+import InputLabel from "./input-label.vue";
+const {
+  id: _id,
+  error,
+  description,
+  label,
+  required,
+  variant = "default",
+  size = "sm",
+  radius = "sm",
+  ...props
+} = defineProps({
+  error: { type: String, required: false },
+  description: { type: String, required: false },
+  label: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  size: { type: String, required: false }
+});
+const id = _id ?? useId();
+useProvideInputWrapper({
+  id,
+  variant,
+  required,
+  size,
+  radius,
+  ...props
+});
+const style = computed(() => ({
+  "--input-error-size": `calc(${getFontSize(size)} - .125rem)`,
+  "--input-description-size": `calc(${getFontSize(size)} - .125rem)`
+}));
+</script>
+
+<template>
+	<div :style :class='$style.root'>
+		<InputLabel
+			:data-v-hidden='!label || !$slots.label || null'
+			:for='id'
+			:class='$style.label'
+			:size
+			:required
+		>
+			<slot name='label'>
+				{{ label }}
+			</slot>
+		</InputLabel>
+
+		<slot />
+
+		<p v-if='error' :class='$style.error'>
+			<slot name='error'>
+				{{ error }}
+			</slot>
+		</p>
+
+		<p v-else-if='description || $slots.description' :class='$style.description'>
+			<slot name='description'>
+				{{ description }}
+			</slot>
+		</p>
+	</div>
+</template>
+
+<style lang="postcss" module>
+.root {
+	--input-error-size: calc(var(--font-size-sm) - rem(2px));
+	--input-description-size: calc(var(--font-size-sm) - rem(2px));
+
+	line-height: var(--line-height);
+}
+
+.error,
+.description {
+	display: block;
+
+	margin: 0;
+	padding: 0;
+
+	line-height: 1.2;
+	overflow-wrap: break-word;
+}
+
+.error {
+	font-size: var(--input-error-size);
+	color: var(--color-error);
+}
+
+.description {
+	font-size: var(--input-description-size, calc(var(--font-size-sm) - rem(2px)));
+	color: var(--color-dimmed);
+}
+</style>

package/dist/runtime/components/input/ui/input-wrapper.vue.d.ts

@@ -0,0 +1,26 @@
+import type { WrapperContext } from '../lib/input-wrapper.context.js';
+import type { InputLabelProps } from './input-label.vue.js';
+export interface InputWrapperProps extends /* @vue-ignore */ WrapperContext, InputLabelProps {
+    error?: string;
+    description?: string;
+    label?: string;
+}
+declare var __VLS_5: {}, __VLS_7: {}, __VLS_9: {}, __VLS_11: {};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_5) => any;
+} & {
+    default?: (props: typeof __VLS_7) => any;
+} & {
+    error?: (props: typeof __VLS_9) => any;
+} & {
+    description?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<InputWrapperProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InputWrapperProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,3 @@
+export { extractNuxtLinkProps } from './lib.js';
+export type * from './link-button.vue';
+export type * from './link.vue';

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

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

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

@@ -0,0 +1,16 @@
+import type { NuxtLinkProps } from '#app';
+export declare function extractNuxtLinkProps<T extends NuxtLinkProps>(props: T): {
+    link: {
+        prefetch: NonNullable<import("vue").UnwrapRef<T["prefetch"]>> | undefined;
+        noPrefetch: NonNullable<import("vue").UnwrapRef<T["noPrefetch"]>> | undefined;
+        target?: import("vue").UnwrapRef<T["target"]> | undefined;
+        replace?: import("vue").UnwrapRef<T["replace"]> | undefined;
+        to?: import("vue").UnwrapRef<T["to"]> | undefined;
+        external?: import("vue").UnwrapRef<T["external"]> | undefined;
+        rel?: import("vue").UnwrapRef<T["rel"]> | undefined;
+        noRel?: import("vue").UnwrapRef<T["noRel"]> | undefined;
+        prefetchOn?: import("vue").UnwrapRef<T["prefetchOn"]> | undefined;
+        trailingSlash?: import("vue").UnwrapRef<T["trailingSlash"]> | undefined;
+    };
+    rest: Omit<T, Extract<"target", keyof T> | Extract<"replace", keyof T> | Extract<"to", keyof T> | Extract<"external", keyof T> | Extract<"rel", keyof T> | Extract<"noRel", keyof T> | Extract<"prefetch", keyof T> | Extract<"noPrefetch", keyof T> | Extract<"prefetchOn", keyof T> | Extract<"trailingSlash", keyof T>>;
+};

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

@@ -0,0 +1,25 @@
+import { reactiveOmit, reactivePick } from "@vueuse/core";
+const linkProps = [
+  "to",
+  "target",
+  "external",
+  "rel",
+  "noRel",
+  "prefetch",
+  "noPrefetch",
+  "replace",
+  "prefetchOn",
+  "trailingSlash"
+];
+export function extractNuxtLinkProps(props) {
+  const link = reactivePick(props, ...linkProps);
+  const rest = reactiveOmit(props, ...linkProps);
+  return {
+    link: {
+      ...link,
+      prefetch: link?.prefetch || void 0,
+      noPrefetch: link?.noPrefetch || void 0
+    },
+    rest
+  };
+}

package/dist/runtime/components/link/link-button.d.vue.ts

@@ -0,0 +1,21 @@
+import type { NuxtLinkProps } from '#app';
+import type { ButtonProps } from '../button/index.js';
+export interface LinkButtonProps extends /* @vue-ignore */ Omit<NuxtLinkProps, 'href' | 'custom'>, ButtonProps {
+}
+declare var __VLS_15: {}, __VLS_17: {}, __VLS_20: {};
+type __VLS_Slots = {} & {
+    leftSection?: (props: typeof __VLS_15) => any;
+} & {
+    default?: (props: typeof __VLS_17) => any;
+} & {
+    rightSection?: (props: typeof __VLS_20) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<LinkButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/link/link-button.vue

@@ -0,0 +1,42 @@
+<script setup>
+import Button from "../button/button.vue";
+import { extractNuxtLinkProps } from "./lib";
+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 },
+  leftSectionPE: { type: null, required: false },
+  leftSectionProps: { type: Object, required: false },
+  rightSectionPE: { type: null, required: false },
+  rightSectionProps: { type: Object, required: false }
+});
+const { link, rest } = extractNuxtLinkProps(props);
+</script>
+
+<template>
+	<!-- @vue-ignore	-->
+	<NuxtLink
+		v-slot='{ href, navigate, rel, target }'
+		v-bind='link'
+		custom
+	>
+		<Button
+			v-bind='{ ...rest, is: rest?.is || "a", href, rel, target }'
+			@click='(e) => navigate(e)'
+		>
+			<template #leftSection>
+				<slot name='leftSection' />
+			</template>
+
+			<slot />
+
+			<template #rightSection>
+				<slot name='rightSection' />
+			</template>
+		</Button>
+	</NuxtLink>
+</template>

package/dist/runtime/components/link/link-button.vue.d.ts

@@ -0,0 +1,21 @@
+import type { NuxtLinkProps } from '#app';
+import type { ButtonProps } from '../button/index.js';
+export interface LinkButtonProps extends /* @vue-ignore */ Omit<NuxtLinkProps, 'href' | 'custom'>, ButtonProps {
+}
+declare var __VLS_15: {}, __VLS_17: {}, __VLS_20: {};
+type __VLS_Slots = {} & {
+    leftSection?: (props: typeof __VLS_15) => any;
+} & {
+    default?: (props: typeof __VLS_17) => any;
+} & {
+    rightSection?: (props: typeof __VLS_20) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<LinkButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,18 @@
+import type { NuxtLinkProps } from '#app';
+import type { TextProps } from '../text.vue.js';
+export interface LinkProps extends /* @vue-ignore */ Omit<NuxtLinkProps, 'href' | 'custom'>, Omit<TextProps, 'is'> {
+    underline?: boolean;
+}
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<LinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/link/link.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { NuxtLink } from "#components";
+import Text from "../text.vue";
+import { extractNuxtLinkProps } from "./lib";
+const props = defineProps({
+  underline: { type: Boolean, required: false },
+  size: { type: null, required: false },
+  lineClamp: { type: Number, required: false },
+  truncate: { type: [String, Boolean], required: false },
+  inline: { type: Boolean, required: false },
+  inherit: { type: Boolean, required: false },
+  gradient: { type: Object, required: false },
+  variant: { type: String, required: false },
+  fz: { type: null, required: false },
+  lh: { type: String, required: false },
+  fw: { type: null, required: false },
+  c: { type: null, required: false }
+});
+const { link, rest } = extractNuxtLinkProps(props);
+</script>
+
+<template>
+	<!-- @vue-ignore	-->
+	<NuxtLink
+		v-slot='{ href, navigate, rel, target }'
+		v-bind='link'
+		custom
+	>
+		<Text
+			is='a'
+			:class='[$style.root, { [$style.underline]: rest.underline }]'
+			v-bind='{
+  ...rest,
+  href,
+  rel,
+  target
+}'
+			@click='(e) => navigate(e)'
+		>
+			<slot />
+		</Text>
+	</NuxtLink>
+</template>
+
+<style module>
+.root{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;cursor:pointer;display:inline;margin:0;padding:0;text-decoration:none}.root:where([data-line-clamp]){display:-webkit-box}.underline{text-decoration:underline}.underline:where([data-variant=gradient]),.underline:where([data-variant=gradient]):hover{text-decoration:none}
+</style>

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

@@ -0,0 +1,18 @@
+import type { NuxtLinkProps } from '#app';
+import type { TextProps } from '../text.vue.js';
+export interface LinkProps extends /* @vue-ignore */ Omit<NuxtLinkProps, 'href' | 'custom'>, Omit<TextProps, 'is'> {
+    underline?: boolean;
+}
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<LinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkProps> & 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/loader/_loaders/bars-loader.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/loader/_loaders/bars-loader.vue

@@ -0,0 +1,11 @@
+<template>
+	<span :class='$style.root'>
+		<span :class='$style.bar' />
+		<span :class='$style.bar' />
+		<span :class='$style.bar' />
+	</span>
+</template>
+
+<style module>
+.root{display:flex;gap:calc(var(--loader-size)/5);height:var(--loader-size);position:relative;width:var(--loader-size)}.bar{animation:bars-loader-animation 1.2s cubic-bezier(0,.5,.5,1) infinite;background:var(--loader-color);border-radius:2px;flex:1}.bar:first-of-type{animation-delay:-.24s}.bar:nth-of-type(2){animation-delay:-.12s}.bar:nth-of-type(3){animation-delay:0s}@keyframes bars-loader-animation{0%{opacity:0;transform:scale(.6)}50%,to{transform:scale(1)}}
+</style>

package/dist/runtime/components/loader/_loaders/bars-loader.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/loader/_loaders/dots-loader.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/loader/_loaders/dots-loader.vue

@@ -0,0 +1,11 @@
+<template>
+	<span :class='$style.root'>
+		<span :class='$style.dot' />
+		<span :class='$style.dot' />
+		<span :class='$style.dot' />
+	</span>
+</template>
+
+<style module>
+.root{align-items:center;display:flex;gap:calc(var(--loader-size)/10);height:var(--loader-size);justify-content:center;position:relative;width:var(--loader-size)}.dot{animation:loader-dots-animation .8s linear infinite;background:var(--loader-color);border-radius:50%;height:calc(var(--loader-size)/3 - var(--loader-size)/15);width:calc(var(--loader-size)/3 - var(--loader-size)/15)}.dot:nth-child(2){animation-delay:.4s}@keyframes loader-dots-animation{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.6)}}
+</style>

package/dist/runtime/components/loader/_loaders/dots-loader.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/loader/_loaders/oval-loader.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/loader/_loaders/oval-loader.vue

@@ -0,0 +1,7 @@
+<template>
+	<span :class='$style.root' />
+</template>
+
+<style module>
+.root{display:inline-block}.root,.root:after{height:var(--loader-size);width:var(--loader-size)}.root:after{animation:oval-loader-animation 1.2s linear infinite;border-color:var(--loader-color) var(--loader-color) var(--loader-color) transparent;border-radius:10000px;border-style:solid;border-width:calc(var(--loader-size)/8);content:"";display:block}@keyframes oval-loader-animation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
+</style>

package/dist/runtime/components/loader/_loaders/oval-loader.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/loader/index.d.ts

@@ -0,0 +1 @@
+export type * from './loader.vue';

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

@@ -0,0 +1,10 @@
+import type { UiKitColor, UiKitSize } from '@nui/types';
+export type LoaderType = 'bars' | 'dots' | 'oval';
+export interface LoaderProps {
+    size?: UiKitSize | string;
+    color?: UiKitColor | string;
+    type?: LoaderType;
+}
+declare const __VLS_export: import("vue").DefineComponent<LoaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LoaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/loader/loader.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { useStyleResolver } from "@nui/composals";
+import { getSize, parseThemeColor } from "@nui/utils";
+import { computed } from "vue";
+import BarsLoader from "./_loaders/bars-loader.vue";
+import DotsLoader from "./_loaders/dots-loader.vue";
+import OvalLoader from "./_loaders/oval-loader.vue";
+const {
+  size = "sm",
+  color,
+  type = "oval"
+} = defineProps({
+  size: { type: String, required: false },
+  color: { type: null, required: false },
+  type: { type: String, required: false }
+});
+const loaders = {
+  bars: BarsLoader,
+  oval: OvalLoader,
+  dots: DotsLoader
+};
+const style = computed(() => useStyleResolver((theme) => {
+  const _color = parseThemeColor({ color, theme });
+  return {
+    "--loader-size": getSize(size, "loader-size"),
+    "--loader-color": _color.value
+  };
+}));
+</script>
+
+<template>
+	<component :is='loaders[type]' :class='$style.root' :style />
+</template>
+
+<style module>
+.root{--loader-size-xs:rem(18px);--loader-size-sm:rem(22px);--loader-size-md:rem(36px);--loader-size-lg:rem(44px);--loader-size-xl:rem(58px);--loader-size:var(--loader-size-md);--loader-color:var(--color-primary-filled)}
+</style>

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

@@ -0,0 +1,10 @@
+import type { UiKitColor, UiKitSize } from '@nui/types';
+export type LoaderType = 'bars' | 'dots' | 'oval';
+export interface LoaderProps {
+    size?: UiKitSize | string;
+    color?: UiKitColor | string;
+    type?: LoaderType;
+}
+declare const __VLS_export: import("vue").DefineComponent<LoaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LoaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

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

package/dist/runtime/components/modal/modal-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/modal/modal-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/modal/modal-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/modal/modal-header.d.vue.ts

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

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

@@ -0,0 +1,33 @@
+import type { DialogModel, DialogRootProps } from '../dialog/index.js';
+export interface ModalRootProps extends /* @vue-ignore */ Omit<DialogRootProps, 'modal' | 'closeOnClickOutside' | 'rootClass' | 'withoutOverlay'> {
+    /** If set, the modal is centered vertically @default `false` */
+    centered?: boolean;
+    /** If set, the modal takes the entire screen @default `false` */
+    fullScreen?: boolean;
+}
+type __VLS_Props = ModalRootProps;
+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;
+    };
+};