pukaad-ui-lib 1.397.0 → 1.399.0

package/dist/module.json

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

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

@@ -2,7 +2,7 @@ import type { HTMLAttributes } from "vue";
 import type { ButtonVariants } from "./ui/button/index.js";
 export type ButtonType = "button" | "submit" | "reset";
 export type ButtonVariant = "default" | "outline" | "ghost" | "link" | "text" | "icon" | "glass";
-export type ButtonColor = "default" | "primary" | "secondary" | "destructive" | "info" | "warning" | "success";
+export type ButtonColor = "default" | "primary" | "secondary" | "destructive" | "info" | "warning" | "success" | "dark";
 export type ButtonSize = ButtonVariants["size"];
 export interface ButtonProps {
     type?: ButtonType;

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

@@ -2,7 +2,7 @@ import type { HTMLAttributes } from "vue";
 import type { ButtonVariants } from "./ui/button/index.js";
 export type ButtonType = "button" | "submit" | "reset";
 export type ButtonVariant = "default" | "outline" | "ghost" | "link" | "text" | "icon" | "glass";
-export type ButtonColor = "default" | "primary" | "secondary" | "destructive" | "info" | "warning" | "success";
+export type ButtonColor = "default" | "primary" | "secondary" | "destructive" | "info" | "warning" | "success" | "dark";
 export type ButtonSize = ButtonVariants["size"];
 export interface ButtonProps {
     type?: ButtonType;

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

@@ -0,0 +1,128 @@
+export interface DisplayVideoSource {
+    src: string;
+    type?: string;
+    media?: string;
+}
+export interface DisplayVideoTrack {
+    src: string;
+    kind?: "subtitles" | "captions" | "descriptions" | "chapters" | "metadata";
+    srclang?: string;
+    label?: string;
+    default?: boolean;
+}
+export interface DisplayVideoProps {
+    src?: string;
+    sources?: DisplayVideoSource[];
+    tracks?: DisplayVideoTrack[];
+    poster?: string;
+    width?: string | number;
+    height?: string | number;
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+    fit?: "cover" | "contain" | "fill" | "none" | "scale-down";
+    controls?: boolean;
+    autoplay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    playsinline?: boolean;
+    preload?: "none" | "metadata" | "auto";
+    crossorigin?: "anonymous" | "use-credentials";
+    controlsList?: string;
+    disablePictureInPicture?: boolean;
+    disableRemotePlayback?: boolean;
+    volume?: number;
+    playbackRate?: number;
+    startTime?: number;
+    fullscreenButton?: boolean;
+    interceptFullscreen?: boolean;
+    fullscreenHitClass?: string;
+    closeButton?: boolean;
+    playButton?: boolean;
+    playButtonAutoHide?: boolean;
+    playButtonHideDelay?: number;
+    clickToPlay?: boolean;
+    navButton?: boolean;
+}
+type DisplayVideoAction = {
+    video: HTMLVideoElement | null;
+    currentTime: number;
+    paused: boolean;
+};
+declare var __VLS_1: {
+    click: () => void;
+}, __VLS_16: {
+    click: () => void;
+    paused: boolean;
+}, __VLS_43: {
+    click: () => void;
+}, __VLS_58: {
+    prev: () => void;
+    next: () => void;
+}, __VLS_86: {};
+type __VLS_Slots = {} & {
+    close?: (props: typeof __VLS_1) => any;
+} & {
+    play?: (props: typeof __VLS_16) => any;
+} & {
+    fullscreen?: (props: typeof __VLS_43) => any;
+} & {
+    nav?: (props: typeof __VLS_58) => any;
+} & {
+    default?: (props: typeof __VLS_86) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DisplayVideoProps, {
+    videoRef: import("vue").Ref<HTMLVideoElement | null, HTMLVideoElement | null>;
+    paused: import("vue").Ref<boolean, boolean>;
+    play: () => Promise<void> | undefined;
+    pause: () => void | undefined;
+    load: () => void | undefined;
+    toggle: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (payload: DisplayVideoAction) => any;
+    prev: (payload: DisplayVideoAction) => any;
+    next: (payload: DisplayVideoAction) => any;
+    fullscreen: (payload: DisplayVideoAction) => any;
+    "play-click": (payload: DisplayVideoAction) => any;
+}, string, import("vue").PublicProps, Readonly<DisplayVideoProps> & Readonly<{
+    onClose?: ((payload: DisplayVideoAction) => any) | undefined;
+    onPrev?: ((payload: DisplayVideoAction) => any) | undefined;
+    onNext?: ((payload: DisplayVideoAction) => any) | undefined;
+    onFullscreen?: ((payload: DisplayVideoAction) => any) | undefined;
+    "onPlay-click"?: ((payload: DisplayVideoAction) => any) | undefined;
+}>, {
+    src: string;
+    fullHeight: boolean;
+    fullWidth: boolean;
+    fit: "cover" | "contain" | "fill" | "none" | "scale-down";
+    poster: string;
+    autoplay: boolean;
+    muted: boolean;
+    loop: boolean;
+    controls: boolean;
+    preload: "none" | "metadata" | "auto";
+    sources: DisplayVideoSource[];
+    tracks: DisplayVideoTrack[];
+    playsinline: boolean;
+    disablePictureInPicture: boolean;
+    disableRemotePlayback: boolean;
+    volume: number;
+    playbackRate: number;
+    startTime: number;
+    fullscreenButton: boolean;
+    interceptFullscreen: boolean;
+    fullscreenHitClass: string;
+    closeButton: boolean;
+    playButton: boolean;
+    playButtonAutoHide: boolean;
+    playButtonHideDelay: number;
+    clickToPlay: boolean;
+    navButton: 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,267 @@
+<template>
+  <div
+    class="relative inline-flex"
+    :class="[props.fullWidth && 'w-full', props.fullHeight && 'h-full']"
+  >
+    <!-- ปุ่มปิด -->
+    <slot v-if="props.closeButton" name="close" :click="onClose">
+      <div class="absolute top-[24px] left-[24px] z-10">
+        <Button circle color="dark" @click="onClose">
+          <Icon name="lucide:x" />
+        </Button>
+      </div>
+    </slot>
+
+    <!-- ปุ่มเล่น / หยุด -->
+    <slot
+      v-if="props.playButton"
+      name="play"
+      :click="onPlayClick"
+      :paused="paused"
+    >
+      <Transition
+        enter-active-class="transition duration-200 ease-out"
+        enter-from-class="opacity-0 scale-75"
+        enter-to-class="opacity-100 scale-100"
+        leave-active-class="transition duration-300 ease-out"
+        leave-from-class="opacity-100 scale-100"
+        leave-to-class="opacity-0 scale-150"
+      >
+        <div
+          v-show="showPlayButton"
+          class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10"
+        >
+          <Button
+            circle
+            color="dark"
+            class="w-[80px] h-[80px]"
+            :aria-label="paused ? '\u0E40\u0E25\u0E48\u0E19' : '\u0E2B\u0E22\u0E38\u0E14'"
+            @click="onPlayClick"
+          >
+            <Transition
+              mode="out-in"
+              enter-active-class="transition duration-150 ease-out"
+              enter-from-class="opacity-0 scale-75"
+              enter-to-class="opacity-100 scale-100"
+              leave-active-class="transition duration-100 ease-in"
+              leave-from-class="opacity-100 scale-100"
+              leave-to-class="opacity-0 scale-125"
+            >
+              <Icon
+                :key="paused ? 'play' : 'pause'"
+                :name="paused ? 'lucide:play' : 'lucide:pause'"
+                class="w-[56px] h-[56px]"
+              />
+            </Transition>
+          </Button>
+        </div>
+      </Transition>
+    </slot>
+
+    <!-- ปุ่มขยายเต็มจอ -->
+    <slot v-if="props.fullscreenButton" name="fullscreen" :click="onFullscreen">
+      <div class="absolute top-[16px] right-[16px] z-10">
+        <Button circle color="dark" @click="onFullscreen">
+          <Icon name="lucide:maximize" />
+        </Button>
+      </div>
+    </slot>
+
+    <!-- พื้นที่ใส ๆ ทับปุ่มขยายของ native ให้คลิกโดนของเราก่อน -->
+    <button
+      v-if="interceptFullscreen"
+      type="button"
+      class="absolute z-10 cursor-pointer"
+      :class="props.fullscreenHitClass"
+      aria-label="ขยาย"
+      @click="onFullscreen"
+    />
+
+    <!-- ปุ่มเลื่อนขึ้นลงวีดีโอ -->
+    <slot
+      v-if="props.navButton"
+      name="nav"
+      :prev="onPrev"
+      :next="onNext"
+    >
+      <div class="absolute top-1/2 right-[16px] -translate-y-1/2 z-10">
+        <div class="flex flex-col gap-[32px] items-center">
+          <Button circle color="dark" class="w-[50px] h-[50px]" @click="onPrev">
+            <Icon name="lucide:chevron-up" class="w-[32px] h-[32px]" />
+          </Button>
+          <Button circle color="dark" class="w-[50px] h-[50px]" @click="onNext">
+            <Icon name="lucide:chevron-down" class="w-[32px] h-[32px]" />
+          </Button>
+        </div>
+      </div>
+    </slot>
+
+    <video
+      ref="videoRef"
+      v-bind="$attrs"
+      :class="[
+  surfaceClickable && 'cursor-pointer',
+  props.playButton && 'display-video-no-native-overlay'
+]"
+      :src="props.src || void 0"
+      :poster="props.poster || void 0"
+      :preload="props.preload"
+      :controls="props.controls"
+      :autoplay="props.autoplay"
+      :loop="props.loop"
+      :muted="props.muted"
+      :playsinline="props.playsinline"
+      :crossorigin="props.crossorigin || void 0"
+      :controlslist="controlsList || void 0"
+      :disablepictureinpicture="props.disablePictureInPicture"
+      :disableremoteplayback="props.disableRemotePlayback"
+      :style="{
+  width: props.fullWidth ? '100%' : toSize(props.width),
+  height: props.fullHeight ? '100%' : toSize(props.height),
+  objectFit: props.fit
+}"
+      @click="onSurfaceClick"
+      @play="onPaused(false)"
+      @pause="onPaused(true)"
+      @ended="onPaused(true)"
+    >
+      <source
+        v-for="(source, i_source) in props.sources"
+        :key="i_source"
+        :src="source.src"
+        :type="source.type"
+        :media="source.media"
+      />
+      <track
+        v-for="(track, i_track) in props.tracks"
+        :key="i_track"
+        :src="track.src"
+        :kind="track.kind"
+        :srclang="track.srclang"
+        :label="track.label"
+        :default="track.default"
+      />
+      <slot />
+    </video>
+  </div>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+defineOptions({ inheritAttrs: false });
+const emit = defineEmits(["fullscreen", "close", "play-click", "prev", "next"]);
+const props = defineProps({
+  src: { type: String, required: false, default: "" },
+  sources: { type: Array, required: false, default: () => [] },
+  tracks: { type: Array, required: false, default: () => [] },
+  poster: { type: String, required: false, default: "" },
+  width: { type: [String, Number], required: false },
+  height: { type: [String, Number], required: false },
+  fullWidth: { type: Boolean, required: false, default: false },
+  fullHeight: { type: Boolean, required: false, default: false },
+  fit: { type: String, required: false, default: "contain" },
+  controls: { type: Boolean, required: false, default: true },
+  autoplay: { type: Boolean, required: false, default: false },
+  loop: { type: Boolean, required: false, default: false },
+  muted: { type: Boolean, required: false, default: false },
+  playsinline: { type: Boolean, required: false, default: true },
+  preload: { type: String, required: false, default: "metadata" },
+  crossorigin: { type: String, required: false },
+  controlsList: { type: String, required: false },
+  disablePictureInPicture: { type: Boolean, required: false, default: false },
+  disableRemotePlayback: { type: Boolean, required: false, default: false },
+  volume: { type: Number, required: false, default: 1 },
+  playbackRate: { type: Number, required: false, default: 1 },
+  startTime: { type: Number, required: false, default: 0 },
+  fullscreenButton: { type: Boolean, required: false, default: false },
+  interceptFullscreen: { type: Boolean, required: false, default: false },
+  fullscreenHitClass: { type: String, required: false, default: "bottom-0 right-0 w-[48px] h-[48px]" },
+  closeButton: { type: Boolean, required: false, default: false },
+  playButton: { type: Boolean, required: false, default: false },
+  playButtonAutoHide: { type: Boolean, required: false, default: true },
+  playButtonHideDelay: { type: Number, required: false, default: 600 },
+  clickToPlay: { type: Boolean, required: false, default: false },
+  navButton: { type: Boolean, required: false, default: false }
+});
+const videoRef = ref(null);
+const paused = ref(true);
+const showPlayButton = ref(true);
+let hideTimer;
+const clearHideTimer = () => {
+  if (hideTimer) clearTimeout(hideTimer);
+  hideTimer = void 0;
+};
+const surfaceClickable = computed(() => props.clickToPlay && !props.controls);
+const interceptFullscreen = computed(
+  () => props.interceptFullscreen && props.controls
+);
+const controlsList = computed(() => {
+  const list = (props.controlsList ?? "").split(" ").filter(Boolean);
+  if (props.fullscreenButton && !list.includes("nofullscreen")) {
+    list.push("nofullscreen");
+  }
+  return list.join(" ");
+});
+const toSize = (value) => {
+  if (value === void 0 || value === null || value === "") return void 0;
+  return typeof value === "number" || /^\d+(\.\d+)?$/.test(String(value)) ? `${value}px` : String(value);
+};
+const syncPlayback = () => {
+  const el = videoRef.value;
+  if (!el) return;
+  el.muted = props.muted;
+  el.volume = props.volume;
+  el.playbackRate = props.playbackRate;
+};
+onMounted(() => {
+  syncPlayback();
+  const el = videoRef.value;
+  if (!el) return;
+  if (props.startTime) el.currentTime = props.startTime;
+  onPaused(el.paused);
+});
+onBeforeUnmount(clearHideTimer);
+watch(() => [props.muted, props.volume, props.playbackRate], syncPlayback);
+const actionPayload = () => ({
+  video: videoRef.value,
+  currentTime: videoRef.value?.currentTime ?? 0,
+  paused: paused.value
+});
+const onPaused = (value) => {
+  paused.value = value;
+  clearHideTimer();
+  if (value || !props.playButtonAutoHide) {
+    showPlayButton.value = true;
+    return;
+  }
+  showPlayButton.value = true;
+  hideTimer = setTimeout(() => {
+    showPlayButton.value = false;
+  }, props.playButtonHideDelay);
+};
+const onSurfaceClick = () => {
+  if (!surfaceClickable.value) return;
+  onPlayClick();
+};
+const onPlayClick = () => {
+  const el = videoRef.value;
+  if (el) {
+    if (el.paused) el.play();
+    else el.pause();
+  }
+  emit("play-click", actionPayload());
+};
+const onFullscreen = () => emit("fullscreen", actionPayload());
+const onClose = () => emit("close", actionPayload());
+const onPrev = () => emit("prev", actionPayload());
+const onNext = () => emit("next", actionPayload());
+const play = () => videoRef.value?.play();
+const pause = () => videoRef.value?.pause();
+const load = () => videoRef.value?.load();
+const toggle = () => onPlayClick();
+defineExpose({ videoRef, paused, play, pause, load, toggle });
+</script>
+
+<style scoped>
+.display-video-no-native-overlay::-webkit-media-controls-overlay-play-button{display:none}
+</style>

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

@@ -0,0 +1,128 @@
+export interface DisplayVideoSource {
+    src: string;
+    type?: string;
+    media?: string;
+}
+export interface DisplayVideoTrack {
+    src: string;
+    kind?: "subtitles" | "captions" | "descriptions" | "chapters" | "metadata";
+    srclang?: string;
+    label?: string;
+    default?: boolean;
+}
+export interface DisplayVideoProps {
+    src?: string;
+    sources?: DisplayVideoSource[];
+    tracks?: DisplayVideoTrack[];
+    poster?: string;
+    width?: string | number;
+    height?: string | number;
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+    fit?: "cover" | "contain" | "fill" | "none" | "scale-down";
+    controls?: boolean;
+    autoplay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    playsinline?: boolean;
+    preload?: "none" | "metadata" | "auto";
+    crossorigin?: "anonymous" | "use-credentials";
+    controlsList?: string;
+    disablePictureInPicture?: boolean;
+    disableRemotePlayback?: boolean;
+    volume?: number;
+    playbackRate?: number;
+    startTime?: number;
+    fullscreenButton?: boolean;
+    interceptFullscreen?: boolean;
+    fullscreenHitClass?: string;
+    closeButton?: boolean;
+    playButton?: boolean;
+    playButtonAutoHide?: boolean;
+    playButtonHideDelay?: number;
+    clickToPlay?: boolean;
+    navButton?: boolean;
+}
+type DisplayVideoAction = {
+    video: HTMLVideoElement | null;
+    currentTime: number;
+    paused: boolean;
+};
+declare var __VLS_1: {
+    click: () => void;
+}, __VLS_16: {
+    click: () => void;
+    paused: boolean;
+}, __VLS_43: {
+    click: () => void;
+}, __VLS_58: {
+    prev: () => void;
+    next: () => void;
+}, __VLS_86: {};
+type __VLS_Slots = {} & {
+    close?: (props: typeof __VLS_1) => any;
+} & {
+    play?: (props: typeof __VLS_16) => any;
+} & {
+    fullscreen?: (props: typeof __VLS_43) => any;
+} & {
+    nav?: (props: typeof __VLS_58) => any;
+} & {
+    default?: (props: typeof __VLS_86) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DisplayVideoProps, {
+    videoRef: import("vue").Ref<HTMLVideoElement | null, HTMLVideoElement | null>;
+    paused: import("vue").Ref<boolean, boolean>;
+    play: () => Promise<void> | undefined;
+    pause: () => void | undefined;
+    load: () => void | undefined;
+    toggle: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (payload: DisplayVideoAction) => any;
+    prev: (payload: DisplayVideoAction) => any;
+    next: (payload: DisplayVideoAction) => any;
+    fullscreen: (payload: DisplayVideoAction) => any;
+    "play-click": (payload: DisplayVideoAction) => any;
+}, string, import("vue").PublicProps, Readonly<DisplayVideoProps> & Readonly<{
+    onClose?: ((payload: DisplayVideoAction) => any) | undefined;
+    onPrev?: ((payload: DisplayVideoAction) => any) | undefined;
+    onNext?: ((payload: DisplayVideoAction) => any) | undefined;
+    onFullscreen?: ((payload: DisplayVideoAction) => any) | undefined;
+    "onPlay-click"?: ((payload: DisplayVideoAction) => any) | undefined;
+}>, {
+    src: string;
+    fullHeight: boolean;
+    fullWidth: boolean;
+    fit: "cover" | "contain" | "fill" | "none" | "scale-down";
+    poster: string;
+    autoplay: boolean;
+    muted: boolean;
+    loop: boolean;
+    controls: boolean;
+    preload: "none" | "metadata" | "auto";
+    sources: DisplayVideoSource[];
+    tracks: DisplayVideoTrack[];
+    playsinline: boolean;
+    disablePictureInPicture: boolean;
+    disableRemotePlayback: boolean;
+    volume: number;
+    playbackRate: number;
+    startTime: number;
+    fullscreenButton: boolean;
+    interceptFullscreen: boolean;
+    fullscreenHitClass: string;
+    closeButton: boolean;
+    playButton: boolean;
+    playButtonAutoHide: boolean;
+    playButtonHideDelay: number;
+    clickToPlay: boolean;
+    navButton: 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -64,15 +64,15 @@ 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;
-    background: boolean;
-    modal: boolean;
+    crossorigin: "" | "anonymous" | "use-credentials";
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
-    crossorigin: "" | "anonymous" | "use-credentials";
+    modal: boolean;
     guides: boolean;
     highlight: boolean;
+    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

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

@@ -64,15 +64,15 @@ 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;
-    background: boolean;
-    modal: boolean;
+    crossorigin: "" | "anonymous" | "use-credentials";
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
-    crossorigin: "" | "anonymous" | "use-credentials";
+    modal: boolean;
     guides: boolean;
     highlight: boolean;
+    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

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

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

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

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

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

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

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

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

package/dist/runtime/components/input/input-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;
     removable: boolean;

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;
     removable: boolean;

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

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

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

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

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

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

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

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

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

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

package/dist/runtime/components/modal/suggest-edit-place/place-address.d.vue.ts

@@ -13,18 +13,18 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:editType": (value: string) => any;
     "update:latLng": (value: {
         lat: number;
         lng: number;
     } | null) => any;
-    "update:editType": (value: string) => any;
     "update:addressValue": (value: InputAddressValue) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:editType"?: ((value: string) => any) | undefined;
     "onUpdate:latLng"?: ((value: {
         lat: number;
         lng: number;
     } | null) => any) | undefined;
-    "onUpdate:editType"?: ((value: string) => any) | undefined;
     "onUpdate:addressValue"?: ((value: InputAddressValue) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/modal/suggest-edit-place/place-address.vue.d.ts

@@ -13,18 +13,18 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:editType": (value: string) => any;
     "update:latLng": (value: {
         lat: number;
         lng: number;
     } | null) => any;
-    "update:editType": (value: string) => any;
     "update:addressValue": (value: InputAddressValue) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:editType"?: ((value: string) => any) | undefined;
     "onUpdate:latLng"?: ((value: {
         lat: number;
         lng: number;
     } | null) => any) | undefined;
-    "onUpdate:editType"?: ((value: string) => any) | undefined;
     "onUpdate:addressValue"?: ((value: InputAddressValue) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

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

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

@@ -20,7 +20,8 @@ export const buttonVariants = cva(
         destructive: "text-destructive",
         info: "text-info-foreground",
         warning: "text-warning",
-        success: "text-success"
+        success: "text-success",
+        dark: "text-dark"
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
@@ -68,6 +69,11 @@ export const buttonVariants = cva(
         color: "success",
         class: "bg-success text-white hover:bg-success/90"
       },
+      {
+        variant: "default",
+        color: "dark",
+        class: "bg-dark text-white hover:bg-dark/90"
+      },
       {
         variant: "outline",
         color: "default",
@@ -103,6 +109,11 @@ export const buttonVariants = cva(
         color: "success",
         class: "border border-success text-success hover:text-success/90 bg-white"
       },
+      {
+        variant: "outline",
+        color: "dark",
+        class: "border border-dark text-dark hover:text-dark/80 bg-white"
+      },
       {
         variant: "ghost",
         color: "default",
@@ -138,6 +149,11 @@ export const buttonVariants = cva(
         color: "success",
         class: "text-success hover:bg-success/90 hover:text-white"
       },
+      {
+        variant: "ghost",
+        color: "dark",
+        class: "text-dark hover:bg-dark hover:text-white"
+      },
       {
         variant: "icon",
         color: "default",
@@ -173,12 +189,22 @@ export const buttonVariants = cva(
         color: "success",
         class: "text-success hover:bg-success/90 hover:text-white"
       },
+      {
+        variant: "icon",
+        color: "dark",
+        class: "text-dark hover:bg-dark hover:text-white"
+      },
       // glass variant - โปร่งบนพื้นรูป ไอคอนขาวตลอด hover ถึงเป็นสีเต็ม
       {
         variant: "glass",
         color: "primary",
         class: "bg-black/30 text-white hover:bg-primary"
       },
+      {
+        variant: "glass",
+        color: "dark",
+        class: "bg-black/30 text-white hover:bg-dark"
+      },
       // text variant - just plain text with color, no background or hover effects
       {
         variant: "text",
@@ -215,6 +241,11 @@ export const buttonVariants = cva(
         color: "success",
         class: "text-success hover:opacity-80"
       },
+      {
+        variant: "text",
+        color: "dark",
+        class: "text-dark hover:opacity-80"
+      },
       // link variant - inline link style, primary blue by default, no padding
       {
         variant: "link",
@@ -250,6 +281,11 @@ export const buttonVariants = cva(
         variant: "link",
         color: "success",
         class: "text-success hover:opacity-80"
+      },
+      {
+        variant: "link",
+        color: "dark",
+        class: "text-dark hover:opacity-80"
       }
     ],
     defaultVariants: {

package/package.json

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