@witchcraft/ui 0.3.26 → 0.4.0-beta.10

package/dist/runtime/components/WPagination/WPagination.vue

@@ -0,0 +1,182 @@
+<template>
+<PaginationRoot
+	:total="total"
+	:items-per-page="itemsPerPage"
+	:sibling-count="siblingCount"
+	show-edges
+	:class="twMerge(`
+		pagination--wrapper
+		flex flex-wrap items-center justify-center gap-2
+	`, $attrs.class)"
+	v-model:page="current"
+	v-bind="{ ...$attrs, class: void 0 }"
+>
+	<PaginationList
+		v-slot="{ items }"
+		class="flex items-center gap-2 w-full"
+	>
+		<PaginationFirst
+			as-child
+			:class="`pagination--link ${pageClasses}`"
+		>
+			<a
+				:href="customRoute(route, 1).href"
+				:aria-label="t('pagination.aria.go-to-first-page')"
+			>
+				<slot name="first">
+					<i-lucide-chevrons-left class="w-4 h-4"/>
+				</slot>
+			</a>
+		</PaginationFirst>
+
+		<PaginationPrev
+			as-child
+			:class="`pagination--link ${pageClasses}`"
+		>
+			<a
+				:href="customRoute(route, current - 1).href"
+				:aria-label="t('pagination.aria.go-to-previous-page')"
+				@click="onLinkClick($event, current - 1)"
+			>
+				<slot name="prev">
+					<i-lucide-chevron-left class="w-4 h-4"/>
+				</slot>
+			</a>
+		</PaginationPrev>
+
+		<div class="pagination--spacer flex-1"/>
+
+		<template v-for="(page, index) in items">
+			<PaginationListItem
+				v-if="page.type === 'page'"
+				:value="page.value"
+				as-child
+				:key="index"
+			>
+				<a
+					:href="customRoute(route, page.value).href"
+					:aria-label="t('pagination.aria.go-to-page', { count: page.value })"
+					:class="page.value === current ? currentPageClasses : pageClasses"
+					@click="onLinkClick($event, page.value)"
+				>
+					<slot
+						name="page"
+						:value="page.value"
+					>
+						{{ page.value }}
+					</slot>
+				</a>
+			</PaginationListItem>
+
+			<!-- @vue-expect-error index is a prop... -->
+			<PaginationEllipsis
+				v-else
+				:index="index"
+				class="pagination--page-fill flex items-center justify-center w-8 h-8"
+				:key="page.type"
+			>
+				...
+			</PaginationEllipsis>
+		</template>
+
+		<div class="pagination--spacer flex-1"/>
+
+		<PaginationNext
+			as-child
+			:class="`pagination--link ${pageClasses}`"
+		>
+			<a
+				:href="customRoute(route, current + 1).href"
+				:aria-label="t('pagination.aria.go-to-next-page')"
+				@click="onLinkClick($event, current + 1)"
+			>
+				<slot name="next">
+					<i-lucide-chevron-right class="w-4 h-4"/>
+				</slot>
+			</a>
+		</PaginationNext>
+
+		<PaginationLast
+			as-child
+			:class="`pagination--link ${pageClasses}`"
+		>
+			<a
+				:href="customRoute(route, Math.ceil(total / itemsPerPage)).href"
+				:aria-label="t('pagination.aria.go-to-last-page')"
+				@click="onLinkClick($event, Math.ceil(total / itemsPerPage))"
+			>
+				<slot name="last">
+					<i-lucide-chevrons-right class="w-4 h-4"/>
+				</slot>
+			</a>
+		</PaginationLast>
+	</PaginationList>
+</PaginationRoot>
+</template>
+
+<script setup>
+import {
+  PaginationEllipsis,
+  PaginationFirst,
+  PaginationLast,
+  PaginationList,
+  PaginationListItem,
+  PaginationNext,
+  PaginationPrev,
+  PaginationRoot
+} from "reka-ui";
+import { useAttrs } from "vue";
+import ILucideChevronLeft from "~icons/lucide/chevron-left";
+import ILucideChevronRight from "~icons/lucide/chevron-right";
+import ILucideChevronsLeft from "~icons/lucide/chevrons-left";
+import ILucideChevronsRight from "~icons/lucide/chevrons-right";
+import { useInjectedI18n } from "../../composables/useInjectedI18n.js";
+import { twMerge } from "../../utils/twMerge.js";
+defineOptions({
+  name: "WPagination",
+  inheritAttrs: false
+});
+const t = useInjectedI18n();
+const $attrs = useAttrs();
+const props = defineProps({
+  defaultPage: { type: Number, required: false, default: 1 },
+  siblingCount: { type: Number, required: false, default: 1 },
+  itemsPerPage: { type: Number, required: true, default: 1 },
+  route: { type: String, required: true },
+  customRoute: { type: Function, required: false, default: (route = "", i) => {
+    if (i <= 1) return { href: route, i: 1 };
+    return { href: `${route}${i}`, i };
+  } },
+  total: { type: Number, required: true }
+});
+const current = defineModel("current", { type: Number, ...{ required: true } });
+const emit = defineEmits(["link-click"]);
+function onLinkClick(event, pageNum) {
+  const routeInfo = props.customRoute(props.route, pageNum);
+  emit("link-click", event, routeInfo);
+}
+const commonClasses = `
+	flex
+	items-center
+	justify-center
+	w-8
+	h-8
+	focus-outline
+	border-b-2
+	border-transparent
+	transition-all
+	outlined:rounded-sm
+`;
+const pageClasses = `
+	${commonClasses}
+	focus-outline
+	hover:text-accent-600
+	hover:border-b-accent-500
+	hover:scale-125
+`;
+const currentPageClasses = `
+	${commonClasses}
+	border-b-accent-500
+	scale-125
+`;
+</script>

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

@@ -0,0 +1,59 @@
+import { type PaginationRootProps } from "reka-ui";
+import { type HTMLAttributes } from "vue";
+import type { TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = /** @vue-ignore */ Omit<HTMLAttributes, "class"> & /** @vue-ignore */ TailwindClassProp & Pick<PaginationRootProps, "defaultPage" | "siblingCount" | "itemsPerPage"> & {
+    route: string;
+    customRoute?: (route: string, i: number) => {
+        i: number;
+        href: string;
+    };
+    total: number;
+};
+type __VLS_ModelProps = {
+    "current": number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_20: {}, __VLS_33: {}, __VLS_46: {
+    value: number;
+}, __VLS_60: {}, __VLS_73: {};
+type __VLS_Slots = {} & {
+    first?: (props: typeof __VLS_20) => any;
+} & {
+    prev?: (props: typeof __VLS_33) => any;
+} & {
+    page?: (props: typeof __VLS_46) => any;
+} & {
+    next?: (props: typeof __VLS_60) => any;
+} & {
+    last?: (props: typeof __VLS_73) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:current": (value: number) => any;
+} & {
+    "link-click": (event: MouseEvent, payload: {
+        i: number;
+        href: string;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onLink-click"?: ((event: MouseEvent, payload: {
+        i: number;
+        href: string;
+    }) => any) | undefined;
+    "onUpdate:current"?: ((value: number) => any) | undefined;
+}>, {
+    defaultPage: number;
+    siblingCount: number;
+    itemsPerPage: number;
+    customRoute: (route: string, i: number) => {
+        i: number;
+        href: string;
+    };
+}, {}, {}, {}, 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/WPalette/WPalette.d.vue.ts

@@ -0,0 +1,11 @@
+import type { Theme } from "metamorphosis";
+import type { BaseInteractiveProps } from "../../types/index.js";
+type __VLS_Props = BaseInteractiveProps & {
+    theme?: Theme;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    theme: Theme;
+    border: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/{LibPalette/LibPalette.vue → WPalette/WPalette.vue}

@@ -25,18 +25,13 @@
 </div>
 </template>
 
-<script>
-export default { name: "LibPalette" };
-</script>
-
 <script setup>
 import { keys } from "@alanscodelog/utils/keys";
 const props = defineProps({
-  id: { type: String, required: false },
-  disabled: { type: Boolean, required: false, default: false },
-  readonly: { type: Boolean, required: false, default: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
   border: { type: Boolean, required: false, default: true },
-  unstyle: { type: Boolean, required: false, default: false },
+  unstyle: { type: Boolean, required: false },
   theme: { type: Object, required: false, default: () => ({}) }
 });
 const exclude = ["--color-bg", "--color-fg"];

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

@@ -0,0 +1,11 @@
+import type { Theme } from "metamorphosis";
+import type { BaseInteractiveProps } from "../../types/index.js";
+type __VLS_Props = BaseInteractiveProps & {
+    theme?: Theme;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    theme: Theme;
+    border: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,45 @@
+import { type DialogContentEmits, type DialogRootEmits, type PopoverContentProps, type PopoverRootProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import type { EmitsToProps, PopupConstrainToProps, TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = PopupConstrainToProps & {
+    backdropClass?: string;
+    showBackdrop?: boolean;
+    showArrow?: boolean;
+    animationDirection?: "use-side" | "use-align" | "left" | "right" | "up" | "down" | "show" | "none";
+    /** Overrides teleport target. */
+    to?: string;
+    /** Overrides reka-ui's PopoverRootProps */
+    rootProps?: PopoverRootProps & EmitsToProps<DialogRootEmits> & Omit<HTMLAttributes, "class"> & TailwindClassProp;
+    /** Overrides reka-ui's PopoverContentProps */
+    contentProps?: PopoverContentProps & EmitsToProps<DialogContentEmits> & Omit<HTMLAttributes, "class"> & TailwindClassProp;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_14: {}, __VLS_34: {};
+type __VLS_Slots = {} & {
+    button?: (props: typeof __VLS_14) => any;
+} & {
+    popover?: (props: typeof __VLS_34) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    constrainWidthTo: number | "trigger" | "available" | string | null;
+    constrainHeightTo: number | "trigger" | "available" | string | null;
+    showBackdrop: boolean;
+    showArrow: boolean;
+    animationDirection: "use-side" | "use-align" | "left" | "right" | "up" | "down" | "show" | "none";
+    to: string;
+}, {}, {}, {}, 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/WPopover/WPopover.vue

@@ -0,0 +1,144 @@
+<template>
+<PopoverRoot
+	v-model:open="modelValue"
+	v-bind="rootProps"
+>
+	<PopoverAnchor
+		v-if="$slots.button"
+		as-child
+	>
+		<slot name="button"/>
+	</PopoverAnchor>
+
+	<PopoverPortal :to="to">
+		<transition>
+			<div
+				v-if="showBackdrop && modelValue"
+				:class="twMerge(`popover--backdrop absolute inset-0 bg-black/50`, backdropClass)"
+				@click="modelValue = false"
+			/>
+		</transition>
+
+		<PopoverContent
+			v-bind="{
+  disableOutsidePointerEvents: false,
+  side: 'bottom',
+  sideFlip: true,
+  align: 'center',
+  sideOffset: 0,
+  alignOffset: 0,
+  avoidCollisions: true,
+  prioritizePosition: false,
+  sticky: 'always',
+  collisionPadding: 10,
+  positionStrategy: 'absolute',
+  ...contentProps,
+  style: void 0
+}"
+			:style="contentStyle"
+			:class="twMerge(
+  `
+				popover--content
+				focus:outline-none
+				overflow-auto
+				scrollbar-hidden
+			`,
+  animationDirection === `use-side` && `
+				data-[side=top]:animate-slideInUp
+				data-[side=bottom]:animate-slideInDown
+				data-[side=left]:animate-slideInLeft
+				data-[side=right]:animate-slideInRight
+			`,
+  animationDirection === `use-align` && (contentProps?.side === 'top' || contentProps?.side === 'bottom' || !contentProps?.side) && `
+					data-[align=start]:animate-slideInLeft
+					data-[align=end]:animate-slideInRight
+					data-[align=center]:animate-contentShow
+				`,
+  animationDirection === `use-align` && (contentProps?.side === 'left' || contentProps?.side === 'right' || !contentProps?.side) && `
+					data-[align=start]:animate-slideInDown
+					data-[align=end]:animate-slideInUp
+					data-[align=center]:animate-contentShow
+				`,
+  animationDirection === `left` && `
+					animate-slideInLeft
+				`,
+  animationDirection === `right` && `
+					animate-slideInRight
+				`,
+  animationDirection === `up` && `
+					data-[side=top]:animate-slideInUp
+				`,
+  animationDirection === `down` && `
+					animate-slideInDown
+				`,
+  animationDirection === `show` && `
+					animate-contentShow
+				`,
+  contentProps?.class
+)"
+		>
+			<div
+				:class="twMerge(`
+					popover--content-inner
+					flex
+					flex-col
+					bg-neutral-50
+					dark:bg-neutral-900
+					rounded-sm
+					p-2
+					shadow-sm
+					shadow-black/30
+					border
+					border-black/30
+					whitespace-pre-wrap
+					overflow-auto
+				`)"
+			>
+				<slot name="popover"/>
+			</div>
+
+			<PopoverArrow
+				v-if="showArrow"
+				:class="twMerge(`
+					popover--arrow
+					-mt-px
+					fill-neutral-50
+					dark:fill-neutral-800
+					drop-shadow-[0_2px_1px_rgba(0,0,0,0.3)]
+					relative
+					stroke-black/30
+				`)"
+			/>
+		</PopoverContent>
+	</PopoverPortal>
+</PopoverRoot>
+</template>
+
+<script setup>
+import {
+  PopoverAnchor,
+  PopoverArrow,
+  PopoverContent,
+  PopoverPortal,
+  PopoverRoot
+} from "reka-ui";
+import { usePopupConstrainToStyle } from "../../composables/usePopupConstrainToStyle.js";
+import { twMerge } from "../../utils/twMerge.js";
+defineOptions({
+  name: "WPopover",
+  inheritAttrs: false
+});
+const props = defineProps({
+  constrainWidthTo: { type: [Number, String, null], required: false, default: 400 },
+  constrainHeightTo: { type: [Number, String, null], required: false, default: "available" },
+  backdropClass: { type: String, required: false },
+  showBackdrop: { type: Boolean, required: false, default: false },
+  showArrow: { type: Boolean, required: false, default: true },
+  animationDirection: { type: String, required: false, default: "use-side" },
+  to: { type: String, required: false, default: "#root" },
+  rootProps: { type: Object, required: false },
+  contentProps: { type: Object, required: false }
+});
+const modelValue = defineModel({ type: Boolean, ...{ default: false } });
+const contentStyle = usePopupConstrainToStyle("popover", props, [props?.contentProps?.style]);
+</script>

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

@@ -0,0 +1,45 @@
+import { type DialogContentEmits, type DialogRootEmits, type PopoverContentProps, type PopoverRootProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import type { EmitsToProps, PopupConstrainToProps, TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = PopupConstrainToProps & {
+    backdropClass?: string;
+    showBackdrop?: boolean;
+    showArrow?: boolean;
+    animationDirection?: "use-side" | "use-align" | "left" | "right" | "up" | "down" | "show" | "none";
+    /** Overrides teleport target. */
+    to?: string;
+    /** Overrides reka-ui's PopoverRootProps */
+    rootProps?: PopoverRootProps & EmitsToProps<DialogRootEmits> & Omit<HTMLAttributes, "class"> & TailwindClassProp;
+    /** Overrides reka-ui's PopoverContentProps */
+    contentProps?: PopoverContentProps & EmitsToProps<DialogContentEmits> & Omit<HTMLAttributes, "class"> & TailwindClassProp;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_14: {}, __VLS_34: {};
+type __VLS_Slots = {} & {
+    button?: (props: typeof __VLS_14) => any;
+} & {
+    popover?: (props: typeof __VLS_34) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    constrainWidthTo: number | "trigger" | "available" | string | null;
+    constrainHeightTo: number | "trigger" | "available" | string | null;
+    showBackdrop: boolean;
+    showArrow: boolean;
+    animationDirection: "use-side" | "use-align" | "left" | "right" | "up" | "down" | "show" | "none";
+    to: string;
+}, {}, {}, {}, 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/WPopup/WPopup.d.vue.ts

@@ -0,0 +1,51 @@
+import type { DialogContentEmits, DialogContentProps, DialogRootEmits, DialogRootProps } from "reka-ui";
+import type { EmitsToProps, HTMLAttributes } from "vue";
+import type { TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = {
+    title?: string;
+    description?: string;
+    backdropClass?: string;
+    /** Overrides reka-ui's DialogContentProps */
+    contentProps?: DialogContentProps & EmitsToProps<DialogContentEmits> & Omit<HTMLAttributes, "class"> & TailwindClassProp;
+    /** Overrides reka-ui's DialogRootProps */
+    rootProps?: DialogRootProps & EmitsToProps<DialogRootEmits> & Omit<HTMLAttributes, "class"> & TailwindClassProp;
+    /** Overrides teleport target. */
+    to?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_14: {}, __VLS_28: {
+    class: string;
+}, __VLS_36: {}, __VLS_38: {}, __VLS_46: {}, __VLS_54: {}, __VLS_62: {};
+type __VLS_Slots = {} & {
+    button?: (props: typeof __VLS_14) => any;
+} & {
+    backdrop?: (props: typeof __VLS_28) => any;
+} & {
+    popup?: (props: typeof __VLS_36) => any;
+} & {
+    title?: (props: typeof __VLS_38) => any;
+} & {
+    description?: (props: typeof __VLS_46) => any;
+} & {
+    extra?: (props: typeof __VLS_54) => any;
+} & {
+    close?: (props: typeof __VLS_62) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    to: string;
+}, {}, {}, {}, 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/WPopup/WPopup.vue

@@ -0,0 +1,106 @@
+<template>
+<DialogRoot
+	v-bind="rootProps"
+	v-model:open="modelValue"
+>
+	<DialogTrigger
+		v-if="$slots.button"
+		as-child
+	>
+		<slot name="button"/>
+	</DialogTrigger>
+
+	<DialogPortal :to="to">
+		<DialogOverlay
+			as-child
+		>
+			<slot
+				name="backdrop"
+				class="popup--backdrop absolute inset-0 bg-black/50"
+			>
+				<div
+					class="popup--backdrop absolute inset-0 bg-black/50"
+				/>
+			</slot>
+		</DialogOverlay>
+
+		<DialogContent
+			v-bind="{ ...contentProps, class: void 0 }"
+			:class="twMerge(`
+				popup--content
+				z-100
+				focus:outline-none
+				fixed
+				top-1/2
+				left-1/2
+				-translate-x-1/2
+				-translate-y-1/2
+				animate-contentShow
+				max-w-[100dvw]
+				max-h-[100dvh]
+				overflow-auto
+				scrollbar-hidden
+				p-5
+			`, contentProps?.class)"
+		>
+			<div
+				:class="twMerge(`
+					popup--content-inner
+					flex
+					flex-col
+					bg-neutral-100
+					dark:bg-neutral-800
+					rounded-md
+					flex
+					flex-col
+					gap-3
+					p-2
+				`)"
+			>
+				<slot name="popup">
+					<slot name="title">
+						<DialogTitle
+							v-if="title"
+							class="text-lg font-bold"
+						>
+							{{ title }}
+						</DialogTitle>
+					</slot>
+					<slot name="description">
+						<DialogDescription v-if="description">
+							{{ description }}
+						</DialogDescription>
+					</slot>
+					<slot name="extra"/>
+				</slot>
+				<DialogCloseButton as-child>
+					<slot name="close">
+						<WButton
+							class="justify-self-end"
+							@click="modelValue = false"
+						>
+							Close
+						</WButton>
+					</slot>
+				</DialogCloseButton>
+			</div>
+		</DialogContent>
+	</DialogPortal>
+</DialogRoot>
+</template>
+
+<script setup>
+import { DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTrigger } from "reka-ui";
+import { twMerge } from "../../utils/twMerge.js";
+import WButton from "../WButton/WButton.vue";
+defineOptions({ name: "WPopup", inheritAttrs: false });
+defineProps({
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  backdropClass: { type: String, required: false },
+  contentProps: { type: Object, required: false },
+  rootProps: { type: Object, required: false },
+  to: { type: String, required: false, default: "#root" }
+});
+const modelValue = defineModel({ type: Boolean, ...{ default: false } });
+</script>