pukaad-ui-lib 1.68.0 → 1.70.0

package/dist/module.json

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

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

@@ -70,8 +70,8 @@
     "example": "https://x.com/username"
   },
   {
-    "icon": "pukaad-social:Youtube",
-    "ืname": "YouTube",
+    "icon": "pukaad-social:YouTube",
+    "name": "YouTube",
     "example": "https://youtube.com/@username"
   }
-]
+]

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

@@ -1,3 +1,29 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export interface CardProfileAboutLink {
+    name: string;
+    link: string;
+}
+export interface Address {
+    province_id?: number;
+    amphur_id?: number;
+    tambon_id?: number;
+    zipcode?: number;
+    detail_address?: string;
+    full_address?: string;
+}
+export interface CardProfileAboutItem {
+    description: string;
+    category: number;
+    address: Address;
+    phone: string;
+    links: CardProfileAboutLink[];
+}
+type __VLS_Props = {
+    edit?: boolean;
+    item?: CardProfileAboutItem;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    item: CardProfileAboutItem;
+    edit: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/card/card-profile-about.vue

@@ -1,35 +1,62 @@
 <template>
-  <!-- <Card full-width variant="outline">
-    <template #header>
+  <Card title="ข้อมูลทั่วไป" class="flex-col flex gap-[16px]">
+    <template v-if="props.edit && !isEmpty" #header>
       <div class="flex justify-between items-center">
-        <div class="font-title-medium-prominent">เกี่ยวกับ</div>
-        <Button
-          v-if="props.isEdit"
-          variant="text"
-          color="primary"
-          prependIcon="lucide:square-pen"
-          :iconSize="20"
-          @click="isShowEdit = true"
-        >
+        <div class="font-title-medium-prominent">ข้อมูลทั่วไป</div>
+        <Button variant="text" color="primary" @click="isShowEdit = true">
+          <Icon name="lucide:square-pen" :size="20" class="text-primary" />
           แก้ไข
         </Button>
       </div>
     </template>
-    <div class="flex flex-col gap-[8px] font-body-large">
-      <div v-for="(item, i) in itemDetail" :key="i" class="flex gap-[8px]">
+    <div
+      v-if="props.edit && isEmpty"
+      class="flex flex-col gap-[8px] font-body-large"
+    >
+      <Button class="w-full" @click="isShowEdit = true">
+        <Icon name="lucide:plus" :size="20" />
+        เพิ่มข้อมูลทั่วไป
+      </Button>
+    </div>
+    <div v-else class="flex flex-col gap-[8px] font-body-large">
+      <div class="flex gap-[8px]">
         <div class="pt-[3px]">
-          <Icon :name="item.icon" :size="20" class="text-primary" />
+          <Icon name="lucide:circle-alert" :size="20" class="text-primary" />
         </div>
-        <div :class="item.isDefault ? 'text-cloud' : ''">
-          {{ item.value }}
+        <div :class="!item.description ? 'text-cloud' : ''">
+          {{ item.description || "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E04\u0E33\u0E2D\u0E18\u0E34\u0E1A\u0E32\u0E22" }}
+        </div>
+      </div>
+      <div class="flex gap-[8px]">
+        <div class="pt-[3px]">
+          <Icon name="lucide:book-user" :size="20" class="text-primary" />
+        </div>
+        <div :class="!item.category ? 'text-cloud' : ''">
+          {{ item.category || "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17" }}
+        </div>
+      </div>
+      <div class="flex gap-[8px]">
+        <div class="pt-[3px]">
+          <Icon name="lucide:map-pin" :size="20" class="text-primary" />
+        </div>
+        <div :class="!item.address.full_address ? 'text-cloud' : ''">
+          {{ item.address.full_address || "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E17\u0E35\u0E48\u0E2D\u0E22\u0E39\u0E48" }}
         </div>
       </div>
 
+      <div class="flex gap-[8px]">
+        <div class="pt-[3px]">
+          <Icon name="lucide:phone" :size="20" class="text-primary" />
+        </div>
+        <div :class="!item.phone ? 'text-cloud' : ''">
+          {{ item.phone || "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E40\u0E1A\u0E2D\u0E23\u0E4C\u0E42\u0E17\u0E23\u0E28\u0E31\u0E1E\u0E17\u0E4C" }}
+        </div>
+      </div>
       <div
-        v-for="(linkItem, i) in props.item.links"
+        v-for="(linkItem, i) in item.links"
         :key="i"
         class="flex gap-[8px]"
-        v-if="props.item.links.length > 0"
+        v-if="item.links.length > 0"
       >
         <div class="pt-[3px]">
           <Icon
@@ -38,19 +65,48 @@
             class="text-primary"
           />
         </div>
-        <div
+        <a
+          :href="linkItem.link"
+          target="_blank"
           class="cursor-pointer hover:underline"
-          @click="onClickLink(linkItem.link)"
         >
           {{ linkItem.link }}
-        </div>
+        </a>
       </div>
     </div>
   </Card>
-
-  <DrawerProfileAbout @submit="onSubmit" :item="item" v-model="isShowEdit" /> -->
+  <DrawerProfileAbout
+    :item="item"
+    v-model="isShowEdit"
+    @submit="onUpdateAbout"
+  />
 </template>
 
 <script setup>
-
+import { ref, computed } from "vue";
+const props = defineProps({
+  edit: { type: Boolean, required: false, default: false },
+  item: { type: Object, required: false, default: () => ({
+    description: "",
+    category: 0,
+    address: {
+      province_id: 0,
+      amphur_id: 0,
+      tambon_id: 0,
+      zipcode: 0,
+      detail_address: "",
+      full_address: ""
+    },
+    phone: "",
+    links: []
+  }) }
+});
+const isShowEdit = ref(false);
+const item = ref({ ...props.item });
+const isEmpty = computed(() => {
+  return !item.value.description && !item.value.address?.full_address && !item.value.phone;
+});
+const onUpdateAbout = (val) => {
+  item.value = val;
+};
 </script>

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

@@ -1,3 +1,29 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export interface CardProfileAboutLink {
+    name: string;
+    link: string;
+}
+export interface Address {
+    province_id?: number;
+    amphur_id?: number;
+    tambon_id?: number;
+    zipcode?: number;
+    detail_address?: string;
+    full_address?: string;
+}
+export interface CardProfileAboutItem {
+    description: string;
+    category: number;
+    address: Address;
+    phone: string;
+    links: CardProfileAboutLink[];
+}
+type __VLS_Props = {
+    edit?: boolean;
+    item?: CardProfileAboutItem;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    item: CardProfileAboutItem;
+    edit: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/card/card.vue

@@ -3,6 +3,7 @@
     <ShadCardHeader
       v-if="$slots.header || props.title || props.description"
       v-bind="slotScope"
+      :hasGap="!!($slots.description || props.description)"
     >
       <slot name="header">
         <ShadCardTitle v-if="props.title">

package/dist/runtime/components/dialog/dialog-phone-OTP.d.vue.ts

@@ -14,8 +14,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     onComplete?: ((value: string) => any) | undefined;
     onClose?: (() => any) | undefined;
 }>, {
-    confirmedText: string;
     phone: string;
+    confirmedText: string;
     phoneLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/dialog/dialog-phone-OTP.vue.d.ts

@@ -14,8 +14,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     onComplete?: ((value: string) => any) | undefined;
     onClose?: (() => any) | undefined;
 }>, {
-    confirmedText: string;
     phone: string;
+    confirmedText: string;
     phoneLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/drawer/drawer-profile-about.d.vue.ts

@@ -1,3 +1,39 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export interface InputLinkItem {
+    name: string;
+    link?: string;
+}
+export interface Address {
+    province_id?: number;
+    amphur_id?: number;
+    tambon_id?: number;
+    zipcode?: number;
+    detail_address?: string;
+    full_address?: string;
+}
+export interface DrawerProfileAboutItem {
+    description: string;
+    category: string;
+    address: Address;
+    phone: string;
+    links: InputLinkItem[];
+}
+export interface DrawerProfileAboutProps {
+    item?: DrawerProfileAboutItem;
+}
+type __VLS_Props = DrawerProfileAboutProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+} & {
+    submit: (data: DrawerProfileAboutItem) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSubmit?: ((data: DrawerProfileAboutItem) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    item: DrawerProfileAboutItem;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/drawer/drawer-profile-about.vue

@@ -1,44 +1,104 @@
 <template>
-  <!-- <Drawer
-    width="788"
+  <Drawer
+    class="w-[748px]"
     title="เกี่ยวกับ"
     @close="onClose"
+    disabled-auto-close
     @submit="onSubmit"
     v-model="isDrawerOpen"
   >
-    <Card full-width>
-      <div class="flex flex-col gap-[16px]">
-        <InputTextarea
-          name="description"
-          placeholder="เพิ่มคำอธิบายที่จะช่วยให้ค้นพบและติดตามคุณได้ง่ายขึ้น (สูงสุด 220 ตัวอักษร)"
-          label="คำอธิบาย"
-          full-width
-          show-counter
-          :max-length="220"
-          resize="none"
-          v-model="formState.description"
-        />
-
+    <div class="flex flex-col gap-[16px]">
+      <InputTextarea
+        name="description"
+        placeholder="เพิ่มคำอธิบายที่จะช่วยให้ค้นพบและติดตามคุณได้ง่ายขึ้น (สูงสุด 220 ตัวอักษร)"
+        label="คำอธิบาย"
+        show-counter
+        :limit="220"
+        v-model="form.description"
+        class="min-h-[120px]"
+      />
+      <InputAddress
+        name="address"
+        v-model="form.address"
+        required
+        requiredDetail
+      />
+      <div class="flex flex-col gap-[8px]">
         <InputTextField
           name="phone"
           placeholder="กรอกเบอร์โทรศัพท์"
           label="เบอร์โทรศัพท์สำหรับติดต่อ"
-          full-width
-          hint="เบอร์โทรศัพท์นี้จะแสดงในโปรไฟล์ของคุณ และสามารถมองเห็นได้โดยสาธารณะ"
-          v-model="formState.phone"
+          v-model="form.phone"
         />
-        <InputLink name="links" v-model="formState.links" />
+        <div class="font-body-small text-gray">
+          เบอร์โทรศัพท์นี้จะแสดงในโปรไฟล์ของคุณ และสามารถมองเห็นได้โดยสาธารณะ
+        </div>
       </div>
-    </Card>
-    <template #footer>
+      <InputLink name="links" v-model="form.links" />
+    </div>
+    <template #footer="{ meta }">
       <div class="flex justify-end gap-[16px] items-center">
         <Button type="outline" @click="onClose"> ยกเลิก </Button>
-        <Button button-type="submit" variant="primary"> ยืนยัน </Button>
+        <Button type="submit" color="primary" :disabled="!meta.valid">
+          ยืนยัน
+        </Button>
       </div>
     </template>
-  </Drawer> -->
+  </Drawer>
 </template>
 
 <script setup>
-
+import { useNuxtApp } from "nuxt/app";
+const { $alert } = useNuxtApp();
+import { ref, watch } from "vue";
+const emit = defineEmits(["submit"]);
+const props = defineProps({
+  item: { type: Object, required: false, default: () => ({
+    description: "",
+    category: "",
+    address: {
+      province_id: 0,
+      amphur_id: 0,
+      tambon_id: 0,
+      zipcode: 0,
+      detail_address: "",
+      full_address: ""
+    },
+    phone: "",
+    links: []
+  }) }
+});
+const form = ref(
+  JSON.parse(JSON.stringify(props.item))
+);
+const isDrawerOpen = defineModel({ type: Boolean, ...{
+  default: false
+} });
+watch(isDrawerOpen, (newVal) => {
+  if (newVal) {
+    form.value = JSON.parse(JSON.stringify(props.item));
+  }
+});
+const onClose = async () => {
+  const isModified = JSON.stringify(form.value) !== JSON.stringify(props.item);
+  if (isModified) {
+    const { isConfirmed } = await $alert.show({
+      type: "warning",
+      title: "\u0E15\u0E49\u0E2D\u0E07\u0E01\u0E32\u0E23\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E2B\u0E19\u0E49\u0E32\u0E19\u0E35\u0E49\u0E2B\u0E23\u0E37\u0E2D\u0E44\u0E21\u0E48 ?",
+      description: "\u0E01\u0E32\u0E23\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E41\u0E1B\u0E25\u0E07\u0E02\u0E2D\u0E07\u0E04\u0E38\u0E13\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49\u0E23\u0E31\u0E1A\u0E01\u0E32\u0E23\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01 \u0E04\u0E38\u0E13\u0E15\u0E49\u0E2D\u0E07\u0E01\u0E32\u0E23\u0E25\u0E30\u0E17\u0E34\u0E49\u0E07\u0E01\u0E32\u0E23\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E41\u0E1B\u0E25\u0E07\u0E2B\u0E23\u0E37\u0E2D\u0E44\u0E21\u0E48 ?",
+      confirmText: "\u0E25\u0E30\u0E17\u0E34\u0E49\u0E07",
+      cancelText: "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E15\u0E48\u0E2D",
+      showCancelBtn: true
+    });
+    if (isConfirmed) {
+      isDrawerOpen.value = false;
+    }
+  } else {
+    isDrawerOpen.value = false;
+  }
+};
+const onSubmit = () => {
+  emit("submit", form.value);
+  isDrawerOpen.value = false;
+};
 </script>

package/dist/runtime/components/drawer/drawer-profile-about.vue.d.ts

@@ -1,3 +1,39 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export interface InputLinkItem {
+    name: string;
+    link?: string;
+}
+export interface Address {
+    province_id?: number;
+    amphur_id?: number;
+    tambon_id?: number;
+    zipcode?: number;
+    detail_address?: string;
+    full_address?: string;
+}
+export interface DrawerProfileAboutItem {
+    description: string;
+    category: string;
+    address: Address;
+    phone: string;
+    links: InputLinkItem[];
+}
+export interface DrawerProfileAboutProps {
+    item?: DrawerProfileAboutItem;
+}
+type __VLS_Props = DrawerProfileAboutProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+} & {
+    submit: (data: DrawerProfileAboutItem) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSubmit?: ((data: DrawerProfileAboutItem) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    item: DrawerProfileAboutItem;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -4,6 +4,7 @@ export interface DrawerProps extends SheetContentProps {
     description?: string;
     loading?: boolean;
     loadingText?: string;
+    disabledAutoClose?: boolean;
 }
 type __VLS_Props = DrawerProps;
 type __VLS_ModelProps = {

package/dist/runtime/components/drawer/drawer.vue

@@ -31,6 +31,7 @@ const props = defineProps({
   description: { type: String, required: false },
   loading: { type: Boolean, required: false },
   loadingText: { type: String, required: false },
+  disabledAutoClose: { type: Boolean, required: false },
   class: { type: null, required: false },
   side: { type: String, required: false },
   forceMount: { type: Boolean, required: false },
@@ -47,5 +48,8 @@ const onSubmit = (e) => {
 };
 const onClose = () => {
   emits("close");
+  if (!props.disabledAutoClose) {
+    isOpen.value = false;
+  }
 };
 </script>

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

@@ -4,6 +4,7 @@ export interface DrawerProps extends SheetContentProps {
     description?: string;
     loading?: boolean;
     loadingText?: string;
+    disabledAutoClose?: boolean;
 }
 type __VLS_Props = DrawerProps;
 type __VLS_ModelProps = {

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

@@ -94,7 +94,7 @@ const listSocial = [
   },
   {
     name: "TikTok",
-    icon: "Tiktok",
+    icon: "TikTok",
     example: "https://tiktok.com/@username",
     regex: /(?:https?:\/\/)?(?:www\.)?(?:tiktok\.com)\/.+/i
   },

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

@@ -14,8 +14,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     onComplete?: ((value: string) => any) | undefined;
     onClose?: (() => any) | undefined;
 }>, {
-    confirmedText: string;
     phone: string;
+    confirmedText: string;
     phoneLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -14,8 +14,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     onComplete?: ((value: string) => any) | undefined;
     onClose?: (() => any) | undefined;
 }>, {
-    confirmedText: string;
     phone: string;
+    confirmedText: string;
     phoneLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/ui/card/CardHeader.d.vue.ts

@@ -1,12 +1,15 @@
 import type { HTMLAttributes } from "vue";
 type __VLS_Props = {
     class?: HTMLAttributes["class"];
+    hasGap?: boolean;
 };
 declare var __VLS_1: {};
 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<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    hasGap: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/ui/card/CardHeader.vue

@@ -1,7 +1,8 @@
 <script setup>
 import { cn } from "@/runtime/plugins/shadcn";
 const props = defineProps({
-  class: { type: null, required: false }
+  class: { type: null, required: false },
+  hasGap: { type: Boolean, required: false, default: true }
 });
 </script>
 
@@ -10,7 +11,8 @@ const props = defineProps({
     data-slot="card-header"
     :class="
   cn(
-    '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+    '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+    props.hasGap && 'gap-1.5',
     props.class
   )
 "

package/dist/runtime/components/ui/card/CardHeader.vue.d.ts

@@ -1,12 +1,15 @@
 import type { HTMLAttributes } from "vue";
 type __VLS_Props = {
     class?: HTMLAttributes["class"];
+    hasGap?: boolean;
 };
 declare var __VLS_1: {};
 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<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    hasGap: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -19,13 +19,14 @@
         v-bind="{ ...forwarded, ...$attrs }"
       >
         <slot :meta="meta" />
-        <DialogClose
+        <button
+          type="button"
           class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none cursor-pointer"
           @click="onClose"
         >
           <Icon name="lucide:x" :size="24" />
           <span class="sr-only">Closed</span>
-        </DialogClose>
+        </button>
       </DialogContent>
     </Form>
   </DialogPortal>

package/dist/runtime/plugins/alert.d.ts

@@ -11,7 +11,7 @@ export interface AlertResponse {
     isCanceled: boolean;
     isConfirmed: boolean;
 }
-declare class Alert {
+export declare class Alert {
     show(options?: AlertOptions): Promise<AlertResponse>;
 }
 declare const _default: import("nuxt/app").Plugin<{

package/dist/runtime/plugins/alert.js

@@ -12,7 +12,7 @@ import {
 } from "@/runtime/components/ui/alert-dialog";
 import { buttonVariants } from "@/runtime/components/ui/button";
 import Icon from "@/runtime/components/icons.vue";
-class Alert {
+export class Alert {
   show(options = {}) {
     const response = {
       isCanceled: false,

package/package.json

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