pukaad-ui-lib 1.331.0 → 1.333.0

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

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

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

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

package/dist/runtime/components/input/input-date-picker.d.vue.ts

@@ -44,9 +44,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
+    locale: string;
     placeholder: string;
     disabledErrorMessage: boolean;
-    locale: string;
     layout: "month-and-year" | "month-only" | "year-only";
     dateFormat: string;
     showTime: boolean;

package/dist/runtime/components/input/input-date-picker.vue.d.ts

@@ -44,9 +44,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
+    locale: string;
     placeholder: string;
     disabledErrorMessage: boolean;
-    locale: string;
     layout: "month-and-year" | "month-only" | "year-only";
     dateFormat: string;
     showTime: 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;
     showCounter: boolean;
     addLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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;
     showCounter: boolean;
     addLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,10 +1,10 @@
 <template>
-  <!-- v-html เพื่อหลีกเลี่ยง Vue patch SVG attributes เป็น DOM property (read-only getter bug) -->
-  <div
-    class="inline-flex items-center gap-0"
-    v-html="starsHtml"
-    @click="handleClick"
-  />
+  <!-- v-html เพื่อหลีกเลี่ยง Vue patch SVG attributes เป็น DOM property (read-only getter bug) -->
+  <div
+    class="inline-flex items-center gap-0"
+    v-html="starsHtml"
+    @click="handleClick"
+  />
 </template>
 
 <script setup>

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

@@ -20,12 +20,12 @@ 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;
-    labelKey: string;
     descriptionKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -20,12 +20,12 @@ 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;
-    labelKey: string;
     descriptionKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

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

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

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

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

@@ -46,12 +46,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     resize: "none" | "both" | "horizontal" | "vertical";
     fullHeight: boolean;
     fullWidth: boolean;
+    rows: number;
     limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
     readonly: boolean;
-    rows: number;
     heightScroll: boolean;
     spaceToComma: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -46,12 +46,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     resize: "none" | "both" | "horizontal" | "vertical";
     fullHeight: boolean;
     fullWidth: boolean;
+    rows: number;
     limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
     readonly: boolean;
-    rows: number;
     heightScroll: boolean;
     spaceToComma: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,140 +1,140 @@
 <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"
-        @update:current-index="currentIndex = $event"
-      />
-
-      <!-- description overlay (แสดงเฉพาะเมื่อ item ปัจจุบันมี description และไม่มี review) -->
-      <div
-        v-if="!props.review && currentItem?.description"
-        class="absolute bottom-0 w-full z-10"
-        style="background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);"
-      >
-        <div class="p-[16px] flex flex-col gap-[4px] text-white font-body-large">
-          <div class="font-body-large-prominent">ผู้ดูแลระบบ</div>
-          <div>{{ currentItem.description }}</div>
-        </div>
-      </div>
-
-      <!-- Review info overlay (แสดงเมื่อมีข้อมูล review) -->
-      <div
-        v-if="props.review"
-        class="absolute bottom-0 w-full z-10"
-        style="background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);"
-      >
-        <div class="flex flex-col w-full">
-          <div
-            v-if="!showMoreDescription"
-            class="flex gap-[16px] p-[16px] w-full text-white"
-          >
-            <Avatar
-              :src="props.review.user?.avatar"
-              :alt="props.review.user?.name"
-              :size="36"
-              class="shrink-0"
-            />
-            <div class="flex flex-col gap-[8px] w-full">
-              <div class="flex flex-col gap-[8px]">
-                <div class="flex justify-between w-full">
-                  <span class="font-body-large">
-                    {{ props.review.user?.name }}
-                  </span>
-                  <Icon name="lucide:flag" />
-                </div>
-                <div class="flex flex-col">
-                  <span class="font-body-small">
-                    {{ convertNumber(props.review.user?.review_count ?? 0) }}
-                    รีวิว •
-                    {{ convertNumber(props.review.user?.like_count ?? 0) }}
-                    ชื่นชอบรีวิว
-                  </span>
-                  <div
-                    v-if="props.review.review"
-                    class="flex items-center gap-[8px]"
-                  >
-                    <InputRating
-                      :size="14"
-                      readonly
-                      :model-value="props.review.review.rating"
-                    />
-                    <span class="font-body-small opacity-75">
-                      {{ convertDateTorelativeText(props.review.review.created_at ?? "") }}
-                    </span>
-                  </div>
-                </div>
-              </div>
-              <p
-                v-if="props.review.review?.description"
-                class="font-body-large line-clamp-1 cursor-pointer"
-                @click="showMoreDescription = true"
-              >
-                {{ props.review.review.description }}
-              </p>
-            </div>
-          </div>
-          <div
-            v-if="showMoreDescription"
-            class="flex gap-[16px] bg-white rounded-t-[16px] w-full p-[16px] max-h-[322px]"
-          >
-            <Avatar
-              :src="props.review.user?.avatar"
-              :alt="props.review.user?.name"
-              :size="36"
-              class="shrink-0"
-            />
-            <div class="flex flex-col gap-[8px] w-full">
-              <div class="flex flex-col gap-[8px]">
-                <div class="flex justify-between w-full">
-                  <span class="font-body-large">
-                    {{ props.review.user?.name }}
-                  </span>
-                  <Icon
-                    name="lucide:x"
-                    class="cursor-pointer"
-                    @click="showMoreDescription = false"
-                  />
-                </div>
-                <div class="flex flex-col">
-                  <span class="font-body-small">
-                    {{ convertNumber(props.review.user?.review_count ?? 0) }}
-                    รีวิว •
-                    {{ convertNumber(props.review.user?.like_count ?? 0) }}
-                    ชื่นชอบรีวิว
-                  </span>
-                  <div
-                    v-if="props.review.review"
-                    class="flex items-center gap-[8px]"
-                  >
-                    <InputRating
-                      :size="14"
-                      readonly
-                      :model-value="props.review.review.rating"
-                    />
-                    <span class="font-body-small opacity-75">
-                      {{ convertDateTorelativeText(props.review.review.created_at ?? "") }}
-                    </span>
-                  </div>
-                </div>
-              </div>
-              <p
-                v-if="props.review.review?.description"
-                class="font-body-large max-h-[280px] overflow-y-auto"
-              >
-                {{ props.review.review.description }}
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </Modal>
+  <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"
+        @update:current-index="currentIndex = $event"
+      />
+
+      <!-- description overlay (แสดงเฉพาะเมื่อ item ปัจจุบันมี description และไม่มี review) -->
+      <div
+        v-if="!props.review && currentItem?.description"
+        class="absolute bottom-0 w-full z-10"
+        style="background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);"
+      >
+        <div class="p-[16px] flex flex-col gap-[4px] text-white font-body-large">
+          <div class="font-body-large-prominent">ผู้ดูแลระบบ</div>
+          <div>{{ currentItem.description }}</div>
+        </div>
+      </div>
+
+      <!-- Review info overlay (แสดงเมื่อมีข้อมูล review) -->
+      <div
+        v-if="props.review"
+        class="absolute bottom-0 w-full z-10"
+        style="background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);"
+      >
+        <div class="flex flex-col w-full">
+          <div
+            v-if="!showMoreDescription"
+            class="flex gap-[16px] p-[16px] w-full text-white"
+          >
+            <Avatar
+              :src="props.review.user?.avatar"
+              :alt="props.review.user?.name"
+              :size="36"
+              class="shrink-0"
+            />
+            <div class="flex flex-col gap-[8px] w-full">
+              <div class="flex flex-col gap-[8px]">
+                <div class="flex justify-between w-full">
+                  <span class="font-body-large">
+                    {{ props.review.user?.name }}
+                  </span>
+                  <Icon name="lucide:flag" />
+                </div>
+                <div class="flex flex-col">
+                  <span class="font-body-small">
+                    {{ convertNumber(props.review.user?.review_count ?? 0) }}
+                    รีวิว •
+                    {{ convertNumber(props.review.user?.like_count ?? 0) }}
+                    ชื่นชอบรีวิว
+                  </span>
+                  <div
+                    v-if="props.review.review"
+                    class="flex items-center gap-[8px]"
+                  >
+                    <InputRating
+                      :size="14"
+                      readonly
+                      :model-value="props.review.review.rating"
+                    />
+                    <span class="font-body-small opacity-75">
+                      {{ convertDateTorelativeText(props.review.review.created_at ?? "") }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <p
+                v-if="props.review.review?.description"
+                class="font-body-large line-clamp-1 cursor-pointer"
+                @click="showMoreDescription = true"
+              >
+                {{ props.review.review.description }}
+              </p>
+            </div>
+          </div>
+          <div
+            v-if="showMoreDescription"
+            class="flex gap-[16px] bg-white rounded-t-[16px] w-full p-[16px] max-h-[322px]"
+          >
+            <Avatar
+              :src="props.review.user?.avatar"
+              :alt="props.review.user?.name"
+              :size="36"
+              class="shrink-0"
+            />
+            <div class="flex flex-col gap-[8px] w-full">
+              <div class="flex flex-col gap-[8px]">
+                <div class="flex justify-between w-full">
+                  <span class="font-body-large">
+                    {{ props.review.user?.name }}
+                  </span>
+                  <Icon
+                    name="lucide:x"
+                    class="cursor-pointer"
+                    @click="showMoreDescription = false"
+                  />
+                </div>
+                <div class="flex flex-col">
+                  <span class="font-body-small">
+                    {{ convertNumber(props.review.user?.review_count ?? 0) }}
+                    รีวิว •
+                    {{ convertNumber(props.review.user?.like_count ?? 0) }}
+                    ชื่นชอบรีวิว
+                  </span>
+                  <div
+                    v-if="props.review.review"
+                    class="flex items-center gap-[8px]"
+                  >
+                    <InputRating
+                      :size="14"
+                      readonly
+                      :model-value="props.review.review.rating"
+                    />
+                    <span class="font-body-small opacity-75">
+                      {{ convertDateTorelativeText(props.review.review.created_at ?? "") }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <p
+                v-if="props.review.review?.description"
+                class="font-body-large max-h-[280px] overflow-y-auto"
+              >
+                {{ props.review.review.description }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Modal>
 </template>
 
 <script setup>

package/dist/runtime/components/ui/alert-dialog/AlertDialog.vue

@@ -2,7 +2,8 @@
 import { AlertDialogRoot, useForwardPropsEmits } from "reka-ui";
 const props = defineProps({
   open: { type: Boolean, required: false },
-  defaultOpen: { type: Boolean, required: false }
+  defaultOpen: { type: Boolean, required: false },
+  unmountOnHide: { type: Boolean, required: false }
 });
 const emits = defineEmits(["update:open"]);
 const forwarded = useForwardPropsEmits(props, emits);

package/dist/runtime/components/ui/calendar/Calendar.d.vue.ts

@@ -30,7 +30,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:modelValue"?: ((date: DateValue | undefined) => any) | undefined;
     "onUpdate:placeholder"?: ((date: DateValue) => any) | undefined;
 }>, {
-    modelValue: DateValue | DateValue[];
+    modelValue: DateValue | DateValue[] | null;
     layout: "month-and-year" | "month-only" | "year-only";
     reverseYears: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/ui/calendar/Calendar.vue.d.ts

@@ -30,7 +30,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:modelValue"?: ((date: DateValue | undefined) => any) | undefined;
     "onUpdate:placeholder"?: ((date: DateValue) => any) | undefined;
 }>, {
-    modelValue: DateValue | DateValue[];
+    modelValue: DateValue | DateValue[] | null;
     layout: "month-and-year" | "month-only" | "year-only";
     reverseYears: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -0,0 +1,25 @@
+import type { HTMLAttributes } from "vue";
+import type { ChartConfig } from ".";
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    id?: HTMLAttributes["id"];
+    class?: HTMLAttributes["class"];
+    config: ChartConfig;
+    cursor?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    id?: HTMLAttributes["id"];
+    class?: HTMLAttributes["class"];
+    config: ChartConfig;
+    cursor?: boolean;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default: {
+        id: string;
+        config: ChartConfig;
+    };
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/chart/ChartContainer.vue

@@ -0,0 +1,49 @@
+<script>
+import { useId } from "reka-ui";
+import { computed, toRefs } from "vue";
+import { cn } from "#pukaad-ui/runtime/plugins/shadcn";
+import { provideChartContext } from ".";
+import ChartStyle from "./ChartStyle.vue";
+</script>
+
+<script setup>
+const props = defineProps({
+  id: { type: null, required: false },
+  class: { type: null, required: false },
+  config: { type: null, required: true },
+  cursor: { type: Boolean, required: false }
+});
+defineSlots();
+const { config } = toRefs(props);
+const uniqueId = useId();
+const chartId = computed(() => `chart-${props.id || uniqueId.replace(/:/g, "")}`);
+provideChartContext({
+  id: uniqueId,
+  config
+});
+</script>
+
+<template>
+  <div
+    data-slot="chart"
+    :data-chart="chartId"
+    :class="cn(
+  `[&_.tick_text]:!fill-muted-foreground [&_.tick_line]:!stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex flex-col aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden [&_[data-vis-xy-container]]:h-full [&_[data-vis-single-container]]:h-full h-full [&_[data-vis-xy-container]]:w-full [&_[data-vis-single-container]]:w-full w-full `,
+  props.class
+)"
+    :style="{
+  '--vis-tooltip-padding': '0px',
+  '--vis-tooltip-background-color': 'transparent',
+  '--vis-tooltip-border-color': 'transparent',
+  '--vis-tooltip-text-color': 'none',
+  '--vis-tooltip-shadow-color': 'none',
+  '--vis-tooltip-backdrop-filter': 'none',
+  '--vis-crosshair-circle-stroke-color': '#0000',
+  '--vis-crosshair-line-stroke-width': cursor ? '1px' : '0px',
+  '--vis-font-family': 'var(--font-sans)'
+}"
+  >
+    <slot :id="uniqueId" :config="config" />
+    <ChartStyle :id="chartId" />
+  </div>
+</template>

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

@@ -0,0 +1,25 @@
+import type { HTMLAttributes } from "vue";
+import type { ChartConfig } from ".";
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    id?: HTMLAttributes["id"];
+    class?: HTMLAttributes["class"];
+    config: ChartConfig;
+    cursor?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    id?: HTMLAttributes["id"];
+    class?: HTMLAttributes["class"];
+    config: ChartConfig;
+    cursor?: boolean;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default: {
+        id: string;
+        config: ChartConfig;
+    };
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from "vue";
+type __VLS_Props = {
+    hideIcon?: boolean;
+    nameKey?: string;
+    verticalAlign?: "bottom" | "top";
+    class?: HTMLAttributes["class"];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    verticalAlign: "bottom" | "top";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/chart/ChartLegendContent.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { cn } from "#pukaad-ui/runtime/plugins/shadcn";
+import { useChart } from ".";
+const props = defineProps({
+  hideIcon: { type: Boolean, required: false },
+  nameKey: { type: String, required: false },
+  verticalAlign: { type: String, required: false, default: "bottom" },
+  class: { type: null, required: false }
+});
+const { id, config } = useChart();
+const payload = computed(() => Object.entries(config.value).map(([key, value]) => {
+  return {
+    key: props.nameKey || key,
+    itemConfig: value
+  };
+}));
+const containerSelector = ref("");
+onMounted(() => {
+  containerSelector.value = `[data-chart="chart-${id}"]>[data-vis-xy-container]`;
+});
+</script>
+
+<template>
+  <div
+    v-if="containerSelector"
+    :class="cn(
+  'flex items-center justify-center gap-4',
+  verticalAlign === 'top' ? 'pb-3' : 'pt-3',
+  props.class
+)"
+  >
+    <div
+      v-for="{ key, itemConfig } in payload"
+      :key="key"
+      :class="cn(
+  '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3'
+)"
+    >
+      <component :is="itemConfig.icon" v-if="itemConfig.icon" />
+      <div
+        v-else
+        class="h-2 w-2 shrink-0 rounded-xs"
+        :style="{
+  backgroundColor: itemConfig?.color
+}"
+      />
+
+      {{ itemConfig.label }}
+    </div>
+  </div>
+</template>