pukaad-ui-lib 1.453.0 → 1.454.0

package/dist/module.json

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

package/dist/runtime/components/card/card-blog.d.vue.ts

@@ -38,8 +38,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     "onBlog-updated"?: ((id: string, data: any) => any) | undefined;
     "onBlog-deleted"?: ((id: string) => any) | undefined;
 }>, {
-    isMyProfile: boolean;
     disabledMenu: boolean;
+    isMyProfile: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/card/card-blog.vue.d.ts

@@ -38,8 +38,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     "onBlog-updated"?: ((id: string, data: any) => any) | undefined;
     "onBlog-deleted"?: ((id: string) => any) | undefined;
 }>, {
-    isMyProfile: boolean;
     disabledMenu: boolean;
+    isMyProfile: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/card/card-profile/card-profile-header.d.vue.ts

@@ -7,8 +7,8 @@ declare const __VLS_export: import("vue").DefineComponent<CardProfileAboutProps,
     onFollow?: ((isFollowing: boolean) => any) | undefined;
 }>, {
     type: "article" | "media" | "sale-info";
-    disabledPadding: boolean;
     preview: boolean;
+    disabledPadding: boolean;
     optionMenuButtonType: "solid" | "text";
     actionsHidden: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/card/card-profile/card-profile-header.vue.d.ts

@@ -7,8 +7,8 @@ declare const __VLS_export: import("vue").DefineComponent<CardProfileAboutProps,
     onFollow?: ((isFollowing: boolean) => any) | undefined;
 }>, {
     type: "article" | "media" | "sale-info";
-    disabledPadding: boolean;
     preview: boolean;
+    disabledPadding: boolean;
     optionMenuButtonType: "solid" | "text";
     actionsHidden: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/card/card-reaction.d.vue.ts

@@ -25,6 +25,7 @@ type __VLS_Props = {
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     disabled: boolean;
     id: string;
+    state: string;
     itemCount: Count;
     itemActive: Reacted;
     padding: string | number;
@@ -32,7 +33,6 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     disabledDividerTop: boolean;
     disabledDividerBottom: boolean;
     iconSize: number | string;
-    state: string;
     loginPath: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/card/card-reaction.vue.d.ts

@@ -25,6 +25,7 @@ type __VLS_Props = {
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     disabled: boolean;
     id: string;
+    state: string;
     itemCount: Count;
     itemActive: Reacted;
     padding: string | number;
@@ -32,7 +33,6 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     disabledDividerTop: boolean;
     disabledDividerBottom: boolean;
     iconSize: number | string;
-    state: string;
     loginPath: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/chat/chat-conversation-item.d.vue.ts

@@ -26,13 +26,13 @@ declare const __VLS_export: import("vue").DefineComponent<ChatConversationItemPr
     name: string;
     avatar: string | null;
     muted: boolean;
-    disabledMenu: boolean;
     preview: string;
     to: string;
     active: boolean;
     typing: boolean;
     unreadCount: number;
     pinned: boolean;
+    disabledMenu: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/chat/chat-conversation-item.vue.d.ts

@@ -26,13 +26,13 @@ declare const __VLS_export: import("vue").DefineComponent<ChatConversationItemPr
     name: string;
     avatar: string | null;
     muted: boolean;
-    disabledMenu: boolean;
     preview: string;
     to: string;
     active: boolean;
     typing: boolean;
     unreadCount: number;
     pinned: boolean;
+    disabledMenu: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/display/display-video.d.vue.ts

@@ -81,16 +81,16 @@ declare const __VLS_base: import("vue").DefineComponent<DisplayVideoProps, {
     toggle: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (payload: DisplayVideoAction) => any;
-    fullscreen: (payload: DisplayVideoAction) => any;
-    "play-click": (payload: DisplayVideoAction) => any;
     prev: (payload: DisplayVideoAction) => any;
     next: (payload: DisplayVideoAction) => any;
+    fullscreen: (payload: DisplayVideoAction) => any;
+    "play-click": (payload: DisplayVideoAction) => any;
 }, string, import("vue").PublicProps, Readonly<DisplayVideoProps> & Readonly<{
     onClose?: ((payload: DisplayVideoAction) => any) | undefined;
-    onFullscreen?: ((payload: DisplayVideoAction) => any) | undefined;
-    "onPlay-click"?: ((payload: DisplayVideoAction) => any) | undefined;
     onPrev?: ((payload: DisplayVideoAction) => any) | undefined;
     onNext?: ((payload: DisplayVideoAction) => any) | undefined;
+    onFullscreen?: ((payload: DisplayVideoAction) => any) | undefined;
+    "onPlay-click"?: ((payload: DisplayVideoAction) => any) | undefined;
 }>, {
     src: string;
     fullWidth: boolean;
@@ -102,9 +102,9 @@ declare const __VLS_base: import("vue").DefineComponent<DisplayVideoProps, {
     loop: boolean;
     controls: boolean;
     preload: "none" | "metadata" | "auto";
+    playsinline: boolean;
     sources: DisplayVideoSource[];
     tracks: DisplayVideoTrack[];
-    playsinline: boolean;
     disablePictureInPicture: boolean;
     disableRemotePlayback: boolean;
     volume: number;

package/dist/runtime/components/display/display-video.vue.d.ts

@@ -81,16 +81,16 @@ declare const __VLS_base: import("vue").DefineComponent<DisplayVideoProps, {
     toggle: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (payload: DisplayVideoAction) => any;
-    fullscreen: (payload: DisplayVideoAction) => any;
-    "play-click": (payload: DisplayVideoAction) => any;
     prev: (payload: DisplayVideoAction) => any;
     next: (payload: DisplayVideoAction) => any;
+    fullscreen: (payload: DisplayVideoAction) => any;
+    "play-click": (payload: DisplayVideoAction) => any;
 }, string, import("vue").PublicProps, Readonly<DisplayVideoProps> & Readonly<{
     onClose?: ((payload: DisplayVideoAction) => any) | undefined;
-    onFullscreen?: ((payload: DisplayVideoAction) => any) | undefined;
-    "onPlay-click"?: ((payload: DisplayVideoAction) => any) | undefined;
     onPrev?: ((payload: DisplayVideoAction) => any) | undefined;
     onNext?: ((payload: DisplayVideoAction) => any) | undefined;
+    onFullscreen?: ((payload: DisplayVideoAction) => any) | undefined;
+    "onPlay-click"?: ((payload: DisplayVideoAction) => any) | undefined;
 }>, {
     src: string;
     fullWidth: boolean;
@@ -102,9 +102,9 @@ declare const __VLS_base: import("vue").DefineComponent<DisplayVideoProps, {
     loop: boolean;
     controls: boolean;
     preload: "none" | "metadata" | "auto";
+    playsinline: boolean;
     sources: DisplayVideoSource[];
     tracks: DisplayVideoTrack[];
-    playsinline: boolean;
     disablePictureInPicture: boolean;
     disableRemotePlayback: boolean;
     volume: number;

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

@@ -70,9 +70,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     required: boolean;
     description: string;
     options: AutocompleteOption[] | string[] | number[];
-    limit: number;
     labelKey: string;
     placeholder: string;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -70,9 +70,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     required: boolean;
     description: string;
     options: AutocompleteOption[] | string[] | number[];
-    limit: number;
     labelKey: string;
     placeholder: string;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -60,8 +60,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     pageSize: number;
     name: string;
-    limit: number;
     labelKey: string;
+    limit: number;
     valueKey: string;
     multiple: boolean;
     placeholderSearch: string;

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

@@ -60,8 +60,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     pageSize: number;
     name: string;
-    limit: number;
     labelKey: string;
+    limit: number;
     valueKey: string;
     multiple: boolean;
     placeholderSearch: string;

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

@@ -46,8 +46,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     loading: boolean;
     disabled: boolean;
-    placeholder: string;
     cancelText: string;
+    placeholder: string;
     autofocus: boolean;
     disabledAvatar: boolean;
     submitText: string;

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

@@ -46,8 +46,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     loading: boolean;
     disabled: boolean;
-    placeholder: string;
     cancelText: string;
+    placeholder: string;
     autofocus: boolean;
     disabledAvatar: boolean;
     submitText: string;

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

@@ -37,8 +37,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     fullWidth: boolean;
     fullHeight: boolean;
     limit: number;
-    accept: string;
     disabledErrorMessage: boolean;
+    accept: string;
     labelIcon: string;
     disabledDrop: boolean;
     column: boolean;

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

@@ -37,8 +37,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     fullWidth: boolean;
     fullHeight: boolean;
     limit: number;
-    accept: string;
     disabledErrorMessage: boolean;
+    accept: string;
     labelIcon: string;
     disabledDrop: boolean;
     column: boolean;

package/dist/runtime/components/input/input-localized-name.d.vue.ts

@@ -12,8 +12,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     name: string;
     modelValue: LocalizedNameItem[];
     options: InputSelectItem[];
-    limit: number;
     placeholder: string;
+    limit: number;
     removable: boolean;
     showCounter: boolean;
     addLabel: string;

package/dist/runtime/components/input/input-localized-name.vue.d.ts

@@ -12,8 +12,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     name: string;
     modelValue: LocalizedNameItem[];
     options: InputSelectItem[];
-    limit: number;
     placeholder: string;
+    limit: number;
     removable: boolean;
     showCounter: boolean;
     addLabel: string;

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

@@ -20,9 +20,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     description: string;
-    limit: number;
     labelKey: string;
     placeholder: string;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -20,9 +20,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     description: string;
-    limit: number;
     labelKey: string;
     placeholder: string;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

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

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

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

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

@@ -46,8 +46,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     resize: "none" | "both" | "horizontal" | "vertical";
     fullWidth: boolean;
     fullHeight: boolean;
-    limit: number;
     rows: number;
+    limit: number;
     readonly: boolean;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;

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

@@ -46,8 +46,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     resize: "none" | "both" | "horizontal" | "vertical";
     fullWidth: boolean;
     fullHeight: boolean;
-    limit: number;
     rows: number;
+    limit: number;
     readonly: boolean;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;

package/dist/runtime/components/preview/preview-content.d.vue.ts

@@ -0,0 +1,54 @@
+import type { CardReferItem } from "#pukaad-ui/runtime/components/card/card-refer.vue";
+export type PreviewContentState = "personal" | "business";
+export interface PreviewContentData {
+    id?: string;
+    content_type?: "post_it" | "image" | "video";
+    labels?: {
+        id: string;
+        name: string;
+    }[];
+    cover_text?: string;
+    cover_color?: string;
+    video_poster_url?: string;
+    description?: string;
+    media?: {
+        media_type: string;
+        url: string;
+        description?: string;
+    }[];
+    tags?: {
+        id: string;
+        name: string;
+    }[];
+    mentions?: CardReferItem[];
+    places?: {
+        id: string;
+        name: string;
+        address?: string;
+    }[];
+    like_count?: number;
+    bookmark_count?: number;
+    share_count?: number;
+    author?: {
+        id: string;
+        name: string;
+        avatar: string | null;
+        follower_count?: number;
+        published_count?: number;
+        response_rate?: number;
+    };
+}
+type __VLS_Props = {
+    contentId: string | number;
+    /** เลือก endpoint ตามแอปที่เปิดพรีวิว */
+    state?: PreviewContentState;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    exit: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onExit?: (() => any) | undefined;
+}>, {
+    state: PreviewContentState;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/preview/preview-content.vue

@@ -0,0 +1,219 @@
+<template>
+  <!-- Figma: Preview - Video (2743:66169) — post_it / image ใช้โครงเดียวกัน -->
+  <div class="min-h-screen w-full bg-white">
+    <!-- Figma: Navbar Preview (new tab) — Property 1=Admin -->
+    <!-- ใช้ scroll ของหน้า (ไม่ใช่ scroll ใน div) เพราะ Comment โหลดหน้าถัดไปจาก window scroll -->
+    <div class="sticky top-0 z-overlay w-full bg-cloud">
+      <div class="max-w-[1280px] mx-auto flex justify-end p-[16px]">
+        <Button variant="outline" class="rounded-[6px]" @click="emit('exit')">
+          ออกจากพรีวิว
+        </Button>
+      </div>
+    </div>
+
+    <!-- Figma: เนื้อหาเริ่มห่างจากแถบ 22px (ช่องว่าง 6 + padding 16) -->
+    <div class="flex justify-center px-[16px] pt-[22px] pb-[16px]">
+      <!-- กว้าง 844 เท่าวิดีโอ — DisplayVideo ยืดตามความกว้างกล่องนี้ ปุ่มเล่นจะได้อยู่กลางวิดีโอ -->
+      <div class="w-[844px] flex flex-col gap-[16px]">
+        <Label v-if="labelItems.length" :items="labelItems" />
+
+        <!-- Post-it -->
+        <div
+          v-if="content.content_type === 'post_it'"
+          class="flex gap-[16px] py-[16px] items-center"
+        >
+          <div
+            class="w-[6px] h-full shrink-0"
+            :style="{ backgroundColor: content.cover_color }"
+          />
+          <div class="font-headline-large-prominent min-w-0 break-words">
+            {{ content.cover_text }}
+          </div>
+        </div>
+        <!-- Image -->
+        <DisplayImage
+          v-else-if="content.content_type === 'image'"
+          :items="content.media"
+          item-src="url"
+        />
+        <!-- Video -->
+        <DisplayVideo
+          v-else-if="content.content_type === 'video'"
+          :src="content.media?.[0]?.url"
+          :poster="content.video_poster_url"
+          play-button
+          width="844"
+          height="475"
+          preload="metadata"
+          class="bg-black"
+        />
+
+        <CardRefer v-if="content.mentions?.[0]" :item="content.mentions[0]" />
+
+        <!-- Figma: Announce Description -->
+        <div
+          v-if="content.author"
+          class="flex items-center justify-between gap-[16px]"
+        >
+          <div class="flex items-center gap-[8px] min-w-0">
+            <Avatar :src="content.author.avatar ?? ''" :size="40" />
+            <div class="flex flex-col gap-[4px] min-w-0">
+              <div class="font-body-large-prominent truncate">
+                {{ content.author.name }}
+              </div>
+              <div class="flex gap-[8px] font-body-large">
+                <div class="flex gap-[4px]">
+                  <span class="text-gray">ผู้ติดตาม</span>
+                  {{ convertNumber(content.author.follower_count ?? 0) }}
+                </div>
+                <div class="flex gap-[4px]">
+                  <span class="text-gray">กำลังเผยแพร่</span>
+                  {{ convertNumber(content.author.published_count ?? 0) }}
+                </div>
+                <div class="flex gap-[4px]">
+                  <span class="text-gray">อัตราตอบแชท</span>
+                  {{ content.author.response_rate ?? 0 }}%
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- พรีวิว = ดูหน้าตาได้แต่กดไม่ได้ -->
+          <Button circle size="icon-sm" class="shrink-0" inert>
+            <Icon name="lucide:ellipsis-vertical" />
+          </Button>
+        </div>
+
+        <div
+          v-if="content.description"
+          class="font-body-large whitespace-pre-wrap"
+        >
+          {{ content.description }}
+        </div>
+
+        <div v-if="place" class="flex gap-[8px] font-body-large">
+          <span class="text-gray">อยู่ที่</span>
+          <span class="text-primary">{{ place.name }}</span>
+        </div>
+
+        <div v-if="content.tags?.length" class="flex flex-wrap gap-[8px]">
+          <Chip v-for="tag in content.tags" :key="tag.id" color="bright">
+            {{ tag.name }}
+          </Chip>
+        </div>
+
+        <CardReaction
+          :item-count="{
+  liked: content.like_count ?? 0,
+  bookmarked: content.bookmark_count ?? 0,
+  shared: content.share_count ?? 0
+}"
+          disabled
+        />
+
+        <!-- Figma: Spotlight -->
+        <div v-if="recommendedContents.length" inert>
+          <CardContentRecommend :items="recommendedContents" />
+        </div>
+
+        <div inert>
+          <Comment
+            :key="String(props.contentId)"
+            :fetch-fn="commentFetchFn"
+            :current-user="previewUser"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, ref, watch } from "vue";
+import { useApi } from "#pukaad-ui/runtime/composables/useApi";
+import { useConvert } from "#pukaad-ui/runtime/composables/useConvert";
+import { mapContentToCard } from "#pukaad-ui/runtime/composables/useContentCard";
+const props = defineProps({
+  contentId: { type: [String, Number], required: true },
+  state: { type: String, required: false, default: "personal" }
+});
+const emit = defineEmits(["exit"]);
+const api = useApi();
+const { convertNumber } = useConvert();
+const endpointMap = {
+  personal: "/contents",
+  business: "/business/contents"
+};
+const content = ref({});
+const recommendedContents = ref([]);
+const previewUser = { id: "", name: "", avatar: "" };
+const labelItems = computed(
+  () => (content.value.labels ?? []).map((label) => ({
+    id: label.id,
+    label: label.name
+  }))
+);
+const place = computed(() => content.value.places?.[0]);
+const fetchContent = async () => {
+  try {
+    const res = await api(
+      `${endpointMap[props.state]}/${props.contentId}`
+    );
+    content.value = res.data ?? {};
+  } catch (err) {
+    console.error(err);
+  }
+};
+const fetchRecommendations = async () => {
+  try {
+    const res = await api(
+      `/contents/${props.contentId}/recommendations`,
+      { query: { limit: 5, contents_limit: 8 } }
+    );
+    recommendedContents.value = (res.data?.contents ?? []).map(
+      (raw) => mapContentToCard(raw)
+    );
+  } catch (err) {
+    console.error(err);
+    recommendedContents.value = [];
+  }
+};
+const toCommentUser = (profile) => ({
+  id: profile?.profile_path?.path_name ?? "",
+  name: profile?.profile_name ?? "\u0E44\u0E21\u0E48\u0E17\u0E23\u0E32\u0E1A\u0E0A\u0E37\u0E48\u0E2D",
+  avatar: profile?.profile_image?.image_url ?? ""
+});
+const toCommentItem = (raw) => ({
+  id: String(raw.id ?? ""),
+  user: toCommentUser(raw.profileData),
+  content: raw.content ?? "",
+  created_at: raw.created_at ?? "",
+  like_count: raw.like_count ?? 0,
+  is_liked: raw.is_liked ?? false,
+  reply_count: raw.reply_count ?? 0,
+  reply: (raw.comment_reply ?? []).map((r) => ({
+    id: String(r.id ?? ""),
+    user: toCommentUser(r.profileData),
+    reply_to: r.reply_to ? toCommentUser(r.reply_to) : void 0,
+    content: r.content ?? "",
+    created_at: r.created_at ?? "",
+    like_count: r.like_count ?? 0,
+    is_liked: r.is_liked ?? false
+  }))
+});
+const commentFetchFn = async (page, pageSize) => {
+  const res = await api(`/contents/${props.contentId}/comments`, {
+    query: { limit: pageSize, offset: (page - 1) * pageSize }
+  });
+  return {
+    data: (res.data ?? []).map(toCommentItem),
+    totalComments: res.meta?.total_comments ?? 0,
+    meta: { total_pages: res.meta?.total_pages ?? 1 }
+  };
+};
+const loadAll = () => {
+  fetchContent();
+  fetchRecommendations();
+};
+watch(() => [props.contentId, props.state], loadAll);
+onMounted(loadAll);
+</script>

package/dist/runtime/components/preview/preview-content.vue.d.ts

@@ -0,0 +1,54 @@
+import type { CardReferItem } from "#pukaad-ui/runtime/components/card/card-refer.vue";
+export type PreviewContentState = "personal" | "business";
+export interface PreviewContentData {
+    id?: string;
+    content_type?: "post_it" | "image" | "video";
+    labels?: {
+        id: string;
+        name: string;
+    }[];
+    cover_text?: string;
+    cover_color?: string;
+    video_poster_url?: string;
+    description?: string;
+    media?: {
+        media_type: string;
+        url: string;
+        description?: string;
+    }[];
+    tags?: {
+        id: string;
+        name: string;
+    }[];
+    mentions?: CardReferItem[];
+    places?: {
+        id: string;
+        name: string;
+        address?: string;
+    }[];
+    like_count?: number;
+    bookmark_count?: number;
+    share_count?: number;
+    author?: {
+        id: string;
+        name: string;
+        avatar: string | null;
+        follower_count?: number;
+        published_count?: number;
+        response_rate?: number;
+    };
+}
+type __VLS_Props = {
+    contentId: string | number;
+    /** เลือก endpoint ตามแอปที่เปิดพรีวิว */
+    state?: PreviewContentState;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    exit: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onExit?: (() => any) | undefined;
+}>, {
+    state: PreviewContentState;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/preview/preview-place.d.vue.ts

@@ -0,0 +1,57 @@
+import type { Category, ContactChannel, OpeningHour, SpecialDay } from "#pukaad-ui/types/models/place";
+export type PreviewPlaceState = "personal" | "office" | "business";
+export interface PreviewPlaceMedia {
+    id?: string | number;
+    url: string;
+    description?: string;
+}
+export interface PreviewPlaceData {
+    id?: string;
+    business_name?: string;
+    description?: string;
+    address?: {
+        full_address?: string;
+    };
+    photos?: PreviewPlaceMedia[];
+    videos?: PreviewPlaceMedia[];
+    rating?: number;
+    review_count?: number;
+    like_count?: number;
+    share_count?: number;
+    categories?: Category[];
+    is_review?: boolean;
+    open_status?: string;
+    lat_lng?: {
+        lat: number;
+        lng: number;
+    };
+    owner_profile_id?: string | null;
+    phone?: string;
+    contact_channels?: ContactChannel[];
+    opening_hours?: OpeningHour[];
+    special_days?: SpecialDay[];
+}
+export interface PreviewPlaceRecommendItem {
+    id: string | number;
+    title: string;
+    image: string;
+    rating: number;
+    review_count: number;
+}
+type __VLS_Props = {
+    placeId: string | number;
+    /** เลือก endpoint ตามแอปที่เปิดพรีวิว */
+    state?: PreviewPlaceState;
+    /** "ที่ไหนน่าสนใจ" — ยังไม่มี API ให้แอปส่งมาเอง ไม่ส่ง = ซ่อนการ์ด */
+    recommendedPlaces?: PreviewPlaceRecommendItem[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    exit: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onExit?: (() => any) | undefined;
+}>, {
+    state: PreviewPlaceState;
+    recommendedPlaces: PreviewPlaceRecommendItem[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/preview/preview-place.vue

@@ -0,0 +1,342 @@
+<template>
+  <!-- Figma: Preview - Display Place (2884:29368) -->
+  <div class="h-screen w-full overflow-hidden bg-white flex flex-col">
+    <!-- Figma: Navbar Preview (new tab) — Property 1=Admin -->
+    <div class="shrink-0 w-full bg-cloud">
+      <div class="max-w-[1280px] mx-auto flex justify-end p-[16px]">
+        <Button variant="outline" @click="emit('exit')">ออกจากพรีวิว</Button>
+      </div>
+    </div>
+
+    <div class="flex-1 overflow-y-auto">
+      <div class="max-w-[1280px] mx-auto p-[16px] flex flex-col gap-[16px]">
+        <!-- Place Cover -->
+        <DisplayImagePlace
+          v-if="photos.length > 0 || videos.length > 0"
+          :photos="photos"
+          :videos="videos"
+          variant="featured"
+          :state="props.state"
+          :title="placeData.business_name"
+        />
+
+        <!-- Place Title -->
+        <div class="flex flex-col gap-[8px]">
+          <div class="flex gap-[8px] justify-between items-center">
+            <div class="font-headline-medium-prominent">
+              {{ placeData.business_name || "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E0A\u0E37\u0E48\u0E2D\u0E2A\u0E16\u0E32\u0E19\u0E17\u0E35\u0E48" }}
+            </div>
+            <!-- พรีวิว = ดูหน้าตาได้แต่กดไม่ได้ -->
+            <div class="flex gap-[8px] items-center" inert>
+              <Button size="sm" class="rounded-full font-body-small">
+                <Icon name="lucide:heart" :size="16" />
+                ถูกใจ
+              </Button>
+              <Button circle size="icon-sm">
+                <Icon name="uil:share" />
+              </Button>
+              <Button circle size="icon-sm">
+                <Icon name="lucide:ellipsis-vertical" />
+              </Button>
+            </div>
+          </div>
+
+          <Chip v-if="closedStatus" color="error" class="gap-[4px] self-start">
+            <Icon :name="closedStatus.icon" class="!size-[16px]" />
+            <span class="font-body-medium-prominent">{{
+              closedStatus.label
+            }}</span>
+          </Chip>
+
+          <div class="flex gap-[16px] font-body-large">
+            <div class="flex gap-[8px] items-center">
+              <InputRating
+                :model-value="placeData.rating ?? 0"
+                readonly
+                :size="16"
+              />
+              {{ convertNumber(placeData.review_count || 0) }}
+            </div>
+            <Divider alignment="vertical" />
+            <div class="flex gap-[4px]">
+              <span class="text-gray">ถูกใจ</span>
+              {{ convertNumber(placeData.like_count || 0) }}
+            </div>
+            <Divider alignment="vertical" />
+            <div class="flex gap-[4px]">
+              <span class="text-gray">แชร์</span>
+              {{ convertNumber(placeData.share_count || 0) }}
+            </div>
+            <Divider alignment="vertical" />
+            <div>
+              {{
+                placeData.categories?.[0]?.category_name || "\u0E44\u0E21\u0E48\u0E23\u0E30\u0E1A\u0E38\u0E2B\u0E21\u0E27\u0E14\u0E2B\u0E21\u0E39\u0E48"
+              }}
+            </div>
+          </div>
+
+          <div class="flex gap-[16px] items-center">
+            <div class="flex gap-[8px] items-center">
+              <Icon name="lucide:map-pin" :size="20" class="text-primary" />
+              <div class="font-body-large text-gray">
+                {{ placeData.address?.full_address || "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E17\u0E35\u0E48\u0E2D\u0E22\u0E39\u0E48" }}
+              </div>
+            </div>
+            <Button
+              v-if="placeData.lat_lng"
+              variant="text"
+              color="primary"
+              class="font-body-large"
+              @click="openMap"
+            >
+              ดูแผนที่
+            </Button>
+          </div>
+        </div>
+
+        <div class="flex justify-between gap-[24px]">
+          <!-- ซ้าย: รีวิว -->
+          <div class="w-[824px] shrink-0">
+            <ShadTabs
+              v-if="placeData.is_review"
+              v-model="activeTab"
+              class="gap-[16px]"
+            >
+              <ShadTabsList>
+                <ShadTabsTrigger
+                  v-for="tab in mainTabs"
+                  :key="tab.value"
+                  :value="tab.value"
+                >
+                  {{ tab.label }}
+                </ShadTabsTrigger>
+              </ShadTabsList>
+
+              <ShadTabsContent value="review" class="flex flex-col gap-[16px]">
+                <div inert>
+                  <DisplayRatingSummary
+                    :rating="placeData.rating ?? 0"
+                    :total-reviews="placeData.review_count ?? 0"
+                    :distribution="ratingDistribution"
+                  />
+                </div>
+
+                <ShadTabs v-model="activeReviewTab">
+                  <ShadTabsList>
+                    <ShadTabsTrigger
+                      v-for="tab in reviewFilterTabs"
+                      :key="tab.value"
+                      :value="tab.value"
+                      :disabled="reviewCounts[tab.value] === 0"
+                    >
+                      {{ tab.label }}
+                    </ShadTabsTrigger>
+                  </ShadTabsList>
+                </ShadTabs>
+
+                <div v-if="reviews.length > 0" class="flex flex-col">
+                  <CardReview
+                    v-for="review in reviews"
+                    :key="review.review_id"
+                    :item="review"
+                    :is-profile="false"
+                    disabled-like
+                    disabled-menu
+                  />
+                </div>
+                <div
+                  v-else-if="!isLoadingReviews"
+                  class="flex flex-col items-center gap-[8px] py-[32px]"
+                >
+                  <Icon name="pukaad:page-not-found" :size="120" />
+                  <div class="font-title-small-prominent">ยังไม่มีรีวิว</div>
+                </div>
+
+                <div ref="sentinel" class="h-[1px]" />
+                <div
+                  v-if="isLoadingReviews"
+                  class="flex justify-center py-[16px]"
+                >
+                  <Icon
+                    name="lucide:loader-circle"
+                    :size="40"
+                    class="animate-spin text-cloud"
+                  />
+                </div>
+              </ShadTabsContent>
+
+              <ShadTabsContent value="aboutPost">
+                <div class="text-gray py-[32px] text-center">
+                  ยังไม่มีโพสต์ที่เกี่ยวข้อง
+                </div>
+              </ShadTabsContent>
+            </ShadTabs>
+
+            <div
+              v-else
+              class="flex flex-col items-center justify-center gap-[16px] py-[48px]"
+            >
+              <Icon name="pukaad:page-not-found" :size="145" />
+              <div>ยังไม่มีรีวิว</div>
+            </div>
+          </div>
+
+          <!-- ขวา: Place About + Reccommended Places -->
+          <div class="w-[380px] shrink-0 flex flex-col gap-[16px]">
+            <CardPlaceDetail :item="placeDetailItem" />
+            <div v-if="props.recommendedPlaces.length > 0" inert>
+              <CardRecommendPlace :items="props.recommendedPlaces" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, ref, useTemplateRef, watch } from "vue";
+import { useElementVisibility } from "@vueuse/core";
+import { useApi } from "#pukaad-ui/runtime/composables/useApi";
+import { useConvert } from "#pukaad-ui/runtime/composables/useConvert";
+const props = defineProps({
+  placeId: { type: [String, Number], required: true },
+  state: { type: String, required: false, default: "personal" },
+  recommendedPlaces: { type: Array, required: false, default: () => [] }
+});
+const emit = defineEmits(["exit"]);
+const api = useApi();
+const { convertNumber } = useConvert();
+const endpointMap = {
+  personal: { place: "/suggest-places", reviews: "/suggest-places" },
+  office: {
+    place: "/office/suggest-places",
+    reviews: "/office/suggest-places"
+  },
+  business: { place: "/business/suggest-places", reviews: "/suggest-places" }
+};
+const endpoint = computed(() => endpointMap[props.state]);
+const closedStatusMap = {
+  temporarily_closed: { label: "\u0E1B\u0E34\u0E14\u0E0A\u0E31\u0E48\u0E27\u0E04\u0E23\u0E32\u0E27", icon: "lucide:circle-pause" },
+  // ── MOCK ──
+  // TODO: ชื่อค่ายังไม่ยืนยันกับ backend (ยังไม่มี endpoint ปิดถาวร)
+  permanently_closed: { label: "\u0E1B\u0E34\u0E14\u0E16\u0E32\u0E27\u0E23", icon: "lucide:circle-x" }
+  // ── /MOCK ──
+};
+const mainTabs = [
+  { label: "\u0E23\u0E35\u0E27\u0E34\u0E27", value: "review" },
+  { label: "\u0E42\u0E1E\u0E2A\u0E15\u0E4C\u0E17\u0E35\u0E48\u0E40\u0E01\u0E35\u0E48\u0E22\u0E27\u0E02\u0E49\u0E2D\u0E07", value: "aboutPost" }
+];
+const reviewFilterTabs = [
+  { label: "\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14", value: "all" },
+  { label: "\u0E21\u0E35\u0E23\u0E39\u0E1B\u0E20\u0E32\u0E1E", value: "img" },
+  { label: "\u0E04\u0E27\u0E32\u0E21\u0E04\u0E34\u0E14\u0E40\u0E2B\u0E47\u0E19", value: "comment" },
+  { label: "5 \u0E14\u0E32\u0E27", value: "rating_5" },
+  { label: "4 \u0E14\u0E32\u0E27", value: "rating_4" },
+  { label: "3 \u0E14\u0E32\u0E27", value: "rating_3" },
+  { label: "2 \u0E14\u0E32\u0E27", value: "rating_2" },
+  { label: "1 \u0E14\u0E32\u0E27", value: "rating_1" }
+];
+const placeData = ref({});
+const reviews = ref([]);
+const reviewTotal = ref(0);
+const reviewPage = ref(1);
+const reviewPageSize = 10;
+const isLoadingReviews = ref(false);
+const activeTab = ref("review");
+const activeReviewTab = ref("all");
+const reviewCounts = ref({
+  all: 0,
+  img: 0,
+  comment: 0,
+  rating_5: 0,
+  rating_4: 0,
+  rating_3: 0,
+  rating_2: 0,
+  rating_1: 0
+});
+const hasMoreReviews = computed(() => reviews.value.length < reviewTotal.value);
+const closedStatus = computed(() => {
+  const status = placeData.value.open_status;
+  return status ? closedStatusMap[status] : void 0;
+});
+const photos = computed(() => placeData.value.photos ?? []);
+const videos = computed(() => placeData.value.videos ?? []);
+const ratingDistribution = computed(
+  () => [5, 4, 3, 2, 1].map((stars) => ({
+    stars,
+    count: reviewCounts.value[`rating_${stars}`] ?? 0
+  }))
+);
+const placeDetailItem = computed(() => ({
+  id: placeData.value.id ?? String(props.placeId),
+  place_name: placeData.value.business_name ?? "",
+  description: placeData.value.description ?? "",
+  address: placeData.value.address?.full_address ?? "",
+  categories: placeData.value.categories ?? [],
+  open_status: placeData.value.open_status,
+  opening_hours: placeData.value.opening_hours,
+  special_days: placeData.value.special_days,
+  phone: placeData.value.phone,
+  contact_channels: placeData.value.contact_channels,
+  owner_profile_id: placeData.value.owner_profile_id
+}));
+const fetchPlaceData = async () => {
+  try {
+    const res = await api(
+      `${endpoint.value.place}/${props.placeId}`
+    );
+    placeData.value = res.data ?? {};
+  } catch (err) {
+    console.error(err);
+  }
+};
+let reviewRequestId = 0;
+const fetchReviews = async (page = 1) => {
+  if (page > 1 && isLoadingReviews.value) return;
+  const requestId = ++reviewRequestId;
+  isLoadingReviews.value = true;
+  try {
+    const res = await api(`${endpoint.value.reviews}/${props.placeId}/reviews`, {
+      query: {
+        tab: activeReviewTab.value,
+        page,
+        page_size: reviewPageSize
+      }
+    });
+    if (requestId !== reviewRequestId) return;
+    const d = res?.data;
+    const items = d?.items ?? [];
+    reviews.value = page === 1 ? items : [...reviews.value, ...items];
+    reviewTotal.value = d?.total ?? 0;
+    reviewPage.value = d?.page ?? page;
+    if (d?.counts) reviewCounts.value = d.counts;
+  } catch (err) {
+    console.error(err);
+    if (requestId === reviewRequestId && page === 1) reviews.value = [];
+  } finally {
+    if (requestId === reviewRequestId) isLoadingReviews.value = false;
+  }
+};
+const loadAll = () => {
+  fetchPlaceData();
+  if (activeReviewTab.value !== "all") activeReviewTab.value = "all";
+  else fetchReviews(1);
+};
+const openMap = () => {
+  const ll = placeData.value.lat_lng;
+  if (!ll) return;
+  window.open(`https://www.google.com/maps?q=${ll.lat},${ll.lng}`, "_blank");
+};
+const sentinel = useTemplateRef("sentinel");
+const isSentinelVisible = useElementVisibility(sentinel);
+watch(
+  [isSentinelVisible, hasMoreReviews, isLoadingReviews],
+  ([visible, more, loading]) => {
+    if (visible && more && !loading) fetchReviews(reviewPage.value + 1);
+  }
+);
+watch(activeReviewTab, () => fetchReviews(1));
+watch(() => [props.placeId, props.state], loadAll);
+onMounted(loadAll);
+</script>

package/dist/runtime/components/preview/preview-place.vue.d.ts

@@ -0,0 +1,57 @@
+import type { Category, ContactChannel, OpeningHour, SpecialDay } from "#pukaad-ui/types/models/place";
+export type PreviewPlaceState = "personal" | "office" | "business";
+export interface PreviewPlaceMedia {
+    id?: string | number;
+    url: string;
+    description?: string;
+}
+export interface PreviewPlaceData {
+    id?: string;
+    business_name?: string;
+    description?: string;
+    address?: {
+        full_address?: string;
+    };
+    photos?: PreviewPlaceMedia[];
+    videos?: PreviewPlaceMedia[];
+    rating?: number;
+    review_count?: number;
+    like_count?: number;
+    share_count?: number;
+    categories?: Category[];
+    is_review?: boolean;
+    open_status?: string;
+    lat_lng?: {
+        lat: number;
+        lng: number;
+    };
+    owner_profile_id?: string | null;
+    phone?: string;
+    contact_channels?: ContactChannel[];
+    opening_hours?: OpeningHour[];
+    special_days?: SpecialDay[];
+}
+export interface PreviewPlaceRecommendItem {
+    id: string | number;
+    title: string;
+    image: string;
+    rating: number;
+    review_count: number;
+}
+type __VLS_Props = {
+    placeId: string | number;
+    /** เลือก endpoint ตามแอปที่เปิดพรีวิว */
+    state?: PreviewPlaceState;
+    /** "ที่ไหนน่าสนใจ" — ยังไม่มี API ให้แอปส่งมาเอง ไม่ส่ง = ซ่อนการ์ด */
+    recommendedPlaces?: PreviewPlaceRecommendItem[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    exit: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onExit?: (() => any) | undefined;
+}>, {
+    state: PreviewPlaceState;
+    recommendedPlaces: PreviewPlaceRecommendItem[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/chart/ChartTooltipContent.d.vue.ts

@@ -18,8 +18,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    config: ChartConfig;
     payload: Record<string, any>;
+    config: ChartConfig;
     indicator: "line" | "dot" | "dashed";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/ui/chart/ChartTooltipContent.vue.d.ts

@@ -18,8 +18,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    config: ChartConfig;
     payload: Record<string, any>;
+    config: ChartConfig;
     indicator: "line" | "dot" | "dashed";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/ui/native-select/NativeSelectOptGroup.d.vue.ts

@@ -14,7 +14,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
+    enterKeyHint?: "search" | "done" | "send" | "next" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
@@ -208,7 +208,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
+    enterKeyHint?: "search" | "done" | "send" | "next" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;

package/dist/runtime/components/ui/native-select/NativeSelectOptGroup.vue.d.ts

@@ -14,7 +14,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
+    enterKeyHint?: "search" | "done" | "send" | "next" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
@@ -208,7 +208,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
+    enterKeyHint?: "search" | "done" | "send" | "next" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;

package/dist/runtime/components/ui/native-select/NativeSelectOption.d.vue.ts

@@ -16,7 +16,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
+    enterKeyHint?: "search" | "done" | "send" | "next" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
@@ -212,7 +212,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
+    enterKeyHint?: "search" | "done" | "send" | "next" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;

package/dist/runtime/components/ui/native-select/NativeSelectOption.vue.d.ts

@@ -16,7 +16,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
+    enterKeyHint?: "search" | "done" | "send" | "next" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
@@ -212,7 +212,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
+    enterKeyHint?: "search" | "done" | "send" | "next" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;

package/package.json

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