pukaad-ui-lib 1.211.0 → 1.212.2

package/dist/runtime/components/display/display-image-place.vue

@@ -1,4 +1,102 @@
-<template>
-  <div>asdasds</div>
-</template>
-<script setup lang="ts"></script>
+<template>
+  <!-- Featured variant -->
+  <div v-if="variant === 'featured'" class="flex gap-[8px] h-[360px]">
+    <div v-if="photos[0]" class="w-[620px] shrink-0 rounded-[8px] overflow-hidden cursor-pointer"
+      @click="openLightbox('photo', 0)">
+      <Image :src="photos[0]" class="w-full h-full object-cover" width="auto" height="auto" />
+    </div>
+
+    <div v-if="photos[1]" class="flex-1 rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 1)">
+      <Image :src="photos[1]" class="w-full h-full object-cover" width="auto" height="auto" />
+    </div>
+
+    <div class="w-[306px] shrink-0 flex flex-col gap-[8px]">
+      <div v-if="photos[2]" class="flex-1 min-h-0 relative rounded-[8px] overflow-hidden cursor-pointer"
+        @click="openLightbox('photo', 2)">
+        <Image :src="photos[2]" class="w-full h-full object-cover" width="auto" height="auto" />
+        <div v-if="photos.length > 3"
+          class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
+          <Icon name="fa6-solid:image" :size="42" />
+          <span class="font-body-large">รูปภาพ ({{ convertNumber(photos.length - 3) }})</span>
+        </div>
+      </div>
+
+      <div v-if="videos[0]" class="flex-1 min-h-0 relative rounded-[8px] overflow-hidden cursor-pointer"
+        @click="openLightbox('video', 0)">
+        <Image :src="videos[0]" class="w-full h-full object-cover" width="auto" height="auto" />
+        <div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
+          <Icon name="fa6-solid:video" :size="42" />
+          <span class="font-body-large">วิดีโอ ({{ videos.length }})</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Album variant -->
+  <div v-else-if="variant === 'album'" class="grid grid-cols-5 gap-[10px] w-[700px]">
+    <!-- Row 1: photos[0..3] -->
+    <div v-for="(photo, i) in galleryRow1" :key="`g1-${i}`"
+      class="w-[132px] h-[132px] rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', i)">
+      <Image :src="photo" class="w-full h-full object-cover" width="auto" height="auto" />
+    </div>
+
+    <!-- Row 1 col 5: image count overlay (v-show keeps grid slot) -->
+    <div v-show="galleryCountPhoto != null"
+      class="w-[132px] h-[132px] relative rounded-[8px] overflow-hidden cursor-pointer"
+      @click="openLightbox('photo', 8)">
+      <Image v-if="galleryCountPhoto" :src="galleryCountPhoto" class="w-full h-full object-cover" width="auto"
+        height="auto" />
+      <div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
+        <Icon name="fa6-solid:image" :size="35" />
+        <span class="font-label-medium">รูปภาพ ({{ convertNumber(photos.length - 8) }})</span>
+      </div>
+    </div>
+
+    <!-- Row 2: photos[4..7] -->
+    <div v-for="(photo, i) in galleryRow2" :key="`g2-${i}`"
+      class="w-[132px] h-[132px] rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 4 + i)">
+      <Image :src="photo" class="w-full h-full object-cover" width="auto" height="auto" />
+    </div>
+
+    <!-- Row 2 col 5: video overlay -->
+    <div v-if="videos[0]" class="w-[132px] h-[132px] relative rounded-[8px] overflow-hidden cursor-pointer"
+      @click="openLightbox('video', 0)">
+      <Image :src="videos[0]" class="w-full h-full object-cover" width="auto" height="auto" />
+      <div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
+        <Icon name="fa6-solid:video" :size="35" />
+        <span class="font-label-medium">วิดีโอ ({{ videos.length }})</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- Lightbox modal -->
+  <ModalMediaView v-model="isMediaOpen" :items="mediaItems" :title="props.title" :start-index="mediaStartIndex" />
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+import { useConvert } from "../../composables/useConvert";
+const { convertNumber } = useConvert();
+const props = defineProps({
+  photos: { type: Array, required: false, default: () => [] },
+  videos: { type: Array, required: false, default: () => [] },
+  variant: { type: String, required: false, default: "featured" },
+  title: { type: String, required: false, default: "" }
+});
+const photos = computed(() => props.photos.filter(Boolean));
+const videos = computed(() => props.videos.filter(Boolean));
+const galleryRow1 = computed(() => photos.value.slice(0, 4));
+const galleryRow2 = computed(() => photos.value.slice(4, 8));
+const galleryCountPhoto = computed(
+  () => photos.value.length > 8 ? photos.value[8] ?? null : null
+);
+const isMediaOpen = ref(false);
+const mediaType = ref("photo");
+const mediaStartIndex = ref(0);
+const mediaItems = computed(() => mediaType.value === "photo" ? photos.value : videos.value);
+const openLightbox = (type, index) => {
+  mediaType.value = type;
+  mediaStartIndex.value = index;
+  isMediaOpen.value = true;
+};
+</script>

package/dist/runtime/components/display/display-image-place.vue.d.ts

@@ -1,3 +1,14 @@
-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>;
+type __VLS_Props = {
+    photos?: string[];
+    videos?: string[];
+    variant?: "featured" | "album";
+    title?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    variant: "featured" | "album";
+    photos: string[];
+    videos: string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/display/display-image-review.vue

@@ -1,17 +1,11 @@
 <template>
   <div class="inline-flex gap-[8px]">
-    <div
-      v-for="(img, i_img) in props.items?.slice(0, props.limit)"
-      :key="i_img"
-      class="relative cursor-pointer"
-      @click="emit('select', i_img)"
-    >
+    <div v-for="(img, i_img) in props.items?.slice(0, props.limit)" :key="i_img" class="relative cursor-pointer"
+      @click="emit('select', i_img)">
       <Image :src="img" :height="100" :width="100" class="rounded-[4px]" />
-      <div
-        v-if="props.limit === i_img + 1"
-        class="absolute top-0 left-0 right-0 bottom-0 bg-black/50 flex justify-center items-center text-white rounded-[4px]"
-      >
-        <div class="font-headline-medium">+{{ numberMore }}</div>
+      <div v-if="props.limit === i_img + 1"
+        class="absolute top-0 left-0 right-0 bottom-0 bg-black/50 flex justify-center items-center text-white rounded-[4px]">
+        <div class="font-headline-medium">+{{ convertNumber(numberMore ?? 0) }}</div>
       </div>
     </div>
   </div>
@@ -19,10 +13,12 @@
 
 <script setup>
 import { computed } from "vue";
+import { useConvert } from "../../composables/useConvert";
+const { convertNumber } = useConvert();
 const emit = defineEmits(["select"]);
 const props = defineProps({
   items: { type: Array, required: false },
-  limit: { type: Number, required: false, default: 7 }
+  limit: { type: Number, required: false, default: 6 }
 });
 const numberMore = computed(() => {
   return props.items && props.items.slice(props.limit).length;

package/dist/runtime/components/display/display-rating-summary.d.vue.ts

@@ -0,0 +1,17 @@
+export interface RatingDistribution {
+    stars: number;
+    count: number;
+}
+export interface DisplayRatingSummaryProps {
+    rating?: number | string;
+    totalReviews?: number | string;
+    distribution?: RatingDistribution[];
+    badge?: number;
+}
+declare const __VLS_export: import("vue").DefineComponent<DisplayRatingSummaryProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DisplayRatingSummaryProps> & Readonly<{}>, {
+    rating: number | string;
+    totalReviews: number | string;
+    distribution: RatingDistribution[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/display/display-rating-summary.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="flex gap-[24px] items-center">
+    <!-- Left: คะแนนรวม -->
+    <div class="flex flex-col items-center text-primary flex-shrink-0 w-[100px]">
+      <div class="text-[56px] font-bold leading-none">
+        {{ Number(props.rating).toFixed(1) }}
+      </div>
+      <div class="font-body-large mt-[4px]">
+        {{ convertNumber(Number(props.totalReviews)) }} รีวิว
+      </div>
+    </div>
+
+    <!-- Right: แถบการกระจายคะแนน -->
+    <div class="flex flex-col gap-[8px] flex-1">
+      <div v-for="(item, idx) in sortedDistribution" :key="item.stars" class="flex items-center gap-[12px]">
+        <!-- badge แสดงบน row แรก (5 ดาว) -->
+        <div class="relative flex-shrink-0">
+          <InputRating :size="16" readonly :model-value="item.stars" />
+          <div v-if="idx === 0 && props.badge != null"
+            class="absolute -top-[10px] -left-[10px] min-w-[22px] h-[22px] px-[4px] rounded-full bg-error flex items-center justify-center">
+            <span class="text-white text-[11px] font-bold leading-none">{{ props.badge }}</span>
+          </div>
+        </div>
+
+        <div class="flex-1 max-w-[260px]">
+          <ProgressBar :value="maxCount > 0 ? item.count / maxCount * 100 : 0" full-width :height="8"
+            color-active="#FBC02D" color-background="#E0E0E0" />
+        </div>
+
+        <div class="text-gray font-body-large w-[72px]">
+          {{ convertNumber(item.count) }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useConvert } from "../../composables/useConvert";
+const { convertNumber } = useConvert();
+const props = defineProps({
+  rating: { type: [Number, String], required: false, default: 0 },
+  totalReviews: { type: [Number, String], required: false, default: 0 },
+  distribution: { type: Array, required: false, default: () => [] },
+  badge: { type: Number, required: false }
+});
+const sortedDistribution = computed(
+  () => [...props.distribution].sort((a, b) => b.stars - a.stars)
+);
+const maxCount = computed(() => {
+  if (sortedDistribution.value.length === 0) return 1;
+  return Math.max(...sortedDistribution.value.map((item) => item.count));
+});
+</script>

package/dist/runtime/components/display/display-rating-summary.vue.d.ts

@@ -0,0 +1,17 @@
+export interface RatingDistribution {
+    stars: number;
+    count: number;
+}
+export interface DisplayRatingSummaryProps {
+    rating?: number | string;
+    totalReviews?: number | string;
+    distribution?: RatingDistribution[];
+    badge?: number;
+}
+declare const __VLS_export: import("vue").DefineComponent<DisplayRatingSummaryProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DisplayRatingSummaryProps> & Readonly<{}>, {
+    rating: number | string;
+    totalReviews: number | string;
+    distribution: RatingDistribution[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/image/image-cropper.d.vue.ts

@@ -64,12 +64,12 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     src: string;
     center: boolean;
-    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
+    modal: boolean;
     guides: boolean;
     highlight: boolean;
     background: boolean;

package/dist/runtime/components/image/image-cropper.vue.d.ts

@@ -64,12 +64,12 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     src: string;
     center: boolean;
-    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
+    modal: boolean;
     guides: boolean;
     highlight: boolean;
     background: boolean;

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

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

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

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

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

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     id: string;
     name: string;
-    disabledForgotPassword: boolean;
     new: boolean;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     id: string;
     name: string;
-    disabledForgotPassword: boolean;
     new: boolean;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -32,8 +32,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     size: number | string;
     disabled: boolean;
     items: import("@/types/components/input/input-radio").InputRadioItem[] | string[] | number[];
-    name: string;
     item: string | number;
+    name: string;
     columnGap: number | string;
     disabledErrorMessage: boolean;
     layout: "vertical" | "horizontal";

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

@@ -32,8 +32,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     size: number | string;
     disabled: boolean;
     items: import("@/types/components/input/input-radio").InputRadioItem[] | string[] | number[];
-    name: string;
     item: string | number;
+    name: string;
     columnGap: number | string;
     disabledErrorMessage: boolean;
     layout: "vertical" | "horizontal";

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

@@ -12,9 +12,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     label: string;
     color: InputSliderColor;
     fullWidth: boolean;
-    step: number;
     max: number;
     min: number;
+    step: number;
     lineHeight: number | string;
     appearance: boolean;
     thumbSize: number | string;

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

@@ -12,9 +12,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     label: string;
     color: InputSliderColor;
     fullWidth: boolean;
-    step: number;
     max: number;
     min: number;
+    step: number;
     lineHeight: number | string;
     appearance: boolean;
     thumbSize: number | string;

package/dist/runtime/components/modal/modal-media-view.d.vue.ts

@@ -0,0 +1,21 @@
+export interface ModalMediaViewProps {
+    items?: string[];
+    title?: string;
+    startIndex?: number;
+}
+type __VLS_Props = ModalMediaViewProps;
+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;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    title: string;
+    items: string[];
+    startIndex: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/modal/modal-media-view.vue

@@ -0,0 +1,23 @@
+<template>
+  <Modal v-model="isOpen" class="sm:max-w-[1280px]" disable-padding>
+    <template #header>
+      <ShadDialogTitle class="p-4">{{ props.title }}</ShadDialogTitle>
+    </template>
+    <div class="relative h-[824px] bg-black overflow-hidden">
+      <Carousel
+        :items="props.items"
+        :select-index="props.startIndex"
+        class="h-full"
+      />
+    </div>
+  </Modal>
+</template>
+
+<script setup>
+const props = defineProps({
+  items: { type: Array, required: false, default: () => [] },
+  title: { type: String, required: false, default: "" },
+  startIndex: { type: Number, required: false, default: 0 }
+});
+const isOpen = defineModel({ type: Boolean, ...{ default: false } });
+</script>

package/dist/runtime/components/modal/modal-media-view.vue.d.ts

@@ -0,0 +1,21 @@
+export interface ModalMediaViewProps {
+    items?: string[];
+    title?: string;
+    startIndex?: number;
+}
+type __VLS_Props = ModalMediaViewProps;
+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;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    title: string;
+    items: string[];
+    startIndex: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/modal/modal-password-confirmed.d.vue.ts

@@ -24,8 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     }) => any) | undefined;
 }>, {
     title: string;
-    confirmText: string;
     disabledForgotPassword: boolean;
+    confirmText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-confirmed.vue.d.ts

@@ -24,8 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     }) => any) | undefined;
 }>, {
     title: string;
-    confirmText: string;
     disabledForgotPassword: boolean;
+    confirmText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-verify.d.vue.ts

@@ -28,8 +28,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     title: string;
     mode: "login" | "secure";
-    confirmText: string;
     disabledForgotPassword: boolean;
+    confirmText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-verify.vue.d.ts

@@ -28,8 +28,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     title: string;
     mode: "login" | "secure";
-    confirmText: string;
     disabledForgotPassword: boolean;
+    confirmText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -8,6 +8,7 @@ export interface ModalProps {
     loading?: boolean;
     loadingText?: string;
     contentMaxHeight?: number;
+    disablePadding?: boolean;
 }
 type __VLS_Props = ModalProps;
 type __VLS_ModelProps = {
@@ -42,6 +43,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }>, {
     loading: boolean;
     disabledCloseBtn: boolean;
+    disablePadding: boolean;
 }, {}, {}, {}, 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/modal/modal.vue

@@ -3,19 +3,20 @@
     <ShadDialogContent
       :class="props.class"
       :disabled-close-btn="props.disabledCloseBtn"
+      :no-padding="props.disablePadding"
       v-slot="{ meta }"
       @submit="onSubmit"
       @close="onClose"
     >
       <Loading :loading="props.loading" :text="props.loadingText" />
-      <ShadDialogHeader>
+      <ShadDialogHeader :class="props.disablePadding ? 'bg-background' : ''">
         <slot name="header">
           <ShadDialogTitle>
             <slot name="title">
               {{ props.title }}
             </slot>
           </ShadDialogTitle>
-          <ShadDialogDescription>
+          <ShadDialogDescription v-if="props.description || $slots.description">
             <slot name="description">
               {{ props.description }}
             </slot>
@@ -30,7 +31,7 @@
       >
         <slot name="default" :meta="meta" />
       </div>
-      <ShadDialogFooter>
+      <ShadDialogFooter v-if="$slots.footer">
         <slot name="footer" :meta="meta" />
       </ShadDialogFooter>
     </ShadDialogContent>
@@ -47,7 +48,8 @@ const props = defineProps({
   disabledCloseBtn: { type: Boolean, required: false, default: false },
   loading: { type: Boolean, required: false, default: false },
   loadingText: { type: String, required: false },
-  contentMaxHeight: { type: Number, required: false }
+  contentMaxHeight: { type: Number, required: false },
+  disablePadding: { type: Boolean, required: false, default: false }
 });
 const isOpen = defineModel({ type: Boolean, ...{
   default: false

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

@@ -8,6 +8,7 @@ export interface ModalProps {
     loading?: boolean;
     loadingText?: string;
     contentMaxHeight?: number;
+    disablePadding?: boolean;
 }
 type __VLS_Props = ModalProps;
 type __VLS_ModelProps = {
@@ -42,6 +43,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }>, {
     loading: boolean;
     disabledCloseBtn: boolean;
+    disablePadding: boolean;
 }, {}, {}, {}, 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/carousel/CarouselContent.vue

@@ -14,7 +14,7 @@ const { carouselRef, orientation } = useCarousel();
   <div
     ref="carouselRef"
     data-slot="carousel-content"
-    class="overflow-hidden"
+    :class="cn('overflow-hidden', props.class)"
   >
     <div
       :class="

package/dist/runtime/components/ui/carousel/CarouselNext.vue

@@ -3,7 +3,7 @@ import { cn } from "@/runtime/plugins/shadcn";
 import { Button } from "@/runtime/components/ui/button";
 import { useCarousel } from "./useCarousel";
 const props = defineProps({
-  variant: { type: null, required: false, default: "outline" },
+  variant: { type: null, required: false, default: "ghost" },
   size: { type: null, required: false, default: "icon" },
   class: { type: null, required: false }
 });
@@ -16,7 +16,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel();
     :disabled="!canScrollNext"
     :class="
   cn(
-    'absolute size-8 rounded-full bg-white text-primary shadow-lg',
+    'absolute size-8 rounded-full bg-dark text-white flex items-center justify-center shrink-0 border-0',
     orientation === 'horizontal' ? 'top-1/2 -right-12 -translate-y-1/2' : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
     props.class
   )
@@ -26,7 +26,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel();
     @click="scrollNext"
   >
     <slot>
-      <Icon name="lucide:chevron-right" />
+      <Icon name="lucide:chevron-right" class="text-white size-5" />
       <span class="sr-only">Next Slide</span>
     </slot>
   </Button>

package/dist/runtime/components/ui/carousel/CarouselPrevious.vue

@@ -3,7 +3,7 @@ import { cn } from "@/runtime/plugins/shadcn";
 import { Button } from "@/runtime/components/ui/button";
 import { useCarousel } from "./useCarousel";
 const props = defineProps({
-  variant: { type: null, required: false, default: "outline" },
+  variant: { type: null, required: false, default: "ghost" },
   size: { type: null, required: false, default: "icon" },
   class: { type: null, required: false }
 });
@@ -16,7 +16,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel();
     :disabled="!canScrollPrev"
     :class="
   cn(
-    'absolute size-8 rounded-full bg-white text-primary shadow-lg',
+    'absolute size-8 rounded-full bg-dark text-white flex items-center justify-center shrink-0 border-0',
     orientation === 'horizontal' ? 'top-1/2 -left-12 -translate-y-1/2' : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
     props.class
   )
@@ -26,7 +26,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel();
     @click="scrollPrev"
   >
     <slot>
-      <Icon name="lucide:chevron-left" />
+      <Icon name="lucide:chevron-left" class="text-white size-5" />
       <span class="sr-only">Previous Slide</span>
     </slot>
   </Button>

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

@@ -3,6 +3,7 @@ import type { HTMLAttributes } from "vue";
 type __VLS_Props = DialogContentProps & {
     class?: HTMLAttributes["class"];
     disabledCloseBtn?: boolean;
+    noPadding?: boolean;
 };
 declare var __VLS_30: {
     meta: any;
@@ -30,6 +31,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     onCloseAutoFocus?: ((event: Event) => any) | undefined;
 }>, {
     disabledCloseBtn: boolean;
+    noPadding: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;