pukaad-ui-lib 1.4.2 → 1.5.0

package/dist/module.json

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

package/dist/module.mjs

@@ -3,7 +3,7 @@ import tailwindcss from '@tailwindcss/vite';
 
 const module$1 = defineNuxtModule({
   meta: {
-    name: "pukaad-ui",
+    name: "pukaad-ui-lib",
     configKey: "pukaadUI"
   },
   defaults: {},

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

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from "vue";
 export type ButtonType = "button" | "submit" | "reset";
-export type ButtonVariant = "default" | "outline" | "ghost" | "link";
+export type ButtonVariant = "default" | "outline" | "ghost" | "link" | "text";
 export type ButtonColor = "default" | "primary" | "secondary" | "destructive";
 export interface ButtonProps {
     type?: ButtonType;

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

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from "vue";
 export type ButtonType = "button" | "submit" | "reset";
-export type ButtonVariant = "default" | "outline" | "ghost" | "link";
+export type ButtonVariant = "default" | "outline" | "ghost" | "link" | "text";
 export type ButtonColor = "default" | "primary" | "secondary" | "destructive";
 export interface ButtonProps {
     type?: ButtonType;

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

@@ -12,12 +12,13 @@
         </template>
       </InputTextField>
     </ShadPopoverAnchor>
-    <ShadPopoverContent @openAutoFocus.prevent @closeAutoFocus.prevent align="start">
+    <ShadPopoverContent @openAutoFocus.prevent @closeAutoFocus.prevent align="start"
+      class="max-h-[312px] overflow-auto">
       <div v-if="filteredOptions.length === 0" class="flex flex-col gap-[8px] items-center justify-center h-[192px]">
         <Icon name="pukaad:page-not-found" class="w-[77px] h-[64px]" />
         <div class="font-body-medium text-center text-gray">ไม่พบข้อมูล</div>
       </div>
-      <div v-else class="max-h-[312px] ">
+      <div v-else>
         <div v-for="option in filteredOptions" :key="option.value"
           class="cursor-pointer hover:bg-smoke flex items-center gap-[8px] px-[8px] py-[6px]"
           @mousedown.prevent="selectOption(option)">

package/dist/runtime/components/input/input-select-province.d.vue.ts

@@ -1,3 +1,10 @@
-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_ModelProps = {
+    modelValue?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/input-select-province.vue

@@ -1,4 +1,104 @@
-<template>
-  <div>dwdw</div>
-</template>
-<script setup lang="ts"></script>
+<template>
+  <ShadPopover v-model:open="open">
+    <ShadPopoverTrigger as-child>
+      <div class="flex items-center gap-[8px] cursor-pointer w-fit">
+        <div>{{ selectedLabel || "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E08\u0E31\u0E07\u0E2B\u0E27\u0E31\u0E14" }}</div>
+        <Icon name="lucide:chevron-down" />
+      </div>
+    </ShadPopoverTrigger>
+    <ShadPopoverContent class="flex p-[24px] w-[425px]">
+      <ShadCommand>
+        <div class="space-y-[22px]">
+          <div class="font-title-medium-prominent">เลือกจังหวัด</div>
+          <div class="flex flex-col gap-[16px]">
+            <InputTextField placeholder="ค้นหาจังหวัด..." v-model="search">
+              <template #append>
+                <Icon name="lucide:search" />
+              </template>
+            </InputTextField>
+            <ShadCommandList>
+              <div class="flex flex-col gap-[16px]">
+                <div class="flex flex-col gap-[8px]">
+                  <div>ปลายทางยอดนิยม</div>
+                  <ShadCarousel>
+                    <ShadCarouselContent>
+                      <ShadCarouselItem
+                        v-for="province in provinces"
+                        :key="province.value"
+                        @select="selectProvince(province.value)"
+                      >
+                        <img
+                          :src="
+  province.image_cover_url || 'https://placehold.co/292x164?text=Place+Photo'
+"
+                        />
+                        <div>{{ province.label }}</div>
+                      </ShadCarouselItem>
+                    </ShadCarouselContent>
+                  </ShadCarousel>
+                </div>
+                <ShadCommandGroup>
+                  <ShadCommandItem
+                    v-for="province in provinces"
+                    :key="province.value"
+                    :value="province.label"
+                    @select="selectProvince(province.value)"
+                    class="flex items-center justify-between"
+                  >
+                    <span>
+                      {{ province.label }}
+                    </span>
+                    <Icon
+                      v-if="modelValue === province.value"
+                      name="lucide:check"
+                      class="h-4 w-4"
+                    />
+                  </ShadCommandItem>
+                </ShadCommandGroup>
+              </div>
+              <ShadCommandEmpty />
+            </ShadCommandList>
+          </div>
+        </div>
+      </ShadCommand>
+    </ShadPopoverContent>
+  </ShadPopover>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import { useFetch, useNuxtApp, useRuntimeConfig } from "nuxt/app";
+const { BASE_URL_API } = useRuntimeConfig().public;
+const modelValue = defineModel({ type: String });
+const open = ref(false);
+const search = ref("");
+const provinces = ref([]);
+const fetchProvinces = async () => {
+  try {
+    const response = await $fetch(
+      `${BASE_URL_API}/api/master/address/provinces`
+    );
+    const data = response.data ?? response;
+    if (data && Array.isArray(data)) {
+      provinces.value = data.map((p) => ({
+        value: String(p.id),
+        label: p.name_th,
+        image_cover_url: p.image_cover_url ?? ""
+      }));
+    }
+  } catch (error) {
+    console.error("Failed to fetch provinces:", error);
+  }
+};
+const selectedLabel = computed(() => {
+  const found = provinces.value.find((p) => p.value === modelValue.value);
+  return found?.label || "";
+});
+const selectProvince = (value) => {
+  modelValue.value = value;
+  open.value = false;
+};
+onMounted(() => {
+  fetchProvinces();
+});
+</script>

package/dist/runtime/components/input/input-select-province.vue.d.ts

@@ -1,3 +1,10 @@
-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_ModelProps = {
+    modelValue?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/ui/button/index.d.ts

@@ -1,7 +1,7 @@
 import type { VariantProps } from "class-variance-authority";
 export { default as Button } from "./Button.vue.js";
 export declare const buttonVariants: (props?: ({
-    variant?: "default" | "outline" | "ghost" | "link" | null | undefined;
+    variant?: "default" | "outline" | "ghost" | "link" | "text" | null | undefined;
     color?: "default" | "primary" | "secondary" | "destructive" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

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

@@ -1,14 +1,15 @@
 import { cva } from "class-variance-authority";
 export { default as Button } from "./Button.vue";
 export const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
         default: "shadow-sm",
         outline: "shadow-sm",
         ghost: "",
-        link: "underline-offset-4 hover:underline"
+        link: "underline-offset-4 hover:underline",
+        text: ""
       },
       color: {
         default: "text-foreground",
@@ -85,6 +86,27 @@ export const buttonVariants = cva(
         variant: "ghost",
         color: "destructive",
         class: "text-destructive hover:bg-destructive/90 hover:text-destructive-foreground"
+      },
+      // text variant - just plain text with color, no background or hover effects
+      {
+        variant: "text",
+        color: "default",
+        class: "text-foreground hover:opacity-80"
+      },
+      {
+        variant: "text",
+        color: "primary",
+        class: "text-primary hover:opacity-80"
+      },
+      {
+        variant: "text",
+        color: "secondary",
+        class: "text-secondary hover:opacity-80"
+      },
+      {
+        variant: "text",
+        color: "destructive",
+        class: "text-destructive hover:opacity-80"
       }
     ],
     defaultVariants: {

package/dist/runtime/components/ui/carousel/Carousel.d.vue.ts

@@ -0,0 +1,37 @@
+import type { CarouselProps, WithClassAsProps } from "./interface.js";
+type __VLS_Props = CarouselProps & WithClassAsProps;
+declare var __VLS_1: {
+    canScrollNext: any;
+    canScrollPrev: any;
+    carouselApi: any;
+    carouselRef: any;
+    orientation: any;
+    scrollNext: any;
+    scrollPrev: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    canScrollNext: import("vue").Ref<boolean, boolean>;
+    canScrollPrev: import("vue").Ref<boolean, boolean>;
+    carouselApi: import("vue").Ref<import("embla-carousel").EmblaCarouselType | undefined, import("embla-carousel").EmblaCarouselType | undefined>;
+    carouselRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    orientation: "vertical" | "horizontal" | undefined;
+    scrollNext: () => void;
+    scrollPrev: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "init-api": (payload: import("embla-carousel").EmblaCarouselType | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onInit-api"?: ((payload: import("embla-carousel").EmblaCarouselType | undefined) => any) | undefined;
+}>, {
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,47 @@
+<script setup>
+import { cn } from "@/runtime/plugins/shadcn";
+import { useProvideCarousel } from "./useCarousel";
+const props = defineProps({
+  opts: { type: null, required: false },
+  plugins: { type: null, required: false },
+  orientation: { type: String, required: false, default: "horizontal" },
+  class: { type: null, required: false }
+});
+const emits = defineEmits(["init-api"]);
+const { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits);
+defineExpose({
+  canScrollNext,
+  canScrollPrev,
+  carouselApi,
+  carouselRef,
+  orientation,
+  scrollNext,
+  scrollPrev
+});
+function onKeyDown(event) {
+  const prevKey = props.orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
+  const nextKey = props.orientation === "vertical" ? "ArrowDown" : "ArrowRight";
+  if (event.key === prevKey) {
+    event.preventDefault();
+    scrollPrev();
+    return;
+  }
+  if (event.key === nextKey) {
+    event.preventDefault();
+    scrollNext();
+  }
+}
+</script>
+
+<template>
+  <div
+    data-slot="carousel"
+    :class="cn('relative', props.class)"
+    role="region"
+    aria-roledescription="carousel"
+    tabindex="0"
+    @keydown="onKeyDown"
+  >
+    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />
+  </div>
+</template>

package/dist/runtime/components/ui/carousel/Carousel.vue.d.ts

@@ -0,0 +1,37 @@
+import type { CarouselProps, WithClassAsProps } from "./interface.js";
+type __VLS_Props = CarouselProps & WithClassAsProps;
+declare var __VLS_1: {
+    canScrollNext: any;
+    canScrollPrev: any;
+    carouselApi: any;
+    carouselRef: any;
+    orientation: any;
+    scrollNext: any;
+    scrollPrev: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    canScrollNext: import("vue").Ref<boolean, boolean>;
+    canScrollPrev: import("vue").Ref<boolean, boolean>;
+    carouselApi: import("vue").Ref<import("embla-carousel").EmblaCarouselType | undefined, import("embla-carousel").EmblaCarouselType | undefined>;
+    carouselRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    orientation: "vertical" | "horizontal" | undefined;
+    scrollNext: () => void;
+    scrollPrev: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "init-api": (payload: import("embla-carousel").EmblaCarouselType | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onInit-api"?: ((payload: import("embla-carousel").EmblaCarouselType | undefined) => any) | undefined;
+}>, {
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/carousel/CarouselContent.d.vue.ts

@@ -0,0 +1,14 @@
+import type { WithClassAsProps } from "./interface.js";
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<WithClassAsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<WithClassAsProps> & Readonly<{}>, {}, {}, {}, {}, 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,32 @@
+<script setup>
+import { cn } from "@/runtime/plugins/shadcn";
+import { useCarousel } from "./useCarousel";
+defineOptions({
+  inheritAttrs: false
+});
+const props = defineProps({
+  class: { type: null, required: false }
+});
+const { carouselRef, orientation } = useCarousel();
+</script>
+
+<template>
+  <div
+    ref="carouselRef"
+    data-slot="carousel-content"
+    class="overflow-hidden"
+  >
+    <div
+      :class="
+  cn(
+    'flex',
+    orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+    props.class
+  )
+"
+      v-bind="$attrs"
+    >
+      <slot />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/ui/carousel/CarouselContent.vue.d.ts

@@ -0,0 +1,14 @@
+import type { WithClassAsProps } from "./interface.js";
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<WithClassAsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<WithClassAsProps> & Readonly<{}>, {}, {}, {}, {}, 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/carousel/CarouselItem.d.vue.ts

@@ -0,0 +1,14 @@
+import type { WithClassAsProps } from "./interface.js";
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<WithClassAsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<WithClassAsProps> & Readonly<{}>, {}, {}, {}, {}, 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,23 @@
+<script setup>
+import { cn } from "@/runtime/plugins/shadcn";
+import { useCarousel } from "./useCarousel";
+const props = defineProps({
+  class: { type: null, required: false }
+});
+const { orientation } = useCarousel();
+</script>
+
+<template>
+  <div
+    data-slot="carousel-item"
+    role="group"
+    aria-roledescription="slide"
+    :class="cn(
+  'min-w-0 shrink-0 grow-0 basis-full',
+  orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+  props.class
+)"
+  >
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/ui/carousel/CarouselItem.vue.d.ts

@@ -0,0 +1,14 @@
+import type { WithClassAsProps } from "./interface.js";
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<WithClassAsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<WithClassAsProps> & Readonly<{}>, {}, {}, {}, {}, 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,22 @@
+import type { WithClassAsProps } from "./interface.js";
+import type { ButtonVariants } from "@/runtime/components/ui/button";
+type __VLS_Props = {
+    variant?: ButtonVariants["variant"];
+    size?: ButtonVariants["size"];
+} & WithClassAsProps;
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    variant: "default" | "outline" | "ghost" | "link" | "text" | null;
+    size: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null;
+}, {}, {}, {}, 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,33 @@
+<script setup>
+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" },
+  size: { type: null, required: false, default: "icon" },
+  class: { type: null, required: false }
+});
+const { orientation, canScrollNext, scrollNext } = useCarousel();
+</script>
+
+<template>
+  <Button
+    data-slot="carousel-next"
+    :disabled="!canScrollNext"
+    :class="
+  cn(
+    'absolute size-8 rounded-full',
+    orientation === 'horizontal' ? 'top-1/2 -right-12 -translate-y-1/2' : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+    props.class
+  )
+"
+    :variant="variant"
+    :size="size"
+    @click="scrollNext"
+  >
+    <slot>
+      <Icon name="lucide:chevron-right" />
+      <span class="sr-only">Next Slide</span>
+    </slot>
+  </Button>
+</template>

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

@@ -0,0 +1,22 @@
+import type { WithClassAsProps } from "./interface.js";
+import type { ButtonVariants } from "@/runtime/components/ui/button";
+type __VLS_Props = {
+    variant?: ButtonVariants["variant"];
+    size?: ButtonVariants["size"];
+} & WithClassAsProps;
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    variant: "default" | "outline" | "ghost" | "link" | "text" | null;
+    size: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null;
+}, {}, {}, {}, 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,22 @@
+import type { WithClassAsProps } from "./interface.js";
+import type { ButtonVariants } from "@/runtime/components/ui/button";
+type __VLS_Props = {
+    variant?: ButtonVariants["variant"];
+    size?: ButtonVariants["size"];
+} & WithClassAsProps;
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    variant: "default" | "outline" | "ghost" | "link" | "text" | null;
+    size: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null;
+}, {}, {}, {}, 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,33 @@
+<script setup>
+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" },
+  size: { type: null, required: false, default: "icon" },
+  class: { type: null, required: false }
+});
+const { orientation, canScrollPrev, scrollPrev } = useCarousel();
+</script>
+
+<template>
+  <Button
+    data-slot="carousel-previous"
+    :disabled="!canScrollPrev"
+    :class="
+  cn(
+    'absolute size-8 rounded-full',
+    orientation === 'horizontal' ? 'top-1/2 -left-12 -translate-y-1/2' : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+    props.class
+  )
+"
+    :variant="variant"
+    :size="size"
+    @click="scrollPrev"
+  >
+    <slot>
+      <Icon name="lucide:chevron-left" />
+      <span class="sr-only">Previous Slide</span>
+    </slot>
+  </Button>
+</template>

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

@@ -0,0 +1,22 @@
+import type { WithClassAsProps } from "./interface.js";
+import type { ButtonVariants } from "@/runtime/components/ui/button";
+type __VLS_Props = {
+    variant?: ButtonVariants["variant"];
+    size?: ButtonVariants["size"];
+} & WithClassAsProps;
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    variant: "default" | "outline" | "ghost" | "link" | "text" | null;
+    size: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null;
+}, {}, {}, {}, 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/carousel/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Carousel } from "./Carousel.vue.js";
+export { default as CarouselContent } from "./CarouselContent.vue.js";
+export { default as CarouselItem } from "./CarouselItem.vue.js";
+export { default as CarouselNext } from "./CarouselNext.vue.js";
+export { default as CarouselPrevious } from "./CarouselPrevious.vue.js";
+export type { UnwrapRefCarouselApi as CarouselApi, } from "./interface.js";
+export { useCarousel } from "./useCarousel.js";

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

@@ -0,0 +1,6 @@
+export { default as Carousel } from "./Carousel.vue";
+export { default as CarouselContent } from "./CarouselContent.vue";
+export { default as CarouselItem } from "./CarouselItem.vue";
+export { default as CarouselNext } from "./CarouselNext.vue";
+export { default as CarouselPrevious } from "./CarouselPrevious.vue";
+export { useCarousel } from "./useCarousel.js";

package/dist/runtime/components/ui/carousel/interface.d.ts

@@ -0,0 +1,20 @@
+import type useEmblaCarousel from "embla-carousel-vue";
+import type { EmblaCarouselVueType } from "embla-carousel-vue";
+import type { HTMLAttributes, UnwrapRef } from "vue";
+type CarouselApi = EmblaCarouselVueType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+export type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>;
+export interface CarouselProps {
+    opts?: CarouselOptions;
+    plugins?: CarouselPlugin;
+    orientation?: "horizontal" | "vertical";
+}
+export interface CarouselEmits {
+    (e: "init-api", payload: UnwrapRefCarouselApi): void;
+}
+export interface WithClassAsProps {
+    class?: HTMLAttributes["class"];
+}
+export {};

package/dist/runtime/components/ui/carousel/useCarousel.d.ts

@@ -0,0 +1,20 @@
+import type { CarouselEmits, CarouselProps } from "./interface.js";
+declare const useProvideCarousel: (args_0: CarouselProps, emits: CarouselEmits) => {
+    carouselRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    carouselApi: import("vue").Ref<import("embla-carousel").EmblaCarouselType | undefined, import("embla-carousel").EmblaCarouselType | undefined>;
+    canScrollPrev: import("vue").Ref<boolean, boolean>;
+    canScrollNext: import("vue").Ref<boolean, boolean>;
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    orientation: "vertical" | "horizontal" | undefined;
+};
+declare function useCarousel(): {
+    carouselRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    carouselApi: import("vue").Ref<import("embla-carousel").EmblaCarouselType | undefined, import("embla-carousel").EmblaCarouselType | undefined>;
+    canScrollPrev: import("vue").Ref<boolean, boolean>;
+    canScrollNext: import("vue").Ref<boolean, boolean>;
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    orientation: "vertical" | "horizontal" | undefined;
+};
+export { useCarousel, useProvideCarousel };

package/dist/runtime/components/ui/carousel/useCarousel.js

@@ -0,0 +1,43 @@
+import { createInjectionState } from "@vueuse/core";
+import emblaCarouselVue from "embla-carousel-vue";
+import { onMounted, ref } from "vue";
+const [useProvideCarousel, useInjectCarousel] = createInjectionState(
+  ({
+    opts,
+    orientation,
+    plugins
+  }, emits) => {
+    const [emblaNode, emblaApi] = emblaCarouselVue({
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y"
+    }, plugins);
+    function scrollPrev() {
+      emblaApi.value?.scrollPrev();
+    }
+    function scrollNext() {
+      emblaApi.value?.scrollNext();
+    }
+    const canScrollNext = ref(false);
+    const canScrollPrev = ref(false);
+    function onSelect(api) {
+      canScrollNext.value = api?.canScrollNext() || false;
+      canScrollPrev.value = api?.canScrollPrev() || false;
+    }
+    onMounted(() => {
+      if (!emblaApi.value)
+        return;
+      emblaApi.value?.on("init", onSelect);
+      emblaApi.value?.on("reInit", onSelect);
+      emblaApi.value?.on("select", onSelect);
+      emits("init-api", emblaApi.value);
+    });
+    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation };
+  }
+);
+function useCarousel() {
+  const carouselState = useInjectCarousel();
+  if (!carouselState)
+    throw new Error("useCarousel must be used within a <Carousel />");
+  return carouselState;
+}
+export { useCarousel, useProvideCarousel };

package/dist/runtime/components/ui/command/CommandItem.vue

@@ -31,9 +31,11 @@ const isRender = computed(() => {
 const itemRef = ref();
 const currentElement = useCurrentElement(itemRef);
 onMounted(() => {
-  if (!(currentElement.value instanceof HTMLElement))
-    return;
-  allItems.value.set(id, currentElement.value.textContent ?? (props.value?.toString() ?? ""));
+  if (!(currentElement.value instanceof HTMLElement)) return;
+  allItems.value.set(
+    id,
+    currentElement.value.textContent ?? props.value?.toString() ?? ""
+  );
   const groupId = groupContext?.id;
   if (groupId) {
     if (!allGroups.value.has(groupId)) {
@@ -55,10 +57,17 @@ onUnmounted(() => {
     :id="id"
     ref="itemRef"
     data-slot="command-item"
-    :class="cn('data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
-    @select="() => {
-  filterState.search = '';
-}"
+    :class="
+  cn(
+    'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+    props.class
+  )
+"
+    @select="
+  () => {
+    filterState.search = '';
+  }
+"
   >
     <slot />
   </ListboxItem>

package/dist/runtime/components/ui/command/CommandList.vue

@@ -15,7 +15,12 @@ const forwarded = useForwardProps(delegatedProps);
   <ListboxContent
     data-slot="command-list"
     v-bind="forwarded"
-    :class="cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', props.class)"
+    :class="
+  cn(
+    'max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto',
+    props.class
+  )
+"
   >
     <div role="presentation">
       <slot />

package/dist/runtime/components/ui/input-group/InputGroupButton.d.vue.ts

@@ -4,7 +4,7 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<InputGroupButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InputGroupButtonProps> & Readonly<{}>, {
-    variant: "default" | "outline" | "ghost" | "link" | null;
+    variant: "default" | "outline" | "ghost" | "link" | "text" | null;
     size: "icon-xs" | "sm" | "icon-sm" | "xs" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/ui/input-group/InputGroupButton.vue.d.ts

@@ -4,7 +4,7 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<InputGroupButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InputGroupButtonProps> & Readonly<{}>, {
-    variant: "default" | "outline" | "ghost" | "link" | null;
+    variant: "default" | "outline" | "ghost" | "link" | "text" | null;
     size: "icon-xs" | "sm" | "icon-sm" | "xs" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,10 +1,6 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import {
-  PopoverContent,
-  PopoverPortal,
-  useForwardPropsEmits
-} from "reka-ui";
+import { PopoverContent, PopoverPortal, useForwardPropsEmits } from "reka-ui";
 import { cn } from "@/runtime/plugins/shadcn";
 defineOptions({
   inheritAttrs: false
@@ -40,12 +36,16 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
 <template>
   <PopoverPortal>
-    <PopoverContent data-slot="popover-content" v-bind="{ ...$attrs, ...forwarded }" :class="
+    <PopoverContent
+      data-slot="popover-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
   cn(
-    'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 rounded-md border shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden max-h-[312px] overflow-auto w-[var(--reka-popover-trigger-width)]',
+    'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 rounded-md border shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden w-[var(--reka-popover-trigger-width)]',
     props.class
   )
-">
+"
+    >
       <slot />
     </PopoverContent>
   </PopoverPortal>

package/dist/runtime/components/ui/separator/Separator.vue

@@ -13,14 +13,14 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <Separator
-    data-slot="separator"
-    v-bind="delegatedProps"
+  <Separator
+    data-slot="separator"
+    v-bind="delegatedProps"
     :class="
   cn(
     'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
     props.class
   )
-"
-  />
+"
+  />
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pukaad-ui-lib",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",
@@ -47,6 +47,7 @@
     "clsx": "^2.1.1",
     "cropperjs": "^1.6.2",
     "dayjs": "^1.11.13",
+    "embla-carousel-vue": "^8.6.0",
     "input-otp": "^1.4.2",
     "lodash": "^4.17.21",
     "nuxt": "^4.0.3",