pukaad-ui-lib 1.231.0 → 1.233.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.231.0",
+  "version": "1.233.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/assets/json/social-icon.json

@@ -40,7 +40,7 @@
     "example": "https://threads.net/@username"
   },
   {
-    "icon": "pukaad-social:Tiktok",
+    "icon": "pukaad-social:TikTok",
     "name": "TikTok",
     "example": "https://tiktok.com/@username"
   },
@@ -60,7 +60,7 @@
     "example": "https://example.com"
   },
   {
-    "icon": "pukaad-social:Whatsapp",
+    "icon": "pukaad-social:WhatsApp",
     "name": "WhatsApp",
     "example": "https://wa.me/1234567890"
   },

package/dist/runtime/components/button.vue

@@ -1,21 +1,13 @@
 <template>
-  <ShadButton
-    :class="[
+  <ShadButton :class="[
   'font-body-medium relative',
-  props.variant === 'text' && '!p-0',
+  props.variant === 'text' || props.variant === 'link' ? '!p-0 !h-auto' : '',
   props.circle && 'rounded-full aspect-square',
   props.class
-]"
-    :variant="props.variant"
-    :color="props.color"
-    :type="props.type"
-    :disabled="props.loading || props.disabled"
-  >
+]" :variant="props.variant" :color="props.color" :type="props.type" :disabled="props.loading || props.disabled">
     <span class="inline-grid place-items-center">
-      <span
-        class="inline-flex items-center justify-center gap-[8px] [grid-area:1/1]"
-        :class="{ invisible: props.loading }"
-      >
+      <span class="inline-flex items-center justify-center gap-[8px] [grid-area:1/1]"
+        :class="{ invisible: props.loading }">
         <slot />
       </span>
       <ShadSpinner v-if="props.loading" class="[grid-area:1/1]" />

package/dist/runtime/components/card/card-place-detail.vue

@@ -69,7 +69,7 @@ const businessHours = computed(
 );
 const socialLinks = computed(
   () => (props.item.contact_channels ?? []).filter((ch) => ch.value).map((ch) => ({
-    name: ch.channel_type?.toLowerCase() ?? "link",
+    name: ch.channel_type ?? "link",
     link: ch.value
   }))
 );

package/dist/runtime/components/drawer/drawer-post-blog.d.vue.ts

@@ -1,4 +1,5 @@
 export interface DrawerPostBlogItem {
+    id?: string;
     title: string;
     content: object[];
     tags: any[];

package/dist/runtime/components/drawer/drawer-post-blog.vue

@@ -1,37 +1,13 @@
 <template>
-  <Drawer
-    class="w-[748px]"
-    :title="drawerTitle"
-    @close="onClose"
-    disabled-auto-close
-    @submit="onSubmit"
-    v-model="isOpen"
-  >
+  <Drawer class="w-[748px]" :title="drawerTitle" @close="onClose" disabled-auto-close @submit="onSubmit"
+    v-model="isOpen">
     <div class="flex flex-col gap-[16px]">
-      <InputTextField
-        name="title"
-        label="หัวข้อ"
-        placeholder="ตั้งชื่อบทความให้น่าสนใจ"
-        showCounter
-        :limit="180"
-        v-model="form.title"
-        disabled-border
-        required
-      />
+      <InputTextField name="title" label="หัวข้อ" placeholder="ตั้งชื่อบทความให้น่าสนใจ" showCounter :limit="180"
+        v-model="form.title" disabled-border required />
 
-      <InputContent
-        placeholder="อยากเล่าอะไร"
-        :height="288"
-        v-model="form.content"
-      />
+      <InputContent placeholder="อยากเล่าอะไร" :height="288" v-model="form.content" />
 
-      <InputTag
-        v-model="form.tags"
-        name="tags"
-        label="แท็ก"
-        placeholder="เพิ่มแท็ก"
-        :limit="5"
-      />
+      <InputTag v-model="form.tags" name="tags" label="แท็ก" placeholder="เพิ่มแท็ก" :limit="5" />
 
       <!-- <InputCheckbox
         name="disableComment"
@@ -41,12 +17,8 @@
 
       <div class="flex flex-col gap-[8px]">
         <div class="text-gray font-body-large">ภาพหน้าปก</div>
-        <InputFile
-          :limit="1"
-          name="coverImage"
-          accept="image/jpeg,image/png,image/webp,image/bmp,image/gif"
-          v-model="form.coverImage"
-        />
+        <InputFile :limit="1" name="coverImage" accept="image/jpeg,image/png,image/webp,image/bmp,image/gif"
+          v-model="form.coverImage" />
         <div class="flex flex-col text-gray font-body-small">
           <div>รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif</div>
           <div>ขนาดไม่เกิน 30 mb</div>
@@ -58,11 +30,7 @@
       <div class="flex justify-end gap-[16px] items-center">
         <Button variant="outline" @click="onClose">ยกเลิก</Button>
         <Button @click="onSaveDraft"> บันทึกแบบร่าง </Button>
-        <Button
-          type="submit"
-          color="primary"
-          :disabled="!meta.valid || isLoading"
-        >
+        <Button type="submit" color="primary" :disabled="!meta.valid || isLoading">
           <span v-if="isLoading">กำลังบันทึก...</span>
           <span v-else>เผยแพร่</span>
         </Button>
@@ -92,9 +60,9 @@ const isLoading = ref(false);
 const isOpen = defineModel({ type: Boolean, ...{
   default: false
 } });
+const isEditMode = computed(() => !!props.item?.id);
 const drawerTitle = computed(() => {
-  const hasTitle = props.item?.title?.trim();
-  return hasTitle ? "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E1A\u0E25\u0E47\u0E2D\u0E01" : "\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E1A\u0E25\u0E47\u0E2D\u0E01";
+  return isEditMode.value ? "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E1A\u0E25\u0E47\u0E2D\u0E01" : "\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E1A\u0E25\u0E47\u0E2D\u0E01";
 });
 watch(isOpen, (newVal) => {
   if (newVal) {
@@ -175,13 +143,11 @@ const onSubmit = async () => {
     let coverImageUrl = "";
     if (form.value.coverImage && form.value.coverImage.length > 0) {
       const fileItem = form.value.coverImage[0];
-      if (fileItem && fileItem.file) {
-        console.log("File found:", fileItem.file);
-        console.log("File name:", fileItem.file.name);
+      if (fileItem?.file) {
         coverImageUrl = await uploadImage(fileItem.file);
+      } else if (fileItem?.url) {
+        coverImageUrl = fileItem.url;
       }
-    } else {
-      console.log("No cover image selected");
     }
     const payload = {
       title: form.value.title,
@@ -189,27 +155,24 @@ const onSubmit = async () => {
       tags: form.value.tags.map((t) => t.name || t),
       cover_image_url: coverImageUrl
     };
-    console.log("Submitting blog payload:", payload);
-    const res = await api("/profiles/me/blog", {
-      method: "POST",
-      body: payload
-    });
-    if (res.code === "SUCCESS_CREATED") {
-      $toast.success("\u0E2A\u0E23\u0E49\u0E32\u0E07\u0E1A\u0E17\u0E04\u0E27\u0E32\u0E21\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08");
+    const res = await api(
+      isEditMode.value ? `/blogs/${form.value.id}` : "/profiles/me/blog",
+      {
+        method: isEditMode.value ? "PUT" : "POST",
+        body: payload
+      }
+    );
+    const isSuccess = isEditMode.value ? res.code === "SUCCESS_OK" : res.code === "SUCCESS_CREATED";
+    if (isSuccess) {
+      $toast.success(isEditMode.value ? "\u0E2D\u0E31\u0E1B\u0E40\u0E14\u0E15\u0E1A\u0E17\u0E04\u0E27\u0E32\u0E21\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08" : "\u0E2A\u0E23\u0E49\u0E32\u0E07\u0E1A\u0E17\u0E04\u0E27\u0E32\u0E21\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08");
       emit("submit", form.value);
-      emit("success", res.data || {
-        id: `temp-${Date.now()}`,
-        created_at: (/* @__PURE__ */ new Date()).toISOString(),
-        title: form.value.title,
-        content: form.value.content,
-        cover_image_url: coverImageUrl
-      });
+      emit("success", res.data);
       isOpen.value = false;
     } else {
-      throw new Error(res.message || "Failed to create blog");
+      throw new Error(res.message || "\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14");
     }
   } catch (error) {
-    $toast.error(error.message || "\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14\u0E43\u0E19\u0E01\u0E32\u0E23\u0E2A\u0E23\u0E49\u0E32\u0E07\u0E1A\u0E17\u0E04\u0E27\u0E32\u0E21");
+    $toast.error(error.message || "\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14\u0E43\u0E19\u0E01\u0E32\u0E23\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01\u0E1A\u0E17\u0E04\u0E27\u0E32\u0E21");
     console.error("Submit error:", error);
   } finally {
     isLoading.value = false;

package/dist/runtime/components/drawer/drawer-post-blog.vue.d.ts

@@ -1,4 +1,5 @@
 export interface DrawerPostBlogItem {
+    id?: string;
     title: string;
     content: object[];
     tags: any[];

package/dist/runtime/components/input/input-autocomplete.d.vue.ts

@@ -50,8 +50,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     description: string;
     options: AutocompleteOption[] | string[] | number[];
-    limit: number;
     placeholder: string;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

package/dist/runtime/components/input/input-autocomplete.vue.d.ts

@@ -50,8 +50,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     description: string;
     options: AutocompleteOption[] | string[] | number[];
-    limit: number;
     placeholder: string;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -114,7 +114,7 @@ const listSocial = [
   },
   {
     name: "WhatsApp",
-    icon: "Whatsapp",
+    icon: "WhatsApp",
     example: "https://wa.me/1234567890",
     regex: /(?:https?:\/\/)?(?:wa\.me|api\.whatsapp\.com)\/.+/i
   },

package/dist/runtime/components/input/input-tag.d.vue.ts

@@ -26,8 +26,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     name: string;
     state: "user" | "admin";
-    limit: number;
     placeholder: string;
+    limit: number;
     ignore: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/input/input-tag.vue

@@ -48,7 +48,7 @@
       @openAutoFocus.prevent
       @interactOutside="handleInteractOutside"
     >
-      <ShadCommand>
+      <ShadCommand :filter="() => 1">
         <ShadCommandInput
           v-if="props.state === 'admin'"
           placeholder="ค้นหาแท็ก"

package/dist/runtime/components/input/input-tag.vue.d.ts

@@ -26,8 +26,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     name: string;
     state: "user" | "admin";
-    limit: number;
     placeholder: string;
+    limit: number;
     ignore: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/modal/modal-phone-OTP.vue

@@ -1,10 +1,5 @@
 <template>
-  <Modal
-    title="ป้อนรหัสรักษาความปลอดภัย (OTP)"
-    @close="emit('close')"
-    @submit="onVerifyOTP"
-    v-model="isOpen"
-  >
+  <Modal title="ป้อนรหัสรักษาความปลอดภัย (OTP)" @close="emit('close')" @submit="onVerifyOTP" v-model="isOpen">
     <div class="space-y-[16px]">
       <div class="text-center font-body-large">
         <div>
@@ -15,26 +10,23 @@
       </div>
 
       <div class="flex justify-center">
-        <InputOTP
-          name="otp"
-          columnGap="auto"
-          v-model="valueOTP"
-          :error="otpError"
-        />
+        <InputOTP name="otp" columnGap="auto" v-model="valueOTP" :error="otpError" />
       </div>
 
       <div class="text-center font-body-large">
-        กรุณารอ <span class="text-primary">04.59</span> นาที
-        จะส่งรหัสยืนยันอีกครั้ง
+        <template v-if="countdown !== '00:00'">
+          กรุณารอ <span class="text-primary">{{ countdown }}</span> นาที
+          จะส่งรหัสยืนยันอีกครั้ง
+        </template>
+        <template v-else>
+          ไม่ได้รับรหัส?
+          <Button variant="link" color="primary" @click="onResend">ส่งรหัสอีกครั้ง</Button>
+        </template>
       </div>
     </div>
+
     <template #footer="{ meta }">
-      <Button
-        type="submit"
-        color="primary"
-        :disabled="!meta.valid"
-        class="w-full"
-      >
+      <Button type="submit" color="primary" :disabled="!meta.valid" class="w-full">
         {{ props.confirmedText }}
       </Button>
     </template>
@@ -43,6 +35,7 @@
 
 <script setup>
 import { ref, watch } from "vue";
+import { useCountDown } from "../../composables/useCountDown";
 const emit = defineEmits(["complete", "close"]);
 const props = defineProps({
   phoneLabel: { type: String, required: false, default: "" },
@@ -55,13 +48,21 @@ const props = defineProps({
   disabled: { type: Boolean, required: false },
   placeholder: { type: String, required: false }
 });
-const isOpen = defineModel({ type: Boolean, ...{
-  default: false
-} });
+const isOpen = defineModel({ type: Boolean, ...{ default: false } });
 const textRef = ref("");
 const valueOTP = ref("");
 const otpError = ref("");
-const loadingModal = ref(false);
+const { CountdownTime } = useCountDown();
+const expireAt = ref("");
+const countdown = CountdownTime(expireAt);
+const resetCountdown = () => {
+  expireAt.value = new Date(Date.now() + 5 * 60 * 1e3).toISOString();
+};
+const onResend = () => {
+  valueOTP.value = "";
+  otpError.value = "";
+  resetCountdown();
+};
 const onVerifyOTP = () => {
   if (valueOTP.value === "123456") {
     otpError.value = "";
@@ -75,5 +76,6 @@ watch(isOpen, (value) => {
   textRef.value = "";
   valueOTP.value = "";
   otpError.value = "";
+  if (value) resetCountdown();
 });
 </script>

package/dist/runtime/components/modal/modal-profile-edit.vue

@@ -1,156 +1,69 @@
 <template>
-  <Modal
-    width="468"
-    title="โปรไฟล์"
-    title-position="center"
-    @close="onClose"
-    v-model="modelValue"
-  >
+  <Modal class="w-[425px]" title="โปรไฟล์" @close="onClose" v-model="modelValue">
     <template #header>
-      <div v-if="step !== 'menu'">
+      <div v-if="step !== 'menu'" class="flex flex-col gap-[8px]">
         <div class="flex gap-[8px] items-center w-full">
           <Button variant="text" @click="step = 'menu'">
             <Icon name="lucide:chevron-left" :size="24" />
           </Button>
           <div class="font-title-medium-prominent">
             <div v-if="step === 'profile-name'">แก้ไขชื่อโปรไฟล์</div>
-            <div v-if="step === 'premium-id'">พรีเมียม ID</div>
             <div v-if="step === 'category'">หมวดหมู่</div>
           </div>
         </div>
+        <div v-if="step === 'profile-name'" class="font-body-large">
+          หากคุณเปลี่ยนชื่อ คุณจะไม่สามารถเปลี่ยนชื่อได้อีกเป็นเวลา 60 วัน
+          <Button variant="link" color="primary" @click="goToHelpCenter">เรียนรู้เพิ่มเติม</Button>
+        </div>
+        <div v-if="step === 'category'" class="font-body-large">
+          เลือกหมวดหมู่ที่สอดคล้องกับโปรไฟล์
+        </div>
+      </div>
+      <div v-if="step === 'menu'" class="flex flex-col gap-[8px]">
+        <div class="font-title-medium-prominent">โปรไฟล์</div>
+        <div class="font-body-large">
+          จัดการชื่อโปรไฟล์และชื่อผู้ใช้ของคุณสำหรับการแสดงผลในระบบ และการเข้าถึงโปรไฟล์
+          <Button variant="link" color="primary" @click="goToHelpCenter">เรียนรู้เพิ่มเติม</Button>
+        </div>
       </div>
     </template>
 
     <div v-if="step === 'menu'" class="flex flex-col gap-[16px]">
-      <div class="font-body-large">
-        จัดการชื่อโปรไฟล์และชื่อผู้ใช้ของคุณสำหรับการแสดงผลในระบบ
-        และการเข้าถึงโปรไฟล์
-        <span class="text-primary cursor-pointer"> เรียนรู้เพิ่มเติม</span>
-      </div>
-      <div class="flex flex-col border border-mercury rounded-[8px]">
-        <div
-          v-for="(menu, i) in listMenu"
-          :key="menu.label"
-          @click="handleMenuClick(menu)"
-          :class="[
-  'flex p-[16px] justify-between items-center',
-  isMenuClickable(menu) ? 'cursor-pointer hover:bg-smoke' : '',
-  i < listMenu.length - 1 ? 'border-b border-mercury' : isMenuClickable(menu) ? 'hover:rounded-b-[8px]' : ''
-]"
-        >
-          <div class="flex flex-col min-w-[378px]">
-            <div class="font-body-large-prominent">{{ menu.label }}</div>
-            <div class="font-body-large text-gray">{{ menu.value || "-" }}</div>
+      <div class="flex flex-col gap-[4px]">
+        <template v-for="(menu, i) in listMenu" :key="menu.label">
+          <div @click="handleMenuClick(menu)" :class="[
+  'flex justify-between items-center',
+  isMenuClickable(menu) ? 'cursor-pointer ' : ''
+]">
+            <div class="flex flex-col w-full">
+              <div class="font-body-large-prominent">{{ menu.label }}</div>
+              <div class="font-body-large text-gray">{{ menu.value || "-" }}</div>
+            </div>
+            <Icon v-if="isMenuClickable(menu)" name="lucide:chevron-right" :size="24" class="text-black" />
           </div>
-          <Button
-            v-if="isMenuClickable(menu)"
-            variant="text"
-            size="small"
-            color="black"
-            icon-size="18"
-            prepend-icon="lucide:chevron-right"
-          />
-        </div>
+          <Divider v-if="i < listMenu.length - 1" />
+        </template>
       </div>
     </div>
 
     <div v-else class="flex flex-col gap-[16px]">
       <template v-if="step === 'profile-name'">
-        <div class="flex flex-col gap-[16px]">
-          <div class="font-body-large">
-            หากคุณเปลี่ยนชื่อ คุณจะไม่สามารถเปลี่ยนชื่อได้อีกเป็นเวลา 60 วัน
-            <Button
-              variant="text"
-              color="primary"
-              disabled-padding
-              @click="goToHelpCenter"
-            >
-              เรียนรู้เพิ่มเติม
-            </Button>
-          </div>
-        </div>
-        <Form
-          v-slot="{ meta }"
-          class="flex flex-col gap-[16px]"
-          @submit="saveProfileName"
-        >
-          <InputTextField
-            name="profileName"
-            label="ชื่อโปรไฟล์"
-            :placeholder="listMenu[0]?.value || '-'"
-            full-width
-            validate-on-input
-            :rules="ruleProfileName"
-            v-model="profileName"
-          />
-          <Button
-            type="submit"
-            color="primary"
-            full-width
-            :disabled="!meta.valid || isLoading"
-          >
+        <Form v-slot="{ meta }" class="flex flex-col gap-[16px]" @submit="saveProfileName">
+          <InputTextField name="profileName" label="ชื่อโปรไฟล์" :placeholder="listMenu[0]?.value || '-'" full-width
+            validate-on-input :rules="ruleProfileName" v-model="profileName" />
+          <Button type="submit" color="primary" full-width :disabled="!meta.valid || isLoading">
             <span v-if="isLoading">กำลังบันทึก...</span>
             <span v-else>บันทึก</span>
           </Button>
         </Form>
       </template>
 
-      <template v-if="step === 'premium-id'">
-        <div class="flex flex-col gap-[16px]">
-          <div class="font-body-large">
-            ดูรายละเอียดเกี่ยวกับการใช้พรีเมียม ID และซื้อพรีเมียม ID ได้ที่นี่
 
-            <Button
-              variant="text"
-              color="primary"
-              disabled-padding
-              @click="goToDetailPremiumID"
-            >
-              ดูรายละเอียดเกี่ยวกับพรีเมียม ID
-            </Button>
-          </div>
-          <div class="flex gap-[40px]">
-            <div class="font-body-large w-[140px]">พรีเมียม ID</div>
-            <div class="font-body-large text-gray">ไม่มี</div>
-          </div>
-          <div class="flex gap-[40px]">
-            <div class="font-body-large w-[140px]">วันชำระเงินครั้งต่อไป</div>
-            <div class="font-body-large text-gray">ไม่มี</div>
-          </div>
-          <Divider :height="0" />
-          <div class="font-body-large-prominent">
-            ค่าบริการรายปีของพรีเมียม ID
-          </div>
-          <div class="flex gap-[40px]">
-            <div class="font-body-large w-[140px]">ราคา (ไม่รวมภาษี)</div>
-            <div class="font-body-large text-gray">฿444</div>
-          </div>
-          <Divider :height="0" />
-          <InputTextField
-            v-model="namePremiumID"
-            label="ซื้อพรีเมียม ID"
-            show-counter
-            :limit="18"
-            prepend-icon="lucide:at-sign"
-          />
-          <Button
-            color="primary"
-            :disabled="!namePremiumID || namePremiumID.length > 18"
-            >ซื้อพรีเมียม ID</Button
-          >
-        </div>
-      </template>
 
       <template v-if="step === 'category'">
         <div class="flex flex-col gap-[16px]">
-          <div class="font-body-large">เลือกหมวดหมู่ที่สอดคล้องกับโปรไฟล์</div>
-          <InputAutocomplete
-            v-model="profileCategory"
-            :options="profileCategoryItems"
-            name="profileCategory"
-            placeholder="ค้นหาหรือเลือกหมวดหมู่ที่เกี่ยวข้อง"
-            label="หมวดหมู่"
-          />
+          <InputAutocomplete v-model="profileCategory" :options="profileCategoryItems" name="profileCategory"
+            placeholder="ค้นหาหรือเลือกหมวดหมู่ที่เกี่ยวข้อง" label="หมวดหมู่" />
           <Button color="primary" :disabled="!profileCategory">บันทึก</Button>
         </div>
       </template>
@@ -179,10 +92,6 @@ const modelValue = defineModel({ type: Boolean, ...{
 } });
 const step = ref("menu");
 const profileName = ref();
-const premiumId = ref();
-const category = ref();
-const namePremiumID = ref();
-const isOpenDropdown = ref(false);
 const profileCategory = ref();
 const profileCategoryItems = ref([]);
 const isLoading = ref(false);
@@ -277,9 +186,6 @@ const saveProfileName = async (values, { setErrors }) => {
 const goToHelpCenter = () => {
   console.log("go to help center");
 };
-const goToDetailPremiumID = () => {
-  console.log("go to detail premium id");
-};
 const getProfile = () => {
   const commonMenus = [
     {
@@ -299,15 +205,6 @@ const getProfile = () => {
       }
     }
   ];
-  const businessMenus = [
-    {
-      label: "\u0E1E\u0E23\u0E35\u0E40\u0E21\u0E35\u0E22\u0E21 ID",
-      value: props.profileDetail?.premiumId || "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E01\u0E33\u0E2B\u0E19\u0E14",
-      action: () => {
-        step.value = "premium-id";
-      }
-    }
-  ];
   const profileMenus = [
     {
       label: "\u0E2B\u0E21\u0E27\u0E14\u0E2B\u0E21\u0E39\u0E48",
@@ -317,15 +214,10 @@ const getProfile = () => {
       }
     }
   ];
-  if (props.state === "business") {
-    listMenu.value = [...commonMenus, ...businessMenus, ...profileMenus];
-  } else {
-    listMenu.value = [...commonMenus, ...profileMenus];
-  }
+  listMenu.value = [...commonMenus, ...profileMenus];
 };
 const reset = () => {
   profileName.value = "";
-  premiumId.value = "";
 };
 const onClose = () => {
   reset();

package/dist/runtime/components/modal/modal-share.vue

@@ -1,25 +1,21 @@
 <template>
-  <Modal title="แชร์" width="396" v-model="isOpen" :loading="true">
-    <div class="flex justify-between">
-      <div
-        v-for="(share, i) of listShares"
-        :key="i"
-        @click="share.action()"
-        class="flex flex-col gap-[4px] items-center cursor-pointer w-[73px]"
-      >
-        <Icon :name="share.icon" size="40" />
-        <div class="font-body-large text-gray">
-          {{ share.label }}
+  <Modal title="แชร์" class="w-[426px]" v-model="isOpen" :loading="false">
+    <div class="flex flex-col gap-[16px]">
+      <Divider />
+      <div class="flex justify-between">
+        <div v-for="(share, i) of listShares" :key="i" @click="share.action()"
+          class="flex flex-col gap-[4px] items-center cursor-pointer w-[73px]">
+          <Icon :name="share.icon" size="40" />
+          <div class="font-body-large text-gray">
+            {{ share.label }}
+          </div>
+        </div>
+        <div class="flex flex-col gap-[4px] items-center cursor-pointer w-[73px]" @click="onCopyLink">
+          <div class="w-[40px] h-[40px] rounded-full bg-dark text-white flex items-center justify-center">
+            <Icon name="fa6-solid:link" size="20" />
+          </div>
+          <div class="font-body-large text-gray text-nowrap">คัดลอกลิงค์</div>
         </div>
-      </div>
-      <div
-        class="flex flex-col gap-[4px] items-center cursor-pointer w-[73px]"
-        @click="onCopyLink"
-      >
-        <ShadAvatar size="40">
-          <Icon name="fa6-solid:link" size="40" />
-        </ShadAvatar>
-        <div class="font-body-large text-gray text-nowrap">คัดลอกลิงค์</div>
       </div>
     </div>
   </Modal>

package/dist/runtime/components/ui/alert-dialog/AlertDialogContent.d.vue.ts

@@ -8,19 +8,19 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_19) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    openAutoFocus: (event: Event) => any;
+    closeAutoFocus: (event: Event) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
     focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
     interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
-    openAutoFocus: (event: Event) => any;
-    closeAutoFocus: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpenAutoFocus?: ((event: Event) => any) | undefined;
+    onCloseAutoFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
     onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
-    onOpenAutoFocus?: ((event: Event) => any) | undefined;
-    onCloseAutoFocus?: ((event: Event) => 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;

package/dist/runtime/components/ui/alert-dialog/AlertDialogContent.vue.d.ts

@@ -8,19 +8,19 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_19) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    openAutoFocus: (event: Event) => any;
+    closeAutoFocus: (event: Event) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
     focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
     interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
-    openAutoFocus: (event: Event) => any;
-    closeAutoFocus: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpenAutoFocus?: ((event: Event) => any) | undefined;
+    onCloseAutoFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
     onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
-    onOpenAutoFocus?: ((event: Event) => any) | undefined;
-    onCloseAutoFocus?: ((event: Event) => 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;

package/dist/runtime/components/ui/button/index.js

@@ -8,7 +8,7 @@ export const buttonVariants = cva(
         default: "shadow-sm",
         outline: "shadow-sm",
         ghost: "",
-        link: "underline-offset-4 hover:underline",
+        link: "underline-offset-4 hover:underline p-0 h-auto",
         text: "",
         icon: "has-[>svg]:px-0"
       },
@@ -129,6 +129,27 @@ export const buttonVariants = cva(
         variant: "text",
         color: "destructive",
         class: "text-destructive hover:opacity-80"
+      },
+      // link variant - inline link style, primary blue by default, no padding
+      {
+        variant: "link",
+        color: "default",
+        class: "text-foreground hover:opacity-80"
+      },
+      {
+        variant: "link",
+        color: "primary",
+        class: "text-primary hover:opacity-80"
+      },
+      {
+        variant: "link",
+        color: "secondary",
+        class: "text-secondary hover:opacity-80"
+      },
+      {
+        variant: "link",
+        color: "destructive",
+        class: "text-destructive hover:opacity-80"
       }
     ],
     defaultVariants: {

package/dist/runtime/components/ui/dialog/DialogContent.d.vue.ts

@@ -14,21 +14,21 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     submit: (event: Event) => any;
     close: (event: Event) => any;
+    openAutoFocus: (event: Event) => any;
+    closeAutoFocus: (event: Event) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
     focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
     interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
-    openAutoFocus: (event: Event) => any;
-    closeAutoFocus: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSubmit?: ((event: Event) => any) | undefined;
     onClose?: ((event: Event) => any) | undefined;
+    onOpenAutoFocus?: ((event: Event) => any) | undefined;
+    onCloseAutoFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
     onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
-    onOpenAutoFocus?: ((event: Event) => any) | undefined;
-    onCloseAutoFocus?: ((event: Event) => any) | undefined;
 }>, {
     disabledCloseBtn: boolean;
     noPadding: boolean;

package/dist/runtime/components/ui/dialog/DialogContent.vue.d.ts

@@ -14,21 +14,21 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     submit: (event: Event) => any;
     close: (event: Event) => any;
+    openAutoFocus: (event: Event) => any;
+    closeAutoFocus: (event: Event) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
     focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
     interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
-    openAutoFocus: (event: Event) => any;
-    closeAutoFocus: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSubmit?: ((event: Event) => any) | undefined;
     onClose?: ((event: Event) => any) | undefined;
+    onOpenAutoFocus?: ((event: Event) => any) | undefined;
+    onCloseAutoFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
     onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
-    onOpenAutoFocus?: ((event: Event) => any) | undefined;
-    onCloseAutoFocus?: ((event: Event) => any) | undefined;
 }>, {
     disabledCloseBtn: boolean;
     noPadding: boolean;

package/dist/runtime/components/ui/dialog/DialogScrollContent.d.vue.ts

@@ -8,19 +8,19 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_22) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    openAutoFocus: (event: Event) => any;
+    closeAutoFocus: (event: Event) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
     focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
     interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
-    openAutoFocus: (event: Event) => any;
-    closeAutoFocus: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpenAutoFocus?: ((event: Event) => any) | undefined;
+    onCloseAutoFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
     onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
-    onOpenAutoFocus?: ((event: Event) => any) | undefined;
-    onCloseAutoFocus?: ((event: Event) => 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;

package/dist/runtime/components/ui/dialog/DialogScrollContent.vue.d.ts

@@ -8,19 +8,19 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_22) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    openAutoFocus: (event: Event) => any;
+    closeAutoFocus: (event: Event) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
     focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
     interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
-    openAutoFocus: (event: Event) => any;
-    closeAutoFocus: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpenAutoFocus?: ((event: Event) => any) | undefined;
+    onCloseAutoFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
     onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
-    onOpenAutoFocus?: ((event: Event) => any) | undefined;
-    onCloseAutoFocus?: ((event: Event) => 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;

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuContent.d.vue.ts

@@ -9,17 +9,17 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_16) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ExtendedDropdownMenuContentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    closeAutoFocus: (event: Event) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
     focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
     interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
-    closeAutoFocus: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<ExtendedDropdownMenuContentProps> & Readonly<{
+    onCloseAutoFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
     onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
-    onCloseAutoFocus?: ((event: Event) => any) | undefined;
 }>, {
     sideOffset: number;
     preventOpenAutoFocus: boolean;

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuContent.vue.d.ts

@@ -9,17 +9,17 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_16) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ExtendedDropdownMenuContentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    closeAutoFocus: (event: Event) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
     focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
     interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
-    closeAutoFocus: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<ExtendedDropdownMenuContentProps> & Readonly<{
+    onCloseAutoFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
     onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
-    onCloseAutoFocus?: ((event: Event) => any) | undefined;
 }>, {
     sideOffset: number;
     preventOpenAutoFocus: boolean;

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuSubContent.d.vue.ts

@@ -8,20 +8,20 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    openAutoFocus: (event: Event) => any;
+    closeAutoFocus: (event: Event) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
     focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
     interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
-    openAutoFocus: (event: Event) => any;
-    closeAutoFocus: (event: Event) => any;
     entryFocus: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpenAutoFocus?: ((event: Event) => any) | undefined;
+    onCloseAutoFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
     onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
-    onOpenAutoFocus?: ((event: Event) => any) | undefined;
-    onCloseAutoFocus?: ((event: Event) => any) | undefined;
     onEntryFocus?: ((event: Event) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuSubContent.vue.d.ts

@@ -8,20 +8,20 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    openAutoFocus: (event: Event) => any;
+    closeAutoFocus: (event: Event) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
     focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
     interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
-    openAutoFocus: (event: Event) => any;
-    closeAutoFocus: (event: Event) => any;
     entryFocus: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpenAutoFocus?: ((event: Event) => any) | undefined;
+    onCloseAutoFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
     onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
-    onOpenAutoFocus?: ((event: Event) => any) | undefined;
-    onCloseAutoFocus?: ((event: Event) => any) | undefined;
     onEntryFocus?: ((event: Event) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/ui/popover/PopoverContent.d.vue.ts

@@ -8,19 +8,19 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    openAutoFocus: (event: Event) => any;
+    closeAutoFocus: (event: Event) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
     focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
     interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
-    openAutoFocus: (event: Event) => any;
-    closeAutoFocus: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpenAutoFocus?: ((event: Event) => any) | undefined;
+    onCloseAutoFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
     onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
-    onOpenAutoFocus?: ((event: Event) => any) | undefined;
-    onCloseAutoFocus?: ((event: Event) => any) | undefined;
 }>, {
     align: "center" | "start" | "end";
     sideOffset: number;

package/dist/runtime/components/ui/popover/PopoverContent.vue.d.ts

@@ -8,19 +8,19 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    openAutoFocus: (event: Event) => any;
+    closeAutoFocus: (event: Event) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
     focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
     interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
-    openAutoFocus: (event: Event) => any;
-    closeAutoFocus: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpenAutoFocus?: ((event: Event) => any) | undefined;
+    onCloseAutoFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
     onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
-    onOpenAutoFocus?: ((event: Event) => any) | undefined;
-    onCloseAutoFocus?: ((event: Event) => any) | undefined;
 }>, {
     align: "center" | "start" | "end";
     sideOffset: number;

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

@@ -8,13 +8,13 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_25) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    closeAutoFocus: (event: Event) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
-    closeAutoFocus: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCloseAutoFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
-    onCloseAutoFocus?: ((event: Event) => any) | undefined;
 }>, {
     position: "item-aligned" | "popper";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -8,13 +8,13 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_25) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    closeAutoFocus: (event: Event) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
-    closeAutoFocus: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCloseAutoFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
-    onCloseAutoFocus?: ((event: Event) => any) | undefined;
 }>, {
     position: "item-aligned" | "popper";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/ui/sheet/SheetContent.d.vue.ts

@@ -13,21 +13,21 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<SheetContentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     submit: (event: Event) => any;
     close: () => any;
+    openAutoFocus: (event: Event) => any;
+    closeAutoFocus: (event: Event) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
     focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
     interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
-    openAutoFocus: (event: Event) => any;
-    closeAutoFocus: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<SheetContentProps> & Readonly<{
     onSubmit?: ((event: Event) => any) | undefined;
     onClose?: (() => any) | undefined;
+    onOpenAutoFocus?: ((event: Event) => any) | undefined;
+    onCloseAutoFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
     onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
-    onOpenAutoFocus?: ((event: Event) => any) | undefined;
-    onCloseAutoFocus?: ((event: Event) => any) | undefined;
 }>, {
     side: "top" | "right" | "bottom" | "left";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/ui/sheet/SheetContent.vue.d.ts

@@ -13,21 +13,21 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<SheetContentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     submit: (event: Event) => any;
     close: () => any;
+    openAutoFocus: (event: Event) => any;
+    closeAutoFocus: (event: Event) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
     focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
     interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
-    openAutoFocus: (event: Event) => any;
-    closeAutoFocus: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<SheetContentProps> & Readonly<{
     onSubmit?: ((event: Event) => any) | undefined;
     onClose?: (() => any) | undefined;
+    onOpenAutoFocus?: ((event: Event) => any) | undefined;
+    onCloseAutoFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
     onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
-    onOpenAutoFocus?: ((event: Event) => any) | undefined;
-    onCloseAutoFocus?: ((event: Event) => any) | undefined;
 }>, {
     side: "top" | "right" | "bottom" | "left";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pukaad-ui-lib",
-  "version": "1.231.0",
+  "version": "1.233.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",