adata-ui 3.1.61 → 3.1.62

package/dist/module.json

@@ -5,7 +5,7 @@
     "nuxt": ">=3.16.0"
   },
   "failOnWarn": false,
-  "version": "3.1.61",
+  "version": "3.1.62",
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "unbuild": "3.5.0"

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

@@ -13,9 +13,9 @@ export type StateType = {
 declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     size: "sm" | "md" | "lg";
     type: "primary" | "success" | "danger" | "gray" | "orange" | "warning";
-    disabled: boolean;
     view: "default" | "inverted";
-    customClasses: string;
+    disabled: boolean;
     prefix: string;
+    customClasses: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Drawer.vue

@@ -0,0 +1,77 @@
+<script setup>
+import { DrawerRoot, DrawerPortal, DrawerOverlay, DrawerContent, DrawerHandle } from "vaul-vue";
+import { DialogContent } from "reka-ui";
+import { computed } from "#imports";
+const props = defineProps({
+  side: { type: String, required: false, default: "bottom" },
+  width: { type: Number, required: false, default: 300 },
+  height: { type: Number, required: false, default: 300 }
+});
+const open = defineModel({ type: Boolean, ...{ default: false } });
+const sizeStyle = computed(() => {
+  if (["left", "right"].includes(props.side)) {
+    return { width: `${props.width}px`, height: "100%" };
+  }
+  return { width: "100%", height: `${props.height}px` };
+});
+const POSITION_CLASSES = {
+  right: "top-0 bottom-0 right-0",
+  left: "top-0 bottom-0 left-0",
+  top: "top-0 left-0 right-0",
+  bottom: "bottom-0 left-0 right-0"
+};
+const CORNER_CLASSES = {
+  left: "rounded-r-2xl",
+  right: "rounded-l-2xl",
+  top: "rounded-b-2xl",
+  bottom: "rounded-t-2xl"
+};
+const HANDLE_POSITION_CLASSES = {
+  top: "absolute -bottom-[calc(100%-12px)]",
+  bottom: "absolute top-2",
+  left: "absolute top-1/2 -translate-y-1/2 rotate-90 !mr-0",
+  right: "absolute top-1/2 -translate-y-1/2 rotate-90 !ml-0"
+};
+</script>
+
+<template>
+  <drawer-root
+    v-model:open="open"
+    :direction="side"
+  >
+    <drawer-portal>
+      <drawer-overlay class="fixed inset-0 bg-black/50" />
+
+      <drawer-content
+        :style="sizeStyle"
+        :class="[
+  'fixed bg-white dark:bg-gray-900 shadow-2xl',
+  POSITION_CLASSES[props.side],
+  CORNER_CLASSES[props.side]
+]"
+      >
+        <drawer-handle
+          :class="[
+  HANDLE_POSITION_CLASSES[props.side]
+]"
+        />
+
+        <div
+          v-if="$slots.header"
+          class="border-b border-deepblue-900/5 dark:border-gray-200/5 p-4"
+        >
+          <slot name="header" />
+        </div>
+        <div class="p-4">
+          <slot name="default" />
+        </div>
+        <div
+          v-if="$slots.footer"
+          class="border-b border-deepblue-900/5 dark:border-gray-200/5 p-4"
+        >
+          <slot name="footer" />
+        </div>
+      </drawer-content>
+    </drawer-portal>
+  </drawer-root>
+</template>

package/dist/runtime/components/{ASidePanel.vue.d.ts → Drawer.vue.d.ts}

@@ -1,23 +1,27 @@
 type __VLS_Props = {
     side?: 'right' | 'left' | 'top' | 'bottom';
-    width?: string;
-    height?: string;
+    width?: number;
+    height?: number;
 };
 type __VLS_PublicProps = __VLS_Props & {
     modelValue?: boolean;
 };
-declare var __VLS_30: {};
+declare var __VLS_22: {}, __VLS_24: {}, __VLS_26: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_30) => any;
+    header?: (props: typeof __VLS_22) => any;
+} & {
+    default?: (props: typeof __VLS_24) => any;
+} & {
+    footer?: (props: typeof __VLS_26) => any;
 };
 declare const __VLS_component: 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;
 }>, {
+    width: number;
+    height: number;
     side: "right" | "left" | "top" | "bottom";
-    width: string;
-    height: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -23,7 +23,15 @@ type __VLS_Slots = {} & {
 } & {
     notifications?: (props: typeof __VLS_54) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    search: (...args: any[]) => void;
+    logout: (...args: any[]) => void;
+    login: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onSearch?: ((...args: any[]) => any) | undefined;
+    onLogout?: ((...args: any[]) => any) | undefined;
+    onLogin?: ((...args: any[]) => any) | undefined;
+}>, {
     daysRemaining: number;
     limitRemaining: number;
     isAuthenticated: boolean;

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

@@ -21,11 +21,17 @@ type __VLS_Slots = {} & {
 } & {
     footer?: (props: typeof __VLS_22) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{}>, {
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+    "update:modelValue": (value: boolean | undefined) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+}>, {
     name: string;
-    width: string | number;
-    transition: boolean;
     title: string;
+    transition: boolean;
+    width: string | number;
     overlay: boolean;
     preventClose: boolean;
     fullscreen: boolean;

package/dist/runtime/components/SidePanel.vue

@@ -1,370 +1,140 @@
 <script setup>
-import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
-import { useAdaptive } from "#adata-ui/composables/useAdaptive";
-import { ref, useAttrs, onMounted, onBeforeUnmount, watch, computed } from "#imports";
+import { computed } from "#imports";
+import { DialogContent, DialogOverlay, DialogPortal, DialogRoot } from "reka-ui";
+import { AnimatePresence, Motion } from "motion-v";
+import { useMediaQuery } from "@vueuse/core";
 const props = defineProps({
-  idName: { type: String, required: false, default: "vsp-container" },
-  hideCloseBtn: { type: Boolean, required: false },
-  noClose: { type: Boolean, required: false },
   side: { type: String, required: false, default: "right" },
-  rerender: { type: Boolean, required: false },
-  zIndex: { type: [Number, String], required: false, default: "auto" },
-  width: { type: String, required: false, default: "auto" },
-  height: { type: String, required: false, default: "auto" },
-  lockScroll: { type: Boolean, required: false, default: true },
-  lockScrollHtml: { type: Boolean, required: false },
-  hideScrollbar: { type: Boolean, required: false, default: false },
-  overlayColor: { type: String, required: false, default: "black" },
-  overlayOpacity: { type: Number, required: false, default: 0.5 },
-  overlayDuration: { type: Number, required: false, default: 500 },
-  panelColor: { type: String, required: false, default: "bg-white dark:bg-gray-900" },
-  panelDuration: { type: Number, required: false, default: 300 },
-  transitionName: { type: String, required: false },
-  headerClass: { type: String, required: false },
-  bodyClass: { type: String, required: false },
-  footerClass: { type: String, required: false }
+  width: { type: Number, required: false, default: 300 },
+  height: { type: Number, required: false, default: 300 },
+  heightDrawer: { type: Number, required: false },
+  widthDrawer: { type: Number, required: false }
 });
-defineEmits(["opened", "closed"]);
-const modelValue = defineModel();
-let teleportContainer = void 0;
-const panel = ref(null);
-const overlay = ref(null);
-const footer = ref(null);
-const header = ref(null);
-const body = ref(null);
-const panelSide = ref(props.side);
-const device = useAdaptive();
-const zIndex = ref();
-const isBodyAlreadyLocked = ref(false);
-const attrs = useAttrs();
-const closePanel = () => modelValue.value = false;
-const lockUnlockBodyScroll = (elem, lock) => {
-  if (lock) {
-    setTimeout(() => {
-      disableBodyScroll(elem, {
-        reserveScrollBarGap: true,
-        allowTouchMove: elem && elem !== document.body
-      });
-      disableBodyScroll(elem, { reserveScrollBarGap: true });
-      if (props.lockScrollHtml) document.documentElement.style.overflow = "hidden";
-    }, 0);
-    return;
-  }
-  enableBodyScroll(elem);
-  if (props.lockScrollHtml) document.documentElement.style.removeProperty("overflow");
+const open = defineModel({ type: Boolean, ...{ default: false } });
+const isDesktop = useMediaQuery("(min-width: 1024px)");
+const showSidePanel = computed(() => isDesktop.value);
+const POSITION_CLASSES = {
+  right: "top-0 bottom-0 right-0",
+  left: "top-0 bottom-0 left-0",
+  top: "top-0 left-0 right-0",
+  bottom: "bottom-0 left-0 right-0"
 };
-const getMaxZIndex = () => Math.max(
-  ...Array.from(
-    document.querySelectorAll("body *"),
-    (el) => Number.parseFloat(window.getComputedStyle(el).zIndex)
-  ).filter((zIndex2) => !Number.isNaN(zIndex2)),
-  0
-);
-onMounted(() => {
-  zIndex.value = props.zIndex === "auto" ? getMaxZIndex() : props.zIndex;
-  const alreadyCreatedTarget = document.getElementById(props.idName);
-  if (alreadyCreatedTarget) return;
-  teleportContainer = document.createElement("div");
-  teleportContainer.setAttribute("id", props.idName);
-  document.body.appendChild(teleportContainer);
-});
-onBeforeUnmount(() => {
-  if (props.lockScroll && panel.value && modelValue.value) lockUnlockBodyScroll(panel.value, false);
-  if (teleportContainer) document.body.removeChild(teleportContainer);
-});
-watch(() => device.value, () => {
-  panelSide.value = device.value.isTablet || device.value.isSmallTablet ? "bottom" : props.side;
-}, { immediate: true });
-watch(() => [modelValue.value, panel.value], (newP, oldP) => {
-  const wasShown = oldP ? oldP[0] : false;
-  const [isShown, panelEl] = newP;
-  const isOpening = isShown;
-  const isClosing = wasShown && !isShown;
-  if (!panelEl) return;
-  if (isShown) {
-    if (props.lockScroll) lockUnlockBodyScroll(panelEl, true);
-    return;
-  }
-  if (!props.lockScroll || !isClosing || isBodyAlreadyLocked.value) return;
-  setTimeout(() => {
-    if (panelEl) lockUnlockBodyScroll(panelEl, false);
-  }, props.panelDuration);
-}, { immediate: true });
-const roundedClass = computed(() => {
-  const classes = {
-    left: "rounded-r-xl",
-    right: "rounded-l-xl",
-    top: "rounded-b-xl",
-    bottom: "rounded-t-xl"
-  };
-  return classes[panelSide.value];
-});
-const overlayStyles = computed(() => ({
-  "zIndex": zIndex.value,
-  "animationDuration": `${props.overlayDuration}ms`,
-  "--overlay-opacity": props.overlayOpacity,
-  "opacity": modelValue.value ? props.overlayOpacity : 0,
-  "backgroundColor": props.overlayColor,
-  "pointerEvents": !modelValue.value ? "none" : "all"
-}));
-const panelStyles = computed(() => ({
-  width: ["left", "right"].includes(panelSide.value) ? props.width : void 0,
-  maxWidth: "100%",
-  ...["top", "bottom"].includes(panelSide.value) ? {
-    height: device.value.isSmallTablet || device.value.isTablet ? "100%" : props.height,
-    maxHeight: device.value.isMobile ? "90%" : "100%"
-  } : {},
-  zIndex: zIndex.value,
-  animationDuration: `${props.panelDuration}ms`,
-  ...Object.assign({}, attrs.style)
-}));
-const positionStart = ref(0);
-const isClose = ref(false);
-const modalHeight = ref(0);
-const touchstart = (event) => {
-  isClose.value = false;
-  positionStart.value = event.touches[0].clientY;
-  modalHeight.value = panel.value?.offsetHeight || 0;
+const CORNER_CLASSES = {
+  left: "rounded-r-2xl",
+  right: "rounded-l-2xl",
+  top: "rounded-b-2xl",
+  bottom: "rounded-t-2xl"
+};
+const BUTTON_POSITIONS = {
+  left: "-right-8 top-8",
+  right: "-left-8 top-8",
+  top: "hidden",
+  bottom: "hidden"
 };
-const touchmove = (event) => {
-  if (!device.value.isSmallTablet && !device.value.isTablet) return;
-  event.preventDefault();
-  const touchPosition = event.touches[0].clientY;
-  const step = touchPosition - positionStart.value;
-  if (step < 0) return;
-  const newHeight = modalHeight.value - step;
-  panel.value.style.height = `${newHeight}px`;
-  isClose.value = step > 65;
+const BUTTON_CORNERS = {
+  left: "rounded-r-lg",
+  right: "rounded-l-lg",
+  top: "rounded-b-lg",
+  bottom: "rounded-t-lg"
 };
-const touchend = () => {
-  if (isClose.value) {
-    closePanel();
-  } else {
-    panel.value.style.height = `${modalHeight.value}px`;
+const sizeStyle = computed(() => {
+  if (["left", "right"].includes(props.side)) {
+    return { width: `${props.width}px`, height: "100%" };
   }
+  return { width: "100%", height: `${props.height}px` };
+});
+const motionInitial = {
+  right: { x: props.width },
+  left: { x: -props.width },
+  top: { y: -props.height },
+  bottom: { y: props.height }
 };
+const motionAnimate = { x: 0, y: 0 };
 </script>
 
 <template>
-  <client-only>
-    <Teleport :to="`#${idName}`">
-      <div
-        class="vsp-wrapper"
-        :class="[modelValue && 'vsp-wrapper--active']"
-      >
-        <Transition name="overlay">
-          <div
-            v-show="modelValue"
-            ref="overlay"
-            class="vsp-overlay fixed top-0 left-0 w-full h-full"
-            :style="overlayStyles"
-            @click="() => noClose ? void 0 : closePanel()"
+  <dialog-root
+    v-if="showSidePanel"
+    v-model:open="open"
+  >
+    <dialog-portal>
+      <animate-presence>
+        <dialog-overlay as-child>
+          <Motion
+            class="fixed inset-0 bg-black/50"
+            :initial="{ opacity: 0 }"
+            :animate="{ opacity: 1 }"
+            :exit="{ opacity: 0 }"
+            :transition="{ duration: 0.3, ease: 'easeOut' }"
           />
-        </Transition>
-        <Transition
-          :name="transitionName || `slide-${panelSide}`"
-          @after-enter="$emit('opened')"
-          @after-leave="$emit('closed')"
+        </dialog-overlay>
+
+        <dialog-content
+          as-child
+          :data-side="props.side"
+          :style="sizeStyle"
+          :class="[
+  'fixed bg-white dark:bg-gray-900 shadow-2xl',
+  POSITION_CLASSES[props.side],
+  CORNER_CLASSES[props.side]
+]"
         >
-          <div
-            v-if="rerender ? modelValue : true"
-            v-show="rerender ? true : modelValue"
-            ref="panel"
-            class="vsp fixed flex flex-col"
-            :class="[`vsp--${panelSide}-side`, $attrs.class, roundedClass, panelColor]"
-            :style="panelStyles"
+          <Motion
+            :initial="motionInitial[props.side]"
+            :animate="motionAnimate"
+            :exit="motionInitial[props.side]"
+            :transition="{ duration: 0.3, ease: 'easeInOut' }"
           >
-            <div
-              class="w-full flex justify-center items-center mt-1 lg:hidden"
-              @touchmove="touchmove"
-              @touchstart="touchstart"
-              @touchend="touchend"
-            >
-              <div class="h-1 w-10 bg-[#D9D9D9] rounded m-1" />
-            </div>
-            <div
-              v-if="!hideCloseBtn"
-              :class="roundedClass"
-              class="absolute w-8 px-2 py-4 bg-blue-700 text-white dark:text-gray-950 -left-8 top-8 cursor-pointer lg:block hidden"
-              @click="closePanel"
+            <button
+              :class="[
+  'absolute h-12 w-8 bg-blue-700 dark:bg-blue-500 cursor-pointer',
+  BUTTON_CORNERS[props.side],
+  BUTTON_POSITIONS[props.side]
+]"
+              @click="open = false"
             >
-              <i-x-mark />
-            </div>
+              <i-x-mark class="size-4 m-auto text-white dark:text-gray-900" />
+            </button>
             <div
-              v-if="!!$slots.header"
-              ref="header"
-              :class="[headerClass, 'vsp__header border-b border-deepblue-100 dark:border-[#E3E5E80D] lg:px-8 p-4']"
-              @touchmove="touchmove"
-              @touchstart="touchstart"
-              @touchend="touchend"
+              v-if="$slots.header"
+              class="border-b border-deepblue-900/5 dark:border-gray-200/5 lg:px-8 p-4"
             >
-              <slot
-                name="header"
-                :close="closePanel"
-              />
+              <slot name="header" />
             </div>
-            <div
-              ref="body"
-              :class="[
-  bodyClass,
-  'vsp__body overflow-y-auto relative flex-grow-1 h-full lg:px-8 p-4',
-  hideScrollbar ? 'vsp__body--hide-scroll' : ''
-]"
-            >
-              <slot
-                name="default"
-                :close="closePanel"
-              />
+            <div class="lg:px-8 p-4">
+              <slot name="default" />
             </div>
             <div
-              v-if="!!$slots.footer"
-              ref="footer"
-              :class="[footerClass, 'vsp__footer border-t border-deepblue-100 dark:border-[#E3E5E80D] lg:px-8 p-4']"
+              v-if="$slots.footer"
+              class="border-b border-deepblue-900/5 dark:border-gray-200/5 lg:px-8 p-4"
             >
               <slot name="footer" />
             </div>
-          </div>
-        </Transition>
-      </div>
-    </Teleport>
-  </client-only>
+          </Motion>
+        </dialog-content>
+      </animate-presence>
+    </dialog-portal>
+  </dialog-root>
+  <adt-drawer
+    v-else
+    v-model:open="open"
+    :width="widthDrawer"
+    :height="heightDrawer"
+  >
+    <template
+      v-if="$slots.header"
+      #header
+    >
+      <slot name="header" />
+    </template>
+    <template #default>
+      <slot name="default" />
+    </template>
+    <template
+      v-if="$slots.footer"
+      #footer
+    >
+      <slot name="footer" />
+    </template>
+  </adt-drawer>
 </template>
-
-<style scoped>
-.vsp-wrapper .vsp--right-side, .vsp-wrapper .vsp--left-side {
-  top: 0;
-  height: 100%;
-}
-.vsp-wrapper .vsp--right-side {
-  right: 0;
-  left: unset;
-}
-.vsp-wrapper .vsp--left-side {
-  right: unset;
-  left: 0;
-}
-.vsp-wrapper .vsp--bottom-side, .vsp-wrapper .vsp--top-side {
-  left: 0;
-  width: 100%;
-}
-.vsp-wrapper .vsp--bottom-side {
-  bottom: 0;
-}
-.vsp-wrapper .vsp--top-side {
-  top: 0;
-}
-.vsp-wrapper .vsp__body.overflow-y-auto::-webkit-scrollbar {
-  width: 8px;
-}
-.vsp-wrapper .vsp__body.overflow-y-auto::-webkit-scrollbar-thumb {
-  background: rgba(44, 62, 80, 0.2);
-  border-radius: 6px;
-}
-.vsp-wrapper .vsp__body.vsp__body--hide-scroll {
-  scrollbar-width: none;
-}
-.vsp-wrapper .vsp__body.vsp__body--hide-scroll::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-}
-.vsp-wrapper .overlay-enter-active,
-.vsp-wrapper .overlay-leave-active {
-  animation: overlay-transition;
-}
-.vsp-wrapper .overlay-leave-active {
-  animation-direction: reverse;
-}
-.vsp-wrapper .slide-right-enter-active,
-.vsp-wrapper .slide-right-leave-active {
-  animation: slide-right;
-}
-.vsp-wrapper .slide-right-leave-active {
-  animation-direction: reverse;
-}
-.vsp-wrapper .slide-left-enter-active,
-.vsp-wrapper .slide-left-leave-active {
-  animation: slide-left;
-}
-.vsp-wrapper .slide-left-leave-active {
-  animation-direction: reverse;
-}
-.vsp-wrapper .slide-top-enter-active,
-.vsp-wrapper .slide-top-leave-active {
-  animation: slide-left;
-}
-.vsp-wrapper .slide-top-leave-active {
-  animation-direction: reverse;
-}
-.vsp-wrapper .slide-top-enter-active,
-.vsp-wrapper .slide-top-leave-active {
-  animation: slide-top;
-}
-.vsp-wrapper .slide-top-leave-active {
-  animation-direction: reverse;
-}
-.vsp-wrapper .slide-bottom-enter-active,
-.vsp-wrapper .slide-bottom-leave-active {
-  animation: slide-bottom;
-}
-.vsp-wrapper .slide-bottom-leave-active {
-  animation-direction: reverse;
-}
-@keyframes slide-right {
-  0% {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-@keyframes slide-left {
-  0% {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-@keyframes slide-bottom {
-  0% {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-@keyframes slide-top {
-  0% {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-@keyframes slide-top {
-  0% {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-@keyframes overlay-transition {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: var(--overlay-opacity);
-  }
-}
-</style>

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

@@ -1,63 +1,35 @@
-type Side = 'top' | 'right' | 'bottom' | 'left';
 type __VLS_Props = {
-    idName?: string;
-    hideCloseBtn?: boolean;
-    noClose?: boolean;
-    side?: Side;
-    rerender?: boolean;
-    zIndex?: number | 'auto';
-    width?: string;
-    height?: string;
-    lockScroll?: boolean;
-    lockScrollHtml?: boolean;
-    hideScrollbar?: boolean;
-    overlayColor?: string;
-    overlayOpacity?: number;
-    overlayDuration?: number;
-    panelColor?: string;
-    panelDuration?: number;
-    transitionName?: string;
-    headerClass?: string;
-    bodyClass?: string;
-    footerClass?: string;
+    side?: 'right' | 'left' | 'top' | 'bottom';
+    width?: number;
+    height?: number;
+    heightDrawer?: number;
+    widthDrawer?: number;
 };
 type __VLS_PublicProps = __VLS_Props & {
-    modelValue?: any;
+    modelValue?: boolean;
 };
-declare var __VLS_27: {
-    close: any;
-}, __VLS_29: {
-    close: any;
-}, __VLS_31: {};
+declare var __VLS_34: {}, __VLS_36: {}, __VLS_38: {}, __VLS_45: {}, __VLS_47: {}, __VLS_49: {};
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_27) => any;
+    header?: (props: typeof __VLS_34) => any;
 } & {
-    default?: (props: typeof __VLS_29) => any;
+    default?: (props: typeof __VLS_36) => any;
 } & {
-    footer?: (props: typeof __VLS_31) => any;
+    footer?: (props: typeof __VLS_38) => any;
+} & {
+    header?: (props: typeof __VLS_45) => any;
+} & {
+    default?: (props: typeof __VLS_47) => any;
+} & {
+    footer?: (props: typeof __VLS_49) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: any) => any;
-} & {
-    opened: () => any;
-    closed: () => any;
+    "update:modelValue": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
-    onOpened?: (() => any) | undefined;
-    onClosed?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
-    side: Side;
-    width: string;
-    height: string;
-    idName: string;
-    zIndex: number | "auto";
-    lockScroll: boolean;
-    hideScrollbar: boolean;
-    overlayColor: string;
-    overlayOpacity: number;
-    overlayDuration: number;
-    panelColor: string;
-    panelDuration: number;
+    width: number;
+    height: number;
+    side: "right" | "left" | "top" | "bottom";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/runtime/components/accordion/Accordion.vue.d.ts

@@ -1,6 +1,6 @@
 import type { Props } from './types.js';
 declare function emulateButtonClick(): void;
-declare var __VLS_20: {}, __VLS_22: {}, __VLS_28: {}, __VLS_35: any, __VLS_36: {
+declare var __VLS_20: {}, __VLS_22: {}, __VLS_28: {}, __VLS_35: string, __VLS_36: {
     content: any;
 };
 type __VLS_Slots = {} & {
@@ -27,9 +27,9 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {
 }>, {
     size: import("./types.js").Size;
     color: import("./types.js").Color;
+    slot: string;
     disabled: boolean;
     defaultOpen: boolean;
-    slot: string;
     divider: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/runtime/components/button/Button.vue.d.ts

@@ -18,11 +18,11 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     size: "sm" | "md" | "lg" | "xl";
-    to: string;
-    disabled: boolean;
     view: "default" | "outline" | "transparent";
-    variant: "primary" | "success" | "danger" | "gray" | "ghost";
     form: "icon" | "button";
+    disabled: boolean;
+    to: string;
+    variant: "primary" | "success" | "danger" | "gray" | "ghost";
     iconClass: string;
     loading: boolean;
     block: boolean;

package/dist/runtime/components/checkbox/Checkbox.vue.d.ts

@@ -22,12 +22,16 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_17) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
     name: string;
     size: "lg" | "sm";
-    side: "right" | "left" | null;
     modelValue: string | number | Array<any> | object | boolean | null;
     value: string | number | object | null;
+    side: "right" | "left" | null;
     masterControl: boolean;
     emptyCheckboxClass: string;
     intermediateCheckboxClass: string;

package/dist/runtime/components/error-template/index.vue.d.ts

@@ -3,7 +3,7 @@ interface Props {
     error: ErrorTemplateData;
 }
 declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {
-    data: any;
+    data: ErrorTemplateData;
 }, __VLS_9: {};
 type __VLS_Slots = {} & {
     icon?: (props: typeof __VLS_1) => any;

package/dist/runtime/components/forms/input/password/InputPassword.vue.d.ts

@@ -8,8 +8,8 @@ interface Props {
 declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     size: "sm" | "md";
     error: string;
+    label: string;
     disabled: boolean;
     required: boolean;
-    label: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/forms/input/textarea/ATextarea.vue.d.ts

@@ -25,9 +25,9 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
 }>, {
     size: "sm" | "md";
     error: string | boolean;
+    label: string;
     disabled: boolean;
     required: boolean;
-    label: string;
     readonly: boolean;
     clearable: boolean;
     startIcon: string | object;

package/dist/runtime/components/forms/need-more-data/NeedMoreData.vue.d.ts

@@ -1,5 +1,11 @@
 type __VLS_PublicProps = {
     'isLoading'?: boolean;
 };
-declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: (...args: any[]) => void;
+    "update:isLoading": (value: boolean) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSubmit?: ((...args: any[]) => any) | undefined;
+    "onUpdate:isLoading"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/forms/request-demo/RequestDemo.vue.d.ts

@@ -12,7 +12,11 @@ type __VLS_Slots = {} & {
 } & {
     info?: (props: typeof __VLS_27) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    send: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSend?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/header/ContactMenu.vue.d.ts

@@ -3,9 +3,15 @@ type __VLS_Props = {
     index?: number;
     url?: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
-    index: number;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    outerClick: (...args: any[]) => void;
+    mouseOver: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOuterClick?: ((...args: any[]) => any) | undefined;
+    onMouseOver?: ((...args: any[]) => any) | undefined;
+}>, {
     animation: string;
+    index: number;
     url: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/header/ProductMenu.vue.d.ts

@@ -3,9 +3,15 @@ type __VLS_Props = {
     index?: number;
     url?: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
-    index: number;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    outerClick: (...args: any[]) => void;
+    mouseOver: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOuterClick?: ((...args: any[]) => any) | undefined;
+    onMouseOver?: ((...args: any[]) => any) | undefined;
+}>, {
     animation: string;
+    index: number;
     url: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/header/ProfileMenu.vue.d.ts

@@ -9,7 +9,11 @@ interface Props {
     email?: string;
     showLogin?: boolean;
 }
-declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    logout: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onLogout?: ((...args: any[]) => any) | undefined;
+}>, {
     daysRemaining: number;
     limitRemaining: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/header/ProfileMenuContent.vue.d.ts

@@ -10,7 +10,11 @@ interface Props {
     email?: string;
     showLogin?: boolean;
 }
-declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    logout: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onLogout?: ((...args: any[]) => any) | undefined;
+}>, {
     daysRemaining: number;
     limitRemaining: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/header-mobile/HeaderMobile.vue.d.ts

@@ -7,7 +7,13 @@ declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     burger?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    search: (...args: any[]) => void;
+    goToAnotherModule: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSearch?: ((...args: any[]) => any) | undefined;
+    onGoToAnotherModule?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/mobile-navigation/BottomNavigation.vue.d.ts

@@ -8,7 +8,7 @@ type __VLS_PublicProps = __VLS_Props & {
     modelValue?: string;
 };
 declare var __VLS_1: {}, __VLS_7: {
-    items: any;
+    items: T[];
 };
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;

package/dist/runtime/components/mobile-navigation/MainButton.vue.d.ts

@@ -1,2 +1,6 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    pushMain: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onPushMain?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/runtime/components/modals/NoAccessContent.vue.d.ts

@@ -1,5 +1,9 @@
 type __VLS_Props = {
     redirectPath: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/modals/NoAccessSimple.vue.d.ts

@@ -1,2 +1,6 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/runtime/components/payment/process/PaymentKaspiQrSidePanel.vue

@@ -97,7 +97,8 @@ watch(isOpen, async (value) => {
 <template>
   <adt-side-panel
     v-model="isOpen"
-    width="484px"
+    :width="484"
+    :height-drawer="800"
   >
     <template #header>
       <div class="flex items-center gap-2">

package/dist/runtime/components/payment/process/PaymentKaspiRedirectSidePanel.vue

@@ -62,7 +62,8 @@ watch(isOpen, async (value) => {
 <template>
   <adt-side-panel
     v-model="isOpen"
-    width="484px"
+    :width="484"
+    :height-drawer="800"
   >
     <div class="flex flex-col gap-5">
       <p class="text-center text-2xl font-bold whitespace-pre-wrap">

package/dist/runtime/components/payment/process/PaymentMethodSidePanel.vue

@@ -37,7 +37,8 @@ function onBack() {
 <template>
   <adt-side-panel
     v-model="isOpen"
-    width="484px"
+    :width="484"
+    :height-drawer="600"
   >
     <template #header>
       <div class="flex items-center gap-2">

package/dist/runtime/components/payment/process/PaymentTopUpSidePanel.vue

@@ -52,7 +52,8 @@ function handlePayment() {
 <template>
   <adt-side-panel
     v-model="isOpen"
-    width="484px"
+    :width="484"
+    :height-drawer="500"
   >
     <template #header>
       <div class="text-xl font-semibold">

package/dist/runtime/components/pill-tabs/PillTabs.vue.d.ts

@@ -15,12 +15,20 @@ type __VLS_PublicProps = __VLS_Props & {
     modelValue?: any;
 };
 declare var __VLS_1: {
-    option: any;
+    option: Tab;
 };
 type __VLS_Slots = {} & {
     option?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{}>, {
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    selectOption: (...args: any[]) => void;
+    prevent: (...args: any[]) => void;
+    "update:modelValue": (value: any) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    onSelectOption?: ((...args: any[]) => any) | undefined;
+    onPrevent?: ((...args: any[]) => any) | undefined;
+}>, {
     size: "lg" | "sm" | "xs";
     view: "transparent" | "main" | "gray" | "blue" | "mobile";
     block: boolean;

package/dist/runtime/components/radio-button/RadioButton.vue.d.ts

@@ -27,8 +27,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
 }>, {
     name: string;
     size: "lg" | "sm";
-    side: "right" | "left";
     disabled: boolean;
+    side: "right" | "left";
     permanent: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/runtime/components/select-row/index.vue.d.ts

@@ -22,8 +22,8 @@ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {},
     onDelete?: ((item: Item) => any) | undefined;
     "onUpdate:isOpen"?: ((value: boolean | undefined) => any) | undefined;
 }>, {
-    disabled: boolean;
     label: string;
+    disabled: boolean;
     clearable: boolean;
     deletable: boolean;
     btnClass: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adata-ui",
-  "version": "3.1.61",
+  "version": "3.1.62",
   "description": "Adata UI",
   "repository": "your-org/my-module",
   "license": "MIT",
@@ -43,11 +43,13 @@
     "body-scroll-lock": "4.0.0-beta.0",
     "defu": "^6.1.4",
     "maska": "^3.2.0",
+    "motion-v": "^1.7.4",
     "qrcode": "^1.5.4",
     "reka-ui": "^2.2.1",
     "sass": "^1.89.0",
     "tailwind-merge": "^3.3.0",
     "tailwindcss": "^4.1.6",
+    "vaul-vue": "^0.4.1",
     "vue3-toastify": "^0.2.8"
   },
   "devDependencies": {

package/dist/runtime/components/ASidePanel.vue

@@ -1,121 +0,0 @@
-<script setup>
-import { computed } from "#imports";
-import { DialogContent, DialogOverlay, DialogPortal, DialogRoot } from "reka-ui";
-const props = defineProps({
-  side: { type: String, required: false, default: "right" },
-  width: { type: String, required: false, default: "300px" },
-  height: { type: String, required: false, default: "300px" }
-});
-const open = defineModel({ type: Boolean, ...{ default: false } });
-const POSITION_CLASSES = {
-  right: "top-0 bottom-0 right-0",
-  left: "top-0 bottom-0 left-0",
-  top: "top-0 left-0 right-0",
-  bottom: "bottom-0 left-0 right-0"
-};
-const CORNER_CLASSES = {
-  left: "rounded-r-2xl",
-  right: "rounded-l-2xl",
-  top: "rounded-b-2xl",
-  bottom: "rounded-t-2xl"
-};
-const BUTTON_POSITIONS = {
-  left: "-right-8 top-8",
-  right: "-left-8 top-8",
-  top: "hidden",
-  bottom: "hidden"
-};
-const BUTTON_CORNERS = {
-  left: "rounded-r-lg",
-  right: "rounded-l-lg",
-  top: "rounded-b-lg",
-  bottom: "rounded-t-lg"
-};
-const sizeStyle = computed(() => {
-  if (["left", "right"].includes(props.side)) {
-    return { width: props.width, height: "100%" };
-  }
-  return { width: "100%", height: props.height };
-});
-</script>
-
-<template>
-  <dialog-root v-model:open="open">
-    <dialog-portal>
-      <transition name="fade">
-        <dialog-overlay
-          class="fixed inset-0 bg-black/50"
-        />
-      </transition>
-
-      <transition name="slide">
-        <dialog-content
-          :data-side="props.side"
-          :style="sizeStyle"
-          :class="[
-  'fixed bg-white dark:bg-gray-900 shadow-2xl',
-  POSITION_CLASSES[props.side],
-  CORNER_CLASSES[props.side]
-]"
-        >
-          <button
-            :class="[
-  'absolute h-12 w-8 bg-blue-700 dark:bg-blue-500 cursor-pointer',
-  BUTTON_CORNERS[props.side],
-  BUTTON_POSITIONS[props.side]
-]"
-            @click="open = false"
-          >
-            <i-x-mark class="size-4 m-auto" />
-          </button>
-          <slot />
-        </dialog-content>
-      </transition>
-    </dialog-portal>
-  </dialog-root>
-</template>
-
-<style scoped>
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-.slide-enter-active,
-.slide-leave-active {
-  transition: transform 0.3s ease;
-}
-
-.slide-enter-from {
-  transform: translateX(100%);
-}
-
-.slide-leave-to {
-  transform: translateX(100%);
-}
-
-.slide-enter-from[data-side=right],
-.slide-leave-to[data-side=right] {
-  transform: translateX(100%);
-}
-
-.slide-enter-from[data-side=left],
-.slide-leave-to[data-side=left] {
-  transform: translateX(-100%);
-}
-
-.slide-enter-from[data-side=top],
-.slide-leave-to[data-side=top] {
-  transform: translateY(-100%);
-}
-
-.slide-enter-from[data-side=bottom],
-.slide-leave-to[data-side=bottom] {
-  transform: translateY(100%);
-}
-</style>